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

apps/meteor/client/views/admin/subscription/SubscriptionPage.tsx

@@ -0,0 +1,204 @@
+import { Accordion, AccordionItem, Box, Button, ButtonGroup, Callout, Grid, GridItem } from '@rocket.chat/fuselage';
+import { useDebouncedValue, useSessionStorage } from '@rocket.chat/fuselage-hooks';
+import {
+	Page,
+	PageScrollableContentWithShadow,
+	PageHeaderNoShadow,
+	PageBlockWithBorder,
+	useInvalidateLicense,
+	useLicenseWithCloudAnnouncement,
+} from '@rocket.chat/ui-client';
+import { useSearchParameter, useRouter } from '@rocket.chat/ui-contexts';
+import { t } from 'i18next';
+import { memo, useCallback, useEffect } from 'react';
+import tinykeys from 'tinykeys';
+
+import { SubscriptionCalloutLimits } from './SubscriptionCalloutLimits';
+import SubscriptionPageSkeleton from './SubscriptionPageSkeleton';
+import UpgradeButton from './components/UpgradeButton';
+import UpgradeToGetMore from './components/UpgradeToGetMore';
+import ActiveSessionsCard from './components/cards/ActiveSessionsCard';
+import ActiveSessionsPeakCard from './components/cards/ActiveSessionsPeakCard';
+import AppsUsageCard from './components/cards/AppsUsageCard';
+import CountMACCard from './components/cards/CountMACCard';
+import CountSeatsCard from './components/cards/CountSeatsCard';
+import FeaturesCard from './components/cards/FeaturesCard';
+import MACCard from './components/cards/MACCard';
+import PlanCard from './components/cards/PlanCard';
+import SeatsCard from './components/cards/SeatsCard';
+import { useCancelSubscriptionModal } from './hooks/useCancelSubscriptionModal';
+import { useWorkspaceSync } from './hooks/useWorkspaceSync';
+import UiKitSubscriptionLicense from './surface/UiKitSubscriptionLicense';
+import { useIsEnterprise } from '../../../hooks/useIsEnterprise';
+import { useRegistrationStatus } from '../../../hooks/useRegistrationStatus';
+
+function useShowLicense() {
+	const [showLicenseTab, setShowLicenseTab] = useSessionStorage('admin:showLicenseTab', false);
+
+	useEffect(() => {
+		const unsubscribe = tinykeys(window, {
+			'ArrowUp ArrowUp ArrowDown ArrowDown ArrowLeft ArrowRight ArrowLeft ArrowRight b a': () => {
+				setShowLicenseTab((showLicenseTab) => !showLicenseTab);
+			},
+		});
+		return () => {
+			unsubscribe();
+		};
+	});
+
+	return showLicenseTab;
+}
+
+const SubscriptionPage = () => {
+	const showLicense = useShowLicense();
+	const router = useRouter();
+	const { data: enterpriseData } = useIsEnterprise();
+	const { canViewRegistrationStatus } = useRegistrationStatus();
+	const { data: licensesData, isLoading: isLicenseLoading } = useLicenseWithCloudAnnouncement({ loadValues: true });
+	const syncLicenseUpdate = useWorkspaceSync();
+	const invalidateLicenseQuery = useInvalidateLicense();
+
+	const subscriptionSuccess = useSearchParameter('subscriptionSuccess');
+
+	const showSubscriptionCallout = useDebouncedValue(subscriptionSuccess || syncLicenseUpdate.isPending, 10000);
+
+	const { license, limits, activeModules = [], cloudSyncAnnouncement } = licensesData || {};
+	const { isEnterprise = true } = enterpriseData || {};
+
+	const getKeyLimit = (key: 'monthlyActiveContacts' | 'activeUsers') => {
+		const { max, value } = limits?.[key] || {};
+		return {
+			max: max !== undefined && max !== -1 ? max : Infinity,
+			value,
+		};
+	};
+
+	const macLimit = getKeyLimit('monthlyActiveContacts');
+	const seatsLimit = getKeyLimit('activeUsers');
+
+	const { isLoading: isCancelSubscriptionLoading, open: openCancelSubscriptionModal } = useCancelSubscriptionModal();
+
+	const handleSyncLicenseUpdate = useCallback(() => {
+		syncLicenseUpdate.mutate(undefined, {
+			onSuccess: () => invalidateLicenseQuery(100),
+		});
+	}, [invalidateLicenseQuery, syncLicenseUpdate]);
+
+	useEffect(() => {
+		if (subscriptionSuccess && syncLicenseUpdate.isIdle) {
+			handleSyncLicenseUpdate();
+			return;
+		}
+
+		if (subscriptionSuccess) {
+			router.navigate(
+				{
+					name: router.getRouteName()!,
+					params: Object.fromEntries(Object.entries(router.getSearchParameters()).filter(([key]) => key !== 'subscriptionSuccess')),
+				},
+				{
+					replace: true,
+				},
+			);
+		}
+	}, [handleSyncLicenseUpdate, router, subscriptionSuccess, syncLicenseUpdate.isIdle]);
+
+	return (
+		<Page background='tint'>
+			<PageHeaderNoShadow title={t('Subscription')}>
+				<ButtonGroup>
+					{canViewRegistrationStatus && (
+						<Button loading={syncLicenseUpdate.isPending} icon='reload' onClick={() => handleSyncLicenseUpdate()}>
+							{t('Sync_license_update')}
+						</Button>
+					)}
+					<UpgradeButton target='subscription_header' action={isEnterprise ? 'manage_subscription' : 'upgrade'} primary>
+						{t(isEnterprise ? 'Manage_subscription' : 'Upgrade')}
+					</UpgradeButton>
+				</ButtonGroup>
+			</PageHeaderNoShadow>
+			{cloudSyncAnnouncement && (
+				<PageBlockWithBorder>
+					<UiKitSubscriptionLicense key='license' initialView={cloudSyncAnnouncement} />
+				</PageBlockWithBorder>
+			)}
+			<PageScrollableContentWithShadow padding={16}>
+				{(showSubscriptionCallout || syncLicenseUpdate.isPending) && (
+					<Callout type='info' title={t('Sync_license_update_Callout_Title')} margin={8}>
+						{t('Sync_license_update_Callout')}
+					</Callout>
+				)}
+				<SubscriptionCalloutLimits />
+				{isLicenseLoading && <SubscriptionPageSkeleton />}
+				{!isLicenseLoading && (
+					<>
+						{showLicense && (
+							<Accordion>
+								<AccordionItem title={t('License')}>
+									<pre>{JSON.stringify(licensesData, null, 2)}</pre>
+								</AccordionItem>
+							</Accordion>
+						)}
+						<Box marginBlock='none' marginInline='auto' width='full' color='default'>
+							<Grid margin={0}>
+								<GridItem lg={4} xs={4} padding={8} minHeight={260}>
+									<PlanCard license={license} licenseLimits={{ activeUsers: seatsLimit }} />
+								</GridItem>
+
+								<GridItem lg={8} xs={4} padding={8} minHeight={260}>
+									<FeaturesCard activeModules={activeModules} isEnterprise={isEnterprise} />
+								</GridItem>
+
+								{seatsLimit.value !== undefined && (
+									<GridItem lg={6} xs={4} padding={8} minHeight={260}>
+										{seatsLimit.max !== Infinity ? (
+											<SeatsCard value={seatsLimit.value} max={seatsLimit.max} hideManageSubscription={licensesData?.trial} />
+										) : (
+											<CountSeatsCard activeUsers={seatsLimit?.value} />
+										)}
+									</GridItem>
+								)}
+
+								{macLimit.value !== undefined && (
+									<GridItem lg={6} xs={4} padding={8} minHeight={260}>
+										{macLimit.max !== Infinity ? (
+											<MACCard max={macLimit.max} value={macLimit.value} hideManageSubscription={licensesData?.trial} />
+										) : (
+											<CountMACCard macsCount={macLimit.value} />
+										)}
+									</GridItem>
+								)}
+
+								{!license && (
+									<>
+										{limits?.marketplaceApps !== undefined && (
+											<GridItem lg={4} xs={4} padding={8} minHeight={260}>
+												<AppsUsageCard privateAppsLimit={limits?.privateApps} marketplaceAppsLimit={limits.marketplaceApps} />
+											</GridItem>
+										)}
+
+										<GridItem lg={4} xs={4} padding={8} minHeight={260}>
+											<ActiveSessionsCard />
+										</GridItem>
+										<GridItem lg={4} xs={4} padding={8} minHeight={260}>
+											<ActiveSessionsPeakCard />
+										</GridItem>
+									</>
+								)}
+							</Grid>
+							<UpgradeToGetMore activeModules={activeModules} isEnterprise={isEnterprise}>
+								{Boolean(licensesData?.license?.information.cancellable) && (
+									<Button loading={isCancelSubscriptionLoading} secondary danger onClick={openCancelSubscriptionModal}>
+										{t('Cancel_subscription')}
+									</Button>
+								)}
+							</UpgradeToGetMore>
+						</Box>
+					</>
+				)}
+			</PageScrollableContentWithShadow>
+		</Page>
+	);
+};
+
+export default memo(SubscriptionPage);