@instockng/storefront-ui 1.0.23 → 1.0.24

package/dist/index12.mjs

@@ -1,62 +1,62 @@
 'use client';
-import { jsxs as r, jsx as e, Fragment as be } from "react/jsx-runtime";
-import { useState as b, useEffect as I, useMemo as $, useCallback as ge } from "react";
-import { object as W, string as f, ValidationError as xe } from "./index39.mjs";
+import { jsxs as a, jsx as e, Fragment as ge } from "react/jsx-runtime";
+import { useState as g, useEffect as I, useMemo as R, useCallback as xe } from "react";
+import { object as W, string as p, ValidationError as we } from "./index39.mjs";
 import "./index20.mjs";
 import "@tanstack/react-query";
-import { useGetDeliveryZones as we } from "./index35.mjs";
-import { useCart as Ce } from "./index3.mjs";
-import { Modal as se } from "./index16.mjs";
-import { FormInput as P } from "./index17.mjs";
-import { FormSelect as le } from "./index18.mjs";
+import { useGetDeliveryZones as Ce } from "./index35.mjs";
+import { useCart as Pe } from "./index3.mjs";
+import { Modal as le } from "./index16.mjs";
+import { FormInput as k } from "./index17.mjs";
+import { FormSelect as ne } from "./index18.mjs";
 import { Button as B } from "./index13.mjs";
