create-brainerce-store 1.68.0 → 1.72.0

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

@@ -1,154 +1,155 @@
-/**
- * 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.
+ *
+ * Everything the SDK covers goes through an SDK method. Never hand-build a
+ * REST path: the SDK owns the URL shape, and a string built here silently
+ * rots the day a route moves. `getClient()` is configured with
+ * `baseUrl: '/api/store'` + `proxyMode`, so each call still lands on the
+ * same-origin BFF proxy, which adds the Authorization header from the
+ * httpOnly cookie and strips the token out of the response. The SDK adds the
+ * CSRF header the proxy requires on every non-GET request.
+ *
+ * Only the routes with no SDK equivalent are plain fetches: `/api/auth/me`,
+ * `/api/auth/logout` and `/api/auth/reset-password` are this app's own Next
+ * route handlers, not Brainerce endpoints.
+ *
+ * The token is managed server-side via httpOnly cookies, never exposed to JS.
+ */
+import { getClient } from '@/core/lib/brainerce';
+
+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 the SDK, routed through the BFF proxy, which sets the httpOnly
+ * cookie on success and strips the token from the response. The narrow
+ * `LoginResult` return type is deliberate: the SDK's own response type
+ * declares a `token`, but the proxy removes it before it reaches the browser,
+ * so nothing here should read one.
+ */
+export async function proxyLogin(email: string, password: string): Promise<LoginResult> {
+  return getClient().loginCustomer(email, password);
+}
+
+/**
+ * Register via the SDK, routed through the BFF proxy, which 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> {
+  return getClient().registerCustomer(data);
+}
+
+/**
+ * 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 the SDK. No token argument is passed: the auth token lives
+ * in the httpOnly cookie (set during login/register) and the proxy attaches
+ * the Authorization header. The SDK skips its own token check in proxy mode.
+ */
+export async function proxyVerifyEmail(code: string): Promise<VerifyEmailResult> {
+  return getClient().verifyEmail(code);
+}
+
+/**
+ * Resend the verification email via the SDK. Uses the auth token from the
+ * httpOnly cookie, added by the proxy. Rate limited to 3 requests per hour.
+ */
+export async function proxyResendVerification(): Promise<{ message: string }> {
+  return getClient().resendVerificationEmail();
+}
+
+/**
+ * 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/brainerce.ts.ejs

@@ -37,22 +37,11 @@ export function initClientWithLocale(locale: string): BrainerceClient {
 }
 <% } %>
 
-// Cart ID helpers (not a security token — safe in localStorage)
-const CART_ID_KEY = 'brainerce_cart_id';
-
-export function getStoredCartId(): string | null {
-  if (typeof window === 'undefined') return null;
-  return localStorage.getItem(CART_ID_KEY);
-}
-
-export function setStoredCartId(cartId: string | null): void {
-  if (typeof window === 'undefined') return;
-  if (cartId) {
-    localStorage.setItem(CART_ID_KEY, cartId);
-  } else {
-    localStorage.removeItem(CART_ID_KEY);
-  }
-}
+// Cart identity belongs to the SDK. It owns the guest cart id, the session
+// cart and the logged-in cart cache, and `smartGetCart()` resolves the right
+// one. Do not mirror a cart id into localStorage here: a second copy drifts
+// out of step on login, cart merge and post-payment clear, and the SDK will
+// not read it back.
 
 // Initialize client (no token hydration — auth handled by httpOnly cookie)
 export function initClient(): BrainerceClient {

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/core/providers/store-provider.tsx.ejs

@@ -3,7 +3,7 @@
 import React, { createContext, useContext, useEffect, useState, useCallback } from 'react';
 import type { Cart, CustomerProfile } from 'brainerce';
 import { getCartTotals } from 'brainerce';
-import { getClient, initClient, setStoredCartId } from '@/core/lib/brainerce';
+import { getClient, initClient } from '@/core/lib/brainerce';
 import { pickPublicStoreInfo, type PublicStoreInfo } from '@/core/lib/store-info';
 import { checkAuthStatus, proxyLogout } from '@/core/lib/auth';
 <% if (i18nEnabled) { %>
@@ -170,13 +170,10 @@ export function StoreProvider({
     try {
       setCartLoading(true);
       const client = getClient();
+      // The SDK owns cart identity: smartGetCart() picks the guest, session or
+      // customer cart on its own. Never mirror the id into localStorage.
       const c = await client.smartGetCart();
       setCart(c);
-
-      // Persist server cart ID
-      if (c && c.id) {
-        setStoredCartId(c.id);
-      }
     } catch (err) {
       console.error('Failed to load cart:', err);
     } finally {

package/templates/nextjs/base/src/ui/cart/cart-item.tsx

@@ -30,6 +30,17 @@ export function CartItem({ item, onUpdate, className }: CartItemProps) {
   const unitPrice = parseFloat(item.unitPrice);
   const lineTotal = unitPrice * item.quantity;
 
+  // The server decides purchasability, per line. `isAvailable === false` means
+  // this line blocks checkout until it is removed, whether the stock ran out
+  // (a released reservation is the common cause) or the product/variant was
+  // withdrawn from sale. `unavailableReason` separates the two for the label.
+  const isUnavailable = item.isAvailable === false;
+  const unavailableLabel = isUnavailable
+    ? item.unavailableReason === 'OUT_OF_STOCK'
+      ? td('outOfStock')
+      : td('unavailable')
+    : null;
+
   async function handleQuantityChange(newQuantity: number) {
     if (newQuantity < 1 || updating) return;
 
@@ -83,6 +94,13 @@ export function CartItem({ item, onUpdate, className }: CartItemProps) {
       <div className="min-w-0 flex-1">
         <h3 className="text-foreground truncate text-sm font-medium">{productName}</h3>
 
+        {/* Availability badge. This line blocks checkout while it shows. */}
+        {unavailableLabel && (
+          <span className="bg-destructive/10 text-destructive mt-1 inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium">
+            {unavailableLabel}
+          </span>
+        )}
+
         {/* Variant name */}
         {variantName && <p className="text-muted-foreground mt-1 text-xs">{variantName}</p>}
 
