create-brainerce-store 1.61.0 → 1.63.0

package/templates/nextjs/base/src/core/lib/use-currency.ts

@@ -1,19 +1,19 @@
-'use client';
-
-import { useStoreInfo } from '@/core/providers/store-provider';
-
-/**
- * Single source of truth for "which currency code do I format prices with?"
- * in client components. Collapses the historical three-line fallback chain
- * (`storeInfo?.currency || process.env.NEXT_PUBLIC_STORE_CURRENCY || 'USD'`)
- * into one call so the chain lives in exactly one place — and so the day
- * we drop the env var or the USD last-resort, we only touch this file.
- *
- * @param override pass when the caller already has a specific currency
- *                 (e.g. an `Order` is denominated in its own currency,
- *                 not the live store currency). Wins over `storeInfo`.
- */
-export function useCurrency(override?: string | null): string {
-  const { storeInfo } = useStoreInfo();
-  return override || storeInfo?.currency || process.env.NEXT_PUBLIC_STORE_CURRENCY || 'USD';
-}
+'use client';
+
+import { useStoreInfo } from '@/core/providers/store-provider';
+
+/**
+ * Single source of truth for "which currency code do I format prices with?"
+ * in client components. Collapses the historical three-line fallback chain
+ * (`storeInfo?.currency || process.env.NEXT_PUBLIC_STORE_CURRENCY || 'USD'`)
+ * into one call so the chain lives in exactly one place — and so the day
+ * we drop the env var or the USD last-resort, we only touch this file.
+ *
+ * @param override pass when the caller already has a specific currency
+ *                 (e.g. an `Order` is denominated in its own currency,
+ *                 not the live store currency). Wins over `storeInfo`.
+ */
+export function useCurrency(override?: string | null): string {
+  const { storeInfo } = useStoreInfo();
+  return override || storeInfo?.currency || process.env.NEXT_PUBLIC_STORE_CURRENCY || 'USD';
+}

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

@@ -1,21 +1,21 @@
-import { clsx, type ClassValue } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
-
-/**
- * Normalize a Next.js dynamic-route param into its decoded human-readable
- * form. App Router usually decodes params automatically, but some runtime
- * + middleware combinations leak percent-encoded values for non-ASCII
- * slugs (e.g. Hebrew `%D7%A7…`), which then surface in canonical URLs and
- * SEO tags. Idempotent on already-decoded input.
- */
-export function decodeSlug(slug: string): string {
-  try {
-    return decodeURIComponent(slug);
-  } catch {
-    return slug;
-  }
-}
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+/**
+ * Normalize a Next.js dynamic-route param into its decoded human-readable
+ * form. App Router usually decodes params automatically, but some runtime
+ * + middleware combinations leak percent-encoded values for non-ASCII
+ * slugs (e.g. Hebrew `%D7%A7…`), which then surface in canonical URLs and
+ * SEO tags. Idempotent on already-decoded input.
+ */
+export function decodeSlug(slug: string): string {
+  try {
+    return decodeURIComponent(slug);
+  } catch {
+    return slug;
+  }
+}

package/templates/nextjs/base/src/middleware.ts.ejs

@@ -30,6 +30,32 @@ function brainerceApiOrigin(): string {
   }
 }
 
