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

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

@@ -0,0 +1,89 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import { composeStories } from '@storybook/react';
+import { render, screen } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+import GenericUpsellModal from './GenericUpsellModal';
+import * as stories from './GenericUpsellModal.stories';
+
+const appRoot = mockAppRoot()
+	.withTranslations('en', 'core', {
+		Premium_capability: 'Premium capability',
+		Cancel: 'Cancel',
+		Upgrade: 'Upgrade',
+	})
+	.build();
+
+describe('GenericUpsellModal', () => {
+	const defaultProps = {
+		title: 'Test Title',
+		img: 'test-image.png',
+		onClose: jest.fn(),
+	};
+
+	afterEach(() => {
+		jest.clearAllMocks();
+	});
+
+	const testCases = Object.values(composeStories(stories)).map((Story) => [Story.storyName || 'Story', Story]);
+
+	test.each(testCases)(`renders %s without crashing`, async (_storyname, Story) => {
+		const { baseElement } = render(<Story />);
+		expect(baseElement).toMatchSnapshot();
+	});
+
+	test.each(testCases)('%s should have no a11y violations', async (_storyname, Story) => {
+		const { container } = render(<Story />);
+
+		const results = await axe(container);
+		expect(results).toHaveNoViolations();
+	});
+
+	it('should render basic properties', () => {
+		const props = {
+			...defaultProps,
+			subtitle: 'Test Subtitle',
+			description: 'Test Description',
+			onCancel: jest.fn(),
+			onConfirm: jest.fn(),
+		};
+		render(<GenericUpsellModal {...props} />, { wrapper: appRoot });
+
+		expect(screen.getByText('Test Title')).toBeInTheDocument();
+		expect(screen.getByText('Test Subtitle')).toBeInTheDocument();
+		expect(screen.getByText('Test Description')).toBeInTheDocument();
+	});
+
+	it('should render with default confirm and cancel buttons', () => {
+		render(<GenericUpsellModal {...defaultProps} onCancel={jest.fn()} onConfirm={jest.fn()} />, { wrapper: appRoot });
+
+		expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument();
+		expect(screen.getByRole('button', { name: 'Upgrade' })).toBeInTheDocument();
+	});
+
+	it('should render with default tagline', () => {
+		render(<GenericUpsellModal {...defaultProps} />, { wrapper: appRoot });
+
+		expect(screen.getByText('Premium capability')).toBeInTheDocument();
+	});
+
+	it('should render with img properties', () => {
+		const props = {
+			...defaultProps,
+			onCancel: jest.fn(),
+			onConfirm: jest.fn(),
+			imgWidth: 300,
+			imgHeight: 200,
+			imgAlt: 'Alternative text',
+		};
+		render(<GenericUpsellModal {...props} />, { wrapper: appRoot });
+
+		const heroImage = screen.getByRole('img');
+		expect(heroImage).toHaveAttribute('src', 'test-image.png');
+		expect(heroImage).toHaveAttribute('alt', 'Alternative text');
+		expect(heroImage).toHaveStyle({
+			width: '300px',
+			height: '200px',
+		});
+	});
+});

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

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { action } from 'storybook/actions';
+
+import GenericUpsellModal from '.';
+
+const meta = {
+	component: GenericUpsellModal,
+	args: {
+		onClose: action('onClose'),
+		img: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAAAAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH/xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP/EAB4RAAIBBQEBAQAAAAAAAAAAAAABAgMREiExE0HR/9oADAMBAAIRAxEAPwBuXuIkhBuMe5ib/AHQP49q4L3mLitryTLTSpOiHQI5k/HzXa/qbFOEudVTu1dumWvcTaNCZYZ7vU6g6LxqjOU/24dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9/MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD/AGvJAluyxxRd6F4x00o+NdKoVrjbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw+37mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS/BIzSN0YRkeX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1+agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk/u4eZ0deTl71Ef6hY+0yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em+taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkBSuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlPUH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z',
+		imgAlt: 'Placeholder image',
+	},
+	parameters: {
+		layout: 'centered',
+	},
+} satisfies Meta<typeof GenericUpsellModal>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+	args: {
+		title: 'This is the title',
+		subtitle: 'This is a subtitle',
+		description:
+			'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+		imgAlt: 'Placeholder image',
+		onCancel: action('onCancel'),
+		onConfirm: action('onConfirm'),
+	},
+};
+
+export const WithCustomTagLine: Story = {
+	args: {
+		...Default.args,
+		tagline: 'Exclusive',
+	},
+};
+
+export const WithCustomButtons: Story = {
+	args: {
+		...Default.args,
+		cancelText: 'Learn More',
+		confirmText: 'Contact Sales',
+	},
+};
+
+export const WithAnnotation: Story = {
+	args: {
+		...Default.args,
+		annotation: 'This is an annotation.',
+	},
+};
+
+export const WithFixedWidthAndHeight: Story = {
+	args: {
+		...Default.args,
+		imgHeight: 600,
+		imgWidth: 600,
+	},
+};

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;

