Skip to content

[CP Staging] Fix pay report on Spend #93308

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

Merged
Julesssss merged 3 commits into from
Jun 11, 2026
Merged

[CP Staging] Fix pay report on Spend #93308

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b00b277
fix bug
luacmartins Jun 11, 2026
ad699c5
fix prettier
luacmartins Jun 11, 2026
cd33034
add fallback report
luacmartins Jun 11, 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
6 changes: 4 additions & 2 deletions src/components/Search/SearchList/ListItem/ActionCell/PayActionCell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React from 'react';
import type {OnyxEntry} from 'react-native-onyx';
import {useDelegateNoAccessActions, useDelegateNoAccessState} from '@components/DelegateNoAccessModalProvider';
import {SearchScopeProvider} from '@components/Search/SearchScopeProvider';
import SettlementButton from '@components/SettlementButton';
Expand All @@ -17,6 +18,7 @@ import {isInvoiceReport} from '@libs/ReportUtils';
import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
import ROUTES from '@src/ROUTES';
import type {Report} from '@src/types/onyx';

type PayActionCellProps = {
isLoading: boolean;
Expand All @@ -26,9 +28,10 @@ type PayActionCellProps = {
amount?: number;
extraSmall: boolean;
shouldDisablePointerEvents?: boolean;
chatReport: OnyxEntry<Report>;
};

function PayActionCell({isLoading, policyID, reportID, hash, amount, extraSmall, shouldDisablePointerEvents}: PayActionCellProps) {
function PayActionCell({isLoading, policyID, reportID, hash, amount, extraSmall, shouldDisablePointerEvents, chatReport}: PayActionCellProps) {
const styles = useThemeStyles();
const {convertToDisplayString} = useCurrencyListActions();
const {isOffline} = useNetwork();
Expand All @@ -37,7 +40,6 @@ function PayActionCell({isLoading, policyID, reportID, hash, amount, extraSmall,
const [iouReport, transactions] = useReportWithTransactionsAndViolations(reportID);
const policy = usePolicy(policyID);
const [bankAccountList] = useOnyx(ONYXKEYS.BANK_ACCOUNT_LIST);
const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${iouReport?.chatReportID}`);
const invoiceReceiverPolicyID = chatReport?.invoiceReceiver && 'policyID' in chatReport.invoiceReceiver ? chatReport.invoiceReceiver.policyID : undefined;
const invoiceReceiverPolicy = usePolicy(invoiceReceiverPolicyID);
const {
Expand Down
5 changes: 5 additions & 0 deletions src/components/Search/SearchList/ListItem/ActionCell/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
import React from 'react';
import type {OnyxEntry} from 'react-native-onyx';
import Button from '@components/Button';
import useLocalize from '@hooks/useLocalize';
import useNetwork from '@hooks/useNetwork';
import useThemeStyles from '@hooks/useThemeStyles';
import type {ModifiedMouseEvent} from '@libs/Navigation/helpers/openInternalRouteInNewTab';
import CONST from '@src/CONST';
import type {Report} from '@src/types/onyx';
import type {SearchTransactionAction} from '@src/types/onyx/SearchResults';
import actionTranslationsMap from './actionTranslationsMap';
import PayActionCell from './PayActionCell';
Expand All @@ -21,6 +23,7 @@ type ActionCellProps = {
amount?: number;
extraSmall?: boolean;
shouldDisablePointerEvents?: boolean;
chatReport?: OnyxEntry<Report>;
};

function ActionCell({
Expand All @@ -35,6 +38,7 @@ function ActionCell({
amount,
extraSmall = false,
shouldDisablePointerEvents,
chatReport,
}: ActionCellProps) {
const {translate} = useLocalize();
const styles = useThemeStyles();
Expand Down Expand Up @@ -75,6 +79,7 @@ function ActionCell({
amount={amount}
extraSmall={extraSmall}
shouldDisablePointerEvents={shouldDisablePointerEvents}
chatReport={chatReport}
/>
);
}
Expand Down
19 changes: 11 additions & 8 deletions src/components/Search/SearchList/ListItem/ExpenseReportListItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,6 @@ function ExpenseReportListItem<TItem extends ListItem>({
// Fetch live policy categories from Onyx to sync violations at render time
const [parentPolicy] = originalUseOnyx(`${ONYXKEYS.COLLECTION.POLICY}${getNonEmptyStringOnyxID(reportItem.policyID)}`);
const [parentReport] = originalUseOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getNonEmptyStringOnyxID(reportItem.reportID)}`);
const [parentChatReport] = originalUseOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getNonEmptyStringOnyxID(reportItem.parentReportID)}`);
const [policyCategories] = originalUseOnyx(`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${getNonEmptyStringOnyxID(reportItem.policyID)}`);

const searchData = currentSearchResults?.data;
Expand All @@ -97,9 +96,14 @@ function ExpenseReportListItem<TItem extends ListItem>({
return (searchData?.[`${ONYXKEYS.COLLECTION.REPORT}${reportItem.reportID}`] ?? {}) as Report;
}, [searchData, reportItem.reportID]);

const [parentChatReport] = originalUseOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getNonEmptyStringOnyxID(snapshotReport?.chatReportID ?? reportItem.parentReportID)}`);

const snapshotChatReport = useMemo(() => {
return searchData?.[`${ONYXKEYS.COLLECTION.REPORT}${reportItem.parentReportID}`];
}, [searchData, reportItem.parentReportID]);
const chatReportID = snapshotReport?.chatReportID ?? reportItem.parentReportID;
return chatReportID ? searchData?.[`${ONYXKEYS.COLLECTION.REPORT}${chatReportID}`] : undefined;
}, [searchData, snapshotReport?.chatReportID, reportItem.parentReportID]);

