diff --git a/frontend/src/assets/svgrs/brand/OgpAwarenessBadge.tsx b/frontend/src/assets/svgrs/brand/OgpAwarenessBadge.tsx new file mode 100644 index 0000000000..88488f62bc --- /dev/null +++ b/frontend/src/assets/svgrs/brand/OgpAwarenessBadge.tsx @@ -0,0 +1,59 @@ +import { SVGProps } from 'react' + +export const OgpAwarenessBadge = (props: SVGProps) => { + return ( + + + + + + + + + + + + ) +} diff --git a/frontend/src/assets/svgrs/brand/OgpAwarenessBanner.tsx b/frontend/src/assets/svgrs/brand/OgpAwarenessBanner.tsx new file mode 100644 index 0000000000..425f877be0 --- /dev/null +++ b/frontend/src/assets/svgrs/brand/OgpAwarenessBanner.tsx @@ -0,0 +1,112 @@ +import { SVGProps } from 'react' + +export const OgpAwarenessBanner = (props: SVGProps) => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +} diff --git a/frontend/src/components/FormEndPage/EndPageBlock.tsx b/frontend/src/components/FormEndPage/EndPageBlock.tsx index 7ecf30f1c4..111fe1514a 100644 --- a/frontend/src/components/FormEndPage/EndPageBlock.tsx +++ b/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 + case 'badge': + return + default: + return undefined + } + })() + return ( <> + {ogpAwarenessComponent && {ogpAwarenessComponent}} {submittedAriaText} diff --git a/frontend/src/features/public-form/components/StatusTrackerPage/StatusTrackerPage.tsx b/frontend/src/features/public-form/components/StatusTrackerPage/StatusTrackerPage.tsx index 1ded639bbd..eda1a1ece8 100644 --- a/frontend/src/features/public-form/components/StatusTrackerPage/StatusTrackerPage.tsx +++ b/frontend/src/features/public-form/components/StatusTrackerPage/StatusTrackerPage.tsx @@ -1,5 +1,6 @@ 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' @@ -7,6 +8,8 @@ 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 + case 'badge': + return + default: + return undefined + } + })() + if (isLoading) return if (error || !data || !data.submittedSteps || !data.workflow) @@ -154,6 +169,9 @@ export const StatusTrackerPage = (): JSX.Element => { + {ogpAwarenessComponent && ( + {ogpAwarenessComponent} + )} Response ID: {data.responseId} diff --git a/shared/constants/feature-flags.ts b/shared/constants/feature-flags.ts index 732ab38d10..d5a1164497 100644 --- a/shared/constants/feature-flags.ts +++ b/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, }