@ukhomeoffice/cop-react-form-renderer 4.16.0 → 4.16.1

package/dist/components/FormRenderer/FormRenderer.js

@@ -369,7 +369,7 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
           components: components
         }, _objectSpread(_objectSpread(_objectSpread({}, data), patch), formState.page.formData), _models.EventTypes.SUBMIT);
 
-        submissionData.formStatus = _helpers.default.getSubmissionStatus(type, pages, pageId, action, submissionData, currentTask, true);
+        submissionData.formStatus = _helpers.default.getSubmissionStatus(type, pages, pageId, action, submissionData, currentTask, true, hubDetails === null || hubDetails === void 0 ? void 0 : hubDetails.sections);
 
         if (patch) {
           setData(submissionData);
@@ -439,6 +439,9 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
       } else if (currentTask.state === _models.TaskStates.TYPES.IN_PROGRESS) {
         var _currentPage = data.formStatus.tasks[currentTask.name].currentPage;
         onPageChange(_currentPage || currentTask.pages[0]);
+      } else if (currentTask.firstPage) {
+        var _currentPage2 = currentTask.firstPage;
+        onPageChange(_currentPage2 || currentTask.pages[0]);
       } else {
         onPageChange(currentTask.pages[0]);
       }

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

@@ -618,14 +618,14 @@ describe('components', function () {
               })));
 
             case 5:
-              taskList = container.childNodes[0].childNodes[1]; //Check status's are correct
+              taskList = container.childNodes[0].childNodes[1]; //Check statuses are correct
 
-              firstTaskStatus = taskList.childNodes[3].childNodes[0].childNodes[1];
+              firstTaskStatus = taskList.childNodes[3].childNodes[1].childNodes[1];
               expect(firstTaskStatus.textContent).toEqual(_models.TaskStates.DETAILS[_models.TaskStates.TYPES.NOT_STARTED].label);
-              secondTaskStatus = taskList.childNodes[3].childNodes[1].childNodes[1];
+              secondTaskStatus = taskList.childNodes[3].childNodes[2].childNodes[1];
               expect(secondTaskStatus.textContent).toEqual(_models.TaskStates.DETAILS[_models.TaskStates.TYPES.CANNOT_START_YET].label); //Launch first task
 
-              firstTask = taskList.childNodes[3].childNodes[0].childNodes[0].childNodes[0];
+              firstTask = taskList.childNodes[3].childNodes[1].childNodes[0].childNodes[0];
               expect(firstTask.textContent).toEqual('Date, location and mode details');
 
               _react.fireEvent.click(firstTask, {}); //Fill first page and navigate
