Merge pull request #212 from UKGovernmentBEIS/SPL-283

SPL 281/282/283 and misc updates

README.md

@@ -4,6 +4,9 @@ This repository contains the code for the Shared Parental Leave (SPL) and Stauto
 
 It is built on top of the [BEIS SPL common](https://github.com/UKGovernmentBEIS/beis-spl-common) baseline project, which in turn is forked from the [GDS Node.js boilerplate](https://github.com/alphagov/gds-nodejs-boilerplate) project.
 
+## Architecture
+The application is is purely frontend. There is no backend, no database. An example architecture diagram can be seen in the root folder.
+
 ## Getting started on development
 
 ### Installs

app/assets/javascripts/components/PrintYourPlan.vue

@@ -10,6 +10,7 @@
             data-ga-field-event_action="print_page"
           >
       print your plan</a>.
+      Save or print the plan as a PDF by selecting the PDF option in the print view.
     </p>
   </div>
 </template>

app/constants.js

@@ -1,4 +1,4 @@
 module.exports = {
   SERVICE_NAME: 'Plan shared parental leave and pay',
-  STATUTORY_MAXIMUM_PAY: 156.66
+  STATUTORY_MAXIMUM_PAY: 172.48
 }

app/filters.js

@@ -52,6 +52,11 @@ module.exports = function (env) {
     return '£' + ((primaryPay || 0) + (secondaryPay || 0)).toFixed(2)
   }
 
+  function numberAsString (block) {
+    var weekCount = block.end - block.start + 1
+    return weekCount.toString()
+  }
+
   function displayPayBlockTotal (data) {
     const eligibility = parseEligibilityFromData(data)
     return eligibility.primary.statutoryPay && // Cannot get exact value for Maternity Allowance.
@@ -175,6 +180,7 @@ module.exports = function (env) {
     startDateName,
     hasEitherSalary,
     totalBlockPay,
+    numberAsString,
     displayPayBlockTotal,
     shouldDisplayPrimaryLeaveAndPayForm,
     shouldDisplayPrimaryCurtailmentForm,

app/lib/weeks.js

@@ -210,7 +210,7 @@ class Weeks {
 
   _formatPay (pay) {
     const payAsFloat = parseFloat(pay)
-    return isNaN(payAsFloat) ? pay : '£' + payAsFloat.toFixed(2)
+    return isNaN(payAsFloat) ? pay : ('£' + (+payAsFloat.toFixed(2)).toLocaleString('en-US'))
   }
 }
 

app/paths.js

@@ -261,10 +261,6 @@ class Paths {
         workFlowPage: false,
         url: '/cookies'
       },
-      'contact-us': {
-        workFlowPage: false,
-        url: '/contact-us'
-      },
       accessibilityStatement: {
         workFlowPage: false,
         url: '/accessibility-statement'

app/router.js

@@ -334,6 +334,9 @@ router.route(paths.getPath('feedback'))
     res.render('feedback/feedback', { referrer })
   })
   .post(function (req, res) {
+    if (!validate.feedback(req)) {
+      return res.redirect(req.path)
+    }
     const experience = req.body.feedback
     const moreDetail = req.body['feedback-more-detail']
     nodeEmail(experience, moreDetail)
@@ -346,12 +349,6 @@ router.route(paths.getPath('cookies'))
     res.render('privacy/cookies', { referrer })
   })
 
-router.route(paths.getPath('contact-us'))
-  .get(function (req, res) {
-    const referrer = req.header('Referrer')
-    res.render('feedback/contact-us', { referrer })
-  })
-
 router.route(paths.getPath('accessibilityStatement'))
   .get(function (req, res) {
     const referrer = req.header('Referrer')

app/validate.js

@@ -128,6 +128,25 @@ function startDate (req) {
   return true
 }
 
+function feedback (req) {
+  var valid = true
+  if (!req.session.data['feedback']) {
+    addError(req, 'feedback', 'Provide your experience with the service.', '#feedback')
+    valid = false
+  }
+
+  var value = req.session.data['spam-filter'].toLowerCase()
+  if (!value.length) {
+    addError(req, 'spam-filter', 'Prove you are not a robot.', '#spam-filter')
+    valid = false
+  } else if (value !== 'yes' && value !== 'yes.') {
+    addError(req, 'spam-filter', 'The value you entered was incorrect. Please try again.', '#spam-filter')
+    valid = false
+  }
+
+  return valid
+}
+
 function addStartDateError (req, message, dateParts) {
   const href = `#start-date-${dateParts[0]}`
   addError(req, 'start-date', message, href, { dateParts })
@@ -377,5 +396,6 @@ module.exports = {
   parentSalaries,
   planner,
   paternityLeaveQuestion,
-  splQuestions
+  splQuestions,
+  feedback
 }

app/views/components/summary-tab-footer.njk

@@ -5,7 +5,10 @@
 <div id="{{ options.shareLinkId }}">
   {# JavaScript enhanced share link component. See /app/assets/javascripts/summary.js and associated Vue components. #}
 </div>
-
+<span class="govuk-heading-m">Print your summary</span>
+<p>
+  Save or print this summary as a PDF by selecting the PDF option in the 'Print this summary' view.
+</p>
   {{ govukButton({
     text: "Print this summary",
     type: "button",

app/views/eligibility/maternity-allowance.njk

@@ -4,7 +4,6 @@
 {% from "hidden-fields/macro.njk" import appendHiddenFields %}
 {% from "button/macro.njk" import govukButton %}
 {% from "macro.njk" import pushToGoogleAnalyticsDataLayer %}
-{% from "../components/get-help.njk" import getHelp %}
 
 {% extends "layout.njk" %}
 
@@ -72,8 +71,6 @@
           text: "Continue"
         }) }}
       </form>
-
-      {{ getHelp() }}
     </div>
   </div>
 {% endblock %}

app/views/eligibility/paternity-leave-and-pay.njk

@@ -4,7 +4,6 @@
 {% from "hidden-fields/macro.njk" import appendHiddenFields %}
 {% from "button/macro.njk" import govukButton %}
 {% from "macro.njk" import pushToGoogleAnalyticsDataLayer %}
-{% from "../components/get-help.njk" import getHelp %}
 
 {% extends "layout.njk" %}
 
@@ -111,8 +110,6 @@
           text: "Continue"
         }) }}
       </form>
-
-      {{ getHelp() }}
     </div>
   </div>
 {% endblock %}

app/views/eligibility/primary-initial-leave-and-pay.njk

@@ -4,7 +4,6 @@
 {% from "hidden-fields/macro.njk" import appendHiddenFields %}
 {% from "button/macro.njk" import govukButton %}
 {% from "macro.njk" import pushToGoogleAnalyticsDataLayer %}
-{% from "../components/get-help.njk" import getHelp %}
 
 {% extends "layout.njk" %}
 
@@ -113,8 +112,6 @@
           text: "Continue"
         }) }}
       </form>
