From c3bbe2f7d0c916f9819b0c5b335b18cc9135dd29 Mon Sep 17 00:00:00 2001
From: Peter Hudec <peterhudec@peterhudec.com>
Date: Thu, 18 Jul 2024 10:56:57 +0100
Subject: [PATCH 01/11] Wrap dataLayer.push behind a gtag function

---
 src/apps/__export-wins-review/view.njk          |  1 +
 .../_includes/google-tag-manager-snippet.njk    | 17 +++++++++++++++--
 2 files changed, 16 insertions(+), 2 deletions(-)
diff --git a/src/apps/__export-wins-review/view.njk b/src/apps/__export-wins-review/view.njk
index 1375fe88064..33d71549d04 100644
--- a/src/apps/__export-wins-review/view.njk
+++ b/src/apps/__export-wins-review/view.njk
@@ -14,6 +14,7 @@
         padding: 0;
       }
     </style>
+    {% include "_includes/google-tag-manager-snippet.njk" %}
   </head>
   <body>
     {% include "_includes/csp-nonce.njk" %}
diff --git a/src/templates/_includes/google-tag-manager-snippet.njk b/src/templates/_includes/google-tag-manager-snippet.njk
index f2854dfcb2c..57f24043e2c 100644
--- a/src/templates/_includes/google-tag-manager-snippet.njk
+++ b/src/templates/_includes/google-tag-manager-snippet.njk
@@ -1,16 +1,29 @@
 {% if GOOGLE_TAG_MANAGER_KEY %}
 <script nonce='{{ cspNonce }}'>
