From d3c52811b669e4fce7a27be5d4f7626a7f50ce97 Mon Sep 17 00:00:00 2001
From: gabriellsh <40830821+gabriellsh@users.noreply.github.com>
Date: Fri, 15 Jul 2022 17:17:34 -0300
Subject: [PATCH] Chore: Plan tag (#26224)

---
 apps/meteor/client/components/PlanTag.tsx | 42 +++++++----------------
 apps/meteor/lib/isTruthy.ts               |  1 +
 2 files changed, 13 insertions(+), 30 deletions(-)
 create mode 100644 apps/meteor/lib/isTruthy.ts

diff --git a/apps/meteor/client/components/PlanTag.tsx b/apps/meteor/client/components/PlanTag.tsx
index 4a0ad84c45cff..94ca63206a67b 100644
--- a/apps/meteor/client/components/PlanTag.tsx
+++ b/apps/meteor/client/components/PlanTag.tsx
@@ -1,46 +1,28 @@
 import { Box, Tag } from '@rocket.chat/fuselage';
-import { useSafely } from '@rocket.chat/fuselage-hooks';
-import { useMethod } from '@rocket.chat/ui-contexts';
+import { useEndpoint } from '@rocket.chat/ui-contexts';
 import React, { ReactElement, useEffect, useState } from 'react';
+import { useQuery } from 'react-query';
 
-import { ILicenseTag } from '../../ee/app/license/definitions/ILicenseTag';
+import { isTruthy } from '../../lib/isTruthy';
 
 function PlanTag(): ReactElement {
-	const [plans, setPlans] = useSafely(
-		useState<
-			{
-				name: string;
-				color: string;
-			}[]
-		>([]),
-	);
+	const [plans, setPlans] = useState<string[]>([]);
 
-	const getTags = useMethod('license:getTags');
+	const isEnterpriseEdition = useEndpoint('GET', '/v1/licenses.isEnterprise');
+	const { data } = useQuery(['licenses.isEnterprise'], () => isEnterpriseEdition());
 
 	useEffect(() => {
-		const developmentTag = process.env.NODE_ENV === 'development' ? { name: 'development', color: '#095ad2' } : null;
-
-		const fetchTags = async (): Promise<void> => {
-			const tags = await getTags();
-			setPlans([developmentTag, ...tags].filter(Boolean) as ILicenseTag[]);
-		};
+		const developmentTag = process.env.NODE_ENV === 'development' ? 'Development' : null;
+		const enterpriseTag = data?.isEnterprise ? 'Enterprise' : null;
 
-		fetchTags();
-	}, [getTags, setPlans]);
+		setPlans([developmentTag, enterpriseTag].filter(isTruthy));
+	}, [setPlans, data?.isEnterprise]);
 
 	return (
 		<>
-			{plans.map(({ name, color }) => (
+			{plans.map((name) => (
 				<Box marginInline='x4' display='inline-block' verticalAlign='middle' key={name}>
-					<Tag
-						style={{
-							color: '#fff',
-							backgroundColor: color,
-							textTransform: 'capitalize',
-						}}
-					>
-						{name}
-					</Tag>
+					<Tag variant='primary'>{name}</Tag>
 				</Box>
 			))}
 		</>
diff --git a/apps/meteor/lib/isTruthy.ts b/apps/meteor/lib/isTruthy.ts
new file mode 100644
index 0000000000000..67e641b230433
--- /dev/null
+++ b/apps/meteor/lib/isTruthy.ts
@@ -0,0 +1 @@
+export const isTruthy = <T>(x: T | null | undefined | 0 | false | ''): x is T => Boolean(x);