cds-snc · amazingphilippe · Feb 20, 2020 · Feb 19, 2020 · Feb 19, 2020 · Feb 19, 2020
diff --git a/f2/server.js b/f2/server.js
@@ -33,7 +33,7 @@ const allowedOrigins = [
   'http://antifraudcentre.ca',
   'http://centreantifraude.ca',
 ]
-  
+
 // These can all be done async to avoid holding up the nodejs process?
 async function save(data, res) {
   saveBlob(data)

diff --git a/f2/src/App.js b/f2/src/App.js
@@ -14,7 +14,6 @@ import { StateProvider, initialState, reducer } from './utils/state'
 import { P } from './components/paragraph'
 import { Layout } from './components/layout'
 import { Li } from './components/list-item'
-import { MidFeedbackForm } from './forms/MidFeedbackForm'
 import { A } from './components/link'
 
 const App = () => {
@@ -63,23 +62,16 @@ const App = () => {
             bg="gray.50"
           >
             <Home />
-            <MidFeedbackForm
-              onSubmit={data => {
-                console.log(data)
-              }}
-            />
           </Stack>
 
-          <Layout fluid>
-            <Layout>
-              <P fontSize="sm" my={3}>
-                {`Version: ${
-                  process.env.REACT_APP_VERSION
-                    ? process.env.REACT_APP_VERSION.slice(0, 7)
-                    : '000000'
-                }`}
-              </P>
-            </Layout>
+          <Layout>
+            <P fontSize="sm" my={3}>
+              {`Version: ${
+                process.env.REACT_APP_VERSION
+                  ? process.env.REACT_APP_VERSION.slice(0, 7)
+                  : '000000'
+              }`}
+            </P>
           </Layout>
 
           <Footer>

diff --git a/f2/src/BusinessPage.js b/f2/src/BusinessPage.js
@@ -4,13 +4,13 @@ import { Route } from 'react-router-dom'
 import { Trans } from '@lingui/macro'
 import { H1 } from './components/header'
 import { P } from './components/paragraph'
-import { TrackPageViews } from './TrackPageViews'
 import { BusinessInfoForm } from './forms/BusinessInfoForm'
 import { Layout } from './components/layout'
 import { BackButton } from './components/backbutton'
 import { Stack } from '@chakra-ui/core'
 import { useStateValue } from './utils/state'
 import { nextWhatWasAffectedUrl } from './utils/nextWhatWasAffectedUrl'
+import { Page } from './components/Page'
 
 export const BusinessPage = () => {
   const [state, dispatch] = useStateValue()
@@ -22,32 +22,36 @@ export const BusinessPage = () => {
   return (
     <Route
       render={({ history }) => (
-        <Layout>
-          <TrackPageViews />
-          <Stack spacing={10} shouldWrapChildren>
-            <BackButton route="/whatwasaffected">
-              <Trans id="businessInfoPage.backButton" />
-            </BackButton>       
+        <Page>
+          <Layout columns={{ base: 4 / 4, md: 6 / 8, lg: 7 / 12 }}>
+            <Stack spacing={10} shouldWrapChildren>
+              <BackButton route="/whatwasaffected">
+                <Trans id="businessInfoPage.backButton" />
+              </BackButton>
               <H1>
                 <Trans id="businessPage.title" />
-              </H1> 
-            <Stack spacing={4}>
-              <P>
-                <Trans id="businessPage.intro" />
-              </P>
+              </H1>
+              <Stack spacing={4}>
+                <P>
+                  <Trans id="businessPage.intro" />
+                </P>
+              </Stack>
+              <BusinessInfoForm
+                onSubmit={data => {
+                  dispatch({
+                    type: 'saveFormData',
+                    data: { businessInfo: data },
+                  })
+                  history.push(
+                    doneForms
+                      ? '/confirmation'
+                      : nextWhatWasAffectedUrl(affectedOptions, 'business'),
+                  )
+                }}
+              />
             </Stack>
-            <BusinessInfoForm
-              onSubmit={data => {
-                dispatch({ type: 'saveFormData', data: { businessInfo: data } })
-                history.push(
-                  doneForms
-                    ? '/confirmation'
-                    : nextWhatWasAffectedUrl(affectedOptions, 'business'),
-                )
-              }}
-            />
-          </Stack>
-        </Layout>
+          </Layout>
+        </Page>
       )}
     />
   )

diff --git a/f2/src/CancelPage.js b/f2/src/CancelPage.js
@@ -3,7 +3,6 @@ import { jsx } from '@emotion/core'
 import { Trans } from '@lingui/macro'
 import { H1, H2 } from './components/header'
 import { P } from './components/paragraph'
-import { TrackPageViews } from './TrackPageViews'
 import { Layout } from './components/layout'
 import { Stack, Alert, AlertIcon, Box, Icon } from '@chakra-ui/core'
 import { Route } from 'react-router-dom'
@@ -12,15 +11,15 @@ import { Li } from './components/list-item'
 import { A, Link, ButtonLink } from './components/link'
 import { useLingui } from '@lingui/react'
 import { useStateValue } from './utils/state'
+import { Page } from './components/Page'
 
 export const CancelPage = () => {
   const { i18n } = useLingui()
   const [, dispatch] = useStateValue()
   return (
-    <Stack w="100%">
-      <Layout>
+    <Page>
+      <Layout columns={{ base: 4 / 4, md: 6 / 8, lg: 7 / 12 }}>
         <Stack spacing={10} w="100%">
-          <TrackPageViews />
           <H1 mb={6}>
             <Trans id="cancelPage.title" />
           </H1>
@@ -126,6 +125,6 @@ export const CancelPage = () => {
           </Alert>
         </Layout>
       </Layout>
-    </Stack>
+    </Page>
   )
 }
diff --git a/f2/src/ConfirmCancelPage.js b/f2/src/ConfirmCancelPage.js
@@ -2,60 +2,61 @@
 import { jsx } from '@emotion/core'
 import { Trans } from '@lingui/macro'
 import { H1 } from './components/header'
-import { TrackPageViews } from './TrackPageViews'
 import { Layout } from './components/layout'
 import { Stack, Flex } from '@chakra-ui/core'
 import { Route } from 'react-router-dom'
 import { P } from './components/paragraph'
 import { Button } from './components/button'
 import { useStateValue } from './utils/state'
+import { Page } from './components/Page'
 
 export const ConfirmCancelPage = () => {
   const [, dispatch] = useStateValue()
 
   return (
     <Route
       render={({ history }) => (
-        <Layout>
-          <TrackPageViews />
-          <Stack spacing={10} shouldWrapChildren>
-            <H1>
-              <Trans id="confirmCancelPage.title" />
-            </H1>
-            <Flex direction="row" align="center" wrap="wrap" mb={10} mt={10}>
-              <P w="100%">
-                <Trans id="confirmCancelPage.summary" />
-              </P>
+        <Page>
+          <Layout columns={{ base: 4 / 4, md: 6 / 8, lg: 7 / 12 }}>
+            <Stack spacing={10} shouldWrapChildren>
+              <H1>
+                <Trans id="confirmCancelPage.title" />
+              </H1>
+              <Flex direction="row" align="center" wrap="wrap" mb={10} mt={10}>
+                <P w="100%">
+                  <Trans id="confirmCancelPage.summary" />
+                </P>
 
-              <Button
-                onClick={() => {
-                  dispatch({
-                    type: 'deleteFormData',
-                  })
-                  history.push('/cancelled')
-                }}
-                type="submit"
-                w={{ base: '100%', md: 'auto' }}
-                variantColor="red"
-              >
-                <Trans id="confirmCancelPage.cancelButton" />
-              </Button>
-              <Button
-                onClick={() => history.goBack()}
-                fontSize={{ base: 'lg', md: 'xl' }}
-                color="black"
-                variant="link"
-                variantColor="gray"
-                textAlign="center"
-                w={{ base: '100%', md: 'auto' }}
-                ml={{ base: 0, md: 4 }}
-                mt={{ base: 4, md: 0 }}
-              >
-                <Trans id="confirmCancelPage.goBack" />
-              </Button>
-            </Flex>
-          </Stack>
-        </Layout>
+                <Button
+                  onClick={() => {
+                    dispatch({
+                      type: 'deleteFormData',
+                    })
+                    history.push('/cancelled')
+                  }}
+                  type="submit"
+                  w={{ base: '100%', md: 'auto' }}
+                  variantColor="red"
+                >
+                  <Trans id="confirmCancelPage.cancelButton" />
+                </Button>
+                <Button
+                  onClick={() => history.goBack()}
+                  fontSize={{ base: 'lg', md: 'xl' }}
+                  color="black"
+                  variant="link"
+                  variantColor="gray"
+                  textAlign="center"
+                  w={{ base: '100%', md: 'auto' }}
+                  ml={{ base: 0, md: 4 }}
+                  mt={{ base: 4, md: 0 }}
+                >
+                  <Trans id="confirmCancelPage.goBack" />
+                </Button>
+              </Flex>
+            </Stack>
+          </Layout>
+        </Page>
       )}
     />
   )

diff --git a/f2/src/ConfirmationPage.js b/f2/src/ConfirmationPage.js
@@ -6,13 +6,13 @@ import fetch from 'isomorphic-fetch'
 import { Trans } from '@lingui/macro'
 import { H1 } from './components/header'
 import { P } from './components/paragraph'
-import { TrackPageViews } from './TrackPageViews'
 import { Layout } from './components/layout'
 import { ConfirmationSummary } from './ConfirmationSummary'
 import { ConfirmationForm } from './forms/ConfirmationForm'
 import { BackButton } from './components/backbutton'
 import { Stack } from '@chakra-ui/core'
 import { useStateValue } from './utils/state'
+import { Page } from './components/Page'
 
 async function postData(url = '', data = {}) {
   // Building a multi-part form for file upload!
@@ -112,27 +112,30 @@ export const ConfirmationPage = () => {
   return (
     <Route
       render={({ history }) => (
-        <Layout>
-          <TrackPageViews />
-          <Stack spacing={10} shouldWrapChildren>
-            <BackButton route="/contactinfo">
-              <Trans id="confirmationPage.backButton" />
-            </BackButton>
-            <H1>
-              <Trans id="confirmationPage.title" />
-            </H1>
-            <P>
-              <Trans id="confirmationPage.intro" />
-            </P>
+        <Page>
+          <Layout columns={{ base: 4 / 4, md: 6 / 8, lg: 7 / 12 }} mb={10}>
+            <Stack spacing={10} shouldWrapChildren>
+              <BackButton route="/contactinfo">
+                <Trans id="confirmationPage.backButton" />
+              </BackButton>
+              <H1>
+                <Trans id="confirmationPage.title" />
+              </H1>
+              <P>
+                <Trans id="confirmationPage.intro" />
+              </P>
+            </Stack>
+          </Layout>
+          <Layout columns={{ base: 4 / 4, md: 8 / 8, lg: 9 / 12 }}>
             <ConfirmationSummary />
             <ConfirmationForm
               onSubmit={() => {
                 submitToServer(prepFormData(formData, i18n.locale), dispatch)
                 history.push('/thankYouPage')
               }}
             />
-          </Stack>
-        </Layout>
+          </Layout>
+        </Page>
       )}
     />
   )

diff --git a/f2/src/ContactInfoPage.js b/f2/src/ContactInfoPage.js
@@ -4,40 +4,44 @@ import { Route } from 'react-router-dom'
 import { Trans } from '@lingui/macro'
 import { H1 } from './components/header'
 import { Lead } from './components/paragraph'
-import { TrackPageViews } from './TrackPageViews'
 import { ContactInfoForm } from './forms/ContactInfoForm'
 import { Layout } from './components/layout'
 import { BackButton } from './components/backbutton'
 import { Stack } from '@chakra-ui/core'
 import { useStateValue } from './utils/state'
+import { Page } from './components/Page'
 
 export const ContactInfoPage = () => {
   const [, dispatch] = useStateValue()
 
   return (
     <Route
       render={({ history }) => (
-        <Layout>
-          <TrackPageViews />
-          <Stack spacing={10} shouldWrapChildren>
-            <BackButton route="/location">
-              <Trans id="contactinfoPage.backButton" />
-            </BackButton>
-              <H1 >
+        <Page>
+          <Layout columns={{ base: 4 / 4, md: 6 / 8, lg: 7 / 12 }}>
+            <Stack spacing={10} shouldWrapChildren>
+              <BackButton route="/location">
+                <Trans id="contactinfoPage.backButton" />
+              </BackButton>
+              <H1>
                 <Trans id="contactinfoPage.title" />
               </H1>
-            <Lead>
-              <Trans id="contactinfoPage.intro" />
-            </Lead>
+              <Lead>
+                <Trans id="contactinfoPage.intro" />
+              </Lead>
 
-            <ContactInfoForm
-              onSubmit={data => {
-                dispatch({ type: 'saveFormData', data: { contactInfo: data } })
-                history.push('/confirmation')
-              }}
-            />
-          </Stack>
-        </Layout>
+              <ContactInfoForm
+                onSubmit={data => {
+                  dispatch({
+                    type: 'saveFormData',
+                    data: { contactInfo: data },
+                  })
+                  history.push('/confirmation')
+                }}
+              />
+            </Stack>
+          </Layout>
+        </Page>
       )}
     />
   )