create-brainerce-store 1.35.0 → 1.37.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.37.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.37.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/page.tsx

@@ -1,10 +1,9 @@
 'use client';
 
-import { Suspense, useEffect, useState, useCallback, useRef } from 'react';
+import { Suspense, useEffect, useMemo, useState, useCallback, useRef } from 'react';
 import { useSearchParams } from 'next/navigation';
 import { useRouter } from '@/lib/navigation';
-import type { Product } from 'brainerce';
-import type { ProductQueryParams } from 'brainerce';
+import type { Product, ProductQueryParams, PublicMetafieldDefinition } from 'brainerce';
 import { getClient } from '@/lib/brainerce';
 import { ProductGrid } from '@/components/products/product-grid';
 import { LoadingSpinner } from '@/components/shared/loading-spinner';
@@ -13,6 +12,18 @@ import { cn } from '@/lib/utils';
 
 const PAGE_SIZE = 20;
 
+/**
+ * Metafield (custom-field) values are passed in the URL as `mf_<key>=v1,v2`
+ * for readability (no JSON encoding). The SDK assembles them back into
+ * `{ [key]: string[] }` before calling `client.getProducts`.
+ *
+ * Only definitions with `filterable: true` of type SELECT / MULTI_SELECT /
+ * BOOLEAN are honored server-side — the storefront renders facets only for
+ * those.
+ */
+const METAFIELD_URL_PREFIX = 'mf_';
+const FILTERABLE_TYPES = new Set(['SELECT', 'MULTI_SELECT', 'BOOLEAN']);
+
 type SortOption = {
   labelKey: 'sortNewest' | 'sortNameAZ' | 'sortNameZA' | 'sortPriceLow' | 'sortPriceHigh';
   sortBy: ProductQueryParams['sortBy'];
@@ -239,26 +250,52 @@ function ProductsContent() {
   const [categories, setCategories] = useState<CategoryNode[]>([]);
   const [brands, setBrands] = useState<Array<{ id: string; name: string }>>([]);
   const [tags, setTags] = useState<Array<{ id: string; name: string }>>([]);
+  const [metafieldDefs, setMetafieldDefs] = useState<PublicMetafieldDefinition[]>([]);
 
   const sortIndex = parseInt(sortParam, 10) || 0;
   const currentSort = sortOptions[sortIndex] || sortOptions[0];
 
-  // Load categories, brands, and tags
+  // Load categories, brands, tags, and metafield definitions (for custom-field facets).
+  // The metafield-definitions endpoint already returns only definitions
+  // published to this sales channel; we filter client-side to the ones flagged
+  // `filterable: true` and of a UI-renderable type.
   useEffect(() => {
     async function loadFilters() {
       const client = getClient();
-      const [catRes, brandRes, tagRes] = await Promise.allSettled([
+      const [catRes, brandRes, tagRes, mfRes] = await Promise.allSettled([
         client.getCategories(),
         client.getBrands(),
         client.getTags(),
+        client.getPublicMetafieldDefinitions(),
       ]);
       if (catRes.status === 'fulfilled') setCategories(catRes.value.categories as CategoryNode[]);
       if (brandRes.status === 'fulfilled') setBrands(brandRes.value.brands);
       if (tagRes.status === 'fulfilled') setTags(tagRes.value.tags);
+      if (mfRes.status === 'fulfilled') {
+        setMetafieldDefs(
+          mfRes.value.definitions.filter(
+            (d) => d.filterable === true && FILTERABLE_TYPES.has(d.type)
+          )
+        );
+      }
     }
     loadFilters();
   }, []);
 
+  // Stable serialized signature of the selected metafield facets — used as
+  // the `loadProducts` dependency (and to derive the SDK shape). When no
+  // facets are selected, this is `''` so the SDK call omits `metafields`
+  // entirely and the backend short-circuits the filter branch.
+  const metafieldsKey = useMemo(() => {
+    if (metafieldDefs.length === 0) return '';
+    const parts: string[] = [];
+    for (const def of metafieldDefs) {
+      const raw = searchParams.get(`${METAFIELD_URL_PREFIX}${def.key}`);
+      if (raw) parts.push(`${def.key}=${raw}`);
+    }
+    return parts.sort().join('&');
+  }, [metafieldDefs, searchParams]);
+
   // Load products when filters change
   const loadProducts = useCallback(
     async (pageNum: number, append: boolean) => {
@@ -281,6 +318,24 @@ function ProductsContent() {
         if (categoryId) params.categories = categoryId;
         if (brandId) params.brands = brandId;
         if (tagId) params.tags = tagId;
+        // Build the `metafields` shape from `metafieldsKey` (each segment is
+        // `key=v1,v2`). Equivalent to reading the URL params directly but
+        // tied to the stable signature already in this callback's deps.
+        if (metafieldsKey) {
+          const mf: Record<string, string[]> = {};
+          for (const segment of metafieldsKey.split('&')) {
+            const eq = segment.indexOf('=');
+            if (eq < 0) continue;
+            const k = segment.slice(0, eq);
+            const v = segment
+              .slice(eq + 1)
+              .split(',')
+              .map((s) => s.trim())
+              .filter(Boolean);
+            if (v.length > 0) mf[k] = v;
+          }
+          if (Object.keys(mf).length > 0) params.metafields = mf;
+        }
 
         const result = await client.getProducts(params);
 
@@ -299,7 +354,15 @@ function ProductsContent() {
         setLoadingMore(false);
       }
     },
-    [searchQuery, categoryId, brandId, tagId, currentSort.sortBy, currentSort.sortOrder]
+    [
+      searchQuery,
+      categoryId,
+      brandId,
+      tagId,
+      currentSort.sortBy,
+      currentSort.sortOrder,
+      metafieldsKey,
+    ]
   );
 
   useEffect(() => {
@@ -326,6 +389,24 @@ function ProductsContent() {
     updateParam('category', id);
   }
 
+  /** Read the currently-selected values for a given metafield definition. */
+  function getSelectedMetafieldValues(key: string): string[] {
+    const raw = searchParams.get(`${METAFIELD_URL_PREFIX}${key}`);
+    if (!raw) return [];
+    return raw
+      .split(',')
+      .map((v) => v.trim())
+      .filter(Boolean);
+  }
+
+  /**
+   * Toggle one value on/off in a metafield facet's URL param. Multi-select
+   * adds/removes from the list; single-select / boolean replace the value.
+   */
+  function setMetafieldValue(key: string, values: string[]) {
+    updateParam(`${METAFIELD_URL_PREFIX}${key}`, values.join(','));
+  }
+
   return (
     <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
       {/* Page Header */}
@@ -402,6 +483,88 @@ function ProductsContent() {
             </select>
           )}
 
+          {/* Custom-field (metafield) facets — rendered per definition type.
+              Only definitions flagged `filterable: true` and published to
+              this sales channel reach this list (see `metafieldDefs` filter
+              above). The merchant's display name (`def.name`) is shown as-is
+              — `enumValues` come from the merchant's dashboard config. */}
+          {metafieldDefs.map((def) => {
+            const selected = getSelectedMetafieldValues(def.key);
+
+            if (def.type === 'BOOLEAN') {
+              const isOn = selected.includes('true');
+              return (
+                <label
+                  key={def.id}
+                  className="border-border text-foreground hover:border-primary inline-flex h-9 cursor-pointer items-center gap-2 rounded border px-3 text-sm transition-colors"
+                >
+                  <input
+                    type="checkbox"
+                    checked={isOn}
+                    onChange={(e) => setMetafieldValue(def.key, e.target.checked ? ['true'] : [])}
+                    className="accent-primary h-4 w-4"
+                  />
+                  {def.name}
+                </label>
+              );
+            }
+
+            if (def.type === 'SELECT') {
+              return (
+                <select
+                  key={def.id}
+                  value={selected[0] || ''}
+                  onChange={(e) =>
+                    setMetafieldValue(def.key, e.target.value ? [e.target.value] : [])
+                  }
+                  aria-label={def.name}
+                  className="border-border bg-background text-foreground focus:ring-primary/20 focus:border-primary h-9 rounded border px-3 text-sm focus:outline-none focus:ring-2"
+                >
+                  <option value="">{`${tc('all')} ${def.name}`}</option>
+                  {(def.enumValues || []).map((v) => (
+                    <option key={v} value={v}>
+                      {v}
+                    </option>
+                  ))}
+                </select>
+              );
+            }
+
+            // MULTI_SELECT — chip toggles. Each click adds/removes one value.
+            return (
+              <div
+                key={def.id}
+                className="border-border inline-flex items-center gap-1 rounded border px-2 py-1"
+                aria-label={def.name}
+              >
+                <span className="text-muted-foreground px-1 text-xs">{def.name}:</span>
+                {(def.enumValues || []).map((v) => {
+                  const active = selected.includes(v);
+                  return (
+                    <button
+                      key={v}
+                      type="button"
+                      onClick={() =>
+                        setMetafieldValue(
+                          def.key,
+                          active ? selected.filter((s) => s !== v) : [...selected, v]
+                        )
+                      }
+                      className={cn(
+                        'rounded-full border px-2 py-0.5 text-xs transition-colors',
+                        active
+                          ? 'bg-primary text-primary-foreground border-primary'
+                          : 'border-border text-muted-foreground hover:border-primary hover:text-foreground'
+                      )}
+                    >
+                      {v}
+                    </button>
+                  );
+                })}
+              </div>
+            );
+          })}
+
           {/* Sort */}
           <div className="flex items-center gap-2 sm:ms-auto">
             <label htmlFor="sort" className="text-muted-foreground whitespace-nowrap text-sm">

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');
+}