create-brainerce-store 1.62.0 → 1.63.0

package/templates/nextjs/base/src/components/seo/product-json-ld.tsx

@@ -1,179 +1,179 @@
-import type { Product, ShippingSummaryEntry } from 'brainerce';
-import { getProductPriceInfo } from 'brainerce';
-import { getNonce } from '@/core/lib/nonce';
-import { resolveCurrency } from '@/core/lib/resolve-currency';
-import { stripHtmlForSeo } from '@/core/lib/seo';
-
-interface ProductJsonLdProps {
-  product: Product;
-  url: string;
-  currency?: string;
-  /** From `storeInfo.shipping` — real flat-rate/free zones only. Omitted entirely when unset, never fabricated. */
-  shipping?: ShippingSummaryEntry[];
-}
-
-export async function ProductJsonLd({ product, url, currency, shipping }: ProductJsonLdProps) {
-  // Defer to the shared server helper so the env-var + USD fallback chain
-  // lives in exactly one place across all server-side currency reads.
-  const resolvedCurrency = resolveCurrency(null, currency);
-  const nonce = await getNonce();
-  const priceInfo = getProductPriceInfo(product);
-  const imageUrl = product.images?.[0]?.url;
-  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || '';
-
-  const availability =
-    product.inventory?.canPurchase !== false
-      ? 'https://schema.org/InStock'
-      : 'https://schema.org/OutOfStock';
-
-  // All Brainerce catalog listings are first-party new-goods sales — no
-  // used/refurbished condition data exists anywhere in the product model, so
-  // this is a deliberate always-true assumption, not a per-product field.
-  const itemCondition = 'https://schema.org/NewCondition';
-
-  const shippingDetails = (shipping ?? [])
-    .filter((z) => z.amount !== null)
-    .map((z) => ({
-      '@type': 'OfferShippingDetails',
-      shippingRate: { '@type': 'MonetaryAmount', value: z.amount, currency: resolvedCurrency },
-      shippingDestination: { '@type': 'DefinedRegion', addressCountry: z.countries },
-      ...(z.handlingTime != null || z.minDeliveryDays != null || z.maxDeliveryDays != null
-        ? {
-            deliveryTime: {
-              '@type': 'ShippingDeliveryTime',
-              ...(z.handlingTime != null
-                ? {
-                    handlingTime: {
-                      '@type': 'QuantitativeValue',
-                      minValue: 0,
-                      maxValue: z.handlingTime,
-                    },
-                  }
-                : {}),
-              ...(z.minDeliveryDays != null || z.maxDeliveryDays != null
-                ? {
-                    transitTime: {
-                      '@type': 'QuantitativeValue',
-                      minValue: z.minDeliveryDays ?? z.maxDeliveryDays,
-                      maxValue: z.maxDeliveryDays ?? z.minDeliveryDays,
-                    },
-                  }
-                : {}),
-            },
-          }
-        : {}),
-    }));
-
-  const isVariable = product.type === 'VARIABLE';
-  const offers =
-    isVariable && product.priceMin
-      ? {
-          '@type': 'AggregateOffer',
-          lowPrice: product.priceMin,
-          highPrice: product.priceMax ?? product.priceMin,
-          offerCount: product.variants?.length ?? 1,
-          priceCurrency: resolvedCurrency,
-          availability,
-          itemCondition,
-          ...(shippingDetails.length > 0 ? { shippingDetails } : {}),
-          url,
-        }
-      : {
-          '@type': 'Offer',
-          price: priceInfo.price,
-          priceCurrency: resolvedCurrency,
-          availability,
-          itemCondition,
-          ...(product.salePrice && product.salePriceEndsAt
-            ? { priceValidUntil: product.salePriceEndsAt }
-            : {}),
-          ...(shippingDetails.length > 0 ? { shippingDetails } : {}),
-          url,
-        };
-
-  // schema.org/Product.description must be plain text — Google's Rich Results
-  // and AI Overviews ingest this field directly and reject markup. Strip HTML
-  // first; if the description is empty after stripping, fall back to the name.
-  const cleanDescription = stripHtmlForSeo(product.description) || product.name;
-  const brandName = product.brands?.[0]?.name;
-  const productJsonLd: Record<string, unknown> = {
-    '@context': 'https://schema.org',
-    '@type': 'Product',
-    name: product.name,
-    description: cleanDescription,
-    image: imageUrl,
-    url,
-    sku: product.sku || product.id,
-    // Brand + identifiers qualify the PDP for Google's free merchant listings
-    // (no Merchant Center feed needed). Emitted only when present — Google
-    // penalizes fabricated identifiers.
-    ...(brandName ? { brand: { '@type': 'Brand', name: brandName } } : {}),
-    ...(product.gtin ? { gtin: product.gtin } : {}),
-    ...(product.mpn ? { mpn: product.mpn } : {}),
-    offers,
-  };
-
-  // Emit aggregateRating only when there is real review data — Google rejects
-  // self-serving / faked ratings and stores with 0 reviews shouldn't claim any.
-  if (product.reviewCount && product.reviewCount > 0) {
-    productJsonLd.aggregateRating = {
-      '@type': 'AggregateRating',
-      ratingValue: product.avgRating,
-      reviewCount: product.reviewCount,
-      bestRating: 5,
-      worstRating: 1,
-    };
-  }
-
-  const breadcrumbJsonLd = {
-    '@context': 'https://schema.org',
-    '@type': 'BreadcrumbList',
-    itemListElement: [
-      {
-        '@type': 'ListItem',
-        position: 1,
-        name: 'Home',
-        item: baseUrl || '/',
-      },
-      {
-        '@type': 'ListItem',
-        position: 2,
-        name: 'Products',
-        item: `${baseUrl}/products`,
-      },
-      {
-        '@type': 'ListItem',
-        position: 3,
-        name: product.name,
-        item: url,
-      },
-    ],
-  };
-
-  return (
-    <>
-      <script
-        type="application/ld+json"
-        nonce={nonce}
-        suppressHydrationWarning
-        dangerouslySetInnerHTML={{ __html: serializeJsonLd(productJsonLd) }}
-      />
-      <script
-        type="application/ld+json"
-        nonce={nonce}
-        suppressHydrationWarning
-        dangerouslySetInnerHTML={{ __html: serializeJsonLd(breadcrumbJsonLd) }}
-      />
-    </>
-  );
-}
-
-// Serialize a JSON-LD object for embedding in a <script> tag. Escapes
-// `<`, `>`, and `&` to \uXXXX so seller-controlled product fields cannot
-// break out of the script element with `</script>` or inject HTML.
-function serializeJsonLd(value: unknown): string {
-  return JSON.stringify(value)
-    .replace(/</g, '\\u003c')
-    .replace(/>/g, '\\u003e')
-    .replace(/&/g, '\\u0026');
-}
+import type { Product, ShippingSummaryEntry } from 'brainerce';
+import { getProductPriceInfo } from 'brainerce';
+import { getNonce } from '@/core/lib/nonce';
+import { resolveCurrency } from '@/core/lib/resolve-currency';
+import { stripHtmlForSeo } from '@/core/lib/seo';
+
+interface ProductJsonLdProps {
+  product: Product;
+  url: string;
+  currency?: string;
+  /** From `storeInfo.shipping` — real flat-rate/free zones only. Omitted entirely when unset, never fabricated. */
+  shipping?: ShippingSummaryEntry[];
+}
+
+export async function ProductJsonLd({ product, url, currency, shipping }: ProductJsonLdProps) {
+  // Defer to the shared server helper so the env-var + USD fallback chain
+  // lives in exactly one place across all server-side currency reads.
+  const resolvedCurrency = resolveCurrency(null, currency);
+  const nonce = await getNonce();
+  const priceInfo = getProductPriceInfo(product);
+  const imageUrl = product.images?.[0]?.url;
+  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || '';
+
+  const availability =
+    product.inventory?.canPurchase !== false
+      ? 'https://schema.org/InStock'
+      : 'https://schema.org/OutOfStock';
+
+  // All Brainerce catalog listings are first-party new-goods sales — no
+  // used/refurbished condition data exists anywhere in the product model, so
+  // this is a deliberate always-true assumption, not a per-product field.
+  const itemCondition = 'https://schema.org/NewCondition';
+
+  const shippingDetails = (shipping ?? [])
+    .filter((z) => z.amount !== null)
+    .map((z) => ({
+      '@type': 'OfferShippingDetails',
+      shippingRate: { '@type': 'MonetaryAmount', value: z.amount, currency: resolvedCurrency },
+      shippingDestination: { '@type': 'DefinedRegion', addressCountry: z.countries },
+      ...(z.handlingTime != null || z.minDeliveryDays != null || z.maxDeliveryDays != null
+        ? {
+            deliveryTime: {
+              '@type': 'ShippingDeliveryTime',
+              ...(z.handlingTime != null
+                ? {
+                    handlingTime: {
+                      '@type': 'QuantitativeValue',
+                      minValue: 0,
+                      maxValue: z.handlingTime,
+                    },
+                  }
+                : {}),
+              ...(z.minDeliveryDays != null || z.maxDeliveryDays != null
+                ? {
+                    transitTime: {
+                      '@type': 'QuantitativeValue',
+                      minValue: z.minDeliveryDays ?? z.maxDeliveryDays,
+                      maxValue: z.maxDeliveryDays ?? z.minDeliveryDays,
+                    },
+                  }
+                : {}),
+            },
+          }
+        : {}),
+    }));
+
+  const isVariable = product.type === 'VARIABLE';
+  const offers =
+    isVariable && product.priceMin
+      ? {
+          '@type': 'AggregateOffer',
+          lowPrice: product.priceMin,
+          highPrice: product.priceMax ?? product.priceMin,
+          offerCount: product.variants?.length ?? 1,
+          priceCurrency: resolvedCurrency,
+          availability,
+          itemCondition,
+          ...(shippingDetails.length > 0 ? { shippingDetails } : {}),
+          url,
+        }
+      : {
+          '@type': 'Offer',
+          price: priceInfo.price,
+          priceCurrency: resolvedCurrency,
+          availability,
+          itemCondition,
+          ...(product.salePrice && product.salePriceEndsAt
+            ? { priceValidUntil: product.salePriceEndsAt }
+            : {}),
+          ...(shippingDetails.length > 0 ? { shippingDetails } : {}),
+          url,
+        };
+
+  // schema.org/Product.description must be plain text — Google's Rich Results
+  // and AI Overviews ingest this field directly and reject markup. Strip HTML
+  // first; if the description is empty after stripping, fall back to the name.
+  const cleanDescription = stripHtmlForSeo(product.description) || product.name;
+  const brandName = product.brands?.[0]?.name;
+  const productJsonLd: Record<string, unknown> = {
+    '@context': 'https://schema.org',
+    '@type': 'Product',
+    name: product.name,
+    description: cleanDescription,
+    image: imageUrl,
+    url,
+    sku: product.sku || product.id,
+    // Brand + identifiers qualify the PDP for Google's free merchant listings
+    // (no Merchant Center feed needed). Emitted only when present — Google
+    // penalizes fabricated identifiers.
+    ...(brandName ? { brand: { '@type': 'Brand', name: brandName } } : {}),
+    ...(product.gtin ? { gtin: product.gtin } : {}),
+    ...(product.mpn ? { mpn: product.mpn } : {}),
+    offers,
+  };
+
+  // Emit aggregateRating only when there is real review data — Google rejects
+  // self-serving / faked ratings and stores with 0 reviews shouldn't claim any.
+  if (product.reviewCount && product.reviewCount > 0) {
+    productJsonLd.aggregateRating = {
+      '@type': 'AggregateRating',
+      ratingValue: product.avgRating,
+      reviewCount: product.reviewCount,
+      bestRating: 5,
+      worstRating: 1,
+    };
+  }
+
+  const breadcrumbJsonLd = {
+    '@context': 'https://schema.org',
+    '@type': 'BreadcrumbList',
+    itemListElement: [
+      {
+        '@type': 'ListItem',
+        position: 1,
+        name: 'Home',
+        item: baseUrl || '/',
+      },
+      {
+        '@type': 'ListItem',
+        position: 2,
+        name: 'Products',
+        item: `${baseUrl}/products`,
+      },
+      {
+        '@type': 'ListItem',
+        position: 3,
+        name: product.name,
+        item: url,
+      },
+    ],
+  };
+
+  return (
+    <>
+      <script
+        type="application/ld+json"
+        nonce={nonce}
+        suppressHydrationWarning
+        dangerouslySetInnerHTML={{ __html: serializeJsonLd(productJsonLd) }}
+      />
+      <script
+        type="application/ld+json"
+        nonce={nonce}
+        suppressHydrationWarning
+        dangerouslySetInnerHTML={{ __html: serializeJsonLd(breadcrumbJsonLd) }}
+      />
+    </>
+  );
+}
+
+// Serialize a JSON-LD object for embedding in a <script> tag. Escapes
+// `<`, `>`, and `&` to \uXXXX so seller-controlled product fields cannot
+// break out of the script element with `</script>` or inject HTML.
+function serializeJsonLd(value: unknown): string {
+  return JSON.stringify(value)
+    .replace(/</g, '\\u003c')
+    .replace(/>/g, '\\u003e')
+    .replace(/&/g, '\\u0026');
+}

