BRP-58 Modified lost-stolen journey as per requirements

apps/collection/fields/index.js

@@ -97,10 +97,6 @@ module.exports = {
     label: 'fields.phone.label'
   },
   'contact-address-county': {
-    label: 'fields.address-county.label',
-    dependent: {
-      value: 'true',
-      field: 'use-address'
-    }
+    label: 'fields.address-county.label'
   }
 };

apps/collection/index.js

@@ -60,8 +60,8 @@ module.exports = {
     },
     '/contact-details': {
       fields: [
-        'email',
-        'use-address',
+        'has-email-radio',
+        'contact-details-email',
         'contact-address-house-number',
         'contact-address-street',
         'contact-address-town',

apps/collection/translations/src/en/fields.json

@@ -126,9 +126,6 @@
   "email": {
     "label": "Email address"
   },
-  "use-address": {
-    "label": "I want to be contacted by post"
-  },
   "phone": {
     "label": "Phone number (optional)"
   },

apps/collection/translations/src/en/pages.json

@@ -14,7 +14,7 @@
   "contact-details": {
     "header": "How should we contact you about your BRP?",
     "address": {
-      "title": "What address should we use to contact you by post?"
+      "title": "If you do not have an email address, what address should we use to contact you by post?"
     },
     "delay": "Asking to be contacted by post will add a further 2 days on to our response time. If you provide an email address we can get back to you sooner."
   },

apps/collection/views/confirm.html

@@ -145,7 +145,7 @@ <h2 class="details-header">{{#t}}journeys.collection.pages.check-details.tables.
             <td><a href="personal-details/edit#nationality" class="button">{{#t}}buttons.change.nationality{{/t}}</a></td>
           </tr>
           {{/values.nationality}}
-          {{#values.use-address}}
+          {{^values.contact-details-email}}
           {{#values.contact-address-street}}
             <tr>
               <td>{{#t}}pages.check-details.table.headers.contact-address{{/t}}</td>
@@ -158,21 +158,21 @@ <h2 class="details-header">{{#t}}journeys.collection.pages.check-details.tables.
               <td><a href="contact-details/edit#address-group" class="button">{{#t}}buttons.change.address{{/t}}</a></td>
             </tr>
           {{/values.contact-address-street}}
-          {{/values.use-address}}
+          {{/values.contact-details-email}}
           {{#values.passport}}
           <tr>
             <td>{{#t}}pages.check-details.table.headers.passport{{/t}}</td>
             <td>{{values.passport}}</td>
             <td><a href="personal-details/edit#passport" class="button">{{#t}}buttons.change.passport{{/t}}</a></td>
           </tr>
           {{/values.passport}}
-          {{#values.email}}
+          {{#values.contact-details-email}}
           <tr>
             <td>{{#t}}pages.check-details.table.headers.email{{/t}}</td>
-            <td>{{values.email}}</td>
+            <td>{{values.contact-details-email}}</td>
             <td><a href="contact-details/edit#email" class="button">{{#t}}buttons.change.email{{/t}}</a></td>
           </tr>
-          {{/values.email}}
+          {{/values.contact-details-email}}
           {{#values.phone}}
             <tr>
               <td>{{#t}}pages.check-details.table.headers.phone{{/t}}</td>

apps/collection/views/contact-details.html

@@ -30,13 +30,9 @@
   {{<partials-form}}
 
     {{$form}}
-
-      {{#input-text}}email{{/input-text}}
-
-      {{#input-phone}}phone{{/input-phone}}
-
-      {{#checkbox}}use-address{{/checkbox}}
-
+
+      {{#radio-group}}has-email-radio{{/radio-group}}
+
       <fieldset id="address-group" class="panel-indent js-hidden">
         <legend class="visuallyhidden">
             <span class="form-legend">
@@ -46,6 +42,15 @@
 
         <p>{{#t}}pages.contact-details.address.title{{/t}}</p>
 
+        <div class="notice">
+          <i class="icon icon-important">
+            <span class="visuallyhidden">Warning</span>
+          </i>
+          <strong class="bold-small">
+            {{#t}}pages.contact-details.delay{{/t}}
+          </strong>
+        </div>
+
         {{#input-text}}contact-address-house-number{{/input-text}}
 
         {{#input-text}}contact-address-street{{/input-text}}
@@ -56,17 +61,10 @@
 
         {{#input-text-code}}contact-address-postcode{{/input-text-code}}
 
-        <div class="notice">
-          <i class="icon icon-important">
-            <span class="visuallyhidden">Warning</span>
-          </i>
-          <strong class="bold-small">
-            {{#t}}pages.contact-details.delay{{/t}}
-          </strong>
-        </div>
-
       </fieldset>
 
+      {{#input-phone}}phone{{/input-phone}}
+
       {{#input-submit}}continue{{/input-submit}}
 
     {{/form}}

apps/common/fields/contact-details.js

@@ -1,39 +1,54 @@
 'use strict';
 
 module.exports = {
-  email: {
+  'contact-details-email': {
     validate: ['required', 'email'],
     type: 'email',
     dependent: {
-      value: '',
-      field: 'use-address'
+      value: 'true',
+      field: 'has-email-radio'
     }
   },
-  'use-address': {
-    toggle: 'address-group'
+  'has-email-radio': {
+    mixin: 'radio-group',
+    validate: ['required'],
+    className: ['form-group'],
+    legend: {
+      className: 'visuallyhidden'
+    },
+    options: [{
+      value: 'true',
+      toggle: 'contact-details-email',
+      label: 'Email Address',
+      child: 'partials/email-address'
+    }, {
+      value: 'false',
+      toggle: 'address-group',
+      label: 'I don\'t have an email address'
+    }]
   },
   'contact-address-house-number': {
     validate: ['required'],
     label: 'fields.address-house-number.label',
     dependent: {
-      value: 'true',
-      field: 'use-address'
+      value: 'false',
+      field: 'has-email-radio'
     }
   },
   'contact-address-street': {
     validate: ['required'],
     label: 'fields.address-street.label',
     dependent: {
-      value: 'true',
-      field: 'use-address'
+      value: 'false',
+      field: 'has-email-radio'
     }
   },
   'contact-address-town': {
     validate: ['required'],
     label: 'fields.address-town.label',
     dependent: {
-      value: 'true',
-      field: 'use-address'
+      value: 'false',
+      field: 'has-email-radio'
     }
   },
   'contact-address-county': {
@@ -43,8 +58,8 @@ module.exports = {
     validate: ['required'],
     label: 'fields.address-postcode.label',
     dependent: {
-      value: 'true',
-      field: 'use-address'
+      value: 'false',
+      field: 'has-email-radio'
     }
   }
 };

apps/common/translations/src/en/fields.json

@@ -52,5 +52,8 @@
         "label": "Support organisation"
       }
     }
+  },
+  "contact-details-email": {
+    "label": "Email Address"
   }
 }

apps/common/translations/src/en/validation.json

@@ -43,5 +43,12 @@
   "fullname": {
     "required": "Enter your full name",
     "notUrl": "Full name must not be a URL"
+  },
+  "has-email-radio": {
+    "required": "Please select an option"
+  },
+  "contact-details-email": {
+    "required": "An email address is required",
+    "email": "Enter the email in the correct format for example, [email protected]"
   }
 }

apps/common/views/partials/email-address.html

@@ -0,0 +1,5 @@
+<div id="{{toggle}}-panel" class="reveal" aria-hidden="false">
+  <div class="panel-indent">
+    {{#input-text}}{{toggle}}{{/input-text}}
+  </div>
+</div>

apps/correct-mistakes/acceptance/features/_happy-path.js

@@ -18,7 +18,6 @@ const values = {
   'damaged-error-checkbox': 'false',
   'conditions-error-checkbox': 'false',
   'letter-error-checkbox': 'false',
-  'use-address': 'true',
   'org-help': 'yes'
 };
 

apps/correct-mistakes/fields/uk-address.js

@@ -63,10 +63,6 @@ module.exports = {
     label: 'fields.phone.label'
   },
   'contact-address-county': {
-    label: 'fields.address-county.label',
-    dependent: {
-      value: 'true',
-      field: 'use-address'
-    }
+    label: 'fields.address-county.label'
   }
 };

apps/correct-mistakes/index.js

@@ -118,8 +118,8 @@ module.exports = {
     },
     '/contact-details': {
       fields: [
-        'email',
-        'use-address',
+        'has-email-radio',
+        'contact-details-email',
         'contact-address-house-number',
         'contact-address-street',
         'contact-address-town',

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

@@ -52,9 +52,6 @@
   "email": {
     "label": "Email address"
   },
-  "use-address": {
-    "label": "I want to be contacted by post"
-  },
   "phone": {
     "label": "Phone number (optional)"
   },

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

@@ -6,7 +6,7 @@
   "contact-details": {
     "header": "How should we contact you about your BRP?",
     "address": {
-      "title": "What address should we use to contact you by post?"
+      "title": "If you do not have an email address, what address should we use to contact you by post?"
     },
     "delay": "Asking to be contacted by post will add a further 2 days on to our response time. If you provide an email address we can get back to you sooner."
   },

apps/correct-mistakes/views/confirm.html

@@ -267,13 +267,13 @@ <h2 class="details-header">{{#t}}pages.check-details-error.personal-details-tabl
           <td><a href="personal-details/edit#brp-card" class="button">{{#t}}buttons.change.brp-card{{/t}}</a></td>
         </tr>
         {{/values.brp-card}}
-        {{#values.email}}
+        {{#values.contact-details-email}}
         <tr>
           <td>{{#t}}pages.check-details-error.personal-details-table.headers.email{{/t}}</td>
-          <td>{{values.email}}</td>
+          <td>{{values.contact-details-email}}</td>
           <td><a href="contact-details/edit#email" class="button">{{#t}}buttons.change.email{{/t}}</a></td>
         </tr>
-        {{/values.email}}
+        {{/values.contact-details-email}}
         {{#values.phone}}
           <tr>
             <td>{{#t}}pages.check-details.table.headers.phone{{/t}}</td>

apps/correct-mistakes/views/contact-details.html

@@ -31,11 +31,7 @@
 
     {{$form}}
 
-      {{#input-text}}email{{/input-text}}
-
-      {{#input-phone}}phone{{/input-phone}}
-
-      {{#checkbox}}use-address{{/checkbox}}
+      {{#radio-group}}has-email-radio{{/radio-group}}
 
       <fieldset id="address-group" class="panel-indent js-hidden">
         <legend class="visuallyhidden">
@@ -46,6 +42,15 @@
 
         <p>{{#t}}pages.contact-details.address.title{{/t}}</p>
 
+        <div class="notice">
+          <i class="icon icon-important">
+            <span class="visuallyhidden">Warning</span>
+          </i>
+          <strong class="bold-small">
+            {{#t}}pages.contact-details.delay{{/t}}
+          </strong>
+        </div>
+
         {{#input-text}}contact-address-house-number{{/input-text}}
 
         {{#input-text}}contact-address-street{{/input-text}}
@@ -56,17 +61,10 @@
 
         {{#input-text-code}}contact-address-postcode{{/input-text-code}}
 
-        <div class="notice">
-          <i class="icon icon-important">
-            <span class="visuallyhidden">Warning</span>
-          </i>
-          <strong class="bold-small">
-            {{#t}}pages.contact-details.delay{{/t}}
-          </strong>
-        </div>
-
       </fieldset>
 
+      {{#input-phone}}phone{{/input-phone}}
+
       {{#input-submit}}continue{{/input-submit}}
 
     {{/form}}

apps/lost-stolen/acceptance/features/_happy-path.js

@@ -5,7 +5,6 @@ Feature('Lost or Stolen - Happy path');
 
 const values = {
   'inside-uk': 'yes',
-  'use-address': 'true',
   'org-help': 'yes'
 };
 

apps/lost-stolen/acceptance/features/confirm/confirm.js

@@ -14,7 +14,6 @@ const values = {
   nationality: 'United Arab Emirates',
   'brp-card': '123',
   'phone:': '0123',
-  'use-address': 'true',
   'org-help': 'yes'
 };
 

apps/lost-stolen/fields/personal-details.js

@@ -31,10 +31,6 @@ module.exports = {
     label: 'fields.phone.label'
   },
   'contact-address-county': {
-    label: 'fields.address-county.label',
-    dependent: {
-      value: 'true',
-      field: 'use-address'
-    }
+    label: 'fields.address-county.label'
   }
 };

apps/lost-stolen/index.js

@@ -27,8 +27,8 @@ module.exports = {
     },
     '/contact-details': {
       fields: [
-        'email',
-        'use-address',
+        'has-email-radio',
+        'contact-details-email',
         'contact-address-house-number',
         'contact-address-street',
         'contact-address-town',