@odus/checkout 0.30.0-beta.0 → 0.30.0-beta.2
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/checkout.es.js +707 -581
- package/dist/elements.es.js +12 -21
- package/dist/package.json +11 -1
- package/dist/phone.js +10 -2
- package/dist/shared.js +575 -578
- package/package.json +11 -1
package/dist/checkout.es.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { l as
|
|
2
|
-
import { q as
|
|
3
|
-
const
|
|
1
|
+
import { l as ge, c as ue, a as fe, f as j, d as ye, C as k, I as me, g as be, S as V, b as Q, H as ve, V as ee, e as D, A as Se, P as Ee, E as Ce, h as Fe, i as Me, j as Ne, k as we, m as Pe, n as ke, F as Ae, o as De, p as Ie } from "./shared.js";
|
|
2
|
+
import { q as Vt, r as _t, s as Rt, t as Bt, u as Ut, v as Ot, w as Ht, x as zt } from "./shared.js";
|
|
3
|
+
const F = {
|
|
4
4
|
// Checkout lifecycle events
|
|
5
5
|
CHECKOUT_INITIALIZED: "checkout.initialized",
|
|
6
6
|
CHECKOUT_MOUNTED: "checkout.mounted",
|
|
@@ -16,11 +16,11 @@ const C = {
|
|
|
16
16
|
PAYMENT_AUTHORIZED: "payment.authorized",
|
|
17
17
|
PAYMENT_FAILED: "payment.failed",
|
|
18
18
|
PAYMENT_ACTION_REQUIRED: "payment.action_required"
|
|
19
|
-
},
|
|
19
|
+
}, te = {
|
|
20
20
|
PAYMENT_AUTHORIZATION_TIME: "payment.authorization_time",
|
|
21
21
|
CHECKOUT_LOAD_TIME: "checkout.load_time",
|
|
22
22
|
FORM_RENDER_TIME: "form.render_time"
|
|
23
|
-
},
|
|
23
|
+
}, xe = /^\s*at (?:(.+?) ?\()?((?:file|https?|chrome-extension|webpack-internal):\/\/.+?):(\d+):(\d+)\)?\s*$/, Te = /^([^@]+)@((?:file|https?|chrome-extension|webpack-internal):\/\/[^\s:]+):(\d+):(\d+)$/, Le = /^(?:([^@]+)@)?((?:file|https?):\/\/[^\s:]+):(\d+):(\d+)$/, G = (i) => {
|
|
24
24
|
if (!i)
|
|
25
25
|
return [];
|
|
26
26
|
const e = [], t = i.split(`
|
|
@@ -29,7 +29,7 @@ const C = {
|
|
|
29
29
|
const a = s.trim();
|
|
30
30
|
if (!a)
|
|
31
31
|
continue;
|
|
32
|
-
let n =
|
|
32
|
+
let n = xe.exec(a);
|
|
33
33
|
if (n) {
|
|
34
34
|
e.push({
|
|
35
35
|
function: n[1] || "(anonymous)",
|
|
@@ -39,7 +39,7 @@ const C = {
|
|
|
39
39
|
});
|
|
40
40
|
continue;
|
|
41
41
|
}
|
|
42
|
-
n =
|
|
42
|
+
n = Te.exec(a) ?? Le.exec(a), n && e.push({
|
|
43
43
|
function: n[1] || "(anonymous)",
|
|
44
44
|
filename: n[2],
|
|
45
45
|
lineno: parseInt(n[3], 10),
|
|
@@ -47,9 +47,9 @@ const C = {
|
|
|
47
47
|
});
|
|
48
48
|
}
|
|
49
49
|
return e;
|
|
50
|
-
},
|
|
51
|
-
let
|
|
52
|
-
const
|
|
50
|
+
}, Ve = "@odus/telemetry", _e = "0.0.1";
|
|
51
|
+
let H, z, J;
|
|
52
|
+
const Re = () => {
|
|
53
53
|
if (typeof navigator > "u")
|
|
54
54
|
return {};
|
|
55
55
|
const i = navigator.userAgent;
|
|
@@ -66,36 +66,36 @@ const _e = () => {
|
|
|
66
66
|
viewportHeight: String(window.innerHeight),
|
|
67
67
|
userAgent: i
|
|
68
68
|
};
|
|
69
|
-
}, Be = () => typeof window > "u" ? {} : { url: window.location.href },
|
|
70
|
-
|
|
71
|
-
},
|
|
72
|
-
|
|
73
|
-
},
|
|
74
|
-
|
|
75
|
-
}, He = (i) => {
|
|
76
|
-
O = i;
|
|
69
|
+
}, Be = () => typeof window > "u" ? {} : { url: window.location.href }, Ue = (i) => {
|
|
70
|
+
H = void 0, J = void 0, z = i.sessionTracking?.session ? { id: i.sessionTracking.session.id } : void 0;
|
|
71
|
+
}, Oe = (i) => {
|
|
72
|
+
H = i;
|
|
73
|
+
}, He = () => {
|
|
74
|
+
H = void 0;
|
|
77
75
|
}, ze = (i) => {
|
|
78
|
-
|
|
79
|
-
}, $e = (
|
|
80
|
-
|
|
76
|
+
z = i;
|
|
77
|
+
}, $e = (i) => {
|
|
78
|
+
J = i;
|
|
79
|
+
}, je = () => z?.id, Ke = (i) => ({
|
|
80
|
+
sdk: { name: Ve, version: _e },
|
|
81
81
|
app: i.app,
|
|
82
|
-
user:
|
|
83
|
-
session:
|
|
82
|
+
user: H,
|
|
83
|
+
session: z,
|
|
84
84
|
page: Be(),
|
|
85
|
-
browser:
|
|
86
|
-
view:
|
|
87
|
-
}),
|
|
88
|
-
let
|
|
89
|
-
const
|
|
90
|
-
if (
|
|
85
|
+
browser: Re(),
|
|
86
|
+
view: J
|
|
87
|
+
}), qe = 30, We = 250, Ye = 6e4;
|
|
88
|
+
let I = [], P = null, X = 0, _ = null, R = null;
|
|
89
|
+
const Ge = (i) => {
|
|
90
|
+
if (P)
|
|
91
91
|
return;
|
|
92
|
-
const e = i.batching?.sendTimeout ??
|
|
93
|
-
|
|
94
|
-
|
|
92
|
+
const e = i.batching?.sendTimeout ?? We;
|
|
93
|
+
P = setTimeout(() => {
|
|
94
|
+
$(i);
|
|
95
95
|
}, e);
|
|
96
|
-
},
|
|
96
|
+
}, Ze = (i, e) => {
|
|
97
97
|
const t = {
|
|
98
|
-
meta:
|
|
98
|
+
meta: Ke(e)
|
|
99
99
|
};
|
|
100
100
|
for (const s of i)
|
|
101
101
|
switch (s.type) {
|
|
@@ -113,238 +113,238 @@ const Ye = (i) => {
|
|
|
113
113
|
break;
|
|
114
114
|
}
|
|
115
115
|
return t;
|
|
116
|
-
},
|
|
117
|
-
const s = JSON.stringify(i), a =
|
|
116
|
+
}, Je = (i, e, t = !1) => {
|
|
117
|
+
const s = JSON.stringify(i), a = je(), n = {
|
|
118
118
|
"Content-Type": "application/json"
|
|
119
119
|
};
|
|
120
120
|
if (a && (n["x-faro-session-id"] = a), t && typeof navigator < "u" && navigator.sendBeacon) {
|
|
121
|
-
const
|
|
122
|
-
navigator.sendBeacon(e,
|
|
121
|
+
const o = new Blob([s], { type: "application/json" });
|
|
122
|
+
navigator.sendBeacon(e, o);
|
|
123
123
|
return;
|
|
124
124
|
}
|
|
125
|
-
const r = s.length <
|
|
125
|
+
const r = s.length < Ye;
|
|
126
126
|
fetch(e, {
|
|
127
127
|
method: "POST",
|
|
128
128
|
headers: n,
|
|
129
129
|
body: s,
|
|
130
130
|
keepalive: r
|
|
131
|
-
}).then((
|
|
132
|
-
if (
|
|
133
|
-
const d =
|
|
134
|
-
|
|
131
|
+
}).then((o) => {
|
|
132
|
+
if (o.status === 429) {
|
|
133
|
+
const d = o.headers.get("Retry-After"), c = d ? parseInt(d, 10) * 1e3 : 3e4;
|
|
134
|
+
X = Date.now() + c;
|
|
135
135
|
}
|
|
136
136
|
}).catch(() => {
|
|
137
137
|
});
|
|
138
|
-
},
|
|
139
|
-
if (
|
|
138
|
+
}, $ = (i, e = !1) => {
|
|
139
|
+
if (P && (clearTimeout(P), P = null), I.length === 0)
|
|
140
140
|
return;
|
|
141
|
-
if (Date.now() <
|
|
142
|
-
|
|
141
|
+
if (Date.now() < X) {
|
|
142
|
+
I = [];
|
|
143
143
|
return;
|
|
144
144
|
}
|
|
145
|
-
const t =
|
|
146
|
-
|
|
145
|
+
const t = I;
|
|
146
|
+
I = [];
|
|
147
147
|
try {
|
|
148
|
-
let s =
|
|
148
|
+
let s = Ze(t, i);
|
|
149
149
|
if (i.beforeSend) {
|
|
150
150
|
const a = i.beforeSend(s);
|
|
151
151
|
if (!a)
|
|
152
152
|
return;
|
|
153
153
|
s = a;
|
|
154
154
|
}
|
|
155
|
-
|
|
155
|
+
Je(s, i.url, e);
|
|
156
156
|
} catch {
|
|
157
157
|
}
|
|
158
|
-
},
|
|
159
|
-
|
|
160
|
-
const t = e.batching?.itemLimit ??
|
|
161
|
-
if (
|
|
162
|
-
|
|
158
|
+
}, w = (i, e) => {
|
|
159
|
+
I.push(i);
|
|
160
|
+
const t = e.batching?.itemLimit ?? qe;
|
|
161
|
+
if (I.length >= t) {
|
|
162
|
+
$(e);
|
|
163
163
|
return;
|
|
164
164
|
}
|
|
165
|
-
|
|
166
|
-
},
|
|
167
|
-
if (
|
|
165
|
+
Ge(e);
|
|
166
|
+
}, Xe = (i) => {
|
|
167
|
+
if (I = [], X = 0, P && (clearTimeout(P), P = null), typeof document > "u")
|
|
168
168
|
return;
|
|
169
|
-
|
|
170
|
-
const e = () =>
|
|
171
|
-
|
|
169
|
+
_ && document.removeEventListener("visibilitychange", _), R && window.removeEventListener("pagehide", R);
|
|
170
|
+
const e = () => $(i, !0);
|
|
171
|
+
_ = () => {
|
|
172
172
|
document.visibilityState === "hidden" && e();
|
|
173
|
-
},
|
|
174
|
-
},
|
|
175
|
-
let
|
|
176
|
-
const
|
|
177
|
-
typeof window > "u" || (
|
|
173
|
+
}, R = e, document.addEventListener("visibilitychange", _), window.addEventListener("pagehide", R);
|
|
174
|
+
}, se = () => (/* @__PURE__ */ new Date()).toISOString();
|
|
175
|
+
let ne = null, ie = null;
|
|
176
|
+
const Qe = (i) => {
|
|
177
|
+
typeof window > "u" || (ne = (e) => {
|
|
178
178
|
const t = e.error instanceof Error ? e.error : new Error(e.message);
|
|
179
|
-
|
|
179
|
+
w({
|
|
180
180
|
type: "exception",
|
|
181
181
|
payload: {
|
|
182
182
|
type: t.name,
|
|
183
183
|
value: t.message,
|
|
184
|
-
timestamp:
|
|
185
|
-
stacktrace: t.stack ? { frames:
|
|
184
|
+
timestamp: se(),
|
|
185
|
+
stacktrace: t.stack ? { frames: G(t.stack) } : void 0
|
|
186
186
|
}
|
|
187
187
|
}, i);
|
|
188
|
-
},
|
|
188
|
+
}, ie = (e) => {
|
|
189
189
|
const t = e.reason, s = t instanceof Error ? t : new Error(String(t));
|
|
190
|
-
|
|
190
|
+
w({
|
|
191
191
|
type: "exception",
|
|
192
192
|
payload: {
|
|
193
193
|
type: s.name,
|
|
194
194
|
value: s.message,
|
|
195
|
-
timestamp:
|
|
196
|
-
stacktrace: s.stack ? { frames:
|
|
195
|
+
timestamp: se(),
|
|
196
|
+
stacktrace: s.stack ? { frames: G(s.stack) } : void 0,
|
|
197
197
|
context: { source: "unhandledrejection" }
|
|
198
198
|
}
|
|
199
199
|
}, i);
|
|
200
|
-
}, window.addEventListener("error",
|
|
201
|
-
},
|
|
200
|
+
}, window.addEventListener("error", ne), window.addEventListener("unhandledrejection", ie));
|
|
201
|
+
}, ae = "odus_telemetry_session_id", K = () => {
|
|
202
202
|
const i = new Uint8Array(16);
|
|
203
203
|
return crypto.getRandomValues(i), Array.from(i, (e) => e.toString(16).padStart(2, "0")).join("");
|
|
204
|
-
},
|
|
204
|
+
}, et = (i) => {
|
|
205
205
|
if (i)
|
|
206
206
|
return i;
|
|
207
207
|
if (typeof sessionStorage > "u")
|
|
208
|
-
return
|
|
208
|
+
return K();
|
|
209
209
|
try {
|
|
210
|
-
const e = sessionStorage.getItem(
|
|
210
|
+
const e = sessionStorage.getItem(ae);
|
|
211
211
|
if (e)
|
|
212
212
|
return e;
|
|
213
|
-
const t =
|
|
214
|
-
return sessionStorage.setItem(
|
|
213
|
+
const t = K();
|
|
214
|
+
return sessionStorage.setItem(ae, t), t;
|
|
215
215
|
} catch {
|
|
216
|
-
return
|
|
216
|
+
return K();
|
|
217
217
|
}
|
|
218
|
-
},
|
|
218
|
+
}, tt = (i) => {
|
|
219
219
|
if (!i.sessionTracking?.enabled)
|
|
220
220
|
return;
|
|
221
|
-
const e =
|
|
222
|
-
|
|
223
|
-
},
|
|
221
|
+
const e = et(i.sessionTracking.session?.id);
|
|
222
|
+
ze({ id: e });
|
|
223
|
+
}, q = () => (/* @__PURE__ */ new Date()).toISOString(), W = (i, e) => {
|
|
224
224
|
if (typeof PerformanceObserver > "u" || !PerformanceObserver.supportedEntryTypes?.includes(i))
|
|
225
225
|
return;
|
|
226
226
|
new PerformanceObserver((s) => {
|
|
227
227
|
for (const a of s.getEntries())
|
|
228
228
|
e(a);
|
|
229
229
|
}).observe({ type: i, buffered: !0 });
|
|
230
|
-
},
|
|
230
|
+
}, st = (i) => {
|
|
231
231
|
if (typeof window > "u")
|
|
232
232
|
return;
|
|
233
|
-
|
|
234
|
-
|
|
233
|
+
W("largest-contentful-paint", (t) => {
|
|
234
|
+
w({
|
|
235
235
|
type: "measurement",
|
|
236
236
|
payload: {
|
|
237
237
|
type: "web-vitals",
|
|
238
238
|
values: { lcp: t.startTime },
|
|
239
|
-
timestamp:
|
|
239
|
+
timestamp: q()
|
|
240
240
|
}
|
|
241
241
|
}, i);
|
|
242
242
|
});
|
|
243
243
|
let e = 0;
|
|
244
|
-
|
|
244
|
+
W("layout-shift", (t) => {
|
|
245
245
|
const s = t;
|
|
246
|
-
s.hadRecentInput || (e += s.value,
|
|
246
|
+
s.hadRecentInput || (e += s.value, w({
|
|
247
247
|
type: "measurement",
|
|
248
248
|
payload: {
|
|
249
249
|
type: "web-vitals",
|
|
250
250
|
values: { cls: e },
|
|
251
|
-
timestamp:
|
|
251
|
+
timestamp: q()
|
|
252
252
|
}
|
|
253
253
|
}, i));
|
|
254
|
-
}),
|
|
254
|
+
}), W("event", (t) => {
|
|
255
255
|
const s = t;
|
|
256
|
-
s.duration > 0 &&
|
|
256
|
+
s.duration > 0 && w({
|
|
257
257
|
type: "measurement",
|
|
258
258
|
payload: {
|
|
259
259
|
type: "web-vitals",
|
|
260
260
|
values: { inp: s.duration },
|
|
261
|
-
timestamp:
|
|
261
|
+
timestamp: q()
|
|
262
262
|
}
|
|
263
263
|
}, i);
|
|
264
264
|
});
|
|
265
|
-
},
|
|
265
|
+
}, O = {
|
|
266
266
|
INFO: "info",
|
|
267
267
|
WARN: "warn",
|
|
268
268
|
ERROR: "error"
|
|
269
|
-
},
|
|
270
|
-
|
|
269
|
+
}, B = () => (/* @__PURE__ */ new Date()).toISOString(), nt = (i) => {
|
|
270
|
+
Ue(i), Xe(i);
|
|
271
271
|
const e = i.instrumentations ?? {
|
|
272
272
|
errors: !0,
|
|
273
273
|
webVitals: !0,
|
|
274
274
|
session: !0
|
|
275
275
|
};
|
|
276
|
-
return e.session !== !1 &&
|
|
276
|
+
return e.session !== !1 && tt(i), e.errors !== !1 && Qe(i), e.webVitals !== !1 && st(i), {
|
|
277
277
|
pushError(t, s) {
|
|
278
|
-
|
|
278
|
+
w({
|
|
279
279
|
type: "exception",
|
|
280
280
|
payload: {
|
|
281
281
|
type: t.name,
|
|
282
282
|
value: t.message,
|
|
283
|
-
timestamp:
|
|
284
|
-
stacktrace: t.stack ? { frames:
|
|
283
|
+
timestamp: B(),
|
|
284
|
+
stacktrace: t.stack ? { frames: G(t.stack) } : void 0,
|
|
285
285
|
context: s?.context
|
|
286
286
|
}
|
|
287
287
|
}, i);
|
|
288
288
|
},
|
|
289
289
|
pushEvent(t, s) {
|
|
290
|
-
|
|
290
|
+
w({
|
|
291
291
|
type: "event",
|
|
292
292
|
payload: {
|
|
293
293
|
name: t,
|
|
294
|
-
timestamp:
|
|
294
|
+
timestamp: B(),
|
|
295
295
|
attributes: s
|
|
296
296
|
}
|
|
297
297
|
}, i);
|
|
298
298
|
},
|
|
299
299
|
pushMeasurement(t) {
|
|
300
|
-
|
|
300
|
+
w({
|
|
301
301
|
type: "measurement",
|
|
302
302
|
payload: {
|
|
303
303
|
type: t.type,
|
|
304
304
|
values: t.values,
|
|
305
|
-
timestamp:
|
|
305
|
+
timestamp: B(),
|
|
306
306
|
context: t.context
|
|
307
307
|
}
|
|
308
308
|
}, i);
|
|
309
309
|
},
|
|
310
310
|
pushLog(t, s) {
|
|
311
|
-
|
|
311
|
+
w({
|
|
312
312
|
type: "log",
|
|
313
313
|
payload: {
|
|
314
314
|
message: t.join(" "),
|
|
315
|
-
level: s?.level ??
|
|
316
|
-
timestamp:
|
|
315
|
+
level: s?.level ?? O.INFO,
|
|
316
|
+
timestamp: B(),
|
|
317
317
|
context: s?.context
|
|
318
318
|
}
|
|
319
319
|
}, i);
|
|
320
320
|
},
|
|
321
321
|
setUser(t) {
|
|
322
|
-
|
|
322
|
+
Oe(t);
|
|
323
323
|
},
|
|
324
324
|
resetUser() {
|
|
325
|
-
|
|
325
|
+
He();
|
|
326
326
|
},
|
|
327
327
|
setView(t) {
|
|
328
|
-
|
|
328
|
+
$e(t);
|
|
329
329
|
},
|
|
330
330
|
flush() {
|
|
331
|
-
|
|
331
|
+
$(i);
|
|
332
332
|
}
|
|
333
333
|
};
|
|
334
|
-
},
|
|
334
|
+
}, it = (i) => i === "test" ? "https://sandbox-analytics.odus.com/collect" : "https://analytics.odus.com/collect", at = () => {
|
|
335
335
|
if (typeof window > "u")
|
|
336
336
|
return !1;
|
|
337
337
|
const i = window.location.hostname;
|
|
338
338
|
return i === "localhost" || i === "127.0.0.1" || i === "0.0.0.0" || i === "::1" || i === "[::1]" || i.endsWith(".localhost");
|
|
339
339
|
};
|
|
340
340
|
let E = null;
|
|
341
|
-
const
|
|
341
|
+
const rt = (i) => {
|
|
342
342
|
if (E)
|
|
343
343
|
return E;
|
|
344
|
-
if (
|
|
344
|
+
if (at())
|
|
345
345
|
return null;
|
|
346
|
-
const e =
|
|
347
|
-
return E =
|
|
346
|
+
const e = it(i.environment);
|
|
347
|
+
return E = nt({
|
|
348
348
|
url: e,
|
|
349
349
|
app: {
|
|
350
350
|
name: "odus-checkout",
|
|
@@ -376,11 +376,11 @@ const at = (i) => {
|
|
|
376
376
|
return t;
|
|
377
377
|
}
|
|
378
378
|
}), E;
|
|
379
|
-
},
|
|
379
|
+
}, ot = (i, e) => {
|
|
380
380
|
E && E.pushError(i, { context: e });
|
|
381
|
-
},
|
|
381
|
+
}, M = (i, e) => {
|
|
382
382
|
E && E.pushEvent(i, e);
|
|
383
|
-
},
|
|
383
|
+
}, re = (i, e, t, s) => {
|
|
384
384
|
E && E.pushMeasurement({
|
|
385
385
|
type: i,
|
|
386
386
|
values: { [i]: e },
|
|
@@ -389,25 +389,25 @@ const at = (i) => {
|
|
|
389
389
|
...s
|
|
390
390
|
}
|
|
391
391
|
});
|
|
392
|
-
},
|
|
392
|
+
}, xt = (i, e = "info", t) => {
|
|
393
393
|
if (!E) return;
|
|
394
394
|
const s = {
|
|
395
|
-
info:
|
|
396
|
-
warn:
|
|
397
|
-
error:
|
|
395
|
+
info: O.INFO,
|
|
396
|
+
warn: O.WARN,
|
|
397
|
+
error: O.ERROR
|
|
398
398
|
};
|
|
399
399
|
E.pushLog([i], {
|
|
400
400
|
level: s[e],
|
|
401
401
|
context: t
|
|
402
402
|
});
|
|
403
|
-
},
|
|
403
|
+
}, oe = {
|
|
404
404
|
test: "tntwpdhfwng",
|
|
405
405
|
live: "TBD"
|
|
406
|
-
},
|
|
406
|
+
}, le = {
|
|
407
407
|
test: "sandbox",
|
|
408
408
|
live: "live"
|
|
409
409
|
};
|
|
410
|
-
class
|
|
410
|
+
class T {
|
|
411
411
|
vgsForm = null;
|
|
412
412
|
fields = [];
|
|
413
413
|
readyResolve;
|
|
@@ -419,9 +419,9 @@ class I {
|
|
|
419
419
|
});
|
|
420
420
|
}
|
|
421
421
|
async init(e) {
|
|
422
|
-
return this.environment = e, await
|
|
423
|
-
vaultId:
|
|
424
|
-
environment:
|
|
422
|
+
return this.environment = e, await ge({
|
|
423
|
+
vaultId: oe[e],
|
|
424
|
+
environment: le[e],
|
|
425
425
|
version: "3.2.2"
|
|
426
426
|
});
|
|
427
427
|
}
|
|
@@ -429,8 +429,8 @@ class I {
|
|
|
429
429
|
if (!this.environment)
|
|
430
430
|
throw new Error("VGS not initialized — call init() first");
|
|
431
431
|
return this.vgsForm = e.create(
|
|
432
|
-
|
|
433
|
-
|
|
432
|
+
oe[this.environment],
|
|
433
|
+
le[this.environment],
|
|
434
434
|
t
|
|
435
435
|
), this.readyResolve?.(), this.vgsForm;
|
|
436
436
|
}
|
|
@@ -445,10 +445,44 @@ class I {
|
|
|
445
445
|
placeholder: s.cardNumber,
|
|
446
446
|
autoComplete: "cc-number",
|
|
447
447
|
validations: ["required", "validCardNumber"],
|
|
448
|
+
addCardBrands: [
|
|
449
|
+
{
|
|
450
|
+
type: "visa",
|
|
451
|
+
pattern: /^4/,
|
|
452
|
+
format: /(\d{1,4})/g,
|
|
453
|
+
length: [16],
|
|
454
|
+
cvcLength: [3],
|
|
455
|
+
luhn: !0
|
|
456
|
+
},
|
|
457
|
+
{
|
|
458
|
+
type: "mastercard",
|
|
459
|
+
pattern: /^(5[1-5]|2[2-7])/,
|
|
460
|
+
format: /(\d{1,4})/g,
|
|
461
|
+
length: [16],
|
|
462
|
+
cvcLength: [3],
|
|
463
|
+
luhn: !0
|
|
464
|
+
},
|
|
465
|
+
{
|
|
466
|
+
type: "american-express",
|
|
467
|
+
pattern: /^3[47]/,
|
|
468
|
+
format: /(\d{1,4})(\d{1,6})?(\d{1,5})?/,
|
|
469
|
+
length: [15],
|
|
470
|
+
cvcLength: [4],
|
|
471
|
+
luhn: !0
|
|
472
|
+
},
|
|
473
|
+
{
|
|
474
|
+
type: "discover",
|
|
475
|
+
pattern: /^(6011|65|64[4-9]|622)/,
|
|
476
|
+
format: /(\d{1,4})/g,
|
|
477
|
+
length: [16, 19],
|
|
478
|
+
cvcLength: [3],
|
|
479
|
+
luhn: !0
|
|
480
|
+
}
|
|
481
|
+
],
|
|
448
482
|
css: t
|
|
449
483
|
});
|
|
450
484
|
n.on("update", (r) => {
|
|
451
|
-
a && a(
|
|
485
|
+
a && a(T.mapCardType(r.cardType));
|
|
452
486
|
}), this.fields.push(n);
|
|
453
487
|
}
|
|
454
488
|
if (e.cardExpiry) {
|
|
@@ -500,16 +534,16 @@ class I {
|
|
|
500
534
|
a(r.errors);
|
|
501
535
|
return;
|
|
502
536
|
}
|
|
503
|
-
const
|
|
504
|
-
if (!
|
|
537
|
+
const o = r?.data;
|
|
538
|
+
if (!o?.id) {
|
|
505
539
|
a(new Error("Card creation failed: no card ID returned"));
|
|
506
540
|
return;
|
|
507
541
|
}
|
|
508
542
|
if (n === 303) {
|
|
509
|
-
this.patchCard(e,
|
|
543
|
+
this.patchCard(e, o.id).then(s).catch(a);
|
|
510
544
|
return;
|
|
511
545
|
}
|
|
512
|
-
s(
|
|
546
|
+
s(T.extractCardResult(o));
|
|
513
547
|
},
|
|
514
548
|
(n) => {
|
|
515
549
|
a(n);
|
|
@@ -542,21 +576,21 @@ class I {
|
|
|
542
576
|
})
|
|
543
577
|
},
|
|
544
578
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
545
|
-
(r,
|
|
546
|
-
if (r >= 400 ||
|
|
547
|
-
n(
|
|
579
|
+
(r, o) => {
|
|
580
|
+
if (r >= 400 || o?.errors) {
|
|
581
|
+
n(o?.errors ?? new Error("Card update failed"));
|
|
548
582
|
return;
|
|
549
583
|
}
|
|
550
|
-
const d =
|
|
584
|
+
const d = o?.data;
|
|
551
585
|
if (!d?.id) {
|
|
552
586
|
n(new Error("Card update failed: no card ID returned"));
|
|
553
587
|
return;
|
|
554
588
|
}
|
|
555
|
-
const c =
|
|
589
|
+
const c = T.extractCardResult(d), m = o.included?.find(
|
|
556
590
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
557
591
|
(b) => b.type === "card_updates"
|
|
558
592
|
);
|
|
559
|
-
|
|
593
|
+
m?.attributes?.updated_values?.length && (c.updatedValues = m.attributes.updated_values), a(c);
|
|
560
594
|
},
|
|
561
595
|
(r) => {
|
|
562
596
|
n(r);
|
|
@@ -593,7 +627,7 @@ class I {
|
|
|
593
627
|
}[e] ?? "unknown" : "unknown";
|
|
594
628
|
}
|
|
595
629
|
}
|
|
596
|
-
function
|
|
630
|
+
function Y(i) {
|
|
597
631
|
return {
|
|
598
632
|
name: "Custom Appearance",
|
|
599
633
|
additionalPaymentMethods: i.additionalPaymentMethods || {},
|
|
@@ -629,7 +663,7 @@ function K(i) {
|
|
|
629
663
|
state: {
|
|
630
664
|
enabled: i.layout?.billingFields?.state?.enabled ?? !1,
|
|
631
665
|
label: i.layout?.billingFields?.state?.label,
|
|
632
|
-
|
|
666
|
+
hiddenForCountries: i.layout?.billingFields?.state?.hiddenForCountries
|
|
633
667
|
},
|
|
634
668
|
zipCode: {
|
|
635
669
|
enabled: i.layout?.billingFields?.zipCode?.enabled ?? !1,
|
|
@@ -669,7 +703,7 @@ function K(i) {
|
|
|
669
703
|
state: {
|
|
670
704
|
enabled: i.layout.shippingFields.state?.enabled ?? !1,
|
|
671
705
|
label: i.layout.shippingFields.state?.label,
|
|
672
|
-
|
|
706
|
+
hiddenForCountries: i.layout.shippingFields.state?.hiddenForCountries
|
|
673
707
|
},
|
|
674
708
|
zipCode: {
|
|
675
709
|
enabled: i.layout.shippingFields.zipCode?.enabled ?? !1,
|
|
@@ -693,16 +727,16 @@ function K(i) {
|
|
|
693
727
|
}
|
|
694
728
|
};
|
|
695
729
|
}
|
|
696
|
-
function
|
|
730
|
+
function lt({
|
|
697
731
|
appearance: i
|
|
698
732
|
}) {
|
|
699
|
-
const e =
|
|
733
|
+
const e = ue({
|
|
700
734
|
checkoutProfile: void 0,
|
|
701
735
|
isLoading: !0,
|
|
702
736
|
error: null
|
|
703
737
|
});
|
|
704
738
|
if (i) {
|
|
705
|
-
const s =
|
|
739
|
+
const s = Y(i);
|
|
706
740
|
return Promise.resolve().then(() => {
|
|
707
741
|
e.setState({
|
|
708
742
|
checkoutProfile: s,
|
|
@@ -713,7 +747,7 @@ function ot({
|
|
|
713
747
|
getState: e.getState.bind(e),
|
|
714
748
|
subscribe: e.subscribe.bind(e),
|
|
715
749
|
updateProfile: (a) => {
|
|
716
|
-
const n =
|
|
750
|
+
const n = Y(a);
|
|
717
751
|
e.setState({
|
|
718
752
|
checkoutProfile: n,
|
|
719
753
|
isLoading: !1,
|
|
@@ -762,7 +796,7 @@ function ot({
|
|
|
762
796
|
getState: e.getState.bind(e),
|
|
763
797
|
subscribe: e.subscribe.bind(e),
|
|
764
798
|
updateProfile: (s) => {
|
|
765
|
-
const a =
|
|
799
|
+
const a = Y(s);
|
|
766
800
|
e.setState({
|
|
767
801
|
checkoutProfile: a,
|
|
768
802
|
isLoading: !1,
|
|
@@ -773,8 +807,8 @@ function ot({
|
|
|
773
807
|
}
|
|
774
808
|
};
|
|
775
809
|
}
|
|
776
|
-
const
|
|
777
|
-
const i =
|
|
810
|
+
const dt = () => {
|
|
811
|
+
const i = fe(), e = ue({
|
|
778
812
|
formData: {
|
|
779
813
|
name: "",
|
|
780
814
|
email: "",
|
|
@@ -791,199 +825,223 @@ const lt = () => {
|
|
|
791
825
|
cardCvv: !1
|
|
792
826
|
},
|
|
793
827
|
isValid: !1
|
|
794
|
-
}), t = (
|
|
795
|
-
if (
|
|
796
|
-
return i.cardCvv(
|
|
797
|
-
if (
|
|
798
|
-
return i.phoneNumber(
|
|
799
|
-
const
|
|
800
|
-
return
|
|
801
|
-
}, s = (
|
|
802
|
-
const
|
|
803
|
-
return Object.keys(
|
|
804
|
-
const
|
|
805
|
-
if (
|
|
828
|
+
}), t = (l, u, y, p) => {
|
|
829
|
+
if (l === "cardCvv")
|
|
830
|
+
return i.cardCvv(u, y);
|
|
831
|
+
if (l === "phoneNumber" && p)
|
|
832
|
+
return i.phoneNumber(u, p);
|
|
833
|
+
const g = i[l];
|
|
834
|
+
return g?.(u);
|
|
835
|
+
}, s = (l) => {
|
|
836
|
+
const u = {};
|
|
837
|
+
return Object.keys(l).forEach((p) => {
|
|
838
|
+
const g = l[p];
|
|
839
|
+
if (g === void 0) return;
|
|
806
840
|
let h;
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
841
|
+
p === "cardCvv" ? h = t(p, g, l.cardNumber) : p === "phoneNumber" ? h = t(
|
|
842
|
+
p,
|
|
843
|
+
g,
|
|
810
844
|
void 0,
|
|
811
|
-
|
|
812
|
-
) : h = t(
|
|
845
|
+
l.phoneCountryCode
|
|
846
|
+
) : h = t(p, g), h && (u[p] = h);
|
|
813
847
|
}), [
|
|
814
848
|
"billingAddress",
|
|
815
849
|
"shippingAddress"
|
|
816
|
-
].forEach((
|
|
817
|
-
const
|
|
818
|
-
if (
|
|
850
|
+
].forEach((p) => {
|
|
851
|
+
const g = l[p];
|
|
852
|
+
if (g && typeof g == "object") {
|
|
819
853
|
const h = {};
|
|
820
|
-
Object.keys(
|
|
821
|
-
(
|
|
822
|
-
const
|
|
823
|
-
if (
|
|
824
|
-
const S = i[
|
|
854
|
+
Object.keys(g).forEach(
|
|
855
|
+
(v) => {
|
|
856
|
+
const f = g[v];
|
|
857
|
+
if (f === void 0) return;
|
|
858
|
+
const S = i[v];
|
|
825
859
|
if (S) {
|
|
826
|
-
const
|
|
827
|
-
|
|
860
|
+
const C = v === "state" ? i.state(f, g.country) : S(
|
|
861
|
+
f
|
|
862
|
+
);
|
|
863
|
+
C && (h[v] = C);
|
|
828
864
|
}
|
|
829
865
|
}
|
|
830
|
-
), Object.keys(h).length > 0 && (
|
|
866
|
+
), Object.keys(h).length > 0 && (u[p] = h);
|
|
831
867
|
}
|
|
832
|
-
}),
|
|
833
|
-
}, a = (
|
|
834
|
-
const
|
|
835
|
-
return Object.keys(
|
|
836
|
-
}, n = "billingAddress.", r = "shippingAddress.",
|
|
868
|
+
}), u;
|
|
869
|
+
}, a = (l) => {
|
|
870
|
+
const u = s(l);
|
|
871
|
+
return Object.keys(u).length === 0;
|
|
872
|
+
}, n = "billingAddress.", r = "shippingAddress.", o = (l) => l.startsWith(n) ? {
|
|
837
873
|
parent: "billingAddress",
|
|
838
|
-
field:
|
|
839
|
-
} :
|
|
874
|
+
field: l.slice(n.length)
|
|
875
|
+
} : l.startsWith(r) ? {
|
|
840
876
|
parent: "shippingAddress",
|
|
841
|
-
field:
|
|
842
|
-
} : null, d = (
|
|
843
|
-
const
|
|
844
|
-
if (
|
|
845
|
-
|
|
846
|
-
...
|
|
847
|
-
[
|
|
877
|
+
field: l.slice(r.length)
|
|
878
|
+
} : null, d = (l, u, y, p) => {
|
|
879
|
+
const g = { ...l };
|
|
880
|
+
if (p)
|
|
881
|
+
g[u] = {
|
|
882
|
+
...g[u],
|
|
883
|
+
[y]: p
|
|
848
884
|
};
|
|
849
885
|
else {
|
|
850
886
|
const h = {
|
|
851
|
-
...
|
|
887
|
+
...g[u]
|
|
852
888
|
};
|
|
853
|
-
delete h[
|
|
889
|
+
delete h[y], Object.keys(h).length === 0 ? delete g[u] : g[u] = h;
|
|
854
890
|
}
|
|
855
|
-
return
|
|
856
|
-
}, c = (
|
|
857
|
-
const
|
|
858
|
-
let
|
|
859
|
-
const
|
|
860
|
-
if (!
|
|
861
|
-
if (
|
|
862
|
-
const S =
|
|
863
|
-
|
|
891
|
+
return g;
|
|
892
|
+
}, c = (l, u) => {
|
|
893
|
+
const y = e.getState();
|
|
894
|
+
let p = u;
|
|
895
|
+
const g = o(l);
|
|
896
|
+
if (!g && l in j)
|
|
897
|
+
if (l === "cardCvv") {
|
|
898
|
+
const S = ye(y.formData.cardNumber) === "amex" ? 4 : 3;
|
|
899
|
+
p = j.cardCvv(u, S);
|
|
864
900
|
} else
|
|
865
|
-
|
|
901
|
+
p = j[l](u);
|
|
866
902
|
let h;
|
|
867
|
-
if (
|
|
868
|
-
const { parent:
|
|
903
|
+
if (g) {
|
|
904
|
+
const { parent: f, field: S } = g;
|
|
869
905
|
h = {
|
|
870
|
-
...
|
|
871
|
-
[
|
|
872
|
-
...
|
|
873
|
-
[S]:
|
|
906
|
+
...y.formData,
|
|
907
|
+
[f]: {
|
|
908
|
+
...y.formData[f] ?? {},
|
|
909
|
+
[S]: p
|
|
874
910
|
}
|
|
875
911
|
};
|
|
876
912
|
} else
|
|
877
913
|
h = {
|
|
878
|
-
...
|
|
879
|
-
[
|
|
914
|
+
...y.formData,
|
|
915
|
+
[l]: p
|
|
880
916
|
};
|
|
881
|
-
let
|
|
882
|
-
if (
|
|
883
|
-
const
|
|
917
|
+
let v = { ...y.errors };
|
|
918
|
+
if (l === "phoneCountryCode" && h.phoneNumber) {
|
|
919
|
+
const f = t(
|
|
884
920
|
"phoneNumber",
|
|
885
921
|
h.phoneNumber,
|
|
886
922
|
void 0,
|
|
887
|
-
|
|
923
|
+
p
|
|
888
924
|
);
|
|
889
|
-
|
|
925
|
+
f ? v.phoneNumber = f : delete v.phoneNumber;
|
|
890
926
|
}
|
|
891
|
-
if (
|
|
892
|
-
if (
|
|
893
|
-
const { parent:
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
|
|
927
|
+
if (y.touched[l])
|
|
928
|
+
if (g) {
|
|
929
|
+
const { parent: f, field: S } = g, C = h[f];
|
|
930
|
+
let N;
|
|
931
|
+
if (S === "state")
|
|
932
|
+
N = i.state(p, C?.country);
|
|
933
|
+
else {
|
|
934
|
+
const A = i[S];
|
|
935
|
+
N = A ? A(
|
|
936
|
+
p
|
|
937
|
+
) : void 0;
|
|
938
|
+
}
|
|
939
|
+
v = d(v, f, S, N);
|
|
897
940
|
} else {
|
|
898
|
-
let
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
941
|
+
let f;
|
|
942
|
+
l === "cardCvv" ? f = t(l, p, h.cardNumber) : l === "phoneNumber" ? f = t(
|
|
943
|
+
l,
|
|
944
|
+
p,
|
|
902
945
|
void 0,
|
|
903
946
|
h.phoneCountryCode
|
|
904
|
-
) :
|
|
947
|
+
) : f = t(l, p), f ? v[l] = f : delete v[l];
|
|
905
948
|
}
|
|
906
949
|
e.setState({
|
|
907
950
|
formData: h,
|
|
908
|
-
errors:
|
|
951
|
+
errors: v,
|
|
909
952
|
isValid: a(h)
|
|
910
953
|
});
|
|
911
|
-
},
|
|
912
|
-
const
|
|
913
|
-
if (
|
|
914
|
-
const { parent:
|
|
915
|
-
...
|
|
916
|
-
[
|
|
917
|
-
...
|
|
918
|
-
[S]:
|
|
954
|
+
}, m = (l, u) => {
|
|
955
|
+
const y = e.getState(), p = o(l);
|
|
956
|
+
if (p) {
|
|
957
|
+
const { parent: f, field: S } = p, C = {
|
|
958
|
+
...y.formData,
|
|
959
|
+
[f]: {
|
|
960
|
+
...y.formData[f] ?? {},
|
|
961
|
+
[S]: u
|
|
919
962
|
}
|
|
920
|
-
}
|
|
963
|
+
};
|
|
964
|
+
let N;
|
|
965
|
+
if (S === "state") {
|
|
966
|
+
const L = C[f];
|
|
967
|
+
N = i.state(u, L?.country);
|
|
968
|
+
} else {
|
|
969
|
+
const L = i[S];
|
|
970
|
+
N = L ? L(u) : void 0;
|
|
971
|
+
}
|
|
972
|
+
const A = d(y.errors, f, S, N);
|
|
921
973
|
e.setState({
|
|
922
|
-
formData:
|
|
974
|
+
formData: C,
|
|
923
975
|
touched: {
|
|
924
|
-
...
|
|
925
|
-
[
|
|
976
|
+
...y.touched,
|
|
977
|
+
[l]: !0
|
|
926
978
|
},
|
|
927
|
-
errors:
|
|
928
|
-
isValid: a(
|
|
979
|
+
errors: A,
|
|
980
|
+
isValid: a(C)
|
|
929
981
|
});
|
|
930
982
|
return;
|
|
931
983
|
}
|
|
932
|
-
const
|
|
933
|
-
...
|
|
934
|
-
[
|
|
984
|
+
const g = {
|
|
985
|
+
...y.touched,
|
|
986
|
+
[l]: !0
|
|
935
987
|
};
|
|
936
988
|
let h;
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
|
|
989
|
+
l === "cardCvv" ? h = t(l, u, y.formData.cardNumber) : l === "phoneNumber" ? h = t(
|
|
990
|
+
l,
|
|
991
|
+
u,
|
|
940
992
|
void 0,
|
|
941
|
-
|
|
942
|
-
) : h = t(
|
|
943
|
-
const
|
|
944
|
-
h ?
|
|
945
|
-
touched:
|
|
946
|
-
errors:
|
|
993
|
+
y.formData.phoneCountryCode
|
|
994
|
+
) : h = t(l, u);
|
|
995
|
+
const v = { ...y.errors };
|
|
996
|
+
h ? v[l] = h : delete v[l], e.setState({
|
|
997
|
+
touched: g,
|
|
998
|
+
errors: v
|
|
947
999
|
});
|
|
948
|
-
}, b = (
|
|
949
|
-
const
|
|
1000
|
+
}, b = (l) => {
|
|
1001
|
+
const y = {
|
|
950
1002
|
...e.getState().formData,
|
|
951
|
-
...
|
|
1003
|
+
...l
|
|
952
1004
|
};
|
|
953
1005
|
e.setState({
|
|
954
|
-
formData:
|
|
955
|
-
isValid: a(
|
|
1006
|
+
formData: y,
|
|
1007
|
+
isValid: a(y)
|
|
956
1008
|
});
|
|
957
1009
|
};
|
|
958
1010
|
return {
|
|
959
1011
|
getFormState: e.getState.bind(e),
|
|
960
1012
|
subscribe: e.subscribe.bind(e),
|
|
961
1013
|
handleChange: c,
|
|
962
|
-
handleBlur:
|
|
1014
|
+
handleBlur: m,
|
|
963
1015
|
setFormData: b,
|
|
964
1016
|
reset: e.resetState.bind(e)
|
|
965
1017
|
};
|
|
966
|
-
},
|
|
967
|
-
async function
|
|
1018
|
+
}, ct = "https://fonts.googleapis.com/css2", ht = /src:\s*url\(([^)]+\.woff2[^)]*)\)/, ut = /\/\*\s*latin\s*\*\/\s*@font-face\s*\{[^}]*src:\s*url\(([^)]+\.woff2[^)]*)\)[^}]*\}/;
|
|
1019
|
+
async function mt(i) {
|
|
968
1020
|
if (!i) return null;
|
|
969
|
-
const e = i.trim().replace(/\s+/g, "+"), t = `${
|
|
1021
|
+
const e = i.trim().replace(/\s+/g, "+"), t = `${ct}?family=${e}:wght@400;700&display=swap`;
|
|
970
1022
|
try {
|
|
971
1023
|
const s = await fetch(t);
|
|
972
1024
|
if (!s.ok) return null;
|
|
973
|
-
const a = await s.text(), n =
|
|
1025
|
+
const a = await s.text(), n = ut.exec(a);
|
|
974
1026
|
if (n?.[1]) return n[1];
|
|
975
|
-
const r =
|
|
1027
|
+
const r = ht.exec(a);
|
|
976
1028
|
return r?.[1] ? r[1] : null;
|
|
977
1029
|
} catch {
|
|
978
1030
|
return null;
|
|
979
1031
|
}
|
|
980
1032
|
}
|
|
981
|
-
function
|
|
1033
|
+
function pt(i) {
|
|
982
1034
|
if (!i) return !1;
|
|
983
1035
|
const { billingFields: e, shippingFields: t } = i, s = e && Object.values(e).some((n) => n?.enabled), a = t && Object.values(t).some((n) => n?.enabled);
|
|
984
1036
|
return !!(s || a);
|
|
985
1037
|
}
|
|
986
|
-
|
|
1038
|
+
function Z(i) {
|
|
1039
|
+
if (!i) return !1;
|
|
1040
|
+
const { billingFields: e, shippingFields: t } = i, s = e?.firstName?.enabled && e?.lastName?.enabled, a = t?.firstName?.enabled && t?.lastName?.enabled;
|
|
1041
|
+
return !!(s || a);
|
|
1042
|
+
}
|
|
1043
|
+
const U = /* @__PURE__ */ new Set(["US", "CA"]);
|
|
1044
|
+
class de extends k {
|
|
987
1045
|
inputs = /* @__PURE__ */ new Map();
|
|
988
1046
|
type;
|
|
989
1047
|
onChange;
|
|
@@ -991,19 +1049,22 @@ class re extends P {
|
|
|
991
1049
|
fieldsContainer;
|
|
992
1050
|
translationFunc;
|
|
993
1051
|
locale;
|
|
994
|
-
stateOptions;
|
|
995
1052
|
grouped;
|
|
1053
|
+
currentCountry = "";
|
|
1054
|
+
stateRow = null;
|
|
1055
|
+
stateFieldConfig;
|
|
1056
|
+
stateStyles;
|
|
996
1057
|
constructor(e) {
|
|
997
1058
|
super("div", ["address-section"]), this.type = e.type, this.onChange = e.onChange, this.onBlur = e.onBlur, this.translationFunc = e.translationFunc, this.locale = e.locale, this.grouped = e.grouped ?? !0;
|
|
998
|
-
const { title: t, checkoutProfile: s, fieldsConfig: a, values: n, errors: r, touched:
|
|
1059
|
+
const { title: t, checkoutProfile: s, fieldsConfig: a, values: n, errors: r, touched: o } = e;
|
|
999
1060
|
if (this.grouped) {
|
|
1000
1061
|
const d = document.createElement("h3");
|
|
1001
1062
|
d.className = "address-section-title", d.textContent = t, d.style.color = s.styles.textColor, d.style.fontFamily = `"${s.styles.fontFamily}", sans-serif`, d.style.fontSize = `${s.styles.fontSize}px`, d.style.fontWeight = "normal", this.getElement().appendChild(d);
|
|
1002
1063
|
}
|
|
1003
|
-
this.fieldsContainer = document.createElement("div"), this.fieldsContainer.className = "address-fields", this.grouped || this.fieldsContainer.classList.add("address-fields--ungrouped"), this.getElement().appendChild(this.fieldsContainer), this.createFields(s, a, n, r,
|
|
1064
|
+
this.fieldsContainer = document.createElement("div"), this.fieldsContainer.className = "address-fields", this.grouped || this.fieldsContainer.classList.add("address-fields--ungrouped"), this.getElement().appendChild(this.fieldsContainer), this.createFields(s, a, n, r, o);
|
|
1004
1065
|
}
|
|
1005
1066
|
borderRadius(e, t, s, a, n) {
|
|
1006
|
-
const r = (
|
|
1067
|
+
const r = (o) => o ? `${e}px` : "0px";
|
|
1007
1068
|
return `${r(t)} ${r(s)} ${r(a)} ${r(n)}`;
|
|
1008
1069
|
}
|
|
1009
1070
|
createFields(e, t, s, a, n) {
|
|
@@ -1017,7 +1078,7 @@ class re extends P {
|
|
|
1017
1078
|
);
|
|
1018
1079
|
return;
|
|
1019
1080
|
}
|
|
1020
|
-
const r = e.styles.borderRadius,
|
|
1081
|
+
const r = e.styles.borderRadius, o = {
|
|
1021
1082
|
color: e.styles.textColor,
|
|
1022
1083
|
fontSize: e.styles.fontSize,
|
|
1023
1084
|
fontFamily: e.styles.fontFamily
|
|
@@ -1025,55 +1086,55 @@ class re extends P {
|
|
|
1025
1086
|
t.street?.enabled && d.push({ kind: "street" });
|
|
1026
1087
|
const c = [];
|
|
1027
1088
|
t.firstName?.enabled && c.push("firstName"), t.lastName?.enabled && c.push("lastName"), c.length > 0 && d.push({ kind: "name", fields: c }), t.country?.enabled && d.push({ kind: "country" });
|
|
1028
|
-
const
|
|
1029
|
-
t.city?.enabled &&
|
|
1089
|
+
const m = [];
|
|
1090
|
+
t.city?.enabled && m.push("city"), t.zipCode?.enabled && m.push("zipCode"), m.length > 0 && d.push({ kind: "cityZip", fields: m }), t.state?.enabled && d.push({ kind: "state" });
|
|
1030
1091
|
const b = d.length;
|
|
1031
|
-
d.forEach((
|
|
1032
|
-
const
|
|
1033
|
-
...
|
|
1092
|
+
d.forEach((l, u) => {
|
|
1093
|
+
const y = u === 0, p = u === b - 1, g = (h, v) => ({
|
|
1094
|
+
...o,
|
|
1034
1095
|
borderRadius: this.borderRadius(
|
|
1035
1096
|
r,
|
|
1036
|
-
|
|
1037
|
-
|
|
1038
|
-
|
|
1039
|
-
|
|
1097
|
+
y && h,
|
|
1098
|
+
y && v,
|
|
1099
|
+
p && v,
|
|
1100
|
+
p && h
|
|
1040
1101
|
)
|
|
1041
1102
|
});
|
|
1042
|
-
if (
|
|
1043
|
-
const h = this.createRow(["full"]),
|
|
1103
|
+
if (l.kind === "street") {
|
|
1104
|
+
const h = this.createRow(["full"]), v = this.createInput(
|
|
1044
1105
|
"street",
|
|
1045
1106
|
t.street?.label ?? this.translationFunc("address.addressLine1"),
|
|
1046
1107
|
s.street,
|
|
1047
1108
|
a.street,
|
|
1048
1109
|
n.street,
|
|
1049
|
-
|
|
1110
|
+
g(!0, !0),
|
|
1050
1111
|
"street-address"
|
|
1051
1112
|
);
|
|
1052
|
-
this.inputs.set("street",
|
|
1113
|
+
this.inputs.set("street", v), h.appendChild(v.getElement()), this.fieldsContainer.appendChild(h);
|
|
1053
1114
|
return;
|
|
1054
1115
|
}
|
|
1055
|
-
if (
|
|
1056
|
-
const h = this.createRow(
|
|
1057
|
-
if (
|
|
1058
|
-
const
|
|
1116
|
+
if (l.kind === "name") {
|
|
1117
|
+
const h = this.createRow(l.fields.map(() => "half")), v = l.fields.length === 1;
|
|
1118
|
+
if (l.fields.includes("firstName")) {
|
|
1119
|
+
const f = v || l.fields[l.fields.length - 1] === "firstName", S = this.createInput(
|
|
1059
1120
|
"firstName",
|
|
1060
1121
|
t.firstName?.label ?? this.translationFunc("address.firstName"),
|
|
1061
1122
|
s.firstName,
|
|
1062
1123
|
a.firstName,
|
|
1063
1124
|
n.firstName,
|
|
1064
|
-
|
|
1125
|
+
g(!0, f),
|
|
1065
1126
|
"given-name"
|
|
1066
1127
|
);
|
|
1067
1128
|
this.inputs.set("firstName", S), h.appendChild(S.getElement());
|
|
1068
1129
|
}
|
|
1069
|
-
if (
|
|
1070
|
-
const
|
|
1130
|
+
if (l.fields.includes("lastName")) {
|
|
1131
|
+
const f = v || l.fields[0] === "lastName", S = this.createInput(
|
|
1071
1132
|
"lastName",
|
|
1072
1133
|
t.lastName?.label ?? this.translationFunc("address.lastName"),
|
|
1073
1134
|
s.lastName,
|
|
1074
1135
|
a.lastName,
|
|
1075
1136
|
n.lastName,
|
|
1076
|
-
f
|
|
1137
|
+
g(f, !0),
|
|
1077
1138
|
"family-name"
|
|
1078
1139
|
);
|
|
1079
1140
|
this.inputs.set("lastName", S), h.appendChild(S.getElement());
|
|
@@ -1081,40 +1142,40 @@ class re extends P {
|
|
|
1081
1142
|
this.fieldsContainer.appendChild(h);
|
|
1082
1143
|
return;
|
|
1083
1144
|
}
|
|
1084
|
-
if (
|
|
1085
|
-
const h = this.createRow(["full"]),
|
|
1145
|
+
if (l.kind === "country") {
|
|
1146
|
+
const h = this.createRow(["full"]), v = this.createCountrySelect(
|
|
1086
1147
|
s.country,
|
|
1087
1148
|
a.country,
|
|
1088
1149
|
n.country,
|
|
1089
|
-
|
|
1150
|
+
g(!0, !0),
|
|
1090
1151
|
t.country?.options,
|
|
1091
1152
|
t.country?.label
|
|
1092
1153
|
);
|
|
1093
|
-
this.inputs.set("country",
|
|
1154
|
+
this.inputs.set("country", v), h.appendChild(v.getElement()), this.fieldsContainer.appendChild(h);
|
|
1094
1155
|
return;
|
|
1095
1156
|
}
|
|
1096
|
-
if (
|
|
1097
|
-
const h = this.createRow(
|
|
1098
|
-
if (
|
|
1099
|
-
const
|
|
1157
|
+
if (l.kind === "cityZip") {
|
|
1158
|
+
const h = this.createRow(l.fields.map(() => "half")), v = l.fields.length === 1;
|
|
1159
|
+
if (l.fields.includes("city")) {
|
|
1160
|
+
const f = v || l.fields[l.fields.length - 1] === "city", S = this.createInput(
|
|
1100
1161
|
"city",
|
|
1101
1162
|
t.city?.label ?? this.translationFunc("address.townCity"),
|
|
1102
1163
|
s.city,
|
|
1103
1164
|
a.city,
|
|
1104
1165
|
n.city,
|
|
1105
|
-
|
|
1166
|
+
g(!0, f),
|
|
1106
1167
|
"address-level2"
|
|
1107
1168
|
);
|
|
1108
1169
|
this.inputs.set("city", S), h.appendChild(S.getElement());
|
|
1109
1170
|
}
|
|
1110
|
-
if (
|
|
1111
|
-
const
|
|
1171
|
+
if (l.fields.includes("zipCode")) {
|
|
1172
|
+
const f = v || l.fields[0] === "zipCode", S = this.createInput(
|
|
1112
1173
|
"zipCode",
|
|
1113
1174
|
t.zipCode?.label ?? this.translationFunc("address.postalCode"),
|
|
1114
1175
|
s.zipCode,
|
|
1115
1176
|
a.zipCode,
|
|
1116
1177
|
n.zipCode,
|
|
1117
|
-
f
|
|
1178
|
+
g(f, !0),
|
|
1118
1179
|
"postal-code"
|
|
1119
1180
|
);
|
|
1120
1181
|
this.inputs.set("zipCode", S), h.appendChild(S.getElement());
|
|
@@ -1122,30 +1183,31 @@ class re extends P {
|
|
|
1122
1183
|
this.fieldsContainer.appendChild(h);
|
|
1123
1184
|
return;
|
|
1124
1185
|
}
|
|
1125
|
-
if (
|
|
1186
|
+
if (l.kind === "state") {
|
|
1126
1187
|
const h = this.createRow(["full"]);
|
|
1127
|
-
if (this.
|
|
1128
|
-
|
|
1188
|
+
if (this.stateFieldConfig = t.state, this.stateRow = h, this.stateStyles = g(!0, !0), this.currentCountry = s.country, t.state?.hiddenForCountries?.includes(
|
|
1189
|
+
s.country
|
|
1190
|
+
) && (h.style.display = "none"), U.has(s.country)) {
|
|
1191
|
+
const S = this.createStateSelect(
|
|
1129
1192
|
s.state,
|
|
1130
1193
|
a.state,
|
|
1131
1194
|
n.state,
|
|
1132
|
-
|
|
1133
|
-
t.state?.options,
|
|
1195
|
+
this.stateStyles,
|
|
1134
1196
|
s.country,
|
|
1135
1197
|
t.state?.label
|
|
1136
1198
|
);
|
|
1137
|
-
this.inputs.set("state",
|
|
1199
|
+
this.inputs.set("state", S), h.appendChild(S.getElement());
|
|
1138
1200
|
} else {
|
|
1139
|
-
const
|
|
1201
|
+
const S = this.createInput(
|
|
1140
1202
|
"state",
|
|
1141
|
-
t.state?.label ?? this.translationFunc("address.
|
|
1203
|
+
t.state?.label ?? this.translationFunc("address.state"),
|
|
1142
1204
|
s.state,
|
|
1143
1205
|
a.state,
|
|
1144
1206
|
n.state,
|
|
1145
|
-
|
|
1207
|
+
this.stateStyles,
|
|
1146
1208
|
"address-level1"
|
|
1147
1209
|
);
|
|
1148
|
-
this.inputs.set("state",
|
|
1210
|
+
this.inputs.set("state", S), h.appendChild(S.getElement());
|
|
1149
1211
|
}
|
|
1150
1212
|
this.fieldsContainer.appendChild(h);
|
|
1151
1213
|
}
|
|
@@ -1155,8 +1217,8 @@ class re extends P {
|
|
|
1155
1217
|
const t = document.createElement("div");
|
|
1156
1218
|
return t.className = `address-row address-row-${e.length === 1 ? "single" : "double"}`, t;
|
|
1157
1219
|
}
|
|
1158
|
-
createInput(e, t, s, a, n, r,
|
|
1159
|
-
const d = `${this.type}Address.${e}`, c = new
|
|
1220
|
+
createInput(e, t, s, a, n, r, o) {
|
|
1221
|
+
const d = `${this.type}Address.${e}`, c = new me({
|
|
1160
1222
|
name: d,
|
|
1161
1223
|
error: !1,
|
|
1162
1224
|
errorMsg: void 0,
|
|
@@ -1164,38 +1226,38 @@ class re extends P {
|
|
|
1164
1226
|
...this.grouped ? { placeholder: t } : {
|
|
1165
1227
|
label: t,
|
|
1166
1228
|
placeholder: (() => {
|
|
1167
|
-
const
|
|
1168
|
-
return b !==
|
|
1229
|
+
const m = `address.placeholder.${e}`, b = this.translationFunc(m);
|
|
1230
|
+
return b !== m ? b : t;
|
|
1169
1231
|
})()
|
|
1170
1232
|
},
|
|
1171
1233
|
value: s,
|
|
1172
|
-
autocomplete:
|
|
1173
|
-
onChange: (
|
|
1234
|
+
autocomplete: o,
|
|
1235
|
+
onChange: (m) => {
|
|
1174
1236
|
c.setError(!1);
|
|
1175
1237
|
const b = new Event("input", { bubbles: !0 });
|
|
1176
1238
|
Object.defineProperty(b, "target", {
|
|
1177
1239
|
writable: !1,
|
|
1178
1240
|
value: {
|
|
1179
1241
|
name: d,
|
|
1180
|
-
value:
|
|
1242
|
+
value: m.target.value
|
|
1181
1243
|
}
|
|
1182
1244
|
}), this.onChange(b);
|
|
1183
1245
|
}
|
|
1184
1246
|
});
|
|
1185
|
-
return c.addEventListener("blur", (
|
|
1247
|
+
return c.addEventListener("blur", (m) => {
|
|
1186
1248
|
const b = new Event("blur", { bubbles: !0 });
|
|
1187
1249
|
Object.defineProperty(b, "target", {
|
|
1188
1250
|
writable: !1,
|
|
1189
1251
|
value: {
|
|
1190
1252
|
name: d,
|
|
1191
|
-
value:
|
|
1253
|
+
value: m.target.value
|
|
1192
1254
|
}
|
|
1193
1255
|
}), this.onBlur(b);
|
|
1194
1256
|
}), c;
|
|
1195
1257
|
}
|
|
1196
1258
|
createCountrySelect(e, t, s, a, n, r) {
|
|
1197
|
-
const
|
|
1198
|
-
name:
|
|
1259
|
+
const o = `${this.type}Address.country`, d = be(n, this.locale), c = new V({
|
|
1260
|
+
name: o,
|
|
1199
1261
|
error: !1,
|
|
1200
1262
|
errorMsg: void 0,
|
|
1201
1263
|
styles: a,
|
|
@@ -1206,126 +1268,184 @@ class re extends P {
|
|
|
1206
1268
|
value: e,
|
|
1207
1269
|
options: d,
|
|
1208
1270
|
autocomplete: "country",
|
|
1209
|
-
onChange: (
|
|
1271
|
+
onChange: (m) => {
|
|
1210
1272
|
c.setError(!1);
|
|
1211
|
-
const b =
|
|
1212
|
-
|
|
1213
|
-
const o = new Event("change", { bubbles: !0 });
|
|
1214
|
-
Object.defineProperty(o, "target", {
|
|
1273
|
+
const b = m.target.value, l = new Event("change", { bubbles: !0 });
|
|
1274
|
+
Object.defineProperty(l, "target", {
|
|
1215
1275
|
writable: !1,
|
|
1216
1276
|
value: {
|
|
1217
|
-
name:
|
|
1277
|
+
name: o,
|
|
1218
1278
|
value: b
|
|
1219
1279
|
}
|
|
1220
|
-
}), this.onChange(
|
|
1280
|
+
}), this.onChange(l), this.handleCountryChange(b);
|
|
1221
1281
|
}
|
|
1222
1282
|
});
|
|
1223
|
-
return c.addEventListener("blur", (
|
|
1283
|
+
return c.addEventListener("blur", (m) => {
|
|
1224
1284
|
const b = new Event("blur", { bubbles: !0 });
|
|
1225
1285
|
Object.defineProperty(b, "target", {
|
|
1226
1286
|
writable: !1,
|
|
1227
1287
|
value: {
|
|
1228
|
-
name:
|
|
1229
|
-
value:
|
|
1288
|
+
name: o,
|
|
1289
|
+
value: m.target.value
|
|
1230
1290
|
}
|
|
1231
1291
|
}), this.onBlur(b);
|
|
1232
1292
|
}), c;
|
|
1233
1293
|
}
|
|
1234
|
-
|
|
1294
|
+
handleCountryChange(e) {
|
|
1295
|
+
const t = this.currentCountry;
|
|
1296
|
+
if (this.currentCountry = e, !this.stateRow || !this.stateFieldConfig?.enabled) return;
|
|
1297
|
+
const s = this.stateFieldConfig.hiddenForCountries?.includes(t), a = this.stateFieldConfig.hiddenForCountries?.includes(e);
|
|
1298
|
+
if (a && !s) {
|
|
1299
|
+
this.stateRow.style.display = "none", this.clearStateValue();
|
|
1300
|
+
return;
|
|
1301
|
+
}
|
|
1302
|
+
if (!a && s && (this.stateRow.style.display = ""), a) return;
|
|
1303
|
+
const n = this.inputs.get("state") instanceof V, r = U.has(e);
|
|
1304
|
+
if (n && r) {
|
|
1305
|
+
const o = this.inputs.get("state");
|
|
1306
|
+
if (o instanceof V) {
|
|
1307
|
+
const d = e === "CA" ? "CA" : "US", c = Q(d), m = d === "CA" ? this.translationFunc("address.chooseProvince") : this.translationFunc("address.chooseState");
|
|
1308
|
+
o.setOptions(c, m);
|
|
1309
|
+
}
|
|
1310
|
+
this.clearStateValue();
|
|
1311
|
+
return;
|
|
1312
|
+
}
|
|
1313
|
+
if (n !== r) {
|
|
1314
|
+
this.rebuildStateField(e), this.clearStateValue();
|
|
1315
|
+
return;
|
|
1316
|
+
}
|
|
1317
|
+
!n && !r && t !== e && this.clearStateValue();
|
|
1318
|
+
}
|
|
1319
|
+
rebuildStateField(e) {
|
|
1320
|
+
if (!this.stateRow || !this.stateStyles) return;
|
|
1235
1321
|
const t = this.inputs.get("state");
|
|
1236
|
-
if (
|
|
1237
|
-
|
|
1238
|
-
|
|
1322
|
+
if (t && (t.getElement().remove(), this.inputs.delete("state")), U.has(e)) {
|
|
1323
|
+
const a = this.createStateSelect(
|
|
1324
|
+
"",
|
|
1325
|
+
void 0,
|
|
1326
|
+
void 0,
|
|
1327
|
+
this.stateStyles,
|
|
1328
|
+
e,
|
|
1329
|
+
this.stateFieldConfig?.label
|
|
1330
|
+
);
|
|
1331
|
+
this.inputs.set("state", a), this.stateRow.appendChild(a.getElement());
|
|
1332
|
+
} else {
|
|
1333
|
+
const a = this.createInput(
|
|
1334
|
+
"state",
|
|
1335
|
+
this.stateFieldConfig?.label ?? this.translationFunc("address.state"),
|
|
1336
|
+
"",
|
|
1337
|
+
void 0,
|
|
1338
|
+
void 0,
|
|
1339
|
+
this.stateStyles,
|
|
1340
|
+
"address-level1"
|
|
1341
|
+
);
|
|
1342
|
+
this.inputs.set("state", a), this.stateRow.appendChild(a.getElement());
|
|
1343
|
+
}
|
|
1239
1344
|
}
|
|
1240
|
-
|
|
1241
|
-
const
|
|
1242
|
-
|
|
1345
|
+
clearStateValue() {
|
|
1346
|
+
const e = this.inputs.get("state");
|
|
1347
|
+
e && e.setValue("");
|
|
1348
|
+
const t = `${this.type}Address.state`, s = new CustomEvent("input", {
|
|
1349
|
+
bubbles: !0,
|
|
1350
|
+
detail: { programmatic: !0 }
|
|
1351
|
+
});
|
|
1352
|
+
Object.defineProperty(s, "target", {
|
|
1353
|
+
writable: !1,
|
|
1354
|
+
value: { name: t, value: "" }
|
|
1355
|
+
}), this.onChange(s);
|
|
1356
|
+
}
|
|
1357
|
+
createStateSelect(e, t, s, a, n, r) {
|
|
1358
|
+
const o = `${this.type}Address.state`, d = n === "CA" ? "CA" : "US", c = Q(d), m = d === "CA" ? this.translationFunc("address.chooseProvince") : this.translationFunc("address.chooseState"), b = new V({
|
|
1359
|
+
name: o,
|
|
1243
1360
|
error: !1,
|
|
1244
1361
|
errorMsg: void 0,
|
|
1245
1362
|
styles: a,
|
|
1246
|
-
placeholder:
|
|
1247
|
-
...!this.grouped && { label:
|
|
1363
|
+
placeholder: m,
|
|
1364
|
+
...!this.grouped && { label: r ?? m },
|
|
1248
1365
|
value: e,
|
|
1249
|
-
options:
|
|
1366
|
+
options: c,
|
|
1250
1367
|
autocomplete: "address-level1",
|
|
1251
|
-
onChange: (
|
|
1252
|
-
|
|
1253
|
-
const
|
|
1254
|
-
Object.defineProperty(
|
|
1368
|
+
onChange: (l) => {
|
|
1369
|
+
b.setError(!1);
|
|
1370
|
+
const u = new Event("change", { bubbles: !0 });
|
|
1371
|
+
Object.defineProperty(u, "target", {
|
|
1255
1372
|
writable: !1,
|
|
1256
1373
|
value: {
|
|
1257
|
-
name:
|
|
1258
|
-
value:
|
|
1374
|
+
name: o,
|
|
1375
|
+
value: l.target.value
|
|
1259
1376
|
}
|
|
1260
|
-
}), this.onChange(
|
|
1377
|
+
}), this.onChange(u);
|
|
1261
1378
|
}
|
|
1262
1379
|
});
|
|
1263
|
-
return
|
|
1264
|
-
const
|
|
1265
|
-
Object.defineProperty(
|
|
1380
|
+
return b.addEventListener("blur", (l) => {
|
|
1381
|
+
const u = new Event("blur", { bubbles: !0 });
|
|
1382
|
+
Object.defineProperty(u, "target", {
|
|
1266
1383
|
writable: !1,
|
|
1267
1384
|
value: {
|
|
1268
|
-
name:
|
|
1269
|
-
value:
|
|
1385
|
+
name: o,
|
|
1386
|
+
value: l.target.value
|
|
1270
1387
|
}
|
|
1271
|
-
}), this.onBlur(
|
|
1272
|
-
}),
|
|
1388
|
+
}), this.onBlur(u);
|
|
1389
|
+
}), b;
|
|
1273
1390
|
}
|
|
1274
1391
|
createUngroupedFields(e, t, s, a, n) {
|
|
1275
|
-
const r = e.styles.borderRadius,
|
|
1392
|
+
const r = e.styles.borderRadius, o = {
|
|
1276
1393
|
color: e.styles.textColor,
|
|
1277
1394
|
fontSize: e.styles.fontSize,
|
|
1278
1395
|
fontFamily: e.styles.fontFamily,
|
|
1279
1396
|
borderRadius: `${r}px`
|
|
1280
|
-
}, d = (c,
|
|
1397
|
+
}, d = (c, m, b) => {
|
|
1281
1398
|
if (!t[c]?.enabled) return;
|
|
1282
|
-
const
|
|
1399
|
+
const l = t[c]?.label ?? this.translationFunc(m), u = this.createRow(["full"]), y = this.createInput(
|
|
1283
1400
|
c,
|
|
1284
|
-
|
|
1401
|
+
l,
|
|
1285
1402
|
s[c],
|
|
1286
1403
|
a[c],
|
|
1287
1404
|
n[c],
|
|
1288
|
-
|
|
1405
|
+
o,
|
|
1289
1406
|
b
|
|
1290
1407
|
);
|
|
1291
|
-
this.inputs.set(c,
|
|
1408
|
+
this.inputs.set(c, y), u.appendChild(y.getElement()), this.fieldsContainer.appendChild(u);
|
|
1292
1409
|
};
|
|
1293
1410
|
if (d("firstName", "address.firstName", "given-name"), d("lastName", "address.lastName", "family-name"), d("street", "address.addressLine1", "street-address"), d("city", "address.townCity", "address-level2"), t.country?.enabled) {
|
|
1294
|
-
const c = t.country?.label ?? this.translationFunc("address.chooseCountry"),
|
|
1411
|
+
const c = t.country?.label ?? this.translationFunc("address.chooseCountry"), m = this.createRow(["full"]), b = this.createCountrySelect(
|
|
1295
1412
|
s.country,
|
|
1296
1413
|
a.country,
|
|
1297
1414
|
n.country,
|
|
1298
|
-
|
|
1415
|
+
o,
|
|
1299
1416
|
t.country?.options,
|
|
1300
1417
|
c
|
|
1301
1418
|
);
|
|
1302
|
-
this.inputs.set("country", b),
|
|
1419
|
+
this.inputs.set("country", b), m.appendChild(b.getElement()), this.fieldsContainer.appendChild(m);
|
|
1303
1420
|
}
|
|
1304
1421
|
if (t.state?.enabled) {
|
|
1305
|
-
this.
|
|
1306
|
-
const c = this.createRow(["full"])
|
|
1307
|
-
|
|
1308
|
-
|
|
1422
|
+
this.stateFieldConfig = t.state;
|
|
1423
|
+
const c = this.createRow(["full"]);
|
|
1424
|
+
this.stateRow = c, this.stateStyles = o, this.currentCountry = s.country, t.state?.hiddenForCountries?.includes(
|
|
1425
|
+
s.country
|
|
1426
|
+
) && (c.style.display = "none");
|
|
1427
|
+
const b = U.has(s.country), l = t.state?.label ?? this.translationFunc("address.state");
|
|
1428
|
+
if (b) {
|
|
1429
|
+
const u = this.createStateSelect(
|
|
1309
1430
|
s.state,
|
|
1310
1431
|
a.state,
|
|
1311
1432
|
n.state,
|
|
1312
|
-
|
|
1313
|
-
t.state?.options,
|
|
1433
|
+
o,
|
|
1314
1434
|
s.country,
|
|
1315
|
-
|
|
1435
|
+
l
|
|
1316
1436
|
);
|
|
1317
|
-
this.inputs.set("state",
|
|
1437
|
+
this.inputs.set("state", u), c.appendChild(u.getElement());
|
|
1318
1438
|
} else {
|
|
1319
|
-
const
|
|
1439
|
+
const u = this.createInput(
|
|
1320
1440
|
"state",
|
|
1321
|
-
|
|
1441
|
+
l,
|
|
1322
1442
|
s.state,
|
|
1323
1443
|
a.state,
|
|
1324
1444
|
n.state,
|
|
1325
|
-
|
|
1445
|
+
o,
|
|
1326
1446
|
"address-level1"
|
|
1327
1447
|
);
|
|
1328
|
-
this.inputs.set("state",
|
|
1448
|
+
this.inputs.set("state", u), c.appendChild(u.getElement());
|
|
1329
1449
|
}
|
|
1330
1450
|
this.fieldsContainer.appendChild(c);
|
|
1331
1451
|
}
|
|
@@ -1362,12 +1482,11 @@ class re extends P {
|
|
|
1362
1482
|
}
|
|
1363
1483
|
updateField(e, t, s, a) {
|
|
1364
1484
|
const n = this.inputs.get(e);
|
|
1365
|
-
if (n)
|
|
1366
|
-
|
|
1367
|
-
|
|
1368
|
-
|
|
1369
|
-
|
|
1370
|
-
this.setError(e, r, s);
|
|
1485
|
+
if (!n) return;
|
|
1486
|
+
const r = n.getElement().querySelector("input") || n.getElement().querySelector("select"), o = n.getValue();
|
|
1487
|
+
!(document.activeElement === r) && !(t === "" && o !== "") && this.setValue(e, t);
|
|
1488
|
+
const m = !!(a && s);
|
|
1489
|
+
this.setError(e, m, s);
|
|
1371
1490
|
}
|
|
1372
1491
|
updateAllFields(e, t, s) {
|
|
1373
1492
|
Object.keys(e).forEach((a) => {
|
|
@@ -1384,7 +1503,7 @@ class re extends P {
|
|
|
1384
1503
|
e && e.focus();
|
|
1385
1504
|
}
|
|
1386
1505
|
}
|
|
1387
|
-
class
|
|
1506
|
+
class gt {
|
|
1388
1507
|
input = null;
|
|
1389
1508
|
isVgsMode;
|
|
1390
1509
|
vgsWrapper = null;
|
|
@@ -1398,17 +1517,17 @@ class mt {
|
|
|
1398
1517
|
onBlur: a,
|
|
1399
1518
|
errorMsg: n,
|
|
1400
1519
|
checkoutProfile: r,
|
|
1401
|
-
translationFunc:
|
|
1520
|
+
translationFunc: o,
|
|
1402
1521
|
autocomplete: d = "cc-name",
|
|
1403
1522
|
isVgsMode: c = !1
|
|
1404
1523
|
} = e;
|
|
1405
|
-
this.isVgsMode = c, this.wrapperElement = document.createElement("div"), c ? this.buildVgsLayout(r,
|
|
1524
|
+
this.isVgsMode = c, this.wrapperElement = document.createElement("div"), c ? this.buildVgsLayout(r, o) : this.buildNativeLayout(
|
|
1406
1525
|
t,
|
|
1407
1526
|
s,
|
|
1408
1527
|
a,
|
|
1409
1528
|
n,
|
|
1410
1529
|
r,
|
|
1411
|
-
|
|
1530
|
+
o,
|
|
1412
1531
|
d
|
|
1413
1532
|
);
|
|
1414
1533
|
}
|
|
@@ -1418,10 +1537,10 @@ class mt {
|
|
|
1418
1537
|
const n = document.createElement("label");
|
|
1419
1538
|
n.className = "input-label", n.textContent = t("cardholderNameLabel"), n.style.fontFamily = `"${e.styles.fontFamily}", sans-serif`, a.appendChild(n), this.wrapperElement.appendChild(a), this.vgsWrapper = document.createElement("div"), this.vgsWrapper.className = "vgs-wrap", this.vgsWrapper.style.position = "relative", this.vgsWrapper.style.borderRadius = `${s}px`, this.vgsWrapper.style.height = "38.5px", this.vgsWrapper.style.width = "100%", this.vgsWrapper.style.overflow = "hidden", this.vgsWrapper.style.background = "#fff", this.vgsWrapper.style.boxShadow = "none";
|
|
1420
1539
|
const r = document.createElement("div");
|
|
1421
|
-
r.className = "vgs-field-skeleton", this.vgsWrapper.appendChild(r), this.vgsContainer = document.createElement("div"), this.vgsContainer.id = `vgs-cc-name-${Date.now()}`, this.vgsContainer.style.position = "relative", this.vgsContainer.style.zIndex = "1", this.vgsContainer.style.width = "100%", this.vgsContainer.style.height = "100%", this.vgsWrapper.appendChild(this.vgsContainer), this.wrapperElement.appendChild(this.vgsWrapper), this.vgsHelperText = new
|
|
1540
|
+
r.className = "vgs-field-skeleton", this.vgsWrapper.appendChild(r), this.vgsContainer = document.createElement("div"), this.vgsContainer.id = `vgs-cc-name-${Date.now()}`, this.vgsContainer.style.position = "relative", this.vgsContainer.style.zIndex = "1", this.vgsContainer.style.width = "100%", this.vgsContainer.style.height = "100%", this.vgsWrapper.appendChild(this.vgsContainer), this.wrapperElement.appendChild(this.vgsWrapper), this.vgsHelperText = new ve({ visible: !1 }), this.wrapperElement.appendChild(this.vgsHelperText.getElement());
|
|
1422
1541
|
}
|
|
1423
|
-
buildNativeLayout(e, t, s, a, n, r,
|
|
1424
|
-
this.input = new
|
|
1542
|
+
buildNativeLayout(e, t, s, a, n, r, o) {
|
|
1543
|
+
this.input = new me({
|
|
1425
1544
|
name: "name",
|
|
1426
1545
|
label: r("cardholderNameLabel"),
|
|
1427
1546
|
error: !1,
|
|
@@ -1434,10 +1553,10 @@ class mt {
|
|
|
1434
1553
|
},
|
|
1435
1554
|
placeholder: r("cardholderNamePlaceholder"),
|
|
1436
1555
|
value: e,
|
|
1437
|
-
autocomplete:
|
|
1556
|
+
autocomplete: o,
|
|
1438
1557
|
onChange: (d) => {
|
|
1439
|
-
const
|
|
1440
|
-
|
|
1558
|
+
const m = d.target.value, b = m.replace(/[^a-zA-Z\s\-'.]/g, "");
|
|
1559
|
+
m !== b && this.input?.setValue(b), this.input?.setError(!1), this.trim(), t(d);
|
|
1441
1560
|
}
|
|
1442
1561
|
}), this.input.addEventListener("blur", (d) => {
|
|
1443
1562
|
s(d);
|
|
@@ -1448,9 +1567,9 @@ class mt {
|
|
|
1448
1567
|
}
|
|
1449
1568
|
handleVgsStateChange(e, t) {
|
|
1450
1569
|
if (!this.isVgsMode || !this.vgsWrapper) return;
|
|
1451
|
-
const a = !!e[
|
|
1570
|
+
const a = !!e[ee.CARDHOLDER]?.isFocused;
|
|
1452
1571
|
if (this.vgsWrapper.classList.toggle("vgs-wrap-focused", a), !t || !this.vgsHelperText) return;
|
|
1453
|
-
const n = t[
|
|
1572
|
+
const n = t[ee.CARDHOLDER];
|
|
1454
1573
|
n ? (this.vgsHelperText.setText(n), this.vgsHelperText.toggleVisibility(!0)) : this.vgsHelperText.toggleVisibility(!1);
|
|
1455
1574
|
}
|
|
1456
1575
|
hideFakePlaceholder() {
|
|
@@ -1485,7 +1604,7 @@ class mt {
|
|
|
1485
1604
|
this.isVgsMode || this.input?.focus();
|
|
1486
1605
|
}
|
|
1487
1606
|
}
|
|
1488
|
-
class
|
|
1607
|
+
class pe extends k {
|
|
1489
1608
|
constructor() {
|
|
1490
1609
|
super("div", ["skeleton-container"]), this.createSkeletonElements();
|
|
1491
1610
|
}
|
|
@@ -1493,23 +1612,23 @@ class he extends P {
|
|
|
1493
1612
|
this.appendChild(this.createPaymentMethodSkeleton()), this.appendChild(this.createPaymentSeparatorSkeleton());
|
|
1494
1613
|
}
|
|
1495
1614
|
createPaymentMethodSkeleton() {
|
|
1496
|
-
const e =
|
|
1615
|
+
const e = D.createDiv(["skeleton-field"]), t = D.createDiv([
|
|
1497
1616
|
"skeleton",
|
|
1498
1617
|
"skeleton-payment-method"
|
|
1499
1618
|
]);
|
|
1500
1619
|
return e.appendChild(t), e;
|
|
1501
1620
|
}
|
|
1502
1621
|
createPaymentSeparatorSkeleton() {
|
|
1503
|
-
const e =
|
|
1622
|
+
const e = D.createDiv([
|
|
1504
1623
|
"payment-separator_container"
|
|
1505
|
-
]), t =
|
|
1624
|
+
]), t = D.createDiv(["payment-separator__line"]), s = D.createDiv([
|
|
1506
1625
|
"skeleton",
|
|
1507
1626
|
"skeleton-separator-text"
|
|
1508
|
-
]), a =
|
|
1627
|
+
]), a = D.createDiv(["payment-separator__line"]);
|
|
1509
1628
|
return e.appendChild(t), e.appendChild(s), e.appendChild(a), e;
|
|
1510
1629
|
}
|
|
1511
1630
|
}
|
|
1512
|
-
class
|
|
1631
|
+
class ft extends k {
|
|
1513
1632
|
constructor(e) {
|
|
1514
1633
|
const { translationFunc: t, checkoutProfile: s } = e;
|
|
1515
1634
|
super("div", ["payment-separator"]);
|
|
@@ -1517,11 +1636,11 @@ class pt extends P {
|
|
|
1517
1636
|
n.className = "payment-separator__line";
|
|
1518
1637
|
const r = document.createElement("p");
|
|
1519
1638
|
r.textContent = t("pay-with-card"), r.className = "payment-separator__text", r.style.fontFamily = `${s.styles.fontFamily}, sans-serif`;
|
|
1520
|
-
const
|
|
1521
|
-
|
|
1639
|
+
const o = document.createElement("span");
|
|
1640
|
+
o.className = "payment-separator__line", a.appendChild(n), a.appendChild(r), a.appendChild(o);
|
|
1522
1641
|
}
|
|
1523
1642
|
}
|
|
1524
|
-
class
|
|
1643
|
+
class yt extends k {
|
|
1525
1644
|
paymentMethods;
|
|
1526
1645
|
paymentSeparator;
|
|
1527
1646
|
skeleton;
|
|
@@ -1532,12 +1651,12 @@ class gt extends P {
|
|
|
1532
1651
|
onPaypalSubmit: a,
|
|
1533
1652
|
onApplePaySubmit: n,
|
|
1534
1653
|
supportedPaymentMethods: r,
|
|
1535
|
-
translationFunc:
|
|
1654
|
+
translationFunc: o,
|
|
1536
1655
|
paymentId: d,
|
|
1537
1656
|
checkoutKey: c,
|
|
1538
|
-
checkoutDetails:
|
|
1657
|
+
checkoutDetails: m,
|
|
1539
1658
|
environment: b,
|
|
1540
|
-
countryCode:
|
|
1659
|
+
countryCode: l
|
|
1541
1660
|
} = e;
|
|
1542
1661
|
if (super("div", ["payment-methods"]), this.paymentMethods = /* @__PURE__ */ new Map(), !t?.additionalPaymentMethods) {
|
|
1543
1662
|
this.getElement().style.display = "none";
|
|
@@ -1547,44 +1666,44 @@ class gt extends P {
|
|
|
1547
1666
|
this.renderSkeleton();
|
|
1548
1667
|
return;
|
|
1549
1668
|
}
|
|
1550
|
-
const
|
|
1669
|
+
const u = Object.entries(
|
|
1551
1670
|
t.additionalPaymentMethods
|
|
1552
|
-
).filter(([
|
|
1553
|
-
const
|
|
1554
|
-
return
|
|
1555
|
-
}).sort((
|
|
1556
|
-
if (
|
|
1671
|
+
).filter(([y, p]) => {
|
|
1672
|
+
const g = p.enabled, h = r ? r[y] === !0 : !0, v = !p.countries || l && p.countries.includes(l);
|
|
1673
|
+
return g && h && v;
|
|
1674
|
+
}).sort((y, p) => y[1].order - p[1].order);
|
|
1675
|
+
if (u.length === 0) {
|
|
1557
1676
|
this.getElement().style.display = "none";
|
|
1558
1677
|
return;
|
|
1559
1678
|
}
|
|
1560
|
-
for (const [
|
|
1561
|
-
switch (
|
|
1679
|
+
for (const [y] of u)
|
|
1680
|
+
switch (y) {
|
|
1562
1681
|
case "paypal": {
|
|
1563
1682
|
if (a) {
|
|
1564
|
-
const
|
|
1683
|
+
const p = new Ee({
|
|
1565
1684
|
checkoutProfile: t,
|
|
1566
1685
|
formData: s,
|
|
1567
1686
|
onSubmit: a
|
|
1568
1687
|
});
|
|
1569
|
-
this.paymentMethods.set("paypal",
|
|
1688
|
+
this.paymentMethods.set("paypal", p), p.appendTo(this.getElement());
|
|
1570
1689
|
}
|
|
1571
1690
|
break;
|
|
1572
1691
|
}
|
|
1573
1692
|
case "applePay": {
|
|
1574
1693
|
if (n && d && c) {
|
|
1575
|
-
const
|
|
1694
|
+
const p = t.appearance?.additionalPaymentMethods?.applePay, g = new Se({
|
|
1576
1695
|
checkoutProfile: t,
|
|
1577
1696
|
formData: s,
|
|
1578
1697
|
onSubmit: n,
|
|
1579
1698
|
paymentId: d,
|
|
1580
1699
|
checkoutKey: c,
|
|
1581
|
-
checkoutDetails:
|
|
1700
|
+
checkoutDetails: m,
|
|
1582
1701
|
environment: b,
|
|
1583
|
-
displayName:
|
|
1584
|
-
requiredBillingContactFields:
|
|
1585
|
-
requiredShippingContactFields:
|
|
1702
|
+
displayName: p?.displayName,
|
|
1703
|
+
requiredBillingContactFields: p?.requiredBillingContactFields,
|
|
1704
|
+
requiredShippingContactFields: p?.requiredShippingContactFields
|
|
1586
1705
|
});
|
|
1587
|
-
this.paymentMethods.set("applePay",
|
|
1706
|
+
this.paymentMethods.set("applePay", g), g.appendTo(this.getElement());
|
|
1588
1707
|
}
|
|
1589
1708
|
break;
|
|
1590
1709
|
}
|
|
@@ -1596,17 +1715,17 @@ class gt extends P {
|
|
|
1596
1715
|
// break;
|
|
1597
1716
|
default:
|
|
1598
1717
|
console.warn(
|
|
1599
|
-
`[PaymentMethods] Unsupported payment method: ${
|
|
1718
|
+
`[PaymentMethods] Unsupported payment method: ${y}`
|
|
1600
1719
|
);
|
|
1601
1720
|
break;
|
|
1602
1721
|
}
|
|
1603
|
-
this.paymentMethods.size > 0 && (this.paymentSeparator = new
|
|
1604
|
-
translationFunc:
|
|
1722
|
+
this.paymentMethods.size > 0 && (this.paymentSeparator = new ft({
|
|
1723
|
+
translationFunc: o,
|
|
1605
1724
|
checkoutProfile: t
|
|
1606
1725
|
}), this.getElement().appendChild(this.paymentSeparator.getElement()));
|
|
1607
1726
|
}
|
|
1608
1727
|
renderSkeleton() {
|
|
1609
|
-
this.skeleton = new
|
|
1728
|
+
this.skeleton = new pe(), this.getElement().appendChild(this.skeleton.getElement());
|
|
1610
1729
|
}
|
|
1611
1730
|
updateFormData(e) {
|
|
1612
1731
|
const t = this.paymentMethods.get("paypal");
|
|
@@ -1618,8 +1737,8 @@ class gt extends P {
|
|
|
1618
1737
|
return this.paymentMethods.size > 0 && this.getElement().style.display !== "none";
|
|
1619
1738
|
}
|
|
1620
1739
|
}
|
|
1621
|
-
const
|
|
1622
|
-
class
|
|
1740
|
+
const bt = 17;
|
|
1741
|
+
class vt extends k {
|
|
1623
1742
|
styles;
|
|
1624
1743
|
isHovered = !1;
|
|
1625
1744
|
constructor(e) {
|
|
@@ -1629,7 +1748,7 @@ class yt extends P {
|
|
|
1629
1748
|
}
|
|
1630
1749
|
applyStyles() {
|
|
1631
1750
|
const e = this.getElement();
|
|
1632
|
-
e.style.backgroundColor = this.isHovered ? `color-mix(in srgb, ${this.styles.backgroundColor} 80%, transparent)` : this.styles.backgroundColor, e.disabled ? (e.style.color = "rgb(150, 150, 150)", e.style.backgroundColor = "rgb(200, 200, 200)") : e.style.color = this.styles.color, e.style.borderRadius = this.styles.borderRadius ===
|
|
1751
|
+
e.style.backgroundColor = this.isHovered ? `color-mix(in srgb, ${this.styles.backgroundColor} 80%, transparent)` : this.styles.backgroundColor, e.disabled ? (e.style.color = "rgb(150, 150, 150)", e.style.backgroundColor = "rgb(200, 200, 200)") : e.style.color = this.styles.color, e.style.borderRadius = this.styles.borderRadius === bt ? "100vmax" : `${this.styles.borderRadius}px`, e.style.fontSize = `${this.styles.fontSize}px`, e.style.fontFamily = `${this.styles.fontFamily}, sans-serif`;
|
|
1633
1752
|
}
|
|
1634
1753
|
handleMouseEnter() {
|
|
1635
1754
|
this.isHovered = !0, this.applyStyles();
|
|
@@ -1641,11 +1760,11 @@ class yt extends P {
|
|
|
1641
1760
|
return this.getElement().disabled = e, e ? (this.addClass("disabled"), this.removeClass("valid")) : (this.removeClass("disabled"), this.addClass("valid")), this.applyStyles(), this;
|
|
1642
1761
|
}
|
|
1643
1762
|
}
|
|
1644
|
-
class
|
|
1763
|
+
class St {
|
|
1645
1764
|
button;
|
|
1646
1765
|
constructor(e) {
|
|
1647
1766
|
const { disabled: t, checkoutProfile: s, translationFunc: a } = e;
|
|
1648
|
-
this.button = new
|
|
1767
|
+
this.button = new vt({
|
|
1649
1768
|
text: a(
|
|
1650
1769
|
`buttonTexts.${s?.layout.actionButton.translationKey}`
|
|
1651
1770
|
),
|
|
@@ -1672,7 +1791,7 @@ class bt {
|
|
|
1672
1791
|
return this.button.appendTo(e), this;
|
|
1673
1792
|
}
|
|
1674
1793
|
}
|
|
1675
|
-
class
|
|
1794
|
+
class Et {
|
|
1676
1795
|
formElement;
|
|
1677
1796
|
focusManager;
|
|
1678
1797
|
translationFunc;
|
|
@@ -1718,7 +1837,7 @@ class vt {
|
|
|
1718
1837
|
(a) => a.enabled
|
|
1719
1838
|
))
|
|
1720
1839
|
return;
|
|
1721
|
-
this.paymentMethods = new
|
|
1840
|
+
this.paymentMethods = new yt({
|
|
1722
1841
|
checkoutProfile: e,
|
|
1723
1842
|
formData: t,
|
|
1724
1843
|
supportedPaymentMethods: this.supportedPaymentMethods,
|
|
@@ -1745,7 +1864,7 @@ class vt {
|
|
|
1745
1864
|
) || e.layout.shippingFields && Object.values(e.layout.shippingFields).some(
|
|
1746
1865
|
(r) => r?.enabled
|
|
1747
1866
|
);
|
|
1748
|
-
this.emailField = new
|
|
1867
|
+
this.emailField = new Ce({
|
|
1749
1868
|
value: t.email,
|
|
1750
1869
|
onChange: this.onChange,
|
|
1751
1870
|
onBlur: this.onBlur,
|
|
@@ -1763,7 +1882,7 @@ class vt {
|
|
|
1763
1882
|
}
|
|
1764
1883
|
createPhoneNumberField(e, t, s, a) {
|
|
1765
1884
|
const n = document.createElement("div");
|
|
1766
|
-
this.phonePlaceholder = n, this.formElement.appendChild(n),
|
|
1885
|
+
this.phonePlaceholder = n, this.formElement.appendChild(n), Fe().then(({ PhoneNumberField: r }) => {
|
|
1767
1886
|
n.isConnected && (this.phoneNumberField = new r({
|
|
1768
1887
|
value: t.phoneNumber ?? "",
|
|
1769
1888
|
onChange: this.onChange,
|
|
@@ -1790,7 +1909,7 @@ class vt {
|
|
|
1790
1909
|
this.cardSectionSkeleton = this.buildCardSkeleton(e), this.formElement.appendChild(this.cardSectionSkeleton);
|
|
1791
1910
|
return;
|
|
1792
1911
|
}
|
|
1793
|
-
if (this.cardSection = new
|
|
1912
|
+
if (this.cardSection = new Me({
|
|
1794
1913
|
checkoutProfile: e,
|
|
1795
1914
|
cardNumber: t.cardNumber,
|
|
1796
1915
|
cardNumberError: s.cardNumber,
|
|
@@ -1826,8 +1945,8 @@ class vt {
|
|
|
1826
1945
|
"focus",
|
|
1827
1946
|
this.cardNumberFocusHandler
|
|
1828
1947
|
));
|
|
1829
|
-
const
|
|
1830
|
-
|
|
1948
|
+
const o = this.cardSection.getElement().querySelector('input[name="cardCvv"]');
|
|
1949
|
+
o && (this.cardCvvFocusHandler = () => this.onFieldFocus("cardCvv"), o.addEventListener("focus", this.cardCvvFocusHandler));
|
|
1831
1950
|
}
|
|
1832
1951
|
this.focusManager.registerField("cardNumber", {
|
|
1833
1952
|
focus: () => this.cardSection?.focusField("cardNumber")
|
|
@@ -1846,7 +1965,7 @@ class vt {
|
|
|
1846
1965
|
this.cardholderSectionSkeleton = this.buildCardholderSkeleton(e), this.formElement.appendChild(this.cardholderSectionSkeleton);
|
|
1847
1966
|
return;
|
|
1848
1967
|
}
|
|
1849
|
-
if (this.cardholderSection = new
|
|
1968
|
+
if (this.cardholderSection = new gt({
|
|
1850
1969
|
value: t.name,
|
|
1851
1970
|
onChange: this.onChange,
|
|
1852
1971
|
onBlur: this.onBlur,
|
|
@@ -1870,7 +1989,7 @@ class vt {
|
|
|
1870
1989
|
if (!n || !Object.values(n).some(
|
|
1871
1990
|
(d) => d?.enabled
|
|
1872
1991
|
)) return;
|
|
1873
|
-
const
|
|
1992
|
+
const o = {
|
|
1874
1993
|
street: "",
|
|
1875
1994
|
firstName: "",
|
|
1876
1995
|
lastName: "",
|
|
@@ -1879,12 +1998,12 @@ class vt {
|
|
|
1879
1998
|
zipCode: "",
|
|
1880
1999
|
country: ""
|
|
1881
2000
|
};
|
|
1882
|
-
this.billingAddressSection = new
|
|
2001
|
+
this.billingAddressSection = new de({
|
|
1883
2002
|
type: "billing",
|
|
1884
2003
|
title: this.translationFunc("address.billingTitle"),
|
|
1885
2004
|
checkoutProfile: e,
|
|
1886
2005
|
fieldsConfig: n,
|
|
1887
|
-
values: t.billingAddress ??
|
|
2006
|
+
values: t.billingAddress ?? o,
|
|
1888
2007
|
errors: s.billingAddress ?? {},
|
|
1889
2008
|
touched: a.billingAddress ?? {},
|
|
1890
2009
|
onChange: this.onChange,
|
|
@@ -1903,7 +2022,7 @@ class vt {
|
|
|
1903
2022
|
if (!n || !Object.values(n).some(
|
|
1904
2023
|
(d) => d?.enabled
|
|
1905
2024
|
)) return;
|
|
1906
|
-
const
|
|
2025
|
+
const o = {
|
|
1907
2026
|
street: "",
|
|
1908
2027
|
firstName: "",
|
|
1909
2028
|
lastName: "",
|
|
@@ -1912,12 +2031,12 @@ class vt {
|
|
|
1912
2031
|
zipCode: "",
|
|
1913
2032
|
country: ""
|
|
1914
2033
|
};
|
|
1915
|
-
this.shippingAddressSection = new
|
|
2034
|
+
this.shippingAddressSection = new de({
|
|
1916
2035
|
type: "shipping",
|
|
1917
2036
|
title: this.translationFunc("address.shippingTitle"),
|
|
1918
2037
|
checkoutProfile: e,
|
|
1919
2038
|
fieldsConfig: n,
|
|
1920
|
-
values: t.shippingAddress ??
|
|
2039
|
+
values: t.shippingAddress ?? o,
|
|
1921
2040
|
errors: s.shippingAddress ?? {},
|
|
1922
2041
|
touched: a.shippingAddress ?? {},
|
|
1923
2042
|
onChange: this.onChange,
|
|
@@ -1932,7 +2051,7 @@ class vt {
|
|
|
1932
2051
|
}
|
|
1933
2052
|
createSubmitButton(e, t) {
|
|
1934
2053
|
try {
|
|
1935
|
-
this.submitButton = new
|
|
2054
|
+
this.submitButton = new St({
|
|
1936
2055
|
disabled: t,
|
|
1937
2056
|
checkoutProfile: e,
|
|
1938
2057
|
translationFunc: this.translationFunc
|
|
@@ -1947,13 +2066,13 @@ class vt {
|
|
|
1947
2066
|
updatePhoneNumberField(e, t, s) {
|
|
1948
2067
|
this.phoneNumberField && (this.phoneNumberField.setValue(e), this.phoneNumberField.setError(t, s));
|
|
1949
2068
|
}
|
|
1950
|
-
updateCardSection(e, t, s, a, n, r,
|
|
2069
|
+
updateCardSection(e, t, s, a, n, r, o, d, c) {
|
|
1951
2070
|
this.cardSection && (this.cardSection.updateCardNumber(
|
|
1952
2071
|
e,
|
|
1953
2072
|
t,
|
|
1954
2073
|
s
|
|
1955
2074
|
), this.cardSection.updateCardCvv(a, n, r), this.cardSection.updateCardExpiry(
|
|
1956
|
-
|
|
2075
|
+
o,
|
|
1957
2076
|
d,
|
|
1958
2077
|
c
|
|
1959
2078
|
));
|
|
@@ -1995,14 +2114,14 @@ class vt {
|
|
|
1995
2114
|
n.className = "input-label", n.textContent = this.translationFunc("cardInformation"), n.style.fontFamily = `"${e.styles.fontFamily}", sans-serif`, a.appendChild(n), s.appendChild(a);
|
|
1996
2115
|
const r = document.createElement("div");
|
|
1997
2116
|
r.className = "vgs-card-group", r.style.borderRadius = `${t}px`, r.style.background = "#fff", r.style.display = "flex", r.style.flexDirection = "column", r.style.gap = "8px";
|
|
1998
|
-
const
|
|
1999
|
-
|
|
2117
|
+
const o = document.createElement("div");
|
|
2118
|
+
o.className = "card-number-row", o.style.position = "relative", o.style.height = "38.5px", o.style.overflow = "hidden", o.style.borderRadius = `${t}px`, o.appendChild(this.createSkeletonDiv()), r.appendChild(o);
|
|
2000
2119
|
const d = document.createElement("div");
|
|
2001
2120
|
d.style.display = "flex", d.style.gap = "8px";
|
|
2002
2121
|
const c = document.createElement("div");
|
|
2003
2122
|
c.style.position = "relative", c.style.flex = "1", c.style.height = "38.5px", c.style.overflow = "hidden", c.style.borderRadius = `${t}px`, c.appendChild(this.createSkeletonDiv()), d.appendChild(c);
|
|
2004
|
-
const
|
|
2005
|
-
return
|
|
2123
|
+
const m = document.createElement("div");
|
|
2124
|
+
return m.style.position = "relative", m.style.flex = "1", m.style.height = "38.5px", m.style.overflow = "hidden", m.style.borderRadius = `${t}px`, m.appendChild(this.createSkeletonDiv()), d.appendChild(m), r.appendChild(d), s.appendChild(r), s;
|
|
2006
2125
|
}
|
|
2007
2126
|
createSkeletonDiv() {
|
|
2008
2127
|
const e = document.createElement("div");
|
|
@@ -2019,7 +2138,7 @@ class vt {
|
|
|
2019
2138
|
async mountVgsFields(e) {
|
|
2020
2139
|
if (!this.vgsService || !this.cardSection) return;
|
|
2021
2140
|
await this.vgsService.whenReady();
|
|
2022
|
-
const t = this.cardSection.getVgsContainerIds(), s = this.cardholderSection?.getVgsContainerId(), a = await
|
|
2141
|
+
const t = this.cardSection.getVgsContainerIds(), s = this.cardholderSection?.getVgsContainerId(), a = await mt(
|
|
2023
2142
|
e.styles.fontFamily
|
|
2024
2143
|
), n = this.cardSection.buildVgsFieldCss(
|
|
2025
2144
|
e,
|
|
@@ -2079,7 +2198,7 @@ class vt {
|
|
|
2079
2198
|
this.billingAddressSection && (this.billingAddressSection.getElement().remove(), this.billingAddressSection = void 0), this.shippingAddressSection && (this.shippingAddressSection.getElement().remove(), this.shippingAddressSection = void 0), this.submitButton && (this.submitButton.getElement().remove(), this.submitButton = void 0), this.paymentMethods && (this.paymentMethods.getElement().remove(), this.paymentMethods = void 0);
|
|
2080
2199
|
}
|
|
2081
2200
|
}
|
|
2082
|
-
class
|
|
2201
|
+
class Ct {
|
|
2083
2202
|
formManager;
|
|
2084
2203
|
focusManager;
|
|
2085
2204
|
onFormSubmit;
|
|
@@ -2090,17 +2209,17 @@ class St {
|
|
|
2090
2209
|
}
|
|
2091
2210
|
handleChange = (e) => {
|
|
2092
2211
|
const t = e.target, { name: s, value: a } = t, n = s;
|
|
2093
|
-
this.formManager.handleChange(n, a), this.localTouchedFields.has(n) || (this.localTouchedFields.add(n), this.formManager.handleBlur(n, a));
|
|
2094
|
-
const { formData:
|
|
2095
|
-
this.focusManager.handleStateUpdate(
|
|
2212
|
+
this.formManager.handleChange(n, a), e instanceof CustomEvent && e.detail?.programmatic ? this.localTouchedFields.delete(n) : this.localTouchedFields.has(n) || (this.localTouchedFields.add(n), this.formManager.handleBlur(n, a));
|
|
2213
|
+
const { formData: o, errors: d, touched: c } = this.formManager.getFormState();
|
|
2214
|
+
this.focusManager.handleStateUpdate(o, d, c);
|
|
2096
2215
|
};
|
|
2097
2216
|
handleBlur = (e) => {
|
|
2098
2217
|
const t = e.target, { name: s, value: a } = t, n = s;
|
|
2099
2218
|
this.localTouchedFields.add(n), this.formManager.handleBlur(n, a), setTimeout(() => {
|
|
2100
2219
|
this.onUIUpdate();
|
|
2101
2220
|
}, 0);
|
|
2102
|
-
const { formData: r, errors:
|
|
2103
|
-
d[n] || this.focusManager.handleStateUpdate(r,
|
|
2221
|
+
const { formData: r, errors: o, touched: d } = this.formManager.getFormState();
|
|
2222
|
+
d[n] || this.focusManager.handleStateUpdate(r, o, d);
|
|
2104
2223
|
};
|
|
2105
2224
|
handleSubmit = async (e) => {
|
|
2106
2225
|
e.preventDefault(), await this.onFormSubmit(e);
|
|
@@ -2120,7 +2239,7 @@ class St {
|
|
|
2120
2239
|
this.localTouchedFields.clear();
|
|
2121
2240
|
}
|
|
2122
2241
|
}
|
|
2123
|
-
class
|
|
2242
|
+
class Ft {
|
|
2124
2243
|
formManager;
|
|
2125
2244
|
checkoutProfile;
|
|
2126
2245
|
formElement;
|
|
@@ -2144,7 +2263,7 @@ class Et {
|
|
|
2144
2263
|
try {
|
|
2145
2264
|
if (e.checkoutProfile.styles?.fontFamily)
|
|
2146
2265
|
try {
|
|
2147
|
-
const { cleanup: t } =
|
|
2266
|
+
const { cleanup: t } = Ne({
|
|
2148
2267
|
fontFamily: e.checkoutProfile.styles.fontFamily
|
|
2149
2268
|
});
|
|
2150
2269
|
this.fontCleanup = t, this.formElement.style.fontFamily = e.checkoutProfile.styles.fontFamily;
|
|
@@ -2161,15 +2280,17 @@ class Et {
|
|
|
2161
2280
|
};
|
|
2162
2281
|
isFormDisabled() {
|
|
2163
2282
|
const e = this.formManager.getFormState(), t = this.checkoutProfile.getState(), s = Object.keys(e.errors).filter(
|
|
2164
|
-
(
|
|
2165
|
-
).length > 0, a = e.errors.billingAddress, n = a && typeof a == "object" ? Object.keys(a).length > 0 : !1, r = e.errors.shippingAddress,
|
|
2283
|
+
(f) => f !== "billingAddress" && f !== "shippingAddress"
|
|
2284
|
+
).length > 0, a = e.errors.billingAddress, n = a && typeof a == "object" ? Object.keys(a).length > 0 : !1, r = e.errors.shippingAddress, o = r && typeof r == "object" ? Object.keys(r).length > 0 : !1, d = s || n || o, m = Z(
|
|
2166
2285
|
t.checkoutProfile?.layout
|
|
2167
|
-
) ? !!(e.formData.billingAddress?.firstName || e.formData.billingAddress?.lastName || e.formData.shippingAddress?.firstName || e.formData.shippingAddress?.lastName) : !!e.formData.name,
|
|
2168
|
-
(
|
|
2169
|
-
|
|
2170
|
-
(
|
|
2171
|
-
|
|
2172
|
-
|
|
2286
|
+
) ? !!(e.formData.billingAddress?.firstName || e.formData.billingAddress?.lastName || e.formData.shippingAddress?.firstName || e.formData.shippingAddress?.lastName) : !!e.formData.name, l = t.checkoutProfile?.layout.phoneNumber?.enabled ?? !1 ? !!e.formData.phoneNumber : !0, { billingFields: u, shippingFields: y } = t.checkoutProfile?.layout ?? {}, p = /* @__PURE__ */ new Set(["US", "CA"]), g = (f, S) => {
|
|
2287
|
+
if (!f) return !0;
|
|
2288
|
+
const C = S?.country ?? "";
|
|
2289
|
+
return Object.entries(f).every(([N, A]) => !A?.enabled || N === "state" && (!p.has(C) || A.hiddenForCountries?.includes(C)) ? !0 : !!S?.[N]?.trim());
|
|
2290
|
+
}, h = !this.isVgsMode || Object.values(this.vgsFieldsState).every(
|
|
2291
|
+
(f) => f?.isValid === !0
|
|
2292
|
+
), v = this.isVgsMode ? !!e.formData.email && l && h && g(u, e.formData.billingAddress) && g(y, e.formData.shippingAddress) : !!e.formData.email && l && m && !!e.formData.cardNumber && !!e.formData.cardCvv && !!e.formData.cardExpiry && g(u, e.formData.billingAddress) && g(y, e.formData.shippingAddress);
|
|
2293
|
+
return d || !v || this.isSubmitting;
|
|
2173
2294
|
}
|
|
2174
2295
|
setSubmitting(e) {
|
|
2175
2296
|
this.isSubmitting = e;
|
|
@@ -2187,7 +2308,7 @@ class Et {
|
|
|
2187
2308
|
continue;
|
|
2188
2309
|
const n = a.errors?.[0];
|
|
2189
2310
|
if (!n) continue;
|
|
2190
|
-
const r =
|
|
2311
|
+
const r = we(s, n.code);
|
|
2191
2312
|
r && (t[s] = e(r));
|
|
2192
2313
|
}
|
|
2193
2314
|
return t;
|
|
@@ -2199,18 +2320,18 @@ class Et {
|
|
|
2199
2320
|
this.fontCleanup && (this.fontCleanup(), this.fontCleanup = void 0);
|
|
2200
2321
|
}
|
|
2201
2322
|
}
|
|
2202
|
-
class
|
|
2323
|
+
class Mt extends k {
|
|
2203
2324
|
titleElement;
|
|
2204
2325
|
constructor(e = {}) {
|
|
2205
2326
|
super("div", ["blur-bg"]);
|
|
2206
|
-
const t =
|
|
2207
|
-
this.titleElement = new
|
|
2327
|
+
const t = D.createDiv(["loader"]);
|
|
2328
|
+
this.titleElement = new k("h3", ["title"]), this.titleElement.setText(e.text || ""), this.appendChild(t), this.appendChild(this.titleElement);
|
|
2208
2329
|
}
|
|
2209
2330
|
setText(e) {
|
|
2210
2331
|
return this.titleElement.setText(e), this;
|
|
2211
2332
|
}
|
|
2212
2333
|
}
|
|
2213
|
-
const
|
|
2334
|
+
const ce = {
|
|
2214
2335
|
street: "",
|
|
2215
2336
|
firstName: "",
|
|
2216
2337
|
lastName: "",
|
|
@@ -2218,7 +2339,7 @@ const oe = {
|
|
|
2218
2339
|
city: "",
|
|
2219
2340
|
zipCode: "",
|
|
2220
2341
|
country: ""
|
|
2221
|
-
},
|
|
2342
|
+
}, he = (i, e) => {
|
|
2222
2343
|
const t = {}, s = `${e}.`;
|
|
2223
2344
|
return Object.keys(i).forEach((a) => {
|
|
2224
2345
|
if (a.startsWith(s)) {
|
|
@@ -2227,7 +2348,7 @@ const oe = {
|
|
|
2227
2348
|
}
|
|
2228
2349
|
}), t;
|
|
2229
2350
|
};
|
|
2230
|
-
class
|
|
2351
|
+
class Nt {
|
|
2231
2352
|
formElement;
|
|
2232
2353
|
componentManager;
|
|
2233
2354
|
onLoadingStateChange;
|
|
@@ -2261,13 +2382,13 @@ class Ft {
|
|
|
2261
2382
|
!!(e.errors.name && e.touched.name),
|
|
2262
2383
|
e.errors.name
|
|
2263
2384
|
), this.componentManager.updateBillingAddressSection(
|
|
2264
|
-
e.formData.billingAddress ??
|
|
2385
|
+
e.formData.billingAddress ?? ce,
|
|
2265
2386
|
e.errors.billingAddress ?? {},
|
|
2266
|
-
|
|
2387
|
+
he(e.touched, "billingAddress")
|
|
2267
2388
|
), this.componentManager.updateShippingAddressSection(
|
|
2268
|
-
e.formData.shippingAddress ??
|
|
2389
|
+
e.formData.shippingAddress ?? ce,
|
|
2269
2390
|
e.errors.shippingAddress ?? {},
|
|
2270
|
-
|
|
2391
|
+
he(e.touched, "shippingAddress")
|
|
2271
2392
|
), this.componentManager.updateSubmitButton(t);
|
|
2272
2393
|
}
|
|
2273
2394
|
setLoadingState(e) {
|
|
@@ -2275,10 +2396,10 @@ class Ft {
|
|
|
2275
2396
|
this.onLoadingStateChange(e);
|
|
2276
2397
|
return;
|
|
2277
2398
|
}
|
|
2278
|
-
e ? (this.hideSkeleton(), this.formSkeleton = new
|
|
2399
|
+
e ? (this.hideSkeleton(), this.formSkeleton = new pe(), this.formElement.appendChild(this.formSkeleton.getElement())) : this.hideSkeleton();
|
|
2279
2400
|
}
|
|
2280
2401
|
showSpinner(e) {
|
|
2281
|
-
this.hideSpinner(), this.spinner = new
|
|
2402
|
+
this.hideSpinner(), this.spinner = new Mt({ text: e }), this.formElement.appendChild(this.spinner.getElement());
|
|
2282
2403
|
}
|
|
2283
2404
|
hideSpinner() {
|
|
2284
2405
|
this.spinner && (this.spinner.getElement().remove(), this.spinner = void 0);
|
|
@@ -2287,7 +2408,7 @@ class Ft {
|
|
|
2287
2408
|
this.formSkeleton && (this.formSkeleton.getElement().remove(), this.formSkeleton = void 0);
|
|
2288
2409
|
}
|
|
2289
2410
|
setErrorMessage(e) {
|
|
2290
|
-
this.alert && (this.alert.getElement().remove(), this.alert = void 0), this.alert = new
|
|
2411
|
+
this.alert && (this.alert.getElement().remove(), this.alert = void 0), this.alert = new Pe({ message: e }), this.formElement.insertBefore(
|
|
2291
2412
|
this.alert.getElement(),
|
|
2292
2413
|
this.formElement.firstChild
|
|
2293
2414
|
);
|
|
@@ -2299,7 +2420,7 @@ class Ft {
|
|
|
2299
2420
|
this.spinner && (this.spinner.getElement().remove(), this.spinner = void 0), this.formSkeleton && (this.formSkeleton.getElement().remove(), this.formSkeleton = void 0), this.alert && (this.alert.getElement().remove(), this.alert = void 0);
|
|
2300
2421
|
}
|
|
2301
2422
|
}
|
|
2302
|
-
const
|
|
2423
|
+
const x = (i) => ({
|
|
2303
2424
|
street: "",
|
|
2304
2425
|
firstName: "",
|
|
2305
2426
|
lastName: "",
|
|
@@ -2309,12 +2430,12 @@ const D = (i) => ({
|
|
|
2309
2430
|
country: "",
|
|
2310
2431
|
...i
|
|
2311
2432
|
});
|
|
2312
|
-
class
|
|
2433
|
+
class wt extends k {
|
|
2313
2434
|
options;
|
|
2314
|
-
formManager =
|
|
2435
|
+
formManager = dt();
|
|
2315
2436
|
checkoutProfile;
|
|
2316
|
-
translation =
|
|
2317
|
-
focusManager = new
|
|
2437
|
+
translation = ke();
|
|
2438
|
+
focusManager = new Ae();
|
|
2318
2439
|
// Managers
|
|
2319
2440
|
componentManager;
|
|
2320
2441
|
eventHandler;
|
|
@@ -2325,9 +2446,9 @@ class Mt extends P {
|
|
|
2325
2446
|
vgsJwt;
|
|
2326
2447
|
vgsCardResult;
|
|
2327
2448
|
constructor(e) {
|
|
2328
|
-
super("form", ["form-container"]), this.options = e, this.vgsJwt = e.vgsJwt, this.vgsJwt && (this.vgsService = new
|
|
2449
|
+
super("form", ["form-container"]), this.options = e, this.vgsJwt = e.vgsJwt, this.vgsJwt && (this.vgsService = new T()), this.checkoutProfile = lt({
|
|
2329
2450
|
appearance: e.appearance
|
|
2330
|
-
}), e.locale && this.translation.setLocale(e.locale), this.componentManager = new
|
|
2451
|
+
}), e.locale && this.translation.setLocale(e.locale), this.componentManager = new Et({
|
|
2331
2452
|
formElement: this.element,
|
|
2332
2453
|
focusManager: this.focusManager,
|
|
2333
2454
|
translationFunc: this.translation.t,
|
|
@@ -2344,11 +2465,11 @@ class Mt extends P {
|
|
|
2344
2465
|
environment: e.environment,
|
|
2345
2466
|
vgsService: this.vgsService,
|
|
2346
2467
|
onVgsStateChange: (t) => this.handleVgsStateChange(t)
|
|
2347
|
-
}), this.uiManager = new
|
|
2468
|
+
}), this.uiManager = new Nt({
|
|
2348
2469
|
formElement: this.element,
|
|
2349
2470
|
componentManager: this.componentManager,
|
|
2350
2471
|
onLoadingStateChange: e.onLoadingStateChange
|
|
2351
|
-
}), this.stateCoordinator = new
|
|
2472
|
+
}), this.stateCoordinator = new Ft({
|
|
2352
2473
|
formManager: this.formManager,
|
|
2353
2474
|
checkoutProfile: this.checkoutProfile,
|
|
2354
2475
|
componentManager: this.componentManager,
|
|
@@ -2358,7 +2479,7 @@ class Mt extends P {
|
|
|
2358
2479
|
onError: (t) => this.uiManager.setErrorMessage(t),
|
|
2359
2480
|
onLoadingChange: (t) => this.uiManager.setLoadingState(t),
|
|
2360
2481
|
getInitialFormData: () => this._getFormStateData().formData
|
|
2361
|
-
}), this.vgsService && this.stateCoordinator.setVgsMode(!0), this.eventHandler = new
|
|
2482
|
+
}), this.vgsService && this.stateCoordinator.setVgsMode(!0), this.eventHandler = new Ct({
|
|
2362
2483
|
formManager: this.formManager,
|
|
2363
2484
|
focusManager: this.focusManager,
|
|
2364
2485
|
onFormSubmit: async () => this.handleSubmit(),
|
|
@@ -2383,12 +2504,12 @@ class Mt extends P {
|
|
|
2383
2504
|
},
|
|
2384
2505
|
...e.initialValues.name && { name: e.initialValues.name },
|
|
2385
2506
|
...e.initialValues.billingAddress && {
|
|
2386
|
-
billingAddress:
|
|
2507
|
+
billingAddress: x(
|
|
2387
2508
|
e.initialValues.billingAddress
|
|
2388
2509
|
)
|
|
2389
2510
|
},
|
|
2390
2511
|
...e.initialValues.shippingAddress && {
|
|
2391
|
-
shippingAddress:
|
|
2512
|
+
shippingAddress: x(
|
|
2392
2513
|
e.initialValues.shippingAddress
|
|
2393
2514
|
)
|
|
2394
2515
|
}
|
|
@@ -2405,10 +2526,10 @@ class Mt extends P {
|
|
|
2405
2526
|
cardNumber: "",
|
|
2406
2527
|
cardCvv: "",
|
|
2407
2528
|
...t?.billingAddress && {
|
|
2408
|
-
billingAddress:
|
|
2529
|
+
billingAddress: x(t.billingAddress)
|
|
2409
2530
|
},
|
|
2410
2531
|
...t?.shippingAddress && {
|
|
2411
|
-
shippingAddress:
|
|
2532
|
+
shippingAddress: x(t.shippingAddress)
|
|
2412
2533
|
}
|
|
2413
2534
|
},
|
|
2414
2535
|
errors: e.errors || {},
|
|
@@ -2431,12 +2552,15 @@ class Mt extends P {
|
|
|
2431
2552
|
this.uiManager.setErrorMessage("Failed to load checkout configuration");
|
|
2432
2553
|
return;
|
|
2433
2554
|
}
|
|
2434
|
-
this.componentManager.hasComponents() && this.componentManager.cleanup(), e.checkoutProfile.layout.phoneNumber?.enabled && this.formManager.getFormState().formData.phoneNumber === void 0 && this.formManager.setFormData({
|
|
2435
|
-
|
|
2555
|
+
this.componentManager.hasComponents() && this.componentManager.cleanup(), e.checkoutProfile.layout.phoneNumber?.enabled && this.formManager.getFormState().formData.phoneNumber === void 0 && this.formManager.setFormData({
|
|
2556
|
+
phoneNumber: "",
|
|
2557
|
+
phoneCountryCode: e.checkoutProfile.layout.phoneNumber.defaultCountry?.toUpperCase() || "US"
|
|
2558
|
+
}), e.checkoutProfile.layout.billingFields && this.formManager.getFormState().formData.billingAddress === void 0 && this.formManager.setFormData({
|
|
2559
|
+
billingAddress: x()
|
|
2436
2560
|
}), e.checkoutProfile.layout.shippingFields && this.formManager.getFormState().formData.shippingAddress === void 0 && this.formManager.setFormData({
|
|
2437
|
-
shippingAddress:
|
|
2561
|
+
shippingAddress: x()
|
|
2438
2562
|
});
|
|
2439
|
-
const { formData: t, errors: s, touched: a } = this._getFormStateData(), n =
|
|
2563
|
+
const { formData: t, errors: s, touched: a } = this._getFormStateData(), n = pt(
|
|
2440
2564
|
e.checkoutProfile.layout
|
|
2441
2565
|
);
|
|
2442
2566
|
try {
|
|
@@ -2444,8 +2568,8 @@ class Mt extends P {
|
|
|
2444
2568
|
e.checkoutProfile,
|
|
2445
2569
|
t
|
|
2446
2570
|
);
|
|
2447
|
-
} catch (
|
|
2448
|
-
console.error("Failed to create payment methods:",
|
|
2571
|
+
} catch (o) {
|
|
2572
|
+
console.error("Failed to create payment methods:", o);
|
|
2449
2573
|
}
|
|
2450
2574
|
try {
|
|
2451
2575
|
this.componentManager.createEmailField(
|
|
@@ -2454,8 +2578,8 @@ class Mt extends P {
|
|
|
2454
2578
|
s,
|
|
2455
2579
|
a
|
|
2456
2580
|
);
|
|
2457
|
-
} catch (
|
|
2458
|
-
console.error("Failed to create email field:",
|
|
2581
|
+
} catch (o) {
|
|
2582
|
+
console.error("Failed to create email field:", o);
|
|
2459
2583
|
}
|
|
2460
2584
|
if (n) {
|
|
2461
2585
|
try {
|
|
@@ -2465,8 +2589,8 @@ class Mt extends P {
|
|
|
2465
2589
|
s,
|
|
2466
2590
|
a
|
|
2467
2591
|
);
|
|
2468
|
-
} catch (
|
|
2469
|
-
console.error("Failed to create billing address section:",
|
|
2592
|
+
} catch (o) {
|
|
2593
|
+
console.error("Failed to create billing address section:", o);
|
|
2470
2594
|
}
|
|
2471
2595
|
try {
|
|
2472
2596
|
this.componentManager.createShippingAddressSection(
|
|
@@ -2475,8 +2599,8 @@ class Mt extends P {
|
|
|
2475
2599
|
s,
|
|
2476
2600
|
a
|
|
2477
2601
|
);
|
|
2478
|
-
} catch (
|
|
2479
|
-
console.error("Failed to create shipping address section:",
|
|
2602
|
+
} catch (o) {
|
|
2603
|
+
console.error("Failed to create shipping address section:", o);
|
|
2480
2604
|
}
|
|
2481
2605
|
}
|
|
2482
2606
|
if (e.checkoutProfile.layout.phoneNumber?.enabled)
|
|
@@ -2487,8 +2611,8 @@ class Mt extends P {
|
|
|
2487
2611
|
s,
|
|
2488
2612
|
a
|
|
2489
2613
|
);
|
|
2490
|
-
} catch (
|
|
2491
|
-
console.error("Failed to create phone number field:",
|
|
2614
|
+
} catch (o) {
|
|
2615
|
+
console.error("Failed to create phone number field:", o);
|
|
2492
2616
|
}
|
|
2493
2617
|
try {
|
|
2494
2618
|
this.componentManager.createCardSection(
|
|
@@ -2497,10 +2621,12 @@ class Mt extends P {
|
|
|
2497
2621
|
s,
|
|
2498
2622
|
a
|
|
2499
2623
|
);
|
|
2500
|
-
} catch (
|
|
2501
|
-
console.error("Failed to create card section:",
|
|
2624
|
+
} catch (o) {
|
|
2625
|
+
console.error("Failed to create card section:", o);
|
|
2502
2626
|
}
|
|
2503
|
-
if (!
|
|
2627
|
+
if (!Z(
|
|
2628
|
+
e.checkoutProfile.layout
|
|
2629
|
+
))
|
|
2504
2630
|
try {
|
|
2505
2631
|
this.componentManager.createCardholderSection(
|
|
2506
2632
|
e.checkoutProfile,
|
|
@@ -2508,19 +2634,19 @@ class Mt extends P {
|
|
|
2508
2634
|
s,
|
|
2509
2635
|
a
|
|
2510
2636
|
);
|
|
2511
|
-
} catch (
|
|
2512
|
-
console.error("Failed to create cardholder section:",
|
|
2637
|
+
} catch (o) {
|
|
2638
|
+
console.error("Failed to create cardholder section:", o);
|
|
2513
2639
|
}
|
|
2514
|
-
this.vgsService && this.componentManager.mountVgsFields(e.checkoutProfile).catch((
|
|
2515
|
-
console.error("Failed to mount VGS fields:",
|
|
2640
|
+
this.vgsService && this.componentManager.mountVgsFields(e.checkoutProfile).catch((o) => {
|
|
2641
|
+
console.error("Failed to mount VGS fields:", o);
|
|
2516
2642
|
});
|
|
2517
2643
|
try {
|
|
2518
2644
|
this.componentManager.createSubmitButton(
|
|
2519
2645
|
e.checkoutProfile,
|
|
2520
2646
|
this.stateCoordinator.isFormDisabled()
|
|
2521
2647
|
);
|
|
2522
|
-
} catch (
|
|
2523
|
-
console.error("Failed to create submit button:",
|
|
2648
|
+
} catch (o) {
|
|
2649
|
+
console.error("Failed to create submit button:", o);
|
|
2524
2650
|
}
|
|
2525
2651
|
}
|
|
2526
2652
|
updateFormUI() {
|
|
@@ -2536,13 +2662,13 @@ class Mt extends P {
|
|
|
2536
2662
|
*/
|
|
2537
2663
|
inferCardholderName() {
|
|
2538
2664
|
const e = this.checkoutProfile.getState();
|
|
2539
|
-
if (!e.checkoutProfile || !
|
|
2665
|
+
if (!e.checkoutProfile || !Z(
|
|
2540
2666
|
e.checkoutProfile.layout
|
|
2541
2667
|
)) return;
|
|
2542
2668
|
const { formData: s } = this._getFormStateData(), a = s.billingAddress ?? s.shippingAddress;
|
|
2543
2669
|
if (!a) return;
|
|
2544
|
-
const n = a.firstName?.trim() ?? "", r = a.lastName?.trim() ?? "",
|
|
2545
|
-
|
|
2670
|
+
const n = a.firstName?.trim() ?? "", r = a.lastName?.trim() ?? "", o = [n, r].filter(Boolean).join(" ");
|
|
2671
|
+
o && this.formManager.setFormData({ name: o });
|
|
2546
2672
|
}
|
|
2547
2673
|
/**
|
|
2548
2674
|
* Infers address data based on field configuration.
|
|
@@ -2552,7 +2678,7 @@ class Mt extends P {
|
|
|
2552
2678
|
inferAddresses() {
|
|
2553
2679
|
const e = this.checkoutProfile.getState();
|
|
2554
2680
|
if (!e.checkoutProfile) return;
|
|
2555
|
-
const { billingFields: t, shippingFields: s } = e.checkoutProfile.layout, a = t && Object.values(t).some((
|
|
2681
|
+
const { billingFields: t, shippingFields: s } = e.checkoutProfile.layout, a = t && Object.values(t).some((o) => o?.enabled), n = s && Object.values(s).some((o) => o?.enabled), { formData: r } = this._getFormStateData();
|
|
2556
2682
|
!a && n && r.shippingAddress ? this.formManager.setFormData({
|
|
2557
2683
|
billingAddress: { ...r.shippingAddress }
|
|
2558
2684
|
}) : !n && a && r.billingAddress && this.formManager.setFormData({
|
|
@@ -2644,13 +2770,13 @@ class Mt extends P {
|
|
|
2644
2770
|
), this.componentManager.cleanup(), this.uiManager.cleanup(), this.getElement().remove();
|
|
2645
2771
|
}
|
|
2646
2772
|
associatePayment(e, t, s, a, n) {
|
|
2647
|
-
this.options.paymentId = e, this.options.checkoutKey = t, this.options.supportedPaymentMethods = s, this.options.checkoutDetails = a, this.componentManager.setCheckoutDetailsLoaded(!0), n && !this.vgsService && (this.vgsJwt = n, this.vgsService = new
|
|
2773
|
+
this.options.paymentId = e, this.options.checkoutKey = t, this.options.supportedPaymentMethods = s, this.options.checkoutDetails = a, this.componentManager.setCheckoutDetailsLoaded(!0), n && !this.vgsService && (this.vgsJwt = n, this.vgsService = new T(), this.componentManager.setVgsService(this.vgsService), this.stateCoordinator.setVgsMode(!0), this.vgsService.init(this.options.environment).then((o) => {
|
|
2648
2774
|
this.vgsService?.createForm(
|
|
2649
|
-
|
|
2775
|
+
o,
|
|
2650
2776
|
(d) => this.handleVgsStateChange(d)
|
|
2651
2777
|
), this.renderFormComponents();
|
|
2652
|
-
}).catch((
|
|
2653
|
-
console.error("Failed to load VGS Collect:",
|
|
2778
|
+
}).catch((o) => {
|
|
2779
|
+
console.error("Failed to load VGS Collect:", o), this.vgsService = void 0, this.vgsJwt = void 0, this.renderFormComponents();
|
|
2654
2780
|
})), this.componentManager.removePaymentMethods(), this.componentManager.updateSupportedPaymentMethods(
|
|
2655
2781
|
s
|
|
2656
2782
|
), this.componentManager.updatePaymentDetails(
|
|
@@ -2660,16 +2786,16 @@ class Mt extends P {
|
|
|
2660
2786
|
), !n && this.checkoutProfile.getState().checkoutProfile && this.renderFormComponents();
|
|
2661
2787
|
const r = this.checkoutProfile.getState();
|
|
2662
2788
|
if (r.checkoutProfile) {
|
|
2663
|
-
const { formData:
|
|
2789
|
+
const { formData: o } = this._getFormStateData();
|
|
2664
2790
|
this.componentManager.createPaymentMethods(
|
|
2665
2791
|
r.checkoutProfile,
|
|
2666
|
-
|
|
2792
|
+
o,
|
|
2667
2793
|
!0
|
|
2668
2794
|
);
|
|
2669
2795
|
}
|
|
2670
2796
|
}
|
|
2671
2797
|
}
|
|
2672
|
-
class
|
|
2798
|
+
class Pt {
|
|
2673
2799
|
container = null;
|
|
2674
2800
|
options;
|
|
2675
2801
|
onSubmit;
|
|
@@ -2693,7 +2819,7 @@ class Nt {
|
|
|
2693
2819
|
}
|
|
2694
2820
|
}
|
|
2695
2821
|
renderForm(e) {
|
|
2696
|
-
this.container && (this.form && (this.form.destroy(), this.form = null), this.form = new
|
|
2822
|
+
this.container && (this.form && (this.form.destroy(), this.form = null), this.form = new wt({
|
|
2697
2823
|
apiKey: this.options.apiKey,
|
|
2698
2824
|
onSubmit: this.onSubmit,
|
|
2699
2825
|
locale: this.options.locale,
|
|
@@ -2730,7 +2856,7 @@ class Nt {
|
|
|
2730
2856
|
);
|
|
2731
2857
|
}
|
|
2732
2858
|
}
|
|
2733
|
-
class
|
|
2859
|
+
class kt {
|
|
2734
2860
|
state;
|
|
2735
2861
|
listeners = /* @__PURE__ */ new Set();
|
|
2736
2862
|
constructor(e) {
|
|
@@ -2752,8 +2878,8 @@ class wt {
|
|
|
2752
2878
|
this.listeners.forEach((t) => t(e));
|
|
2753
2879
|
}
|
|
2754
2880
|
}
|
|
2755
|
-
const
|
|
2756
|
-
class
|
|
2881
|
+
const At = "en";
|
|
2882
|
+
class Dt {
|
|
2757
2883
|
config;
|
|
2758
2884
|
paymentState;
|
|
2759
2885
|
apiService;
|
|
@@ -2761,18 +2887,18 @@ class kt {
|
|
|
2761
2887
|
stateManager;
|
|
2762
2888
|
sessionId;
|
|
2763
2889
|
constructor(e) {
|
|
2764
|
-
this.config = this.validateConfig(e), this.paymentState = {}, this.sessionId = crypto.randomUUID(),
|
|
2890
|
+
this.config = this.validateConfig(e), this.paymentState = {}, this.sessionId = crypto.randomUUID(), rt({
|
|
2765
2891
|
environment: this.config.environment,
|
|
2766
2892
|
sessionId: this.sessionId
|
|
2767
|
-
}), F
|
|
2893
|
+
}), M(F.CHECKOUT_INITIALIZED, {
|
|
2768
2894
|
environment: this.config.environment
|
|
2769
|
-
}), this.apiService = new
|
|
2895
|
+
}), this.apiService = new De(
|
|
2770
2896
|
this.config.apiKey,
|
|
2771
2897
|
this.config.environment
|
|
2772
|
-
), this.stateManager = new
|
|
2898
|
+
), this.stateManager = new kt({
|
|
2773
2899
|
mounted: !1,
|
|
2774
2900
|
form: null
|
|
2775
|
-
}), this.formManager = new
|
|
2901
|
+
}), this.formManager = new Pt(
|
|
2776
2902
|
{
|
|
2777
2903
|
locale: this.config.locale,
|
|
2778
2904
|
apiKey: this.config.apiKey,
|
|
@@ -2794,7 +2920,7 @@ class kt {
|
|
|
2794
2920
|
apiKey: e.apiKey,
|
|
2795
2921
|
returnUrl: e.returnUrl,
|
|
2796
2922
|
environment: e.environment,
|
|
2797
|
-
locale: e.locale ||
|
|
2923
|
+
locale: e.locale || At,
|
|
2798
2924
|
disableErrorMessages: e.disableErrorMessages ?? !1,
|
|
2799
2925
|
manualActionHandling: e.manualActionHandling ?? !1,
|
|
2800
2926
|
appearance: e.appearance,
|
|
@@ -2815,7 +2941,7 @@ class kt {
|
|
|
2815
2941
|
return t.appendChild(s), this.stateManager.updateState({
|
|
2816
2942
|
form: s,
|
|
2817
2943
|
mounted: !0
|
|
2818
|
-
}), this.formManager.mount(s), F
|
|
2944
|
+
}), this.formManager.mount(s), M(F.CHECKOUT_MOUNTED, {
|
|
2819
2945
|
container_id: e
|
|
2820
2946
|
}), this;
|
|
2821
2947
|
}
|
|
@@ -2827,7 +2953,7 @@ class kt {
|
|
|
2827
2953
|
t && t.remove(), this.stateManager.updateState({
|
|
2828
2954
|
form: null,
|
|
2829
2955
|
mounted: !1
|
|
2830
|
-
}), F
|
|
2956
|
+
}), M(F.CHECKOUT_UNMOUNTED);
|
|
2831
2957
|
});
|
|
2832
2958
|
}
|
|
2833
2959
|
async handleSubmit({
|
|
@@ -2839,7 +2965,7 @@ class kt {
|
|
|
2839
2965
|
"Payment must be associated before submitting. Call associatePayment() first."
|
|
2840
2966
|
);
|
|
2841
2967
|
const s = this.getPaymentMethod(e, t);
|
|
2842
|
-
F
|
|
2968
|
+
M(F.PAYMENT_SUBMIT_STARTED, {
|
|
2843
2969
|
payment_id: this.paymentState.paymentId,
|
|
2844
2970
|
payment_method: s
|
|
2845
2971
|
});
|
|
@@ -2852,8 +2978,8 @@ class kt {
|
|
|
2852
2978
|
returnUrl: this.config.returnUrl,
|
|
2853
2979
|
applePayData: t
|
|
2854
2980
|
}), r = performance.now() - a;
|
|
2855
|
-
|
|
2856
|
-
|
|
2981
|
+
re(
|
|
2982
|
+
te.PAYMENT_AUTHORIZATION_TIME,
|
|
2857
2983
|
r,
|
|
2858
2984
|
"ms",
|
|
2859
2985
|
{
|
|
@@ -2861,14 +2987,14 @@ class kt {
|
|
|
2861
2987
|
payment_method: s,
|
|
2862
2988
|
status: "success"
|
|
2863
2989
|
}
|
|
2864
|
-
), F
|
|
2990
|
+
), M(F.PAYMENT_SUBMIT_SUCCESS, {
|
|
2865
2991
|
payment_id: this.paymentState.paymentId,
|
|
2866
2992
|
payment_method: s
|
|
2867
2993
|
}), this.handlePaymentResponse(n);
|
|
2868
2994
|
} catch (n) {
|
|
2869
2995
|
const r = performance.now() - a;
|
|
2870
|
-
|
|
2871
|
-
|
|
2996
|
+
re(
|
|
2997
|
+
te.PAYMENT_AUTHORIZATION_TIME,
|
|
2872
2998
|
r,
|
|
2873
2999
|
"ms",
|
|
2874
3000
|
{
|
|
@@ -2876,7 +3002,7 @@ class kt {
|
|
|
2876
3002
|
payment_method: s,
|
|
2877
3003
|
status: "failed"
|
|
2878
3004
|
}
|
|
2879
|
-
), F
|
|
3005
|
+
), M(F.PAYMENT_SUBMIT_FAILED, {
|
|
2880
3006
|
payment_id: this.paymentState.paymentId,
|
|
2881
3007
|
payment_method: s,
|
|
2882
3008
|
error_message: n.details?.message ?? "Unknown error"
|
|
@@ -2884,17 +3010,17 @@ class kt {
|
|
|
2884
3010
|
}
|
|
2885
3011
|
}
|
|
2886
3012
|
handlePaymentResponse(e) {
|
|
2887
|
-
if (e.latestTransaction.status === "authorized" && (F
|
|
3013
|
+
if (e.latestTransaction.status === "authorized" && (M(F.PAYMENT_AUTHORIZED, {
|
|
2888
3014
|
payment_id: this.paymentState.paymentId ?? "",
|
|
2889
3015
|
status: e.latestTransaction.status
|
|
2890
3016
|
}), this.config.callbacks.onPaymentSucceeded?.(
|
|
2891
3017
|
e.latestTransaction.status
|
|
2892
|
-
)), e.latestTransaction.status === "failed" && (F
|
|
3018
|
+
)), e.latestTransaction.status === "failed" && (M(F.PAYMENT_FAILED, {
|
|
2893
3019
|
payment_id: this.paymentState.paymentId ?? "",
|
|
2894
3020
|
status: e.latestTransaction.status
|
|
2895
3021
|
}), this.config.callbacks.onPaymentFailed?.(e.latestTransaction.status)), e.status === "requires_action") {
|
|
2896
3022
|
const { redirectUrl: t } = e.action;
|
|
2897
|
-
F
|
|
3023
|
+
M(F.PAYMENT_ACTION_REQUIRED, {
|
|
2898
3024
|
payment_id: this.paymentState.paymentId ?? "",
|
|
2899
3025
|
status: e.status
|
|
2900
3026
|
}), this.config.manualActionHandling ? this.config.callbacks.onActionRequired?.(t) : globalThis.location.href = t;
|
|
@@ -2934,7 +3060,7 @@ class kt {
|
|
|
2934
3060
|
throw new Error("paymentId and checkoutKey are required");
|
|
2935
3061
|
this.paymentState.paymentId = e, this.paymentState.checkoutKey = t;
|
|
2936
3062
|
try {
|
|
2937
|
-
const s = await
|
|
3063
|
+
const s = await Ie({
|
|
2938
3064
|
id: e,
|
|
2939
3065
|
checkoutKey: t,
|
|
2940
3066
|
environment: this.config.environment
|
|
@@ -2964,35 +3090,35 @@ class kt {
|
|
|
2964
3090
|
a,
|
|
2965
3091
|
this.paymentState.checkoutDetails,
|
|
2966
3092
|
s.vgsJwt
|
|
2967
|
-
), F
|
|
3093
|
+
), M(F.PAYMENT_ASSOCIATED, {
|
|
2968
3094
|
payment_id: e,
|
|
2969
3095
|
currency: s.currency,
|
|
2970
3096
|
country_code: s.countryCode
|
|
2971
3097
|
});
|
|
2972
3098
|
} catch (s) {
|
|
2973
|
-
throw F
|
|
3099
|
+
throw M(F.PAYMENT_ASSOCIATION_FAILED, {
|
|
2974
3100
|
payment_id: e,
|
|
2975
3101
|
error_message: s instanceof Error ? s.message : "Unknown error"
|
|
2976
|
-
}),
|
|
3102
|
+
}), ot(
|
|
2977
3103
|
s instanceof Error ? s : new Error("Failed to associate payment"),
|
|
2978
3104
|
{ payment_id: e }
|
|
2979
3105
|
), s;
|
|
2980
3106
|
}
|
|
2981
3107
|
}
|
|
2982
3108
|
}
|
|
2983
|
-
typeof globalThis < "u" && (globalThis.OdusCheckout =
|
|
3109
|
+
typeof globalThis < "u" && (globalThis.OdusCheckout = Dt);
|
|
2984
3110
|
export {
|
|
2985
|
-
|
|
2986
|
-
|
|
2987
|
-
|
|
2988
|
-
|
|
2989
|
-
|
|
2990
|
-
|
|
3111
|
+
Dt as OdusCheckout,
|
|
3112
|
+
Vt as deLocale,
|
|
3113
|
+
_t as enLocale,
|
|
3114
|
+
Rt as esLocale,
|
|
3115
|
+
Bt as frLocale,
|
|
3116
|
+
Ut as itLocale,
|
|
2991
3117
|
Ot as plLocale,
|
|
2992
|
-
|
|
2993
|
-
|
|
2994
|
-
|
|
2995
|
-
|
|
2996
|
-
|
|
2997
|
-
|
|
3118
|
+
Ht as ptLocale,
|
|
3119
|
+
ot as pushError,
|
|
3120
|
+
M as pushEvent,
|
|
3121
|
+
xt as pushLog,
|
|
3122
|
+
re as pushMeasurement,
|
|
3123
|
+
zt as trLocale
|
|
2998
3124
|
};
|