package/templates/nextjs/base/src/components/tracking-bootstrap.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import { usePathname } from 'next/navigation';
+import { getClient } from '@/core/lib/brainerce';
+import { useStoreInfo } from '@/core/providers/store-provider';
+
+/**
+ * Boots the merchant's marketing tags — GA4, Google Tag Manager, the Meta
+ * pixel, the TikTok pixel — from whatever they connected in the Brainerce
+ * dashboard.
+ *
+ * There is nothing to configure here and no environment variable to set. The
+ * tag ids arrive inside `storeInfo.tracking`, which the backend resolves from
+ * the merchant's connected marketplace apps: connecting the Google & YouTube
+ * app runs GA4 discovery and the measurement id shows up on its own, likewise
+ * the Meta and TikTok pixels. Connect an app in the dashboard and this file
+ * starts loading its tag within a minute — no redeploy, no code change.
+ *
+ * Loading GA4 also switches on Brainerce's server-side purchase conversion:
+ * the SDK captures gtag's `client_id`/`session_id` and attaches them to cart
+ * and checkout calls, which is what lets the backend send a purchase event
+ * that lands in the right GA4 session instead of orphaning.
+ */
+export function TrackingBootstrap() {
+  const { storeInfo } = useStoreInfo();
+  const pathname = usePathname();
+  const tracking = storeInfo?.tracking;
+  const bootedRef = useRef(false);
+
+  useEffect(() => {
+    if (!tracking) return;
+    getClient().initTracking(tracking);
+    bootedRef.current = true;
+  }, [tracking]);
+
+  // App Router client-side navigation never reloads the document, so the
+  // pixels' one-shot boot pageview is the only one they would ever record —
+  // every page after the landing page would be invisible. Re-fire on each
+  // path change, skipping the first run so the landing page isn't counted
+  // twice.
+  const lastPathRef = useRef<string | null>(null);
+  useEffect(() => {
+    if (!bootedRef.current) return;
+    if (lastPathRef.current === null) {
+      lastPathRef.current = pathname;
+      return;
+    }
+    if (lastPathRef.current === pathname) return;
+    lastPathRef.current = pathname;
+
+    if (typeof window === 'undefined') return;
+    try {
+      window.fbq?.('track', 'PageView');
+      (window.ttq as { page?: () => void } | undefined)?.page?.();
+    } catch {
+      // Analytics must never break navigation.
+    }
+  }, [pathname]);
+
+  return null;
+}

