create-brainerce-store 1.50.5 → 1.52.0

package/templates/nextjs/ui-canvas/product/variant-selector.tsx

@@ -0,0 +1,212 @@
+'use client';
+
+import { useMemo } from 'react';
+import type { Product, ProductVariant } from 'brainerce';
+import { getVariantOptions, getProductSwatches, formatPrice } from 'brainerce';
+import type { InventoryInfo } from 'brainerce';
+import { useCurrency } from '@/core/lib/use-currency';
+import { useTranslations } from '@/core/lib/translations';
+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[];
+  }>;
+}
+
+/**
+ * DESIGN ME — variant selector on the product page: one group per attribute
+ * (Size, Color, …) with selectable values. Selection state and the matching
+ * logic below are the contract; the merchant's swatch metadata
+ * (`displayType`, `swatchColor`, `swatchColor2`, `swatchImageUrl`) is
+ * computed per value — the skeleton renders plain buttons, use the swatch
+ * data to build color/image swatches in your design.
+ *
+ * Building blocks: shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons are installed and ready to compose with.
+ */
+export function VariantSelector({
+  product,
+  selectedVariant,
+  onVariantChange,
+  className,
+}: VariantSelectorProps) {
+  const t = useTranslations('productDetail');
+  const currency = useCurrency();
+  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(className)}>
+      {attributeGroups.map((group) => (
+        <fieldset key={group.name} data-display-type={group.displayType}>
+          <legend>
+            {group.name}
+            {selectedOptions.get(group.name) && <span>: {selectedOptions.get(group.name)}</span>}
+          </legend>
+          <div className="flex flex-wrap gap-2">
+            {group.values.map(({ value, variants: matchingVariants }) => {
+              const isSelected = selectedOptions.get(group.name) === value;
+              const matchedVariant = findMatchingVariant(group.name, value);
+              const isAvailable = matchedVariant?.inventory?.canPurchase !== false;
+
+              return (
+                <button
+                  key={value}
+                  type="button"
+                  disabled={!isAvailable}
+                  aria-pressed={isSelected}
+                  onClick={() => {
+                    const variant = matchedVariant || matchingVariants[0];
+                    if (variant) onVariantChange(variant);
+                  }}
+                >
+                  {value}
+                </button>
+              );
+            })}
+          </div>
+        </fieldset>
+      ))}
+
+      {/* Variant-specific info */}
+      {selectedVariant && (
+        <p>
+          {selectedVariant.price && (
+            <span>
+              {
+                formatPrice(selectedVariant.salePrice || selectedVariant.price, {
+                  currency,
+                }) as string
+              }
+            </span>
+          )}{' '}
+          <span>{getTranslatedStockStatus(selectedVariant.inventory, t)}</span>
+        </p>
+      )}
+    </div>
+  );
+}
+
+function getTranslatedStockStatus(
+  inventory: InventoryInfo | null | undefined,
+  t: (key: string) => string
+): string {
+  if (!inventory) return t('outOfStock');
+  const { trackingMode, inStock, available } = inventory;
+  if (trackingMode === 'DISABLED') return t('unavailable');
+  if (!inStock) return t('outOfStock');
+  if (trackingMode === 'UNLIMITED') return t('inStock');
+  return t('availableInStock').replace('{available}', String(available));
+}

package/templates/nextjs/ui-canvas/shared/cdn-image.tsx

@@ -0,0 +1,31 @@
+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.
+ *
+ * Building blocks: shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons are installed and ready to compose with.
+ */
+export function CdnImage({ unoptimized, ...props }: ImageProps) {
+  return <Image {...props} unoptimized={unoptimized ?? !isOptimizedHost(props.src)} />;
+}

