Order

A headless component for displaying order details after an order has been placed.

Usage

import { Order } from '@haus-storefront-react/order'
import { Price } from '@haus-storefront-react/common-ui'
;<Order.Root orderCode="ABC123">
  {({ order, isLoading, error, isError, isSuccess }) => (
    <div>
      {isLoading && <div>Loading...</div>}
      {isError && error && <div>Error: {error.message}</div>}
      {isSuccess && order && (
        <div>
          <h2>Thank you for your order!</h2>
          <div>Order #{order.code}</div>
          <div>
            Order Placed:{' '}
            {order.orderPlacedAt ? new Date(order.orderPlacedAt).toLocaleDateString() : 'Unknown'}
          </div>
          <div>Status: {order.state}</div>

          {/* Order Items */}
          <Order.Items.Root>
            {order.lines.map((line) => (
              <Order.Items.Item key={line.id} orderLine={line}>
                <Order.Items.Image />
                <Order.Items.Price />
                {line.quantity} st
              </Order.Items.Item>
            ))}
          </Order.Items.Root>

          {/* Shipping Lines */}
          <Order.ShippingLines>
            {order.shippingLines?.map((shippingLine) => (
              <Order.ShippingLine
                key={shippingLine.id || shippingLine.shippingMethod.id}
                shippingLine={shippingLine}
              >
                <Order.ShippingLine.Name />
                <Order.ShippingLine.Price />
              </Order.ShippingLine>
            ))}
          </Order.ShippingLines>

          {/* Order Summary */}
          <Order.Summary>
            {({ subTotal, shipping, totalPrice, currencyCode }) => (
              <div>
                <div>
                  <span>Subtotal:</span>
                  <Price.Root price={subTotal} priceWithTax={subTotal} currencyCode={currencyCode}>
                    <Price.Amount withCurrency />
                    <Price.Currency />
                  </Price.Root>
                </div>
                <div>
                  <span>Shipping:</span>
                  <Price.Root price={shipping} priceWithTax={shipping} currencyCode={currencyCode}>
                    <Price.Amount withCurrency />
                    <Price.Currency />
                  </Price.Root>
                </div>
                <div>
                  <span>Total:</span>
                  <Price.Root
                    price={totalPrice}
                    priceWithTax={totalPrice}
                    currencyCode={currencyCode}
                  >
                    <Price.Amount withCurrency />
                    <Price.Currency />
                  </Price.Root>
                </div>
              </div>
            )}
          </Order.Summary>

          {/* Addresses */}
          <Order.Addresses.Root>
            <Order.Addresses.Shipping>
              {(shippingAddress) => (
                <>
                  <p>{shippingAddress?.fullName}</p>
                  <p>{shippingAddress?.streetLine1}</p>
                  {shippingAddress?.streetLine2 && <p>{shippingAddress.streetLine2}</p>}
                  <p>
                    {shippingAddress?.city}, {shippingAddress?.province}{' '}
                    {shippingAddress?.postalCode}
                  </p>
                  <p>{shippingAddress?.countryCode}</p>
                </>
              )}
            </Order.Addresses.Shipping>
            <Order.Addresses.Billing>
              {(billingAddress) => (
                <>
                  <p>{billingAddress?.fullName}</p>
                  <p>{billingAddress?.streetLine1}</p>
                  {billingAddress?.streetLine2 && <p>{billingAddress.streetLine2}</p>}
                  <p>
                    {billingAddress?.city}, {billingAddress?.province} {billingAddress?.postalCode}
                  </p>
                  <p>{billingAddress?.countryCode}</p>
                </>
              )}
            </Order.Addresses.Billing>
          </Order.Addresses.Root>
        </div>
      )}
    </div>
  )}
</Order.Root>

Components

Order.Root

Main component that fetches order data and provides context to child components. Accepts an orderCode prop and provides order data through a render prop function.

Props:

• orderCode: string - The order code to fetch
• children: (props: OrderContextValue) => React.ReactNode - Render prop function

Returns:

• order: Order | null - The order data
• isLoading: boolean - Loading state
• error: Error | null - Error state
• isError: boolean - Whether there's an error
• isSuccess: boolean - Whether the request was successful

Order.Items

Container for order items and subcomponents.

<Order.Items.Root>
  {order.lines.map((line) => (
    <Order.Items.Item key={line.id} orderLine={line}>
      <Order.Items.Image />
      <Order.Items.Price />
      {line.quantity} st
    </Order.Items.Item>
  ))}
</Order.Items.Root>

Order.Items.Item

• orderLine: The order line data to display

Order.Items.Image

• Displays the product image for the order line

Order.Items.Price

• Displays the price for the order line

Order.ShippingLines

Container for shipping lines.

<Order.ShippingLines>
  {order.shippingLines?.map((shippingLine) => (
    <Order.ShippingLine
      key={shippingLine.id || shippingLine.shippingMethod.id}
      shippingLine={shippingLine}
    >
      <Order.ShippingLine.Name />
      <Order.ShippingLine.Price />
    </Order.ShippingLine>
  ))}
</Order.ShippingLines>

Order.ShippingLine

Individual shipping line component with subcomponents:

• Order.ShippingLine.Name: Displays the shipping method name
• Order.ShippingLine.Price: Displays the shipping price

Order.Summary

Order summary with totals and checkout.

<Order.Summary>
  {({ subTotal, shipping, totalPrice, currencyCode }) => (
    <div>
      <div>Subtotal: {subTotal}</div>
      <div>Shipping: {shipping}</div>
      <div>Total: {totalPrice}</div>
    </div>
  )}
</Order.Summary>

Order.Addresses

Container for addresses and subcomponents.

<Order.Addresses.Root>
  <Order.Addresses.Shipping>{/* ... */}</Order.Addresses.Shipping>
  <Order.Addresses.Billing>{/* ... */}</Order.Addresses.Billing>
</Order.Addresses.Root>

Order.Addresses.Shipping

• Render prop for shipping address

Order.Addresses.Billing

• Render prop for billing address