@ukhomeoffice/cop-react-form-renderer 4.64.0-charlie → 4.65.0

package/dist/components/CheckYourAnswers/Answer.js

@@ -23,7 +23,8 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 var Answer = function Answer(_ref) {
   var value = _ref.value,
-      component = _ref.component;
+      component = _ref.component,
+      formData = _ref.formData;
 
   if (!value) {
     return /*#__PURE__*/_react.default.createElement(_VisuallyHidden.default, null, "No answer");
@@ -38,7 +39,8 @@ var Answer = function Answer(_ref) {
       readonly: true
     }),
     wrap: false,
-    value: value
+    value: value,
+    formData: formData
   });
 };
 

package/dist/components/CheckYourAnswers/Answer.test.js

@@ -116,5 +116,47 @@ describe('components', function () {
         }
       }, _callee4);
     })));
+    it('should handle a component that requires interpolation', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5() {
+      var VALUE, DATA, COMPONENT, _renderWithValidation5, container, answer;
+
+      return regeneratorRuntime.wrap(function _callee5$(_context5) {
+        while (1) {
+          switch (_context5.prev = _context5.next) {
+            case 0:
+              VALUE = 'beta';
+              DATA = {
+                dynamic: 'delta'
+              };
+              COMPONENT = {
+                id: 'alpha',
+                fieldId: 'alpha',
+                type: 'radios',
+                data: {
+                  options: [{
+                    value: 'beta',
+                    label: 'hardcoded ${dynamic}'
+                  }, {
+                    value: 'charlie',
+                    label: 'all hardcoded'
+                  }]
+                }
+              };
+              _renderWithValidation5 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_Answer.default, {
+                value: VALUE,
+                component: COMPONENT,
+                formData: DATA
+              })), container = _renderWithValidation5.container;
+              answer = container.childNodes[0];
+              expect(answer.tagName).toEqual('DIV');
+              expect(answer.classList).toContain(_Readonly.DEFAULT_CLASS);
+              expect(answer.textContent).toEqual('hardcoded delta');
+
+            case 8:
+            case "end":
+              return _context5.stop();
+          }
+        }
+      }, _callee5);
+    })));
   });
 });

package/dist/components/CheckYourAnswers/CheckYourAnswers.js

@@ -97,7 +97,8 @@ var CheckYourAnswers = function CheckYourAnswers(_ref) {
           value: /*#__PURE__*/_react.default.createElement(_Answer.default, {
             key: "".concat(pageIndex, "_").concat(index),
             value: row.value,
-            component: row.component
+            component: row.component,
+            formData: page.formData
           })
         });
       });

package/dist/components/FormRenderer/FormRenderer.js

@@ -33,6 +33,8 @@ var _handlers = _interopRequireDefault(require("./handlers"));
 
 var _helpers = _interopRequireDefault(require("./helpers"));
 
