@everymatrix/user-action-controller 1.0.0 → 1.0.69

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.
Files changed (57) hide show
  1. package/dist/cjs/app-globals-3a1e7e63.js +5 -0
  2. package/dist/cjs/index-c5061e5a.js +1315 -0
  3. package/dist/cjs/loader.cjs.js +7 -13
  4. package/dist/cjs/player-user-consents_2.cjs.entry.js +504 -0
  5. package/dist/cjs/user-action-controller.cjs.js +17 -11
  6. package/dist/collection/collection-manifest.json +5 -11
  7. package/dist/collection/components/user-action-controller/index.js +1 -0
  8. package/dist/collection/components/user-action-controller/user-action-controller.css +37 -0
  9. package/dist/collection/components/user-action-controller/user-action-controller.js +418 -328
  10. package/dist/collection/utils/locale.utils.js +66 -0
  11. package/dist/collection/utils/utils.js +1 -1
  12. package/dist/esm/app-globals-0f993ce5.js +3 -0
  13. package/dist/esm/index-02b86e76.js +1288 -0
  14. package/dist/esm/loader.js +7 -13
  15. package/dist/esm/player-user-consents_2.entry.js +499 -0
  16. package/dist/esm/user-action-controller.js +14 -11
  17. package/dist/stencil.config.dev.js +17 -0
  18. package/dist/stencil.config.js +14 -19
  19. package/dist/types/Users/raul.vasile/workspace/everymatrix/widgets-monorepo/packages/stencil/user-action-controller/.stencil/packages/stencil/user-action-controller/stencil.config.d.ts +2 -0
  20. package/dist/types/Users/raul.vasile/workspace/everymatrix/widgets-monorepo/packages/stencil/user-action-controller/.stencil/packages/stencil/user-action-controller/stencil.config.dev.d.ts +2 -0
  21. package/dist/types/components/user-action-controller/index.d.ts +1 -0
  22. package/dist/types/components/user-action-controller/user-action-controller.d.ts +68 -68
  23. package/dist/types/components.d.ts +28 -40
  24. package/dist/types/stencil-public-runtime.d.ts +142 -33
  25. package/dist/types/utils/locale.utils.d.ts +2 -0
  26. package/dist/user-action-controller/p-4bd71dba.entry.js +1 -0
  27. package/dist/user-action-controller/p-b996e8b8.js +2 -0
  28. package/dist/user-action-controller/p-e1255160.js +1 -0
  29. package/dist/user-action-controller/user-action-controller.esm.js +1 -1
  30. package/loader/cdn.js +1 -3
  31. package/loader/index.cjs.js +1 -3
  32. package/loader/index.d.ts +13 -1
  33. package/loader/index.es2017.js +1 -3
  34. package/loader/index.js +1 -3
  35. package/loader/package.json +1 -0
  36. package/package.json +16 -3
  37. package/dist/cjs/generic-user-consent_3.cjs.entry.js +0 -210
  38. package/dist/cjs/index-5b463836.js +0 -1285
  39. package/dist/components/generic-user-consent.js +0 -6
  40. package/dist/components/generic-user-consent2.js +0 -93
  41. package/dist/components/index.d.ts +0 -26
  42. package/dist/components/index.js +0 -1
  43. package/dist/components/legislation-wrapper.js +0 -6
  44. package/dist/components/legislation-wrapper2.js +0 -33
  45. package/dist/components/user-action-controller.d.ts +0 -11
  46. package/dist/components/user-action-controller.js +0 -168
  47. package/dist/esm/generic-user-consent_3.entry.js +0 -204
  48. package/dist/esm/index-e34db4b0.js +0 -1259
  49. package/dist/esm/polyfills/core-js.js +0 -11
  50. package/dist/esm/polyfills/css-shim.js +0 -1
  51. package/dist/esm/polyfills/dom.js +0 -79
  52. package/dist/esm/polyfills/es5-html-element.js +0 -1
  53. package/dist/esm/polyfills/index.js +0 -34
  54. package/dist/esm/polyfills/system.js +0 -6
  55. package/dist/types/Users/user/workspace/everymatrix/widgets-stencil/packages/user-action-controller/.stencil/packages/user-action-controller/stencil.config.d.ts +0 -2
  56. package/dist/user-action-controller/p-20213f37.js +0 -1
  57. package/dist/user-action-controller/p-2a14a5fe.entry.js +0 -1
