BRP-71 - Fixed the way we handle field truncation

apps/correct-mistakes/behaviours/about-error.js

@@ -2,18 +2,26 @@
 'use strict';
 
 const _ = require('underscore');
+const fields = require('../translations/src/en/fields.json');
+const pages = require('../translations/src/en/pages.json');
 
 const truncateConfigs = [
   {
     id: 'first-name-error',
+    prettyName: fields['first-name-error-checkbox'].label,
+    translations: pages['exit-truncated']['first-name'],
     max: 30
   },
   {
     id: 'last-name-error',
+    prettyName: fields['last-name-error-checkbox'].label,
+    translations: pages['exit-truncated']['last-name'],
     max: 30
   },
   {
     id: 'birth-place-error',
+    prettyName: fields['birth-place-error-checkbox'].label,
+    translations: pages['exit-truncated']['birth-place'],
     max: 16
   }
 ];
@@ -34,7 +42,7 @@ function getTruncatedItems(req) {
 
   truncateConfigs.forEach(config => {
     if (isTooLong.call(this, config.id, config.max, req)) {
-      items.unshift({id: config.id});
+      items.unshift({id: config.id, max: config.max, prettyName: config.prettyName, translations: config.translations});
     }
   });
   return items;
@@ -77,6 +85,15 @@ module.exports = superclass => class AboutError extends superclass {
 
     req.sessionModel.unset(diff);
 
+    // Regardless of whether we are truncating these fields
+    // We still need to store them against the appropriate "-truncated" property for our confirm page
+    truncateConfigs.forEach(config => {
+      req.sessionModel.set(
+        config.id + '-truncated',
+        req.form.values[config.id] ? req.form.values[config.id].slice(0, config.max) : ''
+      );
+    });
+
     super.saveValues(req, res, callback);
   }
 

apps/correct-mistakes/behaviours/truncated.js

@@ -10,6 +10,8 @@ function getTruncatedItems(req) {
 }
 
 function truncatedItem(req) {
+  // Gets the first truncated item that has not yet been shown to the user
+  // If the value is set, we have warned the user about the truncation
   const itemOne = getTruncatedItems(req).filter(item => {
     return item.value === undefined;
   })[0];
@@ -20,12 +22,16 @@ function truncatedItem(req) {
       pretty: prettyName(itemOne.id),
       value: req.form.values[itemOne.id],
       length: req.form.values[itemOne.id].length,
-      slice: req.form.values[itemOne.id].slice(0, 30)
+      slice: req.form.values[itemOne.id].slice(0, itemOne.max),
+      max: itemOne.max
     };
   }
 }
 
 function updateTruncatedItems(req) {
+  // Called once the user confirms if their BRP shows the correctly truncated value
+  // Will update our session to show that we have informed the user that it should be truncated
+  // This is so we don't show this truncated item warning again
   const values = req.form.values;
   let items = getTruncatedItems(req);
 
@@ -55,17 +61,40 @@ module.exports = superclass => class Truncated extends superclass {
   }
 
   saveValues(req, res, next) {
+    // We've shown the user a truncated item warning and they've confirmed how it appears on their BRP
     updateTruncatedItems(req);
 
+    // Have we warned the user about all truncated items?
     if (identity(req, true, 'yes') === true) {
+      // Yes, show the exit-truncation page
+      // Set our data for the template
+      const truncatedDetail = getTruncatedItems(req).map(item => {
+        return {
+          id: item.id,
+          prettyName: item.prettyName,
+          max: item.max,
+          translations: item.translations
+        };
+      });
+      req.sessionModel.set('truncatedDetail', truncatedDetail);
+
       req.form.options.next = '/exit-truncated';
+    } else {
+      // We need to store the truncated value in session so we can display the truncated value on the confirmation page
+      getTruncatedItems(req).forEach(item => {
+        req.sessionModel.set(item.id + '-truncated', req.form.historicalValues[item.id].slice(0, item.max));
+      });
     }
 
+    // Have we got any truncated items at all?
     if (identity(req, false, 'no') === true) {
+      // No we don't, so continue down the happy path
       req.form.options.next = '/uk-address';
     }
 
+    // Do we still have truncated items that we need to warn the user about?
     if (identity(req, false, undefined) === true) {
+      // Yes we do, loop back to the truncated page
       req.form.options.next = '/truncated';
     }
 

apps/correct-mistakes/translations/src/en/fields.json

@@ -63,20 +63,23 @@
   },
   "last-name-error": {
     "label": "What is your correct family name?",
-    "title": "This is the first line under 'name' on your BRP."
+    "title": "This is the first line under 'name' on your BRP.",
+    "hint": "Due to limitations, we can only print the first 30 characters of your Family Name on your BRP. This is not an error and you will be able to use your BRP."
   },
   "first-name-error-checkbox": {
     "label": "Given name(s)"
   },
   "first-name-error": {
     "label": "What are your correct given name(s)?",
-    "title": "This is the second line under 'name' on your BRP."
+    "title": "This is the second line under 'name' on your BRP.",
+    "hint": "Due to limitations, we can only print the first 30 characters of your Given Name(s) on your BRP. This is not an error and you will be able to use your BRP."
   },
   "birth-place-error-checkbox": {
     "label": "Place of birth"
   },
   "birth-place-error": {
-    "label": "What is your correct place of birth?"
+    "label": "What is your correct place of birth?",
+    "hint": "Due to limitations, we can only print the first 16 characters of your Place of Birth on your BRP. This is not an error and you will be able to use your BRP."
   },
   "date-of-birth-error-checkbox": {
     "label": "Date of birth"

apps/correct-mistakes/translations/src/en/pages.json

@@ -52,6 +52,7 @@
   "check-details-error": {
     "header": "Check the details you have provided",
     "subheader": "If any information is incorrect, you can change it here.",
+    "limitations-info": "Due to limitations, we can only print the first 16 characters of your Place of Birth and the first 30 characters of your Given Name(s) and Family Name on your BRP.",
     "corrected-details-table": {
       "title": "Corrected BRP details"
     },
@@ -97,7 +98,7 @@
     }
   },
   "truncated": {
-    "header": "Long names on BRPs",
+    "header": "Long names and places of birth on BRPs",
     "paras": {
       "one": {
         "parts": {
@@ -109,22 +110,43 @@
         "parts": {
           "one": "Your",
           "two": "has",
-          "three": "letters. Your BRP can only show a maximum of 30 letters, so it is shortened to this on your BRP:"
+          "three": "letters. Your BRP can only show a maximum of ",
+          "four": " letters, so it is shortened to this on your BRP:"
         }
       },
       "three": {
         "parts": {
-          "one": "Is this how it looks on your BRP?"
+          "one": "Is this how it looks on the BRP you've received?"
         }
       }
     },
     "reason-no": "Continue using this service. At the end you can check the spelling of your name, and we shall send you a replacement BRP"
   },
   "exit-truncated": {
-    "paras": {
-      "one": "Due to limitations, we can only print the first 30 characters of your name on your BRP.",
-      "two": "This is not an error and you will be able to use your BRP.",
-      "three": "You do not need to do anything else."
+    "title": "Please note the following information regarding the fields you have selected:",
+    "first-name": {
+      "paras": {
+        "one": "Due to limitations, we can only print the first ",
+        "two": " characters of your name on your BRP.",
+        "three": "This is not an error and you will be able to use your BRP.",
+        "four": "You do not need to do anything else."
+      }
+    },
+    "last-name": {
+      "paras": {
+        "one": "Due to limitations, we can only print the first ",
+        "two": " characters of your name on your BRP.",
+        "three": "This is not an error and you will be able to use your BRP.",
+        "four": "You do not need to do anything else."
+      }
+    },
+    "birth-place": {
+      "paras": {
+        "one": "Due to limitations, we can only print the first ",
+        "two": " characters of your birth place on your BRP.",
+        "three": "This is not an error and you will be able to use your BRP.",
+        "four": "You do not need to do anything else."
+      }
     }
   }
 }

apps/correct-mistakes/views/confirm.html

@@ -27,19 +27,20 @@
 
 {{$content}}
   <p>{{#t}}pages.check-details-error.subheader{{/t}}</p>
-
+  <p>{{#t}}pages.check-details-error.limitations-info{{/t}}</p>
+
   {{<partials-form}}
 
     {{$form}}
-
+    
       <h2 class="details-header">{{#t}}pages.check-details-error.corrected-details-table.title{{/t}}</h2>
       <table id="check-details" class="table-details">
         <tbody>
         {{#values.first-name-error}}
           <tr>
             <td>{{#t}}fields.first-name-error-checkbox.label{{/t}}</td>
             <td>
-              {{values.first-name-error}}
+              {{values.first-name-error-truncated}}
             </td>
             <td><a href="about-error/edit#first-name-error" class="button">{{#t}}buttons.change.first-name-error{{/t}}</a></td>
           </tr>
@@ -49,7 +50,7 @@ <h2 class="details-header">{{#t}}pages.check-details-error.corrected-details-tab
           <tr>
             <td>{{#t}}fields.last-name-error-checkbox.label{{/t}}</td>
             <td>
-              {{values.last-name-error}}
+              {{values.last-name-error-truncated}}
             </td>
             <td><a href="about-error/edit#last-name-error" class="button">{{#t}}buttons.change.last-name-error{{/t}}</a></td>
           </tr>
@@ -59,7 +60,7 @@ <h2 class="details-header">{{#t}}pages.check-details-error.corrected-details-tab
           <tr>
             <td>{{#t}}fields.birth-place-error-checkbox.label{{/t}}</td>
             <td>
-              {{values.birth-place-error}}
+              {{values.birth-place-error-truncated}}
             </td>
             <td><a href="about-error/edit#birth-place-error" class="button">{{#t}}buttons.change.birth-place-error{{/t}}</a></td>
           </tr>

apps/correct-mistakes/views/exit-truncated.html

@@ -21,13 +21,18 @@
   {{/header}}
 
   {{$content}}
+    <p>{{#t}}pages.exit-truncated.title{{/t}}</p>
 
-    <p>{{#t}}pages.exit-truncated.paras.one{{/t}}</p>
+    {{#values.truncatedDetail}}
+      <p><strong>{{prettyName}}</strong></p>
+
+      <p>{{translations.paras.one}}{{max}}{{translations.paras.two}}</p>
 
-    <p>{{#t}}pages.exit-truncated.paras.two{{/t}}</p>
-
-    <p>{{#t}}pages.exit-truncated.paras.three{{/t}}</p>
+      <p>{{translations.paras.three}}</p>
 
+      <p>{{translations.paras.four}}</p>
+    {{/values.truncatedDetail}}
+
     <a href='https://www.gov.uk/done/brp-report-problem' class='button'>{{#t}}buttons.close{{/t}}</a>
 
   {{/content}}

apps/correct-mistakes/views/truncated.html

@@ -26,7 +26,7 @@
 
     <p><strong>{{truncatedItem.value}}</strong></p>
 
-    <p>{{#t}}pages.truncated.paras.two.parts.one{{/t}} {{truncatedItem.pretty}} {{#t}}pages.truncated.paras.two.parts.two{{/t}} {{truncatedItem.length}} {{#t}}pages.truncated.paras.two.parts.three{{/t}}</p>
+    <p>{{#t}}pages.truncated.paras.two.parts.one{{/t}} {{truncatedItem.pretty}} {{#t}}pages.truncated.paras.two.parts.two{{/t}} {{truncatedItem.length}} {{#t}}pages.truncated.paras.two.parts.three{{/t}}{{truncatedItem.max}}{{#t}}pages.truncated.paras.two.parts.four{{/t}}</p>
 
     <p><strong>{{truncatedItem.slice}}</strong></p>
 

package.json

@@ -24,7 +24,7 @@
   "author": "HomeOffice",
   "dependencies": {
     "express": "^4.17.1",
-    "hof": "^19.14.15",
+    "hof": "^19.14.17",
     "hogan.js": "^3.0.2",
     "hot-shots": "^5.9.0",
     "i18n-future": "^2.0.1",

services/email/templates/caseworker/html/error.mus

@@ -122,20 +122,38 @@
                   <p style="font-size: 19px; font-weight: bold; color: #000; line-height: 1.32; margin: 0 0 10px 0;">Reported errors</p>
                   <table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#FFFFFF" style="margin: 0 0 20px 0;">
 
-                    <tr style="border-top: 1px solid #009390;">
-                      <td width="25%"><p style="font-size: 16px; color: #6f777b; margin: 10px 0;">{{#t}}fields.first-name-error-checkbox.label{{/t}}: </p></td>
-                      <td width="75%"><p style="font-size: 16px; color: #000; margin: 10px 0;">{{#first-name-error}}{{first-name-error}}{{/first-name-error}}{{^first-name-error}}None Given{{/first-name-error}}</p></td>
-                    </tr>
+                    {{#first-name-error}}
+                      <tr style="border-top: 1px solid #009390;">
+                        <td width="25%"><p style="font-size: 16px; color: #6f777b; margin: 10px 0;">{{#t}}fields.first-name-error-checkbox.label{{/t}}</p></td>
+                        <td width="75%"><p style="font-size: 16px; color: #000; margin: 10px 0;">{{first-name-error}}</p></td>
+                      </tr>
+                      <tr style="border-top: 1px solid #009390;">
+                        <td></td>
+                        <td width="75%"><p style="font-size: 16px; color: #000; margin: 10px 0;">This text will be truncated to: {{first-name-error-truncated}}</p></td>
+                      </tr>
+                    {{/first-name-error}}
 
-                    <tr style="border-top: 1px solid #009390;">
-                      <td width="25%"><p style="font-size: 16px; color: #6f777b; margin: 10px 0;">{{#t}}fields.last-name-error-checkbox.label{{/t}}: </p></td>
-                      <td width="75%"><p style="font-size: 16px; color: #000; margin: 10px 0;">{{#last-name-error}}{{last-name-error}}{{/last-name-error}}{{^last-name-error}}None Given{{/last-name-error}}</p></td>
-                    </tr>
+                    {{#last-name-error}}
+                      <tr style="border-top: 1px solid #009390;">
+                        <td width="25%"><p style="font-size: 16px; color: #6f777b; margin: 10px 0;">{{#t}}fields.last-name-error-checkbox.label{{/t}}</p></td>
+                        <td width="75%"><p style="font-size: 16px; color: #000; margin: 10px 0;">{{last-name-error}}</p></td>
+                      </tr>
+                      <tr style="border-top: 1px solid #009390;">
+                        <td></td>
+                        <td width="75%"><p style="font-size: 16px; color: #000; margin: 10px 0;">This text will be truncated to: {{last-name-error-truncated}}</p></td>
+                      </tr>
+                    {{/last-name-error}}
 
-                    <tr style="border-top: 1px solid #009390;">
-                      <td width="25%"><p style="font-size: 16px; color: #6f777b; margin: 10px 0;">{{#t}}fields.birth-place-error-checkbox.label{{/t}}: </p></td>
-                      <td width="75%"><p style="font-size: 16px; color: #000; margin: 10px 0;">{{#birth-place-error}}{{birth-place-error}}{{/birth-place-error}}{{^birth-place-error}}None Given{{/birth-place-error}}</p></td>
-                    </tr>
+                    {{#birth-place-error}}
+                      <tr style="border-top: 1px solid #009390;">
+                        <td width="25%"><p style="font-size: 16px; color: #6f777b; margin: 10px 0;">{{#t}}fields.birth-place-error-checkbox.label{{/t}}</p></td>
+                        <td width="75%"><p style="font-size: 16px; color: #000; margin: 10px 0;">{{birth-place-error}}</p></td>
+                      </tr>
+                      <tr style="border-top: 1px solid #009390;">
+                        <td></td>
+                        <td width="75%"><p style="font-size: 16px; color: #000; margin: 10px 0;">This text will be truncated to: {{birth-place-error-truncated}}</p></td>
+                      </tr>
+                    {{/birth-place-error}}
 
                     <tr style="border-top: 1px solid #009390;">
                       <td width="25%"><p style="font-size: 16px; color: #6f777b; margin: 10px 0;">{{#t}}fields.date-of-birth-error-checkbox.label{{/t}}: </p></td>

services/email/templates/caseworker/plain/error.mus

@@ -39,16 +39,19 @@
   {{#first-name-error}}
     {{#t}}fields.first-name-error-checkbox.label{{/t}}
     {{first-name-error}}
+    This text will be truncated to: {{first-name-error-truncated}}
   {{/first-name-error}}
 
   {{#last-name-error}}
     {{#t}}fields.last-name-error-checkbox.label{{/t}}
     {{last-name-error}}
+    This text will be truncated to: {{last-name-error-truncated}}
   {{/last-name-error}}
 
   {{#birth-place-error}}
     {{#t}}fields.birth-place-error-checkbox.label{{/t}}
     {{birth-place-error}}
+    This text will be truncated to: {{birth-place-error-truncated}}
   {{/birth-place-error}}
 
   {{#date-of-birth-error-day}}