FCRM-5408 added /about-map AKA 'Changes to flood data'

bin/copy-assets

@@ -9,4 +9,4 @@ cp node_modules/jquery/dist/jquery.min.js server/public/assets/javascripts/jquer
 cp node_modules/jquery/dist/jquery.min.map server/public/assets/javascripts/jquery.min.map
 cp node_modules/ol/src/ol.css server/public/assets/stylesheets/ol.css
 cp node_modules/govuk_frontend_toolkit/javascripts/govuk/show-hide-content.js server/public/assets/javascripts/show-hide-content.js
-cp client/js/triage.js server/public/build/javascripts/triage.js
+cp -R client/js/modules/* server/public/build/javascripts/

client/js/defra-map/index.js

@@ -577,7 +577,7 @@ getDefraMapConfig().then((defraMapConfig) => {
       addLabel: 'Add boundary',
       updateLabel: 'Update boundary',
       submitLabel: 'Get summary report',
-      helpLabel: 'How to draw a shape',
+      helpLabel: 'How to draw a boundary',
       keyLabel: 'Report area',
       html: '<p><strong>For an approximate site boundary</strong>: <ul class="govuk-list govuk-list--bullet"><li>use the red square to define the boundary of your site</li><li>zoom and move the map to position the square</li><li>click the ‘add boundary’ button to finish</li></ul></p></br><p><strong>For a more detailed site boundary:</strong></p><ul class="govuk-list govuk-list--bullet"><li>click ‘edit shape’ and dots will appear on the square</li><li>move the dots to change the shape of the square until it matches your boundary</li><li>click the ‘add boundary’ button to finish</li></ul>',
       defaultUrl: '/map/styles/polygon-default',

client/js/modules/about-map.js

@@ -0,0 +1,10 @@
+import { setCookie } from './cookies.js'
+
+const element = document.getElementById('dont-show-again')
+element.onchange = (element) => {
+  if (element.target.checked) {
+    setCookie('Skip-changes-to-flood-data', 'true', 30)
+  } else {
+    setCookie('Skip-changes-to-flood-data', 'true', -365)
+  }
+}

client/js/modules/cookies.js

@@ -0,0 +1,6 @@
+export const setCookie = (cName, cValue, expDays) => {
+  const date = new Date()
+  date.setTime(date.getTime() + expDays * 24 * 60 * 60 * 1000)
+  const expires = 'expires=' + date.toUTCString()
+  document.cookie = cName + '=' + cValue + '; ' + expires + '; path=/'
+}

client/js/modules/triage.js

@@ -0,0 +1,10 @@
+const updateLocation = (src) => {
+  const button = document.getElementById('continue-button')
+  if (button) {
+    button.href = src.value
+  }
+}
+
+Array.from(document.getElementsByName('triage-options')).forEach((element) => {
+  element.onclick = () => updateLocation(element)
+})

jest.config.js

@@ -1,13 +1,13 @@
-const { setImmediate } = require('timers')
-
 module.exports = async () => {
-  return {
+  const config = {
     testPathIgnorePatterns: [
-      'defra-map'
+      '/defra-map'
     ],
     testEnvironment: 'jsdom',
     globals: {
       setImmediate
-    }
+    },
+    setupFilesAfterEnv: ['<rootDir>/jest.env.js']
   }
+  return config
 }

jest.env.js

@@ -0,0 +1,2 @@
+const { setImmediate } = require('timers')
+global.setImmediate = setImmediate

package.json

@@ -22,6 +22,7 @@
     "unit-test": "lab --verbose -l -c -r console -o stdout -r lcov -o lcov.info",
     "unit-test-quiet": "lab -l -s",
     "test": "npm run lint && npm run unit-test",
+    "jest": "jest",
     "test-bail": "lab -l --bail",
     "postinstall": "npm run build",
     "kill": "sudo kill -9 $(sudo lsof -t -i:3000)",

server/plugins/router.js

@@ -1,5 +1,6 @@
 const routes = [].concat(
   require('../routes/defra-map'),
+  require('../routes/about-map'),
   require('../routes/triage'),
   require('../routes/defra-map/map-config'),
   require('../routes/defra-map/styles'),

server/routes/about-map.js

@@ -0,0 +1,17 @@
+module.exports = [
+  {
+    method: 'GET',
+    path: '/about-map',
+    options: {
+      description: 'About Map Page',
+      handler: async (request, h) => {
+        const cookies = request.state
+        const skipAboutMapPage = (cookies['Skip-changes-to-flood-data'] === 'true')
+        if (skipAboutMapPage) {
+          return h.redirect('/map')
+        }
+        return h.view('about-map')
+      }
+    }
+  }
+]

server/routes/about-map.spec.js

@@ -0,0 +1,49 @@
+const createServer = require('../../server')
+
+describe('About Map Page', () => {
+  const values = { server: undefined }
+
+  beforeAll(async () => {
+    values.server = await createServer()
+    await values.server.initialize()
+    values.response = await values.server.inject({ method: 'GET', url: '/about-map' })
+    document.body.innerHTML = values.response.payload
+    require('../../client/js/modules/about-map')
+  })
+
+  afterAll(async () => {
+    await values.server.stop()
+  })
+
+  it('should respond with 200', async () => {
+    expect(values.response.statusCode).toBe(200)
+  })
+
+  it('should have the heading "Changes to flood data"', async () => {
+    const heading = document.querySelector('.govuk-heading-xl')
+    expect(heading.textContent).toBe('Changes to flood data')
+  })
+
+  it('should not have any cookies set', async () => {
+    expect(document.cookie).toBe('')
+  })
+
+  it('should toggle Skip-changes-to-flood-data cookie if dont-show-again is clicked', async () => {
+    const dontShowAgain = document.getElementById('dont-show-again')
+    dontShowAgain.click()
+    expect(document.cookie).toBe('Skip-changes-to-flood-data=true')
+    dontShowAgain.click()
+    expect(document.cookie).toBe('')
+  })
+
+  it('should redirect to /map if Skip-changes-to-flood-data cookie is set to true ', async () => {
+    const headers = { cookie: 'Skip-changes-to-flood-data=true;' }
+    const response = await values.server.inject({
+      method: 'GET',
+      url: '/about-map',
+      headers
+    })
+    expect(response.statusCode).toBe(302)
+    expect(response.headers.location).toBe('/map')
+  })
+})

server/routes/triage.spec.js

@@ -1,5 +1,4 @@
 const createServer = require('../../server')
-const { assignClickEvents } = require('../../client/js/triage')
 
 describe('Triage Page', () => {
   let server
@@ -14,7 +13,7 @@ describe('Triage Page', () => {
       continue: document.getElementById('continue-button')
     })
     // We have to assignClickEvents here as they dont get assigned by assigning innerHTML
-    assignClickEvents(document)
+    require('../../client/js/modules/triage')
   })
 
   afterAll(async () => {

server/views/about-map.html

@@ -0,0 +1,188 @@
+{% extends "layout.html" %}
+{% from "summary-list/macro.njk" import govukSummaryList %}
+
+
+{% block pageTitle %}
+What flood information do you need? Flood map for planning - GOV.UK
+{% endblock %}
+
+{% block content %}
+{{ super() }}
+
+<div class="govuk-grid-row">
+  <div class="govuk-grid-column-full">
+
+    <h1 class="govuk-heading-xl">Changes to flood data</h1>
+
+    <p class="govuk-body">
+      This service now includes data from the new national flood risk assessment (NaFRA2).
+    </p>
+
+    <p class="govuk-body">
+      We have updated flood zones 2 and 3 to include local, detailed models and a new, improved national model.
+    </p>
+
+    <p class="govuk-body">
+      <a href="https://www.gov.uk/guidance/updates-to-national-flood-and-coastal-erosion-risk-information"
+        class="govuk-link" govuk-!-margin-top-7 govuk-!-margin-bottom-8">
+        See updates to national flood and coastal erosion risk information
+      </a>. 
+    </p>
+  </div>
+
+  <div class="govuk-grid-column-full">
+
+    <div class="govuk-summary-card" id="rivers-sea">
+      <div class="govuk-summary-card__title-wrapper vlow">
+        <h4 class="govuk-summary-card__title">Rivers and the sea</h4>
+      </div>
+
+      <hr style="margin: 0;" class="govuk-section-break govuk-section-break--m govuk-section-break--visible">
+
+      <div class="govuk-summary-card__title-wrapper vlow">
+        <h4 class="govuk-summary-card__title">Present day</h4>
+      </div>
+
+      <div class="govuk-summary-card__content">
+        <dl class="govuk-summary-list">
+
+          <div class="govuk-summary-list__row">
+            <dt class="govuk-summary-list__key"> Defended </dt>
+            <dd class="govuk-summary-list__value">
+              <ul class="govuk-list govuk-list--bullet">
+                <li> 3.3% AEP </li>
+                <li> 1% fluvial and 0.5% tidal AEP </li>
+                <li> 0.1% AEP </li>
+              </ul>
+            </dd>
+          </div>
+
+          <div class="govuk-summary-list__row">
+            <dt class="govuk-summary-list__key">
+              <h3 class="govuk-heading-s"> Undefended </h3>
+            </dt>
+            <dd class="govuk-summary-list__value">
+              <ul class="govuk-list govuk-list--bullet">
+                <li> 1% fluvial and 0.5% tidal AEP </li>
+                <li> 0.1% AEP </li>
+              </ul>
+            </dd>
+          </div>
+        </dl>
+      </div>
+
+      <hr style="margin: 0;" class="govuk-section-break govuk-section-break--m govuk-section-break--visible">
+
+      <div class="govuk-summary-card__title-wrapper vlow">
+        <h4 class="govuk-summary-card__title"> Climate change </h4>
+      </div>
+      <div class="govuk-summary-card__content">
+        <dl class="govuk-summary-list">
+
+          <div class="govuk-summary-list__row">
+            <dt class="govuk-summary-list__key"> Defended </dt>
+            <dd class="govuk-summary-list__value">
+              <ul class="govuk-list govuk-list--bullet">
+                <li> 3.3% AEP </li>
+                <li> 1% fluvial and 0.5% tidal AEP </li>
+                <li> 0.1% AEP </li>
+              </ul>
+            </dd>
+          </div>
+          <div class="govuk-summary-list__row">
+            <dt class="govuk-summary-list__key">
+              <h3 class="govuk-heading-s"> Undefended </h3>
+            </dt>
+            <dd class="govuk-summary-list__value">
+              <ul class="govuk-list govuk-list--bullet">
+                <li>
+                  1% fluvial and 0.5% tidal AEP
+                </li>
+                <li>
+                  0.1% AEP
+                </li>
+              </ul>
+            </dd>
+          </div>
+          <div class="govuk-summary-list__row">
+            <dt class="govuk-summary-list__key">
+              Allowances
+            </dt>
+            <dd class="govuk-summary-list__value">
+              <ul class="govuk-list govuk-list--bullet">
+                <li>the allowances used have been chosen from the Environment Agency’s <a
+                    href="https://www.gov.uk/guidance/flood-risk-assessments-climate-change-allowances">Flood risk
+                    assessment: climate change allowances</a>
+                </li>
+                <li>for river flooding we have used the ‘central’ allowance – based on the 50th percentile for the
+                  2080s epoch</li>
+                <li>for sea and tidal flooding we have used the ‘upper end’ allowance – based on the 95th percentile
+                  for 2125</li>
+              </ul>
+            </dd>
+          </div>
+        </dl>
+      </div>
+    </div>
+
+    <div class="govuk-summary-card" id="surface-water">
+      <div class="govuk-summary-card__title-wrapper vlow">
+        <h4 class="govuk-summary-card__title">Surface water</h4>
+      </div>
+      <div class="govuk-summary-card__content">
+        <dl class="govuk-summary-list">
+
+          <div class="govuk-summary-list__row">
+            <dt class="govuk-summary-list__key">
+              Present day
+            </dt>
+            <dd class="govuk-summary-list__value">
+              <ul class="govuk-list govuk-list--bullet">
+                <li> 3.3% AEP </li>
+                <li> 1% AEP </li>
+                <li> 0.1% AEP </li>
+              </ul>
+            </dd>
+          </div>
+        </dl>
+      </div>
+
+    </div>
+
+    <div class="govuk-grid-row">
+
+      <div class="govuk-grid-column-three-quarters">
+
+        <div class="govuk-form-group">
+          <fieldset class="govuk-fieldset" aria-describedby="skip-next-time">
+            <div class="govuk-checkboxes" data-module="govuk-checkboxes">
+              <div class="govuk-checkboxes__item">
+                <input class="govuk-checkboxes__input" id="dont-show-again" name="dont-show-again" type="checkbox">
+                <label class="govuk-label govuk-checkboxes__label" for="dont-show-again">
+                  Don't show me this information again for 30 days
+                </label>
+              </div>
+            </div>
+          </fieldset>
+        </div>
+
+        <a href="/map" role="button" draggable="false"
+          class="govuk-button govuk-!-margin-top-2 govuk-!-margin-bottom-8 govuk-button--start"
+          data-module="govuk-button">
+          Continue
+          <svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19"
+            viewBox="0 0 33 40" role="presentation" focusable="false">
+            <path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z"></path>
+          </svg>
+
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
+
+{% endblock %}
+{% block bodyEnd %}
+  {{ super() }}
+  <script type="module" src="{{assetPath}}/javascripts/about-map.js"></script>
+{% endblock %}

server/views/cookies.html

@@ -54,6 +54,13 @@ <h2 class="govuk-heading-m">Essential cookies</h2>
             <td class="govuk-table__cell"> Saves your cookie consent settings </td>
             <td class="govuk-table__cell"> 1 year </td>
           </tr>
+
+          <tr class="govuk-table__row">
+            <th scope="row" class="govuk-table__header"> Skip-changes-to-flood-data </th>
+            <td class="govuk-table__cell"> Allows users to skip the 'Changes to flood data page' </td>
+            <td class="govuk-table__cell"> 30 days </td>
+          </tr>
+
         </tbody>
       </table>
       <h2 class="govuk-heading-m">Analytics cookies (optional)</h2>