@ukhomeoffice/cop-react-form-renderer 3.17.0 → 3.18.0

package/dist/components/FormRenderer/FormRenderer.js

@@ -229,15 +229,15 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
     if (hubDetails !== null && hubDetails !== void 0 && hubDetails.sections) {
       var _data$formStatus2;
 
-      var tasks = data !== null && data !== void 0 && (_data$formStatus2 = data.formStatus) !== null && _data$formStatus2 !== void 0 && _data$formStatus2.tasks ? data.formStatus.tasks : {};
+      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(hubDetails.sections, tasks);
+      var updatedSections = _helpers.default.getUpdatedSectionStates(hubDetails.sections, tasks, hubDetails.nonSequential);
 
       setHubDetails(function (prev) {
         return _objectSpread(_objectSpread({}, prev), updatedSections);
       });
     }
-  }, [currentTask.fullPages, data, hubDetails === null || hubDetails === void 0 ? void 0 : hubDetails.sections]);
+  }, [currentTask.fullPages, data, hubDetails === null || hubDetails === void 0 ? void 0 : hubDetails.sections, hubDetails === null || hubDetails === void 0 ? void 0 : hubDetails.nonSequential]);
 
   var onPageChange = function onPageChange(newPageId) {
     clearErrors();

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

@@ -7,6 +7,28 @@ exports.default = void 0;
 
 var _models = require("../../../models");
 
+var getCurrentTaskState = function getCurrentTaskState(_ref, defaultState) {
+  var complete = _ref.complete,
+      currentPage = _ref.currentPage;
+
+  if (complete) {
+    return _models.TaskStates.TYPES.COMPLETE;
+  }
+
+  if (currentPage) {
+    return _models.TaskStates.TYPES.IN_PROGRESS;
+  }
+
+  return defaultState;
+};
+
+var allDependentTasksComplete = function allDependentTasksComplete(tasks, mustBeComplete) {
+  return mustBeComplete.reduce(function (allComplete, taskName) {
+    var _tasks$taskName;
+
+    return allComplete && ((_tasks$taskName = tasks[taskName]) === null || _tasks$taskName === void 0 ? void 0 : _tasks$taskName.complete);
+  }, true);
+};
 /**
  * Updates the given task list sections with the latest states
  * @param {object} sections The JSON defining the sections in the task list
@@ -19,15 +41,13 @@ var _models = require("../../../models");
    }
  * @returns An JSON representation of the task list sections with up to date states
  */
-var getUpdatedSectionStates = function getUpdatedSectionStates(sections, tasks) {
+
+
+var getUpdatedSequentialStates = function getUpdatedSequentialStates(sections, tasks) {
   return sections.map(function (section, sectionIndex, sectionArray) {
     return section.tasks.map(function (task, taskIndex, taskArray) {
       if (tasks[task.name]) {
-        if (tasks[task.name].complete) {
-          task.state = _models.TaskStates.TYPES.COMPLETE;
-        } else if (tasks[task.name].currentPage) {
-          task.state = _models.TaskStates.TYPES.IN_PROGRESS;
-        }
+        task.state = getCurrentTaskState(tasks[task.name], task.state);
       } else {
         var _taskArray, _sectionArray, _sectionArray$tasks$s;
 
@@ -46,5 +66,31 @@ var getUpdatedSectionStates = function getUpdatedSectionStates(sections, tasks)
   });
 };
 
+var getUpdatedNonSequentialStates = function getUpdatedNonSequentialStates(sections, tasks) {
+  return sections.map(function (section) {
+    return section.tasks.map(function (task) {
+      if (tasks[task.name]) {
+        task.state = getCurrentTaskState(tasks[task.name], task.state);
+      } else if (task.depends_on && !allDependentTasksComplete(tasks, task.depends_on)) {
+        task.state = _models.TaskStates.TYPES.CANNOT_START_YET;
+      } else {
+        task.state = _models.TaskStates.TYPES.NOT_STARTED;
+      }
+
+      return task;
+    });
+  });
+};
+
+var getUpdatedSectionStates = function getUpdatedSectionStates(sections, tasks) {
+  var nonSequential = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+
+  if (nonSequential === true) {
+    return getUpdatedNonSequentialStates(sections, tasks);
+  }
+
+  return getUpdatedSequentialStates(sections, tasks);
+};
+
 var _default = getUpdatedSectionStates;
 exports.default = _default;

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

@@ -7,116 +7,174 @@ var _models = require("../../../models");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 // Local imports
-describe('components', function () {
-  describe('FormRenderer', function () {
-    describe('helpers', function () {
-      describe('getUpdatedSectionStates', function () {
-        it("should set all tasks to '".concat(_models.TaskStates.TYPES.CANNOT_START_YET, "' excluding the first which should be '").concat(_models.TaskStates.TYPES.NOT_STARTED, "'"), 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',
-            tasks: [{
-              name: 'People details',
-              pages: ['firstName', 'surname']
-            }, {
-              name: 'Immigration details',
-              pages: ['immigrationDate']
-            }, {
-              name: 'Journey details',
-              pages: ['journeyDetails']
-            }]
-          }];
-          var updatedSections = (0, _getUpdatedSectionStates.default)(SECTIONS, {});
-          expect(updatedSections[0][0].state).toEqual(_models.TaskStates.TYPES.NOT_STARTED);
-          expect(updatedSections[0][1].state).toEqual(_models.TaskStates.TYPES.CANNOT_START_YET);
-          expect(updatedSections[1][0].state).toEqual(_models.TaskStates.TYPES.CANNOT_START_YET);
-          expect(updatedSections[1][1].state).toEqual(_models.TaskStates.TYPES.CANNOT_START_YET);
-          expect(updatedSections[1][2].state).toEqual(_models.TaskStates.TYPES.CANNOT_START_YET);
-        });
-        it("should set tasks after any '".concat(_models.TaskStates.TYPES.COMPLETE, "' ones to '").concat(_models.TaskStates.TYPES.NOT_STARTED, "'"), function () {
-          var SECTIONS = [{
-            name: 'Add event details',
-            tasks: [{
-              name: 'Date, location and mode details',
-              pages: ['eventDate', 'eventMode']
-            }, {
-              name: 'Officer and agency details',
-              pages: ['officeDetails']
-            }]
-          }];
-          var TASKS = {
-            'Date, location and mode details': {
-              complete: true
-            }
-          };
-          var updatedSections = (0, _getUpdatedSectionStates.default)(SECTIONS, TASKS);
-          expect(updatedSections[0][0].state).toEqual(_models.TaskStates.TYPES.COMPLETE);
-          expect(updatedSections[0][1].state).toEqual(_models.TaskStates.TYPES.NOT_STARTED);
-        });
-        it("should set tasks after any '".concat(_models.TaskStates.TYPES.COMPLETE, "' ones to '").concat(_models.TaskStates.TYPES.NOT_STARTED, " across different sections'"), 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',
-            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 updatedSections = (0, _getUpdatedSectionStates.default)(SECTIONS, TASKS);
-          expect(updatedSections[0][0].state).toEqual(_models.TaskStates.TYPES.COMPLETE);
-          expect(updatedSections[0][1].state).toEqual(_models.TaskStates.TYPES.COMPLETE);
-          expect(updatedSections[1][0].state).toEqual(_models.TaskStates.TYPES.NOT_STARTED);
-          expect(updatedSections[1][1].state).toEqual(_models.TaskStates.TYPES.CANNOT_START_YET);
-        });
-        it("should set tasks to '".concat(_models.TaskStates.TYPES.IN_PROGRESS, "' if they have a current page but are not complete"), function () {
-          var SECTIONS = [{
-            name: 'Add event details',
-            tasks: [{
-              name: 'Date, location and mode details',
-              pages: ['eventDate', 'eventMode']
-            }, {
-              name: 'Officer and agency details',
-              pages: ['officeDetails']
-            }]
-          }];
-          var TASKS = {
-            'Date, location and mode details': {
-              complete: false,
-              currentPage: 'eventMode'
-            }
-          };
-          var updatedSections = (0, _getUpdatedSectionStates.default)(SECTIONS, TASKS);
-          expect(updatedSections[0][0].state).toEqual(_models.TaskStates.TYPES.IN_PROGRESS);
-          expect(updatedSections[0][1].state).toEqual(_models.TaskStates.TYPES.CANNOT_START_YET);
-        });
-      });
+describe('components.FormRenderer.helpers.getUpdatedSectionStates', function () {
+  describe('sequential tasks', function () {
+    it("should set all tasks to '".concat(_models.TaskStates.TYPES.CANNOT_START_YET, "' excluding the first which should be '").concat(_models.TaskStates.TYPES.NOT_STARTED, "'"), 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',
+        tasks: [{
+          name: 'People details',
+          pages: ['firstName', 'surname']
+        }, {
+          name: 'Immigration details',
+          pages: ['immigrationDate']
+        }, {
+          name: 'Journey details',
+          pages: ['journeyDetails']
+        }]
+      }];
+      var updatedSections = (0, _getUpdatedSectionStates.default)(SECTIONS, {});
+      expect(updatedSections[0][0].state).toEqual(_models.TaskStates.TYPES.NOT_STARTED);
+      expect(updatedSections[0][1].state).toEqual(_models.TaskStates.TYPES.CANNOT_START_YET);
+      expect(updatedSections[1][0].state).toEqual(_models.TaskStates.TYPES.CANNOT_START_YET);
+      expect(updatedSections[1][1].state).toEqual(_models.TaskStates.TYPES.CANNOT_START_YET);
+      expect(updatedSections[1][2].state).toEqual(_models.TaskStates.TYPES.CANNOT_START_YET);
+    });
+    it("should set tasks after any '".concat(_models.TaskStates.TYPES.COMPLETE, "' ones to '").concat(_models.TaskStates.TYPES.NOT_STARTED, "'"), function () {
+      var SECTIONS = [{
+        name: 'Add event details',
+        tasks: [{
+          name: 'Date, location and mode details',
+          pages: ['eventDate', 'eventMode']
+        }, {
+          name: 'Officer and agency details',
+          pages: ['officeDetails']
+        }]
+      }];
+      var TASKS = {
+        'Date, location and mode details': {
+          complete: true
+        }
+      };
+      var updatedSections = (0, _getUpdatedSectionStates.default)(SECTIONS, TASKS);
+      expect(updatedSections[0][0].state).toEqual(_models.TaskStates.TYPES.COMPLETE);
+      expect(updatedSections[0][1].state).toEqual(_models.TaskStates.TYPES.NOT_STARTED);
+    });
+    it("should set tasks after any '".concat(_models.TaskStates.TYPES.COMPLETE, "' ones to '").concat(_models.TaskStates.TYPES.NOT_STARTED, " across different sections'"), 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',
+        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 updatedSections = (0, _getUpdatedSectionStates.default)(SECTIONS, TASKS);
+      expect(updatedSections[0][0].state).toEqual(_models.TaskStates.TYPES.COMPLETE);
+      expect(updatedSections[0][1].state).toEqual(_models.TaskStates.TYPES.COMPLETE);
+      expect(updatedSections[1][0].state).toEqual(_models.TaskStates.TYPES.NOT_STARTED);
+      expect(updatedSections[1][1].state).toEqual(_models.TaskStates.TYPES.CANNOT_START_YET);
+    });
+    it("should set tasks to '".concat(_models.TaskStates.TYPES.IN_PROGRESS, "' if they have a current page but are not complete"), function () {
+      var SECTIONS = [{
+        name: 'Add event details',
+        tasks: [{
+          name: 'Date, location and mode details',
+          pages: ['eventDate', 'eventMode']
+        }, {
+          name: 'Officer and agency details',
+          pages: ['officeDetails']
+        }]
+      }];
+      var TASKS = {
+        'Date, location and mode details': {
+          complete: false,
+          currentPage: 'eventMode'
+        }
+      };
+      var updatedSections = (0, _getUpdatedSectionStates.default)(SECTIONS, TASKS);
+      expect(updatedSections[0][0].state).toEqual(_models.TaskStates.TYPES.IN_PROGRESS);
+      expect(updatedSections[0][1].state).toEqual(_models.TaskStates.TYPES.CANNOT_START_YET);
+    });
+  });
+  describe('non-sequential tasks', function () {
+    var NON_SEQUENTIAL = true;
+    var SECTIONS = [{
+      name: 'First',
+      tasks: [{
+        name: 'Alpha'
+      }, {
+        name: 'Bravo'
+      }]
+    }, {
+      name: 'Second',
+      tasks: [{
+        name: 'Charlie',
+        depends_on: ['Alpha', 'Bravo']
+      }]
+    }, {
+      name: 'Third',
+      tasks: [{
+        name: 'Delta'
+      }]
+    }];
+    it("should set all states to '".concat(_models.TaskStates.TYPES.NOT_STARTED, "', except any that depend on others"), function () {
+      var RESULT = (0, _getUpdatedSectionStates.default)(SECTIONS, {}, NON_SEQUENTIAL);
+      expect(RESULT[0][0].state).toEqual(_models.TaskStates.TYPES.NOT_STARTED); // Alpha
+
+      expect(RESULT[0][1].state).toEqual(_models.TaskStates.TYPES.NOT_STARTED); // Bravo
+
+      expect(RESULT[1][0].state).toEqual(_models.TaskStates.TYPES.CANNOT_START_YET); // Charlie
+
+      expect(RESULT[2][0].state).toEqual(_models.TaskStates.TYPES.NOT_STARTED); // Delta
+    });
+    it('should keep dependent state unable to start if any dependencies are not complete', function () {
+      var ALPHA_COMPLETE = (0, _getUpdatedSectionStates.default)(SECTIONS, {
+        Alpha: {
+          complete: true
+        }
+      }, NON_SEQUENTIAL);
+      expect(ALPHA_COMPLETE[1][0].state).toEqual(_models.TaskStates.TYPES.CANNOT_START_YET); // Charlie
+
+      var BRAVO_COMPLETE = (0, _getUpdatedSectionStates.default)(SECTIONS, {
+        Bravo: {
+          complete: true
+        }
+      }, NON_SEQUENTIAL);
+      expect(BRAVO_COMPLETE[1][0].state).toEqual(_models.TaskStates.TYPES.CANNOT_START_YET); // Charlie
+    });
+    it('should allow dependent state to start if all dependencies are complete', function () {
+      var TASKS = {
+        'Alpha': {
+          complete: true
+        },
+        'Bravo': {
+          complete: true
+        },
+        'Delta': {}
+      };
+      var RESULT = (0, _getUpdatedSectionStates.default)(SECTIONS, TASKS, NON_SEQUENTIAL);
+      expect(RESULT[1][0].state).toEqual(_models.TaskStates.TYPES.NOT_STARTED); // Charlie
+
+      expect(RESULT[2][0].state).toEqual(_models.TaskStates.TYPES.NOT_STARTED); // Delta
     });
   });
 });

package/dist/components/TaskList/Task.js

@@ -81,7 +81,7 @@ Task.propTypes = {
   task: _propTypes.default.shape({
     name: _propTypes.default.string.isRequired,
     pages: _propTypes.default.array.isRequired,
-    state: _propTypes.default.string.isRequired
+    state: _propTypes.default.string
   }).isRequired,
   onClick: _propTypes.default.func.isRequired
 };

package/dist/components/TaskList/TaskList.js

@@ -100,7 +100,7 @@ TaskList.propTypes = {
     tasks: _propTypes.default.arrayOf(_propTypes.default.shape({
       name: _propTypes.default.string.isRequired,
       pages: _propTypes.default.array.isRequired,
-      state: _propTypes.default.string.isRequired
+      state: _propTypes.default.string
     })).isRequired
   })).isRequired,
   classBlock: _propTypes.default.string,

package/dist/components/TaskList/TaskState.js

@@ -25,18 +25,18 @@ var TaskState = function TaskState(_ref) {
 
   var classes = _copReactComponents.Utils.classBuilder(DEFAULT_CLASS, undefined, undefined);
 
-  if (!_models.TaskStates.DETAILS[state]) {
-    return null;
-  }
-
+  var details = _models.TaskStates.DETAILS[state] || _models.TaskStates.DETAILS.cannotStartYet;
   return /*#__PURE__*/_react.default.createElement(_copReactComponents.Tag, {
-    classModifiers: [_models.TaskStates.DETAILS[state].colour],
+    classModifiers: details.colour,
     className: classes('tag')
-  }, _models.TaskStates.DETAILS[state].label);
+  }, details.label);
 };
 
 TaskState.propTypes = {
-  state: _propTypes.default.string.isRequired
+  state: _propTypes.default.string
+};
+TaskState.defaultProps = {
+  state: _models.TaskStates.TYPES.CANNOT_START_YET
 };
 var _default = TaskState;
 exports.default = _default;

