create-brainerce-store 1.62.0 → 1.63.0

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

@@ -1,198 +1,198 @@
-'use client';
-
-import { useState } from 'react';
-import type { PickupLocation } from 'brainerce';
-import { formatPrice } from 'brainerce';
-import { useTranslations } from '@/core/lib/translations';
-import { useCurrency } from '@/core/lib/use-currency';
-import { cn } from '@/core/lib/utils';
-
-interface PickupStepProps {
-  locations: PickupLocation[];
-  onSelect: (
-    locationId: string,
-    customerInfo: { email: string; firstName?: string; lastName?: string; phone?: string }
-  ) => void;
-  loading?: boolean;
-  initialEmail?: string;
-  className?: string;
-}
-
-export function PickupStep({
-  locations,
-  onSelect,
-  loading = false,
-  initialEmail = '',
-  className,
-}: PickupStepProps) {
-  const t = useTranslations('checkout');
-  const tf = useTranslations('checkoutForm');
-  const tc = useTranslations('common');
-  const currency = useCurrency();
-
-  const [selectedId, setSelectedId] = useState<string | null>(null);
-  const [email, setEmail] = useState(initialEmail);
-  const [firstName, setFirstName] = useState('');
-  const [lastName, setLastName] = useState('');
-  const [phone, setPhone] = useState('');
-  const [error, setError] = useState<string | null>(null);
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-
-    if (!selectedId) {
-      setError(t('pickupLocationRequired'));
-      return;
-    }
-    if (!email.trim() || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
-      setError(tf('emailInvalid'));
-      return;
-    }
-
-    setError(null);
-    onSelect(selectedId, {
-      email: email.trim(),
-      firstName: firstName.trim() || undefined,
-      lastName: lastName.trim() || undefined,
-      phone: phone.trim() || undefined,
-    });
-  };
-
-  const inputClass =
-    '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';
-
-  return (
-    <form onSubmit={handleSubmit} className={cn('space-y-6', className)}>
-      {/* Pickup locations */}
-      <div className="space-y-3">
-        <p className="text-foreground text-sm font-medium">{t('selectPickupLocation')}</p>
-        {locations.map((loc) => {
-          const price = parseFloat(loc.price);
-          const isFree = price === 0;
-          const isSelected = selectedId === loc.id;
-
-          return (
-            <button
-              key={loc.id}
-              type="button"
-              onClick={() => {
-                setSelectedId(loc.id);
-                setError(null);
-              }}
-              className={cn(
-                'flex w-full items-start gap-4 rounded border px-4 py-3 text-start transition-colors',
-                isSelected
-                  ? 'border-primary bg-primary/5'
-                  : 'border-border hover:border-muted-foreground'
-              )}
-            >
-              {/* Radio indicator */}
-              <div
-                className={cn(
-                  'mt-0.5 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>
-
-              {/* Location info */}
-              <div className="min-w-0 flex-1">
-                <p className="text-foreground text-sm font-medium">{loc.name}</p>
-                <p className="text-muted-foreground mt-0.5 text-xs">
-                  {loc.address.line1}
-                  {loc.address.city && `, ${loc.address.city}`}
-                </p>
-                {loc.hours && <p className="text-muted-foreground mt-0.5 text-xs">{loc.hours}</p>}
-                {loc.instructions && (
-                  <p className="text-muted-foreground mt-1 text-xs italic">{loc.instructions}</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>
-
-      {/* Customer info */}
-      <div className="space-y-4">
-        <p className="text-foreground text-sm font-medium">{t('yourDetails')}</p>
-
-        <div>
-          <label htmlFor="pickup-email" className="text-foreground mb-1 block text-sm">
-            {tf('email')} <span className="text-destructive">*</span>
-          </label>
-          <input
-            id="pickup-email"
-            type="email"
-            value={email}
-            onChange={(e) => setEmail(e.target.value)}
-            className={cn(inputClass, 'border-border')}
-            placeholder="your@email.com"
-            required
-          />
-        </div>
-
-        <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">
-              {tf('firstName')}
-            </label>
-            <input
-              id="pickup-firstName"
-              type="text"
-              value={firstName}
-              onChange={(e) => setFirstName(e.target.value)}
-              className={cn(inputClass, 'border-border')}
-            />
-          </div>
-          <div>
-            <label htmlFor="pickup-lastName" className="text-foreground mb-1 block text-sm">
-              {tf('lastName')}
-            </label>
-            <input
-              id="pickup-lastName"
-              type="text"
-              value={lastName}
-              onChange={(e) => setLastName(e.target.value)}
-              className={cn(inputClass, 'border-border')}
-            />
-          </div>
-        </div>
-
-        <div>
-          <label htmlFor="pickup-phone" className="text-foreground mb-1 block text-sm">
-            {tf('phone')}
-          </label>
-          <input
-            id="pickup-phone"
-            type="tel"
-            value={phone}
-            onChange={(e) => setPhone(e.target.value)}
-            className={cn(inputClass, 'border-border')}
-            placeholder={tf('phonePlaceholder')}
-          />
-        </div>
-      </div>
-
-      {error && <p className="text-destructive text-sm">{error}</p>}
-
-      <button
-        type="submit"
-        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 ? tc('saving') : t('continueToPayment')}
-      </button>
-    </form>
-  );
-}
+'use client';
+
+import { useState } from 'react';
+import type { PickupLocation } from 'brainerce';
+import { formatPrice } from 'brainerce';
+import { useTranslations } from '@/core/lib/translations';
+import { useCurrency } from '@/core/lib/use-currency';
+import { cn } from '@/core/lib/utils';
+
+interface PickupStepProps {
+  locations: PickupLocation[];
+  onSelect: (
+    locationId: string,
+    customerInfo: { email: string; firstName?: string; lastName?: string; phone?: string }
+  ) => void;
+  loading?: boolean;
+  initialEmail?: string;
+  className?: string;
+}
+
+export function PickupStep({
+  locations,
+  onSelect,
+  loading = false,
+  initialEmail = '',
+  className,
+}: PickupStepProps) {
+  const t = useTranslations('checkout');
+  const tf = useTranslations('checkoutForm');
+  const tc = useTranslations('common');
+  const currency = useCurrency();
+
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [email, setEmail] = useState(initialEmail);
+  const [firstName, setFirstName] = useState('');
+  const [lastName, setLastName] = useState('');
+  const [phone, setPhone] = useState('');
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!selectedId) {
+      setError(t('pickupLocationRequired'));
+      return;
+    }
+    if (!email.trim() || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+      setError(tf('emailInvalid'));
+      return;
+    }
+
+    setError(null);
+    onSelect(selectedId, {
+      email: email.trim(),
+      firstName: firstName.trim() || undefined,
+      lastName: lastName.trim() || undefined,
+      phone: phone.trim() || undefined,
+    });
+  };
+
+  const inputClass =
+    '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';
+
+  return (
+    <form onSubmit={handleSubmit} className={cn('space-y-6', className)}>
+      {/* Pickup locations */}
+      <div className="space-y-3">
+        <p className="text-foreground text-sm font-medium">{t('selectPickupLocation')}</p>
+        {locations.map((loc) => {
+          const price = parseFloat(loc.price);
+          const isFree = price === 0;
+          const isSelected = selectedId === loc.id;
+
+          return (
+            <button
+              key={loc.id}
+              type="button"
+              onClick={() => {
+                setSelectedId(loc.id);
+                setError(null);
+              }}
+              className={cn(
+                'flex w-full items-start gap-4 rounded border px-4 py-3 text-start transition-colors',
+                isSelected
+                  ? 'border-primary bg-primary/5'
+                  : 'border-border hover:border-muted-foreground'
+              )}
+            >
+              {/* Radio indicator */}
+              <div
+                className={cn(
+                  'mt-0.5 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>
+
+              {/* Location info */}
+              <div className="min-w-0 flex-1">
+                <p className="text-foreground text-sm font-medium">{loc.name}</p>
+                <p className="text-muted-foreground mt-0.5 text-xs">
+                  {loc.address.line1}
+                  {loc.address.city && `, ${loc.address.city}`}
+                </p>
+                {loc.hours && <p className="text-muted-foreground mt-0.5 text-xs">{loc.hours}</p>}
+                {loc.instructions && (
+                  <p className="text-muted-foreground mt-1 text-xs italic">{loc.instructions}</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>
+
+      {/* Customer info */}
+      <div className="space-y-4">
+        <p className="text-foreground text-sm font-medium">{t('yourDetails')}</p>
+
+        <div>
+          <label htmlFor="pickup-email" className="text-foreground mb-1 block text-sm">
+            {tf('email')} <span className="text-destructive">*</span>
+          </label>
+          <input
+            id="pickup-email"
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            className={cn(inputClass, 'border-border')}
+            placeholder="your@email.com"
+            required
+          />
+        </div>
+
+        <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">
+              {tf('firstName')}
+            </label>
+            <input
+              id="pickup-firstName"
+              type="text"
+              value={firstName}
+              onChange={(e) => setFirstName(e.target.value)}
+              className={cn(inputClass, 'border-border')}
+            />
+          </div>
+          <div>
+            <label htmlFor="pickup-lastName" className="text-foreground mb-1 block text-sm">
+              {tf('lastName')}
+            </label>
+            <input
+              id="pickup-lastName"
+              type="text"
+              value={lastName}
+              onChange={(e) => setLastName(e.target.value)}
+              className={cn(inputClass, 'border-border')}
+            />
+          </div>
+        </div>
+
+        <div>
+          <label htmlFor="pickup-phone" className="text-foreground mb-1 block text-sm">
+            {tf('phone')}
+          </label>
+          <input
+            id="pickup-phone"
+            type="tel"
+            value={phone}
+            onChange={(e) => setPhone(e.target.value)}
+            className={cn(inputClass, 'border-border')}
+            placeholder={tf('phonePlaceholder')}
+          />
+        </div>
+      </div>
+
+      {error && <p className="text-destructive text-sm">{error}</p>}
+
+      <button
+        type="submit"
+        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 ? tc('saving') : t('continueToPayment')}
+      </button>
+    </form>
+  );
+}

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

@@ -1,125 +1,125 @@
-'use client';
-
-import type { ShippingRate } from 'brainerce';
-import { formatPrice } from 'brainerce';
-import { useTranslations } from '@/core/lib/translations';
-import { useCurrency } from '@/core/lib/use-currency';
-import { cn } from '@/core/lib/utils';
-
-interface ShippingStepProps {
-  rates: ShippingRate[];
-  selectedRateId: string | null;
-  onSelect: (rateId: string) => void;
-  loading?: boolean;
-  className?: string;
-}
-
-/**
- * Live carrier rates arrive labelled with the carrier's own service identifier
- * — `USPS PriorityMailInternational`, `USAExportPBA USAExportStandard` — which
- * answers a question no shopper asked. They are choosing between how fast and
- * how much, so we render `speedTier` in the store's own language instead.
- *
- * Manual zone rates carry no `speedTier`: the merchant named those deliberately,
- * so those keep `rate.name` exactly as written.
- */
-const TIER_KEYS = {
-  cheapest: 'shippingTierCheapest',
-  balanced: 'shippingTierBalanced',
-  fastest: 'shippingTierFastest',
-} as const;
-
-export function ShippingStep({
-  rates,
-  selectedRateId,
-  onSelect,
-  loading = false,
-  className,
-}: ShippingStepProps) {
-  const t = useTranslations('checkout');
-  const tc = useTranslations('common');
-  const currency = useCurrency();
-
-  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;
-        const label = rate.speedTier ? t(TIER_KEYS[rate.speedTier]) : rate.name;
-
-        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">{label}</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>
-  );
-}
+'use client';
+
+import type { ShippingRate } from 'brainerce';
+import { formatPrice } from 'brainerce';
+import { useTranslations } from '@/core/lib/translations';
+import { useCurrency } from '@/core/lib/use-currency';
+import { cn } from '@/core/lib/utils';
+
+interface ShippingStepProps {
+  rates: ShippingRate[];
+  selectedRateId: string | null;
+  onSelect: (rateId: string) => void;
+  loading?: boolean;
+  className?: string;
+}
+
+/**
+ * Live carrier rates arrive labelled with the carrier's own service identifier
+ * — `USPS PriorityMailInternational`, `USAExportPBA USAExportStandard` — which
+ * answers a question no shopper asked. They are choosing between how fast and
+ * how much, so we render `speedTier` in the store's own language instead.
+ *
+ * Manual zone rates carry no `speedTier`: the merchant named those deliberately,
+ * so those keep `rate.name` exactly as written.
+ */
+const TIER_KEYS = {
+  cheapest: 'shippingTierCheapest',
+  balanced: 'shippingTierBalanced',
+  fastest: 'shippingTierFastest',
+} as const;
+
+export function ShippingStep({
+  rates,
+  selectedRateId,
+  onSelect,
+  loading = false,
+  className,
+}: ShippingStepProps) {
+  const t = useTranslations('checkout');
+  const tc = useTranslations('common');
+  const currency = useCurrency();
+
+  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;
+        const label = rate.speedTier ? t(TIER_KEYS[rate.speedTier]) : rate.name;
+
+        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">{label}</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>
+  );
+}