Reports - Entire expense report is grayed out after paying expense offline on "Reports"

[jponikarchuk]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: v9.2.66-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: https://test-management.browserstack.com/projects/2219752/test-runs/TR-2221/folder/13176923/53628502/1045231897
Email or phone of affected tester (no customers): ibellicotest+2139@gmail.com
Issue reported by: Applause Internal Team
Device used: Motorola MotoG60 / Android 12 / Chrome ( mWeb / Hybrid app) - Windows 11 / Chrome
App Component: Search

Action Performed:

Prerequisite: Account has at least one workspace.
Prerequisite 2: Delayed submissions and approvals enabled.

1. Open the staging.new.expensify.com website.
2. Open any workspace chat.
3. Create a manual expense.
4. Submit and approve the expense.
5. Navigate to "Reports" > "Pay"
6. Turn off internet connection.
7. Open the just created expense report.
8. Mark the expense as paid.
9. Note that after expense is paid, all the report becomes grayed out.
10. Navigate to workspace chat again.
11. Reopen expense report.
12. Note that report is not grayed out if opened on chat.

Expected Result:

When an expense is paid while in offline mode, only the system message received after the action, should be displayed grayed out.

Actual Result:

When an expense is paid while in offline mode in "Reports" section, the entire report becomes grayed out and not only the received system message.
Report is not displayed grayed out if opened from chat or if it is paid while offline in chat.

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

1.mp4

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @dylanexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[abbasifaizan70]

Proposal

Please re-state the problem that we are trying to solve in this issue.

When an expense is marked as paid while in offline mode in the "Reports" > "Pay" section, the entire expense report becomes grayed out instead of only the payment system message being grayed out. This is inconsistent with the expected behavior and with how the report is displayed when opened from chat.

What is the root cause of that problem?

The root cause is in the getReportOfflinePendingActionAndErrors function in App/src/libs/ReportUtils.ts at line 9939.

The Root Cause Chain:

1. Payment Action Sets Report Pending Field: When a payment is made offline (in App/src/libs/actions/IOU.ts at line 10118), the report's pendingFields.reimbursed is set to CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE to track that the report status update is pending.

2. getReportOfflinePendingActionAndErrors Includes Reimbursed: The getReportOfflinePendingActionAndErrors function includes report?.pendingFields?.reimbursed in the reportPendingAction return value (line 9939), treating it the same as report creation actions.

3. Entire Report Wrapped in OfflineWithFeedback: In App/src/components/MoneyRequestReportView/MoneyRequestReportView.tsx at line 209, the entire report view is wrapped in OfflineWithFeedback with pendingAction={reportPendingAction}. This causes the entire report to be grayed out when reportPendingAction includes the reimbursed pending field.

4. Payment Actions Already Handled at Action Level: Payment actions are already properly handled at the report action level. In App/src/pages/home/report/PureReportActionItem.tsx at line 1785, each report action (including payment system messages) is individually wrapped in OfflineWithFeedback with its own pendingAction. This correctly grays out only the payment system message, not the entire report.

5. Why Chat View Works Correctly: When viewing the report from chat, the report is displayed through ReportActionItemContentCreated which wraps only the report preview (not the entire view) in OfflineWithFeedback. The payment system message is handled separately at the action level, so only the message is grayed out.

Why the reimbursed pending field shouldn't cause report-level grayed out state:

• The reimbursed pending field is used to track that the report's status update is pending, not to provide visual feedback
• Visual feedback for payment actions is already handled at the report action level through individual action pendingAction values
• Including reimbursed in getReportOfflinePendingActionAndErrors causes unintended side effects (entire report grayed out) when only the payment message should be grayed out

What changes do you think we should make in order to solve the problem?

File: App/src/libs/ReportUtils.ts

Remove report?.pendingFields?.reimbursed from the reportPendingAction calculation in getReportOfflinePendingActionAndErrors function.

Current code (line 9939):

const reportPendingAction = report?.pendingFields?.addWorkspaceRoom ?? report?.pendingFields?.createChat ?? report?.pendingFields?.reimbursed ?? report?.pendingFields?.createReport;

Updated code:

const reportPendingAction = report?.pendingFields?.addWorkspaceRoom ?? report?.pendingFields?.createChat ?? report?.pendingFields?.createReport;

Why this works:

• Payment actions are already handled at the report action level through OfflineWithFeedback wrapping individual actions in PureReportActionItem
• The reimbursed pending field is only needed to track the report status update, not for visual feedback
• Removing it from getReportOfflinePendingActionAndErrors prevents the entire report from being grayed out when only the payment system message should be grayed out
• The payment system message will still be correctly grayed out because it has its own pendingAction at the action level

