Ex4 chat masking

src/CONST.ts

@@ -1623,6 +1623,7 @@ const CONST = {
         STUDENT_AMBASSADOR: '[email protected]',
         SVFG: '[email protected]',
         EXPENSIFY_EMAIL_DOMAIN: '@expensify.com',
+        EXPENSIFY_TEAM_EMAIL_DOMAIN: '@team.expensify.com',
     },
 
     CONCIERGE_DISPLAY_NAME: 'Concierge',

src/components/OnyxProvider.tsx

@@ -6,7 +6,7 @@ import createOnyxContext from './createOnyxContext';
 // Set up any providers for individual keys. This should only be used in cases where many components will subscribe to
 // the same key (e.g. FlatList renderItem components)
 const [withNetwork, NetworkProvider, NetworkContext] = createOnyxContext(ONYXKEYS.NETWORK);
-const [, PersonalDetailsProvider, , usePersonalDetails] = createOnyxContext(ONYXKEYS.PERSONAL_DETAILS_LIST);
+const [, PersonalDetailsProvider, PersonalDetailsContext, usePersonalDetails] = createOnyxContext(ONYXKEYS.PERSONAL_DETAILS_LIST);
 const [withCurrentDate, CurrentDateProvider] = createOnyxContext(ONYXKEYS.CURRENT_DATE);
 const [, BlockedFromConciergeProvider, , useBlockedFromConcierge] = createOnyxContext(ONYXKEYS.NVP_BLOCKED_FROM_CONCIERGE);
 const [, BetasProvider, BetasContext, useBetas] = createOnyxContext(ONYXKEYS.BETAS);
