chore: GenericUpsellModal sanitization (#29956)

Co-authored-by: Guilherme Gazzo <[email protected]>

apps/meteor/client/components/GenericUpsellModal/GenericUpsellModal.tsx

@@ -0,0 +1,83 @@
+import { Box, Button, Modal } from '@rocket.chat/fuselage';
+import type { Keys as IconName } from '@rocket.chat/icons';
+import { useTranslation } from '@rocket.chat/ui-contexts';
+import type { ReactNode, ReactElement, ComponentProps } from 'react';
+import React from 'react';
+
+type GenericUpsellModalProps = {
+ 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;
+ annotation?: ReactNode;
+};
+
+const GenericUpsellModal = ({
+ tagline,
+ title,
+ subtitle,
+ img,
+ cancelText,
+ confirmText,
+ icon,
+ description,
+ onCancel,
+ onConfirm,
+ onClose = onCancel,
+ annotation,
+}: GenericUpsellModalProps) => {
+ const t = useTranslation();
+
+ 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 onClick={onClose} />
+ </Modal.Header>
+ <Modal.Content>
+ <Modal.HeroImage src={img} />
+ {subtitle && (
+ <Box is='h3' fontScale='h3'>
+ {subtitle}
+ </Box>
+ )}
+ {description && (
+ <Box style={{ whiteSpace: 'break-spaces' }} fontScale='p2' mbs='x16'>
+ {description}
+ </Box>
+ )}
+ </Modal.Content>
+ <Modal.Footer justifyContent={annotation ? 'space-between' : 'flex-end'}>
+ {annotation && <Modal.FooterAnnotation>{annotation}</Modal.FooterAnnotation>}
+ {(onCancel || onConfirm) && (
+ <Modal.FooterControllers>
+ {onCancel && (
+ <Button secondary onClick={onCancel}>
+ {cancelText ?? t('Close')}
+ </Button>
+ )}
+ {onConfirm && (
+ <Button primary onClick={onConfirm}>
+ {confirmText ?? t('Talk_to_sales')}
+ </Button>
+ )}
+ </Modal.FooterControllers>
+ )}
+ </Modal.Footer>
+ </Modal>
+ );
+};
+
+export default GenericUpsellModal;

apps/meteor/client/components/GenericUpsellModal/hooks/index.ts

@@ -0,0 +1 @@
+export * from './useUpsellActions';

apps/meteor/client/components/GenericUpsellModal/hooks/useUpsellActions.ts

@@ -0,0 +1,29 @@
+import { useRouter, useSetModal, useCurrentModal } from '@rocket.chat/ui-contexts';
+import { useCallback } from 'react';
+
+import { useExternalLink } from '../../../hooks/useExternalLink';
+import { useIsEnterprise } from '../../../hooks/useIsEnterprise';
+
+const TALK_TO_SALES_URL = 'https://go.rocket.chat/i/contact-sales';
+
+export const useUpsellActions = (hasLicenseModule = false) => {
+ const router = useRouter();
+ const setModal = useSetModal();
+ const handleOpenLink = useExternalLink();
+ const isModalOpen = useCurrentModal() !== null;
+
+ const { data } = useIsEnterprise();
+ const shouldShowUpsell = !data?.isEnterprise || !hasLicenseModule;
+
+ const handleGoFullyFeatured = useCallback(() => {
+ setModal(null);
+ router.navigate('/admin/upgrade/go-fully-featured-registered');
+ }, [router, setModal]);
+
+ const handleTalkToSales = useCallback(() => {
+ setModal(null);
+ handleOpenLink(TALK_TO_SALES_URL);
+ }, [handleOpenLink, setModal]);
+
+ return { isModalOpen, shouldShowUpsell, handleGoFullyFeatured, handleTalkToSales };
+};

apps/meteor/client/components/GenericUpsellModal/index.ts

@@ -0,0 +1 @@
+export { default } from './GenericUpsellModal';

apps/meteor/client/views/marketplace/UnlimitedAppsUpsellModal.tsx

@@ -2,20 +2,25 @@ import { useSetting, useTranslation } from '@rocket.chat/ui-contexts';
 import React from 'react';
 
 import GenericUpsellModal from '../../components/GenericUpsellModal';
+import { useUpsellActions } from '../../components/GenericUpsellModal/hooks';
 
