create-brainerce-store 1.85.0 → 1.86.0

package/templates/nextjs/ui-canvas/product/product-client-section.tsx

@@ -1,426 +1,428 @@
-'use client';
-
-import { CdnImage as Image } from '@/ui/shared/cdn-image';
-import type { Product, ProductMetafield, DownloadFile } from 'brainerce';
-import { useProductPage } from '@/core/hooks/use-product-page';
-import { PriceDisplay } from '@/ui/product/price-display';
-import { VariantSelector } from '@/ui/product/variant-selector';
-import { StockBadge } from '@/ui/product/stock-badge';
-import { DiscountBadge } from '@/ui/product/discount-badge';
-import { BackInStockForm, canOfferStockAlert } from '@/ui/product/back-in-stock-form';
-import { RecommendationSection } from '@/ui/product/recommendation-section';
-import { FrequentlyBoughtTogether } from '@/ui/product/frequently-bought-together';
-import { CustomizationFields } from '@/ui/product/customization-fields';
-import { ModifierGroupSelector } from '@/ui/product/modifier-group-selector';
-import { useTranslations } from '@/core/lib/translations';
-import { sanitizeProductHtml } from '@/core/lib/sanitize-html';
-
-/** Render a metafield value based on its type */
-function MetafieldValue({ field }: { field: ProductMetafield }) {
-  const tc = useTranslations('common');
-  switch (field.type) {
-    case 'IMAGE': {
-      if (!field.value) return <span>-</span>;
-      return <img src={field.value} alt={field.definitionName} className="h-16 w-16" />;
-    }
-    case 'GALLERY': {
-      let urls: string[] = [];
-      try {
-        const parsed = JSON.parse(field.value);
-        urls = Array.isArray(parsed)
-          ? parsed.filter((u: unknown) => typeof u === 'string' && u)
-          : [];
-      } catch {
-        urls = field.value ? [field.value] : [];
-      }
-      if (urls.length === 0) return <span>-</span>;
-      return (
-        <span className="flex flex-wrap gap-2">
-          {urls.map((url, i) => (
-            <img key={i} src={url} alt={`${field.definitionName} ${i + 1}`} className="h-16 w-16" />
-          ))}
-        </span>
-      );
-    }
-    case 'URL':
-      return field.value ? (
-        <a href={field.value} target="_blank" rel="noopener noreferrer">
-          {field.value}
-        </a>
-      ) : (
-        <span>-</span>
-      );
-    case 'COLOR':
-      return field.value ? <span>{field.value}</span> : <span>-</span>;
-    case 'BOOLEAN':
-      return <span>{field.value === 'true' ? tc('yes') : tc('no')}</span>;
-    case 'DATE':
-    case 'DATETIME': {
-      if (!field.value) return <span>-</span>;
-      try {
-        const date = new Date(field.value);
-        return (
-          <span>
-            {field.type === 'DATETIME' ? date.toLocaleString() : date.toLocaleDateString()}
-          </span>
-        );
-      } catch {
-        return <span>{field.value}</span>;
-      }
-    }
-    default:
-      return <span>{field.value || '-'}</span>;
-  }
-}
-
-interface ProductClientSectionProps {
-  product: Product;
-  /**
-   * From `getStoreInfo().stockAlertsEnabled` — the merchant switch for
-   * back-in-stock alerts on this storefront. Undefined on a public-storefront
-   * (storeId) client, where the setting does not apply and the feature is on.
-   */
-  stockAlertsEnabled?: boolean;
-}
-
-export function ProductClientSection({
-  product: initialProduct,
-  stockAlertsEnabled,
-}: ProductClientSectionProps) {
-  const t = useTranslations('productDetail');
-
-  const {
-    product,
-    recommendations,
-    images,
-    selectedImageIndex,
-    setSelectedImageIndex,
-    mainImageUrl,
-    selectedVariant,
-    setSelectedVariant,
-    priceInfo,
-    displayPrice,
-    inventory,
-    canPurchase,
-    description,
-    quantity,
-    setQuantity,
-    addingToCart,
-    addedMessage,
-    addToCartError,
-    handleAddToCart,
-    customizationFields,
-    customizationValues,
-    setCustomizationValues,
-    customizationErrors,
-    modifierGroups,
-    modifierSelections,
-    setModifierSelection,
-    modifierError,
-  } = useProductPage(initialProduct);
-
-  return (
-    <article>
-      {/* DESIGN ME — product page (PDP): gallery, buy box (price/stock/variants/customization/modifiers/quantity/add-to-cart), description, specs, cross-sells; everything comes from useProductPage(initialProduct). Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
-      <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
-        {/* Image Gallery */}
-        <figure>
-          {/* `relative` + `aspect-square` are layout-critical for next/image fill */}
-          <div className="relative aspect-square">
-            {mainImageUrl ? (
-              <Image
-                src={mainImageUrl}
-                alt={product.name}
-                fill
-                sizes="(max-width: 1024px) 100vw, 50vw"
-                priority
-              />
-            ) : (
-              <span className="sr-only">{product.name}</span>
-            )}
-          </div>
-
-          {/* Thumbnails */}
-          {images.length > 1 && (
-            <div className="flex flex-wrap gap-2">
-              {images.map((img, idx) => (
-                <button
-                  key={idx}
-                  type="button"
-                  onClick={() => setSelectedImageIndex(idx)}
-                  aria-pressed={selectedImageIndex === idx}
-                  className="relative h-16 w-16"
-                >
-                  <Image
-                    src={img.url}
-                    alt={img.alt || `${product.name} ${idx + 1}`}
-                    fill
-                    sizes="64px"
-                  />
-                </button>
-              ))}
-            </div>
-          )}
-          <figcaption className="sr-only">{product.name}</figcaption>
-        </figure>
-
-        {/* Product Info / buy box */}
-        <section>
-          {/* Categories */}
-          {product.categories && product.categories.length > 0 && (
-            <ul className="flex flex-wrap gap-2">
-              {product.categories.map((cat) => (
-                <li key={cat.id}>{cat.name}</li>
-              ))}
-            </ul>
-          )}
-
-          {/* Brand */}
-          {(product as { brands?: Array<{ id: string; name: string }> }).brands &&
-            (product as { brands: Array<{ id: string; name: string }> }).brands.length > 0 && (
-              <p>
-                {t('by')}{' '}
-                <span>
-                  {(product as { brands: Array<{ id: string; name: string }> }).brands
-                    .map((b) => b.name)
-                    .join(', ')}
-                </span>
-              </p>
-            )}
-
-          {/* Title */}
-          <h1>{product.name}</h1>
-
-          {/* Tags */}
-          {(product as unknown as { tags?: Array<{ id: string; name: string }> }).tags &&
-            (product as unknown as { tags: Array<{ id: string; name: string }> }).tags.length >
-              0 && (
-              <ul className="flex flex-wrap gap-1">
-                {(product as unknown as { tags: Array<{ id: string; name: string }> }).tags.map(
-                  (tag) => (
-                    <li key={tag.id}>#{tag.name}</li>
-                  )
-                )}
-              </ul>
-            )}
-
-          {/* Active discount rule on this product, as a badge. `product.discount`
-              is returned by getProductBySlug and is null/absent when no rule
-              applies, and DiscountBadge returns null on a falsy `discount`, so
-              this renders nothing on a store with no discounts configured. */}
-          <DiscountBadge discount={product.discount} />
-
-          {/* Price */}
-          <PriceDisplay
-            price={displayPrice.price}
-            salePrice={displayPrice.salePrice ?? undefined}
-            currency={displayPrice.currency}
-            size="lg"
-          />
-
-          {/* Stock / Digital badge */}
-          {product.isDownloadable ? (
-            <p>{t('instantDownload')}</p>
-          ) : (
-            <StockBadge inventory={inventory} />
-          )}
-
-          {/* Downloadable files info */}
-          {product.isDownloadable && product.downloads && product.downloads.length > 0 && (
-            <section>
-              <h2>
-                {t('filesIncluded')} ({product.downloads.length})
-              </h2>
-              <ul>
-                {product.downloads.map((file: DownloadFile) => (
-                  <li key={file.id}>
-                    <span>{file.name}</span>
-                    {file.size && (
-                      <span>
-                        {' '}
-                        (
-                        {file.size < 1024 * 1024
-                          ? `${(file.size / 1024).toFixed(0)} KB`
-                          : `${(file.size / (1024 * 1024)).toFixed(1)} MB`}
-                        )
-                      </span>
-                    )}
-                  </li>
-                ))}
-              </ul>
-            </section>
-          )}
-
-          {/* Variant Selector */}
-          {/* A KIT is bought as ONE line, but the shopper needs to see what is
-              in the box before deciding. These rows are display only — never add
-              them to the cart individually; the kit reserves its components on
-              its own. */}
-          {product.type === 'KIT' && product.kitComponents?.length ? (
-            <div className="mb-6">
-              <h2 className="mb-3 text-sm font-medium">{t('whatsInTheBox')}</h2>
-              <ul className="divide-y rounded-lg border">
-                {product.kitComponents.map((c) => (
-                  <li
-                    key={`${c.productId}-${c.variantId ?? ''}`}
-                    className="flex items-center gap-3 p-3"
-                  >
-                    {c.image ? (
-                      // eslint-disable-next-line @next/next/no-img-element
-                      <img
-                        src={c.image}
-                        alt={c.name}
-                        className="h-10 w-10 shrink-0 rounded border object-cover"
-                      />
-                    ) : (
-                      <div className="bg-muted h-10 w-10 shrink-0 rounded border" />
-                    )}
-                    <span className="flex-1 text-sm">{c.name}</span>
-                    <span className="text-muted-foreground text-sm">x{c.quantity}</span>
-                  </li>
-                ))}
-              </ul>
-            </div>
-          ) : null}
-
-          {product.type === 'VARIABLE' && product.variants && product.variants.length > 0 && (
-            <VariantSelector
-              product={product}
-              selectedVariant={selectedVariant}
-              onVariantChange={setSelectedVariant}
-            />
-          )}
-
-          {/* Customization Fields (buyer input) */}
-          {customizationFields.length > 0 && (
-            <CustomizationFields
-              fields={customizationFields}
-              values={customizationValues}
-              onChange={setCustomizationValues}
-              errors={customizationErrors}
-            />
-          )}
-
-          {/* Modifier groups (toppings, sauce, bread type, …) */}
-          {modifierGroups.length > 0 && (
-            <div>
-              {modifierGroups.map((group) => (
-                <ModifierGroupSelector
-                  key={group.attachmentId ?? group.id}
-                  group={group}
-                  value={modifierSelections[group.id] ?? []}
-                  onChange={(next) => setModifierSelection(group.id, next)}
-                  disabled={addingToCart}
-                />
-              ))}
-              {modifierError && <p role="alert">{modifierError}</p>}
-            </div>
-          )}
-
-          {/* Quantity + Add to Cart */}
-          <div className="flex items-center gap-4">
-            <div className="flex items-center gap-2">
-              <button
-                type="button"
-                onClick={() => setQuantity((q) => Math.max(1, q - 1))}
-                aria-label={t('decreaseQuantity')}
-              >
-                -
-              </button>
-              <span aria-live="polite">{quantity}</span>
-              <button
-                type="button"
-                onClick={() => setQuantity((q) => q + 1)}
-                aria-label={t('increaseQuantity')}
-              >
-                +
-              </button>
-            </div>
-
-            <button type="button" onClick={handleAddToCart} disabled={!canPurchase || addingToCart}>
-              {addingToCart
-                ? t('addingToCart')
-                : addedMessage
-                  ? t('addedToCart')
-                  : !canPurchase
-                    ? t('outOfStock')
-                    : t('addToCart')}
-            </button>
-          </div>
-
-          {/*
-            Why the add was refused. Deliberately OUTSIDE the modifier block
-            above: that block only renders when the product HAS modifier
-            groups, so a refusal shown there would be invisible on almost
-            every product and the shopper would just watch the button reset.
-          */}
-          {addToCartError && (
-            <p role="alert">
-              {addToCartError === 'CART_FULL' ? t('cartFull') : t('addToCartFailed')}
-            </p>
-          )}
-
-          {/*
-            Sold out is not the end of the page. `canOfferStockAlert` is the whole
-            gate — it also covers the merchant's switch and backorderable items,
-            where an alert would tell someone to come back and do what they can
-            already do. Pass the selected variant: without it a shopper who wanted
-            the medium is mailed when the small returns.
-          */}
-          {canOfferStockAlert(inventory, stockAlertsEnabled) && (
-            <BackInStockForm productId={product.id} variantId={selectedVariant?.id} />
-          )}
-
-          {/* Download after purchase note */}
-          {product.isDownloadable && <p>{t('downloadAfterPurchase')}</p>}
-
-          {/* Description */}
-          {description && (
-            <section>
-              <h2>{t('description')}</h2>
-              {'html' in description ? (
-                <div dangerouslySetInnerHTML={{ __html: sanitizeProductHtml(description.html) }} />
-              ) : (
-                <p className="whitespace-pre-wrap">{description.text}</p>
-              )}
-            </section>
-          )}
-
-          {/* Metafields / Specifications */}
-          {product.metafields && product.metafields.length > 0 && (
-            <section>
-              <h2>{t('specifications')}</h2>
-              <table>
-                <tbody>
-                  {product.metafields.map((field) => (
-                    <tr key={field.id}>
-                      <th scope="row">{field.definitionName}</th>
-                      <td>
-                        <MetafieldValue field={field} />
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </section>
-          )}
-        </section>
-      </div>
-
-      {/* Frequently Bought Together (cross-sells) */}
-      {recommendations?.crossSells && recommendations.crossSells.length > 0 && (
-        <FrequentlyBoughtTogether items={recommendations.crossSells} currentProduct={product} />
-      )}
-
-      {/* Upsells */}
-      {recommendations?.upsells && recommendations.upsells.length > 0 && (
-        <RecommendationSection title={t('upgradeYourChoice')} items={recommendations.upsells} />
-      )}
-
-      {/* Related products */}
-      {recommendations?.related && recommendations.related.length > 0 && (
-        <RecommendationSection title={t('similarProducts')} items={recommendations.related} />
-      )}
-    </article>
-  );
-}
+'use client';
+
+import { CdnImage as Image } from '@/ui/shared/cdn-image';
+import type { Product, ProductMetafield, DownloadFile } from 'brainerce';
+import { useProductPage } from '@/core/hooks/use-product-page';
+import { PriceDisplay } from '@/ui/product/price-display';
+import { VariantSelector } from '@/ui/product/variant-selector';
+import { StockBadge } from '@/ui/product/stock-badge';
+import { DiscountBadge } from '@/ui/product/discount-badge';
+import { BackInStockForm, canOfferStockAlert } from '@/ui/product/back-in-stock-form';
+import { RecommendationSection } from '@/ui/product/recommendation-section';
+import { FrequentlyBoughtTogether } from '@/ui/product/frequently-bought-together';
+import { CustomizationFields } from '@/ui/product/customization-fields';
+import { ModifierGroupSelector } from '@/ui/product/modifier-group-selector';
+import { useTranslations } from '@/core/lib/translations';
+import { sanitizeProductHtml } from '@/core/lib/sanitize-html';
+
+/** Render a metafield value based on its type */
+function MetafieldValue({ field }: { field: ProductMetafield }) {
+  const tc = useTranslations('common');
+  switch (field.type) {
+    case 'IMAGE': {
+      if (!field.value) return <span>-</span>;
+      return <img src={field.value} alt={field.definitionName} className="h-16 w-16" />;
+    }
+    case 'GALLERY': {
+      let urls: string[] = [];
+      try {
+        const parsed = JSON.parse(field.value);
+        urls = Array.isArray(parsed)
+          ? parsed.filter((u: unknown) => typeof u === 'string' && u)
+          : [];
+      } catch {
+        urls = field.value ? [field.value] : [];
+      }
+      if (urls.length === 0) return <span>-</span>;
+      return (
+        <span className="flex flex-wrap gap-2">
+          {urls.map((url, i) => (
+            <img key={i} src={url} alt={`${field.definitionName} ${i + 1}`} className="h-16 w-16" />
+          ))}
+        </span>
+      );
+    }
+    case 'URL':
+      return field.value ? (
+        <a href={field.value} target="_blank" rel="noopener noreferrer">
+          {field.value}
+        </a>
+      ) : (
+        <span>-</span>
+      );
+    case 'COLOR':
+      return field.value ? <span>{field.value}</span> : <span>-</span>;
+    case 'BOOLEAN':
+      return <span>{field.value === 'true' ? tc('yes') : tc('no')}</span>;
+    case 'DATE':
+    case 'DATETIME': {
+      if (!field.value) return <span>-</span>;
+      try {
+        const date = new Date(field.value);
+        return (
+          <span>
+            {field.type === 'DATETIME' ? date.toLocaleString() : date.toLocaleDateString()}
+          </span>
+        );
+      } catch {
+        return <span>{field.value}</span>;
+      }
+    }
+    default:
+      return <span>{field.value || '-'}</span>;
+  }
+}
+
+interface ProductClientSectionProps {
+  product: Product;
+  /**
+   * From `getStoreInfo().stockAlertsEnabled` — the merchant switch for
+   * back-in-stock alerts on this storefront. Undefined on a public-storefront
+   * (storeId) client, where the setting does not apply and the feature is on.
+   */
+  stockAlertsEnabled?: boolean;
+}
+
+export function ProductClientSection({
+  product: initialProduct,
+  stockAlertsEnabled,
+}: ProductClientSectionProps) {
+  const t = useTranslations('productDetail');
+
+  const {
+    product,
+    recommendations,
+    images,
+    selectedImageIndex,
+    setSelectedImageIndex,
+    mainImageUrl,
+    selectedVariant,
+    setSelectedVariant,
+    priceInfo,
+    displayPrice,
+    inventory,
+    canPurchase,
+    description,
+    quantity,
+    setQuantity,
+    addingToCart,
+    addedMessage,
+    addToCartError,
+    handleAddToCart,
+    customizationFields,
+    customizationValues,
+    setCustomizationValues,
+    customizationErrors,
+    modifierGroups,
+    modifierSelections,
+    setModifierSelection,
+    modifierError,
+  } = useProductPage(initialProduct);
+
+  return (
+    <article>
+      {/* DESIGN ME — product page (PDP): gallery, buy box (price/stock/variants/customization/modifiers/quantity/add-to-cart), description, specs, cross-sells; everything comes from useProductPage(initialProduct). Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
+      <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
+        {/* Image Gallery */}
+        <figure>
+          {/* `relative` + `aspect-square` are layout-critical for next/image fill */}
+          <div className="relative aspect-square">
+            {mainImageUrl ? (
+              <Image
+                src={mainImageUrl}
+                alt={product.name}
+                fill
+                sizes="(max-width: 1024px) 100vw, 50vw"
+                priority
+              />
+            ) : (
+              <span className="sr-only">{product.name}</span>
+            )}
+          </div>
+
+          {/* Thumbnails */}
+          {images.length > 1 && (
+            <div className="flex flex-wrap gap-2">
+              {images.map((img, idx) => (
+                <button
+                  key={idx}
+                  type="button"
+                  onClick={() => setSelectedImageIndex(idx)}
+                  aria-pressed={selectedImageIndex === idx}
+                  className="relative h-16 w-16"
+                >
+                  <Image
+                    src={img.url}
+                    alt={img.alt || `${product.name} ${idx + 1}`}
+                    fill
+                    sizes="64px"
+                  />
+                </button>
+              ))}
+            </div>
+          )}
+          <figcaption className="sr-only">{product.name}</figcaption>
+        </figure>
+
+        {/* Product Info / buy box */}
+        <section>
+          {/* Categories */}
+          {product.categories && product.categories.length > 0 && (
+            <ul className="flex flex-wrap gap-2">
+              {product.categories.map((cat) => (
+                <li key={cat.id}>{cat.name}</li>
+              ))}
+            </ul>
+          )}
+
+          {/* Brand */}
+          {(product as { brands?: Array<{ id: string; name: string }> }).brands &&
+            (product as { brands: Array<{ id: string; name: string }> }).brands.length > 0 && (
+              <p>
+                {t('by')}{' '}
+                <span>
+                  {(product as { brands: Array<{ id: string; name: string }> }).brands
+                    .map((b) => b.name)
+                    .join(', ')}
+                </span>
+              </p>
+            )}
+
+          {/* Title */}
+          <h1>{product.name}</h1>
+
+          {/* Tags */}
+          {(product as unknown as { tags?: Array<{ id: string; name: string }> }).tags &&
+            (product as unknown as { tags: Array<{ id: string; name: string }> }).tags.length >
+              0 && (
+              <ul className="flex flex-wrap gap-1">
+                {(product as unknown as { tags: Array<{ id: string; name: string }> }).tags.map(
+                  (tag) => (
+                    <li key={tag.id}>#{tag.name}</li>
+                  )
+                )}
+              </ul>
+            )}
+
+          {/* Active discount rule on this product, as a badge. `product.discount`
+              is returned by getProductBySlug and is null/absent when no rule
+              applies, and DiscountBadge returns null on a falsy `discount`, so
+              this renders nothing on a store with no discounts configured. */}
+          <DiscountBadge discount={product.discount} />
+
+          {/* Price */}
+          <PriceDisplay
+            price={displayPrice.price}
+            salePrice={displayPrice.salePrice ?? undefined}
+            currency={displayPrice.currency}
+            size="lg"
+          />
+
+          {/* Stock / Digital badge */}
+          {product.isDownloadable ? (
+            <p>{t('instantDownload')}</p>
+          ) : (
+            <StockBadge inventory={inventory} />
+          )}
+
+          {/* Downloadable files info */}
+          {product.isDownloadable && product.downloads && product.downloads.length > 0 && (
+            <section>
+              <h2>
+                {t('filesIncluded')} ({product.downloads.length})
+              </h2>
+              <ul>
+                {product.downloads.map((file: DownloadFile) => (
+                  <li key={file.id}>
+                    <span>{file.name}</span>
+                    {file.size && (
+                      <span>
+                        {' '}
+                        (
+                        {file.size < 1024 * 1024
+                          ? `${(file.size / 1024).toFixed(0)} KB`
+                          : `${(file.size / (1024 * 1024)).toFixed(1)} MB`}
+                        )
+                      </span>
+                    )}
+                  </li>
+                ))}
+              </ul>
+            </section>
+          )}
+
+          {/* Variant Selector */}
+          {/* A KIT is bought as ONE line, but the shopper needs to see what is
+              in the box before deciding. These rows are display only — never add
+              them to the cart individually; the kit reserves its components on
+              its own. */}
+          {product.type === 'KIT' && product.kitComponents?.length ? (
+            <div className="mb-6">
+              <h2 className="mb-3 text-sm font-medium">{t('whatsInTheBox')}</h2>
+              <ul className="divide-y rounded-lg border">
+                {product.kitComponents.map((c) => (
+                  <li
+                    key={`${c.productId}-${c.variantId ?? ''}`}
+                    className="flex items-center gap-3 p-3"
+                  >
+                    {c.image ? (
+                      <img
+                        src={c.image}
+                        alt={c.name}
+                        className="h-10 w-10 shrink-0 rounded border object-cover"
+                      />
+                    ) : (
+                      <div className="bg-muted h-10 w-10 shrink-0 rounded border" />
+                    )}
+                    <span className="flex-1 text-sm">{c.name}</span>
+                    <span className="text-muted-foreground text-sm">x{c.quantity}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ) : null}
+
+          {product.type === 'VARIABLE' && product.variants && product.variants.length > 0 && (
+            <VariantSelector
+              product={product}
+              selectedVariant={selectedVariant}
+              onVariantChange={setSelectedVariant}
+            />
+          )}
+
+          {/* Customization Fields (buyer input) */}
+          {customizationFields.length > 0 && (
+            <CustomizationFields
+              fields={customizationFields}
+              values={customizationValues}
+              onChange={setCustomizationValues}
+              errors={customizationErrors}
+            />
+          )}
+
+          {/* Modifier groups (toppings, sauce, bread type, …) */}
+          {modifierGroups.length > 0 && (
+            <div>
+              {modifierGroups.map((group) => (
+                <ModifierGroupSelector
+                  key={group.attachmentId ?? group.id}
+                  group={group}
+                  value={modifierSelections[group.id] ?? []}
+                  onChange={(next) => setModifierSelection(group.id, next)}
+                  disabled={addingToCart}
+                />
+              ))}
+              {modifierError && <p role="alert">{modifierError}</p>}
+            </div>
+          )}
+
+          {/* Quantity + Add to Cart */}
+          <div className="flex items-center gap-4">
+            <div className="flex items-center gap-2">
+              <button
+                type="button"
+                onClick={() => setQuantity((q) => Math.max(1, q - 1))}
+                aria-label={t('decreaseQuantity')}
+              >
+                -
+              </button>
+              <span aria-live="polite">{quantity}</span>
+              <button
+                type="button"
+                onClick={() => setQuantity((q) => q + 1)}
+                aria-label={t('increaseQuantity')}
+              >
+                +
+              </button>
+            </div>
+
+            <button type="button" onClick={handleAddToCart} disabled={!canPurchase || addingToCart}>
+              {addingToCart
+                ? t('addingToCart')
+                : addedMessage
+                  ? t('addedToCart')
+                  : !canPurchase
+                    ? t('outOfStock')
+                    : t('addToCart')}
+            </button>
+          </div>
+
+          {/*
+            Why the add was refused. Deliberately OUTSIDE the modifier block
+            above: that block only renders when the product HAS modifier
+            groups, so a refusal shown there would be invisible on almost
+            every product and the shopper would just watch the button reset.
+          */}
+          {addToCartError && (
+            <p role="alert">
+              {addToCartError === 'CART_FULL' ? t('cartFull') : t('addToCartFailed')}
+            </p>
+          )}
+
+          {/*
+            Sold out is not the end of the page. `canOfferStockAlert` is the whole
+            gate — it also covers the merchant's switch and backorderable items,
+            where an alert would tell someone to come back and do what they can
+            already do. Pass the selected variant: without it a shopper who wanted
+            the medium is mailed when the small returns.
+          */}
+          {canOfferStockAlert(inventory, stockAlertsEnabled) && (
+            <BackInStockForm productId={product.id} variantId={selectedVariant?.id} />
+          )}
+
+          {/* Download after purchase note */}
+          {product.isDownloadable && <p>{t('downloadAfterPurchase')}</p>}
+
+          {/* Description */}
+          {description && (
+            <section>
+              <h2>{t('description')}</h2>
+              {'html' in description ? (
+                // Security: merchant-authored product description HTML,
+                // sanitized via `sanitizeProductHtml` (isomorphic-dompurify,
+                // allowlisted tags) before injecting.
+                <div dangerouslySetInnerHTML={{ __html: sanitizeProductHtml(description.html) }} />
+              ) : (
+                <p className="whitespace-pre-wrap">{description.text}</p>
+              )}
+            </section>
+          )}
+
+          {/* Metafields / Specifications */}
+          {product.metafields && product.metafields.length > 0 && (
+            <section>
+              <h2>{t('specifications')}</h2>
+              <table>
+                <tbody>
+                  {product.metafields.map((field) => (
+                    <tr key={field.id}>
+                      <th scope="row">{field.definitionName}</th>
+                      <td>
+                        <MetafieldValue field={field} />
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </section>
+          )}
+        </section>
+      </div>
+
+      {/* Frequently Bought Together (cross-sells) */}
+      {recommendations?.crossSells && recommendations.crossSells.length > 0 && (
+        <FrequentlyBoughtTogether items={recommendations.crossSells} currentProduct={product} />
+      )}
+
+      {/* Upsells */}
+      {recommendations?.upsells && recommendations.upsells.length > 0 && (
+        <RecommendationSection title={t('upgradeYourChoice')} items={recommendations.upsells} />
+      )}
+
+      {/* Related products */}
+      {recommendations?.related && recommendations.related.length > 0 && (
+        <RecommendationSection title={t('similarProducts')} items={recommendations.related} />
+      )}
+    </article>
+  );
+}