@instockng/storefront-ui 1.0.70 → 1.0.72

package/dist/index98.mjs

@@ -1,23 +1,9 @@
 'use client';
-import { __exports as e } from "./index138.mjs";
-import "./index96.mjs";
-import u from "react";
-import { __exports as n } from "./index101.mjs";
-var o;
-function d() {
-  return o ? e : (o = 1, function(t) {
-    Object.defineProperty(t, "__esModule", {
-      value: !0
-    }), Object.defineProperty(t, "RouterContext", {
-      enumerable: !0,
-      get: function() {
-        return r;
-      }
-    });
-    const r = (/* @__PURE__ */ n._(u)).default.createContext(null);
-    process.env.NODE_ENV !== "production" && (r.displayName = "RouterContext");
-  }(e), e);
+function u(n) {
+  return function(r) {
+    return n.apply(null, r);
+  };
 }
 export {
-  d as __require
+  u as default
 };

package/dist/index99.mjs

@@ -1,58 +1,8 @@
 'use client';
-import { __exports as o } from "./index139.mjs";
-import { __require as p } from "./index140.mjs";
-var u;
-function m() {
-  return u ? o : (u = 1, function(i) {
-    Object.defineProperty(i, "__esModule", {
-      value: !0
-    });
-    function f(e, r) {
-      for (var t in r) Object.defineProperty(e, t, {
-        enumerable: !0,
-        get: r[t]
-      });
-    }
-    f(i, {
-      /**
-      * Checks whether the given value is a NextError.
-      * This can be used to print a more detailed error message with properties like `code` & `digest`.
-      */
-      default: function() {
-        return s;
-      },
-      getProperError: function() {
-        return a;
-      }
-    });
-    const c = p();
-    function s(e) {
-      return typeof e == "object" && e !== null && "name" in e && "message" in e;
-    }
-    function d(e) {
-      const r = /* @__PURE__ */ new WeakSet();
-      return JSON.stringify(e, (t, n) => {
-        if (typeof n == "object" && n !== null) {
-          if (r.has(n))
-            return "[Circular]";
-          r.add(n);
-        }
-        return n;
-      });
-    }
-    function a(e) {
-      if (s(e))
-        return e;
-      if (process.env.NODE_ENV === "development") {
-        if (typeof e > "u")
-          return new Error("An undefined error was thrown, see here for more info: https://nextjs.org/docs/messages/threw-undefined");
-        if (e === null)
-          return new Error("A null error was thrown, see here for more info: https://nextjs.org/docs/messages/threw-undefined");
-      }
-      return new Error((0, c.isPlainObject)(e) ? d(e) : e + "");
-    }
-  }(o), o);
+import i from "./index86.mjs";
+function o(r) {
+  return i.isObject(r) && r.isAxiosError === !0;
 }
 export {
-  m as __require
+  o as default
 };

package/dist/lib/utils.d.ts

@@ -20,4 +20,9 @@ export declare function getTikTokCookies(): {
     ttp: string | undefined;
     ttclid: string | undefined;
 };
+/**
+ * Generate a unique event ID for deduplication
+ * Matches the format used by the backend: {type}_{id}_{suffix}
+ */
+export declare function generateClientEventId(type: 'cart' | 'order', id: string, suffix?: string): string;
 //# sourceMappingURL=utils.d.ts.map

package/dist/lib/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAQ,MAAM,MAAM,CAAA;AAG5C,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC;AAED,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAOrD;AAED,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM,CAOtD;AAED,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM,CAS1D;AAED,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAUrD;AAsBD;;;GAGG;AACH,wBAAgB,YAAY,IAAI;IAAE,GAAG,EAAE,MAAM,GAAG,SAAS,CAAC;IAAC,GAAG,EAAE,MAAM,GAAG,SAAS,CAAA;CAAE,CAKnF;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,IAAI;IAAE,GAAG,EAAE,MAAM,GAAG,SAAS,CAAC;IAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAA;CAAE,CAK1F"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAQ,MAAM,MAAM,CAAA;AAG5C,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC;AAED,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAOrD;AAED,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM,CAOtD;AAED,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM,CAS1D;AAED,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAUrD;AAsBD;;;GAGG;AACH,wBAAgB,YAAY,IAAI;IAAE,GAAG,EAAE,MAAM,GAAG,SAAS,CAAC;IAAC,GAAG,EAAE,MAAM,GAAG,SAAS,CAAA;CAAE,CAKnF;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,IAAI;IAAE,GAAG,EAAE,MAAM,GAAG,SAAS,CAAC;IAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAA;CAAE,CAK1F;AACD;;;GAGG;AACH,wBAAgB,qBAAqB,CACnC,IAAI,EAAE,MAAM,GAAG,OAAO,EACtB,EAAE,EAAE,MAAM,EACV,MAAM,CAAC,EAAE,MAAM,GACd,MAAM,CAER"}

package/dist/providers/MetaPixelProvider.d.ts

@@ -19,7 +19,7 @@ interface MetaPixelContextValue {
     /**
      * Track a page view
      */
-    trackPageView: () => void;
+    trackPageView: (eventID?: string) => void;
     /**
      * Track product view
      */
@@ -37,9 +37,10 @@ interface MetaPixelContextValue {
      * Track begin checkout event
      * @param cartTotal - Total cart value
      * @param itemCount - Number of items
+     * @param contents - Array of items in cart
      * @param eventID - Optional event ID for deduplication with CAPI
      */
-    trackInitiateCheckout: (cartTotal: number, itemCount: number, eventID?: string) => void;
+    trackInitiateCheckout: (cartTotal: number, itemCount: number, contents?: PurchaseItem[], eventID?: string) => void;
     /**
      * Track purchase event
      * @param orderTotal - Total order value

package/dist/providers/MetaPixelProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MetaPixelProvider.d.ts","sourceRoot":"","sources":["../../src/providers/MetaPixelProvider.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAkD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvF,UAAU,YAAY;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,qBAAqB;IAC7B;;OAEG;IACH,KAAK,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,OAAO,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAEjF;;OAEG;IACH,aAAa,EAAE,MAAM,IAAI,CAAC;IAE1B;;OAEG;IACH,gBAAgB,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAEpG;;;;;;;OAOG;IACH,cAAc,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAEpH;;;;;OAKG;IACH,qBAAqB,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAExF;;;;;;;OAOG;IACH,aAAa,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,YAAY,EAAE,EAAE,OAAO,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAExH;;OAEG;IACH,aAAa,EAAE,OAAO,CAAC;CACxB;AAID,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,sBAAsB,2CAkIrF;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,YAAY,0BAQ3B;AAED,YAAY,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"MetaPixelProvider.d.ts","sourceRoot":"","sources":["../../src/providers/MetaPixelProvider.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAkD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvF,UAAU,YAAY;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,qBAAqB;IAC7B;;OAEG;IACH,KAAK,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,OAAO,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAEjF;;OAEG;IACH,aAAa,EAAE,CAAC,OAAO,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAE1C;;OAEG;IACH,gBAAgB,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAEpG;;;;;;;OAOG;IACH,cAAc,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAEpH;;;;;;OAMG;IACH,qBAAqB,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,YAAY,EAAE,EAAE,OAAO,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnH;;;;;;;OAOG;IACH,aAAa,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,YAAY,EAAE,EAAE,OAAO,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAExH;;OAEG;IACH,aAAa,EAAE,OAAO,CAAC;CACxB;AAID,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,sBAAsB,2CA+IrF;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,YAAY,0BAQ3B;AAED,YAAY,EAAE,YAAY,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instockng/storefront-ui",
-  "version": "1.0.70",
+  "version": "1.0.72",
   "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.25",
+    "@instockng/api-client": "^1.0.27",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.0",
     "react-facebook-pixel": "^1.0.4",

package/src/contexts/CartContext.tsx

@@ -19,6 +19,7 @@ import {
   useApplyDiscount,
   useRemoveDiscount,
   useCheckoutCart,
+  useInitiateCheckout,
   queryKeys,
   type Cart,
 } from '@instockng/api-client';
@@ -26,7 +27,7 @@ import { useQueryClient } from '@tanstack/react-query';
 import { ShoppingCart } from '../components/ShoppingCart';
 import { useMetaPixel } from '../providers/MetaPixelProvider';
 import { useTikTokPixel } from '../providers/TikTokPixelProvider';
-import { getFbCookies, getTikTokCookies } from '../lib/utils';
+import { getFbCookies, getTikTokCookies, generateClientEventId } from '../lib/utils';
 
 const CART_ID_KEY = 'oms_cart_id';
 
@@ -242,6 +243,8 @@ export function CartProvider({ children, brandSlug, initialCartId, shoppingCartP
     },
   });
 
+  const initiateCheckoutMutation = useInitiateCheckout(cartId || '');
+
   // Store cartId in localStorage when it changes
   useEffect(() => {
     if (cartId && typeof window !== 'undefined') {
@@ -285,13 +288,13 @@ export function CartProvider({ children, brandSlug, initialCartId, shoppingCartP
         const eventID = `cart_${cartId}_item_${addedItem.id}`;
 
         // Track AddToCart event with Meta Pixel and matching event ID
-        trackMetaAddToCart(productSlug, productName, price, quantity, eventID);
+        trackMetaAddToCart(sku, 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
-        trackMetaAddToCart(productSlug, productName, price, quantity);
+        trackMetaAddToCart(sku, productName, price, quantity);
         trackTikTokAddToCart(productSlug, productName, price, quantity);
       }
     },
@@ -355,31 +358,56 @@ export function CartProvider({ children, brandSlug, initialCartId, shoppingCartP
     setIsOpen(false);
   }, []);
 
-  const trackCheckoutInitiated = useCallback(() => {
-    if (!cart || !cartId) return;
+  const trackCheckoutInitiated = useCallback(async () => {
+    if (!cart || !cart.pricing) return;
 
-    // Get cart total from pricing
-    const cartTotal = Number(cart.pricing?.total || 0);
+    try {
+      const eventID = generateClientEventId('cart', cart.id, 'checkout');
+      const cartTotal = cart.pricing.total;
+      const itemCount = cart.items.reduce((sum, item) => sum + item.quantity, 0);
 
-    // Calculate item count
-    const itemCount = cart.items?.reduce((sum, item) => sum + item.quantity, 0) || 0;
+      // Prepare rich data for Pixel and CAPI
+      const contents = cart.items.map(item => ({
+        id: item.variant.sku,
+        quantity: item.quantity,
+        item_price: Number(item.variant.price),
+      }));
 
-    // Generate event ID matching backend format: cart_{cartId}_checkout
-    const eventID = `cart_${cartId}_checkout`;
+      // 1. Track Client-Side Pixel with Rich Data
+      if (trackMetaInitiateCheckout) {
+        trackMetaInitiateCheckout(cartTotal, itemCount, contents, eventID);
+      }
 
-    // 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),
-    })) || [];
+      // 2. Trigger Server-Side CAPI via API Client hook
+      // We fire and forget this request to not block the UI
+      if (cart.brand.metaPixelId || cart.brand.tiktokPixelId) {
+        // Get attribution cookies
+        const { fbc, fbp } = getFbCookies();
+        const { ttp, ttclid } = getTikTokCookies();
+
+        initiateCheckoutMutation.mutate({
+          email: cart.customerEmail,
+          phone: cart.customerPhone,
+          fbc,
+          fbp,
+          ttp,
+          ttclid,
+        });
+      }
 
-    // Track InitiateCheckout event with Meta Pixel
-    trackMetaInitiateCheckout(cartTotal, itemCount, eventID);
+      // Track TikTok Event
+      if (trackTikTokInitiateCheckout) {
+        trackTikTokInitiateCheckout(cartTotal, itemCount, eventID, contents.map(c => ({
+          content_id: c.id,
+          quantity: c.quantity,
+          price: c.item_price
+        })));
+      }
 
-    // Track InitiateCheckout event with TikTok Pixel
-    trackTikTokInitiateCheckout(cartTotal, itemCount, eventID, contents);
-  }, [cart, cartId, trackMetaInitiateCheckout, trackTikTokInitiateCheckout]);
+    } catch (error) {
+      console.error('Error tracking initiate checkout:', error);
+    }
+  }, [cart, trackMetaInitiateCheckout, trackTikTokInitiateCheckout, initiateCheckoutMutation]);
 
   const value: CartContextValue = {
     cart: cart || null,

package/src/hooks/usePageTracking.ts

@@ -40,12 +40,12 @@ import { useMetaPixel } from '../providers/MetaPixelProvider';
  * }
  * ```
  */
-export function usePageTracking() {
+export function usePageTracking(initialEventId?: string) {
   const { trackPageView } = useMetaPixel();
 
   useEffect(() => {
-    // Track initial page view
-    trackPageView();
+    // Track initial page view (with optional deduplication ID)
+    trackPageView(initialEventId);
 
     // For Next.js Pages Router, track route changes
     if (typeof window !== 'undefined') {

package/src/lib/utils.ts

@@ -87,3 +87,14 @@ export function getTikTokCookies(): { ttp: string | undefined; ttclid: string |
     ttclid: getUrlParam('ttclid'),
   };
 }
+/**
+ * Generate a unique event ID for deduplication
+ * Matches the format used by the backend: {type}_{id}_{suffix}
+ */
+export function generateClientEventId(
+  type: 'cart' | 'order',
+  id: string,
+  suffix?: string
+): string {
+  return suffix ? `${type}_${id}_${suffix}` : `${type}_${id}`;
+}

package/src/providers/MetaPixelProvider.tsx

@@ -23,7 +23,7 @@ interface MetaPixelContextValue {
   /**
    * Track a page view
    */
-  trackPageView: () => void;
+  trackPageView: (eventID?: string) => void;
 
   /**
    * Track product view
@@ -44,9 +44,10 @@ interface MetaPixelContextValue {
    * Track begin checkout event
    * @param cartTotal - Total cart value
    * @param itemCount - Number of items
+   * @param contents - Array of items in cart
    * @param eventID - Optional event ID for deduplication with CAPI
    */
-  trackInitiateCheckout: (cartTotal: number, itemCount: number, eventID?: string) => void;
+  trackInitiateCheckout: (cartTotal: number, itemCount: number, contents?: PurchaseItem[], eventID?: string) => void;
 
   /**
    * Track purchase event
@@ -149,7 +150,7 @@ export function MetaPixelProvider({ children, pixelId, debug }: MetaPixelProvide
     }
   };
 
-  const trackPageView = () => {
+  const trackPageView = (eventID?: string) => {
     if (!isInitialized || !reactPixel) {
       if (shouldDebug) {
         console.log('[Meta Pixel] PageView (not initialized)');
@@ -157,7 +158,8 @@ export function MetaPixelProvider({ children, pixelId, debug }: MetaPixelProvide
       return;
     }
 
-    reactPixel.pageView();
+    const eventData = eventID ? { eventID } : undefined;
+    reactPixel.pageView(eventID ? eventData : undefined);
 
     if (shouldDebug) {
       console.log('[Meta Pixel] PageView');
@@ -179,17 +181,29 @@ export function MetaPixelProvider({ children, pixelId, debug }: MetaPixelProvide
       content_ids: [productId],
       content_name: productName,
       content_type: 'product',
-      value: price,
+      value: price * quantity,
       currency: 'NGN',
       num_items: quantity,
+      contents: [{
+        id: productId,
+        quantity: quantity,
+        item_price: price,
+      }],
     }, eventID);
   };
 
-  const trackInitiateCheckout = (cartTotal: number, itemCount: number, eventID?: string) => {
+  const trackInitiateCheckout = (cartTotal: number, itemCount: number, contents: PurchaseItem[] = [], eventID?: string) => {
     track('InitiateCheckout', {
       value: cartTotal,
       currency: 'NGN',
       num_items: itemCount,
+      contents: contents.map((item) => ({
+        id: item.id,
+        quantity: item.quantity,
+        item_price: item.item_price,
+      })),
+      content_ids: contents.map((item) => item.id),
+      content_type: 'product',
     }, eventID);
   };