[Guided Setup Stage 3] Add the tooltip for Workspace Chat

[deetergp]

Part of the Extend Onboarding to Invited Users project

Main issue: https://github.com/Expensify/Expensify/issues/392615 Doc section: https://docs.google.com/document/d/1EX1tKSkhffpqP4TXD7iKIPKWnU5U8ELv32j-QTtXH2g/edit#heading=h.bfsayh3fuyk8 Project: #wave-collect

Feature Description

When a user is invited to a Workspace as a non-admin, when they respond to the invitation email, they should be signed directly into the app and taken to their workspace chat. When viewing the chat for the first time, they should see a tool tip hovering above the Create button that says "Get started! Submit your first expense" that gets dismissed when they click on the button.

Manual Test Steps

Note: These won't be manually testable till the following backend GHs are done and deployed https://github.com/Expensify/Expensify/issues/411150 https://github.com/Expensify/Expensify/issues/411149 https://github.com/Expensify/Expensify/issues/411148 https://github.com/Expensify/Expensify/issues/411146

Follow the steps for Invited to workspace as a non-admin from the design doc.

Automated Tests

Not sure if we can test for this.

[melvin-bot[bot]]

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

[trjExpensify]

Trying to confirm if this will be held on work in https://github.com/Expensify/App/pull/44277. CC: @tienifr

[tienifr]

https://github.com/Expensify/App/pull/44277 and this share the same anchorAlignment mechanism but I faced several issues in https://github.com/Expensify/App/pull/44277 that do not happen in this one. I think we can definitely bring the anchorAlignment implementation from https://github.com/Expensify/App/pull/44277 here and get the PR right away to speed up the process, no need to hold. I can take this too.

[trjExpensify]

But @tienifr does that mean the anchorAlignment approach isn't the right one if it doesn't work for #44277?

[tienifr]

It worked perfectly, there's just another problem that didn't work in that PR.

[trjExpensify]

Okay, can you post your proposal here for posterity? Also, @dukenv0307 can you be the C+ on this? Thanks!

[tienifr]

Proposal

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

Add tooltip for Workspace chat

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?

We can reuse the EducationalTooltip from https://github.com/Expensify/App/pull/40066 with the same approach there.

Additionally, in order for the tooltip to align to the right of the target and the pointer to the left of the tooltip, we need to implement anchorAlignment property which mimics Popover's behavior:

https://github.com/Expensify/App/blob/456c8dad62a7ba532e6eef7607a707ef42b512d1/src/components/PopoverWithMeasuredContent.tsx#L43-L46

By default anchorAlignment is Bottom center.

1. Add anchorAlignment to Tooltip component tree
2. Modify this function to accept anchorAlignment:

https://github.com/Expensify/App/blob/58e257532290aa0228f1c668ed461a15f1b2b136/src/styles/utils/generators/TooltipStyleUtils/index.ts#L126

