create-brainerce-store 1.3.2 → 1.4.0

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

@@ -3,6 +3,7 @@
 import { useState } from 'react';
 import type { PickupLocation } from 'brainerce';
 import { formatPrice } from 'brainerce';
+import { useTranslations } from '@/lib/translations';
 import { useStoreInfo } from '@/providers/store-provider';
 import { cn } from '@/lib/utils';
 
@@ -24,6 +25,9 @@ export function PickupStep({
   initialEmail = '',
   className,
 }: PickupStepProps) {
+  const t = useTranslations('checkout');
+  const tf = useTranslations('checkoutForm');
+  const tc = useTranslations('common');
   const { storeInfo } = useStoreInfo();
   const currency = storeInfo?.currency || 'USD';
 
@@ -38,11 +42,11 @@ export function PickupStep({
     e.preventDefault();
 
     if (!selectedId) {
-      setError('Please select a pickup location');
+      setError(t('pickupLocationRequired'));
       return;
     }
     if (!email.trim() || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
-      setError('Please enter a valid email');
+      setError(tf('emailInvalid'));
       return;
     }
 
@@ -62,7 +66,7 @@ export function PickupStep({
     <form onSubmit={handleSubmit} className={cn('space-y-6', className)}>
       {/* Pickup locations */}
       <div className="space-y-3">
-        <p className="text-foreground text-sm font-medium">Select pickup location</p>
+        <p className="text-foreground text-sm font-medium">{t('selectPickupLocation')}</p>
         {locations.map((loc) => {
           const price = parseFloat(loc.price);
           const isFree = price === 0;
@@ -113,7 +117,7 @@ export function PickupStep({
                   isFree ? 'text-primary' : 'text-foreground'
                 )}
               >
-                {isFree ? 'Free' : (formatPrice(price, { currency }) as string)}
+                {isFree ? tc('free') : (formatPrice(price, { currency }) as string)}
               </span>
             </button>
           );
@@ -122,11 +126,11 @@ export function PickupStep({
 
       {/* Customer info */}
       <div className="space-y-4">
-        <p className="text-foreground text-sm font-medium">Your details</p>
+        <p className="text-foreground text-sm font-medium">{t('yourDetails')}</p>
 
         <div>
           <label htmlFor="pickup-email" className="text-foreground mb-1 block text-sm">
-            Email <span className="text-destructive">*</span>
+            {tf('email')} <span className="text-destructive">*</span>
           </label>
           <input
             id="pickup-email"
@@ -142,7 +146,7 @@ export function PickupStep({
         <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
           <div>
             <label htmlFor="pickup-firstName" className="text-foreground mb-1 block text-sm">
-              First Name
+              {tf('firstName')}
             </label>
             <input
               id="pickup-firstName"
@@ -154,7 +158,7 @@ export function PickupStep({
           </div>
           <div>
             <label htmlFor="pickup-lastName" className="text-foreground mb-1 block text-sm">
-              Last Name
+              {tf('lastName')}
             </label>
             <input
               id="pickup-lastName"
@@ -168,7 +172,7 @@ export function PickupStep({
 
         <div>
           <label htmlFor="pickup-phone" className="text-foreground mb-1 block text-sm">
-            Phone
+            {tf('phone')}
           </label>
           <input
             id="pickup-phone"
@@ -176,7 +180,7 @@ export function PickupStep({
             value={phone}
             onChange={(e) => setPhone(e.target.value)}
             className={cn(inputClass, 'border-border')}
-            placeholder="+1234567890 (optional)"
+            placeholder={tf('phonePlaceholder')}
           />
         </div>
       </div>
@@ -188,7 +192,7 @@ export function PickupStep({
         disabled={loading || !selectedId}
         className="bg-primary text-primary-foreground w-full rounded px-6 py-3 text-sm font-medium transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-60"
       >
-        {loading ? 'Saving...' : 'Continue to Payment'}
+        {loading ? tc('saving') : t('continueToPayment')}
       </button>
     </form>
   );

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

@@ -1,111 +1,110 @@
-'use client';
-
-import type { ShippingRate } from 'brainerce';
-import { formatPrice } from 'brainerce';
-import { useStoreInfo } from '@/providers/store-provider';
-import { cn } from '@/lib/utils';
-
-interface ShippingStepProps {
-  rates: ShippingRate[];
-  selectedRateId: string | null;
-  onSelect: (rateId: string) => void;
-  loading?: boolean;
-  className?: string;
-}
-
-export function ShippingStep({
-  rates,
-  selectedRateId,
-  onSelect,
-  loading = false,
-  className,
-}: ShippingStepProps) {
-  const { storeInfo } = useStoreInfo();
-  const currency = storeInfo?.currency || 'USD';
-
-  if (rates.length === 0) {
-    return (
-      <div className={cn('py-8 text-center', className)}>
-        <svg
-          className="text-muted-foreground mx-auto mb-3 h-10 w-10"
-          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>
-        <p className="text-muted-foreground text-sm">
-          No shipping options available for this address.
-        </p>
-        <p className="text-muted-foreground mt-1 text-xs">
-          Please try a different address or contact support.
-        </p>
-      </div>
-    );
-  }
-
-  return (
-    <div className={cn('space-y-3', className)}>
-      {rates.map((rate) => {
-        const price = parseFloat(rate.price);
-        const isFree = price === 0;
-        const isSelected = selectedRateId === rate.id;
-
-        return (
-          <button
-            key={rate.id}
-            type="button"
-            onClick={() => onSelect(rate.id)}
-            disabled={loading}
-            className={cn(
-              'flex w-full items-center gap-4 rounded border px-4 py-3 text-start transition-colors',
-              isSelected
-                ? 'border-primary bg-primary/5'
-                : 'border-border hover:border-muted-foreground',
-              loading && 'cursor-not-allowed opacity-60'
-            )}
-          >
-            {/* Radio indicator */}
-            <div
-              className={cn(
-                'flex h-4 w-4 flex-shrink-0 items-center justify-center rounded-full border-2',
-                isSelected ? 'border-primary' : 'border-muted-foreground/40'
-              )}
-            >
-              {isSelected && <div className="bg-primary h-2 w-2 rounded-full" />}
-            </div>
-
-            {/* Rate info */}
-            <div className="min-w-0 flex-1">
-              <p className="text-foreground text-sm font-medium">{rate.name}</p>
-              {rate.description && (
-                <p className="text-muted-foreground mt-0.5 text-xs">{rate.description}</p>
-              )}
-              {rate.estimatedDays != null && (
-                <p className="text-muted-foreground mt-0.5 text-xs">
-                  Estimated delivery: {rate.estimatedDays}{' '}
-                  {rate.estimatedDays === 1 ? 'day' : 'days'}
-                </p>
-              )}
-            </div>
-
-            {/* Price */}
-            <span
-              className={cn(
-                'flex-shrink-0 text-sm font-medium',
-                isFree ? 'text-primary' : 'text-foreground'
-              )}
-            >
-              {isFree ? 'Free' : (formatPrice(price, { currency }) as string)}
-            </span>
-          </button>
-        );
-      })}
-    </div>
-  );
-}
+'use client';
+
+import type { ShippingRate } from 'brainerce';
+import { formatPrice } from 'brainerce';
+import { useTranslations } from '@/lib/translations';
+import { useStoreInfo } from '@/providers/store-provider';
+import { cn } from '@/lib/utils';
+
+interface ShippingStepProps {
+  rates: ShippingRate[];
+  selectedRateId: string | null;
+  onSelect: (rateId: string) => void;
+  loading?: boolean;
+  className?: string;
+}
+
+export function ShippingStep({
+  rates,
+  selectedRateId,
+  onSelect,
+  loading = false,
+  className,
+}: ShippingStepProps) {
+  const t = useTranslations('checkout');
+  const tc = useTranslations('common');
+  const { storeInfo } = useStoreInfo();
+  const currency = storeInfo?.currency || 'USD';
+
+  if (rates.length === 0) {
+    return (
+      <div className={cn('py-8 text-center', className)}>
+        <svg
+          className="text-muted-foreground mx-auto mb-3 h-10 w-10"
+          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>
+        <p className="text-muted-foreground text-sm">{t('noShippingOptions')}</p>
+        <p className="text-muted-foreground mt-1 text-xs">{t('noShippingOptionsHint')}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn('space-y-3', className)}>
+      {rates.map((rate) => {
+        const price = parseFloat(rate.price);
+        const isFree = price === 0;
+        const isSelected = selectedRateId === rate.id;
+
+        return (
+          <button
+            key={rate.id}
+            type="button"
+            onClick={() => onSelect(rate.id)}
+            disabled={loading}
+            className={cn(
+              'flex w-full items-center gap-4 rounded border px-4 py-3 text-start transition-colors',
+              isSelected
+                ? 'border-primary bg-primary/5'
+                : 'border-border hover:border-muted-foreground',
+              loading && 'cursor-not-allowed opacity-60'
+            )}
+          >
+            {/* Radio indicator */}
+            <div
+              className={cn(
+                'flex h-4 w-4 flex-shrink-0 items-center justify-center rounded-full border-2',
+                isSelected ? 'border-primary' : 'border-muted-foreground/40'
+              )}
+            >
+              {isSelected && <div className="bg-primary h-2 w-2 rounded-full" />}
+            </div>
+
+            {/* Rate info */}
+            <div className="min-w-0 flex-1">
+              <p className="text-foreground text-sm font-medium">{rate.name}</p>
+              {rate.description && (
+                <p className="text-muted-foreground mt-0.5 text-xs">{rate.description}</p>
+              )}
+              {rate.estimatedDays != null && (
+                <p className="text-muted-foreground mt-0.5 text-xs">
+                  {t('estimatedDelivery')} {rate.estimatedDays}{' '}
+                  {rate.estimatedDays === 1 ? tc('day') : tc('days')}
+                </p>
+              )}
+            </div>
+
+            {/* Price */}
+            <span
+              className={cn(
+                'flex-shrink-0 text-sm font-medium',
+                isFree ? 'text-primary' : 'text-foreground'
+              )}
+            >
+              {isFree ? tc('free') : (formatPrice(price, { currency }) as string)}
+            </span>
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/templates/nextjs/base/src/components/checkout/tax-display.tsx

@@ -2,6 +2,7 @@
 
 import type { TaxBreakdown } from 'brainerce';
 import { formatPrice } from 'brainerce';
+import { useTranslations } from '@/lib/translations';
 import { useStoreInfo } from '@/providers/store-provider';
 import { cn } from '@/lib/utils';
 
@@ -16,6 +17,8 @@ interface TaxDisplayProps {
 }
 
 export function TaxDisplay({ addressSet, taxAmount, taxBreakdown, className }: TaxDisplayProps) {
+  const t = useTranslations('checkout');
+  const tc = useTranslations('common');
   const { storeInfo } = useStoreInfo();
   const currency = storeInfo?.currency || 'USD';
 
@@ -23,8 +26,8 @@ export function TaxDisplay({ addressSet, taxAmount, taxBreakdown, className }: T
   if (!addressSet) {
     return (
       <div className={cn('flex items-center justify-between text-sm', className)}>
-        <span className="text-muted-foreground">Tax</span>
-        <span className="text-muted-foreground text-xs">Calculated after address entry</span>
+        <span className="text-muted-foreground">{tc('tax')}</span>
+        <span className="text-muted-foreground text-xs">{t('calculatedAfterAddress')}</span>
       </div>
     );
   }
@@ -35,9 +38,9 @@ export function TaxDisplay({ addressSet, taxAmount, taxBreakdown, className }: T
   return (
     <div className={cn('space-y-1', className)}>
       <div className="flex items-center justify-between text-sm">
-        <span className="text-muted-foreground">Tax</span>
+        <span className="text-muted-foreground">{tc('tax')}</span>
         <span className="text-foreground font-medium">
-          {tax > 0 ? (formatPrice(tax, { currency }) as string) : 'No tax'}
+          {tax > 0 ? (formatPrice(tax, { currency }) as string) : t('noTax')}
         </span>
       </div>
 

package/templates/nextjs/base/src/components/layout/footer.tsx

@@ -1,35 +1,38 @@
-'use client';
-
-import Link from 'next/link';
-import { useStoreInfo } from '@/providers/store-provider';
-
-export function Footer() {
-  const { storeInfo } = useStoreInfo();
-  const year = new Date().getFullYear();
-
-  return (
-    <footer className="border-border bg-background border-t">
-      <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
-        <div className="flex flex-col items-center justify-between gap-4 sm:flex-row">
-          <p className="text-muted-foreground text-sm">
-            {year} {storeInfo?.name || 'Store'}. All rights reserved.
-          </p>
-          <nav className="flex items-center gap-4">
-            <Link
-              href="/products"
-              className="text-muted-foreground hover:text-foreground text-sm transition-colors"
-            >
-              Products
-            </Link>
-            <Link
-              href="/account"
-              className="text-muted-foreground hover:text-foreground text-sm transition-colors"
-            >
-              Account
-            </Link>
-          </nav>
-        </div>
-      </div>
-    </footer>
-  );
-}
+'use client';
+
+import Link from 'next/link';
+import { useTranslations } from '@/lib/translations';
+import { useStoreInfo } from '@/providers/store-provider';
+
+export function Footer() {
+  const t = useTranslations('common');
+  const tn = useTranslations('nav');
+  const { storeInfo } = useStoreInfo();
+  const year = new Date().getFullYear();
+
+  return (
+    <footer className="border-border bg-background border-t">
+      <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
+        <div className="flex flex-col items-center justify-between gap-4 sm:flex-row">
+          <p className="text-muted-foreground text-sm">
+            {year} {storeInfo?.name || t('store')}. {t('allRightsReserved')}
+          </p>
+          <nav className="flex items-center gap-4">
+            <Link
+              href="/products"
+              className="text-muted-foreground hover:text-foreground text-sm transition-colors"
+            >
+              {tn('products')}
+            </Link>
+            <Link
+              href="/account"
+              className="text-muted-foreground hover:text-foreground text-sm transition-colors"
+            >
+              {tn('account')}
+            </Link>
+          </nav>
+        </div>
+      </div>
+    </footer>
+  );
+}