@instockng/storefront-ui 1.0.21 → 1.0.22

package/src/contexts/CartContext.tsx

@@ -49,6 +49,8 @@ interface CartContextValue {
   applyDiscount: (code: string) => Promise<void>;
   /** Remove discount code */
   removeDiscount: () => Promise<void>;
+  /** Track InitiateCheckout event (call when user starts checkout flow) */
+  trackCheckoutInitiated: () => void;
   /** Clear cart (removes from localStorage) */
   clearCart: () => void;
   /** Clear cart and create a new one immediately */
@@ -92,7 +94,26 @@ export function CartProvider({ children, brandSlug, initialCartId, shoppingCartP
   const isHandlingErrorRef = useRef(false);
 
   // Get Meta Pixel tracking methods
-  const { trackAddToCart, trackPurchase } = useMetaPixel();
+  const { trackAddToCart, trackInitiateCheckout, trackPurchase } = useMetaPixel();
+
+  /**
+   * Extract fbc (Facebook Click ID) and fbp (Facebook Browser ID) cookies for attribution
+   */
+  const getFbCookies = useCallback(() => {
+    if (typeof document === 'undefined') return { fbc: undefined, fbp: undefined };
+
+    const getCookie = (name: string) => {
+      const value = `; ${document.cookie}`;
+      const parts = value.split(`; ${name}=`);
+      if (parts.length === 2) return parts.pop()?.split(';').shift();
+      return undefined;
+    };
+
+    return {
+      fbc: getCookie('_fbc'),
+      fbp: getCookie('_fbp'),
+    };
+  }, []);
 
   // Set mounted flag on client
   useEffect(() => {
@@ -226,11 +247,15 @@ export function CartProvider({ children, brandSlug, initialCartId, shoppingCartP
         item_price: Number(item.priceAtPurchase),
       })) || [];
 
+      // Generate event ID matching backend format: order_{orderId}
+      const eventID = `order_${order.id}`;
+
       trackPurchase(
         Number(order.totalPrice),
         'NGN',
         order.id,
-        items
+        items,
+        eventID
       );
     },
   });
@@ -245,13 +270,34 @@ export function CartProvider({ children, brandSlug, initialCartId, shoppingCartP
   const addItem = useCallback(
     async (productSlug: string, productName: string, price: number, sku: string, quantity: number) => {
       if (!cartId) throw new Error('No cart ID');
-      await addItemMutation.mutateAsync({ sku, quantity });
 
-      // Track AddToCart event with Meta Pixel
-      trackAddToCart(productSlug, productName, price, quantity);
+      // Get Facebook cookies for attribution
+      const { fbc, fbp } = getFbCookies();
+
+      // Add item to cart via API
+      const updatedCart = await addItemMutation.mutateAsync({ sku, quantity, fbc, fbp });
+
+      // Skip tracking if error response
+      if ('error' in updatedCart) return;
+
+      // Find the newly added item (last item with matching SKU)
+      const addedItem = updatedCart.items?.findLast(
+        (item) => item.variant?.sku === sku
+      );
+
+      if (addedItem) {
+        // Generate event ID matching backend format: cart_{cartId}_item_{itemId}
+        const eventID = `cart_${cartId}_item_${addedItem.id}`;
+
+        // Track AddToCart event with Meta Pixel and matching event ID
+        trackAddToCart(productSlug, productName, price, quantity, eventID);
+      } else {
+        // Fallback without event ID if item not found
+        trackAddToCart(productSlug, productName, price, quantity);
+      }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [cartId, trackAddToCart]
+    [cartId, trackAddToCart, getFbCookies]
   );
 
   const updateItem = useCallback(
@@ -310,6 +356,22 @@ export function CartProvider({ children, brandSlug, initialCartId, shoppingCartP
     setIsOpen(false);
   }, []);
 
+  const trackCheckoutInitiated = useCallback(() => {
+    if (!cart || !cartId) return;
+
+    // Get cart total from pricing
+    const cartTotal = Number(cart.pricing?.total || 0);
+
+    // Calculate item count
+    const itemCount = cart.items?.reduce((sum, item) => sum + item.quantity, 0) || 0;
+
+    // Generate event ID matching backend format: cart_{cartId}_checkout
+    const eventID = `cart_${cartId}_checkout`;
+
+    // Track InitiateCheckout event with Meta Pixel
+    trackInitiateCheckout(cartTotal, itemCount, eventID);
+  }, [cart, cartId, trackInitiateCheckout]);
+
   const value: CartContextValue = {
     cart: cart || null,
     cartId,
@@ -322,6 +384,7 @@ export function CartProvider({ children, brandSlug, initialCartId, shoppingCartP
     removeItem,
     applyDiscount,
     removeDiscount,
+    trackCheckoutInitiated,
     clearCart,
     clearAndCreateNewCart,
     refetch,

package/src/providers/MetaPixelProvider.tsx

@@ -18,7 +18,7 @@ interface MetaPixelContextValue {
   /**
    * Track a custom event
    */
-  track: (event: string, data?: Record<string, unknown>) => void;
+  track: (event: string, data?: Record<string, unknown>, eventID?: string) => void;
 
   /**
    * Track a page view
@@ -28,7 +28,7 @@ interface MetaPixelContextValue {
   /**
    * Track product view
    */
-  trackProductView: (productId: string, productName: string, price: number) => void;
+  trackProductView: (productId: string, productName: string, price: number, eventID?: string) => void;
 
   /**
    * Track add to cart event
@@ -36,13 +36,17 @@ interface MetaPixelContextValue {
    * @param productName - Product name
    * @param price - Unit price (not total)
    * @param quantity - Quantity added
+   * @param eventID - Optional event ID for deduplication with CAPI
    */
-  trackAddToCart: (productId: string, productName: string, price: number, quantity: number) => void;
+  trackAddToCart: (productId: string, productName: string, price: number, quantity: number, eventID?: string) => void;
 
   /**
    * Track begin checkout event
+   * @param cartTotal - Total cart value
+   * @param itemCount - Number of items
+   * @param eventID - Optional event ID for deduplication with CAPI
    */
-  trackInitiateCheckout: (cartTotal: number, itemCount: number) => void;
+  trackInitiateCheckout: (cartTotal: number, itemCount: number, eventID?: string) => void;
 
   /**
    * Track purchase event
@@ -50,8 +54,9 @@ interface MetaPixelContextValue {
    * @param currency - Currency code (e.g., 'NGN', 'USD')
    * @param orderId - Order ID or order number
    * @param items - Array of purchased items with SKU, quantity, and price
+   * @param eventID - Optional event ID for deduplication with CAPI
    */
-  trackPurchase: (orderTotal: number, currency: string, orderId: string, items: PurchaseItem[]) => void;
+  trackPurchase: (orderTotal: number, currency: string, orderId: string, items: PurchaseItem[], eventID?: string) => void;
 
   /**
    * Whether the pixel is initialized
@@ -126,7 +131,7 @@ export function MetaPixelProvider({ children, pixelId, debug }: MetaPixelProvide
     });
   }, [pixelId, shouldDebug]);
 
-  const track = (event: string, data?: Record<string, unknown>) => {
+  const track = (event: string, data?: Record<string, unknown>, eventID?: string) => {
     if (!isInitialized || !reactPixel) {
       if (shouldDebug) {
         console.log('[Meta Pixel] Track (not initialized):', event, data);
@@ -134,10 +139,13 @@ export function MetaPixelProvider({ children, pixelId, debug }: MetaPixelProvide
       return;
     }
 
-    reactPixel.track(event, data);
+    // Include eventID for deduplication with CAPI
+    const eventData = eventID ? { ...data, eventID } : data;
+
+    reactPixel.track(event, eventData);
 
     if (shouldDebug) {
-      console.log('[Meta Pixel] Track:', event, data);
+      console.log('[Meta Pixel] Track:', event, eventData, eventID ? `(ID: ${eventID})` : '');
     }
   };
 
@@ -156,17 +164,17 @@ export function MetaPixelProvider({ children, pixelId, debug }: MetaPixelProvide
     }
   };
 
-  const trackProductView = (productId: string, productName: string, price: number) => {
+  const trackProductView = (productId: string, productName: string, price: number, eventID?: string) => {
     track('ViewContent', {
       content_ids: [productId],
       content_name: productName,
       content_type: 'product',
       value: price,
       currency: 'NGN',
-    });
+    }, eventID);
   };
 
-  const trackAddToCart = (productId: string, productName: string, price: number, quantity: number) => {
+  const trackAddToCart = (productId: string, productName: string, price: number, quantity: number, eventID?: string) => {
     track('AddToCart', {
       content_ids: [productId],
       content_name: productName,
@@ -174,18 +182,18 @@ export function MetaPixelProvider({ children, pixelId, debug }: MetaPixelProvide
       value: price,
       currency: 'NGN',
       num_items: quantity,
-    });
+    }, eventID);
   };
 
-  const trackInitiateCheckout = (cartTotal: number, itemCount: number) => {
+  const trackInitiateCheckout = (cartTotal: number, itemCount: number, eventID?: string) => {
     track('InitiateCheckout', {
       value: cartTotal,
       currency: 'NGN',
       num_items: itemCount,
-    });
+    }, eventID);
   };
 
-  const trackPurchase = (orderTotal: number, currency: string, orderId: string, items: PurchaseItem[]) => {
+  const trackPurchase = (orderTotal: number, currency: string, orderId: string, items: PurchaseItem[], eventID?: string) => {
     track('Purchase', {
       value: orderTotal,
       currency,
@@ -196,7 +204,7 @@ export function MetaPixelProvider({ children, pixelId, debug }: MetaPixelProvide
         item_price: item.item_price,
       })),
       order_id: orderId,
-    });
+    }, eventID);
   };
 
   const value: MetaPixelContextValue = {