create-brainerce-store 1.67.0 → 1.71.0

package/templates/nextjs/base/src/app/error.tsx.ejs

@@ -0,0 +1,53 @@
+'use client';
+
+import { useEffect } from 'react';
+import Link from 'next/link';
+
+/**
+ * Error page — rendered when a page render throws. Kept deliberately separate
+ * from the 404 page: an API failure (a rejected Origin, a network error, a
+ * 5xx) is NOT "product not found", and dressing it up as a 404 sends the
+ * merchant hunting for a slug bug that isn't there. The full error is in the
+ * server log; this page only needs to say "temporary" and offer a retry.
+ */
+export default function ErrorPage({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    // The server log has the full error; the digest printed here links the two.
+    console.error(error);
+  }, [error]);
+
+  return (
+    <div className="mx-auto flex max-w-2xl flex-col items-center justify-center px-4 py-24 text-center">
+      <p className="text-sm font-medium text-muted-foreground">
+        <%- language === 'he' ? 'שגיאה' : 'Error' %>
+      </p>
+      <h1 className="mt-2 text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
+        <%- language === 'he' ? 'משהו השתבש' : 'Something went wrong' %>
+      </h1>
+      <p className="mt-4 text-muted-foreground">
+        <%- language === 'he' ? 'זו תקלה זמנית בטעינת העמוד — לא עמוד חסר. נסו שוב בעוד רגע.' : 'This is a temporary problem loading the page — not a missing page. Please try again in a moment.' %>
+      </p>
+      <div className="mt-8 flex gap-4">
+        <button
+          type="button"
+          onClick={reset}
+          className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:opacity-90"
+        >
+          <%- language === 'he' ? 'לנסות שוב' : 'Try again' %>
+        </button>
+        <Link
+          href="/"
+          className="rounded-md border border-border px-4 py-2 text-sm font-medium text-foreground hover:bg-muted"
+        >
+          <%- language === 'he' ? 'לדף הבית' : 'Go home' %>
+        </Link>
+      </div>
+    </div>
+  );
+}

package/templates/nextjs/base/src/app/pages/[slug]/page.tsx.ejs

@@ -40,7 +40,10 @@ export async function generateMetadata({ params }: PageProps): Promise<Metadata>
 export default async function StaticPage({ params }: PageProps) {
   const { locale, slug: rawSlug } = await params;
   const slug = decodeSlug(rawSlug);
-  const page = await (await getServerClient(locale)).content.page.getBySlug(slug, locale).catch(() => null);
+  // getBySlug returns null only on a genuine 404; any other API failure (a
+  // 403 from the channel's origin check, a network error) throws and surfaces
+  // as the error it is instead of masquerading as a missing page.
+  const page = await (await getServerClient(locale)).content.page.getBySlug(slug, locale);
   if (!page) notFound();
   return (
     <article className="mx-auto max-w-3xl px-4 py-10 sm:px-6 lg:px-8">
@@ -75,7 +78,10 @@ export async function generateMetadata({ params }: PageProps): Promise<Metadata>
 export default async function StaticPage({ params }: PageProps) {
   const { slug: rawSlug } = await params;
   const slug = decodeSlug(rawSlug);
-  const page = await (await getServerClient()).content.page.getBySlug(slug).catch(() => null);
+  // getBySlug returns null only on a genuine 404; any other API failure (a
+  // 403 from the channel's origin check, a network error) throws and surfaces
+  // as the error it is instead of masquerading as a missing page.
+  const page = await (await getServerClient()).content.page.getBySlug(slug);
   if (!page) notFound();
   return (
     <article className="mx-auto max-w-3xl px-4 py-10 sm:px-6 lg:px-8">

package/templates/nextjs/base/src/app/products/[slug]/page.tsx

@@ -1,6 +1,6 @@
 import type { Metadata } from 'next';
 import { notFound, permanentRedirect } from 'next/navigation';
-import { getProductPriceInfo } from 'brainerce';
+import { BrainerceError, getProductPriceInfo } from 'brainerce';
 import { getServerClient, fetchStoreInfo } from '@/core/lib/brainerce.server';
 import { resolveCurrency } from '@/core/lib/resolve-currency';
 import { buildMetaDescription } from '@/core/lib/seo';
@@ -123,10 +123,13 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
         ...(brandName ? { 'product:brand': brandName } : {}),
       },
     };
-  } catch {
-    return {
-      title: 'Product not found',
-    };
+  } catch (err) {
+    if (err instanceof BrainerceError && err.statusCode === 404) {
+      return { title: 'Product not found' };
+    }
+    // Anything else (channel origin rejection, network failure) hits the page
+    // render below too and surfaces there — don't stamp a misleading title.
+    return {};
   }
 }
 