+// Beacon/XHR endpoints for the merchant's marketing tags (GA4, GTM, Meta,
+// TikTok). Only `connect-src` needs them: `script-src` runs with
+// 'strict-dynamic', under which host allowlists are IGNORED and trust
+// propagates from the nonce'd bundle to the tag scripts it injects — so
+// adding hosts there would be dead config. Without these entries the tags
+// load fine and then every hit is blocked, which fails silently: the
+// dashboard shows a connected pixel and the ad platform records nothing.
+//
+// Fixed list, not read from store config: middleware cannot see which apps a
+// merchant connected without a fetch on every request, and these are the same
+// well-known vendor origins for every store.
+const MARKETING_TAG_ORIGINS = [
+  // Google (gtag.js, GTM, GA4 collect, Ads conversion pings)
+  'https://www.googletagmanager.com',
+  'https://www.google-analytics.com',
+  'https://*.google-analytics.com',
+  'https://*.analytics.google.com',
+  'https://stats.g.doubleclick.net',
+  'https://www.google.com',
+  // Meta pixel
+  'https://connect.facebook.net',
+  'https://www.facebook.com',
+  // TikTok pixel
+  'https://analytics.tiktok.com',
+].join(' ');
+
 function buildCsp(nonce: string): string {
   const isDev = process.env.NODE_ENV === 'development';
   // Next dev uses webpack's eval-source-map devtool, which requires 'unsafe-eval'
@@ -44,7 +70,7 @@ function buildCsp(nonce: string): string {
     "img-src 'self' data: blob: https:",
     "font-src 'self' data:",
     "frame-src 'self' https://meshulam.co.il https://*.meshulam.co.il https://grow.link https://*.grow.link https://grow.security https://*.grow.security https://creditguard.co.il https://*.creditguard.co.il https://js.stripe.com https://hooks.stripe.com https://pay.google.com https://secure.cardcom.solutions https://checkout.stripe.com https://www.paypal.com https://www.sandbox.paypal.com https://www.youtube.com https://www.youtube-nocookie.com https://player.vimeo.com https://*.brainerce.com",
-    `connect-src 'self' ${brainerceApiOrigin()} https://api.brainerce.com https://*.meshulam.co.il https://grow.link https://*.grow.link https://*.grow.security https://pay.google.com https://*.stripe.com https://*.creditguard.co.il`,
+    `connect-src 'self' ${brainerceApiOrigin()} https://api.brainerce.com https://*.meshulam.co.il https://grow.link https://*.grow.link https://*.grow.security https://pay.google.com https://*.stripe.com https://*.creditguard.co.il ${MARKETING_TAG_ORIGINS}`,
     "worker-src 'self' blob:",
     // 'self' (not 'none') so iframe-based payment providers (e.g. Cardcom)
     // can redirect the iframe back to /payment-complete on the storefront
@@ -158,6 +184,32 @@ function brainerceApiOrigin(): string {
   }
 }
 
+// Beacon/XHR endpoints for the merchant's marketing tags (GA4, GTM, Meta,
+// TikTok). Only `connect-src` needs them: `script-src` runs with
+// 'strict-dynamic', under which host allowlists are IGNORED and trust
+// propagates from the nonce'd bundle to the tag scripts it injects — so
+// adding hosts there would be dead config. Without these entries the tags
+// load fine and then every hit is blocked, which fails silently: the
+// dashboard shows a connected pixel and the ad platform records nothing.
+//
+// Fixed list, not read from store config: middleware cannot see which apps a
+// merchant connected without a fetch on every request, and these are the same
+// well-known vendor origins for every store.
+const MARKETING_TAG_ORIGINS = [
+  // Google (gtag.js, GTM, GA4 collect, Ads conversion pings)
+  'https://www.googletagmanager.com',
+  'https://www.google-analytics.com',
+  'https://*.google-analytics.com',
+  'https://*.analytics.google.com',
+  'https://stats.g.doubleclick.net',
+  'https://www.google.com',
+  // Meta pixel
+  'https://connect.facebook.net',
+  'https://www.facebook.com',
+  // TikTok pixel
+  'https://analytics.tiktok.com',
+].join(' ');
+
 function buildCsp(nonce: string): string {
   const isDev = process.env.NODE_ENV === 'development';
   // Next dev uses webpack's eval-source-map devtool, which requires 'unsafe-eval'
@@ -172,7 +224,7 @@ function buildCsp(nonce: string): string {
     "img-src 'self' data: blob: https:",
     "font-src 'self' data:",
     "frame-src 'self' https://meshulam.co.il https://*.meshulam.co.il https://grow.link https://*.grow.link https://grow.security https://*.grow.security https://creditguard.co.il https://*.creditguard.co.il https://js.stripe.com https://hooks.stripe.com https://pay.google.com https://secure.cardcom.solutions https://checkout.stripe.com https://www.paypal.com https://www.sandbox.paypal.com https://www.youtube.com https://www.youtube-nocookie.com https://player.vimeo.com https://*.brainerce.com",
-    `connect-src 'self' ${brainerceApiOrigin()} https://api.brainerce.com https://*.meshulam.co.il https://grow.link https://*.grow.link https://*.grow.security https://pay.google.com https://*.stripe.com https://*.creditguard.co.il`,
+    `connect-src 'self' ${brainerceApiOrigin()} https://api.brainerce.com https://*.meshulam.co.il https://grow.link https://*.grow.link https://*.grow.security https://pay.google.com https://*.stripe.com https://*.creditguard.co.il ${MARKETING_TAG_ORIGINS}`,
     "worker-src 'self' blob:",
     // 'self' (not 'none') so iframe-based payment providers (e.g. Cardcom)
     // can redirect the iframe back to /payment-complete on the storefront

package/templates/nextjs/base/src/ui/cart/cart-bundle-offer.tsx

@@ -1,117 +1,117 @@
-'use client';
-
-import { useState } from 'react';
-import { CdnImage as Image } from '@/ui/shared/cdn-image';
-import type { CartBundleOffer as CartBundleOfferType } from 'brainerce';
-import { formatPrice } from 'brainerce';
-import { useCurrency } from '@/core/lib/use-currency';
-import { useTranslations } from '@/core/lib/translations';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { Card } from '@/components/ui/card';
-import { Separator } from '@/components/ui/separator';
-import { cn } from '@/core/lib/utils';
-
-interface CartBundleOfferCardProps {
-  offer: CartBundleOfferType;
-  cartId: string;
-  onAdd: () => void;
-  className?: string;
-}
-
-export function CartBundleOfferCard({ offer, cartId, onAdd, className }: CartBundleOfferCardProps) {
-  const t = useTranslations('cart');
-  const currency = useCurrency();
-  const [adding, setAdding] = useState(false);
-
-  const offered = offer.offeredProducts;
-
-  const totalOriginal = parseFloat(offer.totalOriginalPrice);
-  const totalDiscounted = parseFloat(offer.totalDiscountedPrice);
-  const discountLabel =
-    offer.discountType === 'PERCENTAGE'
-      ? `${offer.discountValue}%`
-      : (formatPrice(parseFloat(offer.discountValue), { currency }) as string);
-
-  async function handleAdd() {
-    if (adding) return;
-    try {
-      setAdding(true);
-      const { getClient } = await import('@/core/lib/brainerce');
-      const client = getClient();
-      // No variant selections in the default template — products with
-      // variants are best handled with a dedicated picker per offered item.
-      await client.addBundleToCart(cartId, offer.id);
-      onAdd();
-    } catch (err) {
-      console.error('Failed to add bundle:', err);
-    } finally {
-      setAdding(false);
-    }
-  }
-
-  return (
-    <Card className={cn('p-4 shadow-none', className)}>
-      <div className="mb-3">
-        <p className="text-foreground text-sm font-medium">{offer.name}</p>
-        {offer.description && (
-          <p className="text-muted-foreground mt-0.5 text-xs">{offer.description}</p>
-        )}
-      </div>
-
-      <ul className="space-y-2">
-        {offered.map((p) => {
-          const firstImage = p.images?.[0];
-          const imageUrl = firstImage?.url ?? null;
-          return (
-            <li key={p.id} className="flex items-center gap-3">
-              <div className="bg-muted relative h-12 w-12 flex-shrink-0 overflow-hidden rounded">
-                {imageUrl ? (
-                  <Image src={imageUrl} alt={p.name} fill sizes="48px" className="object-cover" />
-                ) : null}
-              </div>
-              <div className="min-w-0 flex-1">
-                <p className="text-foreground truncate text-sm">{p.name}</p>
-                <div className="mt-0.5 flex items-center gap-2">
-                  <span className="text-muted-foreground text-xs line-through">
-                    {formatPrice(parseFloat(p.originalPrice), { currency }) as string}
-                  </span>
-                  <span className="text-foreground text-xs font-semibold">
-                    {formatPrice(parseFloat(p.discountedPrice), { currency }) as string}
-                  </span>
-                </div>
-              </div>
-            </li>
-          );
-        })}
-      </ul>
-
-      <Separator className="mt-3" />
-      <div className="flex items-center justify-between pt-3">
-        <div className="flex items-center gap-2">
-          <span className="text-muted-foreground text-sm line-through">
-            {formatPrice(totalOriginal, { currency }) as string}
-          </span>
-          <span className="text-foreground text-sm font-semibold">
-            {formatPrice(totalDiscounted, { currency }) as string}
-          </span>
-          <Badge
-            variant="outline"
-            className="bg-destructive/10 text-destructive rounded border-transparent px-1.5 py-0.5 font-medium"
-          >
-            -{discountLabel}
-          </Badge>
-        </div>
-        <Button
-          type="button"
-          size="sm"
-          onClick={handleAdd}
-          disabled={adding}
-          className="h-auto flex-shrink-0 rounded px-4 py-2 text-xs"
-        >
-          {adding ? t('addingBundle') : t('addBundleItem')}
-        </Button>
-      </div>
-    </Card>
-  );
-}
+'use client';
+
+import { useState } from 'react';
+import { CdnImage as Image } from '@/ui/shared/cdn-image';
+import type { CartBundleOffer as CartBundleOfferType } from 'brainerce';
+import { formatPrice } from 'brainerce';
+import { useCurrency } from '@/core/lib/use-currency';
+import { useTranslations } from '@/core/lib/translations';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card } from '@/components/ui/card';
+import { Separator } from '@/components/ui/separator';
+import { cn } from '@/core/lib/utils';
+
+interface CartBundleOfferCardProps {
+  offer: CartBundleOfferType;
+  cartId: string;
+  onAdd: () => void;
+  className?: string;
+}
+
+export function CartBundleOfferCard({ offer, cartId, onAdd, className }: CartBundleOfferCardProps) {
+  const t = useTranslations('cart');
+  const currency = useCurrency();
+  const [adding, setAdding] = useState(false);
+
+  const offered = offer.offeredProducts;
+
+  const totalOriginal = parseFloat(offer.totalOriginalPrice);
+  const totalDiscounted = parseFloat(offer.totalDiscountedPrice);
+  const discountLabel =
+    offer.discountType === 'PERCENTAGE'
+      ? `${offer.discountValue}%`
+      : (formatPrice(parseFloat(offer.discountValue), { currency }) as string);
+
+  async function handleAdd() {
+    if (adding) return;
+    try {
+      setAdding(true);
+      const { getClient } = await import('@/core/lib/brainerce');
+      const client = getClient();
+      // No variant selections in the default template — products with
+      // variants are best handled with a dedicated picker per offered item.
+      await client.addBundleToCart(cartId, offer.id);
+      onAdd();
+    } catch (err) {
+      console.error('Failed to add bundle:', err);
+    } finally {
+      setAdding(false);
+    }
+  }
+
+  return (
+    <Card className={cn('p-4 shadow-none', className)}>
+      <div className="mb-3">
+        <p className="text-foreground text-sm font-medium">{offer.name}</p>
+        {offer.description && (
+          <p className="text-muted-foreground mt-0.5 text-xs">{offer.description}</p>
+        )}
+      </div>
+
+      <ul className="space-y-2">
+        {offered.map((p) => {
+          const firstImage = p.images?.[0];
+          const imageUrl = firstImage?.url ?? null;
+          return (
+            <li key={p.id} className="flex items-center gap-3">
+              <div className="bg-muted relative h-12 w-12 flex-shrink-0 overflow-hidden rounded">
+                {imageUrl ? (
+                  <Image src={imageUrl} alt={p.name} fill sizes="48px" className="object-cover" />
+                ) : null}
+              </div>
+              <div className="min-w-0 flex-1">
+                <p className="text-foreground truncate text-sm">{p.name}</p>
+                <div className="mt-0.5 flex items-center gap-2">
+                  <span className="text-muted-foreground text-xs line-through">
+                    {formatPrice(parseFloat(p.originalPrice), { currency }) as string}
+                  </span>
+                  <span className="text-foreground text-xs font-semibold">
+                    {formatPrice(parseFloat(p.discountedPrice), { currency }) as string}
+                  </span>
+                </div>
+              </div>
+            </li>
+          );
+        })}
+      </ul>
+
+      <Separator className="mt-3" />
+      <div className="flex items-center justify-between pt-3">
+        <div className="flex items-center gap-2">
+          <span className="text-muted-foreground text-sm line-through">
+            {formatPrice(totalOriginal, { currency }) as string}
+          </span>
+          <span className="text-foreground text-sm font-semibold">
+            {formatPrice(totalDiscounted, { currency }) as string}
+          </span>
+          <Badge
+            variant="outline"
+            className="bg-destructive/10 text-destructive rounded border-transparent px-1.5 py-0.5 font-medium"
+          >
+            -{discountLabel}
+          </Badge>
+        </div>
+        <Button
+          type="button"
+          size="sm"
+          onClick={handleAdd}
+          disabled={adding}
+          className="h-auto flex-shrink-0 rounded px-4 py-2 text-xs"
+        >
+          {adding ? t('addingBundle') : t('addBundleItem')}
+        </Button>
+      </div>
+    </Card>
+  );
+}