@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.
Files changed (223) hide show
  1. package/dist/components/Checkout.d.ts.map +1 -1
  2. package/dist/components/ShoppingCart.d.ts.map +1 -1
  3. package/dist/contexts/CartContext.d.ts +2 -0
  4. package/dist/contexts/CartContext.d.ts.map +1 -1
  5. package/dist/index10.mjs +53 -59
  6. package/dist/index100.mjs +3 -3
  7. package/dist/index101.mjs +1 -1
  8. package/dist/index102.mjs +1 -1
  9. package/dist/index103.mjs +1 -1
  10. package/dist/index104.mjs +2 -2
  11. package/dist/index105.mjs +2 -2
  12. package/dist/index106.mjs +3 -3
  13. package/dist/index107.mjs +1 -1
  14. package/dist/index108.mjs +3 -3
  15. package/dist/index109.mjs +2 -2
  16. package/dist/index110.mjs +2 -2
  17. package/dist/index111.mjs +1 -1
  18. package/dist/index112.mjs +3 -3
  19. package/dist/index113.mjs +1 -1
  20. package/dist/index114.mjs +1 -1
  21. package/dist/index115.mjs +3 -3
  22. package/dist/index116.mjs +2 -2
  23. package/dist/index117.mjs +4 -4
  24. package/dist/index118.mjs +1 -1
  25. package/dist/index119.mjs +3 -3
  26. package/dist/index12.mjs +456 -438
  27. package/dist/index120.mjs +4 -4
  28. package/dist/index121.mjs +1 -1
  29. package/dist/index122.mjs +1 -1
  30. package/dist/index123.mjs +1 -1
  31. package/dist/index124.mjs +1 -1
  32. package/dist/index125.mjs +1 -1
  33. package/dist/index126.mjs +1 -1
  34. package/dist/index127.mjs +1 -1
  35. package/dist/index128.mjs +2 -2
  36. package/dist/index129.mjs +3 -3
  37. package/dist/index132.mjs +1 -1
  38. package/dist/index134.mjs +2 -21
  39. package/dist/index135.mjs +2 -56
  40. package/dist/index136.mjs +2 -29
  41. package/dist/index137.mjs +2 -7
  42. package/dist/index138.mjs +16 -50
  43. package/dist/index139.mjs +32 -6
  44. package/dist/index140.mjs +37 -11
  45. package/dist/index141.mjs +18 -7
  46. package/dist/index142.mjs +18 -28
  47. package/dist/index143.mjs +2 -2
  48. package/dist/index144.mjs +20 -70
  49. package/dist/index145.mjs +42 -163
  50. package/dist/index147.mjs +30 -2
  51. package/dist/index148.mjs +18 -2
  52. package/dist/index149.mjs +2 -2
  53. package/dist/index150.mjs +2 -18
  54. package/dist/index151.mjs +2 -32
  55. package/dist/index152.mjs +2 -38
  56. package/dist/index153.mjs +67 -13
  57. package/dist/index154.mjs +2 -18
  58. package/dist/index155.mjs +53 -2
  59. package/dist/index156.mjs +2 -20
  60. package/dist/index157.mjs +29 -39
  61. package/dist/index158.mjs +152 -2
  62. package/dist/index159.mjs +2 -30
  63. package/dist/index160.mjs +2 -18
  64. package/dist/index161.mjs +19 -2
  65. package/dist/index162.mjs +2 -2
  66. package/dist/index163.mjs +2 -2
  67. package/dist/index164.mjs +26 -2
  68. package/dist/index165.mjs +2 -72
  69. package/dist/index166.mjs +2 -2
  70. package/dist/index167.mjs +20 -49
  71. package/dist/index168.mjs +23 -2
  72. package/dist/index169.mjs +2 -36
  73. package/dist/index170.mjs +2 -152
  74. package/dist/index171.mjs +2 -2
  75. package/dist/index172.mjs +23 -2
  76. package/dist/index173.mjs +2 -19
  77. package/dist/index174.mjs +23 -2
  78. package/dist/index176.mjs +2 -26
  79. package/dist/index177.mjs +2 -2
  80. package/dist/index178.mjs +23 -2
  81. package/dist/index179.mjs +2 -24
  82. package/dist/index180.mjs +15 -15
  83. package/dist/index181.mjs +2 -2
  84. package/dist/index182.mjs +2 -2
  85. package/dist/index183.mjs +2 -2
  86. package/dist/index184.mjs +2 -23
  87. package/dist/index185.mjs +2 -2
  88. package/dist/index186.mjs +2 -23
  89. package/dist/index187.mjs +2 -2
  90. package/dist/index188.mjs +2 -2
  91. package/dist/index189.mjs +127 -2
  92. package/dist/index190.mjs +2 -23
  93. package/dist/index191.mjs +74 -2
  94. package/dist/index192.mjs +71 -20
  95. package/dist/index193.mjs +21 -2
  96. package/dist/index194.mjs +56 -2
  97. package/dist/index195.mjs +29 -2
  98. package/dist/index196.mjs +7 -2
  99. package/dist/index197.mjs +52 -2
  100. package/dist/index198.mjs +6 -2
  101. package/dist/index199.mjs +12 -2
  102. package/dist/index2.mjs +10 -10
  103. package/dist/index20.mjs +2 -2
  104. package/dist/index200.mjs +7 -2
  105. package/dist/index201.mjs +28 -127
  106. package/dist/index202.mjs +2 -2
  107. package/dist/index203.mjs +69 -73
  108. package/dist/index204.mjs +164 -71
  109. package/dist/index205.mjs +2 -31
  110. package/dist/index206.mjs +2 -11
  111. package/dist/index207.mjs +2 -4
  112. package/dist/index208.mjs +2 -4
  113. package/dist/index209.mjs +2 -13
  114. package/dist/index21.mjs +2 -2
  115. package/dist/index210.mjs +2 -7
  116. package/dist/index211.mjs +107 -11
  117. package/dist/index212.mjs +2 -5
  118. package/dist/index213.mjs +2 -33
  119. package/dist/index214.mjs +2 -31
  120. package/dist/index215.mjs +2 -28
  121. package/dist/index216.mjs +241 -58
  122. package/dist/index218.mjs +33 -2
  123. package/dist/index219.mjs +65 -2
  124. package/dist/index220.mjs +25 -2
  125. package/dist/index221.mjs +2 -2
  126. package/dist/index222.mjs +37 -2
  127. package/dist/index225.mjs +2 -108
  128. package/dist/index226.mjs +2 -2
  129. package/dist/index227.mjs +2 -2
  130. package/dist/index228.mjs +2 -2
  131. package/dist/index229.mjs +2 -37
  132. package/dist/index231.mjs +2 -244
  133. package/dist/index232.mjs +2 -2
  134. package/dist/index233.mjs +4 -33
  135. package/dist/index234.mjs +2 -65
  136. package/dist/index235.mjs +2 -25
  137. package/dist/index236.mjs +31 -2
  138. package/dist/index237.mjs +11 -2
  139. package/dist/index238.mjs +4 -2
  140. package/dist/index239.mjs +4 -2
  141. package/dist/index240.mjs +13 -2
  142. package/dist/index241.mjs +7 -2
  143. package/dist/index242.mjs +12 -2
  144. package/dist/index243.mjs +5 -2
  145. package/dist/index244.mjs +33 -2
  146. package/dist/index245.mjs +31 -4
  147. package/dist/index246.mjs +28 -2
  148. package/dist/index247.mjs +61 -2
  149. package/dist/index248.mjs +2 -2
  150. package/dist/index249.mjs +2 -18
  151. package/dist/index25.mjs +53 -48
  152. package/dist/index250.mjs +13 -42
  153. package/dist/index251.mjs +47 -2
  154. package/dist/index252.mjs +2 -2
  155. package/dist/index257.mjs +1 -2
  156. package/dist/index258.mjs +3 -2
  157. package/dist/index259.mjs +2 -2
  158. package/dist/index260.mjs +2 -17
  159. package/dist/index261.mjs +15 -11
  160. package/dist/index262.mjs +13 -6
  161. package/dist/index263.mjs +6 -30
  162. package/dist/index264.mjs +30 -2
  163. package/dist/index3.mjs +133 -102
  164. package/dist/index32.mjs +26 -26
  165. package/dist/index37.mjs +2 -2
  166. package/dist/index38.mjs +1 -1
  167. package/dist/index4.mjs +50 -49
  168. package/dist/index42.mjs +1 -1
  169. package/dist/index47.mjs +17 -17
  170. package/dist/index48.mjs +2 -2
  171. package/dist/index49.mjs +59 -59
  172. package/dist/index50.mjs +50 -50
  173. package/dist/index51.mjs +48 -48
  174. package/dist/index52.mjs +56 -56
  175. package/dist/index53.mjs +39 -39
  176. package/dist/index54.mjs +55 -55
  177. package/dist/index55.mjs +15 -15
  178. package/dist/index56.mjs +10 -10
  179. package/dist/index57.mjs +23 -23
  180. package/dist/index58.mjs +64 -64
  181. package/dist/index59.mjs +73 -73
  182. package/dist/index60.mjs +21 -20
  183. package/dist/index61.mjs +2 -24
  184. package/dist/index63.mjs +23 -2
  185. package/dist/index66.mjs +2 -2
  186. package/dist/index75.mjs +2 -235
  187. package/dist/index76.mjs +233 -4
  188. package/dist/index77.mjs +5 -133
  189. package/dist/index78.mjs +129 -63
  190. package/dist/index79.mjs +67 -86
  191. package/dist/index80.mjs +85 -27
  192. package/dist/index81.mjs +28 -8
  193. package/dist/index82.mjs +8 -74
  194. package/dist/index83.mjs +74 -3
  195. package/dist/index84.mjs +4 -2
  196. package/dist/index85.mjs +2 -83
  197. package/dist/index86.mjs +81 -52
  198. package/dist/index87.mjs +53 -5
  199. package/dist/index88.mjs +5 -4
  200. package/dist/index89.mjs +4 -178
  201. package/dist/index90.mjs +174 -48
  202. package/dist/index91.mjs +51 -67
  203. package/dist/index92.mjs +69 -34
  204. package/dist/index93.mjs +31 -40
  205. package/dist/index94.mjs +43 -2
  206. package/dist/index96.mjs +1 -1
  207. package/dist/index97.mjs +1 -1
  208. package/dist/index98.mjs +6 -6
  209. package/dist/index99.mjs +4 -4
  210. package/dist/providers/MetaPixelProvider.d.ts +10 -5
  211. package/dist/providers/MetaPixelProvider.d.ts.map +1 -1
  212. package/dist/providers/StorefrontProvider.d.ts.map +1 -1
  213. package/dist/styles.css +1 -1
  214. package/package.json +12 -11
  215. package/src/components/CartItem.stories.tsx +5 -5
  216. package/src/components/Checkout.stories.tsx +16 -15
  217. package/src/components/Checkout.tsx +42 -0
  218. package/src/components/ShoppingCart.stories.tsx +17 -16
  219. package/src/components/ShoppingCart.tsx +3 -11
  220. package/src/contexts/CartContext.tsx +70 -6
  221. package/src/providers/MetaPixelProvider.tsx +24 -16
  222. package/src/providers/StorefrontProvider.tsx +4 -1
  223. 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 a, jsx as e, Fragment as pe } from "react/jsx-runtime";
