Update delegate flow to use modal

src/ROUTES.ts

@@ -158,10 +158,6 @@ const ROUTES = {
         route: 'settings/security/delegate/:login/update-role/:currentRole',
         getRoute: (login: string, currentRole: string) => `settings/security/delegate/${encodeURIComponent(login)}/update-role/${currentRole}` as const,
     },
-    SETTINGS_UPDATE_DELEGATE_ROLE_MAGIC_CODE: {
-        route: 'settings/security/delegate/:login/update-role/:role/magic-code',
-        getRoute: (login: string, role: string) => `settings/security/delegate/${encodeURIComponent(login)}/update-role/${role}/magic-code` as const,
-    },
     SETTINGS_DELEGATE_CONFIRM: {
         route: 'settings/security/delegate/:login/role/:role/confirm',
         getRoute: (login: string, role: string, showValidateActionModal?: boolean) => {

src/SCREENS.ts

@@ -149,7 +149,6 @@ const SCREENS = {
             DELEGATE_ROLE: 'Settings_Delegate_Role',
             DELEGATE_CONFIRM: 'Settings_Delegate_Confirm',
             UPDATE_DELEGATE_ROLE: 'Settings_Delegate_Update_Role',
-            UPDATE_DELEGATE_ROLE_MAGIC_CODE: 'Settings_Delegate_Update_Magic_Code',
         },
     },
     SAVE_THE_WORLD: {

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

@@ -581,8 +581,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.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,
     [SCREENS.WORKSPACE.RULES_AUTO_APPROVE_REPORTS_UNDER]: () => require<ReactComponentModule>('../../../../pages/workspace/rules/RulesAutoApproveReportsUnderPage').default,
     [SCREENS.WORKSPACE.RULES_RANDOM_REPORT_AUDIT]: () => require<ReactComponentModule>('../../../../pages/workspace/rules/RulesRandomReportAuditPage').default,

src/libs/Navigation/linkingConfig/CENTRAL_PANE_TO_RHP_MAPPING.ts

@@ -46,7 +46,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.UPDATE_DELEGATE_ROLE_MAGIC_CODE,
     ],
     [SCREENS.SETTINGS.ABOUT]: [SCREENS.SETTINGS.APP_DOWNLOAD_LINKS],
     [SCREENS.SETTINGS.SAVE_THE_WORLD]: [SCREENS.I_KNOW_A_TEACHER, SCREENS.INTRO_SCHOOL_PRINCIPAL, SCREENS.I_AM_A_TEACHER],

src/libs/Navigation/linkingConfig/config.ts

@@ -338,12 +338,6 @@ const config: LinkingOptions<RootStackParamList>['config'] = {
                                 login: (login: string) => decodeURIComponent(login),
                             },
                         },
