@instockng/storefront-ui 1.0.35 → 1.0.36
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/index13.mjs +179 -175
- package/dist/index156.mjs +1 -1
- package/dist/index158.mjs +2 -2
- package/dist/index159.mjs +5 -5
- package/dist/index162.mjs +1 -1
- package/dist/index168.mjs +1 -1
- package/dist/index169.mjs +1 -1
- package/dist/index173.mjs +1 -1
- package/dist/index175.mjs +1 -1
- package/dist/index190.mjs +2 -2
- package/dist/index192.mjs +1 -1
- package/dist/index193.mjs +1 -1
- package/dist/index219.mjs +2 -2
- package/dist/index220.mjs +2 -244
- package/dist/index221.mjs +244 -2
- package/dist/index222.mjs +2 -33
- package/dist/index223.mjs +28 -60
- package/dist/index224.mjs +60 -20
- package/dist/index225.mjs +25 -2
- package/dist/index227.mjs +2 -2
- package/dist/index228.mjs +2 -2
- package/dist/index231.mjs +2 -2
- package/dist/index234.mjs +2 -2
- package/dist/index235.mjs +2 -4
- package/dist/index236.mjs +2 -2
- package/dist/index237.mjs +4 -2
- package/dist/index253.mjs +1 -1
- package/dist/index254.mjs +1 -1
- package/dist/index258.mjs +1 -1
- package/dist/index267.mjs +2 -2
- package/dist/index269.mjs +2 -2
- package/dist/index40.mjs +1 -1
- package/dist/index44.mjs +1 -1
- package/dist/index64.mjs +149 -19
- package/dist/index65.mjs +19 -149
- package/dist/index75.mjs +1 -1
- package/package.json +1 -1
- package/src/components/Checkout.tsx +11 -1
package/dist/index13.mjs
CHANGED
|
@@ -1,55 +1,55 @@
|
|
|
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 Me } from "react/jsx-runtime";
|
|
3
|
+
import { useState as w, useEffect as Z, useMemo as G, useCallback as qe } from "react";
|
|
4
|
+
import { object as V, string as v, ValidationError as Ie } from "./index41.mjs";
|
|
5
5
|
import "./index21.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
|
|
7
|
+
import { useGetDeliveryZones as je } from "./index36.mjs";
|
|
8
|
+
import { useCart as Ze } from "./index3.mjs";
|
|
9
|
+
import { Modal as oe } from "./index17.mjs";
|
|
10
|
+
import { FormInput as q } from "./index18.mjs";
|
|
11
|
+
import { FormSelect as me } from "./index19.mjs";
|
|
12
|
+
import { Button as A } from "./index14.mjs";
|
|
13
|
+
import { Loader2 as W, ChevronLeft as Se, ChevronRight as ze, CheckCircle as Fe, Package as ue, Banknote as he, Mail as Le, Phone as Te, ChevronDown as Be, Zap as Ae } from "lucide-react";
|
|
14
|
+
import { formatCurrency as I, cn as P, getFbCookies as ye, getTikTokCookies as fe } from "./index20.mjs";
|
|
15
|
+
import _e from "./index42.mjs";
|
|
16
|
+
import { usePaystackPayment as Re } from "./index43.mjs";
|
|
17
|
+
const $e = (d) => d.replace(/\D/g, ""), Ke = V({
|
|
18
18
|
firstName: v().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
19
|
lastName: v().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
20
|
email: v().required("Email is required").email("Please enter a valid email address"),
|
|
21
21
|
phone: v().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 j = $e(d);
|
|
24
24
|
return [
|
|
25
25
|
/^0[789]\d{9}$/
|
|
26
26
|
// 0xxxxxxxxx (11 digits total)
|
|
27
|
-
].some((N) => N.test(
|
|
27
|
+
].some((N) => N.test(j));
|
|
28
28
|
})
|
|
29
|
-
}),
|
|
29
|
+
}), Oe = V({
|
|
30
30
|
address: v().required("Street address is required").min(10, "Please provide a complete address"),
|
|
31
31
|
city: v().required("City is required").min(3, "City name must be at least 3 characters"),
|
|
32
32
|
state: v().required("State is required").test("not-empty", "State is required", (d) => !!d && d.trim() !== ""),
|
|
33
33
|
deliveryZoneId: v().required("Delivery zone is required").test("not-empty", "Delivery zone is required", (d) => !!d && d.trim() !== "")
|
|
34
|
-
}),
|
|
34
|
+
}), Ge = V({
|
|
35
35
|
paymentMethod: v().oneOf(["cod", "online"], "Please select a payment method").required("Payment method is required")
|
|
36
36
|
});
|
|
37
|
-
function
|
|
37
|
+
function nt({
|
|
38
38
|
isOpen: d,
|
|
39
|
-
onClose:
|
|
39
|
+
onClose: j,
|
|
40
40
|
initialData: n,
|
|
41
41
|
onSuccess: N,
|
|
42
42
|
onError: c,
|
|
43
|
-
submitButtonText:
|
|
44
|
-
refundPolicy:
|
|
43
|
+
submitButtonText: pe = "Place Order",
|
|
44
|
+
refundPolicy: S
|
|
45
45
|
}) {
|
|
46
|
-
var
|
|
47
|
-
const [o, b] =
|
|
46
|
+
var te, ae, re, se, le, ne, de, ie, ce;
|
|
47
|
+
const [o, b] = w("customer"), [z, ve] = w(void 0), [f, Y] = w(void 0), [p, _] = w(null), { refetch: H, isLoading: U, cart: s, updateCartMutation: R, checkoutMutation: Ne, clearAndCreateNewCart: J } = Ze(), Q = (te = s == null ? void 0 : s.brand) == null ? void 0 : te.paystackPublicKey, X = Re({
|
|
48
48
|
isOpen: d,
|
|
49
|
-
publicKey:
|
|
49
|
+
publicKey: Q || "",
|
|
50
50
|
onSuccess: async (t) => {
|
|
51
51
|
try {
|
|
52
|
-
const { fbc: l, fbp: i } =
|
|
52
|
+
const { fbc: l, fbp: i } = ye(), { ttp: y, ttclid: M } = fe(), x = await k.mutateAsync({
|
|
53
53
|
firstName: r.firstName,
|
|
54
54
|
lastName: r.lastName,
|
|
55
55
|
email: r.email,
|
|
@@ -60,14 +60,16 @@ function rt({
|
|
|
60
60
|
paymentMethod: r.paymentMethod,
|
|
61
61
|
paystackReference: t.reference,
|
|
62
62
|
fbc: l,
|
|
63
|
-
fbp: i
|
|
63
|
+
fbp: i,
|
|
64
|
+
ttp: y,
|
|
65
|
+
ttclid: M
|
|
64
66
|
});
|
|
65
|
-
if ("error" in
|
|
66
|
-
const
|
|
67
|
-
c == null || c(new Error((
|
|
67
|
+
if ("error" in x) {
|
|
68
|
+
const O = x.error;
|
|
69
|
+
c == null || c(new Error((O == null ? void 0 : O.message) || "Checkout failed"));
|
|
68
70
|
return;
|
|
69
71
|
}
|
|
70
|
-
|
|
72
|
+
_(x), J(), N == null || N(x.id);
|
|
71
73
|
} catch (l) {
|
|
72
74
|
c == null || c(l);
|
|
73
75
|
}
|
|
@@ -76,16 +78,16 @@ function rt({
|
|
|
76
78
|
console.log("Payment popup closed by user");
|
|
77
79
|
}
|
|
78
80
|
});
|
|
79
|
-
|
|
80
|
-
d &&
|
|
81
|
-
}, [d,
|
|
82
|
-
const { data:
|
|
83
|
-
enabled: !!((
|
|
84
|
-
}),
|
|
85
|
-
|
|
86
|
-
d || (
|
|
81
|
+
Z(() => {
|
|
82
|
+
d && H();
|
|
83
|
+
}, [d, H]);
|
|
84
|
+
const { data: C } = je(((ae = s == null ? void 0 : s.brand) == null ? void 0 : ae.id) || "", {
|
|
85
|
+
enabled: !!((re = s == null ? void 0 : s.brand) != null && re.id)
|
|
86
|
+
}), m = G(() => C == null ? void 0 : C.find((t) => t.id === z), [C, z]), h = G(() => m == null ? void 0 : m.zones.find((t) => t.id === f), [m, f]), k = Ne;
|
|
87
|
+
Z(() => {
|
|
88
|
+
d || (_(null), b("customer"), k.reset());
|
|
87
89
|
}, [d]);
|
|
88
|
-
const [r,
|
|
90
|
+
const [r, $] = w({
|
|
89
91
|
firstName: (n == null ? void 0 : n.firstName) || "",
|
|
90
92
|
lastName: (n == null ? void 0 : n.lastName) || "",
|
|
91
93
|
email: (n == null ? void 0 : n.email) || "",
|
|
@@ -96,12 +98,12 @@ function rt({
|
|
|
96
98
|
paymentMethod: (n == null ? void 0 : n.paymentMethod) || "online",
|
|
97
99
|
notes: (n == null ? void 0 : n.notes) || ""
|
|
98
100
|
});
|
|
99
|
-
|
|
101
|
+
Z(() => {
|
|
100
102
|
d && b("customer");
|
|
101
103
|
}, [d]);
|
|
102
|
-
const [
|
|
103
|
-
|
|
104
|
-
d && s && !n && !
|
|
104
|
+
const [E, D] = w(!1);
|
|
105
|
+
Z(() => {
|
|
106
|
+
d && s && !n && !E && ($((t) => {
|
|
105
107
|
var l;
|
|
106
108
|
return {
|
|
107
109
|
...t,
|
|
@@ -111,72 +113,72 @@ function rt({
|
|
|
111
113
|
phone: s.customerPhone || t.phone,
|
|
112
114
|
deliveryZoneId: ((l = s.deliveryZone) == null ? void 0 : l.id) || t.deliveryZoneId
|
|
113
115
|
};
|
|
114
|
-
}),
|
|
115
|
-
}, [d, s, n,
|
|
116
|
+
}), D(!0)), d || D(!1);
|
|
117
|
+
}, [d, s, n, E]), Z(() => {
|
|
116
118
|
if (f) {
|
|
117
|
-
const t =
|
|
118
|
-
t &&
|
|
119
|
+
const t = m == null ? void 0 : m.zones.find((l) => l.id === f);
|
|
120
|
+
t && $((l) => ({
|
|
119
121
|
...l,
|
|
120
122
|
paymentMethod: t.allowOnline ? "online" : "cod"
|
|
121
123
|
}));
|
|
122
124
|
}
|
|
123
|
-
}, [f,
|
|
124
|
-
const [
|
|
125
|
+
}, [f, m]);
|
|
126
|
+
const [u, F] = w({}), [K, be] = w(!1), g = (t) => {
|
|
125
127
|
const { name: l, value: i } = t.target;
|
|
126
|
-
|
|
127
|
-
},
|
|
128
|
+
$((y) => ({ ...y, [l]: i })), u[l] && F((y) => ({ ...y, [l]: void 0 }));
|
|
129
|
+
}, L = qe(
|
|
128
130
|
(t) => {
|
|
129
131
|
const l = r[t];
|
|
130
132
|
if (!l) return;
|
|
131
133
|
const i = {};
|
|
132
|
-
t === "firstName" ? i.customerFirstName = l : t === "lastName" ? i.customerLastName = l : t === "email" ? i.customerEmail = l : t === "phone" && (i.customerPhone = l),
|
|
134
|
+
t === "firstName" ? i.customerFirstName = l : t === "lastName" ? i.customerLastName = l : t === "email" ? i.customerEmail = l : t === "phone" && (i.customerPhone = l), R.mutate(i);
|
|
133
135
|
},
|
|
134
|
-
[r,
|
|
135
|
-
),
|
|
136
|
+
[r, R]
|
|
137
|
+
), T = (t) => {
|
|
136
138
|
const l = {};
|
|
137
139
|
try {
|
|
138
140
|
if (t === "customer")
|
|
139
|
-
|
|
141
|
+
Ke.validateSync(r, { abortEarly: !1 });
|
|
140
142
|
else if (t === "delivery") {
|
|
141
143
|
const i = {
|
|
142
144
|
address: r.address,
|
|
143
145
|
city: r.city,
|
|
144
|
-
state:
|
|
146
|
+
state: z || r.state || "",
|
|
145
147
|
deliveryZoneId: f || r.deliveryZoneId || ""
|
|
146
148
|
};
|
|
147
|
-
|
|
148
|
-
} else t === "payment" &&
|
|
149
|
+
Oe.validateSync(i, { abortEarly: !1 });
|
|
150
|
+
} else t === "payment" && Ge.validateSync(r, { abortEarly: !1 });
|
|
149
151
|
} catch (i) {
|
|
150
|
-
i instanceof
|
|
151
|
-
|
|
152
|
+
i instanceof Ie && i.inner.forEach((y) => {
|
|
153
|
+
y.path && (l[y.path] = y.message);
|
|
152
154
|
});
|
|
153
155
|
}
|
|
154
|
-
return
|
|
155
|
-
},
|
|
156
|
-
|
|
157
|
-
},
|
|
156
|
+
return F(l), Object.keys(l).length === 0;
|
|
157
|
+
}, ge = () => {
|
|
158
|
+
T(o) && (o === "customer" ? b("delivery") : o === "delivery" && b("payment"));
|
|
159
|
+
}, xe = () => {
|
|
158
160
|
o === "payment" ? b("delivery") : o === "delivery" && b("customer");
|
|
159
|
-
},
|
|
160
|
-
if (!
|
|
161
|
+
}, we = async () => {
|
|
162
|
+
if (!T("customer")) {
|
|
161
163
|
b("customer");
|
|
162
164
|
return;
|
|
163
165
|
}
|
|
164
|
-
if (!
|
|
166
|
+
if (!T("delivery")) {
|
|
165
167
|
b("delivery");
|
|
166
168
|
return;
|
|
167
169
|
}
|
|
168
|
-
if (
|
|
170
|
+
if (T("payment")) {
|
|
169
171
|
if (r.paymentMethod === "online") {
|
|
170
|
-
if (!
|
|
172
|
+
if (!Q) {
|
|
171
173
|
c == null || c(new Error("Paystack is not configured. Please contact support."));
|
|
172
174
|
return;
|
|
173
175
|
}
|
|
174
|
-
if (!
|
|
176
|
+
if (!X.isLoaded) {
|
|
175
177
|
c == null || c(new Error("Payment system is loading. Please try again."));
|
|
176
178
|
return;
|
|
177
179
|
}
|
|
178
180
|
const t = Math.round(s.pricing.total * 100);
|
|
179
|
-
|
|
181
|
+
X.initializePayment({
|
|
180
182
|
email: r.email || (s == null ? void 0 : s.customerEmail) || "customer@example.com",
|
|
181
183
|
amount: t,
|
|
182
184
|
currency: "NGN",
|
|
@@ -199,7 +201,7 @@ function rt({
|
|
|
199
201
|
return;
|
|
200
202
|
}
|
|
201
203
|
try {
|
|
202
|
-
const { fbc: t, fbp: l } =
|
|
204
|
+
const { fbc: t, fbp: l } = ye(), { ttp: i, ttclid: y } = fe(), M = await k.mutateAsync({
|
|
203
205
|
firstName: r.firstName,
|
|
204
206
|
lastName: r.lastName,
|
|
205
207
|
email: r.email,
|
|
@@ -209,101 +211,103 @@ function rt({
|
|
|
209
211
|
deliveryZoneId: f || r.deliveryZoneId,
|
|
210
212
|
paymentMethod: r.paymentMethod,
|
|
211
213
|
fbc: t,
|
|
212
|
-
fbp: l
|
|
214
|
+
fbp: l,
|
|
215
|
+
ttp: i,
|
|
216
|
+
ttclid: y
|
|
213
217
|
});
|
|
214
|
-
if ("error" in
|
|
215
|
-
const
|
|
216
|
-
c == null || c(new Error((
|
|
218
|
+
if ("error" in M) {
|
|
219
|
+
const x = M.error;
|
|
220
|
+
c == null || c(new Error((x == null ? void 0 : x.message) || "Checkout failed"));
|
|
217
221
|
return;
|
|
218
222
|
}
|
|
219
|
-
|
|
223
|
+
_(M), J(), N == null || N(M.id);
|
|
220
224
|
} catch (t) {
|
|
221
225
|
c == null || c(t);
|
|
222
226
|
}
|
|
223
227
|
}
|
|
224
|
-
},
|
|
228
|
+
}, Ce = {
|
|
225
229
|
customer: "Customer Information",
|
|
226
230
|
delivery: "Delivery Address",
|
|
227
231
|
payment: "Payment Method"
|
|
228
|
-
},
|
|
229
|
-
(o === "payment" || o === "delivery") && ((
|
|
230
|
-
|
|
232
|
+
}, Pe = G(() => Ce[o], [o]), ke = /* @__PURE__ */ a("div", { className: "space-y-3", children: [
|
|
233
|
+
(o === "payment" || o === "delivery") && ((se = s == null ? void 0 : s.pricing) == null ? void 0 : se.total) && /* @__PURE__ */ a("div", { className: "text-sm text-black relative", children: [
|
|
234
|
+
U && /* @__PURE__ */ e("div", { className: "absolute flex items-center justify-center inset-0 bg-white opacity-50", children: /* @__PURE__ */ e(W, { className: "animate-spin text-accent-500" }) }),
|
|
231
235
|
/* @__PURE__ */ a("div", { className: "flex items-center justify-between font-medium", children: [
|
|
232
236
|
/* @__PURE__ */ e("span", { children: "Subtotal" }),
|
|
233
|
-
/* @__PURE__ */ e("span", { children:
|
|
237
|
+
/* @__PURE__ */ e("span", { children: I(((le = s == null ? void 0 : s.pricing) == null ? void 0 : le.subtotal) ?? 0) })
|
|
234
238
|
] }),
|
|
235
239
|
s.pricing.discount && /* @__PURE__ */ a("div", { className: "flex items-center justify-between font-medium", children: [
|
|
236
240
|
/* @__PURE__ */ e("span", { children: "Discount" }),
|
|
237
241
|
/* @__PURE__ */ a("span", { className: "text-green-600", children: [
|
|
238
242
|
"-",
|
|
239
|
-
|
|
243
|
+
I(((de = (ne = s == null ? void 0 : s.pricing) == null ? void 0 : ne.discount) == null ? void 0 : de.amount) ?? 0)
|
|
240
244
|
] })
|
|
241
245
|
] }),
|
|
242
246
|
/* @__PURE__ */ a("div", { className: "flex items-center justify-between font-medium", children: [
|
|
243
247
|
/* @__PURE__ */ e("span", { children: "Delivery Fee" }),
|
|
244
|
-
/* @__PURE__ */ e("span", { children:
|
|
248
|
+
/* @__PURE__ */ e("span", { children: I(((ie = s == null ? void 0 : s.pricing) == null ? void 0 : ie.deliveryCharge) ?? 0) })
|
|
245
249
|
] }),
|
|
246
250
|
/* @__PURE__ */ e("hr", { className: "border-gray-200 my-2" }),
|
|
247
251
|
/* @__PURE__ */ a("div", { className: "flex items-center justify-between font-medium", children: [
|
|
248
252
|
/* @__PURE__ */ e("span", { children: "Total" }),
|
|
249
|
-
/* @__PURE__ */ e("span", { children:
|
|
253
|
+
/* @__PURE__ */ e("span", { children: I(((ce = s == null ? void 0 : s.pricing) == null ? void 0 : ce.total) ?? 0) })
|
|
250
254
|
] })
|
|
251
255
|
] }),
|
|
252
256
|
/* @__PURE__ */ a("div", { className: "flex gap-3", children: [
|
|
253
257
|
o !== "customer" && /* @__PURE__ */ a(
|
|
254
|
-
|
|
258
|
+
A,
|
|
255
259
|
{
|
|
256
260
|
type: "button",
|
|
257
261
|
variant: "outline",
|
|
258
|
-
onClick:
|
|
262
|
+
onClick: xe,
|
|
259
263
|
className: "flex-1 border-gray-400",
|
|
260
264
|
size: "lg",
|
|
261
265
|
children: [
|
|
262
|
-
/* @__PURE__ */ e(
|
|
266
|
+
/* @__PURE__ */ e(Se, { className: "mr-2 h-4 w-4" }),
|
|
263
267
|
"Back"
|
|
264
268
|
]
|
|
265
269
|
}
|
|
266
270
|
),
|
|
267
271
|
o !== "payment" ? /* @__PURE__ */ a(
|
|
268
|
-
|
|
272
|
+
A,
|
|
269
273
|
{
|
|
270
274
|
type: "button",
|
|
271
|
-
onClick:
|
|
275
|
+
onClick: ge,
|
|
272
276
|
className: "flex-1 bg-accent-500 text-white hover:bg-accent-600",
|
|
273
277
|
size: "lg",
|
|
274
278
|
children: [
|
|
275
279
|
"Next",
|
|
276
|
-
/* @__PURE__ */ e(
|
|
280
|
+
/* @__PURE__ */ e(ze, { className: "ml-2 h-4 w-4" })
|
|
277
281
|
]
|
|
278
282
|
}
|
|
279
283
|
) : /* @__PURE__ */ e(
|
|
280
|
-
|
|
284
|
+
A,
|
|
281
285
|
{
|
|
282
286
|
type: "button",
|
|
283
|
-
onClick:
|
|
284
|
-
disabled:
|
|
287
|
+
onClick: we,
|
|
288
|
+
disabled: k.isPending,
|
|
285
289
|
className: "flex-1 bg-accent-500 text-white hover:bg-accent-600",
|
|
286
290
|
size: "lg",
|
|
287
|
-
children:
|
|
288
|
-
/* @__PURE__ */ e(
|
|
291
|
+
children: k.isPending ? /* @__PURE__ */ a(Me, { children: [
|
|
292
|
+
/* @__PURE__ */ e(W, { className: "mr-2 h-4 w-4 animate-spin" }),
|
|
289
293
|
"Processing..."
|
|
290
|
-
] }) :
|
|
294
|
+
] }) : pe
|
|
291
295
|
}
|
|
292
296
|
)
|
|
293
297
|
] }),
|
|
294
|
-
|
|
295
|
-
] }),
|
|
298
|
+
k.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." })
|
|
299
|
+
] }), B = (t) => !(s != null && s.availablePaymentMethods.includes(t));
|
|
296
300
|
if (p)
|
|
297
301
|
return /* @__PURE__ */ e(
|
|
298
|
-
|
|
302
|
+
oe,
|
|
299
303
|
{
|
|
300
304
|
isOpen: d,
|
|
301
|
-
onClose:
|
|
305
|
+
onClose: j,
|
|
302
306
|
title: "Order Placed Successfully!",
|
|
303
307
|
footer: /* @__PURE__ */ e(
|
|
304
|
-
|
|
308
|
+
A,
|
|
305
309
|
{
|
|
306
|
-
onClick:
|
|
310
|
+
onClick: j,
|
|
307
311
|
className: "w-full bg-accent-500 text-white hover:bg-accent-600",
|
|
308
312
|
size: "lg",
|
|
309
313
|
children: "Close"
|
|
@@ -312,14 +316,14 @@ function rt({
|
|
|
312
316
|
size: "lg",
|
|
313
317
|
contentClassName: "p-6",
|
|
314
318
|
children: /* @__PURE__ */ a("div", { className: "text-center space-y-6", children: [
|
|
315
|
-
/* @__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(
|
|
319
|
+
/* @__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(Fe, { className: "h-12 w-12 text-green-600" }) }) }),
|
|
316
320
|
/* @__PURE__ */ a("div", { className: "space-y-2", children: [
|
|
317
321
|
/* @__PURE__ */ e("h3", { className: "text-2xl font-bold text-gray-900", children: "Thank You!" }),
|
|
318
322
|
/* @__PURE__ */ e("p", { className: "text-gray-600", children: "Your order has been placed successfully." })
|
|
319
323
|
] }),
|
|
320
324
|
/* @__PURE__ */ a("div", { className: "bg-gray-50 rounded-lg p-6 space-y-4", children: [
|
|
321
325
|
/* @__PURE__ */ a("div", { className: "flex items-center justify-center space-x-2 text-gray-700", children: [
|
|
322
|
-
/* @__PURE__ */ e(
|
|
326
|
+
/* @__PURE__ */ e(ue, { className: "h-5 w-5" }),
|
|
323
327
|
/* @__PURE__ */ a("span", { className: "font-medium", children: [
|
|
324
328
|
"Order #",
|
|
325
329
|
p.orderNumber
|
|
@@ -348,7 +352,7 @@ function rt({
|
|
|
348
352
|
] }),
|
|
349
353
|
/* @__PURE__ */ a("div", { className: "flex justify-between text-sm", children: [
|
|
350
354
|
/* @__PURE__ */ e("span", { className: "text-gray-600", children: "Total" }),
|
|
351
|
-
/* @__PURE__ */ e("span", { className: "font-bold text-gray-900", children:
|
|
355
|
+
/* @__PURE__ */ e("span", { className: "font-bold text-gray-900", children: I(p.totalPrice) })
|
|
352
356
|
] })
|
|
353
357
|
] })
|
|
354
358
|
] }),
|
|
@@ -360,27 +364,27 @@ function rt({
|
|
|
360
364
|
] })
|
|
361
365
|
}
|
|
362
366
|
);
|
|
363
|
-
const
|
|
367
|
+
const ee = h && (o === "delivery" || o === "payment") && (h.waybillOnly || !(h != null && h.allowCOD));
|
|
364
368
|
return /* @__PURE__ */ e(
|
|
365
|
-
|
|
369
|
+
oe,
|
|
366
370
|
{
|
|
367
371
|
isOpen: d,
|
|
368
|
-
onClose:
|
|
369
|
-
title:
|
|
370
|
-
footer:
|
|
372
|
+
onClose: j,
|
|
373
|
+
title: Pe,
|
|
374
|
+
footer: ke,
|
|
371
375
|
size: "lg",
|
|
372
376
|
contentClassName: "p-0",
|
|
373
|
-
children:
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
/* @__PURE__ */ e(
|
|
377
|
+
children: U ? /* @__PURE__ */ e("div", { className: "flex items-center justify-center min-h-[300px]", children: /* @__PURE__ */ e(W, { 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: [
|
|
378
|
+
ee && /* @__PURE__ */ a("div", { className: "space-y-3 p-4 pb-0", children: [
|
|
379
|
+
h.noteTitle && h.noteContent && /* @__PURE__ */ e("div", { className: "bg-amber-50 border border-amber-200 rounded-lg p-4", children: /* @__PURE__ */ a("div", { className: "flex items-start gap-3", children: [
|
|
380
|
+
/* @__PURE__ */ e(ue, { className: "h-5 w-5 text-amber-600 flex-shrink-0 mt-0.5" }),
|
|
377
381
|
/* @__PURE__ */ a("div", { className: "space-y-1", children: [
|
|
378
|
-
/* @__PURE__ */ e("p", { className: "text-sm font-semibold text-amber-900 whitespace-pre-wrap", children:
|
|
379
|
-
/* @__PURE__ */ e("p", { className: "text-sm text-amber-800 whitespace-pre-wrap", children:
|
|
382
|
+
/* @__PURE__ */ e("p", { className: "text-sm font-semibold text-amber-900 whitespace-pre-wrap", children: h.noteTitle }),
|
|
383
|
+
/* @__PURE__ */ e("p", { className: "text-sm text-amber-800 whitespace-pre-wrap", children: h.noteContent })
|
|
380
384
|
] })
|
|
381
385
|
] }) }),
|
|
382
|
-
!(
|
|
383
|
-
/* @__PURE__ */ e(
|
|
386
|
+
!(h != null && h.allowCOD) && /* @__PURE__ */ e("div", { className: "bg-blue-50 border border-blue-200 rounded-lg p-4", children: /* @__PURE__ */ a("div", { className: "flex items-start gap-3", children: [
|
|
387
|
+
/* @__PURE__ */ e(he, { className: "h-5 w-5 text-blue-600 flex-shrink-0 mt-0.5" }),
|
|
384
388
|
/* @__PURE__ */ a("div", { className: "space-y-1", children: [
|
|
385
389
|
/* @__PURE__ */ e("p", { className: "text-sm font-semibold text-blue-900", children: "Cash on Delivery Unavailable" }),
|
|
386
390
|
/* @__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." })
|
|
@@ -390,7 +394,7 @@ function rt({
|
|
|
390
394
|
/* @__PURE__ */ a(
|
|
391
395
|
"div",
|
|
392
396
|
{
|
|
393
|
-
className:
|
|
397
|
+
className: P(
|
|
394
398
|
"flex transition-transform duration-300 ease-in-out w-full",
|
|
395
399
|
o === "customer" && "translate-x-0",
|
|
396
400
|
o === "delivery" && "-translate-x-full",
|
|
@@ -399,61 +403,61 @@ function rt({
|
|
|
399
403
|
children: [
|
|
400
404
|
/* @__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: [
|
|
401
405
|
/* @__PURE__ */ e(
|
|
402
|
-
|
|
406
|
+
q,
|
|
403
407
|
{
|
|
404
408
|
label: "First Name",
|
|
405
409
|
type: "text",
|
|
406
410
|
name: "firstName",
|
|
407
411
|
value: r.firstName,
|
|
408
412
|
onChange: g,
|
|
409
|
-
onBlur: () =>
|
|
410
|
-
error:
|
|
413
|
+
onBlur: () => L("firstName"),
|
|
414
|
+
error: u.firstName,
|
|
411
415
|
autoCorrect: "off",
|
|
412
416
|
required: !0
|
|
413
417
|
}
|
|
414
418
|
),
|
|
415
419
|
/* @__PURE__ */ e(
|
|
416
|
-
|
|
420
|
+
q,
|
|
417
421
|
{
|
|
418
422
|
label: "Last Name",
|
|
419
423
|
type: "text",
|
|
420
424
|
name: "lastName",
|
|
421
425
|
value: r.lastName,
|
|
422
426
|
onChange: g,
|
|
423
|
-
onBlur: () =>
|
|
424
|
-
error:
|
|
427
|
+
onBlur: () => L("lastName"),
|
|
428
|
+
error: u.lastName,
|
|
425
429
|
autoCorrect: "off",
|
|
426
430
|
required: !0
|
|
427
431
|
}
|
|
428
432
|
),
|
|
429
433
|
/* @__PURE__ */ e(
|
|
430
|
-
|
|
434
|
+
q,
|
|
431
435
|
{
|
|
432
436
|
label: "Email",
|
|
433
437
|
type: "email",
|
|
434
438
|
name: "email",
|
|
435
439
|
value: r.email,
|
|
436
440
|
onChange: g,
|
|
437
|
-
onBlur: () =>
|
|
438
|
-
error:
|
|
439
|
-
icon: /* @__PURE__ */ e(
|
|
441
|
+
onBlur: () => L("email"),
|
|
442
|
+
error: u.email,
|
|
443
|
+
icon: /* @__PURE__ */ e(Le, { size: 16 }),
|
|
440
444
|
autoCorrect: "off",
|
|
441
445
|
required: !0
|
|
442
446
|
}
|
|
443
447
|
),
|
|
444
448
|
/* @__PURE__ */ e(
|
|
445
|
-
|
|
449
|
+
q,
|
|
446
450
|
{
|
|
447
451
|
label: "Phone Number",
|
|
448
452
|
type: "tel",
|
|
449
453
|
name: "phone",
|
|
450
454
|
value: r.phone,
|
|
451
455
|
onChange: g,
|
|
452
|
-
onBlur: () =>
|
|
456
|
+
onBlur: () => L("phone"),
|
|
453
457
|
placeholder: "e.g. 08012345678",
|
|
454
458
|
maxLength: 18,
|
|
455
|
-
error:
|
|
456
|
-
icon: /* @__PURE__ */ e(
|
|
459
|
+
error: u.phone,
|
|
460
|
+
icon: /* @__PURE__ */ e(Te, { size: 16 }),
|
|
457
461
|
autoCorrect: "off",
|
|
458
462
|
required: !0,
|
|
459
463
|
className: "font-semibold"
|
|
@@ -462,69 +466,69 @@ function rt({
|
|
|
462
466
|
] }) }) }),
|
|
463
467
|
/* @__PURE__ */ e("div", { className: "w-full min-w-full flex-shrink-0 p-4", children: /* @__PURE__ */ a("div", { className: "space-y-4", children: [
|
|
464
468
|
/* @__PURE__ */ e(
|
|
465
|
-
|
|
469
|
+
q,
|
|
466
470
|
{
|
|
467
471
|
label: "Street Address",
|
|
468
472
|
type: "text",
|
|
469
473
|
name: "address",
|
|
470
474
|
value: r.address,
|
|
471
475
|
onChange: g,
|
|
472
|
-
error:
|
|
476
|
+
error: u.address,
|
|
473
477
|
autoCorrect: "off",
|
|
474
478
|
required: !0
|
|
475
479
|
}
|
|
476
480
|
),
|
|
477
481
|
/* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
|
|
478
482
|
/* @__PURE__ */ e(
|
|
479
|
-
|
|
483
|
+
q,
|
|
480
484
|
{
|
|
481
485
|
label: "Area",
|
|
482
486
|
type: "text",
|
|
483
487
|
name: "city",
|
|
484
488
|
value: r.city,
|
|
485
489
|
onChange: g,
|
|
486
|
-
error:
|
|
490
|
+
error: u.city,
|
|
487
491
|
autoCorrect: "off",
|
|
488
492
|
required: !0
|
|
489
493
|
}
|
|
490
494
|
),
|
|
491
495
|
/* @__PURE__ */ a(
|
|
492
|
-
|
|
496
|
+
me,
|
|
493
497
|
{
|
|
494
498
|
label: "State",
|
|
495
499
|
name: "state",
|
|
496
|
-
value:
|
|
500
|
+
value: z || "",
|
|
497
501
|
onChange: (t) => {
|
|
498
|
-
|
|
502
|
+
Y("");
|
|
499
503
|
const l = t.target.value;
|
|
500
|
-
|
|
504
|
+
ve(l || void 0), u.state && F((i) => ({ ...i, state: void 0 }));
|
|
501
505
|
},
|
|
502
|
-
error:
|
|
506
|
+
error: u.state,
|
|
503
507
|
required: !0,
|
|
504
508
|
children: [
|
|
505
509
|
/* @__PURE__ */ e("option", { disabled: !0, value: "", children: "Select State" }),
|
|
506
|
-
|
|
510
|
+
C == null ? void 0 : C.map((t) => /* @__PURE__ */ e("option", { value: t.id, children: t.name }, t.id))
|
|
507
511
|
]
|
|
508
512
|
}
|
|
509
513
|
),
|
|
510
514
|
/* @__PURE__ */ a(
|
|
511
|
-
|
|
515
|
+
me,
|
|
512
516
|
{
|
|
513
517
|
label: "Delivery Zone",
|
|
514
518
|
value: f || "",
|
|
515
519
|
onChange: (t) => {
|
|
516
520
|
const l = t.target.value;
|
|
517
|
-
|
|
521
|
+
Y(l || void 0), u.deliveryZoneId && F((i) => ({ ...i, deliveryZoneId: void 0 })), l && R.mutate({ deliveryZoneId: l });
|
|
518
522
|
},
|
|
519
|
-
disabled: !
|
|
520
|
-
error:
|
|
523
|
+
disabled: !m,
|
|
524
|
+
error: u.deliveryZoneId,
|
|
521
525
|
required: !0,
|
|
522
526
|
children: [
|
|
523
|
-
/* @__PURE__ */ e("option", { disabled: !0, value: "", children:
|
|
524
|
-
|
|
527
|
+
/* @__PURE__ */ e("option", { disabled: !0, value: "", children: m ? "Select Delivery Zone" : "Select State First" }),
|
|
528
|
+
m == null ? void 0 : m.zones.map((t) => /* @__PURE__ */ a("option", { value: t.id, children: [
|
|
525
529
|
t.name,
|
|
526
530
|
" (",
|
|
527
|
-
|
|
531
|
+
I(t.deliveryCost),
|
|
528
532
|
")"
|
|
529
533
|
] }, t.id))
|
|
530
534
|
]
|
|
@@ -533,22 +537,22 @@ function rt({
|
|
|
533
537
|
] })
|
|
534
538
|
] }) }),
|
|
535
539
|
/* @__PURE__ */ e("div", { className: "w-full min-w-full flex-shrink-0 p-4", children: /* @__PURE__ */ a("div", { className: "space-y-6", children: [
|
|
536
|
-
|
|
540
|
+
S && /* @__PURE__ */ a("div", { className: `border border-gray-200 rounded-lg ${ee ? "mt-4" : ""}`, children: [
|
|
537
541
|
/* @__PURE__ */ a(
|
|
538
542
|
"button",
|
|
539
543
|
{
|
|
540
544
|
type: "button",
|
|
541
|
-
onClick: () =>
|
|
545
|
+
onClick: () => be(!K),
|
|
542
546
|
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",
|
|
543
547
|
children: [
|
|
544
|
-
/* @__PURE__ */ e("span", { className: "text-sm font-bold text-accent-700", children:
|
|
548
|
+
/* @__PURE__ */ e("span", { className: "text-sm font-bold text-accent-700", children: S.title || "🤔 Curious about Refunds?" }),
|
|
545
549
|
/* @__PURE__ */ e(
|
|
546
|
-
|
|
550
|
+
Be,
|
|
547
551
|
{
|
|
548
552
|
size: 16,
|
|
549
|
-
className:
|
|
553
|
+
className: P(
|
|
550
554
|
"transform transition-transform duration-200 text-gray-500",
|
|
551
|
-
|
|
555
|
+
K && "rotate-180"
|
|
552
556
|
)
|
|
553
557
|
}
|
|
554
558
|
)
|
|
@@ -558,13 +562,13 @@ function rt({
|
|
|
558
562
|
/* @__PURE__ */ e(
|
|
559
563
|
"div",
|
|
560
564
|
{
|
|
561
|
-
className:
|
|
565
|
+
className: P(
|
|
562
566
|
"overflow-hidden transition-all duration-300 ease-in-out",
|
|
563
|
-
|
|
567
|
+
K ? "max-h-96 opacity-100" : "max-h-0 opacity-0"
|
|
564
568
|
),
|
|
565
|
-
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:
|
|
569
|
+
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: S.policies && /* @__PURE__ */ a("div", { children: [
|
|
566
570
|
/* @__PURE__ */ e("h4", { className: "font-bold text-gray-800 mb-2", children: "Our Refund Policy" }),
|
|
567
|
-
/* @__PURE__ */ e("ul", { className: "space-y-1", children:
|
|
571
|
+
/* @__PURE__ */ e("ul", { className: "space-y-1", children: S.policies.map((t, l) => /* @__PURE__ */ a("li", { className: "flex items-start", children: [
|
|
568
572
|
/* @__PURE__ */ e("span", { className: "text-green-600 mr-2", children: "✓" }),
|
|
569
573
|
/* @__PURE__ */ e("span", { children: t })
|
|
570
574
|
] }, l)) })
|
|
@@ -576,10 +580,10 @@ function rt({
|
|
|
576
580
|
/* @__PURE__ */ e("div", { className: "relative", children: /* @__PURE__ */ a(
|
|
577
581
|
"label",
|
|
578
582
|
{
|
|
579
|
-
className:
|
|
583
|
+
className: P(
|
|
580
584
|
"flex items-center justify-center relative p-4 border-2 rounded-xl cursor-pointer transition-all duration-200",
|
|
581
585
|
r.paymentMethod === "online" ? "border-accent-500 bg-accent-50" : "border-gray-200 hover:border-gray-300",
|
|
582
|
-
|
|
586
|
+
B("online") && "opacity-50 cursor-not-allowed"
|
|
583
587
|
),
|
|
584
588
|
children: [
|
|
585
589
|
/* @__PURE__ */ e(
|
|
@@ -588,7 +592,7 @@ function rt({
|
|
|
588
592
|
type: "radio",
|
|
589
593
|
name: "paymentMethod",
|
|
590
594
|
value: "online",
|
|
591
|
-
disabled:
|
|
595
|
+
disabled: B("online"),
|
|
592
596
|
checked: r.paymentMethod === "online",
|
|
593
597
|
onChange: g,
|
|
594
598
|
className: "sr-only"
|
|
@@ -598,11 +602,11 @@ function rt({
|
|
|
598
602
|
/* @__PURE__ */ e(
|
|
599
603
|
"div",
|
|
600
604
|
{
|
|
601
|
-
className:
|
|
605
|
+
className: P(
|
|
602
606
|
"p-3 rounded-full",
|
|
603
607
|
r.paymentMethod === "online" ? "bg-accent-100 text-accent-600" : "bg-gray-100 text-gray-600"
|
|
604
608
|
),
|
|
605
|
-
children: /* @__PURE__ */ e(
|
|
609
|
+
children: /* @__PURE__ */ e(Ae, { size: 24 })
|
|
606
610
|
}
|
|
607
611
|
),
|
|
608
612
|
/* @__PURE__ */ a("div", { children: [
|
|
@@ -611,7 +615,7 @@ function rt({
|
|
|
611
615
|
/* @__PURE__ */ e(
|
|
612
616
|
"img",
|
|
613
617
|
{
|
|
614
|
-
src:
|
|
618
|
+
src: _e,
|
|
615
619
|
alt: "Paystack",
|
|
616
620
|
className: "h-4 w-auto mt-2 mx-auto"
|
|
617
621
|
}
|
|
@@ -625,10 +629,10 @@ function rt({
|
|
|
625
629
|
/* @__PURE__ */ a(
|
|
626
630
|
"label",
|
|
627
631
|
{
|
|
628
|
-
className:
|
|
632
|
+
className: P(
|
|
629
633
|
"flex items-center justify-center relative p-4 border-2 rounded-xl cursor-pointer transition-all duration-200",
|
|
630
634
|
r.paymentMethod === "cod" ? "border-accent-500 bg-accent-50" : "border-gray-200 hover:border-gray-300",
|
|
631
|
-
|
|
635
|
+
B("cod") && "opacity-50 cursor-not-allowed"
|
|
632
636
|
),
|
|
633
637
|
children: [
|
|
634
638
|
/* @__PURE__ */ e(
|
|
@@ -637,7 +641,7 @@ function rt({
|
|
|
637
641
|
type: "radio",
|
|
638
642
|
name: "paymentMethod",
|
|
639
643
|
value: "cod",
|
|
640
|
-
disabled:
|
|
644
|
+
disabled: B("cod"),
|
|
641
645
|
checked: r.paymentMethod === "cod",
|
|
642
646
|
onChange: g,
|
|
643
647
|
className: "sr-only"
|
|
@@ -647,11 +651,11 @@ function rt({
|
|
|
647
651
|
/* @__PURE__ */ e(
|
|
648
652
|
"div",
|
|
649
653
|
{
|
|
650
|
-
className:
|
|
654
|
+
className: P(
|
|
651
655
|
"p-3 rounded-full",
|
|
652
656
|
r.paymentMethod === "cod" ? "bg-accent-100 text-accent-600" : "bg-gray-100 text-gray-600"
|
|
653
657
|
),
|
|
654
|
-
children: /* @__PURE__ */ e(
|
|
658
|
+
children: /* @__PURE__ */ e(he, { size: 24 })
|
|
655
659
|
}
|
|
656
660
|
),
|
|
657
661
|
/* @__PURE__ */ a("div", { children: [
|
|
@@ -664,7 +668,7 @@ function rt({
|
|
|
664
668
|
}
|
|
665
669
|
)
|
|
666
670
|
] }),
|
|
667
|
-
|
|
671
|
+
u.paymentMethod && /* @__PURE__ */ e("p", { className: "text-red-600 text-sm", children: u.paymentMethod })
|
|
668
672
|
] }) })
|
|
669
673
|
]
|
|
670
674
|
}
|
|
@@ -674,5 +678,5 @@ function rt({
|
|
|
674
678
|
);
|
|
675
679
|
}
|
|
676
680
|
export {
|
|
677
|
-
|
|
681
|
+
nt as Checkout
|
|
678
682
|
};
|