@instockng/storefront-ui 1.0.31 → 1.0.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instockng/storefront-ui",
-  "version": "1.0.31",
+  "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/components/Checkout.tsx

@@ -153,6 +153,7 @@ export function Checkout({
 
   // Paystack payment integration
   const paystack = usePaystackPayment({
+    isOpen,
     publicKey: paystackPublicKey || '',
     onSuccess: async (response) => {
 

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/hooks/usePaystackPayment.ts

@@ -48,12 +48,14 @@ export interface PaystackResponse {
 }
 
 export interface UsePaystackPaymentOptions {
+  isOpen: boolean;
   publicKey: string;
   onSuccess?: (response: PaystackResponse) => void;
   onClose?: () => void;
 }
 
 export function usePaystackPayment({
+  isOpen,
   publicKey,
   onSuccess,
   onClose,
@@ -64,6 +66,11 @@ export function usePaystackPayment({
 
   // Load Paystack Inline script
   useEffect(() => {
+
+    if (!isOpen) {
+      return;
+    }
+
     // Check if script is already loaded
     if (window.PaystackPop) {
       setIsLoaded(true);
@@ -93,7 +100,7 @@ export function usePaystackPayment({
     return () => {
       // Don't remove script on unmount as it can be reused
     };
-  }, []);
+  }, [isOpen]);
 
   const initializePayment = useCallback(
     (config: Omit<PaystackConfig, 'key' | 'callback' | 'onClose'>) => {

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,226 @@
+'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) => 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,
+        price: price,
+        quantity: quantity,
+        currency: 'NGN',
+      },
+      eventID
+    );
+  };
+
+  const trackInitiateCheckout = (
+    cartTotal: number,
+    itemCount: number,
+    eventID?: string
+  ) => {
+    track(
+      'InitiateCheckout',
+      {
+        content_type: 'product',
+        value: cartTotal,
+        currency: 'NGN',
+        num_items: itemCount,
+      },
+      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;
+}