create-brainerce-store 1.5.7 → 1.6.1

package/dist/index.js

@@ -31,7 +31,7 @@ var require_package = __commonJS({
   "package.json"(exports2, module2) {
     module2.exports = {
       name: "create-brainerce-store",
-      version: "1.5.6",
+      version: "1.6.1",
       description: "Scaffold a production-ready e-commerce storefront connected to Brainerce",
       bin: {
         "create-brainerce-store": "dist/index.js"

package/messages/en.json

@@ -212,7 +212,25 @@
     "authFailed": "Authentication failed",
     "authFailedDesc": "Missing authentication parameters. Please try again.",
     "backToLogin": "Back to Login",
-    "completingSignIn": "Completing sign in..."
+    "completingSignIn": "Completing sign in...",
+    "forgotPassword": "Forgot password?",
+    "forgotPasswordTitle": "Reset your password",
+    "forgotPasswordSubtitle": "Enter your email and we'll send you a reset link.",
+    "sendResetLink": "Send Reset Link",
+    "sendingResetLink": "Sending...",
+    "resetLinkSent": "If an account exists with this email, you'll receive a password reset link shortly.",
+    "resetPasswordTitle": "Set new password",
+    "resetPasswordSubtitle": "Enter your new password below.",
+    "newPassword": "New Password",
+    "newPasswordPlaceholder": "Enter new password",
+    "confirmPassword": "Confirm Password",
+    "confirmPasswordPlaceholder": "Re-enter new password",
+    "resetPassword": "Reset Password",
+    "resettingPassword": "Resetting...",
+    "passwordResetSuccess": "Password reset successfully! Redirecting to login...",
+    "passwordsMustMatch": "Passwords must match",
+    "invalidResetLink": "Invalid reset link",
+    "invalidResetLinkDesc": "This password reset link is invalid or has expired. Please request a new one."
   },
   "account": {
     "pageTitle": "My Account",

package/messages/he.json

@@ -212,7 +212,25 @@
     "authFailed": "ההתחברות נכשלה",
     "authFailedDesc": "חסרים פרמטרי התחברות. אנא נסו שוב.",
     "backToLogin": "חזרה להתחברות",
-    "completingSignIn": "...משלים התחברות"
+    "completingSignIn": "...משלים התחברות",
+    "forgotPassword": "שכחת סיסמא?",
+    "forgotPasswordTitle": "איפוס סיסמא",
+    "forgotPasswordSubtitle": "הזינו את האימייל שלכם ונשלח לכם קישור לאיפוס.",
+    "sendResetLink": "שליחת קישור איפוס",
+    "sendingResetLink": "...שולח",
+    "resetLinkSent": "אם קיים חשבון עם האימייל הזה, תקבלו קישור לאיפוס סיסמא בקרוב.",
+    "resetPasswordTitle": "הגדרת סיסמא חדשה",
+    "resetPasswordSubtitle": "הזינו את הסיסמא החדשה שלכם.",
+    "newPassword": "סיסמא חדשה",
+    "newPasswordPlaceholder": "הזינו סיסמא חדשה",
+    "confirmPassword": "אישור סיסמא",
+    "confirmPasswordPlaceholder": "הזינו שוב את הסיסמא",
+    "resetPassword": "איפוס סיסמא",
+    "resettingPassword": "...מאפס",
+    "passwordResetSuccess": "...הסיסמא אופסה בהצלחה! מעביר להתחברות",
+    "passwordsMustMatch": "הסיסמאות חייבות להיות זהות",
+    "invalidResetLink": "קישור איפוס לא תקין",
+    "invalidResetLinkDesc": "קישור האיפוס הזה אינו תקין או שפג תוקפו. בקשו קישור חדש."
   },
   "account": {
     "pageTitle": "החשבון שלי",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-brainerce-store",
-  "version": "1.5.7",
+  "version": "1.6.1",
   "description": "Scaffold a production-ready e-commerce storefront connected to Brainerce",
   "bin": {
     "create-brainerce-store": "dist/index.js"

package/templates/nextjs/base/next.config.ts

@@ -1,9 +1,31 @@
-import type { NextConfig } from 'next';
-
-const nextConfig: NextConfig = {
-  images: {
-    remotePatterns: [{ protocol: 'https', hostname: '**' }],
-  },
-};
-
-export default nextConfig;
+import type { NextConfig } from 'next';
+
+const nextConfig: NextConfig = {
+  images: {
+    remotePatterns: [{ protocol: 'https', hostname: '**' }],
+  },
+  async headers() {
+    return [
+      {
+        source: '/(.*)',
+        headers: [
+          {
+            key: 'Content-Security-Policy',
+            value: [
+              "default-src 'self'",
+              "script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdn.meshulam.co.il https://meshulam.co.il https://*.meshulam.co.il https://grow.link https://*.grow.link https://*.grow.security https://js.stripe.com https://pay.google.com",
+              "style-src 'self' 'unsafe-inline'",
+              "img-src 'self' data: blob: https:",
+              "font-src 'self' data:",
+              "frame-src 'self' https://*.meshulam.co.il https://grow.link https://*.grow.link https://*.grow.security https://*.creditguard.co.il https://js.stripe.com https://hooks.stripe.com https://pay.google.com",
+              "connect-src 'self' https://*.meshulam.co.il https://grow.link https://*.grow.link https://*.grow.security https://google.com https://pay.google.com https://*.stripe.com https://*.creditguard.co.il",
+              "worker-src 'self' blob:",
+            ].join('; '),
+          },
+        ],
+      },
+    ];
+  },
+};
+
+export default nextConfig;

package/templates/nextjs/base/src/app/forgot-password/page.tsx

@@ -0,0 +1,111 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import { getClient } from '@/lib/brainerce';
+import { LoadingSpinner } from '@/components/shared/loading-spinner';
+import { useTranslations } from '@/lib/translations';
+
+export default function ForgotPasswordPage() {
+  const t = useTranslations('auth');
+  const [email, setEmail] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [sent, setSent] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (loading) return;
+
+    try {
+      setLoading(true);
+      setError(null);
+      const client = getClient();
+      await client.forgotPassword(email);
+      setSent(true);
+    } catch (err) {
+      const message =
+        err instanceof Error ? err.message : 'Something went wrong. Please try again.';
+      setError(message);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  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('forgotPasswordTitle')}</h1>
+          <p className="text-muted-foreground mt-1 text-sm">{t('forgotPasswordSubtitle')}</p>
+        </div>
+
+        {error && (
+          <div className="bg-destructive/10 border-destructive/20 text-destructive rounded-lg border px-4 py-3 text-sm">
+            {error}
+          </div>
+        )}
+
+        {sent ? (
+          <div className="space-y-4">
+            <div className="rounded-lg border border-green-200 bg-green-50 px-4 py-3 text-sm text-green-800 dark:border-green-800 dark:bg-green-950/30 dark:text-green-300">
+              {t('resetLinkSent')}
+            </div>
+            <Link
+              href="/login"
+              className="text-primary block text-center text-sm font-medium hover:underline"
+            >
+              {t('backToLogin')}
+            </Link>
+          </div>
+        ) : (
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div>
+              <label
+                htmlFor="forgot-email"
+                className="text-foreground mb-1.5 block text-sm font-medium"
+              >
+                {t('email')}
+              </label>
+              <input
+                id="forgot-email"
+                type="email"
+                required
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                placeholder={t('emailPlaceholder')}
+                autoComplete="email"
+                className="border-border bg-background text-foreground placeholder:text-muted-foreground focus:ring-primary/20 focus:border-primary h-10 w-full rounded border px-3 text-sm focus:outline-none focus:ring-2"
+              />
+            </div>
+
+            <button
+              type="submit"
+              disabled={loading}
+              className="bg-primary text-primary-foreground flex h-10 w-full items-center justify-center gap-2 rounded text-sm font-medium transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50"
+            >
+              {loading ? (
+                <>
+                  <LoadingSpinner
+                    size="sm"
+                    className="border-primary-foreground/30 border-t-primary-foreground"
+                  />
+                  {t('sendingResetLink')}
+                </>
+              ) : (
+                t('sendResetLink')
+              )}
+            </button>
+
+            <Link
+              href="/login"
+              className="text-muted-foreground block text-center text-sm hover:underline"
+            >
+              {t('backToLogin')}
+            </Link>
+          </form>
+        )}
+      </div>
+    </div>
+  );
+}

package/templates/nextjs/base/src/app/reset-password/page.tsx

@@ -0,0 +1,161 @@
+'use client';
+
+import { Suspense, useState } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import Link from 'next/link';
+import { getClient } from '@/lib/brainerce';
+import { LoadingSpinner } from '@/components/shared/loading-spinner';
+import { useTranslations } from '@/lib/translations';
+
+function ResetPasswordContent() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const t = useTranslations('auth');
+
+  const token = searchParams.get('token');
+
+  const [newPassword, setNewPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState(false);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (loading || !token) return;
+
+    if (newPassword !== confirmPassword) {
+      setError(t('passwordsMustMatch'));
+      return;
+    }
+
+    try {
+      setLoading(true);
+      setError(null);
+      const client = getClient();
+      await client.resetPassword(token, newPassword);
+      setSuccess(true);
+      setTimeout(() => router.push('/login'), 2000);
+    } catch (err) {
+      const message =
+        err instanceof Error ? err.message : 'Something went wrong. Please try again.';
+      setError(message);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  if (!token) {
+    return (
+      <div className="flex min-h-[60vh] items-center justify-center px-4 py-12">
+        <div className="w-full max-w-md space-y-4 text-center">
+          <h1 className="text-foreground text-2xl font-bold">{t('invalidResetLink')}</h1>
+          <p className="text-muted-foreground text-sm">{t('invalidResetLinkDesc')}</p>
+          <Link
+            href="/forgot-password"
+            className="bg-primary text-primary-foreground inline-flex items-center rounded px-6 py-3 font-medium transition-opacity hover:opacity-90"
+          >
+            {t('sendResetLink')}
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  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('resetPasswordTitle')}</h1>
+          <p className="text-muted-foreground mt-1 text-sm">{t('resetPasswordSubtitle')}</p>
+        </div>
+
+        {error && (
+          <div className="bg-destructive/10 border-destructive/20 text-destructive rounded-lg border px-4 py-3 text-sm">
+            {error}
+          </div>
+        )}
+
+        {success ? (
+          <div className="rounded-lg border border-green-200 bg-green-50 px-4 py-3 text-sm text-green-800 dark:border-green-800 dark:bg-green-950/30 dark:text-green-300">
+            {t('passwordResetSuccess')}
+          </div>
+        ) : (
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div>
+              <label
+                htmlFor="new-password"
+                className="text-foreground mb-1.5 block text-sm font-medium"
+              >
+                {t('newPassword')}
+              </label>
+              <input
+                id="new-password"
+                type="password"
+                required
+                minLength={8}
+                value={newPassword}
+                onChange={(e) => setNewPassword(e.target.value)}
+                placeholder={t('newPasswordPlaceholder')}
+                autoComplete="new-password"
+                className="border-border bg-background text-foreground placeholder:text-muted-foreground focus:ring-primary/20 focus:border-primary h-10 w-full rounded border px-3 text-sm focus:outline-none focus:ring-2"
+              />
+            </div>
+
+            <div>
+              <label
+                htmlFor="confirm-password"
+                className="text-foreground mb-1.5 block text-sm font-medium"
+              >
+                {t('confirmPassword')}
+              </label>
+              <input
+                id="confirm-password"
+                type="password"
+                required
+                minLength={8}
+                value={confirmPassword}
+                onChange={(e) => setConfirmPassword(e.target.value)}
+                placeholder={t('confirmPasswordPlaceholder')}
+                autoComplete="new-password"
+                className="border-border bg-background text-foreground placeholder:text-muted-foreground focus:ring-primary/20 focus:border-primary h-10 w-full rounded border px-3 text-sm focus:outline-none focus:ring-2"
+              />
+            </div>
+
+            <button
+              type="submit"
+              disabled={loading}
+              className="bg-primary text-primary-foreground flex h-10 w-full items-center justify-center gap-2 rounded text-sm font-medium transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50"
+            >
+              {loading ? (
+                <>
+                  <LoadingSpinner
+                    size="sm"
+                    className="border-primary-foreground/30 border-t-primary-foreground"
+                  />
+                  {t('resettingPassword')}
+                </>
+              ) : (
+                t('resetPassword')
+              )}
+            </button>
+          </form>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default function ResetPasswordPage() {
+  return (
+    <Suspense
+      fallback={
+        <div className="flex min-h-[60vh] items-center justify-center">
+          <LoadingSpinner size="lg" />
+        </div>
+      }
+    >
+      <ResetPasswordContent />
+    </Suspense>
+  );
+}

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

@@ -1,276 +1,278 @@
-'use client';
-
-import { useState } from 'react';
-import Image from 'next/image';
-import type { Order, OrderStatus } from 'brainerce';
-import { formatPrice } from 'brainerce';
-import { useTranslations } from '@/lib/translations';
-import { cn } from '@/lib/utils';
-
-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',
-  },
-};
-
-interface OrderHistoryProps {
-  orders: Order[];
-  className?: string;
-}
-
-export function OrderHistory({ orders, className }: OrderHistoryProps) {
-  const t = useTranslations('account');
-  if (orders.length === 0) {
-    return (
-      <div className={cn('py-12 text-center', className)}>
-        <svg
-          className="text-muted-foreground mx-auto mb-3 h-12 w-12"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth={1.5}
-            d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"
-          />
-        </svg>
-        <h3 className="text-foreground text-lg font-semibold">{t('noOrders')}</h3>
-        <p className="text-muted-foreground mt-1 text-sm">{t('noOrdersDesc')}</p>
-      </div>
-    );
-  }
-
-  return (
-    <div className={cn('space-y-4', className)}>
-      {orders.map((order) => (
-        <OrderCard key={order.id} order={order} />
-      ))}
-    </div>
-  );
-}
-
-function OrderCard({ order }: { order: Order }) {
-  const t = useTranslations('account');
-  const tc = useTranslations('common');
-  const [expanded, setExpanded] = useState(false);
-  const statusConfig = STATUS_CONFIG[order.status] || STATUS_CONFIG.pending;
-  const currency = order.currency || 'USD';
-  const totalAmount = order.totalAmount || order.total || '0';
-
-  return (
-    <div className="border-border overflow-hidden rounded-lg border">
-      {/* Order header */}
-      <button
-        type="button"
-        onClick={() => setExpanded(!expanded)}
-        className="hover:bg-muted/50 flex w-full items-center justify-between p-4 text-start transition-colors"
-      >
-        <div className="min-w-0 flex-1">
-          <div className="flex flex-wrap items-center gap-3">
-            <span className="text-foreground text-sm font-semibold">
-              {order.orderNumber || `${t('orderPrefix')} ${order.id.slice(0, 8)}`}
-            </span>
-            <span
-              className={cn(
-                'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium',
-                statusConfig.className
-              )}
-            >
-              {t(
-                statusConfig.labelKey as
-                  | 'statusPending'
-                  | 'statusProcessing'
-                  | 'statusShipped'
-                  | 'statusDelivered'
-                  | 'statusCancelled'
-                  | 'statusRefunded'
-              )}
-            </span>
-          </div>
-          <div className="text-muted-foreground mt-1 flex items-center gap-4 text-xs">
-            <span>
-              {new Date(order.createdAt).toLocaleDateString(undefined, {
-                year: 'numeric',
-                month: 'short',
-                day: 'numeric',
-              })}
-            </span>
-            <span>
-              {order.items.length} {order.items.length === 1 ? tc('item') : tc('items')}
-            </span>
-          </div>
-        </div>
-
-        <div className="flex flex-shrink-0 items-center gap-3">
-          <span className="text-foreground text-sm font-semibold">
-            {formatPrice(parseFloat(totalAmount), { currency }) as string}
-          </span>
-          <svg
-            className={cn(
-              'text-muted-foreground h-4 w-4 transition-transform',
-              expanded && 'rotate-180'
-            )}
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-          </svg>
-        </div>
-      </button>
-
-      {/* Expanded order items */}
-      {expanded && (
-        <div className="border-border bg-muted/30 space-y-3 border-t px-4 py-3">
-          {order.items.map((item, index) => (
-            <div key={`${item.productId}-${index}`} className="flex items-center gap-3">
-              <div className="bg-muted relative h-10 w-10 flex-shrink-0 overflow-hidden rounded">
-                {item.image ? (
-                  <Image
-                    src={item.image}
-                    alt={item.name || t('productFallback')}
-                    fill
-                    sizes="40px"
-                    className="object-cover"
-                  />
-                ) : (
-                  <div className="text-muted-foreground absolute inset-0 flex items-center justify-center">
-                    <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={1.5}
-                        d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
-                      />
-                    </svg>
-                  </div>
-                )}
-              </div>
-
-              <div className="min-w-0 flex-1">
-                <p className="text-foreground truncate text-sm">
-                  {item.name || t('productFallback')}
-                </p>
-                <p className="text-muted-foreground text-xs">
-                  {tc('qty')} {item.quantity}
-                </p>
-              </div>
-
-              <span className="text-foreground flex-shrink-0 text-sm">
-                {formatPrice(parseFloat(item.price), { currency }) as string}
-              </span>
-            </div>
-          ))}
-
-          <OrderFinancialSummary order={order} currency={currency} />
-        </div>
-      )}
-    </div>
-  );
-}
-
-function OrderFinancialSummary({ order, currency }: { order: Order; currency: string }) {
-  const tc = useTranslations('common');
-  const totalAmount = order.totalAmount || order.total || '0';
-  const subtotal = order.subtotal ? parseFloat(order.subtotal) : null;
-  const ruleAmt = order.ruleDiscountAmount ? parseFloat(order.ruleDiscountAmount) : 0;
-  const couponAmt = order.couponDiscount ? parseFloat(order.couponDiscount) : 0;
-  const shipping = order.shippingAmount ? parseFloat(order.shippingAmount) : 0;
-  const tax = order.taxAmount ? parseFloat(order.taxAmount) : 0;
-  const rules = order.appliedDiscounts;
-
-  const hasBreakdown = subtotal !== null && subtotal > 0;
-
-  if (!hasBreakdown) {
-    return (
-      <div className="border-border flex items-center justify-between border-t pt-2">
-        <span className="text-muted-foreground text-sm font-medium">{tc('total')}</span>
-        <span className="text-foreground text-sm font-semibold">
-          {formatPrice(parseFloat(totalAmount), { currency }) as string}
-        </span>
-      </div>
-    );
-  }
-
-  return (
-    <div className="border-border space-y-1 border-t pt-2 text-sm">
-      <div className="flex items-center justify-between">
-        <span className="text-muted-foreground">{tc('subtotal')}</span>
-        <span className="text-foreground">{formatPrice(subtotal, { currency }) as string}</span>
-      </div>
-
-      {rules && rules.length > 0
-        ? rules.map((rule) => (
-            <div key={rule.ruleId} className="flex items-center justify-between">
-              <span className="text-muted-foreground">{rule.ruleName}</span>
-              <span className="text-destructive">
-                -{formatPrice(parseFloat(rule.discountAmount || '0'), { currency }) as string}
-              </span>
-            </div>
-          ))
-        : ruleAmt > 0 && (
-            <div className="flex items-center justify-between">
-              <span className="text-muted-foreground">{tc('generalDiscount')}</span>
-              <span className="text-destructive">
-                -{formatPrice(ruleAmt, { currency }) as string}
-              </span>
-            </div>
-          )}
-
-      {order.couponCode && couponAmt > 0 && (
-        <div className="flex items-center justify-between">
-          <span className="text-muted-foreground">
-            {tc('couponDiscount')} ({order.couponCode})
-          </span>
-          <span className="text-destructive">
-            -{formatPrice(couponAmt, { currency }) as string}
-          </span>
-        </div>
-      )}
-
-      {shipping > 0 && (
-        <div className="flex items-center justify-between">
-          <span className="text-muted-foreground">{tc('shipping')}</span>
-          <span className="text-foreground">{formatPrice(shipping, { currency }) as string}</span>
-        </div>
-      )}
-
-      {tax > 0 && (
-        <div className="flex items-center justify-between">
-          <span className="text-muted-foreground">{tc('tax')}</span>
-          <span className="text-foreground">{formatPrice(tax, { currency }) as string}</span>
-        </div>
-      )}
-
-      <div className="border-border flex items-center justify-between border-t pt-1">
-        <span className="text-foreground font-medium">{tc('total')}</span>
-        <span className="text-foreground font-semibold">
-          {formatPrice(parseFloat(totalAmount), { currency }) as string}
-        </span>
-      </div>
-    </div>
-  );
-}
+'use client';
+
+import { useState } from 'react';
+import Image from 'next/image';
+import type { Order, OrderStatus } from 'brainerce';
+import { formatPrice } from 'brainerce';
+import { useTranslations } from '@/lib/translations';
+import { cn } from '@/lib/utils';
+
+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',
+  },
+};
+
+interface OrderHistoryProps {
+  orders: Order[];
+  className?: string;
+}
+
+export function OrderHistory({ orders, className }: OrderHistoryProps) {
+  const t = useTranslations('account');
+  if (orders.length === 0) {
+    return (
+      <div className={cn('py-12 text-center', className)}>
+        <svg
+          className="text-muted-foreground mx-auto mb-3 h-12 w-12"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={1.5}
+            d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"
+          />
+        </svg>
+        <h3 className="text-foreground text-lg font-semibold">{t('noOrders')}</h3>
+        <p className="text-muted-foreground mt-1 text-sm">{t('noOrdersDesc')}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn('space-y-4', className)}>
+      {orders.map((order) => (
+        <OrderCard key={order.id} order={order} />
+      ))}
+    </div>
+  );
+}
+
+function OrderCard({ order }: { order: Order }) {
+  const t = useTranslations('account');
+  const tc = useTranslations('common');
+  const [expanded, setExpanded] = useState(false);
+  const statusConfig = STATUS_CONFIG[order.status] || STATUS_CONFIG.pending;
+  const currency = order.currency || 'USD';
+  const totalAmount = order.totalAmount || order.total || '0';
+
+  return (
+    <div className="border-border overflow-hidden rounded-lg border">
+      {/* Order header */}
+      <button
+        type="button"
+        onClick={() => setExpanded(!expanded)}
+        className="hover:bg-muted/50 flex w-full items-center justify-between p-4 text-start transition-colors"
+      >
+        <div className="min-w-0 flex-1">
+          <div className="flex flex-wrap items-center gap-3">
+            <span className="text-foreground text-sm font-semibold">
+              {order.orderNumber || `${t('orderPrefix')} ${order.id.slice(0, 8)}`}
+            </span>
+            <span
+              className={cn(
+                'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium',
+                statusConfig.className
+              )}
+            >
+              {t(
+                statusConfig.labelKey as
+                  | 'statusPending'
+                  | 'statusProcessing'
+                  | 'statusShipped'
+                  | 'statusDelivered'
+                  | 'statusCancelled'
+                  | 'statusRefunded'
+              )}
+            </span>
+          </div>
+          <div className="text-muted-foreground mt-1 flex items-center gap-4 text-xs">
+            <span>
+              {order.createdAt && !isNaN(new Date(order.createdAt).getTime())
+                ? new Date(order.createdAt).toLocaleDateString(undefined, {
+                    year: 'numeric',
+                    month: 'short',
+                    day: 'numeric',
+                  })
+                : '—'}
+            </span>
+            <span>
+              {order.items.length} {order.items.length === 1 ? tc('item') : tc('items')}
+            </span>
+          </div>
+        </div>
+
+        <div className="flex flex-shrink-0 items-center gap-3">
+          <span className="text-foreground text-sm font-semibold">
+            {formatPrice(parseFloat(totalAmount), { currency }) as string}
+          </span>
+          <svg
+            className={cn(
+              'text-muted-foreground h-4 w-4 transition-transform',
+              expanded && 'rotate-180'
+            )}
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+          </svg>
+        </div>
+      </button>
+
+      {/* Expanded order items */}
+      {expanded && (
+        <div className="border-border bg-muted/30 space-y-3 border-t px-4 py-3">
+          {order.items.map((item, index) => (
+            <div key={`${item.productId}-${index}`} className="flex items-center gap-3">
+              <div className="bg-muted relative h-10 w-10 flex-shrink-0 overflow-hidden rounded">
+                {item.image ? (
+                  <Image
+                    src={item.image}
+                    alt={item.name || t('productFallback')}
+                    fill
+                    sizes="40px"
+                    className="object-cover"
+                  />
+                ) : (
+                  <div className="text-muted-foreground absolute inset-0 flex items-center justify-center">
+                    <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={1.5}
+                        d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+                      />
+                    </svg>
+                  </div>
+                )}
+              </div>
+
+              <div className="min-w-0 flex-1">
+                <p className="text-foreground truncate text-sm">
+                  {item.name || t('productFallback')}
+                </p>
+                <p className="text-muted-foreground text-xs">
+                  {tc('qty')} {item.quantity}
+                </p>
+              </div>
+
+              <span className="text-foreground flex-shrink-0 text-sm">
+                {formatPrice(parseFloat(item.price), { currency }) as string}
+              </span>
+            </div>
+          ))}
+
+          <OrderFinancialSummary order={order} currency={currency} />
+        </div>
+      )}
+    </div>
+  );
+}
+
+function OrderFinancialSummary({ order, currency }: { order: Order; currency: string }) {
+  const tc = useTranslations('common');
+  const totalAmount = order.totalAmount || order.total || '0';
+  const subtotal = order.subtotal ? parseFloat(order.subtotal) : null;
+  const ruleAmt = order.ruleDiscountAmount ? parseFloat(order.ruleDiscountAmount) : 0;
+  const couponAmt = order.couponDiscount ? parseFloat(order.couponDiscount) : 0;
+  const shipping = order.shippingAmount ? parseFloat(order.shippingAmount) : 0;
+  const tax = order.taxAmount ? parseFloat(order.taxAmount) : 0;
+  const rules = order.appliedDiscounts;
+
+  const hasBreakdown = subtotal !== null && subtotal > 0;
+
+  if (!hasBreakdown) {
+    return (
+      <div className="border-border flex items-center justify-between border-t pt-2">
+        <span className="text-muted-foreground text-sm font-medium">{tc('total')}</span>
+        <span className="text-foreground text-sm font-semibold">
+          {formatPrice(parseFloat(totalAmount), { currency }) as string}
+        </span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="border-border space-y-1 border-t pt-2 text-sm">
+      <div className="flex items-center justify-between">
+        <span className="text-muted-foreground">{tc('subtotal')}</span>
+        <span className="text-foreground">{formatPrice(subtotal, { currency }) as string}</span>
+      </div>
+
+      {rules && rules.length > 0
+        ? rules.map((rule) => (
+            <div key={rule.ruleId} className="flex items-center justify-between">
+              <span className="text-muted-foreground">{rule.ruleName}</span>
+              <span className="text-destructive">
+                -{formatPrice(parseFloat(rule.discountAmount || '0'), { currency }) as string}
+              </span>
+            </div>
+          ))
+        : ruleAmt > 0 && (
+            <div className="flex items-center justify-between">
+              <span className="text-muted-foreground">{tc('generalDiscount')}</span>
+              <span className="text-destructive">
+                -{formatPrice(ruleAmt, { currency }) as string}
+              </span>
+            </div>
+          )}
+
+      {order.couponCode && couponAmt > 0 && (
+        <div className="flex items-center justify-between">
+          <span className="text-muted-foreground">
+            {tc('couponDiscount')} ({order.couponCode})
+          </span>
+          <span className="text-destructive">
+            -{formatPrice(couponAmt, { currency }) as string}
+          </span>
+        </div>
+      )}
+
+      {shipping > 0 && (
+        <div className="flex items-center justify-between">
+          <span className="text-muted-foreground">{tc('shipping')}</span>
+          <span className="text-foreground">{formatPrice(shipping, { currency }) as string}</span>
+        </div>
+      )}
+
+      {tax > 0 && (
+        <div className="flex items-center justify-between">
+          <span className="text-muted-foreground">{tc('tax')}</span>
+          <span className="text-foreground">{formatPrice(tax, { currency }) as string}</span>
+        </div>
+      )}
+
+      <div className="border-border flex items-center justify-between border-t pt-1">
+        <span className="text-foreground font-medium">{tc('total')}</span>
+        <span className="text-foreground font-semibold">
+          {formatPrice(parseFloat(totalAmount), { currency }) as string}
+        </span>
+      </div>
+    </div>
+  );
+}

package/templates/nextjs/base/src/components/account/profile-section.tsx

@@ -193,14 +193,16 @@ export function ProfileSection({ profile, onProfileUpdate, className }: ProfileS
                 <p className="text-muted-foreground mt-2 text-sm">{profile.phone}</p>
               )}
 
-              <p className="text-muted-foreground mt-3 text-xs">
-                {t('memberSince')}{' '}
-                {new Date(profile.createdAt).toLocaleDateString(undefined, {
-                  year: 'numeric',
-                  month: 'long',
-                  day: 'numeric',
-                })}
-              </p>
+              {profile.createdAt && !isNaN(new Date(profile.createdAt).getTime()) && (
+                <p className="text-muted-foreground mt-3 text-xs">
+                  {t('memberSince')}{' '}
+                  {new Date(profile.createdAt).toLocaleDateString(undefined, {
+                    year: 'numeric',
+                    month: 'long',
+                    day: 'numeric',
+                  })}
+                </p>
+              )}
             </>
           )}
 

package/templates/nextjs/base/src/components/auth/login-form.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState } from 'react';
+import Link from 'next/link';
 import { useTranslations } from '@/lib/translations';
 import { cn } from '@/lib/utils';
 import { LoadingSpinner } from '@/components/shared/loading-spinner';
@@ -72,6 +73,12 @@ export function LoginForm({ onSubmit, error, className }: LoginFormProps) {
         />
       </div>
 
+      <div className="flex justify-end">
+        <Link href="/forgot-password" className="text-primary text-sm hover:underline">
+          {t('forgotPassword')}
+        </Link>
+      </div>
+
       <button
         type="submit"
         disabled={loading}

package/templates/nextjs/base/src/components/checkout/payment-step.tsx

@@ -120,9 +120,21 @@ export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
   }, []);
 
   const handleSdkPaymentError = useCallback((response: unknown) => {
+    const TRANSIENT_SDK_ERRORS = [
+      'Wallet not initialized',
+      "SDK was not loaded as needed and therefore can't run",
+    ];
+
+    const msg = (response as { message?: string })?.message || '';
+    // Grow SDK fires transient errors during startup before its internal
+    // state is ready. The polling mechanism in Step 3 retries
+    // renderPaymentOptions() until the SDK is fully initialized.
+    if (TRANSIENT_SDK_ERRORS.some((e) => msg.includes(e))) {
+      console.info('Payment SDK: transient startup error, waiting for retry...', msg);
+      return;
+    }
     console.error('Payment SDK error:', response);
-    const msg = (response as { message?: string })?.message || t('paymentError');
-    setError(msg);
+    setError(msg || t('paymentError'));
   }, []);
 
   // Step 1: Load SDK scripts — just load, don't init yet
@@ -214,6 +226,7 @@ export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
         : paymentIntent.clientSecret;
 
     let rendered = false;
+    let walletReady = false;
     let pollId: ReturnType<typeof setInterval>;
 
     function tryRenderPaymentOptions() {
@@ -239,20 +252,29 @@ export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
         onError: handleSdkPaymentError,
         onWalletChange: (state: string) => {
           console.info('Payment SDK wallet state:', state);
+          walletReady = true;
           tryRenderPaymentOptions();
         },
       },
     });
 
-    // Poll as fallback: wait 1s for init() to finish, then poll every 500ms
+    // Poll as fallback — but respect the SDK's readiness signal:
+    //  - First 4s: only render if onWalletChange has fired (SDK says it's ready)
+    //  - After 4s: force-attempt even without wallet signal (onWalletChange may not fire)
+    const WALLET_GRACE_PERIOD = 4000;
+    const initTime = Date.now();
+
     const timeoutId = setTimeout(() => {
-      tryRenderPaymentOptions();
+      if (walletReady) tryRenderPaymentOptions();
       if (!rendered) {
         let attempts = 0;
-        const maxAttempts = 16; // 16 * 500ms = 8 seconds after initial delay
+        const maxAttempts = 16; // 16 * 500ms = 8s after initial 1s delay
         pollId = setInterval(() => {
           attempts++;
-          tryRenderPaymentOptions();
+          const elapsed = Date.now() - initTime;
+          if (walletReady || elapsed > WALLET_GRACE_PERIOD) {
+            tryRenderPaymentOptions();
+          }
           if (!rendered && attempts >= maxAttempts) {
             clearInterval(pollId);
             console.error('Payment SDK: renderPaymentOptions failed after max attempts');