create-brainerce-store 1.14.0 → 1.14.2

package/dist/index.js

@@ -31,7 +31,7 @@ var require_package = __commonJS({
   "package.json"(exports2, module2) {
     module2.exports = {
       name: "create-brainerce-store",
-      version: "1.14.0",
+      version: "1.14.2",
       description: "Scaffold a production-ready e-commerce storefront connected to Brainerce",
       bin: {
         "create-brainerce-store": "dist/index.js"

package/package.json

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

package/templates/nextjs/base/.env.local.ejs

@@ -1,6 +1,10 @@
 # Brainerce Connection
 NEXT_PUBLIC_BRAINERCE_CONNECTION_ID=<%= connectionId %>
 
+# Store info (pre-fetched during setup to avoid flash on first load)
+NEXT_PUBLIC_STORE_NAME=<%= storeName %>
+NEXT_PUBLIC_STORE_CURRENCY=<%= currency %>
+
 # Backend API URL (server-side only — used by BFF proxy and SSR, never exposed to browser)
 BRAINERCE_API_URL=<%= apiBaseUrl %>
 

package/templates/nextjs/base/package.json.ejs

@@ -6,7 +6,8 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "setup": "node scripts/fetch-store-info.mjs"
   },
   "dependencies": {
     "brainerce": "^1.11.0",

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

@@ -0,0 +1,74 @@
+/**
+ * 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_CONNECTION_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`;
+}
+
+const connectionId = 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_CONNECTION_ID is not set in .env.local');
+  process.exit(1);
+}
+
+console.log(`Fetching store info for connection: ${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);
+}
+
+let updated = envContent;
+updated = setVar(updated, 'NEXT_PUBLIC_STORE_NAME', name);
+if (currency) {
+  updated = setVar(updated, 'NEXT_PUBLIC_STORE_CURRENCY', currency);
+}
+
+writeFileSync(envPath, updated, 'utf-8');
+
+console.log(`✓ NEXT_PUBLIC_STORE_NAME=${name}`);
+if (currency) console.log(`✓ NEXT_PUBLIC_STORE_CURRENCY=${currency}`);
+console.log('Done. Restart the dev server for changes to take effect.');

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

@@ -46,6 +46,7 @@ function CheckoutContent() {
   const [destinations, setDestinations] = useState<ShippingDestinations | null>(null);
   const [pickupLocations, setPickupLocations] = useState<PickupLocation[]>([]);
   const [deliveryType, setDeliveryType] = useState<'shipping' | 'pickup'>('shipping');
+  const [isAllDigital, setIsAllDigital] = useState(false);
 
   // Check for returning from canceled payment
   const canceled = searchParams.get('canceled') === 'true';
@@ -73,7 +74,13 @@ function CheckoutContent() {
         setCheckout(existing);
 
         // Determine step based on checkout state
-        if (existing.deliveryType === 'pickup' && existing.pickupLocation) {
+        const allDigital = existing.lineItems.every(
+          (i) => (i.product as unknown as { isDownloadable?: boolean }).isDownloadable
+        );
+        setIsAllDigital(allDigital);
+        if (allDigital) {
+          setStep('payment');
+        } else if (existing.deliveryType === 'pickup' && existing.pickupLocation) {
           setDeliveryType('pickup');
           setStep('payment');
         } else if (existing.shippingAddress && existing.shippingRateId) {
@@ -93,6 +100,16 @@ function CheckoutContent() {
       if (cart && cart.id) {
         const newCheckout = await client.createCheckout({ cartId: cart.id });
         setCheckout(newCheckout);
+
+        // If all items are downloadable, skip shipping entirely
+        const allDigital = newCheckout.lineItems.every(
+          (i) => (i.product as unknown as { isDownloadable?: boolean }).isDownloadable
+        );
+        setIsAllDigital(allDigital);
+        if (allDigital) {
+          setStep('payment');
+          return;
+        }
       } else {
         setError(t('cartIsEmpty'));
       }
@@ -265,8 +282,9 @@ function CheckoutContent() {
     );
   }
 
-  const steps: { key: CheckoutStep; label: string }[] =
-    pickupLocations.length > 0
+  const steps: { key: CheckoutStep; label: string }[] = isAllDigital
+    ? [{ key: 'payment', label: t('stepPayment') }]
+    : pickupLocations.length > 0
       ? deliveryType === 'pickup'
         ? [
             { key: 'method', label: t('stepMethod') },
@@ -461,13 +479,15 @@ function CheckoutContent() {
             <div>
               <div className="mb-4 flex items-center justify-between">
                 <h2 className="text-foreground text-lg font-semibold">{t('payment')}</h2>
-                <button
-                  type="button"
-                  onClick={() => setStep(deliveryType === 'pickup' ? 'pickup' : 'shipping')}
-                  className="text-primary text-sm hover:underline"
-                >
-                  {deliveryType === 'pickup' ? t('changePickup') : t('changeShipping')}
-                </button>
+                {!isAllDigital && (
+                  <button
+                    type="button"
+                    onClick={() => setStep(deliveryType === 'pickup' ? 'pickup' : 'shipping')}
+                    className="text-primary text-sm hover:underline"
+                  >
+                    {deliveryType === 'pickup' ? t('changePickup') : t('changeShipping')}
+                  </button>
+                )}
               </div>
 
               <PaymentStep checkoutId={checkout.id} />
@@ -543,8 +563,8 @@ function CheckoutContent() {
               )
             )}
 
-            {/* Coupon input — show from shipping/pickup step onwards */}
-            {cart && (step === 'shipping' || step === 'pickup' || step === 'payment') && (
+            {/* Coupon input — show from shipping/pickup step onwards (or immediately if digital) */}
+            {cart && (isAllDigital || step === 'shipping' || step === 'pickup' || step === 'payment') && (
               <div className="border-border border-t pt-4">
                 <CouponInput cart={cart} onUpdate={handleCouponUpdate} />
               </div>

package/templates/nextjs/base/src/app/products/[slug]/product-client-section.tsx

@@ -201,9 +201,6 @@ export function ProductClientSection({ product: initialProduct }: ProductClientS
         productId: product.id,
         variantId: selectedVariant?.id,
         quantity,
-        name: product.name,
-        price: String(priceInfo.price),
-        image: mainImageUrl || undefined,
       });
       await refreshCart();
       setAddedMessage(true);
@@ -320,7 +317,7 @@ export function ProductClientSection({ product: initialProduct }: ProductClientS
           {product.isDownloadable && product.downloads && product.downloads.length > 0 && (
             <div className="bg-muted/50 rounded-lg border p-4">
               <p className="text-foreground mb-2 text-sm font-medium">
-                {t('filesIncluded', { count: product.downloads.length })}
+                {t('filesIncluded')} ({product.downloads.length})
               </p>
               <ul className="space-y-1.5">
                 {product.downloads.map((file: DownloadFile) => (

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

@@ -69,19 +69,19 @@ function ChevronDown({ className }: { className?: string }) {
 
 /** Recursive dropdown items for nested categories */
 function CategoryDropdownItems({
-  children,
+  items,
   depth,
   selectedId,
   onSelect,
 }: {
-  children: CategoryNode[];
+  items: CategoryNode[];
   depth: number;
   selectedId: string;
   onSelect: (id: string) => void;
 }) {
   return (
     <>
-      {children.map((child) => (
+      {items.map((child) => (
         <div key={child.id}>
           <button
             onClick={() => onSelect(child.id)}
@@ -95,7 +95,7 @@ function CategoryDropdownItems({
           </button>
           {child.children.length > 0 && (
             <CategoryDropdownItems
-              children={child.children}
+              items={child.children}
               depth={depth + 1}
               selectedId={selectedId}
               onSelect={onSelect}
@@ -204,7 +204,7 @@ function CategoryChip({
           {/* Recursive children */}
           <div onClick={() => setOpen(false)}>
             <CategoryDropdownItems
-              children={category.children}
+              items={category.children}
               depth={0}
               selectedId={selectedId}
               onSelect={onSelect}

package/templates/nextjs/base/src/components/account/order-history.tsx

@@ -77,7 +77,7 @@ function OrderCard({ order }: { order: Order }) {
   const t = useTranslations('account');
   const tc = useTranslations('common');
   const [expanded, setExpanded] = useState(false);
-  const statusConfig = STATUS_CONFIG[order.status] || STATUS_CONFIG.pending;
+  const statusConfig = STATUS_CONFIG[order.status?.toLowerCase() as OrderStatus] || STATUS_CONFIG.pending;
   const currency = order.currency || 'USD';
   const totalAmount = order.totalAmount || order.total || '0';
 
@@ -243,11 +243,11 @@ function OrderDownloads({ orderId }: { orderId: string }) {
               {link.productName}
               {' · '}
               {link.downloadLimit != null
-                ? t('downloadsRemaining', { used: link.downloadsUsed, limit: link.downloadLimit })
+                ? `${link.downloadsUsed}/${link.downloadLimit} ${t('downloadsRemaining')}`
                 : t('unlimitedDownloads')}
               {' · '}
               {link.expiresAt
-                ? t('expiresAt', { date: new Date(link.expiresAt).toLocaleDateString() })
+                ? `${t('expiresAt')} ${new Date(link.expiresAt).toLocaleDateString()}`
                 : t('noExpiry')}
             </p>
           </div>

package/templates/nextjs/base/src/components/checkout/payment-step.tsx

@@ -243,9 +243,7 @@ export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
         },
       };
 
-      console.info(
-        `Payment SDK: ${method}({ environment: "${config.environment}", version: ${config.version} })`
-      );
+      console.info(`Payment SDK: calling ${method}()`);
       global[method](config);
       sdkInitDone = true;
     }

package/templates/nextjs/base/src/components/layout/header.tsx

@@ -81,7 +81,7 @@ export function Header() {
         <div className="flex h-16 items-center justify-between gap-4">
           {/* Logo / Store Name */}
           <Link href="/" className="text-foreground flex-shrink-0 text-xl font-bold">
-            {storeInfo?.name || tc('store')}
+            {storeInfo?.name || process.env.NEXT_PUBLIC_STORE_NAME || tc('store')}
           </Link>
 
           {/* Desktop Navigation */}

package/templates/nextjs/base/src/components/products/stock-badge.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { getStockStatus } from 'brainerce';
 import type { InventoryInfo } from 'brainerce';
 import { cn } from '@/lib/utils';
 
@@ -11,24 +10,44 @@ interface StockBadgeProps {
 }
 
 export function StockBadge({ inventory, lowStockThreshold = 5, className }: StockBadgeProps) {
-  const status = getStockStatus(inventory, { lowStockThreshold });
-
-  const colorClasses =
-    status === 'Out of Stock' || status === 'Unavailable'
-      ? 'bg-red-100 text-red-800'
-      : status === 'Low Stock'
-        ? 'bg-yellow-100 text-yellow-800'
-        : 'bg-green-100 text-green-800';
+  const label = getStockLabel(inventory, lowStockThreshold);
+  const color = getStockColor(inventory, lowStockThreshold);
 
   return (
     <span
       className={cn(
         'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium',
-        colorClasses,
+        color,
         className
       )}
     >
-      {status}
+      {label}
     </span>
   );
 }
+
+function getStockLabel(inventory: InventoryInfo | null | undefined, lowStockThreshold: number): string {
+  if (!inventory) return 'Out of Stock';
+
+  const { trackingMode, inStock, available } = inventory;
+
+  if (trackingMode === 'DISABLED') return 'Unavailable';
+  if (!inStock) return 'Out of Stock';
+  if (trackingMode === 'UNLIMITED') return 'In Stock';
+
+  // TRACKED — show actual quantity
+  if (available <= lowStockThreshold) {
+    return `Only ${available} left`;
+  }
+  return `${available} in stock`;
+}
+
+function getStockColor(inventory: InventoryInfo | null | undefined, lowStockThreshold: number): string {
+  if (!inventory) return 'bg-red-100 text-red-800';
+
+  const { trackingMode, inStock, available } = inventory;
+
+  if (trackingMode === 'DISABLED' || !inStock) return 'bg-red-100 text-red-800';
+  if (trackingMode === 'TRACKED' && available <= lowStockThreshold) return 'bg-yellow-100 text-yellow-800';
+  return 'bg-green-100 text-green-800';
+}