@ukhomeoffice/cop-react-form-renderer 3.13.0 → 3.15.0

package/dist/components/CheckYourAnswers/CheckYourAnswers.stories.mdx

@@ -1,21 +1,15 @@
 <!-- Global imports -->
 
 import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
-import {
-  Details,
-  Heading,
-  Link,
-  Tag,
-} from '@ukhomeoffice/cop-react-components';
+import { Details, Heading, Link, Tag } from '@ukhomeoffice/cop-react-components';
 import withMock from 'storybook-addon-mock';
 
 <!-- Local imports -->
-
+import { HooksContextProvider, ValidationContextProvider } from '../../context';
 import Utils from '../../utils';
 import CheckYourAnswers from './CheckYourAnswers';
 
 <!-- JSON documents -->
-
 import CIVIL_SERVANT from '../../json/areYouACivilServant.json';
 import GRADE from '../../json/grade.json';
 import TEAMS from '../../json/team.json';
@@ -84,11 +78,15 @@ Renders the **Check your answers** screen for a form.
         console.log('row action invoked', page);
       };
       return (
-        <CheckYourAnswers
-          pages={PAGES}
-          onAction={ON_ACTION}
-          onRowAction={ON_ROW_ACTION}
-        />
+        <HooksContextProvider>
+          <ValidationContextProvider>
+            <CheckYourAnswers
+              pages={PAGES}
+              onAction={ON_ACTION}
+              onRowAction={ON_ROW_ACTION}
+            />
+          </ValidationContextProvider>
+        </HooksContextProvider>
       );
     }}
   </Story>
@@ -146,12 +144,16 @@ Renders the **Check your answers** screen for a form.
         console.log('row action invoked', page);
       };
       return (
-        <CheckYourAnswers
-          pages={PAGES}
-          hide_page_titles={true}
-          onAction={ON_ACTION}
-          onRowAction={ON_ROW_ACTION}
-        />
+        <HooksContextProvider>
+          <ValidationContextProvider>
+            <CheckYourAnswers
+              pages={PAGES}
+              hide_page_titles={true}
+              onAction={ON_ACTION}
+              onRowAction={ON_ROW_ACTION}
+            />
+          </ValidationContextProvider>
+        </HooksContextProvider>
       );
     }}
   </Story>
@@ -200,13 +202,17 @@ Renders the **Check your answers** screen for a form.
         console.log('row action invoked', page);
       };
       return (
-        <CheckYourAnswers
-          pages={PAGES}
-          hide_page_titles={true}
-          actions={ACTIONS}
-          onAction={ON_ACTION}
-          onRowAction={ON_ROW_ACTION}
-        />
+        <HooksContextProvider>
+          <ValidationContextProvider>
+            <CheckYourAnswers
+              pages={PAGES}
+              hide_page_titles={true}
+              actions={ACTIONS}
+              onAction={ON_ACTION}
+              onRowAction={ON_ROW_ACTION}
+            />
+          </ValidationContextProvider>
+        </HooksContextProvider>
       );
     }}
   </Story>
@@ -258,15 +264,19 @@ Renders the **Check your answers** screen for a form.
         console.log('row action invoked', page);
       };
       return (
-        <CheckYourAnswers
-          pages={PAGES}
-          hide_page_titles={true}
-          onAction={ON_ACTION}
-          onRowAction={ON_ROW_ACTION}
-          hide_title={true}
-          summaryListClassModifiers='no-border'
-          noChangeAction={true}
-        />
+        <HooksContextProvider>
+          <ValidationContextProvider>
+            <CheckYourAnswers
+              pages={PAGES}
+              hide_page_titles={true}
+              onAction={ON_ACTION}
+              onRowAction={ON_ROW_ACTION}
+              hide_title={true}
+              summaryListClassModifiers='no-border'
+              noChangeAction={true}
+            />
+          </ValidationContextProvider>
+        </HooksContextProvider>
       );
     }}
   </Story>
@@ -320,13 +330,17 @@ Renders the **Check your answers** screen for a form.
         console.log('row action invoked', page);
       };
       return (
-        <CheckYourAnswers
-          pages={PAGES}
-          hide_page_titles={false}
-          onAction={ON_ACTION}
-          onRowAction={ON_ROW_ACTION}
-          groups={CYA.groups}
-        />
+        <HooksContextProvider>
+          <ValidationContextProvider>
+            <CheckYourAnswers
+              pages={PAGES}
+              hide_page_titles={false}
+              onAction={ON_ACTION}
+              onRowAction={ON_ROW_ACTION}
+              groups={CYA.groups}
+            />
+          </ValidationContextProvider>
+        </HooksContextProvider>
       );
     }}
   </Story>
