create-brainerce-store 1.72.0 → 1.74.0

package/templates/nextjs/base/src/components/account/order-status-timeline.tsx

@@ -1,85 +1,85 @@
-'use client';
-
-import type { Order, OrderStatus } from 'brainerce';
-import { useTranslations } from '@/core/lib/translations';
-import { cn } from '@/core/lib/utils';
-
-/**
- * Message key for every order status the API can return.
- *
- * The API sends these values UPPERCASE and verbatim (`PENDING`, `ON_HOLD`,
- * ...). Never lowercase them before the lookup: a lowercase key silently
- * misses and every row falls through to the default label.
- */
-export type OrderStatusLabelKey =
-  | 'statusDraft'
-  | 'statusPending'
-  | 'statusProcessing'
-  | 'statusOnHold'
-  | 'statusPaid'
-  | 'statusShipped'
-  | 'statusDelivered'
-  | 'statusCompleted'
-  | 'statusFulfilled'
-  | 'statusCancelled'
-  | 'statusRefunded'
-  | 'statusPartiallyRefunded';
-
-export const ORDER_STATUS_LABEL_KEYS: Record<OrderStatus, OrderStatusLabelKey> = {
-  DRAFT: 'statusDraft',
-  PENDING: 'statusPending',
-  PROCESSING: 'statusProcessing',
-  ON_HOLD: 'statusOnHold',
-  PAID: 'statusPaid',
-  SHIPPED: 'statusShipped',
-  DELIVERED: 'statusDelivered',
-  COMPLETED: 'statusCompleted',
-  FULFILLED: 'statusFulfilled',
-  CANCELLED: 'statusCancelled',
-  REFUNDED: 'statusRefunded',
-  PARTIALLY_REFUNDED: 'statusPartiallyRefunded',
-};
-
-interface OrderStatusTimelineProps {
-  history: Order['statusHistory'];
-  className?: string;
-}
-
-export function OrderStatusTimeline({ history, className }: OrderStatusTimelineProps) {
-  const t = useTranslations('account');
-  if (!history || history.length === 0) return null;
-
-  return (
-    <div className={cn('border-border border-t pt-2', className)}>
-      <p className="text-foreground mb-2 text-sm font-medium">{t('statusTimeline')}</p>
-      <ol className="space-y-1.5">
-        {history.map((entry, idx) => {
-          const key = ORDER_STATUS_LABEL_KEYS[entry.status] || 'statusPending';
-          const when = new Date(entry.at);
-          const whenStr = isNaN(when.getTime())
-            ? entry.at
-            : when.toLocaleString(undefined, {
-                year: 'numeric',
-                month: 'short',
-                day: 'numeric',
-                hour: '2-digit',
-                minute: '2-digit',
-              });
-          return (
-            <li key={`${entry.status}-${idx}`} className="flex items-center gap-2 text-xs">
-              <span
-                className={cn(
-                  'bg-primary inline-block h-2 w-2 flex-shrink-0 rounded-full',
-                  idx === history.length - 1 ? 'opacity-100' : 'opacity-60'
-                )}
-              />
-              <span className="text-foreground font-medium">{t(key)}</span>
-              <span className="text-muted-foreground">· {whenStr}</span>
-              {entry.note && <span className="text-muted-foreground truncate">({entry.note})</span>}
-            </li>
-          );
-        })}
-      </ol>
-    </div>
-  );
-}
+'use client';
+
+import type { Order, OrderStatus } from 'brainerce';
+import { useTranslations } from '@/core/lib/translations';
+import { cn } from '@/core/lib/utils';
+
+/**
+ * Message key for every order status the API can return.
+ *
+ * The API sends these values UPPERCASE and verbatim (`PENDING`, `ON_HOLD`,
+ * ...). Never lowercase them before the lookup: a lowercase key silently
+ * misses and every row falls through to the default label.
+ */
+export type OrderStatusLabelKey =
+  | 'statusDraft'
+  | 'statusPending'
+  | 'statusProcessing'
+  | 'statusOnHold'
+  | 'statusPaid'
+  | 'statusShipped'
+  | 'statusDelivered'
+  | 'statusCompleted'
+  | 'statusFulfilled'
+  | 'statusCancelled'
+  | 'statusRefunded'
+  | 'statusPartiallyRefunded';
+
+export const ORDER_STATUS_LABEL_KEYS: Record<OrderStatus, OrderStatusLabelKey> = {
+  DRAFT: 'statusDraft',
+  PENDING: 'statusPending',
+  PROCESSING: 'statusProcessing',
+  ON_HOLD: 'statusOnHold',
+  PAID: 'statusPaid',
+  SHIPPED: 'statusShipped',
+  DELIVERED: 'statusDelivered',
+  COMPLETED: 'statusCompleted',
+  FULFILLED: 'statusFulfilled',
+  CANCELLED: 'statusCancelled',
+  REFUNDED: 'statusRefunded',
+  PARTIALLY_REFUNDED: 'statusPartiallyRefunded',
+};
+
+interface OrderStatusTimelineProps {
+  history: Order['statusHistory'];
+  className?: string;
+}
+
+export function OrderStatusTimeline({ history, className }: OrderStatusTimelineProps) {
+  const t = useTranslations('account');
+  if (!history || history.length === 0) return null;
+
+  return (
+    <div className={cn('border-border border-t pt-2', className)}>
+      <p className="text-foreground mb-2 text-sm font-medium">{t('statusTimeline')}</p>
+      <ol className="space-y-1.5">
+        {history.map((entry, idx) => {
+          const key = ORDER_STATUS_LABEL_KEYS[entry.status] || 'statusPending';
+          const when = new Date(entry.at);
+          const whenStr = isNaN(when.getTime())
+            ? entry.at
+            : when.toLocaleString(undefined, {
+                year: 'numeric',
+                month: 'short',
+                day: 'numeric',
+                hour: '2-digit',
+                minute: '2-digit',
+              });
+          return (
+            <li key={`${entry.status}-${idx}`} className="flex items-center gap-2 text-xs">
+              <span
+                className={cn(
+                  'bg-primary inline-block h-2 w-2 flex-shrink-0 rounded-full',
+                  idx === history.length - 1 ? 'opacity-100' : 'opacity-60'
+                )}
+              />
+              <span className="text-foreground font-medium">{t(key)}</span>
+              <span className="text-muted-foreground">· {whenStr}</span>
+              {entry.note && <span className="text-muted-foreground truncate">({entry.note})</span>}
+            </li>
+          );
+        })}
+      </ol>
+    </div>
+  );
+}

