@everymatrix/user-action-controller 0.0.1

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

@@ -0,0 +1,137 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$3 } from './generic-user-consent2.js';
+import { d as defineCustomElement$2 } from './legislation-wrapper2.js';
+
+const userActionControllerCss = ":host{display:block}.QueryReferenceContainer{height:100%;width:100%}.UserConsentNotice{font-size:1.2rem;font-weight:200;text-align:center}.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}}";
+
+const UserActionController$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.consentTitles = {
+      termsandconditions: "Terms and Conditions",
+      sms: "SMS marketing",
+      emailmarketing: "Email marketing"
+    };
+    /**
+     * Which actions are required in order to activate the "Apply" button. Other actions are considered optional.
+     */
+    this.queryFired = false;
+    this.readyActionsCount = 0;
+    this.receivedQueryResponses = 0;
+    this.mandatoryActions = ['termsandconditions'];
+    this.requiredActionsCount = 0;
+    this.expectedQueryResponses = 0;
+    this.userActions = [];
+  }
+  determineMandatoryActions() {
+    let url = new URL(`${this.endpoint}v1/player/consentRequirements`);
+    return fetch(url.href)
+      .then(res => res.json())
+      .then(data => {
+      data.items.forEach(action => {
+        action.mustAccept && this.mandatoryActions.push(action.tagCode);
+      });
+    });
+  }
+  handleQueryResponse() {
+    if (this.receivedQueryResponses === this.expectedQueryResponses) {
+      this.updateUserConsents();
+    }
+  }
+  updateUserConsents() {
+    const url = new URL(`${this.endpoint}v1/player/${this.userId}/consent`);
+    let body = {
+      items: this.userActions
+    };
+    let options = {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Accept': 'application/json',
+        'X-SessionId': `${this.userSession}`,
+      },
+      body: JSON.stringify(body)
+    };
+    fetch(url.href, options)
+      .then(res => res.json())
+      // .then(data => {
+      //   console.log(data);
+      // })
+      .finally(() => {
+      window.postMessage({ type: "UserActionsCompleted" }, window.location.href);
+    });
+  }
+  handleApplyClick() {
+    this.queryFired = 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--;
+    }
+    // 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.receivedQueryResponses++;
+    }
+  }
+  // Returning a promise here will ensure that the fetch completes before we render the component
+  componentWillLoad() {
+    return this.determineMandatoryActions();
+  }
+  render() {
+    const activeUAList = this.activeUserActions.replace(/ /g, '').split(',');
+    this.requiredActionsCount = activeUAList.filter(action => this.mandatoryActions.includes(action)).length;
+    this.expectedQueryResponses = activeUAList.length;
+    return (h("div", { class: "QueryReferenceContainer" }, h("div", { class: "UserActionController" }, h("h2", { class: "UserConsentNotice" }, this.userNoticeText), h("legislation-wrapper", { "active-user-actions": this.activeUserActions }, activeUAList.map(item => (h("generic-user-consent", { slot: item, consentType: item, consentTitle: this.consentTitles[item], queried: this.queryFired, mandatory: this.mandatoryActions.includes(item) })))), this.includeSubmitButton &&
+      h("button", { class: "ConsentSubmitButton", disabled: this.readyActionsCount === this.requiredActionsCount ? false : true, onClick: () => this.handleApplyClick() }, this.submitButtonText))));
+  }
+  static get watchers() { return {
+    "receivedQueryResponses": ["handleQueryResponse"]
+  }; }
+  static get style() { return userActionControllerCss; }
+}, [1, "user-action-controller", {
+    "endpoint": [1],
+    "userSession": [1, "user-session"],
+    "userId": [1, "user-id"],
+    "includeSubmitButton": [4, "include-submit-button"],
+    "submitButtonText": [1, "submit-button-text"],
+    "userNoticeText": [1, "user-notice-text"],
+    "activeUserActions": [1, "active-user-actions"],
+    "queryFired": [32],
+    "readyActionsCount": [32],
+    "receivedQueryResponses": [32]
+  }, [[0, "userLegislationConsent", "userLegislationConsentHandler"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["user-action-controller", "generic-user-consent", "legislation-wrapper"];
+  components.forEach(tagName => { switch (tagName) {
+    case "user-action-controller":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, UserActionController$1);
+      }
+      break;
+    case "generic-user-consent":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "legislation-wrapper":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const UserActionController = UserActionController$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { UserActionController, defineCustomElement };

package/dist/esm/generic-user-consent_3.entry.js

@@ -0,0 +1,176 @@
+import { r as registerInstance, c as createEvent, h } from './index-9eef5ef8.js';
+
+const genericUserConsentCss = ":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 GenericUserConsent = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.userLegislationConsent = createEvent(this, "userLegislationConsent", 7);
+    /**
+     * 'true' when parent expects component to emit it's current value
+     */
+    this.queried = false;
+    /**
+     * the type of the consent, used to determine render details
+     */
+    this.consentType = '';
+    /**
+     * wether or not this consent is mandatory. Used for render details
+     */
+    this.mandatory = false;
+    /**
+     * 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 = '#';
+    /**
+     * the text content to be rendered by the component. Determined at runtime
+     */
+    this.textContent = '';
+    // 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."
+    };
+  }
+  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;
+  }
+  userLegislationConsentHandler() {
+    this.userLegislationConsent.emit({
+      type: this.consentType,
+      value: this.checkboxInput.checked
+    });
+  }
+  render() {
+    if (this.queried) {
+      this.userLegislationConsentHandler();
+    }
+    this.textContent = this.determineTextContent();
+    return (h("div", null, h("p", { class: "ConsentTitle" }, this.consentTitle), h("label", { class: "userConsent", htmlFor: "userConsent" }, h("input", { ref: el => this.checkboxInput = el, id: "userConsent", type: "checkbox", onInput: () => this.userLegislationConsentHandler() }), this.textContent, this.mandatory && h("span", { class: "MandatoryItem" }, "*"))));
+  }
+};
+GenericUserConsent.style = genericUserConsentCss;
+
+const legislationWrapperCss = ":host{display:block}";
+
+const LegislationWrapper = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    const activeUAList = this.activeUserActions.replace(/ /g, '').split(',');
+    return (h("div", { class: "LegislationWrapper" }, activeUAList.map(action => (h("slot", { name: action })))));
+  }
+};
+LegislationWrapper.style = legislationWrapperCss;
+
+const userActionControllerCss = ":host{display:block}.QueryReferenceContainer{height:100%;width:100%}.UserConsentNotice{font-size:1.2rem;font-weight:200;text-align:center}.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}}";
+
+const UserActionController = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.consentTitles = {
+      termsandconditions: "Terms and Conditions",
+      sms: "SMS marketing",
+      emailmarketing: "Email marketing"
+    };
+    /**
+     * Which actions are required in order to activate the "Apply" button. Other actions are considered optional.
+     */
+    this.queryFired = false;
+    this.readyActionsCount = 0;
+    this.receivedQueryResponses = 0;
+    this.mandatoryActions = ['termsandconditions'];
+    this.requiredActionsCount = 0;
+    this.expectedQueryResponses = 0;
+    this.userActions = [];
+  }
+  determineMandatoryActions() {
+    let url = new URL(`${this.endpoint}v1/player/consentRequirements`);
+    return fetch(url.href)
+      .then(res => res.json())
+      .then(data => {
+      data.items.forEach(action => {
+        action.mustAccept && this.mandatoryActions.push(action.tagCode);
+      });
+    });
+  }
+  handleQueryResponse() {
+    if (this.receivedQueryResponses === this.expectedQueryResponses) {
+      this.updateUserConsents();
+    }
+  }
+  updateUserConsents() {
+    const url = new URL(`${this.endpoint}v1/player/${this.userId}/consent`);
+    let body = {
+      items: this.userActions
+    };
+    let options = {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Accept': 'application/json',
+        'X-SessionId': `${this.userSession}`,
+      },
+      body: JSON.stringify(body)
+    };
+    fetch(url.href, options)
+      .then(res => res.json())
+      // .then(data => {
+      //   console.log(data);
+      // })
+      .finally(() => {
+      window.postMessage({ type: "UserActionsCompleted" }, window.location.href);
+    });
+  }
+  handleApplyClick() {
+    this.queryFired = 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--;
+    }
+    // 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.receivedQueryResponses++;
+    }
+  }
+  // Returning a promise here will ensure that the fetch completes before we render the component
+  componentWillLoad() {
+    return this.determineMandatoryActions();
+  }
+  render() {
+    const activeUAList = this.activeUserActions.replace(/ /g, '').split(',');
+    this.requiredActionsCount = activeUAList.filter(action => this.mandatoryActions.includes(action)).length;
+    this.expectedQueryResponses = activeUAList.length;
+    return (h("div", { class: "QueryReferenceContainer" }, h("div", { class: "UserActionController" }, h("h2", { class: "UserConsentNotice" }, this.userNoticeText), h("legislation-wrapper", { "active-user-actions": this.activeUserActions }, activeUAList.map(item => (h("generic-user-consent", { slot: item, consentType: item, consentTitle: this.consentTitles[item], queried: this.queryFired, mandatory: this.mandatoryActions.includes(item) })))), this.includeSubmitButton &&
+      h("button", { class: "ConsentSubmitButton", disabled: this.readyActionsCount === this.requiredActionsCount ? false : true, onClick: () => this.handleApplyClick() }, this.submitButtonText))));
+  }
+  static get watchers() { return {
+    "receivedQueryResponses": ["handleQueryResponse"]
+  }; }
+};
+UserActionController.style = userActionControllerCss;
+
+export { GenericUserConsent as generic_user_consent, LegislationWrapper as legislation_wrapper, UserActionController as user_action_controller };