create-brainerce-store 1.87.0 → 1.88.0

package/templates/nextjs/ui-canvas/cart/coupon-input.tsx

@@ -1,119 +1,123 @@
-'use client';
-
-import { useState } from 'react';
-import type { Cart } from 'brainerce';
-import { getClient } from '@/core/lib/brainerce';
-import { useTranslations } from '@/core/lib/translations';
-import { LoadingSpinner } from '@/ui/shared/loading-spinner';
-import { cn } from '@/core/lib/utils';
-
-interface CouponInputProps {
-  cart: Cart;
-  /** When provided, uses applyCheckoutCoupon/removeCheckoutCoupon instead of
-   *  applyCoupon/removeCoupon. Always pass this when a checkout session exists. */
-  checkoutId?: string;
-  onUpdate: () => void;
-  className?: string;
-}
-
-/**
- * DESIGN ME — coupon apply/remove control used on the cart page AND the
- * checkout page (via `checkoutId`); the `cart` prop comes from useCartPage().
- * Keep the applied-coupon state and the error message.
- *
- * Building blocks: shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons are installed and ready to compose with.
- */
-export function CouponInput({ cart, checkoutId, onUpdate, className }: CouponInputProps) {
-  const t = useTranslations('coupon');
-  const tc = useTranslations('common');
-  const [code, setCode] = useState('');
-  const [applying, setApplying] = useState(false);
-  const [removing, setRemoving] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const appliedCoupon = cart.couponCode || null;
-
-  async function handleApply() {
-    const trimmed = code.trim();
-    if (!trimmed || applying) return;
-
-    try {
-      setApplying(true);
-      setError(null);
-      const client = getClient();
-      if (checkoutId) {
-        await client.applyCheckoutCoupon(checkoutId, trimmed);
-      } else {
-        await client.applyCoupon(cart.id, trimmed);
-      }
-      setCode('');
-      onUpdate();
-    } catch (err) {
-      const message = err instanceof Error ? err.message : t('invalidCode');
-      setError(message);
-    } finally {
-      setApplying(false);
-    }
-  }
-
-  async function handleRemove() {
-    if (removing) return;
-
-    try {
-      setRemoving(true);
-      setError(null);
-      const client = getClient();
-      if (checkoutId) {
-        await client.removeCheckoutCoupon(checkoutId);
-      } else {
-        await client.removeCoupon(cart.id);
-      }
-      onUpdate();
-    } catch (err) {
-      console.error('Failed to remove coupon:', err);
-    } finally {
-      setRemoving(false);
-    }
-  }
-
-  // Show applied coupon
-  if (appliedCoupon) {
-    return (
-      <div className={cn('flex items-center gap-2', className)}>
-        <span>{appliedCoupon}</span>
-        <button type="button" onClick={handleRemove} disabled={removing}>
-          {removing ? tc('removing') : tc('remove')}
-        </button>
-      </div>
-    );
-  }
-
-  return (
-    <div className={cn(className)}>
-      <div className="flex gap-2">
-        <input
-          type="text"
-          value={code}
-          onChange={(e) => {
-            setCode(e.target.value);
-            if (error) setError(null);
-          }}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter') {
-              e.preventDefault();
-              handleApply();
-            }
-          }}
-          placeholder={t('placeholder')}
-          aria-label={t('placeholder')}
-          aria-invalid={error ? true : undefined}
-        />
-        <button type="button" onClick={handleApply} disabled={applying || !code.trim()}>
-          {applying ? <LoadingSpinner size="sm" /> : tc('apply')}
-        </button>
-      </div>
-
-      {error && <p role="alert">{error}</p>}
-    </div>
-  );
-}
+'use client';
+
+import { useState } from 'react';
+import type { Cart } from 'brainerce';
+import { getClient } from '@/core/lib/brainerce';
+import { couponErrorKey } from '@/core/lib/coupon-error';
+import { useTranslations } from '@/core/lib/translations';
+import { LoadingSpinner } from '@/ui/shared/loading-spinner';
+import { cn } from '@/core/lib/utils';
+
+interface CouponInputProps {
+  cart: Cart;
+  /** When provided, uses applyCheckoutCoupon/removeCheckoutCoupon instead of
+   *  applyCoupon/removeCoupon. Always pass this when a checkout session exists. */
+  checkoutId?: string;
+  onUpdate: () => void;
+  className?: string;
+}
+
+/**
+ * DESIGN ME — coupon apply/remove control used on the cart page AND the
+ * checkout page (via `checkoutId`); the `cart` prop comes from useCartPage().
+ * Keep the applied-coupon state and the error message.
+ *
+ * Building blocks: shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons are installed and ready to compose with.
+ */
+export function CouponInput({ cart, checkoutId, onUpdate, className }: CouponInputProps) {
+  const t = useTranslations('coupon');
+  const tc = useTranslations('common');
+  const [code, setCode] = useState('');
+  const [applying, setApplying] = useState(false);
+  const [removing, setRemoving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const appliedCoupon = cart.couponCode || null;
+
+  async function handleApply() {
+    const trimmed = code.trim();
+    if (!trimmed || applying) return;
+
+    try {
+      setApplying(true);
+      setError(null);
+      const client = getClient();
+      if (checkoutId) {
+        await client.applyCheckoutCoupon(checkoutId, trimmed);
+      } else {
+        await client.applyCoupon(cart.id, trimmed);
+      }
+      setCode('');
+      onUpdate();
+    } catch (err) {
+      // Known codes are shown from our own (translated) messages; the API's
+      // `message` is English. An uncoded refusal falls back to that message.
+      const key = couponErrorKey(err);
+      const message = key ? t(key) : err instanceof Error ? err.message : t('invalidCode');
+      setError(message);
+    } finally {
+      setApplying(false);
+    }
+  }
+
+  async function handleRemove() {
+    if (removing) return;
+
+    try {
+      setRemoving(true);
+      setError(null);
+      const client = getClient();
+      if (checkoutId) {
+        await client.removeCheckoutCoupon(checkoutId);
+      } else {
+        await client.removeCoupon(cart.id);
+      }
+      onUpdate();
+    } catch (err) {
+      console.error('Failed to remove coupon:', err);
+    } finally {
+      setRemoving(false);
+    }
+  }
+
+  // Show applied coupon
+  if (appliedCoupon) {
+    return (
+      <div className={cn('flex items-center gap-2', className)}>
+        <span>{appliedCoupon}</span>
+        <button type="button" onClick={handleRemove} disabled={removing}>
+          {removing ? tc('removing') : tc('remove')}
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn(className)}>
+      <div className="flex gap-2">
+        <input
+          type="text"
+          value={code}
+          onChange={(e) => {
+            setCode(e.target.value);
+            if (error) setError(null);
+          }}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              e.preventDefault();
+              handleApply();
+            }
+          }}
+          placeholder={t('placeholder')}
+          aria-label={t('placeholder')}
+          aria-invalid={error ? true : undefined}
+        />
+        <button type="button" onClick={handleApply} disabled={applying || !code.trim()}>
+          {applying ? <LoadingSpinner size="sm" /> : tc('apply')}
+        </button>
+      </div>
+
+      {error && <p role="alert">{error}</p>}
+    </div>
+  );
+}

