Expense - "Try it out" button is not functional

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 9.1.5-0
Reproducible in staging?: Y
Reproducible in production?: Unable to check in Prod, new feature
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Log in with a new Expensifail account
3. Go to FAB
4. Click Create expense
5. Wait for scan tooltip to appear
6. Click "Try it out"

Expected Result:

"Try it out" button will be functional

Actual Result:

"Try it out" button is not functional

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6752990_1740430682585.20250225_045639.mp4

View all open jobs on GitHub

[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.

[melvin-bot]

Triggered auto assignment to @yuwenmemon (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[melvin-bot]

💬 A slack conversation has been started in #expensify-open-source

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[yuwenmemon]

This is under beta, so I'm unsure if it needs to be a blocker. It's definitely coming from #56759 cc @grgia @kubabutkiewicz @DylanDylann

[DylanDylann]

We haven't implemented it

[DylanDylann]

cc @kubabutkiewicz

[daledah]

Proposal

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

"Try it out" button is not functional

What is the root cause of that problem?

We don't handle onPress actions in these buttons:

App/src/components/ProductTrainingContext/index.tsx

Line 220 in eaa3be4

<Button

App/src/components/ProductTrainingContext/index.tsx

Line 225 in eaa3be4

<Button

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

1. Update this function so that it can receive onConfirm param:

App/src/components/ProductTrainingContext/index.tsx

Line 162 in eaa3be4

const useProductTrainingContext = (tooltipName: ProductTrainingTooltipName, shouldShow = true) => {

const useProductTrainingContext = (tooltipName: ProductTrainingTooltipName, shouldShow = true, onConfirm = () => {}) => {

Then use the onConfirm function in:

App/src/components/ProductTrainingContext/index.tsx

Lines 220 to 228 in eaa3be4

	<Button
	success
	text={translate('productTrainingTooltip.scanTestTooltip.tryItOut')}
	style={[styles.flex1, styles.ph1]}
	/>
	<Button
	text={translate('productTrainingTooltip.scanTestTooltip.noThanks')}
	style={[styles.flex1, styles.ph1]}
	/>

                        <Button
                            success
                            text={translate('productTrainingTooltip.scanTestTooltip.tryItOut')}
                            style={[styles.flex1, styles.ph1]}
                            onPress={() => {
                                onConfirm?.();
                                hideProductTrainingTooltip();
                            }}
                        />
                        <Button
                            text={translate('productTrainingTooltip.scanTestTooltip.noThanks')}
                            style={[styles.flex1, styles.ph1]}
                            onPress={hideProductTrainingTooltip}
                        />

2. Pass the onPress param in TabSelectorItem:

App/src/components/TabSelector/TabSelectorItem.tsx

Line 58 in eaa3be4

const {shouldShowProductTrainingTooltip, renderProductTrainingTooltip} = useProductTrainingContext(CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.SCAN_TEST_TOOLTIP, shouldShowTestReceiptTooltip);

    const {shouldShowProductTrainingTooltip, renderProductTrainingTooltip} = useProductTrainingContext(CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.SCAN_TEST_TOOLTIP, shouldShowTestReceiptTooltip, onPress);

3. Update the condition for displaying the tooltip, as the current logic doesn’t seem appropriate. Right now, the tooltip encourages users to use the scan feature even when they are already in the scan tab. We should adjust the condition so that the tooltip only appears when users are in other tabs, such as Manual or Distance:

App/src/components/TabSelector/TabSelector.tsx

Lines 79 to 80 in eaa3be4

	const shouldShowTestReceiptTooltip =
	route.name === CONST.TAB_REQUEST.SCAN && isActive && !getIsUserSubmittedExpenseOrScannedReceipt() && Permissions.canUseManagerMcTest(betas);

                    route.name === CONST.TAB_REQUEST.SCAN && !isActive && !getIsUserSubmittedExpenseOrScannedReceipt() && Permissions.canUseManagerMcTest(betas);

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)

Demo

Screen.Recording.2025-02-25.at.12.00.19.mov

[yuwenmemon]

Cool! Closing this out then, since this is expected.