@everymatrix/player-lugas-limit 1.10.6 → 1.10.8

package/dist/cjs/{index-034179c3.js → index-87beb026.js}

@@ -940,6 +940,7 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
                 hostRef.$flags$ &= ~8 /* isConstructingInstance */;
             }
             endNewInstance();
+            fireConnectedCallback(hostRef.$lazyInstance$);
         }
         if (Cstr.style) {
             // this component has styles but we haven't registered them yet
@@ -968,6 +969,11 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
         schedule();
     }
 };
+const fireConnectedCallback = (instance) => {
+    {
+        safeCall(instance, 'connectedCallback');
+    }
+};
 const connectedCallback = (elm) => {
     if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
         const hostRef = getHostRef(elm);
@@ -1006,6 +1012,10 @@ const connectedCallback = (elm) => {
                 initializeComponent(elm, hostRef, cmpMeta);
             }
         }
+        else {
+            // fire off connectedCallback() on component instance
+            fireConnectedCallback(hostRef.$lazyInstance$);
+        }
         endConnected();
     }
 };

package/dist/cjs/loader.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-034179c3.js');
+const index = require('./index-87beb026.js');
 
 /*
  Stencil Client Patch Esm v2.15.2 | MIT Licensed | https://stenciljs.com
@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["player-lugas-limit.cjs",[[1,"player-lugas-limit",{"userid":[1],"session":[1],"endpoint":[1],"currency":[1],"flow":[1],"amountMinMax":[1,"amount-min-max"],"amount":[1],"lang":[1],"clientStyling":[1,"client-styling"],"clientStylingUrlContent":[1,"client-styling-url-content"],"translationurl":[1],"validation":[32],"kyc":[32],"dropDown":[32],"isLoading":[32],"hasErrors":[32],"inputValue":[32],"isButtonDisabled":[32],"crossProviders":[32],"invalidInput":[32],"stylingAppends":[32],"isVisible":[32],"userAmount":[32],"operatorDepositLimitAmount":[32]}]]]], options);
+  return index.bootstrapLazy([["player-lugas-limit.cjs",[[1,"player-lugas-limit",{"userid":[1],"session":[1],"endpoint":[1],"currency":[1],"flow":[1],"amountMinMax":[1,"amount-min-max"],"amount":[1],"lang":[1],"clientStyling":[1,"client-styling"],"clientStylingUrlContent":[1,"client-styling-url-content"],"translationUrl":[1,"translation-url"],"validation":[32],"kyc":[32],"dropDown":[32],"isLoading":[32],"hasErrors":[32],"inputValue":[32],"isButtonDisabled":[32],"crossProviders":[32],"invalidInput":[32],"stylingAppends":[32],"userAmount":[32],"operatorDepositLimitAmount":[32]}]]]], options);
   });
 };
 

package/dist/cjs/player-lugas-limit.cjs.entry.js

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-034179c3.js');
+const index = require('./index-87beb026.js');
 
 const DEFAULT_LANGUAGE = 'en';
 const SUPPORTED_LANGUAGES = ['ro', 'en'];
-const TRANSLATIONS = {
+let TRANSLATIONS = {
   en: {
     loading: 'Loading, please wait ...',
     error: 'It was an error while trying to fetch the data',
@@ -104,6 +104,18 @@ const TRANSLATIONS = {
     softMigrationP3: 'Do you want to set a new limit or confirm the existing limit ',
   }
 };
+const getTranslations = (url) => {
+  // fetch url, get the data, replace the TRANSLATIONS content
+  fetch(url)
+    .then((res) => res.json())
+    .then((data) => {
+    Object.keys(data).forEach((item) => {
+      for (let key in data[item]) {
+        TRANSLATIONS[item][key] = data[item][key];
+      }
+    });
+  });
+};
 const translate = (key, customLang, values) => {
   const lang = customLang;
   let translation = TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
@@ -116,12 +128,13 @@ const translate = (key, customLang, values) => {
   return translation;
 };
 
-const playerLugasLimitCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");\n:host {\n  font-family: \"Roboto\", sans-serif;\n}\n\n.ModalContainer {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  background-color: rgba(0, 0, 0, 0.5);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 12px;\n  container-type: inline-size;\n}\n.ModalContainer .Container {\n  position: fixed;\n  top: 30vh;\n  width: 25%;\n  background: #fff;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  border-radius: 4px;\n  transform: scale(1.1);\n}\n.ModalContainer .ModalHeader {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background-color: #ffffff;\n  border-radius: 4px 4px 0px 0px;\n  padding: 10px;\n}\n.ModalContainer .ModalBody {\n  background: #F5F6F6;\n  padding: 16px 10px 10px;\n  container-type: inline-size;\n  border-radius: 4px;\n}\n.ModalContainer .ModalBody hr {\n  border: 1px solid rgba(0, 0, 0, 0.1);\n  margin: 12px 0px;\n}\n.ModalContainer .ModalBody p {\n  margin: 0;\n}\n.ModalContainer .ModalBody .VallidatorContainer {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n}\n.ModalContainer .ModalBody .VallidatorContainer .CrossProvider {\n  background-color: #404350;\n  color: white;\n  margin: 5px 0px;\n  padding: 10px 15px;\n  border-radius: 2px;\n}\n.ModalContainer .ModalBody .VallidatorContainer .CrossProvider svg {\n  position: absolute;\n  width: 5px;\n  height: 28px;\n}\n.ModalContainer .ModalBody .VallidatorContainer .CrossProvider p {\n  padding-left: 15px;\n}\n.ModalContainer .ModalBody .VallidatorContainer .Paragraphs {\n  padding: 5px 0px;\n}\n.ModalContainer .ModalBody .VallidatorContainer .Paragraphs p {\n  padding: 5px 0px;\n}\n.ModalContainer .ModalBody .VallidatorContainer .ContainerButtons {\n  display: flex;\n  justify-content: space-around;\n  gap: 10px;\n}\n.ModalContainer .ModalBody .VallidatorContainer .ContainerButtons .FirstButton {\n  background-color: #ffffff;\n  font-weight: bold;\n  color: #002554;\n  font-size: 10px;\n  border: 2.5px solid #dee2e6;\n  width: 100%;\n  cursor: pointer;\n}\n.ModalContainer .ModalBody .VallidatorContainer .ContainerButtons .SecondButton {\n  background-color: #6BB816;\n  border: none;\n  cursor: pointer;\n  font-weight: bold;\n  font-size: 10px;\n  color: #ffffff;\n  width: 100%;\n}\n.ModalContainer .ModalBody .VallidatorContainer .ContainerButtons button {\n  width: 240px;\n  height: 30px;\n}\n.ModalContainer .ModalFooter {\n  display: flex;\n  justify-content: center;\n  background-color: rgba(161, 156, 156, 0.11);\n  margin: 5px 0px;\n}\n.ModalContainer .ModalFooter .Dropdown {\n  background-color: white;\n  padding: 8px;\n  width: 100%;\n  border: 1px solid #dee2e6;\n}\n.ModalContainer .ModalFooter .Dropdown p {\n  padding: 5px 0px;\n}\n.ModalContainer .ModalFooter .Dropdown .InvalidParagraph {\n  padding: 5px 0px 0px;\n  font-size: 10px;\n  color: #FF0000;\n}\n.ModalContainer .ModalFooter .Dropdown .DropdownInput {\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  gap: 10px;\n}\n.ModalContainer .ModalFooter .Dropdown .DropdownInput input {\n  flex: 4;\n  border: 1px solid #E3E3E3;\n}\n.ModalContainer .ModalFooter .Dropdown .DropdownInput button {\n  padding: 2px;\n  cursor: pointer;\n  transition: background-color 0.2s ease-in-out 0s;\n  flex: 1;\n  font-size: 10px;\n}\n.ModalContainer .ModalFooter .Dropdown .DropdownInput button:enabled {\n  background-color: #6BB816;\n  color: #ffffff;\n  font-weight: bold;\n  border: none;\n  border: 2.5px solid rgba(255, 255, 255, 0);\n}\n.ModalContainer .ModalFooter .Dropdown .DropdownInput button:disabled {\n  background-color: #ffffff;\n  color: #002554;\n  font-weight: bold;\n  cursor: not-allowed;\n  border: 1px solid #E3E3E3;\n}\n.ModalContainer .ModalFooter .Dropdown .DropdownInput:first-child {\n  margin-left: 0px;\n  display: flex;\n  padding: 12px 0px;\n  justify-content: center;\n}\n.ModalContainer .ModalFooter .Dropdown .DropdownInput .InvalidInput {\n  border: 1px solid #FF0000;\n}\n\n@container (max-width: 1300px) {\n  .ModalContainer .Container {\n    width: 50%;\n  }\n}\n@container (max-width: 800px) {\n  .ModalContainer .Container {\n    width: 70%;\n  }\n}";
+const playerLugasLimitCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");\n:host {\n  font-family: \"Roboto\", sans-serif;\n}\n\n.ModalContainer {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  background-color: rgba(0, 0, 0, 0.5);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 12px;\n  container-type: inline-size;\n}\n.ModalContainer .Container {\n  position: fixed;\n  top: 30vh;\n  width: 25%;\n  background: #fff;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  border-radius: 4px;\n  transform: scale(1.1);\n}\n.ModalContainer .ModalHeader {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background-color: #ffffff;\n  border-radius: 4px 4px 0px 0px;\n  padding: 10px;\n}\n.ModalContainer .ModalBody {\n  background: #F5F6F6;\n  padding: 16px 10px 10px;\n  container-type: inline-size;\n  border-radius: 4px;\n}\n.ModalContainer .ModalBody hr {\n  border: 1px solid rgba(0, 0, 0, 0.1);\n  margin: 12px 0px;\n}\n.ModalContainer .ModalBody p {\n  margin: 0;\n}\n.ModalContainer .ModalBody .VallidatorContainer {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n}\n.ModalContainer .ModalBody .VallidatorContainer .CrossProvider {\n  background-color: #404350;\n  color: white;\n  margin: 5px 0px;\n  padding: 10px 15px;\n  border-radius: 2px;\n}\n.ModalContainer .ModalBody .VallidatorContainer .CrossProvider svg {\n  position: absolute;\n  width: 5px;\n  height: 28px;\n}\n.ModalContainer .ModalBody .VallidatorContainer .CrossProvider p {\n  padding-left: 15px;\n}\n.ModalContainer .ModalBody .VallidatorContainer .Paragraphs {\n  padding: 5px 0px;\n}\n.ModalContainer .ModalBody .VallidatorContainer .Paragraphs p {\n  padding: 5px 0px;\n}\n.ModalContainer .ModalBody .VallidatorContainer .ContainerButtons {\n  display: flex;\n  justify-content: space-around;\n  gap: 10px;\n  padding-top: 5px;\n}\n.ModalContainer .ModalBody .VallidatorContainer .ContainerButtons .FirstButton {\n  background-color: #ffffff;\n  font-weight: bold;\n  color: #002554;\n  font-size: 10px;\n  border: 2.5px solid #dee2e6;\n  width: 100%;\n  cursor: pointer;\n}\n.ModalContainer .ModalBody .VallidatorContainer .ContainerButtons .SecondButton {\n  background-color: #6BB816;\n  border: none;\n  cursor: pointer;\n  font-weight: bold;\n  font-size: 10px;\n  color: #ffffff;\n  width: 100%;\n}\n.ModalContainer .ModalBody .VallidatorContainer .ContainerButtons button {\n  width: 240px;\n  height: 30px;\n}\n.ModalContainer .ModalFooter {\n  display: flex;\n  justify-content: center;\n  background-color: rgba(161, 156, 156, 0.11);\n  margin: 5px 0px;\n}\n.ModalContainer .ModalFooter .Dropdown {\n  background-color: white;\n  padding: 8px;\n  width: 100%;\n  border: 1px solid #dee2e6;\n}\n.ModalContainer .ModalFooter .Dropdown p {\n  padding: 5px 0px;\n}\n.ModalContainer .ModalFooter .Dropdown .InvalidParagraph {\n  padding: 5px 0px 0px;\n  font-size: 10px;\n  color: #FF0000;\n}\n.ModalContainer .ModalFooter .Dropdown .DropdownInput {\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  gap: 10px;\n}\n.ModalContainer .ModalFooter .Dropdown .DropdownInput input {\n  flex: 4;\n  border: 1px solid #E3E3E3;\n}\n.ModalContainer .ModalFooter .Dropdown .DropdownInput button {\n  padding: 2px;\n  cursor: pointer;\n  transition: background-color 0.2s ease-in-out 0s;\n  flex: 1;\n  font-size: 10px;\n}\n.ModalContainer .ModalFooter .Dropdown .DropdownInput button:enabled {\n  background-color: #6BB816;\n  color: #ffffff;\n  font-weight: bold;\n  border: none;\n  border: 2.5px solid rgba(255, 255, 255, 0);\n}\n.ModalContainer .ModalFooter .Dropdown .DropdownInput button:disabled {\n  background-color: #ffffff;\n  color: #002554;\n  font-weight: bold;\n  cursor: not-allowed;\n  border: 1px solid #E3E3E3;\n}\n.ModalContainer .ModalFooter .Dropdown .DropdownInput:first-child {\n  margin-left: 0px;\n  display: flex;\n  padding: 12px 0px;\n  justify-content: center;\n}\n.ModalContainer .ModalFooter .Dropdown .DropdownInput .InvalidInput {\n  border: 1px solid #FF0000;\n}\n\n@container (max-width: 1300px) {\n  .ModalContainer .Container {\n    width: 50%;\n  }\n}\n@container (max-width: 800px) {\n  .ModalContainer .Container {\n    width: 70%;\n  }\n}";
 
 const PlayerLugasLimit = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.uploadDocuments = index.createEvent(this, "uploadDocuments", 7);
+    this.closePopup = index.createEvent(this, "closePopup", 7);
     /**
      * The userid
      */
