feat(v2): add GovtMasthead to PublicElement component, update PP and …

…TOU routes (#3861) * fix: remove strictness from Privacy and Tou page routing * feat: add GovtMasthead component to all public form elements some styling changes were needed to fit the new masthead. but this means all public routes will automatically get the masthead rendered * feat: add AppPublicHeader to TOU and PP pages * feat: add routing to PP and TOU routes in public form footer
opengovsg · May 18, 2022 · 00f36f6 · 00f36f6
1 parent 168f155
commit 00f36f6
Show file tree

Hide file tree

Showing 9 changed files with 60 additions and 23 deletions.
diff --git a/frontend/src/app/AppRouter.tsx b/frontend/src/app/AppRouter.tsx
@@ -53,11 +53,11 @@ export const AppRouter = (): JSX.Element => {
         />
         <Route
           path={PRIVACY_POLICY_ROUTE}
-          element={<PublicElement strict element={<PrivacyPolicyPage />} />}
+          element={<PublicElement element={<PrivacyPolicyPage />} />}
         />
         <Route
           path={TOU_ROUTE}
-          element={<PublicElement strict element={<TermsOfUsePage />} />}
+          element={<PublicElement element={<TermsOfUsePage />} />}
         />
         <Route
           path={PUBLICFORM_ROUTE}

diff --git a/frontend/src/app/PublicElement.tsx b/frontend/src/app/PublicElement.tsx
@@ -1,7 +1,9 @@
 import { Navigate, useLocation } from 'react-router-dom'
+import { Flex } from '@chakra-ui/react'
 
 import { useAuth } from '~contexts/AuthContext'
 import { ROOT_ROUTE } from '~constants/routes'
+import GovtMasthead from '~components/GovtMasthead'
 
 interface PublicElementProps {
   /**
@@ -29,5 +31,10 @@ export const PublicElement = ({
     return <Navigate to={state?.from.pathname ?? ROOT_ROUTE} replace />
   }
 
-  return element
+  return (
+    <Flex flexDir="column" height="100vh" pos="relative">
+      <GovtMasthead />
+      {element}
+    </Flex>
+  )
 }
diff --git a/frontend/src/features/login/LoginPage.tsx b/frontend/src/features/login/LoginPage.tsx
@@ -64,7 +64,7 @@ const BackgroundBox: FC = ({ children }) => (
 // Component that controls the various grid areas according to responsive breakpoints.
 const BaseGridLayout: FC = ({ children }) => (
   <Grid
-    minH={{ base: 'initial', lg: '100vh' }}
+    minH={{ base: 'initial', lg: '100%' }}
     maxW="90rem"
     margin="auto"
     templateAreas={{
@@ -175,7 +175,7 @@ export const LoginPage = (): JSX.Element => {
   }
 
   return (
-    <Flex flexDir="column" minH="100vh">
+    <Flex flexDir="column" h="100%">
       <BackgroundBox>
         <BaseGridLayout>
           <NonMobileSidebarGridArea>

diff --git a/frontend/src/features/public-form/PublicFormPage.tsx b/frontend/src/features/public-form/PublicFormPage.tsx
@@ -1,7 +1,4 @@
 import { useParams } from 'react-router-dom'
-import { Flex } from '@chakra-ui/react'
-
-import GovtMasthead from '~components/GovtMasthead'
 
 import FormEndPage from './components/FormEndPage'
 import FormFields from './components/FormFields'
@@ -15,17 +12,14 @@ export const PublicFormPage = (): JSX.Element => {
   if (!formId) throw new Error('No formId provided')
 
   return (
-    <Flex minH="100vh" flexDir="column" h="100%">
-      <GovtMasthead />
-      <PublicFormProvider formId={formId}>
-        <FormStartPage />
-        <PublicFormWrapper>
-          <FormFields />
-          <FormEndPage />
-          <FormFooter />
-        </PublicFormWrapper>
-      </PublicFormProvider>
-    </Flex>
+    <PublicFormProvider formId={formId}>
+      <FormStartPage />
+      <PublicFormWrapper>
+        <FormFields />
+        <FormEndPage />
+        <FormFooter />
+      </PublicFormWrapper>
+    </PublicFormProvider>
   )
 }
 

diff --git a/frontend/src/features/public-form/components/FormFooter/FormFooter.tsx b/frontend/src/features/public-form/components/FormFooter/FormFooter.tsx
@@ -1,6 +1,8 @@
+import { Link as ReactLink } from 'react-router-dom'
 import { Box, chakra, Divider, Flex, Link, Stack, Text } from '@chakra-ui/react'
 
 import { ReactComponent as BrandLogoSvg } from '~assets/svgs/brand/brand-hort-colour.svg'
+import { PRIVACY_POLICY_ROUTE, TOU_ROUTE } from '~constants/routes'
 
 import { usePublicFormContext } from '~features/public-form/PublicFormContext'
 
@@ -27,8 +29,22 @@ export const FormFooter = (): JSX.Element => {
         <BrandLogo />
       </Flex>
       <Stack direction="row" spacing="1.5rem">
-        <Link textStyle="body-2">Terms of Use</Link>
-        <Link textStyle="body-2">Privacy Policy</Link>
+        <Link
+          as={ReactLink}
+          to={TOU_ROUTE}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Terms of Use
+        </Link>
+        <Link
+          as={ReactLink}
+          to={PRIVACY_POLICY_ROUTE}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Privacy Policy
+        </Link>
       </Stack>
       <Box id={captchaContainerId} />
     </Stack>

diff --git a/frontend/src/pages/PrivacyPolicy/PrivacyPolicyPage.stories.tsx b/frontend/src/pages/PrivacyPolicy/PrivacyPolicyPage.stories.tsx
@@ -1,11 +1,19 @@
 import { Meta, Story } from '@storybook/react'
 
+import { PRIVACY_POLICY_ROUTE } from '~constants/routes'
+import { StoryRouter } from '~utils/storybook'
+
 import { PrivacyPolicyPage } from './PrivacyPolicyPage'
 
 export default {
   title: 'Pages/PrivacyPolicyPage',
   component: PrivacyPolicyPage,
-  decorators: [],
+  decorators: [
+    StoryRouter({
+      initialEntries: [PRIVACY_POLICY_ROUTE],
+      path: PRIVACY_POLICY_ROUTE,
+    }),
+  ],
   parameters: {
     layout: 'fullscreen',
   },

diff --git a/frontend/src/pages/PrivacyPolicy/PrivacyPolicyPage.tsx b/frontend/src/pages/PrivacyPolicy/PrivacyPolicyPage.tsx
@@ -12,6 +12,7 @@ import {
 } from '@chakra-ui/react'
 
 import { AppFooter } from '~/app/AppFooter'
+import { AppPublicHeader } from '~/app/AppPublicHeader'
 
 import Link from '~components/Link'
 
@@ -64,6 +65,7 @@ const SectionParagraph: FC = ({ children }) => (
 export const PrivacyPolicyPage = (): JSX.Element => {
   return (
     <Flex flexDir="column" bg="primary.100">
+      <AppPublicHeader />
       <Container color="secondary.700" maxW="85ch" px="2rem" pb="5rem" flex={1}>
         <Stack spacing="5rem">
           <Box as="section">

diff --git a/frontend/src/pages/TermsOfUse/TermsOfUsePage.stories.tsx b/frontend/src/pages/TermsOfUse/TermsOfUsePage.stories.tsx
@@ -1,11 +1,19 @@
 import { Meta, Story } from '@storybook/react'
 
+import { TOU_ROUTE } from '~constants/routes'
+import { StoryRouter } from '~utils/storybook'
+
 import { TermsOfUsePage } from './TermsOfUsePage'
 
 export default {
   title: 'Pages/TermsOfUsePage',
   component: TermsOfUsePage,
-  decorators: [],
+  decorators: [
+    StoryRouter({
+      initialEntries: [TOU_ROUTE],
+      path: TOU_ROUTE,
+    }),
+  ],
   parameters: {
     layout: 'fullscreen',
   },

diff --git a/frontend/src/pages/TermsOfUse/TermsOfUsePage.tsx b/frontend/src/pages/TermsOfUse/TermsOfUsePage.tsx
@@ -12,6 +12,7 @@ import {
 } from '@chakra-ui/react'
 
 import { AppFooter } from '~/app/AppFooter'
+import { AppPublicHeader } from '~/app/AppPublicHeader'
 
 import { OSS_README } from '~constants/externalLinks'
 import Link from '~components/Link'
@@ -59,6 +60,7 @@ const SectionTitle: FC = ({ children }) => <Text mb="1.5rem">{children}</Text>
 export const TermsOfUsePage = (): JSX.Element => {
   return (
     <Flex flexDir="column" bg="primary.100">
+      <AppPublicHeader />
       <Container color="secondary.700" maxW="85ch" px="2rem" pb="5rem" flex={1}>
         <Stack spacing="5rem">
           <Box as="section">