create-brainerce-store 1.50.5 → 1.52.0

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

@@ -0,0 +1,148 @@
+import type { ProductReview } from 'brainerce';
+import { getServerClient } from '@/core/lib/brainerce';
+<% if (i18nEnabled) { %>
+import { getMessages, defaultLocale } from '@/i18n';
+<% } else { %>
+import { messages as staticMessages, defaultLocale } from '@/i18n';
+<% } %>
+import { ReviewForm } from './review-form';
+import { IconStar } from '@/ui/shared/icons';
+
+// Server component — it renders before any client i18n context exists, so the
+// wrapper strings (title / empty state / verified badge) are read straight
+// from the `reviews` namespace in messages/, keyed by the store locale.
+type ReviewStrings = Record<string, string>;
+
+async function getReviewStrings(locale: string): Promise<ReviewStrings> {
+<% if (i18nEnabled) { %>
+  return ((await getMessages(locale)).reviews ?? {}) as ReviewStrings;
+<% } else { %>
+  return (staticMessages.reviews ?? {}) as ReviewStrings;
+<% } %>
+}
+
+interface ReviewsSectionProps {
+  productId: string;
+  initialReviews?: ProductReview[];
+  locale?: string;
+  /** Where to send users back to after submit (defaults to the current product URL). */
+  returnUrl?: string;
+}
+
+/**
+ * Renders the visible reviews for a product plus a submit form.
+ *
+ * Server component — fetches with the SDK on the server so reviews are in
+ * the initial HTML payload (good for SEO; JSON-LD on the same page already
+ * carries `aggregateRating` when reviewCount > 0).
+ */
+export async function ReviewsSection({
+  productId,
+  initialReviews,
+  locale = defaultLocale,
+}: ReviewsSectionProps) {
+  const t = await getReviewStrings(locale);
+  let reviews: ProductReview[] = initialReviews ?? [];
+
+  if (!initialReviews) {
+    try {
+      const result = await getServerClient().listProductReviews(productId, { page: 1, limit: 20 });
+      reviews = result.data;
+    } catch {
+      // Review listing disabled at store level or network error — render the form anyway.
+      reviews = [];
+    }
+  }
+
+  const avg =
+    reviews.length > 0
+      ? Math.round((reviews.reduce((s, r) => s + r.rating, 0) / reviews.length) * 10) / 10
+      : null;
+
+  return (
+    <section aria-labelledby="reviews-heading" className="border-t bg-secondary/40">
+      <div className="container-narrow grid gap-10 py-14 lg:grid-cols-3 lg:py-16">
+        {/* Summary column */}
+        <div>
+          <h2 id="reviews-heading" className="text-2xl sm:text-3xl">
+            {t.title}
+          </h2>
+          {avg !== null && (
+            <p className="mt-4 flex items-center gap-3">
+              <span className="font-display text-4xl text-foreground">{avg}</span>
+              <span className="inline-flex flex-col gap-1">
+                <Stars rating={Math.round(avg)} />
+                <span className="text-xs text-muted-foreground">
+                  ({reviews.length})
+                </span>
+              </span>
+            </p>
+          )}
+
+          {/* Submit / edit form */}
+          <div className="card mt-6 p-5">
+            <ReviewForm productId={productId} />
+          </div>
+        </div>
+
+        {/* Review list */}
+        <div className="lg:col-span-2">
+          {reviews.length === 0 ? (
+            <div className="card flex h-full min-h-40 flex-col items-center justify-center gap-2 p-8 text-center">
+              <Stars rating={0} />
+              <p className="font-medium text-foreground">{t.beFirst ?? t.noReviews}</p>
+              <p className="text-sm text-muted-foreground">{t.noReviews}</p>
+            </div>
+          ) : (
+            <ul className="space-y-4">
+              {reviews.map((review) => (
+                <ReviewCard key={review.id} review={review} verifiedLabel={t.verifiedPurchase} />
+              ))}
+            </ul>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function ReviewCard({ review, verifiedLabel }: { review: ProductReview; verifiedLabel: string }) {
+  return (
+    <li>
+      <article className="card p-5">
+        <header className="flex flex-wrap items-center gap-x-3 gap-y-1.5">
+          <Stars rating={review.rating} />
+          <span className="text-sm font-semibold text-foreground">{review.authorName}</span>
+          {review.verifiedPurchase && <span className="badge-soft">{verifiedLabel}</span>}
+          <time
+            dateTime={review.createdAt}
+            className="ms-auto text-xs text-muted-foreground"
+          >
+            {new Date(review.createdAt).toLocaleDateString()}
+          </time>
+        </header>
+        {review.body && (
+          <p className="mt-3 whitespace-pre-line break-words text-sm leading-6 text-foreground">
+            {review.body}
+          </p>
+        )}
+      </article>
+    </li>
+  );
+}
+
+function Stars({ rating }: { rating: number }) {
+  return (
+    <span aria-label={`${rating} of 5 stars`} className="inline-flex gap-0.5">
+      {[1, 2, 3, 4, 5].map((n) => (
+        <span
+          key={n}
+          aria-hidden="true"
+          className={n <= rating ? 'text-primary' : 'text-border'}
+        >
+          <IconStar size={16} filled={n <= rating} />
+        </span>
+      ))}
+    </span>
+  );
+}

package/templates/nextjs/designs/atelier/ui/product/stock-badge.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import type { InventoryInfo } from 'brainerce';
+import { cn } from '@/core/lib/utils';
+import { useTranslations } from '@/core/lib/translations';
+
+interface StockBadgeProps {
+  inventory: InventoryInfo | null | undefined;
+  lowStockThreshold?: number;
+  className?: string;
+}
+
+type StockState = 'in' | 'low' | 'out';
+
+/**
+ * Stock status pill (in stock / low stock / out of stock) with a colored
+ * status dot; derives the label from the product/variant `inventory` prop.
+ */
+export function StockBadge({ inventory, lowStockThreshold = 5, className }: StockBadgeProps) {
+  const t = useTranslations('productDetail');
+  const { label, state } = getStock(inventory, lowStockThreshold, t);
+
+  return (
+    <span
+      data-state={state}
+      className={cn(
+        'inline-flex items-center gap-1.5 text-xs font-medium',
+        state === 'in' && 'text-primary',
+        state === 'low' && 'text-foreground',
+        state === 'out' && 'text-destructive',
+        className
+      )}
+    >
+      <span
+        aria-hidden="true"
+        className={cn(
+          'inline-block h-1.5 w-1.5 rounded-full',
+          state === 'in' && 'bg-primary',
+          state === 'low' && 'bg-foreground/60',
+          state === 'out' && 'bg-destructive'
+        )}
+      />
+      {label}
+    </span>
+  );
+}
+
+function getStock(
+  inventory: InventoryInfo | null | undefined,
+  lowStockThreshold: number,
+  t: (key: string) => string
+): { label: string; state: StockState } {
+  if (!inventory) return { label: t('outOfStock'), state: 'out' };
+
+  const { trackingMode, inStock, available } = inventory;
+
+  if (trackingMode === 'DISABLED') return { label: t('unavailable'), state: 'out' };
+  if (!inStock) return { label: t('outOfStock'), state: 'out' };
+  if (trackingMode === 'UNLIMITED') return { label: t('inStock'), state: 'in' };
+
+  // TRACKED — show actual quantity
+  if (available <= lowStockThreshold) {
+    return { label: t('onlyLeft').replace('{available}', String(available)), state: 'low' };
+  }
+  return { label: t('availableInStock').replace('{available}', String(available)), state: 'in' };
+}

package/templates/nextjs/designs/atelier/ui/product/variant-selector.tsx

@@ -0,0 +1,206 @@
+'use client';
+
+import { useMemo } from 'react';
+import type { Product, ProductVariant } from 'brainerce';
+import { getVariantOptions, getProductSwatches } from 'brainerce';
+import { cn } from '@/core/lib/utils';
+
+interface VariantSelectorProps {
+  product: Product;
+  selectedVariant: ProductVariant | null;
+  onVariantChange: (variant: ProductVariant) => void;
+  className?: string;
+}
+
+interface AttributeGroup {
+  name: string;
+  displayType: string;
+  values: Array<{
+    value: string;
+    swatchColor?: string | null;
+    swatchColor2?: string | null;
+    swatchImageUrl?: string | null;
+    variants: ProductVariant[];
+  }>;
+}
+
+/**
+ * Variant selector on the product page: one group per attribute (Size,
+ * Color, …) rendered as pill buttons; merchant swatch metadata
+ * (`swatchColor`, `swatchColor2`, `swatchImageUrl`) renders as a color/image
+ * dot inside the pill. Selection state + matching logic are the contract.
+ */
+export function VariantSelector({
+  product,
+  selectedVariant,
+  onVariantChange,
+  className,
+}: VariantSelectorProps) {
+  const variants = useMemo(() => product.variants || [], [product.variants]);
+
+  // Get swatch metadata from product attribute options
+  const swatchData = useMemo(() => getProductSwatches(product), [product]);
+  const swatchMap = useMemo(() => {
+    const map = new Map<
+      string,
+      {
+        displayType: string;
+        options: Map<
+          string,
+          {
+            swatchColor?: string | null;
+            swatchColor2?: string | null;
+            swatchImageUrl?: string | null;
+          }
+        >;
+      }
+    >();
+    for (const attr of swatchData) {
+      const optMap = new Map<
+        string,
+        {
+          swatchColor?: string | null;
+          swatchColor2?: string | null;
+          swatchImageUrl?: string | null;
+        }
+      >();
+      for (const opt of attr.options) {
+        optMap.set(opt.name, {
+          swatchColor: opt.swatchColor,
+          swatchColor2: opt.swatchColor2,
+          swatchImageUrl: opt.swatchImageUrl,
+        });
+      }
+      map.set(attr.attributeName, { displayType: attr.displayType, options: optMap });
+    }
+    return map;
+  }, [swatchData]);
+
+  // Build attribute groups from variant data, enriched with swatch info
+  const attributeGroups = useMemo<AttributeGroup[]>(() => {
+    const groups = new Map<string, Map<string, ProductVariant[]>>();
+
+    for (const variant of variants) {
+      const options = getVariantOptions(variant);
+      for (const { name, value } of options) {
+        if (!groups.has(name)) {
+          groups.set(name, new Map());
+        }
+        const valuesMap = groups.get(name)!;
+        if (!valuesMap.has(value)) {
+          valuesMap.set(value, []);
+        }
+        valuesMap.get(value)!.push(variant);
+      }
+    }
+
+    return Array.from(groups.entries()).map(([name, valuesMap]) => {
+      const attrSwatch = swatchMap.get(name);
+      return {
+        name,
+        displayType: attrSwatch?.displayType || 'DROPDOWN',
+        values: Array.from(valuesMap.entries()).map(([value, variantList]) => {
+          const optSwatch = attrSwatch?.options.get(value);
+          return {
+            value,
+            swatchColor: optSwatch?.swatchColor,
+            swatchColor2: optSwatch?.swatchColor2,
+            swatchImageUrl: optSwatch?.swatchImageUrl,
+            variants: variantList,
+          };
+        }),
+      };
+    });
+  }, [variants, swatchMap]);
+
+  // Get currently selected attribute values
+  const selectedOptions = useMemo(() => {
+    if (!selectedVariant) return new Map<string, string>();
+    const opts = getVariantOptions(selectedVariant);
+    return new Map(opts.map(({ name, value }) => [name, value]));
+  }, [selectedVariant]);
+
+  // Find the variant that matches all selected attributes
+  function findMatchingVariant(
+    attributeName: string,
+    newValue: string
+  ): ProductVariant | undefined {
+    const nextSelection = new Map(selectedOptions);
+    nextSelection.set(attributeName, newValue);
+
+    return variants.find((v) => {
+      const opts = getVariantOptions(v);
+      return Array.from(nextSelection.entries()).every(([name, value]) =>
+        opts.some((o) => o.name === name && o.value === value)
+      );
+    });
+  }
+
+  if (attributeGroups.length === 0) return null;
+
+  return (
+    <div className={cn('space-y-5', className)}>
+      {attributeGroups.map((group) => (
+        <fieldset key={group.name} data-display-type={group.displayType}>
+          <legend className="mb-2.5 text-sm font-semibold text-foreground">
+            {group.name}
+            {selectedOptions.get(group.name) && (
+              <span className="font-normal text-muted-foreground">
+                : {selectedOptions.get(group.name)}
+              </span>
+            )}
+          </legend>
+          <div className="flex flex-wrap gap-2">
+            {group.values.map(({ value, swatchColor, swatchColor2, swatchImageUrl, variants: matchingVariants }) => {
+              const isSelected = selectedOptions.get(group.name) === value;
+              const matchedVariant = findMatchingVariant(group.name, value);
+              const isAvailable = matchedVariant?.inventory?.canPurchase !== false;
+              const hasSwatch = Boolean(swatchColor || swatchImageUrl);
+
+              return (
+                <button
+                  key={value}
+                  type="button"
+                  disabled={!isAvailable}
+                  aria-pressed={isSelected}
+                  onClick={() => {
+                    const variant = matchedVariant || matchingVariants[0];
+                    if (variant) onVariantChange(variant);
+                  }}
+                  className={cn(
+                    'inline-flex min-h-10 items-center gap-2 rounded-full border px-4 py-1.5 text-sm font-medium transition-colors',
+                    isSelected
+                      ? 'border-primary bg-primary text-primary-foreground'
+                      : 'border-border bg-background text-foreground hover:border-foreground',
+                    !isAvailable && 'opacity-40 line-through'
+                  )}
+                >
+                  {hasSwatch && (
+                    <span
+                      aria-hidden="true"
+                      className="inline-block h-5 w-5 shrink-0 rounded-full border border-foreground/15 bg-cover bg-center"
+                      style={
+                        swatchImageUrl
+                          ? { backgroundImage: `url(${swatchImageUrl})` }
+                          : swatchColor2
+                            ? {
+                                background: `linear-gradient(135deg, ${swatchColor} 50%, ${swatchColor2} 50%)`,
+                              }
+                            : { backgroundColor: swatchColor ?? undefined }
+                      }
+                    />
+                  )}
+                  {value}
+                </button>
+              );
+            })}
+          </div>
+        </fieldset>
+      ))}
+
+      {/* Variant-specific price + stock intentionally NOT repeated here — the
+          buy box's PriceDisplay and StockBadge react to the selected variant
+          via useProductPage(), so a strip here would duplicate them. */}
+    </div>
+  );
+}

package/templates/nextjs/designs/atelier/ui/shared/cdn-image.tsx

@@ -0,0 +1,29 @@
+import Image, { type ImageProps } from 'next/image';
+import { OPTIMIZED_IMAGE_HOSTS } from '@/core/lib/image-hosts';
+
+const OPTIMIZED_HOSTS = new Set(OPTIMIZED_IMAGE_HOSTS);
+
+function isOptimizedHost(src: ImageProps['src']): boolean {
+  if (typeof src !== 'string') return true; // StaticImageData — always local
+  try {
+    return OPTIMIZED_HOSTS.has(new URL(src).hostname);
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Drop-in `next/image` replacement for Brainerce-sourced images (product
+ * photos, blog covers). Uploaded images get re-hosted onto cdn.brainerce.com
+ * by the backend's async image-import pipeline, but a product/variant can
+ * still carry a raw upstream-merchant URL while mid-import, or if that job
+ * failed. next/image throws if `src`'s host isn't in `images.remotePatterns`,
+ * so any host outside our known CDN falls back to `unoptimized` — an
+ * unresized, direct-from-origin fetch — instead of crashing the page.
+ *
+ * DESIGN ME — shared image wrapper; render ALL catalog images through this
+ * component (not raw next/image) so unknown hosts never crash the page.
+ */
+export function CdnImage({ unoptimized, ...props }: ImageProps) {
+  return <Image {...props} unoptimized={unoptimized ?? !isOptimizedHost(props.src)} />;
+}

package/templates/nextjs/designs/atelier/ui/shared/fly-to-cart.ts

@@ -0,0 +1,86 @@
+/**
+ * "Fly to cart" — a small round thumbnail of the product lifts off the image
+ * and drifts into the header cart icon, which then bumps.
+ *
+ * RTL gotcha (learned the hard way): next/image renders its <img> with
+ * `inset: 0`; a naive clone keeps that, and in an RTL document an
+ * over-constrained left+right resolves to RIGHT — pinning the clone to the
+ * wrong edge. `inset: 'auto'` must be set BEFORE top/left.
+ *
+ * Pure presentation; no-ops under prefers-reduced-motion or when either end
+ * of the flight is missing.
+ */
+export function flyToCart(source: HTMLElement | null) {
+  if (!source || typeof document === 'undefined') return;
+  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+
+  const target = document.getElementById('cart-anchor');
+  if (!target) return;
+
+  const img = source.querySelector('img') ?? source;
+  const from = img.getBoundingClientRect();
+  const to = target.getBoundingClientRect();
+  if (from.width === 0 || to.width === 0) return;
+
+  const SIZE = 64;
+  const startX = from.left + from.width / 2 - SIZE / 2;
+  const startY = from.top + from.height / 2 - SIZE / 2;
+
+  const clone = img.cloneNode(true) as HTMLElement;
+  Object.assign(clone.style, {
+    inset: 'auto', // kill next/image's inset:0 BEFORE top/left (RTL right-wins)
+    position: 'fixed',
+    top: `${startY}px`,
+    left: `${startX}px`,
+    width: `${SIZE}px`,
+    height: `${SIZE}px`,
+    borderRadius: '9999px',
+    objectFit: 'cover',
+    zIndex: '9999',
+    pointerEvents: 'none',
+    margin: '0',
+    border: '2px solid hsl(var(--background))',
+    boxShadow: '0 10px 24px -10px hsl(var(--primary) / 0.5)',
+    background: 'hsl(var(--background))',
+  });
+  document.body.appendChild(clone);
+
+  const dx = to.left + to.width / 2 - (startX + SIZE / 2);
+  const dy = to.top + to.height / 2 - (startY + SIZE / 2);
+
+  const flight = clone.animate(
+    [
+      { transform: 'translate(0, 0) scale(0.6)', opacity: 0 },
+      { transform: 'translate(0, -14px) scale(1)', opacity: 1, offset: 0.18 },
+      {
+        transform: `translate(${dx * 0.55}px, ${dy * 0.55 - 56}px) scale(0.75)`,
+        opacity: 1,
+        offset: 0.62,
+      },
+      { transform: `translate(${dx}px, ${dy}px) scale(0.15)`, opacity: 0.4 },
+    ],
+    { duration: 750, easing: 'cubic-bezier(0.22, 1, 0.36, 1)' }
+  );
+
+  const land = () => {
+    clone.remove();
+    target.classList.add('cart-bump');
+    window.setTimeout(() => target.classList.remove('cart-bump'), 450);
+  };
+  flight.onfinish = land;
+  // Failsafe — never leave a stray clone in the DOM (tab switch, WAAPI hiccup)
+  window.setTimeout(() => {
+    if (clone.isConnected) land();
+  }, 1100);
+}
+
+/** Picks the first visible element matching the selector — for pages that
+ *  render separate mobile/desktop galleries. */
+export function firstVisible(selector: string): HTMLElement | null {
+  if (typeof document === 'undefined') return null;
+  for (const el of document.querySelectorAll<HTMLElement>(selector)) {
+    const rect = el.getBoundingClientRect();
+    if (rect.width > 0 && rect.height > 0) return el;
+  }
+  return null;
+}