create-brainerce-store 1.14.2 → 1.14.4

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

@@ -0,0 +1,9 @@
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  robots: { index: false, follow: false },
+};
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return <>{children}</>;
+}

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

@@ -13,7 +13,7 @@ import type {
 } from 'brainerce';
 import { formatPrice } from 'brainerce';
 import { getClient } from '@/lib/brainerce';
-import { useStoreInfo, useCart } from '@/providers/store-provider';
+import { useStoreInfo, useCart, useAuth } from '@/providers/store-provider';
 import { CheckoutForm } from '@/components/checkout/checkout-form';
 import { ShippingStep } from '@/components/checkout/shipping-step';
 import { PaymentStep } from '@/components/checkout/payment-step';
@@ -32,9 +32,11 @@ function CheckoutContent() {
   const searchParams = useSearchParams();
   const { storeInfo } = useStoreInfo();
   const { cart, refreshCart } = useCart();
+  const { isLoggedIn } = useAuth();
   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);
@@ -47,11 +49,28 @@ function CheckoutContent() {
   const [pickupLocations, setPickupLocations] = useState<PickupLocation[]>([]);
   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);
 
   // 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
+  useEffect(() => {
+    if (!isLoggedIn) return;
+    getClient()
+      .getCheckoutPrefillData()
+      .then((data) => {
+        if (data.shippingAddress) setPrefillAddress(data.shippingAddress);
+      })
+      .catch(() => {});
+  }, [isLoggedIn]);
+
   // Initialize or resume checkout
   const initCheckout = useCallback(async () => {
     try {
@@ -134,7 +153,10 @@ function CheckoutContent() {
   }, [cartLoaded, initCheckout]);
 
   // Handle shipping address submission
-  async function handleAddressSubmit(address: SetShippingAddressDto) {
+  async function handleAddressSubmit(
+    address: SetShippingAddressDto,
+    consent: { acceptsMarketing: boolean }
+  ) {
     if (!checkout) return;
 
     try {
@@ -145,6 +167,22 @@ function CheckoutContent() {
       const response = await client.setShippingAddress(checkout.id, address);
       setCheckout(response.checkout);
       setShippingRates(response.rates);
+
+      // Update marketing preference for logged-in users
+      if (isLoggedIn) {
+        try {
+          await client.updateMyProfile({ acceptsMarketing: consent.acceptsMarketing });
+        } catch {
+          // non-critical
+        }
+      }
+
+      // Offer to save address to profile if logged in and no prefill (new address)
+      if (isLoggedIn && !prefillAddress) {
+        setLastSubmittedAddress(address);
+        setShowSavePrompt(true);
+      }
+
       setStep('shipping');
     } catch (err) {
       const message = err instanceof Error ? err.message : t('failedToSaveAddress');
@@ -154,6 +192,30 @@ 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;
@@ -405,6 +467,29 @@ 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}
@@ -423,7 +508,20 @@ function CheckoutContent() {
                         country: checkout.shippingAddress.country,
                         phone: checkout.shippingAddress.phone || '',
                       }
-                    : undefined
+                    : prefillAddress
+                      ? {
+                          email: prefillAddress.email,
+                          firstName: prefillAddress.firstName,
+                          lastName: prefillAddress.lastName,
+                          line1: prefillAddress.line1,
+                          line2: prefillAddress.line2 || '',
+                          city: prefillAddress.city,
+                          region: prefillAddress.region || '',
+                          postalCode: prefillAddress.postalCode,
+                          country: prefillAddress.country,
+                          phone: prefillAddress.phone || '',
+                        }
+                      : undefined
                 }
               />
             </div>
@@ -564,11 +662,12 @@ function CheckoutContent() {
             )}
 
             {/* Coupon input — show from shipping/pickup step onwards (or immediately if digital) */}
-            {cart && (isAllDigital || step === 'shipping' || step === 'pickup' || step === 'payment') && (
-              <div className="border-border border-t pt-4">
-                <CouponInput cart={cart} onUpdate={handleCouponUpdate} />
-              </div>
-            )}
+            {cart &&
+              (isAllDigital || step === 'shipping' || step === 'pickup' || step === 'payment') && (
+                <div className="border-border border-t pt-4">
+                  <CouponInput cart={cart} onUpdate={handleCouponUpdate} />
+                </div>
+              )}
 
             {/* Totals */}
             {checkout && (

package/templates/nextjs/base/src/app/layout.tsx.ejs

@@ -7,12 +7,34 @@ import './globals.css';
 
 <%- fontVariable %>
 
+const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://example.com';
+
 export const metadata: Metadata = {
-  title: '<%= storeName %>',
+  metadataBase: new URL(baseUrl),
+  title: {
+    default: '<%= storeName %>',
+    template: `%s | <%= storeName %>`,
+  },
   description: '<%= storeName %>',
+  alternates: {
+    canonical: '/',
+  },
   openGraph: {
+    siteName: '<%= storeName %>',
     locale: '<%= ogLocale %>',
+    type: 'website',
   },
+  robots: {
+    index: true,
+    follow: true,
+  },
+};
+
+const organizationJsonLd = {
+  '@context': 'https://schema.org',
+  '@type': 'Organization',
+  name: '<%= storeName %>',
+  url: baseUrl,
 };
 
 export default function RootLayout({
@@ -22,6 +44,12 @@ export default function RootLayout({
 }) {
   return (
     <html lang="<%= language %>" dir="<%= direction %>">
+      <head>
+        <script
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{ __html: JSON.stringify(organizationJsonLd) }}
+        />
+      </head>
       <body className={font.className}>
         <StoreProvider>
           <div className="min-h-screen flex flex-col">

package/templates/nextjs/base/src/app/login/layout.tsx

@@ -0,0 +1,9 @@
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  robots: { index: false, follow: false },
+};
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return <>{children}</>;
+}

package/templates/nextjs/base/src/app/order-confirmation/layout.tsx

@@ -0,0 +1,9 @@
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  robots: { index: false, follow: false },
+};
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return <>{children}</>;
+}

package/templates/nextjs/base/src/app/products/[slug]/page.tsx

@@ -20,6 +20,9 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
     return {
       title: product.name,
       description,
+      alternates: {
+        canonical: `/products/${slug}`,
+      },
       openGraph: {
         title: product.name,
         description,
@@ -53,10 +56,11 @@ export default async function ProductDetailPage({ params }: Props) {
 
   const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || '';
   const productUrl = `${baseUrl}/products/${slug}`;
+  const currency = process.env.NEXT_PUBLIC_STORE_CURRENCY || 'USD';
 
   return (
     <>
-      <ProductJsonLd product={product} url={productUrl} />
+      <ProductJsonLd product={product} url={productUrl} currency={currency} />
       <ProductClientSection product={product} />
     </>
   );

package/templates/nextjs/base/src/app/products/[slug]/product-client-section.tsx

@@ -7,13 +7,8 @@ import type {
   ProductVariant,
   ProductImage,
   ProductMetafield,
-  ProductRecommendationsResponse,
   DownloadFile,
 } from 'brainerce';
-
-type ProductWithRecommendations = Product & {
-  recommendations?: ProductRecommendationsResponse;
-};
 import { getProductPriceInfo, getDescriptionContent } from 'brainerce';
 import { useCart } from '@/providers/store-provider';
 import { PriceDisplay } from '@/components/shared/price-display';
@@ -116,7 +111,7 @@ export function ProductClientSection({ product: initialProduct }: ProductClientS
   const { refreshCart } = useCart();
   const t = useTranslations('productDetail');
 
-  const product = initialProduct as ProductWithRecommendations;
+  const product = initialProduct;
   const recommendations = product?.recommendations ?? null;
 
   const [selectedVariant, setSelectedVariant] = useState<ProductVariant | null>(

package/templates/nextjs/base/src/app/products/layout.tsx

@@ -0,0 +1,18 @@
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'Products',
+  description: 'Browse our full collection of products.',
+  alternates: {
+    canonical: '/products',
+  },
+  openGraph: {
+    title: 'Products',
+    description: 'Browse our full collection of products.',
+    type: 'website',
+  },
+};
+
+export default function ProductsLayout({ children }: { children: React.ReactNode }) {
+  return <>{children}</>;
+}

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

@@ -29,6 +29,7 @@ const sortOptions: SortOption[] = [
 interface CategoryNode {
   id: string;
   name: string;
+  image?: string | null;
   parentId?: string | null;
   children: CategoryNode[];
 }

package/templates/nextjs/base/src/app/register/layout.tsx

@@ -0,0 +1,9 @@
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  robots: { index: false, follow: false },
+};
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return <>{children}</>;
+}

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

@@ -20,6 +20,7 @@ export default function RegisterPage() {
     lastName: string;
     email: string;
     password: string;
+    acceptsMarketing: boolean;
   }) {
     try {
       setError(null);

package/templates/nextjs/base/src/app/verify-email/page.tsx

@@ -180,7 +180,7 @@ function VerifyEmailContent() {
 
         <form onSubmit={handleFormSubmit} className="space-y-6">
           {/* Digit inputs */}
-          <div className="flex justify-center gap-2 sm:gap-3" onPaste={handlePaste}>
+          <div dir="ltr" className="flex justify-center gap-2 sm:gap-3" onPaste={handlePaste}>
             {digits.map((digit, index) => (
               <input
                 key={index}