create-brainerce-store 1.71.0 → 1.73.0

package/templates/nextjs/designs/atelier/ui/cart/reservation-countdown.tsx

@@ -1,89 +1,131 @@
-'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';
-import { IconClock } from '@/ui/shared/icons';
-
-interface ReservationCountdownProps {
-  reservation: ReservationInfo;
-  className?: string;
-}
-
-/**
- * Stock-reservation countdown on the cart/checkout pages; the `reservation`
- * prop comes from useCartPage().cart.reservation. Keeps the ticking logic
- * and the expired/urgent states (exposed via data-state).
- */
-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(
-        'flex items-center gap-2.5 rounded-lg px-4 py-3 text-sm font-medium',
-        isExpired || isUrgent
-          ? 'bg-destructive/10 text-destructive'
-          : 'bg-secondary text-foreground',
-        className
-      )}
-    >
-      <span aria-hidden="true" className="shrink-0">
-        <IconClock size={18} />
-      </span>
-      {isExpired ? (
-        <p>{t('expired')}</p>
-      ) : displayMessage ? (
-        <p>{displayMessage}</p>
-      ) : (
-        <p>
-          {isUrgent ? `${t('hurry')} ` : ''}
-          {t('reservedFor')}{' '}
-          <span className="font-bold tabular-nums">
-            {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';
+import { IconClock } from '@/ui/shared/icons';
+
+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. This component only displays; it never decides what is still
+   * purchasable.
+   */
+  onExpire?: () => void;
+  className?: string;
+}
+
+/**
+ * Stock-reservation countdown on the cart/checkout pages; the `reservation`
+ * prop comes from useCartPage().cart.reservation. Keeps the ticking logic
+ * and the expired/urgent states (exposed via data-state).
+ */
+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(
+        'flex items-center gap-2.5 rounded-lg px-4 py-3 text-sm font-medium',
+        isExpired || isUrgent
+          ? 'bg-destructive/10 text-destructive'
+          : 'bg-secondary text-foreground',
+        className
+      )}
+    >
+      <span aria-hidden="true" className="shrink-0">
+        <IconClock size={18} />
+      </span>
+      {isExpired ? (
+        <div>
+          <p>{t('expired')}</p>
+          <p className="text-xs font-normal opacity-90">{t('expiredHint')}</p>
+        </div>
+      ) : displayMessage ? (
+        <p>{displayMessage}</p>
+      ) : (
+        <p>
+          {isUrgent ? `${t('hurry')} ` : ''}
+          {t('reservedFor')}{' '}
+          <span className="font-bold tabular-nums">
+            {minutes}:{seconds.toString().padStart(2, '0')}
+          </span>
+        </p>
+      )}
+    </div>
+  );
+}

package/templates/nextjs/designs/atelier/ui/product/review-form.tsx

@@ -6,7 +6,7 @@ import { getClient } from '@/core/lib/brainerce';
 import { checkAuthStatus } from '@/core/lib/auth';
 import { useTranslations } from '@/core/lib/translations';
 import type { MyProductReview, ProductReview, ReviewPhotoUpload } from 'brainerce';
