@shoppexio/storefront-react 0.3.0 → 0.4.0

package/eject/account/subscriptions.tsx

@@ -9,10 +9,10 @@
  *
  * 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.
+ * origin could fetch the link and forward it. So "Update card" is a link to the
+ * hosted billing page on the checkout host (design Batch 7, 5b), which asks for
+ * its own email code before it mints the portal session; the producer's
+ * `can_manage_payment_method` decides whether it shows.
  *
  * 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>`
@@ -29,10 +29,11 @@ import {
   subscriptionTiming,
   subscriptionTimingKey,
 } from './account-subscriptions';
-import { callCustomerApi } from './customer-account';
+import { callCustomerApi, safeExternalHref } from './customer-account';
+import { hostedPageHref } from './hosted-page';
 import type { SdkCustomerSubscription } from '@shoppexio/storefront-react';
 import { t } from './i18n';
-import { LockIcon } from './icons';
+import { CircleAlertIcon } from './icons';
 import { useAccountDashboard } from './dashboard';
 import {
   AccountBackButton,
@@ -43,6 +44,7 @@ import {
   AccountRowsSkeleton,
   AccountSectionTitle,
   BusySpinner,
+  HostedPageLink,
   StatusChip,
   formatAccountAmount,
   formatAccountDate,
@@ -127,6 +129,7 @@ export function AccountSubscriptions() {
             ) : null}
             <StatusChip status={subscription.status} />
           </button>
+          <RenewalDue subscription={subscription} className="sxa:mt-2" />
         </li>
       ))}
     </ul>
@@ -203,6 +206,12 @@ function SubscriptionDetail({
       {notice ? <AccountNotice message={notice} /> : null}
       {actionError ? <div className="sxa:mt-3"><AccountError message={actionError} /></div> : null}
 
+      <RenewalDue subscription={subscription} className="sxa:mt-3" />
+
+      {subscription.status === 'PAST_DUE' && subscription.actions.can_manage_payment_method ? (
+        <PastDueCard subscription={subscription} />
+      ) : null}
+
       <AccountCard className="sxa:mt-5 sxa:p-6">
         {subscription.plan ? (
           <>
@@ -232,17 +241,13 @@ function SubscriptionDetail({
         </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>
+        <HostedPageLink
+          page="billing"
+          hints={{ subscription: subscription.uniqid }}
+          label={t('subscriptions.updateCard')}
+          className="sxa:mt-4"
+        />
       ) : null}
 
       {/*
@@ -347,6 +352,60 @@ function SubscriptionDetail({
   );
 }
 
+/**
+ * A renewal payment that is due, and the way to pay it.
+ *
+ * `renewal_checkout_url` is the hosted checkout of the renewal invoice the
+ * server already opened, so this is a plain link: following it creates
+ * nothing, and no call is made from here. No URL means nothing is due and
+ * nothing is shown; a URL that fails the scheme check gets no anchor, only the
+ * sentence, because the payment is still due.
+ */
+function RenewalDue({ subscription, className }: { subscription: SdkCustomerSubscription; className: string }) {
+  const url = subscription.renewal_checkout_url ?? null;
+  if (url === null) return null;
+  const href = safeExternalHref(url);
+
+  return (
+    <AccountCard className={`${className} sxa:flex sxa:flex-wrap sxa:items-center sxa:justify-between sxa:gap-3 sxa:px-5 sxa:py-3`}>
+      <p className="sxa:min-w-0 sxa:text-small">{t('subscriptions.renewalDue')}</p>
+      {href === null ? null : (
+        <a
+          href={href}
+          className="sx-account-cta sxa:cta-button sxa:inline-flex sxa:h-9 sxa:shrink-0 sxa:items-center sxa:px-4 sxa:text-small sxa:font-semibold"
+        >
+          {t('subscriptions.payNow')}
+        </a>
+      )}
+    </AccountCard>
+  );
+}
+
+/**
+ * A past-due Stripe plan: the last charge failed, and the card is what to
+ * change before the plan ends. The same hosted billing link as "Update card".
+ */
+function PastDueCard({ subscription }: { subscription: SdkCustomerSubscription }) {
+  // No shop or checkout host to link to: the notice would point at nothing.
+  if (hostedPageHref('billing', { subscription: subscription.uniqid }) === null) return null;
+  return (
+    <AccountCard className="sx-account-past-due sxa:mt-3 sxa:flex sxa:items-start sxa:gap-3 sxa:px-5 sxa:py-4">
+      <CircleAlertIcon className="sxa:mt-0.5 sxa:h-4 sxa:w-4 sxa:shrink-0 sxa:text-error" />
+      <div className="sxa:min-w-0 sxa:flex-1">
+        <p className="sxa:text-small sxa:font-semibold">{t('subscriptions.pastDueCardTitle')}</p>
+        <p className="sxa:mt-1 sxa:text-small sxa:text-muted">{t('subscriptions.pastDueCardBody')}</p>
+        <HostedPageLink
+          page="billing"
+          hints={{ subscription: subscription.uniqid }}
+          label={t('subscriptions.updateCard')}
+          hint={null}
+          className="sxa:mt-3"
+        />
+      </div>
+    </AccountCard>
+  );
+}
+
 function DetailRow({ label, children }: { label: string; children: ReactNode }) {
   return (
     <div className="sxa:flex sxa:items-center sxa:justify-between sxa:gap-4">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoppexio/storefront-react",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "React hooks, models and a customer account for Shoppex code storefronts",
   "type": "module",
   "homepage": "https://docs.shoppex.io/storefront/code-storefront-development",
@@ -37,7 +37,7 @@
     "build": "tsup && bun run build:css && bun run build:eject",
     "build:css": "tailwindcss --input src/account/account.css --output dist/account.css --optimize",
     "lint": "biome lint src tests scripts",
-    "typecheck": "tsc --noEmit",
+    "typecheck": "tsrs --noEmit",
     "test": "bun run build:css && bun test ./tests",
     "build:eject": "bun scripts/build-eject.ts"
   },
@@ -72,8 +72,8 @@
     "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
     "jsdom-cjs": "npm:jsdom@26.1.0",
-    "react": "19.2.7",
-    "react-dom": "19.2.7",
+    "react": "19.3.1",
+    "react-dom": "19.3.1",
     "react-router-dom": "7.18.1",
     "tailwindcss": "4.2.1",
     "tsup": "^8.5.0",