What alternative solutions did you explore? (Optional)

N/A

[daledah]

Proposal

Please re-state the problem that we are trying to solve in this issue.

When an expense is paid while in offline mode in "Reports" section, the entire report becomes grayed out and not only the received system message.
Report is not displayed grayed out if opened from chat or if it is paid while offline in chat.

What is the root cause of that problem?

When marking an expense as paid offline, the report gets pendingFields.reimbursed set. getReportOfflinePendingActionAndErrors included this in the report-level pending action

App/src/libs/ReportUtils.ts

Lines 9937 to 9942 in f82a8db

	function getReportOfflinePendingActionAndErrors(report: OnyxEntry<Report>): ReportOfflinePendingActionAndErrors {
	// It shouldn't be possible for all of these actions to be pending (or to have errors) for the same report at the same time, so just take the first that exists
	const reportPendingAction = report?.pendingFields?.addWorkspaceRoom ?? report?.pendingFields?.createChat ?? report?.pendingFields?.reimbursed ?? report?.pendingFields?.createReport;
	const reportErrors = getCreationReportErrors(report);
	return {reportPendingAction, reportErrors};
	}

It's causing the entire report to be grayed out via the OfflineWithFeedback wrapper

App/src/pages/home/ReportScreen.tsx

Line 310 in f82a8db

const {reportPendingAction, reportErrors} = getReportOfflinePendingActionAndErrors(report);

App/src/pages/home/ReportScreen.tsx

Lines 918 to 925 in f82a8db

	<OfflineWithFeedback
	pendingAction={reportPendingAction}
	errors={reportErrors}
	shouldShowErrorMessages={false}
	needsOffscreenAlphaCompositing
	>
	{headerView}
	</OfflineWithFeedback>

App/src/components/MoneyRequestReportView/MoneyRequestReportView.tsx

Lines 209 to 217 in f82a8db

	<OfflineWithFeedback
	pendingAction={reportPendingAction}
	errors={reportErrors}
	onClose={dismissReportCreationError}
	needsOffscreenAlphaCompositing
	style={styles.flex1}
	contentContainerStyle={styles.flex1}
	errorRowStyles={[styles.ph5, styles.mv2]}
	>

What changes do you think we should make in order to solve the problem?

1. Because there is no place to use pendingFields reimbursed anymore, so we should remove pendingFelds reimbursed when pay the expense offline

    pendingFields: {
        preview: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
        partial: full ? null : CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
        nextStep: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
    },

App/src/libs/actions/IOU.ts

Lines 10116 to 10121 in f82a8db

	pendingFields: {
	preview: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
	reimbursed: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
	partial: full ? null : CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
	nextStep: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
	},

2. Optional: we can remove report?.pendingFields?.reimbursed in this condition

    const reportPendingAction = report?.pendingFields?.addWorkspaceRoom ?? report?.pendingFields?.createChat ?? report?.pendingFields?.createReport;

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[ShridharGoel]

Proposal

Please re-state the problem that we are trying to solve in this issue.

When a payment is made offline from Reports > Pay, the entire expense report view is dimmed instead of only dimming the pending payment system message. Opening the same report from chat does not dim the whole report.

What is the root cause of that problem?

