create-brainerce-store 1.86.1 → 1.88.0

package/templates/nextjs/designs/atelier/ui/cart/coupon-input.tsx

@@ -1,142 +1,146 @@
-'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';
-import { IconTag, IconX } from '@/ui/shared/icons';
-
-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;
-}
-
-/**
- * Coupon apply/remove control used on the cart page AND the checkout page
- * (via `checkoutId`); the `cart` prop comes from useCartPage(). Keeps the
- * applied-coupon state and the error message.
- */
-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(
-          'inline-flex items-center gap-2 rounded-full bg-secondary py-1.5 pe-2 ps-4',
-          className
-        )}
-      >
-        <span aria-hidden="true" className="text-primary">
-          <IconTag size={16} />
-        </span>
-        <span className="text-sm font-semibold text-foreground">{appliedCoupon}</span>
-        <button
-          type="button"
-          onClick={handleRemove}
-          disabled={removing}
-          aria-label={tc('remove')}
-          className="flex h-7 w-7 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-accent hover:text-foreground disabled:opacity-50"
-        >
-          {removing ? <LoadingSpinner size="sm" /> : <IconX size={16} />}
-        </button>
-      </div>
-    );
-  }
-
-  return (
-    <div className={cn(className)}>
-      <div className="flex max-w-sm 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}
-          className="input"
-        />
-        <button
-          type="button"
-          onClick={handleApply}
-          disabled={applying || !code.trim()}
-          className="btn-soft btn-md shrink-0"
-        >
-          {applying ? <LoadingSpinner size="sm" /> : tc('apply')}
-        </button>
-      </div>
-
-      {error && (
-        <p role="alert" className="mt-2 text-sm font-medium text-destructive">
-          {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';
+import { IconTag, IconX } from '@/ui/shared/icons';
+
+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;
+}
+
+/**
+ * Coupon apply/remove control used on the cart page AND the checkout page
+ * (via `checkoutId`); the `cart` prop comes from useCartPage(). Keeps the
+ * applied-coupon state and the error message.
+ */
+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(
+          'bg-secondary inline-flex items-center gap-2 rounded-full py-1.5 pe-2 ps-4',
+          className
+        )}
+      >
+        <span aria-hidden="true" className="text-primary">
+          <IconTag size={16} />
+        </span>
+        <span className="text-foreground text-sm font-semibold">{appliedCoupon}</span>
+        <button
+          type="button"
+          onClick={handleRemove}
+          disabled={removing}
+          aria-label={tc('remove')}
+          className="text-muted-foreground hover:bg-accent hover:text-foreground flex h-7 w-7 items-center justify-center rounded-full transition-colors disabled:opacity-50"
+        >
+          {removing ? <LoadingSpinner size="sm" /> : <IconX size={16} />}
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn(className)}>
+      <div className="flex max-w-sm 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}
+          className="input"
+        />
+        <button
+          type="button"
+          onClick={handleApply}
+          disabled={applying || !code.trim()}
+          className="btn-soft btn-md shrink-0"
+        >
+          {applying ? <LoadingSpinner size="sm" /> : tc('apply')}
+        </button>
+      </div>
+
+      {error && (
+        <p role="alert" className="text-destructive mt-2 text-sm font-medium">
+          {error}
+        </p>
+      )}
+    </div>
+  );
+}

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

