Merge pull request #6618 from uktrade/export-wins-thank-you-pages

Refactored thank you page to avoid using flash message
uktrade · Mar 19, 2024 · ee7ce06 · ee7ce06
2 parents 6a61731 + 884f8af
commit ee7ce06
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 40 deletions.
diff --git a/src/client/modules/ExportWins/Review/ThankYou.jsx b/src/client/modules/ExportWins/Review/ThankYou.jsx
@@ -1,10 +1,53 @@
 import React from 'react'
+import { Route } from 'react-router-dom'
+import styled from 'styled-components'
+
+import { GREEN, WHITE } from '../../../utils/colours'
+import { StatusMessage } from '../../../components'
 
 import Layout from './Layout'
-import FlashMessages from '../../../components/LocalHeader/FlashMessages'
+
+const StyledStatusMessage = styled(StatusMessage)({
+  background: WHITE,
+  '& > *:first-child': {
+    marginTop: 0,
+  },
+  '& > *:last-child': {
+    marginBottom: 0,
+  },
+})
 
 export default () => (
-  <Layout title="Export win reviewed" headingContent={<FlashMessages />}>
-    Your feedback will help us to improve our support services.
-  </Layout>
+  <Route>
+    {({ location: { search } }) => {
+      const agree = search.includes('agree=yes')
+      return (
+        <Layout
+          title={
+            agree
+              ? 'Export win reviewed'
+              : 'Export win reviewed and changes are needed'
+          }
+          headingContent={
+            agree ? (
+              <StyledStatusMessage colour={GREEN}>
+                Thank you for taking time to review this export win.
+              </StyledStatusMessage>
+            ) : (
+              <StyledStatusMessage>
+                <p>Thank you for reviewing this export win.</p>
+                <p>
+                  As you have asked for some changes to be made, we will review
+                  your comments and may need to contact you if we need more
+                  information.
+                </p>
+              </StyledStatusMessage>
+            )
+          }
+        >
+          Your feedback will help us to improve our support services.
+        </Layout>
+      )
+    }}
+  </Route>
 )
diff --git a/src/client/modules/ExportWins/Review/index.jsx b/src/client/modules/ExportWins/Review/index.jsx
@@ -312,29 +312,10 @@ const Review = ({ token }) => (
           analyticsFormName={FORM_ID}
           submissionTaskName="TASK_PATCH_EXPORT_WIN_REVIEW"
           redirectMode="soft"
-          redirectTo={() => '/exportwins/review-win/thankyou'}
-          transformPayload={transformPayload(token)}
-          flashMessage={(_, { agree_with_win }) =>
-            agree_with_win === 'yes'
-              ? // TODO: Move to constants
-                [
-                  'Success',
-                  'Thank you for taking time to review this export win',
-                  'success',
-                ]
-              : [
-                  'Important',
-                  `
-                  <p>Thank you for reviewing this export win</p>
-                  <p>
-                    As you have asked for some changes to be made,
-                    we will review your comments and may need to contact you
-                    if we need more information.
-                  </p>
-                  `,
-                  'info',
-                ]
+          redirectTo={(_, { agree_with_win }) =>
+            `/exportwins/review-win/thankyou?agree=${agree_with_win}`
           }
+          transformPayload={transformPayload(token)}
         >
           {(formData) => (
             <>

diff --git a/test/component/cypress/specs/ExportWins/Review.cy.jsx b/test/component/cypress/specs/ExportWins/Review.cy.jsx
@@ -22,9 +22,9 @@ const assertHeader = () => {
   cy.get('header h1').should('have.text', HEADING)
 }
 
-const assertReviewed = () => {
+const assertReviewed = ({ heading }) => {
   cy.contains(DBT_HEADING)
-  cy.get('header h1').should('have.text', 'Export win reviewed')
+  cy.get('header h1').should('have.text', heading)
   cy.get('main').should(
     'have.text',
     'Your feedback will help us to improve our support services.'
@@ -382,15 +382,12 @@ describe('ExportWins/Review', () => {
 
       cy.contains('button', 'Confirm and send').click()
 
-      assertReviewed()
+      assertReviewed({ heading: 'Export win reviewed' })
 
-      cy.get('[role="alert"').within(() => {
-        cy.contains('h2', /^Success$/)
-        cy.contains(
-          'p',
-          /^Thank you for taking time to review this export win$/
-        )
-      })
+      cy.get('[role="alert"').should(
+        'have.text',
+        'Thank you for taking time to review this export win.'
+      )
     })
 
     it('User disagrees with win', () => {
@@ -458,14 +455,13 @@ describe('ExportWins/Review', () => {
 
       cy.contains('button', 'Confirm and send').click()
 
-      assertReviewed()
+      assertReviewed({ heading: 'Export win reviewed and changes are needed' })
 
       cy.get('[role="alert"').within(() => {
-        cy.contains('h2', /^Important$/)
-        cy.contains('p', /^\s*Thank you for reviewing this export win\s*$/)
+        cy.contains('p', /^\s*Thank you for reviewing this export win.\s*$/)
         cy.contains(
           'p',
-          /^\s*As you have asked for some changes to be made, we will review your comments and may need to contact you if we need more information.\s*$/
+          /^\s*As you have asked for some changes to be made, we will review your comments and may need to contact you if we need more information.*$/
         )
       })
     })