create-brainerce-store 1.50.5 → 1.51.0

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

@@ -0,0 +1,352 @@
+'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 { 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;
+}
+
+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);
+
+  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) */}
+      <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>
+            )}
+
+          {/* Price */}
+          <PriceDisplay
+            price={priceInfo.originalPrice}
+            salePrice={priceInfo.isOnSale ? priceInfo.price : undefined}
+            size="lg"
+          />
+
+          {/* Stock / Digital badge */}
+          {product.isDownloadable ? (
+            <p>{t('instantDownload')}</p>
+          ) : (
+            <StockBadge inventory={inventory} lowStockThreshold={5} />
+          )}
+
+          {/* 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 */}
+          {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>
+
+          {/* 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>
+  );
+}

package/templates/nextjs/ui-canvas/product/product-grid.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import type { Product } from 'brainerce';
+import { useTranslations } from '@/core/lib/translations';
+import { ProductCard } from '@/ui/product/product-card';
+import { cn } from '@/core/lib/utils';
+
+interface ProductGridProps {
+  products: Product[];
+  className?: string;
+}
+
+export function ProductGrid({ products, className }: ProductGridProps) {
+  const t = useTranslations('products');
+  if (products.length === 0) {
+    return <p>{t('noProducts')}</p>;
+  }
+
+  return (
+    <div className={cn('grid grid-cols-2 gap-4 lg:grid-cols-4', className)}>
+      {/* DESIGN ME — product grid: lays out ProductCard units; products arrive as a prop from the listing/home hooks */}
+      {products.map((product) => (
+        <ProductCard key={product.id} product={product} />
+      ))}
+    </div>
+  );
+}

package/templates/nextjs/ui-canvas/product/product-listing.tsx

