@instockng/storefront-ui 1.0.0

package/dist/index10.mjs

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

package/dist/index100.mjs

@@ -0,0 +1,7 @@
+function o(e) {
+  const t = /^([-+\w]{1,25})(:?\/\/|:)/.exec(e);
+  return t && t[1] || "";
+}
+export {
+  o as default
+};