@shoppexio/storefront-react 0.0.0 → 0.1.1

package/eject/account/account-warranties.ts

@@ -0,0 +1,118 @@
+import type { SdkCustomerWarranty, SdkCustomerWarrantyClaimStatus } from '@shoppexio/storefront-react';
+
+/**
+ * The order detail's warranty half, decided without a word of prose.
+ *
+ * The route filters on `invoices.uniqid` when it is given one, which is the id
+ * the order on screen carries, so a detail asks for its own cover by name.
+ * There is no line-item id on that wire, so a warranty cannot be attached to
+ * the row that sold it — it belongs to the order, and this is why the order
+ * detail carries one warranty section rather than a chip inside each line.
+ */
+
+export function warrantiesForOrder(
+  warranties: readonly SdkCustomerWarranty[],
+  invoiceUniqid: string,
+): SdkCustomerWarranty[] {
+  return warranties.filter((warranty) => warranty.invoice_uniqid === invoiceUniqid);
+}
+
+/**
+ * What the buyer is covered for, and until when.
+ *
+ * A VOIDED warranty carries an `expires_at` like any other row, and printing it
+ * would tell a buyer whose cover was cancelled that they are protected until
+ * next March. Cancelled cover names no date at all, which is why that variant
+ * has no field to name one with.
+ *
+ * The two that do keep the producer's own string rather than a parsed Date: the
+ * panel's date formatter prints an unreadable timestamp as it came instead of
+ * as "Invalid Date", and a Date built here would have thrown that away.
+ */
+export type WarrantyCoverage =
+  | { kind: 'covered'; expiresAt: string }
+  | { kind: 'ended'; expiresAt: string }
+  | { kind: 'cancelled' };
+
+export function warrantyCoverage(warranty: SdkCustomerWarranty): WarrantyCoverage {
+  switch (warranty.status) {
+    case 'ACTIVE':
+      return { kind: 'covered', expiresAt: warranty.expires_at };
+    case 'EXPIRED':
+      return { kind: 'ended', expiresAt: warranty.expires_at };
+    case 'VOIDED':
+      return { kind: 'cancelled' };
+  }
+}
+
+const CLAIM_KEYS: Readonly<Record<SdkCustomerWarrantyClaimStatus, string>> = {
+  REQUESTED: 'orders.warrantyClaimSubmitted',
+  APPROVED: 'orders.warrantyClaimApproved',
+  DENIED: 'orders.warrantyClaimDeclined',
+};
+
+/** Null when nothing was ever claimed — the row then says only what it covers. */
+export function warrantyClaimKey(status: SdkCustomerWarrantyClaimStatus | null): string | null {
+  return status === null ? null : CLAIM_KEYS[status];
+}
+
+/**
+ * A producer timestamp, read the way the producer wrote it: naive strings
+ * ("2027-08-05 00:00:00.000") are UTC, not local time. Only the claim GATE
+ * parses — displayed dates keep the producer's own string (see above).
+ */
+function parseWarrantyTimestamp(value: string): number | null {
+  const trimmed = value.trim();
+  if (!trimmed) return null;
+  const hasTimezone = /(?:Z|[+-]\d{2}(?::?\d{2})?)$/i.test(trimmed);
+  const hasTimePart = trimmed.includes(' ') || trimmed.includes('T');
+  const normalized = hasTimezone || !hasTimePart ? trimmed : `${trimmed.replace(' ', 'T')}Z`;
+  const parsed = Date.parse(normalized);
+  return Number.isFinite(parsed) ? parsed : null;
+}
+
+/**
+ * The producer's timestamp as a Date for display, or the string as it came
+ * when it cannot be read — the panel's formatter then prints the original
+ * rather than "Invalid Date". Same UTC rule as the claim gate: a naive
+ * PostgreSQL timestamp is UTC, not the buyer's local zone.
+ */
+export function warrantyDate(value: string): Date | string {
+  const parsed = parseWarrantyTimestamp(value);
+  return parsed === null ? value : new Date(parsed);
+}
+
+/**
+ * Whether a claim can still be made.
+ *
+ * All three halves matter. Cover that ended or was cancelled has nothing left
+ * to claim against, and a claim the shop is still reading — or has approved —
+ * would take a second one nobody asked for. A DECLINED claim is the exception
+ * the route itself makes: `requestClaim` refuses only a pending or approved
+ * one, and takes a declined warranty back to REQUESTED. And a stored ACTIVE
+ * whose `expires_at` has already passed is a sweep that has not run yet, not
+ * live cover — the route refuses the crossed timestamp regardless of the
+ * status, so a control shown for it would reliably answer 409. An unreadable
+ * timestamp fails closed.
+ */
+export function canClaimWarranty(warranty: SdkCustomerWarranty, now: Date = new Date()): boolean {
+  if (warranty.status !== 'ACTIVE') return false;
+  if (warranty.claim_status !== null && warranty.claim_status !== 'DENIED') return false;
+  const expires = parseWarrantyTimestamp(warranty.expires_at);
+  return expires !== null && expires > now.getTime();
+}
+
+/** The producer's ceiling for the message a buyer may attach to a claim. */
+export const WARRANTY_CLAIM_MESSAGE_MAX = 2000;
+
+/**
+ * The buyer's own words, or nothing at all.
+ *
+ * The field is optional upstream, and sending an empty string is not the same
+ * as omitting it: it stores a blank message the shop then reads as "the buyer
+ * had nothing to say" rather than "the buyer did not write anything".
+ */
+export function warrantyClaimMessage(input: string): string | undefined {
+  const message = input.trim();
+  return message.length === 0 ? undefined : message;
+}

