Update Permissions for Copilots

src/pages/settings/Security/AddDelegate/AddDelegatePage.tsx

@@ -13,6 +13,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import * as ReportActions from '@libs/actions/Report';
 import Navigation from '@libs/Navigation/Navigation';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
+import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
@@ -79,6 +80,8 @@ function AddDelegatePage() {
     const styles = useThemeStyles();
     const [isSearchingForReports] = useOnyx(ONYXKEYS.IS_SEARCHING_FOR_REPORTS, {initWithStoredValues: false});
     const {userToInvite, recentReports, personalDetails, searchValue, debouncedSearchValue, setSearchValue, headerMessage, areOptionsInitialized} = useOptions();
+    const [account] = useOnyx(ONYXKEYS.ACCOUNT);
+    const isActingAsDelegate = !!account?.delegatedAccess?.delegate;
 
     const sections = useMemo(() => {
         const sectionsList = [];
@@ -126,29 +129,31 @@ function AddDelegatePage() {
     }, [debouncedSearchValue]);
 
     return (
-        <ScreenWrapper
-            includeSafeAreaPaddingBottom={false}
-            testID={AddDelegatePage.displayName}
-        >
-            <HeaderWithBackButton
-                title={translate('delegate.addCopilot')}
-                onBackButtonPress={() => Navigation.goBack()}
-            />
-            <View style={[styles.flex1, styles.w100, styles.pRelative]}>
-                <SelectionList
-                    sections={areOptionsInitialized ? sections : []}
-                    ListItem={UserListItem}
-                    onSelectRow={onSelectRow}
-                    shouldSingleExecuteRowSelect
-                    onChangeText={setSearchValue}
-                    textInputValue={searchValue}
-                    headerMessage={headerMessage}
-                    textInputLabel={translate('selectionList.nameEmailOrPhoneNumber')}
-                    showLoadingPlaceholder={!areOptionsInitialized}
-                    isLoadingNewOptions={!!isSearchingForReports}
+        <AccessOrNotFoundWrapper shouldBeBlocked={isActingAsDelegate}>
+            <ScreenWrapper
+                includeSafeAreaPaddingBottom={false}
+                testID={AddDelegatePage.displayName}
+            >
+                <HeaderWithBackButton
+                    title={translate('delegate.addCopilot')}
+                    onBackButtonPress={() => Navigation.goBack()}
                 />
-            </View>
-        </ScreenWrapper>
+                <View style={[styles.flex1, styles.w100, styles.pRelative]}>
+                    <SelectionList
+                        sections={areOptionsInitialized ? sections : []}
+                        ListItem={UserListItem}
+                        onSelectRow={onSelectRow}
+                        shouldSingleExecuteRowSelect
+                        onChangeText={setSearchValue}
+                        textInputValue={searchValue}
+                        headerMessage={headerMessage}
+                        textInputLabel={translate('selectionList.nameEmailOrPhoneNumber')}
+                        showLoadingPlaceholder={!areOptionsInitialized}
+                        isLoadingNewOptions={!!isSearchingForReports}
+                    />
+                </View>
+            </ScreenWrapper>
+        </AccessOrNotFoundWrapper>
     );
 }
 

src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx

@@ -1,4 +1,5 @@
 import React, {useState} from 'react';
+import {useOnyx} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
 import Button from '@components/Button';
 import HeaderPageLayout from '@components/HeaderPageLayout';
@@ -15,7 +16,9 @@ import Navigation from '@libs/Navigation/Navigation';
 import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
 import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
+import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
 import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
 import DelegateMagicCodeModal from './DelegateMagicCodeModal';
@@ -29,6 +32,8 @@ function ConfirmDelegatePage({route}: ConfirmDelegatePageProps) {
     const login = route.params.login;
     const role = route.params.role as ValueOf<typeof CONST.DELEGATE_ROLE>;
     const showValidateActionModal = route.params.showValidateActionModal === 'true';
+    const [account] = useOnyx(ONYXKEYS.ACCOUNT);
+    const isActingAsDelegate = !!account?.delegatedAccess?.delegate;
     const {isOffline} = useNetwork();
 
     const [isValidateCodeActionModalVisible, setIsValidateCodeActionModalVisible] = useState(showValidateActionModal ?? false);
@@ -53,42 +58,44 @@ function ConfirmDelegatePage({route}: ConfirmDelegatePageProps) {
     );
 
     return (
-        <HeaderPageLayout
-            onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_DELEGATE_ROLE.getRoute(login, role))}
-            title={translate('delegate.addCopilot')}
-            testID={ConfirmDelegatePage.displayName}
-            footer={submitButton}
-            childrenContainerStyles={[styles.pt3, styles.gap6]}
-        >
-            <Text style={[styles.ph5]}>{translate('delegate.confirmCopilot')}</Text>
-            <MenuItem
-                avatarID={personalDetails?.accountID ?? -1}
-                iconType={CONST.ICON_TYPE_AVATAR}
-                icon={avatarIcon}
-                title={displayName}
-                description={formattedLogin}
-                interactive={false}
-            />
-            <MenuItemWithTopDescription
-                title={translate('delegate.role', {role})}
-                description={translate('delegate.accessLevel')}
-                helperText={translate('delegate.roleDescription', {role})}
-                onPress={() => Navigation.navigate(ROUTES.SETTINGS_DELEGATE_ROLE.getRoute(login, role))}
-                shouldShowRightIcon
-            />
-            <DelegateMagicCodeModal
-                login={login}
-                role={role}
-                onClose={() => {
-                    if (!showValidateActionModal) {
-                        setIsValidateCodeActionModalVisible(false);
-                        return;
-                    }
-                    Navigation.navigate(ROUTES.SETTINGS_SECURITY);
-                }}
-                isValidateCodeActionModalVisible={isValidateCodeActionModalVisible}
-            />
-        </HeaderPageLayout>
+        <AccessOrNotFoundWrapper shouldBeBlocked={isActingAsDelegate}>
+            <HeaderPageLayout
+                onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_DELEGATE_ROLE.getRoute(login, role))}
+                title={translate('delegate.addCopilot')}
+                testID={ConfirmDelegatePage.displayName}
+                footer={submitButton}
+                childrenContainerStyles={[styles.pt3, styles.gap6]}
+            >
+                <Text style={[styles.ph5]}>{translate('delegate.confirmCopilot')}</Text>
+                <MenuItem
+                    avatarID={personalDetails?.accountID ?? -1}
+                    iconType={CONST.ICON_TYPE_AVATAR}
+                    icon={avatarIcon}
+                    title={displayName}
+                    description={formattedLogin}
+                    interactive={false}
+                />
+                <MenuItemWithTopDescription
+                    title={translate('delegate.role', {role})}
+                    description={translate('delegate.accessLevel')}
+                    helperText={translate('delegate.roleDescription', {role})}
+                    onPress={() => Navigation.navigate(ROUTES.SETTINGS_DELEGATE_ROLE.getRoute(login, role))}
+                    shouldShowRightIcon
+                />
+                <DelegateMagicCodeModal
+                    login={login}
+                    role={role}
+                    onClose={() => {
+                        if (!showValidateActionModal) {
+                            setIsValidateCodeActionModalVisible(false);
+                            return;
+                        }
+                        Navigation.navigate(ROUTES.SETTINGS_SECURITY);
+                    }}
+                    isValidateCodeActionModalVisible={isValidateCodeActionModalVisible}
+                />
+            </HeaderPageLayout>
+        </AccessOrNotFoundWrapper>
     );
 }
 

