Skip to content

Prevent Pay elsewhere fallback while bank account data is loading #85578

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
MelvinBot wants to merge 10 commits into
base: main
Choose a base branch
from
+488 −8
Open

Prevent Pay elsewhere fallback while bank account data is loading #85578

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
38a3167
Prevent Pay elsewhere fallback while bank account data is loading
MelvinBot Mar 17, 2026
0e336c9
Add comprehensive tests for useSearchBulkActions hook
MelvinBot Mar 17, 2026
821829c
Fix: correct spelling of 'unholded' to 'unheld' in test descriptions
MelvinBot Mar 17, 2026
01fa22d
Trim test suite to essential cases
MelvinBot Mar 17, 2026
6ab6532
Remove unnecessary 'as string' casts in test mock to fix typecheck
MelvinBot Mar 17, 2026
7187f77
Merge branch 'claude-fixPayElsewhereRaceCondition' of https://github.…
MelvinBot Mar 17, 2026
6e2ac0b
Fix: use CONST.SEARCH.VIEW.TABLE instead of non-existent LIST propert…
MelvinBot Mar 17, 2026
ad91b73
Trim test suite to 4 focused tests per reviewer request
MelvinBot Mar 18, 2026
487ef1e
Fix: Prettier formatting in useSearchBulkActions test
MelvinBot Mar 18, 2026
9751357
Add justification comment for eslint-disable directive
MelvinBot Mar 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions src/components/MoneyReportHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,6 +159,7 @@ import SCREENS from '@src/SCREENS';
import type * as OnyxTypes from '@src/types/onyx';
import type {PaymentMethodType} from '@src/types/onyx/OriginalMessage';
import type IconAsset from '@src/types/utils/IconAsset';
import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
import ActivityIndicator from './ActivityIndicator';
import AnimatedSubmitButton from './AnimatedSubmitButton';
import BrokenConnectionDescription from './BrokenConnectionDescription';
Expand Down Expand Up @@ -251,7 +252,7 @@ function MoneyReportHeader({
const [transactionThreadReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${transactionThreadReportID}`);
const [reportPDFFilename] = useOnyx(`${ONYXKEYS.COLLECTION.NVP_EXPENSIFY_REPORT_PDF_FILENAME}${moneyRequestReport?.reportID}`) ?? null;
const [session] = useOnyx(ONYXKEYS.SESSION);
const [bankAccountList] = useOnyx(ONYXKEYS.BANK_ACCOUNT_LIST);
const [bankAccountList, bankAccountListResult] = useOnyx(ONYXKEYS.BANK_ACCOUNT_LIST);
const [activePolicyID] = useOnyx(ONYXKEYS.NVP_ACTIVE_POLICY_ID);
const [amountOwed] = useOnyx(ONYXKEYS.NVP_PRIVATE_AMOUNT_OWED);

Expand Down Expand Up @@ -427,6 +428,7 @@ function MoneyReportHeader({
const [paymentType, setPaymentType] = useState<PaymentMethodType>();
const [requestType, setRequestType] = useState<ActionHandledType>();
const [selectedVBBAToPayFromHoldMenu, setSelectedVBBAToPayFromHoldMenu] = useState<number | undefined>(undefined);
const isLoadingBankAccountList = isLoadingOnyxValue(bankAccountListResult);
const canAllowSettlement = hasUpdatedTotal(moneyRequestReport, policy);
const policyType = policy?.type;
const connectedIntegration = getValidConnectedIntegration(policy);
Expand Down Expand Up @@ -1407,8 +1409,8 @@ function MoneyReportHeader({
shouldHidePaymentOptions={!shouldShowPayButton}
shouldShowApproveButton={shouldShowApproveButton}
shouldDisableApproveButton={shouldDisableApproveButton}
isDisabled={isOffline && !canAllowSettlement}
isLoading={!isOffline && !canAllowSettlement}
isDisabled={(isOffline && !canAllowSettlement) || isLoadingBankAccountList}
isLoading={(!isOffline && !canAllowSettlement) || isLoadingBankAccountList}
/>
),
[CONST.REPORT.PRIMARY_ACTIONS.EXPORT_TO_ACCOUNTING]: (
Expand Down
8 changes: 5 additions & 3 deletions ...omponents/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,7 @@ import ROUTES from '@src/ROUTES';
import {validTransactionDraftIDsSelector} from '@src/selectors/TransactionDraft';
import type {ReportAttributesDerivedValue, Transaction} from '@src/types/onyx';
import type {PaymentMethodType} from '@src/types/onyx/OriginalMessage';
import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
import AccessMoneyRequestReportPreviewPlaceHolder from './AccessMoneyRequestReportPreviewPlaceHolder';
import EmptyMoneyRequestReportPreview from './EmptyMoneyRequestReportPreview';
import type {MoneyRequestReportPreviewContentProps} from './types';
Expand Down Expand Up @@ -197,7 +198,7 @@ function MoneyRequestReportPreviewContent({
const [introSelected] = useOnyx(ONYXKEYS.NVP_INTRO_SELECTED);
const {isBetaEnabled} = usePermissions();
const [transactionViolations] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS);
const [bankAccountList] = useOnyx(ONYXKEYS.BANK_ACCOUNT_LIST);
const [bankAccountList, bankAccountListResult] = useOnyx(ONYXKEYS.BANK_ACCOUNT_LIST);
const isASAPSubmitBetaEnabled = isBetaEnabled(CONST.BETAS.ASAP_SUBMIT);
const [betas] = useOnyx(ONYXKEYS.BETAS);
const [isSelfTourViewed] = useOnyx(ONYXKEYS.NVP_ONBOARDING, {selector: hasSeenTourSelector});
Expand Down Expand Up @@ -240,6 +241,7 @@ function MoneyRequestReportPreviewContent({
const isInvoiceRoom = isInvoiceRoomReportUtils(chatReport);
const isTripRoom = isTripRoomReportUtils(chatReport);

const isLoadingBankAccountList = isLoadingOnyxValue(bankAccountListResult);
const canAllowSettlement = hasUpdatedTotal(iouReport, policy);
const numberOfRequests = transactions?.length ?? 0;
const transactionsWithReceipts = getTransactionsWithReceipts(iouReportID);
Expand Down Expand Up @@ -807,8 +809,8 @@ function MoneyRequestReportPreviewContent({
horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
}}
isDisabled={isOffline && !canAllowSettlement}
isLoading={!isOffline && !canAllowSettlement}
isDisabled={(isOffline && !canAllowSettlement) || isLoadingBankAccountList}
isLoading={(!isOffline && !canAllowSettlement) || isLoadingBankAccountList}
sentryLabel={CONST.SENTRY_LABEL.REPORT_PREVIEW.PAY_BUTTON}
/>
),
Expand Down
9 changes: 7 additions & 2 deletions src/hooks/useSearchBulkActions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@ import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
import ROUTES from '@src/ROUTES';
import type {BillingGraceEndPeriod, Report, SearchResults, Transaction, TransactionViolations} from '@src/types/onyx';
import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
import useAllTransactions from './useAllTransactions';
import useBulkPayOptions from './useBulkPayOptions';
import useConfirmModal from './useConfirmModal';
Expand Down Expand Up @@ -95,7 +96,7 @@ function useSearchBulkActions({queryJSON, deleteTransactionsOnSearch}: UseSearch
const selfDMReport = useSelfDMReport();
const [lastPaymentMethods] = useOnyx(ONYXKEYS.NVP_LAST_PAYMENT_METHOD);
const [personalPolicyID] = useOnyx(ONYXKEYS.PERSONAL_POLICY_ID);
const [bankAccountList] = useOnyx(ONYXKEYS.BANK_ACCOUNT_LIST);
const [bankAccountList, bankAccountListResult] = useOnyx(ONYXKEYS.BANK_ACCOUNT_LIST);
const [policies] = useOnyx(ONYXKEYS.COLLECTION.POLICY);
const [integrationsExportTemplates] = useOnyx(ONYXKEYS.NVP_INTEGRATION_SERVER_EXPORT_TEMPLATES);
const [csvExportLayouts] = useOnyx(ONYXKEYS.NVP_CSV_EXPORT_LAYOUTS);
Expand Down Expand Up @@ -182,7 +183,11 @@ function useSearchBulkActions({queryJSON, deleteTransactionsOnSearch}: UseSearch
const selectedBulkCurrency = selectedReports.at(0)?.currency ?? Object.values(selectedTransactions).at(0)?.currency;
const totalFormattedAmount = getTotalFormattedAmount(selectedReports, selectedTransactions, selectedBulkCurrency);

const isLoadingBankAccountList = isLoadingOnyxValue(bankAccountListResult);
const onlyShowPayElsewhere = useMemo(() => {
if (isLoadingBankAccountList) {
return false;
}
Comment on lines +186 to +190
Copy link
Contributor

@arosiclair arosiclair Mar 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This race condition seems valid, but are we sure this is the root problem? I think it would only take a few milliseconds for Onyx to load values. How would a user open the page and click the Pay button so quickly?

const firstPolicyID = selectedPolicyIDs.at(0);
const selectedPolicy = firstPolicyID ? currentSearchResults?.data?.[`${ONYXKEYS.COLLECTION.POLICY}${firstPolicyID}`] : undefined;
return (selectedTransactionReportIDs ?? selectedReportIDs).some((reportID) => {
Expand All @@ -197,7 +202,7 @@ function useSearchBulkActions({queryJSON, deleteTransactionsOnSearch}: UseSearch
canIOUBePaid(report, chatReport, selectedPolicy, bankAccountList, undefined, true, undefined, invoiceReceiverPolicy)
);
});
}, [currentSearchResults?.data, selectedPolicyIDs, selectedReportIDs, selectedTransactionReportIDs, bankAccountList]);
}, [currentSearchResults?.data, selectedPolicyIDs, selectedReportIDs, selectedTransactionReportIDs, bankAccountList, isLoadingBankAccountList]);

const {bulkPayButtonOptions, businessBankAccountOptions, shouldShowBusinessBankAccountOptions} = useBulkPayOptions({
selectedPolicyID: selectedPolicyIDs.at(0),
Expand Down
Loading
Loading