@instockng/storefront-ui 1.0.32 → 1.0.34

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 "./index150.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,26 @@
+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, contents?: Array<{
+        content_id: string;
+        quantity: number;
+        price: number;
+    }>) => 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,CACrB,SAAS,EAAE,MAAM,EACjB,SAAS,EAAE,MAAM,EACjB,OAAO,CAAC,EAAE,MAAM,EAChB,QAAQ,CAAC,EAAE,KAAK,CAAC;QAAE,UAAU,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,KACtE,IAAI,CAAC;IACV,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,2CAyK1B;AAED,wBAAgB,cAAc,IAAI,sBAAsB,CAMvD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instockng/storefront-ui",
-  "version": "1.0.32",
+  "version": "1.0.34",
   "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(
@@ -334,9 +342,19 @@ export function CartProvider({ children, brandSlug, initialCartId, shoppingCartP
     // Generate event ID matching backend format: cart_{cartId}_checkout
     const eventID = `cart_${cartId}_checkout`;
 
+    // Prepare contents array for TikTok Pixel
+    const contents = cart.items?.map((item) => ({
+      content_id: item.variant.sku,
+      quantity: item.quantity,
+      price: Number(item.variant.price),
+    })) || [];
+
     // 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, contents);
+  }, [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>
   );
 }

package/src/providers/TikTokPixelProvider.tsx

@@ -0,0 +1,233 @@
+'use client';
+
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  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,
+    contents?: Array<{ content_id: string; quantity: number; price: number }>
+  ) => void;
+  trackPurchase: (
+    orderTotal: number,
+    currency: string,
+    orderId: string,
+    items: Array<{ id: string; quantity: number; item_price: number }>,
+    eventID?: string
+  ) => void;
+}
+
+const TikTokPixelContext = createContext<TikTokPixelContextType | undefined>(undefined);
+
+interface TikTokPixelProviderProps {
+  children: ReactNode;
+  pixelId?: string;
+  debug?: boolean;
+}
+
+let ttqInstance: any = null;
+
+export function TikTokPixelProvider({
+  children,
+  pixelId,
+  debug = false,
+}: TikTokPixelProviderProps) {
+  const [isInitialized, setIsInitialized] = useState(false);
+
+  useEffect(() => {
+    // Only run on client side
+    if (typeof window === 'undefined') return;
+    if (!pixelId) {
+      if (debug) {
+        console.log('TikTok Pixel ID not provided. Tracking disabled.');
+      }
+      return;
+    }
+
+    // Initialize TikTok Pixel
+    const initTikTokPixel = async () => {
+      try {
+        // Dynamically import tiktok-pixel to avoid SSR issues
+        const TikTokPixel = (await import('tiktok-pixel')).default;
+
+        // Initialize pixel
+        TikTokPixel.init(pixelId, {}, { debug });
+
+        // Track initial page view
+        TikTokPixel.pageView();
+
+        ttqInstance = TikTokPixel;
+        setIsInitialized(true);
+
+        if (debug) {
+          console.log('TikTok Pixel initialized:', pixelId);
+        }
+      } catch (error) {
+        console.error('Failed to initialize TikTok Pixel:', error);
+      }
+    };
+
+    initTikTokPixel();
+  }, [pixelId, debug]);
+
+  const track = (event: string, data?: Record<string, unknown>, eventID?: string) => {
+    if (!isInitialized || !ttqInstance) {
+      if (debug) {
+        console.log('TikTok Pixel not initialized. Event not tracked:', event);
+      }
+      return;
+    }
+
+    try {
+      const eventData = eventID ? { ...data, event_id: eventID } : data;
+      ttqInstance.track(event, eventData);
+
+      if (debug) {
+        console.log('TikTok Pixel tracked event:', event, eventData);
+      }
+    } catch (error) {
+      console.error('Failed to track TikTok Pixel event:', error);
+    }
+  };
+
+  const trackPageView = () => {
+    if (!isInitialized || !ttqInstance) return;
+
+    try {
+      ttqInstance.pageView();
+
+      if (debug) {
+        console.log('TikTok Pixel tracked page view');
+      }
+    } catch (error) {
+      console.error('Failed to track TikTok Pixel page view:', error);
+    }
+  };
+
+  const trackProductView = (
+    productId: string,
+    productName: string,
+    price: number,
+    eventID?: string
+  ) => {
+    track(
+      'ViewContent',
+      {
+        content_type: 'product',
+        content_id: productId,
+        content_name: productName,
+        price: price,
+        currency: 'NGN',
+      },
+      eventID
+    );
+  };
+
+  const trackAddToCart = (
+    productId: string,
+    productName: string,
+    price: number,
+    quantity: number,
+    eventID?: string
+  ) => {
+    track(
+      'AddToCart',
+      {
+        content_type: 'product',
+        content_id: productId,
+        content_name: productName,
+        value: price * quantity,
+        quantity: quantity,
+        currency: 'NGN',
+      },
+      eventID
+    );
+  };
+
+  const trackInitiateCheckout = (
+    cartTotal: number,
+    itemCount: number,
+    eventID?: string,
+    contents?: Array<{ content_id: string; quantity: number; price: number }>
+  ) => {
+    track(
+      'InitiateCheckout',
+      {
+        content_type: 'product',
+        value: cartTotal,
+        currency: 'NGN',
+        num_items: itemCount,
+        ...(contents && contents.length > 0 ? { contents } : {}),
+      },
+      eventID
+    );
+  };
+
+  const trackPurchase = (
+    orderTotal: number,
+    currency: string,
+    orderId: string,
+    items: Array<{ id: string; quantity: number; item_price: number }>,
+    eventID?: string
+  ) => {
+    track(
+      'CompletePayment',
+      {
+        content_type: 'product',
+        value: orderTotal,
+        currency: currency,
+        contents: items.map((item) => ({
+          content_id: item.id,
+          quantity: item.quantity,
+          price: item.item_price,
+        })),
+      },
+      eventID
+    );
+  };
+
+  const contextValue: TikTokPixelContextType = {
+    track,
+    trackPageView,
+    trackProductView,
+    trackAddToCart,
+    trackInitiateCheckout,
+    trackPurchase,
+  };
+
+  return (
+    <TikTokPixelContext.Provider value={contextValue}>
+      {children}
+    </TikTokPixelContext.Provider>
+  );
+}
+
+export function useTikTokPixel(): TikTokPixelContextType {
+  const context = useContext(TikTokPixelContext);
+  if (context === undefined) {
+    throw new Error('useTikTokPixel must be used within a TikTokPixelProvider');
+  }
+  return context;
+}