-
-      {{ getHelp() }}
     </div>
   </div>
 {% endblock %}

app/views/eligibility/primary-shared-parental-leave-and-pay.njk

@@ -4,7 +4,6 @@
 {% from "hidden-fields/macro.njk" import appendHiddenFields %}
 {% from "button/macro.njk" import govukButton %}
 {% from "macro.njk" import pushToGoogleAnalyticsDataLayer %}
-{% from "../components/get-help.njk" import getHelp %}
 
 {% extends "layout.njk" %}
 
@@ -107,8 +106,6 @@
           text: "Continue"
         }) }}
       </form>
-
-      {{ getHelp() }}
     </div>
   </div>
 {% endblock %}

app/views/eligibility/secondary-shared-parental-leave-and-pay.njk

@@ -4,7 +4,6 @@
 {% from "hidden-fields/macro.njk" import appendHiddenFields %}
 {% from "button/macro.njk" import govukButton %}
 {% from "macro.njk" import pushToGoogleAnalyticsDataLayer %}
-{% from "../components/get-help.njk" import getHelp %}
 
 {% extends "layout.njk" %}
 
@@ -107,8 +106,6 @@
           text: "Continue"
         }) }}
       </form>
-
-      {{ getHelp() }}
     </div>
   </div>
 {% endblock %}

app/views/feedback/feedback.njk

@@ -2,6 +2,9 @@
 {% from "radios/macro.njk" import govukRadios %}
 {% from "character-count/macro.njk" import govukCharacterCount %}
 {% from "button/macro.njk" import govukButton %}
+{% from "input/macro.njk" import govukInput %}
+{% from "error-summary/macro.njk" import govukErrorSummary %}
+{% from "macro.njk" import pushToGoogleAnalyticsDataLayer %}
 
 {% extends "layout.njk" %}
 
@@ -19,6 +22,16 @@
 {% endblock %}
 
 {% block content %}
