@ukhomeoffice/cop-react-form-renderer 4.48.0 → 4.51.0

package/dist/components/FormRenderer/FormRenderer.js

@@ -283,7 +283,7 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
 
       var tasks = (data === null || data === void 0 ? void 0 : (_data$formStatus2 = data.formStatus) === null || _data$formStatus2 === void 0 ? void 0 : _data$formStatus2.tasks) || {};
 
-      var updatedSections = _helpers.default.getUpdatedSectionStates(theSections, tasks, nonSequential);
+      var updatedSections = _helpers.default.getUpdatedSectionStates(theSections, tasks, nonSequential, data);
 
       setHubDetails(function (prev) {
         return _objectSpread(_objectSpread({}, prev), {}, {
@@ -616,7 +616,8 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
     type: type
   })), hub === _models.HubFormats.TASK && formState.pageId === _models.FormPages.HUB && /*#__PURE__*/_react.default.createElement(_TaskList.default, _extends({}, hubDetails, {
     refNumber: data.businessKey,
-    onTaskAction: onTaskAction
+    onTaskAction: onTaskAction,
+    formData: data
   })), formState.page && !formState.cya && !formState.page.collection && /*#__PURE__*/_react.default.createElement(_FormPage.default, {
     page: formState.page,
     onAction: onPageAction

package/dist/components/FormRenderer/FormRenderer.test.js

@@ -591,8 +591,8 @@ describe('components', function () {
         }
       }, _callee18);
     })));
