Shaheer/92065/error message translation

packages/account/src/Sections/Security/TwoFactorAuthentication/digit-form.jsx

@@ -1,51 +1,58 @@
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { Formik, Form, Field } from 'formik';
 import { Input, Button } from '@deriv/components';
-import { localize } from '@deriv/translations';
 import { getPropertyValue, WS } from '@deriv/shared';
+import { localize } from '@deriv/translations';
 
-const DigitForm = ({ is_enabled, setTwoFAStatus, setTwoFAChangedStatus }) => {
-    const [is_success, setSuccess] = React.useState(false);
+const DigitForm = ({ is_enabled, setTwoFAStatus, setTwoFAChangedStatus, is_language_changing }) => {
+    const [is_success, setSuccess] = useState(false);
+    const [is_ready_for_verification, setReadyForVerification] = useState(false);
     const button_text = is_enabled ? localize('Disable') : localize('Enable');
+    const formik_ref = useRef();
+    let enable_response;
 
     const initial_form = {
         digit_code: '',
     };
 
-    const validateFields = values => {
-        const errors = {};
+    useEffect(() => {
+        if (is_language_changing) {
+            formik_ref.current.setFieldTouched('digit_code');
+        }
+    }, [is_language_changing]);
 
+    const validateFields = async values => {
         const digit_code = values.digit_code;
-
         if (!digit_code) {
-            errors.digit_code = localize('Digit code is required.');
+            return { digit_code: localize('Digit code is required.') };
         } else if (!(digit_code.length === 6)) {
-            errors.digit_code = localize('Length of digit code must be 6 characters.');
+            return { digit_code: localize('Length of digit code must be 6 characters.') };
         } else if (!/^[0-9]{6}$/g.test(digit_code)) {
-            errors.digit_code = localize('Digit code must only contain numbers.');
+            return { digit_code: localize('Digit code must only contain numbers.') };
+        } else if (is_ready_for_verification) {
+            if (formik_ref.current.isValid) {
+                const totp_action = is_enabled ? 'disable' : 'enable';
+                enable_response = await WS.authorized.accountSecurity({
+                    account_security: 1,
+                    totp_action,
+                    otp: values.digit_code,
+                });
+                if (enable_response.error) {
+                    const { code, message } = enable_response.error;
+                    if (code === 'InvalidOTP')
+                        return { digit_code: localize("That's not the right code. Please try again.") };
+                    return { digit_code: message };
+                }
+            } else {
+                return { digit_code: localize("That's not the right code. Please try again.") };
+            }
         }
-
-        return errors;
+        return {};
     };
 
-    const handleSubmit = async (values, { setSubmitting, setFieldError, resetForm }) => {
-        const totp_action = is_enabled ? 'disable' : 'enable';
-        const enable_response = await WS.authorized.accountSecurity({
-            account_security: 1,
-            totp_action,
-            otp: values.digit_code,
-        });
-        setSubmitting(false);
-
-        if (enable_response.error) {
-            const { code, message } = enable_response.error;
-            if (code === 'InvalidOTP') {
-                setFieldError('digit_code', localize("That's not the right code. Please try again."));
-            } else {
-                setFieldError('digit_code', message);
-            }
-        } else {
+    const handleSubmit = async (values, { resetForm }) => {
+        if (!enable_response.error) {
             const is_enabled_response = !!getPropertyValue(enable_response, ['account_security', 'totp', 'is_enabled']);
             setSuccess(true);
             resetForm();
@@ -55,7 +62,7 @@ const DigitForm = ({ is_enabled, setTwoFAStatus, setTwoFAChangedStatus }) => {
     };
 
     return (
-        <Formik initialValues={initial_form} onSubmit={handleSubmit} validate={validateFields}>
+        <Formik initialValues={initial_form} onSubmit={handleSubmit} validate={validateFields} innerRef={formik_ref}>
             {({ values, errors, isValid, touched, handleChange, handleBlur, isSubmitting, dirty }) => (
                 <Form noValidate>
                     <div className='two-factor__input-group'>
@@ -68,7 +75,10 @@ const DigitForm = ({ is_enabled, setTwoFAStatus, setTwoFAChangedStatus }) => {
                                     className='two-factor__input'
                                     label={localize('Authentication code')}
                                     value={values.digit_code}
-                                    onChange={handleChange}
+                                    onChange={e => {
+                                        handleChange(e);
+                                        setReadyForVerification(false);
+                                    }}
                                     onBlur={handleBlur}
                                     required
                                     error={touched.digit_code && errors.digit_code}
@@ -87,6 +97,7 @@ const DigitForm = ({ is_enabled, setTwoFAStatus, setTwoFAChangedStatus }) => {
                             is_loading={isSubmitting}
                             is_submit_success={is_success}
                             text={button_text}
+                            onClick={() => setReadyForVerification(true)}
                             large
                             primary
                         />

packages/account/src/Sections/Security/TwoFactorAuthentication/two-factor-authentication.jsx

@@ -21,12 +21,13 @@ import TwoFactorAuthenticationArticle from './two-factor-authentication-article.
 
 const TwoFactorAuthentication = ({
     email_address,
-    is_switching,
-    setTwoFAStatus,
     getTwoFAStatus,
     has_enabled_two_fa,
+    is_language_changing,
+    is_switching,
     Notifications,
     setTwoFAChangedStatus,
+    setTwoFAStatus,
 }) => {
     const [is_loading, setLoading] = React.useState(true);
     const [is_qr_loading, setQrLoading] = React.useState(false);
@@ -93,6 +94,7 @@ const TwoFactorAuthentication = ({
                     is_enabled={has_enabled_two_fa}
                     setTwoFAStatus={setTwoFAStatus}
                     setTwoFAChangedStatus={setTwoFAChangedStatus}
+                    is_language_changing={is_language_changing}
                 />
             </div>
         </ThemedScrollbars>
@@ -182,6 +184,7 @@ const TwoFactorAuthentication = ({
                                 is_enabled={has_enabled_two_fa}
                                 setTwoFAStatus={setTwoFAStatus}
                                 setTwoFAChangedStatus={setTwoFAChangedStatus}
+                                is_language_changing={is_language_changing}
                             />
                         </Timeline.Item>
                     </Timeline>
@@ -209,20 +212,22 @@ const TwoFactorAuthentication = ({
 
 TwoFactorAuthentication.propTypes = {
     email_address: PropTypes.string,
-    is_switching: PropTypes.bool,
-    setTwoFAStatus: PropTypes.func,
     getTwoFAStatus: PropTypes.func,
     has_enabled_two_fa: PropTypes.bool,
+    is_language_changing: PropTypes.bool,
+    is_switching: PropTypes.bool,
     Notifications: PropTypes.node,
     setTwoFAChangedStatus: PropTypes.func,
+    setTwoFAStatus: PropTypes.func,
 };
 
-export default connect(({ client, ui }) => ({
+export default connect(({ client, ui, common }) => ({
     email_address: client.email_address,
-    is_switching: client.is_switching,
-    setTwoFAStatus: client.setTwoFAStatus,
     getTwoFAStatus: client.getTwoFAStatus,
     has_enabled_two_fa: client.has_enabled_two_fa,
+    is_language_changing: common.is_language_changing,
+    is_switching: client.is_switching,
     Notifications: ui.notification_messages_ui,
     setTwoFAChangedStatus: client.setTwoFAChangedStatus,
+    setTwoFAStatus: client.setTwoFAStatus,
 }))(TwoFactorAuthentication);