feat: new modal on Private Apps install (#33275)

* feat: new modal on Private Apps install

* add more variations

* Create eleven-rockets-hug.md

.changeset/eleven-rockets-hug.md

@@ -0,0 +1,6 @@
+---
+"@rocket.chat/meteor": feat
+"@rocket.chat/i18n": feat
+---
+
+Added a new button and modal to the private apps screen

apps/meteor/client/views/marketplace/components/MarketplaceHeader.tsx

@@ -1,13 +1,15 @@
 import { Button, ButtonGroup } from '@rocket.chat/fuselage';
 import { usePermission, useRoute, useRouteParameter, useSetModal, useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
-import React, { useCallback } from 'react';
+import React from 'react';
 
 import { GenericResourceUsageSkeleton } from '../../../components/GenericResourceUsage';
 import { PageHeader } from '../../../components/Page';
+import UpgradeButton from '../../admin/subscription/components/UpgradeButton';
 import UnlimitedAppsUpsellModal from '../UnlimitedAppsUpsellModal';
 import { useAppsCountQuery } from '../hooks/useAppsCountQuery';
 import EnabledAppsCount from './EnabledAppsCount';
+import PrivateAppInstallModal from './PrivateAppInstallModal/PrivateAppInstallModal';
 
 const MarketplaceHeader = ({ title }: { title: string }): ReactElement | null => {
 	const t = useTranslation();
@@ -17,9 +19,16 @@ const MarketplaceHeader = ({ title }: { title: string }): ReactElement | null =>
 	const setModal = useSetModal();
 	const result = useAppsCountQuery(context);
 
-	const handleUploadButtonClick = useCallback((): void => {
+	const handleProceed = (): void => {
+		setModal(null);
 		route.push({ context, page: 'install' });
-	}, [context, route]);
+	};
+
+	const handleClickPrivate = () => {
+		result?.data?.limit === 0
+			? setModal(<PrivateAppInstallModal onClose={() => setModal(null)} onProceed={handleProceed} />)
+			: route.push({ context, page: 'install' });
+	};
 
 	if (result.isError) {
 		return null;
@@ -29,8 +38,10 @@ const MarketplaceHeader = ({ title }: { title: string }): ReactElement | null =>
 		<PageHeader title={title}>
 			<ButtonGroup wrap align='end'>
 				{result.isLoading && <GenericResourceUsageSkeleton />}
-				{result.isSuccess && !result.data.hasUnlimitedApps && <EnabledAppsCount {...result.data} context={context} />}
-				{isAdmin && result.isSuccess && !result.data.hasUnlimitedApps && (
+
+				{!result.isSuccess && !result.data.hasUnlimitedApps && <EnabledAppsCount {...result.data} context={context} />}
+
+				{isAdmin && result.isSuccess && !result.data.hasUnlimitedApps && context !== 'private' && (
 					<Button
 						onClick={() => {
 							setModal(<UnlimitedAppsUpsellModal onClose={() => setModal(null)} />);
@@ -39,7 +50,14 @@ const MarketplaceHeader = ({ title }: { title: string }): ReactElement | null =>
 						{t('Enable_unlimited_apps')}
 					</Button>
 				)}
-				{isAdmin && context === 'private' && <Button onClick={handleUploadButtonClick}>{t('Upload_private_app')}</Button>}
+
+				{isAdmin && context === 'private' && <Button onClick={handleClickPrivate}>{t('Upload_private_app')}</Button>}
+
+				{isAdmin && result.isSuccess && result.data.limit === 0 && context === 'private' && (
+					<UpgradeButton primary icon={undefined} target='private-apps-header' action='upgrade'>
+						{t('Upgrade')}
+					</UpgradeButton>
+				)}
 			</ButtonGroup>
 		</PageHeader>
 	);

apps/meteor/client/views/marketplace/components/PrivateAppInstallModal/PrivateAppInstallModal.tsx

@@ -0,0 +1,56 @@
+import { Box, Button, Modal } from '@rocket.chat/fuselage';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useExternalLink } from '../../../../hooks/useExternalLink';
+import { useCheckoutUrl } from '../../../admin/subscription/hooks/useCheckoutUrl';
+import { PRICING_LINK } from '../../../admin/subscription/utils/links';
+
+type PrivateAppInstallModalProps = {
+	onClose: () => void;
+	onProceed: () => void;
+};
+
+const PrivateAppInstallModal = ({ onClose, onProceed }: PrivateAppInstallModalProps) => {
+	const { t } = useTranslation();
+
+	const openExternalLink = useExternalLink();
+	const manageSubscriptionUrl = useCheckoutUrl()({ target: 'new-departments-page', action: 'upgrade' });
+
+	const goToManageSubscriptionPage = (): void => {
+		openExternalLink(manageSubscriptionUrl);
+		onClose();
+	};
+
+	return (
+		<Modal>
+			<Modal.Header>
+				<Modal.HeaderText>
+					<Modal.Title>{t('Private_app_install_modal_title')}</Modal.Title>
+				</Modal.HeaderText>
+				<Modal.Close onClick={onClose} />
+			</Modal.Header>
+
+			<Modal.Content>
+				<Box mbe={28}>{t('Private_app_install_modal_content')}</Box>
+				{t('Upgrade_subscription_to_enable_private_apps')}
+			</Modal.Content>
+
+			<Modal.Footer justifyContent='space-between'>
+				<Modal.FooterAnnotation>
+					<a target='_blank' rel='noopener noreferrer' href={PRICING_LINK}>
+						{t('Compare_plans')}
+					</a>
+				</Modal.FooterAnnotation>
+				<Modal.FooterControllers>
+					<Button onClick={onProceed}>{t('Upload_anyway')}</Button>
+					<Button onClick={goToManageSubscriptionPage} primary>
+						{t('Upgrade')}
+					</Button>
+				</Modal.FooterControllers>
+			</Modal.Footer>
+		</Modal>
+	);
+};
+
+export default PrivateAppInstallModal;

packages/i18n/src/locales/en.i18n.json

@@ -4294,6 +4294,8 @@
   "private": "private",
   "Private_channels": "Private channels",
   "Private_Apps": "Private Apps",
+  "Private_app_install_modal_title": "Upload disabled private app",
+  "Private_app_install_modal_content": "Community workspaces cannot enable private apps. You can upload this app but it will be disabled.",
   "Private_Channel": "Private Channel",
   "Private_Channels": "Private channels",
   "Private_Chats": "Private Chats",
@@ -6442,6 +6444,7 @@
   "ActiveSessions_available": "sessions available",
   "Monthly_active_contacts": "Monthly active contacts",
   "Upgrade": "Upgrade",
+  "Upgrade_subscription_to_enable_private_apps": "Upgrade subscription to enable private apps.",
   "Seats": "Seats",
   "Marketplace_apps": "Marketplace apps",
   "Private_apps": "Private apps",