Skip to content

Commit cbceb93

Browse files
aldo-expensifyaldo-expensify
authored
Merge pull request #56231 from cretadn22/use-ValidateCodeActionModal
Update delegate flow to use modal
2 parents 6999bfb + 2a24bbc commit cbceb93

File tree

10 files changed

+86
-102
lines changed

10 files changed

+86
-102
lines changed

‎src/ROUTES.ts

-4
Original file line numberDiff line numberDiff line change
@@ -158,10 +158,6 @@ const ROUTES = {
158158
route: 'settings/security/delegate/:login/update-role/:currentRole',
159159
getRoute: (login: string, currentRole: string) => `settings/security/delegate/${encodeURIComponent(login)}/update-role/${currentRole}` as const,
160160
},
161-
SETTINGS_UPDATE_DELEGATE_ROLE_MAGIC_CODE: {
162-
route: 'settings/security/delegate/:login/update-role/:role/magic-code',
163-
getRoute: (login: string, role: string) => `settings/security/delegate/${encodeURIComponent(login)}/update-role/${role}/magic-code` as const,
164-
},
165161
SETTINGS_DELEGATE_CONFIRM: {
166162
route: 'settings/security/delegate/:login/role/:role/confirm',
167163
getRoute: (login: string, role: string, showValidateActionModal?: boolean) => {

‎src/SCREENS.ts

-1
Original file line numberDiff line numberDiff line change
@@ -150,7 +150,6 @@ const SCREENS = {
150150
DELEGATE_ROLE: 'Settings_Delegate_Role',
151151
DELEGATE_CONFIRM: 'Settings_Delegate_Confirm',
152152
UPDATE_DELEGATE_ROLE: 'Settings_Delegate_Update_Role',
153-
UPDATE_DELEGATE_ROLE_MAGIC_CODE: 'Settings_Delegate_Update_Magic_Code',
154153
},
155154
},
156155
SAVE_THE_WORLD: {

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

-2
Original file line numberDiff line numberDiff line change
@@ -598,8 +598,6 @@ const SettingsModalStackNavigator = createModalStackNavigator<SettingsNavigatorP
598598
[SCREENS.SETTINGS.DELEGATE.UPDATE_DELEGATE_ROLE]: () =>
599599
require<ReactComponentModule>('../../../../pages/settings/Security/AddDelegate/UpdateDelegateRole/UpdateDelegateRolePage').default,
600600
[SCREENS.SETTINGS.DELEGATE.DELEGATE_CONFIRM]: () => require<ReactComponentModule>('../../../../pages/settings/Security/AddDelegate/ConfirmDelegatePage').default,
601-
[SCREENS.SETTINGS.DELEGATE.UPDATE_DELEGATE_ROLE_MAGIC_CODE]: () =>
602-
require<ReactComponentModule>('../../../../pages/settings/Security/AddDelegate/UpdateDelegateRole/UpdateDelegateMagicCodePage').default,
603601
[SCREENS.WORKSPACE.RULES_CUSTOM_NAME]: () => require<ReactComponentModule>('../../../../pages/workspace/rules/RulesCustomNamePage').default,
604602
[SCREENS.WORKSPACE.RULES_AUTO_APPROVE_REPORTS_UNDER]: () => require<ReactComponentModule>('../../../../pages/workspace/rules/RulesAutoApproveReportsUnderPage').default,
605603
[SCREENS.WORKSPACE.RULES_RANDOM_REPORT_AUDIT]: () => require<ReactComponentModule>('../../../../pages/workspace/rules/RulesRandomReportAuditPage').default,

‎src/libs/Navigation/linkingConfig/CENTRAL_PANE_TO_RHP_MAPPING.ts

-1
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,6 @@ const CENTRAL_PANE_TO_RHP_MAPPING: Partial<Record<CentralPaneName, string[]>> =
4646
SCREENS.SETTINGS.DELEGATE.DELEGATE_ROLE,
4747
SCREENS.SETTINGS.DELEGATE.UPDATE_DELEGATE_ROLE,
4848
SCREENS.SETTINGS.DELEGATE.DELEGATE_CONFIRM,
49-
SCREENS.SETTINGS.DELEGATE.UPDATE_DELEGATE_ROLE_MAGIC_CODE,
5049
],
5150
[SCREENS.SETTINGS.ABOUT]: [SCREENS.SETTINGS.APP_DOWNLOAD_LINKS],
5251
[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

-6
Original file line numberDiff line numberDiff line change
@@ -338,12 +338,6 @@ const config: LinkingOptions<RootStackParamList>['config'] = {
338338
login: (login: string) => decodeURIComponent(login),
339339
},
340340
},
341-
[SCREENS.SETTINGS.DELEGATE.UPDATE_DELEGATE_ROLE_MAGIC_CODE]: {
342-
path: ROUTES.SETTINGS_UPDATE_DELEGATE_ROLE_MAGIC_CODE.route,
343-
parse: {
344-
login: (login: string) => decodeURIComponent(login),
345-
},
346-
},
347341
[SCREENS.SETTINGS.PROFILE.STATUS]: {
348342
path: ROUTES.SETTINGS_STATUS,
349343
exact: true,

‎src/libs/Navigation/types.ts

-4
Original file line numberDiff line numberDiff line change
@@ -815,10 +815,6 @@ type SettingsNavigatorParamList = {
815815
login: string;
816816
currentRole: string;
817817
};
818-
[SCREENS.SETTINGS.DELEGATE.UPDATE_DELEGATE_ROLE_MAGIC_CODE]: {
819-
login: string;
820-
role: string;
821-
};
822818
[SCREENS.SETTINGS.DELEGATE.DELEGATE_CONFIRM]: {
823819
login: string;
824820
role: string;

‎src/libs/actions/Delegate.ts

+2-3
Original file line numberDiff line numberDiff line change
@@ -532,10 +532,9 @@ function updateDelegateRole(email: string, role: DelegateRole, validateCode: str
532532
delegate.email === email
533533
? {
534534
...delegate,
535-
role,
535+
isLoading: true,
536536
pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
537537
pendingFields: {role: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE},
538-
isLoading: true,
539538
}
540539
: delegate,
541540
),
@@ -560,9 +559,9 @@ function updateDelegateRole(email: string, role: DelegateRole, validateCode: str
560559
? {
561560
...delegate,
562561
role,
562+
isLoading: false,
563563
pendingAction: null,
564564
pendingFields: {role: null},
565-
isLoading: false,
566565
}
567566
: delegate,
568567
),

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

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import React, {useEffect} from 'react';
2+
import {useOnyx} from 'react-native-onyx';
3+
import type {ValueOf} from 'type-fest';
4+
import ValidateCodeActionModal from '@components/ValidateCodeActionModal';
5+
import useLocalize from '@hooks/useLocalize';
6+
import {clearDelegateErrorsByField, updateDelegateRole} from '@libs/actions/Delegate';
7+
import {requestValidateCodeAction} from '@libs/actions/User';
8+
import Navigation from '@libs/Navigation/Navigation';
9+
import type CONST from '@src/CONST';
10+
import ONYXKEYS from '@src/ONYXKEYS';
11+
import ROUTES from '@src/ROUTES';
12+
13+
type UpdateDelegateMagicCodeModalProps = {
14+
login: string;
15+
role: ValueOf<typeof CONST.DELEGATE_ROLE>;
16+
isValidateCodeActionModalVisible: boolean;
17+
onClose?: () => void;
18+
};
19+
function UpdateDelegateMagicCodeModal({login, role, isValidateCodeActionModalVisible, onClose}: UpdateDelegateMagicCodeModalProps) {
20+
const {translate} = useLocalize();
21+
const [account] = useOnyx(ONYXKEYS.ACCOUNT);
22+
const [validateCodeAction] = useOnyx(ONYXKEYS.VALIDATE_ACTION_CODE);
23+
const currentDelegate = account?.delegatedAccess?.delegates?.find((d) => d.email === login);
24+
const updateDelegateErrors = account?.delegatedAccess?.errorFields?.updateDelegateRole?.[login];
25+
26+
useEffect(() => {
27+
if (currentDelegate?.role !== role || !!currentDelegate.pendingFields?.role || !!updateDelegateErrors) {
28+
return;
29+
}
30+
31+
// Dismiss modal on successful magic code verification
32+
Navigation.navigate(ROUTES.SETTINGS_SECURITY);
33+
}, [login, currentDelegate, role, updateDelegateErrors]);
34+
35+
const onBackButtonPress = () => {
36+
onClose?.();
37+
};
38+
39+
const clearError = () => {
40+
if (!updateDelegateErrors) {
41+
return;
42+
}
43+
clearDelegateErrorsByField(currentDelegate?.email ?? '', 'updateDelegateRole');
44+
};
45+
46+
return (
47+
<ValidateCodeActionModal
48+
clearError={clearError}
49+
onClose={onBackButtonPress}
50+
isLoading={currentDelegate?.isLoading}
51+
validateError={updateDelegateErrors}
52+
isVisible={isValidateCodeActionModalVisible}
53+
title={translate('delegate.makeSureItIsYou')}
54+
sendValidateCode={() => requestValidateCodeAction()}
55+
hasMagicCodeBeenSent={validateCodeAction?.validateCodeSent}
56+
handleSubmitForm={(validateCode) => updateDelegateRole(login, role, validateCode)}
57+
descriptionPrimary={translate('delegate.enterMagicCode', {contactMethod: account?.primaryLogin ?? ''})}
58+
/>
59+
);
60+
}
61+
62+
UpdateDelegateMagicCodeModal.displayName = 'UpdateDelegateMagicCodeModal';
63+
64+
export default UpdateDelegateMagicCodeModal;

‎src/pages/settings/Security/AddDelegate/UpdateDelegateRole/UpdateDelegateMagicCodePage.tsx

-75
This file was deleted.

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

+20-6
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,32 @@
1-
import React, {useEffect} from 'react';
1+
import React, {useEffect, useState} from 'react';
2+
import type {ValueOf} from 'type-fest';
23
import DelegateNoAccessWrapper from '@components/DelegateNoAccessWrapper';
34
import HeaderWithBackButton from '@components/HeaderWithBackButton';
45
import ScreenWrapper from '@components/ScreenWrapper';
56
import SelectionList from '@components/SelectionList';
67
import RadioListItem from '@components/SelectionList/RadioListItem';
78
import Text from '@components/Text';
89
import TextLink from '@components/TextLink';
10+
import useBeforeRemove from '@hooks/useBeforeRemove';
911
import useLocalize from '@hooks/useLocalize';
1012
import useThemeStyles from '@hooks/useThemeStyles';
11-
import {clearDelegateRolePendingAction, requestValidationCode, updateDelegateRoleOptimistically} from '@libs/actions/Delegate';
13+
import {clearDelegateRolePendingAction, updateDelegateRoleOptimistically} from '@libs/actions/Delegate';
1214
import Navigation from '@libs/Navigation/Navigation';
1315
import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
1416
import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
1517
import CONST from '@src/CONST';
16-
import ROUTES from '@src/ROUTES';
1718
import type SCREENS from '@src/SCREENS';
1819
import type {DelegateRole} from '@src/types/onyx/Account';
20+
import UpdateDelegateMagicCodeModal from './UpdateDelegateMagicCodeModal';
1921

2022
type UpdateDelegateRolePageProps = PlatformStackScreenProps<SettingsNavigatorParamList, typeof SCREENS.SETTINGS.DELEGATE.UPDATE_DELEGATE_ROLE>;
2123

2224
function UpdateDelegateRolePage({route}: UpdateDelegateRolePageProps) {
2325
const {translate} = useLocalize();
2426
const login = route.params.login;
2527
const currentRole = route.params.currentRole;
28+
const [isValidateCodeActionModalVisible, setIsValidateCodeActionModalVisible] = useState(false);
29+
const [newRole, setNewRole] = useState<ValueOf<typeof CONST.DELEGATE_ROLE> | null>();
2630

2731
const styles = useThemeStyles();
2832
const roleOptions = Object.values(CONST.DELEGATE_ROLE).map((role) => ({
@@ -33,6 +37,7 @@ function UpdateDelegateRolePage({route}: UpdateDelegateRolePageProps) {
3337
isSelected: role === currentRole,
3438
}));
3539

40+
useBeforeRemove(() => setIsValidateCodeActionModalVisible(false));
3641
useEffect(() => {
3742
updateDelegateRoleOptimistically(login ?? '', currentRole as DelegateRole);
3843
return () => clearDelegateRolePendingAction(login);
@@ -72,13 +77,22 @@ function UpdateDelegateRolePage({route}: UpdateDelegateRolePageProps) {
7277
Navigation.dismissModal();
7378
return;
7479
}
75-
76-
requestValidationCode();
77-
Navigation.navigate(ROUTES.SETTINGS_UPDATE_DELEGATE_ROLE_MAGIC_CODE.getRoute(login, option.value));
80+
setNewRole(option?.value);
81+
setIsValidateCodeActionModalVisible(true);
7882
}}
7983
sections={[{data: roleOptions}]}
8084
ListItem={RadioListItem}
8185
/>
86+
{!!newRole && (
87+
<UpdateDelegateMagicCodeModal
88+
login={login}
89+
role={newRole}
90+
isValidateCodeActionModalVisible={isValidateCodeActionModalVisible}
91+
onClose={() => {
92+
setIsValidateCodeActionModalVisible(false);
93+
}}
94+
/>
95+
)}
8296
</DelegateNoAccessWrapper>
8397
</ScreenWrapper>
8498
);

0 commit comments

Comments
 (0)