@everymatrix/user-action-controller 1.27.10 → 1.28.4

package/dist/components/user-action-controller.js

@@ -1,7 +1,67 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { d as defineCustomElement$3 } from './player-legislation-wrapper2.js';
 import { d as defineCustomElement$2 } from './player-user-consents2.js';
 
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['ro', 'en', 'cz', 'de', 'hr'];
+const TRANSLATIONS = {
+  en: {
+    termsandconditions: 'Terms and Conditions',
+    sms: 'SMS marketing',
+    emailmarketing: 'Email marketing'
+  },
+  ro: {
+    termsandconditions: 'Terms and Conditions',
+    sms: 'SMS marketing',
+    emailmarketing: 'Email marketing'
+  },
+  hr: {
+    termsandconditions: 'Terms and Conditions',
+    sms: 'SMS marketing',
+    emailmarketing: 'Email marketing'
+  },
+  fr: {
+    termsandconditions: 'Terms and Conditions',
+    sms: 'SMS marketing',
+    emailmarketing: 'Email marketing'
+  },
+  cs: {
+    termsandconditions: 'Terms and Conditions',
+    sms: 'SMS marketing',
+    emailmarketing: 'Email marketing'
+  },
+  de: {
+    termsandconditions: 'Terms and Conditions',
+    sms: 'SMS marketing',
+    emailmarketing: 'Email marketing'
+  },
+};
+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 && 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 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}}.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(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));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 UserActionController$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -10,13 +70,17 @@ const UserActionController$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     this.__registerHost();
     this.__attachShadow();
     /**
-    * which user action widgets are included
+    * Language
     */
-    this.activeUserActions = '';
+    this.lang = 'en';
     /**
      * Select GM version
      */
     this.gmVersion = '';
+    /**
+    * Translation url
+    */
+    this.translationUrl = '';
     /**
      * Client custom styling via inline style
      */
@@ -30,17 +94,19 @@ const UserActionController$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
      */
     this.queryFired = false;
     this.readyActionsCount = 0;
+    this.activeUserActions = [];
+    this.userActionsValidated = true;
     this.receivedQueryResponses = 0;
     this.limitStylingAppends = false;
     this.isLoading = true;
+    this.mandatoryActionsChecked = 0;
+    //for now this variable is hardcoded bcs we have only terms and conditions mandatory and we dont receive with these new functionality the mandatory actions
     this.mandatoryActions = ['termsandconditions'];
-    this.requiredActionsCount = 0;
-    this.expectedQueryResponses = 0;
     this.userActions = [];
     this.consentTitles = {
-      termsandconditions: "Terms and Conditions",
-      sms: "SMS marketing",
-      emailmarketing: "Email marketing"
+      termsandconditions: translate('termsandconditions', this.lang),
+      sms: translate('sms', this.lang),
+      emailmarketing: translate('emailmarketing', this.lang)
     };
     this.setClientStyling = () => {
       let sheet = document.createElement('style');
@@ -62,44 +128,45 @@ const UserActionController$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
       });
     };
   }
