@shoppexio/storefront-react 0.3.0 → 0.5.0

package/eject/account/reseller.tsx

@@ -8,38 +8,31 @@
  * form. There is no PENDING. Folding two of those together tells a suspended
  * reseller they were rejected, or hands a rejected one a catalog.
  *
- * Three controls a wholesale surface would normally carry are ABSENT rather
- * than disabled: placing an order, minting an API key and creating a wallet
- * top-up. The storefront edge allowlists none of those mutations
- * (`workers/storefront/src/customer-api.ts`).
- *
- * Pricing a basket stays, because it writes nothing. The quoted total is the
- * only total shown, and a basket that has moved since its quote shows no total
- * at all rather than the one that no longer applies.
+ * Nothing here spends, mints or revokes (design Batch 7, 5b; #1167). Placing
+ * an order, adding funds and handing out a key or the delivery URL are not
+ * controls on this page: on a code storefront the JavaScript here is the
+ * merchant's, and the storefront edge allowlists none of those mutations
+ * (`workers/storefront/src/customer-api.ts`). "Add funds", "Manage keys" and
+ * "Delivery URL" are links to the hosted top-up and reseller pages on the
+ * checkout host, which ask for their own email code. The catalog is a price
+ * list; there is no basket and no quote.
  */
 
 import { useCallback, useEffect, useId, useRef, useState } from 'react';
 import {
-  RESELLER_QUANTITY_MAX_UNITS,
-  RESELLER_QUANTITY_MIN_UNITS,
   narrowResellerApiKeys,
   narrowResellerCatalog,
   narrowResellerMutation,
   narrowResellerOrderDetail,
   narrowResellerOrders,
   narrowResellerProgram,
-  narrowResellerQuote,
   narrowResellerWallet,
-  quoteMatchesBasket,
-  resellerBasketKey,
   resellerEntryMode,
   type ResellerCatalogItem,
   type ResellerCatalogVariant,
-  type ResellerOrderItemInput,
   type ResellerOrderLine,
   type ResellerOrderListItem,
   type ResellerProgramState,
-  type ResellerQuote,
   type ResellerRelationship,
 } from './account-reseller';
 import { callCustomerApi } from './customer-account';
@@ -60,6 +53,8 @@ import {
   AccountSectionTitle,
   BusySpinner,
   CopyButton,
+  HostedPageLink,
+  InvoiceStatusChip,
   StatusChip,
   formatAccountAmount,
   formatAccountDate,
@@ -74,18 +69,6 @@ const FIELD =
 
 const PAGE_SIZE = 20;
 
-/** One basket row: what the producer needs, plus the words to show it by. */
-interface BasketLine extends ResellerOrderItemInput {
-  title: string;
-  variant_title: string | null;
-}
-
-/** A quote, pinned to the exact basket it priced. */
-interface PricedBasket {
-  basketKey: string;
-  quote: ResellerQuote;
-}
-
 export function AccountReseller() {
   /*
    * The SAME response the navigation gate reads. Two separate reads could
@@ -121,7 +104,7 @@ export function AccountReseller() {
   const status = reseller?.status;
 
   if (reseller && status === 'ACTIVE') {
-    return <ActiveReseller relationship={reseller} />;
+    return <ActiveReseller relationship={reseller} program={program} />;
   }
 
   if (status === 'APPLIED') {
@@ -134,10 +117,13 @@ export function AccountReseller() {
   }
 
   if (status === 'SUSPENDED') {
+    // A suspended reseller can still revoke a key or rotate the delivery URL,
+    // so the two credential links stay; adding funds does not.
     return (
       <AccountEmpty
         title={t('reseller.suspendedTitle')}
         body={t('reseller.suspendedBody')}
+        action={<CredentialLinks program={program} />}
       />
     );
   }
@@ -349,36 +335,13 @@ function ResellerEntry({
   );
 }
 
-function ActiveReseller({ relationship }: { relationship: ResellerRelationship }) {
-  /*
-   * The basket lives HERE, above the catalog, because the catalog paginates and
-   * a buyer builds one order across several pages. A basket owned by the list
-   * would empty itself every time the buyer asked for more products.
-   */
-  const [basket, setBasket] = useState<BasketLine[]>([]);
-  const [priced, setPriced] = useState<PricedBasket | null>(null);
-
-  /** Any change to the basket retires the quote that priced the old one. */
-  const replaceBasket = (next: BasketLine[]) => {
-    setBasket(next);
-    setPriced(null);
-  };
-
-  const add = (line: BasketLine) => {
-    const existing = basket.findIndex(
-      (entry) => entry.product_id === line.product_id && entry.variant_id === line.variant_id,
-    );
-    if (existing === -1) {
-      replaceBasket([...basket, line]);
-      return;
-    }
-    replaceBasket(basket.map((entry, index) => (
-      index === existing
-        ? { ...entry, quantity: Math.min(RESELLER_QUANTITY_MAX_UNITS, entry.quantity + 1) }
-        : entry
-    )));
-  };
-
+function ActiveReseller({
+  relationship,
+  program,
+}: {
+  relationship: ResellerRelationship;
+  program: ResellerProgramState;
+}) {
   const discount = relationship.tier?.discount_percent;
 
   return (
@@ -407,15 +370,9 @@ function ActiveReseller({ relationship }: { relationship: ResellerRelationship }
       </section>
 
       <WholesaleWallet />
-      <WholesaleCatalog onAdd={add} />
-      <WholesaleBasket
-        basket={basket}
-        priced={priced}
-        onBasketChange={replaceBasket}
-        onPriced={setPriced}
-      />
+      <WholesaleCatalog />
       <WholesaleOrders />
-      <ResellerApiKeys />
+      <ResellerApiKeys program={program} />
     </div>
   );
 }
@@ -494,6 +451,12 @@ function WholesaleWallet() {
           />
         </div>
 
+        <HostedPageLink
+          page="topup"
+          hints={{ for: 'reseller' }}
+          label={t('reseller.topUp')}
+          className="sxa:mt-4 sxa:border-t sxa:pt-4"
+        />
       </AccountCard>
     </section>
   );
@@ -520,11 +483,8 @@ type PagedState<T> =
 /**
  * A list that GROWS a page at a time.
  *
- * Both wholesale lists append rather than replace. The catalog has to: a basket
- * is built across pages, and swapping page one for page two would take the
- * products the buyer had just been looking at off the screen while their basket
- * still names them. The order history follows the same shape so the two read
- * alike.
+ * Both wholesale lists append rather than replace, like the buyer's own order
+ * history, so the two read alike.
  *
  * The page number advances only on a SUCCESSFUL read, and it advances to the
  * page the producer says it answered. A failed "next" leaves the list exactly
@@ -641,7 +601,7 @@ interface CatalogRow {
   currency: string;
 }
 
-function WholesaleCatalog({ onAdd }: { onAdd: (line: BasketLine) => void }) {
+function WholesaleCatalog() {
   const searchId = useId();
   const [search, setSearch] = useState('');
   const [query, setQuery] = useState('');
@@ -681,8 +641,7 @@ function WholesaleCatalog({ onAdd }: { onAdd: (line: BasketLine) => void }) {
         className="sxa:flex sxa:items-center sxa:gap-2"
         onSubmit={(event) => {
           event.preventDefault();
-          // A new search restarts the list at page one. The basket is held
-          // above this component, so it survives the reset intact.
+          // A new search restarts the list at page one.
           setQuery(search.trim());
         }}
       >
@@ -744,7 +703,7 @@ function WholesaleCatalog({ onAdd }: { onAdd: (line: BasketLine) => void }) {
         <ul className="sxa:mt-4 sxa:space-y-3">
           {slice.items.map((row) => (
             <li key={row.item.product_id}>
-              <CatalogProduct item={row.item} currency={row.currency} onAdd={onAdd} />
+              <CatalogProduct item={row.item} currency={row.currency} />
             </li>
           ))}
         </ul>
@@ -757,11 +716,9 @@ function WholesaleCatalog({ onAdd }: { onAdd: (line: BasketLine) => void }) {
 function CatalogProduct({
   item,
   currency,
-  onAdd,
 }: {
   item: ResellerCatalogItem;
   currency: string;
-  onAdd: (line: BasketLine) => void;
 }) {
   return (
     <AccountCard className="sxa:p-5">
@@ -771,27 +728,8 @@ function CatalogProduct({
           <p className="sxa:mt-1 sxa:text-micro sxa:text-muted">
             {formatAccountAmount(item.unit_price, currency)}
             {item.volume_discount_enabled ? ` · ${t('reseller.volumePricing')}` : ''}
-            {item.supplier_backed ? ` · ${t('reseller.supplierBacked')}` : ''}
           </p>
         </div>
-        {item.variants.length === 0 ? (
-          item.orderable ? (
-            <button
-              type="button"
-              className="sx-account-button sxa:card-button sxa:card-button--add"
-              onClick={() => onAdd({
-                product_id: item.product_id,
-                quantity: RESELLER_QUANTITY_MIN_UNITS,
-                title: item.title,
-                variant_title: null,
-              })}
-            >
-              {t('reseller.add')}
-            </button>
-          ) : (
-            <span className="sxa:text-micro sxa:text-muted">{t('common.unavailable')}</span>
-          )
-        ) : null}
       </div>
 
       {item.variants.length > 0 ? (
@@ -799,10 +737,8 @@ function CatalogProduct({
           {item.variants.map((variant) => (
             <CatalogVariant
               key={variant.variant_id}
-              item={item}
               variant={variant}
               currency={currency}
-              onAdd={onAdd}
             />
           ))}
         </ul>
@@ -812,15 +748,11 @@ function CatalogProduct({
 }
 
 function CatalogVariant({
-  item,
   variant,
   currency,
-  onAdd,
 }: {
-  item: ResellerCatalogItem;
   variant: ResellerCatalogVariant;
   currency: string;
-  onAdd: (line: BasketLine) => void;
 }) {
   return (
     <li className="sxa:flex sxa:flex-wrap sxa:items-center sxa:gap-3 sxa:rounded-input sxa:border sxa:bg-bg sxa:px-3 sxa:py-3">
@@ -828,207 +760,12 @@ function CatalogVariant({
         <p className="sxa:truncate sxa:text-small">{variant.title}</p>
         <p className="sxa:mt-1 sxa:text-micro sxa:text-muted">
           {formatAccountAmount(variant.unit_price, currency)}
-          {variant.supplier_backed ? ` · ${t('reseller.supplierBacked')}` : ''}
         </p>
       </div>
-      {/* Both flags have to say yes: an orderable variant of an unorderable
-          product is still not orderable. */}
-      {item.orderable && variant.orderable ? (
-        <button
-          type="button"
-          className="sx-account-button sxa:card-button sxa:card-button--add"
-          onClick={() => onAdd({
-            product_id: item.product_id,
-            variant_id: variant.variant_id,
-            quantity: RESELLER_QUANTITY_MIN_UNITS,
-            title: item.title,
-            variant_title: variant.title,
-          })}
-        >
-          {t('reseller.add')}
-        </button>
-      ) : (
-        <span className="sxa:text-micro sxa:text-muted">{t('common.unavailable')}</span>
-      )}
     </li>
   );
 }
 
-/* --- Basket and quote ----------------------------------------------------- */
-
-/**
- * A typed quantity, as whole units.
- *
- * `ResellerOrderItemSchema` is `.int()`, and it rejects the WHOLE basket over
- * one fractional line rather than that line alone. The quote button is not a
- * form submit either, so the number input's implicit step never runs and a
- * typed `1.5` would travel all the way to that refusal. `Math.trunc`, never a
- * bare `Number`.
- */
-function wholesaleQuantity(raw: string): number {
-  const units = Math.trunc(Number(raw));
-  if (!Number.isFinite(units) || units < RESELLER_QUANTITY_MIN_UNITS) {
-    return RESELLER_QUANTITY_MIN_UNITS;
-  }
-  return Math.min(RESELLER_QUANTITY_MAX_UNITS, units);
-}
-
-function WholesaleBasket({
-  basket,
-  priced,
-  onBasketChange,
-  onPriced,
-}: {
-  basket: BasketLine[];
-  priced: PricedBasket | null;
-  onBasketChange: (basket: BasketLine[]) => void;
-  onPriced: (priced: PricedBasket) => void;
-}) {
-  const [busy, setBusy] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const items: ResellerOrderItemInput[] = basket.map(({ product_id, variant_id, quantity }) => ({
-    product_id,
-    variant_id,
-    quantity,
-  }));
-  const quoteIsCurrent = priced !== null && quoteMatchesBasket(priced.basketKey, items);
-
-  const price = async () => {
-    setBusy(true);
-    setError(null);
-    const result = await callCustomerApi((sdk) => sdk.quoteResellerOrder(items));
-    setBusy(false);
-
-    if (!result.success) {
-      setError(result.message?.trim() || t('common.genericError'));
-      return;
-    }
-    const narrowed = narrowResellerQuote(result.data);
-    if (!narrowed.ok) {
-      setError(t('common.genericError'));
-      return;
-    }
-    onPriced({ basketKey: resellerBasketKey(items), quote: narrowed.data });
-  };
-
-  return (
-    <section>
-      <AccountSectionTitle>{t('reseller.basketTitle')}</AccountSectionTitle>
-      <AccountCard className="sxa:mt-4 sxa:p-6">
-        {basket.length === 0 ? (
-          <p className="sxa:text-small sxa:text-muted">{t('reseller.basketEmpty')}</p>
-        ) : (
-          <>
-            <ul className="sxa:space-y-3">
-              {basket.map((line) => (
-                <li
-                  key={`${line.product_id}:${line.variant_id ?? ''}`}
-                  className="sxa:flex sxa:flex-wrap sxa:items-center sxa:gap-3"
-                >
-                  <div className="sxa:min-w-0 sxa:flex-1">
-                    <p className="sxa:truncate sxa:text-small sxa:font-medium">{line.title}</p>
-                    {line.variant_title ? (
-                      <p className="sxa:mt-1 sxa:text-micro sxa:text-muted">{line.variant_title}</p>
-                    ) : null}
-                  </div>
-                  <label className="sxa:flex sxa:items-center sxa:gap-2 sxa:text-micro sxa:text-muted">
-                    {t('reseller.quantity')}
-                    <input
-                      type="number"
-                      min={RESELLER_QUANTITY_MIN_UNITS}
-                      max={RESELLER_QUANTITY_MAX_UNITS}
-                      step={1}
-                      value={line.quantity}
-                      disabled={busy}
-                      className={`${FIELD} sxa:w-24 sxa:tabular-nums`}
-                      onChange={(event) => onBasketChange(basket.map((entry) => (
-                        entry === line
-                          ? { ...entry, quantity: wholesaleQuantity(event.target.value) }
-                          : entry
-                      )))}
-                    />
-                  </label>
-                  <button
-                    type="button"
-                    disabled={busy}
-                    className="sxa:text-micro sxa:font-medium sxa:text-muted sxa:transition-colors sxa:hover:text-error sxa:disabled:opacity-50"
-                    onClick={() => onBasketChange(basket.filter((entry) => entry !== line))}
-                  >
-                    {t('favorites.remove')}
-                  </button>
-                </li>
-              ))}
-            </ul>
-
-            <div className="sxa:mt-5 sxa:border-t sxa:pt-4">
-              {/*
-                The quoted total is the only total this panel knows. A basket
-                that has moved since it was priced shows NONE — the previous
-                total belongs to a basket that no longer exists, and printing it
-                beside the new one is how a buyer plans against a price the
-                producer will not honour.
-              */}
-              {quoteIsCurrent && priced ? (
-                <dl className="sxa:space-y-2">
-                  <div className="sxa:flex sxa:items-baseline sxa:justify-between sxa:gap-3 sxa:text-small">
-                    <dt className="sxa:text-muted">{t('orders.subtotal')}</dt>
-                    <dd className="sxa:font-medium sxa:tabular-nums">
-                      {formatAccountAmount(priced.quote.subtotal, priced.quote.currency)}
-                    </dd>
-                  </div>
-                  {Number(priced.quote.volume_discount_total) > 0 ? (
-                    <div className="sxa:flex sxa:items-baseline sxa:justify-between sxa:gap-3 sxa:text-small">
-                      <dt className="sxa:text-success">{t('orders.discount')}</dt>
-                      <dd className="sxa:font-medium sxa:tabular-nums sxa:text-success">
-                        {formatAccountAmount(
-                          priced.quote.volume_discount_total,
-                          priced.quote.currency,
-                        )}
-                      </dd>
-                    </div>
-                  ) : null}
-                  <div className="sxa:flex sxa:items-baseline sxa:justify-between sxa:gap-3 sxa:border-t sxa:pt-3">
-                    <dt className="sxa:text-small sxa:font-semibold">{t('orders.total')}</dt>
-                    <dd className="sxa:text-h2 sxa:font-semibold sxa:tabular-nums">
-                      {formatAccountAmount(priced.quote.total, priced.quote.currency)}
-                    </dd>
-                  </div>
-                </dl>
-              ) : (
-                <p className="sxa:text-small sxa:text-muted">{t('reseller.basketNeedsQuote')}</p>
-              )}
-
-              <button
-                type="button"
-                disabled={busy}
-                aria-busy={busy || undefined}
-                className="sx-account-cta sxa:cta-button sxa:mt-4 sxa:inline-flex sxa:h-10 sxa:items-center sxa:px-5 sxa:text-small sxa:font-semibold sxa:disabled:cursor-not-allowed sxa:disabled:opacity-50"
-                onClick={() => void price()}
-              >
-                {busy ? <BusySpinner className="sxa:mr-1.5" /> : null}
-                {t('reseller.quote')}
-              </button>
-
-              {/*
-                Where "Place order" would have been. The edge allowlists no
-                wholesale order-placement route, so this says where the order is
-                actually placed instead of offering a button that 404s.
-              */}
-              <p className="sxa:mt-4 sxa:rounded-input sxa:border sxa:bg-bg sxa:p-5 sxa:text-small sxa:leading-relaxed sxa:text-muted">
-                {t('reseller.orderElsewhere')}
-              </p>
-            </div>
-          </>
-        )}
-        {error ? <AccountFieldError message={error} /> : null}
-      </AccountCard>
-    </section>
-  );
-}
-
-/* --- Order history -------------------------------------------------------- */
-
 function WholesaleOrders() {
   const [selected, setSelected] = useState<string | null>(null);
   const { state, moreBusy, moreError, loadMore, reload } = usePagedList<ResellerOrderListItem>(
@@ -1117,7 +854,7 @@ function WholesaleOrders() {
                 <span className="sxa:text-small sxa:font-semibold sxa:tabular-nums">
                   {formatAccountAmount(order.total, order.currency)}
                 </span>
-                <StatusChip status={order.status} />
+                <InvoiceStatusChip status={order.status} />
               </button>
             </li>
           ))}
@@ -1180,7 +917,7 @@ function WholesaleOrderDetail({ uniqid, onBack }: { uniqid: string; onBack: () =
             {formatAccountDateTime(order.created_at)}
           </p>
         </div>
-        <StatusChip status={order.status} />
+        <InvoiceStatusChip status={order.status} />
       </div>
 
       <AccountCard className="sxa:mt-5 sxa:p-6">
@@ -1257,22 +994,39 @@ function OrderLine({ line, currency }: { line: ResellerOrderLine; currency: stri
 
 /* --- API keys ------------------------------------------------------------- */
 
-function ResellerApiKeys() {
+/**
+ * Keys and the delivery URL are credentials, so they are created, shown and
+ * revoked on the hosted reseller page. The delivery row only when the shop has
+ * delivery URLs on.
+ */
+function CredentialLinks({ program }: { program: ResellerProgramState }) {
+  return (
+    <div className="sxa:space-y-3 sxa:text-left">
+      <HostedPageLink page="reseller" hints={{ tab: 'keys' }} label={t('reseller.manageKeys')} />
+      {program.delivery_url_enabled ? (
+        <HostedPageLink
+          page="reseller"
+          hints={{ tab: 'delivery' }}
+          label={t('reseller.delivery')}
+          hint={t('reseller.deliveryHint')}
+        />
+      ) : null}
+    </div>
+  );
+}
+
+function ResellerApiKeys({ program }: { program: ResellerProgramState }) {
   const { state, reload } = useAccountResource('reseller-api-keys', () =>
     callCustomerApi((sdk) => sdk.resellerApiKeys()));
   const [error, setError] = useState<string | null>(null);
 
   const heading = <AccountSectionTitle>{t('reseller.apiKeysTitle')}</AccountSectionTitle>;
 
-  /*
-   * Where "Create key" would have been. Issuing a key is not an allowlisted
-   * route at the edge, and a key the buyer cannot mint is not a control that
-   * belongs on the page — so this names where they come from instead.
-   */
+  /* Where "Create key" would have been: the hosted reseller page mints and revokes. */
   const elsewhere = (
-    <p className="sxa:mt-4 sxa:rounded-input sxa:border sxa:bg-bg sxa:p-5 sxa:text-small sxa:leading-relaxed sxa:text-muted">
-      {t('reseller.keysElsewhere')}
-    </p>
+    <div className="sxa:mt-4 sxa:rounded-input sxa:border sxa:bg-bg sxa:p-5">
+      <CredentialLinks program={program} />
+    </div>
   );
 
   if (state.status === 'loading') {

package/eject/account/rewards.tsx

@@ -55,6 +55,7 @@ import {
   AccountSectionTitle,
   BusySpinner,
   CopyButton,
+  HostedPageLink,
   formatAccountAmount,
   formatAccountDate,
   statusLabel,
@@ -105,6 +106,10 @@ export function AccountRewards() {
           currency={summary.currency}
         />
       </div>
+      {/* Store credit comes in through the hosted top-up page, when the shop takes top-ups. */}
+      {state.data.wallet?.topups_allowed ? (
+        <HostedPageLink page="topup" hints={{}} label={t('overview.topUp')} />
+      ) : null}
 
       {/*
         The shop's currency, not the wallet's and not the rewards summary's.

package/eject/account/shared.tsx

@@ -12,16 +12,19 @@
  * of them invents a value the producer did not send.
  */
 
+import { buyerInvoiceStatus, type BuyerStatusTone } from './buyer-invoice-status';
 import { useCallback, useEffect, useRef, useState, type ReactNode } from 'react';
 import { Link } from 'react-router-dom';
-import { toPanelState, type AccountPanelState } from './customer-account';
+import { safeExternalHref, toPanelState, type AccountPanelState } from './customer-account';
 import type { SdkResponse } from '@shoppexio/storefront-react';
+import { hostedPageHref, type HostedPage } from './hosted-page';
 import { getActiveLocale, t, tOptional } from './i18n';
 import {
   ArrowLeftIcon,
   CheckIcon,
   CircleAlertIcon,
   CopyIcon,
+  ExternalLinkIcon,
   LoaderIcon,
 } from './icons';
 
@@ -211,11 +214,8 @@ const STATUS_TONES: Record<string, string> = {
   CONVERTED: TONE_GOOD,
   // In flight. The buyer is waiting on someone, or someone is waiting on them.
   PENDING: TONE_WAITING,
-  PENDING_PAYMENT: TONE_WAITING,
   PROCESSING: TONE_WAITING,
-  AWAITING_STOCK: TONE_WAITING,
   AWAITING_REPLY: TONE_WAITING,
-  UNDERPAID: TONE_WAITING,
   TRIALING: TONE_WAITING,
   PAUSED: TONE_WAITING,
   INCOMPLETE: TONE_WAITING,
@@ -245,6 +245,26 @@ const STATUS_TONES: Record<string, string> = {
  * the tone never applied.
  */
 
+const INVOICE_TONES: Record<BuyerStatusTone, string> = {
+  positive: TONE_GOOD,
+  notice: TONE_WAITING,
+  danger: TONE_BAD,
+  neutral: 'sxa:meta-chip--neutral',
+};
+
+/**
+ * An order's status: the word (`invoiceStatus.*`) and the tone from the one
+ * buyer status table (Design Batch 9, C2), the rows the checkout and the theme
+ * account read too. A status the table does not know falls to `StatusChip`.
+ */
+export function InvoiceStatusChip({ status }: { status: string }) {
+  const row = buyerInvoiceStatus(status.trim().toUpperCase());
+  if (!row) return <StatusChip status={status} />;
+  return (
+    <span className={`sx-account-status sx-account-chip sxa:meta-chip sxa:meta-chip--status ${INVOICE_TONES[row.tone]} sxa:shrink-0`}>{t(`invoiceStatus.${row.labelKey}`)}</span>
+  );
+}
+
 /** `label` replaces the status word when the caller has a better one; the tone still follows `status`. */
 export function StatusChip({ status, label }: { status: string; label?: string }) {
   const tone = STATUS_TONES[status.trim().toUpperCase()] ?? 'sxa:meta-chip--neutral';
@@ -393,6 +413,42 @@ export function CopyButton({ value, className = '' }: { value: string; className
   );
 }
 
+/**
+ * A way out to a hosted buyer page on the checkout host (design Batch 7, A1):
+ * a plate with the external-link glyph, never a solid, because the account
+ * itself moves no money and mints no credential. Same tab, so the hosted page
+ * can send the buyer back. Renders nothing when the page has no shop or
+ * checkout host to link to (`hostedPageHref`).
+ */
+export function HostedPageLink({
+  page,
+  hints,
+  label,
+  hint = t('account.secureLink'),
+  className = '',
+}: {
+  page: HostedPage;
+  hints: Record<string, string>;
+  label: string;
+  /** The line beside the link; null where the card has no room for it. */
+  hint?: string | null;
+  className?: string;
+}) {
+  // The checkout host is a page global, so it is held to the same http(s)
+  // rule as any other href this account renders.
+  const href = safeExternalHref(hostedPageHref(page, hints));
+  if (!href) return null;
+  return (
+    <div className={`sx-account-hosted-link sxa:flex sxa:flex-wrap sxa:items-center sxa:justify-between sxa:gap-2 ${className}`}>
+      {hint ? <p className="sxa:text-small sxa:text-muted">{hint}</p> : null}
+      <a href={href} className="sx-account-button sxa:card-button sxa:card-button--add">
+        {label}
+        <ExternalLinkIcon className="sxa:ml-1.5 sxa:h-3.5 sxa:w-3.5 sxa:shrink-0" />
+      </a>
+    </div>
+  );
+}
+
 /** The spinner a control shows while its own request is in flight. */
 export function BusySpinner({ className = '' }: { className?: string }) {
   return <LoaderIcon className={`sxa:h-4 sxa:w-4 sxa:shrink-0 sxa:animate-spin ${className}`} />;