@@ -694,11 +694,11 @@ describe('components', function () {
               _react.fireEvent.click(cyaPage.childNodes[5].childNodes[0], {}); //Should be back at task list
 
 
-              expect(container.childNodes[0].childNodes[0].textContent).toEqual('Task List Form'); //Check status's are correct
+              expect(container.childNodes[0].childNodes[0].textContent).toEqual('Task List Form'); //Check statuses are correct
 
-              firstTaskStatus = container.childNodes[0].childNodes[1].childNodes[3].childNodes[0].childNodes[1];
+              firstTaskStatus = container.childNodes[0].childNodes[1].childNodes[3].childNodes[1].childNodes[1];
               expect(firstTaskStatus.textContent).toEqual(_models.TaskStates.DETAILS[_models.TaskStates.TYPES.COMPLETE].label);
-              secondTaskStatus = container.childNodes[0].childNodes[1].childNodes[3].childNodes[1].childNodes[1];
+              secondTaskStatus = container.childNodes[0].childNodes[1].childNodes[3].childNodes[2].childNodes[1];
               expect(secondTaskStatus.textContent).toEqual(_models.TaskStates.DETAILS[_models.TaskStates.TYPES.NOT_STARTED].label); //Check final data submitted to backend is as expected
 
               finalSubmit = ON_SUBMIT_CALLS[ON_SUBMIT_CALLS.length - 1];
@@ -747,7 +747,7 @@ describe('components', function () {
             case 4:
               taskList = container.childNodes[0].childNodes[1]; //Launch first task
 
-              _react.fireEvent.click(taskList.childNodes[3].childNodes[0].childNodes[0].childNodes[0], {}); //Fill first page and navigate
+              _react.fireEvent.click(taskList.childNodes[3].childNodes[1].childNodes[0].childNodes[0], {}); //Fill first page and navigate
 
 
               newPage = container.childNodes[0].childNodes[0];
@@ -786,7 +786,7 @@ describe('components', function () {
               _react.fireEvent.click(container.childNodes[0].childNodes[0].childNodes[5].childNodes[0], {}); //Launch same task again
 
 
-              _react.fireEvent.click(container.childNodes[0].childNodes[1].childNodes[3].childNodes[0].childNodes[0].childNodes[0], {}); //Should be at CYA page
+              _react.fireEvent.click(container.childNodes[0].childNodes[1].childNodes[3].childNodes[1].childNodes[0].childNodes[0], {}); //Should be at CYA page
 
 
               expect(container.childNodes[0].childNodes[0].childNodes[0].textContent).toEqual('Check your answers');
@@ -838,7 +838,7 @@ describe('components', function () {
             case 7:
               taskList = container.childNodes[0].childNodes[1]; // Launch first task
 
-              _react.fireEvent.click(taskList.childNodes[3].childNodes[0].childNodes[0].childNodes[0], {}); // Fill first page and navigate
+              _react.fireEvent.click(taskList.childNodes[3].childNodes[1].childNodes[0].childNodes[0], {}); // Fill first page and navigate
 
 
               newPage = container.childNodes[0].childNodes[0];
@@ -874,7 +874,7 @@ describe('components', function () {
               _react.fireEvent.click(newPage.childNodes[2].childNodes[0], {}); // Launch same task again
 
 
-              _react.fireEvent.click(container.childNodes[0].childNodes[1].childNodes[3].childNodes[0].childNodes[0].childNodes[0], {}); // Should be on the second page
+              _react.fireEvent.click(container.childNodes[0].childNodes[1].childNodes[3].childNodes[1].childNodes[0].childNodes[0], {}); // Should be on the second page
 
 
               expect(container.childNodes[0].childNodes[0].childNodes[0].textContent).toEqual('Event Mode');
@@ -947,5 +947,60 @@ describe('components', function () {
         }
       }, _callee26);
     })));
+    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() {
+      var ON_SUBMIT_CALLS, ON_SUBMIT, HOOKS, TASK_LIST_NON_SEQUENTIAL, taskList, firstTask, newPage;
+      return regeneratorRuntime.wrap(function _callee28$(_context28) {
+        while (1) {
+          switch (_context28.prev = _context28.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
+              };
+              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) {
+                  while (1) {
+                    switch (_context27.prev = _context27.next) {
+                      case 0:
+                        (0, _reactDom.render)( /*#__PURE__*/_react2.default.createElement(_FormRenderer.default, _extends({}, TASK_LIST_NON_SEQUENTIAL, {
+                          hooks: HOOKS
+                        })), container);
+
+                      case 1:
+                      case "end":
+                        return _context27.stop();
+                    }
+                  }
+                }, _callee27);
+              })));
+
+            case 7:
+              taskList = container.childNodes[0].childNodes[1]; // Launch first task of second section
+
+              firstTask = taskList.childNodes[5].childNodes[1].childNodes[0].childNodes[0];
+              expect(firstTask.textContent).toEqual('People details');
+
+              _react.fireEvent.click(firstTask, {}); // Should be at Surname page
+
+
+              newPage = container.childNodes[0].childNodes[0];
+              expect(newPage.childNodes[0].textContent).toEqual('Surname');
+
+            case 13:
+            case "end":
+              return _context28.stop();
+          }
+        }
+      }, _callee28);
+    })));
   });
 });

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

