@instockng/storefront-ui 1.0.28 → 1.0.30

package/dist/index67.mjs

@@ -1,8 +1,66 @@
 'use client';
-import { useQuery as e } from "@tanstack/react-query";
-function n(r) {
-  return e(r);
+import { getDefaultExportFromCjs as d } from "./index60.mjs";
+import { __module as v } from "./index94.mjs";
+v.exports = function(n) {
+  return g(m(n), n);
+};
+v.exports.array = g;
+function g(n, r) {
+  var t = n.length, e = new Array(t), o = {}, u = t, c = y(r), f = E(n);
+  for (r.forEach(function(a) {
+    if (!f.has(a[0]) || !f.has(a[1]))
+      throw new Error("Unknown node. There is an unknown node in the supplied edges.");
+  }); u--; )
+    o[u] || l(n[u], u, /* @__PURE__ */ new Set());
+  return e;
+  function l(a, s, i) {
+    if (i.has(a)) {
+      var w;
+      try {
+        w = ", node was:" + JSON.stringify(a);
+      } catch {
+        w = "";
+      }
+      throw new Error("Cyclic dependency" + w);
+    }
+    if (!f.has(a))
+      throw new Error("Found unknown node. Make sure to provided all involved nodes. Unknown node: " + JSON.stringify(a));
+    if (!o[s]) {
+      o[s] = !0;
+      var h = c.get(a) || /* @__PURE__ */ new Set();
+      if (h = Array.from(h), s = h.length) {
+        i.add(a);
+        do {
+          var p = h[--s];
+          l(p, f.get(p), i);
+        } while (s);
+        i.delete(a);
+      }
+      e[--t] = a;
+    }
+  }
+}
+function m(n) {
+  for (var r = /* @__PURE__ */ new Set(), t = 0, e = n.length; t < e; t++) {
+    var o = n[t];
+    r.add(o[0]), r.add(o[1]);
+  }
+  return Array.from(r);
+}
+function y(n) {
+  for (var r = /* @__PURE__ */ new Map(), t = 0, e = n.length; t < e; t++) {
+    var o = n[t];
+    r.has(o[0]) || r.set(o[0], /* @__PURE__ */ new Set()), r.has(o[1]) || r.set(o[1], /* @__PURE__ */ new Set()), r.get(o[0]).add(o[1]);
+  }
+  return r;
+}
+function E(n) {
+  for (var r = /* @__PURE__ */ new Map(), t = 0, e = n.length; t < e; t++)
+    r.set(n[t], t);
+  return r;
 }
+var k = v.exports;
+const A = /* @__PURE__ */ d(k);
 export {
-  n as useQueryUnwrapped
+  A as default
 };

package/dist/index73.mjs

@@ -2,7 +2,7 @@
 import { __module as u } from "./index133.mjs";
 import d from "react/jsx-runtime";
 import "react";
-import { __require as c } from "./index61.mjs";
+import { __require as c } from "./index62.mjs";
 var n;
 function y() {
   return n ? u.exports : (n = 1, function(a, e) {

package/dist/index77.mjs

@@ -1,11 +1,11 @@
 'use client';
 import d from "./index75.mjs";
-import U from "./index193.mjs";
-import q from "./index194.mjs";
-import R from "./index195.mjs";
+import U from "./index134.mjs";
+import q from "./index135.mjs";
+import R from "./index136.mjs";
 import w from "./index78.mjs";
-import A from "./index196.mjs";
-import m from "./index197.mjs";
+import A from "./index137.mjs";
+import m from "./index138.mjs";
 import T from "./index89.mjs";
 const i = m.validators;
 class k {

package/dist/index79.mjs

@@ -1,10 +1,10 @@
 'use client';
 import t from "./index75.mjs";
 import c from "./index86.mjs";
-import u from "./index198.mjs";
+import u from "./index139.mjs";
 import S from "./index85.mjs";
-import h from "./index199.mjs";
-import a from "./index200.mjs";
+import h from "./index140.mjs";
+import a from "./index141.mjs";
 import O from "./index80.mjs";
 function y(i, r, e) {
   if (t.isString(i))

package/dist/index89.mjs

@@ -1,6 +1,6 @@
 'use client';
 import i from "./index75.mjs";
-import S from "./index201.mjs";
+import S from "./index142.mjs";
 const h = Symbol("internals");
 function y(r) {
   return r && String(r).trim().toLowerCase();

package/dist/index90.mjs

@@ -1,8 +1,8 @@
 'use client';
 import s from "./index75.mjs";
-import m from "./index202.mjs";
-import u from "./index203.mjs";
-import { getFetch as b } from "./index204.mjs";
+import m from "./index143.mjs";
+import u from "./index144.mjs";
+import { getFetch as b } from "./index145.mjs";
 import d from "./index86.mjs";
 const p = {
   http: m,

package/dist/index92.mjs

@@ -1,5 +1,37 @@
 'use client';
-var o = { exports: {} };
+var a = (i, t, e = {}) => {
+  let r = `${i}=${t}`;
+  if (i.startsWith("__Secure-") && !e.secure)
+    throw new Error("__Secure- Cookie must have Secure attributes");
+  if (i.startsWith("__Host-")) {
+    if (!e.secure)
+      throw new Error("__Host- Cookie must have Secure attributes");
+    if (e.path !== "/")
+      throw new Error('__Host- Cookie must have Path attributes with "/"');
+    if (e.domain)
+      throw new Error("__Host- Cookie must not have Domain attributes");
+  }
+  if (e && typeof e.maxAge == "number" && e.maxAge >= 0) {
+    if (e.maxAge > 3456e4)
+      throw new Error(
+        "Cookies Max-Age SHOULD NOT be greater than 400 days (34560000 seconds) in duration."
+      );
+    r += `; Max-Age=${e.maxAge | 0}`;
+  }
+  if (e.domain && e.prefix !== "host" && (r += `; Domain=${e.domain}`), e.path && (r += `; Path=${e.path}`), e.expires) {
+    if (e.expires.getTime() - Date.now() > 3456e7)
+      throw new Error(
+        "Cookies Expires SHOULD NOT be greater than 400 days (34560000 seconds) in the future."
+      );
+    r += `; Expires=${e.expires.toUTCString()}`;
+  }
+  if (e.httpOnly && (r += "; HttpOnly"), e.secure && (r += "; Secure"), e.sameSite && (r += `; SameSite=${e.sameSite.charAt(0).toUpperCase() + e.sameSite.slice(1)}`), e.priority && (r += `; Priority=${e.priority.charAt(0).toUpperCase() + e.priority.slice(1)}`), e.partitioned) {
+    if (!e.secure)
+      throw new Error("Partitioned Cookie must have Secure attributes");
+    r += "; Partitioned";
+  }
+  return r;
+}, s = (i, t, e) => (t = encodeURIComponent(t), a(i, t, e));
 export {
-  o as __module
+  s as serialize
 };

package/dist/index93.mjs

@@ -1,37 +1,46 @@
 'use client';
-var a = (i, t, e = {}) => {
-  let r = `${i}=${t}`;
-  if (i.startsWith("__Secure-") && !e.secure)
-    throw new Error("__Secure- Cookie must have Secure attributes");
-  if (i.startsWith("__Host-")) {
-    if (!e.secure)
-      throw new Error("__Host- Cookie must have Secure attributes");
-    if (e.path !== "/")
-      throw new Error('__Host- Cookie must have Path attributes with "/"');
-    if (e.domain)
-      throw new Error("__Host- Cookie must not have Domain attributes");
+var s = (e, r) => (e = e.replace(/\/+$/, ""), e = e + "/", r = r.replace(/^\/+/, ""), e + r), p = (e, r) => {
+  for (const [n, t] of Object.entries(r)) {
+    const c = new RegExp("/:" + n + "(?:{[^/]+})?\\??");
+    e = e.replace(c, t ? `/${t}` : "");
   }
-  if (e && typeof e.maxAge == "number" && e.maxAge >= 0) {
-    if (e.maxAge > 3456e4)
-      throw new Error(
-        "Cookies Max-Age SHOULD NOT be greater than 400 days (34560000 seconds) in duration."
-      );
-    r += `; Max-Age=${e.maxAge | 0}`;
-  }
-  if (e.domain && e.prefix !== "host" && (r += `; Domain=${e.domain}`), e.path && (r += `; Path=${e.path}`), e.expires) {
-    if (e.expires.getTime() - Date.now() > 3456e7)
-      throw new Error(
-        "Cookies Expires SHOULD NOT be greater than 400 days (34560000 seconds) in the future."
-      );
-    r += `; Expires=${e.expires.toUTCString()}`;
+  return e;
+}, f = (e) => {
+  const r = new URLSearchParams();
+  for (const [n, t] of Object.entries(e))
+    if (t !== void 0)
+      if (Array.isArray(t))
+        for (const c of t)
+          r.append(n, c);
+      else
+        r.set(n, t);
+  return r;
+}, i = (e, r) => {
+  switch (r) {
+    case "ws":
+      return e.replace(/^http/, "ws");
+    case "http":
+      return e.replace(/^ws/, "http");
   }
-  if (e.httpOnly && (r += "; HttpOnly"), e.secure && (r += "; Secure"), e.sameSite && (r += `; SameSite=${e.sameSite.charAt(0).toUpperCase() + e.sameSite.slice(1)}`), e.priority && (r += `; Priority=${e.priority.charAt(0).toUpperCase() + e.priority.slice(1)}`), e.partitioned) {
-    if (!e.secure)
-      throw new Error("Partitioned Cookie must have Secure attributes");
-    r += "; Partitioned";
+}, l = (e) => /^https?:\/\/[^\/]+?\/index(?=\?|$)/.test(e) ? e.replace(/\/index(?=\?|$)/, "/") : e.replace(/\/index(?=\?|$)/, "");
+function a(e) {
+  return typeof e == "object" && e !== null && !Array.isArray(e);
+}
+function o(e, r) {
+  if (!a(e) && !a(r))
+    return r;
+  const n = { ...e };
+  for (const t in r) {
+    const c = r[t];
+    a(n[t]) && a(c) ? n[t] = o(n[t], c) : n[t] = c;
   }
-  return r;
-}, s = (i, t, e) => (t = encodeURIComponent(t), a(i, t, e));
+  return n;
+}
 export {
-  s as serialize
+  f as buildSearchParams,
+  o as deepMerge,
+  s as mergePath,
+  l as removeIndexString,
+  p as replaceUrlParam,
+  i as replaceUrlProtocol
 };

package/dist/index94.mjs

@@ -1,46 +1,5 @@
 'use client';
-var s = (e, r) => (e = e.replace(/\/+$/, ""), e = e + "/", r = r.replace(/^\/+/, ""), e + r), p = (e, r) => {
-  for (const [n, t] of Object.entries(r)) {
-    const c = new RegExp("/:" + n + "(?:{[^/]+})?\\??");
-    e = e.replace(c, t ? `/${t}` : "");
-  }
-  return e;
-}, f = (e) => {
-  const r = new URLSearchParams();
-  for (const [n, t] of Object.entries(e))
-    if (t !== void 0)
-      if (Array.isArray(t))
-        for (const c of t)
-          r.append(n, c);
-      else
-        r.set(n, t);
-  return r;
-}, i = (e, r) => {
-  switch (r) {
-    case "ws":
-      return e.replace(/^http/, "ws");
-    case "http":
-      return e.replace(/^ws/, "http");
-  }
-}, l = (e) => /^https?:\/\/[^\/]+?\/index(?=\?|$)/.test(e) ? e.replace(/\/index(?=\?|$)/, "/") : e.replace(/\/index(?=\?|$)/, "");
-function a(e) {
-  return typeof e == "object" && e !== null && !Array.isArray(e);
-}
-function o(e, r) {
-  if (!a(e) && !a(r))
-    return r;
-  const n = { ...e };
-  for (const t in r) {
-    const c = r[t];
-    a(n[t]) && a(c) ? n[t] = o(n[t], c) : n[t] = c;
-  }
-  return n;
-}
+var o = { exports: {} };
 export {
-  f as buildSearchParams,
-  o as deepMerge,
-  s as mergePath,
-  l as removeIndexString,
-  p as replaceUrlParam,
-  i as replaceUrlProtocol
+  o as __module
 };

package/dist/index96.mjs

@@ -1,5 +1,5 @@
 'use client';
-import { __exports as u } from "./index135.mjs";
+import { __exports as u } from "./index147.mjs";
 var c;
 function o() {
   if (c) return u;

package/dist/index97.mjs

@@ -1,5 +1,5 @@
 'use client';
-import { __exports as e } from "./index136.mjs";
+import { __exports as e } from "./index148.mjs";
 var i;
 function u() {
   return i ? e : (i = 1, function(r) {

package/dist/index98.mjs

@@ -1,11 +1,11 @@
 'use client';
-import { __module as m } from "./index137.mjs";
+import { __module as m } from "./index149.mjs";
 import "./index69.mjs";
-import { __require as j } from "./index138.mjs";
-import { __require as V } from "./index139.mjs";
-import { __require as k } from "./index140.mjs";
-import { __require as G } from "./index141.mjs";
-import { __require as W } from "./index142.mjs";
+import { __require as j } from "./index150.mjs";
+import { __require as V } from "./index151.mjs";
+import { __require as k } from "./index152.mjs";
+import { __require as G } from "./index153.mjs";
+import { __require as W } from "./index154.mjs";
 import { __exports as X } from "./index74.mjs";
 var M;
 function ee() {

package/dist/index99.mjs

@@ -1,13 +1,13 @@
 'use client';
-import { __module as L } from "./index143.mjs";
+import { __module as L } from "./index155.mjs";
 import "./index69.mjs";
 import { __require as K } from "./index96.mjs";
 import F from "react/jsx-runtime";
 import J from "react-dom";
 import N from "react";
-import { __require as B } from "./index144.mjs";
-import { __require as D } from "./index145.mjs";
-import { __require as G } from "./index140.mjs";
+import { __require as B } from "./index156.mjs";
+import { __require as D } from "./index157.mjs";
+import { __require as G } from "./index152.mjs";
 import { __exports as Q } from "./index74.mjs";
 var w;
 function ie() {

package/dist/lib/utils.d.ts

@@ -4,4 +4,12 @@ export declare function formatCurrency(amount: number): string;
 export declare function formatDate(date: string | Date): string;
 export declare function formatDateTime(date: string | Date): string;
 export declare function getStatusColor(status: string): string;
+/**
+ * Extract Facebook attribution cookies (fbc & fbp) for Meta Pixel CAPI
+ * @returns Object with fbc (Facebook Click ID) and fbp (Facebook Browser ID) cookies
+ */
+export declare function getFbCookies(): {
+    fbc: string | undefined;
+    fbp: string | undefined;
+};
 //# 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,CAKrD;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"}
+{"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,CAKrD;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;AAED;;;GAGG;AACH,wBAAgB,YAAY,IAAI;IAAE,GAAG,EAAE,MAAM,GAAG,SAAS,CAAC;IAAC,GAAG,EAAE,MAAM,GAAG,SAAS,CAAA;CAAE,CAcnF"}

package/package.json

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

package/src/components/Checkout.tsx

@@ -27,8 +27,9 @@ import {
   ChevronRight,
   CheckCircle,
   Package,
+  Info,
 } from 'lucide-react';
-import { formatCurrency, cn } from '../lib/utils';
+import { formatCurrency, cn, getFbCookies } from '../lib/utils';
 import PaystackSVG from "../paystack.svg"
 import { usePaystackPayment } from '../hooks/usePaystackPayment';
 
@@ -139,8 +140,6 @@ export function Checkout({
   refundPolicy,
 }: CheckoutProps) {
 
-  const paystackPublicKey = "pk_live_dfb74efb5f74d2acbc253d5ca396ab9015ef0fa7";
-
   const [currentStep, setCurrentStep] = useState<Step>('customer');
   const [selectedStateId, setSelectedStateId] = useState<string | undefined>(undefined);
   const [selectedDeliveryZoneId, setSelectedDeliveryZoneId] = useState<string | undefined>(undefined);
@@ -149,12 +148,18 @@ export function Checkout({
   // Get cart from CartProvider context (required)
   const { refetch: refetchCart, isLoading: isLoadingCart, cart, updateCartMutation, checkoutMutation, clearAndCreateNewCart } = useCart();
 
+  // Use brand-specific Paystack public key (required for online payments)
+  const paystackPublicKey = cart?.brand?.paystackPublicKey;
+
   // Paystack payment integration
   const paystack = usePaystackPayment({
     publicKey: paystackPublicKey || '',
     onSuccess: async (response) => {
 
       try {
+        // Get Facebook attribution cookies for CAPI
+        const { fbc, fbp } = getFbCookies();
+
         const order = await checkout.mutateAsync({
           firstName: formData.firstName,
           lastName: formData.lastName,
@@ -165,6 +170,8 @@ export function Checkout({
           deliveryZoneId: selectedDeliveryZoneId || formData.deliveryZoneId,
           paymentMethod: formData.paymentMethod,
           paystackReference: response.reference,
+          fbc,
+          fbp,
         });
 
         // Check if response is an error
@@ -419,6 +426,9 @@ export function Checkout({
 
     // For COD payment, proceed directly with checkout
     try {
+      // Get Facebook attribution cookies for CAPI
+      const { fbc, fbp } = getFbCookies();
+
       const order = await checkout.mutateAsync({
         firstName: formData.firstName,
         lastName: formData.lastName,
@@ -428,6 +438,8 @@ export function Checkout({
         city: formData.city,
         deliveryZoneId: selectedDeliveryZoneId || formData.deliveryZoneId,
         paymentMethod: formData.paymentMethod,
+        fbc,
+        fbp,
       });
 
       // Check if response is an error
@@ -661,17 +673,13 @@ export function Checkout({
             {shownDeliveryWarnings && (
               <div className="space-y-3 p-4 pb-0">
                 {/* Waybill Delivery Notice */}
-                {selectedDeliveryZone.waybillOnly && (
+                {selectedDeliveryZone.noteTitle && selectedDeliveryZone.noteContent && (
                   <div className="bg-amber-50 border border-amber-200 rounded-lg p-4">
                     <div className="flex items-start gap-3">
                       <Package className="h-5 w-5 text-amber-600 flex-shrink-0 mt-0.5" />
                       <div className="space-y-1">
-                        <p className="text-sm font-semibold text-amber-900">
-                          Waybill Delivery
-                        </p>
-                        <p className="text-sm text-amber-800">
-                          We deliver orders to this location using waybill service. You'll need to pick up your order at a motor park near you.
-                        </p>
+                        <p className="text-sm font-semibold text-amber-900">{selectedDeliveryZone.noteTitle}</p>
+                        <p className="text-sm text-amber-800">{selectedDeliveryZone.noteContent}</p>
                       </div>
                     </div>
                   </div>

package/src/contexts/CartContext.tsx

@@ -23,6 +23,7 @@ import {
 } from '@instockng/api-client';
 import { ShoppingCart } from '../components/ShoppingCart';
 import { useMetaPixel } from '../providers/MetaPixelProvider';
+import { getFbCookies } from '../lib/utils';
 
 const CART_ID_KEY = 'oms_cart_id';
 
@@ -96,25 +97,6 @@ export function CartProvider({ children, brandSlug, initialCartId, shoppingCartP
   // Get Meta Pixel tracking methods
   const { trackAddToCart, trackInitiateCheckout } = 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(() => {
     setIsMounted(true);
@@ -281,7 +263,7 @@ export function CartProvider({ children, brandSlug, initialCartId, shoppingCartP
       }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [cartId, trackAddToCart, getFbCookies]
+    [cartId, trackAddToCart]
   );
 
   const updateItem = useCallback(

package/src/lib/utils.ts

@@ -43,3 +43,23 @@ export function getStatusColor(status: string): string {
   }
   return colors[status] || 'bg-gray-100 text-gray-800'
 }
+
+/**
+ * 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'),
+  };
+}