@everymatrix/pam-consent-modal 0.1.0

package/dist/collection/components/pam-consent-modal/pam-consent-modal.js

@@ -0,0 +1,454 @@
+import { h } from "@stencil/core";
+import { setClientStyling, setClientStylingURL, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
+import { dispatchCustomEvent } from "../../../../../../../../libs/custom-events/src/index";
+import { getTranslations, translate } from "../../utils/locale.utils";
+import "../../../../../pam-consent-item/dist/types/index";
+export class PamConsentModal {
+    constructor() {
+        /** This obj is passed to the api on consent update */
+        this.userConsents = [];
+        /** Constant. All possible mandatory consent tag codes */
+        this.mandatoryConsentTagCodes = ['termsandconditions', 'privacypolicy'];
+        /** Categories that are allowed to form groups */
+        this.allowedCategoryGroups = ['Sports', 'Casino', 'VirtualSports'];
+        /** Used to render consents */
+        this.consentConfig = [];
+        this.handleApplyClick = () => {
+            this.isQueryFired = true;
+        };
+        this.handleReject = () => {
+            const url = new URL('v1/player/session/player/', this.endpoint);
+            const headers = new Headers();
+            headers.append('Content-type', 'application/json');
+            headers.append('X-SessionID', this.session);
+            const options = {
+                method: 'DELETE',
+                headers: headers
+            };
+            fetch(url.href, options)
+                .then(() => {
+                window.postMessage({ type: 'LogoutSuccessfull' }, window.location.href);
+                dispatchCustomEvent('logged_out', {});
+            });
+        };
+        this.endpoint = undefined;
+        this.session = undefined;
+        this.userId = undefined;
+        this.language = 'en';
+        this.includeSubmitButton = undefined;
+        this.includeRejectButton = undefined;
+        this.includeRejectText = undefined;
+        this.translationUrl = '';
+        this.clientStyling = '';
+        this.clientStylingUrl = '';
+        this.mbSource = undefined;
+        this.isLoading = true;
+        this.isValid = true;
+        this.isQueryFired = false;
+        this.receivedQueryResponses = 0;
+        this.mandatoryConsentsChecked = 0;
+        this.mandatoryConsentsCount = 0;
+        this.userConsentTagCodes = [];
+    }
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
+    handleClientStylingUrlChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    handleMbSourceChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
+        }
+    }
+    handleQueryResponse() {
+        if (this.receivedQueryResponses === this.consentConfig.length) {
+            this.updateConsents();
+        }
+    }
+    userLegislationConsentHandler(event) {
+        for (const consent of event.detail) {
+            if (this.mandatoryConsentTagCodes.includes(consent.type) && this.isQueryFired === false) {
+                consent.value === true ? this.mandatoryConsentsChecked++ : this.mandatoryConsentsChecked--;
+            }
+            // Register final user choices only if we're ready to update
+            if (this.isQueryFired) {
+                this.userConsents.push({
+                    tagCode: consent.type,
+                    status: Number(consent.value),
+                    note: ''
+                });
+                this.receivedQueryResponses++;
+            }
+        }
+    }
+    async componentWillLoad() {
+        this.getConsents().then(consents => this.setConsentConfig(consents));
+        if (this.translationUrl.length > 2) {
+            await getTranslations(this.translationUrl);
+        }
+    }
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (this.mbSource)
+                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
+            if (this.clientStyling)
+                setClientStyling(this.stylingContainer, this.clientStyling);
+            if (this.clientStylingUrl)
+                setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    disconnectedCallback() {
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+    }
+    getConsents() {
+        const url = new URL(`/v1/player/${this.userId}/legislation/consents/`, this.endpoint);
+        const headers = new Headers({ 'X-SessionId': this.session });
+        const options = { method: 'GET', headers };
+        return fetch(url.href, options)
+            .then(res => {
+            if (res.status === 200) {
+                return res.json();
+            }
+            throw new Error(String(res.status));
+        })
+            .then((data) => {
+            return data.consents;
+        })
+            .catch(error => {
+            console.error('Error fetching data:', error);
+            return null;
+        })
+            .finally(() => {
+            window.postMessage({
+                type: 'UserActionsExists',
+                displayUserActions: this.mandatoryConsentsCount > 0
+            }, window.location.href);
+            this.isLoading = false;
+        });
+    }
+    setConsentConfig(consents) {
+        for (const consent of consents) {
+            if (consent.status !== 2 || consent.tagCode === 'pepconsent') {
+                return;
+            }
+            const mandatory = this.mandatoryConsentTagCodes.includes(consent.tagCode);
+            if (mandatory) {
+                ++this.mandatoryConsentsCount;
+            }
+            if (this.allowedCategoryGroups.includes(consent.category)) {
+                const target = this.consentConfig.find(c => c.group === consent.category.toLowerCase());
+                if (target) {
+                    target.consentTypes += (',' + consent.tagCode);
+                    target.mandatory += (',' + String(mandatory));
+                }
+                else {
+                    this.consentConfig.push({
+                        consentTypes: consent.tagCode,
+                        group: consent.category.toLowerCase(),
+                        mandatory: String(mandatory)
+                    });
+                }
+            }
+            else {
+                this.consentConfig.push({
+                    consentTypes: consent.tagCode,
+                    group: '',
+                    mandatory: String(mandatory)
+                });
+            }
+        }
+    }
+    updateConsents() {
+        const url = new URL(`/v1/player/${this.userId}/legislation/consents/`, this.endpoint);
+        const headers = new Headers();
+        headers.append('Content-Type', 'application/json');
+        headers.append('Accept', 'application/json');
+        headers.append('X-SessionId', this.session);
+        const body = JSON.stringify({ consents: this.userConsents });
+        const options = {
+            method: 'POST',
+            headers,
+            body
+        };
+        fetch(url.href, options)
+            .then(res => res.json())
+            .then(() => {
+            window.postMessage({
+                type: 'WidgetNotification',
+                data: {
+                    type: 'success',
+                    message: 'Consent update successful!'
+                }
+            }, window.location.href);
+        })
+            .catch((err) => {
+            window.postMessage({
+                type: 'WidgetNotification',
+                data: {
+                    type: 'error',
+                    message: 'Server might not be responding',
+                    err
+                }
+            }, window.location.href);
+        })
+            .finally(() => {
+            window.postMessage({ type: 'UserActionsCompleted' }, window.location.href);
+        });
+    }
+    render() {
+        if (this.mandatoryConsentsCount === 0) {
+            return;
+        }
+        this.isValid = this.mandatoryConsentsChecked === this.mandatoryConsentsCount;
+        return (h("div", { class: "QueryReferenceContainer", ref: el => this.stylingContainer = el }, this.isLoading ? (h("div", null, h("slot", { name: 'spinner' }), h("svg", { class: "spinner", viewBox: "0 0 50 50" }, h("circle", { class: "path", cx: "25", cy: "25", r: "20", fill: "none", "stroke-width": "5" })))) : (h("div", { class: "PamConsentModal" }, h("h2", { class: "ConsentNotice" }, translate('userNoticeText', this.language)), h("div", { class: "ConsentsWrapper" }, this.consentConfig.map(consent => (h("slot", { name: consent.group || consent.consentTypes }, h("pam-consent-item", { language: this.language, "translation-url": this.translationUrl, group: consent.group, consentTypes: consent.consentTypes, queried: this.isQueryFired, mandatory: consent.mandatory, "client-styling-url": this.clientStylingUrl, "mb-source": this.mbSource, "client-styling": this.clientStyling }))))), h("div", { class: "ButtonsWrapper" }, this.includeRejectButton &&
+            h("button", { class: "ConsentRejectButton", onClick: this.handleReject }, translate('rejectButtonText', this.language)), this.includeSubmitButton &&
+            h("button", { class: "ConsentSubmitButton", disabled: !this.isValid, onClick: this.handleApplyClick }, translate('submitButtonText', this.language))), this.includeRejectText && h("p", { class: "RejectText" }, translate('rejectText', this.language))))));
+    }
+    static get is() { return "pam-consent-modal"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pam-consent-modal.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pam-consent-modal.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "endpoint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "the endpoint required for the update call"
+                },
+                "attribute": "endpoint",
+                "reflect": true
+            },
+            "session": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "user session required for the update call"
+                },
+                "attribute": "session",
+                "reflect": true
+            },
+            "userId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "user id required for the update call"
+                },
+                "attribute": "user-id",
+                "reflect": true
+            },
+            "language": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "language"
+                },
+                "attribute": "language",
+                "reflect": true,
+                "defaultValue": "'en'"
+            },
+            "includeSubmitButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "whether or not to include the submit button (in case we want to compose a different )"
+                },
+                "attribute": "include-submit-button",
+                "reflect": true
+            },
+            "includeRejectButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "whether or not to include the reject button"
+                },
+                "attribute": "include-reject-button",
+                "reflect": true
+            },
+            "includeRejectText": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "whether or not to include the reject desctiption text"
+                },
+                "attribute": "include-reject-text",
+                "reflect": true
+            },
+            "translationUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Translation url"
+                },
+                "attribute": "translation-url",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "clientStyling": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via inline style"
+                },
+                "attribute": "client-styling",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "clientStylingUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via url"
+                },
+                "attribute": "client-styling-url",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "mbSource": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "mbSource"
+                },
+                "attribute": "mb-source",
+                "reflect": true
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isLoading": {},
+            "isValid": {},
+            "isQueryFired": {},
+            "receivedQueryResponses": {},
+            "mandatoryConsentsChecked": {},
+            "mandatoryConsentsCount": {},
+            "userConsentTagCodes": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "clientStyling",
+                "methodName": "handleClientStylingChange"
+            }, {
+                "propName": "clientStylingUrl",
+                "methodName": "handleClientStylingUrlChange"
+            }, {
+                "propName": "mbSource",
+                "methodName": "handleMbSourceChange"
+            }, {
+                "propName": "receivedQueryResponses",
+                "methodName": "handleQueryResponse"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "userLegislationConsent",
+                "method": "userLegislationConsentHandler",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/index.js

@@ -0,0 +1 @@
+export * from './components/pam-consent-modal';

package/dist/collection/utils/locale.utils.js

@@ -0,0 +1,97 @@
+const DEFAULT_LANGUAGE = 'en';
+const TRANSLATIONS = {
+    en: {
+        userNoticeText: 'Before you can proceed you must consent to the following',
+        submitButtonText: 'Submit',
+        rejectButtonText: 'Reject',
+        rejectText: 'Rejecting new consents will result in the inability to continue the login process and you will be logged out.'
+    },
+    'en-us': {
+        userNoticeText: 'Before you can proceed you must consent to the following',
+        submitButtonText: 'Submit',
+        rejectButtonText: 'Reject',
+        rejectText: 'Rejecting new consents will result in the inability to continue the login process and you will be logged out.'
+    },
+    ro: {
+        userNoticeText: 'Înainte de a continua, trebuie să vă dați consimțământul pentru următoarele',
+        submitButtonText: 'Trimite',
+        rejectButtonText: 'Respinge',
+        rejectText: 'Respingerea noilor consimțăminte va duce la imposibilitatea de a continua procesul de autentificare și veți fi deconectat.'
+    },
+    hr: {
+        userNoticeText: 'Prije nego što možete nastaviti, morate pristati na sljedeće',
+        submitButtonText: 'Pošalji',
+        rejectButtonText: 'Odbij',
+        rejectText: 'Odbijanje novih pristanka rezultirat će nemogućnošću nastavka procesa prijave i bit ćete odjavljeni.'
+    },
+    fr: {
+        userNoticeText: 'Avant de continuer, vous devez consentir aux éléments suivants',
+        submitButtonText: 'Soumettre',
+        rejectButtonText: 'Rejeter',
+        rejectText: 'Le rejet des nouveaux consentements entraînera l\'impossibilité de continuer le processus de connexion et vous serez déconnecté.'
+    },
+    cs: {
+        userNoticeText: 'Než budete moci pokračovat, musíte souhlasit s následujícím',
+        submitButtonText: 'Odeslat',
+        rejectButtonText: 'Odmítnout',
+        rejectText: 'Odmítnutí nových souhlasů povede k nemožnosti pokračovat v procesu přihlášení a budete odhlášeni.'
+    },
+    de: {
+        userNoticeText: 'Bevor Sie fortfahren können, müssen Sie den folgenden Punkten zustimmen',
+        submitButtonText: 'Absenden',
+        rejectButtonText: 'Ablehnen',
+        rejectText: 'Das Ablehnen neuer Zustimmungen führt dazu, dass der Anmeldevorgang nicht fortgesetzt werden kann und Sie abgemeldet werden.'
+    },
+    es: {
+        userNoticeText: 'Antes de continuar, debe dar su consentimiento a lo siguiente',
+        submitButtonText: 'Enviar',
+        rejectButtonText: 'Rechazar',
+        rejectText: 'Rechazar nuevos consentimientos resultará en la imposibilidad de continuar el proceso de inicio de sesión y se cerrará la sesión.'
+    },
+    pt: {
+        userNoticeText: 'Antes de continuar, você deve consentir com o seguinte',
+        submitButtonText: 'Enviar',
+        rejectButtonText: 'Rejeitar',
+        rejectText: 'Rejeitar novos consentimentos resultará na impossibilidade de continuar o processo de login e você será desconectado.'
+    },
+    'es-mx': {
+        userNoticeText: 'Antes de continuar, debe dar su consentimiento a lo siguiente',
+        submitButtonText: 'Enviar',
+        rejectButtonText: 'Rechazar',
+        rejectText: 'Rechazar nuevos consentimientos resultará en la imposibilidad de continuar el proceso de inicio de sesión y se cerrará la sesión.'
+    },
+    'pt-br': {
+        userNoticeText: 'Antes de continuar, você deve consentir com o seguinte',
+        submitButtonText: 'Enviar',
+        rejectButtonText: 'Rejeitar',
+        rejectText: 'Rejeitar novos consentimentos resultará na impossibilidade de continuar o processo de login e você será desconectado.'
+    }
+};
+export const getTranslations = (url) => {
+    return new Promise((resolve) => {
+        fetch(url)
+            .then((res) => res.json())
+            .then((data) => {
+            Object.keys(data).forEach((lang) => {
+                if (!TRANSLATIONS[lang]) {
+                    TRANSLATIONS[lang] = {};
+                }
+                for (let key in data[lang]) {
+                    TRANSLATIONS[lang][key] = data[lang][key];
+                }
+            });
+            resolve(true);
+        });
+    });
+};
+export const translate = (key, customLang, values) => {
+    const lang = customLang;
+    let translation = TRANSLATIONS[(lang !== undefined) && (lang in TRANSLATIONS) ? lang : DEFAULT_LANGUAGE][key];
+    if (values !== undefined) {
+        for (const [key, value] of Object.entries(values.values)) {
+            const regex = new RegExp(`{${key}}`, 'g');
+            translation = translation.replace(regex, value);
+        }
+    }
+    return translation;
+};

package/dist/collection/utils/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/app-globals-0f993ce5.js

@@ -0,0 +1,3 @@
+const globalScripts = () => {};
+
+export { globalScripts as g };