create-brainerce-store 1.68.0 → 1.71.0

package/templates/nextjs/base/src/core/lib/auth.ts

@@ -1,154 +1,162 @@
-/**
- * Client-side auth helpers that call the BFF proxy API routes.
- * All mutating requests include the CSRF header.
- * The token is managed server-side via httpOnly cookies — never exposed to JS.
- */
-
-// Read either env var name. The new one is preferred; the old one is a soft
-// alias kept for backwards compatibility — both are accepted by the SDK.
-const CONNECTION_ID =
-  process.env.NEXT_PUBLIC_BRAINERCE_SALES_CHANNEL_ID ||
-  process.env.NEXT_PUBLIC_BRAINERCE_CONNECTION_ID ||
-  '';
-
-const CSRF_HEADERS: Record<string, string> = {
-  'Content-Type': 'application/json',
-  'X-Requested-With': 'brainerce',
-};
-
-interface LoginResult {
-  customer: {
-    id: string;
-    email: string;
-    firstName?: string;
-    lastName?: string;
-    emailVerified: boolean;
-  };
-  expiresAt: string;
-  requiresVerification?: boolean;
-}
-
-interface RegisterResult {
-  customer: {
-    id: string;
-    email: string;
-    firstName?: string;
-    lastName?: string;
-    emailVerified: boolean;
-  };
-  expiresAt: string;
-  requiresVerification?: boolean;
-}
-
-interface AuthStatus {
-  isLoggedIn: boolean;
-  customer?: {
-    id: string;
-    email: string;
-    firstName?: string;
-    lastName?: string;
-    phone?: string;
-    emailVerified: boolean;
-  };
-  error?: string;
-}
-
-interface VerifyEmailResult {
-  verified: boolean;
-  message?: string;
-}
-
-async function handleResponse<T>(response: Response): Promise<T> {
-  const data = await response.json();
-  if (!response.ok) {
-    throw new Error(data.message || data.error || `Request failed (${response.status})`);
-  }
-  return data as T;
-}
-
-/**
- * Login via BFF proxy. The proxy sets the httpOnly cookie on success.
- */
-export async function proxyLogin(email: string, password: string): Promise<LoginResult> {
-  const response = await fetch(`/api/store/api/vc/${CONNECTION_ID}/customers/login`, {
-    method: 'POST',
-    headers: CSRF_HEADERS,
-    body: JSON.stringify({ email, password }),
-  });
-  return handleResponse<LoginResult>(response);
-}
-
-/**
- * Register via BFF proxy. The proxy sets the httpOnly cookie on success.
- */
-export async function proxyRegister(data: {
-  firstName: string;
-  lastName: string;
-  email: string;
-  password: string;
-  acceptsMarketing?: boolean;
-}): Promise<RegisterResult> {
-  const response = await fetch(`/api/store/api/vc/${CONNECTION_ID}/customers/register`, {
-    method: 'POST',
-    headers: CSRF_HEADERS,
-    body: JSON.stringify(data),
-  });
-  return handleResponse<RegisterResult>(response);
-}
-
-/**
- * Check auth status. Reads httpOnly cookie server-side and validates with backend.
- */
-export async function checkAuthStatus(): Promise<AuthStatus> {
-  const response = await fetch('/api/auth/me');
-  return response.json();
-}
-
-/**
- * Logout. Clears httpOnly auth cookies server-side.
- */
-export async function proxyLogout(): Promise<void> {
-  await fetch('/api/auth/logout', {
-    method: 'POST',
-    headers: { 'X-Requested-With': 'brainerce' },
-  });
-}
-
-/**
- * Verify email via BFF proxy. The auth token is in the httpOnly cookie (set during login/register).
- * The proxy adds the Authorization header automatically.
- */
-export async function proxyVerifyEmail(code: string): Promise<VerifyEmailResult> {
-  const response = await fetch(`/api/store/api/vc/${CONNECTION_ID}/customers/verify-email`, {
-    method: 'POST',
-    headers: CSRF_HEADERS,
-    body: JSON.stringify({ code }),
-  });
-  return handleResponse<VerifyEmailResult>(response);
-}
-
-/**
- * Resend verification email via BFF proxy.
- * Uses the auth token from the httpOnly cookie.
- */
-export async function proxyResendVerification(): Promise<{ message: string }> {
-  const response = await fetch(`/api/store/api/vc/${CONNECTION_ID}/customers/resend-verification`, {
-    method: 'POST',
-    headers: CSRF_HEADERS,
-  });
-  return handleResponse<{ message: string }>(response);
-}
-
-/**
- * Reset password via BFF proxy.
- * The reset token is in an httpOnly cookie (set by /api/auth/reset-callback when the user
- * clicked the email link). The proxy reads it server-side — the token never reaches client JS.
- */
-export async function proxyResetPassword(newPassword: string): Promise<{ message: string }> {
-  const response = await fetch('/api/auth/reset-password', {
-    method: 'POST',
-    headers: CSRF_HEADERS,
-    body: JSON.stringify({ newPassword }),
-  });
-  return handleResponse<{ message: string }>(response);
-}
+/**
+ * Client-side auth helpers that call the BFF proxy API routes.
+ * All mutating requests include the CSRF header.
+ * The token is managed server-side via httpOnly cookies — never exposed to JS.
+ */
+
+// Read either env var name. The new one is preferred; the old one is a soft
+// alias kept for backwards compatibility — both are accepted by the SDK.
+const CONNECTION_ID =
+  process.env.NEXT_PUBLIC_BRAINERCE_SALES_CHANNEL_ID ||
+  process.env.NEXT_PUBLIC_BRAINERCE_CONNECTION_ID ||
+  '';
+
+const CSRF_HEADERS: Record<string, string> = {
+  'Content-Type': 'application/json',
+  'X-Requested-With': 'brainerce',
+};
+
+interface LoginResult {
+  customer: {
+    id: string;
+    email: string;
+    firstName?: string;
+    lastName?: string;
+    emailVerified: boolean;
+  };
+  expiresAt: string;
+  requiresVerification?: boolean;
+}
+
+interface RegisterResult {
+  customer: {
+    id: string;
+    email: string;
+    firstName?: string;
+    lastName?: string;
+    emailVerified: boolean;
+  };
+  expiresAt: string;
+  requiresVerification?: boolean;
+}
+
+interface AuthStatus {
+  isLoggedIn: boolean;
+  customer?: {
+    id: string;
+    email: string;
+    firstName?: string;
+    lastName?: string;
+    phone?: string;
+    emailVerified: boolean;
+  };
+  error?: string;
+}
+
+interface VerifyEmailResult {
+  verified: boolean;
+  message?: string;
+}
+
+async function handleResponse<T>(response: Response): Promise<T> {
+  const data = await response.json();
+  if (!response.ok) {
+    throw new Error(data.message || data.error || `Request failed (${response.status})`);
+  }
+  return data as T;
+}
+
+/**
+ * Login via BFF proxy. The proxy sets the httpOnly cookie on success.
+ */
+export async function proxyLogin(email: string, password: string): Promise<LoginResult> {
+  const response = await fetch(`/api/store/api/vc/${CONNECTION_ID}/customers/login`, {
+    method: 'POST',
+    headers: CSRF_HEADERS,
+    body: JSON.stringify({ email, password }),
+  });
+  return handleResponse<LoginResult>(response);
+}
+
+/**
+ * Register via BFF proxy. The proxy sets the httpOnly cookie on success.
+ */
+export async function proxyRegister(data: {
+  firstName: string;
+  lastName: string;
+  email: string;
+  password: string;
+  acceptsMarketing?: boolean;
+  /**
+   * Birthday month (1-12) and day (1-31), never a year. Powers the loyalty
+   * birthday gift. Send both or neither: one without the other is rejected
+   * with HTTP 400, and so is a day the month does not have. Required only when
+   * `getStoreInfo().requireBirthday` is true for this sales channel.
+   */
+  birthMonth?: number;
+  birthDay?: number;
+}): Promise<RegisterResult> {
+  const response = await fetch(`/api/store/api/vc/${CONNECTION_ID}/customers/register`, {
+    method: 'POST',
+    headers: CSRF_HEADERS,
+    body: JSON.stringify(data),
+  });
+  return handleResponse<RegisterResult>(response);
+}
+
+/**
+ * Check auth status. Reads httpOnly cookie server-side and validates with backend.
+ */
+export async function checkAuthStatus(): Promise<AuthStatus> {
+  const response = await fetch('/api/auth/me');
+  return response.json();
+}
+
+/**
+ * Logout. Clears httpOnly auth cookies server-side.
+ */
+export async function proxyLogout(): Promise<void> {
+  await fetch('/api/auth/logout', {
+    method: 'POST',
+    headers: { 'X-Requested-With': 'brainerce' },
+  });
+}
+
+/**
+ * Verify email via BFF proxy. The auth token is in the httpOnly cookie (set during login/register).
+ * The proxy adds the Authorization header automatically.
+ */
+export async function proxyVerifyEmail(code: string): Promise<VerifyEmailResult> {
+  const response = await fetch(`/api/store/api/vc/${CONNECTION_ID}/customers/verify-email`, {
+    method: 'POST',
+    headers: CSRF_HEADERS,
+    body: JSON.stringify({ code }),
+  });
+  return handleResponse<VerifyEmailResult>(response);
+}
+
+/**
+ * Resend verification email via BFF proxy.
+ * Uses the auth token from the httpOnly cookie.
+ */
+export async function proxyResendVerification(): Promise<{ message: string }> {
+  const response = await fetch(`/api/store/api/vc/${CONNECTION_ID}/customers/resend-verification`, {
+    method: 'POST',
+    headers: CSRF_HEADERS,
+  });
+  return handleResponse<{ message: string }>(response);
+}
+
+/**
+ * Reset password via BFF proxy.
+ * The reset token is in an httpOnly cookie (set by /api/auth/reset-callback when the user
+ * clicked the email link). The proxy reads it server-side — the token never reaches client JS.
+ */
+export async function proxyResetPassword(newPassword: string): Promise<{ message: string }> {
+  const response = await fetch('/api/auth/reset-password', {
+    method: 'POST',
+    headers: CSRF_HEADERS,
+    body: JSON.stringify({ newPassword }),
+  });
+  return handleResponse<{ message: string }>(response);
+}

