@shoppexio/storefront-react 0.0.0 → 0.1.0

package/eject/account/subscriptions.tsx

@@ -0,0 +1,421 @@
+/**
+ * The buyer's recurring purchases.
+ *
+ * Subscriptions have no list route of their own — they ride along in the
+ * dashboard payload — and the only per-item routes this panel calls are the
+ * three the edge admits: pause, resume, cancel. All three END an obligation
+ * instead of creating one, which is the reason storefront code may call them at
+ * all.
+ *
+ * The payment-method portal is NOT one of them. That route answers with a
+ * signed redirect into the provider's own portal, and any script sharing this
+ * origin could fetch the link and forward it, so the lane renders no control
+ * for it whatsoever — not a disabled one, which would promise that pressing it
+ * would work. The buyer reaches the portal from the store's own emails, and the
+ * panel says so rather than pretending the capability does not exist.
+ *
+ * List and detail are two views of one panel. The platform defines a detail
+ * path for orders and for nothing else, so a `/dashboard/subscriptions/<id>`
+ * URL would be this template inventing platform route shape; the selection
+ * lives in component state instead.
+ */
+
+import { useState, type ReactNode } from 'react';
+import { Link } from 'react-router-dom';
+import {
+  billingMessage,
+  cancelsAtPeriodEnd,
+  narrowBillingHistory,
+  subscriptionTiming,
+  subscriptionTimingKey,
+} from './account-subscriptions';
+import { callCustomerApi } from './customer-account';
+import type { SdkCustomerSubscription } from '@shoppexio/storefront-react';
+import { t } from './i18n';
+import { LockIcon } from './icons';
+import { useAccountDashboard } from './dashboard';
+import {
+  AccountBackButton,
+  AccountCard,
+  AccountEmpty,
+  AccountError,
+  AccountNotice,
+  AccountRowsSkeleton,
+  AccountSectionTitle,
+  BusySpinner,
+  StatusChip,
+  formatAccountAmount,
+  formatAccountDate,
+  useAccountResource,
+} from './shared';
+
+export function AccountSubscriptions() {
+  const { state, reload } = useAccountDashboard();
+  const [selectedUniqid, setSelectedUniqid] = useState<string | null>(null);
+  const [notice, setNotice] = useState<string | null>(null);
+
+  if (state.status === 'loading') {
+    return <AccountRowsSkeleton rows={3} label={t('subscriptions.loading')} />;
+  }
+
+  if (state.status === 'error') {
+    return <AccountError message={state.message} onRetry={reload} />;
+  }
+
+  const subscriptions = state.data.subscriptions;
+
+  if (subscriptions.length === 0) {
+    return (
+      <AccountEmpty
+        title={t('subscriptions.emptyTitle')}
+        body={t('subscriptions.emptyBody')}
+        action={<BrowseStoreLink />}
+      />
+    );
+  }
+
+  /*
+   * The selection is an id, never a copy of the row. Reloading after a cancel
+   * replaces the payload, and holding the object would leave the detail view
+   * describing the plan as it stood before the buyer changed it. An id that no
+   * longer matches anything falls back to the list — which is exactly what a
+   * subscription leaving the payload should look like.
+   */
+  const selected = subscriptions.find((entry) => entry.uniqid === selectedUniqid);
+
+  if (selected) {
+    return (
+      <SubscriptionDetail
+        subscription={selected}
+        notice={notice}
+        onBack={() => {
+          setSelectedUniqid(null);
+          setNotice(null);
+        }}
+        onChanged={(message) => {
+          setNotice(message);
+          reload();
+        }}
+      />
+    );
+  }
+
+  return (
+    <ul className="sxa:space-y-4">
+      {subscriptions.map((subscription) => (
+        <li key={subscription.uniqid}>
+          <button
+            type="button"
+            onClick={() => {
+              setNotice(null);
+              setSelectedUniqid(subscription.uniqid);
+            }}
+            className="sxa:flex sxa:w-full 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-opacity sxa:hover:opacity-80"
+          >
+            <div className="sxa:min-w-0 sxa:flex-1">
+              <p className="sxa:truncate sxa:text-small sxa:font-semibold">
+                {subscription.plan?.name ?? t('subscriptions.unnamedPlan')}
+              </p>
+              <p className="sxa:mt-1 sxa:text-micro sxa:text-muted">{timingLabel(subscription)}</p>
+            </div>
+            {/* A plan the producer did not send has no price to print, and a
+                dash in its place would read as "free". */}
+            {subscription.plan ? (
+              <span className="sxa:shrink-0 sxa:text-small sxa:font-semibold sxa:tabular-nums">
+                {formatAccountAmount(subscription.plan.price, subscription.plan.currency)}
+              </span>
+            ) : null}
+            <StatusChip status={subscription.status} />
+          </button>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+function BrowseStoreLink() {
+  return (
+    <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>
+  );
+}
+
+function timingLabel(subscription: SdkCustomerSubscription): string {
+  const timing = subscriptionTiming(subscription);
+  return t(subscriptionTimingKey(timing), { date: formatAccountDate(timing.date) });
+}
+
+function SubscriptionDetail({
+  subscription,
+  notice,
+  onBack,
+  onChanged,
+}: {
+  subscription: SdkCustomerSubscription;
+  notice: string | null;
+  onBack: () => void;
+  onChanged: (message: string) => void;
+}) {
+  const [pendingAction, setPendingAction] = useState<'pause' | 'resume' | 'cancel' | null>(null);
+  const [confirmingCancel, setConfirmingCancel] = useState(false);
+  const [actionError, setActionError] = useState<string | null>(null);
+
+  const atPeriodEnd = cancelsAtPeriodEnd(subscription.gateway);
+
+  const run = async (
+    action: 'pause' | 'resume' | 'cancel',
+    call: () => Promise<{ success: boolean; message?: string }>,
+    doneMessage: string,
+  ) => {
+    setPendingAction(action);
+    setActionError(null);
+    const result = await call();
+    setPendingAction(null);
+
+    if (!result.success) {
+      setActionError(result.message?.trim() || t('subscriptions.actionFailed'));
+      return;
+    }
+
+    setConfirmingCancel(false);
+    onChanged(doneMessage);
+  };
+
+  const billing = subscription.plan ? billingMessage(subscription.plan) : null;
+
+  return (
+    <div>
+      <AccountBackButton onClick={onBack} label={t('subscriptions.allSubscriptions')} />
+
+      <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:text-h3 sxa:font-semibold">
+            {subscription.plan?.name ?? t('subscriptions.unnamedPlan')}
+          </h2>
+          <p className="sxa:mt-1 sxa:text-small sxa:text-muted">
+            {t('subscriptions.startedOn', { date: formatAccountDate(subscription.created_at) })}
+          </p>
+        </div>
+        <StatusChip status={subscription.status} />
+      </div>
+
+      {notice ? <AccountNotice message={notice} /> : null}
+      {actionError ? <div className="sxa:mt-3"><AccountError message={actionError} /></div> : null}
+
+      <AccountCard className="sxa:mt-5 sxa:p-6">
+        {subscription.plan ? (
+          <>
+            <p className="sxa:text-h2 sxa:font-bold sxa:tabular-nums">
+              {formatAccountAmount(subscription.plan.price, subscription.plan.currency)}
+            </p>
+            {billing ? (
+              <p className="sxa:mt-1 sxa:text-small sxa:text-muted">{t(billing.key, billing.params)}</p>
+            ) : null}
+          </>
+        ) : null}
+
+        <p className="sxa:mt-2 sxa:text-small sxa:text-muted">{timingLabel(subscription)}</p>
+
+        <dl className="sxa:mt-5 sxa:space-y-2.5 sxa:border-t sxa:pt-4 sxa:text-small">
+          <DetailRow label={t('subscriptions.gateway')}>{subscription.gateway}</DetailRow>
+          <DetailRow label={t('subscriptions.paymentMethod')}>
+            {/* Brand AND last four, or the producer's own word for the method.
+                Half a card ("Visa ending —") is not a payment method. */}
+            {subscription.payment_method?.card_brand && subscription.payment_method.card_last4
+              ? t('subscriptions.cardOnFile', {
+                brand: subscription.payment_method.card_brand,
+                last4: subscription.payment_method.card_last4,
+              })
+              : subscription.payment_method?.type ?? t('subscriptions.noPaymentMethod')}
+          </DetailRow>
+        </dl>
+      </AccountCard>
+
+      {/*
+        Where a "Manage payment method" button would have gone. The flag is true
+        for every Stripe plan, cancelled ones included, and the route behind it
+        answers with a signed provider URL — so this lane renders the sentence
+        and no control at all.
+      */}
+      {subscription.actions.can_manage_payment_method ? (
+        <p className="sxa:mt-4 sxa:flex sxa:items-start sxa:gap-2 sxa:text-small sxa:text-muted">
+          <LockIcon className="sxa:mt-0.5 sxa:h-4 sxa:w-4 sxa:shrink-0" />
+          {t('subscriptions.paymentMethodElsewhere')}
+        </p>
+      ) : null}
+
+      {/*
+        The producer's `actions` decide which controls exist. A flag that is
+        false removes the button; it never disables one, because a disabled
+        control still promises that pressing it would have worked.
+      */}
+      <div className="sxa:mt-6 sxa:flex sxa:flex-wrap sxa:gap-2">
+        {subscription.actions.can_pause ? (
+          <button
+            type="button"
+            disabled={pendingAction !== null}
+            aria-busy={pendingAction === 'pause' || undefined}
+            className="sx-account-button sxa:card-button sxa:card-button--add sxa:disabled:cursor-not-allowed sxa:disabled:opacity-50"
+            onClick={() => void run(
+              'pause',
+              () => callCustomerApi((sdk) => sdk.pauseSubscription(subscription.uniqid)),
+              t('subscriptions.paused'),
+            )}
+          >
+            {pendingAction === 'pause' ? <BusySpinner className="sxa:mr-1.5 sxa:h-3.5 sxa:w-3.5" /> : null}
+            {pendingAction === 'pause' ? t('subscriptions.pausing') : t('subscriptions.pause')}
+          </button>
+        ) : null}
+
+        {subscription.actions.can_resume ? (
+          <button
+            type="button"
+            disabled={pendingAction !== null}
+            aria-busy={pendingAction === 'resume' || undefined}
+            className="sx-account-button sxa:card-button sxa:card-button--add sxa:disabled:cursor-not-allowed sxa:disabled:opacity-50"
+            onClick={() => void run(
+              'resume',
+              () => callCustomerApi((sdk) => sdk.resumeSubscription(subscription.uniqid)),
+              t('subscriptions.resumed'),
+            )}
+          >
+            {pendingAction === 'resume' ? <BusySpinner className="sxa:mr-1.5 sxa:h-3.5 sxa:w-3.5" /> : null}
+            {pendingAction === 'resume' ? t('subscriptions.resuming') : t('subscriptions.resume')}
+          </button>
+        ) : null}
+
+        {subscription.actions.can_cancel && !confirmingCancel ? (
+          <button
+            type="button"
+            disabled={pendingAction !== null}
+            className="sx-account-button sxa:card-button sxa:card-button--add sxa:disabled:cursor-not-allowed sxa:disabled:opacity-50"
+            onClick={() => setConfirmingCancel(true)}
+          >
+            {t('subscriptions.cancel')}
+          </button>
+        ) : null}
+      </div>
+
+      {/*
+        Cancelling asks first, and the question names what cancelling does on
+        THIS gateway. PayPal cannot stop a billing agreement at the period
+        boundary, so telling that buyer they keep the days they already paid for
+        would be a promise this template cannot keep.
+      */}
+      {confirmingCancel ? (
+        <AccountCard className="sxa:mt-4 sxa:p-6">
+          <p className="sxa:font-heading sxa:font-semibold">{t('subscriptions.confirmCancelTitle')}</p>
+          <p className="sxa:mt-2 sxa:text-small sxa:text-muted">
+            {atPeriodEnd
+              ? t('subscriptions.confirmCancelAtPeriodEnd', {
+                date: formatAccountDate(subscription.current_period_end),
+              })
+              : t('subscriptions.confirmCancelNow')}
+          </p>
+          <div className="sxa:mt-4 sxa:flex sxa:flex-wrap sxa:items-center sxa:gap-2">
+            <button
+              type="button"
+              disabled={pendingAction !== null}
+              className="sx-account-cta sxa:cta-button sxa:inline-flex sxa:h-8 sxa:items-center sxa:px-4 sxa:text-micro sxa:font-semibold sxa:disabled:cursor-not-allowed sxa:disabled:opacity-50"
+              onClick={() => setConfirmingCancel(false)}
+            >
+              {t('subscriptions.keep')}
+            </button>
+            <button
+              type="button"
+              disabled={pendingAction !== null}
+              aria-busy={pendingAction === 'cancel' || undefined}
+              className="sx-account-button sxa:card-button sxa:card-button--add sxa:disabled:cursor-not-allowed sxa:disabled:opacity-50"
+              onClick={() => void run(
+                'cancel',
+                () => callCustomerApi((sdk) => sdk.cancelSubscription(subscription.uniqid, {
+                  cancel_at_period_end: atPeriodEnd,
+                })),
+                t('subscriptions.cancelled'),
+              )}
+            >
+              {pendingAction === 'cancel' ? <BusySpinner className="sxa:mr-1.5 sxa:h-3.5 sxa:w-3.5" /> : null}
+              {pendingAction === 'cancel' ? t('subscriptions.cancelling') : t('subscriptions.cancel')}
+            </button>
+          </div>
+        </AccountCard>
+      ) : null}
+
+      <BillingHistory uniqid={subscription.uniqid} />
+    </div>
+  );
+}
+
+function DetailRow({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <div className="sxa:flex sxa:items-center sxa:justify-between sxa:gap-4">
+      <dt className="sxa:text-muted">{label}</dt>
+      <dd className="sxa:min-w-0 sxa:truncate sxa:text-right sxa:font-medium">{children}</dd>
+    </div>
+  );
+}
+
+function BillingHistory({ uniqid }: { uniqid: string }) {
+  const { state, reload } = useAccountResource(`billing:${uniqid}`, () =>
+    callCustomerApi((sdk) => sdk.subscriptionBillingHistory(uniqid)));
+
+  return (
+    <section className="sxa:mt-8">
+      <AccountSectionTitle>{t('subscriptions.historyTitle')}</AccountSectionTitle>
+      <div className="sxa:mt-4">
+        {state.status === 'loading' ? (
+          <AccountRowsSkeleton rows={2} label={t('subscriptions.historyLoading')} />
+        ) : null}
+
+        {state.status === 'error' ? (
+          <AccountError message={state.message} onRetry={reload} />
+        ) : null}
+
+        {state.status === 'ready' ? (
+          <BillingHistoryList payload={state.data} reload={reload} />
+        ) : null}
+      </div>
+    </section>
+  );
+}
+
+function BillingHistoryList({ payload, reload }: { payload: unknown; reload: () => void }) {
+  const history = narrowBillingHistory(payload);
+
+  /*
+   * A payload that does not match the producer is not drawn as an empty
+   * history. "You were never billed" and "we could not read your invoices" are
+   * different answers, and only one of them is about the buyer's money.
+   */
+  if (!history.ok) {
+    return <AccountError message={t('common.genericError')} onRetry={reload} />;
+  }
+
+  if (history.invoices.length === 0) {
+    return (
+      <AccountEmpty
+        title={t('subscriptions.historyEmptyTitle')}
+        body={t('subscriptions.historyEmptyBody')}
+      />
+    );
+  }
+
+  return (
+    <ul className="sxa:space-y-4">
+      {history.invoices.map((invoice) => (
+        <li key={invoice.uniqid} 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 sxa:tabular-nums">
+              {formatAccountAmount(invoice.total, invoice.currency)}
+            </p>
+            <p className="sxa:mt-1 sxa:truncate sxa:text-micro sxa:text-muted">
+              {formatAccountDate(invoice.created_at)}
+            </p>
+          </div>
+          <StatusChip status={invoice.status} />
+        </li>
+      ))}
+    </ul>
+  );
+}