[$250] Expense - Tooltip Try it out doesn't appeared

[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.2-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: https://test-management.browserstack.com/projects/2219752/folder/13176924/test-cases/41237588
Email or phone of affected tester (no customers): rybkina+011425new@gmail.com
Issue reported by: Applause Internal Team
Bug source: Regression TC Execution
Device used: MacOs 15.6.1
App Component: Other

Action Performed:

1. Launch App: Create a new account
2. Go through onboarding process Select Track and budget expenses
3. Open Global Create . Click Create expense (it should be on scan by default)
4. Click Try it out in the tool tip

Expected Result:

Tooltip to see how scan works should be appeared and have Try it out button.

Actual Result:

Tooltip Try it out doesn't appeared after create new account and go to Create expense.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug7049541_1768436413111.Screen_Recording_2026-01-14_at_18.04.49.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022011974216158401342
• Upwork Job ID: 2011974216158401342
• Last Price Increase: 2026-01-16

Issue Owner

Current Issue Owner: @eh2077

[melvin-bot]

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

[annaweber830]

Proposal

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

When a brand-new user goes through onboarding, opens Global Create → Create expense (Scan), and taps “Try it out” on the training tooltip, the expected follow-up tooltip/experience (“see how scan works”) does not appear, so the Scan onboarding/training flow is broken across platforms.

What is the root cause of that problem?

On first entry to the Create Expense flow, the UI defaults to the Scan tab, but selectedTab (loaded from Onyx) can be undefined initially. The tooltip is only eligible when selectedTab === SCAN, so the eligibility check fails even though the user is actually on the Scan tab.

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

Use an “active tab” value that falls back to the navigator’s default tab when selectedTab is missing:

• Define activeTab = selectedTab ?? defaultSelectedTab
• Use activeTab (instead of selectedTab) for:
  • Scan training tooltip eligibility
  • Any other behavior that depends on the current tab on this screen (e.g., Scan-only drag/drop enablement, Per Diem max height)
    

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

    Lines 127 to 132 in 8f123f4

    	if (shouldUseTab) {
    	if (selectedTab === CONST.TAB_REQUEST.PER_DIEM && !shouldShowPerDiemOption) {
    	return undefined;
    	}
    	return selectedTab;
    	}

const activeTab = selectedTab ?? defaultSelectedTab;
if (shouldUseTab) {
                if (activeTab === CONST.TAB_REQUEST.PER_DIEM && !shouldShowPerDiemOption) {
                    return undefined;
                }
                return activeTab;
            }

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

Lines 267 to 274 in 8f123f4

	<ScreenWrapper
	shouldEnableKeyboardAvoidingView={false}
	shouldEnableMaxHeight={selectedTab === CONST.TAB_REQUEST.PER_DIEM}
	shouldEnableMinHeight={canUseTouchScreen()}
	testID="IOURequestStartPage"
	focusTrapSettings={{containerElements: focusTrapContainerElements}}
	>
	<DragAndDropProvider isDisabled={selectedTab !== CONST.TAB_REQUEST.SCAN}>

<ScreenWrapper
                shouldEnableKeyboardAvoidingView={false}
                shouldEnableMaxHeight={activeTab === CONST.TAB_REQUEST.PER_DIEM}
                shouldEnableMinHeight={canUseTouchScreen()}
                testID="IOURequestStartPage"
                focusTrapSettings={{containerElements: focusTrapContainerElements}}
            >
                <DragAndDropProvider isDisabled={activeTab !== CONST.TAB_REQUEST.SCAN}>

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

Lines 234 to 249 in 8f123f4

	const {shouldShowProductTrainingTooltip, renderProductTrainingTooltip} = useProductTrainingContext(
	CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.SCAN_TEST_TOOLTIP,
	// The test receipt image is served via our server on web so it requires internet connection
	!getIsUserSubmittedExpenseOrScannedReceipt(nvpDismissedProductTraining) &&
	isBetaEnabled(CONST.BETAS.NEWDOT_MANAGER_MCTEST) &&
	selectedTab === CONST.TAB_REQUEST.SCAN &&
	!(isOffline && isWeb),
	{
	onConfirm: () => {
	setTestReceiptAndNavigateRef?.current?.();
	},
	onDismiss: () => {
	dismissProductTraining(CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.SCAN_TEST_TOOLTIP, true);
	},
	},
	);

const {shouldShowProductTrainingTooltip, renderProductTrainingTooltip} = useProductTrainingContext(
        CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.SCAN_TEST_TOOLTIP,
        // The test receipt image is served via our server on web so it requires internet connection
        !getIsUserSubmittedExpenseOrScannedReceipt(nvpDismissedProductTraining) &&
            activeTab === CONST.TAB_REQUEST.SCAN &&
            !(isOffline && isWeb),
        {
            onConfirm: () => {
                setTestReceiptAndNavigateRef?.current?.();
            },
            onDismiss: () => {
                dismissProductTraining(CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.SCAN_TEST_TOOLTIP, true);
            },
        },
    );

What alternative solutions did you explore? (Optional)

[paulnjs]

Proposal

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

Tooltip Try it out doesn't appeared after create new account and go to Create expense.

What is the root cause of that problem?

For the first time the user opens the create expense flow, lastSelectedTab is undefined and it's set the scan after the tab is loaded but this useEffect doesn't run again since lastSelectedTab is not a dependency

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

Lines 147 to 170 in fb1e667

	useEffect(() => {
	if (isLoadingSelectedTab || selectedTab) {
	return;
	}
	setSelectedTab(lastSelectedTab);
	// We only want to set the selected tab when selectedTab is not set yet, don't want to run this effect again when lastSelectedTab changes
	// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [isLoadingSelectedTab, selectedTab]);
	const navigateBack = () => {
	Navigation.closeRHPFlow();
	};
	const resetIOUTypeIfChanged = useCallback(
	(newIOUType: IOURequestType) => {
	Keyboard.dismiss();
	if (transaction?.iouRequestType === newIOUType) {
	return;
	}
	setIsMultiScanEnabled(false);
	initMoneyRequest({
	reportID,
	policy,
	personalPolicy,

It leads shouldShowProductTrainingTooltip to be false as selectedTab is undefined

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

Lines 234 to 240 in fb1e667

	const {shouldShowProductTrainingTooltip, renderProductTrainingTooltip} = useProductTrainingContext(
	CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.SCAN_TEST_TOOLTIP,
	// The test receipt image is served via our server on web so it requires internet connection
	!getIsUserSubmittedExpenseOrScannedReceipt(nvpDismissedProductTraining) &&
	isBetaEnabled(CONST.BETAS.NEWDOT_MANAGER_MCTEST) &&
	selectedTab === CONST.TAB_REQUEST.SCAN &&
	!(isOffline && isWeb),

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

We can add lastSelectedTab as the dependency here, and it doesn't cause the previous bug since we already return early if selectedTab is defined.

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

Lines 147 to 170 in fb1e667

	useEffect(() => {
	if (isLoadingSelectedTab || selectedTab) {
	return;
	}
	setSelectedTab(lastSelectedTab);
	// We only want to set the selected tab when selectedTab is not set yet, don't want to run this effect again when lastSelectedTab changes
	// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [isLoadingSelectedTab, selectedTab]);
	const navigateBack = () => {
	Navigation.closeRHPFlow();
	};
	const resetIOUTypeIfChanged = useCallback(
	(newIOUType: IOURequestType) => {
	Keyboard.dismiss();
	if (transaction?.iouRequestType === newIOUType) {
	return;
	}
	setIsMultiScanEnabled(false);
	initMoneyRequest({
	reportID,
	policy,
	personalPolicy,

What alternative solutions did you explore? (Optional)

N/A

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.

[melvin-bot]

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

[melvin-bot]

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

[KocaPepsi]

Proposal

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

The "Try it out" tooltip for the expense scan feature is not appearing for new users. This tooltip is supposed to help new users understand how to scan receipts by offering a test receipt interaction.

What is the root cause of that problem?

The root cause is that selectedTab state is initialized as undefined for new users, causing the tooltip visibility check selectedTab === CONST.TAB_REQUEST.SCAN to fail.

What is broken and why:

For a new user account:

1. The lastSelectedTab from Onyx is undefined (never been set before)
2. At line 79: const [selectedTab, setSelectedTab] = useState(lastSelectedTab); - selectedTab is initialized to undefined
3. At lines 147-154, a useEffect runs:

   useEffect(() => {
       if (isLoadingSelectedTab || selectedTab) {
           return;
       }
       setSelectedTab(lastSelectedTab);  // <-- undefined for new users!
   }, [isLoadingSelectedTab, selectedTab]);

4. This sets selectedTab to lastSelectedTab which is undefined for new users
5. The tooltip visibility check at line 239: selectedTab === CONST.TAB_REQUEST.SCAN
6. This evaluates to: undefined === 'SCAN' = false

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

Update the useEffect to use defaultSelectedTab as a fallback when lastSelectedTab is undefined.

Before code

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

Lines 147 to 154 in f0cdc57

	useEffect(() => {
	if (isLoadingSelectedTab || selectedTab) {
	return;
	}
	setSelectedTab(lastSelectedTab);
	// We only want to set the selected tab when selectedTab is not set yet, don't want to run this effect again when lastSelectedTab changes
	// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [isLoadingSelectedTab, selectedTab]);

After fix:

useEffect(() => {
    if (isLoadingSelectedTab || selectedTab) {
        return;
    }
    setSelectedTab(lastSelectedTab ?? defaultSelectedTab);
    // We only want to set the selected tab when selectedTab is not set yet, don't want to run this effect again when lastSelectedTab changes
    // eslint-disable-next-line react-hooks/exhaustive-deps
}, [isLoadingSelectedTab, selectedTab]);

What alternative solutions did you explore?

N/A

Demo:

1_1.mp4

[marufsharifi]

🚫 Duplicated proposal withdrawn by 🤖 ProposalPolice.

[github-actions]

⚠️ @marufsharifi Your proposal is a duplicate of an already existing proposal and has been automatically withdrawn to prevent spam. Please review the existing proposals before submitting a new one.