create-brainerce-store 1.62.0 → 1.63.0

package/templates/nextjs/base/src/app/order-status/page.tsx

@@ -1,121 +1,121 @@
-'use client';
-
-import { Suspense, useEffect, useState } from 'react';
-import { useSearchParams } from 'next/navigation';
-import { Link } from '@/core/lib/navigation';
-import type { Order } from 'brainerce';
-import { getClient } from '@/core/lib/brainerce';
-import { LoadingSpinner } from '@/ui/shared/loading-spinner';
-import { OrderHistory } from '@/components/account/order-history';
-import { useTranslations } from '@/core/lib/translations';
-
-// Read-only order lookup for links from transactional emails (order confirmation,
-// shipped, refunded, etc). Unlike /order-confirmation, this page never calls
-// handlePaymentSuccess() or touches cart state — it only fetches and displays,
-// so it's safe to revisit at any time without side effects on an unrelated
-// active cart. Works for guests too: the checkout id itself is the credential.
-function OrderStatusContent() {
-  const searchParams = useSearchParams();
-  const checkoutId = searchParams.get('checkout_id');
-
-  const t = useTranslations('orderStatus');
-  const tc = useTranslations('common');
-  const [order, setOrder] = useState<Order | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    if (!checkoutId) {
-      setError(t('missingCheckoutInfo'));
-      setLoading(false);
-      return;
-    }
-
-    let cancelled = false;
-    async function loadOrder() {
-      try {
-        const client = getClient();
-        const result = await client.getOrderByCheckout(checkoutId!);
-        if (!cancelled) setOrder(result);
-      } catch (err) {
-        if (!cancelled) {
-          const message = err instanceof Error ? err.message : t('notFound');
-          setError(message);
-        }
-      } finally {
-        if (!cancelled) setLoading(false);
-      }
-    }
-
-    loadOrder();
-    return () => {
-      cancelled = true;
-    };
-  }, [checkoutId, t]);
-
-  if (loading) {
-    return (
-      <div className="flex min-h-[60vh] flex-col items-center justify-center">
-        <LoadingSpinner size="lg" />
-        <p className="text-muted-foreground mt-4">{t('loading')}</p>
-      </div>
-    );
-  }
-
-  if (error || !order) {
-    return (
-      <div className="mx-auto max-w-2xl px-4 py-16 text-center sm:px-6 lg:px-8">
-        <svg
-          className="text-destructive mx-auto mb-4 h-16 w-16"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth={1.5}
-            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.834-2.694-.834-3.464 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"
-          />
-        </svg>
-        <h1 className="text-foreground text-2xl font-bold">{t('errorTitle')}</h1>
-        <p className="text-muted-foreground mt-2">{error || t('notFound')}</p>
-        <Link
-          href="/"
-          className="bg-primary text-primary-foreground mt-6 inline-flex items-center rounded px-6 py-3 font-medium transition-opacity hover:opacity-90"
-        >
-          {t('returnHome')}
-        </Link>
-      </div>
-    );
-  }
-
-  return (
-    <div className="mx-auto max-w-3xl px-4 py-8 sm:px-6 lg:px-8">
-      <h1 className="text-foreground mb-6 text-2xl font-bold">{t('pageTitle')}</h1>
-      <OrderHistory orders={[order]} />
-      <div className="mt-8 flex items-center justify-center">
-        <Link
-          href="/products"
-          className="bg-primary text-primary-foreground inline-flex items-center rounded px-6 py-3 font-medium transition-opacity hover:opacity-90"
-        >
-          {tc('continueShopping')}
-        </Link>
-      </div>
-    </div>
-  );
-}
-
-export default function OrderStatusPage() {
-  return (
-    <Suspense
-      fallback={
-        <div className="flex min-h-[60vh] items-center justify-center">
-          <LoadingSpinner size="lg" />
-        </div>
-      }
-    >
-      <OrderStatusContent />
-    </Suspense>
-  );
-}
+'use client';
+
+import { Suspense, useEffect, useState } from 'react';
+import { useSearchParams } from 'next/navigation';
+import { Link } from '@/core/lib/navigation';
+import type { Order } from 'brainerce';
+import { getClient } from '@/core/lib/brainerce';
+import { LoadingSpinner } from '@/ui/shared/loading-spinner';
+import { OrderHistory } from '@/components/account/order-history';
+import { useTranslations } from '@/core/lib/translations';
+
+// Read-only order lookup for links from transactional emails (order confirmation,
+// shipped, refunded, etc). Unlike /order-confirmation, this page never calls
+// handlePaymentSuccess() or touches cart state — it only fetches and displays,
+// so it's safe to revisit at any time without side effects on an unrelated
+// active cart. Works for guests too: the checkout id itself is the credential.
+function OrderStatusContent() {
+  const searchParams = useSearchParams();
+  const checkoutId = searchParams.get('checkout_id');
+
+  const t = useTranslations('orderStatus');
+  const tc = useTranslations('common');
+  const [order, setOrder] = useState<Order | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!checkoutId) {
+      setError(t('missingCheckoutInfo'));
+      setLoading(false);
+      return;
+    }
+
+    let cancelled = false;
+    async function loadOrder() {
+      try {
+        const client = getClient();
+        const result = await client.getOrderByCheckout(checkoutId!);
+        if (!cancelled) setOrder(result);
+      } catch (err) {
+        if (!cancelled) {
+          const message = err instanceof Error ? err.message : t('notFound');
+          setError(message);
+        }
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    }
+
+    loadOrder();
+    return () => {
+      cancelled = true;
+    };
+  }, [checkoutId, t]);
+
+  if (loading) {
+    return (
+      <div className="flex min-h-[60vh] flex-col items-center justify-center">
+        <LoadingSpinner size="lg" />
+        <p className="text-muted-foreground mt-4">{t('loading')}</p>
+      </div>
+    );
+  }
+
+  if (error || !order) {
+    return (
+      <div className="mx-auto max-w-2xl px-4 py-16 text-center sm:px-6 lg:px-8">
+        <svg
+          className="text-destructive mx-auto mb-4 h-16 w-16"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={1.5}
+            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.834-2.694-.834-3.464 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"
+          />
+        </svg>
+        <h1 className="text-foreground text-2xl font-bold">{t('errorTitle')}</h1>
+        <p className="text-muted-foreground mt-2">{error || t('notFound')}</p>
+        <Link
+          href="/"
+          className="bg-primary text-primary-foreground mt-6 inline-flex items-center rounded px-6 py-3 font-medium transition-opacity hover:opacity-90"
+        >
+          {t('returnHome')}
+        </Link>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mx-auto max-w-3xl px-4 py-8 sm:px-6 lg:px-8">
+      <h1 className="text-foreground mb-6 text-2xl font-bold">{t('pageTitle')}</h1>
+      <OrderHistory orders={[order]} />
+      <div className="mt-8 flex items-center justify-center">
+        <Link
+          href="/products"
+          className="bg-primary text-primary-foreground inline-flex items-center rounded px-6 py-3 font-medium transition-opacity hover:opacity-90"
+        >
+          {tc('continueShopping')}
+        </Link>
+      </div>
+    </div>
+  );
+}
+
+export default function OrderStatusPage() {
+  return (
+    <Suspense
+      fallback={
+        <div className="flex min-h-[60vh] items-center justify-center">
+          <LoadingSpinner size="lg" />
+        </div>
+      }
+    >
+      <OrderStatusContent />
+    </Suspense>
+  );
+}

