Refactor useProductTrainingContext to improve tooltip visibility logic

Expensify · Dec 9, 2024 · 2600133 · 2600133
1 parent a8c9a61
commit 2600133
Showing 1 changed file with 7 additions and 6 deletions.
diff --git a/src/components/ProductTrainingContext/index.tsx b/src/components/ProductTrainingContext/index.tsx
@@ -150,6 +150,7 @@ function ProductTrainingContextProvider({children}: ChildrenProps) {
                     />
                     <Text style={styles.renderHTMLTitle}>
                         <RenderHTML html={processedContent()} />
+                        {/* {processedContent()} */}
                     </Text>
                 </View>
             );
@@ -170,7 +171,7 @@ function ProductTrainingContextProvider({children}: ChildrenProps) {
     return <ProductTrainingContext.Provider value={contextValue}>{children}</ProductTrainingContext.Provider>;
 }
 
-const useProductTrainingContext = (tooltipName: ProductTrainingTooltipName, shouldRegister = true) => {
+const useProductTrainingContext = (tooltipName: ProductTrainingTooltipName, shouldShow = true) => {
     const context = useContext(ProductTrainingContext);
     if (!context) {
         throw new Error('useProductTourContext must be used within a ProductTourProvider');
@@ -179,26 +180,26 @@ const useProductTrainingContext = (tooltipName: ProductTrainingTooltipName, shou
     const {shouldRenderTooltip, registerTooltip, unregisterTooltip, renderProductTrainingTooltip} = context;
 
     useEffect(() => {
-        if (shouldRegister) {
+        if (shouldShow) {
             registerTooltip(tooltipName);
             return () => {
                 unregisterTooltip(tooltipName);
             };
         }
         return undefined;
-    }, [tooltipName, registerTooltip, unregisterTooltip, shouldRegister]);
+    }, [tooltipName, registerTooltip, unregisterTooltip, shouldShow]);
 
     const shouldShowProductTrainingTooltip = useMemo(() => {
-        return shouldRenderTooltip(tooltipName);
-    }, [tooltipName, shouldRenderTooltip]);
+        return shouldShow && shouldRenderTooltip(tooltipName);
+    }, [shouldShow, shouldRenderTooltip, tooltipName]);
 
     const hideProductTrainingTooltip = useCallback(() => {
         const tooltip = PRODUCT_TRAINING_TOOLTIP_DATA[tooltipName];
         tooltip.onHideTooltip();
         unregisterTooltip(tooltipName);
     }, [tooltipName, unregisterTooltip]);
 
-    if (!tooltipName) {
+    if (!shouldShow) {
         return {
             renderProductTrainingTooltip: () => null,
             hideProductTrainingTooltip: () => {},