@everymatrix/player-lugas-limit 1.63.2 → 1.64.0

package/dist/cjs/loader.cjs.js

@@ -8,7 +8,7 @@ const appGlobals = require('./app-globals-3a1e7e63.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["player-lugas-limit.cjs",[[1,"player-lugas-limit",{"userId":[1,"user-id"],"session":[1],"endpoint":[1],"currency":[1],"amount":[1],"lang":[1],"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"mbSource":[1,"mb-source"],"translationUrl":[1,"translation-url"],"showCustomAmount":[32],"isLoading":[32],"hasErrors":[32],"inputValue":[32],"showInvalidInputError":[32],"predefinedAmountsArray":[32],"isWithinRange":[32],"minimumRange":[32],"selectedPredefinedAmount":[32],"errorMessage":[32],"wasSubmitted":[32],"minAmount":[32],"maxAmount":[32]},null,{"translationUrl":["handleNewTranslations"],"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"]}]]]], options);
+  return index.bootstrapLazy([["player-lugas-limit.cjs",[[1,"player-lugas-limit",{"userId":[1,"user-id"],"session":[1],"endpoint":[1],"currency":[1],"amount":[1],"lang":[1],"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"mbSource":[1,"mb-source"],"translationUrl":[1,"translation-url"],"isLoading":[32],"showCustomAmount":[32],"isSubmitted":[32],"isUseExistingLimitOptionActive":[32],"selectedPredefinedAmount":[32],"errorMessageOnInitialization":[32],"errorMessageOnSubmit":[32],"errorMessageOnInput":[32],"newAmount":[32]},null,{"translationUrl":["handleNewTranslations"],"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

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

@@ -139,57 +139,36 @@ function setStreamStyling(stylingContainer, domain, subscription) {
   }
 }
 
-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: var(--emw--font-size-small, 12px);\n  container-type: inline-size;\n}\n.ModalContainer hr {\n  border: 1px solid rgba(0, 0, 0, 0.1);\n  margin: 10px 0px;\n}\n.ModalContainer p {\n  margin: 0;\n}\n.ModalContainer button {\n  width: 100%;\n  border: 1px solid var(--emw--color-gray-100, #E8E9EB);\n  padding: 10px 0;\n  cursor: pointer;\n  width: 100%;\n  border-radius: var(--emw--border-radius-small, 4px);\n}\n.ModalContainer button.PrimaryButton {\n  background: var(--emw--color-primary, #6BB816);\n  border: none;\n  font-weight: 500;\n}\n.ModalContainer button.PrimaryButton:not(:disabled) {\n  color: var(--emw--color-white, #FFF);\n}\n.ModalContainer .Container {\n  position: fixed;\n  top: 30vh;\n  width: 320px;\n  background: var(--emw--color-white, #fff);\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  transform: scale(1.1);\n  border-radius: 4px;\n  overflow: hidden;\n}\n.ModalContainer .ValidatorContainer {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n}\n.ModalContainer .Paragraphs:not(:last-child) {\n  margin-bottom: 20px;\n}\n.ModalContainer .ModalHeader {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background-color: var(--emw--color-gray-50, #F7F8FA);\n  padding: 12px;\n}\n.ModalContainer .ModalHeader h2 {\n  font-weight: bold;\n  font-size: var(--emw--font-size-small, 12px);\n  margin: 0;\n}\n.ModalContainer .ModalBody {\n  background: var(--emw--color-white, #FFF);\n  padding: 12px;\n  container-type: inline-size;\n  border-radius: 4px;\n}\n.ModalContainer .ModalBody .ErrorContainer {\n  display: flex;\n  align-items: center;\n  color: var(--emw--color-red-100, #E10014);\n  border-bottom: 1px solid var(--emw--color-gray-100, #E8E9EB);\n  margin: -12px;\n  padding: 12px;\n  margin-bottom: 12px;\n  font-weight: bold;\n  position: relative;\n  background: linear-gradient(180deg, var(--emw--color-gray-100, #E8E9EB) 0%, rgba(255, 255, 255, 0.47) 30%);\n}\n.ModalContainer .ModalBody .DismissError {\n  position: absolute;\n  right: 12px;\n  cursor: pointer;\n}\n.ModalContainer .ModalBody .ErrorParagraph {\n  display: flex;\n  align-items: center;\n}\n.ModalContainer .ModalBody .ErrorIcon {\n  background: linear-gradient(180deg, var(--emw--color-red-100, #E10014) 0%, var(--emw--color-red-150, #D60080) 100%);\n  text-align: center;\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  margin-right: 6px;\n}\n.ModalContainer .ModalBody .ErrorIcon svg {\n  width: 6px;\n  height: 6px;\n}\n.ModalContainer .ModalBody .ErrorIcon svg path {\n  fill: var(--emw--color-white, #FFF);\n}\n.ModalContainer .ModalBody .ChooseLimitLabel {\n  text-transform: uppercase;\n}\n.ModalContainer .ModalBody .LimitAmountWrapper {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  position: relative;\n}\n.ModalContainer .ModalBody .PredefinedAmounts {\n  display: flex;\n  justify-content: space-between;\n}\n.ModalContainer .ModalBody .PredefinedAmounts button {\n  background: none;\n  margin: -1px 0 0 -1px;\n  color: var(--emw--color-gray-150, #808080);\n}\n.ModalContainer .ModalBody .PredefinedAmounts button.Active {\n  font-weight: bold;\n  background: var(--emw--color-gray-50, #F7F8FA);\n  color: var(--emw--color-gray-200, #323233);\n}\n.ModalContainer .ModalBody .PredefinedAmounts button:first-child {\n  border-radius: 4px 0 0 4px;\n}\n.ModalContainer .ModalBody .PredefinedAmounts button:last-child {\n  border-radius: 0 4px 4px 0;\n}\n.ModalContainer .ModalBody .CustomAmountInput {\n  width: 100%;\n  padding: 10px;\n  border: 1px solid var(--emw--color-gray-100, #E8E9EB);\n  border-radius: 4px;\n  box-sizing: border-box;\n  margin-bottom: 6px;\n  color: var(--emw--color-gray-200, #323233);\n  font-weight: bold;\n}\n.ModalContainer .ModalBody .CustomAmountInput.InvalidInput {\n  border: 1px solid var(--emw--color-red, #FF0000);\n}\n.ModalContainer .ModalBody .InvalidParagraph {\n  font-size: var(--emw--font-size-small, 12px);\n  color: var(--emw--color-red, #FF0000);\n}\n.ModalContainer .ModalBody .SetLimitBtn {\n  margin-top: 10px;\n}\n.ModalContainer .ModalFooter {\n  padding-top: 12px;\n  margin: 5px 0px;\n}\n.ModalContainer .Link {\n  color: inherit;\n  text-decoration: underline;\n  cursor: pointer;\n}\n.ModalContainer .PrivacyNote {\n  font-size: var(--emw--font-size-x-small, 10px);\n  font-style: italic;\n}\n.ModalContainer .ExistingLimit {\n  margin-bottom: 15px;\n}\n\ninput {\n  /* Firefox */\n  -moz-appearance: textfield;\n  /* Chrome, Safari, Edge, Opera */\n}\ninput::-webkit-outer-spin-button, input::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\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}\n.LoadingWrapper {\n  width: 100%;\n  height: 100%;\n  background: rgba(255, 255, 255, 0.8);\n  position: absolute;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.spinner {\n  animation: rotate 2s linear infinite;\n  z-index: 2;\n  width: 30px;\n  height: 30px;\n}\n.spinner .path {\n  stroke: var(--emw--color-primary, #6BB816);\n  stroke-linecap: round;\n  animation: dash 1.5s ease-in-out infinite;\n}\n\n@keyframes rotate {\n  100% {\n    transform: rotate(360deg);\n  }\n}\n@keyframes dash {\n  0% {\n    stroke-dasharray: 1, 150;\n    stroke-dashoffset: 0;\n  }\n  50% {\n    stroke-dasharray: 90, 150;\n    stroke-dashoffset: -35;\n  }\n  100% {\n    stroke-dasharray: 90, 150;\n    stroke-dashoffset: -124;\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: var(--emw--font-size-small, 12px);\n  container-type: inline-size;\n}\n.ModalContainer hr {\n  border: 1px solid rgba(0, 0, 0, 0.1);\n  margin: 10px 0px;\n}\n.ModalContainer p {\n  margin: 0;\n}\n.ModalContainer button {\n  width: 100%;\n  border: 1px solid var(--emw--color-gray-100, #E8E9EB);\n  padding: 10px 0;\n  cursor: pointer;\n  width: 100%;\n  border-radius: var(--emw--border-radius-small, 4px);\n}\n.ModalContainer button.PrimaryButton {\n  background: var(--emw--color-primary, #6BB816);\n  border: none;\n  font-weight: 500;\n}\n.ModalContainer button.PrimaryButton:not(:disabled) {\n  color: var(--emw--color-white, #FFF);\n}\n.ModalContainer button.PrimaryButton:disabled {\n  cursor: default;\n}\n.ModalContainer .Container {\n  position: fixed;\n  top: 30vh;\n  width: 320px;\n  background: var(--emw--color-white, #fff);\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  transform: scale(1.1);\n  border-radius: 4px;\n  overflow: hidden;\n}\n.ModalContainer .ValidatorContainer {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n}\n.ModalContainer .Paragraphs:not(:last-child) {\n  margin-bottom: 20px;\n}\n.ModalContainer .ModalHeader {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background-color: var(--emw--color-gray-50, #F7F8FA);\n  padding: 12px;\n}\n.ModalContainer .ModalHeader h2 {\n  font-weight: bold;\n  font-size: var(--emw--font-size-small, 12px);\n  margin: 0;\n}\n.ModalContainer .ModalBody {\n  background: var(--emw--color-white, #FFF);\n  padding: 12px;\n  container-type: inline-size;\n  border-radius: 4px;\n}\n.ModalContainer .ModalBody .ErrorContainer {\n  display: flex;\n  align-items: center;\n  color: var(--emw--color-red-100, #E10014);\n  border-bottom: 1px solid var(--emw--color-gray-100, #E8E9EB);\n  margin: -12px;\n  padding: 12px;\n  margin-bottom: 12px;\n  font-weight: bold;\n  position: relative;\n  background: linear-gradient(180deg, var(--emw--color-gray-100, #E8E9EB) 0%, rgba(255, 255, 255, 0.47) 30%);\n}\n.ModalContainer .ModalBody .DismissError {\n  position: absolute;\n  right: 12px;\n  cursor: pointer;\n}\n.ModalContainer .ModalBody .ErrorParagraph {\n  display: flex;\n  align-items: center;\n}\n.ModalContainer .ModalBody .ErrorIcon {\n  background: linear-gradient(180deg, var(--emw--color-red-100, #E10014) 0%, var(--emw--color-red-150, #D60080) 100%);\n  text-align: center;\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  margin-right: 6px;\n}\n.ModalContainer .ModalBody .ErrorIcon svg {\n  width: 6px;\n  height: 6px;\n}\n.ModalContainer .ModalBody .ErrorIcon svg path {\n  fill: var(--emw--color-white, #FFF);\n}\n.ModalContainer .ModalBody .ChooseLimitLabel {\n  text-transform: uppercase;\n}\n.ModalContainer .ModalBody .LimitAmountWrapper {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  position: relative;\n}\n.ModalContainer .ModalBody .PredefinedAmounts {\n  display: flex;\n  justify-content: space-between;\n}\n.ModalContainer .ModalBody .PredefinedAmounts button {\n  background: none;\n  margin: -1px 0 0 -1px;\n  color: var(--emw--color-gray-150, #808080);\n}\n.ModalContainer .ModalBody .PredefinedAmounts button.Active {\n  font-weight: bold;\n  background: var(--emw--color-gray-50, #F7F8FA);\n  color: var(--emw--color-gray-200, #323233);\n}\n.ModalContainer .ModalBody .PredefinedAmounts button:first-child {\n  border-radius: 4px 0 0 4px;\n}\n.ModalContainer .ModalBody .PredefinedAmounts button:last-child {\n  border-radius: 0 4px 4px 0;\n}\n.ModalContainer .ModalBody .CustomAmountInput {\n  width: 100%;\n  padding: 10px;\n  border: 1px solid var(--emw--color-gray-100, #E8E9EB);\n  border-radius: 4px;\n  box-sizing: border-box;\n  margin-bottom: 6px;\n  color: var(--emw--color-gray-200, #323233);\n  font-weight: bold;\n}\n.ModalContainer .ModalBody .CustomAmountInput.InvalidInput {\n  border: 1px solid var(--emw--color-red, #FF0000);\n}\n.ModalContainer .ModalBody .InvalidParagraph {\n  font-size: var(--emw--font-size-small, 12px);\n  color: var(--emw--color-red, #FF0000);\n}\n.ModalContainer .ModalBody .SetLimitBtn {\n  margin-top: 10px;\n}\n.ModalContainer .ModalFooter {\n  padding-top: 12px;\n  margin: 5px 0px;\n}\n.ModalContainer .Link {\n  color: inherit;\n  text-decoration: underline;\n  cursor: pointer;\n}\n.ModalContainer .Link.Inactive {\n  cursor: default;\n  color: var(--emw--color-gray-150, #808080);\n}\n.ModalContainer .PrivacyNote {\n  font-size: var(--emw--font-size-x-small, 10px);\n  font-style: italic;\n}\n.ModalContainer .ExistingLimit {\n  margin-bottom: 15px;\n}\n\ninput {\n  /* Firefox */\n  -moz-appearance: textfield;\n  /* Chrome, Safari, Edge, Opera */\n}\ninput::-webkit-outer-spin-button, input::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\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}\n.LoadingWrapper {\n  width: 100%;\n  height: 100%;\n  background: rgba(255, 255, 255, 0.8);\n  position: absolute;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.spinner {\n  animation: rotate 2s linear infinite;\n  z-index: 2;\n  width: 30px;\n  height: 30px;\n}\n.spinner .path {\n  stroke: var(--emw--color-primary, #6BB816);\n  stroke-linecap: round;\n  animation: dash 1.5s ease-in-out infinite;\n}\n\n@keyframes rotate {\n  100% {\n    transform: rotate(360deg);\n  }\n}\n@keyframes dash {\n  0% {\n    stroke-dasharray: 1, 150;\n    stroke-dashoffset: 0;\n  }\n  50% {\n    stroke-dasharray: 90, 150;\n    stroke-dashoffset: -35;\n  }\n  100% {\n    stroke-dasharray: 90, 150;\n    stroke-dashoffset: -124;\n  }\n}";
 const PlayerLugasLimitStyle0 = playerLugasLimitCss;
 
 const PlayerLugasLimit = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.closeLugasModal = index.createEvent(this, "closeLugasModal", 7);
+        /** Array of predefined limit amounts */
+        this.predefinedAmounts = [];
+        /** Displayed currency */
+        this.displayedCurrency = '';
         /**
-         * Fetches and applies client styling from a URL
-         */
-        this.setClientStyling = () => {
-            const sheet = document.createElement('style');
-            sheet.innerHTML = this.clientStyling;
-            this.stylingContainer.prepend(sheet);
-        };
-        /**
-         * Fetches and applies client styling from a URL
-         */
-        this.setClientStylingURL = () => {
-            const url = new URL(this.clientStylingUrl);
-            const cssFile = document.createElement('style');
-            fetch(url.href)
-                .then((res) => res.text())
-                .then((data) => {
-                cssFile.innerHTML = data;
-                setTimeout(() => {
-                    this.stylingContainer.prepend(cssFile);
-                }, 1);
-            })
-                .catch((err) => {
-                console.log('error ', err);
-            });
-        };
-        /**
-         * Posts the player's limit situation to the API.
+         * Submits the new monthly deposit limit set by the player
          * @param userAmount - User-defined amount
          * @param keepLimit - Whether to keep the current limit
          * @param initialNewLimit - Whether the limit is being set initially
          */
-        this.postPlayerSituation = (userAmount, keepLimit = false, initialNewLimit = false) => {
-            this.wasSubmitted = true;
-            this.errorMessage = '';
+        this.submitMonthlyDepositLimit = (amount, keepLimit = false, initialNewLimit = false) => {
+            if (keepLimit && !this.isUseExistingLimitOptionActive) {
+                return;
+            }
+            this.isSubmitted = true;
+            this.errorMessageOnSubmit = '';
             const url = new URL(`${this.endpoint}v2/player/${this.userId}/limit/lugas`);
-            const roleLimitAmount = initialNewLimit ? this.amount : 0;
-            const bodyDraft = {
+            const roleLimitAmount = initialNewLimit ? this.newAmount : 0;
+            const body = {
+                amount,
                 keepLimit,
                 roleLimitAmount
             };
-            if (userAmount) {
-                bodyDraft['amount'] = `${userAmount}`;
-            }
             const options = {
                 method: 'POST',
                 headers: {
@@ -198,7 +177,7 @@ const PlayerLugasLimit = class {
                     'Content-Type': 'application/json',
                     'Authorization': `Bearer ${this.session}`
                 },
-                body: JSON.stringify(bodyDraft)
+                body: JSON.stringify(body)
             };
             fetch(url.href, options)
                 .then(async (res) => {
@@ -207,10 +186,13 @@ const PlayerLugasLimit = class {
                     throw errorResponse; // Throw the error response to handle later
                 }
                 this.closeLugasModal.emit();
-                return res.json();
             })
                 .catch((err) => {
                 var _a;
+                this.errorMessageOnSubmit = translate('LugasNotSet', this.lang);
+                if (keepLimit) {
+                    this.isUseExistingLimitOptionActive = false;
+                }
                 // Check for specific error structure
                 if (err.errorCode === 3 && err.errorSourceName === "GmLegislation") {
                     console.error(err.error, (_a = err.thirdPartyResponse) === null || _a === void 0 ? void 0 : _a.message);
@@ -218,10 +200,8 @@ const PlayerLugasLimit = class {
                 else {
                     console.error("Unexpected Error:", err);
                 }
-                this.errorMessage = translate('LugasNotSet', this.lang);
-            }).finally(() => {
-                this.wasSubmitted = false;
-            });
+            })
+                .finally(() => this.isSubmitted = false);
         };
         this.userId = '';
         this.session = '';
@@ -233,19 +213,15 @@ const PlayerLugasLimit = class {
         this.clientStylingUrl = '';
         this.mbSource = undefined;
         this.translationUrl = '';
-        this.showCustomAmount = false;
         this.isLoading = false;
-        this.hasErrors = false;
-        this.inputValue = '';
-        this.showInvalidInputError = false;
-        this.predefinedAmountsArray = [];
-        this.isWithinRange = undefined;
-        this.minimumRange = undefined;
+        this.showCustomAmount = false;
+        this.isSubmitted = false;
+        this.isUseExistingLimitOptionActive = true;
         this.selectedPredefinedAmount = undefined;
-        this.errorMessage = '';
-        this.wasSubmitted = false;
-        this.minAmount = undefined;
-        this.maxAmount = undefined;
+        this.errorMessageOnInitialization = '';
+        this.errorMessageOnSubmit = '';
+        this.errorMessageOnInput = '';
+        this.newAmount = '';
     }
     /**
      * Watch for changes in the translation URL and fetch new translations
@@ -271,7 +247,8 @@ const PlayerLugasLimit = class {
         if (this.translationUrl.length > 2) {
             await getTranslations(this.translationUrl);
         }
-        await this.getMonthlyDepositLimit();
+        await this.getMonthlyDepositLimitConfig();
+        this.displayedCurrency = this.currency === 'EUR' ? '€' : this.currency;
     }
     componentDidLoad() {
         if (this.stylingContainer) {
@@ -294,7 +271,7 @@ const PlayerLugasLimit = class {
      *
      * @returns Promise - Promise that resolves when the configuration is fetched
      */
-    async getMonthlyDepositLimit() {
+    async getMonthlyDepositLimitConfig() {
         const url = new URL(`${this.endpoint}api/v1/gm/legislation/config/month-deposit-limit`);
         this.isLoading = true;
         return new Promise((resolve) => {
@@ -306,17 +283,15 @@ const PlayerLugasLimit = class {
                 return res.json();
             })
                 .then((data) => {
-                this.predefinedAmountsArray = data.preDefinedOptions;
+                this.predefinedAmounts = data.preDefinedOptions;
                 this.minAmount = data.minAmount;
                 this.maxAmount = data.maxAmount;
                 resolve(true);
             }).catch((err) => {
-                this.hasErrors = true;
+                this.errorMessageOnInitialization = translate('error', this.lang);
                 console.log(err);
             })
-                .finally(() => {
-                this.isLoading = false;
-            });
+                .finally(() => this.isLoading = false);
         });
     }
     /**
@@ -325,32 +300,30 @@ const PlayerLugasLimit = class {
      */
     handleSubmit(event) {
         event.preventDefault();
-        if (this.showInvalidInputError) {
-            return;
+        if (!this.errorMessageOnInput) {
+            this.submitMonthlyDepositLimit(this.newAmount, false, true);
         }
-        this.postPlayerSituation(this.inputValue, false, true);
-    }
-    /**
-     * Checks if the input contains only digits.
-     * @param input - The input to validate
-     */
-    containsOnlyDigits(input) {
-        const regex = /^[0-9]+$/;
-        return regex.test(input);
     }
     /**
      * Handles input changes.
      * @param event - The input change event
      */
     handleInputChange(event) {
-        const inputValue = event.target.value;
-        this.showInvalidInputError = false;
-        this.inputValue = inputValue;
+        this.newAmount = event.target.value;
         // Perform validation checks
-        this.isValidNumber = !isNaN(Number(inputValue)) && this.containsOnlyDigits(inputValue);
-        this.minimumRange = Number(inputValue) >= this.minAmount;
-        this.isWithinRange = Number(inputValue) <= this.maxAmount;
-        this.showInvalidInputError = inputValue ? !this.isValidNumber || !this.isWithinRange || !this.minimumRange : false;
+        this.isValidNumber = !isNaN(Number(this.newAmount));
+        this.isWithinRange = (Number(this.newAmount) >= this.minAmount) && (Number(this.newAmount) <= this.maxAmount);
+        if (!this.isWithinRange || !this.isValidNumber) {
+            this.errorMessageOnInput = translate('invalidInputMessageLimit', this.lang, { values: { currency: this.displayedCurrency, minValue: this.minAmount, maxValue: this.maxAmount } });
+        }
+        else {
+            this.errorMessageOnInput = '';
+            const newAmountSplit = this.newAmount.split('.');
+            if (newAmountSplit.length > 1) {
+                this.newAmount = `${newAmountSplit[0]}.${newAmountSplit[1].slice(0, 2)}`;
+                event.target.value = this.newAmount;
+            }
+        }
     }
     /**
      * Handles predefined amount clicks.
@@ -358,22 +331,20 @@ const PlayerLugasLimit = class {
      */
     handleAmountClick(amount) {
         this.showCustomAmount = false;
-        this.amount = amount;
-        this.inputValue = '';
-        this.showInvalidInputError = false;
+        this.errorMessageOnInput = '';
         this.selectedPredefinedAmount = amount;
         switch (amount) {
             case 'Other':
+                this.newAmount = '';
                 this.showCustomAmount = true;
-                this.amount = '';
                 break;
             case 'Max':
+                this.newAmount = this.maxAmount.toString();
                 this.showCustomAmount = true;
-                this.amount = this.maxAmount.toString();
-                this.inputValue = this.maxAmount.toString();
                 break;
             default:
-                this.postPlayerSituation(this.amount, false, true);
+                this.newAmount = amount;
+                this.submitMonthlyDepositLimit(this.newAmount, false, true);
                 break;
         }
     }
@@ -388,15 +359,14 @@ const PlayerLugasLimit = class {
      * Renders the validator.
      */
     renderValidator() {
-        const displayedCurrency = this.currency === 'EUR' ? '€' : this.currency;
         const renderPredefinedButtons = () => {
-            return this.predefinedAmountsArray.map((currentAmount) => (index.h("button", { class: this.selectedPredefinedAmount === currentAmount ? 'Active' : '', onClick: () => this.handleAmountClick(currentAmount) }, currentAmount)));
+            return this.predefinedAmounts.map((currentAmount) => (index.h("button", { class: this.selectedPredefinedAmount === currentAmount ? 'Active' : '', onClick: () => this.handleAmountClick(currentAmount) }, currentAmount)));
         };
-        return (index.h("div", { class: "ValidatorContainer" }, this.errorMessage && (index.h("div", { class: "ErrorContainer" }, index.h("span", { class: "DismissError", onClick: () => this.errorMessage = '' }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "9", height: "9", viewBox: "0 0 9 9", fill: "none" }, index.h("path", { d: "M8.18659 0.14708C8.37063 0.33182 8.38174 0.62421 8.21888 0.821452L8.18659 0.857219L4.87619 4.16727L8.18659 7.47732C8.27743 7.56861 8.32973 7.69132 8.33266 7.82007C8.3356 7.94883 8.28895 8.0738 8.20235 8.16913C8.11576 8.26446 7.99584 8.32288 7.86739 8.3323C7.73895 8.34172 7.61179 8.30143 7.51221 8.21975L7.47645 8.18746L4.1664 4.87706L0.856348 8.18746C0.765058 8.27831 0.64235 8.3306 0.513592 8.33354C0.384834 8.33647 0.25987 8.28982 0.164536 8.20322C0.0692018 8.11663 0.0107856 7.99671 0.00136402 7.86827C-0.00805761 7.73982 0.0322357 7.61266 0.113914 7.51308L0.146209 7.47732L3.4566 4.16727L0.146209 0.857219C0.0553613 0.765928 0.00306475 0.64322 0.000130477 0.514462C-0.0028038 0.385704 0.0438486 0.260741 0.130443 0.165407C0.217038 0.0700723 0.336953 0.0116562 0.4654 0.00223455C0.593846 -0.00718708 0.721002 0.0331062 0.820581 0.114785L0.856348 0.14708L4.1664 3.45748L7.47645 0.14708C7.52307 0.10045 7.57843 0.0634608 7.63935 0.0382248C7.70027 0.0129888 7.76557 0 7.83152 0C7.89746 0 7.96276 0.0129888 8.02368 0.0382248C8.0846 0.0634608 8.13996 0.10045 8.18659 0.14708Z", fill: "#111111" }))), index.h("p", { class: "ErrorParagraph" }, index.h("span", { class: "ErrorIcon" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "9", height: "9", viewBox: "0 0 9 9" }, index.h("path", { d: "M8.18659 0.14708C8.37063 0.33182 8.38174 0.62421 8.21888 0.821452L8.18659 0.857219L4.87619 4.16727L8.18659 7.47732C8.27743 7.56861 8.32973 7.69132 8.33266 7.82007C8.3356 7.94883 8.28895 8.0738 8.20235 8.16913C8.11576 8.26446 7.99584 8.32288 7.86739 8.3323C7.73895 8.34172 7.61179 8.30143 7.51221 8.21975L7.47645 8.18746L4.1664 4.87706L0.856348 8.18746C0.765058 8.27831 0.64235 8.3306 0.513592 8.33354C0.384834 8.33647 0.25987 8.28982 0.164536 8.20322C0.0692018 8.11663 0.0107856 7.99671 0.00136402 7.86827C-0.00805761 7.73982 0.0322357 7.61266 0.113914 7.51308L0.146209 7.47732L3.4566 4.16727L0.146209 0.857219C0.0553613 0.765928 0.00306475 0.64322 0.000130477 0.514462C-0.0028038 0.385704 0.0438486 0.260741 0.130443 0.165407C0.217038 0.0700723 0.336953 0.0116562 0.4654 0.00223455C0.593846 -0.00718708 0.721002 0.0331062 0.820581 0.114785L0.856348 0.14708L4.1664 3.45748L7.47645 0.14708C7.52307 0.10045 7.57843 0.0634608 7.63935 0.0382248C7.70027 0.0129888 7.76557 0 7.83152 0C7.89746 0 7.96276 0.0129888 8.02368 0.0382248C8.0846 0.0634608 8.13996 0.10045 8.18659 0.14708Z" }))), this.errorMessage))), index.h("div", { class: "Paragraphs" }, index.h("p", null, translate('LugasInfoBox', this.lang))), index.h("div", { class: "LimitAmountWrapper" }, this.wasSubmitted
+        return (index.h("div", { class: "ValidatorContainer" }, this.errorMessageOnSubmit && (index.h("div", { class: "ErrorContainer" }, index.h("span", { class: "DismissError", onClick: () => this.errorMessageOnSubmit = '' }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "9", height: "9", viewBox: "0 0 9 9", fill: "none" }, index.h("path", { d: "M8.18659 0.14708C8.37063 0.33182 8.38174 0.62421 8.21888 0.821452L8.18659 0.857219L4.87619 4.16727L8.18659 7.47732C8.27743 7.56861 8.32973 7.69132 8.33266 7.82007C8.3356 7.94883 8.28895 8.0738 8.20235 8.16913C8.11576 8.26446 7.99584 8.32288 7.86739 8.3323C7.73895 8.34172 7.61179 8.30143 7.51221 8.21975L7.47645 8.18746L4.1664 4.87706L0.856348 8.18746C0.765058 8.27831 0.64235 8.3306 0.513592 8.33354C0.384834 8.33647 0.25987 8.28982 0.164536 8.20322C0.0692018 8.11663 0.0107856 7.99671 0.00136402 7.86827C-0.00805761 7.73982 0.0322357 7.61266 0.113914 7.51308L0.146209 7.47732L3.4566 4.16727L0.146209 0.857219C0.0553613 0.765928 0.00306475 0.64322 0.000130477 0.514462C-0.0028038 0.385704 0.0438486 0.260741 0.130443 0.165407C0.217038 0.0700723 0.336953 0.0116562 0.4654 0.00223455C0.593846 -0.00718708 0.721002 0.0331062 0.820581 0.114785L0.856348 0.14708L4.1664 3.45748L7.47645 0.14708C7.52307 0.10045 7.57843 0.0634608 7.63935 0.0382248C7.70027 0.0129888 7.76557 0 7.83152 0C7.89746 0 7.96276 0.0129888 8.02368 0.0382248C8.0846 0.0634608 8.13996 0.10045 8.18659 0.14708Z", fill: "#111111" }))), index.h("p", { class: "ErrorParagraph" }, index.h("span", { class: "ErrorIcon" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "9", height: "9", viewBox: "0 0 9 9" }, index.h("path", { d: "M8.18659 0.14708C8.37063 0.33182 8.38174 0.62421 8.21888 0.821452L8.18659 0.857219L4.87619 4.16727L8.18659 7.47732C8.27743 7.56861 8.32973 7.69132 8.33266 7.82007C8.3356 7.94883 8.28895 8.0738 8.20235 8.16913C8.11576 8.26446 7.99584 8.32288 7.86739 8.3323C7.73895 8.34172 7.61179 8.30143 7.51221 8.21975L7.47645 8.18746L4.1664 4.87706L0.856348 8.18746C0.765058 8.27831 0.64235 8.3306 0.513592 8.33354C0.384834 8.33647 0.25987 8.28982 0.164536 8.20322C0.0692018 8.11663 0.0107856 7.99671 0.00136402 7.86827C-0.00805761 7.73982 0.0322357 7.61266 0.113914 7.51308L0.146209 7.47732L3.4566 4.16727L0.146209 0.857219C0.0553613 0.765928 0.00306475 0.64322 0.000130477 0.514462C-0.0028038 0.385704 0.0438486 0.260741 0.130443 0.165407C0.217038 0.0700723 0.336953 0.0116562 0.4654 0.00223455C0.593846 -0.00718708 0.721002 0.0331062 0.820581 0.114785L0.856348 0.14708L4.1664 3.45748L7.47645 0.14708C7.52307 0.10045 7.57843 0.0634608 7.63935 0.0382248C7.70027 0.0129888 7.76557 0 7.83152 0C7.89746 0 7.96276 0.0129888 8.02368 0.0382248C8.0846 0.0634608 8.13996 0.10045 8.18659 0.14708Z" }))), this.errorMessageOnSubmit))), index.h("div", { class: "Paragraphs" }, index.h("p", null, translate('LugasInfoBox', this.lang))), index.h("div", { class: "LimitAmountWrapper" }, this.isSubmitted
             && index.h("slot", { name: 'spinner' })
             && index.h("div", { class: "LoadingWrapper" }, index.h("svg", { class: "spinner", viewBox: "0 0 50 50" }, index.h("circle", { class: "path", cx: "25", cy: "25", r: "20", fill: "none", "stroke-width": "5" }))), index.h("p", { class: "ChooseLimitLabel" }, translate('ChooseLimit', this.lang)), index.h("div", { class: "PredefinedAmounts" }, index.h("button", { class: this.selectedPredefinedAmount === 'Other' ? 'Active' : '', onClick: () => this.handleAmountClick('Other') }, translate('ButtonCustomValue', this.lang)), renderPredefinedButtons(), index.h("button", { class: this.selectedPredefinedAmount === 'Max' ? 'Active' : '', onClick: () => this.handleAmountClick('Max') }, translate('ButtonMax', this.lang))), this.showCustomAmount && (index.h("form", { onSubmit: (event) => this.handleSubmit(event) }, this.showCustomAmount &&
-            index.h("div", null, index.h("input", { class: `CustomAmountInput ${this.showInvalidInputError ? 'InvalidInput' : ''}`, type: "number", value: this.amount, onInput: (event) => this.handleInputChange(event), placeholder: "0.00", disabled: this.selectedPredefinedAmount === 'Max' }), this.showInvalidInputError && (index.h("p", { class: "InvalidParagraph" }, translate('invalidInputMessageLimit', this.lang, { values: { currency: displayedCurrency, minValue: this.minAmount, maxValue: this.maxAmount } })))), this.selectedPredefinedAmount &&
-            index.h("button", { class: "PrimaryButton SetLimitBtn", type: "submit", disabled: this.wasSubmitted }, translate('LugasSetLimitDialogButtonSetLimit', this.lang, { values: { currency: displayedCurrency, amount: this.inputValue || '0.00' } }))))), index.h("div", { class: "ModalFooter" }, index.h("hr", null), index.h("div", { class: "Paragraphs" }, index.h("p", { class: "ExistingLimit" }, translate('LugasSetLimitDialogExistingLimit.text', this.lang), index.h("span", { class: "Link", onClick: () => this.postPlayerSituation(this.amount, true) }, translate('LugasSetLimitDialogExistingLimit.link', this.lang))), index.h("p", { class: "PrivacyNote" }, translate('LugasSetLimitDialogPrivacyNote.text', this.lang), index.h("span", { class: "Link", onClick: this.goToPrivacyPolicy }, translate('LugasSetLimitDialogPrivacyNote.link', this.lang)))))));
+            index.h("div", null, index.h("input", { class: `CustomAmountInput ${this.errorMessageOnInput ? 'InvalidInput' : ''}`, type: "number", value: this.selectedPredefinedAmount === 'Max' ? this.maxAmount : null, step: 0.01, placeholder: "0.00", disabled: this.selectedPredefinedAmount === 'Max', onInput: (event) => this.handleInputChange(event) }), this.errorMessageOnInput && index.h("p", { class: "InvalidParagraph" }, this.errorMessageOnInput)), this.selectedPredefinedAmount &&
+            index.h("button", { class: "PrimaryButton SetLimitBtn", type: "submit", disabled: this.isSubmitted || !Boolean(this.newAmount) || Boolean(this.errorMessageOnInput) }, translate('LugasSetLimitDialogButtonSetLimit', this.lang, { values: { currency: this.displayedCurrency, amount: this.newAmount || '0.00' } }))))), index.h("div", { class: "ModalFooter" }, index.h("hr", null), index.h("div", { class: "Paragraphs" }, index.h("p", { class: "ExistingLimit" }, translate('LugasSetLimitDialogExistingLimit.text', this.lang), index.h("span", { class: this.isUseExistingLimitOptionActive ? 'Link' : 'Link Inactive', onClick: () => this.submitMonthlyDepositLimit(this.amount, true) }, translate('LugasSetLimitDialogExistingLimit.link', this.lang))), index.h("p", { class: "PrivacyNote" }, translate('LugasSetLimitDialogPrivacyNote.text', this.lang), index.h("span", { class: "Link", onClick: this.goToPrivacyPolicy }, translate('LugasSetLimitDialogPrivacyNote.link', this.lang)))))));
     }
     /**
      * Renders the component.
@@ -405,8 +375,8 @@ const PlayerLugasLimit = class {
         if (this.isLoading) {
             return (index.h("div", null, index.h("p", null, translate('loading', this.lang, { values: { currency: this.currency } }))));
         }
-        else if (this.hasErrors) {
-            return (index.h("div", null, index.h("p", null, translate('error', this.lang))));
+        else if (this.errorMessageOnInitialization) {
+            return (index.h("div", null, index.h("p", null, this.errorMessageOnInitialization)));
         }
         else {
             const validationContainer = this.renderValidator();

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

@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["player-lugas-limit.cjs",[[1,"player-lugas-limit",{"userId":[1,"user-id"],"session":[1],"endpoint":[1],"currency":[1],"amount":[1],"lang":[1],"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"mbSource":[1,"mb-source"],"translationUrl":[1,"translation-url"],"showCustomAmount":[32],"isLoading":[32],"hasErrors":[32],"inputValue":[32],"showInvalidInputError":[32],"predefinedAmountsArray":[32],"isWithinRange":[32],"minimumRange":[32],"selectedPredefinedAmount":[32],"errorMessage":[32],"wasSubmitted":[32],"minAmount":[32],"maxAmount":[32]},null,{"translationUrl":["handleNewTranslations"],"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"]}]]]], options);
+  return index.bootstrapLazy([["player-lugas-limit.cjs",[[1,"player-lugas-limit",{"userId":[1,"user-id"],"session":[1],"endpoint":[1],"currency":[1],"amount":[1],"lang":[1],"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"mbSource":[1,"mb-source"],"translationUrl":[1,"translation-url"],"isLoading":[32],"showCustomAmount":[32],"isSubmitted":[32],"isUseExistingLimitOptionActive":[32],"selectedPredefinedAmount":[32],"errorMessageOnInitialization":[32],"errorMessageOnSubmit":[32],"errorMessageOnInput":[32],"newAmount":[32]},null,{"translationUrl":["handleNewTranslations"],"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

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

@@ -39,6 +39,9 @@
 .ModalContainer button.PrimaryButton:not(:disabled) {
   color: var(--emw--color-white, #FFF);
 }
+.ModalContainer button.PrimaryButton:disabled {
+  cursor: default;
+}
 .ModalContainer .Container {
   position: fixed;
   top: 30vh;
@@ -174,6 +177,10 @@
   text-decoration: underline;
   cursor: pointer;
 }
+.ModalContainer .Link.Inactive {
+  cursor: default;
+  color: var(--emw--color-gray-150, #808080);
+}
 .ModalContainer .PrivacyNote {
   font-size: var(--emw--font-size-x-small, 10px);
   font-style: italic;