create-brainerce-store 1.34.4 → 1.35.0

package/templates/nextjs/base/src/app/products/[slug]/page.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 import { getServerClient } from '@/lib/brainerce';
 import { ProductJsonLd } from '@/components/seo/product-json-ld';
+import { ReviewsSection } from '@/components/reviews/reviews-section';
 import { ProductClientSection } from './product-client-section';
 
 type Props = {
@@ -68,6 +69,7 @@ export default async function ProductDetailPage({ params }: Props) {
     <>
       <ProductJsonLd product={product} url={productUrl} currency={currency} />
       <ProductClientSection product={product} />
+      <ReviewsSection productId={product.id} />
     </>
   );
 }

package/templates/nextjs/base/src/components/cart/coupon-input.tsx

@@ -1,134 +1,145 @@
-'use client';
-
-import { useState } from 'react';
-import type { Cart } from 'brainerce';
-import { getClient } from '@/lib/brainerce';
-import { useTranslations } from '@/lib/translations';
-import { LoadingSpinner } from '@/components/shared/loading-spinner';
-import { cn } from '@/lib/utils';
-
-interface CouponInputProps {
-  cart: Cart;
-  onUpdate: () => void;
-  className?: string;
-}
-
-export function CouponInput({ cart, onUpdate, className }: CouponInputProps) {
-  const t = useTranslations('coupon');
-  const tc = useTranslations('common');
-  const [code, setCode] = useState('');
-  const [applying, setApplying] = useState(false);
-  const [removing, setRemoving] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const appliedCoupon = cart.couponCode || null;
-
-  async function handleApply() {
-    const trimmed = code.trim();
-    if (!trimmed || applying) return;
-
-    try {
-      setApplying(true);
-      setError(null);
-      const client = getClient();
-      await client.applyCoupon(cart.id, trimmed);
-      setCode('');
-      onUpdate();
-    } catch (err) {
-      const message = err instanceof Error ? err.message : t('invalidCode');
-      setError(message);
-    } finally {
-      setApplying(false);
-    }
-  }
-
-  async function handleRemove() {
-    if (removing) return;
-
-    try {
-      setRemoving(true);
-      setError(null);
-      const client = getClient();
-      await client.removeCoupon(cart.id);
-      onUpdate();
-    } catch (err) {
-      console.error('Failed to remove coupon:', err);
-    } finally {
-      setRemoving(false);
-    }
-  }
-
-  // Show applied coupon
-  if (appliedCoupon) {
-    return (
-      <div className={cn('space-y-2', className)}>
-        <div className="bg-muted flex items-center justify-between rounded px-3 py-2">
-          <div className="flex items-center gap-2">
-            <svg
-              className="text-primary h-4 w-4 flex-shrink-0"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"
-              />
-            </svg>
-            <span className="text-foreground text-sm font-medium">{appliedCoupon}</span>
-          </div>
-          <button
-            type="button"
-            onClick={handleRemove}
-            disabled={removing}
-            className="text-destructive hover:text-destructive/80 text-xs transition-colors disabled:opacity-40"
-          >
-            {removing ? tc('removing') : tc('remove')}
-          </button>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className={cn('space-y-2', className)}>
-      <div className="flex gap-2">
-        <input
-          type="text"
-          value={code}
-          onChange={(e) => {
-            setCode(e.target.value);
-            if (error) setError(null);
-          }}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter') {
-              e.preventDefault();
-              handleApply();
-            }
-          }}
-          placeholder={t('placeholder')}
-          className={cn(
-            'bg-background text-foreground placeholder:text-muted-foreground focus:ring-primary/20 focus:border-primary h-9 flex-1 rounded border px-3 text-sm focus:outline-none focus:ring-2',
-            error ? 'border-destructive' : 'border-border'
-          )}
-        />
-        <button
-          type="button"
-          onClick={handleApply}
-          disabled={applying || !code.trim()}
-          className="border-border bg-background text-foreground hover:bg-muted h-9 rounded border px-4 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-40"
-        >
-          {applying ? (
-            <LoadingSpinner size="sm" className="border-muted-foreground/30 border-t-foreground" />
-          ) : (
-            tc('apply')
-          )}
-        </button>
-      </div>
-
-      {error && <p className="text-destructive text-xs">{error}</p>}
-    </div>
-  );
-}
+'use client';
+
+import { useState } from 'react';
+import type { Cart } from 'brainerce';
+import { getClient } from '@/lib/brainerce';
+import { useTranslations } from '@/lib/translations';
+import { LoadingSpinner } from '@/components/shared/loading-spinner';
+import { cn } from '@/lib/utils';
+
+interface CouponInputProps {
+  cart: Cart;
+  /** When provided, uses applyCheckoutCoupon/removeCheckoutCoupon instead of
+   *  applyCoupon/removeCoupon. Always pass this when a checkout session exists. */
+  checkoutId?: string;
+  onUpdate: () => void;
+  className?: string;
+}
+
+export function CouponInput({ cart, checkoutId, onUpdate, className }: CouponInputProps) {
+  const t = useTranslations('coupon');
+  const tc = useTranslations('common');
+  const [code, setCode] = useState('');
+  const [applying, setApplying] = useState(false);
+  const [removing, setRemoving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const appliedCoupon = cart.couponCode || null;
+
+  async function handleApply() {
+    const trimmed = code.trim();
+    if (!trimmed || applying) return;
+
+    try {
+      setApplying(true);
+      setError(null);
+      const client = getClient();
+      if (checkoutId) {
+        await client.applyCheckoutCoupon(checkoutId, trimmed);
+      } else {
+        await client.applyCoupon(cart.id, trimmed);
+      }
+      setCode('');
+      onUpdate();
+    } catch (err) {
+      const message = err instanceof Error ? err.message : t('invalidCode');
+      setError(message);
+    } finally {
+      setApplying(false);
+    }
+  }
+
+  async function handleRemove() {
+    if (removing) return;
+
+    try {
+      setRemoving(true);
+      setError(null);
+      const client = getClient();
+      if (checkoutId) {
+        await client.removeCheckoutCoupon(checkoutId);
+      } else {
+        await client.removeCoupon(cart.id);
+      }
+      onUpdate();
+    } catch (err) {
+      console.error('Failed to remove coupon:', err);
+    } finally {
+      setRemoving(false);
+    }
+  }
+
+  // Show applied coupon
+  if (appliedCoupon) {
+    return (
+      <div className={cn('space-y-2', className)}>
+        <div className="bg-muted flex items-center justify-between rounded px-3 py-2">
+          <div className="flex items-center gap-2">
+            <svg
+              className="text-primary h-4 w-4 flex-shrink-0"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"
+              />
+            </svg>
+            <span className="text-foreground text-sm font-medium">{appliedCoupon}</span>
+          </div>
+          <button
+            type="button"
+            onClick={handleRemove}
+            disabled={removing}
+            className="text-destructive hover:text-destructive/80 text-xs transition-colors disabled:opacity-40"
+          >
+            {removing ? tc('removing') : tc('remove')}
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn('space-y-2', className)}>
+      <div className="flex gap-2">
+        <input
+          type="text"
+          value={code}
+          onChange={(e) => {
+            setCode(e.target.value);
+            if (error) setError(null);
+          }}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              e.preventDefault();
+              handleApply();
+            }
+          }}
+          placeholder={t('placeholder')}
+          className={cn(
+            'bg-background text-foreground placeholder:text-muted-foreground focus:ring-primary/20 focus:border-primary h-9 flex-1 rounded border px-3 text-sm focus:outline-none focus:ring-2',
+            error ? 'border-destructive' : 'border-border'
+          )}
+        />
+        <button
+          type="button"
+          onClick={handleApply}
+          disabled={applying || !code.trim()}
+          className="border-border bg-background text-foreground hover:bg-muted h-9 rounded border px-4 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-40"
+        >
+          {applying ? (
+            <LoadingSpinner size="sm" className="border-muted-foreground/30 border-t-foreground" />
+          ) : (
+            tc('apply')
+          )}
+        </button>
+      </div>
+
+      {error && <p className="text-destructive text-xs">{error}</p>}
+    </div>
+  );
+}

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

