Hubert / HOTFIX for deposit error message (#6785)

* adding deposit error message functionality

* removing comment

* refactoring code

* refactoring code

Co-authored-by: Hubert Koster <hubertkoster@Huberts-MacBook-Pro.local>

Author: hubert-deriv

src/javascript/app/pages/user/metatrader/metatrader.config.js

@@ -8,7 +8,6 @@ const Validation   = require('../../../common/form_validation');
 const GTM          = require('../../../../_common/base/gtm');
 const localize     = require('../../../../_common/localize').localize;
 const State        = require('../../../../_common/storage').State;
-const urlFor       = require('../../../../_common/url').urlFor;
 const isBinaryApp  = require('../../../../config').isBinaryApp;
 
 const MetaTraderConfig = (() => {
@@ -440,28 +439,14 @@ const MetaTraderConfig = (() => {
                 selector   : fields.deposit.txt_amount.id,
                 validations: [
                     ['req', { hide_asterisk: true }],
-                    // check if entered amount is less than the available balance
-                    // e.g. transfer amount is 10 but client balance is 5
-                    ['custom', {
-                        func: () => {
-                            const balance = Client.get('balance');
-
-                            const is_balance_more_than_entered = +balance >= +$(fields.deposit.txt_amount.id).val();
-
-                            return balance && is_balance_more_than_entered;
-                        },
-                        message: localize('You have insufficient funds in your Binary account, please <a href="[_1]">add funds</a>.', urlFor('cashier')),
-                    }],
                     // check if balance is less than the minimum limit for transfer
                     // e.g. client balance could be 0.45 but min limit could be 1
                     ['custom', {
                         func: () => {
-                            const balance         = Client.get('balance');
+                            const deposit_input_value   = document.querySelector('#txt_amount_deposit').value;
                             const min_req_balance = Currency.getTransferLimits(Client.get('currency'), 'min', 'mt5');
 
-                            const is_balance_more_than_min_req = +balance >= +min_req_balance;
-
-                            return balance && is_balance_more_than_min_req;
+                            return +deposit_input_value > +min_req_balance;
                         },
                         message: localize('Should be more than [_1]', Currency.getTransferLimits(Client.get('currency'), 'min', 'mt5')),
                     }],

src/javascript/app/pages/user/metatrader/metatrader.ui.js

@@ -560,6 +560,8 @@ const MetaTraderUI = (() => {
             $form.find('label[for="txt_amount_withdrawal"]').append(` ${mt_currency}`);
 
             const should_show_transfer_fee = client_currency !== mt_currency;
+            const txt_amount_deposit_element = $form.find('#txt_amount_deposit');
+            
             if (should_show_transfer_fee) {
                 $('#transfer_fee_amount_to').text(getTransferFee(client_currency, mt_currency));
                 $('#transfer_fee_minimum_to').text(Currency.getMinimumTransferFee(client_currency));
@@ -568,6 +570,17 @@ const MetaTraderUI = (() => {
             }
             $form.find('#txt_amount_deposit, #txt_amount_withdrawal').siblings('.hint').setVisibility(should_show_transfer_fee);
 
+            txt_amount_deposit_element.on('input', () => {
+                const balance = Client.get('balance');
+                const insufficient_funds_error = $form.find('#insufficient_funds');
+                const is_balance_more_than_entered = balance >= txt_amount_deposit_element.val();
+
+                if (is_balance_more_than_entered) {
+                    return insufficient_funds_error.setVisibility(0);
+                }
+                return insufficient_funds_error.setVisibility(1);
+            });
+
             ['deposit', 'withdrawal'].forEach((act) => {
                 actions_info[act].prerequisites(acc_type).then((error_msg) => {
                     if (error_msg) {

src/sass/app/metatrader.scss

@@ -340,6 +340,12 @@
                     font-weight: bold;
                     color: $COLOR_GRAY_SHADE;
                 }
+                #insufficient_funds {
+                    .insufficient-funds-error-link {
+                        color: $COLOR_RED;
+                    }
+                    text-align: left;
+                }
                 #mt5_remaining_transfers .empty {
                     color: $COLOR_RED;
                 }

src/templates/app/user/metatrader.jsx

@@ -543,6 +543,9 @@ const Metatrader = () => (
 
                                         <div className='form'>
                                             <FormRow is_two_rows type='text' id='txt_amount_deposit' label={it.L('Amount')} attributes={{ maxLength: 10 }} hint={it.L('Subject to [_1] transfer fee or [_2], whichever is higher', '<strong id="transfer_fee_amount_to"></strong>', '<strong id="transfer_fee_minimum_to"></strong>')} />
+                                            <p id='insufficient_funds' className='error-msg center-text invisible'>
+                                                {it.L('You have insufficient funds in your Binary account, please <a class="insufficient-funds-error-link" href="[_1]">add funds</a>.', it.url_for('cashier'))}
+                                            </p>
                                             <SubmitButton
                                                 is_centered
                                                 is_full_width