@everymatrix/temporary-consents 1.12.1

package/dist/components/temporary-consents.js

@@ -0,0 +1,204 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['en'];
+let TRANSLATIONS = {
+  en: {
+    title: 'Participation conditions',
+    description: 'Important: Full verification is required in order to be able to use our entire offer. If verification is not completed, it is not possible to withdraw and the betting account will be locked in {daysUntilLockout} days.',
+    declineButton: 'Decline and log out',
+    acceptButton: 'Accept',
+    loading: 'Please wait, loading...'
+  }
+};
+const getTranslations = (url) => {
+  return new Promise((resolve) => {
+    fetch(url)
+      .then((res) => res.json())
+      .then((data) => {
+      Object.keys(data).forEach((item) => {
+        for (let key in data[item]) {
+          TRANSLATIONS[item][key] = data[item][key];
+        }
+      });
+      resolve(true);
+    });
+  });
+};
+const translate = (key, customLang, values) => {
+  const lang = customLang;
+  let translation = TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? 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 temporaryConsentsCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0}:host{display:block}.TemporaryConsents{max-width:500px;display:flex;gap:35px;flex-direction:column;box-shadow:0px 1px 5px 1px rgba(0, 0, 0, 0.1);padding:20px;font-family:sans-serif}.TemporaryConsentsTitle{text-align:left;font-family:inherit;color:#000;font-weight:400;font-size:18px;display:block;border-bottom:1px solid #000;padding-bottom:10px}.TemporaryConsentsText{font-family:inherit;font-weight:300;font-size:16px}.TemporaryConsentsButtonsWrapper{display:flex;justify-content:space-evenly;gap:50px}.TemporaryConsentsButton{font-family:inherit;font-weight:300;font-size:14px;border:none;padding:10px;min-width:150px;border-radius:4px}.TemporaryConsentsButtonDecline{background-color:transparent;border:1px solid #000}.TemporaryConsentsButtonAccept{color:white;background-color:#000}";
+
+const TemporaryConsents$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+    * Client custom styling via inline styles
+    */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url
+     */
+    this.clientStylingUrl = '';
+    /**
+     * Translation via url
+     */
+    this.translationUrl = '';
+    this.stylingAppends = false;
+    this.isLoading = false;
+    this.setClientStyling = () => {
+      let sheet = document.createElement('style');
+      sheet.innerHTML = this.clientStyling;
+      this.stylingContainer.prepend(sheet);
+    };
+    this.setClientStylingURL = () => {
+      let url = new URL(this.clientStylingUrl);
+      let cssFile = document.createElement('style');
+      fetch(url.href)
+        .then((res) => res.text())
+        .then((data) => {
+        cssFile.innerHTML = data;
+        setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
+      })
+        .catch((err) => {
+        console.log('error ', err);
+      });
+    };
+  }
+  componentWillLoad() {
+    const promises = [];
+    if (this.endpoint && this.userId) {
+      const consentsPromise = this.getConsents().then((consents) => {
+        this.temporaryAccountConsent = consents.consents.some((consent) => consent.tagCode == 'temporaryaccountconsent');
+      });
+      promises.push(consentsPromise);
+    }
+    if (this.translationUrl) {
+      const translationPromise = getTranslations(this.translationUrl);
+      promises.push(translationPromise);
+    }
+    return Promise.all(promises);
+  }
+  componentDidRender() {
+    // start custom styling area
+    if (!this.stylingAppends && this.stylingContainer) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      if (this.clientStylingUrl)
+        this.setClientStylingURL();
+      this.stylingAppends = true;
+    }
+    // end custom styling area
+  }
+  getConsents() {
+    const url = new URL(`${this.endpoint}/v1/player/${this.userId}/legislation/consents`);
+    const headers = new Headers();
+    headers.append('X-SessionId', this.sessionId);
+    headers.append('Accept', 'application/json');
+    const options = {
+      method: 'GET',
+      headers
+    };
+    return new Promise((resolve, reject) => {
+      this.isLoading = true;
+      fetch(url.href, options)
+        .then((res) => res.json())
+        .then((consents) => {
+        resolve(consents);
+      }).catch((err) => {
+        console.error(err);
+        reject(err);
+      }).finally(() => {
+        this.isLoading = false;
+      });
+    });
+  }
+  setConsents() {
+    const url = new URL(`${this.endpoint}/v1/player/${this.userId}/legislation/consents`);
+    const headers = new Headers();
+    headers.append('X-SessionId', this.sessionId);
+    headers.append('Accept', 'application/json');
+    headers.append('Content-Type', 'application/json');
+    const body = {
+      consents: [{
+          tagCode: 'temporaryaccountconsent',
+          note: '',
+          status: 1
+        }]
+    };
+    const options = {
+      method: 'POST',
+      headers,
+      body: JSON.stringify(body)
+    };
+    return new Promise((resolve, reject) => {
+      this.isLoading = true;
+      fetch(url.href, options)
+        .then((res) => res.json())
+        .then((res) => {
+        resolve(res);
+      }).catch((err) => {
+        console.error(err);
+        reject(err);
+      }).finally(() => {
+        this.isLoading = false;
+      });
+    });
+  }
+  handleDecline() {
+    window.postMessage({ type: 'TemporaryConsentsDeclined' }, window.location.href);
+  }
+  handleAccept() {
+    this.setConsents();
+    window.postMessage({ type: 'TemporaryConsentsAccepted' }, window.location.href);
+  }
+  render() {
+    if (this.temporaryAccountConsent) {
+      if (this.isLoading) {
+        return h("p", null, translate('loading', this.lang));
+      }
+      return h("div", { class: 'TemporaryConsents', ref: el => this.stylingContainer = el }, h("h2", { class: 'TemporaryConsentsTitle' }, " ", translate('title', this.lang), " "), h("p", { class: 'TemporaryConsentsText' }, " ", translate('description', this.lang, { values: { daysUntilLockout: this.daysUntilLockout } }), " "), h("div", { class: 'TemporaryConsentsButtonsWrapper' }, h("button", { class: 'TemporaryConsentsButton TemporaryConsentsButtonDecline', onClick: () => this.handleDecline() }, translate('declineButton', this.lang)), h("button", { class: 'TemporaryConsentsButton TemporaryConsentsButtonAccept', onClick: this.handleAccept }, translate('acceptButton', this.lang))));
+    }
+  }
+  static get style() { return temporaryConsentsCss; }
+}, [1, "temporary-consents", {
+    "endpoint": [513],
+    "userId": [513, "user-id"],
+    "sessionId": [513, "session-id"],
+    "daysUntilLockout": [513, "days-until-lockout"],
+    "lang": [513],
+    "clientStyling": [513, "client-styling"],
+    "clientStylingUrl": [513, "client-styling-url"],
+    "translationUrl": [513, "translation-url"],
+    "stylingAppends": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["temporary-consents"];
+  components.forEach(tagName => { switch (tagName) {
+    case "temporary-consents":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TemporaryConsents$1);
+      }
+      break;
+  } });
+}
+
+const TemporaryConsents = TemporaryConsents$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TemporaryConsents, defineCustomElement };