Add copilot section to security page and add copilot

src/CONST.ts

@@ -715,6 +715,7 @@ const CONST = {
         "https://help.expensify.com/articles/expensify-classic/connections/sage-intacct/Sage-Intacct-Troubleshooting#:~:text=First%20make%20sure%20that%20you,your%20company's%20Web%20Services%20authorizations.",
     PRICING: `https://www.expensify.com/pricing`,
     CUSTOM_REPORT_NAME_HELP_URL: 'https://help.expensify.com/articles/expensify-classic/spending-insights/Custom-Templates',
+    COPILOT_HELP_URL: 'https://help.expensify.com/articles/expensify-classic/copilots-and-delegates/Assign-or-remove-a-Copilot',
     // Use Environment.getEnvironmentURL to get the complete URL with port number
     DEV_NEW_EXPENSIFY_URL: 'https://dev.new.expensify.com:',
     OLDDOT_URLS: {
@@ -4084,8 +4085,8 @@ const CONST = {
         GETCODE: 'GETCODE',
     },
     DELEGATE_ROLE: {
-        SUBMITTER: 'submitter',
         ALL: 'all',
+        SUBMITTER: 'submitter',
     },
     DELEGATE_ROLE_HELPDOT_ARTICLE_LINK: 'https://help.expensify.com/expensify-classic/hubs/copilots-and-delegates/',
     STRIPE_GBP_AUTH_STATUSES: {

src/ROUTES.ts

@@ -134,6 +134,19 @@ const ROUTES = {
     SETTINGS_WORKSPACES: 'settings/workspaces',
     SETTINGS_SECURITY: 'settings/security',
     SETTINGS_CLOSE: 'settings/security/closeAccount',
+    SETTINGS_ADD_DELEGATE: 'settings/security/delegate',
+    SETTINGS_DELEGATE_ROLE: {
+        route: 'settings/security/delegate/:login/role/:role',
+        getRoute: (login: string, role?: string) => `settings/security/delegate/${encodeURIComponent(login)}/role/${role}` as const,
+    },
+    SETTINGS_DELEGATE_CONFIRM: {
+        route: 'settings/security/delegate/:login/role/:role/confirm',
+        getRoute: (login: string, role: string) => `settings/security/delegate/${encodeURIComponent(login)}/role/${role}/confirm` as const,
+    },
+    SETTINGS_DELEGATE_MAGIC_CODE: {
+        route: 'settings/security/delegate/:login/role/:role/magic-code',
+        getRoute: (login: string, role: string) => `settings/security/delegate/${encodeURIComponent(login)}/role/${role}/magic-code` as const,
+    },
     SETTINGS_ABOUT: 'settings/about',
     SETTINGS_APP_DOWNLOAD_LINKS: 'settings/about/app-download-links',
     SETTINGS_WALLET: 'settings/wallet',

src/SCREENS.ts

@@ -130,6 +130,12 @@ const SCREENS = {
             CHANGE_PAYMENT_CURRENCY: 'Settings_Subscription_Change_Payment_Currency',
             REQUEST_EARLY_CANCELLATION: 'Settings_Subscription_RequestEarlyCancellation',
         },
+        DELEGATE: {
+            ADD_DELEGATE: 'Settings_Delegate_Add',
+            DELEGATE_ROLE: 'Settings_Delegate_Role',
+            DELEGATE_CONFIRM: 'Settings_Delegate_Confirm',
+            DELEGATE_MAGIC_CODE: 'Settings_Delegate_Magic_Code',
+        },
     },
     SAVE_THE_WORLD: {
         ROOT: 'SaveTheWorld_Root',

src/components/AccountSwitcher.tsx

@@ -10,13 +10,14 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {clearDelegatorErrors, connect, disconnect} from '@libs/actions/Delegate';
+import * as ErrorUtils from '@libs/ErrorUtils';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import variables from '@styles/variables';
 import * as Modal from '@userActions/Modal';
 import CONST from '@src/CONST';
-import type {TranslationPaths} from '@src/languages/types';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {PersonalDetails} from '@src/types/onyx';
+import type {Errors} from '@src/types/onyx/OnyxCommon';
 import Avatar from './Avatar';
 import ConfirmModal from './ConfirmModal';
 import Icon from './Icon';
@@ -46,7 +47,8 @@ function AccountSwitcher() {
     const isActingAsDelegate = !!account?.delegatedAccess?.delegate ?? false;
     const canSwitchAccounts = canUseNewDotCopilot && (delegators.length > 0 || isActingAsDelegate);
 
-    const createBaseMenuItem = (personalDetails: PersonalDetails | undefined, error?: TranslationPaths, additionalProps: MenuItemWithLink = {}): MenuItemWithLink => {
+    const createBaseMenuItem = (personalDetails: PersonalDetails | undefined, errors?: Errors, additionalProps: MenuItemWithLink = {}): MenuItemWithLink => {
+        const error = Object.values(errors ?? {})[0] ?? '';
         return {
             title: personalDetails?.displayName ?? personalDetails?.login,
             description: Str.removeSMSDomain(personalDetails?.login ?? ''),
@@ -55,7 +57,7 @@ function AccountSwitcher() {
             iconType: CONST.ICON_TYPE_AVATAR,
             outerWrapperStyle: shouldUseNarrowLayout ? {} : styles.accountSwitcherPopover,
             numberOfLinesDescription: 1,
-            errorText: error ? translate(error) : '',
+            errorText: error ?? '',
             shouldShowRedDotIndicator: !!error,
             errorTextStyle: styles.mt2,
             ...additionalProps,
@@ -81,7 +83,7 @@ function AccountSwitcher() {
             }
 
             const delegatePersonalDetails = PersonalDetailsUtils.getPersonalDetailByEmail(delegateEmail);
-            const error = account?.delegatedAccess?.error;
+            const error = ErrorUtils.getLatestErrorField(account?.delegatedAccess, 'connect');
 
             return [
                 createBaseMenuItem(delegatePersonalDetails, error, {
@@ -100,7 +102,8 @@ function AccountSwitcher() {
 
         const delegatorMenuItems: MenuItemProps[] = delegators
             .filter(({email}) => email !== currentUserPersonalDetails.login)
-            .map(({email, role, error}, index) => {
+            .map(({email, role, errorFields}, index) => {
+                const error = ErrorUtils.getLatestErrorField({errorFields}, 'connect');
                 const personalDetails = PersonalDetailsUtils.getPersonalDetailByEmail(email);
                 return createBaseMenuItem(personalDetails, error, {
                     badgeText: translate('delegate.role', role),
@@ -177,7 +180,7 @@ function AccountSwitcher() {
                     anchorPosition={styles.accountSwitcherAnchorPosition}
                 >
                     <View style={styles.pb4}>
-                        <Text style={[styles.createMenuHeaderText, styles.ph5, styles.pb2, styles.pt4]}>{translate('delegate.switchAccount')}</Text>
+                        <Text style={[styles.createMenuHeaderText, styles.ph5, styles.pb3, !shouldUseNarrowLayout && styles.pt4]}>{translate('delegate.switchAccount')}</Text>
                         <MenuItemList
                             menuItems={menuItems()}
                             shouldUseSingleExecution

src/components/Icon/Expensicons.ts

@@ -185,6 +185,7 @@ import Unlock from '@assets/images/unlock.svg';
 import UploadAlt from '@assets/images/upload-alt.svg';
 import Upload from '@assets/images/upload.svg';
 import UserCheck from '@assets/images/user-check.svg';
+import UserPlus from '@assets/images/user-plus.svg';
 import User from '@assets/images/user.svg';
 import Users from '@assets/images/users.svg';
 import VolumeHigh from '@assets/images/volume-high.svg';
@@ -391,6 +392,7 @@ export {
     CalendarSolid,
     Filter,
     CaretUpDown,
+    UserPlus,
     Feed,
     Table,
     SpreadsheetComputer,

src/components/MenuItemList.tsx

@@ -3,8 +3,10 @@ import type {GestureResponderEvent, View} from 'react-native';
 import useSingleExecution from '@hooks/useSingleExecution';
 import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportActionContextMenu';
 import CONST from '@src/CONST';
+import type * as OnyxCommon from '@src/types/onyx/OnyxCommon';
 import type {MenuItemProps} from './MenuItem';
 import MenuItem from './MenuItem';
+import OfflineWithFeedback from './OfflineWithFeedback';
 
 type MenuItemLink = string | (() => Promise<string>);
 
@@ -14,6 +16,18 @@ type MenuItemWithLink = MenuItemProps & {
 
     /** A unique key for the menu item */
     key?: string;
+
+    /** The pending action for the menu item */
+    pendingAction?: OnyxCommon.PendingAction | null;
+
+    /** A function to dismiss the pending action */
+    onPendingActionDismiss?: () => void;
+
+    /** The error for the menu item */
+    error?: OnyxCommon.Errors | null;
+
+    /** Whether we should force opacity */
+    shouldForceOpacity?: boolean;
 };
 
 type MenuItemListProps = {
@@ -45,16 +59,23 @@ function MenuItemList({menuItems = [], shouldUseSingleExecution = false}: MenuIt
     return (
         <>
             {menuItems.map((menuItemProps) => (
-                <MenuItem
-                    key={menuItemProps.key ?? menuItemProps.title}
-                    onSecondaryInteraction={menuItemProps.link !== undefined ? (e) => secondaryInteraction(menuItemProps.link, e) : undefined}
-                    ref={popoverAnchor}
-                    shouldBlockSelection={!!menuItemProps.link}
-                    // eslint-disable-next-line react/jsx-props-no-spreading
-                    {...menuItemProps}
-                    disabled={!!menuItemProps.disabled || isExecuting}
-                    onPress={shouldUseSingleExecution ? singleExecution(menuItemProps.onPress) : menuItemProps.onPress}
-                />
+                <OfflineWithFeedback
+                    pendingAction={menuItemProps.pendingAction}
+                    onClose={menuItemProps.onPendingActionDismiss}
+                    errors={menuItemProps.error}
+                    shouldForceOpacity={menuItemProps.shouldForceOpacity}
+                >
+                    <MenuItem
+                        key={menuItemProps.key ?? menuItemProps.title}
+                        onSecondaryInteraction={menuItemProps.link !== undefined ? (e) => secondaryInteraction(menuItemProps.link, e) : undefined}
+                        ref={popoverAnchor}
+                        shouldBlockSelection={!!menuItemProps.link}
+                        // eslint-disable-next-line react/jsx-props-no-spreading
+                        {...menuItemProps}
+                        disabled={!!menuItemProps.disabled || isExecuting}
+                        onPress={shouldUseSingleExecution ? singleExecution(menuItemProps.onPress) : menuItemProps.onPress}
+                    />
+                </OfflineWithFeedback>
             ))}
         </>
     );

src/components/OfflineWithFeedback.tsx

@@ -60,6 +60,9 @@ type OfflineWithFeedbackProps = ChildrenProps & {
 
     /** Whether we should render the error message above the children */
     shouldDisplayErrorAbove?: boolean;
+
+    /** Whether we should force opacity */
+    shouldForceOpacity?: boolean;
 };
 
 type StrikethroughProps = Partial<ChildrenProps> & {style: AllStyles[]};
@@ -78,6 +81,7 @@ function OfflineWithFeedback({
     shouldShowErrorMessages = true,
     style,
     shouldDisplayErrorAbove = false,
+    shouldForceOpacity = false,
     ...rest
 }: OfflineWithFeedbackProps) {
     const styles = useThemeStyles();
@@ -89,7 +93,7 @@ function OfflineWithFeedback({
     const isOfflinePendingAction = !!isOffline && !!pendingAction;
     const isUpdateOrDeleteError = hasErrors && (pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE || pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE);
     const isAddError = hasErrors && pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD;
-    const needsOpacity = !shouldDisableOpacity && ((isOfflinePendingAction && !isUpdateOrDeleteError) || isAddError);
+    const needsOpacity = (!shouldDisableOpacity && ((isOfflinePendingAction && !isUpdateOrDeleteError) || isAddError)) || shouldForceOpacity;
     const needsStrikeThrough = !shouldDisableStrikeThrough && isOffline && pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE;
     const hideChildren = shouldHideOnDelete && !isOffline && pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE && !hasErrors;
     let children = rest.children;

src/components/SelectionList/BaseSelectionList.tsx

@@ -83,6 +83,7 @@ function BaseSelectionList<TItem extends ListItem>(
         listHeaderWrapperStyle,
         isRowMultilineSupported = false,
         isAlternateTextMultilineSupported = false,
+        alternateTextNumberOfLines = 2,
         textInputRef,
         headerMessageStyle,
         shouldHideListOnInitialRender = true,
@@ -467,6 +468,7 @@ function BaseSelectionList<TItem extends ListItem>(
                     keyForList={item.keyForList ?? ''}
                     isMultilineSupported={isRowMultilineSupported}
                     isAlternateTextMultilineSupported={isAlternateTextMultilineSupported}
+                    alternateTextNumberOfLines={alternateTextNumberOfLines}
                     onFocus={() => {
                         if (isDisabled) {
                             return;

src/components/SelectionList/RadioListItem.tsx

@@ -18,6 +18,7 @@ function RadioListItem<TItem extends ListItem>({
     rightHandSideComponent,
     isMultilineSupported = false,
     isAlternateTextMultilineSupported = false,
+    alternateTextNumberOfLines = 2,
     onFocus,
     shouldSyncFocus,
 }: RadioListItemProps<TItem>) {
@@ -71,7 +72,7 @@ function RadioListItem<TItem extends ListItem>({
                                 isAlternateTextMultilineSupported ? styles.preWrap : styles.pre,
                                 isAlternateTextMultilineSupported ? {maxWidth: alternateTextMaxWidth} : null,
                             ]}
-                            numberOfLines={isAlternateTextMultilineSupported ? 2 : 1}
+                            numberOfLines={isAlternateTextMultilineSupported ? alternateTextNumberOfLines : 1}
                         />
                     )}
                 </View>

src/components/SelectionList/types.ts

@@ -62,6 +62,9 @@ type CommonListItemProps<TItem extends ListItem> = {
     /** Whether to wrap the alternate text up to 2 lines */
     isAlternateTextMultilineSupported?: boolean;
 
+    /** Number of lines to show for alternate text */
+    alternateTextNumberOfLines?: number;
+
     /** Handles what to do when the item is focused */
     onFocus?: () => void;
 
@@ -489,6 +492,9 @@ type BaseSelectionListProps<TItem extends ListItem> = Partial<ChildrenProps> & {
     /** Whether to wrap the alternate text up to 2 lines */
     isAlternateTextMultilineSupported?: boolean;
 
+    /** Number of lines to show for alternate text */
+    alternateTextNumberOfLines?: number;
+
     /** Ref for textInput */
     textInputRef?: MutableRefObject<TextInput | null> | ((ref: TextInput | null) => void);
 

src/languages/en.ts

@@ -2,7 +2,6 @@ import {CONST as COMMON_CONST, Str} from 'expensify-common';
 import {startCase} from 'lodash';
 import CONST from '@src/CONST';
 import type {Country} from '@src/CONST';
-import type {DelegateRole} from '@src/types/onyx/Account';
 import type {ConnectionName, PolicyConnectionSyncStage, SageIntacctMappingName} from '@src/types/onyx/Policy';
 import type {
     AccountOwnerParams,
@@ -4654,7 +4653,12 @@ export default {
     },
     delegate: {
         switchAccount: 'Switch accounts:',
-        role: (role: DelegateRole): string => {
+        copilotDelegatedAccess: 'Copilot: Delegated access',
+        copilotDelegatedAccessDescription: 'Allow other members to access your account.',
+        addCopilot: 'Add copilot',
+        membersCanAccessYourAccount: 'These members can access your account:',
+        youCanAccessTheseAccounts: 'You can access these accounts via the account switcher:',
+        role: (role?: string): string => {
             switch (role) {
                 case CONST.DELEGATE_ROLE.ALL:
                     return 'Full';
@@ -4665,6 +4669,21 @@ export default {
             }
         },
         genericError: 'Oops, something went wrong. Please try again.',
+        accessLevel: 'Access level',
+        confirmCopilot: 'Confirm your copilot below.',
+        accessLevelDescription: 'Choose an access level below. Both Full and Limited access allow copilots to view all conversations and expenses.',
+        roleDescription: (role?: string): string => {
+            switch (role) {
+                case CONST.DELEGATE_ROLE.ALL:
+                    return 'Allow another member to take all actions in your account, on your behalf. Includes chat, submissions, approvals, payments, settings updates, and more.';
+                case CONST.DELEGATE_ROLE.SUBMITTER:
+                    return 'Allow another member to take most actions in your account, on your behalf. Excludes approvals, payments, rejections, and holds.';
+                default:
+                    return '';
+            }
+        },
+        makeSureItIsYou: "Let's make sure it's you",
+        enterMagicCode: ({contactMethod}: EnterMagicCodeParams) => `Please enter the magic code sent to ${contactMethod} to add a copilot.`,
         notAllowed: 'Not so fast...',
         notAllowedMessageStart: ({accountOwnerEmail}: AccountOwnerParams) => `You don't have permission to take this action for ${accountOwnerEmail} as a`,
         notAllowedMessageHyperLinked: ' limited access',

src/languages/es.ts

@@ -1,6 +1,5 @@
 import {Str} from 'expensify-common';
 import CONST from '@src/CONST';
-import type {DelegateRole} from '@src/types/onyx/Account';
 import type {ConnectionName, PolicyConnectionSyncStage, SageIntacctMappingName} from '@src/types/onyx/Policy';
 import type {
     AccountOwnerParams,
@@ -5171,7 +5170,12 @@ export default {
     },
     delegate: {
         switchAccount: 'Cambiar de cuenta:',
-        role: (role: DelegateRole): string => {
+        copilotDelegatedAccess: 'Copilot: Acceso delegado',
+        copilotDelegatedAccessDescription: 'Permitir que otros miembros accedan a tu cuenta.',
+        addCopilot: 'Agregar copiloto',
+        membersCanAccessYourAccount: 'Estos miembros pueden acceder a tu cuenta:',
+        youCanAccessTheseAccounts: 'Puedes acceder a estas cuentas a través del conmutador de cuentas:',
+        role: (role?: string): string => {
             switch (role) {
                 case CONST.DELEGATE_ROLE.ALL:
                     return 'Completo';
@@ -5182,6 +5186,21 @@ export default {
             }
         },
         genericError: '¡Ups! Ha ocurrido un error. Por favor, inténtalo de nuevo.',
+        accessLevel: 'Nivel de acceso',
+        confirmCopilot: 'Confirma tu copiloto a continuación.',
+        accessLevelDescription: 'Elige un nivel de acceso a continuación. Tanto el acceso Completo como el Limitado permiten a los copilotos ver todas las conversaciones y gastos.',
+        roleDescription: (role?: string): string => {
+            switch (role) {
+                case CONST.DELEGATE_ROLE.ALL:
+                    return 'Permite a otro miembro realizar todas las acciones en tu cuenta, en tu nombre. Incluye chat, presentaciones, aprobaciones, pagos, actualizaciones de configuración y más.';
+                case CONST.DELEGATE_ROLE.SUBMITTER:
+                    return 'Permite a otro miembro realizar la mayoría de las acciones en tu cuenta, en tu nombre. Excluye aprobaciones, pagos, rechazos y retenciones.';
+                default:
+                    return '';
+            }
+        },
+        makeSureItIsYou: 'Vamos a asegurarnos de que eres tú',
+        enterMagicCode: ({contactMethod}: EnterMagicCodeParams) => `Por favor, introduce el código mágico enviado a ${contactMethod} para agregar un copiloto.`,
         notAllowed: 'No tan rápido...',
         notAllowedMessageStart: ({accountOwnerEmail}: AccountOwnerParams) => `No tienes permiso para realizar esta acción para ${accountOwnerEmail}`,
         notAllowedMessageHyperLinked: ' copiloto con acceso',

src/libs/API/parameters/AddDelegateParams.ts

@@ -0,0 +1,9 @@
+import type {DelegateRole} from '@src/types/onyx/Account';
+
+type AddDelegateParams = {
+    delegate: string;
+    role: DelegateRole;
+    validateCode: string;
+};
+
+export default AddDelegateParams;