apps/meteor/client/components/GenericUpsellModal/__snapshots__/GenericUpsellModal.spec.tsx.snap

@@ -0,0 +1,561 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`GenericUpsellModal renders Default without crashing 1`] = `
+<body>
+  <div>
+    <dialog
+      aria-labelledby="_r_0_-title"
+      aria-modal="true"
+      class="rcx-box rcx-box--full rcx-modal"
+      open=""
+    >
+      <div
+        class="rcx-box rcx-box--full rcx-modal__inner rcx-css-qtwduz"
+      >
+        <header
+          class="rcx-box rcx-box--full rcx-modal__header"
+        >
+          <div
+            class="rcx-box rcx-box--full rcx-modal__header-inner"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-modal__header-text rcx-css-trljwa rcx-css-lma364"
+            >
+              <div
+                class="rcx-box rcx-box--full rcx-modal__tagline rcx-css-1ozohik"
+              >
+                Premium capability
+              </div>
+              <h2
+                class="rcx-box rcx-box--full rcx-modal__title"
+                id="_r_0_-title"
+              >
+                This is the title
+              </h2>
+            </div>
+            <button
+              aria-label="Close"
+              class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-css-trljwa rcx-css-lma364"
+              tabindex="-1"
+              type="button"
+            >
+              <i
+                aria-hidden="true"
+                class="rcx-box rcx-box--full rcx-icon--name-cross rcx-icon rcx-css-4pvxx3"
+              >
+                
+              </i>
+            </button>
+          </div>
+        </header>
+        <div
+          class="rcx-box rcx-box--full rcx-modal__content rcx-css-1vw7itl"
+        >
+          <div
+            class="rcx-box rcx-box--full rcx-modal__content-wrapper rcx-css-r1bpeb"
+          >
+            <figure
+              class="rcx-modal__hero-image-wrapper"
+            >
+              <img
+                alt="Placeholder image"
+                class="rcx-box rcx-box--full rcx-modal__hero-image"
+                src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAAAAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH/xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP/EAB4RAAIBBQEBAQAAAAAAAAAAAAABAgMREiExE0HR/9oADAMBAAIRAxEAPwBuXuIkhBuMe5ib/AHQP49q4L3mLitryTLTSpOiHQI5k/HzXa/qbFOEudVTu1dumWvcTaNCZYZ7vU6g6LxqjOU/24dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9/MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD/AGvJAluyxxRd6F4x00o+NdKoVrjbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw+37mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS/BIzSN0YRkeX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1+agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk/u4eZ0deTl71Ef6hY+0yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em+taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkBSuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlPUH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z"
+              />
+            </figure>
+            <h3
+              class="rcx-box rcx-box--full rcx-css-1sfto34"
+            >
+              This is a subtitle
+            </h3>
+            <div
+              class="rcx-box rcx-box--full rcx-css-1s3t8yc"
+              style="white-space: break-spaces;"
+            >
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+            </div>
+          </div>
+        </div>
+        <div
+          class="rcx-box rcx-box--full rcx-modal__footer rcx-css-17mu816"
+        >
+          <div
+            class="rcx-button-group rcx-button-group--align-end"
+            role="group"
+          >
+            <button
+              class="rcx-box rcx-box--full rcx-button--secondary rcx-button"
+              type="button"
+            >
+              <span
+                class="rcx-button--content"
+              >
+                Cancel
+              </span>
+            </button>
+            <button
+              class="rcx-box rcx-box--full rcx-button--primary rcx-button"
+              type="button"
+            >
+              <span
+                class="rcx-button--content"
+              >
+                Upgrade
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </dialog>
+  </div>
+</body>
+`;
+
+exports[`GenericUpsellModal renders WithAnnotation without crashing 1`] = `
+<body>
+  <div>
+    <dialog
+      aria-labelledby="_r_1_-title"
+      aria-modal="true"
+      class="rcx-box rcx-box--full rcx-modal"
+      open=""
+    >
+      <div
+        class="rcx-box rcx-box--full rcx-modal__inner rcx-css-qtwduz"
+      >
+        <header
+          class="rcx-box rcx-box--full rcx-modal__header"
+        >
+          <div
+            class="rcx-box rcx-box--full rcx-modal__header-inner"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-modal__header-text rcx-css-trljwa rcx-css-lma364"
+            >
+              <div
+                class="rcx-box rcx-box--full rcx-modal__tagline rcx-css-1ozohik"
+              >
+                Premium capability
+              </div>
+              <h2
+                class="rcx-box rcx-box--full rcx-modal__title"
+                id="_r_1_-title"
+              >
+                This is the title
+              </h2>
+            </div>
+            <button
+              aria-label="Close"
+              class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-css-trljwa rcx-css-lma364"
+              tabindex="-1"
+              type="button"
+            >
+              <i
+                aria-hidden="true"
+                class="rcx-box rcx-box--full rcx-icon--name-cross rcx-icon rcx-css-4pvxx3"
+              >
+                
+              </i>
+            </button>
+          </div>
+        </header>
+        <div
+          class="rcx-box rcx-box--full rcx-modal__content rcx-css-1vw7itl"
+        >
+          <div
+            class="rcx-box rcx-box--full rcx-modal__content-wrapper rcx-css-r1bpeb"
+          >
+            <figure
+              class="rcx-modal__hero-image-wrapper"
+            >
+              <img
+                alt="Placeholder image"
+                class="rcx-box rcx-box--full rcx-modal__hero-image"
+                src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAAAAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH/xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP/EAB4RAAIBBQEBAQAAAAAAAAAAAAABAgMREiExE0HR/9oADAMBAAIRAxEAPwBuXuIkhBuMe5ib/AHQP49q4L3mLitryTLTSpOiHQI5k/HzXa/qbFOEudVTu1dumWvcTaNCZYZ7vU6g6LxqjOU/24dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9/MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD/AGvJAluyxxRd6F4x00o+NdKoVrjbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw+37mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS/BIzSN0YRkeX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1+agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk/u4eZ0deTl71Ef6hY+0yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em+taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkBSuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlPUH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z"
+              />
+            </figure>
+            <h3
+              class="rcx-box rcx-box--full rcx-css-1sfto34"
+            >
+              This is a subtitle
+            </h3>
+            <div
+              class="rcx-box rcx-box--full rcx-css-1s3t8yc"
+              style="white-space: break-spaces;"
+            >
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+            </div>
+          </div>
+        </div>
+        <div
+          class="rcx-box rcx-box--full rcx-modal__footer rcx-css-rzpqmp"
+        >
+          <div
+            class="rcx-box rcx-box--full rcx-modal__footer-annotation"
+          >
+            This is an annotation.
+          </div>
+          <div
+            class="rcx-button-group rcx-button-group--align-end"
+            role="group"
+          >
+            <button
+              class="rcx-box rcx-box--full rcx-button--secondary rcx-button"
+              type="button"
+            >
+              <span
+                class="rcx-button--content"
+              >
+                Cancel
+              </span>
+            </button>
+            <button
+              class="rcx-box rcx-box--full rcx-button--primary rcx-button"
+              type="button"
+            >
+              <span
+                class="rcx-button--content"
+              >
+                Upgrade
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </dialog>
+  </div>
+</body>
+`;
+
+exports[`GenericUpsellModal renders WithCustomButtons without crashing 1`] = `
+<body>
+  <div>
+    <dialog
+      aria-labelledby="_r_2_-title"
+      aria-modal="true"
+      class="rcx-box rcx-box--full rcx-modal"
+      open=""
+    >
+      <div
+        class="rcx-box rcx-box--full rcx-modal__inner rcx-css-qtwduz"
+      >
+        <header
+          class="rcx-box rcx-box--full rcx-modal__header"
+        >
+          <div
+            class="rcx-box rcx-box--full rcx-modal__header-inner"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-modal__header-text rcx-css-trljwa rcx-css-lma364"
+            >
+              <div
+                class="rcx-box rcx-box--full rcx-modal__tagline rcx-css-1ozohik"
+              >
+                Premium capability
+              </div>
+              <h2
+                class="rcx-box rcx-box--full rcx-modal__title"
+                id="_r_2_-title"
+              >
+                This is the title
+              </h2>
+            </div>
+            <button
+              aria-label="Close"
+              class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-css-trljwa rcx-css-lma364"
+              tabindex="-1"
+              type="button"
+            >
+              <i
+                aria-hidden="true"
+                class="rcx-box rcx-box--full rcx-icon--name-cross rcx-icon rcx-css-4pvxx3"
+              >
+                
+              </i>
+            </button>
+          </div>
+        </header>
+        <div
+          class="rcx-box rcx-box--full rcx-modal__content rcx-css-1vw7itl"
+        >
+          <div
+            class="rcx-box rcx-box--full rcx-modal__content-wrapper rcx-css-r1bpeb"
+          >
+            <figure
+              class="rcx-modal__hero-image-wrapper"
+            >
+              <img
+                alt="Placeholder image"
+                class="rcx-box rcx-box--full rcx-modal__hero-image"
+                src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAAAAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH/xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP/EAB4RAAIBBQEBAQAAAAAAAAAAAAABAgMREiExE0HR/9oADAMBAAIRAxEAPwBuXuIkhBuMe5ib/AHQP49q4L3mLitryTLTSpOiHQI5k/HzXa/qbFOEudVTu1dumWvcTaNCZYZ7vU6g6LxqjOU/24dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9/MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD/AGvJAluyxxRd6F4x00o+NdKoVrjbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw+37mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS/BIzSN0YRkeX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1+agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk/u4eZ0deTl71Ef6hY+0yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em+taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkBSuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlPUH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z"
+              />
+            </figure>
+            <h3
+              class="rcx-box rcx-box--full rcx-css-1sfto34"
+            >
+              This is a subtitle
+            </h3>
+            <div
+              class="rcx-box rcx-box--full rcx-css-1s3t8yc"
+              style="white-space: break-spaces;"
+            >
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+            </div>
+          </div>
+        </div>
+        <div
+          class="rcx-box rcx-box--full rcx-modal__footer rcx-css-17mu816"
+        >
+          <div
+            class="rcx-button-group rcx-button-group--align-end"
+            role="group"
+          >
+            <button
+              class="rcx-box rcx-box--full rcx-button--secondary rcx-button"
+              type="button"
+            >
+              <span
+                class="rcx-button--content"
+              >
+                Learn More
+              </span>
+            </button>
+            <button
+              class="rcx-box rcx-box--full rcx-button--primary rcx-button"
+              type="button"
+            >
+              <span
+                class="rcx-button--content"
+              >
+                Contact Sales
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </dialog>
+  </div>
+</body>
+`;
+
+exports[`GenericUpsellModal renders WithCustomTagLine without crashing 1`] = `
+<body>
+  <div>
+    <dialog
+      aria-labelledby="_r_3_-title"
+      aria-modal="true"
+      class="rcx-box rcx-box--full rcx-modal"
+      open=""
+    >
+      <div
+        class="rcx-box rcx-box--full rcx-modal__inner rcx-css-qtwduz"
+      >
+        <header
+          class="rcx-box rcx-box--full rcx-modal__header"
+        >
+          <div
+            class="rcx-box rcx-box--full rcx-modal__header-inner"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-modal__header-text rcx-css-trljwa rcx-css-lma364"
+            >
+              <div
+                class="rcx-box rcx-box--full rcx-modal__tagline rcx-css-1ozohik"
+              >
+                Exclusive
+              </div>
+              <h2
+                class="rcx-box rcx-box--full rcx-modal__title"
+                id="_r_3_-title"
+              >
+                This is the title
+              </h2>
+            </div>
+            <button
+              aria-label="Close"
+              class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-css-trljwa rcx-css-lma364"
+              tabindex="-1"
+              type="button"
+            >
+              <i
+                aria-hidden="true"
+                class="rcx-box rcx-box--full rcx-icon--name-cross rcx-icon rcx-css-4pvxx3"
+              >
+                
+              </i>
+            </button>
+          </div>
+        </header>
+        <div
+          class="rcx-box rcx-box--full rcx-modal__content rcx-css-1vw7itl"
+        >
+          <div
+            class="rcx-box rcx-box--full rcx-modal__content-wrapper rcx-css-r1bpeb"
+          >
+            <figure
+              class="rcx-modal__hero-image-wrapper"
+            >
+              <img
+                alt="Placeholder image"
+                class="rcx-box rcx-box--full rcx-modal__hero-image"
+                src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAAAAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH/xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP/EAB4RAAIBBQEBAQAAAAAAAAAAAAABAgMREiExE0HR/9oADAMBAAIRAxEAPwBuXuIkhBuMe5ib/AHQP49q4L3mLitryTLTSpOiHQI5k/HzXa/qbFOEudVTu1dumWvcTaNCZYZ7vU6g6LxqjOU/24dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9/MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD/AGvJAluyxxRd6F4x00o+NdKoVrjbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw+37mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS/BIzSN0YRkeX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1+agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk/u4eZ0deTl71Ef6hY+0yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em+taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkBSuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlPUH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z"
+              />
+            </figure>
+            <h3
+              class="rcx-box rcx-box--full rcx-css-1sfto34"
+            >
+              This is a subtitle
+            </h3>
+            <div
+              class="rcx-box rcx-box--full rcx-css-1s3t8yc"
+              style="white-space: break-spaces;"
+            >
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+            </div>
+          </div>
+        </div>
+        <div
+          class="rcx-box rcx-box--full rcx-modal__footer rcx-css-17mu816"
+        >
+          <div
+            class="rcx-button-group rcx-button-group--align-end"
+            role="group"
+          >
+            <button
+              class="rcx-box rcx-box--full rcx-button--secondary rcx-button"
+              type="button"
+            >
+              <span
+                class="rcx-button--content"
+              >
+                Cancel
+              </span>
+            </button>
+            <button
+              class="rcx-box rcx-box--full rcx-button--primary rcx-button"
+              type="button"
+            >
+              <span
+                class="rcx-button--content"
+              >
+                Upgrade
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </dialog>
+  </div>
+</body>
+`;
+
+exports[`GenericUpsellModal renders WithFixedWidthAndHeight without crashing 1`] = `
+<body>
+  <div>
+    <dialog
+      aria-labelledby="_r_4_-title"
+      aria-modal="true"
+      class="rcx-box rcx-box--full rcx-modal"
+      open=""
+    >
+      <div
+        class="rcx-box rcx-box--full rcx-modal__inner rcx-css-qtwduz"
+      >
+        <header
+          class="rcx-box rcx-box--full rcx-modal__header"
+        >
+          <div
+            class="rcx-box rcx-box--full rcx-modal__header-inner"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-modal__header-text rcx-css-trljwa rcx-css-lma364"
+            >
+              <div
+                class="rcx-box rcx-box--full rcx-modal__tagline rcx-css-1ozohik"
+              >
+                Premium capability
+              </div>
+              <h2
+                class="rcx-box rcx-box--full rcx-modal__title"
+                id="_r_4_-title"
+              >
+                This is the title
+              </h2>
+            </div>
+            <button
+              aria-label="Close"
+              class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-css-trljwa rcx-css-lma364"
+              tabindex="-1"
+              type="button"
+            >
+              <i
+                aria-hidden="true"
+                class="rcx-box rcx-box--full rcx-icon--name-cross rcx-icon rcx-css-4pvxx3"
+              >
+                
+              </i>
+            </button>
+          </div>
+        </header>
+        <div
+          class="rcx-box rcx-box--full rcx-modal__content rcx-css-1vw7itl"
+        >
+          <div
+            class="rcx-box rcx-box--full rcx-modal__content-wrapper rcx-css-r1bpeb"
+          >
+            <figure
+              class="rcx-modal__hero-image-wrapper"
+            >
+              <img
+                alt="Placeholder image"
+                class="rcx-box rcx-box--full rcx-modal__hero-image rcx-css-1k43lja"
+                src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAAAAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH/xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP/EAB4RAAIBBQEBAQAAAAAAAAAAAAABAgMREiExE0HR/9oADAMBAAIRAxEAPwBuXuIkhBuMe5ib/AHQP49q4L3mLitryTLTSpOiHQI5k/HzXa/qbFOEudVTu1dumWvcTaNCZYZ7vU6g6LxqjOU/24dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9/MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD/AGvJAluyxxRd6F4x00o+NdKoVrjbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw+37mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS/BIzSN0YRkeX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1+agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk/u4eZ0deTl71Ef6hY+0yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em+taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkBSuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlPUH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z"
+              />
+            </figure>
+            <h3
+              class="rcx-box rcx-box--full rcx-css-1sfto34"
+            >
+              This is a subtitle
+            </h3>
+            <div
+              class="rcx-box rcx-box--full rcx-css-1s3t8yc"
+              style="white-space: break-spaces;"
+            >
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+            </div>
+          </div>
+        </div>
+        <div
+          class="rcx-box rcx-box--full rcx-modal__footer rcx-css-17mu816"
+        >
+          <div
+            class="rcx-button-group rcx-button-group--align-end"
+            role="group"
+          >
+            <button
+              class="rcx-box rcx-box--full rcx-button--secondary rcx-button"
+              type="button"
+            >
+              <span
+                class="rcx-button--content"
+              >
+                Cancel
+              </span>
+            </button>
+            <button
+              class="rcx-box rcx-box--full rcx-button--primary rcx-button"
+              type="button"
+            >
+              <span
+                class="rcx-button--content"
+              >
+                Upgrade
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </dialog>
+  </div>
+</body>
+`;

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

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

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

