@shoppexio/storefront-react 0.2.1 → 0.3.0

package/eject/account/referrals.tsx

@@ -1,25 +1,35 @@
 /**
  * What the buyer has earned by sending other buyers to this shop.
  *
- * Read-only, and deliberately so. The hosted portal let an affiliate turn a
- * balance into store credit and request a crypto payout; both move money toward
- * the buyer, and ADR-0064 keeps money paths off the account API — theme code
- * runs on the same origin as the session cookie, so an allowlisted payout would
- * be a transaction primitive standing next to untrusted markup. This panel
- * shows the standing and says where the payout is arranged. Issuing a link is
- * the same story: `POST /affiliate/links` is not allowlisted either, so the
- * links below are the ones the shop issued.
+ * One write: a link with a code of the buyer's own, when the producer says the
+ * shop allows it. It moves no money — the shop caps the links, approves the
+ * ones that ask for their own rates, and manages all of them itself.
+ *
+ * Everything else stays read-only, and deliberately so. The hosted portal let
+ * an affiliate turn a balance into store credit and request a crypto payout;
+ * both move money toward the buyer, and ADR-0064 keeps money paths off the
+ * account API — theme code runs on the same origin as the session cookie, so an
+ * allowlisted payout would be a transaction primitive standing next to
+ * untrusted markup. This panel shows the standing and says where the payout is
+ * arranged.
  */
 
+import { useId, useState } from 'react';
 import {
   claimTypeKey,
+  commissionAmounts,
+  commissionLedgerKey,
+  commissionLedgerTone,
   isAwaitingApproval,
   isEnrolledInReferrals,
   isForeignBalanceCurrency,
+  isShareableLink,
+  offersReferralLinks,
+  referralLinkInput,
   referralShareUrl,
 } from './account-referrals';
-import { safeExternalHref } from './customer-account';
-import type { SdkCustomerAffiliateLink } from '@shoppexio/storefront-react';
+import { callCustomerApi, safeExternalHref } from './customer-account';
+import type { SdkCustomerAffiliateLink, SdkCustomerAffiliateSummary } from '@shoppexio/storefront-react';
 import { t } from './i18n';
 import { ExternalLinkIcon } from './icons';
 import { useAccountDashboard } from './dashboard';
