@ukhomeoffice/cop-react-form-renderer 4.22.5 → 4.24.0

package/dist/components/FormRenderer/FormRenderer.js

@@ -103,7 +103,7 @@ var DEFAULT_CLASS = 'hods-form';
 exports.DEFAULT_CLASS = DEFAULT_CLASS;
 
 var InternalFormRenderer = function InternalFormRenderer(_ref2) {
-  var _formState$page4;
+  var _formState$page5;
 
   var title = _ref2.title,
       type = _ref2.type,
@@ -261,7 +261,11 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
 
     if (pages) {
       pages.forEach(function (page) {
-        page.formData = data;
+        if (page) {
+          page.formData = data;
+        }
+
+        ;
       });
       setCurrentTask(function (prev) {
         return _objectSpread(_objectSpread({}, prev), {}, {
@@ -413,11 +417,13 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
     }
   }; // Handle navigation from "Check your answers".
   // Passing a dataCallback allows changes to formData from the
-  // CYA screen. This is necessary to alow changing the active
+  // CYA screen. This is necessary to allow changing the active
   // entry in page collections.
 
 
   var onCYARowAction = function onCYARowAction(page, dataCallback) {
+    var _formState$page3;
+
     if (typeof dataCallback === 'function') {
       var newData = dataCallback(_objectSpread({}, data));
 
@@ -426,6 +432,19 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
       }
     }
 
+    if (((_formState$page3 = formState.page) === null || _formState$page3 === void 0 ? void 0 : _formState$page3.type) === _models.FormPages.PARTIAL_CYA) {
+      hubDetails.sections.every(function (section) {
+        return section.tasks.every(function (task) {
+          if (task.pages.includes(page.pageId) && task.name !== currentTask.name) {
+            onTaskAction(task);
+            return false;
+          }
+
+          return true;
+        });
+      });
+    }
+
     if (page) {
       _handlers.default.cyaAction(page, pageId, onPageChange);
     }
@@ -501,16 +520,40 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
       }
     }
 
-    if (action.type === _models.PageAction.TYPES.SAVE_AND_RETURN) {
+    if (action.type === _models.PageAction.TYPES.SUBMIT && hub === _models.HubFormats.TASK) {
+      setPagePoint('submit');
+
       if (_helpers.default.canCYASubmit(currentTask.fullPages, validate.pages)) {
+        // Submit.
         var _submissionData2 = _utils.default.Format.form({
           pages: pages,
           components: components
         }, _objectSpread({}, data), _models.EventTypes.SUBMIT);
 
-        _submissionData2.formStatus = _helpers.default.getSubmissionStatus(type, pages, pageId, action, _submissionData2, currentTask);
-        setData(_submissionData2);
+        _submissionData2.formStatus = _helpers.default.getSubmissionStatus(type, pages, pageId, action, _submissionData2, currentTask, true);
+        setData(_submissionData2); // Now submit the data to the backend...
+
         hooks.onSubmit(action.type, _submissionData2, function () {
+          return hooks.onFormComplete();
+        }, function (errors) {
+          return _handlers.default.submissionError(errors, addErrors);
+        });
+      }
+    }
+
+    if (action.type === _models.PageAction.TYPES.SAVE_AND_RETURN) {
+      var shouldValidate = !(action.hasOwnProperty('validate') && !action.validate);
+      var canSubmit = shouldValidate ? _helpers.default.canCYASubmit(currentTask.fullPages, validate.pages) : true;
+
+      if (canSubmit) {
+        var _submissionData3 = _utils.default.Format.form({
+          pages: pages,
+          components: components
+        }, _objectSpread({}, data), _models.EventTypes.SUBMIT);
+
+        _submissionData3.formStatus = _helpers.default.getSubmissionStatus(type, pages, pageId, action, _submissionData3, currentTask);
+        setData(_submissionData3);
+        hooks.onSubmit(action.type, _submissionData3, function () {
           if (type === _models.FormTypes.TASK) {
             onPageChange(undefined);
           } else {
@@ -523,9 +566,9 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
     }
 
     if (action.type === _models.PageAction.TYPES.NAVIGATE) {
-      var _formState$page3;
+      var _formState$page4;
 
-      onPageChange(_helpers.default.getNextPageId(type, pages, pageId, action, (_formState$page3 = formState.page) === null || _formState$page3 === void 0 ? void 0 : _formState$page3.formData));
+      onPageChange(_helpers.default.getNextPageId(type, pages, pageId, action, (_formState$page4 = formState.page) === null || _formState$page4 === void 0 ? void 0 : _formState$page4.formData));
     }
 
     if (action.type === _models.PageAction.TYPES.CANCEL) {
@@ -543,7 +586,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$page4 = formState.page) === null || _formState$page4 === void 0 ? void 0 : _formState$page4.type) === _models.FormPages.PARTIAL_CYA && {
+  }, cya, ((_formState$page5 = formState.page) === null || _formState$page5 === void 0 ? void 0 : _formState$page5.type) === _models.FormPages.PARTIAL_CYA && {
     actions: formState.page.actions
   }, formState.cya, {
     onAction: onCYAAction,

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

@@ -9,7 +9,7 @@ var _models = require("../../../models");
 
 var slicePages = function slicePages(pages, currentPageId) {
   return pages.slice(0, pages.findIndex(function (p) {
-    return p.id === currentPageId;
+    return (p === null || p === void 0 ? void 0 : p.id) === currentPageId ? true : false;
   }));
 };
 

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

@@ -29,12 +29,12 @@ var getSubmissionStatus = function getSubmissionStatus(formType, pages, currentP
           section.tasks.forEach(function (task) {
             var lastPage = task.pages[task.pages.length - 1];
 
-            if ((lastPage === currentPageId || lastPage.id === currentPageId) && isCompleted) {
+            if ((lastPage === currentPageId || lastPage.id === currentPageId) && isCompleted && (task === null || task === void 0 ? void 0 : task.type) === 'pre-task-list') {
               formStatus.tasks[task.name] = {
                 complete: isCompleted,
                 currentPage: currentPageId
               };
-            } else if (task.pages.includes(currentPageId)) {
+            } else if (task.pages.includes(currentPageId) && (task === null || task === void 0 ? void 0 : task.type) === 'pre-task-list') {
               formStatus.tasks[task.name] = {
                 complete: false,
                 currentPage: currentPageId

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

@@ -255,7 +255,7 @@ 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 () {
+          it("should mark the current task as complete if the current task is a pre-task-list task", function () {
             var CURRENT_PAGE_ID = PAGES[PAGES.length - 1].id;
             var TASK_NAME = undefined;
             var CURRENT_TASK = {
@@ -265,6 +265,7 @@ describe('components', function () {
               complete: true
             };
             var TASKS = [{
+              type: 'pre-task-list',
               pages: PAGES
             }];
             var SECTIONS = [{

package/dist/utils/CheckYourAnswers/getCYARowsForCollectionPage.js

@@ -7,8 +7,6 @@ exports.default = void 0;
 
 var _copReactComponents = require("@ukhomeoffice/cop-react-components");
 
-var _elevateNestedComponents = _interopRequireDefault(require("../Component/elevateNestedComponents"));
-
 var _models = require("../../models");
 
 var _getCYARowsForContainer = _interopRequireDefault(require("./getCYARowsForContainer"));
@@ -17,8 +15,6 @@ var _getCYACollectionDeleteAction = _interopRequireDefault(require("./getCYAColl
 
 var _getCYACollectionChangeAction = _interopRequireDefault(require("./getCYACollectionChangeAction"));
 
-var _showComponentCYA = _interopRequireDefault(require("./showComponentCYA"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -28,27 +24,13 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 var getContainerForPage = function getContainerForPage(page, item, labelCount, full_path) {
-  var allComponents = (0, _elevateNestedComponents.default)(page.components, item);
   return {
     id: item.id,
     fieldId: item.id,
     type: _models.ComponentTypes.CONTAINER,
     required: true,
     full_path: full_path,
-    components: allComponents.map(function (component) {
-      if ((0, _showComponentCYA.default)(component, item)) {
-        return _objectSpread(_objectSpread({}, component), {}, {
-          label: _copReactComponents.Utils.interpolateString(component.label, _objectSpread(_objectSpread({}, item), {}, {
-            index: labelCount
-          })),
-          full_path: "".concat(full_path, ".").concat(component.fieldId)
-        });
-      }
-
-      return undefined;
-    }).filter(function (c) {
-      return c;
-    })
+    components: page.components
   };
 };
 

package/dist/utils/CollectionPage/mergeCollectionPages.js

@@ -5,6 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _addShowWhen = _interopRequireDefault(require("../Component/addShowWhen"));
+
+var _applyToComponentTree = _interopRequireDefault(require("../Component/applyToComponentTree"));
+
 var _showFormPageCYA = _interopRequireDefault(require("../FormPage/showFormPageCYA"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -15,15 +19,31 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+var getComponentsWithRouting = function getComponentsWithRouting(page) {
+  if (!page.collection.route) {
+    return page.components;
+  } // Apply show_whens to components on certain conditional pages.
+  // This ensures that those components aren't shown on the CYA
+  // screen if they were never visited by the user.
+
+
+  return page.components.map(function (component) {
+    return (0, _applyToComponentTree.default)(component, function (c) {
+      return (0, _addShowWhen.default)(c, page.collection.route);
+    });
+  });
+};
+
 var createMasterPage = function createMasterPage(page) {
   return _objectSpread(_objectSpread({}, page), {}, {
-    title: page.collection.name.charAt(0).toUpperCase() + page.collection.name.slice(1)
+    title: page.collection.name.charAt(0).toUpperCase() + page.collection.name.slice(1),
+    components: getComponentsWithRouting(page)
   });
 };
 
 var mergeIntoMasterPage = function mergeIntoMasterPage(page, masterPage) {
   masterPage.collection = _objectSpread(_objectSpread({}, masterPage.collection), page.collection);
-  masterPage.components = [].concat(masterPage.components, page.components);
+  masterPage.components = [].concat(masterPage.components, getComponentsWithRouting(page));
   masterPage.formData = _objectSpread({}, page.formData);
 };
 /**
@@ -44,7 +64,7 @@ var mergeCollectionPages = function mergeCollectionPages(pages) {
   return pages.map(function (page) {
     var _page$collection;
 
-    if ((_page$collection = page.collection) !== null && _page$collection !== void 0 && _page$collection.name && (0, _showFormPageCYA.default)(page, page.formData)) {
+    if (page !== null && page !== void 0 && (_page$collection = page.collection) !== null && _page$collection !== void 0 && _page$collection.name && (0, _showFormPageCYA.default)(page, page.formData)) {
       if (!masterPages[page.collection.name]) {
         // If no master page exists for this collection.name, then
         // we kick one off using this page as a template.

package/dist/utils/CollectionPage/mergeCollectionPages.test.js

@@ -128,4 +128,74 @@ describe('utils.CollectionPage.mergeCollectionPages', function () {
       formData: {}
     });
   });
+  it('should add a defined route as a show_when to components on the page', function () {
+    var PAGES = [{
+      id: 'page1',
+      collection: {
+        name: 'collection',
+        route: {
+          field: 'field',
+          op: '=',
+          value: 'value'
+        }
+      },
+      components: [{
+        type: 'text'
+      }]
+    }, {
+      id: 'page2',
+      collection: {
+        name: 'collection',
+        route: {
+          field: 'field',
+          op: '=',
+          value: 'otherValue'
+        }
+      },
+      components: [{
+        type: 'container',
+        components: [{
+          type: 'date'
+        }]
+      }]
+    }];
+    var RESULT = (0, _mergeCollectionPages.default)(PAGES);
+    expect(RESULT.length).toEqual(1);
+    expect(RESULT[0]).toEqual({
+      id: 'page1',
+      title: 'Collection',
+      collection: {
+        name: 'collection',
+        route: {
+          field: 'field',
+          op: '=',
+          value: 'otherValue'
+        }
+      },
+      components: [{
+        type: 'text',
+        show_when: [{
+          field: 'field',
+          op: '=',
+          value: 'value'
+        }]
+      }, {
+        type: 'container',
+        components: [{
+          type: 'date',
+          show_when: [{
+            field: 'field',
+            op: '=',
+            value: 'otherValue'
+          }]
+        }],
+        show_when: [{
+          field: 'field',
+          op: '=',
+          value: 'otherValue'
+        }]
+      }],
+      formData: {}
+    });
+  });
 });

package/dist/utils/Component/addShowWhen.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+/**
+ * Adds a show_when to a component.
+ * If the component has no show_when, then an array is created
+ * with condition as the only entry.
+ * If the component has existing show_whens then condition is
+ * appended to the existing array.
+ * @param {*} component The component to add the show_when to.
+ * @param {*} condition The show_when condition to add.
+ * @returns The component with the new show_when added.
+ *          null if component or condition are invalid.
+ */
+var addShowWhen = function addShowWhen(component, condition) {
+  if (!component) {
+    return null;
+  }
+
+  if (!condition) {
+    return component;
+  }
+
+  var result = _objectSpread({}, component);
+
+  if (result.show_when) {
+    result.show_when = Array.isArray(result.show_when) ? [].concat(result.show_when, [_objectSpread({}, condition)]) : [result.show_when, _objectSpread({}, condition)];
+  } else {
+    result.show_when = [_objectSpread({}, condition)];
+  }
+
+  return result;
+};
+
+var _default = addShowWhen;
+exports.default = _default;

package/dist/utils/Component/addShowWhen.test.js

@@ -0,0 +1,96 @@
+"use strict";
+
+var _addShowWhen = _interopRequireDefault(require("./addShowWhen"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// Local imports
+describe('utils.Component.addShowWhen', function () {
+  var NEW_SHOW_WHEN = {
+    field: 'field',
+    op: '=',
+    value: 'value'
+  };
+  it('should return null when component is undefined', function () {
+    var result = (0, _addShowWhen.default)(undefined, {});
+    expect(result).toEqual(null);
+  });
+  it('should return null when component is null', function () {
+    var result = (0, _addShowWhen.default)(null, {});
+    expect(result).toEqual(null);
+  });
+  it('should return component when condition is undefined', function () {
+    var COMPONENT = {
+      alpha: 'bravo'
+    };
+    var result = (0, _addShowWhen.default)(COMPONENT, undefined);
+    expect(result).toEqual({
+      alpha: 'bravo'
+    });
+  });
+  it('should return component when condition is null', function () {
+    var COMPONENT = {
+      alpha: 'bravo'
+    };
+    var result = (0, _addShowWhen.default)(COMPONENT, null);
+    expect(result).toEqual({
+      alpha: 'bravo'
+    });
+  });
+  it('should add the show_when to a component with no existing show_whens', function () {
+    var COMPONENT = {
+      alpha: 'bravo'
+    };
+    var result = (0, _addShowWhen.default)(COMPONENT, NEW_SHOW_WHEN);
+    expect(result).toEqual({
+      alpha: 'bravo',
+      show_when: [NEW_SHOW_WHEN]
+    });
+  });
+  it('should add the show_when to a component with a single show_when', function () {
+    var COMPONENT = {
+      alpha: 'bravo',
+      show_when: {
+        field: 'abc',
+        op: '=',
+        value: 'bcd'
+      }
+    };
+    var result = (0, _addShowWhen.default)(COMPONENT, NEW_SHOW_WHEN);
+    expect(result).toEqual({
+      alpha: 'bravo',
+      show_when: [{
+        field: 'abc',
+        op: '=',
+        value: 'bcd'
+      }, NEW_SHOW_WHEN]
+    });
+  });
+  it('should add the show_when to a component with an array of show_whens', function () {
+    var COMPONENT = {
+      alpha: 'bravo',
+      show_when: [{
+        field: 'abc',
+        op: '=',
+        value: 'bcd'
+      }, {
+        field: 'cde',
+        op: '=',
+        value: 'efg'
+      }]
+    };
+    var result = (0, _addShowWhen.default)(COMPONENT, NEW_SHOW_WHEN);
+    expect(result).toEqual({
+      alpha: 'bravo',
+      show_when: [{
+        field: 'abc',
+        op: '=',
+        value: 'bcd'
+      }, {
+        field: 'cde',
+        op: '=',
+        value: 'efg'
+      }, NEW_SHOW_WHEN]
+    });
+  });
+});

package/dist/utils/Component/applyToComponentTree.js

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _models = require("../../models");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+/**
+ * Call a callback on a component and all of its child/nested components.
+ * At each stage, the value of the component is set to the returned value
+ * from the callback.
+ * 
+ * @param {*} root The root component to call the callback on.
+ * @param {*} callback The callback to call. It should take a single
+ *                     component as an argument and return the new
+ *                     desired value for that component.
+ * @returns The result of calling callback on root.
+ *          null if root is not valid.
+ *          root if callback is not valid. 
+ */
+var applyToComponentTree = function applyToComponentTree(root, callback) {
+  var _root$data;
+
+  if (!root) {
+    return null;
+  }
+
+  if (!callback) {
+    return root;
+  }
+
+  var result = _objectSpread({}, root);
+
+  switch (root.type) {
+    case _models.ComponentTypes.CONTAINER:
+      result.components.forEach(function (c, index, array) {
+        array[index] = applyToComponentTree(c, callback);
+      });
+      break;
+
+    case _models.ComponentTypes.COLLECTION:
+      result.item.forEach(function (c, index, array) {
+        array[index] = applyToComponentTree(c, callback);
+      });
+      break;
+
+    case _models.ComponentTypes.CHECKBOXES:
+    case _models.ComponentTypes.RADIOS:
+      if (!((_root$data = root.data) !== null && _root$data !== void 0 && _root$data.options)) {
+        break;
+      }
+
+      result.data = _objectSpread({}, root.data);
+      result.data.options = root.data.options.map(function (option) {
+        var newOption = _objectSpread({}, option);
+
+        if (option.nested) {
+          newOption.nested = option.nested.map(function (c) {
+            return applyToComponentTree(c, callback);
+          });
+        }
+
+        return newOption;
+      });
+      break;
+
+    default:
+      break;
+  }
+
+  return callback(result);
+};
+
+var _default = applyToComponentTree;
+exports.default = _default;

package/dist/utils/Component/applyToComponentTree.test.js

@@ -0,0 +1,131 @@
+"use strict";
+
+var _applyToComponentTree = _interopRequireDefault(require("./applyToComponentTree"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+describe('utils.Component.applyToComponentTree', function () {
+  var SINGLE_COMP = {
+    type: 'text',
+    label: 'alpha'
+  };
+  var CONTAINER = {
+    type: 'container',
+    label: 'bravo',
+    components: [{
+      type: 'text',
+      label: 'charlie'
+    }]
+  };
+  var COLLECTION = {
+    type: 'collection',
+    label: 'delta',
+    item: [{
+      type: 'text',
+      label: 'echo'
+    }]
+  };
+  var COMP_WITH_NESTED = {
+    type: 'radios',
+    label: 'foxtrot',
+    data: {
+      options: [{
+        nested: [{
+          type: 'text',
+          label: 'golf'
+        }]
+      }, {
+        nested: [{
+          type: 'text',
+          label: 'hotel'
+        }]
+      }]
+    }
+  };
+
+  var CALLBACK = function CALLBACK(component) {
+    return _objectSpread(_objectSpread({}, component), {}, {
+      label: component.label.toUpperCase()
+    });
+  };
+
+  it('should return null when root is undefined', function () {
+    var result = (0, _applyToComponentTree.default)(undefined, CALLBACK);
+    expect(result).toEqual(null);
+  });
+  it('should return null when root is null', function () {
+    var result = (0, _applyToComponentTree.default)(null, CALLBACK);
+    expect(result).toEqual(null);
+  });
+  it('should return root when callback is undefined', function () {
+    var result = (0, _applyToComponentTree.default)({
+      type: 'text'
+    }, undefined);
+    expect(result).toEqual({
+      type: 'text'
+    });
+  });
+  it('should return root when callback is null', function () {
+    var result = (0, _applyToComponentTree.default)({
+      type: 'text'
+    }, null);
+    expect(result).toEqual({
+      type: 'text'
+    });
+  });
+  it('should correctly call callback on a single component', function () {
+    var result = (0, _applyToComponentTree.default)(SINGLE_COMP, CALLBACK);
+    expect(result).toEqual({
+      type: 'text',
+      label: 'ALPHA'
+    });
+  });
+  it('should correctly call callback on a container component', function () {
+    var result = (0, _applyToComponentTree.default)(CONTAINER, CALLBACK);
+    expect(result).toEqual({
+      type: 'container',
+      label: 'BRAVO',
+      components: [{
+        type: 'text',
+        label: 'CHARLIE'
+      }]
+    });
+  });
+  it('should correctly call callback on a collection component', function () {
+    var result = (0, _applyToComponentTree.default)(COLLECTION, CALLBACK);
+    expect(result).toEqual({
+      type: 'collection',
+      label: 'DELTA',
+      item: [{
+        type: 'text',
+        label: 'ECHO'
+      }]
+    });
+  });
+  it('should correctly call callback on a component with nested components', function () {
+    var result = (0, _applyToComponentTree.default)(COMP_WITH_NESTED, CALLBACK);
+    expect(result).toEqual({
+      type: 'radios',
+      label: 'FOXTROT',
+      data: {
+        options: [{
+          nested: [{
+            type: 'text',
+            label: 'GOLF'
+          }]
+        }, {
+          nested: [{
+            type: 'text',
+            label: 'HOTEL'
+          }]
+        }]
+      }
+    });
+  });
+});

package/dist/utils/Condition/meetsCondition.js

@@ -72,6 +72,13 @@ var meetsCondition = function meetsCondition(condition, value) {
           return value === null || value === void 0 ? void 0 : value.toString().toLowerCase().includes(compare); // If no value is provided, the field cannot contain it, so it must fail the condition.
         }
 
+      case '!contains':
+        {
+          var _value$toString$toLow;
+
+          return (_value$toString$toLow = !(value !== null && value !== void 0 && value.toString().toLowerCase().includes(compare))) !== null && _value$toString$toLow !== void 0 ? _value$toString$toLow : true; // If no value is provided, the field cannot contain it, so it must meet the condition.
+        }
+
       default:
         return false;
     }

package/dist/utils/Condition/meetsCondition.test.js

@@ -350,6 +350,95 @@ describe('utils.Condition.meetsCondition', function () {
       expect((0, _meetsCondition.default)(CONDITION, FIELD)).toBeFalsy();
     });
   });
+  describe('operator !contains', function () {
+    var op = '!contains'; // Should match...
+
+    it('should match a string that is not in the field array', function () {
+      var FIELD = ['alpha', 'bravo', 'charlie'];
+      var VALUE = 'delta';
+      var CONDITION = getCondition(op, VALUE);
+      expect((0, _meetsCondition.default)(CONDITION, FIELD)).toBeTruthy();
+    });
+    it('should match any value if the field array is empty', function () {
+      var FIELD = [];
+      var VALUE = 'alpha';
+      var CONDITION = getCondition(op, VALUE);
+      expect((0, _meetsCondition.default)(CONDITION, FIELD)).toBeTruthy();
+    });
+    it('should match any field when the value is null', function () {
+      var FIELD = ['alpha', 'bravo', 'charlie'];
+      var VALUE = null;
+      var CONDITION = getCondition(op, VALUE);
+      expect((0, _meetsCondition.default)(CONDITION, FIELD)).toBeTruthy();
+    });
+    it('should match any field when the value is undefined', function () {
+      var FIELD = ['alpha', 'bravo', 'charlie'];
+      var VALUE = undefined;
+      var CONDITION = getCondition(op, VALUE);
+      expect((0, _meetsCondition.default)(CONDITION, FIELD)).toBeTruthy();
+    });
+    it('should match any value when the field is an empty string', function () {
+      var FIELD = '';
+      var VALUE = 'alpha';
+      var CONDITION = getCondition(op, VALUE);
+      expect((0, _meetsCondition.default)(CONDITION, FIELD)).toBeTruthy();
+    });
+    it('should match a number that is missing from the field array', function () {
+      var FIELD = [1, 2, 3];
+      var VALUE = 4;
+      var CONDITION = getCondition(op, VALUE);
+      expect((0, _meetsCondition.default)(CONDITION, FIELD)).toBeTruthy();
+    });
+    it('should match a substring that is missing from the field string', function () {
+      var FIELD = 'alphabravocharlie';
+      var VALUE = 'delta';
+      var CONDITION = getCondition(op, VALUE);
+      expect((0, _meetsCondition.default)(CONDITION, FIELD)).toBeTruthy();
+    });
+    it('should match any value when the field is null', function () {
+      var FIELD = null;
+      var VALUE = 'alpha';
+      var CONDITION = getCondition(op, VALUE);
+      expect((0, _meetsCondition.default)(CONDITION, FIELD)).toBeTruthy();
+    });
+    it('should match any value when the field is undefined', function () {
+      var FIELD = undefined;
+      var VALUE = 'alpha';
+      var CONDITION = getCondition(op, VALUE);
+      expect((0, _meetsCondition.default)(CONDITION, FIELD)).toBeTruthy();
+    }); // Should reject...
+
+    it('should reject a string that is in the field array', function () {
+      var FIELD = ['alpha', 'bravo', 'charlie'];
+      var VALUE = 'alpha';
+      var CONDITION = getCondition(op, VALUE);
+      expect((0, _meetsCondition.default)(CONDITION, FIELD)).toBeFalsy();
+    });
+    it('should reject a sub-string that is in the field array', function () {
+      var FIELD = ['alpha', 'bravo', 'charlie'];
+      var VALUE = 'alp';
+      var CONDITION = getCondition(op, VALUE);
+      expect((0, _meetsCondition.default)(CONDITION, FIELD)).toBeFalsy();
+    });
+    it('should reject a number that is in the field array', function () {
+      var FIELD = [1, 2, 3];
+      var VALUE = 1;
+      var CONDITION = getCondition(op, VALUE);
+      expect((0, _meetsCondition.default)(CONDITION, FIELD)).toBeFalsy();
+    });
+    it('should reject a sub-string that is in the field string', function () {
+      var FIELD = 'alphabravocharlie';
+      var VALUE = 'alpha';
+      var CONDITION = getCondition(op, VALUE);
+      expect((0, _meetsCondition.default)(CONDITION, FIELD)).toBeFalsy();
+    });
+    it('should reject a string that is in the field array regardless of case', function () {
+      var FIELD = ['Alpha', 'bravo', 'charlie'];
+      var VALUE = 'alpha';
+      var CONDITION = getCondition(op, VALUE);
+      expect((0, _meetsCondition.default)(CONDITION, FIELD)).toBeFalsy();
+    });
+  });
   describe('unknown operator', function () {
     var op = 'definitely_not_a_real_operator';
     it('should reject anything regardless of the value', function () {

package/dist/utils/Validate/validatePage.js

@@ -35,7 +35,7 @@ var validatePage = function validatePage(page) {
     if (activeIndex !== null) {
       var _page$formData$page$c;
 
-      data = (_page$formData$page$c = page.formData[page.collection.name]) === null || _page$formData$page$c === void 0 ? void 0 : _page$formData$page$c[activeIndex];
+      data = _objectSpread(_objectSpread({}, page.formData), (_page$formData$page$c = page.formData[page.collection.name]) === null || _page$formData$page$c === void 0 ? void 0 : _page$formData$page$c[activeIndex]);
     }
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukhomeoffice/cop-react-form-renderer",
-  "version": "4.22.5",
+  "version": "4.24.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": "2.3.4",
+    "@ukhomeoffice/cop-react-components": "2.4.0",
     "axios": "^0.23.0",
     "dayjs": "^1.11.0",
     "govuk-frontend": "^4.3.1",