@ukhomeoffice/cop-react-form-renderer 6.0.4-peter → 6.0.6-peter

package/dist/components/CollectionPage/CollectionPage.js

@@ -29,7 +29,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } // Global
 // Styles
 var DEFAULT_CLASS = exports.DEFAULT_CLASS = _FormPage2.DEFAULT_CLASS;
 var CollectionPage = function CollectionPage(_ref) {
-  var _page$collection;
+  var _page$collection, _objectSpread4;
   var page = _ref.page,
     onCollectionChange = _ref.onCollectionChange,
     onAction = _ref.onAction,
@@ -120,7 +120,7 @@ var CollectionPage = function CollectionPage(_ref) {
   }
   return /*#__PURE__*/_react.default.createElement(_FormPage.default, {
     page: _objectSpread(_objectSpread({}, page), {}, {
-      formData: _objectSpread(_objectSpread(_objectSpread({}, page.formData), data[activeIndex]), {}, _defineProperty({}, "".concat(currentCollectionName, "ActiveIndex"), activeIndex)),
+      formData: _objectSpread(_objectSpread(_objectSpread({}, page.formData), data[activeIndex]), {}, (_objectSpread4 = {}, _defineProperty(_objectSpread4, "".concat(currentCollectionName, "ActiveIndex"), activeIndex), _defineProperty(_objectSpread4, "".concat(currentCollectionName, "NumberedIndex"), typeof activeIndex === 'number' ? activeIndex + 1 : null), _objectSpread4)),
       components: page.components.map(function (component) {
         return _objectSpread(_objectSpread({}, component), {}, {
           pageCollection: _objectSpread({}, page.collection)

package/dist/components/CollectionSummary/CollectionSummary.js

@@ -7,10 +7,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.DEFAULT_ADD_BUTTON_LABEL = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
+var _hooks = require("../../hooks");
 var _PageAction = require("../../models/PageAction");
 var _utils = _interopRequireDefault(require("../../utils"));
+var _getCYARow = _interopRequireDefault(require("../../utils/CheckYourAnswers/getCYARow"));
+var _elevateNestedComponents = _interopRequireDefault(require("../../utils/Component/elevateNestedComponents"));
+var _Answer = _interopRequireDefault(require("../CheckYourAnswers/Answer"));
 var _ActionButton = _interopRequireDefault(require("../PageActions/ActionButton"));
-var _hooks = require("../../hooks");
 var _Confirmation = _interopRequireDefault(require("./Confirmation"));
 var _SummaryCard = _interopRequireDefault(require("./SummaryCard"));
 var _SummaryCardValidationContext = _interopRequireDefault(require("./SummaryCardValidationContext"));
@@ -46,7 +49,7 @@ var DEFAULT_ADD_BUTTON_LABEL = exports.DEFAULT_ADD_BUTTON_LABEL = 'Add';
 // errors local to the Quick Edit page.
 
 var CollectionSummary = function CollectionSummary(_ref) {
-  var _config$confirmation, _config$confirmation2;
+  var _config$confirmation, _config$confirmation2, _config$confirmation3;
   var config = _ref.config,
     formData = _ref.formData,
     onAction = _ref.onAction,
@@ -83,6 +86,17 @@ var CollectionSummary = function CollectionSummary(_ref) {
       return currentPath;
     }, "");
   }, [pages]);
+  var allComponents = (0, _react.useMemo)(function () {
+    if (config.card.listView) {
+      var _masterPage$childPage;
+      var components = (_masterPage$childPage = masterPage.childPages) === null || _masterPage$childPage === void 0 ? void 0 : _masterPage$childPage.reduce(function (acc, page) {
+        var elevatedComponents = (0, _elevateNestedComponents.default)(page.components, _objectSpread(_objectSpread({}, formData), entryToDelete));
+        return acc.concat(elevatedComponents);
+      }, []);
+      return components || [];
+    }
+    return [];
+  }, [masterPage, formData, entryToDelete, config.card.listView]);
   var validateEntries = function validateEntries() {
     var stored = [];
     // We only clear errors if it's not empty to avoid
@@ -181,6 +195,23 @@ var CollectionSummary = function CollectionSummary(_ref) {
     setEntryToDelete(null);
     validateEntries();
   };
+  var renderFieldValue = function renderFieldValue(field) {
+    var component = allComponents.find(function (c) {
+      return c.fieldId === field;
+    });
+    if (!component) return null;
+    var row = (0, _getCYARow.default)(_objectSpread(_objectSpread({}, masterPage), {}, {
+      formData: _objectSpread(_objectSpread({}, formData), entryToDelete)
+    }), component);
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: field,
+      className: "confirmation-field-value"
+    }, /*#__PURE__*/_react.default.createElement(_Answer.default, {
+      value: row.value,
+      component: row.component,
+      formData: row.formData
+    }));
+  };
   return /*#__PURE__*/_react.default.createElement("div", {
     id: config.fieldId
   }, entryToDelete && /*#__PURE__*/_react.default.createElement(_Confirmation.default, {
@@ -191,7 +222,9 @@ var CollectionSummary = function CollectionSummary(_ref) {
     onCancel: function onCancel() {
       return setEntryToDelete(null);
     }
-  }, /*#__PURE__*/_react.default.createElement(_SummaryCard.default, {
+  }, config.card.listView ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "confirmation-content"
+  }, (_config$confirmation3 = config.confirmation) === null || _config$confirmation3 === void 0 ? void 0 : _config$confirmation3.displayFields.map(renderFieldValue)) : /*#__PURE__*/_react.default.createElement(_SummaryCard.default, {
     id: "".concat(config.fieldId, ".confirmationChild"),
     entryData: entryToDelete,
     config: config.card ? _objectSpread(_objectSpread({}, config.card), {}, {
@@ -200,7 +233,7 @@ var CollectionSummary = function CollectionSummary(_ref) {
     masterPage: masterPage,
     classModifiers: "nested",
     hideDetails: true
-  })), config.addButton && /*#__PURE__*/_react.default.createElement(_ActionButton.default, {
+  })), !config.card.listView && config.addButton && /*#__PURE__*/_react.default.createElement(_ActionButton.default, {
     id: "".concat(config.fieldId, ".addButton"),
     action: {
       collection: config.collectionName,
@@ -244,6 +277,16 @@ var CollectionSummary = function CollectionSummary(_ref) {
         return e.entryId === entry.id;
       }).length > 0
     }));
+  }), config.card.listView && config.addButton && /*#__PURE__*/_react.default.createElement(_ActionButton.default, {
+    id: "".concat(config.fieldId, ".addButton"),
+    action: {
+      collection: config.collectionName,
+      label: config.addButton.label || DEFAULT_ADD_BUTTON_LABEL,
+      page: config.addButton.page,
+      type: _PageAction.PageActionTypes.COLLECTION_ADD,
+      classModifiers: ['secondary']
+    },
+    onAction: onAction
   }));
 };
 CollectionSummary.propTypes = {
@@ -261,7 +304,8 @@ CollectionSummary.propTypes = {
       details: _propTypes.default.string,
       duplicateAction: _propTypes.default.shape({
         fieldsToIgnore: _propTypes.default.arrayOf(_propTypes.default.string)
-      })
+      }),
+      listView: _propTypes.default.bool
     }),
     errorCard: _propTypes.default.shape({
       banners: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.shape({})])),
@@ -273,7 +317,8 @@ CollectionSummary.propTypes = {
     }),
     confirmation: _propTypes.default.shape({
       message: _propTypes.default.string,
-      label: _propTypes.default.string
+      label: _propTypes.default.string,
+      displayFields: _propTypes.default.arrayOf(_propTypes.default.string)
     }),
     childCollections: _propTypes.default.arrayOf(_propTypes.default.string)
   }).isRequired,

