@everymatrix/pam-consent-modal 0.1.0

package/dist/cjs/pam-consent-modal-bc9246fa.js

@@ -0,0 +1,401 @@
+'use strict';
+
+const index = require('./index-9dbdce4a.js');
+
+/**
+ * @name setClientStyling
+ * @description Method used to create and append to the passed element of the widget a style element with the content received
+ * @param {HTMLElement} stylingContainer The reference element of the widget
+ * @param {string} clientStyling The style content
+ */
+function setClientStyling(stylingContainer, clientStyling) {
+  if (stylingContainer) {
+    const sheet = document.createElement('style');
+    sheet.innerHTML = clientStyling;
+    stylingContainer.appendChild(sheet);
+  }
+}
+
+/**
+ * @name setClientStylingURL
+ * @description Method used to create and append to the passed element of the widget a style element with the content fetched from a given URL
+ * @param {HTMLElement} stylingContainer The reference element of the widget
+ * @param {string} clientStylingUrl The URL of the style content
+ */
+function setClientStylingURL(stylingContainer, clientStylingUrl) {
+  const url = new URL(clientStylingUrl);
+
+  fetch(url.href)
+    .then((res) => res.text())
+    .then((data) => {
+      const cssFile = document.createElement('style');
+      cssFile.innerHTML = data;
+      if (stylingContainer) {
+        stylingContainer.appendChild(cssFile);
+      }
+    })
+    .catch((err) => {
+      console.error('There was an error while trying to load client styling from URL', err);
+    });
+}
+
+/**
+ * @name setStreamLibrary
+ * @description Method used to create and append to the passed element of the widget a style element with content fetched from the MessageBus
+ * @param {HTMLElement} stylingContainer The highest element of the widget
+ * @param {string} domain The domain from where the content should be fetched (e.g. 'Casino.Style', 'App.Style', 'casino-footer.style', etc.)
+ * @param {ref} subscription A reference to a variable where the subscription should be saved for unsubscribing when no longer needed
+ */
+function setStreamStyling(stylingContainer, domain, subscription) {
+  if (window.emMessageBus) {
+    const sheet = document.createElement('style');
+
+    window.emMessageBus.subscribe(domain, (data) => {
+      sheet.innerHTML = data;
+      if (stylingContainer) {
+        stylingContainer.appendChild(sheet);
+      }
+    });
+  }
+}
+
+/**
+ * @name dispatchCustomEvent
+ * @description dispatches the custom event CustomEventProcessor is listening for
+ * @param {string} type of the custom event
+ * @param {Object} data may contain additional information about the event, e.g. userId
+ */
+const dispatchCustomEvent = (type, data = {}) => {
+    const event = new CustomEvent('track-custom-event', {
+        detail: {
+            type,
+            data
+        },
+        bubbles: true,
+        composed: true
+    });  
+      
+    document.dispatchEvent(event);
+};
+
+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.'
+    }
+};
+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);
+        });
+    });
+};
+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;
+};
+
+const pamConsentModalCss = ":host{display:block}.QueryReferenceContainer{height:100%;width:100%}.ConsentNotice{font-size:1.2rem;font-weight:200;text-align:center}.CloseButton{width:25px;height:25px;align-self:flex-end}.PamConsentModal{font-family:inherit;font-weight:100;height:100%;padding:1rem 1.5rem 2rem;background-color:var(--emw--color-white, #FFFFFF);display:flex;flex-direction:column;justify-content:space-between;border-radius:var(--emw--border-radius-large, 20px);max-width:fit-content}.ConsentSubmitButton,.ConsentRejectButton{font-size:1rem;font-family:var(--emw--button-typography);padding:0.4rem 1.4rem;background:var(--emw--button-background-color, #FFFFFF);border:var(--emw--button-border, 2px solid #000000);color:var(--emw--button-text-color, #000000);border-radius:var(--emw--button-border-radius, 10px);align-self:flex-end;cursor:pointer}.ConsentSubmitButton:disabled,.ConsentRejectButton:disabled{border:2px solid #ccc;color:#ccc;cursor:unset}.ButtonsWrapper{display:flex;flex-direction:row;justify-content:space-between;margin-top:10px}.ButtonsWrapper button:only-child{margin-left:auto}@media screen and (max-width: 320px){.QueryReferenceContainer{font-size:0.8rem;color:var(--emw--button-text-color, #000000)}}.spinner{animation:rotate 2s linear infinite;z-index:2;position:absolute;top:50%;left:50%;margin:-25px 0 0 -25px;width:50px;height:50px}.spinner .path{stroke:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));stroke-linecap:round;animation:dash 1.5s ease-in-out infinite}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1, 150;stroke-dashoffset:0}50%{stroke-dasharray:90, 150;stroke-dashoffset:-35}100%{stroke-dasharray:90, 150;stroke-dashoffset:-124}}";
+const PamConsentModalStyle0 = pamConsentModalCss;
+
+const PamConsentModal = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /** 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`);
+        }
+    }
+    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`);
+            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 (index.h("div", { class: "QueryReferenceContainer", ref: el => this.stylingContainer = el }, this.isLoading ? (index.h("div", null, index.h("slot", { name: 'spinner' }), index.h("svg", { class: "spinner", viewBox: "0 0 50 50" }, index.h("circle", { class: "path", cx: "25", cy: "25", r: "20", fill: "none", "stroke-width": "5" })))) : (index.h("div", { class: "PamConsentModal" }, index.h("h2", { class: "ConsentNotice" }, translate('userNoticeText', this.language)), index.h("div", { class: "ConsentsWrapper" }, this.consentConfig.map(consent => (index.h("slot", { name: consent.group || consent.consentTypes }, index.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 }))))), index.h("div", { class: "ButtonsWrapper" }, this.includeRejectButton &&
+            index.h("button", { class: "ConsentRejectButton", onClick: this.handleReject }, translate('rejectButtonText', this.language)), this.includeSubmitButton &&
+            index.h("button", { class: "ConsentSubmitButton", disabled: !this.isValid, onClick: this.handleApplyClick }, translate('submitButtonText', this.language))), this.includeRejectText && index.h("p", { class: "RejectText" }, translate('rejectText', this.language))))));
+    }
+    static get watchers() { return {
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingUrlChange"],
+        "mbSource": ["handleMbSourceChange"],
+        "receivedQueryResponses": ["handleQueryResponse"]
+    }; }
+};
+PamConsentModal.style = PamConsentModalStyle0;
+
+exports.PamConsentModal = PamConsentModal;
+exports.setClientStyling = setClientStyling;
+exports.setClientStylingURL = setClientStylingURL;
+exports.setStreamStyling = setStreamStyling;

package/dist/cjs/pam-consent-modal.cjs.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-9dbdce4a.js');
+const appGlobals = require('./app-globals-3a1e7e63.js');
+
+/*
+ Stencil Client Patch Browser v4.19.2 | MIT Licensed | https://stenciljs.com
+ */
+var patchBrowser = () => {
+  const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('pam-consent-modal.cjs.js', document.baseURI).href));
+  const opts = {};
+  if (importMeta !== "") {
+    opts.resourcesUrl = new URL(".", importMeta).href;
+  }
+  return index.promiseResolve(opts);
+};
+
+patchBrowser().then(async (options) => {
+  await appGlobals.globalScripts();
+  return index.bootstrapLazy([["pam-consent-item_2.cjs",[[1,"pam-consent-modal",{"endpoint":[513],"session":[513],"userId":[513,"user-id"],"language":[1537],"includeSubmitButton":[516,"include-submit-button"],"includeRejectButton":[516,"include-reject-button"],"includeRejectText":[516,"include-reject-text"],"translationUrl":[513,"translation-url"],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"mbSource":[513,"mb-source"],"isLoading":[32],"isValid":[32],"isQueryFired":[32],"receivedQueryResponses":[32],"mandatoryConsentsChecked":[32],"mandatoryConsentsCount":[32],"userConsentTagCodes":[32]},[[0,"userLegislationConsent","userLegislationConsentHandler"]],{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"],"receivedQueryResponses":["handleQueryResponse"]}],[1,"pam-consent-item",{"language":[1537],"queried":[516],"group":[513],"consentTypes":[513,"consent-types"],"mandatory":[513],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"mbSource":[513,"mb-source"]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}]]]], options);
+});
+
+exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,19 @@
+{
+  "entries": [
+    "components/pam-consent-modal/pam-consent-modal.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.19.2",
+    "typescriptVersion": "5.4.5"
+  },
+  "collections": [
+    {
+      "name": "@everymatrix/pam-consent-item",
+      "tags": [
+        "pam-consent-item"
+      ]
+    }
+  ],
+  "bundles": []
+}

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

@@ -0,0 +1 @@
+export { PamConsentModal } from './pam-consent-modal';

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

@@ -0,0 +1,102 @@
+:host {
+  display: block;
+}
+
+.QueryReferenceContainer {
+  height: 100%;
+  width: 100%;
+}
+
+.ConsentNotice {
+  font-size: 1.2rem;
+  font-weight: 200;
+  text-align: center;
+}
+
+.CloseButton {
+  width: 25px;
+  height: 25px;
+  align-self: flex-end;
+}
+
+.PamConsentModal {
+  font-family: inherit;
+  font-weight: 100;
+  height: 100%;
+  padding: 1rem 1.5rem 2rem;
+  background-color: var(--emw--color-white, #FFFFFF);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  border-radius: var(--emw--border-radius-large, 20px);
+  max-width: fit-content;
+}
+
+.ConsentSubmitButton, .ConsentRejectButton {
+  font-size: 1rem;
+  font-family: var(--emw--button-typography);
+  padding: 0.4rem 1.4rem;
+  background: var(--emw--button-background-color, #FFFFFF);
+  border: var(--emw--button-border, 2px solid #000000);
+  color: var(--emw--button-text-color, #000000);
+  border-radius: var(--emw--button-border-radius, 10px);
+  align-self: flex-end;
+  cursor: pointer;
+}
+.ConsentSubmitButton:disabled, .ConsentRejectButton:disabled {
+  border: 2px solid #ccc;
+  color: #ccc;
+  cursor: unset;
+}
+
+.ButtonsWrapper {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-top: 10px;
+}
+.ButtonsWrapper button:only-child {
+  margin-left: auto;
+}
+
+@media screen and (max-width: 320px) {
+  .QueryReferenceContainer {
+    font-size: 0.8rem;
+    color: var(--emw--button-text-color, #000000);
+  }
+}
+.spinner {
+  animation: rotate 2s linear infinite;
+  z-index: 2;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin: -25px 0 0 -25px;
+  width: 50px;
+  height: 50px;
+}
+.spinner .path {
+  stroke: var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));
+  stroke-linecap: round;
+  animation: dash 1.5s ease-in-out infinite;
+}
+
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes dash {
+  0% {
+    stroke-dasharray: 1, 150;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -124;
+  }
+}