package/templates/nextjs/ui-canvas/shared/loading-spinner.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import { useTranslations } from '@/core/lib/translations';
+import { cn } from '@/core/lib/utils';
+
+interface LoadingSpinnerProps {
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+/**
+ * DESIGN ME — loading indicator used by every page and async button. Bare
+ * text placeholder; replace with your own spinner/skeleton. Keep the
+ * `role="status"` + sr-only label, and keep the `size` prop (callers across
+ * the app pass sm/md/lg).
+ *
+ * Building blocks: shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons are installed and ready to compose with.
+ */
+export function LoadingSpinner({ size = 'md', className }: LoadingSpinnerProps) {
+  const t = useTranslations('common');
+  return (
+    <span role="status" data-size={size} className={cn(className)}>
+      <span aria-hidden="true">…</span>
+      <span className="sr-only">{t('loading')}</span>
+    </span>
+  );
+}

package/templates/nextjs/base/src/app/home-client.tsx

@@ -1,98 +0,0 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-import { Link } from '@/lib/navigation';
-import type { Product, DiscountBanner } from 'brainerce';
-import { getClient } from '@/lib/brainerce';
-import { useStoreInfo } from '@/providers/store-provider';
-import { ProductGrid } from '@/components/products/product-grid';
-import { LoadingSpinner } from '@/components/shared/loading-spinner';
-import { useTranslations } from '@/lib/translations';
-
-export function HomeClient() {
-  const { storeInfo, loading: storeLoading } = useStoreInfo();
-  const [products, setProducts] = useState<Product[]>([]);
-  const [banners, setBanners] = useState<DiscountBanner[]>([]);
-  const [loading, setLoading] = useState(true);
-  const t = useTranslations('home');
-  const tc = useTranslations('common');
-
-  useEffect(() => {
-    async function load() {
-      try {
-        const client = getClient();
-        const [productsRes, bannersRes] = await Promise.allSettled([
-          client.getProducts({ limit: 8, sortBy: 'createdAt', sortOrder: 'desc' }),
-          client.getDiscountBanners(),
-        ]);
-
-        if (productsRes.status === 'fulfilled') {
-          setProducts(productsRes.value.data);
-        }
-        if (bannersRes.status === 'fulfilled') {
-          setBanners(bannersRes.value);
-        }
-      } catch (err) {
-        console.error('Failed to load home page data:', err);
-      } finally {
-        setLoading(false);
-      }
-    }
-
-    load();
-  }, []);
-
-  if (storeLoading || loading) {
-    return (
-      <div className="flex min-h-[60vh] items-center justify-center">
-        <LoadingSpinner size="lg" />
-      </div>
-    );
-  }
-
-  return (
-    <div>
-      {/* Discount Banners */}
-      {banners.length > 0 && (
-        <div className="bg-primary text-primary-foreground">
-          <div className="mx-auto max-w-7xl px-4 py-2 sm:px-6 lg:px-8">
-            <div className="flex items-center justify-center gap-4 overflow-x-auto text-sm font-medium">
-              {banners.map((banner) => (
-                <span key={banner.ruleId}>{banner.text}</span>
-              ))}
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* Hero Section */}
-      <section className="bg-muted">
-        <div className="mx-auto max-w-7xl px-4 py-20 text-center sm:px-6 lg:px-8">
-          <h1 className="text-foreground text-4xl font-bold tracking-tight sm:text-5xl">
-            {t('welcomeTo')} {storeInfo?.name || tc('store')}
-          </h1>
-          <p className="text-muted-foreground mx-auto mt-4 max-w-2xl text-lg">
-            {t('heroSubtitle')}
-          </p>
-          <Link
-            href="/products"
-            className="bg-primary text-primary-foreground mt-8 inline-flex items-center rounded px-6 py-3 font-medium transition-opacity hover:opacity-90"
-          >
-            {tc('shopNow')}
-          </Link>
-        </div>
-      </section>
-
-      {/* Featured Products */}
-      <section className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
-        <div className="mb-8 flex items-center justify-between">
-          <h2 className="text-foreground text-2xl font-bold">{t('featuredProducts')}</h2>
-          <Link href="/products" className="text-primary text-sm font-medium hover:underline">
-            {tc('viewAll')}
-          </Link>
-        </div>
-        <ProductGrid products={products} />
-      </section>
-    </div>
-  );
-}

package/templates/nextjs/base/src/components/content/faq-section.tsx.ejs

@@ -1,103 +0,0 @@
-/**
- * FAQ accordion — fully driven by the merchant's dashboard configuration.
- *
- * The merchant configures FAQs in the Brainerce dashboard under
- *   Sell → Content → FAQ
- *
- * Each FAQ row has a `key` (e.g. 'main', 'shipping', 'returns'). Pass the
- * pre-fetched payload as `faq`; this component knows nothing about which
- * key it came from.
- *
- * Two render branches:
- *   1. `faq` has items → accordion of question/answer pairs
- *   2. `faq` is null OR has no items → friendly empty state with a contact
- *      CTA, so the /faq page never looks broken before the merchant seeds.
- *
- * Security: FAQ answers may contain merchant-authored HTML — we sanitize
- * via `sanitizeHtml` before injecting via dangerouslySetInnerHTML.
- */
-'use client';
-
-import * as React from 'react';
-import type { Content } from 'brainerce';
-import { useTranslations } from '@/lib/translations';
-import { sanitizeHtml } from '@/lib/sanitize';
-
-interface FaqSectionProps {
-  /** Pre-fetched FAQ row. `null` renders the empty-state fallback. */
-  faq: Content<'FAQ'> | null;
-}
-
-export function FaqSection({ faq }: FaqSectionProps) {
-  const t = useTranslations('content');
-  const [openIdx, setOpenIdx] = React.useState<number | null>(0);
-
-  const items = faq?.data?.items ?? [];
-  const heading = faq?.name || t('faqTitle');
-
-  // Empty state — runs when the merchant hasn't created a FAQ row yet,
-  // or the row exists but contains no items. Keep the page non-empty and
-  // give the visitor a path to contact instead of a blank screen.
-  if (!faq || items.length === 0) {
-    return (
-      <section className="mx-auto max-w-3xl px-4 py-16 text-center sm:px-6 lg:px-8">
-        <h1 className="text-foreground mb-3 text-2xl font-semibold sm:text-3xl">{heading}</h1>
-        <p className="text-muted-foreground mb-6 text-sm sm:text-base">
-          <strong className="text-foreground">{t('faqEmptyTitle')}</strong>
-          <br />
-          {t('faqEmptyBody')}
-        </p>
-        <a
-          href="/contact"
-          className="bg-primary text-primary-foreground inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors hover:opacity-90"
-        >
-          {t('faqContactCta')}
-        </a>
-      </section>
-    );
-  }
-
-  return (
-    <section className="mx-auto max-w-3xl px-4 py-10 sm:px-6 lg:px-8">
-      <h1 className="text-foreground mb-6 text-2xl font-semibold sm:text-3xl">{heading}</h1>
-      <ul className="border-border divide-border divide-y rounded-lg border">
-        {items.map((item, idx) => {
-          const open = openIdx === idx;
-          return (
-            <li key={idx}>
-              <button
-                type="button"
-                onClick={() => setOpenIdx(open ? null : idx)}
-                aria-expanded={open}
-                className="hover:bg-muted/40 flex w-full items-center justify-between gap-4 p-4 text-start transition-colors"
-              >
-                <span className="text-foreground text-sm font-medium sm:text-base">
-                  {item.question}
-                </span>
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  className={`text-muted-foreground h-4 w-4 transition-transform ${
-                    open ? 'rotate-180' : ''
-                  }`}
-                  aria-hidden="true"
-                >
-                  <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
-                </svg>
-              </button>
-              {open ? (
-                <div
-                  className="text-muted-foreground prose prose-sm dark:prose-invert max-w-none px-4 pb-4 text-sm leading-relaxed"
-                  dangerouslySetInnerHTML={{ __html: sanitizeHtml(item.answer) }}
-                />
-              ) : null}
-            </li>
-          );
-        })}
-      </ul>
-    </section>
-  );
-}