create-brainerce-store 1.14.2 → 1.14.4

package/templates/nextjs/base/src/components/products/product-card.tsx

@@ -1,13 +1,16 @@
 'use client';
 
+import { useState } from 'react';
 import Link from 'next/link';
+import { useRouter } from 'next/navigation';
 import Image from 'next/image';
 import type { Product } from 'brainerce';
-import { getProductPriceInfo } from 'brainerce';
+import { getProductPriceInfo, getVariantPrice, formatPrice } from 'brainerce';
 import { useTranslations } from '@/lib/translations';
 import { PriceDisplay } from '@/components/shared/price-display';
 import { StockBadge } from '@/components/products/stock-badge';
 import { DiscountBadge } from '@/components/products/discount-badge';
+import { useCart, useStoreInfo } from '@/providers/store-provider';
 import { cn } from '@/lib/utils';
 
 interface ProductCardProps {
@@ -15,60 +18,167 @@ interface ProductCardProps {
   className?: string;
 }
 
+function VariantPriceRange({ product }: { product: Product }) {
+  const { storeInfo } = useStoreInfo();
+  const currency = storeInfo?.currency || 'USD';
+  const variants = product.variants ?? [];
+  if (variants.length === 0) return null;
+
+  const prices = variants.map((v) => getVariantPrice(v, product.basePrice));
+  const min = Math.min(...prices);
+  const max = Math.max(...prices);
+
+  return (
+    <span className="text-foreground text-sm font-medium">
+      {min === max
+        ? (formatPrice(min, { currency }) as string)
+        : `${formatPrice(min, { currency })} – ${formatPrice(max, { currency })}`}
+    </span>
+  );
+}
+
 export function ProductCard({ product, className }: ProductCardProps) {
   const t = useTranslations('common');
   const tp = useTranslations('productDetail');
+  const tProd = useTranslations('products');
+  const router = useRouter();
+  const { refreshCart } = useCart();
   const { price, originalPrice, isOnSale } = getProductPriceInfo(product);
   const mainImage = product.images?.[0];
   const imageUrl = mainImage?.url || null;
   const slug = product.slug || product.id;
+  const isVariable = product.type === 'VARIABLE';
+
+  const [adding, setAdding] = useState(false);
+  const [added, setAdded] = useState(false);
+
+  const canPurchase = product.inventory?.canPurchase !== false;
+
+  async function handleAddToCart(e: React.MouseEvent) {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (isVariable) {
+      router.push(`/products/${slug}`);
+      return;
+    }
+
+    if (adding || !canPurchase) return;
+
+    try {
+      setAdding(true);
+      const { getClient } = await import('@/lib/brainerce');
+      const client = getClient();
+      await client.smartAddToCart({ productId: product.id, quantity: 1 });
+      await refreshCart();
+      setAdded(true);
+      setTimeout(() => setAdded(false), 2000);
+    } catch (err) {
+      console.error('Failed to add to cart:', err);
+    } finally {
+      setAdding(false);
+    }
+  }
 
   return (
-    <Link
-      href={`/products/${slug}`}
+    <div
       className={cn(
         'border-border bg-background group block overflow-hidden rounded-lg border transition-shadow hover:shadow-md',
         className
       )}
     >
-      {/* Image */}
-      <div className="bg-muted relative aspect-square overflow-hidden">
-        {imageUrl ? (
-          <Image
-            src={imageUrl}
-            alt={mainImage?.alt || product.name}
-            fill
-            sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
-            className="object-cover transition-transform duration-300 group-hover:scale-105"
-          />
-        ) : (
-          <div className="text-muted-foreground absolute inset-0 flex items-center justify-center">
-            <svg className="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={1.5}
-                d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
-              />
-            </svg>
+      {/* Image — clickable */}
+      <Link href={`/products/${slug}`} className="block">
+        <div className="bg-muted relative aspect-square overflow-hidden">
+          {imageUrl ? (
+            <Image
+              src={imageUrl}
+              alt={mainImage?.alt || product.name}
+              fill
+              sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
+              className="object-cover transition-transform duration-300 group-hover:scale-105"
+            />
+          ) : (
+            <div className="text-muted-foreground absolute inset-0 flex items-center justify-center">
+              <svg className="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={1.5}
+                  d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+                />
+              </svg>
+            </div>
+          )}
+
+          {/* Badges */}
+          <div className="absolute start-2 top-2 flex flex-col gap-1">
+            {isOnSale && (
+              <span className="bg-destructive text-destructive-foreground rounded px-2 py-1 text-xs font-bold">
+                {t('sale')}
+              </span>
+            )}
+            <DiscountBadge discount={product.discount} />
+            {product.isDownloadable && (
+              <span className="bg-primary text-primary-foreground rounded px-2 py-1 text-xs font-bold">
+                {tp('digitalProduct')}
+              </span>
+            )}
           </div>
-        )}
 
-        {/* Badges */}
-        <div className="absolute start-2 top-2 flex flex-col gap-1">
-          {isOnSale && (
-            <span className="bg-destructive text-destructive-foreground rounded px-2 py-1 text-xs font-bold">
-              {t('sale')}
-            </span>
-          )}
-          <DiscountBadge discount={product.discount} />
-          {product.isDownloadable && (
-            <span className="bg-primary text-primary-foreground rounded px-2 py-1 text-xs font-bold">
-              {tp('digitalProduct')}
-            </span>
+          {/* Add to cart overlay button */}
+          {(isVariable || canPurchase) && (
+            <button
+              onClick={handleAddToCart}
+              disabled={adding}
+              aria-label={isVariable ? tProd('selectOptions') : tp('addToCart')}
+              className={cn(
+                'absolute bottom-2 end-2 flex h-8 w-8 items-center justify-center rounded-full shadow-md transition-all',
+                'translate-y-2 opacity-0 group-hover:translate-y-0 group-hover:opacity-100',
+                added
+                  ? 'bg-green-500 text-white'
+                  : 'bg-primary text-primary-foreground hover:opacity-90'
+              )}
+            >
+              {added ? (
+                <svg
+                  className="h-4 w-4"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  strokeWidth={2.5}
+                >
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+                </svg>
+              ) : isVariable ? (
+                <svg
+                  className="h-4 w-4"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                >
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M12 4v16m8-8H4" />
+                </svg>
+              ) : (
+                <svg
+                  className="h-4 w-4"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"
+                  />
+                </svg>
+              )}
+            </button>
           )}
         </div>
-      </div>
+      </Link>
 
       {/* Content */}
       <div className="space-y-2 p-3">
@@ -86,17 +196,23 @@ export function ProductCard({ product, className }: ProductCardProps) {
           </div>
         )}
 
-        {/* Name */}
-        <h3 className="text-foreground group-hover:text-primary line-clamp-2 text-sm font-medium transition-colors">
-          {product.name}
-        </h3>
+        {/* Name — clickable */}
+        <Link href={`/products/${slug}`}>
+          <h3 className="text-foreground hover:text-primary line-clamp-2 text-sm font-medium transition-colors">
+            {product.name}
+          </h3>
+        </Link>
 
         {/* Price */}
-        <PriceDisplay price={originalPrice} salePrice={isOnSale ? price : undefined} size="sm" />
+        {isVariable ? (
+          <VariantPriceRange product={product} />
+        ) : (
+          <PriceDisplay price={originalPrice} salePrice={isOnSale ? price : undefined} size="sm" />
+        )}
 
         {/* Stock */}
         <StockBadge inventory={product.inventory} />
       </div>
-    </Link>
+    </div>
   );
 }

package/templates/nextjs/base/src/components/products/stock-badge.tsx

@@ -1,53 +1,60 @@
-'use client';
-
-import type { InventoryInfo } from 'brainerce';
-import { cn } from '@/lib/utils';
-
-interface StockBadgeProps {
-  inventory: InventoryInfo | null | undefined;
-  lowStockThreshold?: number;
-  className?: string;
-}
-
-export function StockBadge({ inventory, lowStockThreshold = 5, className }: StockBadgeProps) {
-  const label = getStockLabel(inventory, lowStockThreshold);
-  const color = getStockColor(inventory, lowStockThreshold);
-
-  return (
-    <span
-      className={cn(
-        'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium',
-        color,
-        className
-      )}
-    >
-      {label}
-    </span>
-  );
-}
-
-function getStockLabel(inventory: InventoryInfo | null | undefined, lowStockThreshold: number): string {
-  if (!inventory) return 'Out of Stock';
-
-  const { trackingMode, inStock, available } = inventory;
-
-  if (trackingMode === 'DISABLED') return 'Unavailable';
-  if (!inStock) return 'Out of Stock';
-  if (trackingMode === 'UNLIMITED') return 'In Stock';
-
-  // TRACKED — show actual quantity
-  if (available <= lowStockThreshold) {
-    return `Only ${available} left`;
-  }
-  return `${available} in stock`;
-}
-
-function getStockColor(inventory: InventoryInfo | null | undefined, lowStockThreshold: number): string {
-  if (!inventory) return 'bg-red-100 text-red-800';
-
-  const { trackingMode, inStock, available } = inventory;
-
-  if (trackingMode === 'DISABLED' || !inStock) return 'bg-red-100 text-red-800';
-  if (trackingMode === 'TRACKED' && available <= lowStockThreshold) return 'bg-yellow-100 text-yellow-800';
-  return 'bg-green-100 text-green-800';
-}
+'use client';
+
+import type { InventoryInfo } from 'brainerce';
+import { cn } from '@/lib/utils';
+
+interface StockBadgeProps {
+  inventory: InventoryInfo | null | undefined;
+  lowStockThreshold?: number;
+  className?: string;
+}
+
+export function StockBadge({ inventory, lowStockThreshold = 5, className }: StockBadgeProps) {
+  const label = getStockLabel(inventory, lowStockThreshold);
+  const color = getStockColor(inventory, lowStockThreshold);
+
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium',
+        color,
+        className
+      )}
+    >
+      {label}
+    </span>
+  );
+}
+
+function getStockLabel(
+  inventory: InventoryInfo | null | undefined,
+  lowStockThreshold: number
+): string {
+  if (!inventory) return 'Out of Stock';
+
+  const { trackingMode, inStock, available } = inventory;
+
+  if (trackingMode === 'DISABLED') return 'Unavailable';
+  if (!inStock) return 'Out of Stock';
+  if (trackingMode === 'UNLIMITED') return 'In Stock';
+
+  // TRACKED — show actual quantity
+  if (available <= lowStockThreshold) {
+    return `Only ${available} left`;
+  }
+  return `${available} in stock`;
+}
+
+function getStockColor(
+  inventory: InventoryInfo | null | undefined,
+  lowStockThreshold: number
+): string {
+  if (!inventory) return 'bg-red-100 text-red-800';
+
+  const { trackingMode, inStock, available } = inventory;
+
+  if (trackingMode === 'DISABLED' || !inStock) return 'bg-red-100 text-red-800';
+  if (trackingMode === 'TRACKED' && available <= lowStockThreshold)
+    return 'bg-yellow-100 text-yellow-800';
+  return 'bg-green-100 text-green-800';
+}

