@everymatrix/user-action-controller 1.0.0 → 1.0.69

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

@@ -1,210 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-5b463836.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}.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}}";
-
-const UserActionController = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.closeButtonEvent = index.createEvent(this, "closeButtonClicked", 7);
-    /**
-     * Event name to be sent when the button is clicked
-     */
-    this.postMessageEvent = 'closeButtonClicked';
-    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(() => {
-      /**
-       * @TODO document this
-       */
-      window.postMessage({ type: 'WidgetNotification', data: {
-          type: 'success',
-          message: 'Consent update successfull!'
-        } }, window.location.href);
-    })
-      .catch((err) => {
-      /**
-       * @TODO document this
-       */
-      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;
-  }
-  handleClose() {
-    if (this.usePostmessage) {
-      window.postMessage({ type: this.postMessageEvent });
-    }
-    this.closeButtonEvent.emit();
-  }
-  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" }, this.showCloseButton &&
-      index.h("div", { class: "CloseButton", onClick: () => this.handleClose() }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "25", height: "25", fill: "currentColor", viewBox: "0 0 16 16" }, index.h("path", { d: "M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" }))), 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;