[Standardize pay button] Expense bulk pay

src/components/ButtonWithDropdownMenu/index.tsx

@@ -177,7 +177,7 @@ function ButtonWithDropdownMenu<IValueType>({ref, ...props}: ButtonWithDropdownM
                         innerStyles={[innerStyleDropButton, !isSplitButton && styles.dropDownButtonCartIconView, isTextTooLong && shouldUseShortForm && {...styles.pl2, ...styles.pr1}]}
                         enterKeyEventListenerPriority={enterKeyEventListenerPriority}
                         iconRight={Expensicons.DownArrow}
-                        shouldShowRightIcon={!isSplitButton && !isLoading}
+                        shouldShowRightIcon={!isSplitButton && !isLoading && options?.length > 0}
                         isSplitButton={isSplitButton}
                         testID={testID}
                         textStyles={[isTextTooLong && shouldUseShortForm ? {...styles.textExtraSmall, ...styles.textBold} : {}]}

src/components/Search/SearchPageHeader/SearchFiltersBar.tsx

@@ -1,5 +1,5 @@
 import {emailSelector} from '@selectors/Session';
-import React, {useCallback, useEffect, useMemo, useRef} from 'react';
+import React, {useCallback, useContext, useEffect, useMemo, useRef} from 'react';
 import type {ReactNode} from 'react';
 import {View} from 'react-native';
 // eslint-disable-next-line no-restricted-imports
@@ -8,6 +8,9 @@ import Button from '@components/Button';
 import ButtonWithDropdownMenu from '@components/ButtonWithDropdownMenu';
 import type {DropdownOption} from '@components/ButtonWithDropdownMenu/types';
 import * as Expensicons from '@components/Icon/Expensicons';
+import KYCWall from '@components/KYCWall';
+import type {PaymentMethodType} from '@components/KYCWall/types';
+import {LockedAccountContext} from '@components/LockedAccountModalProvider';
 import {usePersonalDetails} from '@components/OnyxListItemProvider';
 import ScrollView from '@components/ScrollView';
 import DateSelectPopup from '@components/Search/FilterDropdowns/DateSelectPopup';
@@ -19,21 +22,24 @@ import SingleSelectPopup from '@components/Search/FilterDropdowns/SingleSelectPo
 import UserSelectPopup from '@components/Search/FilterDropdowns/UserSelectPopup';
 import {useSearchContext} from '@components/Search/SearchContext';
 import type {SearchDateValues} from '@components/Search/SearchDatePresetFilterBase';
-import type {SearchDateFilterKeys, SearchQueryJSON, SingularSearchStatus} from '@components/Search/types';
+import type {BankAccountMenuItem, SearchDateFilterKeys, SearchQueryJSON, SingularSearchStatus} from '@components/Search/types';
 import SearchFiltersSkeleton from '@components/Skeletons/SearchFiltersSkeleton';
 import useAdvancedSearchFilters from '@hooks/useAdvancedSearchFilters';
+import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useOnyx from '@hooks/useOnyx';
+import usePolicy from '@hooks/usePolicy';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {close} from '@libs/actions/Modal';
-import {updateAdvancedFilters} from '@libs/actions/Search';
+import {handleBulkPayItemSelected, updateAdvancedFilters} from '@libs/actions/Search';
 import {mergeCardListWithWorkspaceFeeds} from '@libs/CardUtils';
 import DateUtils from '@libs/DateUtils';
 import Navigation from '@libs/Navigation/Navigation';
-import {getAllTaxRates, isPaidGroupPolicy} from '@libs/PolicyUtils';
+import {getActiveAdminWorkspaces, getAllTaxRates, isPaidGroupPolicy} from '@libs/PolicyUtils';
+import {isExpenseReport} from '@libs/ReportUtils';
 import {
     buildFilterFormValuesFromQuery,
     buildQueryStringFromFilterFormValues,
@@ -65,14 +71,27 @@ type SearchFiltersBarProps = {
     queryJSON: SearchQueryJSON;
     headerButtonsOptions: Array<DropdownOption<SearchHeaderOptionValue>>;
     isMobileSelectionModeEnabled: boolean;
+    currentSelectedPolicyID?: string | undefined;
+    currentSelectedReportID?: string | undefined;
+    confirmPayment?: (paymentType: PaymentMethodType | undefined) => void;
+    latestBankItems?: BankAccountMenuItem[] | undefined;
 };
 
-function SearchFiltersBar({queryJSON, headerButtonsOptions, isMobileSelectionModeEnabled}: SearchFiltersBarProps) {
+function SearchFiltersBar({
+    queryJSON,
+    headerButtonsOptions,
+    isMobileSelectionModeEnabled,
+    currentSelectedPolicyID,
+    currentSelectedReportID,
+    confirmPayment,
+    latestBankItems,
+}: SearchFiltersBarProps) {
     const scrollRef = useRef<RNScrollView>(null);
-
+    const currentPolicy = usePolicy(currentSelectedPolicyID);
+    const [isUserValidated] = useOnyx(ONYXKEYS.ACCOUNT, {selector: (account) => account?.validated, canBeMissing: true});
     // type, groupBy and status values are not guaranteed to respect the ts type as they come from user input
     const {hash, type: unsafeType, groupBy: unsafeGroupBy, status: unsafeStatus, flatFilters} = queryJSON;
-
+    const isCurrentSelectedExpenseReport = isExpenseReport(currentSelectedReportID);
     const theme = useTheme();
     const styles = useThemeStyles();
     const {translate} = useLocalize();
@@ -92,7 +111,7 @@ function SearchFiltersBar({queryJSON, headerButtonsOptions, isMobileSelectionMod
     const [workspaceCardFeeds] = useOnyx(ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST, {canBeMissing: true});
     const [allFeeds] = useOnyx(ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER, {canBeMissing: true});
     const [searchResultsErrors] = useOnyx(`${ONYXKEYS.COLLECTION.SNAPSHOT}${hash}`, {canBeMissing: true, selector: (data) => data?.errors});
-
+    const {isAccountLocked, showLockedAccountModal} = useContext(LockedAccountContext);
     const taxRates = getAllTaxRates();
     const allCards = useMemo(() => mergeCardListWithWorkspaceFeeds(workspaceCardFeeds ?? CONST.EMPTY_OBJECT, userCardList), [userCardList, workspaceCardFeeds]);
     const selectedTransactionsKeys = useMemo(() => Object.keys(selectedTransactions ?? {}), [selectedTransactions]);
@@ -217,6 +236,8 @@ function SearchFiltersBar({queryJSON, headerButtonsOptions, isMobileSelectionMod
         const value = options.find((option) => option.value === filterFormValues.withdrawalType) ?? null;
         return [options, value];
     }, [translate, filterFormValues.withdrawalType]);
+    const {accountID} = useCurrentUserPersonalDetails();
+    const activeAdminPolicies = getActiveAdminWorkspaces(allPolicies, accountID.toString()).sort((a, b) => (a.name || '').localeCompare(b.name || ''));
 
     const updateFilterForm = useCallback(
         (values: Partial<SearchAdvancedFiltersForm>) => {
@@ -437,7 +458,7 @@ function SearchFiltersBar({queryJSON, headerButtonsOptions, isMobileSelectionMod
      * filter bar
      */
     const filters = useMemo<FilterItem[]>(() => {
-        const fromValue = filterFormValues.from?.map((accountID) => personalDetails?.[accountID]?.displayName ?? accountID) ?? [];
+        const fromValue = filterFormValues.from?.map((currentAccountID) => personalDetails?.[currentAccountID]?.displayName ?? currentAccountID) ?? [];
 
         const shouldDisplayGroupByFilter = !!groupBy?.value && groupBy?.value !== CONST.SEARCH.GROUP_BY.REPORTS;
         const shouldDisplayGroupCurrencyFilter = shouldDisplayGroupByFilter && hasMultipleOutputCurrency;
@@ -627,30 +648,55 @@ function SearchFiltersBar({queryJSON, headerButtonsOptions, isMobileSelectionMod
     return (
         <View style={[shouldShowSelectedDropdown && styles.ph5, styles.mb2, styles.searchFiltersBarContainer]}>
             {shouldShowSelectedDropdown ? (
-                <View style={[styles.flexRow, styles.gap3]}>
-                    <ButtonWithDropdownMenu
-                        onPress={() => null}
-                        shouldAlwaysShowDropdownMenu
-                        buttonSize={CONST.DROPDOWN_BUTTON_SIZE.SMALL}
-                        customText={selectionButtonText}
-                        options={headerButtonsOptions}
-                        isSplitButton={false}
-                        anchorAlignment={{
-                            horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
-                            vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP,
-                        }}
-                    />
-                    {!areAllMatchingItemsSelected && showSelectAllMatchingItems && (
-                        <Button
-                            link
-                            small
-                            shouldUseDefaultHover={false}
-                            innerStyles={styles.p0}
-                            onPress={() => selectAllMatchingItems(true)}
-                            text={translate('search.exportAll.selectAllMatchingItems')}
-                        />
+                <KYCWall
+                    chatReportID={currentSelectedReportID}
+                    enablePaymentsRoute={ROUTES.ENABLE_PAYMENTS}
+                    addBankAccountRoute={
+                        isCurrentSelectedExpenseReport ? ROUTES.BANK_ACCOUNT_WITH_STEP_TO_OPEN.getRoute(currentSelectedPolicyID, undefined, Navigation.getActiveRoute()) : undefined
+                    }
+                    onSuccessfulKYC={(paymentType) => confirmPayment?.(paymentType)}
+                >
+                    {(triggerKYCFlow, buttonRef) => (
+                        <View style={[styles.flexRow, styles.gap3]}>
+                            <ButtonWithDropdownMenu
+                                onPress={() => null}
+                                shouldAlwaysShowDropdownMenu
+                                buttonSize={CONST.DROPDOWN_BUTTON_SIZE.SMALL}
+                                customText={selectionButtonText}
+                                options={headerButtonsOptions}
+                                onSubItemSelected={(subItem) =>
+                                    handleBulkPayItemSelected(
+                                        subItem,
+                                        triggerKYCFlow,
+                                        isAccountLocked,
+                                        showLockedAccountModal,
+                                        currentPolicy,
+                                        latestBankItems,
+                                        activeAdminPolicies,
+                                        isUserValidated,
+                                        confirmPayment,
+                                    )
+                                }
+                                isSplitButton={false}
+                                buttonRef={buttonRef}
+                                anchorAlignment={{
+                                    horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
+                                    vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP,
+                                }}
+                            />
+                            {!areAllMatchingItemsSelected && showSelectAllMatchingItems && (
+                                <Button
+                                    link
+                                    small
+                                    shouldUseDefaultHover={false}
+                                    innerStyles={styles.p0}
+                                    onPress={() => selectAllMatchingItems(true)}
+                                    text={translate('search.exportAll.selectAllMatchingItems')}
+                                />
+                            )}
+                        </View>
                     )}
-                </View>
+                </KYCWall>
             ) : (
                 <ScrollView
                     horizontal

src/components/Search/SearchPageHeader/SearchPageHeader.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import type {DropdownOption} from '@components/ButtonWithDropdownMenu/types';
+import type {PaymentMethodType} from '@components/KYCWall/types';
 import {useSearchContext} from '@components/Search/SearchContext';
-import type {SearchQueryJSON} from '@components/Search/types';
+import type {BankAccountMenuItem, SearchQueryJSON} from '@components/Search/types';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import SearchSelectedNarrow from '@pages/Search/SearchSelectedNarrow';
 import type CONST from '@src/CONST';
@@ -16,6 +17,10 @@ type SearchPageHeaderProps = {
     headerButtonsOptions: Array<DropdownOption<SearchHeaderOptionValue>>;
     handleSearch: (value: string) => void;
     isMobileSelectionModeEnabled: boolean;
+    currentSelectedPolicyID?: string | undefined;
+    currentSelectedReportID?: string | undefined;
+    confirmPayment?: (paymentType: PaymentMethodType | undefined) => void;
+    latestBankItems?: BankAccountMenuItem[] | undefined;
 };
 
 type SearchHeaderOptionValue = DeepValueOf<typeof CONST.SEARCH.BULK_ACTION_TYPES> | undefined;
@@ -28,6 +33,10 @@ function SearchPageHeader({
     headerButtonsOptions,
     handleSearch,
     isMobileSelectionModeEnabled,
+    currentSelectedPolicyID,
+    currentSelectedReportID,
+    confirmPayment,
+    latestBankItems,
 }: SearchPageHeaderProps) {
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const {selectedTransactions} = useSearchContext();
@@ -39,6 +48,10 @@ function SearchPageHeader({
             <SearchSelectedNarrow
                 options={headerButtonsOptions}
                 itemsLength={selectedTransactionsKeys.length}
+                currentSelectedPolicyID={currentSelectedPolicyID}
+                currentSelectedReportID={currentSelectedReportID}
+                confirmPayment={confirmPayment}
+                latestBankItems={latestBankItems}
             />
         );
     }

src/components/Search/types.ts

@@ -1,8 +1,10 @@
 import type {ValueOf} from 'type-fest';
+import type {PaymentMethod} from '@components/KYCWall/types';
 import type {ReportActionListItemType, TaskListItemType, TransactionGroupListItemType, TransactionListItemType} from '@components/SelectionList/types';
 import type {SearchKey} from '@libs/SearchUIUtils';
 import type CONST from '@src/CONST';
 import type {SearchDataTypes} from '@src/types/onyx/SearchResults';
+import type IconAsset from '@src/types/utils/IconAsset';
 
 /** Model of the selected transaction */
 type SelectedTransactionInfo = {
@@ -206,6 +208,14 @@ type SearchParams = {
     shouldCalculateTotals: boolean;
 };
 
+type BankAccountMenuItem = {
+    text: string;
+    description: string;
+    icon: IconAsset;
+    methodID: number | undefined;
+    value: PaymentMethod;
+};
+
 export type {
     SelectedTransactionInfo,
     SelectedTransactions,
@@ -240,5 +250,7 @@ export type {
     SearchAction,
     SearchCurrencyFilterKeys,
     UserFriendlyValue,
+    SelectedReports,
     SearchTextFilterKeys,
+    BankAccountMenuItem,
 };

src/components/SettlementButton/index.tsx

@@ -19,7 +19,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import {isCurrencySupportedForDirectReimbursement} from '@libs/actions/Policy/Policy';
 import {getLastPolicyBankAccountID, getLastPolicyPaymentMethod} from '@libs/actions/Search';
 import Navigation from '@libs/Navigation/Navigation';
-import {formatPaymentMethods} from '@libs/PaymentUtils';
+import {formatPaymentMethods, getActivePaymentType} from '@libs/PaymentUtils';
 import {getActiveAdminWorkspaces, getPolicyEmployeeAccountIDs} from '@libs/PolicyUtils';
 import {hasRequestFromCurrentAccount} from '@libs/ReportActionsUtils';
 import {
@@ -352,15 +352,9 @@ function SettlementButton({
         onlyShowPayElsewhere,
         latestBankItem,
         activeAdminPolicies,
-        latestBankItem,
     ]);
 
     const selectPaymentType = (event: KYCFlowEvent, iouPaymentType: PaymentMethodType) => {
-        if (policy && shouldRestrictUserBillableActions(policy.id)) {
-            Navigation.navigate(ROUTES.RESTRICTED_ACTION.getRoute(policy.id));
-            return;
-        }
-
         if (iouPaymentType === CONST.IOU.REPORT_ACTION_TYPE.APPROVE) {
             if (confirmApproval) {
                 confirmApproval();
@@ -373,29 +367,8 @@ function SettlementButton({
         onPress(iouPaymentType, false);
     };
 
-    const selectPaymentMethod = (event: KYCFlowEvent, triggerKYCFlow: TriggerKYCFlow, paymentMethod?: PaymentMethod, selectedPolicy?: Policy) => {
-        if (!isUserValidated) {
-            Navigation.navigate(ROUTES.SETTINGS_CONTACT_METHOD_VERIFY_ACCOUNT.getRoute(Navigation.getActiveRoute()));
-            return;
-        }
-
-        if (policy && shouldRestrictUserBillableActions(policy.id)) {
-            Navigation.navigate(ROUTES.RESTRICTED_ACTION.getRoute(policy.id));
-            return;
-        }
-
-        let paymentType;
-        switch (paymentMethod) {
-            case CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT:
-                paymentType = CONST.IOU.PAYMENT_TYPE.EXPENSIFY;
-                break;
-            case CONST.PAYMENT_METHODS.BUSINESS_BANK_ACCOUNT:
-                paymentType = CONST.IOU.PAYMENT_TYPE.VBBA;
-                break;
-            default:
-                paymentType = CONST.IOU.PAYMENT_TYPE.ELSEWHERE;
-        }
-        triggerKYCFlow(event, paymentType, paymentMethod, selectedPolicy ?? (event ? lastPaymentPolicy : undefined));
+    const selectPaymentMethod = (event: KYCFlowEvent, paymentType: string, triggerKYCFlow: TriggerKYCFlow, paymentMethod?: PaymentMethod, selectedPolicy?: Policy) => {
+        triggerKYCFlow(event, paymentType as PaymentMethodType, paymentMethod, selectedPolicy ?? (event ? lastPaymentPolicy : undefined));
         if (paymentType === CONST.IOU.PAYMENT_TYPE.EXPENSIFY || paymentType === CONST.IOU.PAYMENT_TYPE.VBBA) {
             setPersonalBankAccountContinueKYCOnSuccess(ROUTES.ENABLE_PAYMENTS);
         }
@@ -466,12 +439,20 @@ function SettlementButton({
             return;
         }
 
-        const isPaymentMethod = Object.values(CONST.PAYMENT_METHODS).includes(selectedOption as PaymentMethod);
-        const shouldSelectPaymentMethod = (isPaymentMethod ?? lastPaymentPolicy ?? !isEmpty(latestBankItem)) && !shouldShowApproveButton && !shouldHidePaymentOptions;
-        const selectedPolicy = activeAdminPolicies.find((activePolicy) => activePolicy.id === selectedOption);
+        if (!isUserValidated) {
+            Navigation.navigate(ROUTES.SETTINGS_CONTACT_METHOD_VERIFY_ACCOUNT.getRoute(Navigation.getActiveRoute()));
+            return;
+        }
+
+        if (policy && shouldRestrictUserBillableActions(policy.id)) {
+            Navigation.navigate(ROUTES.RESTRICTED_ACTION.getRoute(policy.id));
+            return;
+        }
+
+        const {paymentType, selectedPolicy, shouldSelectPaymentMethod} = getActivePaymentType(selectedOption, activeAdminPolicies, latestBankItem);
 
         if (!!selectedPolicy || shouldSelectPaymentMethod) {
-            selectPaymentMethod(event, triggerKYCFlow, selectedOption as PaymentMethod, selectedPolicy);
+            selectPaymentMethod(event, paymentType, triggerKYCFlow, selectedOption as PaymentMethod, selectedPolicy);
             return;
         }