orionplace-react 0.7.7 → 0.8.0

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

@@ -1,937 +0,0 @@
-'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>
-  );
-}