@@ -11,7 +11,7 @@ var _getNextPageId = _interopRequireDefault(require("./getNextPageId"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var getSubmissionStatus = function getSubmissionStatus(formType, pages, currentPageId, action, formData, currentTask, isCompleted) {
+var getSubmissionStatus = function getSubmissionStatus(formType, pages, currentPageId, action, formData, currentTask, isCompleted, sections) {
   if (formType === _models.FormTypes.TASK || formType === _models.FormTypes.FORM_WITH_TASK) {
     var formStatus = formData.formStatus || {};
     formStatus.tasks = formStatus.tasks || {};
@@ -19,6 +19,30 @@ var getSubmissionStatus = function getSubmissionStatus(formType, pages, currentP
 
     if (currentPageId === (_models.FormPages.CYA || 'submitForm') && isCompleted) {
       formStatus.tasks[currentTask.name].complete = true;
+    } else if (!currentTask.name) {
+      // undefined means that the currentTask isn't set because onTaskAction hasn't been called
+      // so the user is in the pre-task-list section of the form
+      // in this case check whether the page is part of a section defined in the hub sections
+      // if it is, set the section to complete as long as isCompleted == true
+      if (sections) {
+        sections.forEach(function (section) {
+          section.tasks.forEach(function (task) {
+            var lastPage = task.pages[task.pages.length - 1];
+
+            if ((lastPage === currentPageId || lastPage.id === currentPageId) && isCompleted) {
+              formStatus.tasks[task.name] = {
+                complete: isCompleted,
+                currentPage: currentPageId
+              };
+            } else if (task.pages.includes(currentPageId)) {
+              formStatus.tasks[task.name] = {
+                complete: false,
+                currentPage: currentPageId
+              };
+            }
+          });
+        });
+      }
     } else if ((action === null || action === void 0 ? void 0 : action.type) === _models.PageAction.TYPES.SAVE_AND_NAVIGATE) {
       formStatus.tasks[currentTask.name] = {
         complete: false,

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

@@ -255,6 +255,27 @@ describe('components', function () {
               })
             });
           });
+          it("should mark the current task as complete if the current task is 'undefined' i.e. it is a pre-task-list task", function () {
+            var CURRENT_PAGE_ID = PAGES[PAGES.length - 1].id;
+            var TASK_NAME = undefined;
+            var CURRENT_TASK = {
+              name: TASK_NAME
+            };
+            var ACTION = {
+              complete: true
+            };
+            var TASKS = [{
+              pages: PAGES
+            }];
+            var SECTIONS = [{
+              tasks: TASKS
+            }];
+            expect((0, _getSubmissionStatus.default)(FORM_TYPE, PAGES, CURRENT_PAGE_ID, ACTION, {}, CURRENT_TASK, true, SECTIONS)).toMatchObject({
+              tasks: _defineProperty({}, TASK_NAME, {
+                complete: true
+              })
+            });
+          });
         });
       });
     });

package/dist/components/TaskList/TaskList.js

@@ -13,6 +13,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _copReactComponents = require("@ukhomeoffice/cop-react-components");
 
+var _dist = require("@ukhomeoffice/cop-react-components/dist");
+
 var _models = require("../../models");
 
 var _Task = _interopRequireDefault(require("./Task"));