3
- import { useState as N, useEffect as q, useMemo as re, useCallback as ve } from "react";
4
- import { object as $, string as y, ValidationError as Ne } from "./index39.mjs";
2
+ import { jsxs as 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 ge } from "./index35.mjs";
8
- import { useCart as be } from "./index3.mjs";
9
- import { Modal as ae } from "./index16.mjs";
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 se } from "./index18.mjs";
12
- import { Button as L } from "./index13.mjs";
13
- import { Loader2 as R, ChevronLeft as xe, ChevronRight as we, CheckCircle as Ce, Package as Pe, Mail as ke, Phone as Me, Zap as qe, Banknote as Ie, ChevronDown as Ze } from "lucide-react";
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 je from "./index40.mjs";
16
- import { usePaystackPayment as Se } from "./index41.mjs";
17
- const ze = (d) => d.replace(/\D/g, ""), Fe = $({
18
- firstName: y().required("First name is required").min(2, "First name must be at least 2 characters").max(50, "First name must be less than 50 characters"),
19
- lastName: y().required("Last name is required").min(2, "Last name must be at least 2 characters").max(50, "Last name must be less than 50 characters"),
20
- email: y().required("Email is required").email("Please enter a valid email address"),
21
- phone: y().required("Phone number is required").test("nigerian-phone", "Please enter a valid Nigerian phone number (e.g. 0812 564 8668)", (d) => {
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 = ze(d);
23
+ const M = Fe(d);
24
24
  return [
25
25
  /^0[789]\d{9}$/
26
26
  // 0xxxxxxxxx (11 digits total)
27
- ].some((f) => f.test(M));
27
+ ].some((p) => p.test(M));
28
28
  })
29
- }), Le = $({
30
- address: y().required("Street address is required").min(10, "Please provide a complete address"),
31
- city: y().required("City is required").min(3, "City name must be at least 3 characters"),
32
- state: y().required("State is required").test("not-empty", "State is required", (d) => !!d && d.trim() !== ""),
33
- deliveryZoneId: y().required("Delivery zone is required").test("not-empty", "Delivery zone is required", (d) => !!d && d.trim() !== "")
34
- }), Be = $({
35
- paymentMethod: y().oneOf(["cod", "online"], "Please select a payment method").required("Payment method is required")
29
+ }), 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 Ee({
37
+ function De({
38
38
  isOpen: d,
39
39
  onClose: M,
40
- initialData: l,
41
- onSuccess: f,
42
- onError: c,
43
- submitButtonText: ne = "Place Order",
44
- refundPolicy: I
40
+ initialData: n,
41
+ onSuccess: p,
42
+ onError: o,
43
+ submitButtonText: ie = "Place Order",
44
+ refundPolicy: j
45
45
  }) {
46
- var J, Q, U, X, E, D, ee, te;
47
- const le = "pk_live_dfb74efb5f74d2acbc253d5ca396ab9015ef0fa7", [o, p] = N("customer"), [Z, de] = N(void 0), [g, G] = N(void 0), [u, B] = N(null), { refetch: K, isLoading: O, cart: s, updateCartMutation: T, checkoutMutation: ie, clearAndCreateNewCart: V } = be(), Y = Se({
48
- publicKey: le,
46
+ var 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 n = await C.mutateAsync({
52
- firstName: r.firstName,
53
- lastName: r.lastName,
54
- email: r.email,
55
- phone: r.phone,
56
- address: r.address,
57
- city: r.city,
58
- deliveryZoneId: g || r.deliveryZoneId,
59
- paymentMethod: r.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 n) {
63
- const i = n.error;
64
- c == null || c(new Error((i == null ? void 0 : i.message) || "Checkout failed"));
62
+ if ("error" in l) {
63
+ const i = l.error;
64
+ o == null || o(new Error((i == null ? void 0 : i.message) || "Checkout failed"));
65
65
  return;
66
66
  }
67
- B(n), V(), f == null || f(n.id);
68
- } catch (n) {
69
- c == null || c(n);
67
+ T(l), V(), 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
- q(() => {
76
+ I(() => {
77
77
  d && K();
78
78
  }, [d, K]);
79
- const { data: b } = ge(((J = s == null ? void 0 : s.brand) == null ? void 0 : J.id) || "", {
80
- enabled: !!((Q = s == null ? void 0 : s.brand) != null && Q.id)
81
- }), h = re(() => b == null ? void 0 : b.find((t) => t.id === Z), [b, Z]), C = ie;
82
- q(() => {
83
- d || (B(null), p("customer"), C.reset());
79
+ const { data: 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 [r, _] = N({
86
- firstName: (l == null ? void 0 : l.firstName) || "",
87
- lastName: (l == null ? void 0 : l.lastName) || "",
88
- email: (l == null ? void 0 : l.email) || "",
89
- phone: (l == null ? void 0 : l.phone) || "",
90
- address: (l == null ? void 0 : l.address) || "",
91
- city: (l == null ? void 0 : l.city) || "",
92
- deliveryZoneId: (l == null ? void 0 : l.deliveryZoneId) || "",
93
- paymentMethod: (l == null ? void 0 : l.paymentMethod) || "online",
94
- notes: (l == null ? void 0 : l.notes) || ""
85
+ const [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
- q(() => {
97
- d && p("customer");
96
+ I(() => {
97
+ d && v("customer");
98
98
  }, [d]);
99
- const [H, W] = N(!1);
100
- q(() => {
101
- d && s && !l && !H && (_((t) => {
102
- var n;
99
+ const [U, J] = 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: ((n = s.deliveryZone) == null ? void 0 : n.id) || t.deliveryZoneId
109
+ deliveryZoneId: ((l = s.deliveryZone) == null ? void 0 : l.id) || t.deliveryZoneId
110
110
  };
111
- }), W(!0)), d || W(!1);
112
- }, [d, s, l, H]), q(() => {
113
- if (g) {
114
- const t = h == null ? void 0 : h.zones.find((n) => n.id === g);
115
- t && _((n) => ({
116
- ...n,
111
+ }), J(!0)), d || J(!1);
112
+ }, [d, s, n, U]), I(() => {
113
+ if (h) {
114
+ const t = m == null ? void 0 : m.zones.find((l) => l.id === h);
115
+ t && A((l) => ({
116
+ ...l,
117
117
  paymentMethod: t.allowOnline ? "online" : "cod"
118
118
  }));
119
119
  }
120
- }, [g, h]);
121
- const [m, j] = N({}), [A, ce] = N(!1), v = (t) => {
122
- const { name: n, value: i } = t.target;
123
- _((x) => ({ ...x, [n]: i })), m[n] && j((x) => ({ ...x, [n]: void 0 }));
124
- }, S = ve(
120
+ }, [h, m]);
121
+ const [u, S] = 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 n = r[t];
127
- if (!n) return;
126
+ const l = a[t];
127
+ if (!l) return;
128
128
  const i = {};
129
- t === "firstName" ? i.customerFirstName = n : t === "lastName" ? i.customerLastName = n : t === "email" ? i.customerEmail = n : t === "phone" && (i.customerPhone = n), T.mutate(i);
129
+ t === "firstName" ? i.customerFirstName = l : t === "lastName" ? i.customerLastName = l : t === "email" ? i.customerEmail = l : t === "phone" && (i.customerPhone = l), _.mutate(i);
130
130
  },
131
- [r, T]
132
- ), z = (t) => {
133
- const n = {};
131
+ [a, _]
132
+ ), F = (t) => {
133
+ const l = {};
134
134
  try {
135
135
  if (t === "customer")
136
- Fe.validateSync(r, { abortEarly: !1 });
136
+ Le.validateSync(a, { abortEarly: !1 });
137
137
  else if (t === "delivery") {
138
138
  const i = {
139
- address: r.address,
140
- city: r.city,
141
- state: Z || r.state || "",
142
- deliveryZoneId: g || r.deliveryZoneId || ""
139
+ address: a.address,
140
+ city: a.city,
141
+ state: Z || a.state || "",
142
+ deliveryZoneId: h || a.deliveryZoneId || ""
143
143
  };
144
- Le.validateSync(i, { abortEarly: !1 });
145
- } else t === "payment" && Be.validateSync(r, { abortEarly: !1 });
144
+ Be.validateSync(i, { abortEarly: !1 });
145
+ } else t === "payment" && Te.validateSync(a, { abortEarly: !1 });
146
146
  } catch (i) {
147
- i instanceof Ne && i.inner.forEach((x) => {
148
- x.path && (n[x.path] = x.message);
147
+ i instanceof xe && i.inner.forEach((x) => {
148
+ x.path && (l[x.path] = x.message);
149
149
  });
150
150
  }
151
- return j(n), Object.keys(n).length === 0;
152
- }, oe = () => {
153
- z(o) && (o === "customer" ? p("delivery") : o === "delivery" && p("payment"));
154
- }, me = () => {
155
- o === "payment" ? p("delivery") : o === "delivery" && p("customer");
156
- }, ue = async () => {
157
- if (!z("customer")) {
158
- p("customer");
151
+ return S(l), Object.keys(l).length === 0;
152
+ }, 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 (!z("delivery")) {
162
- p("delivery");
161
+ if (!F("delivery")) {
162
+ v("delivery");
163
163
  return;
164
164
  }
165
- if (z("payment")) {
166
- if (r.paymentMethod === "online") {
167
- if (!Y.isLoaded) {
168
- c == null || c(new Error("Payment system is loading. Please try again."));
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
- Y.initializePayment({
173
- email: r.email || (s == null ? void 0 : s.customerEmail) || "customer@example.com",
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: `${r.firstName} ${r.lastName}`
182
+ value: `${a.firstName} ${a.lastName}`
183
183
  },
184
184
  {
185
185
  display_name: "Phone Number",
186
186
  variable_name: "phone_number",
187
- value: r.phone
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: r.firstName,
197
- lastName: r.lastName,
198
- email: r.email,
199
- phone: r.phone,
200
- address: r.address,
201
- city: r.city,
202
- deliveryZoneId: g || r.deliveryZoneId,
203
- paymentMethod: r.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 n = t.error;
207
- c == null || c(new Error((n == null ? void 0 : n.message) || "Checkout failed"));
206
+ const l = t.error;
207
+ o == null || o(new Error((l == null ? void 0 : l.message) || "Checkout failed"));
208
208
  return;
209
209
  }
210
- B(t), V(), f == null || f(t.id);
210
+ T(t), V(), p == null || p(t.id);
211
211
  } catch (t) {
212
- c == null || c(t);
212
+ o == null || o(t);
213
213
  }
214
214
  }
215
- }, he = {
215
+ }, pe = {
216
216
  customer: "Customer Information",
217
217
  delivery: "Delivery Address",
218
218
  payment: "Payment Method"
219
- }, ye = re(() => he[o], [o]), fe = /* @__PURE__ */ a("div", { className: "space-y-3", children: [
220
- (o === "payment" || o === "delivery") && ((U = s == null ? void 0 : s.pricing) == null ? void 0 : U.total) && /* @__PURE__ */ a("div", { className: "text-sm text-black relative", children: [
221
- O && /* @__PURE__ */ e("div", { className: "absolute flex items-center justify-center inset-0 bg-white opacity-50", children: /* @__PURE__ */ e(R, { className: "animate-spin text-accent-500" }) }),
222
- /* @__PURE__ */ a("div", { className: "flex items-center justify-between font-medium", children: [
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(((X = s == null ? void 0 : s.pricing) == null ? void 0 : X.subtotal) ?? 0) })
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__ */ a("div", { className: "flex items-center justify-between font-medium", children: [
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__ */ a("span", { className: "text-green-600", children: [
228
+ /* @__PURE__ */ r("span", { className: "text-green-600", children: [
229
229
  "-",
230
- k(((D = (E = s == null ? void 0 : s.pricing) == null ? void 0 : E.discount) == null ? void 0 : D.amount) ?? 0)
230
+ 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__ */ a("div", { className: "flex items-center justify-between font-medium", children: [
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(((ee = s == null ? void 0 : s.pricing) == null ? void 0 : ee.deliveryCharge) ?? 0) })
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__ */ a("div", { className: "flex items-center justify-between font-medium", children: [
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(((te = s == null ? void 0 : s.pricing) == null ? void 0 : te.total) ?? 0) })
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__ */ a("div", { className: "flex gap-3", children: [
244
- o !== "customer" && /* @__PURE__ */ a(
245
- L,
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: me,
249
+ onClick: ye,
250
250
  className: "flex-1 border-gray-400",
251
251
  size: "lg",
252
252
  children: [
253
- /* @__PURE__ */ e(xe, { className: "mr-2 h-4 w-4" }),
253
+ /* @__PURE__ */ e(Pe, { className: "mr-2 h-4 w-4" }),
254
254
  "Back"
255
255
  ]
256
256
  }
257
257
  ),
258
- o !== "payment" ? /* @__PURE__ */ a(
259
- L,
258
+ c !== "payment" ? /* @__PURE__ */ r(
259
+ B,
260
260
  {
261
261
  type: "button",
262
- onClick: oe,
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(we, { className: "ml-2 h-4 w-4" })
267
+ /* @__PURE__ */ e(ke, { className: "ml-2 h-4 w-4" })
268
268
  ]
269
269
  }
270
270
  ) : /* @__PURE__ */ e(
271
- L,
271
+ B,
272
272
  {
273
273
  type: "button",
274
- onClick: ue,
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__ */ a(pe, { children: [
279
- /* @__PURE__ */ e(R, { className: "mr-2 h-4 w-4 animate-spin" }),
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
- ] }) : ne
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
- ] }), F = (t) => !(s != null && s.availablePaymentMethods.includes(t));
287
- return u ? /* @__PURE__ */ e(
288
- ae,
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
- L,
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__ */ a("div", { className: "text-center space-y-6", children: [
305
- /* @__PURE__ */ e("div", { className: "flex justify-center", children: /* @__PURE__ */ e("div", { className: "w-20 h-20 bg-green-100 rounded-full flex items-center justify-center", children: /* @__PURE__ */ e(Ce, { className: "h-12 w-12 text-green-600" }) }) }),
306
- /* @__PURE__ */ a("div", { className: "space-y-2", children: [
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__ */ 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: [
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
- u.orderNumber
315
+ y.orderNumber
316
316
  ] })
317
317
  ] }),
318
- /* @__PURE__ */ a("div", { className: "border-t border-gray-200 pt-4 space-y-3", children: [
319
- /* @__PURE__ */ a("div", { className: "flex justify-between text-sm", children: [
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__ */ a("span", { className: "font-medium text-gray-900", children: [
322
- u.firstName,
321
+ /* @__PURE__ */ r("span", { className: "font-medium text-gray-900", children: [
322
+ y.firstName,
323
323
  " ",
324
- u.lastName
324
+ y.lastName
325
325
  ] })
326
326
  ] }),
327
- /* @__PURE__ */ a("div", { className: "flex justify-between text-sm", children: [
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: u.phone })
329
+ /* @__PURE__ */ e("span", { className: "font-medium text-gray-900", children: y.phone })
330
330
  ] }),
331
- u.email && /* @__PURE__ */ a("div", { className: "flex justify-between text-sm", children: [
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: u.email })
333
+ /* @__PURE__ */ e("span", { className: "font-medium text-gray-900", children: y.email })
334
334
  ] }),
335
- /* @__PURE__ */ a("div", { className: "flex justify-between text-sm", children: [
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: u.paymentMethod === "cod" ? "Cash on Delivery" : "Online Payment" })
337
+ /* @__PURE__ */ e("span", { className: "font-medium text-gray-900", children: y.paymentMethod === "cod" ? "Cash on Delivery" : "Online Payment" })
338
338
  ] }),
339
- /* @__PURE__ */ a("div", { className: "flex justify-between text-sm", children: [
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(u.totalPrice) })
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__ */ a("p", { className: "text-sm text-blue-900", children: [
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
- ae,
353
+ se,
354
354
  {
355
355
  isOpen: d,
356
356
  onClose: M,
357
- title: ye,
358
- footer: fe,
357
+ title: ve,
358
+ footer: Ne,
359
359
  size: "lg",
360
360
  contentClassName: "p-0",
361
- children: O ? /* @__PURE__ */ e("div", { className: "flex items-center justify-center min-h-[300px]", children: /* @__PURE__ */ e(R, { className: "h-8 w-8 animate-spin text-gray-600" }) }) : /* @__PURE__ */ e("div", { className: "w-full overflow-hidden", children: /* @__PURE__ */ e("div", { className: "relative w-full", children: /* @__PURE__ */ a(
362
- "div",
363
- {
364
- className: w(
365
- "flex transition-transform duration-300 ease-in-out w-full",
366
- o === "customer" && "translate-x-0",
367
- o === "delivery" && "-translate-x-full",
368
- o === "payment" && "-translate-x-[200%]"
369
- ),
370
- children: [
371
- /* @__PURE__ */ e("div", { className: "w-full min-w-full flex-shrink-0 p-4", children: /* @__PURE__ */ e("div", { className: "space-y-4", children: /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
372
- /* @__PURE__ */ e(
373
- P,
374
- {
375
- label: "First Name",
376
- type: "text",
377
- name: "firstName",
378
- value: r.firstName,
379
- onChange: v,
380
- onBlur: () => S("firstName"),
381
- error: m.firstName,
382
- autoCorrect: "off",
383
- required: !0
384
- }
385
- ),
386
- /* @__PURE__ */ e(
387
- P,
388
- {
389
- label: "Last Name",
390
- type: "text",
391
- name: "lastName",
392
- value: r.lastName,
393
- onChange: v,
394
- onBlur: () => S("lastName"),
395
- error: m.lastName,
396
- autoCorrect: "off",
397
- required: !0
398
- }
399
- ),
400
- /* @__PURE__ */ e(
401
- P,
402
- {
403
- label: "Email",
404
- type: "email",
405
- name: "email",
406
- value: r.email,
407
- onChange: v,
408
- onBlur: () => S("email"),
409
- error: m.email,
410
- icon: /* @__PURE__ */ e(ke, { size: 16 }),
411
- autoCorrect: "off",
412
- required: !0
413
- }
414
- ),
415
- /* @__PURE__ */ e(
416
- P,
417
- {
418
- label: "Phone Number",
419
- type: "tel",
420
- name: "phone",
421
- value: r.phone,
422
- onChange: v,
423
- onBlur: () => S("phone"),
424
- placeholder: "e.g. 08012345678",
425
- maxLength: 18,
426
- error: m.phone,
427
- icon: /* @__PURE__ */ e(Me, { size: 16 }),
428
- autoCorrect: "off",
429
- required: !0,
430
- className: "font-semibold"
431
- }
432
- )
433
- ] }) }) }),
434
- /* @__PURE__ */ e("div", { className: "w-full min-w-full flex-shrink-0 p-4", children: /* @__PURE__ */ a("div", { className: "space-y-4", children: [
435
- /* @__PURE__ */ e(
436
- P,
437
- {
438
- label: "Street Address",
439
- type: "text",
440
- name: "address",
441
- value: r.address,
442
- onChange: v,
443
- error: m.address,
444
- autoCorrect: "off",
445
- required: !0
446
- }
447
- ),
448
- /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
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: "Area",
392
+ label: "First Name",
453
393
  type: "text",
454
- name: "city",
455
- value: r.city,
456
- onChange: v,
457
- error: m.city,
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__ */ a(
463
- se,
403
+ /* @__PURE__ */ e(
404
+ P,
464
405
  {
465
- label: "State",
466
- name: "state",
467
- value: Z || "",
468
- onChange: (t) => {
469
- G("");
470
- const n = t.target.value;
471
- de(n || void 0), m.state && j((i) => ({ ...i, state: void 0 }));
472
- },
473
- error: m.state,
474
- required: !0,
475
- children: [
476
- /* @__PURE__ */ e("option", { disabled: !0, value: "", children: "Select State" }),
477
- b == null ? void 0 : b.map((t) => /* @__PURE__ */ e("option", { value: t.id, children: t.name }, t.id))
478
- ]
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__ */ a(
482
- se,
432
+ /* @__PURE__ */ e(
433
+ P,
483
434
  {
484
- label: "Delivery Zone",
485
- value: g || "",
486
- onChange: (t) => {
487
- const n = t.target.value;
488
- G(n || void 0), m.deliveryZoneId && j((i) => ({ ...i, deliveryZoneId: void 0 })), n && T.mutate({ deliveryZoneId: n });
489
- },
490
- disabled: !h,
491
- error: m.deliveryZoneId,
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
- children: [
494
- /* @__PURE__ */ e("option", { disabled: !0, value: "", children: h ? "Select Delivery Zone" : "Select State First" }),
495
- h == null ? void 0 : h.zones.map((t) => /* @__PURE__ */ a("option", { value: t.id, children: [
496
- t.name,
497
- " (",
498
- k(t.deliveryCost),
499
- ")"
500
- ] }, t.id))
501
- ]
447
+ className: "font-semibold"
502
448
  }
503
449
  )
504
- ] })
505
- ] }) }),
506
- /* @__PURE__ */ e("div", { className: "w-full min-w-full flex-shrink-0 p-4", children: /* @__PURE__ */ a("div", { className: "space-y-6", children: [
507
- /* @__PURE__ */ a("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4", children: [
508
- /* @__PURE__ */ e("div", { className: "relative", children: /* @__PURE__ */ a(
509
- "label",
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
- className: w(
512
- "flex items-center justify-center relative p-4 border-2 rounded-xl cursor-pointer transition-all duration-200",
513
- r.paymentMethod === "online" ? "border-accent-500 bg-accent-50" : "border-gray-200 hover:border-gray-300",
514
- F("online") && "opacity-50 cursor-not-allowed"
515
- ),
516
- children: [
517
- /* @__PURE__ */ e(
518
- "input",
519
- {
520
- type: "radio",
521
- name: "paymentMethod",
522
- value: "online",
523
- disabled: F("online"),
524
- checked: r.paymentMethod === "online",
525
- onChange: v,
526
- className: "sr-only"
527
- }
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
- /* @__PURE__ */ a("div", { className: "flex flex-col items-center text-center space-y-3", children: [
533
+ children: [
530
534
  /* @__PURE__ */ e(
531
- "div",
535
+ "input",
532
536
  {
533
- className: w(
534
- "p-3 rounded-full",
535
- r.paymentMethod === "online" ? "bg-accent-100 text-accent-600" : "bg-gray-100 text-gray-600"
536
- ),
537
- children: /* @__PURE__ */ e(qe, { size: 24 })
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__ */ 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" }),
546
+ /* @__PURE__ */ r("div", { className: "flex flex-col items-center text-center space-y-3", children: [
543
547
  /* @__PURE__ */ e(
544
- "img",
548
+ "div",
545
549
  {
546
- src: je,
547
- alt: "Paystack",
548
- className: "h-4 w-auto mt-2 mx-auto"
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
- r.paymentMethod === "online" && /* @__PURE__ */ e("div", { className: "absolute top-2 right-2", children: /* @__PURE__ */ e("div", { className: "w-5 h-5 bg-accent-600 rounded-full flex items-center justify-center", children: /* @__PURE__ */ e("div", { className: "w-2 h-2 bg-white rounded-full" }) }) })
554
- ]
555
- }
556
- ) }),
557
- /* @__PURE__ */ a(
558
- "label",
559
- {
560
- className: w(
561
- "flex items-center justify-center relative p-4 border-2 rounded-xl cursor-pointer transition-all duration-200",
562
- r.paymentMethod === "cod" ? "border-accent-500 bg-accent-50" : "border-gray-200 hover:border-gray-300",
563
- F("cod") && "opacity-50 cursor-not-allowed"
564
- ),
565
- children: [
566
- /* @__PURE__ */ e(
567
- "input",
568
- {
569
- type: "radio",
570
- name: "paymentMethod",
571
- value: "cod",
572
- disabled: F("cod"),
573
- checked: r.paymentMethod === "cod",
574
- onChange: v,
575
- className: "sr-only"
576
- }
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
- /* @__PURE__ */ a("div", { className: "flex flex-col items-center text-center space-y-3", children: [
582
+ children: [
579
583
  /* @__PURE__ */ e(
580
- "div",
584
+ "input",
581
585
  {
582
- className: w(
583
- "p-3 rounded-full",
584
- r.paymentMethod === "cod" ? "bg-accent-100 text-accent-600" : "bg-gray-100 text-gray-600"
585
- ),
586
- children: /* @__PURE__ */ e(Ie, { size: 24 })
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__ */ a("div", { children: [
590
- /* @__PURE__ */ e("div", { className: "font-semibold text-gray-900", children: "Pay on Delivery" }),
591
- /* @__PURE__ */ e("div", { className: "text-sm text-gray-500 mt-1", children: "Cash when item arrives" })
592
- ] })
593
- ] }),
594
- r.paymentMethod === "cod" && /* @__PURE__ */ e("div", { className: "absolute top-2 right-2", children: /* @__PURE__ */ e("div", { className: "w-5 h-5 bg-accent-600 rounded-full flex items-center justify-center", children: /* @__PURE__ */ e("div", { className: "w-2 h-2 bg-white rounded-full" }) }) })
595
- ]
596
- }
597
- )
598
- ] }),
599
- m.paymentMethod && /* @__PURE__ */ e("p", { className: "text-red-600 text-sm", children: m.paymentMethod }),
600
- I && /* @__PURE__ */ a("div", { className: "border border-gray-200 rounded-lg", children: [
601
- /* @__PURE__ */ a(
602
- "button",
603
- {
604
- type: "button",
605
- onClick: () => ce(!A),
606
- className: "overflow-hidden w-full flex items-center overflow-hidden rounded-lg rounded-b-none justify-between p-4 text-left hover:bg-gray-50 transition-colors",
607
- children: [
608
- /* @__PURE__ */ e("span", { className: "text-sm font-medium text-gray-700", children: I.title || "🤔 Curious about Refunds?" }),
609
- /* @__PURE__ */ e(
610
- Ze,
611
- {
612
- size: 16,
613
- className: w(
614
- "transform transition-transform duration-200 text-gray-500",
615
- A && "rotate-180"
616
- )
617
- }
618
- )
619
- ]
620
- }
621
- ),
622
- /* @__PURE__ */ e(
623
- "div",
624
- {
625
- className: w(
626
- "overflow-hidden transition-all duration-300 ease-in-out",
627
- A ? "max-h-96 opacity-100" : "max-h-0 opacity-0"
628
- ),
629
- children: /* @__PURE__ */ e("div", { className: "px-4 pb-4 border-t border-gray-100", children: /* @__PURE__ */ e("div", { className: "text-sm text-gray-600 space-y-3 pt-4", children: I.policies && /* @__PURE__ */ a("div", { children: [
630
- /* @__PURE__ */ e("h4", { className: "font-bold text-gray-800 mb-2", children: "Our Refund Policy" }),
631
- /* @__PURE__ */ e("ul", { className: "space-y-1 ml-4", children: I.policies.map((t, n) => /* @__PURE__ */ a("li", { className: "flex items-start", children: [
632
- /* @__PURE__ */ e("span", { className: "text-green-600 mr-2", children: "✓" }),
633
- /* @__PURE__ */ e("span", { children: t })
634
- ] }, n)) })
635
- ] }) }) })
636
- }
637
- )
638
- ] })
639
- ] }) })
640
- ]
641
- }
642
- ) }) })
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
- Ee as Checkout
665
+ De as Checkout
648
666
  };