@shoppexio/storefront-react 0.0.0 → 0.1.0

package/eject/account/orders.tsx

@@ -0,0 +1,791 @@
+/**
+ * Order history, and one order in full.
+ *
+ * Pagination is PAGE based because the producer is: it reads `page` and `limit`
+ * and answers with `has_more`. There is no cursor to carry, and inventing one
+ * would be ignored upstream and quietly return page one for ever.
+ *
+ * The invoice search and the status filter travel WITH the request. The list is
+ * paged, so filtering the rows already in hand would search only the ten rows
+ * the buyer happens to be looking at and call the rest of their history missing.
+ *
+ * List and detail are two views of the same panel, chosen by the route — see
+ * `account-route.ts`. Order detail is not a page of its own.
+ */
+
+import { useState, type ReactNode } from 'react';
+import { Link } from 'react-router-dom';
+import { paymentMethodLabel } from './account-payment-method';
+import { accountOrderHref, accountTabHref } from '@shoppexio/storefront-react';
+import {
+  WARRANTY_CLAIM_MESSAGE_MAX,
+  canClaimWarranty,
+  warrantiesForOrder,
+  warrantyClaimKey,
+  warrantyClaimMessage,
+  warrantyCoverage,
+  type WarrantyCoverage,
+  warrantyDate,
+} from './account-warranties';
+import { callCustomerApi, safeExternalHref } from './customer-account';
+import type { SdkCustomerDeliverySummary, SdkCustomerWarranty } from '@shoppexio/storefront-react';
+import { t, tOptional } from './i18n';
+import {
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  ChevronDownIcon,
+  ReceiptIcon,
+  ShieldIcon,
+} from './icons';
+import {
+  AccountBackLink,
+  AccountCard,
+  AccountEmpty,
+  AccountError,
+  AccountFieldError,
+  AccountNotice,
+  AccountRowsSkeleton,
+  AccountSectionTitle,
+  BusySpinner,
+  StatusChip,
+  formatAccountAmount,
+  formatAccountDate,
+  formatInvoiceAmount,
+  useAccountResource,
+} from './shared';
+
+const ORDERS_PER_PAGE = 10;
+
+/** The producer's invoice-status enum, in the order the hosted portal lists it. */
+const STATUS_FILTERS = [
+  'COMPLETED',
+  'PENDING',
+  'PROCESSING',
+  'REFUNDED',
+  'DISPUTED',
+  'EXPIRED',
+] as const;
+
+const STATUS_LABEL_KEYS: Record<(typeof STATUS_FILTERS)[number], string> = {
+  COMPLETED: 'orders.statusCompleted',
+  PENDING: 'orders.statusPending',
+  PROCESSING: 'orders.statusProcessing',
+  REFUNDED: 'orders.statusRefunded',
+  DISPUTED: 'orders.statusDisputed',
+  EXPIRED: 'orders.statusExpired',
+};
+
+/** The template's field skin, shared with the checkout and contact forms. */
+const FIELD =
+  'sx-account-field sxa:w-full sxa:border sxa:bg-[color-mix(in_oklab,_var(--sx-bg)_40%,_transparent)] sxa:px-3 sxa:py-2.5 sxa:text-small sxa:shadow-card sxa:placeholder:text-muted sxa:focus-visible:border-accent sxa:focus-visible:ring-[3px] sxa:focus-visible:ring-[color-mix(in_oklab,_var(--sx-accent)_50%,_transparent)] sxa:focus-visible:outline-none';
+
+export function moreItemsLabel(count: number): string {
+  return count === 1 ? t('orders.andMoreOne') : t('orders.andMoreOther', { count });
+}
+
+/**
+ * What to call an order in a list.
+ *
+ * The first line's product title, and the count of the lines behind it. A line
+ * whose title the producer sent as null is named by the order's own id rather
+ * than by a product this template guessed at.
+ */
+export function orderRowTitle(
+  firstTitle: string | null | undefined,
+  lineCount: number,
+  uniqid: string,
+): string {
+  const head = firstTitle ?? t('orders.fallbackTitle', { id: uniqid });
+  return lineCount > 1 ? `${head} ${moreItemsLabel(lineCount - 1)}` : head;
+}
+
+/** One order, as a row that opens it. Both this panel and the overview use it. */
+export function OrderRow({
+  uniqid,
+  title,
+  createdAt,
+  amount,
+  status,
+}: {
+  uniqid: string;
+  title: string;
+  createdAt: string;
+  amount: string;
+  status: string;
+}) {
+  return (
+    <Link to={accountOrderHref(uniqid)} className="sxa:block sxa:transition-opacity sxa:hover:opacity-80">
+      <AccountCard className="sxa:flex sxa:items-center sxa:gap-4 sxa:px-5 sxa:py-4">
+        <ReceiptIcon className="sxa:h-4 sxa:w-4 sxa:shrink-0 sxa:text-muted" />
+        <div className="sxa:min-w-0 sxa:flex-1">
+          <p className="sxa:truncate sxa:text-small sxa:font-semibold">{title}</p>
+          <p className="sxa:mt-1 sxa:text-micro sxa:text-muted">{formatAccountDate(createdAt)}</p>
+        </div>
+        <span className="sxa:shrink-0 sxa:text-small sxa:font-semibold sxa:tabular-nums">{amount}</span>
+        <StatusChip status={status} />
+      </AccountCard>
+    </Link>
+  );
+}
+
+export function AccountOrders() {
+  const [page, setPage] = useState(1);
+  const [status, setStatus] = useState('');
+  const [search, setSearch] = useState('');
+  /** What was last SENT, as against what is currently being typed. */
+  const [applied, setApplied] = useState({ status: '', search: '' });
+
+  const { state, reload } = useAccountResource(
+    `orders:${page}:${applied.status}:${applied.search}`,
+    () => callCustomerApi((sdk) => sdk.orders({
+      page,
+      limit: ORDERS_PER_PAGE,
+      ...(applied.status ? { status: applied.status } : {}),
+      ...(applied.search ? { search: applied.search } : {}),
+    })),
+  );
+
+  // A changed filter is a different list. Staying on page four of the old one
+  // would ask for a page the new list may not have and answer with nothing.
+  const applyFilters = (next: { status?: string; search?: string }) => {
+    const merged = { status: next.status ?? status, search: next.search ?? search };
+    setStatus(merged.status);
+    setSearch(merged.search);
+    setApplied(merged);
+    setPage(1);
+  };
+
+  const filtering = applied.status !== '' || applied.search !== '';
+
+  const filterBar = (
+    <form
+      className="sxa:mb-5 sxa:flex sxa:flex-col sxa:gap-2 sxa:sm:flex-row"
+      onSubmit={(event) => {
+        event.preventDefault();
+        applyFilters({});
+      }}
+    >
+      <input
+        type="search"
+        value={search}
+        placeholder={t('orders.searchPlaceholder')}
+        aria-label={t('orders.search')}
+        onChange={(event) => setSearch(event.target.value)}
+        className={`sxa:min-w-0 sxa:flex-1 ${FIELD} sxa:h-10 sxa:rounded-input`}
+      />
+      <div className="sxa:relative">
+        <select
+          value={status}
+          aria-label={t('orders.status')}
+          onChange={(event) => applyFilters({ status: event.target.value })}
+          className="sxa:h-10 sxa:w-full sxa:appearance-none sxa:border sxa:bg-surface sxa:pr-9 sxa:pl-4 sxa:text-small sxa:focus:outline-none sxa:sm:w-auto sxa:rounded-input"
+        >
+          <option value="">{t('orders.statusAll')}</option>
+          {STATUS_FILTERS.map((value) => (
+            <option key={value} value={value}>{t(STATUS_LABEL_KEYS[value])}</option>
+          ))}
+        </select>
+        <div className="sxa:pointer-events-none sxa:absolute sxa:inset-y-0 sxa:right-0 sxa:flex sxa:items-center sxa:px-3 sxa:text-muted">
+          <ChevronDownIcon className="sxa:h-4 sxa:w-4" />
+        </div>
+      </div>
+      <button type="submit" className="sx-account-button sxa:card-button sxa:card-button--add sxa:shrink-0">
+        {t('orders.search')}
+      </button>
+    </form>
+  );
+
+  if (state.status === 'loading') {
+    return (
+      <div>
+        {filterBar}
+        <AccountRowsSkeleton rows={4} label={t('orders.loading')} />
+      </div>
+    );
+  }
+
+  if (state.status === 'error') {
+    return <AccountError message={state.message} onRetry={reload} />;
+  }
+
+  const { invoices, pagination } = state.data;
+
+  if (invoices.length === 0) {
+    // A filter that matched nothing is not an empty account. Telling a buyer
+    // they have never ordered anything because they mistyped an invoice id is a
+    // lie the control they just used caused.
+    if (filtering && pagination.page === 1) {
+      return (
+        <div>
+          {filterBar}
+          <AccountEmpty title={t('orders.movedTitle')} body={t('orders.emptyFiltered')} />
+        </div>
+      );
+    }
+
+    // An empty page one means the account has no orders. A later page coming
+    // back empty means the list moved underneath the buyer, and the way out of
+    // that is page one — not a message that pretends they never bought anything.
+    return pagination.page > 1 ? (
+      <AccountEmpty
+        title={t('orders.movedTitle')}
+        body={t('orders.movedBody')}
+        action={(
+          <button
+            type="button"
+            className="sx-account-button sxa:card-button sxa:card-button--add"
+            onClick={() => setPage(1)}
+          >
+            {t('orders.backToFirstPage')}
+          </button>
+        )}
+      />
+    ) : (
+      <AccountEmpty
+        title={t('orders.emptyTitle')}
+        body={t('orders.emptyBody')}
+        action={(
+          <Link to="/all-products" className="sx-account-button sxa:card-button sxa:card-button--add">
+            {t('common.browseStore')}
+          </Link>
+        )}
+      />
+    );
+  }
+
+  return (
+    <div>
+      {filterBar}
+      <ul className="sxa:space-y-3">
+        {invoices.map((order) => (
+          <li key={order.uniqid}>
+            <OrderRow
+              uniqid={order.uniqid}
+              title={orderRowTitle(
+                order.lineItems[0]?.productTitle,
+                order.lineItems.length,
+                order.uniqid,
+              )}
+              createdAt={order.createdAt}
+              amount={formatInvoiceAmount(order.totalDisplay, order.total, order.currency)}
+              status={order.status}
+            />
+          </li>
+        ))}
+      </ul>
+
+      {pagination.page > 1 || pagination.has_more ? (
+        <nav className="sxa:mt-6 sxa:flex sxa:items-center sxa:justify-between sxa:gap-4" aria-label={t('orders.pagesLabel')}>
+          <button
+            type="button"
+            className="sx-account-button sxa:card-button sxa:card-button--add sxa:disabled:cursor-not-allowed sxa:disabled:opacity-40"
+            disabled={pagination.page <= 1}
+            onClick={() => setPage((current) => Math.max(1, current - 1))}
+          >
+            <ArrowLeftIcon className="sxa:mr-1.5 sxa:h-3.5 sxa:w-3.5" />
+            {t('orders.previous')}
+          </button>
+          <p className="sxa:text-small sxa:tabular-nums sxa:text-muted">
+            {t('orders.page', { page: pagination.page })}
+          </p>
+          <button
+            type="button"
+            className="sx-account-button sxa:card-button sxa:card-button--add sxa:disabled:cursor-not-allowed sxa:disabled:opacity-40"
+            disabled={!pagination.has_more}
+            onClick={() => setPage((current) => current + 1)}
+          >
+            {t('orders.next')}
+            <ArrowRightIcon className="sxa:ml-1.5 sxa:h-3.5 sxa:w-3.5" />
+          </button>
+        </nav>
+      ) : null}
+    </div>
+  );
+}
+
+export function AccountOrderDetail({ orderId }: { orderId: string }) {
+  const { state, reload } = useAccountResource(`order:${orderId}`, () =>
+    callCustomerApi((sdk) => sdk.order(orderId)));
+
+  const backLink = <AccountBackLink to={accountTabHref('orders')} label={t('orders.allOrders')} />;
+
+  if (state.status === 'loading') {
+    return (
+      <div>
+        {backLink}
+        <div className="sxa:mt-5">
+          <AccountRowsSkeleton rows={3} label={t('orders.loadingOne')} />
+        </div>
+      </div>
+    );
+  }
+
+  if (state.status === 'error') {
+    return (
+      <div>
+        {backLink}
+        <div className="sxa:mt-5">
+          <AccountError message={state.message} onRetry={reload} />
+        </div>
+      </div>
+    );
+  }
+
+  const order = state.data;
+
+  return (
+    <div>
+      {backLink}
+
+      <div className="sxa:mt-5 sxa:flex sxa:flex-wrap sxa:items-start sxa:justify-between sxa:gap-4">
+        <div>
+          <AccountSectionTitle>{t('orders.detailTitle', { id: order.uniqid })}</AccountSectionTitle>
+          <p className="sxa:mt-1 sxa:text-small sxa:text-muted">{formatAccountDate(order.createdAt)}</p>
+        </div>
+        <StatusChip status={order.status} />
+      </div>
+
+      {/*
+        The server's own sentence about this status, printed verbatim and only
+        when it sent one. It is the single place a buyer learns that a paid
+        order did not deliver, or why a refund is still moving — no storefront
+        can reconstruct that from the status word alone.
+      */}
+      {order.statusDetails ? (
+        <p className="sxa:mt-3 sxa:text-small sxa:leading-relaxed sxa:text-muted">{order.statusDetails}</p>
+      ) : null}
+
+      <ul className="sxa:mt-6 sxa:space-y-3">
+        {order.lineItems.map((item) => (
+          <li key={item.id}>
+            <AccountCard className="sxa:px-5 sxa:py-4">
+              <div className="sxa:flex sxa:flex-wrap sxa:items-start sxa:justify-between sxa:gap-3">
+                <div className="sxa:min-w-0">
+                  <p className="sxa:truncate sxa:text-small sxa:font-semibold">{item.productTitle}</p>
+                  {item.variantTitle ? (
+                    <p className="sxa:mt-1 sxa:text-micro sxa:text-muted">{item.variantTitle}</p>
+                  ) : null}
+                  <p className="sxa:mt-1.5 sxa:text-micro sxa:tabular-nums sxa:text-muted">
+                    {item.quantity} × {formatAccountAmount(item.unitPrice, order.currency)}
+                  </p>
+                </div>
+                <div className="sxa:text-right">
+                  <p className="sxa:text-small sxa:font-semibold sxa:tabular-nums">
+                    {formatAccountAmount(item.total, order.currency)}
+                  </p>
+                  {/*
+                    Fulfillment is decided per LINE and server-side, and it is
+                    independent of payment: a completed, fully paid invoice can
+                    still carry a line that never reached the buyer. This chip is
+                    the only thing on the page that says so, which is why it is
+                    rendered for every line rather than only for the unhappy ones.
+                  */}
+                  <p className="sxa:mt-1.5">
+                    <DeliveryChip status={item.deliveryStatus} />
+                  </p>
+                </div>
+              </div>
+
+              {/*
+                What the shop actually handed over for this line, when it handed
+                over anything. The presence of a summary is NOT a delivery state
+                — the chip above owns that — and nothing here is derived from the
+                payment status.
+              */}
+              {item.deliverySummary ? <DeliveredItems summary={item.deliverySummary} /> : null}
+            </AccountCard>
+          </li>
+        ))}
+      </ul>
+
+      <AccountCard className="sxa:mt-6 sxa:px-5 sxa:py-5">
+        <dl className="sxa:space-y-2.5">
+          <SummaryRow label={t('orders.subtotal')}>
+            {formatAccountAmount(order.subtotal, order.currency)}
+          </SummaryRow>
+          {/*
+            `discount` is the USD-normalized figure and `discountDisplay` the
+            same amount in the buyer's currency, exactly like the total. Display
+            first is the producer's rule; the row itself only appears when the
+            order carried a discount at all.
+          */}
+          {Number(order.discountDisplay ?? order.discount) > 0 ? (
+            <SummaryRow label={t('orders.discount')}>
+              −{formatInvoiceAmount(order.discountDisplay, order.discount, order.currency)}
+            </SummaryRow>
+          ) : null}
+          {Number(order.tax) > 0 ? (
+            <SummaryRow label={t('orders.tax')}>
+              {formatAccountAmount(order.tax, order.currency)}
+            </SummaryRow>
+          ) : null}
+          <SummaryRow label={t('orders.total')} emphasis>
+            {formatInvoiceAmount(order.totalDisplay, order.total, order.currency)}
+          </SummaryRow>
+          {/*
+            The coin or the alternative method the buyer picked — never the
+            internal rail. `gateway` says NATIVE_CRYPTO where the buyer chose
+            USDT, which names a thing they never dealt with.
+          */}
+          {order.currentPayment ? (
+            <SummaryRow label={t('orders.paidWith')}>
+              {paymentMethodLabel(order.currentPayment)}
+            </SummaryRow>
+          ) : null}
+        </dl>
+      </AccountCard>
+
+      {/*
+        Below the receipt, not inside it. The lines and the totals are one
+        block — a warranty list between a row and the sum it belongs to breaks
+        a reading order buyers already know — and cover is what happens to this
+        order AFTER it was paid for.
+      */}
+      <OrderWarranties orderUniqid={order.uniqid} />
+    </div>
+  );
+}
+
+/**
+ * What the shop still covers on this order.
+ *
+ * The route filters on `invoices.uniqid` when it is handed one, and that is the
+ * id this order carries, so the read asks for this order's cover by name. The
+ * answer is still filtered here: there is no line-item id on that wire, a
+ * warranty belongs to the order rather than to the row that sold it, and a
+ * client that renders whatever a list contains cannot be wrong about whose
+ * order it is showing.
+ *
+ * Most orders carry none, which is why nothing is drawn while the read is in
+ * flight — a "Warranty" heading that appears and then disappears on every
+ * order without cover is worse than one that arrives a moment late. A failed
+ * read IS shown: it cannot be told apart from "no cover on this order", and
+ * the buyer who has cover is the one who would be left without it.
+ */
+function OrderWarranties({ orderUniqid }: { orderUniqid: string }) {
+  const { state, reload } = useAccountResource(`warranties:${orderUniqid}`, () =>
+    callCustomerApi((sdk) => sdk.warranties(orderUniqid)));
+  /** Rows the server returned from a claim, replacing the ones it was read with. */
+  const [claimed, setClaimed] = useState<Record<string, SdkCustomerWarranty>>({});
+
+  if (state.status === 'loading') return null;
+
+  if (state.status === 'error') {
+    return (
+      <WarrantySection>
+        <AccountError message={state.message} onRetry={reload} />
+      </WarrantySection>
+    );
+  }
+
+  const warranties = warrantiesForOrder(state.data.warranties, orderUniqid)
+    .map((warranty) => claimed[warranty.uniqid] ?? warranty);
+
+  if (warranties.length === 0) return null;
+
+  return (
+    <WarrantySection>
+      <ul className="sxa:space-y-3">
+        {warranties.map((warranty) => (
+          <li key={warranty.uniqid}>
+            <WarrantyRow
+              warranty={warranty}
+              onClaimed={(updated) => setClaimed((rows) => ({ ...rows, [updated.uniqid]: updated }))}
+            />
+          </li>
+        ))}
+      </ul>
+    </WarrantySection>
+  );
+}
+
+function WarrantySection({ children }: { children: ReactNode }) {
+  return (
+    <section className="sxa:mt-8">
+      <AccountSectionTitle>{t('orders.warrantyTitle')}</AccountSectionTitle>
+      <div className="sxa:mt-4">{children}</div>
+    </section>
+  );
+}
+
+function WarrantyRow({
+  warranty,
+  onClaimed,
+}: {
+  warranty: SdkCustomerWarranty;
+  onClaimed: (warranty: SdkCustomerWarranty) => void;
+}) {
+  const [writing, setWriting] = useState(false);
+  const [message, setMessage] = useState('');
+  const [sending, setSending] = useState(false);
+  const [sent, setSent] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const claimKey = warrantyClaimKey(warranty.claim_status);
+  const fieldId = `warranty-claim-${warranty.uniqid}`;
+
+  const send = async () => {
+    setSending(true);
+    setError(null);
+    const response = await callCustomerApi((sdk) => sdk.claimWarranty(
+      warranty.uniqid,
+      warrantyClaimMessage(message),
+    ));
+    setSending(false);
+
+    if (!response.success || response.data === undefined) {
+      setError(response.message?.trim() || t('orders.warrantyClaimFailed'));
+      return;
+    }
+
+    // The row is replaced by the one the server answered with, rather than
+    // edited in place: it is the only party that knows what the claim did.
+    setWriting(false);
+    setMessage('');
+    setSent(true);
+    onClaimed(response.data.warranty);
+  };
+
+  return (
+    <AccountCard className="sxa:px-5 sxa:py-4">
+      <div className="sxa:flex sxa:flex-wrap sxa:items-start sxa:justify-between sxa:gap-3">
+        <div className="sxa:flex sxa:min-w-0 sxa:items-start sxa:gap-3">
+          <ShieldIcon className="sxa:mt-0.5 sxa:h-4 sxa:w-4 sxa:shrink-0 sxa:text-muted" />
+          <div className="sxa:min-w-0">
+            <p className="sxa:truncate sxa:text-small sxa:font-semibold">{warranty.product_title}</p>
+            <p className="sxa:mt-1 sxa:text-micro sxa:text-muted">
+              {coverageLabel(warrantyCoverage(warranty))}
+              {claimKey ? ` · ${t(claimKey)}` : ''}
+            </p>
+          </div>
+        </div>
+
+        {/* Offered only while there is cover left and nothing has been claimed
+            against it. Both are the producer's facts, and neither is a button
+            that gets disabled instead of removed. */}
+        {canClaimWarranty(warranty) && !writing ? (
+          <button
+            type="button"
+            className="sx-account-button sxa:card-button sxa:card-button--add"
+            onClick={() => setWriting(true)}
+          >
+            {t('orders.warrantyClaimStart')}
+          </button>
+        ) : null}
+      </div>
+
+      {sent ? <AccountNotice message={t('orders.warrantyClaimDone')} /> : null}
+
+      {writing ? (
+        <div className="sxa:mt-4 sxa:border-t sxa:pt-4">
+          <label htmlFor={fieldId} className="sxa:mb-1.5 sxa:block sxa:text-small sxa:font-medium">
+            {t('orders.warrantyClaimLabel')}
+            <span className="sxa:ml-2 sxa:text-micro sxa:font-normal sxa:text-muted">
+              {t('orders.warrantyClaimOptional')}
+            </span>
+          </label>
+          <textarea
+            id={fieldId}
+            rows={3}
+            value={message}
+            disabled={sending}
+            maxLength={WARRANTY_CLAIM_MESSAGE_MAX}
+            onChange={(event) => {
+              setMessage(event.target.value);
+              setError(null);
+            }}
+            className={`${FIELD} sxa:resize-none`}
+          />
+
+          <div className="sxa:mt-3 sxa:flex sxa:flex-wrap sxa:items-center sxa:gap-2">
+            <button
+              type="button"
+              disabled={sending}
+              aria-busy={sending || undefined}
+              className="sx-account-cta sxa:cta-button sxa:inline-flex sxa:h-9 sxa:items-center sxa:px-4 sxa:text-small sxa:font-semibold sxa:disabled:cursor-not-allowed sxa:disabled:opacity-50"
+              onClick={() => void send()}
+            >
+              {sending ? <BusySpinner className="sxa:mr-1.5 sxa:h-3.5 sxa:w-3.5" /> : null}
+              {sending ? t('orders.warrantyClaimSending') : t('orders.warrantyClaimSend')}
+            </button>
+            <button
+              type="button"
+              disabled={sending}
+              className="sx-account-button sxa:card-button sxa:card-button--add sxa:disabled:cursor-not-allowed sxa:disabled:opacity-50"
+              onClick={() => {
+                setWriting(false);
+                setError(null);
+              }}
+            >
+              {t('common.cancel')}
+            </button>
+          </div>
+
+          {error ? <AccountFieldError message={error} /> : null}
+        </div>
+      ) : null}
+    </AccountCard>
+  );
+}
+
+/** Cover as a sentence. Cancelled cover names no date, because it has none. */
+function coverageLabel(coverage: WarrantyCoverage): string {
+  switch (coverage.kind) {
+    case 'covered':
+      return t('orders.warrantyCoveredUntil', { date: formatAccountDate(warrantyDate(coverage.expiresAt)) });
+    case 'ended':
+      return t('orders.warrantyEnded', { date: formatAccountDate(warrantyDate(coverage.expiresAt)) });
+    case 'cancelled':
+      return t('orders.warrantyCancelled');
+  }
+}
+
+function SummaryRow({
+  label,
+  emphasis = false,
+  children,
+}: {
+  label: string;
+  emphasis?: boolean;
+  children: ReactNode;
+}) {
+  return (
+    <div
+      className={`sxa:flex sxa:items-baseline sxa:justify-between sxa:gap-4 ${
+        emphasis ? 'sxa:border-t sxa:pt-3 sxa:text-body' : 'sxa:text-small'
+      }`}
+    >
+      <dt className={emphasis ? 'sxa:text-small sxa:font-semibold' : 'sxa:text-muted'}>{label}</dt>
+      <dd className={`sxa:tabular-nums ${emphasis ? 'sxa:text-h3 sxa:font-bold' : 'sxa:font-medium'}`}>
+        {children}
+      </dd>
+    </div>
+  );
+}
+
+/**
+ * The per-line fulfillment state, in a word.
+ *
+ * `tOptional` first: delivery status is an open wire enum, so a state this
+ * catalog has not heard of is printed as the producer spelled it rather than as
+ * a blank or a guess. `FAILED` reads "Delivery failed" — a buyer looking at a
+ * completed invoice has to be able to see that one of its lines never arrived.
+ */
+function DeliveryChip({ status }: { status: string }) {
+  const normalized = status.trim().toUpperCase();
+  const tone = normalized === 'DELIVERED'
+    ? 'sxa:meta-chip--in_stock'
+    : normalized === 'FAILED'
+      ? 'sxa:meta-chip--sold_out'
+      : 'sxa:meta-chip--neutral';
+
+  return (
+    <span className={`sx-account-chip sxa:meta-chip ${tone}`}>
+      {tOptional(`delivery.${normalized}`) ?? status}
+    </span>
+  );
+}
+
+function DeliveredItems({ summary }: { summary: SdkCustomerDeliverySummary }) {
+  const hasContent =
+    summary.codes.length > 0
+    || summary.links.length > 0
+    || summary.notes.length > 0
+    || summary.serials.length > 0;
+
+  if (!hasContent) return null;
+
+  return (
+    <div className="sxa:mt-4 sxa:border-t sxa:pt-4">
+      <p className="sxa:text-micro sxa:font-semibold sxa:tracking-[0.12em] sxa:text-muted sxa:uppercase">
+        {t('orders.deliveryTitle')}
+      </p>
+
+      {summary.codes.length ? (
+        <ul className="sxa:mt-3 sxa:space-y-1.5">
+          {summary.codes.map((code) => (
+            <li
+              key={code}
+              className="sxa:rounded-input sxa:border sxa:bg-bg sxa:px-3 sxa:py-2 sxa:font-mono sxa:text-micro sxa:break-all"
+            >
+              {code}
+            </li>
+          ))}
+        </ul>
+      ) : null}
+
+      {summary.serials.length ? (
+        <ul className="sxa:mt-3 sxa:space-y-1.5">
+          {summary.serials.map((serial) => (
+            <li
+              key={serial.value}
+              className="sxa:flex sxa:flex-wrap sxa:items-center sxa:gap-2 sxa:rounded-input sxa:border sxa:bg-bg sxa:px-3 sxa:py-2 sxa:font-mono sxa:text-micro sxa:break-all"
+            >
+              {/* A replaced serial is struck through rather than dropped: it is
+                  the one the buyer may already have installed somewhere. */}
+              <span className={serial.is_replaced ? 'sxa:line-through sxa:opacity-60' : ''}>
+                {serial.value}
+              </span>
+              {serial.is_replacement ? (
+                <span className="sx-account-chip sxa:meta-chip sxa:meta-chip--neutral">{t('orders.replacement')}</span>
+              ) : null}
+            </li>
+          ))}
+        </ul>
+      ) : null}
+
+      {summary.links.length ? (
+        <ul className="sxa:mt-3 sxa:space-y-1.5">
+          {summary.links.map((link) => (
+            <li key={`${link.label}-${link.value}`} className="sxa:text-small">
+              <DeliveryLink label={link.label} value={link.value} href={link.href} />
+            </li>
+          ))}
+        </ul>
+      ) : null}
+
+      {summary.notes.length ? (
+        <div className="sxa:mt-3 sxa:space-y-1.5">
+          {summary.notes.map((note) => (
+            <p key={note} className="sxa:text-small sxa:leading-relaxed sxa:text-muted">{note}</p>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+/**
+ * A delivery link the MERCHANT typed into their own product.
+ *
+ * `javascript:` is a URL, and an anchor carrying one runs on the origin the
+ * buyer is standing on with the session cookie they are signed in with. So the
+ * scheme is checked before an anchor exists at all: a link that does not survive
+ * `safeExternalHref` is shown as the text it is, never as something to click.
+ */
+function DeliveryLink({
+  label,
+  value,
+  href,
+}: {
+  label: string;
+  value: string;
+  href?: string | null;
+}) {
+  const safeHref = safeExternalHref(href);
+
+  if (safeHref === null) {
+    return <span className="sxa:break-all sxa:text-muted">{label}: {value}</span>;
+  }
+
+  return (
+    <a
+      href={safeHref}
+      target="_blank"
+      rel="noreferrer noopener"
+      className="sxa:font-medium sxa:text-accent sxa:underline sxa:underline-offset-2 sxa:transition-opacity sxa:hover:opacity-80"
+    >
+      {label}
+    </a>
+  );
+}