@@ -27,8 +37,11 @@ import {
   AccountCard,
   AccountEmpty,
   AccountError,
+  AccountFieldError,
+  AccountNotice,
   AccountRowsSkeleton,
   AccountSectionTitle,
+  BusySpinner,
   CopyButton,
   StatusChip,
   formatAccountAmount,
@@ -36,8 +49,15 @@ import {
   statusLabel,
 } from './shared';
 
+/** The settings form's control skin, so the two forms on this account match. */
+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 AccountReferrals() {
   const { state, reload } = useAccountDashboard();
+  const [creating, setCreating] = useState(false);
+  /** What the last made link was told to be: live, or waiting for the shop. */
+  const [created, setCreated] = useState<'ready' | 'pending' | null>(null);
 
   if (state.status === 'loading') {
     return <AccountRowsSkeleton rows={3} label={t('referrals.loading')} />;
@@ -54,73 +74,119 @@ export function AccountReferrals() {
    * hid the whole tab on it; this template keeps the tab reachable — the link
    * may already be sitting in a sent email — and says what the state is instead
    * of showing a balance sheet full of zeroes.
+   *
+   * A shop with auto-join off reports `not_enrolled` and still lets the buyer
+   * make a first link, which is how they join. That buyer gets the links
+   * section; the balance and history belong to enrolled buyers only.
    */
-  if (!isEnrolledInReferrals(summary)) {
+  if (!offersReferralLinks(summary)) {
     return (
       <AccountEmpty title={t('referrals.notEnrolledTitle')} body={t('referrals.notEnrolledBody')} />
     );
   }
 
+  const enrolled = isEnrolledInReferrals(summary);
   const { balances, balance_currency: currency } = summary;
 
   return (
     <div className="sxa:space-y-8">
-      <div>
-        <AccountCard className="sxa:p-6 sxa:md:p-7">
-          <p className="sxa:text-small sxa:text-muted">{t('referrals.availableLabel')}</p>
-          <p className="sxa:mt-1 sxa:text-h1 sxa:font-bold sxa:tabular-nums">
-            {formatAccountAmount(balances.available, currency)}
-          </p>
-          <p className="sxa:mt-3 sxa:text-small sxa:text-muted">{t('referrals.payoutsElsewhere')}</p>
-        </AccountCard>
-
-        {/*
-          Four separate figures, exactly as the server sends them. Folding
-          "converted" and "paid" into one friendlier "withdrawn" total would put
-          a number on screen that no other Shoppex surface reports.
-        */}
-        <div className="sxa:mt-4 sxa:grid sxa:grid-cols-2 sxa:gap-4 sxa:sm:grid-cols-4">
-          <BalanceTile
-            label={t('referrals.pendingLabel')}
-            amount={balances.pending}
-            currency={currency}
-          />
-          <BalanceTile
-            label={t('referrals.requestedLabel')}
-            amount={balances.requested}
-            currency={currency}
-          />
-          <BalanceTile
-            label={t('referrals.convertedLabel')}
-            amount={balances.converted}
-            currency={currency}
-          />
-          <BalanceTile
-            label={t('referrals.paidLabel')}
-            amount={balances.paid}
-            currency={currency}
-          />
-        </div>
+      {enrolled ? (
+        <div>
+          <AccountCard className="sxa:p-6 sxa:md:p-7">
+            <p className="sxa:text-small sxa:text-muted">{t('referrals.availableLabel')}</p>
+            <p className="sxa:mt-1 sxa:text-h1 sxa:font-bold sxa:tabular-nums">
+              {formatAccountAmount(balances.available, currency)}
+            </p>
+            <p className="sxa:mt-3 sxa:text-small sxa:text-muted">{t('referrals.payoutsElsewhere')}</p>
+          </AccountCard>
 
-        {isForeignBalanceCurrency(summary, state.data.shop.currency) ? (
-          <p className="sxa:mt-3 sxa:text-small sxa:text-muted">
-            {t('referrals.differentCurrency', { currency })}
-          </p>
-        ) : null}
-      </div>
+          {/*
+            Four separate figures, exactly as the server sends them. Folding
+            "converted" and "paid" into one friendlier "withdrawn" total would put
+            a number on screen that no other Shoppex surface reports.
+          */}
+          <div className="sxa:mt-4 sxa:grid sxa:grid-cols-2 sxa:gap-4 sxa:sm:grid-cols-4">
+            <BalanceTile
+              label={t('referrals.pendingLabel')}
+              amount={balances.pending}
+              currency={currency}
+            />
+            <BalanceTile
+              label={t('referrals.requestedLabel')}
+              amount={balances.requested}
+              currency={currency}
+            />
+            <BalanceTile
+              label={t('referrals.convertedLabel')}
+              amount={balances.converted}
+              currency={currency}
+            />
+            <BalanceTile
+              label={t('referrals.paidLabel')}
+              amount={balances.paid}
+              currency={currency}
+            />
+          </div>
+
+          {isForeignBalanceCurrency(summary, state.data.shop.currency) ? (
+            <p className="sxa:mt-3 sxa:text-small sxa:text-muted">
+              {t('referrals.differentCurrency', { currency })}
+            </p>
+          ) : null}
+        </div>
+      ) : null}
 
       <section>
-        <AccountSectionTitle>{t('referrals.linksTitle')}</AccountSectionTitle>
+        <div className="sxa:flex sxa:flex-wrap sxa:items-center sxa:justify-between sxa:gap-3">
+          <AccountSectionTitle>{t('referrals.linksTitle')}</AccountSectionTitle>
+          {/* Offered only when the producer says this buyer may make a link.
+              A shop that refuses gets its own sentence below instead of a
+              control that answers 400. */}
+          {summary.can_create_custom_links && !creating ? (
+            <button
+              type="button"
+              className="sx-account-button sxa:card-button sxa:card-button--add"
+              onClick={() => {
+                setCreating(true);
+                setCreated(null);
+              }}
+            >
+              {t('referrals.newLink')}
+            </button>
+          ) : null}
+        </div>
         <p className="sxa:mt-1 sxa:text-small sxa:text-muted">
           {summary.affiliate_codes_accepted_at_checkout
             ? t('referrals.codesAccepted')
             : t('referrals.codesNotAccepted')}
         </p>
+        {!summary.can_create_custom_links && summary.custom_link_request_disabled_reason ? (
+          <p className="sxa:mt-1 sxa:text-small sxa:text-muted">{summary.custom_link_request_disabled_reason}</p>
+        ) : null}
+
+        {created ? (
+          <AccountNotice message={created === 'pending' ? t('referrals.linkRequested') : t('referrals.linkCreated')} />
+        ) : null}
+
+        {creating && summary.can_create_custom_links ? (
+          <NewReferralLinkForm
+            onCancel={() => setCreating(false)}
+            onCreated={(pending) => {
+              setCreating(false);
+              setCreated(pending ? 'pending' : 'ready');
+              // The new row comes from the summary, which only the dashboard
+              // read carries.
+              reload();
+            }}
+            onUnknown={reload}
+          />
+        ) : null}
+
         <div className="sxa:mt-4">
           {summary.links.length === 0 ? (
             <AccountEmpty
               title={t('referrals.linksEmptyTitle')}
-              body={t('referrals.linksEmptyBody')}
+              body={summary.can_create_custom_links ? t('referrals.linksEmptyCanCreate') : t('referrals.linksEmptyBody')}
             />
           ) : (
             <ul className="sxa:space-y-4">
@@ -134,87 +200,246 @@ export function AccountReferrals() {
         </div>
       </section>
 
-      <section>
-        <AccountSectionTitle>{t('referrals.commissionsTitle')}</AccountSectionTitle>
-        <div className="sxa:mt-4">
-          {summary.commissions.length === 0 ? (
-            <AccountEmpty
-              title={t('referrals.commissionsEmptyTitle')}
-              body={t('referrals.commissionsEmptyBody')}
+      {enrolled ? (
+        <>
+          <section>
+            <AccountSectionTitle>{t('referrals.commissionsTitle')}</AccountSectionTitle>
+            <div className="sxa:mt-4">
+              {summary.commissions.length === 0 ? (
+                <AccountEmpty
+                  title={t('referrals.commissionsEmptyTitle')}
+                  body={t('referrals.commissionsEmptyBody')}
+                />
+              ) : (
+                <ul className="sxa:space-y-4">
+                  {summary.commissions.map((commission) => (
+                    <li
+                      key={commission.id}
+                      className="sxa:flex 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">
+                          {t('referrals.commissionFor', { id: commission.invoice_id })}
+                        </p>
+                        {/* `created_at` is nullable on this row. No date is printed
+                            when the producer sent none. */}
+                        {commission.created_at ? (
+                          <p className="sxa:mt-1 sxa:text-micro sxa:text-muted">
+                            {formatAccountDate(commission.created_at)}
+                          </p>
+                        ) : null}
+                      </div>
+                      <CommissionAmount commission={commission} currency={currency} />
+                      <StatusChip
+                        status={commissionLedgerTone(commission.ledger_status)}
+                        label={t(commissionLedgerKey(commission.ledger_status))}
+                      />
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </div>
+          </section>
+
+          <section>
+            <AccountSectionTitle>{t('referrals.balanceTitle')}</AccountSectionTitle>
+            <div className="sxa:mt-4">
+              {summary.claims.length === 0 ? (
+                <AccountEmpty
+                  title={t('referrals.balanceEmptyTitle')}
+                  body={t('referrals.balanceEmptyBody')}
+                />
+              ) : (
+                <ul className="sxa:space-y-4">
+                  {summary.claims.map((claim) => {
+                    const typeKey = claimTypeKey(claim.type);
+                    return (
+                      <li
+                        key={claim.id}
+                        className="sxa:flex 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">
+                          {/* An unlisted claim type keeps the producer's own word
+                              rather than being renamed into one we recognise. */}
+                          <p className="sxa:truncate sxa:text-small sxa:font-semibold">
+                            {typeKey ? t(typeKey) : statusLabel(claim.type)}
+                          </p>
+                          {claim.created_at ? (
+                            <p className="sxa:mt-1 sxa:text-micro sxa:text-muted">
+                              {formatAccountDate(claim.created_at)}
+                            </p>
+                          ) : null}
+                        </div>
+                        <span className="sxa:shrink-0 sxa:text-small sxa:font-semibold sxa:tabular-nums">
+                          {/* The claim carries its own currency; the balance
+                              currency above is not necessarily the same one. */}
+                          {formatAccountAmount(claim.amount, claim.currency)}
+                        </span>
+                        <StatusChip status={claim.status} />
+                      </li>
+                    );
+                  })}
+                </ul>
+              )}
+            </div>
+          </section>
+        </>
+      ) : null}
+    </div>
+  );
+}
+
+/**
+ * A link with a code of the buyer's own.
+ *
+ * The producer's sentence is shown as it arrives: it knows whether the code is
+ * taken, too short, or one link too many. `onUnknown` is for the answers that
+ * are not the producer refusing — a timeout, a 5xx — which say nothing about
+ * whether the link exists, so the list is read again rather than the link
+ * being asked for twice.
+ */
+function NewReferralLinkForm({
+  onCancel,
+  onCreated,
+  onUnknown,
+}: {
+  onCancel: () => void;
+  onCreated: (pending: boolean) => void;
+  onUnknown: () => void;
+}) {
+  const id = useId();
+  const [draft, setDraft] = useState({ label: '', code: '', commission: '', discount: '' });
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const set = (field: keyof typeof draft) => (event: { target: { value: string } }) => {
+    setDraft((current) => ({ ...current, [field]: event.target.value }));
+    setError(null);
+  };
+
+  const submit = async () => {
+    const parsed = referralLinkInput(draft);
+    if (!parsed.ok) {
+      setError(parsed.reason === 'required' ? t('referrals.linkRequired') : t('referrals.linkRateInvalid'));
+      return;
+    }
+
+    setBusy(true);
+    setError(null);
+    const response = await callCustomerApi((sdk) => sdk.createAffiliateLink(parsed.input));
+    setBusy(false);
+
+    if (!response.success || response.data === undefined) {
+      setError(response.message?.trim() || t('referrals.linkFailed'));
+      if (response.status === undefined || response.status >= 500) onUnknown();
+      return;
+    }
+
+    onCreated(response.data.affiliate_link.status === 'pending');
+  };
+
+  return (
+    <AccountCard className="sxa:mt-4 sxa:p-5">
+      <form
+        noValidate
+        onSubmit={(event) => {
+          event.preventDefault();
+          void submit();
+        }}
+      >
+        <div className="sxa:grid sxa:gap-4 sxa:sm:grid-cols-2">
+          <div>
+            <label htmlFor={`${id}-label`} className="sxa:mb-1.5 sxa:block sxa:text-small sxa:font-medium">
+              {t('referrals.linkLabel')}
+            </label>
+            <input
+              id={`${id}-label`}
+              type="text"
+              maxLength={100}
+              autoComplete="off"
+              value={draft.label}
+              disabled={busy}
+              placeholder={t('referrals.linkLabelPlaceholder')}
+              onChange={set('label')}
+              className={FIELD}
             />
-          ) : (
-            <ul className="sxa:space-y-4">
-              {summary.commissions.map((commission) => (
-                <li
-                  key={commission.id}
-                  className="sxa:flex 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">
-                      {t('referrals.commissionFor', { id: commission.invoice_id })}
-                    </p>
-                    {/* `created_at` is nullable on this row. No date is printed
-                        when the producer sent none. */}
-                    {commission.created_at ? (
-                      <p className="sxa:mt-1 sxa:text-micro sxa:text-muted">
-                        {formatAccountDate(commission.created_at)}
-                      </p>
-                    ) : null}
-                  </div>
-                  <span className="sxa:shrink-0 sxa:text-small sxa:font-semibold sxa:tabular-nums">
-                    {formatAccountAmount(commission.commission_amount, currency)}
-                  </span>
-                  <StatusChip status={commission.status} />
-                </li>
-              ))}
-            </ul>
-          )}
+          </div>
+          <div>
+            <label htmlFor={`${id}-code`} className="sxa:mb-1.5 sxa:block sxa:text-small sxa:font-medium">
+              {t('referrals.linkCode')}
+            </label>
+            <input
+              id={`${id}-code`}
+              type="text"
+              maxLength={32}
+              autoComplete="off"
+              autoCapitalize="none"
+              spellCheck={false}
+              value={draft.code}
+              disabled={busy}
+              placeholder="creator-2026"
+              onChange={set('code')}
+              className={FIELD}
+            />
+          </div>
+          <div>
+            <label htmlFor={`${id}-commission`} className="sxa:mb-1.5 sxa:block sxa:text-small sxa:font-medium">
+              {t('referrals.linkCommission')}
+            </label>
+            <input
+              id={`${id}-commission`}
+              type="text"
+              inputMode="decimal"
+              autoComplete="off"
+              value={draft.commission}
+              disabled={busy}
+              placeholder={t('referrals.linkRatePlaceholder')}
+              onChange={set('commission')}
+              className={FIELD}
+            />
+          </div>
+          <div>
+            <label htmlFor={`${id}-discount`} className="sxa:mb-1.5 sxa:block sxa:text-small sxa:font-medium">
+              {t('referrals.linkDiscount')}
+            </label>
+            <input
+              id={`${id}-discount`}
+              type="text"
+              inputMode="decimal"
+              autoComplete="off"
+              value={draft.discount}
+              disabled={busy}
+              placeholder={t('referrals.linkRatePlaceholder')}
+              onChange={set('discount')}
+              className={FIELD}
+            />
+          </div>
         </div>
-      </section>
+        <p className="sxa:mt-3 sxa:text-micro sxa:leading-relaxed sxa:text-muted">{t('referrals.linkRatesHint')}</p>
 
-      <section>
-        <AccountSectionTitle>{t('referrals.balanceTitle')}</AccountSectionTitle>
-        <div className="sxa:mt-4">
-          {summary.claims.length === 0 ? (
-            <AccountEmpty
-              title={t('referrals.balanceEmptyTitle')}
-              body={t('referrals.balanceEmptyBody')}
-            />
-          ) : (
-            <ul className="sxa:space-y-4">
-              {summary.claims.map((claim) => {
-                const typeKey = claimTypeKey(claim.type);
-                return (
-                  <li
-                    key={claim.id}
-                    className="sxa:flex 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">
-                      {/* An unlisted claim type keeps the producer's own word
-                          rather than being renamed into one we recognise. */}
-                      <p className="sxa:truncate sxa:text-small sxa:font-semibold">
-                        {typeKey ? t(typeKey) : statusLabel(claim.type)}
-                      </p>
-                      {claim.created_at ? (
-                        <p className="sxa:mt-1 sxa:text-micro sxa:text-muted">
-                          {formatAccountDate(claim.created_at)}
-                        </p>
-                      ) : null}
-                    </div>
-                    <span className="sxa:shrink-0 sxa:text-small sxa:font-semibold sxa:tabular-nums">
-                      {/* The claim carries its own currency; the balance
-                          currency above is not necessarily the same one. */}
-                      {formatAccountAmount(claim.amount, claim.currency)}
-                    </span>
-                    <StatusChip status={claim.status} />
-                  </li>
-                );
-              })}
-            </ul>
-          )}
+        {error ? <AccountFieldError message={error} /> : null}
+
+        <div className="sxa:mt-4 sxa:flex sxa:flex-wrap sxa:items-center sxa:gap-2">
+          <button
+            type="submit"
+            disabled={busy}
+            aria-busy={busy || 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"
+          >
+            {busy ? <BusySpinner className="sxa:mr-1.5 sxa:h-3.5 sxa:w-3.5" /> : null}
+            {busy ? t('referrals.creatingLink') : t('referrals.createLink')}
+          </button>
+          <button
+            type="button"
+            disabled={busy}
+            className="sx-account-button sxa:card-button sxa:card-button--add sxa:disabled:cursor-not-allowed sxa:disabled:opacity-50"
+            onClick={onCancel}
+          >
+            {t('common.cancel')}
+          </button>
         </div>
-      </section>
-    </div>
+      </form>
+    </AccountCard>
   );
 }
 
@@ -282,28 +507,31 @@ function ReferralLinkCard({
         <p className="sxa:mt-3 sxa:text-small sxa:text-muted">{t('referrals.awaitingApproval')}</p>
       ) : null}
 
-      <div className="sxa:mt-3 sxa:flex sxa:flex-wrap sxa:items-center sxa:gap-2">
-        <code className="sxa:min-w-0 sxa:flex-1 sxa:truncate sxa:rounded-input sxa:border sxa:bg-bg sxa:px-3 sxa:py-2 sxa:font-mono sxa:text-micro">
-          {shareValue}
-        </code>
-        <div className="sxa:flex sxa:shrink-0 sxa:items-center sxa:gap-2">
-          {shareUrl ? (
-            <a
-              href={shareUrl}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="sx-account-button sxa:card-button sxa:card-button--add"
-            >
-              <ExternalLinkIcon className="sxa:h-3.5 sxa:w-3.5" />
-              {/* `downloads.openLink` is the catalog's one label for "this
-                  anchor leaves the storefront", and it is written generically
-                  enough to be it here too. */}
-              <span className="sxa:ml-1.5">{t('downloads.openLink')}</span>
-            </a>
-          ) : null}
-          <CopyButton value={shareValue} />
+      {/* Only a live link is handed out; the chip above names any other state. */}
+      {isShareableLink(link) ? (
+        <div className="sxa:mt-3 sxa:flex sxa:flex-wrap sxa:items-center sxa:gap-2">
+          <code className="sxa:min-w-0 sxa:flex-1 sxa:truncate sxa:rounded-input sxa:border sxa:bg-bg sxa:px-3 sxa:py-2 sxa:font-mono sxa:text-micro">
+            {shareValue}
+          </code>
+          <div className="sxa:flex sxa:shrink-0 sxa:items-center sxa:gap-2">
+            {shareUrl ? (
+              <a
+                href={shareUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="sx-account-button sxa:card-button sxa:card-button--add"
+              >
+                <ExternalLinkIcon className="sxa:h-3.5 sxa:w-3.5" />
+                {/* `downloads.openLink` is the catalog's one label for "this
+                    anchor leaves the storefront", and it is written generically
+                    enough to be it here too. */}
+                <span className="sxa:ml-1.5">{t('downloads.openLink')}</span>
+              </a>
+            ) : null}
+            <CopyButton value={shareValue} />
+          </div>
         </div>
-      </div>
+      ) : null}
 
       <dl className="sxa:mt-4 sxa:grid sxa:grid-cols-3 sxa:gap-4 sxa:border-t sxa:pt-4">
         <StatCell label={t('referrals.clicks')} value={String(link.total_clicks)} />
@@ -325,3 +553,21 @@ function StatCell({ label, value }: { label: string; value: string }) {
     </div>
   );
 }
+
+type SdkAffiliateCommission = SdkCustomerAffiliateSummary['commissions'][number];
+
+/** The commission's lead figure, with the total and each other destination named under it. */
+function CommissionAmount({ commission, currency }: { commission: SdkAffiliateCommission; currency: string }) {
+  const { amount, total, paidOut, storeCredit } = commissionAmounts(commission);
+  const note = [
+    total !== null ? t('referrals.ofTotal', { total: formatAccountAmount(total, currency) }) : null,
+    paidOut !== null ? t('referrals.paidOutPart', { amount: formatAccountAmount(paidOut, currency) }) : null,
+    storeCredit !== null ? t('referrals.storeCreditPart', { amount: formatAccountAmount(storeCredit, currency) }) : null,
+  ].filter((part) => part !== null).join(' · ');
+  return (
+    <span className="sxa:shrink-0 sxa:text-right sxa:text-small sxa:font-semibold sxa:tabular-nums">
+      <span className="sxa:block">{formatAccountAmount(amount, currency)}</span>
+      {note ? <span className="sxa:mt-1 sxa:block sxa:text-micro sxa:font-normal sxa:text-muted">{note}</span> : null}
+    </span>
+  );
+}