create-brainerce-store 1.79.0 → 1.81.0

package/templates/nextjs/ui-canvas/product/frequently-bought-together.tsx

@@ -7,6 +7,7 @@ import { formatPrice } from 'brainerce';
 import { useCart, useStoreInfo } from '@/core/providers/store-provider';
 import { useCurrency } from '@/core/lib/use-currency';
 import { useTranslations } from '@/core/lib/translations';
+import { toAddToCartError, type AddToCartError } from '@/core/lib/add-to-cart-error';
 import { cn } from '@/core/lib/utils';
 
 interface FrequentlyBoughtTogetherProps {
@@ -90,6 +91,7 @@ export function FrequentlyBoughtTogether({
 
   const [selected, setSelected] = useState<Set<string>>(() => new Set(crossSells.map((i) => i.id)));
   const [adding, setAdding] = useState(false);
+  const [addError, setAddError] = useState<AddToCartError | null>(null);
 
   if (!storeInfo?.upsell?.frequentlyBoughtTogetherEnabled) return null;
   if (crossSells.length === 0) return null;
@@ -120,6 +122,7 @@ export function FrequentlyBoughtTogether({
 
   async function handleAddAll() {
     if (adding || selected.size === 0) return;
+    setAddError(null);
     try {
       setAdding(true);
       const { getClient } = await import('@/core/lib/brainerce');
@@ -130,6 +133,10 @@ export function FrequentlyBoughtTogether({
       }
       await refreshCart();
     } catch (err) {
+      // The loop is not transactional: if the cart hits its 50-line cap
+      // part-way through, the earlier items ARE in the cart and the rest are
+      // not. Saying so beats a silent stop the shopper reads as a dead button.
+      setAddError(toAddToCartError(err));
       console.error('Failed to add items to cart:', err);
     } finally {
       setAdding(false);
@@ -177,6 +184,14 @@ export function FrequentlyBoughtTogether({
           {adding ? t('addingAll') : t('addSelectedToCart')}
         </button>
       </div>
+
+      {/*
+        Why the add was refused. Some items may already be in the cart:
+        the loop above adds one at a time and stops at the first refusal.
+      */}
+      {addError && (
+        <p role="alert">{addError === 'CART_FULL' ? t('cartFull') : t('addToCartFailed')}</p>
+      )}
     </section>
   );
 }

package/templates/nextjs/ui-canvas/product/product-card.tsx

@@ -14,6 +14,7 @@ import { DiscountBadge } from '@/ui/product/discount-badge';
 import { useCart } from '@/core/providers/store-provider';
 import { useCurrency } from '@/core/lib/use-currency';
 import { trackAddToCart } from '@/core/lib/tracking';
+import { toAddToCartError, type AddToCartError } from '@/core/lib/add-to-cart-error';
 import { cn } from '@/core/lib/utils';
 
 interface ProductCardProps {
@@ -58,6 +59,7 @@ export function ProductCard({ product, className }: ProductCardProps) {
 
   const [adding, setAdding] = useState(false);
   const [added, setAdded] = useState(false);
+  const [addError, setAddError] = useState<AddToCartError | null>(null);
 
   // ⛔ A KIT carries NO `inventory` object — its stock is on `kitAvailable`
   // (`null` = unlimited, `0` = not sellable). Reading `inventory` here left a
@@ -79,6 +81,7 @@ export function ProductCard({ product, className }: ProductCardProps) {
     }
 
     if (adding || !canPurchase) return;
+    setAddError(null);
 
     try {
       setAdding(true);
@@ -94,6 +97,10 @@ export function ProductCard({ product, className }: ProductCardProps) {
       setAdded(true);
       setTimeout(() => setAdded(false), 2000);
     } catch (err) {
+      // Quick-add used to fail in silence: the button spun, reset, and the
+      // item never appeared. A cart at the 50-line cap is the commonest
+      // cause and the shopper can fix it, so say so on the card.
+      setAddError(toAddToCartError(err));
       console.error('Failed to add to cart:', err);
     } finally {
       setAdding(false);
@@ -169,6 +176,14 @@ export function ProductCard({ product, className }: ProductCardProps) {
           {added ? tp('addedToCart') : isVariable ? tProd('selectOptions') : tp('addToCart')}
         </button>
       )}
+
+      {/*
+        Quick-add refusal. The card has no other error surface, and without
+        this the shopper taps, the button resets, and nothing appears.
+      */}
+      {addError && (
+        <p role="alert">{addError === 'CART_FULL' ? tp('cartFull') : tp('addToCartFailed')}</p>
+      )}
     </article>
   );
 }

package/templates/nextjs/ui-canvas/product/product-client-section.tsx

@@ -107,6 +107,7 @@ export function ProductClientSection({
     setQuantity,
     addingToCart,
     addedMessage,
+    addToCartError,
     handleAddToCart,
     customizationFields,
     customizationValues,
@@ -347,6 +348,18 @@ export function ProductClientSection({
             </button>
           </div>
 
+          {/*
+            Why the add was refused. Deliberately OUTSIDE the modifier block
+            above: that block only renders when the product HAS modifier
+            groups, so a refusal shown there would be invisible on almost
+            every product and the shopper would just watch the button reset.
+          */}
+          {addToCartError && (
+            <p role="alert">
+              {addToCartError === 'CART_FULL' ? t('cartFull') : t('addToCartFailed')}
+            </p>
+          )}
+
           {/*
             Sold out is not the end of the page. `canOfferStockAlert` is the whole
             gate — it also covers the merchant's switch and backorderable items,