feat: Create upsell options in the admin sidebar and reorganize it (#…

…29731)
RocketChat · Jul 21, 2023 · ad08c26 · ad08c26
1 parent e9a42ba
commit ad08c26
Show file tree

Hide file tree

Showing 33 changed files with 367 additions and 310 deletions.
diff --git a/.changeset/tidy-bears-camp.md b/.changeset/tidy-bears-camp.md
@@ -0,0 +1,5 @@
+---
+"@rocket.chat/meteor": minor
+---
+
+Introduced upsells for the engagement dashboard and device management admin sidebar items in CE workspaces. Additionally, restructured the admin sidebar items to enhance organization.
diff --git a/apps/meteor/app/authorization/server/constant/permissions.ts b/apps/meteor/app/authorization/server/constant/permissions.ts
@@ -69,6 +69,8 @@ export const permissions = [
 	{ _id: 'view-c-room', roles: ['admin', 'user', 'bot', 'app', 'anonymous'] },
 	{ _id: 'user-generate-access-token', roles: ['admin'] },
 	{ _id: 'view-d-room', roles: ['admin', 'user', 'bot', 'app', 'guest'] },
+	{ _id: 'view-device-management', roles: ['admin'] },
+	{ _id: 'view-engagement-dashboard', roles: ['admin'] },
 	{ _id: 'view-full-other-user-info', roles: ['admin'] },
 	{ _id: 'view-history', roles: ['admin', 'user', 'anonymous'] },
 	{ _id: 'view-joined-room', roles: ['guest', 'bot', 'app', 'anonymous'] },

diff --git a/apps/meteor/client/components/GenericUpsellModal.tsx b/apps/meteor/client/components/GenericUpsellModal.tsx
@@ -0,0 +1,105 @@
+import { Box, Button, Modal } from '@rocket.chat/fuselage';
+import type { Keys as IconName } from '@rocket.chat/icons';
+import { useRouter, useSetModal, useSetting, useTranslation } from '@rocket.chat/ui-contexts';
+import type { ReactNode, ReactElement, ComponentProps } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
+
+type UpsellModalProps = {
+	children?: ReactNode;
+	tagline?: ReactNode;
+	cancelText?: ReactNode;
+	confirmText?: ReactNode;
+	title: string | ReactElement;
+	subtitle?: string | ReactElement;
+	description?: string | ReactElement;
+	icon?: IconName;
+	img: ComponentProps<typeof Modal.HeroImage>['src'];
+	onCancel?: () => void;
+	onClose?: () => void;
+	onConfirm?: () => void;
+	onCloseEffect?: () => void;
+};
+
+const GenericUpsellModal = ({
+	tagline,
+	title,
+	subtitle,
+	img,
+	cancelText,
+	confirmText,
+	icon,
+	description,
+	onCancel,
+	onConfirm,
+	onClose = onCancel,
+	onCloseEffect,
+}: UpsellModalProps) => {
+	const t = useTranslation();
+	const cloudWorkspaceHadTrial = Boolean(useSetting('Cloud_Workspace_Had_Trial'));
+
+	const router = useRouter();
+	const setModal = useSetModal();
+
+	const handleModalClose = useCallback(() => {
+		setModal(null);
+	}, [setModal]);
+
+	const handleConfirmModal = useCallback(() => {
+		handleModalClose();
+		router.navigate({
+			pathname: '/admin/upgrade/go-fully-featured-registered',
+		});
+	}, [handleModalClose, router]);
+
+	const talkToSales = 'https://go.rocket.chat/i/contact-sales';
+	const handleCancelModal = useCallback(() => {
+		handleModalClose();
+		window.open(talkToSales, '_blank');
+	}, [handleModalClose]);
+
+	const onCloseRef = useRef(onCloseEffect ?? handleModalClose);
+	onCloseRef.current = onCloseEffect ?? handleModalClose;
+
+	useEffect(() => {
+		return () => {
+			const onClose = onCloseRef.current;
+			onClose?.();
+		};
+	}, []);
+
+	return (
+		<Modal>
+			<Modal.Header>
+				{icon && <Modal.Icon name={icon} />}
+				<Modal.HeaderText>
+					<Modal.Tagline color='font-annotation'>{tagline ?? t('Enterprise_capability')}</Modal.Tagline>
+					<Modal.Title>{title}</Modal.Title>
+				</Modal.HeaderText>
+				<Modal.Close title={t('Close')} onClick={onClose ?? handleModalClose} />
+			</Modal.Header>
+			<Modal.Content>
+				<Modal.HeroImage src={img} />
+				{subtitle && (
+					<Box is='h3' fontScale='h3' mbe='x16'>
+						{subtitle}
+					</Box>
+				)}
+
+				{description && <Box fontScale='p2'>{description}</Box>}
+			</Modal.Content>
+			<Modal.Footer>
+				<Modal.FooterControllers>
+					<Button secondary onClick={onCancel ?? handleCancelModal}>
+						{cancelText ?? t('Talk_to_an_expert')}
+					</Button>
+
+					<Button primary onClick={onConfirm ?? handleConfirmModal}>
+						{confirmText ?? cloudWorkspaceHadTrial ? t('Learn_more') : t('Start_a_free_trial')}
+					</Button>
+				</Modal.FooterControllers>
+			</Modal.Footer>
+		</Modal>
+	);
+};
+
+export default GenericUpsellModal;
diff --git a/apps/meteor/client/components/UpsellModal.stories.tsx b/apps/meteor/client/components/UpsellModal.stories.tsx
@@ -2,15 +2,15 @@ import { action } from '@storybook/addon-actions';
 import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';
 
-import UpsellModal from './UpsellModal';
+import GenericUpsellModal from './GenericUpsellModal';
 
 export default {
-	title: 'Components/UpsellModal',
-	component: UpsellModal,
-} as ComponentMeta<typeof UpsellModal>;
+	title: 'Components/GenericUpsellModal',
+	component: GenericUpsellModal,
+} as ComponentMeta<typeof GenericUpsellModal>;
 
