feat: add ogp-awareness to form end page

Author: eliotlim

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,6 +88,18 @@ 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 <></>
+    }
+  })()
+
   return (
     <>
       <Box ref={focusRef}>
@@ -100,6 +115,7 @@ export const EndPageBlock = ({
           </Box>
         ) : null}
       </Box>
+      {ogpAwareness && <Box mt="1rem">{ogpAwarenessComponent}</Box>}
       <Box mt="1rem">
         <Box>
           <Text textColor="secondary.300" textStyle="caption-2">