feat: add ogp logo header

Author: eliotlim

frontend/src/features/public-form/components/FormLogo/FormBannerLogo.tsx

@@ -2,6 +2,7 @@ import { useEffect, useMemo, useState } from 'react'
 import { BiImage } from 'react-icons/bi'
 import {
   Box,
+  Divider,
   Flex,
   Grid,
   Icon,
@@ -11,9 +12,13 @@ import {
   Stack,
   Text,
 } from '@chakra-ui/react'
+import { useFeatureValue } from '@growthbook/growthbook-react'
 
+import { featureFlags } from '~shared/constants'
 import { FormColorTheme } from '~shared/types'
 
+import { OgpLogoFull } from '~assets/svgrs/brand/OgpFullLogo'
+
 import { FormLogoutButton } from './FormLogoutButton'
 
 export interface FormBannerLogoProps {
@@ -79,21 +84,33 @@ export const FormBannerLogo = ({
     }
   }, [fallbackType, logoImgSrc])
 
+  const enableOgpHeader = useFeatureValue(featureFlags.ogpHeader, false)
+
   if (!hasLogo && !isLoading) return null
 
   return (
     <Grid p="1rem" bg="white" gridTemplateColumns="1fr auto 1fr">
       <Spacer />
-      <Flex maxW="57rem">
-        <Image
-          fallback={fallback}
-          onLoad={() => setFallbackType('loaded')}
-          onError={() => setFallbackType('error')}
-          src={logoImgSrc}
-          alt={logoImgAlt}
-          minH="1.25rem"
-          maxH="4rem"
-        />
+      <Flex alignItems={'center'} justifyContent="center" p={4}>
+        <Flex maxW="57rem">
+          <Image
+            fallback={fallback}
+            onLoad={() => setFallbackType('loaded')}
+            onError={() => setFallbackType('error')}
+            src={logoImgSrc}
+            alt={logoImgAlt}
+            minH="1.25rem"
+            maxH="4rem"
+          />
+        </Flex>
+        {enableOgpHeader && (
+          <>
+            <Divider orientation="vertical" />
+            <Box ml={3}>
+              <OgpLogoFull fontStyle={'3rem'} height={`3rem`} />
+            </Box>
+          </>
+        )}
       </Flex>
       <FormLogoutButton
         colorScheme={`theme-${colorTheme}`}

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,
+  ogpHeader: 'enable-ogp-header' as const,
 }