• getReportOfflinePendingActionAndErrors treats pendingFields.reimbursed as a report-level pending action, so the whole report is wrapped in offline feedback when an offline payment is queued:

  App/src/libs/ReportUtils.ts

  Lines 9941 to 9951 in 5d3d7ef

  	* - creating a workspace room
  	* - starting a chat
  	* - paying the expense
  	*
  	* while being offline
  	*/
  	function getReportOfflinePendingActionAndErrors(report: OnyxEntry<Report>): ReportOfflinePendingActionAndErrors {
  	// It shouldn't be possible for all of these actions to be pending (or to have errors) for the same report at the same time, so just take the first that exists
  	const reportPendingAction = report?.pendingFields?.addWorkspaceRoom ?? report?.pendingFields?.createChat ?? report?.pendingFields?.reimbursed ?? report?.pendingFields?.createReport;
  	const reportErrors = getCreationReportErrors(report);
  	return {reportPendingAction, reportErrors};

• The offline payment flow writes and clears pendingFields.reimbursed, even though the payment action already carries its own pending state, so the unnecessary report-level pending flag is created and later cleared:

  App/src/libs/actions/IOU.ts

  Lines 9925 to 10005 in 5d3d7ef

  	value: optimisticChatReport,
  	},
  	{
  	onyxMethod: Onyx.METHOD.MERGE,
  	key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${iouReport?.reportID}`,
  	value: {
  	[optimisticIOUReportAction.reportActionID]: {
  	...(optimisticIOUReportAction as OnyxTypes.ReportAction),
  	pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD,
  	},
  	},
  	},
  	{
  	onyxMethod: Onyx.METHOD.MERGE,
  	key: `${ONYXKEYS.COLLECTION.REPORT}${iouReport?.reportID}`,
  	value: {
  	lastMessageText: getReportActionText(optimisticIOUReportAction),
  	lastMessageHtml: getReportActionHtml(optimisticIOUReportAction),
  	lastVisibleActionCreated: optimisticIOUReportAction.created,
  	hasOutstandingChildRequest: false,
  	statusNum: CONST.REPORT.STATUS_NUM.REIMBURSED,
  	stateNum: CONST.REPORT.STATE_NUM.APPROVED,
  	pendingFields: {
  	preview: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
  	reimbursed: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
  	partial: full ? null : CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
  	nextStep: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
  	},
  	nextStep: optimisticNextStep,
  	errors: null,
  	},
  	},
  	{
  	onyxMethod: Onyx.METHOD.MERGE,
  	key: `${ONYXKEYS.COLLECTION.NEXT_STEP}${iouReport?.reportID}`,
  	value: optimisticNextStepDeprecated,
  	},
  	);
  	if (iouReport?.policyID) {
  	const prevLastUsedPaymentMethod = lastUsedPaymentMethod?.lastUsed?.name;
  	const usedPaymentOption = paymentPolicyID ?? paymentMethodType;
  	const optimisticLastPaymentMethod = {
  	[iouReport.policyID]: {
  	...(iouReport.type ? {[iouReport.type]: {name: usedPaymentOption}} : {}),
  	...(isInvoiceReport ? {invoice: {name: paymentMethodType, bankAccountID}} : {}),
  	lastUsed: {
  	name: prevLastUsedPaymentMethod !== usedPaymentOption && !!prevLastUsedPaymentMethod ? prevLastUsedPaymentMethod : usedPaymentOption,
  	},
  	},
  	};
  	optimisticData.push({
  	onyxMethod: Onyx.METHOD.MERGE,
  	key: ONYXKEYS.NVP_LAST_PAYMENT_METHOD,
  	value: optimisticLastPaymentMethod,
  	});
  	}
  	successData.push(
  	{
  	onyxMethod: Onyx.METHOD.MERGE,
  	key: `${ONYXKEYS.COLLECTION.REPORT}${iouReport?.reportID}`,
  	value: {
  	pendingFields: {
  	preview: null,
  	reimbursed: null,
  	partial: null,
  	nextStep: null,
  	},
  	errors: null,
  	},
  	},
  	{
  	onyxMethod: Onyx.METHOD.MERGE,
  	key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${iouReport?.reportID}`,
  	value: {
  	[optimisticIOUReportAction.reportActionID]: {
  	pendingAction: null,
  	},

What changes do you think we should make in order to solve the problem?

1. Stop treating reimbursements as a report-level pending action. The payment action itself is already wrapped with OfflineWithFeedback, so only the system message should dim.

// src/libs/ReportUtils.ts
function getReportOfflinePendingActionAndErrors(report: OnyxEntry<Report>): ReportOfflinePendingActionAndErrors {
    // Only creation-related pending flags should dim the whole report
    const reportPendingAction =
        report?.pendingFields?.addWorkspaceRoom ??
        report?.pendingFields?.createChat ??
        report?.pendingFields?.createReport;
    const reportErrors = getCreationReportErrors(report);
    return {reportPendingAction, reportErrors};
}

2. Stop writing the reimbursed pending flag during offline payments, so we no longer surface a report-level pending state for payments.

// src/libs/actions/IOU.ts
optimisticData.push({
    onyxMethod: Onyx.METHOD.MERGE,
    key: `${ONYXKEYS.COLLECTION.REPORT}${iouReport?.reportID}`,
    value: {
        lastMessageText: getReportActionText(optimisticIOUReportAction),
        lastMessageHtml: getReportActionHtml(optimisticIOUReportAction),
        lastVisibleActionCreated: optimisticIOUReportAction.created,
        hasOutstandingChildRequest: false,
        statusNum: CONST.REPORT.STATUS_NUM.REIMBURSED,
        stateNum: CONST.REPORT.STATE_NUM.APPROVED,
        pendingFields: {
            preview: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
            partial: full ? null : CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
            nextStep: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
        },
        nextStep: optimisticNextStep,
        errors: null,
    },
});

successData.push({
    onyxMethod: Onyx.METHOD.MERGE,
    key: `${ONYXKEYS.COLLECTION.REPORT}${iouReport?.reportID}`,
    value: {
        pendingFields: {
            preview: null,
            partial: null,
            nextStep: null,
        },
        errors: null,
    },
});