Time - Category and Reimbursable disappear after changing report and reopening confirm page

[mitarachim]

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.3.11-17
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: #79780
Email or phone of affected tester (no customers): applausetester+s2d2d@applause.expensifail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Mac 26.1 / Chrome
App Component: Money Requests

Action Performed:

Precondition:

• Log in with Expensifail account.
• Create two workspaces - A and B.
• Time tracking is enabled in both workspaces.

1. Go to staging.new.expensify.com
2. Go to workspace chat A.
3. Create a report.
4. Go to workspace chat B.
5. Create a report.
6. Open FAB > Create expense > Time.
7. Select workspace A.
8. Enter amount > Next.
9. On confirm page, click Report.
10. Select report from workspace chat B.
11. On confirm page, click RHP back button.
12. Click Next to proceed to confirm page.

Expected Result:

Category field and Reimbursable toggle will not disappear.

Actual Result:

Category field and Reimbursable toggle disappear after changing report from another workspace and reopening confirm page.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug7063608_1769959827613.28.mp4

View all open jobs on GitHub

[daledah]

Proposal

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

Category field and Reimbursable toggle disappear after changing report from another workspace and reopening confirm page when creating a Time expense.

What is the root cause of that problem?

Category field and Reimbursable toggle disappear after changing report from another workspace and reopening confirm page.

In IOURequestStepConfirmation.tsx, the realPolicyID is calculated using initialTransaction and reportReal instead of the transaction (draft/optimistic transaction):

App/src/pages/iou/request/step/IOURequestStepConfirmation.tsx

Line 158 in bfc6781

const realPolicyID = isCreatingTrackExpense || isUnreported ? policyForMovingExpensesID : getIOURequestPolicyID(initialTransaction, reportReal);

const realPolicyID = isCreatingTrackExpense || isUnreported ? policyForMovingExpensesID : getIOURequestPolicyID(initialTransaction, reportReal);

When user changes the report to another workspace:

1. handleGlobalCreateReport in IOURequestStepReport.tsx calls setTransactionReport to update the draft transaction with new participants containing the new policyID
2. However, realPolicyID in IOURequestStepConfirmation.tsx is still calculated from initialTransaction (the old transaction from HOC) and reportReal (the old report from route params)
3. This causes policy and policyCategories in IOURequestStepConfirmation to be from the OLD workspace
4. Meanwhile, policyID passed to MoneyRequestConfirmationList is correctly calculated from transaction (draft transaction) - which is the NEW workspace

This mismatch causes:

• MoneyRequestConfirmationList loads policy and policyCategories from the NEW workspace
• If the new workspace doesn't have categories enabled or has different policy settings, shouldShowCategories becomes false
• Similarly, shouldShowReimbursable depends on policy?.disabledFields?.reimbursable from the new workspace

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

Update realPolicyID calculation to use transaction (draft/optimistic transaction) instead of initialTransaction, so that when user changes workspace, the policy-related data is correctly loaded from the new workspace:

- const realPolicyID = isCreatingTrackExpense || isUnreported ? policyForMovingExpensesID : getIOURequestPolicyID(initialTransaction, reportReal);
+ const realPolicyID = isCreatingTrackExpense || isUnreported ? policyForMovingExpensesID : getIOURequestPolicyID(transaction, reportReal);

What alternative solutions did you explore? (Optional)

N/A

[samranahm]

Proposal

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

Time - Category and Reimbursable disappear after changing report and reopening confirm page

What is the root cause of that problem?

when the user had changed the report and then came back to the confirm page, we forced report to undefined instead of using the transaction’s chosen report, which broke policy resolution and hid Category and Reimbursable.

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

n IOURequestStepConfirmation.tsx, the report useMemo was updated so that when the transaction’s report differs from the route but the transaction does have a report, we use the transaction’s report instead of returning undefined

When the user has changed the report and then reopens the confirm page, use the transaction's report so that Category and Reimbursable are shown for the correct workspace's policy instead of disappearing.

if (isTransactionReportDifferentFromRoute && transactionReport) {
    return transactionReport;
}

here

App/src/pages/iou/request/step/IOURequestStepConfirmation.tsx

Lines 188 to 190 in cd96f78

	if (isTransactionReportDifferentFromRoute) {
	return undefined;
	}

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.

[Burhan-Rashid]

Proposal

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

Time - Category and Reimbursable disappear after changing report and reopening confirm page

What is the root cause of that problem?

When the user changes the report in the confirmation page, we set the new reportId (of other workspace) in the draft transaction and also update the route in the confirmation page with the new reportId. But when the user presses the back button, he is taken to the previous screen, where the reportId in the route is old reportId (initial reportId of the first selected workspace ) and when the user presses the next button again, we directly navigate to the confirmation page with the old reportId from the route.

App/src/pages/iou/request/step/IOURequestStepHours.tsx

Line 128 in e8e0bf3

Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_CONFIRMATION.getRoute(CONST.IOU.ACTION.CREATE, iouType, transactionID, reportID));

which causes mismatch between the reportId of the route and the actual reportId that is present in the draft transaction.
Which cause the value of the report to be undefined here as isTransactionReportDifferentFromRoute is true:

App/src/pages/iou/request/step/IOURequestStepConfirmation.tsx