@@ -0,0 +1,67 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import type { UseQueryResult } from '@tanstack/react-query';
+import { renderHook, waitFor } from '@testing-library/react';
+
+import { useUpsellActions } from './useUpsellActions';
+import { createFakeLicenseInfo } from '../../../../tests/mocks/data';
+import { useIsEnterprise } from '../../../hooks/useIsEnterprise';
+
+jest.mock('../../../hooks/useIsEnterprise', () => ({
+	useIsEnterprise: jest.fn(),
+}));
+
+const appRoot = mockAppRoot()
+	.withJohnDoe()
+	.withEndpoint('GET', '/v1/licenses.info', async () => ({ license: createFakeLicenseInfo({ hasValidLicense: true }) }))
+	.build();
+
+describe('useUpsellActions hook', () => {
+	beforeEach(() => {
+		(useIsEnterprise as jest.Mock).mockImplementation(jest.requireActual('../../../hooks/useIsEnterprise').useIsEnterprise);
+	});
+
+	afterAll(() => {
+		jest.clearAllMocks();
+	});
+
+	it('should show upsell modal if not enterprise', () => {
+		const { result } = renderHook(() => useUpsellActions(), {
+			wrapper: mockAppRoot().build(),
+		});
+
+		expect(result.current.shouldShowUpsell).toBe(true);
+		expect(result.current.cloudWorkspaceHadTrial).toBe(false);
+	});
+
+	it('should show upsell modal if enterprise but has no license module', async () => {
+		const { result } = renderHook(() => useUpsellActions(false), {
+			wrapper: appRoot,
+		});
+
+		await waitFor(() => {
+			expect(result.current.shouldShowUpsell).toBe(true);
+		});
+	});
+
+	it('should NOT show upsell if enterprise and has license module', async () => {
+		const { result } = renderHook(() => useUpsellActions(true), {
+			wrapper: appRoot,
+		});
+
+		await waitFor(() => {
+			expect(result.current.shouldShowUpsell).toBe(false);
+		});
+	});
+
+	it('should show upsell if useIsEnterprise is undefined', async () => {
+		(useIsEnterprise as jest.Mock).mockReturnValue({
+			data: undefined,
+		} as UseQueryResult);
+
+		const { result } = renderHook(() => useUpsellActions(true), {
+			wrapper: mockAppRoot().build(),
+		});
+
+		expect(result.current.shouldShowUpsell).toBe(true);
+	});
+});

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