@@ -93,13 +93,20 @@ export function TaxEstimateLine() {
   return (
     <div className="space-y-1">
       <div className="flex items-center justify-between gap-4">
-        <dt className="text-muted-foreground">{label}</dt>
+        <dt className="text-muted-foreground">
+          {estimate.pricesIncludeTax ? `${label} ${tc('inclSuffix')}` : label}
+        </dt>
         <dd className="text-foreground font-medium">
           {formatPrice(estimate.estimatedTax, { currency: estimate.currency }) as string}
         </dd>
       </div>
-      {/* The caveat travels WITH the number, not in a footnote nobody reads. */}
-      <p className="text-muted-foreground text-xs">{t('taxAtCheckout')}</p>
+      {/* The caveat travels WITH the number, not in a footnote nobody reads.
+          A VAT-inclusive store has nothing left to calculate: the tax is already
+          inside the prices above, so "calculated at checkout" would promise an
+          extra charge that never comes. */}
+      {estimate.pricesIncludeTax ? null : (
+        <p className="text-muted-foreground text-xs">{t('taxAtCheckout')}</p>
+      )}
       {/* Server-written and already localized — never replace it with copy of
           your own, it is what explains a partial estimate. */}
       {estimate.note ? <p className="text-muted-foreground text-xs">{estimate.note}</p> : null}

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

@@ -8,7 +8,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';
 import { IconPlus, IconBag } from '@/ui/shared/icons';
 
@@ -224,7 +228,7 @@ export function FrequentlyBoughtTogether({
       */}
       {addError && (
         <p role="alert" className="text-destructive mt-3 text-sm font-medium">
-          {addError === 'CART_FULL' ? t('cartFull') : t('addToCartFailed')}
+          {t(addToCartErrorMessageKey(addError))}
         </p>
       )}
     </section>

package/templates/nextjs/designs/atelier/ui/product/product-card.tsx

@@ -16,7 +16,11 @@ import { flyToCart } from '@/ui/shared/fly-to-cart';
 import { openCartDrawer } from '@/ui/cart/cart-drawer';
 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';
 import { NoPhotoTile } from '@/ui/shared/no-photo-tile';
 import { IconBag, IconCheck, IconDownload, IconStar } from '@/ui/shared/icons';
@@ -262,7 +266,7 @@ export function ProductCard({ product, className }: ProductCardProps) {
         */}
         {addError && (
           <p role="alert" className="text-destructive mt-2 text-xs">
-            {addError === 'CART_FULL' ? tp('cartFull') : tp('addToCartFailed')}
+            {tp(addToCartErrorMessageKey(addError))}
           </p>
         )}
       </div>

package/templates/nextjs/designs/atelier/ui/product/product-client-section.tsx

@@ -3,8 +3,9 @@
 import { useEffect } from 'react';
 import { CdnImage as Image } from '@/ui/shared/cdn-image';
 import { NoPhotoTile } from '@/ui/shared/no-photo-tile';
-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';
@@ -289,32 +290,6 @@ export function ProductClientSection({
             )}
           </div>
 
-          {/* Downloadable files info */}
-          {product.isDownloadable && product.downloads && product.downloads.length > 0 && (
-            <section className="bg-secondary/60 mt-6 rounded-xl border p-4">
-              <h2 className="text-sm font-semibold">
-                {t('filesIncluded').replace('{count}', String(product.downloads.length))}
-              </h2>
-              <ul className="text-muted-foreground mt-2 space-y-1.5 text-sm">
-                {product.downloads.map((file: DownloadFile) => (
-                  <li key={file.id} className="flex items-center gap-2">
-                    <IconDownload size={16} />
-                    <span>{file.name}</span>
-                    {file.size && (
-                      <span className="text-xs">
-                        (
-                        {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
@@ -447,7 +422,7 @@ export function ProductClientSection({
           */}
           {addToCartError && (
             <p role="alert" className="text-destructive mt-3 text-sm font-medium">
-              {addToCartError === 'CART_FULL' ? t('cartFull') : t('addToCartFailed')}
+              {t(addToCartErrorMessageKey(addToCartError))}
             </p>
           )}
 

package/templates/nextjs/ui-canvas/cart/cart-bundle-offer.tsx

@@ -6,7 +6,11 @@ import type { CartBundleOffer as CartBundleOfferType } from 'brainerce';
 import { formatPrice } from 'brainerce';
 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 CartBundleOfferCardProps {
@@ -98,7 +102,7 @@ export function CartBundleOfferCard({ offer, cartId, onAdd, className }: CartBun
         nothing is added, which reads as a broken button.
       */}
       {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/cart/cart-upgrade-banner.tsx

@@ -7,7 +7,11 @@ import { formatPrice } from 'brainerce';
 import { getClient } from '@/core/lib/brainerce';
 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 CartUpgradeBannerProps {
@@ -188,9 +192,7 @@ export function CartUpgradeBanner({
         <p role="alert">
           {upgradeError === 'ORIGINAL_NOT_REMOVED'
             ? t('upgradeOriginalNotRemoved')
-            : upgradeError === 'CART_FULL'
-              ? tp('cartFull')
-              : tp('addToCartFailed')}
+            : tp(addToCartErrorMessageKey(upgradeError))}
         </p>
       )}
     </div>