feat: move banner to growthbook

opengovsg · Jan 21, 2025 · 3a0d212 · 3a0d212
1 parent 12175a9
commit 3a0d212
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 16 deletions.
diff --git a/frontend/src/features/admin-form/common/AdminFormLayout.tsx b/frontend/src/features/admin-form/common/AdminFormLayout.tsx
@@ -1,6 +1,7 @@
 import { useMemo } from 'react'
 import { Outlet, useParams } from 'react-router-dom'
 import { Flex } from '@chakra-ui/react'
+import { useFeatureValue } from '@growthbook/growthbook-react'
 import { get } from 'lodash'
 
 import { fillHeightCss } from '~utils/fillHeightCss'
@@ -9,8 +10,8 @@ import { Banner } from '~components/Banner'
 
 import AdminForbiddenErrorPage from '~pages/AdminForbiddenError'
 import NotFoundErrorPage from '~pages/NotFoundError'
-import { useEnv } from '~features/env/queries'
 
+// import { useEnv } from '~features/env/queries'
 import { StorageResponsesProvider } from '../responses/ResponsesPage/storage/StorageResponsesProvider'
 
 import AdminFormNavbar from './components/AdminFormNavbar'
@@ -23,7 +24,9 @@ export const AdminFormLayout = (): JSX.Element => {
   const { formId } = useParams()
   if (!formId) throw new Error('No formId provided')
 
-  const { data: { siteBannerContent, adminBannerContent } = {} } = useEnv()
+  // const { data: { siteBannerContent, adminBannerContent } = {} } = useEnv()
+  const siteBannerContent = useFeatureValue('site-banner-content', '')
+  const adminBannerContent = useFeatureValue('admin-banner-content', '')
 
   const bannerContent = useMemo(
     // Use || instead of ?? so that we fall through even if previous banners are empty string.

diff --git a/frontend/src/features/login/LoginPageTemplate.tsx b/frontend/src/features/login/LoginPageTemplate.tsx
@@ -2,6 +2,7 @@ import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Link as ReactLink } from 'react-router-dom'
 import { Box, chakra, Flex, GridItem, GridProps, Text } from '@chakra-ui/react'
+import { useFeatureValue } from '@growthbook/growthbook-react'
 
 import { AppFooter } from '~/app/AppFooter'
 
@@ -90,7 +91,11 @@ export const NonMobileSidebarGridArea: FCC = ({ children }) => (
 )
 
 export const LoginPageTemplate: FCC = ({ children }) => {
-  const { data: { siteBannerContent, isLoginBanner } = {} } = useEnv()
+  // const { data: { siteBannerContent, isLoginBanner } = {} } = useEnv()
+
+  const siteBannerContent = useFeatureValue('site-banner-content', '')
+  const isLoginBanner = useFeatureValue('is-login-banner', '')
+
   const { t } = useTranslation()
 
   const bannerContent = useMemo(

diff --git a/frontend/src/features/public-form/components/FormBanner.tsx b/frontend/src/features/public-form/components/FormBanner.tsx
@@ -1,24 +1,30 @@
 import { useMemo } from 'react'
+import { useFeatureValue, useGrowthBook } from '@growthbook/growthbook-react'
 
 import { FormAuthType } from '~shared/types'
 
 import { getBannerProps } from '~utils/getBannerProps'
 import { Banner } from '~components/Banner'
 
-import { useEnv } from '~features/env/queries'
-
+// import { useEnv } from '~features/env/queries'
 import { usePublicFormContext } from '../PublicFormContext'
 
 export const FormBanner = (): JSX.Element | null => {
-  const {
-    data: {
-      siteBannerContent,
-      isGeneralMaintenance,
-      isSPMaintenance,
-      isCPMaintenance,
-      myInfoBannerContent,
-    } = {},
-  } = useEnv()
+  // const {
+  //   data: {
+  //     siteBannerContent,
+  //     isGeneralMaintenance,
+  //     isSPMaintenance,
+  //     isCPMaintenance,
+  //     myInfoBannerContent,
+  //   } = {},
+  // } = useEnv()
+  const siteBannerContent = useFeatureValue('site-banner-content', '')
+  console.log('siteBannerContent: ', siteBannerContent)
+  const isGeneralMaintenance = useFeatureValue('is-general-maintenance', '')
+  const isSPMaintenance = useFeatureValue('is-sp-maintenance', '')
+  const isCPMaintenance = useFeatureValue('is-cp-maintenance', '')
+  const myInfoBannerContent = useFeatureValue('myinfo-banner-content', '')
   const { form } = usePublicFormContext()
 
   const bannerContent = useMemo(

diff --git a/frontend/src/features/workspace/WorkspacePage.tsx b/frontend/src/features/workspace/WorkspacePage.tsx
@@ -13,6 +13,7 @@ import {
   Text,
   useDisclosure,
 } from '@chakra-ui/react'
+import { useFeatureValue } from '@growthbook/growthbook-react'
 
 import { PAPERLESS_FORMSG_RESEARCH_LINK } from '~shared/constants'
 import { Workspace } from '~shared/types/workspace'
@@ -25,7 +26,7 @@ import { Banner } from '~components/Banner'
 import InlineMessage from '~components/InlineMessage'
 import Link from '~components/Link'
 
-import { useEnv } from '~features/env/queries'
+// import { useEnv } from '~features/env/queries'
 import { useUser } from '~features/user/queries'
 import { WorkspaceContent } from '~features/workspace/WorkspaceContent'
 
@@ -37,7 +38,9 @@ import { WorkspaceProvider } from './WorkspaceProvider'
 
 export const WorkspacePage = (): JSX.Element => {
   const [currWorkspaceId, setCurrWorkspaceId] = useState<string>('')
-  const { data: { siteBannerContent, adminBannerContent } = {} } = useEnv()
+  // const { data: { siteBannerContent, adminBannerContent } = {} } = useEnv()
+  const siteBannerContent = useFeatureValue('site-banner-content', '')
+  const adminBannerContent = useFeatureValue('admin-banner-content', '')
 
   const mobileDrawer = useDisclosure()
   const isMobile = useIsMobile()