package/dist/components/CollectionSummary/CollectionSummary.test.js

@@ -283,5 +283,35 @@ describe('components.CollectionSummary.CollectionSummary', function () {
       var roleAttribute = confirmation.getAttribute('role');
       expect(roleAttribute).toEqual('alert');
     });
+    it('should correctly render field values in confirmation view', function () {
+      var listViewConfig = _objectSpread(_objectSpread({}, CONFIG), {}, {
+        card: _objectSpread(_objectSpread({}, CONFIG.card), {}, {
+          listView: true
+        }),
+        confirmation: {
+          displayFields: ['testText']
+        }
+      });
+      var _renderWithValidation9 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_CollectionSummary.default, {
+          config: listViewConfig,
+          formData: FORM_DATA,
+          onAction: ON_ACTION,
+          pages: PAGES
+        })),
+        container = _renderWithValidation9.container,
+        getByText = _renderWithValidation9.getByText;
+      var summary = checkSetup(container);
+      expect(summary.children.length).toEqual(2);
+      var card = summary.children[0];
+      var deleteButton = card.querySelector('.govuk-summary-card__actions li:last-child button');
+      _react2.fireEvent.click(deleteButton);
+      var confirmation = container.querySelector(".".concat(_Confirmation.DEFAULT_CLASS));
+      expect(confirmation).toBeTruthy();
+      listViewConfig.confirmation.displayFields.forEach(function (field) {
+        var fieldValue = FORM_DATA.testCollection[0][field];
+        var fieldElement = getByText(fieldValue);
+        expect(fieldElement).not.toBeNull();
+      });
+    });
   });
 });