package/templates/nextjs/base/src/core/lib/birthday.ts

@@ -0,0 +1,74 @@
+/**
+ * Birthday helpers for the loyalty birthday gift.
+ *
+ * Brainerce stores a birthday as a MONTH and a DAY and never a year, so there
+ * is no age on file and nothing here needs a date library or a date picker.
+ * The platform mints a one-time coupon and emails it ahead of the day, which
+ * only works if the storefront actually collects the two values.
+ *
+ * Both `updateMyProfile()` and `registerCustomer()` reject a month sent without
+ * a day (and the reverse) with HTTP 400, and reject a day the month does not
+ * have, so every form that collects a birthday validates with these helpers
+ * before it submits.
+ */
+
+/**
+ * Translation keys for the month names, index 0 = January. They live in the
+ * `common` namespace so the account form and the signup form share one list
+ * instead of each carrying its own twelve keys.
+ */
+export const BIRTH_MONTH_KEYS = [
+  'monthJanuary',
+  'monthFebruary',
+  'monthMarch',
+  'monthApril',
+  'monthMay',
+  'monthJune',
+  'monthJuly',
+  'monthAugust',
+  'monthSeptember',
+  'monthOctober',
+  'monthNovember',
+  'monthDecember',
+] as const;
+
+/**
+ * How many days each month offers.
+ *
+ * February gets 29, not 28: the 29th IS a valid birthday and the platform
+ * celebrates it on 28 February in years that do not have one. No year is ever
+ * stored, so there is no leap-year arithmetic to do here.
+ */
+const DAYS_IN_BIRTH_MONTH = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+
+/** Highest valid day for a birthday month (1-12). */
+export function daysInBirthMonth(month: number): number {
+  return DAYS_IN_BIRTH_MONTH[month - 1] ?? 31;
+}
+
+/**
+ * Day numbers to render in the day grid. With no month chosen yet the full
+ * 1-31 range is offered; picking a month narrows it right away.
+ */
+export function birthDayOptions(month: number | null): number[] {
+  const count = month ? daysInBirthMonth(month) : 31;
+  return Array.from({ length: count }, (_, index) => index + 1);
+}
+
+/**
+ * Translation key for a stored month, or null when the value is outside 1-12.
+ * Guards the display path so a bad value renders nothing rather than a raw
+ * `common.` key path.
+ */
+export function birthMonthKey(month: number): string | null {
+  return BIRTH_MONTH_KEYS[month - 1] ?? null;
+}
+
+/**
+ * Read a stored form value into the number the API wants, or null when no
+ * birthday is set.
+ */
+export function toBirthdayNumber(value: string): number | null {
+  const parsed = Number(value);
+  return Number.isInteger(parsed) && parsed > 0 ? parsed : null;
+}