package/templates/nextjs/ui-canvas/cart/tax-estimate-line.tsx

@@ -71,7 +71,7 @@ export function useTaxEstimate(): TaxEstimateResponse | null {
 /* DESIGN ME — unstyled on purpose (canvas mode). The rules that are NOT yours
    to change: no estimate is rendered when `appliesTax` is false or the call
    failed, `note` is rendered verbatim, and the "calculated at checkout" caveat
-   stays beside the figure. */
+   stays beside the figure unless the store's prices already include tax. */
 export function TaxEstimateLine() {
   const t = useTranslations('cart');
   const tc = useTranslations('common');
@@ -94,10 +94,11 @@ export function TaxEstimateLine() {
   return (
     <div>
       <div className="flex items-center justify-between gap-4">
-        <dt>{label}</dt>
+        <dt>{estimate.pricesIncludeTax ? `${label} ${tc('inclSuffix')}` : label}</dt>
         <dd>{formatPrice(estimate.estimatedTax, { currency: estimate.currency }) as string}</dd>
       </div>
-      <p>{t('taxAtCheckout')}</p>
+      {/* VAT-inclusive: the tax is already inside the prices, nothing is added later. */}
+      {estimate.pricesIncludeTax ? null : <p>{t('taxAtCheckout')}</p>}
       {estimate.note ? <p>{estimate.note}</p> : null}
     </div>
   );

package/templates/nextjs/ui-canvas/layout/newsletter-signup.tsx

@@ -56,7 +56,11 @@ export function NewsletterSignup() {
     getClient()
       .marketing.getBenefit(locale)
       .then((result) => {
-        if (!cancelled) setOffer(result);
+        // Only a complete, enabled offer is ever shown. An empty or partial body
+        // (an older backend, a half-configured benefit) must read as "no offer",
+        // never as "undefined off your first order".
+        const usable = result && result.enabled === true && Number.isFinite(result.discountValue);
+        if (!cancelled) setOffer(usable ? result : null);
       })
       .catch(() => {
         // Silent: a failed offer read must not stop anyone subscribing.

package/templates/nextjs/ui-canvas/layout/site-footer.tsx.ejs

@@ -37,7 +37,7 @@ export function SiteFooter({ footer, storeName }: SiteFooterProps) {
       <footer>
         {/* DESIGN ME — footer (fallback branch): copyright only; Content<'FOOTER'> pre-fetched in the layout. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
         <p>
-          © {year} {brandLabel}. All rights reserved.
+          © {year} {brandLabel}. <%- language === 'he' ? 'כל הזכויות שמורות.' : 'All rights reserved.' %>
         </p>
         <NewsletterSignup />
       </footer>
@@ -81,7 +81,7 @@ export function SiteFooter({ footer, storeName }: SiteFooterProps) {
 
       <NewsletterSignup />
 
-      <p>{data.copyright ?? `© ${year} ${brandLabel}. All rights reserved.`}</p>
+      <p>{data.copyright ?? `© ${year} ${brandLabel}. <%- language === 'he' ? 'כל הזכויות שמורות.' : 'All rights reserved.' %>`}</p>
     </footer>
   );
 }

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

@@ -7,7 +7,11 @@ 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 {
+  addToCartErrorMessageKey,
+  toAddToCartError,
+  type AddToCartError,
+} from '@/core/lib/add-to-cart-error';
 import { cn } from '@/core/lib/utils';
 
 interface FrequentlyBoughtTogetherProps {
@@ -190,7 +194,7 @@ export function FrequentlyBoughtTogether({
         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>
+        <p role="alert">{t(addToCartErrorMessageKey(addError))}</p>
       )}
     </section>
   );

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

@@ -14,7 +14,11 @@ 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 {
+  addToCartErrorMessageKey,
+  toAddToCartError,
+  type AddToCartError,
+} from '@/core/lib/add-to-cart-error';
 import { cn } from '@/core/lib/utils';
 
 interface ProductCardProps {
@@ -182,7 +186,7 @@ export function ProductCard({ product, className }: ProductCardProps) {
         this the shopper taps, the button resets, and nothing appears.
       */}
       {addError && (
-        <p role="alert">{addError === 'CART_FULL' ? tp('cartFull') : tp('addToCartFailed')}</p>
+        <p role="alert">{tp(addToCartErrorMessageKey(addError))}</p>
       )}
     </article>
   );

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

@@ -1,8 +1,9 @@
 'use client';
 
 import { CdnImage as Image } from '@/ui/shared/cdn-image';
-import type { Product, ProductMetafield, DownloadFile } from 'brainerce';
+import type { Product, ProductMetafield } from 'brainerce';
 import { useProductPage } from '@/core/hooks/use-product-page';
+import { addToCartErrorMessageKey } from '@/core/lib/add-to-cart-error';
 import { PriceDisplay } from '@/ui/product/price-display';
 import { VariantSelector } from '@/ui/product/variant-selector';
 import { StockBadge } from '@/ui/product/stock-badge';
@@ -225,32 +226,6 @@ export function ProductClientSection({
             <StockBadge inventory={inventory} />
           )}
 
-          {/* Downloadable files info */}
-          {product.isDownloadable && product.downloads && product.downloads.length > 0 && (
-            <section>
-              <h2>
-                {t('filesIncluded')} ({product.downloads.length})
-              </h2>
-              <ul>
-                {product.downloads.map((file: DownloadFile) => (
-                  <li key={file.id}>
-                    <span>{file.name}</span>
-                    {file.size && (
-                      <span>
-                        {' '}
-                        (
-                        {file.size < 1024 * 1024
-                          ? `${(file.size / 1024).toFixed(0)} KB`
-                          : `${(file.size / (1024 * 1024)).toFixed(1)} MB`}
-                        )
-                      </span>
-                    )}
-                  </li>
-                ))}
-              </ul>
-            </section>
-          )}
-
           {/* Variant Selector */}
           {/* A KIT is bought as ONE line, but the shopper needs to see what is
               in the box before deciding. These rows are display only — never add
@@ -355,7 +330,7 @@ export function ProductClientSection({
           */}
           {addToCartError && (
             <p role="alert">
-              {addToCartError === 'CART_FULL' ? t('cartFull') : t('addToCartFailed')}
+              {t(addToCartErrorMessageKey(addToCartError))}
             </p>
           )}
 

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

@@ -1,18 +0,0 @@
-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}</>;
-}