@instockng/storefront-ui 1.0.69 → 1.0.71

package/dist/index99.mjs

@@ -1,56 +1,72 @@
 'use client';
-import s from "./index84.mjs";
-import m from "./index151.mjs";
-import u from "./index152.mjs";
-import { getFetch as b } from "./index153.mjs";
-import d from "./index95.mjs";
-const p = {
-  http: m,
-  xhr: u,
-  fetch: {
-    get: b
-  }
+const e = {
+  Continue: 100,
+  SwitchingProtocols: 101,
+  Processing: 102,
+  EarlyHints: 103,
+  Ok: 200,
+  Created: 201,
+  Accepted: 202,
+  NonAuthoritativeInformation: 203,
+  NoContent: 204,
+  ResetContent: 205,
+  PartialContent: 206,
+  MultiStatus: 207,
+  AlreadyReported: 208,
+  ImUsed: 226,
+  MultipleChoices: 300,
+  MovedPermanently: 301,
+  Found: 302,
+  SeeOther: 303,
+  NotModified: 304,
+  UseProxy: 305,
+  Unused: 306,
+  TemporaryRedirect: 307,
+  PermanentRedirect: 308,
+  BadRequest: 400,
+  Unauthorized: 401,
+  PaymentRequired: 402,
+  Forbidden: 403,
+  NotFound: 404,
+  MethodNotAllowed: 405,
+  NotAcceptable: 406,
+  ProxyAuthenticationRequired: 407,
+  RequestTimeout: 408,
+  Conflict: 409,
+  Gone: 410,
+  LengthRequired: 411,
+  PreconditionFailed: 412,
+  PayloadTooLarge: 413,
+  UriTooLong: 414,
+  UnsupportedMediaType: 415,
+  RangeNotSatisfiable: 416,
+  ExpectationFailed: 417,
+  ImATeapot: 418,
+  MisdirectedRequest: 421,
+  UnprocessableEntity: 422,
+  Locked: 423,
+  FailedDependency: 424,
+  TooEarly: 425,
+  UpgradeRequired: 426,
+  PreconditionRequired: 428,
+  TooManyRequests: 429,
+  RequestHeaderFieldsTooLarge: 431,
+  UnavailableForLegalReasons: 451,
+  InternalServerError: 500,
+  NotImplemented: 501,
+  BadGateway: 502,
+  ServiceUnavailable: 503,
+  GatewayTimeout: 504,
+  HttpVersionNotSupported: 505,
+  VariantAlsoNegotiates: 506,
+  InsufficientStorage: 507,
+  LoopDetected: 508,
+  NotExtended: 510,
+  NetworkAuthenticationRequired: 511
 };
-s.forEach(p, (e, o) => {
-  if (e) {
-    try {
-      Object.defineProperty(e, "name", { value: o });
-    } catch {
-    }
-    Object.defineProperty(e, "adapterName", { value: o });
-  }
+Object.entries(e).forEach(([t, o]) => {
+  e[o] = t;
 });
-const f = (e) => `- ${e}`, g = (e) => s.isFunction(e) || e === null || e === !1, y = {
-  getAdapter: (e, o) => {
-    e = s.isArray(e) ? e : [e];
-    const { length: a } = e;
-    let i, t;
-    const c = {};
-    for (let r = 0; r < a; r++) {
-      i = e[r];
-      let n;
-      if (t = i, !g(i) && (t = p[(n = String(i)).toLowerCase()], t === void 0))
-        throw new d(`Unknown adapter '${n}'`);
-      if (t && (s.isFunction(t) || (t = t.get(o))))
-        break;
-      c[n || "#" + r] = t;
-    }
-    if (!t) {
-      const r = Object.entries(c).map(
-        ([l, h]) => `adapter ${l} ` + (h === !1 ? "is not supported by the environment" : "is not available in the build")
-      );
-      let n = a ? r.length > 1 ? `since :
-` + r.map(f).join(`
-`) : " " + f(r[0]) : "as no adapter specified";
-      throw new d(
-        "There is no suitable adapter to dispatch the request " + n,
-        "ERR_NOT_SUPPORT"
-      );
-    }
-    return t;
-  },
-  adapters: p
-};
 export {
-  y as default
+  e 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

@@ -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,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;;;;;;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,2CA8IrF;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.69",
+  "version": "1.0.71",
   "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/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

@@ -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
@@ -179,17 +180,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);
   };