-export const Example: ComponentStory<typeof UpsellModal> = () => (
-	<UpsellModal
+export const Example: ComponentStory<typeof GenericUpsellModal> = () => (
+	<GenericUpsellModal
 		title='Title'
 		subtitle='Subtitle'
 		description='The quick brown fox jumps over the lazy dog.'

diff --git a/apps/meteor/client/components/UpsellModal.tsx b/apps/meteor/client/components/UpsellModal.tsx
diff --git a/apps/meteor/client/views/admin/AdministrationRouter.tsx b/apps/meteor/client/views/admin/AdministrationRouter.tsx
@@ -49,7 +49,7 @@ const AdministrationRouter = ({ children }: AdministrationRouterProps): ReactEle
 					return;
 				}
 
-				const defaultRoutePath = getAdminSidebarItems().find(firstSidebarPage)?.href ?? '/admin/info';
+				const defaultRoutePath = getAdminSidebarItems().find(firstSidebarPage)?.href ?? '/admin/workspace';
 
 				if (isGoRocketChatLink(defaultRoutePath)) {
 					window.open(defaultRoutePath, '_blank');

diff --git a/apps/meteor/client/views/admin/customEmoji/CustomEmojiRoute.tsx b/apps/meteor/client/views/admin/customEmoji/CustomEmojiRoute.tsx
@@ -45,7 +45,7 @@ const CustomEmojiRoute = (): ReactElement => {
 	return (
 		<Page flexDirection='row'>
 			<Page name='admin-emoji-custom'>
-				<Page.Header title={t('Custom_Emoji')}>
+				<Page.Header title={t('Emoji')}>
 					<Button primary onClick={handleAddEmoji} aria-label={t('New')}>
 						{t('New')}
 					</Button>

diff --git a/apps/meteor/client/views/admin/customSounds/CustomSoundsPage.tsx b/apps/meteor/client/views/admin/customSounds/CustomSoundsPage.tsx
@@ -41,7 +41,7 @@ const CustomSoundsPage = () => {
 	return (
 		<Page flexDirection='row'>
 			<Page name='admin-custom-sounds'>
-				<Page.Header title={t('Custom_Sounds')}>
+				<Page.Header title={t('Sounds')}>
 					<Button primary onClick={handleNewButtonClick} aria-label={t('New')}>
 						{t('New')}
 					</Button>

diff --git a/apps/meteor/client/views/admin/federationDashboard/FederationDashboardPage.tsx b/apps/meteor/client/views/admin/federationDashboard/FederationDashboardPage.tsx
@@ -12,7 +12,7 @@ function FederationDashboardPage(): ReactElement {
 
 	return (
 		<Page>
-			<Page.Header title={t('Federation_Dashboard')} />
+			<Page.Header title={t('Federation')} />
 			<Page.ScrollableContentWithShadow>
 				<Box margin='x24'>
 					<OverviewSection />

diff --git a/apps/meteor/client/views/admin/info/InformationPage.tsx b/apps/meteor/client/views/admin/info/InformationPage.tsx
@@ -42,7 +42,7 @@ const InformationPage = memo(function InformationPage({
 
 	return (
 		<Page data-qa='admin-info' bg='tint'>
-			<Page.Header title={t('Info')}>
+			<Page.Header title={t('Workspace')}>
 				{canViewStatistics && (
 					<ButtonGroup>
 						<Button type='button' onClick={onClickDownloadInfo}>

diff --git a/apps/meteor/client/views/admin/info/InformationRoute.tsx b/apps/meteor/client/views/admin/info/InformationRoute.tsx
@@ -83,7 +83,7 @@ const InformationRoute = (): ReactElement => {
 	if (error || !statistics) {
 		return (
 			<Page>
-				<Page.Header title={t('Info')}>
+				<Page.Header title={t('Workspace')}>
 					<ButtonGroup>
 						<Button primary type='button' onClick={handleClickRefreshButton}>
 							<Icon name='reload' /> {t('Refresh')}

diff --git a/apps/meteor/client/views/admin/moderation/ModerationConsolePage.tsx b/apps/meteor/client/views/admin/moderation/ModerationConsolePage.tsx
@@ -27,7 +27,7 @@ const ModerationConsolePage = () => {
 	return (
 		<Page flexDirection='row'>
 			<Page>
-				<Page.Header title={t('Moderation_Console')} />
+				<Page.Header title={t('Moderation')} />
 				<Page.Content>
 					<ModerationConsoleTable />
 				</Page.Content>

diff --git a/apps/meteor/client/views/admin/oauthApps/OAuthAppsPage.tsx b/apps/meteor/client/views/admin/oauthApps/OAuthAppsPage.tsx
@@ -19,7 +19,7 @@ const OAuthAppsPage = (): ReactElement => {
 	return (
 		<Page flexDirection='row'>
 			<Page>
-				<Page.Header title={t('OAuth_Applications')}>
+				<Page.Header title={t('Third_party_login')}>
 					{context && (
 						<Button alignSelf='flex-end' onClick={(): void => router.push({})}>
 							<Icon name='back' />