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

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

[github-actions]

⚠️ @daledah Thanks for your proposal. Please update it to follow the proposal template, as proposals are only reviewed if they follow that format (note the mandatory sections).

[melvin-bot]

@puneetlath, @dannymcclain, @kadiealexander, @ishpaul777 Whoops! This issue is 2 days overdue. Let's get this updated quick!

[ishpaul777]

Draft PR is up #55454 just need some testing then i'll open up for review

[rayane-d]

@puneetlath I can review this PR as I worked on this project with @ishpaul777 Could you please assign me?

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.89-8 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Add onTooltipPress callback to various tooltip components #55454

If no regressions arise, payment will be issued on 2025-02-04. 🎊

For reference, here are some details about the assignees on this issue:

• @rayane-djouah requires payment through NewDot Manual Requests
• @ishpaul777 requires payment (Needs manual offer from BZ)

[melvin-bot]

BugZero Checklist: The PR adding this new feature has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@rayane-djouah / @ishpaul777] Please propose regression test steps to ensure the new feature will work correctly on production in further releases. - [$500] [HOLD for payment 2025-02-04] Make clicking an onboarding tooltip do the action that the tooltip is pointing to #55371 (comment)
• [@kadiealexander] Link the GH issue for creating/updating the regression test once above steps have been agreed upon. - https://github.com/Expensify/Expensify/issues/467414

[rayane-d]

Regression Test Proposal

#### Precondition:

- Sign in with a new account and complete the onboarding flow.

#### Test:

### For all product training tooltips (Concierge chat, FAB, QAB, Workspace chat, Filters button, Inbox Icon, Saved search three dots, "+" button tooltip in invited workspace chat):

1. Click the tooltip.
2. Verify that:
- The tooltip is dismissed after clicking.
- The action associated with the element the tooltip is pointing to is performed.
- The tooltip does not reappear.



1. Sign in with a new account and complete the onboarding flow. 
2. Verify that the tooltip appears on the FAB.
3. Click the tooltip and verify the FAB menu opens. Close the menu.
4. Verify that a tooltip appears on the concierge. Click the tooltip and verify the concierge chat opens. Close the chat.
5. Create a workspace and go to the inbox. Verify that a tooltip appears on the workspace chat. Click the tooltip and verify the workspace chat opens. Close the chat.
6. Open the FAB. Verify that a tooltip appears on the QAB. Click the tooltip and verify you are redirected to the "Submit Expense" flow.
7. Open the search page. Verify that a tooltip appears on the filter button. Click the tooltip and verify the filter page opens.

Do we agree 👍 or 👎

[melvin-bot]

📣 @rayane-d! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[rayane-d]

Contributor details
Your Expensify account email: [email protected]
Upwork Profile Link: https://www.upwork.com/freelancers/~01af33a55f4988a74b

[melvin-bot]

⚠️ Unable to store contributor details.

[melvin-bot]

Payment Summary

Upwork Job

• - Reviewer: @rayane-d paid $250 via Manual Request
• - Contributor: @ishpaul777 paid $250 via Upwork (offer)

BugZero Checklist (@kadiealexander)

• I have verified the correct assignees and roles are listed above and updated the neccesary manual offers
• I have verified that there are no duplicate or incorrect contracts on Upwork for this job (https://www.upwork.com/ab/applicants//hired)
• I have paid out the Upwork contracts or cancelled the ones that are incorrect
• I have verified the payment summary above is correct

[rayane-d]

Requested in NewDot

[melvin-bot]

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

[melvin-bot]

Current assignees @rayane-d and @ishpaul777 are eligible for the External assigner, not assigning anyone new.

[kadiealexander]

@ishpaul777 please accept the offer!

[ishpaul777]

hey @kadiealexander! can we please adjust the pricing to $500 there were many changes in PR and also there was another follow-up PR (#55663) with kind of unrelated to this which also took some effort. so I feel the amount to be justified. Thanks for your consideration!

cc @puneetlath

[melvin-bot]

Upwork job price has been updated to $500

[kadiealexander]

@ishpaul777 updated the offer!

[ishpaul777]

Thanks you! Accepted!

[kadiealexander]

Payment summary here.