@@ -0,0 +1,33 @@
+import { useSetModal, useSetting } from '@rocket.chat/ui-contexts';
+import { useCallback } from 'react';
+
+import { useExternalLink } from '../../../hooks/useExternalLink';
+import { useIsEnterprise } from '../../../hooks/useIsEnterprise';
+import { links } from '../../../lib/links';
+import { useCheckoutUrl } from '../../../views/admin/subscription/hooks/useCheckoutUrl';
+
+const TALK_TO_SALES_URL = links.go.contactSales;
+
+export const useUpsellActions = (hasLicenseModule = false) => {
+	const setModal = useSetModal();
+	const handleOpenLink = useExternalLink();
+	const cloudWorkspaceHadTrial = useSetting('Cloud_Workspace_Had_Trial', false);
+
+	const { data } = useIsEnterprise();
+	const shouldShowUpsell = !data?.isEnterprise || !hasLicenseModule;
+
+	const openExternalLink = useExternalLink();
+	const manageSubscriptionUrl = useCheckoutUrl()({ target: 'upsell-modal', action: 'upgrade' });
+
+	const handleManageSubscription = useCallback(() => {
+		openExternalLink(manageSubscriptionUrl);
+		setModal(null);
+	}, [manageSubscriptionUrl, openExternalLink, setModal]);
+
+	const handleTalkToSales = useCallback(() => {
+		handleOpenLink(TALK_TO_SALES_URL);
+		setModal(null);
+	}, [handleOpenLink, setModal]);
+
+	return { shouldShowUpsell, cloudWorkspaceHadTrial, handleManageSubscription, handleTalkToSales };
+};

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

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