snapshot of https://github.com/RocketChat/Rocket.Chat.git (develop, 2026-09-16; blobs > 131072B omitted)

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

@@ -0,0 +1,54 @@
+import { Box, ModalHeroImage } from '@rocket.chat/fuselage';
+import { GenericModal } from '@rocket.chat/ui-client';
+import type { ComponentProps, ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export type GenericUpsellModalProps = Omit<ComponentProps<typeof GenericModal>, 'variant' | 'children' | 'onClose' | 'onDismiss'> & {
+	subtitle?: ReactNode;
+	description?: ReactNode;
+	img: ComponentProps<typeof ModalHeroImage>['src'];
+	imgWidth?: ComponentProps<typeof ModalHeroImage>['width'];
+	imgHeight?: ComponentProps<typeof ModalHeroImage>['height'];
+	imgAlt?: string;
+	onClose: () => void;
+	onConfirm?: () => void;
+};
+
+const GenericUpsellModal = ({
+	tagline,
+	subtitle,
+	img,
+	imgAlt = '',
+	imgWidth,
+	imgHeight,
+	description,
+	confirmText,
+	icon = null,
+	...props
+}: GenericUpsellModalProps) => {
+	const { t } = useTranslation();
+
+	return (
+		<GenericModal
+			{...props}
+			icon={icon}
+			tagline={tagline ?? t('Premium_capability')}
+			variant='upsell'
+			confirmText={confirmText ?? t('Upgrade')}
+		>
+			<ModalHeroImage src={img} alt={imgAlt} width={imgWidth} height={imgHeight} />
+			{subtitle && (
+				<Box is='h3' fontScale='h3'>
+					{subtitle}
+				</Box>
+			)}
+			{description && (
+				<Box style={{ whiteSpace: 'break-spaces' }} fontScale='p2' marginBlockStart={16}>
+					{description}
+				</Box>
+			)}
+		</GenericModal>
+	);
+};
+
+export default GenericUpsellModal;