@ukhomeoffice/cop-react-form-renderer 6.15.8-alpha → 6.15.11-alpha

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

@@ -15,202 +15,197 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /* eslint-disable no-param-reassign */
-const addValue = (key, value, multiMap) => {
-  if (!multiMap.has(key)) {
-    multiMap.set(key, []);
-  }
-  multiMap.get(key).push(value);
-};
-const pruneSingleComponent = (formData, path, component, componentsToKeep) => {
-  // If there is more than one entry for this component, then it is being used elsewhere in a visible page. Don't prune, but reduce the count by 1
-  if (componentsToKeep[path] > 1) {
-    componentsToKeep[path] -= 1;
-  } else {
+/**
+ *  
+ * This function recursively reads in the non-collection pages and components and builds lists from it:
+ * 
+ * 1: allComponents. This is a map of all components in the form, keyed by the fully qualified component path.
+ *      If the component belongs to a page (or other parent entity) that has its own show_when rule, then this rule
+ *      is combined with the show_when rule of the component, so the decision as to whether the component's data should
+ *      exist can be made just by processing the component.
+ *      The main purpose of this map is to allow us to build a dependency graph in the function createComponentDependenciesGraph
+ * 
+ * 2: componentsToKeep: This is an object containing a count of how many times each component is defined. This is to support the
+ *      fact that a component can be used more than once in a form (but with mutually exclusive show_when rules so only used 
+ *      once with the same path). 
+ * 
+ * @param {Array} condensedPages All pages in the form, with the collection pages collated into a single object per collection
+ * @param {Map} allCollections A map of collection objects, which are a grouping of the pages that make up a single collection  
+ * @param {Object} formData The form payload
+ * @param {Map} componentByIdMap Map of all components, to enable performant lookup by id
+ * @param {Map} componentByFieldIdMap Map of all components, to enable performant lookup by fieldId
+ * @param {Map} allComponents All components in form (including nested), keyed by path
+ * @param {Object} componentsToKeep A count of how many times each component is used, to prevent us deleting components defined > 1 times
+ * @return allComponents and componentsToKeep updated in place
+ */
+const createComponentMapsFromForm = (condensedPages, allCollections, componentByIdMap, componentByFieldIdMap, allComponents, componentsToKeep, formData) => {
+  /*
+   * Inner function to support the recursion required to traverse through the nested structures of the form
+   */
+  const recursivelyMapFieldsAndDeleteHiddenNested = (page, component, path) => {
     var _component$data;
-    Utils.deleteNodeByPath(formData, path);
-    // If the component has options, go through each option removing the data for any nested fields. Required as nested options are in the payload at the same heirarchical level.
-    if (component !== null && component !== void 0 && (_component$data = component.data) !== null && _component$data !== void 0 && _component$data.options) {
-      var _component$data2;
-      component === null || component === void 0 || (_component$data2 = component.data) === null || _component$data2 === void 0 || (_component$data2 = _component$data2.options) === null || _component$data2 === void 0 || _component$data2.forEach(option => {
-        var _option$nested;
-        (_option$nested = option.nested) === null || _option$nested === void 0 || _option$nested.forEach(nested => {
-          Utils.deleteNodeByPath(formData, Utils.getNestedQuestionPath(path, nested.fieldId));
-        });
-      });
-    }
-  }
-};
-const toArray = value => Array.isArray(value) ? value : [value];
-const recursivelyMapFieldsAndDeleteHiddenNested = (page, component, path, allComponents, componentsToKeep, formData) => {
-  var _component$data3;
-  // Many component, such as warnings, html and details do not have data so we can ignore them
-  if (!component.fieldId) return;
-  path = path ? "".concat(path, ".").concat(component.fieldId) : component.fieldId;
-
-  // Components can be referenced from more than one page. We need to keep track of the count of each component path, to avoid pruning paths that exist elsewhere
-  componentsToKeep[path] = (componentsToKeep[path] || 0) + 1;
-
-  // add the fully qualified path to the component, which will be required when resolving the dependencies later
-  component.path = path;
-
-  // If the parent page has a rule, combine it with any component rule
-  if (page.show_when) {
-    component.show_when = component.show_when ? [].concat(toArray(page.show_when), toArray(component.show_when)) : page.show_when;
-  }
+    if (!component.fieldId) return; // Many component, such as warnings, html and details do not have data so we can ignore them        
+    path = path ? "".concat(path, ".").concat(component.fieldId) : component.fieldId; // Build up the path to reflect nested components
+    componentsToKeep[path] = (componentsToKeep[path] || 0) + 1; // We need to keep track of the count of each component path, to avoid pruning paths that exist elsewhere        
+    component.path = path; // Add the fully qualified path to the component, which will be required when resolving the dependencies later
 
-  // this is the master repository of all components. Can be more than one component per path, so keep a map of <path, array>
-  addValue(path, component, allComponents);
-  if (component.components) {
-    component.components.forEach(c => {
-      recursivelyMapFieldsAndDeleteHiddenNested(page, c, path, allComponents, componentsToKeep, formData);
-    });
-  } else if (component !== null && component !== void 0 && (_component$data3 = component.data) !== null && _component$data3 !== void 0 && _component$data3.options) {
-    var _component$data4;
-    /**
-     * Perform processing for any options, and any options containing nested questions.
-     * - set hidden nested questions when the parent option is not selected
-     * - any nested questions must be treated as components which can be shown/hidden
-     */
-    component === null || component === void 0 || (_component$data4 = component.data) === null || _component$data4 === void 0 || (_component$data4 = _component$data4.options) === null || _component$data4 === void 0 || _component$data4.forEach(option => {
-      if (option.nested) {
-        if (!(0, _optionIsSelected.default)(formData[component.id], option)) {
-          option.nested.forEach(nestedComponent => {
-            // It is safe to delete this now, as we know this data item can not be required as the associated option is not selected                     
-            Utils.deleteNodeByPath(formData, Utils.getNestedQuestionPath(path, nestedComponent.fieldId));
-          });
-        } else {
-          // If the option is selected, then add any nested components to the allComponents list. If the nested block has a show_when, pass it down to the child questions
-          const blockShowWhen = option.show_when;
-          option.nested.forEach(nestedComponent => {
-            if (blockShowWhen) nestedComponent.show_when = blockShowWhen;
-            recursivelyMapFieldsAndDeleteHiddenNested(page, nestedComponent, Utils.getImmediateParent(path), allComponents, componentsToKeep, formData);
-          });
-        }
-      }
-    });
-  }
-};
-const recursivelyMapDependencies = (component, allDependencyRelationships) => {
-  // Non data components can be ignored - can we remove this when doing the allcomponents thing?
-  if (!component.fieldId) return;
-  const componentDependencies = Utils.getDependencies(component);
-  if (componentDependencies) {
-    // This path may already exist (if a component is defined twice in the form) so build up the dependencies
-    if (allDependencyRelationships.has(component.path)) {
-      const existingSet = allDependencyRelationships.get(component.path);
-      componentDependencies.forEach(dep => existingSet.add(dep));
-    } else {
-      allDependencyRelationships.set(component.path, new Set(componentDependencies));
+    // If the parent page has a rule, combine it with any component rule as we will be resolving dependencies for components only
+    if (page.show_when) {
+      component.show_when = component.show_when ? [].concat(Utils.toArray(page.show_when), Utils.toArray(component.show_when)) : page.show_when;
     }
-  }
-  if (component.components) {
-    component.components.forEach(c => {
-      recursivelyMapDependencies(c, allDependencyRelationships);
-    });
-  }
-};
-const recursivelyResolveDependencies = (visited, dependentEntity, dependencyRelationships, form, formData, allComponents, componentsToKeep, allCollections) => {
-  if (visited.has(dependentEntity)) return;
-  visited.add(dependentEntity);
-  const neighbours = dependencyRelationships.get(dependentEntity.path);
-  neighbours === null || neighbours === void 0 || neighbours.forEach(neighbourPath => {
-    const neighbourArray = Utils.getDependencyObjectFromPath(neighbourPath, allComponents);
-    if (neighbourArray) {
-      neighbourArray.forEach(neighbour => {
-        if (!visited.has(neighbour)) {
-          recursivelyResolveDependencies(visited, neighbour, dependencyRelationships, form, formData, allComponents, componentsToKeep, allCollections);
-        }
+    Utils.addValue(path, component, allComponents); // There can be more than one component per path, so keep a map of <path, array>
+    // recurse if there is nesting
+    if (component.components) {
+      component.components.forEach(c => {
+        recursivelyMapFieldsAndDeleteHiddenNested(page, c, path, allComponents, componentsToKeep, formData);
       });
-    } else {
-      // Refactor out helper methods
-      const arrayNamePattern = /([a-zA-Z_$][\w$]*)\[\d+\]/;
-      const match = neighbourPath.match(arrayNamePattern);
-      if (match) {
-        const collectionName = match[1];
-        const collection = allCollections.get(collectionName);
-        if (collection) {
-          var _collection$childPage;
-          (_collection$childPage = collection.childPages) === null || _collection$childPage === void 0 || _collection$childPage.forEach(childPage => {
-            if (childPage.show_when) {
-              const message = "It is not possible to reliably clean hidden data when a component is dependent on a \n                            collection's data, and that collection is itself dependent on data elsewhere in the form.\n                            The dependency path is ".concat(neighbourPath, ", and the chained show_when is ").concat(JSON.stringify(childPage.show_when), ".\n                            The form will need to be changed to break this chained dependency");
-              throw new Error(message);
-            }
-            ;
-          });
+    } else if (component !== null && component !== void 0 && (_component$data = component.data) !== null && _component$data !== void 0 && _component$data.options) {
+      var _component$data2;
+      component === null || component === void 0 || (_component$data2 = component.data) === null || _component$data2 === void 0 || (_component$data2 = _component$data2.options) === null || _component$data2 === void 0 || _component$data2.forEach(option => {
+        if (option.nested) {
+          if (!(0, _optionIsSelected.default)(formData[component.id], option)) {
+            option.nested.forEach(nestedComponent => {
+              // delete hidden nested question payload items when the parent option is not selected
+              Utils.deleteNodeByPath(formData, Utils.getNestedQuestionPath(path, nestedComponent.fieldId));
+            });
+          } else {
+            // If the option is selected, then add any nested components to the allComponents list. If the nested block has a show_when, pass it down to the child questions                        
+            const blockShowWhen = option.show_when;
+            option.nested.forEach(nestedComponent => {
+              if (blockShowWhen) nestedComponent.show_when = blockShowWhen;
+              recursivelyMapFieldsAndDeleteHiddenNested(page, nestedComponent, Utils.getImmediateParent(path), allComponents, componentsToKeep, formData);
+            });
+          }
         }
-      }
-    }
-  });
-  // Whilst unravelling the recursion, we can start pruning from the leaf upwards
-  if (!Utils.isShowEntity(dependentEntity, formData)) {
-    pruneSingleComponent(formData, dependentEntity.path, dependentEntity, componentsToKeep);
-  }
-};
-const pruneCollectionEntry = (pathsToKeep, componentsToPrune, collectionDataObject, formData) => {
-  componentsToPrune.forEach(component => {
-    if (!pathsToKeep.has(component.fieldId)) {
-      var _component$data5;
-      if (component.type === "multifile") {
-        Utils.deleteCorrespondingMetaInfo(component, collectionDataObject, formData);
-      }
-      Utils.deleteNodeByPath(collectionDataObject, component.fieldId);
-
-      // REFACTOR
-      // If the component has options, go through each option removing the data for any nested fields. Required as nested options are in the payload at the same heirarchical level.
-      if (component !== null && component !== void 0 && (_component$data5 = component.data) !== null && _component$data5 !== void 0 && _component$data5.options) {
-        var _component$data6;
-        component === null || component === void 0 || (_component$data6 = component.data) === null || _component$data6 === void 0 || (_component$data6 = _component$data6.options) === null || _component$data6 === void 0 || _component$data6.forEach(option => {
-          var _option$nested2;
-          (_option$nested2 = option.nested) === null || _option$nested2 === void 0 || _option$nested2.forEach(nested => {
-            Utils.deleteNodeByPath(collectionDataObject, Utils.getNestedQuestionPath(component.fieldId, nested.fieldId));
-          });
-        });
-      }
+      });
     }
-  });
-};
-const clearOutUncompletedRoutes = (form, formData) => {
-  // Load components into maps keyed on id and field for subsequent efficient access
-  const componentByIdMap = new Map(form.components.map(c => [c.id, c]));
-  const componentByFieldIdMap = new Map(form.components.map(c => [c.fieldId, c]));
-
-  // Recurse through the whole form, building a map of all fields and their owning component id. 
-  // This is required to build the component->dependency graph in the next step, as the dependencies reference fields, not components.
-
-  const condensedPages = (0, _mergeCollectionPages.default)(form.pages);
-  const allComponents = new Map();
-  const componentsToKeep = {};
-  const allCollections = new Map();
+  };
+  // Entry point for the recursive traverse of the form specification. 
   condensedPages === null || condensedPages === void 0 || condensedPages.forEach(page => {
+    // Make the distinction between collections (which will be processed separately) and non-collections, which will be processed here.
     if (page.childPages) {
       allCollections.set(page.collection.name, page);
     } else {
       var _page$components;
       (_page$components = page.components) === null || _page$components === void 0 || _page$components.forEach(useComponentInPage => {
         const componentObj = Utils.findComponentDefinitionInForm(useComponentInPage, componentByIdMap, componentByFieldIdMap);
-        recursivelyMapFieldsAndDeleteHiddenNested(page, componentObj, null, allComponents, componentsToKeep, formData);
+        recursivelyMapFieldsAndDeleteHiddenNested(page, componentObj, null);
       });
     }
   });
-  const allDependencyRelationships = new Map();
+};
+/**
+ *  
+ * This function iterates through the allComponents list. For each component, it will derive all payload paths 
+ * that this component is dependent on. The same component might be defined more than once in the form, so add the dependencies
+ * for all the component definitions.
+ * 
+ * @param {Map} allDependencyRelationships A map of each component with dependencies. The key is the fully qualified path and the value is a Set of all the paths that this component is dependent on.   
+ * @param {Map} allComponents All components in form (including nested), keyed by path. Used to build the allDependencyRelationships
+ * @return allDependencyRelationships updated in place
+ */
+const createComponentDependenciesGraph = (allComponents, allDependencyRelationships) => {
   allComponents === null || allComponents === void 0 || allComponents.forEach(componentArray => {
     componentArray === null || componentArray === void 0 || componentArray.forEach(component => {
-      recursivelyMapDependencies(component, allDependencyRelationships);
+      if (!component.fieldId) return;
+      const componentDependencies = Utils.getDependencies(component);
+      if (componentDependencies) {
+        if (allDependencyRelationships.has(component.path)) {
+          const existingSet = allDependencyRelationships.get(component.path);
+          componentDependencies.forEach(dep => existingSet.add(dep));
+        } else {
+          allDependencyRelationships.set(component.path, new Set(componentDependencies));
+        }
+      }
     });
   });
+};
 
-  // Visit all components with 'show_whens' and resolve the dependency. Only delete the data at the leaf element, or when un-winding the recursion
-  // to deal with the edge case that an element is dependent on a data item that is hidden by a different constraint
+/**
+ * 
+ * This function loops through each entry in the allDependencyRelationships map. Each entry will contain a Set of all
+ * paths that the key path is dependent on. Recursively delve into each dependency path and repeat the process until we
+ * have reached an entry that has no dependencies. At this point we can safely resolve the dependency using its show_when rule, 
+ * and unwind the recursion. 
+ * 
+ * Because all the components are inter-connected, this could result in resolving the same entry repeatedly, so keep a 'visited' 
+ * array to prevent this.
+ *   
+ * @param {Object} formData The form payload
+ * @param {Map} allComponents All components in form (including nested), keyed by path
+ * @param {Object} componentsToKeep A count of how many times each component is used, to prevent us deleting components defined > 1 times
+ * @param {Map} allDependencyRelationships A map of each component with dependencies. The key is the fully qualified path and the value is a Set of all the paths that this component is dependent on.   
+ * @param {Map} allCollections A map of collection objects, which are a grouping of the pages that make up a single collection  
+ * @param {Object} form The form specification
+ */
+const resolveComponentDependenciesGraph = (allDependencyRelationships, allComponents, componentsToKeep, allCollections, form, formData) => {
+  /*
+   * Inner function to support the recursion required to traverse through the nested nature of the allDependencyRelationships
+   */
+  const recursivelyResolveDependencies = (visited, dependentComponent, dependencyRelationships) => {
+    if (visited.has(dependentComponent)) return;
+    visited.add(dependentComponent);
+    const dependencies = dependencyRelationships.get(dependentComponent.path);
+    dependencies === null || dependencies === void 0 || dependencies.forEach(dependencyPath => {
+      const dependencyComponents = Utils.getDependencyObjectFromPath(dependencyPath, allComponents);
+      if (dependencyComponents) {
+        dependencyComponents.forEach(dependency => {
+          if (!visited.has(dependency)) {
+            recursivelyResolveDependencies(visited, dependency, dependencyRelationships);
+          }
+        });
+      } else {
+        // We are here if the dependency path was not found in the list of allComponents. This is valid and can happen when 
+        // a component is dependent on a field that was generated by cop-ui, e.g. jobHolderStaffDetails.linemanagerEmail.
+        // However, there is an edge case (described in the message below) that we need to validate for.  
+        const arrayNamePattern = /([a-zA-Z_$][\w$]*)\[\d+\]/;
+        const match = dependencyPath.match(arrayNamePattern);
+        if (match) {
+          const collectionName = match[1];
+          const collection = allCollections.get(collectionName);
+          if (collection) {
+            var _collection$childPage;
+            (_collection$childPage = collection.childPages) === null || _collection$childPage === void 0 || _collection$childPage.forEach(childPage => {
+              if (childPage.show_when) {
+                const message = "It is not possible to reliably clean hidden data when a component is dependent on a \n                                collection's data, and that collection is itself dependent on data elsewhere in the form.\n                                The dependency path is ".concat(dependencyPath, ", and the chained show_when is ").concat(JSON.stringify(childPage.show_when), ".\n                                The form will need to be changed to break this chained dependency");
+                throw new Error(message);
+              }
+              ;
+            });
+          }
+        }
+      }
+    });
+    // Whilst unravelling the recursion, we can start deleting from the leaf upwards
+    if (!Utils.isShowEntity(dependentComponent, formData)) {
+      Utils.deleteComponentData(formData, dependentComponent.path, dependentComponent, componentsToKeep);
+    }
+  };
   const visited = new Set();
-  allDependencyRelationships === null || allDependencyRelationships === void 0 || allDependencyRelationships.forEach((neighbours, dependentEntityPath) => {
+  allDependencyRelationships === null || allDependencyRelationships === void 0 || allDependencyRelationships.forEach((dependencies, dependentComponentPath) => {
     // Each path that a component is dependent on may have > 1 possible dependent components, if a field is used twice
-    const dependentEntities = allComponents.get(dependentEntityPath);
-    dependentEntities === null || dependentEntities === void 0 || dependentEntities.forEach(dependentEntity => {
-      if (!visited.has(dependentEntity)) {
-        recursivelyResolveDependencies(visited, dependentEntity, allDependencyRelationships, form, formData, allComponents, componentsToKeep, allCollections);
+    const dependentComponents = allComponents.get(dependentComponentPath);
+    dependentComponents === null || dependentComponents === void 0 || dependentComponents.forEach(dependentComponent => {
+      if (!visited.has(dependentComponent)) {
+        recursivelyResolveDependencies(visited, dependentComponent, allDependencyRelationships, form, formData, allComponents, componentsToKeep, allCollections);
       }
     });
   });
+};
+
+/**
+ * For each collection, iterate through the payload array's objects, and apply the collections show_when
+ * rules for each payload object.
+ * 
+ * Some of the rules may be dependent on payload items outside the collection. These will already have been cleansed
+ * so will be in a reliable state.   
+ * 
+ * @param {Map} allCollections A map of collection objects, which are a grouping of the pages that make up a single collection  
+ * @param {Object} formData The form payload
+ * @param {Map} componentByIdMap Map of all components, to enable performant lookup by id
+ * @param {Map} componentByFieldIdMap Map of all components, to enable performant lookup by fieldId
+ */
+const cleanseCollectionData = (allCollections, formData, componentByIdMap, componentByFieldIdMap) => {
   allCollections === null || allCollections === void 0 || allCollections.forEach((collection, collectionName) => {
     const collectionDataArray = formData[collectionName];
     collectionDataArray === null || collectionDataArray === void 0 || collectionDataArray.forEach(collectionDataEntry => {
@@ -225,23 +220,93 @@ const clearOutUncompletedRoutes = (form, formData) => {
         const showPage = Utils.isShowEntity(childPage, dataForEvaluation);
         (_childPage$components = childPage.components) === null || _childPage$components === void 0 || _childPage$components.forEach(useComponentInPage => {
           const componentObj = Utils.findComponentDefinitionInForm(useComponentInPage, componentByIdMap, componentByFieldIdMap);
-
           // Non-data components can be ignored (eg html)
           if (!componentObj.fieldId) return;
           const showComponentOnPage = Utils.isShowEntity(useComponentInPage, dataForEvaluation);
           if (showPage && showComponentOnPage && Utils.isShowEntity(componentObj, dataForEvaluation)) {
-            // There may be 2 components with the same path (eg quantity in EAB2), so don't delete hidden components if they are required elsewhere
+            // There may be >1 components with the same path (eg quantity in EAB2), so don't delete hidden components if they are required elsewhere
             pathsToKeep.add(componentObj.fieldId);
           } else {
             componentsToPrune.set(componentObj.id, componentObj);
           }
         });
       });
-      pruneCollectionEntry(pathsToKeep, componentsToPrune, collectionDataEntry, formData);
+      Utils.pruneCollectionEntry(pathsToKeep, componentsToPrune, collectionDataEntry, formData);
     });
     // 
-    if (collectionDataArray) Utils.removeObjectWithSingleIdFieldInPlace(collectionDataArray);
+    if (collectionDataArray) Utils.removeObjectWithOnlySingleIdField(collectionDataArray);
   });
+};
+
+/**
+ * 
+ * The purpose of this function is to apply the show_when rules defined in the form specification to the 
+ * form payload (formData), and remove any data that should not be shown according to those rules.
+ * (the reason this data exists in the payload is that users can answer a question in such a way that 
+ * other questions are 'shown' to them, which are then complete. The user can then go back and change the original
+ * question to then 'hide' those questions, but the answers they gave persist in the payload. The must be cleansed
+ * before being submitted.
+ * 
+ * There are 2 types of payload data that have to be treated differently by this function for it to work.
+ * 
+ * 1. Data from non-repeating pages, containing components.
+ * 
+ * Each data item captured will be written to the payload as a field with the name of the fieldId of the payload.
+ * In the case of components that are nested within 'container' components, the payload will reflect the nesting.
+ * There is no limit to the level of nesting in a form.
+ * 
+ * To cleanse the payload for this type of data, we do the following (high level description, see method comments for detail):
+ * 
+ * - build a map of all components, keyed by their payload path (required for the next step)
+ * - for all of these components that have dependencies (show_when rules), create a graph datastructure to show all components
+ *   on which a component is dependent, and then all components that those components may be dependent on. There is no limit to 
+ *   the depth of these chained dependencies.
+ * - the reason for building a graph of these dependency chains is so we know the sequence in which we must resolve the dependencies. 
+ *   For any given chain of dependencies it is essential that we resolve the dependencies starting at the end of the chains, and work our way
+ *   back up the chain. If not, we could be resolving a dependency based on a payload item that itself will later be deleted.
+ *   Therefore, the final step is to recursively traverse the dependency graph, resolving the dependency rule for the components in 
+ *   the chain from the leaf back up to the parent node. 
+ * 
+ * 2. Page collection data
+ * 
+ * A page collection is a set of one or more pages which (as a group) can be filled in as many times is required
+ * by the user. For example, in EAB, you can add as many item-seal-details to an EAB form as are required. An item-seal-detail
+ * is made up of several different pages, all grouped. The data saved will be an array representing the whole collection, with
+ * each object in the array representing a single collection entry (a single item-seal-detail in this example).
+ * 
+ * Cleanse collection data has to be driven from the payload rather than the form, as there are repeated objects in an array
+ * representing the data. Each one has to be treated independently as the data to be cleansed can be different in each one.
+ *  
+ * - For each collection type, iterate through each payload object and treat it like an independent payload..
+ * - For each collection payload object, iterate through the collection's pages and components, and apply all the show_when rules
+ *   found at both page and component level to the payload. 
+ * - Repeat for each payload object
+ * - Repeat for all collections
+ * 
+ * @param {*} form 
+ * @param {*} formData 
+ * @returns {*} cleansed form data 
+ */
+const clearOutUncompletedRoutes = (form, formData) => {
+  // Load components into maps keyed on id and field for subsequent performant access
+  const componentByIdMap = new Map(form.components.map(c => [c.id, c]));
+  const componentByFieldIdMap = new Map(form.components.map(c => [c.fieldId, c]));
+
+  // Instantiate data structures to hold the form specification and the dependency graph   
+  const allComponents = new Map();
+  const componentsToKeep = {};
+  const allCollections = new Map();
+  const allDependencyRelationships = new Map();
+
+  // Group all pages relating to a page-collection into a single object to aid collection 
+  // processing, and to allow us to differentiate between a collection and non-collection page.
+  const condensedPages = (0, _mergeCollectionPages.default)(form.pages);
+  createComponentMapsFromForm(condensedPages, allCollections, componentByIdMap, componentByFieldIdMap, allComponents, componentsToKeep, formData);
+  createComponentDependenciesGraph(allComponents, allDependencyRelationships);
+  resolveComponentDependenciesGraph(allDependencyRelationships, allComponents, componentsToKeep, allCollections, form, formData);
+  cleanseCollectionData(allCollections, formData, componentByIdMap, componentByFieldIdMap);
+
+  // The cleansing above may have left empty arrays and collection IDs. Tidy these up.
   Utils.removeEmptyArraysAndUnusedCollectionIDs(formData);
   return formData;
 };

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

@@ -40,6 +40,9 @@ var _dataHiddenPageRemoved = _interopRequireDefault(require("../clear-uncomplete
 var _formHiddenPageSameComponentReused = _interopRequireDefault(require("../clear-uncompleted-routes/test-data/forms/form-hidden-page-same-component-reused.json"));
 var _dataHiddenPageSameComponentReused = _interopRequireDefault(require("../clear-uncompleted-routes/test-data/input/data-hidden-page-same-component-reused.json"));
 var _dataHiddenPageSameComponentReusedRemoved = _interopRequireDefault(require("../clear-uncompleted-routes/test-data/output/data-hidden-page-same-component-reused-removed.json"));
+var _formPageSameComponentReusedOneShown = _interopRequireDefault(require("../clear-uncompleted-routes/test-data/forms/form-page-same-component-reused-one-shown.json"));
+var _dataPageSameComponentReusedOneShown = _interopRequireDefault(require("../clear-uncompleted-routes/test-data/input/data-page-same-component-reused-one-shown.json"));
+var _dataPageSameComponentReusedOneShownRemoved = _interopRequireDefault(require("../clear-uncompleted-routes/test-data/output/data-page-same-component-reused-one-shown-removed.json"));
 var _formHiddenPageComponentUsedElsewhere = _interopRequireDefault(require("../clear-uncompleted-routes/test-data/forms/form-hidden-page-component-used-elsewhere.json"));
 var _dataHiddenPageComponentUsedElsewhere = _interopRequireDefault(require("../clear-uncompleted-routes/test-data/input/data-hidden-page-component-used-elsewhere.json"));
 var _dataHiddenPageComponentUsedElsewhereRemoved = _interopRequireDefault(require("../clear-uncompleted-routes/test-data/output/data-hidden-page-component-used-elsewhere-removed.json"));
@@ -114,6 +117,8 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 
 // Hidden page containing same component reused
 
+// should show component when reused but only one show_when true
+
 // Hidden page with component used elsewhere
 
 // Hidden component with show_when rule referring to a collection
@@ -227,13 +232,12 @@ describe('FormRenderer', () => {
         const result = _index.default.clearOutUncompletedRoutes(form, submissionData);
         expect(result).toEqual(_dataHiddenPageSameComponentReusedRemoved.default);
       });
-
-      // TEST FOR 3 components with the same name, a page show_when, 1 of which is shown.
-
-      // Check the visited thing is working.
-
-      // Refactor and comment the toArray method.
-
+      it('should show component when reused but only one show_when true.', () => {
+        const submissionData = JSON.parse(JSON.stringify(_dataPageSameComponentReusedOneShown.default));
+        const form = JSON.parse(JSON.stringify(_formPageSameComponentReusedOneShown.default));
+        const result = _index.default.clearOutUncompletedRoutes(form, submissionData);
+        expect(result).toEqual(_dataPageSameComponentReusedOneShownRemoved.default);
+      });
       it('should remove a hidden collection on a page.', () => {
         const submissionData = JSON.parse(JSON.stringify(_dataHiddenPageCollection.default));
         const form = JSON.parse(JSON.stringify(_formHiddenPageCollection.default));