create-brainerce-store 1.86.1 → 1.87.0

package/dist/index.js

@@ -31,7 +31,7 @@ var require_package = __commonJS({
   "package.json"(exports2, module2) {
     module2.exports = {
       name: "create-brainerce-store",
-      version: "1.86.1",
+      version: "1.87.0",
       description: "Scaffold a production-ready e-commerce storefront connected to Brainerce",
       homepage: "https://brainerce.com",
       repository: {

package/messages/en.json

@@ -610,7 +610,11 @@
     "notEnoughPoints": "Not enough points",
     "yourCode": "Your code",
     "applyAtCheckout": "Enter it at checkout to get the discount.",
-    "redeemError": "We could not redeem that. Please try again."
+    "redeemError": "We could not redeem that. Please try again.",
+    "referralSectionTitle": "Invite friends",
+    "referralShareHint": "Share your link. When a friend's first order goes through, you earn points.",
+    "referralCopyLink": "Copy link",
+    "referralLinkCopied": "Copied!"
   },
   "content": {
     "faqTitle": "Frequently Asked Questions",

package/messages/he.json

@@ -610,7 +610,11 @@
     "notEnoughPoints": "אין מספיק נקודות",
     "yourCode": "הקוד שלך",
     "applyAtCheckout": "הזינו אותו בצ׳קאאוט כדי לקבל את ההנחה.",
-    "redeemError": "לא הצלחנו לממש. נסו שוב."
+    "redeemError": "לא הצלחנו לממש. נסו שוב.",
+    "referralSectionTitle": "הזמינו חברים",
+    "referralShareHint": "שתפו את הקישור שלכם. כשההזמנה הראשונה של חבר תושלם, תצברו נקודות.",
+    "referralCopyLink": "העתקת קישור",
+    "referralLinkCopied": "הועתק!"
   },
   "content": {
     "faqTitle": "שאלות נפוצות",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-brainerce-store",
-  "version": "1.86.1",
+  "version": "1.87.0",
   "description": "Scaffold a production-ready e-commerce storefront connected to Brainerce",
   "homepage": "https://brainerce.com",
   "repository": {

package/templates/nextjs/base/src/app/api/store/[...path]/route.ts

@@ -38,6 +38,43 @@ function isSecure(): boolean {
   return process.env.NODE_ENV === 'production';
 }
 
+/**
+ * Reads a fetch `Response` body as text, self-healing an observed runtime bug:
+ * on Next.js 15.5.26, a `fetch()` made from a Route Handler or Server
+ * Component can return a Response whose body is still gzip-compressed bytes,
+ * even though an identical request (same URL, same headers) made via plain
+ * Node `fetch()` outside Next decompresses correctly — confirmed by diffing
+ * the raw response bytes both ways. The exact point inside Next's
+ * server-side fetch instrumentation that causes this isn't confirmed, only
+ * the externally observable symptom is. Calling `.text()` on a Response like
+ * that UTF-8-decodes still-gzipped bytes — lossy (replacement characters)
+ * and unparseable as JSON.
+ *
+ * A correctly-behaving fetch (browsers; plain Node; this bug's absence) never
+ * hands back bytes that still start with gzip's magic number (`1f 8b`) — real
+ * compression has already been undone by the time a body reaches here — so
+ * checking for it before ever decoding as text can't misfire into
+ * double-decompressing an already-plain body.
+ *
+ * This only works because the backend request below pins `Accept-Encoding:
+ * gzip` instead of the runtime default (which also offers Brotli) — Brotli
+ * has no reliable magic-number signature and no Web Streams API decoder, so
+ * this self-healing has no fallback for it. That header is
+ * correctness-critical here, not a tuning choice: reverting it to the
+ * runtime default reintroduces this exact corruption, just for
+ * Brotli-compressed responses instead of gzip ones.
+ */
+async function readBackendBody(response: Response): Promise<string> {
+  const buffer = new Uint8Array(await response.arrayBuffer());
+  if (buffer.length >= 2 && buffer[0] === 0x1f && buffer[1] === 0x8b) {
+    const decompressed = new Blob([buffer])
+      .stream()
+      .pipeThrough(new DecompressionStream('gzip'));
+    return new TextDecoder('utf-8').decode(await new Response(decompressed).arrayBuffer());
+  }
+  return new TextDecoder('utf-8').decode(buffer);
+}
+
 function setAuthCookies(response: NextResponse, token: string): void {
   response.cookies.set(TOKEN_COOKIE, token, {
     httpOnly: true,
@@ -93,6 +130,10 @@ async function proxyRequest(
   const incomingContentType = request.headers.get('content-type');
   const headers: Record<string, string> = {
     'Content-Type': incomingContentType || 'application/json',
+    // Pinned to gzip (not the runtime default `gzip, deflate, br`) so
+    // readBackendBody()'s self-healing only has to reason about one wire
+    // format — see the comment there.
+    'Accept-Encoding': 'gzip',
   };
 
   // Send the proxy's own origin, never the client-supplied Origin header —
@@ -166,7 +207,7 @@ async function proxyRequest(
   }
 
   // Read response body
-  const responseText = await backendResponse.text();
+  const responseText = await readBackendBody(backendResponse);
 
   // For auth endpoints: intercept token, set cookie, strip token from response
   if (backendResponse.ok && method === 'POST' && isAuthEndpoint(pathSegments)) {

package/templates/nextjs/base/src/app/order-confirmation/layout.tsx

@@ -2,6 +2,14 @@ import type { Metadata } from 'next';
 
 export const metadata: Metadata = {
   robots: { index: false, follow: false },
+  // Static, server-rendered marker for Brainerce's Google Customer Reviews
+  // readiness check (Apps → Google → Readiness tab): it fetches this route
+  // with a plain HTTP GET, no JS execution, so the signal that the survey
+  // component is wired up has to live in server-rendered HTML, not in
+  // anything the client component below renders after mount. Keep this in
+  // place whenever `<GoogleCustomerReviewsOptIn />` is used on this route —
+  // removing one without the other makes the readiness check lie.
+  other: { 'brainerce-google-customer-reviews': '1' },
 };
 
 export default function Layout({ children }: { children: React.ReactNode }) {

package/templates/nextjs/base/src/app/order-confirmation/page.tsx

@@ -13,6 +13,7 @@ import { OrderCustomizations } from '@/components/account/order-customizations';
 import { LoadingSpinner } from '@/ui/shared/loading-spinner';
 import { useTranslations } from '@/core/lib/translations';
 import { trackPurchase } from '@/core/lib/tracking';
+import { GoogleCustomerReviewsOptIn } from '@/components/google-customer-reviews-optin';
 
 function OrderConfirmationContent() {
   const searchParams = useSearchParams();
@@ -203,6 +204,11 @@ function OrderConfirmationContent() {
           <ConfirmationDownloads orderId={result.status.orderId} checkoutId={checkoutId!} />
         )}
 
+        {/* Renders no visible markup. Self-gates entirely on whether the
+            merchant enabled Google Customer Reviews and this order has the
+            data the survey needs — see the component's own doc comment. */}
+        <GoogleCustomerReviewsOptIn checkoutId={checkoutId!} />
+
         <div className="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">
           <Link
             href="/products"

package/templates/nextjs/base/src/components/account/loyalty-panel.tsx

@@ -87,6 +87,7 @@ export function LoyaltyPanel({ className }: LoyaltyPanelProps) {
   const [redeemingId, setRedeemingId] = useState<string | null>(null);
   const [redeemed, setRedeemed] = useState<RedeemedCoupon | null>(null);
   const [error, setError] = useState<string | null>(null);
+  const [linkCopied, setLinkCopied] = useState(false);
 
   useEffect(() => {
     let cancelled = false;
@@ -144,6 +145,18 @@ export function LoyaltyPanel({ className }: LoyaltyPanelProps) {
   const earningPaused = status.program.status !== 'ACTIVE';
   const tierLevel = status.tier?.level ?? 0;
 
+  async function copyReferralLink(code: string) {
+    const link = `${window.location.origin}/?ref=${code}`;
+    try {
+      await navigator.clipboard.writeText(link);
+      setLinkCopied(true);
+      setTimeout(() => setLinkCopied(false), 2000);
+    } catch {
+      // Clipboard access denied (permissions, insecure context) — the code is
+      // still visible on screen for the shopper to select and copy by hand.
+    }
+  }
+
   async function redeem(reward: LoyaltyReward) {
     setRedeemingId(reward.id);
     setError(null);
@@ -229,6 +242,30 @@ export function LoyaltyPanel({ className }: LoyaltyPanelProps) {
         </div>
       )}
 
+      {/* Referral share code. Null when the store has referrals disabled or
+          this customer isn't enrolled yet — absent entirely rather than an
+          empty block, same pattern as the tier/rewards sections above. */}
+      {status.referralCode && (
+        <div className="border-border mt-6 border-t pt-5">
+          <h3 className="text-foreground mb-1 text-sm font-semibold">
+            {t('referralSectionTitle')}
+          </h3>
+          <p className="text-muted-foreground text-sm">{t('referralShareHint')}</p>
+          <div className="mt-3 flex flex-wrap items-center gap-2">
+            <code className="bg-muted text-foreground rounded px-2 py-1 font-mono text-sm">
+              {status.referralCode}
+            </code>
+            <button
+              type="button"
+              onClick={() => copyReferralLink(status.referralCode as string)}
+              className="border-border rounded border px-3 py-1.5 text-sm font-medium transition-opacity hover:opacity-80"
+            >
+              {linkCopied ? t('referralLinkCopied') : t('referralCopyLink')}
+            </button>
+          </div>
+        </div>
+      )}
+
       {/* Rewards. An empty catalogue is a normal state — the merchant has not
           created any yet — so the list simply does not render. */}
       {rewards.length > 0 && (

package/templates/nextjs/base/src/components/google-customer-reviews-optin.tsx

@@ -0,0 +1,126 @@
+'use client';
+
+import { useEffect } from 'react';
+import { SALES_CHANNEL_ID } from '@/core/lib/brainerce';
+
+/**
+ * Google Customer Reviews — Google's own post-purchase SURVEY opt-in module
+ * feeding the seller rating shown next to a merchant's ads/search listing.
+ * NOT Maps/Business reviews, and NOT Brainerce's own storefront product-
+ * review feature.
+ *
+ * Fetches this store's survey data directly rather than through the
+ * `brainerce` SDK: `create-brainerce-store` only ever imports an SDK version
+ * that has aged 7+ days on npm (see `packages/cli-shared/src/versions.ts`),
+ * so a brand-new SDK method is not importable from a freshly-scaffolded
+ * store yet — same reason `core/lib/tracking.ts` inlines
+ * `buildGa4CommercePayload`'s math instead of importing it. This mirrors the
+ * SDK's own `getOrderByCheckout` request shape exactly: the same
+ * possession-of-`checkoutId` trust model, routed through the same same-
+ * origin BFF proxy (`/api/store`) the rest of this storefront already uses.
+ *
+ * Renders no visible markup. The static `<meta>` marker the Readiness tab's
+ * embed-detection check looks for lives in `../app/order-confirmation/
+ * layout.tsx` instead — that one has to be server-rendered to be visible to
+ * a plain HTTP fetch; nothing this client component does after mount can be.
+ */
+
+interface GoogleCustomerReviewsSurveyData {
+  enabled: boolean;
+  merchantId?: string;
+  orderId?: string;
+  email?: string;
+  deliveryCountry?: string;
+  estimatedDeliveryDate?: string;
+  lang?: string;
+  languageSupported?: boolean;
+}
+
+declare global {
+  interface Window {
+    gapi?: { load: (name: string, cb: () => void) => void; surveyoptin?: { render: (opts: Record<string, string>) => void } };
+    renderOptIn?: () => void;
+    ___gcfg?: { lang?: string };
+  }
+}
+
+// Module-level, not component state: survives this component unmounting and
+// remounting on the SAME checkout id (React Strict Mode's double-invoke,
+// or navigating away and back within one browser session) without opening
+// Google's dialog twice. A full page refresh naturally resets this, which is
+// correct — the whole point is a fresh render for a fresh page load.
+let renderedForCheckoutId: string | null = null;
+
+export function GoogleCustomerReviewsOptIn({ checkoutId }: { checkoutId: string }) {
+  useEffect(() => {
+    if (!checkoutId || renderedForCheckoutId === checkoutId) return;
+
+    let cancelled = false;
+
+    async function run() {
+      try {
+        const res = await fetch(
+          `/api/store/api/vc/${encodeURIComponent(SALES_CHANNEL_ID)}/checkout/${encodeURIComponent(checkoutId)}/google-customer-reviews`
+        );
+        if (!res.ok || cancelled) return;
+        const survey = (await res.json()) as GoogleCustomerReviewsSurveyData;
+        if (!survey?.enabled || cancelled) return;
+        if (
+          !survey.merchantId ||
+          !survey.orderId ||
+          !survey.email ||
+          !survey.deliveryCountry ||
+          !survey.estimatedDeliveryDate
+        ) {
+          // A Google-side or Brainerce-side gap must never break order
+          // confirmation — skip silently rather than call render() with
+          // missing required fields.
+          return;
+        }
+
+        renderedForCheckoutId = checkoutId;
+
+        // Optional language hint MUST be set before platform.js loads.
+        if (survey.languageSupported && survey.lang) {
+          window.___gcfg = { lang: survey.lang };
+        }
+
+        window.renderOptIn = function renderOptIn() {
+          window.gapi?.load('surveyoptin', function surveyOptinReady() {
+            window.gapi?.surveyoptin?.render({
+              merchant_id: survey.merchantId!,
+              order_id: survey.orderId!,
+              email: survey.email!,
+              delivery_country: survey.deliveryCountry!,
+              estimated_delivery_date: survey.estimatedDeliveryDate!,
+            });
+          });
+        };
+
+        // Google's own required embed: a script tag loading platform.js with
+        // onload=renderOptIn. Explicitly NOT delivered through Google Tag
+        // Manager — Google does not support that for this integration.
+        // Created via the DOM API (no nonce) rather than `next/script`,
+        // mirroring how the SDK's own `loadGoogleAnalytics` loads gtag.js:
+        // under this storefront's `script-src 'strict-dynamic'` CSP, a
+        // script inserted by an already-trusted script (this bundle) is
+        // trusted too, regardless of its own attributes.
+        const script = document.createElement('script');
+        script.src = 'https://apis.google.com/js/platform.js?onload=renderOptIn';
+        script.async = true;
+        script.defer = true;
+        document.body.appendChild(script);
+      } catch (err) {
+        // Never break order confirmation over this.
+        console.warn('Google Customer Reviews survey not loaded:', err);
+      }
+    }
+
+    run();
+    return () => {
+      cancelled = true;
+    };
+  }, [checkoutId]);
+
+  return null;
+}

package/templates/nextjs/base/src/core/lib/brainerce.server.ts

@@ -42,6 +42,43 @@ export async function getServerClient(locale?: string): Promise<BrainerceClient>
   return client;
 }
 
+/**
+ * Reads a fetch `Response` body as text, self-healing an observed runtime bug:
+ * on Next.js 15.5.26, a `fetch()` made from a Route Handler or Server
+ * Component can return a Response whose body is still gzip-compressed bytes,
+ * even though an identical request (same URL, same headers) made via plain
+ * Node `fetch()` outside Next decompresses correctly — confirmed by diffing
+ * the raw response bytes both ways. The exact point inside Next's
+ * server-side fetch instrumentation that causes this isn't confirmed, only
+ * the externally observable symptom is. Calling `.text()`/`.json()` on a
+ * Response like that UTF-8-decodes still-gzipped bytes — lossy (replacement
+ * characters) and unparseable as JSON.
+ *
+ * A correctly-behaving fetch (browsers; plain Node; this bug's absence) never
+ * hands back bytes that still start with gzip's magic number (`1f 8b`) — real
+ * compression has already been undone by the time a body reaches here — so
+ * checking for it before ever decoding as text can't misfire into
+ * double-decompressing an already-plain body.
+ *
+ * This only works because the fetch below pins `Accept-Encoding: gzip`
+ * instead of the runtime default (which also offers Brotli) — Brotli has no
+ * reliable magic-number signature and no Web Streams API decoder, so this
+ * self-healing has no fallback for it. That header is correctness-critical
+ * here, not a tuning choice: reverting it to the runtime default reintroduces
+ * this exact corruption, just for Brotli-compressed responses instead of
+ * gzip ones.
+ */
+async function readBackendBody(response: Response): Promise<string> {
+  const buffer = new Uint8Array(await response.arrayBuffer());
+  if (buffer.length >= 2 && buffer[0] === 0x1f && buffer[1] === 0x8b) {
+    const decompressed = new Blob([buffer])
+      .stream()
+      .pipeThrough(new DecompressionStream('gzip'));
+    return new TextDecoder('utf-8').decode(await new Response(decompressed).arrayBuffer());
+  }
+  return new TextDecoder('utf-8').decode(buffer);
+}
+
 /**
  * Server-side cached fetch of store info, used to seed `<StoreProvider>` at
  * SSR so client components don't render with `null` storeInfo and bake the
@@ -69,12 +106,15 @@ export const fetchStoreInfo = cache(async (locale?: string): Promise<PublicStore
     const res = await fetch(url, {
       headers: {
         Origin: siteOrigin,
+        // Pinned to gzip — see readBackendBody() for why.
+        'Accept-Encoding': 'gzip',
         ...(locale ? { 'Accept-Language': locale } : {}),
       },
       next: { revalidate: 60, tags: ['store-info'] },
     });
     if (!res.ok) return null;
-    return pickPublicStoreInfo(await res.json());
+    const text = await readBackendBody(res);
+    return pickPublicStoreInfo(text ? JSON.parse(text) : {});
   } catch {
     return null;
   }

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

@@ -49,6 +49,10 @@ const MARKETING_TAG_ORIGINS = [
   'https://*.analytics.google.com',
   'https://stats.g.doubleclick.net',
   'https://www.google.com',
+  // Google Customer Reviews survey opt-in module (gapi's own bootstrap
+  // requests, loaded from apis.google.com/js/platform.js). Only relevant if
+  // the merchant enabled it in Apps → Google.
+  'https://apis.google.com',
   // Meta pixel
   'https://connect.facebook.net',
   'https://www.facebook.com',
@@ -69,6 +73,13 @@ function buildCsp(nonce: string): string {
     "style-src 'self' 'unsafe-inline' https://cdn.meshulam.co.il",
     "img-src 'self' data: blob: https:",
     "font-src 'self' data:",
+    // ⛔ TODO if you enabled Google Customer Reviews: the survey dialog opens
+    // in an iframe from a Google domain that has NOT been verified against a
+    // live embed here (see the WP4 growth-plan writeup). Open your real
+    // order-confirmation page with the widget enabled, watch DevTools →
+    // Network for the frame request Google makes, and add that exact host
+    // here. Do not guess a broad wildcard; a wrong or missing entry either
+    // silently breaks the survey dialog or over-widens this policy.
     "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 ${MARKETING_TAG_ORIGINS}`,
     "worker-src 'self' blob:",
@@ -203,6 +214,10 @@ const MARKETING_TAG_ORIGINS = [
   'https://*.analytics.google.com',
   'https://stats.g.doubleclick.net',
   'https://www.google.com',
+  // Google Customer Reviews survey opt-in module (gapi's own bootstrap
+  // requests, loaded from apis.google.com/js/platform.js). Only relevant if
+  // the merchant enabled it in Apps → Google.
+  'https://apis.google.com',
   // Meta pixel
   'https://connect.facebook.net',
   'https://www.facebook.com',
@@ -223,6 +238,13 @@ function buildCsp(nonce: string): string {
     "style-src 'self' 'unsafe-inline' https://cdn.meshulam.co.il",
     "img-src 'self' data: blob: https:",
     "font-src 'self' data:",
+    // ⛔ TODO if you enabled Google Customer Reviews: the survey dialog opens
+    // in an iframe from a Google domain that has NOT been verified against a
+    // live embed here (see the WP4 growth-plan writeup). Open your real
+    // order-confirmation page with the widget enabled, watch DevTools →
+    // Network for the frame request Google makes, and add that exact host
+    // here. Do not guess a broad wildcard; a wrong or missing entry either
+    // silently breaks the survey dialog or over-widens this policy.
     "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 ${MARKETING_TAG_ORIGINS}`,
     "worker-src 'self' blob:",