@ukhomeoffice/cop-react-form-renderer 6.15.12 → 6.16.0-alpha

package/dist/components/CheckYourAnswers/CheckYourAnswers.js

@@ -127,12 +127,16 @@ const CheckYourAnswers = _ref => {
       }
     })));
   };
+  const getDedupedErrors = () => {
+    const dedupedErrors = Array.from(new Set(errors.map(a => a.id))).map(id => errors.find(b => b.id === id));
+    return dedupedErrors;
+  };
   return /*#__PURE__*/_react.default.createElement("div", {
     className: DEFAULT_CLASS
   }, title && !hide_title && /*#__PURE__*/_react.default.createElement(_copReactComponents.LargeHeading, {
     key: "heading"
   }, title), errors && errors.length > 0 && /*#__PURE__*/_react.default.createElement(_copReactComponents.ErrorSummary, {
-    errors: errors
+    errors: getDedupedErrors()
   }), type === _models.FormTypes.TASK_CYA && pages.length > 0 && sections && sections.map(section => section.tasks.filter(task => task.state !== _models.TaskStates.TYPES.SKIPPED).map((task, taskIndex) => {
     const filterPages = pages.filter(page => task.pages.some(p => p === page.name));
     return /*#__PURE__*/_react.default.createElement(_react.Fragment, {

package/dist/components/FormRenderer/FormRenderer.js

@@ -129,6 +129,17 @@ const InternalFormRenderer = _ref2 => {
     validate
   } = (0, _hooks.useValidation)();
 
+  // Set focus to header for accessibility, Screen reader to anounce the page heading
+  const setFocusToHeading = () => {
+    if (document) {
+      const header = Array.from(document.getElementsByTagName('h1')).pop();
+      if (header && document.activeElement !== header) {
+        header.setAttribute('tabIndex', '-1');
+        header.focus();
+      }
+    }
+  };
+
   // Need to set submission data when going back
   window.onpopstate = e => {
     var _formState$page;
@@ -192,6 +203,11 @@ const InternalFormRenderer = _ref2 => {
     setHub(_utils.default.Hub.get(type, _hub, components, _objectSpread({}, data)));
   }, [type, _hub, data, components, setHub]);
 
+  // Set focus to heading for accessibility
+  (0, _react.useEffect)(() => {
+    setFocusToHeading();
+  }, [formState]);
+
   // Form state.
   (0, _react.useEffect)(() => {
     var _formState$page2;

package/dist/components/FormRenderer/onPageAction.js

@@ -72,6 +72,13 @@ const onPageAction = (action, patch, patchLabel, hooks, data, formState, validat
           break;
         case _models.PageAction.TYPES.COLLECTION_ADD:
           _utils.default.CollectionPage.addEntry(action.collection, form.page.formData);
+
+          // We need to delete the collection entry fields from formData as it will be holding previous values.
+          if (form.page.formData["".concat(action.collection)] && form.page.formData["".concat(action.collection)].length > 0) {
+            const lastIndex = form.page.formData["".concat(action.collection)].length - 1;
+            const fieldsToDelete = Object.keys(form.page.formData["".concat(action.collection)][lastIndex]).filter(k => k in form.page.formData && k !== 'id');
+            fieldsToDelete.forEach(i => delete form.page.formData[i]);
+          }
           pageUpdate = () => _handlers.default.navigate(action, pageId, onPageChange);
           break;
         case _models.PageAction.TYPES.COLLECTION_DUPLICATE:
@@ -86,6 +93,35 @@ const onPageAction = (action, patch, patchLabel, hooks, data, formState, validat
           if (action.recordRemoval) {
             form.page.formData["".concat(action.collection.split('.').pop(), "LastRemoved")] = _objectSpread({}, removedEntry);
           }
+
+          // The formData needs to be tidied up after removing the collection entry:
+
+          // 1. Retrieve the formData ID as it will be overwritten by a field with the same name in the collection entry.
+          const formDataId = form.page.formData.id;
+
+          // 2. Build the list of field names to delete and delete them from formData.
+          if (removedEntry !== null) {
+            const removedEntryFieldsToDelete = Object.keys(removedEntry).filter(k => k in form.page.formData);
+            removedEntryFieldsToDelete.forEach(i => delete form.page.formData[i]);
+          }
+
+          // 3. Retrieve the collection array from formData.
+          const collectionArray = form.page.formData[action.collection];
+
+          // 4. Assign the fields in the last collection entry to formData.
+          Object.assign(form.page.formData, collectionArray[collectionArray.length - 1]);
+
+          // 5. Assign the formData ID back to the formData.
+          form.page.formData.id = formDataId;
+
+          // 6. If the collection array has entries set the correct ActiveId 
+          // otherwise delete it as well as the collection array.
+          if (collectionArray.length > 0) {
+            form.page.formData["".concat(action.collection, "ActiveId")] = collectionArray[collectionArray.length - 1].id;
+          } else {
+            delete form.page.formData["".concat(action.collection, "ActiveId")];
+            delete form.page.formData[action.collection];
+          }
           break;
         default:
           break;

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

@@ -380,6 +380,35 @@ describe('components.FormRenderer.onPageAction', () => {
     // that's called as part of the onSubmit hook's onSuccess callback.
     expect(_handlers.default.navigateCalls).toEqual(1);
   });
+  it("should clean previous collection entry fields at top level of formData", () => {
+    const FORM_STATE = {
+      page: {
+        formData: {
+          'testCollection': [{
+            'flightNumber': '1'
+          }],
+          'flightNumber': '1'
+        }
+      }
+    };
+    const ACTION = {
+      type: _models.PageAction.TYPES.COLLECTION_ADD,
+      collection: 'testCollection'
+    };
+    const CUSTOM_ARGS = _objectSpread(_objectSpread({}, ARGS), {}, {
+      action: ACTION,
+      formState: FORM_STATE
+    });
+    _onPageAction.default.apply(void 0, Object.values(CUSTOM_ARGS));
+    preActionChecks();
+    expect(FORM_STATE.page.formData["".concat(ACTION.collection, "ActiveId")]).toBeDefined();
+    expect(FORM_STATE.page.formData.flightNumber).toBeUndefined();
+    postActionChecks(CUSTOM_ARGS);
+
+    // This action type also sets up a call to handlers.navigate
+    // that's called as part of the onSubmit hook's onSuccess callback.
+    expect(_handlers.default.navigateCalls).toEqual(1);
+  });
   describe("should handle the ".concat(_models.PageAction.TYPES.COLLECTION_DUPLICATE, " Page Action type"), () => {
     it("calling handlers.navigate if the duplication was successful", () => {
       const FORM_STATE = {
@@ -533,6 +562,90 @@ describe('components.FormRenderer.onPageAction', () => {
       expect(FORM_STATE.page.formData.testCollectionLastRemoved).toBeUndefined();
       postActionChecks(CUSTOM_ARGS);
 
+      // This action type uses the default onPageChange.
+      expect(onPageChangeCalls).toEqual(1);
+    });
+    it("should clean collection fields at top level of formData when entries remain", () => {
+      // After removing the active entry, the collection data is assigned to the
+      // top level of formData and the activeId is reset.
+      const FORM_STATE = {
+        page: {
+          formData: {
+            testCollectionActiveId: 'removeMe',
+            testCollection: [{
+              id: 'leaveMeAlone',
+              flightNumber: '1'
+            }, {
+              id: 'removeMe',
+              flightNumber: '2'
+            }],
+            flightNumber: '2',
+            testCollectionLastRemoved: 'previousOne'
+          }
+        }
+      };
+      const ACTION = {
+        type: _models.PageAction.TYPES.COLLECTION_REMOVE,
+        collection: 'testCollection',
+        recordRemoval: true
+      };
+      const CUSTOM_ARGS = _objectSpread(_objectSpread({}, ARGS), {}, {
+        action: ACTION,
+        formState: FORM_STATE
+      });
+      _onPageAction.default.apply(void 0, Object.values(CUSTOM_ARGS));
+      preActionChecks();
+      expect(FORM_STATE.page.formData.testCollection).toEqual([{
+        id: 'leaveMeAlone',
+        flightNumber: '1'
+      }]);
+      expect(FORM_STATE.page.formData.testCollectionLastRemoved).toEqual({
+        id: 'removeMe',
+        flightNumber: '2'
+      });
+      expect(FORM_STATE.page.formData.flightNumber).toEqual('1');
+      expect(FORM_STATE.page.formData.testCollectionActiveId).toEqual('leaveMeAlone');
+      postActionChecks(CUSTOM_ARGS);
+
+      // This action type uses the default onPageChange.
+      expect(onPageChangeCalls).toEqual(1);
+    });
+    it("should clean collection fields at top level of formData after last entry removed", () => {
+      // After removing the last active entry, the collection array and activeID are deleted, 
+      // and the collection data is removed from top level of formData.
+      const FORM_STATE = {
+        page: {
+          formData: {
+            testCollectionActiveId: 'removeMe',
+            testCollection: [{
+              id: 'removeMe',
+              flightNumber: '1'
+            }],
+            flightNumber: '1',
+            testCollectionLastRemoved: 'previousOne'
+          }
+        }
+      };
+      const ACTION = {
+        type: _models.PageAction.TYPES.COLLECTION_REMOVE,
+        collection: 'testCollection',
+        recordRemoval: true
+      };
+      const CUSTOM_ARGS = _objectSpread(_objectSpread({}, ARGS), {}, {
+        action: ACTION,
+        formState: FORM_STATE
+      });
+      _onPageAction.default.apply(void 0, Object.values(CUSTOM_ARGS));
+      preActionChecks();
+      expect(FORM_STATE.page.formData.testCollection).toBeUndefined();
+      expect(FORM_STATE.page.formData.testCollectionLastRemoved).toEqual({
+        id: 'removeMe',
+        flightNumber: '1'
+      });
+      expect(FORM_STATE.page.formData.flightNumber).toBeUndefined();
+      expect(FORM_STATE.page.formData.testCollectionActiveId).toBeUndefined();
+      postActionChecks(CUSTOM_ARGS);
+
       // This action type uses the default onPageChange.
       expect(onPageChangeCalls).toEqual(1);
     });

package/dist/utils/Validate/validateComponent.js

@@ -18,6 +18,7 @@ var _validateRegex = _interopRequireDefault(require("./validateRegex"));
 var _validateRequired = _interopRequireDefault(require("./validateRequired"));
 var _validateTextArea = _interopRequireDefault(require("./validateTextArea"));
 var _validateTime = _interopRequireDefault(require("./validateTime"));
+var _canOverrideFieldRequired = _interopRequireDefault(require("../canOverrideFieldRequired"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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; }
@@ -47,7 +48,9 @@ const validateComponent = (component, outerData, formData) => {
     value = (0, _getCollectionPageData.default)(component.collectionName, fd);
   }
   if (component.required) {
-    error = (0, _validateRequired.default)(value, component.label, component.custom_errors);
+    if (!component.requiredOverrideConditions || !(0, _canOverrideFieldRequired.default)(component.requiredOverrideConditions, fd)) {
+      error = (0, _validateRequired.default)(value, component.label, component.custom_errors);
+    }
   }
   if (!error) {
     switch (component.type) {

package/dist/utils/canOverrideFieldRequired.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/**
+ * Check to see if the field required status can be overridden.
+ * All conditions need to be met in order for the override to be permitted.
+ * @param {array} requiredOverrideConditions The conditions to evaluate.
+ * @param {object} data The form data to check.
+ * @returns true or false.
+ */
+const canOverrideFieldRequired = (requiredOverrideConditions, data) => {
+  const conditionsNotMet = requiredOverrideConditions.filter(condition => data[condition.name] !== condition.value);
+  return conditionsNotMet.length === 0;
+};
+var _default = exports.default = canOverrideFieldRequired;

package/package.json

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