From a0617684a9eebdd6f38ecf132d58685a37667748 Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Tue, 22 Oct 2024 01:49:20 +0530 Subject: [PATCH 1/5] fix height being cut for popover --- src/pages/settings/Security/SecuritySettingsPage.tsx | 11 +++-------- src/styles/variables.ts | 1 + 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/src/pages/settings/Security/SecuritySettingsPage.tsx b/src/pages/settings/Security/SecuritySettingsPage.tsx index d1919f9ddf83..924c3c6c468c 100644 --- a/src/pages/settings/Security/SecuritySettingsPage.tsx +++ b/src/pages/settings/Security/SecuritySettingsPage.tsx @@ -47,7 +47,7 @@ function SecuritySettingsPage() { const waitForNavigate = useWaitForNavigation(); const {shouldUseNarrowLayout} = useResponsiveLayout(); const {canUseNewDotCopilot} = usePermissions(); - const {windowWidth} = useWindowDimensions(); + const {windowWidth, windowHeight} = useWindowDimensions(); const personalDetails = usePersonalDetails(); const [account] = useOnyx(ONYXKEYS.ACCOUNT); @@ -58,8 +58,6 @@ function SecuritySettingsPage() { const [selectedDelegate, setSelectedDelegate] = useState(); const [anchorPosition, setAnchorPosition] = useState({ - anchorPositionHorizontal: 0, - anchorPositionVertical: 0, anchorPositionTop: 0, anchorPositionRight: 0, }); @@ -70,15 +68,12 @@ function SecuritySettingsPage() { } const position = getClickedTargetLocation(delegateButtonRef.current); - setAnchorPosition({ - anchorPositionTop: position.top + position.height - variables.bankAccountActionPopoverTopSpacing, + anchorPositionTop: Math.min(position.top + position.height - variables.bankAccountActionPopoverTopSpacing, windowHeight - variables.delegateAccessLevelModalHeight), // We want the position to be 23px to the right of the left border anchorPositionRight: windowWidth - position.right + variables.bankAccountActionPopoverRightSpacing, - anchorPositionHorizontal: position.x + variables.addBankAccountLeftSpacing, - anchorPositionVertical: position.y, }); - }, [windowWidth]); + }, [windowWidth, windowHeight, delegateButtonRef]); const isActingAsDelegate = !!account?.delegatedAccess?.delegate ?? false; const delegates = account?.delegatedAccess?.delegates ?? []; diff --git a/src/styles/variables.ts b/src/styles/variables.ts index dc6655791489..ad40c6688eed 100644 --- a/src/styles/variables.ts +++ b/src/styles/variables.ts @@ -259,6 +259,7 @@ export default { minimalTopBarOffset: -26, searchHeaderHeight: 80, searchListContentMarginTop: 116, + delegateAccessLevelModalHeight: 168, h20: 20, h28: 28, From fdbb357e1585e7bc98f05b6a5c23a368c461262f Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Tue, 22 Oct 2024 03:30:25 +0530 Subject: [PATCH 2/5] use popovermenu to set anchor position --- .../Security/SecuritySettingsPage.tsx | 94 ++++++++++--------- 1 file changed, 48 insertions(+), 46 deletions(-) diff --git a/src/pages/settings/Security/SecuritySettingsPage.tsx b/src/pages/settings/Security/SecuritySettingsPage.tsx index 924c3c6c468c..764412b236ff 100644 --- a/src/pages/settings/Security/SecuritySettingsPage.tsx +++ b/src/pages/settings/Security/SecuritySettingsPage.tsx @@ -14,7 +14,8 @@ import MenuItem from '@components/MenuItem'; import type {MenuItemProps} from '@components/MenuItem'; import MenuItemList from '@components/MenuItemList'; import {usePersonalDetails} from '@components/OnyxProvider'; -import Popover from '@components/Popover'; +import PopoverMenu from '@components/PopoverMenu'; +import type {PopoverMenuItem} from '@components/PopoverMenu'; import ScreenWrapper from '@components/ScreenWrapper'; import ScrollView from '@components/ScrollView'; import Section from '@components/Section'; @@ -32,7 +33,7 @@ import getClickedTargetLocation from '@libs/getClickedTargetLocation'; import {formatPhoneNumber} from '@libs/LocalePhoneNumber'; import Navigation from '@libs/Navigation/Navigation'; import {getPersonalDetailByEmail} from '@libs/PersonalDetailsUtils'; -import variables from '@styles/variables'; +import type {AnchorPosition} from '@styles/index'; import * as Modal from '@userActions/Modal'; import CONST from '@src/CONST'; import type {TranslationPaths} from '@src/languages/types'; @@ -47,7 +48,7 @@ function SecuritySettingsPage() { const waitForNavigate = useWaitForNavigation(); const {shouldUseNarrowLayout} = useResponsiveLayout(); const {canUseNewDotCopilot} = usePermissions(); - const {windowWidth, windowHeight} = useWindowDimensions(); + const {windowWidth} = useWindowDimensions(); const personalDetails = usePersonalDetails(); const [account] = useOnyx(ONYXKEYS.ACCOUNT); @@ -57,11 +58,18 @@ function SecuritySettingsPage() { const [shouldShowRemoveDelegateModal, setShouldShowRemoveDelegateModal] = useState(false); const [selectedDelegate, setSelectedDelegate] = useState(); - const [anchorPosition, setAnchorPosition] = useState({ - anchorPositionTop: 0, - anchorPositionRight: 0, + const [anchorPosition, setAnchorPosition] = useState({ + horizontal: 0, + vertical: 0, }); + const isActingAsDelegate = !!account?.delegatedAccess?.delegate; + const delegates = account?.delegatedAccess?.delegates ?? []; + const delegators = account?.delegatedAccess?.delegators ?? []; + + const hasDelegates = delegates.length > 0; + const hasDelegators = delegators.length > 0; + const setMenuPosition = useCallback(() => { if (!delegateButtonRef.current) { return; @@ -69,18 +77,10 @@ function SecuritySettingsPage() { const position = getClickedTargetLocation(delegateButtonRef.current); setAnchorPosition({ - anchorPositionTop: Math.min(position.top + position.height - variables.bankAccountActionPopoverTopSpacing, windowHeight - variables.delegateAccessLevelModalHeight), - // We want the position to be 23px to the right of the left border - anchorPositionRight: windowWidth - position.right + variables.bankAccountActionPopoverRightSpacing, + horizontal: windowWidth - position.x, + vertical: position.y + position.height, }); - }, [windowWidth, windowHeight, delegateButtonRef]); - const isActingAsDelegate = !!account?.delegatedAccess?.delegate ?? false; - - const delegates = account?.delegatedAccess?.delegates ?? []; - const delegators = account?.delegatedAccess?.delegators ?? []; - - const hasDelegates = delegates.length > 0; - const hasDelegators = delegators.length > 0; + }, [windowWidth, delegateButtonRef]); const showPopoverMenu = (nativeEvent: GestureResponderEvent | KeyboardEvent, delegate: Delegate) => { delegateButtonRef.current = nativeEvent?.currentTarget as HTMLDivElement; @@ -172,7 +172,7 @@ function SecuritySettingsPage() { }), // eslint-disable-next-line react-compiler/react-compiler // eslint-disable-next-line react-hooks/exhaustive-deps - [delegates, translate, styles, personalDetails], + [delegates, translate, styles, personalDetails, windowWidth], ); const delegatorMenuItems: MenuItemProps[] = useMemo( @@ -198,6 +198,27 @@ function SecuritySettingsPage() { [delegators, styles, translate, personalDetails], ); + const delegatePopoverMenuItems: PopoverMenuItem[] = [ + { + text: translate('delegate.changeAccessLevel'), + icon: Expensicons.Pencil, + onPress: () => { + Navigation.navigate(ROUTES.SETTINGS_UPDATE_DELEGATE_ROLE.getRoute(selectedDelegate?.email ?? '', selectedDelegate?.role ?? '')); + setShouldShowDelegatePopoverMenu(false); + setSelectedDelegate(undefined); + }, + }, + { + text: translate('delegate.removeCopilot'), + icon: Expensicons.Trashcan, + onPress: () => + Modal.close(() => { + setShouldShowDelegatePopoverMenu(false); + setShouldShowRemoveDelegateModal(true); + }), + }, + ]; + return ( )} - } anchorPosition={{ - top: anchorPosition.anchorPositionTop, - right: anchorPosition.anchorPositionRight, + horizontal: anchorPosition.horizontal, + vertical: anchorPosition.vertical, }} + anchorAlignment={{ + horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT, + vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP, + }} + menuItems={delegatePopoverMenuItems} onClose={() => { setShouldShowDelegatePopoverMenu(false); }} - > - - { - Navigation.navigate(ROUTES.SETTINGS_UPDATE_DELEGATE_ROLE.getRoute(selectedDelegate?.email ?? '', selectedDelegate?.role ?? '')); - setShouldShowDelegatePopoverMenu(false); - setSelectedDelegate(undefined); - }} - wrapperStyle={[styles.pv3, styles.ph5, !shouldUseNarrowLayout ? styles.sidebarPopover : {}]} - /> - - Modal.close(() => { - setShouldShowDelegatePopoverMenu(false); - setShouldShowRemoveDelegateModal(true); - }) - } - wrapperStyle={[styles.pv3, styles.ph5, !shouldUseNarrowLayout ? styles.sidebarPopover : {}]} - /> - - + /> Date: Tue, 22 Oct 2024 03:40:17 +0530 Subject: [PATCH 3/5] rm unused --- src/styles/variables.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/styles/variables.ts b/src/styles/variables.ts index ad40c6688eed..dc6655791489 100644 --- a/src/styles/variables.ts +++ b/src/styles/variables.ts @@ -259,7 +259,6 @@ export default { minimalTopBarOffset: -26, searchHeaderHeight: 80, searchListContentMarginTop: 116, - delegateAccessLevelModalHeight: 168, h20: 20, h28: 28, From 0e0edac70988affb617c7e409ac8e3f08048afa9 Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Mon, 11 Nov 2024 01:32:40 +0530 Subject: [PATCH 4/5] add green color to menu dot for copilot --- src/pages/settings/Security/SecuritySettingsPage.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/pages/settings/Security/SecuritySettingsPage.tsx b/src/pages/settings/Security/SecuritySettingsPage.tsx index 42ac7c52e58f..b13cf04cfb7b 100644 --- a/src/pages/settings/Security/SecuritySettingsPage.tsx +++ b/src/pages/settings/Security/SecuritySettingsPage.tsx @@ -55,6 +55,8 @@ function SecuritySettingsPage() { const [shouldShowDelegatePopoverMenu, setShouldShowDelegatePopoverMenu] = useState(false); const [shouldShowRemoveDelegateModal, setShouldShowRemoveDelegateModal] = useState(false); const [selectedDelegate, setSelectedDelegate] = useState(); + const [selectedEmail, setSelectedEmail] = useState(); + const errorFields = account?.delegatedAccess?.errorFields ?? {}; const [anchorPosition, setAnchorPosition] = useState({ @@ -88,6 +90,7 @@ function SecuritySettingsPage() { setMenuPosition(); setShouldShowDelegatePopoverMenu(true); setSelectedDelegate(delegate); + setSelectedEmail(delegate.email); }; useLayoutEffect(() => { @@ -171,11 +174,12 @@ function SecuritySettingsPage() { onPendingActionDismiss: () => clearDelegateErrorsByField(email, 'addDelegate'), error, onPress, + success: selectedEmail === email, }; }), // eslint-disable-next-line react-compiler/react-compiler // eslint-disable-next-line react-hooks/exhaustive-deps - [delegates, translate, styles, personalDetails, errorFields, windowWidth], + [delegates, translate, styles, personalDetails, errorFields, windowWidth, selectedEmail], ); const delegatorMenuItems: MenuItemProps[] = useMemo( @@ -209,6 +213,7 @@ function SecuritySettingsPage() { Navigation.navigate(ROUTES.SETTINGS_UPDATE_DELEGATE_ROLE.getRoute(selectedDelegate?.email ?? '', selectedDelegate?.role ?? '')); setShouldShowDelegatePopoverMenu(false); setSelectedDelegate(undefined); + setSelectedEmail(undefined); }, }, { @@ -218,6 +223,7 @@ function SecuritySettingsPage() { Modal.close(() => { setShouldShowDelegatePopoverMenu(false); setShouldShowRemoveDelegateModal(true); + setSelectedEmail(undefined); }), }, ]; @@ -310,6 +316,7 @@ function SecuritySettingsPage() { menuItems={delegatePopoverMenuItems} onClose={() => { setShouldShowDelegatePopoverMenu(false); + setSelectedEmail(undefined); }} /> Date: Tue, 3 Dec 2024 02:43:06 +0530 Subject: [PATCH 5/5] fix horizontal position of popover --- src/pages/settings/Security/SecuritySettingsPage.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/pages/settings/Security/SecuritySettingsPage.tsx b/src/pages/settings/Security/SecuritySettingsPage.tsx index 2115b333d1a5..a93a9f154276 100644 --- a/src/pages/settings/Security/SecuritySettingsPage.tsx +++ b/src/pages/settings/Security/SecuritySettingsPage.tsx @@ -78,12 +78,11 @@ function SecuritySettingsPage() { } const position = getClickedTargetLocation(delegateButtonRef.current); - setAnchorPosition({ - horizontal: windowWidth - position.x, + horizontal: position.right - position.left, vertical: position.y + position.height, }); - }, [windowWidth, delegateButtonRef]); + }, [delegateButtonRef]); const showPopoverMenu = (nativeEvent: GestureResponderEvent | KeyboardEvent, delegate: Delegate) => { delegateButtonRef.current = nativeEvent?.currentTarget as HTMLDivElement;