create-brainerce-store 1.73.0 → 1.74.0

package/templates/nextjs/designs/atelier/ui/cart/cart-summary.tsx

@@ -1,107 +1,106 @@
-'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 { cn } from '@/core/lib/utils';
-
-interface CartSummaryProps {
-  className?: string;
-}
-
-/**
- * Order summary (subtotal, rule/coupon discounts, shipping, tax note, total);
- * all figures come from useCart().totals and useCart().cart. Every discount
- * branch is kept — merchants rely on the per-rule breakdown.
- */
-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 (
-    <section className={cn(className)}>
-      <h3 className="mb-4 font-sans text-base font-semibold">{t('orderSummary')}</h3>
-
-      <dl className="space-y-2.5 text-sm">
-        {/* Subtotal */}
-        <div className="flex items-center justify-between gap-4">
-          <dt className="text-muted-foreground">{tc('subtotal')}</dt>
-          <dd className="font-medium">{formatPrice(totals.subtotal, { currency }) as string}</dd>
-        </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 gap-4">
-                <dt className="text-primary">{rule.ruleName}</dt>
-                <dd className="font-medium text-primary">
-                  -{formatPrice(parseFloat(rule.discountAmount), { currency }) as string}
-                </dd>
-              </div>
-            ))
-          : ruleAmt > 0 && (
-              <div className="flex items-center justify-between gap-4">
-                <dt className="text-primary">{tc('generalDiscount')}</dt>
-                <dd className="font-medium text-primary">
-                  -{formatPrice(ruleAmt, { currency }) as string}
-                </dd>
-              </div>
-            )}
-
-        {/* Coupon discount */}
-        {cart?.couponCode && couponAmt > 0 && (
-          <div className="flex items-center justify-between gap-4">
-            <dt className="text-primary">
-              {tc('couponDiscount')} ({cart.couponCode})
-            </dt>
-            <dd className="font-medium text-primary">
-              -{formatPrice(couponAmt, { currency }) as string}
-            </dd>
-          </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 gap-4">
-              <dt className="text-primary">{tc('discount')}</dt>
-              <dd className="font-medium text-primary">
-                -{formatPrice(totals.discount, { currency }) as string}
-              </dd>
-            </div>
-          )}
-
-        {/* Shipping */}
-        {totals.shipping > 0 && (
-          <div className="flex items-center justify-between gap-4">
-            <dt className="text-muted-foreground">{tc('shipping')}</dt>
-            <dd className="font-medium">{formatPrice(totals.shipping, { currency }) as string}</dd>
-          </div>
-        )}
-
-        {/* Tax */}
-        <div className="flex items-center justify-between gap-4">
-          <dt className="text-muted-foreground">{tc('tax')}</dt>
-          <dd className="text-muted-foreground">{t('taxAtCheckout')}</dd>
-        </div>
-
-        {/* Total */}
-        <div className="flex items-center justify-between gap-4 border-t pt-3">
-          <dt className="text-base font-semibold text-foreground">{tc('total')}</dt>
-          <dd className="text-lg font-bold text-foreground">
-            {formatPrice(totals.total, { currency }) as string}
-          </dd>
-        </div>
-      </dl>
-    </section>
-  );
-}
+'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 { cn } from '@/core/lib/utils';
+
+interface CartSummaryProps {
+  className?: string;
+}
+
+/**
+ * Order summary (subtotal, rule/coupon discounts, shipping, tax note, total);
+ * all figures come from useCart().totals and useCart().cart. Every discount
+ * branch is kept — merchants rely on the per-rule breakdown.
+ */
+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 (
+    <section className={cn(className)}>
+      <h3 className="mb-4 font-sans text-base font-semibold">{t('orderSummary')}</h3>
+
+      <dl className="space-y-2.5 text-sm">
+        {/* Subtotal */}
+        <div className="flex items-center justify-between gap-4">
+          <dt className="text-muted-foreground">{tc('subtotal')}</dt>
+          <dd className="font-medium">{formatPrice(totals.subtotal, { currency }) as string}</dd>
+        </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 gap-4">
+                <dt className="text-primary">{rule.ruleName}</dt>
+                <dd className="font-medium text-primary">
+                  -{formatPrice(parseFloat(rule.discountAmount), { currency }) as string}
+                </dd>
+              </div>
+            ))
+          : ruleAmt > 0 && (
+              <div className="flex items-center justify-between gap-4">
+                <dt className="text-primary">{tc('generalDiscount')}</dt>
+                <dd className="font-medium text-primary">
+                  -{formatPrice(ruleAmt, { currency }) as string}
+                </dd>
+              </div>
+            )}
+
+        {/* Coupon discount */}
+        {cart?.couponCode && couponAmt > 0 && (
+          <div className="flex items-center justify-between gap-4">
+            <dt className="text-primary">
+              {tc('couponDiscount')} ({cart.couponCode})
+            </dt>
+            <dd className="font-medium text-primary">
+              -{formatPrice(couponAmt, { currency }) as string}
+            </dd>
+          </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 gap-4">
+              <dt className="text-primary">{tc('discount')}</dt>
+              <dd className="font-medium text-primary">
+                -{formatPrice(totals.discount, { currency }) as string}
+              </dd>
+            </div>
+          )}
+
+        {/* Shipping */}
+        {totals.shipping > 0 && (
+          <div className="flex items-center justify-between gap-4">
+            <dt className="text-muted-foreground">{tc('shipping')}</dt>
+            <dd className="font-medium">{formatPrice(totals.shipping, { currency }) as string}</dd>
+          </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 />
+
+        {/* Total */}
+        <div className="flex items-center justify-between gap-4 border-t pt-3">
+          <dt className="text-base font-semibold text-foreground">{tc('total')}</dt>
+          <dd className="text-lg font-bold text-foreground">
+            {formatPrice(totals.total, { currency }) as string}
+          </dd>
+        </div>
+      </dl>
+    </section>
+  );
+}