package/dist/components/CollectionSummary/Confirmation.scss

@@ -11,4 +11,16 @@ $govuk-font-family: 'Roboto', arial, sans-serif;
     @extend .hods-button--warning;
     margin-right: govuk-spacing(2);
   }
+
+  .confirmation-content {
+    margin-bottom: govuk-spacing(6);
+
+    .hods-form-container .govuk-form-group {
+      margin-bottom: 0px;
+
+      label {
+        display: none;
+      }
+    }
+  }
 }

package/dist/components/CollectionSummary/RenderListView.js

@@ -8,8 +8,7 @@ var _copReactComponents = require("@ukhomeoffice/cop-react-components");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
 var _utils = _interopRequireDefault(require("../../utils"));
-var _SummaryListRow = _interopRequireDefault(require("../SummaryList/SummaryListRow"));
-var _Answer = _interopRequireDefault(require("../CheckYourAnswers/Answer"));
+var _getComponentRowForCYA = _interopRequireDefault(require("../../utils/CheckYourAnswers/getComponentRowForCYA"));
 require("./RenderListView.scss");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
@@ -85,31 +84,14 @@ var RenderListView = function RenderListView(_ref) {
     }).flat().filter(Boolean);
     return (_childPage$summaryLay = childPage.summaryLayout) === null || _childPage$summaryLay === void 0 || (_childPage$summaryLay = _childPage$summaryLay.sections) === null || _childPage$summaryLay === void 0 ? void 0 : _childPage$summaryLay.flatMap(function (section) {
       if (section.fields) {
-        var fieldsToRender = section.fields.filter(function (fieldId) {
-          return Object.prototype.hasOwnProperty.call(entryData, fieldId);
-        });
-        return fieldsToRender.map(function (fieldId) {
+        return section.fields.flatMap(function (fieldId) {
           var component = elevatedComponents.find(function (comp) {
             return comp.fieldId === fieldId;
           });
           if (!component) {
             return null;
           }
-          return /*#__PURE__*/_react.default.createElement(_SummaryListRow.default, {
-            key: fieldId,
-            row: {
-              key: component.label,
-              value: _copReactComponents.Utils.interpolateString(entryData[component.fieldId], entryData) || /*#__PURE__*/_react.default.createElement(_Answer.default, {
-                value: entryData[component.fieldId],
-                component: component,
-                formData: component.formData
-              }),
-              required: component.required
-            },
-            classes: function classes(element) {
-              return listClass(element);
-            }
-          });
+          return (0, _getComponentRowForCYA.default)(childPage, component, listClass, entryData);
         });
       }
       return null;

package/dist/components/CollectionSummary/RenderListView.scss

@@ -83,6 +83,13 @@ $govuk-font-family: 'Roboto', arial, sans-serif;
   @include govuk-media-query($until: tablet) {
     margin-bottom: govuk-spacing(3);
   }
+  .hods-form-container .govuk-form-group {
+    margin-bottom: 0px;
+
+    label {
+      display: none;
+    }
+  } 
 }
 
 .govuk-summary-list__value > p {

package/dist/components/CollectionSummary/RenderListView.test.js

@@ -16,8 +16,8 @@ describe('components.CollectionSummary.RenderListView', function () {
     item1: 'Value 1',
     item2: 'Value 2',
     item3: {
-      a: 'Value 3',
-      b: 'Value 4'
+      label: 'Value 3',
+      value: 'Value 3'
     },
     index: 0
   };
@@ -92,6 +92,15 @@ describe('components.CollectionSummary.RenderListView', function () {
   beforeEach(function () {
     onDeleteArgs = [];
   });
+  var getComponentRow = function getComponentRow() {
+    return /*#__PURE__*/_react2.default.createElement("div", {
+      className: "govuk-summary-list__row"
+    }, /*#__PURE__*/_react2.default.createElement("dt", {
+      className: "govuk-summary-list__key"
+    }, "Test Key"), /*#__PURE__*/_react2.default.createElement("dd", {
+      className: "govuk-summary-list__value"
+    }, /*#__PURE__*/_react2.default.createElement("div", null, "Test Value")));
+  };
 
   // Setup function to check rendered elements
   var checkSetup = function checkSetup(container) {
@@ -107,7 +116,8 @@ describe('components.CollectionSummary.RenderListView', function () {
         config: CONFIG,
         onChange: ON_CHANGE,
         onDelete: ON_DELETE,
-        masterPage: MASTER_PAGE
+        masterPage: MASTER_PAGE,
+        getComponentRow: getComponentRow
       })),
       container = _renderWithValidation.container;
     var listViewDiv = checkSetup(container);
@@ -126,19 +136,19 @@ describe('components.CollectionSummary.RenderListView', function () {
     var firstRowKey = rows[0].querySelector('.govuk-summary-list__key');
     var firstRowValue = rows[0].querySelector('.govuk-summary-list__value');
     expect(firstRowKey.textContent).toEqual('Item 1');
-    expect(firstRowValue.textContent).toEqual(ENTRY.item1);
+    expect(firstRowValue.textContent).toEqual('Value 1');
 
     // Check the second row
     var secondRowKey = rows[1].querySelector('.govuk-summary-list__key');
     var secondRowValue = rows[1].querySelector('.govuk-summary-list__value');
     expect(secondRowKey.textContent).toEqual('Item 2 (optional)');
-    expect(secondRowValue.textContent).toEqual(ENTRY.item2);
+    expect(secondRowValue.textContent).toEqual('Value 2');
 
     // Check the third row
     var thirdRowKey = rows[2].querySelector('.govuk-summary-list__key');
     var thirdRowValue = rows[2].querySelector('.govuk-summary-list__value');
     expect(thirdRowKey.textContent).toEqual('Item 3');
-    expect(thirdRowValue.textContent).toEqual('Value 3Value 4');
+    expect(thirdRowValue.textContent).toEqual('Value 3');
   });
   it('should render the index correctly in the title', function () {
     var _renderWithValidation2 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_RenderListView.default, {
@@ -147,7 +157,8 @@ describe('components.CollectionSummary.RenderListView', function () {
         config: CONFIG,
         onChange: ON_CHANGE,
         onDelete: ON_DELETE,
-        masterPage: MASTER_PAGE
+        masterPage: MASTER_PAGE,
+        getComponentRow: getComponentRow
       })),
       container = _renderWithValidation2.container;
     var listViewDiv = checkSetup(container);
@@ -175,7 +186,8 @@ describe('components.CollectionSummary.RenderListView', function () {
           config: CONFIG,
           onChange: ON_CHANGE,
           onDelete: ON_DELETE,
-          masterPage: MASTER_PAGE
+          masterPage: MASTER_PAGE,
+          getComponentRow: getComponentRow
         })),
         container = _renderWithValidation3.container;
       var listViewDiv = container.querySelector('.govuk-summary-card');

package/dist/components/CollectionSummary/SummaryCard.scss

@@ -6,12 +6,6 @@ $govuk-font-family: 'Roboto', arial, sans-serif;
   width: 100% !important;
 }
 
-.govuk-form-group:has(.hods-form-summary-card) {
-  .govuk-form-group:last-of-type {
-    margin-left: govuk-spacing(3);
-  }
-}
-
 .hods-form-summary-card {
   box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
   border: 1px solid #E5E4E2;
@@ -88,6 +82,10 @@ $govuk-font-family: 'Roboto', arial, sans-serif;
     .details.hods-details {
       margin-bottom: 0;
     }
+
+    .hods-form-container .govuk-form-group label{
+      display: none;
+    }
   }
 }
 

package/dist/components/CollectionSummary/SummaryCardDetails.js

@@ -7,7 +7,7 @@ exports.default = exports.DEFAULT_CLASS = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
 var _utils = _interopRequireDefault(require("../../utils"));
-var _FormComponent = _interopRequireDefault(require("../FormComponent"));
+var _getComponentRowForCYA = _interopRequireDefault(require("../../utils/CheckYourAnswers/getComponentRowForCYA"));
 require("./SummaryCardDetails.scss");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -81,18 +81,13 @@ var SummaryCardDetails = function SummaryCardDetails(_ref) {
         var component = allPageComponents.find(function (comp) {
           return comp.fieldId === fieldId;
         });
+        if (!component) {
+          return null;
+        }
         return /*#__PURE__*/_react.default.createElement("div", {
           key: fieldId,
           className: classes('field')
-        }, /*#__PURE__*/_react.default.createElement(_FormComponent.default, {
-          component: _objectSpread(_objectSpread({}, component), {}, {
-            hint: ''
-          }),
-          value: entryData[component === null || component === void 0 ? void 0 : component.fieldId],
-          formData: entryData,
-          wrap: true,
-          readonly: true
-        }));
+        }, (0, _getComponentRowForCYA.default)(childPage, component, classes, entryData));
       })));
     });
   }).filter(function (e) {

package/dist/components/CollectionSummary/SummaryCardDetails.scss

@@ -7,34 +7,44 @@ $govuk-font-family: 'Roboto', arial, sans-serif;
 }
 
 .hods-form-summary-card-details {
-  &__section {
-    border-bottom: 2px solid #E9EBED;
+  &__row {
+    margin-left: govuk-spacing(5);
 
-    &-title {
-      font-weight: bold;
-      margin: govuk-spacing(2) 0 govuk-spacing(6) 0;
+    .hods-button-group{
+      display: none;
     }
+  }
+
+  &__key {
+    font-weight: bold;
+    margin: govuk-spacing(2) 0 govuk-spacing(1) 0;
+  }
+
+  &__value {
+    margin: 0;
+
+    .hods-form-container .govuk-form-group {
+      margin-bottom: 0px;
+
+      label {
+        display: none;
+      }
+    } 
+  }
+  
+  &__section {
+    border-bottom: 2px solid #E9EBED;
 
     &-content {
       display: flex;
       flex-wrap: wrap;
       gap: govuk-spacing(2);
 
-      .hods-form-summary-card-details__field {
+      .hods-form-summary-card__field {
         box-sizing: border-box;
         margin-bottom: govuk-spacing(4);
 
-        .govuk-label,
-        .govuk-fieldset__legend {
-          font-weight: bold;
-          margin-bottom: govuk-spacing(1) !important;
-
-          &::after {
-            content: " :";
-          }
-        }
-
-        div.govuk-form-group div:has(img){
+        .hods-form-summary-card__row div:has(img){
           display: flex;
           flex-wrap: wrap;
 

package/dist/components/CollectionSummary/SummaryCardDetails.test.js

@@ -313,7 +313,7 @@ describe('components.CollectionSummary.SummaryCardDetails', function () {
     var childSectionTitles = getByTextContent(container, 'Hidden Title');
     expect(childSectionTitles).toBeUndefined(); // Individual section title for child collections should be hidden.
 
-    var childFields = container.querySelectorAll(".".concat(classes('field')));
-    expect(childFields.length).toEqual(4); // Two for each entry in the child collection.
+    var childFields = container.querySelectorAll(".".concat(classes('section')));
+    expect(childFields.length).toEqual(2); // One for each entry in the child collection.
   });
 });

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

@@ -27,26 +27,36 @@ var recurseCheckForHiddenComponents = function recurseCheckForHiddenComponents(c
           if (!(0, _optionIsSelected.default)(formData[component.id], option) && option.nested) {
             option.nested.forEach(function (nested) {
               path = nested.fieldId;
-              candidateComponentForDeletion.set(path, component);
+              if (path) {
+                candidateComponentForDeletion.set(path, component);
+              }
             });
           }
         });
       }
     } else if (!(0, _showComponent.default)(component, formData)) {
-      candidateComponentForDeletion.set(path, component);
+      if (path) {
+        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) {
+    var _ref, _form$components$find;
+    var componentObj = (_ref = (_form$components$find = form.components.find(function (c) {
       return c.fieldId === component.use;
-    })) !== null && _form$components$find !== void 0 ? _form$components$find : component;
+    })) !== null && _form$components$find !== void 0 ? _form$components$find : form.components.find(function (c) {
+      return c.id === component.use;
+    })) !== null && _ref !== void 0 ? _ref : component;
     if (page && (0, _showComponent.default)(page, formData)) {
       if (componentObj && (0, _showComponent.default)(componentObj, formData)) {
-        componentsUsedInVisiblePagesIds.push(componentObj.fieldId);
+        if (componentObj.fieldId) {
+          componentsUsedInVisiblePagesIds.push(componentObj.fieldId);
+        } else if (componentObj.id) {
+          componentsUsedInVisiblePagesIds.push(componentObj.id);
+        }
       }
     }
   });
@@ -74,15 +84,19 @@ var markComponentsForDeletion = function markComponentsForDeletion(page, form, f
     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) {
+    var _ref2, _form$components$find2;
+    var componentObj = (_ref2 = (_form$components$find2 = form.components.find(function (c) {
       return c.fieldId === component.use;
-    })) !== null && _form$components$find2 !== void 0 ? _form$components$find2 : component;
+    })) !== null && _form$components$find2 !== void 0 ? _form$components$find2 : form.components.find(function (c) {
+      return c.id === component.use;
+    })) !== null && _ref2 !== void 0 ? _ref2 : component;
     if (page && (0, _showComponent.default)(page, formData)) {
       buildListOfComponentsUsedInVisiblePages(page, form, formData, componentsUsedInVisiblePages);
       recurseCheckForHiddenComponents(componentObj, formData, null, candidateComponentForDeletion);
-    } else {
+    } else if (componentObj.fieldId) {
       candidateComponentForDeletion.set(componentObj.fieldId, componentObj);
+    } else if (componentObj.id) {
+      candidateComponentForDeletion.set(componentObj.id, componentObj);
     }
   });
 };
