create-brainerce-store 1.73.0 → 1.74.0

package/templates/nextjs/base/src/ui/cart/cart-item.tsx

@@ -10,6 +10,7 @@ import { useTranslations } from '@/core/lib/translations';
 import { useCurrency } from '@/core/lib/use-currency';
 import { LoadingSpinner } from '@/ui/shared/loading-spinner';
 import { cn } from '@/core/lib/utils';
+import { OrderCustomizations } from '@/components/account/order-customizations';
 
 interface CartItemProps {
   item: CartItemType;
@@ -104,6 +105,15 @@ export function CartItem({ item, onUpdate, className }: CartItemProps) {
         {/* Variant name */}
         {variantName && <p className="text-muted-foreground mt-1 text-xs">{variantName}</p>}
 
+        {/* What the buyer typed / uploaded / picked, keyed by the field's own
+            `key` and carrying the merchant's label. The SDK resolves this on
+            the cart line itself (`CartItem.customizations`, same shape as
+            `OrderItem.customizations`) so no product fetch is needed for the
+            labels. Present only when the line has at least one value set, and
+            the component returns null on an empty map, so a plain product
+            renders exactly as before. */}
+        {item.customizations && <OrderCustomizations customizations={item.customizations} />}
+
         {/* Unit price */}
         <p className="text-muted-foreground mt-1 text-sm">
           {formatPrice(unitPrice, { currency }) as string}

package/templates/nextjs/base/src/ui/cart/cart-summary.tsx

@@ -1,110 +1,109 @@
-'use client';
-
-import { formatPrice } from 'brainerce';
-import { useTranslations } from '@/core/lib/translations';
-import { useCart } from '@/core/providers/store-provider';
-import { useCurrency } from '@/core/lib/use-currency';
-import { Separator } from '@/components/ui/separator';
-import { cn } from '@/core/lib/utils';
-
-interface CartSummaryProps {
-  className?: string;
-}
-
-export function CartSummary({ className }: CartSummaryProps) {
-  const t = useTranslations('cart');
-  const tc = useTranslations('common');
-  const { totals, cart } = useCart();
-  const currency = useCurrency();
-
-  const rules = cart?.appliedDiscounts;
-  const ruleAmt = cart?.ruleDiscountAmount ? parseFloat(cart.ruleDiscountAmount) : 0;
-  const couponAmt = totals.discount - ruleAmt;
-
-  return (
-    <div className={cn('space-y-3', className)}>
-      <h3 className="text-foreground text-lg font-semibold">{t('orderSummary')}</h3>
-
-      <div className="space-y-2 text-sm">
-        {/* Subtotal */}
-        <div className="flex items-center justify-between">
-          <span className="text-muted-foreground">{tc('subtotal')}</span>
-          <span className="text-foreground font-medium">
-            {formatPrice(totals.subtotal, { currency }) as string}
-          </span>
-        </div>
-
-        {/* Rule discounts - show each rule by name */}
-        {rules && rules.length > 0
-          ? rules.map((rule) => (
-              <div key={rule.ruleId} className="flex items-center justify-between">
-                <span className="text-muted-foreground">{rule.ruleName}</span>
-                <span className="text-destructive font-medium">
-                  -{formatPrice(parseFloat(rule.discountAmount), { currency }) as string}
-                </span>
-              </div>
-            ))
-          : ruleAmt > 0 && (
-              <div className="flex items-center justify-between">
-                <span className="text-muted-foreground">{tc('generalDiscount')}</span>
-                <span className="text-destructive font-medium">
-                  -{formatPrice(ruleAmt, { currency }) as string}
-                </span>
-              </div>
-            )}
-
-        {/* Coupon discount */}
-        {cart?.couponCode && couponAmt > 0 && (
-          <div className="flex items-center justify-between">
-            <span className="text-muted-foreground">
-              {tc('couponDiscount')} ({cart.couponCode})
-            </span>
-            <span className="text-destructive font-medium">
-              -{formatPrice(couponAmt, { currency }) as string}
-            </span>
-          </div>
-        )}
-
-        {/* Fallback: generic discount when no breakdown available */}
-        {totals.discount > 0 &&
-          ruleAmt <= 0 &&
-          !cart?.couponCode &&
-          (!rules || rules.length === 0) && (
-            <div className="flex items-center justify-between">
-              <span className="text-muted-foreground">{tc('discount')}</span>
-              <span className="text-destructive font-medium">
-                -{formatPrice(totals.discount, { currency }) as string}
-              </span>
-            </div>
-          )}
-
-        {/* Shipping */}
-        {totals.shipping > 0 && (
-          <div className="flex items-center justify-between">
-            <span className="text-muted-foreground">{tc('shipping')}</span>
-            <span className="text-foreground font-medium">
-              {formatPrice(totals.shipping, { currency }) as string}
-            </span>
-          </div>
-        )}
-
-        {/* Tax */}
-        <div className="flex items-center justify-between">
-          <span className="text-muted-foreground">{tc('tax')}</span>
-          <span className="text-muted-foreground text-xs">{t('taxAtCheckout')}</span>
-        </div>
-
-        {/* Divider */}
-        <Separator className="mt-2" />
-        <div className="pt-1">
-          <div className="flex items-center justify-between">
-            <span className="text-foreground font-semibold">{tc('total')}</span>
-            <span className="text-foreground text-base font-semibold">
-              {formatPrice(totals.total, { currency }) as string}
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
+'use client';
+
+import { formatPrice } from 'brainerce';
+import { useTranslations } from '@/core/lib/translations';
+import { useCart } from '@/core/providers/store-provider';
+import { TaxEstimateLine } from '@/ui/cart/tax-estimate-line';
+import { useCurrency } from '@/core/lib/use-currency';
+import { Separator } from '@/components/ui/separator';
+import { cn } from '@/core/lib/utils';
+
+interface CartSummaryProps {
+  className?: string;
+}
+
+export function CartSummary({ className }: CartSummaryProps) {
+  const t = useTranslations('cart');
+  const tc = useTranslations('common');
+  const { totals, cart } = useCart();
+  const currency = useCurrency();
+
+  const rules = cart?.appliedDiscounts;
+  const ruleAmt = cart?.ruleDiscountAmount ? parseFloat(cart.ruleDiscountAmount) : 0;
+  const couponAmt = totals.discount - ruleAmt;
+
+  return (
+    <div className={cn('space-y-3', className)}>
+      <h3 className="text-foreground text-lg font-semibold">{t('orderSummary')}</h3>
+
+      <div className="space-y-2 text-sm">
+        {/* Subtotal */}
+        <div className="flex items-center justify-between">
+          <span className="text-muted-foreground">{tc('subtotal')}</span>
+          <span className="text-foreground font-medium">
+            {formatPrice(totals.subtotal, { currency }) as string}
+          </span>
+        </div>
+
+        {/* Rule discounts - show each rule by name */}
+        {rules && rules.length > 0
+          ? rules.map((rule) => (
+              <div key={rule.ruleId} className="flex items-center justify-between">
+                <span className="text-muted-foreground">{rule.ruleName}</span>
+                <span className="text-destructive font-medium">
+                  -{formatPrice(parseFloat(rule.discountAmount), { currency }) as string}
+                </span>
+              </div>
+            ))
+          : ruleAmt > 0 && (
+              <div className="flex items-center justify-between">
+                <span className="text-muted-foreground">{tc('generalDiscount')}</span>
+                <span className="text-destructive font-medium">
+                  -{formatPrice(ruleAmt, { currency }) as string}
+                </span>
+              </div>
+            )}
+
+        {/* Coupon discount */}
+        {cart?.couponCode && couponAmt > 0 && (
+          <div className="flex items-center justify-between">
+            <span className="text-muted-foreground">
+              {tc('couponDiscount')} ({cart.couponCode})
+            </span>
+            <span className="text-destructive font-medium">
+              -{formatPrice(couponAmt, { currency }) as string}
+            </span>
+          </div>
+        )}
+
+        {/* Fallback: generic discount when no breakdown available */}
+        {totals.discount > 0 &&
+          ruleAmt <= 0 &&
+          !cart?.couponCode &&
+          (!rules || rules.length === 0) && (
+            <div className="flex items-center justify-between">
+              <span className="text-muted-foreground">{tc('discount')}</span>
+              <span className="text-destructive font-medium">
+                -{formatPrice(totals.discount, { currency }) as string}
+              </span>
+            </div>
+          )}
+
+        {/* Shipping */}
+        {totals.shipping > 0 && (
+          <div className="flex items-center justify-between">
+            <span className="text-muted-foreground">{tc('shipping')}</span>
+            <span className="text-foreground font-medium">
+              {formatPrice(totals.shipping, { currency }) as string}
+            </span>
+          </div>
+        )}
+
+        {/* Tax: a real estimate when the store has a rate for the buyer's
+            country, and the original "calculated at checkout" row otherwise. */}
+        <TaxEstimateLine />
+
+        {/* Divider */}
+        <Separator className="mt-2" />
+        <div className="pt-1">
+          <div className="flex items-center justify-between">
+            <span className="text-foreground font-semibold">{tc('total')}</span>
+            <span className="text-foreground text-base font-semibold">
+              {formatPrice(totals.total, { currency }) as string}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/nextjs/base/src/ui/cart/cart-view.tsx

@@ -14,6 +14,7 @@ import { ReservationCountdown } from '@/ui/cart/reservation-countdown';
 import { CartRecommendationSection } from '@/ui/product/recommendation-section';
 import { LoadingSpinner } from '@/ui/shared/loading-spinner';
 import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
 import { Card } from '@/components/ui/card';
 import { Separator } from '@/components/ui/separator';
 import { useTranslations } from '@/core/lib/translations';
@@ -32,6 +33,12 @@ export function CartView() {
     bundles,
     reservationExpired,
     unavailableItems,
+    selectedItemIds,
+    selectedItems,
+    toggleItemSelected,
+    allSelected,
+    setAllSelected,
+    checkoutHref,
     canProceedToCheckout,
     onReservationExpired,
   } = useCartPage();
@@ -86,11 +93,33 @@ export function CartView() {
             <CartNudges nudges={cart.nudges} className="mb-4" />
           )}
 
+          {/* Select-all. Partial checkout: only the ticked lines are sent to
+              createCheckout, and whatever stays unticked is still in the cart
+              (and still for sale) after payment. */}
+          <div className="border-border mb-2 flex items-center gap-3 border-b pb-3">
+            <Checkbox
+              id="cart-select-all"
+              checked={allSelected}
+              onCheckedChange={(checked) => setAllSelected(checked === true)}
+            />
+            <label htmlFor="cart-select-all" className="text-foreground cursor-pointer text-sm">
+              {tc('all')}
+            </label>
+          </div>
+
           {/* Cart items */}
           <div>
             {cart.items.map((item) => (
               <div key={item.id}>
-                <CartItem item={item} onUpdate={refreshCart} />
+                <div className="flex items-start gap-3">
+                  <Checkbox
+                    className="mt-6"
+                    checked={selectedItemIds.includes(item.id)}
+                    onCheckedChange={() => toggleItemSelected(item.id)}
+                    aria-label={item.product.name}
+                  />
+                  <CartItem item={item} onUpdate={refreshCart} className="flex-1" />
+                </div>
                 {upgrades?.upgrades?.[item.productId] && (
                   <CartUpgradeBanner
                     suggestion={upgrades.upgrades[item.productId]}
@@ -129,14 +158,28 @@ export function CartView() {
         <div className="lg:col-span-1">
           <Card className="bg-muted/50 sticky top-24 p-6 shadow-none">
             <FreeShippingBar className="mb-4" />
+            {/* Totals are for the WHOLE cart. A partial selection is priced
+                authoritatively on the checkout page, which is the only place
+                the server has scoped the discounts and tax to the subset. */}
             <CartSummary />
 
+            {/* Shown once the shopper unticks anything. At zero selected this
+                is what explains the disabled button below — a count, so it
+                needs no copy of its own. */}
+            {!allSelected && (
+              <p className="text-muted-foreground mt-3 text-center text-xs">
+                {selectedItems.length} {selectedItems.length === 1 ? tc('item') : tc('items')}
+              </p>
+            )}
+
             {/* Proceed to checkout. When the gate is closed this must be a
                 real disabled control, never a styled-down link: an anchor
                 ignores `disabled` and would still navigate. */}
             {canProceedToCheckout ? (
               <Button asChild size="lg" className="mt-6 w-full rounded px-6 text-sm">
-                <Link href="/checkout">{t('proceedToCheckout')}</Link>
+                {/* `checkoutHref` carries `?items=` only for a strict subset;
+                    a full cart links to a bare /checkout exactly as before. */}
+                <Link href={checkoutHref}>{t('proceedToCheckout')}</Link>
               </Button>
             ) : (
               <>

package/templates/nextjs/base/src/ui/cart/gift-card-input.tsx

@@ -0,0 +1,191 @@
+'use client';
+
+import { useState } from 'react';
+import { Gift } from 'lucide-react';
+import type { Checkout } from 'brainerce';
+import { getClient } from '@/core/lib/brainerce';
+import { useTranslations } from '@/core/lib/translations';
+import { LoadingSpinner } from '@/ui/shared/loading-spinner';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { cn } from '@/core/lib/utils';
+
+interface GiftCardInputProps {
+  checkoutId: string;
+  /**
+   * Cards already on this checkout. Each is removed by its own tenderId.
+   *
+   * Derived from `Checkout` rather than written out, and deliberately NOT the
+   * `CheckoutTender` that `applyGiftCard` returns — that one carries a third
+   * field, `providerAmountDue`, because an apply response reports the new
+   * amount due alongside the tender it just created. Reading a checkout puts
+   * that figure at the top level instead, once, since it describes the whole
+   * checkout and not any single card. Naming the source type here keeps the two
+   * from being confused again.
+   */
+  tenders: NonNullable<Checkout['tenders']>;
+  /** Formats an amount in the checkout's currency. */
+  formatAmount: (value: string) => string;
+  onUpdate: () => void;
+  className?: string;
+}
+
+/**
+ * Redeem a gift card at checkout.
+ *
+ * ## A gift card is NOT a coupon
+ *
+ * This sits beside the coupon field and behaves nothing like it. A coupon
+ * reduces what the order is worth; a gift card pays for an order that is still
+ * worth what it was. The order total does not move, tax is unchanged, and what
+ * drops is only the amount the payment provider is charged.
+ *
+ * Rendering it as a discount would misstate the order to the shopper and, on a
+ * receipt, misstate the taxable base. That is why the applied card appears on
+ * its own line near the total rather than inside the discount row.
+ *
+ * ## Checkout only, despite living in `ui/cart/`
+ *
+ * It sits beside `coupon-input.tsx` because a shopper reaches for both in the
+ * same place — but a coupon has a cart-level call and a gift card does not.
+ * `applyGiftCard` needs a checkout, so `checkoutId` is a REQUIRED prop: the type
+ * system, not a convention, is what stops this being dropped onto a cart page.
+ *
+ * ## More than one card
+ *
+ * A checkout can carry several. Each is removed by its `tenderId`, never by the
+ * code — the code is bearer value and is not kept anywhere after it is applied.
+ *
+ * ## Refusals say one thing
+ *
+ * The server answers identically for "no such code", "expired", "already spent"
+ * and "wrong currency". That is deliberate: any response that distinguishes them
+ * is an oracle someone walks the code space against. Show what the server said;
+ * never guess a more specific reason.
+ */
+export function GiftCardInput({
+  checkoutId,
+  tenders,
+  formatAmount,
+  onUpdate,
+  className,
+}: GiftCardInputProps) {
+  const t = useTranslations('giftCard');
+  const tc = useTranslations('common');
+  const [code, setCode] = useState('');
+  const [applying, setApplying] = useState(false);
+  const [removingId, setRemovingId] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  async function handleApply() {
+    const trimmed = code.trim();
+    if (!trimmed || applying) return;
+
+    try {
+      setApplying(true);
+      setError(null);
+      await getClient().applyGiftCard(checkoutId, trimmed);
+      // Cleared on success only. A rejected code stays in the field so the
+      // shopper can fix a typo instead of re-reading it off the card.
+      setCode('');
+      onUpdate();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : t('invalidCode'));
+    } finally {
+      setApplying(false);
+    }
+  }
+
+  async function handleRemove(tenderId: string) {
+    if (removingId) return;
+    try {
+      setRemovingId(tenderId);
+      setError(null);
+      await getClient().removeGiftCard(checkoutId, tenderId);
+      onUpdate();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : t('removeFailed'));
+    } finally {
+      setRemovingId(null);
+    }
+  }
+
+  return (
+    <div className={cn('space-y-2', className)}>
+      {tenders.length > 0 && (
+        <ul className="space-y-2">
+          {tenders.map((tender) => (
+            <li
+              key={tender.tenderId}
+              className="bg-muted flex items-center justify-between rounded px-3 py-2"
+            >
+              <div className="flex min-w-0 items-center gap-2">
+                <Gift className="text-primary h-4 w-4 flex-shrink-0" aria-hidden="true" />
+                <span className="text-foreground truncate text-sm font-medium">
+                  {/* What was applied, not what the card holds. A ₪200 card on a
+                      ₪50 order applies ₪50 and keeps the rest for next time —
+                      showing the balance here would look like a lost ₪150. */}
+                  {t('applied', { amount: formatAmount(tender.amountApplied) })}
+                </span>
+              </div>
+              <button
+                type="button"
+                onClick={() => handleRemove(tender.tenderId)}
+                disabled={removingId === tender.tenderId}
+                className="text-destructive hover:text-destructive/80 text-xs transition-colors disabled:opacity-40"
+              >
+                {removingId === tender.tenderId ? tc('removing') : tc('remove')}
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+
+      <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}
+          // A gift card code is Latin and case-insensitive but the server
+          // normalises it, so the shopper may type it however it is printed.
+          // LTR because the code is Latin even on an RTL storefront.
+          dir="ltr"
+          autoComplete="off"
+          spellCheck={false}
+          className={cn('h-9 flex-1 rounded font-mono', error && 'border-destructive')}
+        />
+        <Button
+          type="button"
+          variant="outline"
+          onClick={handleApply}
+          disabled={applying || !code.trim()}
+          className="hover:bg-muted h-9 rounded px-4"
+        >
+          {applying ? (
+            <LoadingSpinner size="sm" className="border-muted-foreground/30 border-t-foreground" />
+          ) : (
+            tc('apply')
+          )}
+        </Button>
+      </div>
+
+      {error && (
+        <p role="alert" className="text-destructive text-xs">
+          {error}
+        </p>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,108 @@
+'use client';
+
+/**
+ * Non-binding tax preview for the cart.
+ *
+ * Shoppers in VAT markets expect a tax figure before they reach the address
+ * form, and "calculated at checkout" reads as an unpleasant surprise waiting
+ * to happen. `estimateTax` gives them a number early without pretending it is
+ * final.
+ *
+ * ⛔ NEVER PRESENT THIS AS THE REAL TAX. The authoritative calculation runs at
+ * checkout against the full shipping address. A preview has no province, so a
+ * Canadian estimate shows federal GST alone and the provincial PST/QST joins
+ * it at checkout. That is what `note` is for, and why the "calculated at
+ * checkout" caveat stays on the row even when a figure is showing.
+ *
+ * ⛔ NO ESTIMATE IS RENDERED when `appliesTax` is false, which is what an
+ * empty or freshly created store returns: tax is off, no country reached us,
+ * or no active rate covers it. In that case (and when the call fails, and
+ * while it is in flight, and on an empty cart) this falls back to EXACTLY the
+ * row the cart shipped with before the estimate existed: "Tax / calculated at
+ * checkout". There is no spinner, no error box, and no empty amount.
+ *
+ * `getStoreTaxClasses()` would let you add a separate "9% VAT" transparency
+ * badge, but `rateName` + `rate` already come back on this response and say
+ * the same thing, so a second request would buy nothing.
+ */
+
+import { useEffect, useState } from 'react';
+import type { TaxEstimateResponse } from 'brainerce';
+import { formatPrice } from 'brainerce';
+import { getClient } from '@/core/lib/brainerce';
+import { useTranslations } from '@/core/lib/translations';
+import { useCart, useRegion } from '@/core/providers/store-provider';
+
+export function useTaxEstimate(): TaxEstimateResponse | null {
+  const { totals } = useCart();
+  // The same country the region lookup already extracted from the edge. Asking
+  // for it twice would be two sources that can disagree.
+  const { buyerCountry } = useRegion();
+  const [estimate, setEstimate] = useState<TaxEstimateResponse | null>(null);
+  const subtotal = totals.subtotal;
+
+  useEffect(() => {
+    // An empty cart has nothing to tax. Skipping the call also keeps a
+    // brand-new store from firing a request on every page load forever.
+    if (!(subtotal > 0)) {
+      setEstimate(null);
+      return;
+    }
+    let cancelled = false;
+    getClient()
+      .estimateTax({ ...(buyerCountry ? { country: buyerCountry } : {}), subtotal })
+      .then((result) => {
+        if (!cancelled) setEstimate(result);
+      })
+      .catch(() => {
+        // Swallowed on purpose. A tax preview is a courtesy; it must never
+        // take the cart down with it. The caller falls back to the plain
+        // "calculated at checkout" row.
+        if (!cancelled) setEstimate(null);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [subtotal, buyerCountry]);
+
+  return estimate;
+}
+
+export function TaxEstimateLine() {
+  const t = useTranslations('cart');
+  const tc = useTranslations('common');
+  const estimate = useTaxEstimate();
+
+  // No estimate: the row the cart has always shown.
+  if (!estimate || !estimate.appliesTax) {
+    return (
+      <div className="flex items-center justify-between">
+        <span className="text-muted-foreground">{tc('tax')}</span>
+        <span className="text-muted-foreground text-xs">{t('taxAtCheckout')}</span>
+      </div>
+    );
+  }
+
+  // `rateName` is one rate or several joined ("GST + QST"); `rate` is the
+  // summed effective percent and is null when no rule matched.
+  const label =
+    estimate.rateName && estimate.rate != null
+      ? `${estimate.rateName} ${estimate.rate}%`
+      : (estimate.rateName ?? tc('tax'));
+
+  return (
+    <div className="space-y-1">
+      <div className="flex items-center justify-between">
+        <span className="text-muted-foreground">{label}</span>
+        <span className="text-foreground font-medium">
+          {formatPrice(estimate.estimatedTax, { currency: estimate.currency }) as string}
+        </span>
+      </div>
+      {/* The caveat travels WITH the number, not in a footnote nobody reads. */}
+      <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}
+    </div>
+  );
+}