Allow inviting new users in the Add approval workflow flow

src/CONST/index.ts

@@ -202,6 +202,7 @@ const CONST = {
     CUSTOM_FIELD_KEYS: {customField1: 'employeeUserID', customField2: 'employeePayrollID'},
     ANDROID_PACKAGE_NAME,
     WORKSPACE_ENABLE_FEATURE_REDIRECT_DELAY: 100,
+    WORKSPACE_WORKFLOWS_APPROVALS_EXPENSES_FROM_ROUTE: 'expenses-from',
     ANIMATED_HIGHLIGHT_ENTRY_DELAY: 50,
     ANIMATED_HIGHLIGHT_ENTRY_DURATION: 300,
     ANIMATED_HIGHLIGHT_START_DELAY: 10,

src/ROUTES.ts

@@ -6,7 +6,7 @@
 import type {TupleToUnion, ValueOf} from 'type-fest';
 import type {UpperCaseCharacters} from 'type-fest/source/internal';
 import type {SearchFilterKey, SearchQueryString, UserFriendlyKey} from './components/Search/types';
-import type CONST from './CONST';
+import CONST from './CONST';
 import type {IOUAction, IOUType} from './CONST';
 import type {ReplacementReason} from './libs/actions/Card';
 import type {IOURequestType} from './libs/actions/IOU';
@@ -1733,10 +1733,11 @@ const ROUTES = {
         getRoute: (policyID: string, firstApproverEmail: string) => `workspaces/${policyID}/workflows/approvals/${encodeURIComponent(firstApproverEmail)}/edit` as const,
     },
     WORKSPACE_WORKFLOWS_APPROVALS_EXPENSES_FROM: {
-        route: 'workspaces/:policyID/workflows/approvals/expenses-from',
+        route: `workspaces/:policyID/workflows/approvals/${CONST.WORKSPACE_WORKFLOWS_APPROVALS_EXPENSES_FROM_ROUTE}`,
 
-        // eslint-disable-next-line no-restricted-syntax -- Legacy route generation
-        getRoute: (policyID: string, backTo?: string) => getUrlWithBackToParam(`workspaces/${policyID}/workflows/approvals/expenses-from` as const, backTo),
+        getRoute: (policyID: string, backTo?: string) =>
+            // eslint-disable-next-line no-restricted-syntax -- Legacy route generation
+            getUrlWithBackToParam(`workspaces/${policyID}/workflows/approvals/${CONST.WORKSPACE_WORKFLOWS_APPROVALS_EXPENSES_FROM_ROUTE}` as const, backTo),
     },
     WORKSPACE_WORKFLOWS_APPROVALS_APPROVER: {
         route: 'workspaces/:policyID/workflows/approvals/approver',

src/components/ApproverSelectionList.tsx

@@ -1,4 +1,4 @@
-import React, {useMemo} from 'react';
+import React, {useCallback, useMemo} from 'react';
 import useDebouncedState from '@hooks/useDebouncedState';
 import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
@@ -40,6 +40,7 @@ type ApproverSelectionListPageProps = {
     onSelectApprover?: (approvers: SelectionListApprover[]) => void;
     shouldShowLoadingPlaceholder?: boolean;
     shouldEnableHeaderMaxHeight?: boolean;
+    onSearchChange?: (searchTerm: string) => void;
     shouldUpdateFocusedIndex?: boolean;
 };
 
@@ -66,6 +67,7 @@ function ApproverSelectionList({
     onSelectApprover,
     shouldShowLoadingPlaceholder,
     shouldEnableHeaderMaxHeight,
+    onSearchChange,
     shouldUpdateFocusedIndex = true,
 }: ApproverSelectionListPageProps) {
     const styles = useThemeStyles();
@@ -75,6 +77,16 @@ function ApproverSelectionList({
     const shouldShowTextInput = shouldShowTextInputProp ?? allApprovers?.length >= CONST.STANDARD_LIST_ITEM_LIMIT;
     const lazyIllustrations = useMemoizedLazyIllustrations(['TurtleInShell']);
 
+    const handleSearchChange = useCallback(
+        (term: string) => {
+            setSearchTerm(term);
+            if (onSearchChange) {
+                onSearchChange(term);
+            }
+        },
+        [onSearchChange, setSearchTerm],
+    );
+
     const selectedMembers = useMemo(() => allApprovers.filter((approver) => approver.isSelected), [allApprovers]);
 
     // eslint-disable-next-line rulesdir/no-negated-variables
@@ -126,10 +138,10 @@ function ApproverSelectionList({
         () => ({
             label: shouldShowListEmptyContent ? undefined : translate('selectionList.findMember'),
             value: searchTerm,
-            onChangeText: setSearchTerm,
+            onChangeText: handleSearchChange,
             headerMessage: searchTerm && !data?.length ? translate('common.noResultsFound') : '',
         }),
-        [shouldShowListEmptyContent, translate, searchTerm, setSearchTerm, data?.length],
+        [shouldShowListEmptyContent, translate, searchTerm, handleSearchChange, data?.length],
     );
 
     return (
@@ -153,9 +165,9 @@ function ApproverSelectionList({
                 {subtitle}
                 <SelectionList
                     data={data}
-                    onSelectRow={toggleApprover}
                     ListItem={InviteMemberListItem}
                     textInputOptions={textInputOptions}
+                    onSelectRow={toggleApprover}
                     canSelectMultiple={allowMultipleSelection}
                     shouldPreventDefaultFocusOnSelectRow={!canUseTouchScreen()}
                     listEmptyContent={listEmptyContent}

src/libs/PolicyUtils.ts

@@ -60,7 +60,7 @@
 
 let allPolicies: OnyxCollection<Policy>;
 
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.POLICY,
     waitForCollectionCallback: true,
     callback: (value) => (allPolicies = value),
@@ -504,6 +504,18 @@
     return memberEmailsToExclude;
 }
 
+/**
+ * Get excluded users as a Record for use in search selector
+ */
+function getExcludedUsers(employeeList?: PolicyEmployeeList): Record<string, boolean> {
+    const ineligibleInvitees = getIneligibleInvitees(employeeList);
+    const result: Record<string, boolean> = {};
+    for (const login of ineligibleInvitees) {
+        result[login] = true;
+    }
+    return result;
+}
+
 function getSortedTagKeys(policyTagList: OnyxEntry<PolicyTagLists>): Array<keyof PolicyTagLists> {
     if (isEmptyObject(policyTagList)) {
         return [];
@@ -1697,6 +1709,7 @@
     getValidConnectedIntegration,
     getCountOfEnabledTagsOfList,
     getIneligibleInvitees,
+    getExcludedUsers,
     getMemberAccountIDsForWorkspace,
     getNumericValue,
     isMultiLevelTags,

src/pages/workspace/members/WorkspaceInviteMessageComponent.tsx

@@ -66,6 +66,30 @@ function WorkspaceInviteMessageComponent({
 }: WorkspaceInviteMessageComponentProps) {
     const styles = useThemeStyles();
     const {translate, formatPhoneNumber} = useLocalize();
+    const policyName = policy?.name;
+
+    const isWorkflowApprovalExpensesFromRoute = useMemo(() => {
+        if (!backTo || typeof backTo !== 'string') {
+            return false;
+        }
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+        return (backTo as string).includes(CONST.WORKSPACE_WORKFLOWS_APPROVALS_EXPENSES_FROM_ROUTE);
+    }, [backTo]);
+
+    const headerTitle = useMemo(() => {
+        if (isWorkflowApprovalExpensesFromRoute) {
+            return translate('workflowsExpensesFromPage.title');
+        }
+        return translate('workspace.inviteMessage.confirmDetails');
+    }, [isWorkflowApprovalExpensesFromRoute, translate]);
+
+    const subtitle = useMemo(() => {
+        if (isWorkflowApprovalExpensesFromRoute) {
+            return undefined;
+        }
+        return policyName;
+    }, [isWorkflowApprovalExpensesFromRoute, policyName]);
+
     const [formData, formDataResult] = useOnyx(ONYXKEYS.FORMS.WORKSPACE_INVITE_MESSAGE_FORM_DRAFT, {canBeMissing: true});
     const [allPersonalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {canBeMissing: false});
 
@@ -82,22 +106,25 @@ function WorkspaceInviteMessageComponent({
     });
     const [workspaceInviteRoleDraft = CONST.POLICY.ROLE.USER] = useOnyx(`${ONYXKEYS.COLLECTION.WORKSPACE_INVITE_ROLE_DRAFT}${policyID}`, {canBeMissing: true});
     const isOnyxLoading = isLoadingOnyxValue(workspaceInviteMessageDraftResult, invitedEmailsToAccountIDsDraftResult, formDataResult);
-    const personalDetailsOfInvitedEmails = getPersonalDetailsForAccountIDs(Object.values(invitedEmailsToAccountIDsDraft ?? {}), allPersonalDetails ?? {});
-    const memberNames = Object.values(personalDetailsOfInvitedEmails)
-        .map((personalDetail) => {
-            const displayName = getDisplayNameOrDefault(personalDetail, '', false);
-            if (displayName) {
-                return displayName;
-            }
 
-            // We don't have login details for users who are not in the database yet
-            // So we need to fallback to their login from the invitedEmailsToAccountIDsDraft
-            const accountID = personalDetail.accountID;
-            const loginFromInviteMap = Object.entries(invitedEmailsToAccountIDsDraft ?? {}).find(([, id]) => id === accountID)?.[0];
+    const memberNames = useMemo(() => {
+        const personalDetailsOfInvitedEmails = getPersonalDetailsForAccountIDs(Object.values(invitedEmailsToAccountIDsDraft ?? {}), allPersonalDetails ?? {});
+        return Object.values(personalDetailsOfInvitedEmails)
+            .map((personalDetail) => {
+                const displayName = getDisplayNameOrDefault(personalDetail, '', false);
+                if (displayName) {
+                    return displayName;
+                }
+
+                // We don't have login details for users who are not in the database yet
+                // So we need to fallback to their login from the invitedEmailsToAccountIDsDraft
+                const accountID = personalDetail.accountID;
+                const loginFromInviteMap = Object.entries(invitedEmailsToAccountIDsDraft ?? {}).find(([, id]) => id === accountID)?.[0];
 
-            return loginFromInviteMap;
-        })
-        .join(', ');
+                return loginFromInviteMap;
+            })
+            .join(', ');
+    }, [invitedEmailsToAccountIDsDraft, allPersonalDetails]);
 
     const welcomeNoteSubject = useMemo(
         () => `# ${currentUserPersonalDetails?.displayName ?? ''} invited you to ${policy?.name ?? 'a workspace'}`,
@@ -147,6 +174,21 @@ function WorkspaceInviteMessageComponent({
             return;
         }
 
+        // If backTo is provided and it's the expenses-from route, navigate to approver screen
+        if (isWorkflowApprovalExpensesFromRoute) {
+            // Check if it's initial creation flow (backTo doesn't have a nested backTo param)
+            const backToStr = typeof backTo === 'string' ? backTo : '';
+            const isInitialCreationFlow = !backToStr.includes('/expenses-from/');
+            if (isInitialCreationFlow) {
+                // Navigate to approver screen for initial creation flow
+                Navigation.navigate(ROUTES.WORKSPACE_WORKFLOWS_APPROVALS_APPROVER.getRoute(policyID, 0));
+            } else {
+                // For edit flow, just go back
+                Navigation.goBack();
+            }
+            return;
+        }
+
         if ((backTo as string)?.endsWith('members')) {
             Navigation.setNavigationActionToMicrotaskQueue(() => Navigation.dismissModal());
             return;
@@ -176,7 +218,6 @@ function WorkspaceInviteMessageComponent({
         return errorFields;
     };
 
-    const policyName = policy?.name;
     const invitingMemberEmail = Object.keys(invitedEmailsToAccountIDsDraft ?? {}).at(0) ?? '';
     const invitingMemberDetails = getPersonalDetailByEmail(invitingMemberEmail);
     const invitingMemberName = Str.removeSMSDomain(invitingMemberDetails?.displayName ?? '');
@@ -201,8 +242,8 @@ function WorkspaceInviteMessageComponent({
             >
                 {shouldShowBackButton && (
                     <HeaderWithBackButton
-                        title={translate('workspace.inviteMessage.confirmDetails')}
-                        subtitle={policyName}
+                        title={headerTitle}
+                        subtitle={subtitle}
                         shouldShowBackButton
                         onCloseButtonPress={() => Navigation.dismissModal()}
                         onBackButtonPress={() => Navigation.goBack(backTo)}
@@ -218,7 +259,9 @@ function WorkspaceInviteMessageComponent({
                     shouldHideFixErrorsAlert
                     addBottomSafeAreaPadding
                 >
-                    {isInviteNewMemberStep && <Text style={[styles.textHeadlineLineHeightXXL, styles.mv3]}>{translate('workspace.card.issueNewCard.inviteNewMember')}</Text>}
+                    {(isInviteNewMemberStep || isWorkflowApprovalExpensesFromRoute) && (
+                        <Text style={[styles.textHeadlineLineHeightXXL, styles.mv3]}>{translate('workspace.card.issueNewCard.inviteNewMember')}</Text>
+                    )}
                     <View style={[styles.mv4, styles.justifyContentCenter, styles.alignItemsCenter]}>
                         <ReportActionAvatars
                             size={CONST.AVATAR_SIZE.LARGE}