create-brainerce-store 1.43.1 → 1.43.3

package/dist/index.js

@@ -31,7 +31,7 @@ var require_package = __commonJS({
   "package.json"(exports2, module2) {
     module2.exports = {
       name: "create-brainerce-store",
-      version: "1.43.1",
+      version: "1.43.3",
       description: "Scaffold a production-ready e-commerce storefront connected to Brainerce",
       bin: {
         "create-brainerce-store": "dist/index.js"
@@ -172,25 +172,33 @@ var ALLOWED_PACKAGE_MANAGERS = [
   "bun"
 ];
 var BRAINERCE_RUNTIME_DEPS = Object.freeze({
-  // 1.27 = first published cut with client.content namespace (FAQ / Footer /
-  // Header / Announcement / RichText / Page) + getDirectionForLocale helper.
-  // Scaffolded stores need this minimum to use the content components shipped
-  // under src/components/content/ and the homepage RichTextBlock mount-point.
-  // 1.26 had the namespace in source but was published before the cut.
-  brainerce: "^1.27.0",
+  // 1.28 = first cut after the PriceList API removal + the FX-driven display
+  // pricing rework (Product.displayPrice / displayCurrency / displaySalePrice
+  // attached additively when getProducts is called with a regionId). Older
+  // 1.27 had PriceList/Resolved* surface that no longer exists on the
+  // backend, so scaffolded stores must pin >=1.28 to compile.
+  brainerce: "^1.28.0",
   "isomorphic-dompurify": "^3.8.0"
 });
 
 // ../cli-shared/src/deps.ts
+var SAFE_INSTALL_TOKEN = /^[@a-zA-Z0-9._/^~*+=:-]+$/;
 async function installDependencies(projectDir, pkgManager, opts = {}) {
   if (!ALLOWED_PACKAGE_MANAGERS.includes(pkgManager)) {
     throw new Error(`Unsupported package manager: ${pkgManager}`);
   }
   const subcommand = opts.subcommand ?? (pkgManager === "yarn" ? "" : "install");
   const extraArgs = opts.args ?? [];
+  const isWindows = process.platform === "win32";
+  const argTokens = [subcommand, ...extraArgs].filter((t) => t !== "");
+  if (isWindows) {
+    for (const token of argTokens) {
+      if (!SAFE_INSTALL_TOKEN.test(token)) {
+        throw new Error(`Unsafe install argument: ${token}`);
+      }
+    }
+  }
   return new Promise((resolve, reject) => {
-    const isWindows = process.platform === "win32";
-    const argTokens = [subcommand, ...extraArgs].filter((t) => t !== "");
     const child = isWindows ? (0, import_child_process.spawn)(`${pkgManager} ${argTokens.join(" ")}`.trim(), {
       cwd: projectDir,
       stdio: ["ignore", "ignore", "pipe"],
@@ -555,7 +563,10 @@ async function fetchStoreInfo(connectionId, baseUrl = KNOWN_API_URLS.production)
   const timeout = setTimeout(() => controller.abort(), 1e4);
   let res;
   try {
-    res = await fetch(url, { signal: controller.signal });
+    res = await fetch(url, {
+      signal: controller.signal,
+      headers: { Origin: "http://localhost" }
+    });
   } catch (err) {
     if (err.name === "AbortError") {
       throw new Error(`Request to ${baseUrl} timed out`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-brainerce-store",
-  "version": "1.43.1",
+  "version": "1.43.3",
   "description": "Scaffold a production-ready e-commerce storefront connected to Brainerce",
   "bin": {
     "create-brainerce-store": "dist/index.js"

package/templates/nextjs/base/scripts/fetch-store-info.mjs

@@ -1,91 +1,97 @@
-/* global process, console, fetch */
-/* eslint-disable no-console */
-/**
- * Setup script: fetches store info from Brainerce using the connection ID
- * and saves NEXT_PUBLIC_STORE_NAME (and other public fields) to .env.local.
- *
- * Run: node scripts/fetch-store-info.mjs
- */
-
-import { readFileSync, writeFileSync, existsSync } from 'fs';
-import { join } from 'path';
-
-const envPath = join(process.cwd(), '.env.local');
-
-if (!existsSync(envPath)) {
-  console.error(
-    '❌  .env.local not found. Create it first with NEXT_PUBLIC_BRAINERCE_SALES_CHANNEL_ID set.'
-  );
-  process.exit(1);
-}
-
-const envContent = readFileSync(envPath, 'utf-8');
-
-function getVar(content, key) {
-  const match = content.match(new RegExp(`^${key}=(.*)$`, 'm'));
-  return match ? match[1].trim() : null;
-}
-
-function setVar(content, key, value) {
-  const regex = new RegExp(`^${key}=.*$`, 'm');
-  if (regex.test(content)) {
-    return content.replace(regex, `${key}=${value}`);
-  }
-  return content.trimEnd() + `\n${key}=${value}\n`;
-}
-
-// Read either env var name. The new one is preferred; the old one is a soft
-// alias kept for backwards compatibility — the SDK accepts both.
-const connectionId =
-  getVar(envContent, 'NEXT_PUBLIC_BRAINERCE_SALES_CHANNEL_ID') ||
-  getVar(envContent, 'NEXT_PUBLIC_BRAINERCE_CONNECTION_ID');
-const apiUrl = (getVar(envContent, 'BRAINERCE_API_URL') || 'https://api.brainerce.com').replace(
-  /\/$/,
-  ''
-);
-
-if (!connectionId) {
-  console.error('❌  NEXT_PUBLIC_BRAINERCE_SALES_CHANNEL_ID is not set in .env.local');
-  process.exit(1);
-}
-
-console.log(`Fetching store info for sales channel: ${connectionId} ...`);
-
-let storeInfo;
-try {
-  const res = await fetch(`${apiUrl}/api/vc/${connectionId}/info`);
-  if (!res.ok) {
-    console.error(`❌  API returned ${res.status}: ${await res.text()}`);
-    process.exit(1);
-  }
-  storeInfo = await res.json();
-} catch (err) {
-  console.error(`❌  Failed to reach ${apiUrl}: ${err.message}`);
-  process.exit(1);
-}
-
-const name = storeInfo.name;
-const currency = storeInfo.currency;
-
-if (!name) {
-  console.error('❌  Store info response has no `name` field:', storeInfo);
-  process.exit(1);
-}
-// Currency is NOT NULL in the backend schema — a response without it
-// is a real backend bug, not a "use the default" signal. Fail loud rather
-// than silently leaving the env stale (which would bake the previous
-// value into the next client bundle build).
-if (!currency) {
-  console.error('❌  Store info response has no `currency` field:', storeInfo);
-  process.exit(1);
-}
-
-let updated = envContent;
-updated = setVar(updated, 'NEXT_PUBLIC_STORE_NAME', name);
-updated = setVar(updated, 'NEXT_PUBLIC_STORE_CURRENCY', currency);
-
-writeFileSync(envPath, updated, 'utf-8');
-
-console.log(`✓ NEXT_PUBLIC_STORE_NAME=${name}`);
-console.log(`✓ NEXT_PUBLIC_STORE_CURRENCY=${currency}`);
-console.log('Done. Restart the dev server for changes to take effect.');
+/* eslint-disable no-console */
+/**
+ * Setup script: fetches store info from Brainerce using the connection ID
+ * and saves NEXT_PUBLIC_STORE_NAME (and other public fields) to .env.local.
+ *
+ * Run: node scripts/fetch-store-info.mjs
+ */
+
+import { readFileSync, writeFileSync, existsSync } from 'fs';
+import { join } from 'path';
+
+const envPath = join(process.cwd(), '.env.local');
+
+if (!existsSync(envPath)) {
+  console.error(
+    '❌  .env.local not found. Create it first with NEXT_PUBLIC_BRAINERCE_SALES_CHANNEL_ID set.'
+  );
+  process.exit(1);
+}
+
+const envContent = readFileSync(envPath, 'utf-8');
+
+function getVar(content, key) {
+  const match = content.match(new RegExp(`^${key}=(.*)$`, 'm'));
+  return match ? match[1].trim() : null;
+}
+
+function setVar(content, key, value) {
+  const regex = new RegExp(`^${key}=.*$`, 'm');
+  if (regex.test(content)) {
+    return content.replace(regex, `${key}=${value}`);
+  }
+  return content.trimEnd() + `\n${key}=${value}\n`;
+}
+
+// Read either env var name. The new one is preferred; the old one is a soft
+// alias kept for backwards compatibility — the SDK accepts both.
+const connectionId =
+  getVar(envContent, 'NEXT_PUBLIC_BRAINERCE_SALES_CHANNEL_ID') ||
+  getVar(envContent, 'NEXT_PUBLIC_BRAINERCE_CONNECTION_ID');
+const apiUrl = (getVar(envContent, 'BRAINERCE_API_URL') || 'https://api.brainerce.com').replace(
+  /\/$/,
+  ''
+);
+
+if (!connectionId) {
+  console.error('❌  NEXT_PUBLIC_BRAINERCE_SALES_CHANNEL_ID is not set in .env.local');
+  process.exit(1);
+}
+
+console.log(`Fetching store info for sales channel: ${connectionId} ...`);
+
+let storeInfo;
+try {
+  // /api/vc/* enforces an Origin check: TEST channels accept local/tunnel
+  // hosts, LIVE channels require the configured domain. Prefer the project's
+  // own NEXT_PUBLIC_SITE_URL (the real domain for a LIVE store), falling back
+  // to localhost for local dev against a TEST channel.
+  const siteUrl = getVar(envContent, 'NEXT_PUBLIC_SITE_URL') || 'http://localhost:3000';
+  const res = await fetch(`${apiUrl}/api/vc/${connectionId}/info`, {
+    headers: { Origin: siteUrl },
+  });
+  if (!res.ok) {
+    console.error(`❌  API returned ${res.status}: ${await res.text()}`);
+    process.exit(1);
+  }
+  storeInfo = await res.json();
+} catch (err) {
+  console.error(`❌  Failed to reach ${apiUrl}: ${err.message}`);
+  process.exit(1);
+}
+
+const name = storeInfo.name;
+const currency = storeInfo.currency;
+
+if (!name) {
+  console.error('❌  Store info response has no `name` field:', storeInfo);
+  process.exit(1);
+}
+// Currency is NOT NULL in the backend schema — a response without it
+// is a real backend bug, not a "use the default" signal. Fail loud rather
+// than silently leaving the env stale (which would bake the previous
+// value into the next client bundle build).
+if (!currency) {
+  console.error('❌  Store info response has no `currency` field:', storeInfo);
+  process.exit(1);
+}
+
+let updated = envContent;
+updated = setVar(updated, 'NEXT_PUBLIC_STORE_NAME', name);
+updated = setVar(updated, 'NEXT_PUBLIC_STORE_CURRENCY', currency);
+
+writeFileSync(envPath, updated, 'utf-8');
+
+console.log(`✓ NEXT_PUBLIC_STORE_NAME=${name}`);
+console.log(`✓ NEXT_PUBLIC_STORE_CURRENCY=${currency}`);
+console.log('Done. Restart the dev server for changes to take effect.');

package/templates/nextjs/base/src/components/content/header-account.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+/**
+ * Auth-aware account control for the site header.
+ *
+ * The header itself is a server component fed by merchant-configured Content,
+ * so it can't read client auth state. This small client island bridges that:
+ * it links to `/account` when the visitor is signed in (the account page shows
+ * profile + orders + sign-out) and to `/login` otherwise.
+ *
+ * The label/icon are i18n-driven via the `nav` namespace (`login` / `account`)
+ * so RTL + translated stores stay consistent. Text is hidden on mobile to match
+ * the cart icon's icon-only treatment; the icon + aria-label keep it accessible.
+ */
+import * as React from 'react';
+import { Link } from '@/lib/navigation';
+import { useAuth } from '@/providers/store-provider';
+import { useTranslations } from '@/lib/translations';
+
+const UserIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={2}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    aria-hidden="true"
+    {...props}
+  >
+    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+    <circle cx="12" cy="7" r="4" />
+  </svg>
+);
+
+export function HeaderAccount() {
+  const { isLoggedIn } = useAuth();
+  const t = useTranslations('nav');
+
+  // Guests land on /login; signed-in visitors go to /account (which itself
+  // bounces guests back to /login, so the link is safe even mid auth-resolve).
+  const href = isLoggedIn ? '/account' : '/login';
+  const label = isLoggedIn ? t('account') : t('login');
+
+  return (
+    <Link
+      href={href}
+      aria-label={label}
+      className="text-foreground/80 hover:text-foreground hover:bg-muted/60 inline-flex h-9 items-center justify-center gap-1.5 rounded-md px-2 transition-colors"
+    >
+      <UserIcon className="h-5 w-5" />
+      <span className="hidden text-sm font-medium sm:inline">{label}</span>
+    </Link>
+  );
+}

package/templates/nextjs/base/src/components/content/site-header.tsx.ejs

@@ -17,6 +17,7 @@
  */
 import * as React from 'react';
 import type { Content } from 'brainerce';
+import { HeaderAccount } from './header-account';
 
 interface SiteHeaderProps {
   /** Pre-fetched header payload (server-side). `null` triggers static fallback. */
@@ -77,13 +78,16 @@ export function SiteHeader({ header, storeName }: SiteHeaderProps) {
           <a href="/" className="text-lg font-semibold tracking-tight" aria-label={brandLabel}>
             {brandLabel}
           </a>
-          <a
-            href="/cart"
-            aria-label="Cart"
-            className="text-foreground/80 hover:text-foreground hover:bg-muted/60 inline-flex h-9 w-9 items-center justify-center rounded-md transition-colors"
-          >
-            <CartIcon className="h-5 w-5" />
-          </a>
+          <div className="flex items-center gap-2">
+            <HeaderAccount />
+            <a
+              href="/cart"
+              aria-label="Cart"
+              className="text-foreground/80 hover:text-foreground hover:bg-muted/60 inline-flex h-9 w-9 items-center justify-center rounded-md transition-colors"
+            >
+              <CartIcon className="h-5 w-5" />
+            </a>
+          </div>
         </div>
       </header>
     );
@@ -129,6 +133,8 @@ export function SiteHeader({ header, storeName }: SiteHeaderProps) {
             </a>
           ) : null}
 
+          <HeaderAccount />
+
           <a
             href="/cart"
             aria-label="Cart"

package/templates/nextjs/base/src/components/products/product-card.tsx

@@ -18,6 +18,41 @@ interface ProductCardProps {
   className?: string;
 }
 
+/**
+ * Pick the price + currency to render for a given product (PRD §23 FX overlay).
+ *
+ * When the storefront passed `regionId` to `getProducts({ regionId })` AND the
+ * region currency differs from the store currency, the backend attaches
+ * additive `displayPrice` / `displayCurrency` fields. Otherwise we fall back
+ * to the canonical store-currency `basePrice` / `salePrice`. Either way the
+ * cart still charges in the store currency — this only affects display.
+ */
+function pickDisplayPrice(
+  product: Product,
+  fallbackCurrency: string
+): { price: number | undefined; salePrice: number | null; currency: string } {
+  if (product.displayPrice != null && product.displayCurrency) {
+    const sale =
+      product.displaySalePrice != null ? parseFloat(product.displaySalePrice) : null;
+    return {
+      // `displayPrice` is the base price converted to the region currency —
+      // it goes into the PriceDisplay `price` (base) slot, NOT the sale slot.
+      price: parseFloat(product.displayPrice),
+      salePrice: sale != null && !Number.isNaN(sale) ? sale : null,
+      currency: product.displayCurrency,
+    };
+  }
+  // Same-currency fallback. `getProductPriceInfo.price` is the EFFECTIVE
+  // charged amount (= salePrice when on sale, base otherwise); `originalPrice`
+  // is the base. Map them to PriceDisplay's (price = base, salePrice = sale).
+  const { price: effective, originalPrice, isOnSale } = getProductPriceInfo(product);
+  return {
+    price: originalPrice,
+    salePrice: isOnSale ? effective : null,
+    currency: fallbackCurrency,
+  };
+}
+
 function VariantPriceRange({ product }: { product: Product }) {
   const currency = useCurrency();
 
@@ -51,6 +86,11 @@ export function ProductCard({ product, className }: ProductCardProps) {
   const tProd = useTranslations('products');
   const router = useRouter();
   const { refreshCart } = useCart();
+  const fallbackCurrency = useCurrency();
+  // FX overlay (PRD §23): prefer the region-converted display values when the
+  // storefront passed regionId to getProducts. Otherwise fall back to the
+  // canonical store-currency basePrice / salePrice.
+  const display = pickDisplayPrice(product, fallbackCurrency);
   const { price, originalPrice, isOnSale } = getProductPriceInfo(product);
   const mainImage = product.images?.[0];
   const imageUrl = mainImage?.url || null;
@@ -215,7 +255,12 @@ export function ProductCard({ product, className }: ProductCardProps) {
         {isVariable ? (
           <VariantPriceRange product={product} />
         ) : (
-          <PriceDisplay price={originalPrice} salePrice={isOnSale ? price : undefined} size="sm" />
+          <PriceDisplay
+            price={display.price ?? originalPrice}
+            salePrice={display.salePrice ?? (isOnSale ? price : undefined)}
+            currency={display.currency}
+            size="sm"
+          />
         )}
 
         {/* Stock */}