create-brainerce-store 1.50.1 → 1.51.0

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/products/allergen-chips.tsx

@@ -1,78 +0,0 @@
-'use client';
-
-/**
- * <AllergenChips> — informational allergen markers for storefront PDPs.
- * Pure presentation; no interactivity. Pairs with `<ModifierGroupSelector>`
- * but works standalone next to a product as well.
- *
- * Allergens are descriptive only: the system surfaces them but does not
- * auto-block purchase. Customer-side allergen filtering is a deferred SDK
- * feature (PRD §16).
- *
- * Icon resolution (PRD §15 Q4): when `allergen.iconUrl` is set, use it.
- * Otherwise fall back to a built-in emoji keyed by `allergen.code` for the
- * 8 common allergens listed in PRD §5.7. Stores that want branded icons
- * upload via `iconUrl` per allergen; the rest get a sensible default
- * without any setup.
- */
-
-import type { Allergen } from 'brainerce';
-
-/**
- * Default emoji per canonical allergen code. The schema's @@unique on
- * `(accountId, storeId, code)` means a store may have at most one of each;
- * any code not in this map renders without an icon (the chip still shows
- * the localized name, so the customer is informed regardless).
- */
-const DEFAULT_EMOJI_BY_CODE: Record<string, string> = {
-  gluten: '🌾',
-  dairy: '🥛',
-  nuts: '🥜',
-  eggs: '🥚',
-  soy: '🫘',
-  fish: '🐟',
-  shellfish: '🦐',
-  sesame: '🌱',
-};
-
-interface AllergenChipsProps {
-  allergens: Allergen[];
-  /**
-   * When the storefront has more allergen icons than fit nicely, condense
-   * to "Contains: X, Y, +N more" instead of rendering every chip.
-   */
-  maxVisible?: number;
-}
-
-export function AllergenChips({ allergens, maxVisible = 6 }: AllergenChipsProps) {
-  if (!allergens || allergens.length === 0) return null;
-
-  const visible = allergens.slice(0, maxVisible);
-  const overflow = Math.max(0, allergens.length - visible.length);
-
-  return (
-    <span className="allergen-chips" role="list" aria-label="Contains">
-      {visible.map((allergen) => {
-        const fallbackEmoji = DEFAULT_EMOJI_BY_CODE[allergen.code];
-        return (
-          <span key={allergen.id} className="allergen-chip" role="listitem" title={allergen.name}>
-            {allergen.iconUrl ? (
-              <img
-                src={allergen.iconUrl}
-                alt=""
-                aria-hidden="true"
-                className="allergen-chip__icon"
-              />
-            ) : fallbackEmoji ? (
-              <span aria-hidden="true" className="allergen-chip__emoji">
-                {fallbackEmoji}
-              </span>
-            ) : null}
-            <span className="allergen-chip__name">{allergen.name}</span>
-          </span>
-        );
-      })}
-      {overflow > 0 && <span className="allergen-chip allergen-chip--more">+{overflow} more</span>}
-    </span>
-  );
-}