[Due for payment 2025-09-30] [$250] Chat - Payment preview is displayed grayed out everytime internet connection is lost.

[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: 9.1.97-1
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: https://test-management.browserstack.com/projects/2219752/test-runs/TR-352/folder/13177029/41237848/849028612
Email or phone of affected tester (no customers): ibellicotest+1626@gmail.com
Issue reported by: Applause Internal Team
Device used: Motorola MotoG60 / Android 12 / Chrome ( mWeb / Hybrid app) - Windows 10 / Chrome
App Component: Other

Action Performed:

1. Open the Expensify app.
2. Open any chat with another user or create one if necessary.
3. Tap on the "+" button and select "Pay XX" option.
4. Input any amount and send the payment.
5. Once redirected to chat again, turn off internet connection.
6. Note that the payment preview, is seen with reduced opacity while offline.

Expected Result:

Payment preview shoudn´t be seen with reduced opacity while offline, as the payment was created while in online mode.

Actual Result:

Preview of payment on individual chat, is displayed with reduced opacity everytime the internet connection is lost.

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

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021960638377598210469
• Upwork Job ID: 1960638377598210469
• Last Price Increase: 2025-09-03

Issue Owner

Current Issue Owner: @JmillsExpensify

[melvin-bot]

Triggered auto assignment to @JmillsExpensify (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.

[Krishna2323]

Proposal

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

Chat - Payment preview is displayed grayed out everytime internet connection is lost.

What is the root cause of that problem?

• The isOptimisticAction property for the report preview action is not set to null in success data and failure data:
  

  App/src/libs/actions/IOU.ts

  Lines 8448 to 8811 in 9ce95b7

  	function getSendMoneyParams(
  	report: OnyxEntry<OnyxTypes.Report>,
  	amount: number,
  	currency: string,
  	commentParam: string,
  	paymentMethodType: PaymentMethodType,
  	managerID: number,
  	recipient: Participant,
  	): SendMoneyParamsData {
  	const recipientEmail = addSMSDomainIfPhoneNumber(recipient.login ?? '');
  	const recipientAccountID = Number(recipient.accountID);
  	const comment = getParsedComment(commentParam);
  	const newIOUReportDetails = JSON.stringify({
  	amount,
  	currency,
  	requestorEmail: recipientEmail,
  	requestorAccountID: recipientAccountID,
  	comment,
  	idempotencyKey: Str.guid(),
  	});
  	let chatReport = !isEmptyObject(report) && report?.reportID ? report : getChatByParticipants([recipientAccountID, managerID]);
  	let isNewChat = false;
  	if (!chatReport) {
  	chatReport = buildOptimisticChatReport({
  	participantList: [recipientAccountID, managerID],
  	});
  	isNewChat = true;
  	}
  	const optimisticIOUReport = buildOptimisticIOUReport(recipientAccountID, managerID, amount, chatReport.reportID, currency, true);
  	const optimisticTransaction = buildOptimisticTransaction({
  	transactionParams: {
  	amount,
  	currency,
  	reportID: optimisticIOUReport.reportID,
  	comment,
  	},
  	});
  	const optimisticTransactionData: OnyxUpdate = {
  	onyxMethod: Onyx.METHOD.SET,
  	key: `${ONYXKEYS.COLLECTION.TRANSACTION}${optimisticTransaction.transactionID}`,
  	value: optimisticTransaction,
  	};
  	const [optimisticCreatedActionForChat, optimisticCreatedActionForIOUReport, optimisticIOUReportAction, optimisticTransactionThread, optimisticCreatedActionForTransactionThread] =
  	buildOptimisticMoneyRequestEntities({
  	iouReport: optimisticIOUReport,
  	type: CONST.IOU.REPORT_ACTION_TYPE.PAY,
  	amount,
  	currency,
  	comment,
  	payeeEmail: recipientEmail,
  	participants: [recipient],
  	transactionID: optimisticTransaction.transactionID,
  	paymentType: paymentMethodType,
  	isSendMoneyFlow: true,
  	});
  	const reportPreviewAction = buildOptimisticReportPreview(chatReport, optimisticIOUReport);
  	// Change the method to set for new reports because it doesn't exist yet, is faster,
  	// and we need the data to be available when we navigate to the chat page
  	const optimisticChatReportData: OnyxUpdate = isNewChat
  	? {
  	onyxMethod: Onyx.METHOD.SET,
  	key: `${ONYXKEYS.COLLECTION.REPORT}${chatReport.reportID}`,
  	value: {
  	...chatReport,
  	// Set and clear pending fields on the chat report
  	pendingFields: {createChat: CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD},
  	lastReadTime: DateUtils.getDBTime(),
  	lastVisibleActionCreated: reportPreviewAction.created,
  	},
  	}
  	: {
  	onyxMethod: Onyx.METHOD.MERGE,
  	key: `${ONYXKEYS.COLLECTION.REPORT}${chatReport.reportID}`,
  	value: {
  	...chatReport,
  	lastReadTime: DateUtils.getDBTime(),
  	lastVisibleActionCreated: reportPreviewAction.created,
  	},
  	};
  	const optimisticQuickActionData: OnyxUpdate = {
  	onyxMethod: Onyx.METHOD.SET,
  	key: ONYXKEYS.NVP_QUICK_ACTION_GLOBAL_CREATE,
  	value: {
  	action: CONST.QUICK_ACTIONS.SEND_MONEY,
  	chatReportID: chatReport.reportID,
  	isFirstQuickAction: isEmptyObject(quickAction),
  	},
  	};
  	const optimisticIOUReportData: OnyxUpdate = {
  	onyxMethod: Onyx.METHOD.SET,
  	key: `${ONYXKEYS.COLLECTION.REPORT}${optimisticIOUReport.reportID}`,
  	value: {
  	...optimisticIOUReport,
  	lastMessageText: getReportActionText(optimisticIOUReportAction),
  	lastMessageHtml: getReportActionHtml(optimisticIOUReportAction),
  	},
  	};
  	const optimisticTransactionThreadData: OnyxUpdate = {
  	onyxMethod: Onyx.METHOD.SET,
  	key: `${ONYXKEYS.COLLECTION.REPORT}${optimisticTransactionThread.reportID}`,
  	value: optimisticTransactionThread,
  	};
  	const optimisticIOUReportActionsData: OnyxUpdate = {
  	onyxMethod: Onyx.METHOD.MERGE,
  	key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${optimisticIOUReport.reportID}`,
  	value: {
  	[optimisticCreatedActionForIOUReport.reportActionID]: optimisticCreatedActionForIOUReport,
  	[optimisticIOUReportAction.reportActionID]: {
  	...(optimisticIOUReportAction as OnyxTypes.ReportAction),
  	pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD,
  	},
  	},
  	};
  	const optimisticChatReportActionsData: OnyxUpdate = {
  	onyxMethod: Onyx.METHOD.MERGE,
  	key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${chatReport.reportID}`,
  	value: {
  	[reportPreviewAction.reportActionID]: reportPreviewAction,
  	},
  	};
  	const optimisticTransactionThreadReportActionsData: OnyxUpdate | undefined = optimisticCreatedActionForTransactionThread
  	? {
  	onyxMethod: Onyx.METHOD.MERGE,
  	key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${optimisticTransactionThread.reportID}`,
  	value: {[optimisticCreatedActionForTransactionThread?.reportActionID]: optimisticCreatedActionForTransactionThread},
  	}
  	: undefined;
  	const optimisticMetaData: OnyxUpdate[] = [
  	{
  	onyxMethod: Onyx.METHOD.MERGE,
  	key: `${ONYXKEYS.COLLECTION.REPORT_METADATA}${chatReport.reportID}`,
  	value: {
  	isOptimisticReport: true,
  	},
  	},
  	{
  	onyxMethod: Onyx.METHOD.MERGE,
  	key: `${ONYXKEYS.COLLECTION.REPORT_METADATA}${optimisticTransactionThread.reportID}`,
  	value: {
  	isOptimisticReport: true,
  	},
  	},
  	];
  	const successData: OnyxUpdate[] = [];
  	// Add optimistic personal details for recipient
  	let optimisticPersonalDetailListData: OnyxUpdate | null = null;
  	const optimisticPersonalDetailListAction = isNewChat
  	? {
  	[recipientAccountID]: {
  	accountID: recipientAccountID,
  	// Disabling this line since participant.displayName can be an empty string
  	// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
  	displayName: recipient.displayName || recipient.login,
  	login: recipient.login,
  	},
  	}
  	: {};
  	const redundantParticipants: Record<number, null> = {};
  	if (!isEmptyObject(optimisticPersonalDetailListAction)) {
  	const successPersonalDetailListAction: Record<number, null> = {};
  	// BE will send different participants. We clear the optimistic ones to avoid duplicated entries
  	Object.keys(optimisticPersonalDetailListAction).forEach((accountIDKey) => {
  	const accountID = Number(accountIDKey);
  	successPersonalDetailListAction[accountID] = null;
  	redundantParticipants[accountID] = null;
  	});
  	optimisticPersonalDetailListData = {
  	onyxMethod: Onyx.METHOD.MERGE,
  	key: ONYXKEYS.PERSONAL_DETAILS_LIST,
  	value: optimisticPersonalDetailListAction,
  	};
  	successData.push({
  	onyxMethod: Onyx.METHOD.MERGE,
  	key: ONYXKEYS.PERSONAL_DETAILS_LIST,
  	value: successPersonalDetailListAction,
  	});
  	}
  	successData.push(
  	{
  	onyxMethod: Onyx.METHOD.MERGE,
  	key: `${ONYXKEYS.COLLECTION.REPORT}${optimisticIOUReport.reportID}`,
  	value: {
  	participants: redundantParticipants,
  	},
  	},
  	{
  	onyxMethod: Onyx.METHOD.MERGE,
  	key: `${ONYXKEYS.COLLECTION.REPORT}${optimisticTransactionThread.reportID}`,
  	value: {
  	participants: redundantParticipants,
  	},
  	},
  	{
  	onyxMethod: Onyx.METHOD.MERGE,
  	key: `${ONYXKEYS.COLLECTION.REPORT_METADATA}${optimisticTransactionThread.reportID}`,
  	value: {
  	isOptimisticReport: false,
  	},
  	},
  	{
  	onyxMethod: Onyx.METHOD.MERGE,
  	key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${optimisticIOUReport.reportID}`,
  	value: {
  	[optimisticIOUReportAction.reportActionID]: {
  	pendingAction: null,
  	},
  	},
  	},
  	{
  	onyxMethod: Onyx.METHOD.MERGE,
  	key: `${ONYXKEYS.COLLECTION.TRANSACTION}${optimisticTransaction.transactionID}`,
  	value: {pendingAction: null},
  	},
  	{
  	onyxMethod: Onyx.METHOD.MERGE,
  	key: `${ONYXKEYS.COLLECTION.REPORT_METADATA}${chatReport.reportID}`,
  	value: {
  	isOptimisticReport: false,
  	},
  	},
  	{
  	onyxMethod: Onyx.METHOD.MERGE,
  	key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${chatReport.reportID}`,
  	value: {
  	[reportPreviewAction.reportActionID]: {
  	pendingAction: null,
  	childLastActorAccountID: reportPreviewAction.childLastActorAccountID,
  	},
  	},
  	},
  	);
  	const failureData: OnyxUpdate[] = [
  	{
  	onyxMethod: Onyx.METHOD.MERGE,
  	key: `${ONYXKEYS.COLLECTION.TRANSACTION}${optimisticTransaction.transactionID}`,
  	value: {
  	errors: getMicroSecondOnyxErrorWithTranslationKey('iou.error.other'),
  	},
  	},
  	{
  	onyxMethod: Onyx.METHOD.MERGE,
  	key: `${ONYXKEYS.COLLECTION.REPORT}${optimisticTransactionThread.reportID}`,
  	value: {
  	errorFields: {
  	createChat: getMicroSecondOnyxErrorWithTranslationKey('report.genericCreateReportFailureMessage'),
  	},
  	},
  	},
  	{
  	onyxMethod: Onyx.METHOD.SET,
  	key: ONYXKEYS.NVP_QUICK_ACTION_GLOBAL_CREATE,
  	value: quickAction ?? null,
  	},
  	];
  	if (optimisticCreatedActionForTransactionThread?.reportActionID) {
  	successData.push({
  	onyxMethod: Onyx.METHOD.MERGE,
  	key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${optimisticTransactionThread.reportID}`,
  	value: {[optimisticCreatedActionForTransactionThread?.reportActionID]: {pendingAction: null}},
  	});
  	failureData.push({
  	onyxMethod: Onyx.METHOD.MERGE,
  	key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${optimisticTransactionThread.reportID}`,
  	value: {[optimisticCreatedActionForTransactionThread?.reportActionID]: {errors: getMicroSecondOnyxErrorWithTranslationKey('iou.error.genericCreateFailureMessage')}},
  	});
  	}
  	// Now, let's add the data we need just when we are creating a new chat report
  	if (isNewChat) {
  	successData.push({
  	onyxMethod: Onyx.METHOD.MERGE,
  	key: `${ONYXKEYS.COLLECTION.REPORT}${chatReport.reportID}`,
  	value: {pendingFields: null, participants: redundantParticipants},
  	});
  	failureData.push(
  	{
  	onyxMethod: Onyx.METHOD.MERGE,
  	key: `${ONYXKEYS.COLLECTION.REPORT}${chatReport.reportID}`,
  	value: {
  	errorFields: {
  	createChat: getMicroSecondOnyxErrorWithTranslationKey('report.genericCreateReportFailureMessage'),
  	},
  	},
  	},
  	{
  	onyxMethod: Onyx.METHOD.MERGE,
  	key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${optimisticIOUReport.reportID}`,
  	value: {
  	[optimisticIOUReportAction.reportActionID]: {
  	errors: getMicroSecondOnyxErrorWithTranslationKey('iou.error.genericCreateFailureMessage'),
  	},
  	},
  	},
  	);
  	const optimisticChatReportActionsValue = optimisticChatReportActionsData.value as Record<string, OnyxTypes.ReportAction>;
  	if (optimisticChatReportActionsValue) {
  	// Add an optimistic created action to the optimistic chat reportActions data
  	optimisticChatReportActionsValue[optimisticCreatedActionForChat.reportActionID] = optimisticCreatedActionForChat;
  	}
  	} else {
  	failureData.push({
  	onyxMethod: Onyx.METHOD.MERGE,
  	key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${optimisticIOUReport.reportID}`,
  	value: {
  	[optimisticIOUReportAction.reportActionID]: {
  	errors: getMicroSecondOnyxErrorWithTranslationKey('iou.error.other'),
  	},
  	},
  	});
  	}
  	const optimisticData: OnyxUpdate[] = [
  	optimisticChatReportData,
  	optimisticQuickActionData,
  	optimisticIOUReportData,
  	optimisticChatReportActionsData,
  	optimisticIOUReportActionsData,
  	optimisticTransactionData,
  	optimisticTransactionThreadData,
  	...optimisticMetaData,
  	];
  	if (optimisticTransactionThreadReportActionsData) {
  	optimisticData.push(optimisticTransactionThreadReportActionsData);
  	}
  	if (!isEmptyObject(optimisticPersonalDetailListData)) {
  	optimisticData.push(optimisticPersonalDetailListData);
  	}
  	return {
  	params: {
  	iouReportID: optimisticIOUReport.reportID,
  	chatReportID: chatReport.reportID,
  	reportActionID: optimisticIOUReportAction.reportActionID,
  	paymentMethodType,
  	transactionID: optimisticTransaction.transactionID,
  	newIOUReportDetails,
  	createdReportActionID: isNewChat ? optimisticCreatedActionForChat.reportActionID : undefined,
  	reportPreviewReportActionID: reportPreviewAction.reportActionID,
  	createdIOUReportActionID: optimisticCreatedActionForIOUReport.reportActionID,
  	transactionThreadReportID: optimisticTransactionThread.reportID,
  	createdReportActionIDForThread: optimisticCreatedActionForTransactionThread?.reportActionID,
  	},
  	optimisticData,
  	successData,
  	failureData,
  	};
  	}

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

• Set isOptimisticAction to null in success data and failure data for the preview action.
  

  App/src/libs/actions/IOU.ts

  Lines 8681 to 8689 in 9ce95b7

  	onyxMethod: Onyx.METHOD.MERGE,
  	key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${chatReport.reportID}`,
  	value: {
  	[reportPreviewAction.reportActionID]: {
  	pendingAction: null,
  	childLastActorAccountID: reportPreviewAction.childLastActorAccountID,
  	},
  	},
  	},

• We should also check for other actions and set isOptimisticAction in success data and failure data if missing.
• We should specially check for the optimistic actions which are created using util functions like buildOptimisticReportPreview.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A

What alternative solutions did you explore? (Optional)

Result

[NJ-2020]

Proposal

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

Chat - Payment preview is displayed grayed out everytime internet connection is lost

What is the root cause of that problem?

When we pay the expense, we set the report action preview isOptimisticAction to true inside the optimisticData

App/src/libs/actions/IOU.ts

Lines 9415 to 9416 in 4d7d44a

	function sendMoneyElsewhere(report: OnyxEntry<OnyxTypes.Report>, amount: number, currency: string, comment: string, managerID: number, recipient: Participant) {
	const {params, optimisticData, successData, failureData} = getSendMoneyParams(report, amount, currency, comment, CONST.IOU.PAYMENT_TYPE.ELSEWHERE, managerID, recipient);

App/src/libs/actions/IOU.ts

Line 8448 in 4d7d44a

function getSendMoneyParams(

App/src/libs/actions/IOU.ts

Line 8507 in 4d7d44a

const reportPreviewAction = buildOptimisticReportPreview(chatReport, optimisticIOUReport);

App/src/libs/ReportUtils.ts

Line 6827 in 4d7d44a

isOptimisticAction: true,

But we didn't set back to null in the success and failure data

App/src/libs/actions/IOU.ts

Lines 8681 to 8688 in 4d7d44a

	onyxMethod: Onyx.METHOD.MERGE,
	key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${chatReport.reportID}`,
	value: {
	[reportPreviewAction.reportActionID]: {
	pendingAction: null,
	childLastActorAccountID: reportPreviewAction.childLastActorAccountID,
	},
	},

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

We should set to null here inside the success and failure data

App/src/libs/actions/IOU.ts

Lines 8681 to 8688 in 4d7d44a

	onyxMethod: Onyx.METHOD.MERGE,
	key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${chatReport.reportID}`,
	value: {
	[reportPreviewAction.reportActionID]: {
	pendingAction: null,
	childLastActorAccountID: reportPreviewAction.childLastActorAccountID,
	},
	},

App/src/libs/actions/IOU.ts

Line 8692 in 4d7d44a

const failureData: OnyxUpdate[] = [

{
    onyxMethod: Onyx.METHOD.MERGE,
    key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${chatReport.reportID}`,
    value: {
        [reportPreviewAction.reportActionID]: {
            ...
            isOptimisticAction: false
        },
    },
},

We should check for other actions also

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

Create a new test case inside tests/actions/Report.ts and make sure isOptimisticAction is set to null after paying the expense (offline -> online)

What alternative solutions did you explore? (Optional)

[melvin-bot]

@JmillsExpensify Huh... This is 4 days overdue. Who can take care of this?

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021960638377598210469

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @parasharrajat (External)