@instockng/storefront-ui 1.0.46 → 1.0.47

package/dist/index13.mjs

@@ -1,170 +1,170 @@
 'use client';
 import { jsxs as a, jsx as e, Fragment as Me } from "react/jsx-runtime";
-import { useState as w, useEffect as Z, useMemo as G, useCallback as qe } from "react";
-import { object as V, string as v, ValidationError as Ie } from "./index43.mjs";
+import { useState as w, useEffect as S, useMemo as K, useCallback as qe } from "react";
+import { object as G, string as N, ValidationError as Ie } from "./index43.mjs";
 import "./index21.mjs";
 import "@tanstack/react-query";
 import { useGetDeliveryZones as je } from "./index36.mjs";
-import { useCart as Ze } from "./index3.mjs";
+import { useCart as Se } from "./index3.mjs";
 import { Modal as oe } from "./index17.mjs";
 import { FormInput as q } from "./index18.mjs";
 import { FormSelect as me } from "./index19.mjs";
-import { Button as A } from "./index14.mjs";
-import { Loader2 as W, ChevronLeft as Se, ChevronRight as ze, CheckCircle as Fe, Package as ue, Banknote as he, Mail as Le, Phone as Te, ChevronDown as Be, Zap as Ae } from "lucide-react";
-import { formatCurrency as I, cn as P, getFbCookies as ye, getTikTokCookies as fe } from "./index20.mjs";
-import _e from "./index44.mjs";
+import { Button as _ } from "./index14.mjs";
+import { Loader2 as O, ChevronLeft as Ze, ChevronRight as Le, CheckCircle as ze, Package as he, Banknote as ue, Mail as Fe, Phone as Te, ChevronDown as Ae, Zap as _e } from "lucide-react";
+import { formatCurrency as I, cn as P, getFbCookies as ye, getTikTokCookies as pe } from "./index20.mjs";
+import Be from "./index44.mjs";
 import { usePaystackPayment as Re } from "./index45.mjs";
-const $e = (d) => d.replace(/\D/g, ""), Ke = V({
-  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)", (d) => {
-    if (!d) return !1;
-    const j = $e(d);
+const We = "2348125648668", $e = `https://wa.me/${We}`, He = (i) => i.replace(/\D/g, ""), Ke = G({
+  firstName: N().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: N().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: N().required("Email is required").email("Please enter a valid email address"),
+  phone: N().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 j = He(i);
     return [
       /^0[789]\d{9}$/
       // 0xxxxxxxxx (11 digits total)
-    ].some((N) => N.test(j));
+    ].some((v) => v.test(j));
   })
-}), Oe = V({
-  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", (d) => !!d && d.trim() !== ""),
-  deliveryZoneId: v().required("Delivery zone is required").test("not-empty", "Delivery zone is required", (d) => !!d && d.trim() !== "")
-}), Ge = V({
-  paymentMethod: v().oneOf(["cod", "online"], "Please select a payment method").required("Payment method is required")
+}), Oe = G({
+  address: N().required("Street address is required").min(10, "Please provide a complete address"),
+  city: N().required("City is required").min(3, "City name must be at least 3 characters"),
+  state: N().required("State is required").test("not-empty", "State is required", (i) => !!i && i.trim() !== ""),
+  deliveryZoneId: N().required("Delivery zone is required").test("not-empty", "Delivery zone is required", (i) => !!i && i.trim() !== "")
+}), Ge = G({
+  paymentMethod: N().oneOf(["cod", "online"], "Please select a payment method").required("Payment method is required")
 });
