create-brainerce-store 1.72.0 → 1.74.0

package/templates/nextjs/ui-canvas/cart/reservation-countdown.tsx

@@ -1,124 +1,124 @@
-'use client';
-
-import { useState, useEffect, useCallback, useRef } from 'react';
-import type { ReservationInfo } from 'brainerce';
-import { useTranslations } from '@/core/lib/translations';
-import { cn } from '@/core/lib/utils';
-
-interface ReservationCountdownProps {
-  reservation: ReservationInfo;
-  /**
-   * Fired once per reservation window when the timer reaches zero, including
-   * when the page opens on an already-expired reservation. Wired to
-   * `useCartPage().onReservationExpired`, which refreshes the cart and blocks
-   * checkout. Keep the prop when you redesign this: the gate lives in the
-   * hook, but nothing tells it about the expiry unless this still calls it.
-   */
-  onExpire?: () => void;
-  className?: string;
-}
-
-/**
- * DESIGN ME — stock-reservation countdown on the cart/checkout pages; the
- * `reservation` prop comes from useCartPage().cart.reservation. Keep the
- * ticking logic, the `onExpire` call and the expired/urgent states (exposed
- * via data-state).
- *
- * Building blocks: shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons are installed and ready to compose with.
- */
-export function ReservationCountdown({
-  reservation,
-  onExpire,
-  className,
-}: ReservationCountdownProps) {
-  const t = useTranslations('reservation');
-  // `null` means "not measured yet". Server-rendered HTML must not compute a
-  // time, or it disagrees with the client on hydration; starting at 0 instead
-  // would render the expired state for one frame on a perfectly live
-  // reservation, and would fire onExpire on every mount.
-  const [remainingSeconds, setRemainingSeconds] = useState<number | null>(null);
-
-  const calculateRemaining = useCallback(() => {
-    if (!reservation.expiresAt) return 0;
-    const expiresAtMs = new Date(reservation.expiresAt).getTime();
-    const nowMs = Date.now();
-    return Math.max(0, Math.floor((expiresAtMs - nowMs) / 1000));
-  }, [reservation.expiresAt]);
-
-  // Report each expiry window at most once. Keyed on `expiresAt` rather than a
-  // boolean, so the cart refresh that expiry triggers (which remounts this
-  // component) cannot bounce straight back into a second report.
-  const expiresAt = reservation.expiresAt;
-  const reportedExpiryRef = useRef<string | null>(null);
-  const onExpireRef = useRef(onExpire);
-  // Kept in a ref, and synced in an effect rather than during render, so a
-  // caller passing an inline arrow does not restart the timer every render.
-  useEffect(() => {
-    onExpireRef.current = onExpire;
-  }, [onExpire]);
-
-  const reportExpired = useCallback(() => {
-    if (!expiresAt) return;
-    if (reportedExpiryRef.current === expiresAt) return;
-    reportedExpiryRef.current = expiresAt;
-    onExpireRef.current?.();
-  }, [expiresAt]);
-
-  useEffect(() => {
-    const initial = calculateRemaining();
-    setRemainingSeconds(initial);
-    if (initial <= 0) reportExpired();
-
-    const interval = setInterval(() => {
-      const remaining = calculateRemaining();
-      setRemainingSeconds(remaining);
-
-      if (remaining <= 0) {
-        clearInterval(interval);
-        reportExpired();
-      }
-    }, 1000);
-
-    return () => clearInterval(interval);
-  }, [calculateRemaining, reportExpired]);
-
-  if (!reservation.hasReservation) return null;
-
-  const displaySeconds = remainingSeconds ?? 0;
-  const minutes = Math.floor(displaySeconds / 60);
-  const seconds = displaySeconds % 60;
-  const isExpired = remainingSeconds !== null && remainingSeconds <= 0;
-  const isUrgent = displaySeconds > 0 && displaySeconds < 120;
-
-  const displayMessage = reservation.countdownMessage
-    ? reservation.countdownMessage.replace(
-        '{time}',
-        `${minutes}:${seconds.toString().padStart(2, '0')}`
-      )
-    : null;
-
-  return (
-    <div
-      role="timer"
-      data-state={isExpired ? 'expired' : isUrgent ? 'urgent' : 'active'}
-      className={cn(className)}
-    >
-      {isExpired ? (
-        <>
-          <p>{t('expired')}</p>
-          <p>{t('expiredHint')}</p>
-        </>
-      ) : displayMessage ? (
-        <p>{displayMessage}</p>
-      ) : (
-        <p>
-          {isUrgent ? `${t('hurry')} ` : ''}
-          {t('reservedFor')}{' '}
-          <span>
-            {minutes}:{seconds.toString().padStart(2, '0')}
-          </span>
-        </p>
-      )}
-    </div>
-  );
-}
+'use client';
+
+import { useState, useEffect, useCallback, useRef } from 'react';
+import type { ReservationInfo } from 'brainerce';
+import { useTranslations } from '@/core/lib/translations';
+import { cn } from '@/core/lib/utils';
+
+interface ReservationCountdownProps {
+  reservation: ReservationInfo;
+  /**
+   * Fired once per reservation window when the timer reaches zero, including
+   * when the page opens on an already-expired reservation. Wired to
+   * `useCartPage().onReservationExpired`, which refreshes the cart and blocks
+   * checkout. Keep the prop when you redesign this: the gate lives in the
+   * hook, but nothing tells it about the expiry unless this still calls it.
+   */
+  onExpire?: () => void;
+  className?: string;
+}
+
+/**
+ * DESIGN ME — stock-reservation countdown on the cart/checkout pages; the
+ * `reservation` prop comes from useCartPage().cart.reservation. Keep the
+ * ticking logic, the `onExpire` call and the expired/urgent states (exposed
+ * via data-state).
+ *
+ * Building blocks: shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons are installed and ready to compose with.
+ */
+export function ReservationCountdown({
+  reservation,
+  onExpire,
+  className,
+}: ReservationCountdownProps) {
+  const t = useTranslations('reservation');
+  // `null` means "not measured yet". Server-rendered HTML must not compute a
+  // time, or it disagrees with the client on hydration; starting at 0 instead
+  // would render the expired state for one frame on a perfectly live
+  // reservation, and would fire onExpire on every mount.
+  const [remainingSeconds, setRemainingSeconds] = useState<number | null>(null);
+
+  const calculateRemaining = useCallback(() => {
+    if (!reservation.expiresAt) return 0;
+    const expiresAtMs = new Date(reservation.expiresAt).getTime();
+    const nowMs = Date.now();
+    return Math.max(0, Math.floor((expiresAtMs - nowMs) / 1000));
+  }, [reservation.expiresAt]);
+
+  // Report each expiry window at most once. Keyed on `expiresAt` rather than a
+  // boolean, so the cart refresh that expiry triggers (which remounts this
+  // component) cannot bounce straight back into a second report.
+  const expiresAt = reservation.expiresAt;
+  const reportedExpiryRef = useRef<string | null>(null);
+  const onExpireRef = useRef(onExpire);
+  // Kept in a ref, and synced in an effect rather than during render, so a
+  // caller passing an inline arrow does not restart the timer every render.
+  useEffect(() => {
+    onExpireRef.current = onExpire;
+  }, [onExpire]);
+
+  const reportExpired = useCallback(() => {
+    if (!expiresAt) return;
+    if (reportedExpiryRef.current === expiresAt) return;
+    reportedExpiryRef.current = expiresAt;
+    onExpireRef.current?.();
+  }, [expiresAt]);
+
+  useEffect(() => {
+    const initial = calculateRemaining();
+    setRemainingSeconds(initial);
+    if (initial <= 0) reportExpired();
+
+    const interval = setInterval(() => {
+      const remaining = calculateRemaining();
+      setRemainingSeconds(remaining);
+
+      if (remaining <= 0) {
+        clearInterval(interval);
+        reportExpired();
+      }
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, [calculateRemaining, reportExpired]);
+
+  if (!reservation.hasReservation) return null;
+
+  const displaySeconds = remainingSeconds ?? 0;
+  const minutes = Math.floor(displaySeconds / 60);
+  const seconds = displaySeconds % 60;
+  const isExpired = remainingSeconds !== null && remainingSeconds <= 0;
+  const isUrgent = displaySeconds > 0 && displaySeconds < 120;
+
+  const displayMessage = reservation.countdownMessage
+    ? reservation.countdownMessage.replace(
+        '{time}',
+        `${minutes}:${seconds.toString().padStart(2, '0')}`
+      )
+    : null;
+
+  return (
+    <div
+      role="timer"
+      data-state={isExpired ? 'expired' : isUrgent ? 'urgent' : 'active'}
+      className={cn(className)}
+    >
+      {isExpired ? (
+        <>
+          <p>{t('expired')}</p>
+          <p>{t('expiredHint')}</p>
+        </>
+      ) : displayMessage ? (
+        <p>{displayMessage}</p>
+      ) : (
+        <p>
+          {isUrgent ? `${t('hurry')} ` : ''}
+          {t('reservedFor')}{' '}
+          <span>
+            {minutes}:{seconds.toString().padStart(2, '0')}
+          </span>
+        </p>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,104 @@
+'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;
+}
+
+/* DESIGN ME — unstyled on purpose (canvas mode). The rules that are NOT yours
+   to change: no estimate is rendered when `appliesTax` is false or the call
+   failed, `note` is rendered verbatim, and the "calculated at checkout" caveat
+   stays beside the figure. */
+export function TaxEstimateLine() {
+  const t = useTranslations('cart');
+  const tc = useTranslations('common');
+  const estimate = useTaxEstimate();
+
+  if (!estimate || !estimate.appliesTax) {
+    return (
+      <div className="flex items-center justify-between gap-4">
+        <dt>{tc('tax')}</dt>
+        <dd>{t('taxAtCheckout')}</dd>
+      </div>
+    );
+  }
+
+  const label =
+    estimate.rateName && estimate.rate != null
+      ? `${estimate.rateName} ${estimate.rate}%`
+      : (estimate.rateName ?? tc('tax'));
+
+  return (
+    <div>
+      <div className="flex items-center justify-between gap-4">
+        <dt>{label}</dt>
+        <dd>{formatPrice(estimate.estimatedTax, { currency: estimate.currency }) as string}</dd>
+      </div>
+      <p>{t('taxAtCheckout')}</p>
+      {estimate.note ? <p>{estimate.note}</p> : null}
+    </div>
+  );
+}

package/templates/nextjs/ui-canvas/home/home-client.tsx

@@ -1,26 +1,24 @@
-'use client';
-
-import { useStoreInfo } from '@/core/providers/store-provider';
-import { useHomeData } from '@/core/hooks/use-home-data';
-import { LoadingSpinner } from '@/ui/shared/loading-spinner';
-import { DiscountBannerStrip } from './discount-banner-strip';
-import { HeroSection } from './hero-section';
-import { FeaturedProductsSection } from './featured-products-section';
-
-export function HomeClient() {
-  const { storeInfo, loading: storeLoading } = useStoreInfo();
-  const { products, banners, loading } = useHomeData();
-
-  if (storeLoading || loading) {
-    return <LoadingSpinner size="lg" />;
-  }
-
-  return (
-    <div>
-      {/* DESIGN ME — homepage composition: discount banners + hero + featured products; data via useHomeData() and useStoreInfo(). Add/remove/reorder sections freely. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
-      <DiscountBannerStrip banners={banners} />
-      <HeroSection storeName={storeInfo?.name} />
-      <FeaturedProductsSection products={products} />
-    </div>
-  );
-}
+'use client';
+
+import { useStoreInfo } from '@/core/providers/store-provider';
+import { useHomeData } from '@/core/hooks/use-home-data';
+import { LoadingSpinner } from '@/ui/shared/loading-spinner';
+import { HeroSection } from './hero-section';
+import { FeaturedProductsSection } from './featured-products-section';
+
+export function HomeClient() {
+  const { storeInfo, loading: storeLoading } = useStoreInfo();
+  const { products, loading } = useHomeData();
+
+  if (storeLoading || loading) {
+    return <LoadingSpinner size="lg" />;
+  }
+
+  return (
+    <div>
+      {/* DESIGN ME — homepage composition: hero + featured products; data via useHomeData() and useStoreInfo(). Add/remove/reorder sections freely. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. Discount banners are NOT composed here: the root layout renders <DiscountBannerStrip> below the header on every page, so adding one here is a second, later-arriving copy of the same strip. */}
+      <HeroSection storeName={storeInfo?.name} />
+      <FeaturedProductsSection products={products} />
+    </div>
+  );
+}

package/templates/nextjs/ui-canvas/layout/region-switcher.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+/**
+ * Region / currency switcher.
+ *
+ * ⛔ RENDERS NOTHING on a single-region store, which is almost every store.
+ * `regions.length <= 1` returns null before any markup: an empty or
+ * one-option dropdown in the header is worse than no switcher at all, and the
+ * whole regions feature is meant to be invisible until a merchant actually
+ * adds a second region.
+ *
+ * ⛔ It also renders nothing when the regions call FAILED. A brand-new store
+ * is empty and the call can fail (channel not live yet, backend hiccup); the
+ * provider swallows that and leaves `regions` at `[]`, which lands in the same
+ * early return. There is no error box and no skeleton, because a shopper has
+ * no idea what a region is and nothing here is worth interrupting them for.
+ *
+ * Why a manual switcher exists at all when the edge already guesses: the guess
+ * is an IP, and an IP is wrong for travellers, expats, VPNs and anyone behind
+ * a corporate egress. The shopper is the authority on where they are, and
+ * their choice is stored in a cookie so the SERVER renders the same prices on
+ * the next navigation instead of the client re-pricing after hydration.
+ *
+ * The labels are store data (`region.name`, `region.currency`), not UI copy,
+ * so this component needs no translation keys in any locale.
+ */
+
+import { useRegion } from '@/core/providers/store-provider';
+
+/* DESIGN ME — unstyled on purpose (canvas mode). The two rules that are NOT
+   yours to change: the early return on `regions.length <= 1`, and the fact
+   that the labels come from store data rather than a translation key. */
+export function RegionSwitcher() {
+  const { regions, region, setRegion } = useRegion();
+
+  if (regions.length <= 1 || !region) return null;
+
+  return (
+    <select
+      value={region.id}
+      onChange={(e) => setRegion(e.target.value)}
+      aria-label="Select region and currency"
+    >
+      {regions.map((r) => (
+        <option key={r.id} value={r.id}>
+          {r.name} ({r.currency})
+        </option>
+      ))}
+    </select>
+  );
+}

package/templates/nextjs/ui-canvas/layout/site-header.tsx.ejs

@@ -21,6 +21,7 @@ import { HeaderAccount } from './header-account';
 <% if (i18nEnabled) { %>
 import { LanguageSwitcher } from '@/ui/layout/language-switcher';
 <% } %>
+import { RegionSwitcher } from '@/ui/layout/region-switcher';
 
 interface SiteHeaderProps {
   /** Pre-fetched header payload (server-side). `null` triggers static fallback. */
@@ -51,6 +52,7 @@ export function SiteHeader({ header, storeName }: SiteHeaderProps) {
             <% if (i18nEnabled) { %>
             <LanguageSwitcher />
             <% } %>
+            <RegionSwitcher />
             <HeaderAccount />
             <Link href="/cart" aria-label="Cart">
               Cart
@@ -92,6 +94,7 @@ export function SiteHeader({ header, storeName }: SiteHeaderProps) {
           <% if (i18nEnabled) { %>
           <LanguageSwitcher />
           <% } %>
+          <RegionSwitcher />
 
           <HeaderAccount />