Update

address-service.js

@@ -11,15 +11,15 @@ async function findByPostcode (key, postcode) {
 
   const results = payload.results.map(item => item.DPA)
 
-  let addresses = results
+  const addresses = results
 
   return addresses
     .map(item => {
       return {
         uprn: item.UPRN,
         postcode: item.POSTCODE,
         address: item.ADDRESS,
-        item: item
+        item
       }
     })
 }

client/ukaddressfield.js

@@ -1,18 +1,18 @@
-var $components = document.querySelectorAll('.uk-address-component')
+const $components = document.querySelectorAll('.uk-address-component')
 
 $components.forEach(function (component) {
-  var form = component.parentNode.parentNode
-  var lookup = component.querySelector('.uk-address-lookup')
-  var manual = component.querySelector('.uk-address-manual')
-  var submitButton = form.querySelector('button[type=submit]')
-  var lookupQuery = form.querySelector('.uk-address-query')
-  var lookupSelector = form.querySelector('.uk-address-selector')
-  var postcode = lookupQuery.querySelector('input.postcode-query')
-  var lookupButton = lookupQuery.querySelector('button.postcode-lookup')
-  var postcodeDisplay = lookupSelector.querySelector('.postcode-query-display')
-  var selector = lookupSelector.querySelector('.uk-address-selector select')
-  var lookupLinks = form.querySelectorAll('.postcode-query-link')
-  var manualLink = form.querySelector('.postcode-manual-link')
+  const form = component.parentNode.parentNode
+  const lookup = component.querySelector('.uk-address-lookup')
+  const manual = component.querySelector('.uk-address-manual')
+  const submitButton = form.querySelector('button[type=submit]')
+  const lookupQuery = form.querySelector('.uk-address-query')
+  const lookupSelector = form.querySelector('.uk-address-selector')
+  const postcode = lookupQuery.querySelector('input.postcode-query')
+  const lookupButton = lookupQuery.querySelector('button.postcode-lookup')
+  const postcodeDisplay = lookupSelector.querySelector('.postcode-query-display')
+  const selector = lookupSelector.querySelector('.uk-address-selector select')
+  const lookupLinks = form.querySelectorAll('.postcode-query-link')
+  const manualLink = form.querySelector('.postcode-manual-link')
 
   if (!component.querySelector('.uk-address-manual .govuk-form-group--error')) {
     showLookup()
@@ -22,7 +22,7 @@ $components.forEach(function (component) {
 
   lookupButton.addEventListener('click', function (e) {
     e.preventDefault()
-    var postcodeQuery = postcode.value.trim().toUpperCase()
+    const postcodeQuery = postcode.value.trim().toUpperCase()
 
     if (!postcodeQuery) {
       return showManual()
@@ -34,9 +34,9 @@ $components.forEach(function (component) {
         return
       }
 
-      var label = results.length + ' Address' + (results.length > 1 ? 'es' : '') + ' found'
+      const label = results.length + ' Address' + (results.length > 1 ? 'es' : '') + ' found'
 
-      var options = '<option>' + label + '</option>'
+      let options = '<option>' + label + '</option>'
 
       results.forEach(function (result) {
         options += '<option value="' + result.uprn + '">' + result.address + '</option>'
@@ -53,9 +53,9 @@ $components.forEach(function (component) {
   })
 
   selector.addEventListener('change', function (e) {
-    var results = selector._results
-    var value = selector.value
-    var result = results.find(result => result.uprn === value).item
+    const results = selector._results
+    const value = selector.value
+    const result = results.find(result => result.uprn === value).item
     // console.log(result)
     form.querySelector('[name$="premises"]').value = result.BUILDING_NUMBER || result.BUILDING_NAME || ''
     form.querySelector('[name$="street"]').value = result.THOROUGHFARE_NAME || ''
@@ -92,14 +92,15 @@ $components.forEach(function (component) {
 })
 
 function getJSON (url, callback) {
-  var request = new window.XMLHttpRequest()
+  const request = new window.XMLHttpRequest()
   request.open('GET', url, true)
 
   request.onload = function () {
     if (request.status >= 200 && request.status < 400) {
+      let data
       // Success!
       try {
-        var data = JSON.parse(request.responseText)
+        data = JSON.parse(request.responseText)
       } catch (err) {
         callback(err)
         return

components/checkboxesfield.js

@@ -1,18 +1,30 @@
 const joi = require('joi')
-const { ConditionalFormComponent } = require('.')
+const { FormComponent } = require('.')
 const helpers = require('./helpers')
 
-class CheckboxesField extends ConditionalFormComponent {
+class CheckboxesField extends FormComponent {
   constructor (def, model) {
     super(def, model)
-    const { list, options, values } = this
-    const itemSchema = joi[list.type]().valid(values)
-    const itemsSchema = joi.array().items(itemSchema)
-    const alternatives = joi.alternatives([itemSchema, itemsSchema])
+    const { options } = this
+    const list = model.lists.find(list => list.name === options.list)
+    const items = list.items
+    const values = items.map(item => item.value)
+    const itemSchema = joi[list.type]().valid(...values)
+    const itemsSchema = joi.array().items(itemSchema).single()
+    // const alternatives = joi.alternatives([itemSchema, itemsSchema])
 
     this.list = list
-    this.formSchema = helpers.buildFormSchema(alternatives, this, options.required !== false)
-    this.stateSchema = helpers.buildStateSchema(alternatives, this)
+    this.items = items
+    this.formSchema = helpers.buildFormSchema(itemsSchema, this, options.required !== false)
+    this.stateSchema = helpers.buildStateSchema(itemsSchema, this)
+  }
+
+  getFormSchemaKeys () {
+    return { [this.name]: this.formSchema }
+  }
+
+  getStateSchemaKeys () {
+    return { [this.name]: this.stateSchema }
   }
 
   getDisplayStringFromState (state) {
@@ -66,7 +78,7 @@ class CheckboxesField extends ConditionalFormComponent {
           }
         }
 
-        return super.addConditionalComponents(item, itemModel, formData, errors)
+        return itemModel
       })
     })
 

components/factory.js

@@ -33,7 +33,7 @@ function getBaseFormFieldViewModel (component, formData, errors) {
       classes: 'govuk-label--s'
     },
     id: name,
-    name: name,
+    name,
     value: formData[name]
   }
 
@@ -631,11 +631,11 @@ const makeComponentTypes = {
 
     // Component collection
     const childFormComponentList = [
-      { type: 'TextField', name: `premises`, title: 'Premises', schema: { max: 100 }, options: { required: options.required } },
-      { type: 'TextField', name: `street`, title: 'Street', schema: { max: 100, allow: '' }, options: { required: false } },
-      { type: 'TextField', name: `locality`, title: 'Locality', schema: { max: 100, allow: '' }, options: { required: false } },
-      { type: 'TextField', name: `town`, title: 'Town', schema: { max: 100 }, options: { required: options.required } },
-      { type: 'TextField', name: `postcode`, title: 'Postcode', schema: { max: 10 }, options: { required: options.required } }
+      { type: 'TextField', name: 'premises', title: 'Premises', schema: { max: 100 }, options: { required: options.required } },
+      { type: 'TextField', name: 'street', title: 'Street', schema: { max: 100, allow: '' }, options: { required: false } },
+      { type: 'TextField', name: 'locality', title: 'Locality', schema: { max: 100, allow: '' }, options: { required: false } },
+      { type: 'TextField', name: 'town', title: 'Town', schema: { max: 100 }, options: { required: options.required } },
+      { type: 'TextField', name: 'postcode', title: 'Postcode', schema: { max: 10 }, options: { required: options.required } }
     ]
     const stateComponents = makeComponentCollection(childFormComponentList, def)
 
@@ -669,26 +669,30 @@ const makeComponentTypes = {
       },
       getStateFromValidForm (payload) {
         return {
-          [name]: payload[`${name}__premises`] ? {
-            premises: payload[`${name}__premises`],
-            street: payload[`${name}__street`],
-            locality: payload[`${name}__locality`],
-            town: payload[`${name}__town`],
-            postcode: payload[`${name}__postcode`]
-          } : null
+          [name]: payload[`${name}__premises`]
+            ? {
+                premises: payload[`${name}__premises`],
+                street: payload[`${name}__street`],
+                locality: payload[`${name}__locality`],
+                town: payload[`${name}__town`],
+                postcode: payload[`${name}__postcode`]
+              }
+            : null
         }
       },
       getDisplayStringFromState (state) {
         const value = state[name]
-        return value ? [
-          value.premises,
-          value.street,
-          value.locality,
-          value.town,
-          value.postcode
-        ].filter(p => {
-          return !!p
-        }).join(', ') : ''
+        return value
+          ? [
+              value.premises,
+              value.street,
+              value.locality,
+              value.town,
+              value.postcode
+            ].filter(p => {
+              return !!p
+            }).join(', ')
+          : ''
       },
       getViewModel (formData, errors) {
         const viewModel = getBaseFormFieldViewModel(component, formData, errors)
@@ -764,10 +768,10 @@ function makeComponent (componentDef, def) {
     const schema = componentDef.schema
 
     Object.assign(component, {
-      name: name,
+      name,
       hint: componentDef.hint,
       title: componentDef.title,
-      schema: schema,
+      schema,
       getFormSchemaKeys () { return { [name]: joi.any() } },
       getStateSchemaKeys () { return { [name]: joi.any() } },
       getFormDataFromState (state) {

components/helpers.js

@@ -1,7 +1,7 @@
 const joi = require('joi')
 
 function buildSchema (type, keys) {
-  let schema = type.isJoi ? type : joi[type]()
+  let schema = joi.isSchema(type) ? type : joi[type]()
 
   Object.keys(keys).forEach(key => {
     const val = keys[key]