@instockng/storefront-ui 1.0.22 → 1.0.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (105) hide show
  1. package/dist/components/Checkout.d.ts.map +1 -1
  2. package/dist/components/ShoppingCart.d.ts.map +1 -1
  3. package/dist/contexts/CartContext.d.ts.map +1 -1
  4. package/dist/index10.mjs +68 -64
  5. package/dist/index12.mjs +477 -456
  6. package/dist/index132.mjs +1 -1
  7. package/dist/index134.mjs +2 -21
  8. package/dist/index135.mjs +19 -54
  9. package/dist/index136.mjs +55 -28
  10. package/dist/index137.mjs +28 -6
  11. package/dist/index138.mjs +6 -51
  12. package/dist/index139.mjs +51 -5
  13. package/dist/index140.mjs +6 -12
  14. package/dist/index141.mjs +12 -7
  15. package/dist/index142.mjs +6 -27
  16. package/dist/index143.mjs +28 -2
  17. package/dist/index144.mjs +2 -70
  18. package/dist/index145.mjs +67 -164
  19. package/dist/index146.mjs +167 -2
  20. package/dist/index150.mjs +1 -1
  21. package/dist/index151.mjs +1 -1
  22. package/dist/index153.mjs +1 -1
  23. package/dist/index154.mjs +1 -1
  24. package/dist/index156.mjs +1 -1
  25. package/dist/index157.mjs +1 -1
  26. package/dist/index159.mjs +2 -2
  27. package/dist/index160.mjs +1 -1
  28. package/dist/index165.mjs +2 -2
  29. package/dist/index167.mjs +1 -1
  30. package/dist/index169.mjs +2 -2
  31. package/dist/index170.mjs +5 -5
  32. package/dist/index173.mjs +1 -1
  33. package/dist/index184.mjs +1 -1
  34. package/dist/index186.mjs +1 -1
  35. package/dist/index190.mjs +1 -1
  36. package/dist/index192.mjs +1 -1
  37. package/dist/index2.mjs +10 -10
  38. package/dist/index20.mjs +2 -2
  39. package/dist/index205.mjs +2 -2
  40. package/dist/index206.mjs +2 -2
  41. package/dist/index208.mjs +2 -2
  42. package/dist/index209.mjs +2 -2
  43. package/dist/index21.mjs +2 -2
  44. package/dist/index210.mjs +2 -2
  45. package/dist/index211.mjs +108 -2
  46. package/dist/index212.mjs +2 -2
  47. package/dist/index213.mjs +2 -108
  48. package/dist/index214.mjs +244 -2
  49. package/dist/index216.mjs +28 -32
  50. package/dist/index217.mjs +65 -2
  51. package/dist/index218.mjs +24 -243
  52. package/dist/index220.mjs +2 -33
  53. package/dist/index221.mjs +2 -65
  54. package/dist/index222.mjs +2 -25
  55. package/dist/index223.mjs +37 -2
  56. package/dist/index224.mjs +2 -2
  57. package/dist/index230.mjs +2 -2
  58. package/dist/index231.mjs +2 -2
  59. package/dist/index245.mjs +3 -3
  60. package/dist/index248.mjs +2 -2
  61. package/dist/index249.mjs +2 -18
  62. package/dist/index25.mjs +5 -0
  63. package/dist/index250.mjs +2 -47
  64. package/dist/index251.mjs +2 -2
  65. package/dist/index252.mjs +91 -2
  66. package/dist/index253.mjs +2 -2
  67. package/dist/index254.mjs +2 -2
  68. package/dist/index255.mjs +16 -89
  69. package/dist/index256.mjs +47 -2
  70. package/dist/index263.mjs +1 -1
  71. package/dist/index264.mjs +1 -1
  72. package/dist/index265.mjs +2 -2
  73. package/dist/index267.mjs +2 -2
  74. package/dist/index3.mjs +82 -82
  75. package/dist/index38.mjs +1 -1
  76. package/dist/index42.mjs +1 -1
  77. package/dist/index49.mjs +59 -59
  78. package/dist/index50.mjs +50 -50
  79. package/dist/index51.mjs +48 -48
  80. package/dist/index52.mjs +56 -56
  81. package/dist/index53.mjs +39 -39
  82. package/dist/index54.mjs +55 -55
  83. package/dist/index55.mjs +15 -15
  84. package/dist/index56.mjs +10 -10
  85. package/dist/index57.mjs +23 -23
  86. package/dist/index58.mjs +64 -64
  87. package/dist/index59.mjs +73 -73
  88. package/dist/index62.mjs +149 -19
  89. package/dist/index63.mjs +19 -149
  90. package/dist/index73.mjs +1 -1
  91. package/dist/index78.mjs +5 -5
  92. package/dist/index80.mjs +3 -3
  93. package/dist/index90.mjs +1 -1
  94. package/dist/index91.mjs +3 -3
  95. package/dist/providers/StorefrontProvider.d.ts.map +1 -1
  96. package/dist/styles.css +1 -1
  97. package/package.json +12 -11
  98. package/src/components/CartItem.stories.tsx +5 -5
  99. package/src/components/Checkout.stories.tsx +16 -15
  100. package/src/components/Checkout.tsx +93 -50
  101. package/src/components/ShoppingCart.stories.tsx +17 -16
  102. package/src/components/ShoppingCart.tsx +14 -12
  103. package/src/contexts/CartContext.tsx +2 -1
  104. package/src/providers/StorefrontProvider.tsx +4 -1
  105. package/src/test-utils/MockCartProvider.tsx +31 -25
package/dist/index12.mjs CHANGED
@@ -1,175 +1,175 @@
1
1
  'use client';
2
- import { jsxs as a, jsx as e, Fragment as pe } from "react/jsx-runtime";
3
- import { useState as N, useEffect as q, useMemo as re, useCallback as ve } from "react";
4
- import { object as $, string as y, ValidationError as Ne } from "./index39.mjs";
2
+ import { jsxs as a, jsx as e, Fragment as ge } from "react/jsx-runtime";
3
+ import { useState as g, useEffect as I, useMemo as R, useCallback as xe } from "react";
4
+ import { object as W, string as p, ValidationError as we } from "./index39.mjs";
5
5
  import "./index20.mjs";
6
6
  import "@tanstack/react-query";