@@ -20,12 +20,21 @@ interface ProductCardProps {
 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);
+  let min: number;
+  let max: number;
+  if (product.priceMin && product.priceMax) {
+    min = parseFloat(product.priceMin);
+    max = parseFloat(product.priceMax);
+  } else {
+    const variants = product.variants ?? [];
+    if (variants.length === 0) return null;
+    const prices = variants.map((v) => getVariantPrice(v, product.basePrice));
+    min = Math.min(...prices);
+    max = Math.max(...prices);
+  }
+
+  if (isNaN(min) || isNaN(max)) return null;
 
   return (
     <span className="text-foreground text-sm font-medium">

package/templates/nextjs/base/src/components/reviews/review-form.tsx

@@ -0,0 +1,133 @@
+'use client';
+
+import { useState } from 'react';
+import { client } from '@/lib/brainerce';
+
+interface ReviewFormProps {
+  productId: string;
+}
+
+export function ReviewForm({ productId }: ReviewFormProps) {
+  const [rating, setRating] = useState(5);
+  const [authorName, setAuthorName] = useState('');
+  const [authorEmail, setAuthorEmail] = useState('');
+  const [body, setBody] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState(false);
+
+  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setError(null);
+    setSubmitting(true);
+    try {
+      await client.submitProductReview(productId, {
+        authorName: authorName.trim(),
+        authorEmail: authorEmail.trim() || undefined,
+        rating,
+        body: body.trim() || undefined,
+      });
+      setSuccess(true);
+      setAuthorName('');
+      setAuthorEmail('');
+      setBody('');
+      setRating(5);
+      // The reviews list is server-rendered — refresh to pick up the new review.
+      setTimeout(() => window.location.reload(), 1200);
+    } catch (err) {
+      const status = (err as { status?: number })?.status;
+      if (status === 409) {
+        setError("You've already submitted a review for this product.");
+      } else if (status === 429) {
+        setError('Too many submissions. Please try again in a few minutes.');
+      } else if (status === 403) {
+        setError('Reviews are not accepted for this product right now.');
+      } else {
+        setError('Could not submit your review. Please try again.');
+      }
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  if (success) {
+    return (
+      <p className="text-sm text-emerald-700 rounded-md border border-emerald-200 bg-emerald-50 p-3">
+        Thanks! Your review has been submitted.
+      </p>
+    );
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="border rounded-md p-4 space-y-3">
+      <h3 className="font-medium">Write a review</h3>
+
+      <fieldset>
+        <legend className="text-sm mb-1">Your rating</legend>
+        <div className="inline-flex gap-1" role="radiogroup" aria-label="Star rating">
+          {[1, 2, 3, 4, 5].map((n) => (
+            <button
+              key={n}
+              type="button"
+              role="radio"
+              aria-checked={rating === n}
+              onClick={() => setRating(n)}
+              className={`text-2xl leading-none ${n <= rating ? 'text-yellow-500' : 'text-gray-300'}`}
+            >
+              ★
+            </button>
+          ))}
+        </div>
+      </fieldset>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+        <label className="block text-sm">
+          Name
+          <input
+            type="text"
+            value={authorName}
+            onChange={(event) => setAuthorName(event.target.value)}
+            required
+            maxLength={100}
+            className="mt-1 block w-full rounded border px-2 py-1.5 text-sm"
+          />
+        </label>
+        <label className="block text-sm">
+          Email <span className="text-muted-foreground text-xs">(optional)</span>
+          <input
+            type="email"
+            value={authorEmail}
+            onChange={(event) => setAuthorEmail(event.target.value)}
+            maxLength={200}
+            className="mt-1 block w-full rounded border px-2 py-1.5 text-sm"
+          />
+        </label>
+      </div>
+
+      <label className="block text-sm">
+        Your review <span className="text-muted-foreground text-xs">(optional)</span>
+        <textarea
+          value={body}
+          onChange={(event) => setBody(event.target.value)}
+          maxLength={5000}
+          rows={4}
+          className="mt-1 block w-full rounded border px-2 py-1.5 text-sm"
+        />
+      </label>
+
+      {error && (
+        <p role="alert" className="text-sm text-red-700">
+          {error}
+        </p>
+      )}
+
+      <button
+        type="submit"
+        disabled={submitting || !authorName.trim()}
+        className="inline-flex items-center rounded bg-black px-4 py-2 text-sm text-white disabled:opacity-50"
+      >
+        {submitting ? 'Submitting…' : 'Submit review'}
+      </button>
+    </form>
+  );
+}

package/templates/nextjs/base/src/components/reviews/reviews-section.tsx

@@ -0,0 +1,87 @@
+import type { ProductReview } from 'brainerce';
+import { client } from '@/lib/brainerce';
+import { ReviewForm } from './review-form';
+
+interface ReviewsSectionProps {
+  productId: string;
+  initialReviews?: ProductReview[];
+  /** 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 }: ReviewsSectionProps) {
+  let reviews: ProductReview[] = initialReviews ?? [];
+
+  if (!initialReviews) {
+    try {
+      const result = await client.listProductReviews(productId, { page: 1, limit: 20 });
+      reviews = result.data;
+    } catch {
+      // Reviews disabled at store level or network error — render the form anyway.
+      reviews = [];
+    }
+  }
+
+  return (
+    <section className="mt-8" aria-labelledby="reviews-heading">
+      <h2 id="reviews-heading" className="text-xl font-semibold mb-4">
+        Reviews
+      </h2>
+
+      {reviews.length === 0 ? (
+        <p className="text-sm text-muted-foreground mb-6">
+          No reviews yet — be the first to share your experience.
+        </p>
+      ) : (
+        <ul className="space-y-4 mb-6">
+          {reviews.map((review) => (
+            <ReviewCard key={review.id} review={review} />
+          ))}
+        </ul>
+      )}
+
+      <ReviewForm productId={productId} />
+    </section>
+  );
+}
+
+function ReviewCard({ review }: { review: ProductReview }) {
+  return (
+    <li className="border rounded-md p-4">
+      <header className="flex items-center gap-2 flex-wrap">
+        <Stars rating={review.rating} />
+        <span className="font-medium text-sm">{review.authorName}</span>
+        {review.verifiedPurchase && (
+          <span className="text-xs px-2 py-0.5 rounded bg-emerald-50 text-emerald-700">
+            Verified purchase
+          </span>
+        )}
+        <time className="text-xs text-muted-foreground ms-auto">
+          {new Date(review.createdAt).toLocaleDateString()}
+        </time>
+      </header>
+      {review.body && (
+        <p className="mt-2 text-sm whitespace-pre-line break-words">{review.body}</p>
+      )}
+    </li>
+  );
+}
+
+function Stars({ rating }: { rating: number }) {
+  return (
+    <span aria-label={`${rating} of 5 stars`} className="inline-flex">
+      {[1, 2, 3, 4, 5].map((n) => (
+        <span key={n} className={n <= rating ? 'text-yellow-500' : 'text-gray-300'}>
+          ★
+        </span>
+      ))}
+    </span>
+  );
+}

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

@@ -14,7 +14,32 @@ export async function ProductJsonLd({ product, url, currency = 'USD' }: ProductJ
   const imageUrl = product.images?.[0]?.url;
   const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || '';
 
-  const productJsonLd = {
+  const availability =
+    product.inventory?.canPurchase !== false
+      ? 'https://schema.org/InStock'
+      : 'https://schema.org/OutOfStock';
+
+  const isVariable = product.type === 'VARIABLE';
+  const offers =
+    isVariable && product.priceMin
+      ? {
+          '@type': 'AggregateOffer',
+          lowPrice: product.priceMin,
+          highPrice: product.priceMax ?? product.priceMin,
+          offerCount: product.variants?.length ?? 1,
+          priceCurrency: currency,
+          availability,
+          url,
+        }
+      : {
+          '@type': 'Offer',
+          price: priceInfo.price,
+          priceCurrency: currency,
+          availability,
+          url,
+        };
+
+  const productJsonLd: Record<string, unknown> = {
     '@context': 'https://schema.org',
     '@type': 'Product',
     name: product.name,
@@ -22,18 +47,21 @@ export async function ProductJsonLd({ product, url, currency = 'USD' }: ProductJ
     image: imageUrl,
     url,
     sku: product.sku || product.id,
-    offers: {
-      '@type': 'Offer',
-      price: priceInfo.price,
-      priceCurrency: currency,
-      availability:
-        product.inventory?.canPurchase !== false
-          ? 'https://schema.org/InStock'
-          : 'https://schema.org/OutOfStock',
-      url,
-    },
+    offers,
   };
 
+  // Emit aggregateRating only when there is real review data — Google rejects
+  // self-serving / faked ratings and stores with 0 reviews shouldn't claim any.
+  if (product.reviewCount && product.reviewCount > 0) {
+    productJsonLd.aggregateRating = {
+      '@type': 'AggregateRating',
+      ratingValue: product.avgRating,
+      reviewCount: product.reviewCount,
+      bestRating: 5,
+      worstRating: 1,
+    };
+  }
+
   const breadcrumbJsonLd = {
     '@context': 'https://schema.org',
     '@type': 'BreadcrumbList',