Refactor: reuse ValidateCodeActionModal

src/ROUTES.ts

@@ -149,10 +149,6 @@ const ROUTES = {
         route: 'settings/security/delegate/:login/role/:role/confirm',
         getRoute: (login: string, role: string) => `settings/security/delegate/${encodeURIComponent(login)}/role/${role}/confirm` as const,
     },
-    SETTINGS_DELEGATE_MAGIC_CODE: {
-        route: 'settings/security/delegate/:login/role/:role/magic-code',
-        getRoute: (login: string, role: string) => `settings/security/delegate/${encodeURIComponent(login)}/role/${role}/magic-code` as const,
-    },
     SETTINGS_ABOUT: 'settings/about',
     SETTINGS_APP_DOWNLOAD_LINKS: 'settings/about/app-download-links',
     SETTINGS_WALLET: 'settings/wallet',
@@ -231,7 +227,6 @@ const ROUTES = {
         route: 'settings/profile/contact-methods/:contactMethod/details',
         getRoute: (contactMethod: string, backTo?: string) => getUrlWithBackToParam(`settings/profile/contact-methods/${encodeURIComponent(contactMethod)}/details`, backTo),
     },
-    SETINGS_CONTACT_METHOD_VALIDATE_ACTION: 'settings/profile/contact-methods/validate-action',
     SETTINGS_NEW_CONTACT_METHOD: {
         route: 'settings/profile/contact-methods/new',
         getRoute: (backTo?: string) => getUrlWithBackToParam('settings/profile/contact-methods/new', backTo),

src/SCREENS.ts

@@ -74,7 +74,6 @@ const SCREENS = {
             DISPLAY_NAME: 'Settings_Display_Name',
             CONTACT_METHODS: 'Settings_ContactMethods',
             CONTACT_METHOD_DETAILS: 'Settings_ContactMethodDetails',
-            CONTACT_METHOD_VALIDATE_ACTION: 'Settings_ValidateContactMethodAction',
             NEW_CONTACT_METHOD: 'Settings_NewContactMethod',
             STATUS_CLEAR_AFTER: 'Settings_Status_Clear_After',
             STATUS_CLEAR_AFTER_DATE: 'Settings_Status_Clear_After_Date',
@@ -134,7 +133,6 @@ const SCREENS = {
             ADD_DELEGATE: 'Settings_Delegate_Add',
             DELEGATE_ROLE: 'Settings_Delegate_Role',
             DELEGATE_CONFIRM: 'Settings_Delegate_Confirm',
-            DELEGATE_MAGIC_CODE: 'Settings_Delegate_Magic_Code',
             UPDATE_DELEGATE_ROLE: 'Settings_Delegate_Update_Role',
             UPDATE_DELEGATE_ROLE_MAGIC_CODE: 'Settings_Delegate_Update_Magic_Code',
         },

src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx

@@ -62,6 +62,8 @@ type ValidateCodeFormProps = {
 
     /** Function to clear error of the form */
     clearError: () => void;
+
+    sendValidateCode: () => void;
 };
 
 function BaseValidateCodeForm({
@@ -73,6 +75,7 @@ function BaseValidateCodeForm({
     validateError,
     handleSubmitForm,
     clearError,
+    sendValidateCode,
     buttonStyles,
 }: ValidateCodeFormProps) {
     const {translate} = useLocalize();
@@ -125,10 +128,6 @@ function BaseValidateCodeForm({
         }, []),
     );
 
-    useEffect(() => {
-        clearError();
-    }, [clearError]);
-
     useEffect(() => {
         if (!hasMagicCodeBeenSent) {
             return;
@@ -140,7 +139,7 @@ function BaseValidateCodeForm({
      * Request a validate code / magic code be sent to verify this contact method
      */
     const resendValidateCode = () => {
-        User.requestValidateCodeAction();
+        sendValidateCode();
         inputValidateCodeRef.current?.clear();
     };
 
@@ -189,7 +188,7 @@ function BaseValidateCodeForm({
                 errorText={formError?.validateCode ? translate(formError?.validateCode) : ErrorUtils.getLatestErrorMessage(account ?? {})}
                 hasError={!isEmptyObject(validateError)}
                 onFulfill={validateAndSubmitForm}
-                autoFocus={false}
+                autoFocus
             />
             <OfflineWithFeedback
                 pendingAction={validateCodeAction?.pendingFields?.validateCodeSent}

src/components/ValidateCodeActionModal/index.tsx

@@ -6,14 +6,26 @@ import Modal from '@components/Modal';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import useThemeStyles from '@hooks/useThemeStyles';
-import * as User from '@libs/actions/User';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {ValidateCodeActionModalProps} from './type';
 import ValidateCodeForm from './ValidateCodeForm';
 import type {ValidateCodeFormHandle} from './ValidateCodeForm/BaseValidateCodeForm';
 
-function ValidateCodeActionModal({isVisible, title, description, onClose, validatePendingAction, validateError, handleSubmitForm, clearError}: ValidateCodeActionModalProps) {
+function ValidateCodeActionModal({
+    isVisible,
+    title,
+    description,
+    onClose,
+    onModalHide,
+    validatePendingAction,
+    validateError,
+    handleSubmitForm,
+    clearError,
+    footer,
+    sendValidateCode,
+    hasMagicCodeBeenSent,
+}: ValidateCodeActionModalProps) {
     const themeStyles = useThemeStyles();
     const firstRenderRef = useRef(true);
     const validateCodeFormRef = useRef<ValidateCodeFormHandle>(null);
@@ -30,15 +42,16 @@ function ValidateCodeActionModal({isVisible, title, description, onClose, valida
             return;
         }
         firstRenderRef.current = false;
-        User.requestValidateCodeAction();
-    }, [isVisible]);
+
+        sendValidateCode();
+    }, [isVisible, sendValidateCode]);
 
     return (
         <Modal
             type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}
             isVisible={isVisible}
             onClose={hide}
-            onModalHide={hide}
+            onModalHide={onModalHide ?? hide}
             hideModalContentWhileAnimating
             useNativeDriver
             shouldUseModalPaddingStyle={false}
@@ -61,10 +74,13 @@ function ValidateCodeActionModal({isVisible, title, description, onClose, valida
                         validatePendingAction={validatePendingAction}
                         validateError={validateError}
                         handleSubmitForm={handleSubmitForm}
+                        sendValidateCode={sendValidateCode}
                         clearError={clearError}
                         ref={validateCodeFormRef}
+                        hasMagicCodeBeenSent={hasMagicCodeBeenSent}
                     />
                 </View>
+                {footer?.()}
             </ScreenWrapper>
         </Modal>
     );

src/components/ValidateCodeActionModal/type.ts

@@ -1,3 +1,4 @@
+import type React from 'react';
 import type {Errors, PendingAction} from '@src/types/onyx/OnyxCommon';
 
 type ValidateCodeActionModalProps = {
@@ -13,6 +14,9 @@ type ValidateCodeActionModalProps = {
     /** Function to call when the user closes the modal */
     onClose: () => void;
 
+    /** Function to be called when the modal is closed */
+    onModalHide?: () => void;
+
     /** The pending action for submitting form */
     validatePendingAction?: PendingAction | null;
 
@@ -24,6 +28,15 @@ type ValidateCodeActionModalProps = {
 
     /** Function to clear error of the form */
     clearError: () => void;
+
+    /** A component to be rendered inside the modal */
+    footer?: () => React.JSX.Element;
+
+    /** 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;
 };
 
 // eslint-disable-next-line import/prefer-default-export

src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx

@@ -204,7 +204,6 @@ const SettingsModalStackNavigator = createModalStackNavigator<SettingsNavigatorP
     [SCREENS.SETTINGS.PROFILE.ADDRESS_STATE]: () => require<ReactComponentModule>('../../../../pages/settings/Profile/PersonalDetails/StateSelectionPage').default,
     [SCREENS.SETTINGS.PROFILE.CONTACT_METHODS]: () => require<ReactComponentModule>('../../../../pages/settings/Profile/Contacts/ContactMethodsPage').default,
     [SCREENS.SETTINGS.PROFILE.CONTACT_METHOD_DETAILS]: () => require<ReactComponentModule>('../../../../pages/settings/Profile/Contacts/ContactMethodDetailsPage').default,
-    [SCREENS.SETTINGS.PROFILE.CONTACT_METHOD_VALIDATE_ACTION]: () => require<ReactComponentModule>('../../../../pages/settings/Profile/Contacts/ValidateContactActionPage').default,
     [SCREENS.SETTINGS.PROFILE.NEW_CONTACT_METHOD]: () => require<ReactComponentModule>('../../../../pages/settings/Profile/Contacts/NewContactMethodPage').default,
     [SCREENS.SETTINGS.PREFERENCES.PRIORITY_MODE]: () => require<ReactComponentModule>('../../../../pages/settings/Preferences/PriorityModePage').default,
     [SCREENS.WORKSPACE.ACCOUNTING.ROOT]: () => require<ReactComponentModule>('../../../../pages/workspace/accounting/PolicyAccountingPage').default,
@@ -531,7 +530,6 @@ const SettingsModalStackNavigator = createModalStackNavigator<SettingsNavigatorP
     [SCREENS.SETTINGS.DELEGATE.UPDATE_DELEGATE_ROLE]: () =>
         require<ReactComponentModule>('../../../../pages/settings/Security/AddDelegate/UpdateDelegateRole/UpdateDelegateRolePage').default,
     [SCREENS.SETTINGS.DELEGATE.DELEGATE_CONFIRM]: () => require<ReactComponentModule>('../../../../pages/settings/Security/AddDelegate/ConfirmDelegatePage').default,
-    [SCREENS.SETTINGS.DELEGATE.DELEGATE_MAGIC_CODE]: () => require<ReactComponentModule>('../../../../pages/settings/Security/AddDelegate/DelegateMagicCodePage').default,
     [SCREENS.SETTINGS.DELEGATE.UPDATE_DELEGATE_ROLE_MAGIC_CODE]: () =>
         require<ReactComponentModule>('../../../../pages/settings/Security/AddDelegate/UpdateDelegateRole/UpdateDelegateMagicCodePage').default,
     [SCREENS.WORKSPACE.RULES_CUSTOM_NAME]: () => require<ReactComponentModule>('../../../../pages/workspace/rules/RulesCustomNamePage').default,

src/libs/Navigation/linkingConfig/CENTRAL_PANE_TO_RHP_MAPPING.ts

@@ -6,7 +6,6 @@ const CENTRAL_PANE_TO_RHP_MAPPING: Partial<Record<CentralPaneName, string[]>> =
         SCREENS.SETTINGS.PROFILE.DISPLAY_NAME,
         SCREENS.SETTINGS.PROFILE.CONTACT_METHODS,
         SCREENS.SETTINGS.PROFILE.CONTACT_METHOD_DETAILS,
-        SCREENS.SETTINGS.PROFILE.CONTACT_METHOD_VALIDATE_ACTION,
         SCREENS.SETTINGS.PROFILE.NEW_CONTACT_METHOD,
         SCREENS.SETTINGS.PROFILE.STATUS_CLEAR_AFTER,
         SCREENS.SETTINGS.PROFILE.STATUS_CLEAR_AFTER_DATE,
@@ -46,7 +45,6 @@ const CENTRAL_PANE_TO_RHP_MAPPING: Partial<Record<CentralPaneName, string[]>> =
         SCREENS.SETTINGS.DELEGATE.DELEGATE_ROLE,
         SCREENS.SETTINGS.DELEGATE.UPDATE_DELEGATE_ROLE,
         SCREENS.SETTINGS.DELEGATE.DELEGATE_CONFIRM,
-        SCREENS.SETTINGS.DELEGATE.DELEGATE_MAGIC_CODE,
         SCREENS.SETTINGS.DELEGATE.UPDATE_DELEGATE_ROLE_MAGIC_CODE,
     ],
     [SCREENS.SETTINGS.ABOUT]: [SCREENS.SETTINGS.APP_DOWNLOAD_LINKS],

src/libs/Navigation/linkingConfig/config.ts

@@ -256,9 +256,6 @@ const config: LinkingOptions<RootStackParamList>['config'] = {
                         [SCREENS.SETTINGS.PROFILE.CONTACT_METHOD_DETAILS]: {
                             path: ROUTES.SETTINGS_CONTACT_METHOD_DETAILS.route,
                         },
-                        [SCREENS.SETTINGS.PROFILE.CONTACT_METHOD_VALIDATE_ACTION]: {
-                            path: ROUTES.SETINGS_CONTACT_METHOD_VALIDATE_ACTION,
-                        },
                         [SCREENS.SETTINGS.PROFILE.NEW_CONTACT_METHOD]: {
                             path: ROUTES.SETTINGS_NEW_CONTACT_METHOD.route,
                             exact: true,
@@ -309,12 +306,6 @@ const config: LinkingOptions<RootStackParamList>['config'] = {
                                 login: (login: string) => decodeURIComponent(login),
                             },
                         },
-                        [SCREENS.SETTINGS.DELEGATE.DELEGATE_MAGIC_CODE]: {
-                            path: ROUTES.SETTINGS_DELEGATE_MAGIC_CODE.route,
-                            parse: {
-                                login: (login: string) => decodeURIComponent(login),
-                            },
-                        },
                         [SCREENS.SETTINGS.DELEGATE.UPDATE_DELEGATE_ROLE_MAGIC_CODE]: {
                             path: ROUTES.SETTINGS_UPDATE_DELEGATE_ROLE_MAGIC_CODE.route,
                             parse: {

src/libs/Navigation/types.ts

@@ -750,10 +750,6 @@ type SettingsNavigatorParamList = {
         login: string;
         role: string;
     };
-    [SCREENS.SETTINGS.DELEGATE.DELEGATE_MAGIC_CODE]: {
-        login: string;
-        role: string;
-    };
     [SCREENS.SETTINGS.REPORT_CARD_LOST_OR_DAMAGED]: {
         /** cardID of selected card */
         cardID: string;

src/libs/actions/Delegate.ts

@@ -219,6 +219,7 @@ function addDelegate(email: string, role: DelegateRole, validateCode: string) {
                 delegatedAccess: {
                     delegates: optimisticDelegateData(),
                 },
+                isLoading: true,
             },
         },
     ];
@@ -263,6 +264,7 @@ function addDelegate(email: string, role: DelegateRole, validateCode: string) {
                 delegatedAccess: {
                     delegates: successDelegateData(),
                 },
+                isLoading: false,
             },
         },
     ];
@@ -305,6 +307,7 @@ function addDelegate(email: string, role: DelegateRole, validateCode: string) {
                 delegatedAccess: {
                     delegates: failureDelegateData(),
                 },
+                isLoading: false,
             },
         },
     ];

src/libs/actions/User.ts

@@ -315,11 +315,7 @@ function resetContactMethodValidateCodeSentState(contactMethod: string) {
  * Clears unvalidated new contact method action
  */
 function clearUnvalidatedNewContactMethodAction() {
-    Onyx.merge(ONYXKEYS.PENDING_CONTACT_ACTION, {
-        validateCodeSent: null,
-        pendingFields: null,
-        errorFields: null,
-    });
+    Onyx.merge(ONYXKEYS.PENDING_CONTACT_ACTION, null);
 }
 
 /**
@@ -414,7 +410,6 @@ function addNewContactMethod(contactMethod: string, validateCode = '') {
                 [contactMethod]: {
                     partnerUserID: contactMethod,
                     validatedDate: '',
-                    validateCodeSent: true,
                     errorFields: {
                         addedLogin: null,
                     },
@@ -447,6 +442,7 @@ function addNewContactMethod(contactMethod: string, validateCode = '') {
             key: ONYXKEYS.PENDING_CONTACT_ACTION,
             value: {
                 validateCodeSent: null,
+                actionVerified: true,
                 errorFields: {
                     actionVerified: null,
                 },