@instockng/storefront-ui 1.0.29 → 1.0.31

package/dist/components/Checkout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkout.d.ts","sourceRoot":"","sources":["../../src/components/Checkout.tsx"],"names":[],"mappings":"AA4FA,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,QAAQ,CAAC;AAE7C,MAAM,WAAW,gBAAgB;IAC/B,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,aAAa,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,aAAa;IAC5B,gCAAgC;IAChC,MAAM,EAAE,OAAO,CAAC;IAChB,uCAAuC;IACvC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,wBAAwB;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACxC,sCAAsC;IACtC,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,wBAAwB;IACxB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,yBAAyB;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,qCAAqC;IACrC,MAAM,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACjD,4BAA4B;IAC5B,YAAY,CAAC,EAAE;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;KACrB,CAAC;CACH;AAID,wBAAgB,QAAQ,CAAC,EACvB,MAAM,EACN,OAAO,EACP,WAAW,EACX,SAAS,EACT,OAAO,EACP,gBAAgC,EAChC,YAAY,GACb,EAAE,aAAa,2CA22Bf"}
+{"version":3,"file":"Checkout.d.ts","sourceRoot":"","sources":["../../src/components/Checkout.tsx"],"names":[],"mappings":"AA6FA,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,QAAQ,CAAC;AAE7C,MAAM,WAAW,gBAAgB;IAC/B,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,aAAa,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,aAAa;IAC5B,gCAAgC;IAChC,MAAM,EAAE,OAAO,CAAC;IAChB,uCAAuC;IACvC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,wBAAwB;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACxC,sCAAsC;IACtC,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,wBAAwB;IACxB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,yBAAyB;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,qCAAqC;IACrC,MAAM,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACjD,4BAA4B;IAC5B,YAAY,CAAC,EAAE;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;KACrB,CAAC;CACH;AAID,wBAAgB,QAAQ,CAAC,EACvB,MAAM,EACN,OAAO,EACP,WAAW,EACX,SAAS,EACT,OAAO,EACP,gBAAgC,EAChC,YAAY,GACb,EAAE,aAAa,2CAw2Bf"}

package/dist/index12.mjs

@@ -1,74 +1,74 @@
 'use client';
-import { jsxs as a, jsx as e, Fragment as we } from "react/jsx-runtime";
-import { useState as x, useEffect as I, useMemo as $, useCallback as Ce } from "react";
-import { object as G, string as v, ValidationError as Pe } from "./index39.mjs";
+import { jsxs as a, jsx as e, Fragment as Ce } from "react/jsx-runtime";
+import { useState as x, useEffect as I, useMemo as O, useCallback as Pe } from "react";
+import { object as G, string as v, ValidationError as ke } from "./index39.mjs";
 import "./index20.mjs";
 import "@tanstack/react-query";
-import { useGetDeliveryZones as ke } from "./index35.mjs";
-import { useCart as Me } from "./index3.mjs";
-import { Modal as ne } from "./index16.mjs";
+import { useGetDeliveryZones as Me } from "./index35.mjs";
+import { useCart as qe } from "./index3.mjs";
+import { Modal as ie } from "./index16.mjs";
 import { FormInput as k } from "./index17.mjs";
-import { FormSelect as de } from "./index18.mjs";
-import { Button as B } from "./index13.mjs";
-import { Loader2 as W, ChevronLeft as qe, ChevronRight as Ie, CheckCircle as je, Package as ie, Banknote as ce, Mail as Ze, Phone as Se, ChevronDown as ze, Zap as Fe } from "lucide-react";
-import { formatCurrency as M, cn as C, getFbCookies as oe } from "./index19.mjs";
-import Le from "./index40.mjs";
+import { FormSelect as ce } from "./index18.mjs";
+import { Button as T } from "./index13.mjs";
+import { Loader2 as K, ChevronLeft as Ie, ChevronRight as je, CheckCircle as Ze, Package as oe, Banknote as me, Mail as Se, Phone as ze, ChevronDown as Fe, Zap as Le } from "lucide-react";
+import { formatCurrency as M, cn as C, getFbCookies as ue } from "./index19.mjs";
+import Te from "./index40.mjs";
 import { usePaystackPayment as Be } from "./index41.mjs";
