create-brainerce-store 1.62.0 → 1.64.0

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

@@ -1,148 +1,148 @@
-import type { ProductReview } from 'brainerce';
-import { getServerClient } from '@/core/lib/brainerce';
-<% if (i18nEnabled) { %>
-import { getMessages, defaultLocale } from '@/i18n';
-<% } else { %>
-import { messages as staticMessages, defaultLocale } from '@/i18n';
-<% } %>
-import { ReviewForm } from './review-form';
-import { IconStar } from '@/ui/shared/icons';
-
-// 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>;
-
-async function getReviewStrings(locale: string): Promise<ReviewStrings> {
-<% if (i18nEnabled) { %>
-  return ((await getMessages(locale)).reviews ?? {}) as ReviewStrings;
-<% } else { %>
-  return (staticMessages.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 = [];
-    }
-  }
-
-  const avg =
-    reviews.length > 0
-      ? Math.round((reviews.reduce((s, r) => s + r.rating, 0) / reviews.length) * 10) / 10
-      : null;
-
-  return (
-    <section aria-labelledby="reviews-heading" className="border-t bg-secondary/40">
-      <div className="container-narrow grid gap-10 py-14 lg:grid-cols-3 lg:py-16">
-        {/* Summary column */}
-        <div>
-          <h2 id="reviews-heading" className="text-2xl sm:text-3xl">
-            {t.title}
-          </h2>
-          {avg !== null && (
-            <p className="mt-4 flex items-center gap-3">
-              <span className="font-display text-4xl text-foreground">{avg}</span>
-              <span className="inline-flex flex-col gap-1">
-                <Stars rating={Math.round(avg)} />
-                <span className="text-xs text-muted-foreground">
-                  ({reviews.length})
-                </span>
-              </span>
-            </p>
-          )}
-
-          {/* Submit / edit form */}
-          <div className="card mt-6 p-5">
-            <ReviewForm productId={productId} />
-          </div>
-        </div>
-
-        {/* Review list */}
-        <div className="lg:col-span-2">
-          {reviews.length === 0 ? (
-            <div className="card flex h-full min-h-40 flex-col items-center justify-center gap-2 p-8 text-center">
-              <Stars rating={0} />
-              <p className="font-medium text-foreground">{t.beFirst ?? t.noReviews}</p>
-              <p className="text-sm text-muted-foreground">{t.noReviews}</p>
-            </div>
-          ) : (
-            <ul className="space-y-4">
-              {reviews.map((review) => (
-                <ReviewCard key={review.id} review={review} verifiedLabel={t.verifiedPurchase} />
-              ))}
-            </ul>
-          )}
-        </div>
-      </div>
-    </section>
-  );
-}
-
-function ReviewCard({ review, verifiedLabel }: { review: ProductReview; verifiedLabel: string }) {
-  return (
-    <li>
-      <article className="card p-5">
-        <header className="flex flex-wrap items-center gap-x-3 gap-y-1.5">
-          <Stars rating={review.rating} />
-          <span className="text-sm font-semibold text-foreground">{review.authorName}</span>
-          {review.verifiedPurchase && <span className="badge-soft">{verifiedLabel}</span>}
-          <time
-            dateTime={review.createdAt}
-            className="ms-auto text-xs text-muted-foreground"
-          >
-            {new Date(review.createdAt).toLocaleDateString()}
-          </time>
-        </header>
-        {review.body && (
-          <p className="mt-3 whitespace-pre-line break-words text-sm leading-6 text-foreground">
-            {review.body}
-          </p>
-        )}
-      </article>
-    </li>
-  );
-}
-
-function Stars({ rating }: { rating: number }) {
-  return (
-    <span aria-label={`${rating} of 5 stars`} className="inline-flex gap-0.5">
-      {[1, 2, 3, 4, 5].map((n) => (
-        <span
-          key={n}
-          aria-hidden="true"
-          className={n <= rating ? 'text-primary' : 'text-border'}
-        >
-          <IconStar size={16} filled={n <= rating} />
-        </span>
-      ))}
-    </span>
-  );
-}
+import type { ProductReview } from 'brainerce';
+import { getServerClient } from '@/core/lib/brainerce';
+<% if (i18nEnabled) { %>
+import { getMessages, defaultLocale } from '@/i18n';
+<% } else { %>
+import { messages as staticMessages, defaultLocale } from '@/i18n';
+<% } %>
+import { ReviewForm } from './review-form';
+import { IconStar } from '@/ui/shared/icons';
+
+// 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>;
+
+async function getReviewStrings(locale: string): Promise<ReviewStrings> {
+<% if (i18nEnabled) { %>
+  return ((await getMessages(locale)).reviews ?? {}) as ReviewStrings;
+<% } else { %>
+  return (staticMessages.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 = [];
+    }
+  }
+
+  const avg =
+    reviews.length > 0
+      ? Math.round((reviews.reduce((s, r) => s + r.rating, 0) / reviews.length) * 10) / 10
+      : null;
+
+  return (
+    <section aria-labelledby="reviews-heading" className="border-t bg-secondary/40">
+      <div className="container-narrow grid gap-10 py-14 lg:grid-cols-3 lg:py-16">
+        {/* Summary column */}
+        <div>
+          <h2 id="reviews-heading" className="text-2xl sm:text-3xl">
+            {t.title}
+          </h2>
+          {avg !== null && (
+            <p className="mt-4 flex items-center gap-3">
+              <span className="font-display text-4xl text-foreground">{avg}</span>
+              <span className="inline-flex flex-col gap-1">
+                <Stars rating={Math.round(avg)} />
+                <span className="text-xs text-muted-foreground">
+                  ({reviews.length})
+                </span>
+              </span>
+            </p>
+          )}
+
+          {/* Submit / edit form */}
+          <div className="card mt-6 p-5">
+            <ReviewForm productId={productId} />
+          </div>
+        </div>
+
+        {/* Review list */}
+        <div className="lg:col-span-2">
+          {reviews.length === 0 ? (
+            <div className="card flex h-full min-h-40 flex-col items-center justify-center gap-2 p-8 text-center">
+              <Stars rating={0} />
+              <p className="font-medium text-foreground">{t.beFirst ?? t.noReviews}</p>
+              <p className="text-sm text-muted-foreground">{t.noReviews}</p>
+            </div>
+          ) : (
+            <ul className="space-y-4">
+              {reviews.map((review) => (
+                <ReviewCard key={review.id} review={review} verifiedLabel={t.verifiedPurchase} />
+              ))}
+            </ul>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function ReviewCard({ review, verifiedLabel }: { review: ProductReview; verifiedLabel: string }) {
+  return (
+    <li>
+      <article className="card p-5">
+        <header className="flex flex-wrap items-center gap-x-3 gap-y-1.5">
+          <Stars rating={review.rating} />
+          <span className="text-sm font-semibold text-foreground">{review.authorName}</span>
+          {review.verifiedPurchase && <span className="badge-soft">{verifiedLabel}</span>}
+          <time
+            dateTime={review.createdAt}
+            className="ms-auto text-xs text-muted-foreground"
+          >
+            {new Date(review.createdAt).toLocaleDateString()}
+          </time>
+        </header>
+        {review.body && (
+          <p className="mt-3 whitespace-pre-line break-words text-sm leading-6 text-foreground">
+            {review.body}
+          </p>
+        )}
+      </article>
+    </li>
+  );
+}
+
+function Stars({ rating }: { rating: number }) {
+  return (
+    <span aria-label={`${rating} of 5 stars`} className="inline-flex gap-0.5">
+      {[1, 2, 3, 4, 5].map((n) => (
+        <span
+          key={n}
+          aria-hidden="true"
+          className={n <= rating ? 'text-primary' : 'text-border'}
+        >
+          <IconStar size={16} filled={n <= rating} />
+        </span>
+      ))}
+    </span>
+  );
+}

package/templates/nextjs/designs/atelier/ui/product/stock-badge.tsx

@@ -1,66 +1,66 @@
-'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;
-}
-
-type StockState = 'in' | 'low' | 'out';
-
-/**
- * Stock status pill (in stock / low stock / out of stock) with a colored
- * status dot; derives the label from the product/variant `inventory` prop.
- */
-export function StockBadge({ inventory, lowStockThreshold = 5, className }: StockBadgeProps) {
-  const t = useTranslations('productDetail');
-  const { label, state } = getStock(inventory, lowStockThreshold, t);
-
-  return (
-    <span
-      data-state={state}
-      className={cn(
-        'inline-flex items-center gap-1.5 text-xs font-medium',
-        state === 'in' && 'text-primary',
-        state === 'low' && 'text-foreground',
-        state === 'out' && 'text-destructive',
-        className
-      )}
-    >
-      <span
-        aria-hidden="true"
-        className={cn(
-          'inline-block h-1.5 w-1.5 rounded-full',
-          state === 'in' && 'bg-primary',
-          state === 'low' && 'bg-foreground/60',
-          state === 'out' && 'bg-destructive'
-        )}
-      />
-      {label}
-    </span>
-  );
-}
-
-function getStock(
-  inventory: InventoryInfo | null | undefined,
-  lowStockThreshold: number,
-  t: (key: string) => string
-): { label: string; state: StockState } {
-  if (!inventory) return { label: t('outOfStock'), state: 'out' };
-
-  const { trackingMode, inStock, available } = inventory;
-
-  if (trackingMode === 'DISABLED') return { label: t('unavailable'), state: 'out' };
-  if (!inStock) return { label: t('outOfStock'), state: 'out' };
-  if (trackingMode === 'UNLIMITED') return { label: t('inStock'), state: 'in' };
-
-  // TRACKED — show actual quantity
-  if (available <= lowStockThreshold) {
-    return { label: t('onlyLeft').replace('{available}', String(available)), state: 'low' };
-  }
-  return { label: t('availableInStock').replace('{available}', String(available)), state: 'in' };
-}
+'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;
+}
+
+type StockState = 'in' | 'low' | 'out';
+
+/**
+ * Stock status pill (in stock / low stock / out of stock) with a colored
+ * status dot; derives the label from the product/variant `inventory` prop.
+ */
+export function StockBadge({ inventory, lowStockThreshold = 5, className }: StockBadgeProps) {
+  const t = useTranslations('productDetail');
+  const { label, state } = getStock(inventory, lowStockThreshold, t);
+
+  return (
+    <span
+      data-state={state}
+      className={cn(
+        'inline-flex items-center gap-1.5 text-xs font-medium',
+        state === 'in' && 'text-primary',
+        state === 'low' && 'text-foreground',
+        state === 'out' && 'text-destructive',
+        className
+      )}
+    >
+      <span
+        aria-hidden="true"
+        className={cn(
+          'inline-block h-1.5 w-1.5 rounded-full',
+          state === 'in' && 'bg-primary',
+          state === 'low' && 'bg-foreground/60',
+          state === 'out' && 'bg-destructive'
+        )}
+      />
+      {label}
+    </span>
+  );
+}
+
+function getStock(
+  inventory: InventoryInfo | null | undefined,
+  lowStockThreshold: number,
+  t: (key: string) => string
+): { label: string; state: StockState } {
+  if (!inventory) return { label: t('outOfStock'), state: 'out' };
+
+  const { trackingMode, inStock, available } = inventory;
+
+  if (trackingMode === 'DISABLED') return { label: t('unavailable'), state: 'out' };
+  if (!inStock) return { label: t('outOfStock'), state: 'out' };
+  if (trackingMode === 'UNLIMITED') return { label: t('inStock'), state: 'in' };
+
+  // TRACKED — show actual quantity
+  if (available <= lowStockThreshold) {
+    return { label: t('onlyLeft').replace('{available}', String(available)), state: 'low' };
+  }
+  return { label: t('availableInStock').replace('{available}', String(available)), state: 'in' };
+}