Handle blocked copilot and Expensify card flows gracefully

src/CONST.ts

@@ -4500,6 +4500,12 @@ const CONST = {
         ALL: 'all',
         SUBMITTER: 'submitter',
     },
+    DELEGATE: {
+        DENIED_ACCESS_VARIANTS: {
+            DELEGATE: 'delegate',
+            SUBMITTER: 'submitter',
+        },
+    },
     DELEGATE_ROLE_HELPDOT_ARTICLE_LINK: 'https://help.expensify.com/expensify-classic/hubs/copilots-and-delegates/',
     STRIPE_GBP_AUTH_STATUSES: {
         SUCCEEDED: 'succeeded',

src/components/AddressForm.tsx

@@ -56,6 +56,9 @@ type AddressFormProps = {
 
     /** A unique Onyx key identifying the form */
     formID: typeof ONYXKEYS.FORMS.GET_PHYSICAL_CARD_FORM | typeof ONYXKEYS.FORMS.HOME_ADDRESS_FORM;
+
+    /** Whether or not validation should be skipped */
+    skipValidation?: boolean;
 };
 
 function AddressForm({
@@ -70,6 +73,7 @@ function AddressForm({
     street2 = '',
     submitButtonText = '',
     zip = '',
+    skipValidation = false,
 }: AddressFormProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
@@ -139,7 +143,7 @@ function AddressForm({
         <FormProvider
             style={[styles.flexGrow1, styles.mh5]}
             formID={formID}
-            validate={validator}
+            validate={skipValidation ? undefined : validator}
             onSubmit={onSubmit}
             submitButtonText={submitButtonText}
             enabledWhenOffline

src/components/DelegateNoAccessModal.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import useDelegateUserDetails from '@hooks/useDelegateUserDetails';
 import useLocalize from '@hooks/useLocalize';
 import CONST from '@src/CONST';
 import ConfirmModal from './ConfirmModal';
@@ -8,14 +9,13 @@ import TextLink from './TextLink';
 type DelegateNoAccessModalProps = {
     isNoDelegateAccessMenuVisible: boolean;
     onClose: () => void;
-    delegatorEmail: string;
 };
 
-export default function DelegateNoAccessModal({isNoDelegateAccessMenuVisible = false, onClose, delegatorEmail = ''}: DelegateNoAccessModalProps) {
+export default function DelegateNoAccessModal({isNoDelegateAccessMenuVisible = false, onClose}: DelegateNoAccessModalProps) {
     const {translate} = useLocalize();
-    const noDelegateAccessPromptStart = translate('delegate.notAllowedMessageStart', {accountOwnerEmail: delegatorEmail});
+    const {delegatorEmail} = useDelegateUserDetails();
+    const noDelegateAccessPromptStart = translate('delegate.notAllowedMessageStart', {accountOwnerEmail: delegatorEmail ?? ''});
     const noDelegateAccessHyperLinked = translate('delegate.notAllowedMessageHyperLinked');
-
     const delegateNoAccessPrompt = (
         <Text>
             {noDelegateAccessPromptStart}

src/components/DelegateNoAccessWrapper.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import {OnyxEntry, useOnyx} from 'react-native-onyx';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import AccountUtils from '@libs/AccountUtils';
+import Navigation from '@libs/Navigation/Navigation';
+import NotFoundPage from '@pages/ErrorPage/NotFoundPage';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
+import {Account} from '@src/types/onyx';
+import callOrReturn from '@src/types/utils/callOrReturn';
+import {FullPageNotFoundViewProps} from './BlockingViews/FullPageNotFoundView';
+
+const DENIED_ACCESS_VARIANTS = {
+    [CONST.DELEGATE.DENIED_ACCESS_VARIANTS.DELEGATE]: (account: OnyxEntry<Account>) => isDelegate(account),
+    [CONST.DELEGATE.DENIED_ACCESS_VARIANTS.SUBMITTER]: (account: OnyxEntry<Account>) => isSubmitter(account),
+} as const satisfies Record<string, (account: OnyxEntry<Account>) => boolean>;
+
+type AccessDeniedVariants = keyof typeof DENIED_ACCESS_VARIANTS;
+
+type DelegateNoAccessWrapperProps = {
+    accessDeniedVariants?: AccessDeniedVariants[];
+    FullPageNotFoundViewProps?: FullPageNotFoundViewProps;
+    shouldShowFullScreenFallback?: boolean;
+    children: (() => React.ReactNode) | React.ReactNode;
+};
+
+type PageNotFoundFallbackProps = {
+    shouldShowFullScreenFallback?: boolean;
+};
+
+function isDelegate(account: OnyxEntry<Account>) {
+    const isActingAsDelegate = !!account?.delegatedAccess?.delegate;
+    return isActingAsDelegate;
+}
+
+function isSubmitter(account: OnyxEntry<Account>) {
+    const isDelegateOnlySubmitter = AccountUtils.isDelegateOnlySubmitter(account);
+    return isDelegateOnlySubmitter;
+}
+
+function PageNotFoundFallback({shouldShowFullScreenFallback}: PageNotFoundFallbackProps) {
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
+    return (
+        <NotFoundPage
+            shouldForceFullScreen={shouldShowFullScreenFallback}
+            onBackButtonPress={() => {
+                if (shouldShowFullScreenFallback) {
+                    Navigation.dismissModal();
+                    return;
+                }
+                Navigation.goBack();
+            }}
+            shouldShowBackButton={!shouldShowFullScreenFallback ? shouldUseNarrowLayout : undefined}
+        />
+    );
+}
+
+function DelegateNoAccessWrapper({accessDeniedVariants = [], shouldShowFullScreenFallback, ...props}: DelegateNoAccessWrapperProps) {
+    const [account] = useOnyx(ONYXKEYS.ACCOUNT);
+    const isPageAccessDenied = accessDeniedVariants.reduce((acc, variant) => {
+        const accessDeniedFunction = DENIED_ACCESS_VARIANTS[variant];
+        return acc || accessDeniedFunction(account);
+    }, false);
+    if (isPageAccessDenied) {
+        return <PageNotFoundFallback shouldShowFullScreenFallback={shouldShowFullScreenFallback} />;
+    }
+    return callOrReturn(props.children);
+}
+
+export default DelegateNoAccessWrapper;

src/components/Form/FormProvider.tsx

@@ -44,7 +44,7 @@ type FormProviderProps<TFormID extends OnyxFormKey = OnyxFormKey> = FormProps<TF
     children: ((props: {inputValues: FormOnyxValues<TFormID>}) => ReactNode) | ReactNode;
 
     /** Callback to validate the form */
-    validate?: (values: FormOnyxValues<TFormID>) => FormInputErrors<TFormID>;
+    validate?: (values: FormOnyxValues<TFormID>) => FormInputErrors<TFormID> | undefined;
 
     /** Should validate function be called when input loose focus */
     shouldValidateOnBlur?: boolean;

src/pages/AddressPage.tsx

@@ -1,6 +1,7 @@
 import React, {useCallback, useEffect, useState} from 'react';
-import type {OnyxEntry} from 'react-native-onyx';
+import {type OnyxEntry, useOnyx} from 'react-native-onyx';
 import AddressForm from '@components/AddressForm';
+import DelegateNoAccessModal from '@components/DelegateNoAccessModal';
 import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
@@ -37,6 +38,17 @@
     const [city, setCity] = useState(address?.city);
     const [zipcode, setZipcode] = useState(address?.zip);
 
+    const [account] = useOnyx(ONYXKEYS.ACCOUNT);
+    const isActingAsDelegate = !!account?.delegatedAccess?.delegate;
+    const [isNoDelegateAccessMenuVisible, setIsNoDelegateAccessMenuVisible] = useState(false);
+
+    // For delegates, modifying legal address is a restricted action.
+    // So, on pressing submit, skip validation and show delegateNoAccessModal
+    const skipValidation = isActingAsDelegate;
+    const handleSubmit = (values: FormOnyxValues<typeof ONYXKEYS.FORMS.HOME_ADDRESS_FORM>) => {
+        isActingAsDelegate ? setIsNoDelegateAccessMenuVisible(true) : updateAddress(values);
+    };
+
     useEffect(() => {
         if (!address) {
             return;
@@ -91,7 +103,7 @@
             ) : (
                 <AddressForm
                     formID={ONYXKEYS.FORMS.HOME_ADDRESS_FORM}
-                    onSubmit={updateAddress}
+                    onSubmit={handleSubmit}
                     submitButtonText={translate('common.save')}
                     city={city}
                     country={currentCountry}
@@ -100,8 +112,13 @@
                     street1={street1}
                     street2={street2}
                     zip={zipcode}
+                    skipValidation={skipValidation}
                 />
             )}
+            <DelegateNoAccessModal
+                isNoDelegateAccessMenuVisible={isNoDelegateAccessMenuVisible}
+                onClose={() => setIsNoDelegateAccessMenuVisible(false)}
+            />
         </ScreenWrapper>
     );
 }

src/pages/settings/InitialSettingsPage.tsx

@@ -8,6 +8,7 @@
 import AccountSwitcher from '@components/AccountSwitcher';
 import AccountSwitcherSkeletonView from '@components/AccountSwitcherSkeletonView';
 import ConfirmModal from '@components/ConfirmModal';
+import DelegateNoAccessModal from '@components/DelegateNoAccessModal';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import {InitialURLContext} from '@components/InitialURLContextProvider';
@@ -83,6 +84,10 @@
     const [policies] = useOnyx(ONYXKEYS.COLLECTION.POLICY);
     const [privatePersonalDetails] = useOnyx(ONYXKEYS.PRIVATE_PERSONAL_DETAILS);
 
+    const [account] = useOnyx(ONYXKEYS.ACCOUNT);
+    const isActingAsDelegate = !!account?.delegatedAccess?.delegate;
+    const [isNoDelegateAccessMenuVisible, setIsNoDelegateAccessMenuVisible] = useState(false);
+
     const network = useNetwork();
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -242,6 +247,10 @@
                           }
                         : {
                               action() {
+                                  if (isActingAsDelegate) {
+                                      setIsNoDelegateAccessMenuVisible(true);
+                                      return;
+                                  }
                                   resetExitSurveyForm(() => Navigation.navigate(ROUTES.SETTINGS_EXIT_SURVEY_REASON));
                               },
                           }),
@@ -270,7 +279,7 @@
                 },
             ],
         };
     }, [styles.pt4, signOut, setInitialURL]);
 
     /**
      * Retuns JSX.Element with menu items
@@ -435,6 +444,10 @@
                     onCancel={() => toggleSignoutConfirmModal(false)}
                 />
             </ScrollView>
+            <DelegateNoAccessModal
+                isNoDelegateAccessMenuVisible={isNoDelegateAccessMenuVisible}
+                onClose={() => setIsNoDelegateAccessMenuVisible(false)}
+            />
         </ScreenWrapper>
     );
 }

src/pages/settings/Profile/Contacts/ContactMethodsPage.tsx

@@ -13,7 +13,7 @@
 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';
@@ -36,7 +36,6 @@
     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).
@@ -132,7 +131,6 @@
             <DelegateNoAccessModal
                 isNoDelegateAccessMenuVisible={isNoDelegateAccessMenuVisible}
                 onClose={() => setIsNoDelegateAccessMenuVisible(false)}
-                delegatorEmail={delegatorEmail ?? ''}
             />
         </ScreenWrapper>
     );

src/pages/settings/Profile/Contacts/NewContactMethodPage.tsx

@@ -3,6 +3,7 @@
 import React, {useCallback, useEffect, useRef, useState} from 'react';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
+import DelegateNoAccessWrapper from '@components/DelegateNoAccessWrapper';
 import DotIndicatorMessage from '@components/DotIndicatorMessage';
 import FormProvider from '@components/Form/FormProvider';
 import InputWrapper from '@components/Form/InputWrapper';
@@ -21,7 +22,7 @@
 import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
 import {addSMSDomainIfPhoneNumber} from '@libs/PhoneNumber';
 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';
@@ -43,7 +44,7 @@
     const loginData = loginList?.[pendingContactAction?.contactMethod ?? contactMethod];
     const validateLoginError = ErrorUtils.getLatestErrorField(loginData, 'addedLogin');
     const [account] = useOnyx(ONYXKEYS.ACCOUNT);
     const isActingAsDelegate = !!account?.delegatedAccess?.delegate;
 
     const navigateBackTo = route?.params?.backTo ?? ROUTES.SETTINGS_PROFILE;
 
@@ -110,7 +111,8 @@
     }, [navigateBackTo]);
 
     return (
-        <AccessOrNotFoundWrapper shouldBeBlocked={isActingAsDelegate}>
+        // <AccessOrNotFoundWrapper shouldBeBlocked={isActingAsDelegate}>
+        <DelegateNoAccessWrapper accessDeniedVariants={[CONST.DELEGATE.DENIED_ACCESS_VARIANTS.DELEGATE]}>
             <ScreenWrapper
                 onEntryTransitionEnd={() => loginInputRef.current?.focus()}
                 includeSafeAreaPaddingBottom={false}
@@ -174,7 +176,8 @@
                     description={translate('contacts.enterMagicCode', {contactMethod})}
                 />
             </ScreenWrapper>
-        </AccessOrNotFoundWrapper>
+        </DelegateNoAccessWrapper>
+        // </AccessOrNotFoundWrapper>
     );
 }
 

src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.tsx

@@ -1,8 +1,9 @@
 import {subYears} from 'date-fns';
-import React, {useCallback} from 'react';
+import React, {useCallback, useState} from 'react';
 import type {OnyxEntry} from 'react-native-onyx';
-import {withOnyx} from 'react-native-onyx';
+import {useOnyx, withOnyx} from 'react-native-onyx';
 import DatePicker from '@components/DatePicker';
+import DelegateNoAccessModal from '@components/DelegateNoAccessModal';
 import FormProvider from '@components/Form/FormProvider';
 import InputWrapper from '@components/Form/InputWrapper';
 import type {FormOnyxValues} from '@components/Form/types';
@@ -16,7 +17,7 @@ import * as ValidationUtils from '@libs/ValidationUtils';
 import * as PersonalDetails from '@userActions/PersonalDetails';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import INPUT_IDS from '@src/types/form/DateOfBirthForm';
+import INPUT_IDS, {DateOfBirthForm} from '@src/types/form/DateOfBirthForm';
 import type {PrivatePersonalDetails} from '@src/types/onyx';
 
 type DateOfBirthPageOnyxProps = {
@@ -30,6 +31,9 @@ type DateOfBirthPageProps = DateOfBirthPageOnyxProps;
 function DateOfBirthPage({privatePersonalDetails, isLoadingApp = true}: DateOfBirthPageProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
+    const [account] = useOnyx(ONYXKEYS.ACCOUNT);
+    const isActingAsDelegate = !!account?.delegatedAccess?.delegate;
+    const [isNoDelegateAccessMenuVisible, setIsNoDelegateAccessMenuVisible] = useState(false);
 
     /**
      * @returns An object containing the errors for each inputID
@@ -48,6 +52,13 @@ function DateOfBirthPage({privatePersonalDetails, isLoadingApp = true}: DateOfBi
 
         return errors;
     }, []);
+    // For delegates, modifying legal DOB is a restricted action.
+    // So, on pressing submit, skip validation and show delegateNoAccessModal
+
+    const skipValidation = isActingAsDelegate;
+    const handleSubmit = (DOB: DateOfBirthForm) => {
+        isActingAsDelegate ? setIsNoDelegateAccessMenuVisible(true) : PersonalDetails.updateDateOfBirth(DOB);
+    };
 
     return (
         <ScreenWrapper
@@ -64,8 +75,8 @@ function DateOfBirthPage({privatePersonalDetails, isLoadingApp = true}: DateOfBi
                 <FormProvider
                     style={[styles.flexGrow1, styles.ph5]}
                     formID={ONYXKEYS.FORMS.DATE_OF_BIRTH_FORM}
-                    validate={validate}
-                    onSubmit={PersonalDetails.updateDateOfBirth}
+                    validate={skipValidation ? undefined : validate}
+                    onSubmit={handleSubmit}
                     submitButtonText={translate('common.save')}
                     enabledWhenOffline
                 >

src/pages/settings/Profile/PersonalDetails/LegalNamePage.tsx

@@ -1,7 +1,8 @@
-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 DelegateNoAccessModal from '@components/DelegateNoAccessModal';
 import FormProvider from '@components/Form/FormProvider';
 import InputWrapper from '@components/Form/InputWrapper';
 import type {FormOnyxValues} from '@components/Form/types';
@@ -33,12 +34,14 @@ type LegalNamePageProps = LegalNamePageOnyxProps;
 const updateLegalName = (values: PrivatePersonalDetails) => {
     PersonalDetails.updateLegalName(values.legalFirstName?.trim() ?? '', values.legalLastName?.trim() ?? '');
 };
-
 function LegalNamePage({privatePersonalDetails, isLoadingApp = true}: LegalNamePageProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const legalFirstName = privatePersonalDetails?.legalFirstName ?? '';
     const legalLastName = privatePersonalDetails?.legalLastName ?? '';
+    const [account] = useOnyx(ONYXKEYS.ACCOUNT);
+    const isActingAsDelegate = !!account?.delegatedAccess?.delegate;
+    const [isNoDelegateAccessMenuVisible, setIsNoDelegateAccessMenuVisible] = useState(false);
 
     const validate = useCallback(
         (values: FormOnyxValues<typeof ONYXKEYS.FORMS.LEGAL_NAME_FORM>) => {
@@ -83,6 +86,14 @@ function LegalNamePage({privatePersonalDetails, isLoadingApp = true}: LegalNameP
         [translate],
     );
 
+    // For delegates, modifying legal Name is a restricted action.
+    // So, on pressing submit, skip validation and show delegateNoAccessModal
+
+    const skipValidation = isActingAsDelegate;
+    const handleSubmit = (values: PrivatePersonalDetails) => {
+        isActingAsDelegate ? setIsNoDelegateAccessMenuVisible(true) : updateLegalName(values);
+    };
+
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
@@ -99,8 +110,8 @@ function LegalNamePage({privatePersonalDetails, isLoadingApp = true}: LegalNameP
                 <FormProvider
                     style={[styles.flexGrow1, styles.ph5]}
                     formID={ONYXKEYS.FORMS.LEGAL_NAME_FORM}
-                    validate={validate}
-                    onSubmit={updateLegalName}
+                    validate={skipValidation ? undefined : validate}
+                    onSubmit={handleSubmit}
                     submitButtonText={translate('common.save')}
                     enabledWhenOffline
                 >
@@ -130,6 +141,10 @@ function LegalNamePage({privatePersonalDetails, isLoadingApp = true}: LegalNameP
                     </View>
                 </FormProvider>
             )}
+            <DelegateNoAccessModal
+                isNoDelegateAccessMenuVisible={isNoDelegateAccessMenuVisible}
+                onClose={() => setIsNoDelegateAccessMenuVisible(false)}
+            />
         </ScreenWrapper>
     );
 }