Skip to main content

Address Selection Modal

Address list response and selected-address event.

What This Example Demonstrates​

The fixture separates the address API result, the modal's view state, and the event emitted after the customer selects an address. This lets frontend teams test loading, choice, and confirmation behavior without coupling the component to a specific address service.

How to Use It​

Use the response as mock or Storybook data and pass only the required view fields to the modal. When an address is selected, send a stable address reference to the backend. Avoid copying the full address into logs, analytics events, or ACP session metadata.

{
  "description": "Extended logical payloads for the reference commerce UI. These examples can be used as mock API responses, Storybook fixtures, or frontend integration test data.",
  "addressSelection": {
    "apiResponse": {
      "addresses": [
        {
          "id": 42,
          "title": "Home",
          "first_name": "Example",
          "last_name": "User",
          "address": "Example Street 1",
          "city": "Example City",
          "district": "Manhattan",
          "phone": "+15551112233",
          "is_default": true
        },
        {
          "id": 43,
          "title": "Office",
          "first_name": "Example",
          "last_name": "User",
          "address": "Example Avenue 99",
          "city": "Example City",
          "district": "Brooklyn",
          "phone": "+15551112233",
          "is_default": false
        }
      ]
    },
    "AddressSelectionModalProps": {
      "isOpen": true,
      "isLoading": false
    },
    "selectedAddressEvent": {
      "type": "ADDRESS_SELECTED",
      "address": {
        "id": 42,
        "title": "Home",
        "first_name": "Example",
        "last_name": "User",
        "address": "Example Street 1",
        "city": "Example City",
        "district": "Manhattan",
        "phone": "+15551112233",
        "is_default": true
      }
    }
  }
}