From 87749c379af5cdea49f1c7d436137e3b735d76d8 Mon Sep 17 00:00:00 2001 From: I Nyoman Jyotisa Date: Thu, 16 Jan 2025 09:20:39 +0800 Subject: [PATCH 1/4] Fix: In 2FA magic code page, after refresh briefly error message is displayed --- .../ValidateCodeForm/BaseValidateCodeForm.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx b/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx index 7e2d150c2fc4..d9d1093b728b 100644 --- a/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx +++ b/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx @@ -101,6 +101,7 @@ function BaseValidateCodeForm({ const shouldDisableResendValidateCode = !!isOffline || account?.isLoading; const focusTimeoutRef = useRef(null); const [timeRemaining, setTimeRemaining] = useState(CONST.REQUEST_CODE_DELAY as number); + const [canShowError, setCanShowError] = useState(false); const timerRef = useRef(); @@ -195,6 +196,7 @@ function BaseValidateCodeForm({ * Check that all the form fields are valid, then trigger the submit callback */ const validateAndSubmitForm = useCallback(() => { + setCanShowError(true); if (!validateCode.trim()) { setFormError({validateCode: 'validateCodeForm.error.pleaseFillMagicCode'}); return; @@ -218,8 +220,8 @@ function BaseValidateCodeForm({ name="validateCode" value={validateCode} onChangeText={onTextInput} - errorText={formError?.validateCode ? translate(formError?.validateCode) : ErrorUtils.getLatestErrorMessage(account ?? {})} - hasError={!isEmptyObject(validateError)} + errorText={canShowError ? (formError?.validateCode ? translate(formError?.validateCode) : ErrorUtils.getLatestErrorMessage(account ?? {})) : ''} + hasError={canShowError ? !isEmptyObject(validateError) : false} onFulfill={validateAndSubmitForm} autoFocus={false} /> @@ -263,7 +265,7 @@ function BaseValidateCodeForm({ clearError()} style={buttonStyles} From 74e3cacdd3f2f06538ca3bdacb7943af16cf9dbc Mon Sep 17 00:00:00 2001 From: I Nyoman Jyotisa Date: Thu, 16 Jan 2025 10:41:49 +0800 Subject: [PATCH 2/4] ESLint fix --- .../ValidateCodeForm/BaseValidateCodeForm.tsx | 29 ++++++++++++------- 1 file changed, 19 insertions(+), 10 deletions(-) diff --git a/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx b/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx index d9d1093b728b..6fba9fdaf6e6 100644 --- a/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx +++ b/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx @@ -16,10 +16,10 @@ import useNetwork from '@hooks/useNetwork'; import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; -import * as Browser from '@libs/Browser'; -import * as ErrorUtils from '@libs/ErrorUtils'; -import * as ValidationUtils from '@libs/ValidationUtils'; -import * as User from '@userActions/User'; +import {isMobileSafari} from '@libs/Browser'; +import {getLatestErrorField, getLatestErrorMessage} from '@libs/ErrorUtils'; +import {isValidValidateCode} from '@libs/ValidationUtils'; +import {clearValidateCodeActionError} from '@userActions/User'; import CONST from '@src/CONST'; import type {TranslationPaths} from '@src/languages/types'; import ONYXKEYS from '@src/ONYXKEYS'; @@ -132,7 +132,7 @@ function BaseValidateCodeForm({ } // Keyboard won't show if we focus the input with a delay, so we need to focus immediately. - if (!Browser.isMobileSafari()) { + if (!isMobileSafari()) { focusTimeoutRef.current = setTimeout(() => { inputValidateCodeRef.current?.focusLastSelected(); }, CONST.ANIMATED_TRANSITION); @@ -186,7 +186,7 @@ function BaseValidateCodeForm({ if (!isEmptyObject(validateError)) { clearError(); - User.clearValidateCodeActionError('actionVerified'); + clearValidateCodeActionError('actionVerified'); } }, [validateError, clearError], @@ -202,7 +202,7 @@ function BaseValidateCodeForm({ return; } - if (!ValidationUtils.isValidValidateCode(validateCode)) { + if (!isValidValidateCode(validateCode)) { setFormError({validateCode: 'validateCodeForm.error.incorrectMagicCode'}); return; } @@ -220,7 +220,16 @@ function BaseValidateCodeForm({ name="validateCode" value={validateCode} onChangeText={onTextInput} - errorText={canShowError ? (formError?.validateCode ? translate(formError?.validateCode) : ErrorUtils.getLatestErrorMessage(account ?? {})) : ''} + errorText={ + canShowError + ? (() => { + if (formError?.validateCode) { + return translate(formError?.validateCode); + } + return getLatestErrorMessage(account ?? {}); + })() + : '' + } hasError={canShowError ? !isEmptyObject(validateError) : false} onFulfill={validateAndSubmitForm} autoFocus={false} @@ -233,9 +242,9 @@ function BaseValidateCodeForm({ )} User.clearValidateCodeActionError('actionVerified')} + onClose={() => clearValidateCodeActionError('actionVerified')} > {!shouldShowTimer && ( From cf5f2ce53cb640d8b23fe3eb4d15ef1d8a473b78 Mon Sep 17 00:00:00 2001 From: I Nyoman Jyotisa Date: Fri, 17 Jan 2025 09:17:43 +0800 Subject: [PATCH 3/4] minor fix --- .../ValidateCodeForm/BaseValidateCodeForm.tsx | 23 ++++++++++--------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx b/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx index 6fba9fdaf6e6..5e9aed8aa5cd 100644 --- a/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx +++ b/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx @@ -1,6 +1,6 @@ import {useFocusEffect} from '@react-navigation/native'; import type {ForwardedRef} from 'react'; -import React, {useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react'; +import React, {useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react'; import {View} from 'react-native'; import type {StyleProp, ViewStyle} from 'react-native'; import {useOnyx} from 'react-native-onyx'; @@ -211,6 +211,16 @@ function BaseValidateCodeForm({ handleSubmitForm(validateCode); }, [validateCode, handleSubmitForm]); + const errorText = useMemo(() => { + if (!canShowError) { + return ''; + } + if (formError?.validateCode) { + return translate(formError?.validateCode); + } + return getLatestErrorMessage(account ?? {}); + }, [canShowError, formError, account]); + const shouldShowTimer = timeRemaining > 0 && !isOffline; return ( <> @@ -220,16 +230,7 @@ function BaseValidateCodeForm({ name="validateCode" value={validateCode} onChangeText={onTextInput} - errorText={ - canShowError - ? (() => { - if (formError?.validateCode) { - return translate(formError?.validateCode); - } - return getLatestErrorMessage(account ?? {}); - })() - : '' - } + errorText={errorText} hasError={canShowError ? !isEmptyObject(validateError) : false} onFulfill={validateAndSubmitForm} autoFocus={false} From a2ad7db632551ef2af7fe80f26097df76ee85058 Mon Sep 17 00:00:00 2001 From: I Nyoman Jyotisa Date: Fri, 17 Jan 2025 09:21:58 +0800 Subject: [PATCH 4/4] ESLint fix --- .../ValidateCodeForm/BaseValidateCodeForm.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx b/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx index 5e9aed8aa5cd..80861eb16dfb 100644 --- a/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx +++ b/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx @@ -219,7 +219,7 @@ function BaseValidateCodeForm({ return translate(formError?.validateCode); } return getLatestErrorMessage(account ?? {}); - }, [canShowError, formError, account]); + }, [canShowError, formError, account, translate]); const shouldShowTimer = timeRemaining > 0 && !isOffline; return (