@shoppexio/storefront-react 0.0.0 → 0.1.0

package/eject/account/reseller.tsx

@@ -0,0 +1,1365 @@
+/**
+ * The wholesale account.
+ *
+ * The producer's relationship has FIVE states and this panel answers each of
+ * them separately: ACTIVE gets the working surface, APPLIED gets "your
+ * application is with the shop", SUSPENDED and REJECTED each get their own
+ * sentence, and INVITED — like having no relationship at all — goes to the entry
+ * 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.
+ */
+
+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';
+import {
+  clearAccountResellerInvite,
+  peekAccountResellerInvite,
+} from './account-reseller-invite';
+import type { SdkResponse, ShoppexSdk } from '@shoppexio/storefront-react';
+import { t } from './i18n';
+import { SearchIcon } from './icons';
+import {
+  AccountBackButton,
+  AccountCard,
+  AccountEmpty,
+  AccountError,
+  AccountFieldError,
+  AccountRowsSkeleton,
+  AccountSectionTitle,
+  BusySpinner,
+  CopyButton,
+  StatusChip,
+  formatAccountAmount,
+  formatAccountDate,
+  formatAccountDateTime,
+  useAccountResource,
+} from './shared';
+import { useAccountResellerProgram } from './dashboard';
+
+/** The contact form's control skin — see `components/contact/contact-form.tsx`. */
+const FIELD =
+  'sx-account-field sxa:w-full sxa:rounded-card 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';
+
+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
+   * disagree — the gate's failing while this one succeeded — and the buyer
+   * would be shown an active wholesale account by a panel the navigation had
+   * just dropped the tab for. Retrying here reopens the gate with it.
+   */
+  const { state, reload } = useAccountResellerProgram();
+
+  if (state.status === 'loading') {
+    return <AccountRowsSkeleton rows={4} label={t('overview.loading')} />;
+  }
+  if (state.status === 'error') {
+    return <AccountError message={state.message} onRetry={reload} />;
+  }
+
+  const narrowed = narrowResellerProgram(state.data);
+  if (!narrowed.ok) {
+    return <AccountError message={t('common.genericError')} onRetry={reload} />;
+  }
+  const program = narrowed.data;
+
+  if (!program.program_enabled) {
+    return (
+      <AccountEmpty
+        title={t('reseller.disabledTitle')}
+        body={t('reseller.disabledBody')}
+      />
+    );
+  }
+
+  const reseller = program.reseller;
+  const status = reseller?.status;
+
+  if (reseller && status === 'ACTIVE') {
+    return <ActiveReseller relationship={reseller} />;
+  }
+
+  if (status === 'APPLIED') {
+    return (
+      <AccountEmpty
+        title={t('reseller.pendingTitle')}
+        body={t('reseller.pendingBody')}
+      />
+    );
+  }
+
+  if (status === 'SUSPENDED') {
+    return (
+      <AccountEmpty
+        title={t('reseller.suspendedTitle')}
+        body={t('reseller.suspendedBody')}
+      />
+    );
+  }
+
+  if (status === 'REJECTED') {
+    return (
+      <AccountEmpty
+        title={t('reseller.rejectedTitle')}
+        body={t('reseller.rejectedBody')}
+      />
+    );
+  }
+
+  // INVITED and "no relationship at all" are the two ways into the program, and
+  // `resellerEntryMode` is what tells them apart from the shop's own mode.
+  return <ResellerEntry program={program} onDone={reload} />;
+}
+
+function ResellerEntry({
+  program,
+  onDone,
+}: {
+  program: ResellerProgramState;
+  onDone: () => void;
+}) {
+  const fieldId = useId();
+  const [note, setNote] = useState('');
+  const [token, setToken] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const attemptedInviteToken = useRef<string | null>(null);
+
+  useEffect(() => {
+    // The cookie belongs to the invited email. Another authenticated buyer must
+    // be able to switch accounts while the cookie lives.
+    if (program.reseller?.status !== 'INVITED') return;
+
+    const inviteToken = peekAccountResellerInvite(document);
+    if (!inviteToken || attemptedInviteToken.current === inviteToken) return;
+    attemptedInviteToken.current = inviteToken;
+
+    setBusy(true);
+    setError(null);
+    void (async () => {
+      const result = await callCustomerApi((sdk) => sdk.acceptResellerInvite(inviteToken));
+      setBusy(false);
+
+      // Only success spends the cookie: a failure can mean this browser is
+      // signed into another invited customer, and the actually invited one
+      // still needs the token after switching accounts.
+      if (!result.success) {
+        setToken(inviteToken);
+        setError(result.message?.trim() || t('common.genericError'));
+        return;
+      }
+      if (!narrowResellerMutation(result.data).ok) {
+        setToken(inviteToken);
+        setError(t('common.genericError'));
+        return;
+      }
+      clearAccountResellerInvite(document);
+      onDone();
+    })();
+  }, [program.reseller?.status, onDone]);
+
+  const run = async (operation: (sdk: ShoppexSdk) => Promise<SdkResponse<unknown>>) => {
+    setBusy(true);
+    setError(null);
+    const result = await callCustomerApi(operation);
+    setBusy(false);
+
+    if (!result.success) {
+      setError(result.message?.trim() || t('common.genericError'));
+      return;
+    }
+    // The enrolment routes answer with the relationship they just wrote. A body
+    // that is not one is not proof of anything, so it is not celebrated.
+    if (!narrowResellerMutation(result.data).ok) {
+      setError(t('common.genericError'));
+      return;
+    }
+    onDone();
+  };
+
+  /*
+   * Not `program.enrollment_mode`. An invitation outranks the shop's mode:
+   * `ResellerEnrollmentService.invite` only requires an ENABLED program, so a
+   * shop taking open sign-ups can still have invited this buyer. Offering them
+   * the join button offers the one call the producer answers 409 to, while the
+   * token in their mail has nowhere to go.
+   */
+  const entry = resellerEntryMode(program);
+
+  if (entry === 'OPEN') {
+    return (
+      <AccountEmpty
+        title={t('reseller.openTitle')}
+        body={program.application_message ?? t('reseller.openBody')}
+        action={(
+          <button
+            type="button"
+            disabled={busy}
+            aria-busy={busy || undefined}
+            className="sx-account-cta sxa:cta-button 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 run((sdk) => sdk.enrollAsReseller())}
+          >
+            {busy ? <BusySpinner className="sxa:mr-1.5" /> : null}
+            {t('reseller.join')}
+          </button>
+        )}
+      />
+    );
+  }
+
+  if (entry === 'MANUAL') {
+    return (
+      <AccountCard className="sxa:mx-auto sxa:max-w-xl sxa:p-6">
+        <h2 className="sxa:font-heading sxa:text-body sxa:font-semibold">{t('reseller.manualTitle')}</h2>
+        <p className="sxa:mt-2 sxa:text-small sxa:leading-relaxed sxa:text-muted">
+          {program.application_message ?? t('reseller.manualBody')}
+        </p>
+        <form
+          noValidate
+          className="sxa:mt-5"
+          onSubmit={(event) => {
+            event.preventDefault();
+            void run((sdk) => sdk.acceptResellerInvite(token.trim()));
+          }}
+        >
+          <label htmlFor={`${fieldId}-token`} className="sxa:mb-1.5 sxa:block sxa:text-small sxa:font-medium">
+            {t('reseller.inviteToken')}
+          </label>
+          <input
+            id={`${fieldId}-token`}
+            type="text"
+            value={token}
+            disabled={busy}
+            aria-invalid={error ? true : undefined}
+            onChange={(event) => {
+              setToken(event.target.value);
+              setError(null);
+            }}
+            className={FIELD}
+          />
+          {error ? <AccountFieldError message={error} /> : null}
+          <button
+            type="submit"
+            disabled={busy || token.trim().length === 0}
+            aria-busy={busy || undefined}
+            className="sx-account-cta sxa:cta-button sxa:mt-5 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"
+          >
+            {busy ? <BusySpinner className="sxa:mr-1.5" /> : null}
+            {t('reseller.acceptInvite')}
+          </button>
+        </form>
+      </AccountCard>
+    );
+  }
+
+  const apply = () => {
+    if (program.require_application_note && note.trim().length === 0) {
+      setError(t('reseller.noteRequired'));
+      return;
+    }
+    void run((sdk) => sdk.applyForReseller(note.trim() || undefined));
+  };
+
+  return (
+    <AccountCard className="sxa:mx-auto sxa:max-w-xl sxa:p-6">
+      <h2 className="sxa:font-heading sxa:text-body sxa:font-semibold">{t('reseller.applicationTitle')}</h2>
+      <p className="sxa:mt-2 sxa:text-small sxa:leading-relaxed sxa:text-muted">
+        {program.application_message ?? t('reseller.applicationBody')}
+      </p>
+      <form
+        noValidate
+        className="sxa:mt-5"
+        onSubmit={(event) => {
+          event.preventDefault();
+          apply();
+        }}
+      >
+        <label htmlFor={`${fieldId}-note`} className="sxa:mb-1.5 sxa:block sxa:text-small sxa:font-medium">
+          {t('reseller.applicationNote')}
+        </label>
+        <textarea
+          id={`${fieldId}-note`}
+          rows={4}
+          value={note}
+          disabled={busy}
+          aria-invalid={error ? true : undefined}
+          onChange={(event) => {
+            setNote(event.target.value);
+            setError(null);
+          }}
+          className={`${FIELD} sxa:resize-none`}
+        />
+        {error ? <AccountFieldError message={error} /> : null}
+        <button
+          type="submit"
+          disabled={busy}
+          aria-busy={busy || undefined}
+          className="sx-account-cta sxa:cta-button sxa:mt-5 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"
+        >
+          {busy ? <BusySpinner className="sxa:mr-1.5" /> : null}
+          {t('reseller.apply')}
+        </button>
+      </form>
+    </AccountCard>
+  );
+}
+
+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
+    )));
+  };
+
+  const discount = relationship.tier?.discount_percent;
+
+  return (
+    <div className="sxa:space-y-8">
+      <section>
+        <AccountSectionTitle>{t('reseller.activeTitle')}</AccountSectionTitle>
+        <div className="sxa:mt-4 sxa:grid sxa:gap-3 sxa:sm:grid-cols-2">
+          <Metric
+            label={t('reseller.tier')}
+            value={relationship.tier?.name ?? t('common.unavailable')}
+          />
+          <Metric
+            label={t('orders.discount')}
+            value={discount === null || discount === undefined
+              ? t('common.unavailable')
+              : `${discount}%`}
+          />
+          {/*
+            The relationship carries a lifetime figure and NO currency to read
+            it in, so it is printed exactly as the producer spelled it. Running
+            it through a formatter would mean picking a currency nobody sent.
+          */}
+          <Metric label={t('referrals.revenue')} value={relationship.lifetime_revenue} />
+          <Metric label={t('overview.statOrders')} value={relationship.lifetime_orders} />
+        </div>
+      </section>
+
+      <WholesaleWallet />
+      <WholesaleCatalog onAdd={add} />
+      <WholesaleBasket
+        basket={basket}
+        priced={priced}
+        onBasketChange={replaceBasket}
+        onPriced={setPriced}
+      />
+      <WholesaleOrders />
+      <ResellerApiKeys />
+    </div>
+  );
+}
+
+function Metric({ label, value }: { label: string; value: string | number }) {
+  return (
+    <div className="sxa:rounded-input sxa:border sxa:bg-bg sxa:p-5">
+      <p className="sxa:truncate sxa:text-h3 sxa:font-semibold sxa:tabular-nums">{value}</p>
+      <p className="sxa:mt-1 sxa:text-micro sxa:text-muted">{label}</p>
+    </div>
+  );
+}
+
+/* --- Wholesale balance ---------------------------------------------------- */
+
+function WholesaleWallet() {
+  const { state, reload } = useAccountResource('reseller-wallet', () =>
+    callCustomerApi((sdk) => sdk.resellerWallet()));
+
+  const heading = <AccountSectionTitle>{t('reseller.walletTitle')}</AccountSectionTitle>;
+
+  if (state.status === 'loading') {
+    return (
+      <section>
+        {heading}
+        <div className="sxa:mt-4">
+          <AccountRowsSkeleton rows={1} label={t('overview.loading')} />
+        </div>
+      </section>
+    );
+  }
+  if (state.status === 'error') {
+    return (
+      <section>
+        {heading}
+        <div className="sxa:mt-4">
+          <AccountError message={state.message} onRetry={reload} />
+        </div>
+      </section>
+    );
+  }
+
+  const narrowed = narrowResellerWallet(state.data);
+  if (!narrowed.ok) {
+    return (
+      <section>
+        {heading}
+        <div className="sxa:mt-4">
+          <AccountError message={t('common.genericError')} onRetry={reload} />
+        </div>
+      </section>
+    );
+  }
+  const wallet = narrowed.data;
+
+  return (
+    <section>
+      {heading}
+      <AccountCard className="sxa:mt-4 sxa:p-6">
+        <div className="sxa:flex sxa:flex-wrap sxa:items-center sxa:justify-between sxa:gap-3">
+          <p className="sxa:text-small sxa:font-medium">{t('rewards.available')}</p>
+          <StatusChip status={wallet.is_active ? 'ACTIVE' : 'INACTIVE'} />
+        </div>
+        <p className="sxa:mt-1 sxa:text-h2 sxa:font-semibold sxa:tabular-nums">
+          {formatAccountAmount(wallet.available, wallet.currency)}
+        </p>
+
+        <div className="sxa:mt-4 sxa:grid sxa:gap-3 sxa:sm:grid-cols-2">
+          <Metric
+            label={t('reseller.balance')}
+            value={formatAccountAmount(wallet.balance, wallet.currency)}
+          />
+          <Metric
+            label={t('reseller.held')}
+            value={formatAccountAmount(wallet.hold_balance, wallet.currency)}
+          />
+        </div>
+
+      </AccountCard>
+    </section>
+  );
+}
+
+/* --- Paging --------------------------------------------------------------- */
+
+interface PageSlice<T> {
+  items: T[];
+  page: number;
+  perPage: number;
+  total: number;
+}
+
+type PageRead<T> = Promise<
+  { ok: true; slice: PageSlice<T> } | { ok: false; message: string }
+>;
+
+type PagedState<T> =
+  | { status: 'loading' }
+  | { status: 'error'; message: string }
+  | { status: 'ready'; slice: PageSlice<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.
+ *
+ * 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
+ * where it was, so pressing it again asks for the page that failed rather than
+ * skipping it.
+ */
+function usePagedList<T>(resetKey: string, read: (page: number) => PageRead<T>) {
+  const [state, setState] = useState<PagedState<T>>({ status: 'loading' });
+  const [attempt, setAttempt] = useState(0);
+  const [moreBusy, setMoreBusy] = useState(false);
+  const [moreError, setMoreError] = useState<string | null>(null);
+  const readRef = useRef(read);
+  readRef.current = read;
+  const stateRef = useRef(state);
+  stateRef.current = state;
+  /** Bumped on every reset, so a page that arrives late cannot land in a list
+   *  the buyer has since re-filtered. */
+  const generation = useRef(0);
+
+  useEffect(() => {
+    generation.current += 1;
+    const mine = generation.current;
+    setState({ status: 'loading' });
+    setMoreBusy(false);
+    setMoreError(null);
+
+    void readRef.current(1).then((result) => {
+      if (generation.current !== mine) return;
+      setState(result.ok
+        ? { status: 'ready', slice: result.slice }
+        : { status: 'error', message: result.message });
+    });
+  }, [resetKey, attempt]);
+
+  const loadMore = useCallback(() => {
+    const current = stateRef.current;
+    if (current.status !== 'ready') return;
+    const mine = generation.current;
+    setMoreBusy(true);
+    setMoreError(null);
+
+    void readRef.current(current.slice.page + 1).then((result) => {
+      if (generation.current !== mine) return;
+      setMoreBusy(false);
+      if (!result.ok) {
+        setMoreError(result.message);
+        return;
+      }
+      setState((previous) => (previous.status === 'ready'
+        ? {
+            status: 'ready',
+            slice: {
+              items: [...previous.slice.items, ...result.slice.items],
+              page: result.slice.page,
+              perPage: result.slice.perPage,
+              total: result.slice.total,
+            },
+          }
+        : previous));
+    });
+  }, []);
+
+  const reload = useCallback(() => setAttempt((value) => value + 1), []);
+
+  return { state, moreBusy, moreError, loadMore, reload };
+}
+
+function hasMorePages<T>(slice: PageSlice<T>): boolean {
+  return slice.page * slice.perPage < slice.total;
+}
+
+function MorePages({
+  slice,
+  busy,
+  error,
+  onMore,
+}: {
+  slice: PageSlice<unknown>;
+  busy: boolean;
+  error: string | null;
+  onMore: () => void;
+}) {
+  const more = hasMorePages(slice);
+  if (slice.page <= 1 && !more) return null;
+
+  return (
+    <div>
+      <nav
+        className="sxa:mt-4 sxa:flex sxa:flex-wrap sxa:items-center sxa:justify-between sxa:gap-3"
+        aria-label={t('orders.pagesLabel')}
+      >
+        <span className="sxa:text-micro sxa:text-muted">{t('orders.page', { page: slice.page })}</span>
+        <button
+          type="button"
+          disabled={!more || busy}
+          aria-busy={busy || undefined}
+          className="sx-account-button sxa:card-button sxa:card-button--add sxa:disabled:cursor-not-allowed sxa:disabled:opacity-40"
+          onClick={onMore}
+        >
+          {busy ? <BusySpinner className="sxa:mr-1.5" /> : null}
+          {t('orders.next')}
+        </button>
+      </nav>
+      {error ? <AccountFieldError message={error} /> : null}
+    </div>
+  );
+}
+
+/* --- Catalog -------------------------------------------------------------- */
+
+/** One catalog row, carrying the currency the producer sent WITH its page. */
+interface CatalogRow {
+  item: ResellerCatalogItem;
+  currency: string;
+}
+
+function WholesaleCatalog({ onAdd }: { onAdd: (line: BasketLine) => void }) {
+  const searchId = useId();
+  const [search, setSearch] = useState('');
+  const [query, setQuery] = useState('');
+
+  const { state, moreBusy, moreError, loadMore, reload } = usePagedList<CatalogRow>(
+    `reseller-catalog:${query}`,
+    async (page) => {
+      const response = await callCustomerApi((sdk) => sdk.resellerCatalog({
+        ...(query ? { search: query } : {}),
+        page,
+        per_page: PAGE_SIZE,
+      }));
+      if (!response.success) {
+        return { ok: false, message: response.message?.trim() || t('common.genericError') };
+      }
+      const narrowed = narrowResellerCatalog(response.data);
+      if (!narrowed.ok) return { ok: false, message: t('common.genericError') };
+
+      const { catalog } = narrowed.data;
+      return {
+        ok: true,
+        slice: {
+          items: catalog.items.map((item) => ({ item, currency: catalog.currency })),
+          page: catalog.page,
+          perPage: catalog.per_page,
+          total: catalog.total,
+        },
+      };
+    },
+  );
+
+  const heading = (
+    <div className="sxa:flex sxa:flex-wrap sxa:items-end sxa:justify-between sxa:gap-3">
+      <AccountSectionTitle>{t('reseller.catalogTitle')}</AccountSectionTitle>
+      <form
+        noValidate
+        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.
+          setQuery(search.trim());
+        }}
+      >
+        <label htmlFor={searchId} className="sxa:sr-only">
+          {t('reseller.search')}
+        </label>
+        <input
+          id={searchId}
+          type="search"
+          value={search}
+          onChange={(event) => setSearch(event.target.value)}
+          className={`${FIELD} sxa:w-36`}
+        />
+        <button
+          type="submit"
+          className="sx-account-button sxa:card-button sxa:card-button--add"
+          aria-label={t('reseller.search')}
+        >
+          <SearchIcon className="sxa:h-3 sxa:w-3" />
+        </button>
+      </form>
+    </div>
+  );
+
+  if (state.status === 'loading') {
+    return (
+      <section>
+        {heading}
+        <div className="sxa:mt-4">
+          <AccountRowsSkeleton label={t('overview.loading')} />
+        </div>
+      </section>
+    );
+  }
+  if (state.status === 'error') {
+    return (
+      <section>
+        {heading}
+        <div className="sxa:mt-4">
+          <AccountError message={state.message} onRetry={reload} />
+        </div>
+      </section>
+    );
+  }
+
+  const { slice } = state;
+
+  return (
+    <section>
+      {heading}
+      {slice.items.length === 0 ? (
+        <div className="sxa:mt-4">
+          <AccountEmpty
+            title={t('reseller.catalogEmptyTitle')}
+            body={t('reseller.catalogEmptyBody')}
+          />
+        </div>
+      ) : (
+        <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} />
+            </li>
+          ))}
+        </ul>
+      )}
+      <MorePages slice={slice} busy={moreBusy} error={moreError} onMore={loadMore} />
+    </section>
+  );
+}
+
+function CatalogProduct({
+  item,
+  currency,
+  onAdd,
+}: {
+  item: ResellerCatalogItem;
+  currency: string;
+  onAdd: (line: BasketLine) => void;
+}) {
+  return (
+    <AccountCard className="sxa:p-5">
+      <div 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-semibold">{item.title}</p>
+          <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 ? (
+        <ul className="sxa:mt-4 sxa:space-y-2 sxa:border-t sxa:pt-4">
+          {item.variants.map((variant) => (
+            <CatalogVariant
+              key={variant.variant_id}
+              item={item}
+              variant={variant}
+              currency={currency}
+              onAdd={onAdd}
+            />
+          ))}
+        </ul>
+      ) : null}
+    </AccountCard>
+  );
+}
+
+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">
+      <div className="sxa:min-w-0 sxa:flex-1">
+        <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>(
+    'reseller-orders',
+    async (page) => {
+      const response = await callCustomerApi((sdk) => sdk.resellerOrders({
+        page,
+        per_page: PAGE_SIZE,
+      }));
+      if (!response.success) {
+        return { ok: false, message: response.message?.trim() || t('common.genericError') };
+      }
+      const narrowed = narrowResellerOrders(response.data);
+      if (!narrowed.ok) return { ok: false, message: t('common.genericError') };
+
+      return {
+        ok: true,
+        slice: {
+          items: narrowed.data.items,
+          page: narrowed.data.page,
+          perPage: narrowed.data.per_page,
+          total: narrowed.data.total,
+        },
+      };
+    },
+  );
+
+  if (selected !== null) {
+    return <WholesaleOrderDetail uniqid={selected} onBack={() => setSelected(null)} />;
+  }
+
+  const heading = <AccountSectionTitle>{t('reseller.ordersTitle')}</AccountSectionTitle>;
+
+  if (state.status === 'loading') {
+    return (
+      <section>
+        {heading}
+        <div className="sxa:mt-4">
+          <AccountRowsSkeleton label={t('orders.loading')} />
+        </div>
+      </section>
+    );
+  }
+  if (state.status === 'error') {
+    return (
+      <section>
+        {heading}
+        <div className="sxa:mt-4">
+          <AccountError message={state.message} onRetry={reload} />
+        </div>
+      </section>
+    );
+  }
+
+  const { slice } = state;
+
+  return (
+    <section>
+      {heading}
+      {slice.items.length === 0 ? (
+        <div className="sxa:mt-4">
+          <AccountEmpty
+            title={t('reseller.ordersEmptyTitle')}
+            body={t('reseller.ordersEmptyBody')}
+          />
+        </div>
+      ) : (
+        <ul className="sxa:mt-4 sxa:space-y-3">
+          {slice.items.map((order) => (
+            <li key={order.uniqid}>
+              <button
+                type="button"
+                onClick={() => setSelected(order.uniqid)}
+                className="sxa:flex sxa:w-full sxa:flex-wrap sxa:items-center sxa:gap-4 sxa:rounded-input sxa:border sxa:bg-surface sxa:p-5 sxa:text-left sxa:shadow-card sxa:transition-colors sxa:hover:bg-raised"
+              >
+                <div className="sxa:min-w-0 sxa:flex-1">
+                  <p className="sxa:truncate sxa:text-small sxa:font-semibold">
+                    {t('orders.fallbackTitle', { id: order.uniqid })}
+                  </p>
+                  <p className="sxa:mt-1 sxa:text-micro sxa:text-muted">
+                    {formatAccountDate(order.created_at)}
+                    {' · '}
+                    {t('reseller.lineQuantity', { count: order.item_count })}
+                  </p>
+                </div>
+                <span className="sxa:text-small sxa:font-semibold sxa:tabular-nums">
+                  {formatAccountAmount(order.total, order.currency)}
+                </span>
+                <StatusChip status={order.status} />
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+      <MorePages slice={slice} busy={moreBusy} error={moreError} onMore={loadMore} />
+    </section>
+  );
+}
+
+function WholesaleOrderDetail({ uniqid, onBack }: { uniqid: string; onBack: () => void }) {
+  const { state, reload } = useAccountResource(`reseller-order:${uniqid}`, () =>
+    callCustomerApi((sdk) => sdk.resellerOrder(uniqid)));
+
+  const back = <AccountBackButton onClick={onBack} label={t('orders.allOrders')} />;
+
+  if (state.status === 'loading') {
+    return (
+      <section>
+        {back}
+        <div className="sxa:mt-5">
+          <AccountRowsSkeleton label={t('orders.loadingOne')} />
+        </div>
+      </section>
+    );
+  }
+  if (state.status === 'error') {
+    return (
+      <section>
+        {back}
+        <div className="sxa:mt-5">
+          <AccountError message={state.message} onRetry={reload} />
+        </div>
+      </section>
+    );
+  }
+
+  const narrowed = narrowResellerOrderDetail(state.data);
+  if (!narrowed.ok) {
+    return (
+      <section>
+        {back}
+        <div className="sxa:mt-5">
+          <AccountError message={t('common.genericError')} onRetry={reload} />
+        </div>
+      </section>
+    );
+  }
+  const order = narrowed.data;
+
+  return (
+    <section>
+      {back}
+      <div className="sxa:mt-5 sxa:flex sxa:flex-wrap sxa:items-start sxa:justify-between sxa:gap-4">
+        <div className="sxa:min-w-0">
+          <h2 className="sxa:font-heading sxa:truncate sxa:text-h3 sxa:font-semibold">
+            {t('orders.detailTitle', { id: order.uniqid })}
+          </h2>
+          <p className="sxa:mt-1 sxa:text-small sxa:text-muted">
+            {formatAccountDateTime(order.created_at)}
+          </p>
+        </div>
+        <StatusChip status={order.status} />
+      </div>
+
+      <AccountCard className="sxa:mt-5 sxa:p-6">
+        <div className="sxa:flex sxa:items-baseline sxa:justify-between sxa:gap-3 sxa:text-small">
+          <span className="sxa:text-muted">{t('orders.total')}</span>
+          <span className="sxa:font-semibold sxa:tabular-nums">
+            {formatAccountAmount(order.total, order.currency)}
+          </span>
+        </div>
+        {order.refunded_amount !== null ? (
+          <div className="sxa:mt-2 sxa:flex sxa:items-baseline sxa:justify-between sxa:gap-3 sxa:text-small">
+            <span className="sxa:text-muted">{t('reseller.refunded')}</span>
+            <span className="sxa:font-semibold sxa:tabular-nums">
+              {formatAccountAmount(order.refunded_amount, order.currency)}
+            </span>
+          </div>
+        ) : null}
+        <div className="sxa:mt-2 sxa:flex sxa:items-baseline sxa:justify-between sxa:gap-3 sxa:text-small">
+          <span className="sxa:text-muted">{t('reseller.tier')}</span>
+          <span className="sxa:font-medium">
+            {order.tier_name}
+            {' · '}
+            {`${order.tier_discount_percent}%`}
+          </span>
+        </div>
+      </AccountCard>
+
+      <ul className="sxa:mt-4 sxa:space-y-3">
+        {order.lines.map((line, index) => (
+          <li key={`${line.product_id ?? ''}:${line.variant_id ?? ''}:${index}`}>
+            <OrderLine line={line} currency={order.currency} />
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}
+
+function OrderLine({ line, currency }: { line: ResellerOrderLine; currency: string }) {
+  return (
+    <AccountCard className="sxa:p-5">
+      <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">{line.product_title}</p>
+          {line.variant_title ? (
+            <p className="sxa:mt-1 sxa:text-micro sxa:text-muted">{line.variant_title}</p>
+          ) : null}
+        </div>
+        <p className="sxa:text-small sxa:font-semibold sxa:tabular-nums">
+          {formatAccountAmount(line.total, currency)}
+        </p>
+      </div>
+      <p className="sxa:mt-2 sxa:text-micro sxa:text-muted">
+        {t('reseller.lineQuantity', { count: line.quantity })}
+        {' · '}
+        {line.delivered ? t('delivery.DELIVERED') : t('delivery.PENDING')}
+        {line.delivered_at !== null ? ` · ${formatAccountDateTime(line.delivered_at)}` : ''}
+      </p>
+
+      {line.serials.length > 0 ? (
+        <div className="sxa:mt-4 sxa:space-y-2 sxa:border-t sxa:pt-4">
+          <p className="sxa:text-micro sxa:font-semibold sxa:text-muted">{t('reseller.serials')}</p>
+          {line.serials.map((serial) => (
+            <div key={serial} className="sxa:flex sxa:items-center sxa:gap-3">
+              <p className="sxa:min-w-0 sxa:flex-1 sxa:truncate sxa:font-mono sxa:text-micro">{serial}</p>
+              <CopyButton value={serial} />
+            </div>
+          ))}
+        </div>
+      ) : null}
+    </AccountCard>
+  );
+}
+
+/* --- API keys ------------------------------------------------------------- */
+
+function ResellerApiKeys() {
+  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.
+   */
+  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>
+  );
+
+  if (state.status === 'loading') {
+    return (
+      <section>
+        {heading}
+        <div className="sxa:mt-4">
+          <AccountRowsSkeleton rows={2} label={t('overview.loading')} />
+        </div>
+        {elsewhere}
+      </section>
+    );
+  }
+  if (state.status === 'error') {
+    return (
+      <section>
+        {heading}
+        <div className="sxa:mt-4">
+          <AccountError message={state.message} onRetry={reload} />
+        </div>
+        {elsewhere}
+      </section>
+    );
+  }
+
+  const narrowed = narrowResellerApiKeys(state.data);
+  if (!narrowed.ok) {
+    return (
+      <section>
+        {heading}
+        <div className="sxa:mt-4">
+          <AccountError message={t('common.genericError')} onRetry={reload} />
+        </div>
+        {elsewhere}
+      </section>
+    );
+  }
+  const keys = narrowed.data;
+
+  return (
+    <section>
+      {heading}
+      {error ? (
+        <div className="sxa:mt-4">
+          <AccountError message={error} />
+        </div>
+      ) : null}
+
+      {keys.length === 0 ? (
+        <p className="sxa:mt-4 sxa:text-small sxa:text-muted">{t('reseller.apiKeysEmpty')}</p>
+      ) : (
+        <ul className="sxa:mt-4 sxa:space-y-3">
+          {keys.map((key) => (
+            <li
+              key={key.id}
+              className="sxa:flex sxa:flex-wrap sxa:items-center sxa:gap-4 sxa:rounded-input sxa:border sxa:bg-surface sxa:p-5 sxa:shadow-card"
+            >
+              <div className="sxa:min-w-0 sxa:flex-1">
+                <p className="sxa:truncate sxa:text-small sxa:font-semibold">
+                  {key.name}
+                  {' · '}
+                  <span className="sxa:font-mono">{key.key_last4}</span>
+                </p>
+                <p className="sxa:mt-1 sxa:text-micro sxa:text-muted">
+                  {key.last_used_at
+                    ? t('reseller.lastUsed', {
+                        date: formatAccountDateTime(key.last_used_at),
+                      })
+                    : t('reseller.neverUsed')}
+                </p>
+              </div>
+
+              {/* A revoked key stays on the list, stamped. Removing the row
+                  would hide the fact that the key ever existed.
+
+                  Read-only: revoking is irreversible and breaks the buyer's
+                  external integrations at once, and this page is
+                  merchant-authored JavaScript — a hostile theme could revoke
+                  every key silently, past a confirmation it renders itself.
+                  The route is off the worker's allowlist for that reason. */}
+              {key.revoked_at !== null ? <StatusChip status="REVOKED" /> : null}
+            </li>
+          ))}
+        </ul>
+      )}
+
+      {elsewhere}
+    </section>
+  );
+}