@everymatrix/user-action-controller 1.32.4 → 1.33.0

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

@@ -0,0 +1,440 @@
+import { Component, h, Prop, Listen, State, Watch } from '@stencil/core';
+import { getTranslations, translate } from '../../utils/locale.utils';
+import '@everymatrix/player-user-consents';
+export class UserActionController {
+  constructor() {
+    /**
+    * Language
+    */
+    this.lang = 'en';
+    /**
+     * Select GM version
+     */
+    this.gmVersion = '';
+    /**
+    * Translation url
+    */
+    this.translationUrl = '';
+    /**
+     * Client custom styling via inline style
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url
+     */
+    this.clientStylingUrl = '';
+    /**
+     * Which actions are required in order to activate the "Apply" button. Other actions are considered optional.
+     */
+    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.userActions = [];
+    this.consentTitles = {
+      termsandconditions: translate('termsandconditions', this.lang),
+      sms: translate('sms', this.lang),
+      emailmarketing: translate('emailmarketing', this.lang)
+    };
+    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) => {
+        this.clientStyling = data;
+        cssFile.innerHTML = data;
+        setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
+      })
+        .catch((err) => {
+        console.log('error ', err);
+      });
+    };
+  }
+  handleNewTranslations() {
+    getTranslations(this.translationUrl);
+  }
+  handleQueryResponse() {
+    if (this.receivedQueryResponses === this.activeUserActions.length) {
+      this.updateUserConsents();
+    }
+  }
+  userLegislationConsentHandler(event) {
+    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: actionType, status: actionTypeChecked ? 'Accepted' : 'Denied' });
+      this.receivedQueryResponses++;
+    }
+  }
+  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
+    };
+    if (url && requestOptions) {
+      return fetch(url.href, requestOptions)
+        .then(res => res.json())
+        .then(data => {
+        const actionItems = data.items;
+        actionItems.forEach(element => {
+          if (element.status === 'Expired') {
+            this.activeUserActions.push(element.tagCode);
+          }
+        });
+        this.isLoading = false;
+      })
+        .catch(error => {
+        console.error('Error fetching data:', error);
+        this.isLoading = false;
+      });
+    }
+    else {
+      return Promise.reject('Unsupported endpoint');
+    }
+  }
+  updateUserConsents() {
+    let url;
+    let requestOptions;
+    url = (this.gmVersion === 'gmcore')
+      ? new URL(`${this.endpoint}/v1/player/${this.userId}/consent`)
+      : new URL(`${this.endpoint}/v1/player/${this.userId}/legislation/consents`);
+    const body = (this.gmVersion === 'gmcore')
+      ? {
+        items: this.userActions
+      }
+      : {
+        consents: [
+          {
+            tagCode: "termsandconditions",
+            note: "",
+            status: 1
+          }
+        ]
+      };
+    requestOptions = {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Accept': 'application/json',
+        'X-SessionId': `${this.userSession}`,
+      },
+      body: JSON.stringify(body)
+    };
+    if (url && requestOptions) {
+      fetch(url.href, requestOptions)
+        .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);
+      });
+    }
+  }
+  handleApplyClick() {
+    this.queryFired = true;
+  }
+  async componentWillLoad() {
+    if (this.gmVersion === 'gmcore') {
+      return this.determineUserActions();
+    }
+    else {
+      this.activeUserActions = ['termsandconditions'];
+      this.isLoading = false;
+    }
+    if (this.translationUrl.length > 2) {
+      await getTranslations(this.translationUrl);
+    }
+  }
+  componentDidRender() {
+    // start custom styling area
+    if (!this.limitStylingAppends && this.stylingContainer) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      if (this.clientStylingUrl)
+        this.setClientStylingURL();
+      this.limitStylingAppends = true;
+    }
+    // end custom styling area
+  }
+  render() {
+    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", { lang: this.lang, "translation-url": this.translationUrl, 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 is() { return "user-action-controller"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["user-action-controller.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["user-action-controller.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
+    },
+    "userSession": {
+      "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": "user-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
+    },
+    "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'"
+    },
+    "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
+    },
+    "submitButtonText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "the text of the button, if button is enabled"
+      },
+      "attribute": "submit-button-text",
+      "reflect": true
+    },
+    "userNoticeText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "the title of the action group"
+      },
+      "attribute": "user-notice-text",
+      "reflect": true
+    },
+    "gmVersion": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Select GM version"
+      },
+      "attribute": "gm-version",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "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": "''"
+    }
+  }; }
+  static get states() { return {
+    "queryFired": {},
+    "readyActionsCount": {},
+    "activeUserActions": {},
+    "userActionsValidated": {},
+    "receivedQueryResponses": {},
+    "limitStylingAppends": {},
+    "isLoading": {},
+    "mandatoryActionsChecked": {}
+  }; }
+  static get watchers() { return [{
+      "propName": "translationUrl",
+      "methodName": "handleNewTranslations"
+    }, {
+      "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';

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

@@ -0,0 +1,60 @@
+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'
+  },
+};
+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 && 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;
+};

package/dist/collection/utils/utils.js

@@ -0,0 +1,3 @@
+export function format(first, middle, last) {
+  return ((first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : ''));
+}

package/dist/components/index.d.ts

@@ -0,0 +1,26 @@
+/* UserActionController custom elements */
+
+import type { Components, JSX } from "../types/components";
+
+/**
+ * Used to manually set the base path where assets can be found.
+ * If the script is used as "module", it's recommended to use "import.meta.url",
+ * such as "setAssetPath(import.meta.url)". Other options include
+ * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
+ * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
+ * But do note that this configuration depends on how your script is bundled, or lack of
+ * bundling, and where your assets can be loaded from. Additionally custom bundling
+ * will have to ensure the static assets are copied to its build directory.
+ */
+export declare const setAssetPath: (path: string) => void;
+
+export interface SetPlatformOptions {
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
+
+export type { Components, JSX };
+
+export * from '../types';

package/dist/components/index.js

@@ -0,0 +1 @@
+export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';

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

@@ -0,0 +1,6 @@
+import { P as PlayerUserConsents$1, d as defineCustomElement$1 } from './player-user-consents2.js';
+
+const PlayerUserConsents = PlayerUserConsents$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PlayerUserConsents, defineCustomElement };