Skip to content

Commit

Permalink
Merge pull request #56231 from cretadn22/use-ValidateCodeActionModal
Browse files Browse the repository at this point in the history
Update delegate flow to use modal
  • Loading branch information
aldo-expensify authored Feb 11, 2025
2 parents 6999bfb + 2a24bbc commit cbceb93
Show file tree
Hide file tree
Showing 10 changed files with 86 additions and 102 deletions.
4 changes: 0 additions & 4 deletions src/ROUTES.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down
1 change: 0 additions & 1 deletion src/SCREENS.ts
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,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: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -598,8 +598,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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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],
Expand Down
6 changes: 0 additions & 6 deletions src/libs/Navigation/linkingConfig/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
4 changes: 0 additions & 4 deletions src/libs/Navigation/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -815,10 +815,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;
Expand Down
5 changes: 2 additions & 3 deletions src/libs/actions/Delegate.ts
Original file line number Diff line number Diff line change
Expand Up @@ -532,10 +532,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,
),
Expand All @@ -560,9 +559,9 @@ function updateDelegateRole(email: string, role: DelegateRole, validateCode: str
? {
...delegate,
role,
isLoading: false,
pendingAction: null,
pendingFields: {role: null},
isLoading: false,
}
: delegate,
),
Expand Down
Original file line number Diff line number Diff line change
@@ -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;

This file was deleted.

Original file line number Diff line number Diff line change
@@ -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) => ({
Expand All @@ -33,6 +37,7 @@ function UpdateDelegateRolePage({route}: UpdateDelegateRolePageProps) {
isSelected: role === currentRole,
}));

useBeforeRemove(() => setIsValidateCodeActionModalVisible(false));
useEffect(() => {
updateDelegateRoleOptimistically(login ?? '', currentRole as DelegateRole);
return () => clearDelegateRolePendingAction(login);
Expand Down Expand Up @@ -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>
);
Expand Down

0 comments on commit cbceb93

Please sign in to comment.