orionplace-react 0.1.0 → 0.2.1

package/templates/components/orionplace/cart/StorefrontCart.tsx

@@ -0,0 +1,937 @@
+'use client';
+
+import {
+  useEffect,
+  useRef,
+  useState,
+  type FormEvent,
+} from 'react';
+import {
+  useOrionplace,
+  useOrionplaceProductsStore,
+  useOrionplaceSelections,
+} from '@/providers/OrionplaceProvider';
+import { selectIsAuthenticated } from '@/stores/orionplace';
+import { ECartState } from '@/interfaces/orionplace/cart/ICartActions';
+import type {
+  ICartDelivery,
+  IDeliveryType,
+} from '@/interfaces/orionplace/cart/ICartData';
+import type { IProduct } from '@/interfaces/orionplace/products/IProduct';
+import type { IUserAddress } from '@/interfaces/orionplace/address/IUserAddress';
+import type { IProductSecondaryVariantRequest } from '@/interfaces/orionplace/products/IProductSecondaryVariantRequest';
+import type { IOrderCreated } from '@/interfaces/orionplace/orders/IOrderActions';
+import {
+  cartDataFromResponse,
+  cartDeliveries,
+  cartDeliveryPointItems,
+  cartHasMoney,
+  cartIsCheckout,
+  cartOrderReady,
+  cartRequestHasFieldErrors,
+  orderCreatedFromResponse,
+  type StorefrontCartData,
+} from '@/lib/orionplace/cartController';
+import { cartSnapshotProducts } from '@/lib/orionplace/cartSnapshot';
+import {
+  cartShipmentOrigin,
+  cartShipmentTitle,
+  cartSplitNotice,
+} from '@/lib/orionplace/cartShipment';
+import {
+  cartLabels,
+  cartPaymentLinkError,
+} from '@/lib/orionplace/cartLabels';
+import {
+  cartPromoNotice,
+  cartPromoRefusal,
+  type ICartPromoRefusal,
+} from '@/lib/orionplace/cartPromo';
+import { featureLabels } from '@/lib/orionplace/featureLabels';
+import { revealNotice } from '@/lib/orionplace/notice';
+import { formatCurrency } from '@/lib/orionplace/currency';
+import {
+  CartLineItem,
+  type CartLineItemAction,
+} from './CartLineItem';
+import {
+  CartCheckoutDetails,
+  type CartCheckoutDetailsAction,
+  type CartCheckoutDetailsProps,
+} from './CartCheckoutDetails';
+import {
+  CartDeliverySelector,
+  type CartDeliveryChangeAction,
+  type CartDeliveryMethodsAction,
+  type CartDeliveryPointsAction,
+} from './CartDeliverySelector';
+import type {
+  CartItemOptionAction,
+  CartItemOptionsProps,
+} from './CartItemOptions';
+import { PaymentPanel } from '@/components/orionplace/payments/PaymentPanel';
+import { OrionplaceEmptyState } from '@/components/orionplace/shared/OrionplaceEmptyState';
+import styles from './StorefrontCart.module.css';
+import { apiErrorMessage } from '@/lib/orionplace/api';
+
+type WithSignal<Action> = Action extends unknown
+  ? Action & { signal: AbortSignal }
+  : never;
+
+type StorefrontCartMutation =
+  | CartLineItemAction
+  | CartCheckoutDetailsAction
+  | CartDeliveryChangeAction
+  | CartItemOptionAction
+  | {
+      endpoint: 'cart_customer_state_first_set';
+      request: { state: ECartState };
+    }
+  | {
+      endpoint: 'cart_customer_reboot';
+      request: Record<string, never>;
+    }
+  | {
+      endpoint: 'marketing_promo_promo_apply';
+      request: { promocode: string };
+    }
+  | {
+      endpoint: 'marketing_promo_promo_remove';
+      request: Record<string, never>;
+    };
+
+export type StorefrontCartRequestAction =
+  | WithSignal<StorefrontCartMutation>
+  | CartDeliveryMethodsAction
+  | CartDeliveryPointsAction
+  | {
+      endpoint: 'cart_guest_get';
+      request: Record<string, never>;
+      signal: AbortSignal;
+    }
+  | {
+      endpoint: 'cart_guest_clean';
+      request: Record<string, never>;
+      signal: AbortSignal;
+    }
+  | {
+      endpoint: 'orders_create';
+      request: Record<string, never>;
+      signal: AbortSignal;
+    };
+
+export interface StorefrontCartProps {
+  initialData?: StorefrontCartData;
+  initialError?: string;
+  loadOnMount?: boolean;
+  addressFormProps?: CartCheckoutDetailsProps['addressFormProps'];
+  productHref?: (productId: number, locale: string) => string;
+  browseHref?: (locale: string) => string;
+  ordersHref?: (locale: string, orderId?: number) => string;
+  onRequest: (
+    action: StorefrontCartRequestAction,
+  ) => Promise<unknown> | unknown;
+  onRequireSignIn?: (returnHref: string) => void;
+  onOpenOrder?: (orderId: number) => void;
+  onDataChange?: (data: StorefrontCartData | undefined) => void;
+  onAddressSaved?: (addresses: IUserAddress[]) => void;
+  onRequestSecondaryVariants?: (
+    request: IProductSecondaryVariantRequest,
+  ) => void;
+  onOrderCreated?: (order: IOrderCreated) => void;
+}
+
+const icons = {
+  store: [
+    'M4 10v10h16V10',
+    'M3 10 5 4h14l2 6',
+    'M10 20v-5h4v5',
+  ],
+  digital: [
+    'M12 4v11',
+    'm7.5 10.5 4.5 4.5 4.5-4.5',
+    'M5 20h14',
+  ],
+};
+
+// OrionMarketplace's messages, or the translated fallback for any other error.
+function requestError(error: unknown, fallback: string): string {
+  return apiErrorMessage(error) || fallback;
+}
+
+function aborted(signal: AbortSignal) {
+  if (signal.aborted) {
+    const error = new Error('The cart request was cancelled.');
+    error.name = 'AbortError';
+    throw error;
+  }
+}
+
+export function StorefrontCart({
+  initialData,
+  initialError = '',
+  loadOnMount,
+  addressFormProps,
+  productHref,
+  browseHref = (locale) => `/browse?locale=${encodeURIComponent(locale)}`,
+  ordersHref = (locale, orderId) => {
+    const query = new URLSearchParams({ locale });
+    if (orderId) {
+      query.set('order', String(orderId));
+    }
+    return `/orders?${query}`;
+  },
+  onRequest,
+  onRequireSignIn,
+  onOpenOrder,
+  onDataChange,
+  onAddressSaved,
+  onRequestSecondaryVariants,
+  onOrderCreated,
+}: StorefrontCartProps) {
+  const authenticated = useOrionplace(selectIsAuthenticated);
+  const locale = useOrionplaceSelections((state) => state.localeCode);
+  const currencyId = useOrionplaceSelections((state) => state.currencyId);
+  const currencies = useOrionplaceSelections((state) => state.init?.currencies);
+  const currency = currencies?.[currencyId];
+  const productStore = useOrionplaceProductsStore();
+  const labels = cartLabels(locale);
+  const common = featureLabels(locale);
+  const automaticLoad = loadOnMount ?? initialData === undefined;
+  const requestRef = useRef(onRequest);
+  const task = useRef<AbortController | undefined>(undefined);
+  const previousAuthentication = useRef(authenticated);
+  const [data, setData] = useState(initialData);
+  const [loaded, setLoaded] = useState(initialData !== undefined);
+  const [pending, setPending] = useState(
+    automaticLoad && initialData === undefined ? 'load' : '',
+  );
+  const [error, setError] = useState(initialError);
+  const errorNotice = useRef<HTMLParagraphElement>(null);
+  const [needsRefresh, setNeedsRefresh] = useState(false);
+  const [revision, setRevision] = useState(0);
+  const [created, setCreated] = useState<IOrderCreated>();
+  const [orderUncertain, setOrderUncertain] = useState(false);
+  const [clearConfirmation, setClearConfirmation] = useState(false);
+  const [promo, setPromo] = useState('');
+  // Why the last promo code was refused; the next cart answer replaces it.
+  const [promoRefusal, setPromoRefusal] = useState<ICartPromoRefusal>();
+  const [paymentOpen, setPaymentOpen] = useState(true);
+  requestRef.current = onRequest;
+
+  const summary = data?.cart;
+  const checkout = cartIsCheckout(data);
+  const deliveries = cartDeliveries(data);
+  const items = checkout ? [] : (data?.cart_data as IProduct[] ?? []);
+  const busy = Boolean(pending);
+  const disabled = busy || needsRefresh || orderUncertain;
+  const checkoutDisabled = disabled || (
+    authenticated && !summary?.cart_address
+  );
+  const orderReady = cartOrderReady(data);
+  // The order exists without a payment link: the customer pays from it.
+  const paymentError = typeof created?.payment_error === 'string' &&
+    created.payment_error.trim()
+    ? cartPaymentLinkError(labels.paymentLinkFailed, created.payment_error)
+    : '';
+  const splitNotice = cartSplitNotice(deliveries, labels);
+  // A refused code first, otherwise the cart's own `promo_notice`: an
+  // attached code without a discount, or a code the cart removed.
+  const promoSource = promoRefusal ? promoRefusal.notice : summary?.promo_notice;
+  const promoText = cartPromoNotice(
+    promoSource,
+    labels,
+    currencyId,
+    currency,
+    locale,
+    currencies,
+  );
+  const promoNotice = promoRefusal
+    ? { state: 'refused', text: promoText?.text || promoRefusal.message }
+    : promoText
+      ? {
+          state: promoSource?.is_removed ? 'removed' : 'attached',
+          text: promoText.text,
+        }
+      : undefined;
+  const totals = [
+    { label: labels.goods, value: summary?.prices.total_price_no_discount },
+    ...(cartHasMoney(summary?.prices.discount_value, currencyId)
+      ? [{ label: labels.discount, value: summary?.prices.discount_value }]
+      : []),
+    ...(cartHasMoney(summary?.prices.promo_value, currencyId)
+      ? [{ label: labels.promoDiscount, value: summary?.prices.promo_value }]
+      : []),
+    ...(cartHasMoney(summary?.prices.delivery_discount, currencyId)
+      ? [{
+          label: labels.deliveryDiscount,
+          value: summary?.prices.delivery_discount,
+        }]
+      : []),
+    {
+      label: labels.delivery,
+      value: summary?.prices.total_delivery_price_after_promo,
+    },
+    { label: labels.total, value: summary?.prices.summary_price },
+  ];
+
+  function synchronize(next: StorefrontCartData | undefined) {
+    productStore.getState().setProductCounters({
+      c_cart_positions: next?.cart.c_cart_positions ?? 0,
+    });
+    productStore.getState().synchronizeProductCart(
+      next ? cartSnapshotProducts(next) : [],
+    );
+  }
+
+  function commitCart(next: StorefrontCartData) {
+    setData(next);
+    setLoaded(true);
+    setNeedsRefresh(false);
+    setPromoRefusal(undefined);
+    setRevision((value) => value + 1);
+    synchronize(next);
+    onDataChange?.(next);
+  }
+
+  async function fetchCart(signal: AbortSignal) {
+    const result = await requestRef.current({
+      endpoint: 'cart_guest_get',
+      request: {},
+      signal,
+    });
+    aborted(signal);
+    const next = cartDataFromResponse(result);
+    commitCart(next);
+
+    return next;
+  }
+
+  async function run<T>(name: string, operation: (signal: AbortSignal) => Promise<T>) {
+    if (task.current) {
+      return undefined;
+    }
+    const controller = new AbortController();
+    task.current = controller;
+    setPending(name);
+    setError('');
+    try {
+      return await operation(controller.signal);
+    } catch (reason) {
+      if (!(reason instanceof Error && reason.name === 'AbortError')) {
+        setError(requestError(reason, common.failed));
+      }
+      throw reason;
+    } finally {
+      if (task.current === controller) {
+        task.current = undefined;
+        setPending('');
+      }
+    }
+  }
+
+  function load() {
+    return run('load', fetchCart);
+  }
+
+  async function change(action: StorefrontCartMutation) {
+    if (disabled) {
+      return false;
+    }
+
+    return run(action.endpoint, async (signal) => {
+      await requestRef.current({ ...action, signal });
+      aborted(signal);
+      setNeedsRefresh(true);
+      await fetchCart(signal);
+
+      return true;
+    });
+  }
+
+  async function clearCart() {
+    if (disabled) {
+      return;
+    }
+    return run('cart_guest_clean', async (signal) => {
+      await requestRef.current({
+        endpoint: 'cart_guest_clean',
+        request: {},
+        signal,
+      });
+      aborted(signal);
+      setData(undefined);
+      setLoaded(true);
+      setNeedsRefresh(false);
+      setClearConfirmation(false);
+      synchronize(undefined);
+      onDataChange?.(undefined);
+    });
+  }
+
+  async function placeOrder() {
+    if (disabled || !orderReady || created) {
+      return;
+    }
+    return run('orders_create', async (signal) => {
+      try {
+        const result = await requestRef.current({
+          endpoint: 'orders_create',
+          request: {},
+          signal,
+        });
+        aborted(signal);
+        const order = orderCreatedFromResponse(result);
+        setCreated(order);
+        setData(undefined);
+        setPaymentOpen(true);
+        synchronize(undefined);
+        onDataChange?.(undefined);
+        onOrderCreated?.(order);
+      } catch (reason) {
+        if (cartRequestHasFieldErrors(reason)) {
+          if (reason.data?.reboot) {
+            setNeedsRefresh(true);
+            await fetchCart(signal);
+          }
+        } else if (!(reason instanceof Error && reason.name === 'AbortError')) {
+          setOrderUncertain(true);
+        }
+        throw reason;
+      }
+    });
+  }
+
+  async function deliveryMethods(action: CartDeliveryMethodsAction) {
+    const result = await requestRef.current(action);
+    if (!Array.isArray(result)) {
+      throw new Error(common.failed);
+    }
+    return result as IDeliveryType[];
+  }
+
+  async function deliveryPoints(action: CartDeliveryPointsAction) {
+    const items = cartDeliveryPointItems(await requestRef.current(action));
+    if (!items) {
+      throw new Error(common.failed);
+    }
+    return items;
+  }
+
+  function safeChange(action: StorefrontCartMutation) {
+    return change(action).catch(() => false);
+  }
+
+  function requireSignIn() {
+    const returnHref = `/cart?locale=${encodeURIComponent(locale)}`;
+    if (onRequireSignIn) {
+      onRequireSignIn(returnHref);
+    } else if (typeof window !== 'undefined') {
+      const query = new URLSearchParams({ locale, redirect: returnHref });
+      window.location.assign(`/profile?${query}`);
+    }
+  }
+
+  function startCheckout() {
+    if (!authenticated) {
+      requireSignIn();
+      return;
+    }
+    void safeChange({
+      endpoint: 'cart_customer_state_first_set',
+      request: { state: ECartState.STATE_CHECKOUT },
+    });
+  }
+
+  function openOrder(orderId: number) {
+    if (onOpenOrder) {
+      onOpenOrder(orderId);
+    } else if (typeof window !== 'undefined') {
+      window.location.assign(ordersHref(locale, orderId));
+    }
+  }
+
+  // A refused code is shown beside the promo form instead of the cart's
+  // general error; the cart's items and prices stay as they were.
+  function applyPromo(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    if (disabled) {
+      return;
+    }
+    setPromoRefusal(undefined);
+    void run('marketing_promo_promo_apply', async (signal) => {
+      try {
+        await requestRef.current({
+          endpoint: 'marketing_promo_promo_apply',
+          request: { promocode: promo },
+          signal,
+        });
+      } catch (reason) {
+        const refusal = cartPromoRefusal(reason);
+        if (!refusal || signal.aborted) {
+          throw reason;
+        }
+        setPromoRefusal(refusal);
+        return false;
+      }
+      aborted(signal);
+      setNeedsRefresh(true);
+      await fetchCart(signal);
+
+      return true;
+    }).catch(() => false);
+  }
+
+  // An action far down the cart (an option, a delivery) answers here, at the
+  // top: show its error instead of leaving the customer looking at nothing.
+  useEffect(() => {
+    if (error) {
+      revealNotice(errorNotice.current);
+    }
+  }, [error]);
+
+  useEffect(() => {
+    if (initialData) {
+      synchronize(initialData);
+    }
+    if (automaticLoad) {
+      void load().catch(() => undefined);
+    }
+
+    // Clear the finished task too: React's development mode mounts twice,
+    // and a remount that still saw the cancelled load would never load.
+    return () => {
+      task.current?.abort();
+      task.current = undefined;
+    };
+  }, []);
+
+  useEffect(() => {
+    if (previousAuthentication.current === authenticated) {
+      return;
+    }
+    previousAuthentication.current = authenticated;
+    task.current?.abort();
+    task.current = undefined;
+    setPending('');
+    setData(undefined);
+    setLoaded(false);
+    setCreated(undefined);
+    setOrderUncertain(false);
+    setNeedsRefresh(false);
+    setPromoRefusal(undefined);
+    void load().catch(() => undefined);
+  }, [authenticated]);
+
+  const lineOptionProps: Omit<CartItemOptionsProps, 'group'> = {
+    disabled,
+    pending: busy,
+    showRequestErrors: false,
+    onChange: change,
+    onRequestSecondaryVariants,
+  };
+
+  return (
+    <section
+      className={styles.root}
+      aria-busy={busy}
+      data-feature-part="StorefrontCart"
+      data-cart-revision={revision}
+    >
+      <header className={styles.pageHeading}>
+        <h1>{checkout ? labels.checkout : labels.title}</h1>
+        {!created ? (
+          <button
+            type="button"
+            className={styles.textButton}
+            disabled={busy}
+            onClick={() => void load().catch(() => undefined)}
+          >
+            {common.refresh}
+          </button>
+        ) : null}
+      </header>
+
+      {error ? (
+        <p ref={errorNotice} className={`${styles.notice} ${styles.error}`} role="alert">
+          {error}
+        </p>
+      ) : null}
+      {orderUncertain ? (
+        <div
+          className={`${styles.notice} ${styles.error}`}
+          role="alert"
+          data-order-uncertain
+        >
+          <p>{labels.orderUncertain}</p>
+          <a href={ordersHref(locale)} className={styles.link}>
+            {common.navigation.orders}
+          </a>
+        </div>
+      ) : null}
+      {needsRefresh && !busy ? (
+        <p className={styles.notice} role="alert" data-cart-needs-refresh>
+          {labels.refreshRequired}
+        </p>
+      ) : null}
+
+      {created ? (
+        <section
+          className={`${styles.panel} ${styles.created}`}
+          role="status"
+          data-order-created
+        >
+          <h2>{labels.created} #{created.order_id}</h2>
+          {paymentError ? (
+            <div
+              className={`${styles.notice} ${styles.error}`}
+              role="alert"
+              data-order-payment-error
+            >
+              <p>{paymentError}</p>
+            </div>
+          ) : null}
+          <a
+            href={ordersHref(locale, created.order_id)}
+            className={styles.link}
+          >
+            {paymentError ? labels.payLater : labels.viewOrder}
+          </a>
+          {created.link && paymentOpen ? (
+            <PaymentPanel
+              payment={created}
+              onClose={() => setPaymentOpen(false)}
+              onRefresh={() => openOrder(created.order_id)}
+            />
+          ) : null}
+        </section>
+      ) : !loaded ? (
+        <p className={styles.empty} role="status">
+          {error ? common.failed : common.loading}
+        </p>
+      ) : !summary?.c_cart_positions ? (
+        <div className={styles.emptyState}>
+          <OrionplaceEmptyState
+            kind="cart"
+            size="large"
+            message={labels.empty}
+          >
+            <a className={`${styles.button} ${styles.primary}`} href={browseHref(locale)}>
+              {labels.browse}
+            </a>
+          </OrionplaceEmptyState>
+        </div>
+      ) : (
+        <>
+          {summary.cart_stock_was_modifed ? (
+            <p className={styles.notice} role="status">
+              {labels.stockChanged}
+            </p>
+          ) : null}
+
+          <div className={styles.layout}>
+            <div className={styles.content}>
+              {!checkout ? (
+                <section className={styles.lines}>
+                  <h2>{labels.items}</h2>
+                  {items.map((product) => (
+                    <CartLineItem
+                      key={product.id}
+                      product={product}
+                      disabled={disabled}
+                      pending={busy}
+                      productHref={productHref}
+                      optionProps={lineOptionProps}
+                      showRequestErrors={false}
+                      onChange={change}
+                    />
+                  ))}
+                </section>
+              ) : (
+                <>
+                  <button
+                    type="button"
+                    className={styles.textButton}
+                    disabled={disabled}
+                    aria-label={`${common.back}: ${labels.items}`}
+                    onClick={() => void safeChange({
+                      endpoint: 'cart_customer_state_first_set',
+                      request: { state: ECartState.STATE_CART },
+                    })}
+                  >
+                    {common.back}
+                  </button>
+
+                  {splitNotice ? (
+                    <p
+                      className={styles.notice}
+                      role="status"
+                      data-cart-split-notice
+                    >
+                      {splitNotice}
+                    </p>
+                  ) : null}
+
+                  {deliveries.map((delivery, index) => {
+                    const origin = cartShipmentOrigin(
+                      delivery.from_store,
+                      locale,
+                    );
+                    const title = cartShipmentTitle(
+                      index,
+                      deliveries.length,
+                      labels,
+                    ) || labels.items;
+
+                    return (
+                      <section
+                        key={delivery.delivery_from_id}
+                        className={`${styles.panel} ${styles.shipment}`}
+                        data-cart-shipment
+                      >
+                        <h2>{title}</h2>
+                        {origin ? (
+                          <div
+                            className={styles.origin}
+                            data-cart-shipment-origin
+                          >
+                            <svg viewBox="0 0 24 24" aria-hidden="true">
+                              {icons[origin.digital ? 'digital' : 'store']
+                                .map((path) => <path key={path} d={path} />)}
+                            </svg>
+                            <div>
+                              <span className={styles.meta}>
+                                {origin.digital
+                                  ? labels.digitalDelivery
+                                  : labels.shipsFrom}
+                              </span>
+                              <strong>
+                                {origin.digital
+                                  ? labels.digitalItems
+                                  : origin.name}
+                              </strong>
+                              {!origin.digital && origin.address ? (
+                                <span className={styles.muted}>
+                                  {origin.address}
+                                </span>
+                              ) : null}
+                            </div>
+                          </div>
+                        ) : null}
+                        {delivery.product_items.map((product) => product ? (
+                          <CartLineItem
+                            key={product.dlf_id}
+                            product={product}
+                            disabled={disabled}
+                            pending={busy}
+                            productHref={productHref}
+                            optionProps={lineOptionProps}
+                            showRequestErrors={false}
+                            onChange={change}
+                          />
+                        ) : null)}
+                        {!delivery.from_store?.virtual_goods ? (
+                          <div className={styles.delivery}>
+                            <CartDeliverySelector
+                              key={`${delivery.delivery_from_id}:${revision}`}
+                              delivery={delivery}
+                              disabled={disabled}
+                              pending={busy}
+                              onLoadMethods={deliveryMethods}
+                              onLoadPoints={deliveryPoints}
+                              onChange={change}
+                            />
+                          </div>
+                        ) : null}
+                      </section>
+                    );
+                  })}
+
+                  <button
+                    type="button"
+                    className={styles.button}
+                    disabled={disabled}
+                    aria-label={labels.refreshDeliveryHint}
+                    onClick={() => void safeChange({
+                      endpoint: 'cart_customer_reboot',
+                      request: {},
+                    })}
+                  >
+                    {labels.refreshDelivery}
+                  </button>
+                </>
+              )}
+
+              {data?.will_not_ship.length ? (
+                <section className={styles.lines}>
+                  <h2>{labels.unavailable}</h2>
+                  {data.will_not_ship.map((product) => (
+                    <CartLineItem
+                      key={product.id}
+                      product={product}
+                      unavailable
+                      disabled={disabled}
+                      pending={busy}
+                      productHref={productHref}
+                      optionProps={lineOptionProps}
+                      showRequestErrors={false}
+                      onChange={change}
+                    />
+                  ))}
+                </section>
+              ) : null}
+
+              {authenticated ? (
+                <CartCheckoutDetails
+                  data={data}
+                  checkout={checkout}
+                  disabled={disabled}
+                  addressFormProps={addressFormProps}
+                  onChange={safeChange}
+                  onReload={() => load().catch(() => undefined)}
+                  onAddressSaved={onAddressSaved}
+                />
+              ) : null}
+            </div>
+
+            <aside className={`${styles.panel} ${styles.summary}`}>
+              <h2>{labels.total}</h2>
+              <dl className={styles.totals}>
+                {totals.map((total) => (
+                  <div key={total.label}>
+                    <dt>{total.label}</dt>
+                    <dd>
+                      {formatCurrency(
+                        total.value?.[currencyId]?.transform_value,
+                        currency,
+                        locale,
+                      )}
+                    </dd>
+                  </div>
+                ))}
+              </dl>
+
+              {summary.prices.delivery_price_is_estimate ? (
+                <p className={styles.muted}>{labels.estimate}</p>
+              ) : null}
+
+              {/* Promo codes need an account: a guest gets HTTP 401. */}
+              {!summary.promocode && authenticated ? (
+                <form className={styles.promo} onSubmit={applyPromo}>
+                  <label>
+                    <span>{labels.promo} <b aria-hidden="true">*</b></span>
+                    <input
+                      value={promo}
+                      maxLength={20}
+                      required
+                      disabled={disabled}
+                      onChange={(event) => setPromo(event.target.value)}
+                    />
+                  </label>
+                  <button type="submit" className={styles.button} disabled={disabled}>
+                    {labels.apply}
+                  </button>
+                </form>
+              ) : !summary.promocode ? (
+                <button
+                  type="button"
+                  className={styles.textButton}
+                  onClick={requireSignIn}
+                >
+                  {labels.promoSignIn}
+                </button>
+              ) : (
+                <div className={styles.appliedPromo}>
+                  <p>{labels.promo}: {summary.promocode}</p>
+                  <button
+                    type="button"
+                    className={styles.textButton}
+                    disabled={disabled}
+                    aria-label={labels.removePromoHint}
+                    onClick={() => void safeChange({
+                      endpoint: 'marketing_promo_promo_remove',
+                      request: {},
+                    })}
+                  >
+                    {labels.removePromo}
+                  </button>
+                </div>
+              )}
+
+              {promoNotice ? (
+                <p
+                  className={`${styles.notice} ${
+                    promoNotice.state === 'refused'
+                      ? styles.error
+                      : styles.attention
+                  }`}
+                  role={promoNotice.state === 'refused' ? 'alert' : 'status'}
+                  data-cart-promo-notice={promoNotice.state}
+                >
+                  {promoNotice.text}
+                </p>
+              ) : null}
+
+              {authenticated && checkout ? (
+                <>
+                  <p className={styles.muted}>{labels.review}</p>
+                  <button
+                    type="button"
+                    className={`${styles.button} ${styles.primary} ${styles.wide}`}
+                    disabled={disabled || !orderReady}
+                    onClick={() => void placeOrder().catch(() => undefined)}
+                  >
+                    {labels.placeOrder}
+                  </button>
+                </>
+              ) : (
+                <button
+                  type="button"
+                  className={`${styles.button} ${styles.primary} ${styles.wide}`}
+                  data-cart-checkout
+                  disabled={checkoutDisabled}
+                  onClick={startCheckout}
+                >
+                  {labels.checkoutAction}
+                </button>
+              )}
+
+              <button
+                type="button"
+                className={styles.textButton}
+                disabled={disabled}
+                onClick={() => setClearConfirmation(true)}
+              >
+                {labels.clear}
+              </button>
+
+              {clearConfirmation ? (
+                <div className={styles.confirmation} data-cart-clear-confirmation>
+                  <p>{labels.clearQuestion}</p>
+                  <div>
+                    <button
+                      type="button"
+                      className={`${styles.button} ${styles.primary}`}
+                      disabled={disabled}
+                      onClick={() => void clearCart().catch(() => undefined)}
+                    >
+                      {labels.clear}
+                    </button>
+                    <button
+                      type="button"
+                      className={styles.button}
+                      disabled={disabled}
+                      onClick={() => setClearConfirmation(false)}
+                    >
+                      {common.cancel}
+                    </button>
+                  </div>
+                </div>
+              ) : null}
+            </aside>
+          </div>
+        </>
+      )}
+    </section>
+  );
+}