package/templates/nextjs/base/src/components/seo/product-json-ld.tsx

@@ -4,13 +4,15 @@ import { getProductPriceInfo } from 'brainerce';
 interface ProductJsonLdProps {
   product: Product;
   url: string;
+  currency?: string;
 }
 
-export function ProductJsonLd({ product, url }: ProductJsonLdProps) {
+export function ProductJsonLd({ product, url, currency = 'USD' }: ProductJsonLdProps) {
   const priceInfo = getProductPriceInfo(product);
   const imageUrl = product.images?.[0]?.url;
+  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || '';
 
-  const jsonLd = {
+  const productJsonLd = {
     '@context': 'https://schema.org',
     '@type': 'Product',
     name: product.name,
@@ -21,7 +23,7 @@ export function ProductJsonLd({ product, url }: ProductJsonLdProps) {
     offers: {
       '@type': 'Offer',
       price: priceInfo.price,
-      priceCurrency: 'ILS',
+      priceCurrency: currency,
       availability:
         product.inventory?.canPurchase !== false
           ? 'https://schema.org/InStock'
@@ -30,10 +32,41 @@ export function ProductJsonLd({ product, url }: ProductJsonLdProps) {
     },
   };
 
+  const breadcrumbJsonLd = {
+    '@context': 'https://schema.org',
+    '@type': 'BreadcrumbList',
+    itemListElement: [
+      {
+        '@type': 'ListItem',
+        position: 1,
+        name: 'Home',
+        item: baseUrl || '/',
+      },
+      {
+        '@type': 'ListItem',
+        position: 2,
+        name: 'Products',
+        item: `${baseUrl}/products`,
+      },
+      {
+        '@type': 'ListItem',
+        position: 3,
+        name: product.name,
+        item: url,
+      },
+    ],
+  };
+
   return (
-    <script
-      type="application/ld+json"
-      dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
-    />
+    <>
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(productJsonLd) }}
+      />
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbJsonLd) }}
+      />
+    </>
   );
 }

package/templates/nextjs/base/src/lib/auth.ts

@@ -81,6 +81,7 @@ export async function proxyRegister(data: {
   lastName: string;
   email: string;
   password: string;
+  acceptsMarketing?: boolean;
 }): Promise<RegisterResult> {
   const response = await fetch(`/api/store/api/vc/${CONNECTION_ID}/customers/register`, {
     method: 'POST',