@cartbase/storefront 0.7.0 → 0.9.0

package/src/tracking/storefront-tags.tsx

@@ -1,67 +1,77 @@
-import { GoogleTag } from "./ga4"
-import { Gtm } from "./gtm"
-import { MetaPixel } from "./meta-pixel"
-import { TikTokPixel } from "./tiktok-pixel"
-import { getTrackingConfig } from "./get-tracking-config"
-import type { StorefrontClient } from "../api/http"
-import type { TrackingConfig } from "./types"
-
-/**
- * StorefrontTags — every marketing tag the store has configured, mounted
- * from the store's own config.
- *
- * THE POINT: a merchant who saves their pixel ids in the admin gets those
- * tags on their storefront, with nothing else to do and no code to write.
- * Before this existed the package EXPORTED tags and no storefront mounted
- * them, so the admin could serve a Meta pixel id, a GA4 id and a Google
- * Ads conversion id that reached the browser and did nothing. Adding a
- * vendor is one line HERE now, and every store built on the package gains
- * it at the next deploy.
- *
- * Consent: nothing extra to wire. <ConsentInit> sets the Consent Mode v2
- * defaults synchronously ahead of these, the Meta and TikTok snippets read
- * the shared consent cookie before they are allowed to write cookies, and
- * `applyConsent()` relays a live decision to all three vendors. Mount this
- * AFTER <ConsentInit> and the gate holds.
- *
- * Google is deliberately ONE tag with two destinations rather than two
- * loaders — see the comment block in ./ga4.tsx. It is also why the Ads
- * conversion inherits the consent gate for free.
- *
- * Server component: pass a `client` and it fetches the config (cached),
- * or pass an already-fetched `config` when the layout has one in hand.
- * Renders nothing for a vendor the store has not configured, so a store
- * running only GA4 ships exactly one tag.
- */
-export async function StorefrontTags({
-  client,
-  config,
-}: {
-  /** Used to fetch the tracking config when `config` is not supplied. */
-  client?: StorefrontClient
-  /** Pre-fetched tracking block, e.g. from a layout that already has it. */
-  config?: TrackingConfig
-}) {
-  let tracking: TrackingConfig | undefined = config
-  if (!tracking) {
-    if (!client) return null
-    try {
-      tracking = await getTrackingConfig(client)
-    } catch {
-      // A tracking-config failure must never take a storefront down.
-      return null
-    }
-  }
-
-  return (
-    <>
-      <MetaPixel pixelId={tracking.facebookPixel?.pixelId} />
-      <TikTokPixel pixelId={tracking.tiktok?.pixelId} />
-      <GoogleTag
-        measurementId={tracking.ga4?.measurementId}
-        adsConversionId={tracking.googleAds?.conversionId}
-      />
-      <Gtm containerId={tracking.gtm?.containerId} />
-    </>
-  )
-}
+import { GoogleTag } from "./ga4"
+import { LiveHeartbeat } from "./live-heartbeat"
+import { PageViews } from "./page-views"
+import { Gtm } from "./gtm"
+import { MetaPixel } from "./meta-pixel"
+import { TikTokPixel } from "./tiktok-pixel"
+import { ChatGptPixel } from "./chatgpt-pixel"
+import { getTrackingConfig } from "./get-tracking-config"
+import type { StorefrontClient } from "../api/http"
+import type { TrackingConfig } from "./types"
+
+/**
+ * StorefrontTags — every marketing tag the store has configured, mounted
+ * from the store's own config.
+ *
+ * THE POINT: a merchant who saves their pixel ids in the admin gets those
+ * tags on their storefront, with nothing else to do and no code to write.
+ * Before this existed the package EXPORTED tags and no storefront mounted
+ * them, so the admin could serve a Meta pixel id, a GA4 id and a Google
+ * Ads conversion id that reached the browser and did nothing. Adding a
+ * vendor is one line HERE now, and every store built on the package gains
+ * it at the next deploy.
+ *
+ * Consent: nothing extra to wire. <ConsentInit> sets the Consent Mode v2
+ * defaults synchronously ahead of these, the Meta and TikTok snippets read
+ * the shared consent cookie before they are allowed to write cookies, and
+ * `applyConsent()` relays a live decision to all three vendors. Mount this
+ * AFTER <ConsentInit> and the gate holds.
+ *
+ * Google is deliberately ONE tag with two destinations rather than two
+ * loaders — see the comment block in ./ga4.tsx. It is also why the Ads
+ * conversion inherits the consent gate for free.
+ *
+ * Server component: pass a `client` and it fetches the config (cached),
+ * or pass an already-fetched `config` when the layout has one in hand.
+ * Renders nothing for a vendor the store has not configured, so a store
+ * running only GA4 ships exactly one tag.
+ */
+export async function StorefrontTags({
+  client,
+  config,
+}: {
+  /** Used to fetch the tracking config when `config` is not supplied. */
+  client?: StorefrontClient
+  /** Pre-fetched tracking block, e.g. from a layout that already has it. */
+  config?: TrackingConfig
+}) {
+  let tracking: TrackingConfig | undefined = config
+  if (!tracking) {
+    if (!client) return null
+    try {
+      tracking = await getTrackingConfig(client)
+    } catch {
+      // A tracking-config failure must never take a storefront down.
+      return null
+    }
+  }
+
+  return (
+    <>
+      {/* Cartbase's own analytics, always on and never a merchant setting:
+          it is what feeds the merchant's own dashboard, so it does not
+          depend on any vendor id being configured. The vendor tags below
+          only appear when the merchant has entered their ids. */}
+      <PageViews />
+      <LiveHeartbeat />
+      <MetaPixel pixelId={tracking.facebookPixel?.pixelId} />
+      <TikTokPixel pixelId={tracking.tiktok?.pixelId} />
+      <ChatGptPixel pixelId={tracking.chatgptAds?.pixelId} />
+      <GoogleTag
+        measurementId={tracking.ga4?.measurementId}
+        adsConversionId={tracking.googleAds?.conversionId}
+      />
+      <Gtm containerId={tracking.gtm?.containerId} />
+    </>
+  )
+}

