@ukhomeoffice/cop-react-form-renderer 6.0.0 → 6.0.1-peter

package/dist/components/FormRenderer/clear-uncompleted-routes/test-data/form-with-components.json

@@ -0,0 +1,48 @@
+{
+  "name": "form-with-components",
+  "components": [
+    {
+      "id": "componentA",
+      "fieldId": "componentA"
+    },
+    {
+      "id": "componentB",
+      "fieldId": "componentB",
+      "show_when": [
+        {
+          "op": "=",
+          "field": "componentA",
+          "value": "show"
+        }
+      ]
+    },
+    {
+      "id": "componentC",
+      "fieldId": "componentC",
+      "show_when": [
+        {
+          "op": "=",
+          "field": "componentA",
+          "value": "show"
+        }
+      ]
+    }
+  ],
+  "pages": [
+    {
+      "id": "pageA",
+      "name": "Page A",
+      "components": [
+        {
+          "use": "componentA"
+        },
+        {
+          "use": "componentB"
+        },
+        {
+          "use": "componentC"
+        }
+      ]
+    }
+  ]
+}

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

@@ -0,0 +1,134 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _showComponent = _interopRequireDefault(require("../../../utils/Component/showComponent"));
+var _mergeCollectionPages = _interopRequireDefault(require("../../../utils/CollectionPage/mergeCollectionPages"));
+var _deleteNodeByPath = _interopRequireDefault(require("./deleteNodeByPath"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/* eslint-disable no-param-reassign */
+
+var recurseCheckForHiddenComponents = function recurseCheckForHiddenComponents(component, formData, path, candidateComponentForDeletion) {
+  path = path ? "".concat(path, ".").concat(component.fieldId) : component.fieldId;
+  if (component) {
+    if (component.components) {
+      var _component$components;
+      (_component$components = component.components) === null || _component$components === void 0 || _component$components.forEach(function (c) {
+        recurseCheckForHiddenComponents(c, formData, path, candidateComponentForDeletion);
+      });
+    } else if (!(0, _showComponent.default)(component, formData)) {
+      candidateComponentForDeletion.set(path, component);
+    }
+  }
+};
+var buildListOfComponentsUsedInVisiblePages = function buildListOfComponentsUsedInVisiblePages(page, form, formData, componentsUsedInVisiblePagesIds) {
+  var _page$components;
+  (_page$components = page.components) === null || _page$components === void 0 || _page$components.forEach(function (component) {
+    var _form$components$find;
+    var componentObj = (_form$components$find = form.components.find(function (c) {
+      return c.fieldId === component.use;
+    })) !== null && _form$components$find !== void 0 ? _form$components$find : component;
+    if (page && (0, _showComponent.default)(page, formData)) {
+      if (componentObj && (0, _showComponent.default)(componentObj, formData)) {
+        componentsUsedInVisiblePagesIds.push(componentObj.fieldId);
+      }
+    }
+  });
+};
+var recurseDeleteComponents = function recurseDeleteComponents(component, formData, path, checkIfComponentHidden) {
+  path = path ? "".concat(path, ".").concat(component.fieldId) : component.fieldId;
+  if (component) {
+    if (component.components) {
+      var _component$components2;
+      (_component$components2 = component.components) === null || _component$components2 === void 0 || _component$components2.forEach(function (c) {
+        recurseDeleteComponents(c, formData, path, checkIfComponentHidden);
+      });
+    } else if (checkIfComponentHidden) {
+      if (!(0, _showComponent.default)(component, formData)) {
+        delete formData[path];
+      }
+    } else {
+      delete formData[path];
+    }
+  }
+};
+var markComponentsForDeletion = function markComponentsForDeletion(page, form, formData, candidateComponentForDeletion, componentsUsedInVisiblePages) {
+  var _page$components2;
+  if (page.disableClearWhenHidden) {
+    return;
+  }
+  (_page$components2 = page.components) === null || _page$components2 === void 0 || _page$components2.forEach(function (component) {
+    var _form$components$find2;
+    var componentObj = (_form$components$find2 = form.components.find(function (c) {
+      return c.fieldId === component.use;
+    })) !== null && _form$components$find2 !== void 0 ? _form$components$find2 : component;
+    if (page && (0, _showComponent.default)(page, formData)) {
+      buildListOfComponentsUsedInVisiblePages(page, form, formData, componentsUsedInVisiblePages);
+      recurseCheckForHiddenComponents(componentObj, formData, null, candidateComponentForDeletion);
+    } else {
+      candidateComponentForDeletion.set(componentObj.fieldId, componentObj);
+    }
+  });
+};
+var deleteHiddenComponent = function deleteHiddenComponent(page, form, collectionData, formData) {
+  if (page.disableClearWhenHidden) {
+    return;
+  }
+  if (page && (0, _showComponent.default)(page, collectionData) || page && (0, _showComponent.default)(page, formData)) {
+    var _page$components3;
+    (_page$components3 = page.components) === null || _page$components3 === void 0 || _page$components3.forEach(function (component) {
+      var _form$components$find3;
+      var componentObj = (_form$components$find3 = form.components.find(function (c) {
+        return c.fieldId === component.use;
+      })) !== null && _form$components$find3 !== void 0 ? _form$components$find3 : component;
+      recurseDeleteComponents(componentObj, collectionData, null, true);
+    });
+  } else {
+    var _page$components4;
+    // recursively delete all components on the page
+    (_page$components4 = page.components) === null || _page$components4 === void 0 || _page$components4.forEach(function (component) {
+      var _form$components$find4;
+      var componentObj = (_form$components$find4 = form.components.find(function (c) {
+        return c.fieldId === component.use;
+      })) !== null && _form$components$find4 !== void 0 ? _form$components$find4 : component;
+      recurseDeleteComponents(componentObj, collectionData, null, false);
+    });
+  }
+};
+var clearOutUncompletedRoutes = function clearOutUncompletedRoutes(form, formData) {
+  if (form.disableClearWhenHidden) {
+    return formData;
+  }
+  var condensedPages = (0, _mergeCollectionPages.default)(form.pages);
+  var candidateComponentForDeletion = new Map();
+  var componentsUsedInVisiblePagesIds = [];
+  condensedPages === null || condensedPages === void 0 || condensedPages.forEach(function (page) {
+    var _page$collection;
+    if ((_page$collection = page.collection) !== null && _page$collection !== void 0 && _page$collection.name) {
+      formData[page.collection.name].forEach(function (collectionData) {
+        /* eslint-disable consistent-return */
+        page.childPages.forEach(function (childPage) {
+          if (childPage.deleteCollectionWhenHidden) {
+            if (childPage && !(0, _showComponent.default)(childPage, collectionData) || childPage && !(0, _showComponent.default)(childPage, formData)) {
+              delete formData[childPage.collection.name];
+              return false;
+            }
+          }
+          deleteHiddenComponent(childPage, form, collectionData, formData);
+        });
+      });
+    } else {
+      markComponentsForDeletion(page, form, formData, candidateComponentForDeletion, componentsUsedInVisiblePagesIds);
+    }
+  });
+  componentsUsedInVisiblePagesIds.forEach(function (componentId) {
+    return candidateComponentForDeletion.delete(componentId);
+  });
+  candidateComponentForDeletion.forEach(function (val, key) {
+    (0, _deleteNodeByPath.default)(formData, key);
+  });
+  return formData;
+};
+var _default = exports.default = clearOutUncompletedRoutes;

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

@@ -0,0 +1,113 @@
+"use strict";
+
+var _index = _interopRequireDefault(require("./index"));
+var _componentUsedInMultiplePagesForm = _interopRequireDefault(require("../clear-uncompleted-routes/test-data/component-used-in-multiple-pages-form.json"));
+var _componentUsedInMultiplePagesData = _interopRequireDefault(require("../clear-uncompleted-routes/test-data/component-used-in-multiple-pages-data.json"));
+var _formWithCollections = _interopRequireDefault(require("../clear-uncompleted-routes/test-data/form-with-collections.json"));
+var _formWithCollectionsDeleteEntire = _interopRequireDefault(require("../clear-uncompleted-routes/test-data/form-with-collections-delete-entire.json"));
+var _dataWithCollections = _interopRequireDefault(require("../clear-uncompleted-routes/test-data/data-with-collections.json"));
+var _dataWithEntireCollectionRemoved = _interopRequireDefault(require("../clear-uncompleted-routes/test-data/data-with-entire-collection-removed.json"));
+var _dataWithCollectionDataRemoved = _interopRequireDefault(require("../clear-uncompleted-routes/test-data/data-with-collection-data-removed.json"));
+var _formWithComponents = _interopRequireDefault(require("../clear-uncompleted-routes/test-data/form-with-components.json"));
+var _dataWithComponents = _interopRequireDefault(require("../clear-uncompleted-routes/test-data/data-with-components.json"));
+var _dataWithComponentsRemoved = _interopRequireDefault(require("../clear-uncompleted-routes/test-data/data-with-components-removed.json"));
+var _formForNestedComponents = _interopRequireDefault(require("../clear-uncompleted-routes/test-data/form-for-nested-components.json"));
+var _dataWithNestedComponents = _interopRequireDefault(require("../clear-uncompleted-routes/test-data/data-with-nested-components.json"));
+var _dataWithNestedComponentRemoved = _interopRequireDefault(require("../clear-uncompleted-routes/test-data/data-with-nested-component-removed.json"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+describe('FormRenderer', function () {
+  describe('helpers', function () {
+    describe('clearOutUncompletedRoutes', function () {
+      it('should not remove hidden component where it is visible in another page', function () {
+        var form = JSON.parse(JSON.stringify(_componentUsedInMultiplePagesForm.default));
+        var formData = JSON.parse(JSON.stringify(_componentUsedInMultiplePagesData.default));
+        expect(_index.default.clearOutUncompletedRoutes(form, formData)).toEqual(_componentUsedInMultiplePagesData.default);
+      });
+      it('should remove collection data when page hidden', function () {
+        var form = JSON.parse(JSON.stringify(_formWithCollections.default));
+        var formData = JSON.parse(JSON.stringify(_dataWithCollections.default));
+        var result = _index.default.clearOutUncompletedRoutes(form, formData);
+        expect(result).toEqual(_dataWithCollectionDataRemoved.default);
+        formData = JSON.parse(JSON.stringify(_dataWithCollections.default));
+        formData.componentA = true;
+        result = _index.default.clearOutUncompletedRoutes(form, formData);
+        var expected = JSON.parse(JSON.stringify(_dataWithCollections.default));
+        expected.componentA = true;
+        expect(result).toEqual(expected);
+      });
+      it('should remove entire collection data when page hidden', function () {
+        var form = JSON.parse(JSON.stringify(_formWithCollectionsDeleteEntire.default));
+        var formData = JSON.parse(JSON.stringify(_dataWithCollections.default));
+        var result = _index.default.clearOutUncompletedRoutes(form, formData);
+        expect(result).toEqual(_dataWithEntireCollectionRemoved.default);
+      });
+      it('should remove hidden component', function () {
+        var form = JSON.parse(JSON.stringify(_formWithComponents.default));
+        var formData = JSON.parse(JSON.stringify(_dataWithComponents.default));
+        var result = _index.default.clearOutUncompletedRoutes(form, formData);
+        expect(result).toEqual(_dataWithComponents.default);
+        formData.componentA = "hide";
+        result = _index.default.clearOutUncompletedRoutes(form, formData);
+        expect(result).toEqual(_dataWithComponentsRemoved.default);
+      });
+      it('should not remove hidden component when disableClearWhenHidden attribute is true on component', function () {
+        var formData = JSON.parse(JSON.stringify(_dataWithComponents.default));
+        formData.componentA = "hide";
+        var form = JSON.parse(JSON.stringify(_formWithComponents.default));
+        var result = _index.default.clearOutUncompletedRoutes(form, formData);
+        expect(result).toEqual(_dataWithComponentsRemoved.default);
+        form.components[1].disableClearWhenHidden = true;
+        form.components[2].disableClearWhenHidden = true;
+        formData = JSON.parse(JSON.stringify(_dataWithComponents.default));
+        result = _index.default.clearOutUncompletedRoutes(form, formData);
+        expect(result).toEqual(_dataWithComponents.default);
+      });
+      it('should not remove hidden component when disableClearWhenHidden attribute is true on page', function () {
+        var formData = JSON.parse(JSON.stringify(_dataWithComponents.default));
+        formData.componentA = "hide";
+        var form = JSON.parse(JSON.stringify(_formWithComponents.default));
+        var result = _index.default.clearOutUncompletedRoutes(form, formData);
+        expect(result).toEqual(_dataWithComponentsRemoved.default);
+        form.pages[0].disableClearWhenHidden = true;
+        formData = JSON.parse(JSON.stringify(_dataWithComponents.default));
+        result = _index.default.clearOutUncompletedRoutes(form, formData);
+        expect(result).toEqual(_dataWithComponents.default);
+      });
+      it('should not remove hidden component when disableClearWhenHidden attribute is true on form', function () {
+        var submissionData = JSON.parse(JSON.stringify(_dataWithComponents.default));
+        var form = JSON.parse(JSON.stringify(_formWithComponents.default));
+        submissionData.componentA = "hide";
+        var result = _index.default.clearOutUncompletedRoutes(form, submissionData);
+        expect(result).toEqual(_dataWithComponentsRemoved.default);
+        form.disableClearWhenHidden = true;
+        submissionData = JSON.parse(JSON.stringify(_dataWithComponents.default));
+        submissionData.componentA = "hide";
+        result = _index.default.clearOutUncompletedRoutes(form, submissionData);
+        var expected = JSON.parse(JSON.stringify(_dataWithComponents.default));
+        expected.componentA = "hide";
+        expect(result).toEqual(expected);
+      });
+      it('should remove nested hidden component', function () {
+        var submissionData = JSON.parse(JSON.stringify(_dataWithNestedComponents.default));
+        var form = JSON.parse(JSON.stringify(_formForNestedComponents.default));
+        var result = _index.default.clearOutUncompletedRoutes(form, submissionData);
+        expect(result).toEqual(_dataWithNestedComponentRemoved.default);
+        submissionData = JSON.parse(JSON.stringify(_dataWithNestedComponents.default));
+        submissionData.bravo = "another";
+        result = _index.default.clearOutUncompletedRoutes(form, submissionData);
+        var expected = JSON.parse(JSON.stringify(_dataWithNestedComponents.default));
+        delete expected.person.charlie;
+        expected.bravo = "another";
+        expect(result).toEqual(expected);
+        submissionData = JSON.parse(JSON.stringify(_dataWithNestedComponents.default));
+        submissionData.bravo = "notMatchAnything";
+        result = _index.default.clearOutUncompletedRoutes(form, submissionData);
+        expected = JSON.parse(JSON.stringify(_dataWithNestedComponents.default));
+        delete expected.person.charlie;
+        delete expected.person.delta;
+        expected.bravo = "notMatchAnything";
+        expect(result).toEqual(expected);
+      });
+    });
+  });
+});

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

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/* eslint-disable consistent-return */
+var deleteNodeByPath = function deleteNodeByPath(obj, path) {
+  var keys = path.split('.');
+  var current = obj;
+  for (var i = 0; i < keys.length - 1; i += 1) {
+    current = current[keys[i]];
+    if (current === undefined) {
+      return;
+    }
+  }
+  delete current[keys[keys.length - 1]];
+  return obj;
+};
+var _default = exports.default = deleteNodeByPath;

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

@@ -0,0 +1,56 @@
+"use strict";
+
+var _deleteNodeByPath = _interopRequireDefault(require("./deleteNodeByPath"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+describe('Delete node based on path', function () {
+  it('delete where node is at parent level', function () {
+    var nested = {
+      type: "Example form",
+      alpha: "alpha",
+      bravo: "bravo",
+      person: {
+        charlie: "Smith",
+        delta: "Acme Inc"
+      },
+      gamma: "gamma",
+      epsilon: "epsilon"
+    };
+    var path = 'type';
+    var result = (0, _deleteNodeByPath.default)(nested, path);
+    expect(result).toEqual({
+      alpha: "alpha",
+      bravo: "bravo",
+      person: {
+        charlie: "Smith",
+        delta: "Acme Inc"
+      },
+      gamma: "gamma",
+      epsilon: "epsilon"
+    });
+  });
+  it('delete where node is at child level', function () {
+    var nested = {
+      type: "Example form",
+      alpha: "alpha",
+      bravo: "bravo",
+      person: {
+        charlie: "Smith",
+        delta: "Acme Inc"
+      },
+      gamma: "gamma",
+      epsilon: "epsilon"
+    };
+    var path = 'person.charlie';
+    var result = (0, _deleteNodeByPath.default)(nested, path);
+    expect(result).toEqual({
+      type: "Example form",
+      alpha: "alpha",
+      bravo: "bravo",
+      person: {
+        delta: "Acme Inc"
+      },
+      gamma: "gamma",
+      epsilon: "epsilon"
+    });
+  });
+});

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

@@ -13,6 +13,7 @@ var _getNextPageId = _interopRequireDefault(require("./getNextPageId"));
 var _getPage = _interopRequireDefault(require("./getPage"));
 var _getSubmissionStatus = _interopRequireDefault(require("./getSubmissionStatus"));
 var _getUpdatedSectionStates = _interopRequireDefault(require("./getUpdatedSectionStates"));
+var _clearOutUncompletedRoutes = _interopRequireDefault(require("./clearOutUncompletedRoutes"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 // Local imports
 
@@ -25,6 +26,7 @@ var helpers = {
   getNextPageId: _getNextPageId.default,
   getPage: _getPage.default,
   getSubmissionStatus: _getSubmissionStatus.default,
-  getUpdatedSectionStates: _getUpdatedSectionStates.default
+  getUpdatedSectionStates: _getUpdatedSectionStates.default,
+  clearOutUncompletedRoutes: _clearOutUncompletedRoutes.default
 };
 var _default = exports.default = helpers;

package/dist/components/FormRenderer/onPageAction.js

@@ -56,6 +56,7 @@ var onPageAction = function onPageAction(action, patch, patchLabel, hooks, data,
       _handlers.default.navigate(action, pageId, onPageChange);
       setSubmitting(false);
     } else {
+      var baseData = _objectSpread(_objectSpread(_objectSpread({}, data), patch), formState.page.formData);
       var pageUpdate = function pageUpdate(next) {
         return onPageChange(_helpers.default.getNextPageId(type, pages, pageId, action, next));
       };
@@ -107,8 +108,13 @@ var onPageAction = function onPageAction(action, patch, patchLabel, hooks, data,
         setData(submissionData);
       }
       ;
-
-      // In case of hub-and-spoke if patchLabel has changed then 
+      if (action.type === _models.PageAction.TYPES.SUBMIT) {
+        _helpers.default.clearOutUncompletedRoutes({
+          pages: pages,
+          components: components
+        }, submissionData);
+      }
+      // In case of hub-and-spoke if patchLabel has changed then
       // save name and value to variables for call to onSubmit hook
       var changedFieldName;
       var changedFieldValue;

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

@@ -50,6 +50,11 @@ jest.mock('./helpers', function () {
       this.cleanHiddenNestedDataCalls += 1;
       return patch;
     },
+    clearOutUncompletedRoutesCalls: 0,
+    clearOutUncompletedRoutes: function clearOutUncompletedRoutes(pages, allComponents, formData) {
+      this.clearOutUncompletedRoutesCalls += 1;
+      return formData;
+    },
     getNextPageIdCalls: 0,
     getNextPageId: function getNextPageId() {
       this.getNextPageIdCalls += 1;

package/dist/components/SummaryList/SummaryList.scss

@@ -1,5 +1,5 @@
-@import 'govuk-frontend/dist/govuk/_base';
-@import 'govuk-frontend/dist/govuk/components/summary-list/_summary-list';
+@import 'node_modules/govuk-frontend/govuk/_base';
+@import 'node_modules/govuk-frontend/govuk/components/summary-list/_summary-list';
 
 .govuk-summary-list__title {
   width: 100%;

package/dist/components/TaskList/TaskList.scss

@@ -1,4 +1,4 @@
-@import 'govuk-frontend/dist/govuk/_base';
+@import 'node_modules/govuk-frontend/govuk/_base';
 
 // Task list pattern
 

package/dist/utils/CollectionPage/mergeCollectionPages.js

@@ -32,6 +32,7 @@ var createMasterPage = function createMasterPage(page) {
   return {
     id: page.id,
     name: page.name,
+    deleteCollectionWhenHidden: page.deleteCollectionWhenHidden,
     collection: _objectSpread({
       masterPage: true
     }, page.collection),
@@ -84,7 +85,7 @@ var nestUnderParent = function nestUnderParent(childPage, masterPages) {
  */
 var mergeCollectionPages = function mergeCollectionPages(pages) {
   var masterPages = {};
-  return pages.map(function (page) {
+  var pagesWithMasters = pages.map(function (page) {
     var _page$collection;
     if (page !== null && page !== void 0 && (_page$collection = page.collection) !== null && _page$collection !== void 0 && _page$collection.name) {
       if (!masterPages[page.collection.name]) {
@@ -92,10 +93,7 @@ var mergeCollectionPages = function mergeCollectionPages(pages) {
         // we kick one off using this page as a template.
         var newMasterPage = createMasterPage(page);
         masterPages[page.collection.name] = newMasterPage;
-        // We check if the new master page belongs to a child collection,
-        // if so then nest it under the parent master page and remove from
-        // the pages array. If not then treat it as a top-level collection.
-        return nestUnderParent(newMasterPage, masterPages) ? null : newMasterPage;
+        return newMasterPage;
       }
       // If a master page already exists for this collection.name
       // then we just merge this page into it and remove this page
@@ -107,5 +105,17 @@ var mergeCollectionPages = function mergeCollectionPages(pages) {
   }).filter(function (page) {
     return !!page;
   });
+  // We nest any child master pages under their parents here to 
+  // ensure that all parent master pages have been created by the
+  // above code first.
+  return pagesWithMasters.map(function (page) {
+    var _page$collection2;
+    if ((_page$collection2 = page.collection) !== null && _page$collection2 !== void 0 && _page$collection2.masterPage) {
+      return nestUnderParent(page, masterPages) ? null : page;
+    }
+    return page;
+  }).filter(function (e) {
+    return !!e;
+  });
 };
 var _default = exports.default = mergeCollectionPages;

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

@@ -49,7 +49,7 @@ describe('utils.CollectionPage.mergeCollectionPages', function () {
       childPages: PAGES
     });
   });
-  it('should correctly merge and nested child collection pages under their parents', function () {
+  it('should correctly merge and nest child collection pages under their parents', function () {
     var PAGES = [{
       id: 'page1',
       collection: {
@@ -95,6 +95,53 @@ describe('utils.CollectionPage.mergeCollectionPages', function () {
       }]
     });
   });
+  it('should correctly merge and nest child collection pages under their parents, even if the child pages are created first', function () {
+    var PAGES = [{
+      id: 'page1',
+      collection: {
+        name: 'parent.child'
+      },
+      components: [TEXT_COMP]
+    }, {
+      id: 'page2',
+      collection: {
+        name: 'parent.child'
+      },
+      components: [DATE_COMP]
+    }, {
+      id: 'page3',
+      collection: {
+        name: 'parent'
+      },
+      components: [DATE_COMP]
+    }, {
+      id: 'page4',
+      collection: {
+        name: 'parent'
+      },
+      components: [DATE_COMP]
+    }];
+    var RESULT = (0, _mergeCollectionPages.default)(PAGES);
+    expect(RESULT.length).toEqual(1); // One master page for parent collection.      
+    expect(RESULT[0].childPages.length).toEqual(3); // Two normal pages and the child collection's master page.
+    expect(RESULT[0]).toMatchObject({
+      id: 'page3',
+      collection: {
+        name: 'parent',
+        masterPage: true
+      },
+      formData: {},
+      childPages: [PAGES[2], PAGES[3], {
+        id: 'page1',
+        collection: {
+          name: 'parent.child',
+          masterPage: true
+        },
+        formData: {},
+        childPages: [PAGES[0], PAGES[1]]
+      }]
+    });
+  });
   it('should leave non-collection pages unaffected', function () {
     var PAGES = [{
       id: 'page1',

package/dist/utils/CollectionPage/setCollectionPageData.js

@@ -33,9 +33,9 @@ var setCollectionPageData = function setCollectionPageData(collectionName, newDa
     if (!data[name]) {
       var newEntryId = Date.now().toString();
       // eslint-disable-next-line no-param-reassign
-      formData["".concat(name, "ActiveId")] = newEntryId;
+      formData["".concat(name, "ActiveId")] = formData["".concat(name, "ActiveId")] || newEntryId;
       data[name] = [{
-        id: newEntryId
+        id: formData["".concat(name, "ActiveId")]
       }];
     }
     // We're at the target collection's level, so 

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

@@ -32,6 +32,37 @@ describe('Utils.CollectionPage.setCollectionPageData', function () {
       value: 'Alpha'
     });
   });
+  it('should not overwrite existing entry IDs', function () {
+    var FORM_DATA = {
+      grandchildActiveId: 77
+    };
+    var NEW_DATA = [{
+      id: '123',
+      value: 'Alpha'
+    }];
+    (0, _setCollectionPageData.default)('parent.child.grandchild', NEW_DATA, FORM_DATA);
+
+    // Check active Ids have been added for all collections in
+    // the path.
+    expect(FORM_DATA.parentActiveId).toBeDefined();
+    expect(FORM_DATA.childActiveId).toBeDefined();
+    expect(FORM_DATA.grandchildActiveId).toEqual(77);
+
+    // Parent collection.
+    expect(FORM_DATA.parent.length).toEqual(1);
+    expect(FORM_DATA.parent[0].id).toBeTruthy();
+
+    // Child collection.
+    expect(FORM_DATA.parent[0].child.length).toEqual(1);
+    expect(FORM_DATA.parent[0].child[0].id).toBeTruthy();
+
+    // Child collection.
+    expect(FORM_DATA.parent[0].child[0].grandchild.length).toEqual(1);
+    expect(FORM_DATA.parent[0].child[0].grandchild[0]).toMatchObject({
+      id: '123',
+      value: 'Alpha'
+    });
+  });
   describe('when failing to set data for a nested collection', function () {
     it('should do nothing if one of the parent collections does not exist', function () {
       var FORM_DATA = {

package/dist/utils/FormPage/getConditionalText.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _copReactComponents = require("@ukhomeoffice/cop-react-components");
+var _meetsAllConditions = _interopRequireDefault(require("../Condition/meetsAllConditions"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+// Global imports.
+
+// Local imports.
+
+/**
+ * Gets the first options in an array of strings that passes all of it's conditions.
+ * 
+ * Options is expected to be in the format:
+ * [
+ *   {
+ *     text: 'Option A',
+ *     show_when: [ ... ]
+ *   },
+ *   {
+ *     text: 'Option B',
+ *     show_when: [ ... ]
+ *   }
+ *   ...
+ * ]
+ * 
+ * @param {Array} options An array of options matching the above format.
+ * @param {Object} formData A formData object to use when evaluating the conditions. 
+ * @param {String} key The key to use to find the text to use in each option, defaults to 'text'. 
+ * @returns The first string that passes its' conditions, or null if something went wrong.
+ */
+var getConditionalText = function getConditionalText(options, formData) {
+  var key = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'text';
+  if (typeof options === 'string') {
+    return _copReactComponents.Utils.interpolateString(options, formData);
+  }
+  if (!Array.isArray(options) || Object.keys(formData).length === 0) {
+    return null;
+  }
+  var shownOption = options.find(function (option) {
+    if (typeof option === 'string') {
+      // This is intended to allow a plain string 'fallback' option in the array.
+      // As such, it should be the last option in the array as any options after
+      // it will not be considered.
+      return true;
+    }
+    return (0, _meetsAllConditions.default)(option.show_when, formData);
+  });
+  return typeof shownOption === 'string' ? _copReactComponents.Utils.interpolateString(shownOption, formData) : _copReactComponents.Utils.interpolateString(shownOption[key], formData);
+};
+var _default = exports.default = getConditionalText;