@everymatrix/user-action-controller 0.0.1

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

@@ -0,0 +1,182 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-4a3038bd.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) {
+    index.registerInstance(this, hostRef);
+    this.userLegislationConsent = index.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' ?
+      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;
+  }
+  userLegislationConsentHandler() {
+    this.userLegislationConsent.emit({
+      type: this.consentType,
+      value: this.checkboxInput.checked
+    });
+  }
+  render() {
+    if (this.queried) {
+      this.userLegislationConsentHandler();
+    }
+    this.textContent = this.determineTextContent();
+    return (index.h("div", null, 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" }, "*"))));
+  }
+};
+GenericUserConsent.style = genericUserConsentCss;
+
+const legislationWrapperCss = ":host{display:block}";
+
+const LegislationWrapper = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    const activeUAList = this.activeUserActions.replace(/ /g, '').split(',');
+    return (index.h("div", { class: "LegislationWrapper" }, activeUAList.map(action => (index.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) {
+    index.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 (index.h("div", { class: "QueryReferenceContainer" }, index.h("div", { class: "UserActionController" }, index.h("h2", { class: "UserConsentNotice" }, this.userNoticeText), index.h("legislation-wrapper", { "active-user-actions": this.activeUserActions }, activeUAList.map(item => (index.h("generic-user-consent", { slot: item, consentType: item, consentTitle: this.consentTitles[item], queried: this.queryFired, mandatory: this.mandatoryActions.includes(item) })))), this.includeSubmitButton &&
+      index.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;
+
+exports.generic_user_consent = GenericUserConsent;
+exports.legislation_wrapper = LegislationWrapper;
+exports.user_action_controller = UserActionController;