@everymatrix/general-registration 1.10.4 → 1.10.10

package/dist/components/general-registration.js

@@ -1,4 +1,4 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { d as defineCustomElement$b } from './checkbox-input2.js';
 import { d as defineCustomElement$a } from './date-input2.js';
 import { d as defineCustomElement$9 } from './email-input2.js';
@@ -15,7 +15,7 @@ const SUPPORTED_LANGUAGES = ['ro', 'en'];
 const TRANSLATIONS = {
   en: {
     dateError: 'The selected date should be between {min} and {max}',
-    numberLengthError: 'The number should be between ${min} and ${max}',
+    numberLengthError: 'The number should be between {min} and {max}',
     lengthError: `The length should be between {minLength} and {maxLength}`,
     requiredError: 'This input is required.',
     nextButton: 'Next',
@@ -39,240 +39,56 @@ const translate = (key, customLang, values) => {
   return translation;
 };
 
-const generalRegistrationCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.registration{display:flex;flex-direction:column;gap:20px;width:100%;height:100%}.registration__form{display:grid;grid-template-columns:repeat(2, minmax(min-content, 1fr));column-gap:65px;row-gap:30px;justify-items:stretch;align-content:flex-start;overflow:scroll;width:100%;height:100%}.registration__buttons-wrapper{display:flex;flex-direction:row-reverse;justify-content:space-between}.registration__button{background-color:#e69200;border-radius:30px;text-transform:uppercase;padding:10px 50px;border:none;box-shadow:0px 2px 2px rgba(0, 0, 0, 0.5)}.registration__button--disabled{background-color:grey}.registration__button--done{background-color:#176317}";
+const generalRegistrationCss = "*,\n*::before,\n*::after {\n  padding: 0;\n  margin: 0;\n  box-sizing: border-box;\n}\n\n.registration {\n  font-family: \"Roboto\";\n  font-style: normal;\n  font-family: sans-serif;\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n  width: 100%;\n  height: 100%;\n  container-type: inline-size;\n}\n.registration__form {\n  display: grid;\n  grid-template-columns: repeat(1, 1fr);\n  gap: 40px;\n  justify-items: stretch;\n  align-content: flex-start;\n  overflow: auto;\n  width: 100%;\n  height: 100%;\n}\n.registration__buttons-wrapper {\n  display: flex;\n  flex-direction: row-reverse;\n  justify-content: space-around;\n  align-items: center;\n}\n.registration__button {\n  text-transform: uppercase;\n  width: 250px;\n  height: 40px;\n  border-radius: 3px;\n}\n.registration__button:hover {\n  opacity: 0.8;\n}\n.registration__button:active {\n  opacity: 1;\n}\n.registration__button--next {\n  color: #FFFFFF;\n  background-color: #B0B0B0;\n  border: none;\n}\n.registration__button--back {\n  color: #B0B0B0;\n  background-color: #FFFFFF;\n  border: 2px solid #B0B0B0;\n}\n.registration__button--first-step {\n  display: none;\n}\n\n@container (min-width: 450px) {\n  .registration__form {\n    grid-template-columns: repeat(2, 1fr);\n  }\n\n  .registration__buttons-wrapper {\n    flex-direction: column;\n    gap: 15px;\n  }\n}";
 
 const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.data = {
-      "type": "default",
-      "content": {
-        "step": "step1",
-        "fields": [
-          {
-            "name": "firstName",
-            "displayName": "Username",
-            "defaultValue": null,
-            "validate": {
-              "mandatory": true,
-              "minLength": 3,
-              "maxLength": 20
-            },
-            "autofill": false
-          },
-          {
-            "name": "lastName",
-            "displayName": "Last name",
-            "defaultValue": null,
-            "validate": {
-              "mandatory": true,
-              "minLength": 3,
-              "maxLength": 20
-            },
-          },
-          {
-            "name": "telephone",
-            "displayName": "Telephone",
-            "action": "GET https://demo-api.stage.norway.everymatrix.com/v1/player/phonecodes",
-            "defaultValue": null,
-            "validate": {
-              "mandatory": true
-            },
-            "autofill": false,
-            "inputType": "tel"
-          },
-          {
-            "name": "dateOfBirth",
-            "displayName": "Date of Birth",
-            "defaultValue": null,
-            "validate": {
-              "min": "2022-05-01",
-              "max": "2022-05-29",
-              "mandatory": true,
-            },
-            "inputType": "datetime"
-          },
-          {
-            "name": "email",
-            "displayName": "Email",
-            "defaultValue": 'a@a.com',
-            "validate": {
-              "mandatory": true,
-              "custom": [
-                {
-                  "rule": "regex",
-                  "pattern": "^[a-zA-Z0-9._%+-]+@[a-zA-Z-9.-]+\\.[a-zA-Z]{2,3}$",
-                  "errorMessage": "Please enter a valid email address"
-                }
-              ]
-            },
-            "inputType": "email"
-          },
-          {
-            "name": "password",
-            "displayName": "Password",
-            "defaultValue": null,
-            "validate": {
-              "mandatory": true,
-              "minLength": 3,
-              "maxLength": 20,
-              "type": "password",
-              "custom": [
-                {
-                  "rule": "regex",
-                  "pattern": "(?=.*\\d+)(?=.*[A-Za-z]+).{8,20}",
-                  "errorMessage": "Password must contain at least 1 letter and 1 digit, and its minimal length is 8."
-                }
-              ]
-            },
-            "inputType": "password"
-          },
-          {
-            "name": "email",
-            "displayName": "Email",
-            "defaultValue": null,
-            "validate": {
-              "mandatory": true,
-              "type": "email",
-              "custom": [
-                {
-                  "rule": "unique-email",
-                  "errorMessage": "Please check your email"
-                },
-                {
-                  "rule": "regex",
-                  "pattern": "^[a-zA-Z0-9._%+-]+@[a-zA-Z-9.-]+\\.[a-zA-Z]{2,3}$",
-                  "errorMessage": "Please enter a valid email address"
-                },
-                {
-                  "rule": "duplicate-input",
-                  "displayName": "pt al doilea input gen: Confirm Email",
-                  "errorMessage": "Different Email! Pls."
-                }
-              ]
-            }
-          },
-          {
-            "name": "termsAndConditions",
-            "displayName": "Terms and Conditions",
-            "validate": {
-              "mandatory": true,
-              "type": "boolean"
-            },
-            "inputType": "checkbox"
-          },
-          {
-            "name": "pepCheck",
-            "validate": {
-              "mandatory": true
-            },
-            "inputType": "checkbox"
-          },
-          {
-            "name": "gender",
-            "data": {
-              "values": [
-                {
-                  "label": "🍆",
-                  "value": "m"
-                },
-                {
-                  "label": "🍑",
-                  "value": "f"
-                }
-              ]
-            },
-            "validate": {
-              "mandatory": true
-            },
-            "inputType": "radio"
-          },
-          {
-            "name": "dateOfBirth",
-            "validate": {
-              "mandatory": true,
-              "custom": [
-                {
-                  "rule": "regex",
-                  "pattern": "(?:19\\d{2}|20[01][0-9]|2020)[-/.](?:0[1-9]|1[012])[-/.](?:0[1-9]|[12][0-9]|3[01])",
-                  "errorMessage": "Invalid date format"
-                },
-                {
-                  "rule": "min-18-years",
-                  "errorMessage": "Not old enough to ride the roller coaster"
-                }
-              ]
-            }
-          },
-          {
-            "name": "city",
-            "displayName": "Cities",
-            "action": null,
-            "data": {
-              "values": [
-                {
-                  "label": "Budapest",
-                  "value": "Budapest"
-                },
-                {
-                  "label": "Debrecen",
-                  "value": "Debrecen"
-                },
-                {
-                  "label": "Miskolc",
-                  "value": "Miskolc"
-                },
-                {
-                  "label": "Szeged",
-                  "value": "Szeged"
-                },
-                {
-                  "label": "Zuglo",
-                  "value": "Zuglo"
-                }
-              ]
-            },
-            "validate": {
-              "mandatory": true
-            },
-            "inputType": "dropdown"
-          },
-          {
-            "name": "city",
-            "displayName": "Cities",
-            "data": null,
-            "action": "GET https://demo-api.stage.norway.everymatrix.com/v1/player/countries",
-            "validate": {
-              "mandatory": true
-            },
-            "inputType": "dropdown"
-          }
-        ],
-        "actions": [
-          "get-next-step",
-          "some-async-action-before-submitting",
-          "submit-step-data"
-        ]
-      }
-    };
+    this.registrationWidgetLoaded = createEvent(this, "registrationWidgetLoaded", 7);
+    this.registrationStepUpdated = createEvent(this, "registrationStepUpdated", 7);
     /**
     * Currently selected language
     */
     this.language = 'en';
+    /**
+     * Client custom styling via string
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url content
+     */
+    this.clientStylingUrl = '';
     this.emitValue = false;
     this.listOfInputs = [];
     this.isLoading = true;
+    this.limitStylingAppends = false;
     this.listOfInputValues = [];
     this.listOfActions = [];
-    this.steps = [];
+    this.indexStep = 0;
     this.registrationStepsState = {
       regId: null
     };
+    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) => {
+        cssFile.innerHTML = data;
+        setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
+      });
+    };
   }
