create-brainerce-store 1.3.2 → 1.4.0

package/templates/nextjs/base/src/app/page.tsx

@@ -1,95 +1,98 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-import Link from 'next/link';
-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';
-
-export default function HomePage() {
-  const { storeInfo, loading: storeLoading } = useStoreInfo();
-  const [products, setProducts] = useState<Product[]>([]);
-  const [banners, setBanners] = useState<DiscountBanner[]>([]);
-  const [loading, setLoading] = useState(true);
-
-  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">
-            Welcome to {storeInfo?.name || 'Our Store'}
-          </h1>
-          <p className="text-muted-foreground mx-auto mt-4 max-w-2xl text-lg">
-            Discover our curated collection of products crafted with care.
-          </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"
-          >
-            Shop Now
-          </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">Featured Products</h2>
-          <Link href="/products" className="text-primary text-sm font-medium hover:underline">
-            View all
-          </Link>
-        </div>
-        <ProductGrid products={products} />
-      </section>
-    </div>
-  );
-}
+'use client';
+
+import { useEffect, useState } from 'react';
+import Link from 'next/link';
+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 default function HomePage() {
+  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/app/products/[slug]/page.tsx

@@ -12,10 +12,12 @@ import { PriceDisplay } from '@/components/shared/price-display';
 import { LoadingSpinner } from '@/components/shared/loading-spinner';
 import { VariantSelector } from '@/components/products/variant-selector';
 import { StockBadge } from '@/components/products/stock-badge';
+import { useTranslations } from '@/lib/translations';
 import { cn } from '@/lib/utils';
 
 /** 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>;
@@ -77,7 +79,7 @@ function MetafieldValue({ field }: { field: ProductMetafield }) {
         <span className="text-muted-foreground">-</span>
       );
     case 'BOOLEAN':
-      return <span>{field.value === 'true' ? 'Yes' : 'No'}</span>;
+      return <span>{field.value === 'true' ? tc('yes') : tc('no')}</span>;
     case 'DATE':
     case 'DATETIME': {
       if (!field.value) return <span className="text-muted-foreground">-</span>;
@@ -101,6 +103,8 @@ export default function ProductDetailPage() {
   const params = useParams();
   const slug = params.slug as string;
   const { refreshCart } = useCart();
+  const t = useTranslations('productDetail');
+  const tc = useTranslations('common');
   const [product, setProduct] = useState<Product | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -125,7 +129,7 @@ export default function ProductDetailPage() {
           setSelectedVariant(p.variants[0]);
         }
       } catch {
-        setError('Product not found.');
+        setError(t('notFound'));
       } finally {
         setLoading(false);
       }
@@ -232,9 +236,9 @@ export default function ProductDetailPage() {
   if (error || !product) {
     return (
       <div className="mx-auto max-w-7xl px-4 py-16 text-center sm:px-6 lg:px-8">
-        <h1 className="text-foreground text-2xl font-bold">{error || 'Product not found'}</h1>
+        <h1 className="text-foreground text-2xl font-bold">{error || t('notFound')}</h1>
         <Link href="/products" className="text-primary mt-4 inline-block hover:underline">
-          Back to products
+          {t('backToProducts')}
         </Link>
       </div>
     );
@@ -343,7 +347,7 @@ export default function ProductDetailPage() {
                 type="button"
                 onClick={() => setQuantity((q) => Math.max(1, q - 1))}
                 className="text-foreground hover:bg-muted px-3 py-2 transition-colors"
-                aria-label="Decrease quantity"
+                aria-label={t('decreaseQuantity')}
               >
                 -
               </button>
@@ -354,7 +358,7 @@ export default function ProductDetailPage() {
                 type="button"
                 onClick={() => setQuantity((q) => q + 1)}
                 className="text-foreground hover:bg-muted px-3 py-2 transition-colors"
-                aria-label="Increase quantity"
+                aria-label={t('increaseQuantity')}
               >
                 +
               </button>
@@ -377,14 +381,14 @@ export default function ProductDetailPage() {
                     size="sm"
                     className="border-primary-foreground/30 border-t-primary-foreground"
                   />
-                  Adding...
+                  {t('addingToCart')}
                 </span>
               ) : addedMessage ? (
-                'Added to Cart!'
+                t('addedToCart')
               ) : !canPurchase ? (
-                'Out of Stock'
+                t('outOfStock')
               ) : (
-                'Add to Cart'
+                t('addToCart')
               )}
             </button>
           </div>
@@ -392,7 +396,7 @@ export default function ProductDetailPage() {
           {/* Description */}
           {description && (
             <div className="border-border border-t pt-4">
-              <h2 className="text-foreground mb-3 text-lg font-semibold">Description</h2>
+              <h2 className="text-foreground mb-3 text-lg font-semibold">{t('description')}</h2>
               {'html' in description ? (
                 <div
                   className="prose prose-sm text-muted-foreground max-w-none"
@@ -407,7 +411,7 @@ export default function ProductDetailPage() {
           {/* Metafields / Specifications */}
           {product.metafields && product.metafields.length > 0 && (
             <div className="border-border border-t pt-4">
-              <h2 className="text-foreground mb-3 text-lg font-semibold">Specifications</h2>
+              <h2 className="text-foreground mb-3 text-lg font-semibold">{t('specifications')}</h2>
               <table className="w-full text-sm">
                 <tbody>
                   {product.metafields.map((field) => (