create-brainerce-store 1.35.0 → 1.36.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.35.0",
+      version: "1.36.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.35.0",
+  "version": "1.36.0",
   "description": "Scaffold a production-ready e-commerce storefront connected to Brainerce",
   "bin": {
     "create-brainerce-store": "dist/index.js"

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

@@ -1,17 +1,193 @@
 'use client';
 
-import { useState } from 'react';
-import { client } from '@/lib/brainerce';
+import { useEffect, useState } from 'react';
+import { getClient } from '@/lib/brainerce';
+import { checkAuthStatus } from '@/lib/auth';
+import type { MyProductReview, ProductReview } from 'brainerce';
 
 interface ReviewFormProps {
   productId: string;
 }
 
+type Stage =
+  | { kind: 'loading' }
+  | { kind: 'signed_out' }
+  | { kind: 'not_eligible'; reason: MyProductReview['reason'] }
+  | { kind: 'submit' }
+  | { kind: 'edit'; review: ProductReview };
+
+/**
+ * Single component that decides which UI to render for a customer on a PDP:
+ * - Loading while we check auth state and eligibility
+ * - Signed out -> sign-in CTA
+ * - Signed in but not eligible -> "purchase this product to review"
+ * - Eligible without review -> submit form
+ * - Eligible with existing review -> edit/delete form (rating + body prefilled)
+ */
 export function ReviewForm({ productId }: ReviewFormProps) {
-  const [rating, setRating] = useState(5);
-  const [authorName, setAuthorName] = useState('');
-  const [authorEmail, setAuthorEmail] = useState('');
-  const [body, setBody] = useState('');
+  const [stage, setStage] = useState<Stage>({ kind: 'loading' });
+
+  useEffect(() => {
+    let cancelled = false;
+    async function load() {
+      const auth = await checkAuthStatus();
+      if (cancelled) return;
+      if (!auth.isLoggedIn) {
+        setStage({ kind: 'signed_out' });
+        return;
+      }
+      try {
+        const me = await getClient().getMyProductReview(productId);
+        if (cancelled) return;
+        if (!me.eligible) {
+          setStage({ kind: 'not_eligible', reason: me.reason });
+          return;
+        }
+        if (me.myReview) {
+          setStage({ kind: 'edit', review: me.myReview });
+          return;
+        }
+        setStage({ kind: 'submit' });
+      } catch {
+        if (!cancelled) setStage({ kind: 'not_eligible', reason: 'product_not_found' });
+      }
+    }
+    void load();
+    return () => {
+      cancelled = true;
+    };
+  }, [productId]);
+
+  if (stage.kind === 'loading') {
+    return <div className="text-muted-foreground text-sm">Loading…</div>;
+  }
+
+  if (stage.kind === 'signed_out') {
+    return (
+      <div className="rounded-md border p-4">
+        <p className="text-sm">
+          <a href="/account/login" className="font-medium underline">
+            Sign in
+          </a>{' '}
+          to leave a review for this product.
+        </p>
+      </div>
+    );
+  }
+
+  if (stage.kind === 'not_eligible') {
+    return <NotEligibleMessage reason={stage.reason} />;
+  }
+
+  if (stage.kind === 'edit') {
+    return (
+      <EditReviewBlock
+        productId={productId}
+        initial={stage.review}
+        onDeleted={() => setStage({ kind: 'submit' })}
+      />
+    );
+  }
+
+  return <SubmitReviewBlock productId={productId} />;
+}
+
+function NotEligibleMessage({ reason }: { reason: MyProductReview['reason'] }) {
+  let message: string;
+  switch (reason) {
+    case 'no_eligible_order':
+      message = 'Only customers who purchased this product can leave a review.';
+      break;
+    case 'reviews_disabled':
+      message = 'Reviews are not enabled for this store.';
+      break;
+    default:
+      message = 'You cannot review this product right now.';
+  }
+  return (
+    <div className="bg-muted/30 rounded-md border p-4">
+      <p className="text-muted-foreground text-sm">{message}</p>
+    </div>
+  );
+}
+
+function SubmitReviewBlock({ productId }: { productId: string }) {
+  return <ReviewEditor productId={productId} mode="create" initialRating={5} initialBody="" />;
+}
+
+function EditReviewBlock({
+  productId,
+  initial,
+  onDeleted,
+}: {
+  productId: string;
+  initial: ProductReview;
+  onDeleted: () => void;
+}) {
+  const [deleting, setDeleting] = useState(false);
+  const [deleteError, setDeleteError] = useState<string | null>(null);
+
+  async function handleDelete() {
+    if (!window.confirm('Delete your review for this product?')) return;
+    setDeleting(true);
+    setDeleteError(null);
+    try {
+      await getClient().deleteMyProductReview(productId);
+      onDeleted();
+      window.location.reload();
+    } catch {
+      setDeleteError('Could not delete your review. Please try again.');
+    } finally {
+      setDeleting(false);
+    }
+  }
+
+  return (
+    <div className="space-y-3">
+      <ReviewEditor
+        productId={productId}
+        mode="edit"
+        initialRating={initial.rating}
+        initialBody={initial.body ?? ''}
+      />
+      <div className="flex items-center justify-between rounded-md border border-red-100 bg-red-50/50 p-3">
+        <p className="text-xs text-red-700">Want to start over? You can delete your review.</p>
+        <button
+          type="button"
+          onClick={handleDelete}
+          disabled={deleting}
+          className="text-xs font-medium text-red-700 underline disabled:opacity-50"
+        >
+          {deleting ? 'Deleting…' : 'Delete review'}
+        </button>
+      </div>
+      {deleteError && (
+        <p role="alert" className="text-sm text-red-700">
+          {deleteError}
+        </p>
+      )}
+    </div>
+  );
+}
+
+/**
+ * The actual form. Same shape for create and edit — only the API method
+ * and the heading differ. Optimistic UX: success state + page reload to
+ * let the server-rendered reviews list pick up the change.
+ */
+function ReviewEditor({
+  productId,
+  mode,
+  initialRating,
+  initialBody,
+}: {
+  productId: string;
+  mode: 'create' | 'edit';
+  initialRating: number;
+  initialBody: string;
+}) {
+  const [rating, setRating] = useState(initialRating);
+  const [body, setBody] = useState(initialBody);
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [success, setSuccess] = useState(false);
@@ -21,29 +197,29 @@ export function ReviewForm({ productId }: ReviewFormProps) {
     setError(null);
     setSubmitting(true);
     try {
-      await client.submitProductReview(productId, {
-        authorName: authorName.trim(),
-        authorEmail: authorEmail.trim() || undefined,
-        rating,
-        body: body.trim() || undefined,
-      });
+      const client = getClient();
+      const input = { rating, body: body.trim() || undefined };
+      if (mode === 'edit') {
+        await client.updateMyProductReview(productId, input);
+      } else {
+        await client.submitProductReview(productId, input);
+      }
       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 === 403) {
+        setError('Only customers who purchased this product can leave a review.');
       } 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.');
+        setError(
+          mode === 'edit'
+            ? 'Could not update your review. Please try again.'
+            : 'Could not submit your review. Please try again.'
+        );
       }
     } finally {
       setSubmitting(false);
@@ -52,18 +228,20 @@ export function ReviewForm({ productId }: ReviewFormProps) {
 
   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 className="rounded-md border border-emerald-200 bg-emerald-50 p-3 text-sm text-emerald-700">
+        {mode === 'edit'
+          ? 'Thanks! Your review has been updated.'
+          : '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>
+    <form onSubmit={handleSubmit} className="space-y-3 rounded-md border p-4">
+      <h3 className="font-medium">{mode === 'edit' ? 'Edit your review' : 'Write a review'}</h3>
 
       <fieldset>
-        <legend className="text-sm mb-1">Your rating</legend>
+        <legend className="mb-1 text-sm">Your rating</legend>
         <div className="inline-flex gap-1" role="radiogroup" aria-label="Star rating">
           {[1, 2, 3, 4, 5].map((n) => (
             <button
@@ -80,30 +258,6 @@ export function ReviewForm({ productId }: ReviewFormProps) {
         </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
@@ -123,10 +277,16 @@ export function ReviewForm({ productId }: ReviewFormProps) {
 
       <button
         type="submit"
-        disabled={submitting || !authorName.trim()}
+        disabled={submitting}
         className="inline-flex items-center rounded bg-black px-4 py-2 text-sm text-white disabled:opacity-50"
       >
-        {submitting ? 'Submitting…' : 'Submit review'}
+        {submitting
+          ? mode === 'edit'
+            ? 'Saving…'
+            : 'Submitting…'
+          : mode === 'edit'
+            ? 'Save changes'
+            : 'Submit review'}
       </button>
     </form>
   );

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

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

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

@@ -1,116 +1,116 @@
-import type { Product } from 'brainerce';
-import { getProductPriceInfo } from 'brainerce';
-import { getNonce } from '@/lib/nonce';
-
-interface ProductJsonLdProps {
-  product: Product;
-  url: string;
-  currency?: string;
-}
-
-export async function ProductJsonLd({ product, url, currency = 'USD' }: ProductJsonLdProps) {
-  const nonce = await getNonce();
-  const priceInfo = getProductPriceInfo(product);
-  const imageUrl = product.images?.[0]?.url;
-  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || '';
-
-  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,
-    description: product.description || product.name,
-    image: imageUrl,
-    url,
-    sku: product.sku || product.id,
-    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',
-    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"
-        nonce={nonce}
-        suppressHydrationWarning
-        dangerouslySetInnerHTML={{ __html: serializeJsonLd(productJsonLd) }}
-      />
-      <script
-        type="application/ld+json"
-        nonce={nonce}
-        suppressHydrationWarning
-        dangerouslySetInnerHTML={{ __html: serializeJsonLd(breadcrumbJsonLd) }}
-      />
-    </>
-  );
-}
-
-// Serialize a JSON-LD object for embedding in a <script> tag. Escapes
-// `<`, `>`, and `&` to \uXXXX so seller-controlled product fields cannot
-// break out of the script element with `</script>` or inject HTML.
-function serializeJsonLd(value: unknown): string {
-  return JSON.stringify(value)
-    .replace(/</g, '\\u003c')
-    .replace(/>/g, '\\u003e')
-    .replace(/&/g, '\\u0026');
-}
+import type { Product } from 'brainerce';
+import { getProductPriceInfo } from 'brainerce';
+import { getNonce } from '@/lib/nonce';
+
+interface ProductJsonLdProps {
+  product: Product;
+  url: string;
+  currency?: string;
+}
+
+export async function ProductJsonLd({ product, url, currency = 'USD' }: ProductJsonLdProps) {
+  const nonce = await getNonce();
+  const priceInfo = getProductPriceInfo(product);
+  const imageUrl = product.images?.[0]?.url;
+  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || '';
+
+  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,
+    description: product.description || product.name,
+    image: imageUrl,
+    url,
+    sku: product.sku || product.id,
+    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',
+    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"
+        nonce={nonce}
+        suppressHydrationWarning
+        dangerouslySetInnerHTML={{ __html: serializeJsonLd(productJsonLd) }}
+      />
+      <script
+        type="application/ld+json"
+        nonce={nonce}
+        suppressHydrationWarning
+        dangerouslySetInnerHTML={{ __html: serializeJsonLd(breadcrumbJsonLd) }}
+      />
+    </>
+  );
+}
+
+// Serialize a JSON-LD object for embedding in a <script> tag. Escapes
+// `<`, `>`, and `&` to \uXXXX so seller-controlled product fields cannot
+// break out of the script element with `</script>` or inject HTML.
+function serializeJsonLd(value: unknown): string {
+  return JSON.stringify(value)
+    .replace(/</g, '\\u003c')
+    .replace(/>/g, '\\u003e')
+    .replace(/&/g, '\\u0026');
+}