@@ -131,11 +144,11 @@ const PlayerLugasLimit = class {
      */
     this.session = '';
     /**
-     * The endpoint
+     * The NorWAy endpoint
      */
     this.endpoint = '';
     /**
-     * The currency
+     * Currency of the player
      */
     this.currency = 'EUR';
     /**
@@ -158,6 +171,10 @@ const PlayerLugasLimit = class {
      * Client custom styling via url content
      */
     this.clientStylingUrlContent = '';
+    /**
+     * The translationurl
+     */
+    this.translationUrl = '';
     this.validation = true;
     this.dropDown = false;
     this.isLoading = false;
@@ -167,7 +184,6 @@ const PlayerLugasLimit = class {
     this.crossProviders = false;
     this.invalidInput = false;
     this.stylingAppends = false;
-    this.isVisible = true;
     this.userAmount = '';
     this.operatorDepositLimitAmount = '';
     this.setClientStyling = () => {
@@ -182,31 +198,8 @@ const PlayerLugasLimit = class {
         this.stylingContainer.prepend(cssFile);
       }, 1);
     };
-    this.setPlayerSituation = () => {
-      let url = new URL(`${this.endpoint}/player/${this.userid}/limit/lugas`);
-      fetch(url.href)
-        .then((res) => {
-        if (res.status === 200) {
-          return res.json();
-        }
-        else {
-          this.crossProviders = true;
-          this.dropDown = true;
-          throw new Error("HTTP status " + res.status);
-        }
-      })
-        .then((data) => {
-        this.kyc = data.popup;
-        this.validation = false;
-        this.dropDown = false;
-      })
-        .catch((err) => {
-        // Handle any errors
-        console.error(err);
-      });
-    };
-    this.postPlayerSituation = () => {
-      let url = new URL(`${this.endpoint}/player/${this.userid}/limit/lugas`);
+    this.postPlayerSituation = (userAmount) => {
+      let url = new URL(`${this.endpoint}v1/player/${this.userid}/limit/lugas`);
       let options = {
         method: 'POST',
         headers: {
@@ -214,7 +207,7 @@ const PlayerLugasLimit = class {
           'Content-Type': 'application/json',
           'Authorization': `Bearer ${this.session}`
         },
-        body: JSON.stringify({ amount: `${this.userAmount}` })
+        body: userAmount ? JSON.stringify({ amount: `${userAmount}` }) : JSON.stringify({})
       };
       fetch(url.href, options)
         .then((res) => {
@@ -231,7 +224,9 @@ const PlayerLugasLimit = class {
         this.kyc = data.popup;
         this.validation = false;
         this.dropDown = false;
-        this.operatorDepositLimitAmount = data.operatorDepositLimitAmount;
+        if (data.operatorDepositLimitAmount) {
+          this.operatorDepositLimitAmount = data.operatorDepositLimitAmount;
+        }
       })
         .catch((err) => {
         // Handle any errors
@@ -240,11 +235,7 @@ const PlayerLugasLimit = class {
     };
     this.handleClick = (input) => {
       switch (input) {
-        case 'nextStep':
-        case 'keepExistingLimit':
-          this.setPlayerSituation();
-          break;
-        case 'sureSetNewLimit':
+        case 'postSituation':
           this.postPlayerSituation();
           break;
         case 'setNewLimit':
@@ -254,14 +245,13 @@ const PlayerLugasLimit = class {
           this.uploadDocuments.emit();
           break;
         case 'Close':
-          //close modal
-          this.isVisible = false;
+          this.closePopup.emit();
           break;
       }
     };
     this.setLimit = () => {
       this.userAmount = this.inputValue;
-      this.postPlayerSituation();
+      this.postPlayerSituation(this.userAmount);
     };
   }
   componentDidRender() {
@@ -275,21 +265,25 @@ const PlayerLugasLimit = class {
     }
     // end custom styling area
   }
+  connectedCallback() {
+    getTranslations(this.translationUrl);
+  }
   handleInputChange(event) {
     const inputValue = event.target.value;
     this.inputValue = inputValue;
-    this.isButtonDisabled = isNaN(Number(inputValue)) || Number(inputValue) < 10 || Number(inputValue) > 30000;
-    this.invalidInput = isNaN(Number(inputValue)) || Number(inputValue) < 10 || Number(inputValue) > 30000;
+    let min = parseInt(this.amountMinMax.split(',')[0]);
+    let max = parseInt(this.amountMinMax.split(',')[1]);
+    this.isButtonDisabled = isNaN(Number(inputValue)) || Number(inputValue) < min || Number(inputValue) > max;
+    this.invalidInput = isNaN(Number(inputValue)) || Number(inputValue) < min || Number(inputValue) > max;
   }
-  // traduceri setclient styling
   renderKYC(step) {
     if (step == 0) {
       //CLOSE MODAL
-      this.isVisible = false;
+      this.closePopup.emit();
       return;
     }
     if (step == 1) {
-      return (index.h("div", { class: "VallidatorContainer" }, index.h("div", { class: "Paragraphs" }, index.h("p", null, translate('kycSure', this.lang)), index.h("p", null, translate('kyc1', this.lang)), index.h("div", { class: "ContainerButtons" }, index.h("button", { class: "FirstButton", onClick: () => this.handleClick('sureSetNewLimit') }, translate('setNewLimit', this.lang)), index.h("button", { class: "SecondButton", onClick: () => this.handleClick('keepExistingLimit') }, translate('keepExistingLimit', this.lang))))));
+      return (index.h("div", { class: "VallidatorContainer" }, index.h("div", { class: "Paragraphs" }, index.h("p", null, translate('kycSure', this.lang)), index.h("p", null, translate('kyc1', this.lang)), index.h("div", { class: "ContainerButtons" }, index.h("button", { class: "FirstButton", onClick: () => this.postPlayerSituation(this.userAmount) }, translate('setNewLimit', this.lang)), index.h("button", { class: "SecondButton", onClick: () => this.handleClick('postSituation') }, translate('keepExistingLimit', this.lang))))));
     }
     else if (step == 2) {
       return (index.h("div", { class: "VallidatorContainer" }, index.h("div", { class: "Paragraphs" }, index.h("p", null, translate('kycThanks', this.lang)), index.h("p", null, translate('kyc2', this.lang, { values: { amount: this.operatorDepositLimitAmount } })), index.h("div", { class: "ContainerButtons" }, index.h("button", { class: "FirstButton", onClick: () => this.handleClick('Close') }, translate('Close', this.lang)), index.h("button", { class: "SecondButton", onClick: () => this.handleClick('UploadDocuments') }, translate('UploadDocuments', this.lang))))));
@@ -303,19 +297,16 @@ const PlayerLugasLimit = class {
       return (index.h("div", { class: "VallidatorContainer" }, index.h("div", { class: "Paragraphs" }, index.h("p", null, translate('softMigrationP1', this.lang)), index.h("p", null, translate('softMigrationP2', this.lang)), index.h("p", null, translate('softMigrationP3', this.lang), "(of ", this.currency, " ", this.amount, ")?")), this.crossProviders ?
         index.h("div", { class: "CrossProvider" }, index.h("svg", { width: "4", height: "17", viewBox: "0 0 4 17", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("rect", { width: "4", height: "12", rx: "2", fill: "white" }), index.h("rect", { y: "14", width: "4", height: "3", rx: "1.5", fill: "white" })), index.h("p", null, translate('crossProviders', this.lang)))
         :
-          index.h("div", { class: "ContainerButtons" }, index.h("button", { class: "FirstButton", onClick: () => this.handleClick('setNewLimit') }, translate('setNewLimit', this.lang)), index.h("button", { class: "SecondButton", onClick: () => this.handleClick('nextStep') }, translate('confirm', this.lang)))));
+          index.h("div", { class: "ContainerButtons" }, index.h("button", { class: "FirstButton", onClick: () => this.handleClick('setNewLimit') }, translate('setNewLimit', this.lang)), index.h("button", { class: "SecondButton", onClick: () => this.handleClick('postSituation') }, translate('confirm', this.lang)))));
     }
     else if (input == '2') {
       return (index.h("div", { class: "VallidatorContainer" }, index.h("div", { class: "Paragraphs" }, index.h("p", null, translate('newUserP1', this.lang)), index.h("p", null, translate('newUserP2', this.lang)), index.h("p", null, translate('newUserP3', this.lang))), this.crossProviders ?
         index.h("div", { class: "CrossProvider" }, index.h("svg", { width: "4", height: "17", viewBox: "0 0 4 17", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("rect", { width: "4", height: "12", rx: "2", fill: "white" }), index.h("rect", { y: "14", width: "4", height: "3", rx: "1.5", fill: "white" })), index.h("p", null, translate('crossProviders', this.lang)))
         :
-          index.h("div", { class: "ContainerButtons" }, index.h("button", { class: "FirstButton", onClick: () => this.handleClick('setNewLimit') }, translate('setNewLimit', this.lang)), index.h("button", { class: "SecondButton", onClick: () => this.handleClick('nextStep') }, translate('keepExistingLimit', this.lang)))));
+          index.h("div", { class: "ContainerButtons" }, index.h("button", { class: "FirstButton", onClick: () => this.handleClick('setNewLimit') }, translate('setNewLimit', this.lang)), index.h("button", { class: "SecondButton", onClick: () => this.handleClick('postSituation') }, translate('keepExistingLimit', this.lang)))));
     }
   }
   render() {
-    if (!this.isVisible) {
-      return null; // Render nothing if component is not visible
-    }
     let kycConfirmation = this.renderKYC(this.kyc);
     let validationContainer = this.renderValidator(this.flow);
     if (this.isLoading) {

package/dist/cjs/player-lugas-limit.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-034179c3.js');
+const index = require('./index-87beb026.js');
 
 /*
  Stencil Client Patch Browser v2.15.2 | MIT Licensed | https://stenciljs.com
@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["player-lugas-limit.cjs",[[1,"player-lugas-limit",{"userid":[1],"session":[1],"endpoint":[1],"currency":[1],"flow":[1],"amountMinMax":[1,"amount-min-max"],"amount":[1],"lang":[1],"clientStyling":[1,"client-styling"],"clientStylingUrlContent":[1,"client-styling-url-content"],"translationurl":[1],"validation":[32],"kyc":[32],"dropDown":[32],"isLoading":[32],"hasErrors":[32],"inputValue":[32],"isButtonDisabled":[32],"crossProviders":[32],"invalidInput":[32],"stylingAppends":[32],"isVisible":[32],"userAmount":[32],"operatorDepositLimitAmount":[32]}]]]], options);
+  return index.bootstrapLazy([["player-lugas-limit.cjs",[[1,"player-lugas-limit",{"userid":[1],"session":[1],"endpoint":[1],"currency":[1],"flow":[1],"amountMinMax":[1,"amount-min-max"],"amount":[1],"lang":[1],"clientStyling":[1,"client-styling"],"clientStylingUrlContent":[1,"client-styling-url-content"],"translationUrl":[1,"translation-url"],"validation":[32],"kyc":[32],"dropDown":[32],"isLoading":[32],"hasErrors":[32],"inputValue":[32],"isButtonDisabled":[32],"crossProviders":[32],"invalidInput":[32],"stylingAppends":[32],"userAmount":[32],"operatorDepositLimitAmount":[32]}]]]], options);
 });

package/dist/collection/components/player-lugas-limit/player-lugas-limit.css

@@ -78,6 +78,7 @@
   display: flex;
   justify-content: space-around;
   gap: 10px;
+  padding-top: 5px;
 }
 .ModalContainer .ModalBody .VallidatorContainer .ContainerButtons .FirstButton {
   background-color: #ffffff;

package/dist/collection/components/player-lugas-limit/player-lugas-limit.js

@@ -1,5 +1,5 @@
 import { Component, Prop, h, State, Event } from '@stencil/core';
-import { translate } from '../../utils/locale.utils';
+import { getTranslations, translate } from '../../utils/locale.utils';
 export class PlayerLugasLimit {
   constructor() {
     /**
@@ -11,11 +11,11 @@ export class PlayerLugasLimit {
      */
     this.session = '';
     /**
-     * The endpoint
+     * The NorWAy endpoint
      */
     this.endpoint = '';
     /**
-     * The currency
+     * Currency of the player
      */
     this.currency = 'EUR';
     /**
@@ -38,6 +38,10 @@ export class PlayerLugasLimit {
      * Client custom styling via url content
      */
     this.clientStylingUrlContent = '';
+    /**
+     * The translationurl
+     */
+    this.translationUrl = '';
     this.validation = true;
     this.dropDown = false;
     this.isLoading = false;
@@ -47,7 +51,6 @@ export class PlayerLugasLimit {
     this.crossProviders = false;
     this.invalidInput = false;
     this.stylingAppends = false;
-    this.isVisible = true;
     this.userAmount = '';
     this.operatorDepositLimitAmount = '';
     this.setClientStyling = () => {
@@ -62,31 +65,8 @@ export class PlayerLugasLimit {
         this.stylingContainer.prepend(cssFile);
       }, 1);
     };
-    this.setPlayerSituation = () => {
-      let url = new URL(`${this.endpoint}/player/${this.userid}/limit/lugas`);
-      fetch(url.href)
-        .then((res) => {
-        if (res.status === 200) {
-          return res.json();
-        }
-        else {
-          this.crossProviders = true;
-          this.dropDown = true;
-          throw new Error("HTTP status " + res.status);
-        }
-      })
-        .then((data) => {
-        this.kyc = data.popup;
-        this.validation = false;
-        this.dropDown = false;
-      })
-        .catch((err) => {
-        // Handle any errors
-        console.error(err);
-      });
-    };
-    this.postPlayerSituation = () => {
-      let url = new URL(`${this.endpoint}/player/${this.userid}/limit/lugas`);
+    this.postPlayerSituation = (userAmount) => {
+      let url = new URL(`${this.endpoint}v1/player/${this.userid}/limit/lugas`);
       let options = {
         method: 'POST',
         headers: {
@@ -94,7 +74,7 @@ export class PlayerLugasLimit {
           'Content-Type': 'application/json',
           'Authorization': `Bearer ${this.session}`
         },
-        body: JSON.stringify({ amount: `${this.userAmount}` })
+        body: userAmount ? JSON.stringify({ amount: `${userAmount}` }) : JSON.stringify({})
       };
       fetch(url.href, options)
         .then((res) => {
@@ -111,7 +91,9 @@ export class PlayerLugasLimit {
         this.kyc = data.popup;
         this.validation = false;
         this.dropDown = false;
-        this.operatorDepositLimitAmount = data.operatorDepositLimitAmount;
+        if (data.operatorDepositLimitAmount) {
+          this.operatorDepositLimitAmount = data.operatorDepositLimitAmount;
+        }
       })
         .catch((err) => {
         // Handle any errors
@@ -120,11 +102,7 @@ export class PlayerLugasLimit {
     };
     this.handleClick = (input) => {
       switch (input) {
-        case 'nextStep':
-        case 'keepExistingLimit':
-          this.setPlayerSituation();
-          break;
-        case 'sureSetNewLimit':
+        case 'postSituation':
           this.postPlayerSituation();
           break;
         case 'setNewLimit':
@@ -134,14 +112,13 @@ export class PlayerLugasLimit {
           this.uploadDocuments.emit();
           break;
         case 'Close':
-          //close modal
-          this.isVisible = false;
+          this.closePopup.emit();
           break;
       }
     };
     this.setLimit = () => {
       this.userAmount = this.inputValue;
-      this.postPlayerSituation();
+      this.postPlayerSituation(this.userAmount);
     };
   }
   componentDidRender() {
@@ -155,17 +132,21 @@ export class PlayerLugasLimit {
     }
     // end custom styling area
   }
+  connectedCallback() {
+    getTranslations(this.translationUrl);
+  }
   handleInputChange(event) {
     const inputValue = event.target.value;
     this.inputValue = inputValue;
-    this.isButtonDisabled = isNaN(Number(inputValue)) || Number(inputValue) < 10 || Number(inputValue) > 30000;
-    this.invalidInput = isNaN(Number(inputValue)) || Number(inputValue) < 10 || Number(inputValue) > 30000;
+    let min = parseInt(this.amountMinMax.split(',')[0]);
+    let max = parseInt(this.amountMinMax.split(',')[1]);
+    this.isButtonDisabled = isNaN(Number(inputValue)) || Number(inputValue) < min || Number(inputValue) > max;
+    this.invalidInput = isNaN(Number(inputValue)) || Number(inputValue) < min || Number(inputValue) > max;
   }
-  // traduceri setclient styling
   renderKYC(step) {
     if (step == 0) {
       //CLOSE MODAL
-      this.isVisible = false;
+      this.closePopup.emit();
       return;
     }
     if (step == 1) {
@@ -174,8 +155,8 @@ export class PlayerLugasLimit {
           h("p", null, translate('kycSure', this.lang)),
           h("p", null, translate('kyc1', this.lang)),
           h("div", { class: "ContainerButtons" },
-            h("button", { class: "FirstButton", onClick: () => this.handleClick('sureSetNewLimit') }, translate('setNewLimit', this.lang)),
-            h("button", { class: "SecondButton", onClick: () => this.handleClick('keepExistingLimit') }, translate('keepExistingLimit', this.lang))))));
+            h("button", { class: "FirstButton", onClick: () => this.postPlayerSituation(this.userAmount) }, translate('setNewLimit', this.lang)),
+            h("button", { class: "SecondButton", onClick: () => this.handleClick('postSituation') }, translate('keepExistingLimit', this.lang))))));
     }
     else if (step == 2) {
       return (h("div", { class: "VallidatorContainer" },
@@ -217,7 +198,7 @@ export class PlayerLugasLimit {
           :
             h("div", { class: "ContainerButtons" },
               h("button", { class: "FirstButton", onClick: () => this.handleClick('setNewLimit') }, translate('setNewLimit', this.lang)),
-              h("button", { class: "SecondButton", onClick: () => this.handleClick('nextStep') }, translate('confirm', this.lang)))));
+              h("button", { class: "SecondButton", onClick: () => this.handleClick('postSituation') }, translate('confirm', this.lang)))));
     }
     else if (input == '2') {
       return (h("div", { class: "VallidatorContainer" },
@@ -234,13 +215,10 @@ export class PlayerLugasLimit {
           :
             h("div", { class: "ContainerButtons" },
               h("button", { class: "FirstButton", onClick: () => this.handleClick('setNewLimit') }, translate('setNewLimit', this.lang)),
-              h("button", { class: "SecondButton", onClick: () => this.handleClick('nextStep') }, translate('keepExistingLimit', this.lang)))));
+              h("button", { class: "SecondButton", onClick: () => this.handleClick('postSituation') }, translate('keepExistingLimit', this.lang)))));
     }
   }
   render() {
-    if (!this.isVisible) {
-      return null; // Render nothing if component is not visible
-    }
     let kycConfirmation = this.renderKYC(this.kyc);
     let validationContainer = this.renderValidator(this.flow);
     if (this.isLoading) {
@@ -346,7 +324,7 @@ export class PlayerLugasLimit {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The endpoint"
+        "text": "The NorWAy endpoint"
       },
       "attribute": "endpoint",
       "reflect": false,
@@ -364,7 +342,7 @@ export class PlayerLugasLimit {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The currency"
+        "text": "Currency of the player"
       },
       "attribute": "currency",
       "reflect": false,
@@ -477,7 +455,7 @@ export class PlayerLugasLimit {
       "reflect": false,
       "defaultValue": "''"
     },
-    "translationurl": {
+    "translationUrl": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -491,8 +469,9 @@ export class PlayerLugasLimit {
         "tags": [],
         "text": "The translationurl"
       },
-      "attribute": "translationurl",
-      "reflect": false
+      "attribute": "translation-url",
+      "reflect": false,
+      "defaultValue": "''"
     }
   }; }
   static get states() { return {
@@ -506,7 +485,6 @@ export class PlayerLugasLimit {
     "crossProviders": {},
     "invalidInput": {},
     "stylingAppends": {},
-    "isVisible": {},
     "userAmount": {},
     "operatorDepositLimitAmount": {}
   }; }
@@ -516,6 +494,21 @@ export class PlayerLugasLimit {
       "bubbles": true,
       "cancelable": true,
       "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Upload documents event"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "closePopup",
+      "name": "closePopup",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
       "docs": {
         "tags": [],
         "text": ""

package/dist/collection/utils/locale.utils.js

@@ -1,6 +1,6 @@
 const DEFAULT_LANGUAGE = 'en';
 const SUPPORTED_LANGUAGES = ['ro', 'en'];
-const TRANSLATIONS = {
+let TRANSLATIONS = {
   en: {
     loading: 'Loading, please wait ...',
     error: 'It was an error while trying to fetch the data',
@@ -98,6 +98,18 @@ const TRANSLATIONS = {
     softMigrationP3: 'Do you want to set a new limit or confirm the existing limit ',
   }
 };
+export const getTranslations = (url) => {
+  // fetch url, get the data, replace the TRANSLATIONS content
+  fetch(url)
+    .then((res) => res.json())
+    .then((data) => {
+    Object.keys(data).forEach((item) => {
+      for (let key in data[item]) {
+        TRANSLATIONS[item][key] = data[item][key];
+      }
+    });
+  });
+};
 export const translate = (key, customLang, values) => {
   const lang = customLang;
   let translation = TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];