@instockng/storefront-ui 1.0.33 → 1.0.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instockng/storefront-ui",
-  "version": "1.0.33",
+  "version": "1.0.35",
   "description": "Pre-built UI components for OMS e-commerce sites",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -45,7 +45,7 @@
   "author": "Ola Wale",
   "license": "MIT",
   "dependencies": {
-    "@instockng/api-client": "^1.0.16",
+    "@instockng/api-client": "^1.0.17",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.0",
     "react-facebook-pixel": "^1.0.4",

package/src/contexts/CartContext.tsx

@@ -24,7 +24,7 @@ import {
 import { ShoppingCart } from '../components/ShoppingCart';
 import { useMetaPixel } from '../providers/MetaPixelProvider';
 import { useTikTokPixel } from '../providers/TikTokPixelProvider';
-import { getFbCookies } from '../lib/utils';
+import { getFbCookies, getTikTokCookies } from '../lib/utils';
 
 const CART_ID_KEY = 'oms_cart_id';
 
@@ -243,8 +243,11 @@ export function CartProvider({ children, brandSlug, initialCartId, shoppingCartP
       // Get Facebook cookies for attribution
       const { fbc, fbp } = getFbCookies();
 
+      // Get TikTok cookies for attribution
+      const { ttp, ttclid } = getTikTokCookies();
+
       // Add item to cart via API
-      const updatedCart = await addItemMutation.mutateAsync({ sku, quantity, fbc, fbp });
+      const updatedCart = await addItemMutation.mutateAsync({ sku, quantity, fbc, fbp, ttp, ttclid });
 
       // Skip tracking if error response
       if ('error' in updatedCart) return;
@@ -342,11 +345,18 @@ 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
     trackMetaInitiateCheckout(cartTotal, itemCount, eventID);
 
     // Track InitiateCheckout event with TikTok Pixel
-    trackTikTokInitiateCheckout(cartTotal, itemCount, eventID);
+    trackTikTokInitiateCheckout(cartTotal, itemCount, eventID, contents);
   }, [cart, cartId, trackMetaInitiateCheckout, trackTikTokInitiateCheckout]);
 
   const value: CartContextValue = {

package/src/lib/utils.ts

@@ -44,22 +44,44 @@ export function getStatusColor(status: string): string {
   return colors[status] || 'bg-gray-100 text-gray-800'
 }
 
+/**
+ * Extract a cookie value by name
+ */
+function getCookie(name: string): string | undefined {
+  if (typeof document === 'undefined') return undefined;
+  const value = `; ${document.cookie}`;
+  const parts = value.split(`; ${name}=`);
+  if (parts.length === 2) return parts.pop()?.split(';').shift();
+  return undefined;
+}
+
+/**
+ * Extract a URL parameter by name
+ */
+function getUrlParam(name: string): string | undefined {
+  if (typeof window === 'undefined') return undefined;
+  const urlParams = new URLSearchParams(window.location.search);
+  return urlParams.get(name) || undefined;
+}
+
 /**
  * Extract Facebook attribution cookies (fbc & fbp) for Meta Pixel CAPI
  * @returns Object with fbc (Facebook Click ID) and fbp (Facebook Browser ID) cookies
  */
 export function getFbCookies(): { fbc: string | undefined; fbp: string | undefined } {
-  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'),
   };
 }
+
+/**
+ * Extract TikTok attribution cookies and URL parameters for TikTok Events API
+ * @returns Object with ttp (TikTok Pixel cookie) and ttclid (TikTok Click ID from URL) values
+ */
+export function getTikTokCookies(): { ttp: string | undefined; ttclid: string | undefined } {
+  return {
+    ttp: getCookie('_ttp'),
+    ttclid: getUrlParam('ttclid'),
+  };
+}

package/src/providers/TikTokPixelProvider.tsx

@@ -24,7 +24,12 @@ interface TikTokPixelContextType {
     quantity: number,
     eventID?: string
   ) => void;
-  trackInitiateCheckout: (cartTotal: number, itemCount: 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,
@@ -153,7 +158,7 @@ export function TikTokPixelProvider({
         content_type: 'product',
         content_id: productId,
         content_name: productName,
-        price: price,
+        value: price * quantity,
         quantity: quantity,
         currency: 'NGN',
       },
@@ -164,7 +169,8 @@ export function TikTokPixelProvider({
   const trackInitiateCheckout = (
     cartTotal: number,
     itemCount: number,
-    eventID?: string
+    eventID?: string,
+    contents?: Array<{ content_id: string; quantity: number; price: number }>
   ) => {
     track(
       'InitiateCheckout',
@@ -173,6 +179,7 @@ export function TikTokPixelProvider({
         value: cartTotal,
         currency: 'NGN',
         num_items: itemCount,
+        ...(contents && contents.length > 0 ? { contents } : {}),
       },
       eventID
     );