@instockng/storefront-ui 1.0.9 → 1.0.11

package/README.md

@@ -35,6 +35,32 @@ npm install react react-dom @tanstack/react-query lucide-react
 
 ### Setup
 
+#### Option A: If your project already uses Tailwind CSS (Recommended)
+
+Add storefront-ui to your Tailwind config's content array:
+
+```ts
+// tailwind.config.ts
+export default {
+  content: [
+    './app/**/*.{js,ts,jsx,tsx}',
+    './node_modules/@instockng/storefront-ui/src/**/*.{js,ts,jsx,tsx}', // Add this
+  ],
+  // ... rest of your config
+}
+```
+
+#### Option B: If your project doesn't use Tailwind CSS
+
+Import the pre-built CSS file:
+
+```tsx
+// app/layout.tsx or _app.tsx
+import '@instockng/storefront-ui/styles.css';
+```
+
+### Providers
+
 Wrap your app with providers:
 
 ```tsx

package/dist/components/Checkout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkout.d.ts","sourceRoot":"","sources":["../../src/components/Checkout.tsx"],"names":[],"mappings":"AA4FA,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,QAAQ,CAAC;AAE7C,MAAM,WAAW,gBAAgB;IAC/B,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,aAAa,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,aAAa;IAC5B,gCAAgC;IAChC,MAAM,EAAE,OAAO,CAAC;IAChB,uCAAuC;IACvC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,wBAAwB;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACxC,sCAAsC;IACtC,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,wBAAwB;IACxB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,yBAAyB;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,qCAAqC;IACrC,MAAM,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACjD,4BAA4B;IAC5B,YAAY,CAAC,EAAE;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;KACrB,CAAC;CACH;AAID,wBAAgB,QAAQ,CAAC,EACvB,MAAM,EACN,OAAO,EACP,WAAW,EACX,SAAS,EACT,OAAO,EACP,gBAAgC,EAChC,YAAY,GACb,EAAE,aAAa,2CAiyBf"}
+{"version":3,"file":"Checkout.d.ts","sourceRoot":"","sources":["../../src/components/Checkout.tsx"],"names":[],"mappings":"AA4FA,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,QAAQ,CAAC;AAE7C,MAAM,WAAW,gBAAgB;IAC/B,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,aAAa,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,aAAa;IAC5B,gCAAgC;IAChC,MAAM,EAAE,OAAO,CAAC;IAChB,uCAAuC;IACvC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,wBAAwB;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACxC,sCAAsC;IACtC,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,wBAAwB;IACxB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,yBAAyB;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,qCAAqC;IACrC,MAAM,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACjD,4BAA4B;IAC5B,YAAY,CAAC,EAAE;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;KACrB,CAAC;CACH;AAID,wBAAgB,QAAQ,CAAC,EACvB,MAAM,EACN,OAAO,EACP,WAAW,EACX,SAAS,EACT,OAAO,EACP,gBAAgC,EAChC,YAAY,GACb,EAAE,aAAa,2CA8yBf"}

package/dist/contexts/CartContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CartContext.d.ts","sourceRoot":"","sources":["../../src/contexts/CartContext.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AAEH,OAAO,EAAkD,SAAS,EAAuB,MAAM,OAAO,CAAC;AACvG,OAAO,EAGL,aAAa,EAMb,eAAe,EACf,KAAK,IAAI,EACV,MAAM,iBAAiB,CAAC;AAKzB,UAAU,gBAAgB;IACxB,wBAAwB;IACxB,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,mDAAmD;IACnD,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,oBAAoB;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,kBAAkB;IAClB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,gDAAgD;IAChD,kBAAkB,EAAE,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;IACrD,+CAA+C;IAC/C,gBAAgB,EAAE,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;IACrD,8BAA8B;IAC9B,OAAO,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1D,2BAA2B;IAC3B,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAChE,4BAA4B;IAC5B,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9C,0BAA0B;IAC1B,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/C,2BAA2B;IAC3B,cAAc,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACpC,6CAA6C;IAC7C,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,wBAAwB;IACxB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,qCAAqC;IACrC,MAAM,EAAE,OAAO,CAAC;IAChB,0BAA0B;IAC1B,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,2BAA2B;IAC3B,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,eAAO,MAAM,WAAW,kDAA+C,CAAC;AAExE,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,qCAAqC;IACrC,SAAS,EAAE,MAAM,CAAC;IAClB,wDAAwD;IACxD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kDAAkD;IAClD,iBAAiB,CAAC,EAAE,IAAI,CAAC,OAAO,4BAA4B,EAAE,iBAAiB,EAAE,QAAQ,GAAG,SAAS,CAAC,CAAC;CACxG;AAED,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,aAAa,EAAE,iBAAiB,EAAE,EAAE,iBAAiB,2CA0LxG;AAED;;GAEG;AACH,wBAAgB,OAAO,qBAMtB"}
+{"version":3,"file":"CartContext.d.ts","sourceRoot":"","sources":["../../src/contexts/CartContext.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AAEH,OAAO,EAAkD,SAAS,EAAuB,MAAM,OAAO,CAAC;AACvG,OAAO,EAGL,aAAa,EAMb,eAAe,EACf,KAAK,IAAI,EACV,MAAM,iBAAiB,CAAC;AAKzB,UAAU,gBAAgB;IACxB,wBAAwB;IACxB,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,mDAAmD;IACnD,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,oBAAoB;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,kBAAkB;IAClB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,gDAAgD;IAChD,kBAAkB,EAAE,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;IACrD,+CAA+C;IAC/C,gBAAgB,EAAE,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;IACrD,8BAA8B;IAC9B,OAAO,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1D,2BAA2B;IAC3B,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAChE,4BAA4B;IAC5B,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9C,0BAA0B;IAC1B,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/C,2BAA2B;IAC3B,cAAc,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACpC,6CAA6C;IAC7C,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,wBAAwB;IACxB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,qCAAqC;IACrC,MAAM,EAAE,OAAO,CAAC;IAChB,0BAA0B;IAC1B,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,2BAA2B;IAC3B,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,eAAO,MAAM,WAAW,kDAA+C,CAAC;AAExE,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,qCAAqC;IACrC,SAAS,EAAE,MAAM,CAAC;IAClB,wDAAwD;IACxD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kDAAkD;IAClD,iBAAiB,CAAC,EAAE,IAAI,CAAC,OAAO,4BAA4B,EAAE,iBAAiB,EAAE,QAAQ,GAAG,SAAS,CAAC,CAAC;CACxG;AAED,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,aAAa,EAAE,iBAAiB,EAAE,EAAE,iBAAiB,2CA2NxG;AAED;;GAEG;AACH,wBAAgB,OAAO,qBAMtB"}

package/dist/index10.mjs

@@ -1,72 +1,72 @@
 'use client';
-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 { jsxs as a, jsx as e, Fragment as fe } from "react/jsx-runtime";
+import { useState as N, useEffect as q, useMemo as te, useCallback as pe } from "react";
+import { object as $, string as y, ValidationError as ve } 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 { useGetDeliveryZones as Ne } from "./index32.mjs";
+import { useCart as ge } from "./index3.mjs";
+import { Modal as re } from "./index14.mjs";
 import { FormInput as P } from "./index15.mjs";
-import { FormSelect as D } from "./index16.mjs";
+import { FormSelect as ae } 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({
+import { Loader2 as R, ChevronLeft as be, ChevronRight as xe, CheckCircle as we, Package as Ce, Mail as Pe, Phone as ke, Zap as Me, Banknote as qe, ChevronDown as Ie } from "lucide-react";
+import { formatCurrency as k, cn as w } from "./index17.mjs";
+import Ze from "./index35.mjs";
+import { usePaystackPayment as je } from "./index36.mjs";
+const Se = (d) => d.replace(/\D/g, ""), ze = $({
   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);
+  phone: y().required("Phone number is required").test("nigerian-phone", "Please enter a valid Nigerian phone number (e.g. 0812 564 8668)", (d) => {
+    if (!d) return !1;
+    const M = Se(d);
     return [
       /^0[789]\d{9}$/
       // 0xxxxxxxxx (11 digits total)
     ].some((f) => f.test(M));
   })
-}), Se = R({
+}), Fe = $({
   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({
+  state: y().required("State is required").test("not-empty", "State is required", (d) => !!d && d.trim() !== ""),
+  deliveryZoneId: y().required("Delivery zone is required").test("not-empty", "Delivery zone is required", (d) => !!d && d.trim() !== "")
+}), Le = $({
   paymentMethod: y().oneOf(["cod", "online"], "Please select a payment method").required("Payment method is required")
 });
-function Qe({
-  isOpen: i,
+function Xe({
+  isOpen: d,
   onClose: M,
   initialData: l,
   onSuccess: f,
   onError: c,
-  submitButtonText: te = "Place Order",
+  submitButtonText: se = "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,
+  var W, J, Q, U, X, E, D, ee;
+  const ne = "pk_live_dfb74efb5f74d2acbc253d5ca396ab9015ef0fa7", [o, p] = N("customer"), [Z, le] = N(void 0), [g, G] = N(void 0), [u, B] = N(null), { refetch: K, isLoading: O, cart: s, updateCartMutation: T, checkoutMutation: de } = ge(), V = je({
+    publicKey: ne,
     onSuccess: async (t) => {
       try {
-        const s = await b.mutateAsync({
+        const n = await C.mutateAsync({
           firstName: r.firstName,
           lastName: r.lastName,
           email: r.email,
           phone: r.phone,
           address: r.address,
           city: r.city,
-          deliveryZoneId: N || r.deliveryZoneId,
+          deliveryZoneId: g || 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"));
+        if ("error" in n) {
+          const i = n.error;
+          c == null || c(new Error((i == null ? void 0 : i.message) || "Checkout failed"));
           return;
         }
-        B(s), f == null || f(s.id);
-      } catch (s) {
-        c == null || c(s);
+        B(n), f == null || f(n.id);
+      } catch (n) {
+        c == null || c(n);
       }
     },
     onClose: () => {
@@ -74,15 +74,15 @@ function Qe({
     }
   });
   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;
+    d && K();
+  }, [d, K]);
+  const { data: b } = Ne(((W = s == null ? void 0 : s.brand) == null ? void 0 : W.id) || "", {
+    enabled: !!((J = s == null ? void 0 : s.brand) != null && J.id)
+  }), h = te(() => b == null ? void 0 : b.find((t) => t.id === Z), [b, Z]), C = de;
   q(() => {
-    i || (B(null), p("customer"), b.reset());
-  }, [i, b]);
-  const [r, _] = w({
+    d || (B(null), p("customer"), C.reset());
+  }, [d]);
+  const [r, _] = N({
     firstName: (l == null ? void 0 : l.firstName) || "",
     lastName: (l == null ? void 0 : l.lastName) || "",
     email: (l == null ? void 0 : l.email) || "",
@@ -94,64 +94,66 @@ function Qe({
     notes: (l == null ? void 0 : l.notes) || ""
   });
   q(() => {
-    i && p("customer");
-  }, [i]), q(() => {
-    n && !l && _((t) => {
-      var s;
+    d && p("customer");
+  }, [d]);
+  const [Y, H] = N(!1);
+  q(() => {
+    d && s && !l && !Y && (_((t) => {
+      var n;
       return {
         ...t,
-        firstName: n.customerFirstName || "",
-        lastName: n.customerLastName || "",
-        email: n.customerEmail || "",
-        phone: n.customerPhone || "",
-        deliveryZoneId: ((s = n.deliveryZone) == null ? void 0 : s.id) || ""
+        firstName: s.customerFirstName || t.firstName,
+        lastName: s.customerLastName || t.lastName,
+        email: s.customerEmail || t.email,
+        phone: s.customerPhone || t.phone,
+        deliveryZoneId: ((n = s.deliveryZone) == null ? void 0 : n.id) || t.deliveryZoneId
       };
-    });
-  }, [n, l]), q(() => {
-    if (N) {
-      const t = h == null ? void 0 : h.zones.find((s) => s.id === N);
-      t && _((s) => ({
-        ...s,
+    }), H(!0)), d || H(!1);
+  }, [d, s, l, Y]), q(() => {
+    if (g) {
+      const t = h == null ? void 0 : h.zones.find((n) => n.id === g);
+      t && _((n) => ({
+        ...n,
         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(
+  }, [g, h]);
+  const [m, j] = N({}), [A, ie] = N(!1), v = (t) => {
+    const { name: n, value: i } = t.target;
+    _((x) => ({ ...x, [n]: i })), m[n] && j((x) => ({ ...x, [n]: void 0 }));
+  }, S = pe(
     (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);
+      const n = r[t];
+      if (!n) return;
+      const i = {};
+      t === "firstName" ? i.customerFirstName = n : t === "lastName" ? i.customerLastName = n : t === "email" ? i.customerEmail = n : t === "phone" && (i.customerPhone = n), T.mutate(i);
     },
     [r, T]
   ), z = (t) => {
-    const s = {};
+    const n = {};
     try {
       if (t === "customer")
-        je.validateSync(r, { abortEarly: !1 });
+        ze.validateSync(r, { abortEarly: !1 });
       else if (t === "delivery") {
-        const d = {
+        const i = {
           address: r.address,
           city: r.city,
           state: Z || r.state || "",
-          deliveryZoneId: N || r.deliveryZoneId || ""
+          deliveryZoneId: g || 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);
+        Fe.validateSync(i, { abortEarly: !1 });
+      } else t === "payment" && Le.validateSync(r, { abortEarly: !1 });
+    } catch (i) {
+      i instanceof ve && i.inner.forEach((x) => {
+        x.path && (n[x.path] = x.message);
       });
     }
-    return j(s), Object.keys(s).length === 0;
-  }, de = () => {
+    return j(n), Object.keys(n).length === 0;
+  }, ce = () => {
     z(o) && (o === "customer" ? p("delivery") : o === "delivery" && p("payment"));
-  }, ie = () => {
+  }, oe = () => {
     o === "payment" ? p("delivery") : o === "delivery" && p("customer");
-  }, ce = async () => {
+  }, me = async () => {
     if (!z("customer")) {
       p("customer");
       return;
@@ -162,17 +164,17 @@ function Qe({
     }
     if (z("payment")) {
       if (r.paymentMethod === "online") {
-        if (!G.isLoaded) {
+        if (!V.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",
+        const t = Math.round(s.pricing.total * 100);
+        V.initializePayment({
+          email: r.email || (s == null ? void 0 : s.customerEmail) || "customer@example.com",
           amount: t,
           currency: "NGN",
           metadata: {
-            cartId: n == null ? void 0 : n.id,
+            cartId: s == null ? void 0 : s.id,
             custom_fields: [
               {
                 display_name: "Customer Name",
@@ -190,19 +192,19 @@ function Qe({
         return;
       }
       try {
-        const t = await b.mutateAsync({
+        const t = await C.mutateAsync({
           firstName: r.firstName,
           lastName: r.lastName,
           email: r.email,
           phone: r.phone,
           address: r.address,
           city: r.city,
-          deliveryZoneId: N || r.deliveryZoneId,
+          deliveryZoneId: g || 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"));
+          const n = t.error;
+          c == null || c(new Error((n == null ? void 0 : n.message) || "Checkout failed"));
           return;
         }
         B(t), f == null || f(t.id);
@@ -210,31 +212,32 @@ function Qe({
         c == null || c(t);
       }
     }
-  }, oe = {
+  }, ue = {
     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: [
+  }, he = te(() => ue[o], [o]), ye = /* @__PURE__ */ a("div", { className: "space-y-3", children: [
+    (o === "payment" || o === "delivery") && ((Q = s == null ? void 0 : s.pricing) == null ? void 0 : Q.total) && /* @__PURE__ */ a("div", { className: "text-sm text-black relative", children: [
+      O && /* @__PURE__ */ e("div", { className: "absolute flex items-center justify-center inset-0 bg-white opacity-50", children: /* @__PURE__ */ e(R, { className: "animate-spin text-accent-500" }) }),
       /* @__PURE__ */ a("div", { className: "flex items-center justify-between font-medium", children: [
         /* @__PURE__ */ e("span", { children: "Subtotal" }),
-        /* @__PURE__ */ e("span", { children: k(((W = n == null ? void 0 : n.pricing) == null ? void 0 : W.subtotal) ?? 0) })
+        /* @__PURE__ */ e("span", { children: k(((U = s == null ? void 0 : s.pricing) == null ? void 0 : U.subtotal) ?? 0) })
       ] }),
-      /* @__PURE__ */ a("div", { className: "flex items-center justify-between font-medium", children: [
+      s.pricing.discount && /* @__PURE__ */ a("div", { className: "flex items-center justify-between font-medium", children: [
         /* @__PURE__ */ e("span", { children: "Discount" }),
         /* @__PURE__ */ a("span", { className: "text-green-600", children: [
           "-",
-          k(((J = (H = n == null ? void 0 : n.pricing) == null ? void 0 : H.discount) == null ? void 0 : J.amount) ?? 0)
+          k(((E = (X = s == null ? void 0 : s.pricing) == null ? void 0 : X.discount) == null ? void 0 : E.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("span", { children: k(((D = s == null ? void 0 : s.pricing) == null ? void 0 : D.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__ */ e("span", { children: k(((ee = s == null ? void 0 : s.pricing) == null ? void 0 : ee.total) ?? 0) })
       ] })
     ] }),
     /* @__PURE__ */ a("div", { className: "flex gap-3", children: [
@@ -243,11 +246,11 @@ function Qe({
         {
           type: "button",
           variant: "outline",
-          onClick: ie,
+          onClick: oe,
           className: "flex-1 border-gray-400",
           size: "lg",
           children: [
-            /* @__PURE__ */ e(Ne, { className: "mr-2 h-4 w-4" }),
+            /* @__PURE__ */ e(be, { className: "mr-2 h-4 w-4" }),
             "Back"
           ]
         }
@@ -256,35 +259,35 @@ function Qe({
         L,
         {
           type: "button",
-          onClick: de,
+          onClick: ce,
           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(xe, { className: "ml-2 h-4 w-4" })
           ]
         }
       ) : /* @__PURE__ */ e(
         L,
         {
           type: "button",
-          onClick: ce,
-          disabled: b.isPending,
+          onClick: me,
+          disabled: C.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" }),
+          children: C.isPending ? /* @__PURE__ */ a(fe, { children: [
+            /* @__PURE__ */ e(R, { className: "mr-2 h-4 w-4 animate-spin" }),
             "Processing..."
-          ] }) : te
+          ] }) : se
         }
       )
     ] }),
-    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));
+    C.isError && /* @__PURE__ */ e("div", { className: "rounded-lg bg-red-50 p-3 text-sm text-red-600", children: "Failed to place order. Please check your information and try again." })
+  ] }), F = (t) => !(s != null && s.availablePaymentMethods.includes(t));
   return u ? /* @__PURE__ */ e(
-    E,
+    re,
     {
-      isOpen: i,
+      isOpen: d,
       onClose: M,
       title: "Order Placed Successfully!",
       footer: /* @__PURE__ */ e(
@@ -299,14 +302,14 @@ function Qe({
       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__ */ 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(we, { 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__ */ e(Ce, { className: "h-5 w-5" }),
             /* @__PURE__ */ a("span", { className: "font-medium", children: [
               "Order #",
               u.orderNumber
@@ -347,18 +350,18 @@ function Qe({
       ] })
     }
   ) : /* @__PURE__ */ e(
-    E,
+    re,
     {
-      isOpen: i,
+      isOpen: d,
       onClose: M,
-      title: me,
-      footer: ue,
+      title: he,
+      footer: ye,
       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(
+      children: O ? /* @__PURE__ */ e("div", { className: "flex items-center justify-center min-h-[300px]", children: /* @__PURE__ */ e(R, { className: "h-8 w-8 animate-spin text-gray-600" }) }) : /* @__PURE__ */ e("div", { className: "w-full overflow-hidden", children: /* @__PURE__ */ e("div", { className: "relative w-full", children: /* @__PURE__ */ a(
         "div",
         {
-          className: C(
+          className: w(
             "flex transition-transform duration-300 ease-in-out w-full",
             o === "customer" && "translate-x-0",
             o === "delivery" && "-translate-x-full",
@@ -404,7 +407,7 @@ function Qe({
                   onChange: v,
                   onBlur: () => S("email"),
                   error: m.email,
-                  icon: /* @__PURE__ */ e(we, { size: 16 }),
+                  icon: /* @__PURE__ */ e(Pe, { size: 16 }),
                   autoCorrect: "off",
                   required: !0
                 }
@@ -421,7 +424,7 @@ function Qe({
                   placeholder: "e.g. 08012345678",
                   maxLength: 18,
                   error: m.phone,
-                  icon: /* @__PURE__ */ e(Ce, { size: 16 }),
+                  icon: /* @__PURE__ */ e(ke, { size: 16 }),
                   autoCorrect: "off",
                   required: !0,
                   className: "font-semibold"
@@ -457,32 +460,32 @@ function Qe({
                   }
                 ),
                 /* @__PURE__ */ a(
-                  D,
+                  ae,
                   {
                     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 }));
+                      G("");
+                      const n = t.target.value;
+                      le(n || void 0), m.state && j((i) => ({ ...i, state: void 0 }));
                     },
                     error: m.state,
                     required: !0,
                     children: [
                       /* @__PURE__ */ e("option", { disabled: !0, value: "", children: "Select State" }),
-                      g == null ? void 0 : g.map((t) => /* @__PURE__ */ e("option", { value: t.id, children: t.name }, t.id))
+                      b == null ? void 0 : b.map((t) => /* @__PURE__ */ e("option", { value: t.id, children: t.name }, t.id))
                     ]
                   }
                 ),
                 /* @__PURE__ */ a(
-                  D,
+                  ae,
                   {
                     label: "Delivery Zone",
-                    value: N || "",
+                    value: g || "",
                     onChange: (t) => {
-                      const s = t.target.value;
-                      O(s || void 0), m.deliveryZoneId && j((d) => ({ ...d, deliveryZoneId: void 0 })), s && T.mutate({ deliveryZoneId: s });
+                      const n = t.target.value;
+                      G(n || void 0), m.deliveryZoneId && j((i) => ({ ...i, deliveryZoneId: void 0 })), n && T.mutate({ deliveryZoneId: n });
                     },
                     disabled: !h,
                     error: m.deliveryZoneId,
@@ -505,7 +508,7 @@ function Qe({
                 /* @__PURE__ */ e("div", { className: "relative", children: /* @__PURE__ */ a(
                   "label",
                   {
-                    className: C(
+                    className: w(
                       "flex items-center justify-center relative p-4 border-2 rounded-xl cursor-pointer transition-all duration-200",
                       r.paymentMethod === "online" ? "border-accent-500 bg-accent-50" : "border-gray-200 hover:border-gray-300",
                       F("online") && "opacity-50 cursor-not-allowed"
@@ -527,11 +530,11 @@ function Qe({
                         /* @__PURE__ */ e(
                           "div",
                           {
-                            className: C(
+                            className: w(
                               "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 })
+                            children: /* @__PURE__ */ e(Me, { size: 24 })
                           }
                         ),
                         /* @__PURE__ */ a("div", { children: [
@@ -540,7 +543,7 @@ function Qe({
                           /* @__PURE__ */ e(
                             "img",
                             {
-                              src: qe,
+                              src: Ze,
                               alt: "Paystack",
                               className: "h-4 w-auto mt-2 mx-auto"
                             }
@@ -554,7 +557,7 @@ function Qe({
                 /* @__PURE__ */ a(
                   "label",
                   {
-                    className: C(
+                    className: w(
                       "flex items-center justify-center relative p-4 border-2 rounded-xl cursor-pointer transition-all duration-200",
                       r.paymentMethod === "cod" ? "border-accent-500 bg-accent-50" : "border-gray-200 hover:border-gray-300",
                       F("cod") && "opacity-50 cursor-not-allowed"
@@ -576,11 +579,11 @@ function Qe({
                         /* @__PURE__ */ e(
                           "div",
                           {
-                            className: C(
+                            className: w(
                               "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 })
+                            children: /* @__PURE__ */ e(qe, { size: 24 })
                           }
                         ),
                         /* @__PURE__ */ a("div", { children: [
@@ -599,15 +602,15 @@ function Qe({
                   "button",
                   {
                     type: "button",
-                    onClick: () => le(!A),
+                    onClick: () => ie(!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,
+                        Ie,
                         {
                           size: 16,
-                          className: C(
+                          className: w(
                             "transform transition-transform duration-200 text-gray-500",
                             A && "rotate-180"
                           )
@@ -619,16 +622,16 @@ function Qe({
                 /* @__PURE__ */ e(
                   "div",
                   {
-                    className: C(
+                    className: w(
                       "overflow-hidden transition-all duration-300 ease-in-out",
                       A ? "max-h-96 opacity-100" : "max-h-0 opacity-0"
                     ),
                     children: /* @__PURE__ */ e("div", { className: "px-4 pb-4 border-t border-gray-100", children: /* @__PURE__ */ e("div", { className: "text-sm text-gray-600 space-y-3 pt-4", children: I.policies && /* @__PURE__ */ a("div", { children: [
                       /* @__PURE__ */ e("h4", { className: "font-bold text-gray-800 mb-2", children: "Our Refund Policy" }),
-                      /* @__PURE__ */ e("ul", { className: "space-y-1 ml-4", children: I.policies.map((t, s) => /* @__PURE__ */ a("li", { className: "flex items-start", children: [
+                      /* @__PURE__ */ e("ul", { className: "space-y-1 ml-4", children: I.policies.map((t, n) => /* @__PURE__ */ a("li", { className: "flex items-start", children: [
                         /* @__PURE__ */ e("span", { className: "text-green-600 mr-2", children: "✓" }),
                         /* @__PURE__ */ e("span", { children: t })
-                      ] }, s)) })
+                      ] }, n)) })
                     ] }) }) })
                   }
                 )
@@ -641,5 +644,5 @@ function Qe({
   );
 }
 export {
-  Qe as Checkout
+  Xe as Checkout
 };