create-brainerce-store 1.72.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,127 +1,218 @@
-'use client';
-
-import { useCallback, useEffect, useRef, useState } from 'react';
-import type {
-  Cart,
-  CartItem,
-  CartRecommendationsResponse,
-  CartUpgradesResponse,
-  CartBundlesResponse,
-} from 'brainerce';
-import { getClient } from '@/core/lib/brainerce';
-import { useCart } from '@/core/providers/store-provider';
-
-export interface UseCartPageResult {
-  cart: Cart | null;
-  cartLoading: boolean;
-  refreshCart: () => Promise<void>;
-  itemCount: number;
-  /** Cross-sell recommendations for the current cart contents. */
-  cartRecs: CartRecommendationsResponse | null;
-  /** Per-item upgrade suggestions keyed by productId. */
-  upgrades: CartUpgradesResponse | null;
-  /** Bundle offers matching the current cart. */
-  bundles: CartBundlesResponse | null;
-  /**
-   * True once the stock reservation on this cart has run out and the refreshed
-   * cart still carries the same expired window. Goes back to false on its own
-   * if the server hands back a fresh reservation.
-   */
-  reservationExpired: boolean;
-  /** 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.
-   */
-  canProceedToCheckout: boolean;
-  /**
-   * Hand this to `<ReservationCountdown onExpire={...}>`. It refreshes the
-   * cart once per expiry window: the server, not the client timer, decides
-   * what is still purchasable.
-   */
-  onReservationExpired: () => void;
-}
-
-/**
- * Cart-page behavior: the shared cart state (from StoreProvider) plus the
- * enrichment fetch (recommendations / upgrades / bundles) that runs whenever
- * the cart contents change. Pure data/behavior — rendering lives in
- * `ui/cart/cart-view.tsx`.
- */
-export function useCartPage(): UseCartPageResult {
-  const { cart, cartLoading, refreshCart, itemCount } = useCart();
-  const [cartRecs, setCartRecs] = useState<CartRecommendationsResponse | null>(null);
-  const [upgrades, setUpgrades] = useState<CartUpgradesResponse | null>(null);
-  const [bundles, setBundles] = useState<CartBundlesResponse | null>(null);
-
-  // Load recommendations, upgrades, and bundles in a single request
-  useEffect(() => {
-    if (!cart?.id || cart.items.length === 0) {
-      setCartRecs(null);
-      setUpgrades(null);
-      setBundles(null);
-      return;
-    }
-    const client = getClient();
-    client
-      .getCart(cart.id, { include: ['recommendations', 'upgrades', 'bundles'] })
-      .then((enriched) => {
-        setCartRecs(enriched.recommendations ?? null);
-        setUpgrades(enriched.upgrades ?? null);
-        setBundles(enriched.bundles ?? null);
-      })
-      .catch(() => {});
-  }, [cart?.id, cart?.items.length]);
-
-  // ---- Reservation expiry ----
-  //
-  // The countdown component only ticks. Expiry is handled here, once, so all
-  // three design variants share one behaviour and a user redesigning the
-  // countdown cannot delete the gate along with the markup.
-  //
-  // Both pieces of state key on the reservation's `expiresAt`, which is the
-  // only stable identity a reservation window has:
-  //  - `handledExpiryRef` stops the refresh loop (refresh remounts the
-  //    countdown, which would otherwise report the same expiry again).
-  //  - comparing `expiredWindow` to the CURRENT `expiresAt` means a server
-  //    that renews the reservation clears the expired state by itself.
-  const reservationExpiresAt = cart?.reservation?.expiresAt ?? null;
-  const handledExpiryRef = useRef<string | null>(null);
-  const [expiredWindow, setExpiredWindow] = useState<string | null>(null);
-
-  const onReservationExpired = useCallback(() => {
-    if (!reservationExpiresAt) return;
-    setExpiredWindow(reservationExpiresAt);
-    if (handledExpiryRef.current === reservationExpiresAt) return;
-    handledExpiryRef.current = reservationExpiresAt;
-    // Re-read from the server: it is the source of truth for what survived
-    // the released reservation. `isAvailable` on each line comes back updated.
-    void refreshCart();
-  }, [reservationExpiresAt, refreshCart]);
-
-  const reservationExpired =
-    expiredWindow !== null &&
-    expiredWindow === reservationExpiresAt &&
-    cart?.reservation?.hasReservation === true;
-
-  const unavailableItems = cart?.items.filter((item) => item.isAvailable === false) ?? [];
-
-  const canProceedToCheckout =
-    !!cart && cart.items.length > 0 && !reservationExpired && unavailableItems.length === 0;
-
-  return {
-    cart,
-    cartLoading,
-    refreshCart,
-    itemCount,
-    cartRecs,
-    upgrades,
-    bundles,
-    reservationExpired,
-    unavailableItems,
-    canProceedToCheckout,
-    onReservationExpired,
-  };
-}
+'use client';
+
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import type {
+  Cart,
+  CartItem,
+  CartRecommendationsResponse,
+  CartUpgradesResponse,
+  CartBundlesResponse,
+} from 'brainerce';
+import { getClient } from '@/core/lib/brainerce';
+import { useCart } from '@/core/providers/store-provider';
+
+export interface UseCartPageResult {
+  cart: Cart | null;
+  cartLoading: boolean;
+  refreshCart: () => Promise<void>;
+  itemCount: number;
+  /** Cross-sell recommendations for the current cart contents. */
+  cartRecs: CartRecommendationsResponse | null;
+  /** Per-item upgrade suggestions keyed by productId. */
+  upgrades: CartUpgradesResponse | null;
+  /** Bundle offers matching the current cart. */
+  bundles: CartBundlesResponse | null;
+  /**
+   * True once the stock reservation on this cart has run out and the refreshed
+   * cart still carries the same expired window. Goes back to false on its own
+   * if the server hands back a fresh reservation.
+   */
+  reservationExpired: boolean;
+  /** Lines the server says cannot be bought right now (`isAvailable === false`). */
+  unavailableItems: CartItem[];
+  /**
+   * 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;
+  /**
+   * Hand this to `<ReservationCountdown onExpire={...}>`. It refreshes the
+   * cart once per expiry window: the server, not the client timer, decides
+   * what is still purchasable.
+   */
+  onReservationExpired: () => void;
+}
+
+/**
+ * Cart-page behavior: the shared cart state (from StoreProvider) plus the
+ * enrichment fetch (recommendations / upgrades / bundles) that runs whenever
+ * the cart contents change. Pure data/behavior — rendering lives in
+ * `ui/cart/cart-view.tsx`.
+ */
+export function useCartPage(): UseCartPageResult {
+  const { cart, cartLoading, refreshCart, itemCount } = useCart();
+  const [cartRecs, setCartRecs] = useState<CartRecommendationsResponse | null>(null);
+  const [upgrades, setUpgrades] = useState<CartUpgradesResponse | null>(null);
+  const [bundles, setBundles] = useState<CartBundlesResponse | null>(null);
+
+  // Load recommendations, upgrades, and bundles in a single request
+  useEffect(() => {
+    if (!cart?.id || cart.items.length === 0) {
+      setCartRecs(null);
+      setUpgrades(null);
+      setBundles(null);
+      return;
+    }
+    const client = getClient();
+    client
+      .getCart(cart.id, { include: ['recommendations', 'upgrades', 'bundles'] })
+      .then((enriched) => {
+        setCartRecs(enriched.recommendations ?? null);
+        setUpgrades(enriched.upgrades ?? null);
+        setBundles(enriched.bundles ?? null);
+      })
+      .catch(() => {});
+  }, [cart?.id, cart?.items.length]);
+
+  // ---- Reservation expiry ----
+  //
+  // The countdown component only ticks. Expiry is handled here, once, so all
+  // three design variants share one behaviour and a user redesigning the
+  // countdown cannot delete the gate along with the markup.
+  //
+  // Both pieces of state key on the reservation's `expiresAt`, which is the
+  // only stable identity a reservation window has:
+  //  - `handledExpiryRef` stops the refresh loop (refresh remounts the
+  //    countdown, which would otherwise report the same expiry again).
+  //  - comparing `expiredWindow` to the CURRENT `expiresAt` means a server
+  //    that renews the reservation clears the expired state by itself.
+  const reservationExpiresAt = cart?.reservation?.expiresAt ?? null;
+  const handledExpiryRef = useRef<string | null>(null);
+  const [expiredWindow, setExpiredWindow] = useState<string | null>(null);
+
+  const onReservationExpired = useCallback(() => {
+    if (!reservationExpiresAt) return;
+    setExpiredWindow(reservationExpiresAt);
+    if (handledExpiryRef.current === reservationExpiresAt) return;
+    handledExpiryRef.current = reservationExpiresAt;
+    // Re-read from the server: it is the source of truth for what survived
+    // the released reservation. `isAvailable` on each line comes back updated.
+    void refreshCart();
+  }, [reservationExpiresAt, refreshCart]);
+
+  const reservationExpired =
+    expiredWindow !== null &&
+    expiredWindow === reservationExpiresAt &&
+    cart?.reservation?.hasReservation === true;
+
+  // ---- 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 &&
+    selectedItems.length > 0 &&
+    !reservationExpired &&
+    unavailableSelected.length === 0;
+
+  return {
+    cart,
+    cartLoading,
+    refreshCart,
+    itemCount,
+    cartRecs,
+    upgrades,
+    bundles,
+    reservationExpired,
+    unavailableItems,
+    selectedItemIds,
+    selectedItems,
+    toggleItemSelected,
+    allSelected,
+    setAllSelected,
+    checkoutHref,
+    canProceedToCheckout,
+    onReservationExpired,
+  };
+}