@cartbase/storefront 0.13.0 → 0.15.0

package/src/products/product-template.tsx

@@ -21,6 +21,7 @@ import { ImageGallery } from "./image-gallery"
 import { ProductActions, type AddToCartInput } from "./product-actions"
 import { ProductTabs, type ProductSection } from "./product-tabs"
 import type { ProductPromise } from "./product-promises"
+import type { ProductLabels } from "./labels"
 import { RelatedProducts } from "./related-products"
 import { ProductInfo } from "./product-info"
 import { ProductActionsWrapper } from "./product-actions-wrapper"
@@ -39,6 +40,19 @@ type ProductTemplateProps = {
    * the library cannot promise anything on a merchant's behalf.
    */
   promises?: ProductPromise[]
+  /**
+   * The store's product pack, REQUIRED even when a `StorefrontLocaleProvider`
+   * is mounted: the related-products strip is a SERVER component and a
+   * server component cannot read a client context, so its heading stays
+   * English unless the pack arrives as a prop. Until 2026-09-13 this
+   * template did not accept one at all and did not pass one down, which made
+   * that strip untranslatable without ejecting the file (Alexander found it
+   * on evoo: a Bulgarian page ending in "Related products / You might also
+   * want to check out these products"). Optional until 2026-09-14, which is
+   * how a page could still forget it; now the build refuses the page.
+   * Pass `STORE_LOCALE.products` (`en.products` for an English store).
+   */
+  labels: ProductLabels
   /** Drop the physical-facts section even for a product that has facts. */
   hideSpecs?: boolean
   /** Anything else the store wants in the accordion, appended in order. */
@@ -53,6 +67,7 @@ export function ProductTemplate({
   onAddToCart,
   openCart,
   promises,
+  labels,
   hideSpecs,
   sections,
 }: ProductTemplateProps) {
@@ -123,6 +138,7 @@ export function ProductTemplate({
             client={client}
             product={product}
             pricingContext={pricingContext}
+            labels={labels}
           />
         </Suspense>
       </div>

package/src/products/related-products.tsx

@@ -22,7 +22,7 @@ import type { StoreProduct } from "../api/products"
 import { listRelatedProducts } from "../api/search"
 import { StoreApiError } from "../api/types"
 import { ProductPreview } from "./product-preview"
-import { defaultProductLabels, type ProductLabels } from "./labels"
+import type { ProductLabels } from "./labels"
 
 type RelatedProductsProps = {
   client: StorefrontClient
@@ -31,7 +31,15 @@ type RelatedProductsProps = {
   pricingContext?: PricingContextQuery
   /** 1–24, server default 12. */
   limit?: number
-  labels?: Pick<ProductLabels, "relatedProducts" | "relatedProductsDescription">
+  /**
+   * The store's product pack, REQUIRED. It has to arrive as a PROP: this is
+   * a server component, so it cannot read `ProductLabelsProvider`, and its
+   * heading stays English without one. `ProductTemplate` passes the pack it
+   * is given straight through; a page mounting this strip on its own passes
+   * `STORE_LOCALE.products`. Required since 2026-09-14 so that forgetting it
+   * fails the build instead of shipping silent English.
+   */
+  labels: ProductLabels
   /** Override the default ProductPreview with a store-specific card. */
   renderProduct?: ComponentType<{ product: StoreProduct }>
 }
@@ -41,11 +49,9 @@ export async function RelatedProducts({
   product,
   pricingContext,
   limit,
-  labels,
+  labels: l,
   renderProduct: Card = ProductPreview,
 }: RelatedProductsProps) {
-  const l = { ...defaultProductLabels, ...labels }
-
   let products: StoreProduct[]
   try {
     const res = await listRelatedProducts(client, product.id, {

package/src/reviews-ui/photo-upload.tsx

@@ -5,6 +5,7 @@ import { Loader2, Upload, X } from "lucide-react"
 import type { StorefrontClient } from "../api/http"
 import { createUploadUrl, type ReviewMedia } from "../api/reviews"
 import { cn } from "../lib/utils"
+import { useLocaleArea } from "../locales/context"
 import { defaultReviewsUiLabels, type ReviewsUiLabels } from "./labels"
 import {
   MAX_IMAGES,
@@ -134,7 +135,7 @@ export function ReviewPhotoUpload({
   onError,
   labels,
 }: ReviewPhotoUploadProps) {
-  const l = { ...defaultReviewsUiLabels, ...labels }
+  const l = { ...useLocaleArea("reviews", defaultReviewsUiLabels), ...labels }
   const [dragging, setDragging] = useState(false)
   const fileInputRef = useRef<HTMLInputElement>(null)
 

package/src/reviews-ui/review-list.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useState } from "react"
 import { ShieldCheck, X } from "lucide-react"
 import type { PublicReview } from "../api/reviews"
+import { useLocaleArea } from "../locales/context"
 import { defaultReviewsUiLabels, type ReviewsUiLabels } from "./labels"
 import { formatReviewDate, reviewDisplayName } from "./helpers"
 import { StarRow } from "./star-badge"
@@ -39,7 +40,7 @@ export function ReviewList({
   labels,
   className,
 }: ReviewListProps) {
-  const l = { ...defaultReviewsUiLabels, ...labels }
+  const l = { ...useLocaleArea("reviews", defaultReviewsUiLabels), ...labels }
   // Lightbox: when set, the indicated review's media at the given index
   // is shown full-bleed.
   const [lightbox, setLightbox] = useState<{
@@ -194,6 +195,7 @@ export function ReviewLightbox({
   closeLabel?: string
   onClose: () => void
 }) {
+  const fallback = useLocaleArea("reviews", defaultReviewsUiLabels)
   // Close on Escape
   useEffect(() => {
     const onKey = (e: KeyboardEvent) => {
@@ -219,7 +221,7 @@ export function ReviewLightbox({
     >
       <button
         type="button"
-        aria-label={closeLabel ?? defaultReviewsUiLabels.close}
+        aria-label={closeLabel ?? fallback.close}
         onClick={onClose}
         className="absolute top-4 right-4 w-10 h-10 rounded-full bg-background/10 hover:bg-background/20 text-background flex items-center justify-center"
       >

package/src/reviews-ui/review-widget.tsx

@@ -9,6 +9,7 @@ import {
   type ReviewWidgetPayload,
 } from "../api/reviews"
 import { cn } from "../lib/utils"
+import { useLocaleArea } from "../locales/context"
 import { defaultReviewsUiLabels, type ReviewsUiLabels } from "./labels"
 import { sortParamsFor, type ReviewSortKey } from "./helpers"
 import { RatingDistribution, StarBadge } from "./star-badge"
@@ -54,7 +55,9 @@ export function ReviewWidget({
   labels,
   className,
 }: ReviewWidgetProps) {
-  const l = { ...defaultReviewsUiLabels, ...labels }
+  // The mounted language, then the store's overrides (2026-09-14): a store
+  // that mounts StorefrontLocaleProvider passes nothing here.
+  const l = { ...useLocaleArea("reviews", defaultReviewsUiLabels), ...labels }
   const [data, setData] = useState<ReviewWidgetPayload | null>(
     initialData ?? null
   )

package/src/reviews-ui/review-wizard.tsx

@@ -11,6 +11,7 @@ import {
 } from "../api/reviews"
 import { StoreApiError } from "../api/types"
 import { cn } from "../lib/utils"
+import { useLocaleArea } from "../locales/context"
 import { defaultReviewsUiLabels, type ReviewsUiLabels } from "./labels"
 import { MAX_BODY, firstNameOf, formatLabel } from "./helpers"
 import {
@@ -89,7 +90,7 @@ export function ReviewWizard({
   storeHref = "/",
   labels,
 }: ReviewWizardProps) {
-  const l = { ...defaultReviewsUiLabels, ...labels }
+  const l = { ...useLocaleArea("reviews", defaultReviewsUiLabels), ...labels }
   const entry = resolveWizardEntry(validation)
 
   // ── Invalid / expired ────────────────────────────────────────────────
@@ -254,7 +255,7 @@ export function ReviewWizardForm({
   initialRewardCode?: string | null
   labels?: Partial<ReviewsUiLabels>
 }) {
-  const l = { ...defaultReviewsUiLabels, ...labels }
+  const l = { ...useLocaleArea("reviews", defaultReviewsUiLabels), ...labels }
   const [step, setStep] = useState<WizardStep>(initialStep)
   const [rating, setRating] = useState<number>(0)
   const [hoverRating, setHoverRating] = useState<number>(0)

package/src/store/category-template.tsx

@@ -30,7 +30,14 @@ type CategoryTemplateProps = {
   /** From the `page` query param. */
   page?: string
   pricingContext?: PricingContextQuery
-  labels?: Partial<StoreLabels>
+  /**
+   * The store's pack for this area, REQUIRED: this is a server component and
+   * cannot read `StorefrontLocaleProvider`, so the page passes
+   * `STORE_LOCALE.store` (`en.store` for an English store). Required since
+   * 2026-09-14 so that forgetting it fails the build instead of shipping
+   * silent English.
+   */
+  labels: StoreLabels
   /** Override the default ProductPreview with a store-specific card. */
   renderProduct?: ProductCardComponent
 }

package/src/store/collection-template.tsx

@@ -46,7 +46,14 @@ type CollectionTemplateProps = {
   /** From the `page` query param. */
   page?: string
   pricingContext?: PricingContextQuery
-  labels?: Partial<StoreLabels>
+  /**
+   * The store's pack for this area, REQUIRED: this is a server component and
+   * cannot read `StorefrontLocaleProvider`, so the page passes
+   * `STORE_LOCALE.store` (`en.store` for an English store). Required since
+   * 2026-09-14 so that forgetting it fails the build instead of shipping
+   * silent English.
+   */
+  labels: StoreLabels
   /** Override the default ProductPreview with a store-specific card. */
   renderProduct?: ProductCardComponent
 }

package/src/store/search-template.tsx

@@ -24,7 +24,7 @@ import { searchProducts } from "../api/search"
 import { cn } from "../lib/utils"
 import { Button } from "../primitives/ui/button"
 import { ProductPreview } from "../products/product-preview"
-import { defaultStoreLabels, type StoreLabels } from "./labels"
+import type { StoreLabels } from "./labels"
 import type { ProductCardComponent } from "./paginated-products"
 import { Pagination } from "./pagination"
 import {
@@ -50,7 +50,14 @@ type SearchTemplateProps = {
   pricingContext?: PricingContextQuery
   /** Page size, 1–100 (server default 20). */
   limit?: number
-  labels?: Partial<StoreLabels>
+  /**
+   * The store's pack for this area, REQUIRED: this is a server component and
+   * cannot read `StorefrontLocaleProvider`, so the page passes
+   * `STORE_LOCALE.store` (`en.store` for an English store). Required since
+   * 2026-09-14 so that forgetting it fails the build instead of shipping
+   * silent English, which is exactly how evoo's search page stayed English.
+   */
+  labels: StoreLabels
   /** Override the default ProductPreview with a store-specific card. */
   renderProduct?: ProductCardComponent
 }
@@ -61,10 +68,9 @@ export async function SearchTemplate({
   basePath = "/search",
   pricingContext,
   limit = DEFAULT_LIMIT,
-  labels,
+  labels: l,
   renderProduct: Card = ProductPreview,
 }: SearchTemplateProps) {
-  const l = { ...defaultStoreLabels, ...labels }
   const state = parseSearchParams(searchParams)
 
   let response: SearchProductsResponse | null = null

package/src/store/store-template.tsx

@@ -8,7 +8,7 @@ import { Suspense } from "react"
 import type { StorefrontClient } from "../api/http"
 import type { PricingContextQuery } from "../api/types"
 import type { SortOptions } from "../lib/sort-products"
-import { defaultStoreLabels, type StoreLabels } from "./labels"
+import type { StoreLabels } from "./labels"
 import { SortSelect } from "./sort-select"
 import { PaginatedProducts, type ProductCardComponent } from "./paginated-products"
 import { SkeletonProductGrid } from "./skeleton-product-grid"
@@ -20,7 +20,14 @@ type StoreTemplateProps = {
   /** From the `page` query param. */
   page?: string
   pricingContext?: PricingContextQuery
-  labels?: Partial<StoreLabels>
+  /**
+   * The store's pack for this area, REQUIRED: this is a server component and
+   * cannot read `StorefrontLocaleProvider`, so the page passes
+   * `STORE_LOCALE.store` (`en.store` for an English store). Required since
+   * 2026-09-14 so that forgetting it fails the build instead of shipping
+   * silent English, which is how evoo's search page stayed English.
+   */
+  labels: StoreLabels
   /** Override the default ProductPreview with a store-specific card. */
   renderProduct?: ProductCardComponent
 }
@@ -30,10 +37,9 @@ export function StoreTemplate({
   sortBy,
   page,
   pricingContext,
-  labels,
+  labels: l,
   renderProduct,
 }: StoreTemplateProps) {
-  const l = { ...defaultStoreLabels, ...labels }
   const pageNumber = page ? parseInt(page) : 1
   const sort = sortBy || "created_at"
 

package/src/tracking/chatgpt-pixel.tsx

@@ -2,7 +2,7 @@
 
 import Script from "next/script"
 
-import { CONSENT_COOKIE } from "./consent"
+import { adsConsentSnippet } from "./consent"
 import { jsStringLiteral } from "./inline-script"
 
 /**
@@ -32,9 +32,13 @@ import { jsStringLiteral } from "./inline-script"
  * relies on it. Nothing here relies on behaviour OpenAI has not written
  * down: an unconsented page view is not sent, and not counted on later.
  *
- * The decision is read from the shared `_1c_consent` cookie inside the
- * snippet, before anything can be sent, and live changes arrive through
- * `applyConsent()` in ./consent.ts — there is no cookie watcher.
+ * The decision is the store's default overridden by the visitor's stored
+ * choice (`adsConsentSnippet`), resolved inside the snippet before anything
+ * can be sent: a store that collects consent starts closed, a store with
+ * no consent gate starts open, the cookie winning either way. Live changes
+ * arrive through `applyConsent()` in ./consent.ts — there is no cookie
+ * watcher. `consentRequired` is `tracking.consent_required`, passed by
+ * <StorefrontTags>, and required for the reason <ConsentInit> gives.
  *
  * The page view is ours to fire at all: their pixel sends nothing at init,
  * unlike Meta's and TikTok's base code.
@@ -48,7 +52,14 @@ import { jsStringLiteral } from "./inline-script"
  * Renders nothing when `pixelId` is falsy, so a layout can mount it
  * unconditionally.
  */
-export function ChatGptPixel({ pixelId }: { pixelId?: string }) {
+export function ChatGptPixel({
+  pixelId,
+  consentRequired,
+}: {
+  pixelId?: string
+  /** `tracking.consent_required`: does this store collect consent before it tracks? */
+  consentRequired: boolean
+}) {
   if (!pixelId) return null
 
   const id = jsStringLiteral(pixelId)
@@ -70,11 +81,7 @@ oaiq("consent", false);
 oaiq("init", { pixelId: ${id} });
 
 (function (d) {
-  var ads = false;
-  try {
-    var m = d.cookie.match(/(?:^|; )${CONSENT_COOKIE}=([^;]*)/);
-    if (m) { ads = !!JSON.parse(decodeURIComponent(m[1])).ads; }
-  } catch (e) {}
+  ${adsConsentSnippet(consentRequired, "d")}
   if (ads) {
     oaiq("consent", true);
     oaiq("measure", "page_viewed", { type: "contents" });

package/src/tracking/consent-init.tsx

@@ -1,44 +1,62 @@
-import { CONSENT_INIT_SNIPPET } from "./consent"
-
-/**
- * ConsentInit — the synchronous Consent Mode v2 "default" snippet.
- *
- * Ported from the Cartbase reference implementation
- * `src/components/storefront/consent/consent-init.tsx` (itself from
- * `@1click/ui/src/tracking/consent-init.tsx` v2.3.1); the snippet lives in
- * ./consent.ts (CONSENT_INIT_SNIPPET, character-identical) so its ordering
- * contract is unit-testable.
- *
- * Render it as the FIRST child of <body> (App Router layouts don't
- * expose <head> for inline scripts). A plain inline <script>
- * (deliberately NOT next/script) executes at HTML-parse time — long
- * before the afterInteractive <GA4>/<MetaPixel> loaders, which run
- * post-hydration. Google's consent-mode docs require the default to be
- * set synchronously ahead of the tag; an async default races the
- * loader and the first hit of a returning consented visitor would
- * ship denied.
- *
- * Behavior:
- *   - No stored choice (first visit) → default ALL DENIED. Tags still
- *     load (advanced consent mode): gtag sends cookieless pings, the
- *     Pixel queues client-side. The <ConsentBanner> then collects the
- *     choice and applies the live 'update'.
- *   - Stored choice → default mirrors it, so returning visitors are
- *     correct from the very first hit with no banner and no race.
- *
- * `ads_data_redaction` strips ad-click identifiers (gclid et al.) from
- * the cookieless pings while ad_storage is denied, per Google's docs.
- *
- * The script is static (no props interpolated beyond the shared cookie
- * name) — safe as a server-component inline script with a stable id.
- * CARD TRAP: it must NEVER wait on the /api/store/consent fetch — the
- * per-store config drives the BANNER, not this default.
- */
-export function ConsentInit() {
-  return (
-    <script
-      id="1click-consent-init"
-      dangerouslySetInnerHTML={{ __html: CONSENT_INIT_SNIPPET }}
-    />
-  )
-}
+import { consentInitSnippet } from "./consent"
+
+/**
+ * ConsentInit — the synchronous Consent Mode v2 "default" snippet.
+ *
+ * Ported from the Cartbase reference implementation
+ * `src/components/storefront/consent/consent-init.tsx` (itself from
+ * `@1click/ui/src/tracking/consent-init.tsx` v2.3.1); the snippet lives in
+ * ./consent.ts (`consentInitSnippet`) so its ordering contract is
+ * unit-testable.
+ *
+ * Render it as the FIRST child of <body> (App Router layouts don't
+ * expose <head> for inline scripts). A plain inline <script>
+ * (deliberately NOT next/script) executes at HTML-parse time — long
+ * before the afterInteractive <GA4>/<MetaPixel> loaders, which run
+ * post-hydration. Google's consent-mode docs require the default to be
+ * set synchronously ahead of the tag; an async default races the
+ * loader and the first hit of a returning consented visitor would
+ * ship denied.
+ *
+ * `required` is the store's consent switch, `consent.enabled` from
+ * `GET /api/store/consent`, which the layout already fetches for the
+ * banner. It is REQUIRED on purpose: with it absent there is no safe
+ * default to fall back on. Defaulting to true would keep the pixels of a
+ * store that switched its banner off silent forever (the defect fixed on
+ * 2026-09-14); defaulting to false would fire them on an EU store whose
+ * layout forgot the prop. So the layout states it, and a layout that does
+ * not fails to compile.
+ *
+ * Behavior:
+ *   - `required` and no stored choice (first visit) → default ALL DENIED.
+ *     Tags still load (advanced consent mode): gtag sends cookieless
+ *     pings, the Pixel queues client-side. The <ConsentBanner> then
+ *     collects the choice and applies the live 'update'.
+ *   - not `required` and no stored choice → default ALL GRANTED: the store
+ *     collects no consent, so there is nothing to wait for.
+ *   - Stored choice → default mirrors it, whatever the switch, so
+ *     returning visitors are correct from the very first hit with no
+ *     banner and no race, and a visitor who declined keeps that decision.
+ *
+ * `ads_data_redaction` strips ad-click identifiers (gclid et al.) from
+ * the cookieless pings while ad_storage is denied, per Google's docs.
+ *
+ * The script interpolates one boolean literal and the shared cookie name,
+ * nothing typed by a person — safe as a server-component inline script
+ * with a stable id. CARD TRAP: it must NEVER wait on the
+ * /api/store/consent fetch inside the browser; the layout resolves the
+ * setting on the server and inlines it here.
+ */
+export function ConsentInit({
+  required,
+}: {
+  /** The store's consent switch: `consent.enabled` from `GET /api/store/consent`. */
+  required: boolean
+}) {
+  return (
+    <script
+      id="1click-consent-init"
+      dangerouslySetInnerHTML={{ __html: consentInitSnippet(required) }}
+    />
+  )
+}

package/src/tracking/consent.ts

@@ -169,20 +169,43 @@ export function openConsentSettings(): void {
 }
 
 /**
- * The synchronous Consent Mode v2 "default" snippet — the crown jewel
- * (card trap: NEVER async, NEVER config-dependent-late). Exported as a
- * string so the ordering contract is unit-testable without a DOM:
- * character-identical to the shipped @1click/ui v2.3.1 snippet.
- * `<ConsentInit>` renders it as a plain inline <script>.
+ * THE DEFAULT FLIPS WITH THE STORE'S CONSENT SWITCH; A STORED CHOICE WINS.
+ *
+ * `required` is the store's consent setting (`consent.enabled` on
+ * `GET /api/store/consent`, served again as `tracking.consent_required` on
+ * the integrations block). A store that collects consent starts every
+ * visitor DENIED until they choose, which is what the banner is for. A
+ * store that does not collect consent has nothing to wait for, so its
+ * visitors start GRANTED. Either way a choice the visitor already stored
+ * in the cookie is what counts: someone who declined under a banner keeps
+ * that decision if the banner is later switched off.
+ *
+ * Until 2026-09-14 the default was denied whatever the setting, and the
+ * cookie is written only by the banner or an external CMP, so a store with
+ * the banner off never fired Meta, TikTok, ChatGPT or the Google Ads
+ * destination at all, silently. Alexander's rule: a banner means consent is
+ * collected and the pixels fire on it; no banner means the pixels fire.
+ * This is Consent Mode's own model too: `default` is what applies before a
+ * decision, and Google documents setting it granted where no consent is
+ * needed.
+ *
+ * The synchronous Consent Mode v2 "default" snippet is the crown jewel
+ * (card trap: NEVER async, NEVER waiting on a fetch). It is built as a
+ * string so the ordering contract is unit-testable without a DOM, and the
+ * one value interpolated is a boolean literal, so nothing typed by anyone
+ * can reach the script. `<ConsentInit required>` renders it as a plain
+ * inline <script>.
  */
-export const CONSENT_INIT_SNIPPET = `
+export function consentInitSnippet(required: boolean): string {
+  const fallback = required ? "false" : "true"
+  return `
 (function(){
   var c=null;
   try{
     var m=document.cookie.match(/(?:^|; )${CONSENT_COOKIE}=([^;]*)/);
     if(m){c=JSON.parse(decodeURIComponent(m[1]));}
   }catch(e){}
-  var ads=!!(c&&c.ads), an=!!(c&&c.analytics);
+  var ads=c?!!c.ads:${fallback}, an=c?!!c.analytics:${fallback};
   window.dataLayer=window.dataLayer||[];
   function gtag(){dataLayer.push(arguments);}
   gtag('consent','default',{
@@ -194,6 +217,34 @@ export const CONSENT_INIT_SNIPPET = `
   gtag('set','ads_data_redaction',!ads);
 })();
 `.trim()
+}
+
+/**
+ * The snippet for a store that collects consent, kept under its old name:
+ * the shape every test and every mount before 2026-09-14 knew.
+ */
+export const CONSENT_INIT_SNIPPET = consentInitSnippet(true)
+
+/**
+ * The same rule for the vendors that read the cookie themselves (Meta,
+ * TikTok, ChatGPT: each gates its own SDK before init and cannot use the
+ * gtag default). Returns the statements that leave `var ads` holding the
+ * decision: the store's default, overridden by a stored choice.
+ *
+ * ONE implementation for every pixel-side gate, so a vendor added later
+ * gets the rule by calling this rather than by copying a cookie read.
+ * `cookieSource` is the identifier the vendor's snippet uses for
+ * `document` (TikTok's and OpenAI's loaders alias it as `d`).
+ */
+export function adsConsentSnippet(required: boolean, cookieSource = "document"): string {
+  return `
+var ads=${required ? "false" : "true"};
+try{
+  var m=${cookieSource}.cookie.match(/(?:^|; )${CONSENT_COOKIE}=([^;]*)/);
+  if(m){ads=!!JSON.parse(decodeURIComponent(m[1])).ads;}
+}catch(e){}
+`.trim()
+}
 
 // ── Per-store consent config (GET /api/store/consent) ────────────────
 //

package/src/tracking/index.ts

@@ -79,6 +79,8 @@ export {
   writeConsentCookie,
   shouldRenderBanner,
   pickConsentCopy,
+  consentInitSnippet,
+  adsConsentSnippet,
   CONSENT_COOKIE,
   CONSENT_MAX_AGE_SECONDS,
   CONSENT_OPEN_EVENT,

package/src/tracking/meta-pixel.tsx

@@ -9,7 +9,8 @@ import {
   sha256Hex,
   type KnownVisitor,
 } from "./attribution"
-import { CONSENT_COOKIE } from "./consent"
+import { adsConsentSnippet } from "./consent"
+import { jsStringLiteral } from "./inline-script"
 
 /**
  * MetaPixel — client-side base pixel injector.
@@ -32,17 +33,32 @@ import { CONSENT_COOKIE } from "./consent"
  * single base init covers the initial page; further events are fired
  * explicitly via the helpers in `./fbq.ts`.
  *
- * Consent gate: fbq('consent', …) is pushed from the `_1c_consent`
- * cookie BEFORE fbq('init') — Meta only honors a pre-init revoke, which
- * makes the Pixel queue every event (incl. this PageView) client-side
- * until the <ConsentBanner> grants; a later fbq('consent','grant')
- * flushes the queue. No cookie (first visit) = revoke.
+ * Consent gate: fbq('consent', …) is pushed BEFORE fbq('init') — Meta
+ * only honors a pre-init revoke, which makes the Pixel queue every event
+ * (incl. this PageView) client-side until the <ConsentBanner> grants; a
+ * later fbq('consent','grant') flushes the queue. The decision is the
+ * store's default overridden by the visitor's stored choice
+ * (`adsConsentSnippet`): a store that collects consent starts revoked, a
+ * store with no consent gate starts granted, and a cookie wins either way.
+ *
+ * `consentRequired` is `tracking.consent_required` from the store's
+ * integrations block; <StorefrontTags> passes it. It is required on the
+ * prop for the reason <ConsentInit> gives: neither default is safe.
  */
-export function MetaPixel({ pixelId }: { pixelId?: string }) {
+export function MetaPixel({
+  pixelId,
+  consentRequired,
+}: {
+  pixelId?: string
+  /** `tracking.consent_required`: does this store collect consent before it tracks? */
+  consentRequired: boolean
+}) {
   if (!pixelId) return null
 
+  const id = jsStringLiteral(pixelId)
+
   const initSnippet = `
-window.__1click_fb_pixel_id='${pixelId}';
+window.__1click_fb_pixel_id=${id};
 !function(f,b,e,v,n,t,s)
 {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
 n.callMethod.apply(n,arguments):n.queue.push(arguments)};
@@ -52,14 +68,10 @@ t.src=v;s=b.getElementsByTagName(e)[0];
 s.parentNode.insertBefore(t,s)}(window, document,'script',
 'https://connect.facebook.net/en_US/fbevents.js');
 (function(){
-  var ads=false;
-  try{
-    var m=document.cookie.match(/(?:^|; )${CONSENT_COOKIE}=([^;]*)/);
-    if(m){ads=!!JSON.parse(decodeURIComponent(m[1])).ads;}
-  }catch(e){}
+  ${adsConsentSnippet(consentRequired)}
   fbq('consent', ads?'grant':'revoke');
 })();
-fbq('init', '${pixelId}');
+fbq('init', ${id});
 fbq('track', 'PageView');
 `.trim()
 
@@ -75,7 +87,7 @@ fbq('track', 'PageView');
           height="1"
           width="1"
           style={{ display: "none" }}
-          src={`https://www.facebook.com/tr?id=${pixelId}&ev=PageView&noscript=1`}
+          src={`https://www.facebook.com/tr?id=${encodeURIComponent(pixelId)}&ev=PageView&noscript=1`}
           alt=""
         />
       </noscript>