create-brainerce-store 1.14.5 → 1.15.0

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.0",
   "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,6 +187,8 @@ export function CheckoutForm({
         </div>
       </div>
 
+      {!emailOnly && (
+        <>
       {/* Country + Region row */}
       <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
         <div>
@@ -301,6 +330,8 @@ export function CheckoutForm({
           placeholder={t('phonePlaceholder')}
         />
       </div>
+        </>
+      )}
 
       {/* Privacy Policy (required) */}
       <div>
@@ -347,12 +378,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>
   );