Versions Compared

Old Version 1

changes.mady.by.user Cavalcante, Marcelo (Deactivated)

Saved on

compared with

New Version Current

changes.mady.by.user Cavalcante, Marcelo (Deactivated)

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  • 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 fields (e.g. street, number, restaurant name…) line field to be loaded at Customer Details Page.

  • Create a new 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.

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

  1. 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.