package/templates/nextjs/designs/atelier/ui/cart/cart-view.tsx

@@ -29,6 +29,12 @@ export function CartView() {
     bundles,
     reservationExpired,
     unavailableItems,
+    selectedItemIds,
+    selectedItems,
+    toggleItemSelected,
+    allSelected,
+    setAllSelected,
+    checkoutHref,
     canProceedToCheckout,
     onReservationExpired,
   } = useCartPage();
@@ -83,19 +89,44 @@ 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="mb-3 flex items-center gap-3 px-1">
+            <input
+              id="cart-select-all"
+              type="checkbox"
+              checked={allSelected}
+              onChange={(event) => setAllSelected(event.target.checked)}
+              className="accent-primary h-4 w-4 cursor-pointer"
+            />
+            <label htmlFor="cart-select-all" className="text-foreground cursor-pointer text-sm">
+              {tc('all')}
+            </label>
+          </div>
+
           {/* Cart items */}
           <ul className="card divide-y overflow-hidden">
             {cart.items.map((item) => (
-              <li key={item.id} className="p-4 sm:p-5">
-                <CartItem item={item} onUpdate={refreshCart} />
-                {upgrades?.upgrades?.[item.productId] && (
-                  <CartUpgradeBanner
-                    suggestion={upgrades.upgrades[item.productId]}
-                    cartItem={item}
-                    onUpgrade={refreshCart}
-                    className="mt-4"
-                  />
-                )}
+              <li key={item.id} className="flex items-start gap-3 p-4 sm:p-5">
+                <input
+                  type="checkbox"
+                  checked={selectedItemIds.includes(item.id)}
+                  onChange={() => toggleItemSelected(item.id)}
+                  aria-label={item.product.name}
+                  className="accent-primary mt-8 h-4 w-4 shrink-0 cursor-pointer"
+                />
+                <div className="min-w-0 flex-1">
+                  <CartItem item={item} onUpdate={refreshCart} />
+                  {upgrades?.upgrades?.[item.productId] && (
+                    <CartUpgradeBanner
+                      suggestion={upgrades.upgrades[item.productId]}
+                      cartItem={item}
+                      onUpgrade={refreshCart}
+                      className="mt-4"
+                    />
+                  )}
+                </div>
               </li>
             ))}
           </ul>
@@ -128,13 +159,27 @@ export function CartView() {
         <aside className="lg:sticky lg:top-24">
           <div className="card space-y-5 p-5 sm:p-6">
             <FreeShippingBar />
+            {/* 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 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 ? (
-              <Link href="/checkout" className="btn-primary btn-lg w-full">
+              /* `checkoutHref` carries `?items=` only for a strict subset; a
+                 full cart links to a bare /checkout exactly as before. */
+              <Link href={checkoutHref} className="btn-primary btn-lg w-full">
                 {t('proceedToCheckout')}
                 <IconArrowEnd size={20} className="rtl-flip" />
               </Link>

package/templates/nextjs/designs/atelier/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 gap-4">
+        <dt className="text-muted-foreground">{tc('tax')}</dt>
+        <dd className="text-muted-foreground">{t('taxAtCheckout')}</dd>
+      </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 gap-4">
+        <dt className="text-muted-foreground">{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>
+      {/* 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>
+  );
+}

package/templates/nextjs/designs/atelier/ui/home/benefits-band.tsx

@@ -10,7 +10,16 @@ const BENEFITS = [
   { icon: IconReturn, titleKey: 'benefit4Title', descKey: 'benefit4Desc' },
 ] as const;
 
-/** Trust/benefits row under the hero — icons + short promises. */
+/**
+ * Trust/benefits row under the hero.
+ *
+ * The copy here deliberately states no policy the store has not configured.
+ * Do not restore claims like "free nationwide delivery", "30-day returns" or
+ * "full warranty": a new store has no such policy, and shipping a storefront
+ * that asserts one publishes a false promise under the merchant's name. Replace
+ * these strings with the merchant's real terms once they exist, or point at the
+ * policy pages.
+ */
 export function BenefitsBand() {
   const t = useTranslations('home');