Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update delegate flow to use modal #56231

Merged
merged 9 commits into from
Feb 11, 2025
+86 −102
Merged

Update delegate flow to use modal #56231

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
c87b201
update delegate flow use modal
cretadn22 Feb 3, 2025
1b60e51
fix type import
cretadn22 Feb 4, 2025
9c256c5
new main
cretadn22 Feb 4, 2025
955fd76
update sent validated code message
cretadn22 Feb 4, 2025
46489da
clear error
cretadn22 Feb 4, 2025
3d7c502
remove optimistic data
cretadn22 Feb 5, 2025
6dc8bb2
remove route
cretadn22 Feb 6, 2025
6f1f09d
remove route
cretadn22 Feb 6, 2025
2a24bbc
minor update
cretadn22 Feb 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions src/libs/actions/Delegate.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -541,6 +541,13 @@ function updateDelegateRole(email: string, role: DelegateRole, validateCode: str
},
},
},
{
onyxMethod: Onyx.METHOD.MERGE,
key: ONYXKEYS.VALIDATE_ACTION_CODE,
value: {
validateCodeSent: null,
},
},
];

const successData: OnyxUpdate[] = [
Expand Down
53 changes: 18 additions & 35 deletions src/pages/settings/Security/AddDelegate/UpdateDelegateRole/UpdateDelegateMagicCodePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,35 +1,29 @@
import React, {useEffect, useRef} from 'react';
import React, {useEffect} from 'react';
import {useOnyx} from 'react-native-onyx';
import type {ValueOf} from 'type-fest';
import DelegateNoAccessWrapper from '@components/DelegateNoAccessWrapper';
import HeaderWithBackButton from '@components/HeaderWithBackButton';
import ScreenWrapper from '@components/ScreenWrapper';
import Text from '@components/Text';
import ValidateCodeActionModal from '@components/ValidateCodeActionModal';
import useLocalize from '@hooks/useLocalize';
import useThemeStyles from '@hooks/useThemeStyles';
import {updateDelegateRole} from '@libs/actions/Delegate';
import {requestValidateCodeAction} from '@libs/actions/User';
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 type CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
import ROUTES from '@src/ROUTES';
import type SCREENS from '@src/SCREENS';
import ValidateCodeForm from './ValidateCodeForm';
import type {ValidateCodeFormHandle} from './ValidateCodeForm/BaseValidateCodeForm';

type UpdateDelegateMagicCodePageProps = PlatformStackScreenProps<SettingsNavigatorParamList, typeof SCREENS.SETTINGS.DELEGATE.DELEGATE_CONFIRM>;

function UpdateDelegateMagicCodePage({route}: UpdateDelegateMagicCodePageProps) {
const {translate} = useLocalize();
const [account] = useOnyx(ONYXKEYS.ACCOUNT);
const [validateCodeAction] = useOnyx(ONYXKEYS.VALIDATE_ACTION_CODE);
const login = route.params.login;
const role = route.params.role as ValueOf<typeof CONST.DELEGATE_ROLE>;

const styles = useThemeStyles();
const validateCodeFormRef = useRef<ValidateCodeFormHandle>(null);

const currentDelegate = account?.delegatedAccess?.delegates?.find((d) => d.email === login);
const updateDelegateErrors = account?.delegatedAccess?.errorFields?.addDelegate?.[login];
const updateDelegateErrors = account?.delegatedAccess?.errorFields?.updateDelegateRole?.[login];

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should update it to use the correct error field so that the error message is displayed properly when an incorrect code is entered. This isn't directly related to this task, but I noticed it while testing this PR.

useEffect(() => {
if (!currentDelegate || !!currentDelegate.pendingFields?.role || !!updateDelegateErrors) {
Expand All @@ -45,28 +39,17 @@ function UpdateDelegateMagicCodePage({route}: UpdateDelegateMagicCodePageProps)
};

return (
<ScreenWrapper
includeSafeAreaPaddingBottom={false}
shouldEnableMaxHeight
testID={UpdateDelegateMagicCodePage.displayName}
offlineIndicatorStyle={styles.mtAuto}
>
{({safeAreaPaddingBottomStyle}) => (
<DelegateNoAccessWrapper accessDeniedVariants={[CONST.DELEGATE.DENIED_ACCESS_VARIANTS.DELEGATE]}>
<HeaderWithBackButton
title={translate('delegate.makeSureItIsYou')}
onBackButtonPress={onBackButtonPress}
/>
<Text style={[styles.mb3, styles.ph5]}>{translate('delegate.enterMagicCodeUpdate', {contactMethod: account?.primaryLogin ?? ''})}</Text>
<ValidateCodeForm
ref={validateCodeFormRef}
delegate={login}
role={role}
wrapperStyle={safeAreaPaddingBottomStyle}
/>
</DelegateNoAccessWrapper>
)}
</ScreenWrapper>
<ValidateCodeActionModal
clearError={() => {}}
onClose={onBackButtonPress}
validateError={updateDelegateErrors}
isVisible
title={translate('delegate.makeSureItIsYou')}
sendValidateCode={() => requestValidateCodeAction()}
hasMagicCodeBeenSent={validateCodeAction?.validateCodeSent}
handleSubmitForm={(validateCode) => updateDelegateRole(login, role, validateCode)}
descriptionPrimary={translate('delegate.enterMagicCode', {contactMethod: account?.primaryLogin ?? ''})}
/>
);
}

Expand Down
3 changes: 1 addition & 2 deletions src/pages/settings/Security/AddDelegate/UpdateDelegateRole/UpdateDelegateRolePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import Text from '@components/Text';
import TextLink from '@components/TextLink';
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';
Expand Down Expand Up @@ -73,7 +73,6 @@ function UpdateDelegateRolePage({route}: UpdateDelegateRolePageProps) {
return;
}

requestValidationCode();
Navigation.navigate(ROUTES.SETTINGS_UPDATE_DELEGATE_ROLE_MAGIC_CODE.getRoute(login, option.value));
}}
sections={[{data: roleOptions}]}
Expand Down
Loading