fansunited-frontend-components 0.0.31-RC6 → 0.0.31

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.
@@ -1,844 +0,0 @@
1
- import { jsx as o, Fragment as W, jsxs as C } from "react/jsx-runtime";
2
- import { useTheme as ie, FormControl as B, Box as K, Checkbox as ke, Typography as w, Link as J, Stack as ae, FormLabel as _, Input as j, Select as ye, Option as xe, Autocomplete as Je, AutocompleteOption as Ke, ListItemDecorator as Qe, ListItemContent as Ve, Textarea as Xe, Button as le } from "@mui/joy";
3
- import { b as Pe, C as Le, g as be, c as Ne, d as Ye, e as Ze, f as ce, h as Fe, j as eo, k as Be, A as ve, m as oo } from "./Portal-BWqqFvVm.js";
4
- import { useState as q, useEffect as ro, createElement as to } from "react";
5
- function no(d) {
6
- const {
7
- sdk: h,
8
- fields: a = ["fullName", "email"],
9
- campaignId: u = "",
10
- campaignName: p = "",
11
- contentType: c = "",
12
- contentId: S = "",
13
- contentName: D = "",
14
- syncWithProfile: A = !1
15
- } = d, { leadPhoneCountryCode: N, language: P } = Pe(Le), [t, b] = q({
16
- firstName: "",
17
- lastName: "",
18
- fullName: "",
19
- email: "",
20
- gender: "",
21
- country: "",
22
- phoneCountryCode: N ? be(N) : Ne(P || "en"),
23
- phoneNumber: "",
24
- customFields: {}
25
- });
26
- ro(() => {
27
- const s = N ? be(N) : Ne(P || "en");
28
- b((g) => !g.phoneNumber || !g.phoneCountryCode ? { ...g, phoneCountryCode: s } : g);
29
- }, [N, P]);
30
- const [r, e] = q({}), [L, k] = q(!1), [m, v] = q(!1), [E, f] = q(null), M = () => f(null), F = (s) => (g) => {
31
- b((l) => ({
32
- ...l,
33
- [s]: g.target.value
34
- }));
35
- }, Q = (s) => (g) => {
36
- const l = g.target.value;
37
- e((y) => ({ ...y, [s]: l }));
38
- }, V = (s, g) => {
39
- b((l) => ({
40
- ...l,
41
- phoneCountryCode: g
42
- }));
43
- }, Z = (s, g) => {
44
- b((l) => ({
45
- ...l,
46
- country: g || ""
47
- }));
48
- }, ee = (s, g) => {
49
- b((l) => ({
50
- ...l,
51
- gender: g || ""
52
- }));
53
- }, oe = async () => {
54
- if (A)
55
- try {
56
- const s = h.profile.getOwn();
57
- if (t.fullName && a.includes("fullName") ? s.setName(t.fullName.trim()) : t.firstName && a.includes("firstName") && t.lastName && a.includes("lastName") ? s.setName(
58
- t.firstName.trim() + " " + t.lastName.trim()
59
- ) : t.firstName && a.includes("firstName") ? s.setName(t.firstName.trim()) : t.lastName && a.includes("lastName") && s.setName(t.lastName.trim()), t.email && a.includes("email") && s.setEmail(t.email.trim()), t.gender && a.includes("gender") && s.setGender(t.gender), t.country && a.includes("country")) {
60
- const g = await h.profile.getCountries(), l = Ze(t.country), y = g.find(($) => $.name === (l == null ? void 0 : l.label));
61
- y && s.setCountry(y.id);
62
- }
63
- t.phoneCountryCode && a.includes("phoneCountryCode") && s.setPhoneCountryCode(
64
- "+" + t.phoneCountryCode.phone
65
- ), t.phoneNumber && a.includes("phoneNumber") && s.setPhoneNumber(t.phoneNumber.trim()), await s.update();
66
- } catch (s) {
67
- console.warn("[LeadForm] Failed to sync profile data:", s);
68
- }
69
- };
70
- return {
71
- formData: t,
72
- setFormData: b,
73
- isLoading: L,
74
- isSuccess: m,
75
- error: E,
76
- clearError: M,
77
- handleInputChange: F,
78
- handleCustomFieldChange: Q,
79
- customFieldsData: r,
80
- handlePhoneCountryChange: V,
81
- handleCountryChange: Z,
82
- handleGenderChange: ee,
83
- handleSubmit: async (s) => {
84
- var $;
85
- s && s.preventDefault(), f(null);
86
- const g = {
87
- firstName: t.firstName,
88
- lastName: t.lastName,
89
- fullName: t.fullName,
90
- email: t.email,
91
- gender: t.gender,
92
- country: t.country,
93
- phoneCountryCode: "+" + ((($ = t.phoneCountryCode) == null ? void 0 : $.phone) ?? ""),
94
- phoneNumber: t.phoneNumber,
95
- campaignId: u,
96
- campaignName: p,
97
- contentType: c,
98
- contentId: S,
99
- contentName: D,
100
- customFields: r
101
- }, l = [
102
- "firstName",
103
- "lastName",
104
- "fullName",
105
- "email",
106
- "gender",
107
- "country",
108
- "phoneCountryCode",
109
- "phoneNumber",
110
- "customFields"
111
- ], y = Object.fromEntries(
112
- Object.entries(g).map(([I, T]) => l.includes(I) ? I === "customFields" ? [I, T] : a.includes(I) && T !== "" && T !== null ? [I, T] : [I, null] : [I, T])
113
- );
114
- k(!0);
115
- try {
116
- await h.profile.collectLead(y), await oe(), v(!0);
117
- } catch {
118
- f("leads.form.error");
119
- } finally {
120
- k(!1);
121
- }
122
- },
123
- countries: Ye
124
- };
125
- }
126
- const lo = (d) => {
127
- const h = ie(), { t: a } = ce();
128
- if (!d.brandingUrls)
129
- return /* @__PURE__ */ o(W, {});
130
- const { privacyPolicyUrl: u, termsAndConditionsUrl: p } = d.brandingUrls;
131
- if (!u && !p)
132
- return /* @__PURE__ */ o(W, {});
133
- const c = () => u && !p ? /* @__PURE__ */ C(w, { children: [
134
- a("common.labels.iAgreeToThe"),
135
- " ",
136
- /* @__PURE__ */ o(
137
- J,
138
- {
139
- href: u,
140
- target: "_blank",
141
- rel: "noopener noreferrer",
142
- sx: {
143
- color: d.primaryColor,
144
- textDecorationColor: d.primaryColor
145
- },
146
- children: a("leads.form.privacyPolicy")
147
- }
148
- )
149
- ] }) : !u && p ? /* @__PURE__ */ C(w, { children: [
150
- a("common.labels.iAgreeToThe"),
151
- " ",
152
- /* @__PURE__ */ o(
153
- J,
154
- {
155
- href: p,
156
- target: "_blank",
157
- rel: "noopener noreferrer",
158
- sx: {
159
- color: d.primaryColor,
160
- textDecorationColor: d.primaryColor
161
- },
162
- children: a("leads.form.termsAndConditions")
163
- }
164
- )
165
- ] }) : /* @__PURE__ */ C(w, { children: [
166
- a("common.labels.iAgreeToThe"),
167
- " ",
168
- /* @__PURE__ */ o(
169
- J,
170
- {
171
- href: u,
172
- target: "_blank",
173
- rel: "noopener noreferrer",
174
- sx: {
175
- color: d.primaryColor,
176
- textDecorationColor: d.primaryColor
177
- },
178
- children: a("leads.form.privacyPolicy")
179
- }
180
- ),
181
- " ",
182
- a("common.labels.andThe"),
183
- " ",
184
- /* @__PURE__ */ o(
185
- J,
186
- {
187
- href: p,
188
- target: "_blank",
189
- rel: "noopener noreferrer",
190
- sx: {
191
- color: d.primaryColor,
192
- textDecorationColor: d.primaryColor
193
- },
194
- children: a("leads.form.termsAndConditions")
195
- }
196
- )
197
- ] });
198
- return /* @__PURE__ */ o(B, { required: !0, disabled: d.isDisabled, size: "sm", children: /* @__PURE__ */ C(K, { sx: { display: "inline-flex", alignItems: "center", gap: "8px" }, children: [
199
- /* @__PURE__ */ o(
200
- ke,
201
- {
202
- slotProps: {
203
- input: {
204
- sx: {}
205
- },
206
- checkbox: {
207
- sx: {
208
- "&.Mui-checked": {
209
- bgcolor: d.primaryColor,
210
- "--Icon-color": "#FFF"
211
- },
212
- "&:not(.Mui-checked):not(.Mui-disabled):hover": {
213
- bgcolor: h.colorSchemes.light.palette.neutral.outlinedHoverBg
214
- },
215
- bgcolor: h.colorSchemes.light.palette.background.surface
216
- }
217
- }
218
- }
219
- }
220
- ),
221
- c()
222
- ] }) });
223
- }, io = (d) => {
224
- const { consents: h, isDisabled: a, primaryColor: u, brandingUrls: p, labels: c, onChange: S } = d, D = ie(), { t: A } = ce(), [N, P] = q({}), t = (r) => (e) => {
225
- const L = { ...N, [r]: e.target.checked };
226
- P(L), S == null || S(L);
227
- }, b = (r) => {
228
- const e = [], L = /\{\{(privacyPolicyUrl|termsAndConditionsUrl)\}\}/g;
229
- let k = 0, m;
230
- for (; (m = L.exec(r)) !== null; ) {
231
- const E = r.slice(k, m.index);
232
- E && e.push(
233
- /* @__PURE__ */ o(w, { component: "span", children: E }, `text-${k}`)
234
- );
235
- const f = m[1], M = p == null ? void 0 : p[f], F = f === "privacyPolicyUrl" ? (c == null ? void 0 : c.privacyPolicyUrlLabel) || A("leads.form.privacyPolicy") : (c == null ? void 0 : c.termsAndConditionsUrlLabel) || A("leads.form.termsAndConditions");
236
- M ? e.push(
237
- /* @__PURE__ */ o(
238
- J,
239
- {
240
- href: M,
241
- target: "_blank",
242
- rel: "noopener noreferrer",
243
- sx: { color: u, textDecorationColor: u },
244
- children: F
245
- },
246
- `link-${e.length}`
247
- )
248
- ) : (console.warn(
249
- `[CollectLead] Consent label contains {{${f}}} but branding.urls.${f} is not provided.`
250
- ), e.push(
251
- /* @__PURE__ */ o(w, { component: "span", children: F }, `plain-${e.length}`)
252
- )), k = L.lastIndex;
253
- }
254
- const v = r.slice(k);
255
- return v && e.push(
256
- /* @__PURE__ */ o(w, { component: "span", children: v }, "text-after")
257
- ), /* @__PURE__ */ o(w, { component: "span", children: e });
258
- };
259
- return /* @__PURE__ */ o(ae, { spacing: 1, children: h.map((r) => /* @__PURE__ */ o(
260
- B,
261
- {
262
- disabled: a,
263
- size: "sm",
264
- children: /* @__PURE__ */ C(
265
- K,
266
- {
267
- sx: { display: "inline-flex", alignItems: "center", gap: "8px" },
268
- children: [
269
- /* @__PURE__ */ o(
270
- ke,
271
- {
272
- checked: !!N[r.id],
273
- onChange: t(r.id),
274
- slotProps: {
275
- checkbox: {
276
- sx: {
277
- "&.Mui-checked": {
278
- bgcolor: u,
279
- "--Icon-color": "#FFF"
280
- },
281
- "&:not(.Mui-checked):not(.Mui-disabled):hover": {
282
- bgcolor: D.colorSchemes.light.palette.neutral.outlinedHoverBg
283
- },
284
- bgcolor: D.colorSchemes.light.palette.background.surface
285
- }
286
- }
287
- }
288
- }
289
- ),
290
- b(r.label)
291
- ]
292
- }
293
- )
294
- },
295
- `consent-${r.id}`
296
- )) });
297
- }, ao = [
298
- "fullName",
299
- "firstName",
300
- "lastName",
301
- "email",
302
- "gender",
303
- "country",
304
- "phoneCountryCode",
305
- "phoneNumber"
306
- ], O = {
307
- phoneContainer: { display: "flex", gap: 1 },
308
- countrySelect: { width: "45%" },
309
- phoneInput: { width: "100%" },
310
- listItemContent: { fontSize: "sm" },
311
- submitButton: { mt: 2 }
312
- }, co = (d) => {
313
- var de, ue, me, he, pe, fe;
314
- const [h, a] = q({}), {
315
- sdk: u,
316
- brandingColors: p,
317
- brandingUrls: c,
318
- fields: S = ["fullName", "email"],
319
- campaignId: D = "",
320
- campaignName: A = "",
321
- contentType: N = "",
322
- contentId: P = "",
323
- contentName: t = "",
324
- formCustomFields: b,
325
- onSuccessCta: r,
326
- labels: e,
327
- syncWithProfile: L = !1,
328
- isSubmittingParticipation: k = !1
329
- } = d, m = S.map((n) => n && n.trim()).filter((n) => ao.includes(n)), {
330
- formData: v,
331
- isLoading: E,
332
- isSuccess: f,
333
- error: M,
334
- handleInputChange: F,
335
- handleCustomFieldChange: Q,
336
- customFieldsData: V,
337
- handlePhoneCountryChange: Z,
338
- handleCountryChange: ee,
339
- handleGenderChange: oe,
340
- handleSubmit: se,
341
- countries: s
342
- } = no({
343
- sdk: u,
344
- fields: m,
345
- campaignId: D,
346
- campaignName: A,
347
- contentType: N,
348
- contentId: P,
349
- contentName: t,
350
- syncWithProfile: L
351
- }), { shadowRootElement: g } = Pe(Le), { t: l } = ce(), y = ie(), $ = Fe(), I = eo(), T = Be().primary, we = $.textPrimary, R = (p == null ? void 0 : p.primaryColor) || ((ue = (de = $.palette) == null ? void 0 : de.primary) == null ? void 0 : ue.plainColor), z = (he = (me = $.palette) == null ? void 0 : me.primary) == null ? void 0 : he.onPrimary, X = (p == null ? void 0 : p.primaryColor) || ((fe = (pe = $.palette) == null ? void 0 : pe.primary) == null ? void 0 : fe.primaryContainer), re = I.sm, i = {
352
- background: {
353
- surface: y.colorSchemes.light.palette.background.surface,
354
- popup: y.colorSchemes.light.palette.background.popup
355
- },
356
- neutral: {
357
- outlinedBorder: y.colorSchemes.light.palette.neutral.outlinedBorder,
358
- outlinedColor: y.colorSchemes.light.palette.neutral.outlinedColor,
359
- outlinedHoverBg: y.colorSchemes.light.palette.neutral.outlinedHoverBg,
360
- plainActiveBg: y.colorSchemes.light.palette.neutral.plainActiveBg,
361
- plainHoverBg: y.colorSchemes.light.palette.neutral.plainHoverBg,
362
- plainHoverColor: y.colorSchemes.light.palette.neutral.plainHoverColor
363
- }
364
- }, Se = [
365
- { value: "male", label: l("leads.form.genderOptions.male") },
366
- { value: "female", label: l("leads.form.genderOptions.female") },
367
- { value: "other", label: l("leads.form.genderOptions.other") },
368
- { value: "prefer_not_to_say", label: l("leads.form.genderOptions.notSay") }
369
- ], H = {
370
- color: `${we} !important`,
371
- fontSize: "0.875em"
372
- }, U = {
373
- fontFamily: T,
374
- borderRadius: re,
375
- bgcolor: i.background.surface,
376
- borderColor: i.neutral.outlinedBorder,
377
- color: i.neutral.outlinedColor,
378
- fontSize: "1em",
379
- lineHeight: "2.25em",
380
- "&:hover": {
381
- bgcolor: i.neutral.outlinedHoverBg
382
- },
383
- "&.Mui-disabled": {
384
- borderColor: i.neutral.outlinedBorder
385
- },
386
- "& input:-webkit-autofill": {
387
- WebkitBoxShadow: `0 0 0 1000px ${i.background.surface} inset !important`,
388
- WebkitTextFillColor: `${i.neutral.outlinedColor} !important`,
389
- caretColor: i.neutral.outlinedColor,
390
- borderRadius: re
391
- },
392
- "& input:-webkit-autofill:hover": {
393
- WebkitBoxShadow: `0 0 0 1000px ${i.background.surface} inset !important`,
394
- WebkitTextFillColor: `${i.neutral.outlinedColor} !important`
395
- },
396
- "& input:-webkit-autofill:focus": {
397
- WebkitBoxShadow: `0 0 0 1000px ${i.background.surface} inset !important`,
398
- WebkitTextFillColor: `${i.neutral.outlinedColor} !important`
399
- },
400
- "& input:-webkit-autofill:active": {
401
- WebkitBoxShadow: `0 0 0 1000px ${i.background.surface} inset !important`,
402
- WebkitTextFillColor: `${i.neutral.outlinedColor} !important`
403
- },
404
- "& input:-moz-autofill": {
405
- backgroundColor: `${i.background.surface} !important`,
406
- color: `${i.neutral.outlinedColor} !important`
407
- },
408
- "& input:autofill": {
409
- backgroundColor: `${i.background.surface} !important`,
410
- color: `${i.neutral.outlinedColor} !important`
411
- }
412
- }, Y = {
413
- root: {
414
- sx: {
415
- ...U,
416
- "&:hover": { bgcolor: i.neutral.outlinedHoverBg }
417
- }
418
- },
419
- listbox: {
420
- container: g,
421
- sx: {
422
- zIndex: 10,
423
- bgcolor: i.background.popup,
424
- border: `1px solid ${i.neutral.outlinedBorder}`,
425
- borderRadius: re,
426
- boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1)"
427
- }
428
- }
429
- }, te = {
430
- fontFamily: T,
431
- color: `${i.neutral.outlinedColor} !important`,
432
- bgcolor: "transparent",
433
- "&:hover": {
434
- bgcolor: `${i.neutral.plainHoverBg} !important`,
435
- color: `${i.neutral.plainHoverColor} !important`
436
- },
437
- "&.Mui-selected": {
438
- bgcolor: `${i.neutral.plainActiveBg} !important`,
439
- color: `${i.neutral.outlinedColor} !important`
440
- },
441
- "&.Mui-selected:hover": {
442
- bgcolor: `${i.neutral.plainActiveBg} !important`,
443
- color: `${i.neutral.outlinedColor} !important`
444
- }
445
- }, $e = (e == null ? void 0 : e.fullNameLabel) || l("leads.form.fullName"), Ie = (e == null ? void 0 : e.fullNamePlaceholder) || l("leads.form.fullNamePlaceholder"), Te = (e == null ? void 0 : e.firstNameLabel) || l("leads.form.firstName"), De = (e == null ? void 0 : e.firstNamePlaceholder) || l("leads.form.firstNamePlaceholder"), Ae = (e == null ? void 0 : e.lastNameLabel) || l("leads.form.lastName"), ze = (e == null ? void 0 : e.lastNamePlaceholder) || l("leads.form.lastNamePlaceholder"), He = (e == null ? void 0 : e.emailLabel) || l("leads.form.email"), Ue = (e == null ? void 0 : e.genderLabel) || l("leads.form.gender"), _e = (e == null ? void 0 : e.genderPlaceholder) || l("leads.form.genderPlaceholder"), Oe = (e == null ? void 0 : e.countryLabel) || l("leads.form.country"), We = (e == null ? void 0 : e.countryPlaceholder) || l("leads.form.countryPlaceholder"), Me = (e == null ? void 0 : e.phoneNumberLabel) || l("leads.form.phone"), qe = (e == null ? void 0 : e.phoneNumberPlaceholder) || l("leads.form.phonePlaceholder"), Ee = (n) => {
446
- const x = (e == null ? void 0 : e.privacyPolicyUrlLabel) || "Privacy Policy", G = (e == null ? void 0 : e.termsAndConditionsUrlLabel) || "Terms and Conditions";
447
- return n.replace(/\{\{privacyPolicyUrl\}\}/g, x).replace(/\{\{termsAndConditionsUrl\}\}/g, G);
448
- }, Re = (n) => {
449
- a(n);
450
- }, je = async (n) => {
451
- await se(n);
452
- try {
453
- const x = (d.consents || []).filter(
454
- (G) => h[G.id]
455
- );
456
- if (x.length > 0) {
457
- const G = x.map((ge) => {
458
- const ne = {
459
- consentId: ge.id,
460
- content: Ee(ge.label)
461
- };
462
- P && (ne.entityId = P);
463
- const Ce = oo(N);
464
- return Ce && (ne.entityType = Ce), ne;
465
- });
466
- await u.profile.collectConsents(G);
467
- }
468
- } catch (x) {
469
- console.warn("[CollectLead] Failed to collect consents", x);
470
- }
471
- }, Ge = () => r != null && r.component ? r.component : r != null && r.onClick ? /* @__PURE__ */ o(
472
- le,
473
- {
474
- size: "lg",
475
- loading: k,
476
- sx: {
477
- ...O.submitButton,
478
- bgcolor: R,
479
- color: z,
480
- ":hover": {
481
- bgcolor: X,
482
- color: z
483
- },
484
- fontSize: "1em"
485
- },
486
- onClick: r.onClick,
487
- children: r.defaultLabel
488
- }
489
- ) : r != null && r.url ? typeof window > "u" ? /* @__PURE__ */ o(
490
- K,
491
- {
492
- component: "a",
493
- href: r.url,
494
- target: (r == null ? void 0 : r.target) || "_self",
495
- sx: {
496
- ...O.submitButton,
497
- bgcolor: R,
498
- color: z,
499
- ":hover": {
500
- bgcolor: X,
501
- color: z
502
- },
503
- fontSize: "1em",
504
- textDecoration: "none",
505
- display: "inline-flex",
506
- alignItems: "center",
507
- justifyContent: "center"
508
- },
509
- children: r.defaultLabel
510
- }
511
- ) : /* @__PURE__ */ o(
512
- le,
513
- {
514
- size: "lg",
515
- sx: {
516
- ...O.submitButton,
517
- bgcolor: R,
518
- color: z,
519
- ":hover": {
520
- bgcolor: X,
521
- color: z
522
- },
523
- fontSize: "1em"
524
- },
525
- onClick: () => {
526
- (r == null ? void 0 : r.target) === "_blank" ? window.open(r == null ? void 0 : r.url, "_blank") : window.location.href = r == null ? void 0 : r.url;
527
- },
528
- children: r.defaultLabel
529
- }
530
- ) : /* @__PURE__ */ o(W, {});
531
- return /* @__PURE__ */ o("form", { onSubmit: je, children: /* @__PURE__ */ C(ae, { spacing: 2, sx: { fontFamily: T }, children: [
532
- m.includes("fullName") && /* @__PURE__ */ C(B, { required: !0, disabled: f, children: [
533
- /* @__PURE__ */ o(_, { sx: H, children: $e }),
534
- /* @__PURE__ */ o(
535
- j,
536
- {
537
- value: v.fullName,
538
- onChange: F("fullName"),
539
- placeholder: Ie,
540
- sx: U
541
- }
542
- )
543
- ] }),
544
- m.includes("firstName") && /* @__PURE__ */ C(B, { required: !0, disabled: f, children: [
545
- /* @__PURE__ */ o(_, { sx: H, children: Te }),
546
- /* @__PURE__ */ o(
547
- j,
548
- {
549
- value: v.firstName,
550
- onChange: F("firstName"),
551
- placeholder: De,
552
- sx: U
553
- }
554
- )
555
- ] }),
556
- m.includes("lastName") && /* @__PURE__ */ C(B, { required: !0, disabled: f, children: [
557
- /* @__PURE__ */ o(_, { sx: H, children: Ae }),
558
- /* @__PURE__ */ o(
559
- j,
560
- {
561
- value: v.lastName,
562
- onChange: F("lastName"),
563
- placeholder: ze,
564
- sx: U
565
- }
566
- )
567
- ] }),
568
- m.includes("email") && /* @__PURE__ */ C(B, { required: !0, disabled: f, children: [
569
- /* @__PURE__ */ o(_, { sx: H, children: He }),
570
- /* @__PURE__ */ o(
571
- j,
572
- {
573
- type: "email",
574
- value: v.email,
575
- onChange: F("email"),
576
- placeholder: "your.email@example.com",
577
- sx: U
578
- }
579
- )
580
- ] }),
581
- m.includes("gender") && /* @__PURE__ */ C(B, { disabled: f, children: [
582
- /* @__PURE__ */ o(_, { sx: H, children: Ue }),
583
- /* @__PURE__ */ o(
584
- ye,
585
- {
586
- value: v.gender,
587
- onChange: oe,
588
- placeholder: _e,
589
- slotProps: Y,
590
- children: Se.map((n) => /* @__PURE__ */ o(
591
- xe,
592
- {
593
- value: n.value,
594
- sx: te,
595
- children: n.label
596
- },
597
- n.value
598
- ))
599
- }
600
- )
601
- ] }),
602
- m.includes("country") && /* @__PURE__ */ C(B, { required: !0, disabled: f, children: [
603
- /* @__PURE__ */ o(_, { sx: H, children: Oe }),
604
- /* @__PURE__ */ o(
605
- ye,
606
- {
607
- value: v.country,
608
- onChange: ee,
609
- placeholder: We,
610
- slotProps: Y,
611
- children: s.map((n) => /* @__PURE__ */ o(
612
- xe,
613
- {
614
- value: n.code,
615
- sx: te,
616
- children: n.label
617
- },
618
- `${n.code}-${n.label}`
619
- ))
620
- }
621
- )
622
- ] }),
623
- (m.includes("phoneCountryCode") || m.includes("phoneNumber")) && /* @__PURE__ */ C(B, { required: !0, disabled: f, children: [
624
- /* @__PURE__ */ o(_, { sx: H, children: Me }),
625
- /* @__PURE__ */ C(K, { sx: O.phoneContainer, children: [
626
- m.includes("phoneCountryCode") && /* @__PURE__ */ o(
627
- Je,
628
- {
629
- value: v.phoneCountryCode,
630
- onChange: Z,
631
- slotProps: {
632
- input: { autoComplete: "new-phone-country-code" },
633
- listbox: Y.listbox,
634
- root: Y.root,
635
- clearIndicator: {
636
- sx: {
637
- "&:hover": {
638
- bgcolor: i.neutral.plainHoverBg,
639
- color: i.neutral.plainHoverColor
640
- }
641
- }
642
- },
643
- popupIndicator: {
644
- sx: {
645
- "&:hover": {
646
- bgcolor: i.neutral.plainHoverBg,
647
- color: i.neutral.plainHoverColor
648
- }
649
- }
650
- }
651
- },
652
- sx: O.countrySelect,
653
- options: s,
654
- autoHighlight: !0,
655
- getOptionLabel: (n) => `+${n.phone}`,
656
- renderOption: (n, x) => /* @__PURE__ */ to(
657
- Ke,
658
- {
659
- ...n,
660
- key: `autocomplete-${x.code}-${x.label}`,
661
- sx: {
662
- ...te,
663
- "&[aria-selected='true']": {
664
- bgcolor: i.neutral.plainActiveBg
665
- }
666
- }
667
- },
668
- /* @__PURE__ */ o(Qe, { children: /* @__PURE__ */ o(
669
- "img",
670
- {
671
- loading: "lazy",
672
- width: "20",
673
- srcSet: `https://flagcdn.com/w40/${x.code.toLowerCase()}.png 2x`,
674
- src: `https://flagcdn.com/w20/${x.code.toLowerCase()}.png`,
675
- alt: ""
676
- }
677
- ) }),
678
- /* @__PURE__ */ C(Ve, { sx: O.listItemContent, children: [
679
- x.label,
680
- /* @__PURE__ */ C(w, { level: "body-xs", children: [
681
- "+",
682
- x.phone
683
- ] })
684
- ] })
685
- )
686
- }
687
- ),
688
- m.includes("phoneNumber") && /* @__PURE__ */ o(
689
- j,
690
- {
691
- value: v.phoneNumber,
692
- onChange: F("phoneNumber"),
693
- placeholder: qe,
694
- sx: {
695
- ...O.phoneInput,
696
- ...U
697
- }
698
- }
699
- )
700
- ] })
701
- ] }),
702
- b && b.length > 0 ? b.map((n, x) => /* @__PURE__ */ C(
703
- B,
704
- {
705
- disabled: f,
706
- required: n.required || !1,
707
- children: [
708
- /* @__PURE__ */ o(_, { sx: H, children: n.label }),
709
- n.type === "textarea" ? /* @__PURE__ */ o(
710
- Xe,
711
- {
712
- value: V[n.key] || "",
713
- onChange: Q(n.key),
714
- placeholder: n.placeholder || "",
715
- sx: U,
716
- minRows: 3
717
- }
718
- ) : /* @__PURE__ */ o(
719
- j,
720
- {
721
- value: V[n.key] || "",
722
- onChange: Q(n.key),
723
- placeholder: n.placeholder,
724
- sx: U
725
- }
726
- )
727
- ]
728
- },
729
- `custom-field-${n.key}-${x}`
730
- )) : null,
731
- d.consents && d.consents.length > 0 ? /* @__PURE__ */ o(
732
- io,
733
- {
734
- consents: d.consents,
735
- isDisabled: f,
736
- primaryColor: R,
737
- brandingUrls: c,
738
- labels: e,
739
- onChange: Re
740
- }
741
- ) : /* @__PURE__ */ o(
742
- lo,
743
- {
744
- primaryColor: R,
745
- brandingUrls: c,
746
- isDisabled: f
747
- }
748
- ),
749
- M && /* @__PURE__ */ o(ve, { variant: "error", message: l(M) }),
750
- f ? /* @__PURE__ */ C(W, { children: [
751
- e != null && e.successTitle || e != null && e.successDescription ? /* @__PURE__ */ o(
752
- ve,
753
- {
754
- variant: "success",
755
- title: e == null ? void 0 : e.successTitle,
756
- description: e == null ? void 0 : e.successDescription
757
- }
758
- ) : /* @__PURE__ */ o(W, {}),
759
- Ge()
760
- ] }) : /* @__PURE__ */ o(
761
- le,
762
- {
763
- type: "submit",
764
- loading: E,
765
- size: "lg",
766
- sx: {
767
- ...O.submitButton,
768
- bgcolor: R,
769
- color: z,
770
- ":hover": { bgcolor: X, color: z },
771
- fontSize: "0.8125em"
772
- },
773
- children: e == null ? void 0 : e.submitButtonLabel
774
- }
775
- )
776
- ] }) });
777
- }, po = ({
778
- sdk: d,
779
- content: h,
780
- campaign: a,
781
- branding: u,
782
- fields: p = ["fullName", "email"],
783
- labels: c,
784
- onSuccessCta: S,
785
- customFields: D,
786
- consents: A,
787
- syncWithProfile: N = !1,
788
- isSubmittingParticipation: P = !1
789
- }) => {
790
- var k;
791
- const t = Fe(), b = t.textColor, r = ((k = u == null ? void 0 : u.colors) == null ? void 0 : k.secondaryColor) || t.textColor, e = Be().primary, L = p.map((m) => m && m.trim());
792
- return /* @__PURE__ */ C(ae, { spacing: 2, zIndex: 10, width: "100%", children: [
793
- c != null && c.title || c != null && c.description ? /* @__PURE__ */ C(K, { children: [
794
- c != null && c.title ? /* @__PURE__ */ o(
795
- w,
796
- {
797
- level: "h4",
798
- sx: {
799
- fontFamily: e,
800
- color: b,
801
- fontSize: "1.25em"
802
- },
803
- children: c.title
804
- }
805
- ) : /* @__PURE__ */ o(W, {}),
806
- c != null && c.description ? /* @__PURE__ */ o(
807
- w,
808
- {
809
- level: "body-sm",
810
- sx: {
811
- fontFamily: e,
812
- color: r,
813
- opacity: 0.6,
814
- fontSize: "0.875em"
815
- },
816
- children: c == null ? void 0 : c.description
817
- }
818
- ) : /* @__PURE__ */ o(W, {})
819
- ] }) : /* @__PURE__ */ o(W, {}),
820
- /* @__PURE__ */ o(
821
- co,
822
- {
823
- sdk: d,
824
- brandingColors: u == null ? void 0 : u.colors,
825
- brandingUrls: u == null ? void 0 : u.urls,
826
- campaignId: a == null ? void 0 : a.id,
827
- campaignName: a == null ? void 0 : a.name,
828
- contentName: h == null ? void 0 : h.name,
829
- contentType: h == null ? void 0 : h.type,
830
- contentId: h == null ? void 0 : h.id,
831
- onSuccessCta: S,
832
- fields: L,
833
- labels: c,
834
- formCustomFields: D,
835
- consents: A,
836
- syncWithProfile: N,
837
- isSubmittingParticipation: P
838
- }
839
- )
840
- ] });
841
- };
842
- export {
843
- po as C
844
- };