@@ -0,0 +1,224 @@
+'use client';
+
+import * as React from 'react';
+import {
+  useProductListing,
+  sortOptions,
+  type CategoryNode,
+} from '@/core/hooks/use-product-listing';
+import { ProductGrid } from '@/ui/product/product-grid';
+import { LoadingSpinner } from '@/ui/shared/loading-spinner';
+import { useTranslations } from '@/core/lib/translations';
+
+/**
+ * Flatten the category tree into indented <option>s so nested categories
+ * stay selectable in a plain, semantic <select>. Replace with any control
+ * you like (chips, dropdown tree, sidebar) — keep `handleCategorySelect`.
+ */
+function CategoryOptions({ items, depth }: { items: CategoryNode[]; depth: number }) {
+  return (
+    <>
+      {items.map((node) => (
+        <React.Fragment key={node.id}>
+          <option value={node.id}>
+            {`${'— '.repeat(depth)}${node.name}`}
+          </option>
+          {node.children.length > 0 && <CategoryOptions items={node.children} depth={depth + 1} />}
+        </React.Fragment>
+      ))}
+    </>
+  );
+}
+
+/**
+ * Product listing page (bare skeleton): filters + sort + grid + load-more.
+ * All data and URL-state behavior comes from `useProductListing`; this
+ * component is presentation only. Must be rendered inside `<Suspense>`
+ * (URL params).
+ */
+export function ProductListing() {
+  const t = useTranslations('products');
+  const tc = useTranslations('common');
+
+  const {
+    products,
+    loading,
+    loadingMore,
+    page,
+    totalPages,
+    total,
+    categories,
+    brands,
+    tags,
+    metafieldDefs,
+    searchQuery,
+    categoryId,
+    brandId,
+    tagId,
+    sortIndex,
+    handleLoadMore,
+    updateParam,
+    handleCategorySelect,
+    getSelectedMetafieldValues,
+    setMetafieldValue,
+  } = useProductListing();
+
+  return (
+    <section>
+      {/* DESIGN ME — product listing page: header, category/brand/tag/custom-field filters, sort, product grid, load-more; everything comes from useProductListing() */}
+      <header>
+        <h1>{searchQuery ? `${t('searchPrefix')} "${searchQuery}"` : t('allProducts')}</h1>
+        {!loading && (
+          <p>
+            {total} {total === 1 ? tc('product') : tc('products')} {tc('found')}
+          </p>
+        )}
+      </header>
+
+      {/* Filters and Sort */}
+      <div className="flex flex-wrap items-center gap-3">
+        {/* Category filter — nested tree flattened into a select */}
+        {categories.length > 0 && (
+          <label>
+            <span className="sr-only">{tc('all')}</span>
+            <select
+              value={categoryId}
+              onChange={(e) =>
+                e.target.value ? handleCategorySelect(e.target.value) : updateParam('category', '')
+              }
+            >
+              <option value="">{tc('all')}</option>
+              <CategoryOptions items={categories} depth={0} />
+            </select>
+          </label>
+        )}
+
+        {/* Brand Filter */}
+        {brands.length > 0 && (
+          <select
+            value={brandId}
+            onChange={(e) => updateParam('brand', e.target.value)}
+            aria-label={t('allBrands')}
+          >
+            <option value="">{t('allBrands')}</option>
+            {brands.map((b) => (
+              <option key={b.id} value={b.id}>
+                {b.name}
+              </option>
+            ))}
+          </select>
+        )}
+
+        {/* Tag Filter */}
+        {tags.length > 0 && (
+          <select
+            value={tagId}
+            onChange={(e) => updateParam('tag', e.target.value)}
+            aria-label={t('allTags')}
+          >
+            <option value="">{t('allTags')}</option>
+            {tags.map((tg) => (
+              <option key={tg.id} value={tg.id}>
+                {tg.name}
+              </option>
+            ))}
+          </select>
+        )}
+
+        {/* Custom-field (metafield) facets — rendered per definition type.
+            Only definitions flagged `filterable: true` and published to
+            this sales channel reach this list (see `metafieldDefs` filter
+            in the hook). The merchant's display name (`def.name`) is shown
+            as-is — `enumValues` come from the merchant's dashboard config. */}
+        {metafieldDefs.map((def) => {
+          const selected = getSelectedMetafieldValues(def.key);
+
+          if (def.type === 'BOOLEAN') {
+            const isOn = selected.includes('true');
+            return (
+              <label key={def.id} className="inline-flex items-center gap-2">
+                <input
+                  type="checkbox"
+                  checked={isOn}
+                  onChange={(e) => setMetafieldValue(def.key, e.target.checked ? ['true'] : [])}
+                />
+                {def.name}
+              </label>
+            );
+          }
+
+          if (def.type === 'SELECT') {
+            return (
+              <select
+                key={def.id}
+                value={selected[0] || ''}
+                onChange={(e) =>
+                  setMetafieldValue(def.key, e.target.value ? [e.target.value] : [])
+                }
+                aria-label={def.name}
+              >
+                <option value="">{`${tc('all')} ${def.name}`}</option>
+                {(def.enumValues || []).map((v) => (
+                  <option key={v.value} value={v.value}>
+                    {v.label || v.value}
+                  </option>
+                ))}
+              </select>
+            );
+          }
+
+          // MULTI_SELECT — checkbox toggles. Each click adds/removes one value.
+          return (
+            <fieldset key={def.id} className="inline-flex items-center gap-2">
+              <legend>{def.name}</legend>
+              {(def.enumValues || []).map((v) => {
+                const active = selected.includes(v.value);
+                return (
+                  <label key={v.value} className="inline-flex items-center gap-1">
+                    <input
+                      type="checkbox"
+                      checked={active}
+                      onChange={() =>
+                        setMetafieldValue(
+                          def.key,
+                          active ? selected.filter((s) => s !== v.value) : [...selected, v.value]
+                        )
+                      }
+                    />
+                    {v.label || v.value}
+                  </label>
+                );
+              })}
+            </fieldset>
+          );
+        })}
+
+        {/* Sort */}
+        <label htmlFor="sort">{tc('sortBy')}</label>
+        <select id="sort" value={sortIndex} onChange={(e) => updateParam('sort', e.target.value)}>
+          {sortOptions.map((opt, idx) => (
+            <option key={idx} value={idx}>
+              {t(opt.labelKey)}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      {/* Products Grid */}
+      {loading ? (
+        <LoadingSpinner size="lg" />
+      ) : (
+        <>
+          <ProductGrid products={products} />
+
+          {/* Load More */}
+          {page < totalPages && (
+            <button type="button" onClick={handleLoadMore} disabled={loadingMore}>
+              {loadingMore ? tc('loading') : t('loadMore')}
+            </button>
+          )}
+        </>
+      )}
+    </section>
+  );
+}

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

@@ -0,0 +1,95 @@
+'use client';
+
+import { Link } from '@/core/lib/navigation';
+import { CdnImage as Image } from '@/ui/shared/cdn-image';
+import type { ProductRecommendation } from 'brainerce';
+import { PriceDisplay } from '@/ui/product/price-display';
+import { cn } from '@/core/lib/utils';
+
+interface RecommendationCardProps {
+  item: ProductRecommendation;
+  className?: string;
+}
+
+function RecommendationCard({ item, className }: RecommendationCardProps) {
+  const firstImage = item.images?.[0];
+  const imageUrl = typeof firstImage === 'string' ? firstImage : firstImage?.url || null;
+  const slug = item.slug || item.id;
+  const basePrice = parseFloat(item.basePrice);
+  const salePrice = item.salePrice ? parseFloat(item.salePrice) : undefined;
+  const isOnSale = salePrice != null && salePrice < basePrice;
+
+  return (
+    <Link href={`/products/${slug}`} className={cn(className)}>
+      {/* `relative` + `aspect-square` are layout-critical for next/image fill */}
+      <span className="relative block aspect-square">
+        {imageUrl ? (
+          <Image
+            src={imageUrl}
+            alt={item.name}
+            fill
+            sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 20vw"
+          />
+        ) : null}
+      </span>
+      <span className="block">
+        <span className="block">{item.name}</span>
+        <PriceDisplay price={basePrice} salePrice={isOnSale ? salePrice : undefined} size="sm" />
+      </span>
+    </Link>
+  );
+}
+
+interface RecommendationSectionProps {
+  title: string;
+  items: ProductRecommendation[];
+  className?: string;
+}
+
+/**
+ * DESIGN ME — recommendation strip on the product page (upsells / related);
+ * items come from useProductPage().recommendations, title is passed in.
+ */
+export function RecommendationSection({ title, items, className }: RecommendationSectionProps) {
+  if (items.length === 0) return null;
+
+  return (
+    <section className={cn(className)}>
+      <h2>{title}</h2>
+      <div className="grid grid-cols-2 gap-3 lg:grid-cols-4">
+        {items.map((item) => (
+          <RecommendationCard key={item.id} item={item} />
+        ))}
+      </div>
+    </section>
+  );
+}
+
+interface CartRecommendationSectionProps {
+  title: string;
+  items: ProductRecommendation[];
+  className?: string;
+}
+
+/**
+ * DESIGN ME — cross-sell strip on the cart page ("you might also need");
+ * items come from useCartPage().cartRecs.
+ */
+export function CartRecommendationSection({
+  title,
+  items,
+  className,
+}: CartRecommendationSectionProps) {
+  if (items.length === 0) return null;
+
+  return (
+    <section className={cn(className)}>
+      <h2>{title}</h2>
+      <div className="grid grid-cols-2 gap-3 lg:grid-cols-4">
+        {items.map((item) => (
+          <RecommendationCard key={item.id} item={item} />
+        ))}
+      </div>
+    </section>
+  );
+}