-const UnlimitedAppsUpsellModal = () => {
+const UnlimitedAppsUpsellModal = ({ onClose }: { onClose: () => void }) => {
  const t = useTranslation();
- const cloudWorkspaceHadTrial = useSetting('Cloud_Workspace_Had_Trial') as boolean;
+ const cloudWorkspaceHadTrial = useSetting<boolean>('Cloud_Workspace_Had_Trial');
+ const { handleGoFullyFeatured, handleTalkToSales } = useUpsellActions();
 
  return (
  <GenericUpsellModal
  title={t('Enable_unlimited_apps')}
- img='images/unlimited-apps-modal.svg'
+ img='images/unlimited-apps-modal.png'
  subtitle={t('Get_all_apps')}
  description={!cloudWorkspaceHadTrial ? t('Workspaces_on_community_edition_trial_on') : t('Workspaces_on_community_edition_trial_off')}
+ confirmText={!cloudWorkspaceHadTrial ? t('Start_free_trial') : t('Learn_more')}
  cancelText={t('Talk_to_sales')}
+ onConfirm={handleGoFullyFeatured}
+ onCancel={handleTalkToSales}
+ onClose={onClose}
  />
  );
 };
-
 export default UnlimitedAppsUpsellModal;

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

@@ -33,7 +33,7 @@ const MarketplaceHeader = ({ title }: { title: string }): ReactElement | null =>
  {isAdmin && result.isSuccess && !result.data.hasUnlimitedApps && (
  <Button
  onClick={() => {
- setModal(<UnlimitedAppsUpsellModal />);
+ setModal(<UnlimitedAppsUpsellModal onClose={() => setModal(null)} />);
  }}
  >
  {t('Enable_unlimited_apps')}

apps/meteor/ee/client/views/admin/deviceManagement/DeviceManagementAdminRoute.tsx

@@ -1,49 +1,42 @@
-import { usePermission, useRouter, useSetModal, useTranslation } from '@rocket.chat/ui-contexts';
+import { usePermission, useRouter, useSetModal, useTranslation, useSetting } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 
 import GenericUpsellModal from '../../../../../client/components/GenericUpsellModal';
+import { useUpsellActions } from '../../../../../client/components/GenericUpsellModal/hooks';
 import PageSkeleton from '../../../../../client/components/PageSkeleton';
-import { useIsEnterprise } from '../../../../../client/hooks/useIsEnterprise';
 import NotAuthorizedPage from '../../../../../client/views/notAuthorized/NotAuthorizedPage';
 import { useHasLicenseModule } from '../../../hooks/useHasLicenseModule';
 import DeviceManagementAdminPage from './DeviceManagementAdminPage';
 
 const DeviceManagementAdminRoute = (): ReactElement => {
  const t = useTranslation();
- const canViewDeviceManagement = usePermission('view-device-management');
-
- const { data } = useIsEnterprise();
- const hasDeviceManagement = useHasLicenseModule('device-management');
- const isUpsell = !data?.isEnterprise || !hasDeviceManagement;
-
  const router = useRouter();
-
  const setModal = useSetModal();
- const [isModalOpen, setIsModalOpen] = useState(false);
-
- const handleOpenModal = useCallback(() => {
- setModal(
- <GenericUpsellModal
- title={t('Device_Management')}
- img='images/device-management.png'
- subtitle={t('Ensure_secure_workspace_access')}
- description={t('Manage_which_devices')}
- onCloseEffect={() => setIsModalOpen(false)}
- />,
- );
- setIsModalOpen(true);
- }, [setModal, t]);
+
+ const hasDeviceManagement = useHasLicenseModule('device-management') as boolean;
+ const canViewDeviceManagement = usePermission('view-device-management');
+ const cloudWorkspaceHadTrial = useSetting<boolean>('Cloud_Workspace_Had_Trial');
+
+ const { shouldShowUpsell, isModalOpen, handleGoFullyFeatured, handleTalkToSales } = useUpsellActions(hasDeviceManagement);
 
  useEffect(() => {
- if (isUpsell) {
- handleOpenModal();
+ if (shouldShowUpsell) {
+ setModal(
+ <GenericUpsellModal
+ title={t('Device_Management')}
+ img='images/device-management.png'
+ subtitle={t('Ensure_secure_workspace_access')}
+ description={t('Manage_which_devices')}
+ cancelText={t('Talk_to_an_expert')}
+ confirmText={cloudWorkspaceHadTrial ? t('Learn_more') : t('Start_a_free_trial')}
+ onClose={() => setModal(null)}
+ onConfirm={handleGoFullyFeatured}
+ onCancel={handleTalkToSales}
+ />,
+ );
  }
-
- return () => {
- setModal(null);
- };
- }, [handleOpenModal, isUpsell, router, setModal]);
+ }, [shouldShowUpsell, router, setModal, t, cloudWorkspaceHadTrial, handleGoFullyFeatured, handleTalkToSales]);
 
  if (isModalOpen) {
  return <PageSkeleton />;