create-brainerce-store 1.73.0 → 1.74.0

package/templates/nextjs/base/src/components/checkout/tax-display.tsx

@@ -1,74 +1,141 @@
-'use client';
-
-import type { TaxBreakdown } from 'brainerce';
-import { formatPrice } from 'brainerce';
-import { useTranslations } from '@/core/lib/translations';
-import { useCurrency } from '@/core/lib/use-currency';
-import { cn } from '@/core/lib/utils';
-
-interface TaxDisplayProps {
-  /** Whether shipping address has been set */
-  addressSet: boolean;
-  /** Tax amount string from checkout (only available after address is set) */
-  taxAmount?: string;
-  /** Detailed tax breakdown (optional) */
-  taxBreakdown?: TaxBreakdown | null;
-  className?: string;
-}
-
-export function TaxDisplay({ addressSet, taxAmount, taxBreakdown, className }: TaxDisplayProps) {
-  const t = useTranslations('checkout');
-  const tc = useTranslations('common');
-  const currency = useCurrency();
-
-  // Before address is set
-  if (!addressSet) {
-    return (
-      <div className={cn('flex items-center justify-between text-sm', className)}>
-        <span className="text-muted-foreground">{tc('tax')}</span>
-        <span className="text-muted-foreground text-xs">{t('calculatedAfterAddress')}</span>
-      </div>
-    );
-  }
-
-  // Inclusive-pricing stores back the tax out of the displayed price, so
-  // `checkout.taxAmount` is stored as 0 and the real VAT lives on the
-  // aggregated breakdown. Surface whichever is present.
-  const explicitTax = taxAmount ? parseFloat(taxAmount) : 0;
-  const tax =
-    explicitTax > 0
-      ? explicitTax
-      : typeof taxBreakdown?.totalTax === 'number'
-        ? taxBreakdown.totalTax
-        : 0;
-
-  // When there's a per-rate breakdown, prefer per-row display ("VAT 18% ₪3.05").
-  // Otherwise show a single aggregated tax line.
-  const hasBreakdown = !!taxBreakdown?.breakdown && taxBreakdown.breakdown.length > 0;
-
-  if (hasBreakdown) {
-    return (
-      <div className={cn('space-y-1', className)}>
-        {taxBreakdown!.breakdown.map((item, index) => (
-          <div key={index} className="flex items-center justify-between text-sm">
-            <span className="text-muted-foreground">
-              {item.name} ({(item.rate * 100).toFixed(1)}%)
-            </span>
-            <span className="text-foreground font-medium">
-              {formatPrice(item.amount, { currency }) as string}
-            </span>
-          </div>
-        ))}
-      </div>
-    );
-  }
-
-  return (
-    <div className={cn('flex items-center justify-between text-sm', className)}>
-      <span className="text-muted-foreground">{tc('tax')}</span>
-      <span className="text-foreground font-medium">
-        {tax > 0 ? (formatPrice(tax, { currency }) as string) : t('noTax')}
-      </span>
-    </div>
-  );
-}
+'use client';
+
+import type { TaxBreakdown } from 'brainerce';
+import { formatPrice } from 'brainerce';
+import { useTranslations } from '@/core/lib/translations';
+import { useCurrency } from '@/core/lib/use-currency';
+import { cn } from '@/core/lib/utils';
+
+interface TaxDisplayProps {
+  /** Whether shipping address has been set */
+  addressSet: boolean;
+  /** Tax amount string from checkout (only available after address is set) */
+  taxAmount?: string;
+  /** Detailed tax breakdown (optional) */
+  taxBreakdown?: TaxBreakdown | null;
+  className?: string;
+}
+
+export function TaxDisplay({ addressSet, taxAmount, taxBreakdown, className }: TaxDisplayProps) {
+  const t = useTranslations('checkout');
+  const tc = useTranslations('common');
+  const currency = useCurrency();
+
+  // Before address is set
+  if (!addressSet) {
+    return (
+      <div className={cn('flex items-center justify-between text-sm', className)}>
+        <span className="text-muted-foreground">{tc('tax')}</span>
+        <span className="text-muted-foreground text-xs">{t('calculatedAfterAddress')}</span>
+      </div>
+    );
+  }
+
+  // Inclusive-pricing stores back the tax out of the displayed price, so
+  // `checkout.taxAmount` is stored as 0 and the real VAT lives on the
+  // aggregated breakdown. Surface whichever is present.
+  const explicitTax = taxAmount ? parseFloat(taxAmount) : 0;
+  const tax =
+    explicitTax > 0
+      ? explicitTax
+      : typeof taxBreakdown?.totalTax === 'number'
+        ? taxBreakdown.totalTax
+        : 0;
+
+  // Inclusive (VAT) stores already have this tax INSIDE the line prices, so it
+  // has to read as informational and never as an amount added on top. Without
+  // it the summary prints Subtotal + Shipping + GST + QST above a Total that is
+  // not their sum, and the shopper reads that as a mistake. Same treatment, and
+  // deliberately the same wording, as the order history summary.
+  const taxIncluded = !!taxBreakdown?.pricesIncludeTax;
+
+  // When there's a per-rate breakdown, prefer per-row display ("VAT 18% ₪3.05").
+  // Otherwise show a single aggregated tax line.
+  //
+  // `breakdown` holds ONE ROW PER TAX and is routinely more than one: a Quebec
+  // order carries GST 5% and QST 9.975%, a British Columbia one GST 5% and
+  // PST 7%, and both have to be shown separately. Rendering every row is not an
+  // edge case to handle later.
+  //
+  // Read every field defensively. The breakdown is a FROZEN SNAPSHOT: a row
+  // written by older code can reach us with no rate, no name, or a non-numeric
+  // amount, and `item.rate * 100` on such a row prints "NaN%" on something the
+  // buyer treats as a receipt. This mirrors `resolveDisplayTax()` in
+  // @brainerce/types, the platform's canonical filter — keep a row only when it
+  // has a printable name AND a finite amount, and turn a missing rate into null
+  // instead of dropping the row, because the name and the amount are the parts
+  // the shopper actually needs.
+  const taxRows: Array<{ name: string; rate: number | null; amount: number }> = (
+    taxBreakdown?.breakdown ?? []
+  )
+    .filter(
+      (row) =>
+        !!row &&
+        typeof row.name === 'string' &&
+        row.name.length > 0 &&
+        typeof row.amount === 'number' &&
+        Number.isFinite(row.amount)
+    )
+    .map((row) => ({
+      name: row.name,
+      rate: typeof row.rate === 'number' && Number.isFinite(row.rate) ? row.rate : null,
+      amount: row.amount,
+    }));
+
+  // Driven by the rows that SURVIVED the filter, not by the raw array: if every
+  // row was unprintable, fall through to the single aggregated line below
+  // rather than render an empty box where the tax used to be.
+  const hasBreakdown = taxRows.length > 0;
+
+  if (hasBreakdown) {
+    return (
+      <div className={cn('space-y-1', className)}>
+        {taxRows.map((item, index) => {
+          // Parenthetical parts, in order: the rate when the snapshot carried
+          // one, then the inclusive marker when prices already contain the tax.
+          // Neither present leaves the bare name.
+          //
+          // Joined with a SPACE, not a comma. In Hebrew this renders
+          // `מע"מ (18% כלול)`, and a comma sitting between a Latin numeral and
+          // an RTL word is a bidi neutral that can reorder on screen. The cart's
+          // tax estimate line already ships the same `<name> <rate>%`
+          // space-joined construction, so this follows a proven pattern.
+          //
+          // Rate is printed to 3 decimals with trailing zeros trimmed.
+          // `toFixed(1)` prints Quebec's QST 9.975% as "10.0%", which is the
+          // wrong number on something a buyer treats as a receipt.
+          const parts: string[] = [];
+          if (item.rate !== null) parts.push(`${Number((item.rate * 100).toFixed(3))}%`);
+          if (taxIncluded) parts.push(tc('inclSuffix'));
+
+          return (
+            <div
+              key={`${item.name}-${index}`}
+              className="flex items-center justify-between text-sm"
+            >
+              <span className="text-muted-foreground">
+                {item.name}
+                {parts.length > 0 ? ` (${parts.join(' ')})` : ''}
+              </span>
+              <span className="text-foreground font-medium">
+                {formatPrice(item.amount, { currency }) as string}
+              </span>
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn('flex items-center justify-between text-sm', className)}>
+      {/* An inclusive store with no per-rate breakdown lands here — it persists
+          taxAmount=0 and keeps the VAT on `totalTax` — so the label has to say
+          "included" on this line too, or the total still fails to add up. */}
+      <span className="text-muted-foreground">{taxIncluded ? tc('taxIncl') : tc('tax')}</span>
+      <span className="text-foreground font-medium">
+        {tax > 0 ? (formatPrice(tax, { currency }) as string) : t('noTax')}
+      </span>
+    </div>
+  );
+}

package/templates/nextjs/base/src/core/hooks/use-cart-page.ts

@@ -1,6 +1,6 @@
 'use client';
 
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type {
   Cart,
   CartItem,
@@ -31,9 +31,36 @@ export interface UseCartPageResult {
   /** Lines the server says cannot be bought right now (`isAvailable === false`). */
   unavailableItems: CartItem[];
   /**
-   * False while the reservation is expired or any line is unavailable. The
-   * proceed-to-checkout action must be genuinely disabled on false, not just
-   * styled as disabled.
+   * Cart line ids the shopper has ticked for checkout. Starts as every line
+   * and follows the cart: a newly added line arrives selected, a removed one
+   * drops out. This is a PARTIAL CHECKOUT selection, not a UI nicety —
+   * `createCheckout({ selectedItemIds })` is what the platform honours, and
+   * after payment the unselected lines stay in the still-ACTIVE cart.
+   */
+  selectedItemIds: string[];
+  /** Tick / untick one line. */
+  toggleItemSelected: (itemId: string) => void;
+  /** True when every line is ticked (the default, and the full-cart case). */
+  allSelected: boolean;
+  /** Tick or untick every line at once. */
+  setAllSelected: (selected: boolean) => void;
+  /**
+   * Where the proceed-to-checkout action should point. Carries the selection
+   * as `?items=` ONLY when it is a strict subset — a full cart links to a
+   * bare `/checkout`, so the default path is byte-for-byte what it was.
+   */
+  checkoutHref: string;
+  /**
+   * Lines the shopper actually ticked. Scope the summary and the checkout
+   * gate to these, not to the whole cart.
+   */
+  selectedItems: CartItem[];
+  /**
+   * False while the reservation is expired or any SELECTED line is
+   * unavailable. The proceed-to-checkout action must be genuinely disabled on
+   * false, not just styled as disabled. Scoped to the selection on purpose:
+   * an unavailable line the shopper has unticked is not going to the server,
+   * so it must not block a checkout of the rest.
    */
   canProceedToCheckout: boolean;
   /**
@@ -106,10 +133,68 @@ export function useCartPage(): UseCartPageResult {
     expiredWindow === reservationExpiresAt &&
     cart?.reservation?.hasReservation === true;
 
-  const unavailableItems = cart?.items.filter((item) => item.isAvailable === false) ?? [];
+  // ---- Partial-checkout selection ----
+  //
+  // Held as a Set of cart-line ids rather than a per-item boolean so it can be
+  // reconciled against the cart in one pass. `null` means "nothing has been
+  // untick'd yet", which is the everything-selected default — distinct from an
+  // empty Set, which is a shopper who deliberately cleared the list.
+  const [deselectedIds, setDeselectedIds] = useState<Set<string>>(() => new Set());
+
+  const items = useMemo(() => cart?.items ?? [], [cart?.items]);
+
+  // Drop ids for lines that no longer exist, so a removed-and-readded product
+  // does not come back invisibly unticked.
+  const liveItemIds = items.map((item) => item.id).join(',');
+  useEffect(() => {
+    setDeselectedIds((prev) => {
+      if (prev.size === 0) return prev;
+      const live = new Set(liveItemIds ? liveItemIds.split(',') : []);
+      const next = new Set([...prev].filter((id) => live.has(id)));
+      return next.size === prev.size ? prev : next;
+    });
+  }, [liveItemIds]);
+
+  const selectedItems = items.filter((item) => !deselectedIds.has(item.id));
+  const selectedItemIds = selectedItems.map((item) => item.id);
+  const allSelected = items.length > 0 && selectedItems.length === items.length;
+
+  const toggleItemSelected = useCallback((itemId: string) => {
+    setDeselectedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(itemId)) {
+        next.delete(itemId);
+      } else {
+        next.add(itemId);
+      }
+      return next;
+    });
+  }, []);
+
+  const setAllSelected = useCallback(
+    (selected: boolean) => {
+      setDeselectedIds(selected ? new Set() : new Set(items.map((item) => item.id)));
+    },
+    [items]
+  );
+
+  // A full cart keeps the plain `/checkout` URL so the common path is
+  // unchanged; only a strict subset carries the ids.
+  const checkoutHref =
+    allSelected || selectedItemIds.length === 0
+      ? '/checkout'
+      : `/checkout?items=${encodeURIComponent(selectedItemIds.join(','))}`;
+
+  // Reported over the whole cart (the banner names every blocked line) but
+  // gated over the selection below.
+  const unavailableItems = items.filter((item) => item.isAvailable === false);
+  const unavailableSelected = selectedItems.filter((item) => item.isAvailable === false);
 
   const canProceedToCheckout =
-    !!cart && cart.items.length > 0 && !reservationExpired && unavailableItems.length === 0;
+    !!cart &&
+    selectedItems.length > 0 &&
+    !reservationExpired &&
+    unavailableSelected.length === 0;
 
   return {
     cart,
@@ -121,6 +206,12 @@ export function useCartPage(): UseCartPageResult {
     bundles,
     reservationExpired,
     unavailableItems,
+    selectedItemIds,
+    selectedItems,
+    toggleItemSelected,
+    allSelected,
+    setAllSelected,
+    checkoutHref,
     canProceedToCheckout,
     onReservationExpired,
   };

package/templates/nextjs/base/src/core/hooks/use-home-data.ts

@@ -1,51 +1,63 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-import type { Product, DiscountBanner } from 'brainerce';
-import { getClient } from '@/core/lib/brainerce';
-
-export interface UseHomeDataResult {
-  /** Newest products for the featured grid (max 8). */
-  products: Product[];
-  /** Active store-wide discount banners. */
-  banners: DiscountBanner[];
-  /** True while the initial fetch is in flight. */
-  loading: boolean;
-}
-
-/**
- * Homepage data: featured products + discount banners.
- * Pure data/behavior — rendering lives in `ui/home/`.
- */
-export function useHomeData(): UseHomeDataResult {
-  const [products, setProducts] = useState<Product[]>([]);
-  const [banners, setBanners] = useState<DiscountBanner[]>([]);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    async function load() {
-      try {
-        const client = getClient();
-        const [productsRes, bannersRes] = await Promise.allSettled([
-          client.getProducts({ limit: 8, sortBy: 'createdAt', sortOrder: 'desc' }),
-          client.getDiscountBanners(),
-        ]);
-
-        if (productsRes.status === 'fulfilled') {
-          setProducts(productsRes.value.data);
-        }
-        if (bannersRes.status === 'fulfilled') {
-          setBanners(bannersRes.value);
-        }
-      } catch (err) {
-        console.error('Failed to load home page data:', err);
-      } finally {
-        setLoading(false);
-      }
-    }
-
-    load();
-  }, []);
-
-  return { products, banners, loading };
-}
+'use client';
+
+import { useEffect, useState } from 'react';
+import type { Product } from 'brainerce';
+import { getClient } from '@/core/lib/brainerce';
+import { useRegion } from '@/core/providers/store-provider';
+
+export interface UseHomeDataResult {
+  /** Newest products for the featured grid (max 8). */
+  products: Product[];
+  /** True while the initial fetch is in flight. */
+  loading: boolean;
+}
+
+/**
+ * Homepage data: the featured product grid.
+ *
+ * Discount banners are deliberately NOT fetched here. They render below the
+ * header on every page, so the root layout fetches them server-side and hands
+ * them to `<DiscountBannerStrip>`. Fetching them again on the home page would
+ * be a duplicate request and a second, later-arriving copy of the same strip.
+ *
+ * Pure data/behavior — rendering lives in `ui/home/`.
+ */
+export function useHomeData(): UseHomeDataResult {
+  const [products, setProducts] = useState<Product[]>([]);
+  const [loading, setLoading] = useState(true);
+  // ⛔ Every product read carries the region, or the featured grid quotes the
+  // default region's currency to a shopper the product page then prices
+  // differently. `undefined` on a store with no regions, and the SDK omits
+  // the param, so a single-region store behaves exactly as before.
+  const { regionId } = useRegion();
+
+  useEffect(() => {
+    async function load() {
+      try {
+        const client = getClient();
+        const [productsRes] = await Promise.allSettled([
+          client.getProducts({
+            limit: 8,
+            sortBy: 'createdAt',
+            sortOrder: 'desc',
+            ...(regionId ? { regionId } : {}),
+          }),
+        ]);
+
+        if (productsRes.status === 'fulfilled') {
+          setProducts(productsRes.value.data);
+        }
+      } catch (err) {
+        console.error('Failed to load home page data:', err);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    load();
+    // Re-runs when the shopper switches region, so the grid re-prices instead
+    // of keeping the currency it was first rendered with.
+  }, [regionId]);
+
+  return { products, loading };
+}