create-brainerce-store 1.65.0 → 1.67.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.server';
+<% 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 (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/ui-canvas/layout/faq-section.tsx.ejs

@@ -1,71 +1,72 @@
-/**
- * FAQ accordion (bare skeleton) — fully driven by the merchant's dashboard
- * configuration.
- *
- * The merchant configures FAQs in the Brainerce dashboard under
- *   Sell → Content → FAQ
- *
- * Each FAQ row has a `key` (e.g. 'main', 'shipping', 'returns'). Pass the
- * pre-fetched payload as `faq`; this component knows nothing about which
- * key it came from.
- *
- * Two render branches:
- *   1. `faq` has items → accordion of question/answer pairs
- *   2. `faq` is null OR has no items → friendly empty state with a contact
- *      CTA, so the /faq page never looks broken before the merchant seeds.
- *
- * Security: FAQ answers may contain merchant-authored HTML — we sanitize
- * via `sanitizeHtml` before injecting via dangerouslySetInnerHTML.
- */
-'use client';
-
-import * as React from 'react';
-import type { Content } from 'brainerce';
-import { useTranslations } from '@/core/lib/translations';
-import { sanitizeHtml } from '@/core/lib/sanitize';
-
-interface FaqSectionProps {
-  /** Pre-fetched FAQ row. `null` renders the empty-state fallback. */
-  faq: Content<'FAQ'> | null;
-}
-
-export function FaqSection({ faq }: FaqSectionProps) {
-  const t = useTranslations('content');
-
-  const items = faq?.data?.items ?? [];
-  const heading = faq?.name || t('faqTitle');
-
-  // Empty state — runs when the merchant hasn't created a FAQ row yet,
-  // or the row exists but contains no items.
-  if (!faq || items.length === 0) {
-    return (
-      <section>
-        {/* DESIGN ME — FAQ empty state: heading + contact CTA; fed by Content<'FAQ'> pre-fetched in the /faq route. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
-        <h1>{heading}</h1>
-        <p>
-          <strong>{t('faqEmptyTitle')}</strong>
-          <br />
-          {t('faqEmptyBody')}
-        </p>
-        <a href="/contact">{t('faqContactCta')}</a>
-      </section>
-    );
-  }
-
-  return (
-    <section>
-      {/* DESIGN ME — FAQ accordion: question/answer pairs from Content<'FAQ'> pre-fetched in the /faq route; answers are sanitized merchant HTML. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
-      <h1>{heading}</h1>
-      <ul>
-        {items.map((item, idx) => (
-          <li key={idx}>
-            <details open={idx === 0}>
-              <summary>{item.question}</summary>
-              <div dangerouslySetInnerHTML={{ __html: sanitizeHtml(item.answer) }} />
-            </details>
-          </li>
-        ))}
-      </ul>
-    </section>
-  );
-}
+/**
+ * FAQ accordion (bare skeleton) — fully driven by the merchant's dashboard
+ * configuration.
+ *
+ * The merchant configures FAQs in the Brainerce dashboard under
+ *   Sell → Content → FAQ
+ *
+ * Each FAQ row has a `key` (e.g. 'main', 'shipping', 'returns'). Pass the
+ * pre-fetched payload as `faq`; this component knows nothing about which
+ * key it came from.
+ *
+ * Two render branches:
+ *   1. `faq` has items → accordion of question/answer pairs
+ *   2. `faq` is null OR has no items → friendly empty state with a contact
+ *      CTA, so the /faq page never looks broken before the merchant seeds.
+ *
+ * Security: FAQ answers may contain merchant-authored HTML — we sanitize
+ * via `sanitizeHtml` before injecting via dangerouslySetInnerHTML.
+ */
+'use client';
+
+import * as React from 'react';
+import { Link } from '@/core/lib/navigation';
+import type { Content } from 'brainerce';
+import { useTranslations } from '@/core/lib/translations';
+import { sanitizeHtml } from '@/core/lib/sanitize';
+
+interface FaqSectionProps {
+  /** Pre-fetched FAQ row. `null` renders the empty-state fallback. */
+  faq: Content<'FAQ'> | null;
+}
+
+export function FaqSection({ faq }: FaqSectionProps) {
+  const t = useTranslations('content');
+
+  const items = faq?.data?.items ?? [];
+  const heading = faq?.name || t('faqTitle');
+
+  // Empty state — runs when the merchant hasn't created a FAQ row yet,
+  // or the row exists but contains no items.
+  if (!faq || items.length === 0) {
+    return (
+      <section>
+        {/* DESIGN ME — FAQ empty state: heading + contact CTA; fed by Content<'FAQ'> pre-fetched in the /faq route. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
+        <h1>{heading}</h1>
+        <p>
+          <strong>{t('faqEmptyTitle')}</strong>
+          <br />
+          {t('faqEmptyBody')}
+        </p>
+        <Link href="/contact">{t('faqContactCta')}</Link>
+      </section>
+    );
+  }
+
+  return (
+    <section>
+      {/* DESIGN ME — FAQ accordion: question/answer pairs from Content<'FAQ'> pre-fetched in the /faq route; answers are sanitized merchant HTML. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
+      <h1>{heading}</h1>
+      <ul>
+        {items.map((item, idx) => (
+          <li key={idx}>
+            <details open={idx === 0}>
+              <summary>{item.question}</summary>
+              <div dangerouslySetInnerHTML={{ __html: sanitizeHtml(item.answer) }} />
+            </details>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}

package/templates/nextjs/ui-canvas/layout/site-footer.tsx.ejs

@@ -1,82 +1,83 @@
-/**
- * Storefront footer (bare skeleton) — fully driven by the merchant's
- * dashboard configuration.
- *
- * The merchant configures the footer in the Brainerce dashboard under
- *   Sell → Content → Footer
- *
- * Renders a brand block (store-name + social links), the merchant's link
- * columns, and a copyright bar.
- *
- * API contract:
- *   GET → client.content.footer.get('main', locale) → Content<'FOOTER'> | null
- *   Returns null on 404 — we render a minimal fallback so the layout never
- *   crashes when the merchant hasn't seeded the footer yet.
- */
-import * as React from 'react';
-import type { Content } from 'brainerce';
-
-interface SiteFooterProps {
-  /** Pre-fetched footer payload (server-side). `null` triggers fallback rendering. */
-  footer: Content<'FOOTER'> | null;
-  /** Store name shown in the brand block + fallback copyright. */
-  storeName?: string;
-}
-
-export function SiteFooter({ footer, storeName }: SiteFooterProps) {
-  const data = footer?.data;
-  const columns = data?.columns ?? [];
-  const social = data?.social ?? [];
-  const year = new Date().getFullYear();
-  const brandLabel = storeName ?? 'Store';
-
-  if (!data || (columns.length === 0 && !data.copyright && social.length === 0)) {
-    return (
-      <footer>
-        {/* DESIGN ME — footer (fallback branch): copyright only; Content<'FOOTER'> pre-fetched in the layout. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
-        <p>
-          © {year} {brandLabel}. All rights reserved.
-        </p>
-      </footer>
-    );
-  }
-
-  return (
-    <footer>
-      {/* DESIGN ME — footer: brand block, merchant link columns and social links (Content<'FOOTER'> pre-fetched in the layout), copyright bar. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
-      <div>
-        <a href="/">{brandLabel}</a>
-        {social.length > 0 ? (
-          <ul className="flex flex-wrap items-center gap-2">
-            {social.map((entry, idx) => (
-              <li key={`${entry.platform}-${idx}`}>
-                <a href={entry.url} target="_blank" rel="noopener noreferrer" aria-label={entry.platform}>
-                  {entry.platform}
-                </a>
-              </li>
-            ))}
-          </ul>
-        ) : null}
-      </div>
-
-      {columns.length > 0 ? (
-        <div className="flex flex-wrap gap-8">
-          {columns.map((col, idx) => (
-            <nav key={`${col.title}-${idx}`} aria-label={col.title}>
-              <h3>{col.title}</h3>
-              <ul>
-                {col.links.map((link, linkIdx) => (
-                  <li key={`${link.url}-${linkIdx}`}>
-                    <a href={link.url}>{link.label}</a>
-                  </li>
-                ))}
-              </ul>
-            </nav>
-          ))}
-        </div>
-      ) : null}
-
-      <p>{data.copyright ?? `© ${year} ${brandLabel}. All rights reserved.`}</p>
-    </footer>
-  );
-}
+/**
+ * Storefront footer (bare skeleton) — fully driven by the merchant's
+ * dashboard configuration.
+ *
+ * The merchant configures the footer in the Brainerce dashboard under
+ *   Sell → Content → Footer
+ *
+ * Renders a brand block (store-name + social links), the merchant's link
+ * columns, and a copyright bar.
+ *
+ * API contract:
+ *   GET → client.content.footer.get('main', locale) → Content<'FOOTER'> | null
+ *   Returns null on 404 — we render a minimal fallback so the layout never
+ *   crashes when the merchant hasn't seeded the footer yet.
+ */
+import * as React from 'react';
+import { Link } from '@/core/lib/navigation';
+import type { Content } from 'brainerce';
+
+interface SiteFooterProps {
+  /** Pre-fetched footer payload (server-side). `null` triggers fallback rendering. */
+  footer: Content<'FOOTER'> | null;
+  /** Store name shown in the brand block + fallback copyright. */
+  storeName?: string;
+}
+
+export function SiteFooter({ footer, storeName }: SiteFooterProps) {
+  const data = footer?.data;
+  const columns = data?.columns ?? [];
+  const social = data?.social ?? [];
+  const year = new Date().getFullYear();
+  const brandLabel = storeName ?? 'Store';
+
+  if (!data || (columns.length === 0 && !data.copyright && social.length === 0)) {
+    return (
+      <footer>
+        {/* DESIGN ME — footer (fallback branch): copyright only; Content<'FOOTER'> pre-fetched in the layout. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
+        <p>
+          © {year} {brandLabel}. All rights reserved.
+        </p>
+      </footer>
+    );
+  }
+
+  return (
+    <footer>
+      {/* DESIGN ME — footer: brand block, merchant link columns and social links (Content<'FOOTER'> pre-fetched in the layout), copyright bar. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
+      <div>
+        <Link href="/">{brandLabel}</Link>
+        {social.length > 0 ? (
+          <ul className="flex flex-wrap items-center gap-2">
+            {social.map((entry, idx) => (
+              <li key={`${entry.platform}-${idx}`}>
+                <a href={entry.url} target="_blank" rel="noopener noreferrer" aria-label={entry.platform}>
+                  {entry.platform}
+                </a>
+              </li>
+            ))}
+          </ul>
+        ) : null}
+      </div>
+
+      {columns.length > 0 ? (
+        <div className="flex flex-wrap gap-8">
+          {columns.map((col, idx) => (
+            <nav key={`${col.title}-${idx}`} aria-label={col.title}>
+              <h3>{col.title}</h3>
+              <ul>
+                {col.links.map((link, linkIdx) => (
+                  <li key={`${link.url}-${linkIdx}`}>
+                    <a href={link.url}>{link.label}</a>
+                  </li>
+                ))}
+              </ul>
+            </nav>
+          ))}
+        </div>
+      ) : null}
+
+      <p>{data.copyright ?? `© ${year} ${brandLabel}. All rights reserved.`}</p>
+    </footer>
+  );
+}