create-brainerce-store 1.15.1 → 1.15.2

package/dist/index.js

@@ -31,7 +31,7 @@ var require_package = __commonJS({
   "package.json"(exports2, module2) {
     module2.exports = {
       name: "create-brainerce-store",
-      version: "1.15.0",
+      version: "1.15.2",
       description: "Scaffold a production-ready e-commerce storefront connected to Brainerce",
       bin: {
         "create-brainerce-store": "dist/index.js"

package/messages/en.json

@@ -76,6 +76,10 @@
     "addingToCart": "Adding...",
     "addedToCart": "Added to Cart!",
     "outOfStock": "Out of Stock",
+    "inStock": "In Stock",
+    "unavailable": "Unavailable",
+    "onlyLeft": "Only {available} left",
+    "availableInStock": "{available} in stock",
     "decreaseQuantity": "Decrease quantity",
     "increaseQuantity": "Increase quantity",
     "youMayAlsoLike": "You May Also Like",

package/messages/he.json

@@ -76,6 +76,10 @@
     "addingToCart": "...מוסיף",
     "addedToCart": "נוסף לעגלה!",
     "outOfStock": "אזל מהמלאי",
+    "inStock": "במלאי",
+    "unavailable": "לא זמין",
+    "onlyLeft": "נותרו {available} בלבד",
+    "availableInStock": "{available} במלאי",
     "decreaseQuantity": "הפחת כמות",
     "increaseQuantity": "הגדל כמות",
     "youMayAlsoLike": "אולי גם תאהבו",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-brainerce-store",
-  "version": "1.15.1",
+  "version": "1.15.2",
   "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

@@ -1,6 +1,6 @@
 'use client';
 
-import { Suspense, useEffect, useState, useCallback } from 'react';
+import { Suspense, useEffect, useState, useCallback, useRef } from 'react';
 import { useSearchParams } from 'next/navigation';
 import Image from 'next/image';
 import Link from 'next/link';
@@ -76,53 +76,62 @@ function CheckoutContent() {
       .catch(() => {});
   }, [isLoggedIn]);
 
-  // Initialize or resume checkout
-  const initCheckout = useCallback(async () => {
-    try {
-      setInitializing(true);
-      setError(null);
-      const client = getClient();
-
-      // Fetch shipping destinations and pickup locations in parallel
-      client
-        .getShippingDestinations()
-        .then(setDestinations)
-        .catch(() => {});
+  // Initialize or resume checkout (only once)
+  const checkoutInitRef = useRef(false);
+  const cartIdRef = useRef<string | null>(null);
 
-      const locations = await client.getPickupLocations().catch(() => [] as PickupLocation[]);
-      setPickupLocations(locations);
+  useEffect(() => {
+    // Only init once, or if cart ID actually changed (e.g. cart was replaced)
+    if (!cart?.id) return;
+    if (checkoutInitRef.current && cartIdRef.current === cart.id) return;
+    checkoutInitRef.current = true;
+    cartIdRef.current = cart.id;
 
-      // If returning with existing checkout ID, resume it
-      if (existingCheckoutId) {
-        const existing = await client.getCheckout(existingCheckoutId);
-        setCheckout(existing);
+    const initCheckout = async () => {
+      try {
+        setInitializing(true);
+        setError(null);
+        const client = getClient();
 
-        // Determine step based on checkout state
-        const allDigital = existing.lineItems.every(
-          (i) => (i.product as unknown as { isDownloadable?: boolean }).isDownloadable
-        );
-        setIsAllDigital(allDigital);
-        if (allDigital) {
-          // 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');
-        } else if (existing.shippingAddress && existing.shippingRateId) {
-          setStep('payment');
-        } else if (existing.shippingAddress) {
-          // Fetch shipping rates
-          const rates = await client.getShippingRates(existing.id);
-          setShippingRates(rates);
-          setStep('shipping');
-        } else if (locations.length > 0) {
-          setStep('method');
+        // Fetch shipping destinations and pickup locations in parallel
+        client
+          .getShippingDestinations()
+          .then(setDestinations)
+          .catch(() => {});
+
+        const locations = await client.getPickupLocations().catch(() => [] as PickupLocation[]);
+        setPickupLocations(locations);
+
+        // If returning with existing checkout ID, resume it
+        if (existingCheckoutId) {
+          const existing = await client.getCheckout(existingCheckoutId);
+          setCheckout(existing);
+
+          // Determine step based on checkout state
+          const allDigital = existing.lineItems.every(
+            (i) => (i.product as unknown as { isDownloadable?: boolean }).isDownloadable
+          );
+          setIsAllDigital(allDigital);
+          if (allDigital) {
+            // 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');
+          } else if (existing.shippingAddress && existing.shippingRateId) {
+            setStep('payment');
+          } else if (existing.shippingAddress) {
+            // Fetch shipping rates
+            const rates = await client.getShippingRates(existing.id);
+            setShippingRates(rates);
+            setStep('shipping');
+          } else if (locations.length > 0) {
+            setStep('method');
+          }
+          return;
         }
-        return;
-      }
 
-      // Create new checkout — cart is always server-side now
-      if (cart && cart.id) {
+        // Create new checkout — cart is always server-side now
         const newCheckout = await client.createCheckout({ cartId: cart.id });
         setCheckout(newCheckout);
 
@@ -135,28 +144,22 @@ function CheckoutContent() {
           setStep('address');
           return;
         }
-      } else {
-        setError(t('cartIsEmpty'));
-      }
 
-      // If pickup locations exist, start with delivery method selection
-      if (locations.length > 0) {
-        setStep('method');
+        // If pickup locations exist, start with delivery method selection
+        if (locations.length > 0) {
+          setStep('method');
+        }
+      } catch (err) {
+        const message = err instanceof Error ? err.message : t('failedToInitCheckout');
+        setError(message);
+      } finally {
+        setInitializing(false);
       }
-    } catch (err) {
-      const message = err instanceof Error ? err.message : t('failedToInitCheckout');
-      setError(message);
-    } finally {
-      setInitializing(false);
-    }
-  }, [existingCheckoutId, cart]);
+    };
 
-  const cartLoaded = cart !== null;
-  useEffect(() => {
-    if (cartLoaded) {
-      initCheckout();
-    }
-  }, [cartLoaded, initCheckout]);
+    initCheckout();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [cart?.id, existingCheckoutId]);
 
   // Handle shipping address submission
   async function handleAddressSubmit(

package/templates/nextjs/base/src/components/products/stock-badge.tsx

@@ -2,6 +2,7 @@
 
 import type { InventoryInfo } from 'brainerce';
 import { cn } from '@/lib/utils';
+import { useTranslations } from '@/lib/translations';
 
 interface StockBadgeProps {
   inventory: InventoryInfo | null | undefined;
@@ -10,7 +11,8 @@ interface StockBadgeProps {
 }
 
 export function StockBadge({ inventory, lowStockThreshold = 5, className }: StockBadgeProps) {
-  const label = getStockLabel(inventory, lowStockThreshold);
+  const t = useTranslations('productDetail');
+  const label = getStockLabel(inventory, lowStockThreshold, t);
   const color = getStockColor(inventory, lowStockThreshold);
 
   return (
@@ -28,21 +30,22 @@ export function StockBadge({ inventory, lowStockThreshold = 5, className }: Stoc
 
 function getStockLabel(
   inventory: InventoryInfo | null | undefined,
-  lowStockThreshold: number
+  lowStockThreshold: number,
+  t: (key: string) => string
 ): string {
-  if (!inventory) return 'Out of Stock';
+  if (!inventory) return t('outOfStock');
 
   const { trackingMode, inStock, available } = inventory;
 
-  if (trackingMode === 'DISABLED') return 'Unavailable';
-  if (!inStock) return 'Out of Stock';
-  if (trackingMode === 'UNLIMITED') return 'In Stock';
+  if (trackingMode === 'DISABLED') return t('unavailable');
+  if (!inStock) return t('outOfStock');
+  if (trackingMode === 'UNLIMITED') return t('inStock');
 
   // TRACKED — show actual quantity
   if (available <= lowStockThreshold) {
-    return `Only ${available} left`;
+    return t('onlyLeft').replace('{available}', String(available));
   }
-  return `${available} in stock`;
+  return t('availableInStock').replace('{available}', String(available));
 }
 
 function getStockColor(

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

@@ -2,8 +2,10 @@
 
 import { useMemo } from 'react';
 import type { Product, ProductVariant } from 'brainerce';
-import { getVariantOptions, getProductSwatches, getStockStatus, formatPrice } from 'brainerce';
+import { getVariantOptions, getProductSwatches, formatPrice } from 'brainerce';
+import type { InventoryInfo } from 'brainerce';
 import { useStoreInfo } from '@/providers/store-provider';
+import { useTranslations } from '@/lib/translations';
 import { cn } from '@/lib/utils';
 
 interface VariantSelectorProps {
@@ -32,6 +34,7 @@ export function VariantSelector({
   className,
 }: VariantSelectorProps) {
   const { storeInfo } = useStoreInfo();
+  const t = useTranslations('productDetail');
   const currency = storeInfo?.currency || 'USD';
   const variants = useMemo(() => product.variants || [], [product.variants]);
 
@@ -269,9 +272,21 @@ export function VariantSelector({
               }
             </span>
           )}
-          <span>{getStockStatus(selectedVariant.inventory)}</span>
+          <span>{getTranslatedStockStatus(selectedVariant.inventory, t)}</span>
         </div>
       )}
     </div>
   );
 }
+
+function getTranslatedStockStatus(
+  inventory: InventoryInfo | null | undefined,
+  t: (key: string) => string
+): string {
+  if (!inventory) return t('outOfStock');
+  const { trackingMode, inStock, available } = inventory;
+  if (trackingMode === 'DISABLED') return t('unavailable');
+  if (!inStock) return t('outOfStock');
+  if (trackingMode === 'UNLIMITED') return t('inStock');
+  return t('availableInStock').replace('{available}', String(available));
+}