create-brainerce-store 1.85.0 → 1.86.0

package/templates/nextjs/base/src/app/icon.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32">
+  <rect width="32" height="32" rx="7" fill="#71717a" />
+  <path
+    d="M11 13V10.5a5 5 0 0 1 10 0V13M8.5 13h15l-1.1 12.1a2 2 0 0 1-2 1.9h-8.8a2 2 0 0 1-2-1.9L8.5 13Z"
+    fill="none"
+    stroke="#fafafa"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>

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

@@ -29,7 +29,7 @@ const FINANCIAL_STATUS_COLOR: Record<string, string> = {
 
 export function OrderPaymentBlock({ order, className }: OrderPaymentBlockProps) {
   const t = useTranslations('account');
-  if (!order.paymentMethod && !order.financialStatus) return null;
+  if (!order.paymentMethod && !order.financialStatus && !order.invoiceUrl) return null;
 
   const statusKey = order.financialStatus ? FINANCIAL_STATUS_KEY[order.financialStatus] : null;
   const statusLabel = statusKey ? t(statusKey) : order.financialStatus || '';
@@ -38,7 +38,7 @@ export function OrderPaymentBlock({ order, className }: OrderPaymentBlockProps)
     : '';
 
   return (
-    <div className={cn('border-border flex items-center gap-3 border-t pt-2 text-xs', className)}>
+    <div className={cn('border-border flex flex-wrap items-center gap-3 border-t pt-2 text-xs', className)}>
       <p className="text-foreground text-sm font-medium">{t('paymentMethod')}</p>
       {order.paymentMethod && (
         <span className="text-foreground capitalize">{order.paymentMethod.replace(/_/g, ' ')}</span>
@@ -53,6 +53,21 @@ export function OrderPaymentBlock({ order, className }: OrderPaymentBlockProps)
           {statusLabel}
         </span>
       )}
+      {/* `invoiceUrl` is null until the connected payment provider (e.g.
+          Cardcom) generates the document, and stays null when the store has
+          no invoicing-capable provider connected — render nothing then,
+          never a broken link or a retry loop. */}
+      {order.invoiceUrl && (
+        <a
+          href={order.invoiceUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-primary text-sm font-medium hover:underline"
+        >
+          {t('downloadInvoice')}
+          {order.invoiceNumber ? ` (#${order.invoiceNumber})` : ''}
+        </a>
+      )}
     </div>
   );
 }

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

@@ -100,7 +100,14 @@ export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
   // is only a fallback for providers that duplicate it there. Reading
   // clientSecret alone breaks providers that return a real identifier (MAX,
   // Takbull) — the iframe/link silently points at an id instead of a page.
+  //
+  // Every allowlist check and embed-detection below must read THIS value, not
+  // `paymentIntent.clientSecret` directly — that was the bug: two checks kept
+  // reading clientSecret straight off the intent after this fallback was
+  // introduced, so a MAX/Takbull-style provider failed `new URL()` on a bare
+  // id and the payment step silently rendered nothing.
   const paymentIntentUrl = paymentIntent?.clientSdk?.renderArg || paymentIntent?.clientSecret || '';
+  const isBrainerceEmbed = isBrainerceEmbedUrl(paymentIntentUrl);
   const [preloadedSdk, setPreloadedSdk] = useState<PaymentClientSdk | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -110,6 +117,11 @@ export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
   // from a provider's hosted page — used to narrow the modal + auto-size the
   // iframe instead of reserving the tall LowProfile footprint.
   const [embeddedIframeHeight, setEmbeddedIframeHeight] = useState<number | null>(null);
+  // Set when the inline embed never posts its first `brainerce:resize` within
+  // the timeout below — e.g. the parent's CSP blocks the iframe from framing
+  // at all. Without this the shopper stares at a permanently blank/broken box
+  // with no error and no way forward.
+  const [iframeLoadFailed, setIframeLoadFailed] = useState(false);
   // Provider-hosted iframe modal, closed by the shopper. Without this the
   // modal had no closed state at all: the X did a full navigation to
   // `?canceled=true`, the page resumed on the payment step, a fresh intent
@@ -130,7 +142,7 @@ export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
     !modalDismissed &&
     !!paymentIntent &&
     resolveClientSdk(paymentIntent, preloadedSdk).renderType === 'iframe' &&
-    !isBrainerceEmbedUrl(paymentIntent.clientSecret);
+    !isBrainerceEmbed;
 
   // Back closes the modal instead of leaving the shopper inside it. Opening
   // pushes one history entry tagged as ours; popping it (Back, or the X below
@@ -577,6 +589,26 @@ export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
     return () => cleanups.forEach((fn) => fn());
   }, [checkoutId]);
 
