@ukhomeoffice/cop-react-form-renderer 5.94.0 → 5.95.0

package/dist/components/FormPage/FormPage.js

@@ -31,7 +31,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } // Global
 // Styles
 var DEFAULT_CLASS = exports.DEFAULT_CLASS = 'hods-form__page';
 var FormPage = function FormPage(_ref) {
-  var _formPage$actions, _page$actions;
+  var _page$customValidatio, _formPage$actions, _page$actions;
   var page = _ref.page,
     pages = _ref.pages,
     _onAction = _ref.onAction,
@@ -42,17 +42,33 @@ var FormPage = function FormPage(_ref) {
     classBlock = _ref.classBlock,
     classModifiers = _ref.classModifiers,
     className = _ref.className,
-    submitting = _ref.submitting;
+    submitting = _ref.submitting,
+    pageId = _ref.pageId,
+    fromTarget = _ref.fromTarget;
   var _useState = (0, _react.useState)({}),
     _useState2 = _slicedToArray(_useState, 2),
     patch = _useState2[0],
     setPatch = _useState2[1];
   var _useValidation = (0, _hooks.useValidation)(),
-    errors = _useValidation.errors;
+    errors = _useValidation.errors,
+    validate = _useValidation.validate;
   var _useState3 = (0, _react.useState)({}),
     _useState4 = _slicedToArray(_useState3, 2),
     patchLabel = _useState4[0],
     setPatchLabel = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isPageRendered = _useState6[0],
+    setIsPageRendered = _useState6[1];
+  var runOnLoad = Array.isArray(page === null || page === void 0 ? void 0 : page.customValidation) && page.customValidation.length > 0 ? ((_page$customValidatio = page.customValidation[0]) === null || _page$customValidatio === void 0 || (_page$customValidatio = _page$customValidatio.runWhen) === null || _page$customValidatio === void 0 ? void 0 : _page$customValidatio.onLoad) === true : false;
+  (0, _react.useEffect)(function () {
+    setIsPageRendered(true);
+  }, []);
+  (0, _react.useEffect)(function () {
+    if (isPageRendered && fromTarget && runOnLoad) {
+      validate.page(page);
+    }
+  }, [pageId, isPageRendered]);
 
   /**
    * Handle the state of the data directly within the page.
@@ -121,11 +137,20 @@ var FormPage = function FormPage(_ref) {
       submitting: submitting
     });
   });
+  var errorMessages = null;
+  if (runOnLoad && (errors === null || errors === void 0 ? void 0 : errors.length) > 0) {
+    var _page$customValidatio2;
+    errorMessages = [{
+      error: page === null || page === void 0 || (_page$customValidatio2 = page.customValidation) === null || _page$customValidatio2 === void 0 || (_page$customValidatio2 = _page$customValidatio2[0]) === null || _page$customValidatio2 === void 0 ? void 0 : _page$customValidatio2.message
+    }];
+  } else if ((errors === null || errors === void 0 ? void 0 : errors.length) > 0 && !runOnLoad) {
+    errorMessages = errors;
+  }
   return /*#__PURE__*/_react.default.createElement("div", {
     className: classes(),
     key: page.id
-  }, (errors === null || errors === void 0 ? void 0 : errors.length) > 0 && /*#__PURE__*/_react.default.createElement(_copReactComponents.ErrorSummary, {
-    errors: errors,
+  }, errorMessages && /*#__PURE__*/_react.default.createElement(_copReactComponents.ErrorSummary, {
+    errors: errorMessages,
     hashLink: hashLink
   }), page.fieldset && /*#__PURE__*/_react.default.createElement("fieldset", {
     className: "govuk-fieldset"
@@ -162,10 +187,18 @@ FormPage.propTypes = {
     label: _propTypes.default.string,
     required: _propTypes.default.bool,
     actions: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.shape({}), _propTypes.default.string])),
-    formData: _propTypes.default.shape({}).isRequired
+    formData: _propTypes.default.shape({}).isRequired,
+    customValidation: _propTypes.default.arrayOf(_propTypes.default.shape({
+      runWhen: _propTypes.default.shape({
+        onLoad: _propTypes.default.bool
+      }).isRequired,
+      message: _propTypes.default.string.isRequired
+    }))
   }).isRequired,
   pages: _propTypes.default.arrayOf(_propTypes.default.shape({})),
-  submitting: _propTypes.default.bool
+  submitting: _propTypes.default.bool,
+  fromTarget: _propTypes.default.bool,
+  pageId: _propTypes.default.string.isRequired
 };
 FormPage.defaultProps = {
   classBlock: DEFAULT_CLASS,
@@ -176,6 +209,7 @@ FormPage.defaultProps = {
   onTopLevelChange: undefined,
   onWrapperChange: undefined,
   pages: [],
-  submitting: false
+  submitting: false,
+  fromTarget: false
 };
 var _default = exports.default = FormPage;

package/dist/components/FormPage/FormPage.test.js

@@ -2,6 +2,7 @@
 
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var _react = require("@testing-library/react");
+require("@testing-library/jest-dom");
 var _react2 = _interopRequireDefault(require("react"));
 var _models = require("../../models");
 var _setupTests = require("../../setupTests");
@@ -53,6 +54,30 @@ describe('components.FormPage', function () {
         text: VALUE
       }
     };
+    var PAGE_WITH_CUSTOM_VALIDATION = {
+      id: 'pageId',
+      title: 'Page with Custom Validation',
+      components: [TEXT],
+      actions: [_models.PageAction.TYPES.SUBMIT],
+      formData: {
+        text: VALUE
+      },
+      customValidation: [{
+        message: 'Custom validation failed',
+        runWhen: {
+          onLoad: true
+        }
+      }]
+    };
+    var PAGE_WITHOUT_CUSTOM_VALIDATION = {
+      id: 'pageId',
+      title: 'Page without Custom Validation',
+      components: [TEXT],
+      actions: [_models.PageAction.TYPES.SUBMIT],
+      formData: {
+        text: VALUE
+      }
+    };
     var PAGE_WITH_BUTTON_ACTIONS = {
       id: 'pageId',
       // eslint-disable-next-line no-template-curly-in-string
@@ -328,5 +353,41 @@ describe('components.FormPage', function () {
         }
       }, _callee5);
     })));
