feat: add ogp-awareness components

frontend/src/components/FormEndPage/EndPageBlock.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Box, Text, VisuallyHidden } from '@chakra-ui/react'
+import { useFeatureValue } from '@growthbook/growthbook-react'
 import { format } from 'date-fns'
 
 import {
@@ -11,6 +12,8 @@ import {
   PublicFormDto,
 } from '~shared/types/form'
 
+import { OgpAwarenessBadge } from '~assets/svgrs/brand/OgpAwarenessBadge'
+import { OgpAwarenessBanner } from '~assets/svgrs/brand/OgpAwarenessBanner'
 import { useMdComponents } from '~hooks/useMdComponents'
 import { getValueInSelectedLanguage } from '~utils/multiLanguage'
 import { MarkdownText } from '~components/MarkdownText'
@@ -85,8 +88,21 @@ export const EndPageBlock = ({
     return 'You have successfully submitted your response.'
   }, [formTitle])
 
+  const ogpAwareness = useFeatureValue('ogp-awareness', 'none')
+  const ogpAwarenessComponent = (() => {
+    switch (ogpAwareness) {
+      case 'banner':
+        return <OgpAwarenessBanner />
+      case 'badge':
+        return <OgpAwarenessBadge />
+      default:
+        return undefined
+    }
+  })()
+
   return (
     <>
+      {ogpAwarenessComponent && <Box mb="1rem">{ogpAwarenessComponent}</Box>}
       <Box ref={focusRef}>
         <VisuallyHidden aria-live="assertive">
           {submittedAriaText}

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 undefined
+    }
+  })()
+
   if (isLoading) return <StatusTrackerSkeletonPage />
 
   if (error || !data || !data.submittedSteps || !data.workflow)
@@ -154,6 +169,9 @@ export const StatusTrackerPage = (): JSX.Element => {
                 <Box ml="-1.5rem">
                   <PublicFormLogo />
                 </Box>
+                {ogpAwarenessComponent && (
+                  <Box my="1rem">{ogpAwarenessComponent}</Box>
+                )}
                 <Text mb="2rem" textStyle="h4">
                   Response ID: {data.responseId}
                 </Text>

shared/constants/feature-flags.ts

@@ -28,4 +28,5 @@ export const featureFlags = {
   singpassMrf: 'singpass-mrf' as const,
   enableSaveDraftButtonFloating: 'enable-save-draft-button-floating' as const,
   enableSaveDraftButtonHeader: 'enable-save-draft-button-header' as const,
+  ogpAwareness: 'ogp-awareness' as const,
 }