@@ -359,33 +373,37 @@ Renders the **Check your answers** screen for a form.
       ],
     }}>
     {() => {
-        const DATA = Utils.Data.setupForm(
-         GROUP.pages,
-         GROUP.components,
-         GROUP_DATA
-       );
-       const PAGES = Utils.FormPage.getAll(
-         GROUP.pages,
-         GROUP.components,
-         { ...DATA }
-       );
-       const ACTIONS = GROUP.cya.actions;
-       const ON_ACTION = (action, patch, onError) => {
-         console.log('action invoked', action, patch);
-       };
-       const ON_ROW_ACTION = (page) => {
-         console.log('row action invoked', page);
-       };
-       return (
-         <CheckYourAnswers
-           pages={PAGES}
-           hide_page_titles={true}
-           actions={ACTIONS}
-           onAction={ON_ACTION}
-           onRowAction={ON_ROW_ACTION}
-         />
-       );
-     }}
+      const DATA = Utils.Data.setupForm(
+        GROUP.pages,
+        GROUP.components,
+        GROUP_DATA
+      );
+      const PAGES = Utils.FormPage.getAll(
+        GROUP.pages,
+        GROUP.components,
+        { ...DATA }
+      );
+      const ACTIONS = GROUP.cya.actions;
+      const ON_ACTION = (action, patch, onError) => {
+        console.log('action invoked', action, patch);
+      };
+      const ON_ROW_ACTION = (page) => {
+        console.log('row action invoked', page);
+      };
+      return (
+        <HooksContextProvider>
+          <ValidationContextProvider>
+            <CheckYourAnswers
+              pages={PAGES}
+              hide_page_titles={true}
+              actions={ACTIONS}
+              onAction={ON_ACTION}
+              onRowAction={ON_ROW_ACTION}
+            />
+          </ValidationContextProvider>
+        </HooksContextProvider>
+      );
+    }}
   </Story>
 </Canvas>
 

package/dist/components/FormComponent/FormComponent.stories.mdx

@@ -4,6 +4,7 @@ import { Details, Heading, Link } from '@ukhomeoffice/cop-react-components';
 import withMock from 'storybook-addon-mock';
 
 <!-- Local imports -->
+import { HooksContextProvider, ValidationContextProvider } from '../../context';
 import FormComponent from './FormComponent';
 
 <!-- JSON documents -->
@@ -54,7 +55,11 @@ on the basis of a <Link href="/?path=/docs/f-json-component">JSON</Link> configu
         // Do something with the target here.
       };
       return (
-        <FormComponent component={COMPONENT} value={''} onChange={ON_CHANGE} />
+        <HooksContextProvider>
+          <ValidationContextProvider>
+            <FormComponent component={COMPONENT} value={''} onChange={ON_CHANGE} />
+          </ValidationContextProvider>
+        </HooksContextProvider>
       );
     }}
   </Story>
@@ -101,7 +106,11 @@ on the basis of a <Link href="/?path=/docs/f-json-component">JSON</Link> configu
         // Do something with the target here.
       };
       return (
-        <FormComponent component={COMPONENT} value={''} onChange={ON_CHANGE} />
+        <HooksContextProvider>
+          <ValidationContextProvider>
+            <FormComponent component={COMPONENT} value={''} onChange={ON_CHANGE} />
+          </ValidationContextProvider>
+        </HooksContextProvider>
       );
     }}
   </Story>
@@ -117,7 +126,11 @@ on the basis of a <Link href="/?path=/docs/f-json-component">JSON</Link> configu
         // Do something with the target here.
       };
       return (
-        <FormComponent component={COMPONENT} value={''} onChange={ON_CHANGE} />
+        <HooksContextProvider>
+          <ValidationContextProvider>
+            <FormComponent component={COMPONENT} value={''} onChange={ON_CHANGE} />
+          </ValidationContextProvider>
+        </HooksContextProvider>
       );
     }}
   </Story>
@@ -160,7 +173,11 @@ on the basis of a <Link href="/?path=/docs/f-json-component">JSON</Link> configu
         // Do something with the target here.
       };
       return (
-        <FormComponent component={COMPONENT} value={''} wrap={false} onChange={ON_CHANGE} />
+        <HooksContextProvider>
+          <ValidationContextProvider>
+            <FormComponent component={COMPONENT} value={''} wrap={false} onChange={ON_CHANGE} />
+          </ValidationContextProvider>
+        </HooksContextProvider>
       );
     }}
   </Story>

package/dist/components/FormPage/FormPage.stories.mdx

@@ -4,6 +4,7 @@ import { Details, Heading, Link } from '@ukhomeoffice/cop-react-components';
 import withMock from 'storybook-addon-mock';
 
 <!-- Local imports -->
