create-brainerce-store 1.71.0 → 1.73.0

package/templates/nextjs/base/src/ui/cart/reservation-countdown.tsx

@@ -1,95 +1,137 @@
-'use client';
-
-import { useState, useEffect, useCallback } from 'react';
-import { Clock } from 'lucide-react';
-import type { ReservationInfo } from 'brainerce';
-import { useTranslations } from '@/core/lib/translations';
-import { cn } from '@/core/lib/utils';
-
-interface ReservationCountdownProps {
-  reservation: ReservationInfo;
-  className?: string;
-}
-
-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
-      className={cn(
-        'flex items-center gap-3 rounded-lg px-4 py-3 text-sm',
-        isExpired
-          ? 'bg-destructive/10 border-destructive/20 text-destructive border'
-          : isUrgent
-            ? 'border border-orange-200 bg-orange-50 text-orange-800 dark:border-orange-800 dark:bg-orange-950/30 dark:text-orange-300'
-            : 'bg-primary/5 border-primary/20 text-foreground border',
-        className
-      )}
-    >
-      <Clock
-        className={cn(
-          'h-5 w-5 flex-shrink-0',
-          isExpired
-            ? 'text-destructive'
-            : isUrgent
-              ? 'text-orange-600 dark:text-orange-400'
-              : 'text-primary'
-        )}
-        aria-hidden="true"
-      />
-
-      <div className="flex-1">
-        {isExpired ? (
-          <p className="font-medium">{t('expired')}</p>
-        ) : displayMessage ? (
-          <p>{displayMessage}</p>
-        ) : (
-          <p>
-            {isUrgent ? `${t('hurry')} ` : ''}
-            {t('reservedFor')}{' '}
-            <span className="font-semibold tabular-nums">
-              {minutes}:{seconds.toString().padStart(2, '0')}
-            </span>
-          </p>
-        )}
-      </div>
-    </div>
-  );
-}
+'use client';
+
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { Clock } from 'lucide-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. The handler is
+   * expected to refresh the cart and gate checkout: this component only
+   * displays, it never decides what is still purchasable. Wire it to
+   * `useCartPage().onReservationExpired`.
+   */
+  onExpire?: () => void;
+  className?: string;
+}
+
+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 banner 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
+      className={cn(
+        'flex items-center gap-3 rounded-lg px-4 py-3 text-sm',
+        isExpired
+          ? 'bg-destructive/10 border-destructive/20 text-destructive border'
+          : isUrgent
+            ? 'border border-orange-200 bg-orange-50 text-orange-800 dark:border-orange-800 dark:bg-orange-950/30 dark:text-orange-300'
+            : 'bg-primary/5 border-primary/20 text-foreground border',
+        className
+      )}
+    >
+      <Clock
+        className={cn(
+          'h-5 w-5 flex-shrink-0',
+          isExpired
+            ? 'text-destructive'
+            : isUrgent
+              ? 'text-orange-600 dark:text-orange-400'
+              : 'text-primary'
+        )}
+        aria-hidden="true"
+      />
+
+      <div className="flex-1">
+        {isExpired ? (
+          <>
+            <p className="font-medium">{t('expired')}</p>
+            <p className="text-xs opacity-90">{t('expiredHint')}</p>
+          </>
+        ) : displayMessage ? (
+          <p>{displayMessage}</p>
+        ) : (
+          <p>
+            {isUrgent ? `${t('hurry')} ` : ''}
+            {t('reservedFor')}{' '}
+            <span className="font-semibold tabular-nums">
+              {minutes}:{seconds.toString().padStart(2, '0')}
+            </span>
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}

package/templates/nextjs/base/src/ui/product/review-form.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useEffect, useState } from 'react';
-import { Star, X } from 'lucide-react';
+import { ImagePlus, Star, X } from 'lucide-react';
 import { getClient } from '@/core/lib/brainerce';
 import { checkAuthStatus } from '@/core/lib/auth';
 import { Link } from '@/core/lib/navigation';
