@shoppexio/storefront-react 0.2.1 → 0.4.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,7 @@ import {
   AccountSectionTitle,
   BusySpinner,
   CopyButton,
+  HostedPageLink,
   StatusChip,
   formatAccountAmount,
   formatAccountDate,
@@ -74,18 +68,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 +103,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 +116,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 +334,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 +369,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 +450,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 +482,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 +600,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 +640,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 +702,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 +715,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 +727,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 +736,8 @@ function CatalogProduct({
           {item.variants.map((variant) => (
             <CatalogVariant
               key={variant.variant_id}
-              item={item}
               variant={variant}
               currency={currency}
-              onAdd={onAdd}
             />
           ))}
         </ul>
@@ -812,15 +747,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 +759,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>(
@@ -1257,22 +993,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

@@ -17,7 +17,7 @@
  * depends on that answer must not hold up the coupons above it.
  */
 
-import { useState, type ReactNode } from 'react';
+import { useRef, useState, type ReactNode } from 'react';
 import { Link } from 'react-router-dom';
 import {
   loyaltyDate,
@@ -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.
@@ -218,6 +223,14 @@ function LoyaltyPoints({
 }) {
   const { state, reload } = resource;
   const [notice, setNotice] = useState<string | null>(null);
+  /*
+   * The loyalty answer on screen when a conversion's outcome became unknown.
+   * Held by identity: only a re-read that ANSWERS replaces `state.data`, and
+   * the reload discards any read started before it. So the form stays locked
+   * until a fresh read succeeded; a failed one keeps this object and the lock,
+   * and offers the read again through the stale notice below.
+   */
+  const [unconfirmedOn, setUnconfirmedOn] = useState<SdkCustomerLoyalty | null>(null);
 
   /*
    * A conversion re-reads the route so the balance and the activity list come
@@ -229,6 +242,10 @@ function LoyaltyPoints({
    * the buyer pressed the button. Nothing is kept a second time here.
    */
   const loyalty = state.status === 'ready' ? state.data : null;
+  // Read at the moment the answer arrives: the callback below was created by
+  // the render that started the request, and a re-read may have landed since.
+  const onScreen = useRef(loyalty);
+  onScreen.current = loyalty;
 
   if (loyalty === null) {
     return state.status === 'error' ? (
@@ -249,6 +266,7 @@ function LoyaltyPoints({
   const stale = state.status === 'ready' ? state.staleMessage : undefined;
 
   const offer = redeemOffer(loyalty);
+  const unconfirmed = unconfirmedOn === loyalty;
 
   return (
     <PointsSection>
@@ -271,7 +289,9 @@ function LoyaltyPoints({
 
       {stale ? <AccountError message={stale} onRetry={reload} /> : null}
 
-      {notice ? <AccountNotice message={notice} /> : null}
+      {unconfirmed ? (
+        <p role="status" className="sxa:mt-3 sxa:text-small sxa:text-muted">{t('rewards.loading')}</p>
+      ) : notice ? <AccountNotice message={notice} /> : null}
 
       {/* The minimum, for a balance that cannot clear it yet. The form is gone
           because the route would refuse it, but the figure it refuses below is
@@ -286,8 +306,11 @@ function LoyaltyPoints({
         <RedeemPoints
           offer={offer}
           currency={currency}
+          locked={unconfirmed}
           onRedeemed={(message) => {
             setNotice(message);
+            // No message is the unknown outcome; the two re-reads answer it.
+            setUnconfirmedOn(message === null ? onScreen.current : null);
             reload();
             onCredited();
           }}
@@ -331,11 +354,15 @@ function PointsTile({ label, points }: { label: string; points: number }) {
 function RedeemPoints({
   offer,
   currency,
+  locked,
   onRedeemed,
 }: {
   offer: Extract<RedeemOffer, { kind: 'offered' }>;
   currency: string;
-  onRedeemed: (message: string) => void;
+  /** An earlier conversion is unconfirmed until the points were re-read: nothing may be sent. */
+  locked: boolean;
+  /** The credited notice, or null when the server withheld its answer. */
+  onRedeemed: (message: string | null) => void;
 }) {
   const [typed, setTyped] = useState('');
   const [confirming, setConfirming] = useState(false);
@@ -368,7 +395,7 @@ function RedeemPoints({
   };
 
   const submit = async () => {
-    if (preview.kind !== 'ready') return;
+    if (preview.kind !== 'ready' || locked) return;
 
     setSubmitting(true);
     setError(null);
@@ -383,6 +410,16 @@ function RedeemPoints({
         idempotencyKey,
       }));
 
+      if (response.code === 'RESPONSE_CONTRACT_VIOLATION') {
+        // The server ran the conversion and withheld only its answer: there is
+        // no failure to show and nothing to send again. The amount's key stays
+        // remembered, so a later send of it replays instead of debiting twice.
+        setTyped('');
+        setConfirming(false);
+        onRedeemed(null);
+        return;
+      }
+
       if (!response.success || response.data === undefined) {
         // The server's own sentence: "below the minimum", "not enough points"
         // and "the programme was switched off" are all 400s, and only it knows
@@ -425,7 +462,7 @@ function RedeemPoints({
           max={offer.balance}
           step={1}
           value={typed}
-          disabled={submitting}
+          disabled={submitting || locked}
           placeholder={String(offer.minimumPoints)}
           aria-invalid={preview.kind === 'not-a-number' || preview.kind === 'zero-value' ? true : undefined}
           onChange={(event) => retype(event.target.value)}
@@ -434,7 +471,7 @@ function RedeemPoints({
         {!confirming ? (
           <button
             type="button"
-            disabled={preview.kind !== 'ready' || submitting}
+            disabled={preview.kind !== 'ready' || submitting || locked}
             className="sx-account-button sxa:card-button sxa:card-button--add sxa:disabled:cursor-not-allowed sxa:disabled:opacity-50"
             onClick={() => setConfirming(true)}
           >