const chatReport = parentChatReport ?? snapshotChatReport;

@chatgpt-codex-connector chatgpt-codex-connector Bot Jun 11, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

P2 Badge Resolve chat reports from chatReportID in report rows

When an expense report row has the chat room only on chatReportID (the field PayActionCell previously subscribed to via iouReport?.chatReportID) and does not have parentReportID, this new value stays undefined because both lookups above use only reportItem.parentReportID. Since PayActionCell no longer falls back to iouReport.chatReportID, the Pay button path either computes canIOUBePaid without a chat report or returns early in confirmPayment; use the same snapshotReport?.chatReportID ?? reportItem.parentReportID resolution used in ReportListItemHeader/bulk pay before passing it down.

Useful? React with 👍 / 👎.

@daledah daledah Jun 11, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

@luacmartins Agree, i think this is a valid point. The snapshotChatReport in ExpenseReportListItem only uses reportItem.parentReportID, while ReportListItemHeader uses snapshotReport?.chatReportID ?? reportItem.parentReportID. We should align both to be consistent.

@luacmartins luacmartins Jun 11, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Updated


const snapshotPolicy = useMemo(() => {
return (searchData?.[`${ONYXKEYS.COLLECTION.POLICY}${reportItem.policyID}`] ?? {}) as Policy;
Expand Down Expand Up @@ -171,7 +175,7 @@ function ExpenseReportListItem<TItem extends ListItem>({
const liveReportTransactions = useMemo(() => Object.values(reportTransactions), [reportTransactions]);
const {currentUserAccountID, currentUserLogin, introSelected, betas, isSelfTourViewed, activePolicy, nextStep, chatReportPolicy, amountOwed} = useReportPaymentContext({
reportID: reportItem.reportID,
chatReportPolicyID: parentChatReport?.policyID ?? snapshotChatReport?.policyID,
chatReportPolicyID: chatReport?.policyID,
});

const handleOnButtonPress = useCallback(() => {
Expand All @@ -192,7 +196,6 @@ function ExpenseReportListItem<TItem extends ListItem>({
// Search rows render from a snapshot; the report may not exist in the main
// collection yet. Fall back to the snapshot so the modal can submit.
const moneyRequestReport = parentReport ?? snapshotReport;
const chatReport = parentChatReport ?? snapshotChatReport;
const transactionsForHoldMenu = liveReportTransactions.length > 0 ? liveReportTransactions : holdItem.transactions;
const {nonHeldAmount, fullAmount, hasValidNonHeldAmount} = getNonHeldAndFullAmount(moneyRequestReport, holdItem.canPay ?? false, transactionsForHoldMenu);
const hasNonHeldExpenses = transactionsForHoldMenu.some((t) => !isOnHold(t));
Expand All @@ -218,7 +221,7 @@ function ExpenseReportListItem<TItem extends ListItem>({
betas,
isSelfTourViewed,
activePolicy,
chatReport: parentChatReport ?? snapshotChatReport,
chatReport,
chatReportPolicy,
iouReportCurrentNextStepDeprecated: nextStep,
searchData,
Expand All @@ -230,11 +233,10 @@ function ExpenseReportListItem<TItem extends ListItem>({
onSelectRow,
searchData,
snapshotReport,
snapshotChatReport,
chatReport,
snapshotPolicy,
parentPolicy,
parentReport,
parentChatReport,
lastPaymentMethod,
userBillingGracePeriodEnds,
personalPolicyID,
Expand Down Expand Up @@ -402,6 +404,7 @@ function ExpenseReportListItem<TItem extends ListItem>({
canSelectMultiple={canSelectMultiple}
onCheckboxPress={handleSelectionButtonPress}
onButtonPress={handleOnButtonPress}
chatReport={chatReport}
isSelectAllChecked={isSelected}
isIndeterminate={false}
isDisabledCheckbox={isDisabledCheckbox}
Expand Down
2 changes: 2 additions & 0 deletions ...ents/Search/SearchList/ListItem/ExpenseReportListItemRow/ExpenseReportListItemRowWide.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ function ExpenseReportListItemRowWide({
onCheckboxPress = () => {},
onButtonPress = () => {},
isActionLoading,
chatReport,
containerStyle,
showTooltip,
canSelectMultiple,
Expand Down Expand Up @@ -199,6 +200,7 @@ function ExpenseReportListItemRowWide({
reportID={item.reportID}
hash={item.hash}
amount={item.total}
chatReport={chatReport}
shouldDisablePointerEvents={isPendingDelete}
/>
</View>
Expand Down
1 change: 1 addition & 0 deletions src/components/Search/SearchList/ListItem/ExpenseReportListItemRow/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ function ExpenseReportListItemRow(props: ExpenseReportListItemRowProps) {
isActionLoading={props.isActionLoading}
onButtonPress={props.onButtonPress}
onCheckboxPress={props.onCheckboxPress}
chatReport={props.chatReport}
containerStyle={props.containerStyle}
isSelectAllChecked={props.isSelectAllChecked}
isIndeterminate={props.isIndeterminate}
Expand Down
4 changes: 3 additions & 1 deletion src/components/Search/SearchList/ListItem/ExpenseReportListItemRow/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import type {StyleProp, ViewStyle} from 'react-native';
import type {OnyxEntry} from 'react-native-onyx';
import type {ExpenseReportListItemType} from '@components/Search/SearchList/ListItem/types';
import type {SearchColumnType} from '@components/Search/types';
import type {ReportAction} from '@src/types/onyx';
import type {Report, ReportAction} from '@src/types/onyx';

type ExpenseReportListItemRowNarrowProps = {
item: ExpenseReportListItemType;
Expand All @@ -17,6 +18,7 @@ type ExpenseReportListItemRowWideProps = ExpenseReportListItemRowNarrowProps & {
showTooltip: boolean;
isActionLoading?: boolean;
onButtonPress?: () => void;
chatReport?: OnyxEntry<Report>;
containerStyle?: StyleProp<ViewStyle>;
isHovered?: boolean;
isFocused?: boolean;
Expand Down
18 changes: 15 additions & 3 deletions src/components/Search/SearchList/ListItem/ReportListItemHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React, {useMemo} from 'react';
import type {ColorValue} from 'react-native';
import {View} from 'react-native';
import type {OnyxEntry} from 'react-native-onyx';
import Checkbox from '@components/Checkbox';
import {useDelegateNoAccessActions, useDelegateNoAccessState} from '@components/DelegateNoAccessModalProvider';
import Icon from '@components/Icon';
Expand Down Expand Up @@ -96,6 +97,9 @@ type FirstRowReportHeaderProps<TItem extends ListItem> = {

/** Whether the down arrow is expanded */
isExpanded?: boolean;

/** Parent chat report resolved from live Onyx with search snapshot fallback */
chatReport?: OnyxEntry<Report>;
};

function HeaderFirstRow<TItem extends ListItem>({
Expand All @@ -109,6 +113,7 @@ function HeaderFirstRow<TItem extends ListItem>({
isIndeterminate,
onDownArrowClick,
isExpanded,
chatReport,
}: FirstRowReportHeaderProps<TItem>) {
const icons = useMemoizedLazyExpensifyIcons(['DownArrow', 'UpArrow']);
const styles = useThemeStyles();
Expand Down Expand Up @@ -190,6 +195,7 @@ function HeaderFirstRow<TItem extends ListItem>({
hash={reportItem.hash}
amount={reportItem.total}
extraSmall={!isLargeScreenWidth}
chatReport={chatReport}
/>
</View>
)}
Expand Down Expand Up @@ -228,11 +234,16 @@ function ReportListItemHeader<TItem extends ListItem>({
const snapshotPolicy = useMemo(() => {
return (snapshot?.data?.[`${ONYXKEYS.COLLECTION.POLICY}${reportItem.policyID}`] ?? {}) as Policy;
}, [snapshot, reportItem.policyID]);
const snapshotChatReport = useMemo(() => {
const chatReportID = snapshotReport?.chatReportID ?? reportItem.parentReportID;
return chatReportID ? snapshot?.data?.[`${ONYXKEYS.COLLECTION.REPORT}${chatReportID}`] : undefined;
}, [snapshot, snapshotReport?.chatReportID, reportItem.parentReportID]);
const [parentPolicy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${getNonEmptyStringOnyxID(snapshotReport?.policyID ?? reportItem.policyID)}`);
const [parentChatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getNonEmptyStringOnyxID(snapshotReport?.chatReportID)}`);
const [parentChatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getNonEmptyStringOnyxID(snapshotReport?.chatReportID ?? reportItem.parentReportID)}`);
const chatReport = parentChatReport ?? snapshotChatReport;
const {currentUserAccountID, currentUserLogin, introSelected, betas, isSelfTourViewed, activePolicy, nextStep, chatReportPolicy, amountOwed} = useReportPaymentContext({
reportID: reportItem.reportID,
chatReportPolicyID: parentChatReport?.policyID,
chatReportPolicyID: chatReport?.policyID,
});
const {isDelegateAccessRestricted} = useDelegateNoAccessState();
const {showDelegateNoAccessModal} = useDelegateNoAccessActions();
Expand Down Expand Up @@ -265,7 +276,7 @@ function ReportListItemHeader<TItem extends ListItem>({
betas,
isSelfTourViewed,
activePolicy,
chatReport: parentChatReport,
chatReport,
chatReportPolicy,
iouReportCurrentNextStepDeprecated: nextStep,
searchData: snapshot?.data,
Expand Down Expand Up @@ -306,6 +317,7 @@ function ReportListItemHeader<TItem extends ListItem>({
isIndeterminate={isIndeterminate}
onDownArrowClick={onDownArrowClick}
isExpanded={isExpanded}
chatReport={chatReport}
/>
</View>
);
Expand Down
Loading