-import { IconStar } from '@/ui/shared/icons';
+import { IconPlus, IconStar } from '@/ui/shared/icons';
 
 interface ReviewFormProps {
   productId: string;
@@ -381,16 +381,36 @@ function ReviewEditor({
             </ul>
           )}
 
-          <input
-            type="file"
-            accept="image/jpeg,image/png,image/webp,image/gif"
-            multiple
-            disabled={uploading || roomLeft <= 0}
-            onChange={handleFiles}
-            className="text-muted-foreground 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. */}
+          <label
+            className={`btn-outline btn-sm focus-within:ring-primary/40 inline-flex cursor-pointer items-center gap-2 focus-within:ring-2 ${
+              uploading || roomLeft <= 0 ? 'pointer-events-none opacity-50' : ''
+            }`}
+          >
+            <IconPlus size={16} />
+            {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>
 
-          {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>
           {/* Said BEFORE they submit: a shopper who uploads, submits, and cannot
               find their photo will conclude the site is broken. */}
           {photos.requiresApproval && (

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

@@ -1,123 +1,137 @@
-'use client';
-
-import { useState } from 'react';
-import { CdnImage as Image } from '@/ui/shared/cdn-image';
-import type { CartItem as CartItemType } from 'brainerce';
-import { getCartItemImage, formatPrice } from 'brainerce';
-import { getClient } from '@/core/lib/brainerce';
-import { useTranslations } from '@/core/lib/translations';
-import { useCurrency } from '@/core/lib/use-currency';
-import { LoadingSpinner } from '@/ui/shared/loading-spinner';
-import { cn } from '@/core/lib/utils';
-
-interface CartItemProps {
-  item: CartItemType;
-  onUpdate: () => void;
-  className?: string;
-}
-
-/**
- * DESIGN ME — single cart line: image, name, variant, unit price, quantity
- * controls, remove, line total; the `item` prop comes from useCartPage().cart.
- *
- * 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 CartItem({ item, onUpdate, className }: CartItemProps) {
-  const t = useTranslations('common');
-  const td = useTranslations('productDetail');
-  const currency = useCurrency();
-  const [updating, setUpdating] = useState(false);
-  const [removing, setRemoving] = useState(false);
-
-  const productName = item.product.name;
-  const imageUrl = getCartItemImage(item);
-  const variantName = item.variant?.name;
-  const unitPrice = parseFloat(item.unitPrice);
-  const lineTotal = unitPrice * item.quantity;
-
-  async function handleQuantityChange(newQuantity: number) {
-    if (newQuantity < 1 || updating) return;
-
-    try {
-      setUpdating(true);
-      const client = getClient();
-      await client.smartUpdateCartItem(item.productId, newQuantity, item.variantId || undefined);
-      onUpdate();
-    } catch (err) {
-      console.error('Failed to update quantity:', err);
-    } finally {
-      setUpdating(false);
-    }
-  }
-
-  async function handleRemove() {
-    if (removing) return;
-
-    try {
-      setRemoving(true);
-      const client = getClient();
-      await client.smartRemoveFromCart(item.productId, item.variantId || undefined);
-      onUpdate();
-    } catch (err) {
-      console.error('Failed to remove item:', err);
-    } finally {
-      setRemoving(false);
-    }
-  }
-
-  return (
-    <div className={cn('flex items-start gap-4', className)}>
-      {/* Image — `relative` + fixed box are layout-critical for next/image fill */}
-      <div className="relative h-20 w-20">
-        {imageUrl ? (
-          <Image src={imageUrl} alt={productName} fill sizes="80px" />
-        ) : (
-          <span className="sr-only">{productName}</span>
-        )}
-      </div>
-
-      {/* Details */}
-      <div>
-        <h3>{productName}</h3>
-
-        {/* Variant name */}
-        {variantName && <p>{variantName}</p>}
-
-        {/* Unit price */}
-        <p>{formatPrice(unitPrice, { currency }) as string}</p>
-
-        {/* Quantity controls */}
-        <div className="flex items-center gap-3">
-          <div className="flex items-center gap-2">
-            <button
-              type="button"
-              onClick={() => handleQuantityChange(item.quantity - 1)}
-              disabled={updating || item.quantity <= 1}
-              aria-label={td('decreaseQuantity')}
-            >
-              -
-            </button>
-            <span aria-live="polite">
-              {updating ? <LoadingSpinner size="sm" /> : item.quantity}
-            </span>
-            <button
-              type="button"
-              onClick={() => handleQuantityChange(item.quantity + 1)}
-              disabled={updating}
-              aria-label={td('increaseQuantity')}
-            >
-              +
-            </button>
-          </div>
-
-          <button type="button" onClick={handleRemove} disabled={removing}>
-            {removing ? t('removing') : t('remove')}
-          </button>
-        </div>
-      </div>
-
-      {/* Line total */}
-      <span>{formatPrice(lineTotal, { currency }) as string}</span>
-    </div>
-  );
-}
+'use client';
+
+import { useState } from 'react';
+import { CdnImage as Image } from '@/ui/shared/cdn-image';
+import type { CartItem as CartItemType } from 'brainerce';
+import { getCartItemImage, formatPrice } from 'brainerce';
+import { getClient } from '@/core/lib/brainerce';
+import { useTranslations } from '@/core/lib/translations';
+import { useCurrency } from '@/core/lib/use-currency';
+import { LoadingSpinner } from '@/ui/shared/loading-spinner';
+import { cn } from '@/core/lib/utils';
+
+interface CartItemProps {
+  item: CartItemType;
+  onUpdate: () => void;
+  className?: string;
+}
+
+/**
+ * DESIGN ME — single cart line: image, name, variant, unit price, quantity
+ * controls, remove, line total; the `item` prop comes from useCartPage().cart.
+ *
+ * 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 CartItem({ item, onUpdate, className }: CartItemProps) {
+  const t = useTranslations('common');
+  const td = useTranslations('productDetail');
+  const currency = useCurrency();
+  const [updating, setUpdating] = useState(false);
+  const [removing, setRemoving] = useState(false);
+
+  const productName = item.product.name;
+  const imageUrl = getCartItemImage(item);
+  const variantName = item.variant?.name;
+  const unitPrice = parseFloat(item.unitPrice);
+  const lineTotal = unitPrice * item.quantity;
+
+  // The server decides purchasability, per line. `isAvailable === false` means
+  // this line blocks checkout until it is removed, whether the stock ran out
+  // (a released reservation is the common cause) or the product/variant was
+  // withdrawn from sale. Keep the badge when you redesign this line.
+  const isUnavailable = item.isAvailable === false;
+  const unavailableLabel = isUnavailable
+    ? item.unavailableReason === 'OUT_OF_STOCK'
+      ? td('outOfStock')
+      : td('unavailable')
+    : null;
+
+  async function handleQuantityChange(newQuantity: number) {
+    if (newQuantity < 1 || updating) return;
+
+    try {
+      setUpdating(true);
+      const client = getClient();
+      await client.smartUpdateCartItem(item.productId, newQuantity, item.variantId || undefined);
+      onUpdate();
+    } catch (err) {
+      console.error('Failed to update quantity:', err);
+    } finally {
+      setUpdating(false);
+    }
+  }
+
+  async function handleRemove() {
+    if (removing) return;
+
+    try {
+      setRemoving(true);
+      const client = getClient();
+      await client.smartRemoveFromCart(item.productId, item.variantId || undefined);
+      onUpdate();
+    } catch (err) {
+      console.error('Failed to remove item:', err);
+    } finally {
+      setRemoving(false);
+    }
+  }
+
+  return (
+    <div className={cn('flex items-start gap-4', className)}>
+      {/* Image — `relative` + fixed box are layout-critical for next/image fill */}
+      <div className="relative h-20 w-20">
+        {imageUrl ? (
+          <Image src={imageUrl} alt={productName} fill sizes="80px" />
+        ) : (
+          <span className="sr-only">{productName}</span>
+        )}
+      </div>
+
+      {/* Details */}
+      <div>
+        <h3>{productName}</h3>
+
+        {/* Availability badge. This line blocks checkout while it shows. */}
+        {unavailableLabel && <span data-state="unavailable">{unavailableLabel}</span>}
+
+        {/* Variant name */}
+        {variantName && <p>{variantName}</p>}
+
+        {/* Unit price */}
+        <p>{formatPrice(unitPrice, { currency }) as string}</p>
+
+        {/* Quantity controls */}
+        <div className="flex items-center gap-3">
+          <div className="flex items-center gap-2">
+            <button
+              type="button"
+              onClick={() => handleQuantityChange(item.quantity - 1)}
+              disabled={updating || item.quantity <= 1}
+              aria-label={td('decreaseQuantity')}
+            >
+              -
+            </button>
+            <span aria-live="polite">
+              {updating ? <LoadingSpinner size="sm" /> : item.quantity}
+            </span>
+            <button
+              type="button"
+              onClick={() => handleQuantityChange(item.quantity + 1)}
+              disabled={updating || isUnavailable}
+              aria-label={td('increaseQuantity')}
+            >
+              +
+            </button>
+          </div>
+
+          <button type="button" onClick={handleRemove} disabled={removing}>
+            {removing ? t('removing') : t('remove')}
+          </button>
+        </div>
+      </div>
+
+      {/* Line total */}
+      <span>{formatPrice(lineTotal, { currency }) as string}</span>
+    </div>
+  );
+}