@@ -90,27 +104,50 @@ var deleteHiddenComponent = function deleteHiddenComponent(page, form, collectio
   if (page.disableClearWhenHidden) {
     return;
   }
-  if (page && (0, _showComponent.default)(page, collectionData) || page && (0, _showComponent.default)(page, formData)) {
+  if (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) {
+      var _ref3, _form$components$find3;
+      var componentObj = (_ref3 = (_form$components$find3 = form.components.find(function (c) {
         return c.fieldId === component.use;
-      })) !== null && _form$components$find3 !== void 0 ? _form$components$find3 : component;
+      })) !== null && _form$components$find3 !== void 0 ? _form$components$find3 : form.components.find(function (c) {
+        return c.id === component.use;
+      })) !== null && _ref3 !== void 0 ? _ref3 : 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) {
+      var _ref4, _form$components$find4;
+      var componentObj = (_ref4 = (_form$components$find4 = form.components.find(function (c) {
         return c.fieldId === component.use;
-      })) !== null && _form$components$find4 !== void 0 ? _form$components$find4 : component;
+      })) !== null && _form$components$find4 !== void 0 ? _form$components$find4 : form.components.find(function (c) {
+        return c.id === component.use;
+      })) !== null && _ref4 !== void 0 ? _ref4 : component;
       recurseDeleteComponents(componentObj, collectionData, null, false);
     });
   }
 };