3. Apply the EducationalTooltip for ReportActionCompose with shouldRender as the condition of first time viewing the chat (I'm not sure if the BE already returned this prop or we need to create a new Onyx prop) with the given content.

Specifically for step 2, the current logic to compute tooltip position in createTooltipStyleUtils already supports the Bottom center alignment. We need to handle other cases:

Vertical alignment

Modify shouldShowBelow to include the TOP vertical alignment (tooltip shown below target):

https://github.com/Expensify/App/blob/58e257532290aa0228f1c668ed461a15f1b2b136/src/styles/utils/generators/TooltipStyleUtils/index.ts#L171-L174

|| anchorAlignment.vertical === CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP

Horizontal alignment

Reuse the current logic to calculate initial tooltip left position which includes the distance from the left edge of screen to the target xOffset and avoids displaying too near to the edge of the screen horizontalShift and manualShiftHorizontal:

rootWrapperLeft = xOffset + horizontalShift + manualShiftHorizontal

LEFT

We just need to shift the pointer a bit to the right so it won't overflow the tooltip border:

pointerWrapperLeft = POINTER_WIDTH / 2

RIGHT

1. Move the pointer to the right by the tooltip width and shift left a bit so it won't overflow the tooltip border like this:

pointerWrapperLeft = horizontalShiftPointer + (tooltipWidth - POINTER_WIDTH * 1.5)

2. Move the tooltip to the right by the target width and shift left by itself so it won't get out of the target space like this:

rootWrapperLeft += tooltipTargetWidth - tooltipWidth

CENTER

Just reuse the current logic:

pointerWrapperLeft = horizontalShiftPointer + (tooltipWidth / 2 - POINTER_WIDTH / 2)
rootWrapperLeft += tooltipTargetWidth / 2 - tooltipWidth / 2

Code changes are here.

POC

[dukenv0307]

@trjExpensify I would love to work on this issue as C+. Thanks

[deetergp]

Proposal looks good to me, how about you @dukenv0307?

[dukenv0307]

LGTM as well @deetergp

[deetergp]

Nice! Let's 🚀 @tienifr

[tienifr]

When viewing the chat for the first time

@deetergp How could we know the user is viewing the chat for the first time? Does the BE return this or do we need to introduce a new Onyx value?

[deetergp]

Good question, @tienifr. How do we do it for the other tool tips?

[trjExpensify]

I believe for the quick action button we have a isFirstQuickAction boolean: https://github.com/Expensify/App/blob/fef5dfc746367fb59ebfe9c371d09d25b253f618/src/types/onyx/QuickAction.ts#L19

[trjExpensify]

@deetergp did you give @tienifr what he needs here to move this on?

[deetergp]

@trjExpensify @tienifr I have updated the Tooltip section of the doc with details on what to expect when deciding whether or not to show the tooltip. Please let me know if you've got any remaining questions. Thanks!

[tienifr]

@deetergp Could you please grant me access to the doc [email protected]?

[trjExpensify]

@tienifr isn't C+, so hasn't got an NDA in place to access design docs. Let's get that into the GH issue OP.

[deetergp]

@trjExpensify @tienifr I've added the edits from the doc to the GH description under Frontend Changes (from doc) and Backend Changes (from doc).

[deetergp]

@tienifr The PR to push both nvp_introSelected and worksapceTooltip in onyx updates when invited users sign in was deployed to staging and should work for you now. Please let me know if you run into any problems!

[deetergp]

Were you able to do any testing with the new NVP @tienifr?

[tienifr]

Yes it works well. Pushing updates today.

[deetergp]

That's great news! Thanks for the update 👍

[tienifr]

@deetergp When user dismisses the tooltip, which API should be called? Is it SetNameValuePair?

[deetergp]

@tienifr I don't think we need to call any API at all. Just change the value of shouldShow to false in onyx. It's a temporary value that will never be sent again.

[tienifr]

@deetergp Got 1 question left: Will the tooltip be shown when user has not been added to any workspace before or when his account is completely new (i.e. first time user)? Because I wonder what is isInviteOnboardingComplete and when will it be false.

[deetergp]

@tienifr The tooltip should only be shown to users who were invited to join a workspace, not anyone else. Users invited to join a workspace should be taken to their workspace chat when they respond to the invitation and that's when we want show them the tooltip. Now that I think about it their nvp_introSelected.isInviteOnboardingComplete will probably be marked true by that point, so let's not worry about that and instead just show the tooltip when workspaceTooltip.shouldShow is set and true and mark it false in onyx once they dismiss it.

[tienifr]

My reproduction steps are:

1. Login with an account that has not been added to any workspace (A)
2. On another account, invite A to a workspace
3. On A, open that workspace chat

But I didn't see the workspaceTooltip.shouldShow returned by the BE. Could you kindly check it?

[deetergp]

You need to

1. In an incognito window, be logged in as User A, an account that owns a workspace
2. Invite User B, a user with a valid email address that does not yet have an Expensify account
3. Check User B's email for the invitation.
4. Open the new.expensify.com link from the email in a different browser window
5. Check onyx for workspaceTooltip

[deetergp]

Any updates @tienifr?