Skip to main content

Order Confirmation Modal

Order confirmation modal state examples.

What This Example Demonstrates​

This is the final review surface before the application starts an order or reservation. It combines cart items, the chosen shipping address, totals, and a processing state so the customer can verify the operation they are authorizing.

How to Use It​

Render the backend-confirmed totals and masked customer details. Set isProcessing as soon as the customer submits and prevent a second submission until the first request finishes. A processing modal must not be presented as a completed order; wait for the authoritative order response.

{
  "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.",
  "orderConfirmationModal": {
    "productOrder": {
      "OrderConfirmationModalProps": {
        "isOpen": true,
        "cartItems": [
          {
            "id": "10012",
            "name": "Black Waterproof Hiking Jacket / Medium",
            "price": "$129.90",
            "image": "https://cdn.example.com/products/jacket-black-main.jpg",
            "storeName": "Example Brand Store"
          }
        ],
        "reservations": [],
        "shippingAddress": {
          "id": 42,
          "title": "Home",
          "first_name": "Example",
          "last_name": "User",
          "address": "Example Street 1",
          "city": "Example City",
          "district": "Manhattan",
          "phone": "+15551112233"
        },
        "totalAmount": "$129.90",
        "isProcessing": false,
        "isReservation": false
      }
    },
    "processingState": {
      "OrderConfirmationModalProps": {
        "isOpen": true,
        "cartItems": [
          {
            "id": "10012",
            "name": "Black Waterproof Hiking Jacket / Medium",
            "price": "$129.90",
            "image": "https://cdn.example.com/products/jacket-black-main.jpg",
            "storeName": "Example Brand Store"
          }
        ],
        "reservations": [],
        "shippingAddress": {
          "id": 42,
          "title": "Home",
          "first_name": "Example",
          "last_name": "User",
          "address": "Example Street 1",
          "city": "Example City",
          "district": "Manhattan",
          "phone": "+15551112233"
        },
        "totalAmount": "$129.90",
        "isProcessing": true,
        "isReservation": false
      }
    }
  }
}