@instockng/storefront-ui 1.0.32 → 1.0.33

package/dist/index98.mjs

@@ -1,218 +1,31 @@
 'use client';
-import { __module as m } from "./index148.mjs";
-import "./index69.mjs";
-import { __require as j } from "./index149.mjs";
-import { __require as V } from "./index150.mjs";
-import { __require as k } from "./index151.mjs";
-import { __require as G } from "./index152.mjs";
-import { __require as W } from "./index153.mjs";
-import { __exports as X } from "./index74.mjs";
-var M;
-function ee() {
-  return M ? m.exports : (M = 1, function(N, c) {
-    Object.defineProperty(c, "__esModule", {
-      value: !0
-    });
-    function b(t, e) {
-      for (var r in e) Object.defineProperty(t, r, {
-        enumerable: !0,
-        get: e[r]
-      });
-    }
-    b(c, {
-      createRouteLoader: function() {
-        return B;
-      },
-      getClientBuildManifest: function() {
-        return q;
-      },
-      isAssetError: function() {
-        return L;
-      },
-      markAssetError: function() {
-        return f;
+import { __exports as u } from "./index148.mjs";
+var c;
+function o() {
+  if (c) return u;
+  c = 1;
+  function p(r) {
+    if (typeof WeakMap != "function") return null;
+    var n = /* @__PURE__ */ new WeakMap(), e = /* @__PURE__ */ new WeakMap();
+    return (p = function(t) {
+      return t ? e : n;
+    })(r);
+  }
+  function f(r, n) {
+    if (!n && r && r.__esModule) return r;
+    if (r === null || typeof r != "object" && typeof r != "function") return { default: r };
+    var e = p(n);
+    if (e && e.has(r)) return e.get(r);
+    var t = { __proto__: null }, _ = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for (var i in r)
+      if (i !== "default" && Object.prototype.hasOwnProperty.call(r, i)) {
+        var a = _ ? Object.getOwnPropertyDescriptor(r, i) : null;
+        a && (a.get || a.set) ? Object.defineProperty(t, i, a) : t[i] = r[i];
       }
-    });
-    const D = /* @__PURE__ */ X._(j()), v = V(), p = k(), A = G(), y = W(), S = 3800;
-    function P(t, e, r) {
-      let l = e.get(t);
-      if (l)
-        return "future" in l ? l.future : Promise.resolve(l);
-      let s;
-      const a = new Promise((d) => {
-        s = d;
-      });
-      return e.set(t, {
-        resolve: s,
-        future: a
-      }), r ? r().then((d) => (s(d), d)).catch((d) => {
-        throw e.delete(t), d;
-      }) : a;
-    }
-    const w = Symbol("ASSET_LOAD_ERROR");
-    function f(t) {
-      return Object.defineProperty(t, w, {});
-    }
-    function L(t) {
-      return t && w in t;
-    }
-    function T(t) {
-      try {
-        return t = document.createElement("link"), // detect IE11 since it supports prefetch but isn't detected
-        // with relList.support
-        !!window.MSInputMethodContext && !!document.documentMode || t.relList.supports("prefetch");
-      } catch {
-        return !1;
-      }
-    }
-    const C = T(), h = () => (0, A.getDeploymentIdQueryOrEmptyString)();
-    function F(t, e, r) {
-      return new Promise((l, s) => {
-        const a = `
-      link[rel="prefetch"][href^="` + t + `"],
-      link[rel="preload"][href^="` + t + `"],
-      script[src^="` + t + '"]';
-        if (document.querySelector(a))
-          return l();
-        r = document.createElement("link"), r.as = e, r.rel = "prefetch", r.crossOrigin = process.env.__NEXT_CROSS_ORIGIN, r.onload = l, r.onerror = () => s(f(new Error("Failed to prefetch: " + t))), r.href = t, document.head.appendChild(r);
-      });
-    }
-    function R(t, e) {
-      return new Promise((r, l) => {
-        e = document.createElement("script"), e.onload = r, e.onerror = () => l(f(new Error("Failed to load script: " + t))), e.crossOrigin = process.env.__NEXT_CROSS_ORIGIN, e.src = t, document.body.appendChild(e);
-      });
-    }
-    let g;
-    function I(t, e, r) {
-      return new Promise((l, s) => {
-        let a = !1;
-        t.then((d) => {
-          a = !0, l(d);
-        }).catch(s), process.env.NODE_ENV === "development" && (g || Promise.resolve()).then(() => {
-          (0, p.requestIdleCallback)(() => setTimeout(() => {
-            a || s(r);
-          }, e));
-        }), process.env.NODE_ENV !== "development" && (0, p.requestIdleCallback)(() => setTimeout(() => {
-          a || s(r);
-        }, e));
-      });
-    }
-    function q() {
-      if (self.__BUILD_MANIFEST)
-        return Promise.resolve(self.__BUILD_MANIFEST);
-      const t = new Promise((e) => {
-        const r = self.__BUILD_MANIFEST_CB;
-        self.__BUILD_MANIFEST_CB = () => {
-          e(self.__BUILD_MANIFEST), r && r();
-        };
-      });
-      return I(t, S, f(new Error("Failed to load client build manifest")));
-    }
-    function O(t, e) {
-      if (process.env.NODE_ENV === "development") {
-        const r = t + "/_next/static/chunks/pages" + (0, y.encodeURIPath)((0, D.default)(e, ".js")) + h();
-        return Promise.resolve({
-          scripts: [
-            (0, v.__unsafeCreateTrustedScriptURL)(r)
-          ],
-          // Styles are handled by `style-loader` in development:
-          css: []
-        });
-      }
-      return q().then((r) => {
-        if (!(e in r))
-          throw f(new Error("Failed to lookup route: " + e));
-        const l = r[e].map((s) => t + "/_next/" + (0, y.encodeURIPath)(s));
-        return {
-          scripts: l.filter((s) => s.endsWith(".js")).map((s) => (0, v.__unsafeCreateTrustedScriptURL)(s) + h()),
-          css: l.filter((s) => s.endsWith(".css")).map((s) => s + h())
-        };
-      });
-    }
-    function B(t) {
-      const e = /* @__PURE__ */ new Map(), r = /* @__PURE__ */ new Map(), l = /* @__PURE__ */ new Map(), s = /* @__PURE__ */ new Map();
-      function a(n) {
-        if (process.env.NODE_ENV !== "development") {
-          let i = r.get(n.toString());
-          return i || (document.querySelector('script[src^="' + n + '"]') ? Promise.resolve() : (r.set(n.toString(), i = R(n)), i));
-        } else
-          return R(n);
-      }
-      function d(n) {
-        let i = l.get(n);
-        return i || (l.set(n, i = fetch(n, {
-          credentials: "same-origin"
-        }).then((o) => {
-          if (!o.ok)
-            throw new Error("Failed to load stylesheet: " + n);
-          return o.text().then((u) => ({
-            href: n,
-            content: u
-          }));
-        }).catch((o) => {
-          throw f(o);
-        })), i);
-      }
-      return {
-        whenEntrypoint(n) {
-          return P(n, e);
-        },
-        onEntrypoint(n, i) {
-          (i ? Promise.resolve().then(() => i()).then((o) => ({
-            component: o && o.default || o,
-            exports: o
-          }), (o) => ({
-            error: o
-          })) : Promise.resolve(void 0)).then((o) => {
-            const u = e.get(n);
-            u && "resolve" in u ? o && (e.set(n, o), u.resolve(o)) : (o ? e.set(n, o) : e.delete(n), s.delete(n));
-          });
-        },
-        loadRoute(n, i) {
-          return P(n, s, () => {
-            let o;
-            return process.env.NODE_ENV === "development" && (g = new Promise((u) => {
-              o = u;
-            })), I(O(t, n).then((u) => {
-              let { scripts: _, css: E } = u;
-              return Promise.all([
-                e.has(n) ? [] : Promise.all(_.map(a)),
-                Promise.all(E.map(d))
-              ]);
-            }).then((u) => this.whenEntrypoint(n).then((_) => ({
-              entrypoint: _,
-              styles: u[1]
-            }))), S, f(new Error("Route did not complete loading: " + n))).then((u) => {
-              let { entrypoint: _, styles: E } = u;
-              const U = Object.assign({
-                styles: E
-              }, _);
-              return "error" in _ ? _ : U;
-            }).catch((u) => {
-              if (i)
-                throw u;
-              return {
-                error: u
-              };
-            }).finally(() => o == null ? void 0 : o());
-          });
-        },
-        prefetch(n) {
-          let i;
-          return (i = navigator.connection) && (i.saveData || /2g/.test(i.effectiveType)) ? Promise.resolve() : O(t, n).then((o) => Promise.all(C ? o.scripts.map((u) => F(u.toString(), "script")) : [])).then(() => {
-            (0, p.requestIdleCallback)(() => this.loadRoute(n, !0).catch(() => {
-            }));
-          }).catch(
-            // swallow prefetch errors
-            () => {
-            }
-          );
-        }
-      };
-    }
-    (typeof c.default == "function" || typeof c.default == "object" && c.default !== null) && typeof c.default.__esModule > "u" && (Object.defineProperty(c.default, "__esModule", { value: !0 }), Object.assign(c.default, c), N.exports = c.default);
-  }(m, m.exports), m.exports);
+    return t.default = r, e && e.set(r, t), t;
+  }
+  return u._ = f, u;
 }
 export {
-  ee as __require
+  o as __require
 };

package/dist/index99.mjs

@@ -1,183 +1,21 @@
 'use client';
-import { __module as L } from "./index154.mjs";
-import "./index69.mjs";
-import { __require as K } from "./index96.mjs";
-import F from "react/jsx-runtime";
-import J from "react-dom";
-import N from "react";
-import { __require as B } from "./index155.mjs";
-import { __require as D } from "./index156.mjs";
-import { __require as G } from "./index151.mjs";
-import { __exports as Q } from "./index74.mjs";
-var w;
-function ie() {
-  return w ? L.exports : (w = 1, function(x, o) {
-    "use client";
-    Object.defineProperty(o, "__esModule", {
+import { __exports as e } from "./index149.mjs";
+var i;
+function u() {
+  return i ? e : (i = 1, function(r) {
+    Object.defineProperty(r, "__esModule", {
       value: !0
-    });
-    function M(t, e) {
-      for (var n in e) Object.defineProperty(t, n, {
-        enumerable: !0,
-        get: e[n]
-      });
-    }
-    M(o, {
-      default: function() {
-        return z;
-      },
-      handleClientScriptLoad: function() {
-        return C;
-      },
-      initScriptLoader: function() {
-        return $;
+    }), Object.defineProperty(r, "removeTrailingSlash", {
+      enumerable: !0,
+      get: function() {
+        return n;
       }
     });
-    const j = Q, P = K(), O = F, h = /* @__PURE__ */ j._(J), g = /* @__PURE__ */ P._(N), R = B(), k = D(), I = G(), v = /* @__PURE__ */ new Map(), p = /* @__PURE__ */ new Set(), A = (t) => {
-      if (h.default.preinit) {
-        t.forEach((e) => {
-          h.default.preinit(e, {
-            as: "style"
-          });
-        });
-        return;
-      }
-      if (typeof window < "u") {
-        let e = document.head;
-        t.forEach((n) => {
-          let s = document.createElement("link");
-          s.type = "text/css", s.rel = "stylesheet", s.href = n, e.appendChild(s);
-        });
-      }
-    }, y = (t) => {
-      const { src: e, id: n, onLoad: s = () => {
-      }, onReady: l = null, dangerouslySetInnerHTML: i, children: _ = "", strategy: S = "afterInteractive", onError: r, stylesheets: q } = t, c = n || e;
-      if (c && p.has(c))
-        return;
-      if (v.has(e)) {
-        p.add(c), v.get(e).then(s, r);
-        return;
-      }
-      const d = () => {
-        l && l(), p.add(c);
-      }, a = document.createElement("script"), u = new Promise((m, b) => {
-        a.addEventListener("load", function(f) {
-          m(), s && s.call(this, f), d();
-        }), a.addEventListener("error", function(f) {
-          b(f);
-        });
-      }).catch(function(m) {
-        r && r(m);
-      });
-      i ? (a.innerHTML = i.__html || "", d()) : _ ? (a.textContent = typeof _ == "string" ? _ : Array.isArray(_) ? _.join("") : "", d()) : e && (a.src = e, v.set(e, u)), (0, k.setAttributesFromProps)(a, t), S === "worker" && a.setAttribute("type", "text/partytown"), a.setAttribute("data-nscript", S), q && A(q), document.body.appendChild(a);
-    };
-    function C(t) {
-      const { strategy: e = "afterInteractive" } = t;
-      e === "lazyOnload" ? window.addEventListener("load", () => {
-        (0, I.requestIdleCallback)(() => y(t));
-      }) : y(t);
-    }
-    function H(t) {
-      document.readyState === "complete" ? (0, I.requestIdleCallback)(() => y(t)) : window.addEventListener("load", () => {
-        (0, I.requestIdleCallback)(() => y(t));
-      });
+    function n(a) {
+      return a.replace(/\/$/, "") || "/";
     }
-    function T() {
-      [
-        ...document.querySelectorAll('[data-nscript="beforeInteractive"]'),
-        ...document.querySelectorAll('[data-nscript="beforePageRender"]')
-      ].forEach((e) => {
-        const n = e.id || e.getAttribute("src");
-        p.add(n);
-      });
-    }
-    function $(t) {
-      t.forEach(C), T();
-    }
-    function E(t) {
-      const { id: e, src: n = "", onLoad: s = () => {
-      }, onReady: l = null, strategy: i = "afterInteractive", onError: _, stylesheets: S, ...r } = t, { updateScripts: q, scripts: c, getIsSsr: d, appDir: a, nonce: u } = (0, g.useContext)(R.HeadManagerContext), m = (0, g.useRef)(!1);
-      (0, g.useEffect)(() => {
-        const f = e || n;
-        m.current || (l && f && p.has(f) && l(), m.current = !0);
-      }, [
-        l,
-        e,
-        n
-      ]);
-      const b = (0, g.useRef)(!1);
-      if ((0, g.useEffect)(() => {
-        b.current || (i === "afterInteractive" ? y(t) : i === "lazyOnload" && H(t), b.current = !0);
-      }, [
-        t,
-        i
-      ]), (i === "beforeInteractive" || i === "worker") && (q ? (c[i] = (c[i] || []).concat([
-        {
-          id: e,
-          src: n,
-          onLoad: s,
-          onReady: l,
-          onError: _,
-          ...r
-        }
-      ]), q(c)) : d && d() ? p.add(e || n) : d && !d() && y(t)), a) {
-        if (S && S.forEach((f) => {
-          h.default.preinit(f, {
-            as: "style"
-          });
-        }), i === "beforeInteractive")
-          return n ? (h.default.preload(n, r.integrity ? {
-            as: "script",
-            integrity: r.integrity,
-            nonce: u,
-            crossOrigin: r.crossOrigin
-          } : {
-            as: "script",
-            nonce: u,
-            crossOrigin: r.crossOrigin
-          }), /* @__PURE__ */ (0, O.jsx)("script", {
-            nonce: u,
-            dangerouslySetInnerHTML: {
-              __html: "(self.__next_s=self.__next_s||[]).push(" + JSON.stringify([
-                n,
-                {
-                  ...r,
-                  id: e
-                }
-              ]) + ")"
-            }
-          })) : (r.dangerouslySetInnerHTML && (r.children = r.dangerouslySetInnerHTML.__html, delete r.dangerouslySetInnerHTML), /* @__PURE__ */ (0, O.jsx)("script", {
-            nonce: u,
-            dangerouslySetInnerHTML: {
-              __html: "(self.__next_s=self.__next_s||[]).push(" + JSON.stringify([
-                0,
-                {
-                  ...r,
-                  id: e
-                }
-              ]) + ")"
-            }
-          }));
-        i === "afterInteractive" && n && h.default.preload(n, r.integrity ? {
-          as: "script",
-          integrity: r.integrity,
-          nonce: u,
-          crossOrigin: r.crossOrigin
-        } : {
-          as: "script",
-          nonce: u,
-          crossOrigin: r.crossOrigin
-        });
-      }
-      return null;
-    }
-    Object.defineProperty(E, "__nextScript", {
-      value: !0
-    });
-    const z = E;
-    (typeof o.default == "function" || typeof o.default == "object" && o.default !== null) && typeof o.default.__esModule > "u" && (Object.defineProperty(o.default, "__esModule", { value: !0 }), Object.assign(o.default, o), x.exports = o.default);
-  }(L, L.exports), L.exports);
+  }(e), e);
 }
 export {
-  ie as __require
+  u as __require
 };

package/dist/providers/StorefrontProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StorefrontProvider.d.ts","sourceRoot":"","sources":["../../src/providers/StorefrontProvider.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAgB,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAG1E,MAAM,WAAW,uBAAuB;IACtC,+BAA+B;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB,qCAAqC;IACrC,SAAS,EAAE,MAAM,CAAC;IAClB,sFAAsF;IACtF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yDAAyD;IACzD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,4DAA4D;IAC5D,iBAAiB,CAAC,EAAE,iBAAiB,CAAC,mBAAmB,CAAC,CAAC;CAC5D;AA0BD;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,QAAQ,EACR,SAAS,EACT,MAAM,EACN,aAAa,EACb,iBAAiB,GAClB,EAAE,uBAAuB,2CAezB"}
+{"version":3,"file":"StorefrontProvider.d.ts","sourceRoot":"","sources":["../../src/providers/StorefrontProvider.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAgB,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAI1E,MAAM,WAAW,uBAAuB;IACtC,+BAA+B;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB,qCAAqC;IACrC,SAAS,EAAE,MAAM,CAAC;IAClB,sFAAsF;IACtF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yDAAyD;IACzD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,4DAA4D;IAC5D,iBAAiB,CAAC,EAAE,iBAAiB,CAAC,mBAAmB,CAAC,CAAC;CAC5D;AA4BD;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,QAAQ,EACR,SAAS,EACT,MAAM,EACN,aAAa,EACb,iBAAiB,GAClB,EAAE,uBAAuB,2CAezB"}

package/dist/providers/TikTokPixelProvider.d.ts

@@ -0,0 +1,22 @@
+import { type ReactNode } from 'react';
+interface TikTokPixelContextType {
+    track: (event: string, data?: Record<string, unknown>, eventID?: string) => void;
+    trackPageView: () => void;
+    trackProductView: (productId: string, productName: string, price: number, eventID?: string) => void;
+    trackAddToCart: (productId: string, productName: string, price: number, quantity: number, eventID?: string) => void;
+    trackInitiateCheckout: (cartTotal: number, itemCount: number, eventID?: string) => void;
+    trackPurchase: (orderTotal: number, currency: string, orderId: string, items: Array<{
+        id: string;
+        quantity: number;
+        item_price: number;
+    }>, eventID?: string) => void;
+}
+interface TikTokPixelProviderProps {
+    children: ReactNode;
+    pixelId?: string;
+    debug?: boolean;
+}
+export declare function TikTokPixelProvider({ children, pixelId, debug, }: TikTokPixelProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useTikTokPixel(): TikTokPixelContextType;
+export {};
+//# sourceMappingURL=TikTokPixelProvider.d.ts.map

package/dist/providers/TikTokPixelProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TikTokPixelProvider.d.ts","sourceRoot":"","sources":["../../src/providers/TikTokPixelProvider.tsx"],"names":[],"mappings":"AAEA,OAAc,EAKZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,UAAU,sBAAsB;IAC9B,KAAK,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,OAAO,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACjF,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,gBAAgB,EAAE,CAChB,SAAS,EAAE,MAAM,EACjB,WAAW,EAAE,MAAM,EACnB,KAAK,EAAE,MAAM,EACb,OAAO,CAAC,EAAE,MAAM,KACb,IAAI,CAAC;IACV,cAAc,EAAE,CACd,SAAS,EAAE,MAAM,EACjB,WAAW,EAAE,MAAM,EACnB,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,MAAM,EAChB,OAAO,CAAC,EAAE,MAAM,KACb,IAAI,CAAC;IACV,qBAAqB,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACxF,aAAa,EAAE,CACb,UAAU,EAAE,MAAM,EAClB,QAAQ,EAAE,MAAM,EAChB,OAAO,EAAE,MAAM,EACf,KAAK,EAAE,KAAK,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,MAAM,CAAA;KAAE,CAAC,EAClE,OAAO,CAAC,EAAE,MAAM,KACb,IAAI,CAAC;CACX;AAID,UAAU,wBAAwB;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAID,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,OAAO,EACP,KAAa,GACd,EAAE,wBAAwB,2CAuK1B;AAED,wBAAgB,cAAc,IAAI,sBAAsB,CAMvD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instockng/storefront-ui",
-  "version": "1.0.32",
+  "version": "1.0.33",
   "description": "Pre-built UI components for OMS e-commerce sites",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -45,11 +45,12 @@
   "author": "Ola Wale",
   "license": "MIT",
   "dependencies": {
-    "@instockng/api-client": "^1.0.12",
+    "@instockng/api-client": "^1.0.16",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.0",
     "react-facebook-pixel": "^1.0.4",
     "tailwind-merge": "^2.2.0",
+    "tiktok-pixel": "^2.0.3",
     "yup": "^1.7.1"
   },
   "peerDependencies": {

package/src/contexts/CartContext.tsx

@@ -23,6 +23,7 @@ import {
 } from '@instockng/api-client';
 import { ShoppingCart } from '../components/ShoppingCart';
 import { useMetaPixel } from '../providers/MetaPixelProvider';
+import { useTikTokPixel } from '../providers/TikTokPixelProvider';
 import { getFbCookies } from '../lib/utils';
 
 const CART_ID_KEY = 'oms_cart_id';
@@ -95,7 +96,10 @@ export function CartProvider({ children, brandSlug, initialCartId, shoppingCartP
   const isHandlingErrorRef = useRef(false);
 
   // Get Meta Pixel tracking methods
-  const { trackAddToCart, trackInitiateCheckout } = useMetaPixel();
+  const { trackAddToCart: trackMetaAddToCart, trackInitiateCheckout: trackMetaInitiateCheckout } = useMetaPixel();
+
+  // Get TikTok Pixel tracking methods
+  const { trackAddToCart: trackTikTokAddToCart, trackInitiateCheckout: trackTikTokInitiateCheckout } = useTikTokPixel();
 
   // Set mounted flag on client
   useEffect(() => {
@@ -256,14 +260,18 @@ export function CartProvider({ children, brandSlug, initialCartId, shoppingCartP
         const eventID = `cart_${cartId}_item_${addedItem.id}`;
 
         // Track AddToCart event with Meta Pixel and matching event ID
-        trackAddToCart(productSlug, productName, price, quantity, eventID);
+        trackMetaAddToCart(productSlug, productName, price, quantity, eventID);
+
+        // Track AddToCart event with TikTok Pixel and matching event ID
+        trackTikTokAddToCart(productSlug, productName, price, quantity, eventID);
       } else {
         // Fallback without event ID if item not found
-        trackAddToCart(productSlug, productName, price, quantity);
+        trackMetaAddToCart(productSlug, productName, price, quantity);
+        trackTikTokAddToCart(productSlug, productName, price, quantity);
       }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [cartId, trackAddToCart]
+    [cartId, trackMetaAddToCart, trackTikTokAddToCart]
   );
 
   const updateItem = useCallback(
@@ -335,8 +343,11 @@ export function CartProvider({ children, brandSlug, initialCartId, shoppingCartP
     const eventID = `cart_${cartId}_checkout`;
 
     // Track InitiateCheckout event with Meta Pixel
-    trackInitiateCheckout(cartTotal, itemCount, eventID);
-  }, [cart, cartId, trackInitiateCheckout]);
+    trackMetaInitiateCheckout(cartTotal, itemCount, eventID);
+
+    // Track InitiateCheckout event with TikTok Pixel
+    trackTikTokInitiateCheckout(cartTotal, itemCount, eventID);
+  }, [cart, cartId, trackMetaInitiateCheckout, trackTikTokInitiateCheckout]);
 
   const value: CartContextValue = {
     cart: cart || null,

package/src/index.ts

@@ -14,6 +14,11 @@ export { CartProvider, useCart } from './contexts/CartContext';
 // Export Meta Pixel tracking
 export { useMetaPixel, MetaPixelProvider } from './providers/MetaPixelProvider';
 export type { MetaPixelProviderProps, PurchaseItem } from './providers/MetaPixelProvider';
+
+// Export TikTok Pixel tracking
+export { useTikTokPixel, TikTokPixelProvider } from './providers/TikTokPixelProvider';
+
+// Export page tracking hook
 export { usePageTracking } from './hooks/usePageTracking';
 
 // Export main components

package/src/providers/StorefrontProvider.tsx

@@ -29,6 +29,7 @@ import { ReactNode } from 'react';
 import { ApiClientProvider, useGetBrand } from '@instockng/api-client';
 import { CartProvider, CartProviderProps } from '../contexts/CartContext';
 import { MetaPixelProvider } from './MetaPixelProvider';
+import { TikTokPixelProvider } from './TikTokPixelProvider';
 
 export interface StorefrontProviderProps {
   /** Your children components */
@@ -44,7 +45,7 @@ export interface StorefrontProviderProps {
 }
 
 /**
- * Internal component that fetches brand config and wraps children with MetaPixelProvider
+ * Internal component that fetches brand config and wraps children with MetaPixelProvider and TikTokPixelProvider
  */
 function StorefrontProviderInner({
   children,
@@ -56,13 +57,15 @@ function StorefrontProviderInner({
 
   return (
     <MetaPixelProvider pixelId={brand?.metaPixelId}>
-      <CartProvider
-        brandSlug={brandSlug}
-        initialCartId={initialCartId}
-        shoppingCartProps={shoppingCartProps}
-      >
-        {children}
-      </CartProvider>
+      <TikTokPixelProvider pixelId={brand?.tiktokPixelId}>
+        <CartProvider
+          brandSlug={brandSlug}
+          initialCartId={initialCartId}
+          shoppingCartProps={shoppingCartProps}
+        >
+          {children}
+        </CartProvider>
+      </TikTokPixelProvider>
     </MetaPixelProvider>
   );
 }