@@ -371,7 +371,7 @@ function ReviewEditor({
                       setUploads((prev) => prev.filter((item) => item.key !== upload.key))
                     }
                     aria-label={t('removePhoto')}
-                    className="rounded-bs-none rounded-be absolute end-0 top-0 bg-black/60 px-1 text-xs text-white"
+                    className="absolute end-1 top-1 rounded-full bg-black/60 p-1 text-white"
                   >
                     <X className="h-3 w-3" aria-hidden="true" />
                   </button>
@@ -380,16 +380,38 @@ function ReviewEditor({
             </ul>
           )}
 
-          <input
-            type="file"
-            accept="image/jpeg,image/png,image/webp,image/gif"
-            multiple
-            disabled={uploading || roomLeft <= 0}
-            onChange={handleFiles}
-            className="block text-sm"
-          />
+          {/* A <label> wrapping a visually hidden input, not a bare file control.
+              The browser's own "Choose Files" button cannot be styled and looks
+              nothing like the rest of the form. Two things this has to do that the
+              native control did for free: `disabled` on a hidden input greys
+              NOTHING, so the label paints its own disabled state, and the line
+              underneath says WHY it is disabled rather than leaving a dead button.
+              The input stays a real input (no ref.click()) so keyboard and
+              assistive tech reach it, and focus-within restores the focus ring. */}
+          <Button asChild variant="outline" size="sm" className="w-fit">
+            <label
+              className={`focus-within:ring-ring inline-flex cursor-pointer items-center gap-2 focus-within:ring-2 ${
+                uploading || roomLeft <= 0 ? 'pointer-events-none opacity-50' : ''
+              }`}
+            >
+              <ImagePlus className="h-4 w-4" aria-hidden="true" />
+              {uploading ? t('photoUploading') : t('choosePhotos')}
+              <input
+                type="file"
+                accept="image/jpeg,image/png,image/webp,image/gif"
+                multiple
+                disabled={uploading || roomLeft <= 0}
+                onChange={handleFiles}
+                className="sr-only"
+              />
+            </label>
+          </Button>
 
-          {uploading && <p className="text-muted-foreground text-xs">{t('photoUploading')}</p>}
+          <p className="text-muted-foreground text-xs">
+            {roomLeft <= 0
+              ? t('photoLimitReached', { max: String(photos.maxPerReview) })
+              : t('photoFormats', { mb: String(Math.round(photos.maxBytes / (1024 * 1024))) })}
+          </p>
           {/* Say it BEFORE they submit. A shopper who uploads a photo, submits, and
               then cannot see it will conclude the site is broken. */}
           {photos.requiresApproval && (

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

@@ -1,163 +1,177 @@
-'use client';
-
-/**
- * Mini-cart drawer — a slide-over sheet anchored to the header cart side
- * (logical `end`, so it hugs the cart icon in both RTL and LTR).
- *
- * Opens via `openCartDrawer()` (fired after a successful add-to-cart);
- * the header cart icon itself still navigates to /cart — the drawer never
- * hijacks that. Closes on overlay click, Escape, the X, or any CTA.
- *
- * Stays mounted so the slide transition runs both ways; when closed it is
- * `inert` + aria-hidden so nothing inside is focusable.
- */
-import { useEffect, useRef, useState } from 'react';
-import { Link } from '@/core/lib/navigation';
-import { formatPrice } from 'brainerce';
-import { useCart } from '@/core/providers/store-provider';
-import { useTranslations } from '@/core/lib/translations';
-import { useCurrency } from '@/core/lib/use-currency';
-import { CartItem } from '@/ui/cart/cart-item';
-import { FreeShippingBar } from '@/ui/cart/free-shipping-bar';
-import { cn } from '@/core/lib/utils';
-import { IconBag, IconX } from '@/ui/shared/icons';
-
-const OPEN_EVENT = 'cart-drawer:open';
-
-/** Ask the mounted drawer to slide open (no-op during SSR). */
-export function openCartDrawer() {
-  if (typeof window !== 'undefined') {
-    window.dispatchEvent(new Event(OPEN_EVENT));
-  }
-}
-
-export function CartDrawer() {
-  const [open, setOpen] = useState(false);
-  const { cart, itemCount, totals, refreshCart } = useCart();
-  const t = useTranslations('cart');
-  const tc = useTranslations('common');
-  const currency = useCurrency();
-  const closeRef = useRef<HTMLButtonElement>(null);
-
-  useEffect(() => {
-    const onOpen = () => setOpen(true);
-    window.addEventListener(OPEN_EVENT, onOpen);
-    return () => window.removeEventListener(OPEN_EVENT, onOpen);
-  }, []);
-
-  // Open state side-effects: Escape to close, scroll lock, focus the X.
-  useEffect(() => {
-    if (!open) return;
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') setOpen(false);
-    };
-    document.addEventListener('keydown', onKey);
-    const prevOverflow = document.body.style.overflow;
-    document.body.style.overflow = 'hidden';
-    closeRef.current?.focus();
-    return () => {
-      document.removeEventListener('keydown', onKey);
-      document.body.style.overflow = prevOverflow;
-    };
-  }, [open]);
-
-  const close = () => setOpen(false);
-  const items = cart?.items ?? [];
-
-  return (
-    <div
-      aria-hidden={!open}
-      inert={!open}
-      className={cn('fixed inset-0 z-50', !open && 'pointer-events-none')}
-    >
-      {/* Overlay */}
-      <div
-        onClick={close}
-        aria-hidden="true"
-        className={cn(
-          'bg-foreground/35 absolute inset-0 backdrop-blur-[2px] transition-opacity duration-300 motion-reduce:transition-none',
-          open ? 'opacity-100' : 'opacity-0'
-        )}
-      />
-
-      {/* Panel — anchored at the logical end (same side as the cart icon) */}
-      <aside
-        role="dialog"
-        aria-modal="true"
-        aria-label={t('title')}
-        className={cn(
-          'bg-background absolute inset-y-0 end-0 flex w-full max-w-md flex-col shadow-2xl transition-transform duration-300 ease-out motion-reduce:transition-none sm:rounded-s-3xl sm:border-s',
-          open ? 'translate-x-0' : 'ltr:translate-x-full rtl:-translate-x-full'
-        )}
-      >
-        <header className="flex items-center gap-3 border-b px-5 py-4">
-          <h2 className="font-display text-foreground text-xl font-semibold">{t('title')}</h2>
-          {itemCount > 0 && (
-            <span className="bg-primary text-primary-foreground flex h-6 min-w-6 items-center justify-center rounded-full px-1.5 text-xs font-bold">
-              {itemCount}
-            </span>
-          )}
-          <button
-            ref={closeRef}
-            type="button"
-            onClick={close}
-            aria-label={tc('close')}
-            className="text-foreground hover:bg-secondary ms-auto flex h-10 w-10 items-center justify-center rounded-full transition-colors"
-          >
-            <IconX size={20} />
-          </button>
-        </header>
-
-        {items.length === 0 ? (
-          <div className="flex flex-1 flex-col items-center justify-center gap-3 px-6 text-center">
-            <span className="bg-secondary text-muted-foreground flex h-16 w-16 items-center justify-center rounded-full">
-              <IconBag size={24} />
-            </span>
-            <p className="font-display text-foreground text-lg font-semibold">{t('emptyTitle')}</p>
-            <p className="text-muted-foreground max-w-xs text-sm">{t('emptySubtitle')}</p>
-            <Link href="/products" onClick={close} className="btn-primary btn-sm mt-2">
-              {tc('continueShopping')}
-            </Link>
-          </div>
-        ) : (
-          <>
-            <div className="flex-1 overflow-y-auto px-5 py-4">
-              <FreeShippingBar className="mb-4" />
-              <ul className="divide-y">
-                {items.map((item) => (
-                  <li key={item.id} className="py-4 first:pt-0">
-                    <CartItem item={item} onUpdate={refreshCart} />
-                  </li>
-                ))}
-              </ul>
-            </div>
-
-            <footer className="bg-secondary/40 border-t px-5 py-4">
-              <div className="flex items-center justify-between text-sm">
-                <span className="text-muted-foreground">{tc('subtotal')}</span>
-                <strong className="text-foreground text-base">
-                  {formatPrice(totals.subtotal, { currency }) as string}
-                </strong>
-              </div>
-              {totals.discount > 0 && (
-                <div className="text-primary mt-1 flex items-center justify-between text-sm">
-                  <span>{tc('discount')}</span>
-                  <span>-{formatPrice(totals.discount, { currency }) as string}</span>
-                </div>
-              )}
-              <p className="text-muted-foreground mt-1 text-xs">{t('shippingAtCheckout')}</p>
-              <div className="mt-4 grid gap-2">
-                <Link href="/checkout" onClick={close} className="btn-primary btn-lg w-full">
-                  {t('proceedToCheckout')}
-                </Link>
-                <Link href="/cart" onClick={close} className="btn-outline btn-lg w-full">
-                  {t('viewCart')}
-                </Link>
-              </div>
-            </footer>
-          </>
-        )}
-      </aside>
-    </div>
-  );
-}
+'use client';
+
+/**
+ * Mini-cart drawer — a slide-over sheet anchored to the header cart side
+ * (logical `end`, so it hugs the cart icon in both RTL and LTR).
+ *
+ * Opens via `openCartDrawer()` (fired after a successful add-to-cart);
+ * the header cart icon itself still navigates to /cart — the drawer never
+ * hijacks that. Closes on overlay click, Escape, the X, or any CTA.
+ *
+ * Stays mounted so the slide transition runs both ways; when closed it is
+ * `inert` + aria-hidden so nothing inside is focusable.
+ */
+import { useEffect, useRef, useState } from 'react';
+import { Link } from '@/core/lib/navigation';
+import { formatPrice } from 'brainerce';
+import { useCart } from '@/core/providers/store-provider';
+import { useTranslations } from '@/core/lib/translations';
+import { useCurrency } from '@/core/lib/use-currency';
+import { CartItem } from '@/ui/cart/cart-item';
+import { FreeShippingBar } from '@/ui/cart/free-shipping-bar';
+import { cn } from '@/core/lib/utils';
+import { IconBag, IconX } from '@/ui/shared/icons';
+
+const OPEN_EVENT = 'cart-drawer:open';
+
+/** Ask the mounted drawer to slide open (no-op during SSR). */
+export function openCartDrawer() {
+  if (typeof window !== 'undefined') {
+    window.dispatchEvent(new Event(OPEN_EVENT));
+  }
+}
+
+export function CartDrawer() {
+  const [open, setOpen] = useState(false);
+  const { cart, itemCount, totals, refreshCart } = useCart();
+  const t = useTranslations('cart');
+  const tc = useTranslations('common');
+  const currency = useCurrency();
+  const closeRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    const onOpen = () => setOpen(true);
+    window.addEventListener(OPEN_EVENT, onOpen);
+    return () => window.removeEventListener(OPEN_EVENT, onOpen);
+  }, []);
+
+  // Open state side-effects: Escape to close, scroll lock, focus the X.
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setOpen(false);
+    };
+    document.addEventListener('keydown', onKey);
+    const prevOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    closeRef.current?.focus();
+    return () => {
+      document.removeEventListener('keydown', onKey);
+      document.body.style.overflow = prevOverflow;
+    };
+  }, [open]);
+
+  const close = () => setOpen(false);
+  const items = cart?.items ?? [];
+
+  return (
+    <div
+      aria-hidden={!open}
+      inert={!open}
+      className={cn('fixed inset-0 z-50', !open && 'pointer-events-none')}
+    >
+      {/* Overlay */}
+      <div
+        onClick={close}
+        aria-hidden="true"
+        className={cn(
+          'bg-foreground/35 absolute inset-0 backdrop-blur-[2px] transition-opacity duration-300 motion-reduce:transition-none',
+          open ? 'opacity-100' : 'opacity-0'
+        )}
+      />
+
+      {/* Panel — anchored at the logical end (same side as the cart icon) */}
+      <aside
+        role="dialog"
+        aria-modal="true"
+        aria-label={t('title')}
+        className={cn(
+          'bg-background absolute inset-y-0 end-0 flex w-full max-w-md flex-col shadow-2xl transition-transform duration-300 ease-out motion-reduce:transition-none sm:rounded-s-3xl sm:border-s',
+          open ? 'translate-x-0' : 'ltr:translate-x-full rtl:-translate-x-full'
+        )}
+      >
+        <header className="flex items-center gap-3 border-b px-5 py-4">
+          <h2 className="font-display text-foreground text-xl font-semibold">{t('title')}</h2>
+          {itemCount > 0 && (
+            <span className="bg-primary text-primary-foreground flex h-6 min-w-6 items-center justify-center rounded-full px-1.5 text-xs font-bold">
+              {itemCount}
+            </span>
+          )}
+          <button
+            ref={closeRef}
+            type="button"
+            onClick={close}
+            aria-label={tc('close')}
+            className="text-foreground hover:bg-secondary ms-auto flex h-10 w-10 items-center justify-center rounded-full transition-colors"
+          >
+            <IconX size={20} />
+          </button>
+        </header>
+
+        {items.length === 0 ? (
+          <div className="flex flex-1 flex-col items-center justify-center gap-3 px-6 text-center">
+            <span className="bg-secondary text-muted-foreground flex h-16 w-16 items-center justify-center rounded-full">
+              <IconBag size={24} />
+            </span>
+            <p className="font-display text-foreground text-lg font-semibold">{t('emptyTitle')}</p>
+            <p className="text-muted-foreground max-w-xs text-sm">{t('emptySubtitle')}</p>
+            <Link href="/products" onClick={close} className="btn-primary btn-sm mt-2">
+              {tc('continueShopping')}
+            </Link>
+          </div>
+        ) : (
+          <>
+            <div className="flex-1 overflow-y-auto px-5 py-4">
+              <FreeShippingBar className="mb-4" />
+              <ul className="divide-y">
+                {items.map((item) => (
+                  <li key={item.id} className="py-4 first:pt-0">
+                    <CartItem item={item} onUpdate={refreshCart} />
+                  </li>
+                ))}
+              </ul>
+            </div>
+
+            <footer className="bg-secondary/40 border-t px-5 py-4">
+              <div className="flex items-center justify-between text-sm">
+                <span className="text-muted-foreground">{tc('subtotal')}</span>
+                <strong className="text-foreground text-base">
+                  {formatPrice(totals.subtotal, { currency }) as string}
+                </strong>
+              </div>
+              {totals.discount > 0 && (
+                <div className="text-primary mt-1 flex items-center justify-between text-sm">
+                  <span>{tc('discount')}</span>
+                  <span>-{formatPrice(totals.discount, { currency }) as string}</span>
+                </div>
+              )}
+              <p className="text-muted-foreground mt-1 text-xs">{t('shippingAtCheckout')}</p>
+              <div className="mt-4 grid gap-2">
+                {/* Same gate as the cart page: a line the server marked
+                    unavailable blocks checkout. A disabled-looking anchor
+                    would still navigate, so use a real disabled button. */}
+                {items.some((item) => item.isAvailable === false) ? (
+                  <>
+                    <button type="button" disabled className="btn-primary btn-lg w-full opacity-50">
+                      {t('proceedToCheckout')}
+                    </button>
+                    <p className="text-destructive text-center text-xs">
+                      {t('unavailableItemsHint')}
+                    </p>
+                  </>
+                ) : (
+                  <Link href="/checkout" onClick={close} className="btn-primary btn-lg w-full">
+                    {t('proceedToCheckout')}
+                  </Link>
+                )}
+                <Link href="/cart" onClick={close} className="btn-outline btn-lg w-full">
+                  {t('viewCart')}
+                </Link>
+              </div>
+            </footer>
+          </>
+        )}
+      </aside>
+    </div>
+  );
+}