@instockng/storefront-ui 1.0.56 → 1.0.57

package/dist/index13.mjs

@@ -1,737 +1,182 @@
 'use client';
-import { jsxs as a, jsx as e, Fragment as Ie } from "react/jsx-runtime";
-import { useState as w, useEffect as _, useMemo as K, useCallback as qe } from "react";
-import { object as V, string as N, ValidationError as je } from "./index43.mjs";
-import "./index21.mjs";
-import "@tanstack/react-query";
-import { useGetDeliveryZones as Ze } from "./index36.mjs";
-import { useCart as _e } from "./index3.mjs";
-import { Modal as he } from "./index17.mjs";
-import { FormInput as I } from "./index18.mjs";
-import { FormSelect as ye } from "./index19.mjs";
-import { Button as B } from "./index14.mjs";
-import { Loader2 as U, ChevronLeft as Se, ChevronRight as Le, Package as pe, Banknote as fe, Mail as ze, Phone as Ae, ChevronDown as Fe, Zap as Te } from "lucide-react";
-import { PostPurchaseUpsell as Be } from "./index44.mjs";
-import { formatCurrency as q, cn as k, getFbCookies as G, getTikTokCookies as O } from "./index20.mjs";
-import We from "./index45.mjs";
-import { usePaystackPayment as Re } from "./index46.mjs";
-const $e = "2348125648668", He = `https://wa.me/${$e}`, Ke = (i) => i.replace(/\D/g, ""), Ue = V({
-  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 = Ke(i);
-    return [
-      /^0[789]\d{9}$/
-      // 0xxxxxxxxx (11 digits total)
-    ].some((g) => g.test(j));
-  })
-}), Ge = V({
-  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() !== "")
-}), Oe = V({
-  paymentMethod: N().oneOf(["cod", "online"], "Please select a payment method").required("Payment method is required")
-});
-function ct({
-  isOpen: i,
-  onClose: j,
-  initialData: l,
-  onSuccess: g,
-  onError: o,
-  submitButtonText: ve = "Place Order",
-  refundPolicy: S
+import { jsxs as a, Fragment as b, jsx as e } from "react/jsx-runtime";
+import { useState as H, useEffect as P } from "react";
+import { useCart as T } from "./index3.mjs";
+import { CartItem as X } from "./index12.mjs";
+import { DiscountCodeInput as Z } from "./index14.mjs";
+import { Checkout as A } from "./index15.mjs";
+import { RecommendedProducts as G } from "./index11.mjs";
+import { Button as v } from "./index16.mjs";
+import { X as J, Loader2 as K, Package as h } from "lucide-react";
+import { cn as n, formatCurrency as c } from "./index22.mjs";
+import { useHideBodyOverflow as M } from "./index44.mjs";
+function ie({
+  isOpen: r,
+  onClose: s,
+  onCheckout: d,
+  onContinueShopping: o,
+  onPurchaseSuccess: m,
+  className: w,
+  showDiscountCode: k = !0,
+  showContinueShopping: j = !0,
+  checkoutButtonText: C = "Complete Purchase",
+  continueShoppingText: E = "Continue Shopping",
+  checkoutButtonClassName: I,
+  continueShoppingButtonClassName: L,
+  disableCheckout: z = !1,
+  emptyMessage: R = "Your cart is empty"
 }) {
-  var re, se, ne, le, ie, de, oe, ce, me, ue;
-  const [c, b] = w("customer"), [L, Ne] = w(void 0), [f, Y] = w(void 0), [y, W] = w(null), { refetch: J, isLoading: Q, cart: s, updateCartMutation: R, checkoutMutation: ge, clearAndCreateNewCart: X } = _e(), E = (re = s == null ? void 0 : s.brand) == null ? void 0 : re.paystackPublicKey, D = Re({
-    isOpen: i,
-    publicKey: E || "",
-    onSuccess: async (r) => {
-      try {
-        const { fbc: n, fbp: d } = G(), { ttp: h, ttclid: Z } = O(), v = await M.mutateAsync({
-          firstName: t.firstName,
-          lastName: t.lastName,
-          email: t.email,
-          phone: t.phone,
-          address: t.address,
-          city: t.city,
-          deliveryZoneId: f || t.deliveryZoneId,
-          paymentMethod: t.paymentMethod,
-          paystackReference: r.reference,
-          fbc: n,
-          fbp: d,
-          ttp: h,
-          ttclid: Z
-        });
-        if ("error" in v) {
-          const P = v.error;
-          o == null || o(new Error((P == null ? void 0 : P.message) || "Checkout failed"));
-          return;
-        }
-        W(v), X(), g == null || g(v);
-      } catch (n) {
-        o == null || o(n);
-      }
-    },
-    onClose: () => {
-      console.log("Payment popup closed by user");
-    }
-  });
-  _(() => {
-    i && J();
-  }, [i, J]);
-  const { data: C } = Ze(((se = s == null ? void 0 : s.brand) == null ? void 0 : se.id) || "", {
-    enabled: !!((ne = s == null ? void 0 : s.brand) != null && ne.id)
-  }), m = K(() => C == null ? void 0 : C.find((r) => r.id === L), [C, L]), p = K(() => m == null ? void 0 : m.zones.find((r) => r.id === f), [m, f]), M = ge;
-  _(() => {
-    i || (W(null), b("customer"), M.reset());
-  }, [i]);
-  const [t, $] = 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) || ""
-  });
-  _(() => {
-    i && b("customer");
-  }, [i]);
-  const [ee, te] = w(!1);
-  _(() => {
-    i && s && !l && !ee && ($((r) => {
-      var n;
-      return {
-        ...r,
-        firstName: s.customerFirstName || r.firstName,
-        lastName: s.customerLastName || r.lastName,
-        email: s.customerEmail || r.email,
-        phone: s.customerPhone || r.phone,
-        deliveryZoneId: ((n = s.deliveryZone) == null ? void 0 : n.id) || r.deliveryZoneId
-      };
-    }), te(!0)), i || te(!1);
-  }, [i, s, l, ee]), _(() => {
-    if (f) {
-      const r = m == null ? void 0 : m.zones.find((n) => n.id === f);
-      r && $((n) => ({
-        ...n,
-        paymentMethod: r.allowOnline ? "online" : "cod"
-      }));
-    }
-  }, [f, m]);
-  const [u, z] = w({}), [H, be] = w(!1), x = (r) => {
-    const { name: n, value: d } = r.target;
-    $((h) => ({ ...h, [n]: d })), u[n] && z((h) => ({ ...h, [n]: void 0 }));
-  }, A = qe(
-    (r) => {
-      const n = t[r];
-      if (!n) return;
-      const d = {};
-      r === "firstName" ? d.customerFirstName = n : r === "lastName" ? d.customerLastName = n : r === "email" ? d.customerEmail = n : r === "phone" && (d.customerPhone = n), R.mutate(d);
-    },
-    [t, R]
-  ), F = (r) => {
-    const n = {};
-    try {
-      if (r === "customer")
-        Ue.validateSync(t, { abortEarly: !1 });
-      else if (r === "delivery") {
-        const d = {
-          address: t.address,
-          city: t.city,
-          state: L || t.state || "",
-          deliveryZoneId: f || t.deliveryZoneId || ""
-        };
-        Ge.validateSync(d, { abortEarly: !1 });
-      } else r === "payment" && Oe.validateSync(t, { abortEarly: !1 });
-    } catch (d) {
-      d instanceof je && d.inner.forEach((h) => {
-        h.path && (n[h.path] = h.message);
-      });
-    }
-    return z(n), Object.keys(n).length === 0;
-  }, xe = () => {
-    F(c) && (c === "customer" ? b("delivery") : c === "delivery" && b("payment"));
-  }, we = () => {
-    c === "payment" ? b("delivery") : c === "delivery" && b("customer");
-  }, Ce = async () => {
-    var r;
-    if (!F("customer")) {
-      b("customer");
-      return;
-    }
-    if (!F("delivery")) {
-      b("delivery");
-      return;
-    }
-    if (F("payment")) {
-      if (t.paymentMethod === "online") {
-        if (!E) {
-          o == null || o(new Error("Paystack is not configured. Please contact support."));
-          return;
-        }
-        if (!D.isLoaded) {
-          o == null || o(new Error("Payment system is loading. Please try again."));
-          return;
-        }
-        const n = Math.round(s.pricing.total * 100), { fbc: d, fbp: h } = G(), { ttp: Z, ttclid: v } = O();
-        D.initializePayment({
-          email: t.email || (s == null ? void 0 : s.customerEmail) || "customer@example.com",
-          amount: n,
-          currency: "NGN",
-          metadata: {
-            cartId: s == null ? void 0 : s.id,
-            brandSlug: (r = s == null ? void 0 : s.brand) == null ? void 0 : r.slug,
-            address: t.address,
-            city: t.city,
-            delivery_zone_id: f || t.deliveryZoneId,
-            firstName: t.firstName,
-            lastName: t.lastName,
-            email: t.email,
-            phone: t.phone,
-            fbc: d,
-            fbp: h,
-            ttp: Z,
-            ttclid: v,
-            custom_fields: [
-              {
-                display_name: "Customer Name",
-                variable_name: "customer_name",
-                value: `${t.firstName} ${t.lastName}`
-              },
-              {
-                display_name: "Phone Number",
-                variable_name: "phone_number",
-                value: t.phone
-              },
-              {
-                display_name: "Address",
-                variable_name: "address",
-                value: t.address
-              },
-              {
-                display_name: "City",
-                variable_name: "city",
-                value: t.city
-              },
-              {
-                display_name: "Delivery Zone ID",
-                variable_name: "delivery_zone_id",
-                value: f || t.deliveryZoneId
-              }
-            ]
-          }
-        });
-        return;
-      }
-      try {
-        const { fbc: n, fbp: d } = G(), { ttp: h, ttclid: Z } = O(), v = await M.mutateAsync({
-          firstName: t.firstName,
-          lastName: t.lastName,
-          email: t.email,
-          phone: t.phone,
-          address: t.address,
-          city: t.city,
-          deliveryZoneId: f || t.deliveryZoneId,
-          paymentMethod: t.paymentMethod,
-          fbc: n,
-          fbp: d,
-          ttp: h,
-          ttclid: Z
-        });
-        if ("error" in v) {
-          const P = v.error;
-          o == null || o(new Error((P == null ? void 0 : P.message) || "Checkout failed"));
-          return;
-        }
-        W(v), X(), g == null || g(v);
-      } catch (n) {
-        o == null || o(n);
+  var x, g, y;
+  const { cart: t, isLoading: l, error: f, trackCheckoutInitiated: B } = T(), [D, p] = H(!1);
+  M(r), P(() => {
+    const i = (N) => {
+      N.key === "Escape" && r && s();
+    };
+    return window.addEventListener("keydown", i), () => window.removeEventListener("keydown", i);
+  }, [r, s]);
+  const F = ((x = t == null ? void 0 : t.pricing) == null ? void 0 : x.subtotal) || 0, u = ((g = t == null ? void 0 : t.pricing.discount) == null ? void 0 : g.amount) || 0, Y = () => {
+    B(), p(!0), d == null || d();
+  }, q = () => {
+    o == null || o(), s();
+  };
+  return /* @__PURE__ */ a(b, { children: [
+    /* @__PURE__ */ e(
+      "div",
+      {
+        className: n(
+          "fixed inset-0 z-40 bg-black/50 transition-opacity duration-300",
+          r ? "opacity-100" : "pointer-events-none opacity-0"
+        ),
+        onClick: s,
+        "aria-hidden": "true"
       }
-    }
-  }, Pe = {
-    customer: "Customer Information",
-    delivery: "Delivery Address",
-    payment: "Payment Method"
-  }, ke = K(() => Pe[c], [c]), Me = /* @__PURE__ */ a("div", { className: "space-y-3", children: [
-    (c === "payment" || c === "delivery") && ((le = s == null ? void 0 : s.pricing) == null ? void 0 : le.total) && /* @__PURE__ */ a("div", { className: "text-sm text-black relative", children: [
-      Q && /* @__PURE__ */ e("div", { className: "absolute flex items-center justify-center inset-0 bg-white opacity-50", children: /* @__PURE__ */ e(U, { 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: q(((ie = s == null ? void 0 : s.pricing) == null ? void 0 : ie.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: [
-          "-",
-          q(((oe = (de = s == null ? void 0 : s.pricing) == null ? void 0 : de.discount) == null ? void 0 : oe.amount) ?? 0)
-        ] })
-      ] }),
-      /* @__PURE__ */ a("div", { className: "flex items-center justify-between font-medium", children: [
-        /* @__PURE__ */ e("span", { children: "Delivery Fee" }),
-        /* @__PURE__ */ e("span", { children: q(((ce = s == null ? void 0 : s.pricing) == null ? void 0 : ce.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: q(((me = s == null ? void 0 : s.pricing) == null ? void 0 : me.total) ?? 0) })
-      ] })
-    ] }),
-    /* @__PURE__ */ a("div", { className: "flex gap-3", children: [
-      c !== "customer" && /* @__PURE__ */ a(
-        B,
-        {
-          type: "button",
-          variant: "outline",
-          onClick: we,
-          className: "flex-1 border-gray-400",
-          size: "lg",
-          children: [
-            /* @__PURE__ */ e(Se, { className: "mr-2 h-4 w-4" }),
-            "Back"
-          ]
-        }
-      ),
-      c !== "payment" ? /* @__PURE__ */ a(
-        B,
-        {
-          type: "button",
-          onClick: xe,
-          className: "flex-1 bg-accent-500 text-white hover:bg-accent-600",
-          size: "lg",
-          children: [
-            "Next",
-            /* @__PURE__ */ e(Le, { className: "ml-2 h-4 w-4" })
-          ]
-        }
-      ) : /* @__PURE__ */ e(
-        B,
-        {
-          type: "button",
-          onClick: Ce,
-          disabled: M.isPending,
-          className: "flex-1 bg-accent-500 text-white hover:bg-accent-600",
-          size: "lg",
-          children: M.isPending ? /* @__PURE__ */ a(Ie, { children: [
-            /* @__PURE__ */ e(U, { className: "mr-2 h-4 w-4 animate-spin" }),
-            "Processing..."
-          ] }) : ve
-        }
-      )
-    ] }),
-    M.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." })
-  ] }), T = (r) => !(s != null && s.availablePaymentMethods.includes(r));
-  if (y)
-    return /* @__PURE__ */ e(
-      he,
+    ),
+    /* @__PURE__ */ e(
+      "div",
       {
-        isOpen: i,
-        onClose: j,
-        title: /* @__PURE__ */ a("span", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ e("span", { className: "w-10 h-10 bg-green-100 rounded-full flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ e("svg", { className: "h-6 w-6 text-green-600", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }) }),
-          /* @__PURE__ */ a("span", { children: [
-            "Thank You!",
-            /* @__PURE__ */ e("br", {}),
-            "We'll contact you shortly"
-          ] })
-        ] }),
-        footer: /* @__PURE__ */ e(
-          B,
-          {
-            onClick: j,
-            className: "w-full bg-accent-500 text-white hover:bg-accent-600",
-            size: "lg",
-            children: "Close"
-          }
+        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]",
+          r ? "translate-x-0" : "translate-x-full",
+          w
         ),
-        size: "lg",
-        contentClassName: "p-4",
-        children: /* @__PURE__ */ a("div", { className: "space-y-4", children: [
-          /* @__PURE__ */ a("div", { className: "bg-gray-50 rounded-lg p-4 space-y-2", children: [
-            /* @__PURE__ */ a("div", { className: "flex items-center justify-center space-x-2 text-gray-700", children: [
-              /* @__PURE__ */ e(pe, { className: "h-4 w-4" }),
-              /* @__PURE__ */ a("span", { className: "text-sm font-medium", children: [
-                "Order #",
-                y.orderNumber
-              ] })
+        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: (y = t == null ? void 0 : t.items) == null ? void 0 : y.length }),
+              /* @__PURE__ */ e("h2", { className: "text-lg font-medium", children: "Your Cart" })
             ] }),
-            /* @__PURE__ */ a("div", { className: "border-t border-gray-200 pt-2 space-y-1.5", 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" }),
-                /* @__PURE__ */ e("span", { className: "font-medium text-gray-900", children: y.paymentMethod === "cod" ? "Cash on Delivery" : "Online" })
-              ] }),
-              /* @__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: q(y.totalPrice) })
-              ] })
-            ] })
-          ] }),
-          /* @__PURE__ */ e(
-            Be,
-            {
-              orderId: y.id,
-              token: y.userActionToken,
-              limit: 4,
-              brandSiteUrl: (ue = y.brand) == null ? void 0 : ue.siteUrl
-            }
-          )
-        ] })
-      }
-    );
-  const ae = p && (c === "delivery" || c === "payment") && (p.waybillOnly || !(p != null && p.allowCOD));
-  return /* @__PURE__ */ e(
-    he,
-    {
-      isOpen: i,
-      onClose: j,
-      title: ke,
-      footer: Me,
-      size: "lg",
-      contentClassName: "p-0",
-      children: Q ? /* @__PURE__ */ e("div", { className: "flex items-center justify-center min-h-[300px]", children: /* @__PURE__ */ e(U, { 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: [
-        ae && /* @__PURE__ */ a("div", { className: "space-y-3 p-4 pb-0", children: [
-          p.noteTitle && p.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(pe, { 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: p.noteTitle }),
-              /* @__PURE__ */ e("p", { className: "text-sm text-amber-800 whitespace-pre-wrap", children: p.noteContent })
-            ] })
+            /* @__PURE__ */ e(
+              "button",
+              {
+                onClick: s,
+                className: "rounded-full p-2 transition-colors hover:bg-gray-100",
+                "aria-label": "Close cart",
+                children: /* @__PURE__ */ e(J, { className: "h-6 w-6" })
+              }
+            )
           ] }) }),
-          !(p != null && p.allowCOD) && /* @__PURE__ */ e("div", { className: "bg-blue-50 border border-blue-200 rounded-lg p-4", children: /* @__PURE__ */ a("div", { className: "flex items-start gap-3", children: [
-            /* @__PURE__ */ e(fe, { 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: He,
-            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",
-          {
-            className: k(
-              "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__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
-                /* @__PURE__ */ e(
-                  I,
-                  {
-                    label: "First Name",
-                    type: "text",
-                    name: "firstName",
-                    value: t.firstName,
-                    onChange: x,
-                    onBlur: () => A("firstName"),
-                    error: u.firstName,
-                    autoCorrect: "off",
-                    required: !0
-                  }
-                ),
+          l && /* @__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..." })
+          ] }) }),
+          f && !l && /* @__PURE__ */ e("div", { className: "flex flex-1 items-center justify-center", children: /* @__PURE__ */ a("div", { className: "text-center", children: [
+            /* @__PURE__ */ e(h, { 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." })
+          ] }) }),
+          !l && !f && (!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(h, { className: "mx-auto mb-4 h-12 w-12 text-gray-400" }),
+            /* @__PURE__ */ e("p", { className: "text-gray-600", children: R })
+          ] }) }),
+          !l && !f && t && t.items && t.items.length > 0 && /* @__PURE__ */ a(b, { children: [
+            /* @__PURE__ */ a("div", { className: "flex-1 overflow-y-auto", children: [
+              /* @__PURE__ */ e("div", { className: "space-y-4 p-4", children: t.items.map((i, N) => /* @__PURE__ */ a("div", { children: [
                 /* @__PURE__ */ e(
-                  I,
+                  X,
                   {
-                    label: "Last Name",
-                    type: "text",
-                    name: "lastName",
-                    value: t.lastName,
-                    onChange: x,
-                    onBlur: () => A("lastName"),
-                    error: u.lastName,
-                    autoCorrect: "off",
-                    required: !0
+                    item: i
                   }
                 ),
-                /* @__PURE__ */ e(
-                  I,
+                /* @__PURE__ */ e("hr", { className: "border-gray-200 mt-2" })
+              ] }, i.id)) }),
+              k && /* @__PURE__ */ e("div", { className: "px-4 pb-4", children: /* @__PURE__ */ e(Z, {}) })
+            ] }),
+            /* @__PURE__ */ e(G, { limit: 6, className: "border-t border-gray-200" }),
+            /* @__PURE__ */ a("div", { className: "border-t border-gray-300 bg-white", children: [
+              /* @__PURE__ */ a("div", { className: " text-base", children: [
+                /* @__PURE__ */ a("div", { className: "px-4 py-2 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: c(F) })
+                  ] }),
+                  u > 0 && /* @__PURE__ */ a("div", { className: "flex justify-between text-green-600", children: [
+                    /* @__PURE__ */ e("span", { children: "Discount" }),
+                    /* @__PURE__ */ a("span", { className: "font-semibold", children: [
+                      "-",
+                      c(u)
+                    ] })
+                  ] }),
+                  /* @__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 ? c(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: c(t.pricing.total) })
+                ] })
+              ] }),
+              /* @__PURE__ */ a("div", { className: "px-4 py-2 space-y-2 pt-0", children: [
+                /* @__PURE__ */ a(
+                  v,
                   {
-                    label: "Email",
-                    type: "email",
-                    name: "email",
-                    value: t.email,
-                    onChange: x,
-                    onBlur: () => A("email"),
-                    error: u.email,
-                    icon: /* @__PURE__ */ e(ze, { size: 16 }),
-                    autoCorrect: "off",
-                    required: !0
+                    onClick: Y,
+                    disabled: z || t.items.length === 0,
+                    className: n("w-full bg-accent-500 text-white hover:bg-accent-600", I),
+                    size: "lg",
+                    children: [
+                      /* @__PURE__ */ e(h, { className: "h-5 w-5" }),
+                      C
+                    ]
                   }
                 ),
-                /* @__PURE__ */ e(
-                  I,
+                j && /* @__PURE__ */ e(
+                  v,
                   {
-                    label: "Phone Number",
-                    type: "tel",
-                    name: "phone",
-                    value: t.phone,
-                    onChange: x,
-                    onBlur: () => A("phone"),
-                    placeholder: "e.g. 08012345678",
-                    maxLength: 18,
-                    error: u.phone,
-                    icon: /* @__PURE__ */ e(Ae, { size: 16 }),
-                    autoCorrect: "off",
-                    required: !0,
-                    className: "font-semibold"
+                    onClick: q,
+                    variant: "outline",
+                    className: n("w-full border-gray-300 text-gray-600 hover:bg-gray-100", L),
+                    size: "lg",
+                    children: E
                   }
                 )
-              ] }) }) }),
-              /* @__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(
-                  I,
-                  {
-                    label: "Street Address",
-                    type: "text",
-                    name: "address",
-                    value: t.address,
-                    onChange: x,
-                    error: u.address,
-                    autoCorrect: "off",
-                    required: !0
-                  }
-                ),
-                /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
-                  /* @__PURE__ */ e(
-                    I,
-                    {
-                      label: "Area",
-                      type: "text",
-                      name: "city",
-                      value: t.city,
-                      onChange: x,
-                      error: u.city,
-                      autoCorrect: "off",
-                      required: !0
-                    }
-                  ),
-                  /* @__PURE__ */ a(
-                    ye,
-                    {
-                      label: "State",
-                      name: "state",
-                      value: L || "",
-                      onChange: (r) => {
-                        Y("");
-                        const n = r.target.value;
-                        Ne(n || void 0), u.state && z((d) => ({ ...d, state: void 0 }));
-                      },
-                      error: u.state,
-                      required: !0,
-                      children: [
-                        /* @__PURE__ */ e("option", { disabled: !0, value: "", children: "Select State" }),
-                        C == null ? void 0 : C.map((r) => /* @__PURE__ */ e("option", { value: r.id, children: r.name }, r.id))
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ a(
-                    ye,
-                    {
-                      label: "Delivery Zone",
-                      value: f || "",
-                      onChange: (r) => {
-                        const n = r.target.value;
-                        Y(n || void 0), u.deliveryZoneId && z((d) => ({ ...d, deliveryZoneId: void 0 })), n && R.mutate({ deliveryZoneId: n });
-                      },
-                      disabled: !m,
-                      error: u.deliveryZoneId,
-                      required: !0,
-                      children: [
-                        /* @__PURE__ */ e("option", { disabled: !0, value: "", children: m ? "Select Delivery Zone" : "Select State First" }),
-                        m == null ? void 0 : m.zones.map((r) => /* @__PURE__ */ a("option", { value: r.id, children: [
-                          r.name,
-                          " (",
-                          q(r.deliveryCost),
-                          ")"
-                        ] }, r.id))
-                      ]
-                    }
-                  )
-                ] })
-              ] }) }),
-              /* @__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 ${ae ? "mt-4" : ""}`, children: [
-                  /* @__PURE__ */ a(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: () => be(!H),
-                      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(
-                          Fe,
-                          {
-                            size: 16,
-                            className: k(
-                              "transform transition-transform duration-200 text-gray-500",
-                              H && "rotate-180"
-                            )
-                          }
-                        )
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ e(
-                    "div",
-                    {
-                      className: k(
-                        "overflow-hidden transition-all duration-300 ease-in-out",
-                        H ? "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: [
-                        /* @__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((r, n) => /* @__PURE__ */ a("li", { className: "flex items-start", children: [
-                          /* @__PURE__ */ e("span", { className: "text-green-600 mr-2", children: "✓" }),
-                          /* @__PURE__ */ e("span", { children: r })
-                        ] }, n)) })
-                      ] }) }) })
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ a("div", { className: "grid grid-cols-2 gap-4", children: [
-                  /* @__PURE__ */ e("div", { className: "relative", children: /* @__PURE__ */ a(
-                    "label",
-                    {
-                      className: k(
-                        "flex items-center justify-center relative p-4 border-2 rounded-xl cursor-pointer transition-all duration-200",
-                        t.paymentMethod === "online" ? "border-accent-500 bg-accent-50" : "border-gray-200 hover:border-gray-300",
-                        T("online") && "opacity-50 cursor-not-allowed"
-                      ),
-                      children: [
-                        /* @__PURE__ */ e(
-                          "input",
-                          {
-                            type: "radio",
-                            name: "paymentMethod",
-                            value: "online",
-                            disabled: T("online"),
-                            checked: t.paymentMethod === "online",
-                            onChange: x,
-                            className: "sr-only"
-                          }
-                        ),
-                        /* @__PURE__ */ a("div", { className: "flex flex-col items-center text-center space-y-3", children: [
-                          /* @__PURE__ */ e(
-                            "div",
-                            {
-                              className: k(
-                                "p-3 rounded-full",
-                                t.paymentMethod === "online" ? "bg-accent-100 text-accent-600" : "bg-gray-100 text-gray-600"
-                              ),
-                              children: /* @__PURE__ */ e(Te, { 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: We,
-                                alt: "Paystack",
-                                className: "h-4 w-auto mt-2 mx-auto"
-                              }
-                            )
-                          ] })
-                        ] }),
-                        t.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: k(
-                        "flex items-center justify-center relative p-4 border-2 rounded-xl cursor-pointer transition-all duration-200",
-                        t.paymentMethod === "cod" ? "border-accent-500 bg-accent-50" : "border-gray-200 hover:border-gray-300",
-                        T("cod") && "opacity-50 cursor-not-allowed"
-                      ),
-                      children: [
-                        /* @__PURE__ */ e(
-                          "input",
-                          {
-                            type: "radio",
-                            name: "paymentMethod",
-                            value: "cod",
-                            disabled: T("cod"),
-                            checked: t.paymentMethod === "cod",
-                            onChange: x,
-                            className: "sr-only"
-                          }
-                        ),
-                        /* @__PURE__ */ a("div", { className: "flex flex-col items-center text-center space-y-3", children: [
-                          /* @__PURE__ */ e(
-                            "div",
-                            {
-                              className: k(
-                                "p-3 rounded-full",
-                                t.paymentMethod === "cod" ? "bg-accent-100 text-accent-600" : "bg-gray-100 text-gray-600"
-                              ),
-                              children: /* @__PURE__ */ e(fe, { 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: "Pay when item arrives" })
-                          ] })
-                        ] }),
-                        t.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 })
-              ] }) })
-            ]
-          }
-        )
-      ] }) })
-    }
-  );
+              ] })
+            ] })
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ e(
+      A,
+      {
+        isOpen: D,
+        onSuccess: (i) => {
+          m == null || m(i), s();
+        },
+        onClose: () => p(!1),
+        refundPolicy: {
+          title: "🤔 Curious about Refunds?",
+          policies: [
+            "2 day return window from delivery date",
+            "Items must be unused and in original packaging",
+            "Refunds processed as soon as item is received",
+            "Refunds issued to original payment method",
+            "Contact hello@instock.ng to initiate a refund"
+          ]
+        }
+      }
+    )
+  ] });
 }
 export {
-  ct as Checkout
+  ie as ShoppingCart
 };