@instockng/storefront-ui 1.0.21 → 1.0.23
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 +2 -0
- package/dist/contexts/CartContext.d.ts.map +1 -1
- package/dist/index10.mjs +53 -59
- package/dist/index100.mjs +3 -3
- package/dist/index101.mjs +1 -1
- package/dist/index102.mjs +1 -1
- package/dist/index103.mjs +1 -1
- package/dist/index104.mjs +2 -2
- package/dist/index105.mjs +2 -2
- package/dist/index106.mjs +3 -3
- package/dist/index107.mjs +1 -1
- package/dist/index108.mjs +3 -3
- package/dist/index109.mjs +2 -2
- package/dist/index110.mjs +2 -2
- package/dist/index111.mjs +1 -1
- package/dist/index112.mjs +3 -3
- package/dist/index113.mjs +1 -1
- package/dist/index114.mjs +1 -1
- package/dist/index115.mjs +3 -3
- package/dist/index116.mjs +2 -2
- package/dist/index117.mjs +4 -4
- package/dist/index118.mjs +1 -1
- package/dist/index119.mjs +3 -3
- package/dist/index12.mjs +456 -438
- package/dist/index120.mjs +4 -4
- package/dist/index121.mjs +1 -1
- package/dist/index122.mjs +1 -1
- package/dist/index123.mjs +1 -1
- package/dist/index124.mjs +1 -1
- package/dist/index125.mjs +1 -1
- package/dist/index126.mjs +1 -1
- package/dist/index127.mjs +1 -1
- package/dist/index128.mjs +2 -2
- package/dist/index129.mjs +3 -3
- package/dist/index132.mjs +1 -1
- package/dist/index134.mjs +2 -21
- package/dist/index135.mjs +2 -56
- package/dist/index136.mjs +2 -29
- package/dist/index137.mjs +2 -7
- package/dist/index138.mjs +16 -50
- package/dist/index139.mjs +32 -6
- package/dist/index140.mjs +37 -11
- package/dist/index141.mjs +18 -7
- package/dist/index142.mjs +18 -28
- package/dist/index143.mjs +2 -2
- package/dist/index144.mjs +20 -70
- package/dist/index145.mjs +42 -163
- package/dist/index147.mjs +30 -2
- package/dist/index148.mjs +18 -2
- package/dist/index149.mjs +2 -2
- package/dist/index150.mjs +2 -18
- package/dist/index151.mjs +2 -32
- package/dist/index152.mjs +2 -38
- package/dist/index153.mjs +67 -13
- package/dist/index154.mjs +2 -18
- package/dist/index155.mjs +53 -2
- package/dist/index156.mjs +2 -20
- package/dist/index157.mjs +29 -39
- package/dist/index158.mjs +152 -2
- package/dist/index159.mjs +2 -30
- package/dist/index160.mjs +2 -18
- package/dist/index161.mjs +19 -2
- package/dist/index162.mjs +2 -2
- package/dist/index163.mjs +2 -2
- package/dist/index164.mjs +26 -2
- package/dist/index165.mjs +2 -72
- package/dist/index166.mjs +2 -2
- package/dist/index167.mjs +20 -49
- package/dist/index168.mjs +23 -2
- package/dist/index169.mjs +2 -36
- package/dist/index170.mjs +2 -152
- package/dist/index171.mjs +2 -2
- package/dist/index172.mjs +23 -2
- package/dist/index173.mjs +2 -19
- package/dist/index174.mjs +23 -2
- package/dist/index176.mjs +2 -26
- package/dist/index177.mjs +2 -2
- package/dist/index178.mjs +23 -2
- package/dist/index179.mjs +2 -24
- package/dist/index180.mjs +15 -15
- package/dist/index181.mjs +2 -2
- package/dist/index182.mjs +2 -2
- package/dist/index183.mjs +2 -2
- package/dist/index184.mjs +2 -23
- package/dist/index185.mjs +2 -2
- package/dist/index186.mjs +2 -23
- package/dist/index187.mjs +2 -2
- package/dist/index188.mjs +2 -2
- package/dist/index189.mjs +127 -2
- package/dist/index190.mjs +2 -23
- package/dist/index191.mjs +74 -2
- package/dist/index192.mjs +71 -20
- package/dist/index193.mjs +21 -2
- package/dist/index194.mjs +56 -2
- package/dist/index195.mjs +29 -2
- package/dist/index196.mjs +7 -2
- package/dist/index197.mjs +52 -2
- package/dist/index198.mjs +6 -2
- package/dist/index199.mjs +12 -2
- package/dist/index2.mjs +10 -10
- package/dist/index20.mjs +2 -2
- package/dist/index200.mjs +7 -2
- package/dist/index201.mjs +28 -127
- package/dist/index202.mjs +2 -2
- package/dist/index203.mjs +69 -73
- package/dist/index204.mjs +164 -71
- package/dist/index205.mjs +2 -31
- package/dist/index206.mjs +2 -11
- package/dist/index207.mjs +2 -4
- package/dist/index208.mjs +2 -4
- package/dist/index209.mjs +2 -13
- package/dist/index21.mjs +2 -2
- package/dist/index210.mjs +2 -7
- package/dist/index211.mjs +107 -11
- package/dist/index212.mjs +2 -5
- package/dist/index213.mjs +2 -33
- package/dist/index214.mjs +2 -31
- package/dist/index215.mjs +2 -28
- package/dist/index216.mjs +241 -58
- package/dist/index218.mjs +33 -2
- package/dist/index219.mjs +65 -2
- package/dist/index220.mjs +25 -2
- package/dist/index221.mjs +2 -2
- package/dist/index222.mjs +37 -2
- package/dist/index225.mjs +2 -108
- package/dist/index226.mjs +2 -2
- package/dist/index227.mjs +2 -2
- package/dist/index228.mjs +2 -2
- package/dist/index229.mjs +2 -37
- package/dist/index231.mjs +2 -244
- package/dist/index232.mjs +2 -2
- package/dist/index233.mjs +4 -33
- package/dist/index234.mjs +2 -65
- package/dist/index235.mjs +2 -25
- package/dist/index236.mjs +31 -2
- package/dist/index237.mjs +11 -2
- package/dist/index238.mjs +4 -2
- package/dist/index239.mjs +4 -2
- package/dist/index240.mjs +13 -2
- package/dist/index241.mjs +7 -2
- package/dist/index242.mjs +12 -2
- package/dist/index243.mjs +5 -2
- package/dist/index244.mjs +33 -2
- package/dist/index245.mjs +31 -4
- package/dist/index246.mjs +28 -2
- package/dist/index247.mjs +61 -2
- package/dist/index248.mjs +2 -2
- package/dist/index249.mjs +2 -18
- package/dist/index25.mjs +53 -48
- package/dist/index250.mjs +13 -42
- package/dist/index251.mjs +47 -2
- package/dist/index252.mjs +2 -2
- package/dist/index257.mjs +1 -2
- package/dist/index258.mjs +3 -2
- package/dist/index259.mjs +2 -2
- package/dist/index260.mjs +2 -17
- package/dist/index261.mjs +15 -11
- package/dist/index262.mjs +13 -6
- package/dist/index263.mjs +6 -30
- package/dist/index264.mjs +30 -2
- package/dist/index3.mjs +133 -102
- package/dist/index32.mjs +26 -26
- package/dist/index37.mjs +2 -2
- package/dist/index38.mjs +1 -1
- package/dist/index4.mjs +50 -49
- package/dist/index42.mjs +1 -1
- package/dist/index47.mjs +17 -17
- package/dist/index48.mjs +2 -2
- 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/index60.mjs +21 -20
- package/dist/index61.mjs +2 -24
- package/dist/index63.mjs +23 -2
- package/dist/index66.mjs +2 -2
- package/dist/index75.mjs +2 -235
- package/dist/index76.mjs +233 -4
- package/dist/index77.mjs +5 -133
- package/dist/index78.mjs +129 -63
- package/dist/index79.mjs +67 -86
- package/dist/index80.mjs +85 -27
- package/dist/index81.mjs +28 -8
- package/dist/index82.mjs +8 -74
- package/dist/index83.mjs +74 -3
- package/dist/index84.mjs +4 -2
- package/dist/index85.mjs +2 -83
- package/dist/index86.mjs +81 -52
- package/dist/index87.mjs +53 -5
- package/dist/index88.mjs +5 -4
- package/dist/index89.mjs +4 -178
- package/dist/index90.mjs +174 -48
- package/dist/index91.mjs +51 -67
- package/dist/index92.mjs +69 -34
- package/dist/index93.mjs +31 -40
- package/dist/index94.mjs +43 -2
- package/dist/index96.mjs +1 -1
- package/dist/index97.mjs +1 -1
- package/dist/index98.mjs +6 -6
- package/dist/index99.mjs +4 -4
- package/dist/providers/MetaPixelProvider.d.ts +10 -5
- package/dist/providers/MetaPixelProvider.d.ts.map +1 -1
- 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 +42 -0
- package/src/components/ShoppingCart.stories.tsx +17 -16
- package/src/components/ShoppingCart.tsx +3 -11
- package/src/contexts/CartContext.tsx +70 -6
- package/src/providers/MetaPixelProvider.tsx +24 -16
- package/src/providers/StorefrontProvider.tsx +4 -1
- package/src/test-utils/MockCartProvider.tsx +31 -25
package/dist/index12.mjs
CHANGED
|
@@ -1,176 +1,176 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import { jsxs as
|
|
3
|
-
import { useState as
|
|
4
|
-
import { object as
|
|
2
|
+
import { jsxs as r, jsx as e, Fragment as be } from "react/jsx-runtime";
|
|
3
|
+
import { useState as b, useEffect as I, useMemo as $, useCallback as ge } from "react";
|
|
4
|
+
import { object as W, string as f, ValidationError as xe } 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
|
|
7
|
+
import { useGetDeliveryZones as we } from "./index35.mjs";
|
|
8
|
+
import { useCart as Ce } from "./index3.mjs";
|
|
9
|
+
import { Modal as se } from "./index16.mjs";
|
|
10
10
|
import { FormInput as P } from "./index17.mjs";
|
|
11
|
-
import { FormSelect as
|
|
12
|
-
import { Button as
|
|
13
|
-
import { Loader2 as
|
|
11
|
+
import { FormSelect as le } from "./index18.mjs";
|
|
12
|
+
import { Button as B } from "./index13.mjs";
|
|
13
|
+
import { Loader2 as O, ChevronLeft as Pe, ChevronRight as ke, CheckCircle as Me, Package as ne, Banknote as de, Mail as qe, Phone as Ie, Zap as je, ChevronDown as Ze } from "lucide-react";
|
|
14
14
|
import { formatCurrency as k, cn as w } from "./index19.mjs";
|
|
15
|
-
import
|
|
16
|
-
import { usePaystackPayment as
|
|
17
|
-
const
|
|
18
|
-
firstName:
|
|
19
|
-
lastName:
|
|
20
|
-
email:
|
|
21
|
-
phone:
|
|
15
|
+
import Se from "./index40.mjs";
|
|
16
|
+
import { usePaystackPayment as ze } from "./index41.mjs";
|
|
17
|
+
const Fe = (d) => d.replace(/\D/g, ""), Le = W({
|
|
18
|
+
firstName: f().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: f().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: f().required("Email is required").email("Please enter a valid email address"),
|
|
21
|
+
phone: f().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 =
|
|
23
|
+
const M = Fe(d);
|
|
24
24
|
return [
|
|
25
25
|
/^0[789]\d{9}$/
|
|
26
26
|
// 0xxxxxxxxx (11 digits total)
|
|
27
|
-
].some((
|
|
27
|
+
].some((p) => p.test(M));
|
|
28
28
|
})
|
|
29
|
-
}),
|
|
30
|
-
address:
|
|
31
|
-
city:
|
|
32
|
-
state:
|
|
33
|
-
deliveryZoneId:
|
|
34
|
-
}),
|
|
35
|
-
paymentMethod:
|
|
29
|
+
}), Be = W({
|
|
30
|
+
address: f().required("Street address is required").min(10, "Please provide a complete address"),
|
|
31
|
+
city: f().required("City is required").min(3, "City name must be at least 3 characters"),
|
|
32
|
+
state: f().required("State is required").test("not-empty", "State is required", (d) => !!d && d.trim() !== ""),
|
|
33
|
+
deliveryZoneId: f().required("Delivery zone is required").test("not-empty", "Delivery zone is required", (d) => !!d && d.trim() !== "")
|
|
34
|
+
}), Te = W({
|
|
35
|
+
paymentMethod: f().oneOf(["cod", "online"], "Please select a payment method").required("Payment method is required")
|
|
36
36
|
});
|
|
37
|
-
function
|
|
37
|
+
function De({
|
|
38
38
|
isOpen: d,
|
|
39
39
|
onClose: M,
|
|
40
|
-
initialData:
|
|
41
|
-
onSuccess:
|
|
42
|
-
onError:
|
|
43
|
-
submitButtonText:
|
|
44
|
-
refundPolicy:
|
|
40
|
+
initialData: n,
|
|
41
|
+
onSuccess: p,
|
|
42
|
+
onError: o,
|
|
43
|
+
submitButtonText: ie = "Place Order",
|
|
44
|
+
refundPolicy: j
|
|
45
45
|
}) {
|
|
46
|
-
var
|
|
47
|
-
const
|
|
48
|
-
publicKey:
|
|
46
|
+
var Q, X, E, D, ee, te, re, ae;
|
|
47
|
+
const ce = "pk_live_dfb74efb5f74d2acbc253d5ca396ab9015ef0fa7", [c, v] = b("customer"), [Z, oe] = b(void 0), [h, G] = b(void 0), [y, T] = b(null), { refetch: K, isLoading: Y, cart: s, updateCartMutation: _, checkoutMutation: me, clearAndCreateNewCart: V } = Ce(), H = ze({
|
|
48
|
+
publicKey: ce,
|
|
49
49
|
onSuccess: async (t) => {
|
|
50
50
|
try {
|
|
51
|
-
const
|
|
52
|
-
firstName:
|
|
53
|
-
lastName:
|
|
54
|
-
email:
|
|
55
|
-
phone:
|
|
56
|
-
address:
|
|
57
|
-
city:
|
|
58
|
-
deliveryZoneId:
|
|
59
|
-
paymentMethod:
|
|
51
|
+
const l = await C.mutateAsync({
|
|
52
|
+
firstName: a.firstName,
|
|
53
|
+
lastName: a.lastName,
|
|
54
|
+
email: a.email,
|
|
55
|
+
phone: a.phone,
|
|
56
|
+
address: a.address,
|
|
57
|
+
city: a.city,
|
|
58
|
+
deliveryZoneId: h || a.deliveryZoneId,
|
|
59
|
+
paymentMethod: a.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(), p == null || p(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: g } = we(((Q = s == null ? void 0 : s.brand) == null ? void 0 : Q.id) || "", {
|
|
80
|
+
enabled: !!((X = s == null ? void 0 : s.brand) != null && X.id)
|
|
81
|
+
}), m = $(() => g == null ? void 0 : g.find((t) => t.id === Z), [g, Z]), q = $(() => m == null ? void 0 : m.zones.find((t) => t.id === h), [m, h]), C = me;
|
|
82
|
+
I(() => {
|
|
83
|
+
d || (T(null), v("customer"), C.reset());
|
|
84
84
|
}, [d]);
|
|
85
|
-
const [
|
|
86
|
-
firstName: (
|
|
87
|
-
lastName: (
|
|
88
|
-
email: (
|
|
89
|
-
phone: (
|
|
90
|
-
address: (
|
|
91
|
-
city: (
|
|
92
|
-
deliveryZoneId: (
|
|
93
|
-
paymentMethod: (
|
|
94
|
-
notes: (
|
|
85
|
+
const [a, A] = b({
|
|
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 && v("customer");
|
|
98
98
|
}, [d]);
|
|
99
|
-
const [
|
|
100
|
-
|
|
101
|
-
d && s && !
|
|
102
|
-
var
|
|
99
|
+
const [U, J] = b(!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] = b({}), [R, ue] = b(!1), N = (t) => {
|
|
122
|
+
const { name: l, value: i } = t.target;
|
|
123
|
+
A((x) => ({ ...x, [l]: i })), u[l] && S((x) => ({ ...x, [l]: void 0 }));
|
|
124
|
+
}, z = ge(
|
|
125
125
|
(t) => {
|
|
126
|
-
const
|
|
127
|
-
if (!
|
|
126
|
+
const l = a[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
|
-
[
|
|
132
|
-
),
|
|
133
|
-
const
|
|
131
|
+
[a, _]
|
|
132
|
+
), F = (t) => {
|
|
133
|
+
const l = {};
|
|
134
134
|
try {
|
|
135
135
|
if (t === "customer")
|
|
136
|
-
|
|
136
|
+
Le.validateSync(a, { abortEarly: !1 });
|
|
137
137
|
else if (t === "delivery") {
|
|
138
138
|
const i = {
|
|
139
|
-
address:
|
|
140
|
-
city:
|
|
141
|
-
state: Z ||
|
|
142
|
-
deliveryZoneId:
|
|
139
|
+
address: a.address,
|
|
140
|
+
city: a.city,
|
|
141
|
+
state: Z || a.state || "",
|
|
142
|
+
deliveryZoneId: h || a.deliveryZoneId || ""
|
|
143
143
|
};
|
|
144
|
-
|
|
145
|
-
} else t === "payment" &&
|
|
144
|
+
Be.validateSync(i, { abortEarly: !1 });
|
|
145
|
+
} else t === "payment" && Te.validateSync(a, { abortEarly: !1 });
|
|
146
146
|
} catch (i) {
|
|
147
|
-
i instanceof
|
|
148
|
-
x.path && (
|
|
147
|
+
i instanceof xe && i.inner.forEach((x) => {
|
|
148
|
+
x.path && (l[x.path] = x.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
|
+
}, he = () => {
|
|
153
|
+
F(c) && (c === "customer" ? v("delivery") : c === "delivery" && v("payment"));
|
|
154
|
+
}, ye = () => {
|
|
155
|
+
c === "payment" ? v("delivery") : c === "delivery" && v("customer");
|
|
156
|
+
}, fe = async () => {
|
|
157
|
+
if (!F("customer")) {
|
|
158
|
+
v("customer");
|
|
159
159
|
return;
|
|
160
160
|
}
|
|
161
|
-
if (!
|
|
162
|
-
|
|
161
|
+
if (!F("delivery")) {
|
|
162
|
+
v("delivery");
|
|
163
163
|
return;
|
|
164
164
|
}
|
|
165
|
-
if (
|
|
166
|
-
if (
|
|
167
|
-
if (!
|
|
168
|
-
|
|
165
|
+
if (F("payment")) {
|
|
166
|
+
if (a.paymentMethod === "online") {
|
|
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
|
-
|
|
173
|
-
email:
|
|
172
|
+
H.initializePayment({
|
|
173
|
+
email: a.email || (s == null ? void 0 : s.customerEmail) || "customer@example.com",
|
|
174
174
|
amount: t,
|
|
175
175
|
currency: "NGN",
|
|
176
176
|
metadata: {
|
|
@@ -179,12 +179,12 @@ function Ee({
|
|
|
179
179
|
{
|
|
180
180
|
display_name: "Customer Name",
|
|
181
181
|
variable_name: "customer_name",
|
|
182
|
-
value: `${
|
|
182
|
+
value: `${a.firstName} ${a.lastName}`
|
|
183
183
|
},
|
|
184
184
|
{
|
|
185
185
|
display_name: "Phone Number",
|
|
186
186
|
variable_name: "phone_number",
|
|
187
|
-
value:
|
|
187
|
+
value: a.phone
|
|
188
188
|
}
|
|
189
189
|
]
|
|
190
190
|
}
|
|
@@ -193,105 +193,105 @@ function Ee({
|
|
|
193
193
|
}
|
|
194
194
|
try {
|
|
195
195
|
const t = await C.mutateAsync({
|
|
196
|
-
firstName:
|
|
197
|
-
lastName:
|
|
198
|
-
email:
|
|
199
|
-
phone:
|
|
200
|
-
address:
|
|
201
|
-
city:
|
|
202
|
-
deliveryZoneId:
|
|
203
|
-
paymentMethod:
|
|
196
|
+
firstName: a.firstName,
|
|
197
|
+
lastName: a.lastName,
|
|
198
|
+
email: a.email,
|
|
199
|
+
phone: a.phone,
|
|
200
|
+
address: a.address,
|
|
201
|
+
city: a.city,
|
|
202
|
+
deliveryZoneId: h || a.deliveryZoneId,
|
|
203
|
+
paymentMethod: a.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(), p == null || p(t.id);
|
|
211
211
|
} catch (t) {
|
|
212
|
-
|
|
212
|
+
o == null || o(t);
|
|
213
213
|
}
|
|
214
214
|
}
|
|
215
|
-
},
|
|
215
|
+
}, pe = {
|
|
216
216
|
customer: "Customer Information",
|
|
217
217
|
delivery: "Delivery Address",
|
|
218
218
|
payment: "Payment Method"
|
|
219
|
-
},
|
|
220
|
-
(
|
|
221
|
-
|
|
222
|
-
/* @__PURE__ */
|
|
219
|
+
}, ve = $(() => pe[c], [c]), Ne = /* @__PURE__ */ r("div", { className: "space-y-3", children: [
|
|
220
|
+
(c === "payment" || c === "delivery") && ((E = s == null ? void 0 : s.pricing) == null ? void 0 : E.total) && /* @__PURE__ */ r("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(O, { className: "animate-spin text-accent-500" }) }),
|
|
222
|
+
/* @__PURE__ */ r("div", { className: "flex items-center justify-between font-medium", children: [
|
|
223
223
|
/* @__PURE__ */ e("span", { children: "Subtotal" }),
|
|
224
|
-
/* @__PURE__ */ e("span", { children: k(((
|
|
224
|
+
/* @__PURE__ */ e("span", { children: k(((D = s == null ? void 0 : s.pricing) == null ? void 0 : D.subtotal) ?? 0) })
|
|
225
225
|
] }),
|
|
226
|
-
s.pricing.discount && /* @__PURE__ */
|
|
226
|
+
s.pricing.discount && /* @__PURE__ */ r("div", { className: "flex items-center justify-between font-medium", children: [
|
|
227
227
|
/* @__PURE__ */ e("span", { children: "Discount" }),
|
|
228
|
-
/* @__PURE__ */
|
|
228
|
+
/* @__PURE__ */ r("span", { className: "text-green-600", children: [
|
|
229
229
|
"-",
|
|
230
|
-
k(((
|
|
230
|
+
k(((te = (ee = s == null ? void 0 : s.pricing) == null ? void 0 : ee.discount) == null ? void 0 : te.amount) ?? 0)
|
|
231
231
|
] })
|
|
232
232
|
] }),
|
|
233
|
-
/* @__PURE__ */
|
|
233
|
+
/* @__PURE__ */ r("div", { className: "flex items-center justify-between font-medium", children: [
|
|
234
234
|
/* @__PURE__ */ e("span", { children: "Delivery Fee" }),
|
|
235
|
-
/* @__PURE__ */ e("span", { children: k(((
|
|
235
|
+
/* @__PURE__ */ e("span", { children: k(((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
|
-
/* @__PURE__ */
|
|
238
|
+
/* @__PURE__ */ r("div", { className: "flex items-center justify-between font-medium", children: [
|
|
239
239
|
/* @__PURE__ */ e("span", { children: "Total" }),
|
|
240
|
-
/* @__PURE__ */ e("span", { children: k(((
|
|
240
|
+
/* @__PURE__ */ e("span", { children: k(((ae = s == null ? void 0 : s.pricing) == null ? void 0 : ae.total) ?? 0) })
|
|
241
241
|
] })
|
|
242
242
|
] }),
|
|
243
|
-
/* @__PURE__ */
|
|
244
|
-
|
|
245
|
-
|
|
243
|
+
/* @__PURE__ */ r("div", { className: "flex gap-3", children: [
|
|
244
|
+
c !== "customer" && /* @__PURE__ */ r(
|
|
245
|
+
B,
|
|
246
246
|
{
|
|
247
247
|
type: "button",
|
|
248
248
|
variant: "outline",
|
|
249
|
-
onClick:
|
|
249
|
+
onClick: ye,
|
|
250
250
|
className: "flex-1 border-gray-400",
|
|
251
251
|
size: "lg",
|
|
252
252
|
children: [
|
|
253
|
-
/* @__PURE__ */ e(
|
|
253
|
+
/* @__PURE__ */ e(Pe, { className: "mr-2 h-4 w-4" }),
|
|
254
254
|
"Back"
|
|
255
255
|
]
|
|
256
256
|
}
|
|
257
257
|
),
|
|
258
|
-
|
|
259
|
-
|
|
258
|
+
c !== "payment" ? /* @__PURE__ */ r(
|
|
259
|
+
B,
|
|
260
260
|
{
|
|
261
261
|
type: "button",
|
|
262
|
-
onClick:
|
|
262
|
+
onClick: he,
|
|
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(ke, { 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:
|
|
274
|
+
onClick: fe,
|
|
275
275
|
disabled: C.isPending,
|
|
276
276
|
className: "flex-1 bg-accent-500 text-white hover:bg-accent-600",
|
|
277
277
|
size: "lg",
|
|
278
|
-
children: C.isPending ? /* @__PURE__ */
|
|
279
|
-
/* @__PURE__ */ e(
|
|
278
|
+
children: C.isPending ? /* @__PURE__ */ r(be, { children: [
|
|
279
|
+
/* @__PURE__ */ e(O, { className: "mr-2 h-4 w-4 animate-spin" }),
|
|
280
280
|
"Processing..."
|
|
281
|
-
] }) :
|
|
281
|
+
] }) : ie
|
|
282
282
|
}
|
|
283
283
|
)
|
|
284
284
|
] }),
|
|
285
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
|
-
] }),
|
|
287
|
-
return
|
|
288
|
-
|
|
286
|
+
] }), L = (t) => !(s != null && s.availablePaymentMethods.includes(t));
|
|
287
|
+
return y ? /* @__PURE__ */ e(
|
|
288
|
+
se,
|
|
289
289
|
{
|
|
290
290
|
isOpen: d,
|
|
291
291
|
onClose: M,
|
|
292
292
|
title: "Order Placed Successfully!",
|
|
293
293
|
footer: /* @__PURE__ */ e(
|
|
294
|
-
|
|
294
|
+
B,
|
|
295
295
|
{
|
|
296
296
|
onClick: M,
|
|
297
297
|
className: "w-full bg-accent-500 text-white hover:bg-accent-600",
|
|
@@ -301,48 +301,48 @@ function Ee({
|
|
|
301
301
|
),
|
|
302
302
|
size: "lg",
|
|
303
303
|
contentClassName: "p-6",
|
|
304
|
-
children: /* @__PURE__ */
|
|
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(
|
|
306
|
-
/* @__PURE__ */
|
|
304
|
+
children: /* @__PURE__ */ r("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(Me, { className: "h-12 w-12 text-green-600" }) }) }),
|
|
306
|
+
/* @__PURE__ */ r("div", { className: "space-y-2", children: [
|
|
307
307
|
/* @__PURE__ */ e("h3", { className: "text-2xl font-bold text-gray-900", children: "Thank You!" }),
|
|
308
308
|
/* @__PURE__ */ e("p", { className: "text-gray-600", children: "Your order has been placed successfully." })
|
|
309
309
|
] }),
|
|
310
|
-
/* @__PURE__ */
|
|
311
|
-
/* @__PURE__ */
|
|
312
|
-
/* @__PURE__ */ e(
|
|
313
|
-
/* @__PURE__ */
|
|
310
|
+
/* @__PURE__ */ r("div", { className: "bg-gray-50 rounded-lg p-6 space-y-4", children: [
|
|
311
|
+
/* @__PURE__ */ r("div", { className: "flex items-center justify-center space-x-2 text-gray-700", children: [
|
|
312
|
+
/* @__PURE__ */ e(ne, { className: "h-5 w-5" }),
|
|
313
|
+
/* @__PURE__ */ r("span", { className: "font-medium", children: [
|
|
314
314
|
"Order #",
|
|
315
|
-
|
|
315
|
+
y.orderNumber
|
|
316
316
|
] })
|
|
317
317
|
] }),
|
|
318
|
-
/* @__PURE__ */
|
|
319
|
-
/* @__PURE__ */
|
|
318
|
+
/* @__PURE__ */ r("div", { className: "border-t border-gray-200 pt-4 space-y-3", children: [
|
|
319
|
+
/* @__PURE__ */ r("div", { className: "flex justify-between text-sm", children: [
|
|
320
320
|
/* @__PURE__ */ e("span", { className: "text-gray-600", children: "Customer" }),
|
|
321
|
-
/* @__PURE__ */
|
|
322
|
-
|
|
321
|
+
/* @__PURE__ */ r("span", { className: "font-medium text-gray-900", children: [
|
|
322
|
+
y.firstName,
|
|
323
323
|
" ",
|
|
324
|
-
|
|
324
|
+
y.lastName
|
|
325
325
|
] })
|
|
326
326
|
] }),
|
|
327
|
-
/* @__PURE__ */
|
|
327
|
+
/* @__PURE__ */ r("div", { className: "flex justify-between text-sm", children: [
|
|
328
328
|
/* @__PURE__ */ e("span", { className: "text-gray-600", children: "Phone" }),
|
|
329
|
-
/* @__PURE__ */ e("span", { className: "font-medium text-gray-900", children:
|
|
329
|
+
/* @__PURE__ */ e("span", { className: "font-medium text-gray-900", children: y.phone })
|
|
330
330
|
] }),
|
|
331
|
-
|
|
331
|
+
y.email && /* @__PURE__ */ r("div", { className: "flex justify-between text-sm", children: [
|
|
332
332
|
/* @__PURE__ */ e("span", { className: "text-gray-600", children: "Email" }),
|
|
333
|
-
/* @__PURE__ */ e("span", { className: "font-medium text-gray-900", children:
|
|
333
|
+
/* @__PURE__ */ e("span", { className: "font-medium text-gray-900", children: y.email })
|
|
334
334
|
] }),
|
|
335
|
-
/* @__PURE__ */
|
|
335
|
+
/* @__PURE__ */ r("div", { className: "flex justify-between text-sm", children: [
|
|
336
336
|
/* @__PURE__ */ e("span", { className: "text-gray-600", children: "Payment Method" }),
|
|
337
|
-
/* @__PURE__ */ e("span", { className: "font-medium text-gray-900", children:
|
|
337
|
+
/* @__PURE__ */ e("span", { className: "font-medium text-gray-900", children: y.paymentMethod === "cod" ? "Cash on Delivery" : "Online Payment" })
|
|
338
338
|
] }),
|
|
339
|
-
/* @__PURE__ */
|
|
339
|
+
/* @__PURE__ */ r("div", { className: "flex justify-between text-sm", children: [
|
|
340
340
|
/* @__PURE__ */ e("span", { className: "text-gray-600", children: "Total" }),
|
|
341
|
-
/* @__PURE__ */ e("span", { className: "font-bold text-gray-900", children: k(
|
|
341
|
+
/* @__PURE__ */ e("span", { className: "font-bold text-gray-900", children: k(y.totalPrice) })
|
|
342
342
|
] })
|
|
343
343
|
] })
|
|
344
344
|
] }),
|
|
345
|
-
/* @__PURE__ */ e("div", { className: "bg-blue-50 rounded-lg p-4", children: /* @__PURE__ */
|
|
345
|
+
/* @__PURE__ */ e("div", { className: "bg-blue-50 rounded-lg p-4", children: /* @__PURE__ */ r("p", { className: "text-sm text-blue-900", children: [
|
|
346
346
|
/* @__PURE__ */ e("span", { className: "font-semibold", children: "We'll be in touch shortly!" }),
|
|
347
347
|
/* @__PURE__ */ e("br", {}),
|
|
348
348
|
"Our team will contact you soon to arrange delivery and confirm your order details."
|
|
@@ -350,299 +350,317 @@ function Ee({
|
|
|
350
350
|
] })
|
|
351
351
|
}
|
|
352
352
|
) : /* @__PURE__ */ e(
|
|
353
|
-
|
|
353
|
+
se,
|
|
354
354
|
{
|
|
355
355
|
isOpen: d,
|
|
356
356
|
onClose: M,
|
|
357
|
-
title:
|
|
358
|
-
footer:
|
|
357
|
+
title: ve,
|
|
358
|
+
footer: Ne,
|
|
359
359
|
size: "lg",
|
|
360
360
|
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: [
|
|
361
|
+
children: Y ? /* @__PURE__ */ e("div", { className: "flex items-center justify-center min-h-[300px]", children: /* @__PURE__ */ e(O, { className: "h-8 w-8 animate-spin text-gray-600" }) }) : /* @__PURE__ */ e("div", { className: "w-full overflow-hidden", children: /* @__PURE__ */ r("div", { className: "relative w-full", children: [
|
|
362
|
+
q && (c === "delivery" || c === "payment") && /* @__PURE__ */ r("div", { className: "space-y-3 p-4 pb-0", children: [
|
|
363
|
+
q.waybillOnly && /* @__PURE__ */ e("div", { className: "bg-amber-50 border border-amber-200 rounded-lg p-4", children: /* @__PURE__ */ r("div", { className: "flex items-start gap-3", children: [
|
|
364
|
+
/* @__PURE__ */ e(ne, { className: "h-5 w-5 text-amber-600 flex-shrink-0 mt-0.5" }),
|
|
365
|
+
/* @__PURE__ */ r("div", { className: "space-y-1", children: [
|
|
366
|
+
/* @__PURE__ */ e("p", { className: "text-sm font-semibold text-amber-900", children: "Waybill Delivery" }),
|
|
367
|
+
/* @__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." })
|
|
368
|
+
] })
|
|
369
|
+
] }) }),
|
|
370
|
+
!(q != null && q.allowCOD) && /* @__PURE__ */ e("div", { className: "bg-blue-50 border border-blue-200 rounded-lg p-4", children: /* @__PURE__ */ r("div", { className: "flex items-start gap-3", children: [
|
|
371
|
+
/* @__PURE__ */ e(de, { className: "h-5 w-5 text-blue-600 flex-shrink-0 mt-0.5" }),
|
|
372
|
+
/* @__PURE__ */ r("div", { className: "space-y-1", children: [
|
|
373
|
+
/* @__PURE__ */ e("p", { className: "text-sm font-semibold text-blue-900", children: "Cash on Delivery Unavailable" }),
|
|
374
|
+
/* @__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." })
|
|
375
|
+
] })
|
|
376
|
+
] }) })
|
|
377
|
+
] }),
|
|
378
|
+
/* @__PURE__ */ r(
|
|
379
|
+
"div",
|
|
380
|
+
{
|
|
381
|
+
className: w(
|
|
382
|
+
"flex transition-transform duration-300 ease-in-out w-full",
|
|
383
|
+
c === "customer" && "translate-x-0",
|
|
384
|
+
c === "delivery" && "-translate-x-full",
|
|
385
|
+
c === "payment" && "-translate-x-[200%]"
|
|
386
|
+
),
|
|
387
|
+
children: [
|
|
388
|
+
/* @__PURE__ */ e("div", { className: "w-full min-w-full flex-shrink-0 p-4", children: /* @__PURE__ */ e("div", { className: "space-y-4", children: /* @__PURE__ */ r("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
|
|
449
389
|
/* @__PURE__ */ e(
|
|
450
390
|
P,
|
|
451
391
|
{
|
|
452
|
-
label: "
|
|
392
|
+
label: "First Name",
|
|
453
393
|
type: "text",
|
|
454
|
-
name: "
|
|
455
|
-
value:
|
|
456
|
-
onChange:
|
|
457
|
-
|
|
394
|
+
name: "firstName",
|
|
395
|
+
value: a.firstName,
|
|
396
|
+
onChange: N,
|
|
397
|
+
onBlur: () => z("firstName"),
|
|
398
|
+
error: u.firstName,
|
|
458
399
|
autoCorrect: "off",
|
|
459
400
|
required: !0
|
|
460
401
|
}
|
|
461
402
|
),
|
|
462
|
-
/* @__PURE__ */
|
|
463
|
-
|
|
403
|
+
/* @__PURE__ */ e(
|
|
404
|
+
P,
|
|
464
405
|
{
|
|
465
|
-
label: "
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
406
|
+
label: "Last Name",
|
|
407
|
+
type: "text",
|
|
408
|
+
name: "lastName",
|
|
409
|
+
value: a.lastName,
|
|
410
|
+
onChange: N,
|
|
411
|
+
onBlur: () => z("lastName"),
|
|
412
|
+
error: u.lastName,
|
|
413
|
+
autoCorrect: "off",
|
|
414
|
+
required: !0
|
|
415
|
+
}
|
|
416
|
+
),
|
|
417
|
+
/* @__PURE__ */ e(
|
|
418
|
+
P,
|
|
419
|
+
{
|
|
420
|
+
label: "Email",
|
|
421
|
+
type: "email",
|
|
422
|
+
name: "email",
|
|
423
|
+
value: a.email,
|
|
424
|
+
onChange: N,
|
|
425
|
+
onBlur: () => z("email"),
|
|
426
|
+
error: u.email,
|
|
427
|
+
icon: /* @__PURE__ */ e(qe, { size: 16 }),
|
|
428
|
+
autoCorrect: "off",
|
|
429
|
+
required: !0
|
|
479
430
|
}
|
|
480
431
|
),
|
|
481
|
-
/* @__PURE__ */
|
|
482
|
-
|
|
432
|
+
/* @__PURE__ */ e(
|
|
433
|
+
P,
|
|
483
434
|
{
|
|
484
|
-
label: "
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
435
|
+
label: "Phone Number",
|
|
436
|
+
type: "tel",
|
|
437
|
+
name: "phone",
|
|
438
|
+
value: a.phone,
|
|
439
|
+
onChange: N,
|
|
440
|
+
onBlur: () => z("phone"),
|
|
441
|
+
placeholder: "e.g. 08012345678",
|
|
442
|
+
maxLength: 18,
|
|
443
|
+
error: u.phone,
|
|
444
|
+
icon: /* @__PURE__ */ e(Ie, { size: 16 }),
|
|
445
|
+
autoCorrect: "off",
|
|
492
446
|
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
|
-
]
|
|
447
|
+
className: "font-semibold"
|
|
502
448
|
}
|
|
503
449
|
)
|
|
504
|
-
] })
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
/* @__PURE__ */ e("div", { className: "relative", children: /* @__PURE__ */ a(
|
|
509
|
-
"label",
|
|
450
|
+
] }) }) }),
|
|
451
|
+
/* @__PURE__ */ e("div", { className: "w-full min-w-full flex-shrink-0 p-4", children: /* @__PURE__ */ r("div", { className: "space-y-4", children: [
|
|
452
|
+
/* @__PURE__ */ e(
|
|
453
|
+
P,
|
|
510
454
|
{
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
455
|
+
label: "Street Address",
|
|
456
|
+
type: "text",
|
|
457
|
+
name: "address",
|
|
458
|
+
value: a.address,
|
|
459
|
+
onChange: N,
|
|
460
|
+
error: u.address,
|
|
461
|
+
autoCorrect: "off",
|
|
462
|
+
required: !0
|
|
463
|
+
}
|
|
464
|
+
),
|
|
465
|
+
/* @__PURE__ */ r("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
|
|
466
|
+
/* @__PURE__ */ e(
|
|
467
|
+
P,
|
|
468
|
+
{
|
|
469
|
+
label: "Area",
|
|
470
|
+
type: "text",
|
|
471
|
+
name: "city",
|
|
472
|
+
value: a.city,
|
|
473
|
+
onChange: N,
|
|
474
|
+
error: u.city,
|
|
475
|
+
autoCorrect: "off",
|
|
476
|
+
required: !0
|
|
477
|
+
}
|
|
478
|
+
),
|
|
479
|
+
/* @__PURE__ */ r(
|
|
480
|
+
le,
|
|
481
|
+
{
|
|
482
|
+
label: "State",
|
|
483
|
+
name: "state",
|
|
484
|
+
value: Z || "",
|
|
485
|
+
onChange: (t) => {
|
|
486
|
+
G("");
|
|
487
|
+
const l = t.target.value;
|
|
488
|
+
oe(l || void 0), u.state && S((i) => ({ ...i, state: void 0 }));
|
|
489
|
+
},
|
|
490
|
+
error: u.state,
|
|
491
|
+
required: !0,
|
|
492
|
+
children: [
|
|
493
|
+
/* @__PURE__ */ e("option", { disabled: !0, value: "", children: "Select State" }),
|
|
494
|
+
g == null ? void 0 : g.map((t) => /* @__PURE__ */ e("option", { value: t.id, children: t.name }, t.id))
|
|
495
|
+
]
|
|
496
|
+
}
|
|
497
|
+
),
|
|
498
|
+
/* @__PURE__ */ r(
|
|
499
|
+
le,
|
|
500
|
+
{
|
|
501
|
+
label: "Delivery Zone",
|
|
502
|
+
value: h || "",
|
|
503
|
+
onChange: (t) => {
|
|
504
|
+
const l = t.target.value;
|
|
505
|
+
G(l || void 0), u.deliveryZoneId && S((i) => ({ ...i, deliveryZoneId: void 0 })), l && _.mutate({ deliveryZoneId: l });
|
|
506
|
+
},
|
|
507
|
+
disabled: !m,
|
|
508
|
+
error: u.deliveryZoneId,
|
|
509
|
+
required: !0,
|
|
510
|
+
children: [
|
|
511
|
+
/* @__PURE__ */ e("option", { disabled: !0, value: "", children: m ? "Select Delivery Zone" : "Select State First" }),
|
|
512
|
+
m == null ? void 0 : m.zones.map((t) => /* @__PURE__ */ r("option", { value: t.id, children: [
|
|
513
|
+
t.name,
|
|
514
|
+
" (",
|
|
515
|
+
k(t.deliveryCost),
|
|
516
|
+
")"
|
|
517
|
+
] }, t.id))
|
|
518
|
+
]
|
|
519
|
+
}
|
|
520
|
+
)
|
|
521
|
+
] })
|
|
522
|
+
] }) }),
|
|
523
|
+
/* @__PURE__ */ e("div", { className: "w-full min-w-full flex-shrink-0 p-4", children: /* @__PURE__ */ r("div", { className: "space-y-6", children: [
|
|
524
|
+
/* @__PURE__ */ r("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4", children: [
|
|
525
|
+
/* @__PURE__ */ e("div", { className: "relative", children: /* @__PURE__ */ r(
|
|
526
|
+
"label",
|
|
527
|
+
{
|
|
528
|
+
className: w(
|
|
529
|
+
"flex items-center justify-center relative p-4 border-2 rounded-xl cursor-pointer transition-all duration-200",
|
|
530
|
+
a.paymentMethod === "online" ? "border-accent-500 bg-accent-50" : "border-gray-200 hover:border-gray-300",
|
|
531
|
+
L("online") && "opacity-50 cursor-not-allowed"
|
|
528
532
|
),
|
|
529
|
-
|
|
533
|
+
children: [
|
|
530
534
|
/* @__PURE__ */ e(
|
|
531
|
-
"
|
|
535
|
+
"input",
|
|
532
536
|
{
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
),
|
|
537
|
-
|
|
537
|
+
type: "radio",
|
|
538
|
+
name: "paymentMethod",
|
|
539
|
+
value: "online",
|
|
540
|
+
disabled: L("online"),
|
|
541
|
+
checked: a.paymentMethod === "online",
|
|
542
|
+
onChange: N,
|
|
543
|
+
className: "sr-only"
|
|
538
544
|
}
|
|
539
545
|
),
|
|
540
|
-
/* @__PURE__ */
|
|
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" }),
|
|
546
|
+
/* @__PURE__ */ r("div", { className: "flex flex-col items-center text-center space-y-3", children: [
|
|
543
547
|
/* @__PURE__ */ e(
|
|
544
|
-
"
|
|
548
|
+
"div",
|
|
545
549
|
{
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
550
|
+
className: w(
|
|
551
|
+
"p-3 rounded-full",
|
|
552
|
+
a.paymentMethod === "online" ? "bg-accent-100 text-accent-600" : "bg-gray-100 text-gray-600"
|
|
553
|
+
),
|
|
554
|
+
children: /* @__PURE__ */ e(je, { size: 24 })
|
|
549
555
|
}
|
|
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
|
-
}
|
|
556
|
+
),
|
|
557
|
+
/* @__PURE__ */ r("div", { children: [
|
|
558
|
+
/* @__PURE__ */ e("div", { className: "font-semibold text-gray-900", children: "Pay Online" }),
|
|
559
|
+
/* @__PURE__ */ e("div", { className: "text-sm text-gray-500 mt-1", children: "Bank transfer" }),
|
|
560
|
+
/* @__PURE__ */ e(
|
|
561
|
+
"img",
|
|
562
|
+
{
|
|
563
|
+
src: Se,
|
|
564
|
+
alt: "Paystack",
|
|
565
|
+
className: "h-4 w-auto mt-2 mx-auto"
|
|
566
|
+
}
|
|
567
|
+
)
|
|
568
|
+
] })
|
|
569
|
+
] }),
|
|
570
|
+
a.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" }) }) })
|
|
571
|
+
]
|
|
572
|
+
}
|
|
573
|
+
) }),
|
|
574
|
+
/* @__PURE__ */ r(
|
|
575
|
+
"label",
|
|
576
|
+
{
|
|
577
|
+
className: w(
|
|
578
|
+
"flex items-center justify-center relative p-4 border-2 rounded-xl cursor-pointer transition-all duration-200",
|
|
579
|
+
a.paymentMethod === "cod" ? "border-accent-500 bg-accent-50" : "border-gray-200 hover:border-gray-300",
|
|
580
|
+
L("cod") && "opacity-50 cursor-not-allowed"
|
|
577
581
|
),
|
|
578
|
-
|
|
582
|
+
children: [
|
|
579
583
|
/* @__PURE__ */ e(
|
|
580
|
-
"
|
|
584
|
+
"input",
|
|
581
585
|
{
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
),
|
|
586
|
-
|
|
586
|
+
type: "radio",
|
|
587
|
+
name: "paymentMethod",
|
|
588
|
+
value: "cod",
|
|
589
|
+
disabled: L("cod"),
|
|
590
|
+
checked: a.paymentMethod === "cod",
|
|
591
|
+
onChange: N,
|
|
592
|
+
className: "sr-only"
|
|
587
593
|
}
|
|
588
594
|
),
|
|
589
|
-
/* @__PURE__ */
|
|
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
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
595
|
+
/* @__PURE__ */ r("div", { className: "flex flex-col items-center text-center space-y-3", children: [
|
|
596
|
+
/* @__PURE__ */ e(
|
|
597
|
+
"div",
|
|
598
|
+
{
|
|
599
|
+
className: w(
|
|
600
|
+
"p-3 rounded-full",
|
|
601
|
+
a.paymentMethod === "cod" ? "bg-accent-100 text-accent-600" : "bg-gray-100 text-gray-600"
|
|
602
|
+
),
|
|
603
|
+
children: /* @__PURE__ */ e(de, { size: 24 })
|
|
604
|
+
}
|
|
605
|
+
),
|
|
606
|
+
/* @__PURE__ */ r("div", { children: [
|
|
607
|
+
/* @__PURE__ */ e("div", { className: "font-semibold text-gray-900", children: "Pay on Delivery" }),
|
|
608
|
+
/* @__PURE__ */ e("div", { className: "text-sm text-gray-500 mt-1", children: "Cash when item arrives" })
|
|
609
|
+
] })
|
|
610
|
+
] }),
|
|
611
|
+
a.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" }) }) })
|
|
612
|
+
]
|
|
613
|
+
}
|
|
614
|
+
)
|
|
615
|
+
] }),
|
|
616
|
+
u.paymentMethod && /* @__PURE__ */ e("p", { className: "text-red-600 text-sm", children: u.paymentMethod }),
|
|
617
|
+
j && /* @__PURE__ */ r("div", { className: "border border-gray-200 rounded-lg", children: [
|
|
618
|
+
/* @__PURE__ */ r(
|
|
619
|
+
"button",
|
|
620
|
+
{
|
|
621
|
+
type: "button",
|
|
622
|
+
onClick: () => ue(!R),
|
|
623
|
+
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",
|
|
624
|
+
children: [
|
|
625
|
+
/* @__PURE__ */ e("span", { className: "text-sm font-medium text-gray-700", children: j.title || "🤔 Curious about Refunds?" }),
|
|
626
|
+
/* @__PURE__ */ e(
|
|
627
|
+
Ze,
|
|
628
|
+
{
|
|
629
|
+
size: 16,
|
|
630
|
+
className: w(
|
|
631
|
+
"transform transition-transform duration-200 text-gray-500",
|
|
632
|
+
R && "rotate-180"
|
|
633
|
+
)
|
|
634
|
+
}
|
|
635
|
+
)
|
|
636
|
+
]
|
|
637
|
+
}
|
|
638
|
+
),
|
|
639
|
+
/* @__PURE__ */ e(
|
|
640
|
+
"div",
|
|
641
|
+
{
|
|
642
|
+
className: w(
|
|
643
|
+
"overflow-hidden transition-all duration-300 ease-in-out",
|
|
644
|
+
R ? "max-h-96 opacity-100" : "max-h-0 opacity-0"
|
|
645
|
+
),
|
|
646
|
+
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__ */ r("div", { children: [
|
|
647
|
+
/* @__PURE__ */ e("h4", { className: "font-bold text-gray-800 mb-2", children: "Our Refund Policy" }),
|
|
648
|
+
/* @__PURE__ */ e("ul", { className: "space-y-1 ml-4", children: j.policies.map((t, l) => /* @__PURE__ */ r("li", { className: "flex items-start", children: [
|
|
649
|
+
/* @__PURE__ */ e("span", { className: "text-green-600 mr-2", children: "✓" }),
|
|
650
|
+
/* @__PURE__ */ e("span", { children: t })
|
|
651
|
+
] }, l)) })
|
|
652
|
+
] }) }) })
|
|
653
|
+
}
|
|
654
|
+
)
|
|
655
|
+
] })
|
|
656
|
+
] }) })
|
|
657
|
+
]
|
|
658
|
+
}
|
|
659
|
+
)
|
|
660
|
+
] }) })
|
|
643
661
|
}
|
|
644
662
|
);
|
|
645
663
|
}
|
|
646
664
|
export {
|
|
647
|
-
|
|
665
|
+
De as Checkout
|
|
648
666
|
};
|