+  handleNewTranslations() {
+    getTranslations(this.translationUrl);
+  }
   handleQueryResponse() {
-    if (this.receivedQueryResponses === this.expectedQueryResponses) {
+    if (this.receivedQueryResponses === this.activeUserActions.length) {
       this.updateUserConsents();
     }
   }
-  hasToSetConsentsHandler(_) {
-    this.hasToSetConsents = true;
-  }
   userLegislationConsentHandler(event) {
-    // Increase / Decrease the amount of mandatory actions taken
-    if (this.mandatoryActions.includes(event.detail.type)) {
-      if (event.detail.value)
-        this.readyActionsCount++;
-      else
-        this.readyActionsCount--;
+    const actionType = event.detail.type;
+    const actionTypeChecked = event.detail.value;
+    if (this.mandatoryActions.includes(actionType) && this.queryFired === false) {
+      actionTypeChecked === true ? this.mandatoryActionsChecked++ : this.mandatoryActionsChecked--;
     }
     // Register final user choices only if we're ready to update
     if (this.queryFired) {
-      this.userActions.push({ tagCode: event.detail.type, status: event.detail.value ? 'Accepted' : 'Denied' });
+      this.userActions.push({ tagCode: actionType, status: actionTypeChecked ? 'Accepted' : 'Denied' });
       this.receivedQueryResponses++;
     }
   }
-  determineMandatoryActions() {
-    const url = new URL(`${this.endpoint}/v1/player/consentRequirements`);
+  determineUserActions() {
+    const url = new URL(`${this.endpoint}/v1/player/${this.userId}/consent`);
+    const headers = new Headers();
+    headers.append('X-SessionId', this.userSession);
     let requestOptions;
     requestOptions = {
       method: 'GET',
-      headers: {
-        'X-SessionId': `${this.userSession}`,
-      },
+      headers
     };
     if (url && requestOptions) {
       return fetch(url.href, requestOptions)
         .then(res => res.json())
         .then(data => {
-        const selectGmData = data.consents || [];
-        selectGmData.forEach(action => action.mustAccept && this.mandatoryActions.push(action.tagCode));
-        console.log(this.mandatoryActions);
+        const actionItems = data.items;
+        actionItems.forEach(element => {
+          if (element.status === 'Expired') {
+            this.activeUserActions.push(element.tagCode);
+          }
+        });
         this.isLoading = false;
       })
         .catch(error => {
@@ -169,14 +236,17 @@ const UserActionController$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
   handleApplyClick() {
     this.queryFired = true;
   }
-  componentWillLoad() {
+  async componentWillLoad() {
     if (this.gmVersion === 'gmcore') {
-      return this.determineMandatoryActions();
+      return this.determineUserActions();
     }
     else {
-      this.activeUserActions = 'termsandconditions';
+      this.activeUserActions = ['termsandconditions'];
       this.isLoading = false;
     }
+    if (this.translationUrl.length > 2) {
+      await getTranslations(this.translationUrl);
+    }
   }
   componentDidRender() {
     // start custom styling area
@@ -190,16 +260,20 @@ const UserActionController$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     // end custom styling area
   }
   render() {
-    const activeUAList = this.hasToSetConsents ? ['termsandconditions'] : this.activeUserActions.replace(/ /g, '').split(',');
-    this.requiredActionsCount = activeUAList.filter(action => this.mandatoryActions.includes(action)).length;
-    this.expectedQueryResponses = activeUAList.length;
-    return h("div", { class: "QueryReferenceContainer", ref: el => this.stylingContainer = el }, this.isLoading &&
-      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" })), !this.isLoading &&
-      h("div", { class: "UserActionController" }, h("h2", { class: "UserConsentNotice" }, this.userNoticeText), h("player-legislation-wrapper", { "active-user-actions": this.activeUserActions, "client-styling": this.clientStyling }, activeUAList.map(item => (h("player-user-consents", { slot: item, consentType: item, consentTitle: this.consentTitles[item], queried: this.queryFired, mandatory: this.mandatoryActions.includes(item), "client-styling": this.clientStyling })))), this.includeSubmitButton &&
-        h("button", { class: "ConsentSubmitButton", disabled: this.readyActionsCount === this.requiredActionsCount ? false : true, onClick: () => this.handleApplyClick() }, this.submitButtonText)));
+    const isMandatoryPresent = this.mandatoryActions.every(action => this.activeUserActions.includes(action));
+    if (isMandatoryPresent) {
+      this.userActionsValidated = !(this.mandatoryActionsChecked === this.mandatoryActions.length);
+    }
+    else {
+      this.userActionsValidated = false;
+    }
+    return (h("div", { class: "QueryReferenceContainer", ref: el => this.stylingContainer = el }, this.isLoading ? (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: "UserActionController" }, h("h2", { class: "UserConsentNotice" }, this.userNoticeText), h("div", { class: "PlayerLegislationWrapper" }, this.activeUserActions.map(action => (h("slot", { name: action }, h("player-user-consents", { slot: action, consentType: action, consentTitle: this.consentTitles[action], queried: this.queryFired, mandatory: this.mandatoryActions.includes(action), "client-styling": this.clientStyling }))))), this.includeSubmitButton &&
+      h("button", { class: "ConsentSubmitButton", disabled: this.userActionsValidated, onClick: () => this.handleApplyClick() }, this.submitButtonText)))));
   }
   static get watchers() { return {
+    "translationUrl": ["handleNewTranslations"],
     "receivedQueryResponses": ["handleQueryResponse"]
   }; }
   static get style() { return userActionControllerCss; }
@@ -207,36 +281,34 @@ const UserActionController$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     "endpoint": [513],
     "userSession": [513, "user-session"],
     "userId": [513, "user-id"],
+    "lang": [1537],
     "includeSubmitButton": [516, "include-submit-button"],
     "submitButtonText": [513, "submit-button-text"],
     "userNoticeText": [513, "user-notice-text"],
-    "activeUserActions": [513, "active-user-actions"],
     "gmVersion": [1, "gm-version"],
+    "translationUrl": [513, "translation-url"],
     "clientStyling": [1537, "client-styling"],
     "clientStylingUrl": [513, "client-styling-url"],
     "queryFired": [32],
     "readyActionsCount": [32],
+    "activeUserActions": [32],
+    "userActionsValidated": [32],
     "receivedQueryResponses": [32],
     "limitStylingAppends": [32],
-    "hasToSetConsents": [32],
-    "isLoading": [32]
-  }, [[0, "hasToSetConsents", "hasToSetConsentsHandler"], [0, "userLegislationConsent", "userLegislationConsentHandler"]]]);
+    "isLoading": [32],
+    "mandatoryActionsChecked": [32]
+  }, [[0, "userLegislationConsent", "userLegislationConsentHandler"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["user-action-controller", "player-legislation-wrapper", "player-user-consents"];
+  const components = ["user-action-controller", "player-user-consents"];
   components.forEach(tagName => { switch (tagName) {
     case "user-action-controller":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, UserActionController$1);
       }
       break;
-    case "player-legislation-wrapper":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
     case "player-user-consents":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();

package/dist/esm/loader.js

@@ -10,7 +10,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["player-legislation-wrapper_3",[[1,"user-action-controller",{"endpoint":[513],"userSession":[513,"user-session"],"userId":[513,"user-id"],"includeSubmitButton":[516,"include-submit-button"],"submitButtonText":[513,"submit-button-text"],"userNoticeText":[513,"user-notice-text"],"activeUserActions":[513,"active-user-actions"],"gmVersion":[1,"gm-version"],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"queryFired":[32],"readyActionsCount":[32],"receivedQueryResponses":[32],"limitStylingAppends":[32],"hasToSetConsents":[32],"isLoading":[32]},[[0,"hasToSetConsents","hasToSetConsentsHandler"],[0,"userLegislationConsent","userLegislationConsentHandler"]]],[1,"player-legislation-wrapper",{"activeUserActions":[513,"active-user-actions"],"clientStyling":[1,"client-styling"],"limitStylingAppends":[32]}],[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 bootstrapLazy([["player-user-consents_2",[[1,"user-action-controller",{"endpoint":[513],"userSession":[513,"user-session"],"userId":[513,"user-id"],"lang":[1537],"includeSubmitButton":[516,"include-submit-button"],"submitButtonText":[513,"submit-button-text"],"userNoticeText":[513,"user-notice-text"],"gmVersion":[1,"gm-version"],"translationUrl":[513,"translation-url"],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"queryFired":[32],"readyActionsCount":[32],"activeUserActions":[32],"userActionsValidated":[32],"receivedQueryResponses":[32],"limitStylingAppends":[32],"isLoading":[32],"mandatoryActionsChecked":[32]},[[0,"userLegislationConsent","userLegislationConsentHandler"]]],[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);
   });
 };
 

package/dist/esm/{player-legislation-wrapper_3.entry.js → player-user-consents_2.entry.js}

@@ -1,36 +1,4 @@
-import { r as registerInstance, h, c as createEvent } from './index-71f14530.js';
-
-const playerLegislationWrapperCss = ":host{display:block}";
-
-const PlayerLegislationWrapper = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /**
-     * Client custom styling via inline style
-     */
-    this.clientStyling = '';
-    this.limitStylingAppends = false;
-    this.setClientStyling = () => {
-      let sheet = document.createElement('style');
-      sheet.innerHTML = this.clientStyling;
-      this.stylingContainer.prepend(sheet);
-    };
-  }
-  componentDidRender() {
-    // start custom styling area
-    if (!this.limitStylingAppends && this.stylingContainer) {
-      if (this.clientStyling)
-        this.setClientStyling();
-      this.limitStylingAppends = true;
-    }
-    // end custom styling area
-  }
-  render() {
-    const activeUAList = this.activeUserActions.replace(/ /g, '').split(',');
-    return (h("div", { class: "PlayerLegislationWrapper", ref: el => this.stylingContainer = el }, activeUAList.map(action => (h("slot", { name: action })))));
-  }
-};
-PlayerLegislationWrapper.style = playerLegislationWrapperCss;
+import { r as registerInstance, c as createEvent, h } from './index-71f14530.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}";
 
@@ -118,19 +86,84 @@ const PlayerUserConsents = class {
 };
 PlayerUserConsents.style = playerUserConsentsCss;
 
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['ro', 'en', 'cz', 'de', 'hr'];
+const TRANSLATIONS = {
+  en: {
+    termsandconditions: 'Terms and Conditions',
+    sms: 'SMS marketing',
+    emailmarketing: 'Email marketing'
+  },
+  ro: {
+    termsandconditions: 'Terms and Conditions',
+    sms: 'SMS marketing',
+    emailmarketing: 'Email marketing'
+  },
+  hr: {
+    termsandconditions: 'Terms and Conditions',
+    sms: 'SMS marketing',
+    emailmarketing: 'Email marketing'
+  },
+  fr: {
+    termsandconditions: 'Terms and Conditions',
+    sms: 'SMS marketing',
+    emailmarketing: 'Email marketing'
+  },
+  cs: {
+    termsandconditions: 'Terms and Conditions',
+    sms: 'SMS marketing',
+    emailmarketing: 'Email marketing'
+  },
+  de: {
+    termsandconditions: 'Terms and Conditions',
+    sms: 'SMS marketing',
+    emailmarketing: 'Email marketing'
+  },
+};
+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 && 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 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}}.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(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));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 UserActionController = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     /**
-    * which user action widgets are included
+    * Language
     */
-    this.activeUserActions = '';
+    this.lang = 'en';
     /**
      * Select GM version
      */
     this.gmVersion = '';
+    /**
+    * Translation url
+    */
+    this.translationUrl = '';
     /**
      * Client custom styling via inline style
      */
@@ -144,17 +177,19 @@ const UserActionController = class {
      */
     this.queryFired = false;
     this.readyActionsCount = 0;
+    this.activeUserActions = [];
+    this.userActionsValidated = true;
     this.receivedQueryResponses = 0;
     this.limitStylingAppends = false;
     this.isLoading = true;
+    this.mandatoryActionsChecked = 0;
+    //for now this variable is hardcoded bcs we have only terms and conditions mandatory and we dont receive with these new functionality the mandatory actions
     this.mandatoryActions = ['termsandconditions'];
-    this.requiredActionsCount = 0;
-    this.expectedQueryResponses = 0;
     this.userActions = [];
     this.consentTitles = {
-      termsandconditions: "Terms and Conditions",
-      sms: "SMS marketing",
-      emailmarketing: "Email marketing"
+      termsandconditions: translate('termsandconditions', this.lang),
+      sms: translate('sms', this.lang),
+      emailmarketing: translate('emailmarketing', this.lang)
     };
     this.setClientStyling = () => {
       let sheet = document.createElement('style');
@@ -176,44 +211,45 @@ const UserActionController = class {
       });
     };
   }
+  handleNewTranslations() {
+    getTranslations(this.translationUrl);
+  }
   handleQueryResponse() {
-    if (this.receivedQueryResponses === this.expectedQueryResponses) {
+    if (this.receivedQueryResponses === this.activeUserActions.length) {
       this.updateUserConsents();
     }
   }
-  hasToSetConsentsHandler(_) {
-    this.hasToSetConsents = true;
-  }
   userLegislationConsentHandler(event) {
-    // Increase / Decrease the amount of mandatory actions taken
-    if (this.mandatoryActions.includes(event.detail.type)) {
-      if (event.detail.value)
-        this.readyActionsCount++;
-      else
-        this.readyActionsCount--;
+    const actionType = event.detail.type;
+    const actionTypeChecked = event.detail.value;
+    if (this.mandatoryActions.includes(actionType) && this.queryFired === false) {
+      actionTypeChecked === true ? this.mandatoryActionsChecked++ : this.mandatoryActionsChecked--;
     }
     // Register final user choices only if we're ready to update
     if (this.queryFired) {
-      this.userActions.push({ tagCode: event.detail.type, status: event.detail.value ? 'Accepted' : 'Denied' });
+      this.userActions.push({ tagCode: actionType, status: actionTypeChecked ? 'Accepted' : 'Denied' });
       this.receivedQueryResponses++;
     }
   }
-  determineMandatoryActions() {
-    const url = new URL(`${this.endpoint}/v1/player/consentRequirements`);
+  determineUserActions() {
+    const url = new URL(`${this.endpoint}/v1/player/${this.userId}/consent`);
+    const headers = new Headers();
+    headers.append('X-SessionId', this.userSession);
     let requestOptions;
     requestOptions = {
       method: 'GET',
-      headers: {
-        'X-SessionId': `${this.userSession}`,
-      },
+      headers
     };
     if (url && requestOptions) {
       return fetch(url.href, requestOptions)
         .then(res => res.json())
         .then(data => {
-        const selectGmData = data.consents || [];
-        selectGmData.forEach(action => action.mustAccept && this.mandatoryActions.push(action.tagCode));
-        console.log(this.mandatoryActions);
+        const actionItems = data.items;
+        actionItems.forEach(element => {
+          if (element.status === 'Expired') {
+            this.activeUserActions.push(element.tagCode);
+          }
+        });
         this.isLoading = false;
       })
         .catch(error => {
@@ -283,14 +319,17 @@ const UserActionController = class {
   handleApplyClick() {
     this.queryFired = true;
   }
-  componentWillLoad() {
+  async componentWillLoad() {
     if (this.gmVersion === 'gmcore') {
-      return this.determineMandatoryActions();
+      return this.determineUserActions();
     }
     else {
-      this.activeUserActions = 'termsandconditions';
+      this.activeUserActions = ['termsandconditions'];
       this.isLoading = false;
     }
+    if (this.translationUrl.length > 2) {
+      await getTranslations(this.translationUrl);
+    }
   }
   componentDidRender() {
     // start custom styling area
@@ -304,19 +343,23 @@ const UserActionController = class {
     // end custom styling area
   }
   render() {
-    const activeUAList = this.hasToSetConsents ? ['termsandconditions'] : this.activeUserActions.replace(/ /g, '').split(',');
-    this.requiredActionsCount = activeUAList.filter(action => this.mandatoryActions.includes(action)).length;
-    this.expectedQueryResponses = activeUAList.length;
-    return h("div", { class: "QueryReferenceContainer", ref: el => this.stylingContainer = el }, this.isLoading &&
-      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" })), !this.isLoading &&
-      h("div", { class: "UserActionController" }, h("h2", { class: "UserConsentNotice" }, this.userNoticeText), h("player-legislation-wrapper", { "active-user-actions": this.activeUserActions, "client-styling": this.clientStyling }, activeUAList.map(item => (h("player-user-consents", { slot: item, consentType: item, consentTitle: this.consentTitles[item], queried: this.queryFired, mandatory: this.mandatoryActions.includes(item), "client-styling": this.clientStyling })))), this.includeSubmitButton &&
-        h("button", { class: "ConsentSubmitButton", disabled: this.readyActionsCount === this.requiredActionsCount ? false : true, onClick: () => this.handleApplyClick() }, this.submitButtonText)));
+    const isMandatoryPresent = this.mandatoryActions.every(action => this.activeUserActions.includes(action));
+    if (isMandatoryPresent) {
+      this.userActionsValidated = !(this.mandatoryActionsChecked === this.mandatoryActions.length);
+    }
+    else {
+      this.userActionsValidated = false;
+    }
+    return (h("div", { class: "QueryReferenceContainer", ref: el => this.stylingContainer = el }, this.isLoading ? (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: "UserActionController" }, h("h2", { class: "UserConsentNotice" }, this.userNoticeText), h("div", { class: "PlayerLegislationWrapper" }, this.activeUserActions.map(action => (h("slot", { name: action }, h("player-user-consents", { slot: action, consentType: action, consentTitle: this.consentTitles[action], queried: this.queryFired, mandatory: this.mandatoryActions.includes(action), "client-styling": this.clientStyling }))))), this.includeSubmitButton &&
+      h("button", { class: "ConsentSubmitButton", disabled: this.userActionsValidated, onClick: () => this.handleApplyClick() }, this.submitButtonText)))));
   }
   static get watchers() { return {
+    "translationUrl": ["handleNewTranslations"],
     "receivedQueryResponses": ["handleQueryResponse"]
   }; }
 };
 UserActionController.style = userActionControllerCss;
 
-export { PlayerLegislationWrapper as player_legislation_wrapper, PlayerUserConsents as player_user_consents, UserActionController as user_action_controller };
+export { PlayerUserConsents as player_user_consents, UserActionController as user_action_controller };

package/dist/esm/user-action-controller.js

@@ -13,5 +13,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["player-legislation-wrapper_3",[[1,"user-action-controller",{"endpoint":[513],"userSession":[513,"user-session"],"userId":[513,"user-id"],"includeSubmitButton":[516,"include-submit-button"],"submitButtonText":[513,"submit-button-text"],"userNoticeText":[513,"user-notice-text"],"activeUserActions":[513,"active-user-actions"],"gmVersion":[1,"gm-version"],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"queryFired":[32],"readyActionsCount":[32],"receivedQueryResponses":[32],"limitStylingAppends":[32],"hasToSetConsents":[32],"isLoading":[32]},[[0,"hasToSetConsents","hasToSetConsentsHandler"],[0,"userLegislationConsent","userLegislationConsentHandler"]]],[1,"player-legislation-wrapper",{"activeUserActions":[513,"active-user-actions"],"clientStyling":[1,"client-styling"],"limitStylingAppends":[32]}],[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 bootstrapLazy([["player-user-consents_2",[[1,"user-action-controller",{"endpoint":[513],"userSession":[513,"user-session"],"userId":[513,"user-id"],"lang":[1537],"includeSubmitButton":[516,"include-submit-button"],"submitButtonText":[513,"submit-button-text"],"userNoticeText":[513,"user-notice-text"],"gmVersion":[1,"gm-version"],"translationUrl":[513,"translation-url"],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"queryFired":[32],"readyActionsCount":[32],"activeUserActions":[32],"userActionsValidated":[32],"receivedQueryResponses":[32],"limitStylingAppends":[32],"isLoading":[32],"mandatoryActionsChecked":[32]},[[0,"userLegislationConsent","userLegislationConsentHandler"]]],[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);
 });

package/dist/types/Users/adrian.pripon/Documents/Work/widgets-stencil/packages/user-action-controller/.stencil/packages/user-action-controller/stencil.config.d.ts

@@ -0,0 +1,2 @@
+import { Config } from '../../../../../../../../../../stencil-public-runtime';
+export declare const config: Config;

package/dist/types/components/user-action-controller/user-action-controller.d.ts

@@ -1,4 +1,3 @@
-import '@everymatrix/player-legislation-wrapper';
 import '@everymatrix/player-user-consents';
 interface LegislationConsentEvent {
   type: string;
@@ -17,6 +16,10 @@ export declare class UserActionController {
    * user id required for the update call
    */
   userId: string;
+  /**
+  * Language
+  */
+  lang: string;
   /**
    * whether or not to include the submit button (in case we want to compose a different )
    */
@@ -29,14 +32,14 @@ export declare class UserActionController {
    * the title of the action group
    */
   userNoticeText: string;
-  /**
-  * which user action widgets are included
-  */
-  activeUserActions: string;
   /**
    * Select GM version
    */
   gmVersion: string;
+  /**
+  * Translation url
+  */
+  translationUrl: string;
   /**
    * Client custom styling via inline style
    */
@@ -45,25 +48,25 @@ export declare class UserActionController {
    * Client custom styling via url
    */
   clientStylingUrl: string;
+  handleNewTranslations(): void;
   handleQueryResponse(): void;
-  hasToSetConsentsHandler(_: CustomEvent): void;
   userLegislationConsentHandler(event: CustomEvent<LegislationConsentEvent>): void;
   /**
    * Which actions are required in order to activate the "Apply" button. Other actions are considered optional.
    */
   queryFired: boolean;
   readyActionsCount: number;
+  activeUserActions: Array<string>;
+  userActionsValidated: boolean;
   receivedQueryResponses: number;
   private limitStylingAppends;
-  hasToSetConsents: boolean;
   private isLoading;
+  private mandatoryActionsChecked;
   private mandatoryActions;
-  private requiredActionsCount;
-  private expectedQueryResponses;
   private userActions;
   private stylingContainer;
   private consentTitles;
-  determineMandatoryActions(): Promise<void>;
+  determineUserActions(): Promise<void>;
   updateUserConsents(): void;
   handleApplyClick(): void;
   componentWillLoad(): Promise<void>;