Update chat with account manager banner

src/components/Banner.tsx

@@ -8,6 +8,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import getButtonState from '@libs/getButtonState';
 import CONST from '@src/CONST';
 import type IconAsset from '@src/types/utils/IconAsset';
+import Button from './Button';
 import Hoverable from './Hoverable';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
@@ -46,6 +47,12 @@ type BannerProps = {
 
     /** Styles to be assigned to the Banner text */
     textStyles?: StyleProp<TextStyle>;
+
+    /** Whether to display button in the banner */
+    shouldShowButton?: boolean;
+
+    /** Callback called when pressing the button */
+    onButtonPress?: () => void;
 };
 
 function Banner({
@@ -54,11 +61,13 @@ function Banner({
     icon = Expensicons.Exclamation,
     onClose,
     onPress,
+    onButtonPress,
     containerStyles,
     textStyles,
     shouldRenderHTML = false,
     shouldShowIcon = false,
     shouldShowCloseButton = false,
+    shouldShowButton = false,
 }: BannerProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -68,7 +77,7 @@ function Banner({
     return (
         <Hoverable>
             {(isHovered) => {
-                const isClickable = onClose ?? onPress;
+                const isClickable = onClose && onPress;
                 const shouldHighlight = isClickable && isHovered;
                 return (
                     <View
@@ -106,6 +115,14 @@ function Banner({
                                     </Text>
                                 ))}
                         </View>
+                        {shouldShowButton && (
+                            <Button
+                                success
+                                style={[styles.pr3]}
+                                text={translate('common.chatNow')}
+                                onPress={onButtonPress}
+                            />
+                        )}
                         {shouldShowCloseButton && !!onClose && (
                             <Tooltip text={translate('common.close')}>
                                 <PressableWithFeedback

src/languages/en.ts

@@ -39,6 +39,7 @@ import type {
     ChangeTypeParams,
     CharacterLengthLimitParams,
     CharacterLimitParams,
+    ChatWithAccountManagerParams,
     CompanyCardBankName,
     CompanyCardFeedNameParams,
     CompanyNameParams,
@@ -474,6 +475,8 @@ const translations = {
         links: 'Links',
         days: 'days',
         rename: 'Rename',
+        chatWithAccountManager: ({accountManagerDisplayName}: ChatWithAccountManagerParams) => `Need something specific? Chat with your account manager, ${accountManagerDisplayName}.`,
+        chatNow: 'Chat now',
     },
     location: {
         useCurrent: 'Use current location',

src/languages/es.ts

@@ -38,6 +38,7 @@ import type {
     ChangeTypeParams,
     CharacterLengthLimitParams,
     CharacterLimitParams,
+    ChatWithAccountManagerParams,
     CompanyCardBankName,
     CompanyCardFeedNameParams,
     CompanyNameParams,
@@ -465,6 +466,8 @@ const translations = {
         sent: 'Enviado',
         links: 'Enlaces',
         days: 'días',
+        chatWithAccountManager: ({accountManagerDisplayName}: ChatWithAccountManagerParams) => `¿Necesitas algo específico? Habla con tu gerente de cuenta, ${accountManagerDisplayName}.`,
+        chatNow: 'Chatear ahora',
     },
     connectionComplete: {
         title: 'Conexión completa',

src/languages/params.ts

@@ -559,6 +559,10 @@ type CompanyNameParams = {
     companyName: string;
 };
 
+type ChatWithAccountManagerParams = {
+    accountManagerDisplayName: string;
+};
+
 export type {
     AuthenticationErrorParams,
     ImportMembersSuccessfullDescriptionParams,
@@ -761,4 +765,5 @@ export type {
     ImportedTypesParams,
     CurrencyCodeParams,
     CompanyNameParams,
+    ChatWithAccountManagerParams,
 };

src/pages/home/ReportScreen.tsx

@@ -10,6 +10,7 @@ import {useOnyx} from 'react-native-onyx';
 import Banner from '@components/Banner';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
 import DragAndDropProvider from '@components/DragAndDrop/Provider';
+import * as Expensicons from '@components/Icon/Expensicons';
 import MoneyReportHeader from '@components/MoneyReportHeader';
 import MoneyRequestHeader from '@components/MoneyRequestHeader';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
@@ -32,6 +33,7 @@ import useViewportOffsetTop from '@hooks/useViewportOffsetTop';
 import Log from '@libs/Log';
 import Navigation from '@libs/Navigation/Navigation';
 import clearReportNotifications from '@libs/Notification/clearReportNotifications';
+import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import * as ReportActionsUtils from '@libs/ReportActionsUtils';
 import * as ReportUtils from '@libs/ReportUtils';
@@ -113,6 +115,9 @@ function ReportScreen({route, currentReportID = '', navigation}: ReportScreenPro
     const [modal] = useOnyx(ONYXKEYS.MODAL);
     const [isComposerFullSize] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_IS_COMPOSER_FULL_SIZE}${reportIDFromRoute}`, {initialValue: false});
     const [accountManagerReportID] = useOnyx(ONYXKEYS.ACCOUNT_MANAGER_REPORT_ID, {initialValue: ''});
+    // If accountManagerReportID is an empty string, using ?? can crash the app.
+    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+    const [accountManagerReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${accountManagerReportID || '-1'}`);
     const [userLeavingStatus] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_USER_IS_LEAVING_ROOM}${reportIDFromRoute}`, {initialValue: false});
     const [reportOnyx, reportResult] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportIDFromRoute}`, {allowStaleData: true});
     const [reportMetadata = defaultReportMetadata] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_METADATA}${reportIDFromRoute}`, {initialValue: defaultReportMetadata});
@@ -157,6 +162,21 @@ function ReportScreen({route, currentReportID = '', navigation}: ReportScreenPro
         navigation.setParams({reportID: lastAccessedReportID});
     }, [activeWorkspaceID, canUseDefaultRooms, navigation, route, finishedLoadingApp]);
 
+    const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
+    const chatWithAccountManagerText = useMemo(() => {
+        if (accountManagerReportID) {
+            const participants = ReportUtils.getParticipantsAccountIDsForDisplay(accountManagerReport, false, true);
+            const participantPersonalDetails = OptionsListUtils.getPersonalDetailsForAccountIDs([participants?.at(0) ?? -1], personalDetails);
+            const participantPersonalDetail = Object.values(participantPersonalDetails).at(0);
+            const displayName = PersonalDetailsUtils.getDisplayNameOrDefault(participantPersonalDetail);
+            const login = participantPersonalDetail?.login;
+            if (displayName && login) {
+                return translate('common.chatWithAccountManager', {accountManagerDisplayName: `${displayName} (${login})`});
+            }
+        }
+        return '';
+    }, [accountManagerReportID, accountManagerReport, personalDetails, translate]);
+
     /**
      * Create a lightweight Report so as to keep the re-rendering as light as possible by
      * passing in only the required props.
@@ -760,12 +780,14 @@ function ReportScreen({route, currentReportID = '', navigation}: ReportScreenPro
                         </OfflineWithFeedback>
                         {!!accountManagerReportID && ReportUtils.isConciergeChatReport(report) && isBannerVisible && (
                             <Banner
-                                containerStyles={[styles.mh4, styles.mt4, styles.p4, styles.bgDark]}
-                                textStyles={[styles.colorReversed]}
-                                text={translate('reportActionsView.chatWithAccountManager')}
+                                containerStyles={[styles.mh4, styles.mt4, styles.p4, styles.br2]}
+                                text={chatWithAccountManagerText}
                                 onClose={dismissBanner}
-                                onPress={chatWithAccountManager}
+                                onButtonPress={chatWithAccountManager}
                                 shouldShowCloseButton
+                                icon={Expensicons.Lightbulb}
+                                shouldShowIcon
+                                shouldShowButton
                             />
                         )}
                         <DragAndDropProvider isDisabled={!isCurrentReportLoadedFromOnyx || !ReportUtils.canUserPerformWriteAction(report)}>

src/styles/index.ts

@@ -525,10 +525,6 @@ const styles = (theme: ThemeColors) =>
             lineHeight: variables.lineHeightNormal,
         },
 
-        colorReversed: {
-            color: theme.textReversed,
-        },
-
         colorMutedReversed: {
             color: theme.textMutedReversed,
         },
@@ -541,10 +537,6 @@ const styles = (theme: ThemeColors) =>
             backgroundColor: 'transparent',
         },
 
-        bgDark: {
-            backgroundColor: theme.inverse,
-        },
-
         opacity0: {
             opacity: 0,
         },