Reuse Onyx's validateCodeAction everywhere for handling errors of magic code

src/ONYXKEYS.ts

@@ -105,7 +105,7 @@ const ONYXKEYS = {
     PENDING_CONTACT_ACTION: 'pendingContactAction',
 
     /** Store the information of magic code */
-    VALIDATE_ACTION_CODE: 'validate_action_code',
+    VALIDATE_ACTION_CODE: 'validateActionCode',
 
     /** A list of policies that a user can join */
     JOINABLE_POLICIES: 'joinablePolicies',

src/components/ValidateCodeActionForm/index.tsx

@@ -1,11 +1,9 @@
 import React, {forwardRef, useEffect, useRef} from 'react';
 import {View} from 'react-native';
-import {useOnyx} from 'react-native-onyx';
 import Text from '@components/Text';
 import ValidateCodeForm from '@components/ValidateCodeActionModal/ValidateCodeForm';
 import type {ValidateCodeFormHandle} from '@components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm';
 import useThemeStyles from '@hooks/useThemeStyles';
-import ONYXKEYS from '@src/ONYXKEYS';
 import type {ValidateCodeActionFormProps} from './type';
 
 function ValidateCodeActionForm({
@@ -15,19 +13,16 @@ function ValidateCodeActionForm({
     descriptionSecondaryStyles,
     validatePendingAction,
     validateError,
+    hasMagicCodeBeenSent,
     handleSubmitForm,
     clearError,
     sendValidateCode,
-    hasMagicCodeBeenSent,
     isLoading,
     submitButtonText,
     forwardedRef,
     shouldSkipInitialValidation,
 }: ValidateCodeActionFormProps) {
     const themeStyles = useThemeStyles();
-
-    const [validateCodeAction] = useOnyx(ONYXKEYS.VALIDATE_ACTION_CODE, {canBeMissing: true});
-
     const isUnmounted = useRef(false);
 
     useEffect(() => {
@@ -56,15 +51,15 @@ function ValidateCodeActionForm({
             {!!descriptionSecondary && <Text style={[themeStyles.mb6, descriptionSecondaryStyles]}>{descriptionSecondary}</Text>}
             <ValidateCodeForm
                 isLoading={isLoading}
-                validateCodeAction={validateCodeAction}
+                hasMagicCodeBeenSent={hasMagicCodeBeenSent}
                 validatePendingAction={validatePendingAction}
+                validateCodeActionErrorField="validateLogin"
                 validateError={validateError}
                 handleSubmitForm={handleSubmitForm}
                 sendValidateCode={sendValidateCode}
                 clearError={clearError}
                 buttonStyles={[themeStyles.justifyContentEnd, themeStyles.flex1]}
                 ref={forwardedRef}
-                hasMagicCodeBeenSent={hasMagicCodeBeenSent}
                 submitButtonText={submitButtonText}
             />
         </View>

src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx

@@ -23,7 +23,6 @@ import {clearValidateCodeActionError} from '@userActions/User';
 import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {ValidateMagicCodeAction} from '@src/types/onyx';
 import type {Errors, PendingAction} from '@src/types/onyx/OnyxCommon';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 
@@ -37,20 +36,25 @@ type ValidateCodeFormError = {
 };
 
 type ValidateCodeFormProps = {
-    /** If the magic code has been resent previously */
-    hasMagicCodeBeenSent?: boolean;
-
     /** Specifies autocomplete hints for the system, so it can provide autofill */
     autoComplete?: AutoCompleteVariant;
 
     /** Forwarded inner ref */
     innerRef?: ForwardedRef<ValidateCodeFormHandle>;
 
-    /** The state of magic code that being sent */
-    validateCodeAction?: ValidateMagicCodeAction;
+    hasMagicCodeBeenSent?: boolean;
 
-    /** The pending action for submitting form */
-    validatePendingAction?: PendingAction | null;
+    /** The pending action of magic code being sent
+     * if not supplied, we will retrieve it from the validateCodeAction above: `validateCodeAction.pendingFields.validateCodeSent`
+     */
+    validatePendingAction?: PendingAction;
+
+    /** The field where any magic code error will be stored. e.g. if replacing a card and magic code fails, it'll be stored in:
+     * {"errorFields": {"replaceLostCard": {<timestamp>}}}
+     * If replacing a virtual card, the errorField wil be 'reportVirtualCard', etc.
+     * These values are set in the backend, please reach out to an internal engineer if you're adding a validate code modal to a flow.
+     */
+    validateCodeActionErrorField: string;
 
     /** The error of submitting  */
     validateError?: Errors;
@@ -87,10 +91,10 @@ type ValidateCodeFormProps = {
 };
 
 function BaseValidateCodeForm({
-    hasMagicCodeBeenSent,
     autoComplete = 'one-time-code',
     innerRef = () => {},
-    validateCodeAction,
+    hasMagicCodeBeenSent,
+    validateCodeActionErrorField,
     validatePendingAction,
     validateError,
     handleSubmitForm,
@@ -115,13 +119,15 @@ function BaseValidateCodeForm({
     const [account = {}] = useOnyx(ONYXKEYS.ACCOUNT, {
         canBeMissing: true,
     });
+
     // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- nullish coalescing doesn't achieve the same result in this case
     const shouldDisableResendValidateCode = !!isOffline || account?.isLoading;
     const focusTimeoutRef = useRef<NodeJS.Timeout | null>(null);
     const [timeRemaining, setTimeRemaining] = useState(CONST.REQUEST_CODE_DELAY as number);
     const [canShowError, setCanShowError] = useState<boolean>(false);
-    const latestActionVerifiedError = getLatestErrorField(validateCodeAction, 'actionVerified');
-
+    const [validateCodeAction] = useOnyx(ONYXKEYS.VALIDATE_ACTION_CODE, {canBeMissing: true});
+    const validateCodeSent = useMemo(() => hasMagicCodeBeenSent ?? validateCodeAction?.validateCodeSent, [hasMagicCodeBeenSent, validateCodeAction?.validateCodeSent]);
+    const latestValidateCodeError = getLatestErrorField(validateCodeAction, validateCodeActionErrorField);
     const timerRef = useRef<NodeJS.Timeout>();
 
     useImperativeHandle(innerRef, () => ({
@@ -169,11 +175,11 @@ function BaseValidateCodeForm({
     );
 
     useEffect(() => {
-        if (!hasMagicCodeBeenSent) {
+        if (!validateCodeSent) {
             return;
         }
         inputValidateCodeRef.current?.clear();
-    }, [hasMagicCodeBeenSent]);
+    }, [validateCodeSent]);
 
     useEffect(() => {
         if (timeRemaining > 0) {
@@ -203,18 +209,26 @@ function BaseValidateCodeForm({
             setValidateCode(text);
             setFormError({});
 
-            if (!isEmptyObject(validateError) || !isEmptyObject(latestActionVerifiedError)) {
+            if (!isEmptyObject(validateError) || !isEmptyObject(latestValidateCodeError)) {
+                // Clear flow specific error
                 clearError();
-                clearValidateCodeActionError('actionVerified');
+
+                // Clear "incorrect magic code" error
+                clearValidateCodeActionError(validateCodeActionErrorField);
             }
         },
-        [validateError, clearError, latestActionVerifiedError],
+        [validateError, clearError, latestValidateCodeError, validateCodeActionErrorField],
     );
 
     /**
      * Check that all the form fields are valid, then trigger the submit callback
      */
     const validateAndSubmitForm = useCallback(() => {
+        // Clear flow specific error
+        clearError();
+
+        // Clear "incorrect magic" code error
+        clearValidateCodeActionError(validateCodeActionErrorField);
         setCanShowError(true);
         if (!validateCode.trim()) {
             setFormError({validateCode: 'validateCodeForm.error.pleaseFillMagicCode'});
@@ -228,7 +242,7 @@ function BaseValidateCodeForm({
 
         setFormError({});
         handleSubmitForm(validateCode);
-    }, [validateCode, handleSubmitForm]);
+    }, [validateCode, handleSubmitForm, validateCodeActionErrorField, clearError]);
 
     const errorText = useMemo(() => {
         if (!canShowError) {
@@ -241,6 +255,10 @@ function BaseValidateCodeForm({
     }, [canShowError, formError, account, translate]);
 
     const shouldShowTimer = timeRemaining > 0 && !isOffline;
+
+    // latestValidateCodeError only holds an error related to bad magic code
+    // while validateError holds flow-specific errors
+    const finalValidateError = !isEmptyObject(latestValidateCodeError) ? latestValidateCodeError : validateError;
     return (
         <>
             <MagicCodeInput
@@ -250,7 +268,7 @@ function BaseValidateCodeForm({
                 value={validateCode}
                 onChangeText={onTextInput}
                 errorText={errorText}
-                hasError={canShowError ? !isEmptyObject(validateError) : false}
+                hasError={canShowError && !isEmptyObject(finalValidateError)}
                 onFulfill={validateAndSubmitForm}
                 autoFocus={false}
                 allowResubmit={allowResubmit}
@@ -263,9 +281,8 @@ function BaseValidateCodeForm({
             )}
             <OfflineWithFeedback
                 pendingAction={validateCodeAction?.pendingFields?.validateCodeSent}
-                errors={latestActionVerifiedError}
                 errorRowStyles={[styles.mt2]}
-                onClose={() => clearValidateCodeActionError('actionVerified')}
+                onClose={() => clearValidateCodeActionError(validateCodeActionErrorField)}
             >
                 {!shouldShowTimer && (
                     <View style={[styles.mt5, styles.dFlex, styles.flexColumn, styles.alignItemsStart]}>
@@ -284,7 +301,7 @@ function BaseValidateCodeForm({
                     </View>
                 )}
             </OfflineWithFeedback>
-            {!!hasMagicCodeBeenSent && (
+            {!!validateCodeSent && (
                 <DotIndicatorMessage
                     type="success"
                     style={[styles.mt6, styles.flex0]}
@@ -296,9 +313,14 @@ function BaseValidateCodeForm({
             <OfflineWithFeedback
                 shouldDisplayErrorAbove
                 pendingAction={validatePendingAction}
-                errors={canShowError ? validateError : undefined}
+                errors={canShowError ? finalValidateError : undefined}
                 errorRowStyles={[styles.mt2, styles.textWrap]}
-                onClose={() => clearError()}
+                onClose={() => {
+                    clearError();
+                    if (!isEmptyObject(validateCodeAction?.errorFields) && validateCodeActionErrorField) {
+                        clearValidateCodeActionError(validateCodeActionErrorField);
+                    }
+                }}
                 style={buttonStyles}
             >
                 {shouldShowSkipButton && (

src/components/ValidateCodeActionModal/index.tsx

@@ -22,13 +22,13 @@ function ValidateCodeActionModal({
     descriptionSecondary,
     onClose,
     onModalHide,
-    validatePendingAction,
     validateError,
+    validatePendingAction,
+    validateCodeActionErrorField,
     handleSubmitForm,
     clearError,
     footer,
     sendValidateCode,
-    hasMagicCodeBeenSent,
     isLoading,
     shouldHandleNavigationBack,
     disableAnimation,
@@ -40,8 +40,7 @@ function ValidateCodeActionModal({
     const validateCodeFormRef = useRef<ValidateCodeFormHandle>(null);
     const styles = useThemeStyles();
     const threeDotsAnchorPosition = useThreeDotsAnchorPosition(styles.threeDotsPopoverOffset);
-
-    const [validateCodeAction] = useOnyx(ONYXKEYS.VALIDATE_ACTION_CODE);
+    const [validateCodeAction] = useOnyx(ONYXKEYS.VALIDATE_ACTION_CODE, {canBeMissing: true});
 
     const hide = useCallback(() => {
         clearError();
@@ -50,13 +49,13 @@ function ValidateCodeActionModal({
     }, [onClose, clearError]);
 
     useEffect(() => {
-        if (!firstRenderRef.current || !isVisible || hasMagicCodeBeenSent) {
+        if (!firstRenderRef.current || !isVisible || validateCodeAction?.validateCodeSent) {
             return;
         }
         firstRenderRef.current = false;
 
         sendValidateCode();
-        // We only want to send validate code on first render not on change of hasMagicCodeBeenSent, so we don't add it as a dependency.
+        // We only want to send validate code on first render not on change of validateCodeSent, so we don't add it as a dependency.
         // eslint-disable-next-line react-compiler/react-compiler
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isVisible, sendValidateCode]);
@@ -102,15 +101,14 @@ function ValidateCodeActionModal({
                         {!!descriptionSecondary && <Text style={[themeStyles.mb3]}>{descriptionSecondary}</Text>}
                         <ValidateCodeForm
                             isLoading={isLoading}
-                            validateCodeAction={validateCodeAction}
                             validatePendingAction={validatePendingAction}
+                            validateCodeActionErrorField={validateCodeActionErrorField}
                             validateError={validateError}
                             handleSubmitForm={handleSubmitForm}
                             sendValidateCode={sendValidateCode}
                             clearError={clearError}
                             buttonStyles={[themeStyles.justifyContentEnd, themeStyles.flex1]}
                             ref={validateCodeFormRef}
-                            hasMagicCodeBeenSent={hasMagicCodeBeenSent}
                         />
                     </View>
                 </ScrollView>

src/components/ValidateCodeActionModal/type.ts

@@ -21,12 +21,15 @@ type ValidateCodeActionModalProps = {
     /** Function to be called when the modal is closed */
     onModalHide?: () => void;
 
-    /** The pending action for submitting form */
-    validatePendingAction?: PendingAction | null;
+    /** The pending action we're trying to validate */
+    validatePendingAction?: PendingAction;
 
-    /** The error of submitting  */
+    /** The error of submitting, this holds any error specific to the flow (e.g invalid reason when replacing a card) but NOT an incorrect magic code  */
     validateError?: Errors;
 
+    /** The errorField name of validateCodeAction.errorFields, e.g. "addLogin" to store the magic code error when adding a new contact method */
+    validateCodeActionErrorField: string;
+
     /** Function is called when submitting form  */
     handleSubmitForm: (validateCode: string) => void;
 
@@ -39,9 +42,6 @@ type ValidateCodeActionModalProps = {
     /** Function is called when validate code modal is mounted and on magic code resend */
     sendValidateCode: () => void;
 
-    /** If the magic code has been resent previously */
-    hasMagicCodeBeenSent?: boolean;
-
     /** Whether the form is loading or not */
     isLoading?: boolean;
 

src/languages/en.ts

@@ -1950,7 +1950,7 @@ const translations = {
         requestNewCodeAfterErrorOccurred: 'Request a new code',
         error: {
             pleaseFillMagicCode: 'Please enter your magic code',
-            incorrectMagicCode: 'Incorrect magic code',
+            incorrectMagicCode: 'Incorrect or invalid magic code. Please try again or request a new code.',
             pleaseFillTwoFactorAuth: 'Please enter your two-factor authentication code',
         },
     },

src/languages/es.ts

@@ -1952,9 +1952,9 @@ const translations = {
         requestNewCode: 'Pedir un código nuevo en ',
         requestNewCodeAfterErrorOccurred: 'Solicitar un nuevo código',
         error: {
-            pleaseFillMagicCode: 'Por favor, introduce el código mágico',
-            incorrectMagicCode: 'Código mágico incorrecto',
-            pleaseFillTwoFactorAuth: 'Por favor, introduce tu código de autenticación de dos factores',
+            pleaseFillMagicCode: 'Por favor, introduce el código mágico.',
+            incorrectMagicCode: 'Código mágico incorrecto o no válido. Inténtalo de nuevo o solicita otro código.',
+            pleaseFillTwoFactorAuth: 'Por favor, introduce tu código de autenticación de dos factores.',
         },
     },
     passwordForm: {

src/libs/actions/Card.ts

@@ -52,20 +52,6 @@ function reportVirtualExpensifyCardFraud(card: Card, validateCode: string) {
                 errors: null,
             },
         },
-        {
-            onyxMethod: Onyx.METHOD.MERGE,
-            key: ONYXKEYS.CARD_LIST,
-            value: {
-                [cardID]: null,
-            },
-        },
-        {
-            onyxMethod: Onyx.METHOD.MERGE,
-            key: `${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${card?.fundID}_${CONST.EXPENSIFY_CARD.BANK}`,
-            value: {
-                [cardID]: null,
-            },
-        },
     ];
 
     const successData: OnyxUpdate[] = [
@@ -86,26 +72,6 @@ function reportVirtualExpensifyCardFraud(card: Card, validateCode: string) {
                 isLoading: false,
             },
         },
-        {
-            onyxMethod: Onyx.METHOD.MERGE,
-            key: ONYXKEYS.CARD_LIST,
-            value: {
-                [cardID]: {
-                    ...card,
-                    errors: ErrorUtils.getMicroSecondOnyxErrorWithTranslationKey('common.genericErrorMessage'),
-                },
-            },
-        },
-        {
-            onyxMethod: Onyx.METHOD.MERGE,
-            key: `${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${card?.fundID}_${CONST.EXPENSIFY_CARD.BANK}`,
-            value: {
-                [cardID]: {
-                    ...card,
-                    errors: ErrorUtils.getMicroSecondOnyxErrorWithTranslationKey('common.genericErrorMessage'),
-                },
-            },
-        },
     ];
 
     const parameters: ReportVirtualExpensifyCardFraudParams = {