create-brainerce-store 1.34.5 → 1.35.0

package/dist/index.js

@@ -31,7 +31,7 @@ var require_package = __commonJS({
   "package.json"(exports2, module2) {
     module2.exports = {
       name: "create-brainerce-store",
-      version: "1.34.5",
+      version: "1.35.0",
       description: "Scaffold a production-ready e-commerce storefront connected to Brainerce",
       bin: {
         "create-brainerce-store": "dist/index.js"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-brainerce-store",
-  "version": "1.34.5",
+  "version": "1.35.0",
   "description": "Scaffold a production-ready e-commerce storefront connected to Brainerce",
   "bin": {
     "create-brainerce-store": "dist/index.js"

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/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

@@ -39,7 +39,7 @@ export async function ProductJsonLd({ product, url, currency = 'USD' }: ProductJ
           url,
         };
 
-  const productJsonLd = {
+  const productJsonLd: Record<string, unknown> = {
     '@context': 'https://schema.org',
     '@type': 'Product',
     name: product.name,
@@ -50,6 +50,18 @@ export async function ProductJsonLd({ product, url, currency = 'USD' }: ProductJ
     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',