From 1fd896bf606cdb3ba63ae379c247c1c272ed3695 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cosmin=20P=C3=A2rvulescu?= <cosmin.parvulescu@gmail.com>
Date: Fri, 22 Sep 2023 13:50:47 +0300
Subject: [PATCH] Hide UI behind feature flag

---
 .../routes/__layout/groups/$groupID/index.tsx | 61 ++++++++++---------
 1 file changed, 33 insertions(+), 28 deletions(-)

diff --git a/apps/console/app/routes/__layout/groups/$groupID/index.tsx b/apps/console/app/routes/__layout/groups/$groupID/index.tsx
index f4e5e665b2..91f935604f 100644
--- a/apps/console/app/routes/__layout/groups/$groupID/index.tsx
+++ b/apps/console/app/routes/__layout/groups/$groupID/index.tsx
@@ -58,6 +58,7 @@ import {
   loader as billingLoader,
 } from '../../billing/ops'
 import { process3DSecureCard } from '~/utils/billing'
+import { useFeatureFlags } from '@proofzero/design-system/src/hooks/feature-flags'
 
 const accountTypes = [
   ...Object.values(EmailAccountType),
@@ -515,6 +516,8 @@ export default () => {
     }
   }, [toastNotification])
 
+  const featureFlags = useFeatureFlags(hydrated)
+
   return (
     <>
       <Toaster position="top-right" reverseOrder={false} />
@@ -780,35 +783,37 @@ export default () => {
               </Pill>
             </div>
 
-            <section className="flex flex-row justify-between items-center mb-4">
-              <div className="flex flex-row items-center space-x-1">
-                <Text size="sm" className="text-gray-500">
-                  Unassigned User Seats:
-                </Text>
-                <Pill className="bg-white flex flex-row items-center rounded-xl">
-                  <div className="w-2 h-2 rounded-full mr-2 bg-blue-300"></div>
-                  <Text size="xs" weight="medium" className="text-gray-700">
-                    {`Free ${3 - Math.min(3, group.members.length)}`}
+            {featureFlags['seats'] && (
+              <section className="flex flex-row justify-between items-center mb-4">
+                <div className="flex flex-row items-center space-x-1">
+                  <Text size="sm" className="text-gray-500">
+                    Unassigned User Seats:
                   </Text>
-                </Pill>
-
-                <Pill className="bg-white flex flex-row items-center rounded-xl">
-                  <div className="w-2 h-2 rounded-full mr-2 bg-gray-600"></div>
-                  <Text size="xs" weight="medium" className="text-gray-700">
-                    {`Purchased ${groupSeats.total - groupSeats.used}`}
-                  </Text>
-                </Pill>
-              </div>
-              <div>
-                <Button
-                  onClick={() => setPurchaseGroupSeatingModalOpen(true)}
-                  btnType="secondary-alt"
-                  btnSize="sm"
-                >
-                  Add seats
-                </Button>
-              </div>
-            </section>
+                  <Pill className="bg-white flex flex-row items-center rounded-xl">
+                    <div className="w-2 h-2 rounded-full mr-2 bg-blue-300"></div>
+                    <Text size="xs" weight="medium" className="text-gray-700">
+                      {`Free ${3 - Math.min(3, group.members.length)}`}
+                    </Text>
+                  </Pill>
+
+                  <Pill className="bg-white flex flex-row items-center rounded-xl">
+                    <div className="w-2 h-2 rounded-full mr-2 bg-gray-600"></div>
+                    <Text size="xs" weight="medium" className="text-gray-700">
+                      {`Purchased ${groupSeats.total - groupSeats.used}`}
+                    </Text>
+                  </Pill>
+                </div>
+                <div>
+                  <Button
+                    onClick={() => setPurchaseGroupSeatingModalOpen(true)}
+                    btnType="secondary-alt"
+                    btnSize="sm"
+                  >
+                    Add seats
+                  </Button>
+                </div>
+              </section>
+            )}
 
             <div>
               <List