-const Te = (i) => i.replace(/\D/g, ""), _e = G({
+const Ae = (i) => i.replace(/\D/g, ""), _e = G({
   firstName: v().required("First name is required").min(2, "First name must be at least 2 characters").max(50, "First name must be less than 50 characters"),
   lastName: v().required("Last name is required").min(2, "Last name must be at least 2 characters").max(50, "Last name must be less than 50 characters"),
   email: v().required("Email is required").email("Please enter a valid email address"),
   phone: v().required("Phone number is required").test("nigerian-phone", "Please enter a valid Nigerian phone number (e.g. 0812 564 8668)", (i) => {
     if (!i) return !1;
-    const q = Te(i);
+    const q = Ae(i);
     return [
       /^0[789]\d{9}$/
       // 0xxxxxxxxx (11 digits total)
     ].some((N) => N.test(q));
   })
-}), Ae = G({
+}), Re = G({
   address: v().required("Street address is required").min(10, "Please provide a complete address"),
   city: v().required("City is required").min(3, "City name must be at least 3 characters"),
   state: v().required("State is required").test("not-empty", "State is required", (i) => !!i && i.trim() !== ""),
   deliveryZoneId: v().required("Delivery zone is required").test("not-empty", "Delivery zone is required", (i) => !!i && i.trim() !== "")
-}), Oe = G({
+}), $e = G({
   paymentMethod: v().oneOf(["cod", "online"], "Please select a payment method").required("Payment method is required")
 });
-function at({
+function rt({
   isOpen: i,
   onClose: q,
   initialData: n,
   onSuccess: N,
-  onError: m,
-  submitButtonText: me = "Place Order",
+  onError: c,
+  submitButtonText: he = "Place Order",
   refundPolicy: j
 }) {
-  var E, D, ee, te, ae, re, se, le;
-  const ue = "pk_live_dfb74efb5f74d2acbc253d5ca396ab9015ef0fa7", [c, b] = x("customer"), [Z, he] = x(void 0), [y, K] = x(void 0), [f, T] = x(null), { refetch: Y, isLoading: V, cart: s, updateCartMutation: _, checkoutMutation: ye, clearAndCreateNewCart: H } = Me(), U = Be({
-    publicKey: ue,
+  var D, ee, te, ae, re, se, le, ne, de;
+  const [o, b] = x("customer"), [Z, ye] = x(void 0), [f, W] = x(void 0), [p, B] = x(null), { refetch: V, isLoading: Y, cart: s, updateCartMutation: A, checkoutMutation: fe, clearAndCreateNewCart: H } = qe(), U = (D = s == null ? void 0 : s.brand) == null ? void 0 : D.paystackPublicKey, J = Be({
+    publicKey: U || "",
     onSuccess: async (t) => {
       try {
-        const { fbc: l, fbp: d } = oe(), o = await P.mutateAsync({
+        const { fbc: l, fbp: d } = ue(), m = await P.mutateAsync({
           firstName: r.firstName,
           lastName: r.lastName,
           email: r.email,
           phone: r.phone,
           address: r.address,
           city: r.city,
-          deliveryZoneId: y || r.deliveryZoneId,
+          deliveryZoneId: f || r.deliveryZoneId,
           paymentMethod: r.paymentMethod,
           paystackReference: t.reference,
           fbc: l,
           fbp: d
         });
-        if ("error" in o) {
-          const R = o.error;
-          m == null || m(new Error((R == null ? void 0 : R.message) || "Checkout failed"));
+        if ("error" in m) {
+          const $ = m.error;
+          c == null || c(new Error(($ == null ? void 0 : $.message) || "Checkout failed"));
           return;
         }
-        T(o), H(), N == null || N(o.id);
+        B(m), H(), N == null || N(m.id);
       } catch (l) {
-        m == null || m(l);
+        c == null || c(l);
       }
     },
     onClose: () => {
@@ -76,15 +76,15 @@ function at({
     }
   });
   I(() => {
-    i && Y();
-  }, [i, Y]);
-  const { data: w } = ke(((E = s == null ? void 0 : s.brand) == null ? void 0 : E.id) || "", {
-    enabled: !!((D = s == null ? void 0 : s.brand) != null && D.id)
-  }), u = $(() => w == null ? void 0 : w.find((t) => t.id === Z), [w, Z]), p = $(() => u == null ? void 0 : u.zones.find((t) => t.id === y), [u, y]), P = ye;
+    i && V();
+  }, [i, V]);
+  const { data: w } = Me(((ee = s == null ? void 0 : s.brand) == null ? void 0 : ee.id) || "", {
+    enabled: !!((te = s == null ? void 0 : s.brand) != null && te.id)
+  }), u = O(() => w == null ? void 0 : w.find((t) => t.id === Z), [w, Z]), y = O(() => u == null ? void 0 : u.zones.find((t) => t.id === f), [u, f]), P = fe;
   I(() => {
-    i || (T(null), b("customer"), P.reset());
+    i || (B(null), b("customer"), P.reset());
   }, [i]);
-  const [r, A] = x({
+  const [r, _] = x({
     firstName: (n == null ? void 0 : n.firstName) || "",
     lastName: (n == null ? void 0 : n.lastName) || "",
     email: (n == null ? void 0 : n.email) || "",
@@ -98,9 +98,9 @@ function at({
   I(() => {
     i && b("customer");
   }, [i]);
-  const [J, Q] = x(!1);
+  const [Q, X] = x(!1);
   I(() => {
-    i && s && !n && !J && (A((t) => {
+    i && s && !n && !Q && (_((t) => {
       var l;
       return {
         ...t,
@@ -110,27 +110,27 @@ function at({
         phone: s.customerPhone || t.phone,
         deliveryZoneId: ((l = s.deliveryZone) == null ? void 0 : l.id) || t.deliveryZoneId
       };
-    }), Q(!0)), i || Q(!1);
-  }, [i, s, n, J]), I(() => {
-    if (y) {
-      const t = u == null ? void 0 : u.zones.find((l) => l.id === y);
-      t && A((l) => ({
+    }), X(!0)), i || X(!1);
+  }, [i, s, n, Q]), I(() => {
+    if (f) {
+      const t = u == null ? void 0 : u.zones.find((l) => l.id === f);
+      t && _((l) => ({
         ...l,
         paymentMethod: t.allowOnline ? "online" : "cod"
       }));
     }
-  }, [y, u]);
-  const [h, S] = x({}), [O, fe] = x(!1), g = (t) => {
+  }, [f, u]);
+  const [h, S] = x({}), [R, pe] = x(!1), g = (t) => {
     const { name: l, value: d } = t.target;
-    A((o) => ({ ...o, [l]: d })), h[l] && S((o) => ({ ...o, [l]: void 0 }));
-  }, z = Ce(
+    _((m) => ({ ...m, [l]: d })), h[l] && S((m) => ({ ...m, [l]: void 0 }));
+  }, z = Pe(
     (t) => {
       const l = r[t];
       if (!l) return;
       const d = {};
-      t === "firstName" ? d.customerFirstName = l : t === "lastName" ? d.customerLastName = l : t === "email" ? d.customerEmail = l : t === "phone" && (d.customerPhone = l), _.mutate(d);
+      t === "firstName" ? d.customerFirstName = l : t === "lastName" ? d.customerLastName = l : t === "email" ? d.customerEmail = l : t === "phone" && (d.customerPhone = l), A.mutate(d);
     },
-    [r, _]
+    [r, A]
   ), F = (t) => {
     const l = {};
     try {
@@ -141,21 +141,21 @@ function at({
           address: r.address,
           city: r.city,
           state: Z || r.state || "",
-          deliveryZoneId: y || r.deliveryZoneId || ""
+          deliveryZoneId: f || r.deliveryZoneId || ""
         };
-        Ae.validateSync(d, { abortEarly: !1 });
-      } else t === "payment" && Oe.validateSync(r, { abortEarly: !1 });
+        Re.validateSync(d, { abortEarly: !1 });
+      } else t === "payment" && $e.validateSync(r, { abortEarly: !1 });
     } catch (d) {
-      d instanceof Pe && d.inner.forEach((o) => {
-        o.path && (l[o.path] = o.message);
+      d instanceof ke && d.inner.forEach((m) => {
+        m.path && (l[m.path] = m.message);
       });
     }
     return S(l), Object.keys(l).length === 0;
-  }, pe = () => {
-    F(c) && (c === "customer" ? b("delivery") : c === "delivery" && b("payment"));
   }, ve = () => {
-    c === "payment" ? b("delivery") : c === "delivery" && b("customer");
-  }, Ne = async () => {
+    F(o) && (o === "customer" ? b("delivery") : o === "delivery" && b("payment"));
+  }, Ne = () => {
+    o === "payment" ? b("delivery") : o === "delivery" && b("customer");
+  }, be = async () => {
     if (!F("customer")) {
       b("customer");
       return;
@@ -166,12 +166,16 @@ function at({
     }
     if (F("payment")) {
       if (r.paymentMethod === "online") {
-        if (!U.isLoaded) {
-          m == null || m(new Error("Payment system is loading. Please try again."));
+        if (!U) {
+          c == null || c(new Error("Paystack is not configured. Please contact support."));
+          return;
+        }
+        if (!J.isLoaded) {
+          c == null || c(new Error("Payment system is loading. Please try again."));
           return;
         }
         const t = Math.round(s.pricing.total * 100);
-        U.initializePayment({
+        J.initializePayment({
           email: r.email || (s == null ? void 0 : s.customerEmail) || "customer@example.com",
           amount: t,
           currency: "NGN",
@@ -194,109 +198,109 @@ function at({
         return;
       }
       try {
-        const { fbc: t, fbp: l } = oe(), d = await P.mutateAsync({
+        const { fbc: t, fbp: l } = ue(), d = await P.mutateAsync({
           firstName: r.firstName,
           lastName: r.lastName,
           email: r.email,
           phone: r.phone,
           address: r.address,
           city: r.city,
-          deliveryZoneId: y || r.deliveryZoneId,
+          deliveryZoneId: f || r.deliveryZoneId,
           paymentMethod: r.paymentMethod,
           fbc: t,
           fbp: l
         });
         if ("error" in d) {
-          const o = d.error;
-          m == null || m(new Error((o == null ? void 0 : o.message) || "Checkout failed"));
+          const m = d.error;
+          c == null || c(new Error((m == null ? void 0 : m.message) || "Checkout failed"));
           return;
         }
-        T(d), H(), N == null || N(d.id);
+        B(d), H(), N == null || N(d.id);
       } catch (t) {
-        m == null || m(t);
+        c == null || c(t);
       }
     }
-  }, be = {
+  }, ge = {
     customer: "Customer Information",
     delivery: "Delivery Address",
     payment: "Payment Method"
-  }, ge = $(() => be[c], [c]), xe = /* @__PURE__ */ a("div", { className: "space-y-3", children: [
-    (c === "payment" || c === "delivery") && ((ee = s == null ? void 0 : s.pricing) == null ? void 0 : ee.total) && /* @__PURE__ */ a("div", { className: "text-sm text-black relative", children: [
-      V && /* @__PURE__ */ e("div", { className: "absolute flex items-center justify-center inset-0 bg-white opacity-50", children: /* @__PURE__ */ e(W, { className: "animate-spin text-accent-500" }) }),
+  }, xe = O(() => ge[o], [o]), we = /* @__PURE__ */ a("div", { className: "space-y-3", children: [
+    (o === "payment" || o === "delivery") && ((ae = s == null ? void 0 : s.pricing) == null ? void 0 : ae.total) && /* @__PURE__ */ a("div", { className: "text-sm text-black relative", children: [
+      Y && /* @__PURE__ */ e("div", { className: "absolute flex items-center justify-center inset-0 bg-white opacity-50", children: /* @__PURE__ */ e(K, { className: "animate-spin text-accent-500" }) }),
       /* @__PURE__ */ a("div", { className: "flex items-center justify-between font-medium", children: [
         /* @__PURE__ */ e("span", { children: "Subtotal" }),
-        /* @__PURE__ */ e("span", { children: M(((te = s == null ? void 0 : s.pricing) == null ? void 0 : te.subtotal) ?? 0) })
+        /* @__PURE__ */ e("span", { children: M(((re = s == null ? void 0 : s.pricing) == null ? void 0 : re.subtotal) ?? 0) })
       ] }),
       s.pricing.discount && /* @__PURE__ */ a("div", { className: "flex items-center justify-between font-medium", children: [
         /* @__PURE__ */ e("span", { children: "Discount" }),
         /* @__PURE__ */ a("span", { className: "text-green-600", children: [
           "-",
-          M(((re = (ae = s == null ? void 0 : s.pricing) == null ? void 0 : ae.discount) == null ? void 0 : re.amount) ?? 0)
+          M(((le = (se = s == null ? void 0 : s.pricing) == null ? void 0 : se.discount) == null ? void 0 : le.amount) ?? 0)
         ] })
       ] }),
       /* @__PURE__ */ a("div", { className: "flex items-center justify-between font-medium", children: [
         /* @__PURE__ */ e("span", { children: "Delivery Fee" }),
-        /* @__PURE__ */ e("span", { children: M(((se = s == null ? void 0 : s.pricing) == null ? void 0 : se.deliveryCharge) ?? 0) })
+        /* @__PURE__ */ e("span", { children: M(((ne = s == null ? void 0 : s.pricing) == null ? void 0 : ne.deliveryCharge) ?? 0) })
       ] }),
       /* @__PURE__ */ e("hr", { className: "border-gray-200 my-2" }),
       /* @__PURE__ */ a("div", { className: "flex items-center justify-between font-medium", children: [
         /* @__PURE__ */ e("span", { children: "Total" }),
-        /* @__PURE__ */ e("span", { children: M(((le = s == null ? void 0 : s.pricing) == null ? void 0 : le.total) ?? 0) })
+        /* @__PURE__ */ e("span", { children: M(((de = s == null ? void 0 : s.pricing) == null ? void 0 : de.total) ?? 0) })
       ] })
     ] }),
     /* @__PURE__ */ a("div", { className: "flex gap-3", children: [
-      c !== "customer" && /* @__PURE__ */ a(
-        B,
+      o !== "customer" && /* @__PURE__ */ a(
+        T,
         {
           type: "button",
           variant: "outline",
-          onClick: ve,
+          onClick: Ne,
           className: "flex-1 border-gray-400",
           size: "lg",
           children: [
-            /* @__PURE__ */ e(qe, { className: "mr-2 h-4 w-4" }),
+            /* @__PURE__ */ e(Ie, { className: "mr-2 h-4 w-4" }),
             "Back"
           ]
         }
       ),
-      c !== "payment" ? /* @__PURE__ */ a(
-        B,
+      o !== "payment" ? /* @__PURE__ */ a(
+        T,
         {
           type: "button",
-          onClick: pe,
+          onClick: ve,
           className: "flex-1 bg-accent-500 text-white hover:bg-accent-600",
           size: "lg",
           children: [
             "Next",
-            /* @__PURE__ */ e(Ie, { className: "ml-2 h-4 w-4" })
+            /* @__PURE__ */ e(je, { className: "ml-2 h-4 w-4" })
           ]
         }
       ) : /* @__PURE__ */ e(
-        B,
+        T,
         {
           type: "button",
-          onClick: Ne,
+          onClick: be,
           disabled: P.isPending,
           className: "flex-1 bg-accent-500 text-white hover:bg-accent-600",
           size: "lg",
-          children: P.isPending ? /* @__PURE__ */ a(we, { children: [
-            /* @__PURE__ */ e(W, { className: "mr-2 h-4 w-4 animate-spin" }),
+          children: P.isPending ? /* @__PURE__ */ a(Ce, { children: [
+            /* @__PURE__ */ e(K, { className: "mr-2 h-4 w-4 animate-spin" }),
             "Processing..."
-          ] }) : me
+          ] }) : he
         }
       )
     ] }),
     P.isError && /* @__PURE__ */ e("div", { className: "rounded-lg bg-red-50 p-3 text-sm text-red-600", children: "Failed to place order. Please check your information and try again." })
   ] }), L = (t) => !(s != null && s.availablePaymentMethods.includes(t));
-  if (f)
+  if (p)
     return /* @__PURE__ */ e(
-      ne,
+      ie,
       {
         isOpen: i,
         onClose: q,
         title: "Order Placed Successfully!",
         footer: /* @__PURE__ */ e(
-          B,
+          T,
           {
             onClick: q,
             className: "w-full bg-accent-500 text-white hover:bg-accent-600",
@@ -307,43 +311,43 @@ function at({
         size: "lg",
         contentClassName: "p-6",
         children: /* @__PURE__ */ a("div", { className: "text-center space-y-6", children: [
-          /* @__PURE__ */ e("div", { className: "flex justify-center", children: /* @__PURE__ */ e("div", { className: "w-20 h-20 bg-green-100 rounded-full flex items-center justify-center", children: /* @__PURE__ */ e(je, { className: "h-12 w-12 text-green-600" }) }) }),
+          /* @__PURE__ */ e("div", { className: "flex justify-center", children: /* @__PURE__ */ e("div", { className: "w-20 h-20 bg-green-100 rounded-full flex items-center justify-center", children: /* @__PURE__ */ e(Ze, { className: "h-12 w-12 text-green-600" }) }) }),
           /* @__PURE__ */ a("div", { className: "space-y-2", children: [
             /* @__PURE__ */ e("h3", { className: "text-2xl font-bold text-gray-900", children: "Thank You!" }),
             /* @__PURE__ */ e("p", { className: "text-gray-600", children: "Your order has been placed successfully." })
           ] }),
           /* @__PURE__ */ a("div", { className: "bg-gray-50 rounded-lg p-6 space-y-4", children: [
             /* @__PURE__ */ a("div", { className: "flex items-center justify-center space-x-2 text-gray-700", children: [
-              /* @__PURE__ */ e(ie, { className: "h-5 w-5" }),
+              /* @__PURE__ */ e(oe, { className: "h-5 w-5" }),
               /* @__PURE__ */ a("span", { className: "font-medium", children: [
                 "Order #",
-                f.orderNumber
+                p.orderNumber
               ] })
             ] }),
             /* @__PURE__ */ a("div", { className: "border-t border-gray-200 pt-4 space-y-3", children: [
               /* @__PURE__ */ a("div", { className: "flex justify-between text-sm", children: [
                 /* @__PURE__ */ e("span", { className: "text-gray-600", children: "Customer" }),
                 /* @__PURE__ */ a("span", { className: "font-medium text-gray-900", children: [
-                  f.firstName,
+                  p.firstName,
                   " ",
-                  f.lastName
+                  p.lastName
                 ] })
               ] }),
               /* @__PURE__ */ a("div", { className: "flex justify-between text-sm", children: [
                 /* @__PURE__ */ e("span", { className: "text-gray-600", children: "Phone" }),
-                /* @__PURE__ */ e("span", { className: "font-medium text-gray-900", children: f.phone })
+                /* @__PURE__ */ e("span", { className: "font-medium text-gray-900", children: p.phone })
               ] }),
-              f.email && /* @__PURE__ */ a("div", { className: "flex justify-between text-sm", children: [
+              p.email && /* @__PURE__ */ a("div", { className: "flex justify-between text-sm", children: [
                 /* @__PURE__ */ e("span", { className: "text-gray-600", children: "Email" }),
-                /* @__PURE__ */ e("span", { className: "font-medium text-gray-900", children: f.email })
+                /* @__PURE__ */ e("span", { className: "font-medium text-gray-900", children: p.email })
               ] }),
               /* @__PURE__ */ a("div", { className: "flex justify-between text-sm", children: [
                 /* @__PURE__ */ e("span", { className: "text-gray-600", children: "Payment Method" }),
-                /* @__PURE__ */ e("span", { className: "font-medium text-gray-900", children: f.paymentMethod === "cod" ? "Cash on Delivery" : "Online Payment" })
+                /* @__PURE__ */ e("span", { className: "font-medium text-gray-900", children: p.paymentMethod === "cod" ? "Cash on Delivery" : "Online Payment" })
               ] }),
               /* @__PURE__ */ a("div", { className: "flex justify-between text-sm", children: [
                 /* @__PURE__ */ e("span", { className: "text-gray-600", children: "Total" }),
-                /* @__PURE__ */ e("span", { className: "font-bold text-gray-900", children: M(f.totalPrice) })
+                /* @__PURE__ */ e("span", { className: "font-bold text-gray-900", children: M(p.totalPrice) })
               ] })
             ] })
           ] }),
@@ -355,27 +359,27 @@ function at({
         ] })
       }
     );
-  const X = p && (c === "delivery" || c === "payment") && (p.waybillOnly || !(p != null && p.allowCOD));
+  const E = y && (o === "delivery" || o === "payment") && (y.waybillOnly || !(y != null && y.allowCOD));
   return /* @__PURE__ */ e(
-    ne,
+    ie,
     {
       isOpen: i,
       onClose: q,
-      title: ge,
-      footer: xe,
+      title: xe,
+      footer: we,
       size: "lg",
       contentClassName: "p-0",
-      children: V ? /* @__PURE__ */ e("div", { className: "flex items-center justify-center min-h-[300px]", children: /* @__PURE__ */ e(W, { className: "h-8 w-8 animate-spin text-gray-600" }) }) : /* @__PURE__ */ e("div", { className: "w-full overflow-hidden", children: /* @__PURE__ */ a("div", { className: "relative w-full", children: [
-        X && /* @__PURE__ */ a("div", { className: "space-y-3 p-4 pb-0", children: [
-          p.waybillOnly && /* @__PURE__ */ e("div", { className: "bg-amber-50 border border-amber-200 rounded-lg p-4", children: /* @__PURE__ */ a("div", { className: "flex items-start gap-3", children: [
-            /* @__PURE__ */ e(ie, { className: "h-5 w-5 text-amber-600 flex-shrink-0 mt-0.5" }),
+      children: Y ? /* @__PURE__ */ e("div", { className: "flex items-center justify-center min-h-[300px]", children: /* @__PURE__ */ e(K, { className: "h-8 w-8 animate-spin text-gray-600" }) }) : /* @__PURE__ */ e("div", { className: "w-full overflow-hidden", children: /* @__PURE__ */ a("div", { className: "relative w-full", children: [
+        E && /* @__PURE__ */ a("div", { className: "space-y-3 p-4 pb-0", children: [
+          y.noteTitle && y.noteContent && /* @__PURE__ */ e("div", { className: "bg-amber-50 border border-amber-200 rounded-lg p-4", children: /* @__PURE__ */ a("div", { className: "flex items-start gap-3", children: [
+            /* @__PURE__ */ e(oe, { className: "h-5 w-5 text-amber-600 flex-shrink-0 mt-0.5" }),
             /* @__PURE__ */ a("div", { className: "space-y-1", children: [
-              /* @__PURE__ */ e("p", { className: "text-sm font-semibold text-amber-900", children: "Waybill Delivery" }),
-              /* @__PURE__ */ e("p", { className: "text-sm text-amber-800", children: "We deliver orders to this location using waybill service. You'll need to pick up your order at a motor park near you." })
+              /* @__PURE__ */ e("p", { className: "text-sm font-semibold text-amber-900 whitespace-pre-wrap", children: y.noteTitle }),
+              /* @__PURE__ */ e("p", { className: "text-sm text-amber-800 whitespace-pre-wrap", children: y.noteContent })
             ] })
           ] }) }),
-          !(p != null && p.allowCOD) && /* @__PURE__ */ e("div", { className: "bg-blue-50 border border-blue-200 rounded-lg p-4", children: /* @__PURE__ */ a("div", { className: "flex items-start gap-3", children: [
-            /* @__PURE__ */ e(ce, { className: "h-5 w-5 text-blue-600 flex-shrink-0 mt-0.5" }),
+          !(y != null && y.allowCOD) && /* @__PURE__ */ e("div", { className: "bg-blue-50 border border-blue-200 rounded-lg p-4", children: /* @__PURE__ */ a("div", { className: "flex items-start gap-3", children: [
+            /* @__PURE__ */ e(me, { className: "h-5 w-5 text-blue-600 flex-shrink-0 mt-0.5" }),
             /* @__PURE__ */ a("div", { className: "space-y-1", children: [
               /* @__PURE__ */ e("p", { className: "text-sm font-semibold text-blue-900", children: "Cash on Delivery Unavailable" }),
               /* @__PURE__ */ e("p", { className: "text-sm text-blue-800", children: "We're unable to offer cash on delivery to this location. Please use online payment to complete your order." })
@@ -387,9 +391,9 @@ function at({
           {
             className: C(
               "flex transition-transform duration-300 ease-in-out w-full",
-              c === "customer" && "translate-x-0",
-              c === "delivery" && "-translate-x-full",
-              c === "payment" && "-translate-x-[200%]"
+              o === "customer" && "translate-x-0",
+              o === "delivery" && "-translate-x-full",
+              o === "payment" && "-translate-x-[200%]"
             ),
             children: [
               /* @__PURE__ */ e("div", { className: "w-full min-w-full flex-shrink-0 p-4", children: /* @__PURE__ */ e("div", { className: "space-y-4", children: /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
@@ -431,7 +435,7 @@ function at({
                     onChange: g,
                     onBlur: () => z("email"),
                     error: h.email,
-                    icon: /* @__PURE__ */ e(Ze, { size: 16 }),
+                    icon: /* @__PURE__ */ e(Se, { size: 16 }),
                     autoCorrect: "off",
                     required: !0
                   }
@@ -448,7 +452,7 @@ function at({
                     placeholder: "e.g. 08012345678",
                     maxLength: 18,
                     error: h.phone,
-                    icon: /* @__PURE__ */ e(Se, { size: 16 }),
+                    icon: /* @__PURE__ */ e(ze, { size: 16 }),
                     autoCorrect: "off",
                     required: !0,
                     className: "font-semibold"
@@ -484,15 +488,15 @@ function at({
                     }
                   ),
                   /* @__PURE__ */ a(
-                    de,
+                    ce,
                     {
                       label: "State",
                       name: "state",
                       value: Z || "",
                       onChange: (t) => {
-                        K("");
+                        W("");
                         const l = t.target.value;
-                        he(l || void 0), h.state && S((d) => ({ ...d, state: void 0 }));
+                        ye(l || void 0), h.state && S((d) => ({ ...d, state: void 0 }));
                       },
                       error: h.state,
                       required: !0,
@@ -503,13 +507,13 @@ function at({
                     }
                   ),
                   /* @__PURE__ */ a(
-                    de,
+                    ce,
                     {
                       label: "Delivery Zone",
-                      value: y || "",
+                      value: f || "",
                       onChange: (t) => {
                         const l = t.target.value;
-                        K(l || void 0), h.deliveryZoneId && S((d) => ({ ...d, deliveryZoneId: void 0 })), l && _.mutate({ deliveryZoneId: l });
+                        W(l || void 0), h.deliveryZoneId && S((d) => ({ ...d, deliveryZoneId: void 0 })), l && A.mutate({ deliveryZoneId: l });
                       },
                       disabled: !u,
                       error: h.deliveryZoneId,
@@ -528,22 +532,22 @@ function at({
                 ] })
               ] }) }),
               /* @__PURE__ */ e("div", { className: "w-full min-w-full flex-shrink-0 p-4", children: /* @__PURE__ */ a("div", { className: "space-y-6", children: [
-                j && /* @__PURE__ */ a("div", { className: `border border-gray-200 rounded-lg ${X ? "mt-4" : ""}`, children: [
+                j && /* @__PURE__ */ a("div", { className: `border border-gray-200 rounded-lg ${E ? "mt-4" : ""}`, children: [
                   /* @__PURE__ */ a(
                     "button",
                     {
                       type: "button",
-                      onClick: () => fe(!O),
+                      onClick: () => pe(!R),
                       className: "overflow-hidden w-full flex items-center overflow-hidden rounded-lg rounded-b-none justify-between p-4 text-left hover:bg-gray-50 transition-colors",
                       children: [
                         /* @__PURE__ */ e("span", { className: "text-sm font-bold text-accent-700", children: j.title || "🤔 Curious about Refunds?" }),
                         /* @__PURE__ */ e(
-                          ze,
+                          Fe,
                           {
                             size: 16,
                             className: C(
                               "transform transition-transform duration-200 text-gray-500",
-                              O && "rotate-180"
+                              R && "rotate-180"
                             )
                           }
                         )
@@ -555,7 +559,7 @@ function at({
                     {
                       className: C(
                         "overflow-hidden transition-all duration-300 ease-in-out",
-                        O ? "max-h-96 opacity-100" : "max-h-0 opacity-0"
+                        R ? "max-h-96 opacity-100" : "max-h-0 opacity-0"
                       ),
                       children: /* @__PURE__ */ e("div", { className: "px-4 pb-4 border-t border-gray-100", children: /* @__PURE__ */ e("div", { className: "text-sm text-gray-600 space-y-3 pt-4", children: j.policies && /* @__PURE__ */ a("div", { children: [
                         /* @__PURE__ */ e("h4", { className: "font-bold text-gray-800 mb-2", children: "Our Refund Policy" }),
@@ -597,7 +601,7 @@ function at({
                                 "p-3 rounded-full",
                                 r.paymentMethod === "online" ? "bg-accent-100 text-accent-600" : "bg-gray-100 text-gray-600"
                               ),
-                              children: /* @__PURE__ */ e(Fe, { size: 24 })
+                              children: /* @__PURE__ */ e(Le, { size: 24 })
                             }
                           ),
                           /* @__PURE__ */ a("div", { children: [
@@ -606,7 +610,7 @@ function at({
                             /* @__PURE__ */ e(
                               "img",
                               {
-                                src: Le,
+                                src: Te,
                                 alt: "Paystack",
                                 className: "h-4 w-auto mt-2 mx-auto"
                               }
@@ -646,7 +650,7 @@ function at({
                                 "p-3 rounded-full",
                                 r.paymentMethod === "cod" ? "bg-accent-100 text-accent-600" : "bg-gray-100 text-gray-600"
                               ),
-                              children: /* @__PURE__ */ e(ce, { size: 24 })
+                              children: /* @__PURE__ */ e(me, { size: 24 })
                             }
                           ),
                           /* @__PURE__ */ a("div", { children: [
@@ -669,5 +673,5 @@ function at({
   );
 }
 export {
-  at as Checkout
+  rt as Checkout
 };

package/dist/index134.mjs

@@ -1,5 +1,5 @@
 'use client';
-import f from "./index75.mjs";
+import f from "./index76.mjs";
 import d from "./index205.mjs";
 function l(e) {
   return encodeURIComponent(e).replace(/%3A/gi, ":").replace(/%24/g, "$").replace(/%2C/gi, ",").replace(/%20/g, "+");

package/dist/index135.mjs

@@ -1,5 +1,5 @@
 'use client';
-import n from "./index75.mjs";
+import n from "./index76.mjs";
 class a {
   constructor() {
     this.handlers = [];