@@ -116,7 +134,7 @@ export function CartItem({ item, onUpdate, className }: CartItemProps) {
             <button
               type="button"
               onClick={() => handleQuantityChange(item.quantity + 1)}
-              disabled={updating}
+              disabled={updating || isUnavailable}
               className="text-foreground hover:bg-muted px-2 py-1 text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-40"
               aria-label={td('increaseQuantity')}
             >

package/templates/nextjs/base/src/ui/cart/cart-view.tsx

@@ -21,7 +21,20 @@ import { useTranslations } from '@/core/lib/translations';
 export function CartView() {
   const t = useTranslations('cart');
   const tc = useTranslations('common');
-  const { cart, cartLoading, refreshCart, itemCount, cartRecs, upgrades, bundles } = useCartPage();
+  const tr = useTranslations('reservation');
+  const {
+    cart,
+    cartLoading,
+    refreshCart,
+    itemCount,
+    cartRecs,
+    upgrades,
+    bundles,
+    reservationExpired,
+    unavailableItems,
+    canProceedToCheckout,
+    onReservationExpired,
+  } = useCartPage();
 
   if (cartLoading) {
     return (
@@ -55,9 +68,14 @@ export function CartView() {
         {t('title')} ({itemCount} {itemCount === 1 ? tc('item') : tc('items')})
       </h1>
 
-      {/* Reservation countdown */}
+      {/* Reservation countdown. onExpire refreshes the cart and closes the
+          checkout gate below. Passing it is what makes expiry mean anything. */}
       {cart.reservation?.hasReservation && (
-        <ReservationCountdown reservation={cart.reservation} className="mb-6" />
+        <ReservationCountdown
+          reservation={cart.reservation}
+          onExpire={onReservationExpired}
+          className="mb-6"
+        />
       )}
 
       <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
@@ -113,9 +131,27 @@ export function CartView() {
             <FreeShippingBar className="mb-4" />
             <CartSummary />
 
-            <Button asChild size="lg" className="mt-6 w-full rounded px-6 text-sm">
-              <Link href="/checkout">{t('proceedToCheckout')}</Link>
-            </Button>
+            {/* Proceed to checkout. When the gate is closed this must be a
+                real disabled control, never a styled-down link: an anchor
+                ignores `disabled` and would still navigate. */}
+            {canProceedToCheckout ? (
+              <Button asChild size="lg" className="mt-6 w-full rounded px-6 text-sm">
+                <Link href="/checkout">{t('proceedToCheckout')}</Link>
+              </Button>
+            ) : (
+              <>
+                <Button disabled size="lg" className="mt-6 w-full rounded px-6 text-sm">
+                  {t('proceedToCheckout')}
+                </Button>
+                <p className="text-destructive mt-2 text-xs">
+                  {unavailableItems.length > 0
+                    ? t('unavailableItemsHint')
+                    : reservationExpired
+                      ? tr('expiredHint')
+                      : null}
+                </p>
+              </>
+            )}
 
             <Link
               href="/products"