@@ -55,6 +55,7 @@ export {
     PreferredThemeContext,
     useBetas,
     useFrequentlyUsedEmojis,
+    PersonalDetailsContext,
     PreferredEmojiSkinToneContext,
     useBlockedFromConcierge,
     useSession,

src/libs/Fullstory/index.native.ts

@@ -1,8 +1,15 @@
 import FullStory, {FSPage} from '@fullstory/react-native';
 import type {OnyxEntry} from 'react-native-onyx';
+import {isConciergeChatReport, isExpensifyAndCustomerChat} from '@libs/ReportUtils';
 import CONST from '@src/CONST';
 import * as Environment from '@src/libs/Environment/Environment';
-import type {UserMetadata} from '@src/types/onyx';
+import type {OnyxInputOrEntry, PersonalDetailsList, Report, UserMetadata} from '@src/types/onyx';
+
+const MASK = 'fs-mask';
+const UNMASK = 'fs-unmask';
+const CUSTOMER = 'customer';
+const CONCIERGE = 'concierge';
+const OTHER = 'other';
 
 /**
  * Fullstory React-Native lib adapter
@@ -63,5 +70,44 @@ const FS = {
     },
 };
 
+/**
+ * Placeholder function for Mobile-Web compatibility.
+ */
+function parseFSAttributes(): void {
+    // pass
+}
+
+/*
+    prefix? if component name should be used as a prefix,
+    in case data-test-id attribute usage,
+    clean component name should be preserved in data-test-id.
+*/
+function getFSAttributes(name: string, mask: boolean, prefix: boolean): string {
+    if (!name && !prefix) {
+        return `${mask ? MASK : UNMASK}`;
+    }
+    // prefixed for Native apps should contain only component name
+    if (prefix) {
+        return name;
+    }
+
+    return `${name},${mask ? MASK : UNMASK}`;
+}
+
+function getChatFSAttributes(context: OnyxEntry<PersonalDetailsList>, name: string, report: OnyxInputOrEntry<Report>): string[] {
+    if (!name) {
+        return ['', ''];
+    }
+    if (isConciergeChatReport(report)) {
+        const formattedName = `${CONCIERGE}-${name}`;
+        return [`${formattedName}`, `${UNMASK},${formattedName}`];
+    }
+    if (isExpensifyAndCustomerChat(context, report)) {
+        const formattedName = `${CUSTOMER}-${name}`;
+        return [`${formattedName}`, `${UNMASK},${formattedName}`];
+    }
+    const formattedName = `${OTHER}-${name}`;
+    return [`${formattedName}`, `${MASK},${formattedName}`];
+}
 export default FS;
-export {FSPage};
+export {FSPage, parseFSAttributes, getFSAttributes, getChatFSAttributes};

src/libs/Fullstory/index.ts

@@ -1,10 +1,18 @@
 import {FullStory, init, isInitialized} from '@fullstory/browser';
 import type {OnyxEntry} from 'react-native-onyx';
+import {isConciergeChatReport, isExpensifyAndCustomerChat} from '@libs/ReportUtils';
 import CONST from '@src/CONST';
 import * as Environment from '@src/libs/Environment/Environment';
-import type {UserMetadata} from '@src/types/onyx';
+import type {OnyxInputOrEntry, PersonalDetailsList, Report, UserMetadata} from '@src/types/onyx';
 import type NavigationProperties from './types';
 
+const WEB_PROP_ATTR = 'data-testid';
+const MASK = 'fs-mask';
+const UNMASK = 'fs-unmask';
+const CUSTOMER = 'customer';
+const CONCIERGE = 'concierge';
+const OTHER = 'other';
+
 // Placeholder Browser API does not support Manual Page definition
 class FSPage {
     private pageName;
@@ -16,7 +24,9 @@ class FSPage {
         this.properties = properties;
     }
 
-    start() {}
+    start() {
+        parseFSAttributes();
+    }
 }
 
 /**
@@ -92,5 +102,73 @@ const FS = {
     init: (_value: OnyxEntry<UserMetadata>) => {},
 };
 
+/**
+ * Extract values from non-scraped at build time attribute WEB_PROP_ATTR,
+ * reevaluate "fs-class".
+ */
+function parseFSAttributes(): void {
+    window?.document?.querySelectorAll(`[${WEB_PROP_ATTR}]`).forEach((o) => {
+        const attr = o.getAttribute(WEB_PROP_ATTR) ?? '';
+        if (!/fs-/gim.test(attr)) {
+            return;
+        }
+
+        const fsAttrs = attr.match(/fs-[a-zA-Z0-9_-]+/g) ?? [];
+        o.setAttribute('fs-class', fsAttrs.join(','));
+
+        let cleanedAttrs = attr;
+        fsAttrs.forEach((fsAttr) => {
+            cleanedAttrs = cleanedAttrs.replace(fsAttr, '');
+        });
+
+        cleanedAttrs = cleanedAttrs
+            .replace(/,+/g, ',')
+            .replace(/\s*,\s*/g, ',')
+            .replace(/^,+|,+$/g, '')
+            .replace(/\s+/g, ' ')
+            .trim();
+
+        if (cleanedAttrs) {
+            o.setAttribute(WEB_PROP_ATTR, cleanedAttrs);
+        } else {
+            o.removeAttribute(WEB_PROP_ATTR);
+        }
+    });
+}
+
+/*
+    prefix? if component name should be used as a prefix,
+    in case data-test-id attribute usage,
+    clean component name should be preserved in data-test-id.
+*/
+function getFSAttributes(name: string, mask: boolean, prefix: boolean): string {
+    if (!name) {
+        return `${mask ? MASK : UNMASK}`;
+    }
+
+    if (prefix) {
+        return `${name},${mask ? MASK : UNMASK}`;
+    }
+
+    return `${name}`;
+}
+
+function getChatFSAttributes(context: OnyxEntry<PersonalDetailsList>, name: string, report: OnyxInputOrEntry<Report>): string[] {
+    if (!name) {
+        return ['', ''];
+    }
+    if (isConciergeChatReport(report)) {
+        const formattedName = `${CONCIERGE}-${name}`;
+        return [`${formattedName},${UNMASK}`, `${formattedName}`];
+    }
+    if (isExpensifyAndCustomerChat(context, report)) {
+        const formattedName = `${CUSTOMER}-${name}`;
+        return [`${formattedName},${UNMASK}`, `${formattedName}`];
+    }
+
+    const formattedName = `${OTHER}-${name}`;
+    return [`${formattedName},${MASK}`, `${formattedName}`];
+}
+
 export default FS;
-export {FSPage};
+export {FSPage, parseFSAttributes, getFSAttributes, getChatFSAttributes};

src/libs/ReportUtils.ts

@@ -8407,6 +8407,52 @@ function isExpenseReportWithoutParentAccess(report: OnyxEntry<Report>) {
     return isExpenseReport(report) && report?.hasParentAccess === false;
 }
 
+function isExpensifyAndCustomerChat(participantsContext: OnyxEntry<PersonalDetailsList>, report: OnyxInputOrEntry<Report>): boolean {
+    if (!report?.participants) {
+        return true;
+    }
+
+    const participantAccountIDs = new Set(Object.keys(report.participants));
+    if (participantAccountIDs.size > 2) {
+        return false;
+    }
+
+    if (isThread(report) && report.chatType && report.chatType === CONST.REPORT.CHAT_TYPE.POLICY_EXPENSE_CHAT) {
+        return true;
+    }
+
+    if (isThread(report) && report.type === CONST.REPORT.TYPE.EXPENSE) {
+        return true;
+    }
+
+    if (participantsContext) {
+        // by email participants
+        for (const participantAccountID of participantAccountIDs) {
+            const id = Number(participantAccountID);
+            const contextAccountData = participantsContext[id];
+            if (contextAccountData) {
+                const login = contextAccountData.login ?? '';
+                if (login.endsWith(CONST.EMAIL.EXPENSIFY_EMAIL_DOMAIN)) {
+                    return true;
+                }
+
+                if (login.endsWith(CONST.EMAIL.EXPENSIFY_TEAM_EMAIL_DOMAIN)) {
+                    return true;
+                }
+            }
+        }
+    }
+
+    // System users communication
+    const expensifyTeam = new Set(Object.values(CONST.ACCOUNT_ID));
+    const hasIntersection = [...participantAccountIDs].some((id) => expensifyTeam.has(Number(id)));
+    if (hasIntersection) {
+        return true;
+    }
+
+    return false;
+}
+
 export {
     addDomainToShortMention,
     completeShortMention,
@@ -8599,6 +8645,7 @@ export {
     isClosedExpenseReportWithNoExpenses,
     isCompletedTaskReport,
     isConciergeChatReport,
+    isExpensifyAndCustomerChat,
     isControlPolicyExpenseChat,
     isControlPolicyExpenseReport,
     isCurrentUserSubmitter,

src/pages/home/report/ReportActionsList.tsx

@@ -3,7 +3,7 @@ import {useIsFocused, useRoute} from '@react-navigation/native';
 import type {RouteProp} from '@react-navigation/native';
 // eslint-disable-next-line lodash/import-scope
 import type {DebouncedFunc} from 'lodash';
-import React, {memo, useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import React, {memo, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
 import {DeviceEventEmitter, InteractionManager, View} from 'react-native';
 import type {LayoutChangeEvent, NativeScrollEvent, NativeSyntheticEvent, StyleProp, ViewStyle} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
@@ -20,13 +20,15 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import DateUtils from '@libs/DateUtils';
+import {getChatFSAttributes} from '@libs/Fullstory';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ReportActionsUtils from '@libs/ReportActionsUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import Visibility from '@libs/Visibility';
 import type {AuthScreensParamList} from '@navigation/types';
 import variables from '@styles/variables';
 import * as Report from '@userActions/Report';
+import {PersonalDetailsContext} from '@src/components/OnyxProvider';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
@@ -165,6 +167,7 @@ function ReportActionsList({
 
     const [reportNameValuePairs] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${report?.reportID ?? -1}`);
     const [accountID] = useOnyx(ONYXKEYS.SESSION, {selector: (session) => session?.accountID});
+    const participantsContext = useContext(PersonalDetailsContext);
 
     useEffect(() => {
         const unsubscriber = Visibility.onVisibilityChange(() => {
@@ -709,13 +712,19 @@ function ReportActionsList({
     // When performing comment linking, initially 25 items are added to the list. Subsequent fetches add 15 items from the cache or 50 items from the server.
     // This is to ensure that the user is able to see the 'scroll to newer comments' button when they do comment linking and have not reached the end of the list yet.
     const canScrollToNewerComments = !isLoadingInitialReportActions && !hasNewestReportAction && sortedReportActions.length > 25 && !isLastPendingActionIsDelete;
+    const [reportActionsListTestID, reportActionsListFSClass] = getChatFSAttributes(participantsContext, 'ReportActionsList', report);
+
     return (
         <>
             <FloatingMessageCounter
                 isActive={(isFloatingMessageCounterVisible && !!unreadMarkerReportActionID) || canScrollToNewerComments}
                 onClick={scrollToBottomAndMarkReportAsRead}
             />
-            <View style={[styles.flex1, !shouldShowReportRecipientLocalTime && !hideComposer ? styles.pb4 : {}]}>
+            <View
+                style={[styles.flex1, !shouldShowReportRecipientLocalTime && !hideComposer ? styles.pb4 : {}]}
+                testID={reportActionsListTestID}
+                fsClass={reportActionsListFSClass}
+            >
                 <InvertedFlatList
                     accessibilityLabel={translate('sidebarScreen.listOfChatMessages')}
                     ref={reportScrollManager.ref}