george / rm73888 / fix Transfer button enabling when amount field is …

…empty (binary-com#6252) * fix(account transfer): fix Transfer button enabling when amount field is empty * fix(account transfer): fix Transfer button enabling between account with the same currency * refactor(account transfer): refactor condition into function * fix(account transfer): disable Transfer button when amount is not valid * fix(account transfer): fix validation error visibility
mahdiyeh-deriv · Sep 14, 2022 · 2760f6d · 2760f6d
1 parent 48aad23
commit 2760f6d
Showing 1 changed file with 12 additions and 9 deletions.
diff --git a/packages/cashier/src/pages/account-transfer/account-transfer-form/account-transfer-form.tsx b/packages/cashier/src/pages/account-transfer/account-transfer-form/account-transfer-form.tsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import React from 'react';
 import { Field, FieldProps, Formik, Form } from 'formik';
-import { Button, Dropdown, Icon, Input, Loading, Money, MobileWrapper, Text } from '@deriv/components';
+import { Button, Dropdown, Icon, Input, Loading, Money, Text } from '@deriv/components';
 import {
     getDecimalPlaces,
     getCurrencyDisplayCode,
@@ -202,6 +202,10 @@ const AccountTransferForm = ({
         return undefined;
     };
 
+    const shouldShowTransferButton = (amount: string) => {
+        return selected_from.currency === selected_to.currency ? !amount : !converter_from_amount;
+    };
+
     const getAccounts = (type: string, { is_mt, is_dxtrade }: TAccount) => {
         if (type === 'from') {
             if (is_mt) return mt_accounts_from;
@@ -376,7 +380,7 @@ const AccountTransferForm = ({
                 validateOnBlur={false}
                 enableReinitialize
             >
-                {({ errors, handleChange, isSubmitting, touched, setFieldValue, setFieldTouched, setFieldError }) => (
+                {({ errors, handleChange, isSubmitting, setFieldValue, setFieldError, values }) => (
                     <React.Fragment>
                         {isSubmitting || accounts_list.length === 0 ? (
                             <div className='cashier__loader-wrapper' data-testid='dt_cashier_loader_wrapper'>
@@ -406,8 +410,7 @@ const AccountTransferForm = ({
                                             onChangeTransferFrom(e);
                                             handleChange(e);
                                             setFieldValue('amount', '');
-                                            setFieldError('amount', '');
-                                            setFieldTouched('amount', false);
+                                            setTimeout(() => setFieldError('amount', ''));
                                         }}
                                         error={selected_from.error}
                                     />
@@ -429,8 +432,7 @@ const AccountTransferForm = ({
                                         onChange={(e: TReactChangeEvent) => {
                                             onChangeTransferTo(e);
                                             setFieldValue('amount', '');
-                                            setFieldError('amount', '');
-                                            setFieldTouched('amount', false);
+                                            setTimeout(() => setFieldError('amount', ''));
                                         }}
                                         hint={transfer_to_hint}
                                         error={selected_to.error}
@@ -445,15 +447,14 @@ const AccountTransferForm = ({
                                                     setErrorMessage('');
                                                     handleChange(e);
                                                     setAccountTransferAmount(e.target.value);
-                                                    setFieldTouched('amount', true, false);
                                                 }}
                                                 className='cashier__input dc-input--no-placeholder account-transfer-form__input'
                                                 classNameHint='account-transfer-form__hint'
                                                 data-testid='dt_account_transfer_form_input'
                                                 name='amount'
                                                 type='text'
                                                 label={localize('Amount')}
-                                                error={touched.amount && errors.amount ? errors.amount : ''}
+                                                error={errors.amount ? errors.amount : ''}
                                                 required
                                                 trailing_icon={
                                                     selected_from.currency ? (
@@ -556,7 +557,9 @@ const AccountTransferForm = ({
                                             !!selected_to.error ||
                                             !+selected_from.balance ||
                                             !!converter_from_error ||
-                                            !!converter_to_error
+                                            !!converter_to_error ||
+                                            !!errors.amount ||
+                                            shouldShowTransferButton(values.amount)
                                         }
                                         primary
                                         large