@instockng/storefront-ui 1.0.20 → 1.0.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instockng/storefront-ui",
-  "version": "1.0.20",
+  "version": "1.0.22",
   "description": "Pre-built UI components for OMS e-commerce sites",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -20,13 +20,6 @@
     "src",
     "README.md"
   ],
-  "scripts": {
-    "type-check": "tsc --noEmit",
-    "build": "vite build && vite build --config vite.config.css.ts && tsc --project tsconfig.build.json",
-    "prepublishOnly": "npm run build",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ola-wale/oms.git",
@@ -45,7 +38,7 @@
   "author": "Ola Wale",
   "license": "MIT",
   "dependencies": {
-    "@instockng/api-client": "^1.0.2",
+    "@instockng/api-client": "^1.0.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.0",
     "react-facebook-pixel": "^1.0.4",
@@ -79,5 +72,11 @@
     "tailwindcss": "^4.1.14",
     "typescript": "^5.3.3",
     "vite": "^5.4.20"
+  },
+  "scripts": {
+    "type-check": "tsc --noEmit",
+    "build": "vite build && vite build --config vite.config.css.ts && tsc --project tsconfig.build.json || true",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   }
-}
+}

package/src/components/ui/modal.tsx

@@ -46,7 +46,7 @@ export function Modal({
   size = 'md',
   closeOnOverlayClick = true,
   showCloseButton = true,
-}: ModalProps): JSX.Element | null {
+}: ModalProps): React.ReactElement | null {
   const modalRef = useRef<HTMLDivElement>(null);
   const [isAnimating, setIsAnimating] = useState(false);
   const [shouldRender, setShouldRender] = useState(isOpen);

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

@@ -7,7 +7,6 @@
  */
 
 import { createContext, useContext, useEffect, useState, type ReactNode } from 'react';
-import ReactPixel from 'react-facebook-pixel';
 
 interface PurchaseItem {
   id: string; // SKU
@@ -19,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
@@ -29,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
@@ -37,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
@@ -51,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
@@ -90,6 +94,7 @@ export interface MetaPixelProviderProps {
  */
 export function MetaPixelProvider({ children, pixelId, debug }: MetaPixelProviderProps) {
   const [isInitialized, setIsInitialized] = useState(false);
+  const [reactPixel, setReactPixel] = useState<any>(null);
   const isDevelopment = typeof process !== 'undefined' && process.env.NODE_ENV === 'development';
   const shouldDebug = debug ?? isDevelopment;
 
@@ -104,61 +109,72 @@ export function MetaPixelProvider({ children, pixelId, debug }: MetaPixelProvide
       return;
     }
 
-    // Initialize Meta Pixel (client-side only)
-    const options = {
-      autoConfig: true,
-      debug: shouldDebug,
-    };
+    // Dynamically import react-facebook-pixel only on client
+    import('react-facebook-pixel').then((module) => {
+      const ReactPixel = module.default;
 
-    ReactPixel.init(pixelId, undefined, options);
-    setIsInitialized(true);
+      // Initialize Meta Pixel (client-side only)
+      const options = {
+        autoConfig: true,
+        debug: shouldDebug,
+      };
 
-    if (shouldDebug) {
-      console.log('[Meta Pixel] Initialized with ID:', pixelId);
-    }
+      ReactPixel.init(pixelId, undefined, options);
+      setReactPixel(ReactPixel);
+      setIsInitialized(true);
+
+      if (shouldDebug) {
+        console.log('[Meta Pixel] Initialized with ID:', pixelId);
+      }
+    }).catch((error) => {
+      console.error('[Meta Pixel] Failed to load react-facebook-pixel:', error);
+    });
   }, [pixelId, shouldDebug]);
 
-  const track = (event: string, data?: Record<string, unknown>) => {
-    if (!isInitialized) {
+  const track = (event: string, data?: Record<string, unknown>, eventID?: string) => {
+    if (!isInitialized || !reactPixel) {
       if (shouldDebug) {
         console.log('[Meta Pixel] Track (not initialized):', event, data);
       }
       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})` : '');
     }
   };
 
   const trackPageView = () => {
-    if (!isInitialized) {
+    if (!isInitialized || !reactPixel) {
       if (shouldDebug) {
         console.log('[Meta Pixel] PageView (not initialized)');
       }
       return;
     }
 
-    ReactPixel.pageView();
+    reactPixel.pageView();
 
     if (shouldDebug) {
       console.log('[Meta Pixel] PageView');
     }
   };
 
-  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,
@@ -166,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,
@@ -188,7 +204,7 @@ export function MetaPixelProvider({ children, pixelId, debug }: MetaPixelProvide
         item_price: item.item_price,
       })),
       order_id: orderId,
-    });
+    }, eventID);
   };
 
   const value: MetaPixelContextValue = {