@instockng/storefront-ui 1.0.18 → 1.0.19

package/dist/index10.mjs

@@ -1,648 +1,173 @@
 'use client';
-import { jsxs as a, jsx as e, Fragment as pe } from "react/jsx-runtime";
-import { useState as N, useEffect as q, useMemo as re, useCallback as ve } from "react";
-import { object as $, string as y, ValidationError as Ne } from "./index33.mjs";
-import "./index18.mjs";
-import "@tanstack/react-query";
-import { useGetDeliveryZones as ge } from "./index32.mjs";
-import { useCart as be } from "./index3.mjs";
-import { Modal as ae } from "./index14.mjs";
-import { FormInput as P } from "./index15.mjs";
-import { FormSelect as se } from "./index16.mjs";
-import { Button as L } from "./index11.mjs";
-import { Loader2 as R, ChevronLeft as xe, ChevronRight as we, CheckCircle as Ce, Package as Pe, Mail as ke, Phone as Me, Zap as qe, Banknote as Ie, ChevronDown as Ze } from "lucide-react";
-import { formatCurrency as k, cn as w } from "./index17.mjs";
-import je from "./index34.mjs";
-import { usePaystackPayment as Se } from "./index35.mjs";
-const ze = (d) => d.replace(/\D/g, ""), Fe = $({
-  firstName: y().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: y().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: y().required("Email is required").email("Please enter a valid email address"),
-  phone: y().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 = ze(d);
-    return [
-      /^0[789]\d{9}$/
-      // 0xxxxxxxxx (11 digits total)
-    ].some((f) => f.test(M));
-  })
-}), Le = $({
-  address: y().required("Street address is required").min(10, "Please provide a complete address"),
-  city: y().required("City is required").min(3, "City name must be at least 3 characters"),
-  state: y().required("State is required").test("not-empty", "State is required", (d) => !!d && d.trim() !== ""),
-  deliveryZoneId: y().required("Delivery zone is required").test("not-empty", "Delivery zone is required", (d) => !!d && d.trim() !== "")
-}), Be = $({
-  paymentMethod: y().oneOf(["cod", "online"], "Please select a payment method").required("Payment method is required")
-});
-function Ee({
-  isOpen: d,
-  onClose: M,
-  initialData: l,
-  onSuccess: f,
-  onError: c,
-  submitButtonText: ne = "Place Order",
-  refundPolicy: I
+import { jsxs as a, Fragment as N, jsx as e } from "react/jsx-runtime";
+import { useState as X, useEffect as b } from "react";
+import { useCart as Z } from "./index3.mjs";
+import { CartItem as A } from "./index9.mjs";
+import { DiscountCodeInput as G } from "./index11.mjs";
+import { Checkout as H } from "./index12.mjs";
+import { Button as v } from "./index13.mjs";
+import { X as J, Loader2 as K, Package as f } from "lucide-react";
+import { cn as n, formatCurrency as d } from "./index19.mjs";
+import { useMetaPixel as Q } from "./index4.mjs";
+function se({
+  isOpen: i,
+  onClose: r,
+  onCheckout: o,
+  onContinueShopping: m,
+  className: w,
+  showDiscountCode: k = !0,
+  checkoutButtonText: j = "Checkout",
+  continueShoppingText: C = "Continue Shopping",
+  checkoutButtonClassName: E,
+  continueShoppingButtonClassName: L,
+  disableCheckout: z = !1,
+  emptyMessage: I = "Your cart is empty"
 }) {
-  var J, Q, U, X, E, D, ee, te;
-  const le = "pk_live_dfb74efb5f74d2acbc253d5ca396ab9015ef0fa7", [o, p] = N("customer"), [Z, de] = N(void 0), [g, G] = N(void 0), [u, B] = N(null), { refetch: K, isLoading: O, cart: s, updateCartMutation: T, checkoutMutation: ie, clearAndCreateNewCart: V } = be(), Y = Se({
-    publicKey: le,
-    onSuccess: async (t) => {
-      try {
-        const n = await C.mutateAsync({
-          firstName: r.firstName,
-          lastName: r.lastName,
-          email: r.email,
-          phone: r.phone,
-          address: r.address,
-          city: r.city,
-          deliveryZoneId: g || r.deliveryZoneId,
-          paymentMethod: r.paymentMethod,
-          paystackReference: t.reference
-        });
-        if ("error" in n) {
-          const i = n.error;
-          c == null || c(new Error((i == null ? void 0 : i.message) || "Checkout failed"));
-          return;
-        }
-        B(n), V(), f == null || f(n.id);
-      } catch (n) {
-        c == null || c(n);
-      }
-    },
-    onClose: () => {
-      console.log("Payment popup closed by user");
-    }
-  });
-  q(() => {
-    d && K();
-  }, [d, K]);
-  const { data: b } = ge(((J = s == null ? void 0 : s.brand) == null ? void 0 : J.id) || "", {
-    enabled: !!((Q = s == null ? void 0 : s.brand) != null && Q.id)
-  }), h = re(() => b == null ? void 0 : b.find((t) => t.id === Z), [b, Z]), C = ie;
-  q(() => {
-    d || (B(null), p("customer"), C.reset());
-  }, [d]);
-  const [r, _] = N({
-    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) || ""
-  });
-  q(() => {
-    d && p("customer");
-  }, [d]);
-  const [H, W] = N(!1);
-  q(() => {
-    d && s && !l && !H && (_((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: ((n = s.deliveryZone) == null ? void 0 : n.id) || t.deliveryZoneId
-      };
-    }), W(!0)), d || W(!1);
-  }, [d, s, l, H]), q(() => {
-    if (g) {
-      const t = h == null ? void 0 : h.zones.find((n) => n.id === g);
-      t && _((n) => ({
-        ...n,
-        paymentMethod: t.allowOnline ? "online" : "cod"
-      }));
-    }
-  }, [g, h]);
-  const [m, j] = N({}), [A, ce] = N(!1), v = (t) => {
-    const { name: n, value: i } = t.target;
-    _((x) => ({ ...x, [n]: i })), m[n] && j((x) => ({ ...x, [n]: void 0 }));
-  }, S = ve(
-    (t) => {
-      const n = r[t];
-      if (!n) return;
-      const i = {};
-      t === "firstName" ? i.customerFirstName = n : t === "lastName" ? i.customerLastName = n : t === "email" ? i.customerEmail = n : t === "phone" && (i.customerPhone = n), T.mutate(i);
-    },
-    [r, T]
-  ), z = (t) => {
-    const n = {};
-    try {
-      if (t === "customer")
-        Fe.validateSync(r, { abortEarly: !1 });
-      else if (t === "delivery") {
-        const i = {
-          address: r.address,
-          city: r.city,
-          state: Z || r.state || "",
-          deliveryZoneId: g || r.deliveryZoneId || ""
-        };
-        Le.validateSync(i, { abortEarly: !1 });
-      } else t === "payment" && Be.validateSync(r, { abortEarly: !1 });
-    } catch (i) {
-      i instanceof Ne && i.inner.forEach((x) => {
-        x.path && (n[x.path] = x.message);
-      });
-    }
-    return j(n), Object.keys(n).length === 0;
-  }, oe = () => {
-    z(o) && (o === "customer" ? p("delivery") : o === "delivery" && p("payment"));
-  }, me = () => {
-    o === "payment" ? p("delivery") : o === "delivery" && p("customer");
-  }, ue = async () => {
-    if (!z("customer")) {
-      p("customer");
-      return;
+  var x, y, g;
+  const { cart: t, isLoading: c, error: h } = Z(), { trackInitiateCheckout: P } = Q(), [S, u] = X(!1);
+  b(() => (i ? document.body.style.overflow = "hidden" : document.body.style.overflow = "", () => {
+    document.body.style.overflow = "";
+  }), [i]), b(() => {
+    const s = (l) => {
+      l.key === "Escape" && i && r();
+    };
+    return window.addEventListener("keydown", s), () => window.removeEventListener("keydown", s);
+  }, [i, r]);
+  const q = ((x = t == null ? void 0 : t.pricing) == null ? void 0 : x.subtotal) || 0, p = ((y = t == null ? void 0 : t.pricing.discount) == null ? void 0 : y.amount) || 0, D = () => {
+    var s, l;
+    if (t) {
+      const T = ((s = t.items) == null ? void 0 : s.reduce((B, M) => B + M.quantity, 0)) || 0, Y = ((l = t.pricing) == null ? void 0 : l.total) || 0;
+      P(Y, T);
     }
-    if (!z("delivery")) {
-      p("delivery");
-      return;
-    }
-    if (z("payment")) {
-      if (r.paymentMethod === "online") {
-        if (!Y.isLoaded) {
-          c == null || c(new Error("Payment system is loading. Please try again."));
-          return;
-        }
-        const t = Math.round(s.pricing.total * 100);
-        Y.initializePayment({
-          email: r.email || (s == null ? void 0 : s.customerEmail) || "customer@example.com",
-          amount: t,
-          currency: "NGN",
-          metadata: {
-            cartId: s == null ? void 0 : s.id,
-            custom_fields: [
-              {
-                display_name: "Customer Name",
-                variable_name: "customer_name",
-                value: `${r.firstName} ${r.lastName}`
-              },
-              {
-                display_name: "Phone Number",
-                variable_name: "phone_number",
-                value: r.phone
-              }
-            ]
-          }
-        });
-        return;
-      }
-      try {
-        const t = await C.mutateAsync({
-          firstName: r.firstName,
-          lastName: r.lastName,
-          email: r.email,
-          phone: r.phone,
-          address: r.address,
-          city: r.city,
-          deliveryZoneId: g || r.deliveryZoneId,
-          paymentMethod: r.paymentMethod
-        });
-        if ("error" in t) {
-          const n = t.error;
-          c == null || c(new Error((n == null ? void 0 : n.message) || "Checkout failed"));
-          return;
-        }
-        B(t), V(), f == null || f(t.id);
-      } catch (t) {
-        c == null || c(t);
+    u(!0), o == null || o();
+  }, F = () => {
+    m == null || m(), r();
+  };
+  return /* @__PURE__ */ a(N, { children: [
+    /* @__PURE__ */ e(
+      "div",
+      {
+        className: n(
+          "fixed inset-0 z-40 bg-black/50 transition-opacity duration-300",
+          i ? "opacity-100" : "pointer-events-none opacity-0"
+        ),
+        onClick: r,
+        "aria-hidden": "true"
       }
-    }
-  }, he = {
-    customer: "Customer Information",
-    delivery: "Delivery Address",
-    payment: "Payment Method"
-  }, ye = re(() => he[o], [o]), fe = /* @__PURE__ */ a("div", { className: "space-y-3", children: [
-    (o === "payment" || o === "delivery") && ((U = s == null ? void 0 : s.pricing) == null ? void 0 : U.total) && /* @__PURE__ */ a("div", { className: "text-sm text-black relative", children: [
-      O && /* @__PURE__ */ e("div", { className: "absolute flex items-center justify-center inset-0 bg-white opacity-50", children: /* @__PURE__ */ e(R, { 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(((X = s == null ? void 0 : s.pricing) == null ? void 0 : X.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: [
-          "-",
-          k(((D = (E = s == null ? void 0 : s.pricing) == null ? void 0 : E.discount) == null ? void 0 : D.amount) ?? 0)
-        ] })
-      ] }),
-      /* @__PURE__ */ a("div", { className: "flex items-center justify-between font-medium", children: [
-        /* @__PURE__ */ e("span", { children: "Delivery Fee" }),
-        /* @__PURE__ */ e("span", { children: k(((ee = s == null ? void 0 : s.pricing) == null ? void 0 : ee.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: k(((te = s == null ? void 0 : s.pricing) == null ? void 0 : te.total) ?? 0) })
-      ] })
-    ] }),
-    /* @__PURE__ */ a("div", { className: "flex gap-3", children: [
-      o !== "customer" && /* @__PURE__ */ a(
-        L,
-        {
-          type: "button",
-          variant: "outline",
-          onClick: me,
-          className: "flex-1 border-gray-400",
-          size: "lg",
-          children: [
-            /* @__PURE__ */ e(xe, { className: "mr-2 h-4 w-4" }),
-            "Back"
-          ]
-        }
-      ),
-      o !== "payment" ? /* @__PURE__ */ a(
-        L,
-        {
-          type: "button",
-          onClick: oe,
-          className: "flex-1 bg-accent-500 text-white hover:bg-accent-600",
-          size: "lg",
-          children: [
-            "Next",
-            /* @__PURE__ */ e(we, { className: "ml-2 h-4 w-4" })
-          ]
-        }
-      ) : /* @__PURE__ */ e(
-        L,
-        {
-          type: "button",
-          onClick: ue,
-          disabled: C.isPending,
-          className: "flex-1 bg-accent-500 text-white hover:bg-accent-600",
-          size: "lg",
-          children: C.isPending ? /* @__PURE__ */ a(pe, { children: [
-            /* @__PURE__ */ e(R, { className: "mr-2 h-4 w-4 animate-spin" }),
-            "Processing..."
-          ] }) : ne
-        }
-      )
-    ] }),
-    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." })
-  ] }), F = (t) => !(s != null && s.availablePaymentMethods.includes(t));
-  return u ? /* @__PURE__ */ e(
-    ae,
-    {
-      isOpen: d,
-      onClose: M,
-      title: "Order Placed Successfully!",
-      footer: /* @__PURE__ */ e(
-        L,
-        {
-          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__ */ 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(Ce, { 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(Pe, { className: "h-5 w-5" }),
-            /* @__PURE__ */ a("span", { className: "font-medium", children: [
-              "Order #",
-              u.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: [
-                u.firstName,
-                " ",
-                u.lastName
-              ] })
+    ),
+    /* @__PURE__ */ e(
+      "div",
+      {
+        className: n(
+          "fixed right-0 top-0 z-50 h-full w-full bg-white shadow-2xl transition-transform duration-300 ease-in-out sm:w-[480px]",
+          i ? "translate-x-0" : "translate-x-full",
+          w
+        ),
+        children: /* @__PURE__ */ a("div", { className: "flex h-full flex-col", children: [
+          /* @__PURE__ */ e("div", { className: "border-b border-gray-300 px-4 py-2", children: /* @__PURE__ */ a("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ e("div", { className: "bg-accent-500 text-white px-2 py-1 rounded-full text-sm aspect-square flex items-center justify-center w-8 h-8", children: (g = t == null ? void 0 : t.items) == null ? void 0 : g.length }),
+              /* @__PURE__ */ e("h2", { className: "text-lg font-medium", children: "Your Cart" })
             ] }),
-            /* @__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: u.phone })
-            ] }),
-            u.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: u.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: u.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: k(u.totalPrice) })
-            ] })
-          ] })
-        ] }),
-        /* @__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."
-        ] }) })
-      ] })
-    }
-  ) : /* @__PURE__ */ e(
-    ae,
-    {
-      isOpen: d,
-      onClose: M,
-      title: ye,
-      footer: fe,
-      size: "lg",
-      contentClassName: "p-0",
-      children: O ? /* @__PURE__ */ e("div", { className: "flex items-center justify-center min-h-[300px]", children: /* @__PURE__ */ e(R, { className: "h-8 w-8 animate-spin text-gray-600" }) }) : /* @__PURE__ */ e("div", { className: "w-full overflow-hidden", children: /* @__PURE__ */ e("div", { className: "relative w-full", children: /* @__PURE__ */ a(
-        "div",
-        {
-          className: w(
-            "flex transition-transform duration-300 ease-in-out w-full",
-            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: [
-              /* @__PURE__ */ e(
-                P,
-                {
-                  label: "First Name",
-                  type: "text",
-                  name: "firstName",
-                  value: r.firstName,
-                  onChange: v,
-                  onBlur: () => S("firstName"),
-                  error: m.firstName,
-                  autoCorrect: "off",
-                  required: !0
-                }
-              ),
-              /* @__PURE__ */ e(
-                P,
-                {
-                  label: "Last Name",
-                  type: "text",
-                  name: "lastName",
-                  value: r.lastName,
-                  onChange: v,
-                  onBlur: () => S("lastName"),
-                  error: m.lastName,
-                  autoCorrect: "off",
-                  required: !0
-                }
-              ),
-              /* @__PURE__ */ e(
-                P,
-                {
-                  label: "Email",
-                  type: "email",
-                  name: "email",
-                  value: r.email,
-                  onChange: v,
-                  onBlur: () => S("email"),
-                  error: m.email,
-                  icon: /* @__PURE__ */ e(ke, { size: 16 }),
-                  autoCorrect: "off",
-                  required: !0
-                }
-              ),
-              /* @__PURE__ */ e(
-                P,
-                {
-                  label: "Phone Number",
-                  type: "tel",
-                  name: "phone",
-                  value: r.phone,
-                  onChange: v,
-                  onBlur: () => S("phone"),
-                  placeholder: "e.g. 08012345678",
-                  maxLength: 18,
-                  error: m.phone,
-                  icon: /* @__PURE__ */ e(Me, { 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__ */ a("div", { className: "space-y-4", children: [
-              /* @__PURE__ */ e(
-                P,
-                {
-                  label: "Street Address",
-                  type: "text",
-                  name: "address",
-                  value: r.address,
-                  onChange: v,
-                  error: m.address,
-                  autoCorrect: "off",
-                  required: !0
-                }
-              ),
-              /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+            /* @__PURE__ */ e(
+              "button",
+              {
+                onClick: r,
+                className: "rounded-full p-2 transition-colors hover:bg-gray-100",
+                "aria-label": "Close cart",
+                children: /* @__PURE__ */ e(J, { className: "h-6 w-6" })
+              }
+            )
+          ] }) }),
+          c && /* @__PURE__ */ e("div", { className: "flex flex-1 items-center justify-center", children: /* @__PURE__ */ a("div", { className: "text-center", children: [
+            /* @__PURE__ */ e(K, { className: "mx-auto mb-4 h-12 w-12 animate-spin text-accent-500" }),
+            /* @__PURE__ */ e("p", { className: "text-gray-600", children: "Loading cart..." })
+          ] }) }),
+          h && !c && /* @__PURE__ */ e("div", { className: "flex flex-1 items-center justify-center", children: /* @__PURE__ */ a("div", { className: "text-center", children: [
+            /* @__PURE__ */ e(f, { className: "mx-auto mb-4 h-12 w-12 text-red-600" }),
+            /* @__PURE__ */ e("p", { className: "text-red-600", children: "Failed to load cart. Please try again." })
+          ] }) }),
+          !c && !h && (!t || !t.items || t.items.length === 0) && /* @__PURE__ */ e("div", { className: "flex flex-1 items-center justify-center", children: /* @__PURE__ */ a("div", { className: "text-center", children: [
+            /* @__PURE__ */ e(f, { className: "mx-auto mb-4 h-12 w-12 text-gray-400" }),
+            /* @__PURE__ */ e("p", { className: "text-gray-600", children: I })
+          ] }) }),
+          !c && !h && t && t.items && t.items.length > 0 && /* @__PURE__ */ a(N, { children: [
+            /* @__PURE__ */ a("div", { className: "flex-1 overflow-y-auto p-4", children: [
+              /* @__PURE__ */ e("div", { className: "space-y-4", children: t.items.map((s, l) => /* @__PURE__ */ a("div", { children: [
                 /* @__PURE__ */ e(
-                  P,
+                  A,
                   {
-                    label: "Area",
-                    type: "text",
-                    name: "city",
-                    value: r.city,
-                    onChange: v,
-                    error: m.city,
-                    autoCorrect: "off",
-                    required: !0
+                    item: s
                   }
                 ),
-                /* @__PURE__ */ a(
-                  se,
-                  {
-                    label: "State",
-                    name: "state",
-                    value: Z || "",
-                    onChange: (t) => {
-                      G("");
-                      const n = t.target.value;
-                      de(n || void 0), m.state && j((i) => ({ ...i, state: void 0 }));
-                    },
-                    error: m.state,
-                    required: !0,
-                    children: [
-                      /* @__PURE__ */ e("option", { disabled: !0, value: "", children: "Select State" }),
-                      b == null ? void 0 : b.map((t) => /* @__PURE__ */ e("option", { value: t.id, children: t.name }, t.id))
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ a(
-                  se,
-                  {
-                    label: "Delivery Zone",
-                    value: g || "",
-                    onChange: (t) => {
-                      const n = t.target.value;
-                      G(n || void 0), m.deliveryZoneId && j((i) => ({ ...i, deliveryZoneId: void 0 })), n && T.mutate({ deliveryZoneId: n });
-                    },
-                    disabled: !h,
-                    error: m.deliveryZoneId,
-                    required: !0,
-                    children: [
-                      /* @__PURE__ */ e("option", { disabled: !0, value: "", children: h ? "Select Delivery Zone" : "Select State First" }),
-                      h == null ? void 0 : h.zones.map((t) => /* @__PURE__ */ a("option", { value: t.id, children: [
-                        t.name,
-                        " (",
-                        k(t.deliveryCost),
-                        ")"
-                      ] }, t.id))
-                    ]
-                  }
-                )
-              ] })
-            ] }) }),
-            /* @__PURE__ */ e("div", { className: "w-full min-w-full flex-shrink-0 p-4", children: /* @__PURE__ */ a("div", { className: "space-y-6", children: [
-              /* @__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(
-                      "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",
-                      F("online") && "opacity-50 cursor-not-allowed"
-                    ),
-                    children: [
-                      /* @__PURE__ */ e(
-                        "input",
-                        {
-                          type: "radio",
-                          name: "paymentMethod",
-                          value: "online",
-                          disabled: F("online"),
-                          checked: r.paymentMethod === "online",
-                          onChange: v,
-                          className: "sr-only"
-                        }
-                      ),
-                      /* @__PURE__ */ a("div", { className: "flex flex-col items-center text-center space-y-3", children: [
-                        /* @__PURE__ */ e(
-                          "div",
-                          {
-                            className: w(
-                              "p-3 rounded-full",
-                              r.paymentMethod === "online" ? "bg-accent-100 text-accent-600" : "bg-gray-100 text-gray-600"
-                            ),
-                            children: /* @__PURE__ */ e(qe, { size: 24 })
-                          }
-                        ),
-                        /* @__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: je,
-                              alt: "Paystack",
-                              className: "h-4 w-auto mt-2 mx-auto"
-                            }
-                          )
-                        ] })
-                      ] }),
-                      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__ */ a(
-                  "label",
-                  {
-                    className: w(
-                      "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",
-                      F("cod") && "opacity-50 cursor-not-allowed"
-                    ),
-                    children: [
-                      /* @__PURE__ */ e(
-                        "input",
-                        {
-                          type: "radio",
-                          name: "paymentMethod",
-                          value: "cod",
-                          disabled: F("cod"),
-                          checked: r.paymentMethod === "cod",
-                          onChange: v,
-                          className: "sr-only"
-                        }
-                      ),
-                      /* @__PURE__ */ a("div", { className: "flex flex-col items-center text-center space-y-3", children: [
-                        /* @__PURE__ */ e(
-                          "div",
-                          {
-                            className: w(
-                              "p-3 rounded-full",
-                              r.paymentMethod === "cod" ? "bg-accent-100 text-accent-600" : "bg-gray-100 text-gray-600"
-                            ),
-                            children: /* @__PURE__ */ e(Ie, { size: 24 })
-                          }
-                        ),
-                        /* @__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" })
-                        ] })
-                      ] }),
-                      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" }) }) })
-                    ]
-                  }
-                )
+                l < t.items.length - 1 && /* @__PURE__ */ e("hr", { className: "border-gray-200 mt-2" })
+              ] }, s.id)) }),
+              k && /* @__PURE__ */ e("div", { className: "mt-6", children: /* @__PURE__ */ e(G, {}) })
+            ] }),
+            /* @__PURE__ */ a("div", { className: "border-t border-gray-300 bg-white", children: [
+              /* @__PURE__ */ a("div", { className: " text-base", children: [
+                /* @__PURE__ */ a("div", { className: "p-4 space-y-2", children: [
+                  /* @__PURE__ */ a("div", { className: "flex justify-between", children: [
+                    /* @__PURE__ */ e("span", { className: "text-gray-600", children: "Subtotal" }),
+                    /* @__PURE__ */ e("span", { className: "font-semibold", children: d(q) })
+                  ] }),
+                  p > 0 && /* @__PURE__ */ a("div", { className: "flex justify-between text-green-600", children: [
+                    /* @__PURE__ */ e("span", { children: "Discount" }),
+                    /* @__PURE__ */ a("span", { className: "font-semibold", children: [
+                      "-",
+                      d(p)
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ a("div", { className: "flex justify-between", children: [
+                    /* @__PURE__ */ e("span", { className: "text-gray-600", children: "Shipping" }),
+                    /* @__PURE__ */ e("span", { className: "font-semibold", children: t.pricing && t.deliveryZone ? d(t.pricing.deliveryCharge) : "-" })
+                  ] })
+                ] }),
+                /* @__PURE__ */ a("div", { className: "flex justify-between p-4 border-t border-gray-300 text-lg", children: [
+                  /* @__PURE__ */ e("span", { className: "font-bold", children: "Total" }),
+                  /* @__PURE__ */ e("span", { className: "font-bold", children: d(t.pricing.total) })
+                ] })
               ] }),
-              m.paymentMethod && /* @__PURE__ */ e("p", { className: "text-red-600 text-sm", children: m.paymentMethod }),
-              I && /* @__PURE__ */ a("div", { className: "border border-gray-200 rounded-lg", children: [
+              /* @__PURE__ */ a("div", { className: "p-4 space-y-2", children: [
                 /* @__PURE__ */ a(
-                  "button",
+                  v,
                   {
-                    type: "button",
-                    onClick: () => ce(!A),
-                    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",
+                    onClick: D,
+                    disabled: z || t.items.length === 0,
+                    className: n("w-full bg-accent-500 text-white hover:bg-accent-600", E),
+                    size: "lg",
                     children: [
-                      /* @__PURE__ */ e("span", { className: "text-sm font-medium text-gray-700", children: I.title || "🤔 Curious about Refunds?" }),
-                      /* @__PURE__ */ e(
-                        Ze,
-                        {
-                          size: 16,
-                          className: w(
-                            "transform transition-transform duration-200 text-gray-500",
-                            A && "rotate-180"
-                          )
-                        }
-                      )
+                      /* @__PURE__ */ e(f, { className: "h-5 w-5" }),
+                      j
                     ]
                   }
                 ),
                 /* @__PURE__ */ e(
-                  "div",
+                  v,
                   {
-                    className: w(
-                      "overflow-hidden transition-all duration-300 ease-in-out",
-                      A ? "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: I.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 ml-4", children: I.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 })
-                      ] }, n)) })
-                    ] }) }) })
+                    onClick: F,
+                    variant: "outline",
+                    className: n("w-full border-gray-300 text-gray-600 hover:bg-gray-100", L),
+                    size: "lg",
+                    children: C
                   }
                 )
               ] })
-            ] }) })
-          ]
-        }
-      ) }) })
-    }
-  );
+            ] })
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ e(
+      H,
+      {
+        isOpen: S,
+        onSuccess: () => r(),
+        onClose: () => u(!1)
+      }
+    )
+  ] });
 }
 export {
-  Ee as Checkout
+  se as ShoppingCart
 };