create-brainerce-store 1.14.5 → 1.15.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.14.5",
+      version: "1.15.0",
       description: "Scaffold a production-ready e-commerce storefront connected to Brainerce",
       bin: {
         "create-brainerce-store": "dist/index.js"

package/messages/en.json

@@ -116,6 +116,8 @@
     "pickUpInStore": "Pick up in store",
     "pickUpInStoreDesc": "Collect from a pickup location",
     "shippingAddress": "Shipping Address",
+    "contactInfo": "Contact Information",
+    "stepContactInfo": "Contact",
     "changeMethod": "Change method",
     "editAddress": "Edit address",
     "shippingMethod": "Shipping Method",
@@ -168,6 +170,7 @@
     "phone": "Phone",
     "phonePlaceholder": "+1234567890 (optional)",
     "continueToShipping": "Continue to Shipping",
+    "continueToPayment": "Continue to Payment",
     "countryPlaceholder": "e.g. US, IL, GB",
     "emailRequired": "Email is required",
     "emailInvalid": "Please enter a valid email",
@@ -180,7 +183,8 @@
     "privacyAcceptPrefix": "I have read and agree to the",
     "privacyPolicyLink": "Privacy Policy",
     "privacyRequired": "You must accept the privacy policy to continue",
-    "acceptsMarketing": "Send me news, promotions, and updates by email"
+    "acceptsMarketing": "Send me news, promotions, and updates by email",
+    "saveDetailsForNextTime": "Save my details for faster checkout next time"
   },
   "auth": {
     "loginPageTitle": "Sign In",

package/messages/he.json

@@ -116,6 +116,8 @@
     "pickUpInStore": "איסוף מהחנות",
     "pickUpInStoreDesc": "איסוף מנקודת איסוף",
     "shippingAddress": "כתובת למשלוח",
+    "contactInfo": "פרטי קשר",
+    "stepContactInfo": "פרטי קשר",
     "changeMethod": "שנה שיטה",
     "editAddress": "ערוך כתובת",
     "shippingMethod": "שיטת משלוח",
@@ -168,6 +170,7 @@
     "phone": "טלפון",
     "phonePlaceholder": "+972501234567 (אופציונלי)",
     "continueToShipping": "המשך למשלוח",
+    "continueToPayment": "המשך לתשלום",
     "countryPlaceholder": "לדוגמה: IL, US, GB",
     "emailRequired": "אימייל הוא שדה חובה",
     "emailInvalid": "כתובת אימייל לא תקינה",
@@ -180,7 +183,8 @@
     "privacyAcceptPrefix": "קראתי ואני מסכים/ה ל",
     "privacyPolicyLink": "מדיניות הפרטיות",
     "privacyRequired": "יש לאשר את מדיניות הפרטיות כדי להמשיך",
-    "acceptsMarketing": "שלחו לי חדשות, מבצעים ועדכונים במייל"
+    "acceptsMarketing": "שלחו לי חדשות, מבצעים ועדכונים במייל",
+    "saveDetailsForNextTime": "שמרו את הפרטים שלי לתשלום מהיר בפעם הבאה"
   },
   "auth": {
     "loginPageTitle": "התחברות",

package/package.json

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

package/templates/nextjs/base/src/app/checkout/page.tsx

@@ -36,7 +36,6 @@ function CheckoutContent() {
   const currency = storeInfo?.currency || 'USD';
   const t = useTranslations('checkout');
   const tc = useTranslations('common');
-  const tAddr = useTranslations('checkoutAddress');
 
   const [step, setStep] = useState<CheckoutStep>('address');
   const [checkout, setCheckout] = useState<Checkout | null>(null);
@@ -50,23 +49,29 @@ function CheckoutContent() {
   const [deliveryType, setDeliveryType] = useState<'shipping' | 'pickup'>('shipping');
   const [isAllDigital, setIsAllDigital] = useState(false);
   const [prefillAddress, setPrefillAddress] = useState<SetShippingAddressDto | null>(null);
-  const [lastSubmittedAddress, setLastSubmittedAddress] = useState<SetShippingAddressDto | null>(
-    null
-  );
-  const [showSavePrompt, setShowSavePrompt] = useState(false);
-  const [savingAddress, setSavingAddress] = useState(false);
+  const [prefillCustomer, setPrefillCustomer] = useState<{
+    email: string;
+    firstName?: string;
+    lastName?: string;
+    phone?: string;
+  } | null>(null);
+  const [hasSavedAddress, setHasSavedAddress] = useState(false);
 
   // Check for returning from canceled payment
   const canceled = searchParams.get('canceled') === 'true';
   const existingCheckoutId = searchParams.get('checkout_id');
 
-  // Pre-fill address from customer profile when logged in
+  // Pre-fill address and customer data from profile when logged in
   useEffect(() => {
     if (!isLoggedIn) return;
     getClient()
       .getCheckoutPrefillData()
       .then((data) => {
-        if (data.shippingAddress) setPrefillAddress(data.shippingAddress);
+        if (data.customer) setPrefillCustomer(data.customer);
+        if (data.shippingAddress) {
+          setPrefillAddress(data.shippingAddress);
+          setHasSavedAddress(true);
+        }
       })
       .catch(() => {});
   }, [isLoggedIn]);
@@ -98,7 +103,8 @@ function CheckoutContent() {
         );
         setIsAllDigital(allDigital);
         if (allDigital) {
-          setStep('payment');
+          // Digital products: show contact info step if email not set, else payment
+          setStep(existing.email ? 'payment' : 'address');
         } else if (existing.deliveryType === 'pickup' && existing.pickupLocation) {
           setDeliveryType('pickup');
           setStep('payment');
@@ -120,13 +126,13 @@ function CheckoutContent() {
         const newCheckout = await client.createCheckout({ cartId: cart.id });
         setCheckout(newCheckout);
 
-        // If all items are downloadable, skip shipping entirely
+        // If all items are downloadable, skip shipping — show contact info step
         const allDigital = newCheckout.lineItems.every(
           (i) => (i.product as unknown as { isDownloadable?: boolean }).isDownloadable
         );
         setIsAllDigital(allDigital);
         if (allDigital) {
-          setStep('payment');
+          setStep('address');
           return;
         }
       } else {
@@ -155,7 +161,7 @@ function CheckoutContent() {
   // Handle shipping address submission
   async function handleAddressSubmit(
     address: SetShippingAddressDto,
-    consent: { acceptsMarketing: boolean }
+    consent: { acceptsMarketing: boolean; saveDetails: boolean }
   ) {
     if (!checkout) return;
 
@@ -164,9 +170,23 @@ function CheckoutContent() {
       setError(null);
       const client = getClient();
 
-      const response = await client.setShippingAddress(checkout.id, address);
-      setCheckout(response.checkout);
-      setShippingRates(response.rates);
+      if (isAllDigital) {
+        // Digital products: set customer info only, skip shipping
+        const updated = await client.setCheckoutCustomer(checkout.id, {
+          email: address.email,
+          firstName: address.firstName,
+          lastName: address.lastName,
+          phone: address.phone,
+          acceptsMarketing: consent.acceptsMarketing,
+        });
+        setCheckout(updated);
+        setStep('payment');
+      } else {
+        const response = await client.setShippingAddress(checkout.id, address);
+        setCheckout(response.checkout);
+        setShippingRates(response.rates);
+        setStep('shipping');
+      }
 
       // Update marketing preference for logged-in users
       if (isLoggedIn) {
@@ -177,13 +197,25 @@ function CheckoutContent() {
         }
       }
 
-      // Offer to save address to profile if logged in and no prefill (new address)
-      if (isLoggedIn && !prefillAddress) {
-        setLastSubmittedAddress(address);
-        setShowSavePrompt(true);
+      // Save address to profile if checkbox was checked and no existing saved address
+      if (isLoggedIn && consent.saveDetails && !hasSavedAddress && !isAllDigital) {
+        try {
+          await client.addMyAddress({
+            firstName: address.firstName,
+            lastName: address.lastName,
+            line1: address.line1,
+            line2: address.line2,
+            city: address.city,
+            region: address.region,
+            postalCode: address.postalCode,
+            country: address.country,
+            phone: address.phone,
+            isDefault: true,
+          });
+        } catch {
+          // non-critical
+        }
       }
-
-      setStep('shipping');
     } catch (err) {
       const message = err instanceof Error ? err.message : t('failedToSaveAddress');
       setError(message);
@@ -192,30 +224,6 @@ function CheckoutContent() {
     }
   }
 
-  async function handleSaveAddressToProfile() {
-    if (!lastSubmittedAddress) return;
-    setSavingAddress(true);
-    try {
-      await getClient().addMyAddress({
-        firstName: lastSubmittedAddress.firstName,
-        lastName: lastSubmittedAddress.lastName,
-        line1: lastSubmittedAddress.line1,
-        line2: lastSubmittedAddress.line2,
-        city: lastSubmittedAddress.city,
-        region: lastSubmittedAddress.region,
-        postalCode: lastSubmittedAddress.postalCode,
-        country: lastSubmittedAddress.country,
-        phone: lastSubmittedAddress.phone,
-        isDefault: true,
-      });
-    } catch {
-      // ignore
-    } finally {
-      setSavingAddress(false);
-      setShowSavePrompt(false);
-    }
-  }
-
   // Handle shipping method selection
   async function handleShippingSelect(rateId: string) {
     if (!checkout) return;
@@ -345,7 +353,10 @@ function CheckoutContent() {
   }
 
   const steps: { key: CheckoutStep; label: string }[] = isAllDigital
-    ? [{ key: 'payment', label: t('stepPayment') }]
+    ? [
+        { key: 'address', label: t('stepContactInfo') },
+        { key: 'payment', label: t('stepPayment') },
+      ]
     : pickupLocations.length > 0
       ? deliveryType === 'pickup'
         ? [
@@ -456,8 +467,10 @@ function CheckoutContent() {
           {step === 'address' && (
             <div>
               <div className="mb-4 flex items-center justify-between">
-                <h2 className="text-foreground text-lg font-semibold">{t('shippingAddress')}</h2>
-                {pickupLocations.length > 0 && (
+                <h2 className="text-foreground text-lg font-semibold">
+                  {isAllDigital ? t('contactInfo') : t('shippingAddress')}
+                </h2>
+                {!isAllDigital && pickupLocations.length > 0 && (
                   <button
                     type="button"
                     onClick={() => setStep('method')}
@@ -467,33 +480,12 @@ function CheckoutContent() {
                   </button>
                 )}
               </div>
-              {/* Save-to-profile prompt */}
-              {showSavePrompt && (
-                <div className="border-border bg-muted/50 mb-4 flex items-center justify-between gap-3 rounded-lg border px-4 py-3 text-sm">
-                  <span className="text-foreground">{tAddr('saveToProfile')}</span>
-                  <div className="flex gap-2">
-                    <button
-                      type="button"
-                      onClick={handleSaveAddressToProfile}
-                      disabled={savingAddress}
-                      className="bg-primary text-primary-foreground rounded px-3 py-1 text-xs font-medium transition-opacity hover:opacity-90 disabled:opacity-50"
-                    >
-                      {savingAddress ? '...' : tAddr('saveYes')}
-                    </button>
-                    <button
-                      type="button"
-                      onClick={() => setShowSavePrompt(false)}
-                      className="text-muted-foreground hover:text-foreground rounded px-3 py-1 text-xs transition-colors"
-                    >
-                      {tAddr('saveNo')}
-                    </button>
-                  </div>
-                </div>
-              )}
               <CheckoutForm
                 onSubmit={handleAddressSubmit}
                 loading={loading}
-                destinations={destinations}
+                destinations={isAllDigital ? null : destinations}
+                showSaveDetails={isLoggedIn && !hasSavedAddress && !isAllDigital}
+                emailOnly={isAllDigital}
                 initialValues={
                   checkout?.shippingAddress
                     ? {
@@ -521,7 +513,14 @@ function CheckoutContent() {
                           country: prefillAddress.country,
                           phone: prefillAddress.phone || '',
                         }
-                      : undefined
+                      : prefillCustomer
+                        ? {
+                            email: prefillCustomer.email,
+                            firstName: prefillCustomer.firstName || '',
+                            lastName: prefillCustomer.lastName || '',
+                            phone: prefillCustomer.phone || '',
+                          }
+                        : undefined
                 }
               />
             </div>

package/templates/nextjs/base/src/components/checkout/checkout-form.tsx

@@ -1,12 +1,13 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import type { SetShippingAddressDto, ShippingDestinations } from 'brainerce';
 import { useTranslations } from '@/lib/translations';
 import { cn } from '@/lib/utils';
 
 interface CheckoutConsent {
   acceptsMarketing: boolean;
+  saveDetails: boolean;
 }
 
 interface CheckoutFormProps {
@@ -15,6 +16,8 @@ interface CheckoutFormProps {
   initialValues?: Partial<SetShippingAddressDto>;
   destinations?: ShippingDestinations | null;
   className?: string;
+  showSaveDetails?: boolean;
+  emailOnly?: boolean;
 }
 
 export function CheckoutForm({
@@ -23,6 +26,8 @@ export function CheckoutForm({
   initialValues,
   destinations,
   className,
+  showSaveDetails = false,
+  emailOnly = false,
 }: CheckoutFormProps) {
   const [formData, setFormData] = useState<SetShippingAddressDto>({
     email: initialValues?.email || '',
@@ -39,8 +44,28 @@ export function CheckoutForm({
   const [errors, setErrors] = useState<Record<string, string>>({});
   const [privacyAccepted, setPrivacyAccepted] = useState(false);
   const [acceptsMarketing, setAcceptsMarketing] = useState(false);
+  const [saveDetails, setSaveDetails] = useState(true);
   const t = useTranslations('checkoutForm');
   const tc = useTranslations('common');
+  const hasAppliedPrefill = useRef(!!initialValues);
+
+  // Sync prefill data when it arrives async (e.g. from getCheckoutPrefillData)
+  useEffect(() => {
+    if (!initialValues || hasAppliedPrefill.current) return;
+    hasAppliedPrefill.current = true;
+    setFormData((prev) => ({
+      email: initialValues.email || prev.email,
+      firstName: initialValues.firstName || prev.firstName,
+      lastName: initialValues.lastName || prev.lastName,
+      line1: initialValues.line1 || prev.line1,
+      line2: initialValues.line2 || prev.line2 || '',
+      city: initialValues.city || prev.city,
+      region: initialValues.region || prev.region || '',
+      postalCode: initialValues.postalCode || prev.postalCode,
+      country: initialValues.country || prev.country,
+      phone: initialValues.phone || prev.phone || '',
+    }));
+  }, [initialValues]);
 
   const hasCountryOptions = destinations && destinations.countries.length > 0;
   const countryRegions = destinations?.regions[formData.country];
@@ -61,17 +86,19 @@ export function CheckoutForm({
     if (!formData.lastName.trim()) {
       newErrors.lastName = t('lastNameRequired');
     }
-    if (!formData.line1.trim()) {
-      newErrors.line1 = t('addressRequired');
-    }
-    if (!formData.city.trim()) {
-      newErrors.city = t('cityRequired');
-    }
-    if (!formData.postalCode.trim()) {
-      newErrors.postalCode = t('postalCodeRequired');
-    }
-    if (!formData.country.trim()) {
-      newErrors.country = t('countryRequired');
+    if (!emailOnly) {
+      if (!formData.line1.trim()) {
+        newErrors.line1 = t('addressRequired');
+      }
+      if (!formData.city.trim()) {
+        newErrors.city = t('cityRequired');
+      }
+      if (!formData.postalCode.trim()) {
+        newErrors.postalCode = t('postalCodeRequired');
+      }
+      if (!formData.country.trim()) {
+        newErrors.country = t('countryRequired');
+      }
     }
     if (!privacyAccepted) {
       newErrors.privacy = t('privacyRequired');
@@ -84,7 +111,7 @@ export function CheckoutForm({
   function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
     if (validate()) {
-      onSubmit(formData, { acceptsMarketing });
+      onSubmit(formData, { acceptsMarketing, saveDetails: showSaveDetails && saveDetails });
     }
   }
 
@@ -160,147 +187,163 @@ export function CheckoutForm({
         </div>
       </div>
 
-      {/* Country + Region row */}
-      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-        <div>
-          <label htmlFor="country" className="text-foreground mb-1 block text-sm font-medium">
-            {t('country')} <span className="text-destructive">*</span>
-          </label>
-          {hasCountryOptions ? (
-            <select
-              id="country"
-              value={formData.country}
-              onChange={(e) => updateField('country', e.target.value)}
-              className={cn(selectClass, errors.country ? 'border-destructive' : 'border-border')}
-            >
-              <option value="">{t('selectCountry')}</option>
-              {destinations.countries.map((c) => (
-                <option key={c.code} value={c.code}>
-                  {c.name}
-                </option>
-              ))}
-            </select>
-          ) : (
+      {!emailOnly && (
+        <>
+          {/* Country + Region row */}
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+            <div>
+              <label htmlFor="country" className="text-foreground mb-1 block text-sm font-medium">
+                {t('country')} <span className="text-destructive">*</span>
+              </label>
+              {hasCountryOptions ? (
+                <select
+                  id="country"
+                  value={formData.country}
+                  onChange={(e) => updateField('country', e.target.value)}
+                  className={cn(
+                    selectClass,
+                    errors.country ? 'border-destructive' : 'border-border'
+                  )}
+                >
+                  <option value="">{t('selectCountry')}</option>
+                  {destinations.countries.map((c) => (
+                    <option key={c.code} value={c.code}>
+                      {c.name}
+                    </option>
+                  ))}
+                </select>
+              ) : (
+                <input
+                  id="country"
+                  type="text"
+                  value={formData.country}
+                  onChange={(e) => updateField('country', e.target.value)}
+                  className={cn(
+                    inputClass,
+                    errors.country ? 'border-destructive' : 'border-border'
+                  )}
+                  placeholder={t('countryPlaceholder')}
+                />
+              )}
+              {errors.country && <p className="text-destructive mt-1 text-xs">{errors.country}</p>}
+            </div>
+
+            <div>
+              <label htmlFor="region" className="text-foreground mb-1 block text-sm font-medium">
+                {t('stateRegion')}
+              </label>
+              {hasRegionOptions ? (
+                <select
+                  id="region"
+                  value={formData.region || ''}
+                  onChange={(e) => updateField('region', e.target.value)}
+                  className={cn(selectClass, 'border-border')}
+                >
+                  <option value="">{t('selectRegion')}</option>
+                  {countryRegions.map((r) => (
+                    <option key={r.code} value={r.code}>
+                      {r.name}
+                    </option>
+                  ))}
+                </select>
+              ) : (
+                <input
+                  id="region"
+                  type="text"
+                  value={formData.region || ''}
+                  onChange={(e) => updateField('region', e.target.value)}
+                  className={cn(inputClass, 'border-border')}
+                />
+              )}
+            </div>
+          </div>
+
+          {/* Address line 1 */}
+          <div>
+            <label htmlFor="line1" className="text-foreground mb-1 block text-sm font-medium">
+              {t('address')} <span className="text-destructive">*</span>
+            </label>
             <input
-              id="country"
+              id="line1"
               type="text"
-              value={formData.country}
-              onChange={(e) => updateField('country', e.target.value)}
-              className={cn(inputClass, errors.country ? 'border-destructive' : 'border-border')}
-              placeholder={t('countryPlaceholder')}
+              value={formData.line1}
+              onChange={(e) => updateField('line1', e.target.value)}
+              className={cn(inputClass, errors.line1 ? 'border-destructive' : 'border-border')}
+              placeholder={t('streetAddress')}
             />
-          )}
-          {errors.country && <p className="text-destructive mt-1 text-xs">{errors.country}</p>}
-        </div>
+            {errors.line1 && <p className="text-destructive mt-1 text-xs">{errors.line1}</p>}
+          </div>
 
-        <div>
-          <label htmlFor="region" className="text-foreground mb-1 block text-sm font-medium">
-            {t('stateRegion')}
-          </label>
-          {hasRegionOptions ? (
-            <select
-              id="region"
-              value={formData.region || ''}
-              onChange={(e) => updateField('region', e.target.value)}
-              className={cn(selectClass, 'border-border')}
-            >
-              <option value="">{t('selectRegion')}</option>
-              {countryRegions.map((r) => (
-                <option key={r.code} value={r.code}>
-                  {r.name}
-                </option>
-              ))}
-            </select>
-          ) : (
+          {/* Address line 2 */}
+          <div>
+            <label htmlFor="line2" className="text-foreground mb-1 block text-sm font-medium">
+              {t('apartmentSuite')}
+            </label>
             <input
-              id="region"
+              id="line2"
               type="text"
-              value={formData.region || ''}
-              onChange={(e) => updateField('region', e.target.value)}
+              value={formData.line2 || ''}
+              onChange={(e) => updateField('line2', e.target.value)}
               className={cn(inputClass, 'border-border')}
+              placeholder={t('aptPlaceholder')}
             />
-          )}
-        </div>
-      </div>
+          </div>
 
-      {/* Address line 1 */}
-      <div>
-        <label htmlFor="line1" className="text-foreground mb-1 block text-sm font-medium">
-          {t('address')} <span className="text-destructive">*</span>
-        </label>
-        <input
-          id="line1"
-          type="text"
-          value={formData.line1}
-          onChange={(e) => updateField('line1', e.target.value)}
-          className={cn(inputClass, errors.line1 ? 'border-destructive' : 'border-border')}
-          placeholder={t('streetAddress')}
-        />
-        {errors.line1 && <p className="text-destructive mt-1 text-xs">{errors.line1}</p>}
-      </div>
+          {/* City + Postal code row */}
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+            <div>
+              <label htmlFor="city" className="text-foreground mb-1 block text-sm font-medium">
+                {t('city')} <span className="text-destructive">*</span>
+              </label>
+              <input
+                id="city"
+                type="text"
+                value={formData.city}
+                onChange={(e) => updateField('city', e.target.value)}
+                className={cn(inputClass, errors.city ? 'border-destructive' : 'border-border')}
+              />
+              {errors.city && <p className="text-destructive mt-1 text-xs">{errors.city}</p>}
+            </div>
 
-      {/* Address line 2 */}
-      <div>
-        <label htmlFor="line2" className="text-foreground mb-1 block text-sm font-medium">
-          {t('apartmentSuite')}
-        </label>
-        <input
-          id="line2"
-          type="text"
-          value={formData.line2 || ''}
-          onChange={(e) => updateField('line2', e.target.value)}
-          className={cn(inputClass, 'border-border')}
-          placeholder={t('aptPlaceholder')}
-        />
-      </div>
+            <div>
+              <label
+                htmlFor="postalCode"
+                className="text-foreground mb-1 block text-sm font-medium"
+              >
+                {t('postalCode')} <span className="text-destructive">*</span>
+              </label>
+              <input
+                id="postalCode"
+                type="text"
+                value={formData.postalCode}
+                onChange={(e) => updateField('postalCode', e.target.value)}
+                className={cn(
+                  inputClass,
+                  errors.postalCode ? 'border-destructive' : 'border-border'
+                )}
+              />
+              {errors.postalCode && (
+                <p className="text-destructive mt-1 text-xs">{errors.postalCode}</p>
+              )}
+            </div>
+          </div>
 
-      {/* City + Postal code row */}
-      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-        <div>
-          <label htmlFor="city" className="text-foreground mb-1 block text-sm font-medium">
-            {t('city')} <span className="text-destructive">*</span>
-          </label>
-          <input
-            id="city"
-            type="text"
-            value={formData.city}
-            onChange={(e) => updateField('city', e.target.value)}
-            className={cn(inputClass, errors.city ? 'border-destructive' : 'border-border')}
-          />
-          {errors.city && <p className="text-destructive mt-1 text-xs">{errors.city}</p>}
-        </div>
-
-        <div>
-          <label htmlFor="postalCode" className="text-foreground mb-1 block text-sm font-medium">
-            {t('postalCode')} <span className="text-destructive">*</span>
-          </label>
-          <input
-            id="postalCode"
-            type="text"
-            value={formData.postalCode}
-            onChange={(e) => updateField('postalCode', e.target.value)}
-            className={cn(inputClass, errors.postalCode ? 'border-destructive' : 'border-border')}
-          />
-          {errors.postalCode && (
-            <p className="text-destructive mt-1 text-xs">{errors.postalCode}</p>
-          )}
-        </div>
-      </div>
-
-      {/* Phone */}
-      <div>
-        <label htmlFor="phone" className="text-foreground mb-1 block text-sm font-medium">
-          {t('phone')}
-        </label>
-        <input
-          id="phone"
-          type="tel"
-          value={formData.phone || ''}
-          onChange={(e) => updateField('phone', e.target.value)}
-          className={cn(inputClass, 'border-border')}
-          placeholder={t('phonePlaceholder')}
-        />
-      </div>
+          {/* Phone */}
+          <div>
+            <label htmlFor="phone" className="text-foreground mb-1 block text-sm font-medium">
+              {t('phone')}
+            </label>
+            <input
+              id="phone"
+              type="tel"
+              value={formData.phone || ''}
+              onChange={(e) => updateField('phone', e.target.value)}
+              className={cn(inputClass, 'border-border')}
+              placeholder={t('phonePlaceholder')}
+            />
+          </div>
+        </>
+      )}
 
       {/* Privacy Policy (required) */}
       <div>
@@ -347,12 +390,25 @@ export function CheckoutForm({
         <span className="text-muted-foreground text-sm">{t('acceptsMarketing')}</span>
       </label>
 
+      {/* Save details for next time (logged-in users only) */}
+      {showSaveDetails && (
+        <label className="flex cursor-pointer items-start gap-2">
+          <input
+            type="checkbox"
+            checked={saveDetails}
+            onChange={(e) => setSaveDetails(e.target.checked)}
+            className="accent-primary mt-0.5"
+          />
+          <span className="text-muted-foreground text-sm">{t('saveDetailsForNextTime')}</span>
+        </label>
+      )}
+
       <button
         type="submit"
         disabled={loading}
         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('continueToShipping')}
+        {loading ? tc('saving') : emailOnly ? t('continueToPayment') : t('continueToShipping')}
       </button>
     </form>
   );

package/templates/nextjs/base/src/components/products/variant-selector.tsx

@@ -1,147 +1,277 @@
-'use client';
-
-import { useMemo } from 'react';
-import type { Product, ProductVariant } from 'brainerce';
-import { getVariantOptions, getStockStatus, formatPrice } from 'brainerce';
-import { useStoreInfo } from '@/providers/store-provider';
-import { cn } from '@/lib/utils';
-
-interface VariantSelectorProps {
-  product: Product;
-  selectedVariant: ProductVariant | null;
-  onVariantChange: (variant: ProductVariant) => void;
-  className?: string;
-}
-
-interface AttributeGroup {
-  name: string;
-  values: Array<{
-    value: string;
-    variants: ProductVariant[];
-  }>;
-}
-
-export function VariantSelector({
-  product,
-  selectedVariant,
-  onVariantChange,
-  className,
-}: VariantSelectorProps) {
-  const { storeInfo } = useStoreInfo();
-  const currency = storeInfo?.currency || 'USD';
-  const variants = useMemo(() => product.variants || [], [product.variants]);
-
-  // Build attribute groups from product attribute options or variant data
-  const attributeGroups = useMemo<AttributeGroup[]>(() => {
-    const groups = new Map<string, Map<string, ProductVariant[]>>();
-
-    for (const variant of variants) {
-      const options = getVariantOptions(variant);
-      for (const { name, value } of options) {
-        if (!groups.has(name)) {
-          groups.set(name, new Map());
-        }
-        const valuesMap = groups.get(name)!;
-        if (!valuesMap.has(value)) {
-          valuesMap.set(value, []);
-        }
-        valuesMap.get(value)!.push(variant);
-      }
-    }
-
-    return Array.from(groups.entries()).map(([name, valuesMap]) => ({
-      name,
-      values: Array.from(valuesMap.entries()).map(([value, variantList]) => ({
-        value,
-        variants: variantList,
-      })),
-    }));
-  }, [variants]);
-
-  // Get currently selected attribute values
-  const selectedOptions = useMemo(() => {
-    if (!selectedVariant) return new Map<string, string>();
-    const opts = getVariantOptions(selectedVariant);
-    return new Map(opts.map(({ name, value }) => [name, value]));
-  }, [selectedVariant]);
-
-  // Find the variant that matches all selected attributes
-  function findMatchingVariant(
-    attributeName: string,
-    newValue: string
-  ): ProductVariant | undefined {
-    const nextSelection = new Map(selectedOptions);
-    nextSelection.set(attributeName, newValue);
-
-    return variants.find((v) => {
-      const opts = getVariantOptions(v);
-      return Array.from(nextSelection.entries()).every(([name, value]) =>
-        opts.some((o) => o.name === name && o.value === value)
-      );
-    });
-  }
-
-  if (attributeGroups.length === 0) return null;
-
-  return (
-    <div className={cn('space-y-4', className)}>
-      {attributeGroups.map((group) => (
-        <div key={group.name}>
-          <label className="text-foreground mb-2 block text-sm font-medium">
-            {group.name}
-            {selectedOptions.get(group.name) && (
-              <span className="text-muted-foreground ms-1 font-normal">
-                : {selectedOptions.get(group.name)}
-              </span>
-            )}
-          </label>
-          <div className="flex flex-wrap gap-2">
-            {group.values.map(({ value, variants: matchingVariants }) => {
-              const isSelected = selectedOptions.get(group.name) === value;
-              const matchedVariant = findMatchingVariant(group.name, value);
-              const isAvailable = matchedVariant?.inventory?.canPurchase !== false;
-
-              return (
-                <button
-                  key={value}
-                  type="button"
-                  disabled={!isAvailable}
-                  onClick={() => {
-                    const variant = matchedVariant || matchingVariants[0];
-                    if (variant) onVariantChange(variant);
-                  }}
-                  className={cn(
-                    'rounded border px-4 py-2 text-sm transition-colors',
-                    isSelected
-                      ? 'border-primary bg-primary text-primary-foreground'
-                      : isAvailable
-                        ? 'border-border bg-background text-foreground hover:border-primary'
-                        : 'border-border bg-muted text-muted-foreground cursor-not-allowed line-through opacity-50'
-                  )}
-                >
-                  {value}
-                </button>
-              );
-            })}
-          </div>
-        </div>
-      ))}
-
-      {/* Variant-specific info */}
-      {selectedVariant && (
-        <div className="text-muted-foreground flex items-center gap-3 pt-1 text-sm">
-          {selectedVariant.price && (
-            <span>
-              {
-                formatPrice(selectedVariant.salePrice || selectedVariant.price, {
-                  currency,
-                }) as string
-              }
-            </span>
-          )}
-          <span>{getStockStatus(selectedVariant.inventory)}</span>
-        </div>
-      )}
-    </div>
-  );
-}
+'use client';
+
+import { useMemo } from 'react';
+import type { Product, ProductVariant } from 'brainerce';
+import { getVariantOptions, getProductSwatches, getStockStatus, formatPrice } from 'brainerce';
+import { useStoreInfo } from '@/providers/store-provider';
+import { cn } from '@/lib/utils';
+
+interface VariantSelectorProps {
+  product: Product;
+  selectedVariant: ProductVariant | null;
+  onVariantChange: (variant: ProductVariant) => void;
+  className?: string;
+}
+
+interface AttributeGroup {
+  name: string;
+  displayType: string;
+  values: Array<{
+    value: string;
+    swatchColor?: string | null;
+    swatchColor2?: string | null;
+    swatchImageUrl?: string | null;
+    variants: ProductVariant[];
+  }>;
+}
+
+export function VariantSelector({
+  product,
+  selectedVariant,
+  onVariantChange,
+  className,
+}: VariantSelectorProps) {
+  const { storeInfo } = useStoreInfo();
+  const currency = storeInfo?.currency || 'USD';
+  const variants = useMemo(() => product.variants || [], [product.variants]);
+
+  // Get swatch metadata from product attribute options
+  const swatchData = useMemo(() => getProductSwatches(product), [product]);
+  const swatchMap = useMemo(() => {
+    const map = new Map<
+      string,
+      {
+        displayType: string;
+        options: Map<
+          string,
+          {
+            swatchColor?: string | null;
+            swatchColor2?: string | null;
+            swatchImageUrl?: string | null;
+          }
+        >;
+      }
+    >();
+    for (const attr of swatchData) {
+      const optMap = new Map<
+        string,
+        {
+          swatchColor?: string | null;
+          swatchColor2?: string | null;
+          swatchImageUrl?: string | null;
+        }
+      >();
+      for (const opt of attr.options) {
+        optMap.set(opt.name, {
+          swatchColor: opt.swatchColor,
+          swatchColor2: opt.swatchColor2,
+          swatchImageUrl: opt.swatchImageUrl,
+        });
+      }
+      map.set(attr.attributeName, { displayType: attr.displayType, options: optMap });
+    }
+    return map;
+  }, [swatchData]);
+
+  // Build attribute groups from variant data, enriched with swatch info
+  const attributeGroups = useMemo<AttributeGroup[]>(() => {
+    const groups = new Map<string, Map<string, ProductVariant[]>>();
+
+    for (const variant of variants) {
+      const options = getVariantOptions(variant);
+      for (const { name, value } of options) {
+        if (!groups.has(name)) {
+          groups.set(name, new Map());
+        }
+        const valuesMap = groups.get(name)!;
+        if (!valuesMap.has(value)) {
+          valuesMap.set(value, []);
+        }
+        valuesMap.get(value)!.push(variant);
+      }
+    }
+
+    return Array.from(groups.entries()).map(([name, valuesMap]) => {
+      const attrSwatch = swatchMap.get(name);
+      return {
+        name,
+        displayType: attrSwatch?.displayType || 'DROPDOWN',
+        values: Array.from(valuesMap.entries()).map(([value, variantList]) => {
+          const optSwatch = attrSwatch?.options.get(value);
+          return {
+            value,
+            swatchColor: optSwatch?.swatchColor,
+            swatchColor2: optSwatch?.swatchColor2,
+            swatchImageUrl: optSwatch?.swatchImageUrl,
+            variants: variantList,
+          };
+        }),
+      };
+    });
+  }, [variants, swatchMap]);
+
+  // Get currently selected attribute values
+  const selectedOptions = useMemo(() => {
+    if (!selectedVariant) return new Map<string, string>();
+    const opts = getVariantOptions(selectedVariant);
+    return new Map(opts.map(({ name, value }) => [name, value]));
+  }, [selectedVariant]);
+
+  // Find the variant that matches all selected attributes
+  function findMatchingVariant(
+    attributeName: string,
+    newValue: string
+  ): ProductVariant | undefined {
+    const nextSelection = new Map(selectedOptions);
+    nextSelection.set(attributeName, newValue);
+
+    return variants.find((v) => {
+      const opts = getVariantOptions(v);
+      return Array.from(nextSelection.entries()).every(([name, value]) =>
+        opts.some((o) => o.name === name && o.value === value)
+      );
+    });
+  }
+
+  if (attributeGroups.length === 0) return null;
+
+  return (
+    <div className={cn('space-y-4', className)}>
+      {attributeGroups.map((group) => (
+        <div key={group.name}>
+          <label className="text-foreground mb-2 block text-sm font-medium">
+            {group.name}
+            {selectedOptions.get(group.name) && (
+              <span className="text-muted-foreground ms-1 font-normal">
+                : {selectedOptions.get(group.name)}
+              </span>
+            )}
+          </label>
+          <div className="flex flex-wrap gap-2">
+            {group.values.map(
+              ({
+                value,
+                swatchColor,
+                swatchColor2,
+                swatchImageUrl,
+                variants: matchingVariants,
+              }) => {
+                const isSelected = selectedOptions.get(group.name) === value;
+                const matchedVariant = findMatchingVariant(group.name, value);
+                const isAvailable = matchedVariant?.inventory?.canPurchase !== false;
+
+                // Color swatch rendering
+                if (group.displayType === 'COLOR_SWATCH' && swatchColor) {
+                  return (
+                    <button
+                      key={value}
+                      type="button"
+                      disabled={!isAvailable}
+                      title={value}
+                      onClick={() => {
+                        const variant = matchedVariant || matchingVariants[0];
+                        if (variant) onVariantChange(variant);
+                      }}
+                      className={cn(
+                        'h-9 w-9 rounded-full border-2 transition-all',
+                        isSelected
+                          ? 'border-primary ring-primary/30 ring-2'
+                          : isAvailable
+                            ? 'border-border hover:border-primary'
+                            : 'cursor-not-allowed opacity-40'
+                      )}
+                      style={{
+                        background: swatchColor2
+                          ? `linear-gradient(135deg, ${swatchColor} 50%, ${swatchColor2} 50%)`
+                          : swatchColor,
+                      }}
+                    >
+                      {!isAvailable && (
+                        <span
+                          className="bg-muted-foreground block h-full w-full rounded-full opacity-50"
+                          style={{
+                            backgroundImage:
+                              'linear-gradient(135deg, transparent 45%, currentColor 45%, currentColor 55%, transparent 55%)',
+                          }}
+                        />
+                      )}
+                    </button>
+                  );
+                }
+
+                // Image swatch rendering
+                if (group.displayType === 'IMAGE_SWATCH' && swatchImageUrl) {
+                  return (
+                    <button
+                      key={value}
+                      type="button"
+                      disabled={!isAvailable}
+                      title={value}
+                      onClick={() => {
+                        const variant = matchedVariant || matchingVariants[0];
+                        if (variant) onVariantChange(variant);
+                      }}
+                      className={cn(
+                        'h-10 w-10 overflow-hidden rounded-lg border-2 transition-all',
+                        isSelected
+                          ? 'border-primary ring-primary/30 ring-2'
+                          : isAvailable
+                            ? 'border-border hover:border-primary'
+                            : 'cursor-not-allowed opacity-40'
+                      )}
+                    >
+                      <img
+                        src={swatchImageUrl}
+                        alt={value}
+                        className="h-full w-full object-cover"
+                      />
+                    </button>
+                  );
+                }
+
+                // Default button rendering (BUTTON, DROPDOWN, or fallback)
+                return (
+                  <button
+                    key={value}
+                    type="button"
+                    disabled={!isAvailable}
+                    onClick={() => {
+                      const variant = matchedVariant || matchingVariants[0];
+                      if (variant) onVariantChange(variant);
+                    }}
+                    className={cn(
+                      'rounded border px-4 py-2 text-sm transition-colors',
+                      isSelected
+                        ? 'border-primary bg-primary text-primary-foreground'
+                        : isAvailable
+                          ? 'border-border bg-background text-foreground hover:border-primary'
+                          : 'border-border bg-muted text-muted-foreground cursor-not-allowed line-through opacity-50'
+                    )}
+                  >
+                    {value}
+                  </button>
+                );
+              }
+            )}
+          </div>
+        </div>
+      ))}
+
+      {/* Variant-specific info */}
+      {selectedVariant && (
+        <div className="text-muted-foreground flex items-center gap-3 pt-1 text-sm">
+          {selectedVariant.price && (
+            <span>
+              {
+                formatPrice(selectedVariant.salePrice || selectedVariant.price, {
+                  currency,
+                }) as string
+              }
+            </span>
+          )}
+          <span>{getStockStatus(selectedVariant.inventory)}</span>
+        </div>
+      )}
+    </div>
+  );
+}