package/eject/account/customer-account.ts

@@ -0,0 +1,93 @@
+import { t } from './i18n';
+import { getShoppex } from '@shoppexio/storefront-react';
+import type { ShoppexSdk, SdkResponse } from '@shoppexio/storefront-react';
+
+/**
+ * The one way this template reaches customer data.
+ *
+ * Every account call goes through the SDK, which posts to the merchant's own
+ * origin with `credentials: 'same-origin'`. There is deliberately no fetch
+ * client here: the session is an HttpOnly cookie the Shoppex worker owns, the
+ * shop comes from the host, and a hand-rolled client is how a storefront ends
+ * up sending a shop or a token it should never have been able to choose.
+ *
+ * `getShoppex()` throws when the SDK script or a bootstrap global is missing,
+ * and an SDK build older than the customer module has no `dashboard` method at
+ * all. Both surface here as a failed call, so the panel shows an error instead
+ * of an empty account — the first carrying its own sentence, the second falling
+ * back to the panel's generic one.
+ */
+export async function callCustomerApi<T>(
+  operation: (sdk: ShoppexSdk) => Promise<SdkResponse<T>>,
+): Promise<SdkResponse<T>> {
+  try {
+    return await operation(getShoppex());
+  } catch (error) {
+    // A TypeError here is the ENGINE talking, not the shop: `sdk.loyalty is not
+    // a function` is what a page gets when the CDN is still serving an SDK
+    // bundle older than this build — publish sequencing, invisible to the buyer
+    // and unfixable by them. Dropping the message hands the panel the generic
+    // sentence it already has, instead of printing a stack-trace fragment into
+    // the account page.
+    if (error instanceof TypeError) return { success: false };
+    return {
+      success: false,
+      message: error instanceof Error ? error.message : String(error),
+    };
+  }
+}
+
+/**
+ * What a panel is currently showing. `error` carries the server's own sentence
+ * rather than a generic one, because the server is the only party that knows
+ * why a call was refused.
+ */
+export type AccountPanelState<T> =
+  | { status: 'loading' }
+  | { status: 'error'; message: string }
+  /**
+   * `staleMessage` is set when a RE-read of data already on screen failed:
+   * the panel keeps what the buyer is looking at instead of tearing it down,
+   * but must say the figures may be out of date rather than staying silent.
+   */
+  | { status: 'ready'; data: T; staleMessage?: string };
+
+/**
+ * The message shown when a failure reached us without one.
+ *
+ * Localized, unlike `response.message`: the server's sentence is already in the
+ * buyer's language when the server knows it, and this is the one case where
+ * nobody said anything at all.
+ */
+export function accountGenericError(): string {
+  return t('common.genericError');
+}
+
+/**
+ * A merchant-supplied delivery link, or nothing.
+ *
+ * A delivery of kind `link` is a URL the shop typed into their own product, and
+ * `javascript:` is a URL. An anchor carrying one runs on the origin the buyer
+ * is standing on, with their session — so it is refused here rather than
+ * rendered and hoped about. Only http, https and relative paths survive.
+ */
+export function safeExternalHref(href: string | null | undefined): string | null {
+  const raw = href?.trim() ?? '';
+  if (!raw) return null;
+  if (raw.startsWith('/')) return raw;
+
+  const scheme = raw.slice(0, raw.indexOf(':')).toLowerCase();
+  if (raw.includes(':') && scheme !== 'http' && scheme !== 'https') return null;
+  return raw;
+}
+
+export function toPanelState<T>(response: SdkResponse<T>): AccountPanelState<T> {
+  if (!response.success || response.data === undefined) {
+    return {
+      status: 'error',
+      message: response.message?.trim() || accountGenericError(),
+    };
+  }
+  return { status: 'ready', data: response.data };
+}
+

