@odus/checkout 0.5.9 → 0.5.10
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 +787 -737
- package/dist/index.css +1 -1
- package/dist/package.json +1 -1
- package/package.json +1 -1
package/dist/checkout.es.js
CHANGED
|
@@ -1,89 +1,89 @@
|
|
|
1
|
-
const
|
|
2
|
-
class
|
|
1
|
+
const I = (o) => o === "test" ? "https://sandbox-api.odus.com" : o === "live" ? "https://api.odus.com" : "http://localhost:3000";
|
|
2
|
+
class B {
|
|
3
3
|
apiKey;
|
|
4
4
|
baseUrl;
|
|
5
5
|
browserInfo;
|
|
6
|
-
constructor(e, t,
|
|
7
|
-
this.apiKey = e, this.baseUrl =
|
|
6
|
+
constructor(e, t, i) {
|
|
7
|
+
this.apiKey = e, this.baseUrl = I(t), this.browserInfo = i || { userAgent: navigator.userAgent };
|
|
8
8
|
}
|
|
9
9
|
async fetchApi({
|
|
10
10
|
endpoint: e,
|
|
11
11
|
method: t = "POST",
|
|
12
|
-
body:
|
|
13
|
-
customHeaders:
|
|
12
|
+
body: i,
|
|
13
|
+
customHeaders: a = {}
|
|
14
14
|
}) {
|
|
15
|
-
const
|
|
15
|
+
const r = {
|
|
16
16
|
Authorization: `Bearer ${this.apiKey}`,
|
|
17
17
|
"Content-Type": "application/json",
|
|
18
|
-
...
|
|
18
|
+
...a
|
|
19
19
|
};
|
|
20
20
|
try {
|
|
21
|
-
const
|
|
21
|
+
const s = await fetch(`${this.baseUrl}${e}`, {
|
|
22
22
|
method: t,
|
|
23
|
-
headers:
|
|
24
|
-
body:
|
|
23
|
+
headers: r,
|
|
24
|
+
body: i ? JSON.stringify(i) : void 0
|
|
25
25
|
});
|
|
26
|
-
if (!
|
|
27
|
-
let
|
|
26
|
+
if (!s.ok) {
|
|
27
|
+
let n;
|
|
28
28
|
try {
|
|
29
|
-
|
|
29
|
+
n = await s.json();
|
|
30
30
|
} catch (c) {
|
|
31
31
|
console.log("error", c);
|
|
32
32
|
}
|
|
33
33
|
throw {
|
|
34
|
-
message:
|
|
35
|
-
status:
|
|
36
|
-
statusText:
|
|
37
|
-
details:
|
|
34
|
+
message: n?.message[0] || `API request failed: ${s.status} ${s.statusText}`,
|
|
35
|
+
status: s.status,
|
|
36
|
+
statusText: s.statusText,
|
|
37
|
+
details: n
|
|
38
38
|
};
|
|
39
39
|
}
|
|
40
|
-
return
|
|
41
|
-
} catch (
|
|
42
|
-
throw
|
|
43
|
-
message:
|
|
40
|
+
return s.json();
|
|
41
|
+
} catch (s) {
|
|
42
|
+
throw s instanceof Error ? {
|
|
43
|
+
message: s.message,
|
|
44
44
|
status: 0,
|
|
45
45
|
// Use 0 for network/client errors
|
|
46
46
|
statusText: "Network Error",
|
|
47
|
-
details: { message:
|
|
48
|
-
} :
|
|
47
|
+
details: { message: s.message }
|
|
48
|
+
} : s;
|
|
49
49
|
}
|
|
50
50
|
}
|
|
51
51
|
async authorizePayment({
|
|
52
52
|
paymentId: e,
|
|
53
53
|
checkoutKey: t,
|
|
54
|
-
formData:
|
|
55
|
-
token:
|
|
56
|
-
returnUrl:
|
|
54
|
+
formData: i,
|
|
55
|
+
token: a,
|
|
56
|
+
returnUrl: r
|
|
57
57
|
}) {
|
|
58
|
-
let
|
|
59
|
-
if (
|
|
60
|
-
const
|
|
61
|
-
|
|
58
|
+
let s = {};
|
|
59
|
+
if (a && i) {
|
|
60
|
+
const n = i.cardExpiry.replace(/\s+/g, "").split("/"), l = n[0], c = n[1];
|
|
61
|
+
s = {
|
|
62
62
|
paymentMethodData: {
|
|
63
63
|
type: "card",
|
|
64
64
|
card: {
|
|
65
|
-
token:
|
|
65
|
+
token: a,
|
|
66
66
|
expMonth: l,
|
|
67
67
|
expYear: `20${c}`,
|
|
68
|
-
cardholderName:
|
|
68
|
+
cardholderName: i.name
|
|
69
69
|
}
|
|
70
70
|
},
|
|
71
71
|
customerData: {
|
|
72
|
-
email:
|
|
73
|
-
name:
|
|
72
|
+
email: i.email,
|
|
73
|
+
name: i.name
|
|
74
74
|
},
|
|
75
75
|
context: {
|
|
76
|
-
returnUrl:
|
|
76
|
+
returnUrl: r,
|
|
77
77
|
browserInfo: this.browserInfo
|
|
78
78
|
}
|
|
79
79
|
};
|
|
80
80
|
} else
|
|
81
|
-
|
|
81
|
+
s = {
|
|
82
82
|
paymentMethodData: {
|
|
83
83
|
type: "paypal"
|
|
84
84
|
},
|
|
85
85
|
context: {
|
|
86
|
-
returnUrl:
|
|
86
|
+
returnUrl: r,
|
|
87
87
|
browserInfo: this.browserInfo
|
|
88
88
|
}
|
|
89
89
|
};
|
|
@@ -92,27 +92,27 @@ class $ {
|
|
|
92
92
|
customHeaders: {
|
|
93
93
|
Authorization: `Bearer ${t}`
|
|
94
94
|
},
|
|
95
|
-
body:
|
|
95
|
+
body: s
|
|
96
96
|
});
|
|
97
97
|
}
|
|
98
98
|
}
|
|
99
|
-
const
|
|
100
|
-
id:
|
|
99
|
+
const O = async ({
|
|
100
|
+
id: o,
|
|
101
101
|
apiKey: e,
|
|
102
102
|
environment: t
|
|
103
103
|
}) => {
|
|
104
|
-
const
|
|
104
|
+
const i = I(t), a = await fetch(`${i}/checkout-profiles/${o}`, {
|
|
105
105
|
method: "GET",
|
|
106
106
|
headers: {
|
|
107
107
|
"Content-Type": "application/json",
|
|
108
108
|
Authorization: `Bearer ${e}`
|
|
109
109
|
}
|
|
110
110
|
});
|
|
111
|
-
if (!
|
|
112
|
-
throw new Error(`HTTP error! Status: ${
|
|
113
|
-
return await
|
|
111
|
+
if (!a.ok)
|
|
112
|
+
throw new Error(`HTTP error! Status: ${a.status}`);
|
|
113
|
+
return await a.json();
|
|
114
114
|
};
|
|
115
|
-
class
|
|
115
|
+
class H {
|
|
116
116
|
events = /* @__PURE__ */ new Map();
|
|
117
117
|
/**
|
|
118
118
|
* Subscribe to an event
|
|
@@ -122,8 +122,8 @@ class V {
|
|
|
122
122
|
*/
|
|
123
123
|
subscribe(e, t) {
|
|
124
124
|
return this.events.has(e) || this.events.set(e, /* @__PURE__ */ new Set()), this.events.get(e)?.add(t), () => {
|
|
125
|
-
const
|
|
126
|
-
|
|
125
|
+
const i = this.events.get(e);
|
|
126
|
+
i && (i.delete(t), i.size === 0 && this.events.delete(e));
|
|
127
127
|
};
|
|
128
128
|
}
|
|
129
129
|
/**
|
|
@@ -132,8 +132,8 @@ class V {
|
|
|
132
132
|
* @param data - The data to pass to subscribers
|
|
133
133
|
*/
|
|
134
134
|
publish(e, t) {
|
|
135
|
-
const
|
|
136
|
-
|
|
135
|
+
const i = this.events.get(e);
|
|
136
|
+
i && i.forEach((a) => a(t));
|
|
137
137
|
}
|
|
138
138
|
/**
|
|
139
139
|
* Clear all event subscriptions
|
|
@@ -150,13 +150,13 @@ class V {
|
|
|
150
150
|
return this.events.get(e)?.size || 0;
|
|
151
151
|
}
|
|
152
152
|
}
|
|
153
|
-
const
|
|
154
|
-
class
|
|
153
|
+
const K = new H();
|
|
154
|
+
class j {
|
|
155
155
|
state;
|
|
156
156
|
initialState;
|
|
157
157
|
eventBus;
|
|
158
158
|
stateChangedEvent = "state-changed";
|
|
159
|
-
constructor(e, t =
|
|
159
|
+
constructor(e, t = K) {
|
|
160
160
|
this.initialState = { ...e }, this.state = { ...e }, this.eventBus = t;
|
|
161
161
|
}
|
|
162
162
|
/**
|
|
@@ -196,51 +196,51 @@ class O {
|
|
|
196
196
|
return this.state[e];
|
|
197
197
|
}
|
|
198
198
|
}
|
|
199
|
-
function L(
|
|
200
|
-
return new
|
|
199
|
+
function L(o) {
|
|
200
|
+
return new j(o);
|
|
201
201
|
}
|
|
202
|
-
function
|
|
203
|
-
apiKey:
|
|
202
|
+
function U({
|
|
203
|
+
apiKey: o,
|
|
204
204
|
profileId: e,
|
|
205
205
|
environment: t
|
|
206
206
|
}) {
|
|
207
|
-
const
|
|
207
|
+
const i = L({
|
|
208
208
|
checkoutProfile: void 0,
|
|
209
209
|
isLoading: !0,
|
|
210
210
|
error: null
|
|
211
|
-
}),
|
|
211
|
+
}), a = async () => {
|
|
212
212
|
try {
|
|
213
|
-
|
|
214
|
-
const
|
|
215
|
-
apiKey:
|
|
213
|
+
i.setState({ isLoading: !0 });
|
|
214
|
+
const r = await O({
|
|
215
|
+
apiKey: o,
|
|
216
216
|
id: e,
|
|
217
217
|
environment: t
|
|
218
218
|
});
|
|
219
|
-
|
|
220
|
-
checkoutProfile:
|
|
219
|
+
r && i.setState({
|
|
220
|
+
checkoutProfile: r,
|
|
221
221
|
isLoading: !1,
|
|
222
222
|
error: null
|
|
223
223
|
});
|
|
224
|
-
} catch (
|
|
225
|
-
|
|
224
|
+
} catch (r) {
|
|
225
|
+
i.setState({
|
|
226
226
|
error: "Failed to load checkout profile",
|
|
227
227
|
isLoading: !1
|
|
228
|
-
}), console.error(
|
|
228
|
+
}), console.error(r);
|
|
229
229
|
}
|
|
230
230
|
};
|
|
231
|
-
return
|
|
232
|
-
getState:
|
|
233
|
-
subscribe:
|
|
234
|
-
reload:
|
|
231
|
+
return a(), {
|
|
232
|
+
getState: i.getState.bind(i),
|
|
233
|
+
subscribe: i.subscribe.bind(i),
|
|
234
|
+
reload: a
|
|
235
235
|
};
|
|
236
236
|
}
|
|
237
|
-
const
|
|
238
|
-
cardNumber: (
|
|
239
|
-
cardExpiry: (
|
|
240
|
-
const t =
|
|
237
|
+
const P = {
|
|
238
|
+
cardNumber: (o) => (o.replace(/\s/g, "").match(/.{1,4}/g) || []).join(" "),
|
|
239
|
+
cardExpiry: (o) => {
|
|
240
|
+
const t = o.replace(/\D/g, "").slice(0, 4);
|
|
241
241
|
return t.length > 2 ? `${t.slice(0, 2)} / ${t.slice(2)}` : t;
|
|
242
242
|
}
|
|
243
|
-
},
|
|
243
|
+
}, $ = {
|
|
244
244
|
"gmail.com": [
|
|
245
245
|
"gmal.com",
|
|
246
246
|
"gmil.com",
|
|
@@ -312,98 +312,98 @@ const z = {
|
|
|
312
312
|
"comcast.net": ["comcast.com", "comcat.net", "comcst.net", "comcastnet", "comcast.nt", "comcas.net"],
|
|
313
313
|
"verizon.net": ["verizon.com", "verizon.nt", "verizonnet", "verizn.net", "verizon.ne", "verzon.net"],
|
|
314
314
|
"att.net": ["att.com", "at.net", "att.nt", "attnet", "att.ne", "attt.net"]
|
|
315
|
-
},
|
|
316
|
-
if (!
|
|
315
|
+
}, q = (o) => {
|
|
316
|
+
if (!o || o.includes("."))
|
|
317
317
|
return null;
|
|
318
318
|
const e = ["com", "net", "org", "edu", "gov", "io", "co"];
|
|
319
319
|
for (const t of e) {
|
|
320
|
-
if (
|
|
320
|
+
if (o === "companycok" && t === "co")
|
|
321
321
|
return "company.co";
|
|
322
|
-
if (
|
|
323
|
-
const
|
|
324
|
-
return `${
|
|
322
|
+
if (o.endsWith(t) && !o.includes(".")) {
|
|
323
|
+
const i = o.length - t.length;
|
|
324
|
+
return `${o.substring(0, i)}.${t}`;
|
|
325
325
|
}
|
|
326
326
|
}
|
|
327
327
|
return null;
|
|
328
|
-
},
|
|
329
|
-
if (
|
|
330
|
-
if (e.length === 0) return
|
|
331
|
-
const t = e.length + 1,
|
|
328
|
+
}, G = (o, e) => {
|
|
329
|
+
if (o.length === 0) return e.length;
|
|
330
|
+
if (e.length === 0) return o.length;
|
|
331
|
+
const t = e.length + 1, i = o.length + 1, a = Array.from(
|
|
332
332
|
{ length: t },
|
|
333
|
-
(
|
|
333
|
+
(r, s) => Array.from({ length: i }, (n, l) => s === 0 ? l : l === 0 ? s : 0)
|
|
334
334
|
);
|
|
335
|
-
for (let
|
|
336
|
-
for (let
|
|
337
|
-
const
|
|
338
|
-
r
|
|
339
|
-
r
|
|
335
|
+
for (let r = 1; r < t; r++)
|
|
336
|
+
for (let s = 1; s < i; s++) {
|
|
337
|
+
const n = o[s - 1] === e[r - 1] ? 0 : 1;
|
|
338
|
+
a[r][s] = Math.min(
|
|
339
|
+
a[r - 1][s] + 1,
|
|
340
340
|
// deletion
|
|
341
|
-
r
|
|
341
|
+
a[r][s - 1] + 1,
|
|
342
342
|
// insertion
|
|
343
|
-
r
|
|
343
|
+
a[r - 1][s - 1] + n
|
|
344
344
|
// substitution
|
|
345
345
|
);
|
|
346
346
|
}
|
|
347
|
-
return
|
|
348
|
-
},
|
|
349
|
-
let t = null,
|
|
350
|
-
const
|
|
351
|
-
for (const
|
|
352
|
-
const
|
|
353
|
-
|
|
347
|
+
return a[e.length][o.length];
|
|
348
|
+
}, _ = (o) => {
|
|
349
|
+
let t = null, i = 3;
|
|
350
|
+
const a = o.toLowerCase();
|
|
351
|
+
for (const r of Object.keys($)) {
|
|
352
|
+
const s = G(a, r);
|
|
353
|
+
s <= 2 && s < i && (i = s, t = r);
|
|
354
354
|
}
|
|
355
355
|
return t;
|
|
356
|
-
},
|
|
357
|
-
const { t:
|
|
356
|
+
}, Y = () => {
|
|
357
|
+
const { t: o } = z();
|
|
358
358
|
return {
|
|
359
359
|
validateEmail: (t) => {
|
|
360
|
-
const
|
|
360
|
+
const i = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
361
361
|
if (!t)
|
|
362
362
|
return {
|
|
363
363
|
isValid: !1,
|
|
364
|
-
message:
|
|
364
|
+
message: o("validation.emailInvalid"),
|
|
365
365
|
suggestion: null
|
|
366
366
|
};
|
|
367
|
-
const
|
|
368
|
-
if (
|
|
367
|
+
const a = t.indexOf("@");
|
|
368
|
+
if (a === -1)
|
|
369
369
|
return {
|
|
370
370
|
isValid: !1,
|
|
371
|
-
message:
|
|
371
|
+
message: o("validation.emailInvalid"),
|
|
372
372
|
suggestion: null
|
|
373
373
|
};
|
|
374
|
-
const
|
|
375
|
-
if (!
|
|
376
|
-
const l =
|
|
374
|
+
const r = t.substring(0, a), s = t.substring(a + 1);
|
|
375
|
+
if (!s.includes(".")) {
|
|
376
|
+
const l = q(s);
|
|
377
377
|
if (l)
|
|
378
378
|
return {
|
|
379
379
|
isValid: !1,
|
|
380
|
-
message:
|
|
381
|
-
email: `${
|
|
380
|
+
message: o("validation.emailSuggestion", {
|
|
381
|
+
email: `${r}@${l}`
|
|
382
382
|
}),
|
|
383
|
-
suggestion: `${
|
|
383
|
+
suggestion: `${r}@${l}`
|
|
384
384
|
};
|
|
385
|
-
for (const c of Object.keys(
|
|
386
|
-
if (c.replace(/\./g, "") ===
|
|
385
|
+
for (const c of Object.keys($))
|
|
386
|
+
if (c.replace(/\./g, "") === s)
|
|
387
387
|
return {
|
|
388
388
|
isValid: !1,
|
|
389
|
-
message:
|
|
390
|
-
email: `${
|
|
389
|
+
message: o("validation.emailSuggestion", {
|
|
390
|
+
email: `${r}@${c}`
|
|
391
391
|
}),
|
|
392
|
-
suggestion: `${
|
|
392
|
+
suggestion: `${r}@${c}`
|
|
393
393
|
};
|
|
394
394
|
}
|
|
395
|
-
if (!
|
|
395
|
+
if (!i.test(t))
|
|
396
396
|
return {
|
|
397
397
|
isValid: !1,
|
|
398
|
-
message:
|
|
398
|
+
message: o("validation.emailInvalid"),
|
|
399
399
|
suggestion: null
|
|
400
400
|
};
|
|
401
|
-
const
|
|
402
|
-
if (
|
|
403
|
-
const l = `${
|
|
401
|
+
const n = _(s);
|
|
402
|
+
if (n && n !== s) {
|
|
403
|
+
const l = `${r}@${n}`;
|
|
404
404
|
return {
|
|
405
405
|
isValid: !1,
|
|
406
|
-
message:
|
|
406
|
+
message: o("validation.emailSuggestion", { email: l }),
|
|
407
407
|
suggestion: l
|
|
408
408
|
};
|
|
409
409
|
}
|
|
@@ -414,30 +414,30 @@ const z = {
|
|
|
414
414
|
};
|
|
415
415
|
}
|
|
416
416
|
};
|
|
417
|
-
},
|
|
418
|
-
const { t:
|
|
417
|
+
}, Z = () => {
|
|
418
|
+
const { t: o } = z(), { validateEmail: e } = Y();
|
|
419
419
|
return {
|
|
420
420
|
email: (t) => {
|
|
421
|
-
const
|
|
422
|
-
return
|
|
421
|
+
const i = e(t);
|
|
422
|
+
return i.isValid ? void 0 : i.message;
|
|
423
423
|
},
|
|
424
424
|
name: (t) => {
|
|
425
425
|
if (!t.trim())
|
|
426
|
-
return
|
|
426
|
+
return o("validation.nameRequired");
|
|
427
427
|
},
|
|
428
428
|
cardExpiry: (t) => {
|
|
429
|
-
const
|
|
430
|
-
if (!
|
|
431
|
-
return
|
|
432
|
-
const
|
|
429
|
+
const i = t.replace(/\s/g, ""), [a, r] = i.split("/").map((u) => u.trim());
|
|
430
|
+
if (!a || !r || a.length !== 2 || r.length !== 2)
|
|
431
|
+
return o("validation.cardExpiryFormat");
|
|
432
|
+
const s = /* @__PURE__ */ new Date(), n = s.getFullYear() % 100, l = s.getMonth() + 1, c = parseInt(a, 10), d = parseInt(r, 10);
|
|
433
433
|
if (c < 1 || c > 12)
|
|
434
|
-
return
|
|
435
|
-
if (d <
|
|
436
|
-
return
|
|
434
|
+
return o("validation.cardExpiryFormat");
|
|
435
|
+
if (d < n || d === n && c < l)
|
|
436
|
+
return o("validation.cardExpiryInvalid");
|
|
437
437
|
}
|
|
438
438
|
};
|
|
439
|
-
},
|
|
440
|
-
const
|
|
439
|
+
}, J = () => {
|
|
440
|
+
const o = Z(), e = L({
|
|
441
441
|
formData: {
|
|
442
442
|
name: "",
|
|
443
443
|
email: "",
|
|
@@ -451,90 +451,90 @@ const z = {
|
|
|
451
451
|
},
|
|
452
452
|
isValid: !1
|
|
453
453
|
}), t = (l, c) => {
|
|
454
|
-
const d =
|
|
454
|
+
const d = o[l];
|
|
455
455
|
return d?.(c);
|
|
456
|
-
},
|
|
456
|
+
}, i = (l) => {
|
|
457
457
|
const c = {};
|
|
458
458
|
return Object.keys(l).forEach((d) => {
|
|
459
459
|
const u = t(d, l[d]);
|
|
460
460
|
u && (c[d] = u);
|
|
461
461
|
}), c;
|
|
462
|
-
},
|
|
463
|
-
const c =
|
|
462
|
+
}, a = (l) => {
|
|
463
|
+
const c = i(l);
|
|
464
464
|
return Object.keys(c).length === 0;
|
|
465
|
-
},
|
|
465
|
+
}, r = (l, c) => {
|
|
466
466
|
const d = e.getState();
|
|
467
467
|
let u = c;
|
|
468
|
-
l in
|
|
469
|
-
const
|
|
468
|
+
l in P && (u = P[l](c));
|
|
469
|
+
const p = {
|
|
470
470
|
...d.formData,
|
|
471
471
|
[l]: u
|
|
472
|
-
},
|
|
472
|
+
}, m = { ...d.errors };
|
|
473
473
|
if (d.touched[l]) {
|
|
474
|
-
const
|
|
475
|
-
|
|
474
|
+
const f = t(l, u);
|
|
475
|
+
f ? m[l] = f : delete m[l];
|
|
476
476
|
}
|
|
477
477
|
e.setState({
|
|
478
|
-
formData:
|
|
479
|
-
errors:
|
|
480
|
-
isValid:
|
|
478
|
+
formData: p,
|
|
479
|
+
errors: m,
|
|
480
|
+
isValid: a(p)
|
|
481
481
|
});
|
|
482
|
-
},
|
|
482
|
+
}, s = (l, c) => {
|
|
483
483
|
const d = e.getState(), u = {
|
|
484
484
|
...d.touched,
|
|
485
485
|
[l]: !0
|
|
486
|
-
},
|
|
487
|
-
|
|
486
|
+
}, p = t(l, c), m = { ...d.errors };
|
|
487
|
+
p ? m[l] = p : delete m[l], e.setState({
|
|
488
488
|
touched: u,
|
|
489
|
-
errors:
|
|
489
|
+
errors: m
|
|
490
490
|
});
|
|
491
|
-
},
|
|
491
|
+
}, n = (l) => {
|
|
492
492
|
const d = {
|
|
493
493
|
...e.getState().formData,
|
|
494
494
|
...l
|
|
495
495
|
};
|
|
496
496
|
e.setState({
|
|
497
497
|
formData: d,
|
|
498
|
-
isValid:
|
|
498
|
+
isValid: a(d)
|
|
499
499
|
});
|
|
500
500
|
};
|
|
501
501
|
return {
|
|
502
502
|
getFormState: e.getState.bind(e),
|
|
503
503
|
subscribe: e.subscribe.bind(e),
|
|
504
|
-
handleChange:
|
|
505
|
-
handleBlur:
|
|
506
|
-
setFormData:
|
|
504
|
+
handleChange: r,
|
|
505
|
+
handleBlur: s,
|
|
506
|
+
setFormData: n,
|
|
507
507
|
reset: e.resetState.bind(e)
|
|
508
508
|
};
|
|
509
|
-
},
|
|
510
|
-
props:
|
|
509
|
+
}, W = async ({
|
|
510
|
+
props: o,
|
|
511
511
|
apiKey: e,
|
|
512
512
|
environment: t
|
|
513
513
|
}) => {
|
|
514
|
-
const
|
|
515
|
-
`${
|
|
514
|
+
const i = I(t), a = await fetch(
|
|
515
|
+
`${i}/tokenization/generate-iframe-configuration`,
|
|
516
516
|
{
|
|
517
517
|
method: "POST",
|
|
518
518
|
headers: {
|
|
519
519
|
"Content-Type": "application/json",
|
|
520
520
|
Authorization: `Bearer ${e}`
|
|
521
521
|
},
|
|
522
|
-
body: JSON.stringify(
|
|
522
|
+
body: JSON.stringify(o)
|
|
523
523
|
}
|
|
524
524
|
);
|
|
525
|
-
if (!
|
|
526
|
-
throw new Error(`HTTP error! Status: ${
|
|
527
|
-
return await
|
|
528
|
-
}
|
|
529
|
-
function
|
|
530
|
-
apiKey:
|
|
525
|
+
if (!a.ok)
|
|
526
|
+
throw new Error(`HTTP error! Status: ${a.status}`);
|
|
527
|
+
return await a.json();
|
|
528
|
+
};
|
|
529
|
+
function X({
|
|
530
|
+
apiKey: o,
|
|
531
531
|
// scriptLoaded,
|
|
532
532
|
checkoutProfile: e,
|
|
533
533
|
inputStyles: t,
|
|
534
|
-
setFormData:
|
|
535
|
-
environment:
|
|
534
|
+
setFormData: i,
|
|
535
|
+
environment: a
|
|
536
536
|
}) {
|
|
537
|
-
const
|
|
537
|
+
const r = L({
|
|
538
538
|
iframeConfig: void 0,
|
|
539
539
|
loadingIframe: !0,
|
|
540
540
|
isCcValid: !1,
|
|
@@ -543,33 +543,38 @@ function Q({
|
|
|
543
543
|
isCvvFocused: !1,
|
|
544
544
|
possibleCardType: "unknown"
|
|
545
545
|
});
|
|
546
|
-
let
|
|
547
|
-
const
|
|
546
|
+
let s = null;
|
|
547
|
+
const n = async () => {
|
|
548
548
|
try {
|
|
549
|
-
|
|
549
|
+
console.log("[IframeConfig] Generating iframe configuration...");
|
|
550
|
+
const m = await W({
|
|
550
551
|
props: {
|
|
551
552
|
allowedOrigins: [globalThis.location.origin]
|
|
552
553
|
},
|
|
553
|
-
apiKey:
|
|
554
|
-
environment:
|
|
554
|
+
apiKey: o,
|
|
555
|
+
environment: a
|
|
555
556
|
});
|
|
556
|
-
m && (
|
|
557
|
+
m && (console.log("[IframeConfig] Iframe config generated successfully."), r.setState({
|
|
557
558
|
iframeConfig: {
|
|
558
559
|
...m,
|
|
559
560
|
origin: globalThis.location.origin
|
|
560
561
|
}
|
|
561
|
-
}),
|
|
562
|
+
}), c());
|
|
562
563
|
} catch (m) {
|
|
563
564
|
console.error("Failed to generate iframe config:", m);
|
|
564
565
|
}
|
|
565
566
|
}, l = () => {
|
|
566
|
-
const m =
|
|
567
|
-
if (!m.iframeConfig || !e)
|
|
567
|
+
const m = r.getState();
|
|
568
|
+
if (console.log("[IframeConfig] createTokenExIframe started."), !m.iframeConfig || !e) {
|
|
569
|
+
console.error(
|
|
570
|
+
"[IframeConfig] Missing iframe config or checkout profile."
|
|
571
|
+
);
|
|
568
572
|
return;
|
|
569
|
-
|
|
570
|
-
|
|
573
|
+
}
|
|
574
|
+
const f = document.getElementById("card-element"), M = document.getElementById("card-cvv-element");
|
|
575
|
+
if (!f || !M)
|
|
571
576
|
throw new Error("Card elements not found in DOM");
|
|
572
|
-
|
|
577
|
+
console.log("[IframeConfig] Creating TokenEx.Iframe instance."), s = new globalThis.TokenEx.Iframe("card-element", {
|
|
573
578
|
...m.iframeConfig,
|
|
574
579
|
placeholder: "1234 1234 1234 1234",
|
|
575
580
|
cvvPlaceholder: "CVC",
|
|
@@ -593,179 +598,154 @@ function Q({
|
|
|
593
598
|
base: `${t.base}; border-radius: 0px 0px ${e.styles.borderRadius}px 0px`
|
|
594
599
|
}
|
|
595
600
|
}
|
|
596
|
-
}),
|
|
597
|
-
|
|
598
|
-
}),
|
|
599
|
-
const { nameOnCard:
|
|
600
|
-
|
|
601
|
-
name:
|
|
602
|
-
cardExpiry:
|
|
601
|
+
}), s.on("load", () => {
|
|
602
|
+
console.log("[IframeConfig] Iframe loaded event received."), r.setState({ loadingIframe: !1 });
|
|
603
|
+
}), s.on("autoCompleteValues", function(y) {
|
|
604
|
+
const { nameOnCard: b, cardExp: C } = y;
|
|
605
|
+
i({
|
|
606
|
+
name: b,
|
|
607
|
+
cardExpiry: C
|
|
603
608
|
});
|
|
604
|
-
}),
|
|
605
|
-
const { isValid:
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
+
}), s.on("validate", function(y) {
|
|
610
|
+
const { isValid: b, isCvvValid: C } = y;
|
|
611
|
+
console.log(
|
|
612
|
+
`[IframeConfig] Validation event: isCardValid=${b}, isCvvValid=${C}`
|
|
613
|
+
), r.setState({
|
|
614
|
+
isCcValid: b,
|
|
615
|
+
isCvvValid: C
|
|
609
616
|
});
|
|
610
|
-
}),
|
|
611
|
-
|
|
612
|
-
}),
|
|
613
|
-
|
|
614
|
-
}),
|
|
615
|
-
|
|
616
|
-
}),
|
|
617
|
-
|
|
618
|
-
}),
|
|
617
|
+
}), s.on("focus", function() {
|
|
618
|
+
r.setState({ isFocused: !0 });
|
|
619
|
+
}), s.on("blur", function() {
|
|
620
|
+
r.setState({ isFocused: !1 });
|
|
621
|
+
}), s.on("cvvFocus", function() {
|
|
622
|
+
r.setState({ isCvvFocused: !0 });
|
|
623
|
+
}), s.on("cvvBlur", function() {
|
|
624
|
+
r.setState({ isCvvFocused: !1 });
|
|
625
|
+
}), s.on(
|
|
619
626
|
"cardTypeChange",
|
|
620
|
-
function({ possibleCardType:
|
|
621
|
-
|
|
627
|
+
function({ possibleCardType: y }) {
|
|
628
|
+
r.setState({ possibleCardType: y });
|
|
622
629
|
}
|
|
623
|
-
),
|
|
630
|
+
), s.load();
|
|
624
631
|
}, c = () => {
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
);
|
|
630
|
-
const v = () => {
|
|
631
|
-
if (m++, m > y) {
|
|
632
|
-
console.error("Failed to find card elements after maximum retries");
|
|
633
|
-
return;
|
|
634
|
-
}
|
|
635
|
-
const p = Math.min(
|
|
636
|
-
Z * Math.pow(J, m - 1),
|
|
637
|
-
W
|
|
632
|
+
const m = r.getState();
|
|
633
|
+
if (console.log("[IframeConfig] initializeIframe started."), !m.iframeConfig || !e) {
|
|
634
|
+
console.error(
|
|
635
|
+
"[IframeConfig] Missing iframe config or checkout profile for initialization."
|
|
638
636
|
);
|
|
639
|
-
setTimeout(() => {
|
|
640
|
-
const C = document.getElementById("card-element"), b = document.getElementById("card-cvv-element");
|
|
641
|
-
if (C && b)
|
|
642
|
-
try {
|
|
643
|
-
l();
|
|
644
|
-
} catch (g) {
|
|
645
|
-
console.error("Failed to create TokenEx iframe:", g);
|
|
646
|
-
}
|
|
647
|
-
else m < y && v();
|
|
648
|
-
}, p);
|
|
649
|
-
};
|
|
650
|
-
v();
|
|
651
|
-
}, d = () => {
|
|
652
|
-
if (!i.getState().iframeConfig || !e)
|
|
653
637
|
return;
|
|
638
|
+
}
|
|
654
639
|
if (!globalThis.TokenEx?.Iframe) {
|
|
655
640
|
console.error("TokenEx script not loaded correctly");
|
|
656
641
|
return;
|
|
657
642
|
}
|
|
658
|
-
const y = document.getElementById("card-element"), v = document.getElementById("card-cvv-element");
|
|
659
|
-
if (!y || !v) {
|
|
660
|
-
c();
|
|
661
|
-
return;
|
|
662
|
-
}
|
|
663
643
|
try {
|
|
664
|
-
l();
|
|
665
|
-
} catch (
|
|
666
|
-
console.error("Failed to create TokenEx iframe:",
|
|
644
|
+
console.log("[IframeConfig] Creating TokenEx iframe..."), l(), console.log("[IframeConfig] TokenEx iframe created successfully");
|
|
645
|
+
} catch (f) {
|
|
646
|
+
console.error("Failed to create TokenEx iframe:", f);
|
|
667
647
|
}
|
|
668
|
-
},
|
|
669
|
-
|
|
670
|
-
},
|
|
671
|
-
|
|
672
|
-
},
|
|
673
|
-
|
|
674
|
-
await m(
|
|
675
|
-
}),
|
|
648
|
+
}, d = async () => {
|
|
649
|
+
o && (console.log("[IframeConfig] Manual initialization triggered."), await n());
|
|
650
|
+
}, u = () => {
|
|
651
|
+
s && (s.remove(), s = null);
|
|
652
|
+
}, p = async (m) => {
|
|
653
|
+
s && (s.on("tokenize", async function(f) {
|
|
654
|
+
await m(f);
|
|
655
|
+
}), s.tokenize());
|
|
676
656
|
};
|
|
677
657
|
return {
|
|
678
|
-
getState:
|
|
679
|
-
subscribe:
|
|
680
|
-
tokenize:
|
|
681
|
-
cleanup:
|
|
682
|
-
initialize:
|
|
658
|
+
getState: r.getState.bind(r),
|
|
659
|
+
subscribe: r.subscribe.bind(r),
|
|
660
|
+
tokenize: p,
|
|
661
|
+
cleanup: u,
|
|
662
|
+
initialize: d
|
|
683
663
|
};
|
|
684
664
|
}
|
|
685
|
-
const
|
|
686
|
-
email:
|
|
687
|
-
cardholderNameLabel:
|
|
688
|
-
cardInformation:
|
|
689
|
-
cardholderNamePlaceholder:
|
|
690
|
-
cardExpiry:
|
|
691
|
-
loading:
|
|
665
|
+
const Q = "E-Mail", ee = "Name des/der Karteninhaber/in", te = "Kartendaten", ie = "Vollständiger Name", ae = "MM / JJ", re = "Das Fenster nicht schließen", se = { pay: "ZAHLEN", submit: "ABSENDEN", getPlan: "MEINEN PLAN ERHALTEN", donate: "spenden", book: "jetzt buchen", order: "jetzt bestellen" }, oe = { emailSuggestion: "Meinten Sie {{email}}?", emailInvalid: "Ihre E-Mail-Adresse ist nicht korrekt", cardExpiryInvalid: "Das Ablaufdatum Ihrer Karte liegt in der Vergangenheit", cardExpiryFormat: "Das Ablaufdatum Ihrer Karte ist unvollständig", cardSecurityFormat: "Der Sicherheitscode Ihrer Karte ist unvollständig", nameRequired: "Gib deinen Namen genau so ein, wie er auf deiner Karte steht", cardNumberInvalid: "Die Kartennummer ist unvollständig" }, ne = {
|
|
666
|
+
email: Q,
|
|
667
|
+
cardholderNameLabel: ee,
|
|
668
|
+
cardInformation: te,
|
|
669
|
+
cardholderNamePlaceholder: ie,
|
|
670
|
+
cardExpiry: ae,
|
|
671
|
+
loading: re,
|
|
692
672
|
buttonTexts: se,
|
|
693
673
|
validation: oe
|
|
694
|
-
},
|
|
695
|
-
email:
|
|
696
|
-
cardholderNameLabel:
|
|
697
|
-
cardInformation:
|
|
698
|
-
cardholderNamePlaceholder:
|
|
699
|
-
cardExpiry:
|
|
700
|
-
loading:
|
|
701
|
-
buttonTexts:
|
|
674
|
+
}, le = "Email", ce = "Cardholder name", de = "Card information", he = "Full name on card", me = "MM / YY", ue = "Do not close the window", pe = { pay: "PAY", submit: "SUBMIT", getPlan: "GET MY PLAN", donate: "DONATE", book: "BOOK NOW", order: "ORDER NOW" }, ge = { emailSuggestion: "Did you mean {{email}}?", emailInvalid: "Your email is not correct", cardExpiryInvalid: "Your card's expiration date is in the past", cardExpiryFormat: "Your card’s expiration date is incomplete", cardSecurityFormat: "Your card’s security code is incomplete", nameRequired: "Please enter the name as it appears on your card", cardNumberInvalid: "Your card number is invalid" }, fe = {
|
|
675
|
+
email: le,
|
|
676
|
+
cardholderNameLabel: ce,
|
|
677
|
+
cardInformation: de,
|
|
678
|
+
cardholderNamePlaceholder: he,
|
|
679
|
+
cardExpiry: me,
|
|
680
|
+
loading: ue,
|
|
681
|
+
buttonTexts: pe,
|
|
702
682
|
validation: ge
|
|
703
|
-
},
|
|
704
|
-
email:
|
|
705
|
-
cardholderNameLabel:
|
|
706
|
-
cardInformation:
|
|
683
|
+
}, ye = "Correo electrónico", ve = "Nombre del titular de la tarjeta", Ee = "Información de la tarjeta", Ce = "Nombre completo en la tarjeta", be = "MM / AA", xe = "Por favor, no cierre esta ventana", Se = { pay: "PAGAR", submit: "ENVIAR", getPlan: "OBTENER MI PLAN", donate: "DONAR", book: "RESERVAR AHORA", order: "ORDENAR AHORA" }, Fe = { emailSuggestion: "¿Quisiste decir {{email}}?", emailInvalid: "Su correo electrónico no es válido", cardExpiryInvalid: "La fecha de vencimiento de la tarjeta ya pasó", cardExpiryFormat: "La fecha de vencimiento de su tarjeta está incompleta", cardSecurityFormat: "El código de seguridad de su tarjeta está incompleto", nameRequired: "Por favor, ingrese el nombre tal como aparece en su tarjeta", cardNumberInvalid: "Su número de tarjeta no es válido" }, we = {
|
|
684
|
+
email: ye,
|
|
685
|
+
cardholderNameLabel: ve,
|
|
686
|
+
cardInformation: Ee,
|
|
707
687
|
cardholderNamePlaceholder: Ce,
|
|
708
|
-
cardExpiry:
|
|
688
|
+
cardExpiry: be,
|
|
709
689
|
loading: xe,
|
|
710
|
-
buttonTexts:
|
|
711
|
-
validation:
|
|
712
|
-
},
|
|
713
|
-
email:
|
|
714
|
-
cardholderNameLabel:
|
|
715
|
-
cardInformation:
|
|
690
|
+
buttonTexts: Se,
|
|
691
|
+
validation: Fe
|
|
692
|
+
}, Le = "E-mail", Me = "Nom du titulaire de la carte", ke = "Informations de la carte", Te = "Nom complet figurant sur la carte", Ie = "MM / AA", ze = "Veuillez ne pas fermer cette fenêtre", Ne = { pay: "PAYER", submit: "ENVOYER", getPlan: "OBTENIR MON PLAN", donate: "FAIRE UN DON", book: "RÉSERVER MAINTENANT", order: "COMMANDER MAINTENANT" }, Pe = { emailSuggestion: "Vouliez-vous dire {{email}}?", emailInvalid: "Votre adresse e-mail n’est pas valide", cardExpiryInvalid: "La date d'expiration de votre carte est dans le passé", cardExpiryFormat: "La date d’expiration de votre carte est incomplète", cardSecurityFormat: "Le code de sécurité de votre carte est incomplet", nameRequired: "Veuillez saisir le nom tel qu’il figure sur votre carte", cardNumberInvalid: "Votre numéro de carte est invalide" }, Ae = {
|
|
693
|
+
email: Le,
|
|
694
|
+
cardholderNameLabel: Me,
|
|
695
|
+
cardInformation: ke,
|
|
716
696
|
cardholderNamePlaceholder: Te,
|
|
717
|
-
cardExpiry:
|
|
718
|
-
loading:
|
|
719
|
-
buttonTexts:
|
|
697
|
+
cardExpiry: Ie,
|
|
698
|
+
loading: ze,
|
|
699
|
+
buttonTexts: Ne,
|
|
720
700
|
validation: Pe
|
|
721
|
-
},
|
|
722
|
-
email:
|
|
723
|
-
cardholderNameLabel:
|
|
724
|
-
cardInformation:
|
|
725
|
-
cardholderNamePlaceholder:
|
|
726
|
-
cardExpiry:
|
|
727
|
-
loading:
|
|
728
|
-
buttonTexts:
|
|
729
|
-
validation:
|
|
730
|
-
},
|
|
731
|
-
email:
|
|
701
|
+
}, De = "Email", Ve = "Nome del titolare della carta", $e = "Informazioni sulla carta", Re = "Nome completo sulla carta", Be = "MM / AA", Oe = "Non chiudere la finestra", He = { pay: "PAGA", submit: "INVIA", getPlan: "OTTIENI IL MIO PIANO", donate: "DONARE", book: "PRENOTA ORA", order: "ORDINA ORA" }, Ke = { emailSuggestion: "Intendevi {{email}}?", emailInvalid: "La tua email non è corretta", cardExpiryInvalid: "La data di scadenza della tua carta è nel passato", cardExpiryFormat: "La data di scadenza della tua carta è incompleta", cardSecurityFormat: "Il codice di sicurezza della tua carta è incompleto", nameRequired: "Inserisci il nome come appare sulla tua carta", cardNumberInvalid: "Il numero della tua carta non è valido" }, je = {
|
|
702
|
+
email: De,
|
|
703
|
+
cardholderNameLabel: Ve,
|
|
704
|
+
cardInformation: $e,
|
|
705
|
+
cardholderNamePlaceholder: Re,
|
|
706
|
+
cardExpiry: Be,
|
|
707
|
+
loading: Oe,
|
|
708
|
+
buttonTexts: He,
|
|
709
|
+
validation: Ke
|
|
710
|
+
}, Ue = "Adres e-mail", qe = "Imię i nazwisko posiadacza karty", Ge = "Informacje o karcie", _e = "Imię i nazwisko na karcie", Ye = "MM / RR", Ze = "Proszę nie zamykać tego okna", Je = { pay: "ZAPŁAĆ", submit: "WYŚLIJ", getPlan: "POBIERZ MÓJ PLAN", donate: "PRZEKAŻ DAROWIZNĘ", book: "ZAREZERWUJ TERAZ", order: "ZAMÓW TERAZ" }, We = { emailSuggestion: "Czy chodziło Ci o {{email}}?", emailInvalid: "Państwa adres e-mail jest nieprawidłowy", cardExpiryInvalid: "Data ważności Państwa karty jest w przeszłości", cardExpiryFormat: "Data ważności Państwa karty jest niekompletna", cardSecurityFormat: "Kod zabezpieczający Państwa karty jest niekompletny", nameRequired: "Proszę wpisać imię i nazwisko tak, jak widnieje na karcie", cardNumberInvalid: "Numer Państwa karty jest nieprawidłowy" }, Xe = {
|
|
711
|
+
email: Ue,
|
|
732
712
|
cardholderNameLabel: qe,
|
|
733
|
-
cardInformation:
|
|
734
|
-
cardholderNamePlaceholder:
|
|
735
|
-
cardExpiry:
|
|
736
|
-
loading:
|
|
737
|
-
buttonTexts:
|
|
738
|
-
validation:
|
|
739
|
-
},
|
|
740
|
-
email:
|
|
741
|
-
cardholderNameLabel:
|
|
742
|
-
cardInformation:
|
|
743
|
-
cardholderNamePlaceholder:
|
|
744
|
-
cardExpiry:
|
|
745
|
-
loading:
|
|
713
|
+
cardInformation: Ge,
|
|
714
|
+
cardholderNamePlaceholder: _e,
|
|
715
|
+
cardExpiry: Ye,
|
|
716
|
+
loading: Ze,
|
|
717
|
+
buttonTexts: Je,
|
|
718
|
+
validation: We
|
|
719
|
+
}, Qe = "E-mail", et = "Nome do titular do cartão", tt = "Informações do cartão", it = "Nome completo no cartão", at = "MM / AA", rt = "Por favor, não feche esta janela", st = { pay: "PAGAR", submit: "ENVIAR", getPlan: "OBTER MEU PLANO", donate: "DOAR", book: "RESERVAR AGORA", order: "FAZER PEDIDO" }, ot = { emailSuggestion: "Você quis dizer {{email}}?", emailInvalid: "O seu endereço de e-mail não é válido", cardExpiryInvalid: "A data de validade do seu cartão está no passado", cardExpiryFormat: "A data de validade do seu cartão está incompleta", cardSecurityFormat: "O código de segurança do seu cartão está incompleto", nameRequired: "Por favor, insira o nome conforme aparece no cartão", cardNumberInvalid: "O número do seu cartão é inválido" }, nt = {
|
|
720
|
+
email: Qe,
|
|
721
|
+
cardholderNameLabel: et,
|
|
722
|
+
cardInformation: tt,
|
|
723
|
+
cardholderNamePlaceholder: it,
|
|
724
|
+
cardExpiry: at,
|
|
725
|
+
loading: rt,
|
|
746
726
|
buttonTexts: st,
|
|
747
727
|
validation: ot
|
|
748
|
-
},
|
|
749
|
-
email:
|
|
750
|
-
cardholderNameLabel:
|
|
751
|
-
cardInformation:
|
|
752
|
-
cardholderNamePlaceholder:
|
|
753
|
-
cardExpiry:
|
|
754
|
-
loading:
|
|
755
|
-
buttonTexts:
|
|
728
|
+
}, lt = "E-posta", ct = "Kart sahibinin adı", dt = "Kart bilgileri", ht = "Kart üzerindeki tam ad", mt = "AA / YY", ut = "Lütfen pencereyi kapatmayın", pt = { pay: "ÖDE", submit: "GÖNDER", getPlan: "PLANIMI AL", donate: "BAĞIŞ YAP", book: "ŞİMDİ REZERVASYON YAP", order: "ŞİMDİ SİPARİŞ VER" }, gt = { emailSuggestion: "{{email}} demek mi istediniz?", emailInvalid: "E-posta adresiniz geçerli değil", cardExpiryInvalid: "Kartınızın son kullanma tarihi geçmiş", cardExpiryFormat: "Kartınızın son kullanma tarihi eksik", cardSecurityFormat: "Kartınızın güvenlik kodu eksik", nameRequired: "Lütfen kart üzerindeki ismi girin", cardNumberInvalid: "Kart numaranız geçersiz" }, ft = {
|
|
729
|
+
email: lt,
|
|
730
|
+
cardholderNameLabel: ct,
|
|
731
|
+
cardInformation: dt,
|
|
732
|
+
cardholderNamePlaceholder: ht,
|
|
733
|
+
cardExpiry: mt,
|
|
734
|
+
loading: ut,
|
|
735
|
+
buttonTexts: pt,
|
|
756
736
|
validation: gt
|
|
757
|
-
},
|
|
758
|
-
en:
|
|
759
|
-
de:
|
|
760
|
-
es:
|
|
761
|
-
fr:
|
|
762
|
-
pl:
|
|
763
|
-
pt:
|
|
764
|
-
tr:
|
|
765
|
-
it:
|
|
737
|
+
}, A = {
|
|
738
|
+
en: fe,
|
|
739
|
+
de: ne,
|
|
740
|
+
es: we,
|
|
741
|
+
fr: Ae,
|
|
742
|
+
pl: Xe,
|
|
743
|
+
pt: nt,
|
|
744
|
+
tr: ft,
|
|
745
|
+
it: je
|
|
766
746
|
// Add other locales here
|
|
767
747
|
};
|
|
768
|
-
class
|
|
748
|
+
class yt {
|
|
769
749
|
locale;
|
|
770
750
|
loadedLocales = /* @__PURE__ */ new Set();
|
|
771
751
|
constructor(e = "en") {
|
|
@@ -778,32 +758,32 @@ class vt {
|
|
|
778
758
|
return this.locale;
|
|
779
759
|
}
|
|
780
760
|
translate(e, t) {
|
|
781
|
-
const
|
|
782
|
-
return !t ||
|
|
761
|
+
const i = this.getNestedTranslation(e);
|
|
762
|
+
return !t || i === e ? i : this.interpolate(i, t);
|
|
783
763
|
}
|
|
784
764
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
785
765
|
getNestedTranslation(e) {
|
|
786
|
-
const t = this.locale in
|
|
787
|
-
return
|
|
766
|
+
const t = this.locale in A ? A[this.locale] : {}, i = this.findNestedValue(t, e);
|
|
767
|
+
return i === void 0 ? e : i;
|
|
788
768
|
}
|
|
789
769
|
findNestedValue(e, t) {
|
|
790
|
-
const
|
|
791
|
-
let
|
|
792
|
-
for (const
|
|
793
|
-
if (
|
|
770
|
+
const i = t.split(".");
|
|
771
|
+
let a = e;
|
|
772
|
+
for (const r of i) {
|
|
773
|
+
if (a == null || !Object.prototype.hasOwnProperty.call(a, r))
|
|
794
774
|
return;
|
|
795
|
-
|
|
775
|
+
a = a[r];
|
|
796
776
|
}
|
|
797
|
-
return typeof
|
|
777
|
+
return typeof a == "string" ? a : void 0;
|
|
798
778
|
}
|
|
799
779
|
interpolate(e, t) {
|
|
800
|
-
return e.replace(/{{(\w+)}}/g, (
|
|
801
|
-
const
|
|
802
|
-
return
|
|
780
|
+
return e.replace(/{{(\w+)}}/g, (i, a) => {
|
|
781
|
+
const r = t[a];
|
|
782
|
+
return r === void 0 ? i : String(r);
|
|
803
783
|
});
|
|
804
784
|
}
|
|
805
785
|
}
|
|
806
|
-
const
|
|
786
|
+
const D = [
|
|
807
787
|
"en",
|
|
808
788
|
"de",
|
|
809
789
|
"es",
|
|
@@ -812,96 +792,96 @@ const A = [
|
|
|
812
792
|
"pt",
|
|
813
793
|
"it",
|
|
814
794
|
"tr"
|
|
815
|
-
],
|
|
816
|
-
function
|
|
817
|
-
const e = new
|
|
818
|
-
const
|
|
819
|
-
return
|
|
795
|
+
], vt = "en";
|
|
796
|
+
function Et(o) {
|
|
797
|
+
const e = new yt(), i = (() => {
|
|
798
|
+
const n = navigator?.language?.split("-")[0]?.toLowerCase();
|
|
799
|
+
return D.includes(n) ? n : vt;
|
|
820
800
|
})();
|
|
821
|
-
e.setLocale(
|
|
822
|
-
const
|
|
823
|
-
locale:
|
|
801
|
+
e.setLocale(i);
|
|
802
|
+
const a = L({
|
|
803
|
+
locale: i,
|
|
824
804
|
translationService: e
|
|
825
805
|
});
|
|
826
806
|
return {
|
|
827
|
-
store:
|
|
828
|
-
translate: (
|
|
829
|
-
setLocale: (
|
|
830
|
-
|
|
807
|
+
store: a,
|
|
808
|
+
translate: (n, l) => a.getState().translationService.translate(n, l),
|
|
809
|
+
setLocale: (n) => {
|
|
810
|
+
D.includes(n) && (a.getState().translationService.setLocale(n), a.setState({ locale: n }));
|
|
831
811
|
},
|
|
832
|
-
getLocale: () =>
|
|
833
|
-
subscribe:
|
|
812
|
+
getLocale: () => a.getValue("locale"),
|
|
813
|
+
subscribe: a.subscribe.bind(a)
|
|
834
814
|
};
|
|
835
815
|
}
|
|
836
|
-
const Ct =
|
|
837
|
-
const { translate:
|
|
816
|
+
const Ct = Et(), z = () => {
|
|
817
|
+
const { translate: o, getLocale: e, setLocale: t, subscribe: i } = Ct;
|
|
838
818
|
return {
|
|
839
|
-
t:
|
|
840
|
-
translate:
|
|
819
|
+
t: o,
|
|
820
|
+
translate: o,
|
|
841
821
|
locale: e(),
|
|
842
822
|
setLocale: t,
|
|
843
|
-
subscribe:
|
|
823
|
+
subscribe: i
|
|
844
824
|
};
|
|
845
|
-
},
|
|
846
|
-
if (!
|
|
825
|
+
}, bt = ({ fontFamily: o }) => {
|
|
826
|
+
if (!o)
|
|
847
827
|
return { cleanup: () => {
|
|
848
828
|
} };
|
|
849
|
-
const e =
|
|
850
|
-
(
|
|
851
|
-
),
|
|
852
|
-
|
|
853
|
-
const
|
|
854
|
-
(
|
|
829
|
+
const e = o.replace(/\s+/g, "+"), t = `https://fonts.googleapis.com/css2?family=${e}:wght@400;700&display=swap`, i = [...document.head.querySelectorAll("link")].filter(
|
|
830
|
+
(n) => n.href.includes("fonts.googleapis.com/css2") && n.rel === "stylesheet"
|
|
831
|
+
), a = document.createElement("link");
|
|
832
|
+
a.rel = "stylesheet", a.href = t;
|
|
833
|
+
const r = i.find(
|
|
834
|
+
(n) => n.href.includes(`family=${e}`)
|
|
855
835
|
);
|
|
856
|
-
if (
|
|
857
|
-
|
|
858
|
-
else if (
|
|
859
|
-
const
|
|
836
|
+
if (r)
|
|
837
|
+
r.href = t;
|
|
838
|
+
else if (i.length > 0) {
|
|
839
|
+
const n = i.at(
|
|
860
840
|
-1
|
|
861
841
|
);
|
|
862
|
-
|
|
842
|
+
n?.nextSibling ? document.head.insertBefore(a, n.nextSibling) : document.head.appendChild(a);
|
|
863
843
|
} else
|
|
864
|
-
document.head.appendChild(
|
|
844
|
+
document.head.appendChild(a);
|
|
865
845
|
return { cleanup: () => {
|
|
866
|
-
document.head.contains(
|
|
846
|
+
document.head.contains(a) && document.head.removeChild(a);
|
|
867
847
|
} };
|
|
868
848
|
}, xt = ({
|
|
869
|
-
scriptSrc:
|
|
870
|
-
async: e = !
|
|
849
|
+
scriptSrc: o,
|
|
850
|
+
async: e = !0
|
|
871
851
|
}) => {
|
|
872
|
-
if (!
|
|
852
|
+
if (!o)
|
|
873
853
|
return {
|
|
874
854
|
cleanup: () => {
|
|
875
855
|
},
|
|
876
856
|
isLoaded: Promise.resolve(!1)
|
|
877
857
|
};
|
|
878
858
|
if ([...document.head.querySelectorAll("script")].filter(
|
|
879
|
-
(
|
|
859
|
+
(s) => s.src === o
|
|
880
860
|
).length > 0)
|
|
881
861
|
return {
|
|
882
862
|
cleanup: () => {
|
|
883
863
|
},
|
|
884
864
|
isLoaded: Promise.resolve(!0)
|
|
885
865
|
};
|
|
886
|
-
const
|
|
887
|
-
|
|
888
|
-
const
|
|
889
|
-
|
|
890
|
-
console.error(`Failed to load script: ${
|
|
866
|
+
const i = document.createElement("script");
|
|
867
|
+
i.src = o, i.async = e;
|
|
868
|
+
const a = new Promise((s, n) => {
|
|
869
|
+
i.onload = () => s(!0), i.onerror = () => {
|
|
870
|
+
console.error(`Failed to load script: ${o}`), n(new Error(`Failed to load script: ${o}`));
|
|
891
871
|
};
|
|
892
872
|
});
|
|
893
|
-
return document.head.appendChild(
|
|
873
|
+
return document.head.appendChild(i), {
|
|
894
874
|
cleanup: () => {
|
|
895
|
-
document.head.contains(
|
|
875
|
+
document.head.contains(i) && document.head.removeChild(i);
|
|
896
876
|
},
|
|
897
|
-
isLoaded:
|
|
877
|
+
isLoaded: a
|
|
898
878
|
};
|
|
899
|
-
}, w = (
|
|
900
|
-
const
|
|
901
|
-
return `${
|
|
879
|
+
}, w = (o) => Object.entries(o).map(([e, t]) => {
|
|
880
|
+
const i = e.replace(/([A-Z])/g, "-$1").toLowerCase(), a = typeof t == "number" ? `${t}px` : t;
|
|
881
|
+
return `${i}: ${a}`;
|
|
902
882
|
}).join("; ");
|
|
903
|
-
function
|
|
904
|
-
if (!
|
|
883
|
+
function St(o) {
|
|
884
|
+
if (!o)
|
|
905
885
|
return {
|
|
906
886
|
formContainerStyle: {},
|
|
907
887
|
baseStyles: {},
|
|
@@ -917,39 +897,40 @@ function Ft(s) {
|
|
|
917
897
|
};
|
|
918
898
|
const e = {
|
|
919
899
|
opacity: "1",
|
|
920
|
-
|
|
900
|
+
backgroundColor: "transparent",
|
|
901
|
+
display: "block",
|
|
921
902
|
border: "none",
|
|
922
903
|
outline: "none",
|
|
923
|
-
fontSize: `${
|
|
904
|
+
fontSize: `${o.styles.fontSize}px`,
|
|
924
905
|
lineHeight: 30,
|
|
925
906
|
boxSizing: "border-box",
|
|
926
907
|
padding: "0px 12px",
|
|
927
908
|
height: 36,
|
|
928
909
|
width: "100%",
|
|
929
|
-
fontFamily: `${
|
|
910
|
+
fontFamily: `${o.styles.fontFamily}, sans-serif`
|
|
930
911
|
}, t = {
|
|
931
912
|
color: "#717173",
|
|
932
913
|
opacity: "0.3",
|
|
933
|
-
fontFamily: `${
|
|
934
|
-
},
|
|
914
|
+
fontFamily: `${o.styles.fontFamily}, sans-serif`
|
|
915
|
+
}, i = {
|
|
935
916
|
color: "#dc2727"
|
|
917
|
+
}, a = {
|
|
918
|
+
outline: "none"
|
|
936
919
|
}, r = {
|
|
937
|
-
|
|
938
|
-
},
|
|
939
|
-
fontFamily: `${s.styles.fontFamily}, sans-serif`
|
|
940
|
-
}, n = {
|
|
920
|
+
fontFamily: `${o.styles.fontFamily}, sans-serif`
|
|
921
|
+
}, s = {
|
|
941
922
|
base: w(e),
|
|
942
|
-
error: w(
|
|
943
|
-
focus: w(
|
|
923
|
+
error: w(i),
|
|
924
|
+
focus: w(a),
|
|
944
925
|
placeholder: w(t)
|
|
945
926
|
};
|
|
946
927
|
return {
|
|
947
|
-
formContainerStyle:
|
|
928
|
+
formContainerStyle: r,
|
|
948
929
|
baseStyles: e,
|
|
949
930
|
placeholderStyles: t,
|
|
950
|
-
errorStyles:
|
|
951
|
-
focusStyles:
|
|
952
|
-
inputStyles:
|
|
931
|
+
errorStyles: i,
|
|
932
|
+
focusStyles: a,
|
|
933
|
+
inputStyles: s
|
|
953
934
|
};
|
|
954
935
|
}
|
|
955
936
|
class h {
|
|
@@ -962,9 +943,9 @@ class h {
|
|
|
962
943
|
* @param classNames Optional CSS class names to add
|
|
963
944
|
* @param attributes Optional attributes to set on the element
|
|
964
945
|
*/
|
|
965
|
-
constructor(e, t = [],
|
|
966
|
-
this.element = document.createElement(e), t.length > 0 && this.addClass(...t), Object.entries(
|
|
967
|
-
this.setAttribute(
|
|
946
|
+
constructor(e, t = [], i = {}) {
|
|
947
|
+
this.element = document.createElement(e), t.length > 0 && this.addClass(...t), Object.entries(i).forEach(([a, r]) => {
|
|
948
|
+
this.setAttribute(a, r);
|
|
968
949
|
});
|
|
969
950
|
}
|
|
970
951
|
/**
|
|
@@ -1019,14 +1000,14 @@ class h {
|
|
|
1019
1000
|
/**
|
|
1020
1001
|
* Add an event listener to the element
|
|
1021
1002
|
*/
|
|
1022
|
-
addEventListener(e, t,
|
|
1023
|
-
return this.element.addEventListener(e, t,
|
|
1003
|
+
addEventListener(e, t, i) {
|
|
1004
|
+
return this.element.addEventListener(e, t, i), this.eventListeners.push({ type: e, listener: t }), this;
|
|
1024
1005
|
}
|
|
1025
1006
|
/**
|
|
1026
1007
|
* Remove an event listener from the element
|
|
1027
1008
|
*/
|
|
1028
|
-
removeEventListener(e, t,
|
|
1029
|
-
return this.element.removeEventListener(e, t,
|
|
1009
|
+
removeEventListener(e, t, i) {
|
|
1010
|
+
return this.element.removeEventListener(e, t, i), this;
|
|
1030
1011
|
}
|
|
1031
1012
|
/**
|
|
1032
1013
|
* Hide this component
|
|
@@ -1049,7 +1030,7 @@ class h {
|
|
|
1049
1030
|
}), this.eventListeners = [], this.children.forEach((e) => e.destroy()), this.children = [], this.element.parentNode && this.element.parentNode.removeChild(this.element);
|
|
1050
1031
|
}
|
|
1051
1032
|
}
|
|
1052
|
-
class
|
|
1033
|
+
class x {
|
|
1053
1034
|
/**
|
|
1054
1035
|
* Create a div element
|
|
1055
1036
|
*/
|
|
@@ -1065,27 +1046,27 @@ class S {
|
|
|
1065
1046
|
/**
|
|
1066
1047
|
* Create a button element
|
|
1067
1048
|
*/
|
|
1068
|
-
static createButton(e, t = [],
|
|
1069
|
-
const
|
|
1070
|
-
return
|
|
1049
|
+
static createButton(e, t = [], i = {}) {
|
|
1050
|
+
const a = new h("button", t, i);
|
|
1051
|
+
return a.setText(e), a;
|
|
1071
1052
|
}
|
|
1072
1053
|
/**
|
|
1073
1054
|
* Create an input element
|
|
1074
1055
|
*/
|
|
1075
|
-
static createInput(e, t = [],
|
|
1076
|
-
const
|
|
1077
|
-
return new h("input", t,
|
|
1056
|
+
static createInput(e, t = [], i = {}) {
|
|
1057
|
+
const a = { type: e, ...i };
|
|
1058
|
+
return new h("input", t, a);
|
|
1078
1059
|
}
|
|
1079
1060
|
/**
|
|
1080
1061
|
* Create a text input
|
|
1081
1062
|
*/
|
|
1082
|
-
static createTextInput(e = "", t = [],
|
|
1083
|
-
const
|
|
1063
|
+
static createTextInput(e = "", t = [], i = {}) {
|
|
1064
|
+
const a = {
|
|
1084
1065
|
type: "text",
|
|
1085
1066
|
placeholder: e,
|
|
1086
|
-
...
|
|
1067
|
+
...i
|
|
1087
1068
|
};
|
|
1088
|
-
return new h("input", t,
|
|
1069
|
+
return new h("input", t, a);
|
|
1089
1070
|
}
|
|
1090
1071
|
/**
|
|
1091
1072
|
* Create a form element
|
|
@@ -1096,47 +1077,47 @@ class S {
|
|
|
1096
1077
|
/**
|
|
1097
1078
|
* Create a label element
|
|
1098
1079
|
*/
|
|
1099
|
-
static createLabel(e, t = "",
|
|
1100
|
-
const
|
|
1101
|
-
return
|
|
1080
|
+
static createLabel(e, t = "", i = [], a = {}) {
|
|
1081
|
+
const r = t ? { for: t, ...a } : a, s = new h("label", i, r);
|
|
1082
|
+
return s.setText(e), s;
|
|
1102
1083
|
}
|
|
1103
1084
|
/**
|
|
1104
1085
|
* Create a select element
|
|
1105
1086
|
*/
|
|
1106
|
-
static createSelect(e, t = [],
|
|
1107
|
-
const
|
|
1108
|
-
return e.forEach((
|
|
1109
|
-
const
|
|
1110
|
-
|
|
1111
|
-
}),
|
|
1087
|
+
static createSelect(e, t = [], i = {}) {
|
|
1088
|
+
const a = new h("select", t, i);
|
|
1089
|
+
return e.forEach((r) => {
|
|
1090
|
+
const s = document.createElement("option");
|
|
1091
|
+
s.value = r.value, s.textContent = r.text, r.selected && (s.selected = !0), a.getElement().appendChild(s);
|
|
1092
|
+
}), a;
|
|
1112
1093
|
}
|
|
1113
1094
|
/**
|
|
1114
1095
|
* Create an image element
|
|
1115
1096
|
*/
|
|
1116
|
-
static createImage(e, t = "",
|
|
1117
|
-
const
|
|
1118
|
-
return new h("img",
|
|
1097
|
+
static createImage(e, t = "", i = [], a = {}) {
|
|
1098
|
+
const r = { src: e, alt: t, ...a };
|
|
1099
|
+
return new h("img", i, r);
|
|
1119
1100
|
}
|
|
1120
1101
|
}
|
|
1121
|
-
class
|
|
1102
|
+
class Ft extends h {
|
|
1122
1103
|
messageComponent;
|
|
1123
1104
|
constructor(e) {
|
|
1124
1105
|
super("div", []);
|
|
1125
|
-
const t =
|
|
1106
|
+
const t = x.createDiv(["error-alert"], {
|
|
1126
1107
|
role: "alert",
|
|
1127
1108
|
"aria-live": "polite"
|
|
1128
|
-
}),
|
|
1109
|
+
}), i = x.createDiv(["error-alert-content"]), a = x.createDiv([
|
|
1129
1110
|
"error-alert-icon-container"
|
|
1130
1111
|
]);
|
|
1131
|
-
|
|
1132
|
-
const
|
|
1112
|
+
a.getElement().innerHTML = this.createAlertCircleSVG();
|
|
1113
|
+
const r = x.createDiv([
|
|
1133
1114
|
"error-alert-text-container"
|
|
1134
|
-
]),
|
|
1115
|
+
]), s = new h("h4", [
|
|
1135
1116
|
"error-alert-title"
|
|
1136
1117
|
]);
|
|
1137
|
-
|
|
1118
|
+
s.setText("Checkout Error"), this.messageComponent = new h("p", [
|
|
1138
1119
|
"error-alert-message"
|
|
1139
|
-
]), this.messageComponent.setText(e.message || "Bad request"),
|
|
1120
|
+
]), this.messageComponent.setText(e.message || "Bad request"), r.appendChild(s), r.appendChild(this.messageComponent), i.appendChild(a), i.appendChild(r), t.appendChild(i), this.appendChild(t);
|
|
1140
1121
|
}
|
|
1141
1122
|
createAlertCircleSVG() {
|
|
1142
1123
|
return `
|
|
@@ -1161,29 +1142,36 @@ class wt extends h {
|
|
|
1161
1142
|
return this.messageComponent.setText(e), this;
|
|
1162
1143
|
}
|
|
1163
1144
|
}
|
|
1164
|
-
class
|
|
1145
|
+
class V extends h {
|
|
1165
1146
|
titleElement;
|
|
1166
1147
|
constructor(e = {}) {
|
|
1167
1148
|
super("div", ["blur-bg"]);
|
|
1168
|
-
const t =
|
|
1149
|
+
const t = x.createDiv(["loader"]);
|
|
1169
1150
|
this.titleElement = new h("h3", ["title"]), this.titleElement.setText(e.text || ""), this.appendChild(t), this.appendChild(this.titleElement);
|
|
1170
1151
|
}
|
|
1171
1152
|
setText(e) {
|
|
1172
1153
|
return this.titleElement.setText(e), this;
|
|
1173
1154
|
}
|
|
1174
1155
|
}
|
|
1175
|
-
class
|
|
1156
|
+
class E extends h {
|
|
1157
|
+
span;
|
|
1176
1158
|
constructor(e) {
|
|
1177
|
-
super("div", []);
|
|
1178
|
-
const t = document.createElement("span");
|
|
1179
|
-
t.className = "form-helper-text", t.textContent = e.text || "", this.getElement().appendChild(t);
|
|
1159
|
+
super("div", []), this.span = document.createElement("span"), this.span.className = "form-helper-text", e.visible === !1 && this.span.classList.add("form-helper-text-hidden"), this.span.textContent = e.text || "", this.getElement().appendChild(this.span);
|
|
1180
1160
|
}
|
|
1181
1161
|
setText(e) {
|
|
1182
|
-
|
|
1183
|
-
|
|
1162
|
+
return this.span && (this.span.textContent = e), this;
|
|
1163
|
+
}
|
|
1164
|
+
toggleVisibility(e) {
|
|
1165
|
+
return e ? this.showMessage() : this.hideMessage(), this;
|
|
1166
|
+
}
|
|
1167
|
+
showMessage() {
|
|
1168
|
+
return this.span && this.span.classList.remove("form-helper-text-hidden"), this;
|
|
1169
|
+
}
|
|
1170
|
+
hideMessage() {
|
|
1171
|
+
return this.span && this.span.classList.add("form-helper-text-hidden"), this;
|
|
1184
1172
|
}
|
|
1185
1173
|
}
|
|
1186
|
-
class
|
|
1174
|
+
class wt extends h {
|
|
1187
1175
|
constructor(e) {
|
|
1188
1176
|
super("label", ["input-label"], {
|
|
1189
1177
|
for: e.id
|
|
@@ -1192,12 +1180,12 @@ class Lt extends h {
|
|
|
1192
1180
|
t.style.fontFamily = "inherit", t.style.color = e.styles.color, t.style.fontSize = `${e.styles.fontSize}px`;
|
|
1193
1181
|
}
|
|
1194
1182
|
}
|
|
1195
|
-
class
|
|
1183
|
+
class N extends h {
|
|
1196
1184
|
inputElement;
|
|
1197
1185
|
helperText = null;
|
|
1198
1186
|
constructor(e) {
|
|
1199
1187
|
if (super("div", ["input-wrapper"]), e.label && e.styles) {
|
|
1200
|
-
const
|
|
1188
|
+
const i = new wt({
|
|
1201
1189
|
styles: {
|
|
1202
1190
|
color: e.styles.color,
|
|
1203
1191
|
fontSize: e.styles.fontSize
|
|
@@ -1205,22 +1193,25 @@ class T extends h {
|
|
|
1205
1193
|
label: e.label,
|
|
1206
1194
|
id: e.name
|
|
1207
1195
|
});
|
|
1208
|
-
this.appendChild(
|
|
1196
|
+
this.appendChild(i);
|
|
1209
1197
|
}
|
|
1210
1198
|
const t = {
|
|
1211
1199
|
id: e.name,
|
|
1212
1200
|
name: e.name,
|
|
1213
1201
|
class: `form-input ${e.error ? "form-input-error" : ""}`
|
|
1214
1202
|
};
|
|
1215
|
-
if (e.placeholder && (t.placeholder = e.placeholder), e.value && (t.value = e.value), e.required && (t.required = String(e.required)), e.disabled && (t.disabled = String(e.disabled)), e.autocomplete && (t.autocomplete = e.autocomplete), this.inputElement =
|
|
1203
|
+
if (e.placeholder && (t.placeholder = e.placeholder), e.value && (t.value = e.value), e.required && (t.required = String(e.required)), e.disabled && (t.disabled = String(e.disabled)), e.autocomplete && (t.autocomplete = e.autocomplete), this.inputElement = x.createInput(
|
|
1216
1204
|
e.type || "text",
|
|
1217
1205
|
[],
|
|
1218
1206
|
t
|
|
1219
1207
|
), e.styles) {
|
|
1220
|
-
const
|
|
1221
|
-
|
|
1208
|
+
const i = this.inputElement.getElement();
|
|
1209
|
+
i.style.fontFamily = `"${e.styles.fontFamily}", sans-serif`, i.style.color = e.styles.color, i.style.fontSize = `${e.styles.fontSize}px`, i.style.borderRadius = e.styles.borderRadius;
|
|
1222
1210
|
}
|
|
1223
|
-
e.onChange && this.inputElement.getElement().addEventListener("input", e.onChange), this.getElement().appendChild(this.inputElement.getElement()), e.error
|
|
1211
|
+
e.onChange && this.inputElement.getElement().addEventListener("input", e.onChange), this.getElement().appendChild(this.inputElement.getElement()), e.error ? (this.helperText = new E({
|
|
1212
|
+
text: e.errorMsg,
|
|
1213
|
+
visible: !0
|
|
1214
|
+
}), this.appendChild(this.helperText)) : (this.helperText = new E({ text: "", visible: !1 }), this.appendChild(this.helperText));
|
|
1224
1215
|
}
|
|
1225
1216
|
getValue() {
|
|
1226
1217
|
return this.inputElement.getElement().value;
|
|
@@ -1229,45 +1220,45 @@ class T extends h {
|
|
|
1229
1220
|
return this.inputElement.getElement().value = e, this;
|
|
1230
1221
|
}
|
|
1231
1222
|
setError(e, t) {
|
|
1232
|
-
const
|
|
1233
|
-
return e ? (
|
|
1223
|
+
const i = this.inputElement.getElement();
|
|
1224
|
+
return e ? (i.classList.add("form-input-error"), !this.helperText && t ? (this.helperText = new E({ text: t }), this.appendChild(this.helperText)) : this.helperText && t ? this.helperText.setText(t).toggleVisibility(!0) : this.helperText && this.helperText.toggleVisibility(!0)) : (i.classList.remove("form-input-error"), this.helperText && this.helperText.toggleVisibility(!1)), this;
|
|
1234
1225
|
}
|
|
1235
|
-
addEventListener(e, t,
|
|
1236
|
-
return this.inputElement.getElement().addEventListener(e, t,
|
|
1226
|
+
addEventListener(e, t, i) {
|
|
1227
|
+
return this.inputElement.getElement().addEventListener(e, t, i), this;
|
|
1237
1228
|
}
|
|
1238
1229
|
}
|
|
1239
|
-
class
|
|
1230
|
+
class Lt {
|
|
1240
1231
|
input;
|
|
1241
1232
|
constructor(e) {
|
|
1242
1233
|
const {
|
|
1243
1234
|
value: t,
|
|
1244
|
-
onChange:
|
|
1245
|
-
onBlur:
|
|
1246
|
-
error:
|
|
1247
|
-
errorMsg:
|
|
1248
|
-
checkoutProfile:
|
|
1235
|
+
onChange: i,
|
|
1236
|
+
onBlur: a,
|
|
1237
|
+
error: r,
|
|
1238
|
+
errorMsg: s,
|
|
1239
|
+
checkoutProfile: n,
|
|
1249
1240
|
translationFunc: l,
|
|
1250
1241
|
autocomplete: c = "cc-name"
|
|
1251
1242
|
} = e;
|
|
1252
|
-
this.input = new
|
|
1243
|
+
this.input = new N({
|
|
1253
1244
|
name: "name",
|
|
1254
1245
|
label: l("cardholderNameLabel"),
|
|
1255
|
-
error:
|
|
1256
|
-
errorMsg:
|
|
1246
|
+
error: r,
|
|
1247
|
+
errorMsg: s,
|
|
1257
1248
|
styles: {
|
|
1258
|
-
color:
|
|
1259
|
-
borderRadius: `${
|
|
1260
|
-
fontSize:
|
|
1261
|
-
fontFamily:
|
|
1249
|
+
color: n.styles.textColor,
|
|
1250
|
+
borderRadius: `${n.styles.borderRadius}px`,
|
|
1251
|
+
fontSize: n.styles.fontSize,
|
|
1252
|
+
fontFamily: n.styles.fontFamily
|
|
1262
1253
|
},
|
|
1263
1254
|
placeholder: l("cardholderNamePlaceholder"),
|
|
1264
1255
|
value: t,
|
|
1265
1256
|
autocomplete: c,
|
|
1266
1257
|
onChange: (d) => {
|
|
1267
|
-
this.trim(),
|
|
1258
|
+
this.trim(), i(d);
|
|
1268
1259
|
}
|
|
1269
1260
|
}), this.input.addEventListener("blur", (d) => {
|
|
1270
|
-
|
|
1261
|
+
a(d);
|
|
1271
1262
|
});
|
|
1272
1263
|
}
|
|
1273
1264
|
getValue() {
|
|
@@ -1290,13 +1281,13 @@ class Mt {
|
|
|
1290
1281
|
return this.input.appendTo(e), this;
|
|
1291
1282
|
}
|
|
1292
1283
|
}
|
|
1293
|
-
class
|
|
1284
|
+
class Mt extends h {
|
|
1294
1285
|
constructor(e) {
|
|
1295
1286
|
super("div", []);
|
|
1296
1287
|
const t = document.createElement("div");
|
|
1297
1288
|
t.className = e.isLoading ? "loading" : "", t.style.borderRadius = `0px 0px ${e.styles.borderRadius}px 0px`;
|
|
1298
|
-
const
|
|
1299
|
-
|
|
1289
|
+
const i = document.createElement("div");
|
|
1290
|
+
i.id = "card-cvv-element", i.className = `card-element ${e.isFocused ? "card-element-focus" : ""}`, i.style.zIndex = e.isFocused ? "2" : "0", t.appendChild(i), this.getElement().appendChild(t);
|
|
1300
1291
|
}
|
|
1301
1292
|
setFocused(e) {
|
|
1302
1293
|
const t = this.getElement().querySelector("#card-cvv-element");
|
|
@@ -1307,50 +1298,50 @@ class kt extends h {
|
|
|
1307
1298
|
return t && (e ? t.classList.add("loading") : t.classList.remove("loading")), this;
|
|
1308
1299
|
}
|
|
1309
1300
|
}
|
|
1310
|
-
const It = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='iso-8859-1'?%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Generator:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20height='30px'%20width='30px'%20version='1.1'%20id='Capa_1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%20512%20512'%20xml:space='preserve'%3e%3cpath%20style='fill:%23306FC5;'%20d='M512,402.281c0,16.716-13.55,30.267-30.265,30.267H30.265C13.55,432.549,0,418.997,0,402.281V109.717%20c0-16.715,13.55-30.266,30.265-30.266h451.47c16.716,0,30.265,13.551,30.265,30.266V402.281L512,402.281z'/%3e%3cpath%20style='opacity:0.15;fill:%23202121;enable-background:new%20;'%20d='M21.517,402.281V109.717%20c0-16.715,13.552-30.266,30.267-30.266h-21.52C13.55,79.451,0,93.001,0,109.717v292.565c0,16.716,13.55,30.267,30.265,30.267h21.52%20C35.07,432.549,21.517,418.997,21.517,402.281z'/%3e%3cg%3e%3cpolygon%20style='fill:%23FFFFFF;'%20points='74.59,220.748%2089.888,220.748%2082.241,201.278%20'/%3e%3cpolygon%20style='fill:%23FFFFFF;'%20points='155.946,286.107%20155.946,295.148%20181.675,295.148%20181.675,304.885%20155.946,304.885%20155.946,315.318%20184.455,315.318%20197.666,300.712%20185.151,286.107%20'/%3e%3cpolygon%20style='fill:%23FFFFFF;'%20points='356.898,201.278%20348.553,220.748%20364.548,220.748%20'/%3e%3cpolygon%20style='fill:%23FFFFFF;'%20points='230.348,320.875%20230.348,281.241%20212.268,300.712%20'/%3e%3cpath%20style='fill:%23FFFFFF;'%20d='M264.42,292.368c-0.696-4.172-3.48-6.261-7.654-6.261h-14.599v12.516h15.299%20C261.637,298.624,264.42,296.539,264.42,292.368z'/%3e%3cpath%20style='fill:%23FFFFFF;'%20d='M313.09,297.236c1.391-0.697,2.089-2.785,2.089-4.867c0.696-2.779-0.698-4.172-2.089-4.868%20c-1.387-0.696-3.476-0.696-5.559-0.696h-13.91v11.127h13.909C309.613,297.932,311.702,297.932,313.09,297.236z'/%3e%3cpath%20style='fill:%23FFFFFF;'%20d='M413.217,183.198v8.344l-4.169-8.344H376.37v8.344l-4.174-8.344h-44.502%20c-7.648,0-13.909,1.392-19.469,4.173v-4.173h-31.289v0.696v3.477c-3.476-2.78-7.648-4.173-13.211-4.173h-111.95l-7.652,17.384%20l-7.647-17.384h-25.031h-10.431v8.344l-3.477-8.344h-0.696H66.942l-13.909,32.68L37.042,251.34l-0.294,0.697h0.294h35.463h0.444%20l0.252-0.697l4.174-10.428h9.039l4.172,11.125h40.326v-0.697v-7.647l3.479,8.343h20.163l3.475-8.343v7.647v0.697h15.993h79.965%20h0.696v-18.08h1.394c1.389,0,1.389,0,1.389,2.087v15.297h50.065v-4.172c4.172,2.089,10.426,4.172,18.771,4.172h20.863l4.172-11.123%20h9.732l4.172,11.123h40.328v-6.952v-3.476l6.261,10.428h1.387h0.698h30.595v-68.143h-31.291l0,0H413.217z%20M177.501,241.609h-6.955%20h-4.171v-4.169v-34.076l-0.696,1.595v-0.019l-16.176,36.669h-0.512h-3.719h-6.017l-16.687-38.245v38.245h-23.64l-4.867-10.43%20H70.417l-4.868,10.43H53.326l20.57-48.675h17.382l19.469,46.587v-46.587h4.171h14.251l0.328,0.697h0.024l8.773,19.094l6.3,14.306%20l0.223-0.721l13.906-33.375H177.5v48.674H177.501L177.501,241.609z%20M225.481,203.364h-27.119v9.039h26.423v9.734h-26.423v9.738%20h27.119v10.427h-38.939v-49.367h38.939V203.364L225.481,203.364z%20M275.076,221.294c0.018,0.016,0.041,0.027,0.063,0.042%20c0.263,0.278,0.488,0.557,0.68,0.824c1.332,1.746,2.409,4.343,2.463,8.151c0.004,0.066,0.007,0.131,0.011,0.197%20c0,0.038,0.007,0.071,0.007,0.11c0,0.022-0.002,0.039-0.002,0.06c0.016,0.383,0.026,0.774,0.026,1.197v9.735h-10.428v-5.565%20c0-2.781,0-6.954-2.089-9.735c-0.657-0.657-1.322-1.09-2.046-1.398c-1.042-0.675-3.017-0.686-6.295-0.686h-12.52v17.384h-11.818%20v-48.675h26.425c6.254,0,10.428,0,13.906,2.086c3.407,2.046,5.465,5.439,5.543,10.812c-0.161,7.4-4.911,11.46-8.326,12.829%20C270.676,218.662,272.996,219.129,275.076,221.294z%20M298.491,241.609h-11.822v-48.675h11.822V241.609z%20M434.083,241.609h-15.3%20l-22.25-36.855v30.595l-0.073-0.072v6.362h-11.747v-0.029h-11.822l-4.172-10.43H344.38l-4.172,11.123h-13.211%20c-5.559,0-12.517-1.389-16.687-5.561c-4.172-4.172-6.256-9.735-6.256-18.773c0-6.953,1.389-13.911,6.256-19.472%20c3.474-4.175,9.735-5.562,17.382-5.562h11.128v10.429h-11.128c-4.172,0-6.254,0.693-9.041,2.783%20c-2.082,2.085-3.474,6.256-3.474,11.123c0,5.564,0.696,9.04,3.474,11.821c2.091,2.089,4.87,2.785,8.346,2.785h4.867l15.991-38.243%20h6.957h10.428l19.472,46.587v-2.376v-15.705v-1.389v-27.116h17.382l20.161,34.07v-34.07h11.826v47.977h0.002L434.083,241.609%20L434.083,241.609z'/%3e%3cpath%20style='fill:%23FFFFFF;'%20d='M265.161,213.207c0.203-0.217,0.387-0.463,0.543-0.745c0.63-0.997,1.352-2.793,0.963-5.244%20c-0.016-0.225-0.057-0.433-0.105-0.634c-0.013-0.056-0.011-0.105-0.026-0.161l-0.007,0.001c-0.346-1.191-1.229-1.923-2.11-2.367%20c-1.394-0.693-3.48-0.693-5.565-0.693h-13.909v11.127h13.909c2.085,0,4.172,0,5.565-0.697c0.209-0.106,0.395-0.25,0.574-0.413%20l0.002,0.009C264.996,213.389,265.067,213.315,265.161,213.207z'/%3e%3cpath%20style='fill:%23FFFFFF;'%20d='M475.105,311.144c0-4.867-1.389-9.736-3.474-13.212v-31.289h-0.032v-2.089c0,0-29.145,0-33.483,0%20c-4.336,0-9.598,4.171-9.598,4.171v-4.171h-31.984c-4.87,0-11.124,1.392-13.909,4.171v-4.171h-57.016v2.089v2.081%20c-4.169-3.474-11.824-4.171-15.298-4.171h-37.549v2.089v2.081c-3.476-3.474-11.824-4.171-15.998-4.171H215.05l-9.737,10.431%20l-9.04-10.431h-2.911h-4.737h-54.93v2.089v5.493v62.651h61.19l10.054-10.057l8.715,10.057h0.698h35.258h1.598h0.696h0.692v-6.953%20v-9.039h3.479c4.863,0,11.124,0,15.991-2.089v17.382v1.394h31.291v-1.394V317.4h1.387c2.089,0,2.089,0,2.089,2.086v14.6v1.394%20h94.563c6.263,0,12.517-1.394,15.993-4.175v2.781v1.394h29.902c6.254,0,12.517-0.695,16.689-3.478%20c6.402-3.841,10.437-10.64,11.037-18.749c0.028-0.24,0.063-0.48,0.085-0.721l-0.041-0.039%20C475.087,312.043,475.105,311.598,475.105,311.144z%20M256.076,306.973h-13.91v2.081v4.174v4.173v7.649h-22.855l-13.302-15.299%20l-0.046,0.051l-0.65-0.748l-15.297,15.996h-44.501v-48.673h45.197l12.348,13.525l2.596,2.832l0.352-0.365l14.604-15.991h36.852%20c7.152,0,15.161,1.765,18.196,9.042c0.365,1.441,0.577,3.043,0.577,4.863C276.237,304.189,266.502,306.973,256.076,306.973z%20M325.609,306.276c1.389,2.081,2.085,4.867,2.085,9.041v9.732h-11.819v-6.256c0-2.786,0-7.65-2.089-9.739%20c-1.387-2.081-4.172-2.081-8.341-2.081H292.93v18.077h-11.82v-49.369h26.421c5.559,0,10.426,0,13.909,2.084%20c3.474,2.088,6.254,5.565,6.254,11.128c0,7.647-4.865,11.819-8.343,13.212C322.829,303.49,324.914,304.885,325.609,306.276z%20M373.589,286.107h-27.122v9.04h26.424v9.737h-26.424v9.736h27.122v10.429H334.65V275.68h38.939V286.107z%20M402.791,325.05h-22.252%20v-10.429h22.252c2.082,0,3.476,0,4.87-1.392c0.696-0.697,1.387-2.085,1.387-3.477c0-1.394-0.691-2.778-1.387-3.475%20c-0.698-0.695-2.091-1.391-4.176-1.391c-11.126-0.696-24.337,0-24.337-15.296c0-6.954,4.172-14.604,16.689-14.604h22.945v11.819%20h-21.554c-2.085,0-3.478,0-4.87,0.696c-1.387,0.697-1.387,2.089-1.387,3.478c0,2.087,1.387,2.783,2.778,3.473%20c1.394,0.697,2.783,0.697,4.172,0.697h6.259c6.259,0,10.43,1.391,13.211,4.173c2.087,2.087,3.478,5.564,3.478,10.43%20C420.869,320.179,414.611,325.05,402.791,325.05z%20M462.59,320.179c-2.778,2.785-7.648,4.871-14.604,4.871H425.74v-10.429h22.245%20c2.087,0,3.481,0,4.87-1.392c0.693-0.697,1.391-2.085,1.391-3.477c0-1.394-0.698-2.778-1.391-3.475%20c-0.696-0.695-2.085-1.391-4.172-1.391c-11.122-0.696-24.337,0-24.337-15.295c0-6.609,3.781-12.579,13.106-14.352%20c1.115-0.154,2.293-0.253,3.583-0.253h22.948v11.819h-15.3h-5.561h-0.696c-2.087,0-3.476,0-4.865,0.696%20c-0.7,0.697-1.396,2.089-1.396,3.478c0,2.087,0.696,2.783,2.785,3.473c1.389,0.697,2.78,0.697,4.172,0.697h0.691h5.565%20c3.039,0,5.337,0.375,7.44,1.114c1.926,0.697,8.302,3.549,9.728,10.994c0.124,0.78,0.215,1.594,0.215,2.495%20C466.761,313.925,465.37,317.401,462.59,320.179z'/%3e%3c/g%3e%3c/svg%3e", Tt = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='iso-8859-1'?%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Generator:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20height='30px'%20width='30px'%20version='1.1'%20id='Capa_1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%20512%20512'%20xml:space='preserve'%3e%3cpath%20style='fill:%2334495E;'%20d='M512,402.282c0,16.716-13.55,30.267-30.265,30.267H30.265C13.55,432.549,0,418.996,0,402.282V109.717%20c0-16.716,13.55-30.266,30.265-30.266h451.469c16.716,0,30.265,13.551,30.265,30.266L512,402.282L512,402.282z'/%3e%3cpath%20style='opacity:0.15;fill:%23202121;enable-background:new%20;'%20d='M21.517,402.282V109.717%20c0-16.716,13.552-30.266,30.267-30.266h-21.52C13.55,79.451,0,93.003,0,109.717v292.565c0,16.716,13.55,30.267,30.265,30.267h21.52%20C35.07,432.549,21.517,418.996,21.517,402.282z'/%3e%3cpath%20style='fill:%23F26E21;'%20d='M309.389,255.801c0.041-9.636-3.572-19.286-10.843-26.558c-7.287-7.287-16.961-10.897-26.617-10.839%20c-0.046,0-0.091-0.003-0.139-0.003c-20.968,0-37.6,16.628-37.6,37.602c0,20.767,16.837,37.599,37.6,37.599%20c20.974,0,37.604-16.631,37.604-37.599C309.394,255.934,309.389,255.869,309.389,255.801z'/%3e%3cg%3e%3cpath%20style='fill:%23E7E8E3;'%20d='M227.198,271.909c-5.62,5.626-10.807,7.824-16.394,7.943c-13.611-0.122-23.618-10.202-23.618-24.573%20c0-7.234,2.739-13.163,7.078-18.228l0,0c4.069-3.863,9.311-6.359,15.339-6.359c6.507,0,11.571,2.169,17.352,7.954v-16.631%20c-5.78-2.891-10.846-4.338-17.352-4.338c-9.192,0.657-17.859,4.371-24.507,10.203l0,0c-1.916,1.724-3.752,3.627-5.309,5.805%20c-4.856,6.294-7.791,14.001-7.791,22.32c0,20.967,16.637,36.875,37.606,36.875c0.102,0,0.203-0.009,0.302-0.01%20c0.141,0.002,0.28,0.01,0.42,0.01c5.784,0,10.85-1.443,17.357-4.336L227.198,271.909c-0.244,0.244,0.242,0.471,0,0.702V271.909z'/%3e%3cpolygon%20style='fill:%23E7E8E3;'%20points='356.863,228.033%20356.863,228.033%20340.487,268.295%20321.685,220.566%20306.502,220.566%20336.148,293.601%20344.102,293.601%20375.196,220.566%20360.013,220.566%20'/%3e%3cpolygon%20style='fill:%23E7E8E3;'%20points='380.983,252.384%20380.983,291.435%20420.033,291.435%20420.753,291.435%20420.753,279.861%20408.461,279.861%20395.445,279.861%20395.445,266.848%20395.445,260.342%20420.033,260.342%20420.033,248.045%20395.445,248.045%20395.445,232.861%20420.753,232.861%20420.753,220.566%20380.983,220.566%20'/%3e%3cpath%20style='fill:%23E7E8E3;'%20d='M54.135,220.566H33.884v70.869h20.25c10.845,0,18.798-2.895,25.306-7.957%20c7.953-6.508,13.017-16.629,13.017-27.474C92.458,235.028,77.27,220.566,54.135,220.566z%20M70.765,274.08%20c-4.339,3.614-10.124,5.781-18.802,5.781h-4.339V232.86h3.615c8.678,0,14.463,1.446,18.803,5.783%20c5.061,4.336,7.955,10.848,7.955,17.358C78.72,262.509,75.828,269.737,70.765,274.08z'/%3e%3crect%20x='98.97'%20y='220.56'%20style='fill:%23E7E8E3;'%20width='13.739'%20height='70.867'/%3e%3cpath%20style='fill:%23E7E8E3;'%20d='M147.415,248.045c-8.676-2.892-10.848-5.063-10.848-8.677c0-4.339,4.339-7.954,10.124-7.954%20c4.339,0,7.954,1.447,11.57,5.786l7.233-9.4c-5.787-5.064-13.015-7.953-20.97-7.953c-12.296,0-22.42,8.678-22.42,20.244%20c0,10.126,4.343,14.464,17.357,19.526c5.785,2.166,7.955,2.892,9.404,4.338c2.887,1.444,4.336,4.339,4.336,7.228%20c0,5.786-4.336,10.126-10.848,10.126c-6.514,0-12.294-3.615-15.187-9.401l-8.678,8.678c6.511,9.4,14.465,13.738,24.589,13.738%20c14.461,0,24.58-9.4,24.58-23.141C167.659,258.893,163.324,253.831,147.415,248.045z'/%3e%3cpath%20style='fill:%23E7E8E3;'%20d='M459.804,261.783c10.843-2.166,16.63-9.4,16.63-20.244c0-13.014-9.402-20.973-25.308-20.973h-20.972%20v70.869h13.739V263.23h2.172l19.519,28.205h16.634L459.804,261.783z%20M448.23,253.105h-4.336v-21.691h4.336%20c8.678,0,13.742,3.614,13.742,10.85C461.972,249.492,456.909,253.105,448.23,253.105z'/%3e%3c/g%3e%3c/svg%3e", zt = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='iso-8859-1'?%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Generator:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20height='800px'%20width='800px'%20version='1.1'%20id='Layer_1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%20291.791%20291.791'%20xml:space='preserve'%3e%3cg%3e%3cpath%20style='fill:%23E2574C;'%20d='M182.298,145.895c0,50.366-40.801,91.176-91.149,91.176S0,196.252,0,145.895%20s40.811-91.176,91.149-91.176S182.298,95.538,182.298,145.895z'/%3e%3cpath%20style='fill:%23F4B459;'%20d='M200.616,54.719c-20.442,0-39.261,6.811-54.469,18.181l0.073,0.009%20c2.991,2.89,6.291,4.924,8.835,8.251l-18.965,0.301c-2.972,3-5.68,6.264-8.233,9.656H161.3c2.544,3.054,4.896,5.708,7.03,9.081%20h-46.536c-1.705,2.936-3.282,5.954-4.659,9.09h56.493c1.477,3.127,2.799,5.489,3.921,8.799h-63.76%20c-1.012,3.146-1.878,6.364-2.535,9.646h68.966c0.675,3.155,1.194,6.072,1.55,9.045h-71.884c-0.301,3-0.456,6.045-0.456,9.118%20h72.859c0,3.228-0.228,6.218-0.556,9.118h-71.847c0.31,3.091,0.766,6.127,1.368,9.118h68.856c-0.711,2.954-1.532,5.926-2.562,9.008%20h-63.969c0.966,3.118,2.143,6.145,3.428,9.099h56.621c-1.568,3.319-3.346,5.972-5.306,9.081h-46.691%20c1.842,3.191,3.875,6.236,6.081,9.154l33.589,0.501c-2.863,3.437-6.537,5.507-9.884,8.516c0.182,0.146-5.352-0.018-16.248-0.191%20c16.576,17.105,39.744,27.772,65.446,27.772c50.357,0,91.176-40.82,91.176-91.176S250.981,54.719,200.616,54.719z'/%3e%3c/g%3e%3c/svg%3e", Nt = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='utf-8'?%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Generator:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20width='800px'%20height='800px'%20viewBox='0%20-140%20780%20780'%20enable-background='new%200%200%20780%20500'%20version='1.1'%20xml:space='preserve'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M40,0h700c22.092,0,40,17.909,40,40v420c0,22.092-17.908,40-40,40H40c-22.091,0-40-17.908-40-40V40%20C0,17.909,17.909,0,40,0z'%20fill='%230E4595'/%3e%3cpath%20d='m293.2%20348.73l33.361-195.76h53.36l-33.385%20195.76h-53.336zm246.11-191.54c-10.57-3.966-27.137-8.222-47.822-8.222-52.725%200-89.865%2026.55-90.18%2064.603-0.299%2028.13%2026.514%2043.822%2046.752%2053.186%2020.771%209.595%2027.752%2015.714%2027.654%2024.283-0.131%2013.121-16.586%2019.116-31.922%2019.116-21.357%200-32.703-2.967-50.227-10.276l-6.876-3.11-7.489%2043.823c12.463%205.464%2035.51%2010.198%2059.438%2010.443%2056.09%200%2092.5-26.246%2092.916-66.882%200.199-22.269-14.016-39.216-44.801-53.188-18.65-9.055-30.072-15.099-29.951-24.268%200-8.137%209.668-16.839%2030.557-16.839%2017.449-0.27%2030.09%203.535%2039.938%207.5l4.781%202.26%207.232-42.429m137.31-4.223h-41.232c-12.773%200-22.332%203.487-27.941%2016.234l-79.244%20179.4h56.031s9.16-24.123%2011.232-29.418c6.125%200%2060.555%200.084%2068.338%200.084%201.596%206.853%206.49%2029.334%206.49%2029.334h49.514l-43.188-195.64zm-65.418%20126.41c4.412-11.279%2021.26-54.723%2021.26-54.723-0.316%200.522%204.379-11.334%207.074-18.684l3.605%2016.879s10.219%2046.729%2012.354%2056.528h-44.293zm-363.3-126.41l-52.24%20133.5-5.567-27.13c-9.725-31.273-40.025-65.155-73.898-82.118l47.766%20171.2%2056.456-0.064%2084.004-195.39h-56.521'%20fill='%23ffffff'/%3e%3cpath%20d='m146.92%20152.96h-86.041l-0.681%204.073c66.938%2016.204%20111.23%2055.363%20129.62%20102.41l-18.71-89.96c-3.23-12.395-12.597-16.094-24.186-16.527'%20fill='%23F2AE14'/%3e%3c/svg%3e", F = [
|
|
1301
|
+
const kt = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='iso-8859-1'?%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Generator:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20height='30px'%20width='30px'%20version='1.1'%20id='Capa_1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%20512%20512'%20xml:space='preserve'%3e%3cpath%20style='fill:%23306FC5;'%20d='M512,402.281c0,16.716-13.55,30.267-30.265,30.267H30.265C13.55,432.549,0,418.997,0,402.281V109.717%20c0-16.715,13.55-30.266,30.265-30.266h451.47c16.716,0,30.265,13.551,30.265,30.266V402.281L512,402.281z'/%3e%3cpath%20style='opacity:0.15;fill:%23202121;enable-background:new%20;'%20d='M21.517,402.281V109.717%20c0-16.715,13.552-30.266,30.267-30.266h-21.52C13.55,79.451,0,93.001,0,109.717v292.565c0,16.716,13.55,30.267,30.265,30.267h21.52%20C35.07,432.549,21.517,418.997,21.517,402.281z'/%3e%3cg%3e%3cpolygon%20style='fill:%23FFFFFF;'%20points='74.59,220.748%2089.888,220.748%2082.241,201.278%20'/%3e%3cpolygon%20style='fill:%23FFFFFF;'%20points='155.946,286.107%20155.946,295.148%20181.675,295.148%20181.675,304.885%20155.946,304.885%20155.946,315.318%20184.455,315.318%20197.666,300.712%20185.151,286.107%20'/%3e%3cpolygon%20style='fill:%23FFFFFF;'%20points='356.898,201.278%20348.553,220.748%20364.548,220.748%20'/%3e%3cpolygon%20style='fill:%23FFFFFF;'%20points='230.348,320.875%20230.348,281.241%20212.268,300.712%20'/%3e%3cpath%20style='fill:%23FFFFFF;'%20d='M264.42,292.368c-0.696-4.172-3.48-6.261-7.654-6.261h-14.599v12.516h15.299%20C261.637,298.624,264.42,296.539,264.42,292.368z'/%3e%3cpath%20style='fill:%23FFFFFF;'%20d='M313.09,297.236c1.391-0.697,2.089-2.785,2.089-4.867c0.696-2.779-0.698-4.172-2.089-4.868%20c-1.387-0.696-3.476-0.696-5.559-0.696h-13.91v11.127h13.909C309.613,297.932,311.702,297.932,313.09,297.236z'/%3e%3cpath%20style='fill:%23FFFFFF;'%20d='M413.217,183.198v8.344l-4.169-8.344H376.37v8.344l-4.174-8.344h-44.502%20c-7.648,0-13.909,1.392-19.469,4.173v-4.173h-31.289v0.696v3.477c-3.476-2.78-7.648-4.173-13.211-4.173h-111.95l-7.652,17.384%20l-7.647-17.384h-25.031h-10.431v8.344l-3.477-8.344h-0.696H66.942l-13.909,32.68L37.042,251.34l-0.294,0.697h0.294h35.463h0.444%20l0.252-0.697l4.174-10.428h9.039l4.172,11.125h40.326v-0.697v-7.647l3.479,8.343h20.163l3.475-8.343v7.647v0.697h15.993h79.965%20h0.696v-18.08h1.394c1.389,0,1.389,0,1.389,2.087v15.297h50.065v-4.172c4.172,2.089,10.426,4.172,18.771,4.172h20.863l4.172-11.123%20h9.732l4.172,11.123h40.328v-6.952v-3.476l6.261,10.428h1.387h0.698h30.595v-68.143h-31.291l0,0H413.217z%20M177.501,241.609h-6.955%20h-4.171v-4.169v-34.076l-0.696,1.595v-0.019l-16.176,36.669h-0.512h-3.719h-6.017l-16.687-38.245v38.245h-23.64l-4.867-10.43%20H70.417l-4.868,10.43H53.326l20.57-48.675h17.382l19.469,46.587v-46.587h4.171h14.251l0.328,0.697h0.024l8.773,19.094l6.3,14.306%20l0.223-0.721l13.906-33.375H177.5v48.674H177.501L177.501,241.609z%20M225.481,203.364h-27.119v9.039h26.423v9.734h-26.423v9.738%20h27.119v10.427h-38.939v-49.367h38.939V203.364L225.481,203.364z%20M275.076,221.294c0.018,0.016,0.041,0.027,0.063,0.042%20c0.263,0.278,0.488,0.557,0.68,0.824c1.332,1.746,2.409,4.343,2.463,8.151c0.004,0.066,0.007,0.131,0.011,0.197%20c0,0.038,0.007,0.071,0.007,0.11c0,0.022-0.002,0.039-0.002,0.06c0.016,0.383,0.026,0.774,0.026,1.197v9.735h-10.428v-5.565%20c0-2.781,0-6.954-2.089-9.735c-0.657-0.657-1.322-1.09-2.046-1.398c-1.042-0.675-3.017-0.686-6.295-0.686h-12.52v17.384h-11.818%20v-48.675h26.425c6.254,0,10.428,0,13.906,2.086c3.407,2.046,5.465,5.439,5.543,10.812c-0.161,7.4-4.911,11.46-8.326,12.829%20C270.676,218.662,272.996,219.129,275.076,221.294z%20M298.491,241.609h-11.822v-48.675h11.822V241.609z%20M434.083,241.609h-15.3%20l-22.25-36.855v30.595l-0.073-0.072v6.362h-11.747v-0.029h-11.822l-4.172-10.43H344.38l-4.172,11.123h-13.211%20c-5.559,0-12.517-1.389-16.687-5.561c-4.172-4.172-6.256-9.735-6.256-18.773c0-6.953,1.389-13.911,6.256-19.472%20c3.474-4.175,9.735-5.562,17.382-5.562h11.128v10.429h-11.128c-4.172,0-6.254,0.693-9.041,2.783%20c-2.082,2.085-3.474,6.256-3.474,11.123c0,5.564,0.696,9.04,3.474,11.821c2.091,2.089,4.87,2.785,8.346,2.785h4.867l15.991-38.243%20h6.957h10.428l19.472,46.587v-2.376v-15.705v-1.389v-27.116h17.382l20.161,34.07v-34.07h11.826v47.977h0.002L434.083,241.609%20L434.083,241.609z'/%3e%3cpath%20style='fill:%23FFFFFF;'%20d='M265.161,213.207c0.203-0.217,0.387-0.463,0.543-0.745c0.63-0.997,1.352-2.793,0.963-5.244%20c-0.016-0.225-0.057-0.433-0.105-0.634c-0.013-0.056-0.011-0.105-0.026-0.161l-0.007,0.001c-0.346-1.191-1.229-1.923-2.11-2.367%20c-1.394-0.693-3.48-0.693-5.565-0.693h-13.909v11.127h13.909c2.085,0,4.172,0,5.565-0.697c0.209-0.106,0.395-0.25,0.574-0.413%20l0.002,0.009C264.996,213.389,265.067,213.315,265.161,213.207z'/%3e%3cpath%20style='fill:%23FFFFFF;'%20d='M475.105,311.144c0-4.867-1.389-9.736-3.474-13.212v-31.289h-0.032v-2.089c0,0-29.145,0-33.483,0%20c-4.336,0-9.598,4.171-9.598,4.171v-4.171h-31.984c-4.87,0-11.124,1.392-13.909,4.171v-4.171h-57.016v2.089v2.081%20c-4.169-3.474-11.824-4.171-15.298-4.171h-37.549v2.089v2.081c-3.476-3.474-11.824-4.171-15.998-4.171H215.05l-9.737,10.431%20l-9.04-10.431h-2.911h-4.737h-54.93v2.089v5.493v62.651h61.19l10.054-10.057l8.715,10.057h0.698h35.258h1.598h0.696h0.692v-6.953%20v-9.039h3.479c4.863,0,11.124,0,15.991-2.089v17.382v1.394h31.291v-1.394V317.4h1.387c2.089,0,2.089,0,2.089,2.086v14.6v1.394%20h94.563c6.263,0,12.517-1.394,15.993-4.175v2.781v1.394h29.902c6.254,0,12.517-0.695,16.689-3.478%20c6.402-3.841,10.437-10.64,11.037-18.749c0.028-0.24,0.063-0.48,0.085-0.721l-0.041-0.039%20C475.087,312.043,475.105,311.598,475.105,311.144z%20M256.076,306.973h-13.91v2.081v4.174v4.173v7.649h-22.855l-13.302-15.299%20l-0.046,0.051l-0.65-0.748l-15.297,15.996h-44.501v-48.673h45.197l12.348,13.525l2.596,2.832l0.352-0.365l14.604-15.991h36.852%20c7.152,0,15.161,1.765,18.196,9.042c0.365,1.441,0.577,3.043,0.577,4.863C276.237,304.189,266.502,306.973,256.076,306.973z%20M325.609,306.276c1.389,2.081,2.085,4.867,2.085,9.041v9.732h-11.819v-6.256c0-2.786,0-7.65-2.089-9.739%20c-1.387-2.081-4.172-2.081-8.341-2.081H292.93v18.077h-11.82v-49.369h26.421c5.559,0,10.426,0,13.909,2.084%20c3.474,2.088,6.254,5.565,6.254,11.128c0,7.647-4.865,11.819-8.343,13.212C322.829,303.49,324.914,304.885,325.609,306.276z%20M373.589,286.107h-27.122v9.04h26.424v9.737h-26.424v9.736h27.122v10.429H334.65V275.68h38.939V286.107z%20M402.791,325.05h-22.252%20v-10.429h22.252c2.082,0,3.476,0,4.87-1.392c0.696-0.697,1.387-2.085,1.387-3.477c0-1.394-0.691-2.778-1.387-3.475%20c-0.698-0.695-2.091-1.391-4.176-1.391c-11.126-0.696-24.337,0-24.337-15.296c0-6.954,4.172-14.604,16.689-14.604h22.945v11.819%20h-21.554c-2.085,0-3.478,0-4.87,0.696c-1.387,0.697-1.387,2.089-1.387,3.478c0,2.087,1.387,2.783,2.778,3.473%20c1.394,0.697,2.783,0.697,4.172,0.697h6.259c6.259,0,10.43,1.391,13.211,4.173c2.087,2.087,3.478,5.564,3.478,10.43%20C420.869,320.179,414.611,325.05,402.791,325.05z%20M462.59,320.179c-2.778,2.785-7.648,4.871-14.604,4.871H425.74v-10.429h22.245%20c2.087,0,3.481,0,4.87-1.392c0.693-0.697,1.391-2.085,1.391-3.477c0-1.394-0.698-2.778-1.391-3.475%20c-0.696-0.695-2.085-1.391-4.172-1.391c-11.122-0.696-24.337,0-24.337-15.295c0-6.609,3.781-12.579,13.106-14.352%20c1.115-0.154,2.293-0.253,3.583-0.253h22.948v11.819h-15.3h-5.561h-0.696c-2.087,0-3.476,0-4.865,0.696%20c-0.7,0.697-1.396,2.089-1.396,3.478c0,2.087,0.696,2.783,2.785,3.473c1.389,0.697,2.78,0.697,4.172,0.697h0.691h5.565%20c3.039,0,5.337,0.375,7.44,1.114c1.926,0.697,8.302,3.549,9.728,10.994c0.124,0.78,0.215,1.594,0.215,2.495%20C466.761,313.925,465.37,317.401,462.59,320.179z'/%3e%3c/g%3e%3c/svg%3e", Tt = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='iso-8859-1'?%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Generator:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20height='30px'%20width='30px'%20version='1.1'%20id='Capa_1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%20512%20512'%20xml:space='preserve'%3e%3cpath%20style='fill:%2334495E;'%20d='M512,402.282c0,16.716-13.55,30.267-30.265,30.267H30.265C13.55,432.549,0,418.996,0,402.282V109.717%20c0-16.716,13.55-30.266,30.265-30.266h451.469c16.716,0,30.265,13.551,30.265,30.266L512,402.282L512,402.282z'/%3e%3cpath%20style='opacity:0.15;fill:%23202121;enable-background:new%20;'%20d='M21.517,402.282V109.717%20c0-16.716,13.552-30.266,30.267-30.266h-21.52C13.55,79.451,0,93.003,0,109.717v292.565c0,16.716,13.55,30.267,30.265,30.267h21.52%20C35.07,432.549,21.517,418.996,21.517,402.282z'/%3e%3cpath%20style='fill:%23F26E21;'%20d='M309.389,255.801c0.041-9.636-3.572-19.286-10.843-26.558c-7.287-7.287-16.961-10.897-26.617-10.839%20c-0.046,0-0.091-0.003-0.139-0.003c-20.968,0-37.6,16.628-37.6,37.602c0,20.767,16.837,37.599,37.6,37.599%20c20.974,0,37.604-16.631,37.604-37.599C309.394,255.934,309.389,255.869,309.389,255.801z'/%3e%3cg%3e%3cpath%20style='fill:%23E7E8E3;'%20d='M227.198,271.909c-5.62,5.626-10.807,7.824-16.394,7.943c-13.611-0.122-23.618-10.202-23.618-24.573%20c0-7.234,2.739-13.163,7.078-18.228l0,0c4.069-3.863,9.311-6.359,15.339-6.359c6.507,0,11.571,2.169,17.352,7.954v-16.631%20c-5.78-2.891-10.846-4.338-17.352-4.338c-9.192,0.657-17.859,4.371-24.507,10.203l0,0c-1.916,1.724-3.752,3.627-5.309,5.805%20c-4.856,6.294-7.791,14.001-7.791,22.32c0,20.967,16.637,36.875,37.606,36.875c0.102,0,0.203-0.009,0.302-0.01%20c0.141,0.002,0.28,0.01,0.42,0.01c5.784,0,10.85-1.443,17.357-4.336L227.198,271.909c-0.244,0.244,0.242,0.471,0,0.702V271.909z'/%3e%3cpolygon%20style='fill:%23E7E8E3;'%20points='356.863,228.033%20356.863,228.033%20340.487,268.295%20321.685,220.566%20306.502,220.566%20336.148,293.601%20344.102,293.601%20375.196,220.566%20360.013,220.566%20'/%3e%3cpolygon%20style='fill:%23E7E8E3;'%20points='380.983,252.384%20380.983,291.435%20420.033,291.435%20420.753,291.435%20420.753,279.861%20408.461,279.861%20395.445,279.861%20395.445,266.848%20395.445,260.342%20420.033,260.342%20420.033,248.045%20395.445,248.045%20395.445,232.861%20420.753,232.861%20420.753,220.566%20380.983,220.566%20'/%3e%3cpath%20style='fill:%23E7E8E3;'%20d='M54.135,220.566H33.884v70.869h20.25c10.845,0,18.798-2.895,25.306-7.957%20c7.953-6.508,13.017-16.629,13.017-27.474C92.458,235.028,77.27,220.566,54.135,220.566z%20M70.765,274.08%20c-4.339,3.614-10.124,5.781-18.802,5.781h-4.339V232.86h3.615c8.678,0,14.463,1.446,18.803,5.783%20c5.061,4.336,7.955,10.848,7.955,17.358C78.72,262.509,75.828,269.737,70.765,274.08z'/%3e%3crect%20x='98.97'%20y='220.56'%20style='fill:%23E7E8E3;'%20width='13.739'%20height='70.867'/%3e%3cpath%20style='fill:%23E7E8E3;'%20d='M147.415,248.045c-8.676-2.892-10.848-5.063-10.848-8.677c0-4.339,4.339-7.954,10.124-7.954%20c4.339,0,7.954,1.447,11.57,5.786l7.233-9.4c-5.787-5.064-13.015-7.953-20.97-7.953c-12.296,0-22.42,8.678-22.42,20.244%20c0,10.126,4.343,14.464,17.357,19.526c5.785,2.166,7.955,2.892,9.404,4.338c2.887,1.444,4.336,4.339,4.336,7.228%20c0,5.786-4.336,10.126-10.848,10.126c-6.514,0-12.294-3.615-15.187-9.401l-8.678,8.678c6.511,9.4,14.465,13.738,24.589,13.738%20c14.461,0,24.58-9.4,24.58-23.141C167.659,258.893,163.324,253.831,147.415,248.045z'/%3e%3cpath%20style='fill:%23E7E8E3;'%20d='M459.804,261.783c10.843-2.166,16.63-9.4,16.63-20.244c0-13.014-9.402-20.973-25.308-20.973h-20.972%20v70.869h13.739V263.23h2.172l19.519,28.205h16.634L459.804,261.783z%20M448.23,253.105h-4.336v-21.691h4.336%20c8.678,0,13.742,3.614,13.742,10.85C461.972,249.492,456.909,253.105,448.23,253.105z'/%3e%3c/g%3e%3c/svg%3e", It = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='iso-8859-1'?%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Generator:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20height='800px'%20width='800px'%20version='1.1'%20id='Layer_1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%20291.791%20291.791'%20xml:space='preserve'%3e%3cg%3e%3cpath%20style='fill:%23E2574C;'%20d='M182.298,145.895c0,50.366-40.801,91.176-91.149,91.176S0,196.252,0,145.895%20s40.811-91.176,91.149-91.176S182.298,95.538,182.298,145.895z'/%3e%3cpath%20style='fill:%23F4B459;'%20d='M200.616,54.719c-20.442,0-39.261,6.811-54.469,18.181l0.073,0.009%20c2.991,2.89,6.291,4.924,8.835,8.251l-18.965,0.301c-2.972,3-5.68,6.264-8.233,9.656H161.3c2.544,3.054,4.896,5.708,7.03,9.081%20h-46.536c-1.705,2.936-3.282,5.954-4.659,9.09h56.493c1.477,3.127,2.799,5.489,3.921,8.799h-63.76%20c-1.012,3.146-1.878,6.364-2.535,9.646h68.966c0.675,3.155,1.194,6.072,1.55,9.045h-71.884c-0.301,3-0.456,6.045-0.456,9.118%20h72.859c0,3.228-0.228,6.218-0.556,9.118h-71.847c0.31,3.091,0.766,6.127,1.368,9.118h68.856c-0.711,2.954-1.532,5.926-2.562,9.008%20h-63.969c0.966,3.118,2.143,6.145,3.428,9.099h56.621c-1.568,3.319-3.346,5.972-5.306,9.081h-46.691%20c1.842,3.191,3.875,6.236,6.081,9.154l33.589,0.501c-2.863,3.437-6.537,5.507-9.884,8.516c0.182,0.146-5.352-0.018-16.248-0.191%20c16.576,17.105,39.744,27.772,65.446,27.772c50.357,0,91.176-40.82,91.176-91.176S250.981,54.719,200.616,54.719z'/%3e%3c/g%3e%3c/svg%3e", zt = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='utf-8'?%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Generator:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20width='800px'%20height='800px'%20viewBox='0%20-140%20780%20780'%20enable-background='new%200%200%20780%20500'%20version='1.1'%20xml:space='preserve'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M40,0h700c22.092,0,40,17.909,40,40v420c0,22.092-17.908,40-40,40H40c-22.091,0-40-17.908-40-40V40%20C0,17.909,17.909,0,40,0z'%20fill='%230E4595'/%3e%3cpath%20d='m293.2%20348.73l33.361-195.76h53.36l-33.385%20195.76h-53.336zm246.11-191.54c-10.57-3.966-27.137-8.222-47.822-8.222-52.725%200-89.865%2026.55-90.18%2064.603-0.299%2028.13%2026.514%2043.822%2046.752%2053.186%2020.771%209.595%2027.752%2015.714%2027.654%2024.283-0.131%2013.121-16.586%2019.116-31.922%2019.116-21.357%200-32.703-2.967-50.227-10.276l-6.876-3.11-7.489%2043.823c12.463%205.464%2035.51%2010.198%2059.438%2010.443%2056.09%200%2092.5-26.246%2092.916-66.882%200.199-22.269-14.016-39.216-44.801-53.188-18.65-9.055-30.072-15.099-29.951-24.268%200-8.137%209.668-16.839%2030.557-16.839%2017.449-0.27%2030.09%203.535%2039.938%207.5l4.781%202.26%207.232-42.429m137.31-4.223h-41.232c-12.773%200-22.332%203.487-27.941%2016.234l-79.244%20179.4h56.031s9.16-24.123%2011.232-29.418c6.125%200%2060.555%200.084%2068.338%200.084%201.596%206.853%206.49%2029.334%206.49%2029.334h49.514l-43.188-195.64zm-65.418%20126.41c4.412-11.279%2021.26-54.723%2021.26-54.723-0.316%200.522%204.379-11.334%207.074-18.684l3.605%2016.879s10.219%2046.729%2012.354%2056.528h-44.293zm-363.3-126.41l-52.24%20133.5-5.567-27.13c-9.725-31.273-40.025-65.155-73.898-82.118l47.766%20171.2%2056.456-0.064%2084.004-195.39h-56.521'%20fill='%23ffffff'/%3e%3cpath%20d='m146.92%20152.96h-86.041l-0.681%204.073c66.938%2016.204%20111.23%2055.363%20129.62%20102.41l-18.71-89.96c-3.23-12.395-12.597-16.094-24.186-16.527'%20fill='%23F2AE14'/%3e%3c/svg%3e", S = [
|
|
1311
1302
|
{
|
|
1312
1303
|
type: "visa",
|
|
1313
|
-
imgSrc:
|
|
1304
|
+
imgSrc: zt
|
|
1314
1305
|
},
|
|
1315
1306
|
{
|
|
1316
1307
|
type: "masterCard",
|
|
1317
|
-
imgSrc:
|
|
1308
|
+
imgSrc: It
|
|
1318
1309
|
},
|
|
1319
1310
|
{
|
|
1320
1311
|
type: "americanExpress",
|
|
1321
|
-
imgSrc:
|
|
1312
|
+
imgSrc: kt
|
|
1322
1313
|
},
|
|
1323
1314
|
{
|
|
1324
1315
|
type: "discover",
|
|
1325
1316
|
imgSrc: Tt
|
|
1326
1317
|
}
|
|
1327
1318
|
];
|
|
1328
|
-
class
|
|
1319
|
+
class Nt extends h {
|
|
1329
1320
|
cardType;
|
|
1330
1321
|
constructor(e) {
|
|
1331
1322
|
super("div", []), this.cardType = e.cardType;
|
|
1332
1323
|
const t = document.createElement("label");
|
|
1333
1324
|
t.setAttribute("for", "cardNumber"), t.textContent = e.label, t.style.color = e.styles.color, t.style.fontSize = `${e.styles.fontSize}px`, t.style.display = "block", t.style.marginBottom = "6px", this.getElement().appendChild(t);
|
|
1325
|
+
const i = document.createElement("div");
|
|
1326
|
+
i.className = e.isLoading ? "loading" : "", i.style.borderRadius = `${e.styles.borderRadius}px ${e.styles.borderRadius}px 0px 0px`;
|
|
1334
1327
|
const a = document.createElement("div");
|
|
1335
|
-
a.className = e.
|
|
1328
|
+
a.id = "card-element", a.className = `card-element ${e.isFocused ? "card-element-focus" : ""}`, a.style.zIndex = e.isFocused ? "2" : "0";
|
|
1336
1329
|
const r = document.createElement("div");
|
|
1337
|
-
|
|
1338
|
-
|
|
1339
|
-
|
|
1340
|
-
F.forEach((n) => {
|
|
1341
|
-
i.appendChild(this.createCardIcon(n));
|
|
1330
|
+
if (r.className = "cards-position", e.cardType === "unknown")
|
|
1331
|
+
S.forEach((s) => {
|
|
1332
|
+
r.appendChild(this.createCardIcon(s));
|
|
1342
1333
|
});
|
|
1343
1334
|
else {
|
|
1344
|
-
const
|
|
1345
|
-
|
|
1335
|
+
const s = S.find((n) => n.type === e.cardType);
|
|
1336
|
+
s && r.appendChild(this.createCardIcon(s));
|
|
1346
1337
|
}
|
|
1347
|
-
|
|
1338
|
+
a.appendChild(r), i.appendChild(a), this.getElement().appendChild(i);
|
|
1348
1339
|
}
|
|
1349
1340
|
createCardIcon(e) {
|
|
1350
1341
|
const t = document.createElement("div");
|
|
1351
1342
|
t.className = "card-icon";
|
|
1352
|
-
const
|
|
1353
|
-
return
|
|
1343
|
+
const i = document.createElement("img");
|
|
1344
|
+
return i.src = e.imgSrc, t.appendChild(i), t;
|
|
1354
1345
|
}
|
|
1355
1346
|
setFocused(e) {
|
|
1356
1347
|
const t = this.getElement().querySelector(
|
|
@@ -1369,16 +1360,16 @@ class At extends h {
|
|
|
1369
1360
|
if (this.cardType === t)
|
|
1370
1361
|
return this;
|
|
1371
1362
|
this.cardType = t;
|
|
1372
|
-
const
|
|
1373
|
-
if (
|
|
1374
|
-
if (
|
|
1375
|
-
|
|
1376
|
-
|
|
1363
|
+
const i = this.getElement().querySelector(".cards-position");
|
|
1364
|
+
if (i)
|
|
1365
|
+
if (i.innerHTML = "", this.cardType === "unknown")
|
|
1366
|
+
S.forEach((a) => {
|
|
1367
|
+
i.appendChild(this.createCardIcon(a));
|
|
1377
1368
|
});
|
|
1378
1369
|
else {
|
|
1379
|
-
const
|
|
1380
|
-
|
|
1381
|
-
|
|
1370
|
+
const a = S.find((r) => r.type === this.cardType);
|
|
1371
|
+
a ? i.appendChild(this.createCardIcon(a)) : S.forEach((r) => {
|
|
1372
|
+
i.appendChild(this.createCardIcon(r));
|
|
1382
1373
|
});
|
|
1383
1374
|
}
|
|
1384
1375
|
return this;
|
|
@@ -1393,41 +1384,44 @@ class Pt extends h {
|
|
|
1393
1384
|
super("div", []);
|
|
1394
1385
|
const {
|
|
1395
1386
|
checkoutProfile: t,
|
|
1396
|
-
isLoading:
|
|
1397
|
-
isFocused:
|
|
1398
|
-
isCvvFocused:
|
|
1399
|
-
isCcValid:
|
|
1400
|
-
isCvvValid:
|
|
1401
|
-
|
|
1402
|
-
|
|
1403
|
-
|
|
1404
|
-
|
|
1405
|
-
|
|
1406
|
-
|
|
1407
|
-
|
|
1408
|
-
|
|
1409
|
-
|
|
1410
|
-
|
|
1387
|
+
isLoading: i,
|
|
1388
|
+
isFocused: a,
|
|
1389
|
+
isCvvFocused: r,
|
|
1390
|
+
isCcValid: s,
|
|
1391
|
+
isCvvValid: n,
|
|
1392
|
+
isCcTouched: l,
|
|
1393
|
+
isCvvTouched: c,
|
|
1394
|
+
cardType: d,
|
|
1395
|
+
cardExpiry: u,
|
|
1396
|
+
cardExpiryError: p,
|
|
1397
|
+
cardExpiryTouched: m,
|
|
1398
|
+
onChange: f,
|
|
1399
|
+
onBlur: M,
|
|
1400
|
+
translationFunc: y,
|
|
1401
|
+
cardExpiryAutocomplete: b = "cc-exp"
|
|
1402
|
+
} = e, C = document.createElement("div");
|
|
1403
|
+
this.cardNumber = new Nt({
|
|
1411
1404
|
styles: {
|
|
1412
1405
|
color: t.styles.textColor,
|
|
1413
1406
|
fontSize: t.styles.fontSize,
|
|
1414
1407
|
borderRadius: t.styles.borderRadius
|
|
1415
1408
|
},
|
|
1416
|
-
label:
|
|
1417
|
-
isLoading:
|
|
1418
|
-
isFocused:
|
|
1419
|
-
cardType:
|
|
1420
|
-
}),
|
|
1421
|
-
const
|
|
1422
|
-
|
|
1409
|
+
label: y("cardInformation"),
|
|
1410
|
+
isLoading: i,
|
|
1411
|
+
isFocused: a,
|
|
1412
|
+
cardType: d
|
|
1413
|
+
}), C.appendChild(this.cardNumber.getElement());
|
|
1414
|
+
const F = document.createElement("div");
|
|
1415
|
+
F.className = "card-details", this.cardExpiry = new N({
|
|
1423
1416
|
name: "cardExpiry",
|
|
1424
|
-
|
|
1425
|
-
|
|
1426
|
-
|
|
1427
|
-
|
|
1428
|
-
|
|
1417
|
+
type: "tel",
|
|
1418
|
+
placeholder: y("cardExpiry"),
|
|
1419
|
+
error: !!(p && m),
|
|
1420
|
+
errorMsg: p,
|
|
1421
|
+
value: u,
|
|
1422
|
+
autocomplete: b,
|
|
1429
1423
|
onChange: (g) => {
|
|
1430
|
-
this.trimCardExpiry(),
|
|
1424
|
+
this.trimCardExpiry(), f(g);
|
|
1431
1425
|
},
|
|
1432
1426
|
styles: {
|
|
1433
1427
|
color: t.styles.textColor,
|
|
@@ -1435,43 +1429,70 @@ class Pt extends h {
|
|
|
1435
1429
|
fontSize: t.styles.fontSize,
|
|
1436
1430
|
fontFamily: t.styles.fontFamily
|
|
1437
1431
|
}
|
|
1438
|
-
}), this.cardExpiry.addEventListener("blur",
|
|
1439
|
-
const
|
|
1432
|
+
}), this.cardExpiry.addEventListener("blur", M), this.cardExpiry.addEventListener("keydown", (g) => {
|
|
1433
|
+
const T = g;
|
|
1440
1434
|
![
|
|
1441
1435
|
"Backspace",
|
|
1442
1436
|
"Delete",
|
|
1443
1437
|
"ArrowLeft",
|
|
1444
1438
|
"ArrowRight",
|
|
1445
1439
|
"Tab"
|
|
1446
|
-
].includes(
|
|
1440
|
+
].includes(T.key) && !/^\d$/.test(T.key) && T.preventDefault();
|
|
1447
1441
|
});
|
|
1448
|
-
const
|
|
1449
|
-
|
|
1450
|
-
const
|
|
1451
|
-
|
|
1442
|
+
const R = this.cardExpiry.getElement();
|
|
1443
|
+
R.style.height = "38.5px";
|
|
1444
|
+
const k = document.createElement("div");
|
|
1445
|
+
k.className = "input-wrapper", this.cardCvv = new Mt({
|
|
1452
1446
|
styles: {
|
|
1453
1447
|
borderRadius: typeof t.styles.borderRadius == "number" ? t.styles.borderRadius : 0
|
|
1454
1448
|
},
|
|
1455
|
-
isLoading:
|
|
1456
|
-
isFocused:
|
|
1457
|
-
}),
|
|
1458
|
-
|
|
1459
|
-
|
|
1449
|
+
isLoading: i,
|
|
1450
|
+
isFocused: r
|
|
1451
|
+
}), k.appendChild(this.cardCvv.getElement()), F.appendChild(this.cardExpiry.getElement()), F.appendChild(k), C.appendChild(F);
|
|
1452
|
+
const v = document.createElement("div");
|
|
1453
|
+
if (v.className = "error-messages-container", v.style.width = "100%", v.style.transition = "height 0.3s ease-in-out, opacity 0.3s ease-in-out", v.style.overflow = "hidden", v.style.height = "0px", v.style.opacity = "0", this.getElement().appendChild(C), this.getElement().appendChild(v), (a || l) && !s) {
|
|
1454
|
+
const g = new E({
|
|
1455
|
+
text: y("validation.cardNumberInvalid")
|
|
1456
|
+
});
|
|
1457
|
+
this.validationMessages.set("cardNumber", g), v.appendChild(g.getElement());
|
|
1458
|
+
}
|
|
1459
|
+
if ((r || c) && !n) {
|
|
1460
|
+
const g = new E({
|
|
1461
|
+
text: y("validation.cardSecurityFormat")
|
|
1460
1462
|
});
|
|
1461
|
-
this.validationMessages.set("
|
|
1463
|
+
this.validationMessages.set("cardCvv", g), v.appendChild(g.getElement());
|
|
1462
1464
|
}
|
|
1463
|
-
if (
|
|
1464
|
-
const g = new
|
|
1465
|
-
text:
|
|
1465
|
+
if (p && m) {
|
|
1466
|
+
const g = new E({
|
|
1467
|
+
text: p
|
|
1466
1468
|
});
|
|
1467
|
-
this.validationMessages.set("
|
|
1469
|
+
this.validationMessages.set("cardExpiry", g), v.appendChild(g.getElement());
|
|
1468
1470
|
}
|
|
1471
|
+
setTimeout(() => this.updateErrorContainerHeight(), 0);
|
|
1469
1472
|
}
|
|
1470
1473
|
updateCardType(e) {
|
|
1471
1474
|
return this.cardNumber.updateCardType(e), this;
|
|
1472
1475
|
}
|
|
1473
|
-
updateCardExpiry(e, t,
|
|
1474
|
-
|
|
1476
|
+
updateCardExpiry(e, t, i) {
|
|
1477
|
+
this.cardExpiry.setValue(e);
|
|
1478
|
+
const a = this.getElement().querySelector(
|
|
1479
|
+
".error-messages-container"
|
|
1480
|
+
);
|
|
1481
|
+
if (t && i)
|
|
1482
|
+
if (this.cardExpiry.setError(!1), this.validationMessages.has("cardExpiry"))
|
|
1483
|
+
this.validationMessages.get("cardExpiry")?.setText(t);
|
|
1484
|
+
else {
|
|
1485
|
+
const r = new E({
|
|
1486
|
+
text: t
|
|
1487
|
+
});
|
|
1488
|
+
this.validationMessages.set("cardExpiry", r), a.appendChild(r.getElement()), setTimeout(() => this.updateErrorContainerHeight(), 0);
|
|
1489
|
+
}
|
|
1490
|
+
else {
|
|
1491
|
+
this.cardExpiry.setError(!1);
|
|
1492
|
+
const r = this.validationMessages.get("cardExpiry");
|
|
1493
|
+
r && (r.getElement().remove(), this.validationMessages.delete("cardExpiry"), this.updateErrorContainerHeight());
|
|
1494
|
+
}
|
|
1495
|
+
return this;
|
|
1475
1496
|
}
|
|
1476
1497
|
getCardExpiryValue() {
|
|
1477
1498
|
return this.cardExpiry.getValue();
|
|
@@ -1480,61 +1501,87 @@ class Pt extends h {
|
|
|
1480
1501
|
const e = this.getCardExpiryValue().trim();
|
|
1481
1502
|
return this.cardExpiry.setValue(e), this;
|
|
1482
1503
|
}
|
|
1483
|
-
updateCardNumberValidation(e, t, a) {
|
|
1484
|
-
|
|
1504
|
+
updateCardNumberValidation(e, t, i, a = !1) {
|
|
1505
|
+
this.cardNumber.setFocused(e);
|
|
1506
|
+
const r = this.getElement().querySelector(
|
|
1507
|
+
".error-messages-container"
|
|
1508
|
+
);
|
|
1509
|
+
if (!e && a && !(t !== !1)) {
|
|
1485
1510
|
if (!this.validationMessages.has("cardNumber")) {
|
|
1486
|
-
const
|
|
1487
|
-
text:
|
|
1511
|
+
const n = new E({
|
|
1512
|
+
text: i("validation.cardNumberInvalid")
|
|
1488
1513
|
});
|
|
1489
|
-
this.validationMessages.set("cardNumber", r), this.
|
|
1514
|
+
this.validationMessages.set("cardNumber", n), r.appendChild(n.getElement()), setTimeout(() => this.updateErrorContainerHeight(), 0);
|
|
1490
1515
|
}
|
|
1491
1516
|
} else {
|
|
1492
|
-
const
|
|
1493
|
-
|
|
1517
|
+
const n = this.validationMessages.get("cardNumber");
|
|
1518
|
+
n && (n.getElement().remove(), this.validationMessages.delete("cardNumber"), this.updateErrorContainerHeight());
|
|
1494
1519
|
}
|
|
1495
1520
|
return this;
|
|
1496
1521
|
}
|
|
1497
|
-
updateCardCvvValidation(e, t, a) {
|
|
1498
|
-
|
|
1522
|
+
updateCardCvvValidation(e, t, i, a = !1) {
|
|
1523
|
+
this.cardCvv.setFocused(e);
|
|
1524
|
+
const r = this.getElement().querySelector(
|
|
1525
|
+
".error-messages-container"
|
|
1526
|
+
);
|
|
1527
|
+
if (!e && a && !(t !== !1)) {
|
|
1499
1528
|
if (!this.validationMessages.has("cardCvv")) {
|
|
1500
|
-
const
|
|
1501
|
-
text:
|
|
1529
|
+
const n = new E({
|
|
1530
|
+
text: i("validation.cardSecurityFormat")
|
|
1502
1531
|
});
|
|
1503
|
-
this.validationMessages.set("cardCvv", r), this.
|
|
1532
|
+
this.validationMessages.set("cardCvv", n), r.appendChild(n.getElement()), setTimeout(() => this.updateErrorContainerHeight(), 0);
|
|
1504
1533
|
}
|
|
1505
1534
|
} else {
|
|
1506
|
-
const
|
|
1507
|
-
|
|
1535
|
+
const n = this.validationMessages.get("cardCvv");
|
|
1536
|
+
n && (n.getElement().remove(), this.validationMessages.delete("cardCvv"), this.updateErrorContainerHeight());
|
|
1508
1537
|
}
|
|
1509
1538
|
return this;
|
|
1510
1539
|
}
|
|
1511
1540
|
setLoading(e) {
|
|
1512
1541
|
return this.cardNumber.setLoading(e), this.cardCvv.setLoading(e), this;
|
|
1513
1542
|
}
|
|
1543
|
+
/**
|
|
1544
|
+
* Updates the height of the error messages container based on its content
|
|
1545
|
+
* to ensure smooth animations when adding/removing error messages
|
|
1546
|
+
*/
|
|
1547
|
+
updateErrorContainerHeight() {
|
|
1548
|
+
const e = this.getElement().querySelector(
|
|
1549
|
+
".error-messages-container"
|
|
1550
|
+
);
|
|
1551
|
+
if (e)
|
|
1552
|
+
if (this.validationMessages.size === 0)
|
|
1553
|
+
e.style.height = "0px", e.style.opacity = "0";
|
|
1554
|
+
else {
|
|
1555
|
+
const t = e.style.height, i = e.style.overflow;
|
|
1556
|
+
e.style.height = "auto", e.style.overflow = "visible";
|
|
1557
|
+
const a = e.scrollHeight;
|
|
1558
|
+
e.style.overflow = i, e.style.height = t, e.offsetHeight, e.style.height = a + 4 + "px", e.style.opacity = "1";
|
|
1559
|
+
}
|
|
1560
|
+
}
|
|
1514
1561
|
}
|
|
1515
|
-
class
|
|
1562
|
+
class At {
|
|
1516
1563
|
input;
|
|
1517
1564
|
constructor(e) {
|
|
1518
1565
|
const {
|
|
1519
1566
|
value: t,
|
|
1520
|
-
onChange:
|
|
1521
|
-
onBlur:
|
|
1522
|
-
error:
|
|
1523
|
-
errorMsg:
|
|
1524
|
-
checkoutProfile:
|
|
1567
|
+
onChange: i,
|
|
1568
|
+
onBlur: a,
|
|
1569
|
+
error: r,
|
|
1570
|
+
errorMsg: s,
|
|
1571
|
+
checkoutProfile: n,
|
|
1525
1572
|
translationFunc: l,
|
|
1526
1573
|
autocomplete: c = "email"
|
|
1527
1574
|
} = e;
|
|
1528
|
-
this.input = new
|
|
1575
|
+
this.input = new N({
|
|
1529
1576
|
name: "email",
|
|
1530
1577
|
label: l("email"),
|
|
1531
|
-
error:
|
|
1532
|
-
errorMsg:
|
|
1578
|
+
error: r,
|
|
1579
|
+
errorMsg: s,
|
|
1533
1580
|
styles: {
|
|
1534
|
-
color:
|
|
1535
|
-
borderRadius: `${
|
|
1536
|
-
fontSize:
|
|
1537
|
-
fontFamily:
|
|
1581
|
+
color: n.styles.textColor,
|
|
1582
|
+
borderRadius: `${n.styles.borderRadius}px`,
|
|
1583
|
+
fontSize: n.styles.fontSize,
|
|
1584
|
+
fontFamily: n.styles.fontFamily
|
|
1538
1585
|
},
|
|
1539
1586
|
placeholder: l("email"),
|
|
1540
1587
|
type: "email",
|
|
@@ -1542,9 +1589,9 @@ class Dt {
|
|
|
1542
1589
|
autocomplete: c,
|
|
1543
1590
|
// Wrap the original onChange to apply trim before calling it
|
|
1544
1591
|
onChange: (d) => {
|
|
1545
|
-
this.trim(),
|
|
1592
|
+
this.trim(), i(d);
|
|
1546
1593
|
}
|
|
1547
|
-
}), this.input.addEventListener("blur",
|
|
1594
|
+
}), this.input.addEventListener("blur", a);
|
|
1548
1595
|
}
|
|
1549
1596
|
getValue() {
|
|
1550
1597
|
return this.input.getValue();
|
|
@@ -1566,19 +1613,19 @@ class Dt {
|
|
|
1566
1613
|
return this.input.appendTo(e), this;
|
|
1567
1614
|
}
|
|
1568
1615
|
}
|
|
1569
|
-
const
|
|
1570
|
-
class
|
|
1616
|
+
const Dt = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='101px'%20height='32'%20viewBox='0%200%20101%2032'%20preserveAspectRatio='xMinYMin%20meet'%3e%3cpath%20fill='%23003087'%20d='M%2012.237%202.8%20L%204.437%202.8%20C%203.937%202.8%203.437%203.2%203.337%203.7%20L%200.237%2023.7%20C%200.137%2024.1%200.437%2024.4%200.837%2024.4%20L%204.537%2024.4%20C%205.037%2024.4%205.537%2024%205.637%2023.5%20L%206.437%2018.1%20C%206.537%2017.6%206.937%2017.2%207.537%2017.2%20L%2010.037%2017.2%20C%2015.137%2017.2%2018.137%2014.7%2018.937%209.8%20C%2019.237%207.7%2018.937%206%2017.937%204.8%20C%2016.837%203.5%2014.837%202.8%2012.237%202.8%20Z%20M%2013.137%2010.1%20C%2012.737%2012.9%2010.537%2012.9%208.537%2012.9%20L%207.337%2012.9%20L%208.137%207.7%20C%208.137%207.4%208.437%207.2%208.737%207.2%20L%209.237%207.2%20C%2010.637%207.2%2011.937%207.2%2012.637%208%20C%2013.137%208.4%2013.337%209.1%2013.137%2010.1%20Z'/%3e%3cpath%20fill='%23003087'%20d='M%2035.437%2010%20L%2031.737%2010%20C%2031.437%2010%2031.137%2010.2%2031.137%2010.5%20L%2030.937%2011.5%20L%2030.637%2011.1%20C%2029.837%209.9%2028.037%209.5%2026.237%209.5%20C%2022.137%209.5%2018.637%2012.6%2017.937%2017%20C%2017.537%2019.2%2018.037%2021.3%2019.337%2022.7%20C%2020.437%2024%2022.137%2024.6%2024.037%2024.6%20C%2027.337%2024.6%2029.237%2022.5%2029.237%2022.5%20L%2029.037%2023.5%20C%2028.937%2023.9%2029.237%2024.3%2029.637%2024.3%20L%2033.037%2024.3%20C%2033.537%2024.3%2034.037%2023.9%2034.137%2023.4%20L%2036.137%2010.6%20C%2036.237%2010.4%2035.837%2010%2035.437%2010%20Z%20M%2030.337%2017.2%20C%2029.937%2019.3%2028.337%2020.8%2026.137%2020.8%20C%2025.037%2020.8%2024.237%2020.5%2023.637%2019.8%20C%2023.037%2019.1%2022.837%2018.2%2023.037%2017.2%20C%2023.337%2015.1%2025.137%2013.6%2027.237%2013.6%20C%2028.337%2013.6%2029.137%2014%2029.737%2014.6%20C%2030.237%2015.3%2030.437%2016.2%2030.337%2017.2%20Z'/%3e%3cpath%20fill='%23003087'%20d='M%2055.337%2010%20L%2051.637%2010%20C%2051.237%2010%2050.937%2010.2%2050.737%2010.5%20L%2045.537%2018.1%20L%2043.337%2010.8%20C%2043.237%2010.3%2042.737%2010%2042.337%2010%20L%2038.637%2010%20C%2038.237%2010%2037.837%2010.4%2038.037%2010.9%20L%2042.137%2023%20L%2038.237%2028.4%20C%2037.937%2028.8%2038.237%2029.4%2038.737%2029.4%20L%2042.437%2029.4%20C%2042.837%2029.4%2043.137%2029.2%2043.337%2028.9%20L%2055.837%2010.9%20C%2056.137%2010.6%2055.837%2010%2055.337%2010%20Z'/%3e%3cpath%20fill='%23009cde'%20d='M%2067.737%202.8%20L%2059.937%202.8%20C%2059.437%202.8%2058.937%203.2%2058.837%203.7%20L%2055.737%2023.6%20C%2055.637%2024%2055.937%2024.3%2056.337%2024.3%20L%2060.337%2024.3%20C%2060.737%2024.3%2061.037%2024%2061.037%2023.7%20L%2061.937%2018%20C%2062.037%2017.5%2062.437%2017.1%2063.037%2017.1%20L%2065.537%2017.1%20C%2070.637%2017.1%2073.637%2014.6%2074.437%209.7%20C%2074.737%207.6%2074.437%205.9%2073.437%204.7%20C%2072.237%203.5%2070.337%202.8%2067.737%202.8%20Z%20M%2068.637%2010.1%20C%2068.237%2012.9%2066.037%2012.9%2064.037%2012.9%20L%2062.837%2012.9%20L%2063.637%207.7%20C%2063.637%207.4%2063.937%207.2%2064.237%207.2%20L%2064.737%207.2%20C%2066.137%207.2%2067.437%207.2%2068.137%208%20C%2068.637%208.4%2068.737%209.1%2068.637%2010.1%20Z'/%3e%3cpath%20fill='%23009cde'%20d='M%2090.937%2010%20L%2087.237%2010%20C%2086.937%2010%2086.637%2010.2%2086.637%2010.5%20L%2086.437%2011.5%20L%2086.137%2011.1%20C%2085.337%209.9%2083.537%209.5%2081.737%209.5%20C%2077.637%209.5%2074.137%2012.6%2073.437%2017%20C%2073.037%2019.2%2073.537%2021.3%2074.837%2022.7%20C%2075.937%2024%2077.637%2024.6%2079.537%2024.6%20C%2082.837%2024.6%2084.737%2022.5%2084.737%2022.5%20L%2084.537%2023.5%20C%2084.437%2023.9%2084.737%2024.3%2085.137%2024.3%20L%2088.537%2024.3%20C%2089.037%2024.3%2089.537%2023.9%2089.637%2023.4%20L%2091.637%2010.6%20C%2091.637%2010.4%2091.337%2010%2090.937%2010%20Z%20M%2085.737%2017.2%20C%2085.337%2019.3%2083.737%2020.8%2081.537%2020.8%20C%2080.437%2020.8%2079.637%2020.5%2079.037%2019.8%20C%2078.437%2019.1%2078.237%2018.2%2078.437%2017.2%20C%2078.737%2015.1%2080.537%2013.6%2082.637%2013.6%20C%2083.737%2013.6%2084.537%2014%2085.137%2014.6%20C%2085.737%2015.3%2085.937%2016.2%2085.737%2017.2%20Z'/%3e%3cpath%20fill='%23009cde'%20d='M%2095.337%203.3%20L%2092.137%2023.6%20C%2092.037%2024%2092.337%2024.3%2092.737%2024.3%20L%2095.937%2024.3%20C%2096.437%2024.3%2096.937%2023.9%2097.037%2023.4%20L%20100.237%203.5%20C%20100.337%203.1%20100.037%202.8%2099.637%202.8%20L%2096.037%202.8%20C%2095.637%202.8%2095.437%203%2095.337%203.3%20Z'/%3e%3c/svg%3e";
|
|
1617
|
+
class Vt extends h {
|
|
1571
1618
|
formData;
|
|
1572
1619
|
onSubmit;
|
|
1573
1620
|
isSubmitting = !1;
|
|
1574
1621
|
constructor(e) {
|
|
1575
1622
|
super("div", ["paypal"]);
|
|
1576
|
-
const { formData: t, onSubmit:
|
|
1577
|
-
this.formData = t, this.onSubmit =
|
|
1578
|
-
const
|
|
1579
|
-
|
|
1580
|
-
const
|
|
1581
|
-
|
|
1623
|
+
const { formData: t, onSubmit: i } = e;
|
|
1624
|
+
this.formData = t, this.onSubmit = i, this.getElement().style.cursor = i ? "pointer" : "default", this.getElement().style.opacity = "1";
|
|
1625
|
+
const a = document.createElement("div");
|
|
1626
|
+
a.className = "paypal-icon-container";
|
|
1627
|
+
const r = document.createElement("img");
|
|
1628
|
+
r.src = Dt, r.style.width = "69px", r.style.height = "22px", r.style.maxWidth = "100%", r.style.display = "block", r.style.height = "auto", a.appendChild(r), this.getElement().appendChild(a), i && this.getElement().addEventListener("click", () => this.handleSubmit());
|
|
1582
1629
|
}
|
|
1583
1630
|
async handleSubmit() {
|
|
1584
1631
|
if (!(!this.onSubmit || this.isSubmitting)) {
|
|
@@ -1599,31 +1646,31 @@ class Rt extends h {
|
|
|
1599
1646
|
return this.isSubmitting = e, this.getElement().style.opacity = e ? "0.7" : "1", this;
|
|
1600
1647
|
}
|
|
1601
1648
|
}
|
|
1602
|
-
class
|
|
1649
|
+
class $t extends h {
|
|
1603
1650
|
paymentMethods;
|
|
1604
1651
|
constructor(e) {
|
|
1605
|
-
const { checkoutProfile: t, formData:
|
|
1652
|
+
const { checkoutProfile: t, formData: i, onPaypalSubmit: a } = e;
|
|
1606
1653
|
if (super("div", ["payment-methods"]), this.paymentMethods = /* @__PURE__ */ new Map(), !t?.additionalPaymentMethods) {
|
|
1607
1654
|
this.getElement().style.display = "none";
|
|
1608
1655
|
return;
|
|
1609
1656
|
}
|
|
1610
|
-
const
|
|
1657
|
+
const r = Object.entries(
|
|
1611
1658
|
t.additionalPaymentMethods
|
|
1612
|
-
).filter(([,
|
|
1613
|
-
if (
|
|
1659
|
+
).filter(([, s]) => s.enabled).sort((s, n) => s[1].order - n[1].order);
|
|
1660
|
+
if (r.length === 0) {
|
|
1614
1661
|
this.getElement().style.display = "none";
|
|
1615
1662
|
return;
|
|
1616
1663
|
}
|
|
1617
|
-
for (const [
|
|
1618
|
-
switch (
|
|
1664
|
+
for (const [s] of r)
|
|
1665
|
+
switch (s) {
|
|
1619
1666
|
case "paypal": {
|
|
1620
|
-
if (
|
|
1621
|
-
const
|
|
1667
|
+
if (a) {
|
|
1668
|
+
const n = new Vt({
|
|
1622
1669
|
checkoutProfile: t,
|
|
1623
|
-
formData:
|
|
1624
|
-
onSubmit:
|
|
1670
|
+
formData: i,
|
|
1671
|
+
onSubmit: a
|
|
1625
1672
|
});
|
|
1626
|
-
this.paymentMethods.set("paypal",
|
|
1673
|
+
this.paymentMethods.set("paypal", n), n.appendTo(this.getElement());
|
|
1627
1674
|
}
|
|
1628
1675
|
break;
|
|
1629
1676
|
}
|
|
@@ -1637,8 +1684,8 @@ class Vt extends h {
|
|
|
1637
1684
|
return this.paymentMethods.size > 0 && this.getElement().style.display !== "none";
|
|
1638
1685
|
}
|
|
1639
1686
|
}
|
|
1640
|
-
const
|
|
1641
|
-
class
|
|
1687
|
+
const Rt = 17;
|
|
1688
|
+
class Bt extends h {
|
|
1642
1689
|
styles;
|
|
1643
1690
|
isHovered = !1;
|
|
1644
1691
|
constructor(e) {
|
|
@@ -1649,7 +1696,7 @@ class Ot extends h {
|
|
|
1649
1696
|
}
|
|
1650
1697
|
applyStyles() {
|
|
1651
1698
|
const e = this.getElement();
|
|
1652
|
-
e.style.backgroundColor = this.isHovered ? `color-mix(in srgb, ${this.styles.backgroundColor} 80%, transparent)` : this.styles.backgroundColor, e.disabled ? e.style.color = "#cccccc" : e.style.color = this.styles.color, e.style.borderRadius = this.styles.borderRadius ===
|
|
1699
|
+
e.style.backgroundColor = this.isHovered ? `color-mix(in srgb, ${this.styles.backgroundColor} 80%, transparent)` : this.styles.backgroundColor, e.disabled ? e.style.color = "#cccccc" : e.style.color = this.styles.color, e.style.borderRadius = this.styles.borderRadius === Rt ? "100vmax" : `${this.styles.borderRadius}px`, e.style.fontSize = `${this.styles.fontSize}px`, e.style.fontFamily = `${this.styles.fontFamily}, sans-serif`;
|
|
1653
1700
|
}
|
|
1654
1701
|
handleMouseEnter() {
|
|
1655
1702
|
this.isHovered = !0, this.applyStyles();
|
|
@@ -1661,20 +1708,20 @@ class Ot extends h {
|
|
|
1661
1708
|
return this.getElement().disabled = e, e ? (this.addClass("disabled"), this.removeClass("valid")) : (this.removeClass("disabled"), this.addClass("valid")), this.applyStyles(), this;
|
|
1662
1709
|
}
|
|
1663
1710
|
}
|
|
1664
|
-
class
|
|
1711
|
+
class Ot {
|
|
1665
1712
|
button;
|
|
1666
1713
|
constructor(e) {
|
|
1667
|
-
const { disabled: t, checkoutProfile:
|
|
1668
|
-
this.button = new
|
|
1669
|
-
text:
|
|
1670
|
-
`buttonTexts.${
|
|
1714
|
+
const { disabled: t, checkoutProfile: i, translationFunc: a } = e;
|
|
1715
|
+
this.button = new Bt({
|
|
1716
|
+
text: a(
|
|
1717
|
+
`buttonTexts.${i?.layout.actionButton.translationKey}`
|
|
1671
1718
|
),
|
|
1672
1719
|
styles: {
|
|
1673
|
-
backgroundColor:
|
|
1674
|
-
color:
|
|
1675
|
-
fontFamily:
|
|
1676
|
-
borderRadius:
|
|
1677
|
-
fontSize:
|
|
1720
|
+
backgroundColor: i.styles.buttonColor,
|
|
1721
|
+
color: i.styles.buttonTextColor,
|
|
1722
|
+
fontFamily: i.styles.fontFamily,
|
|
1723
|
+
borderRadius: i.styles.borderRadius,
|
|
1724
|
+
fontSize: i.styles.buttonFontSize
|
|
1678
1725
|
},
|
|
1679
1726
|
disabled: t
|
|
1680
1727
|
});
|
|
@@ -1685,19 +1732,20 @@ class Ht {
|
|
|
1685
1732
|
setDisabled(e) {
|
|
1686
1733
|
return this.button.setDisabled(e), this;
|
|
1687
1734
|
}
|
|
1688
|
-
addEventListener(e, t,
|
|
1689
|
-
return this.button.addEventListener(e, t,
|
|
1735
|
+
addEventListener(e, t, i) {
|
|
1736
|
+
return this.button.addEventListener(e, t, i), this;
|
|
1690
1737
|
}
|
|
1691
1738
|
appendTo(e) {
|
|
1692
1739
|
return this.button.appendTo(e), this;
|
|
1693
1740
|
}
|
|
1694
1741
|
}
|
|
1695
|
-
const
|
|
1696
|
-
class
|
|
1742
|
+
const Ht = "https://test-htp.tokenex.com/Iframe/Iframe-v3.min.js", Kt = "https://htp.tokenex.com/iframe/iframe-v3.min.js";
|
|
1743
|
+
class jt extends h {
|
|
1697
1744
|
options;
|
|
1698
1745
|
isSubmitting = !1;
|
|
1699
1746
|
scriptCleanup;
|
|
1700
1747
|
fontCleanup;
|
|
1748
|
+
tokenExScriptPromise;
|
|
1701
1749
|
// Form components
|
|
1702
1750
|
emailField;
|
|
1703
1751
|
cardSection;
|
|
@@ -1707,12 +1755,12 @@ class Ut extends h {
|
|
|
1707
1755
|
spinner;
|
|
1708
1756
|
alert;
|
|
1709
1757
|
// factories
|
|
1710
|
-
formManager =
|
|
1758
|
+
formManager = J();
|
|
1711
1759
|
checkoutProfile;
|
|
1712
|
-
translation =
|
|
1760
|
+
translation = z();
|
|
1713
1761
|
iframeHook;
|
|
1714
1762
|
constructor(e) {
|
|
1715
|
-
super("form", ["form-container"]), this.options = e, this.checkoutProfile =
|
|
1763
|
+
super("form", ["form-container"]), this.options = e, this.checkoutProfile = U({
|
|
1716
1764
|
apiKey: e.apiKey,
|
|
1717
1765
|
profileId: e.profileId,
|
|
1718
1766
|
environment: e.environment
|
|
@@ -1735,31 +1783,32 @@ class Ut extends h {
|
|
|
1735
1783
|
};
|
|
1736
1784
|
handleProfileStateChange = (e) => {
|
|
1737
1785
|
if (!e.isLoading)
|
|
1738
|
-
if (
|
|
1786
|
+
if (e.checkoutProfile)
|
|
1739
1787
|
try {
|
|
1740
|
-
if (e.checkoutProfile.styles?.fontFamily)
|
|
1788
|
+
if (console.log("[Form] Profile loaded, starting render."), e.checkoutProfile.styles?.fontFamily)
|
|
1741
1789
|
try {
|
|
1742
|
-
const { cleanup: t } =
|
|
1790
|
+
const { cleanup: t } = bt({
|
|
1743
1791
|
fontFamily: e.checkoutProfile.styles.fontFamily
|
|
1744
1792
|
});
|
|
1745
1793
|
this.fontCleanup = t;
|
|
1746
1794
|
} catch (t) {
|
|
1747
1795
|
console.error("Error loading Google Font:", t);
|
|
1748
1796
|
}
|
|
1749
|
-
this.renderFormComponents(), this.initializeTokenExIframe().catch((t) => {
|
|
1797
|
+
this.renderFormComponents(), console.log("[Form] Initializing TokenEx iframe..."), this.initializeTokenExIframe().catch((t) => {
|
|
1750
1798
|
console.error("Error initializing TokenEx iframe:", t);
|
|
1751
1799
|
});
|
|
1752
1800
|
} catch (t) {
|
|
1753
1801
|
console.error("Error in profile state change:", t);
|
|
1754
|
-
const
|
|
1755
|
-
this.setErrorMessage(
|
|
1802
|
+
const i = e.error || "Failed to load checkout profile data";
|
|
1803
|
+
this.setErrorMessage(i);
|
|
1756
1804
|
}
|
|
1757
|
-
else e.error && (console.error("NO profile found", e.error), this.setErrorMessage(e.error));
|
|
1805
|
+
else e.error && (console.error("NO profile found", e.error), this.setErrorMessage(e.error), this.setLoadingState(!1));
|
|
1758
1806
|
};
|
|
1759
1807
|
applyFormContainerStyles(e) {
|
|
1760
1808
|
e.fontFamily && (this.getElement().style.fontFamily = e.fontFamily);
|
|
1761
1809
|
}
|
|
1762
1810
|
initializeTokenExIframe = async () => {
|
|
1811
|
+
console.log("[Form] initializeTokenExIframe started.");
|
|
1763
1812
|
const e = this.checkoutProfile.getState();
|
|
1764
1813
|
if (!e.checkoutProfile) {
|
|
1765
1814
|
console.error("Cannot initialize iframe: No checkout profile available");
|
|
@@ -1767,57 +1816,59 @@ class Ut extends h {
|
|
|
1767
1816
|
}
|
|
1768
1817
|
if (!this.iframeHook)
|
|
1769
1818
|
try {
|
|
1770
|
-
if (
|
|
1771
|
-
|
|
1772
|
-
|
|
1773
|
-
|
|
1774
|
-
|
|
1775
|
-
|
|
1776
|
-
|
|
1819
|
+
if (await this.tokenExScriptPromise, console.log(
|
|
1820
|
+
"[Form] TokenEx script is loaded, proceeding with iframe initialization."
|
|
1821
|
+
), !("TokenEx" in globalThis)) {
|
|
1822
|
+
console.error(
|
|
1823
|
+
"[Form] TokenEx script loaded but TokenEx is not available in globalThis."
|
|
1824
|
+
);
|
|
1825
|
+
return;
|
|
1826
|
+
}
|
|
1827
|
+
const { inputStyles: t, formContainerStyle: i } = St(
|
|
1777
1828
|
e.checkoutProfile
|
|
1778
1829
|
);
|
|
1779
|
-
this.applyFormContainerStyles(
|
|
1780
|
-
|
|
1781
|
-
|
|
1782
|
-
} catch (n) {
|
|
1783
|
-
console.error("Failed to create card section:", n);
|
|
1784
|
-
}
|
|
1785
|
-
const r = document.getElementById("card-element"), i = document.getElementById("card-cvv-element");
|
|
1786
|
-
if (!r || !i) {
|
|
1830
|
+
this.applyFormContainerStyles(i);
|
|
1831
|
+
const a = document.getElementById("card-element"), r = document.getElementById("card-cvv-element");
|
|
1832
|
+
if (!a || !r) {
|
|
1787
1833
|
console.error(
|
|
1788
|
-
"Card elements not found, cannot initialize TokenEx iframe"
|
|
1834
|
+
"[Form] Card elements not found, cannot initialize TokenEx iframe."
|
|
1789
1835
|
);
|
|
1790
1836
|
return;
|
|
1791
1837
|
}
|
|
1792
|
-
this.iframeHook =
|
|
1838
|
+
this.iframeHook = X({
|
|
1793
1839
|
apiKey: this.options.apiKey,
|
|
1794
1840
|
checkoutProfile: e.checkoutProfile,
|
|
1795
1841
|
inputStyles: t,
|
|
1796
|
-
setFormData: (
|
|
1797
|
-
this.formManager.setFormData(
|
|
1842
|
+
setFormData: (s) => {
|
|
1843
|
+
this.formManager.setFormData(s);
|
|
1798
1844
|
},
|
|
1799
1845
|
environment: this.options.environment
|
|
1800
|
-
}), this.iframeHook?.subscribe(this.handleIframeStateChange), await this.iframeHook?.initialize();
|
|
1846
|
+
}), this.iframeHook?.subscribe(this.handleIframeStateChange), console.log("[Form] Calling iframeHook.initialize()."), await this.iframeHook?.initialize(), console.log("[Form] iframeHook.initialize() finished.");
|
|
1801
1847
|
} catch (t) {
|
|
1802
1848
|
throw console.error("Failed to initialize payment form:", t), t;
|
|
1803
1849
|
}
|
|
1804
1850
|
};
|
|
1851
|
+
// Track if the card number and CVV have been touched
|
|
1852
|
+
isCcTouched = !1;
|
|
1853
|
+
isCvvTouched = !1;
|
|
1805
1854
|
handleIframeStateChange = (e) => {
|
|
1806
|
-
this.cardSection && (this.cardSection.updateCardNumberValidation(
|
|
1855
|
+
this.cardSection && (e.isFocused && (this.isCcTouched = !0), e.isCvvFocused && (this.isCvvTouched = !0), this.cardSection.updateCardNumberValidation(
|
|
1807
1856
|
e.isFocused,
|
|
1808
1857
|
e.isCcValid,
|
|
1809
|
-
this.translation.t
|
|
1858
|
+
this.translation.t,
|
|
1859
|
+
this.isCcTouched
|
|
1810
1860
|
), this.cardSection.updateCardCvvValidation(
|
|
1811
1861
|
e.isCvvFocused,
|
|
1812
1862
|
e.isCvvValid,
|
|
1813
|
-
this.translation.t
|
|
1814
|
-
|
|
1863
|
+
this.translation.t,
|
|
1864
|
+
this.isCvvTouched
|
|
1865
|
+
), this.cardSection.updateCardType(e.possibleCardType), this.cardSection.setLoading(e.loadingIframe)), e.loadingIframe || this.setLoadingState(!1), this.submitButton && this.submitButton.setDisabled(this.isFormDisabled());
|
|
1815
1866
|
};
|
|
1816
1867
|
createCardSection = (e) => {
|
|
1817
1868
|
if (!this.cardSection)
|
|
1818
1869
|
try {
|
|
1819
|
-
const { formData: t, errors:
|
|
1820
|
-
let
|
|
1870
|
+
const { formData: t, errors: i, touched: a } = this._getFormStateData();
|
|
1871
|
+
let r = {
|
|
1821
1872
|
loadingIframe: !0,
|
|
1822
1873
|
isFocused: !1,
|
|
1823
1874
|
isCvvFocused: !1,
|
|
@@ -1825,46 +1876,38 @@ class Ut extends h {
|
|
|
1825
1876
|
isCvvValid: !1,
|
|
1826
1877
|
possibleCardType: "unknown"
|
|
1827
1878
|
};
|
|
1828
|
-
|
|
1879
|
+
this.iframeHook && (r = this.iframeHook.getState()), this.cardSection = new Pt({
|
|
1829
1880
|
checkoutProfile: e,
|
|
1830
|
-
isLoading:
|
|
1831
|
-
isFocused:
|
|
1832
|
-
isCvvFocused:
|
|
1833
|
-
isCcValid:
|
|
1834
|
-
isCvvValid:
|
|
1835
|
-
|
|
1881
|
+
isLoading: r.loadingIframe,
|
|
1882
|
+
isFocused: r.isFocused,
|
|
1883
|
+
isCvvFocused: r.isCvvFocused,
|
|
1884
|
+
isCcValid: r.isCcValid,
|
|
1885
|
+
isCvvValid: r.isCvvValid,
|
|
1886
|
+
isCcTouched: !1,
|
|
1887
|
+
// Initially not touched
|
|
1888
|
+
isCvvTouched: !1,
|
|
1889
|
+
// Initially not touched
|
|
1890
|
+
cardType: r.possibleCardType,
|
|
1836
1891
|
cardExpiry: t.cardExpiry,
|
|
1837
|
-
cardExpiryError:
|
|
1838
|
-
cardExpiryTouched: !!
|
|
1892
|
+
cardExpiryError: i.cardExpiry,
|
|
1893
|
+
cardExpiryTouched: !!a.cardExpiry,
|
|
1839
1894
|
onChange: this.handleChange,
|
|
1840
1895
|
onBlur: this.handleBlur,
|
|
1841
1896
|
translationFunc: this.translation.t
|
|
1842
|
-
}), this.
|
|
1843
|
-
this.element.insertBefore(
|
|
1844
|
-
this.cardSection.getElement(),
|
|
1845
|
-
this.cardholderSection.getElement()
|
|
1846
|
-
);
|
|
1847
|
-
else if (this.emailField) {
|
|
1848
|
-
const n = this.emailField.getElement().nextSibling;
|
|
1849
|
-
n ? this.element.insertBefore(
|
|
1850
|
-
this.cardSection.getElement(),
|
|
1851
|
-
n
|
|
1852
|
-
) : this.element.appendChild(this.cardSection.getElement());
|
|
1853
|
-
} else
|
|
1854
|
-
this.element.appendChild(this.cardSection.getElement()), console.warn(
|
|
1855
|
-
"Card section inserted at end of form - component order may be incorrect"
|
|
1856
|
-
);
|
|
1857
|
-
this.updateFormUI(), this.cardSection && this.emailField && this.cardholderSection && this.submitButton;
|
|
1897
|
+
}), this.element.appendChild(this.cardSection.getElement());
|
|
1858
1898
|
} catch (t) {
|
|
1859
1899
|
console.error("Error creating card section:", t), this.setErrorMessage("Card section temporarily unavailable");
|
|
1860
1900
|
}
|
|
1861
1901
|
};
|
|
1862
1902
|
initializeForm() {
|
|
1863
|
-
this.setLoadingState(!0), this.options.errorMsg && this.setErrorMessage(this.options.errorMsg);
|
|
1864
|
-
const e = this.options.environment === "test" ?
|
|
1903
|
+
console.log("[Form] initializeForm started."), this.setLoadingState(!0), this.options.errorMsg && this.setErrorMessage(this.options.errorMsg);
|
|
1904
|
+
const e = this.options.environment === "test" ? Ht : Kt;
|
|
1905
|
+
console.log("[Form] Appending TokenEx script.");
|
|
1906
|
+
const { cleanup: t, isLoaded: i } = xt({
|
|
1865
1907
|
scriptSrc: e
|
|
1866
1908
|
});
|
|
1867
|
-
this.scriptCleanup = t,
|
|
1909
|
+
this.scriptCleanup = t, this.tokenExScriptPromise = i, i.then(() => {
|
|
1910
|
+
console.log("[Form] TokenEx script loaded successfully.");
|
|
1868
1911
|
}).catch(() => {
|
|
1869
1912
|
this.setLoadingState(!1), this.setErrorMessage(
|
|
1870
1913
|
"Failed to load payment system. Please try again later."
|
|
@@ -1872,30 +1915,37 @@ class Ut extends h {
|
|
|
1872
1915
|
});
|
|
1873
1916
|
}
|
|
1874
1917
|
renderFormComponents() {
|
|
1875
|
-
if (this.emailField)
|
|
1918
|
+
if (console.log("[Form] renderFormComponents started."), this.emailField) {
|
|
1919
|
+
console.log("[Form] Components already rendered, skipping.");
|
|
1876
1920
|
return;
|
|
1921
|
+
}
|
|
1877
1922
|
const e = this.checkoutProfile.getState();
|
|
1878
1923
|
if (!e.checkoutProfile) {
|
|
1879
1924
|
this.setErrorMessage("Failed to load checkout configuration");
|
|
1880
1925
|
return;
|
|
1881
1926
|
}
|
|
1882
1927
|
try {
|
|
1883
|
-
this.createPaymentMethods(e.checkoutProfile);
|
|
1928
|
+
console.log("[Form] Creating payment methods."), this.createPaymentMethods(e.checkoutProfile);
|
|
1884
1929
|
} catch (t) {
|
|
1885
1930
|
console.error("Failed to create payment methods:", t);
|
|
1886
1931
|
}
|
|
1887
1932
|
try {
|
|
1888
|
-
this.createEmailField(e.checkoutProfile);
|
|
1933
|
+
console.log("[Form] Creating email field."), this.createEmailField(e.checkoutProfile);
|
|
1889
1934
|
} catch (t) {
|
|
1890
1935
|
console.error("Failed to create email field:", t);
|
|
1891
1936
|
}
|
|
1892
1937
|
try {
|
|
1893
|
-
this.
|
|
1938
|
+
console.log("[Form] Creating card section."), this.createCardSection(e.checkoutProfile);
|
|
1939
|
+
} catch (t) {
|
|
1940
|
+
console.error("Failed to create card section:", t);
|
|
1941
|
+
}
|
|
1942
|
+
try {
|
|
1943
|
+
console.log("[Form] Creating cardholder section."), this.createCardholderSection(e.checkoutProfile);
|
|
1894
1944
|
} catch (t) {
|
|
1895
1945
|
console.error("Failed to create cardholder section:", t);
|
|
1896
1946
|
}
|
|
1897
1947
|
try {
|
|
1898
|
-
this.createSubmitButton(e.checkoutProfile);
|
|
1948
|
+
console.log("[Form] Creating submit button."), this.createSubmitButton(e.checkoutProfile);
|
|
1899
1949
|
} catch (t) {
|
|
1900
1950
|
console.error("Failed to create submit button:", t);
|
|
1901
1951
|
}
|
|
@@ -1904,12 +1954,12 @@ class Ut extends h {
|
|
|
1904
1954
|
try {
|
|
1905
1955
|
if (!e?.additionalPaymentMethods || Object.entries(
|
|
1906
1956
|
e.additionalPaymentMethods
|
|
1907
|
-
).filter(([,
|
|
1957
|
+
).filter(([, a]) => a.enabled).length === 0)
|
|
1908
1958
|
return;
|
|
1909
|
-
const { formData:
|
|
1910
|
-
this.paymentMethods = new
|
|
1959
|
+
const { formData: i } = this._getFormStateData();
|
|
1960
|
+
this.paymentMethods = new $t({
|
|
1911
1961
|
checkoutProfile: e,
|
|
1912
|
-
formData:
|
|
1962
|
+
formData: i,
|
|
1913
1963
|
onPaypalSubmit: async () => {
|
|
1914
1964
|
await this.handlePaypalSubmit();
|
|
1915
1965
|
}
|
|
@@ -1920,13 +1970,13 @@ class Ut extends h {
|
|
|
1920
1970
|
}
|
|
1921
1971
|
createEmailField(e) {
|
|
1922
1972
|
try {
|
|
1923
|
-
const { formData: t, errors:
|
|
1924
|
-
this.emailField = new
|
|
1973
|
+
const { formData: t, errors: i, touched: a } = this._getFormStateData();
|
|
1974
|
+
this.emailField = new At({
|
|
1925
1975
|
value: t.email,
|
|
1926
1976
|
onChange: this.handleChange,
|
|
1927
1977
|
onBlur: this.handleBlur,
|
|
1928
|
-
error: !!(
|
|
1929
|
-
errorMsg:
|
|
1978
|
+
error: !!(i.email && a.email),
|
|
1979
|
+
errorMsg: i.email,
|
|
1930
1980
|
checkoutProfile: e,
|
|
1931
1981
|
translationFunc: this.translation.t
|
|
1932
1982
|
}), this.element.appendChild(this.emailField.getElement());
|
|
@@ -1936,13 +1986,13 @@ class Ut extends h {
|
|
|
1936
1986
|
}
|
|
1937
1987
|
createCardholderSection(e) {
|
|
1938
1988
|
try {
|
|
1939
|
-
const { formData: t, errors:
|
|
1940
|
-
this.cardholderSection = new
|
|
1989
|
+
const { formData: t, errors: i, touched: a } = this._getFormStateData();
|
|
1990
|
+
this.cardholderSection = new Lt({
|
|
1941
1991
|
value: t.name,
|
|
1942
1992
|
onChange: this.handleChange,
|
|
1943
1993
|
onBlur: this.handleBlur,
|
|
1944
|
-
error: !!(
|
|
1945
|
-
errorMsg:
|
|
1994
|
+
error: !!(i.name && a.name),
|
|
1995
|
+
errorMsg: i.name,
|
|
1946
1996
|
checkoutProfile: e,
|
|
1947
1997
|
translationFunc: this.translation.t
|
|
1948
1998
|
}), this.element.appendChild(this.cardholderSection.getElement());
|
|
@@ -1952,7 +2002,7 @@ class Ut extends h {
|
|
|
1952
2002
|
}
|
|
1953
2003
|
createSubmitButton(e) {
|
|
1954
2004
|
try {
|
|
1955
|
-
this.submitButton = new
|
|
2005
|
+
this.submitButton = new Ot({
|
|
1956
2006
|
disabled: this.isFormDisabled(),
|
|
1957
2007
|
checkoutProfile: e,
|
|
1958
2008
|
translationFunc: this.translation.t
|
|
@@ -1962,12 +2012,12 @@ class Ut extends h {
|
|
|
1962
2012
|
}
|
|
1963
2013
|
}
|
|
1964
2014
|
handleChange = (e) => {
|
|
1965
|
-
const t = e.target, { name:
|
|
1966
|
-
this.formManager.handleChange(
|
|
2015
|
+
const t = e.target, { name: i, value: a } = t;
|
|
2016
|
+
this.formManager.handleChange(i, a);
|
|
1967
2017
|
};
|
|
1968
2018
|
handleBlur = (e) => {
|
|
1969
|
-
const t = e.target, { name:
|
|
1970
|
-
this.formManager.handleBlur(
|
|
2019
|
+
const t = e.target, { name: i, value: a } = t;
|
|
2020
|
+
this.formManager.handleBlur(i, a);
|
|
1971
2021
|
};
|
|
1972
2022
|
updateFormUI() {
|
|
1973
2023
|
const e = this.formManager.getFormState();
|
|
@@ -1990,22 +2040,22 @@ class Ut extends h {
|
|
|
1990
2040
|
isCvvValid: !1
|
|
1991
2041
|
};
|
|
1992
2042
|
this.iframeHook && (t = this.iframeHook.getState());
|
|
1993
|
-
const
|
|
2043
|
+
const i = Object.keys(e.errors).length > 0, a = (
|
|
1994
2044
|
// Only require card validation if CardSection exists
|
|
1995
2045
|
(!this.cardSection || t.isCcValid && t.isCvvValid) && !!e.formData.email && !!e.formData.name && // Only require card expiry if CardSection exists
|
|
1996
2046
|
(!this.cardSection || !!e.formData.cardExpiry)
|
|
1997
2047
|
);
|
|
1998
|
-
return
|
|
2048
|
+
return i || !a || this.isSubmitting;
|
|
1999
2049
|
}
|
|
2000
2050
|
setLoadingState(e) {
|
|
2001
2051
|
if (this.options.onLoadingStateChange) {
|
|
2002
2052
|
this.options.onLoadingStateChange(e);
|
|
2003
2053
|
return;
|
|
2004
2054
|
}
|
|
2005
|
-
e ? (this.hideSpinner(), this.spinner = new
|
|
2055
|
+
e ? (this.hideSpinner(), this.spinner = new V(), this.element.appendChild(this.spinner.getElement())) : this.hideSpinner();
|
|
2006
2056
|
}
|
|
2007
2057
|
showSpinner(e) {
|
|
2008
|
-
this.hideSpinner(), this.spinner = new
|
|
2058
|
+
this.hideSpinner(), this.spinner = new V({ text: e }), this.element.appendChild(this.spinner.getElement());
|
|
2009
2059
|
}
|
|
2010
2060
|
hideSpinner() {
|
|
2011
2061
|
this.spinner && (this.spinner.getElement().remove(), this.spinner = void 0);
|
|
@@ -2053,7 +2103,7 @@ class Ut extends h {
|
|
|
2053
2103
|
* Update the form error message
|
|
2054
2104
|
*/
|
|
2055
2105
|
setErrorMessage(e) {
|
|
2056
|
-
return this.alert && (this.alert.getElement().remove(), this.alert = void 0), this.alert = new
|
|
2106
|
+
return this.alert && (this.alert.getElement().remove(), this.alert = void 0), this.alert = new Ft({ message: e }), this.element.insertBefore(this.alert.getElement(), this.element.firstChild), this;
|
|
2057
2107
|
}
|
|
2058
2108
|
/**
|
|
2059
2109
|
* Clean up resources when the form is destroyed
|
|
@@ -2065,7 +2115,7 @@ class Ut extends h {
|
|
|
2065
2115
|
e.key === "Enter" && !this.isFormDisabled() && (e.target instanceof HTMLTextAreaElement || (e.preventDefault(), this.handleSubmit(e)));
|
|
2066
2116
|
};
|
|
2067
2117
|
}
|
|
2068
|
-
class
|
|
2118
|
+
class Ut {
|
|
2069
2119
|
container = null;
|
|
2070
2120
|
options;
|
|
2071
2121
|
onSubmit;
|
|
@@ -2080,7 +2130,7 @@ class _t {
|
|
|
2080
2130
|
this.container && this.form && (this.form && e.errorMsg && !this.options.disableErrorMessages ? this.form.setErrorMessage(e.errorMsg) : this.renderForm(e.errorMsg));
|
|
2081
2131
|
}
|
|
2082
2132
|
renderForm(e) {
|
|
2083
|
-
this.container && (this.form && (this.form.destroy(), this.form = null), this.form = new
|
|
2133
|
+
this.container && (this.form && (this.form.destroy(), this.form = null), this.form = new jt({
|
|
2084
2134
|
apiKey: this.options.apiKey,
|
|
2085
2135
|
onSubmit: this.onSubmit,
|
|
2086
2136
|
locale: this.options.locale,
|
|
@@ -2117,19 +2167,19 @@ class qt {
|
|
|
2117
2167
|
this.listeners.forEach((t) => t(e));
|
|
2118
2168
|
}
|
|
2119
2169
|
}
|
|
2120
|
-
class
|
|
2170
|
+
class Gt {
|
|
2121
2171
|
config;
|
|
2122
2172
|
apiService;
|
|
2123
2173
|
formManager;
|
|
2124
2174
|
stateManager;
|
|
2125
2175
|
constructor(e) {
|
|
2126
|
-
this.config = this.validateConfig(e), this.apiService = new
|
|
2176
|
+
this.config = this.validateConfig(e), this.apiService = new B(
|
|
2127
2177
|
this.config.apiKey,
|
|
2128
2178
|
this.config.environment
|
|
2129
2179
|
), this.stateManager = new qt({
|
|
2130
2180
|
mounted: !1,
|
|
2131
2181
|
form: null
|
|
2132
|
-
}), this.formManager = new
|
|
2182
|
+
}), this.formManager = new Ut(
|
|
2133
2183
|
{
|
|
2134
2184
|
locale: this.config.locale,
|
|
2135
2185
|
apiKey: this.config.apiKey,
|
|
@@ -2168,11 +2218,11 @@ class Yt {
|
|
|
2168
2218
|
const t = document.querySelector(e);
|
|
2169
2219
|
if (!t)
|
|
2170
2220
|
throw new Error(`Container ${e} not found`);
|
|
2171
|
-
const
|
|
2172
|
-
return t.appendChild(
|
|
2173
|
-
form:
|
|
2221
|
+
const i = document.createElement("div");
|
|
2222
|
+
return t.appendChild(i), this.stateManager.updateState({
|
|
2223
|
+
form: i,
|
|
2174
2224
|
mounted: !0
|
|
2175
|
-
}), this.formManager.mount(
|
|
2225
|
+
}), this.formManager.mount(i), this;
|
|
2176
2226
|
}
|
|
2177
2227
|
unmount() {
|
|
2178
2228
|
const { mounted: e } = this.stateManager.getState();
|
|
@@ -2190,16 +2240,16 @@ class Yt {
|
|
|
2190
2240
|
formData: t
|
|
2191
2241
|
}) {
|
|
2192
2242
|
try {
|
|
2193
|
-
const
|
|
2243
|
+
const i = await this.apiService.authorizePayment({
|
|
2194
2244
|
checkoutKey: this.config.checkoutKey,
|
|
2195
2245
|
formData: t || null,
|
|
2196
2246
|
token: e?.token || null,
|
|
2197
2247
|
paymentId: this.config.paymentId,
|
|
2198
2248
|
returnUrl: this.config.returnUrl
|
|
2199
2249
|
});
|
|
2200
|
-
this.handlePaymentResponse(
|
|
2201
|
-
} catch (
|
|
2202
|
-
this.handleAuthorizationError(
|
|
2250
|
+
this.handlePaymentResponse(i);
|
|
2251
|
+
} catch (i) {
|
|
2252
|
+
this.handleAuthorizationError(i);
|
|
2203
2253
|
}
|
|
2204
2254
|
}
|
|
2205
2255
|
handlePaymentResponse(e) {
|
|
@@ -2216,15 +2266,15 @@ class Yt {
|
|
|
2216
2266
|
t && this.formManager.update({ errorMsg: e.details?.message });
|
|
2217
2267
|
}
|
|
2218
2268
|
}
|
|
2219
|
-
typeof globalThis < "u" && (globalThis.OdusCheckout =
|
|
2269
|
+
typeof globalThis < "u" && (globalThis.OdusCheckout = Gt);
|
|
2220
2270
|
export {
|
|
2221
|
-
|
|
2222
|
-
|
|
2223
|
-
|
|
2224
|
-
|
|
2225
|
-
|
|
2226
|
-
|
|
2227
|
-
|
|
2228
|
-
|
|
2229
|
-
|
|
2271
|
+
Gt as OdusCheckout,
|
|
2272
|
+
ne as deLocale,
|
|
2273
|
+
fe as enLocale,
|
|
2274
|
+
we as esLocale,
|
|
2275
|
+
Ae as frLocale,
|
|
2276
|
+
je as itLocale,
|
|
2277
|
+
Xe as plLocale,
|
|
2278
|
+
nt as ptLocale,
|
|
2279
|
+
ft as trLocale
|
|
2230
2280
|
};
|