+var _onCYAAction = _interopRequireDefault(require("./onCYAAction"));
+
 require("./FormRenderer.scss");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -105,7 +107,7 @@ var DEFAULT_CLASS = 'hods-form';
 exports.DEFAULT_CLASS = DEFAULT_CLASS;
 
 var InternalFormRenderer = function InternalFormRenderer(_ref2) {
-  var _formState$page5, _formState$page$actio, _formState$cya$hideCh, _formState$cya$hideGr;
+  var _formState$page4, _formState$page$actio, _formState$cya$hideCh, _formState$cya$hideGr;
 
   var title = _ref2.title,
       type = _ref2.type,
@@ -498,8 +500,9 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
 
       if (currentTask.state === _models.TaskStates.TYPES.COMPLETE) {
         if (hubDetails !== null && hubDetails !== void 0 && hubDetails.noTaskCYAs) {
+          // If the task is complete and there are no CYA's then show user first page
           var currentPage = data.formStatus.tasks[currentTask.name].currentPage;
-          onPageChange(currentPage || currentTask.pages[0]);
+          onPageChange(currentTask.pages[0] || currentPage);
         } else if (currentTask.customCYA) {
           onPageChange(currentTask.customCYA);
         } else {
@@ -515,108 +518,6 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
         onPageChange(currentTask.pages[0], state);
       }
     }
-  }; // Handle actions from "Check your answers".
-
-
-  var onCYAAction = function onCYAAction(action) {
-    // Check to see whether the action is able to proceed, which in
-    // in the case of a submission will validate the fields in the page.
-    if (action.type === _models.PageAction.TYPES.SUBMIT) {
-      setPagePoint('submit');
-
-      if (_helpers.default.canCYASubmit(pages, validate.pages)) {
-        // Submit.
-        var submissionData = _utils.default.Format.form({
-          pages: pages,
-          components: components
-        }, _objectSpread({}, data), _models.EventTypes.SUBMIT);
-
-        submissionData.formStatus = _helpers.default.getSubmissionStatus(type, pages, pageId, action, submissionData, currentTask, true);
-        setData(submissionData); // Now submit the data to the backend...
-
-        hooks.onSubmit(action.type, submissionData, function () {
-          return hooks.onFormComplete();
-        }, function (errors) {
-          return _handlers.default.submissionError(errors, addErrors);
-        });
-      }
-    }
-
-    if (action.type === _models.PageAction.TYPES.SAVE_AND_CONTINUE && hub === _models.HubFormats.TASK) {
-      var shouldValidate = !(action.hasOwnProperty('validate') && !action.validate);
-      var canSubmit = shouldValidate ? _helpers.default.canCYASubmit(currentTask.fullPages, validate.pages) : true;
-
-      if (canSubmit) {
-        var _submissionData = _utils.default.Format.form({
-          pages: pages,
-          components: components
-        }, _objectSpread({}, data), _models.EventTypes.SUBMIT);
-
-        _submissionData.formStatus = _helpers.default.getSubmissionStatus(type, pages, pageId, action, _submissionData, currentTask, true);
-        setData(_submissionData);
-        hooks.onSubmit(action.type, _submissionData, function () {
-          return onPageChange(_models.FormPages.HUB);
-        }, function (errors) {
-          return _handlers.default.submissionError(errors, addErrors);
-        });
-      }
-    }
-
-    if (action.type === _models.PageAction.TYPES.SUBMIT && hub === _models.HubFormats.TASK) {
-      setPagePoint('submit');
-
-      if (_helpers.default.canCYASubmit(currentTask.fullPages, validate.pages)) {
-        // Submit.
-        var _submissionData2 = _utils.default.Format.form({
-          pages: pages,
-          components: components
-        }, _objectSpread({}, data), _models.EventTypes.SUBMIT);
-
-        _submissionData2.formStatus = _helpers.default.getSubmissionStatus(type, pages, pageId, action, _submissionData2, currentTask, true);
-        setData(_submissionData2); // Now submit the data to the backend...
-
-        hooks.onSubmit(action.type, _submissionData2, function () {
-          return hooks.onFormComplete();
-        }, function (errors) {
-          return _handlers.default.submissionError(errors, addErrors);
-        });
-      }
-    }
-
-    if (action.type === _models.PageAction.TYPES.SAVE_AND_RETURN) {
-      var _shouldValidate = !(action.hasOwnProperty('validate') && !action.validate);
-
-      var _canSubmit = _shouldValidate ? _helpers.default.canCYASubmit(currentTask.fullPages, validate.pages) : true;
-
-      if (_canSubmit) {
-        var _submissionData3 = _utils.default.Format.form({
-          pages: pages,
-          components: components
-        }, _objectSpread({}, data), _models.EventTypes.SUBMIT);
-
-        _submissionData3.formStatus = _helpers.default.getSubmissionStatus(type, pages, pageId, action, _submissionData3, currentTask);
-        setData(_submissionData3);
-        hooks.onSubmit(action.type, _submissionData3, function () {
-          if (type === _models.FormTypes.TASK) {
-            onPageChange(undefined);
-          } else {
-            onPageChange(_models.FormPages.HUB);
-          }
-        }, function (errors) {
-          return _handlers.default.submissionError(errors, addErrors);
-        });
-      }
-    }
-
-    if (action.type === _models.PageAction.TYPES.NAVIGATE) {
-      var _formState$page4;
-
-      onPageChange(_helpers.default.getNextPageId(type, pages, pageId, action, (_formState$page4 = formState.page) === null || _formState$page4 === void 0 ? void 0 : _formState$page4.formData));
-    }
-
-    if (action.type === _models.PageAction.TYPES.CANCEL) {
-      hooks.onCancel();
-    }
   };
 
   var classes = _utils.default.classBuilder(classBlock, classModifiers, className);
@@ -629,12 +530,14 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
     className: classes()
   }, title && !hide_title && pageId === _models.FormPages.HUB && /*#__PURE__*/_react.default.createElement(_copReactComponents.LargeHeading, null, title), formState.cya && /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, _extends({
     pages: _helpers.default.getRelevantPages(formState, pages, currentTask.fullPages)
-  }, cya, ((_formState$page5 = formState.page) === null || _formState$page5 === void 0 ? void 0 : _formState$page5.type) === _models.FormPages.PARTIAL_CYA && {
+  }, cya, ((_formState$page4 = formState.page) === null || _formState$page4 === void 0 ? void 0 : _formState$page4.type) === _models.FormPages.PARTIAL_CYA && {
     actions: (_formState$page$actio = formState.page.actions) === null || _formState$page$actio === void 0 ? void 0 : _formState$page$actio.filter(function (action) {
       return _utils.default.Component.show(action, data);
     })
   }, formState.cya, {
-    onAction: onCYAAction,
+    onAction: function onAction(action) {
+      (0, _onCYAAction.default)(setPagePoint, action, pages, validate, components, data, setData, type, pageId, currentTask, hooks, addErrors, hub, onPageChange, formState);
+    },
     onRowAction: onCYARowAction,
     summaryListClassModifiers: summaryListClassModifiers,
     hide_title: hide_title,

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

@@ -990,7 +990,7 @@ describe('components', function () {
         }
       }, _callee28);
     })));