+function clearUncompletedRoutesForCollections(formData, page, form) {
+  var _page$collection;
+  var collectionDatas = formData[page === null || page === void 0 || (_page$collection = page.collection) === null || _page$collection === void 0 ? void 0 : _page$collection.name];
+  if (collectionDatas) {
+    collectionDatas.forEach(function (collectionData) {
+      var _page$childPages;
+      /* eslint-disable consistent-return */
+      (_page$childPages = page.childPages) === null || _page$childPages === void 0 || _page$childPages.forEach(function (childPage) {
+        if (childPage.deleteCollectionWhenHidden) {
+          if (childPage && !(0, _showComponent.default)(childPage, formData)) {
+            delete formData[childPage.collection.name];
+            return false;
+          }
+        }
+        deleteHiddenComponent(childPage, form, collectionData, formData);
+      });
+    });
+  }
+}
 var clearOutUncompletedRoutes = function clearOutUncompletedRoutes(form, formData) {
   if (form.disableClearWhenHidden) {
     return formData;
@@ -119,29 +156,14 @@ var clearOutUncompletedRoutes = function clearOutUncompletedRoutes(form, formDat
   var candidateComponentForDeletion = new Map();
   var componentsUsedInVisiblePagesIds = [];
   condensedPages === null || condensedPages === void 0 || condensedPages.forEach(function (page) {
-    var _page$collection;
-    if (page !== null && page !== void 0 && (_page$collection = page.collection) !== null && _page$collection !== void 0 && _page$collection.name) {
-      var _page$collection2;
-      var collectionDatas = formData[page === null || page === void 0 || (_page$collection2 = page.collection) === null || _page$collection2 === void 0 ? void 0 : _page$collection2.name];
-      if (collectionDatas) {
-        collectionDatas.forEach(function (collectionData) {
-          var _page$childPages;
-          /* eslint-disable consistent-return */
-          (_page$childPages = page.childPages) === null || _page$childPages === void 0 || _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);
-          });
-        });
-      }
+    var _page$collection2;
+    if (page !== null && page !== void 0 && (_page$collection2 = page.collection) !== null && _page$collection2 !== void 0 && _page$collection2.name) {
+      clearUncompletedRoutesForCollections(formData, page, form);
     } else {
       markComponentsForDeletion(page, form, formData, candidateComponentForDeletion, componentsUsedInVisiblePagesIds);
     }
   });
+  componentsUsedInVisiblePagesIds = [].concat(new Set(componentsUsedInVisiblePagesIds));
   componentsUsedInVisiblePagesIds.forEach(function (componentId) {
     return candidateComponentForDeletion.delete(componentId);
   });

package/dist/utils/CheckYourAnswers/getComponentRowForCYA.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Answer = _interopRequireDefault(require("../../components/CheckYourAnswers/Answer"));
+var _SummaryListRow = _interopRequireDefault(require("../../components/SummaryList/SummaryListRow"));
+var _getCYARow = _interopRequireDefault(require("./getCYARow"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } // Local imports
+var getComponentRowForCYA = function getComponentRowForCYA(page, component, customClasses, entryData) {
+  var modifiedPage = _objectSpread(_objectSpread({}, page), {}, {
+    formData: _objectSpread(_objectSpread({}, page.formData), entryData)
+  });
+  var row = (0, _getCYARow.default)(modifiedPage, component);
+  return /*#__PURE__*/_react.default.createElement(_SummaryListRow.default, {
+    key: "".concat(row.fieldId),
+    row: {
+      key: row.key,
+      value: /*#__PURE__*/_react.default.createElement(_Answer.default, {
+        value: row.value,
+        component: row.component,
+        formData: modifiedPage.formData
+      }),
+      required: row.required
+    },
+    classes: customClasses
+  });
+};
+var _default = exports.default = getComponentRowForCYA;

package/dist/utils/CheckYourAnswers/getComponentRowForCYA.test.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _getCYARowsForPage = _interopRequireDefault(require("./getCYARowsForPage"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+describe('utils.CheckYourAnswers.getCYARowsForPage', function () {
+  var COMPONENT_A = {
+    type: 'text',
+    id: 'a',
+    fieldId: 'a',
+    label: 'Alpha'
+  };
+  var COMPONENT_B = {
+    type: 'text',
+    id: 'b',
+    fieldId: 'b',
+    label: 'Bravo'
+  };
+  var PAGE = {
+    id: 'page',
+    components: [COMPONENT_A, COMPONENT_B],
+    formData: {
+      a: 'Alpha Value',
+      b: 'Bravo Value'
+    }
+  };
+  var ON_ACTION = function ON_ACTION() {};
+  it('should get rows for a page with readonly text components', function () {
+    var rows = (0, _getCYARowsForPage.default)(PAGE, ON_ACTION);
+    expect(rows.length).toEqual(2);
+    expect(rows[0]).toEqual(expect.objectContaining({
+      fieldId: COMPONENT_A.fieldId,
+      key: COMPONENT_A.label,
+      value: 'Alpha Value'
+    }));
+    expect(rows[1]).toEqual(expect.objectContaining({
+      fieldId: COMPONENT_B.fieldId,
+      key: COMPONENT_B.label,
+      value: 'Bravo Value'
+    }));
+  });
+});

package/dist/utils/CollectionPage/addCollectionPageEntry.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+/* eslint-disable no-param-reassign */
 /**
  * This function effectively adds a new entry to a page collection by 
  * invalidating the current active ID for that collection.
@@ -15,7 +16,8 @@ exports.default = void 0;
  * @param {object} formData The top level formData object.
  */
 var addCollectionPageEntry = function addCollectionPageEntry(collectionName, formData) {
-  // eslint-disable-next-line no-param-reassign
-  formData["".concat(collectionName.split('.').pop(), "ActiveId")] = '0';
+  var fieldName = collectionName.split('.').pop();
+  formData["".concat(fieldName, "ActiveId")] = '0';
+  formData["".concat(fieldName, "NumberedIndex")] = Number(formData["".concat(fieldName, "ActiveId")]) + 1;
 };
 var _default = exports.default = addCollectionPageEntry;

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

@@ -13,4 +13,24 @@ describe('Utils.CollectionPage.addCollectionPageEntry', function () {
     (0, _addCollectionPageEntry.default)('parent.child.grandchild', FORM_DATA);
     expect(FORM_DATA.grandchildActiveId).toBeTruthy();
   });
+  it('should correctly set the active ID for a top-level collection', function () {
+    var FORM_DATA = {};
+    (0, _addCollectionPageEntry.default)('testCollection', FORM_DATA);
+    expect(FORM_DATA.testCollectionActiveId).toBe('0');
+  });
+  it('should correctly set the active ID for a nested collection', function () {
+    var FORM_DATA = {};
+    (0, _addCollectionPageEntry.default)('parent.child.grandchild', FORM_DATA);
+    expect(FORM_DATA.grandchildActiveId).toBe('0');
+  });
+  it('should correctly increment the numbered index for a top-level collection', function () {
+    var FORM_DATA = {};
+    (0, _addCollectionPageEntry.default)('testCollection', FORM_DATA);
+    expect(FORM_DATA.testCollectionNumberedIndex).toBe(1);
+  });
+  it('should correctly increment the numbered index for a nested collection', function () {
+    var FORM_DATA = {};
+    (0, _addCollectionPageEntry.default)('parent.child.grandchild', FORM_DATA);
+    expect(FORM_DATA.grandchildNumberedIndex).toBe(1);
+  });
 });

package/dist/utils/Condition/meetsAllConditions.js

@@ -4,10 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _copReactComponents = require("@ukhomeoffice/cop-react-components");
 var _Data = _interopRequireDefault(require("../Data"));
 var _meetsCondition = _interopRequireDefault(require("./meetsCondition"));
 var _setupConditions = _interopRequireDefault(require("./setupConditions"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+// Global imports
+
 // Local imports
 
 var testConditions = function testConditions(conditions, data) {
@@ -17,7 +20,8 @@ var testConditions = function testConditions(conditions, data) {
     if (Array.isArray(condition.conditions)) {
       return testConditions(condition.conditions, data, condition.type);
     }
-    var sourceDataValue = _Data.default.getSource(data, condition.field);
+    var field = condition.field.startsWith('interpolate::') ? _copReactComponents.Utils.interpolateString(condition.field, data).replace('interpolate::', '') : condition.field;
+    var sourceDataValue = _Data.default.getSource(data, field);
     return (0, _meetsCondition.default)(condition, sourceDataValue, data);
   };
   return type === 'and' ? arr.every(testCallback) : arr.some(testCallback);

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

@@ -92,4 +92,17 @@ describe('utils.Condition.meetsAllConditions', function () {
     expect((0, _meetsAllConditions.default)(CONDITIONS, VALID_DATA)).toBeTruthy();
     expect((0, _meetsAllConditions.default)(CONDITIONS, INVALID_DATA)).toBeFalsy();
   });
+  it('should evaluate conditions correctly using interpolated fields', function () {
+    var NEW_DATA = {
+      role: 'admin',
+      'admin_status': 'active'
+    };
+    var CONDITION = {
+      // eslint-disable-next-line no-template-curly-in-string
+      field: 'interpolate::${role}_status',
+      op: 'eq',
+      value: 'active'
+    };
+    expect((0, _meetsAllConditions.default)([CONDITION], NEW_DATA)).toBeTruthy();
+  });
 });

package/package.json

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