+  {# window['ga-disable-G-2WBFY5B0YK'] = true #}
+
   window.dataLayer = window.dataLayer || []
-  window.dataLayer.push({
+  window.gtag = function() { dataLayer.push(arguments); }
+
+  gtag({
     userId: '{{user.id}}',
     userUserId: '{{user.sso_user_id}}',
   })
+
   if ('{{userFeatureGTMEvent}}') {
-    window.dataLayer.push({
+    gtag({
       name: '{{userFeatureGTMEvent.name}}',
       event: '{{userFeatureGTMEvent.event}}',
     })
   }
+
+  window.gtag('consent', 'default', {
+    ad_storage: 'denied',
+    analytics_storage: 'denied',
+    ad_user_data: 'denied',
+    ad_personalization: 'denied',
+    wait_for_update: 500
+  });
 </script>
 <!-- Google Tag Manager -->
 <script nonce='{{ cspNonce }}'>

From 5fa525f179e3d66117789df7ef06414187ac229c Mon Sep 17 00:00:00 2001
From: Peter Hudec <peterhudec@peterhudec.com>
Date: Wed, 17 Jul 2024 11:38:33 +0100
Subject: [PATCH 02/11] Added the Task/RecentResult component

---
 src/client/components/Task/RecentResult.js    |  28 +++++
 src/client/reducers.js                        |   3 +
 .../cypress/specs/Task/RecentResult.cy.jsx    | 108 ++++++++++++++++++
 3 files changed, 139 insertions(+)
 create mode 100644 src/client/components/Task/RecentResult.js
 create mode 100644 test/component/cypress/specs/Task/RecentResult.cy.jsx

diff --git a/src/client/components/Task/RecentResult.js b/src/client/components/Task/RecentResult.js
new file mode 100644
index 00000000000..20ee811ecb7
--- /dev/null
+++ b/src/client/components/Task/RecentResult.js
@@ -0,0 +1,28 @@
+import { TASK__START } from '../../actions'
+import multiinstance from '../../utils/multiinstance'
+
+export default multiinstance({
+  name: 'Task/RecentResult',
+  actionPattern: /.*/,
+  idProp: 'name',
+  reducer: (state, { type, id, onSuccessDispatch, result }) => {
+    switch (type) {
+      case TASK__START:
+        return {
+          ...state,
+          [id]: {
+            ...state?.[id],
+            successActionType: onSuccessDispatch,
+          },
+        }
+      case state?.[id]?.successActionType:
+        return {
+          ...state,
+          [id]: { result },
+        }
+      default:
+        return state
+    }
+  },
+  component: ({ children, id, ...props }) => children(props[id]?.result),
+})
diff --git a/src/client/reducers.js b/src/client/reducers.js
index 3b85e2eb1fa..b5e53b489d0 100644
--- a/src/client/reducers.js
+++ b/src/client/reducers.js
@@ -190,6 +190,8 @@ import companyActivityReducerNoAs from './modules/Companies/CompanyActivity/redu
 
 import { ResendExportWin } from './modules/ExportWins/Form/ResendExportWin'
 
+import RecentTaskResult from './components/Task/RecentResult'
+
 export const reducers = {
   tasks,
   [FLASH_MESSAGE_ID]: flashMessageReducer,
@@ -211,6 +213,7 @@ export const reducers = {
   ...Form.reducerSpread,
   ...FieldAddAnother.reducerSpread,
   ...ResendExportWin.reducerSpread,
+  ...RecentTaskResult.reducerSpread,
   [DNB_CHECK_ID]: dnbCheckReducer,
   [INVESTMENT_OPPORTUNITIES_LIST_ID]: investmentOpportunitiesListReducer,
   [INVESTMENT_OPPORTUNITIES_DETAILS_ID]: investmentOpportunitiesDetailsReducer,
diff --git a/test/component/cypress/specs/Task/RecentResult.cy.jsx b/test/component/cypress/specs/Task/RecentResult.cy.jsx
new file mode 100644
index 00000000000..6acbcd4fb6f
--- /dev/null
+++ b/test/component/cypress/specs/Task/RecentResult.cy.jsx
@@ -0,0 +1,108 @@
+/* eslint-disable prettier/prettier */
+import React from 'react'
+
+import RecentResult from "../../../../../src/client/components/Task/RecentResult"
+import Task from "../../../../../src/client/components/Task"
+
+describe('Task/RecentResult', () => {
+  it('Should provide most recent result of a given task', () => {
+    const TASK_CALLS = [
+      {
+        name: 'double',
+        id: 'aaa',
+        payload: 1,
+        expectedResult: 2,
+      },
+      {
+        name: 'double',
+        id: 'bbb',
+        payload: 3,
+        expectedResult: 6,
+      },
+      {
+        name: 'plusMillion',
+        id: 'aaa',
+        payload: 1,
+        expectedResult: 1_000_001,
+      },
+      {
+        name: 'double',
+        id: 'aaa',
+        payload: 10,
+        expectedResult: 20,
+      },
+      {
+        name: 'plusMillion',
+        id: 'bbb',
+        payload: 111,
+        expectedResult: 1_000_111,
+      },
+      {
+        name: 'double',
+        id: 'bbb',
+        payload: 444,
+        expectedResult: 888,
+      },
+      {
+        name: 'plusMillion',
+        id: 'aaa',
+        payload: 222,
+        expectedResult: 1_000_222,
+      },
+    ]
+
+    const TASKS = TASK_CALLS.reduce((a, {name, id}) => ({
+      ...a,
+      [`${name}-${id}`]: {name, id},
+    }), {})
+
+    cy.mountWithProvider(
+      <>
+        <Task>
+          {t =>
+            // A utility to start tasks
+            <form onSubmit={(e) => {
+              e.preventDefault()
+              t(e.target.taskName.value, e.target.taskId.value).start({
+                payload: parseInt(e.target.payload.value, 10),
+                onSuccessDispatch: `ACTION_NAME-${Math.random()}`,
+              })
+            }}>
+              <input name="taskName" placeholder="name"/>
+              <input name="taskId" placeholder="id"/>
+              <input name="payload" placeholder="payload"/>
+              <button>
+                Start task
+              </button>
+            </form>
+          }
+        </Task>
+        {/* Render most recent result of each task */}
+        <ul>
+          {Object.entries(TASKS).map(([key, {name, id}]) =>
+            <li key={key}>
+              {key}:{' '}
+              <RecentResult name={name} id={id}>
+                {result => <span id={`result-${key}`}>{result || 'nothing'}</span>}
+              </RecentResult>
+            </li>
+          )}
+        </ul>
+      </>,
+      {
+        tasks: {
+          double: (payload) => payload * 2,
+          plusMillion: (payload) => payload + 1_000_000,
+        },
+      }
+    )
+
+    TASK_CALLS.forEach(({name, id, payload, expectedResult}) => {
+      cy.get('input[name="taskName"]').clear().type(name)
+      cy.get('input[name="taskId"]').clear().type(id)
+      cy.get('input[name="payload"]').clear().type(payload)
+      cy.get('button').click()
+      cy.contains(`${name}-${id}: ${expectedResult}`)
+    })
+  })
+})

From 801aad11b22a0614b48bf0e6aeeec62bccc3bd6d Mon Sep 17 00:00:00 2001
From: Peter Hudec <peterhudec@peterhudec.com>
Date: Thu, 18 Jul 2024 12:25:26 +0100
Subject: [PATCH 03/11] Added cookie page to export wins review

---
 package-lock.json                             |  1 +
 package.json                                  |  1 +
 src/client/export-win-review.jsx              | 33 ++++++-
 .../ExportWins/Review/CookiePage/index.jsx    | 96 +++++++++++++++++++
 .../ExportWins/Review/CookiePage/saga.js      | 26 +++++
 .../modules/ExportWins/Review/Layout.jsx      | 71 +++++++++++++-
 .../modules/ExportWins/Review/ThankYou.jsx    |  2 +-
 .../modules/ExportWins/Review/index.jsx       | 13 ++-
 src/client/root-saga.js                       |  2 +
 .../_includes/google-tag-manager-snippet.njk  |  2 -
 10 files changed, 234 insertions(+), 13 deletions(-)
 create mode 100644 src/client/modules/ExportWins/Review/CookiePage/index.jsx
 create mode 100644 src/client/modules/ExportWins/Review/CookiePage/saga.js

diff --git a/package-lock.json b/package-lock.json
index c8bec853d22..f2eb5ed13f4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -136,6 +136,7 @@
         "http-server": "^14.1.1",
         "image-minimizer-webpack-plugin": "^4.1.0",
         "js-beautify": "^1.14.11",
+        "js-cookie": "^3.0.5",
         "jsdom": "^20.0.3",
         "jsdom-global": "^3.0.2",
         "json-schema-faker": "^0.5.5",
diff --git a/package.json b/package.json
index 500f3628047..177644b2189 100644
--- a/package.json
+++ b/package.json
@@ -192,6 +192,7 @@
     "http-server": "^14.1.1",
     "image-minimizer-webpack-plugin": "^4.1.0",
     "js-beautify": "^1.14.11",
+    "js-cookie": "^3.0.5",
     "jsdom": "^20.0.3",
     "jsdom-global": "^3.0.2",
     "json-schema-faker": "^0.5.5",
diff --git a/src/client/export-win-review.jsx b/src/client/export-win-review.jsx
index e9ed9d19003..6e6059cc962 100644
--- a/src/client/export-win-review.jsx
+++ b/src/client/export-win-review.jsx
@@ -1,6 +1,8 @@
 import './webpack-csp-nonce'
 import React from 'react'
 import { createRoot } from 'react-dom/client'
+import { Routes, Route } from 'react-router-dom'
+import Cookies from 'js-cookie'
 
 import { createProvider } from './createProvider'
 import WithoutOurSupport from './components/Resource/WithoutOurSupport'
@@ -12,6 +14,31 @@ import MarketingSource from './components/Resource/MarketingSource'
 import Review from './modules/ExportWins/Review'
 import { patchExportWinReview } from './modules/ExportWins/tasks'
 
+const COOKIE_CONSENT_COOKIE_NAME = 'cookie-consent'
+
+const loadCookiePreference = () =>
+  localStorage.getItem(COOKIE_CONSENT_COOKIE_NAME)
+
+const saveCookiePreference = (payload) => {
+  if (!['granted', 'denied'].includes(payload)) {
+    throw Error('Payload must be "granted" or "denied"')
+  }
+
+  localStorage.setItem(COOKIE_CONSENT_COOKIE_NAME, payload)
+
+  window.gtag('consent', 'update', {
+    analytics_storage: payload,
+  })
+
+  if (payload === 'denied') {
+    for (const cookieName in Cookies.get()) {
+      Cookies.remove(cookieName)
+    }
+  }
+
+  return payload
+}
+
 const Provider = createProvider({
   ...ExportWinReview.tasks,
   ...WithoutOurSupport.tasks,
@@ -19,12 +46,16 @@ const Provider = createProvider({
   ...Experience.tasks,
   ...MarketingSource.tasks,
   TASK_PATCH_EXPORT_WIN_REVIEW: patchExportWinReview,
+  'load cookie preference': loadCookiePreference,
+  'save cookie preference': saveCookiePreference,
 })
 
 window.addEventListener('DOMContentLoaded', () => {
   createRoot(document.getElementById('react-app')).render(
     <Provider>
-      <Review />
+      <Routes>
+        <Route path="/exportwins/review*" element={<Review />} />
+      </Routes>
     </Provider>
   )
 })
diff --git a/src/client/modules/ExportWins/Review/CookiePage/index.jsx b/src/client/modules/ExportWins/Review/CookiePage/index.jsx
new file mode 100644
index 00000000000..1da8656c377
--- /dev/null
+++ b/src/client/modules/ExportWins/Review/CookiePage/index.jsx
@@ -0,0 +1,96 @@
+import React from 'react'
+import { put, take } from 'redux-saga/effects'
+
+import { eventChannel } from 'redux-saga'
+
+import { H2 } from 'govuk-react'
+
+import { GREEN } from '../../../../utils/colours'
+import { FieldRadios, Form } from '../../../../components'
+import RecentTaskResult from '../../../../components/Task/RecentResult'
+
+import Layout from '../Layout'
+import { StyledStatusMessage } from '../ThankYou'
+
+const storageChannel = eventChannel((emit) => {
+  window.addEventListener('storage', emit)
+  return () => window.removeEventListener(emit)
+})
+
+export function* cookiePreferenceChangeSaga() {
+  while (true) {
+    const { key, newValue } = yield take(storageChannel)
+    if (key === 'cookie-consent') {
+      yield put({
+        type: 'FORM__RESOLVED',
+        name: 'save cookie preference',
+        id: 'cookieConsent',
+        result: newValue,
+      })
+    }
+  }
+}
+
+const CookiePage = () => (
+  <Layout
+    title="Export Wins cookie policy"
+    headingContent={
+      <RecentTaskResult name="save cookie preference" id="cookieConsent">
+        {(consent) =>
+          consent && (
+            <StyledStatusMessage colour={GREEN}>
+              Yo've {consent === 'granted' ? 'accepted' : 'rejected'} additional
+              cookies. You can change your cookie settings at any time.
+            </StyledStatusMessage>
+          )
+        }
+      </RecentTaskResult>
+    }
+  >
+    <H2>How cookies are used in Export Wins</H2>
+    <p>Export wins puts small files (known as 'cookies') onto your computer.</p>
+    <p>
+      Cookies are used to measure how to use the website so it can be updated
+      and improved based on your needs.
+    </p>
+    <p>
+      Export Wins cookies never contain personally identifiable information.
+    </p>
+    <H2>Analytics cookies</H2>
+    <p>
+      We use Google Analytics software to collect information about how you use
+      Export Wins. We do this to help make sure the site is meeting the needs of
+      its users and to help us make improvements. Google Analytics stores
+      information about:
+    </p>
+    <ul>
+      <li>the pages you visit</li>
+      <li>how long you spend on each page</li>
+      <li>how you got to the site</li>
+      <li>what you click on while you're visiting the site</li>
+    </ul>
+    <p>We don't allow Google to use or share our analytics data.</p>
+    <Form
+      analyticsFormName="cookie-page-form"
+      id="cookieConsent"
+      submissionTaskName="save cookie preference"
+      initialValuesTaskName="load cookie preference"
+      submissionTaskResultToValues={(cookieConsent) => ({ cookieConsent })}
+      transformInitialValues={(cookieConsent) => ({ cookieConsent })}
+      transformPayload={({ cookieConsent }) => cookieConsent}
+      submitButtonLabel="Save cookie settings"
+    >
+      <FieldRadios
+        label="Do you want to accept analytics cookies?"
+        name="cookieConsent"
+        required="Choose one option"
+        options={[
+          { label: 'Yes', value: 'granted' },
+          { label: 'No', value: 'denied' },
+        ]}
+      />
+    </Form>
+  </Layout>
+)
+
+export default CookiePage
diff --git a/src/client/modules/ExportWins/Review/CookiePage/saga.js b/src/client/modules/ExportWins/Review/CookiePage/saga.js
new file mode 100644
index 00000000000..5ebc7ac8dbb
--- /dev/null
+++ b/src/client/modules/ExportWins/Review/CookiePage/saga.js
@@ -0,0 +1,26 @@
+import { put, take } from 'redux-saga/effects'
+import { eventChannel } from 'redux-saga'
+
+const storageChannel = eventChannel((emit) => {
+  window.addEventListener('storage', emit)
+  return () => window.removeEventListener(emit)
+})
+
+/**
+ * This ensures that when the user sets their cookie prefference
+ * in one browser tab, all the other tabs will pick up the change.
+ */
+// TODO: Once Redux state is persisted in session storage, this should not be needed
+export function* cookiePreferenceChangeSaga() {
+  while (true) {
+    const { key, newValue } = yield take(storageChannel)
+    if (key === 'cookie-consent') {
+      yield put({
+        type: 'RESOURCE',
+        name: 'load cookie preference',
+        id: 'cookieConsent',
+        result: newValue,
+      })
+    }
+  }
+}
diff --git a/src/client/modules/ExportWins/Review/Layout.jsx b/src/client/modules/ExportWins/Review/Layout.jsx
index 3f2bd981c96..958f3d3eda5 100644
--- a/src/client/modules/ExportWins/Review/Layout.jsx
+++ b/src/client/modules/ExportWins/Review/Layout.jsx
@@ -1,17 +1,22 @@
 import React from 'react'
 import styled from 'styled-components'
-import { H1 } from 'govuk-react'
+import { Button, H1, H2, Link } from 'govuk-react'
 import { FONT_SIZE, FONT_WEIGHTS, SPACING } from '@govuk-react/constants'
 
+import { FormActions } from '../../../components'
 import Footer from '../../../components/Footer'
+import Task from '../../../components/Task'
+import Resource from '../../../components/Resource/Resource'
 import { BLACK, WHITE, LIGHT_GREY } from '../../../utils/colours'
+import RecentTaskResult from '../../../components/Task/RecentResult'
 
 const Grid = styled.div({
   minHeight: '100vh',
   display: 'grid',
-  gridTemplateRows: 'auto auto 1fr minmax(min-content, 30px)',
+  gridTemplateRows: 'auto auto auto 1fr minmax(min-content, 30px)',
   gridTemplateColumns: `1fr min(100vw, calc(960px + ${SPACING.SCALE_3} * 2)) 1fr`,
   gridTemplateAreas: `
+    ". cookie-banner ." 
     ". main-bar ."
     ". header ."
     ". main ."
@@ -62,8 +67,69 @@ const Title = styled(H1)({
   marginBottom: SPACING.SCALE_5,
 })
 
+const CookieBannerBackground = styled.div({
+  gridRow: 'cookie-banner',
+  gridColumn: '1 / -1',
+  background: '#f3f2f1',
+})
+
+const CookieBanner = styled.div({
+  gridArea: 'cookie-banner',
+  paddingTop: SPACING.SCALE_3,
+})
+
 const Layout = ({ children, title, supertitle, headingContent }) => (
   <Grid>
+    <CookieBannerBackground />
+    <Resource name="load cookie preference" id="cookieConsent">
+      {(persistedConsent) => (
+        <RecentTaskResult name="save cookie preference" id="cookieConsent">
+          {(updatedConsent) =>
+            !persistedConsent &&
+            !updatedConsent && (
+              <CookieBanner>
+                <H2>Cookies</H2>
+                <p>
+                  We’d like to use analytics cookies sfo we can understand how
+                  you use the Design System and make improvements.
+                </p>
+                <p>
+                  We also use essential cookies to remember if you’ve accepted
+                  analytics cookies.
+                </p>
+                <FormActions>
+                  <Task>
+                    {(getTask) => {
+                      const setPreference = (value) =>
+                        getTask(
+                          'save cookie preference',
+                          'cookieConsent'
+                        ).start({
+                          payload: value,
+                          onSuccessDispatch: 'FORM__RESOLVED',
+                        })
+                      return (
+                        <>
+                          <Button onClick={() => setPreference('granted')}>
+                            Accept analytics cookies
+                          </Button>
+                          <Button onClick={() => setPreference('denied')}>
+                            Reject analytics cookies
+                          </Button>
+                        </>
+                      )
+                    }}
+                  </Task>
+                  <Link href="/exportwins/review/cookie-page">
+                    View cookies
+                  </Link>
+                </FormActions>
+              </CookieBanner>
+            )
+          }
+        </RecentTaskResult>
+      )}
+    </Resource>
     <MainBarBackground />
     <MainBar>Department for Business & Trade</MainBar>
     <HeaderBackground />
@@ -78,6 +144,7 @@ const Layout = ({ children, title, supertitle, headingContent }) => (
         'Privacy Policy':
           'https://www.great.gov.uk/privacy-and-cookies/full-privacy-notice/',
         'Accessibility Statement': '/exportwins/review/accesibility-statement',
+        Cookies: '/exportwins/review/cookies',
       }}
     />
   </Grid>
diff --git a/src/client/modules/ExportWins/Review/ThankYou.jsx b/src/client/modules/ExportWins/Review/ThankYou.jsx
index b736b59d01c..4977375d5bb 100644
--- a/src/client/modules/ExportWins/Review/ThankYou.jsx
+++ b/src/client/modules/ExportWins/Review/ThankYou.jsx
@@ -7,7 +7,7 @@ import { StatusMessage } from '../../../components'
 
 import Layout from './Layout'
 
-const StyledStatusMessage = styled(StatusMessage)({
+export const StyledStatusMessage = styled(StatusMessage)({
   background: WHITE,
   '& > *:first-child': {
     marginTop: 0,
diff --git a/src/client/modules/ExportWins/Review/index.jsx b/src/client/modules/ExportWins/Review/index.jsx
index 91657749c68..68e0001941b 100644
--- a/src/client/modules/ExportWins/Review/index.jsx
+++ b/src/client/modules/ExportWins/Review/index.jsx
@@ -8,6 +8,7 @@ import styled from 'styled-components'
 import HR from '../../../components/HR'
 
 import ThankYou from './ThankYou'
+import CookiePage from './CookiePage'
 
 import Layout from './Layout'
 import {
@@ -375,7 +376,7 @@ const Review = () => {
             submissionTaskName="TASK_PATCH_EXPORT_WIN_REVIEW"
             redirectMode="soft"
             redirectTo={(_, { agree_with_win }) =>
-              `/exportwins/review-win/thankyou?agree=${agree_with_win}`
+              `../thankyou?agree=${agree_with_win}`
             }
             transformPayload={transformPayload(token)}
           >
@@ -398,11 +399,9 @@ const Review = () => {
 
 export default () => (
   <Routes>
-    <Route
-      path="/exportwins/review/accesibility-statement"
-      element={<AccesibilityStatement />}
-    />
-    <Route path="/exportwins/review/:token" element={<Review />} />
-    <Route path="/exportwins/review-win/thankyou" element={<ThankYou />} />
+    <Route path="/accesibility-statement" element={<AccesibilityStatement />} />
+    <Route path="/thankyou" element={<ThankYou />} />
+    <Route path="/cookies" element={<CookiePage />} />
+    <Route path="/:token" element={<Review />} />
   </Routes>
 )
diff --git a/src/client/root-saga.js b/src/client/root-saga.js
index 56629acceac..3af3afc7c59 100644
--- a/src/client/root-saga.js
+++ b/src/client/root-saga.js
@@ -13,6 +13,7 @@ import {
   writeMyInvestmentsToSession,
   readMyInvestmentsFromSession,
 } from './components/MyInvestmentProjects/sagas'
+import { cookiePreferenceChangeSaga } from './modules/ExportWins/Review/CookiePage/saga'
 
 export default (tasks) => {
   return function* rootSaga() {
@@ -25,5 +26,6 @@ export default (tasks) => {
     yield fork(readAnnouncementLinkFromLocalStorage)
     yield fork(readMyInvestmentsFromSession)
     yield fork(writeMyInvestmentsToSession)
+    yield fork(cookiePreferenceChangeSaga)
   }
 }
diff --git a/src/templates/_includes/google-tag-manager-snippet.njk b/src/templates/_includes/google-tag-manager-snippet.njk
index 57f24043e2c..774e630411f 100644
--- a/src/templates/_includes/google-tag-manager-snippet.njk
+++ b/src/templates/_includes/google-tag-manager-snippet.njk
@@ -1,7 +1,5 @@
 {% if GOOGLE_TAG_MANAGER_KEY %}
 <script nonce='{{ cspNonce }}'>
-  {# window['ga-disable-G-2WBFY5B0YK'] = true #}
-
   window.dataLayer = window.dataLayer || []
   window.gtag = function() { dataLayer.push(arguments); }
 

From 3ed9121019befc3ae5cdb8c0cb46568fb5f5f0b9 Mon Sep 17 00:00:00 2001
From: Peter Hudec <peterhudec@peterhudec.com>
Date: Wed, 24 Jul 2024 13:11:31 +0100
Subject: [PATCH 04/11] Added functional tests for export win review cookie
 page

and reorganized code
---
 src/client/export-win-review.jsx              |  30 +--
 .../ExportWins/Review/CookiePage/index.jsx    |  23 ---
 .../ExportWins/Review/CookiePage/tasks.js     |  33 ++++
 .../modules/ExportWins/Review/Layout.jsx      |   2 +-
 .../specs/export-win/dashboard-spec.js        |  18 ++
 .../cypress/specs/export-win/review-spec.js   | 187 +++++++++++++++++-
 test/functional/cypress/support/assertions.js |  15 +-
 7 files changed, 247 insertions(+), 61 deletions(-)
 create mode 100644 src/client/modules/ExportWins/Review/CookiePage/tasks.js
 create mode 100644 test/functional/cypress/specs/export-win/dashboard-spec.js

diff --git a/src/client/export-win-review.jsx b/src/client/export-win-review.jsx
index 6e6059cc962..69f15b44a91 100644
--- a/src/client/export-win-review.jsx
+++ b/src/client/export-win-review.jsx
@@ -2,7 +2,6 @@ import './webpack-csp-nonce'
 import React from 'react'
 import { createRoot } from 'react-dom/client'
 import { Routes, Route } from 'react-router-dom'
-import Cookies from 'js-cookie'
 
 import { createProvider } from './createProvider'
 import WithoutOurSupport from './components/Resource/WithoutOurSupport'
@@ -13,31 +12,10 @@ import MarketingSource from './components/Resource/MarketingSource'
 
 import Review from './modules/ExportWins/Review'
 import { patchExportWinReview } from './modules/ExportWins/tasks'
-
-const COOKIE_CONSENT_COOKIE_NAME = 'cookie-consent'
-
-const loadCookiePreference = () =>
-  localStorage.getItem(COOKIE_CONSENT_COOKIE_NAME)
-
-const saveCookiePreference = (payload) => {
-  if (!['granted', 'denied'].includes(payload)) {
-    throw Error('Payload must be "granted" or "denied"')
-  }
-
-  localStorage.setItem(COOKIE_CONSENT_COOKIE_NAME, payload)
-
-  window.gtag('consent', 'update', {
-    analytics_storage: payload,
-  })
-
-  if (payload === 'denied') {
-    for (const cookieName in Cookies.get()) {
-      Cookies.remove(cookieName)
-    }
-  }
-
-  return payload
-}
+import {
+  loadCookiePreference,
+  saveCookiePreference,
+} from './modules/ExportWins/Review/CookiePage/tasks'
 
 const Provider = createProvider({
   ...ExportWinReview.tasks,
diff --git a/src/client/modules/ExportWins/Review/CookiePage/index.jsx b/src/client/modules/ExportWins/Review/CookiePage/index.jsx
index 1da8656c377..470fd180d15 100644
--- a/src/client/modules/ExportWins/Review/CookiePage/index.jsx
+++ b/src/client/modules/ExportWins/Review/CookiePage/index.jsx
@@ -1,8 +1,4 @@
 import React from 'react'
-import { put, take } from 'redux-saga/effects'
-
-import { eventChannel } from 'redux-saga'
-
 import { H2 } from 'govuk-react'
 
 import { GREEN } from '../../../../utils/colours'
@@ -12,25 +8,6 @@ import RecentTaskResult from '../../../../components/Task/RecentResult'
 import Layout from '../Layout'
 import { StyledStatusMessage } from '../ThankYou'
 
-const storageChannel = eventChannel((emit) => {
-  window.addEventListener('storage', emit)
-  return () => window.removeEventListener(emit)
-})
-
-export function* cookiePreferenceChangeSaga() {
-  while (true) {
-    const { key, newValue } = yield take(storageChannel)
-    if (key === 'cookie-consent') {
-      yield put({
-        type: 'FORM__RESOLVED',
-        name: 'save cookie preference',
-        id: 'cookieConsent',
-        result: newValue,
-      })
-    }
-  }
-}
-
 const CookiePage = () => (
   <Layout
     title="Export Wins cookie policy"
diff --git a/src/client/modules/ExportWins/Review/CookiePage/tasks.js b/src/client/modules/ExportWins/Review/CookiePage/tasks.js
new file mode 100644
index 00000000000..e5d9c6b8f07
--- /dev/null
+++ b/src/client/modules/ExportWins/Review/CookiePage/tasks.js
@@ -0,0 +1,33 @@
+import Cookies from 'js-cookie'
+
+export const COOKIE_CONSENT_COOKIE_NAME = 'cookie-consent'
+export const GRANTED = 'granted'
+export const DENIED = 'denied'
+
+export const loadCookiePreference = () =>
+  localStorage.getItem(COOKIE_CONSENT_COOKIE_NAME)
+
+export const saveCookiePreference = (payload) => {
+  if (!window.gtag) {
+    throw Error(
+      'window.gtag not defined, you probably forgot to set the GOOGLE_TAG_MANAGER_KEY env var.'
+    )
+  }
+  if (![GRANTED, DENIED].includes(payload)) {
+    throw Error('Payload must be "granted" or "denied"')
+  }
+
+  localStorage.setItem(COOKIE_CONSENT_COOKIE_NAME, payload)
+
+  window.gtag('consent', 'update', {
+    analytics_storage: payload,
+  })
+
+  if (payload === DENIED) {
+    for (const cookieName in Cookies.get()) {
+      Cookies.remove(cookieName)
+    }
+  }
+
+  return payload
+}
diff --git a/src/client/modules/ExportWins/Review/Layout.jsx b/src/client/modules/ExportWins/Review/Layout.jsx
index 958f3d3eda5..62e5dcd4a9c 100644
--- a/src/client/modules/ExportWins/Review/Layout.jsx
+++ b/src/client/modules/ExportWins/Review/Layout.jsx
@@ -90,7 +90,7 @@ const Layout = ({ children, title, supertitle, headingContent }) => (
               <CookieBanner>
                 <H2>Cookies</H2>
                 <p>
-                  We’d like to use analytics cookies sfo we can understand how
+                  We’d like to use analytics cookies so we can understand how
                   you use the Design System and make improvements.
                 </p>
                 <p>
diff --git a/test/functional/cypress/specs/export-win/dashboard-spec.js b/test/functional/cypress/specs/export-win/dashboard-spec.js
new file mode 100644
index 00000000000..905388046d2
--- /dev/null
+++ b/test/functional/cypress/specs/export-win/dashboard-spec.js
@@ -0,0 +1,18 @@
+/* eslint-disable prettier/prettier */
+import urls from "../../../../../src/lib/urls"
+
+describe('Dashboard', () => {
+  it('foo', () => {
+    cy.visit(urls.companies.exportWins.pending())
+
+    cy.contains('label', 'Sort by')
+      .within(() => {
+        cy.get('select option:selected')
+          .should('have.text', 'Newest')
+
+        cy.get('select')
+          .select('Oldest')
+      })
+
+  })
+})
diff --git a/test/functional/cypress/specs/export-win/review-spec.js b/test/functional/cypress/specs/export-win/review-spec.js
index 271c57330cd..bc6096c1a58 100644
--- a/test/functional/cypress/specs/export-win/review-spec.js
+++ b/test/functional/cypress/specs/export-win/review-spec.js
@@ -1,14 +1,185 @@
+import { assertFieldRadiosStrict } from '../../support/assertions'
+
+import {
+  COOKIE_CONSENT_COOKIE_NAME,
+  GRANTED,
+  DENIED,
+} from '../../../../../src/client/modules/ExportWins/Review/CookiePage/tasks'
+
+const getBannerButton = (action) => cy.contains(`${action} analytics cookies`)
+
+const assertCookieBanner = (shouldExist) => {
+  const asertion = shouldExist ? 'exist' : 'not.exist'
+  cy.contains('h2', 'Cookies').should(asertion)
+  cy.contains(
+    'We’d like to use analytics cookies so we can understand how you use the Design System and make improvements.'
+  ).should(asertion)
+  cy.contains(
+    'We also use essential cookies to remember if you’ve accepted analytics cookies.'
+  ).should(asertion)
+  getBannerButton('Accept').should(asertion)
+  getBannerButton('Reject').should(asertion)
+}
+
+const assertFlashMessage = (verb) =>
+  cy.contains(
+    `Yo've ${verb} additional cookies. You can change your cookie settings at any time.`
+  )
+
 describe('Export wins review', () => {
-  context('Should not set any cookies on page:', () => {
-    ;[
-      '/exportwins/review/dummy-token',
-      '/exportwins/review-win/thankyou',
-      '/exportwins/review/accesibility-statement',
-    ].forEach((url) => {
-      it(url, () => {
-        cy.visit(url)
+  ;[
+    '/exportwins/review/dummy-token',
+    '/exportwins/review/thankyou',
+    '/exportwins/review/accesibility-statement',
+    '/exportwins/review/cookies',
+  ].forEach((url) => {
+    context(url, () => {
+      beforeEach(() => cy.visit(url))
+
+      it('Should not set any first party cookies', () => {
+        // In fact we allow Google analytics cookies,
+        // but GA is set up with a dummy ID for the test instance
         cy.getAllCookies().should('have.length', 0)
       })
+
+      it('Should have footer with certain links', () => {
+        cy.contains('a', 'Privacy Policy').should(
+          'have.attr',
+          'href',
+          'https://www.great.gov.uk/privacy-and-cookies/full-privacy-notice/'
+        )
+        cy.contains('a', 'Accessibility Statement').should(
+          'have.attr',
+          'href',
+          '/exportwins/review/accesibility-statement'
+        )
+        cy.contains('a', 'Cookies').should(
+          'have.attr',
+          'href',
+          '/exportwins/review/cookies'
+        )
+      })
+    })
+  })
+
+  context('Cookie page', () => {
+    const test = ({ accept, how, action }) =>
+      it(`${accept ? 'Grant' : 'Deny'} through ${how}`, () => {
+        action()
+
+        assertCookieBanner(false)
+        assertFlashMessage(accept ? 'accepted' : 'rejected')
+        assertFieldRadiosStrict({
+          inputName: 'cookieConsent',
+          options: ['Yes', 'No'],
+          selectedIndex: accept ? 0 : 1,
+        })
+      })
+
+    ;[true, false].forEach((existingPreference) =>
+      it(`Should not show cookie banner if existing preference was "${existingPreference}"`, () => {
+        cy.visit('/exportwins/review/cookies', {
+          onBeforeLoad: (win) => {
+            win.localStorage.setItem(
+              COOKIE_CONSENT_COOKIE_NAME,
+              existingPreference ? GRANTED : DENIED
+            )
+          },
+        })
+        assertCookieBanner(false)
+        assertFieldRadiosStrict({
+          inputName: 'cookieConsent',
+          options: ['Yes', 'No'],
+          selectedIndex: existingPreference ? 0 : 1,
+        })
+      })
+    )
+    ;[
+      {
+        existingPreference: false,
+        accept: true,
+        how: 'form',
+        action: () => {
+          cy.contains('label', 'Yes').click()
+          cy.contains('button', 'Save cookie settings').click()
+        },
+      },
+      {
+        existingPreference: true,
+        accept: false,
+        how: 'form',
+        action: () => {
+          cy.contains('label', 'No').click()
+          cy.contains('button', 'Save cookie settings').click()
+        },
+      },
+    ].forEach(({ existingPreference, ...rest }) => {
+      context(
+        `Existing preference "${existingPreference ? 'Yes' : 'No'}"`,
+        () => {
+          beforeEach(() =>
+            cy.visit('/exportwins/review/cookies', {
+              onBeforeLoad: (win) => {
+                win.localStorage.setItem(
+                  COOKIE_CONSENT_COOKIE_NAME,
+                  existingPreference ? GRANTED : DENIED
+                )
+              },
+            })
+          )
+
+          it(`Should not show cookie banner if existing preference was "${existingPreference}"`, () => {
+            assertCookieBanner(false)
+            assertFieldRadiosStrict({
+              inputName: 'cookieConsent',
+              options: ['Yes', 'No'],
+              selectedIndex: existingPreference ? 0 : 1,
+            })
+          })
+          test(rest)
+        }
+      )
+    })
+
+    context('No existing preference', () => {
+      beforeEach(() => cy.visit('/exportwins/review/cookies'))
+
+      it('Displays banner and form with no selected prefference', () => {
+        assertCookieBanner(true)
+        assertFieldRadiosStrict({
+          inputName: 'cookieConsent',
+          options: ['Yes', 'No'],
+          selectedIndex: null,
+        })
+      })
+      ;[
+        {
+          accept: true,
+          how: 'banner',
+          action: () => getBannerButton('Accept').click(),
+        },
+        {
+          accept: false,
+          how: 'banner',
+          action: () => getBannerButton('Reject').click(),
+        },
+        {
+          accept: true,
+          how: 'form',
+          action: () => {
+            cy.contains('label', 'Yes').click()
+            cy.contains('button', 'Save cookie settings').click()
+          },
+        },
+        {
+          accept: false,
+          how: 'form',
+          action: () => {
+            cy.contains('label', 'No').click()
+            cy.contains('button', 'Save cookie settings').click()
+          },
+        },
+      ].forEach(test)
     })
   })
 })
diff --git a/test/functional/cypress/support/assertions.js b/test/functional/cypress/support/assertions.js
index 31ea45af064..1f7487db77c 100644
--- a/test/functional/cypress/support/assertions.js
+++ b/test/functional/cypress/support/assertions.js
@@ -278,6 +278,7 @@ const assertFieldRadiosStrict = ({
   legend,
   hint,
   selectIndex,
+  selectedIndex,
 }) =>
   cy
     .get(`[data-test="field-${inputName}"]`)
@@ -294,15 +295,23 @@ const assertFieldRadiosStrict = ({
         .should('have.length', options.length)
         .each(($el, i) => {
           const label = options[i]
-          const wrapped = cy
-            .wrap($el)
+          cy.wrap($el)
             .should('have.attr', 'aria-label', label)
+            .as('radio')
             .parent()
             .should('match', 'label')
             .should('have.text', label)
 
+          if (selectedIndex === 0 || selectedIndex) {
+            cy.get('@radio').should(
+              selectedIndex === i ? 'be.checked' : 'not.be.checked'
+            )
+          } else if (selectedIndex === null) {
+            cy.get('@radio').should('not.be.checked')
+          }
+
           if (i === selectIndex) {
-            wrapped.click()
+            cy.get('@radio').click()
           }
         })
     })

From b97d3140e7c60f4c1c1fb0c7b2178934a6e88e4b Mon Sep 17 00:00:00 2001
From: Peter Hudec <peterhudec@peterhudec.com>
Date: Thu, 25 Jul 2024 15:10:26 +0100
Subject: [PATCH 05/11] Fixed a bug with the cookie consent flash message

when it only appeared on the cookie page.
---
 .../ExportWins/Review/CookiePage/index.jsx    |  20 +-
 .../modules/ExportWins/Review/Layout.jsx      |  23 ++-
 .../cypress/specs/export-win/review-spec.js   | 175 ++++++++----------
 3 files changed, 100 insertions(+), 118 deletions(-)

diff --git a/src/client/modules/ExportWins/Review/CookiePage/index.jsx b/src/client/modules/ExportWins/Review/CookiePage/index.jsx
index 470fd180d15..2edac4bf55b 100644
--- a/src/client/modules/ExportWins/Review/CookiePage/index.jsx
+++ b/src/client/modules/ExportWins/Review/CookiePage/index.jsx
@@ -1,29 +1,11 @@
 import React from 'react'
 import { H2 } from 'govuk-react'
 
-import { GREEN } from '../../../../utils/colours'
 import { FieldRadios, Form } from '../../../../components'
-import RecentTaskResult from '../../../../components/Task/RecentResult'
-
 import Layout from '../Layout'
-import { StyledStatusMessage } from '../ThankYou'
 
 const CookiePage = () => (
-  <Layout
-    title="Export Wins cookie policy"
-    headingContent={
-      <RecentTaskResult name="save cookie preference" id="cookieConsent">
-        {(consent) =>
-          consent && (
-            <StyledStatusMessage colour={GREEN}>
-              Yo've {consent === 'granted' ? 'accepted' : 'rejected'} additional
-              cookies. You can change your cookie settings at any time.
-            </StyledStatusMessage>
-          )
-        }
-      </RecentTaskResult>
-    }
-  >
+  <Layout title="Export Wins cookie policy">
     <H2>How cookies are used in Export Wins</H2>
     <p>Export wins puts small files (known as 'cookies') onto your computer.</p>
     <p>
diff --git a/src/client/modules/ExportWins/Review/Layout.jsx b/src/client/modules/ExportWins/Review/Layout.jsx
index 62e5dcd4a9c..8139333402d 100644
--- a/src/client/modules/ExportWins/Review/Layout.jsx
+++ b/src/client/modules/ExportWins/Review/Layout.jsx
@@ -3,12 +3,13 @@ import styled from 'styled-components'
 import { Button, H1, H2, Link } from 'govuk-react'
 import { FONT_SIZE, FONT_WEIGHTS, SPACING } from '@govuk-react/constants'
 
+import RecentTaskResult from '../../../components/Task/RecentResult'
+import { StyledStatusMessage } from './ThankYou'
 import { FormActions } from '../../../components'
 import Footer from '../../../components/Footer'
 import Task from '../../../components/Task'
 import Resource from '../../../components/Resource/Resource'
-import { BLACK, WHITE, LIGHT_GREY } from '../../../utils/colours'
-import RecentTaskResult from '../../../components/Task/RecentResult'
+import { BLACK, WHITE, LIGHT_GREY, GREEN } from '../../../utils/colours'
 
 const Grid = styled.div({
   minHeight: '100vh',
@@ -78,6 +79,19 @@ const CookieBanner = styled.div({
   paddingTop: SPACING.SCALE_3,
 })
 
+const CookieConsentConfirmation = () => (
+  <RecentTaskResult name="save cookie preference" id="cookieConsent">
+    {(consent) =>
+      consent && (
+        <StyledStatusMessage colour={GREEN}>
+          Yo've {consent === 'granted' ? 'accepted' : 'rejected'} additional
+          cookies. You can change your cookie settings at any time.
+        </StyledStatusMessage>
+      )
+    }
+  </RecentTaskResult>
+)
+
 const Layout = ({ children, title, supertitle, headingContent }) => (
   <Grid>
     <CookieBannerBackground />
@@ -120,9 +134,7 @@ const Layout = ({ children, title, supertitle, headingContent }) => (
                       )
                     }}
                   </Task>
-                  <Link href="/exportwins/review/cookie-page">
-                    View cookies
-                  </Link>
+                  <Link href="/exportwins/review/cookies">View cookies</Link>
                 </FormActions>
               </CookieBanner>
             )
@@ -136,6 +148,7 @@ const Layout = ({ children, title, supertitle, headingContent }) => (
     <Header>
       <p>{supertitle}</p>
       <Title>{title}</Title>
+      <CookieConsentConfirmation />
       {headingContent}
     </Header>
     <Main>{children}</Main>
diff --git a/test/functional/cypress/specs/export-win/review-spec.js b/test/functional/cypress/specs/export-win/review-spec.js
index bc6096c1a58..75e678aea93 100644
--- a/test/functional/cypress/specs/export-win/review-spec.js
+++ b/test/functional/cypress/specs/export-win/review-spec.js
@@ -8,6 +8,18 @@ import {
 
 const getBannerButton = (action) => cy.contains(`${action} analytics cookies`)
 
+const assertFlashMessage = (verb) => {
+  if (verb === false) {
+    cy.contains(
+      'additional cookies. You can change your cookie settings at any time.'
+    ).should('not.exist')
+  } else {
+    cy.contains(
+      `Yo've ${verb} additional cookies. You can change your cookie settings at any time.`
+    )
+  }
+}
+
 const assertCookieBanner = (shouldExist) => {
   const asertion = shouldExist ? 'exist' : 'not.exist'
   cy.contains('h2', 'Cookies').should(asertion)
@@ -21,11 +33,6 @@ const assertCookieBanner = (shouldExist) => {
   getBannerButton('Reject').should(asertion)
 }
 
-const assertFlashMessage = (verb) =>
-  cy.contains(
-    `Yo've ${verb} additional cookies. You can change your cookie settings at any time.`
-  )
-
 describe('Export wins review', () => {
   ;[
     '/exportwins/review/dummy-token',
@@ -59,61 +66,46 @@ describe('Export wins review', () => {
           '/exportwins/review/cookies'
         )
       })
-    })
-  })
 
-  context('Cookie page', () => {
-    const test = ({ accept, how, action }) =>
-      it(`${accept ? 'Grant' : 'Deny'} through ${how}`, () => {
-        action()
-
-        assertCookieBanner(false)
-        assertFlashMessage(accept ? 'accepted' : 'rejected')
-        assertFieldRadiosStrict({
-          inputName: 'cookieConsent',
-          options: ['Yes', 'No'],
-          selectedIndex: accept ? 0 : 1,
+      context('Cookie consent', () => {
+        context('No existing preference', () => {
+          it('Should display cookie banner', () => {
+            assertCookieBanner(true)
+            assertFlashMessage(false)
+          })
+          ;[true, false].forEach((accept) =>
+            it(`${accept ? 'Grant' : 'Deny'} through cookie banner`, () => {
+              getBannerButton(accept ? 'Accept' : 'Reject').click()
+              assertCookieBanner(false)
+              assertFlashMessage(accept ? 'accepted' : 'rejected')
+            })
+          )
         })
-      })
 
-    ;[true, false].forEach((existingPreference) =>
-      it(`Should not show cookie banner if existing preference was "${existingPreference}"`, () => {
-        cy.visit('/exportwins/review/cookies', {
-          onBeforeLoad: (win) => {
-            win.localStorage.setItem(
-              COOKIE_CONSENT_COOKIE_NAME,
-              existingPreference ? GRANTED : DENIED
-            )
-          },
-        })
-        assertCookieBanner(false)
-        assertFieldRadiosStrict({
-          inputName: 'cookieConsent',
-          options: ['Yes', 'No'],
-          selectedIndex: existingPreference ? 0 : 1,
+        context('Existing preference', () => {
+          ;[true, false].forEach((existingPreference) => {
+            context(existingPreference ? 'Yes' : 'No', () => {
+              it('Should not display cookie banner', () => {
+                cy.visit(url, {
+                  onBeforeLoad: (win) => {
+                    win.localStorage.setItem(
+                      COOKIE_CONSENT_COOKIE_NAME,
+                      existingPreference ? GRANTED : DENIED
+                    )
+                  },
+                })
+                assertCookieBanner(false)
+                assertFlashMessage(false)
+              })
+            })
+          })
         })
       })
-    )
-    ;[
-      {
-        existingPreference: false,
-        accept: true,
-        how: 'form',
-        action: () => {
-          cy.contains('label', 'Yes').click()
-          cy.contains('button', 'Save cookie settings').click()
-        },
-      },
-      {
-        existingPreference: true,
-        accept: false,
-        how: 'form',
-        action: () => {
-          cy.contains('label', 'No').click()
-          cy.contains('button', 'Save cookie settings').click()
-        },
-      },
-    ].forEach(({ existingPreference, ...rest }) => {
+    })
+  })
+
+  context('Cookie page', () => {
+    ;[true, false].forEach((existingPreference) => {
       context(
         `Existing preference "${existingPreference ? 'Yes' : 'No'}"`,
         () => {
@@ -128,58 +120,53 @@ describe('Export wins review', () => {
             })
           )
 
-          it(`Should not show cookie banner if existing preference was "${existingPreference}"`, () => {
+          it(`The "${existingPreference ? 'Yes' : 'No'}" radio should be checked`, () => {
             assertCookieBanner(false)
+            assertFlashMessage(false)
             assertFieldRadiosStrict({
               inputName: 'cookieConsent',
               options: ['Yes', 'No'],
               selectedIndex: existingPreference ? 0 : 1,
             })
           })
-          test(rest)
+          ;[true, false].forEach((accept) => {
+            it(`${accept ? 'Grant' : 'Deny'} through form`, () => {
+              cy.contains('label', accept ? 'Yes' : 'No').click()
+              cy.contains('button', 'Save cookie settings').click()
+
+              assertCookieBanner(false)
+              assertFlashMessage(accept ? 'accepted' : 'rejected')
+
+              assertFieldRadiosStrict({
+                inputName: 'cookieConsent',
+                options: ['Yes', 'No'],
+                selectedIndex: accept ? 0 : 1,
+              })
+            })
+          })
         }
       )
-    })
 
-    context('No existing preference', () => {
-      beforeEach(() => cy.visit('/exportwins/review/cookies'))
+      context('No existing preferrence', () => {
+        beforeEach(() => cy.visit('/exportwins/review/cookies'))
+        ;[true, false].forEach((accept) => {
+          it(`${accept ? 'Grant' : 'Deny'} through cookie banner`, () => {
+            assertCookieBanner(true)
+            assertFlashMessage(false)
 
-      it('Displays banner and form with no selected prefference', () => {
-        assertCookieBanner(true)
-        assertFieldRadiosStrict({
-          inputName: 'cookieConsent',
-          options: ['Yes', 'No'],
-          selectedIndex: null,
+            getBannerButton(accept ? 'Accept' : 'Reject').click()
+
+            assertCookieBanner(false)
+            assertFlashMessage(accept ? 'accepted' : 'rejected')
+
+            assertFieldRadiosStrict({
+              inputName: 'cookieConsent',
+              options: ['Yes', 'No'],
+              selectedIndex: accept ? 0 : 1,
+            })
+          })
         })
       })
-      ;[
-        {
-          accept: true,
-          how: 'banner',
-          action: () => getBannerButton('Accept').click(),
-        },
-        {
-          accept: false,
-          how: 'banner',
-          action: () => getBannerButton('Reject').click(),
-        },
-        {
-          accept: true,
-          how: 'form',
-          action: () => {
-            cy.contains('label', 'Yes').click()
-            cy.contains('button', 'Save cookie settings').click()
-          },
-        },
-        {
-          accept: false,
-          how: 'form',
-          action: () => {
-            cy.contains('label', 'No').click()
-            cy.contains('button', 'Save cookie settings').click()
-          },
-        },
-      ].forEach(test)
     })
   })
 })

From 799fc23c7b3d3153df240f88d821f37afd30d6f4 Mon Sep 17 00:00:00 2001
From: Peter Hudec <peterhudec@peterhudec.com>
Date: Thu, 25 Jul 2024 15:57:43 +0100
Subject: [PATCH 06/11] Fixed broken component tests

---
 .../cypress/specs/ExportWins/Review.cy.jsx    | 21 +++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/test/component/cypress/specs/ExportWins/Review.cy.jsx b/test/component/cypress/specs/ExportWins/Review.cy.jsx
index e0e633945c2..045ae593707 100644
--- a/test/component/cypress/specs/ExportWins/Review.cy.jsx
+++ b/test/component/cypress/specs/ExportWins/Review.cy.jsx
@@ -103,8 +103,9 @@ const assertReviewForm = ({ agree }) => {
       Experience: () => Promise.resolve(EXPERIENCE),
       MarketingSource: () => Promise.resolve(MARKETING_SOURCE),
       TASK_PATCH_EXPORT_WIN_REVIEW: () => Promise.resolve({}),
+      'load cookie preference': () => 'granted',
     },
-    initialPath: '/exportwins/review/123',
+    initialPath: '/123',
   })
 
   assertHeader()
@@ -337,16 +338,17 @@ describe('ExportWins/Review', () => {
         Experience: () => Promise.resolve(EXPERIENCE),
         MarketingSource: () => Promise.resolve(MARKETING_SOURCE),
         TASK_PATCH_EXPORT_WIN_REVIEW: () => Promise.resolve({}),
+        'load cookie preference': () => 'granted',
       },
-      initialPath: '/exportwins/review/123',
+      initialPath: '/123',
     })
 
     cy.get('footer').within(() => {
       // There should be 3 links including the Crown copyright
-      cy.get('a').should('have.length', 3)
+      cy.get('a').should('have.length', 4)
 
       // Links should be in a particular order
-      cy.contains('Privacy Policy' + 'Accessibility Statement')
+      cy.contains('Privacy Policy' + 'Accessibility Statement' + 'Cookies')
 
       cy.contains('a', 'Privacy Policy').should(
         'have.attr',
@@ -358,6 +360,11 @@ describe('ExportWins/Review', () => {
         'href',
         '/exportwins/review/accesibility-statement'
       )
+      cy.contains('a', 'Cookies').should(
+        'have.attr',
+        'href',
+        '/exportwins/review/cookies'
+      )
     })
   })
 
@@ -369,8 +376,9 @@ describe('ExportWins/Review', () => {
             Promise.reject({
               httpStatusCode: 404,
             }),
-          initialPath: '/exportwins/review/123',
+          'load cookie preference': () => 'granted',
         },
+        initialPath: '/123',
       })
 
       assertHeader()
@@ -388,8 +396,9 @@ describe('ExportWins/Review', () => {
       cy.mountWithProvider(<Review />, {
         tasks: {
           'Export Win Review': () => Promise.reject({}),
+          'load cookie preference': () => 'granted',
         },
-        initialPath: '/exportwins/review/123',
+        initialPath: '/123',
       })
 
       assertHeader()

From a9b7ab9e6db96c99f119077cca15d9108458021c Mon Sep 17 00:00:00 2001
From: Paul Gain <paul@javexconsulting.com>
Date: Thu, 8 Aug 2024 13:42:11 +0100
Subject: [PATCH 07/11] Fix typo

---
 src/client/modules/ExportWins/Review/Layout.jsx         | 2 +-
 test/functional/cypress/specs/export-win/review-spec.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/client/modules/ExportWins/Review/Layout.jsx b/src/client/modules/ExportWins/Review/Layout.jsx
index 8139333402d..3298310d2da 100644
--- a/src/client/modules/ExportWins/Review/Layout.jsx
+++ b/src/client/modules/ExportWins/Review/Layout.jsx
@@ -84,7 +84,7 @@ const CookieConsentConfirmation = () => (
     {(consent) =>
       consent && (
         <StyledStatusMessage colour={GREEN}>
-          Yo've {consent === 'granted' ? 'accepted' : 'rejected'} additional
+          You've {consent === 'granted' ? 'accepted' : 'rejected'} additional
           cookies. You can change your cookie settings at any time.
         </StyledStatusMessage>
       )
diff --git a/test/functional/cypress/specs/export-win/review-spec.js b/test/functional/cypress/specs/export-win/review-spec.js
index 75e678aea93..8c947952b34 100644
--- a/test/functional/cypress/specs/export-win/review-spec.js
+++ b/test/functional/cypress/specs/export-win/review-spec.js
@@ -15,7 +15,7 @@ const assertFlashMessage = (verb) => {
     ).should('not.exist')
   } else {
     cy.contains(
-      `Yo've ${verb} additional cookies. You can change your cookie settings at any time.`
+      `You've ${verb} additional cookies. You can change your cookie settings at any time.`
     )
   }
 }

From 45a48e310e9e9d6d799ffce6f4e46c65aaa0a51a Mon Sep 17 00:00:00 2001
From: Paul Gain <paul@javexconsulting.com>
Date: Thu, 8 Aug 2024 14:54:33 +0100
Subject: [PATCH 08/11] Content changes

---
 src/client/modules/ExportWins/Review/Layout.jsx       | 4 ++--
 test/component/cypress/specs/ExportWins/Review.cy.jsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/client/modules/ExportWins/Review/Layout.jsx b/src/client/modules/ExportWins/Review/Layout.jsx
index 3298310d2da..04712017aa7 100644
--- a/src/client/modules/ExportWins/Review/Layout.jsx
+++ b/src/client/modules/ExportWins/Review/Layout.jsx
@@ -105,7 +105,7 @@ const Layout = ({ children, title, supertitle, headingContent }) => (
                 <H2>Cookies</H2>
                 <p>
                   We’d like to use analytics cookies so we can understand how
-                  you use the Design System and make improvements.
+                  you use Export Wins and make improvements.
                 </p>
                 <p>
                   We also use essential cookies to remember if you’ve accepted
@@ -143,7 +143,7 @@ const Layout = ({ children, title, supertitle, headingContent }) => (
       )}
     </Resource>
     <MainBarBackground />
-    <MainBar>Department for Business & Trade</MainBar>
+    <MainBar>Department for Business and Trade</MainBar>
     <HeaderBackground />
     <Header>
       <p>{supertitle}</p>
diff --git a/test/component/cypress/specs/ExportWins/Review.cy.jsx b/test/component/cypress/specs/ExportWins/Review.cy.jsx
index 045ae593707..e8f400d9bc9 100644
--- a/test/component/cypress/specs/ExportWins/Review.cy.jsx
+++ b/test/component/cypress/specs/ExportWins/Review.cy.jsx
@@ -12,7 +12,7 @@ import Review from '../../../../../src/client/modules/ExportWins/Review'
 const assertNoErrorDialog = () =>
   cy.get('[data-test="error-dialog"').should('not.exist')
 
-const DBT_HEADING = 'Department for Business & Trade'
+const DBT_HEADING = 'Department for Business and Trade'
 const HEADING = 'Tell us what made a difference'
 
 const assertHeader = () => {

From fa6b8d95562b3e6db0c083d1d99964964b86633f Mon Sep 17 00:00:00 2001
From: Paul Gain <paul@javexconsulting.com>
Date: Thu, 8 Aug 2024 14:54:58 +0100
Subject: [PATCH 09/11] Fix typo

---
 src/client/modules/ExportWins/Review/CookiePage/saga.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/client/modules/ExportWins/Review/CookiePage/saga.js b/src/client/modules/ExportWins/Review/CookiePage/saga.js
index 5ebc7ac8dbb..6ea9c9017da 100644
--- a/src/client/modules/ExportWins/Review/CookiePage/saga.js
+++ b/src/client/modules/ExportWins/Review/CookiePage/saga.js
@@ -7,7 +7,7 @@ const storageChannel = eventChannel((emit) => {
 })
 
 /**
- * This ensures that when the user sets their cookie prefference
+ * This ensures that when the user sets their cookie preference
  * in one browser tab, all the other tabs will pick up the change.
  */
 // TODO: Once Redux state is persisted in session storage, this should not be needed

From cf05a91b7d7555c47c4d892261966facf529722d Mon Sep 17 00:00:00 2001
From: Paul Gain <paul@javexconsulting.com>
Date: Thu, 8 Aug 2024 14:56:01 +0100
Subject: [PATCH 10/11] Enable linting

---
 .../cypress/specs/Task/RecentResult.cy.jsx    | 56 ++++++++++---------
 .../specs/export-win/dashboard-spec.js        | 17 ++----
 2 files changed, 35 insertions(+), 38 deletions(-)

diff --git a/test/component/cypress/specs/Task/RecentResult.cy.jsx b/test/component/cypress/specs/Task/RecentResult.cy.jsx
index 6acbcd4fb6f..8ddfdbf6708 100644
--- a/test/component/cypress/specs/Task/RecentResult.cy.jsx
+++ b/test/component/cypress/specs/Task/RecentResult.cy.jsx
@@ -1,8 +1,7 @@
-/* eslint-disable prettier/prettier */
 import React from 'react'
 
-import RecentResult from "../../../../../src/client/components/Task/RecentResult"
-import Task from "../../../../../src/client/components/Task"
+import RecentResult from '../../../../../src/client/components/Task/RecentResult'
+import Task from '../../../../../src/client/components/Task'
 
 describe('Task/RecentResult', () => {
   it('Should provide most recent result of a given task', () => {
@@ -51,42 +50,47 @@ describe('Task/RecentResult', () => {
       },
     ]
 
-    const TASKS = TASK_CALLS.reduce((a, {name, id}) => ({
-      ...a,
-      [`${name}-${id}`]: {name, id},
-    }), {})
+    const TASKS = TASK_CALLS.reduce(
+      (a, { name, id }) => ({
+        ...a,
+        [`${name}-${id}`]: { name, id },
+      }),
+      {}
+    )
 
     cy.mountWithProvider(
       <>
         <Task>
-          {t =>
+          {(t) => (
             // A utility to start tasks
-            <form onSubmit={(e) => {
-              e.preventDefault()
-              t(e.target.taskName.value, e.target.taskId.value).start({
-                payload: parseInt(e.target.payload.value, 10),
-                onSuccessDispatch: `ACTION_NAME-${Math.random()}`,
-              })
-            }}>
-              <input name="taskName" placeholder="name"/>
-              <input name="taskId" placeholder="id"/>
-              <input name="payload" placeholder="payload"/>
-              <button>
-                Start task
-              </button>
+            <form
+              onSubmit={(e) => {
+                e.preventDefault()
+                t(e.target.taskName.value, e.target.taskId.value).start({
+                  payload: parseInt(e.target.payload.value, 10),
+                  onSuccessDispatch: `ACTION_NAME-${Math.random()}`,
+                })
+              }}
+            >
+              <input name="taskName" placeholder="name" />
+              <input name="taskId" placeholder="id" />
+              <input name="payload" placeholder="payload" />
+              <button>Start task</button>
             </form>
-          }
+          )}
         </Task>
         {/* Render most recent result of each task */}
         <ul>
-          {Object.entries(TASKS).map(([key, {name, id}]) =>
+          {Object.entries(TASKS).map(([key, { name, id }]) => (
             <li key={key}>
               {key}:{' '}
               <RecentResult name={name} id={id}>
-                {result => <span id={`result-${key}`}>{result || 'nothing'}</span>}
+                {(result) => (
+                  <span id={`result-${key}`}>{result || 'nothing'}</span>
+                )}
               </RecentResult>
             </li>
-          )}
+          ))}
         </ul>
       </>,
       {
@@ -97,7 +101,7 @@ describe('Task/RecentResult', () => {
       }
     )
 
-    TASK_CALLS.forEach(({name, id, payload, expectedResult}) => {
+    TASK_CALLS.forEach(({ name, id, payload, expectedResult }) => {
       cy.get('input[name="taskName"]').clear().type(name)
       cy.get('input[name="taskId"]').clear().type(id)
       cy.get('input[name="payload"]').clear().type(payload)
diff --git a/test/functional/cypress/specs/export-win/dashboard-spec.js b/test/functional/cypress/specs/export-win/dashboard-spec.js
index 905388046d2..21d65e9fa69 100644
--- a/test/functional/cypress/specs/export-win/dashboard-spec.js
+++ b/test/functional/cypress/specs/export-win/dashboard-spec.js
@@ -1,18 +1,11 @@
-/* eslint-disable prettier/prettier */
-import urls from "../../../../../src/lib/urls"
+import urls from '../../../../../src/lib/urls'
 
 describe('Dashboard', () => {
   it('foo', () => {
     cy.visit(urls.companies.exportWins.pending())
-
-    cy.contains('label', 'Sort by')
-      .within(() => {
-        cy.get('select option:selected')
-          .should('have.text', 'Newest')
-
-        cy.get('select')
-          .select('Oldest')
-      })
-
+    cy.contains('label', 'Sort by').within(() => {
+      cy.get('select option:selected').should('have.text', 'Newest')
+      cy.get('select').select('Oldest')
+    })
   })
 })

From 55e6d06058fdb860847dfbc07d3337343f9f2b0e Mon Sep 17 00:00:00 2001
From: Paul Gain <paul@javexconsulting.com>
Date: Thu, 8 Aug 2024 15:49:58 +0100
Subject: [PATCH 11/11] Update functional tests

---
 test/functional/cypress/specs/export-win/review-spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/functional/cypress/specs/export-win/review-spec.js b/test/functional/cypress/specs/export-win/review-spec.js
index 8c947952b34..224ac38e557 100644
--- a/test/functional/cypress/specs/export-win/review-spec.js
+++ b/test/functional/cypress/specs/export-win/review-spec.js
@@ -24,7 +24,7 @@ const assertCookieBanner = (shouldExist) => {
   const asertion = shouldExist ? 'exist' : 'not.exist'
   cy.contains('h2', 'Cookies').should(asertion)
   cy.contains(
-    'We’d like to use analytics cookies so we can understand how you use the Design System and make improvements.'
+    'We’d like to use analytics cookies so we can understand how you use Export Wins and make improvements.'
   ).should(asertion)
   cy.contains(
     'We also use essential cookies to remember if you’ve accepted analytics cookies.'
