Progressbar (#585)

* all the " cancel" button link to p2 landing page * add progress bar for pages
cds-snc · Aug 20, 2019 · 1ba8859 · 1ba8859
1 parent 8359cbb
commit 1ba8859
Show file tree

Hide file tree

Showing 8 changed files with 47 additions and 5 deletions.
diff --git a/frontend/src/p2/ConfirmationPage.js b/frontend/src/p2/ConfirmationPage.js
@@ -43,7 +43,7 @@ export const ConfirmationPage = () => {
         flexDirection="row"
         marginBottom="20px"
       >
-        <Steps activeStep={4} steps={[{}, {}, {}, {}, {}]} />
+        <Steps activeStep={5} steps={[{}, {}, {}, {}, {}, {}]} />
       </Container>
       <H1>
         <Trans>Review your report</Trans>

diff --git a/frontend/src/p2/ContactInfoPage.js b/frontend/src/p2/ContactInfoPage.js
@@ -23,8 +23,9 @@ export const ContactInfoPage = () => (
       flexDirection="row"
       marginBottom="20px"
     >
-      <Steps activeStep={4} steps={[{}, {}, {}, {}, {}]} />
+      <Steps activeStep={4} steps={[{}, {}, {}, {}, {}, {}]} />
     </Container>
+
     <H1>
       <Trans>Leave your contact information</Trans>
     </H1>

diff --git a/frontend/src/p2/ImpactStatementPage.js b/frontend/src/p2/ImpactStatementPage.js
@@ -6,6 +6,8 @@ import { Trans } from '@lingui/macro'
 import { H1 } from '../components/header'
 import { P } from '../components/paragraph'
 import { Layout } from '../components/layout'
+import { Container } from '../components/container'
+import { Steps } from '../components/stepper'
 import { ImpactStatementInfoForm } from './forms/ImpactStatementInfoForm'
 import { TrackPageViews } from '../TrackPageViews'
 import { getDoneForms } from '../utils/queriesAndMutations'
@@ -17,6 +19,14 @@ const submitAndNavigate = (client, data) => {
 
 export const ImpactStatementPage = () => (
   <Layout>
+    <Container
+      display="flex"
+      width="90%"
+      flexDirection="row"
+      marginBottom="20px"
+    >
+      <Steps activeStep={3} steps={[{}, {}, {}, {}, {}, {}]} />
+    </Container>
     <H1>
       <Trans>Impact caused by the scam</Trans>
     </H1>

diff --git a/frontend/src/p2/ScammerDetailsPage.js b/frontend/src/p2/ScammerDetailsPage.js
@@ -4,6 +4,8 @@ import { navigate } from '@reach/router'
 import { Trans } from '@lingui/macro'
 import { H1 } from '../components/header'
 import { P } from '../components/paragraph'
+import { Container } from '../components/container'
+import { Steps } from '../components/stepper'
 import { TrackPageViews } from '../TrackPageViews'
 import { ScammerDetailsForm } from './forms/ScammerDetailsForm'
 import { Layout } from '../components/layout'
@@ -17,6 +19,14 @@ const submitAndNavigate = (client, data) => {
 export const ScammerDetailsPage = () => {
   return (
     <Layout>
+      <Container
+        display="flex"
+        width="90%"
+        flexDirection="row"
+        marginBottom="20px"
+      >
+        <Steps activeStep={2} steps={[{}, {}, {}, {}, {}, {}]} />
+      </Container>
       <H1>
         <Trans>About the scammer</Trans>
       </H1>

diff --git a/frontend/src/p2/TimeFramePage.js b/frontend/src/p2/TimeFramePage.js
@@ -7,6 +7,8 @@ import { Layout } from '../components/layout'
 import { TimeFrameInfoForm } from './forms/TimeFrameInfoForm'
 import { TrackPageViews } from '../TrackPageViews'
 import { getDoneForms } from '../utils/queriesAndMutations'
+import { Container } from '../components/container'
+import { Steps } from '../components/stepper'
 
 const submitAndNavigate = (client, data) => {
   client.writeData({ data: { timeFrame: JSON.stringify(data) } })
@@ -15,6 +17,14 @@ const submitAndNavigate = (client, data) => {
 
 export const TimeFramePage = () => (
   <Layout>
+    <Container
+      display="flex"
+      width="90%"
+      flexDirection="row"
+      marginBottom="20px"
+    >
+      <Steps activeStep={0} steps={[{}, {}, {}, {}, {}, {}]} />
+    </Container>
     <H1>
       <Trans>When did it happen?</Trans>
     </H1>

diff --git a/frontend/src/p2/WhatHappenedPage.js b/frontend/src/p2/WhatHappenedPage.js
@@ -6,6 +6,8 @@ import { H1 } from '../components/header'
 import { P } from '../components/paragraph'
 import { Ul } from '../components/unordered-list'
 import { Li } from '../components/list-item'
+import { Container } from '../components/container'
+import { Steps } from '../components/stepper'
 import { TrackPageViews } from '../TrackPageViews'
 import { WhatHappenedForm } from './forms/WhatHappenedForm'
 import { Layout } from '../components/layout'
@@ -18,6 +20,15 @@ const submitAndNavigate = (client, data) => {
 
 export const WhatHappenedPage = () => (
   <Layout>
+    <Container
+      display="flex"
+      width="90%"
+      flexDirection="row"
+      marginBottom="20px"
+    >
+      <Steps activeStep={1} steps={[{}, {}, {}, {}, {}, {}]} />
+    </Container>
+
     <H1>
       <Trans>Describe what happened</Trans>
     </H1>

diff --git a/frontend/src/p2/forms/ContactInfoForm.js b/frontend/src/p2/forms/ContactInfoForm.js
@@ -99,7 +99,7 @@ export const ContactInfoForm = ({ onSubmit }) => (
             >
               <Button
                 type="submit"
-                onClick={() => navigate('/p1/confirmation')}
+                onClick={() => navigate('/p2/confirmation')}
               >
                 <Trans>Continue</Trans>
               </Button>
@@ -114,7 +114,7 @@ export const ContactInfoForm = ({ onSubmit }) => (
                 justify-content: space-between;
               `}
             >
-              <Link type="button" color="black" to="/p1/" textAlign="center">
+              <Link type="button" color="black" to="/p2/" textAlign="center">
                 <Trans>Cancel report</Trans>
               </Link>
             </Container>

diff --git a/frontend/src/p2/forms/TimeFrameInfoForm.js b/frontend/src/p2/forms/TimeFrameInfoForm.js
@@ -116,7 +116,7 @@ class TimeFrameInfoFormWrapped extends Component {
                 justify-content: space-between;
               `}
             >
-              <Link type="button" color="black" to="/p1/" textAlign="center">
+              <Link type="button" color="black" to="/p2/" textAlign="center">
                 <Trans>Cancel report</Trans>
               </Link>
             </Container>