create-brainerce-store 1.68.0 → 1.72.0

package/templates/nextjs/base/src/app/order-confirmation/page.tsx

@@ -32,10 +32,29 @@ function OrderConfirmationContent() {
       try {
         const client = getClient();
 
-        // Clear cart state after successful payment
-        client.handlePaymentSuccess(checkoutId!);
+        // Clear cart state after successful payment. handlePaymentSuccess is
+        // SYNCHRONOUS: it returns the outcome rather than a promise, so there
+        // is nothing to await. Read the result, then refresh the cart AFTER
+        // it, or the header badge can be repopulated from the pre-clear cart.
+        //
+        //   mode 'full'    - whole cart cleared
+        //   mode 'partial' - only the purchased items were removed (partial
+        //                    checkout); whatever is left is still for sale
+        //   mode 'none'    - nothing to clear. Usually the SDK's idempotency
+        //                    guard: React Strict Mode runs this effect twice
+        //                    in development, and a refresh of this URL hits it
+        //                    too. On a good order this is expected, so it must
+        //                    never become a warning to the shopper.
+        const clearResult = client.handlePaymentSuccess(checkoutId!);
         await refreshCart();
 
+        if (!clearResult.cleared && clearResult.mode !== 'none') {
+          // A clear that neither succeeded nor was skipped leaves purchased
+          // items in the badge. Nothing the shopper can act on, but a silent
+          // gap here looks exactly like a working cart.
+          console.warn('Cart not cleared after payment:', clearResult);
+        }
+
         // For redirect-based payment providers, the customer returns with
         // provider params in the URL — CardCom: lowprofilecode; PayPal:
         // token + PayerID. Send these to the backend for server-side

package/templates/nextjs/base/src/app/products/[slug]/page.tsx

@@ -192,7 +192,7 @@ export default async function ProductDetailPage({ params }: Props) {
       <div className="mx-auto max-w-7xl px-4 pt-6 sm:px-6 lg:px-8">
         <Breadcrumbs items={breadcrumbItems} />
       </div>
-      <ProductClientSection product={product} />
+      <ProductClientSection product={product} stockAlertsEnabled={storeInfo?.stockAlertsEnabled} />
       {/* Visible Q&A + the FAQPage JSON-LD above read the same product.faq —
           the extractable format AI answer engines cite. */}
       <ProductFaqSection product={product} locale={locale} />

package/templates/nextjs/base/src/app/register/page.tsx

@@ -1,64 +1,67 @@
-'use client';
-
-import { useState } from 'react';
-import { useRouter, Link } from '@/core/lib/navigation';
-import { useAuth } from '@/core/providers/store-provider';
-import { proxyRegister } from '@/core/lib/auth';
-import { RegisterForm } from '@/components/auth/register-form';
-import { OAuthButtons } from '@/components/auth/oauth-buttons';
-import { useTranslations } from '@/core/lib/translations';
-
-export default function RegisterPage() {
-  const router = useRouter();
-  const auth = useAuth();
-  const t = useTranslations('auth');
-  const [error, setError] = useState<string | null>(null);
-
-  async function handleRegister(data: {
-    firstName: string;
-    lastName: string;
-    email: string;
-    password: string;
-    acceptsMarketing: boolean;
-  }) {
-    try {
-      setError(null);
-      const result = await proxyRegister(data);
-
-      if (result.requiresVerification) {
-        // Cookie already set by proxy; verify-email uses it for auth
-        router.push('/verify-email');
-        return;
-      }
-
-      // Cookie was set by the proxy; refresh auth state
-      await auth.login();
-      router.push('/');
-    } catch (err) {
-      const message = err instanceof Error ? err.message : 'Registration failed. Please try again.';
-      setError(message);
-    }
-  }
-
-  return (
-    <div className="flex min-h-[60vh] items-center justify-center px-4 py-12">
-      <div className="w-full max-w-md space-y-6">
-        <div className="text-center">
-          <h1 className="text-foreground text-2xl font-bold">{t('createAccountTitle')}</h1>
-          <p className="text-muted-foreground mt-1 text-sm">{t('joinSubtitle')}</p>
-        </div>
-
-        <RegisterForm onSubmit={handleRegister} error={error} />
-
-        <OAuthButtons />
-
-        <p className="text-muted-foreground text-center text-sm">
-          {t('alreadyHaveAccount')}{' '}
-          <Link href="/login" className="text-primary font-medium hover:underline">
-            {t('signIn')}
-          </Link>
-        </p>
-      </div>
-    </div>
-  );
-}
+'use client';
+
+import { useState } from 'react';
+import { useRouter, Link } from '@/core/lib/navigation';
+import { useAuth } from '@/core/providers/store-provider';
+import { proxyRegister } from '@/core/lib/auth';
+import { RegisterForm } from '@/components/auth/register-form';
+import { OAuthButtons } from '@/components/auth/oauth-buttons';
+import { useTranslations } from '@/core/lib/translations';
+
+export default function RegisterPage() {
+  const router = useRouter();
+  const auth = useAuth();
+  const t = useTranslations('auth');
+  const [error, setError] = useState<string | null>(null);
+
+  async function handleRegister(data: {
+    firstName: string;
+    lastName: string;
+    email: string;
+    password: string;
+    acceptsMarketing: boolean;
+    /** Month and day only, never a year. Present together or not at all. */
+    birthMonth?: number;
+    birthDay?: number;
+  }) {
+    try {
+      setError(null);
+      const result = await proxyRegister(data);
+
+      if (result.requiresVerification) {
+        // Cookie already set by proxy; verify-email uses it for auth
+        router.push('/verify-email');
+        return;
+      }
+
+      // Cookie was set by the proxy; refresh auth state
+      await auth.login();
+      router.push('/');
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Registration failed. Please try again.';
+      setError(message);
+    }
+  }
+
+  return (
+    <div className="flex min-h-[60vh] items-center justify-center px-4 py-12">
+      <div className="w-full max-w-md space-y-6">
+        <div className="text-center">
+          <h1 className="text-foreground text-2xl font-bold">{t('createAccountTitle')}</h1>
+          <p className="text-muted-foreground mt-1 text-sm">{t('joinSubtitle')}</p>
+        </div>
+
+        <RegisterForm onSubmit={handleRegister} error={error} />
+
+        <OAuthButtons />
+
+        <p className="text-muted-foreground text-center text-sm">
+          {t('alreadyHaveAccount')}{' '}
+          <Link href="/login" className="text-primary font-medium hover:underline">
+            {t('signIn')}
+          </Link>
+        </p>
+      </div>
+    </div>
+  );
+}

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

@@ -9,35 +9,29 @@ import { useCurrency } from '@/core/lib/use-currency';
 import { useTranslations } from '@/core/lib/translations';
 import { cn } from '@/core/lib/utils';
 import { OrderCustomizations } from './order-customizations';
-import { OrderStatusTimeline } from './order-status-timeline';
+import { OrderStatusTimeline, ORDER_STATUS_LABEL_KEYS } from './order-status-timeline';
 import { OrderShippingBlock } from './order-shipping-block';
 import { OrderPaymentBlock } from './order-payment-block';
 
-const STATUS_CONFIG: Record<OrderStatus, { labelKey: string; className: string }> = {
-  pending: {
-    labelKey: 'statusPending',
-    className: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-950/30 dark:text-yellow-400',
-  },
-  processing: {
-    labelKey: 'statusProcessing',
-    className: 'bg-blue-100 text-blue-800 dark:bg-blue-950/30 dark:text-blue-400',
-  },
-  shipped: {
-    labelKey: 'statusShipped',
-    className: 'bg-purple-100 text-purple-800 dark:bg-purple-950/30 dark:text-purple-400',
-  },
-  delivered: {
-    labelKey: 'statusDelivered',
-    className: 'bg-green-100 text-green-800 dark:bg-green-950/30 dark:text-green-400',
-  },
-  cancelled: {
-    labelKey: 'statusCancelled',
-    className: 'bg-red-100 text-red-800 dark:bg-red-950/30 dark:text-red-400',
-  },
-  refunded: {
-    labelKey: 'statusRefunded',
-    className: 'bg-orange-100 text-orange-800 dark:bg-orange-950/30 dark:text-orange-400',
-  },
+/**
+ * Badge colour per order status. The API sends the status UPPERCASE and
+ * verbatim, so these keys are uppercase too. Do NOT lowercase `order.status`
+ * before the lookup: every row would miss and render as "Pending".
+ * Labels come from ORDER_STATUS_LABEL_KEYS so the two stay in step.
+ */
+const STATUS_STYLES: Record<OrderStatus, string> = {
+  DRAFT: 'bg-muted text-muted-foreground',
+  PENDING: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-950/30 dark:text-yellow-400',
+  PROCESSING: 'bg-blue-100 text-blue-800 dark:bg-blue-950/30 dark:text-blue-400',
+  ON_HOLD: 'bg-amber-100 text-amber-800 dark:bg-amber-950/30 dark:text-amber-400',
+  PAID: 'bg-emerald-100 text-emerald-800 dark:bg-emerald-950/30 dark:text-emerald-400',
+  SHIPPED: 'bg-purple-100 text-purple-800 dark:bg-purple-950/30 dark:text-purple-400',
+  DELIVERED: 'bg-green-100 text-green-800 dark:bg-green-950/30 dark:text-green-400',
+  COMPLETED: 'bg-green-100 text-green-800 dark:bg-green-950/30 dark:text-green-400',
+  FULFILLED: 'bg-teal-100 text-teal-800 dark:bg-teal-950/30 dark:text-teal-400',
+  CANCELLED: 'bg-red-100 text-red-800 dark:bg-red-950/30 dark:text-red-400',
+  REFUNDED: 'bg-orange-100 text-orange-800 dark:bg-orange-950/30 dark:text-orange-400',
+  PARTIALLY_REFUNDED: 'bg-orange-100 text-orange-800 dark:bg-orange-950/30 dark:text-orange-400',
 };
 
 interface OrderHistoryProps {
@@ -82,8 +76,8 @@ function OrderCard({ order }: { order: Order }) {
   const t = useTranslations('account');
   const tc = useTranslations('common');
   const [expanded, setExpanded] = useState(false);
-  const statusConfig =
-    STATUS_CONFIG[order.status?.toLowerCase() as OrderStatus] || STATUS_CONFIG.pending;
+  const statusLabelKey = ORDER_STATUS_LABEL_KEYS[order.status] || 'statusPending';
+  const statusClassName = STATUS_STYLES[order.status] || STATUS_STYLES.PENDING;
   const currency = useCurrency(order.currency);
   const totalAmount = order.totalAmount || order.total || '0';
 
@@ -103,18 +97,10 @@ function OrderCard({ order }: { order: Order }) {
             <span
               className={cn(
                 'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium',
-                statusConfig.className
+                statusClassName
               )}
             >
-              {t(
-                statusConfig.labelKey as
-                  | 'statusPending'
-                  | 'statusProcessing'
-                  | 'statusShipped'
-                  | 'statusDelivered'
-                  | 'statusCancelled'
-                  | 'statusRefunded'
-              )}
+              {t(statusLabelKey)}
             </span>
           </div>
           <div className="text-muted-foreground mt-1 flex items-center gap-4 text-xs">
@@ -125,7 +111,7 @@ function OrderCard({ order }: { order: Order }) {
                     month: 'short',
                     day: 'numeric',
                   })
-                : '—'}
+                : ''}
             </span>
             <span>
               {order.items.length} {order.items.length === 1 ? tc('item') : tc('items')}

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

@@ -4,21 +4,40 @@ import type { Order, OrderStatus } from 'brainerce';
 import { useTranslations } from '@/core/lib/translations';
 import { cn } from '@/core/lib/utils';
 
-const STATUS_KEYS: Record<
-  OrderStatus,
+/**
+ * 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'
-> = {
-  pending: 'statusPending',
-  processing: 'statusProcessing',
-  shipped: 'statusShipped',
-  delivered: 'statusDelivered',
-  cancelled: 'statusCancelled',
-  refunded: '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 {
@@ -35,7 +54,7 @@ export function OrderStatusTimeline({ history, className }: OrderStatusTimelineP
       <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 = STATUS_KEYS[entry.status] || 'statusPending';
+          const key = ORDER_STATUS_LABEL_KEYS[entry.status] || 'statusPending';
           const when = new Date(entry.at);
           const whenStr = isNaN(when.getTime())
             ? entry.at
@@ -56,7 +75,7 @@ export function OrderStatusTimeline({ history, className }: OrderStatusTimelineP
               />
               <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>}
+              {entry.note && <span className="text-muted-foreground truncate">({entry.note})</span>}
             </li>
           );
         })}