package/eject/account/dashboard.tsx

@@ -0,0 +1,139 @@
+/**
+ * The reads the account shell owns, and the availability derived from them.
+ *
+ * Seven panels are built from the `dashboard()` payload and both the navigation
+ * gate and the wholesale panel need the reseller programme. Each used to ask
+ * for its own copy, which meant the shell could not gate its navigation without
+ * a SECOND request for something already on the page. The shell asks once,
+ * above the panels, and hands both down — the shape the document lane uses in
+ * `packages/storefront-commerce/src/sx/account-page.ts`.
+ *
+ * Both reads are keyed on the panel being shown, so moving between panels
+ * revalidates exactly as it did when each panel fetched on its own mount. The
+ * duplicate is what this removes; the freshness is not.
+ */
+
+import { createContext, useContext, useRef, type ReactNode } from 'react';
+import {
+  availabilityFromShellReads,
+  type AccountAvailability,
+} from './account-availability';
+import { narrowResellerProgram } from './account-reseller';
+import { callCustomerApi, type AccountPanelState } from './customer-account';
+import type { SdkCustomerDashboard } from '@shoppexio/storefront-react';
+import { useAccountResource } from './shared';
+
+export interface AccountResource<T> {
+  state: AccountPanelState<T>;
+  reload: () => void;
+}
+
+interface AccountShellReads {
+  dashboard: AccountResource<SdkCustomerDashboard>;
+  /** The wholesale programme, raw. The gate and the panel narrow it themselves. */
+  resellerProgram: AccountResource<unknown>;
+}
+
+const ShellReadsContext = createContext<AccountShellReads | null>(null);
+
+function useShellReads(): AccountShellReads {
+  const value = useContext(ShellReadsContext);
+  if (value === null) {
+    throw new Error('account panels must be rendered inside the account shell');
+  }
+  return value;
+}
+
+/** The dashboard payload, as loaded once by the shell. */
+export function useAccountDashboard(): AccountResource<SdkCustomerDashboard> {
+  return useShellReads().dashboard;
+}
+
+/**
+ * The wholesale programme, as loaded once by the shell.
+ *
+ * The navigation gate and the wholesale panel read the SAME response. Two reads
+ * could disagree — the gate's failing while the panel's succeeded — and a buyer
+ * would see the panel call them an active reseller while the navigation had
+ * dropped the tab they reached it by.
+ */
+export function useAccountResellerProgram(): AccountResource<unknown> {
+  return useShellReads().resellerProgram;
+}
+
+/**
+ * Both shell reads, revalidated when the buyer moves to another panel.
+ *
+ * `panelKey` is the surface being shown. Without it the shell would load once
+ * per sign-in and never again: a buyer who bought their first download in
+ * another tab would come back, walk into Downloads and be told they have none,
+ * because the payload deciding that was read before the purchase existed.
+ */
+export function useAccountShellReads(panelKey: string): AccountShellReads {
+  // keepStale: the only same-key re-read of this payload is the refresh a
+  // successful redemption asks for, and tearing every panel down to an error
+  // because a background refresh failed would destroy the notice that
+  // redemption just showed. AccountRewards renders the staleMessage.
+  const dashboard = useAccountResource(`dashboard:${panelKey}`, () =>
+    callCustomerApi((sdk) => sdk.dashboard()), { keepStale: true });
+  const resellerProgram = useAccountResource(`reseller-program:${panelKey}`, () =>
+    callCustomerApi((sdk) => sdk.reseller()));
+  return { dashboard, resellerProgram };
+}
+
+/**
+ * What the navigation may offer, or null while nothing is known yet.
+ *
+ * The dashboard gates are decided the moment the dashboard answers. They do NOT
+ * wait on the reseller read — that is a separate request for one tab, and
+ * blocking Downloads, Subscriptions, Rewards, Referrals and Favorites on it
+ * meant a slow wholesale endpoint emptied a navigation it has nothing to do
+ * with. The document lane passes whatever it holds and lets the wholesale leaf
+ * appear when its own answer arrives; this does the same.
+ *
+ * The last known answer is held across a revalidation. Otherwise every move
+ * between panels would empty the navigation and refill it a moment later, under
+ * the cursor of the buyer using it.
+ */
+export function useAccountAvailability(reads: AccountShellReads): AccountAvailability | null {
+  const lastKnown = useRef<AccountAvailability | null>(null);
+  const { dashboard, resellerProgram } = reads;
+
+  /*
+   * A reseller read that failed, or has not answered, is not a shop without a
+   * programme — it is an unanswered question, and the gate stays SHUT rather
+   * than offering a tab on a guess. A buyer standing on that tab keeps it:
+   * `isAccountTabOffered` never hides the active one. And because the panel
+   * shares this exact response, its retry reopens the gate.
+   */
+  const program = resellerProgram.state.status === 'ready'
+    ? narrowResellerProgram(resellerProgram.state.data)
+    : null;
+
+  const availability = availabilityFromShellReads(
+    dashboard.state.status === 'ready'
+      ? {
+        licensesCount: dashboard.state.data.stats.licenses_count,
+        deliverablesCount: dashboard.state.data.stats.deliverables_count,
+        subscriptionsCount: dashboard.state.data.subscriptions.length,
+        walletPresent: dashboard.state.data.wallet !== null,
+        affiliateState: dashboard.state.data.affiliate.state,
+      }
+      : null,
+    program?.ok ? program.data : null,
+    lastKnown.current,
+  );
+
+  lastKnown.current = availability;
+  return availability;
+}
+
+export function AccountShellProvider({
+  value,
+  children,
+}: {
+  value: AccountShellReads;
+  children: ReactNode;
+}) {
+  return <ShellReadsContext.Provider value={value}>{children}</ShellReadsContext.Provider>;
+}