package/templates/nextjs/base/src/app/page.tsx

@@ -1,64 +1,64 @@
-import type { Metadata } from 'next';
-import { getServerClient } from '@/core/lib/brainerce';
-import { buildMetaDescription } from '@/core/lib/seo';
-import { OrganizationJsonLd } from '@/components/seo/organization-json-ld';
-import { RichTextBlock } from '@/ui/layout/rich-text-block';
-import { HomeClient } from '@/ui/home/home-client';
-
-// Build homepage metadata server-side so Google, Facebook, WhatsApp etc.
-// see a real <meta name="description"> on first request. Falls back to the
-// store name when the merchant hasn't authored a meta description yet.
-export async function generateMetadata(): Promise<Metadata> {
-  try {
-    const storeInfo = await getServerClient().getStoreInfo();
-    const description = buildMetaDescription(storeInfo.metaDescription) || undefined;
-    return {
-      title: storeInfo.name,
-      description,
-      openGraph: {
-        title: storeInfo.name,
-        description,
-        type: 'website',
-      },
-      twitter: {
-        card: 'summary_large_image',
-        title: storeInfo.name,
-        description,
-      },
-    };
-  } catch {
-    return {};
-  }
-}
-
-export default async function HomePage() {
-  // Fetch store info server-side so the JSON-LD is in the initial HTML —
-  // crawlers and AI Overviews see it without needing to execute JavaScript.
-  // Failure here is non-fatal: the client component re-fetches via the
-  // StoreProvider so the page still renders.
-  //
-  // Also fetch the merchant's homepage intro (RICH_TEXT key='main'). When
-  // present, it renders as a sanitized HTML block above the product grid —
-  // typical use is brand introduction, value-prop copy, or a seasonal
-  // announcement that needs more formatting than the AnnouncementBar.
-  // When absent, RichTextBlock returns null cleanly so the layout collapses
-  // to just the product grid.
-  const client = getServerClient();
-  const [storeInfo, intro] = await Promise.all([
-    client.getStoreInfo().catch(() => null),
-    client.content.richText.get('main').catch(() => null),
-  ]);
-
-  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || '';
-
-  return (
-    <>
-      {storeInfo && baseUrl ? <OrganizationJsonLd storeInfo={storeInfo} baseUrl={baseUrl} /> : null}
-      <RichTextBlock
-        block={intro}
-        className="prose prose-sm dark:prose-invert mx-auto max-w-3xl px-4 py-8 sm:px-6 lg:px-8"
-      />
-      <HomeClient />
-    </>
-  );
-}
+import type { Metadata } from 'next';
+import { getServerClient } from '@/core/lib/brainerce';
+import { buildMetaDescription } from '@/core/lib/seo';
+import { OrganizationJsonLd } from '@/components/seo/organization-json-ld';
+import { RichTextBlock } from '@/ui/layout/rich-text-block';
+import { HomeClient } from '@/ui/home/home-client';
+
+// Build homepage metadata server-side so Google, Facebook, WhatsApp etc.
+// see a real <meta name="description"> on first request. Falls back to the
+// store name when the merchant hasn't authored a meta description yet.
+export async function generateMetadata(): Promise<Metadata> {
+  try {
+    const storeInfo = await getServerClient().getStoreInfo();
+    const description = buildMetaDescription(storeInfo.metaDescription) || undefined;
+    return {
+      title: storeInfo.name,
+      description,
+      openGraph: {
+        title: storeInfo.name,
+        description,
+        type: 'website',
+      },
+      twitter: {
+        card: 'summary_large_image',
+        title: storeInfo.name,
+        description,
+      },
+    };
+  } catch {
+    return {};
+  }
+}
+
+export default async function HomePage() {
+  // Fetch store info server-side so the JSON-LD is in the initial HTML —
+  // crawlers and AI Overviews see it without needing to execute JavaScript.
+  // Failure here is non-fatal: the client component re-fetches via the
+  // StoreProvider so the page still renders.
+  //
+  // Also fetch the merchant's homepage intro (RICH_TEXT key='main'). When
+  // present, it renders as a sanitized HTML block above the product grid —
+  // typical use is brand introduction, value-prop copy, or a seasonal
+  // announcement that needs more formatting than the AnnouncementBar.
+  // When absent, RichTextBlock returns null cleanly so the layout collapses
+  // to just the product grid.
+  const client = getServerClient();
+  const [storeInfo, intro] = await Promise.all([
+    client.getStoreInfo().catch(() => null),
+    client.content.richText.get('main').catch(() => null),
+  ]);
+
+  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || '';
+
+  return (
+    <>
+      {storeInfo && baseUrl ? <OrganizationJsonLd storeInfo={storeInfo} baseUrl={baseUrl} /> : null}
+      <RichTextBlock
+        block={intro}
+        className="prose prose-sm dark:prose-invert mx-auto max-w-3xl px-4 py-8 sm:px-6 lg:px-8"
+      />
+      <HomeClient />
+    </>
+  );
+}