diff --git a/src/languages/en.ts b/src/languages/en.ts index 3b670f7b6ebc..138b28260060 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -2665,6 +2665,16 @@ export default { welcomeMessage: 'Welcome to Expensify', welcomeSubtitle: 'What would you like to do?', }, + onboardingBottomMessage: { + [CONST.INTRO_CHOICES.MANAGE_TEAM]: { + phrase1: 'Chat with your setup specialist in ', + phrase2: ' for help', + }, + default: { + phrase1: 'Message ', + phrase2: ' for help with setup', + }, + }, manageTeams: { [CONST.MANAGE_TEAMS_CHOICE.MULTI_LEVEL]: 'Multi level approval', [CONST.MANAGE_TEAMS_CHOICE.CUSTOM_EXPENSE]: 'Custom expense coding', diff --git a/src/languages/es.ts b/src/languages/es.ts index 5027174b2922..0799aefac37d 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -3158,6 +3158,16 @@ export default { welcomeMessage: 'Bienvenido a Expensify', welcomeSubtitle: '¿Qué te gustaría hacer?', }, + onboardingBottomMessage: { + [CONST.INTRO_CHOICES.MANAGE_TEAM]: { + phrase1: 'Chat with your setup specialist in ', + phrase2: ' for help', + }, + default: { + phrase1: 'Message ', + phrase2: ' for help with setup', + }, + }, manageTeams: { [CONST.MANAGE_TEAMS_CHOICE.MULTI_LEVEL]: 'Aprobación multinivel', [CONST.MANAGE_TEAMS_CHOICE.CUSTOM_EXPENSE]: 'Codificación personalizada de gastos', diff --git a/src/pages/home/report/OnboardingReportFooterMessage.tsx b/src/pages/home/report/OnboardingReportFooterMessage.tsx new file mode 100644 index 000000000000..a48a609b51a7 --- /dev/null +++ b/src/pages/home/report/OnboardingReportFooterMessage.tsx @@ -0,0 +1,92 @@ +import React, {useMemo} from 'react'; +import {View} from 'react-native'; +import {withOnyx} from 'react-native-onyx'; +import type {OnyxCollection} from 'react-native-onyx'; +import type {ValueOf} from 'type-fest'; +import Text from '@components/Text'; +import TextLink from '@components/TextLink'; +import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; +import useWindowDimensions from '@hooks/useWindowDimensions'; +import * as PolicyUtils from '@libs/PolicyUtils'; +import Navigation from '@navigation/Navigation'; +import * as ReportInstance from '@userActions/Report'; +import CONST from '@src/CONST'; +import ONYXKEYS from '@src/ONYXKEYS'; +import ROUTES from '@src/ROUTES'; +import type {Policy as PolicyType, Report} from '@src/types/onyx'; + +type OnboardingReportFooterMessageOnyxProps = {reports: OnyxCollection; policies: OnyxCollection}; +type OnboardingReportFooterMessageProps = OnboardingReportFooterMessageOnyxProps & {choice: ValueOf}; + +function OnboardingReportFooterMessage({choice, reports, policies}: OnboardingReportFooterMessageProps) { + const {translate} = useLocalize(); + const styles = useThemeStyles(); + const {isSmallScreenWidth} = useWindowDimensions(); + + const adminChatReport = useMemo(() => { + const adminsReports = reports ? Object.values(reports).filter((report) => report?.chatType === CONST.REPORT.CHAT_TYPE.POLICY_ADMINS) : []; + const activePolicies = policies ? Object.values(policies).filter((policy) => PolicyUtils.shouldShowPolicy(policy, false)) : []; + + return adminsReports.find((report) => activePolicies.find((policy) => policy?.id === report?.policyID)); + }, [policies, reports]); + + const content = useMemo(() => { + switch (choice) { + case CONST.INTRO_CHOICES.MANAGE_TEAM: + return ( + <> + {`${translate('onboardingBottomMessage.newDotManageTeam.phrase1')}`} + Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(adminChatReport?.reportID ?? ''))} + > + {adminChatReport?.reportName ?? CONST.REPORT.WORKSPACE_CHAT_ROOMS.ADMINS} + + {`${translate('onboardingBottomMessage.newDotManageTeam.phrase2')}`} + + ); + default: + return ( + <> + {`${translate('onboardingBottomMessage.default.phrase1')}`} + ReportInstance.navigateToConciergeChat()} + > + {`${CONST?.CONCIERGE_CHAT_NAME}`} + + {`${translate('onboardingBottomMessage.default.phrase2')}`} + + ); + } + }, [adminChatReport?.reportName, adminChatReport?.reportID, choice, styles.label, translate]); + + return ( + + {content} + + ); +} +OnboardingReportFooterMessage.displayName = 'OnboardingReportFooterMessage'; +export default withOnyx({ + reports: { + key: ONYXKEYS.COLLECTION.REPORT, + }, + policies: { + key: ONYXKEYS.COLLECTION.POLICY, + }, +})(OnboardingReportFooterMessage); diff --git a/src/styles/index.ts b/src/styles/index.ts index f165974119ff..27178157f9f5 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -525,6 +525,10 @@ const styles = (theme: ThemeColors) => borderRadius: variables.buttonBorderRadius, }, + borderRadiusComponentLarge: { + borderRadius: variables.componentBorderRadiusLarge, + }, + bottomTabBarContainer: { flexDirection: 'row', height: variables.bottomTabHeight,