package/eject/account/downloads.tsx

@@ -0,0 +1,343 @@
+/**
+ * Everything the shop has already handed over: license keys, files, codes and
+ * access links.
+ *
+ * There is no `GET /deliverables` and no `GET /licenses`. Both lists arrive
+ * inside `dashboard()`, which is why this panel loads the same payload the
+ * overview does. They are two halves of one answer: the deliverable carries the
+ * key itself, the license row carries its expiry, its hardware lock and whether
+ * it can be renewed at all. `account/account-downloads.ts` performs the join
+ * and refuses to render a half of it that contradicts the other.
+ *
+ * Renewal is a purchase, so it is a link into the store rather than a call.
+ * `POST /licenses/:id/renew` raises an invoice, and ADR-0064 keeps that off the
+ * account API for good: a renewal invoice created by markup the buyer never
+ * clicked has no cause they could point at.
+ */
+
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { accountOrderHref } from '@shoppexio/storefront-react';
+import {
+  buildDownloadGroups,
+  isEmptyDownloadGroups,
+  licenseExpiryDate,
+  offersRenewal,
+  type DownloadContractError,
+  type FileDownload,
+  type LicenseDownload,
+} from './account-downloads';
+import { callCustomerApi, safeExternalHref } from './customer-account';
+import type { SdkCustomerDeliverable } from '@shoppexio/storefront-react';
+import { t } from './i18n';
+import { ArrowRightIcon, BoxIcon, ExternalLinkIcon, LockIcon, TagIcon } from './icons';
+import { useAccountDashboard } from './dashboard';
+import {
+  AccountCard,
+  AccountEmpty,
+  AccountError,
+  AccountNotice,
+  AccountRowsSkeleton,
+  AccountSectionTitle,
+  BusySpinner,
+  CopyButton,
+  StatusChip,
+  formatAccountDate,
+} from './shared';
+
+export function AccountDownloads() {
+  const { state, reload } = useAccountDashboard();
+  const [notice, setNotice] = useState<string | null>(null);
+  const [actionError, setActionError] = useState<string | null>(null);
+  const [resettingUniqid, setResettingUniqid] = useState<string | null>(null);
+
+  if (state.status === 'loading') {
+    return <AccountRowsSkeleton rows={4} label={t('downloads.loading')} />;
+  }
+
+  if (state.status === 'error') {
+    return <AccountError message={state.message} onRetry={reload} />;
+  }
+
+  const grouped = buildDownloadGroups(state.data.deliverables, state.data.licenses);
+
+  // The producer contradicting itself is not an empty account. A key with no
+  // license behind it, or a file with nothing to fetch, is said out loud rather
+  // than rendered as a row that names something the page cannot hand over.
+  if (!grouped.ok) {
+    return (
+      <div className="sxa:space-y-4">
+        <AccountSectionTitle>{t('downloads.brokenTitle')}</AccountSectionTitle>
+        <AccountError message={contractErrorMessage(grouped.error)} onRetry={reload} />
+      </div>
+    );
+  }
+
+  const { groups } = grouped;
+
+  if (isEmptyDownloadGroups(groups)) {
+    return (
+      <AccountEmpty
+        title={t('downloads.emptyTitle')}
+        body={t('downloads.emptyBody')}
+        action={(
+          <Link to="/all-products" className="sx-account-button sxa:card-button sxa:card-button--add">
+            {t('common.browseStore')}
+          </Link>
+        )}
+      />
+    );
+  }
+
+  const resetHardwareId = async (uniqid: string) => {
+    setResettingUniqid(uniqid);
+    setNotice(null);
+    setActionError(null);
+    const result = await callCustomerApi((sdk) => sdk.resetLicenseHwid(uniqid));
+    setResettingUniqid(null);
+
+    if (!result.success) {
+      setActionError(result.message?.trim() || t('downloads.hwidResetFailed'));
+      return;
+    }
+
+    setNotice(t('downloads.hwidResetDone'));
+    // The lock lives on the license row, so the payload is read again. Clearing
+    // it locally would show a buyer a released license the server never agreed
+    // to release.
+    reload();
+  };
+
+  return (
+    <div className="sxa:space-y-8">
+      {notice ? <AccountNotice message={notice} /> : null}
+      {actionError ? <AccountError message={actionError} /> : null}
+
+      {groups.licenses.length ? (
+        <section>
+          <AccountSectionTitle>{t('downloads.licensesTitle')}</AccountSectionTitle>
+          <ul className="sxa:mt-4 sxa:space-y-3">
+            {groups.licenses.map((entry) => (
+              <li key={entry.deliverable.id}>
+                <LicenseRow
+                  entry={entry}
+                  resetting={resettingUniqid === entry.license.uniqid}
+                  disabled={resettingUniqid !== null}
+                  onResetHardwareId={() => void resetHardwareId(entry.license.uniqid)}
+                />
+              </li>
+            ))}
+          </ul>
+        </section>
+      ) : null}
+
+      {groups.files.length ? (
+        <section>
+          <AccountSectionTitle>{t('downloads.filesTitle')}</AccountSectionTitle>
+          <ul className="sxa:mt-4 sxa:space-y-3">
+            {groups.files.map((file) => (
+              <li key={file.id}>
+                <FileRow file={file} />
+              </li>
+            ))}
+          </ul>
+        </section>
+      ) : null}
+
+      {groups.codes.length ? (
+        <section>
+          <AccountSectionTitle>{t('downloads.codesTitle')}</AccountSectionTitle>
+          <ul className="sxa:mt-4 sxa:space-y-3">
+            {groups.codes.map((code) => (
+              <li key={code.id}>
+                <CodeRow code={code} />
+              </li>
+            ))}
+          </ul>
+        </section>
+      ) : null}
+    </div>
+  );
+}
+
+function contractErrorMessage(error: DownloadContractError): string {
+  return error.reason === 'license-missing'
+    ? t('downloads.brokenBody', { id: error.id })
+    : t('downloads.brokenFileBody', { id: error.id });
+}
+
+/** A delivered value the buyer has to be able to read and copy exactly. */
+function DeliverableValue({ value }: { value: string }) {
+  return (
+    <p className="sxa:rounded-input sxa:border sxa:bg-bg sxa:px-3 sxa:py-2 sxa:font-mono sxa:text-micro sxa:break-all">{value}</p>
+  );
+}
+
+function ViewOrderLink({ orderId }: { orderId: string }) {
+  return (
+    <Link
+      to={accountOrderHref(orderId)}
+      className="sxa:inline-flex sxa:items-center sxa:gap-1.5 sxa:text-small sxa:transition-opacity sxa:hover:opacity-80"
+    >
+      {t('downloads.viewOrder')}
+      <ArrowRightIcon className="sxa:h-4 sxa:w-4 sxa:shrink-0" />
+    </Link>
+  );
+}
+
+function LicenseRow({
+  entry,
+  resetting,
+  disabled,
+  onResetHardwareId,
+}: {
+  entry: LicenseDownload;
+  resetting: boolean;
+  disabled: boolean;
+  onResetHardwareId: () => void;
+}) {
+  const { deliverable, license } = entry;
+  const expiry = licenseExpiryDate(license);
+
+  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">
+          <LockIcon 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">{deliverable.product_title}</p>
+            {/* A null expiry means the license never ends — a different fact
+                from an expiry nobody could read, and stated as its own sentence. */}
+            <p className="sxa:mt-1 sxa:text-micro sxa:text-muted">
+              {expiry
+                ? t('downloads.expires', { date: formatAccountDate(expiry) })
+                : t('downloads.neverExpires')}
+            </p>
+          </div>
+        </div>
+        <StatusChip status={license.status} />
+      </div>
+
+      <div className="sxa:mt-3 sxa:flex sxa:flex-wrap sxa:items-center sxa:gap-2">
+        <div className="sxa:min-w-0 sxa:flex-1">
+          <DeliverableValue value={deliverable.value} />
+        </div>
+        <CopyButton value={deliverable.value} />
+      </div>
+
+      {license.hardware_id ? (
+        <div className="sxa:mt-3 sxa:flex sxa:flex-wrap sxa:items-center sxa:justify-between sxa:gap-2">
+          <p className="sxa:min-w-0 sxa:text-micro sxa:break-all sxa:text-muted">
+            {t('downloads.lockedTo', { hardwareId: license.hardware_id })}
+          </p>
+          <button
+            type="button"
+            onClick={onResetHardwareId}
+            disabled={disabled}
+            aria-busy={resetting || undefined}
+            className="sx-account-button sxa:card-button sxa:card-button--add sxa:disabled:cursor-not-allowed sxa:disabled:opacity-50"
+          >
+            {resetting ? <BusySpinner className="sxa:mr-1.5 sxa:h-3.5 sxa:w-3.5" /> : null}
+            {resetting ? t('downloads.resettingHwid') : t('downloads.resetHwid')}
+          </button>
+        </div>
+      ) : null}
+
+      {/* `renewable` is the server's call — only the backend can see whether the
+          product still exists and still sells — and it is paired with an expiry,
+          so a perpetual license is never offered an end date it never had. */}
+      {offersRenewal(license) ? (
+        <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('downloads.renewTitle')}
+          </p>
+          <p className="sxa:mt-1.5 sxa:text-small sxa:leading-relaxed sxa:text-muted">
+            {t('downloads.renewBody')}
+          </p>
+          <Link to="/all-products" className="sx-account-button sxa:card-button sxa:card-button--add sxa:mt-3">
+            {t('downloads.renewAction')}
+          </Link>
+        </div>
+      ) : null}
+
+      <div className="sxa:mt-3">
+        <ViewOrderLink orderId={license.invoice_id} />
+      </div>
+    </AccountCard>
+  );
+}
+
+function FileRow({ file }: { file: FileDownload }) {
+  /*
+   * A plain link, not a fetch. The path is same-origin under `/api/customer/`,
+   * so the browser sends the session cookie the Shoppex worker owns — there is
+   * no token to attach here, and nothing in this bundle could attach one.
+   *
+   * It is still checked: a path is merchant-adjacent data, and an anchor whose
+   * href turns out to be a script URL runs on the buyer's own origin with their
+   * session. A value that does not survive the check gets no anchor at all,
+   * because a dead link dressed as a button is worse than a plain refusal.
+   */
+  const href = safeExternalHref(file.href);
+
+  return (
+    <AccountCard className="sxa:flex sxa:flex-wrap sxa:items-center sxa:gap-4 sxa:px-5 sxa:py-4">
+      <BoxIcon 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">{file.label}</p>
+        <p className="sxa:mt-1 sxa:truncate sxa:text-micro sxa:text-muted">{file.product_title}</p>
+      </div>
+      {href === null ? (
+        <span className="sx-account-chip sxa:meta-chip sxa:meta-chip--neutral">{t('common.unavailable')}</span>
+      ) : (
+        <a href={href} download className="sx-account-button sxa:card-button sxa:card-button--add sxa:shrink-0">
+          {t('downloads.download')}
+        </a>
+      )}
+    </AccountCard>
+  );
+}
+
+function CodeRow({ code }: { code: SdkCustomerDeliverable }) {
+  // A code delivery may carry an access link the merchant typed themselves.
+  // Checked before it becomes an anchor, for the same reason as a file path.
+  const href = safeExternalHref(code.href);
+
+  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">
+          <TagIcon 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">{code.label}</p>
+            <p className="sxa:mt-1 sxa:truncate sxa:text-micro sxa:text-muted">{code.product_title}</p>
+          </div>
+        </div>
+        {href === null ? (
+          <CopyButton value={code.value} className="sxa:shrink-0" />
+        ) : (
+          <a
+            href={href}
+            target="_blank"
+            rel="noreferrer noopener"
+            className="sx-account-button sxa:card-button sxa:card-button--add sxa:shrink-0"
+          >
+            <ExternalLinkIcon className="sxa:mr-1.5 sxa:h-3.5 sxa:w-3.5" />
+            {t('downloads.openLink')}
+          </a>
+        )}
+      </div>
+
+      {/* The value is what the buyer keeps when there is no link to follow. */}
+      {href === null ? (
+        <div className="sxa:mt-3">
+          <DeliverableValue value={code.value} />
+        </div>
+      ) : null}
+
+      <div className="sxa:mt-3">
+        <ViewOrderLink orderId={code.invoice_uniqid} />
+      </div>
+    </AccountCard>
+  );
+}