Lines 181 to 193 in e8e0bf3

	const report = useMemo(() => {
	if (isUnreported) {
	return undefined;
	}
	if (shouldUseTransactionReport) {
	return transactionReport;
	}
	if (isTransactionReportDifferentFromRoute) {
	return undefined;
	}
	return reportWithDraftFallback;
	}, [isUnreported, shouldUseTransactionReport, transactionReport, reportWithDraftFallback, isTransactionReportDifferentFromRoute]);

Which makes policyID as undefined here as getIOURequestPolicyID returns undefined for undefined report :

App/src/pages/iou/request/step/IOURequestStepConfirmation.tsx

Line 195 in e8e0bf3

const policyID = isCreatingTrackExpense || isUnreported ? policyForMovingExpensesID : getIOURequestPolicyID(transaction, report);

Which makes the reimbursible toggle to not show as policyID and policy is undefined:

App/src/components/MoneyRequestConfirmationListFooter.tsx

Lines 387 to 388 in e8e0bf3

	const shouldShowReimbursable =
	(isPolicyExpenseChat || isTrackExpense) && !!policy && policy?.disabledFields?.reimbursable !== true && !isManagedCardTransaction(transaction) && !isTypeInvoice;

Since the policyId is undefined, the policycategories can't be fetched from undefined policyId, which makes categories to not show here:

App/src/components/MoneyRequestConfirmationList.tsx

Line 275 in e8e0bf3

const [policyCategoriesReal] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${policyID}`, {canBeMissing: true});

App/src/components/MoneyRequestConfirmationList.tsx

Lines 365 to 367 in e8e0bf3

	const shouldShowCategories = isTrackExpense
	? !policy || shouldSelectPolicy || hasEnabledOptions(Object.values(policyCategories ?? {}))
	: (isPolicyExpenseChat || isTypeInvoice) && (!!iouCategory || hasEnabledOptions(Object.values(policyCategories ?? {})));

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

When the user presses the next button in IOURequestStepHours page, we need to check if we are using draft transaction and if we already have the reportId present in the draft transaction then navigate to the confirmation page using the reportId of the draft transaction instead of using the reportId from the route.
For that we can make the following changes here:

App/src/pages/iou/request/step/IOURequestStepHours.tsx

Lines 58 to 59 in e8e0bf3

	const {translate} = useLocalize();

...
    const [draftTransaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${transactionID}`, {canBeMissing: true});

And here:

App/src/pages/iou/request/step/IOURequestStepHours.tsx

Line 128 in e8e0bf3

Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_CONFIRMATION.getRoute(CONST.IOU.ACTION.CREATE, iouType, transactionID, reportID));

const reportIDToNavigate = isTransactionDraft && draftTransaction?.participants?.length > 0 ? (draftTransaction?.participants?.at(0)?.reportID ?? reportID) : reportID;
Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_CONFIRMATION.getRoute(CONST.IOU.ACTION.CREATE, iouType, transactionID, reportIDToNavigate));

Note: We are already using this approach for handling similar cases for normal expenses and also for time expenses for this use case here:

App/src/pages/iou/request/step/IOURequestStepHours.tsx

Lines 111 to 127 in e8e0bf3

	if (explicitPolicyID) {
	const policyExpenseChat = getPolicyExpenseChat(accountID, policyID);
	if (!policyExpenseChat) {
	console.error(`Couldn't find policy expense chat for policyID: ${policyID}`);
	return;
	}
	setTransactionReport(transactionID, {reportID: policyExpenseChat.reportID}, isTransactionDraft);
	setMoneyRequestParticipantsFromReport(transactionID, policyExpenseChat, accountID);
	return Navigation.setNavigationActionToMicrotaskQueue(() =>
	Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_CONFIRMATION.getRoute(CONST.IOU.ACTION.CREATE, iouType, transactionID, policyExpenseChat.reportID)),
	);
	}
	setMoneyRequestParticipantsFromReport(transactionID, report, accountID);
	}

And here:

App/src/pages/iou/request/step/IOURequestStepAmount.tsx

Lines 313 to 333 in e8e0bf3

	if (isReturningFromConfirmationPage) {
	const firstParticipant = transaction?.participants?.at(0);
	const isP2PChat = isParticipantP2P(firstParticipant);
	const isNegativeAmount = convertToBackendAmount(Number.parseFloat(amount)) < 0;
	// P2P chats don't support negative amounts, so reset to default workspace when amount is negative.
	if (isP2PChat && isNegativeAmount) {
	resetToDefaultWorkspace();
	return;
	}
	// Preserve user's participant selection to avoid forcing them back to default workspace.
	const iouReportID = transaction?.reportID;
	const selectedReport = iouReportID ? getReportOrDraftReport(iouReportID) : null;
	const navigationIOUType = isSelfDM(selectedReport) ? CONST.IOU.TYPE.TRACK : CONST.IOU.TYPE.SUBMIT;
	const chatReportID = selectedReport?.chatReportID ?? iouReportID;
	Navigation.setNavigationActionToMicrotaskQueue(() => {
	Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_CONFIRMATION.getRoute(CONST.IOU.ACTION.CREATE, navigationIOUType, transactionID, chatReportID));
	});
	} else {

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.