src/pages/settings/Security/AddDelegate/DelegateMagicCodeModal.tsx

@@ -6,6 +6,7 @@ import useLocalize from '@hooks/useLocalize';
 import * as User from '@libs/actions/User';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import Navigation from '@libs/Navigation/Navigation';
+import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
 import * as Delegate from '@userActions/Delegate';
 import type CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -21,6 +22,7 @@ type DelegateMagicCodeModalProps = {
 function DelegateMagicCodeModal({login, role, onClose, isValidateCodeActionModalVisible}: DelegateMagicCodeModalProps) {
     const {translate} = useLocalize();
     const [account] = useOnyx(ONYXKEYS.ACCOUNT);
+    const isActingAsDelegate = !!account?.delegatedAccess?.delegate;
 
     const currentDelegate = account?.delegatedAccess?.delegates?.find((d) => d.email === login);
     const addDelegateErrors = account?.delegatedAccess?.errorFields?.addDelegate?.[login];
@@ -47,17 +49,19 @@ function DelegateMagicCodeModal({login, role, onClose, isValidateCodeActionModal
     };
 
     return (
-        <ValidateCodeActionModal
-            clearError={clearError}
-            onClose={onBackButtonPress}
-            validateError={validateLoginError}
-            isVisible={isValidateCodeActionModalVisible}
-            title={translate('delegate.makeSureItIsYou')}
-            sendValidateCode={() => User.requestValidateCodeAction()}
-            hasMagicCodeBeenSent={!!currentDelegate?.validateCodeSent}
-            handleSubmitForm={(validateCode) => Delegate.addDelegate(login, role, validateCode)}
-            descriptionPrimary={translate('delegate.enterMagicCode', {contactMethod: account?.primaryLogin ?? ''})}
-        />
+        <AccessOrNotFoundWrapper shouldBeBlocked={isActingAsDelegate}>
+            <ValidateCodeActionModal
+                clearError={clearError}
+                onClose={onBackButtonPress}
+                validateError={validateLoginError}
+                isVisible={isValidateCodeActionModalVisible}
+                title={translate('delegate.makeSureItIsYou')}
+                sendValidateCode={() => User.requestValidateCodeAction()}
+                hasMagicCodeBeenSent={!!currentDelegate?.validateCodeSent}
+                handleSubmitForm={(validateCode) => Delegate.addDelegate(login, role, validateCode)}
+                descriptionPrimary={translate('delegate.enterMagicCode', {contactMethod: account?.primaryLogin ?? ''})}
+            />
+        </AccessOrNotFoundWrapper>
     );
 }
 

src/pages/settings/Security/AddDelegate/SelectDelegateRolePage.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import {useOnyx} from 'react-native-onyx';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import SelectionList from '@components/SelectionList';
@@ -10,7 +11,9 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
 import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
 import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
+import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
 import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
 
@@ -19,6 +22,8 @@ type SelectDelegateRolePageProps = PlatformStackScreenProps<SettingsNavigatorPar
 function SelectDelegateRolePage({route}: SelectDelegateRolePageProps) {
     const {translate} = useLocalize();
     const login = route.params.login;
+    const [account] = useOnyx(ONYXKEYS.ACCOUNT);
+    const isActingAsDelegate = !!account?.delegatedAccess?.delegate;
 
     const styles = useThemeStyles();
     const roleOptions = Object.values(CONST.DELEGATE_ROLE).map((role) => ({
@@ -30,39 +35,41 @@ function SelectDelegateRolePage({route}: SelectDelegateRolePageProps) {
     }));
 
     return (
-        <ScreenWrapper
-            includeSafeAreaPaddingBottom={false}
-            testID={SelectDelegateRolePage.displayName}
-        >
-            <HeaderWithBackButton
-                title={translate('delegate.accessLevel')}
-                onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_ADD_DELEGATE)}
-            />
-            <SelectionList
-                isAlternateTextMultilineSupported
-                alternateTextNumberOfLines={4}
-                initiallyFocusedOptionKey={roleOptions.find((role) => role.isSelected)?.keyForList}
-                shouldUpdateFocusedIndex
-                headerContent={
-                    <Text style={[styles.ph5, styles.pb5, styles.pt3]}>
-                        <>
-                            {translate('delegate.accessLevelDescription')}{' '}
-                            <TextLink
-                                style={[styles.link]}
-                                href={CONST.COPILOT_HELP_URL}
-                            >
-                                {translate('common.learnMore')}
-                            </TextLink>
-                        </>
-                    </Text>
-                }
-                onSelectRow={(option) => {
-                    Navigation.navigate(ROUTES.SETTINGS_DELEGATE_CONFIRM.getRoute(login, option.value));
-                }}
-                sections={[{data: roleOptions}]}
-                ListItem={RadioListItem}
-            />
-        </ScreenWrapper>
+        <AccessOrNotFoundWrapper shouldBeBlocked={isActingAsDelegate}>
+            <ScreenWrapper
+                includeSafeAreaPaddingBottom={false}
+                testID={SelectDelegateRolePage.displayName}
+            >
+                <HeaderWithBackButton
+                    title={translate('delegate.accessLevel')}
+                    onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_ADD_DELEGATE)}
+                />
+                <SelectionList
+                    isAlternateTextMultilineSupported
+                    alternateTextNumberOfLines={4}
+                    initiallyFocusedOptionKey={roleOptions.find((role) => role.isSelected)?.keyForList}
+                    shouldUpdateFocusedIndex
+                    headerContent={
+                        <Text style={[styles.ph5, styles.pb5, styles.pt3]}>
+                            <>
+                                {translate('delegate.accessLevelDescription')}{' '}
+                                <TextLink
+                                    style={[styles.link]}
+                                    href={CONST.COPILOT_HELP_URL}
+                                >
+                                    {translate('common.learnMore')}
+                                </TextLink>
+                            </>
+                        </Text>
+                    }
+                    onSelectRow={(option) => {
+                        Navigation.navigate(ROUTES.SETTINGS_DELEGATE_CONFIRM.getRoute(login, option.value));
+                    }}
+                    sections={[{data: roleOptions}]}
+                    ListItem={RadioListItem}
+                />
+            </ScreenWrapper>
+        </AccessOrNotFoundWrapper>
     );
 }
 

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

