New product training tooltips #54064

ishpaul777 · 2024-12-12T20:18:54Z

Explanation of Change

Fixed Issues

$ #53087
PROPOSAL:

Tests

Verify that no errors appear in the JS console
Sign in with new account, complete onboarding flow.
On small screen verify "Get started!" tooltip show on conceirge chat. Dismiss it clicking anywhere on screen.
On large screen, verify tooltip on FAB button appears. Dismiss it clicking anywhere on screen.
Create a workspace if not already, veriffy when there's a workspace chat in LHN verify tooltip on workspace chat shows. (on both large and small screen) Dismiss it clicking anywhere on screen.
click on search bottom tab, verify tooltip on filter button shows up. Dismiss it clicking anywhere on screen.
Verify a tooltip on inbox icon in bottom tab shows up. Dismiss it clicking anywhere on screen.

Offline tests

QA Steps

Same as tests

Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Android: Native

Record_2024-12-13-18-38-24.mp4

Android: mWeb Chrome

Record_2024-12-13-18-14-31.mp4

iOS: Native

Screen.Recording.2024-12-13.at.5.44.54.PM.mov

iOS: mWeb Safari

Screen.Recording.2024-12-13.at.5.48.22.PM.mov

MacOS: Chrome / Safari

Screen.Recording.2024-12-13.at.6.11.36.PM.mov

MacOS: Desktop

Screen.Recording.2024-12-13.at.6.24.31.PM.mov

…e chat, and global create actions and render tooltip for global create

…dd new useBottomTabIsFocused hook for better navigation state management

…mprove tooltip rendering logic

…on tooltip logic

src/components/FloatingActionButton.tsx

src/components/LHNOptionsList/OptionRowLHN.tsx

src/components/ProductTrainingContext/index.tsx

src/components/FloatingActionButton.tsx

src/components/Search/SearchPageHeader.tsx

src/hooks/useBottomTabIsFocused.ts

src/languages/en.ts

Co-authored-by: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com>

rayane-d · 2024-12-12T22:29:21Z

src/hooks/useBottomTabIsFocused.ts

+    if (shouldUseNarrowLayout) {
+        return isFocused || topmostCentralPane?.name === SCREENS.SEARCH.CENTRAL_PANE;
+    }
+    return isFocused || Object.keys(CENTRAL_PANE_SCREENS).includes(topmostCentralPane?.name ?? '');


We shouldn't show the tooltip if the component is not focused, right?

Suggested change

if (shouldUseNarrowLayout) {

return isFocused || topmostCentralPane?.name === SCREENS.SEARCH.CENTRAL_PANE;

}

return isFocused || Object.keys(CENTRAL_PANE_SCREENS).includes(topmostCentralPane?.name ?? '');

if (shouldUseNarrowLayout) {

return isFocused && topmostCentralPane?.name === SCREENS.SEARCH.CENTRAL_PANE;

}

return isFocused && Object.keys(CENTRAL_PANE_SCREENS).includes(topmostCentralPane?.name ?? '');

for some reason isFocused is always false for components in bottom tab, no idea why

i got the idea from useIsFocused hook in this component

https://github.com/Expensify/App/blob/fb851dfcaf42997af2e1e741ef91721bc0809338/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx

…d Search components

…oss components

…on, BottomTabBar, and SearchTypeMenuNarrow components

…siveness across FloatingActionButton, BottomTabBar, and SearchTypeMenuNarrow components

dannymcclain · 2024-12-13T19:09:19Z

Sorry to be so nitpicky 🙈, but can we check the padding values and the border radius for the tooltip?

In Figma, the tooltips have 12px vertical padding and 16px horizontal padding, and a border radius of 8px.

rayane-d

@ishpaul777 Did you confirm the translations on Slack?

rayane-d · 2024-12-13T19:24:56Z

src/languages/en.ts

