create-brainerce-store 1.51.0 → 1.52.0

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

@@ -1,667 +0,0 @@
-'use client';
-
-import { useEffect, useRef, useState } 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 { LoadingSpinner } from '@/ui/shared/loading-spinner';
-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 { cn } from '@/core/lib/utils';
-import { sanitizeProductHtml } from '@/core/lib/sanitize-html';
-import { flyToCart, firstVisible } from '@/ui/shared/fly-to-cart';
-
-/** 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 className="text-muted-foreground">-</span>;
-      return (
-        <img
-          src={field.value}
-          alt={field.definitionName}
-          className="h-16 w-16 rounded 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 className="text-muted-foreground">-</span>;
-      return (
-        <div 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 object-cover"
-            />
-          ))}
-        </div>
-      );
-    }
-    case 'URL':
-      return field.value ? (
-        <a
-          href={field.value}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="text-primary break-all hover:underline"
-        >
-          {field.value}
-        </a>
-      ) : (
-        <span className="text-muted-foreground">-</span>
-      );
-    case 'COLOR':
-      return field.value ? (
-        <span className="inline-flex items-center gap-2">
-          <span
-            className="border-border inline-block h-4 w-4 rounded-full border"
-            style={{ backgroundColor: field.value }}
-          />
-          {field.value}
-        </span>
-      ) : (
-        <span className="text-muted-foreground">-</span>
-      );
-    case 'BOOLEAN':
-      return <span>{field.value === 'true' ? tc('yes') : tc('no')}</span>;
-    case 'DATE':
-    case 'DATETIME': {
-      if (!field.value) return <span className="text-muted-foreground">-</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);
-
-  // Presentation-only flourish: the product photo lifts off and drifts into
-  // the header cart before the (core-owned) add-to-cart flow runs.
-  function handleBuyClick() {
-    if (!addingToCart && canPurchase) {
-      flyToCart(firstVisible('[data-pdp-image]'));
-    }
-    void handleAddToCart();
-  }
-
-  // Mobile sticky buy bar — appears once the in-flow add-to-cart scrolls
-  // above the viewport, so purchase stays one thumb away.
-  const buyButtonRef = useRef<HTMLButtonElement | null>(null);
-  const [showStickyBar, setShowStickyBar] = useState(false);
-  useEffect(() => {
-    const el = buyButtonRef.current;
-    if (!el || typeof IntersectionObserver === 'undefined') return;
-    const observer = new IntersectionObserver(
-      ([entry]) => setShowStickyBar(!entry.isIntersecting && entry.boundingClientRect.top < 0),
-      { threshold: 0 }
-    );
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, []);
-
-  return (
-    <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8 lg:py-14">
-      <div className="grid grid-cols-1 gap-8 lg:grid-cols-12 lg:gap-10">
-        {/* Gallery — works hung one under the other, each in its own frame */}
-        <div className="lg:order-2 lg:col-span-7">
-          {/* Main frame (mobile + variant-aware) */}
-          <div className="lg:hidden">
-            <div
-              data-pdp-image
-              className="bg-surface border-border hung relative aspect-square overflow-hidden border"
-            >
-              {mainImageUrl ? (
-                <Image
-                  src={mainImageUrl}
-                  alt={product.name}
-                  fill
-                  sizes="100vw"
-                  className="object-contain"
-                  priority
-                />
-              ) : (
-                <div className="text-muted-foreground absolute inset-0 flex items-center justify-center">
-                  <svg className="h-24 w-24" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={1}
-                      d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
-                    />
-                  </svg>
-                </div>
-              )}
-            </div>
-
-            {/* Thumbnails — small hairline frames */}
-            {images.length > 1 && (
-              <div className="mt-4 flex gap-2 overflow-x-auto pb-2">
-                {images.map((img, idx) => (
-                  <button
-                    key={idx}
-                    type="button"
-                    onClick={() => setSelectedImageIndex(idx)}
-                    className={cn(
-                      'bg-surface relative h-16 w-16 flex-shrink-0 overflow-hidden border transition-colors',
-                      selectedImageIndex === idx
-                        ? 'border-foreground'
-                        : 'border-border hover:border-muted-foreground'
-                    )}
-                  >
-                    <Image
-                      src={img.url}
-                      alt={img.alt || `${product.name} ${idx + 1}`}
-                      fill
-                      sizes="64px"
-                      className="object-cover"
-                    />
-                  </button>
-                ))}
-              </div>
-            )}
-          </div>
-
-          {/* Desktop — the museum hang: every image framed, numbered, stacked */}
-          <div className="hidden space-y-6 lg:block">
-            {selectedImageIndex === -1 && mainImageUrl ? (
-              <figure>
-                <div className="bg-surface border-border relative aspect-[4/5] overflow-hidden border">
-                  <Image
-                    src={mainImageUrl}
-                    alt={product.name}
-                    fill
-                    sizes="(max-width: 1024px) 100vw, 58vw"
-                    className="object-contain"
-                    priority
-                  />
-                </div>
-              </figure>
-            ) : null}
-            {images.length > 0 ? (
-              images.map((img, idx) => (
-                <figure key={idx}>
-                  <div
-                    data-pdp-image
-                    className="bg-surface border-border hung relative aspect-[4/5] overflow-hidden border"
-                  >
-                    <Image
-                      src={img.url}
-                      alt={img.alt || `${product.name} ${idx + 1}`}
-                      fill
-                      sizes="(max-width: 1024px) 100vw, 58vw"
-                      className="object-contain"
-                      priority={idx === 0}
-                    />
-                  </div>
-                  {images.length > 1 && (
-                    <figcaption className="text-muted-foreground tabular mt-2 text-[0.6875rem] tracking-[0.08em]">
-                      {idx + 1} / {images.length}
-                    </figcaption>
-                  )}
-                </figure>
-              ))
-            ) : (
-              <div className="bg-surface border-border relative aspect-[4/5] overflow-hidden border">
-                <div className="text-muted-foreground absolute inset-0 flex items-center justify-center">
-                  <svg className="h-24 w-24" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={1}
-                      d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
-                    />
-                  </svg>
-                </div>
-              </div>
-            )}
-          </div>
-        </div>
-
-        {/* The placard wall — buy column, sticky on desktop */}
-        <div className="space-y-6 lg:order-1 lg:col-span-5 lg:sticky lg:top-24 lg:self-start">
-          {/* Category placard */}
-          {product.categories && product.categories.length > 0 && (
-            <p className="placard">{product.categories.map((cat) => cat.name).join(' · ')}</p>
-          )}
-
-          {/* Brand */}
-          {(product as { brands?: Array<{ id: string; name: string }> }).brands &&
-            (product as { brands: Array<{ id: string; name: string }> }).brands.length > 0 && (
-              <div className="placard">
-                {t('by')}{' '}
-                {(product as { brands: Array<{ id: string; name: string }> }).brands
-                  .map((b) => b.name)
-                  .join(', ')}
-              </div>
-            )}
-
-          {/* Title */}
-          <h1 className="text-foreground font-serif text-[clamp(1.5rem,4vw,2.25rem)] font-light leading-[1.25]">
-            {product.name}
-          </h1>
-
-          {/* Catalog line — the museum touch */}
-          {(selectedVariant?.sku || product.sku) && (
-            <p className="text-muted-foreground tabular text-[0.6875rem] tracking-[0.08em]">
-              {t('itemNo').replace('{sku}', String(selectedVariant?.sku || product.sku))}
-            </p>
-          )}
-
-          <div className="brass-rule w-16" />
-
-          {/* Tags — quiet captions */}
-          {(product as unknown as { tags?: Array<{ id: string; name: string }> }).tags &&
-            (product as unknown as { tags: Array<{ id: string; name: string }> }).tags.length >
-              0 && (
-              <div className="flex flex-wrap gap-x-3 gap-y-1">
-                {(product as unknown as { tags: Array<{ id: string; name: string }> }).tags.map(
-                  (tag) => (
-                    <span
-                      key={tag.id}
-                      className="text-muted-foreground text-[0.6875rem] tracking-[0.08em]"
-                    >
-                      {tag.name}
-                    </span>
-                  )
-                )}
-              </div>
-            )}
-
-          {/* Price */}
-          <div>
-            <PriceDisplay
-              price={priceInfo.originalPrice}
-              salePrice={priceInfo.isOnSale ? priceInfo.price : undefined}
-              size="lg"
-            />
-            <p className="text-muted-foreground tabular mt-1.5 text-[0.6875rem] tracking-[0.08em]">
-              {t('installments')}
-            </p>
-          </div>
-
-          {/* Stock / Digital note — placard captions */}
-          {product.isDownloadable ? (
-            <span className="text-muted-foreground inline-flex items-center gap-1.5 text-[0.6875rem] tracking-[0.08em]">
-              <svg
-                className="text-accent h-3.5 w-3.5"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={1.5}
-                  d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
-                />
-              </svg>
-              {t('instantDownload')}
-            </span>
-          ) : (
-            <>
-              <StockBadge inventory={inventory} lowStockThreshold={5} />
-              {inventory?.inStock &&
-                (inventory.trackingMode !== 'TRACKED' || inventory.available > 5) && (
-                  <span className="text-muted-foreground text-[0.6875rem] tracking-[0.08em]">
-                    {t('inStockShip')}
-                  </span>
-                )}
-            </>
-          )}
-
-          {/* Downloadable files info */}
-          {product.isDownloadable && product.downloads && product.downloads.length > 0 && (
-            <div className="bg-surface border-border border p-4">
-              <p className="text-foreground mb-2 text-sm font-medium">
-                {t('filesIncluded')} ({product.downloads.length})
-              </p>
-              <ul className="space-y-1.5">
-                {product.downloads.map((file: DownloadFile) => (
-                  <li
-                    key={file.id}
-                    className="text-muted-foreground flex items-center gap-2 text-sm"
-                  >
-                    <svg
-                      className="h-4 w-4 flex-shrink-0"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke="currentColor"
-                    >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={1.5}
-                        d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"
-                      />
-                    </svg>
-                    <span className="truncate">{file.name}</span>
-                    {file.size && (
-                      <span className="flex-shrink-0 text-xs">
-                        (
-                        {file.size < 1024 * 1024
-                          ? `${(file.size / 1024).toFixed(0)} KB`
-                          : `${(file.size / (1024 * 1024)).toFixed(1)} MB`}
-                        )
-                      </span>
-                    )}
-                  </li>
-                ))}
-              </ul>
-            </div>
-          )}
-
-          {/* Variant Selector */}
-          {product.type === 'VARIABLE' && product.variants && product.variants.length > 0 && (
-            <VariantSelector
-              product={product}
-              selectedVariant={selectedVariant}
-              onVariantChange={setSelectedVariant}
-            />
-          )}
-
-          {/* The gift panel — personalization framed as the ritual it is */}
-          {(customizationFields.length > 0 || modifierGroups.length > 0) && (
-            <div className="border-border space-y-4 border p-4">
-              <p className="placard">{t('giftPanel')}</p>
-
-              {customizationFields.length > 0 && (
-                <CustomizationFields
-                  fields={customizationFields}
-                  values={customizationValues}
-                  onChange={setCustomizationValues}
-                  errors={customizationErrors}
-                />
-              )}
-
-              {modifierGroups.length > 0 && (
-                <div className="space-y-4">
-                  {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 className="text-destructive text-sm" role="alert">
-                      {modifierError}
-                    </p>
-                  )}
-                </div>
-              )}
-            </div>
-          )}
-
-          {/* Quantity + Add to Cart */}
-          <div className="space-y-3">
-            <div className="border-border inline-flex items-center border">
-              <button
-                type="button"
-                onClick={() => setQuantity((q) => Math.max(1, q - 1))}
-                className="text-foreground active:bg-muted hover:bg-muted px-4 py-2.5 transition-colors"
-                aria-label={t('decreaseQuantity')}
-              >
-                −
-              </button>
-              <span className="text-foreground tabular min-w-[3rem] px-4 py-2.5 text-center text-sm">
-                {quantity}
-              </span>
-              <button
-                type="button"
-                onClick={() => setQuantity((q) => q + 1)}
-                className="text-foreground active:bg-muted hover:bg-muted px-4 py-2.5 transition-colors"
-                aria-label={t('increaseQuantity')}
-              >
-                +
-              </button>
-            </div>
-
-            <button
-              ref={buyButtonRef}
-              type="button"
-              onClick={handleBuyClick}
-              disabled={!canPurchase || addingToCart}
-              className={cn(
-                'w-full px-6 py-4 text-[0.8125rem] font-semibold transition-colors',
-                canPurchase
-                  ? 'bg-primary text-primary-foreground'
-                  : 'bg-muted text-muted-foreground cursor-not-allowed'
-              )}
-            >
-              {addingToCart ? (
-                <span className="inline-flex items-center gap-2">
-                  <LoadingSpinner size="sm" className="bg-primary-foreground" />
-                  {t('addingToCart')}
-                </span>
-              ) : addedMessage ? (
-                t('addedToCart')
-              ) : !canPurchase ? (
-                t('outOfStock')
-              ) : (
-                t('addToCart')
-              )}
-            </button>
-
-            {/* Trust line — quiet purchase confidence */}
-            <p className="text-muted-foreground text-center text-[0.6875rem] tracking-[0.08em]">
-              {t('trustLine')}
-            </p>
-          </div>
-
-          {/* Download after purchase note */}
-          {product.isDownloadable && (
-            <p className="text-muted-foreground text-[0.6875rem] tracking-[0.08em]">
-              {t('downloadAfterPurchase')}
-            </p>
-          )}
-
-          {/* Below the fold — the placard accordion stack (Details / Specs /
-              Shipping / Care), keeping the buy box tight above the fold */}
-          <div className="border-border border-t">
-            {description && (
-              <details open className="group/acc border-border border-b">
-                <summary className="flex cursor-pointer list-none items-center justify-between py-4 [&::-webkit-details-marker]:hidden">
-                  <span className="placard font-sans">{t('aboutWork')}</span>
-                  <span aria-hidden="true" className="text-accent text-base leading-none">
-                    <span className="group-open/acc:hidden">+</span>
-                    <span className="hidden group-open/acc:inline">−</span>
-                  </span>
-                </summary>
-                <div className="pb-6">
-                  {'html' in description ? (
-                    <div
-                      className="text-foreground/80 max-w-prose font-serif text-[1.0625rem] leading-[1.9]"
-                      dangerouslySetInnerHTML={{ __html: sanitizeProductHtml(description.html) }}
-                    />
-                  ) : (
-                    <p className="text-foreground/80 max-w-prose whitespace-pre-wrap font-serif text-[1.0625rem] leading-[1.9]">
-                      {description.text}
-                    </p>
-                  )}
-                </div>
-              </details>
-            )}
-
-            {product.metafields && product.metafields.length > 0 && (
-              <details className="group/acc border-border border-b">
-                <summary className="flex cursor-pointer list-none items-center justify-between py-4 [&::-webkit-details-marker]:hidden">
-                  <span className="placard font-sans">{t('specifications')}</span>
-                  <span aria-hidden="true" className="text-accent text-base leading-none">
-                    <span className="group-open/acc:hidden">+</span>
-                    <span className="hidden group-open/acc:inline">−</span>
-                  </span>
-                </summary>
-                <div className="pb-6">
-                  <table className="w-full">
-                    <tbody>
-                      {product.metafields.map((field) => (
-                        <tr key={field.id} className="border-border border-b last:border-0">
-                          <td className="text-muted-foreground whitespace-nowrap py-3 pe-4 text-[0.6875rem] tracking-[0.08em]">
-                            {field.definitionName}
-                          </td>
-                          <td className="text-foreground py-3 text-end text-sm">
-                            <MetafieldValue field={field} />
-                          </td>
-                        </tr>
-                      ))}
-                    </tbody>
-                  </table>
-                </div>
-              </details>
-            )}
-
-            <details className="group/acc border-border border-b">
-              <summary className="flex cursor-pointer list-none items-center justify-between py-4 [&::-webkit-details-marker]:hidden">
-                <span className="placard font-sans">{t('shippingReturnsTitle')}</span>
-                <span aria-hidden="true" className="text-accent text-base leading-none">
-                  <span className="group-open/acc:hidden">+</span>
-                  <span className="hidden group-open/acc:inline">−</span>
-                </span>
-              </summary>
-              <p className="text-foreground/75 max-w-prose pb-6 text-sm leading-[1.9]">
-                {t('shippingReturnsBody')}
-              </p>
-            </details>
-
-            <details className="group/acc border-border border-b">
-              <summary className="flex cursor-pointer list-none items-center justify-between py-4 [&::-webkit-details-marker]:hidden">
-                <span className="placard font-sans">{t('careWarrantyTitle')}</span>
-                <span aria-hidden="true" className="text-accent text-base leading-none">
-                  <span className="group-open/acc:hidden">+</span>
-                  <span className="hidden group-open/acc:inline">−</span>
-                </span>
-              </summary>
-              <p className="text-foreground/75 max-w-prose pb-6 text-sm leading-[1.9]">
-                {t('careWarrantyBody')}
-              </p>
-            </details>
-          </div>
-        </div>
-      </div>
-
-      {/* Mobile sticky buy bar — price at the start, ink button at the end */}
-      {showStickyBar && (
-        <div className="bg-background/95 border-border fixed inset-x-0 bottom-0 z-40 border-t pb-[env(safe-area-inset-bottom)] backdrop-blur lg:hidden">
-          <div className="flex items-center justify-between gap-4 px-4 py-3">
-            <PriceDisplay
-              price={priceInfo.originalPrice}
-              salePrice={priceInfo.isOnSale ? priceInfo.price : undefined}
-              size="md"
-            />
-            <button
-              type="button"
-              onClick={handleBuyClick}
-              disabled={!canPurchase || addingToCart}
-              className={cn(
-                'px-6 py-3 text-xs font-semibold transition-colors',
-                canPurchase
-                  ? 'bg-primary text-primary-foreground'
-                  : 'bg-muted text-muted-foreground cursor-not-allowed'
-              )}
-            >
-              {addingToCart
-                ? t('addingToCart')
-                : addedMessage
-                  ? t('addedToCart')
-                  : !canPurchase
-                    ? t('outOfStock')
-                    : t('addToCart')}
-            </button>
-          </div>
-        </div>
-      )}
-
-      {/* Frequently Bought Together (cross-sells) */}
-      {recommendations?.crossSells && recommendations.crossSells.length > 0 && (
-        <FrequentlyBoughtTogether
-          items={recommendations.crossSells}
-          currentProduct={product}
-          className="mt-12"
-        />
-      )}
-
-      {/* Upsells */}
-      {recommendations?.upsells && recommendations.upsells.length > 0 && (
-        <RecommendationSection
-          title={t('upgradeYourChoice')}
-          kicker={t('upsellsKicker')}
-          items={recommendations.upsells}
-          className="mt-16"
-        />
-      )}
-
-      {/* Related products */}
-      {recommendations?.related && recommendations.related.length > 0 && (
-        <RecommendationSection
-          title={t('similarProducts')}
-          kicker={t('relatedKicker')}
-          items={recommendations.related}
-          className="mt-16"
-        />
-      )}
-    </div>
-  );
-}