diff --git a/.changeset/eleven-rockets-hug.md b/.changeset/eleven-rockets-hug.md new file mode 100644 index 000000000000..1be6e757185f --- /dev/null +++ b/.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 diff --git a/apps/meteor/client/views/marketplace/components/MarketplaceHeader.tsx b/apps/meteor/client/views/marketplace/components/MarketplaceHeader.tsx index dfc3033e9812..3d6e06ba5233 100644 --- a/apps/meteor/client/views/marketplace/components/MarketplaceHeader.tsx +++ b/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( 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 => {result.isLoading && } - {result.isSuccess && !result.data.hasUnlimitedApps && } - {isAdmin && result.isSuccess && !result.data.hasUnlimitedApps && ( + + {!result.isSuccess && !result.data.hasUnlimitedApps && } + + {isAdmin && result.isSuccess && !result.data.hasUnlimitedApps && context !== 'private' && ( )} - {isAdmin && context === 'private' && } + + {isAdmin && context === 'private' && } + + {isAdmin && result.isSuccess && result.data.limit === 0 && context === 'private' && ( + + {t('Upgrade')} + + )} ); diff --git a/apps/meteor/client/views/marketplace/components/PrivateAppInstallModal/PrivateAppInstallModal.tsx b/apps/meteor/client/views/marketplace/components/PrivateAppInstallModal/PrivateAppInstallModal.tsx new file mode 100644 index 000000000000..2d89ef437df1 --- /dev/null +++ b/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 ( + + + + {t('Private_app_install_modal_title')} + + + + + + {t('Private_app_install_modal_content')} + {t('Upgrade_subscription_to_enable_private_apps')} + + + + + + {t('Compare_plans')} + + + + + + + + + ); +}; + +export default PrivateAppInstallModal; diff --git a/packages/i18n/src/locales/en.i18n.json b/packages/i18n/src/locales/en.i18n.json index 05362e6d0a2e..99a6db285dbb 100644 --- a/packages/i18n/src/locales/en.i18n.json +++ b/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",