+import { HooksContextProvider, ValidationContextProvider } from '../../context';
 import Utils from '../../utils';
 import FormPage from './FormPage';
 
@@ -51,7 +52,11 @@ on the basis of a <Link href="/?path=/docs/f-json-page">JSON</Link> configuratio
         console.log('action invoked', action, patch);
       };
       return (
-        <FormPage page={PAGE} onAction={ON_ACTION} />
+        <HooksContextProvider>
+          <ValidationContextProvider>
+            <FormPage page={PAGE} onAction={ON_ACTION} />
+          </ValidationContextProvider>
+        </HooksContextProvider>
       );
     }}
   </Story>
@@ -94,7 +99,11 @@ on the basis of a <Link href="/?path=/docs/f-json-page">JSON</Link> configuratio
         console.log('action invoked', action, patch);
       };
       return (
-        <FormPage page={PAGE} onAction={ON_ACTION} />
+        <HooksContextProvider>
+          <ValidationContextProvider>
+            <FormPage page={PAGE} onAction={ON_ACTION} />
+          </ValidationContextProvider>
+        </HooksContextProvider>
       );
     }}
   </Story>
@@ -111,7 +120,11 @@ on the basis of a <Link href="/?path=/docs/f-json-page">JSON</Link> configuratio
         console.log('action invoked', action, patch);
       };
       return (
-        <FormPage page={PAGE} onAction={ON_ACTION} />
+        <HooksContextProvider>
+          <ValidationContextProvider>
+            <FormPage page={PAGE} onAction={ON_ACTION} />
+          </ValidationContextProvider>
+        </HooksContextProvider>
       );
     }}
   </Story>

package/dist/components/FormRenderer/FormRenderer.js

@@ -323,10 +323,15 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
       setCurrentTask(currentTask);
 
       if (currentTask.state === _models.TaskStates.TYPES.COMPLETE) {
-        onPageChange(_models.FormPages.CYA);
+        if (hubDetails !== null && hubDetails !== void 0 && hubDetails.noTaskCYAs) {
+          var currentPage = data.formStatus.tasks[currentTask.name].currentPage;
+          onPageChange(currentPage || currentTask.pages[0]);
+        } else {
+          onPageChange(_models.FormPages.CYA);
+        }
       } else if (currentTask.state === _models.TaskStates.TYPES.IN_PROGRESS) {
-        var currentPage = data.formStatus.tasks[currentTask.name].currentPage;
-        onPageChange(currentPage || currentTask.pages[0]);
+        var _currentPage = data.formStatus.tasks[currentTask.name].currentPage;
+        onPageChange(_currentPage || currentTask.pages[0]);
       } else {
         onPageChange(currentTask.pages[0]);
       }

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

@@ -747,12 +747,100 @@ describe('components', function () {
         }
       }, _callee20);
     })));