-                        [SCREENS.SETTINGS.DELEGATE.UPDATE_DELEGATE_ROLE_MAGIC_CODE]: {
-                            path: ROUTES.SETTINGS_UPDATE_DELEGATE_ROLE_MAGIC_CODE.route,
-                            parse: {
-                                login: (login: string) => decodeURIComponent(login),
-                            },
-                        },
                         [SCREENS.SETTINGS.PROFILE.STATUS]: {
                             path: ROUTES.SETTINGS_STATUS,
                             exact: true,

src/libs/Navigation/types.ts

@@ -776,10 +776,6 @@ type SettingsNavigatorParamList = {
         login: string;
         currentRole: string;
     };
-    [SCREENS.SETTINGS.DELEGATE.UPDATE_DELEGATE_ROLE_MAGIC_CODE]: {
-        login: string;
-        role: string;
-    };
     [SCREENS.SETTINGS.DELEGATE.DELEGATE_CONFIRM]: {
         login: string;
         role: string;

src/libs/actions/Delegate.ts

@@ -531,10 +531,9 @@ function updateDelegateRole(email: string, role: DelegateRole, validateCode: str
                         delegate.email === email
                             ? {
                                   ...delegate,
-                                  role,
+                                  isLoading: true,
                                   pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
                                   pendingFields: {role: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE},
-                                  isLoading: true,
                               }
                             : delegate,
                     ),
@@ -559,9 +558,9 @@ function updateDelegateRole(email: string, role: DelegateRole, validateCode: str
                             ? {
                                   ...delegate,
                                   role,
+                                  isLoading: false,
                                   pendingAction: null,
                                   pendingFields: {role: null},
-                                  isLoading: false,
                               }
                             : delegate,
                     ),

src/pages/settings/Security/AddDelegate/UpdateDelegateRole/UpdateDelegateMagicCodeModal.tsx

@@ -0,0 +1,64 @@
+import React, {useEffect} from 'react';
+import {useOnyx} from 'react-native-onyx';
+import type {ValueOf} from 'type-fest';
+import ValidateCodeActionModal from '@components/ValidateCodeActionModal';
+import useLocalize from '@hooks/useLocalize';
+import {clearDelegateErrorsByField, updateDelegateRole} from '@libs/actions/Delegate';
+import {requestValidateCodeAction} from '@libs/actions/User';
+import Navigation from '@libs/Navigation/Navigation';
+import type CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
+
+type UpdateDelegateMagicCodeModalProps = {
+    login: string;
+    role: ValueOf<typeof CONST.DELEGATE_ROLE>;
+    isValidateCodeActionModalVisible: boolean;
+    onClose?: () => void;
+};
+function UpdateDelegateMagicCodeModal({login, role, isValidateCodeActionModalVisible, onClose}: UpdateDelegateMagicCodeModalProps) {
+    const {translate} = useLocalize();
+    const [account] = useOnyx(ONYXKEYS.ACCOUNT);
+    const [validateCodeAction] = useOnyx(ONYXKEYS.VALIDATE_ACTION_CODE);
+    const currentDelegate = account?.delegatedAccess?.delegates?.find((d) => d.email === login);
+    const updateDelegateErrors = account?.delegatedAccess?.errorFields?.updateDelegateRole?.[login];
+
+    useEffect(() => {
+        if (currentDelegate?.role !== role || !!currentDelegate.pendingFields?.role || !!updateDelegateErrors) {
+            return;
+        }
+
+        // Dismiss modal on successful magic code verification
+        Navigation.navigate(ROUTES.SETTINGS_SECURITY);
+    }, [login, currentDelegate, role, updateDelegateErrors]);
+
+    const onBackButtonPress = () => {
+        onClose?.();
+    };
+
+    const clearError = () => {
+        if (!updateDelegateErrors) {
+            return;
+        }
+        clearDelegateErrorsByField(currentDelegate?.email ?? '', 'updateDelegateRole');
+    };
+
+    return (
+        <ValidateCodeActionModal
+            clearError={clearError}
+            onClose={onBackButtonPress}
+            isLoading={currentDelegate?.isLoading}
+            validateError={updateDelegateErrors}
+            isVisible={isValidateCodeActionModalVisible}
+            title={translate('delegate.makeSureItIsYou')}
+            sendValidateCode={() => requestValidateCodeAction()}
+            hasMagicCodeBeenSent={validateCodeAction?.validateCodeSent}
+            handleSubmitForm={(validateCode) => updateDelegateRole(login, role, validateCode)}
+            descriptionPrimary={translate('delegate.enterMagicCode', {contactMethod: account?.primaryLogin ?? ''})}
+        />
+    );
+}
+
+UpdateDelegateMagicCodeModal.displayName = 'UpdateDelegateMagicCodeModal';
+
+export default UpdateDelegateMagicCodeModal;

src/pages/settings/Security/AddDelegate/UpdateDelegateRole/UpdateDelegateRolePage.tsx

@@ -1,28 +1,32 @@
-import React, {useEffect} from 'react';
+import React, {useEffect, useState} from 'react';
+import type {ValueOf} from 'type-fest';
 import DelegateNoAccessWrapper from '@components/DelegateNoAccessWrapper';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import SelectionList from '@components/SelectionList';
 import RadioListItem from '@components/SelectionList/RadioListItem';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
+import useBeforeRemove from '@hooks/useBeforeRemove';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
-import {clearDelegateRolePendingAction, requestValidationCode, updateDelegateRoleOptimistically} from '@libs/actions/Delegate';
+import {clearDelegateRolePendingAction, updateDelegateRoleOptimistically} from '@libs/actions/Delegate';
 import Navigation from '@libs/Navigation/Navigation';
 import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
 import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
 import CONST from '@src/CONST';
-import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
 import type {DelegateRole} from '@src/types/onyx/Account';
+import UpdateDelegateMagicCodeModal from './UpdateDelegateMagicCodeModal';
 
 type UpdateDelegateRolePageProps = PlatformStackScreenProps<SettingsNavigatorParamList, typeof SCREENS.SETTINGS.DELEGATE.UPDATE_DELEGATE_ROLE>;
 
 function UpdateDelegateRolePage({route}: UpdateDelegateRolePageProps) {
     const {translate} = useLocalize();
     const login = route.params.login;
     const currentRole = route.params.currentRole;
+    const [isValidateCodeActionModalVisible, setIsValidateCodeActionModalVisible] = useState(false);
+    const [newRole, setNewRole] = useState<ValueOf<typeof CONST.DELEGATE_ROLE> | null>();
 
     const styles = useThemeStyles();
     const roleOptions = Object.values(CONST.DELEGATE_ROLE).map((role) => ({
@@ -33,6 +37,7 @@ function UpdateDelegateRolePage({route}: UpdateDelegateRolePageProps) {
         isSelected: role === currentRole,
     }));
 
+    useBeforeRemove(() => setIsValidateCodeActionModalVisible(false));
     useEffect(() => {
         updateDelegateRoleOptimistically(login ?? '', currentRole as DelegateRole);
         return () => clearDelegateRolePendingAction(login);
@@ -72,13 +77,22 @@ function UpdateDelegateRolePage({route}: UpdateDelegateRolePageProps) {
                             Navigation.dismissModal();
                             return;
                         }
-
-                        requestValidationCode();
-                        Navigation.navigate(ROUTES.SETTINGS_UPDATE_DELEGATE_ROLE_MAGIC_CODE.getRoute(login, option.value));
+                        setNewRole(option?.value);
+                        setIsValidateCodeActionModalVisible(true);
                     }}
                     sections={[{data: roleOptions}]}
                     ListItem={RadioListItem}
                 />
+                {!!newRole && (
+                    <UpdateDelegateMagicCodeModal
+                        login={login}
+                        role={newRole}
+                        isValidateCodeActionModalVisible={isValidateCodeActionModalVisible}
+                        onClose={() => {
+                            setIsValidateCodeActionModalVisible(false);
+                        }}
+                    />
+                )}
             </DelegateNoAccessWrapper>
         </ScreenWrapper>
     );