-    it('should go to the last page of a complete task if noTaskCYAs specified', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee30() {
+    it('should go to the first page of a complete task if noTaskCYAs specified', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee30() {
       var ON_SUBMIT, HOOKS, TASK_LIST_WITH_NO_TASK_CYAS, taskList, newPage;
       return regeneratorRuntime.wrap(function _callee30$(_context30) {
         while (1) {
@@ -1066,10 +1066,10 @@ describe('components', function () {
               _react.fireEvent.click(newPage.childNodes[2].childNodes[0], {}); // Launch same task again
 
 
-              _react.fireEvent.click(container.childNodes[0].childNodes[1].childNodes[3].childNodes[1].childNodes[0].childNodes[0], {}); // Should be on the second page
+              _react.fireEvent.click(container.childNodes[0].childNodes[1].childNodes[3].childNodes[1].childNodes[0].childNodes[0], {}); // Should be on the first page
 
 
-              expect(container.childNodes[0].childNodes[0].childNodes[0].textContent).toEqual('Event Mode');
+              expect(container.childNodes[0].childNodes[0].childNodes[0].textContent).toEqual('Event Date');
 
             case 19:
             case "end":

package/dist/components/FormRenderer/onCYAAction.js

@@ -0,0 +1,130 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _models = require("../../models");
+
+var _utils = _interopRequireDefault(require("../../utils"));
+
+var _handlers = _interopRequireDefault(require("./handlers"));
+
+var _helpers = _interopRequireDefault(require("./helpers"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+/**
+ * 
+ * @param {*} action 
+ */
+var onCYAAction = function onCYAAction(setPagePoint, action, pages, validate, components, data, setData, type, pageId, currentTask, hooks, addErrors, hub, onPageChange, formState) {
+  // Check to see whether the action is able to proceed, which in
+  // in the case of a submission will validate the fields in the page.
+  if (action.type === _models.PageAction.TYPES.SUBMIT && hub !== _models.HubFormats.TASK) {
+    setPagePoint('submit');
+
+    if (_helpers.default.canCYASubmit(pages, validate.pages)) {
+      // Submit.
+      var submissionData = _utils.default.Format.form({
+        pages: pages,
+        components: components
+      }, _objectSpread({}, data), _models.EventTypes.SUBMIT);
+
+      submissionData.formStatus = _helpers.default.getSubmissionStatus(type, pages, pageId, action, submissionData, currentTask, true);
+      setData(submissionData); // Now submit the data to the backend...
+
+      hooks.onSubmit(action.type, submissionData, function () {
+        return hooks.onFormComplete();
+      }, function (errors) {
+        return _handlers.default.submissionError(errors, addErrors);
+      });
+    }
+  }
+
+  if (action.type === _models.PageAction.TYPES.SAVE_AND_CONTINUE && hub === _models.HubFormats.TASK) {
+    var shouldValidate = !(action.hasOwnProperty('validate') && !action.validate);
+    var canSubmit = shouldValidate ? _helpers.default.canCYASubmit(currentTask.fullPages, validate.pages) : true;
+
+    if (canSubmit) {
+      var _submissionData = _utils.default.Format.form({
+        pages: pages,
+        components: components
+      }, _objectSpread({}, data), _models.EventTypes.SUBMIT);
+
+      _submissionData.formStatus = _helpers.default.getSubmissionStatus(type, pages, pageId, action, _submissionData, currentTask, true);
+      setData(_submissionData);
+      hooks.onSubmit(action.type, _submissionData, function () {
+        return onPageChange(_models.FormPages.HUB);
+      }, function (errors) {
+        return _handlers.default.submissionError(errors, addErrors);
+      });
+    }
+  }
+
+  if (action.type === _models.PageAction.TYPES.SUBMIT && hub === _models.HubFormats.TASK) {
+    setPagePoint('submit');
+
+    if (_helpers.default.canCYASubmit(currentTask.fullPages, validate.pages)) {
+      // Submit.
+      var _submissionData2 = _utils.default.Format.form({
+        pages: pages,
+        components: components
+      }, _objectSpread({}, data), _models.EventTypes.SUBMIT);
+
+      _submissionData2.formStatus = _helpers.default.getSubmissionStatus(type, pages, pageId, action, _submissionData2, currentTask, true);
+      setData(_submissionData2); // Now submit the data to the backend...
+
+      hooks.onSubmit(action.type, _submissionData2, function () {
+        return hooks.onFormComplete();
+      }, function (errors) {
+        return _handlers.default.submissionError(errors, addErrors);
+      });
+    }
+  }
+
+  if (action.type === _models.PageAction.TYPES.SAVE_AND_RETURN) {
+    var _shouldValidate = !(action.hasOwnProperty('validate') && !action.validate);
+
+    var _canSubmit = _shouldValidate ? _helpers.default.canCYASubmit(currentTask.fullPages, validate.pages) : true;
+
+    if (_canSubmit) {
+      var _submissionData3 = _utils.default.Format.form({
+        pages: pages,
+        components: components
+      }, _objectSpread({}, data), _models.EventTypes.SUBMIT);
+
+      _submissionData3.formStatus = _helpers.default.getSubmissionStatus(type, pages, pageId, action, _submissionData3, currentTask, false);
+      setData(_submissionData3);
+      hooks.onSubmit(action.type, _submissionData3, function () {
+        if (type === _models.FormTypes.TASK) {
+          onPageChange(undefined);
+        } else {
+          onPageChange(_models.FormPages.HUB);
+        }
+      }, function (errors) {
+        return _handlers.default.submissionError(errors, addErrors);
+      });
+    }
+  }
+
+  if (action.type === _models.PageAction.TYPES.NAVIGATE) {
+    var _formState$page;
+
+    onPageChange(_helpers.default.getNextPageId(type, pages, pageId, action, (_formState$page = formState.page) === null || _formState$page === void 0 ? void 0 : _formState$page.formData));
+  }
+
+  if (action.type === _models.PageAction.TYPES.CANCEL) {
+    hooks.onCancel();
+  }
+};
+
+var _default = onCYAAction;
+exports.default = _default;

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

@@ -0,0 +1,608 @@
+"use strict";
+
+var _models = require("../../models");
+
+var _utils = _interopRequireDefault(require("../../utils"));
+
+var _handlers = _interopRequireDefault(require("./handlers"));
+
+var _helpers = _interopRequireDefault(require("./helpers"));
+
+var _onCYAAction = _interopRequireDefault(require("./onCYAAction"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+jest.mock('./handlers', function () {
+  return {
+    submissionErrorCalls: 0,
+    submissionErrorArgs: [],
+    submissionError: function submissionError(errors, addErrors) {
+      this.submissionErrorCalls++;
+      this.submissionErrorArgs.push(errors);
+
+      if (typeof addErrors === 'function') {
+        addErrors(errors);
+      }
+    },
+    reset: function reset() {
+      this.submissionErrorCalls = 0;
+      this.submissionErrorArgs = [];
+    }
+  };
+});
+jest.mock('./helpers', function () {
+  return {
+    canCYASubmitResult: true,
+    canCYASubmitCalls: 0,
+    canCYASubmit: function canCYASubmit() {
+      this.canCYASubmitCalls++;
+      return this.canCYASubmitResult;
+    },
+    getNextPageIdCalls: 0,
+    getNextPageId: function getNextPageId() {
+      this.getNextPageIdCalls++;
+      return 'page2';
+    },
+    getFormStateCalls: 0,
+    getFormState: function getFormState() {
+      this.getFormStateCalls++;
+      return {};
+    },
+    getSubmissionStatusCalls: 0,
+    getSubmissionStatus: function getSubmissionStatus() {
+      this.getSubmissionStatusCalls++;
+      return 'Good to go!';
+    },
+    reset: function reset() {
+      this.canCYASubmitCalls = 0;
+      this.canCYASubmitResult = true;
+      this.getFormStateCalls = 0;
+      this.getNextPageIdCalls = 0;
+      this.getFormStateCalls = 0;
+      this.getSubmissionStatusCalls = 0;
+    }
+  };
+});
+jest.mock('../../utils', function () {
+  return {
+    Format: {
+      formCalls: 0,
+      form: function form() {
+        this.formCalls++;
+        return {
+          id: 'formId'
+        };
+      }
+    },
+    reset: function reset() {
+      this.Format.formCalls = 0;
+    }
+  };
+});
+describe('components.FormRenderer.onCYAAction', function () {
+  var MOCK_HOOKS = {
+    onSubmitCalls: 0,
+    onSubmitArgs: [],
+    onSubmit: function onSubmit(type, payload, onSuccess, onError) {
+      this.onSubmitCalls++;
+      this.onSubmitArgs.push({
+        type: type,
+        payload: payload
+      });
+
+      if (typeof onSuccess === 'function') {
+        onSuccess();
+      } // onError would not normally be called alongside
+      // onSuccess, we're just doing it here to make sure
+      // the expected function chain is called.
+
+
+      if (typeof onError === 'function') {
+        onError(['an example error']);
+      }
+    },
+    onFormCompleteCalls: 0,
+    onFormComplete: function onFormComplete() {
+      this.onFormCompleteCalls++;
+    },
+    onCancelCalls: 0,
+    onCancel: function onCancel() {
+      this.onCancelCalls++;
+    },
+    reset: function reset() {
+      this.onSubmitCalls = 0;
+      this.onSubmitArgs = [];
+      this.onFormCompleteCalls = 0;
+      this.onCancelCalls = 0;
+    }
+  };
+  var setPagePointCalls = 0;
+  var setPagePointArgs = [];
+
+  var mockSetPagePoint = function mockSetPagePoint(point) {
+    setPagePointCalls++;
+    setPagePointArgs.push(point);
+  };
+
+  var setDataCalls = 0;
+  var setDataArgs = [];
+
+  var mockSetData = function mockSetData(data) {
+    setDataCalls++;
+    setDataArgs.push(data);
+  };
+
+  var onPageChangeCalls = 0;
+  var onPageChangeArgs = [];
+
+  var mockOnPageChange = function mockOnPageChange(pageId) {
+    onPageChangeCalls++;
+    onPageChangeArgs.push(pageId);
+  };
+
+  var addErrorsCalls = 0;
+  var addErrorsArgs = [];
+
+  var mockAddErrors = function mockAddErrors(errors) {
+    addErrorsCalls++;
+    addErrorsArgs.push(errors);
+  };
+
+  var COMPONENTS = [{
+    id: 'alpha',
+    fieldId: 'alpha'
+  }, {
+    id: 'bravo',
+    fieldId: 'bravo'
+  }, {
+    id: 'charlie',
+    fieldId: 'charlie'
+  }, {
+    id: 'delta',
+    fieldId: 'delta'
+  }];
+  var PAGES = [{
+    id: 'page1',
+    components: [_objectSpread({}, COMPONENTS[0]), _objectSpread({}, COMPONENTS[1])]
+  }, {
+    id: 'page2',
+    components: [_objectSpread({}, COMPONENTS[2]), _objectSpread({}, COMPONENTS[3])]
+  }];
+  var CURRENT_TASK = {
+    name: 'testTask',
+    fullPages: PAGES
+  };
+  var ARGS = {
+    setPagePoint: mockSetPagePoint,
+    action: {
+      type: _models.PageAction.TYPES.SUBMIT
+    },
+    pages: PAGES,
+    validate: function validate() {},
+    components: COMPONENTS,
+    data: {},
+    setData: mockSetData,
+    type: _models.FormTypes.FORM_WITH_TASK,
+    pageId: 'alpha',
+    currentTask: CURRENT_TASK,
+    hooks: MOCK_HOOKS,
+    addErrors: mockAddErrors,
+    hub: _models.HubFormats.TASK,
+    onPageChange: mockOnPageChange,
+    formState: _helpers.default.getFormState('alpha', PAGES, null)
+  };
+  beforeEach(function () {
+    _handlers.default.reset();
+
+    _helpers.default.reset();
+
+    _utils.default.reset();
+
+    MOCK_HOOKS.reset();
+    setPagePointCalls = 0;
+    setPagePointArgs = [];
+    setDataCalls = 0;
+    setDataArgs = [];
+    onPageChangeCalls = 0;
+    onPageChangeArgs = [];
+    addErrorsCalls = 0;
+    addErrorsArgs = [];
+  });
+  describe('with a page action of PageAction.TYPES.SUBMIT', function () {
+    it('should handle a hub format of HubFormats.CYA', function () {
+      var CUSTOM_ARGS = _objectSpread(_objectSpread({}, ARGS), {}, {
+        hub: _models.HubFormats.CYA
+      });
+
+      _onCYAAction.default.apply(void 0, Object.values(CUSTOM_ARGS));
+
+      expect(setPagePointCalls).toEqual(1);
+      expect(setPagePointArgs[0]).toEqual('submit');
+      expect(_helpers.default.canCYASubmitCalls).toEqual(1);
+      expect(_utils.default.Format.formCalls).toEqual(1);
+      expect(_helpers.default.getSubmissionStatusCalls).toEqual(1);
+      expect(setDataCalls).toEqual(1);
+      expect(setDataArgs[0]).toEqual({
+        id: 'formId',
+        formStatus: 'Good to go!'
+      });
+      expect(MOCK_HOOKS.onSubmitCalls).toEqual(1);
+      expect(MOCK_HOOKS.onSubmitArgs[0]).toEqual({
+        type: _models.PageAction.TYPES.SUBMIT,
+        payload: {
+          id: 'formId',
+          formStatus: 'Good to go!'
+        }
+      }); // Checking the onSuccess branch.
+
+      expect(MOCK_HOOKS.onFormCompleteCalls).toEqual(1); // Checking the onError branch.
+
+      expect(_handlers.default.submissionErrorCalls).toEqual(1);
+      expect(_handlers.default.submissionErrorArgs[0]).toEqual(['an example error']);
+      expect(addErrorsCalls).toEqual(1);
+      expect(addErrorsArgs[0]).toEqual(['an example error']);
+    });
+    it('should handle a hub format of HubFormats.TASK', function () {
+      var CUSTOM_ARGS = _objectSpread(_objectSpread({}, ARGS), {}, {
+        hub: _models.HubFormats.TASK
+      });
+
+      _onCYAAction.default.apply(void 0, Object.values(CUSTOM_ARGS));
+
+      expect(setPagePointCalls).toEqual(1);
+      expect(setPagePointArgs[0]).toEqual('submit');
+      expect(_helpers.default.canCYASubmitCalls).toEqual(1);
+      expect(_utils.default.Format.formCalls).toEqual(1);
+      expect(_helpers.default.getSubmissionStatusCalls).toEqual(1);
+      expect(setDataCalls).toEqual(1);
+      expect(setDataArgs[0]).toEqual({
+        id: 'formId',
+        formStatus: 'Good to go!'
+      });
+      expect(MOCK_HOOKS.onSubmitCalls).toEqual(1);
+      expect(MOCK_HOOKS.onSubmitArgs[0]).toEqual({
+        type: _models.PageAction.TYPES.SUBMIT,
+        payload: {
+          id: 'formId',
+          formStatus: 'Good to go!'
+        }
+      }); // Checking the onSuccess branch.
+
+      expect(MOCK_HOOKS.onFormCompleteCalls).toEqual(1); // Checking the onError branch.
+
+      expect(_handlers.default.submissionErrorCalls).toEqual(1);
+      expect(_handlers.default.submissionErrorArgs[0]).toEqual(['an example error']);
+      expect(addErrorsCalls).toEqual(1);
+      expect(addErrorsArgs[0]).toEqual(['an example error']);
+    });
+    it('should handle no hub', function () {
+      var CUSTOM_ARGS = _objectSpread(_objectSpread({}, ARGS), {}, {
+        hub: null
+      });
+
+      _onCYAAction.default.apply(void 0, Object.values(CUSTOM_ARGS));
+
+      expect(setPagePointCalls).toEqual(1);
+      expect(setPagePointArgs[0]).toEqual('submit');
+      expect(_helpers.default.canCYASubmitCalls).toEqual(1);
+      expect(_utils.default.Format.formCalls).toEqual(1);
+      expect(_helpers.default.getSubmissionStatusCalls).toEqual(1);
+      expect(setDataCalls).toEqual(1);
+      expect(setDataArgs[0]).toEqual({
+        id: 'formId',
+        formStatus: 'Good to go!'
+      });
+      expect(MOCK_HOOKS.onSubmitCalls).toEqual(1);
+      expect(MOCK_HOOKS.onSubmitArgs[0]).toEqual({
+        type: _models.PageAction.TYPES.SUBMIT,
+        payload: {
+          id: 'formId',
+          formStatus: 'Good to go!'
+        }
+      }); // Checking the onSuccess branch.
+
+      expect(MOCK_HOOKS.onFormCompleteCalls).toEqual(1); // Checking the onError branch.
+
+      expect(_handlers.default.submissionErrorCalls).toEqual(1);
+      expect(_handlers.default.submissionErrorArgs[0]).toEqual(['an example error']);
+      expect(addErrorsCalls).toEqual(1);
+      expect(addErrorsArgs[0]).toEqual(['an example error']);
+    });
+  });
+  describe('with a page action of PageAction.TYPES.SAVE_AND_CONTINUE', function () {
+    it('should validate if action.validate is not defined', function () {
+      var CUSTOM_ARGS = _objectSpread(_objectSpread({}, ARGS), {}, {
+        action: {
+          type: _models.PageAction.TYPES.SAVE_AND_CONTINUE
+        },
+        hub: _models.HubFormats.TASK
+      });
+
+      _onCYAAction.default.apply(void 0, Object.values(CUSTOM_ARGS));
+
+      expect(_helpers.default.canCYASubmitCalls).toEqual(1); // Validating.
+
+      expect(_utils.default.Format.formCalls).toEqual(1);
+      expect(_helpers.default.getSubmissionStatusCalls).toEqual(1);
+      expect(setDataCalls).toEqual(1);
+      expect(setDataArgs[0]).toEqual({
+        id: 'formId',
+        formStatus: 'Good to go!'
+      });
+      expect(MOCK_HOOKS.onSubmitCalls).toEqual(1);
+      expect(MOCK_HOOKS.onSubmitArgs[0]).toEqual({
+        type: CUSTOM_ARGS.action.type,
+        payload: {
+          id: 'formId',
+          formStatus: 'Good to go!'
+        }
+      }); // Checking the onSuccess branch.
+
+      expect(onPageChangeCalls).toEqual(1);
+      expect(onPageChangeArgs[0]).toEqual(_models.FormPages.HUB); // Checking the onError branch.
+
+      expect(_handlers.default.submissionErrorCalls).toEqual(1);
+      expect(_handlers.default.submissionErrorArgs[0]).toEqual(['an example error']);
+      expect(addErrorsCalls).toEqual(1);
+      expect(addErrorsArgs[0]).toEqual(['an example error']);
+    });
+    it('should validate if action.validate is true', function () {
+      var CUSTOM_ARGS = _objectSpread(_objectSpread({}, ARGS), {}, {
+        action: {
+          type: _models.PageAction.TYPES.SAVE_AND_CONTINUE,
+          validate: true
+        },
+        hub: _models.HubFormats.TASK
+      });
+
+      _onCYAAction.default.apply(void 0, Object.values(CUSTOM_ARGS));
+
+      expect(_helpers.default.canCYASubmitCalls).toEqual(1); // Validating.
+
+      expect(_utils.default.Format.formCalls).toEqual(1);
+      expect(_helpers.default.getSubmissionStatusCalls).toEqual(1);
+      expect(setDataCalls).toEqual(1);
+      expect(setDataArgs[0]).toEqual({
+        id: 'formId',
+        formStatus: 'Good to go!'
+      });
+      expect(MOCK_HOOKS.onSubmitCalls).toEqual(1);
+      expect(MOCK_HOOKS.onSubmitArgs[0]).toEqual({
+        type: CUSTOM_ARGS.action.type,
+        payload: {
+          id: 'formId',
+          formStatus: 'Good to go!'
+        }
+      }); // Checking the onSuccess branch.
+
+      expect(onPageChangeCalls).toEqual(1);
+      expect(onPageChangeArgs[0]).toEqual(_models.FormPages.HUB); // Checking the onError branch.
+
+      expect(_handlers.default.submissionErrorCalls).toEqual(1);
+      expect(_handlers.default.submissionErrorArgs[0]).toEqual(['an example error']);
+      expect(addErrorsCalls).toEqual(1);
+      expect(addErrorsArgs[0]).toEqual(['an example error']);
+    });
+    it('should not validate if action.validate is false', function () {
+      var CUSTOM_ARGS = _objectSpread(_objectSpread({}, ARGS), {}, {
+        action: {
+          type: _models.PageAction.TYPES.SAVE_AND_CONTINUE,
+          validate: false
+        },
+        hub: _models.HubFormats.TASK
+      });
+
+      _onCYAAction.default.apply(void 0, Object.values(CUSTOM_ARGS)); // Validation.
+
+
+      expect(_helpers.default.canCYASubmitCalls).toEqual(0); // Everything after this point should be normal, we just
+      // haven't validated this time round.
+
+      expect(_utils.default.Format.formCalls).toEqual(1);
+      expect(_helpers.default.getSubmissionStatusCalls).toEqual(1);
+      expect(setDataCalls).toEqual(1);
+      expect(setDataArgs[0]).toEqual({
+        id: 'formId',
+        formStatus: 'Good to go!'
+      });
+      expect(MOCK_HOOKS.onSubmitCalls).toEqual(1);
+      expect(MOCK_HOOKS.onSubmitArgs[0]).toEqual({
+        type: CUSTOM_ARGS.action.type,
+        payload: {
+          id: 'formId',
+          formStatus: 'Good to go!'
+        }
+      }); // Checking the onSuccess branch.
+
+      expect(onPageChangeCalls).toEqual(1);
+      expect(onPageChangeArgs[0]).toEqual(_models.FormPages.HUB); // Checking the onError branch.
+
+      expect(_handlers.default.submissionErrorCalls).toEqual(1);
+      expect(_handlers.default.submissionErrorArgs[0]).toEqual(['an example error']);
+      expect(addErrorsCalls).toEqual(1);
+      expect(addErrorsArgs[0]).toEqual(['an example error']);
+    });
+  });
+  describe('with an action type of PageAction.TYPES.SAVE_AND_RETURN', function () {
+    it('should validate if action.validate is not defined', function () {
+      var CUSTOM_ARGS = _objectSpread(_objectSpread({}, ARGS), {}, {
+        action: {
+          type: _models.PageAction.TYPES.SAVE_AND_RETURN
+        },
+        hub: _models.HubFormats.TASK
+      });
+
+      _onCYAAction.default.apply(void 0, Object.values(CUSTOM_ARGS));
+
+      expect(_helpers.default.canCYASubmitCalls).toEqual(1); // Validating.
+
+      expect(_utils.default.Format.formCalls).toEqual(1);
+      expect(_helpers.default.getSubmissionStatusCalls).toEqual(1);
+      expect(setDataCalls).toEqual(1);
+      expect(setDataArgs[0]).toEqual({
+        id: 'formId',
+        formStatus: 'Good to go!'
+      });
+      expect(MOCK_HOOKS.onSubmitCalls).toEqual(1);
+      expect(MOCK_HOOKS.onSubmitArgs[0]).toEqual({
+        type: CUSTOM_ARGS.action.type,
+        payload: {
+          id: 'formId',
+          formStatus: 'Good to go!'
+        }
+      }); // Checking the onSuccess branch.
+
+      expect(onPageChangeCalls).toEqual(1);
+      expect(onPageChangeArgs[0]).toEqual(_models.FormPages.HUB); // Checking the onError branch.
+
+      expect(_handlers.default.submissionErrorCalls).toEqual(1);
+      expect(_handlers.default.submissionErrorArgs[0]).toEqual(['an example error']);
+      expect(addErrorsCalls).toEqual(1);
+      expect(addErrorsArgs[0]).toEqual(['an example error']);
+    });
+    it('should validate if action.validate is true', function () {
+      var CUSTOM_ARGS = _objectSpread(_objectSpread({}, ARGS), {}, {
+        action: {
+          type: _models.PageAction.TYPES.SAVE_AND_RETURN,
+          validate: true
+        },
+        hub: _models.HubFormats.TASK
+      });
+
+      _onCYAAction.default.apply(void 0, Object.values(CUSTOM_ARGS));
+
+      expect(_helpers.default.canCYASubmitCalls).toEqual(1); // Validating.
+
+      expect(_utils.default.Format.formCalls).toEqual(1);
+      expect(_helpers.default.getSubmissionStatusCalls).toEqual(1);
+      expect(setDataCalls).toEqual(1);
+      expect(setDataArgs[0]).toEqual({
+        id: 'formId',
+        formStatus: 'Good to go!'
+      });
+      expect(MOCK_HOOKS.onSubmitCalls).toEqual(1);
+      expect(MOCK_HOOKS.onSubmitArgs[0]).toEqual({
+        type: CUSTOM_ARGS.action.type,
+        payload: {
+          id: 'formId',
+          formStatus: 'Good to go!'
+        }
+      }); // Checking the onSuccess branch.
+
+      expect(onPageChangeCalls).toEqual(1);
+      expect(onPageChangeArgs[0]).toEqual(_models.FormPages.HUB); // Checking the onError branch.
+
+      expect(_handlers.default.submissionErrorCalls).toEqual(1);
+      expect(_handlers.default.submissionErrorArgs[0]).toEqual(['an example error']);
+      expect(addErrorsCalls).toEqual(1);
+      expect(addErrorsArgs[0]).toEqual(['an example error']);
+    });
+    it('should not validate if action.validate is false', function () {
+      var CUSTOM_ARGS = _objectSpread(_objectSpread({}, ARGS), {}, {
+        action: {
+          type: _models.PageAction.TYPES.SAVE_AND_RETURN,
+          validate: false
+        },
+        hub: _models.HubFormats.TASK
+      });
+
+      _onCYAAction.default.apply(void 0, Object.values(CUSTOM_ARGS)); // Validation.
+
+
+      expect(_helpers.default.canCYASubmitCalls).toEqual(0); // Everything after this point should be normal, we just
+      // haven't validated this time round.
+
+      expect(_utils.default.Format.formCalls).toEqual(1);
+      expect(_helpers.default.getSubmissionStatusCalls).toEqual(1);
+      expect(setDataCalls).toEqual(1);
+      expect(setDataArgs[0]).toEqual({
+        id: 'formId',
+        formStatus: 'Good to go!'
+      });
+      expect(MOCK_HOOKS.onSubmitCalls).toEqual(1);
+      expect(MOCK_HOOKS.onSubmitArgs[0]).toEqual({
+        type: CUSTOM_ARGS.action.type,
+        payload: {
+          id: 'formId',
+          formStatus: 'Good to go!'
+        }
+      }); // Checking the onSuccess branch.
+
+      expect(onPageChangeCalls).toEqual(1);
+      expect(onPageChangeArgs[0]).toEqual(_models.FormPages.HUB); // Checking the onError branch.
+
+      expect(_handlers.default.submissionErrorCalls).toEqual(1);
+      expect(_handlers.default.submissionErrorArgs[0]).toEqual(['an example error']);
+      expect(addErrorsCalls).toEqual(1);
+      expect(addErrorsArgs[0]).toEqual(['an example error']);
+    });
+    it('should call onPageChange with undefined if type is FormTypes.TASK', function () {
+      var CUSTOM_ARGS = _objectSpread(_objectSpread({}, ARGS), {}, {
+        action: {
+          type: _models.PageAction.TYPES.SAVE_AND_RETURN,
+          validate: true
+        },
+        hub: _models.HubFormats.TASK,
+        type: _models.FormTypes.TASK
+      });
+
+      _onCYAAction.default.apply(void 0, Object.values(CUSTOM_ARGS));
+
+      expect(_helpers.default.canCYASubmitCalls).toEqual(1); // Validating.
+
+      expect(_utils.default.Format.formCalls).toEqual(1);
+      expect(_helpers.default.getSubmissionStatusCalls).toEqual(1);
+      expect(setDataCalls).toEqual(1);
+      expect(setDataArgs[0]).toEqual({
+        id: 'formId',
+        formStatus: 'Good to go!'
+      });
+      expect(MOCK_HOOKS.onSubmitCalls).toEqual(1);
+      expect(MOCK_HOOKS.onSubmitArgs[0]).toEqual({
+        type: CUSTOM_ARGS.action.type,
+        payload: {
+          id: 'formId',
+          formStatus: 'Good to go!'
+        }
+      }); // Checking the onSuccess branch.
+
+      expect(onPageChangeCalls).toEqual(1);
+      expect(onPageChangeArgs[0]).toEqual(undefined); // Checking the onError branch.
+
+      expect(_handlers.default.submissionErrorCalls).toEqual(1);
+      expect(_handlers.default.submissionErrorArgs[0]).toEqual(['an example error']);
+      expect(addErrorsCalls).toEqual(1);
+      expect(addErrorsArgs[0]).toEqual(['an example error']);
+    });
+  });
+  it('should handle a page action type of PageAction.TYPES.NAVIGATE', function () {
+    var CUSTOM_ARGS = _objectSpread(_objectSpread({}, ARGS), {}, {
+      action: {
+        type: _models.PageAction.TYPES.NAVIGATE,
+        page: 'page2'
+      }
+    });
+
+    _onCYAAction.default.apply(void 0, Object.values(CUSTOM_ARGS));
+
+    expect(onPageChangeCalls).toEqual(1);
+    expect(onPageChangeArgs[0]).toEqual('page2');
+  });
+  it('should handle a page action type of PageAction.TYPES.CANCEL', function () {
+    var CUSTOM_ARGS = _objectSpread(_objectSpread({}, ARGS), {}, {
+      action: {
+        type: _models.PageAction.TYPES.CANCEL
+      }
+    });
+
+    _onCYAAction.default.apply(void 0, Object.values(CUSTOM_ARGS));
+
+    expect(MOCK_HOOKS.onCancelCalls).toEqual(1);
+  });
+});

package/dist/utils/Operate/getFirstOf.js

@@ -14,9 +14,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 // Global imports.
 // Local imports.
 var getFirstOf = function getFirstOf(config, data) {
-  var fieldValue;
-
   if (config !== null && config !== void 0 && config.fields) {
+    var fieldValue;
     config.fields.find(function (field) {
       var fieldPath = _copReactComponents.Utils.interpolateString(field, data);
 
@@ -29,7 +28,7 @@ var getFirstOf = function getFirstOf(config, data) {
 
       return false;
     });
-    return fieldValue || '';
+    return fieldValue || (config.fallback ? _copReactComponents.Utils.interpolateString(config.fallback, data) : '');
   }
 
   return (config === null || config === void 0 ? void 0 : config.value) || null;

package/dist/utils/Operate/getFirstOf.test.js

@@ -29,6 +29,15 @@ describe('Utils.Operate.addToFormData', function () {
     var result = (0, _getFirstOf.default)(CONFIG, DATA);
     expect(result).toEqual(CONFIG.value);
   });
+  it('Should return the fallback if the requested fields are not found', function () {
+    var CONFIG = {
+      value: '2',
+      fields: ['nonExistent'],
+      fallback: "Test ${name}"
+    };
+    var result = (0, _getFirstOf.default)(CONFIG, DATA);
+    expect(result).toEqual("Test ".concat(DATA.name));
+  });
   it('Should return the value of the passportNumber field given in config', function () {
     var CONFIG = {
       fields: ['passportNumber', 'anotherMadeUpId', 'otherIdDoc']

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukhomeoffice/cop-react-form-renderer",
-  "version": "4.64.0-charlie",
+  "version": "4.65.0",
   "private": false,
   "scripts": {
     "clean": "rimraf dist",
@@ -16,7 +16,7 @@
     "post-compile": "rimraf dist/*.test.* dist/**/*.test.* dist/**/*.stories.* dist/docs dist/assets"
   },
   "dependencies": {
-    "@ukhomeoffice/cop-react-components": "^2.11.0",
+    "@ukhomeoffice/cop-react-components": "^2.11.2",
     "axios": "^0.23.0",
     "dayjs": "^1.11.0",
     "govuk-frontend": "^4.3.1",