create-brainerce-store 1.51.0 → 1.52.0

package/templates/nextjs/designs/atelier/ui/product/product-client-section.tsx

@@ -0,0 +1,471 @@
+'use client';
+
+import { useEffect } from 'react';
+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 { 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 { flyToCart, firstVisible } from '@/ui/shared/fly-to-cart';
+import { openCartDrawer } from '@/ui/cart/cart-drawer';
+import { sanitizeProductHtml } from '@/core/lib/sanitize-html';
+import { cn } from '@/core/lib/utils';
+import {
+  IconBag,
+  IconCheck,
+  IconMinus,
+  IconPlus,
+  IconTruck,
+  IconGem,
+  IconDownload,
+} from '@/ui/shared/icons';
+
+/** 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 rounded-lg border object-cover"
+        />
+      );
+    }
+    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 rounded-lg border object-cover"
+            />
+          ))}
+        </span>
+      );
+    }
+    case 'URL':
+      return field.value ? (
+        <a
+          href={field.value}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-primary underline underline-offset-2"
+        >
+          {field.value}
+        </a>
+      ) : (
+        <span>-</span>
+      );
+    case 'COLOR':
+      return field.value ? (
+        <span className="inline-flex items-center gap-2">
+          <span
+            aria-hidden="true"
+            className="inline-block h-4 w-4 rounded-full border"
+            style={{ backgroundColor: field.value }}
+          />
+          {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;
+}
+
+export function ProductClientSection({ product: initialProduct }: ProductClientSectionProps) {
+  const t = useTranslations('productDetail');
+
+  const {
+    product,
+    recommendations,
+    images,
+    selectedImageIndex,
+    setSelectedImageIndex,
+    mainImageUrl,
+    selectedVariant,
+    setSelectedVariant,
+    priceInfo,
+    inventory,
+    canPurchase,
+    description,
+    quantity,
+    setQuantity,
+    addingToCart,
+    addedMessage,
+    handleAddToCart,
+    customizationFields,
+    customizationValues,
+    setCustomizationValues,
+    customizationErrors,
+    modifierGroups,
+    modifierSelections,
+    setModifierSelection,
+    modifierError,
+  } = useProductPage(initialProduct);
+
+  // `addedMessage` flips true only after the server confirms the add (it
+  // stays false on validation failures), so it is the reliable moment to
+  // slide the mini-cart open.
+  useEffect(() => {
+    if (addedMessage) openCartDrawer();
+  }, [addedMessage]);
+
+  return (
+    <article className="container-narrow py-8 lg:py-12">
+      <div className="grid grid-cols-1 gap-8 lg:grid-cols-2 lg:gap-14">
+        {/* Image Gallery */}
+        <figure className="lg:sticky lg:top-24 lg:self-start">
+          {/* `relative` + `aspect-square` are layout-critical for next/image fill */}
+          <div data-pdp-gallery className="relative aspect-square overflow-hidden rounded-3xl border bg-secondary shadow-[0_28px_60px_-30px_hsl(var(--primary)/0.3)]">
+            {mainImageUrl ? (
+              <Image
+                src={mainImageUrl}
+                alt={product.name}
+                fill
+                sizes="(max-width: 1024px) 100vw, 50vw"
+                priority
+                className="object-cover"
+              />
+            ) : (
+              <span className="sr-only">{product.name}</span>
+            )}
+          </div>
+
+          {/* Thumbnails */}
+          {images.length > 1 && (
+            <div className="mt-3 flex flex-wrap gap-2.5">
+              {images.map((img, idx) => (
+                <button
+                  key={idx}
+                  type="button"
+                  onClick={() => setSelectedImageIndex(idx)}
+                  aria-pressed={selectedImageIndex === idx}
+                  className={cn(
+                    'relative h-[4.5rem] w-[4.5rem] overflow-hidden rounded-lg border-2 bg-secondary transition-colors',
+                    selectedImageIndex === idx
+                      ? 'border-primary'
+                      : 'border-transparent hover:border-border'
+                  )}
+                >
+                  <Image
+                    src={img.url}
+                    alt={img.alt || `${product.name} ${idx + 1}`}
+                    fill
+                    sizes="72px"
+                    className="object-cover"
+                  />
+                </button>
+              ))}
+            </div>
+          )}
+          <figcaption className="sr-only">{product.name}</figcaption>
+        </figure>
+
+        {/* Product Info / buy box */}
+        <section className="max-w-xl">
+          {/* Categories */}
+          {product.categories && product.categories.length > 0 && (
+            <ul className="mb-3 flex flex-wrap gap-1.5">
+              {product.categories.map((cat) => (
+                <li key={cat.id} className="badge-soft">
+                  {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 className="mb-1 text-sm text-muted-foreground">
+                {t('by')}{' '}
+                <span className="font-medium text-foreground">
+                  {(product as { brands: Array<{ id: string; name: string }> }).brands
+                    .map((b) => b.name)
+                    .join(', ')}
+                </span>
+              </p>
+            )}
+
+          {/* Title */}
+          <h1 className="text-3xl sm:text-4xl">{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="mt-2 flex flex-wrap gap-1.5 text-xs text-muted-foreground">
+                {(product as unknown as { tags: Array<{ id: string; name: string }> }).tags.map(
+                  (tag) => (
+                    <li key={tag.id}>#{tag.name}</li>
+                  )
+                )}
+              </ul>
+            )}
+
+          {/* Price + stock */}
+          <div className="mt-5 flex flex-wrap items-center gap-4 border-b pb-6">
+            <PriceDisplay
+              price={priceInfo.originalPrice}
+              salePrice={priceInfo.isOnSale ? priceInfo.price : undefined}
+              size="lg"
+            />
+            {product.isDownloadable ? (
+              <span className="badge-soft">
+                <IconDownload size={16} />
+                {t('instantDownload')}
+              </span>
+            ) : (
+              <StockBadge inventory={inventory} lowStockThreshold={5} />
+            )}
+          </div>
+
+          {/* Downloadable files info */}
+          {product.isDownloadable && product.downloads && product.downloads.length > 0 && (
+            <section className="mt-6 rounded-xl border bg-secondary/60 p-4">
+              <h2 className="text-sm font-semibold">
+                {t('filesIncluded').replace('{count}', String(product.downloads.length))}
+              </h2>
+              <ul className="mt-2 space-y-1.5 text-sm text-muted-foreground">
+                {product.downloads.map((file: DownloadFile) => (
+                  <li key={file.id} className="flex items-center gap-2">
+                    <IconDownload size={16} />
+                    <span>{file.name}</span>
+                    {file.size && (
+                      <span className="text-xs">
+                        (
+                        {file.size < 1024 * 1024
+                          ? `${(file.size / 1024).toFixed(0)} KB`
+                          : `${(file.size / (1024 * 1024)).toFixed(1)} MB`}
+                        )
+                      </span>
+                    )}
+                  </li>
+                ))}
+              </ul>
+            </section>
+          )}
+
+          {/* Variant Selector */}
+          {product.type === 'VARIABLE' && product.variants && product.variants.length > 0 && (
+            <VariantSelector
+              product={product}
+              selectedVariant={selectedVariant}
+              onVariantChange={setSelectedVariant}
+              className="mt-6"
+            />
+          )}
+
+          {/* Customization Fields (buyer input) */}
+          {customizationFields.length > 0 && (
+            <CustomizationFields
+              fields={customizationFields}
+              values={customizationValues}
+              onChange={setCustomizationValues}
+              errors={customizationErrors}
+            />
+          )}
+
+          {/* Modifier groups (gift wrap, engraving options, …) */}
+          {modifierGroups.length > 0 && (
+            <div className="mt-6 space-y-5">
+              {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" className="text-sm font-medium text-destructive">
+                  {modifierError}
+                </p>
+              )}
+            </div>
+          )}
+
+          {/* Quantity + Add to Cart */}
+          <div className="mt-7 flex flex-wrap items-center gap-3">
+            <div
+              className="flex h-12 items-center rounded-full border"
+              role="group"
+              aria-label={t('quantityLabel')}
+            >
+              <button
+                type="button"
+                onClick={() => setQuantity((q) => Math.max(1, q - 1))}
+                aria-label={t('decreaseQuantity')}
+                className="flex h-full w-11 items-center justify-center rounded-s-full text-foreground transition-colors hover:bg-secondary disabled:opacity-40"
+                disabled={quantity <= 1}
+              >
+                <IconMinus size={16} />
+              </button>
+              <span aria-live="polite" className="min-w-8 text-center text-sm font-semibold">
+                {quantity}
+              </span>
+              <button
+                type="button"
+                onClick={() => setQuantity((q) => q + 1)}
+                aria-label={t('increaseQuantity')}
+                className="flex h-full w-11 items-center justify-center rounded-e-full text-foreground transition-colors hover:bg-secondary"
+              >
+                <IconPlus size={16} />
+              </button>
+            </div>
+
+            <button
+              type="button"
+              onClick={() => { flyToCart(firstVisible('[data-pdp-gallery]')); handleAddToCart(); }}
+              disabled={!canPurchase || addingToCart}
+              className={cn(
+                'btn-primary btn-lg flex-1 sm:min-w-64 sm:flex-none',
+                addedMessage && 'bg-primary/90'
+              )}
+            >
+              {addedMessage ? <IconCheck size={20} /> : <IconBag size={20} />}
+              {addingToCart
+                ? t('addingToCart')
+                : addedMessage
+                  ? t('addedToCart')
+                  : !canPurchase
+                    ? t('outOfStock')
+                    : t('addToCart')}
+            </button>
+          </div>
+
+          {/* Reassurance row */}
+          <ul className="mt-6 space-y-2 border-t pt-5 text-sm text-muted-foreground">
+            <li className="flex items-center gap-2.5">
+              <span className="text-primary">
+                <IconTruck size={20} />
+              </span>
+              {t('shippingNote')}
+            </li>
+            <li className="flex items-center gap-2.5">
+              <span className="text-primary">
+                <IconGem size={20} />
+              </span>
+              {t('guaranteeNote')}
+            </li>
+          </ul>
+
+          {/* Download after purchase note */}
+          {product.isDownloadable && (
+            <p className="mt-4 text-sm text-muted-foreground">{t('downloadAfterPurchase')}</p>
+          )}
+
+          {/* Description */}
+          {description && (
+            <section className="mt-8">
+              <h2 className="mb-3 text-xl">{t('description')}</h2>
+              {'html' in description ? (
+                <div
+                  className="prose-store"
+                  dangerouslySetInnerHTML={{ __html: sanitizeProductHtml(description.html) }}
+                />
+              ) : (
+                <p className="prose-store whitespace-pre-wrap">{description.text}</p>
+              )}
+            </section>
+          )}
+
+          {/* Metafields / Specifications */}
+          {product.metafields && product.metafields.length > 0 && (
+            <section className="mt-8">
+              <h2 className="mb-3 text-xl">{t('specifications')}</h2>
+              <table className="w-full overflow-hidden rounded-xl border text-sm">
+                <tbody className="divide-y">
+                  {product.metafields.map((field) => (
+                    <tr key={field.id} className="odd:bg-secondary/50">
+                      <th
+                        scope="row"
+                        className="w-1/3 px-4 py-3 text-start font-medium text-muted-foreground"
+                      >
+                        {field.definitionName}
+                      </th>
+                      <td className="px-4 py-3">
+                        <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}
+          className="mt-14"
+        />
+      )}
+
+      {/* Upsells */}
+      {recommendations?.upsells && recommendations.upsells.length > 0 && (
+        <RecommendationSection
+          title={t('upgradeYourChoice')}
+          items={recommendations.upsells}
+          className="mt-14"
+        />
+      )}
+
+      {/* Related products */}
+      {recommendations?.related && recommendations.related.length > 0 && (
+        <RecommendationSection
+          title={t('similarProducts')}
+          items={recommendations.related}
+          className="mt-14"
+        />
+      )}
+    </article>
+  );
+}

package/templates/nextjs/designs/atelier/ui/product/product-grid.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import type { Product } from 'brainerce';
+import { Link } from '@/core/lib/navigation';
+import { useTranslations } from '@/core/lib/translations';
+import { ProductCard } from '@/ui/product/product-card';
+import { cn } from '@/core/lib/utils';
+import { IconGem } from '@/ui/shared/icons';
+
+interface ProductGridProps {
+  products: Product[];
+  className?: string;
+}
+
+export function ProductGrid({ products, className }: ProductGridProps) {
+  const t = useTranslations('products');
+  const tc = useTranslations('common');
+
+  // Designed empty state — never a bare sentence in blank space.
+  if (products.length === 0) {
+    return (
+      <div className="card mx-auto flex max-w-md flex-col items-center gap-3 px-8 py-14 text-center">
+        <span className="flex h-14 w-14 items-center justify-center rounded-full bg-secondary text-primary">
+          <IconGem size={28} />
+        </span>
+        <p className="font-display text-xl text-foreground">{t('emptyTitle')}</p>
+        <p className="text-sm text-muted-foreground">{t('emptyBody')}</p>
+        <Link href="/products" className="btn-soft btn-sm mt-2">
+          {tc('viewAll')}
+        </Link>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        'grid grid-cols-2 gap-3 sm:gap-5 lg:grid-cols-4 lg:gap-6',
+        className
+      )}
+    >
+      {products.map((product) => (
+        <ProductCard key={product.id} product={product} />
+      ))}
+    </div>
+  );
+}