[No QA] Fix Fullstory masking logic on App

jest/setupMockFullstoryLib.ts

@@ -18,6 +18,7 @@ export default function mockFSLibrary() {
             getChatFSClass: jest.fn(),
             init: jest.fn(),
             onReady: jest.fn(),
+            shouldInitialize: jest.fn().mockReturnValue(false),
             consent: jest.fn(),
             identify: jest.fn(),
             consentAndIdentify: jest.fn(),

package.json

@@ -47,7 +47,7 @@
     "test:debug": "TZ=utc NODE_OPTIONS='--inspect-brk --experimental-vm-modules' jest --runInBand",
     "perf-test": "NODE_OPTIONS=--experimental-vm-modules npx reassure",
     "typecheck": "NODE_OPTIONS=--max_old_space_size=8192 tsc",
-    "lint": "NODE_OPTIONS=--max_old_space_size=8192 eslint . --max-warnings=111 --cache --cache-location=node_modules/.cache/eslint --concurrency=auto",
+    "lint": "NODE_OPTIONS=--max_old_space_size=8192 eslint . --max-warnings=112 --cache --cache-location=node_modules/.cache/eslint --concurrency=auto",
     "lint-changed": "NODE_OPTIONS=--max_old_space_size=8192 ./scripts/lintChanged.sh",
     "check-lazy-loading": "ts-node scripts/checkLazyLoading.ts",
     "lint-watch": "npx eslint-watch --watch --changed",

src/components/AddPaymentCard/PaymentCardForm.tsx

@@ -262,7 +262,6 @@ function PaymentCardForm({
                 submitButtonText={submitButtonText}
                 scrollContextEnabled
                 style={[styles.mh5, styles.flexGrow1]}
-                forwardedFSClass={CONST.FULLSTORY.CLASS.MASK}
             >
                 <InputWrapper
                     InputComponent={TextInput}
@@ -275,6 +274,7 @@ function PaymentCardForm({
                     inputMode={CONST.INPUT_MODE.NUMERIC}
                     onChangeText={onChangeCardNumber}
                     value={cardNumber}
+                    forwardedFSClass={CONST.FULLSTORY.CLASS.MASK}
                 />
                 <InputWrapper
                     InputComponent={TextInput}
@@ -285,6 +285,7 @@ function PaymentCardForm({
                     role={CONST.ROLE.PRESENTATION}
                     containerStyles={[styles.mt5]}
                     spellCheck={false}
+                    forwardedFSClass={CONST.FULLSTORY.CLASS.MASK}
                 />
                 <View style={[styles.flexRow, styles.mt5]}>
                     <View style={[styles.mr2, styles.flex1]}>
@@ -301,6 +302,7 @@ function PaymentCardForm({
                             placeholder={translate(label.defaults.expirationDate)}
                             inputMode={CONST.INPUT_MODE.NUMERIC}
                             maxLength={5}
+                            forwardedFSClass={CONST.FULLSTORY.CLASS.MASK}
                         />
                     </View>
                     <View style={styles.flex1}>
@@ -313,6 +315,7 @@ function PaymentCardForm({
                             role={CONST.ROLE.PRESENTATION}
                             maxLength={4}
                             inputMode={CONST.INPUT_MODE.NUMERIC}
+                            forwardedFSClass={CONST.FULLSTORY.CLASS.MASK}
                         />
                     </View>
                 </View>
@@ -327,6 +330,7 @@ function PaymentCardForm({
                             maxInputLength={CONST.FORM_CHARACTER_LIMIT}
                             // Limit the address search only to the USA until we fully can support international debit cards
                             limitSearchesToCountry={CONST.COUNTRY.US}
+                            forwardedFSClass={CONST.FULLSTORY.CLASS.MASK}
                         />
                     </View>
                 )}

src/components/AddressSearch/index.tsx

@@ -78,6 +78,7 @@ function AddressSearch({
     value,
     locationBias,
     caretHidden,
+    forwardedFSClass,
     ref,
 }: AddressSearchProps) {
     const theme = useTheme();
@@ -363,6 +364,7 @@ function AddressSearch({
                 <View
                     style={styles.w100}
                     ref={containerRef}
+                    fsClass={forwardedFSClass}
                 >
                     <GooglePlacesAutocomplete
                         disableScroll

src/components/AddressSearch/types.ts

@@ -1,6 +1,7 @@
 import type {ForwardedRef, RefObject} from 'react';
 import type {BlurEvent, StyleProp, View, ViewStyle} from 'react-native';
 import type {Place} from 'react-native-google-places-autocomplete';
+import type {ForwardedFSClassProps} from '@libs/Fullstory/types';
 import type {Country} from '@src/CONST';
 import type {Address} from '@src/types/onyx/PrivatePersonalDetails';
 
@@ -27,7 +28,7 @@ type PredefinedPlace = Place & {
     name?: string;
 };
 
-type AddressSearchProps = {
+type AddressSearchProps = ForwardedFSClassProps & {
     /** The ID used to uniquely identify the input in a Form */
     inputID?: string;
 

src/components/Composer/types.ts

@@ -1,6 +1,7 @@
 import type {Ref} from 'react';
 import type {StyleProp, TextInput, TextInputProps, TextInputSelectionChangeEvent, TextStyle} from 'react-native';
 import type {AnimatedMarkdownTextInputRef} from '@components/RNMarkdownTextInput';
+import type {ForwardedFSClassProps} from '@libs/Fullstory/types';
 import type {FileObject} from '@src/types/utils/Attachment';
 
 type TextSelection = {
@@ -14,65 +15,66 @@ type CustomSelectionChangeEvent = TextInputSelectionChangeEvent & {
     positionY?: number;
 };
 
-type ComposerProps = Omit<TextInputProps, 'onClear'> & {
-    /** Indicate whether input is multiline */
-    multiline?: boolean;
+type ComposerProps = Omit<TextInputProps, 'onClear'> &
+    ForwardedFSClassProps & {
+        /** Indicate whether input is multiline */
+        multiline?: boolean;
 
-    /** Maximum number of lines in the text input */
-    maxLines?: number;
+        /** Maximum number of lines in the text input */
+        maxLines?: number;
 
-    /** The default value of the comment box */
-    defaultValue?: string;
+        /** The default value of the comment box */
+        defaultValue?: string;
 
-    /** The value of the comment box */
-    value?: string;
+        /** The value of the comment box */
+        value?: string;
 
-    /**
-     * Callback when the input was cleared using the .clear ref method.
-     * The text parameter will be the value of the text that was cleared.
-     */
-    onClear?: (text: string) => void;
+        /**
+         * Callback when the input was cleared using the .clear ref method.
+         * The text parameter will be the value of the text that was cleared.
+         */
+        onClear?: (text: string) => void;
 
-    /** Callback method handle when the input is changed  */
-    onChangeText?: (numberOfLines: string) => void;
+        /** Callback method handle when the input is changed  */
+        onChangeText?: (numberOfLines: string) => void;
 
-    /** Callback method to handle pasting a file */
-    onPasteFile?: (files: FileObject | FileObject[]) => void;
+        /** Callback method to handle pasting a file */
+        onPasteFile?: (files: FileObject | FileObject[]) => void;
 
-    /** General styles to apply to the text input */
-    // eslint-disable-next-line react/forbid-prop-types
-    style?: StyleProp<TextStyle>;
+        /** General styles to apply to the text input */
+        // eslint-disable-next-line react/forbid-prop-types
+        style?: StyleProp<TextStyle>;
 
-    /** Whether or not this TextInput is disabled. */
-    isDisabled?: boolean;
+        /** Whether or not this TextInput is disabled. */
+        isDisabled?: boolean;
 
-    /** Set focus to this component the first time it renders.
+        /** Set focus to this component the first time it renders.
   Override this in case you need to set focus on one field out of many, or when you want to disable autoFocus */
-    autoFocus?: boolean;
+        autoFocus?: boolean;
 
-    /** Update selection position on change */
-    onSelectionChange?: (event: CustomSelectionChangeEvent) => void;
+        /** Update selection position on change */
+        onSelectionChange?: (event: CustomSelectionChangeEvent) => void;
 
-    /** Selection Object */
-    selection?: TextSelection;
+        /** Selection Object */
+        selection?: TextSelection;
 
-    /** Should we calculate the caret position */
-    shouldCalculateCaretPosition?: boolean;
+        /** Should we calculate the caret position */
+        shouldCalculateCaretPosition?: boolean;
 
-    /** Function to check whether composer is covered up or not */
-    checkComposerVisibility?: () => boolean;
+        /** Function to check whether composer is covered up or not */
+        checkComposerVisibility?: () => boolean;
 
-    /** Whether the full composer is open */
-    isComposerFullSize?: boolean;
+        /** Whether the full composer is open */
+        isComposerFullSize?: boolean;
 
-    /** Should make the input only scroll inside the element avoid scroll out to parent */
-    shouldContainScroll?: boolean;
+        /** Should make the input only scroll inside the element avoid scroll out to parent */
+        shouldContainScroll?: boolean;
 
-    /** Indicates whether the composer is in a group policy report. Used for disabling report mentioning style in markdown input */
-    isGroupPolicyReport?: boolean;
+        /** Indicates whether the composer is in a group policy report. Used for disabling report mentioning style in markdown input */
+        isGroupPolicyReport?: boolean;
 
-    /** Ref exposing imperative methods on the underlying text input */
-    ref?: Ref<TextInput | HTMLInputElement | HTMLTextAreaElement | AnimatedMarkdownTextInputRef>;
-};
+        /** Ref exposing imperative methods on the underlying text input */
+        ref?: Ref<TextInput | HTMLInputElement | HTMLTextAreaElement | AnimatedMarkdownTextInputRef>;
+    };
 
 export type {TextSelection, ComposerProps, CustomSelectionChangeEvent};

src/components/DatePicker/DatePickerModal.tsx

@@ -34,6 +34,7 @@ function DatePickerModal({
     onSelected,
     shouldCloseWhenBrowserNavigationChanged = false,
     shouldPositionFromTop = false,
+    forwardedFSClass,
 }: DatePickerProps) {
     const [selectedDate, setSelectedDate] = useState(value ?? defaultValue ?? undefined);
     const anchorRef = useRef<View>(null);
@@ -74,6 +75,7 @@ function DatePickerModal({
             shouldEnableNewFocusManagement
             shouldMeasureAnchorPositionFromTop={shouldPositionFromTop}
             shouldSkipRemeasurement
+            forwardedFSClass={forwardedFSClass}
         >
             <CalendarPicker
                 minDate={minDate}

src/components/DatePicker/index.tsx

@@ -31,6 +31,7 @@ function DatePicker({
     formID,
     autoFocus = false,
     shouldHideClearButton = false,
+    forwardedFSClass,
     ref,
 }: DateInputWithPickerProps) {
     const icons = useMemoizedLazyExpensifyIcons(['Calendar'] as const);
@@ -143,6 +144,7 @@ function DatePicker({
                     textInputContainerStyles={isModalVisible ? styles.borderColorFocus : {}}
                     shouldHideClearButton={shouldHideClearButton}
                     onClearInput={handleClear}
+                    forwardedFSClass={forwardedFSClass}
                 />
             </View>
 
@@ -156,6 +158,7 @@ function DatePicker({
                 onClose={closeDatePicker}
                 anchorPosition={popoverPosition}
                 shouldPositionFromTop={!isInverted}
+                forwardedFSClass={forwardedFSClass}
             />
         </>
     );

src/components/DatePicker/types.ts

@@ -1,9 +1,10 @@
 import type {ForwardedRef} from 'react';
 import type PopoverWithMeasuredContentProps from '@components/PopoverWithMeasuredContent/types';
 import type {BaseTextInputProps, BaseTextInputRef} from '@components/TextInput/BaseTextInput/types';
+import type {ForwardedFSClassProps} from '@libs/Fullstory/types';
 import type {OnyxFormValuesMapping} from '@src/ONYXKEYS';
 
-type DatePickerBaseProps = {
+type DatePickerBaseProps = ForwardedFSClassProps & {
     /**
      * The datepicker supports any value that `new Date()` can parse.
      * `onInputChange` would always be called with a Date (or null)

src/components/LHNOptionsList/OptionRowLHN.tsx

@@ -4,7 +4,7 @@
 import DisplayNames from '@components/DisplayNames';
 import Hoverable from '@components/Hoverable';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import {useSession} from '@components/OnyxListItemProvider';
 import PressableWithSecondaryInteraction from '@components/PressableWithSecondaryInteraction';
@@ -22,6 +22,7 @@
 import DateUtils from '@libs/DateUtils';
 import DomUtils from '@libs/DomUtils';
 import {containsCustomEmoji as containsCustomEmojiUtils, containsOnlyCustomEmoji} from '@libs/EmojiUtils';
+import FS from '@libs/Fullstory';
 import {shouldOptionShowTooltip, shouldUseBoldText} from '@libs/OptionsListUtils';
 import Performance from '@libs/Performance';
 import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager';
@@ -167,6 +168,8 @@
     const subscriptAvatarBorderColor = isOptionFocused ? focusedBackgroundColor : theme.sidebar;
     const firstIcon = optionItem.icons?.at(0);
 
+    const alternateTextFSClass = FS.getChatFSClass(report);
+
     const onOptionPress = (event: GestureResponderEvent | KeyboardEvent | undefined) => {
         Performance.markStart(CONST.TIMING.OPEN_REPORT);
         Timing.start(CONST.TIMING.OPEN_REPORT);
@@ -299,7 +302,7 @@
                                                     style={alternateTextStyle}
                                                     numberOfLines={1}
                                                     accessibilityLabel={translate('accessibilityHints.lastChatMessagePreview')}
-                                                    fsClass={CONST.FULLSTORY.CLASS.MASK}
+                                                    fsClass={alternateTextFSClass}
                                                 >
                                                     {alternateTextContainsCustomEmojiWithText ? (
                                                         <TextWithEmojiFragment
@@ -316,7 +319,7 @@
                                         {optionItem?.descriptiveText ? (
                                             <View
                                                 style={[styles.flexWrap]}
-                                                fsClass={CONST.FULLSTORY.CLASS.MASK}
+                                                fsClass={alternateTextFSClass}
                                             >
                                                 <Text style={[styles.textLabel]}>{optionItem.descriptiveText}</Text>
                                             </View>

src/components/MenuItem.tsx

@@ -12,6 +12,7 @@
 import convertToLTR from '@libs/convertToLTR';
 import {canUseTouchScreen, hasHoverSupport} from '@libs/DeviceCapabilities';
 import {containsCustomEmoji, containsOnlyCustomEmoji} from '@libs/EmojiUtils';
+import type {ForwardedFSClassProps} from '@libs/Fullstory/types';
 import getButtonState from '@libs/getButtonState';
 import mergeRefs from '@libs/mergeRefs';
 import Parser from '@libs/Parser';
@@ -33,7 +34,7 @@
 import FormHelpMessage from './FormHelpMessage';
 import Hoverable from './Hoverable';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 import {MenuItemGroupContext} from './MenuItemGroup';
 import PlaidCardFeedIcon from './PlaidCardFeedIcon';
 import type {PressableRef} from './Pressable/GenericPressable/types';
@@ -64,7 +65,7 @@
     icon?: undefined;
 };
 
-type MenuItemBaseProps = {
+type MenuItemBaseProps = ForwardedFSClassProps & {
     /** Reference to the outer element */
     ref?: PressableRef | Ref<View>;
 
@@ -518,6 +519,7 @@
     copyValue = title,
     copyable = false,
     hasSubMenuItems = false,
+    forwardedFSClass,
     ref,
     isFocused,
 }: MenuItemProps) {
@@ -848,7 +850,10 @@
                                                             </Text>
                                                         )}
                                                         {(!!title || !!shouldShowTitleIcon) && (
-                                                            <View style={[styles.flexRow, styles.alignItemsCenter, styles.mw100, titleWrapperStyle]}>
+                                                            <View
+                                                                style={[styles.flexRow, styles.alignItemsCenter, styles.mw100, titleWrapperStyle]}
+                                                                fsClass={forwardedFSClass}
+                                                            >
                                                                 {!!title && (shouldRenderAsHTML || (shouldParseTitle && !!html.length)) && (
                                                                     <View style={styles.renderHTMLTitle}>
                                                                         <RenderHTML html={processedTitle} />

src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx

@@ -13,14 +13,13 @@ import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import ControlSelection from '@libs/ControlSelection';
 import canUseTouchScreen from '@libs/DeviceCapabilities/canUseTouchScreen';
-import type {ForwardedFSClassProps} from '@libs/Fullstory/types';
 import {getTransactionPendingAction, isTransactionPendingDelete} from '@libs/TransactionUtils';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import type {Report, TransactionViolation} from '@src/types/onyx';
 import type {TransactionWithOptionalHighlight} from './MoneyRequestReportTransactionList';
 
-type MoneyRequestReportTransactionItemProps = ForwardedFSClassProps & {
+type MoneyRequestReportTransactionItemProps = {
     /** The transaction that is being displayed */
     transaction: TransactionWithOptionalHighlight;
 
@@ -80,7 +79,6 @@ function MoneyRequestReportTransactionItem({
     amountColumnSize,
     taxAmountColumnSize,
     scrollToNewTransaction,
-    forwardedFSClass,
     onArrowRightPress,
 }: MoneyRequestReportTransactionItemProps) {
     const {translate} = useLocalize();
@@ -137,7 +135,6 @@ function MoneyRequestReportTransactionItem({
                 disabled={isTransactionPendingDelete(transaction)}
                 ref={viewRef}
                 wrapperStyle={[animatedHighlightStyle, styles.userSelectNone]}
-                forwardedFSClass={forwardedFSClass}
             >
                 <TransactionItemRow
                     transactionItem={transaction}