create-brainerce-store 1.29.1 → 1.30.0

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

@@ -0,0 +1,58 @@
+'use client';
+
+import type { Order } from 'brainerce';
+import { useTranslations } from '@/lib/translations';
+import { cn } from '@/lib/utils';
+
+interface OrderPaymentBlockProps {
+  order: Order;
+  className?: string;
+}
+
+const FINANCIAL_STATUS_KEY: Record<
+  string,
+  'paid' | 'statusPending' | 'refundedStatus' | 'partiallyRefundedStatus'
+> = {
+  paid: 'paid',
+  pending: 'statusPending',
+  refunded: 'refundedStatus',
+  partially_refunded: 'partiallyRefundedStatus',
+};
+
+const FINANCIAL_STATUS_COLOR: Record<string, string> = {
+  paid: 'bg-green-100 text-green-800 dark:bg-green-950/30 dark:text-green-400',
+  pending: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-950/30 dark:text-yellow-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',
+  voided: 'bg-red-100 text-red-800 dark:bg-red-950/30 dark:text-red-400',
+};
+
+export function OrderPaymentBlock({ order, className }: OrderPaymentBlockProps) {
+  const t = useTranslations('account');
+  if (!order.paymentMethod && !order.financialStatus) return null;
+
+  const statusKey = order.financialStatus ? FINANCIAL_STATUS_KEY[order.financialStatus] : null;
+  const statusLabel = statusKey ? t(statusKey) : order.financialStatus || '';
+  const statusClass = order.financialStatus
+    ? FINANCIAL_STATUS_COLOR[order.financialStatus] || 'bg-muted text-muted-foreground'
+    : '';
+
+  return (
+    <div className={cn('border-border flex items-center gap-3 border-t pt-2 text-xs', className)}>
+      <p className="text-foreground text-sm font-medium">{t('paymentMethod')}</p>
+      {order.paymentMethod && (
+        <span className="text-foreground capitalize">{order.paymentMethod.replace(/_/g, ' ')}</span>
+      )}
+      {statusLabel && (
+        <span
+          className={cn(
+            'inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-medium',
+            statusClass
+          )}
+        >
+          {statusLabel}
+        </span>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,79 @@
+'use client';
+
+import type { Order } from 'brainerce';
+import { useTranslations } from '@/lib/translations';
+import { cn } from '@/lib/utils';
+
+interface OrderShippingBlockProps {
+  order: Order;
+  className?: string;
+}
+
+export function OrderShippingBlock({ order, className }: OrderShippingBlockProps) {
+  const t = useTranslations('account');
+  const addr = order.shippingAddress;
+  const hasAddress = !!addr?.line1;
+  const hasTracking = !!(order.trackingNumber || order.trackingUrl || order.carrier);
+  if (!hasAddress && !hasTracking) return null;
+
+  const fullName = [addr?.firstName, addr?.lastName].filter(Boolean).join(' ');
+  const cityLine = [addr?.city, addr?.state || addr?.region, addr?.postalCode]
+    .filter(Boolean)
+    .join(', ');
+
+  return (
+    <div className={cn('border-border space-y-1.5 border-t pt-2 text-xs', className)}>
+      {hasAddress && (
+        <>
+          <p className="text-foreground text-sm font-medium">{t('shippingAddress')}</p>
+          <address className="text-muted-foreground not-italic">
+            {fullName && <div className="text-foreground">{fullName}</div>}
+            {addr?.company && <div>{addr.company}</div>}
+            <div>{addr?.line1}</div>
+            {addr?.line2 && <div>{addr.line2}</div>}
+            {cityLine && <div>{cityLine}</div>}
+            {addr?.country && <div>{addr.country}</div>}
+            {addr?.phone && <div>{addr.phone}</div>}
+          </address>
+        </>
+      )}
+
+      {hasTracking && (
+        <div className={cn(hasAddress && 'mt-2')}>
+          <p className="text-foreground text-sm font-medium">{t('tracking')}</p>
+          <div className="text-muted-foreground space-y-0.5">
+            {order.carrier && order.trackingNumber && (
+              <div className="text-foreground font-mono">
+                {order.carrier} · {order.trackingNumber}
+              </div>
+            )}
+            {order.carrier && !order.trackingNumber && (
+              <div className="text-foreground">{order.carrier}</div>
+            )}
+            {!order.carrier && order.trackingNumber && (
+              <div className="text-foreground font-mono">{order.trackingNumber}</div>
+            )}
+            {order.shippedAt && (
+              <div>{t('shippedOn', { date: new Date(order.shippedAt).toLocaleDateString() })}</div>
+            )}
+            {order.deliveredAt && (
+              <div>
+                {t('deliveredOn', { date: new Date(order.deliveredAt).toLocaleDateString() })}
+              </div>
+            )}
+            {order.trackingUrl && (
+              <a
+                href={order.trackingUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="bg-primary text-primary-foreground mt-1 inline-block rounded px-2.5 py-1 text-xs font-medium hover:opacity-90"
+              >
+                {t('trackOrder')}
+              </a>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,66 @@
+'use client';
+
+import type { Order, OrderStatus } from 'brainerce';
+import { useTranslations } from '@/lib/translations';
+import { cn } from '@/lib/utils';
+
+const STATUS_KEYS: Record<
+  OrderStatus,
+  | 'statusPending'
+  | 'statusProcessing'
+  | 'statusShipped'
+  | 'statusDelivered'
+  | 'statusCancelled'
+  | 'statusRefunded'
+> = {
+  pending: 'statusPending',
+  processing: 'statusProcessing',
+  shipped: 'statusShipped',
+  delivered: 'statusDelivered',
+  cancelled: 'statusCancelled',
+  refunded: 'statusRefunded',
+};
+
+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 = STATUS_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/products/customization-fields.tsx

@@ -340,10 +340,10 @@ function SingleImageField({
         className="text-foreground text-sm"
       />
       {uploading && (
-        <p className="text-muted-foreground mt-2 inline-flex items-center gap-2 text-xs">
+        <span className="text-muted-foreground mt-2 inline-flex items-center gap-2 text-xs">
           <LoadingSpinner size="sm" />
           {t('uploading')}
-        </p>
+        </span>
       )}
       {value && !uploading && (
         <div className="mt-2">
@@ -406,10 +406,10 @@ function GalleryField({
         className="text-foreground text-sm"
       />
       {uploading && (
-        <p className="text-muted-foreground mt-2 inline-flex items-center gap-2 text-xs">
+        <span className="text-muted-foreground mt-2 inline-flex items-center gap-2 text-xs">
           <LoadingSpinner size="sm" />
           {t('uploading')}
-        </p>
+        </span>
       )}
       {value.length > 0 && (
         <div className="mt-2 flex flex-wrap gap-2">