@cartbase/storefront 0.20.1 → 0.22.0

package/src/tracking/attribution.ts

@@ -547,6 +547,89 @@ export const CLICK_ID_METADATA_KEYS: ReadonlyArray<readonly [string, string]> =
   [CLICK_ID_COOKIES.oppref, "oai_oppref"],
 ]
 
+/**
+ * Everything the BROWSER can tell the cart about where this order came
+ * from, in the same flat keys the server-side `getTrackingAttribution()`
+ * produces: the Facebook pair and the visitor id, both UTM tuples, and
+ * every ad-click identifier.
+ *
+ * Why a browser-side twin exists at all. The click ids are captured on the
+ * landing page and have to reach the ORDER, and the one moment where a
+ * cart certainly exists and is not yet placed is the checkout the shopper
+ * is standing in. The server-side reader can only run in a server
+ * component or an action, so a checkout written as a client component (the
+ * kit's, and every store's) had no way to reach them; the ids sat in the
+ * jar until the order was gone. This reads the same cookies through
+ * `document.cookie` and hands back a payload for `cart.metadata`, which
+ * cart completion copies onto `order.metadata` and the `order.placed`
+ * forwarder reads.
+ *
+ * What it deliberately does NOT carry: the user agent, the client IP, the
+ * referer and the GA session id. Those are request facts, so the server
+ * reader stays the authority for them, and the two payloads merge by key
+ * without ever disagreeing.
+ *
+ * Consent is the CALLER's to check: this function only reads what is
+ * already on the device, but writing it onto an order is a choice the
+ * shopper's consent governs.
+ */
+export function readBrowserAttribution(): Record<string, string | number> {
+  if (!isBrowser()) return {}
+  const out: Record<string, string | number> = {}
+
+  // getOrCreate, not a plain read: the Pixel writes _fbp on init, and when
+  // an ad blocker or a slow script means it never did, ours is the value
+  // both sides will share (see the module header).
+  const fbp = getOrCreateFbp()
+  if (fbp) out.fb_fbp = fbp
+  const fbc = getOrCreateFbc()
+  if (fbc) out.fb_fbc = fbc
+  const anonId = getOrCreateAnonId()
+  if (anonId) out.fb_anon_id = anonId
+
+  const ga = getCookie("_ga")
+  if (ga) {
+    // "GA1.1.<client_id>.<timestamp>" — the canonical client id is the
+    // last two segments joined, exactly as the server reader takes it.
+    const parts = ga.split(".")
+    out.ga_client_id = parts.length >= 4 ? `${parts[2]}.${parts[3]}` : ga
+  }
+
+  const first = getCapturedFirstTouchUtms()
+  if (first) applyUtmTuple(first, "utm_first", out)
+  const last = getCapturedLastTouchUtms()
+  if (last) applyUtmTuple(last, "utm_last", out)
+
+  for (const [cookieName, metadataKey] of CLICK_ID_METADATA_KEYS) {
+    const value = getCookie(cookieName)
+    if (!value) continue
+    // Written encoded by the capture; decoded once here so the wire
+    // carries the id the platform actually issued.
+    try {
+      out[metadataKey] = decodeURIComponent(value)
+    } catch {
+      out[metadataKey] = value
+    }
+  }
+
+  return out
+}
+
+/** Flatten one captured tuple onto the payload, dropping empty fields so a
+ *  partial touch never writes null keys onto an order. */
+function applyUtmTuple(
+  utms: CapturedUtms,
+  prefix: "utm_first" | "utm_last",
+  out: Record<string, string | number>
+): void {
+  if (utms.utm_source) out[`${prefix}_source`] = utms.utm_source
+  if (utms.utm_medium) out[`${prefix}_medium`] = utms.utm_medium
+  if (utms.utm_campaign) out[`${prefix}_campaign`] = utms.utm_campaign
+  if (utms.utm_term) out[`${prefix}_term`] = utms.utm_term
+  if (utms.utm_content) out[`${prefix}_content`] = utms.utm_content
+  out[`${prefix}_captured_at`] = utms.captured_at
+}
+
 /**
  * Capture every ad-click identifier present on the current URL.
  *

package/src/tracking/consent.ts

@@ -51,6 +51,28 @@ export const CONSENT_MAX_AGE_SECONDS = 365 * 24 * 60 * 60
  * (dispatched by `openConsentSettings()`, e.g. from a footer link). */
 export const CONSENT_OPEN_EVENT = "1click:consent:open"
 
