@shoppexio/storefront-react 0.0.0 → 0.1.0

package/eject/account/rewards.tsx

@@ -0,0 +1,641 @@
+/**
+ * Store credit and coupons the shop has granted this buyer.
+ *
+ * Every figure on screen is the server's own. The summary comes out of the
+ * wallet and the grant ledger already summed; adding up the activity list here
+ * would put a second number for the same money on the page, and the two would
+ * disagree the moment a grant is pending or expired.
+ *
+ * A coupon is copied and pasted at checkout and the store credit a grant paid
+ * out is applied there — the wallet routes are not open to storefront code, so
+ * there is no balance to move from this page.
+ *
+ * Points are the exception, and the only one: the loyalty route offers a
+ * conversion INTO store credit, which is why this panel has a control that
+ * writes at all. It is a separate read from the dashboard payload — a shop
+ * running no points programme answers `enabled: false`, and the section that
+ * depends on that answer must not hold up the coupons above it.
+ */
+
+import { useState, type ReactNode } from 'react';
+import { Link } from 'react-router-dom';
+import {
+  loyaltyDate,
+  loyaltyLifetimePoints,
+  loyaltyPointsBalance,
+  loyaltyTransactionKey,
+  redeemOffer,
+  redeemPreview,
+  redeemSubmissionKey,
+  resolveRedeemKey,
+  signedPoints,
+  type RedeemOffer,
+} from './account-loyalty';
+import {
+  epochSecondsToDate,
+  optionalEpochSecondsToDate,
+  rewardReasonKey,
+  rewardStatusKey,
+  rewardTitle,
+  usableCoupons,
+  type UsableCoupon,
+} from './account-rewards';
+import { callCustomerApi, type AccountPanelState } from './customer-account';
+import type { SdkCustomerLoyalty, SdkCustomerRewardActivity } from '@shoppexio/storefront-react';
+import { t } from './i18n';
+import { GiftIcon, TagIcon, ZapIcon } from './icons';
+import { useAccountDashboard } from './dashboard';
+import {
+  AccountCard,
+  AccountEmpty,
+  AccountError,
+  AccountFieldError,
+  AccountNotice,
+  AccountRowsSkeleton,
+  AccountSectionTitle,
+  BusySpinner,
+  CopyButton,
+  formatAccountAmount,
+  formatAccountDate,
+  statusLabel,
+  useAccountResource,
+} from './shared';
+
+/** 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';
+
+export function AccountRewards() {
+  const { state, reload } = useAccountDashboard();
+  const loyalty = useAccountResource('loyalty', () =>
+    callCustomerApi((sdk) => sdk.loyalty()), { keepStale: true });
+
+  if (state.status === 'loading') {
+    return <AccountRowsSkeleton rows={3} label={t('rewards.loading')} />;
+  }
+
+  if (state.status === 'error') {
+    return <AccountError message={state.message} onRetry={reload} />;
+  }
+
+  const { summary, activity } = state.data.rewards;
+  const coupons = usableCoupons(activity);
+  // A background refresh of the shell payload that failed: the tiles below
+  // kept their figures instead of the page falling to an error, but the buyer
+  // is told they may be out of date, with the same retry the error shows.
+  const shellStale = state.staleMessage;
+
+  return (
+    <div className="sxa:space-y-8">
+      {shellStale ? <AccountError message={shellStale} onRetry={reload} /> : null}
+      <div className="sxa:grid sxa:grid-cols-1 sxa:gap-4 sxa:sm:grid-cols-3">
+        <RewardTile
+          label={t('rewards.available')}
+          amount={summary.available}
+          currency={summary.currency}
+        />
+        <RewardTile
+          label={t('rewards.pending')}
+          amount={summary.pending}
+          currency={summary.currency}
+        />
+        <RewardTile
+          label={t('rewards.lifetime')}
+          amount={summary.lifetime_earned}
+          currency={summary.currency}
+        />
+      </div>
+
+      {/*
+        The shop's currency, not the wallet's and not the rewards summary's.
+        `redeem_value_per_point` is quoted in the currency the SHOP prices in,
+        so it is the only one the preview may be multiplied into; the credited
+        amount afterwards carries the currency the redeem response names.
+
+        `reload` is the SHELL's, and it is handed down for one reason: a
+        conversion credits the wallet, and the wallet is what the three tiles
+        directly above are read from. Without it this panel says "€5.00 added
+        to your store credit" under an Available tile still showing the balance
+        before it — two numbers for the same money, disagreeing until a reload.
+      */}
+      <LoyaltyPoints
+        resource={loyalty}
+        currency={state.data.shop.currency}
+        onCredited={reload}
+      />
+
+      {/*
+        Only coupons that would actually be accepted at checkout: a pending
+        grant has no code yet, a revoked one has a code the till will refuse,
+        and wallet credit is not something to paste. The narrowing decides;
+        this section simply disappears when it returns nothing.
+      */}
+      {coupons.length ? (
+        <section>
+          <AccountSectionTitle>{t('rewards.couponsTitle')}</AccountSectionTitle>
+          <p className="sxa:mt-1 sxa:text-small sxa:text-muted">{t('rewards.couponsBody')}</p>
+          <ul className="sxa:mt-4 sxa:space-y-4">
+            {coupons.map((coupon) => (
+              <li key={coupon.id}>
+                <CouponCard coupon={coupon} />
+              </li>
+            ))}
+          </ul>
+        </section>
+      ) : null}
+
+      <section>
+        <AccountSectionTitle>{t('rewards.activityTitle')}</AccountSectionTitle>
+        <div className="sxa:mt-4">
+          {activity.length === 0 ? (
+            <AccountEmpty
+              title={t('rewards.emptyTitle')}
+              body={t('rewards.emptyBody')}
+              action={(
+                <Link
+                  to="/all-products"
+                  className="sx-account-cta sxa:cta-button sxa:inline-flex sxa:h-10 sxa:items-center sxa:px-5 sxa:text-small"
+                >
+                  {t('common.browseStore')}
+                </Link>
+              )}
+            />
+          ) : (
+            <ul className="sxa:space-y-4">
+              {activity.map((item) => (
+                <li
+                  key={item.id}
+                  className="sxa:flex sxa:items-center sxa:gap-4 sxa:rounded-input sxa:border sxa:bg-surface sxa:p-5 sxa:shadow-card"
+                >
+                  <span className="sxa:flex sxa:h-10 sxa:w-10 sxa:shrink-0 sxa:items-center sxa:justify-center sxa:rounded-input sxa:border sxa:bg-bg">
+                    <GiftIcon className="sxa:h-4 sxa:w-4 sxa:text-muted" />
+                  </span>
+                  <div className="sxa:min-w-0 sxa:flex-1">
+                    <p className="sxa:truncate sxa:text-small sxa:font-semibold">{rewardTitleText(item)}</p>
+                    <p className="sxa:mt-1 sxa:truncate sxa:text-micro sxa:text-muted">
+                      {t(rewardReasonKey(item.reason))}
+                      {' · '}
+                      {formatAccountDate(epochSecondsToDate(item.created_at))}
+                    </p>
+                  </div>
+                  <span className="sxa:shrink-0 sxa:text-micro sxa:font-medium sxa:text-muted">
+                    {grantStatusLabel(item.status)}
+                  </span>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      </section>
+    </div>
+  );
+}
+
+/**
+ * The points a buyer holds, what they are worth, and how they were earned.
+ *
+ * Three things decide whether this renders at all, and none of them is known
+ * before the loyalty route answers: a shop may run no programme (`enabled`
+ * false), a buyer may have no account on one that exists (`account` null), and
+ * a shop may offer no conversion (`settings` null). Nothing is sketched in
+ * while that answer is in flight — a heading that appears and then vanishes
+ * once the shop turns out to have no points is worse than a section that
+ * arrives a moment late.
+ *
+ * A FAILED read is shown, though. It cannot be told apart from "no programme
+ * here", and staying silent would strand exactly the buyers this section
+ * exists for: the ones holding points they now cannot see.
+ */
+function LoyaltyPoints({
+  resource,
+  currency,
+  onCredited,
+}: {
+  resource: { state: AccountPanelState<SdkCustomerLoyalty>; reload: () => void };
+  currency: string;
+  /** Re-read the shell's dashboard: a conversion moved the store credit it holds. */
+  onCredited: () => void;
+}) {
+  const { state, reload } = resource;
+  const [notice, setNotice] = useState<string | null>(null);
+
+  /*
+   * A conversion re-reads the route so the balance and the activity list come
+   * back from the producer rather than being patched together here — the
+   * response carries a new balance but no new activity row, and inventing one
+   * would put a made-up timestamp on the page. `useAccountResource` holds the
+   * last answer across a reload of the SAME key, so that re-read no longer
+   * empties the section and takes the "credited" notice with it one frame after
+   * the buyer pressed the button. Nothing is kept a second time here.
+   */
+  const loyalty = state.status === 'ready' ? state.data : null;
+
+  if (loyalty === null) {
+    return state.status === 'error' ? (
+      <PointsSection>
+        <AccountError message={state.message} onRetry={reload} />
+      </PointsSection>
+    ) : null;
+  }
+
+  if (!loyalty.enabled) return null;
+
+  /*
+   * A re-read that failed kept these figures on screen — better than tearing
+   * the section down under the buyer — but they may be out of date, and the
+   * credited notice above a stale balance would read as the server confirming
+   * it. The same error the first read would show, with the same retry.
+   */
+  const stale = state.status === 'ready' ? state.staleMessage : undefined;
+
+  const offer = redeemOffer(loyalty);
+
+  return (
+    <PointsSection>
+      <div className={`sxa:grid sxa:grid-cols-1 sxa:gap-4 ${loyalty.account ? 'sxa:sm:grid-cols-2' : ''}`}>
+        <PointsTile label={t('rewards.pointsBalance')} points={loyaltyPointsBalance(loyalty.account)} />
+        {loyalty.account ? (
+          <PointsTile
+            label={t('rewards.pointsLifetime')}
+            points={loyaltyLifetimePoints(loyalty.account)}
+          />
+        ) : null}
+      </div>
+
+      {/* A programme this buyer has not started. Zero points is the true
+          balance, and this is the sentence that makes it read as a beginning
+          rather than as something that went missing. */}
+      {loyalty.account === null ? (
+        <p className="sxa:mt-3 sxa:text-small sxa:text-muted">{t('rewards.pointsEarnHint')}</p>
+      ) : null}
+
+      {stale ? <AccountError message={stale} onRetry={reload} /> : null}
+
+      {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
+          what the buyer is collecting towards. */}
+      {offer.kind === 'below-minimum' && loyalty.account !== null ? (
+        <p className="sxa:mt-3 sxa:text-small sxa:text-muted">
+          {t('rewards.redeemMinimum', { points: offer.minimumPoints })}
+        </p>
+      ) : null}
+
+      {offer.kind === 'offered' ? (
+        <RedeemPoints
+          offer={offer}
+          currency={currency}
+          onRedeemed={(message) => {
+            setNotice(message);
+            reload();
+            onCredited();
+          }}
+        />
+      ) : null}
+
+      {loyalty.transactions.length ? (
+        <PointsActivity transactions={loyalty.transactions} />
+      ) : null}
+    </PointsSection>
+  );
+}
+
+function PointsSection({ children }: { children: ReactNode }) {
+  return (
+    <section>
+      <AccountSectionTitle>{t('rewards.pointsTitle')}</AccountSectionTitle>
+      <div className="sxa:mt-4">{children}</div>
+    </section>
+  );
+}
+
+function PointsTile({ label, points }: { label: string; points: number }) {
+  return (
+    <AccountCard className="sxa:p-6">
+      <p className="sxa:text-h2 sxa:font-bold sxa:tabular-nums">{points}</p>
+      <p className="sxa:mt-1 sxa:text-micro sxa:text-muted">{label}</p>
+    </AccountCard>
+  );
+}
+
+/**
+ * Converting points into store credit — the one control on this panel that
+ * moves anything.
+ *
+ * It asks before it acts, and the question names both figures: the points that
+ * leave the balance and roughly what arrives as credit. "Roughly" is honest —
+ * the server holds the authoritative rounding — and the amount the buyer is
+ * told afterwards is the one it actually credited, not this estimate.
+ */
+function RedeemPoints({
+  offer,
+  currency,
+  onRedeemed,
+}: {
+  offer: Extract<RedeemOffer, { kind: 'offered' }>;
+  currency: string;
+  onRedeemed: (message: string) => void;
+}) {
+  const [typed, setTyped] = useState('');
+  const [confirming, setConfirming] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  /*
+   * The seed of the conversion in hand, or '' while there is none. The
+   * submission key is DERIVED from (seed, amount) at send time, never minted
+   * per keystroke: a request that never reached the server and one the server
+   * committed before the connection dropped look identical from here, and with
+   * a derived key every path back to the same amount — retype,
+   * clear-and-repeat — is the same submission, so the retry replays instead of
+   * spending the points twice. A different amount derives a different key on
+   * its own. Only a success clears the seed, and the next intent mints a new
+   * one.
+   *
+   * A ref rather than state, minted on the first send rather than while
+   * rendering: a buyer who never converts anything makes the browser produce
+   * nothing, and minting cannot throw in the middle of a render.
+   */
+
+
+  const preview = redeemPreview(typed, offer);
+
+  const retype = (value: string) => {
+    setTyped(value);
+    setConfirming(false);
+    setError(null);
+  };
+
+  const submit = async () => {
+    if (preview.kind !== 'ready') return;
+
+    setSubmitting(true);
+    setError(null);
+    try {
+      // Remembered per amount at MODULE level until that amount answers
+      // success (see account-loyalty.ts): the memory has to survive this
+      // component unmounting on a tab switch, or a committed-but-unanswered
+      // conversion would debit twice on the retry after coming back.
+      const idempotencyKey = await redeemSubmissionKey(preview.points);
+      const response = await callCustomerApi((sdk) => sdk.redeemLoyaltyPoints({
+        points: preview.points,
+        idempotencyKey,
+      }));
+
+      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
+        // which one happened.
+        setError(response.message?.trim() || t('rewards.redeemFailed'));
+        return;
+      }
+
+      // `replayed` is this conversion answered a second time, not a refusal —
+      // the points were converted and the credit exists either way.
+      const credited = response.data;
+      setTyped('');
+      setConfirming(false);
+      resolveRedeemKey(preview.points);
+      onRedeemed(t('rewards.redeemDone', {
+        amount: formatAccountAmount(credited.wallet_amount, credited.currency),
+      }));
+    } catch {
+      // A browser that cannot derive the key — no Web Crypto, no secure
+      // context — is a conversion that cannot be sent, not a button stuck on
+      // "Converting…" for the rest of the session.
+      setError(t('rewards.redeemFailed'));
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <AccountCard className="sxa:mt-4 sxa:p-6">
+      <p className="sxa:font-heading sxa:font-semibold">{t('rewards.redeemTitle')}</p>
+      <p className="sxa:mt-2 sxa:text-small sxa:text-muted">{t('rewards.redeemBody')}</p>
+
+      <div className="sxa:mt-4 sxa:flex sxa:flex-wrap sxa:items-center sxa:gap-2">
+        <label htmlFor="loyalty-points" className="sxa:sr-only">{t('rewards.redeemLabel')}</label>
+        <input
+          id="loyalty-points"
+          type="number"
+          inputMode="numeric"
+          min={offer.minimumPoints}
+          max={offer.balance}
+          step={1}
+          value={typed}
+          disabled={submitting}
+          placeholder={String(offer.minimumPoints)}
+          aria-invalid={preview.kind === 'not-a-number' || preview.kind === 'zero-value' ? true : undefined}
+          onChange={(event) => retype(event.target.value)}
+          className={`${FIELD} sxa:w-36 sxa:tabular-nums`}
+        />
+        {!confirming ? (
+          <button
+            type="button"
+            disabled={preview.kind !== 'ready' || submitting}
+            className="sx-account-button sxa:card-button sxa:card-button--add sxa:disabled:cursor-not-allowed sxa:disabled:opacity-50"
+            onClick={() => setConfirming(true)}
+          >
+            {t('rewards.redeemContinue')}
+          </button>
+        ) : null}
+      </div>
+
+      <RedeemPreviewLine preview={preview} currency={currency} />
+
+      {/*
+        The step between typing an amount and spending it. The question repeats
+        both figures because the field above it is a number without a unit, and
+        "convert 500" and "convert 500 into €25" are different decisions.
+      */}
+      {confirming && preview.kind === 'ready' ? (
+        <div className="sxa:mt-4 sxa:border-t sxa:pt-4">
+          <p className="sxa:text-small sxa:font-semibold">
+            {t('rewards.redeemConfirm', {
+              points: preview.points,
+              amount: formatAccountAmount(preview.amount, currency),
+            })}
+          </p>
+          <div className="sxa:mt-3 sxa:flex sxa:flex-wrap sxa:items-center sxa:gap-2">
+            <button
+              type="button"
+              disabled={submitting}
+              aria-busy={submitting || undefined}
+              className="sx-account-cta sxa:cta-button sxa:inline-flex sxa:h-9 sxa:items-center sxa:px-4 sxa:text-small sxa:font-semibold sxa:disabled:cursor-not-allowed sxa:disabled:opacity-50"
+              onClick={() => void submit()}
+            >
+              {submitting ? <BusySpinner className="sxa:mr-1.5 sxa:h-3.5 sxa:w-3.5" /> : null}
+              {submitting ? t('rewards.redeemWorking') : t('rewards.redeemConfirmAction')}
+            </button>
+            <button
+              type="button"
+              disabled={submitting}
+              className="sx-account-button sxa:card-button sxa:card-button--add sxa:disabled:cursor-not-allowed sxa:disabled:opacity-50"
+              onClick={() => setConfirming(false)}
+            >
+              {t('common.cancel')}
+            </button>
+          </div>
+        </div>
+      ) : null}
+
+      {error ? <AccountFieldError message={error} /> : null}
+    </AccountCard>
+  );
+}
+
+/** What the typed amount is worth, or the one thing wrong with it. */
+function RedeemPreviewLine({
+  preview,
+  currency,
+}: {
+  preview: ReturnType<typeof redeemPreview>;
+  currency: string;
+}) {
+  if (preview.kind === 'empty') return null;
+
+  if (preview.kind === 'ready') {
+    return (
+      <p className="sxa:mt-2.5 sxa:text-small sxa:text-muted">
+        {t('rewards.redeemPreview', { amount: formatAccountAmount(preview.amount, currency) })}
+      </p>
+    );
+  }
+
+  // An amount worth nothing is an amount the field cannot use, and it is told
+  // apart from a mistyped one by nobody: both say "this number will not do".
+  const message = preview.kind === 'not-a-number' || preview.kind === 'zero-value'
+    ? t('rewards.redeemInvalid')
+    : preview.kind === 'below-minimum'
+      ? t('rewards.redeemMinimum', { points: preview.minimumPoints })
+      : t('rewards.redeemOverBalance', { points: preview.balance });
+
+  return <p role="alert" className="sxa:mt-2.5 sxa:text-small sxa:text-error">{message}</p>;
+}
+
+function PointsActivity({ transactions }: { transactions: SdkCustomerLoyalty['transactions'] }) {
+  return (
+    <div className="sxa:mt-6">
+      <h3 className="sxa:text-micro sxa:font-semibold sxa:uppercase sxa:tracking-wider sxa:text-muted">
+        {t('rewards.pointsActivityTitle')}
+      </h3>
+      <ul className="sxa:mt-3 sxa:space-y-4">
+        {/*
+          The wire carries no id for a points row, so the position in a list the
+          server sends whole is the key. It is stable for as long as the list
+          is: a reload replaces every row at once.
+        */}
+        {transactions.map((entry, index) => (
+          <li
+            key={`${entry.created_at}:${index}`}
+            className="sxa:flex sxa:items-center sxa:gap-4 sxa:rounded-input sxa:border sxa:bg-surface sxa:p-5 sxa:shadow-card"
+          >
+            <span className="sxa:flex sxa:h-10 sxa:w-10 sxa:shrink-0 sxa:items-center sxa:justify-center sxa:rounded-input sxa:border sxa:bg-bg">
+              <ZapIcon className="sxa:h-4 sxa:w-4 sxa:text-muted" />
+            </span>
+            <div className="sxa:min-w-0 sxa:flex-1">
+              <p className="sxa:truncate sxa:text-small sxa:font-semibold">{t(loyaltyTransactionKey(entry.type))}</p>
+              <p className="sxa:mt-1 sxa:truncate sxa:text-micro sxa:text-muted">
+                {/* The shop's own note on the row, where it wrote one — the only
+                    place a manual adjustment ever explains itself. */}
+                {entry.description ? `${entry.description} · ` : ''}
+                {formatAccountDate(loyaltyDate(entry.created_at))}
+              </p>
+            </div>
+            <span
+              className={`sxa:shrink-0 sxa:text-small sxa:font-semibold sxa:tabular-nums ${
+                entry.points > 0 ? 'sxa:text-success' : 'sxa:text-muted'
+              }`}
+            >
+              {signedPoints(entry.points)}
+            </span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+function RewardTile({
+  label,
+  amount,
+  currency,
+}: {
+  label: string;
+  amount: string;
+  currency: string;
+}) {
+  return (
+    <AccountCard className="sxa:p-6">
+      <p className="sxa:text-h2 sxa:font-bold sxa:tabular-nums">{formatAccountAmount(amount, currency)}</p>
+      <p className="sxa:mt-1 sxa:text-micro sxa:text-muted">{label}</p>
+    </AccountCard>
+  );
+}
+
+function CouponCard({ coupon }: { coupon: UsableCoupon }) {
+  const expiry = optionalEpochSecondsToDate(coupon.expires_at);
+
+  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:flex sxa:min-w-0 sxa:items-start sxa:gap-3">
+          <TagIcon className="sxa:mt-0.5 sxa:h-4 sxa:w-4 sxa:shrink-0 sxa:text-muted" />
+          <div className="sxa:min-w-0">
+            <p className="sxa:text-small sxa:font-semibold">
+              {/* The producer sends a percentage only sometimes; without one
+                  the coupon is named as a coupon rather than as "0% off". */}
+              {coupon.amount
+                ? t('rewards.percentOff', { percent: coupon.amount })
+                : t('rewards.couponGeneric')}
+            </p>
+            {expiry ? (
+              <p className="sxa:mt-1 sxa:text-micro sxa:text-muted">
+                {t('rewards.expiresOn', { date: formatAccountDate(expiry) })}
+              </p>
+            ) : null}
+          </div>
+        </div>
+        <CopyButton value={coupon.coupon_code} />
+      </div>
+      <code className="sxa:mt-3 sxa:block sxa:truncate sxa:rounded-input sxa:border sxa:bg-bg sxa:px-3 sxa:py-2 sxa:font-mono sxa:text-micro">
+        {coupon.coupon_code}
+      </code>
+    </AccountCard>
+  );
+}
+
+/** One reward as a sentence. The pure half decided WHAT it is; this spells it. */
+function rewardTitleText(item: SdkCustomerRewardActivity): string {
+  const title = rewardTitle(item);
+  switch (title.kind) {
+    case 'store-credit-amount':
+      return t('rewards.storeCredit', {
+        amount: formatAccountAmount(title.amount, title.currency),
+      });
+    case 'store-credit':
+      return t('rewards.storeCreditGeneric');
+    case 'coupon-code':
+      return t('rewards.couponNamed', { code: title.code });
+    case 'coupon-percent':
+      return t('rewards.percentOff', { percent: title.percent });
+    case 'coupon':
+      return t('rewards.couponUnnamed');
+    case 'other':
+      return t('rewards.otherReward');
+  }
+}
+
+/**
+ * A grant state this catalog names, or the producer's own word for it.
+ *
+ * Grant status is an open set — the server may ship a state before this
+ * template has heard of it — so an unknown one is shown as the server spelled
+ * it rather than mapped onto the nearest state we do know.
+ */
+function grantStatusLabel(status: string): string {
+  const key = rewardStatusKey(status);
+  return key ? t(key) : statusLabel(status);
+}