7
- import { useGetDeliveryZones as ge } from "./index35.mjs";
8
- import { useCart as be } from "./index3.mjs";
9
- import { Modal as ae } from "./index16.mjs";
10
- import { FormInput as P } from "./index17.mjs";
11
- import { FormSelect as se } from "./index18.mjs";
12
- import { Button as L } from "./index13.mjs";
13
- import { Loader2 as R, ChevronLeft as xe, ChevronRight as we, CheckCircle as Ce, Package as Pe, Mail as ke, Phone as Me, Zap as qe, Banknote as Ie, ChevronDown as Ze } from "lucide-react";
14
- import { formatCurrency as k, cn as w } from "./index19.mjs";
15
- import je from "./index40.mjs";
16
- import { usePaystackPayment as Se } from "./index41.mjs";
17
- const ze = (d) => d.replace(/\D/g, ""), Fe = $({
18
- 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"),
19
- 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"),
20
- email: y().required("Email is required").email("Please enter a valid email address"),
21
- phone: y().required("Phone number is required").test("nigerian-phone", "Please enter a valid Nigerian phone number (e.g. 0812 564 8668)", (d) => {
7
+ import { useGetDeliveryZones as Ce } from "./index35.mjs";
8
+ import { useCart as Pe } from "./index3.mjs";
9
+ import { Modal as le } from "./index16.mjs";
10
+ import { FormInput as k } from "./index17.mjs";
11
+ import { FormSelect as ne } from "./index18.mjs";
12
+ import { Button as B } from "./index13.mjs";
13
+ import { Loader2 as $, ChevronLeft as ke, ChevronRight as Me, CheckCircle as qe, Package as de, Banknote as ie, Mail as Ie, Phone as je, ChevronDown as Ze, Zap as Se } from "lucide-react";
14
+ import { formatCurrency as M, cn as C } from "./index19.mjs";
15
+ import ze from "./index40.mjs";
16
+ import { usePaystackPayment as Fe } from "./index41.mjs";
17
+ const Le = (d) => d.replace(/\D/g, ""), Be = W({
18
+ firstName: p().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"),
19
+ lastName: p().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"),
20
+ email: p().required("Email is required").email("Please enter a valid email address"),
21
+ phone: p().required("Phone number is required").test("nigerian-phone", "Please enter a valid Nigerian phone number (e.g. 0812 564 8668)", (d) => {
22
22
  if (!d) return !1;
23
- const M = ze(d);
23
+ const q = Le(d);
24
24
  return [
25
25
  /^0[789]\d{9}$/
26
26
  // 0xxxxxxxxx (11 digits total)
27
- ].some((f) => f.test(M));
27
+ ].some((v) => v.test(q));
28
28
  })
29
- }), Le = $({
30
- address: y().required("Street address is required").min(10, "Please provide a complete address"),
31
- city: y().required("City is required").min(3, "City name must be at least 3 characters"),
32
- state: y().required("State is required").test("not-empty", "State is required", (d) => !!d && d.trim() !== ""),
33
- deliveryZoneId: y().required("Delivery zone is required").test("not-empty", "Delivery zone is required", (d) => !!d && d.trim() !== "")
34
- }), Be = $({
35
- paymentMethod: y().oneOf(["cod", "online"], "Please select a payment method").required("Payment method is required")
29
+ }), Te = W({
30
+ address: p().required("Street address is required").min(10, "Please provide a complete address"),
31
+ city: p().required("City is required").min(3, "City name must be at least 3 characters"),
32
+ state: p().required("State is required").test("not-empty", "State is required", (d) => !!d && d.trim() !== ""),
33
+ deliveryZoneId: p().required("Delivery zone is required").test("not-empty", "Delivery zone is required", (d) => !!d && d.trim() !== "")
34
+ }), _e = W({
35
+ paymentMethod: p().oneOf(["cod", "online"], "Please select a payment method").required("Payment method is required")
36
36
  });
37
- function Ee({
37
+ function et({
38
38
  isOpen: d,
39
- onClose: M,
40
- initialData: l,
41
- onSuccess: f,
42
- onError: c,
43
- submitButtonText: ne = "Place Order",
44
- refundPolicy: I
39
+ onClose: q,
40
+ initialData: n,
41
+ onSuccess: v,
42
+ onError: o,
43
+ submitButtonText: ce = "Place Order",
44
+ refundPolicy: j
45
45
  }) {
46
- var J, Q, U, X, E, D, ee, te;
47
- const le = "pk_live_dfb74efb5f74d2acbc253d5ca396ab9015ef0fa7", [o, p] = N("customer"), [Z, de] = N(void 0), [g, G] = N(void 0), [u, B] = N(null), { refetch: K, isLoading: O, cart: s, updateCartMutation: T, checkoutMutation: ie, clearAndCreateNewCart: V } = be(), Y = Se({
48
- publicKey: le,
46
+ var X, E, D, ee, te, ae, re, se;
47
+ const oe = "pk_live_dfb74efb5f74d2acbc253d5ca396ab9015ef0fa7", [c, N] = g("customer"), [Z, me] = g(void 0), [h, G] = g(void 0), [y, T] = g(null), { refetch: K, isLoading: Y, cart: s, updateCartMutation: _, checkoutMutation: ue, clearAndCreateNewCart: V } = Pe(), H = Fe({
48
+ publicKey: oe,
49
49
  onSuccess: async (t) => {
50
50
  try {
51
- const n = await C.mutateAsync({
51
+ const l = await P.mutateAsync({
52
52
  firstName: r.firstName,
53
53
  lastName: r.lastName,
54
54
  email: r.email,
55
55
  phone: r.phone,
56
56
  address: r.address,
57
57
  city: r.city,
58
- deliveryZoneId: g || r.deliveryZoneId,
58
+ deliveryZoneId: h || r.deliveryZoneId,
59
59
  paymentMethod: r.paymentMethod,
60
60
  paystackReference: t.reference
61
61
  });
62
- if ("error" in n) {
63
- const i = n.error;
64
- c == null || c(new Error((i == null ? void 0 : i.message) || "Checkout failed"));
62
+ if ("error" in l) {
63
+ const i = l.error;
64
+ o == null || o(new Error((i == null ? void 0 : i.message) || "Checkout failed"));
65
65
  return;
66
66
  }
67
- B(n), V(), f == null || f(n.id);
68
- } catch (n) {
69
- c == null || c(n);
67
+ T(l), V(), v == null || v(l.id);
68
+ } catch (l) {
69
+ o == null || o(l);
70
70
  }
71
71
  },
72
72
  onClose: () => {
73
73
  console.log("Payment popup closed by user");
74
74
  }
75
75
  });
76
- q(() => {
76
+ I(() => {
77
77
  d && K();
78
78
  }, [d, K]);
79
- const { data: b } = ge(((J = s == null ? void 0 : s.brand) == null ? void 0 : J.id) || "", {
80
- enabled: !!((Q = s == null ? void 0 : s.brand) != null && Q.id)
81
- }), h = re(() => b == null ? void 0 : b.find((t) => t.id === Z), [b, Z]), C = ie;
82
- q(() => {
83
- d || (B(null), p("customer"), C.reset());
79
+ const { data: x } = Ce(((X = s == null ? void 0 : s.brand) == null ? void 0 : X.id) || "", {
80
+ enabled: !!((E = s == null ? void 0 : s.brand) != null && E.id)
81
+ }), m = R(() => x == null ? void 0 : x.find((t) => t.id === Z), [x, Z]), f = R(() => m == null ? void 0 : m.zones.find((t) => t.id === h), [m, h]), P = ue;
82
+ I(() => {
83
+ d || (T(null), N("customer"), P.reset());
84
84
  }, [d]);
85
- const [r, _] = N({
86
- firstName: (l == null ? void 0 : l.firstName) || "",
87
- lastName: (l == null ? void 0 : l.lastName) || "",
88
- email: (l == null ? void 0 : l.email) || "",
89
- phone: (l == null ? void 0 : l.phone) || "",
90
- address: (l == null ? void 0 : l.address) || "",
91
- city: (l == null ? void 0 : l.city) || "",
92
- deliveryZoneId: (l == null ? void 0 : l.deliveryZoneId) || "",
93
- paymentMethod: (l == null ? void 0 : l.paymentMethod) || "online",
94
- notes: (l == null ? void 0 : l.notes) || ""
85
+ const [r, A] = g({
86
+ firstName: (n == null ? void 0 : n.firstName) || "",
87
+ lastName: (n == null ? void 0 : n.lastName) || "",
88
+ email: (n == null ? void 0 : n.email) || "",
89
+ phone: (n == null ? void 0 : n.phone) || "",
90
+ address: (n == null ? void 0 : n.address) || "",
91
+ city: (n == null ? void 0 : n.city) || "",
92
+ deliveryZoneId: (n == null ? void 0 : n.deliveryZoneId) || "",
93
+ paymentMethod: (n == null ? void 0 : n.paymentMethod) || "online",
94
+ notes: (n == null ? void 0 : n.notes) || ""
95
95
  });
96
- q(() => {
97
- d && p("customer");
96
+ I(() => {
97
+ d && N("customer");
98
98
  }, [d]);
99
- const [H, W] = N(!1);
100
- q(() => {
101
- d && s && !l && !H && (_((t) => {
102
- var n;
99
+ const [U, J] = g(!1);
100
+ I(() => {
101
+ d && s && !n && !U && (A((t) => {
102
+ var l;
103
103
  return {
104
104
  ...t,
105
105
  firstName: s.customerFirstName || t.firstName,
106
106
  lastName: s.customerLastName || t.lastName,
107
107
  email: s.customerEmail || t.email,
108
108
  phone: s.customerPhone || t.phone,
109
- deliveryZoneId: ((n = s.deliveryZone) == null ? void 0 : n.id) || t.deliveryZoneId
109
+ deliveryZoneId: ((l = s.deliveryZone) == null ? void 0 : l.id) || t.deliveryZoneId
110
110
  };
111
- }), W(!0)), d || W(!1);
112
- }, [d, s, l, H]), q(() => {
113
- if (g) {
114
- const t = h == null ? void 0 : h.zones.find((n) => n.id === g);
115
- t && _((n) => ({
116
- ...n,
111
+ }), J(!0)), d || J(!1);
112
+ }, [d, s, n, U]), I(() => {
113
+ if (h) {
114
+ const t = m == null ? void 0 : m.zones.find((l) => l.id === h);
115
+ t && A((l) => ({
116
+ ...l,
117
117
  paymentMethod: t.allowOnline ? "online" : "cod"
118
118
  }));
119
119
  }
120
- }, [g, h]);
121
- const [m, j] = N({}), [A, ce] = N(!1), v = (t) => {
122
- const { name: n, value: i } = t.target;
123
- _((x) => ({ ...x, [n]: i })), m[n] && j((x) => ({ ...x, [n]: void 0 }));
124
- }, S = ve(
120
+ }, [h, m]);
121
+ const [u, S] = g({}), [O, he] = g(!1), b = (t) => {
122
+ const { name: l, value: i } = t.target;
123
+ A((w) => ({ ...w, [l]: i })), u[l] && S((w) => ({ ...w, [l]: void 0 }));
124
+ }, z = xe(
125
125
  (t) => {
126
- const n = r[t];
127
- if (!n) return;
126
+ const l = r[t];
127
+ if (!l) return;
128
128
  const i = {};
129
- t === "firstName" ? i.customerFirstName = n : t === "lastName" ? i.customerLastName = n : t === "email" ? i.customerEmail = n : t === "phone" && (i.customerPhone = n), T.mutate(i);
129
+ t === "firstName" ? i.customerFirstName = l : t === "lastName" ? i.customerLastName = l : t === "email" ? i.customerEmail = l : t === "phone" && (i.customerPhone = l), _.mutate(i);
130
130
  },
131
- [r, T]
132
- ), z = (t) => {
133
- const n = {};
131
+ [r, _]
132
+ ), F = (t) => {
133
+ const l = {};
134
134
  try {
135
135
  if (t === "customer")
136
- Fe.validateSync(r, { abortEarly: !1 });
136
+ Be.validateSync(r, { abortEarly: !1 });
137
137
  else if (t === "delivery") {
138
138
  const i = {
139
139
  address: r.address,
140
140
  city: r.city,
141
141
  state: Z || r.state || "",
142
- deliveryZoneId: g || r.deliveryZoneId || ""
142
+ deliveryZoneId: h || r.deliveryZoneId || ""
143
143
  };
144
- Le.validateSync(i, { abortEarly: !1 });
145
- } else t === "payment" && Be.validateSync(r, { abortEarly: !1 });
144
+ Te.validateSync(i, { abortEarly: !1 });
145
+ } else t === "payment" && _e.validateSync(r, { abortEarly: !1 });
146
146
  } catch (i) {
147
- i instanceof Ne && i.inner.forEach((x) => {
148
- x.path && (n[x.path] = x.message);
147
+ i instanceof we && i.inner.forEach((w) => {
148
+ w.path && (l[w.path] = w.message);
149
149
  });
150
150
  }
151
- return j(n), Object.keys(n).length === 0;
152
- }, oe = () => {
153
- z(o) && (o === "customer" ? p("delivery") : o === "delivery" && p("payment"));
154
- }, me = () => {
155
- o === "payment" ? p("delivery") : o === "delivery" && p("customer");
156
- }, ue = async () => {
157
- if (!z("customer")) {
158
- p("customer");
151
+ return S(l), Object.keys(l).length === 0;
152
+ }, ye = () => {
153
+ F(c) && (c === "customer" ? N("delivery") : c === "delivery" && N("payment"));
154
+ }, fe = () => {
155
+ c === "payment" ? N("delivery") : c === "delivery" && N("customer");
156
+ }, pe = async () => {
157
+ if (!F("customer")) {
158
+ N("customer");
159
159
  return;
160
160
  }
161
- if (!z("delivery")) {
162
- p("delivery");
161
+ if (!F("delivery")) {
162
+ N("delivery");
163
163
  return;
164
164
  }
165
- if (z("payment")) {
165
+ if (F("payment")) {
166
166
  if (r.paymentMethod === "online") {
167
- if (!Y.isLoaded) {
168
- c == null || c(new Error("Payment system is loading. Please try again."));
167
+ if (!H.isLoaded) {
168
+ o == null || o(new Error("Payment system is loading. Please try again."));
169
169
  return;
170
170
  }
171
171
  const t = Math.round(s.pricing.total * 100);
172
- Y.initializePayment({
172
+ H.initializePayment({
173
173
  email: r.email || (s == null ? void 0 : s.customerEmail) || "customer@example.com",
174
174
  amount: t,
175
175
  currency: "NGN",
@@ -192,457 +192,478 @@ function Ee({
192
192
  return;
193
193
  }
194
194
  try {
195
- const t = await C.mutateAsync({
195
+ const t = await P.mutateAsync({
196
196
  firstName: r.firstName,
197
197
  lastName: r.lastName,
198
198
  email: r.email,
199
199
  phone: r.phone,
200
200
  address: r.address,
201
201
  city: r.city,
202
- deliveryZoneId: g || r.deliveryZoneId,
202
+ deliveryZoneId: h || r.deliveryZoneId,
203
203
  paymentMethod: r.paymentMethod
204
204
  });
205
205
  if ("error" in t) {
206
- const n = t.error;
207
- c == null || c(new Error((n == null ? void 0 : n.message) || "Checkout failed"));
206
+ const l = t.error;
207
+ o == null || o(new Error((l == null ? void 0 : l.message) || "Checkout failed"));
208
208
  return;
209
209
  }
210
- B(t), V(), f == null || f(t.id);
210
+ T(t), V(), v == null || v(t.id);
211
211
  } catch (t) {
212
- c == null || c(t);
212
+ o == null || o(t);
213
213
  }
214
214
  }
215
- }, he = {
215
+ }, ve = {
216
216
  customer: "Customer Information",
217
217
  delivery: "Delivery Address",
218
218
  payment: "Payment Method"
219
- }, ye = re(() => he[o], [o]), fe = /* @__PURE__ */ a("div", { className: "space-y-3", children: [
220
- (o === "payment" || o === "delivery") && ((U = s == null ? void 0 : s.pricing) == null ? void 0 : U.total) && /* @__PURE__ */ a("div", { className: "text-sm text-black relative", children: [
221
- 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" }) }),
219
+ }, Ne = R(() => ve[c], [c]), be = /* @__PURE__ */ a("div", { className: "space-y-3", children: [
220
+ (c === "payment" || c === "delivery") && ((D = s == null ? void 0 : s.pricing) == null ? void 0 : D.total) && /* @__PURE__ */ a("div", { className: "text-sm text-black relative", children: [
221
+ Y && /* @__PURE__ */ e("div", { className: "absolute flex items-center justify-center inset-0 bg-white opacity-50", children: /* @__PURE__ */ e($, { className: "animate-spin text-accent-500" }) }),
222
222
  /* @__PURE__ */ a("div", { className: "flex items-center justify-between font-medium", children: [
223
223
  /* @__PURE__ */ e("span", { children: "Subtotal" }),
224
- /* @__PURE__ */ e("span", { children: k(((X = s == null ? void 0 : s.pricing) == null ? void 0 : X.subtotal) ?? 0) })
224
+ /* @__PURE__ */ e("span", { children: M(((ee = s == null ? void 0 : s.pricing) == null ? void 0 : ee.subtotal) ?? 0) })
225
225
  ] }),
226
226
  s.pricing.discount && /* @__PURE__ */ a("div", { className: "flex items-center justify-between font-medium", children: [
227
227
  /* @__PURE__ */ e("span", { children: "Discount" }),
228
228
  /* @__PURE__ */ a("span", { className: "text-green-600", children: [
229
229
  "-",
230
- k(((D = (E = s == null ? void 0 : s.pricing) == null ? void 0 : E.discount) == null ? void 0 : D.amount) ?? 0)
230
+ M(((ae = (te = s == null ? void 0 : s.pricing) == null ? void 0 : te.discount) == null ? void 0 : ae.amount) ?? 0)
231
231
  ] })
232
232
  ] }),
233
233
  /* @__PURE__ */ a("div", { className: "flex items-center justify-between font-medium", children: [
234
234
  /* @__PURE__ */ e("span", { children: "Delivery Fee" }),
235
- /* @__PURE__ */ e("span", { children: k(((ee = s == null ? void 0 : s.pricing) == null ? void 0 : ee.deliveryCharge) ?? 0) })
235
+ /* @__PURE__ */ e("span", { children: M(((re = s == null ? void 0 : s.pricing) == null ? void 0 : re.deliveryCharge) ?? 0) })
236
236
  ] }),
237
237
  /* @__PURE__ */ e("hr", { className: "border-gray-200 my-2" }),
238
238
  /* @__PURE__ */ a("div", { className: "flex items-center justify-between font-medium", children: [
239
239
  /* @__PURE__ */ e("span", { children: "Total" }),
240
- /* @__PURE__ */ e("span", { children: k(((te = s == null ? void 0 : s.pricing) == null ? void 0 : te.total) ?? 0) })
240
+ /* @__PURE__ */ e("span", { children: M(((se = s == null ? void 0 : s.pricing) == null ? void 0 : se.total) ?? 0) })
241
241
  ] })
242
242
  ] }),
243
243
  /* @__PURE__ */ a("div", { className: "flex gap-3", children: [
244
- o !== "customer" && /* @__PURE__ */ a(
245
- L,
244
+ c !== "customer" && /* @__PURE__ */ a(
245
+ B,
246
246
  {
247
247
  type: "button",
248
248
  variant: "outline",
249
- onClick: me,
249
+ onClick: fe,
250
250
  className: "flex-1 border-gray-400",
251
251
  size: "lg",
252
252
  children: [
253
- /* @__PURE__ */ e(xe, { className: "mr-2 h-4 w-4" }),
253
+ /* @__PURE__ */ e(ke, { className: "mr-2 h-4 w-4" }),
254
254
  "Back"
255
255
  ]
256
256
  }
257
257
  ),
258
- o !== "payment" ? /* @__PURE__ */ a(
259
- L,
258
+ c !== "payment" ? /* @__PURE__ */ a(
259
+ B,
260
260
  {
261
261
  type: "button",
262
- onClick: oe,
262
+ onClick: ye,
263
263
  className: "flex-1 bg-accent-500 text-white hover:bg-accent-600",
264
264
  size: "lg",
265
265
  children: [
266
266
  "Next",
267
- /* @__PURE__ */ e(we, { className: "ml-2 h-4 w-4" })
267
+ /* @__PURE__ */ e(Me, { className: "ml-2 h-4 w-4" })
268
268
  ]
269
269
  }
270
270
  ) : /* @__PURE__ */ e(
271
- L,
271
+ B,
272
272
  {
273
273
  type: "button",
274
- onClick: ue,
275
- disabled: C.isPending,
274
+ onClick: pe,
275
+ disabled: P.isPending,
276
276
  className: "flex-1 bg-accent-500 text-white hover:bg-accent-600",
277
277
  size: "lg",
278
- children: C.isPending ? /* @__PURE__ */ a(pe, { children: [
279
- /* @__PURE__ */ e(R, { className: "mr-2 h-4 w-4 animate-spin" }),
278
+ children: P.isPending ? /* @__PURE__ */ a(ge, { children: [
279
+ /* @__PURE__ */ e($, { className: "mr-2 h-4 w-4 animate-spin" }),
280
280
  "Processing..."
281
- ] }) : ne
281
+ ] }) : ce
282
282
  }
283
283
  )
284
284
  ] }),
285
- 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." })
286
- ] }), F = (t) => !(s != null && s.availablePaymentMethods.includes(t));
287
- return u ? /* @__PURE__ */ e(
288
- ae,
289
- {
290
- isOpen: d,
291
- onClose: M,
292
- title: "Order Placed Successfully!",
293
- footer: /* @__PURE__ */ e(
294
- L,
295
- {
296
- onClick: M,
297
- className: "w-full bg-accent-500 text-white hover:bg-accent-600",
298
- size: "lg",
299
- children: "Close"
300
- }
301
- ),
302
- size: "lg",
303
- contentClassName: "p-6",
304
- children: /* @__PURE__ */ a("div", { className: "text-center space-y-6", children: [
305
- /* @__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(Ce, { className: "h-12 w-12 text-green-600" }) }) }),
306
- /* @__PURE__ */ a("div", { className: "space-y-2", children: [
307
- /* @__PURE__ */ e("h3", { className: "text-2xl font-bold text-gray-900", children: "Thank You!" }),
308
- /* @__PURE__ */ e("p", { className: "text-gray-600", children: "Your order has been placed successfully." })
309
- ] }),
310
- /* @__PURE__ */ a("div", { className: "bg-gray-50 rounded-lg p-6 space-y-4", children: [
311
- /* @__PURE__ */ a("div", { className: "flex items-center justify-center space-x-2 text-gray-700", children: [
312
- /* @__PURE__ */ e(Pe, { className: "h-5 w-5" }),
313
- /* @__PURE__ */ a("span", { className: "font-medium", children: [
314
- "Order #",
315
- u.orderNumber
316
- ] })
285
+ P.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." })
286
+ ] }), L = (t) => !(s != null && s.availablePaymentMethods.includes(t));
287
+ if (y)
288
+ return /* @__PURE__ */ e(
289
+ le,
290
+ {
291
+ isOpen: d,
292
+ onClose: q,
293
+ title: "Order Placed Successfully!",
294
+ footer: /* @__PURE__ */ e(
295
+ B,
296
+ {
297
+ onClick: q,
298
+ className: "w-full bg-accent-500 text-white hover:bg-accent-600",
299
+ size: "lg",
300
+ children: "Close"
301
+ }
302
+ ),
303
+ size: "lg",
304
+ contentClassName: "p-6",
305
+ children: /* @__PURE__ */ a("div", { className: "text-center space-y-6", children: [
306
+ /* @__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(qe, { className: "h-12 w-12 text-green-600" }) }) }),
307
+ /* @__PURE__ */ a("div", { className: "space-y-2", children: [
308
+ /* @__PURE__ */ e("h3", { className: "text-2xl font-bold text-gray-900", children: "Thank You!" }),
309
+ /* @__PURE__ */ e("p", { className: "text-gray-600", children: "Your order has been placed successfully." })
317
310
  ] }),
318
- /* @__PURE__ */ a("div", { className: "border-t border-gray-200 pt-4 space-y-3", children: [
319
- /* @__PURE__ */ a("div", { className: "flex justify-between text-sm", children: [
320
- /* @__PURE__ */ e("span", { className: "text-gray-600", children: "Customer" }),
321
- /* @__PURE__ */ a("span", { className: "font-medium text-gray-900", children: [
322
- u.firstName,
323
- " ",
324
- u.lastName
311
+ /* @__PURE__ */ a("div", { className: "bg-gray-50 rounded-lg p-6 space-y-4", children: [
312
+ /* @__PURE__ */ a("div", { className: "flex items-center justify-center space-x-2 text-gray-700", children: [
313
+ /* @__PURE__ */ e(de, { className: "h-5 w-5" }),
314
+ /* @__PURE__ */ a("span", { className: "font-medium", children: [
315
+ "Order #",
316
+ y.orderNumber
325
317
  ] })
326
318
  ] }),
327
- /* @__PURE__ */ a("div", { className: "flex justify-between text-sm", children: [
328
- /* @__PURE__ */ e("span", { className: "text-gray-600", children: "Phone" }),
329
- /* @__PURE__ */ e("span", { className: "font-medium text-gray-900", children: u.phone })
330
- ] }),
331
- u.email && /* @__PURE__ */ a("div", { className: "flex justify-between text-sm", children: [
332
- /* @__PURE__ */ e("span", { className: "text-gray-600", children: "Email" }),
333
- /* @__PURE__ */ e("span", { className: "font-medium text-gray-900", children: u.email })
334
- ] }),
335
- /* @__PURE__ */ a("div", { className: "flex justify-between text-sm", children: [
336
- /* @__PURE__ */ e("span", { className: "text-gray-600", children: "Payment Method" }),
337
- /* @__PURE__ */ e("span", { className: "font-medium text-gray-900", children: u.paymentMethod === "cod" ? "Cash on Delivery" : "Online Payment" })
338
- ] }),
339
- /* @__PURE__ */ a("div", { className: "flex justify-between text-sm", children: [
340
- /* @__PURE__ */ e("span", { className: "text-gray-600", children: "Total" }),
341
- /* @__PURE__ */ e("span", { className: "font-bold text-gray-900", children: k(u.totalPrice) })
319
+ /* @__PURE__ */ a("div", { className: "border-t border-gray-200 pt-4 space-y-3", children: [
320
+ /* @__PURE__ */ a("div", { className: "flex justify-between text-sm", children: [
321
+ /* @__PURE__ */ e("span", { className: "text-gray-600", children: "Customer" }),
322
+ /* @__PURE__ */ a("span", { className: "font-medium text-gray-900", children: [
323
+ y.firstName,
324
+ " ",
325
+ y.lastName
326
+ ] })
327
+ ] }),
328
+ /* @__PURE__ */ a("div", { className: "flex justify-between text-sm", children: [
329
+ /* @__PURE__ */ e("span", { className: "text-gray-600", children: "Phone" }),
330
+ /* @__PURE__ */ e("span", { className: "font-medium text-gray-900", children: y.phone })
331
+ ] }),
332
+ y.email && /* @__PURE__ */ a("div", { className: "flex justify-between text-sm", children: [
333
+ /* @__PURE__ */ e("span", { className: "text-gray-600", children: "Email" }),
334
+ /* @__PURE__ */ e("span", { className: "font-medium text-gray-900", children: y.email })
335
+ ] }),
336
+ /* @__PURE__ */ a("div", { className: "flex justify-between text-sm", children: [
337
+ /* @__PURE__ */ e("span", { className: "text-gray-600", children: "Payment Method" }),
338
+ /* @__PURE__ */ e("span", { className: "font-medium text-gray-900", children: y.paymentMethod === "cod" ? "Cash on Delivery" : "Online Payment" })
339
+ ] }),
340
+ /* @__PURE__ */ a("div", { className: "flex justify-between text-sm", children: [
341
+ /* @__PURE__ */ e("span", { className: "text-gray-600", children: "Total" }),
342
+ /* @__PURE__ */ e("span", { className: "font-bold text-gray-900", children: M(y.totalPrice) })
343
+ ] })
342
344
  ] })
343
- ] })
344
- ] }),
345
- /* @__PURE__ */ e("div", { className: "bg-blue-50 rounded-lg p-4", children: /* @__PURE__ */ a("p", { className: "text-sm text-blue-900", children: [
346
- /* @__PURE__ */ e("span", { className: "font-semibold", children: "We'll be in touch shortly!" }),
347
- /* @__PURE__ */ e("br", {}),
348
- "Our team will contact you soon to arrange delivery and confirm your order details."
349
- ] }) })
350
- ] })
351
- }
352
- ) : /* @__PURE__ */ e(
353
- ae,
345
+ ] }),
346
+ /* @__PURE__ */ e("div", { className: "bg-blue-50 rounded-lg p-4", children: /* @__PURE__ */ a("p", { className: "text-sm text-blue-900", children: [
347
+ /* @__PURE__ */ e("span", { className: "font-semibold", children: "We'll be in touch shortly!" }),
348
+ /* @__PURE__ */ e("br", {}),
349
+ "Our team will contact you soon to arrange delivery and confirm your order details."
350
+ ] }) })
351
+ ] })
352
+ }
353
+ );
354
+ const Q = f && (c === "delivery" || c === "payment") && (f.waybillOnly || !(f != null && f.allowCOD));
355
+ return /* @__PURE__ */ e(
356
+ le,
354
357
  {
355
358
  isOpen: d,
356
- onClose: M,
357
- title: ye,
358
- footer: fe,
359
+ onClose: q,
360
+ title: Ne,
361
+ footer: be,
359
362
  size: "lg",
360
363
  contentClassName: "p-0",
361
- 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(
362
- "div",
363
- {
364
- className: w(
365
- "flex transition-transform duration-300 ease-in-out w-full",
366
- o === "customer" && "translate-x-0",
367
- o === "delivery" && "-translate-x-full",
368
- o === "payment" && "-translate-x-[200%]"
369
- ),
370
- children: [
371
- /* @__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: [
372
- /* @__PURE__ */ e(
373
- P,
374
- {
375
- label: "First Name",
376
- type: "text",
377
- name: "firstName",
378
- value: r.firstName,
379
- onChange: v,
380
- onBlur: () => S("firstName"),
381
- error: m.firstName,
382
- autoCorrect: "off",
383
- required: !0
384
- }
385
- ),
386
- /* @__PURE__ */ e(
387
- P,
388
- {
389
- label: "Last Name",
390
- type: "text",
391
- name: "lastName",
392
- value: r.lastName,
393
- onChange: v,
394
- onBlur: () => S("lastName"),
395
- error: m.lastName,
396
- autoCorrect: "off",
397
- required: !0
398
- }
399
- ),
400
- /* @__PURE__ */ e(
401
- P,
402
- {
403
- label: "Email",
404
- type: "email",
405
- name: "email",
406
- value: r.email,
407
- onChange: v,
408
- onBlur: () => S("email"),
409
- error: m.email,
410
- icon: /* @__PURE__ */ e(ke, { size: 16 }),
411
- autoCorrect: "off",
412
- required: !0
413
- }
414
- ),
415
- /* @__PURE__ */ e(
416
- P,
417
- {
418
- label: "Phone Number",
419
- type: "tel",
420
- name: "phone",
421
- value: r.phone,
422
- onChange: v,
423
- onBlur: () => S("phone"),
424
- placeholder: "e.g. 08012345678",
425
- maxLength: 18,
426
- error: m.phone,
427
- icon: /* @__PURE__ */ e(Me, { size: 16 }),
428
- autoCorrect: "off",
429
- required: !0,
430
- className: "font-semibold"
431
- }
432
- )
433
- ] }) }) }),
434
- /* @__PURE__ */ e("div", { className: "w-full min-w-full flex-shrink-0 p-4", children: /* @__PURE__ */ a("div", { className: "space-y-4", children: [
435
- /* @__PURE__ */ e(
436
- P,
437
- {
438
- label: "Street Address",
439
- type: "text",
440
- name: "address",
441
- value: r.address,
442
- onChange: v,
443
- error: m.address,
444
- autoCorrect: "off",
445
- required: !0
446
- }
447
- ),
448
- /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
364
+ children: Y ? /* @__PURE__ */ e("div", { className: "flex items-center justify-center min-h-[300px]", children: /* @__PURE__ */ e($, { 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: [
365
+ Q && /* @__PURE__ */ a("div", { className: "space-y-3 p-4 pb-0", children: [
366
+ f.waybillOnly && /* @__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: [
367
+ /* @__PURE__ */ e(de, { className: "h-5 w-5 text-amber-600 flex-shrink-0 mt-0.5" }),
368
+ /* @__PURE__ */ a("div", { className: "space-y-1", children: [
369
+ /* @__PURE__ */ e("p", { className: "text-sm font-semibold text-amber-900", children: "Waybill Delivery" }),
370
+ /* @__PURE__ */ e("p", { className: "text-sm text-amber-800", children: "We deliver orders to this location using waybill service. You'll need to pick up your order at a motor park near you." })
371
+ ] })
372
+ ] }) }),
373
+ !(f != null && f.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: [
374
+ /* @__PURE__ */ e(ie, { className: "h-5 w-5 text-blue-600 flex-shrink-0 mt-0.5" }),
375
+ /* @__PURE__ */ a("div", { className: "space-y-1", children: [
376
+ /* @__PURE__ */ e("p", { className: "text-sm font-semibold text-blue-900", children: "Cash on Delivery Unavailable" }),
377
+ /* @__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." })
378
+ ] })
379
+ ] }) })
380
+ ] }),
381
+ /* @__PURE__ */ a(
382
+ "div",
383
+ {
384
+ className: C(
385
+ "flex transition-transform duration-300 ease-in-out w-full",
386
+ c === "customer" && "translate-x-0",
387
+ c === "delivery" && "-translate-x-full",
388
+ c === "payment" && "-translate-x-[200%]"
389
+ ),
390
+ children: [
391
+ /* @__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: [
449
392
  /* @__PURE__ */ e(
450
- P,
393
+ k,
451
394
  {
452
- label: "Area",
395
+ label: "First Name",
453
396
  type: "text",
454
- name: "city",
455
- value: r.city,
456
- onChange: v,
457
- error: m.city,
397
+ name: "firstName",
398
+ value: r.firstName,
399
+ onChange: b,
400
+ onBlur: () => z("firstName"),
401
+ error: u.firstName,
458
402
  autoCorrect: "off",
459
403
  required: !0
460
404
  }
461
405
  ),
462
- /* @__PURE__ */ a(
463
- se,
406
+ /* @__PURE__ */ e(
407
+ k,
464
408
  {
465
- label: "State",
466
- name: "state",
467
- value: Z || "",
468
- onChange: (t) => {
469
- G("");
470
- const n = t.target.value;
471
- de(n || void 0), m.state && j((i) => ({ ...i, state: void 0 }));
472
- },
473
- error: m.state,
474
- required: !0,
475
- children: [
476
- /* @__PURE__ */ e("option", { disabled: !0, value: "", children: "Select State" }),
477
- b == null ? void 0 : b.map((t) => /* @__PURE__ */ e("option", { value: t.id, children: t.name }, t.id))
478
- ]
409
+ label: "Last Name",
410
+ type: "text",
411
+ name: "lastName",
412
+ value: r.lastName,
413
+ onChange: b,
414
+ onBlur: () => z("lastName"),
415
+ error: u.lastName,
416
+ autoCorrect: "off",
417
+ required: !0
479
418
  }
480
419
  ),
481
- /* @__PURE__ */ a(
482
- se,
420
+ /* @__PURE__ */ e(
421
+ k,
483
422
  {
484
- label: "Delivery Zone",
485
- value: g || "",
486
- onChange: (t) => {
487
- const n = t.target.value;
488
- G(n || void 0), m.deliveryZoneId && j((i) => ({ ...i, deliveryZoneId: void 0 })), n && T.mutate({ deliveryZoneId: n });
489
- },
490
- disabled: !h,
491
- error: m.deliveryZoneId,
423
+ label: "Email",
424
+ type: "email",
425
+ name: "email",
426
+ value: r.email,
427
+ onChange: b,
428
+ onBlur: () => z("email"),
429
+ error: u.email,
430
+ icon: /* @__PURE__ */ e(Ie, { size: 16 }),
431
+ autoCorrect: "off",
432
+ required: !0
433
+ }
434
+ ),
435
+ /* @__PURE__ */ e(
436
+ k,
437
+ {
438
+ label: "Phone Number",
439
+ type: "tel",
440
+ name: "phone",
441
+ value: r.phone,
442
+ onChange: b,
443
+ onBlur: () => z("phone"),
444
+ placeholder: "e.g. 08012345678",
445
+ maxLength: 18,
446
+ error: u.phone,
447
+ icon: /* @__PURE__ */ e(je, { size: 16 }),
448
+ autoCorrect: "off",
492
449
  required: !0,
493
- children: [
494
- /* @__PURE__ */ e("option", { disabled: !0, value: "", children: h ? "Select Delivery Zone" : "Select State First" }),
495
- h == null ? void 0 : h.zones.map((t) => /* @__PURE__ */ a("option", { value: t.id, children: [
496
- t.name,
497
- " (",
498
- k(t.deliveryCost),
499
- ")"
500
- ] }, t.id))
501
- ]
450
+ className: "font-semibold"
502
451
  }
503
452
  )
504
- ] })
505
- ] }) }),
506
- /* @__PURE__ */ e("div", { className: "w-full min-w-full flex-shrink-0 p-4", children: /* @__PURE__ */ a("div", { className: "space-y-6", children: [
507
- /* @__PURE__ */ a("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4", children: [
508
- /* @__PURE__ */ e("div", { className: "relative", children: /* @__PURE__ */ a(
509
- "label",
453
+ ] }) }) }),
454
+ /* @__PURE__ */ e("div", { className: "w-full min-w-full flex-shrink-0 p-4", children: /* @__PURE__ */ a("div", { className: "space-y-4", children: [
455
+ /* @__PURE__ */ e(
456
+ k,
510
457
  {
511
- className: w(
512
- "flex items-center justify-center relative p-4 border-2 rounded-xl cursor-pointer transition-all duration-200",
513
- r.paymentMethod === "online" ? "border-accent-500 bg-accent-50" : "border-gray-200 hover:border-gray-300",
514
- F("online") && "opacity-50 cursor-not-allowed"
515
- ),
516
- children: [
517
- /* @__PURE__ */ e(
518
- "input",
519
- {
520
- type: "radio",
521
- name: "paymentMethod",
522
- value: "online",
523
- disabled: F("online"),
524
- checked: r.paymentMethod === "online",
525
- onChange: v,
526
- className: "sr-only"
527
- }
458
+ label: "Street Address",
459
+ type: "text",
460
+ name: "address",
461
+ value: r.address,
462
+ onChange: b,
463
+ error: u.address,
464
+ autoCorrect: "off",
465
+ required: !0
466
+ }
467
+ ),
468
+ /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
469
+ /* @__PURE__ */ e(
470
+ k,
471
+ {
472
+ label: "Area",
473
+ type: "text",
474
+ name: "city",
475
+ value: r.city,
476
+ onChange: b,
477
+ error: u.city,
478
+ autoCorrect: "off",
479
+ required: !0
480
+ }
481
+ ),
482
+ /* @__PURE__ */ a(
483
+ ne,
484
+ {
485
+ label: "State",
486
+ name: "state",
487
+ value: Z || "",
488
+ onChange: (t) => {
489
+ G("");
490
+ const l = t.target.value;
491
+ me(l || void 0), u.state && S((i) => ({ ...i, state: void 0 }));
492
+ },
493
+ error: u.state,
494
+ required: !0,
495
+ children: [
496
+ /* @__PURE__ */ e("option", { disabled: !0, value: "", children: "Select State" }),
497
+ x == null ? void 0 : x.map((t) => /* @__PURE__ */ e("option", { value: t.id, children: t.name }, t.id))
498
+ ]
499
+ }
500
+ ),
501
+ /* @__PURE__ */ a(
502
+ ne,
503
+ {
504
+ label: "Delivery Zone",
505
+ value: h || "",
506
+ onChange: (t) => {
507
+ const l = t.target.value;
508
+ G(l || void 0), u.deliveryZoneId && S((i) => ({ ...i, deliveryZoneId: void 0 })), l && _.mutate({ deliveryZoneId: l });
509
+ },
510
+ disabled: !m,
511
+ error: u.deliveryZoneId,
512
+ required: !0,
513
+ children: [
514
+ /* @__PURE__ */ e("option", { disabled: !0, value: "", children: m ? "Select Delivery Zone" : "Select State First" }),
515
+ m == null ? void 0 : m.zones.map((t) => /* @__PURE__ */ a("option", { value: t.id, children: [
516
+ t.name,
517
+ " (",
518
+ M(t.deliveryCost),
519
+ ")"
520
+ ] }, t.id))
521
+ ]
522
+ }
523
+ )
524
+ ] })
525
+ ] }) }),
526
+ /* @__PURE__ */ e("div", { className: "w-full min-w-full flex-shrink-0 p-4", children: /* @__PURE__ */ a("div", { className: "space-y-6", children: [
527
+ j && /* @__PURE__ */ a("div", { className: `border border-gray-200 rounded-lg ${Q ? "mt-4" : ""}`, children: [
528
+ /* @__PURE__ */ a(
529
+ "button",
530
+ {
531
+ type: "button",
532
+ onClick: () => he(!O),
533
+ 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",
534
+ children: [
535
+ /* @__PURE__ */ e("span", { className: "text-sm font-bold text-accent-700", children: j.title || "🤔 Curious about Refunds?" }),
536
+ /* @__PURE__ */ e(
537
+ Ze,
538
+ {
539
+ size: 16,
540
+ className: C(
541
+ "transform transition-transform duration-200 text-gray-500",
542
+ O && "rotate-180"
543
+ )
544
+ }
545
+ )
546
+ ]
547
+ }
548
+ ),
549
+ /* @__PURE__ */ e(
550
+ "div",
551
+ {
552
+ className: C(
553
+ "overflow-hidden transition-all duration-300 ease-in-out",
554
+ O ? "max-h-96 opacity-100" : "max-h-0 opacity-0"
555
+ ),
556
+ 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: j.policies && /* @__PURE__ */ a("div", { children: [
557
+ /* @__PURE__ */ e("h4", { className: "font-bold text-gray-800 mb-2", children: "Our Refund Policy" }),
558
+ /* @__PURE__ */ e("ul", { className: "space-y-1", children: j.policies.map((t, l) => /* @__PURE__ */ a("li", { className: "flex items-start", children: [
559
+ /* @__PURE__ */ e("span", { className: "text-green-600 mr-2", children: "✓" }),
560
+ /* @__PURE__ */ e("span", { children: t })
561
+ ] }, l)) })
562
+ ] }) }) })
563
+ }
564
+ )
565
+ ] }),
566
+ /* @__PURE__ */ a("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4", children: [
567
+ /* @__PURE__ */ e("div", { className: "relative", children: /* @__PURE__ */ a(
568
+ "label",
569
+ {
570
+ className: C(
571
+ "flex items-center justify-center relative p-4 border-2 rounded-xl cursor-pointer transition-all duration-200",
572
+ r.paymentMethod === "online" ? "border-accent-500 bg-accent-50" : "border-gray-200 hover:border-gray-300",
573
+ L("online") && "opacity-50 cursor-not-allowed"
528
574
  ),
529
- /* @__PURE__ */ a("div", { className: "flex flex-col items-center text-center space-y-3", children: [
575
+ children: [
530
576
  /* @__PURE__ */ e(
531
- "div",
577
+ "input",
532
578
  {
533
- className: w(
534
- "p-3 rounded-full",
535
- r.paymentMethod === "online" ? "bg-accent-100 text-accent-600" : "bg-gray-100 text-gray-600"
536
- ),
537
- children: /* @__PURE__ */ e(qe, { size: 24 })
579
+ type: "radio",
580
+ name: "paymentMethod",
581
+ value: "online",
582
+ disabled: L("online"),
583
+ checked: r.paymentMethod === "online",
584
+ onChange: b,
585
+ className: "sr-only"
538
586
  }
539
587
  ),
540
- /* @__PURE__ */ a("div", { children: [
541
- /* @__PURE__ */ e("div", { className: "font-semibold text-gray-900", children: "Pay Online" }),
542
- /* @__PURE__ */ e("div", { className: "text-sm text-gray-500 mt-1", children: "Bank transfer" }),
588
+ /* @__PURE__ */ a("div", { className: "flex flex-col items-center text-center space-y-3", children: [
543
589
  /* @__PURE__ */ e(
544
- "img",
590
+ "div",
545
591
  {
546
- src: je,
547
- alt: "Paystack",
548
- className: "h-4 w-auto mt-2 mx-auto"
592
+ className: C(
593
+ "p-3 rounded-full",
594
+ r.paymentMethod === "online" ? "bg-accent-100 text-accent-600" : "bg-gray-100 text-gray-600"
595
+ ),
596
+ children: /* @__PURE__ */ e(Se, { size: 24 })
549
597
  }
550
- )
551
- ] })
552
- ] }),
553
- 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" }) }) })
554
- ]
555
- }
556
- ) }),
557
- /* @__PURE__ */ a(
558
- "label",
559
- {
560
- className: w(
561
- "flex items-center justify-center relative p-4 border-2 rounded-xl cursor-pointer transition-all duration-200",
562
- r.paymentMethod === "cod" ? "border-accent-500 bg-accent-50" : "border-gray-200 hover:border-gray-300",
563
- F("cod") && "opacity-50 cursor-not-allowed"
564
- ),
565
- children: [
566
- /* @__PURE__ */ e(
567
- "input",
568
- {
569
- type: "radio",
570
- name: "paymentMethod",
571
- value: "cod",
572
- disabled: F("cod"),
573
- checked: r.paymentMethod === "cod",
574
- onChange: v,
575
- className: "sr-only"
576
- }
598
+ ),
599
+ /* @__PURE__ */ a("div", { children: [
600
+ /* @__PURE__ */ e("div", { className: "font-semibold text-gray-900", children: "Pay Online" }),
601
+ /* @__PURE__ */ e("div", { className: "text-sm text-gray-500 mt-1", children: "Bank transfer" }),
602
+ /* @__PURE__ */ e(
603
+ "img",
604
+ {
605
+ src: ze,
606
+ alt: "Paystack",
607
+ className: "h-4 w-auto mt-2 mx-auto"
608
+ }
609
+ )
610
+ ] })
611
+ ] }),
612
+ 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" }) }) })
613
+ ]
614
+ }
615
+ ) }),
616
+ /* @__PURE__ */ a(
617
+ "label",
618
+ {
619
+ className: C(
620
+ "flex items-center justify-center relative p-4 border-2 rounded-xl cursor-pointer transition-all duration-200",
621
+ r.paymentMethod === "cod" ? "border-accent-500 bg-accent-50" : "border-gray-200 hover:border-gray-300",
622
+ L("cod") && "opacity-50 cursor-not-allowed"
577
623
  ),
578
- /* @__PURE__ */ a("div", { className: "flex flex-col items-center text-center space-y-3", children: [
624
+ children: [
579
625
  /* @__PURE__ */ e(
580
- "div",
626
+ "input",
581
627
  {
582
- className: w(
583
- "p-3 rounded-full",
584
- r.paymentMethod === "cod" ? "bg-accent-100 text-accent-600" : "bg-gray-100 text-gray-600"
585
- ),
586
- children: /* @__PURE__ */ e(Ie, { size: 24 })
628
+ type: "radio",
629
+ name: "paymentMethod",
630
+ value: "cod",
631
+ disabled: L("cod"),
632
+ checked: r.paymentMethod === "cod",
633
+ onChange: b,
634
+ className: "sr-only"
587
635
  }
588
636
  ),
589
- /* @__PURE__ */ a("div", { children: [
590
- /* @__PURE__ */ e("div", { className: "font-semibold text-gray-900", children: "Pay on Delivery" }),
591
- /* @__PURE__ */ e("div", { className: "text-sm text-gray-500 mt-1", children: "Cash when item arrives" })
592
- ] })
593
- ] }),
594
- 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" }) }) })
595
- ]
596
- }
597
- )
598
- ] }),
599
- m.paymentMethod && /* @__PURE__ */ e("p", { className: "text-red-600 text-sm", children: m.paymentMethod }),
600
- I && /* @__PURE__ */ a("div", { className: "border border-gray-200 rounded-lg", children: [
601
- /* @__PURE__ */ a(
602
- "button",
603
- {
604
- type: "button",
605
- onClick: () => ce(!A),
606
- 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",
607
- children: [
608
- /* @__PURE__ */ e("span", { className: "text-sm font-medium text-gray-700", children: I.title || "🤔 Curious about Refunds?" }),
609
- /* @__PURE__ */ e(
610
- Ze,
611
- {
612
- size: 16,
613
- className: w(
614
- "transform transition-transform duration-200 text-gray-500",
615
- A && "rotate-180"
616
- )
617
- }
618
- )
619
- ]
620
- }
621
- ),
622
- /* @__PURE__ */ e(
623
- "div",
624
- {
625
- className: w(
626
- "overflow-hidden transition-all duration-300 ease-in-out",
627
- A ? "max-h-96 opacity-100" : "max-h-0 opacity-0"
628
- ),
629
- 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: [
630
- /* @__PURE__ */ e("h4", { className: "font-bold text-gray-800 mb-2", children: "Our Refund Policy" }),
631
- /* @__PURE__ */ e("ul", { className: "space-y-1 ml-4", children: I.policies.map((t, n) => /* @__PURE__ */ a("li", { className: "flex items-start", children: [
632
- /* @__PURE__ */ e("span", { className: "text-green-600 mr-2", children: "✓" }),
633
- /* @__PURE__ */ e("span", { children: t })
634
- ] }, n)) })
635
- ] }) }) })
636
- }
637
- )
638
- ] })
639
- ] }) })
640
- ]
641
- }
642
- ) }) })
637
+ /* @__PURE__ */ a("div", { className: "flex flex-col items-center text-center space-y-3", children: [
638
+ /* @__PURE__ */ e(
639
+ "div",
640
+ {
641
+ className: C(
642
+ "p-3 rounded-full",
643
+ r.paymentMethod === "cod" ? "bg-accent-100 text-accent-600" : "bg-gray-100 text-gray-600"
644
+ ),
645
+ children: /* @__PURE__ */ e(ie, { size: 24 })
646
+ }
647
+ ),
648
+ /* @__PURE__ */ a("div", { children: [
649
+ /* @__PURE__ */ e("div", { className: "font-semibold text-gray-900", children: "Pay on Delivery" }),
650
+ /* @__PURE__ */ e("div", { className: "text-sm text-gray-500 mt-1", children: "Cash when item arrives" })
651
+ ] })
652
+ ] }),
653
+ 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" }) }) })
654
+ ]
655
+ }
656
+ )
657
+ ] }),
658
+ u.paymentMethod && /* @__PURE__ */ e("p", { className: "text-red-600 text-sm", children: u.paymentMethod })
659
+ ] }) })
660
+ ]
661
+ }
662
+ )
663
+ ] }) })
643
664
  }
644
665
  );
645
666
  }
646
667
  export {
647
- Ee as Checkout
668
+ et as Checkout
648
669
  };