package/dist/components/TaskList/TaskState.test.js

@@ -14,6 +14,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 // Local imports
 describe('components', function () {
   describe('TaskList.TaskState', function () {
+    var checkIsCannotStartYet = function checkIsCannotStartYet(container) {
+      expect(container.childNodes.length).toEqual(1);
+      expect(container.childNodes[0].classList).toContain('hods-tag');
+      expect(container.childNodes[0].classList).toContain("hods-tag--".concat(_models.TaskStates.DETAILS.cannotStartYet.colour));
+      expect(container.childNodes[0].textContent).toEqual(_models.TaskStates.DETAILS.cannotStartYet.label);
+      return true;
+    };
+
     it('should render a complete state icon', function () {
       var STATE = _models.TaskStates.TYPES.COMPLETE;
 
@@ -60,12 +68,9 @@ describe('components', function () {
       })),
           container = _render4.container;
 
-      expect(container.childNodes.length).toEqual(1);
-      expect(container.childNodes[0].classList).toContain('hods-tag');
-      expect(container.childNodes[0].classList).toContain("hods-tag--".concat(_models.TaskStates.DETAILS.cannotStartYet.colour));
-      expect(container.childNodes[0].textContent).toEqual(_models.TaskStates.DETAILS.cannotStartYet.label);
+      expect(checkIsCannotStartYet(container)).toBeTruthy();
     });
-    it('should not render a state if given an unknown value', function () {
+    it('should render the "Cannot start yet" state if given an unknown value', function () {
       var STATE = 'spellingError';
 
       var _render5 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_TaskState.default, {
@@ -73,9 +78,9 @@ describe('components', function () {
       })),
           container = _render5.container;
 
-      expect(container.childNodes.length).toEqual(0);
+      expect(checkIsCannotStartYet(container)).toBeTruthy();
     });
-    it('should not render a state if given null', function () {
+    it('should render the "Cannot start yet" state if given null', function () {
       var STATE = null;
 
       var _render6 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_TaskState.default, {
@@ -83,9 +88,9 @@ describe('components', function () {
       })),
           container = _render6.container;
 
-      expect(container.childNodes.length).toEqual(0);
+      expect(checkIsCannotStartYet(container)).toBeTruthy();
     });
-    it('should not render a state if given undefined', function () {
+    it('should render the "Cannot start yet" state if given undefined', function () {
       var STATE = undefined;
 
       var _render7 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_TaskState.default, {
@@ -93,7 +98,7 @@ describe('components', function () {
       })),
           container = _render7.container;
 
-      expect(container.childNodes.length).toEqual(0);
+      expect(checkIsCannotStartYet(container)).toBeTruthy();
     });
   });
 });

package/dist/utils/Component/getComponentTests/getComponent.checkboxes.test.js

@@ -102,8 +102,8 @@ describe('utils.Component.get', function () {
     _react.fireEvent.click(checkboxItems[0].childNodes[0]); // alpha
 
 
-    expect(ON_CHANGE_CALLS.length).toEqual(2);
-    expect(ON_CHANGE_CALLS[1]).toMatchObject({
+    expect(ON_CHANGE_CALLS.length).toEqual(1);
+    expect(ON_CHANGE_CALLS[0]).toMatchObject({
       name: FIELD_ID,
       value: [OPTIONS[0].value]
     });
@@ -111,8 +111,8 @@ describe('utils.Component.get', function () {
     _react.fireEvent.click(checkboxItems[1].childNodes[0]); // beta
 
 
-    expect(ON_CHANGE_CALLS.length).toEqual(3);
-    expect(ON_CHANGE_CALLS[2]).toMatchObject({
+    expect(ON_CHANGE_CALLS.length).toEqual(2);
+    expect(ON_CHANGE_CALLS[1]).toMatchObject({
       name: FIELD_ID,
       value: [OPTIONS[0].value, OPTIONS[1].value]
     });
@@ -120,8 +120,8 @@ describe('utils.Component.get', function () {
     _react.fireEvent.click(checkboxItems[0].childNodes[0]); // alpha (unchecked this time)
 
 
-    expect(ON_CHANGE_CALLS.length).toEqual(4);
-    expect(ON_CHANGE_CALLS[3]).toMatchObject({
+    expect(ON_CHANGE_CALLS.length).toEqual(3);
+    expect(ON_CHANGE_CALLS[2]).toMatchObject({
       name: FIELD_ID,
       value: [OPTIONS[1].value]
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukhomeoffice/cop-react-form-renderer",
-  "version": "3.17.0",
+  "version": "3.18.0",
   "private": false,
   "scripts": {
     "clean": "rimraf dist",
@@ -16,7 +16,7 @@
     "post-compile": "rimraf dist/*.test.* dist/**/*.test.* dist/**/*.stories.* dist/docs dist/assets"
   },
   "dependencies": {
-    "@ukhomeoffice/cop-react-components": "1.12.0",
+    "@ukhomeoffice/cop-react-components": "1.13.1",
     "axios": "^0.23.0",
     "dayjs": "^1.11.0",
     "govuk-frontend": "^3.13.0",