@instockng/storefront-ui 1.0.107 → 1.0.109

package/dist/index21.mjs

@@ -1,268 +1,727 @@
 'use client';
-import { jsxs as l, jsx as r } from "react/jsx-runtime";
-import { useState as m, useRef as p, useCallback as G, useEffect as N } from "react";
-import { createPortal as Q } from "react-dom";
-import { Sparkles as ee, X as te, Loader2 as re, Send as se } from "lucide-react";
-import { cn as k, formatCurrency as ne } from "./index30.mjs";
-import { useHideBodyOverflow as ae } from "./index53.mjs";
-function ue({
-  isOpen: c,
-  onClose: y,
-  apiUrl: I,
-  brandSlug: D,
-  productSlug: J,
-  initialQuestion: x,
-  assistantName: L = "AI Assistant",
-  onProductClick: S,
-  className: K,
-  disablePortal: Y = !1
+import { jsxs as a, jsx as e, Fragment as O } from "react/jsx-runtime";
+import { useState as C, useEffect as Z, useMemo as V, useCallback as qe } from "react";
+import { object as Q, string as S, ValidationError as _e } from "./index54.mjs";
+import "./index31.mjs";
+import "@tanstack/react-query";
+import { useGetDeliveryZones as Le } from "./index47.mjs";
+import { useCart as Ze } from "./index3.mjs";
+import { Modal as fe } from "./index27.mjs";
+import { FormInput as W } from "./index28.mjs";
+import { FormSelect as ve } from "./index29.mjs";
+import { Button as $ } from "./index24.mjs";
+import { Loader2 as R, ChevronLeft as ze, ChevronRight as Fe, Package as ge, Banknote as Ne, Phone as Te, ChevronDown as Ae, Zap as Be } from "lucide-react";
+import { PostPurchaseUpsell as We } from "./index55.mjs";
+import { formatCurrency as _, cn as M, getFbCookies as Y, getTikTokCookies as J } from "./index30.mjs";
+import $e from "./index56.mjs";
+import { usePaystackPayment as Re } from "./index57.mjs";
+const Ue = "2348125648668", He = `https://wa.me/${Ue}`, Ke = (d) => d.replace(/\D/g, ""), U = (d) => {
+  const x = d.trim().split(/\s+/), i = x[0] || "", b = x.slice(1).join(" ") || "-";
+  return { firstName: i, lastName: b };
+}, Ge = Q({
+  fullName: S().required("Name is required").min(2, "Name must be at least 2 characters").max(100, "Name must be less than 100 characters"),
+  phone: S().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 x = Ke(d);
+    return [
+      /^0[789]\d{9}$/
+      // 0xxxxxxxxx (11 digits total)
+    ].some((b) => b.test(x));
+  })
+}), Oe = Q({
+  address: S().required("Street address is required").min(10, "Please provide a complete address"),
+  city: S().required("City is required").min(3, "City name must be at least 3 characters"),
+  state: S().required("State is required").test("not-empty", "State is required", (d) => !!d && d.trim() !== ""),
+  deliveryZoneId: S().required("Delivery zone is required").test("not-empty", "Delivery zone is required", (d) => !!d && d.trim() !== "")
+}), Ve = Q({
+  paymentMethod: S().oneOf(["cod", "online"], "Please select a payment method").required("Payment method is required")
+});
+function mt({
+  isOpen: d,
+  onClose: x,
+  initialData: i,
+  onSuccess: b,
+  onError: c,
+  submitButtonText: be = "Place Order",
+  refundPolicy: z
 }) {
-  const [u, d] = m([]), [w, E] = m(""), [f, W] = m(!1), [$, h] = m(null), [q, C] = m(!1), [Z, F] = m(!1), M = p(null), z = p(null), A = p(!1), B = p([]);
-  B.current = u, ae(c);
-  const H = G((e, a) => {
-    if (e === "token")
-      d((s) => {
-        const o = [...s], t = o[o.length - 1];
-        return (t == null ? void 0 : t.role) === "assistant" && (o[o.length - 1] = { ...t, content: t.content + a }), o;
-      });
-    else if (e === "done")
+  var ie, de, oe, ce, me, he, ue, pe, ye;
+  const [m, w] = C("customer"), [F, xe] = C(void 0), [y, X] = C(void 0), [f, H] = C(null), { refetch: E, isLoading: D, cart: t, updateCartMutation: P, checkoutMutation: we, clearAndCreateNewCart: ee } = Ze(), te = (ie = t == null ? void 0 : t.brand) == null ? void 0 : ie.paystackPublicKey, ae = Re({
+    isOpen: d,
+    publicKey: te || "",
+    onSuccess: async (n) => {
       try {
-        const s = JSON.parse(a);
-        d((o) => {
-          var i;
-          const t = [...o], n = t[t.length - 1];
-          return (n == null ? void 0 : n.role) === "assistant" && (t[t.length - 1] = {
-            ...n,
-            content: s.answer || n.content,
-            products: ((i = s.products) == null ? void 0 : i.length) > 0 ? s.products : void 0
-          }), t;
+        const { fbc: r, fbp: l } = Y(), { ttp: o, ttclid: g } = J(), { firstName: p, lastName: L } = U(s.fullName), N = await j.mutateAsync({
+          firstName: p,
+          lastName: L,
+          phone: s.phone,
+          address: s.address,
+          city: s.city,
+          deliveryZoneId: y || s.deliveryZoneId,
+          paymentMethod: s.paymentMethod,
+          paystackReference: n.reference,
+          fbc: r,
+          fbp: l,
+          ttp: o,
+          ttclid: g
         });
-      } catch {
-      }
-    else if (e === "error")
-      try {
-        const s = JSON.parse(a);
-        h(s.message || "An error occurred");
-      } catch {
-        h("An error occurred");
+        if ("error" in N) {
+          const I = N.error;
+          c == null || c(new Error((I == null ? void 0 : I.message) || "Checkout failed"));
+          return;
+        }
+        H(N), ee(), b == null || b(N);
+      } catch (r) {
+        c == null || c(r);
       }
-  }, []), v = p(), U = G(
-    async (e) => {
-      var o;
-      if (!e.trim()) return;
-      h(null);
-      const a = { role: "user", content: e }, s = B.current.map((t) => ({
-        role: t.role,
-        content: t.content
+    },
+    onClose: () => {
+      console.log("Payment popup closed by user");
+    }
+  });
+  Z(() => {
+    d && E();
+  }, [d, E]);
+  const { data: k } = Le(((de = t == null ? void 0 : t.brand) == null ? void 0 : de.id) || "", {
+    enabled: !!((oe = t == null ? void 0 : t.brand) != null && oe.id)
+  }), u = V(() => k == null ? void 0 : k.find((n) => n.id === F), [k, F]), h = V(() => u == null ? void 0 : u.zones.find((n) => n.id === y), [u, y]), j = we;
+  Z(() => {
+    d || (H(null), w("customer"), j.reset());
+  }, [d]);
+  const [s, K] = C({
+    fullName: (i == null ? void 0 : i.fullName) || "",
+    phone: (i == null ? void 0 : i.phone) || "",
+    address: (i == null ? void 0 : i.address) || "",
+    city: (i == null ? void 0 : i.city) || "",
+    deliveryZoneId: (i == null ? void 0 : i.deliveryZoneId) || "",
+    paymentMethod: (i == null ? void 0 : i.paymentMethod) || "online",
+    notes: (i == null ? void 0 : i.notes) || ""
+  });
+  Z(() => {
+    d && w("customer");
+  }, [d]);
+  const [se, re] = C(!1);
+  Z(() => {
+    if (d && t && !i && !se) {
+      const n = [t.customerFirstName, t.customerLastName].filter(Boolean).join(" ");
+      K((r) => {
+        var l;
+        return {
+          ...r,
+          fullName: n || r.fullName,
+          phone: t.customerPhone || r.phone,
+          deliveryZoneId: ((l = t.deliveryZone) == null ? void 0 : l.id) || r.deliveryZoneId
+        };
+      }), re(!0);
+    }
+    d || re(!1);
+  }, [d, t, i, se]), Z(() => {
+    if (y) {
+      const n = u == null ? void 0 : u.zones.find((r) => r.id === y);
+      n && K((r) => ({
+        ...r,
+        paymentMethod: n.allowOnline ? "online" : "cod"
       }));
-      d((t) => [...t, a]), E(""), W(!0), d((t) => [...t, { role: "assistant", content: "" }]);
-      try {
-        const t = await fetch(`${I}/v1/assistant/ask`, {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({
-            question: e,
-            brandSlug: D,
-            productSlug: J,
-            history: s
-          })
-        });
-        if (!t.ok) {
-          const g = await t.json().catch(() => ({}));
-          throw new Error(
-            ((o = g == null ? void 0 : g.error) == null ? void 0 : o.message) || `Request failed (${t.status})`
-          );
+    }
+  }, [y, u]);
+  const [v, T] = C({}), [G, Ce] = C(!1), q = (n) => {
+    const { name: r, value: l } = n.target;
+    K((o) => ({ ...o, [r]: l })), v[r] && T((o) => ({ ...o, [r]: void 0 }));
+  }, ne = qe(
+    (n) => {
+      const r = s[n];
+      if (r)
+        if (n === "fullName") {
+          const { firstName: l, lastName: o } = U(r);
+          P.mutate({ customerFirstName: l, customerLastName: o });
+        } else n === "phone" && P.mutate({ customerPhone: r });
+    },
+    [s, P]
+  ), A = (n) => {
+    const r = {};
+    try {
+      if (n === "customer")
+        Ge.validateSync(s, { abortEarly: !1 });
+      else if (n === "delivery") {
+        const l = {
+          address: s.address,
+          city: s.city,
+          state: F || s.state || "",
+          deliveryZoneId: y || s.deliveryZoneId || ""
+        };
+        Oe.validateSync(l, { abortEarly: !1 });
+      } else n === "payment" && Ve.validateSync(s, { abortEarly: !1 });
+    } catch (l) {
+      l instanceof _e && l.inner.forEach((o) => {
+        o.path && (r[o.path] = o.message);
+      });
+    }
+    return T(r), Object.keys(r).length === 0;
+  }, Pe = () => {
+    A(m) && (m === "customer" ? w("delivery") : m === "delivery" && w("payment"));
+  }, ke = () => {
+    m === "payment" ? w("delivery") : m === "delivery" && w("customer");
+  }, Ie = async () => {
+    var n;
+    if (!A("customer")) {
+      w("customer");
+      return;
+    }
+    if (!A("delivery")) {
+      w("delivery");
+      return;
+    }
+    if (A("payment")) {
+      if (s.paymentMethod === "online") {
+        if (!te) {
+          c == null || c(new Error("Paystack is not configured. Please contact support."));
+          return;
         }
-        if (!t.body) throw new Error("No response body");
-        const n = t.body.getReader(), i = new TextDecoder();
-        let j = "", R = "";
-        for (; ; ) {
-          const { done: g, value: P } = await n.read();
-          if (g) break;
-          j += i.decode(P, { stream: !0 });
-          const X = j.split(`
-`);
-          j = X.pop() || "";
-          for (const b of X) {
-            if (b.trim() === "") {
-              R = "";
-              continue;
-            }
-            if (b.trimStart().startsWith("event:"))
-              R = b.trimStart().slice(6).trim();
-            else if (b.trimStart().startsWith("data:")) {
-              const T = b.trimStart().slice(5), O = T.startsWith(" ") ? T.slice(1) : T;
-              H(R || "token", O);
-            }
-          }
+        if (!ae.isLoaded) {
+          c == null || c(new Error("Payment system is loading. Please try again."));
+          return;
         }
-      } catch (t) {
-        h(t.message || "Something went wrong"), d((n) => {
-          const i = n[n.length - 1];
-          return (i == null ? void 0 : i.role) === "assistant" && !i.content ? n.slice(0, -1) : n;
+        const r = Math.round(t.pricing.total * 100), { fbc: l, fbp: o } = Y(), { ttp: g, ttclid: p } = J(), { firstName: L, lastName: N } = U(s.fullName);
+        ae.initializePayment({
+          email: (t == null ? void 0 : t.customerEmail) || `${s.phone.replace(/\D/g, "")}@customer.instock.ng`,
+          phone: s.phone,
+          amount: r,
+          currency: "NGN",
+          metadata: {
+            cartId: t == null ? void 0 : t.id,
+            brandSlug: (n = t == null ? void 0 : t.brand) == null ? void 0 : n.slug,
+            address: s.address,
+            city: s.city,
+            delivery_zone_id: y || s.deliveryZoneId,
+            firstName: L,
+            lastName: N,
+            phone: s.phone,
+            fbc: l,
+            fbp: o,
+            ttp: g,
+            ttclid: p,
+            custom_fields: [
+              {
+                display_name: "Customer Name",
+                variable_name: "customer_name",
+                value: s.fullName
+              },
+              {
+                display_name: "Phone Number",
+                variable_name: "phone_number",
+                value: s.phone
+              },
+              {
+                display_name: "Address",
+                variable_name: "address",
+                value: s.address
+              },
+              {
+                display_name: "City",
+                variable_name: "city",
+                value: s.city
+              },
+              {
+                display_name: "Delivery Zone ID",
+                variable_name: "delivery_zone_id",
+                value: y || s.deliveryZoneId
+              }
+            ]
+          }
         });
-      } finally {
-        W(!1);
+        return;
       }
-    },
-    [I, D, J, H]
-  );
-  v.current = U, N(() => {
-    if (c)
-      F(!0), requestAnimationFrame(() => {
-        requestAnimationFrame(() => {
-          C(!0);
+      try {
+        const { fbc: r, fbp: l } = Y(), { ttp: o, ttclid: g } = J(), { firstName: p, lastName: L } = U(s.fullName), N = await j.mutateAsync({
+          firstName: p,
+          lastName: L,
+          phone: s.phone,
+          address: s.address,
+          city: s.city,
+          deliveryZoneId: y || s.deliveryZoneId,
+          paymentMethod: s.paymentMethod,
+          fbc: r,
+          fbp: l,
+          ttp: o,
+          ttclid: g
         });
-      });
-    else {
-      C(!1);
-      const e = setTimeout(() => {
-        F(!1), d([]), E(""), h(null), A.current = !1;
-      }, 300);
-      return () => clearTimeout(e);
+        if ("error" in N) {
+          const I = N.error;
+          c == null || c(new Error((I == null ? void 0 : I.message) || "Checkout failed"));
+          return;
+        }
+        H(N), ee(), b == null || b(N);
+      } catch (r) {
+        c == null || c(r);
+      }
     }
-  }, [c]), N(() => {
-    c && x && !A.current && (A.current = !0, x.trim() ? setTimeout(() => {
-      var e;
-      return (e = v.current) == null ? void 0 : e.call(v, x);
-    }, 100) : setTimeout(() => {
-      var e;
-      return (e = z.current) == null ? void 0 : e.focus();
-    }, 350));
-  }, [c, x]), N(() => {
-    var e;
-    (e = M.current) == null || e.scrollIntoView({ behavior: "smooth" });
-  }, [u]), N(() => {
-    const e = (a) => {
-      a.key === "Escape" && c && y();
-    };
-    if (c)
-      return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
-  }, [c, y]);
-  const _ = (e) => {
-    e.preventDefault(), w.trim() && U(w.trim());
-  };
-  if (!Z) return null;
-  const V = /* @__PURE__ */ l(
-    "div",
-    {
-      className: k(
-        "fixed inset-0 z-50 transition-opacity duration-300",
-        q ? "opacity-100" : "opacity-0"
+  }, Me = {
+    customer: "Customer Information",
+    delivery: "Delivery Address",
+    payment: "Payment Method"
+  }, Se = V(() => Me[m], [m]), je = /* @__PURE__ */ a("div", { className: "space-y-3", children: [
+    (m === "payment" || m === "delivery") && ((ce = t == null ? void 0 : t.pricing) == null ? void 0 : ce.total) && /* @__PURE__ */ a("div", { className: "text-sm text-black relative", children: [
+      D && /* @__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: _(((me = t == null ? void 0 : t.pricing) == null ? void 0 : me.subtotal) ?? 0) })
+      ] }),
+      t.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: [
+          "-",
+          _(((ue = (he = t == null ? void 0 : t.pricing) == null ? void 0 : he.discount) == null ? void 0 : ue.amount) ?? 0)
+        ] })
+      ] }),
+      /* @__PURE__ */ a("div", { className: "flex items-center justify-between font-medium", children: [
+        /* @__PURE__ */ e("span", { children: "Delivery Fee" }),
+        /* @__PURE__ */ e("span", { children: (() => {
+          var o, g, p;
+          if (!y)
+            return /* @__PURE__ */ e("span", { className: "text-gray-400 text-xs", children: "Select zone first" });
+          const n = (o = t == null ? void 0 : t.brand) == null ? void 0 : o.freeShippingThreshold, r = ((g = t == null ? void 0 : t.pricing) == null ? void 0 : g.subtotal) ?? 0;
+          if (n && r >= n)
+            return /* @__PURE__ */ e("span", { className: "text-green-600", children: "Free" });
+          const l = P.isPending ? (h == null ? void 0 : h.deliveryCost) ?? 0 : ((p = t == null ? void 0 : t.pricing) == null ? void 0 : p.deliveryCharge) ?? 0;
+          return l === 0 ? /* @__PURE__ */ e("span", { className: "text-green-600", children: "Free" }) : _(l);
+        })() })
+      ] }),
+      /* @__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: _(((pe = t == null ? void 0 : t.pricing) == null ? void 0 : pe.total) ?? 0) })
+      ] })
+    ] }),
+    /* @__PURE__ */ a("div", { className: "flex gap-3", children: [
+      m !== "customer" && /* @__PURE__ */ a(
+        $,
+        {
+          type: "button",
+          variant: "outline",
+          onClick: ke,
+          className: "flex-1 border-gray-400",
+          size: "lg",
+          children: [
+            /* @__PURE__ */ e(ze, { className: "mr-2 h-4 w-4" }),
+            "Back"
+          ]
+        }
       ),
-      children: [
-        /* @__PURE__ */ r(
-          "div",
+      m !== "payment" ? /* @__PURE__ */ e(
+        $,
+        {
+          type: "button",
+          onClick: Pe,
+          disabled: m === "delivery" && P.isPending,
+          className: "flex-1 bg-accent-500 text-white hover:bg-accent-600",
+          size: "lg",
+          children: m === "delivery" && P.isPending ? /* @__PURE__ */ a(O, { children: [
+            /* @__PURE__ */ e(R, { className: "mr-2 h-4 w-4 animate-spin" }),
+            "Updating..."
+          ] }) : /* @__PURE__ */ a(O, { children: [
+            "Next",
+            /* @__PURE__ */ e(Fe, { className: "ml-2 h-4 w-4" })
+          ] })
+        }
+      ) : /* @__PURE__ */ e(
+        $,
+        {
+          type: "button",
+          onClick: Ie,
+          disabled: j.isPending,
+          className: "flex-1 bg-accent-500 text-white hover:bg-accent-600",
+          size: "lg",
+          children: j.isPending ? /* @__PURE__ */ a(O, { children: [
+            /* @__PURE__ */ e(R, { className: "mr-2 h-4 w-4 animate-spin" }),
+            "Processing..."
+          ] }) : be
+        }
+      )
+    ] }),
+    j.isError && /* @__PURE__ */ e("div", { className: "rounded-lg bg-red-50 p-3 text-sm text-red-600", children: "Failed to place order. Please check your information and try again." })
+  ] }), B = (n) => !(t != null && t.availablePaymentMethods.includes(n));
+  if (f)
+    return /* @__PURE__ */ e(
+      fe,
+      {
+        isOpen: d,
+        onClose: x,
+        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(
+          $,
           {
-            className: "absolute inset-0 bg-black/40 backdrop-blur-sm",
-            onClick: y
+            onClick: x,
+            className: "w-full bg-accent-500 text-white hover:bg-accent-600",
+            size: "lg",
+            children: "Close"
           }
         ),
-        /* @__PURE__ */ l(
+        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(ge, { className: "h-4 w-4" }),
+              /* @__PURE__ */ a("span", { className: "text-sm font-medium", children: [
+                "Order #",
+                f.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: [
+                  f.firstName,
+                  " ",
+                  f.lastName
+                ] })
+              ] }),
+              /* @__PURE__ */ a("div", { className: "flex justify-between text-sm", children: [
+                /* @__PURE__ */ e("span", { className: "text-gray-600", children: "Phone" }),
+                /* @__PURE__ */ e("span", { className: "font-medium text-gray-900", children: f.phone })
+              ] }),
+              f.email && /* @__PURE__ */ a("div", { className: "flex justify-between text-sm", children: [
+                /* @__PURE__ */ e("span", { className: "text-gray-600", children: "Email" }),
+                /* @__PURE__ */ e("span", { className: "font-medium text-gray-900", children: f.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: f.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: _(f.totalPrice) })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ e(
+            We,
+            {
+              orderId: f.id,
+              token: f.userActionToken,
+              limit: 4,
+              brandSiteUrl: (ye = f.brand) == null ? void 0 : ye.siteUrl
+            }
+          )
+        ] })
+      }
+    );
+  const le = h && (m === "delivery" || m === "payment") && (h.waybillOnly || !(h != null && h.allowCOD));
+  return /* @__PURE__ */ e(
+    fe,
+    {
+      isOpen: d,
+      onClose: x,
+      title: Se,
+      footer: je,
+      size: "lg",
+      contentClassName: "p-0",
+      children: D ? /* @__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__ */ a("div", { className: "relative w-full", children: [
+        le && /* @__PURE__ */ a("div", { className: "space-y-3 p-4 pb-0", children: [
+          h.noteTitle && h.noteContent && /* @__PURE__ */ e("div", { className: "bg-amber-50 border border-amber-200 rounded-lg p-4", children: /* @__PURE__ */ a("div", { className: "flex items-start gap-3", children: [
+            /* @__PURE__ */ e(ge, { className: "h-5 w-5 text-amber-600 flex-shrink-0 mt-0.5" }),
+            /* @__PURE__ */ a("div", { className: "space-y-1", children: [
+              /* @__PURE__ */ e("p", { className: "text-sm font-semibold text-amber-900 whitespace-pre-wrap", children: h.noteTitle }),
+              /* @__PURE__ */ e("p", { className: "text-sm text-amber-800 whitespace-pre-wrap", children: h.noteContent })
+            ] })
+          ] }) }),
+          !(h != null && h.allowCOD) && /* @__PURE__ */ e("div", { className: "bg-blue-50 border border-blue-200 rounded-lg p-4", children: /* @__PURE__ */ a("div", { className: "flex items-start gap-3", children: [
+            /* @__PURE__ */ e(Ne, { 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(
-              "absolute bg-white flex flex-col transition-transform duration-300 ease-out",
-              // Mobile: bottom sheet
-              "inset-x-0 bottom-0 top-[10vh] rounded-t-2xl",
-              // Desktop: right side drawer
-              "sm:inset-y-0 sm:right-0 sm:left-auto sm:w-[420px] sm:max-w-full sm:rounded-t-none sm:rounded-l-2xl",
-              // Animation
-              q ? "translate-y-0 sm:translate-x-0" : "translate-y-full sm:translate-y-0 sm:translate-x-full",
-              K
+            className: M(
+              "flex transition-transform duration-300 ease-in-out w-full",
+              m === "customer" && "translate-x-0",
+              m === "delivery" && "-translate-x-full",
+              m === "payment" && "-translate-x-[200%]"
             ),
             children: [
-              /* @__PURE__ */ l("div", { className: "flex items-center justify-between border-b border-gray-200 px-4 py-3 flex-shrink-0", children: [
-                /* @__PURE__ */ l("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ r(ee, { className: "h-5 w-5 text-orange-500" }),
-                  /* @__PURE__ */ r("span", { className: "font-semibold text-gray-900", children: L }),
-                  /* @__PURE__ */ r("span", { className: "text-xs text-gray-400 bg-gray-100 rounded px-1.5 py-0.5", children: "beta" })
-                ] }),
-                /* @__PURE__ */ r(
-                  "button",
+              /* @__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(
+                  W,
+                  {
+                    label: "Full Name",
+                    type: "text",
+                    name: "fullName",
+                    value: s.fullName,
+                    onChange: q,
+                    onBlur: () => ne("fullName"),
+                    error: v.fullName,
+                    autoCorrect: "off",
+                    required: !0
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  W,
                   {
-                    type: "button",
-                    onClick: y,
-                    className: "p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-colors",
-                    "aria-label": "Close",
-                    children: /* @__PURE__ */ r(te, { className: "h-5 w-5" })
+                    label: "Phone Number",
+                    type: "tel",
+                    name: "phone",
+                    value: s.phone,
+                    onChange: q,
+                    onBlur: () => ne("phone"),
+                    placeholder: "e.g. 08012345678",
+                    maxLength: 18,
+                    error: v.phone,
+                    icon: /* @__PURE__ */ e(Te, { size: 16 }),
+                    autoCorrect: "off",
+                    required: !0,
+                    className: "font-semibold"
                   }
                 )
-              ] }),
-              /* @__PURE__ */ l("div", { className: "flex-1 overflow-y-auto p-4 space-y-4 min-h-0", children: [
-                u.length === 0 && !f && /* @__PURE__ */ r("div", { className: "text-center text-gray-400 text-sm py-8", children: "Ask me anything about our products!" }),
-                u.map((e, a) => /* @__PURE__ */ r("div", { children: e.role === "user" ? /* @__PURE__ */ r("div", { className: "flex justify-end", children: /* @__PURE__ */ r("div", { className: "bg-gray-800 text-white rounded-2xl rounded-br-sm px-4 py-2 max-w-[80%] text-sm", children: e.content }) }) : /* @__PURE__ */ l("div", { className: "space-y-3", children: [
-                  /* @__PURE__ */ l("div", { className: "text-sm text-gray-800 leading-relaxed whitespace-pre-wrap", children: [
-                    e.content,
-                    f && a === u.length - 1 && /* @__PURE__ */ r("span", { className: "inline-block w-1.5 h-4 bg-gray-400 animate-pulse ml-0.5 align-text-bottom" })
-                  ] }),
-                  e.products && e.products.length > 0 && /* @__PURE__ */ r("div", { className: "space-y-2", children: e.products.map((s) => /* @__PURE__ */ l(
+              ] }) }),
+              /* @__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(
+                  W,
+                  {
+                    label: "Street Address",
+                    type: "text",
+                    name: "address",
+                    value: s.address,
+                    onChange: q,
+                    error: v.address,
+                    autoCorrect: "off",
+                    required: !0
+                  }
+                ),
+                /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+                  /* @__PURE__ */ e(
+                    W,
+                    {
+                      label: "Area",
+                      type: "text",
+                      name: "city",
+                      value: s.city,
+                      onChange: q,
+                      error: v.city,
+                      autoCorrect: "off",
+                      required: !0
+                    }
+                  ),
+                  /* @__PURE__ */ a(
+                    ve,
+                    {
+                      label: "State",
+                      name: "state",
+                      value: F || "",
+                      onChange: (n) => {
+                        X("");
+                        const r = n.target.value;
+                        xe(r || void 0), v.state && T((l) => ({ ...l, state: void 0 }));
+                      },
+                      error: v.state,
+                      required: !0,
+                      children: [
+                        /* @__PURE__ */ e("option", { disabled: !0, value: "", children: "Select State" }),
+                        k == null ? void 0 : k.slice().sort((n, r) => {
+                          const l = n.name.toLowerCase() === "lagos" ? 0 : 1, o = r.name.toLowerCase() === "lagos" ? 0 : 1;
+                          return l - o;
+                        }).map((n) => /* @__PURE__ */ e("option", { value: n.id, children: n.name }, n.id))
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ a(
+                    ve,
+                    {
+                      label: "Delivery Zone",
+                      value: y || "",
+                      onChange: (n) => {
+                        const r = n.target.value;
+                        X(r || void 0), v.deliveryZoneId && T((l) => ({ ...l, deliveryZoneId: void 0 })), r && P.mutate({ deliveryZoneId: r });
+                      },
+                      disabled: !u,
+                      error: v.deliveryZoneId,
+                      required: !0,
+                      children: [
+                        /* @__PURE__ */ e("option", { disabled: !0, value: "", children: u ? "Select Delivery Zone" : "Select State First" }),
+                        (() => {
+                          var o, g;
+                          const n = ((o = t == null ? void 0 : t.pricing) == null ? void 0 : o.subtotal) ?? 0, r = (g = t == null ? void 0 : t.brand) == null ? void 0 : g.freeShippingThreshold, l = r && n >= r;
+                          return u == null ? void 0 : u.zones.map((p) => /* @__PURE__ */ a("option", { value: p.id, children: [
+                            p.name,
+                            l ? "" : ` (${_(p.deliveryCost)})`
+                          ] }, p.id));
+                        })()
+                      ]
+                    }
+                  )
+                ] })
+              ] }) }),
+              /* @__PURE__ */ e("div", { className: "w-full min-w-full flex-shrink-0 p-4", children: /* @__PURE__ */ a("div", { className: "space-y-6", children: [
+                z && /* @__PURE__ */ a("div", { className: `border border-gray-200 rounded-lg ${le ? "mt-4" : ""}`, children: [
+                  /* @__PURE__ */ a(
                     "button",
                     {
                       type: "button",
-                      onClick: () => S == null ? void 0 : S(s.slug),
-                      className: "flex items-center gap-3 w-full rounded-xl border border-gray-200 p-2 hover:bg-gray-50 transition-colors text-left",
+                      onClick: () => Ce(!G),
+                      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: [
-                        s.thumbnailUrl ? /* @__PURE__ */ r(
-                          "img",
+                        /* @__PURE__ */ e("span", { className: "text-sm font-bold text-accent-700", children: z.title || "Yes, we offer refunds!" }),
+                        /* @__PURE__ */ e(
+                          Ae,
                           {
-                            src: s.thumbnailUrl,
-                            alt: s.name,
-                            className: "h-16 w-16 rounded-lg object-cover flex-shrink-0"
+                            size: 16,
+                            className: M(
+                              "transform transition-transform duration-200 text-gray-500",
+                              G && "rotate-180"
+                            )
                           }
-                        ) : /* @__PURE__ */ r("div", { className: "h-16 w-16 rounded-lg bg-gray-100 flex-shrink-0" }),
-                        /* @__PURE__ */ l("div", { className: "min-w-0", children: [
-                          /* @__PURE__ */ r("p", { className: "text-sm font-medium text-gray-900 line-clamp-2", children: s.name }),
-                          /* @__PURE__ */ r("p", { className: "text-sm font-semibold text-blue-600", children: ne(s.price) })
-                        ] })
+                        )
                       ]
-                    },
-                    s.slug
-                  )) })
-                ] }) }, a)),
-                $ && /* @__PURE__ */ r("div", { className: "rounded-lg bg-red-50 border border-red-200 p-3 text-sm text-red-700", children: $ }),
-                /* @__PURE__ */ r("div", { ref: M })
-              ] }),
-              /* @__PURE__ */ r("div", { className: "border-t border-gray-200 p-3 flex-shrink-0", children: /* @__PURE__ */ l("form", { onSubmit: _, className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ r(
-                  "input",
-                  {
-                    ref: z,
-                    type: "text",
-                    value: w,
-                    onChange: (e) => E(e.target.value),
-                    placeholder: `Ask ${L} a question`,
-                    disabled: f,
-                    className: k(
-                      "flex-1 rounded-full border border-gray-300 px-4 py-2.5 text-sm",
-                      "focus:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-400/30",
-                      "disabled:opacity-50"
-                    )
-                  }
-                ),
-                /* @__PURE__ */ r(
-                  "button",
-                  {
-                    type: "submit",
-                    disabled: !w.trim() || f,
-                    className: k(
-                      "flex h-10 w-10 items-center justify-center rounded-full",
-                      "bg-gray-800 text-white",
-                      "hover:bg-gray-700 transition-colors",
-                      "disabled:opacity-40 disabled:cursor-not-allowed"
-                    ),
-                    children: f ? /* @__PURE__ */ r(re, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ r(se, { className: "h-4 w-4" })
-                  }
-                )
+                    }
+                  ),
+                  /* @__PURE__ */ e(
+                    "div",
+                    {
+                      className: M(
+                        "overflow-hidden transition-all duration-300 ease-in-out",
+                        G ? "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: z.policies && /* @__PURE__ */ a("div", { children: [
+                        /* @__PURE__ */ e("h4", { className: "font-bold text-gray-800 mb-2", children: "Our Refund Policy" }),
+                        /* @__PURE__ */ e("ul", { className: "space-y-1", children: z.policies.map((n, r) => /* @__PURE__ */ a("li", { className: "flex items-start", children: [
+                          /* @__PURE__ */ e("span", { className: "text-green-600 mr-2", children: "✓" }),
+                          /* @__PURE__ */ e("span", { children: n })
+                        ] }, r)) })
+                      ] }) }) })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ a("div", { className: "grid grid-cols-2 gap-4", children: [
+                  /* @__PURE__ */ e("div", { className: "relative", children: /* @__PURE__ */ a(
+                    "label",
+                    {
+                      className: M(
+                        "flex items-center justify-center relative p-4 border-2 rounded-xl cursor-pointer transition-all duration-200",
+                        s.paymentMethod === "online" ? "border-accent-500 bg-accent-50" : "border-gray-200 hover:border-gray-300",
+                        B("online") && "opacity-50 cursor-not-allowed"
+                      ),
+                      children: [
+                        /* @__PURE__ */ e(
+                          "input",
+                          {
+                            type: "radio",
+                            name: "paymentMethod",
+                            value: "online",
+                            disabled: B("online"),
+                            checked: s.paymentMethod === "online",
+                            onChange: q,
+                            className: "sr-only"
+                          }
+                        ),
+                        /* @__PURE__ */ a("div", { className: "flex flex-col items-center text-center space-y-3", children: [
+                          /* @__PURE__ */ e(
+                            "div",
+                            {
+                              className: M(
+                                "p-3 rounded-full",
+                                s.paymentMethod === "online" ? "bg-accent-100 text-accent-600" : "bg-gray-100 text-gray-600"
+                              ),
+                              children: /* @__PURE__ */ e(Be, { 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: $e,
+                                alt: "Paystack",
+                                className: "h-4 w-auto mt-2 mx-auto"
+                              }
+                            )
+                          ] })
+                        ] }),
+                        s.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: M(
+                        "flex items-center justify-center relative p-4 border-2 rounded-xl cursor-pointer transition-all duration-200",
+                        s.paymentMethod === "cod" ? "border-accent-500 bg-accent-50" : "border-gray-200 hover:border-gray-300",
+                        B("cod") && "opacity-50 cursor-not-allowed"
+                      ),
+                      children: [
+                        /* @__PURE__ */ e(
+                          "input",
+                          {
+                            type: "radio",
+                            name: "paymentMethod",
+                            value: "cod",
+                            disabled: B("cod"),
+                            checked: s.paymentMethod === "cod",
+                            onChange: q,
+                            className: "sr-only"
+                          }
+                        ),
+                        /* @__PURE__ */ a("div", { className: "flex flex-col items-center text-center space-y-3", children: [
+                          /* @__PURE__ */ e(
+                            "div",
+                            {
+                              className: M(
+                                "p-3 rounded-full",
+                                s.paymentMethod === "cod" ? "bg-accent-100 text-accent-600" : "bg-gray-100 text-gray-600"
+                              ),
+                              children: /* @__PURE__ */ e(Ne, { 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" })
+                          ] })
+                        ] }),
+                        s.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" }) }) })
+                      ]
+                    }
+                  )
+                ] }),
+                v.paymentMethod && /* @__PURE__ */ e("p", { className: "text-red-600 text-sm", children: v.paymentMethod })
               ] }) })
             ]
           }
         )
-      ]
+      ] }) })
     }
   );
-  return Y ? V : Q(V, document.body);
 }
 export {
-  ue as AssistantDrawer
+  mt as Checkout
 };