@everymatrix/user-action-controller 0.0.1

package/dist/cjs/index.cjs.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-4a3038bd.js');
+
+/*
+ Stencil Client Patch Esm v2.15.2 | MIT Licensed | https://stenciljs.com
+ */
+const patchEsm = () => {
+    return index.promiseResolve();
+};
+
+const defineCustomElements = (win, options) => {
+  if (typeof window === 'undefined') return Promise.resolve();
+  return patchEsm().then(() => {
+  return index.bootstrapLazy([["generic-user-consent_3.cjs",[[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"]]],[1,"generic-user-consent",{"queried":[4],"consentType":[1,"consent-type"],"mandatory":[4],"consentTitle":[1,"consent-title"],"tcLink":[1,"tc-link"],"privacyLink":[1,"privacy-link"],"textContent":[32]}],[1,"legislation-wrapper",{"activeUserActions":[1,"active-user-actions"]}]]]], options);
+  });
+};
+
+exports.defineCustomElements = defineCustomElements;

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

@@ -0,0 +1,19 @@
+'use strict';
+
+const index = require('./index-4a3038bd.js');
+
+/*
+ Stencil Client Patch Browser v2.15.2 | MIT Licensed | https://stenciljs.com
+ */
+const patchBrowser = () => {
+    const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('user-action-controller.cjs.js', document.baseURI).href));
+    const opts = {};
+    if (importMeta !== '') {
+        opts.resourcesUrl = new URL('.', importMeta).href;
+    }
+    return index.promiseResolve(opts);
+};
+
+patchBrowser().then(options => {
+  return index.bootstrapLazy([["generic-user-consent_3.cjs",[[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"]]],[1,"generic-user-consent",{"queried":[4],"consentType":[1,"consent-type"],"mandatory":[4],"consentTitle":[1,"consent-title"],"tcLink":[1,"tc-link"],"privacyLink":[1,"privacy-link"],"textContent":[32]}],[1,"legislation-wrapper",{"activeUserActions":[1,"active-user-actions"]}]]]], options);
+});

package/dist/collection/collection-manifest.json

@@ -0,0 +1,25 @@
+{
+  "entries": [
+    "./components/user-action-controller/user-action-controller.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "2.15.2",
+    "typescriptVersion": "4.5.4"
+  },
+  "collections": [
+    {
+      "name": "@everymatrix/generic-user-consent",
+      "tags": [
+        "generic-user-consent"
+      ]
+    },
+    {
+      "name": "@everymatrix/legislation-wrapper",
+      "tags": [
+        "legislation-wrapper"
+      ]
+    }
+  ],
+  "bundles": []
+}

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

@@ -0,0 +1,48 @@
+: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;
+  }
+}

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

@@ -0,0 +1,237 @@
+import { Component, h, Prop, Listen, State, Watch } from '@stencil/core';
+import '@everymatrix/legislation-wrapper';
+import '@everymatrix/generic-user-consent';
+export class UserActionController {
+  constructor() {
+    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 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": false
+    },
+    "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": false
+    },
+    "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": false
+    },
+    "includeSubmitButton": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "wether or not to include the submit button (in case we want to compose a different )"
+      },
+      "attribute": "include-submit-button",
+      "reflect": false
+    },
+    "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": false
+    },
+    "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": false
+    },
+    "activeUserActions": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "which user action widgets are included"
+      },
+      "attribute": "active-user-actions",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "queryFired": {},
+    "readyActionsCount": {},
+    "receivedQueryResponses": {}
+  }; }
+  static get watchers() { return [{
+      "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/utils.js

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

package/dist/components/generic-user-consent.js

@@ -0,0 +1,6 @@
+import { G as GenericUserConsent$1, d as defineCustomElement$1 } from './generic-user-consent2.js';
+
+const GenericUserConsent = GenericUserConsent$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { GenericUserConsent, defineCustomElement };

package/dist/components/generic-user-consent2.js

@@ -0,0 +1,93 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+
+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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    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" }, "*"))));
+  }
+  static get style() { return genericUserConsentCss; }
+}, [1, "generic-user-consent", {
+    "queried": [4],
+    "consentType": [1, "consent-type"],
+    "mandatory": [4],
+    "consentTitle": [1, "consent-title"],
+    "tcLink": [1, "tc-link"],
+    "privacyLink": [1, "privacy-link"],
+    "textContent": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["generic-user-consent"];
+  components.forEach(tagName => { switch (tagName) {
+    case "generic-user-consent":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, GenericUserConsent);
+      }
+      break;
+  } });
+}
+
+export { GenericUserConsent as G, defineCustomElement as d };

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/legislation-wrapper.js

@@ -0,0 +1,6 @@
+import { L as LegislationWrapper$1, d as defineCustomElement$1 } from './legislation-wrapper2.js';
+
+const LegislationWrapper = LegislationWrapper$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { LegislationWrapper, defineCustomElement };

package/dist/components/legislation-wrapper2.js

@@ -0,0 +1,33 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const legislationWrapperCss = ":host{display:block}";
+
+const LegislationWrapper = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    const activeUAList = this.activeUserActions.replace(/ /g, '').split(',');
+    return (h("div", { class: "LegislationWrapper" }, activeUAList.map(action => (h("slot", { name: action })))));
+  }
+  static get style() { return legislationWrapperCss; }
+}, [1, "legislation-wrapper", {
+    "activeUserActions": [1, "active-user-actions"]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["legislation-wrapper"];
+  components.forEach(tagName => { switch (tagName) {
+    case "legislation-wrapper":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, LegislationWrapper);
+      }
+      break;
+  } });
+}
+
+export { LegislationWrapper as L, defineCustomElement as d };

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

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UserActionController extends Components.UserActionController, HTMLElement {}
+export const UserActionController: {
+  prototype: UserActionController;
+  new (): UserActionController;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;