package/templates/nextjs/base/src/core/lib/store-info.ts

@@ -21,6 +21,15 @@ export interface PublicStoreInfo {
   contactPhone?: string | null;
   socialLinks?: Record<string, string> | null;
   requireEmailVerification?: boolean;
+  /**
+   * Whether the merchant made the birthday mandatory at registration on this
+   * sales channel. Render the signup form's month and day fields as required
+   * when true and block the submit while either is empty, because the backend
+   * rejects a register call without both with HTTP 400. Absent means optional.
+   * Nothing else in the storefront enforces it, so treat it purely as a
+   * rendering hint.
+   */
+  requireBirthday?: boolean;
   upsell?: StoreInfo['upsell'];
   i18n?: StoreInfo['i18n'];
   /** Real flat-rate/free shipping zones — feeds Product JSON-LD `shippingDetails`. Public by design (merchants display shipping rates openly). */
@@ -59,6 +68,7 @@ export function pickPublicStoreInfo(raw: StoreInfo): PublicStoreInfo {
     contactPhone: raw.contactPhone ?? null,
     socialLinks: raw.socialLinks ?? null,
     requireEmailVerification: raw.requireEmailVerification,
+    requireBirthday: raw.requireBirthday,
     upsell: raw.upsell,
     i18n: raw.i18n,
     shipping: raw.shipping,

package/templates/nextjs/base/src/ui/layout/newsletter-signup.tsx

@@ -0,0 +1,143 @@
+'use client';
+
+/**
+ * Newsletter signup — confirmed opt-in.
+ *
+ * ⛔ THIS DOES NOT SUBSCRIBE ANYONE. `marketing.subscribe()` creates the contact
+ * and mails them a confirmation link; the address is unmailable, and invisible
+ * to every campaign audience, until the recipient clicks it. That is why the
+ * success state below says "check your email" and never "you're subscribed" —
+ * the second is untrue until a click lands in a mailbox this code cannot see,
+ * and most people never click.
+ *
+ * ⛔ THE RESPONSE CARRIES NO INFORMATION. `{ ok: true }` comes back identically
+ * for a brand-new address, one that confirmed months ago, one still inside its
+ * 24-hour resend cooldown, and one suppressed after a hard bounce. That is
+ * deliberate: a response that distinguished them would turn this public form
+ * into a way to test whether a given person shops here. There is nothing to
+ * branch on — render one success state and stop.
+ *
+ * Naming the spam folder is not padding. A filtered confirmation is the single
+ * commonest reason a signup never becomes a subscriber, and the resend cooldown
+ * means no second copy arrives for 24 hours.
+ *
+ * **Discount codes.** Subscribing mints nothing. For a "10% off your first
+ * order" offer, the merchant creates a coupon in the dashboard with the
+ * `customer_first_order` condition and you render that fixed code in the
+ * success state — see the commented line below. Show it immediately: it must
+ * not wait for the confirmation click, or the shopper loses the reason they
+ * filled the form in.
+ *
+ * Rate limited to 3 requests / 60s per IP.
+ */
+
+import { useMemo, useState } from 'react';
+import { getClient } from '@/core/lib/brainerce';
+import { useTranslations } from '@/core/lib/translations';
+
+export function NewsletterSignup() {
+  const t = useTranslations('newsletter');
+  const [email, setEmail] = useState('');
+  const [honeypot, setHoneypot] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [done, setDone] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Same source the contact form uses — <html lang> is set from the active
+  // locale, and passing it is what decides the language of the confirmation
+  // email. Omit it on a Hebrew storefront and the shopper gets English.
+  const locale = useMemo(() => {
+    if (typeof document !== 'undefined') return document.documentElement.lang || undefined;
+    return undefined;
+  }, []);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (loading || !email.trim()) return;
+
+    setLoading(true);
+    setError(null);
+    try {
+      await getClient().marketing.subscribe({
+        email: email.trim(),
+        locale,
+        source: 'footer',
+        honeypot,
+      });
+      setDone(true);
+      setEmail('');
+    } catch {
+      // A 429 lands here too — the copy stays generic rather than explaining
+      // the rate limit, which would only tell an abuser where the edge is.
+      setError(t('genericError'));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  if (done) {
+    return (
+      <div className="space-y-1">
+        <p className="text-sm font-medium">{t('checkEmailTitle')}</p>
+        <p className="text-sm opacity-70">{t('checkEmailBody')}</p>
+        {/*
+          Merchant offering a signup discount? Render the coupon code here, now
+          — not after the confirmation click, which may never come:
+          <p className="text-sm font-medium">{t('discountCode', { code: 'WELCOME10' })}</p>
+        */}
+      </div>
+    );
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-2">
+      <label htmlFor="newsletter-email" className="block text-sm font-medium">
+        {t('title')}
+      </label>
+      <p className="text-sm opacity-70">{t('subtitle')}</p>
+
+      <div className="flex flex-wrap gap-2">
+        <input
+          id="newsletter-email"
+          type="email"
+          required
+          autoComplete="email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          placeholder={t('placeholder')}
+          className="border-border min-w-0 flex-1 rounded border px-3 py-2 text-sm"
+        />
+        <button
+          type="submit"
+          disabled={loading}
+          className="bg-primary text-primary-foreground rounded px-4 py-2 text-sm font-medium transition-opacity hover:opacity-90 disabled:opacity-60"
+        >
+          {loading ? t('submitting') : t('submit')}
+        </button>
+      </div>
+
+      {/*
+        Honeypot. Bots complete every text input; a human never sees this one, so
+        a non-empty value rejects the request server-side. Positioned off-screen
+        rather than `display:none` — some bots skip hidden inputs — and kept out
+        of the tab order and the accessibility tree.
+      */}
+      <input
+        type="text"
+        name="company_website"
+        tabIndex={-1}
+        autoComplete="off"
+        aria-hidden="true"
+        value={honeypot}
+        onChange={(e) => setHoneypot(e.target.value)}
+        style={{ position: 'absolute', left: '-9999px', width: 1, height: 1 }}
+      />
+
+      {error ? (
+        <p role="alert" className="text-sm text-red-600">
+          {error}
+        </p>
+      ) : null}
+    </form>
+  );
+}

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

@@ -21,6 +21,9 @@ import type { Content } from 'brainerce';
 // component). Merchant-configured link columns keep plain <a> since their
 // URLs are arbitrary (may be external).
 import { Link } from '@/core/lib/navigation';
+// Client component — the signup posts from the browser, which is also what
+// satisfies the endpoint's browser-Origin requirement.
+import { NewsletterSignup } from './newsletter-signup';
 
 interface SiteFooterProps {
   /** Pre-fetched footer payload (server-side). `null` triggers fallback rendering. */
@@ -64,8 +67,11 @@ export function SiteFooter({ footer, storeName }: SiteFooterProps) {
   if (!data || (columns.length === 0 && !data.copyright && social.length === 0)) {
     return (
       <footer className="border-border bg-muted/30 text-muted-foreground mt-16 border-t py-8 text-sm">
-        <div className="mx-auto max-w-7xl px-4 text-center sm:px-6 lg:px-8">
-          © {year} {brandLabel}. All rights reserved.
+        <div className="mx-auto max-w-7xl space-y-6 px-4 text-center sm:px-6 lg:px-8">
+          <div className="mx-auto max-w-md text-start">
+            <NewsletterSignup />
+          </div>
+          <div>© {year} {brandLabel}. All rights reserved.</div>
         </div>
       </footer>
     );
@@ -108,6 +114,16 @@ export function SiteFooter({ footer, storeName }: SiteFooterProps) {
                 })}
               </div>
             ) : null}
+
+            {/*
+              Newsletter signup. Remove this block if the merchant does not want
+              a mailing list — nothing else depends on it. Confirmed opt-in: the
+              address is not subscribed until the recipient clicks the link they
+              are mailed, which is why the success copy says "check your email".
+            */}
+            <div className="mt-8">
+              <NewsletterSignup />
+            </div>
           </div>
 
           {columns.length > 0 ? (