Implement EW migration alert banner messages

src/client/modules/Companies/CompanyExports/ExportsIndex.jsx

@@ -21,6 +21,7 @@ import {
   transformExportCountries,
 } from './transformers'
 import DefaultLayoutBase from '../../../components/Layout/DefaultLayoutBase'
+import { HistoricWinsAlertBanner } from '../../ExportWins/Status/ExportWinsTabNav'
 
 const StyledSummaryTable = styled(SummaryTable)`
   margin-top: 0;
@@ -41,6 +42,7 @@ const ExportsIndex = () => {
             company={company}
             breadcrumbs={[{ text: 'Exports' }]}
             pageTitle="Export"
+            flashMessages={[[HistoricWinsAlertBanner]]}
           >
             <SummaryTable
               caption="Exports"

src/client/modules/ExportWins/Form/ExportWinForm.jsx

@@ -4,7 +4,6 @@ import { Link } from 'govuk-react'
 import { connect } from 'react-redux'
 import styled from 'styled-components'
 import pluralize from 'pluralize'
-import { FONT_SIZE } from '@govuk-react/constants'
 
 import FlashMessages from '../../../components/LocalHeader/FlashMessages'
 import { steps, EMAIL, STEP_TO_EXCLUDED_FIELDS_MAP } from './constants'
@@ -22,22 +21,11 @@ import { ExportWinSuccess } from './Success'
 import State from '../../../components/State'
 import urls from '../../../../lib/urls'
 import SummaryStep from './SummaryStep'
-import {
-  Form,
-  FormLayout,
-  DefaultLayout,
-  StatusMessage,
-} from '../../../components'
+import { Form, FormLayout, DefaultLayout } from '../../../components'
+import { HistoricWinsAlertBanner } from '../Status/ExportWinsTabNav'
 
 const FORM_ID = 'export-win-form'
 
-const StyledStatusMessage = styled(StatusMessage)({
-  fontSize: FONT_SIZE.SIZE_20,
-  fontWeight: 700,
-  marginTop: 25,
-  marginBottom: 5,
-})
-
 const StyledParagraph = styled('p')({
   fontWeight: 'bold',
 })
@@ -93,6 +81,28 @@ const ExportWinForm = ({
               heading={heading}
               subheading={subheading}
               breadcrumbs={breadcrumbs}
+              flashMessages={[
+                [
+                  isEditing ? (
+                    <>
+                      <StyledParagraph>
+                        {HistoricWinsAlertBanner}
+                      </StyledParagraph>
+                      {currentStepName === steps.SUMMARY ? (
+                        <>
+                          <StyledParagraph>
+                            To edit an export win: edit each section that needs
+                            changing then return to the summary page. When you
+                            are happy with all the changes save the page.
+                          </StyledParagraph>
+                        </>
+                      ) : excludedStepFields ? (
+                        <ContactLink sections={excludedStepFields} />
+                      ) : null}
+                    </>
+                  ) : null,
+                ],
+              ]}
               localHeaderChildren={
                 isEditing ? (
                   currentStepName === steps.SUMMARY ? (
@@ -104,24 +114,12 @@ const ExportWinForm = ({
                           }}
                         />
                       )}
-                      <StyledStatusMessage>
-                        <StyledParagraph>To edit an export win</StyledParagraph>
-                        <StyledParagraph>
-                          Edit each section that needs changing then return to
-                          the summary page. When you are happy with all the
-                          changes save the page.
-                        </StyledParagraph>
-                      </StyledStatusMessage>
                       {winStatus === WIN_STATUS.PENDING && (
                         <ResentExportWinContainer>
                           <ResendExportWin id={exportWinId} />
                         </ResentExportWinContainer>
                       )}
                     </>
-                  ) : excludedStepFields ? (
-                    <StyledStatusMessage>
-                      <ContactLink sections={excludedStepFields} />
-                    </StyledStatusMessage>
                   ) : null
                 ) : null
               }

src/client/modules/ExportWins/Form/constants.js

@@ -53,13 +53,13 @@ export const bothGoodsAndServices = {
 }
 
 export const STEP_TO_EXCLUDED_FIELDS_MAP = {
-  [steps.OFFICER_DETAILS]: ['Lead officer name'],
-  [steps.CUSTOMER_DETAILS]: ['Export experience'],
+  [steps.OFFICER_DETAILS]: ['lead officer name.'],
+  [steps.CUSTOMER_DETAILS]: ['export experience.'],
   [steps.WIN_DETAILS]: [
-    'Summary of the support given',
-    'Destination country',
-    'Date won',
-    'Type of win and Value',
+    'summary of the support given',
+    'destination country',
+    'date won',
+    'type of win and value.',
   ],
 }
 

src/client/modules/ExportWins/Status/ExportWinsTabNav.jsx

@@ -1,16 +1,34 @@
 import React from 'react'
 import { useLocation } from 'react-router-dom'
 import { capitalize } from 'lodash'
+import { Link } from 'govuk-react'
 
 import { DefaultLayout } from '../../../components'
 import TabNav from '../../../components/TabNav'
 import WinsRejectedList from './WinsRejectedList'
 import WinsPendingList from './WinsPendingList'
 import WinsConfirmedList from './WinsConfirmedList'
 import urls from '../../../../lib/urls'
+import { HISTORIC_WINS_ALERT_MESSAGE } from './constants'
 
 const LAST_WORD = /([^\/]+)$/
 
+export const HistoricWinsAlertBanner = (
+  <>
+    {[HISTORIC_WINS_ALERT_MESSAGE.ELEMENT].concat(' ')}
+    {[
+      <Link
+        href={HISTORIC_WINS_ALERT_MESSAGE.URI_LINK}
+        target="_blank"
+        rel="noopener noreferrer"
+        aria-label="Find out more about historic wins moved to Data Hub"
+      >
+        {HISTORIC_WINS_ALERT_MESSAGE.URI_ELEMENT}
+      </Link>,
+    ].concat('.')}
+  </>
+)
+
 const ExportWinsTabNav = () => {
   const location = useLocation()
   const match = LAST_WORD.exec(location.pathname)
@@ -28,6 +46,7 @@ const ExportWinsTabNav = () => {
         },
         { text: capitalize(title) },
       ]}
+      flashMessages={[[HistoricWinsAlertBanner]]}
     >
       <TabNav
         id="exportwins-tab-nav"

src/client/modules/ExportWins/Status/constants.js

@@ -22,3 +22,10 @@ export const ADVISER_ROLES = {
   TEAM_MEMBER: 'team member',
   CONTRIBUTING_OFFICER: 'contributing officer',
 }
+
+export const HISTORIC_WINS_ALERT_MESSAGE = {
+  ELEMENT: 'Historic export wins have now moved to Data Hub,',
+  URI_ELEMENT: 'see the export wins announcement',
+  URI_LINK:
+    'https://data-services-help.trade.gov.uk/data-hub/updates/announcements/historic-export-wins-are-now-on-data-hub/',
+}

test/functional/cypress/specs/companies/export/index-spec.js

@@ -1,6 +1,9 @@
 const { company } = require('../../../fixtures')
 const { assertBreadcrumbs } = require('../../../support/assertions')
 const urls = require('../../../../../../src/lib/urls')
+const {
+  assertHistoricExportWinsMessage,
+} = require('../../export-win/edit-export-win-pending-spec.js')
 
 describe('Company Export tab', () => {
   function assertTable({ rows, caption, action }) {
@@ -67,6 +70,10 @@ describe('Company Export tab', () => {
         })
       })
 
+      it('should render historic export win banner message', () => {
+        assertHistoricExportWinsMessage()
+      })
+
       it('should render the "Exports" table', () => {
         assertExportsTable(company.dnbCorp.id, [
           { label: 'Export win category', value: 'None' },

test/functional/cypress/specs/export-win/edit-export-win-pending-spec.js.js

@@ -1,9 +1,48 @@
 import { exportWinsFaker } from '../../fakers/export-wins'
 import urls from '../../../../../src/lib/urls'
 import { company, formFields } from './constants'
+import { HISTORIC_WINS_ALERT_MESSAGE } from '../../../../../src/client/modules/ExportWins/Status/constants'
 
 const exportWin = exportWinsFaker()
 
+export const assertHistoricExportWinsMessage = () => {
+  cy.get('[data-test="status-message"]')
+    .should('contain', HISTORIC_WINS_ALERT_MESSAGE.ELEMENT)
+    .should('contain.text', HISTORIC_WINS_ALERT_MESSAGE.URI_ELEMENT)
+    .find('a')
+    .should('have.attr', 'href', HISTORIC_WINS_ALERT_MESSAGE.URI_LINK)
+}
+
+const assertCustomerDetailsMessage = () => {
+  cy.get('[data-test="status-message"]').should(
+    'contain.text',
+    'Contact [email protected] if you need to update the section: export experience.'
+  )
+}
+
+const assertLeadOfficerDetailsMessage = () => {
+  cy.get('[data-test="status-message"]').should(
+    'contain.text',
+    'Contact [email protected] if you need to update the section: lead officer name.'
+  )
+}
+
+const assertWinDetailsMessage = () => {
+  cy.get('[data-test="status-message"]').should(
+    'contain.text',
+    'Contact [email protected] if you need to update the sections: ' +
+      'summary of the support given, destination country, date won, type of win and value.'
+  )
+}
+
+const assertSummaryMessage = () => {
+  cy.get('[data-test="status-message"]').should(
+    'contain.text',
+    'To edit an export win: edit each section that needs changing then return to the summary page. ' +
+      'When you are happy with all the changes save the page.'
+  )
+}
+
 describe('Editing a pending export win', () => {
   beforeEach(() => {
     cy.intercept('GET', '/api-proxy/v4/export-win/*', exportWin).as(
@@ -41,10 +80,8 @@ describe('Editing a pending export win', () => {
         urls.companies.exportWins.editOfficerDetails(company.id, exportWin.id)
       )
       cy.wait(['@apiGetExportWin', '@apiTeamType', '@apiHqTeam'])
-      cy.get('[data-test="status-message"]').should(
-        'have.text',
-        'Contact [email protected] if you need to update the section: Lead officer name'
-      )
+      assertHistoricExportWinsMessage()
+      assertLeadOfficerDetailsMessage()
     })
   })
 
@@ -54,7 +91,7 @@ describe('Editing a pending export win', () => {
         urls.companies.exportWins.editCreditForThisWin(company.id, exportWin.id)
       )
       cy.wait(['@apiGetExportWin', '@apiTeamType', '@apiHqTeam'])
-      cy.get('[data-test="status-message"]').should('not.exist')
+      assertHistoricExportWinsMessage()
     })
   })
 
@@ -67,12 +104,8 @@ describe('Editing a pending export win', () => {
     })
 
     it('should render an edit status message', () => {
-      cy.get('[data-test="status-message"]')
-        .should('exist')
-        .should(
-          'have.text',
-          'Contact [email protected] if you need to update the section: Export experience'
-        )
+      assertHistoricExportWinsMessage()
+      assertCustomerDetailsMessage()
     })
 
     it('should not render Export experience', () => {
@@ -91,13 +124,8 @@ describe('Editing a pending export win', () => {
     })
 
     it('should render an edit status message', () => {
-      cy.get('[data-test="status-message"]')
-        .should('exist')
-        .should(
-          'have.text',
-          'Contact [email protected] if you need to update the sections: ' +
-            'Summary of the support given, Destination country, Date won, Type of win and Value'
-        )
+      assertHistoricExportWinsMessage()
+      assertWinDetailsMessage()
     })
 
     it('should not render a hint', () => {
@@ -137,20 +165,17 @@ describe('Editing a pending export win', () => {
         urls.companies.exportWins.editSupportProvided(company.id, exportWin.id)
       )
       cy.wait(['@apiGetExportWin'])
-      cy.get('[data-test="status-message"]').should('not.exist')
+      cy.get('[data-test="status-message"]')
+      assertHistoricExportWinsMessage()
     })
   })
 
   context('Summary', () => {
     it('should render an edit status message', () => {
       cy.visit(urls.companies.exportWins.editSummary(company.id, exportWin.id))
       cy.wait(['@apiGetExportWin'])
-      cy.get('[data-test="status-message"]').should(
-        'contain',
-        'To edit an export win' +
-          'Edit each section that needs changing then return to the summary page. ' +
-          'When you are happy with all the changes save the page.'
-      )
+      assertHistoricExportWinsMessage()
+      assertSummaryMessage()
     })
 
     it('should render a lead officer name contact link', () => {
@@ -249,7 +274,7 @@ describe('Editing a pending export win', () => {
       cy.get('[data-test="resend-export-win"]').click()
       cy.wait('@apiResendExportWin')
       cy.get('[data-test="flash"]').should(
-        'have.text',
+        'contain.text',
         `The export win ${exportWin.name_of_export} to ${exportWin.country.name} has been sent to ${exportWin.company_contacts[0].email} for review and confirmation.`
       )
     })