@@ -1,6 +0,0 @@
1
- import { G as GenericUserConsent$1, d as defineCustomElement$1 } from './generic-user-consent2.js';
2
-
3
- const GenericUserConsent = GenericUserConsent$1;
4
- const defineCustomElement = defineCustomElement$1;
5
-
6
- export { GenericUserConsent, defineCustomElement };
@@ -1,93 +0,0 @@
1
- import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
2
-
3
- const genericUserConsentCss = ":host{display:block}.ConsentTitle{margin-bottom:0.2rem;font-weight:600}.userConsent:hover{border-bottom:1px solid #000;cursor:pointer}.MandatoryItem{color:#f00;font-size:1.2rem}";
4
-
5
- const GenericUserConsent = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
6
- constructor() {
7
- super();
8
- this.__registerHost();
9
- this.__attachShadow();
10
- this.userLegislationConsent = createEvent(this, "userLegislationConsent", 7);
11
- /**
12
- * 'true' when parent expects component to emit it's current value
13
- */
14
- this.queried = false;
15
- /**
16
- * the type of the consent, used to determine render details
17
- */
18
- this.consentType = '';
19
- /**
20
- * wether or not this consent is mandatory. Used for render details
21
- */
22
- this.mandatory = false;
23
- /**
24
- * the title of the consent to be displayed
25
- */
26
- this.consentTitle = '';
27
- /**
28
- * link to the t&c page
29
- */
30
- this.tcLink = '#';
31
- /**
32
- * link to privacy policy page
33
- */
34
- this.privacyLink = '#';
35
- /**
36
- * the text content to be rendered by the component. Determined at runtime
37
- */
38
- this.textContent = '';
39
- // Maybe switch this out with a localization source
40
- this.stringVariants = {
41
- termsandconditions1: "I accept the ",
42
- termsandconditions2: ", I have read and understood the ",
43
- termsandconditions3: " as published on this site and confirm that I am over 18 years old.",
44
- tc: "Terms and Conditions",
45
- privacy: "Privacy Policy",
46
- sms: "I consent to receive marketing communication via SMS.",
47
- emailmarketing: "I consent to receive marketing communication via Email."
48
- };
49
- }
50
- determineTextContent() {
51
- let result = this.consentType === 'termsandconditions' ?
52
- h("span", null, this.stringVariants['termsandconditions1'], h("a", { href: this.tcLink }, this.stringVariants['tc']), this.stringVariants['termsandconditions2'], h("a", { href: this.privacyLink }, this.stringVariants['privacy']), this.stringVariants['termsandconditions3'])
53
- : h("span", null, this.stringVariants[this.consentType]);
54
- return result;
55
- }
56
- userLegislationConsentHandler() {
57
- this.userLegislationConsent.emit({
58
- type: this.consentType,
59
- value: this.checkboxInput.checked
60
- });
61
- }
62
- render() {
63
- if (this.queried) {
64
- this.userLegislationConsentHandler();
65
- }
66
- this.textContent = this.determineTextContent();
67
- return (h("div", null, h("p", { class: "ConsentTitle" }, this.consentTitle), h("label", { class: "userConsent", htmlFor: "userConsent" }, h("input", { ref: el => this.checkboxInput = el, id: "userConsent", type: "checkbox", onInput: () => this.userLegislationConsentHandler() }), this.textContent, this.mandatory && h("span", { class: "MandatoryItem" }, "*"))));
68
- }
69
- static get style() { return genericUserConsentCss; }
70
- }, [1, "generic-user-consent", {
71
- "queried": [4],
72
- "consentType": [1, "consent-type"],
73
- "mandatory": [4],
74
- "consentTitle": [1, "consent-title"],
75
- "tcLink": [1, "tc-link"],
76
- "privacyLink": [1, "privacy-link"],
77
- "textContent": [32]
78
- }]);
79
- function defineCustomElement() {
80
- if (typeof customElements === "undefined") {
81
- return;
82
- }
83
- const components = ["generic-user-consent"];
84
- components.forEach(tagName => { switch (tagName) {
85
- case "generic-user-consent":
86
- if (!customElements.get(tagName)) {
87
- customElements.define(tagName, GenericUserConsent);
88
- }
89
- break;
90
- } });
91
- }
92
-
93
- export { GenericUserConsent as G, defineCustomElement as d };
@@ -1,26 +0,0 @@
1
- /* UserActionController custom elements */
2
-
3
- import type { Components, JSX } from "../types/components";
4
-
5
- /**
6
- * Used to manually set the base path where assets can be found.
7
- * If the script is used as "module", it's recommended to use "import.meta.url",
8
- * such as "setAssetPath(import.meta.url)". Other options include
9
- * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
10
- * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
11
- * But do note that this configuration depends on how your script is bundled, or lack of
12
- * bundling, and where your assets can be loaded from. Additionally custom bundling
13
- * will have to ensure the static assets are copied to its build directory.
14
- */
15
- export declare const setAssetPath: (path: string) => void;
16
-
17
- export interface SetPlatformOptions {
18
- raf?: (c: FrameRequestCallback) => number;
19
- ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
20
- rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
21
- }
22
- export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
23
-
24
- export type { Components, JSX };
25
-
26
- export * from '../types';
@@ -1 +0,0 @@
1
- export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
@@ -1,6 +0,0 @@
1
- import { L as LegislationWrapper$1, d as defineCustomElement$1 } from './legislation-wrapper2.js';
2
-
3
- const LegislationWrapper = LegislationWrapper$1;
4
- const defineCustomElement = defineCustomElement$1;
5
-
6
- export { LegislationWrapper, defineCustomElement };
@@ -1,33 +0,0 @@
1
- import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
2
-
3
- const legislationWrapperCss = ":host{display:block}";
4
-
5
- const LegislationWrapper = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
6
- constructor() {
7
- super();
8
- this.__registerHost();
9
- this.__attachShadow();
10
- }
11
- render() {
12
- const activeUAList = this.activeUserActions.replace(/ /g, '').split(',');
13
- return (h("div", { class: "LegislationWrapper" }, activeUAList.map(action => (h("slot", { name: action })))));
14
- }
15
- static get style() { return legislationWrapperCss; }
16
- }, [1, "legislation-wrapper", {
17
- "activeUserActions": [1, "active-user-actions"]
18
- }]);
19
- function defineCustomElement() {
20
- if (typeof customElements === "undefined") {
21
- return;
22
- }
23
- const components = ["legislation-wrapper"];
24
- components.forEach(tagName => { switch (tagName) {
25
- case "legislation-wrapper":
26
- if (!customElements.get(tagName)) {
27
- customElements.define(tagName, LegislationWrapper);
28
- }
29
- break;
30
- } });
31
- }
32
-
33
- export { LegislationWrapper as L, defineCustomElement as d };
@@ -1,11 +0,0 @@
1
- import type { Components, JSX } from "../types/components";
2
-
3
- interface UserActionController extends Components.UserActionController, HTMLElement {}
4
- export const UserActionController: {
5
- prototype: UserActionController;
6
- new (): UserActionController;
7
- };
8
- /**
9
- * Used to define this component and all nested components recursively.
10
- */
11
- export const defineCustomElement: () => void;
@@ -1,168 +0,0 @@
1
- import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
2
- import { d as defineCustomElement$3 } from './generic-user-consent2.js';
3
- import { d as defineCustomElement$2 } from './legislation-wrapper2.js';
4
-
5
- const userActionControllerCss = ":host{display:block}.QueryReferenceContainer{height:100%;width:100%}.UserConsentNotice{font-size:1.2rem;font-weight:200;text-align:center}.CloseButton{width:25px;height:25px;align-self:flex-end}.UserActionController{font-family:Arial, Helvetica, sans-serif;font-weight:100;height:100%;width:100%;padding:1rem 1.5rem 2rem;background-color:#fff;display:flex;flex-direction:column;justify-content:space-between;border-radius:5%}.ConsentSubmitButton{font-size:1rem;padding:0.4rem 1.4rem;background:#fff;border:2px solid #000;color:#000;border-radius:5px;align-self:flex-end}.ConsentSubmitButton:disabled{border:2px solid #ccc;color:#ccc}@media screen and (max-width: 320px){.QueryReferenceContainer{font-size:0.8rem;color:blue}}";
6
-
7
- const UserActionController$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
8
- constructor() {
9
- super();
10
- this.__registerHost();
11
- this.__attachShadow();
12
- this.closeButtonEvent = createEvent(this, "closeButtonClicked", 7);
13
- /**
14
- * Event name to be sent when the button is clicked
15
- */
16
- this.postMessageEvent = 'closeButtonClicked';
17
- this.consentTitles = {
18
- termsandconditions: "Terms and Conditions",
19
- sms: "SMS marketing",
20
- emailmarketing: "Email marketing"
21
- };
22
- /**
23
- * Which actions are required in order to activate the "Apply" button. Other actions are considered optional.
24
- */
25
- this.queryFired = false;
26
- this.readyActionsCount = 0;
27
- this.receivedQueryResponses = 0;
28
- this.mandatoryActions = ['termsandconditions'];
29
- this.requiredActionsCount = 0;
30
- this.expectedQueryResponses = 0;
31
- this.userActions = [];
32
- }
33
- determineMandatoryActions() {
34
- let url = new URL(`${this.endpoint}v1/player/consentRequirements`);
35
- return fetch(url.href)
36
- .then(res => res.json())
37
- .then(data => {
38
- data.items.forEach(action => {
39
- action.mustAccept && this.mandatoryActions.push(action.tagCode);
40
- });
41
- });
42
- }
43
- handleQueryResponse() {
44
- if (this.receivedQueryResponses === this.expectedQueryResponses) {
45
- this.updateUserConsents();
46
- }
47
- }
48
- updateUserConsents() {
49
- const url = new URL(`${this.endpoint}v1/player/${this.userId}/consent`);
50
- let body = {
51
- items: this.userActions
52
- };
53
- let options = {
54
- method: 'POST',
55
- headers: {
56
- 'Content-Type': 'application/json',
57
- 'Accept': 'application/json',
58
- 'X-SessionId': `${this.userSession}`,
59
- },
60
- body: JSON.stringify(body)
61
- };
62
- fetch(url.href, options)
63
- .then(res => res.json())
64
- .then(() => {
65
- /**
66
- * @TODO document this
67
- */
68
- window.postMessage({ type: 'WidgetNotification', data: {
69
- type: 'success',
70
- message: 'Consent update successfull!'
71
- } }, window.location.href);
72
- })
73
- .catch((err) => {
74
- /**
75
- * @TODO document this
76
- */
77
- window.postMessage({ type: 'WidgetNotification', data: {
78
- type: 'error',
79
- message: 'Server might not be responding',
80
- err
81
- } }, window.location.href);
82
- })
83
- .finally(() => {
84
- window.postMessage({ type: "UserActionsCompleted" }, window.location.href);
85
- });
86
- }
87
- handleApplyClick() {
88
- this.queryFired = true;
89
- }
90
- handleClose() {
91
- if (this.usePostmessage) {
92
- window.postMessage({ type: this.postMessageEvent });
93
- }
94
- this.closeButtonEvent.emit();
95
- }
96
- userLegislationConsentHandler(event) {
97
- // Increase / Decrease the amount of mandatory actions taken
98
- if (this.mandatoryActions.includes(event.detail.type)) {
99
- if (event.detail.value)
100
- this.readyActionsCount++;
101
- else
102
- this.readyActionsCount--;
103
- }
104
- // Register final user choices only if we're ready to update
105
- if (this.queryFired) {
106
- this.userActions.push({ tagCode: event.detail.type, status: event.detail.value ? 'Accepted' : 'Denied' });
107
- this.receivedQueryResponses++;
108
- }
109
- }
110
- // Returning a promise here will ensure that the fetch completes before we render the component
111
- componentWillLoad() {
112
- return this.determineMandatoryActions();
113
- }
114
- render() {
115
- const activeUAList = this.activeUserActions.replace(/ /g, '').split(',');
116
- this.requiredActionsCount = activeUAList.filter(action => this.mandatoryActions.includes(action)).length;
117
- this.expectedQueryResponses = activeUAList.length;
118
- return (h("div", { class: "QueryReferenceContainer" }, h("div", { class: "UserActionController" }, this.showCloseButton &&
119
- h("div", { class: "CloseButton", onClick: () => this.handleClose() }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "25", height: "25", fill: "currentColor", viewBox: "0 0 16 16" }, h("path", { d: "M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" }))), h("h2", { class: "UserConsentNotice" }, this.userNoticeText), h("legislation-wrapper", { "active-user-actions": this.activeUserActions }, activeUAList.map(item => (h("generic-user-consent", { slot: item, consentType: item, consentTitle: this.consentTitles[item], queried: this.queryFired, mandatory: this.mandatoryActions.includes(item) })))), this.includeSubmitButton &&
120
- h("button", { class: "ConsentSubmitButton", disabled: this.readyActionsCount === this.requiredActionsCount ? false : true, onClick: () => this.handleApplyClick() }, this.submitButtonText))));
121
- }
122
- static get watchers() { return {
123
- "receivedQueryResponses": ["handleQueryResponse"]
124
- }; }
125
- static get style() { return userActionControllerCss; }
126
- }, [1, "user-action-controller", {
127
- "endpoint": [1],
128
- "userSession": [1, "user-session"],
129
- "userId": [1, "user-id"],
130
- "includeSubmitButton": [4, "include-submit-button"],
131
- "submitButtonText": [1, "submit-button-text"],
132
- "userNoticeText": [1, "user-notice-text"],
133
- "activeUserActions": [1, "active-user-actions"],
134
- "showCloseButton": [4, "show-close-button"],
135
- "usePostmessage": [4, "use-postmessage"],
136
- "postMessageEvent": [1, "post-message-event"],
137
- "queryFired": [32],
138
- "readyActionsCount": [32],
139
- "receivedQueryResponses": [32]
140
- }, [[0, "userLegislationConsent", "userLegislationConsentHandler"]]]);
141
- function defineCustomElement$1() {
142
- if (typeof customElements === "undefined") {
143
- return;
144
- }
145
- const components = ["user-action-controller", "generic-user-consent", "legislation-wrapper"];
146
- components.forEach(tagName => { switch (tagName) {
147
- case "user-action-controller":
148
- if (!customElements.get(tagName)) {
149
- customElements.define(tagName, UserActionController$1);
150
- }
151
- break;
152
- case "generic-user-consent":
153
- if (!customElements.get(tagName)) {
154
- defineCustomElement$3();
155
- }
156
- break;
157
- case "legislation-wrapper":
158
- if (!customElements.get(tagName)) {
159
- defineCustomElement$2();
160
- }
161
- break;
162
- } });
163
- }
164
-
165
- const UserActionController = UserActionController$1;
166
- const defineCustomElement = defineCustomElement$1;
167
-
168
- export { UserActionController, defineCustomElement };
@@ -1,204 +0,0 @@
1
- import { r as registerInstance, c as createEvent, h } from './index-e34db4b0.js';
2
-
3
- const genericUserConsentCss = ":host{display:block}.ConsentTitle{margin-bottom:0.2rem;font-weight:600}.userConsent:hover{border-bottom:1px solid #000;cursor:pointer}.MandatoryItem{color:#f00;font-size:1.2rem}";
4
-
5
- const GenericUserConsent = class {
6
- constructor(hostRef) {
7
- registerInstance(this, hostRef);
8
- this.userLegislationConsent = createEvent(this, "userLegislationConsent", 7);
9
- /**
10
- * 'true' when parent expects component to emit it's current value
11
- */
12
- this.queried = false;
13
- /**
14
- * the type of the consent, used to determine render details
15
- */
16
- this.consentType = '';
17
- /**
18
- * wether or not this consent is mandatory. Used for render details
19
- */
20
- this.mandatory = false;
21
- /**
22
- * the title of the consent to be displayed
23
- */
24
- this.consentTitle = '';
25
- /**
26
- * link to the t&c page
27
- */
28
- this.tcLink = '#';
29
- /**
30
- * link to privacy policy page
31
- */
32
- this.privacyLink = '#';
33
- /**
34
- * the text content to be rendered by the component. Determined at runtime
35
- */
36
- this.textContent = '';
37
- // Maybe switch this out with a localization source
38
- this.stringVariants = {
39
- termsandconditions1: "I accept the ",
40
- termsandconditions2: ", I have read and understood the ",
41
- termsandconditions3: " as published on this site and confirm that I am over 18 years old.",
42
- tc: "Terms and Conditions",
43
- privacy: "Privacy Policy",
44
- sms: "I consent to receive marketing communication via SMS.",
45
- emailmarketing: "I consent to receive marketing communication via Email."
46
- };
47
- }
48
- determineTextContent() {
49
- let result = this.consentType === 'termsandconditions' ?
50
- h("span", null, this.stringVariants['termsandconditions1'], h("a", { href: this.tcLink }, this.stringVariants['tc']), this.stringVariants['termsandconditions2'], h("a", { href: this.privacyLink }, this.stringVariants['privacy']), this.stringVariants['termsandconditions3'])
51
- : h("span", null, this.stringVariants[this.consentType]);
52
- return result;
53
- }
54
- userLegislationConsentHandler() {
55
- this.userLegislationConsent.emit({
56
- type: this.consentType,
57
- value: this.checkboxInput.checked
58
- });
59
- }
60
- render() {
61
- if (this.queried) {
62
- this.userLegislationConsentHandler();
63
- }
64
- this.textContent = this.determineTextContent();
65
- return (h("div", null, h("p", { class: "ConsentTitle" }, this.consentTitle), h("label", { class: "userConsent", htmlFor: "userConsent" }, h("input", { ref: el => this.checkboxInput = el, id: "userConsent", type: "checkbox", onInput: () => this.userLegislationConsentHandler() }), this.textContent, this.mandatory && h("span", { class: "MandatoryItem" }, "*"))));
66
- }
67
- };
68
- GenericUserConsent.style = genericUserConsentCss;
69
-
70
- const legislationWrapperCss = ":host{display:block}";
71
-
72
- const LegislationWrapper = class {
73
- constructor(hostRef) {
74
- registerInstance(this, hostRef);
75
- }
76
- render() {
77
- const activeUAList = this.activeUserActions.replace(/ /g, '').split(',');
78
- return (h("div", { class: "LegislationWrapper" }, activeUAList.map(action => (h("slot", { name: action })))));
79
- }
80
- };
81
- LegislationWrapper.style = legislationWrapperCss;
82
-
83
- const userActionControllerCss = ":host{display:block}.QueryReferenceContainer{height:100%;width:100%}.UserConsentNotice{font-size:1.2rem;font-weight:200;text-align:center}.CloseButton{width:25px;height:25px;align-self:flex-end}.UserActionController{font-family:Arial, Helvetica, sans-serif;font-weight:100;height:100%;width:100%;padding:1rem 1.5rem 2rem;background-color:#fff;display:flex;flex-direction:column;justify-content:space-between;border-radius:5%}.ConsentSubmitButton{font-size:1rem;padding:0.4rem 1.4rem;background:#fff;border:2px solid #000;color:#000;border-radius:5px;align-self:flex-end}.ConsentSubmitButton:disabled{border:2px solid #ccc;color:#ccc}@media screen and (max-width: 320px){.QueryReferenceContainer{font-size:0.8rem;color:blue}}";
84
-
85
- const UserActionController = class {
86
- constructor(hostRef) {
87
- registerInstance(this, hostRef);
88
- this.closeButtonEvent = createEvent(this, "closeButtonClicked", 7);
89
- /**
90
- * Event name to be sent when the button is clicked
91
- */
92
- this.postMessageEvent = 'closeButtonClicked';
93
- this.consentTitles = {
94
- termsandconditions: "Terms and Conditions",
95
- sms: "SMS marketing",
96
- emailmarketing: "Email marketing"
97
- };
98
- /**
99
- * Which actions are required in order to activate the "Apply" button. Other actions are considered optional.
100
- */
101
- this.queryFired = false;
102
- this.readyActionsCount = 0;
103
- this.receivedQueryResponses = 0;
104
- this.mandatoryActions = ['termsandconditions'];
105
- this.requiredActionsCount = 0;
106
- this.expectedQueryResponses = 0;
107
- this.userActions = [];
108
- }
109
- determineMandatoryActions() {
110
- let url = new URL(`${this.endpoint}v1/player/consentRequirements`);
111
- return fetch(url.href)
112
- .then(res => res.json())
113
- .then(data => {
114
- data.items.forEach(action => {
115
- action.mustAccept && this.mandatoryActions.push(action.tagCode);
116
- });
117
- });
118
- }
119
- handleQueryResponse() {
120
- if (this.receivedQueryResponses === this.expectedQueryResponses) {
121
- this.updateUserConsents();
122
- }
123
- }
124
- updateUserConsents() {
125
- const url = new URL(`${this.endpoint}v1/player/${this.userId}/consent`);
126
- let body = {
127
- items: this.userActions
128
- };
129
- let options = {
130
- method: 'POST',
131
- headers: {
132
- 'Content-Type': 'application/json',
133
- 'Accept': 'application/json',
134
- 'X-SessionId': `${this.userSession}`,
135
- },
136
- body: JSON.stringify(body)
137
- };
138
- fetch(url.href, options)
139
- .then(res => res.json())
140
- .then(() => {
141
- /**
142
- * @TODO document this
143
- */
144
- window.postMessage({ type: 'WidgetNotification', data: {
145
- type: 'success',
146
- message: 'Consent update successfull!'
147
- } }, window.location.href);
148
- })
149
- .catch((err) => {
150
- /**
151
- * @TODO document this
152
- */
153
- window.postMessage({ type: 'WidgetNotification', data: {
154
- type: 'error',
155
- message: 'Server might not be responding',
156
- err
157
- } }, window.location.href);
158
- })
159
- .finally(() => {
160
- window.postMessage({ type: "UserActionsCompleted" }, window.location.href);
161
- });
162
- }
163
- handleApplyClick() {
164
- this.queryFired = true;
165
- }
166
- handleClose() {
167
- if (this.usePostmessage) {
168
- window.postMessage({ type: this.postMessageEvent });
169
- }
170
- this.closeButtonEvent.emit();
171
- }
172
- userLegislationConsentHandler(event) {
173
- // Increase / Decrease the amount of mandatory actions taken
174
- if (this.mandatoryActions.includes(event.detail.type)) {
175
- if (event.detail.value)
176
- this.readyActionsCount++;
177
- else
178
- this.readyActionsCount--;
179
- }
180
- // Register final user choices only if we're ready to update
181
- if (this.queryFired) {
182
- this.userActions.push({ tagCode: event.detail.type, status: event.detail.value ? 'Accepted' : 'Denied' });
183
- this.receivedQueryResponses++;
184
- }
185
- }
186
- // Returning a promise here will ensure that the fetch completes before we render the component
187
- componentWillLoad() {
188
- return this.determineMandatoryActions();
189
- }
190
- render() {
191
- const activeUAList = this.activeUserActions.replace(/ /g, '').split(',');
192
- this.requiredActionsCount = activeUAList.filter(action => this.mandatoryActions.includes(action)).length;
193
- this.expectedQueryResponses = activeUAList.length;
194
- return (h("div", { class: "QueryReferenceContainer" }, h("div", { class: "UserActionController" }, this.showCloseButton &&
195
- h("div", { class: "CloseButton", onClick: () => this.handleClose() }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "25", height: "25", fill: "currentColor", viewBox: "0 0 16 16" }, h("path", { d: "M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" }))), h("h2", { class: "UserConsentNotice" }, this.userNoticeText), h("legislation-wrapper", { "active-user-actions": this.activeUserActions }, activeUAList.map(item => (h("generic-user-consent", { slot: item, consentType: item, consentTitle: this.consentTitles[item], queried: this.queryFired, mandatory: this.mandatoryActions.includes(item) })))), this.includeSubmitButton &&
196
- h("button", { class: "ConsentSubmitButton", disabled: this.readyActionsCount === this.requiredActionsCount ? false : true, onClick: () => this.handleApplyClick() }, this.submitButtonText))));
197
- }
198
- static get watchers() { return {
199
- "receivedQueryResponses": ["handleQueryResponse"]
200
- }; }
201
- };
202
- UserActionController.style = userActionControllerCss;
203
-
204
- export { GenericUserConsent as generic_user_consent, LegislationWrapper as legislation_wrapper, UserActionController as user_action_controller };