create-brainerce-store 1.71.0 → 1.73.0

package/templates/nextjs/ui-canvas/cart/cart-view.tsx

@@ -1,106 +1,140 @@
-'use client';
-
-import { Link } from '@/core/lib/navigation';
-import { useCartPage } from '@/core/hooks/use-cart-page';
-import { CartItem } from '@/ui/cart/cart-item';
-import { CartUpgradeBanner } from '@/ui/cart/cart-upgrade-banner';
-import { CartBundleOfferCard } from '@/ui/cart/cart-bundle-offer';
-import { CartSummary } from '@/ui/cart/cart-summary';
-import { CouponInput } from '@/ui/cart/coupon-input';
-import { CartNudges } from '@/ui/cart/cart-nudges';
-import { FreeShippingBar } from '@/ui/cart/free-shipping-bar';
-import { ReservationCountdown } from '@/ui/cart/reservation-countdown';
-import { CartRecommendationSection } from '@/ui/product/recommendation-section';
-import { LoadingSpinner } from '@/ui/shared/loading-spinner';
-import { useTranslations } from '@/core/lib/translations';
-
-export function CartView() {
-  const t = useTranslations('cart');
-  const tc = useTranslations('common');
-  const { cart, cartLoading, refreshCart, itemCount, cartRecs, upgrades, bundles } = useCartPage();
-
-  if (cartLoading) {
-    return <LoadingSpinner size="lg" />;
-  }
-
-  // Empty cart state
-  if (!cart || cart.items.length === 0) {
-    return (
-      <section>
-        {/* DESIGN ME — empty-cart state: message + continue-shopping CTA; state comes from useCartPage(). Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
-        <h1>{t('emptyTitle')}</h1>
-        <p>{t('emptySubtitle')}</p>
-        <Link href="/products">{tc('continueShopping')}</Link>
-      </section>
-    );
-  }
-
-  return (
-    <section>
-      {/* DESIGN ME — cart page: items list, upgrade/bundle offers, coupon, summary sidebar, checkout CTA, cross-sells; everything comes from useCartPage(). Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
-      <h1>
-        {t('title')} ({itemCount} {itemCount === 1 ? tc('item') : tc('items')})
-      </h1>
-
-      {/* Reservation countdown */}
-      {cart.reservation?.hasReservation && <ReservationCountdown reservation={cart.reservation} />}
-
-      <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
-        {/* Cart Items */}
-        <div className="lg:col-span-2">
-          {/* Nudges */}
-          {cart.nudges && cart.nudges.length > 0 && <CartNudges nudges={cart.nudges} />}
-
-          {/* Cart items */}
-          <ul>
-            {cart.items.map((item) => (
-              <li key={item.id}>
-                <CartItem item={item} onUpdate={refreshCart} />
-                {upgrades?.upgrades?.[item.productId] && (
-                  <CartUpgradeBanner
-                    suggestion={upgrades.upgrades[item.productId]}
-                    cartItem={item}
-                    onUpgrade={refreshCart}
-                  />
-                )}
-              </li>
-            ))}
-          </ul>
-
-          {/* Bundle offers */}
-          {bundles?.bundles && bundles.bundles.length > 0 && (
-            <section>
-              <h3>{t('bundleOffers')}</h3>
-              {bundles.bundles.map((offer) => (
-                <CartBundleOfferCard
-                  key={offer.id}
-                  offer={offer}
-                  cartId={cart.id}
-                  onAdd={refreshCart}
-                />
-              ))}
-            </section>
-          )}
-
-          {/* Coupon input */}
-          <CouponInput cart={cart} onUpdate={refreshCart} />
-        </div>
-
-        {/* Summary sidebar */}
-        <aside className="lg:col-span-1">
-          <FreeShippingBar />
-          <CartSummary />
-
-          <Link href="/checkout">{t('proceedToCheckout')}</Link>
-
-          <Link href="/products">{tc('continueShopping')}</Link>
-        </aside>
-      </div>
-
-      {/* Cross-sell recommendations */}
-      {cartRecs?.recommendations && cartRecs.recommendations.length > 0 && (
-        <CartRecommendationSection title={t('youMightAlsoNeed')} items={cartRecs.recommendations} />
-      )}
-    </section>
-  );
-}
+'use client';
+
+import { Link } from '@/core/lib/navigation';
+import { useCartPage } from '@/core/hooks/use-cart-page';
+import { CartItem } from '@/ui/cart/cart-item';
+import { CartUpgradeBanner } from '@/ui/cart/cart-upgrade-banner';
+import { CartBundleOfferCard } from '@/ui/cart/cart-bundle-offer';
+import { CartSummary } from '@/ui/cart/cart-summary';
+import { CouponInput } from '@/ui/cart/coupon-input';
+import { CartNudges } from '@/ui/cart/cart-nudges';
+import { FreeShippingBar } from '@/ui/cart/free-shipping-bar';
+import { ReservationCountdown } from '@/ui/cart/reservation-countdown';
+import { CartRecommendationSection } from '@/ui/product/recommendation-section';
+import { LoadingSpinner } from '@/ui/shared/loading-spinner';
+import { useTranslations } from '@/core/lib/translations';
+
+export function CartView() {
+  const t = useTranslations('cart');
+  const tc = useTranslations('common');
+  const tr = useTranslations('reservation');
+  const {
+    cart,
+    cartLoading,
+    refreshCart,
+    itemCount,
+    cartRecs,
+    upgrades,
+    bundles,
+    reservationExpired,
+    unavailableItems,
+    canProceedToCheckout,
+    onReservationExpired,
+  } = useCartPage();
+
+  if (cartLoading) {
+    return <LoadingSpinner size="lg" />;
+  }
+
+  // Empty cart state
+  if (!cart || cart.items.length === 0) {
+    return (
+      <section>
+        {/* DESIGN ME — empty-cart state: message + continue-shopping CTA; state comes from useCartPage(). Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
+        <h1>{t('emptyTitle')}</h1>
+        <p>{t('emptySubtitle')}</p>
+        <Link href="/products">{tc('continueShopping')}</Link>
+      </section>
+    );
+  }
+
+  return (
+    <section>
+      {/* DESIGN ME — cart page: items list, upgrade/bundle offers, coupon, summary sidebar, checkout CTA, cross-sells; everything comes from useCartPage(). Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
+      <h1>
+        {t('title')} ({itemCount} {itemCount === 1 ? tc('item') : tc('items')})
+      </h1>
+
+      {/* Reservation countdown. onExpire refreshes the cart and closes the
+          checkout gate below. Passing it is what makes expiry mean anything. */}
+      {cart.reservation?.hasReservation && (
+        <ReservationCountdown reservation={cart.reservation} onExpire={onReservationExpired} />
+      )}
+
+      <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
+        {/* Cart Items */}
+        <div className="lg:col-span-2">
+          {/* Nudges */}
+          {cart.nudges && cart.nudges.length > 0 && <CartNudges nudges={cart.nudges} />}
+
+          {/* Cart items */}
+          <ul>
+            {cart.items.map((item) => (
+              <li key={item.id}>
+                <CartItem item={item} onUpdate={refreshCart} />
+                {upgrades?.upgrades?.[item.productId] && (
+                  <CartUpgradeBanner
+                    suggestion={upgrades.upgrades[item.productId]}
+                    cartItem={item}
+                    onUpgrade={refreshCart}
+                  />
+                )}
+              </li>
+            ))}
+          </ul>
+
+          {/* Bundle offers */}
+          {bundles?.bundles && bundles.bundles.length > 0 && (
+            <section>
+              <h3>{t('bundleOffers')}</h3>
+              {bundles.bundles.map((offer) => (
+                <CartBundleOfferCard
+                  key={offer.id}
+                  offer={offer}
+                  cartId={cart.id}
+                  onAdd={refreshCart}
+                />
+              ))}
+            </section>
+          )}
+
+          {/* Coupon input */}
+          <CouponInput cart={cart} onUpdate={refreshCart} />
+        </div>
+
+        {/* Summary sidebar */}
+        <aside className="lg:col-span-1">
+          <FreeShippingBar />
+          <CartSummary />
+
+          {/* 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">{t('proceedToCheckout')}</Link>
+          ) : (
+            <>
+              <button type="button" disabled>
+                {t('proceedToCheckout')}
+              </button>
+              <p data-state="blocked">
+                {unavailableItems.length > 0
+                  ? t('unavailableItemsHint')
+                  : reservationExpired
+                    ? tr('expiredHint')
+                    : null}
+              </p>
+            </>
+          )}
+
+          <Link href="/products">{tc('continueShopping')}</Link>
+        </aside>
+      </div>
+
+      {/* Cross-sell recommendations */}
+      {cartRecs?.recommendations && cartRecs.recommendations.length > 0 && (
+        <CartRecommendationSection title={t('youMightAlsoNeed')} items={cartRecs.recommendations} />
+      )}
+    </section>
+  );
+}

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

@@ -1,81 +1,124 @@
-'use client';
-
-import { useState, useEffect, useCallback } from 'react';
-import type { ReservationInfo } from 'brainerce';
-import { useTranslations } from '@/core/lib/translations';
-import { cn } from '@/core/lib/utils';
-
-interface ReservationCountdownProps {
-  reservation: ReservationInfo;
-  className?: string;
-}
-
-/**
- * DESIGN ME — stock-reservation countdown on the cart/checkout pages; the
- * `reservation` prop comes from useCartPage().cart.reservation. Keep the
- * ticking logic 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, className }: ReservationCountdownProps) {
-  const t = useTranslations('reservation');
-  const [remainingSeconds, setRemainingSeconds] = useState<number>(0);
-
-  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]);
-
-  useEffect(() => {
-    setRemainingSeconds(calculateRemaining());
-
-    const interval = setInterval(() => {
-      const remaining = calculateRemaining();
-      setRemainingSeconds(remaining);
-
-      if (remaining <= 0) {
-        clearInterval(interval);
-      }
-    }, 1000);
-
-    return () => clearInterval(interval);
-  }, [calculateRemaining]);
-
-  if (!reservation.hasReservation) return null;
-
-  const minutes = Math.floor(remainingSeconds / 60);
-  const seconds = remainingSeconds % 60;
-  const isExpired = remainingSeconds <= 0;
-  const isUrgent = remainingSeconds > 0 && remainingSeconds < 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>
-      ) : 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/product/review-form.tsx

@@ -323,7 +323,15 @@ function ReviewEditor({
       </label>
 
       {/* DESIGN ME — review photo picker. Renders only when the store allows
-          photos; every limit comes from `photos`, never hard-coded. */}
+          photos; every limit comes from `photos`, never hard-coded.
+          Two things to get right when you style it. Wrap the input in a <label>
+          and hide the input with sr-only: the browser's own "Choose Files" button
+          cannot be styled and will look nothing like the rest of your form. Then
+          paint your own disabled state, because `disabled` on a hidden input greys
+          NOTHING — at photos.maxPerReview the control would look alive and do
+          nothing. Say why it is disabled. Keep it a real input (no ref.click()) so
+          keyboard and assistive tech reach it, and add focus-within so the focus
+          ring the native control gave you for free survives. */}
       {photos.enabled && (
         <fieldset>
           <legend>