-function nt({
-  isOpen: d,
+function dt({
+  isOpen: i,
   onClose: j,
-  initialData: n,
-  onSuccess: N,
+  initialData: l,
+  onSuccess: v,
   onError: c,
-  submitButtonText: pe = "Place Order",
-  refundPolicy: S
+  submitButtonText: fe = "Place Order",
+  refundPolicy: Z
 }) {
-  var te, ae, re, se, le, ne, de, ie, ce;
-  const [o, b] = w("customer"), [z, ve] = w(void 0), [f, Y] = w(void 0), [p, _] = w(null), { refetch: H, isLoading: U, cart: s, updateCartMutation: R, checkoutMutation: Ne, clearAndCreateNewCart: J } = Ze(), Q = (te = s == null ? void 0 : s.brand) == null ? void 0 : te.paystackPublicKey, X = Re({
-    isOpen: d,
+  var te, ae, re, se, ne, le, ie, de, ce;
+  const [o, g] = w("customer"), [L, Ne] = w(void 0), [p, U] = w(void 0), [f, B] = w(null), { refetch: V, isLoading: Y, cart: s, updateCartMutation: R, checkoutMutation: ve, clearAndCreateNewCart: J } = Se(), Q = (te = s == null ? void 0 : s.brand) == null ? void 0 : te.paystackPublicKey, X = Re({
+    isOpen: i,
     publicKey: Q || "",
     onSuccess: async (t) => {
       try {
-        const { fbc: l, fbp: i } = ye(), { ttp: y, ttclid: M } = fe(), x = await k.mutateAsync({
+        const { fbc: n, fbp: d } = ye(), { ttp: y, ttclid: M } = pe(), x = await k.mutateAsync({
           firstName: r.firstName,
           lastName: r.lastName,
           email: r.email,
           phone: r.phone,
           address: r.address,
           city: r.city,
-          deliveryZoneId: f || r.deliveryZoneId,
+          deliveryZoneId: p || r.deliveryZoneId,
           paymentMethod: r.paymentMethod,
           paystackReference: t.reference,
-          fbc: l,
-          fbp: i,
+          fbc: n,
+          fbp: d,
           ttp: y,
           ttclid: M
         });
         if ("error" in x) {
-          const O = x.error;
-          c == null || c(new Error((O == null ? void 0 : O.message) || "Checkout failed"));
+          const H = x.error;
+          c == null || c(new Error((H == null ? void 0 : H.message) || "Checkout failed"));
           return;
         }
-        _(x), J(), N == null || N(x.id);
-      } catch (l) {
-        c == null || c(l);
+        B(x), J(), v == null || v(x.id);
+      } catch (n) {
+        c == null || c(n);
       }
     },
     onClose: () => {
       console.log("Payment popup closed by user");
     }
   });
-  Z(() => {
-    d && H();
-  }, [d, H]);
+  S(() => {
+    i && V();
+  }, [i, V]);
   const { data: C } = je(((ae = s == null ? void 0 : s.brand) == null ? void 0 : ae.id) || "", {
     enabled: !!((re = s == null ? void 0 : s.brand) != null && re.id)
-  }), m = G(() => C == null ? void 0 : C.find((t) => t.id === z), [C, z]), h = G(() => m == null ? void 0 : m.zones.find((t) => t.id === f), [m, f]), k = Ne;
-  Z(() => {
-    d || (_(null), b("customer"), k.reset());
-  }, [d]);
-  const [r, $] = w({
-    firstName: (n == null ? void 0 : n.firstName) || "",
-    lastName: (n == null ? void 0 : n.lastName) || "",
-    email: (n == null ? void 0 : n.email) || "",
-    phone: (n == null ? void 0 : n.phone) || "",
-    address: (n == null ? void 0 : n.address) || "",
-    city: (n == null ? void 0 : n.city) || "",
-    deliveryZoneId: (n == null ? void 0 : n.deliveryZoneId) || "",
-    paymentMethod: (n == null ? void 0 : n.paymentMethod) || "online",
-    notes: (n == null ? void 0 : n.notes) || ""
+  }), m = K(() => C == null ? void 0 : C.find((t) => t.id === L), [C, L]), u = K(() => m == null ? void 0 : m.zones.find((t) => t.id === p), [m, p]), k = ve;
+  S(() => {
+    i || (B(null), g("customer"), k.reset());
+  }, [i]);
+  const [r, W] = w({
+    firstName: (l == null ? void 0 : l.firstName) || "",
+    lastName: (l == null ? void 0 : l.lastName) || "",
+    email: (l == null ? void 0 : l.email) || "",
+    phone: (l == null ? void 0 : l.phone) || "",
+    address: (l == null ? void 0 : l.address) || "",
+    city: (l == null ? void 0 : l.city) || "",
+    deliveryZoneId: (l == null ? void 0 : l.deliveryZoneId) || "",
+    paymentMethod: (l == null ? void 0 : l.paymentMethod) || "online",
+    notes: (l == null ? void 0 : l.notes) || ""
   });
-  Z(() => {
-    d && b("customer");
-  }, [d]);
+  S(() => {
+    i && g("customer");
+  }, [i]);
   const [E, D] = w(!1);
-  Z(() => {
-    d && s && !n && !E && ($((t) => {
-      var l;
+  S(() => {
+    i && s && !l && !E && (W((t) => {
+      var n;
       return {
         ...t,
         firstName: s.customerFirstName || t.firstName,
         lastName: s.customerLastName || t.lastName,
         email: s.customerEmail || t.email,
         phone: s.customerPhone || t.phone,
-        deliveryZoneId: ((l = s.deliveryZone) == null ? void 0 : l.id) || t.deliveryZoneId
+        deliveryZoneId: ((n = s.deliveryZone) == null ? void 0 : n.id) || t.deliveryZoneId
       };
-    }), D(!0)), d || D(!1);
-  }, [d, s, n, E]), Z(() => {
-    if (f) {
-      const t = m == null ? void 0 : m.zones.find((l) => l.id === f);
-      t && $((l) => ({
-        ...l,
+    }), D(!0)), i || D(!1);
+  }, [i, s, l, E]), S(() => {
+    if (p) {
+      const t = m == null ? void 0 : m.zones.find((n) => n.id === p);
+      t && W((n) => ({
+        ...n,
         paymentMethod: t.allowOnline ? "online" : "cod"
       }));
     }
-  }, [f, m]);
-  const [u, F] = w({}), [K, be] = w(!1), g = (t) => {
-    const { name: l, value: i } = t.target;
-    $((y) => ({ ...y, [l]: i })), u[l] && F((y) => ({ ...y, [l]: void 0 }));
-  }, L = qe(
+  }, [p, m]);
+  const [h, z] = w({}), [$, ge] = w(!1), b = (t) => {
+    const { name: n, value: d } = t.target;
+    W((y) => ({ ...y, [n]: d })), h[n] && z((y) => ({ ...y, [n]: void 0 }));
+  }, F = qe(
     (t) => {
-      const l = r[t];
-      if (!l) return;
-      const i = {};
-      t === "firstName" ? i.customerFirstName = l : t === "lastName" ? i.customerLastName = l : t === "email" ? i.customerEmail = l : t === "phone" && (i.customerPhone = l), R.mutate(i);
+      const n = r[t];
+      if (!n) return;
+      const d = {};
+      t === "firstName" ? d.customerFirstName = n : t === "lastName" ? d.customerLastName = n : t === "email" ? d.customerEmail = n : t === "phone" && (d.customerPhone = n), R.mutate(d);
     },
     [r, R]
   ), T = (t) => {
-    const l = {};
+    const n = {};
     try {
       if (t === "customer")
         Ke.validateSync(r, { abortEarly: !1 });
       else if (t === "delivery") {
-        const i = {
+        const d = {
           address: r.address,
           city: r.city,
-          state: z || r.state || "",
-          deliveryZoneId: f || r.deliveryZoneId || ""
+          state: L || r.state || "",
+          deliveryZoneId: p || r.deliveryZoneId || ""
         };
-        Oe.validateSync(i, { abortEarly: !1 });
+        Oe.validateSync(d, { abortEarly: !1 });
       } else t === "payment" && Ge.validateSync(r, { abortEarly: !1 });
-    } catch (i) {
-      i instanceof Ie && i.inner.forEach((y) => {
-        y.path && (l[y.path] = y.message);
+    } catch (d) {
+      d instanceof Ie && d.inner.forEach((y) => {
+        y.path && (n[y.path] = y.message);
       });
     }
-    return F(l), Object.keys(l).length === 0;
-  }, ge = () => {
-    T(o) && (o === "customer" ? b("delivery") : o === "delivery" && b("payment"));
+    return z(n), Object.keys(n).length === 0;
+  }, be = () => {
+    T(o) && (o === "customer" ? g("delivery") : o === "delivery" && g("payment"));
   }, xe = () => {
-    o === "payment" ? b("delivery") : o === "delivery" && b("customer");
+    o === "payment" ? g("delivery") : o === "delivery" && g("customer");
   }, we = async () => {
     if (!T("customer")) {
-      b("customer");
+      g("customer");
       return;
     }
     if (!T("delivery")) {
-      b("delivery");
+      g("delivery");
       return;
     }
     if (T("payment")) {
@@ -201,18 +201,18 @@ function nt({
         return;
       }
       try {
-        const { fbc: t, fbp: l } = ye(), { ttp: i, ttclid: y } = fe(), M = await k.mutateAsync({
+        const { fbc: t, fbp: n } = ye(), { ttp: d, ttclid: y } = pe(), M = await k.mutateAsync({
           firstName: r.firstName,
           lastName: r.lastName,
           email: r.email,
           phone: r.phone,
           address: r.address,
           city: r.city,
-          deliveryZoneId: f || r.deliveryZoneId,
+          deliveryZoneId: p || r.deliveryZoneId,
           paymentMethod: r.paymentMethod,
           fbc: t,
-          fbp: l,
-          ttp: i,
+          fbp: n,
+          ttp: d,
           ttclid: y
         });
         if ("error" in M) {
@@ -220,7 +220,7 @@ function nt({
           c == null || c(new Error((x == null ? void 0 : x.message) || "Checkout failed"));
           return;
         }
-        _(M), J(), N == null || N(M.id);
+        B(M), J(), v == null || v(M.id);
       } catch (t) {
         c == null || c(t);
       }
@@ -229,23 +229,23 @@ function nt({
     customer: "Customer Information",
     delivery: "Delivery Address",
     payment: "Payment Method"
-  }, Pe = G(() => Ce[o], [o]), ke = /* @__PURE__ */ a("div", { className: "space-y-3", children: [
+  }, Pe = K(() => Ce[o], [o]), ke = /* @__PURE__ */ a("div", { className: "space-y-3", children: [
     (o === "payment" || o === "delivery") && ((se = s == null ? void 0 : s.pricing) == null ? void 0 : se.total) && /* @__PURE__ */ a("div", { className: "text-sm text-black relative", children: [
-      U && /* @__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" }) }),
+      Y && /* @__PURE__ */ e("div", { className: "absolute flex items-center justify-center inset-0 bg-white opacity-50", children: /* @__PURE__ */ e(O, { 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: I(((le = s == null ? void 0 : s.pricing) == null ? void 0 : le.subtotal) ?? 0) })
+        /* @__PURE__ */ e("span", { children: I(((ne = s == null ? void 0 : s.pricing) == null ? void 0 : ne.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: [
           "-",
-          I(((de = (ne = s == null ? void 0 : s.pricing) == null ? void 0 : ne.discount) == null ? void 0 : de.amount) ?? 0)
+          I(((ie = (le = s == null ? void 0 : s.pricing) == null ? void 0 : le.discount) == null ? void 0 : ie.amount) ?? 0)
         ] })
       ] }),
       /* @__PURE__ */ a("div", { className: "flex items-center justify-between font-medium", children: [
         /* @__PURE__ */ e("span", { children: "Delivery Fee" }),
-        /* @__PURE__ */ e("span", { children: I(((ie = s == null ? void 0 : s.pricing) == null ? void 0 : ie.deliveryCharge) ?? 0) })
+        /* @__PURE__ */ e("span", { children: I(((de = s == null ? void 0 : s.pricing) == null ? void 0 : de.deliveryCharge) ?? 0) })
       ] }),
       /* @__PURE__ */ e("hr", { className: "border-gray-200 my-2" }),
       /* @__PURE__ */ a("div", { className: "flex items-center justify-between font-medium", children: [
@@ -255,7 +255,7 @@ function nt({
     ] }),
     /* @__PURE__ */ a("div", { className: "flex gap-3", children: [
       o !== "customer" && /* @__PURE__ */ a(
-        A,
+        _,
         {
           type: "button",
           variant: "outline",
@@ -263,25 +263,25 @@ function nt({
           className: "flex-1 border-gray-400",
           size: "lg",
           children: [
-            /* @__PURE__ */ e(Se, { className: "mr-2 h-4 w-4" }),
+            /* @__PURE__ */ e(Ze, { className: "mr-2 h-4 w-4" }),
             "Back"
           ]
         }
       ),
       o !== "payment" ? /* @__PURE__ */ a(
-        A,
+        _,
         {
           type: "button",
-          onClick: ge,
+          onClick: be,
           className: "flex-1 bg-accent-500 text-white hover:bg-accent-600",
           size: "lg",
           children: [
             "Next",
-            /* @__PURE__ */ e(ze, { className: "ml-2 h-4 w-4" })
+            /* @__PURE__ */ e(Le, { className: "ml-2 h-4 w-4" })
           ]
         }
       ) : /* @__PURE__ */ e(
-        A,
+        _,
         {
           type: "button",
           onClick: we,
@@ -289,23 +289,23 @@ function nt({
           className: "flex-1 bg-accent-500 text-white hover:bg-accent-600",
           size: "lg",
           children: k.isPending ? /* @__PURE__ */ a(Me, { children: [
-            /* @__PURE__ */ e(W, { className: "mr-2 h-4 w-4 animate-spin" }),
+            /* @__PURE__ */ e(O, { className: "mr-2 h-4 w-4 animate-spin" }),
             "Processing..."
-          ] }) : pe
+          ] }) : fe
         }
       )
     ] }),
     k.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." })
-  ] }), B = (t) => !(s != null && s.availablePaymentMethods.includes(t));
-  if (p)
+  ] }), A = (t) => !(s != null && s.availablePaymentMethods.includes(t));
+  if (f)
     return /* @__PURE__ */ e(
       oe,
       {
-        isOpen: d,
+        isOpen: i,
         onClose: j,
         title: "Order Placed Successfully!",
         footer: /* @__PURE__ */ e(
-          A,
+          _,
           {
             onClick: j,
             className: "w-full bg-accent-500 text-white hover:bg-accent-600",
@@ -316,43 +316,43 @@ function nt({
         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(Fe, { 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(ue, { className: "h-5 w-5" }),
+              /* @__PURE__ */ e(he, { className: "h-5 w-5" }),
               /* @__PURE__ */ a("span", { className: "font-medium", children: [
                 "Order #",
-                p.orderNumber
+                f.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: [
-                  p.firstName,
+                  f.firstName,
                   " ",
-                  p.lastName
+                  f.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: p.phone })
+                /* @__PURE__ */ e("span", { className: "font-medium text-gray-900", children: f.phone })
               ] }),
-              p.email && /* @__PURE__ */ a("div", { className: "flex justify-between text-sm", children: [
+              f.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: p.email })
+                /* @__PURE__ */ e("span", { className: "font-medium text-gray-900", children: f.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: p.paymentMethod === "cod" ? "Cash on Delivery" : "Online Payment" })
+                /* @__PURE__ */ e("span", { className: "font-medium text-gray-900", children: f.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: I(p.totalPrice) })
+                /* @__PURE__ */ e("span", { className: "font-bold text-gray-900", children: I(f.totalPrice) })
               ] })
             ] })
           ] }),
@@ -364,33 +364,53 @@ function nt({
         ] })
       }
     );
-  const ee = h && (o === "delivery" || o === "payment") && (h.waybillOnly || !(h != null && h.allowCOD));
+  const ee = u && (o === "delivery" || o === "payment") && (u.waybillOnly || !(u != null && u.allowCOD));
   return /* @__PURE__ */ e(
     oe,
     {
-      isOpen: d,
+      isOpen: i,
       onClose: j,
       title: Pe,
       footer: ke,
       size: "lg",
       contentClassName: "p-0",
-      children: U ? /* @__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: [
+      children: Y ? /* @__PURE__ */ e("div", { className: "flex items-center justify-center min-h-[300px]", children: /* @__PURE__ */ e(O, { 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: [
         ee && /* @__PURE__ */ a("div", { className: "space-y-3 p-4 pb-0", children: [
-          h.noteTitle && h.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(ue, { className: "h-5 w-5 text-amber-600 flex-shrink-0 mt-0.5" }),
+          u.noteTitle && u.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(he, { 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 whitespace-pre-wrap", children: h.noteTitle }),
-              /* @__PURE__ */ e("p", { className: "text-sm text-amber-800 whitespace-pre-wrap", children: h.noteContent })
+              /* @__PURE__ */ e("p", { className: "text-sm font-semibold text-amber-900 whitespace-pre-wrap", children: u.noteTitle }),
+              /* @__PURE__ */ e("p", { className: "text-sm text-amber-800 whitespace-pre-wrap", children: u.noteContent })
             ] })
           ] }) }),
-          !(h != null && h.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(he, { className: "h-5 w-5 text-blue-600 flex-shrink-0 mt-0.5" }),
+          !(u != null && u.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(ue, { 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." })
             ] })
           ] }) })
         ] }),
+        /* @__PURE__ */ e("div", { className: "p-4", children: /* @__PURE__ */ a(
+          "a",
+          {
+            href: $e,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "flex items-center justify-center gap-2 p-3 bg-green-500 hover:bg-green-600 rounded-lg transition-colors",
+            children: [
+              /* @__PURE__ */ e(
+                "img",
+                {
+                  src: "https://toyland.ng/cdn-cgi/image/width=64/icon-whatsapp.svg",
+                  alt: "WhatsApp",
+                  className: "h-5 w-5"
+                }
+              ),
+              /* @__PURE__ */ e("span", { className: "text-sm font-medium text-white", children: "Need help with your order? Click to Contact us on WhatsApp" })
+            ]
+          }
+        ) }),
         /* @__PURE__ */ a(
           "div",
           {
@@ -409,9 +429,9 @@ function nt({
                     type: "text",
                     name: "firstName",
                     value: r.firstName,
-                    onChange: g,
-                    onBlur: () => L("firstName"),
-                    error: u.firstName,
+                    onChange: b,
+                    onBlur: () => F("firstName"),
+                    error: h.firstName,
                     autoCorrect: "off",
                     required: !0
                   }
@@ -423,9 +443,9 @@ function nt({
                     type: "text",
                     name: "lastName",
                     value: r.lastName,
-                    onChange: g,
-                    onBlur: () => L("lastName"),
-                    error: u.lastName,
+                    onChange: b,
+                    onBlur: () => F("lastName"),
+                    error: h.lastName,
                     autoCorrect: "off",
                     required: !0
                   }
@@ -437,10 +457,10 @@ function nt({
                     type: "email",
                     name: "email",
                     value: r.email,
-                    onChange: g,
-                    onBlur: () => L("email"),
-                    error: u.email,
-                    icon: /* @__PURE__ */ e(Le, { size: 16 }),
+                    onChange: b,
+                    onBlur: () => F("email"),
+                    error: h.email,
+                    icon: /* @__PURE__ */ e(Fe, { size: 16 }),
                     autoCorrect: "off",
                     required: !0
                   }
@@ -452,11 +472,11 @@ function nt({
                     type: "tel",
                     name: "phone",
                     value: r.phone,
-                    onChange: g,
-                    onBlur: () => L("phone"),
+                    onChange: b,
+                    onBlur: () => F("phone"),
                     placeholder: "e.g. 08012345678",
                     maxLength: 18,
-                    error: u.phone,
+                    error: h.phone,
                     icon: /* @__PURE__ */ e(Te, { size: 16 }),
                     autoCorrect: "off",
                     required: !0,
@@ -472,8 +492,8 @@ function nt({
                     type: "text",
                     name: "address",
                     value: r.address,
-                    onChange: g,
-                    error: u.address,
+                    onChange: b,
+                    error: h.address,
                     autoCorrect: "off",
                     required: !0
                   }
@@ -486,8 +506,8 @@ function nt({
                       type: "text",
                       name: "city",
                       value: r.city,
-                      onChange: g,
-                      error: u.city,
+                      onChange: b,
+                      error: h.city,
                       autoCorrect: "off",
                       required: !0
                     }
@@ -497,13 +517,13 @@ function nt({
                     {
                       label: "State",
                       name: "state",
-                      value: z || "",
+                      value: L || "",
                       onChange: (t) => {
-                        Y("");
-                        const l = t.target.value;
-                        ve(l || void 0), u.state && F((i) => ({ ...i, state: void 0 }));
+                        U("");
+                        const n = t.target.value;
+                        Ne(n || void 0), h.state && z((d) => ({ ...d, state: void 0 }));
                       },
-                      error: u.state,
+                      error: h.state,
                       required: !0,
                       children: [
                         /* @__PURE__ */ e("option", { disabled: !0, value: "", children: "Select State" }),
@@ -515,13 +535,13 @@ function nt({
                     me,
                     {
                       label: "Delivery Zone",
-                      value: f || "",
+                      value: p || "",
                       onChange: (t) => {
-                        const l = t.target.value;
-                        Y(l || void 0), u.deliveryZoneId && F((i) => ({ ...i, deliveryZoneId: void 0 })), l && R.mutate({ deliveryZoneId: l });
+                        const n = t.target.value;
+                        U(n || void 0), h.deliveryZoneId && z((d) => ({ ...d, deliveryZoneId: void 0 })), n && R.mutate({ deliveryZoneId: n });
                       },
                       disabled: !m,
-                      error: u.deliveryZoneId,
+                      error: h.deliveryZoneId,
                       required: !0,
                       children: [
                         /* @__PURE__ */ e("option", { disabled: !0, value: "", children: m ? "Select Delivery Zone" : "Select State First" }),
@@ -537,22 +557,22 @@ function nt({
                 ] })
               ] }) }),
               /* @__PURE__ */ e("div", { className: "w-full min-w-full flex-shrink-0 p-4", children: /* @__PURE__ */ a("div", { className: "space-y-6", children: [
-                S && /* @__PURE__ */ a("div", { className: `border border-gray-200 rounded-lg ${ee ? "mt-4" : ""}`, children: [
+                Z && /* @__PURE__ */ a("div", { className: `border border-gray-200 rounded-lg ${ee ? "mt-4" : ""}`, children: [
                   /* @__PURE__ */ a(
                     "button",
                     {
                       type: "button",
-                      onClick: () => be(!K),
+                      onClick: () => ge(!$),
                       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: S.title || "🤔 Curious about Refunds?" }),
+                        /* @__PURE__ */ e("span", { className: "text-sm font-bold text-accent-700", children: Z.title || "🤔 Curious about Refunds?" }),
                         /* @__PURE__ */ e(
-                          Be,
+                          Ae,
                           {
                             size: 16,
                             className: P(
                               "transform transition-transform duration-200 text-gray-500",
-                              K && "rotate-180"
+                              $ && "rotate-180"
                             )
                           }
                         )
@@ -564,14 +584,14 @@ function nt({
                     {
                       className: P(
                         "overflow-hidden transition-all duration-300 ease-in-out",
-                        K ? "max-h-96 opacity-100" : "max-h-0 opacity-0"
+                        $ ? "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: S.policies && /* @__PURE__ */ a("div", { children: [
+                      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: Z.policies && /* @__PURE__ */ a("div", { children: [
                         /* @__PURE__ */ e("h4", { className: "font-bold text-gray-800 mb-2", children: "Our Refund Policy" }),
-                        /* @__PURE__ */ e("ul", { className: "space-y-1", children: S.policies.map((t, l) => /* @__PURE__ */ a("li", { className: "flex items-start", children: [
+                        /* @__PURE__ */ e("ul", { className: "space-y-1", children: Z.policies.map((t, n) => /* @__PURE__ */ a("li", { className: "flex items-start", children: [
                           /* @__PURE__ */ e("span", { className: "text-green-600 mr-2", children: "✓" }),
                           /* @__PURE__ */ e("span", { children: t })
-                        ] }, l)) })
+                        ] }, n)) })
                       ] }) }) })
                     }
                   )
@@ -583,7 +603,7 @@ function nt({
                       className: P(
                         "flex items-center justify-center relative p-4 border-2 rounded-xl cursor-pointer transition-all duration-200",
                         r.paymentMethod === "online" ? "border-accent-500 bg-accent-50" : "border-gray-200 hover:border-gray-300",
-                        B("online") && "opacity-50 cursor-not-allowed"
+                        A("online") && "opacity-50 cursor-not-allowed"
                       ),
                       children: [
                         /* @__PURE__ */ e(
@@ -592,9 +612,9 @@ function nt({
                             type: "radio",
                             name: "paymentMethod",
                             value: "online",
-                            disabled: B("online"),
+                            disabled: A("online"),
                             checked: r.paymentMethod === "online",
-                            onChange: g,
+                            onChange: b,
                             className: "sr-only"
                           }
                         ),
@@ -606,7 +626,7 @@ function nt({
                                 "p-3 rounded-full",
                                 r.paymentMethod === "online" ? "bg-accent-100 text-accent-600" : "bg-gray-100 text-gray-600"
                               ),
-                              children: /* @__PURE__ */ e(Ae, { size: 24 })
+                              children: /* @__PURE__ */ e(_e, { size: 24 })
                             }
                           ),
                           /* @__PURE__ */ a("div", { children: [
@@ -615,7 +635,7 @@ function nt({
                             /* @__PURE__ */ e(
                               "img",
                               {
-                                src: _e,
+                                src: Be,
                                 alt: "Paystack",
                                 className: "h-4 w-auto mt-2 mx-auto"
                               }
@@ -632,7 +652,7 @@ function nt({
                       className: P(
                         "flex items-center justify-center relative p-4 border-2 rounded-xl cursor-pointer transition-all duration-200",
                         r.paymentMethod === "cod" ? "border-accent-500 bg-accent-50" : "border-gray-200 hover:border-gray-300",
-                        B("cod") && "opacity-50 cursor-not-allowed"
+                        A("cod") && "opacity-50 cursor-not-allowed"
                       ),
                       children: [
                         /* @__PURE__ */ e(
@@ -641,9 +661,9 @@ function nt({
                             type: "radio",
                             name: "paymentMethod",
                             value: "cod",
-                            disabled: B("cod"),
+                            disabled: A("cod"),
                             checked: r.paymentMethod === "cod",
-                            onChange: g,
+                            onChange: b,
                             className: "sr-only"
                           }
                         ),
@@ -655,7 +675,7 @@ function nt({
                                 "p-3 rounded-full",
                                 r.paymentMethod === "cod" ? "bg-accent-100 text-accent-600" : "bg-gray-100 text-gray-600"
                               ),
-                              children: /* @__PURE__ */ e(he, { size: 24 })
+                              children: /* @__PURE__ */ e(ue, { size: 24 })
                             }
                           ),
                           /* @__PURE__ */ a("div", { children: [
@@ -668,7 +688,7 @@ function nt({
                     }
                   )
                 ] }),
-                u.paymentMethod && /* @__PURE__ */ e("p", { className: "text-red-600 text-sm", children: u.paymentMethod })
+                h.paymentMethod && /* @__PURE__ */ e("p", { className: "text-red-600 text-sm", children: h.paymentMethod })
               ] }) })
             ]
           }
@@ -678,5 +698,5 @@ function nt({
   );
 }
 export {
-  nt as Checkout
+  dt as Checkout
 };