[HOLD for payment 2024-06-28] [$500] [QAB] Add a tooltip to the Quick Action Button if it is being displayed for the first time.

[Gonals]

HELD on #38050

As described in this section of the design doc, we want to display a tooltip the first time the QAB is set:

From the design doc:
High-level
The first time global create is opened with the quick action button present, an “educational tooltip” is visible to help explain and draw attention to it:

Detailed
The Tooltip

• For the tooltip, we will leverage our existing tooltip component:
• We will update MenuItem to receive an optional tooltipContent parameter. When populated, the tooltip will be shown.
• If populated, we will pass the content to via the renderTooltipContent parameter like we do here or here.
• The content will be a simple View, styled with the green background, and the text shown in the mockup.
• We will pass the content when adding the QAB menuItem here if isFirstQuickAction is set.

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~018ff6f76c5f734cc9
• Upwork Job ID: 1767204991949152256
• Last Price Increase: 2024-06-28
• Automatic offers:
• cubuspl42 | Reviewer | 0
• tienifr | Contributor | 0

Issue Owner

Current Issue Owner: @twisterdotcom

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @twisterdotcom (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details.

[tienifr]

Proposal

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

Display a tooltip the first time the QAB is set

What is the root cause of that problem?

This is a new feature.

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

• Update MenuItem to receive an optional renderTooltipContent prop (similar to the renderTooltipContent of Tooltip here)
• Wrap this PressableWithSecondaryInteraction inside a Tooltip, like we did here. If there's the renderTooltipContent passed in, shouldRender of Tooltip will be true
• Pass the renderTooltipContent to renderTooltipContent of Tooltip
• We'll likely need to make some changes to the Tooltip to enable customization of the tooltip content and arrow location relative to the wrapped element, if we look at the OP, we can see that the arrow is not in the middle of the MenuItem, neither is the main content
• The content will be a simple View, styled with the green background, and the text shown in the mockup. -> This is straight-forward to implement, we just need to do the same as the design. Looking at the design it seems we'll have:
  • A wrapper "View" with light green background
  • A Text with Shortcut! text, in bold and have green color
  • A Text with Your last action just a tap away and regular black text color
    Of course this will be theme-dependent, we'll implement just like the design.
• In the place of the QAB menuItem, pass the renderTooltipContent if isFirstQuickAction is set
• There will be some miscellaneous changes required to make sure this works well, this can be addressed
  • In here, if there's no secondary interaction, use PressableWithFeedback instead of PressableWithSecondaryInteraction, so the secondary interaction handling won't interfere with the tooltip logic
  • When wrapping Hoverable and Tooltip together, make sure the onMouseEnter prop is passed correctly and are triggered in both components.

What alternative solutions did you explore? (Optional)

In the second step, we can optionally wrap around Hoverable instead

[redcrystalll]

email: [email protected]
upwork profile: https://www.upwork.com/freelancers/~0164a9b5004742eba2

To integrate the provided Tooltip component with the functionality described in the design document, you'll need to modify it to accept the renderTooltipContent prop for custom tooltip content and conditionally render it based on the shouldRender prop. Here's how you can modify the Tooltip component:

ToolTip Code:

import React from 'react';
import BaseTooltip from './BaseTooltip'; // Import the base tooltip component
import type { TooltipExtendedProps } from './types';

function Tooltip({ shouldRender = true, children, renderTooltipContent, ...props }: TooltipExtendedProps) {
    if (!shouldRender || !renderTooltipContent) {
        return children;
    }

    return (
        <BaseTooltip {...props}>
            {children}
            {renderTooltipContent()}
        </BaseTooltip>
    );
}

Tooltip.displayName = 'Tooltip';

export default Tooltip;

Usage of ToolTip:

import React from 'react';
import Tooltip from './Tooltip'; // Assuming you've named the modified tooltip component 'Tooltip'

function MyComponent() {
    const tooltipContent = () => (
        <div style={{ backgroundColor: 'green' }}>
            {/* Custom content for the tooltip */}
            This is a tooltip content.
        </div>
    );

    return (
        <div>
            <Tooltip shouldRender={true} renderTooltipContent={tooltipContent}>
                {/* Content to be wrapped by the tooltip */}
                <button>Hover over me</button>
            </Tooltip>
        </div>
    );
}

export default MyComponent;

[melvin-bot]

📣 @redcrystalll! 📣
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>

[cubuspl42]

Holding on:

• [HOLD for payment 2024-04-05] [QAB] Create the Quick Action button #38050

[twisterdotcom]

Still HELD.

[trjExpensify]

#38050 has merged (not yet deployed), but I think we can start reviewing the proposals here. :)

[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.0-9 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Feature: Tooltip for QAB #40066

If no regressions arise, payment will be issued on 2024-06-28. 🎊

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

• @eVoloshchak requires payment through NewDot Manual Requests
• @tienifr requires payment automatic offer (Contributor)

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

• [@eVoloshchak] Please propose regression test steps to ensure the new feature will work correctly on production in further releases.
• [@twisterdotcom] Link the GH issue for creating/updating the regression test once above steps have been agreed upon.

[twisterdotcom]

Payment Summary:

• @eVoloshchak paid $500 through NewDot Manual Requests
• @tienifr paid $500 here (Contributor)

[twisterdotcom]

I don't think we need regression steps for this new feature.

[tienifr]

Hi @twisterdotcom, this issue was $500 when it was opened

It was incorrectly updated to $250 after @mallenexpensify reapplies the Help Wanted label to get a new C+.

Could you help to restore the amount in the GH issue and also in the Upwork offer?

Thanks

[twisterdotcom]

Ahh, thanks. updated: https://www.upwork.com/nx/wm/offer/102913747

[melvin-bot]

Upwork job price has been updated to $500

[tienifr]

@twisterdotcom Thank you! I accepted the offer!

[twisterdotcom]

Paid

[JmillsExpensify]

$500 approved for @eVoloshchak

[tienifr]

Sorry, forgot to mention that I'm actually paid via NewDot now, I've refunded the Upwork payment and requested again on NewDot

[JmillsExpensify]

Thanks! $500 approved for @tienifr

[mallenexpensify]

Sorry @tienifr and @JmillsExpensify , you're gonna hate me..
@tienifr you were assigned on March 27 and I have your eligibility date as 2024-04-06, so we need to pay you via Upwork for this job. (Internal details in this SO and in this pinned chat in #bug-zero)

@tienifr can you please cancel your request for this job via NewDot payments , and accept the job and reply here once you have?
https://www.upwork.com/jobs/~01d37506ff0c4d2ad6

[tienifr]

@mallenexpensify Hey sure, thanks for the details on the dates. I totally agree.

However it seems the request on NewDot was already paid here so I can't cancel it, what should I do?

If that's not cancellable, maybe I can mention on 2 other jobs (for $250) that I'm already paid 😄 To cover up for the extra $500 here.

[mallenexpensify]

@tienifr , I made a note on the below issue to not be paid to balance this out

• [HOLD for payment 2024-07-22] [HOLD for payment 2024-07-17] [regession] [$500] RBR transaction thread is disappearing from the LHN when navigating to another chat #36778 (comment)

can you please accept the job and reply here once you have?
https://www.upwork.com/jobs/~01d37506ff0c4d2ad6

[tienifr]

can you please accept the job and reply here once you have?

@mallenexpensify I've done this (I saw there were 2 offers so I accepted one and declined the other)

Thanks

[mallenexpensify]

Contributor: @tienifr paid $500 via Upwork (also paid via NewDot, which will balanced out by this issue not being paid)

@cubuspl42 are you due payment? I see you reviewed the PR but don't see a ✔️ next to your name in the upper right corner here
#40066 (review)

[twisterdotcom]

@cubuspl42 I see hasn't responded yet. Can we close and just reopen if needed?

[cubuspl42]

Sorry for the late response. No payment is needed.