@ukhomeoffice/cop-react-form-renderer 3.25.0 → 3.26.2

package/dist/components/FormComponent/FormComponent.js

@@ -152,6 +152,7 @@ var FormComponent = function FormComponent(_ref) {
     content: _utils.default.interpolateString(component.content, formData),
     hint: _utils.default.interpolateString(component.hint, formData),
     cya_label: _utils.default.interpolateString(component.cya_label, formData),
+    suffix: _utils.default.interpolateString(component.suffix, formData),
     options: options,
     value: value || _utils.default.Component.defaultValue(component),
     onChange: onComponentChangeExtended,

package/dist/components/FormRenderer/FormRenderer.js

@@ -101,7 +101,7 @@ var DEFAULT_CLASS = 'hods-form';
 exports.DEFAULT_CLASS = DEFAULT_CLASS;
 
 var InternalFormRenderer = function InternalFormRenderer(_ref2) {
-  var _formState$page2;
+  var _formState$page3;
 
   var title = _ref2.title,
       type = _ref2.type,
@@ -160,7 +160,7 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
       hubDetails = _useState16[0],
       setHubDetails = _useState16[1];
 
-  var _useState17 = (0, _react.useState)('start'),
+  var _useState17 = (0, _react.useState)('load'),
       _useState18 = _slicedToArray(_useState17, 2),
       pagePoint = _useState18[0],
       setPagePoint = _useState18[1]; // Set up hooks.
@@ -173,11 +173,25 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
   var _useValidation = (0, _hooks.useValidation)(),
       addErrors = _useValidation.addErrors,
       clearErrors = _useValidation.clearErrors,
-      validate = _useValidation.validate; // Setup data.
+      validate = _useValidation.validate; // Need to set submission data when going back
+
+
+  window.onpopstate = function () {
+    var _formState$page;
+
+    if (components && pages && data && (_formState$page = formState.page) !== null && _formState$page !== void 0 && _formState$page.formData && pagePoint === undefined) {
+      var submissionData = _utils.default.Format.form({
+        pages: pages,
+        components: components
+      }, _objectSpread(_objectSpread({}, data), formState.page.formData), _models.EventTypes.SUBMIT);
+
+      setData(submissionData);
+    }
+  }; // Setup data.
 
 
   (0, _react.useEffect)(function () {
-    if (components && _pages && _data && (['start', 'end'].includes(pagePoint) || viewOnly)) {
+    if (components && _pages && _data && (['load', 'submit'].includes(pagePoint) || viewOnly)) {
       var _data$formStatus;
 
       setData(_utils.default.Data.setupForm(_pages, components, _data));
@@ -279,7 +293,7 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
         _handlers.default.navigate(action, pageId, onPageChange);
       } else {
         if (action.type === 'submit') {
-          setPagePoint('end');
+          setPagePoint('submit');
         } // Save draft or submit.
 
 
@@ -358,7 +372,7 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
     // Check to see whether the action is able to proceed, which in
     // in the case of a submission will validate the fields in the page.
     if (action.type === _models.PageAction.TYPES.SUBMIT) {
-      setPagePoint('end');
+      setPagePoint('submit');
 
       if (_helpers.default.canCYASubmit(pages, validate.pages)) {
         // Submit.
@@ -417,9 +431,9 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
     }
 
     if (action.type === _models.PageAction.TYPES.NAVIGATE) {
-      var _formState$page;
+      var _formState$page2;
 
-      onPageChange(_helpers.default.getNextPageId(type, pages, pageId, action, (_formState$page = formState.page) === null || _formState$page === void 0 ? void 0 : _formState$page.formData));
+      onPageChange(_helpers.default.getNextPageId(type, pages, pageId, action, (_formState$page2 = formState.page) === null || _formState$page2 === void 0 ? void 0 : _formState$page2.formData));
     }
 
     if (action.type === _models.PageAction.TYPES.CANCEL) {
@@ -437,7 +451,7 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
     className: classes()
   }, title && !hide_title && pageId === _models.FormPages.HUB && /*#__PURE__*/_react.default.createElement(_copReactComponents.LargeHeading, null, title), formState.cya && /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, _extends({
     pages: _helpers.default.getRelevantPages(formState, pages, currentTask.fullPages)
-  }, cya, ((_formState$page2 = formState.page) === null || _formState$page2 === void 0 ? void 0 : _formState$page2.type) === _models.FormPages.PARTIAL_CYA && {
+  }, cya, ((_formState$page3 = formState.page) === null || _formState$page3 === void 0 ? void 0 : _formState$page3.type) === _models.FormPages.PARTIAL_CYA && {
     actions: formState.page.actions
   }, formState.cya, {
     onAction: onCYAAction,

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

@@ -34,6 +34,8 @@ var _userProfile = _interopRequireDefault(require("../../json/userProfile.json")
 
 var _taskList = _interopRequireDefault(require("../../json/taskList.json"));
 
+var _firstForm = _interopRequireDefault(require("../../json/firstForm.json"));
+
 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); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -548,11 +550,44 @@ describe('components', function () {
         }
       }, _callee16);
     })));
-    it('should handle navigating between task list pages', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee18() {
-      var ON_SUBMIT_CALLS, ON_SUBMIT, HOOKS, taskList, firstTaskStatus, secondTaskStatus, firstTask, newPage, continueButton, cyaPage, finalSubmit;
+    it('should render a cya page', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee18() {
+      var cya;
       return regeneratorRuntime.wrap(function _callee18$(_context18) {
         while (1) {
           switch (_context18.prev = _context18.next) {
+            case 0:
+              _context18.next = 2;
+              return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee17() {
+                return regeneratorRuntime.wrap(function _callee17$(_context17) {
+                  while (1) {
+                    switch (_context17.prev = _context17.next) {
+                      case 0:
+                        (0, _reactDom.render)( /*#__PURE__*/_react2.default.createElement(_FormRenderer.default, _firstForm.default), container);
+
+                      case 1:
+                      case "end":
+                        return _context17.stop();
+                    }
+                  }
+                }, _callee17);
+              })));
+
+            case 2:
+              cya = container.childNodes[0];
+              expect(cya.classList).toContain('hods-form');
+
+            case 4:
+            case "end":
+              return _context18.stop();
+          }
+        }
+      }, _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, cyaPageChange, modeChangeLink, changePage, cyaPage, finalSubmit;
+      return regeneratorRuntime.wrap(function _callee20$(_context20) {
+        while (1) {
+          switch (_context20.prev = _context20.next) {
             case 0:
               ON_SUBMIT_CALLS = [];
 
@@ -564,11 +599,11 @@ describe('components', function () {
               HOOKS = {
                 onSubmit: ON_SUBMIT
               };
-              _context18.next = 5;
-              return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee17() {
-                return regeneratorRuntime.wrap(function _callee17$(_context17) {
+              _context20.next = 5;
+              return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee19() {
+                return regeneratorRuntime.wrap(function _callee19$(_context19) {
                   while (1) {
-                    switch (_context17.prev = _context17.next) {
+                    switch (_context19.prev = _context19.next) {
                       case 0:
                         (0, _reactDom.render)( /*#__PURE__*/_react2.default.createElement(_FormRenderer.default, _extends({}, _taskList.default, {
                           hooks: HOOKS
@@ -576,10 +611,10 @@ describe('components', function () {
 
                       case 1:
                       case "end":
-                        return _context17.stop();
+                        return _context19.stop();
                     }
                   }
-                }, _callee17);
+                }, _callee19);
               })));
 
             case 5:
@@ -632,6 +667,22 @@ describe('components', function () {
 
               continueButton = newPage.childNodes[2].childNodes[0];
 
+              _react.fireEvent.click(continueButton, {}); //Click change to mode on CYA page
+
+
+              cyaPageChange = container.childNodes[0].childNodes[0];
+              modeChangeLink = cyaPageChange.childNodes[4].childNodes[0].childNodes[0].childNodes[2].childNodes[0].childNodes[0];
+
+              _react.fireEvent.click(modeChangeLink, {});
+
+              changePage = container.childNodes[0].childNodes[0];
+              expect(changePage.childNodes[0].textContent).toEqual('Event Mode'); // Click on radio for 'Air'
+
+              _react.fireEvent.click(changePage.childNodes[1].childNodes[2].childNodes[1].childNodes[0], {}); // Continue again to CYA page
+
+
+              continueButton = changePage.childNodes[2].childNodes[0];
+
               _react.fireEvent.click(continueButton, {}); //Continue on from CYA page
 
 
@@ -652,21 +703,21 @@ describe('components', function () {
 
               finalSubmit = ON_SUBMIT_CALLS[ON_SUBMIT_CALLS.length - 1];
               expect(finalSubmit.date).toEqual('7-7-2022');
-              expect(finalSubmit.mode).toEqual('sea');
+              expect(finalSubmit.mode).toEqual('air');
               expect(finalSubmit.formStatus.tasks['Date, location and mode details'].complete).toEqual(true);
 
-            case 39:
+            case 47:
             case "end":
-              return _context18.stop();
+              return _context20.stop();
           }
         }
-      }, _callee18);
+      }, _callee20);
     })));
-    it('should go straight to CYA page if a complete task is selected', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee20() {
+    it('should go straight to CYA page if a complete task is selected', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee22() {
       var ON_SUBMIT, HOOKS, taskList, newPage;
-      return regeneratorRuntime.wrap(function _callee20$(_context20) {
+      return regeneratorRuntime.wrap(function _callee22$(_context22) {
         while (1) {
-          switch (_context20.prev = _context20.next) {
+          switch (_context22.prev = _context22.next) {
             case 0:
               ON_SUBMIT = function ON_SUBMIT(type, payload, onSuccess, onError) {
                 onSuccess();
@@ -675,11 +726,11 @@ describe('components', function () {
               HOOKS = {
                 onSubmit: ON_SUBMIT
               };
-              _context20.next = 4;
-              return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee19() {
-                return regeneratorRuntime.wrap(function _callee19$(_context19) {
+              _context22.next = 4;
+              return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee21() {
+                return regeneratorRuntime.wrap(function _callee21$(_context21) {
                   while (1) {
-                    switch (_context19.prev = _context19.next) {
+                    switch (_context21.prev = _context21.next) {
                       case 0:
                         (0, _reactDom.render)( /*#__PURE__*/_react2.default.createElement(_FormRenderer.default, _extends({}, _taskList.default, {
                           hooks: HOOKS
@@ -687,10 +738,10 @@ describe('components', function () {
 
                       case 1:
                       case "end":
-                        return _context19.stop();
+                        return _context21.stop();
                     }
                   }
-                }, _callee19);
+                }, _callee21);
               })));
 
             case 4:
@@ -742,16 +793,16 @@ describe('components', function () {
 
             case 17:
             case "end":
-              return _context20.stop();
+              return _context22.stop();
           }
         }
-      }, _callee20);
+      }, _callee22);
     })));
-    it('should go to the last page of a complete task if noTaskCYAs specified', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee22() {
+    it('should go to the last page of a complete task if noTaskCYAs specified', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee24() {
       var ON_SUBMIT, HOOKS, TASK_LIST_WITH_NO_TASK_CYAS, 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();
@@ -766,11 +817,11 @@ describe('components', function () {
                 type: 'save',
                 complete: true
               };
-              _context22.next = 7;
-              return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee21() {
-                return regeneratorRuntime.wrap(function _callee21$(_context21) {
+              _context24.next = 7;
+              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({}, TASK_LIST_WITH_NO_TASK_CYAS, {
                           hooks: HOOKS
@@ -778,10 +829,10 @@ describe('components', function () {
 
                       case 1:
                       case "end":
-                        return _context21.stop();
+                        return _context23.stop();
                     }
                   }
-                }, _callee21);
+                }, _callee23);
               })));
 
             case 7:
@@ -830,17 +881,17 @@ describe('components', function () {
 
             case 19:
             case "end":
-              return _context22.stop();
+              return _context24.stop();
           }
         }
-      }, _callee22);
+      }, _callee24);
     })));
-    it('should handle cancellation from a page', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee24() {
+    it('should handle cancellation from a page', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee26() {
       var ON_CANCEL_CALLS, ON_CANCEL, HOOKS, form, hub, _hub$childNodes5, civilServantList, link, page, cancel;
 
-      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_CANCEL_CALLS = [];
 
@@ -851,11 +902,11 @@ describe('components', function () {
               HOOKS = {
                 onCancel: ON_CANCEL
               };
-              _context24.next = 5;
-              return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee23() {
-                return regeneratorRuntime.wrap(function _callee23$(_context23) {
+              _context26.next = 5;
+              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({}, _userProfile.default, {
                           data: _userProfileData.default,
@@ -864,10 +915,10 @@ describe('components', function () {
 
                       case 1:
                       case "end":
-                        return _context23.stop();
+                        return _context25.stop();
                     }
                   }
-                }, _callee23);
+                }, _callee25);
               })));
 
             case 5:
@@ -891,10 +942,10 @@ describe('components', function () {
 
             case 15:
             case "end":
-              return _context24.stop();
+              return _context26.stop();
           }
         }
-      }, _callee24);
+      }, _callee26);
     })));
   });
 });

package/dist/utils/Component/getComponent.js

@@ -232,7 +232,8 @@ var getChildJsx = function getChildJsx(parent, child) {
     component: child,
     value: child.value,
     onChange: parent.onChange,
-    key: child.key
+    key: child.key,
+    formData: parent.formData
   });
 };
 /**

package/package.json

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