package/templates/nextjs/base/src/components/ui/accordion.tsx

@@ -1,53 +1,53 @@
-'use client';
-
-import * as React from 'react';
-import * as AccordionPrimitive from '@radix-ui/react-accordion';
-import { ChevronDown } from 'lucide-react';
-
-import { cn } from '@/core/lib/utils';
-
-const Accordion = AccordionPrimitive.Root;
-
-const AccordionItem = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <AccordionPrimitive.Item ref={ref} className={cn('border-b', className)} {...props} />
-));
-AccordionItem.displayName = 'AccordionItem';
-
-const AccordionTrigger = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Header className="flex">
-    <AccordionPrimitive.Trigger
-      ref={ref}
-      className={cn(
-        'flex flex-1 items-center justify-between py-4 text-start font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
-    </AccordionPrimitive.Trigger>
-  </AccordionPrimitive.Header>
-));
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
-
-const AccordionContent = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Content
-    ref={ref}
-    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
-    {...props}
-  >
-    <div className={cn('pb-4 pt-0', className)}>{children}</div>
-  </AccordionPrimitive.Content>
-));
-AccordionContent.displayName = AccordionPrimitive.Content.displayName;
-
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
+'use client';
+
+import * as React from 'react';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { ChevronDown } from 'lucide-react';
+
+import { cn } from '@/core/lib/utils';
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item ref={ref} className={cn('border-b', className)} {...props} />
+));
+AccordionItem.displayName = 'AccordionItem';
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        'flex flex-1 items-center justify-between py-4 text-start font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn('pb-4 pt-0', className)}>{children}</div>
+  </AccordionPrimitive.Content>
+));
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/templates/nextjs/base/src/components/ui/badge.tsx

@@ -1,32 +1,32 @@
-import * as React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-
-import { cn } from '@/core/lib/utils';
-
-const badgeVariants = cva(
-  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
-  {
-    variants: {
-      variant: {
-        default: 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
-        secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        destructive:
-          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
-        outline: 'text-foreground',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  }
-);
-
-export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {}
-
-function Badge({ className, variant, ...props }: BadgeProps) {
-  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
-}
-
-export { Badge, badgeVariants };
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/core/lib/utils';
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default: 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
+        secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        destructive:
+          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
+        outline: 'text-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
+}
+
+export { Badge, badgeVariants };