From f51a3cfecc000c0a655efd30cb5c042772d6a59f Mon Sep 17 00:00:00 2001 From: Rutika Pawar <183392827+twilight2294@users.noreply.github.com> Date: Thu, 23 Jan 2025 17:58:44 +0530 Subject: [PATCH 01/11] unmask product training tooltips --- src/components/ProductTrainingContext/index.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/ProductTrainingContext/index.tsx b/src/components/ProductTrainingContext/index.tsx index a7806574126d..788e9b633088 100644 --- a/src/components/ProductTrainingContext/index.tsx +++ b/src/components/ProductTrainingContext/index.tsx @@ -176,7 +176,10 @@ const useProductTrainingContext = (tooltipName: ProductTrainingTooltipName, shou const renderProductTrainingTooltip = useCallback(() => { const tooltip = TOOLTIPS[tooltipName]; return ( - + Date: Tue, 28 Jan 2025 14:22:42 +0530 Subject: [PATCH 02/11] unmask feature training modal --- src/components/FeatureTrainingModal.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/FeatureTrainingModal.tsx b/src/components/FeatureTrainingModal.tsx index 5c9263e911b0..f7d29ec9a48d 100644 --- a/src/components/FeatureTrainingModal.tsx +++ b/src/components/FeatureTrainingModal.tsx @@ -286,7 +286,10 @@ function FeatureTrainingModal({ ...modalInnerContainerStyle, }} > - + {renderIllustration()} From 096b5afd1e79f915e2a82158339b28b06401a894 Mon Sep 17 00:00:00 2001 From: Rutika Pawar <183392827+twilight2294@users.noreply.github.com> Date: Tue, 28 Jan 2025 14:23:11 +0530 Subject: [PATCH 03/11] unmask nudge migration modal --- src/components/MigratedUserWelcomeModal.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/MigratedUserWelcomeModal.tsx b/src/components/MigratedUserWelcomeModal.tsx index 312f6e0f77d0..3ae32e380473 100644 --- a/src/components/MigratedUserWelcomeModal.tsx +++ b/src/components/MigratedUserWelcomeModal.tsx @@ -54,7 +54,10 @@ function OnboardingWelcomeVideo() { contentOuterContainerStyles={!shouldUseNarrowLayout && [styles.mt8, styles.mh8]} modalInnerContainerStyle={{...styles.pt0, ...(shouldUseNarrowLayout ? {} : styles.pb8)}} > - + {ExpensifyFeatures.map(({translationKey, icon}) => ( Date: Tue, 28 Jan 2025 14:23:45 +0530 Subject: [PATCH 04/11] unmask tooltip for web and desktop --- src/components/Tooltip/BaseGenericTooltip/index.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/components/Tooltip/BaseGenericTooltip/index.tsx b/src/components/Tooltip/BaseGenericTooltip/index.tsx index 9ae49defc0fa..b98852ae7b63 100644 --- a/src/components/Tooltip/BaseGenericTooltip/index.tsx +++ b/src/components/Tooltip/BaseGenericTooltip/index.tsx @@ -122,12 +122,20 @@ function BaseGenericTooltip({ let content; if (renderTooltipContent) { - content = {renderTooltipContent()}; + content = ( + + {renderTooltipContent()} + + ); } else { content = ( Date: Tue, 28 Jan 2025 21:20:41 +0530 Subject: [PATCH 05/11] unmask tooltips on native --- src/components/Tooltip/BaseGenericTooltip/index.native.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Tooltip/BaseGenericTooltip/index.native.tsx b/src/components/Tooltip/BaseGenericTooltip/index.native.tsx index 0408d9bd20e2..a3cff5919442 100644 --- a/src/components/Tooltip/BaseGenericTooltip/index.native.tsx +++ b/src/components/Tooltip/BaseGenericTooltip/index.native.tsx @@ -103,12 +103,13 @@ function BaseGenericTooltip({ let content; if (renderTooltipContent) { - content = {renderTooltipContent()}; + content = {renderTooltipContent()}; } else { content = ( {text} From ef17bd108b1fc72b3b6b9bc80e0be8859196bba9 Mon Sep 17 00:00:00 2001 From: Rutika Pawar <183392827+twilight2294@users.noreply.github.com> Date: Tue, 4 Feb 2025 06:17:35 +0000 Subject: [PATCH 06/11] update usage to CONST.FULL_STORY.UNMASK and use parseFSAttributes --- src/components/FeatureTrainingModal.tsx | 8 ++++++-- src/components/MigratedUserWelcomeModal.tsx | 8 ++++++-- src/components/ProductTrainingContext/index.tsx | 8 ++++++-- .../Tooltip/BaseGenericTooltip/index.native.tsx | 10 +++++++--- src/components/Tooltip/BaseGenericTooltip/index.tsx | 8 ++++++-- 5 files changed, 31 insertions(+), 11 deletions(-) diff --git a/src/components/FeatureTrainingModal.tsx b/src/components/FeatureTrainingModal.tsx index f7d29ec9a48d..90aaf7422f37 100644 --- a/src/components/FeatureTrainingModal.tsx +++ b/src/components/FeatureTrainingModal.tsx @@ -1,6 +1,6 @@ import type {VideoReadyForDisplayEvent} from 'expo-av'; import type {ImageContentFit} from 'expo-image'; -import React, {useCallback, useEffect, useState} from 'react'; +import React, {useCallback, useEffect, useLayoutEffect, useState} from 'react'; import {InteractionManager, View} from 'react-native'; import type {StyleProp, ViewStyle} from 'react-native'; import {GestureHandlerRootView} from 'react-native-gesture-handler'; @@ -10,6 +10,7 @@ import useNetwork from '@hooks/useNetwork'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; +import {parseFSAttributes} from '@libs/Fullstory'; import Navigation from '@libs/Navigation/Navigation'; import variables from '@styles/variables'; import {dismissTrackTrainingModal} from '@userActions/User'; @@ -264,6 +265,9 @@ function FeatureTrainingModal({ onConfirm?.(); }, [onConfirm, closeModal]); + // Parse Fullstory attributes on initial render + useLayoutEffect(parseFSAttributes, []); + return ( {({safeAreaPaddingBottomStyle}) => ( @@ -288,7 +292,7 @@ function FeatureTrainingModal({ > {renderIllustration()} diff --git a/src/components/MigratedUserWelcomeModal.tsx b/src/components/MigratedUserWelcomeModal.tsx index 3ae32e380473..f8c78e79c48b 100644 --- a/src/components/MigratedUserWelcomeModal.tsx +++ b/src/components/MigratedUserWelcomeModal.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, {useLayoutEffect} from 'react'; import {View} from 'react-native'; import useLocalize from '@hooks/useLocalize'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; @@ -6,6 +6,7 @@ import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; import {dismissProductTraining} from '@libs/actions/Welcome'; import convertToLTR from '@libs/convertToLTR'; +import {parseFSAttributes} from '@libs/Fullstory'; import variables from '@styles/variables'; import CONST from '@src/CONST'; import type {FeatureListItem} from './FeatureList'; @@ -36,6 +37,9 @@ function OnboardingWelcomeVideo() { const StyleUtils = useStyleUtils(); const {shouldUseNarrowLayout} = useResponsiveLayout(); + // Parse Fullstory attributes on initial render + useLayoutEffect(parseFSAttributes, []); + return ( {ExpensifyFeatures.map(({translationKey, icon}) => ( { const tooltip = TOOLTIPS[tooltipName]; return ( {renderTooltipContent()}; + content = {renderTooltipContent()}; } else { content = ( {text} diff --git a/src/components/Tooltip/BaseGenericTooltip/index.tsx b/src/components/Tooltip/BaseGenericTooltip/index.tsx index b98852ae7b63..8eb89b6d1e30 100644 --- a/src/components/Tooltip/BaseGenericTooltip/index.tsx +++ b/src/components/Tooltip/BaseGenericTooltip/index.tsx @@ -8,6 +8,7 @@ import TransparentOverlay from '@components/AutoCompleteSuggestions/AutoComplete import {PopoverContext} from '@components/PopoverProvider'; import Text from '@components/Text'; import useStyleUtils from '@hooks/useStyleUtils'; +import {parseFSAttributes} from '@libs/Fullstory'; import CONST from '@src/CONST'; import textRef from '@src/types/utils/textRef'; import viewRef from '@src/types/utils/viewRef'; @@ -120,12 +121,15 @@ function BaseGenericTooltip({ return StyleUtils.getTooltipAnimatedStyles({tooltipContentWidth: contentMeasuredWidth, tooltipWrapperHeight: wrapperMeasuredHeight, currentSize: animation}); }); + // Parse Fullstory attributes on initial render + useLayoutEffect(parseFSAttributes, []); + let content; if (renderTooltipContent) { content = ( {renderTooltipContent()} @@ -135,7 +139,7 @@ function BaseGenericTooltip({ Date: Tue, 4 Feb 2025 07:14:50 +0000 Subject: [PATCH 07/11] fix prettier --- src/components/Tooltip/BaseGenericTooltip/index.native.tsx | 2 +- src/components/Tooltip/BaseGenericTooltip/index.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Tooltip/BaseGenericTooltip/index.native.tsx b/src/components/Tooltip/BaseGenericTooltip/index.native.tsx index ebdef6247558..125ed2f42874 100644 --- a/src/components/Tooltip/BaseGenericTooltip/index.native.tsx +++ b/src/components/Tooltip/BaseGenericTooltip/index.native.tsx @@ -101,7 +101,7 @@ function BaseGenericTooltip({ currentSize: animation, }); }); - + // Parse Fullstory attributes on initial render useLayoutEffect(parseFSAttributes, []); diff --git a/src/components/Tooltip/BaseGenericTooltip/index.tsx b/src/components/Tooltip/BaseGenericTooltip/index.tsx index 8eb89b6d1e30..4d0c16b58ea3 100644 --- a/src/components/Tooltip/BaseGenericTooltip/index.tsx +++ b/src/components/Tooltip/BaseGenericTooltip/index.tsx @@ -123,7 +123,7 @@ function BaseGenericTooltip({ // Parse Fullstory attributes on initial render useLayoutEffect(parseFSAttributes, []); - + let content; if (renderTooltipContent) { content = ( From d8f851167e632fe4327cb3e050105eecaea24a81 Mon Sep 17 00:00:00 2001 From: Rutika Pawar <183392827+twilight2294@users.noreply.github.com> Date: Mon, 10 Feb 2025 06:14:35 +0000 Subject: [PATCH 08/11] fix failing tests and add testID --- src/components/FeatureTrainingModal.tsx | 1 + src/components/MigratedUserWelcomeModal.tsx | 1 + src/components/ProductTrainingContext/index.tsx | 1 + .../Tooltip/BaseGenericTooltip/index.native.tsx | 10 +++++++++- src/components/Tooltip/BaseGenericTooltip/index.tsx | 2 ++ tests/ui/ResizeScreenTests.tsx | 7 +++++++ tests/ui/components/ProductTrainingContextProvider.tsx | 8 ++++++++ 7 files changed, 29 insertions(+), 1 deletion(-) diff --git a/src/components/FeatureTrainingModal.tsx b/src/components/FeatureTrainingModal.tsx index 90aaf7422f37..38bbf7ecfb6a 100644 --- a/src/components/FeatureTrainingModal.tsx +++ b/src/components/FeatureTrainingModal.tsx @@ -293,6 +293,7 @@ function FeatureTrainingModal({ {renderIllustration()} diff --git a/src/components/MigratedUserWelcomeModal.tsx b/src/components/MigratedUserWelcomeModal.tsx index f8c78e79c48b..a21b55771327 100644 --- a/src/components/MigratedUserWelcomeModal.tsx +++ b/src/components/MigratedUserWelcomeModal.tsx @@ -61,6 +61,7 @@ function OnboardingWelcomeVideo() { {ExpensifyFeatures.map(({translationKey, icon}) => ( {renderTooltipContent()}; + content = ( + + {renderTooltipContent()} + + ); } else { content = ( {text} diff --git a/src/components/Tooltip/BaseGenericTooltip/index.tsx b/src/components/Tooltip/BaseGenericTooltip/index.tsx index 4d0c16b58ea3..597f3eb52256 100644 --- a/src/components/Tooltip/BaseGenericTooltip/index.tsx +++ b/src/components/Tooltip/BaseGenericTooltip/index.tsx @@ -130,6 +130,7 @@ function BaseGenericTooltip({ {renderTooltipContent()} @@ -140,6 +141,7 @@ function BaseGenericTooltip({ numberOfLines={numberOfLines} style={textStyle} fsClass={CONST.FULL_STORY.UNMASK} + testID={CONST.FULL_STORY.UNMASK} > jest.fn()); jest.mock('@pages/settings/InitialSettingsPage'); jest.mock('@pages/settings/Profile/ProfilePage'); jest.mock('@libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar'); +// Mock Fullstory library dependency +jest.mock('@libs/Fullstory', () => ({ + default: { + consentAndIdentify: jest.fn(), + }, + parseFSAttributes: jest.fn(), +})); const DEFAULT_USE_RESPONSIVE_LAYOUT_VALUE: ResponsiveLayoutResult = { shouldUseNarrowLayout: true, diff --git a/tests/ui/components/ProductTrainingContextProvider.tsx b/tests/ui/components/ProductTrainingContextProvider.tsx index d54c8f8c446e..2cdb64c11824 100644 --- a/tests/ui/components/ProductTrainingContextProvider.tsx +++ b/tests/ui/components/ProductTrainingContextProvider.tsx @@ -15,6 +15,14 @@ jest.mock('@hooks/useResponsiveLayout', () => ({ default: jest.fn(), })); +// Mock Fullstory library dependency +jest.mock('@libs/Fullstory', () => ({ + default: { + consentAndIdentify: jest.fn(), + }, + parseFSAttributes: jest.fn(), +})); + const DEFAULT_USE_RESPONSIVE_LAYOUT_VALUE = { shouldUseNarrowLayout: true, isSmallScreenWidth: true, From 094864f6777be7fe384c421eeee4bd275188f309 Mon Sep 17 00:00:00 2001 From: Rutika Pawar <183392827+twilight2294@users.noreply.github.com> Date: Wed, 12 Feb 2025 07:03:04 +0000 Subject: [PATCH 09/11] update comment --- src/components/FeatureTrainingModal.tsx | 7 ++++++- src/components/MigratedUserWelcomeModal.tsx | 7 ++++++- src/components/ProductTrainingContext/index.tsx | 7 ++++++- src/components/Tooltip/BaseGenericTooltip/index.native.tsx | 7 ++++++- src/components/Tooltip/BaseGenericTooltip/index.tsx | 7 ++++++- 5 files changed, 30 insertions(+), 5 deletions(-) diff --git a/src/components/FeatureTrainingModal.tsx b/src/components/FeatureTrainingModal.tsx index 38bbf7ecfb6a..32c86a0af476 100644 --- a/src/components/FeatureTrainingModal.tsx +++ b/src/components/FeatureTrainingModal.tsx @@ -265,7 +265,12 @@ function FeatureTrainingModal({ onConfirm?.(); }, [onConfirm, closeModal]); - // Parse Fullstory attributes on initial render + /** + * Extracts values from the non-scraped attribute WEB_PROP_ATTR at build time + * to ensure necessary properties are available for further processing. + * Reevaluates "fs-class" to dynamically apply styles or behavior based on + * updated attribute values. + */ useLayoutEffect(parseFSAttributes, []); return ( diff --git a/src/components/MigratedUserWelcomeModal.tsx b/src/components/MigratedUserWelcomeModal.tsx index a21b55771327..6a1221797bda 100644 --- a/src/components/MigratedUserWelcomeModal.tsx +++ b/src/components/MigratedUserWelcomeModal.tsx @@ -37,7 +37,12 @@ function OnboardingWelcomeVideo() { const StyleUtils = useStyleUtils(); const {shouldUseNarrowLayout} = useResponsiveLayout(); - // Parse Fullstory attributes on initial render + /** + * Extracts values from the non-scraped attribute WEB_PROP_ATTR at build time + * to ensure necessary properties are available for further processing. + * Reevaluates "fs-class" to dynamically apply styles or behavior based on + * updated attribute values. + */ useLayoutEffect(parseFSAttributes, []); return ( diff --git a/src/components/ProductTrainingContext/index.tsx b/src/components/ProductTrainingContext/index.tsx index 76ab1ff96eac..829595f992ed 100644 --- a/src/components/ProductTrainingContext/index.tsx +++ b/src/components/ProductTrainingContext/index.tsx @@ -174,7 +174,12 @@ const useProductTrainingContext = (tooltipName: ProductTrainingTooltipName, shou }; }, [tooltipName, registerTooltip, unregisterTooltip, shouldShow]); - // Parse Fullstory attributes on initial render + /** + * Extracts values from the non-scraped attribute WEB_PROP_ATTR at build time + * to ensure necessary properties are available for further processing. + * Reevaluates "fs-class" to dynamically apply styles or behavior based on + * updated attribute values. + */ useLayoutEffect(parseFSAttributes, []); const renderProductTrainingTooltip = useCallback(() => { diff --git a/src/components/Tooltip/BaseGenericTooltip/index.native.tsx b/src/components/Tooltip/BaseGenericTooltip/index.native.tsx index c2bcb224fec3..ad37f59c8ef5 100644 --- a/src/components/Tooltip/BaseGenericTooltip/index.native.tsx +++ b/src/components/Tooltip/BaseGenericTooltip/index.native.tsx @@ -102,7 +102,12 @@ function BaseGenericTooltip({ }); }); - // Parse Fullstory attributes on initial render + /** + * Extracts values from the non-scraped attribute WEB_PROP_ATTR at build time + * to ensure necessary properties are available for further processing. + * Reevaluates "fs-class" to dynamically apply styles or behavior based on + * updated attribute values. + */ useLayoutEffect(parseFSAttributes, []); let content; diff --git a/src/components/Tooltip/BaseGenericTooltip/index.tsx b/src/components/Tooltip/BaseGenericTooltip/index.tsx index 597f3eb52256..bfa84cd1830d 100644 --- a/src/components/Tooltip/BaseGenericTooltip/index.tsx +++ b/src/components/Tooltip/BaseGenericTooltip/index.tsx @@ -121,7 +121,12 @@ function BaseGenericTooltip({ return StyleUtils.getTooltipAnimatedStyles({tooltipContentWidth: contentMeasuredWidth, tooltipWrapperHeight: wrapperMeasuredHeight, currentSize: animation}); }); - // Parse Fullstory attributes on initial render + /** + * Extracts values from the non-scraped attribute WEB_PROP_ATTR at build time + * to ensure necessary properties are available for further processing. + * Reevaluates "fs-class" to dynamically apply styles or behavior based on + * updated attribute values. + */ useLayoutEffect(parseFSAttributes, []); let content; From 2c1201f9a2f1d26bc9ef4599db08b89cab47237a Mon Sep 17 00:00:00 2001 From: Rutika Pawar <183392827+twilight2294@users.noreply.github.com> Date: Wed, 12 Feb 2025 12:46:22 +0530 Subject: [PATCH 10/11] Update tests/navigation/ResizeScreenTests.tsx --- tests/navigation/ResizeScreenTests.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/tests/navigation/ResizeScreenTests.tsx b/tests/navigation/ResizeScreenTests.tsx index f81de3de946a..d4d547ab1314 100644 --- a/tests/navigation/ResizeScreenTests.tsx +++ b/tests/navigation/ResizeScreenTests.tsx @@ -21,7 +21,6 @@ jest.mock('@libs/getIsNarrowLayout', () => jest.fn()); jest.mock('@pages/settings/InitialSettingsPage'); jest.mock('@pages/settings/Profile/ProfilePage'); -jest.mock('@libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar'); // Mock Fullstory library dependency jest.mock('@libs/Fullstory', () => ({ default: { From eaaae346f21026fb3a998cf4dea37a386566857b Mon Sep 17 00:00:00 2001 From: Rutika Pawar <183392827+twilight2294@users.noreply.github.com> Date: Wed, 12 Feb 2025 12:46:30 +0530 Subject: [PATCH 11/11] Update tests/navigation/ResizeScreenTests.tsx --- tests/navigation/ResizeScreenTests.tsx | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/tests/navigation/ResizeScreenTests.tsx b/tests/navigation/ResizeScreenTests.tsx index d4d547ab1314..3f86e56e32af 100644 --- a/tests/navigation/ResizeScreenTests.tsx +++ b/tests/navigation/ResizeScreenTests.tsx @@ -29,18 +29,6 @@ jest.mock('@libs/Fullstory', () => ({ parseFSAttributes: jest.fn(), })); -const DEFAULT_USE_RESPONSIVE_LAYOUT_VALUE: ResponsiveLayoutResult = { - shouldUseNarrowLayout: true, - isSmallScreenWidth: true, - isInNarrowPaneModal: false, - isExtraSmallScreenHeight: false, - isMediumScreenWidth: false, - isLargeScreenWidth: false, - isExtraSmallScreenWidth: false, - isSmallScreen: false, - onboardingIsMediumOrLargerScreenWidth: false, -}; - const INITIAL_STATE = { index: 0, routes: [