@everymatrix/player-user-consents 1.31.2 → 1.33.0

package/dist/cjs/{index-28f85617.js → index-e77a2edf.js}

@@ -591,6 +591,11 @@ const dispatchHooks = (hostRef, isInitialLoad) => {
     const endSchedule = createTime('scheduleUpdate', hostRef.$cmpMeta$.$tagName$);
     const instance = hostRef.$lazyInstance$ ;
     let promise;
+    if (isInitialLoad) {
+        {
+            promise = safeCall(instance, 'componentWillLoad');
+        }
+    }
     endSchedule();
     return then(promise, () => updateComponent(hostRef, instance, isInitialLoad));
 };
@@ -767,6 +772,7 @@ const getValue = (ref, propName) => getHostRef(ref).$instanceValues$.get(propNam
 const setValue = (ref, propName, newVal, cmpMeta) => {
     // check our new property value against our internal value
     const hostRef = getHostRef(ref);
+    const elm = hostRef.$hostElement$ ;
     const oldVal = hostRef.$instanceValues$.get(propName);
     const flags = hostRef.$flags$;
     const instance = hostRef.$lazyInstance$ ;
@@ -779,6 +785,22 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
         // set our new value!
         hostRef.$instanceValues$.set(propName, newVal);
         if (instance) {
+            // get an array of method names of watch functions to call
+            if (cmpMeta.$watchers$ && flags & 128 /* isWatchReady */) {
+                const watchMethods = cmpMeta.$watchers$[propName];
+                if (watchMethods) {
+                    // this instance is watching for when this property changed
+                    watchMethods.map((watchMethodName) => {
+                        try {
+                            // fire off each of the watch methods that are watching this property
+                            instance[watchMethodName](newVal, oldVal, propName);
+                        }
+                        catch (e) {
+                            consoleError(e, elm);
+                        }
+                    });
+                }
+            }
             if ((flags & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
                 // looks like this value actually changed, so we've got work to do!
                 // but only if we've already rendered, otherwise just chill out
@@ -791,6 +813,9 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
 };
 const proxyComponent = (Cstr, cmpMeta, flags) => {
     if (cmpMeta.$members$) {
+        if (Cstr.watchers) {
+            cmpMeta.$watchers$ = Cstr.watchers;
+        }
         // It's better to have a const than two Object.entries()
         const members = Object.entries(cmpMeta.$members$);
         const prototype = Cstr.prototype;
@@ -898,6 +923,12 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
                 endLoad();
             }
             if (!Cstr.isProxied) {
+                // we've never proxied this Constructor before
+                // let's add the getters/setters to its prototype before
+                // the first time we create an instance of the implementation
+                {
+                    cmpMeta.$watchers$ = Cstr.watchers;
+                }
                 proxyComponent(Cstr, cmpMeta, 2 /* proxyState */);
                 Cstr.isProxied = true;
             }
@@ -921,6 +952,9 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
             {
                 hostRef.$flags$ &= ~8 /* isConstructingInstance */;
             }
+            {
+                hostRef.$flags$ |= 128 /* isWatchReady */;
+            }
             endNewInstance();
         }
         if (Cstr.style) {
@@ -1023,6 +1057,9 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
             {
                 cmpMeta.$attrsToReflect$ = [];
             }
+            {
+                cmpMeta.$watchers$ = {};
+            }
             const tagName = cmpMeta.$tagName$;
             const HostElement = class extends HTMLElement {
                 // StencilLazyHost

package/dist/cjs/loader.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-28f85617.js');
+const index = require('./index-e77a2edf.js');
 
 /*
  Stencil Client Patch Esm v2.15.2 | MIT Licensed | https://stenciljs.com
@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["player-user-consents.cjs",[[1,"player-user-consents",{"queried":[516],"consentType":[513,"consent-type"],"mandatory":[516],"consentTitle":[513,"consent-title"],"tcLink":[513,"tc-link"],"privacyLink":[513,"privacy-link"],"clientStyling":[1,"client-styling"],"textContent":[32],"limitStylingAppends":[32]}]]]], options);
+  return index.bootstrapLazy([["player-user-consents.cjs",[[1,"player-user-consents",{"lang":[1537],"queried":[516],"consentType":[513,"consent-type"],"mandatory":[516],"consentTitle":[513,"consent-title"],"clientStyling":[1,"client-styling"],"translationUrl":[513,"translation-url"],"textContent":[32],"limitStylingAppends":[32]}]]]], options);
   });
 };
 

package/dist/cjs/player-user-consents.cjs.entry.js

@@ -2,14 +2,102 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-28f85617.js');
+const index = require('./index-e77a2edf.js');
 
-const playerUserConsentsCss = ":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}";
+const DEFAULT_LANGUAGE = 'en';
+const TRANSLATIONS = {
+  en: {
+    termsandconditions1: "I accept the ",
+    termsandconditions2: ", I have read and understood the ",
+    termsandconditions3: " as published on this site and confirm that I am over 18 years old.",
+    tc: "Terms and Conditions",
+    privacy: "Privacy Policy",
+    sms: "I consent to receive marketing communication via SMS.",
+    emailmarketing: "I consent to receive marketing communication via Email."
+  },
+  ro: {
+    termsandconditions1: "I accept the ",
+    termsandconditions2: ", I have read and understood the ",
+    termsandconditions3: " as published on this site and confirm that I am over 18 years old.",
+    tc: "Terms and Conditions",
+    privacy: "Privacy Policy",
+    sms: "I consent to receive marketing communication via SMS.",
+    emailmarketing: "I consent to receive marketing communication via Email."
+  },
+  hr: {
+    termsandconditions1: "I accept the ",
+    termsandconditions2: ", I have read and understood the ",
+    termsandconditions3: " as published on this site and confirm that I am over 18 years old.",
+    tc: "Terms and Conditions",
+    privacy: "Privacy Policy",
+    sms: "I consent to receive marketing communication via SMS.",
+    emailmarketing: "I consent to receive marketing communication via Email."
+  },
+  fr: {
+    termsandconditions1: "I accept the ",
+    termsandconditions2: ", I have read and understood the ",
+    termsandconditions3: " as published on this site and confirm that I am over 18 years old.",
+    tc: "Terms and Conditions",
+    privacy: "Privacy Policy",
+    sms: "I consent to receive marketing communication via SMS.",
+    emailmarketing: "I consent to receive marketing communication via Email."
+  },
+  cs: {
+    termsandconditions1: "I accept the ",
+    termsandconditions2: ", I have read and understood the ",
+    termsandconditions3: " as published on this site and confirm that I am over 18 years old.",
+    tc: "Terms and Conditions",
+    privacy: "Privacy Policy",
+    sms: "I consent to receive marketing communication via SMS.",
+    emailmarketing: "I consent to receive marketing communication via Email."
+  },
+  de: {
+    termsandconditions1: "I accept the ",
+    termsandconditions2: ", I have read and understood the ",
+    termsandconditions3: " as published on this site and confirm that I am over 18 years old.",
+    tc: "Terms and Conditions",
+    privacy: "Privacy Policy",
+    sms: "I consent to receive marketing communication via SMS.",
+    emailmarketing: "I consent to receive marketing communication via Email."
+  },
+};
+const getTranslations = (url) => {
+  // fetch url, get the data, replace the TRANSLATIONS content
+  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 ? 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 playerUserConsentsCss = ":host{display:block}.ConsentTitle{margin-bottom:0.2rem;font-weight:600}.UserConsent:hover{cursor:pointer}.UserConsent{display:flex;align-items:baseline}.MandatoryItem{color:#f00;font-size:1.2rem}.ConsentLink{text-decoration:underline;color:var(--emfe-w-color-primary);font-weight:bold}";
 
 const PlayerUserConsents = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.userLegislationConsent = index.createEvent(this, "userLegislationConsent", 7);
+    /**
+    * Language
+    */
+    this.lang = 'en';
     /**
      * 'true' when parent expects component to emit it's current value
      */
@@ -26,44 +114,34 @@ const PlayerUserConsents = class {
      * the title of the consent to be displayed
      */
     this.consentTitle = '';
-    /**
-     * link to the t&c page
-     */
-    this.tcLink = '#';
-    /**
-     * link to privacy policy page
-     */
-    this.privacyLink = '#';
     /**
      * Client custom styling via inline style
      */
     this.clientStyling = '';
+    /**
+    * Translation url
+    */
+    this.translationUrl = '';
     /**
      * the text content to be rendered by the component. Determined at runtime
      */
     this.textContent = '';
     this.limitStylingAppends = false;
-    // Maybe switch this out with a localization source
-    this.stringVariants = {
-      termsandconditions1: "I accept the ",
-      termsandconditions2: ", I have read and understood the ",
-      termsandconditions3: " as published on this site and confirm that I am over 18 years old.",
-      tc: "Terms and Conditions",
-      privacy: "Privacy Policy",
-      sms: "I consent to receive marketing communication via SMS.",
-      emailmarketing: "I consent to receive marketing communication via Email."
-    };
+    this.goToTermsAndConditions = () => window.postMessage({ type: 'GoToTermsAndConditions' });
+    this.goToPrivacyPolicy = () => window.postMessage({ type: 'GoToPrivacyPolicy' });
     this.setClientStyling = () => {
       let sheet = document.createElement('style');
       sheet.innerHTML = this.clientStyling;
       this.stylingContainer.prepend(sheet);
     };
   }
-  determineTextContent() {
-    let result = this.consentType === 'termsandconditions' ?
-      index.h("span", null, this.stringVariants['termsandconditions1'], index.h("a", { href: this.tcLink }, this.stringVariants['tc']), this.stringVariants['termsandconditions2'], index.h("a", { href: this.privacyLink }, this.stringVariants['privacy']), this.stringVariants['termsandconditions3'])
-      : index.h("span", null, this.stringVariants[this.consentType]);
-    return result;
+  handleNewTranslations() {
+    getTranslations(this.translationUrl);
+  }
+  async componentWillLoad() {
+    if (this.translationUrl.length > 2) {
+      await getTranslations(this.translationUrl);
+    }
   }
   userLegislationConsentHandler() {
     this.userLegislationConsent.emit({
@@ -80,13 +158,20 @@ const PlayerUserConsents = class {
     }
     // end custom styling area
   }
+  determineTextContent() {
+    return this.consentType === 'termsandconditions' ?
+      index.h("p", null, translate('termsandconditions1', this.lang), index.h("span", { class: "ConsentLink", onClick: this.goToTermsAndConditions }, translate('tc', this.lang)), translate('termsandconditions2', this.lang), index.h("span", { class: "ConsentLink", onClick: this.goToPrivacyPolicy }, translate('privacy', this.lang)), translate('termsandconditions3', this.lang))
+      : index.h("p", null, translate('consentType', this.lang));
+  }
   render() {
     if (this.queried) {
       this.userLegislationConsentHandler();
     }
-    this.textContent = this.determineTextContent();
-    return (index.h("div", { ref: el => this.stylingContainer = el }, index.h("p", { class: "ConsentTitle" }, this.consentTitle), index.h("label", { class: "userConsent", htmlFor: "userConsent" }, index.h("input", { ref: el => this.checkboxInput = el, id: "userConsent", type: "checkbox", onInput: () => this.userLegislationConsentHandler() }), this.textContent, this.mandatory && index.h("span", { class: "MandatoryItem" }, "*"))));
+    return (index.h("div", { ref: el => this.stylingContainer = el }, index.h("p", { class: "ConsentTitle" }, this.consentTitle), index.h("label", { class: "UserConsent", htmlFor: "userConsent" }, index.h("input", { ref: el => this.checkboxInput = el, id: "userConsent", type: "checkbox", onInput: () => this.userLegislationConsentHandler() }), this.determineTextContent(), this.mandatory && index.h("span", { class: "MandatoryItem" }, "*"))));
   }
+  static get watchers() { return {
+    "translationUrl": ["handleNewTranslations"]
+  }; }
 };
 PlayerUserConsents.style = playerUserConsentsCss;
 

package/dist/cjs/player-user-consents.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-28f85617.js');
+const index = require('./index-e77a2edf.js');
 
 /*
  Stencil Client Patch Browser v2.15.2 | MIT Licensed | https://stenciljs.com
@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["player-user-consents.cjs",[[1,"player-user-consents",{"queried":[516],"consentType":[513,"consent-type"],"mandatory":[516],"consentTitle":[513,"consent-title"],"tcLink":[513,"tc-link"],"privacyLink":[513,"privacy-link"],"clientStyling":[1,"client-styling"],"textContent":[32],"limitStylingAppends":[32]}]]]], options);
+  return index.bootstrapLazy([["player-user-consents.cjs",[[1,"player-user-consents",{"lang":[1537],"queried":[516],"consentType":[513,"consent-type"],"mandatory":[516],"consentTitle":[513,"consent-title"],"clientStyling":[1,"client-styling"],"translationUrl":[513,"translation-url"],"textContent":[32],"limitStylingAppends":[32]}]]]], options);
 });

package/dist/collection/components/player-user-consents/player-user-consents.css

@@ -7,12 +7,22 @@
   font-weight: 600;
 }
 
-.userConsent:hover {
-  border-bottom: 1px solid #000;
+.UserConsent:hover {
   cursor: pointer;
 }
 
+.UserConsent {
+  display: flex;
+  align-items: baseline;
+}
+
 .MandatoryItem {
   color: #f00;
   font-size: 1.2rem;
+}
+
+.ConsentLink {
+  text-decoration: underline;
+  color: var(--emfe-w-color-primary);
+  font-weight: bold;
 }

package/dist/collection/components/player-user-consents/player-user-consents.js

@@ -1,6 +1,11 @@
-import { Component, h, Event, Prop, State } from '@stencil/core';
+import { Component, h, Event, Prop, State, Watch } from '@stencil/core';
+import { getTranslations, translate } from '../../utils/utils';
 export class PlayerUserConsents {
   constructor() {
+    /**
+    * Language
+    */
+    this.lang = 'en';
     /**
      * 'true' when parent expects component to emit it's current value
      */
@@ -17,49 +22,34 @@ export class PlayerUserConsents {
      * the title of the consent to be displayed
      */
     this.consentTitle = '';
-    /**
-     * link to the t&c page
-     */
-    this.tcLink = '#';
-    /**
-     * link to privacy policy page
-     */
-    this.privacyLink = '#';
     /**
      * Client custom styling via inline style
      */
     this.clientStyling = '';
+    /**
+    * Translation url
+    */
+    this.translationUrl = '';
     /**
      * the text content to be rendered by the component. Determined at runtime
      */
     this.textContent = '';
     this.limitStylingAppends = false;
-    // Maybe switch this out with a localization source
-    this.stringVariants = {
-      termsandconditions1: "I accept the ",
-      termsandconditions2: ", I have read and understood the ",
-      termsandconditions3: " as published on this site and confirm that I am over 18 years old.",
-      tc: "Terms and Conditions",
-      privacy: "Privacy Policy",
-      sms: "I consent to receive marketing communication via SMS.",
-      emailmarketing: "I consent to receive marketing communication via Email."
-    };
+    this.goToTermsAndConditions = () => window.postMessage({ type: 'GoToTermsAndConditions' });
+    this.goToPrivacyPolicy = () => window.postMessage({ type: 'GoToPrivacyPolicy' });
     this.setClientStyling = () => {
       let sheet = document.createElement('style');
       sheet.innerHTML = this.clientStyling;
       this.stylingContainer.prepend(sheet);
     };
   }
-  determineTextContent() {
-    let result = this.consentType === 'termsandconditions' ?
-      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'])
-      : h("span", null, this.stringVariants[this.consentType]);
-    return result;
+  handleNewTranslations() {
+    getTranslations(this.translationUrl);
+  }
+  async componentWillLoad() {
+    if (this.translationUrl.length > 2) {
+      await getTranslations(this.translationUrl);
+    }
   }
   userLegislationConsentHandler() {
     this.userLegislationConsent.emit({
@@ -76,16 +66,25 @@ export class PlayerUserConsents {
     }
     // end custom styling area
   }
+  determineTextContent() {
+    return this.consentType === 'termsandconditions' ?
+      h("p", null,
+        translate('termsandconditions1', this.lang),
+        h("span", { class: "ConsentLink", onClick: this.goToTermsAndConditions }, translate('tc', this.lang)),
+        translate('termsandconditions2', this.lang),
+        h("span", { class: "ConsentLink", onClick: this.goToPrivacyPolicy }, translate('privacy', this.lang)),
+        translate('termsandconditions3', this.lang))
+      : h("p", null, translate('consentType', this.lang));
+  }
   render() {
     if (this.queried) {
       this.userLegislationConsentHandler();
     }
-    this.textContent = this.determineTextContent();
     return (h("div", { ref: el => this.stylingContainer = el },
       h("p", { class: "ConsentTitle" }, this.consentTitle),
-      h("label", { class: "userConsent", htmlFor: "userConsent" },
+      h("label", { class: "UserConsent", htmlFor: "userConsent" },
         h("input", { ref: el => this.checkboxInput = el, id: "userConsent", type: "checkbox", onInput: () => this.userLegislationConsentHandler() }),
-        this.textContent,
+        this.determineTextContent(),
         this.mandatory && h("span", { class: "MandatoryItem" }, "*"))));
   }
   static get is() { return "player-user-consents"; }
@@ -97,6 +96,24 @@ export class PlayerUserConsents {
     "$": ["player-user-consents.css"]
   }; }
   static get properties() { return {
+    "lang": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Language"
+      },
+      "attribute": "lang",
+      "reflect": true,
+      "defaultValue": "'en'"
+    },
     "queried": {
       "type": "boolean",
       "mutable": false,
@@ -169,7 +186,7 @@ export class PlayerUserConsents {
       "reflect": true,
       "defaultValue": "''"
     },
-    "tcLink": {
+    "clientStyling": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -181,13 +198,13 @@ export class PlayerUserConsents {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "link to the t&c page"
+        "text": "Client custom styling via inline style"
       },
-      "attribute": "tc-link",
-      "reflect": true,
-      "defaultValue": "'#'"
+      "attribute": "client-styling",
+      "reflect": false,
+      "defaultValue": "''"
     },
-    "privacyLink": {
+    "translationUrl": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -199,28 +216,10 @@ export class PlayerUserConsents {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "link to privacy policy page"
+        "text": "Translation url"
       },
-      "attribute": "privacy-link",
+      "attribute": "translation-url",
       "reflect": true,
-      "defaultValue": "'#'"
-    },
-    "clientStyling": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Client custom styling via inline style"
-      },
-      "attribute": "client-styling",
-      "reflect": false,
       "defaultValue": "''"
     }
   }; }
@@ -244,4 +243,8 @@ export class PlayerUserConsents {
         "references": {}
       }
     }]; }
+  static get watchers() { return [{
+      "propName": "translationUrl",
+      "methodName": "handleNewTranslations"
+    }]; }
 }

package/dist/collection/utils/utils.js

@@ -1,3 +1,83 @@
-export function format(first, middle, last) {
-  return ((first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : ''));
-}
+const DEFAULT_LANGUAGE = 'en';
+const TRANSLATIONS = {
+  en: {
+    termsandconditions1: "I accept the ",
+    termsandconditions2: ", I have read and understood the ",
+    termsandconditions3: " as published on this site and confirm that I am over 18 years old.",
+    tc: "Terms and Conditions",
+    privacy: "Privacy Policy",
+    sms: "I consent to receive marketing communication via SMS.",
+    emailmarketing: "I consent to receive marketing communication via Email."
+  },
+  ro: {
+    termsandconditions1: "I accept the ",
+    termsandconditions2: ", I have read and understood the ",
+    termsandconditions3: " as published on this site and confirm that I am over 18 years old.",
+    tc: "Terms and Conditions",
+    privacy: "Privacy Policy",
+    sms: "I consent to receive marketing communication via SMS.",
+    emailmarketing: "I consent to receive marketing communication via Email."
+  },
+  hr: {
+    termsandconditions1: "I accept the ",
+    termsandconditions2: ", I have read and understood the ",
+    termsandconditions3: " as published on this site and confirm that I am over 18 years old.",
+    tc: "Terms and Conditions",
+    privacy: "Privacy Policy",
+    sms: "I consent to receive marketing communication via SMS.",
+    emailmarketing: "I consent to receive marketing communication via Email."
+  },
+  fr: {
+    termsandconditions1: "I accept the ",
+    termsandconditions2: ", I have read and understood the ",
+    termsandconditions3: " as published on this site and confirm that I am over 18 years old.",
+    tc: "Terms and Conditions",
+    privacy: "Privacy Policy",
+    sms: "I consent to receive marketing communication via SMS.",
+    emailmarketing: "I consent to receive marketing communication via Email."
+  },
+  cs: {
+    termsandconditions1: "I accept the ",
+    termsandconditions2: ", I have read and understood the ",
+    termsandconditions3: " as published on this site and confirm that I am over 18 years old.",
+    tc: "Terms and Conditions",
+    privacy: "Privacy Policy",
+    sms: "I consent to receive marketing communication via SMS.",
+    emailmarketing: "I consent to receive marketing communication via Email."
+  },
+  de: {
+    termsandconditions1: "I accept the ",
+    termsandconditions2: ", I have read and understood the ",
+    termsandconditions3: " as published on this site and confirm that I am over 18 years old.",
+    tc: "Terms and Conditions",
+    privacy: "Privacy Policy",
+    sms: "I consent to receive marketing communication via SMS.",
+    emailmarketing: "I consent to receive marketing communication via Email."
+  },
+};
+export const getTranslations = (url) => {
+  // fetch url, get the data, replace the TRANSLATIONS content
+  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);
+    });
+  });
+};
+export const translate = (key, customLang, values) => {
+  const lang = customLang;
+  let translation = TRANSLATIONS[lang !== undefined ? 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;
+};