Merge pull request #50643 from ChavdaSachin/fix/Error-when-copilot-ad…

…ds-a-new-contact-method-#50063 Show No access Modal when Copilot tries to add new contact method on behalf of owner.
Expensify · Oct 14, 2024 · 58a8528 · 58a8528
2 parents 8ff185a + 1603725
commit 58a8528
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 59 deletions.
diff --git a/src/components/DelegateNoAccessModal.tsx b/src/components/DelegateNoAccessModal.tsx
@@ -15,13 +15,11 @@ export default function DelegateNoAccessModal({isNoDelegateAccessMenuVisible = f
     const {translate} = useLocalize();
     const noDelegateAccessPromptStart = translate('delegate.notAllowedMessageStart', {accountOwnerEmail: delegatorEmail});
     const noDelegateAccessHyperLinked = translate('delegate.notAllowedMessageHyperLinked');
-    const noDelegateAccessPromptEnd = translate('delegate.notAllowedMessageEnd');
 
     const delegateNoAccessPrompt = (
         <Text>
             {noDelegateAccessPromptStart}
-            <TextLink href={CONST.DELEGATE_ROLE_HELPDOT_ARTICLE_LINK}>{noDelegateAccessHyperLinked}</TextLink>
-            {noDelegateAccessPromptEnd}
+            <TextLink href={CONST.DELEGATE_ROLE_HELPDOT_ARTICLE_LINK}>{noDelegateAccessHyperLinked}</TextLink>.
         </Text>
     );
 

diff --git a/src/languages/en.ts b/src/languages/en.ts
@@ -5008,8 +5008,7 @@ const translations = {
         enterMagicCodeUpdate: ({contactMethod}: EnterMagicCodeParams) => `Please enter the magic code sent to ${contactMethod} to update your copilot.`,
         notAllowed: 'Not so fast...',
         notAllowedMessageStart: ({accountOwnerEmail}: AccountOwnerParams) => `You don't have permission to take this action for ${accountOwnerEmail} as a`,
-        notAllowedMessageHyperLinked: ' limited access',
-        notAllowedMessageEnd: ' copilot',
+        notAllowedMessageHyperLinked: ' copilot',
     },
     debug: {
         debug: 'Debug',

diff --git a/src/languages/es.ts b/src/languages/es.ts
@@ -5523,8 +5523,7 @@ const translations = {
             `Por favor, introduce el código mágico enviado a ${contactMethod} para actualizar el nivel de acceso de tu copiloto.`,
         notAllowed: 'No tan rápido...',
         notAllowedMessageStart: ({accountOwnerEmail}: AccountOwnerParams) => `No tienes permiso para realizar esta acción para ${accountOwnerEmail}`,
-        notAllowedMessageHyperLinked: ' copiloto con acceso',
-        notAllowedMessageEnd: ' limitado',
+        notAllowedMessageHyperLinked: ' copiloto',
     },
     debug: {
         debug: 'Depuración',

diff --git a/src/pages/settings/Profile/Contacts/ContactMethodsPage.tsx b/src/pages/settings/Profile/Contacts/ContactMethodsPage.tsx
@@ -1,18 +1,20 @@
 import type {StackScreenProps} from '@react-navigation/stack';
 import {Str} from 'expensify-common';
-import React, {useCallback} from 'react';
+import React, {useCallback, useState} from 'react';
 import {View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
-import {withOnyx} from 'react-native-onyx';
+import {useOnyx, withOnyx} from 'react-native-onyx';
 import Button from '@components/Button';
 import CopyTextToClipboard from '@components/CopyTextToClipboard';
+import DelegateNoAccessModal from '@components/DelegateNoAccessModal';
 import FixedFooter from '@components/FixedFooter';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import MenuItem from '@components/MenuItem';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import ScreenWrapper from '@components/ScreenWrapper';
 import ScrollView from '@components/ScrollView';
 import Text from '@components/Text';
+import useDelegateUserDetails from '@hooks/useDelegateUserDetails';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
@@ -40,6 +42,10 @@ function ContactMethodsPage({loginList, session, route}: ContactMethodsPageProps
     const {formatPhoneNumber, translate} = useLocalize();
     const loginNames = Object.keys(loginList ?? {});
     const navigateBackTo = route?.params?.backTo;
+    const [account] = useOnyx(ONYXKEYS.ACCOUNT);
+    const isActingAsDelegate = !!account?.delegatedAccess?.delegate;
+    const [isNoDelegateAccessMenuVisible, setIsNoDelegateAccessMenuVisible] = useState(false);
+    const {delegatorEmail} = useDelegateUserDetails();
 
     // Sort the login names by placing the one corresponding to the default contact method as the first item before displaying the contact methods.
     // The default contact method is determined by checking against the session email (the current login).
@@ -97,8 +103,12 @@ function ContactMethodsPage({loginList, session, route}: ContactMethodsPageProps
     });
 
     const onNewContactMethodButtonPress = useCallback(() => {
+        if (isActingAsDelegate) {
+            setIsNoDelegateAccessMenuVisible(true);
+            return;
+        }
         Navigation.navigate(ROUTES.SETTINGS_NEW_CONTACT_METHOD.getRoute(navigateBackTo));
-    }, [navigateBackTo]);
+    }, [navigateBackTo, isActingAsDelegate]);
 
     return (
         <ScreenWrapper
@@ -131,6 +141,11 @@ function ContactMethodsPage({loginList, session, route}: ContactMethodsPageProps
                     />
                 </FixedFooter>
             </ScrollView>
+            <DelegateNoAccessModal
+                isNoDelegateAccessMenuVisible={isNoDelegateAccessMenuVisible}
+                onClose={() => setIsNoDelegateAccessMenuVisible(false)}
+                delegatorEmail={delegatorEmail ?? ''}
+            />
         </ScreenWrapper>
     );
 }

diff --git a/src/pages/settings/Profile/Contacts/NewContactMethodPage.tsx b/src/pages/settings/Profile/Contacts/NewContactMethodPage.tsx
@@ -20,6 +20,7 @@ import * as LoginUtils from '@libs/LoginUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
 import * as UserUtils from '@libs/UserUtils';
+import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
 import * as User from '@userActions/User';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -40,6 +41,8 @@ function NewContactMethodPage({route}: NewContactMethodPageProps) {
     const [loginList] = useOnyx(ONYXKEYS.LOGIN_LIST);
     const loginData = loginList?.[pendingContactAction?.contactMethod ?? contactMethod];
     const validateLoginError = ErrorUtils.getEarliestErrorField(loginData, 'validateLogin');
+    const [account] = useOnyx(ONYXKEYS.ACCOUNT);
+    const isActingAsDelegate = !!account?.delegatedAccess?.delegate;
 
     const navigateBackTo = route?.params?.backTo ?? ROUTES.SETTINGS_PROFILE;
 
@@ -100,56 +103,58 @@ function NewContactMethodPage({route}: NewContactMethodPageProps) {
     }, [navigateBackTo]);
 
     return (
-        <ScreenWrapper
-            onEntryTransitionEnd={() => loginInputRef.current?.focus()}
-            includeSafeAreaPaddingBottom={false}
-            shouldEnableMaxHeight
-            testID={NewContactMethodPage.displayName}
-        >
-            <HeaderWithBackButton
-                title={translate('contacts.newContactMethod')}
-                onBackButtonPress={onBackButtonPress}
-            />
-            <FormProvider
-                formID={ONYXKEYS.FORMS.NEW_CONTACT_METHOD_FORM}
-                validate={validate}
-                onSubmit={handleValidateMagicCode}
-                submitButtonText={translate('common.add')}
-                style={[styles.flexGrow1, styles.mh5]}
+        <AccessOrNotFoundWrapper shouldBeBlocked={isActingAsDelegate}>
+            <ScreenWrapper
+                onEntryTransitionEnd={() => loginInputRef.current?.focus()}
+                includeSafeAreaPaddingBottom={false}
+                shouldEnableMaxHeight
+                testID={NewContactMethodPage.displayName}
             >
-                <Text style={styles.mb5}>{translate('common.pleaseEnterEmailOrPhoneNumber')}</Text>
-                <View style={styles.mb6}>
-                    <InputWrapper
-                        InputComponent={TextInput}
-                        label={`${translate('common.email')}/${translate('common.phoneNumber')}`}
-                        aria-label={`${translate('common.email')}/${translate('common.phoneNumber')}`}
-                        role={CONST.ROLE.PRESENTATION}
-                        inputMode={CONST.INPUT_MODE.EMAIL}
-                        ref={loginInputRef}
-                        inputID={INPUT_IDS.PHONE_OR_EMAIL}
-                        autoCapitalize="none"
-                        enterKeyHint="done"
-                        maxLength={CONST.LOGIN_CHARACTER_LIMIT}
-                    />
-                </View>
-                {hasFailedToSendVerificationCode && (
-                    <DotIndicatorMessage
-                        messages={ErrorUtils.getLatestErrorField(pendingContactAction, 'actionVerified')}
-                        type="error"
-                    />
-                )}
-            </FormProvider>
-            <ValidateCodeActionModal
-                validatePendingAction={pendingContactAction?.pendingFields?.actionVerified}
-                validateError={validateLoginError}
-                handleSubmitForm={addNewContactMethod}
-                clearError={() => User.clearContactMethodErrors(contactMethod, 'validateLogin')}
-                onClose={() => setIsValidateCodeActionModalVisible(false)}
-                isVisible={isValidateCodeActionModalVisible}
-                title={contactMethod}
-                description={translate('contacts.enterMagicCode', {contactMethod})}
-            />
-        </ScreenWrapper>
+                <HeaderWithBackButton
+                    title={translate('contacts.newContactMethod')}
+                    onBackButtonPress={onBackButtonPress}
+                />
+                <FormProvider
+                    formID={ONYXKEYS.FORMS.NEW_CONTACT_METHOD_FORM}
+                    validate={validate}
+                    onSubmit={handleValidateMagicCode}
+                    submitButtonText={translate('common.add')}
+                    style={[styles.flexGrow1, styles.mh5]}
+                >
+                    <Text style={styles.mb5}>{translate('common.pleaseEnterEmailOrPhoneNumber')}</Text>
+                    <View style={styles.mb6}>
+                        <InputWrapper
+                            InputComponent={TextInput}
+                            label={`${translate('common.email')}/${translate('common.phoneNumber')}`}
+                            aria-label={`${translate('common.email')}/${translate('common.phoneNumber')}`}
+                            role={CONST.ROLE.PRESENTATION}
+                            inputMode={CONST.INPUT_MODE.EMAIL}
+                            ref={loginInputRef}
+                            inputID={INPUT_IDS.PHONE_OR_EMAIL}
+                            autoCapitalize="none"
+                            enterKeyHint="done"
+                            maxLength={CONST.LOGIN_CHARACTER_LIMIT}
+                        />
+                    </View>
+                    {hasFailedToSendVerificationCode && (
+                        <DotIndicatorMessage
+                            messages={ErrorUtils.getLatestErrorField(pendingContactAction, 'actionVerified')}
+                            type="error"
+                        />
+                    )}
+                </FormProvider>
+                <ValidateCodeActionModal
+                    validatePendingAction={pendingContactAction?.pendingFields?.actionVerified}
+                    validateError={validateLoginError}
+                    handleSubmitForm={addNewContactMethod}
+                    clearError={() => User.clearContactMethodErrors(contactMethod, 'validateLogin')}
+                    onClose={() => setIsValidateCodeActionModalVisible(false)}
+                    isVisible={isValidateCodeActionModalVisible}
+                    title={contactMethod}
+                    description={translate('contacts.enterMagicCode', {contactMethod})}
+                />
+            </ScreenWrapper>
+        </AccessOrNotFoundWrapper>
     );
 }