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

Jump to bottom

[Security page][Copilot] Recalculate menu items when personal details change. This fixes profile picture not shown after switching accounts. #49833

Merged
merged 1 commit into from
Oct 1, 2024
Merged

[Security page][Copilot] Recalculate menu items when personal details change. This fixes profile picture not shown after switching accounts. #49833

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
114 changes: 64 additions & 50 deletions src/pages/settings/Security/SecuritySettingsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import LottieAnimations from '@components/LottieAnimations';
import MenuItem from '@components/MenuItem';
import type {MenuItemProps} from '@components/MenuItem';
import MenuItemList from '@components/MenuItemList';
import {usePersonalDetails} from '@components/OnyxProvider';
import ScreenWrapper from '@components/ScreenWrapper';
import ScrollView from '@components/ScrollView';
import Section from '@components/Section';
Expand Down Expand Up @@ -36,6 +37,8 @@ function SecuritySettingsPage() {
const waitForNavigate = useWaitForNavigation();
const {shouldUseNarrowLayout} = useResponsiveLayout();
const {canUseNewDotCopilot} = usePermissions();
const personalDetails = usePersonalDetails();

const [account] = useOnyx(ONYXKEYS.ACCOUNT);
const isActingAsDelegate = !!account?.delegatedAccess?.delegate ?? false;

Expand Down Expand Up @@ -70,60 +73,71 @@ function SecuritySettingsPage() {
}));
}, [translate, waitForNavigate, styles]);

const delegateMenuItems: MenuItemProps[] = delegates
.filter((d) => !d.optimisticAccountID)
.map(({email, role, pendingAction, errorFields}) => {
const personalDetail = getPersonalDetailByEmail(email);

const error = ErrorUtils.getLatestErrorField({errorFields}, 'addDelegate');
const delegateMenuItems: MenuItemProps[] = useMemo(
() =>
delegates
.filter((d) => !d.optimisticAccountID)
.map(({email, role, pendingAction, errorFields}) => {
const personalDetail = getPersonalDetailByEmail(email);
const error = ErrorUtils.getLatestErrorField({errorFields}, 'addDelegate');

const onPress = () => {
if (isEmptyObject(pendingAction)) {
return;
}
if (!role) {
Navigation.navigate(ROUTES.SETTINGS_DELEGATE_ROLE.getRoute(email));
return;
}
Navigation.navigate(ROUTES.SETTINGS_DELEGATE_MAGIC_CODE.getRoute(email, role));
};
const onPress = () => {
if (isEmptyObject(pendingAction)) {
return;
}
if (!role) {
Navigation.navigate(ROUTES.SETTINGS_DELEGATE_ROLE.getRoute(email));
return;
}
Navigation.navigate(ROUTES.SETTINGS_DELEGATE_MAGIC_CODE.getRoute(email, role));
};

const formattedEmail = formatPhoneNumber(email);
return {
title: personalDetail?.displayName ?? formattedEmail,
description: personalDetail?.displayName ? formattedEmail : '',
badgeText: translate('delegate.role', {role}),
avatarID: personalDetail?.accountID ?? -1,
icon: personalDetail?.avatar ?? FallbackAvatar,
iconType: CONST.ICON_TYPE_AVATAR,
numberOfLinesDescription: 1,
wrapperStyle: [styles.sectionMenuItemTopDescription],
iconRight: Expensicons.ThreeDots,
shouldShowRightIcon: true,
pendingAction,
shouldForceOpacity: !!pendingAction,
onPendingActionDismiss: () => clearAddDelegateErrors(email, 'addDelegate'),
error,
onPress,
};
});
const formattedEmail = formatPhoneNumber(email);
return {
title: personalDetail?.displayName ?? formattedEmail,
description: personalDetail?.displayName ? formattedEmail : '',
badgeText: translate('delegate.role', {role}),
avatarID: personalDetail?.accountID ?? -1,
icon: personalDetail?.avatar ?? FallbackAvatar,
iconType: CONST.ICON_TYPE_AVATAR,
numberOfLinesDescription: 1,
wrapperStyle: [styles.sectionMenuItemTopDescription],
iconRight: Expensicons.ThreeDots,
shouldShowRightIcon: true,
pendingAction,
shouldForceOpacity: !!pendingAction,
onPendingActionDismiss: () => clearAddDelegateErrors(email, 'addDelegate'),
error,
onPress,
};
}),
// eslint-disable-next-line react-compiler/react-compiler
// eslint-disable-next-line react-hooks/exhaustive-deps
[delegates, translate, styles, personalDetails],
);

const delegatorMenuItems: MenuItemProps[] = delegators.map(({email, role}) => {
const personalDetail = getPersonalDetailByEmail(email);
const formattedEmail = formatPhoneNumber(email);
const delegatorMenuItems: MenuItemProps[] = useMemo(
() =>
delegators.map(({email, role}) => {
const personalDetail = getPersonalDetailByEmail(email);
const formattedEmail = formatPhoneNumber(email);

return {
title: personalDetail?.displayName ?? formattedEmail,
description: personalDetail?.displayName ? formattedEmail : '',
badgeText: translate('delegate.role', {role}),
avatarID: personalDetail?.accountID ?? -1,
icon: personalDetail?.avatar ?? FallbackAvatar,
iconType: CONST.ICON_TYPE_AVATAR,
numberOfLinesDescription: 1,
wrapperStyle: [styles.sectionMenuItemTopDescription],
interactive: false,
};
});
return {
title: personalDetail?.displayName ?? formattedEmail,
description: personalDetail?.displayName ? formattedEmail : '',
badgeText: translate('delegate.role', {role}),
avatarID: personalDetail?.accountID ?? -1,
icon: personalDetail?.avatar ?? FallbackAvatar,
iconType: CONST.ICON_TYPE_AVATAR,
numberOfLinesDescription: 1,
wrapperStyle: [styles.sectionMenuItemTopDescription],
interactive: false,
};
}),
// eslint-disable-next-line react-compiler/react-compiler
// eslint-disable-next-line react-hooks/exhaustive-deps
[delegators, styles, translate, personalDetails],
);

return (
<ScreenWrapper
Expand Down
Loading