[Due for payment 2025-05-13] [$250] Track expense - "Test receipt" is present to replace the current receipt, but replace fails

[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.1.17-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: Exp
Email or phone of affected tester (no customers): applausetester+2239023@applause.expensifail.com
Issue reported by: Applause Internal Team
Device used: Mac 15.3 / Chrome
App Component: Money Requests

Action Performed:

Precondition:

• User is logged in to a new Expensifail account.
• Account has self DM (please try Create an unreported expense on OD to trigger self DM in ND).

1. Go to staging.new.expensify.com
2. Go to self DM.
3. Click + > Create expense > Manual.
4. Enter amount > Next.
5. On the confirmation page, click 3-dot menu > Add receipt.
6. When the receipt tooltip shows up, do not interact with it.
7. Click Choose file.
8. Add a receipt and submit the expense.
9. Go to transaction thread.
10. Click on the receipt.
11. Click 3-dot menu > Replace.
12. Click Try it out on the scan tooltip.
13. Go back to self DM.
14. Go to transaction thread again.

Expected Result:

In Step 12, the scan tooltip should not appear for existing expense.

Actual Result:

In Step 12, the scan tooltip appears for existing expense.
In Step 14, after user chooses to try out with the test receipt (in Step 12) and reopens the transaction thread, the test receipt reverts to the original receipt.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6779031_1742646504832.20250322_202007.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021904195565612825251
• Upwork Job ID: 1904195565612825251
• Last Price Increase: 2025-04-21
• Automatic offers:
• linhvovan29546 | Contributor | 107021663

Issue Owner

Current Issue Owner: @isabelastisser

[melvin-bot]

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

[linhvovan29546]

🚨 Edited by proposal-police: This proposal was edited at 2025-03-23 11:52:20 UTC.

Proposal

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

Track expense - "Test receipt" is present to replace the current receipt, but replace fails

What is the root cause of that problem?

The tooltip display condition currently allows it to appear on both the SCREENS.MONEY_REQUEST.CREATE and the standalone SCREENS.MONEY_REQUEST.STEP_SCAN page. However, as far as I know, we only want the tooltip to appear below the tab bar on the SCREENS.MONEY_REQUEST.CREATE page, not on the STEP_SCAN page. So, the current condition is incorrect.

App/src/pages/iou/request/step/IOURequestStepScan/index.tsx

Line 586 in 8deddfa

!getIsUserSubmittedExpenseOrScannedReceipt() && Permissions.canUseManagerMcTest(betas) && isTabActive,

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

We need to update the tooltip condition so that it is only displayed on the SCREENS.MONEY_REQUEST.CREATE page. We can use Onyx data to determine whether the SCAN tab is selected. Then, we update the tooltip render condition accordingly.

        const [selectedTab] = useOnyx(`${ONYXKEYS.COLLECTION.SELECTED_TAB}${CONST.TAB.IOU_REQUEST_TYPE}`);
        const isTabSelected=selectedTab===CONST.TAB_REQUEST.SCAN

Update the tooltip condition inside IOURequestStepScan

App/src/pages/iou/request/step/IOURequestStepScan/index.tsx

Lines 584 to 586 in 8deddfa

	const {shouldShowProductTrainingTooltip, renderProductTrainingTooltip} = useProductTrainingContext(
	CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.SCAN_TEST_TOOLTIP,
	!getIsUserSubmittedExpenseOrScannedReceipt() && Permissions.canUseManagerMcTest(betas) && isTabActive,

  const {shouldShowProductTrainingTooltip, renderProductTrainingTooltip} = useProductTrainingContext(
        CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.SCAN_TEST_TOOLTIP,
        !getIsUserSubmittedExpenseOrScannedReceipt() && Permissions.canUseManagerMcTest(betas) && isTabActive && isTabSelected, // Updated condition

Note: We need to handle this similarly for the native.

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

We can update the ProductTrainingContextProvider test to write unit test for this case

What alternative solutions did you explore? (Optional)

Introduce a new prop shouldShowTooltip to control tooltip visibility. The tooltip will be displayed if this flag is true. In this case, the flag is set to true when the component is rendered in the IOURequestStartPage.

1. Pass the new prop in IOURequestStartPage
   

   App/src/pages/iou/request/IOURequestStartPage.tsx

   Line 176 in 8deddfa

   <IOURequestStepScan

                                            <IOURequestStepScan
...
                                                shouldShowTooltip
                                            />

2. Update the tooltip condition inside IOURequestStepScan accordingly.

const {shouldShowProductTrainingTooltip, renderProductTrainingTooltip} = useProductTrainingContext( 
    CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.SCAN_TEST_TOOLTIP, 
    !getIsUserSubmittedExpenseOrScannedReceipt() && Permissions.canUseManagerMcTest(betas) && isTabActive && shouldShowTooltip, 

We can also display the tooltip if the action is 'create'.

App/src/pages/iou/request/step/IOURequestStepScan/index.tsx

Line 586 in 8deddfa

!getIsUserSubmittedExpenseOrScannedReceipt() && Permissions.canUseManagerMcTest(betas) && isTabActive,

const {shouldShowProductTrainingTooltip, renderProductTrainingTooltip} = useProductTrainingContext(
        CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.SCAN_TEST_TOOLTIP,
        !getIsUserSubmittedExpenseOrScannedReceipt() && Permissions.canUseManagerMcTest(betas) && isTabActive && action === CONST.IOU.ACTION.CREATE, // Updated condition

[Krishna2323]

Proposal

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

Track expense - "Test receipt" is present to replace the current receipt, but replace fails

What is the root cause of that problem?

• We only call dismissProductTraining(CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.SCAN_TEST_TOOLTIP, true) when we dismiss the tooltip. So when we create the expense, isDismissed remains false and tooltip is shown again.

App/src/pages/iou/request/step/IOURequestStepScan/index.tsx

Lines 584 to 593 in 8deddfa

	const {shouldShowProductTrainingTooltip, renderProductTrainingTooltip} = useProductTrainingContext(
	CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.SCAN_TEST_TOOLTIP,
	!getIsUserSubmittedExpenseOrScannedReceipt() && Permissions.canUseManagerMcTest(betas) && isTabActive,
	{
	onConfirm: setTestReceiptAndNavigate,
	onDismiss: () => {
	dismissProductTraining(CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.SCAN_TEST_TOOLTIP, true);
	},
	},
	);

App/src/components/ProductTrainingContext/index.tsx

Line 104 in 8deddfa

const isDismissed = isProductTrainingElementDismissed(tooltipName, dismissedProductTraining);

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

• We should get hideProductTrainingTooltip() from useProductTrainingContext and call it inside setReceiptAndNavigate and onConfirm.

    const {shouldShowProductTrainingTooltip, renderProductTrainingTooltip, hideProductTrainingTooltip} = useProductTrainingContext(
        CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.SCAN_TEST_TOOLTIP,
        !getIsUserSubmittedExpenseOrScannedReceipt() && Permissions.canUseManagerMcTest(betas) && isTabActive,
        {
            onConfirm: () => {
                setTestReceiptAndNavigate();
                hideProductTrainingTooltip();
            },
            onDismiss: () => {
                dismissProductTraining(CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.SCAN_TEST_TOOLTIP, true);
            },
        },
    );

    /**
     * Sets the Receipt objects and navigates the user to the next page
     */
    const setReceiptAndNavigate = (originalFile: FileObject, isPdfValidated?: boolean) => {
        hideProductTrainingTooltip();
        validateReceipt(originalFile, setUploadReceiptError).then((isFileValid) => {
            if (!isFileValid) {
                return;
            }

• The same should be done in native file.

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

• We can add a test case (SCAN_TEST_TOOLTIP) for this inside ProductTrainingContextProvider .

What alternative solutions did you explore? (Optional)

• We can call hideProductTrainingTooltip when calling createTransaction inside IOURequestStepConfirmation. Also, we can use if(receiptFile) to only call it when there is a receipt file.
  

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

  Lines 542 to 548 in 8deddfa

  	const createTransaction = useCallback(
  	(selectedParticipants: Participant[], locationPermissionGranted = false) => {
  	setIsConfirmed(true);
  	let splitParticipants = selectedParticipants;
  	// Filter out participants with an amount equal to O
  	if (iouType === CONST.IOU.TYPE.SPLIT && transaction?.splitShares) {

Result

[melvin-bot]

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

[melvin-bot]

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

[huult]

🚨 Edited by proposal-police: This proposal was edited at 2025-04-14 08:56:49 UTC.

Proposal

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

"Test receipt" is present to replace the current receipt, but replace fails

What is the root cause of that problem?

Based on the current logic, the scan test tooltip is only dismissed for future sessions when the user clicks 'No thanks' to trigger the dismissal. So if we not create an expense yet and replace the receipt, shouldShowProductTrainingTooltip remains true, causing the scan test tooltip to appear again.

App/src/pages/iou/request/step/IOURequestStepScan/index.tsx

Lines 584 to 593 in 9bf082a

	const {shouldShowProductTrainingTooltip, renderProductTrainingTooltip} = useProductTrainingContext(
	CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.SCAN_TEST_TOOLTIP,
	!getIsUserSubmittedExpenseOrScannedReceipt() && Permissions.canUseManagerMcTest(betas) && isTabActive,
	{
	onConfirm: setTestReceiptAndNavigate,
	onDismiss: () => {
	dismissProductTraining(CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.SCAN_TEST_TOOLTIP);
	},
	},
	);

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

To resolve this issue, we just need to update the logic for displaying the scan test tooltip. If shouldShowProductTrainingTooltip is true and the case is replacing a receipt, we should hide the tooltip. The implementation can be done as shown below:

App/src/pages/iou/request/step/IOURequestStepScan/index.tsx

Line 879 in 9bf082a

shouldRender={shouldShowProductTrainingTooltip}

update to:

shouldRender={shouldShowProductTrainingTooltip && !backTo}

or

shouldRender={shouldShowProductTrainingTooltip && !transaction?.filename}

Screen.Recording.2025-04-14.at.22.49.47.mp4

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

None

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.

I think the test tooltip should only be shown when there is a tab. So, if we open 'Add Receipt' without a tab, we don't need to show the test tooltip. To implement this, we can do something like this:

1 Introdue new prop for this componennt:

App/src/pages/iou/request/step/IOURequestStepScan/index.tsx

Line 82 in 1619eb5

currentUserPersonalDetails,

isTabBarVisiblefunction IOURequestStepScan({
    report,
    route: {
        params: {action, iouType, reportID, transactionID, backTo},
    },
    transaction,
    currentUserPersonalDetails,
    isTabBarVisible, // add this
}: Omit<IOURequestStepScanProps, 'user'>) {

And we check if isTabBarVisible is true, then show the test tooltip

App/src/pages/iou/request/step/IOURequestStepScan/index.tsx

Line 886 in 1619eb5

shouldRender={shouldShowProductTrainingTooltip}

shouldRender={shouldShowProductTrainingTooltip && !!isTabBarVisible}

2. We enable isTabBarVisible in IOURequestStepScan from IOURequestStartPage to show the test tooltip when the tab is visible.

App/src/pages/iou/request/IOURequestStartPage.tsx

Lines 174 to 177 in 4a286aa

	<IOURequestStepScan
	route={route}
	navigation={navigation}
	/>

  <IOURequestStepScan
      route={route}
      navigation={navigation}
      isTabBarVisible // add this
  />

Note: apply same solution for native

After the fix, make sure it’s consistent with other places.

Screen.Recording.2025-04-15.at.10.54.18.mp4