-    it('should handle navigating between task list pages', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee20() {
-      var ON_SUBMIT_CALLS, ON_SUBMIT, HOOKS, taskList, firstTaskStatus, secondTaskStatus, firstTask, newPage, continueButton, seaButton, cyaPageChange, modeChangeLink, changePage, airButton, cyaPage, finalSubmit;
+    it('should load tasklist with notes', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee20() {
+      var ON_SUBMIT_CALLS, ON_SUBMIT, HOOKS, TASK_LIST_WITH_NOTES, taskList, notesText;
       return regeneratorRuntime.wrap(function _callee20$(_context20) {
         while (1) {
           switch (_context20.prev = _context20.next) {
@@ -607,13 +607,18 @@ describe('components', function () {
               HOOKS = {
                 onSubmit: ON_SUBMIT
               };
-              _context20.next = 5;
+              TASK_LIST_WITH_NOTES = JSON.parse(JSON.stringify(_taskList.default));
+              TASK_LIST_WITH_NOTES.hub.notes = {
+                title: "test title",
+                text: "test text"
+              };
+              _context20.next = 7;
               return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee19() {
                 return regeneratorRuntime.wrap(function _callee19$(_context19) {
                   while (1) {
                     switch (_context19.prev = _context19.next) {
                       case 0:
-                        (0, _reactDom.render)( /*#__PURE__*/_react2.default.createElement(_FormRenderer.default, _extends({}, _taskList.default, {
+                        (0, _reactDom.render)( /*#__PURE__*/_react2.default.createElement(_FormRenderer.default, _extends({}, TASK_LIST_WITH_NOTES, {
                           hooks: HOOKS
                         })), container);
 
@@ -625,6 +630,52 @@ describe('components', function () {
                 }, _callee19);
               })));
 
+            case 7:
+              taskList = container.childNodes[0].childNodes[1];
+              notesText = taskList.childNodes[3];
+              expect(notesText.textContent).toEqual("test text");
+
+            case 10:
+            case "end":
+              return _context20.stop();
+          }
+        }
+      }, _callee20);
+    })));
+    it('should handle navigating between task list pages', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee22() {
+      var ON_SUBMIT_CALLS, ON_SUBMIT, HOOKS, taskList, firstTaskStatus, secondTaskStatus, firstTask, newPage, continueButton, seaButton, cyaPageChange, modeChangeLink, changePage, airButton, cyaPage, finalSubmit;
+      return regeneratorRuntime.wrap(function _callee22$(_context22) {
+        while (1) {
+          switch (_context22.prev = _context22.next) {
+            case 0:
+              ON_SUBMIT_CALLS = [];
+
+              ON_SUBMIT = function ON_SUBMIT(type, payload, onSuccess, onError) {
+                ON_SUBMIT_CALLS.push(payload);
+                onSuccess();
+              };
+
+              HOOKS = {
+                onSubmit: ON_SUBMIT
+              };
+              _context22.next = 5;
+              return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee21() {
+                return regeneratorRuntime.wrap(function _callee21$(_context21) {
+                  while (1) {
+                    switch (_context21.prev = _context21.next) {
+                      case 0:
+                        (0, _reactDom.render)( /*#__PURE__*/_react2.default.createElement(_FormRenderer.default, _extends({}, _taskList.default, {
+                          hooks: HOOKS
+                        })), container);
+
+                      case 1:
+                      case "end":
+                        return _context21.stop();
+                    }
+                  }
+                }, _callee21);
+              })));
+
             case 5:
               taskList = container.childNodes[0].childNodes[1]; //Check statuses are correct
 
@@ -724,16 +775,16 @@ describe('components', function () {
 
             case 54:
             case "end":
-              return _context20.stop();
+              return _context22.stop();
           }
         }
-      }, _callee20);
+      }, _callee22);
     })));
-    it('should go straight to CYA page if a complete task is selected', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee22() {
+    it('should go straight to CYA page if a complete task is selected', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee24() {
       var ON_SUBMIT, HOOKS, taskList, newPage;
-      return regeneratorRuntime.wrap(function _callee22$(_context22) {
+      return regeneratorRuntime.wrap(function _callee24$(_context24) {
         while (1) {
-          switch (_context22.prev = _context22.next) {
+          switch (_context24.prev = _context24.next) {
             case 0:
               ON_SUBMIT = function ON_SUBMIT(type, payload, onSuccess, onError) {
                 onSuccess();
@@ -742,11 +793,11 @@ describe('components', function () {
               HOOKS = {
                 onSubmit: ON_SUBMIT
               };
-              _context22.next = 4;
-              return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee21() {
-                return regeneratorRuntime.wrap(function _callee21$(_context21) {
+              _context24.next = 4;
+              return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee23() {
+                return regeneratorRuntime.wrap(function _callee23$(_context23) {
                   while (1) {
-                    switch (_context21.prev = _context21.next) {
+                    switch (_context23.prev = _context23.next) {
                       case 0:
                         (0, _reactDom.render)( /*#__PURE__*/_react2.default.createElement(_FormRenderer.default, _extends({}, _taskList.default, {
                           hooks: HOOKS
@@ -754,10 +805,10 @@ describe('components', function () {
 
                       case 1:
                       case "end":
-                        return _context21.stop();
+                        return _context23.stop();
                     }
                   }
-                }, _callee21);
+                }, _callee23);
               })));
 
             case 4:
@@ -809,16 +860,16 @@ describe('components', function () {
 
             case 17:
             case "end":
-              return _context22.stop();
+              return _context24.stop();
           }
         }
-      }, _callee22);
+      }, _callee24);
     })));
-    it('should go to the last page of a complete task if noTaskCYAs specified', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee24() {
+    it('should go to the last page of a complete task if noTaskCYAs specified', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee26() {
       var ON_SUBMIT, HOOKS, TASK_LIST_WITH_NO_TASK_CYAS, taskList, newPage;
-      return regeneratorRuntime.wrap(function _callee24$(_context24) {
+      return regeneratorRuntime.wrap(function _callee26$(_context26) {
         while (1) {
-          switch (_context24.prev = _context24.next) {
+          switch (_context26.prev = _context26.next) {
             case 0:
               ON_SUBMIT = function ON_SUBMIT(type, payload, onSuccess, onError) {
                 onSuccess();
@@ -833,11 +884,11 @@ describe('components', function () {
                 type: 'save',
                 complete: true
               };
-              _context24.next = 7;
-              return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee23() {
-                return regeneratorRuntime.wrap(function _callee23$(_context23) {
+              _context26.next = 7;
+              return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee25() {
+                return regeneratorRuntime.wrap(function _callee25$(_context25) {
                   while (1) {
-                    switch (_context23.prev = _context23.next) {
+                    switch (_context25.prev = _context25.next) {
                       case 0:
                         (0, _reactDom.render)( /*#__PURE__*/_react2.default.createElement(_FormRenderer.default, _extends({}, TASK_LIST_WITH_NO_TASK_CYAS, {
                           hooks: HOOKS
@@ -845,10 +896,10 @@ describe('components', function () {
 
                       case 1:
                       case "end":
-                        return _context23.stop();
+                        return _context25.stop();
                     }
                   }
-                }, _callee23);
+                }, _callee25);
               })));
 
             case 7:
@@ -897,17 +948,17 @@ describe('components', function () {
 
             case 19:
             case "end":
-              return _context24.stop();
+              return _context26.stop();
           }
         }
-      }, _callee24);
+      }, _callee26);
     })));
-    it('should handle cancellation from a page', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee26() {
+    it('should handle cancellation from a page', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee28() {
       var ON_CANCEL_CALLS, ON_CANCEL, HOOKS, form, hub, _hub$childNodes5, civilServantList, link, page, cancel;
 
-      return regeneratorRuntime.wrap(function _callee26$(_context26) {
+      return regeneratorRuntime.wrap(function _callee28$(_context28) {
         while (1) {
-          switch (_context26.prev = _context26.next) {
+          switch (_context28.prev = _context28.next) {
             case 0:
               ON_CANCEL_CALLS = [];
 
@@ -918,11 +969,11 @@ describe('components', function () {
               HOOKS = {
                 onCancel: ON_CANCEL
               };
-              _context26.next = 5;
-              return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee25() {
-                return regeneratorRuntime.wrap(function _callee25$(_context25) {
+              _context28.next = 5;
+              return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee27() {
+                return regeneratorRuntime.wrap(function _callee27$(_context27) {
                   while (1) {
-                    switch (_context25.prev = _context25.next) {
+                    switch (_context27.prev = _context27.next) {
                       case 0:
                         (0, _reactDom.render)( /*#__PURE__*/_react2.default.createElement(_FormRenderer.default, _extends({}, _userProfile.default, {
                           data: _userProfileData.default,
@@ -931,10 +982,10 @@ describe('components', function () {
 
                       case 1:
                       case "end":
-                        return _context25.stop();
+                        return _context27.stop();
                     }
                   }
-                }, _callee25);
+                }, _callee27);
               })));
 
             case 5:
@@ -958,16 +1009,16 @@ describe('components', function () {
 
             case 15:
             case "end":
-              return _context26.stop();
+              return _context28.stop();
           }
         }
-      }, _callee26);
+      }, _callee28);
     })));
-    it('should navigate to a specific page at the beginning of a task if it is set as the firstPage of a task', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee28() {
+    it('should navigate to a specific page at the beginning of a task if it is set as the firstPage of a task', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee30() {
       var ON_SUBMIT_CALLS, ON_SUBMIT, HOOKS, TASK_LIST_NON_SEQUENTIAL, taskList, firstTask, newPage;
-      return regeneratorRuntime.wrap(function _callee28$(_context28) {
+      return regeneratorRuntime.wrap(function _callee30$(_context30) {
         while (1) {
-          switch (_context28.prev = _context28.next) {
+          switch (_context30.prev = _context30.next) {
             case 0:
               ON_SUBMIT_CALLS = [];
 
@@ -981,11 +1032,11 @@ describe('components', function () {
               };
               TASK_LIST_NON_SEQUENTIAL = JSON.parse(JSON.stringify(_taskList.default));
               TASK_LIST_NON_SEQUENTIAL.hub.nonSequential = true;
-              _context28.next = 7;
-              return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee27() {
-                return regeneratorRuntime.wrap(function _callee27$(_context27) {
+              _context30.next = 7;
+              return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee29() {
+                return regeneratorRuntime.wrap(function _callee29$(_context29) {
                   while (1) {
-                    switch (_context27.prev = _context27.next) {
+                    switch (_context29.prev = _context29.next) {
                       case 0:
                         (0, _reactDom.render)( /*#__PURE__*/_react2.default.createElement(_FormRenderer.default, _extends({}, TASK_LIST_NON_SEQUENTIAL, {
                           hooks: HOOKS
@@ -993,10 +1044,10 @@ describe('components', function () {
 
                       case 1:
                       case "end":
-                        return _context27.stop();
+                        return _context29.stop();
                     }
                   }
-                }, _callee27);
+                }, _callee29);
               })));
 
             case 7:
@@ -1013,10 +1064,10 @@ describe('components', function () {
 
             case 13:
             case "end":
-              return _context28.stop();
+              return _context30.stop();
           }
         }
-      }, _callee28);
+      }, _callee30);
     })));
   });
 });

package/dist/components/FormRenderer/helpers/getUpdatedSectionStates.js

@@ -5,8 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _utils = _interopRequireDefault(require("../../../utils"));
+
 var _models = require("../../../models");
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -93,28 +97,66 @@ var updateTasks = function updateTasks(section, sectionIndex, tasks, nonSequenti
     return _objectSpread({}, a);
   });
   clone.forEach(function (task, taskIndex, taskList) {
-    task.state = updateTaskState(task, taskIndex, taskList, tasks, nonSequential, allowFirst);
+    if (section.skipped) {
+      task.state = _models.TaskStates.TYPES.SKIPPED;
+    } else {
+      task.state = updateTaskState(task, taskIndex, taskList, tasks, nonSequential, allowFirst);
+    }
   });
   return clone;
 };
+/**
+ * Checks if the previous section has been completed. If the last section
+ * was skipped then this function will check the section before that until
+ * the state of a non-skipped section can be found.
+ * @param {array} sections - array of sections
+ * @param {number} currentIndex - index of the current section
+ * @returns {boolean} true if the last non-skipped section is complete, false
+ *                    if not.
+ */
+
+
+var isPreviousSectionComplete = function isPreviousSectionComplete(sections, currentIndex) {
+  var _sections, _sections$tasks$slice;
+
+  var lastTaskState = (_sections = sections[currentIndex - 1]) === null || _sections === void 0 ? void 0 : (_sections$tasks$slice = _sections.tasks.slice(-1)[0]) === null || _sections$tasks$slice === void 0 ? void 0 : _sections$tasks$slice.state;
+
+  if (lastTaskState === _models.TaskStates.TYPES.COMPLETE) {
+    return true;
+  }
+
+  if (lastTaskState === _models.TaskStates.TYPES.SKIPPED) {
+    return currentIndex - 1 === 0 ? true : isPreviousSectionComplete(sections, currentIndex - 1);
+  }
+
+  return false;
+};
 /**
  * update task states in sections
  * @param {object[]} sections - array of sections
  * @param {object} tasks - update task states
  * @param {boolean} nonSequential - true if tasks can be performed non-sequentially
+ * @param {object} data - current form data
  * @returns {object[]} - updated sections - note this is a clone
  */
 
 
 var getUpdatedSectionStates = function getUpdatedSectionStates(sections, tasks) {
   var nonSequential = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  var data = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
   var clone = sections.map(function (a) {
     return _objectSpread({}, a);
   });
   clone.forEach(function (section, sectionIndex, sectionList) {
-    var _sectionList, _sectionList$tasks$sl;
+    var _section$show_when;
+
+    var allowFirst = sectionIndex === 0 || isPreviousSectionComplete(sectionList, sectionIndex); // Support a single show_when check on a section. Support for an
+    // array of checks will have to be added if required.
+
+    if (data && !_utils.default.Condition.met(section.show_when, data[(_section$show_when = section.show_when) === null || _section$show_when === void 0 ? void 0 : _section$show_when.field])) {
+      section.skipped = true;
+    }
 
-    var allowFirst = sectionIndex === 0 || ((_sectionList = sectionList[sectionIndex - 1]) === null || _sectionList === void 0 ? void 0 : (_sectionList$tasks$sl = _sectionList.tasks.slice(-1)[0]) === null || _sectionList$tasks$sl === void 0 ? void 0 : _sectionList$tasks$sl.state) === _models.TaskStates.TYPES.COMPLETE;
     section.tasks = updateTasks(section, sectionIndex, tasks, nonSequential, allowFirst);
   });
   return clone;

package/dist/components/FormRenderer/helpers/getUpdatedSectionStates.test.js

@@ -114,6 +114,85 @@ describe('components.FormRenderer.helpers.getUpdatedSectionStates', function ()
       expect(updatedSections[0].tasks[0].state).toEqual(_models.TaskStates.TYPES.IN_PROGRESS);
       expect(updatedSections[0].tasks[1].state).toEqual(_models.TaskStates.TYPES.CANNOT_START_YET);
     });
+    it("should set the status of any tasks in a section with a failed show_when to '".concat(_models.TaskStates.TYPES.SKIPPED, "'"), function () {
+      var SECTIONS = [{
+        name: 'Add event details',
+        tasks: [{
+          name: 'Date, location and mode details',
+          pages: ['eventDate', 'eventMode']
+        }, {
+          name: 'Officer and agency details',
+          pages: ['officeDetails']
+        }]
+      }, {
+        name: 'Add people details',
+        show_when: {
+          field: 'field',
+          op: '=',
+          value: 'showMe'
+        },
+        tasks: [{
+          name: 'People details',
+          pages: ['firstName', 'surname']
+        }, {
+          name: 'Immigration details',
+          pages: ['immigrationDate']
+        }]
+      }];
+      var TASKS = {
+        'Date, location and mode details': {
+          complete: true
+        },
+        'Officer and agency details': {
+          complete: true
+        }
+      };
+      var DATA = {
+        field: 'hideMe'
+      };
+      var updatedSections = (0, _getUpdatedSectionStates.default)(SECTIONS, TASKS, false, DATA);
+      expect(updatedSections[0].tasks[0].state).toEqual(_models.TaskStates.TYPES.COMPLETE);
+      expect(updatedSections[0].tasks[1].state).toEqual(_models.TaskStates.TYPES.COMPLETE);
+      expect(updatedSections[1].skipped).toEqual(true);
+      expect(updatedSections[1].tasks[0].state).toEqual(_models.TaskStates.TYPES.SKIPPED);
+      expect(updatedSections[1].tasks[1].state).toEqual(_models.TaskStates.TYPES.SKIPPED);
+    });
+  });
+  it("should set the status of any tasks to '".concat(_models.TaskStates.TYPES.NOT_STARTED, "' if previous tasks have been skipped"), function () {
+    var SECTIONS = [{
+      name: 'Add event details',
+      show_when: {
+        field: 'field',
+        op: '=',
+        value: 'showMe'
+      },
+      tasks: [{
+        name: 'Date, location and mode details',
+        pages: ['eventDate', 'eventMode']
+      }, {
+        name: 'Officer and agency details',
+        pages: ['officeDetails']
+      }]
+    }, {
+      name: 'Add people details',
+      tasks: [{
+        name: 'People details',
+        pages: ['firstName', 'surname']
+      }, {
+        name: 'Immigration details',
+        pages: ['immigrationDate']
+      }]
+    }];
+    var TASKS = {};
+    var DATA = {
+      field: 'hideMe'
+    };
+    var updatedSections = (0, _getUpdatedSectionStates.default)(SECTIONS, TASKS, false, DATA);
+    expect(updatedSections[0].skipped).toEqual(true);
+    expect(updatedSections[0].tasks[0].state).toEqual(_models.TaskStates.TYPES.SKIPPED);
+    expect(updatedSections[0].tasks[1].state).toEqual(_models.TaskStates.TYPES.SKIPPED);
+    expect(updatedSections[1].tasks[0].state).toEqual(_models.TaskStates.TYPES.NOT_STARTED);
+    expect(updatedSections[1].tasks[1].state).toEqual(_models.TaskStates.TYPES.CANNOT_START_YET);
   });
   describe('non-sequential tasks', function () {
     var NON_SEQUENTIAL = true;

package/dist/components/TaskList/TaskList.js

@@ -21,7 +21,7 @@ var _Task = _interopRequireDefault(require("./Task"));
 
 require("./TaskList.scss");
 
-var _excluded = ["refTitle", "refNumber", "incompleteTitle", "sections", "fieldId", "onTaskAction", "classBlock", "classModifiers", "className"];
+var _excluded = ["refTitle", "refNumber", "notes", "incompleteTitle", "sections", "fieldId", "onTaskAction", "classBlock", "classModifiers", "className"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -55,6 +55,7 @@ exports.DEFAULT_INCOMPLETE_TITLE = DEFAULT_INCOMPLETE_TITLE;
 var TaskList = function TaskList(_ref) {
   var refTitle = _ref.refTitle,
       refNumber = _ref.refNumber,
+      notes = _ref.notes,
       incompleteTitle = _ref.incompleteTitle,
       sections = _ref.sections,
       fieldId = _ref.fieldId,
@@ -78,6 +79,12 @@ var TaskList = function TaskList(_ref) {
       completeSections = _sections$reduce2[0],
       totalSections = _sections$reduce2[1];
 
+  var notesId = "".concat(attrs.id, "Notes");
+
+  var _ref2 = notes ? notes : {},
+      notesTitle = _ref2.title,
+      notesText = _ref2.text;
+
   var onClick = function onClick(task) {
     if (typeof onTaskAction === 'function') {
       onTaskAction(task);
@@ -98,7 +105,18 @@ var TaskList = function TaskList(_ref) {
     className: "tasklist-summary"
   }, incompleteTitle)), /*#__PURE__*/_react.default.createElement("p", {
     className: "govuk-body govuk-!-margin-bottom-7"
-  }, "You have completed ".concat(completeSections, " of ").concat(totalSections, " sections")), sections.map(function (section, index) {
+  }, "You have completed ".concat(completeSections, " of ").concat(totalSections, " sections")), notesTitle && notesText && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", {
+    className: "govuk-body govuk-!-margin-bottom-0"
+  }, /*#__PURE__*/_react.default.createElement("strong", {
+    className: "tasklist-summary"
+  }, _copReactComponents.Utils.interpolateString(notesTitle, attrs.formData))), /*#__PURE__*/_react.default.createElement(_copReactComponents.TextArea, {
+    id: notesId,
+    fieldId: notesId,
+    readOnly: true,
+    value: _copReactComponents.Utils.interpolateString(notesText, attrs.formData)
+  })), sections.filter(function (section) {
+    return !section.skipped;
+  }).map(function (section, index) {
     return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
       key: "".concat(section.name)
     }, /*#__PURE__*/_react.default.createElement("h2", {
@@ -118,6 +136,10 @@ var TaskList = function TaskList(_ref) {
 TaskList.propTypes = {
   refTitle: _propTypes.default.string,
   refNumber: _propTypes.default.string,
+  notes: _propTypes.default.shape({
+    title: _propTypes.default.string,
+    text: _propTypes.default.string
+  }),
   incompleteTitle: _propTypes.default.string,
   sections: _propTypes.default.arrayOf(_propTypes.default.shape({
     name: _propTypes.default.string.isRequired,

package/dist/models/TaskStates.js

@@ -13,11 +13,13 @@ var TYPE_COMPLETE = 'complete';
 var TYPE_IN_PROGRESS = 'inProgress';
 var TYPE_NOT_STARTED = 'notStarted';
 var TYPE_CANNOT_START_YET = 'cannotStartYet';
+var TYPE_SKIPPED = 'skipped';
 var StateTypes = {
   COMPLETE: TYPE_COMPLETE,
   IN_PROGRESS: TYPE_IN_PROGRESS,
   NOT_STARTED: TYPE_NOT_STARTED,
-  CANNOT_START_YET: TYPE_CANNOT_START_YET
+  CANNOT_START_YET: TYPE_CANNOT_START_YET,
+  SKIPPED: TYPE_SKIPPED
 };
 exports.StateTypes = StateTypes;
 var StateDetails = (_StateDetails = {}, _defineProperty(_StateDetails, TYPE_COMPLETE, {
@@ -32,6 +34,9 @@ var StateDetails = (_StateDetails = {}, _defineProperty(_StateDetails, TYPE_COMP
 }), _defineProperty(_StateDetails, TYPE_CANNOT_START_YET, {
   label: 'Cannot Start Yet',
   colour: 'dark-grey'
+}), _defineProperty(_StateDetails, TYPE_SKIPPED, {
+  label: 'Skipped',
+  colour: 'dark-grey'
 }), _StateDetails);
 var TaskStates = {
   TYPES: StateTypes,

package/dist/utils/Operate/getFirstOf.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _copReactComponents = require("@ukhomeoffice/cop-react-components");
+
+var _getSourceData = _interopRequireDefault(require("../Data/getSourceData"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// Global imports.
+// Local imports.
+var getFirstOf = function getFirstOf(config, data) {
+  var fieldValue;
+
+  if (config !== null && config !== void 0 && config.fields) {
+    config.fields.find(function (field) {
+      var fieldPath = _copReactComponents.Utils.interpolateString(field, data);
+
+      var foundValue = (0, _getSourceData.default)(data, fieldPath);
+
+      if (foundValue) {
+        fieldValue = foundValue;
+        return true;
+      }
+
+      return false;
+    });
+    return fieldValue || '';
+  }
+
+  return (config === null || config === void 0 ? void 0 : config.value) || null;
+};
+
+var _default = getFirstOf;
+exports.default = _default;

package/dist/utils/Operate/getFirstOf.test.js

@@ -0,0 +1,78 @@
+"use strict";
+
+var _getFirstOf = _interopRequireDefault(require("./getFirstOf"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+describe('Utils.Operate.addToFormData', function () {
+  var DATA = {
+    name: 'sam',
+    id: 1,
+    test: ['2', '3'],
+    idName: 'passport',
+    passportNumber: 123,
+    otherIdDoc: '',
+    anotherMadeUpId: 789
+  };
+  it('Should handle interpolated field strings', function () {
+    // eslint-disable-next-line no-template-curly-in-string
+    var CONFIG = {
+      fields: ['test[${id}]']
+    };
+    var result = (0, _getFirstOf.default)(CONFIG, DATA);
+    expect(result).toEqual(DATA.test[1]);
+  });
+  it('Should return the value provided in config if no field is specified', function () {
+    var CONFIG = {
+      value: '2'
+    };
+    var result = (0, _getFirstOf.default)(CONFIG, DATA);
+    expect(result).toEqual(CONFIG.value);
+  });
+  it('Should return the value of the passportNumber field given in config', function () {
+    var CONFIG = {
+      fields: ['passportNumber', 'anotherMadeUpId', 'otherIdDoc']
+    };
+    var result = (0, _getFirstOf.default)(CONFIG, DATA);
+    expect(result).toEqual(DATA.passportNumber);
+  });
+  it('Should return the value of the anotherMadeUpId field given in config', function () {
+    var CONFIG = {
+      fields: ['anotherMadeUpId', 'passportNumber', 'otherIdDoc']
+    };
+    var result = (0, _getFirstOf.default)(CONFIG, DATA);
+    expect(result).toEqual(DATA.anotherMadeUpId);
+  });
+  it('Should return the value of the otherIdDoc field given in config', function () {
+    var CONFIG = {
+      fields: ['otherIdDoc', 'passportNumber', 'anotherMadeUpId']
+    };
+    var result = (0, _getFirstOf.default)(CONFIG, DATA);
+    expect(result).toEqual(DATA.passportNumber);
+  });
+  it('Should return the value of the otherIdDoc field given in config, if it exists, otherwise next field next in the array', function () {
+    var CONFIG = {
+      fields: ['otherIdDoc', 'passportNumber', 'anotherMadeUpId']
+    };
+    var result = (0, _getFirstOf.default)(CONFIG, DATA);
+    expect(result).toEqual(DATA.passportNumber);
+  });
+  it('Should return no value if elements in config.fields are not found in data', function () {
+    var CONFIG = {
+      fields: ['otherIdDoc1', 'passportNumber1', 'anotherMadeUpId1']
+    };
+    var result = (0, _getFirstOf.default)(CONFIG, DATA);
+    expect(result).toEqual('');
+  });
+  it('Should return null when an invalid config is used', function () {
+    var result = (0, _getFirstOf.default)(null, DATA);
+    expect(result).toEqual(null);
+  });
+  it('Should return null when invalid data is used', function () {
+    var CONFIG = {
+      field: 'a'
+    };
+    var result = (0, _getFirstOf.default)(CONFIG, null);
+    expect(result).toEqual(null);
+  });
+});

package/dist/utils/Operate/runPageOperations.js

@@ -19,6 +19,8 @@ var _shouldRun = _interopRequireDefault(require("./shouldRun"));
 
 var _setDataItem = _interopRequireDefault(require("../Data/setDataItem"));
 
+var _getFirstOf = _interopRequireDefault(require("./getFirstOf"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 // Global imports.
@@ -27,7 +29,8 @@ var functions = {
   checkValueIsTruthy: _checkValueIsTruthy.default,
   getIndexOfMatchingValueIn: _getIndexOfMatchingValueIn.default,
   persistValueInFormData: _persistValueInFormData.default,
-  setValueInFormData: _setValueInFormData.default
+  setValueInFormData: _setValueInFormData.default,
+  getFirstOf: _getFirstOf.default
 };
 
 var doOperation = function doOperation(config, data, onChange) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukhomeoffice/cop-react-form-renderer",
-  "version": "4.48.0",
+  "version": "4.51.0",
   "private": false,
   "scripts": {
     "clean": "rimraf dist",
@@ -97,4 +97,4 @@
       "last 1 safari version"
     ]
   }
-}
+}