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-djouah · 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

shawnborton · 2024-12-13T18:10:52Z

Nice, good catches - let's go with what Jon has in Figma!

ishpaul777 · 2024-12-13T18:25:40Z

@shawnborton @dannymcclain looks good ?

rayane-djouah · 2024-12-13T18:38:04Z

BUG: As reported in #53979, I'm still getting broken tooltips (for the new ones also) on the Android native app:

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

rayane-djouah · 2024-12-13T18:41:07Z

Screenshots/Videos

Android: Native

android_native.mp4

Android: mWeb Chrome

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

iOS: Native

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2024-12-13.at.19.20.06.mp4

iOS: mWeb Safari

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2024-12-13.at.19.34.27.mp4

MacOS: Chrome / Safari

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

MacOS: Desktop

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

shawnborton · 2024-12-13T18:41:32Z

Feels good to me 👍

rayane-djouah · 2024-12-13T18:53:45Z

BUG: As reported in #53979, I'm still getting broken tooltips (for the new ones also) on the Android native app:

This is reproducible on the simulator but not on my physical device 👍

rayane-djouah

Reviewer Checklist

I have verified the author checklist is complete (all boxes are checked off).
I verified the correct issue is linked in the ### Fixed Issues section above
I verified testing steps are clear and they cover the changes made in this PR
- I verified the steps for local testing are in the Tests section
- I verified the steps for Staging and/or Production testing are in the QA steps section
- I verified the steps cover any possible failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
- I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
I checked that screenshots or videos are included for tests on all platforms
I included screenshots or videos for tests on all platforms
I verified tests pass on all platforms & I tested again on:
- Android: Native
- Android: mWeb Chrome
- iOS: Native
- iOS: mWeb Safari
- MacOS: Chrome / Safari
- MacOS: Desktop
If there are any errors in the console that are unrelated to this PR, I either fixed them (preferred) or linked to where I reported them in Slack
I verified proper code patterns were followed (see Reviewing the code)
- I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick).
- I verified that comments were added to code that is not self explanatory
- I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
- I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method
- I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
- I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is either coming verbatim from figma or has been approved by marketing (in order to get marketing approval, ask the Bug Zero team member to add the Waiting for copy label to the issue)
- I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
- I verified the JSDocs style guidelines (in STYLE.md) were followed
If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
I verified that this PR follows the guidelines as stated in the Review Guidelines
I verified other components that can be impacted by these changes have been tested, and I retested again (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar have been tested & I retested again)
I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
If a new component is created I verified that:
- A similar component doesn't exist in the codebase
- All props are defined accurately and each prop has a /** comment above it */
- The file is named correctly
- The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
- The only data being stored in the state is data necessary for rendering and nothing else
- For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
- Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
- All JSX used for rendering exists in the render method
- The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
If any new file was added I verified that:
- The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
If a new CSS style is added I verified that:
- A similar style doesn't already exist
- The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(theme.componentBG)
If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
If the PR modifies the UI (e.g. new buttons, new UI components, changing the padding/spacing/sizing, moving components, etc) or modifies the form input styles:
- I verified that all the inputs inside a form are aligned with each other.
- I added Design label and/or tagged @Expensify/design so the design team can review the changes.
If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.
I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

ishpaul777 · 2024-12-13T18:55:27Z

sorry i forgot to update translations i am on it! @rayane-djouah

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-djouah

@ishpaul777 Did you confirm the translations on Slack?

rayane-djouah · 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-djouah · 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-djouah · 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-djouah · 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-djouah · 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

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

[$500] Make it possible to click the element the product training tooltip is pointing to. #54068

Open

use variables

2e99f8b

rayane-djouah 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-djouah 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-djouah 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

changes as per review

192125c

rayane-djouah approved these changes Dec 13, 2024

View reviewed changes

Update Spanish translations for tooltips and messages

4e959b9

rayane-djouah 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-djouah 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

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-djouah Dec 12, 2024

ishpaul777 Dec 12, 2024

ishpaul777 Dec 12, 2024

shawnborton commented Dec 13, 2024

ishpaul777 commented Dec 13, 2024

rayane-djouah commented Dec 13, 2024

rayane-djouah commented Dec 13, 2024 •

edited

Loading

shawnborton commented Dec 13, 2024

rayane-djouah commented Dec 13, 2024

rayane-djouah left a comment

ishpaul777 commented Dec 13, 2024

dannymcclain commented Dec 13, 2024

rayane-djouah left a comment

rayane-djouah Dec 13, 2024

rayane-djouah Dec 13, 2024

rayane-djouah Dec 13, 2024

rayane-djouah Dec 13, 2024

ishpaul777 commented Dec 13, 2024

rayane-djouah 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

	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

rayane-djouah Dec 12, 2024

Choose a reason for hiding this comment

ishpaul777 Dec 12, 2024

Choose a reason for hiding this comment

ishpaul777 Dec 12, 2024

Choose a reason for hiding this comment

shawnborton commented Dec 13, 2024

ishpaul777 commented Dec 13, 2024

rayane-djouah commented Dec 13, 2024

rayane-djouah commented Dec 13, 2024 • edited Loading

Screenshots/Videos

shawnborton commented Dec 13, 2024

rayane-djouah commented Dec 13, 2024

rayane-djouah left a comment

Choose a reason for hiding this comment

Reviewer Checklist

ishpaul777 commented Dec 13, 2024

dannymcclain commented Dec 13, 2024

rayane-djouah left a comment

Choose a reason for hiding this comment

rayane-djouah Dec 13, 2024

Choose a reason for hiding this comment

rayane-djouah Dec 13, 2024

Choose a reason for hiding this comment

rayane-djouah Dec 13, 2024

Choose a reason for hiding this comment

rayane-djouah Dec 13, 2024

Choose a reason for hiding this comment

ishpaul777 commented Dec 13, 2024

rayane-djouah 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

ishpaul777 commented Dec 12, 2024 •

edited

Loading

rayane-djouah commented Dec 13, 2024 •

edited

Loading