@iqworksai/consentiq-react 0.1.4 → 0.1.6
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/README.md +10 -10
- package/dist/index.d.mts +192 -14
- package/dist/index.d.ts +192 -14
- package/dist/index.js +739 -125
- package/dist/index.mjs +729 -122
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -20,10 +20,15 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
20
20
|
// src/index.ts
|
|
21
21
|
var index_exports = {};
|
|
22
22
|
__export(index_exports, {
|
|
23
|
+
ConsentForm: () => ConsentForm,
|
|
23
24
|
ConsentGate: () => ConsentGate,
|
|
24
25
|
ConsentIQApiClient: () => ConsentIQApiClient,
|
|
25
26
|
ConsentIQProvider: () => ConsentIQProvider,
|
|
27
|
+
ConsentPageTrigger: () => ConsentPageTrigger,
|
|
28
|
+
ConsentTrigger: () => ConsentTrigger,
|
|
26
29
|
CookieBanner: () => CookieBanner,
|
|
30
|
+
LanguageSelector: () => LanguageSelector,
|
|
31
|
+
MarketingConsentForm: () => MarketingConsentForm,
|
|
27
32
|
PreferenceCenter: () => PreferenceCenter,
|
|
28
33
|
detectCountry: () => detectCountry,
|
|
29
34
|
detectLanguage: () => detectLanguage,
|
|
@@ -32,6 +37,8 @@ __export(index_exports, {
|
|
|
32
37
|
useConsent: () => useConsent,
|
|
33
38
|
useConsentGate: () => useConsentGate,
|
|
34
39
|
useConsentIQ: () => useConsentIQ,
|
|
40
|
+
useConsentPurposes: () => useConsentPurposes,
|
|
41
|
+
useFormConsent: () => useFormConsent,
|
|
35
42
|
withConsentGate: () => withConsentGate
|
|
36
43
|
});
|
|
37
44
|
module.exports = __toCommonJS(index_exports);
|
|
@@ -40,7 +47,7 @@ module.exports = __toCommonJS(index_exports);
|
|
|
40
47
|
var import_react = require("react");
|
|
41
48
|
|
|
42
49
|
// src/api-client.ts
|
|
43
|
-
var DEFAULT_API_URL = "https://
|
|
50
|
+
var DEFAULT_API_URL = "https://consent.iqworks.ai";
|
|
44
51
|
var ConsentIQApiClient = class {
|
|
45
52
|
constructor(propertyKey, apiUrl, debug = false) {
|
|
46
53
|
this.propertyKey = propertyKey;
|
|
@@ -171,6 +178,11 @@ var DEFAULT_CONSENT = {
|
|
|
171
178
|
social: false
|
|
172
179
|
};
|
|
173
180
|
var CONSENT_STORAGE_KEY = "consentiq_consent";
|
|
181
|
+
var RTL_LANGUAGES = /* @__PURE__ */ new Set(["ar", "he", "fa", "ur", "ps", "sd", "dv", "yi"]);
|
|
182
|
+
function isRtlLanguage(lang) {
|
|
183
|
+
if (!lang) return false;
|
|
184
|
+
return RTL_LANGUAGES.has(lang.split("-")[0].toLowerCase());
|
|
185
|
+
}
|
|
174
186
|
function ConsentIQProvider({
|
|
175
187
|
children,
|
|
176
188
|
propertyKey,
|
|
@@ -182,6 +194,7 @@ function ConsentIQProvider({
|
|
|
182
194
|
onClose,
|
|
183
195
|
autoShow = true,
|
|
184
196
|
language: preferredLanguage,
|
|
197
|
+
locale,
|
|
185
198
|
debug = false
|
|
186
199
|
}) {
|
|
187
200
|
const [config, setConfig] = (0, import_react.useState)(null);
|
|
@@ -193,7 +206,6 @@ function ConsentIQProvider({
|
|
|
193
206
|
const [language, setLanguage] = (0, import_react.useState)("en");
|
|
194
207
|
const [regulation, setRegulation] = (0, import_react.useState)(null);
|
|
195
208
|
const [subjectId, setSubjectId] = (0, import_react.useState)("");
|
|
196
|
-
const [hasExistingConsent, setHasExistingConsent] = (0, import_react.useState)(false);
|
|
197
209
|
const apiClient = (0, import_react.useMemo)(
|
|
198
210
|
() => new ConsentIQApiClient(propertyKey, apiUrl, debug),
|
|
199
211
|
[propertyKey, apiUrl, debug]
|
|
@@ -223,7 +235,7 @@ function ConsentIQProvider({
|
|
|
223
235
|
setSubjectId(sid);
|
|
224
236
|
const propertyConfig = await apiClient.getConfig();
|
|
225
237
|
setConfig(propertyConfig);
|
|
226
|
-
const detectedLang = preferredLanguage || detectLanguage(propertyConfig.property.supportedLanguages);
|
|
238
|
+
const detectedLang = preferredLanguage || locale || detectLanguage(propertyConfig.property.supportedLanguages);
|
|
227
239
|
setLanguage(detectedLang);
|
|
228
240
|
const country = detectCountry();
|
|
229
241
|
if (country && propertyConfig.geoRules) {
|
|
@@ -242,14 +254,12 @@ function ConsentIQProvider({
|
|
|
242
254
|
if (existingConsent.marketingConsents) {
|
|
243
255
|
setMarketingConsent(existingConsent.marketingConsents);
|
|
244
256
|
}
|
|
245
|
-
setHasExistingConsent(true);
|
|
246
257
|
saveLocalConsent(existingConsent.cookieConsents);
|
|
247
258
|
foundExistingConsent = true;
|
|
248
259
|
} else {
|
|
249
260
|
const localConsent = loadLocalConsent();
|
|
250
261
|
if (localConsent) {
|
|
251
262
|
setConsent(localConsent);
|
|
252
|
-
setHasExistingConsent(true);
|
|
253
263
|
foundExistingConsent = true;
|
|
254
264
|
}
|
|
255
265
|
}
|
|
@@ -271,6 +281,7 @@ function ConsentIQProvider({
|
|
|
271
281
|
providedSubjectId,
|
|
272
282
|
autoGenerateSubjectId,
|
|
273
283
|
preferredLanguage,
|
|
284
|
+
locale,
|
|
274
285
|
autoShow
|
|
275
286
|
]);
|
|
276
287
|
const submitConsent = (0, import_react.useCallback)(
|
|
@@ -319,10 +330,10 @@ function ConsentIQProvider({
|
|
|
319
330
|
allAccepted.social = true;
|
|
320
331
|
}
|
|
321
332
|
setConsent(allAccepted);
|
|
322
|
-
await submitConsent(allAccepted, marketingConsent);
|
|
323
333
|
setIsBannerVisible(false);
|
|
324
334
|
setIsPreferenceCenterVisible(false);
|
|
325
335
|
onClose?.();
|
|
336
|
+
void submitConsent(allAccepted, marketingConsent);
|
|
326
337
|
}, [config, marketingConsent, submitConsent, onClose]);
|
|
327
338
|
const rejectAll = (0, import_react.useCallback)(async () => {
|
|
328
339
|
const allRejected = {
|
|
@@ -334,10 +345,10 @@ function ConsentIQProvider({
|
|
|
334
345
|
social: false
|
|
335
346
|
};
|
|
336
347
|
setConsent(allRejected);
|
|
337
|
-
await submitConsent(allRejected, {});
|
|
338
348
|
setIsBannerVisible(false);
|
|
339
349
|
setIsPreferenceCenterVisible(false);
|
|
340
350
|
onClose?.();
|
|
351
|
+
void submitConsent(allRejected, {});
|
|
341
352
|
}, [submitConsent, onClose]);
|
|
342
353
|
const updateConsent = (0, import_react.useCallback)(
|
|
343
354
|
async (updates) => {
|
|
@@ -348,7 +359,7 @@ function ConsentIQProvider({
|
|
|
348
359
|
// Always enforce necessary
|
|
349
360
|
};
|
|
350
361
|
setConsent(newConsent);
|
|
351
|
-
|
|
362
|
+
void submitConsent(newConsent, marketingConsent);
|
|
352
363
|
},
|
|
353
364
|
[consent, marketingConsent, submitConsent]
|
|
354
365
|
);
|
|
@@ -356,10 +367,13 @@ function ConsentIQProvider({
|
|
|
356
367
|
async (updates) => {
|
|
357
368
|
const newMarketingConsent = { ...marketingConsent, ...updates };
|
|
358
369
|
setMarketingConsent(newMarketingConsent);
|
|
359
|
-
|
|
370
|
+
void submitConsent(consent, newMarketingConsent);
|
|
360
371
|
},
|
|
361
372
|
[consent, marketingConsent, submitConsent]
|
|
362
373
|
);
|
|
374
|
+
const changeLanguage = (0, import_react.useCallback)((lang) => {
|
|
375
|
+
setLanguage(lang);
|
|
376
|
+
}, []);
|
|
363
377
|
const showBanner = (0, import_react.useCallback)(() => {
|
|
364
378
|
setIsBannerVisible(true);
|
|
365
379
|
onOpen?.();
|
|
@@ -380,12 +394,12 @@ function ConsentIQProvider({
|
|
|
380
394
|
const resetConsent = (0, import_react.useCallback)(() => {
|
|
381
395
|
setConsent(DEFAULT_CONSENT);
|
|
382
396
|
setMarketingConsent({});
|
|
383
|
-
setHasExistingConsent(false);
|
|
384
397
|
if (typeof window !== "undefined") {
|
|
385
398
|
localStorage.removeItem(CONSENT_STORAGE_KEY);
|
|
386
399
|
localStorage.removeItem("consentiq_subject_id");
|
|
387
400
|
}
|
|
388
401
|
}, []);
|
|
402
|
+
const dir = isRtlLanguage(language) ? "rtl" : "ltr";
|
|
389
403
|
const contextValue = (0, import_react.useMemo)(
|
|
390
404
|
() => ({
|
|
391
405
|
consent,
|
|
@@ -395,6 +409,8 @@ function ConsentIQProvider({
|
|
|
395
409
|
isBannerVisible,
|
|
396
410
|
isPreferenceCenterVisible,
|
|
397
411
|
language,
|
|
412
|
+
changeLanguage,
|
|
413
|
+
dir,
|
|
398
414
|
regulation,
|
|
399
415
|
hasConsent,
|
|
400
416
|
hasMarketingConsent,
|
|
@@ -416,6 +432,8 @@ function ConsentIQProvider({
|
|
|
416
432
|
isBannerVisible,
|
|
417
433
|
isPreferenceCenterVisible,
|
|
418
434
|
language,
|
|
435
|
+
changeLanguage,
|
|
436
|
+
dir,
|
|
419
437
|
regulation,
|
|
420
438
|
hasConsent,
|
|
421
439
|
hasMarketingConsent,
|
|
@@ -451,14 +469,70 @@ function useConsentGate(category) {
|
|
|
451
469
|
};
|
|
452
470
|
}
|
|
453
471
|
|
|
454
|
-
// src/components/
|
|
472
|
+
// src/components/LanguageSelector.tsx
|
|
455
473
|
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
474
|
+
function languageLabel(code) {
|
|
475
|
+
try {
|
|
476
|
+
const display = new Intl.DisplayNames([code], { type: "language" });
|
|
477
|
+
const name = display.of(code);
|
|
478
|
+
if (name) {
|
|
479
|
+
return name.charAt(0).toUpperCase() + name.slice(1);
|
|
480
|
+
}
|
|
481
|
+
} catch {
|
|
482
|
+
}
|
|
483
|
+
return code.toUpperCase();
|
|
484
|
+
}
|
|
485
|
+
function LanguageSelector({ className, style }) {
|
|
486
|
+
const { config, language, changeLanguage, dir } = useConsentIQ();
|
|
487
|
+
const languages = config?.property.supportedLanguages ?? [];
|
|
488
|
+
if (languages.length <= 1) {
|
|
489
|
+
return null;
|
|
490
|
+
}
|
|
491
|
+
const caretSide = dir === "rtl" ? "left" : "right";
|
|
492
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
493
|
+
"select",
|
|
494
|
+
{
|
|
495
|
+
className,
|
|
496
|
+
value: language,
|
|
497
|
+
onChange: (e) => changeLanguage(e.target.value),
|
|
498
|
+
"aria-label": "Language",
|
|
499
|
+
style: {
|
|
500
|
+
appearance: "none",
|
|
501
|
+
WebkitAppearance: "none",
|
|
502
|
+
MozAppearance: "none",
|
|
503
|
+
backgroundColor: "rgba(127, 127, 127, 0.12)",
|
|
504
|
+
backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")`,
|
|
505
|
+
backgroundRepeat: "no-repeat",
|
|
506
|
+
backgroundPosition: `${caretSide} 0.45rem center`,
|
|
507
|
+
backgroundSize: "0.65rem",
|
|
508
|
+
border: "1px solid rgba(127, 127, 127, 0.3)",
|
|
509
|
+
borderRadius: "0.375rem",
|
|
510
|
+
color: "inherit",
|
|
511
|
+
fontFamily: "inherit",
|
|
512
|
+
fontSize: "0.75rem",
|
|
513
|
+
fontWeight: 500,
|
|
514
|
+
lineHeight: 1.2,
|
|
515
|
+
cursor: "pointer",
|
|
516
|
+
outline: "none",
|
|
517
|
+
paddingBlock: "0.3rem",
|
|
518
|
+
paddingInlineStart: "0.6rem",
|
|
519
|
+
paddingInlineEnd: "1.5rem",
|
|
520
|
+
...style
|
|
521
|
+
},
|
|
522
|
+
children: languages.map((code) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: code, style: { color: "#18181b" }, children: languageLabel(code) }, code))
|
|
523
|
+
}
|
|
524
|
+
);
|
|
525
|
+
}
|
|
526
|
+
|
|
527
|
+
// src/components/CookieBanner.tsx
|
|
528
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
456
529
|
function CookieBanner({ className, position, theme, style }) {
|
|
457
530
|
const {
|
|
458
531
|
config,
|
|
459
532
|
isBannerVisible,
|
|
460
533
|
isLoading,
|
|
461
534
|
language,
|
|
535
|
+
dir,
|
|
462
536
|
acceptAll,
|
|
463
537
|
rejectAll,
|
|
464
538
|
showPreferenceCenter
|
|
@@ -468,7 +542,8 @@ function CookieBanner({ className, position, theme, style }) {
|
|
|
468
542
|
}
|
|
469
543
|
const bannerConfig = config.banner;
|
|
470
544
|
const translations = config.translations[language] || config.translations[config.property.defaultLanguage] || {};
|
|
471
|
-
const
|
|
545
|
+
const requestedPosition = position || bannerConfig.position || "bottom";
|
|
546
|
+
const resolvedPosition = dir === "rtl" ? requestedPosition === "bottom-left" ? "bottom-right" : requestedPosition === "bottom-right" ? "bottom-left" : requestedPosition : requestedPosition;
|
|
472
547
|
const resolvedTheme = theme || bannerConfig.theme || "dark";
|
|
473
548
|
const effectiveTheme = resolvedTheme === "auto" ? typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : resolvedTheme;
|
|
474
549
|
const positionStyles = {
|
|
@@ -487,14 +562,14 @@ function CookieBanner({ className, position, theme, style }) {
|
|
|
487
562
|
}
|
|
488
563
|
};
|
|
489
564
|
const themeStyles = {
|
|
490
|
-
backgroundColor: effectiveTheme === "dark" ? "#
|
|
491
|
-
color: effectiveTheme === "dark" ? "#
|
|
565
|
+
backgroundColor: effectiveTheme === "dark" ? "#09090b" : "#ffffff",
|
|
566
|
+
color: effectiveTheme === "dark" ? "#f4f4f5" : "#27272a",
|
|
492
567
|
borderWidth: "1px",
|
|
493
568
|
borderStyle: "solid",
|
|
494
|
-
borderColor: effectiveTheme === "dark" ? "#
|
|
569
|
+
borderColor: effectiveTheme === "dark" ? "#3f3f46" : "#e4e4e7"
|
|
495
570
|
};
|
|
496
571
|
const buttonPrimaryStyle = {
|
|
497
|
-
backgroundColor: bannerConfig.primaryColor || "#
|
|
572
|
+
backgroundColor: bannerConfig.primaryColor || "#ff6a00",
|
|
498
573
|
color: "#ffffff",
|
|
499
574
|
padding: "0.5rem 1rem",
|
|
500
575
|
borderRadius: "0.5rem",
|
|
@@ -504,8 +579,8 @@ function CookieBanner({ className, position, theme, style }) {
|
|
|
504
579
|
fontSize: "0.875rem"
|
|
505
580
|
};
|
|
506
581
|
const buttonSecondaryStyle = {
|
|
507
|
-
backgroundColor: effectiveTheme === "dark" ? "#
|
|
508
|
-
color: effectiveTheme === "dark" ? "#
|
|
582
|
+
backgroundColor: effectiveTheme === "dark" ? "#52525b" : "#e4e4e7",
|
|
583
|
+
color: effectiveTheme === "dark" ? "#f4f4f5" : "#27272a",
|
|
509
584
|
padding: "0.5rem 1rem",
|
|
510
585
|
borderRadius: "0.5rem",
|
|
511
586
|
border: "none",
|
|
@@ -516,13 +591,13 @@ function CookieBanner({ className, position, theme, style }) {
|
|
|
516
591
|
const buttonLinkStyle = {
|
|
517
592
|
background: "none",
|
|
518
593
|
border: "none",
|
|
519
|
-
color: effectiveTheme === "dark" ? "#
|
|
594
|
+
color: effectiveTheme === "dark" ? "#a1a1aa" : "#71717a",
|
|
520
595
|
cursor: "pointer",
|
|
521
596
|
fontSize: "0.875rem",
|
|
522
597
|
padding: "0.5rem"
|
|
523
598
|
};
|
|
524
|
-
return /* @__PURE__ */ (0,
|
|
525
|
-
resolvedPosition === "center" && /* @__PURE__ */ (0,
|
|
599
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
|
|
600
|
+
resolvedPosition === "center" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
526
601
|
"div",
|
|
527
602
|
{
|
|
528
603
|
style: {
|
|
@@ -533,7 +608,7 @@ function CookieBanner({ className, position, theme, style }) {
|
|
|
533
608
|
}
|
|
534
609
|
}
|
|
535
610
|
),
|
|
536
|
-
/* @__PURE__ */ (0,
|
|
611
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
537
612
|
"div",
|
|
538
613
|
{
|
|
539
614
|
className,
|
|
@@ -549,8 +624,9 @@ function CookieBanner({ className, position, theme, style }) {
|
|
|
549
624
|
role: "dialog",
|
|
550
625
|
"aria-label": "Cookie consent",
|
|
551
626
|
"aria-modal": resolvedPosition === "center",
|
|
627
|
+
dir,
|
|
552
628
|
children: [
|
|
553
|
-
bannerConfig.showLogo && bannerConfig.logoUrl && /* @__PURE__ */ (0,
|
|
629
|
+
bannerConfig.showLogo && bannerConfig.logoUrl && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
554
630
|
"img",
|
|
555
631
|
{
|
|
556
632
|
src: bannerConfig.logoUrl,
|
|
@@ -558,7 +634,7 @@ function CookieBanner({ className, position, theme, style }) {
|
|
|
558
634
|
style: { height: "1.5rem", marginBottom: "0.75rem" }
|
|
559
635
|
}
|
|
560
636
|
),
|
|
561
|
-
translations.bannerTitle && /* @__PURE__ */ (0,
|
|
637
|
+
translations.bannerTitle && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
562
638
|
"h2",
|
|
563
639
|
{
|
|
564
640
|
style: {
|
|
@@ -570,7 +646,7 @@ function CookieBanner({ className, position, theme, style }) {
|
|
|
570
646
|
children: translations.bannerTitle
|
|
571
647
|
}
|
|
572
648
|
),
|
|
573
|
-
/* @__PURE__ */ (0,
|
|
649
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
574
650
|
"p",
|
|
575
651
|
{
|
|
576
652
|
style: {
|
|
@@ -582,7 +658,7 @@ function CookieBanner({ className, position, theme, style }) {
|
|
|
582
658
|
children: translations.bannerDescription || "We use cookies to enhance your experience. By continuing, you agree to our use of cookies."
|
|
583
659
|
}
|
|
584
660
|
),
|
|
585
|
-
/* @__PURE__ */ (0,
|
|
661
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
586
662
|
"div",
|
|
587
663
|
{
|
|
588
664
|
style: {
|
|
@@ -592,7 +668,7 @@ function CookieBanner({ className, position, theme, style }) {
|
|
|
592
668
|
alignItems: "center"
|
|
593
669
|
},
|
|
594
670
|
children: [
|
|
595
|
-
/* @__PURE__ */ (0,
|
|
671
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
596
672
|
"button",
|
|
597
673
|
{
|
|
598
674
|
onClick: acceptAll,
|
|
@@ -601,7 +677,7 @@ function CookieBanner({ className, position, theme, style }) {
|
|
|
601
677
|
children: translations.acceptAllText || "Accept All"
|
|
602
678
|
}
|
|
603
679
|
),
|
|
604
|
-
/* @__PURE__ */ (0,
|
|
680
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
605
681
|
"button",
|
|
606
682
|
{
|
|
607
683
|
onClick: rejectAll,
|
|
@@ -610,7 +686,7 @@ function CookieBanner({ className, position, theme, style }) {
|
|
|
610
686
|
children: translations.rejectAllText || "Reject All"
|
|
611
687
|
}
|
|
612
688
|
),
|
|
613
|
-
/* @__PURE__ */ (0,
|
|
689
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
614
690
|
"button",
|
|
615
691
|
{
|
|
616
692
|
onClick: showPreferenceCenter,
|
|
@@ -618,7 +694,8 @@ function CookieBanner({ className, position, theme, style }) {
|
|
|
618
694
|
type: "button",
|
|
619
695
|
children: translations.customizeText || "Customize"
|
|
620
696
|
}
|
|
621
|
-
)
|
|
697
|
+
),
|
|
698
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LanguageSelector, { style: { marginInlineStart: "auto" } })
|
|
622
699
|
]
|
|
623
700
|
}
|
|
624
701
|
)
|
|
@@ -628,9 +705,266 @@ function CookieBanner({ className, position, theme, style }) {
|
|
|
628
705
|
] });
|
|
629
706
|
}
|
|
630
707
|
|
|
631
|
-
// src/components/
|
|
708
|
+
// src/components/ConsentTrigger.tsx
|
|
632
709
|
var import_react2 = require("react");
|
|
633
|
-
var
|
|
710
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
711
|
+
function ConsentTrigger({
|
|
712
|
+
className,
|
|
713
|
+
position = "bottom-left",
|
|
714
|
+
theme,
|
|
715
|
+
style,
|
|
716
|
+
label = "Cookie preferences"
|
|
717
|
+
}) {
|
|
718
|
+
const { config, isLoading, isBannerVisible, isPreferenceCenterVisible, showPreferenceCenter, dir } = useConsentIQ();
|
|
719
|
+
const [hovered, setHovered] = (0, import_react2.useState)(false);
|
|
720
|
+
if (isLoading || !config || isBannerVisible || isPreferenceCenterVisible) {
|
|
721
|
+
return null;
|
|
722
|
+
}
|
|
723
|
+
const bannerConfig = config?.banner;
|
|
724
|
+
const resolvedTheme = theme || bannerConfig?.theme || "dark";
|
|
725
|
+
const effectiveTheme = resolvedTheme === "auto" ? typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : resolvedTheme;
|
|
726
|
+
const accent = bannerConfig?.primaryColor || "#ff6a00";
|
|
727
|
+
const corner = dir === "rtl" ? position === "bottom-right" ? "bottom-left" : "bottom-right" : position;
|
|
728
|
+
const cornerStyles = corner === "bottom-right" ? { right: "1rem" } : { left: "1rem" };
|
|
729
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
730
|
+
"button",
|
|
731
|
+
{
|
|
732
|
+
type: "button",
|
|
733
|
+
className,
|
|
734
|
+
onClick: showPreferenceCenter,
|
|
735
|
+
onMouseEnter: () => setHovered(true),
|
|
736
|
+
onMouseLeave: () => setHovered(false),
|
|
737
|
+
onFocus: () => setHovered(true),
|
|
738
|
+
onBlur: () => setHovered(false),
|
|
739
|
+
"aria-label": label,
|
|
740
|
+
title: label,
|
|
741
|
+
style: {
|
|
742
|
+
position: "fixed",
|
|
743
|
+
bottom: "1rem",
|
|
744
|
+
...cornerStyles,
|
|
745
|
+
zIndex: 9997,
|
|
746
|
+
width: "3rem",
|
|
747
|
+
height: "3rem",
|
|
748
|
+
padding: 0,
|
|
749
|
+
borderRadius: "9999px",
|
|
750
|
+
display: "flex",
|
|
751
|
+
alignItems: "center",
|
|
752
|
+
justifyContent: "center",
|
|
753
|
+
cursor: "pointer",
|
|
754
|
+
backgroundColor: effectiveTheme === "dark" ? "#09090b" : "#ffffff",
|
|
755
|
+
color: accent,
|
|
756
|
+
borderWidth: "1px",
|
|
757
|
+
borderStyle: "solid",
|
|
758
|
+
borderColor: effectiveTheme === "dark" ? "#3f3f46" : "#e4e4e7",
|
|
759
|
+
boxShadow: hovered ? "0 6px 16px -2px rgba(0, 0, 0, 0.2)" : "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
|
|
760
|
+
transform: hovered ? "scale(1.05)" : "scale(1)",
|
|
761
|
+
transition: "transform 0.15s ease, box-shadow 0.15s ease",
|
|
762
|
+
...style
|
|
763
|
+
},
|
|
764
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
765
|
+
"svg",
|
|
766
|
+
{
|
|
767
|
+
width: "22",
|
|
768
|
+
height: "22",
|
|
769
|
+
viewBox: "0 0 24 24",
|
|
770
|
+
fill: "none",
|
|
771
|
+
stroke: "currentColor",
|
|
772
|
+
strokeWidth: "2",
|
|
773
|
+
strokeLinecap: "round",
|
|
774
|
+
strokeLinejoin: "round",
|
|
775
|
+
"aria-hidden": "true",
|
|
776
|
+
children: [
|
|
777
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M12 2a10 10 0 1 0 10 10 4 4 0 0 1-5-5 4 4 0 0 1-5-5Z" }),
|
|
778
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M8.5 8.5v.01" }),
|
|
779
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M16 15.5v.01" }),
|
|
780
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M12 12v.01" }),
|
|
781
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M11 17v.01" }),
|
|
782
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M7 14v.01" })
|
|
783
|
+
]
|
|
784
|
+
}
|
|
785
|
+
)
|
|
786
|
+
}
|
|
787
|
+
);
|
|
788
|
+
}
|
|
789
|
+
|
|
790
|
+
// src/components/ConsentPageTrigger.tsx
|
|
791
|
+
var import_react3 = require("react");
|
|
792
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
793
|
+
function ConsentPageTrigger({
|
|
794
|
+
apiUrl,
|
|
795
|
+
token,
|
|
796
|
+
mode = "popup",
|
|
797
|
+
redirect,
|
|
798
|
+
onComplete,
|
|
799
|
+
onClose,
|
|
800
|
+
className,
|
|
801
|
+
style,
|
|
802
|
+
children
|
|
803
|
+
}) {
|
|
804
|
+
const [open, setOpen] = (0, import_react3.useState)(false);
|
|
805
|
+
const origin = apiUrl.replace(/\/$/, "");
|
|
806
|
+
const pageUrl = `${origin}/portal/consent/${encodeURIComponent(token)}`;
|
|
807
|
+
const handleClick = (0, import_react3.useCallback)(() => {
|
|
808
|
+
if (mode === "redirect") {
|
|
809
|
+
window.location.href = redirect ? `${pageUrl}?redirect=${encodeURIComponent(redirect)}` : pageUrl;
|
|
810
|
+
return;
|
|
811
|
+
}
|
|
812
|
+
setOpen(true);
|
|
813
|
+
}, [mode, pageUrl, redirect]);
|
|
814
|
+
(0, import_react3.useEffect)(() => {
|
|
815
|
+
if (!open) return;
|
|
816
|
+
function onMessage(e) {
|
|
817
|
+
if (e.origin !== origin) return;
|
|
818
|
+
const d = e.data || {};
|
|
819
|
+
if (d.source !== "consentiq") return;
|
|
820
|
+
if (d.type === "consent:complete") {
|
|
821
|
+
onComplete?.({ consentId: d.consentId, proofHash: d.proofHash, email: d.email });
|
|
822
|
+
setOpen(false);
|
|
823
|
+
} else if (d.type === "consent:closed") {
|
|
824
|
+
onClose?.();
|
|
825
|
+
setOpen(false);
|
|
826
|
+
}
|
|
827
|
+
}
|
|
828
|
+
window.addEventListener("message", onMessage);
|
|
829
|
+
return () => window.removeEventListener("message", onMessage);
|
|
830
|
+
}, [open, origin, onComplete, onClose]);
|
|
831
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
|
|
832
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", className, style, onClick: handleClick, children: children ?? "Give consent" }),
|
|
833
|
+
open && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
834
|
+
"div",
|
|
835
|
+
{
|
|
836
|
+
onClick: (e) => {
|
|
837
|
+
if (e.target === e.currentTarget) {
|
|
838
|
+
onClose?.();
|
|
839
|
+
setOpen(false);
|
|
840
|
+
}
|
|
841
|
+
},
|
|
842
|
+
style: { position: "fixed", inset: 0, zIndex: 2147483647, background: "rgba(15,23,42,.55)", display: "flex", alignItems: "center", justifyContent: "center", padding: 16 },
|
|
843
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
844
|
+
"iframe",
|
|
845
|
+
{
|
|
846
|
+
title: "Consent",
|
|
847
|
+
src: `${pageUrl}?embed=1`,
|
|
848
|
+
style: { width: "100%", maxWidth: 480, height: "90vh", maxHeight: 760, border: 0, borderRadius: 16, background: "#fff", boxShadow: "0 20px 60px rgba(0,0,0,.35)" }
|
|
849
|
+
}
|
|
850
|
+
)
|
|
851
|
+
}
|
|
852
|
+
)
|
|
853
|
+
] });
|
|
854
|
+
}
|
|
855
|
+
|
|
856
|
+
// src/components/ConsentForm.tsx
|
|
857
|
+
var import_react5 = require("react");
|
|
858
|
+
|
|
859
|
+
// src/hooks/useConsentPurposes.ts
|
|
860
|
+
var import_react4 = require("react");
|
|
861
|
+
function useConsentPurposes(apiUrl, token) {
|
|
862
|
+
const origin = apiUrl.replace(/\/$/, "");
|
|
863
|
+
const [purposes, setPurposes] = (0, import_react4.useState)([]);
|
|
864
|
+
const [loading, setLoading] = (0, import_react4.useState)(true);
|
|
865
|
+
const [error, setError] = (0, import_react4.useState)(null);
|
|
866
|
+
(0, import_react4.useEffect)(() => {
|
|
867
|
+
let cancelled = false;
|
|
868
|
+
setLoading(true);
|
|
869
|
+
fetch(`${origin}/api/public/consent-point/${encodeURIComponent(token)}`).then((r) => r.ok ? r.json() : Promise.reject(new Error("Failed to load consent purposes"))).then((d) => {
|
|
870
|
+
if (!cancelled) {
|
|
871
|
+
setPurposes(d.purposes ?? []);
|
|
872
|
+
setError(null);
|
|
873
|
+
}
|
|
874
|
+
}).catch((e) => {
|
|
875
|
+
if (!cancelled) setError(e instanceof Error ? e.message : "Failed to load");
|
|
876
|
+
}).finally(() => {
|
|
877
|
+
if (!cancelled) setLoading(false);
|
|
878
|
+
});
|
|
879
|
+
return () => {
|
|
880
|
+
cancelled = true;
|
|
881
|
+
};
|
|
882
|
+
}, [origin, token]);
|
|
883
|
+
const record = (0, import_react4.useCallback)(async (email, purposeConsents) => {
|
|
884
|
+
const nonce = typeof crypto !== "undefined" && crypto.randomUUID ? crypto.randomUUID() : String(Date.now());
|
|
885
|
+
const res = await fetch(`${origin}/api/public/collect`, {
|
|
886
|
+
method: "POST",
|
|
887
|
+
headers: { "Content-Type": "application/json" },
|
|
888
|
+
body: JSON.stringify({ token, email, purposeConsents, mode: "embed", nonce })
|
|
889
|
+
});
|
|
890
|
+
const data = await res.json().catch(() => ({}));
|
|
891
|
+
if (!res.ok) throw new Error(data?.error || "Could not record consent");
|
|
892
|
+
return data;
|
|
893
|
+
}, [origin, token]);
|
|
894
|
+
return { purposes, loading, error, record };
|
|
895
|
+
}
|
|
896
|
+
|
|
897
|
+
// src/components/ConsentForm.tsx
|
|
898
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
899
|
+
function ConsentForm({ apiUrl, token, email: initialEmail, onRecorded, className }) {
|
|
900
|
+
const { purposes, loading, error, record } = useConsentPurposes(apiUrl, token);
|
|
901
|
+
const [email, setEmail] = (0, import_react5.useState)(initialEmail ?? "");
|
|
902
|
+
const [grants, setGrants] = (0, import_react5.useState)({});
|
|
903
|
+
const [submitting, setSubmitting] = (0, import_react5.useState)(false);
|
|
904
|
+
const [submitError, setSubmitError] = (0, import_react5.useState)(null);
|
|
905
|
+
const [done, setDone] = (0, import_react5.useState)(null);
|
|
906
|
+
(0, import_react5.useEffect)(() => {
|
|
907
|
+
setGrants((g) => {
|
|
908
|
+
const next = { ...g };
|
|
909
|
+
for (const p of purposes) if (!(p.purpose_id in next)) next[p.purpose_id] = p.is_required;
|
|
910
|
+
return next;
|
|
911
|
+
});
|
|
912
|
+
}, [purposes]);
|
|
913
|
+
const emailValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
|
|
914
|
+
async function submit(e) {
|
|
915
|
+
e.preventDefault();
|
|
916
|
+
setSubmitError(null);
|
|
917
|
+
if (!emailValid) {
|
|
918
|
+
setSubmitError("Enter a valid email.");
|
|
919
|
+
return;
|
|
920
|
+
}
|
|
921
|
+
setSubmitting(true);
|
|
922
|
+
try {
|
|
923
|
+
const r = await record(email, grants);
|
|
924
|
+
setDone({ consentId: r.consentId });
|
|
925
|
+
onRecorded?.({ consentId: r.consentId, proofHash: r.proofHash });
|
|
926
|
+
} catch (err) {
|
|
927
|
+
setSubmitError(err instanceof Error ? err.message : "Failed to record consent");
|
|
928
|
+
} finally {
|
|
929
|
+
setSubmitting(false);
|
|
930
|
+
}
|
|
931
|
+
}
|
|
932
|
+
if (loading) return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className, children: "Loading consent options\u2026" });
|
|
933
|
+
if (error) return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className, style: { color: "crimson" }, children: error });
|
|
934
|
+
if (done) return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("p", { className, children: [
|
|
935
|
+
"Consent recorded (",
|
|
936
|
+
done.consentId,
|
|
937
|
+
")."
|
|
938
|
+
] });
|
|
939
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("form", { className, onSubmit: submit, style: { display: "grid", gap: 12 }, children: [
|
|
940
|
+
purposes.map((p) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { style: { display: "flex", gap: 8, alignItems: "flex-start" }, children: [
|
|
941
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
942
|
+
"input",
|
|
943
|
+
{
|
|
944
|
+
type: "checkbox",
|
|
945
|
+
checked: grants[p.purpose_id] ?? p.is_required,
|
|
946
|
+
disabled: p.is_required,
|
|
947
|
+
onChange: (ev) => setGrants((g) => ({ ...g, [p.purpose_id]: ev.target.checked }))
|
|
948
|
+
}
|
|
949
|
+
),
|
|
950
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { children: [
|
|
951
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("strong", { children: p.label ?? "Purpose" }),
|
|
952
|
+
p.is_required ? " (required)" : "",
|
|
953
|
+
p.description ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
|
|
954
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("br", {}),
|
|
955
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { opacity: 0.7, fontSize: 13 }, children: p.description })
|
|
956
|
+
] }) : null
|
|
957
|
+
] })
|
|
958
|
+
] }, p.purpose_id)),
|
|
959
|
+
!initialEmail && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { type: "email", value: email, onChange: (e) => setEmail(e.target.value), placeholder: "you@example.com" }),
|
|
960
|
+
submitError && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { style: { color: "crimson" }, children: submitError }),
|
|
961
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "submit", disabled: submitting, children: submitting ? "Recording\u2026" : "Confirm consent" })
|
|
962
|
+
] });
|
|
963
|
+
}
|
|
964
|
+
|
|
965
|
+
// src/components/PreferenceCenter.tsx
|
|
966
|
+
var import_react6 = require("react");
|
|
967
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
634
968
|
function PreferenceCenter({ className, theme, style }) {
|
|
635
969
|
const {
|
|
636
970
|
config,
|
|
@@ -638,11 +972,12 @@ function PreferenceCenter({ className, theme, style }) {
|
|
|
638
972
|
isPreferenceCenterVisible,
|
|
639
973
|
isLoading,
|
|
640
974
|
language,
|
|
975
|
+
dir,
|
|
641
976
|
updateConsent,
|
|
642
977
|
hidePreferenceCenter
|
|
643
978
|
} = useConsentIQ();
|
|
644
|
-
const [localConsent, setLocalConsent] = (0,
|
|
645
|
-
(0,
|
|
979
|
+
const [localConsent, setLocalConsent] = (0, import_react6.useState)(consent);
|
|
980
|
+
(0, import_react6.useEffect)(() => {
|
|
646
981
|
setLocalConsent(consent);
|
|
647
982
|
}, [consent]);
|
|
648
983
|
if (isLoading || !isPreferenceCenterVisible || !config) {
|
|
@@ -707,8 +1042,8 @@ function PreferenceCenter({ className, theme, style }) {
|
|
|
707
1042
|
};
|
|
708
1043
|
const modalStyle = {
|
|
709
1044
|
position: "relative",
|
|
710
|
-
backgroundColor: isDark ? "#
|
|
711
|
-
color: isDark ? "#
|
|
1045
|
+
backgroundColor: isDark ? "#09090b" : "#ffffff",
|
|
1046
|
+
color: isDark ? "#f4f4f5" : "#27272a",
|
|
712
1047
|
borderRadius: "0.75rem",
|
|
713
1048
|
boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
|
|
714
1049
|
maxWidth: "600px",
|
|
@@ -722,7 +1057,7 @@ function PreferenceCenter({ className, theme, style }) {
|
|
|
722
1057
|
};
|
|
723
1058
|
const headerStyle = {
|
|
724
1059
|
padding: "1rem 1.5rem",
|
|
725
|
-
borderBottom: `1px solid ${isDark ? "#
|
|
1060
|
+
borderBottom: `1px solid ${isDark ? "#3f3f46" : "#e4e4e7"}`,
|
|
726
1061
|
display: "flex",
|
|
727
1062
|
justifyContent: "space-between",
|
|
728
1063
|
alignItems: "center"
|
|
@@ -734,14 +1069,14 @@ function PreferenceCenter({ className, theme, style }) {
|
|
|
734
1069
|
};
|
|
735
1070
|
const footerStyle = {
|
|
736
1071
|
padding: "1rem 1.5rem",
|
|
737
|
-
borderTop: `1px solid ${isDark ? "#
|
|
1072
|
+
borderTop: `1px solid ${isDark ? "#3f3f46" : "#e4e4e7"}`,
|
|
738
1073
|
display: "flex",
|
|
739
1074
|
gap: "0.5rem",
|
|
740
1075
|
justifyContent: "flex-end"
|
|
741
1076
|
};
|
|
742
1077
|
const categoryStyle = {
|
|
743
1078
|
padding: "1rem",
|
|
744
|
-
backgroundColor: isDark ? "#
|
|
1079
|
+
backgroundColor: isDark ? "#18181b" : "#fafafa",
|
|
745
1080
|
borderRadius: "0.5rem",
|
|
746
1081
|
marginBottom: "0.75rem"
|
|
747
1082
|
};
|
|
@@ -751,7 +1086,7 @@ function PreferenceCenter({ className, theme, style }) {
|
|
|
751
1086
|
justifyContent: "space-between"
|
|
752
1087
|
};
|
|
753
1088
|
const buttonPrimaryStyle = {
|
|
754
|
-
backgroundColor: bannerConfig.primaryColor || "#
|
|
1089
|
+
backgroundColor: bannerConfig.primaryColor || "#ff6a00",
|
|
755
1090
|
color: "#ffffff",
|
|
756
1091
|
padding: "0.5rem 1rem",
|
|
757
1092
|
borderRadius: "0.5rem",
|
|
@@ -761,8 +1096,8 @@ function PreferenceCenter({ className, theme, style }) {
|
|
|
761
1096
|
fontSize: "0.875rem"
|
|
762
1097
|
};
|
|
763
1098
|
const buttonSecondaryStyle = {
|
|
764
|
-
backgroundColor: isDark ? "#
|
|
765
|
-
color: isDark ? "#
|
|
1099
|
+
backgroundColor: isDark ? "#52525b" : "#e4e4e7",
|
|
1100
|
+
color: isDark ? "#f4f4f5" : "#27272a",
|
|
766
1101
|
padding: "0.5rem 1rem",
|
|
767
1102
|
borderRadius: "0.5rem",
|
|
768
1103
|
border: "none",
|
|
@@ -773,47 +1108,59 @@ function PreferenceCenter({ className, theme, style }) {
|
|
|
773
1108
|
const buttonTextStyle = {
|
|
774
1109
|
background: "none",
|
|
775
1110
|
border: "none",
|
|
776
|
-
color:
|
|
1111
|
+
color: bannerConfig.primaryColor || "#ff6a00",
|
|
777
1112
|
cursor: "pointer",
|
|
778
1113
|
fontSize: "0.875rem",
|
|
779
|
-
|
|
1114
|
+
fontWeight: 500,
|
|
1115
|
+
padding: 0,
|
|
1116
|
+
textDecoration: "underline",
|
|
1117
|
+
textUnderlineOffset: "2px"
|
|
780
1118
|
};
|
|
781
|
-
return /* @__PURE__ */ (0,
|
|
782
|
-
/* @__PURE__ */ (0,
|
|
783
|
-
/* @__PURE__ */ (0,
|
|
784
|
-
/* @__PURE__ */ (0,
|
|
785
|
-
/* @__PURE__ */ (0,
|
|
786
|
-
/* @__PURE__ */ (0,
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
1119
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: containerStyle, className, children: [
|
|
1120
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: backdropStyle, onClick: hidePreferenceCenter }),
|
|
1121
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: modalStyle, role: "dialog", "aria-modal": "true", "aria-label": "Cookie preferences", dir, children: [
|
|
1122
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: headerStyle, children: [
|
|
1123
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h2", { style: { margin: 0, fontSize: "1.25rem", fontWeight: 600, lineHeight: 1 }, children: "Cookie Preferences" }),
|
|
1124
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "0.875rem" }, children: [
|
|
1125
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(LanguageSelector, {}),
|
|
1126
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
1127
|
+
"button",
|
|
1128
|
+
{
|
|
1129
|
+
onClick: hidePreferenceCenter,
|
|
1130
|
+
style: {
|
|
1131
|
+
display: "flex",
|
|
1132
|
+
alignItems: "center",
|
|
1133
|
+
justifyContent: "center",
|
|
1134
|
+
width: "1.75rem",
|
|
1135
|
+
height: "1.75rem",
|
|
1136
|
+
padding: 0,
|
|
1137
|
+
background: "none",
|
|
1138
|
+
border: "none",
|
|
1139
|
+
fontSize: "1.5rem",
|
|
1140
|
+
cursor: "pointer",
|
|
1141
|
+
color: isDark ? "#a1a1aa" : "#71717a",
|
|
1142
|
+
lineHeight: 1
|
|
1143
|
+
},
|
|
1144
|
+
"aria-label": "Close",
|
|
1145
|
+
type: "button",
|
|
1146
|
+
children: "\xD7"
|
|
1147
|
+
}
|
|
1148
|
+
)
|
|
1149
|
+
] })
|
|
803
1150
|
] }),
|
|
804
|
-
/* @__PURE__ */ (0,
|
|
805
|
-
/* @__PURE__ */ (0,
|
|
806
|
-
/* @__PURE__ */ (0,
|
|
807
|
-
/* @__PURE__ */ (0,
|
|
808
|
-
/* @__PURE__ */ (0,
|
|
1151
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: bodyStyle, children: [
|
|
1152
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { style: { marginTop: 0, marginBottom: "1.5rem", opacity: 0.8, fontSize: "0.875rem" }, children: translations.bannerDescription || "Manage your cookie preferences. Some cookies are essential for the site to function properly." }),
|
|
1153
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", gap: "1rem", marginBottom: "1.5rem" }, children: [
|
|
1154
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { onClick: handleAcceptAll, style: buttonTextStyle, type: "button", children: "Enable All" }),
|
|
1155
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { onClick: handleRejectAll, style: buttonTextStyle, type: "button", children: "Disable All" })
|
|
809
1156
|
] }),
|
|
810
1157
|
config.categories.filter((cat) => cat.enabled).map((category) => {
|
|
811
1158
|
const categoryTranslation = translations.categories?.[category.code];
|
|
812
1159
|
const isEnabled = localConsent[category.code] ?? category.defaultState;
|
|
813
|
-
return /* @__PURE__ */ (0,
|
|
814
|
-
/* @__PURE__ */ (0,
|
|
815
|
-
/* @__PURE__ */ (0,
|
|
816
|
-
/* @__PURE__ */ (0,
|
|
1160
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: categoryStyle, children: [
|
|
1161
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: toggleContainerStyle, children: [
|
|
1162
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", alignItems: "baseline", flexWrap: "wrap" }, children: [
|
|
1163
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
817
1164
|
"h3",
|
|
818
1165
|
{
|
|
819
1166
|
style: {
|
|
@@ -824,19 +1171,19 @@ function PreferenceCenter({ className, theme, style }) {
|
|
|
824
1171
|
children: categoryTranslation?.title || category.name
|
|
825
1172
|
}
|
|
826
1173
|
),
|
|
827
|
-
category.isRequired && /* @__PURE__ */ (0,
|
|
1174
|
+
category.isRequired && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
828
1175
|
"span",
|
|
829
1176
|
{
|
|
830
1177
|
style: {
|
|
831
1178
|
fontSize: "0.75rem",
|
|
832
|
-
color: isDark ? "#
|
|
1179
|
+
color: isDark ? "#a1a1aa" : "#71717a",
|
|
833
1180
|
marginLeft: "0.5rem"
|
|
834
1181
|
},
|
|
835
1182
|
children: "(Required)"
|
|
836
1183
|
}
|
|
837
1184
|
)
|
|
838
1185
|
] }),
|
|
839
|
-
/* @__PURE__ */ (0,
|
|
1186
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
840
1187
|
Toggle,
|
|
841
1188
|
{
|
|
842
1189
|
checked: isEnabled,
|
|
@@ -846,7 +1193,7 @@ function PreferenceCenter({ className, theme, style }) {
|
|
|
846
1193
|
}
|
|
847
1194
|
)
|
|
848
1195
|
] }),
|
|
849
|
-
/* @__PURE__ */ (0,
|
|
1196
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
850
1197
|
"p",
|
|
851
1198
|
{
|
|
852
1199
|
style: {
|
|
@@ -860,14 +1207,14 @@ function PreferenceCenter({ className, theme, style }) {
|
|
|
860
1207
|
] }, category.code);
|
|
861
1208
|
})
|
|
862
1209
|
] }),
|
|
863
|
-
/* @__PURE__ */ (0,
|
|
864
|
-
/* @__PURE__ */ (0,
|
|
865
|
-
/* @__PURE__ */ (0,
|
|
1210
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: footerStyle, children: [
|
|
1211
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { onClick: hidePreferenceCenter, style: buttonSecondaryStyle, type: "button", children: "Cancel" }),
|
|
1212
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { onClick: handleSave, style: buttonPrimaryStyle, type: "button", children: translations.savePreferencesText || "Save Preferences" })
|
|
866
1213
|
] }),
|
|
867
|
-
/* @__PURE__ */ (0,
|
|
1214
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
|
|
868
1215
|
padding: "0.5rem 1.5rem 0.75rem",
|
|
869
1216
|
textAlign: "center"
|
|
870
|
-
}, children: /* @__PURE__ */ (0,
|
|
1217
|
+
}, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
871
1218
|
"a",
|
|
872
1219
|
{
|
|
873
1220
|
href: "https://consent.iqworks.ai",
|
|
@@ -878,12 +1225,12 @@ function PreferenceCenter({ className, theme, style }) {
|
|
|
878
1225
|
alignItems: "center",
|
|
879
1226
|
gap: "0.35rem",
|
|
880
1227
|
fontSize: "0.7rem",
|
|
881
|
-
color: isDark ? "#
|
|
1228
|
+
color: isDark ? "#71717a" : "#a1a1aa",
|
|
882
1229
|
textDecoration: "none"
|
|
883
1230
|
},
|
|
884
1231
|
children: [
|
|
885
1232
|
"Powered by",
|
|
886
|
-
/* @__PURE__ */ (0,
|
|
1233
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ConsentIQLogo, { isDark })
|
|
887
1234
|
]
|
|
888
1235
|
}
|
|
889
1236
|
) })
|
|
@@ -900,7 +1247,7 @@ function Toggle({
|
|
|
900
1247
|
position: "relative",
|
|
901
1248
|
width: "44px",
|
|
902
1249
|
height: "24px",
|
|
903
|
-
backgroundColor: checked ? primaryColor || "#
|
|
1250
|
+
backgroundColor: checked ? primaryColor || "#ff6a00" : "#a1a1aa",
|
|
904
1251
|
borderRadius: "12px",
|
|
905
1252
|
cursor: disabled ? "not-allowed" : "pointer",
|
|
906
1253
|
opacity: disabled ? 0.5 : 1,
|
|
@@ -909,15 +1256,15 @@ function Toggle({
|
|
|
909
1256
|
const thumbStyle = {
|
|
910
1257
|
position: "absolute",
|
|
911
1258
|
top: "2px",
|
|
912
|
-
|
|
1259
|
+
insetInlineStart: checked ? "22px" : "2px",
|
|
913
1260
|
width: "20px",
|
|
914
1261
|
height: "20px",
|
|
915
1262
|
backgroundColor: "#ffffff",
|
|
916
1263
|
borderRadius: "50%",
|
|
917
|
-
transition: "
|
|
1264
|
+
transition: "inset-inline-start 0.2s",
|
|
918
1265
|
boxShadow: "0 1px 3px rgba(0, 0, 0, 0.2)"
|
|
919
1266
|
};
|
|
920
|
-
return /* @__PURE__ */ (0,
|
|
1267
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
921
1268
|
"button",
|
|
922
1269
|
{
|
|
923
1270
|
type: "button",
|
|
@@ -926,47 +1273,47 @@ function Toggle({
|
|
|
926
1273
|
onClick: disabled ? void 0 : onChange,
|
|
927
1274
|
style: trackStyle,
|
|
928
1275
|
disabled,
|
|
929
|
-
children: /* @__PURE__ */ (0,
|
|
1276
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: thumbStyle })
|
|
930
1277
|
}
|
|
931
1278
|
);
|
|
932
1279
|
}
|
|
933
1280
|
function ConsentIQLogo({ isDark }) {
|
|
934
1281
|
if (isDark) {
|
|
935
|
-
return /* @__PURE__ */ (0,
|
|
936
|
-
/* @__PURE__ */ (0,
|
|
937
|
-
/* @__PURE__ */ (0,
|
|
938
|
-
/* @__PURE__ */ (0,
|
|
939
|
-
/* @__PURE__ */ (0,
|
|
940
|
-
/* @__PURE__ */ (0,
|
|
941
|
-
/* @__PURE__ */ (0,
|
|
942
|
-
/* @__PURE__ */ (0,
|
|
943
|
-
/* @__PURE__ */ (0,
|
|
944
|
-
/* @__PURE__ */ (0,
|
|
945
|
-
/* @__PURE__ */ (0,
|
|
946
|
-
/* @__PURE__ */ (0,
|
|
947
|
-
/* @__PURE__ */ (0,
|
|
948
|
-
/* @__PURE__ */ (0,
|
|
1282
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: "80", height: "14", viewBox: "0 0 487 85", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
|
|
1283
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M49.3323 11.8633L41.634 7.59045L12.417 24.7048C9.84034 52.4047 19.3957 71.4081 35.7685 82.4129C20.9524 65.4494 18.5009 39.8252 19.664 29.2678L49.3323 11.8633Z", fill: "#FF6503" }),
|
|
1284
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M58.8505 6.18471L51.0667 2.15857L43.3711 6.59458L50.9943 10.8186L58.8505 6.18471Z", fill: "white" }),
|
|
1285
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M28.2107 33.8309C24.131 59.3834 31.5211 76.8658 35.7261 82.413C35.7261 82.413 34.4207 77.3773 33.847 74.0981C31.4064 60.1473 32.3708 50.2576 35.1891 37.8571L66.0559 20.1421C65.3617 30.7093 59.5471 53.4338 42.7104 68.3178C50.6824 64.6214 61.1777 58.5798 64.854 51.8087C64.6636 52.2227 66.2567 49.3651 66.0559 49.771C73.3369 35.6413 74.3274 23.7642 74.3767 15.0422L66.8613 10.7477L28.2107 33.8309Z", fill: "#FF6503" }),
|
|
1286
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M63.7104 54.4578C57.4728 65.6025 33.8945 74.3768 33.8945 74.3768C33.8945 74.3768 34.1088 75.8873 34.643 78.0695C35.1772 80.2517 35.7138 82.3943 35.7138 82.3943C43.4068 78.4438 55.3104 70.2184 63.7104 54.4578Z", fill: "white" }),
|
|
1287
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M473.855 85V60.5074C472.26 61.7151 470.473 62.6571 468.492 63.3334C466.512 64.0581 464.362 64.4204 462.043 64.4204C457.985 64.4204 454.314 63.3817 451.029 61.3045C447.744 59.2272 445.111 56.4736 443.13 53.0436C441.198 49.5654 440.231 45.7248 440.231 41.5219C440.231 37.319 441.198 33.4784 443.13 30.0002C445.111 26.5219 447.744 23.7683 451.029 21.7393C454.314 19.6621 457.985 18.6234 462.043 18.6234C464.797 18.6234 467.333 19.1065 469.652 20.0727C471.97 21.0389 473.951 22.3674 475.594 24.0582V19.7828H486.463V85H473.855ZM463.492 53.3335C465.618 53.3335 467.55 52.8021 469.289 51.7393C471.028 50.6765 472.405 49.2513 473.42 47.4639C474.483 45.6765 475.014 43.6958 475.014 41.5219C475.014 39.348 474.483 37.3673 473.42 35.5799C472.405 33.7925 471.028 32.3673 469.289 31.3045C467.55 30.2417 465.618 29.7103 463.492 29.7103C461.367 29.7103 459.434 30.2417 457.695 31.3045C455.956 32.3673 454.555 33.7925 453.492 35.5799C452.478 37.3673 451.971 39.348 451.971 41.5219C451.971 43.6958 452.478 45.6765 453.492 47.4639C454.555 49.2513 455.956 50.6765 457.695 51.7393C459.434 52.8021 461.367 53.3335 463.492 53.3335Z", fill: "#FF6503" }),
|
|
1288
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M420.133 63.2607V19.7826H432.742V63.2607H420.133ZM426.437 13.4782C424.553 13.4782 422.959 12.826 421.655 11.5217C420.35 10.2174 419.698 8.62316 419.698 6.73911C419.698 4.80675 420.35 3.21255 421.655 1.95651C422.959 0.65217 424.553 0 426.437 0C428.37 0 429.964 0.65217 431.22 1.95651C432.524 3.21255 433.176 4.80675 433.176 6.73911C433.176 8.62316 432.524 10.2174 431.22 11.5217C429.964 12.826 428.37 13.4782 426.437 13.4782Z", fill: "#FF6503" }),
|
|
1289
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M392.451 63.2607V29.7825H384.335V19.7825H392.668V5.28979H404.842V19.7825H413.465V29.7825H405.06V63.2607H392.451Z", fill: "white" }),
|
|
1290
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M338.059 63.2605V19.7824H349.363V24.565C350.909 22.536 352.817 20.9901 355.088 19.9273C357.358 18.8645 359.798 18.3331 362.406 18.3331C365.498 18.3331 368.373 19.0819 371.03 20.5795C373.735 22.0288 375.909 24.1785 377.551 27.0288C379.242 29.8307 380.087 33.2365 380.087 37.2461V63.2605H367.479V38.9128C367.479 36.4973 366.754 34.3476 365.305 32.4635C363.856 30.5795 361.778 29.6374 359.073 29.6374C356.899 29.6374 354.943 30.3862 353.203 31.8838C351.513 33.3331 350.667 35.6278 350.667 38.7679V63.2605H338.059Z", fill: "white" }),
|
|
1291
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M310.56 64.7098C305.68 64.7098 301.381 63.6953 297.661 61.6664C293.941 59.6374 291.043 56.8596 288.966 53.333C286.888 49.7582 285.85 45.6761 285.85 41.0867C285.85 36.6906 286.864 32.8017 288.893 29.4201C290.922 25.9901 293.652 23.2848 297.081 21.3041C300.56 19.3235 304.4 18.3331 308.603 18.3331C312.903 18.3331 316.743 19.3235 320.125 21.3041C323.507 23.2365 326.164 25.8935 328.096 29.2751C330.077 32.6568 331.067 36.4973 331.067 40.7968V45.2171H304.545C303.337 45.2171 302.178 45.1447 301.067 44.9997C299.956 44.8548 298.845 44.6857 297.734 44.4925C298.313 47.391 299.738 49.7582 302.009 51.5939C304.328 53.3813 307.275 54.2751 310.85 54.2751C313.603 54.2751 316.067 53.7195 318.241 52.6084C320.463 51.4973 322.275 50.1205 323.676 48.478L326.429 59.7823C324.255 61.4248 321.792 62.6567 319.038 63.4779C316.333 64.2992 313.507 64.7098 310.56 64.7098ZM297.444 36.8838C299.859 36.3524 302.226 36.0867 304.545 36.0867H312.226C313.579 36.0867 314.859 36.135 316.067 36.2316C317.275 36.3283 318.41 36.4973 319.473 36.7389C318.748 34.1302 317.42 32.0771 315.487 30.5795C313.603 29.0819 311.26 28.3331 308.458 28.3331C305.801 28.3331 303.482 29.1061 301.502 30.6519C299.569 32.1495 298.217 34.2268 297.444 36.8838Z", fill: "white" }),
|
|
1292
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M263.884 64.7098C260.937 64.7098 257.942 64.2267 254.898 63.2605C251.903 62.2944 249.56 60.99 247.869 59.3475L250.985 47.4635C252.386 49.3959 254.318 51.0867 256.782 52.5359C259.294 53.9852 261.879 54.7098 264.536 54.7098C266.323 54.7098 267.603 54.3717 268.376 53.6954C269.198 53.019 269.608 52.1978 269.608 51.2316C269.608 50.1205 269.198 49.3234 268.376 48.8403C267.555 48.3089 266.71 47.8741 265.84 47.536L259.753 45.2171C258.401 44.6857 256.855 43.9611 255.115 43.0432C253.376 42.1253 251.855 40.821 250.55 39.1302C249.294 37.4394 248.666 35.2171 248.666 32.4635C248.666 29.9515 249.294 27.6326 250.55 25.507C251.806 23.3814 253.618 21.6665 255.985 20.3621C258.401 19.0095 261.299 18.3331 264.681 18.3331C267.821 18.3331 270.743 18.8645 273.449 19.9273C276.202 20.9901 278.207 22.1737 279.463 23.478L276.565 34.9273C274.922 32.8017 272.966 31.1833 270.695 30.0722C268.473 28.9128 266.347 28.3331 264.318 28.3331C262.772 28.3331 261.637 28.6471 260.913 29.2751C260.188 29.9031 259.826 30.6278 259.826 31.449C259.826 32.0771 260.067 32.7051 260.55 33.3331C261.082 33.9128 261.951 34.4442 263.159 34.9273L268.811 37.0287C270.454 37.6084 272.193 38.3814 274.028 39.3476C275.913 40.3137 277.507 41.6664 278.811 43.4055C280.115 45.0963 280.768 47.4393 280.768 50.4345C280.768 54.6374 279.198 58.0673 276.057 60.7243C272.966 63.3813 268.908 64.7098 263.884 64.7098Z", fill: "white" }),
|
|
1293
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M198.861 63.2605V19.7824H210.166V24.565C211.712 22.536 213.62 20.9901 215.89 19.9273C218.161 18.8645 220.6 18.3331 223.209 18.3331C226.301 18.3331 229.175 19.0819 231.832 20.5795C234.538 22.0288 236.711 24.1785 238.354 27.0288C240.045 29.8307 240.89 33.2365 240.89 37.2461V63.2605H228.282V38.9128C228.282 36.4973 227.557 34.3476 226.108 32.4635C224.658 30.5795 222.581 29.6374 219.876 29.6374C217.702 29.6374 215.745 30.3862 214.006 31.8838C212.315 33.3331 211.47 35.6278 211.47 38.7679V63.2605H198.861Z", fill: "white" }),
|
|
1294
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M167.99 64.7098C163.69 64.7098 159.753 63.6712 156.178 61.5939C152.603 59.5166 149.753 56.7147 147.628 53.1881C145.55 49.6616 144.512 45.7727 144.512 41.5215C144.512 37.222 145.55 33.3331 147.628 29.8548C149.753 26.3283 152.603 23.5264 156.178 21.4491C159.753 19.3718 163.69 18.3331 167.99 18.3331C172.338 18.3331 176.275 19.3718 179.801 21.4491C183.376 23.5264 186.202 26.3283 188.28 29.8548C190.405 33.3331 191.468 37.222 191.468 41.5215C191.468 45.7727 190.405 49.6616 188.28 53.1881C186.202 56.7147 183.376 59.5166 179.801 61.5939C176.275 63.6712 172.338 64.7098 167.99 64.7098ZM167.99 53.4055C170.164 53.4055 172.12 52.8741 173.859 51.8113C175.647 50.7485 177.048 49.3234 178.062 47.536C179.125 45.7002 179.657 43.6954 179.657 41.5215C179.657 39.2993 179.125 37.2944 178.062 35.507C177.048 33.7196 175.647 32.2944 173.859 31.2316C172.12 30.1688 170.164 29.6374 167.99 29.6374C165.816 29.6374 163.835 30.1688 162.048 31.2316C160.309 32.2944 158.908 33.7196 157.845 35.507C156.831 37.2944 156.323 39.2993 156.323 41.5215C156.323 43.6954 156.831 45.7002 157.845 47.536C158.908 49.3234 160.309 50.7485 162.048 51.8113C163.835 52.8741 165.816 53.4055 167.99 53.4055Z", fill: "white" }),
|
|
1295
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M124.478 64.7098C120.179 64.7098 116.242 63.6712 112.667 61.5939C109.092 59.5166 106.242 56.7147 104.116 53.1881C102.039 49.6616 101 45.7727 101 41.5215C101 37.222 102.039 33.3331 104.116 29.8548C106.242 26.3283 109.092 23.5264 112.667 21.4491C116.242 19.3718 120.179 18.3331 124.478 18.3331C127.473 18.3331 130.299 18.8404 132.956 19.8549C135.662 20.821 138.053 22.2703 140.13 24.2027L136.869 37.0287C135.662 35.0481 134.043 33.3331 132.014 31.8838C130.034 30.3862 127.691 29.6374 124.985 29.6374C122.715 29.6374 120.686 30.1688 118.899 31.2316C117.111 32.2944 115.71 33.7196 114.696 35.507C113.681 37.2944 113.174 39.2993 113.174 41.5215C113.174 43.6954 113.681 45.7002 114.696 47.536C115.71 49.3234 117.111 50.7485 118.899 51.8113C120.686 52.8741 122.715 53.4055 124.985 53.4055C127.691 53.4055 130.034 52.6809 132.014 51.2316C134.043 49.734 135.662 47.9949 136.869 46.0142L140.13 58.8403C138.053 60.7726 135.662 62.2461 132.956 63.2605C130.299 64.2267 127.473 64.7098 124.478 64.7098Z", fill: "white" })
|
|
949
1296
|
] });
|
|
950
1297
|
}
|
|
951
|
-
return /* @__PURE__ */ (0,
|
|
952
|
-
/* @__PURE__ */ (0,
|
|
953
|
-
/* @__PURE__ */ (0,
|
|
954
|
-
/* @__PURE__ */ (0,
|
|
955
|
-
/* @__PURE__ */ (0,
|
|
956
|
-
/* @__PURE__ */ (0,
|
|
957
|
-
/* @__PURE__ */ (0,
|
|
958
|
-
/* @__PURE__ */ (0,
|
|
959
|
-
/* @__PURE__ */ (0,
|
|
960
|
-
/* @__PURE__ */ (0,
|
|
961
|
-
/* @__PURE__ */ (0,
|
|
962
|
-
/* @__PURE__ */ (0,
|
|
963
|
-
/* @__PURE__ */ (0,
|
|
964
|
-
/* @__PURE__ */ (0,
|
|
1298
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: "80", height: "14", viewBox: "0 0 487 85", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
|
|
1299
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M48.6448 12.0775L40.9465 7.80469L11.7295 24.9191C9.15284 52.6189 18.7082 71.6223 35.081 82.6271C20.2649 65.6636 17.8134 40.0395 18.9765 29.482L48.6448 12.0775Z", fill: "#FF6503" }),
|
|
1300
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M58.163 6.39894L50.3792 2.3728L42.6836 6.80882L50.3068 11.0328L58.163 6.39894Z", fill: "#3A3A3A" }),
|
|
1301
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M27.5232 34.0452C23.4435 59.5977 30.8336 77.08 35.0386 82.6272C35.0386 82.6272 33.7332 77.5916 33.1595 74.3123C30.7189 60.3615 31.6833 50.4718 34.5016 38.0713L65.3684 20.3563C64.6742 30.9236 58.8596 53.6481 42.0229 68.532C49.9949 64.8357 60.4902 58.794 64.1665 52.0229C63.9761 52.437 65.5692 49.5794 65.3684 49.9853C72.6494 35.8555 73.6399 23.9785 73.6892 15.2564L66.1738 10.9619L27.5232 34.0452Z", fill: "#FF6503" }),
|
|
1302
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M63.0229 54.672C56.7853 65.8167 33.207 74.5911 33.207 74.5911C33.207 74.5911 33.4213 76.1015 33.9555 78.2837C34.4897 80.4659 35.0263 82.6085 35.0263 82.6085C42.7193 78.658 54.6229 70.4326 63.0229 54.672Z", fill: "#3A3A3A" }),
|
|
1303
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M473.854 85V60.5074C472.259 61.7151 470.472 62.6571 468.491 63.3334C466.511 64.0581 464.361 64.4204 462.042 64.4204C457.984 64.4204 454.313 63.3817 451.028 61.3045C447.743 59.2272 445.11 56.4736 443.129 53.0436C441.197 49.5654 440.23 45.7248 440.23 41.5219C440.23 37.319 441.197 33.4784 443.129 30.0002C445.11 26.5219 447.743 23.7683 451.028 21.7393C454.313 19.6621 457.984 18.6234 462.042 18.6234C464.796 18.6234 467.332 19.1065 469.651 20.0727C471.969 21.0389 473.95 22.3674 475.593 24.0582V19.7828H486.462V85H473.854ZM463.491 53.3335C465.617 53.3335 467.549 52.8021 469.288 51.7393C471.027 50.6765 472.404 49.2513 473.419 47.4639C474.482 45.6765 475.013 43.6958 475.013 41.5219C475.013 39.348 474.482 37.3673 473.419 35.5799C472.404 33.7925 471.027 32.3673 469.288 31.3045C467.549 30.2417 465.617 29.7103 463.491 29.7103C461.366 29.7103 459.433 30.2417 457.694 31.3045C455.955 32.3673 454.554 33.7925 453.491 35.5799C452.477 37.3673 451.97 39.348 451.97 41.5219C451.97 43.6958 452.477 45.6765 453.491 47.4639C454.554 49.2513 455.955 50.6765 457.694 51.7393C459.433 52.8021 461.366 53.3335 463.491 53.3335Z", fill: "#FF6503" }),
|
|
1304
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M420.132 63.2607V19.7826H432.741V63.2607H420.132ZM426.436 13.4782C424.552 13.4782 422.958 12.826 421.654 11.5217C420.349 10.2174 419.697 8.62316 419.697 6.73911C419.697 4.80675 420.349 3.21255 421.654 1.95651C422.958 0.65217 424.552 0 426.436 0C428.369 0 429.963 0.65217 431.219 1.95651C432.523 3.21255 433.175 4.80675 433.175 6.73911C433.175 8.62316 432.523 10.2174 431.219 11.5217C429.963 12.826 428.369 13.4782 426.436 13.4782Z", fill: "#FF6503" }),
|
|
1305
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M392.452 63.2607V29.7825H384.336V19.7825H392.669V5.28979H404.843V19.7825H413.466V29.7825H405.061V63.2607H392.452Z", fill: "#3A3A3A" }),
|
|
1306
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M338.059 63.2605V19.7824H349.363V24.565C350.909 22.536 352.817 20.9901 355.088 19.9273C357.358 18.8645 359.798 18.3331 362.406 18.3331C365.498 18.3331 368.373 19.0819 371.03 20.5795C373.735 22.0288 375.909 24.1785 377.551 27.0288C379.242 29.8307 380.087 33.2365 380.087 37.2461V63.2605H367.479V38.9128C367.479 36.4973 366.754 34.3476 365.305 32.4635C363.856 30.5795 361.778 29.6374 359.073 29.6374C356.899 29.6374 354.943 30.3862 353.203 31.8838C351.513 33.3331 350.667 35.6278 350.667 38.7679V63.2605H338.059Z", fill: "#3A3A3A" }),
|
|
1307
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M310.56 64.7098C305.68 64.7098 301.381 63.6953 297.661 61.6664C293.941 59.6374 291.043 56.8596 288.966 53.333C286.888 49.7582 285.85 45.6761 285.85 41.0867C285.85 36.6906 286.864 32.8017 288.893 29.4201C290.922 25.9901 293.652 23.2848 297.081 21.3041C300.56 19.3235 304.4 18.3331 308.603 18.3331C312.903 18.3331 316.743 19.3235 320.125 21.3041C323.507 23.2365 326.164 25.8935 328.096 29.2751C330.077 32.6568 331.067 36.4973 331.067 40.7968V45.2171H304.545C303.337 45.2171 302.178 45.1447 301.067 44.9997C299.956 44.8548 298.845 44.6857 297.734 44.4925C298.313 47.391 299.738 49.7582 302.009 51.5939C304.328 53.3813 307.275 54.2751 310.85 54.2751C313.603 54.2751 316.067 53.7195 318.241 52.6084C320.463 51.4973 322.275 50.1205 323.676 48.478L326.429 59.7823C324.255 61.4248 321.792 62.6567 319.038 63.4779C316.333 64.2992 313.507 64.7098 310.56 64.7098ZM297.444 36.8838C299.859 36.3524 302.226 36.0867 304.545 36.0867H312.226C313.579 36.0867 314.859 36.135 316.067 36.2316C317.275 36.3283 318.41 36.4973 319.473 36.7389C318.748 34.1302 317.42 32.0771 315.487 30.5795C313.603 29.0819 311.26 28.3331 308.458 28.3331C305.801 28.3331 303.482 29.1061 301.502 30.6519C299.569 32.1495 298.217 34.2268 297.444 36.8838Z", fill: "#3A3A3A" }),
|
|
1308
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M263.884 64.7098C260.937 64.7098 257.942 64.2267 254.898 63.2605C251.903 62.2944 249.56 60.99 247.869 59.3475L250.985 47.4635C252.386 49.3959 254.318 51.0867 256.782 52.5359C259.294 53.9852 261.879 54.7098 264.536 54.7098C266.323 54.7098 267.603 54.3717 268.376 53.6954C269.198 53.019 269.608 52.1978 269.608 51.2316C269.608 50.1205 269.198 49.3234 268.376 48.8403C267.555 48.3089 266.71 47.8741 265.84 47.536L259.753 45.2171C258.401 44.6857 256.855 43.9611 255.115 43.0432C253.376 42.1253 251.855 40.821 250.55 39.1302C249.294 37.4394 248.666 35.2171 248.666 32.4635C248.666 29.9515 249.294 27.6326 250.55 25.507C251.806 23.3814 253.618 21.6665 255.985 20.3621C258.401 19.0095 261.299 18.3331 264.681 18.3331C267.821 18.3331 270.743 18.8645 273.449 19.9273C276.202 20.9901 278.207 22.1737 279.463 23.478L276.565 34.9273C274.922 32.8017 272.966 31.1833 270.695 30.0722C268.473 28.9128 266.347 28.3331 264.318 28.3331C262.772 28.3331 261.637 28.6471 260.913 29.2751C260.188 29.9031 259.826 30.6278 259.826 31.449C259.826 32.0771 260.067 32.7051 260.55 33.3331C261.082 33.9128 261.951 34.4442 263.159 34.9273L268.811 37.0287C270.454 37.6084 272.193 38.3814 274.028 39.3476C275.913 40.3137 277.507 41.6664 278.811 43.4055C280.115 45.0963 280.768 47.4393 280.768 50.4345C280.768 54.6374 279.198 58.0673 276.057 60.7243C272.966 63.3813 268.908 64.7098 263.884 64.7098Z", fill: "#3A3A3A" }),
|
|
1309
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M198.861 63.2605V19.7824H210.166V24.565C211.712 22.536 213.62 20.9901 215.89 19.9273C218.161 18.8645 220.6 18.3331 223.209 18.3331C226.301 18.3331 229.175 19.0819 231.832 20.5795C234.538 22.0288 236.711 24.1785 238.354 27.0288C240.045 29.8307 240.89 33.2365 240.89 37.2461V63.2605H228.282V38.9128C228.282 36.4973 227.557 34.3476 226.108 32.4635C224.658 30.5795 222.581 29.6374 219.876 29.6374C217.702 29.6374 215.745 30.3862 214.006 31.8838C212.315 33.3331 211.47 35.6278 211.47 38.7679V63.2605H198.861Z", fill: "#3A3A3A" }),
|
|
1310
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M167.99 64.7098C163.69 64.7098 159.753 63.6712 156.178 61.5939C152.603 59.5166 149.753 56.7147 147.628 53.1881C145.55 49.6616 144.512 45.7727 144.512 41.5215C144.512 37.222 145.55 33.3331 147.628 29.8548C149.753 26.3283 152.603 23.5264 156.178 21.4491C159.753 19.3718 163.69 18.3331 167.99 18.3331C172.338 18.3331 176.275 19.3718 179.801 21.4491C183.376 23.5264 186.202 26.3283 188.28 29.8548C190.405 33.3331 191.468 37.222 191.468 41.5215C191.468 45.7727 190.405 49.6616 188.28 53.1881C186.202 56.7147 183.376 59.5166 179.801 61.5939C176.275 63.6712 172.338 64.7098 167.99 64.7098ZM167.99 53.4055C170.164 53.4055 172.12 52.8741 173.859 51.8113C175.647 50.7485 177.048 49.3234 178.062 47.536C179.125 45.7002 179.657 43.6954 179.657 41.5215C179.657 39.2993 179.125 37.2944 178.062 35.507C177.048 33.7196 175.647 32.2944 173.859 31.2316C172.12 30.1688 170.164 29.6374 167.99 29.6374C165.816 29.6374 163.835 30.1688 162.048 31.2316C160.309 32.2944 158.908 33.7196 157.845 35.507C156.831 37.2944 156.323 39.2993 156.323 41.5215C156.323 43.6954 156.831 45.7002 157.845 47.536C158.908 49.3234 160.309 50.7485 162.048 51.8113C163.835 52.8741 165.816 53.4055 167.99 53.4055Z", fill: "#3A3A3A" }),
|
|
1311
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M124.478 64.7098C120.179 64.7098 116.242 63.6712 112.667 61.5939C109.092 59.5166 106.242 56.7147 104.116 53.1881C102.039 49.6616 101 45.7727 101 41.5215C101 37.222 102.039 33.3331 104.116 29.8548C106.242 26.3283 109.092 23.5264 112.667 21.4491C116.242 19.3718 120.179 18.3331 124.478 18.3331C127.473 18.3331 130.299 18.8404 132.956 19.8549C135.662 20.821 138.053 22.2703 140.13 24.2027L136.869 37.0287C135.662 35.0481 134.043 33.3331 132.014 31.8838C130.034 30.3862 127.691 29.6374 124.985 29.6374C122.715 29.6374 120.686 30.1688 118.899 31.2316C117.111 32.2944 115.71 33.7196 114.696 35.507C113.681 37.2944 113.174 39.2993 113.174 41.5215C113.174 43.6954 113.681 45.7002 114.696 47.536C115.71 49.3234 117.111 50.7485 118.899 51.8113C120.686 52.8741 122.715 53.4055 124.985 53.4055C127.691 53.4055 130.034 52.6809 132.014 51.2316C134.043 49.734 135.662 47.9949 136.869 46.0142L140.13 58.8403C138.053 60.7726 135.662 62.2461 132.956 63.2605C130.299 64.2267 127.473 64.7098 124.478 64.7098Z", fill: "#3A3A3A" })
|
|
965
1312
|
] });
|
|
966
1313
|
}
|
|
967
1314
|
|
|
968
1315
|
// src/components/ConsentGate.tsx
|
|
969
|
-
var
|
|
1316
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
970
1317
|
function ConsentGate({
|
|
971
1318
|
category,
|
|
972
1319
|
children,
|
|
@@ -975,12 +1322,12 @@ function ConsentGate({
|
|
|
975
1322
|
}) {
|
|
976
1323
|
const { hasConsent, isLoading } = useConsentGate(category);
|
|
977
1324
|
if (isLoading) {
|
|
978
|
-
return /* @__PURE__ */ (0,
|
|
1325
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: loading });
|
|
979
1326
|
}
|
|
980
1327
|
if (hasConsent) {
|
|
981
|
-
return /* @__PURE__ */ (0,
|
|
1328
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children });
|
|
982
1329
|
}
|
|
983
|
-
return /* @__PURE__ */ (0,
|
|
1330
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: fallback });
|
|
984
1331
|
}
|
|
985
1332
|
function withConsentGate(Component, category, FallbackComponent) {
|
|
986
1333
|
return function ConsentGatedComponent(props) {
|
|
@@ -989,20 +1336,285 @@ function withConsentGate(Component, category, FallbackComponent) {
|
|
|
989
1336
|
return null;
|
|
990
1337
|
}
|
|
991
1338
|
if (hasConsent) {
|
|
992
|
-
return /* @__PURE__ */ (0,
|
|
1339
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Component, { ...props });
|
|
993
1340
|
}
|
|
994
1341
|
if (FallbackComponent) {
|
|
995
|
-
return /* @__PURE__ */ (0,
|
|
1342
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(FallbackComponent, { ...props });
|
|
996
1343
|
}
|
|
997
1344
|
return null;
|
|
998
1345
|
};
|
|
999
1346
|
}
|
|
1347
|
+
|
|
1348
|
+
// src/components/MarketingConsentForm.tsx
|
|
1349
|
+
var import_react8 = require("react");
|
|
1350
|
+
|
|
1351
|
+
// src/hooks/useFormConsent.ts
|
|
1352
|
+
var import_react7 = require("react");
|
|
1353
|
+
var configCache = /* @__PURE__ */ new Map();
|
|
1354
|
+
var CONFIG_TTL = 6e4;
|
|
1355
|
+
function getCachedConfig(propertyKey) {
|
|
1356
|
+
const entry = configCache.get(propertyKey);
|
|
1357
|
+
if (entry && Date.now() - entry.timestamp < CONFIG_TTL) {
|
|
1358
|
+
return entry.config;
|
|
1359
|
+
}
|
|
1360
|
+
return null;
|
|
1361
|
+
}
|
|
1362
|
+
function setCachedConfig(propertyKey, config) {
|
|
1363
|
+
configCache.set(propertyKey, { config, timestamp: Date.now() });
|
|
1364
|
+
}
|
|
1365
|
+
function useFormConsent(options) {
|
|
1366
|
+
const { propertyKey, apiUrl, subjectId, subjectType = "visitor", debug = false } = options;
|
|
1367
|
+
const [config, setConfig] = (0, import_react7.useState)(() => getCachedConfig(propertyKey));
|
|
1368
|
+
const [consents, setConsents] = (0, import_react7.useState)({});
|
|
1369
|
+
const [isLoading, setIsLoading] = (0, import_react7.useState)(!getCachedConfig(propertyKey));
|
|
1370
|
+
const [isSubmitting, setIsSubmitting] = (0, import_react7.useState)(false);
|
|
1371
|
+
const [error, setError] = (0, import_react7.useState)(null);
|
|
1372
|
+
const [lastSubmission, setLastSubmission] = (0, import_react7.useState)(null);
|
|
1373
|
+
const apiClientRef = (0, import_react7.useRef)(null);
|
|
1374
|
+
(0, import_react7.useEffect)(() => {
|
|
1375
|
+
if (config) return;
|
|
1376
|
+
let cancelled = false;
|
|
1377
|
+
const client = new ConsentIQApiClient(propertyKey, apiUrl, debug);
|
|
1378
|
+
apiClientRef.current = client;
|
|
1379
|
+
client.getConfig().then((cfg) => {
|
|
1380
|
+
if (cancelled) return;
|
|
1381
|
+
setCachedConfig(propertyKey, cfg);
|
|
1382
|
+
setConfig(cfg);
|
|
1383
|
+
setIsLoading(false);
|
|
1384
|
+
}).catch((err) => {
|
|
1385
|
+
if (cancelled) return;
|
|
1386
|
+
setError(err.message || "Failed to load config");
|
|
1387
|
+
setIsLoading(false);
|
|
1388
|
+
});
|
|
1389
|
+
return () => {
|
|
1390
|
+
cancelled = true;
|
|
1391
|
+
};
|
|
1392
|
+
}, [propertyKey, apiUrl, debug]);
|
|
1393
|
+
const privacyNoticeUrl = (() => {
|
|
1394
|
+
if (!config) return null;
|
|
1395
|
+
const currentPath = typeof window !== "undefined" ? window.location.pathname : "/";
|
|
1396
|
+
const sources = config.formConsentSources || [];
|
|
1397
|
+
for (const source of sources) {
|
|
1398
|
+
if (!source.selector) continue;
|
|
1399
|
+
const selectorPath = source.selector.startsWith("/") ? source.selector.split("#")[0] : null;
|
|
1400
|
+
if (selectorPath && currentPath.startsWith(selectorPath)) {
|
|
1401
|
+
const noticeParam = source.privacyNotice.id;
|
|
1402
|
+
return `${config.privacyNoticeUrl}?notice=${noticeParam}`;
|
|
1403
|
+
}
|
|
1404
|
+
}
|
|
1405
|
+
return config.privacyNoticeUrl;
|
|
1406
|
+
})();
|
|
1407
|
+
const channels = config?.marketingChannels || [];
|
|
1408
|
+
const setConsent = (0, import_react7.useCallback)((channel, value) => {
|
|
1409
|
+
setConsents((prev) => ({ ...prev, [channel]: value }));
|
|
1410
|
+
}, []);
|
|
1411
|
+
const setAllConsents = (0, import_react7.useCallback)((value) => {
|
|
1412
|
+
if (!config) return;
|
|
1413
|
+
const newConsents = {};
|
|
1414
|
+
for (const ch of config.marketingChannels) {
|
|
1415
|
+
newConsents[ch.code] = value;
|
|
1416
|
+
}
|
|
1417
|
+
setConsents(newConsents);
|
|
1418
|
+
}, [config]);
|
|
1419
|
+
const submit = (0, import_react7.useCallback)(async () => {
|
|
1420
|
+
if (!subjectId) {
|
|
1421
|
+
setError("subjectId is required");
|
|
1422
|
+
return null;
|
|
1423
|
+
}
|
|
1424
|
+
if (!apiClientRef.current) {
|
|
1425
|
+
setError("API client not initialized");
|
|
1426
|
+
return null;
|
|
1427
|
+
}
|
|
1428
|
+
setIsSubmitting(true);
|
|
1429
|
+
setError(null);
|
|
1430
|
+
try {
|
|
1431
|
+
const result = await apiClientRef.current.submitConsent({
|
|
1432
|
+
subjectId,
|
|
1433
|
+
subjectType,
|
|
1434
|
+
marketingConsents: consents,
|
|
1435
|
+
consentMethod: "form"
|
|
1436
|
+
});
|
|
1437
|
+
const submission = { consentId: result.consentId, proofHash: result.proofHash };
|
|
1438
|
+
setLastSubmission(submission);
|
|
1439
|
+
setIsSubmitting(false);
|
|
1440
|
+
return submission;
|
|
1441
|
+
} catch (err) {
|
|
1442
|
+
const message = err instanceof Error ? err.message : "Failed to submit consent";
|
|
1443
|
+
setError(message);
|
|
1444
|
+
setIsSubmitting(false);
|
|
1445
|
+
return null;
|
|
1446
|
+
}
|
|
1447
|
+
}, [subjectId, subjectType, consents]);
|
|
1448
|
+
return {
|
|
1449
|
+
channels,
|
|
1450
|
+
consents,
|
|
1451
|
+
privacyNoticeUrl,
|
|
1452
|
+
lastSubmission,
|
|
1453
|
+
setConsent,
|
|
1454
|
+
setAllConsents,
|
|
1455
|
+
submit,
|
|
1456
|
+
isLoading,
|
|
1457
|
+
isSubmitting,
|
|
1458
|
+
error
|
|
1459
|
+
};
|
|
1460
|
+
}
|
|
1461
|
+
|
|
1462
|
+
// src/components/MarketingConsentForm.tsx
|
|
1463
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
1464
|
+
var MarketingConsentForm = (0, import_react8.forwardRef)(
|
|
1465
|
+
function MarketingConsentForm2({
|
|
1466
|
+
propertyKey,
|
|
1467
|
+
apiUrl,
|
|
1468
|
+
subjectId,
|
|
1469
|
+
subjectType,
|
|
1470
|
+
mode = "simple",
|
|
1471
|
+
simpleLabel,
|
|
1472
|
+
channels: channelFilter,
|
|
1473
|
+
onConsentSubmitted,
|
|
1474
|
+
onConsentChange,
|
|
1475
|
+
autoSubmit = false,
|
|
1476
|
+
className,
|
|
1477
|
+
style,
|
|
1478
|
+
showDescriptions = false,
|
|
1479
|
+
showPrivacyLink = true,
|
|
1480
|
+
privacyLinkText = "Privacy Policy",
|
|
1481
|
+
privacyUrl: privacyUrlOverride
|
|
1482
|
+
}, ref) {
|
|
1483
|
+
const resolvedPropertyKey = propertyKey || "";
|
|
1484
|
+
const {
|
|
1485
|
+
channels,
|
|
1486
|
+
consents,
|
|
1487
|
+
privacyNoticeUrl,
|
|
1488
|
+
setConsent,
|
|
1489
|
+
setAllConsents,
|
|
1490
|
+
submit,
|
|
1491
|
+
isLoading,
|
|
1492
|
+
isSubmitting
|
|
1493
|
+
} = useFormConsent({
|
|
1494
|
+
propertyKey: resolvedPropertyKey,
|
|
1495
|
+
apiUrl,
|
|
1496
|
+
subjectId,
|
|
1497
|
+
subjectType
|
|
1498
|
+
});
|
|
1499
|
+
const privacyUrl = privacyUrlOverride || privacyNoticeUrl;
|
|
1500
|
+
const visibleChannels = channelFilter ? channels.filter((ch) => channelFilter.includes(ch.code)) : channels;
|
|
1501
|
+
(0, import_react8.useImperativeHandle)(ref, () => ({
|
|
1502
|
+
submit: async () => {
|
|
1503
|
+
const result = await submit();
|
|
1504
|
+
if (result && onConsentSubmitted) {
|
|
1505
|
+
onConsentSubmitted({ ...result, consents });
|
|
1506
|
+
}
|
|
1507
|
+
return result;
|
|
1508
|
+
},
|
|
1509
|
+
getConsents: () => consents,
|
|
1510
|
+
reset: () => setAllConsents(false)
|
|
1511
|
+
}), [submit, consents, onConsentSubmitted, setAllConsents]);
|
|
1512
|
+
const handleChange = (channel, value) => {
|
|
1513
|
+
setConsent(channel, value);
|
|
1514
|
+
const updated = { ...consents, [channel]: value };
|
|
1515
|
+
onConsentChange?.(updated);
|
|
1516
|
+
if (autoSubmit) {
|
|
1517
|
+
submit().then((result) => {
|
|
1518
|
+
if (result && onConsentSubmitted) {
|
|
1519
|
+
onConsentSubmitted({ ...result, consents: updated });
|
|
1520
|
+
}
|
|
1521
|
+
});
|
|
1522
|
+
}
|
|
1523
|
+
};
|
|
1524
|
+
const handleSimpleChange = (checked) => {
|
|
1525
|
+
setAllConsents(checked);
|
|
1526
|
+
const updated = {};
|
|
1527
|
+
for (const ch of visibleChannels) {
|
|
1528
|
+
updated[ch.code] = checked;
|
|
1529
|
+
}
|
|
1530
|
+
onConsentChange?.(updated);
|
|
1531
|
+
if (autoSubmit) {
|
|
1532
|
+
submit().then((result) => {
|
|
1533
|
+
if (result && onConsentSubmitted) {
|
|
1534
|
+
onConsentSubmitted({ ...result, consents: updated });
|
|
1535
|
+
}
|
|
1536
|
+
});
|
|
1537
|
+
}
|
|
1538
|
+
};
|
|
1539
|
+
if (isLoading) {
|
|
1540
|
+
return null;
|
|
1541
|
+
}
|
|
1542
|
+
const allChecked = visibleChannels.length > 0 && visibleChannels.every((ch) => consents[ch.code]);
|
|
1543
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className, style: { fontSize: "14px", ...style }, children: mode === "simple" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("label", { style: { display: "flex", alignItems: "flex-start", gap: "8px", cursor: "pointer" }, children: [
|
|
1544
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
1545
|
+
"input",
|
|
1546
|
+
{
|
|
1547
|
+
type: "checkbox",
|
|
1548
|
+
checked: allChecked,
|
|
1549
|
+
onChange: (e) => handleSimpleChange(e.target.checked),
|
|
1550
|
+
disabled: isSubmitting,
|
|
1551
|
+
style: { marginTop: "3px" }
|
|
1552
|
+
}
|
|
1553
|
+
),
|
|
1554
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
|
|
1555
|
+
simpleLabel || "I agree to receive marketing communications",
|
|
1556
|
+
showPrivacyLink && privacyUrl && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
|
|
1557
|
+
". ",
|
|
1558
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
1559
|
+
"a",
|
|
1560
|
+
{
|
|
1561
|
+
href: privacyUrl,
|
|
1562
|
+
target: "_blank",
|
|
1563
|
+
rel: "noopener noreferrer",
|
|
1564
|
+
style: { textDecoration: "underline" },
|
|
1565
|
+
children: privacyLinkText
|
|
1566
|
+
}
|
|
1567
|
+
)
|
|
1568
|
+
] })
|
|
1569
|
+
] })
|
|
1570
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
|
|
1571
|
+
visibleChannels.map((ch) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
1572
|
+
"label",
|
|
1573
|
+
{
|
|
1574
|
+
style: { display: "flex", alignItems: "flex-start", gap: "8px", cursor: "pointer" },
|
|
1575
|
+
children: [
|
|
1576
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
1577
|
+
"input",
|
|
1578
|
+
{
|
|
1579
|
+
type: "checkbox",
|
|
1580
|
+
checked: consents[ch.code] === true,
|
|
1581
|
+
onChange: (e) => handleChange(ch.code, e.target.checked),
|
|
1582
|
+
disabled: isSubmitting,
|
|
1583
|
+
style: { marginTop: "3px" }
|
|
1584
|
+
}
|
|
1585
|
+
),
|
|
1586
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
|
|
1587
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("strong", { children: ch.name }),
|
|
1588
|
+
showDescriptions && ch.description && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { display: "block", color: "#666", fontSize: "12px" }, children: ch.description })
|
|
1589
|
+
] })
|
|
1590
|
+
]
|
|
1591
|
+
},
|
|
1592
|
+
ch.code
|
|
1593
|
+
)),
|
|
1594
|
+
showPrivacyLink && privacyUrl && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
1595
|
+
"a",
|
|
1596
|
+
{
|
|
1597
|
+
href: privacyUrl,
|
|
1598
|
+
target: "_blank",
|
|
1599
|
+
rel: "noopener noreferrer",
|
|
1600
|
+
style: { fontSize: "12px", textDecoration: "underline", color: "#666" },
|
|
1601
|
+
children: privacyLinkText
|
|
1602
|
+
}
|
|
1603
|
+
)
|
|
1604
|
+
] }) });
|
|
1605
|
+
}
|
|
1606
|
+
);
|
|
1000
1607
|
// Annotate the CommonJS export names for ESM import in node:
|
|
1001
1608
|
0 && (module.exports = {
|
|
1609
|
+
ConsentForm,
|
|
1002
1610
|
ConsentGate,
|
|
1003
1611
|
ConsentIQApiClient,
|
|
1004
1612
|
ConsentIQProvider,
|
|
1613
|
+
ConsentPageTrigger,
|
|
1614
|
+
ConsentTrigger,
|
|
1005
1615
|
CookieBanner,
|
|
1616
|
+
LanguageSelector,
|
|
1617
|
+
MarketingConsentForm,
|
|
1006
1618
|
PreferenceCenter,
|
|
1007
1619
|
detectCountry,
|
|
1008
1620
|
detectLanguage,
|
|
@@ -1011,5 +1623,7 @@ function withConsentGate(Component, category, FallbackComponent) {
|
|
|
1011
1623
|
useConsent,
|
|
1012
1624
|
useConsentGate,
|
|
1013
1625
|
useConsentIQ,
|
|
1626
|
+
useConsentPurposes,
|
|
1627
|
+
useFormConsent,
|
|
1014
1628
|
withConsentGate
|
|
1015
1629
|
});
|