@@ -9,6 +9,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
 import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
 import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
+import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
 import type CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
@@ -21,6 +22,7 @@ type UpdateDelegateMagicCodePageProps = PlatformStackScreenProps<SettingsNavigat
 function UpdateDelegateMagicCodePage({route}: UpdateDelegateMagicCodePageProps) {
     const {translate} = useLocalize();
     const [account] = useOnyx(ONYXKEYS.ACCOUNT);
+    const isActingAsDelegate = !!account?.delegatedAccess?.delegate;
     const login = route.params.login;
     const role = route.params.role as ValueOf<typeof CONST.DELEGATE_ROLE>;
 
@@ -44,28 +46,30 @@ function UpdateDelegateMagicCodePage({route}: UpdateDelegateMagicCodePageProps)
     };
 
     return (
-        <ScreenWrapper
-            includeSafeAreaPaddingBottom={false}
-            shouldEnableMaxHeight
-            testID={UpdateDelegateMagicCodePage.displayName}
-            offlineIndicatorStyle={styles.mtAuto}
-        >
-            {({safeAreaPaddingBottomStyle}) => (
-                <>
-                    <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}
-                    />
-                </>
-            )}
-        </ScreenWrapper>
+        <AccessOrNotFoundWrapper shouldBeBlocked={isActingAsDelegate}>
+            <ScreenWrapper
+                includeSafeAreaPaddingBottom={false}
+                shouldEnableMaxHeight
+                testID={UpdateDelegateMagicCodePage.displayName}
+                offlineIndicatorStyle={styles.mtAuto}
+            >
+                {({safeAreaPaddingBottomStyle}) => (
+                    <>
+                        <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}
+                        />
+                    </>
+                )}
+            </ScreenWrapper>
+        </AccessOrNotFoundWrapper>
     );
 }