@@ -138,7 +141,14 @@ export default async function ProductDetailPage({ params }: Props) {
   let product;
   try {
     product = await client.getProductBySlug(slug);
-  } catch {
+  } catch (err) {
+    // Only a genuine 404 may become a storefront 404. Anything else — a 403
+    // from the channel's origin check, a network failure, a 5xx — is a
+    // configuration or availability problem; disguising it as "product not
+    // found" sends the merchant hunting for a slug bug that isn't there.
+    if (!(err instanceof BrainerceError && err.statusCode === 404)) {
+      throw err;
+    }
     // The slug may have been RENAMED — the platform records every rename.
     // 301 the old URL to the current slug so its ranking and inbound links
     // carry over; genuine unknowns fall through to the 404 page. Default
@@ -182,7 +192,7 @@ export default async function ProductDetailPage({ params }: Props) {
       <div className="mx-auto max-w-7xl px-4 pt-6 sm:px-6 lg:px-8">
         <Breadcrumbs items={breadcrumbItems} />
       </div>
-      <ProductClientSection product={product} />
+      <ProductClientSection product={product} stockAlertsEnabled={storeInfo?.stockAlertsEnabled} />
       {/* Visible Q&A + the FAQPage JSON-LD above read the same product.faq —
           the extractable format AI answer engines cite. */}
       <ProductFaqSection product={product} locale={locale} />

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

@@ -1,64 +1,67 @@
-'use client';
-
-import { useState } from 'react';
-import { useRouter, Link } from '@/core/lib/navigation';
-import { useAuth } from '@/core/providers/store-provider';
-import { proxyRegister } from '@/core/lib/auth';
-import { RegisterForm } from '@/components/auth/register-form';
-import { OAuthButtons } from '@/components/auth/oauth-buttons';
-import { useTranslations } from '@/core/lib/translations';
-
-export default function RegisterPage() {
-  const router = useRouter();
-  const auth = useAuth();
-  const t = useTranslations('auth');
-  const [error, setError] = useState<string | null>(null);
-
-  async function handleRegister(data: {
-    firstName: string;
-    lastName: string;
-    email: string;
-    password: string;
-    acceptsMarketing: boolean;
-  }) {
-    try {
-      setError(null);
-      const result = await proxyRegister(data);
-
-      if (result.requiresVerification) {
-        // Cookie already set by proxy; verify-email uses it for auth
-        router.push('/verify-email');
-        return;
-      }
-
-      // Cookie was set by the proxy; refresh auth state
-      await auth.login();
-      router.push('/');
-    } catch (err) {
-      const message = err instanceof Error ? err.message : 'Registration failed. Please try again.';
-      setError(message);
-    }
-  }
-
-  return (
-    <div className="flex min-h-[60vh] items-center justify-center px-4 py-12">
-      <div className="w-full max-w-md space-y-6">
-        <div className="text-center">
-          <h1 className="text-foreground text-2xl font-bold">{t('createAccountTitle')}</h1>
-          <p className="text-muted-foreground mt-1 text-sm">{t('joinSubtitle')}</p>
-        </div>
-
-        <RegisterForm onSubmit={handleRegister} error={error} />
-
-        <OAuthButtons />
-
-        <p className="text-muted-foreground text-center text-sm">
-          {t('alreadyHaveAccount')}{' '}
-          <Link href="/login" className="text-primary font-medium hover:underline">
-            {t('signIn')}
-          </Link>
-        </p>
-      </div>
-    </div>
-  );
-}
+'use client';
+
+import { useState } from 'react';
+import { useRouter, Link } from '@/core/lib/navigation';
+import { useAuth } from '@/core/providers/store-provider';
+import { proxyRegister } from '@/core/lib/auth';
+import { RegisterForm } from '@/components/auth/register-form';
+import { OAuthButtons } from '@/components/auth/oauth-buttons';
+import { useTranslations } from '@/core/lib/translations';
+
+export default function RegisterPage() {
+  const router = useRouter();
+  const auth = useAuth();
+  const t = useTranslations('auth');
+  const [error, setError] = useState<string | null>(null);
+
+  async function handleRegister(data: {
+    firstName: string;
+    lastName: string;
+    email: string;
+    password: string;
+    acceptsMarketing: boolean;
+    /** Month and day only, never a year. Present together or not at all. */
+    birthMonth?: number;
+    birthDay?: number;
+  }) {
+    try {
+      setError(null);
+      const result = await proxyRegister(data);
+
+      if (result.requiresVerification) {
+        // Cookie already set by proxy; verify-email uses it for auth
+        router.push('/verify-email');
+        return;
+      }
+
+      // Cookie was set by the proxy; refresh auth state
+      await auth.login();
+      router.push('/');
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Registration failed. Please try again.';
+      setError(message);
+    }
+  }
+
+  return (
+    <div className="flex min-h-[60vh] items-center justify-center px-4 py-12">
+      <div className="w-full max-w-md space-y-6">
+        <div className="text-center">
+          <h1 className="text-foreground text-2xl font-bold">{t('createAccountTitle')}</h1>
+          <p className="text-muted-foreground mt-1 text-sm">{t('joinSubtitle')}</p>
+        </div>
+
+        <RegisterForm onSubmit={handleRegister} error={error} />
+
+        <OAuthButtons />
+
+        <p className="text-muted-foreground text-center text-sm">
+          {t('alreadyHaveAccount')}{' '}
+          <Link href="/login" className="text-primary font-medium hover:underline">
+            {t('signIn')}
+          </Link>
+        </p>
+      </div>
+    </div>
+  );
+}