[Awaiting checklist] [$250] Expense - Tax details missing in confirmation page and briefly disappear in individual expense

[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.1.13-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Yes, reproducible on both
If this was caught during regression testing, add the test name, ID and link from TestRail: N
Email or phone of affected tester (no customers): Slottwo1+reek@gmail.com
Issue reported by: Applause Internal Team
Device used: Redminote 10s android 13
App Component: Money Requests

Action Performed:

1. Launch app
2. Go to workspace settings > enable tax
3. Tap tax > settings
4. Set tax rate 5% for workspace & foreign currency
5. Open workspace chat
6. Create a distance split expense
7. Note in confirmation page, no tax details are shown
8. Complete the flow
9. Immediately open the individual expense, note tax details shown brief and disappeared
10. Open the split expense > show more
11. Note tax section is displayed

Expected Result:

Tax details should be consistently displayed in both preview & the confirmation page and in individual expense without disappearing.

Actual Result:

In the confirmation page of the distance split expense, no tax details are shown.

After completing the flow, opening the individual expense shows tax details briefly before they disappear.

In the split expense, tapping "Show More" displays the tax section.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6770345_1741929484559.Screenrecorder-2025-03-14-10-28-20-639.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021900859504077109605
• Upwork Job ID: 1900859504077109605
• Last Price Increase: 2025-03-15

Issue Owner

Current Issue Owner: @fedirjh

[melvin-bot]

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

[bernhardoj]

Proposal

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

The tax field appears briefly on the transaction page and also appears on the split bill details page, even though the distance tax tracking is disabled.

What is the root cause of that problem?

For the transaction page field, we already check whether the distance tax tracking is enabled or not before showing the tax field.

App/src/components/ReportActionItem/MoneyRequestView.tsx

Line 219 in ebbc565

const shouldShowTax = isTaxTrackingEnabled(isPolicyExpenseChat, policy, isDistanceRequest, isPerDiemRequest);

However, isDistanceRequest is false. isDistanceRequest checks for iouRequestType or the comment type and custom unit, but none of those are available.

App/src/libs/TransactionUtils/index.ts

Lines 131 to 141 in ebbc565

	function isDistanceRequest(transaction: OnyxEntry<Transaction>): boolean {
	// This is used during the expense creation flow before the transaction has been saved to the server
	if (lodashHas(transaction, 'iouRequestType')) {
	return transaction?.iouRequestType === CONST.IOU.REQUEST_TYPE.DISTANCE;
	}
	// This is the case for transaction objects once they have been saved to the server
	const type = transaction?.comment?.type;
	const customUnitName = transaction?.comment?.customUnit?.name;
	return type === CONST.TRANSACTION.TYPE.CUSTOM_UNIT && customUnitName === CONST.CUSTOM_UNITS.NAME_DISTANCE;
	}

When we create the optimistic transaction, we don't include those fields. iouRequestType is supposed to be available for optimistic transaction. After the transaction is created, then we have the custom unit.

App/src/libs/actions/IOU.ts

Lines 5428 to 5443 in ebbc565

	const oneOnOneTransaction = buildOptimisticTransaction({
	originalTransactionID: splitTransaction.transactionID,
	transactionParams: {
	amount: isExpenseReport(oneOnOneIOUReport) ? -splitAmount : splitAmount,
	currency,
	reportID: oneOnOneIOUReport.reportID,
	comment,
	created,
	merchant: merchant || Localize.translateLocal('iou.expense'),
	category,
	tag,
	taxCode,
	taxAmount: isExpenseReport(oneOnOneIOUReport) ? -splitTaxAmount : splitTaxAmount,
	billable,
	source: CONST.IOU.TYPE.SPLIT,
	},

For the split bill details RHP page, the isDistanceRequest is undefined.

App/src/components/MoneyRequestConfirmationList.tsx

Line 280 in ebbc565

const shouldShowTax = isTaxTrackingEnabled(isPolicyExpenseChat, policy, isDistanceRequest, isPerDiemRequest);

That's because we simply don't pass the isDistanceRequest value.

App/src/pages/iou/SplitBillDetailsPage.tsx

Lines 112 to 141 in ebbc565

	<MoneyRequestConfirmationList
	payeePersonalDetails={payeePersonalDetails}
	selectedParticipants={participantsExcludingPayee}
	iouAmount={splitAmount ?? 0}
	iouCurrencyCode={splitCurrency}
	iouComment={Parser.htmlToMarkdown(splitComment ?? '')}
	iouCreated={splitCreated}
	shouldDisplayReceipt
	iouMerchant={splitMerchant}
	iouCategory={splitCategory}
	iouIsBillable={splitBillable}
	iouType={CONST.IOU.TYPE.SPLIT}
	isReadOnly={!isEditingSplitBill}
	shouldShowSmartScanFields
	receiptPath={transaction?.receipt?.source}
	receiptFilename={transaction?.filename}
	isEditingSplitBill={isEditingSplitBill}
	hasSmartScanFailed={hasSmartScanFailed}
	reportID={reportID}
	reportActionID={reportAction?.reportActionID}
	transaction={isEditingSplitBill && draftTransaction ? draftTransaction : transaction}
	onConfirm={onConfirm}
	isPolicyExpenseChat={isPolicyExpenseChat(report)}
	policyID={isPolicyExpenseChat(report) ? report?.policyID : undefined}
	action={isEditingSplitBill ? CONST.IOU.ACTION.EDIT : CONST.IOU.ACTION.CREATE}
	onToggleBillable={(billable) => {
	setDraftSplitTransaction(transaction?.transactionID, {billable});
	}}
	isConfirmed={isConfirmed}
	/>

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

For the first issue, if we see the money request logic, if it's a distance request, we merge the transaction draft with the new optimistic transaction, so iouRequestType will be available.

App/src/libs/actions/IOU.ts

Lines 2784 to 2792 in ebbc565

	// If there is an existing transaction (which is the case for distance requests), then the data from the existing transaction
	// needs to be manually merged into the optimistic transaction. This is because buildOnyxDataForMoneyRequest() uses `Onyx.set()` for the transaction
	// data. This is a big can of worms to change it to `Onyx.merge()` as explored in https://expensify.slack.com/archives/C05DWUDHVK7/p1692139468252109.
	// I want to clean this up at some point, but it's possible this will live in the code for a while so I've created https://github.com/Expensify/App/issues/25417
	// to remind me to do this.
	if (isDistanceRequest) {
	optimisticTransaction = fastMerge(existingTransaction, optimisticTransaction, false);
	}

For the split case, we already merge it, but only with the split transaction, not the 1:1 transaction.

App/src/libs/actions/IOU.ts

Lines 5207 to 5210 in ebbc565

	// Important data is set on the draft distance transaction, such as the iouRequestType marking it as a distance request, so merge it into the optimistic split transaction
	if (isDistanceRequest) {
	splitTransaction = fastMerge(existingTransaction, splitTransaction, false);
	}

So, we need to do the same.

if (isDistanceRequest) {
    oneOnOneTransaction = fastMerge(existingTransaction, oneOnOneTransaction, false);
}

For the second issue, pass isDistanceRequest value to the component.

App/src/pages/iou/SplitBillDetailsPage.tsx

Lines 112 to 116 in ebbc565

	<MoneyRequestConfirmationList
	payeePersonalDetails={payeePersonalDetails}
	selectedParticipants={participantsExcludingPayee}
	iouAmount={splitAmount ?? 0}
	iouCurrencyCode={splitCurrency}

isDistanceRequest={isDistanceRequest(transaction)}

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

We can create a unit test for splitBill and make sure the transaction draft is merged with the individual transaction data. For SplitBillDetailsPage, it's just a matter of forgetting to pass a props, so I don't think a test is needed to make sure a props is passed, instead, we can just make the props required.

[melvin-bot]

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

[melvin-bot]

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

[fedirjh]

@bernhardoj's proposal looks good to me.

🎀 👀 🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @dangrous, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[dangrous]

Works for me!