Skip to main content

CartOverview

Renders a structured checkout summary displaying invoice and delivery addresses, payment and shipping details, optional reference and notes fields, terms and conditions acceptance, and a purchase button.

Usage​

Basic checkout overview​

import CartOverview from '@/components/propeller/CartOverview';

<CartOverview
  graphqlClient={graphqlClient}
  cart={cart}
  onPurchaseButtonClick={(cart, reference, notes) => handlePlaceOrder(reference, notes)}
/>
<CartOverview
  graphqlClient={graphqlClient}
  cart={cart}
  title="Order Summary"
  labels={{
    invoiceAddress: 'Billing Address',
    deliveryAddress: 'Shipping Address',
    payment: 'Payment Method:',
    carrier: 'Shipping Provider:',
    deliveryDate: 'Expected Delivery:',
    referenceLabel: 'PO Number (Optional)',
    referencePlaceholder: 'Enter your PO number',
    notesLabel: 'Comments (Optional)',
    notesPlaceholder: 'Any special delivery instructions?',
    termsPrefix: 'I accept the',
    termsLink: 'General Terms & Conditions',
    purchaseButton: 'Confirm Order',
    processing: 'Placing order...',
  }}
  onTermsAndConditionsClick={() => window.open('/terms-conditions', '_blank')}
  onPurchaseButtonClick={(cart, reference, notes) => handlePlaceOrder(reference, notes)}
/>

Minimal read-only summary (no inputs, no purchase button)​

<CartOverview
  graphqlClient={graphqlClient}
  cart={cart}
  title="Your Order"
  showNotes={false}
  showReference={false}
  showTermsAndConditions={false}
  showPurchaseButton={false}
/>

B2B checkout with reference required​

<CartOverview
  graphqlClient={graphqlClient}
  cart={cart}
  title="Place B2B Order"
  showNotes={true}
  showReference={true}
  labels={{
    referenceLabel: 'Purchase Order Number',
    referencePlaceholder: 'PO-00000',
  }}
  onPurchaseButtonClick={(cart, reference, notes) => {
    if (!reference) {
      toast.error('Please enter a PO number');
      return;
    }
    submitOrder(cart, reference, notes);
  }}
/>

Configuration​

Required​

PropTypeDescription
graphqlClientGraphQLClientGraphQL client instance for the Propeller SDK
cartCartThe shopping cart object containing addresses, payment data, and postage data

Display toggles​

PropTypeDefaultDescription
showNotesbooleantrueShow the order notes textarea
showReferencebooleantrueShow the reference/PO number input
showTermsAndConditionsbooleantrueShow the terms and conditions checkbox
showPurchaseButtonbooleantrueShow the "Place Order" button

Appearance​

PropTypeDefaultDescription
overviewContainerClassstring'cart-overview'CSS class applied to the root container
titlestring—Optional heading displayed above the overview
labelsRecord<string, string>—Override any default label text (see label keys below)

Callbacks​

PropTypeDescription
onTermsAndConditionsClick() => voidFires when the terms and conditions link is clicked (default click is prevented)
onPurchaseButtonClick(cart: Cart, reference: string, notes: string) => voidFires when the purchase button is clicked; receives the cart, reference text, and notes text

Labels​

All labels can be overridden through the labels prop using these keys:

KeyDefault value
invoiceAddress"Invoice Address"
deliveryAddress"Delivery Address"
payment"Payment:"
carrier"Carrier:"
deliveryDate"Delivery Date:"
referenceLabel"Reference (Optional)"
referencePlaceholder"Your reference number"
notesLabel"Order Notes (Optional)"
notesPlaceholder"Special instructions or comments"
termsPrefix"I agree to the"
termsLink"Terms and Conditions"
purchaseButton"Place Order"
processing"Processing..."

Behavior​

Address display​

  • Invoice and delivery addresses are rendered in a two-column grid (single column on mobile).
  • Each address shows company name, full name, street line, postal code + city, country, and email when available.
  • If an address has no street value, the entire address block is hidden.

Payment, carrier, and delivery date​

  • Displayed in a summary card below the addresses.
  • Each row only appears when the corresponding cart field has a value.

Reference and notes​

  • Both fields are managed as internal component state.
  • Values are passed to onPurchaseButtonClick when the user submits the order.
  • Either field can be hidden independently via showReference and showNotes.

Terms and conditions​

  • When showTermsAndConditions is true, a checkbox must be checked before the purchase button becomes active.
  • Clicking the "Terms and Conditions" link calls onTermsAndConditionsClick and prevents default navigation.

Purchase button​

  • Disabled when terms are required but not yet accepted, or when loading is active.
  • Clicking it sets an internal loading flag (shows a spinner and "Processing..." text) and fires onPurchaseButtonClick.
  • The parent is responsible for resetting the component (e.g., navigating away on success or re-rendering on error).

SDK Services and Cart Fields​

CartOverview does not call any SDK services directly. It reads the following fields from the Cart object passed via props:

Cart fieldUsed for
cart.invoiceAddressDisplays the billing address (company, name, street, postal code, city, country, email)
cart.deliveryAddressDisplays the shipping address (same fields as invoice address)
cart.paymentData.methodShows the selected payment method name
cart.postageData.carrierShows the selected shipping carrier name
cart.postageData.requestDateShows the requested delivery date, formatted via toLocaleDateString()

The graphqlClient prop is accepted for interface consistency with other components but is not used internally by CartOverview itself. The parent page is responsible for populating the Cart object with address and payment/postage data before passing it in.

import { Cart, CartAddress, GraphQLClient } from 'propeller-sdk-v2';
  • CartAddress — Contains company, firstName, middleName, lastName, street, number, numberExtension, postalCode, city, country, email
  • cart.paymentData — Contains method (string)
  • cart.postageData — Contains carrier (string), requestDate (date string)