From b9344a5044cb2b8826ece85812d7ad0d4e44f541 Mon Sep 17 00:00:00 2001 From: MartinSchoeler Date: Thu, 12 Sep 2024 15:08:29 -0300 Subject: [PATCH 1/3] feat: new modal on Private Apps install --- .../components/MarketplaceHeader.tsx | 24 ++++++-- .../PrivateAppInstallModal.tsx | 56 +++++++++++++++++++ packages/i18n/src/locales/en.i18n.json | 3 + 3 files changed, 79 insertions(+), 4 deletions(-) create mode 100644 apps/meteor/client/views/marketplace/components/PrivateAppInstallModal/PrivateAppInstallModal.tsx diff --git a/apps/meteor/client/views/marketplace/components/MarketplaceHeader.tsx b/apps/meteor/client/views/marketplace/components/MarketplaceHeader.tsx index dfc3033e9812..23060b5953d0 100644 --- a/apps/meteor/client/views/marketplace/components/MarketplaceHeader.tsx +++ b/apps/meteor/client/views/marketplace/components/MarketplaceHeader.tsx @@ -5,9 +5,11 @@ import React, { useCallback } 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,10 @@ const MarketplaceHeader = ({ title }: { title: string }): ReactElement | null => const setModal = useSetModal(); const result = useAppsCountQuery(context); - const handleUploadButtonClick = useCallback((): void => { + const handleProceed = useCallback((): void => { + setModal(null); route.push({ context, page: 'install' }); - }, [context, route]); + }, [context, route, setModal]); if (result.isError) { return null; @@ -30,7 +33,7 @@ const MarketplaceHeader = ({ title }: { title: string }): ReactElement | null => {result.isLoading && } {result.isSuccess && !result.data.hasUnlimitedApps && } - {isAdmin && 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 4d53118c8995..2fd2974abf20 100644 --- a/packages/i18n/src/locales/en.i18n.json +++ b/packages/i18n/src/locales/en.i18n.json @@ -4284,6 +4284,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", @@ -6431,6 +6433,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", From 9a2f61f8e334af123a0337353e3a33fca23e6368 Mon Sep 17 00:00:00 2001 From: MartinSchoeler Date: Thu, 12 Sep 2024 15:42:39 -0300 Subject: [PATCH 2/3] add more variations --- .../components/MarketplaceHeader.tsx | 22 +++++++++---------- 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/apps/meteor/client/views/marketplace/components/MarketplaceHeader.tsx b/apps/meteor/client/views/marketplace/components/MarketplaceHeader.tsx index 23060b5953d0..da1f65490816 100644 --- a/apps/meteor/client/views/marketplace/components/MarketplaceHeader.tsx +++ b/apps/meteor/client/views/marketplace/components/MarketplaceHeader.tsx @@ -1,7 +1,7 @@ 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'; @@ -19,10 +19,16 @@ const MarketplaceHeader = ({ title }: { title: string }): ReactElement | null => const setModal = useSetModal(); const result = useAppsCountQuery(context); - const handleProceed = useCallback((): void => { + const handleProceed = (): void => { setModal(null); route.push({ context, page: 'install' }); - }, [context, route, setModal]); + }; + + const handleClickPrivate = () => { + result?.data?.limit === 0 + ? setModal( setModal(null)} onProceed={handleProceed} />) + : route.push({ context, page: 'install' }); + }; if (result.isError) { return null; @@ -42,15 +48,7 @@ const MarketplaceHeader = ({ title }: { title: string }): ReactElement | null => {t('Enable_unlimited_apps')} )} - {isAdmin && context === 'private' && ( - - )} + {isAdmin && context === 'private' && } {isAdmin && result.isSuccess && result.data.limit === 0 && context === 'private' && ( {t('Upgrade')} From 16f7ad8e11e6ad5e59f0084e6dd5f40283fdd532 Mon Sep 17 00:00:00 2001 From: Martin Schoeler Date: Thu, 12 Sep 2024 15:47:36 -0300 Subject: [PATCH 3/3] Create eleven-rockets-hug.md --- .changeset/eleven-rockets-hug.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/eleven-rockets-hug.md 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