-    it('should handle cancellation from a page', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee22() {
-      var ON_CANCEL_CALLS, ON_CANCEL, HOOKS, form, hub, _hub$childNodes5, civilServantList, link, page, cancel;
-
+    it('should go to the last page of a complete task if noTaskCYAs specified', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee22() {
+      var ON_SUBMIT, HOOKS, TASK_LIST_WITH_NO_TASK_CYAS, taskList, newPage;
       return regeneratorRuntime.wrap(function _callee22$(_context22) {
         while (1) {
           switch (_context22.prev = _context22.next) {
+            case 0:
+              ON_SUBMIT = function ON_SUBMIT(type, payload, onSuccess, onError) {
+                onSuccess();
+              };
+
+              HOOKS = {
+                onSubmit: ON_SUBMIT
+              };
+              TASK_LIST_WITH_NO_TASK_CYAS = JSON.parse(JSON.stringify(_taskList.default));
+              TASK_LIST_WITH_NO_TASK_CYAS.hub.noTaskCYAs = true;
+              TASK_LIST_WITH_NO_TASK_CYAS.pages[1].actions[0] = {
+                type: 'save',
+                complete: true
+              };
+              _context22.next = 7;
+              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({}, TASK_LIST_WITH_NO_TASK_CYAS, {
+                          hooks: HOOKS
+                        })), container);
+
+                      case 1:
+                      case "end":
+                        return _context21.stop();
+                    }
+                  }
+                }, _callee21);
+              })));
+
+            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
+
+
+              newPage = container.childNodes[0].childNodes[0];
+
+              _react.fireEvent.change(newPage.childNodes[1].childNodes[2].childNodes[0].childNodes[1], {
+                target: {
+                  name: 'date-day',
+                  value: '7'
+                }
+              });
+
+              _react.fireEvent.change(newPage.childNodes[1].childNodes[2].childNodes[1].childNodes[1], {
+                target: {
+                  name: 'date-month',
+                  value: '7'
+                }
+              });
+
+              _react.fireEvent.change(newPage.childNodes[1].childNodes[2].childNodes[2].childNodes[1], {
+                target: {
+                  name: 'date-year',
+                  value: '2022'
+                }
+              });
+
+              _react.fireEvent.click(newPage.childNodes[2].childNodes[0], {}); // Fill second page
+
+
+              newPage = container.childNodes[0].childNodes[0];
+
+              _react.fireEvent.click(newPage.childNodes[1].childNodes[2].childNodes[0].childNodes[0], {});
+
+              _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
+
+
+              expect(container.childNodes[0].childNodes[0].childNodes[0].textContent).toEqual('Event Mode');
+
+            case 19:
+            case "end":
+              return _context22.stop();
+          }
+        }
+      }, _callee22);
+    })));
+    it('should handle cancellation from a page', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee24() {
+      var ON_CANCEL_CALLS, ON_CANCEL, HOOKS, form, hub, _hub$childNodes5, civilServantList, link, page, cancel;
+
+      return regeneratorRuntime.wrap(function _callee24$(_context24) {
+        while (1) {
+          switch (_context24.prev = _context24.next) {
             case 0:
               ON_CANCEL_CALLS = [];
 
@@ -763,11 +851,11 @@ describe('components', function () {
               HOOKS = {
                 onCancel: ON_CANCEL
               };
-              _context22.next = 5;
-              return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee21() {
-                return regeneratorRuntime.wrap(function _callee21$(_context21) {
+              _context24.next = 5;
+              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({}, _userProfile.default, {
                           data: _userProfileData.default,
@@ -776,10 +864,10 @@ describe('components', function () {
 
                       case 1:
                       case "end":
-                        return _context21.stop();
+                        return _context23.stop();
                     }
                   }
-                }, _callee21);
+                }, _callee23);
               })));
 
             case 5:
@@ -803,10 +891,10 @@ describe('components', function () {
 
             case 15:
             case "end":
-              return _context22.stop();
+              return _context24.stop();
           }
         }
-      }, _callee22);
+      }, _callee24);
     })));
   });
 });

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

@@ -13,22 +13,20 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 var getSubmissionStatus = function getSubmissionStatus(formType, pages, currentPageId, action, formData, currentTask, isCompleted) {
   if (formType === _models.FormTypes.TASK) {
-    var formStatus = formData.formStatus ? formData.formStatus : {};
-    formStatus.tasks = formStatus.tasks ? formStatus.tasks : {};
-    formStatus.tasks[currentTask.name] = formStatus.tasks[currentTask.name] ? formStatus.tasks[currentTask.name] : {};
+    var formStatus = formData.formStatus || {};
+    formStatus.tasks = formStatus.tasks || {};
+    formStatus.tasks[currentTask.name] = formStatus.tasks[currentTask.name] || {};
 
     if (currentPageId === (_models.FormPages.CYA || 'submitForm') && isCompleted) {
       formStatus.tasks[currentTask.name].complete = true;
     } else if ((action === null || action === void 0 ? void 0 : action.type) === _models.PageAction.TYPES.SAVE_AND_NAVIGATE) {
-      console.log('pg action sc');
       formStatus.tasks[currentTask.name] = {
         complete: false,
         currentPage: (0, _getNextPageId.default)(formType, pages, currentPageId, action, formData)
       };
     } else {
-      console.log('got to else stmt');
       formStatus.tasks[currentTask.name] = {
-        complete: false,
+        complete: !!(action !== null && action !== void 0 && action.complete),
         currentPage: currentPageId
       };
     }

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

@@ -240,6 +240,21 @@ describe('components', function () {
               })
             });
           });
+          it("should mark the current task as complete if the action indicates as much", function () {
+            var CURRENT_PAGE_ID = PAGES[0].id;
+            var TASK_NAME = 'taskName';
+            var CURRENT_TASK = {
+              name: TASK_NAME
+            };
+            var ACTION = {
+              complete: true
+            };
+            expect((0, _getSubmissionStatus.default)(FORM_TYPE, PAGES, CURRENT_PAGE_ID, ACTION, {}, CURRENT_TASK, true)).toMatchObject({
+              tasks: _defineProperty({}, TASK_NAME, {
+                complete: true
+              })
+            });
+          });
         });
       });
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukhomeoffice/cop-react-form-renderer",
-  "version": "3.13.0",
+  "version": "3.15.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.10.0",
+    "@ukhomeoffice/cop-react-components": "1.12.0",
     "axios": "^0.23.0",
     "dayjs": "^1.11.0",
     "govuk-frontend": "^3.13.0",