+/**
+ * Fired on `window` whenever a decision is applied, by the built-in banner
+ * or by an external CMP through `setConsent`. The detail is the choices.
+ *
+ * A component that must ACT on consent, rather than merely load a tag,
+ * needs to hear the answer as well as read it: the checkout writes where
+ * an order came from onto the cart, and a shopper who accepts while
+ * standing on the checkout page would otherwise be read once, before they
+ * chose, and never again. Same reasoning as `applyConsent` itself: the
+ * decision is relayed from the one door every choice already goes
+ * through, never polled for.
+ */
+export const CONSENT_CHANGED_EVENT = "cartbase:consent:changed"
+
+/**
+ * Where the store's consent switch is left for the browser by the
+ * `ConsentInit` snippet, which is the only component told whether the
+ * store collects consent at all (`consent.enabled`). A client component
+ * that has to apply the same rule reads it here instead of fetching.
+ */
+export const CONSENT_REQUIRED_FLAG = "__cartbase_consent_required"
+
 export type ConsentChoices = {
   /** analytics_storage */
   analytics: boolean
@@ -143,6 +165,36 @@ export function applyConsent(choices: ConsentChoices): void {
     w.oaiq("consent", choices.ads)
     if (choices.ads) w.oaiq("measure", "page_viewed", { type: "contents" })
   }
+
+  // And the same decision to our own side, for the surfaces that act on
+  // consent rather than load a tag (the checkout's attribution write).
+  try {
+    window.dispatchEvent(
+      new CustomEvent(CONSENT_CHANGED_EVENT, { detail: choices })
+    )
+  } catch {
+    // An environment with no CustomEvent: the vendors above were still told.
+  }
+}
+
+/**
+ * What applies RIGHT NOW: the visitor's stored choice, and before they
+ * make one, the store's own default.
+ *
+ * The rule is the snippet's rule, and there is only one of it (Alexander,
+ * 2026-09-14): a banner means consent is collected and nothing fires until
+ * it is given; no banner means the store collects none, so there is
+ * nothing to wait for. A caller that invented its own answer here would
+ * either write an EU shopper's identifiers before they agreed, or silence
+ * every store on earth that runs no banner.
+ */
+export function consentDecision(): ConsentChoices {
+  const stored = readConsentCookie()
+  if (stored) return stored
+  const required =
+    typeof window !== "undefined" &&
+    Boolean((window as unknown as Record<string, unknown>)[CONSENT_REQUIRED_FLAG])
+  return { analytics: !required, ads: !required, ts: 0 }
 }
 
 /**
@@ -206,6 +258,7 @@ export function consentInitSnippet(required: boolean): string {
     if(m){c=JSON.parse(decodeURIComponent(m[1]));}
   }catch(e){}
   var ads=c?!!c.ads:${fallback}, an=c?!!c.analytics:${fallback};
+  window.${CONSENT_REQUIRED_FLAG}=${required};
   window.dataLayer=window.dataLayer||[];
   function gtag(){dataLayer.push(arguments);}
   gtag('consent','default',{

package/src/tracking/events.ts

@@ -1,29 +1,37 @@
 "use client"
 
 import {
+  trackAddPaymentInfo,
+  trackAddShippingInfo,
   trackAddToCart,
   trackInitiateCheckout,
   trackPurchase,
   trackViewContent,
 } from "./fbq"
 import {
+  trackGAAddPaymentInfo,
+  trackGAAddShippingInfo,
   trackGAAddToCart,
   trackGABeginCheckout,
   trackGAPurchase,
   trackGAViewItem,
 } from "./gtag"
 import {
+  trackRybbitAddPaymentInfo,
+  trackRybbitAddShippingInfo,
   trackRybbitAddToCart,
   trackRybbitBeginCheckout,
   trackRybbitPurchase,
   trackRybbitViewItem,
 } from "./rybbit-events"
 import {
+  trackTikTokAddPaymentInfo,
   trackTikTokAddToCart,
   trackTikTokInitiateCheckout,
   trackTikTokPurchase,
   trackTikTokViewContent,
 } from "./ttq"
+import { checkoutStepEventId } from "./once"
 import {
   minorUnits,
   trackOpenAiCheckoutStarted,
@@ -259,6 +267,111 @@ export function trackCheckoutStart(input: {
   })
 }
 
+/**
+ * Contact and delivery details complete.
+ *
+ * The highest match-quality moment in the whole funnel: email, phone,
+ * name, city and postcode are all known here, which is why the checkout
+ * re-inits the Pixel's advanced matching at the same instant.
+ *
+ * The event id is DERIVED from the cart, never passed in, for the same
+ * reason Purchase derives its own from the order: two tabs on one cart, a
+ * restored session or a retried request then collapse into one event on
+ * Meta's side instead of counting three times.
+ */
+export function trackCheckoutShippingInfo(input: {
+  lines: TrackedLine[]
+  currency: string
+  value: number
+  /** The cart the step belongs to; the dedup key is built from it. */
+  cartId: string
+  /** The courier chosen, omitted while the shopper has picked none. */
+  shippingTier?: string
+  coupon?: string
+}): void {
+  const { lines, currency, value, cartId, shippingTier, coupon } = input
+  trackAddShippingInfo(
+    {
+      content_ids: lines.map((line) => line.productId),
+      content_type: "product",
+      currency,
+      value,
+      num_items: unitCount(lines),
+      contents: metaContents(lines),
+      ...(shippingTier ? { shipping_tier: shippingTier } : {}),
+    },
+    { eventId: checkoutStepEventId("AddShippingInfo", cartId) }
+  )
+  trackGAAddShippingInfo({
+    currency,
+    value,
+    items: gaItems(lines, currency),
+    ...(shippingTier ? { shipping_tier: shippingTier } : {}),
+    ...(coupon ? { coupon } : {}),
+  })
+  trackRybbitAddShippingInfo({
+    item_ids: lines.map((line) => line.variantId || line.productId),
+    num_items: unitCount(lines),
+    currency,
+    value,
+    ...(shippingTier ? { shipping_tier: shippingTier } : {}),
+  })
+}
+
+/**
+ * The shopper has settled how they will pay.
+ *
+ * Cash on delivery counts. Meta defines the event as "payment information
+ * is added in the checkout flow" and GA4 defines `payment_type` as "the
+ * chosen method of payment", so choosing to pay the courier completes the
+ * step; it simply involves no card. Carrying `payment_type` is what keeps
+ * card and cash separable in reporting, which no funnel here could show
+ * before.
+ */
+export function trackCheckoutPaymentInfo(input: {
+  lines: TrackedLine[]
+  currency: string
+  value: number
+  cartId: string
+  /** "card" or "cod". */
+  paymentType?: string
+  coupon?: string
+}): void {
+  const { lines, currency, value, cartId, paymentType, coupon } = input
+  trackAddPaymentInfo(
+    {
+      content_ids: lines.map((line) => line.productId),
+      content_type: "product",
+      currency,
+      value,
+      num_items: unitCount(lines),
+      contents: metaContents(lines),
+      ...(paymentType ? { payment_type: paymentType } : {}),
+    },
+    { eventId: checkoutStepEventId("AddPaymentInfo", cartId) }
+  )
+  trackTikTokAddPaymentInfo({
+    contents: tiktokContents(lines),
+    currency,
+    value,
+    ...(paymentType ? { paymentType } : {}),
+  })
+  trackGAAddPaymentInfo({
+    currency,
+    value,
+    items: gaItems(lines, currency),
+    ...(paymentType ? { payment_type: paymentType } : {}),
+    ...(coupon ? { coupon } : {}),
+  })
+  trackRybbitAddPaymentInfo({
+    item_ids: lines.map((line) => line.variantId || line.productId),
+    num_items: unitCount(lines),
+    currency,
+    value,
+    ...(paymentType ? { payment_type: paymentType } : {}),
+  })
+}
+
 /**
  * Order confirmed — the money event.
  *

package/src/tracking/fbq.ts

@@ -1,6 +1,8 @@
 "use client"
 
 import type {
+  AddPaymentInfoData,
+  AddShippingInfoData,
   AddToCartData,
   InitiateCheckoutData,
   LeadData,
@@ -122,6 +124,52 @@ export function trackInitiateCheckout(data: InitiateCheckoutData): void {
   })
 }
 
+/**
+ * The event id a mid-funnel checkout step carries. Callers pass the
+ * deterministic one from `checkoutStepEventId(event, cartId)` so two tabs
+ * on the same cart collapse into one event on Meta's side instead of
+ * counting twice.
+ */
+export type CheckoutStepContext = {
+  eventId?: string
+}
+
+/**
+ * AddShippingInfo — the shopper's contact and delivery details are
+ * complete. The highest match-quality moment in the funnel: email, phone,
+ * name, city and postcode are all known, which is why the advanced
+ * matching re-init runs beside it.
+ *
+ * `trackCustom`, not `track`: AddShippingInfo is not in Meta's standard
+ * event vocabulary, and calling `track()` with an unknown name makes the
+ * Pixel log a warning and treat it as custom anyway.
+ */
+export function trackAddShippingInfo(
+  data: AddShippingInfoData,
+  context: CheckoutStepContext = {}
+): void {
+  const fbq = safeFbq()
+  if (!fbq) return
+  fbq(
+    "trackCustom",
+    "AddShippingInfo",
+    data as unknown as Record<string, unknown>,
+    { eventID: context.eventId ?? generateEventId("AddShippingInfo") }
+  )
+}
+
+/** AddPaymentInfo — the shopper has settled how they will pay. */
+export function trackAddPaymentInfo(
+  data: AddPaymentInfoData,
+  context: CheckoutStepContext = {}
+): void {
+  const fbq = safeFbq()
+  if (!fbq) return
+  fbq("track", "AddPaymentInfo", data as unknown as Record<string, unknown>, {
+    eventID: context.eventId ?? generateEventId("AddPaymentInfo"),
+  })
+}
+
 /**
  * Purchase event — eventID MUST equal `purchase_${order.display_id}`
  * to dedupe with the Cartbase backend's order.placed CAPI Purchase.

package/src/tracking/gtag.ts

@@ -56,6 +56,24 @@ type GA4BeginCheckoutData = {
   coupon?: string
 }
 
+type GA4AddShippingInfoData = {
+  currency: string
+  value: number
+  items: GA4Item[]
+  /** The delivery method the shopper chose, GA4's own field name. */
+  shipping_tier?: string
+  coupon?: string
+}
+
+type GA4AddPaymentInfoData = {
+  currency: string
+  value: number
+  items: GA4Item[]
+  /** "card" or "cod" here: GA4 defines it as the chosen method of payment. */
+  payment_type?: string
+  coupon?: string
+}
+
 type GA4PurchaseData = {
   transaction_id: string
   currency: string
@@ -101,6 +119,18 @@ export function trackGABeginCheckout(data: GA4BeginCheckoutData): void {
   gtag("event", "begin_checkout", data)
 }
 
+export function trackGAAddShippingInfo(data: GA4AddShippingInfoData): void {
+  const gtag = safeGtag()
+  if (!gtag) return
+  gtag("event", "add_shipping_info", data)
+}
+
+export function trackGAAddPaymentInfo(data: GA4AddPaymentInfoData): void {
+  const gtag = safeGtag()
+  if (!gtag) return
+  gtag("event", "add_payment_info", data)
+}
+
 /**
  * Purchase event — GA4 deduplicates by `transaction_id`. Pass the SAME
  * `String(order.display_id)` here AND in the backend Measurement Protocol
@@ -209,5 +239,7 @@ export type {
   GA4ViewItemData,
   GA4AddToCartData,
   GA4BeginCheckoutData,
+  GA4AddShippingInfoData,
+  GA4AddPaymentInfoData,
   GA4PurchaseData,
 }

package/src/tracking/index.ts

@@ -29,7 +29,10 @@
  *     analytics destination)
  *   - ONE call per commerce moment, every vendor at once (prefer these):
  *     trackProductView / trackCartAdd / trackCheckoutStart /
- *     trackOrderPurchase
+ *     trackCheckoutShippingInfo / trackCheckoutPaymentInfo /
+ *     trackOrderPurchase. The three checkout moments are fired FOR a store
+ *     by `useCheckoutOrchestration` (see `useCheckoutFunnel`), so a
+ *     checkout built on the kit reports the whole funnel with no wiring
  *   - Meta Pixel client helpers: trackViewContent / trackAddToCart /
  *     trackInitiateCheckout / trackPurchase / trackLead
  *   - GA4 client helpers: trackGAViewItem / trackGAAddToCart /
@@ -76,6 +79,9 @@ export {
   setConsent,
   openConsentSettings,
   readConsentCookie,
+  consentDecision,
+  CONSENT_CHANGED_EVENT,
+  CONSENT_REQUIRED_FLAG,
   writeConsentCookie,
   shouldRenderBanner,
   pickConsentCopy,
@@ -95,11 +101,22 @@ export {
   trackViewContent,
   trackAddToCart,
   trackInitiateCheckout,
+  trackAddShippingInfo,
+  trackAddPaymentInfo,
   trackPurchase,
   trackLead,
   generateEventId,
+  type CheckoutStepContext,
   type LeadContext,
 } from "./fbq"
+// The once-per-cart guard behind the checkout funnel's mid-funnel steps,
+// and the deterministic event id that backs it up on Meta's side.
+export {
+  markFiredOnce,
+  hasFired,
+  forgetFiredEvents,
+  checkoutStepEventId,
+} from "./once"
 export {
   setTrackingDefaults,
   getOrCreateAnonId,
@@ -109,6 +126,7 @@ export {
   rememberKnownVisitor,
   captureUtmsFromUrl,
   captureClickIdsFromUrl,
+  readBrowserAttribution,
   getCapturedFirstTouchUtms,
   getCapturedLastTouchUtms,
   sha256Hex,
@@ -124,6 +142,8 @@ export {
   trackProductView,
   trackCartAdd,
   trackCheckoutStart,
+  trackCheckoutShippingInfo,
+  trackCheckoutPaymentInfo,
   trackOrderPurchase,
   type TrackedLine,
   type TrackedOrder,
@@ -132,6 +152,7 @@ export {
   trackTikTokViewContent,
   trackTikTokAddToCart,
   trackTikTokInitiateCheckout,
+  trackTikTokAddPaymentInfo,
   trackTikTokPurchase,
   applyTikTokConsent,
   tiktokPurchaseEventId,
@@ -157,6 +178,8 @@ export {
   trackGAViewItem,
   trackGAAddToCart,
   trackGABeginCheckout,
+  trackGAAddShippingInfo,
+  trackGAAddPaymentInfo,
   trackGAPurchase,
   setEnhancedConversions,
   type EnhancedConversionsInput,
@@ -165,10 +188,14 @@ export {
   trackRybbitViewItem,
   trackRybbitAddToCart,
   trackRybbitBeginCheckout,
+  trackRybbitAddShippingInfo,
+  trackRybbitAddPaymentInfo,
   trackRybbitPurchase,
   type RybbitViewItemData,
   type RybbitAddToCartData,
   type RybbitBeginCheckoutData,
+  type RybbitAddShippingInfoData,
+  type RybbitAddPaymentInfoData,
   type RybbitPurchaseData,
 } from "./rybbit-events"
 export { getTrackingConfig } from "./get-tracking-config"
@@ -188,6 +215,8 @@ export type {
   ViewContentData,
   AddToCartData,
   InitiateCheckoutData,
+  AddShippingInfoData,
+  AddPaymentInfoData,
   PurchaseData,
   LeadData,
 } from "./types"
@@ -197,5 +226,7 @@ export type {
   GA4ViewItemData,
   GA4AddToCartData,
   GA4BeginCheckoutData,
+  GA4AddShippingInfoData,
+  GA4AddPaymentInfoData,
   GA4PurchaseData,
 } from "./gtag"

package/src/tracking/once.ts

@@ -0,0 +1,137 @@
+"use client"
+
+/**
+ * once — "fire this tracking event at most once per cart" guard.
+ *
+ * Why this exists:
+ *
+ *   The mid-funnel checkout events (add_shipping_info, add_payment_info)
+ *   are driven by FORM STATE, not by a one-shot user action. A shopper
+ *   can switch courier, toggle card and cash on delivery, correct a typo
+ *   in their address or refresh the page, and each of those re-runs the
+ *   effect that would fire the event. Without a guard one shopper emits a
+ *   dozen add_payment_info events, which wrecks the funnel ratios in GA4
+ *   and Rybbit and teaches Meta's optimizer that the event is worthless.
+ *
+ *   A `useRef` guard is NOT enough: it lives in React memory and resets on
+ *   every remount, so a refresh or a walk back into the checkout re-fires.
+ *   The guard has to outlive the component.
+ *
+ * Design:
+ *
+ *   - Keyed by `${event}:${cartId}` so a genuinely NEW cart (the shopper
+ *     bought, then started a second order) fires its own events. The same
+ *     cart never fires twice.
+ *   - `sessionStorage`, not `localStorage`: the guard should expire when
+ *     the browsing session does. A shopper returning tomorrow to the same
+ *     abandoned cart is a new session and legitimately re-enters the
+ *     funnel.
+ *   - An in-memory Set mirrors the store, so repeated calls within one
+ *     page never touch sessionStorage (Safari throws on quota and in
+ *     private mode; we degrade to memory-only rather than fire twice).
+ *
+ * Belt and braces: callers pair this with a DETERMINISTIC `event_id` (see
+ * `checkoutStepEventId`) so that even if the guard is defeated, by two
+ * tabs on one cart or by storage cleared mid-session, Meta still collapses
+ * the duplicates server-side by event_id, exactly as it does for
+ * Purchase's `purchase_${display_id}`.
+ */
+
+const STORAGE_KEY = "cartbase:fired-events"
+
+/** Mirrors sessionStorage so repeat calls in one page skip storage I/O. */
+const memory = new Set<string>()
+
+function readStore(): Set<string> {
+  if (memory.size > 0) return memory
+  if (typeof window === "undefined") return memory
+  try {
+    const raw = window.sessionStorage.getItem(STORAGE_KEY)
+    if (raw) {
+      const parsed = JSON.parse(raw) as unknown
+      if (Array.isArray(parsed)) {
+        for (const k of parsed) if (typeof k === "string") memory.add(k)
+      }
+    }
+  } catch {
+    // Private mode, quota, corrupt JSON: memory-only from here.
+  }
+  return memory
+}
+
+function persist(): void {
+  if (typeof window === "undefined") return
+  try {
+    window.sessionStorage.setItem(
+      STORAGE_KEY,
+      JSON.stringify(Array.from(memory))
+    )
+  } catch {
+    // Storage unavailable: the in-memory Set still dedupes this page.
+  }
+}
+
+/**
+ * Returns true the FIRST time it is called for a given (event, cartId)
+ * pair and false every time after, marking the pair as fired.
+ *
+ * Callers treat it as the gate itself:
+ *
+ *   if (!markFiredOnce("add_payment_info", cart.id)) return
+ *   trackCheckoutPaymentInfo(...)
+ *
+ * Returns false when `cartId` is missing: a checkout-step event with no
+ * cart to key on cannot be deduped, and firing an undedupable event is
+ * worse than dropping it.
+ */
+export function markFiredOnce(
+  event: string,
+  cartId: string | undefined | null
+): boolean {
+  if (!cartId) return false
+  if (typeof window === "undefined") return false
+
+  const key = `${event}:${cartId}`
+  const store = readStore()
+  if (store.has(key)) return false
+
+  store.add(key)
+  persist()
+  return true
+}
+
+/** Read-only check, does not mark. For conditional UI and debugging. */
+export function hasFired(
+  event: string,
+  cartId: string | undefined | null
+): boolean {
+  if (!cartId || typeof window === "undefined") return false
+  return readStore().has(`${event}:${cartId}`)
+}
+
+/**
+ * Deterministic Meta `event_id` for a checkout-step event.
+ *
+ * Unlike `generateEventId()` (random, for events with no natural key),
+ * this derives the id from the cart, so the SAME logical action always
+ * produces the SAME id. That gives Meta a server-side dedup key: two tabs,
+ * a restored session or a retried request all collapse into one event
+ * instead of inflating the count. Same principle as Purchase's
+ * `purchase_${display_id}`.
+ */
+export function checkoutStepEventId(event: string, cartId: string): string {
+  return `${event}_${cartId}`
+}
+
+/**
+ * Forget every guard for one cart. Called when the order is placed, so a
+ * shopper who starts a second order in the same session is not silenced by
+ * the keys of the cart they just bought.
+ */
+export function forgetFiredEvents(cartId: string | undefined | null): void {
+  if (!cartId) return
+  for (const key of Array.from(memory)) {
+    if (key.endsWith(`:${cartId}`)) memory.delete(key)
+  }
+  persist()
+}