+        workspaceChatTooltip: {
+            part1: 'Review submitted expenses and chat',
+            part2: '\nwith approvers in your',
+            part3: ' workspace chat.',


Suggested change

part3: ' workspace chat.',

part3: ' workspace chat',

rayane-d · 2024-12-13T19:25:04Z

src/languages/en.ts

+        globalCreateTooltip: {
+            part1: 'Where to ',
+            part2: 'create expenses,',
+            part3: '\nstart chatting, and more.',


Suggested change

part3: '\nstart chatting, and more.',

part3: '\nstart chatting, and more',

rayane-d · 2024-12-13T19:25:10Z

src/languages/es.ts

+        workspaceChatTooltip: {
+            part1: 'Revisa los gastos enviados y chatea',
+            part2: '\ncon los aprobadores en tu',
+            part3: ' chat del espacio de trabajo.',


Suggested change

part3: ' chat del espacio de trabajo.',

part3: ' chat del espacio de trabajo',

rayane-d · 2024-12-13T19:25:17Z

src/languages/es.ts

+        globalCreateTooltip: {
+            part1: 'Dónde ',
+            part2: 'crear gastos,',
+            part3: '\nempezar a chatear y más.',


Suggested change

part3: '\nempezar a chatear y más.',

part3: '\nempezar a chatear y más',

ishpaul777 · 2024-12-13T19:26:58Z

asked but still needs confirmation https://expensify.slack.com/archives/C07NMDKEFMH/p1734116662021799 will update accordingly

rayane-d · 2024-12-13T19:33:20Z

Sorry to be so nitpicky 🙈, but can we check the padding values and the border radius for the tooltip?

In Figma, the tooltips have 12px vertical padding and 16px horizontal padding, and a border radius of 8px.

Currently the tooltips use 8px horizontal padding, 4px vertical padding and 4px border radius:

App/src/styles/utils/generators/TooltipStyleUtils/index.ts

Lines 221 to 223 in 33ce301

    
           borderRadius: variables.componentBorderRadiusSmall, 
        
           ...tooltipVerticalPadding, 
        
           ...spacing.ph2,

ishpaul777 · 2024-12-13T19:36:40Z

yes the the tooltips have combined padding of 12px vertical padding and 16px horizontal padding, (Outer container 4px 8px, inner container 8px 8px)

border radius was 4px i updated it to 8px now

… and Spanish translations

ishpaul777 · 2024-12-13T21:36:33Z

@rayane-djouah This is approved copy and translations, will you please give this a quick review

OSBotify · 2024-12-13T21:51:30Z

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

titaniumdev80 · 2024-12-13T23:17:44Z

@puneetlath Sorry, could you let me know where I can find the instructions to generate certificates? Thanks

titaniumdev80 · 2024-12-13T23:29:35Z

@puneetlath No worries. I've just found it out. Thanks

github-actions · 2024-12-18T13:38:11Z

🚀 Deployed to staging by https://github.com/puneetlath in version: 9.0.77-0 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅
🤖🔄 android HybridApp 🤖🔄	success ✅
🍎🔄 iOS HybridApp 🍎🔄	failure ❌

puneetlath · 2024-12-18T16:24:05Z

FYI we had to revert this because it created a HybridApp crash for a yet-unknown reason: #54260

kavimuru · 2024-12-19T23:16:00Z

Failing with original bug #53087 in all the platforms
https://platform.applause.com/services/links/v1/external/46b2e50f5196600800df127a5e890af9cc2a75c5122c2c4608cfdd9b77793ef9
https://platform.applause.com/services/links/v1/external/5df9372f5bfe31f197c0ba58373c1ddd791fe93d07daa5580695964b37aef059
https://platform.applause.com/services/links/v1/external/63795e9f82011fde4aa3e0e7031d287db841688dbf1e92737842af3ef481a7dc

ishpaul777 · 2024-12-20T16:52:15Z

@kavimuru The PR was reverted no need for QA here

github-actions · 2024-12-23T21:00:22Z

🚀 Deployed to production by https://github.com/jasperhuangg in version: 9.0.77-6 🚀

platform	result
🤖 android 🤖	true ❌
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅
🤖🔄 android HybridApp 🤖🔄	failure ❌
🍎🔄 iOS HybridApp 🍎🔄	success ✅

ahmedGaber93 · 2025-02-22T02:09:43Z

src/components/Search/SearchPageHeader.tsx

+                    <EducationalTooltip
+                        shouldRender={shouldShowProductTrainingTooltip}
+                        anchorAlignment={{
+                            vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,


Coming from here #57070, because of the tooltip overlaps the expensify logo, we decide to change the vertical alignment to TOP.

hoangzinh · 2025-03-05T10:38:22Z

src/components/LHNOptionsList/OptionRowLHN.tsx

@@ -156,17 +158,18 @@ function OptionRowLHN({reportID, isFocused = false, onSelectRow = () => {}, opti
            needsOffscreenAlphaCompositing
        >
            <EducationalTooltip
-                shouldRender={shouldShowProductTrainingTooltip}
+                // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+                shouldRender={shouldShowProductTrainingTooltip && (isActiveWorkspaceChat || shouldShowGetStartedTooltip)}


Hi team,

Coming from #56952, we should exclude a case that workspace chat is a taskThread, otherwise it will show multiple tooltips. More details here #56952 (comment)

ishpaul777 added 9 commits December 12, 2024 22:13

Rename PRODUCT_TRAINING_TOOLTIP_DATA to TOOLTIPS and update references

6915152

Add new tooltips for search filter, bottom navigation inbox, workspac…

d4e601e

…e chat, and global create actions and render tooltip for global create

update workspace chat tooltip

ef25dd7

Refactor FloatingActionButton to use useBottomTabIsFocused hook and a…

b74ab71

…dd new useBottomTabIsFocused hook for better navigation state management

Enhance bottom navigation inbox tooltip with additional content and i…

cd4d450

…mprove tooltip rendering logic

fix typo

c8b461d

Add educational tooltips for search filter and update bottom navigati…

07d8869

…on tooltip logic

Remove unnecessary console log

a8c5fab

Remove beta

490bcf4

ishpaul777 mentioned this pull request Dec 12, 2024

[HOLD for payment 2025-01-15] [$500] Make it possible to click the element the product training tooltip is pointing to. #54068

Closed

use variables

2e99f8b

rayane-d suggested changes Dec 12, 2024

View reviewed changes

ishpaul777 and others added 4 commits December 13, 2024 03:40

Update src/components/LHNOptionsList/OptionRowLHN.tsx

ca2a374

Co-authored-by: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com>

Update src/components/ProductTrainingContext/index.tsx

0c2c09d

Co-authored-by: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com>

Update src/languages/en.ts

ed735a1

Co-authored-by: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com>

Update src/languages/en.ts

b139934

Co-authored-by: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com>

rayane-d suggested changes Dec 12, 2024

View reviewed changes

ishpaul777 added 6 commits December 13, 2024 04:18

Refactor tooltip positioning and variables in FloatingActionButton an…

64e89d7

…d Search components

Remove unused responsive layout hook from FloatingActionButton component

c95b6e8

Refactor tooltip styles and translations for improved consistency acr…

569e0cb

…oss components

fix typo

377189c

Refactor tooltip positioning and responsiveness in FloatingActionButt…

749e890

…on, BottomTabBar, and SearchTypeMenuNarrow components

Refactor tooltip positioning and visibility logic for improved respon…

3e6c815

…siveness across FloatingActionButton, BottomTabBar, and SearchTypeMenuNarrow components

ishpaul777 requested a review from rayane-d December 13, 2024 13:01

ishpaul777 and others added 2 commits December 13, 2024 18:52

add comments and api changes

db57944

Merge branch 'main' into new-product-training-tooltips

b63ecf1

ishpaul777 marked this pull request as ready for review December 13, 2024 13:50

ishpaul777 requested review from a team as code owners December 13, 2024 13:50

melvin-bot bot requested a review from puneetlath December 13, 2024 13:50

rayane-d reviewed Dec 13, 2024

View reviewed changes

Add border radius to product training tooltip wrapper

aaaf230

ishpaul777 mentioned this pull request Dec 13, 2024

Desktop - No tooltip is shown #54127

Closed

8 tasks

puneetlath previously approved these changes Dec 13, 2024

View reviewed changes

ishpaul777 added 2 commits December 14, 2024 02:55

Refactor tooltip content for improved clarity and emphasis in English…

e2645c7

… and Spanish translations

format

f22bbc2

ishpaul777 dismissed puneetlath’s stale review via f22bbc2 December 13, 2024 21:25

ishpaul777 requested a review from puneetlath December 13, 2024 21:27

ishpaul777 requested a review from rayane-d December 13, 2024 21:36

puneetlath approved these changes Dec 13, 2024

View reviewed changes

puneetlath merged commit 12de96f into Expensify:main Dec 13, 2024
17 checks passed

puneetlath mentioned this pull request Dec 17, 2024

Revert 54064 and 53396 #54260

Merged

50 tasks

github-actions bot mentioned this pull request Dec 18, 2024

Deploy Checklist: New Expensify 2024-12-18 #54292

Closed

72 tasks

ishpaul777 mentioned this pull request Dec 18, 2024

Revert "Revert 54064 and 53396" #54263

Merged

50 tasks

melvin-bot bot mentioned this pull request Dec 23, 2024

Add new tooltips for Product training #53087

Closed

ahmedGaber93 reviewed Feb 22, 2025

View reviewed changes

hoangzinh reviewed Mar 5, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

New product training tooltips #54064

New product training tooltips #54064

ishpaul777 commented Dec 12, 2024 •

edited

Loading

rayane-d Dec 12, 2024

ishpaul777 Dec 12, 2024

ishpaul777 Dec 12, 2024

dannymcclain commented Dec 13, 2024

rayane-d left a comment

rayane-d Dec 13, 2024

rayane-d Dec 13, 2024

rayane-d Dec 13, 2024

rayane-d Dec 13, 2024

ishpaul777 commented Dec 13, 2024

rayane-d commented Dec 13, 2024

ishpaul777 commented Dec 13, 2024

ishpaul777 commented Dec 13, 2024

OSBotify commented Dec 13, 2024

titaniumdev80 commented Dec 13, 2024

titaniumdev80 commented Dec 13, 2024

github-actions bot commented Dec 18, 2024

puneetlath commented Dec 18, 2024

kavimuru commented Dec 19, 2024

ishpaul777 commented Dec 20, 2024

github-actions bot commented Dec 23, 2024

ahmedGaber93 Feb 22, 2025

hoangzinh Mar 5, 2025

	part3: '\nstart chatting, and more.',
	part3: '\nstart chatting, and more',

	part3: ' chat del espacio de trabajo.',
	part3: ' chat del espacio de trabajo',

	part3: '\nempezar a chatear y más.',
	part3: '\nempezar a chatear y más',

New product training tooltips #54064

New product training tooltips #54064

Conversation

ishpaul777 commented Dec 12, 2024 • edited Loading

Explanation of Change

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dannymcclain commented Dec 13, 2024

rayane-d left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ishpaul777 commented Dec 13, 2024

rayane-d commented Dec 13, 2024

ishpaul777 commented Dec 13, 2024

ishpaul777 commented Dec 13, 2024

OSBotify commented Dec 13, 2024

titaniumdev80 commented Dec 13, 2024

titaniumdev80 commented Dec 13, 2024

github-actions bot commented Dec 18, 2024

puneetlath commented Dec 18, 2024

kavimuru commented Dec 19, 2024

ishpaul777 commented Dec 20, 2024

github-actions bot commented Dec 23, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ishpaul777 commented Dec 12, 2024 •

edited

Loading