Enhance Customer Page with User Address Display

Repos that we’ll change

• https://github.com/rbilabs/intl-admin-app

Overview

The goal of this feature is to improve the Customer Page by adding a component to display the available user Addresses. This development involves implementing a GraphQL query to fetch saved addresses from the backend and presenting them to the Customer Page.

Open

component’s layout

Figma: https://www.figma.com/file/Ti8Qr6jeSEPaencIDyYfcJ/branch/HybhFYrAdYY5DqJSuyvzml/Burger-King?type=design&node-id=667-17160&mode=design&t=vF9eD1ycn4nts2vc-0

Requirements

• Display individual user addresses in the customer page according to design available in Figma, receiving address details as props and render them.

• Implement GraphQL query that needs to request the necessary address line field to be loaded at Customer Details Page.

• Check TypeScript interface to ensure type safety of the component data.

Solutions

1. Update Customer GraphQL Query to include the identified address fields for both dropoff and storeAddress, ensuring to fetch all the necessary information to display at the Delivery Card component.

   Query ExampleQuery($customerId: String) { Customer(customerId: $customerId) { orders { orders { delivery { dropoff { addressLine1 } } cart { storeAddress { addressLine1 } } } } } }

2. Create a new component that fetches the necessary data using the useQuery hook. It maps through the orders and extracts the deliveryAddress from each order, using a set (singleDeliveryAddresses) to keep track of unique delivery addresses and ensures that repeated addresses are not displayed.