-  logger() {
-    console.log(this.registrationStep);
+  sendStep() {
+    this.registrationStepUpdated.emit(this.registrationStep);
+    window.postMessage({ type: 'registrationStepUpdated', step: this.registrationStep }, window.location.href);
   }
   checkInputsValidityHandler(event) {
     // Set isValid state of the input in the list.
@@ -281,25 +97,30 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     this.isFormValid = !this.getInvalidStatus(this.listOfInputs);
   }
   getInputsValueHandler(event) {
-    this.listOfInputValues.find(input => input.name == event.detail.name).value = event.detail.value;
-    /*Note to self: -- what about the inputs that received a default value.
-    They will send an undefined because there was no input
-    Handle it somehow!!!!!, one idea can be that value equals defaultValue but dependes on how the api wants stuff*/
+    this.listOfInputValues.find(input => {
+      if (input.name == event.detail.name) {
+        input.value = event.detail.value;
+      }
+    });
     this.stepsStateMachine({ event: 'set', type: 'values' });
   }
   componentWillLoad() {
-    // const mockCall = Promise.resolve(this.data);
-    // return mockCall.then((data) => {
-    //   this.listOfInputs = data.content.fields.map((field) => {
-    //     this.isLoading = false;
-    //     return { ...field, isValid: false };
-    //   });
-    // });
     return this.getRegisterConfig().then((config) => {
       this.formatConfig(config);
       this.stepsStateMachine({ event: 'set', type: 'inputs' });
     });
   }
+  componentDidRender() {
+    if (!this.limitStylingAppends && this.stylingContainer) {
+      this.setClientStyling();
+      this.setClientStylingURL();
+      this.limitStylingAppends = true;
+    }
+  }
+  componentDidLoad() {
+    this.registrationWidgetLoaded.emit();
+    window.postMessage({ type: 'registrationWidgetLoaded' }, window.location.href);
+  }
   nextHandler(e) {
     e.preventDefault();
     // Trigger events in subwidgets.
@@ -308,8 +129,8 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
   }
   backHandler(e) {
     e.preventDefault();
-    this.steps.pop();
-    this.registrationStep = this.steps.at(-1);
+    this.isLastStep = false;
+    this.registrationStep = this.stepChange('decrement');
     this.stepsStateMachine({ event: 'get', type: 'inputs' });
     this.stepsStateMachine({ event: 'get', type: 'values' });
   }
@@ -318,13 +139,11 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
       case 'set':
         if (state.type == 'inputs') {
           this.registrationStepsState[this.registrationStep].fields = this.listOfInputs;
+          this.registrationStepsState[this.registrationStep].actions = this.listOfActions;
         }
         if (state.type == 'values') {
           this.registrationStepsState[this.registrationStep].registerUserData = this.listOfInputValues.reduce((acc, curr) => {
-            // @TODO remove this once GMCore is smart enough to understand the concept of UNIQUE KEYS
-            if (curr.value != null) {
-              acc[curr.name] = curr.value;
-            }
+            acc[curr.name] = { value: curr.value, isDuplicate: curr.isDuplicate };
             return acc;
           }, {});
         }
@@ -336,17 +155,19 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
           return;
         if (state.type == 'inputs') {
           this.listOfInputs = this.registrationStepsState[this.registrationStep].fields;
+          this.listOfActions = this.registrationStepsState[this.registrationStep].actions;
         }
         if (state.type == 'values') {
           const savedValues = savedUserData[this.registrationStep].registerUserData;
           this.listOfInputValues = Object.keys(savedValues).map(name => {
-            return { name, value: savedValues[name] };
+            return { name, value: savedValues[name].value, isDuplicate: savedValues[name].isDuplicate };
           });
           // Give to each field the user input as the default value.
           this.listOfInputValues.forEach(inputValue => {
             const input = this.listOfInputs.find(input => input.name === inputValue.name);
             if (input) {
               input.defaultValue = inputValue.value;
+              console.log(input);
             }
           });
         }
@@ -356,9 +177,6 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
   getRegisterConfig(registrationID) {
     const url = new URL(`${this.endpoint}/v1/player/legislation/registration/config`);
     const headers = new Headers();
-    // headers.append('X-Tenant-ID', this.tenantId);
-    // headers.append('X-Client-ID', this.clientId);
-    // headers.append('X-Api-Key', this.apiKey);
     headers.append('Content-Type', 'application/json');
     headers.append('Accept', 'application/json');
     if (registrationID) {
@@ -387,9 +205,15 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     const url = new URL(`${this.endpoint}/v1/player/legislation/registration/step`);
     const registerStep = {
       registrationId: this.registrationID,
-      registerUserDto: this.listOfInputValues.reduce((acc, curr) => {
-        // @TODO remove this once GMCore is smart enough to understand the concept of UNIQUE KEYS
-        if (curr.value != null) {
+      registerUserDto: this.listOfInputValues
+        .filter(input => !input.isDuplicate)
+        .reduce((acc, curr) => {
+        // Special case for "Mobile" as it needs to be split in two values -- API expects it this way.
+        if (curr.name == "Mobile") {
+          acc['MobilePrefix'] = curr.value.split('|')[0];
+          acc[curr.name] = curr.value.split('|')[1];
+        }
+        else {
           acc[curr.name] = curr.value;
         }
         return acc;
@@ -397,9 +221,6 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
       step: this.registrationStep,
     };
     const headers = new Headers();
-    // headers.append('X-Tenant-ID', this.tenantId);
-    // headers.append('X-Client-ID', this.clientId);
-    // headers.append('X-Api-Key', this.apiKey);
     headers.append('Content-Type', 'application/json');
     headers.append('Accept', 'application/json');
     const options = {
@@ -420,12 +241,22 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
         this.setRegister();
       }
       else {
-        this.getRegisterConfig(this.registrationID).then((config) => {
-          // Format the new step config.
-          this.formatConfig(config);
-          // Set it in local storage
-          this.stepsStateMachine({ event: 'set', type: 'inputs' });
-        });
+        // After sending the current step, increment and check if the next one is in state.
+        this.registrationStep = this.stepChange('increment');
+        // If step is present in state do NOT fetch the next config.
+        if (Object.keys(this.registrationStepsState).find(key => key == this.registrationStep)) {
+          // Use the one from state
+          this.stepsStateMachine({ event: 'get', type: 'inputs' });
+          this.stepsStateMachine({ event: 'get', type: 'values' });
+        }
+        else {
+          this.getRegisterConfig(this.registrationID).then((config) => {
+            // Format the new step config.
+            this.formatConfig(config);
+            // Set it in local storage.
+            this.stepsStateMachine({ event: 'set', type: 'inputs' });
+          });
+        }
       }
     })
       .catch((err) => {
@@ -439,19 +270,8 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     this.isLoading = true;
     const url = new URL(`${this.endpoint}/v1/player/legislation/register`);
     const headers = new Headers();
-    // headers.append('X-Tenant-ID', this.tenantId);
-    // headers.append('X-Client-ID', this.clientId);
-    // headers.append('X-Api-Key', this.apiKey);
     headers.append('Content-Type', 'application/json');
     headers.append('Accept', 'application/json');
-    // const registerStep = {
-    //   registrationId: this.registrationID,
-    //   registerUserDto: this.listOfInputValues.reduce((acc, curr) => {
-    //     acc[curr.name] = curr.value;
-    //     return acc;
-    //   }, {}),
-    //   step: this.registrationStep,
-    // };
     const options = {
       method: 'PUT',
       body: JSON.stringify({ registrationId: this.registrationID }),
@@ -478,59 +298,77 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
   }
   formatConfig(config) {
     // Populate the list of inputs and set as invalid in the beginning
-    this.listOfInputs = config.content.fields.map((field) => {
-      return Object.assign(Object.assign({}, field), { isValid: false });
+    this.listOfInputs = config.content.fields.flatMap((field) => {
+      // Special case for inputs that need to be duplicated.
+      const duplicateInputRule = field.validate.custom.find(customRule => customRule.rule === 'duplicate-input');
+      const inputElement = Object.assign(Object.assign({}, field), { isValid: false });
+      if (duplicateInputRule) {
+        const duplicateInput = Object.assign(Object.assign({}, field), { name: `${field.name}Duplicate`, displayName: duplicateInputRule.displayName, isValid: false, isDuplicateInput: true });
+        return [inputElement, duplicateInput];
+      }
+      else {
+        return [inputElement];
+      }
     });
     // Populate the list of inputs values and set as null in the beginning
-    this.listOfInputValues = config.content.fields.map(field => {
-      return { name: field.name, value: null };
+    this.listOfInputValues = this.listOfInputs.map(field => {
+      return { name: field.name, value: null, isDuplicate: field.isDuplicateInput || false };
     });
     // Set the list of actions
     this.listOfActions = config.content.actions.map(action => action);
     this.isLastStep = this.listOfActions.some(action => action == '/register');
     this.registrationID = config.content.registrationID;
     this.registrationStep = config.content.step;
-    this.steps.push(this.registrationStep);
     // Add the step to the registrationStepsData
     this.registrationStepsState.regId = this.registrationID;
     if (!this.registrationStepsState[this.registrationStep]) {
       this.registrationStepsState[this.registrationStep] = {
         fields: [],
-        registerUserData: {}
+        registerUserData: {},
+        actions: []
       };
     }
   }
+  stepChange(action) {
+    const stepNum = parseInt(this.registrationStep.replace('Step', ''));
+    if (action === 'increment') {
+      return 'Step' + (stepNum + 1);
+    }
+    if (action === 'decrement') {
+      return 'Step' + (stepNum - 1);
+    }
+  }
   getInvalidStatus(listOfInputs) {
     return listOfInputs.filter(input => input.isValid == false).length > 0;
   }
   renderInputs() {
-    return (this.listOfInputs.map(input => h("general-input", { type: input.inputType, name: input.name, displayName: input.displayName, validation: input.validate, action: input.action || null, options: input.data ? input.data.values : [], defaultValue: input.defaultValue, autofilled: input.autofill, emitValue: this.emitValue, language: this.language })));
+    return (this.listOfInputs.map(input => h("general-input", { type: input.inputType, name: input.name, displayName: input.displayName, validation: input.validate, action: input.action || null, options: input.data ? input.data.values : [], defaultValue: input.defaultValue, autofilled: input.autofill, emitValue: this.emitValue, language: this.language, isDuplicateInput: input.isDuplicateInput })));
   }
   ;
   renderButtons() {
-    return (h("div", { class: 'registration__buttons-wrapper' }, h("button", { class: `registration__button ${this.isLastStep ? 'registration__button--done' : ''}`, type: 'submit', form: 'RegistrationForm', onClick: (e) => this.nextHandler(e) }, this.isLastStep ? translate('doneButton', this.language) : translate('nextButton', this.language)), this.registrationStep !== 'Step1' && h("button", { class: 'registration__button', onClick: (e) => this.backHandler(e) }, translate('backButton', this.language))));
+    return (h("div", { class: 'registration__buttons-wrapper' }, h("button", { class: `registration__button registration__button--next`, type: 'submit', form: 'RegistrationForm', onClick: (e) => this.nextHandler(e) }, this.isLastStep ? translate('doneButton', this.language) : translate('nextButton', this.language)), h("button", { class: `registration__button registration__button--back ${this.registrationStep == 'Step1' ? 'registration__button--first-step' : ''}`, onClick: (e) => this.backHandler(e) }, translate('backButton', this.language))));
   }
   render() {
     if (this.isLoading) {
       return h("p", null, "Please wait, loading ...");
     }
-    return (h("div", { class: 'registration' }, h("form", { action: '.', id: 'RegistrationForm', class: 'registration__form' }, this.renderInputs()), this.renderButtons()));
+    return (h("div", { class: `registration  registration__${this.registrationStep}`, ref: el => this.stylingContainer = el }, h("form", { action: '.', id: 'RegistrationForm', class: 'registration__form' }, this.renderInputs()), this.renderButtons()));
   }
   static get watchers() { return {
-    "registrationStep": ["logger"]
+    "registrationStep": ["sendStep"]
   }; }
   static get style() { return generalRegistrationCss; }
 }, [1, "general-registration", {
     "endpoint": [1],
-    "tenantId": [1, "tenant-id"],
-    "clientId": [1, "client-id"],
-    "apiKey": [1, "api-key"],
     "language": [1],
+    "clientStyling": [1, "client-styling"],
+    "clientStylingUrl": [1, "client-styling-url"],
     "errorMessage": [32],
     "emitValue": [32],
     "isFormValid": [32],
     "listOfInputs": [32],
     "isLoading": [32],
+    "limitStylingAppends": [32],
     "registrationStep": [32]
   }, [[0, "sendValidityState", "checkInputsValidityHandler"], [0, "sendInputValue", "getInputsValueHandler"]]]);
 function defineCustomElement$1() {