package/templates/nextjs/base/src/components/account/saved-payment-methods.tsx

@@ -0,0 +1,104 @@
+'use client';
+
+/**
+ * The customer's vaulted payment methods.
+ *
+ * ⛔ AUTO-HIDES. `getMySavedPaymentMethods()` returns `[]` for everyone who has
+ * never vaulted a card, which on a new store is everyone, so the whole section
+ * renders null. It also renders null when the call fails or the shopper is
+ * logged out. There is no empty state and no error box: a shopper who has no
+ * saved cards does not need to be told about a feature they have not used.
+ *
+ * ⛔ THIS IS NOT ONE-CLICK CHECKOUT, and there is deliberately no "pay with
+ * this card" button. The ONLY storefront call that charges a vaulted card is
+ * `subscribeToMembership({ planId, savedPaymentTokenId })`. Nothing on the
+ * normal checkout accepts a saved token, so a pay-with-saved-card button would
+ * be a dead control. This is a read-only list.
+ *
+ * ⛔ NO CARD DATA IS HERE AND NONE IS AVAILABLE. The response carries display
+ * fields only: `paymentMethod`, `brand`, `last4`, `expMonth`, `expYear`,
+ * `isDefault`. Every one of those can be null except the first and last.
+ *
+ * Cards get here by checking out with `createPaymentIntent(checkoutId,
+ * { saveCard: true })`, which is honored only when the checkout has a known
+ * `customerId` (so never for a guest) and is silently ignored by providers
+ * without tokenization (Grow today). Treat vaulting as best-effort and never
+ * promise the shopper their card was definitely saved.
+ */
+
+import { useEffect, useState } from 'react';
+import type { StorefrontSavedPaymentMethod } from 'brainerce';
+import { getClient } from '@/core/lib/brainerce';
+import { useTranslations } from '@/core/lib/translations';
+import { useAuth } from '@/core/providers/store-provider';
+import { cn } from '@/core/lib/utils';
+
+/** "12/2027" from expMonth/expYear, or null when the provider gave neither. */
+function formatExpiry(month: number | null, year: number | null): string | null {
+  if (month == null || year == null) return null;
+  return `${String(month).padStart(2, '0')}/${year}`;
+}
+
+export function SavedPaymentMethods({ className }: { className?: string }) {
+  const t = useTranslations('account');
+  const { isLoggedIn } = useAuth();
+  const [methods, setMethods] = useState<StorefrontSavedPaymentMethod[]>([]);
+
+  useEffect(() => {
+    if (!isLoggedIn) {
+      setMethods([]);
+      return;
+    }
+    let cancelled = false;
+    getClient()
+      .getMySavedPaymentMethods()
+      .then((result) => {
+        if (!cancelled) setMethods(Array.isArray(result) ? result : []);
+      })
+      .catch(() => {
+        // Swallowed on purpose. The account page must render its profile,
+        // addresses and orders whether or not this optional list resolves.
+        if (!cancelled) setMethods([]);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [isLoggedIn]);
+
+  if (methods.length === 0) return null;
+
+  return (
+    <div className={cn('', className)}>
+      <h2 className="text-foreground mb-4 text-lg font-semibold">{t('paymentMethod')}</h2>
+      <ul className="border-border divide-border divide-y rounded-lg border">
+        {methods.map((method) => {
+          const expiry = formatExpiry(method.expMonth, method.expYear);
+          return (
+            <li key={method.id} className="flex items-center justify-between gap-4 px-4 py-3">
+              <span className="text-foreground text-sm font-medium">
+                {/* Brand + last4 when the provider gave them; otherwise the
+                    method itself ("paypal", "bank_account"). All store data,
+                    so no translation key is involved. */}
+                {method.brand && method.last4
+                  ? `${method.brand} •••• ${method.last4}`
+                  : method.paymentMethod}
+              </span>
+              <span className="flex items-center gap-3">
+                {expiry ? (
+                  <span className="text-muted-foreground text-sm" dir="ltr">
+                    {expiry}
+                  </span>
+                ) : null}
+                {method.isDefault ? (
+                  <span className="bg-secondary text-secondary-foreground rounded px-2 py-0.5 text-xs font-medium">
+                    {t('defaultAddress')}
+                  </span>
+                ) : null}
+              </span>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}