package/src/tracking/types.ts

@@ -44,6 +44,10 @@ export type TrackingConfig = {
    *  read by the order.placed forwarder, exactly like Meta's CAPI token,
    *  which has never traversed this surface. */
   tiktok?: { pixelId: string }
+  /** ChatGPT Ads, pixel id ONLY — the Conversions API key is a bearer
+   *  token and stays on the platform, read by the order.placed forwarder
+   *  (chatgpt-ads-pixel card). */
+  chatgptAds?: { pixelId: string }
   /** True when the store's consent CMP is enabled — client tags must
    *  mount through the consent gate (`_1c_consent` / Consent Mode v2). */
   consent_required?: boolean

package/src/lib/dual-price.tsx

@@ -1,73 +0,0 @@
-"use client"
-
-import * as React from "react"
-
-import { cn } from "./utils"
-import { convertToLocale } from "./money"
-
-/**
- * DualPrice — render a EUR price with BGN next to it.
- *
- * Bulgarian law (Дв, effective through 2026-08) requires showing both EUR
- * and BGN on every price displayed to consumers. Fixed statutory rate:
- *   1 EUR = 1.95583 BGN
- *
- * For non-EUR currencies the BGN leg is skipped and only the primary locale
- * currency is shown. The component is stateless and side-effect-free — safe
- * to render in server components and client components alike.
- *
- * The EUR-to-BGN rate and the law's expiry date are baked in for now. When
- * the law expires (or when a store outside Bulgaria consumes this library),
- * we'll move both to a BrandingContext value so each store can override.
- *
- * @example
- *   <DualPrice amount={19.99} currencyCode="eur" />
- *   // → "€19.99  39,10 лв."
- */
-
-const EUR_TO_BGN = 1.95583
-
-function toBGN(eurAmount: number): string {
-  const bgn = eurAmount * EUR_TO_BGN
-  return bgn.toFixed(2).replace(".", ",") + " лв."
-}
-
-export type DualPriceProps = {
-  /** Amount in major units of the primary currency (e.g. 19.99 for €19.99) */
-  amount: number
-  /** ISO currency code (case-insensitive). Only "eur" triggers the BGN leg. */
-  currencyCode: string
-  /** Optional class for the outer span */
-  className?: string
-  /** Optional class for the BGN leg (defaults to small muted) */
-  bgnClassName?: string
-}
-
-export function DualPrice({
-  amount,
-  currencyCode,
-  className,
-  bgnClassName,
-}: DualPriceProps): React.ReactElement {
-  const isEur = currencyCode?.toLowerCase() === "eur"
-
-  if (!isEur) {
-    return (
-      <span className={className}>
-        {convertToLocale({ amount, currency_code: currencyCode })}
-      </span>
-    )
-  }
-
-  return (
-    <span className={className}>
-      {convertToLocale({ amount, currency_code: currencyCode })}
-      <span className={cn("ml-1.5 text-muted-foreground/70 font-normal", bgnClassName)}>
-        {toBGN(amount)}
-      </span>
-    </span>
-  )
-}
-
-/** Exposed for advanced callers that need the rate directly. */
-export const EUR_TO_BGN_RATE = EUR_TO_BGN