[$500] [HOLD for payment 2025-02-04] Make clicking an onboarding tooltip do the action that the tooltip is pointing to

[puneetlath]

Right now, clicking on our onboarding tooltips does nothing. Let's update this so that clicking on the tooltip does the action that the tooltip is pointing to that would cause it to be dismissed. For example, if the tooltip is pointing at the workspace chat and someone clicks on the tooltip, let's open the workspace chat. Or if the tooltip is pointing to the Global Create button and someone clicks on the tooltip, let's open the Global Create dialog.

Issue Owner

Current Issue Owner: @

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021886912858247277719
• Upwork Job ID: 1886912858247277719
• Last Price Increase: 2025-02-05

Issue Owner

Current Issue Owner: @kadiealexander

[melvin-bot]

Triggered auto assignment to @kadiealexander (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details. Please add this Feature request to a GH project, as outlined in the SO.

[melvin-bot]

⚠️ It looks like this issue is labelled as a New Feature but not tied to any GitHub Project. Keep in mind that all new features should be tied to GitHub Projects in order to properly track external CAP software time ⚠️

[melvin-bot]

Triggered auto assignment to Design team member for new feature review - @dannymcclain (NewFeature)

[daledah]

🚨 Edited by proposal-police: This proposal was edited at 2025-01-17 00:34:19 UTC.

Proposal

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

Make clicking an onboarding tooltip do the action that the tooltip is pointing to

What is the root cause of that problem?

It is new feature. Don't need root cause.

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

1. In here introduce an additional param, onPress = () => {}.

Then we wrap the renderProductTrainingTooltip here by

            <PressableWithFeedback
                onPress={() => {
                    onPress?.();
                    hideProductTrainingTooltip();
                }}
            >

2. When using the EducationalTooltip, for example, in:
   

   App/src/components/FloatingActionButton.tsx

   Line 121 in 894fbd0

   <EducationalTooltip

   , pass the 3rd param to the useProductTrainingContext. In this case it is toggleFabAction:

    const toggleFabAction = (event: GestureResponderEvent | KeyboardEvent | undefined) => {
        // Drop focus to avoid blue focus ring.
        fabPressable.current?.blur();
        onPress();
    };
    const {renderProductTrainingTooltip, shouldShowProductTrainingTooltip, hideProductTrainingTooltip} = useProductTrainingContext(
        CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.GLOBAL_CREATE_TOOLTIP,
        // On Home screen, We need to wait for the sidebar to load before showing the tooltip because there is the Concierge tooltip which is higher priority
        isFocused && (!isActiveRouteHome || isSidebarLoaded),
        toggleFabAction,
    );

Note: In the toggleFabAction above, I removed hideProductTrainingTooltip() since we already called it in step 1, after onPress?.(). But we still need to call that function in here.

3. We need to disable these styles if isEducationTooltip is true to make sure user can click on tooltip content.

4. Apply the similar logic to other EducationTooltip.

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)