Add RBR/GBR chat and Account switcher tooltips#58540
Add RBR/GBR chat and Account switcher tooltips#58540MarioExpensify merged 35 commits intoExpensify:mainfrom
Conversation
|
@ishpaul777 Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button] |
|
Screenshots seem good to me 👍 |
|
Looking good to me too 👍 |
|
🚧 @puneetlath has triggered a test app build. You can view the workflow run here. |
|
🧪🧪 Use the links below to test this adhoc build on Android, iOS, Desktop, and Web. Happy testing! 🧪🧪
|
|
bug tooltip does not show when navigate to search and navigate back Screen.Recording.2025-03-20.at.1.19.35.AM.mov |
|
@rayane-d kind bump! ^ also we have conflicts |
I think this will be fixed in PR #58965, Can you please confirm? |
|
reviewing again |
|
looks like tooltip is pointing to avatar instead of the RBR/GBR 
|
|
@rayane-d whats the status here |
|
@ishpaul777 This is ready for review :) |
|
@MarioExpensify all yours! |
|
@Expensify/design can I get a design review here in @rayane-d's screenshots? 😄 |
|
@MarioExpensify I think the design was already approved in #58540 (comment) and #58540 (comment) |
|
Oh, you are right. Sorry about that, thought we had a different one here. |
MarioExpensify
left a comment
MarioExpensify
left a comment
There was a problem hiding this comment.
@rayane-d I've left a bunch of suggestions just to fix the spelling of RBR and GBR. Please take a look if there are no other changes required similar to these ones.
| onLayout?: (event: LayoutChangeEvent) => void; | ||
|
|
||
| /** Whether to show the educational tooltip for the GBR or RBR */ | ||
| shouldShowRBRorGPRTooltip: boolean; |
There was a problem hiding this comment.
| shouldShowRBRorGPRTooltip: boolean; | |
| shouldShowRBRorGBRTooltip: boolean; |
| onLayout?: (event: LayoutChangeEvent) => void; | ||
|
|
||
| /** Whether to show the educational tooltip on the GBR or RBR */ | ||
| shouldShowRBRorGPRTooltip: boolean; |
There was a problem hiding this comment.
| shouldShowRBRorGPRTooltip: boolean; | |
| shouldShowRBRorGBRTooltip: boolean; |
| } | ||
| const lastMessageTextFromReport = getLastMessageTextForReport(itemFullReport, lastActorDetails, itemPolicy, itemReportNameValuePairs); | ||
|
|
||
| const shouldShowRBRorGPRTooltip = firstReportIDWithGBRorRGR === reportID; |
There was a problem hiding this comment.
| const shouldShowRBRorGPRTooltip = firstReportIDWithGBRorRGR === reportID; | |
| const shouldShowRBRorGBRTooltip = firstReportIDWithGBRorRBR === reportID; |
| hasDraftComment={hasDraftComment} | ||
| transactionViolations={transactionViolations} | ||
| onLayout={onLayoutItem} | ||
| shouldShowRBRorGPRTooltip={shouldShowRBRorGPRTooltip} |
There was a problem hiding this comment.
| shouldShowRBRorGPRTooltip={shouldShowRBRorGPRTooltip} | |
| shouldShowRBRorGBRTooltip={shouldShowRBRorGBRTooltip} |
| const isWebOrDesktop = platform === CONST.PLATFORM.WEB || platform === CONST.PLATFORM.DESKTOP; | ||
|
|
||
| const {shouldShowProductTrainingTooltip} = useProductTrainingContext(CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.GBR_RBR_CHAT, true); | ||
| const firstReportIDWithGBRorRGR = useMemo(() => { |
There was a problem hiding this comment.
| const firstReportIDWithGBRorRGR = useMemo(() => { | |
| const firstReportIDWithGBRorRBR = useMemo(() => { |
| return { | ||
| tooltipToRender: tooltip, | ||
| shouldShowTooltip: shouldShowTooltips && shouldTooltipBeVisible, | ||
| shouldTooltipBeLeftAligned: shouldShowWorkspaceChatTooltip && !shouldShowRBRorGPRTooltip && !shouldShowGetStartedTooltip, |
There was a problem hiding this comment.
| shouldTooltipBeLeftAligned: shouldShowWorkspaceChatTooltip && !shouldShowRBRorGPRTooltip && !shouldShowGetStartedTooltip, | |
| shouldTooltipBeLeftAligned: shouldShowWorkspaceChatTooltip && !shouldShowRBRorGBRTooltip && !shouldShowGetStartedTooltip, |
| shouldShowTooltip: shouldShowTooltips && shouldTooltipBeVisible, | ||
| shouldTooltipBeLeftAligned: shouldShowWorkspaceChatTooltip && !shouldShowRBRorGPRTooltip && !shouldShowGetStartedTooltip, | ||
| }; | ||
| }, [shouldShowRBRorGPRTooltip, shouldShowGetStartedTooltip, shouldShowWorkspaceChatTooltip, isScreenFocused, shouldUseNarrowLayout, isReportsSplitNavigatorLast, isFullscreenVisible]); |
There was a problem hiding this comment.
| }, [shouldShowRBRorGPRTooltip, shouldShowGetStartedTooltip, shouldShowWorkspaceChatTooltip, isScreenFocused, shouldUseNarrowLayout, isReportsSplitNavigatorLast, isFullscreenVisible]); | |
| }, [shouldShowRBRorGBRTooltip, shouldShowGetStartedTooltip, shouldShowWorkspaceChatTooltip, isScreenFocused, shouldUseNarrowLayout, isReportsSplitNavigatorLast, isFullscreenVisible]); |
| let tooltip: ProductTrainingTooltipName = shouldShowGetStartedTooltip | ||
| ? CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.CONCIERGE_LHN_GBR | ||
| : CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.LHN_WORKSPACE_CHAT_TOOLTIP; | ||
| if (shouldShowRBRorGPRTooltip) { |
There was a problem hiding this comment.
| if (shouldShowRBRorGPRTooltip) { | |
| if (shouldShowRBRorGBRTooltip) { |
| if (shouldShowRBRorGPRTooltip) { | ||
| tooltip = CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.GBR_RBR_CHAT; | ||
| } | ||
| const shouldShowTooltips = shouldShowRBRorGPRTooltip || shouldShowWorkspaceChatTooltip || shouldShowGetStartedTooltip; |
There was a problem hiding this comment.
| const shouldShowTooltips = shouldShowRBRorGPRTooltip || shouldShowWorkspaceChatTooltip || shouldShowGetStartedTooltip; | |
| const shouldShowTooltips = shouldShowRBRorGBRTooltip || shouldShowWorkspaceChatTooltip || shouldShowGetStartedTooltip; |
| style, | ||
| onLayout = () => {}, | ||
| hasDraftComment, | ||
| shouldShowRBRorGPRTooltip, |
There was a problem hiding this comment.
| shouldShowRBRorGPRTooltip, | |
| shouldShowRBRorGBRTooltip, |
|
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
|
🚀 Deployed to staging by https://github.com/MarioExpensify in version: 9.1.39-1 🚀
|
|
🚀 Deployed to production by https://github.com/yuwenmemon in version: 9.1.39-8 🚀
|
8 participants
Explanation of Change
Priority 1900
Conditions: role = All, the user can see a chat with a green or red dot (RBR or GBR)
Priority 1600
Conditions: role = All, when a user is or becomes a copilot for another account and navigates to Account/Settings page for the first time
Fixed Issues
$ #57045
The changes for the issue are divided into multiple PRs, as outlined in this comment: #57045 (comment)
Tests
Offline tests
QA Steps
Same as tests
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectiontoggleReportand notonIconClick)src/languages/*files and using the translation methodSTYLE.md) were followedAvatar, I verified the components usingAvatarare working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))Avataris modified, I verified thatAvataris working as expected in all cases)Designlabel and/or tagged@Expensify/designso the design team can review the changes.ScrollViewcomponent to make it scrollable when more elements are added to the page.mainbranch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTeststeps.Screenshots/Videos
Android: Native
Android: mWeb Chrome
iOS: Native
iOS: mWeb Safari
MacOS: Chrome / Safari
MacOS: Desktop