@instockng/storefront-ui 1.0.75 → 1.0.77

package/dist/index16.mjs

@@ -1,63 +1,732 @@
 'use client';
-import { jsxs as c, jsx as u } from "react/jsx-runtime";
-import { Root as v } from "./index49.mjs";
-import { cva as g } from "./index50.mjs";
-import { Loader2 as l } from "lucide-react";
-import { cn as p } from "./index22.mjs";
-const b = g(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline"
-      },
-      size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9",
-        "icon-sm": "size-8",
-        "icon-lg": "size-10"
+import { jsxs as a, jsx as e, Fragment as Ie } from "react/jsx-runtime";
+import { useState as w, useEffect as Z, useMemo as K, useCallback as qe } from "react";
+import { object as V, string as N, ValidationError as je } from "./index46.mjs";
+import "./index24.mjs";
+import "@tanstack/react-query";
+import { useGetDeliveryZones as Ze } from "./index40.mjs";
+import { useCart as _e } from "./index3.mjs";
+import { Modal as he } from "./index20.mjs";
+import { FormInput as I } from "./index21.mjs";
+import { FormSelect as ye } from "./index22.mjs";
+import { Button as B } from "./index17.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 "./index47.mjs";
+import { formatCurrency as _, cn as k, getFbCookies as G, getTikTokCookies as O } from "./index23.mjs";
+import We from "./index48.mjs";
+import { usePaystackPayment as Re } from "./index49.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 q = Ke(i);
+    return [
+      /^0[789]\d{9}$/
+      // 0xxxxxxxxx (11 digits total)
+    ].some((g) => g.test(q));
+  })
+}), 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: q,
+  initialData: l,
+  onSuccess: g,
+  onError: o,
+  submitButtonText: ve = "Place Order",
+  refundPolicy: S
+}) {
+  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: j } = 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: j
+        });
+        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);
       }
     },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
+    onClose: () => {
+      console.log("Payment popup closed by user");
     }
-  }
-);
-function z({
-  className: r,
-  variant: t,
-  size: i,
-  asChild: n = !1,
-  loading: e = !1,
-  children: o,
-  disabled: s,
-  type: a,
-  ...d
-}) {
-  return /* @__PURE__ */ c(
-    n ? v : "button",
+  });
+  Z(() => {
+    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;
+  Z(() => {
+    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) || ""
+  });
+  Z(() => {
+    i && b("customer");
+  }, [i]);
+  const [ee, te] = w(!1);
+  Z(() => {
+    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]), Z(() => {
+    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: j, 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: j,
+            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: j } = 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: j
+        });
+        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);
+      }
+    }
+  }, 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: _(((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: [
+          "-",
+          _(((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: _(((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: _(((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,
+      {
+        isOpen: i,
+        onClose: q,
+        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: q,
+            className: "w-full bg-accent-500 text-white hover:bg-accent-600",
+            size: "lg",
+            children: "Close"
+          }
+        ),
+        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
+              ] })
+            ] }),
+            /* @__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: _(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,
     {
-      "data-slot": "button",
-      className: p(b({ variant: t, size: i, className: r })),
-      disabled: s || e,
-      type: a ?? "button",
-      ...d,
-      children: [
-        e && /* @__PURE__ */ u(l, { className: "size-4 animate-spin" }),
-        o
-      ]
+      isOpen: i,
+      onClose: q,
+      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 })
+            ] })
+          ] }) }),
+          !(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/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
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  I,
+                  {
+                    label: "Last Name",
+                    type: "text",
+                    name: "lastName",
+                    value: t.lastName,
+                    onChange: x,
+                    onBlur: () => A("lastName"),
+                    error: u.lastName,
+                    autoCorrect: "off",
+                    required: !0
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  I,
+                  {
+                    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
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  I,
+                  {
+                    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"
+                  }
+                )
+              ] }) }) }),
+              /* @__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__ */ e("option", { value: r.id, children: r.name }, 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 })
+              ] }) })
+            ]
+          }
+        )
+      ] }) })
     }
   );
 }
 export {
-  z as Button,
-  b as buttonVariants
+  ct as Checkout
 };