fixed offline regressions

Author: mukhrr

src/components/ReportActionItem/MoneyReportView.tsx

@@ -108,8 +108,9 @@ function MoneyReportView({
     const isTaxEnabled = isPolicyTaxEnabled(policy);
     // Exclude transactions pending deletion so a report being reduced to a single expense (e.g. deleting one of two) is treated as single immediately,
     // instead of waiting for the optimistic delete to be removed from Onyx (https://github.com/Expensify/App/issues/91058).
-    const nonPendingDeleteTransactions = transactions.filter((transaction) => !isTransactionPendingDelete(transaction));
-    const isSingleNonReimbursableExpense = isSingleTransactionReport(report, nonPendingDeleteTransactions) && nonPendingDeleteTransactions.at(0)?.reimbursable === false;
+    // While offline the deleted expense is still rendered, so keep counting it to stay consistent with the visible transaction list.
+    const visibleTransactions = transactions.filter((transaction) => isOffline || !isTransactionPendingDelete(transaction));
+    const isSingleNonReimbursableExpense = isSingleTransactionReport(report, visibleTransactions) && visibleTransactions.at(0)?.reimbursable === false;
     // The reimbursable/non-reimbursable rows duplicate the Total for a single non-reimbursable expense, so suppress only those rows.
     // Billable and tax rows convey distinct information and must still show.
     const shouldShowReimbursabilityBreakdown = !isSingleNonReimbursableExpense && !!nonReimbursableSpend;

src/components/ReportActionItem/MoneyRequestView.tsx

@@ -255,7 +255,8 @@ function MoneyRequestView({
     const parentReportTransactions = useReportTransactions(moneyRequestReport?.reportID);
     // Exclude transactions pending deletion so the report is recognized as single-expense immediately after deleting one of its expenses,
     // instead of waiting for the optimistic delete to be removed from Onyx (https://github.com/Expensify/App/issues/91058).
-    const nonPendingDeleteParentReportTransactions = parentReportTransactions.filter((t) => !isTransactionPendingDelete(t));
+    // While offline the deleted expense is still rendered, so keep counting it to stay consistent with the visible transaction list.
+    const visibleParentReportTransactions = parentReportTransactions.filter((t) => isOffline || !isTransactionPendingDelete(t));
     const isApproved = isReportApproved({report: moneyRequestReport});
     const isInvoice = isInvoiceReport(moneyRequestReport);
     const isTrackExpense = !mergeTransactionID && isTrackExpenseReportNew(transactionThreadReport, moneyRequestReport, parentReportAction);
@@ -574,7 +575,7 @@ function MoneyRequestView({
         amountDescription += ` ${CONST.DOT_SEPARATOR} ${translate('common.converted')} ${convertToDisplayString(transactionConvertedAmount, moneyRequestReport?.currency)}`;
     }
     const isCurrentTransactionReimbursable = updatedTransaction?.reimbursable ?? !!transactionReimbursable;
-    if (!isCurrentTransactionReimbursable && isSingleTransactionReport(moneyRequestReport, nonPendingDeleteParentReportTransactions)) {
+    if (!isCurrentTransactionReimbursable && isSingleTransactionReport(moneyRequestReport, visibleParentReportTransactions)) {
         amountDescription += ` ${CONST.DOT_SEPARATOR} ${Str.UCFirst(translate('iou.nonReimbursable'))}`;
     }
 

tests/ui/MoneyReportViewTest.tsx

@@ -191,4 +191,23 @@ describe('MoneyReportView reimbursable/non-reimbursable breakdown rows', () => {
             expect(screen.queryByText('cardTransactions.companySpend')).not.toBeOnTheScreen();
         });
     });
+
+    it('keeps the breakdown rows while offline because the pending-deleted expense is still rendered', async () => {
+        const transactions = [
+            buildTransaction('t1', 5000, false),
+            {...buildTransaction('t2', 3000, false), pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE} as OnyxTypes.Transaction,
+        ];
+        await seedReportAndTransactions(transactions, {nonReimbursableTotal: -5000, unheldNonReimbursableTotal: -5000});
+        await act(async () => {
+            await Onyx.merge(ONYXKEYS.NETWORK, {shouldForceOffline: true});
+        });
+
+        renderMoneyReportView(buildExpenseReport({nonReimbursableTotal: -5000, unheldNonReimbursableTotal: -5000}));
+        await waitForBatchedUpdatesWithAct();
+
+        await waitFor(() => {
+            expect(screen.getByText('cardTransactions.outOfPocket')).toBeOnTheScreen();
+            expect(screen.getByText('cardTransactions.companySpend')).toBeOnTheScreen();
+        });
+    });
 });

tests/ui/MoneyRequestViewTest.tsx

@@ -366,4 +366,38 @@ describe('MoneyRequestView edit fields', () => {
             expect(screen.getByTestId(/^menu-item-iou\.amount.*iou\.nonReimbursable/i)).toBeOnTheScreen();
         });
     });
+
+    it('should NOT append "Non-reimbursable" while offline because the pending-deleted expense is still rendered', async () => {
+        const threadReport = {
+            ...LHNTestUtils.getFakeReport(),
+            parentReportID: expenseReportID,
+            parentReportActionID,
+        };
+
+        await setupTestData();
+        await act(async () => {
+            await Onyx.merge(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, {reimbursable: false});
+            await Onyx.merge(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}_sibling`, {
+                transactionID: `${transactionID}_sibling`,
+                reportID: expenseReportID,
+                amount: 2500,
+                currency: CONST.CURRENCY.USD,
+                created: '2025-06-02',
+                merchant: 'Sibling',
+                comment: {},
+                reimbursable: false,
+                pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,
+            });
+            await Onyx.merge(ONYXKEYS.NETWORK, {shouldForceOffline: true});
+        });
+        await waitForBatchedUpdatesWithAct();
+
+        renderMoneyRequestView(threadReport);
+        await waitForBatchedUpdatesWithAct();
+
+        await waitFor(() => {
+            expect(screen.getByTestId(/^menu-item-iou\.amount/)).toBeOnTheScreen();
+            expect(screen.queryByTestId(/^menu-item-iou\.amount.*iou\.nonReimbursable/i)).not.toBeOnTheScreen();
+        });
+    });
 });