create-brainerce-store 1.67.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/site-url.ts

@@ -22,16 +22,37 @@ import { headers } from 'next/headers';
  *     and must not be forgeable by a request header.
  *
  *   {@link getRequestOrigin} — the address a request actually ARRIVED on.
- *     Request headers first, because this is what the backend's origin check
- *     has to match; claiming the production domain from a preview deployment
- *     would pass a check that ought to fail.
+ *     Request headers first — unless they name an internal host (localhost,
+ *     127.0.0.1, a bind address) and an origin is configured, because an
+ *     internal host is how the platform's proxy addresses this server, not
+ *     where the request came from. Claiming the production domain from a
+ *     preview deployment on a real hostname would still pass a check that
+ *     ought to fail, so public hostnames keep winning over the env.
  */
 
 const DEV_FALLBACK = 'http://localhost:3000';
 
-function isLoopback(host: string): boolean {
-  const name = host.split(':')[0].toLowerCase();
-  return name === 'localhost' || name === '127.0.0.1' || name === '[::1]' || name === '::1';
+/**
+ * Hosts that can never be a storefront's public address: loopback names and
+ * the 0.0.0.0 bind address. Some hosting proxies (OpenAI Sites among them)
+ * forward requests to the app with `Host: localhost:<port>` and no
+ * `x-forwarded-host`, so seeing one of these in a request means "the proxy's
+ * internal leg", not "the shopper is on localhost".
+ */
+function isInternalHost(host: string): boolean {
+  const name = host.startsWith('[')
+    ? host.slice(1, host.includes(']') ? host.indexOf(']') : host.length)
+    : host.split(':')[0];
+  const lower = name.toLowerCase();
+  return lower === 'localhost' || lower === '127.0.0.1' || lower === '::1' || lower === '0.0.0.0';
+}
+
+function isInternalOrigin(origin: string): boolean {
+  try {
+    return isInternalHost(new URL(origin).host);
+  } catch {
+    return false;
+  }
 }
 
 /**
@@ -44,7 +65,7 @@ function toOrigin(raw: string | undefined): string | null {
   if (!trimmed) return null;
   const hasProtocol = /^https?:\/\//i.test(trimmed);
   const bare = trimmed.replace(/^\/\//, '');
-  const candidate = hasProtocol ? trimmed : `${isLoopback(bare) ? 'http' : 'https'}://${bare}`;
+  const candidate = hasProtocol ? trimmed : `${isInternalHost(bare) ? 'http' : 'https'}://${bare}`;
   try {
     return new URL(candidate).origin;
   } catch {
@@ -112,7 +133,7 @@ function fromForwardedHeaders(h: Headers): string | null {
   const host = forwardedHost || h.get('host')?.trim();
   if (!host) return null;
   const proto =
-    h.get('x-forwarded-proto')?.split(',')[0]?.trim() || (isLoopback(host) ? 'http' : 'https');
+    h.get('x-forwarded-proto')?.split(',')[0]?.trim() || (isInternalHost(host) ? 'http' : 'https');
   return toOrigin(`${proto}://${host}`);
 }
 
@@ -187,11 +208,23 @@ export async function getRequestOrigin(requestHeaders?: Headers): Promise<string
   // dynamically rather than prerendered against a fallback origin.
   const h = requestHeaders ?? (await headers());
   const fromRequest = fromForwardedHeaders(h);
-  if (fromRequest) return fromRequest;
 
+  // A public hostname from the request wins outright — it is what this
+  // request actually arrived on.
+  if (fromRequest && !isInternalOrigin(fromRequest)) return fromRequest;
+
+  // An internal host here does NOT mean the request arrived on localhost. It
+  // means the platform's proxy addresses this server by its bind address
+  // (`Host: localhost:3000`, no `x-forwarded-host`) — OpenAI Sites does
+  // exactly this — and the request's true origin is invisible to us. A
+  // configured origin is the only correct answer then. In plain local dev
+  // nothing is configured, so the loopback host (with its real port) still
+  // wins below.
   const configured = getSiteUrlFromEnv();
   if (configured) return configured;
 
+  if (fromRequest) return fromRequest;
+
   warnUnresolved();
   return DEV_FALLBACK;
 }

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>
+  );
+}