create-brainerce-store 1.4.1 → 1.5.1

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

@@ -1,198 +1,198 @@
-'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>
-          ))}
-
-          <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>
-        </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>
+              {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>
+          ))}
+
+          <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>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -1,21 +1,71 @@
 'use client';
 
+import { useState } from 'react';
 import type { CustomerProfile } from 'brainerce';
+import { getClient } from '@/lib/brainerce';
 import { useTranslations } from '@/lib/translations';
 import { cn } from '@/lib/utils';
 
 interface ProfileSectionProps {
   profile: CustomerProfile;
+  onProfileUpdate?: (updated: CustomerProfile) => void;
   className?: string;
 }
 
-export function ProfileSection({ profile, className }: ProfileSectionProps) {
+export function ProfileSection({ profile, onProfileUpdate, className }: ProfileSectionProps) {
   const t = useTranslations('account');
+  const [editing, setEditing] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
+  const [form, setForm] = useState({
+    firstName: profile.firstName || '',
+    lastName: profile.lastName || '',
+    phone: profile.phone || '',
+  });
+
   const fullName = [profile.firstName, profile.lastName].filter(Boolean).join(' ');
   const initials =
     [profile.firstName?.[0], profile.lastName?.[0]].filter(Boolean).join('').toUpperCase() ||
     profile.email[0].toUpperCase();
 
+  function startEditing() {
+    setForm({
+      firstName: profile.firstName || '',
+      lastName: profile.lastName || '',
+      phone: profile.phone || '',
+    });
+    setMessage(null);
+    setEditing(true);
+  }
+
+  function cancelEditing() {
+    setEditing(false);
+    setMessage(null);
+  }
+
+  async function handleSave(e: React.FormEvent) {
+    e.preventDefault();
+    setSaving(true);
+    setMessage(null);
+
+    try {
+      const client = getClient();
+      const updated = await client.updateMyProfile({
+        firstName: form.firstName || undefined,
+        lastName: form.lastName || undefined,
+        phone: form.phone || undefined,
+      });
+      onProfileUpdate?.(updated);
+      setEditing(false);
+      setMessage({ type: 'success', text: t('profileUpdated') });
+      setTimeout(() => setMessage(null), 3000);
+    } catch {
+      setMessage({ type: 'error', text: t('profileUpdateFailed') });
+    } finally {
+      setSaving(false);
+    }
+  }
+
   return (
     <div className={cn('border-border rounded-lg border p-6', className)}>
       <div className="flex items-start gap-4">
@@ -25,49 +75,148 @@ export function ProfileSection({ profile, className }: ProfileSectionProps) {
         </div>
 
         <div className="min-w-0 flex-1">
-          {fullName && (
-            <h2 className="text-foreground truncate text-lg font-semibold">{fullName}</h2>
-          )}
-          <p className="text-muted-foreground truncate text-sm">{profile.email}</p>
-
-          <div className="mt-2 flex items-center gap-2">
-            {profile.emailVerified ? (
-              <span className="inline-flex items-center gap-1 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-700 dark:bg-green-950/30 dark:text-green-400">
-                <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M5 13l4 4L19 7"
+          {editing ? (
+            <form onSubmit={handleSave} className="space-y-3">
+              <div className="grid grid-cols-2 gap-3">
+                <div>
+                  <label className="text-muted-foreground mb-1 block text-xs font-medium">
+                    {t('firstName')}
+                  </label>
+                  <input
+                    type="text"
+                    value={form.firstName}
+                    onChange={(e) => setForm((f) => ({ ...f, firstName: e.target.value }))}
+                    className="border-border bg-background text-foreground focus:border-primary w-full rounded-md border px-3 py-1.5 text-sm outline-none"
+                    autoFocus
                   />
-                </svg>
-                {t('verified')}
-              </span>
-            ) : (
-              <span className="inline-flex items-center gap-1 rounded-full bg-orange-100 px-2 py-0.5 text-xs font-medium text-orange-700 dark:bg-orange-950/30 dark:text-orange-400">
-                <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M12 9v2m0 4h.01"
+                </div>
+                <div>
+                  <label className="text-muted-foreground mb-1 block text-xs font-medium">
+                    {t('lastName')}
+                  </label>
+                  <input
+                    type="text"
+                    value={form.lastName}
+                    onChange={(e) => setForm((f) => ({ ...f, lastName: e.target.value }))}
+                    className="border-border bg-background text-foreground focus:border-primary w-full rounded-md border px-3 py-1.5 text-sm outline-none"
                   />
-                </svg>
-                {t('unverified')}
-              </span>
-            )}
-          </div>
+                </div>
+              </div>
+              <div>
+                <label className="text-muted-foreground mb-1 block text-xs font-medium">
+                  {t('phone')}
+                </label>
+                <input
+                  type="tel"
+                  value={form.phone}
+                  onChange={(e) => setForm((f) => ({ ...f, phone: e.target.value }))}
+                  className="border-border bg-background text-foreground focus:border-primary w-full rounded-md border px-3 py-1.5 text-sm outline-none"
+                />
+              </div>
+              <p className="text-muted-foreground truncate text-sm">{profile.email}</p>
+              <div className="flex items-center gap-2">
+                <button
+                  type="submit"
+                  disabled={saving}
+                  className="bg-primary text-primary-foreground rounded-md px-4 py-1.5 text-sm font-medium transition-opacity hover:opacity-90 disabled:opacity-50"
+                >
+                  {saving ? '...' : t('save')}
+                </button>
+                <button
+                  type="button"
+                  onClick={cancelEditing}
+                  disabled={saving}
+                  className="text-muted-foreground hover:text-foreground rounded-md px-4 py-1.5 text-sm transition-colors disabled:opacity-50"
+                >
+                  {t('cancel')}
+                </button>
+              </div>
+            </form>
+          ) : (
+            <>
+              <div className="flex items-center gap-2">
+                {fullName && (
+                  <h2 className="text-foreground truncate text-lg font-semibold">{fullName}</h2>
+                )}
+                <button
+                  type="button"
+                  onClick={startEditing}
+                  className="text-muted-foreground hover:text-foreground flex-shrink-0 rounded p-1 transition-colors"
+                  title={t('editProfile')}
+                >
+                  <svg
+                    className="h-4 w-4"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    strokeWidth={2}
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
+                    />
+                  </svg>
+                </button>
+              </div>
+              <p className="text-muted-foreground truncate text-sm">{profile.email}</p>
+
+              <div className="mt-2 flex items-center gap-2">
+                {profile.emailVerified ? (
+                  <span className="inline-flex items-center gap-1 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-700 dark:bg-green-950/30 dark:text-green-400">
+                    <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M5 13l4 4L19 7"
+                      />
+                    </svg>
+                    {t('verified')}
+                  </span>
+                ) : (
+                  <span className="inline-flex items-center gap-1 rounded-full bg-orange-100 px-2 py-0.5 text-xs font-medium text-orange-700 dark:bg-orange-950/30 dark:text-orange-400">
+                    <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M12 9v2m0 4h.01"
+                      />
+                    </svg>
+                    {t('unverified')}
+                  </span>
+                )}
+              </div>
 
-          {profile.phone && <p className="text-muted-foreground mt-2 text-sm">{profile.phone}</p>}
+              {profile.phone && (
+                <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>
+              <p className="text-muted-foreground mt-3 text-xs">
+                {t('memberSince')}{' '}
+                {new Date(profile.createdAt).toLocaleDateString(undefined, {
+                  year: 'numeric',
+                  month: 'long',
+                  day: 'numeric',
+                })}
+              </p>
+            </>
+          )}
+
+          {/* Success/Error message */}
+          {message && (
+            <p
+              className={cn(
+                'mt-2 text-sm',
+                message.type === 'success'
+                  ? 'text-green-600 dark:text-green-400'
+                  : 'text-red-600 dark:text-red-400'
+              )}
+            >
+              {message.text}
+            </p>
+          )}
         </div>
       </div>
     </div>