From 66f969f3d5afedce9f356487ef8c869f8f2aa588 Mon Sep 17 00:00:00 2001 From: mkzie2 Date: Mon, 18 Nov 2024 02:23:44 +0700 Subject: [PATCH 1/8] Update chat with account manager banner --- src/components/Banner.tsx | 5 +++++ src/languages/en.ts | 2 ++ src/languages/es.ts | 2 ++ src/languages/params.ts | 5 +++++ src/pages/home/ReportScreen.tsx | 36 ++++++++++++++++++++++++++++++--- 5 files changed, 47 insertions(+), 3 deletions(-) diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx index 0ae3afbf98b..c3a9bc4418b 100644 --- a/src/components/Banner.tsx +++ b/src/components/Banner.tsx @@ -46,6 +46,9 @@ type BannerProps = { /** Styles to be assigned to the Banner text */ textStyles?: StyleProp; + + /** The button to display in the banner */ + buttonComponent?: React.ReactNode; }; function Banner({ @@ -59,6 +62,7 @@ function Banner({ shouldRenderHTML = false, shouldShowIcon = false, shouldShowCloseButton = false, + buttonComponent, }: BannerProps) { const theme = useTheme(); const styles = useThemeStyles(); @@ -106,6 +110,7 @@ function Banner({ ))} + {!!buttonComponent && buttonComponent} {shouldShowCloseButton && !!onClose && ( `Need something specific? Chat with your account manager ${AMDisplayName ? `, ${AMDisplayName}` : ''}.`, }, location: { useCurrent: 'Use current location', diff --git a/src/languages/es.ts b/src/languages/es.ts index 2bb66cec654..75b2e008c1a 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -38,6 +38,7 @@ import type { ChangeTypeParams, CharacterLengthLimitParams, CharacterLimitParams, + ChatWithAMParams, CompanyCardBankName, CompanyCardFeedNameParams, CompanyNameParams, @@ -466,6 +467,7 @@ const translations = { sent: 'Enviado', links: 'Enlaces', days: 'días', + chatWithAM: ({AMDisplayName}: ChatWithAMParams) => `¿Necesitas algo específico? Habla con tu gerente de cuenta. ${AMDisplayName ? `, ${AMDisplayName}` : ''}.`, }, connectionComplete: { title: 'Conexión completa', diff --git a/src/languages/params.ts b/src/languages/params.ts index 87a322775cc..1b20b985efe 100644 --- a/src/languages/params.ts +++ b/src/languages/params.ts @@ -559,6 +559,10 @@ type CompanyNameParams = { companyName: string; }; +type ChatWithAMParams = { + AMDisplayName?: string; +}; + export type { AuthenticationErrorParams, ImportMembersSuccessfullDescriptionParams, @@ -761,4 +765,5 @@ export type { ImportedTypesParams, CurrencyCodeParams, CompanyNameParams, + ChatWithAMParams, }; diff --git a/src/pages/home/ReportScreen.tsx b/src/pages/home/ReportScreen.tsx index 62fd04f7572..5cbba9ca23f 100644 --- a/src/pages/home/ReportScreen.tsx +++ b/src/pages/home/ReportScreen.tsx @@ -9,7 +9,9 @@ import type {OnyxEntry} from 'react-native-onyx'; import {useOnyx} from 'react-native-onyx'; import Banner from '@components/Banner'; import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView'; +import Button from '@components/Button'; 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 +34,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'; @@ -157,6 +160,24 @@ function ReportScreen({route, currentReportID = '', navigation}: ReportScreenPro navigation.setParams({reportID: lastAccessedReportID}); }, [activeWorkspaceID, canUseDefaultRooms, navigation, route, finishedLoadingApp]); + const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST); + const chatWithAMText = useMemo(() => { + if (accountManagerReportID) { + const accountManagerReport = ReportUtils.getReport(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 `Need something specific? Chat with your account manager, ${displayName} (${login}).`; + return translate('common.chatWithAM', {AMDisplayName: `${displayName} (${login})`}); + } + return translate('common.chatWithAM', {}); + } + return ''; + }, [accountManagerReportID, personalDetails, translate]); + /** * Create a lightweight Report so as to keep the re-rendering as light as possible by * passing in only the required props. @@ -759,12 +780,21 @@ function ReportScreen({route, currentReportID = '', navigation}: ReportScreenPro {!!accountManagerReportID && ReportUtils.isConciergeChatReport(report) && isBannerVisible && ( + } /> )} From cd82df49245a0fcc14806d3603d8aeb94064431c Mon Sep 17 00:00:00 2001 From: mkzie2 Date: Mon, 18 Nov 2024 15:19:50 +0700 Subject: [PATCH 2/8] fix prettier --- src/styles/index.ts | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src/styles/index.ts b/src/styles/index.ts index 8ebfc5582b0..ed3e45f893a 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -522,10 +522,6 @@ const styles = (theme: ThemeColors) => lineHeight: variables.lineHeightNormal, }, - colorReversed: { - color: theme.textReversed, - }, - colorMutedReversed: { color: theme.textMutedReversed, }, @@ -538,10 +534,6 @@ const styles = (theme: ThemeColors) => backgroundColor: 'transparent', }, - bgDark: { - backgroundColor: theme.inverse, - }, - opacity0: { opacity: 0, }, From 07ea65eabd39ec792a6f95e9f0757939d7e9081f Mon Sep 17 00:00:00 2001 From: mkzie2 Date: Tue, 19 Nov 2024 14:31:25 +0700 Subject: [PATCH 3/8] update translations --- src/languages/en.ts | 3 ++- src/languages/es.ts | 3 ++- src/pages/home/ReportScreen.tsx | 2 +- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/languages/en.ts b/src/languages/en.ts index 9b829024e45..1ae36f8c6f6 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -476,7 +476,8 @@ const translations = { links: 'Links', days: 'days', rename: 'Rename', - chatWithAM: ({AMDisplayName}: ChatWithAMParams) => `Need something specific? Chat with your account manager ${AMDisplayName ? `, ${AMDisplayName}` : ''}.`, + chatWithAM: ({AMDisplayName}: ChatWithAMParams) => `Need something specific? Chat with your account manager${AMDisplayName ? `, ${AMDisplayName}` : ''}.`, + chatNow: 'Chat now', }, location: { useCurrent: 'Use current location', diff --git a/src/languages/es.ts b/src/languages/es.ts index 75b2e008c1a..26de72f217b 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -467,7 +467,8 @@ const translations = { sent: 'Enviado', links: 'Enlaces', days: 'días', - chatWithAM: ({AMDisplayName}: ChatWithAMParams) => `¿Necesitas algo específico? Habla con tu gerente de cuenta. ${AMDisplayName ? `, ${AMDisplayName}` : ''}.`, + chatWithAM: ({AMDisplayName}: ChatWithAMParams) => `¿Necesitas algo específico? Habla con tu gerente de cuenta${AMDisplayName ? `, ${AMDisplayName}` : ''}.`, + chatNow: 'Chatear ahora', }, connectionComplete: { title: 'Conexión completa', diff --git a/src/pages/home/ReportScreen.tsx b/src/pages/home/ReportScreen.tsx index 5cbba9ca23f..8302103409b 100644 --- a/src/pages/home/ReportScreen.tsx +++ b/src/pages/home/ReportScreen.tsx @@ -791,7 +791,7 @@ function ReportScreen({route, currentReportID = '', navigation}: ReportScreenPro