create-brainerce-store 1.61.0 → 1.63.0

package/templates/nextjs/ui-canvas/product/reviews-section.tsx.ejs

@@ -1,96 +1,96 @@
-import type { ProductReview } from 'brainerce';
-import { getServerClient } from '@/core/lib/brainerce';
-<% if (i18nEnabled) { %>import { getMessages, defaultLocale } from '@/i18n';<% } else { %>import { defaultLocale, messages } from '@/i18n';<% } %>
-import { ReviewForm } from './review-form';
-
-// Server component — it renders before any client i18n context exists, so the
-// wrapper strings (title / empty state / verified badge) are read straight
-// from the `reviews` namespace in messages/, keyed by the store locale.
-type ReviewStrings = Record<string, string>;
-
-<% if (i18nEnabled) { %>async function getReviewStrings(locale: string): Promise<ReviewStrings> {
-  return ((await getMessages(locale)).reviews ?? {}) as ReviewStrings;
-}<% } else { %>async function getReviewStrings(_locale: string): Promise<ReviewStrings> {
-  return messages.reviews as ReviewStrings;
-}<% } %>
-
-interface ReviewsSectionProps {
-  productId: string;
-  initialReviews?: ProductReview[];
-  locale?: string;
-  /** 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,
-  locale = defaultLocale,
-}: ReviewsSectionProps) {
-  const t = await getReviewStrings(locale);
-  let reviews: ProductReview[] = initialReviews ?? [];
-
-  if (!initialReviews) {
-    try {
-      const result = await getServerClient().listProductReviews(productId, { page: 1, limit: 20 });
-      reviews = result.data;
-    } catch {
-      // Review listing disabled at store level or network error — render the form anyway.
-      reviews = [];
-    }
-  }
-
-  return (
-    <section aria-labelledby="reviews-heading">
-      {/* DESIGN ME — product reviews: server-fetched review list (SDK listProductReviews) + eligibility-aware submit form. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
-      <h2 id="reviews-heading">{t.title}</h2>
-
-      {reviews.length === 0 ? (
-        <p>{t.noReviews}</p>
-      ) : (
-        <ul>
-          {reviews.map((review) => (
-            <ReviewCard key={review.id} review={review} verifiedLabel={t.verifiedPurchase} />
-          ))}
-        </ul>
-      )}
-
-      <ReviewForm productId={productId} />
-    </section>
-  );
-}
-
-function ReviewCard({ review, verifiedLabel }: { review: ProductReview; verifiedLabel: string }) {
-  return (
-    <li>
-      <article>
-        <header className="flex flex-wrap items-center gap-2">
-          <Stars rating={review.rating} />
-          <span>{review.authorName}</span>
-          {review.verifiedPurchase && <span>{verifiedLabel}</span>}
-          <time dateTime={review.createdAt}>{new Date(review.createdAt).toLocaleDateString()}</time>
-        </header>
-        {review.body && <p className="whitespace-pre-line break-words">{review.body}</p>}
-      </article>
-    </li>
-  );
-}
-
-function Stars({ rating }: { rating: number }) {
-  return (
-    <span aria-label={`${rating} of 5 stars`}>
-      {[1, 2, 3, 4, 5].map((n) => (
-        <span key={n} aria-hidden="true">
-          {n <= rating ? '★' : '☆'}
-        </span>
-      ))}
-    </span>
-  );
-}
+import type { ProductReview } from 'brainerce';
+import { getServerClient } from '@/core/lib/brainerce';
+<% if (i18nEnabled) { %>import { getMessages, defaultLocale } from '@/i18n';<% } else { %>import { defaultLocale, messages } from '@/i18n';<% } %>
+import { ReviewForm } from './review-form';
+
+// Server component — it renders before any client i18n context exists, so the
+// wrapper strings (title / empty state / verified badge) are read straight
+// from the `reviews` namespace in messages/, keyed by the store locale.
+type ReviewStrings = Record<string, string>;
+
+<% if (i18nEnabled) { %>async function getReviewStrings(locale: string): Promise<ReviewStrings> {
+  return ((await getMessages(locale)).reviews ?? {}) as ReviewStrings;
+}<% } else { %>async function getReviewStrings(_locale: string): Promise<ReviewStrings> {
+  return messages.reviews as ReviewStrings;
+}<% } %>
+
+interface ReviewsSectionProps {
+  productId: string;
+  initialReviews?: ProductReview[];
+  locale?: string;
+  /** 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,
+  locale = defaultLocale,
+}: ReviewsSectionProps) {
+  const t = await getReviewStrings(locale);
+  let reviews: ProductReview[] = initialReviews ?? [];
+
+  if (!initialReviews) {
+    try {
+      const result = await getServerClient().listProductReviews(productId, { page: 1, limit: 20 });
+      reviews = result.data;
+    } catch {
+      // Review listing disabled at store level or network error — render the form anyway.
+      reviews = [];
+    }
+  }
+
+  return (
+    <section aria-labelledby="reviews-heading">
+      {/* DESIGN ME — product reviews: server-fetched review list (SDK listProductReviews) + eligibility-aware submit form. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
+      <h2 id="reviews-heading">{t.title}</h2>
+
+      {reviews.length === 0 ? (
+        <p>{t.noReviews}</p>
+      ) : (
+        <ul>
+          {reviews.map((review) => (
+            <ReviewCard key={review.id} review={review} verifiedLabel={t.verifiedPurchase} />
+          ))}
+        </ul>
+      )}
+
+      <ReviewForm productId={productId} />
+    </section>
+  );
+}
+
+function ReviewCard({ review, verifiedLabel }: { review: ProductReview; verifiedLabel: string }) {
+  return (
+    <li>
+      <article>
+        <header className="flex flex-wrap items-center gap-2">
+          <Stars rating={review.rating} />
+          <span>{review.authorName}</span>
+          {review.verifiedPurchase && <span>{verifiedLabel}</span>}
+          <time dateTime={review.createdAt}>{new Date(review.createdAt).toLocaleDateString()}</time>
+        </header>
+        {review.body && <p className="whitespace-pre-line break-words">{review.body}</p>}
+      </article>
+    </li>
+  );
+}
+
+function Stars({ rating }: { rating: number }) {
+  return (
+    <span aria-label={`${rating} of 5 stars`}>
+      {[1, 2, 3, 4, 5].map((n) => (
+        <span key={n} aria-hidden="true">
+          {n <= rating ? '★' : '☆'}
+        </span>
+      ))}
+    </span>
+  );
+}

package/templates/nextjs/ui-canvas/product/stock-badge.tsx

@@ -1,45 +1,45 @@
-'use client';
-
-import type { InventoryInfo } from 'brainerce';
-import { cn } from '@/core/lib/utils';
-import { useTranslations } from '@/core/lib/translations';
-
-interface StockBadgeProps {
-  inventory: InventoryInfo | null | undefined;
-  lowStockThreshold?: number;
-  className?: string;
-}
-
-/**
- * DESIGN ME — stock status badge (in stock / low stock / out of stock);
- * derives the label from the product/variant `inventory` prop. Keep the
- * label logic; add your own tones per state.
- *
- * Building blocks: shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons are installed and ready to compose with.
- */
-export function StockBadge({ inventory, lowStockThreshold = 5, className }: StockBadgeProps) {
-  const t = useTranslations('productDetail');
-  const label = getStockLabel(inventory, lowStockThreshold, t);
-
-  return <span className={cn(className)}>{label}</span>;
-}
-
-function getStockLabel(
-  inventory: InventoryInfo | null | undefined,
-  lowStockThreshold: number,
-  t: (key: string) => string
-): string {
-  if (!inventory) return t('outOfStock');
-
-  const { trackingMode, inStock, available } = inventory;
-
-  if (trackingMode === 'DISABLED') return t('unavailable');
-  if (!inStock) return t('outOfStock');
-  if (trackingMode === 'UNLIMITED') return t('inStock');
-
-  // TRACKED — show actual quantity
-  if (available <= lowStockThreshold) {
-    return t('onlyLeft').replace('{available}', String(available));
-  }
-  return t('availableInStock').replace('{available}', String(available));
-}
+'use client';
+
+import type { InventoryInfo } from 'brainerce';
+import { cn } from '@/core/lib/utils';
+import { useTranslations } from '@/core/lib/translations';
+
+interface StockBadgeProps {
+  inventory: InventoryInfo | null | undefined;
+  lowStockThreshold?: number;
+  className?: string;
+}
+
+/**
+ * DESIGN ME — stock status badge (in stock / low stock / out of stock);
+ * derives the label from the product/variant `inventory` prop. Keep the
+ * label logic; add your own tones per state.
+ *
+ * Building blocks: shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons are installed and ready to compose with.
+ */
+export function StockBadge({ inventory, lowStockThreshold = 5, className }: StockBadgeProps) {
+  const t = useTranslations('productDetail');
+  const label = getStockLabel(inventory, lowStockThreshold, t);
+
+  return <span className={cn(className)}>{label}</span>;
+}
+
+function getStockLabel(
+  inventory: InventoryInfo | null | undefined,
+  lowStockThreshold: number,
+  t: (key: string) => string
+): string {
+  if (!inventory) return t('outOfStock');
+
+  const { trackingMode, inStock, available } = inventory;
+
+  if (trackingMode === 'DISABLED') return t('unavailable');
+  if (!inStock) return t('outOfStock');
+  if (trackingMode === 'UNLIMITED') return t('inStock');
+
+  // TRACKED — show actual quantity
+  if (available <= lowStockThreshold) {
+    return t('onlyLeft').replace('{available}', String(available));
+  }
+  return t('availableInStock').replace('{available}', String(available));
+}