+  // Brainerce-hosted embed pages announce themselves immediately via the
+  // `brainerce:resize` postMessage handled above (it sets
+  // `embeddedIframeHeight`). If that never arrives — most commonly the
+  // parent origin isn't in the embed page's `frame-ancestors` allowlist and
+  // the browser refuses to frame it at all — there is otherwise no signal:
+  // cross-origin framing failures are invisible to the parent window, so the
+  // shopper is left staring at a blank box forever with no error and no way
+  // forward.
+  useEffect(() => {
+    if (!isBrainerceEmbed || !paymentIntentUrl) return;
+    setIframeLoadFailed(false);
+    const timer = setTimeout(() => {
+      setEmbeddedIframeHeight((h) => {
+        if (h === null) setIframeLoadFailed(true);
+        return h;
+      });
+    }, 10000);
+    return () => clearTimeout(timer);
+  }, [isBrainerceEmbed, paymentIntentUrl]);
+
   // --- UI ---
 
   // Invalid checkout id — render the error box instead of ever spinning.
@@ -694,16 +726,31 @@ export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
   }
 
   if (sdk.renderType === 'iframe') {
-    if (!isAllowedPaymentUrl(paymentIntent.clientSecret)) return null;
+    if (!isAllowedPaymentUrl(paymentIntentUrl)) return null;
 
     // Detect Brainerce-hosted embed (path-based — works across localhost/
     // staging/prod without a domain list) vs. a provider-hosted page. The
     // embed page is already brand-styled and compact → render inline in the
     // checkout flow. Provider-hosted pages carry their own branding/chrome →
     // keep the modal overlay so they don't fight the checkout layout.
-    const isBrainerceEmbed = isBrainerceEmbedUrl(paymentIntent.clientSecret);
-
     if (isBrainerceEmbed) {
+      if (iframeLoadFailed) {
+        return (
+          <div className={cn('border-border rounded-lg border px-4 py-6 text-center', className)}>
+            <p className="text-foreground text-sm font-medium">{t('paymentError')}</p>
+            <p className="text-muted-foreground mt-1 text-sm">{t('paymentLoadFailed')}</p>
+            <a
+              href={paymentIntentUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="bg-primary text-primary-foreground mt-4 inline-flex items-center rounded px-6 py-3 text-sm font-medium transition-opacity hover:opacity-90"
+            >
+              {t('openPaymentModal')}
+            </a>
+          </div>
+        );
+      }
+
       // Inline: default to a reasonable height until the embed posts its real
       // height via `brainerce:resize`. Transition smooths the resize into the
       // final measurement.

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

@@ -1,5 +1,5 @@
 import type { Cart, Order, Product, ProductVariant, TrackingEventItem } from 'brainerce';
-import { getCartTotals } from 'brainerce';
+import { getCartTotals, buildGa4CommercePayload } from 'brainerce';
 
 import { getClient } from './brainerce';
 
@@ -16,12 +16,14 @@ import { getClient } from './brainerce';
  *
  * ## Item ids
  *
- * `itemId` is always the **SKU**. That is the id Brainerce publishes to the
- * Google Merchant Center and Meta catalog feeds, so it is the only id the ad
- * platforms can match a pixel event against. Sending a product or variant id
- * instead breaks attribution and dynamic remarketing silently — the events
- * arrive, the platform reports an id its catalog has never seen, and the
- * remarketing audience never builds.
+ * `itemId` is the SKU-preferring id Meta/TikTok pixels match against (Meta
+ * deliberately uses the bare internal id instead, since SKU is nullable
+ * there — see `apps/meta-connector/src/lib/mappers.ts`). For GA4/GTM, the SDK
+ * builds a SEPARATE id from `productId`/`variantId` (`prod_<id>`/`var_<id>`)
+ * matching the Google Merchant Center feed's `offerId` — neither SKU nor a
+ * bare unprefixed id matches that feed, which silently breaks Shopping ads /
+ * dynamic remarketing item matching. Always pass `productId`/`variantId`
+ * alongside `itemId` so both platforms attribute correctly.
  */
 
 /** Parse a Brainerce decimal string (`"29.99"`) into a number. */
@@ -54,6 +56,8 @@ export function trackProductView(
     items: [
       {
         itemId: resolveItemId(product, variant),
+        productId: product.id,
+        variantId: variant?.id,
         itemName: product.name,
         price,
         quantity: 1,
@@ -77,6 +81,8 @@ export function trackAddToCart(
     items: [
       {
         itemId: resolveItemId(product, variant),
+        productId: product.id,
+        variantId: variant?.id,
         itemName: product.name,
         price,
         quantity,
@@ -92,6 +98,8 @@ function cartItems(cart: Cart): TrackingEventItem[] {
     // The cart line carries product + variant snapshots; prefer the variant's
     // SKU for the same catalog-parity reason as `resolveItemId`.
     itemId: item.variant?.sku || item.product?.sku || item.variantId || item.productId,
+    productId: item.productId,
+    variantId: item.variantId ?? undefined,
     itemName: item.product?.name,
     price: toNumber(item.currentUnitPrice ?? item.unitPrice),
     quantity: item.quantity,
@@ -151,18 +159,21 @@ export function trackPurchase(order: Order): void {
     // vendor-side transaction id de-dupe rather than skipping the conversion.
   }
 
+  // GA4 spec: `value` is net item revenue only — `tax`/`shipping` are
+  // reported alongside it, never folded in. See `buildGa4CommercePayload`.
+  const commerce = buildGa4CommercePayload(order);
+
   getClient().trackMarketingEvent('purchase', {
     transactionId: order.id,
-    currency: order.currency,
-    value: toNumber(order.total ?? order.totalAmount),
-    shipping: toNumber(order.shippingAmount),
-    // In inclusive (VAT) pricing `taxAmount` is "0" and the real VAT lives in
-    // the frozen breakdown — reporting the 0 would understate tax on every
-    // order for every VAT-region merchant.
-    tax: toNumber(order.taxBreakdown?.totalTax) ?? toNumber(order.taxAmount),
+    currency: commerce.currency,
+    value: commerce.value,
+    shipping: commerce.shipping,
+    tax: commerce.tax,
     coupon: order.couponCode ?? undefined,
     items: (order.items ?? []).map((item) => ({
       itemId: item.sku || item.variantId || item.productId,
+      productId: item.productId,
+      variantId: item.variantId,
       itemName: item.name,
       price: toNumber(item.price),
       quantity: item.quantity,

package/templates/nextjs/base/src/ui/product/price-display.tsx

@@ -1,62 +1,85 @@
-'use client';
-
-import { formatPrice } from 'brainerce';
-import { Badge } from '@/components/ui/badge';
-import { useCurrency } from '@/core/lib/use-currency';
-import { cn } from '@/core/lib/utils';
-
-interface PriceDisplayProps {
-  price: string | number;
-  salePrice?: string | number | null;
-  currency?: string;
-  className?: string;
-  size?: 'sm' | 'md' | 'lg';
-}
-
-const sizeClasses = {
-  sm: 'text-sm',
-  md: 'text-base',
-  lg: 'text-xl font-semibold',
-};
-
-export function PriceDisplay({
-  price,
-  salePrice,
-  currency,
-  className,
-  size = 'md',
-}: PriceDisplayProps) {
-  const currencyCode = useCurrency(currency);
-
-  const basePrice = typeof price === 'string' ? parseFloat(price) : price;
-  const sale =
-    salePrice != null ? (typeof salePrice === 'string' ? parseFloat(salePrice) : salePrice) : null;
-  const isOnSale = sale !== null && sale < basePrice;
-
-  const discountPercent =
-    isOnSale && basePrice > 0 ? Math.round(((basePrice - sale!) / basePrice) * 100) : 0;
-
-  return (
-    <span className={cn('inline-flex items-center gap-2', sizeClasses[size], className)}>
-      {isOnSale ? (
-        <>
-          <span className="text-destructive font-medium">
-            {formatPrice(sale!, { currency: currencyCode }) as string}
-          </span>
-          <span className="text-muted-foreground text-[0.85em] line-through">
-            {formatPrice(basePrice, { currency: currencyCode }) as string}
-          </span>
-          {discountPercent > 0 && (
-            <Badge variant="destructive" className="rounded px-1.5 py-0.5 font-medium">
-              -{discountPercent}%
-            </Badge>
-          )}
-        </>
-      ) : (
-        <span className="text-foreground font-medium">
-          {formatPrice(basePrice, { currency: currencyCode }) as string}
-        </span>
-      )}
-    </span>
-  );
-}
+'use client';
+
+import { formatPrice } from 'brainerce';
+import { Badge } from '@/components/ui/badge';
+import { useCurrency } from '@/core/lib/use-currency';
+import { useTranslations } from '@/core/lib/translations';
+import { useStoreInfo } from '@/core/providers/store-provider';
+import { cn } from '@/core/lib/utils';
+
+interface PriceDisplayProps {
+  price: string | number;
+  salePrice?: string | number | null;
+  currency?: string;
+  className?: string;
+  size?: 'sm' | 'md' | 'lg';
+}
+
+const sizeClasses = {
+  sm: 'text-sm',
+  md: 'text-base',
+  lg: 'text-xl font-semibold',
+};
+
+export function PriceDisplay({
+  price,
+  salePrice,
+  currency,
+  className,
+  size = 'md',
+}: PriceDisplayProps) {
+  const currencyCode = useCurrency(currency);
+  const { storeInfo } = useStoreInfo();
+  const t = useTranslations('common');
+
+  const basePrice = typeof price === 'string' ? parseFloat(price) : price;
+  const sale =
+    salePrice != null ? (typeof salePrice === 'string' ? parseFloat(salePrice) : salePrice) : null;
+  const isOnSale = sale !== null && sale < basePrice;
+
+  const discountPercent =
+    isOnSale && basePrice > 0 ? Math.round(((basePrice - sale!) / basePrice) * 100) : 0;
+
+  // FX overlay disclosure (see core/lib/display-price.ts): `currency` is the
+  // region-converted DISPLAY currency when it differs from the store's own
+  // base currency. The shopper is still charged in the base currency at
+  // checkout, so every converted price needs a visible "estimated" cue —
+  // otherwise nothing on screen explains why the cart/checkout total switches
+  // currency from what was just browsed.
+  const isConverted = !!currency && !!storeInfo?.currency && currency !== storeInfo.currency;
+
+  return (
+    <span className={cn('inline-flex flex-wrap items-center gap-2', sizeClasses[size], className)}>
+      {isOnSale ? (
+        <>
+          <span className="text-destructive font-medium">
+            {formatPrice(sale!, { currency: currencyCode }) as string}
+          </span>
+          <span className="text-muted-foreground text-[0.85em] line-through">
+            {formatPrice(basePrice, { currency: currencyCode }) as string}
+          </span>
+          {discountPercent > 0 && (
+            <Badge variant="destructive" className="rounded px-1.5 py-0.5 font-medium">
+              -{discountPercent}%
+            </Badge>
+          )}
+        </>
+      ) : (
+        <span className="text-foreground font-medium">
+          {formatPrice(basePrice, { currency: currencyCode }) as string}
+        </span>
+      )}
+      {isConverted && (
+        <span
+          className="text-muted-foreground cursor-help text-[0.7em] font-normal underline decoration-dotted"
+          title={t('estimatedPriceTooltip', {
+            currency: currencyCode,
+            baseCurrency: storeInfo!.currency,
+          })}
+        >
+          {t('estimatedPrice')}
+        </span>
+      )}
+    </span>
+  );
+}