+    it('should not trigger custom validation when fromTarget is false', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6() {
+      var _renderWithValidation6, queryByText;
+      return _regeneratorRuntime().wrap(function _callee6$(_context6) {
+        while (1) switch (_context6.prev = _context6.next) {
+          case 0:
+            _renderWithValidation6 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_FormPage.default, {
+              page: PAGE_WITH_CUSTOM_VALIDATION,
+              fromTarget: false,
+              onAction: ON_ACTION
+            })), queryByText = _renderWithValidation6.queryByText;
+            _context6.next = 3;
+            return (0, _react.waitFor)(function () {
+              expect(queryByText('Custom validation failed')).toBeNull();
+            });
+          case 3:
+          case "end":
+            return _context6.stop();
+        }
+      }, _callee6);
+    })));
+    it('should not trigger custom validation if no customValidation is provided', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee7() {
+      return _regeneratorRuntime().wrap(function _callee7$(_context7) {
+        while (1) switch (_context7.prev = _context7.next) {
+          case 0:
+            (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_FormPage.default, {
+              page: PAGE_WITHOUT_CUSTOM_VALIDATION,
+              fromTarget: true,
+              onAction: ON_ACTION
+            }));
+            expect(ON_ACTION_CALLS.length).toEqual(0);
+          case 2:
+          case "end":
+            return _context7.stop();
+        }
+      }, _callee7);
+    })));
   });
 });

package/dist/components/FormRenderer/FormRenderer.js

@@ -60,7 +60,8 @@ var FormRenderer = function FormRenderer(_ref) {
     noChangeAction = _ref.noChangeAction,
     newPageId = _ref.newPageId,
     viewOnly = _ref.viewOnly,
-    hideBlankRows = _ref.hideBlankRows;
+    hideBlankRows = _ref.hideBlankRows,
+    fromTarget = _ref.fromTarget;
   return /*#__PURE__*/_react.default.createElement(_context.HooksContextProvider, {
     overrides: hooks
   }, /*#__PURE__*/_react.default.createElement(_context.ValidationContextProvider, null, /*#__PURE__*/_react.default.createElement(InternalFormRenderer, {
@@ -80,7 +81,8 @@ var FormRenderer = function FormRenderer(_ref) {
     noChangeAction: noChangeAction,
     newPageId: newPageId,
     viewOnly: viewOnly,
-    hideBlankRows: hideBlankRows
+    hideBlankRows: hideBlankRows,
+    fromTarget: fromTarget
   })));
 };
 var DEFAULT_CLASS = exports.DEFAULT_CLASS = 'hods-form';
@@ -102,7 +104,8 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
     noChangeAction = _ref2.noChangeAction,
     newPageId = _ref2.newPageId,
     viewOnly = _ref2.viewOnly,
-    hideBlankRows = _ref2.hideBlankRows;
+    hideBlankRows = _ref2.hideBlankRows,
+    fromTarget = _ref2.fromTarget;
   // Set up the initial states.
   var _useState = (0, _react.useState)({}),
     _useState2 = _slicedToArray(_useState, 2),
@@ -364,7 +367,9 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
     hashLink: hashLink,
     classModifiers: formState.page.classModifiers,
     className: formState.page.className,
-    submitting: submitting
+    submitting: submitting,
+    pageId: pageId,
+    fromTarget: fromTarget
   }), formState.page && !formState.cya && formState.page.collection && /*#__PURE__*/_react.default.createElement(_CollectionPage.default, {
     page: formState.page,
     pages: pages,
@@ -407,7 +412,8 @@ var propTypes = {
   /** See <a href="/?path=/docs/f-json--page#formtypes">FormTypes</a>. */
   type: _propTypes.default.oneOf([_models.FormTypes.CYA, _models.FormTypes.FORM, _models.FormTypes.HUB, _models.FormTypes.TASK, _models.FormTypes.WIZARD, _models.FormTypes.TASK_CYA, _models.FormTypes.FORM_WITH_TASK]).isRequired,
   viewOnly: _propTypes.default.bool,
-  hideBlankRows: _propTypes.default.bool
+  hideBlankRows: _propTypes.default.bool,
+  fromTarget: _propTypes.default.bool.isRequired
 };
 var defaultProps = {
   classBlock: DEFAULT_CLASS,

package/dist/utils/CheckYourAnswers/getCYARowsForCollectionPage.js

@@ -215,6 +215,9 @@ var getCYARowsForCollectionPage = function getCYARowsForCollectionPage(page, onA
   }
   collectionData.forEach(function (item) {
     var _page$collection2;
+    if (!item) {
+      return; // Skip this iteration if item is undefined
+    }
     // Keep track of the active entry in each collection.
     // This helps us make sure the right entry is being affected
     // by change/remove links.

package/package.json

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