@instockng/storefront-ui 1.0.32 → 1.0.33

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;
+}