@@ -89,7 +91,7 @@ var TaskList = function TaskList(_ref) {
       className: classes('section')
     }, sections.length > 1 ? "".concat(index + 1, ". ") : '', section.name), /*#__PURE__*/_react.default.createElement("ol", {
       className: classes('items')
-    }, section.tasks.map(function (task) {
+    }, /*#__PURE__*/_react.default.createElement(_dist.Hint, null, section.label ? section.label : ''), section.tasks.map(function (task) {
       return /*#__PURE__*/_react.default.createElement(_Task.default, {
         key: "".concat(section.name, "-").concat(task.name),
         task: task,
@@ -105,6 +107,7 @@ TaskList.propTypes = {
   incompleteTitle: _propTypes.default.string,
   sections: _propTypes.default.arrayOf(_propTypes.default.shape({
     name: _propTypes.default.string.isRequired,
+    label: _propTypes.default.string,
     tasks: _propTypes.default.arrayOf(_propTypes.default.shape({
       name: _propTypes.default.string.isRequired,
       pages: _propTypes.default.array.isRequired,

package/dist/components/TaskList/TaskList.stories.mdx

@@ -107,3 +107,58 @@ This can be specified within the `hub` portion of the form JSON:
     }}
   </Story>
 </Canvas>
+
+## With labels on tasks
+This is a non-required property of the individual `tasks` fields of the form JSON:
+```
+{
+  ...
+  tasks: [
+    {
+      ...
+      label: 'This is a label'
+    }
+    ...
+}
+```
+
+<Canvas withToolbar>
+  <Story name="With labels on tasks">
+    {() => {
+      const onAction = (row) => {
+        console.log('action clicked', row);
+      };
+      const COP_REF = '123';
+      const REF_TITLE = 'COP reference number';
+      const SECTIONS = [
+        {
+          name: 'Add event details',
+          label: 'Task 1 label',
+          tasks: [
+            { name: 'Date, location and mode details', state: 'complete' },
+            { name: 'Officer and agency details', state: 'inProgress' },
+          ],
+        },
+        {
+          name: 'Add people details',
+          tasks: [
+            { name: 'People details', state: 'complete' },
+            { name: 'Immigration details', state: 'inProgress' },
+            { name: 'Journey details', state: 'notStarted' },
+          ],
+        },
+        {
+          name: 'Add item details',
+          label: 'Task 3 label',
+          tasks: [
+            { name: 'Item details', state: 'cannotStartYet' },
+            { name: 'Search and interception details', state: 'cannotStartYet' },
+          ],
+        },
+      ];
+      return (
+        <TaskList refNumber={COP_REF} refTitle={REF_TITLE} sections={SECTIONS} />
+      );
+    }}
+  </Story>
+</Canvas>

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

@@ -23,6 +23,7 @@ describe('components', function () {
       var REF_TITLE = 'COP reference number';
       var sections = [{
         name: 'These are your tasks',
+        label: 'This is the label for your first tasks',
         tasks: [{
           name: 'Nice task',
           state: 'complete',
@@ -38,6 +39,7 @@ describe('components', function () {
         }]
       }, {
         name: 'These are your extra bonus tasks',
+        label: 'This is the label for your extra tasks',
         tasks: [{
           name: 'Nice task',
           state: 'complete',
@@ -78,12 +80,16 @@ describe('components', function () {
       expect(subSectionOneHeading.tagName).toEqual('H2');
       expect(subSectionOneHeading.textContent).toEqual('1. These are your tasks');
       var subSectionOneList = container.childNodes[0].childNodes[5];
-      expect(subSectionOneList.childNodes.length).toEqual(3);
+      expect(subSectionOneList.childNodes.length).toEqual(4);
       var subSectionTwoHeading = container.childNodes[0].childNodes[6];
       expect(subSectionTwoHeading.tagName).toEqual('H2');
       expect(subSectionTwoHeading.textContent).toEqual('2. These are your extra bonus tasks');
       var subSectionTwoList = container.childNodes[0].childNodes[7];
-      expect(subSectionTwoList.childNodes.length).toEqual(3);
+      expect(subSectionTwoList.childNodes.length).toEqual(4);
+      var subSectionOneLabel = container.childNodes[0].childNodes[5].firstChild;
+      expect(subSectionOneLabel.textContent).toEqual('This is the label for your first tasks');
+      var subSectionTwoLabel = container.childNodes[0].childNodes[7].firstChild;
+      expect(subSectionTwoLabel.textContent).toEqual('This is the label for your extra tasks');
     });
     it('should not show incomplete title if form is complete', function () {
       var COP_REF = '123';
@@ -263,7 +269,7 @@ describe('components', function () {
       expect(incompleteForm.textContent).toEqual(INCOMPLETE_TITLE);
     });
   });
-  it('should pass the the selected task to the given onTaskAction function', function () {
+  it('should pass the selected task to the given onTaskAction function', function () {
     var COP_REF = '123';
     var REF_TITLE = 'COP reference number';
     var ON_CLICK_CALLS = [];
@@ -297,9 +303,9 @@ describe('components', function () {
     })),
         container = _render6.container;
 
-    var firstTask = container.childNodes[0].childNodes[5].childNodes[0].childNodes[0].childNodes[0];
-    var secondTask = container.childNodes[0].childNodes[5].childNodes[1].childNodes[0].childNodes[0];
-    var thirdTask = container.childNodes[0].childNodes[5].childNodes[2].childNodes[0].childNodes[0];
+    var firstTask = container.childNodes[0].childNodes[5].childNodes[1].childNodes[0].childNodes[0];
+    var secondTask = container.childNodes[0].childNodes[5].childNodes[2].childNodes[0].childNodes[0];
+    var thirdTask = container.childNodes[0].childNodes[5].childNodes[3].childNodes[0].childNodes[0];
 
     _react.fireEvent.click(firstTask.childNodes[0]);
 

package/dist/json/taskList.json

@@ -238,12 +238,12 @@
         "tasks": [
           {
             "name": "People details",
+            "firstPage": "surname",
             "pages": ["firstName", "surname"],
             "state": "complete"
           },
           {
             "name": "Immigration details",
-            "firstPage": "immigrationDate",
             "pages": ["immigrationDate"],
             "state": "inProgress"
           },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukhomeoffice/cop-react-form-renderer",
-  "version": "4.16.0",
+  "version": "4.16.1",
   "private": false,
   "scripts": {
     "clean": "rimraf dist",