create-brainerce-store 1.72.0 → 1.73.0

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,137 +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;
-
-  // 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>
-  );
-}
+'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>
+  );
+}

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

@@ -1,140 +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 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>
-  );
-}
+'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>
+  );
+}