Merge pull request #44277 from tienifr/feature/tooltip-for-gbr

Feature: Tooltip for GBR

src/ONYXKEYS.ts

@@ -215,6 +215,9 @@ const ONYXKEYS = {
     /** The NVP containing all information related to educational tooltip in workspace chat */
     NVP_WORKSPACE_TOOLTIP: 'workspaceTooltip',
 
+    /**  Whether to hide gbr tooltip */
+    NVP_SHOULD_HIDE_GBR_TOOLTIP: 'nvp_should_hide_gbr_tooltip',
+
     /** Does this user have push notifications enabled for this device? */
     PUSH_NOTIFICATIONS_ENABLED: 'pushNotificationsEnabled',
 
@@ -949,6 +952,7 @@ type OnyxValuesMapping = {
     [ONYXKEYS.NVP_PRIVATE_AMOUNT_OWED]: number;
     [ONYXKEYS.NVP_PRIVATE_OWNER_BILLING_GRACE_PERIOD_END]: number;
     [ONYXKEYS.NVP_WORKSPACE_TOOLTIP]: OnyxTypes.WorkspaceTooltip;
+    [ONYXKEYS.NVP_SHOULD_HIDE_GBR_TOOLTIP]: boolean;
     [ONYXKEYS.NVP_PRIVATE_CANCELLATION_DETAILS]: OnyxTypes.CancellationDetails[];
     [ONYXKEYS.APPROVAL_WORKFLOW]: OnyxTypes.ApprovalWorkflowOnyx;
     [ONYXKEYS.IMPORTED_SPREADSHEET]: OnyxTypes.ImportedSpreadsheet;

src/components/LHNOptionsList/LHNOptionsList.tsx

@@ -24,6 +24,7 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {PersonalDetails} from '@src/types/onyx';
 import OptionRowLHNData from './OptionRowLHNData';
+import OptionRowRendererComponent from './OptionRowRendererComponent';
 import type {LHNOptionsListProps, RenderItemProps} from './types';
 
 const keyExtractor = (item: string) => `report_${item}`;
@@ -267,6 +268,7 @@ function LHNOptionsList({style, contentContainerStyles, data, onSelectRow, optio
                     ref={flashListRef}
                     indicatorStyle="white"
                     keyboardShouldPersistTaps="always"
+                    CellRendererComponent={OptionRowRendererComponent}
                     contentContainerStyle={StyleSheet.flatten(contentContainerStyles)}
                     data={data}
                     testID="lhn-options-list"

src/components/LHNOptionsList/OptionRowRendererComponent/index.native.tsx

@@ -0,0 +1,16 @@
+import {CellContainer} from '@shopify/flash-list';
+import type {CellContainerProps} from '@shopify/flash-list/dist/native/cell-container/CellContainer';
+
+function OptionRowRendererComponent(props: CellContainerProps) {
+    return (
+        <CellContainer
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+            style={[props.style, {zIndex: -props.index}]}
+        />
+    );
+}
+
+OptionRowRendererComponent.displayName = 'OptionRowRendererComponent';
+
+export default OptionRowRendererComponent;

src/components/LHNOptionsList/OptionRowRendererComponent/index.tsx

@@ -0,0 +1,3 @@
+const OptionRowRendererComponent = undefined;
+
+export default OptionRowRendererComponent;

src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx

@@ -1,19 +1,21 @@
-import React, {memo, useEffect, useRef} from 'react';
-import {InteractionManager} from 'react-native';
+import React, {memo, useEffect, useRef, useState} from 'react';
 import type {LayoutRectangle, NativeSyntheticEvent} from 'react-native';
 import GenericTooltip from '@components/Tooltip/GenericTooltip';
 import type {EducationalTooltipProps} from '@components/Tooltip/types';
-import CONST from '@src/CONST';
+import measureTooltipCoordinate from './measureTooltipCoordinate';
 
 type LayoutChangeEventWithTarget = NativeSyntheticEvent<{layout: LayoutRectangle; target: HTMLElement}>;
 
 /**
  * A component used to wrap an element intended for displaying a tooltip.
  * This tooltip would show immediately without user's interaction and hide after 5 seconds.
  */
-function BaseEducationalTooltip({children, shouldAutoDismiss = false, ...props}: EducationalTooltipProps) {
+function BaseEducationalTooltip({children, shouldAutoDismiss = false, shouldRender = true, ...props}: EducationalTooltipProps) {
     const hideTooltipRef = useRef<() => void>();
 
+    const [shouldMeasure, setShouldMeasure] = useState(false);
+    const show = useRef<() => void>();
+
     useEffect(
         () => () => {
             if (!hideTooltipRef.current) {
@@ -37,6 +39,16 @@ function BaseEducationalTooltip({children, shouldAutoDismiss = false, ...props}:
         };
     }, [shouldAutoDismiss]);
 
+    useEffect(() => {
+        if (!shouldRender || !shouldMeasure) {
+            return;
+        }
+        // When tooltip is used inside an animated view (e.g. popover), we need to wait for the animation to finish before measuring content.
+        setTimeout(() => {
+            show.current?.();
+        }, 500);
+    }, [shouldMeasure, shouldRender]);
+
     return (
         <GenericTooltip
             shouldForceAnimate
@@ -48,22 +60,12 @@ function BaseEducationalTooltip({children, shouldAutoDismiss = false, ...props}:
                 hideTooltipRef.current = hideTooltip;
                 return React.cloneElement(children as React.ReactElement, {
                     onLayout: (e: LayoutChangeEventWithTarget) => {
+                        if (!shouldMeasure) {
+                            setShouldMeasure(true);
+                        }
                         // e.target is specific to native, use e.nativeEvent.target on web instead
                         const target = e.target || e.nativeEvent.target;
-                        // When tooltip is used inside an animated view (e.g. popover), we need to wait for the animation to finish before measuring content.
-                        setTimeout(() => {
-                            InteractionManager.runAfterInteractions(() => {
-                                target?.measure((fx, fy, width, height, px, py) => {
-                                    updateTargetBounds({
-                                        height,
-                                        width,
-                                        x: px,
-                                        y: py,
-                                    });
-                                    showTooltip();
-                                });
-                            });
-                        }, CONST.ANIMATED_TRANSITION);
+                        show.current = () => measureTooltipCoordinate(target, updateTargetBounds, showTooltip);
                     },
                 });
             }}

src/components/Tooltip/EducationalTooltip/index.tsx

@@ -2,11 +2,7 @@ import React from 'react';
 import type {TooltipExtendedProps} from '@components/Tooltip/types';
 import BaseEducationalTooltip from './BaseEducationalTooltip';
 
-function EducationalTooltip({shouldRender = true, children, ...props}: TooltipExtendedProps) {
-    if (!shouldRender) {
-        return children;
-    }
-
+function EducationalTooltip({children, ...props}: TooltipExtendedProps) {
     return (
         <BaseEducationalTooltip
             // eslint-disable-next-line react/jsx-props-no-spreading

src/components/Tooltip/EducationalTooltip/measureTooltipCoordinate/index.android.ts

@@ -0,0 +1,9 @@
+import type React from 'react';
+import type {LayoutRectangle, NativeMethods} from 'react-native';
+
+export default function measureTooltipCoordinate(target: React.Component & Readonly<NativeMethods>, updateTargetBounds: (rect: LayoutRectangle) => void, showTooltip: () => void) {
+    return target?.measure((x, y, width, height, px, py) => {
+        updateTargetBounds({height, width, x: px, y: py});
+        showTooltip();
+    });
+}

src/components/Tooltip/EducationalTooltip/measureTooltipCoordinate/index.ts

@@ -0,0 +1,9 @@
+import type React from 'react';
+import type {LayoutRectangle, NativeMethods} from 'react-native';
+
+export default function measureTooltipCoordinate(target: React.Component & Readonly<NativeMethods>, updateTargetBounds: (rect: LayoutRectangle) => void, showTooltip: () => void) {
+    return target?.measureInWindow((x, y, width, height) => {
+        updateTargetBounds({height, width, x, y});
+        showTooltip();
+    });
+}

src/components/Tooltip/types.ts

@@ -75,6 +75,9 @@ type EducationalTooltipProps = ChildrenProps &
     SharedTooltipProps & {
         /** Whether to automatically dismiss the tooltip after 5 seconds */
         shouldAutoDismiss?: boolean;
+
+        /** Whether the actual Tooltip should be rendered. If false, it's just going to return the children */
+        shouldRender?: boolean;
     };
 
 type TooltipExtendedProps = (EducationalTooltipProps | TooltipProps) & {

src/languages/en.ts

@@ -660,6 +660,7 @@ export default {
         listOfChatMessages: 'List of chat messages',
         listOfChats: 'List of chats',
         saveTheWorld: 'Save the world',
+        tooltip: 'Get started here!',
     },
     allSettingsScreen: {
         subscription: 'Subscription',

src/languages/es.ts

@@ -653,6 +653,7 @@ export default {
         listOfChatMessages: 'Lista de mensajes del chat',
         listOfChats: 'lista de chats',
         saveTheWorld: 'Salvar el mundo',
+        tooltip: '¡Comienza aquí!',
     },
     allSettingsScreen: {
         subscription: 'Suscripcion',

src/libs/actions/User.ts

@@ -1307,6 +1307,10 @@ function dismissWorkspaceTooltip() {
     Onyx.merge(ONYXKEYS.NVP_WORKSPACE_TOOLTIP, {shouldShow: false});
 }
 
+function dismissGBRTooltip() {
+    Onyx.merge(ONYXKEYS.NVP_SHOULD_HIDE_GBR_TOOLTIP, true);
+}
+
 function requestRefund() {
     API.write(WRITE_COMMANDS.REQUEST_REFUND, null);
 }
@@ -1349,4 +1353,5 @@ export {
     requestValidateCodeAction,
     addPendingContactMethod,
     clearValidateCodeActionError,
+    dismissGBRTooltip,
 };

src/styles/variables.ts

@@ -251,6 +251,7 @@ export default {
 
     composerTooltipShiftHorizontal: 10,
     composerTooltipShiftVertical: -10,
+    gbrTooltipShiftHorizontal: -20,
 
     h20: 20,
     h28: 28,