+  {% if errors["spam-filter"] %}
+    {{ govukErrorSummary({
+      titleText: "There is a problem",
+      errorList: [
+        errors["spam-filter"],
+        errors["feedback"]
+      ]
+    }) }}
+    {{ pushToGoogleAnalyticsDataLayer("error_msg", errors["spam-filter"].text, "Errorshown") }}
+  {% endif %}
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds-from-desktop">
       <h1 class="govuk-heading-l">
@@ -39,25 +52,33 @@
           items: [
             {
               value: "very satisfactory",
-              text: "Very Satisfactory"
+              text: "Very Satisfactory",
+              checked: data | feedbackExperience("very satisfactory")
             },
             {
               value: "satisfactory",
-              text: "Satisfactory"
+              text: "Satisfactory",
+              checked: data | feedbackExperience("satisfactory")
             },
             {
               value: "neither satisfactory or dissatisfactory",
-              text: "Neither Satisfactory or Dissatisfactory"
+              text: "Neither Satisfactory or Dissatisfactory",
+              checked: data | feedbackExperience("neither satisfactory or dissatisfactory")
             },
             {
               value: "dissatisfactory",
-              text: "Dissatisfactory"
+              text: "Dissatisfactory",
+              checked: data | feedbackExperience("dissatisfactory")
             },
             {
               value: "very dissatisfactory",
-              text: "Very Dissatisfactory"
+              text: "Very Dissatisfactory",
+              checked: data | feedbackExperience("very dissatisfactory")
             }
-          ]
+          ],
+          errorMessage: {
+              text: errors["feedback"].text
+          } if errors["feedback"]
         }) }}
 
         {{ govukCharacterCount({
@@ -73,6 +94,21 @@
             isPageHeading: true
           }
         }) }}
+
+        {{ govukInput({
+          id: "spam-filter",
+          name: "spam-filter",
+          value: data["spam-filter"],
+          label: {
+            text: "To prove you are not a robot, please type YES.",
+            classes: "govuk-label--m",
+            isPageHeading: true
+          },
+          errorMessage: {
+              text: errors["spam-filter"].text
+          } if errors["spam-filter"]
+        }) }}
+
         {{ govukButton({
           text: "Send Feedback",
           preventDoubleClick: true

app/views/includes/head.njk

@@ -13,12 +13,14 @@ dataLayer = [];
 </script>
 <!-- Google Tag Manager -->
 {% if cmUserPreferences['analytics'] === 'on' %}
+<script async src="https://www.googletagmanager.com/gtag/js?id={{ GOOGLE_ANALYTICS_ID }}"></script>
 <script>
-  (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
-      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
-    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
-    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-  })(window,document,'script','dataLayer','{{ GOOGLE_ANALYTICS_ID }}');
+  window.dataLayer = window.dataLayer || [];
+  function gtag () {
+    dataLayer.push(arguments);
+  }
+  gtag('js', new Date());
+  gtag('config', '{{ GOOGLE_ANALYTICS_ID }}');
 </script>
 {% endif %}
 <!-- End Google Tag Manager -->

app/views/layout.njk

@@ -9,14 +9,13 @@
 {% endblock %}
 
 {% block header %}
-{% include "./includes/ga.njk" %}
   <div class="govuk-width-container">
-    <header id="cookie_banner" class="cookie-banner accepted">
+    <header id="cookie_banner" class="cookie-banner">
       <h1 class="govuk-heading-l">Tell us whether you accept cookies</h1>
       <p>We use <a href="/cookies">cookies to collect information</a> about how you use the {{
         service_name }} service. We use this information to make the website work as well as
         possible and improve government services.</p>
-      <button type="submit" class="govuk-button">Accept all cookies</button>
+      <button value="accept" type="button" name="cookies" class="govuk-button">Accept all cookies</button>
       <a class="govuk-button" href="/cookies">Set cookie preferences</a>
     </header>
     <header class="cookie-banner js-hide">
@@ -59,10 +58,6 @@
             href: "/feedback",
             text: 'Feedback'
           },
-          {
-            href: "/contact-us",
-            text: 'Contact us'
-          },
           {
             href: "/accessibility-statement",
             text: 'Accessibility statement'

app/views/nature-of-parenthood.njk

@@ -4,7 +4,6 @@
 {% from "hidden-fields/macro.njk" import appendHiddenFields %}
 {% from "button/macro.njk" import govukButton %}
 {% from "macro.njk" import pushToGoogleAnalyticsDataLayer %}
-{% from "../views/components/get-help.njk" import getHelp %}
 
 {% extends "layout.njk" %}
 
@@ -81,8 +80,6 @@
           }
         }) }}
       </form>
-
-      {{ getHelp() }}
     </div>
   </div>
 {% endblock %}