@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.
- package/dist/components/Checkout.d.ts.map +1 -1
- package/dist/components/ShoppingCart.d.ts.map +1 -1
- package/dist/contexts/CartContext.d.ts.map +1 -1
- package/dist/index10.mjs +68 -64
- package/dist/index12.mjs +477 -456
- package/dist/index132.mjs +1 -1
- package/dist/index134.mjs +2 -21
- package/dist/index135.mjs +19 -54
- package/dist/index136.mjs +55 -28
- package/dist/index137.mjs +28 -6
- package/dist/index138.mjs +6 -51
- package/dist/index139.mjs +51 -5
- package/dist/index140.mjs +6 -12
- package/dist/index141.mjs +12 -7
- package/dist/index142.mjs +6 -27
- package/dist/index143.mjs +28 -2
- package/dist/index144.mjs +2 -70
- package/dist/index145.mjs +67 -164
- package/dist/index146.mjs +167 -2
- package/dist/index150.mjs +1 -1
- package/dist/index151.mjs +1 -1
- package/dist/index153.mjs +1 -1
- package/dist/index154.mjs +1 -1
- package/dist/index156.mjs +1 -1
- package/dist/index157.mjs +1 -1
- package/dist/index159.mjs +2 -2
- package/dist/index160.mjs +1 -1
- package/dist/index165.mjs +2 -2
- package/dist/index167.mjs +1 -1
- package/dist/index169.mjs +2 -2
- package/dist/index170.mjs +5 -5
- package/dist/index173.mjs +1 -1
- package/dist/index184.mjs +1 -1
- package/dist/index186.mjs +1 -1
- package/dist/index190.mjs +1 -1
- package/dist/index192.mjs +1 -1
- package/dist/index2.mjs +10 -10
- package/dist/index20.mjs +2 -2
- package/dist/index205.mjs +2 -2
- package/dist/index206.mjs +2 -2
- package/dist/index208.mjs +2 -2
- package/dist/index209.mjs +2 -2
- package/dist/index21.mjs +2 -2
- package/dist/index210.mjs +2 -2
- package/dist/index211.mjs +108 -2
- package/dist/index212.mjs +2 -2
- package/dist/index213.mjs +2 -108
- package/dist/index214.mjs +244 -2
- package/dist/index216.mjs +28 -32
- package/dist/index217.mjs +65 -2
- package/dist/index218.mjs +24 -243
- package/dist/index220.mjs +2 -33
- package/dist/index221.mjs +2 -65
- package/dist/index222.mjs +2 -25
- package/dist/index223.mjs +37 -2
- package/dist/index224.mjs +2 -2
- package/dist/index230.mjs +2 -2
- package/dist/index231.mjs +2 -2
- package/dist/index245.mjs +3 -3
- package/dist/index248.mjs +2 -2
- package/dist/index249.mjs +2 -18
- package/dist/index25.mjs +5 -0
- package/dist/index250.mjs +2 -47
- package/dist/index251.mjs +2 -2
- package/dist/index252.mjs +91 -2
- package/dist/index253.mjs +2 -2
- package/dist/index254.mjs +2 -2
- package/dist/index255.mjs +16 -89
- package/dist/index256.mjs +47 -2
- package/dist/index263.mjs +1 -1
- package/dist/index264.mjs +1 -1
- package/dist/index265.mjs +2 -2
- package/dist/index267.mjs +2 -2
- package/dist/index3.mjs +82 -82
- package/dist/index38.mjs +1 -1
- package/dist/index42.mjs +1 -1
- package/dist/index49.mjs +59 -59
- package/dist/index50.mjs +50 -50
- package/dist/index51.mjs +48 -48
- package/dist/index52.mjs +56 -56
- package/dist/index53.mjs +39 -39
- package/dist/index54.mjs +55 -55
- package/dist/index55.mjs +15 -15
- package/dist/index56.mjs +10 -10
- package/dist/index57.mjs +23 -23
- package/dist/index58.mjs +64 -64
- package/dist/index59.mjs +73 -73
- package/dist/index62.mjs +149 -19
- package/dist/index63.mjs +19 -149
- package/dist/index73.mjs +1 -1
- package/dist/index78.mjs +5 -5
- package/dist/index80.mjs +3 -3
- package/dist/index90.mjs +1 -1
- package/dist/index91.mjs +3 -3
- package/dist/providers/StorefrontProvider.d.ts.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +12 -11
- package/src/components/CartItem.stories.tsx +5 -5
- package/src/components/Checkout.stories.tsx +16 -15
- package/src/components/Checkout.tsx +93 -50
- package/src/components/ShoppingCart.stories.tsx +17 -16
- package/src/components/ShoppingCart.tsx +14 -12
- package/src/contexts/CartContext.tsx +2 -1
- package/src/providers/StorefrontProvider.tsx +4 -1
- 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
|
|
3
|
-
import { useState as
|
|
4
|
-
import { object as
|
|
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
|
|
8
|
-
import { useCart as
|
|
9
|
-
import { Modal as
|
|
10
|
-
import { FormInput as
|
|
11
|
-
import { FormSelect as
|
|
12
|
-
import { Button as
|
|
13
|
-
import { Loader2 as
|
|
14
|
-
import { formatCurrency as
|
|
15
|
-
import
|
|
16
|
-
import { usePaystackPayment as
|
|
17
|
-
const
|
|
18
|
-
firstName:
|
|
19
|
-
lastName:
|
|
20
|
-
email:
|
|
21
|
-
phone:
|
|
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
|
|
23
|
+
const q = Le(d);
|
|
24
24
|
return [
|
|
25
25
|
/^0[789]\d{9}$/
|
|
26
26
|
// 0xxxxxxxxx (11 digits total)
|
|
27
|
-
].some((
|
|
27
|
+
].some((v) => v.test(q));
|
|
28
28
|
})
|
|
29
|
-
}),
|
|
30
|
-
address:
|
|
31
|
-
city:
|
|
32
|
-
state:
|
|
33
|
-
deliveryZoneId:
|
|
34
|
-
}),
|
|
35
|
-
paymentMethod:
|
|
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
|
|
37
|
+
function et({
|
|
38
38
|
isOpen: d,
|
|
39
|
-
onClose:
|
|
40
|
-
initialData:
|
|
41
|
-
onSuccess:
|
|
42
|
-
onError:
|
|
43
|
-
submitButtonText:
|
|
44
|
-
refundPolicy:
|
|
39
|
+
onClose: q,
|
|
40
|
+
initialData: n,
|
|
41
|
+
onSuccess: v,
|
|
42
|
+
onError: o,
|
|
43
|
+
submitButtonText: ce = "Place Order",
|
|
44
|
+
refundPolicy: j
|
|
45
45
|
}) {
|
|
46
|
-
var
|
|
47
|
-
const
|
|
48
|
-
publicKey:
|
|
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
|
|
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:
|
|
58
|
+
deliveryZoneId: h || r.deliveryZoneId,
|
|
59
59
|
paymentMethod: r.paymentMethod,
|
|
60
60
|
paystackReference: t.reference
|
|
61
61
|
});
|
|
62
|
-
if ("error" in
|
|
63
|
-
const i =
|
|
64
|
-
|
|
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
|
-
|
|
68
|
-
} catch (
|
|
69
|
-
|
|
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
|
-
|
|
76
|
+
I(() => {
|
|
77
77
|
d && K();
|
|
78
78
|
}, [d, K]);
|
|
79
|
-
const { data:
|
|
80
|
-
enabled: !!((
|
|
81
|
-
}),
|
|
82
|
-
|
|
83
|
-
d || (
|
|
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,
|
|
86
|
-
firstName: (
|
|
87
|
-
lastName: (
|
|
88
|
-
email: (
|
|
89
|
-
phone: (
|
|
90
|
-
address: (
|
|
91
|
-
city: (
|
|
92
|
-
deliveryZoneId: (
|
|
93
|
-
paymentMethod: (
|
|
94
|
-
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
|
-
|
|
97
|
-
d &&
|
|
96
|
+
I(() => {
|
|
97
|
+
d && N("customer");
|
|
98
98
|
}, [d]);
|
|
99
|
-
const [
|
|
100
|
-
|
|
101
|
-
d && s && !
|
|
102
|
-
var
|
|
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: ((
|
|
109
|
+
deliveryZoneId: ((l = s.deliveryZone) == null ? void 0 : l.id) || t.deliveryZoneId
|
|
110
110
|
};
|
|
111
|
-
}),
|
|
112
|
-
}, [d, s,
|
|
113
|
-
if (
|
|
114
|
-
const t =
|
|
115
|
-
t &&
|
|
116
|
-
...
|
|
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
|
-
}, [
|
|
121
|
-
const [
|
|
122
|
-
const { name:
|
|
123
|
-
|
|
124
|
-
},
|
|
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
|
|
127
|
-
if (!
|
|
126
|
+
const l = r[t];
|
|
127
|
+
if (!l) return;
|
|
128
128
|
const i = {};
|
|
129
|
-
t === "firstName" ? i.customerFirstName =
|
|
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,
|
|
132
|
-
),
|
|
133
|
-
const
|
|
131
|
+
[r, _]
|
|
132
|
+
), F = (t) => {
|
|
133
|
+
const l = {};
|
|
134
134
|
try {
|
|
135
135
|
if (t === "customer")
|
|
136
|
-
|
|
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:
|
|
142
|
+
deliveryZoneId: h || r.deliveryZoneId || ""
|
|
143
143
|
};
|
|
144
|
-
|
|
145
|
-
} else t === "payment" &&
|
|
144
|
+
Te.validateSync(i, { abortEarly: !1 });
|
|
145
|
+
} else t === "payment" && _e.validateSync(r, { abortEarly: !1 });
|
|
146
146
|
} catch (i) {
|
|
147
|
-
i instanceof
|
|
148
|
-
|
|
147
|
+
i instanceof we && i.inner.forEach((w) => {
|
|
148
|
+
w.path && (l[w.path] = w.message);
|
|
149
149
|
});
|
|
150
150
|
}
|
|
151
|
-
return
|
|
152
|
-
},
|
|
153
|
-
|
|
154
|
-
},
|
|
155
|
-
|
|
156
|
-
},
|
|
157
|
-
if (!
|
|
158
|
-
|
|
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 (!
|
|
162
|
-
|
|
161
|
+
if (!F("delivery")) {
|
|
162
|
+
N("delivery");
|
|
163
163
|
return;
|
|
164
164
|
}
|
|
165
|
-
if (
|
|
165
|
+
if (F("payment")) {
|
|
166
166
|
if (r.paymentMethod === "online") {
|
|
167
|
-
if (!
|
|
168
|
-
|
|
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
|
-
|
|
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
|
|
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:
|
|
202
|
+
deliveryZoneId: h || r.deliveryZoneId,
|
|
203
203
|
paymentMethod: r.paymentMethod
|
|
204
204
|
});
|
|
205
205
|
if ("error" in t) {
|
|
206
|
-
const
|
|
207
|
-
|
|
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
|
-
|
|
210
|
+
T(t), V(), v == null || v(t.id);
|
|
211
211
|
} catch (t) {
|
|
212
|
-
|
|
212
|
+
o == null || o(t);
|
|
213
213
|
}
|
|
214
214
|
}
|
|
215
|
-
},
|
|
215
|
+
}, ve = {
|
|
216
216
|
customer: "Customer Information",
|
|
217
217
|
delivery: "Delivery Address",
|
|
218
218
|
payment: "Payment Method"
|
|
219
|
-
},
|
|
220
|
-
(
|
|
221
|
-
|
|
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:
|
|
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
|
-
|
|
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:
|
|
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:
|
|
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
|
-
|
|
245
|
-
|
|
244
|
+
c !== "customer" && /* @__PURE__ */ a(
|
|
245
|
+
B,
|
|
246
246
|
{
|
|
247
247
|
type: "button",
|
|
248
248
|
variant: "outline",
|
|
249
|
-
onClick:
|
|
249
|
+
onClick: fe,
|
|
250
250
|
className: "flex-1 border-gray-400",
|
|
251
251
|
size: "lg",
|
|
252
252
|
children: [
|
|
253
|
-
/* @__PURE__ */ e(
|
|
253
|
+
/* @__PURE__ */ e(ke, { className: "mr-2 h-4 w-4" }),
|
|
254
254
|
"Back"
|
|
255
255
|
]
|
|
256
256
|
}
|
|
257
257
|
),
|
|
258
|
-
|
|
259
|
-
|
|
258
|
+
c !== "payment" ? /* @__PURE__ */ a(
|
|
259
|
+
B,
|
|
260
260
|
{
|
|
261
261
|
type: "button",
|
|
262
|
-
onClick:
|
|
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(
|
|
267
|
+
/* @__PURE__ */ e(Me, { className: "ml-2 h-4 w-4" })
|
|
268
268
|
]
|
|
269
269
|
}
|
|
270
270
|
) : /* @__PURE__ */ e(
|
|
271
|
-
|
|
271
|
+
B,
|
|
272
272
|
{
|
|
273
273
|
type: "button",
|
|
274
|
-
onClick:
|
|
275
|
-
disabled:
|
|
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:
|
|
279
|
-
/* @__PURE__ */ e(
|
|
278
|
+
children: P.isPending ? /* @__PURE__ */ a(ge, { children: [
|
|
279
|
+
/* @__PURE__ */ e($, { className: "mr-2 h-4 w-4 animate-spin" }),
|
|
280
280
|
"Processing..."
|
|
281
|
-
] }) :
|
|
281
|
+
] }) : ce
|
|
282
282
|
}
|
|
283
283
|
)
|
|
284
284
|
] }),
|
|
285
|
-
|
|
286
|
-
] }),
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
/* @__PURE__ */
|
|
308
|
-
|
|
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: "
|
|
319
|
-
/* @__PURE__ */ a("div", { className: "flex justify-
|
|
320
|
-
/* @__PURE__ */ e(
|
|
321
|
-
/* @__PURE__ */ a("span", { className: "font-medium
|
|
322
|
-
|
|
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: "
|
|
328
|
-
/* @__PURE__ */
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
/* @__PURE__ */
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
/* @__PURE__ */
|
|
341
|
-
|
|
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
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
] })
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
)
|
|
353
|
-
|
|
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:
|
|
357
|
-
title:
|
|
358
|
-
footer:
|
|
359
|
+
onClose: q,
|
|
360
|
+
title: Ne,
|
|
361
|
+
footer: be,
|
|
359
362
|
size: "lg",
|
|
360
363
|
contentClassName: "p-0",
|
|
361
|
-
children:
|
|
362
|
-
"div",
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
"
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
),
|
|
370
|
-
children: [
|
|
371
|
-
/* @__PURE__ */ e(
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
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
|
-
|
|
393
|
+
k,
|
|
451
394
|
{
|
|
452
|
-
label: "
|
|
395
|
+
label: "First Name",
|
|
453
396
|
type: "text",
|
|
454
|
-
name: "
|
|
455
|
-
value: r.
|
|
456
|
-
onChange:
|
|
457
|
-
|
|
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__ */
|
|
463
|
-
|
|
406
|
+
/* @__PURE__ */ e(
|
|
407
|
+
k,
|
|
464
408
|
{
|
|
465
|
-
label: "
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
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__ */
|
|
482
|
-
|
|
420
|
+
/* @__PURE__ */ e(
|
|
421
|
+
k,
|
|
483
422
|
{
|
|
484
|
-
label: "
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
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
|
-
|
|
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
|
-
|
|
507
|
-
|
|
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
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
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
|
-
|
|
575
|
+
children: [
|
|
530
576
|
/* @__PURE__ */ e(
|
|
531
|
-
"
|
|
577
|
+
"input",
|
|
532
578
|
{
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
),
|
|
537
|
-
|
|
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
|
-
"
|
|
590
|
+
"div",
|
|
545
591
|
{
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
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
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
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
|
-
|
|
624
|
+
children: [
|
|
579
625
|
/* @__PURE__ */ e(
|
|
580
|
-
"
|
|
626
|
+
"input",
|
|
581
627
|
{
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
),
|
|
586
|
-
|
|
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(
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
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
|
-
|
|
668
|
+
et as Checkout
|
|
648
669
|
};
|