-import { Loader2 as O, ChevronLeft as Pe, ChevronRight as ke, CheckCircle as Me, Package as ne, Banknote as de, Mail as qe, Phone as Ie, Zap as je, ChevronDown as Ze } from "lucide-react";
-import { formatCurrency as k, cn as w } from "./index19.mjs";
-import Se from "./index40.mjs";
-import { usePaystackPayment as ze } from "./index41.mjs";
-const Fe = (d) => d.replace(/\D/g, ""), Le = W({
-  firstName: f().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: f().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: f().required("Email is required").email("Please enter a valid email address"),
-  phone: f().required("Phone number is required").test("nigerian-phone", "Please enter a valid Nigerian phone number (e.g. 0812 564 8668)", (d) => {
+import { Loader2 as $, ChevronLeft as ke, ChevronRight as Me, CheckCircle as qe, Package as de, Banknote as ie, Mail as Ie, Phone as je, ChevronDown as Ze, Zap as Se } from "lucide-react";
+import { formatCurrency as M, cn as C } from "./index19.mjs";
+import ze from "./index40.mjs";
+import { usePaystackPayment as Fe } from "./index41.mjs";
+const Le = (d) => d.replace(/\D/g, ""), Be = W({
+  firstName: p().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: p().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: p().required("Email is required").email("Please enter a valid email address"),
+  phone: p().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 M = Fe(d);
+    const q = Le(d);
     return [
       /^0[789]\d{9}$/
       // 0xxxxxxxxx (11 digits total)
-    ].some((p) => p.test(M));
+    ].some((v) => v.test(q));
   })
-}), Be = W({
-  address: f().required("Street address is required").min(10, "Please provide a complete address"),
-  city: f().required("City is required").min(3, "City name must be at least 3 characters"),
-  state: f().required("State is required").test("not-empty", "State is required", (d) => !!d && d.trim() !== ""),
-  deliveryZoneId: f().required("Delivery zone is required").test("not-empty", "Delivery zone is required", (d) => !!d && d.trim() !== "")
 }), Te = W({
-  paymentMethod: f().oneOf(["cod", "online"], "Please select a payment method").required("Payment method is required")
+  address: p().required("Street address is required").min(10, "Please provide a complete address"),
+  city: p().required("City is required").min(3, "City name must be at least 3 characters"),
+  state: p().required("State is required").test("not-empty", "State is required", (d) => !!d && d.trim() !== ""),
+  deliveryZoneId: p().required("Delivery zone is required").test("not-empty", "Delivery zone is required", (d) => !!d && d.trim() !== "")
+}), _e = W({
+  paymentMethod: p().oneOf(["cod", "online"], "Please select a payment method").required("Payment method is required")
 });
-function De({
+function et({
   isOpen: d,
-  onClose: M,
+  onClose: q,
   initialData: n,
-  onSuccess: p,
+  onSuccess: v,
   onError: o,
-  submitButtonText: ie = "Place Order",
+  submitButtonText: ce = "Place Order",
   refundPolicy: j
 }) {
-  var Q, X, E, D, ee, te, re, ae;
-  const ce = "pk_live_dfb74efb5f74d2acbc253d5ca396ab9015ef0fa7", [c, v] = b("customer"), [Z, oe] = b(void 0), [h, G] = b(void 0), [y, T] = b(null), { refetch: K, isLoading: Y, cart: s, updateCartMutation: _, checkoutMutation: me, clearAndCreateNewCart: V } = Ce(), H = ze({
-    publicKey: ce,
+  var X, E, D, ee, te, ae, re, se;
+  const oe = "pk_live_dfb74efb5f74d2acbc253d5ca396ab9015ef0fa7", [c, N] = g("customer"), [Z, me] = g(void 0), [h, G] = g(void 0), [y, T] = g(null), { refetch: K, isLoading: Y, cart: s, updateCartMutation: _, checkoutMutation: ue, clearAndCreateNewCart: V } = Pe(), H = Fe({
+    publicKey: oe,
     onSuccess: async (t) => {
       try {
-        const l = await C.mutateAsync({
-          firstName: a.firstName,
-          lastName: a.lastName,
-          email: a.email,
-          phone: a.phone,
-          address: a.address,
-          city: a.city,
-          deliveryZoneId: h || a.deliveryZoneId,
-          paymentMethod: a.paymentMethod,
+        const l = await P.mutateAsync({
+          firstName: r.firstName,
+          lastName: r.lastName,
+          email: r.email,
+          phone: r.phone,
+          address: r.address,
+          city: r.city,
+          deliveryZoneId: h || r.deliveryZoneId,
+          paymentMethod: r.paymentMethod,
           paystackReference: t.reference
         });
         if ("error" in l) {
@@ -64,7 +64,7 @@ function De({
           o == null || o(new Error((i == null ? void 0 : i.message) || "Checkout failed"));
           return;
         }
-        T(l), V(), p == null || p(l.id);
+        T(l), V(), v == null || v(l.id);
       } catch (l) {
         o == null || o(l);
       }
@@ -76,13 +76,13 @@ function De({
   I(() => {
     d && K();
   }, [d, K]);
-  const { data: g } = we(((Q = s == null ? void 0 : s.brand) == null ? void 0 : Q.id) || "", {
-    enabled: !!((X = s == null ? void 0 : s.brand) != null && X.id)
-  }), m = $(() => g == null ? void 0 : g.find((t) => t.id === Z), [g, Z]), q = $(() => m == null ? void 0 : m.zones.find((t) => t.id === h), [m, h]), C = me;
+  const { data: x } = Ce(((X = s == null ? void 0 : s.brand) == null ? void 0 : X.id) || "", {
+    enabled: !!((E = s == null ? void 0 : s.brand) != null && E.id)
+  }), m = R(() => x == null ? void 0 : x.find((t) => t.id === Z), [x, Z]), f = R(() => m == null ? void 0 : m.zones.find((t) => t.id === h), [m, h]), P = ue;
   I(() => {
-    d || (T(null), v("customer"), C.reset());
+    d || (T(null), N("customer"), P.reset());
   }, [d]);
-  const [a, A] = b({
+  const [r, A] = g({
     firstName: (n == null ? void 0 : n.firstName) || "",
     lastName: (n == null ? void 0 : n.lastName) || "",
     email: (n == null ? void 0 : n.email) || "",
@@ -94,9 +94,9 @@ function De({
     notes: (n == null ? void 0 : n.notes) || ""
   });
   I(() => {
-    d && v("customer");
+    d && N("customer");
   }, [d]);
-  const [U, J] = b(!1);
+  const [U, J] = g(!1);
   I(() => {
     d && s && !n && !U && (A((t) => {
       var l;
@@ -118,59 +118,59 @@ function De({
       }));
     }
   }, [h, m]);
-  const [u, S] = b({}), [R, ue] = b(!1), N = (t) => {
+  const [u, S] = g({}), [O, he] = g(!1), b = (t) => {
     const { name: l, value: i } = t.target;
-    A((x) => ({ ...x, [l]: i })), u[l] && S((x) => ({ ...x, [l]: void 0 }));
-  }, z = ge(
+    A((w) => ({ ...w, [l]: i })), u[l] && S((w) => ({ ...w, [l]: void 0 }));
+  }, z = xe(
     (t) => {
-      const l = a[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), _.mutate(i);
     },
-    [a, _]
+    [r, _]
   ), F = (t) => {
     const l = {};
     try {
       if (t === "customer")
-        Le.validateSync(a, { abortEarly: !1 });
+        Be.validateSync(r, { abortEarly: !1 });
       else if (t === "delivery") {
         const i = {
-          address: a.address,
-          city: a.city,
-          state: Z || a.state || "",
-          deliveryZoneId: h || a.deliveryZoneId || ""
+          address: r.address,
+          city: r.city,
+          state: Z || r.state || "",
+          deliveryZoneId: h || r.deliveryZoneId || ""
         };
-        Be.validateSync(i, { abortEarly: !1 });
-      } else t === "payment" && Te.validateSync(a, { abortEarly: !1 });
+        Te.validateSync(i, { abortEarly: !1 });
+      } else t === "payment" && _e.validateSync(r, { abortEarly: !1 });
     } catch (i) {
-      i instanceof xe && i.inner.forEach((x) => {
-        x.path && (l[x.path] = x.message);
+      i instanceof we && i.inner.forEach((w) => {
+        w.path && (l[w.path] = w.message);
       });
     }
     return S(l), Object.keys(l).length === 0;
-  }, he = () => {
-    F(c) && (c === "customer" ? v("delivery") : c === "delivery" && v("payment"));
   }, ye = () => {
-    c === "payment" ? v("delivery") : c === "delivery" && v("customer");
-  }, fe = async () => {
+    F(c) && (c === "customer" ? N("delivery") : c === "delivery" && N("payment"));
+  }, fe = () => {
+    c === "payment" ? N("delivery") : c === "delivery" && N("customer");
+  }, pe = async () => {
     if (!F("customer")) {
-      v("customer");
+      N("customer");
       return;
     }
     if (!F("delivery")) {
-      v("delivery");
+      N("delivery");
       return;
     }
     if (F("payment")) {
-      if (a.paymentMethod === "online") {
+      if (r.paymentMethod === "online") {
         if (!H.isLoaded) {
           o == null || o(new Error("Payment system is loading. Please try again."));
           return;
         }
         const t = Math.round(s.pricing.total * 100);
         H.initializePayment({
-          email: a.email || (s == null ? void 0 : s.customerEmail) || "customer@example.com",
+          email: r.email || (s == null ? void 0 : s.customerEmail) || "customer@example.com",
           amount: t,
           currency: "NGN",
           metadata: {
@@ -179,12 +179,12 @@ function De({
               {
                 display_name: "Customer Name",
                 variable_name: "customer_name",
-                value: `${a.firstName} ${a.lastName}`
+                value: `${r.firstName} ${r.lastName}`
               },
               {
                 display_name: "Phone Number",
                 variable_name: "phone_number",
-                value: a.phone
+                value: r.phone
               }
             ]
           }
@@ -192,208 +192,211 @@ function De({
         return;
       }
       try {
-        const t = await C.mutateAsync({
-          firstName: a.firstName,
-          lastName: a.lastName,
-          email: a.email,
-          phone: a.phone,
-          address: a.address,
-          city: a.city,
-          deliveryZoneId: h || a.deliveryZoneId,
-          paymentMethod: a.paymentMethod
+        const t = await P.mutateAsync({
+          firstName: r.firstName,
+          lastName: r.lastName,
+          email: r.email,
+          phone: r.phone,
+          address: r.address,
+          city: r.city,
+          deliveryZoneId: h || r.deliveryZoneId,
+          paymentMethod: r.paymentMethod
         });
         if ("error" in t) {
           const l = t.error;
           o == null || o(new Error((l == null ? void 0 : l.message) || "Checkout failed"));
           return;
         }
-        T(t), V(), p == null || p(t.id);
+        T(t), V(), v == null || v(t.id);
       } catch (t) {
         o == null || o(t);
       }
     }
-  }, pe = {
+  }, ve = {
     customer: "Customer Information",
     delivery: "Delivery Address",
     payment: "Payment Method"
-  }, ve = $(() => pe[c], [c]), Ne = /* @__PURE__ */ r("div", { className: "space-y-3", children: [
-    (c === "payment" || c === "delivery") && ((E = s == null ? void 0 : s.pricing) == null ? void 0 : E.total) && /* @__PURE__ */ r("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(O, { className: "animate-spin text-accent-500" }) }),
-      /* @__PURE__ */ r("div", { className: "flex items-center justify-between font-medium", children: [
+  }, Ne = R(() => ve[c], [c]), be = /* @__PURE__ */ a("div", { className: "space-y-3", children: [
+    (c === "payment" || c === "delivery") && ((D = s == null ? void 0 : s.pricing) == null ? void 0 : D.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($, { 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: k(((D = s == null ? void 0 : s.pricing) == null ? void 0 : D.subtotal) ?? 0) })
+        /* @__PURE__ */ e("span", { children: M(((ee = s == null ? void 0 : s.pricing) == null ? void 0 : ee.subtotal) ?? 0) })
       ] }),
-      s.pricing.discount && /* @__PURE__ */ r("div", { className: "flex items-center justify-between font-medium", children: [
+      s.pricing.discount && /* @__PURE__ */ a("div", { className: "flex items-center justify-between font-medium", children: [
         /* @__PURE__ */ e("span", { children: "Discount" }),
-        /* @__PURE__ */ r("span", { className: "text-green-600", children: [
+        /* @__PURE__ */ a("span", { className: "text-green-600", children: [
           "-",
-          k(((te = (ee = s == null ? void 0 : s.pricing) == null ? void 0 : ee.discount) == null ? void 0 : te.amount) ?? 0)
+          M(((ae = (te = s == null ? void 0 : s.pricing) == null ? void 0 : te.discount) == null ? void 0 : ae.amount) ?? 0)
         ] })
       ] }),
-      /* @__PURE__ */ r("div", { className: "flex items-center justify-between font-medium", children: [
+      /* @__PURE__ */ a("div", { className: "flex items-center justify-between font-medium", children: [
         /* @__PURE__ */ e("span", { children: "Delivery Fee" }),
-        /* @__PURE__ */ e("span", { children: k(((re = s == null ? void 0 : s.pricing) == null ? void 0 : re.deliveryCharge) ?? 0) })
+        /* @__PURE__ */ e("span", { children: M(((re = s == null ? void 0 : s.pricing) == null ? void 0 : re.deliveryCharge) ?? 0) })
       ] }),
       /* @__PURE__ */ e("hr", { className: "border-gray-200 my-2" }),
-      /* @__PURE__ */ r("div", { className: "flex items-center justify-between font-medium", children: [
+      /* @__PURE__ */ a("div", { className: "flex items-center justify-between font-medium", children: [
         /* @__PURE__ */ e("span", { children: "Total" }),
-        /* @__PURE__ */ e("span", { children: k(((ae = s == null ? void 0 : s.pricing) == null ? void 0 : ae.total) ?? 0) })
+        /* @__PURE__ */ e("span", { children: M(((se = s == null ? void 0 : s.pricing) == null ? void 0 : se.total) ?? 0) })
       ] })
     ] }),
-    /* @__PURE__ */ r("div", { className: "flex gap-3", children: [
-      c !== "customer" && /* @__PURE__ */ r(
+    /* @__PURE__ */ a("div", { className: "flex gap-3", children: [
+      c !== "customer" && /* @__PURE__ */ a(
         B,
         {
           type: "button",
           variant: "outline",
-          onClick: ye,
+          onClick: fe,
           className: "flex-1 border-gray-400",
           size: "lg",
           children: [
-            /* @__PURE__ */ e(Pe, { className: "mr-2 h-4 w-4" }),
+            /* @__PURE__ */ e(ke, { className: "mr-2 h-4 w-4" }),
             "Back"
           ]
         }
       ),
-      c !== "payment" ? /* @__PURE__ */ r(
+      c !== "payment" ? /* @__PURE__ */ a(
         B,
         {
           type: "button",
-          onClick: he,
+          onClick: ye,
           className: "flex-1 bg-accent-500 text-white hover:bg-accent-600",
           size: "lg",
           children: [
             "Next",
-            /* @__PURE__ */ e(ke, { className: "ml-2 h-4 w-4" })
+            /* @__PURE__ */ e(Me, { className: "ml-2 h-4 w-4" })
           ]
         }
       ) : /* @__PURE__ */ e(
         B,
         {
           type: "button",
-          onClick: fe,
-          disabled: C.isPending,
+          onClick: pe,
+          disabled: P.isPending,
           className: "flex-1 bg-accent-500 text-white hover:bg-accent-600",
           size: "lg",
-          children: C.isPending ? /* @__PURE__ */ r(be, { children: [
-            /* @__PURE__ */ e(O, { className: "mr-2 h-4 w-4 animate-spin" }),
+          children: P.isPending ? /* @__PURE__ */ a(ge, { children: [
+            /* @__PURE__ */ e($, { className: "mr-2 h-4 w-4 animate-spin" }),
             "Processing..."
-          ] }) : ie
+          ] }) : ce
         }
       )
     ] }),
-    C.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." })
+    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));
-  return y ? /* @__PURE__ */ e(
-    se,
-    {
-      isOpen: d,
-      onClose: M,
-      title: "Order Placed Successfully!",
-      footer: /* @__PURE__ */ e(
-        B,
-        {
-          onClick: M,
-          className: "w-full bg-accent-500 text-white hover:bg-accent-600",
-          size: "lg",
-          children: "Close"
-        }
-      ),
-      size: "lg",
-      contentClassName: "p-6",
-      children: /* @__PURE__ */ r("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(Me, { className: "h-12 w-12 text-green-600" }) }) }),
-        /* @__PURE__ */ r("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__ */ r("div", { className: "bg-gray-50 rounded-lg p-6 space-y-4", children: [
-          /* @__PURE__ */ r("div", { className: "flex items-center justify-center space-x-2 text-gray-700", children: [
-            /* @__PURE__ */ e(ne, { className: "h-5 w-5" }),
-            /* @__PURE__ */ r("span", { className: "font-medium", children: [
-              "Order #",
-              y.orderNumber
-            ] })
+  if (y)
+    return /* @__PURE__ */ e(
+      le,
+      {
+        isOpen: d,
+        onClose: q,
+        title: "Order Placed Successfully!",
+        footer: /* @__PURE__ */ e(
+          B,
+          {
+            onClick: q,
+            className: "w-full bg-accent-500 text-white hover:bg-accent-600",
+            size: "lg",
+            children: "Close"
+          }
+        ),
+        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(qe, { 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__ */ r("div", { className: "border-t border-gray-200 pt-4 space-y-3", children: [
-            /* @__PURE__ */ r("div", { className: "flex justify-between text-sm", children: [
-              /* @__PURE__ */ e("span", { className: "text-gray-600", children: "Customer" }),
-              /* @__PURE__ */ r("span", { className: "font-medium text-gray-900", children: [
-                y.firstName,
-                " ",
-                y.lastName
+          /* @__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(de, { className: "h-5 w-5" }),
+              /* @__PURE__ */ a("span", { className: "font-medium", children: [
+                "Order #",
+                y.orderNumber
               ] })
             ] }),
-            /* @__PURE__ */ r("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: y.phone })
-            ] }),
-            y.email && /* @__PURE__ */ r("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: y.email })
-            ] }),
-            /* @__PURE__ */ r("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: y.paymentMethod === "cod" ? "Cash on Delivery" : "Online Payment" })
-            ] }),
-            /* @__PURE__ */ r("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: k(y.totalPrice) })
+            /* @__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: [
+                  y.firstName,
+                  " ",
+                  y.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: y.phone })
+              ] }),
+              y.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: y.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: y.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(y.totalPrice) })
+              ] })
             ] })
-          ] })
-        ] }),
-        /* @__PURE__ */ e("div", { className: "bg-blue-50 rounded-lg p-4", children: /* @__PURE__ */ r("p", { className: "text-sm text-blue-900", children: [
-          /* @__PURE__ */ e("span", { className: "font-semibold", children: "We'll be in touch shortly!" }),
-          /* @__PURE__ */ e("br", {}),
-          "Our team will contact you soon to arrange delivery and confirm your order details."
-        ] }) })
-      ] })
-    }
-  ) : /* @__PURE__ */ e(
-    se,
+          ] }),
+          /* @__PURE__ */ e("div", { className: "bg-blue-50 rounded-lg p-4", children: /* @__PURE__ */ a("p", { className: "text-sm text-blue-900", children: [
+            /* @__PURE__ */ e("span", { className: "font-semibold", children: "We'll be in touch shortly!" }),
+            /* @__PURE__ */ e("br", {}),
+            "Our team will contact you soon to arrange delivery and confirm your order details."
+          ] }) })
+        ] })
+      }
+    );
+  const Q = f && (c === "delivery" || c === "payment") && (f.waybillOnly || !(f != null && f.allowCOD));
+  return /* @__PURE__ */ e(
+    le,
     {
       isOpen: d,
-      onClose: M,
-      title: ve,
-      footer: Ne,
+      onClose: q,
+      title: Ne,
+      footer: be,
       size: "lg",
       contentClassName: "p-0",
-      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__ */ r("div", { className: "relative w-full", children: [
-        q && (c === "delivery" || c === "payment") && /* @__PURE__ */ r("div", { className: "space-y-3 p-4 pb-0", children: [
-          q.waybillOnly && /* @__PURE__ */ e("div", { className: "bg-amber-50 border border-amber-200 rounded-lg p-4", children: /* @__PURE__ */ r("div", { className: "flex items-start gap-3", children: [
-            /* @__PURE__ */ e(ne, { className: "h-5 w-5 text-amber-600 flex-shrink-0 mt-0.5" }),
-            /* @__PURE__ */ r("div", { className: "space-y-1", children: [
+      children: Y ? /* @__PURE__ */ e("div", { className: "flex items-center justify-center min-h-[300px]", children: /* @__PURE__ */ e($, { 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: [
+        Q && /* @__PURE__ */ a("div", { className: "space-y-3 p-4 pb-0", children: [
+          f.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(de, { 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." })
             ] })
           ] }) }),
-          !(q != null && q.allowCOD) && /* @__PURE__ */ e("div", { className: "bg-blue-50 border border-blue-200 rounded-lg p-4", children: /* @__PURE__ */ r("div", { className: "flex items-start gap-3", children: [
-            /* @__PURE__ */ e(de, { className: "h-5 w-5 text-blue-600 flex-shrink-0 mt-0.5" }),
-            /* @__PURE__ */ r("div", { className: "space-y-1", children: [
+          !(f != null && f.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(ie, { 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__ */ r(
+        /* @__PURE__ */ a(
           "div",
           {
-            className: w(
+            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%]"
             ),
             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__ */ r("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", 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: [
                 /* @__PURE__ */ e(
-                  P,
+                  k,
                   {
                     label: "First Name",
                     type: "text",
                     name: "firstName",
-                    value: a.firstName,
-                    onChange: N,
+                    value: r.firstName,
+                    onChange: b,
                     onBlur: () => z("firstName"),
                     error: u.firstName,
                     autoCorrect: "off",
@@ -401,13 +404,13 @@ function De({
                   }
                 ),
                 /* @__PURE__ */ e(
-                  P,
+                  k,
                   {
                     label: "Last Name",
                     type: "text",
                     name: "lastName",
-                    value: a.lastName,
-                    onChange: N,
+                    value: r.lastName,
+                    onChange: b,
                     onBlur: () => z("lastName"),
                     error: u.lastName,
                     autoCorrect: "off",
@@ -415,69 +418,69 @@ function De({
                   }
                 ),
                 /* @__PURE__ */ e(
-                  P,
+                  k,
                   {
                     label: "Email",
                     type: "email",
                     name: "email",
-                    value: a.email,
-                    onChange: N,
+                    value: r.email,
+                    onChange: b,
                     onBlur: () => z("email"),
                     error: u.email,
-                    icon: /* @__PURE__ */ e(qe, { size: 16 }),
+                    icon: /* @__PURE__ */ e(Ie, { size: 16 }),
                     autoCorrect: "off",
                     required: !0
                   }
                 ),
                 /* @__PURE__ */ e(
-                  P,
+                  k,
                   {
                     label: "Phone Number",
                     type: "tel",
                     name: "phone",
-                    value: a.phone,
-                    onChange: N,
+                    value: r.phone,
+                    onChange: b,
                     onBlur: () => z("phone"),
                     placeholder: "e.g. 08012345678",
                     maxLength: 18,
                     error: u.phone,
-                    icon: /* @__PURE__ */ e(Ie, { size: 16 }),
+                    icon: /* @__PURE__ */ e(je, { size: 16 }),
                     autoCorrect: "off",
                     required: !0,
                     className: "font-semibold"
                   }
                 )
               ] }) }) }),
-              /* @__PURE__ */ e("div", { className: "w-full min-w-full flex-shrink-0 p-4", children: /* @__PURE__ */ r("div", { className: "space-y-4", children: [
+              /* @__PURE__ */ e("div", { className: "w-full min-w-full flex-shrink-0 p-4", children: /* @__PURE__ */ a("div", { className: "space-y-4", children: [
                 /* @__PURE__ */ e(
-                  P,
+                  k,
                   {
                     label: "Street Address",
                     type: "text",
                     name: "address",
-                    value: a.address,
-                    onChange: N,
+                    value: r.address,
+                    onChange: b,
                     error: u.address,
                     autoCorrect: "off",
                     required: !0
                   }
                 ),
-                /* @__PURE__ */ r("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+                /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
                   /* @__PURE__ */ e(
-                    P,
+                    k,
                     {
                       label: "Area",
                       type: "text",
                       name: "city",
-                      value: a.city,
-                      onChange: N,
+                      value: r.city,
+                      onChange: b,
                       error: u.city,
                       autoCorrect: "off",
                       required: !0
                     }
                   ),
-                  /* @__PURE__ */ r(
-                    le,
+                  /* @__PURE__ */ a(
+                    ne,
                     {
                       label: "State",
                       name: "state",
@@ -485,18 +488,18 @@ function De({
                       onChange: (t) => {
                         G("");
                         const l = t.target.value;
-                        oe(l || void 0), u.state && S((i) => ({ ...i, state: void 0 }));
+                        me(l || void 0), u.state && S((i) => ({ ...i, state: void 0 }));
                       },
                       error: u.state,
                       required: !0,
                       children: [
                         /* @__PURE__ */ e("option", { disabled: !0, value: "", children: "Select State" }),
-                        g == null ? void 0 : g.map((t) => /* @__PURE__ */ e("option", { value: t.id, children: t.name }, t.id))
+                        x == null ? void 0 : x.map((t) => /* @__PURE__ */ e("option", { value: t.id, children: t.name }, t.id))
                       ]
                     }
                   ),
-                  /* @__PURE__ */ r(
-                    le,
+                  /* @__PURE__ */ a(
+                    ne,
                     {
                       label: "Delivery Zone",
                       value: h || "",
@@ -509,10 +512,10 @@ function De({
                       required: !0,
                       children: [
                         /* @__PURE__ */ e("option", { disabled: !0, value: "", children: m ? "Select Delivery Zone" : "Select State First" }),
-                        m == null ? void 0 : m.zones.map((t) => /* @__PURE__ */ r("option", { value: t.id, children: [
+                        m == null ? void 0 : m.zones.map((t) => /* @__PURE__ */ a("option", { value: t.id, children: [
                           t.name,
                           " (",
-                          k(t.deliveryCost),
+                          M(t.deliveryCost),
                           ")"
                         ] }, t.id))
                       ]
@@ -520,14 +523,53 @@ function De({
                   )
                 ] })
               ] }) }),
-              /* @__PURE__ */ e("div", { className: "w-full min-w-full flex-shrink-0 p-4", children: /* @__PURE__ */ r("div", { className: "space-y-6", children: [
-                /* @__PURE__ */ r("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4", children: [
-                  /* @__PURE__ */ e("div", { className: "relative", children: /* @__PURE__ */ r(
+              /* @__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 ${Q ? "mt-4" : ""}`, children: [
+                  /* @__PURE__ */ a(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => he(!O),
+                      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,
+                          {
+                            size: 16,
+                            className: C(
+                              "transform transition-transform duration-200 text-gray-500",
+                              O && "rotate-180"
+                            )
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ e(
+                    "div",
+                    {
+                      className: C(
+                        "overflow-hidden transition-all duration-300 ease-in-out",
+                        O ? "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" }),
+                        /* @__PURE__ */ e("ul", { className: "space-y-1", children: j.policies.map((t, l) => /* @__PURE__ */ a("li", { className: "flex items-start", children: [
+                          /* @__PURE__ */ e("span", { className: "text-green-600 mr-2", children: "✓" }),
+                          /* @__PURE__ */ e("span", { children: t })
+                        ] }, l)) })
+                      ] }) }) })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ a("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4", children: [
+                  /* @__PURE__ */ e("div", { className: "relative", children: /* @__PURE__ */ a(
                     "label",
                     {
-                      className: w(
+                      className: C(
                         "flex items-center justify-center relative p-4 border-2 rounded-xl cursor-pointer transition-all duration-200",
-                        a.paymentMethod === "online" ? "border-accent-500 bg-accent-50" : "border-gray-200 hover:border-gray-300",
+                        r.paymentMethod === "online" ? "border-accent-500 bg-accent-50" : "border-gray-200 hover:border-gray-300",
                         L("online") && "opacity-50 cursor-not-allowed"
                       ),
                       children: [
@@ -538,45 +580,45 @@ function De({
                             name: "paymentMethod",
                             value: "online",
                             disabled: L("online"),
-                            checked: a.paymentMethod === "online",
-                            onChange: N,
+                            checked: r.paymentMethod === "online",
+                            onChange: b,
                             className: "sr-only"
                           }
                         ),
-                        /* @__PURE__ */ r("div", { className: "flex flex-col items-center text-center space-y-3", children: [
+                        /* @__PURE__ */ a("div", { className: "flex flex-col items-center text-center space-y-3", children: [
                           /* @__PURE__ */ e(
                             "div",
                             {
-                              className: w(
+                              className: C(
                                 "p-3 rounded-full",
-                                a.paymentMethod === "online" ? "bg-accent-100 text-accent-600" : "bg-gray-100 text-gray-600"
+                                r.paymentMethod === "online" ? "bg-accent-100 text-accent-600" : "bg-gray-100 text-gray-600"
                               ),
-                              children: /* @__PURE__ */ e(je, { size: 24 })
+                              children: /* @__PURE__ */ e(Se, { size: 24 })
                             }
                           ),
-                          /* @__PURE__ */ r("div", { children: [
+                          /* @__PURE__ */ a("div", { children: [
                             /* @__PURE__ */ e("div", { className: "font-semibold text-gray-900", children: "Pay Online" }),
                             /* @__PURE__ */ e("div", { className: "text-sm text-gray-500 mt-1", children: "Bank transfer" }),
                             /* @__PURE__ */ e(
                               "img",
                               {
-                                src: Se,
+                                src: ze,
                                 alt: "Paystack",
                                 className: "h-4 w-auto mt-2 mx-auto"
                               }
                             )
                           ] })
                         ] }),
-                        a.paymentMethod === "online" && /* @__PURE__ */ e("div", { className: "absolute top-2 right-2", children: /* @__PURE__ */ e("div", { className: "w-5 h-5 bg-accent-600 rounded-full flex items-center justify-center", children: /* @__PURE__ */ e("div", { className: "w-2 h-2 bg-white rounded-full" }) }) })
+                        r.paymentMethod === "online" && /* @__PURE__ */ e("div", { className: "absolute top-2 right-2", children: /* @__PURE__ */ e("div", { className: "w-5 h-5 bg-accent-600 rounded-full flex items-center justify-center", children: /* @__PURE__ */ e("div", { className: "w-2 h-2 bg-white rounded-full" }) }) })
                       ]
                     }
                   ) }),
-                  /* @__PURE__ */ r(
+                  /* @__PURE__ */ a(
                     "label",
                     {
-                      className: w(
+                      className: C(
                         "flex items-center justify-center relative p-4 border-2 rounded-xl cursor-pointer transition-all duration-200",
-                        a.paymentMethod === "cod" ? "border-accent-500 bg-accent-50" : "border-gray-200 hover:border-gray-300",
+                        r.paymentMethod === "cod" ? "border-accent-500 bg-accent-50" : "border-gray-200 hover:border-gray-300",
                         L("cod") && "opacity-50 cursor-not-allowed"
                       ),
                       children: [
@@ -587,72 +629,33 @@ function De({
                             name: "paymentMethod",
                             value: "cod",
                             disabled: L("cod"),
-                            checked: a.paymentMethod === "cod",
-                            onChange: N,
+                            checked: r.paymentMethod === "cod",
+                            onChange: b,
                             className: "sr-only"
                           }
                         ),
-                        /* @__PURE__ */ r("div", { className: "flex flex-col items-center text-center space-y-3", children: [
+                        /* @__PURE__ */ a("div", { className: "flex flex-col items-center text-center space-y-3", children: [
                           /* @__PURE__ */ e(
                             "div",
                             {
-                              className: w(
+                              className: C(
                                 "p-3 rounded-full",
-                                a.paymentMethod === "cod" ? "bg-accent-100 text-accent-600" : "bg-gray-100 text-gray-600"
+                                r.paymentMethod === "cod" ? "bg-accent-100 text-accent-600" : "bg-gray-100 text-gray-600"
                               ),
-                              children: /* @__PURE__ */ e(de, { size: 24 })
+                              children: /* @__PURE__ */ e(ie, { size: 24 })
                             }
                           ),
-                          /* @__PURE__ */ r("div", { children: [
+                          /* @__PURE__ */ a("div", { children: [
                             /* @__PURE__ */ e("div", { className: "font-semibold text-gray-900", children: "Pay on Delivery" }),
                             /* @__PURE__ */ e("div", { className: "text-sm text-gray-500 mt-1", children: "Cash when item arrives" })
                           ] })
                         ] }),
-                        a.paymentMethod === "cod" && /* @__PURE__ */ e("div", { className: "absolute top-2 right-2", children: /* @__PURE__ */ e("div", { className: "w-5 h-5 bg-accent-600 rounded-full flex items-center justify-center", children: /* @__PURE__ */ e("div", { className: "w-2 h-2 bg-white rounded-full" }) }) })
+                        r.paymentMethod === "cod" && /* @__PURE__ */ e("div", { className: "absolute top-2 right-2", children: /* @__PURE__ */ e("div", { className: "w-5 h-5 bg-accent-600 rounded-full flex items-center justify-center", children: /* @__PURE__ */ e("div", { className: "w-2 h-2 bg-white rounded-full" }) }) })
                       ]
                     }
                   )
                 ] }),
-                u.paymentMethod && /* @__PURE__ */ e("p", { className: "text-red-600 text-sm", children: u.paymentMethod }),
-                j && /* @__PURE__ */ r("div", { className: "border border-gray-200 rounded-lg", children: [
-                  /* @__PURE__ */ r(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: () => ue(!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-medium text-gray-700", children: j.title || "🤔 Curious about Refunds?" }),
-                        /* @__PURE__ */ e(
-                          Ze,
-                          {
-                            size: 16,
-                            className: w(
-                              "transform transition-transform duration-200 text-gray-500",
-                              R && "rotate-180"
-                            )
-                          }
-                        )
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ e(
-                    "div",
-                    {
-                      className: w(
-                        "overflow-hidden transition-all duration-300 ease-in-out",
-                        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__ */ r("div", { children: [
-                        /* @__PURE__ */ e("h4", { className: "font-bold text-gray-800 mb-2", children: "Our Refund Policy" }),
-                        /* @__PURE__ */ e("ul", { className: "space-y-1 ml-4", children: j.policies.map((t, l) => /* @__PURE__ */ r("li", { className: "flex items-start", children: [
-                          /* @__PURE__ */ e("span", { className: "text-green-600 mr-2", children: "✓" }),
-                          /* @__PURE__ */ e("span", { children: t })
-                        ] }, l)) })
-                      ] }) }) })
-                    }
-                  )
-                ] })
+                u.paymentMethod && /* @__PURE__ */ e("p", { className: "text-red-600 text-sm", children: u.paymentMethod })
               ] }) })
             ]
           }
@@ -662,5 +665,5 @@ function De({
   );
 }
 export {
-  De as Checkout
+  et as Checkout
 };