@odus/checkout 0.30.0 → 1.0.0
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 +358 -600
- package/dist/elements.d.ts +1 -0
- package/dist/elements.d.ts.map +1 -1
- package/dist/elements.es.js +506 -255
- package/dist/index.css +1 -1
- package/dist/package.json +1 -1
- package/dist/phone.js +1 -1
- package/dist/shared.js +1931 -1603
- package/package.json +1 -1
package/dist/checkout.es.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import { c as he, a as pe, f as K, d as ge, C as A, I as ue, b as P, g as fe, S as V, e as Q, H as ye, V as ee, h as I, A as be, P as Se, E as ve, l as Ee, i as Ce, j as Fe, k as Me, m as Ne, n as we, o as Pe, F as ke, p as te, q as Ae, r as De } from "./shared.js";
|
|
2
|
+
import { s as Dt, t as It, u as xt, v as Tt, w as Lt, x as Vt, y as _t, z as Bt } from "./shared.js";
|
|
3
3
|
const F = {
|
|
4
4
|
// Checkout lifecycle events
|
|
5
5
|
CHECKOUT_INITIALIZED: "checkout.initialized",
|
|
@@ -20,7 +20,7 @@ const F = {
|
|
|
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
|
+
}, Ie = /^\s*at (?:(.+?) ?\()?((?:file|https?|chrome-extension|webpack-internal):\/\/.+?):(\d+):(\d+)\)?\s*$/, xe = /^([^@]+)@((?:file|https?|chrome-extension|webpack-internal):\/\/[^\s:]+):(\d+):(\d+)$/, Te = /^(?:([^@]+)@)?((?:file|https?):\/\/[^\s:]+):(\d+):(\d+)$/, Z = (n) => {
|
|
24
24
|
if (!n)
|
|
25
25
|
return [];
|
|
26
26
|
const e = [], t = n.split(`
|
|
@@ -29,7 +29,7 @@ const F = {
|
|
|
29
29
|
const a = s.trim();
|
|
30
30
|
if (!a)
|
|
31
31
|
continue;
|
|
32
|
-
let i =
|
|
32
|
+
let i = Ie.exec(a);
|
|
33
33
|
if (i) {
|
|
34
34
|
e.push({
|
|
35
35
|
function: i[1] || "(anonymous)",
|
|
@@ -39,7 +39,7 @@ const F = {
|
|
|
39
39
|
});
|
|
40
40
|
continue;
|
|
41
41
|
}
|
|
42
|
-
i =
|
|
42
|
+
i = xe.exec(a) ?? Te.exec(a), i && e.push({
|
|
43
43
|
function: i[1] || "(anonymous)",
|
|
44
44
|
filename: i[2],
|
|
45
45
|
lineno: parseInt(i[3], 10),
|
|
@@ -47,9 +47,9 @@ const F = {
|
|
|
47
47
|
});
|
|
48
48
|
}
|
|
49
49
|
return e;
|
|
50
|
-
},
|
|
51
|
-
let z,
|
|
52
|
-
const
|
|
50
|
+
}, Le = "@odus/telemetry", Ve = "0.0.1";
|
|
51
|
+
let H, z, J;
|
|
52
|
+
const _e = () => {
|
|
53
53
|
if (typeof navigator > "u")
|
|
54
54
|
return {};
|
|
55
55
|
const n = navigator.userAgent;
|
|
@@ -66,36 +66,36 @@ const Be = () => {
|
|
|
66
66
|
viewportHeight: String(window.innerHeight),
|
|
67
67
|
userAgent: n
|
|
68
68
|
};
|
|
69
|
-
},
|
|
70
|
-
|
|
69
|
+
}, Be = () => typeof window > "u" ? {} : { url: window.location.href }, Re = (n) => {
|
|
70
|
+
H = void 0, J = void 0, z = n.sessionTracking?.session ? { id: n.sessionTracking.session.id } : void 0;
|
|
71
|
+
}, Ue = (n) => {
|
|
72
|
+
H = n;
|
|
73
|
+
}, Oe = () => {
|
|
74
|
+
H = void 0;
|
|
71
75
|
}, He = (n) => {
|
|
72
76
|
z = n;
|
|
73
|
-
}, ze = () => {
|
|
74
|
-
|
|
75
|
-
}, $e = (n) => {
|
|
76
|
-
|
|
77
|
-
}, Ke = (n) => {
|
|
78
|
-
X = n;
|
|
79
|
-
}, je = () => $?.id, qe = (n) => ({
|
|
80
|
-
sdk: { name: _e, version: Re },
|
|
77
|
+
}, ze = (n) => {
|
|
78
|
+
J = n;
|
|
79
|
+
}, $e = () => z?.id, Ke = (n) => ({
|
|
80
|
+
sdk: { name: Le, version: Ve },
|
|
81
81
|
app: n.app,
|
|
82
|
-
user:
|
|
83
|
-
session:
|
|
84
|
-
page:
|
|
85
|
-
browser:
|
|
86
|
-
view:
|
|
87
|
-
}),
|
|
88
|
-
let
|
|
89
|
-
const
|
|
82
|
+
user: H,
|
|
83
|
+
session: z,
|
|
84
|
+
page: Be(),
|
|
85
|
+
browser: _e(),
|
|
86
|
+
view: J
|
|
87
|
+
}), je = 30, qe = 250, We = 6e4;
|
|
88
|
+
let x = [], k = null, X = 0, _ = null, B = null;
|
|
89
|
+
const Ye = (n) => {
|
|
90
90
|
if (k)
|
|
91
91
|
return;
|
|
92
|
-
const e = n.batching?.sendTimeout ??
|
|
92
|
+
const e = n.batching?.sendTimeout ?? qe;
|
|
93
93
|
k = setTimeout(() => {
|
|
94
|
-
|
|
94
|
+
$(n);
|
|
95
95
|
}, e);
|
|
96
|
-
},
|
|
96
|
+
}, Ze = (n, e) => {
|
|
97
97
|
const t = {
|
|
98
|
-
meta:
|
|
98
|
+
meta: Ke(e)
|
|
99
99
|
};
|
|
100
100
|
for (const s of n)
|
|
101
101
|
switch (s.type) {
|
|
@@ -113,8 +113,8 @@ const Ze = (n) => {
|
|
|
113
113
|
break;
|
|
114
114
|
}
|
|
115
115
|
return t;
|
|
116
|
-
},
|
|
117
|
-
const s = JSON.stringify(n), a =
|
|
116
|
+
}, Ge = (n, e, t = !1) => {
|
|
117
|
+
const s = JSON.stringify(n), a = $e(), i = {
|
|
118
118
|
"Content-Type": "application/json"
|
|
119
119
|
};
|
|
120
120
|
if (a && (i["x-faro-session-id"] = a), t && typeof navigator < "u" && navigator.sendBeacon) {
|
|
@@ -122,7 +122,7 @@ const Ze = (n) => {
|
|
|
122
122
|
navigator.sendBeacon(e, o);
|
|
123
123
|
return;
|
|
124
124
|
}
|
|
125
|
-
const r = s.length <
|
|
125
|
+
const r = s.length < We;
|
|
126
126
|
fetch(e, {
|
|
127
127
|
method: "POST",
|
|
128
128
|
headers: i,
|
|
@@ -131,49 +131,49 @@ const Ze = (n) => {
|
|
|
131
131
|
}).then((o) => {
|
|
132
132
|
if (o.status === 429) {
|
|
133
133
|
const d = o.headers.get("Retry-After"), c = d ? parseInt(d, 10) * 1e3 : 3e4;
|
|
134
|
-
|
|
134
|
+
X = Date.now() + c;
|
|
135
135
|
}
|
|
136
136
|
}).catch(() => {
|
|
137
137
|
});
|
|
138
|
-
},
|
|
139
|
-
if (k && (clearTimeout(k), k = null),
|
|
138
|
+
}, $ = (n, e = !1) => {
|
|
139
|
+
if (k && (clearTimeout(k), k = null), x.length === 0)
|
|
140
140
|
return;
|
|
141
|
-
if (Date.now() <
|
|
142
|
-
|
|
141
|
+
if (Date.now() < X) {
|
|
142
|
+
x = [];
|
|
143
143
|
return;
|
|
144
144
|
}
|
|
145
|
-
const t =
|
|
146
|
-
|
|
145
|
+
const t = x;
|
|
146
|
+
x = [];
|
|
147
147
|
try {
|
|
148
|
-
let s =
|
|
148
|
+
let s = Ze(t, n);
|
|
149
149
|
if (n.beforeSend) {
|
|
150
150
|
const a = n.beforeSend(s);
|
|
151
151
|
if (!a)
|
|
152
152
|
return;
|
|
153
153
|
s = a;
|
|
154
154
|
}
|
|
155
|
-
|
|
155
|
+
Ge(s, n.url, e);
|
|
156
156
|
} catch {
|
|
157
157
|
}
|
|
158
158
|
}, w = (n, e) => {
|
|
159
|
-
|
|
160
|
-
const t = e.batching?.itemLimit ??
|
|
161
|
-
if (
|
|
162
|
-
|
|
159
|
+
x.push(n);
|
|
160
|
+
const t = e.batching?.itemLimit ?? je;
|
|
161
|
+
if (x.length >= t) {
|
|
162
|
+
$(e);
|
|
163
163
|
return;
|
|
164
164
|
}
|
|
165
|
-
|
|
166
|
-
},
|
|
167
|
-
if (
|
|
165
|
+
Ye(e);
|
|
166
|
+
}, Je = (n) => {
|
|
167
|
+
if (x = [], X = 0, k && (clearTimeout(k), k = null), typeof document > "u")
|
|
168
168
|
return;
|
|
169
|
-
|
|
170
|
-
const e = () =>
|
|
171
|
-
|
|
169
|
+
_ && document.removeEventListener("visibilitychange", _), B && window.removeEventListener("pagehide", B);
|
|
170
|
+
const e = () => $(n, !0);
|
|
171
|
+
_ = () => {
|
|
172
172
|
document.visibilityState === "hidden" && e();
|
|
173
|
-
}, B = e, document.addEventListener("visibilitychange",
|
|
173
|
+
}, B = e, document.addEventListener("visibilitychange", _), window.addEventListener("pagehide", B);
|
|
174
174
|
}, ne = () => (/* @__PURE__ */ new Date()).toISOString();
|
|
175
175
|
let ie = null, ae = null;
|
|
176
|
-
const
|
|
176
|
+
const Xe = (n) => {
|
|
177
177
|
typeof window > "u" || (ie = (e) => {
|
|
178
178
|
const t = e.error instanceof Error ? e.error : new Error(e.message);
|
|
179
179
|
w({
|
|
@@ -198,89 +198,89 @@ const et = (n) => {
|
|
|
198
198
|
}
|
|
199
199
|
}, n);
|
|
200
200
|
}, window.addEventListener("error", ie), window.addEventListener("unhandledrejection", ae));
|
|
201
|
-
}, re = "odus_telemetry_session_id",
|
|
201
|
+
}, re = "odus_telemetry_session_id", j = () => {
|
|
202
202
|
const n = new Uint8Array(16);
|
|
203
203
|
return crypto.getRandomValues(n), Array.from(n, (e) => e.toString(16).padStart(2, "0")).join("");
|
|
204
|
-
},
|
|
204
|
+
}, Qe = (n) => {
|
|
205
205
|
if (n)
|
|
206
206
|
return n;
|
|
207
207
|
if (typeof sessionStorage > "u")
|
|
208
|
-
return
|
|
208
|
+
return j();
|
|
209
209
|
try {
|
|
210
210
|
const e = sessionStorage.getItem(re);
|
|
211
211
|
if (e)
|
|
212
212
|
return e;
|
|
213
|
-
const t =
|
|
213
|
+
const t = j();
|
|
214
214
|
return sessionStorage.setItem(re, t), t;
|
|
215
215
|
} catch {
|
|
216
|
-
return
|
|
216
|
+
return j();
|
|
217
217
|
}
|
|
218
|
-
},
|
|
218
|
+
}, et = (n) => {
|
|
219
219
|
if (!n.sessionTracking?.enabled)
|
|
220
220
|
return;
|
|
221
|
-
const e =
|
|
222
|
-
|
|
223
|
-
},
|
|
221
|
+
const e = Qe(n.sessionTracking.session?.id);
|
|
222
|
+
He({ id: e });
|
|
223
|
+
}, q = () => (/* @__PURE__ */ new Date()).toISOString(), W = (n, e) => {
|
|
224
224
|
if (typeof PerformanceObserver > "u" || !PerformanceObserver.supportedEntryTypes?.includes(n))
|
|
225
225
|
return;
|
|
226
226
|
new PerformanceObserver((s) => {
|
|
227
227
|
for (const a of s.getEntries())
|
|
228
228
|
e(a);
|
|
229
229
|
}).observe({ type: n, buffered: !0 });
|
|
230
|
-
},
|
|
230
|
+
}, tt = (n) => {
|
|
231
231
|
if (typeof window > "u")
|
|
232
232
|
return;
|
|
233
|
-
|
|
233
|
+
W("largest-contentful-paint", (t) => {
|
|
234
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
|
}, n);
|
|
242
242
|
});
|
|
243
243
|
let e = 0;
|
|
244
|
-
|
|
244
|
+
W("layout-shift", (t) => {
|
|
245
245
|
const s = t;
|
|
246
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
|
}, n));
|
|
254
|
-
}),
|
|
254
|
+
}), W("event", (t) => {
|
|
255
255
|
const s = t;
|
|
256
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
|
}, n);
|
|
264
264
|
});
|
|
265
|
-
},
|
|
265
|
+
}, O = {
|
|
266
266
|
INFO: "info",
|
|
267
267
|
WARN: "warn",
|
|
268
268
|
ERROR: "error"
|
|
269
|
-
},
|
|
270
|
-
|
|
269
|
+
}, R = () => (/* @__PURE__ */ new Date()).toISOString(), st = (n) => {
|
|
270
|
+
Re(n), Je(n);
|
|
271
271
|
const e = n.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 && et(n), e.errors !== !1 && Xe(n), e.webVitals !== !1 && tt(n), {
|
|
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:
|
|
283
|
+
timestamp: R(),
|
|
284
284
|
stacktrace: t.stack ? { frames: Z(t.stack) } : void 0,
|
|
285
285
|
context: s?.context
|
|
286
286
|
}
|
|
@@ -291,7 +291,7 @@ const et = (n) => {
|
|
|
291
291
|
type: "event",
|
|
292
292
|
payload: {
|
|
293
293
|
name: t,
|
|
294
|
-
timestamp:
|
|
294
|
+
timestamp: R(),
|
|
295
295
|
attributes: s
|
|
296
296
|
}
|
|
297
297
|
}, n);
|
|
@@ -302,7 +302,7 @@ const et = (n) => {
|
|
|
302
302
|
payload: {
|
|
303
303
|
type: t.type,
|
|
304
304
|
values: t.values,
|
|
305
|
-
timestamp:
|
|
305
|
+
timestamp: R(),
|
|
306
306
|
context: t.context
|
|
307
307
|
}
|
|
308
308
|
}, n);
|
|
@@ -312,39 +312,39 @@ const et = (n) => {
|
|
|
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: R(),
|
|
317
317
|
context: s?.context
|
|
318
318
|
}
|
|
319
319
|
}, n);
|
|
320
320
|
},
|
|
321
321
|
setUser(t) {
|
|
322
|
-
|
|
322
|
+
Ue(t);
|
|
323
323
|
},
|
|
324
324
|
resetUser() {
|
|
325
|
-
|
|
325
|
+
Oe();
|
|
326
326
|
},
|
|
327
327
|
setView(t) {
|
|
328
|
-
|
|
328
|
+
ze(t);
|
|
329
329
|
},
|
|
330
330
|
flush() {
|
|
331
|
-
|
|
331
|
+
$(n);
|
|
332
332
|
}
|
|
333
333
|
};
|
|
334
|
-
},
|
|
334
|
+
}, nt = (n) => n === "test" ? "https://sandbox-analytics.odus.com/collect" : "https://analytics.odus.com/collect", it = () => {
|
|
335
335
|
if (typeof window > "u")
|
|
336
336
|
return !1;
|
|
337
337
|
const n = window.location.hostname;
|
|
338
338
|
return n === "localhost" || n === "127.0.0.1" || n === "0.0.0.0" || n === "::1" || n === "[::1]" || n.endsWith(".localhost");
|
|
339
339
|
};
|
|
340
|
-
let
|
|
341
|
-
const
|
|
342
|
-
if (
|
|
343
|
-
return
|
|
344
|
-
if (
|
|
340
|
+
let E = null;
|
|
341
|
+
const at = (n) => {
|
|
342
|
+
if (E)
|
|
343
|
+
return E;
|
|
344
|
+
if (it())
|
|
345
345
|
return null;
|
|
346
|
-
const e =
|
|
347
|
-
return
|
|
346
|
+
const e = nt(n.environment);
|
|
347
|
+
return E = st({
|
|
348
348
|
url: e,
|
|
349
349
|
app: {
|
|
350
350
|
name: "odus-checkout",
|
|
@@ -375,13 +375,13 @@ const ot = (n) => {
|
|
|
375
375
|
}
|
|
376
376
|
return t;
|
|
377
377
|
}
|
|
378
|
-
}),
|
|
379
|
-
},
|
|
380
|
-
|
|
378
|
+
}), E;
|
|
379
|
+
}, rt = (n, e) => {
|
|
380
|
+
E && E.pushError(n, { context: e });
|
|
381
381
|
}, M = (n, e) => {
|
|
382
|
-
|
|
382
|
+
E && E.pushEvent(n, e);
|
|
383
383
|
}, oe = (n, e, t, s) => {
|
|
384
|
-
|
|
384
|
+
E && E.pushMeasurement({
|
|
385
385
|
type: n,
|
|
386
386
|
values: { [n]: e },
|
|
387
387
|
context: {
|
|
@@ -389,251 +389,19 @@ const ot = (n) => {
|
|
|
389
389
|
...s
|
|
390
390
|
}
|
|
391
391
|
});
|
|
392
|
-
},
|
|
393
|
-
if (!
|
|
392
|
+
}, Pt = (n, e = "info", t) => {
|
|
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([n], {
|
|
400
400
|
level: s[e],
|
|
401
401
|
context: t
|
|
402
402
|
});
|
|
403
|
-
}, le = {
|
|
404
|
-
test: "tntwpdhfwng",
|
|
405
|
-
live: "TBD"
|
|
406
|
-
}, de = {
|
|
407
|
-
test: "sandbox",
|
|
408
|
-
live: "live"
|
|
409
403
|
};
|
|
410
|
-
|
|
411
|
-
vgsForm = null;
|
|
412
|
-
fields = [];
|
|
413
|
-
readyResolve;
|
|
414
|
-
readyPromise;
|
|
415
|
-
environment;
|
|
416
|
-
constructor() {
|
|
417
|
-
this.readyPromise = new Promise((e) => {
|
|
418
|
-
this.readyResolve = e;
|
|
419
|
-
});
|
|
420
|
-
}
|
|
421
|
-
async init(e) {
|
|
422
|
-
return this.environment = e, await fe({
|
|
423
|
-
vaultId: le[e],
|
|
424
|
-
environment: de[e],
|
|
425
|
-
version: "3.3.0"
|
|
426
|
-
});
|
|
427
|
-
}
|
|
428
|
-
createForm(e, t) {
|
|
429
|
-
if (!this.environment)
|
|
430
|
-
throw new Error("VGS not initialized — call init() first");
|
|
431
|
-
return this.vgsForm = e.create(
|
|
432
|
-
le[this.environment],
|
|
433
|
-
de[this.environment],
|
|
434
|
-
t
|
|
435
|
-
), this.readyResolve?.(), this.vgsForm;
|
|
436
|
-
}
|
|
437
|
-
whenReady() {
|
|
438
|
-
return this.readyPromise;
|
|
439
|
-
}
|
|
440
|
-
mountCardFields(e, t, s, a) {
|
|
441
|
-
if (!this.vgsForm)
|
|
442
|
-
throw new Error("VGS form not initialized");
|
|
443
|
-
if (e.cardNumber) {
|
|
444
|
-
const i = this.vgsForm.cardNumberField(e.cardNumber, {
|
|
445
|
-
placeholder: s.cardNumber,
|
|
446
|
-
autoComplete: "cc-number",
|
|
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
|
-
],
|
|
482
|
-
css: t.cardNumber
|
|
483
|
-
});
|
|
484
|
-
i.on("update", (r) => {
|
|
485
|
-
a && a(L.mapCardType(r.cardType));
|
|
486
|
-
}), this.fields.push(i);
|
|
487
|
-
}
|
|
488
|
-
if (e.cardExpiry) {
|
|
489
|
-
const i = this.vgsForm.cardExpirationDateField(
|
|
490
|
-
e.cardExpiry,
|
|
491
|
-
{
|
|
492
|
-
placeholder: s.cardExpiry,
|
|
493
|
-
autoComplete: "cc-exp",
|
|
494
|
-
validations: ["required", "validCardExpirationDate"],
|
|
495
|
-
serializers: [
|
|
496
|
-
{
|
|
497
|
-
name: "separate",
|
|
498
|
-
options: { monthName: "month", yearName: "year" }
|
|
499
|
-
}
|
|
500
|
-
],
|
|
501
|
-
css: t.cardExpiry
|
|
502
|
-
}
|
|
503
|
-
);
|
|
504
|
-
this.fields.push(i);
|
|
505
|
-
}
|
|
506
|
-
if (e.cardCvv) {
|
|
507
|
-
const i = this.vgsForm.cardCVCField(e.cardCvv, {
|
|
508
|
-
placeholder: s.cardCvv,
|
|
509
|
-
autoComplete: "cc-csc",
|
|
510
|
-
validations: ["required", "validCardSecurityCode"],
|
|
511
|
-
css: t.cardCvv
|
|
512
|
-
});
|
|
513
|
-
this.fields.push(i);
|
|
514
|
-
}
|
|
515
|
-
if (e.cardholderName) {
|
|
516
|
-
const i = this.vgsForm.cardholderNameField(
|
|
517
|
-
e.cardholderName,
|
|
518
|
-
{
|
|
519
|
-
placeholder: s.cardholderName,
|
|
520
|
-
autoComplete: "cc-name",
|
|
521
|
-
validations: ["required"],
|
|
522
|
-
css: t.cardholderName
|
|
523
|
-
}
|
|
524
|
-
);
|
|
525
|
-
this.fields.push(i);
|
|
526
|
-
}
|
|
527
|
-
}
|
|
528
|
-
waitForFieldsReady() {
|
|
529
|
-
return Promise.all(this.fields.map((e) => e.promise));
|
|
530
|
-
}
|
|
531
|
-
createCard(e) {
|
|
532
|
-
if (!this.vgsForm)
|
|
533
|
-
return Promise.reject(new Error("VGS form not initialized"));
|
|
534
|
-
const t = this.vgsForm;
|
|
535
|
-
return new Promise((s, a) => {
|
|
536
|
-
t.createCard(
|
|
537
|
-
{ auth: e },
|
|
538
|
-
(i, r) => {
|
|
539
|
-
if (r?.errors) {
|
|
540
|
-
a(r.errors);
|
|
541
|
-
return;
|
|
542
|
-
}
|
|
543
|
-
const o = r?.data;
|
|
544
|
-
if (!o?.id) {
|
|
545
|
-
a(new Error("Card creation failed: no card ID returned"));
|
|
546
|
-
return;
|
|
547
|
-
}
|
|
548
|
-
if (i === 303) {
|
|
549
|
-
this.patchCard(e, o.id).then(s).catch(a);
|
|
550
|
-
return;
|
|
551
|
-
}
|
|
552
|
-
s(L.extractCardResult(o));
|
|
553
|
-
},
|
|
554
|
-
(i) => {
|
|
555
|
-
a(i);
|
|
556
|
-
}
|
|
557
|
-
);
|
|
558
|
-
});
|
|
559
|
-
}
|
|
560
|
-
patchCard(e, t) {
|
|
561
|
-
if (!this.vgsForm || !this.environment)
|
|
562
|
-
return Promise.reject(new Error("VGS not initialized"));
|
|
563
|
-
const s = this.vgsForm;
|
|
564
|
-
return new Promise((a, i) => {
|
|
565
|
-
s.submit(
|
|
566
|
-
`/cards/${t}`,
|
|
567
|
-
{
|
|
568
|
-
method: "PATCH",
|
|
569
|
-
headers: {
|
|
570
|
-
Authorization: `Bearer ${e}`,
|
|
571
|
-
"Content-Type": "application/vnd.api+json"
|
|
572
|
-
},
|
|
573
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
574
|
-
data: (r) => ({
|
|
575
|
-
data: {
|
|
576
|
-
attributes: {
|
|
577
|
-
cvc: r.cvc,
|
|
578
|
-
exp_month: r["exp-date"].month,
|
|
579
|
-
exp_year: r["exp-date"].year
|
|
580
|
-
}
|
|
581
|
-
}
|
|
582
|
-
})
|
|
583
|
-
},
|
|
584
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
585
|
-
(r, o) => {
|
|
586
|
-
if (r >= 400 || o?.errors) {
|
|
587
|
-
i(o?.errors ?? new Error("Card update failed"));
|
|
588
|
-
return;
|
|
589
|
-
}
|
|
590
|
-
const d = o?.data;
|
|
591
|
-
if (!d?.id) {
|
|
592
|
-
i(new Error("Card update failed: no card ID returned"));
|
|
593
|
-
return;
|
|
594
|
-
}
|
|
595
|
-
const c = L.extractCardResult(d), m = o.included?.find(
|
|
596
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
597
|
-
(S) => S.type === "card_updates"
|
|
598
|
-
);
|
|
599
|
-
m?.attributes?.updated_values?.length && (c.updatedValues = m.attributes.updated_values), a(c);
|
|
600
|
-
},
|
|
601
|
-
(r) => {
|
|
602
|
-
i(r);
|
|
603
|
-
}
|
|
604
|
-
);
|
|
605
|
-
});
|
|
606
|
-
}
|
|
607
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
608
|
-
static extractCardResult(e) {
|
|
609
|
-
const t = e.attributes;
|
|
610
|
-
return {
|
|
611
|
-
cardId: e.id,
|
|
612
|
-
expMonth: String(t?.exp_month ?? ""),
|
|
613
|
-
cvc: String(t?.cvc ?? ""),
|
|
614
|
-
expYear: String(t?.exp_year ?? ""),
|
|
615
|
-
name: String(t?.cardholder?.name ?? "")
|
|
616
|
-
};
|
|
617
|
-
}
|
|
618
|
-
destroy() {
|
|
619
|
-
this.vgsForm = null, this.fields = [];
|
|
620
|
-
}
|
|
621
|
-
static mapCardType(e) {
|
|
622
|
-
return e ? {
|
|
623
|
-
visa: "visa",
|
|
624
|
-
mastercard: "mastercard",
|
|
625
|
-
"american-express": "amex",
|
|
626
|
-
amex: "amex",
|
|
627
|
-
"diners-club": "unknown",
|
|
628
|
-
discover: "discover",
|
|
629
|
-
jcb: "unknown",
|
|
630
|
-
unionpay: "unknown",
|
|
631
|
-
maestro: "unknown",
|
|
632
|
-
elo: "unknown"
|
|
633
|
-
}[e] ?? "unknown" : "unknown";
|
|
634
|
-
}
|
|
635
|
-
}
|
|
636
|
-
function G(n) {
|
|
404
|
+
function Y(n) {
|
|
637
405
|
return {
|
|
638
406
|
name: "Custom Appearance",
|
|
639
407
|
additionalPaymentMethods: n.additionalPaymentMethods || {},
|
|
@@ -735,16 +503,16 @@ function G(n) {
|
|
|
735
503
|
}
|
|
736
504
|
};
|
|
737
505
|
}
|
|
738
|
-
function
|
|
506
|
+
function ot({
|
|
739
507
|
appearance: n
|
|
740
508
|
}) {
|
|
741
|
-
const e =
|
|
509
|
+
const e = he({
|
|
742
510
|
checkoutProfile: void 0,
|
|
743
511
|
isLoading: !0,
|
|
744
512
|
error: null
|
|
745
513
|
});
|
|
746
514
|
if (n) {
|
|
747
|
-
const s =
|
|
515
|
+
const s = Y(n);
|
|
748
516
|
return Promise.resolve().then(() => {
|
|
749
517
|
e.setState({
|
|
750
518
|
checkoutProfile: s,
|
|
@@ -755,7 +523,7 @@ function dt({
|
|
|
755
523
|
getState: e.getState.bind(e),
|
|
756
524
|
subscribe: e.subscribe.bind(e),
|
|
757
525
|
updateProfile: (a) => {
|
|
758
|
-
const i =
|
|
526
|
+
const i = Y(a);
|
|
759
527
|
e.setState({
|
|
760
528
|
checkoutProfile: i,
|
|
761
529
|
isLoading: !1,
|
|
@@ -804,7 +572,7 @@ function dt({
|
|
|
804
572
|
getState: e.getState.bind(e),
|
|
805
573
|
subscribe: e.subscribe.bind(e),
|
|
806
574
|
updateProfile: (s) => {
|
|
807
|
-
const a =
|
|
575
|
+
const a = Y(s);
|
|
808
576
|
e.setState({
|
|
809
577
|
checkoutProfile: a,
|
|
810
578
|
isLoading: !1,
|
|
@@ -815,8 +583,8 @@ function dt({
|
|
|
815
583
|
}
|
|
816
584
|
};
|
|
817
585
|
}
|
|
818
|
-
const
|
|
819
|
-
const n =
|
|
586
|
+
const lt = () => {
|
|
587
|
+
const n = pe(), e = he({
|
|
820
588
|
formData: {
|
|
821
589
|
name: "",
|
|
822
590
|
email: "",
|
|
@@ -833,88 +601,88 @@ const ct = () => {
|
|
|
833
601
|
cardCvv: !1
|
|
834
602
|
},
|
|
835
603
|
isValid: !1
|
|
836
|
-
}), t = (l,
|
|
604
|
+
}), t = (l, m, y, u) => {
|
|
837
605
|
if (l === "cardCvv")
|
|
838
|
-
return n.cardCvv(
|
|
606
|
+
return n.cardCvv(m, y);
|
|
839
607
|
if (l === "phoneNumber" && u)
|
|
840
|
-
return n.phoneNumber(
|
|
841
|
-
const
|
|
842
|
-
return
|
|
608
|
+
return n.phoneNumber(m, u);
|
|
609
|
+
const p = n[l];
|
|
610
|
+
return p?.(m);
|
|
843
611
|
}, s = (l) => {
|
|
844
|
-
const
|
|
612
|
+
const m = {};
|
|
845
613
|
return Object.keys(l).forEach((u) => {
|
|
846
|
-
const
|
|
847
|
-
if (
|
|
614
|
+
const p = l[u];
|
|
615
|
+
if (p === void 0) return;
|
|
848
616
|
let h;
|
|
849
|
-
u === "cardCvv" ? h = t(u,
|
|
617
|
+
u === "cardCvv" ? h = t(u, p, l.cardNumber) : u === "phoneNumber" ? h = t(
|
|
850
618
|
u,
|
|
851
|
-
|
|
619
|
+
p,
|
|
852
620
|
void 0,
|
|
853
621
|
l.phoneCountryCode
|
|
854
|
-
) : h = t(u,
|
|
622
|
+
) : h = t(u, p), h && (m[u] = h);
|
|
855
623
|
}), [
|
|
856
624
|
"billingAddress",
|
|
857
625
|
"shippingAddress"
|
|
858
626
|
].forEach((u) => {
|
|
859
|
-
const
|
|
860
|
-
if (
|
|
627
|
+
const p = l[u];
|
|
628
|
+
if (p && typeof p == "object") {
|
|
861
629
|
const h = {};
|
|
862
|
-
Object.keys(
|
|
630
|
+
Object.keys(p).forEach(
|
|
863
631
|
(b) => {
|
|
864
|
-
const f =
|
|
632
|
+
const f = p[b];
|
|
865
633
|
if (f === void 0) return;
|
|
866
|
-
const
|
|
867
|
-
if (
|
|
868
|
-
const
|
|
634
|
+
const S = n[b];
|
|
635
|
+
if (S) {
|
|
636
|
+
const C = b === "state" ? n.state(f, p.country) : S(
|
|
869
637
|
f
|
|
870
638
|
);
|
|
871
|
-
|
|
639
|
+
C && (h[b] = C);
|
|
872
640
|
}
|
|
873
641
|
}
|
|
874
|
-
), Object.keys(h).length > 0 && (
|
|
642
|
+
), Object.keys(h).length > 0 && (m[u] = h);
|
|
875
643
|
}
|
|
876
|
-
}),
|
|
644
|
+
}), m;
|
|
877
645
|
}, a = (l) => {
|
|
878
|
-
const
|
|
879
|
-
return Object.keys(
|
|
646
|
+
const m = s(l);
|
|
647
|
+
return Object.keys(m).length === 0;
|
|
880
648
|
}, i = "billingAddress.", r = "shippingAddress.", o = (l) => l.startsWith(i) ? {
|
|
881
649
|
parent: "billingAddress",
|
|
882
650
|
field: l.slice(i.length)
|
|
883
651
|
} : l.startsWith(r) ? {
|
|
884
652
|
parent: "shippingAddress",
|
|
885
653
|
field: l.slice(r.length)
|
|
886
|
-
} : null, d = (l,
|
|
887
|
-
const
|
|
654
|
+
} : null, d = (l, m, y, u) => {
|
|
655
|
+
const p = { ...l };
|
|
888
656
|
if (u)
|
|
889
|
-
|
|
890
|
-
...
|
|
657
|
+
p[m] = {
|
|
658
|
+
...p[m],
|
|
891
659
|
[y]: u
|
|
892
660
|
};
|
|
893
661
|
else {
|
|
894
662
|
const h = {
|
|
895
|
-
...
|
|
663
|
+
...p[m]
|
|
896
664
|
};
|
|
897
|
-
delete h[y], Object.keys(h).length === 0 ? delete
|
|
665
|
+
delete h[y], Object.keys(h).length === 0 ? delete p[m] : p[m] = h;
|
|
898
666
|
}
|
|
899
|
-
return
|
|
900
|
-
}, c = (l,
|
|
667
|
+
return p;
|
|
668
|
+
}, c = (l, m) => {
|
|
901
669
|
const y = e.getState();
|
|
902
|
-
let u =
|
|
903
|
-
const
|
|
904
|
-
if (!
|
|
670
|
+
let u = m;
|
|
671
|
+
const p = o(l);
|
|
672
|
+
if (!p && l in K)
|
|
905
673
|
if (l === "cardCvv") {
|
|
906
|
-
const
|
|
907
|
-
u =
|
|
674
|
+
const S = ge(y.formData.cardNumber) === "amex" ? 4 : 3;
|
|
675
|
+
u = K.cardCvv(m, S);
|
|
908
676
|
} else
|
|
909
|
-
u =
|
|
677
|
+
u = K[l](m);
|
|
910
678
|
let h;
|
|
911
|
-
if (
|
|
912
|
-
const { parent: f, field:
|
|
679
|
+
if (p) {
|
|
680
|
+
const { parent: f, field: S } = p;
|
|
913
681
|
h = {
|
|
914
682
|
...y.formData,
|
|
915
683
|
[f]: {
|
|
916
684
|
...y.formData[f] ?? {},
|
|
917
|
-
[
|
|
685
|
+
[S]: u
|
|
918
686
|
}
|
|
919
687
|
};
|
|
920
688
|
} else
|
|
@@ -933,18 +701,18 @@ const ct = () => {
|
|
|
933
701
|
f ? b.phoneNumber = f : delete b.phoneNumber;
|
|
934
702
|
}
|
|
935
703
|
if (y.touched[l])
|
|
936
|
-
if (
|
|
937
|
-
const { parent: f, field:
|
|
704
|
+
if (p) {
|
|
705
|
+
const { parent: f, field: S } = p, C = h[f];
|
|
938
706
|
let N;
|
|
939
|
-
if (
|
|
940
|
-
N = n.state(u,
|
|
707
|
+
if (S === "state")
|
|
708
|
+
N = n.state(u, C?.country);
|
|
941
709
|
else {
|
|
942
|
-
const
|
|
943
|
-
N =
|
|
710
|
+
const D = n[S];
|
|
711
|
+
N = D ? D(
|
|
944
712
|
u
|
|
945
713
|
) : void 0;
|
|
946
714
|
}
|
|
947
|
-
b = d(b, f,
|
|
715
|
+
b = d(b, f, S, N);
|
|
948
716
|
} else {
|
|
949
717
|
let f;
|
|
950
718
|
l === "cardCvv" ? f = t(l, u, h.cardNumber) : l === "phoneNumber" ? f = t(
|
|
@@ -959,53 +727,53 @@ const ct = () => {
|
|
|
959
727
|
errors: b,
|
|
960
728
|
isValid: a(h)
|
|
961
729
|
});
|
|
962
|
-
},
|
|
730
|
+
}, g = (l, m) => {
|
|
963
731
|
const y = e.getState(), u = o(l);
|
|
964
732
|
if (u) {
|
|
965
|
-
const { parent: f, field:
|
|
733
|
+
const { parent: f, field: S } = u, C = {
|
|
966
734
|
...y.formData,
|
|
967
735
|
[f]: {
|
|
968
736
|
...y.formData[f] ?? {},
|
|
969
|
-
[
|
|
737
|
+
[S]: m
|
|
970
738
|
}
|
|
971
739
|
};
|
|
972
740
|
let N;
|
|
973
|
-
if (
|
|
974
|
-
const
|
|
975
|
-
N = n.state(
|
|
741
|
+
if (S === "state") {
|
|
742
|
+
const L = C[f];
|
|
743
|
+
N = n.state(m, L?.country);
|
|
976
744
|
} else {
|
|
977
|
-
const
|
|
978
|
-
N =
|
|
745
|
+
const L = n[S];
|
|
746
|
+
N = L ? L(m) : void 0;
|
|
979
747
|
}
|
|
980
|
-
const
|
|
748
|
+
const D = d(y.errors, f, S, N);
|
|
981
749
|
e.setState({
|
|
982
|
-
formData:
|
|
750
|
+
formData: C,
|
|
983
751
|
touched: {
|
|
984
752
|
...y.touched,
|
|
985
753
|
[l]: !0
|
|
986
754
|
},
|
|
987
|
-
errors:
|
|
988
|
-
isValid: a(
|
|
755
|
+
errors: D,
|
|
756
|
+
isValid: a(C)
|
|
989
757
|
});
|
|
990
758
|
return;
|
|
991
759
|
}
|
|
992
|
-
const
|
|
760
|
+
const p = {
|
|
993
761
|
...y.touched,
|
|
994
762
|
[l]: !0
|
|
995
763
|
};
|
|
996
764
|
let h;
|
|
997
|
-
l === "cardCvv" ? h = t(l,
|
|
765
|
+
l === "cardCvv" ? h = t(l, m, y.formData.cardNumber) : l === "phoneNumber" ? h = t(
|
|
998
766
|
l,
|
|
999
|
-
|
|
767
|
+
m,
|
|
1000
768
|
void 0,
|
|
1001
769
|
y.formData.phoneCountryCode
|
|
1002
|
-
) : h = t(l,
|
|
770
|
+
) : h = t(l, m);
|
|
1003
771
|
const b = { ...y.errors };
|
|
1004
772
|
h ? b[l] = h : delete b[l], e.setState({
|
|
1005
|
-
touched:
|
|
773
|
+
touched: p,
|
|
1006
774
|
errors: b
|
|
1007
775
|
});
|
|
1008
|
-
},
|
|
776
|
+
}, v = (l) => {
|
|
1009
777
|
const y = {
|
|
1010
778
|
...e.getState().formData,
|
|
1011
779
|
...l
|
|
@@ -1019,37 +787,23 @@ const ct = () => {
|
|
|
1019
787
|
getFormState: e.getState.bind(e),
|
|
1020
788
|
subscribe: e.subscribe.bind(e),
|
|
1021
789
|
handleChange: c,
|
|
1022
|
-
handleBlur:
|
|
1023
|
-
setFormData:
|
|
790
|
+
handleBlur: g,
|
|
791
|
+
setFormData: v,
|
|
1024
792
|
reset: e.resetState.bind(e)
|
|
1025
793
|
};
|
|
1026
|
-
}
|
|
1027
|
-
|
|
1028
|
-
if (!n) return null;
|
|
1029
|
-
const e = n.trim().replace(/\s+/g, "+"), t = `${ht}?family=${e}:wght@400;700&display=swap`;
|
|
1030
|
-
try {
|
|
1031
|
-
const s = await fetch(t);
|
|
1032
|
-
if (!s.ok) return null;
|
|
1033
|
-
const a = await s.text(), i = mt.exec(a);
|
|
1034
|
-
if (i?.[1]) return i[1];
|
|
1035
|
-
const r = ut.exec(a);
|
|
1036
|
-
return r?.[1] ? r[1] : null;
|
|
1037
|
-
} catch {
|
|
1038
|
-
return null;
|
|
1039
|
-
}
|
|
1040
|
-
}
|
|
1041
|
-
function gt(n) {
|
|
794
|
+
};
|
|
795
|
+
function dt(n) {
|
|
1042
796
|
if (!n) return !1;
|
|
1043
797
|
const { billingFields: e, shippingFields: t } = n, s = e && Object.values(e).some((i) => i?.enabled), a = t && Object.values(t).some((i) => i?.enabled);
|
|
1044
798
|
return !!(s || a);
|
|
1045
799
|
}
|
|
1046
|
-
function
|
|
800
|
+
function G(n) {
|
|
1047
801
|
if (!n) return !1;
|
|
1048
802
|
const { billingFields: e, shippingFields: t } = n, s = e?.firstName?.enabled && e?.lastName?.enabled, a = t?.firstName?.enabled && t?.lastName?.enabled;
|
|
1049
803
|
return !!(s || a);
|
|
1050
804
|
}
|
|
1051
|
-
const
|
|
1052
|
-
class
|
|
805
|
+
const U = /* @__PURE__ */ new Set(["US", "CA"]);
|
|
806
|
+
class le extends A {
|
|
1053
807
|
inputs = /* @__PURE__ */ new Map();
|
|
1054
808
|
type;
|
|
1055
809
|
onChange;
|
|
@@ -1094,11 +848,11 @@ class ce extends A {
|
|
|
1094
848
|
t.street?.enabled && d.push({ kind: "street" });
|
|
1095
849
|
const c = [];
|
|
1096
850
|
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" });
|
|
1097
|
-
const
|
|
1098
|
-
t.city?.enabled &&
|
|
1099
|
-
const
|
|
1100
|
-
d.forEach((l,
|
|
1101
|
-
const y =
|
|
851
|
+
const g = [];
|
|
852
|
+
t.city?.enabled && g.push("city"), t.zipCode?.enabled && g.push("zipCode"), g.length > 0 && d.push({ kind: "cityZip", fields: g }), t.state?.enabled && d.push({ kind: "state" });
|
|
853
|
+
const v = d.length;
|
|
854
|
+
d.forEach((l, m) => {
|
|
855
|
+
const y = m === 0, u = m === v - 1, p = (h, b) => ({
|
|
1102
856
|
...o,
|
|
1103
857
|
borderRadius: this.borderRadius(
|
|
1104
858
|
r,
|
|
@@ -1115,7 +869,7 @@ class ce extends A {
|
|
|
1115
869
|
s.street,
|
|
1116
870
|
a.street,
|
|
1117
871
|
i.street,
|
|
1118
|
-
|
|
872
|
+
p(!0, !0),
|
|
1119
873
|
"street-address",
|
|
1120
874
|
t.street?.maxLength
|
|
1121
875
|
);
|
|
@@ -1125,28 +879,28 @@ class ce extends A {
|
|
|
1125
879
|
if (l.kind === "name") {
|
|
1126
880
|
const h = this.createRow(l.fields.map(() => "half")), b = l.fields.length === 1;
|
|
1127
881
|
if (l.fields.includes("firstName")) {
|
|
1128
|
-
const f = b || l.fields[l.fields.length - 1] === "firstName",
|
|
882
|
+
const f = b || l.fields[l.fields.length - 1] === "firstName", S = this.createInput(
|
|
1129
883
|
"firstName",
|
|
1130
884
|
t.firstName?.label ?? this.translationFunc("address.firstName"),
|
|
1131
885
|
s.firstName,
|
|
1132
886
|
a.firstName,
|
|
1133
887
|
i.firstName,
|
|
1134
|
-
|
|
888
|
+
p(!0, f),
|
|
1135
889
|
"given-name"
|
|
1136
890
|
);
|
|
1137
|
-
this.inputs.set("firstName",
|
|
891
|
+
this.inputs.set("firstName", S), h.appendChild(S.getElement());
|
|
1138
892
|
}
|
|
1139
893
|
if (l.fields.includes("lastName")) {
|
|
1140
|
-
const f = b || l.fields[0] === "lastName",
|
|
894
|
+
const f = b || l.fields[0] === "lastName", S = this.createInput(
|
|
1141
895
|
"lastName",
|
|
1142
896
|
t.lastName?.label ?? this.translationFunc("address.lastName"),
|
|
1143
897
|
s.lastName,
|
|
1144
898
|
a.lastName,
|
|
1145
899
|
i.lastName,
|
|
1146
|
-
|
|
900
|
+
p(f, !0),
|
|
1147
901
|
"family-name"
|
|
1148
902
|
);
|
|
1149
|
-
this.inputs.set("lastName",
|
|
903
|
+
this.inputs.set("lastName", S), h.appendChild(S.getElement());
|
|
1150
904
|
}
|
|
1151
905
|
this.fieldsContainer.appendChild(h);
|
|
1152
906
|
return;
|
|
@@ -1156,7 +910,7 @@ class ce extends A {
|
|
|
1156
910
|
s.country,
|
|
1157
911
|
a.country,
|
|
1158
912
|
i.country,
|
|
1159
|
-
|
|
913
|
+
p(!0, !0),
|
|
1160
914
|
t.country?.options,
|
|
1161
915
|
t.country?.label
|
|
1162
916
|
);
|
|
@@ -1166,38 +920,38 @@ class ce extends A {
|
|
|
1166
920
|
if (l.kind === "cityZip") {
|
|
1167
921
|
const h = this.createRow(l.fields.map(() => "half")), b = l.fields.length === 1;
|
|
1168
922
|
if (l.fields.includes("city")) {
|
|
1169
|
-
const f = b || l.fields[l.fields.length - 1] === "city",
|
|
923
|
+
const f = b || l.fields[l.fields.length - 1] === "city", S = this.createInput(
|
|
1170
924
|
"city",
|
|
1171
925
|
t.city?.label ?? this.translationFunc("address.townCity"),
|
|
1172
926
|
s.city,
|
|
1173
927
|
a.city,
|
|
1174
928
|
i.city,
|
|
1175
|
-
|
|
929
|
+
p(!0, f),
|
|
1176
930
|
"address-level2"
|
|
1177
931
|
);
|
|
1178
|
-
this.inputs.set("city",
|
|
932
|
+
this.inputs.set("city", S), h.appendChild(S.getElement());
|
|
1179
933
|
}
|
|
1180
934
|
if (l.fields.includes("zipCode")) {
|
|
1181
|
-
const f = b || l.fields[0] === "zipCode",
|
|
935
|
+
const f = b || l.fields[0] === "zipCode", S = this.createInput(
|
|
1182
936
|
"zipCode",
|
|
1183
937
|
t.zipCode?.label ?? this.translationFunc("address.postalCode"),
|
|
1184
938
|
s.zipCode,
|
|
1185
939
|
a.zipCode,
|
|
1186
940
|
i.zipCode,
|
|
1187
|
-
|
|
941
|
+
p(f, !0),
|
|
1188
942
|
"postal-code"
|
|
1189
943
|
);
|
|
1190
|
-
this.inputs.set("zipCode",
|
|
944
|
+
this.inputs.set("zipCode", S), h.appendChild(S.getElement());
|
|
1191
945
|
}
|
|
1192
946
|
this.fieldsContainer.appendChild(h);
|
|
1193
947
|
return;
|
|
1194
948
|
}
|
|
1195
949
|
if (l.kind === "state") {
|
|
1196
950
|
const h = this.createRow(["full"]);
|
|
1197
|
-
if (this.stateFieldConfig = t.state, this.stateRow = h, this.stateStyles =
|
|
951
|
+
if (this.stateFieldConfig = t.state, this.stateRow = h, this.stateStyles = p(!0, !0), this.currentCountry = s.country, t.state?.hiddenForCountries?.includes(
|
|
1198
952
|
s.country
|
|
1199
|
-
) && (h.style.display = "none"),
|
|
1200
|
-
const
|
|
953
|
+
) && (h.style.display = "none"), U.has(s.country)) {
|
|
954
|
+
const S = this.createStateSelect(
|
|
1201
955
|
s.state,
|
|
1202
956
|
a.state,
|
|
1203
957
|
i.state,
|
|
@@ -1205,9 +959,9 @@ class ce extends A {
|
|
|
1205
959
|
s.country,
|
|
1206
960
|
t.state?.label
|
|
1207
961
|
);
|
|
1208
|
-
this.inputs.set("state",
|
|
962
|
+
this.inputs.set("state", S), h.appendChild(S.getElement());
|
|
1209
963
|
} else {
|
|
1210
|
-
const
|
|
964
|
+
const S = this.createInput(
|
|
1211
965
|
"state",
|
|
1212
966
|
t.state?.label ?? this.translationFunc("address.state"),
|
|
1213
967
|
s.state,
|
|
@@ -1216,7 +970,7 @@ class ce extends A {
|
|
|
1216
970
|
this.stateStyles,
|
|
1217
971
|
"address-level1"
|
|
1218
972
|
);
|
|
1219
|
-
this.inputs.set("state",
|
|
973
|
+
this.inputs.set("state", S), h.appendChild(S.getElement());
|
|
1220
974
|
}
|
|
1221
975
|
this.fieldsContainer.appendChild(h);
|
|
1222
976
|
}
|
|
@@ -1227,7 +981,7 @@ class ce extends A {
|
|
|
1227
981
|
return t.className = `address-row address-row-${e.length === 1 ? "single" : "double"}`, t;
|
|
1228
982
|
}
|
|
1229
983
|
createInput(e, t, s, a, i, r, o, d) {
|
|
1230
|
-
const c = `${this.type}Address.${e}`,
|
|
984
|
+
const c = `${this.type}Address.${e}`, g = new ue({
|
|
1231
985
|
name: c,
|
|
1232
986
|
error: !1,
|
|
1233
987
|
errorMsg: void 0,
|
|
@@ -1236,19 +990,19 @@ class ce extends A {
|
|
|
1236
990
|
...this.grouped ? { placeholder: t } : {
|
|
1237
991
|
label: t,
|
|
1238
992
|
placeholder: (() => {
|
|
1239
|
-
const
|
|
1240
|
-
return l !==
|
|
993
|
+
const v = `address.placeholder.${e}`, l = this.translationFunc(v);
|
|
994
|
+
return l !== v ? l : t;
|
|
1241
995
|
})()
|
|
1242
996
|
},
|
|
1243
997
|
value: s,
|
|
1244
998
|
autocomplete: o,
|
|
1245
|
-
onChange: (
|
|
1246
|
-
const l =
|
|
999
|
+
onChange: (v) => {
|
|
1000
|
+
const l = v.target.value;
|
|
1247
1001
|
if (d && l.length >= d) {
|
|
1248
|
-
const
|
|
1249
|
-
|
|
1002
|
+
const m = this.translationFunc("validation.maxLengthExceeded");
|
|
1003
|
+
g.setError(!0, m.replace("{{max}}", String(d)));
|
|
1250
1004
|
} else
|
|
1251
|
-
|
|
1005
|
+
g.setError(!1);
|
|
1252
1006
|
this.onChange(
|
|
1253
1007
|
P({
|
|
1254
1008
|
type: "input",
|
|
@@ -1260,20 +1014,20 @@ class ce extends A {
|
|
|
1260
1014
|
);
|
|
1261
1015
|
}
|
|
1262
1016
|
});
|
|
1263
|
-
return
|
|
1017
|
+
return g.addEventListener("blur", (v) => {
|
|
1264
1018
|
this.onBlur(
|
|
1265
1019
|
P({
|
|
1266
1020
|
type: "blur",
|
|
1267
1021
|
target: {
|
|
1268
1022
|
name: c,
|
|
1269
|
-
value:
|
|
1023
|
+
value: v.target.value
|
|
1270
1024
|
}
|
|
1271
1025
|
})
|
|
1272
1026
|
);
|
|
1273
|
-
}),
|
|
1027
|
+
}), g;
|
|
1274
1028
|
}
|
|
1275
1029
|
createCountrySelect(e, t, s, a, i, r) {
|
|
1276
|
-
const o = `${this.type}Address.country`, d =
|
|
1030
|
+
const o = `${this.type}Address.country`, d = fe(i, this.locale), c = new V({
|
|
1277
1031
|
name: o,
|
|
1278
1032
|
error: !1,
|
|
1279
1033
|
errorMsg: void 0,
|
|
@@ -1285,24 +1039,24 @@ class ce extends A {
|
|
|
1285
1039
|
value: e,
|
|
1286
1040
|
options: d,
|
|
1287
1041
|
autocomplete: "country",
|
|
1288
|
-
onChange: (
|
|
1042
|
+
onChange: (g) => {
|
|
1289
1043
|
c.setError(!1);
|
|
1290
|
-
const
|
|
1044
|
+
const v = g.target.value;
|
|
1291
1045
|
this.onChange(
|
|
1292
1046
|
P({
|
|
1293
1047
|
type: "change",
|
|
1294
|
-
target: { name: o, value:
|
|
1048
|
+
target: { name: o, value: v }
|
|
1295
1049
|
})
|
|
1296
|
-
), this.handleCountryChange(
|
|
1050
|
+
), this.handleCountryChange(v);
|
|
1297
1051
|
}
|
|
1298
1052
|
});
|
|
1299
|
-
return c.addEventListener("blur", (
|
|
1053
|
+
return c.addEventListener("blur", (g) => {
|
|
1300
1054
|
this.onBlur(
|
|
1301
1055
|
P({
|
|
1302
1056
|
type: "blur",
|
|
1303
1057
|
target: {
|
|
1304
1058
|
name: o,
|
|
1305
|
-
value:
|
|
1059
|
+
value: g.target.value
|
|
1306
1060
|
}
|
|
1307
1061
|
})
|
|
1308
1062
|
);
|
|
@@ -1317,12 +1071,12 @@ class ce extends A {
|
|
|
1317
1071
|
return;
|
|
1318
1072
|
}
|
|
1319
1073
|
if (!a && s && (this.stateRow.style.display = ""), a) return;
|
|
1320
|
-
const i = this.inputs.get("state") instanceof
|
|
1074
|
+
const i = this.inputs.get("state") instanceof V, r = U.has(e);
|
|
1321
1075
|
if (i && r) {
|
|
1322
1076
|
const o = this.inputs.get("state");
|
|
1323
|
-
if (o instanceof
|
|
1324
|
-
const d = e === "CA" ? "CA" : "US", c =
|
|
1325
|
-
o.setOptions(c,
|
|
1077
|
+
if (o instanceof V) {
|
|
1078
|
+
const d = e === "CA" ? "CA" : "US", c = Q(d), g = d === "CA" ? this.translationFunc("address.chooseProvince") : this.translationFunc("address.chooseState");
|
|
1079
|
+
o.setOptions(c, g);
|
|
1326
1080
|
}
|
|
1327
1081
|
this.clearStateValue();
|
|
1328
1082
|
return;
|
|
@@ -1336,7 +1090,7 @@ class ce extends A {
|
|
|
1336
1090
|
rebuildStateField(e) {
|
|
1337
1091
|
if (!this.stateRow || !this.stateStyles) return;
|
|
1338
1092
|
const t = this.inputs.get("state");
|
|
1339
|
-
if (t && (t.getElement().remove(), this.inputs.delete("state")),
|
|
1093
|
+
if (t && (t.getElement().remove(), this.inputs.delete("state")), U.has(e)) {
|
|
1340
1094
|
const a = this.createStateSelect(
|
|
1341
1095
|
"",
|
|
1342
1096
|
void 0,
|
|
@@ -1372,18 +1126,18 @@ class ce extends A {
|
|
|
1372
1126
|
);
|
|
1373
1127
|
}
|
|
1374
1128
|
createStateSelect(e, t, s, a, i, r) {
|
|
1375
|
-
const o = `${this.type}Address.state`, d = i === "CA" ? "CA" : "US", c =
|
|
1129
|
+
const o = `${this.type}Address.state`, d = i === "CA" ? "CA" : "US", c = Q(d), g = d === "CA" ? this.translationFunc("address.chooseProvince") : this.translationFunc("address.chooseState"), v = new V({
|
|
1376
1130
|
name: o,
|
|
1377
1131
|
error: !1,
|
|
1378
1132
|
errorMsg: void 0,
|
|
1379
1133
|
styles: a,
|
|
1380
|
-
placeholder:
|
|
1381
|
-
...!this.grouped && { label: r ??
|
|
1134
|
+
placeholder: g,
|
|
1135
|
+
...!this.grouped && { label: r ?? g },
|
|
1382
1136
|
value: e,
|
|
1383
1137
|
options: c,
|
|
1384
1138
|
autocomplete: "address-level1",
|
|
1385
1139
|
onChange: (l) => {
|
|
1386
|
-
|
|
1140
|
+
v.setError(!1), this.onChange(
|
|
1387
1141
|
P({
|
|
1388
1142
|
type: "change",
|
|
1389
1143
|
target: {
|
|
@@ -1394,7 +1148,7 @@ class ce extends A {
|
|
|
1394
1148
|
);
|
|
1395
1149
|
}
|
|
1396
1150
|
});
|
|
1397
|
-
return
|
|
1151
|
+
return v.addEventListener("blur", (l) => {
|
|
1398
1152
|
this.onBlur(
|
|
1399
1153
|
P({
|
|
1400
1154
|
type: "blur",
|
|
@@ -1404,7 +1158,7 @@ class ce extends A {
|
|
|
1404
1158
|
}
|
|
1405
1159
|
})
|
|
1406
1160
|
);
|
|
1407
|
-
}),
|
|
1161
|
+
}), v;
|
|
1408
1162
|
}
|
|
1409
1163
|
createUngroupedFields(e, t, s, a, i) {
|
|
1410
1164
|
const r = e.styles.borderRadius, o = {
|
|
@@ -1412,16 +1166,16 @@ class ce extends A {
|
|
|
1412
1166
|
fontSize: e.styles.fontSize,
|
|
1413
1167
|
fontFamily: e.styles.fontFamily,
|
|
1414
1168
|
borderRadius: `${r}px`
|
|
1415
|
-
}, d = (c,
|
|
1169
|
+
}, d = (c, g, v, l) => {
|
|
1416
1170
|
if (!t[c]?.enabled) return;
|
|
1417
|
-
const
|
|
1171
|
+
const m = t[c]?.label ?? this.translationFunc(g), y = this.createRow(["full"]), u = this.createInput(
|
|
1418
1172
|
c,
|
|
1419
|
-
|
|
1173
|
+
m,
|
|
1420
1174
|
s[c],
|
|
1421
1175
|
a[c],
|
|
1422
1176
|
i[c],
|
|
1423
1177
|
o,
|
|
1424
|
-
|
|
1178
|
+
v,
|
|
1425
1179
|
l
|
|
1426
1180
|
);
|
|
1427
1181
|
this.inputs.set(c, u), y.appendChild(u.getElement()), this.fieldsContainer.appendChild(y);
|
|
@@ -1432,7 +1186,7 @@ class ce extends A {
|
|
|
1432
1186
|
"street-address",
|
|
1433
1187
|
t.street?.maxLength
|
|
1434
1188
|
), d("city", "address.townCity", "address-level2"), t.country?.enabled) {
|
|
1435
|
-
const c = t.country?.label ?? this.translationFunc("address.chooseCountry"),
|
|
1189
|
+
const c = t.country?.label ?? this.translationFunc("address.chooseCountry"), g = this.createRow(["full"]), v = this.createCountrySelect(
|
|
1436
1190
|
s.country,
|
|
1437
1191
|
a.country,
|
|
1438
1192
|
i.country,
|
|
@@ -1440,7 +1194,7 @@ class ce extends A {
|
|
|
1440
1194
|
t.country?.options,
|
|
1441
1195
|
c
|
|
1442
1196
|
);
|
|
1443
|
-
this.inputs.set("country",
|
|
1197
|
+
this.inputs.set("country", v), g.appendChild(v.getElement()), this.fieldsContainer.appendChild(g);
|
|
1444
1198
|
}
|
|
1445
1199
|
if (t.state?.enabled) {
|
|
1446
1200
|
this.stateFieldConfig = t.state;
|
|
@@ -1448,9 +1202,9 @@ class ce extends A {
|
|
|
1448
1202
|
this.stateRow = c, this.stateStyles = o, this.currentCountry = s.country, t.state?.hiddenForCountries?.includes(
|
|
1449
1203
|
s.country
|
|
1450
1204
|
) && (c.style.display = "none");
|
|
1451
|
-
const
|
|
1452
|
-
if (
|
|
1453
|
-
const
|
|
1205
|
+
const v = U.has(s.country), l = t.state?.label ?? this.translationFunc("address.state");
|
|
1206
|
+
if (v) {
|
|
1207
|
+
const m = this.createStateSelect(
|
|
1454
1208
|
s.state,
|
|
1455
1209
|
a.state,
|
|
1456
1210
|
i.state,
|
|
@@ -1458,9 +1212,9 @@ class ce extends A {
|
|
|
1458
1212
|
s.country,
|
|
1459
1213
|
l
|
|
1460
1214
|
);
|
|
1461
|
-
this.inputs.set("state",
|
|
1215
|
+
this.inputs.set("state", m), c.appendChild(m.getElement());
|
|
1462
1216
|
} else {
|
|
1463
|
-
const
|
|
1217
|
+
const m = this.createInput(
|
|
1464
1218
|
"state",
|
|
1465
1219
|
l,
|
|
1466
1220
|
s.state,
|
|
@@ -1469,7 +1223,7 @@ class ce extends A {
|
|
|
1469
1223
|
o,
|
|
1470
1224
|
"address-level1"
|
|
1471
1225
|
);
|
|
1472
|
-
this.inputs.set("state",
|
|
1226
|
+
this.inputs.set("state", m), c.appendChild(m.getElement());
|
|
1473
1227
|
}
|
|
1474
1228
|
this.fieldsContainer.appendChild(c);
|
|
1475
1229
|
}
|
|
@@ -1509,8 +1263,8 @@ class ce extends A {
|
|
|
1509
1263
|
if (!i) return;
|
|
1510
1264
|
const r = i.getElement().querySelector("input") || i.getElement().querySelector("select"), o = i.getValue();
|
|
1511
1265
|
!(document.activeElement === r) && !(t === "" && o !== "") && this.setValue(e, t);
|
|
1512
|
-
const
|
|
1513
|
-
this.setError(e,
|
|
1266
|
+
const g = !!(a && s);
|
|
1267
|
+
this.setError(e, g, s);
|
|
1514
1268
|
}
|
|
1515
1269
|
updateAllFields(e, t, s) {
|
|
1516
1270
|
Object.keys(e).forEach((a) => {
|
|
@@ -1527,7 +1281,7 @@ class ce extends A {
|
|
|
1527
1281
|
e && e.focus();
|
|
1528
1282
|
}
|
|
1529
1283
|
}
|
|
1530
|
-
class
|
|
1284
|
+
class ct {
|
|
1531
1285
|
input = null;
|
|
1532
1286
|
isVgsMode;
|
|
1533
1287
|
vgsWrapper = null;
|
|
@@ -1562,10 +1316,10 @@ class ft {
|
|
|
1562
1316
|
const i = document.createElement("label");
|
|
1563
1317
|
i.className = "input-label", i.textContent = t("cardholderNameLabel"), i.style.fontFamily = `"${e.styles.fontFamily}", sans-serif`, i.style.fontSize = `${e.styles.fontSize}px`, a.appendChild(i), 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";
|
|
1564
1318
|
const r = document.createElement("div");
|
|
1565
|
-
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
|
|
1319
|
+
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 ye({ visible: !1 }), this.wrapperElement.appendChild(this.vgsHelperText.getElement());
|
|
1566
1320
|
}
|
|
1567
1321
|
buildNativeLayout(e, t, s, a, i, r, o) {
|
|
1568
|
-
this.input = new
|
|
1322
|
+
this.input = new ue({
|
|
1569
1323
|
name: "name",
|
|
1570
1324
|
label: r("cardholderNameLabel"),
|
|
1571
1325
|
error: !1,
|
|
@@ -1580,8 +1334,8 @@ class ft {
|
|
|
1580
1334
|
value: e,
|
|
1581
1335
|
autocomplete: o,
|
|
1582
1336
|
onChange: (d) => {
|
|
1583
|
-
const
|
|
1584
|
-
|
|
1337
|
+
const g = d.target.value, v = g.replace(/[^a-zA-Z\s\-'.]/g, "");
|
|
1338
|
+
g !== v && this.input?.setValue(v), this.input?.setError(!1), this.trim(), t(d);
|
|
1585
1339
|
}
|
|
1586
1340
|
}), this.input.addEventListener("blur", (d) => {
|
|
1587
1341
|
s(d);
|
|
@@ -1592,9 +1346,9 @@ class ft {
|
|
|
1592
1346
|
}
|
|
1593
1347
|
handleVgsStateChange(e, t) {
|
|
1594
1348
|
if (!this.isVgsMode || !this.vgsWrapper) return;
|
|
1595
|
-
const s = e[
|
|
1349
|
+
const s = e[ee.CARDHOLDER]?.isFocused;
|
|
1596
1350
|
if (this._vgsFieldsReady && (this.vgsWrapper.style.boxShadow = s ? "0 0 0 1px rgba(50, 151, 211, 0.7), 0 1px 1px 0 rgba(0, 0, 0, 0.07), 0 0 0 4px rgba(50, 151, 211, 0.3)" : "0 0 0 1px #e0e0e0, 0 2px 4px 0 rgba(0,0,0,0.07), 0 1px 1.5px 0 rgba(0,0,0,0.05)"), !t || !this.vgsHelperText) return;
|
|
1597
|
-
const a = t[
|
|
1351
|
+
const a = t[ee.CARDHOLDER];
|
|
1598
1352
|
a ? (this.vgsHelperText.setText(a), this.vgsHelperText.toggleVisibility(!0)) : this.vgsHelperText.toggleVisibility(!1);
|
|
1599
1353
|
}
|
|
1600
1354
|
hideFakePlaceholder() {
|
|
@@ -1629,7 +1383,7 @@ class ft {
|
|
|
1629
1383
|
this.isVgsMode || this.input?.focus();
|
|
1630
1384
|
}
|
|
1631
1385
|
}
|
|
1632
|
-
class
|
|
1386
|
+
class me extends A {
|
|
1633
1387
|
constructor() {
|
|
1634
1388
|
super("div", ["skeleton-container"]), this.createSkeletonElements();
|
|
1635
1389
|
}
|
|
@@ -1637,23 +1391,23 @@ class ge extends A {
|
|
|
1637
1391
|
this.appendChild(this.createPaymentMethodSkeleton()), this.appendChild(this.createPaymentSeparatorSkeleton());
|
|
1638
1392
|
}
|
|
1639
1393
|
createPaymentMethodSkeleton() {
|
|
1640
|
-
const e =
|
|
1394
|
+
const e = I.createDiv(["skeleton-field"]), t = I.createDiv([
|
|
1641
1395
|
"skeleton",
|
|
1642
1396
|
"skeleton-payment-method"
|
|
1643
1397
|
]);
|
|
1644
1398
|
return e.appendChild(t), e;
|
|
1645
1399
|
}
|
|
1646
1400
|
createPaymentSeparatorSkeleton() {
|
|
1647
|
-
const e =
|
|
1401
|
+
const e = I.createDiv([
|
|
1648
1402
|
"payment-separator_container"
|
|
1649
|
-
]), t =
|
|
1403
|
+
]), t = I.createDiv(["payment-separator__line"]), s = I.createDiv([
|
|
1650
1404
|
"skeleton",
|
|
1651
1405
|
"skeleton-separator-text"
|
|
1652
|
-
]), a =
|
|
1406
|
+
]), a = I.createDiv(["payment-separator__line"]);
|
|
1653
1407
|
return e.appendChild(t), e.appendChild(s), e.appendChild(a), e;
|
|
1654
1408
|
}
|
|
1655
1409
|
}
|
|
1656
|
-
class
|
|
1410
|
+
class ht extends A {
|
|
1657
1411
|
constructor(e) {
|
|
1658
1412
|
const { translationFunc: t, checkoutProfile: s } = e;
|
|
1659
1413
|
super("div", ["payment-separator"]);
|
|
@@ -1665,7 +1419,7 @@ class yt extends A {
|
|
|
1665
1419
|
o.className = "payment-separator__line", a.appendChild(i), a.appendChild(r), a.appendChild(o);
|
|
1666
1420
|
}
|
|
1667
1421
|
}
|
|
1668
|
-
class
|
|
1422
|
+
class ut extends A {
|
|
1669
1423
|
paymentMethods;
|
|
1670
1424
|
paymentSeparator;
|
|
1671
1425
|
skeleton;
|
|
@@ -1679,8 +1433,8 @@ class bt extends A {
|
|
|
1679
1433
|
translationFunc: o,
|
|
1680
1434
|
paymentId: d,
|
|
1681
1435
|
checkoutKey: c,
|
|
1682
|
-
checkoutDetails:
|
|
1683
|
-
environment:
|
|
1436
|
+
checkoutDetails: g,
|
|
1437
|
+
environment: v,
|
|
1684
1438
|
countryCode: l
|
|
1685
1439
|
} = e;
|
|
1686
1440
|
if (super("div", ["payment-methods"]), this.paymentMethods = /* @__PURE__ */ new Map(), !t?.additionalPaymentMethods) {
|
|
@@ -1691,21 +1445,21 @@ class bt extends A {
|
|
|
1691
1445
|
this.renderSkeleton();
|
|
1692
1446
|
return;
|
|
1693
1447
|
}
|
|
1694
|
-
const
|
|
1448
|
+
const m = Object.entries(
|
|
1695
1449
|
t.additionalPaymentMethods
|
|
1696
1450
|
).filter(([y, u]) => {
|
|
1697
|
-
const
|
|
1698
|
-
return
|
|
1451
|
+
const p = u.enabled, h = r ? r[y] === !0 : !0, b = !u.countries || l && u.countries.includes(l);
|
|
1452
|
+
return p && h && b;
|
|
1699
1453
|
}).sort((y, u) => y[1].order - u[1].order);
|
|
1700
|
-
if (
|
|
1454
|
+
if (m.length === 0) {
|
|
1701
1455
|
this.getElement().style.display = "none";
|
|
1702
1456
|
return;
|
|
1703
1457
|
}
|
|
1704
|
-
for (const [y] of
|
|
1458
|
+
for (const [y] of m)
|
|
1705
1459
|
switch (y) {
|
|
1706
1460
|
case "paypal": {
|
|
1707
1461
|
if (a) {
|
|
1708
|
-
const u = new
|
|
1462
|
+
const u = new Se({
|
|
1709
1463
|
checkoutProfile: t,
|
|
1710
1464
|
formData: s,
|
|
1711
1465
|
onSubmit: a
|
|
@@ -1716,19 +1470,19 @@ class bt extends A {
|
|
|
1716
1470
|
}
|
|
1717
1471
|
case "applePay": {
|
|
1718
1472
|
if (i && d && c) {
|
|
1719
|
-
const u = t.appearance?.additionalPaymentMethods?.applePay,
|
|
1473
|
+
const u = t.appearance?.additionalPaymentMethods?.applePay, p = new be({
|
|
1720
1474
|
checkoutProfile: t,
|
|
1721
1475
|
formData: s,
|
|
1722
1476
|
onSubmit: i,
|
|
1723
1477
|
paymentId: d,
|
|
1724
1478
|
checkoutKey: c,
|
|
1725
|
-
checkoutDetails:
|
|
1726
|
-
environment:
|
|
1479
|
+
checkoutDetails: g,
|
|
1480
|
+
environment: v,
|
|
1727
1481
|
displayName: u?.displayName,
|
|
1728
1482
|
requiredBillingContactFields: u?.requiredBillingContactFields,
|
|
1729
1483
|
requiredShippingContactFields: u?.requiredShippingContactFields
|
|
1730
1484
|
});
|
|
1731
|
-
this.paymentMethods.set("applePay",
|
|
1485
|
+
this.paymentMethods.set("applePay", p), p.appendTo(this.getElement());
|
|
1732
1486
|
}
|
|
1733
1487
|
break;
|
|
1734
1488
|
}
|
|
@@ -1744,13 +1498,13 @@ class bt extends A {
|
|
|
1744
1498
|
);
|
|
1745
1499
|
break;
|
|
1746
1500
|
}
|
|
1747
|
-
this.paymentMethods.size > 0 && (this.paymentSeparator = new
|
|
1501
|
+
this.paymentMethods.size > 0 && (this.paymentSeparator = new ht({
|
|
1748
1502
|
translationFunc: o,
|
|
1749
1503
|
checkoutProfile: t
|
|
1750
1504
|
}), this.getElement().appendChild(this.paymentSeparator.getElement()));
|
|
1751
1505
|
}
|
|
1752
1506
|
renderSkeleton() {
|
|
1753
|
-
this.skeleton = new
|
|
1507
|
+
this.skeleton = new me(), this.getElement().appendChild(this.skeleton.getElement());
|
|
1754
1508
|
}
|
|
1755
1509
|
updateFormData(e) {
|
|
1756
1510
|
const t = this.paymentMethods.get("paypal");
|
|
@@ -1762,8 +1516,8 @@ class bt extends A {
|
|
|
1762
1516
|
return this.paymentMethods.size > 0 && this.getElement().style.display !== "none";
|
|
1763
1517
|
}
|
|
1764
1518
|
}
|
|
1765
|
-
const
|
|
1766
|
-
class
|
|
1519
|
+
const mt = 17;
|
|
1520
|
+
class pt extends A {
|
|
1767
1521
|
styles;
|
|
1768
1522
|
isHovered = !1;
|
|
1769
1523
|
constructor(e) {
|
|
@@ -1773,7 +1527,7 @@ class St extends A {
|
|
|
1773
1527
|
}
|
|
1774
1528
|
applyStyles() {
|
|
1775
1529
|
const e = this.getElement();
|
|
1776
|
-
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 ===
|
|
1530
|
+
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 === mt ? "100vmax" : `${this.styles.borderRadius}px`, e.style.fontSize = `${this.styles.fontSize}px`, e.style.fontFamily = `${this.styles.fontFamily}, sans-serif`;
|
|
1777
1531
|
}
|
|
1778
1532
|
handleMouseEnter() {
|
|
1779
1533
|
this.isHovered = !0, this.applyStyles();
|
|
@@ -1785,11 +1539,11 @@ class St extends A {
|
|
|
1785
1539
|
return this.getElement().disabled = e, e ? (this.addClass("disabled"), this.removeClass("valid")) : (this.removeClass("disabled"), this.addClass("valid")), this.applyStyles(), this;
|
|
1786
1540
|
}
|
|
1787
1541
|
}
|
|
1788
|
-
class
|
|
1542
|
+
class gt {
|
|
1789
1543
|
button;
|
|
1790
1544
|
constructor(e) {
|
|
1791
1545
|
const { disabled: t, checkoutProfile: s, translationFunc: a } = e;
|
|
1792
|
-
this.button = new
|
|
1546
|
+
this.button = new pt({
|
|
1793
1547
|
text: a(
|
|
1794
1548
|
`buttonTexts.${s?.layout.actionButton.translationKey}`
|
|
1795
1549
|
),
|
|
@@ -1816,7 +1570,7 @@ class Ct {
|
|
|
1816
1570
|
return this.button.appendTo(e), this;
|
|
1817
1571
|
}
|
|
1818
1572
|
}
|
|
1819
|
-
class
|
|
1573
|
+
class ft {
|
|
1820
1574
|
formElement;
|
|
1821
1575
|
focusManager;
|
|
1822
1576
|
translationFunc;
|
|
@@ -1862,7 +1616,7 @@ class Et {
|
|
|
1862
1616
|
(a) => a.enabled
|
|
1863
1617
|
))
|
|
1864
1618
|
return;
|
|
1865
|
-
this.paymentMethods = new
|
|
1619
|
+
this.paymentMethods = new ut({
|
|
1866
1620
|
checkoutProfile: e,
|
|
1867
1621
|
formData: t,
|
|
1868
1622
|
supportedPaymentMethods: this.supportedPaymentMethods,
|
|
@@ -1889,7 +1643,7 @@ class Et {
|
|
|
1889
1643
|
) || e.layout.shippingFields && Object.values(e.layout.shippingFields).some(
|
|
1890
1644
|
(r) => r?.enabled
|
|
1891
1645
|
);
|
|
1892
|
-
this.emailField = new
|
|
1646
|
+
this.emailField = new ve({
|
|
1893
1647
|
value: t.email,
|
|
1894
1648
|
onChange: this.onChange,
|
|
1895
1649
|
onBlur: this.onBlur,
|
|
@@ -1907,7 +1661,7 @@ class Et {
|
|
|
1907
1661
|
}
|
|
1908
1662
|
createPhoneNumberField(e, t, s, a) {
|
|
1909
1663
|
const i = document.createElement("div");
|
|
1910
|
-
this.phonePlaceholder = i, this.formElement.appendChild(i),
|
|
1664
|
+
this.phonePlaceholder = i, this.formElement.appendChild(i), Ee().then(({ PhoneNumberField: r }) => {
|
|
1911
1665
|
i.isConnected && (this.phoneNumberField = new r({
|
|
1912
1666
|
value: t.phoneNumber ?? "",
|
|
1913
1667
|
onChange: this.onChange,
|
|
@@ -1934,7 +1688,7 @@ class Et {
|
|
|
1934
1688
|
this.cardSectionSkeleton = this.buildCardSkeleton(e), this.formElement.appendChild(this.cardSectionSkeleton);
|
|
1935
1689
|
return;
|
|
1936
1690
|
}
|
|
1937
|
-
if (this.cardSection = new
|
|
1691
|
+
if (this.cardSection = new Ce({
|
|
1938
1692
|
checkoutProfile: e,
|
|
1939
1693
|
cardNumber: t.cardNumber,
|
|
1940
1694
|
cardNumberError: s.cardNumber,
|
|
@@ -1958,7 +1712,11 @@ class Et {
|
|
|
1958
1712
|
translationFunc: this.translationFunc,
|
|
1959
1713
|
vgsService: this.vgsService,
|
|
1960
1714
|
onVgsStateChange: this.onVgsStateChange
|
|
1961
|
-
}),
|
|
1715
|
+
}), this.vgsService)
|
|
1716
|
+
this.cardSection.setOnVgsAutoFocus((i) => {
|
|
1717
|
+
this.onFieldFocus(i);
|
|
1718
|
+
});
|
|
1719
|
+
else {
|
|
1962
1720
|
const i = this.cardSection.getElement().querySelector('input[name="cardExpiry"]');
|
|
1963
1721
|
i && (this.cardExpiryFocusHandler = () => this.onFieldFocus("cardExpiry"), i.addEventListener(
|
|
1964
1722
|
"focus",
|
|
@@ -1989,7 +1747,7 @@ class Et {
|
|
|
1989
1747
|
this.cardholderSectionSkeleton = this.buildCardholderSkeleton(e), this.formElement.appendChild(this.cardholderSectionSkeleton);
|
|
1990
1748
|
return;
|
|
1991
1749
|
}
|
|
1992
|
-
if (this.cardholderSection = new
|
|
1750
|
+
if (this.cardholderSection = new ct({
|
|
1993
1751
|
value: t.name,
|
|
1994
1752
|
onChange: this.onChange,
|
|
1995
1753
|
onBlur: this.onBlur,
|
|
@@ -2022,7 +1780,7 @@ class Et {
|
|
|
2022
1780
|
zipCode: "",
|
|
2023
1781
|
country: ""
|
|
2024
1782
|
};
|
|
2025
|
-
this.billingAddressSection = new
|
|
1783
|
+
this.billingAddressSection = new le({
|
|
2026
1784
|
type: "billing",
|
|
2027
1785
|
title: this.translationFunc("address.billingTitle"),
|
|
2028
1786
|
checkoutProfile: e,
|
|
@@ -2055,7 +1813,7 @@ class Et {
|
|
|
2055
1813
|
zipCode: "",
|
|
2056
1814
|
country: ""
|
|
2057
1815
|
};
|
|
2058
|
-
this.shippingAddressSection = new
|
|
1816
|
+
this.shippingAddressSection = new le({
|
|
2059
1817
|
type: "shipping",
|
|
2060
1818
|
title: this.translationFunc("address.shippingTitle"),
|
|
2061
1819
|
checkoutProfile: e,
|
|
@@ -2075,7 +1833,7 @@ class Et {
|
|
|
2075
1833
|
}
|
|
2076
1834
|
createSubmitButton(e, t) {
|
|
2077
1835
|
try {
|
|
2078
|
-
this.submitButton = new
|
|
1836
|
+
this.submitButton = new gt({
|
|
2079
1837
|
disabled: t,
|
|
2080
1838
|
checkoutProfile: e,
|
|
2081
1839
|
translationFunc: this.translationFunc
|
|
@@ -2144,8 +1902,8 @@ class Et {
|
|
|
2144
1902
|
d.style.display = "flex", d.style.gap = "8px";
|
|
2145
1903
|
const c = document.createElement("div");
|
|
2146
1904
|
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);
|
|
2147
|
-
const
|
|
2148
|
-
return
|
|
1905
|
+
const g = document.createElement("div");
|
|
1906
|
+
return g.style.position = "relative", g.style.flex = "1", g.style.height = "38.5px", g.style.overflow = "hidden", g.style.borderRadius = `${t}px`, g.appendChild(this.createSkeletonDiv()), d.appendChild(g), r.appendChild(d), s.appendChild(r), s;
|
|
2149
1907
|
}
|
|
2150
1908
|
createSkeletonDiv() {
|
|
2151
1909
|
const e = document.createElement("div");
|
|
@@ -2162,7 +1920,7 @@ class Et {
|
|
|
2162
1920
|
async mountVgsFields(e) {
|
|
2163
1921
|
if (!this.vgsService || !this.cardSection) return;
|
|
2164
1922
|
await this.vgsService.whenReady();
|
|
2165
|
-
const t = this.cardSection.getVgsContainerIds(), s = this.cardholderSection?.getVgsContainerId(), a = await
|
|
1923
|
+
const t = this.cardSection.getVgsContainerIds(), s = this.cardholderSection?.getVgsContainerId(), a = await Fe(
|
|
2166
1924
|
e.styles.fontFamily
|
|
2167
1925
|
), i = this.cardSection.buildVgsFieldCss(
|
|
2168
1926
|
e,
|
|
@@ -2222,7 +1980,7 @@ class Et {
|
|
|
2222
1980
|
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);
|
|
2223
1981
|
}
|
|
2224
1982
|
}
|
|
2225
|
-
class
|
|
1983
|
+
class yt {
|
|
2226
1984
|
formManager;
|
|
2227
1985
|
focusManager;
|
|
2228
1986
|
onFormSubmit;
|
|
@@ -2263,7 +2021,7 @@ class Ft {
|
|
|
2263
2021
|
this.localTouchedFields.clear();
|
|
2264
2022
|
}
|
|
2265
2023
|
}
|
|
2266
|
-
class
|
|
2024
|
+
class bt {
|
|
2267
2025
|
formManager;
|
|
2268
2026
|
checkoutProfile;
|
|
2269
2027
|
formElement;
|
|
@@ -2287,7 +2045,7 @@ class Mt {
|
|
|
2287
2045
|
try {
|
|
2288
2046
|
if (e.checkoutProfile.styles?.fontFamily)
|
|
2289
2047
|
try {
|
|
2290
|
-
const { cleanup: t } =
|
|
2048
|
+
const { cleanup: t } = Me({
|
|
2291
2049
|
fontFamily: e.checkoutProfile.styles.fontFamily
|
|
2292
2050
|
});
|
|
2293
2051
|
this.fontCleanup = t, this.formElement.style.fontFamily = e.checkoutProfile.styles.fontFamily;
|
|
@@ -2305,15 +2063,15 @@ class Mt {
|
|
|
2305
2063
|
isFormDisabled() {
|
|
2306
2064
|
const e = this.formManager.getFormState(), t = this.checkoutProfile.getState(), s = Object.keys(e.errors).filter(
|
|
2307
2065
|
(f) => f !== "billingAddress" && f !== "shippingAddress"
|
|
2308
|
-
).length > 0, a = e.errors.billingAddress, i = 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 || i || o,
|
|
2066
|
+
).length > 0, a = e.errors.billingAddress, i = 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 || i || o, g = G(
|
|
2309
2067
|
t.checkoutProfile?.layout
|
|
2310
|
-
) ? !!(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:
|
|
2068
|
+
) ? !!(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: m, shippingFields: y } = t.checkoutProfile?.layout ?? {}, u = /* @__PURE__ */ new Set(["US", "CA"]), p = (f, S) => {
|
|
2311
2069
|
if (!f) return !0;
|
|
2312
|
-
const
|
|
2313
|
-
return Object.entries(f).every(([N,
|
|
2070
|
+
const C = S?.country ?? "";
|
|
2071
|
+
return Object.entries(f).every(([N, D]) => !D?.enabled || N === "state" && (!u.has(C) || D.hiddenForCountries?.includes(C)) ? !0 : !!S?.[N]?.trim());
|
|
2314
2072
|
}, h = !this.isVgsMode || Object.values(this.vgsFieldsState).every(
|
|
2315
2073
|
(f) => f?.isValid === !0
|
|
2316
|
-
), b = this.isVgsMode ? !!e.formData.email && l && h &&
|
|
2074
|
+
), b = this.isVgsMode ? !!e.formData.email && l && h && p(m, e.formData.billingAddress) && p(y, e.formData.shippingAddress) : !!e.formData.email && l && g && !!e.formData.cardNumber && !!e.formData.cardCvv && !!e.formData.cardExpiry && p(m, e.formData.billingAddress) && p(y, e.formData.shippingAddress);
|
|
2317
2075
|
return d || !b || this.isSubmitting;
|
|
2318
2076
|
}
|
|
2319
2077
|
setSubmitting(e) {
|
|
@@ -2332,7 +2090,7 @@ class Mt {
|
|
|
2332
2090
|
continue;
|
|
2333
2091
|
const i = a.errors?.[0];
|
|
2334
2092
|
if (!i) continue;
|
|
2335
|
-
const r =
|
|
2093
|
+
const r = Ne(s, i.code);
|
|
2336
2094
|
r && (t[s] = e(r));
|
|
2337
2095
|
}
|
|
2338
2096
|
return t;
|
|
@@ -2344,18 +2102,18 @@ class Mt {
|
|
|
2344
2102
|
this.fontCleanup && (this.fontCleanup(), this.fontCleanup = void 0);
|
|
2345
2103
|
}
|
|
2346
2104
|
}
|
|
2347
|
-
class
|
|
2105
|
+
class St extends A {
|
|
2348
2106
|
titleElement;
|
|
2349
2107
|
constructor(e = {}) {
|
|
2350
2108
|
super("div", ["blur-bg"]);
|
|
2351
|
-
const t =
|
|
2109
|
+
const t = I.createDiv(["loader"]);
|
|
2352
2110
|
this.titleElement = new A("h3", ["title"]), this.titleElement.setText(e.text || ""), this.appendChild(t), this.appendChild(this.titleElement);
|
|
2353
2111
|
}
|
|
2354
2112
|
setText(e) {
|
|
2355
2113
|
return this.titleElement.setText(e), this;
|
|
2356
2114
|
}
|
|
2357
2115
|
}
|
|
2358
|
-
const
|
|
2116
|
+
const de = {
|
|
2359
2117
|
street: "",
|
|
2360
2118
|
firstName: "",
|
|
2361
2119
|
lastName: "",
|
|
@@ -2363,7 +2121,7 @@ const he = {
|
|
|
2363
2121
|
city: "",
|
|
2364
2122
|
zipCode: "",
|
|
2365
2123
|
country: ""
|
|
2366
|
-
},
|
|
2124
|
+
}, ce = (n, e) => {
|
|
2367
2125
|
const t = {}, s = `${e}.`;
|
|
2368
2126
|
return Object.keys(n).forEach((a) => {
|
|
2369
2127
|
if (a.startsWith(s)) {
|
|
@@ -2372,7 +2130,7 @@ const he = {
|
|
|
2372
2130
|
}
|
|
2373
2131
|
}), t;
|
|
2374
2132
|
};
|
|
2375
|
-
class
|
|
2133
|
+
class vt {
|
|
2376
2134
|
formElement;
|
|
2377
2135
|
componentManager;
|
|
2378
2136
|
onLoadingStateChange;
|
|
@@ -2406,13 +2164,13 @@ class wt {
|
|
|
2406
2164
|
!!(e.errors.name && e.touched.name),
|
|
2407
2165
|
e.errors.name
|
|
2408
2166
|
), this.componentManager.updateBillingAddressSection(
|
|
2409
|
-
e.formData.billingAddress ??
|
|
2167
|
+
e.formData.billingAddress ?? de,
|
|
2410
2168
|
e.errors.billingAddress ?? {},
|
|
2411
|
-
|
|
2169
|
+
ce(e.touched, "billingAddress")
|
|
2412
2170
|
), this.componentManager.updateShippingAddressSection(
|
|
2413
|
-
e.formData.shippingAddress ??
|
|
2171
|
+
e.formData.shippingAddress ?? de,
|
|
2414
2172
|
e.errors.shippingAddress ?? {},
|
|
2415
|
-
|
|
2173
|
+
ce(e.touched, "shippingAddress")
|
|
2416
2174
|
), this.componentManager.updateSubmitButton(t);
|
|
2417
2175
|
}
|
|
2418
2176
|
setLoadingState(e) {
|
|
@@ -2420,10 +2178,10 @@ class wt {
|
|
|
2420
2178
|
this.onLoadingStateChange(e);
|
|
2421
2179
|
return;
|
|
2422
2180
|
}
|
|
2423
|
-
e ? (this.hideSkeleton(), this.formSkeleton = new
|
|
2181
|
+
e ? (this.hideSkeleton(), this.formSkeleton = new me(), this.formElement.appendChild(this.formSkeleton.getElement())) : this.hideSkeleton();
|
|
2424
2182
|
}
|
|
2425
2183
|
showSpinner(e) {
|
|
2426
|
-
this.hideSpinner(), this.spinner = new
|
|
2184
|
+
this.hideSpinner(), this.spinner = new St({ text: e }), this.formElement.appendChild(this.spinner.getElement());
|
|
2427
2185
|
}
|
|
2428
2186
|
hideSpinner() {
|
|
2429
2187
|
this.spinner && (this.spinner.getElement().remove(), this.spinner = void 0);
|
|
@@ -2432,7 +2190,7 @@ class wt {
|
|
|
2432
2190
|
this.formSkeleton && (this.formSkeleton.getElement().remove(), this.formSkeleton = void 0);
|
|
2433
2191
|
}
|
|
2434
2192
|
setErrorMessage(e) {
|
|
2435
|
-
this.alert && (this.alert.getElement().remove(), this.alert = void 0), this.alert = new
|
|
2193
|
+
this.alert && (this.alert.getElement().remove(), this.alert = void 0), this.alert = new we({ message: e }), this.formElement.insertBefore(
|
|
2436
2194
|
this.alert.getElement(),
|
|
2437
2195
|
this.formElement.firstChild
|
|
2438
2196
|
);
|
|
@@ -2454,12 +2212,12 @@ const T = (n) => ({
|
|
|
2454
2212
|
country: "",
|
|
2455
2213
|
...n
|
|
2456
2214
|
});
|
|
2457
|
-
class
|
|
2215
|
+
class Et extends A {
|
|
2458
2216
|
options;
|
|
2459
|
-
formManager =
|
|
2217
|
+
formManager = lt();
|
|
2460
2218
|
checkoutProfile;
|
|
2461
|
-
translation =
|
|
2462
|
-
focusManager = new
|
|
2219
|
+
translation = Pe();
|
|
2220
|
+
focusManager = new ke();
|
|
2463
2221
|
// Managers
|
|
2464
2222
|
componentManager;
|
|
2465
2223
|
eventHandler;
|
|
@@ -2470,9 +2228,9 @@ class Pt extends A {
|
|
|
2470
2228
|
vgsJwt;
|
|
2471
2229
|
vgsCardResult;
|
|
2472
2230
|
constructor(e) {
|
|
2473
|
-
super("form", ["form-container"]), this.options = e, this.vgsJwt = e.vgsJwt, this.vgsJwt && (this.vgsService = new
|
|
2231
|
+
super("form", ["form-container"]), this.options = e, this.vgsJwt = e.vgsJwt, this.vgsJwt && (this.vgsService = new te()), this.checkoutProfile = ot({
|
|
2474
2232
|
appearance: e.appearance
|
|
2475
|
-
}), e.locale && this.translation.setLocale(e.locale), this.componentManager = new
|
|
2233
|
+
}), e.locale && this.translation.setLocale(e.locale), this.componentManager = new ft({
|
|
2476
2234
|
formElement: this.element,
|
|
2477
2235
|
focusManager: this.focusManager,
|
|
2478
2236
|
translationFunc: this.translation.t,
|
|
@@ -2489,11 +2247,11 @@ class Pt extends A {
|
|
|
2489
2247
|
environment: e.environment,
|
|
2490
2248
|
vgsService: this.vgsService,
|
|
2491
2249
|
onVgsStateChange: (t) => this.handleVgsStateChange(t)
|
|
2492
|
-
}), this.uiManager = new
|
|
2250
|
+
}), this.uiManager = new vt({
|
|
2493
2251
|
formElement: this.element,
|
|
2494
2252
|
componentManager: this.componentManager,
|
|
2495
2253
|
onLoadingStateChange: e.onLoadingStateChange
|
|
2496
|
-
}), this.stateCoordinator = new
|
|
2254
|
+
}), this.stateCoordinator = new bt({
|
|
2497
2255
|
formManager: this.formManager,
|
|
2498
2256
|
checkoutProfile: this.checkoutProfile,
|
|
2499
2257
|
componentManager: this.componentManager,
|
|
@@ -2503,7 +2261,7 @@ class Pt extends A {
|
|
|
2503
2261
|
onError: (t) => this.uiManager.setErrorMessage(t),
|
|
2504
2262
|
onLoadingChange: (t) => this.uiManager.setLoadingState(t),
|
|
2505
2263
|
getInitialFormData: () => this._getFormStateData().formData
|
|
2506
|
-
}), this.vgsService && this.stateCoordinator.setVgsMode(!0), this.eventHandler = new
|
|
2264
|
+
}), this.vgsService && this.stateCoordinator.setVgsMode(!0), this.eventHandler = new yt({
|
|
2507
2265
|
formManager: this.formManager,
|
|
2508
2266
|
focusManager: this.focusManager,
|
|
2509
2267
|
onFormSubmit: async () => this.handleSubmit(),
|
|
@@ -2584,7 +2342,7 @@ class Pt extends A {
|
|
|
2584
2342
|
}), e.checkoutProfile.layout.shippingFields && this.formManager.getFormState().formData.shippingAddress === void 0 && this.formManager.setFormData({
|
|
2585
2343
|
shippingAddress: T()
|
|
2586
2344
|
});
|
|
2587
|
-
const { formData: t, errors: s, touched: a } = this._getFormStateData(), i =
|
|
2345
|
+
const { formData: t, errors: s, touched: a } = this._getFormStateData(), i = dt(
|
|
2588
2346
|
e.checkoutProfile.layout
|
|
2589
2347
|
);
|
|
2590
2348
|
try {
|
|
@@ -2648,7 +2406,7 @@ class Pt extends A {
|
|
|
2648
2406
|
} catch (o) {
|
|
2649
2407
|
console.error("Failed to create card section:", o);
|
|
2650
2408
|
}
|
|
2651
|
-
if (!
|
|
2409
|
+
if (!G(
|
|
2652
2410
|
e.checkoutProfile.layout
|
|
2653
2411
|
))
|
|
2654
2412
|
try {
|
|
@@ -2686,7 +2444,7 @@ class Pt extends A {
|
|
|
2686
2444
|
*/
|
|
2687
2445
|
inferCardholderName() {
|
|
2688
2446
|
const e = this.checkoutProfile.getState();
|
|
2689
|
-
if (!e.checkoutProfile || !
|
|
2447
|
+
if (!e.checkoutProfile || !G(
|
|
2690
2448
|
e.checkoutProfile.layout
|
|
2691
2449
|
)) return;
|
|
2692
2450
|
const { formData: s } = this._getFormStateData(), a = s.billingAddress ?? s.shippingAddress;
|
|
@@ -2794,7 +2552,7 @@ class Pt extends A {
|
|
|
2794
2552
|
), this.componentManager.cleanup(), this.uiManager.cleanup(), this.getElement().remove();
|
|
2795
2553
|
}
|
|
2796
2554
|
associatePayment(e, t, s, a, i) {
|
|
2797
|
-
this.options.paymentId = e, this.options.checkoutKey = t, this.options.supportedPaymentMethods = s, this.options.checkoutDetails = a, this.componentManager.setCheckoutDetailsLoaded(!0), i && !this.vgsService && (this.vgsJwt = i, this.vgsService = new
|
|
2555
|
+
this.options.paymentId = e, this.options.checkoutKey = t, this.options.supportedPaymentMethods = s, this.options.checkoutDetails = a, this.componentManager.setCheckoutDetailsLoaded(!0), i && !this.vgsService && (this.vgsJwt = i, this.vgsService = new te(), this.componentManager.setVgsService(this.vgsService), this.stateCoordinator.setVgsMode(!0), this.vgsService.init(this.options.environment).then((o) => {
|
|
2798
2556
|
this.vgsService?.createForm(
|
|
2799
2557
|
o,
|
|
2800
2558
|
(d) => this.handleVgsStateChange(d)
|
|
@@ -2819,7 +2577,7 @@ class Pt extends A {
|
|
|
2819
2577
|
}
|
|
2820
2578
|
}
|
|
2821
2579
|
}
|
|
2822
|
-
class
|
|
2580
|
+
class Ct {
|
|
2823
2581
|
container = null;
|
|
2824
2582
|
options;
|
|
2825
2583
|
onSubmit;
|
|
@@ -2843,7 +2601,7 @@ class kt {
|
|
|
2843
2601
|
}
|
|
2844
2602
|
}
|
|
2845
2603
|
renderForm(e) {
|
|
2846
|
-
this.container && (this.form && (this.form.destroy(), this.form = null), this.form = new
|
|
2604
|
+
this.container && (this.form && (this.form.destroy(), this.form = null), this.form = new Et({
|
|
2847
2605
|
apiKey: this.options.apiKey,
|
|
2848
2606
|
onSubmit: this.onSubmit,
|
|
2849
2607
|
locale: this.options.locale,
|
|
@@ -2880,7 +2638,7 @@ class kt {
|
|
|
2880
2638
|
);
|
|
2881
2639
|
}
|
|
2882
2640
|
}
|
|
2883
|
-
class
|
|
2641
|
+
class Ft {
|
|
2884
2642
|
state;
|
|
2885
2643
|
listeners = /* @__PURE__ */ new Set();
|
|
2886
2644
|
constructor(e) {
|
|
@@ -2902,8 +2660,8 @@ class At {
|
|
|
2902
2660
|
this.listeners.forEach((t) => t(e));
|
|
2903
2661
|
}
|
|
2904
2662
|
}
|
|
2905
|
-
const
|
|
2906
|
-
class
|
|
2663
|
+
const Mt = "en";
|
|
2664
|
+
class Nt {
|
|
2907
2665
|
config;
|
|
2908
2666
|
_callbacks;
|
|
2909
2667
|
paymentState;
|
|
@@ -2912,18 +2670,18 @@ class Dt {
|
|
|
2912
2670
|
stateManager;
|
|
2913
2671
|
sessionId;
|
|
2914
2672
|
constructor(e) {
|
|
2915
|
-
this.config = this.validateConfig(e), this._callbacks = { ...this.config.callbacks }, this.paymentState = {}, this.sessionId = crypto.randomUUID(),
|
|
2673
|
+
this.config = this.validateConfig(e), this._callbacks = { ...this.config.callbacks }, this.paymentState = {}, this.sessionId = crypto.randomUUID(), at({
|
|
2916
2674
|
environment: this.config.environment,
|
|
2917
2675
|
sessionId: this.sessionId
|
|
2918
2676
|
}), M(F.CHECKOUT_INITIALIZED, {
|
|
2919
2677
|
environment: this.config.environment
|
|
2920
|
-
}), this.apiService = new
|
|
2678
|
+
}), this.apiService = new Ae(
|
|
2921
2679
|
this.config.apiKey,
|
|
2922
2680
|
this.config.environment
|
|
2923
|
-
), this.stateManager = new
|
|
2681
|
+
), this.stateManager = new Ft({
|
|
2924
2682
|
mounted: !1,
|
|
2925
2683
|
form: null
|
|
2926
|
-
}), this.formManager = new
|
|
2684
|
+
}), this.formManager = new Ct(
|
|
2927
2685
|
{
|
|
2928
2686
|
locale: this.config.locale,
|
|
2929
2687
|
apiKey: this.config.apiKey,
|
|
@@ -2945,7 +2703,7 @@ class Dt {
|
|
|
2945
2703
|
apiKey: e.apiKey,
|
|
2946
2704
|
returnUrl: e.returnUrl,
|
|
2947
2705
|
environment: e.environment,
|
|
2948
|
-
locale: e.locale ||
|
|
2706
|
+
locale: e.locale || Mt,
|
|
2949
2707
|
disableErrorMessages: e.disableErrorMessages ?? !1,
|
|
2950
2708
|
manualActionHandling: e.manualActionHandling ?? !1,
|
|
2951
2709
|
appearance: e.appearance,
|
|
@@ -3083,7 +2841,7 @@ class Dt {
|
|
|
3083
2841
|
throw new Error("paymentId and checkoutKey are required");
|
|
3084
2842
|
this.paymentState.paymentId = e, this.paymentState.checkoutKey = t;
|
|
3085
2843
|
try {
|
|
3086
|
-
const s = await
|
|
2844
|
+
const s = await De({
|
|
3087
2845
|
id: e,
|
|
3088
2846
|
checkoutKey: t,
|
|
3089
2847
|
environment: this.config.environment
|
|
@@ -3122,7 +2880,7 @@ class Dt {
|
|
|
3122
2880
|
throw M(F.PAYMENT_ASSOCIATION_FAILED, {
|
|
3123
2881
|
payment_id: e,
|
|
3124
2882
|
error_message: s instanceof Error ? s.message : "Unknown error"
|
|
3125
|
-
}),
|
|
2883
|
+
}), rt(
|
|
3126
2884
|
s instanceof Error ? s : new Error("Failed to associate payment"),
|
|
3127
2885
|
{ payment_id: e }
|
|
3128
2886
|
), s;
|
|
@@ -3132,19 +2890,19 @@ class Dt {
|
|
|
3132
2890
|
Object.assign(this._callbacks, e);
|
|
3133
2891
|
}
|
|
3134
2892
|
}
|
|
3135
|
-
typeof globalThis < "u" && (globalThis.OdusCheckout =
|
|
2893
|
+
typeof globalThis < "u" && (globalThis.OdusCheckout = Nt);
|
|
3136
2894
|
export {
|
|
3137
|
-
|
|
3138
|
-
|
|
3139
|
-
|
|
3140
|
-
|
|
3141
|
-
|
|
3142
|
-
|
|
3143
|
-
|
|
3144
|
-
|
|
3145
|
-
|
|
2895
|
+
Nt as OdusCheckout,
|
|
2896
|
+
Dt as deLocale,
|
|
2897
|
+
It as enLocale,
|
|
2898
|
+
xt as esLocale,
|
|
2899
|
+
Tt as frLocale,
|
|
2900
|
+
Lt as itLocale,
|
|
2901
|
+
Vt as plLocale,
|
|
2902
|
+
_t as ptLocale,
|
|
2903
|
+
rt as pushError,
|
|
3146
2904
|
M as pushEvent,
|
|
3147
|
-
|
|
2905
|
+
Pt as pushLog,
|
|
3148
2906
|
oe as pushMeasurement,
|
|
3149
|
-
|
|
2907
|
+
Bt as trLocale
|
|
3150
2908
|
};
|