feat: add ogp-awareness to form status tracker

Author: eliotlim

frontend/src/features/public-form/components/StatusTrackerPage/StatusTrackerPage.tsx

@@ -1,12 +1,15 @@
 import { useParams } from 'react-router-dom'
 import { Box, Flex, GridItem, GridProps, Text } from '@chakra-ui/react'
+import { useFeatureValue } from '@growthbook/growthbook-react'
 
 import { StepData, WorkflowStatus } from '~shared/types'
 
 import { AppFooter } from '~/app/AppFooter'
 
 import { FCC } from '~typings/react'
 
+import { OgpAwarenessBadge } from '~assets/svgrs/brand/OgpAwarenessBadge'
+import { OgpAwarenessBanner } from '~assets/svgrs/brand/OgpAwarenessBanner'
 import { AppGrid } from '~templates/AppGrid'
 
 import NotFoundErrorPage from '~pages/NotFoundError'
@@ -95,6 +98,18 @@ export const StatusTrackerPage = (): JSX.Element => {
 
   const { data, isLoading, error } = useStatusTracker(submissionId)
 
+  const ogpAwareness = useFeatureValue('ogp-awareness', 'none')
+  const ogpAwarenessComponent = (() => {
+    switch (ogpAwareness) {
+      case 'banner':
+        return <OgpAwarenessBanner />
+      case 'badge':
+        return <OgpAwarenessBadge />
+      default:
+        return <></>
+    }
+  })()
+
   if (isLoading) return <StatusTrackerSkeletonPage />
 
   if (error || !data || !data.submittedSteps || !data.workflow)
@@ -154,6 +169,7 @@ export const StatusTrackerPage = (): JSX.Element => {
                 <Box ml="-1.5rem">
                   <PublicFormLogo />
                 </Box>
+                {ogpAwareness && <Box my="1rem">{ogpAwarenessComponent}</Box>}
                 <Text mb="2rem" textStyle="h4">
                   Response ID: {data.responseId}
                 </Text>