@ukhomeoffice/cop-react-form-renderer 3.2.3 → 3.2.4

package/dist/components/FormComponent/FormComponent.js

@@ -140,8 +140,9 @@ var FormComponent = function FormComponent(_ref) {
   return _utils.default.Component.get(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, attrs), component), {}, {
     id: component.full_path || component.id
   }, (0, _helpers.getComponentError)(component, validation === null || validation === void 0 ? void 0 : validation.errors)), {}, {
-    label: component.label || '',
-    hint: component.hint || '',
+    label: _utils.default.interpolateString(component.label, formData),
+    content: _utils.default.interpolateString(component.content, formData),
+    hint: _utils.default.interpolateString(component.hint, formData),
     options: options,
     value: value || _utils.default.Component.defaultValue(component),
     onChange: onComponentChangeExtended,

package/dist/components/FormPage/FormPage.js

@@ -51,6 +51,8 @@ var DEFAULT_CLASS = 'hods-form';
 exports.DEFAULT_CLASS = DEFAULT_CLASS;
 
 var FormPage = function FormPage(_ref) {
+  var _page$actions;
+
   var page = _ref.page,
       _onAction = _ref.onAction,
       classBlock = _ref.classBlock,
@@ -81,10 +83,15 @@ var FormPage = function FormPage(_ref) {
 
   var classes = _utils.default.classBuilder(classBlock, classModifiers, className);
 
+  page.actions = (_page$actions = page.actions) === null || _page$actions === void 0 ? void 0 : _page$actions.map(function (action) {
+    return action.label ? _objectSpread(_objectSpread({}, action), {}, {
+      label: _utils.default.interpolateString(action.label, page.formData)
+    }) : action;
+  });
   return /*#__PURE__*/_react.default.createElement("div", {
     className: classes('page'),
     key: page.id
-  }, page.title && /*#__PURE__*/_react.default.createElement(_copReactComponents.LargeHeading, null, page.title), (errors === null || errors === void 0 ? void 0 : errors.length) > 0 && /*#__PURE__*/_react.default.createElement(_copReactComponents.ErrorSummary, {
+  }, page.title && /*#__PURE__*/_react.default.createElement(_copReactComponents.LargeHeading, null, _utils.default.interpolateString(page.title, page.formData)), (errors === null || errors === void 0 ? void 0 : errors.length) > 0 && /*#__PURE__*/_react.default.createElement(_copReactComponents.ErrorSummary, {
     errors: errors
   }), page.components.filter(function (c) {
     return _utils.default.Component.show(c, page.formData);

package/dist/components/FormPage/FormPage.test.js

@@ -24,6 +24,18 @@ function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try
 
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
 
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
 describe('components.FormPage', function () {
   describe('FormPage', function () {
     var TEXT = {
@@ -32,6 +44,25 @@ describe('components.FormPage', function () {
       type: 'text',
       label: 'Text component',
       hint: 'Text hint'
+    }; // eslint-disable-next-line no-template-curly-in-string
+
+    var TEXT_WITH_EXPRESSION = {
+      id: 'text1',
+      fieldId: 'text1',
+      type: 'text',
+      label: 'Email to ${wrapper.email}',
+      hint: 'Text hint ${currentUser.givenName}'
+    }; // eslint-disable-next-line no-template-curly-in-string
+
+    var AUTO_WITH_EXPRESSION = {
+      id: 'text2',
+      fieldId: 'text2',
+      label: '${text2} ${currentUser.givenName}',
+      hint: '${wrapper.email}',
+      type: 'autocomplete',
+      required: true,
+      source: [],
+      disabled: false
     };
     var VALUE = 'Text value';
     var PAGE = {
@@ -43,8 +74,102 @@ describe('components.FormPage', function () {
         text: VALUE
       }
     };
+    var PAGE_WITH_BUTTON_ACTIONS = {
+      id: 'pageId',
+      // eslint-disable-next-line no-template-curly-in-string
+      title: '${title}',
+      components: [TEXT_WITH_EXPRESSION, AUTO_WITH_EXPRESSION],
+      actions: [// eslint-disable-next-line no-template-curly-in-string
+      {
+        type: 'submit',
+        validate: true,
+        label: 'Next ${wrapper.nextAction}'
+      }, // eslint-disable-next-line no-template-curly-in-string
+      {
+        type: 'navigate',
+        page: '1',
+        label: 'Go back ${wrapper.prevAction}'
+      }],
+      formData: {
+        title: 'Order Form',
+        text1: "Text1 ".concat(VALUE),
+        text2: "Text2 ".concat(VALUE),
+        wrapper: {
+          email: 'test@example.email',
+          nextAction: 'Payment',
+          prevAction: 'User Details'
+        },
+        currentUser: {
+          givenName: 'Doe'
+        }
+      }
+    };
     var ON_ACTION_CALLS = [];
 
+    var checkInputField = function checkInputField(formGroup, fieldId, lbl, hnt, val) {
+      expect(formGroup.tagName).toEqual('DIV');
+      expect(formGroup.classList).toContain('govuk-form-group');
+      var label = formGroup.childNodes[0];
+      expect(label.tagName).toEqual('LABEL');
+      expect(label.classList).toContain('govuk-label');
+      expect(label.textContent).toEqual(lbl);
+      expect(label.getAttribute('for')).toEqual(fieldId);
+      var hint = formGroup.childNodes[1];
+      expect(hint.tagName).toEqual('SPAN');
+      expect(hint.classList).toContain('govuk-hint');
+      expect(hint.textContent).toEqual(hnt);
+      var input = formGroup.childNodes[2];
+      expect(input.tagName).toEqual('INPUT');
+      expect(input.classList).toContain('govuk-input');
+      expect(input.id).toEqual(fieldId);
+      expect(input.value).toEqual(val);
+      return input;
+    };
+
+    var checkAutoCompleteField = function checkAutoCompleteField(formGroup, fieldId, lbl, hnt, val) {
+      expect(formGroup.tagName).toEqual('DIV');
+      expect(formGroup.classList).toContain('govuk-form-group');
+      var label = formGroup.childNodes[0];
+      expect(label.tagName).toEqual('LABEL');
+      expect(label.classList).toContain('govuk-label');
+      expect(label.textContent).toEqual(lbl);
+      expect(label.getAttribute('for')).toEqual(fieldId);
+      var hint = formGroup.childNodes[1];
+      expect(hint.tagName).toEqual('SPAN');
+      expect(hint.classList).toContain('govuk-hint');
+      expect(hint.textContent).toEqual(hnt);
+      var outerWrapper = formGroup.childNodes[2];
+      expect(outerWrapper.classList).toContain('hods-autocomplete__outer-wrapper');
+      var autocomplete = outerWrapper.childNodes[0];
+      expect(autocomplete.classList).toContain('hods-autocomplete__wrapper');
+
+      var input = _toConsumableArray(autocomplete.childNodes).filter(function (e) {
+        return e.tagName === 'INPUT';
+      })[0];
+
+      expect(input.classList).toContain('hods-autocomplete__input');
+      expect(input.tagName).toEqual('INPUT');
+      expect(input.id).toEqual(fieldId);
+      expect(input.value).toEqual(val);
+      return input;
+    };
+
+    var checkFormButtonGroup = function checkFormButtonGroup(buttonGroup, labels) {
+      var _buttonGroup$childNod;
+
+      var buttons = [];
+      expect(buttonGroup.tagName).toEqual('DIV');
+      expect(buttonGroup.classList).toContain('hods-button-group');
+      expect((_buttonGroup$childNod = buttonGroup.childNodes) === null || _buttonGroup$childNod === void 0 ? void 0 : _buttonGroup$childNod.length).toEqual(labels.length);
+      buttonGroup.childNodes.forEach(function (button, i) {
+        expect(button.tagName).toEqual('BUTTON');
+        expect(button.classList).toContain('hods-button');
+        expect(button.textContent).toEqual(labels[i]);
+        buttons.push(button);
+      });
+      return buttons;
+    };
+
     var ON_ACTION = function ON_ACTION(action, patch, onError) {
       ON_ACTION_CALLS.push({
         action: action,
@@ -60,7 +185,7 @@ describe('components.FormPage', function () {
       ON_ACTION_CALLS.length = 0;
     });
     it('should render a submit page correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-      var _renderWithValidation, container, page, heading, formGroup, label, hint, input, buttonGroup, button;
+      var _renderWithValidation, container, page, heading;
 
       return regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
@@ -76,50 +201,57 @@ describe('components.FormPage', function () {
               heading = page.childNodes[0];
               expect(heading.classList).toContain('govuk-heading-l');
               expect(heading.textContent).toEqual(PAGE.title);
-              formGroup = page.childNodes[1];
-              expect(formGroup.tagName).toEqual('DIV');
-              expect(formGroup.classList).toContain('govuk-form-group');
-              label = formGroup.childNodes[0];
-              expect(label.tagName).toEqual('LABEL');
-              expect(label.classList).toContain('govuk-label');
-              expect(label.textContent).toEqual("".concat(TEXT.label, " (optional)"));
-              expect(label.getAttribute('for')).toEqual(TEXT.fieldId);
-              hint = formGroup.childNodes[1];
-              expect(hint.tagName).toEqual('SPAN');
-              expect(hint.classList).toContain('govuk-hint');
-              expect(hint.textContent).toEqual(TEXT.hint);
-              input = formGroup.childNodes[2];
-              expect(input.tagName).toEqual('INPUT');
-              expect(input.classList).toContain('govuk-input');
-              expect(input.id).toEqual(TEXT.fieldId);
-              expect(input.value).toEqual(VALUE);
-              buttonGroup = page.childNodes[2];
-              expect(buttonGroup.tagName).toEqual('DIV');
-              expect(buttonGroup.classList).toContain('hods-button-group');
-              button = buttonGroup.childNodes[0];
-              expect(button.tagName).toEqual('BUTTON');
-              expect(button.classList).toContain('hods-button');
-              expect(button.textContent).toEqual(_ActionButton.DEFAULT_LABEL);
-
-            case 31:
+              checkInputField(page.childNodes[1], TEXT.fieldId, "".concat(TEXT.label, " (optional)"), TEXT.hint, VALUE);
+              checkFormButtonGroup(page.childNodes[2], [_ActionButton.DEFAULT_LABEL]);
+
+            case 9:
             case "end":
               return _context.stop();
           }
         }
       }, _callee);
     })));
-    it('should handle a page change appropriately', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
-      var _renderWithValidation2, container, page, input, NEW_VALUE, EVENT;
+    it('should render a submit page correctly and submit action button has interpolated label', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+      var _renderWithValidation2, container, page, FORM_DATA, heading;
 
       return regeneratorRuntime.wrap(function _callee2$(_context2) {
         while (1) {
           switch (_context2.prev = _context2.next) {
             case 0:
               _renderWithValidation2 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_FormPage.default, {
-                page: PAGE,
+                page: PAGE_WITH_BUTTON_ACTIONS,
                 onAction: ON_ACTION
               })), container = _renderWithValidation2.container;
               page = container.childNodes[0];
+              FORM_DATA = PAGE_WITH_BUTTON_ACTIONS.formData;
+              expect(page.tagName).toEqual('DIV');
+              expect(page.classList).toContain("".concat(_FormPage.DEFAULT_CLASS, "__page"));
+              heading = page.childNodes[0];
+              expect(heading.classList).toContain('govuk-heading-l');
+              expect(heading.textContent).toEqual(FORM_DATA.title);
+              checkInputField(page.childNodes[1], TEXT_WITH_EXPRESSION.fieldId, 'Email to test@example.email (optional)', 'Text hint Doe', 'Text1 Text value');
+              checkAutoCompleteField(page.childNodes[2], AUTO_WITH_EXPRESSION.fieldId, "".concat(FORM_DATA.text2, " ").concat(FORM_DATA.currentUser.givenName), FORM_DATA.wrapper.email, "Text2 ".concat(VALUE));
+              checkFormButtonGroup(page.childNodes[3], ['Next Payment', 'Go back User Details']);
+
+            case 11:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    })));
+    it('should handle a page change appropriately', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
+      var _renderWithValidation3, container, page, input, NEW_VALUE, EVENT;
+
+      return regeneratorRuntime.wrap(function _callee3$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              _renderWithValidation3 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_FormPage.default, {
+                page: PAGE,
+                onAction: ON_ACTION
+              })), container = _renderWithValidation3.container;
+              page = container.childNodes[0];
               expect(page.tagName).toEqual('DIV'); // Change the input.
 
               input = page.childNodes[1].childNodes[2];
@@ -138,22 +270,22 @@ describe('components.FormPage', function () {
 
             case 8:
             case "end":
-              return _context2.stop();
+              return _context3.stop();
           }
         }
-      }, _callee2);
+      }, _callee3);
     })));
-    it('should handle a page action appropriately', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
-      var _renderWithValidation3, container, page, input, NEW_VALUE, CHANGE_EVENT, button;
+    it('should handle a page action appropriately', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
+      var _renderWithValidation4, container, page, input, NEW_VALUE, CHANGE_EVENT, button;
 
-      return regeneratorRuntime.wrap(function _callee3$(_context3) {
+      return regeneratorRuntime.wrap(function _callee4$(_context4) {
         while (1) {
-          switch (_context3.prev = _context3.next) {
+          switch (_context4.prev = _context4.next) {
             case 0:
-              _renderWithValidation3 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_FormPage.default, {
+              _renderWithValidation4 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_FormPage.default, {
                 page: PAGE,
                 onAction: ON_ACTION
-              })), container = _renderWithValidation3.container;
+              })), container = _renderWithValidation4.container;
               page = container.childNodes[0]; // Change the input.
 
               input = page.childNodes[1].childNodes[2];
@@ -182,10 +314,10 @@ describe('components.FormPage', function () {
 
             case 12:
             case "end":
-              return _context3.stop();
+              return _context4.stop();
           }
         }
-      }, _callee3);
+      }, _callee4);
     })));
   });
 });

package/dist/utils/Data/getOptions.js

@@ -5,12 +5,29 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _copReactComponents = require("@ukhomeoffice/cop-react-components");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { 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; }
+
+var interpolateOptions = function interpolateOptions(config, options) {
+  return options.map(function (opt) {
+    return _objectSpread(_objectSpread({}, opt), {}, {
+      value: _copReactComponents.Utils.interpolateString(opt.value, config.formData),
+      label: _copReactComponents.Utils.interpolateString(opt.label, config.formData)
+    });
+  });
+};
+
 var getOptions = function getOptions(config, callback) {
   if (config) {
     if (config.options) {
-      return callback(config.options);
+      return callback(interpolateOptions(config, config.options));
     } else if (config.data && config.data.options) {
-      return callback(config.data.options);
+      return callback(interpolateOptions(config, config.data.options));
     }
   }
 

package/dist/utils/FormPage/getFormPage.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _copReactComponents = require("@ukhomeoffice/cop-react-components");
-
 var _Container = _interopRequireDefault(require("../Container"));
 
 var _Data = _interopRequireDefault(require("../Data"));
@@ -37,8 +35,6 @@ var getFormPage = function getFormPage(pageOptions, formComponents, formData) {
     return null;
   }
 
-  pageOptions = interpolatePageOptions(pageOptions, formData);
-  formComponents = interpolateFormComponents(formComponents, formData);
   var components = pageOptions.components.map(function (componentOptions) {
     if (typeof componentOptions === 'string') {
       return (0, _getParagraphFromText.default)(componentOptions);
@@ -61,42 +57,6 @@ var getFormPage = function getFormPage(pageOptions, formComponents, formData) {
     actions: actions
   }));
 };
-/**
- * Interpolate 'Variable Expression' using formData - for local use only.
- * @param {object} pageOptions The JSON page.
- * @param {object} formData The top-level form data, used for setting up components.
- * @returns interpolated pageOptions.
- */
-
-
-var interpolatePageOptions = function interpolatePageOptions(pageOptions, formData) {
-  return JSON.parse(_copReactComponents.Utils.interpolateString(JSON.stringify(pageOptions), formData));
-};
-/**
- * Interpolate 'Variable Expression' using formData excluding each component's data block - for local use only.
- * @param {Array} formComponents The components defined at the top-level of the form.
- * @param {object} formData The top-level form data, used for setting up components.
- * @returns interpolated formComponents
- */
-
-
-var interpolateFormComponents = function interpolateFormComponents(formComponents, formData) {
-  return formComponents.map(function (formComponent) {
-    var formComponentDataUrl = undefined;
-
-    if (formComponent.data && formComponent.data.url) {
-      formComponentDataUrl = formComponent.data.url;
-    }
-
-    var interpolatedFormComponent = JSON.parse(_copReactComponents.Utils.interpolateString(JSON.stringify(formComponent), formData));
-
-    if (formComponentDataUrl) {
-      interpolatedFormComponent.data.url = formComponentDataUrl;
-    }
-
-    return interpolatedFormComponent;
-  });
-};
 
 var _default = getFormPage;
 exports.default = _default;

package/dist/utils/FormPage/getFormPage.test.js

@@ -200,74 +200,6 @@ describe('utils', function () {
           formData: {}
         });
       });
-      it('should interpolate and handle a page that references a form-level component with formData', function () {
-        var PAGE = {
-          // eslint-disable-next-line no-template-curly-in-string
-          title: 'Page ${postFixTitle}',
-          components: ["Opening paragraph", {
-            type: 'heading',
-            size: 'l',
-            content: 'Page heading'
-          }, "Closing paragraph", {
-            use: 'c'
-          }, {
-            use: 'd'
-          }, "Kevin", {
-            use: 'e'
-          }]
-        };
-
-        var DATA = _objectSpread(_objectSpread({}, FORM_DATA), {}, {
-          currentUser: {
-            firstname: 'Bob',
-            surname: 'Kevin'
-          },
-          postFixTitle: 'Everyone'
-        });
-
-        var C = FORM_COMPONENTS[2];
-        var D = FORM_COMPONENTS[3];
-        var E = FORM_COMPONENTS[4];
-        expect((0, _getFormPage.default)(PAGE, FORM_COMPONENTS, DATA)).toEqual({
-          title: 'Page Everyone',
-          components: [{
-            type: 'html',
-            tagName: 'p',
-            content: PAGE.components[0]
-          }, _objectSpread(_objectSpread({}, PAGE.components[1]), {}, {
-            full_path: PAGE.components[1].fieldId
-          }), {
-            type: 'html',
-            tagName: 'p',
-            content: PAGE.components[2]
-          }, _objectSpread(_objectSpread({
-            use: 'c'
-          }, C), {}, {
-            cya_label: C.label,
-            data: {
-              url: "".concat(FORM_DATA.urls.refData, "/v3/charlies")
-            },
-            full_path: C.fieldId
-          }), _objectSpread(_objectSpread({
-            use: 'd'
-          }, D), {}, {
-            label: 'Roger ' + DATA.currentUser.firstname,
-            cya_label: 'Roger ' + DATA.currentUser.firstname,
-            full_path: D.fieldId
-          }), {
-            type: 'html',
-            tagName: 'p',
-            content: PAGE.components[5]
-          }, _objectSpread(_objectSpread({
-            use: 'e'
-          }, E), {}, {
-            label: 'Bravo ' + DATA.currentUser.surname,
-            cya_label: 'Bravo ' + DATA.currentUser.surname,
-            full_path: E.fieldId
-          })],
-          formData: DATA
-        });
-      });
     });
   });
 });

package/dist/utils/Validate/validatePage.js

@@ -5,13 +5,19 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _copReactComponents = require("@ukhomeoffice/cop-react-components");
+
 var _validateComponent = _interopRequireDefault(require("./validateComponent"));
 
 var _showFormPage = _interopRequireDefault(require("../FormPage/showFormPage"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-// Local imports
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { 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; }
 
 /**
  * Validate all of the components on a page.
@@ -21,7 +27,11 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var validatePage = function validatePage(page) {
   if ((0, _showFormPage.default)(page, page.formData) && Array.isArray(page.components)) {
     return page.components.reduce(function (errors, component) {
-      return errors.concat((0, _validateComponent.default)(component, page.formData, page.formData));
+      return errors.concat((0, _validateComponent.default)(component, page.formData, page.formData)).map(function (err) {
+        return !!err ? _objectSpread(_objectSpread({}, err), {}, {
+          error: _copReactComponents.Utils.interpolateString(err.error, page.formData)
+        }) : err;
+      });
     }, []).filter(function (e) {
       return !!e;
     }).flat();

package/dist/utils/Validate/validatePage.test.js

@@ -6,7 +6,12 @@ var _validatePage = _interopRequireDefault(require("./validatePage"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-// Local imports
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { 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; }
+
 describe('utils', function () {
   describe('Validate', function () {
     describe('page', function () {
@@ -69,6 +74,46 @@ describe('utils', function () {
             error: 'Echo is required'
           });
         });
+        it('should return an error for each required component with interpolated label', function () {
+          var COMPONENTS = [// eslint-disable-next-line no-template-curly-in-string
+          setup('a', _models.ComponentTypes.TEXT, 'Alpha ${tiger}', true), // eslint-disable-next-line no-template-curly-in-string
+          setup('b', _models.ComponentTypes.EMAIL, 'Bravo ${panther}', true), // eslint-disable-next-line no-template-curly-in-string
+          setup('c', _models.ComponentTypes.AUTOCOMPLETE, 'Charlie ${eagle}', true), // eslint-disable-next-line no-template-curly-in-string
+          setup('d', _models.ComponentTypes.CHECKBOXES, 'Delta ${lion}', true), // eslint-disable-next-line no-template-curly-in-string
+          setup('e', _models.ComponentTypes.FILE, 'Echo ${zoo}', true)];
+          var PAGE = {
+            components: COMPONENTS,
+            formData: {
+              tiger: 'Tiger',
+              panther: 'Panther',
+              eagle: 'Eagle',
+              lion: 'Lion',
+              zoo: 'Zoo'
+            }
+          };
+          var RESULT = (0, _validatePage.default)(PAGE);
+          expect(RESULT.length).toEqual(5);
+          expect(RESULT[0]).toEqual({
+            id: 'a',
+            error: "Alpha ".concat(PAGE.formData.tiger, " is required")
+          });
+          expect(RESULT[1]).toEqual({
+            id: 'b',
+            error: "Bravo ".concat(PAGE.formData.panther, " is required")
+          });
+          expect(RESULT[2]).toEqual({
+            id: 'c',
+            error: "Charlie ".concat(PAGE.formData.eagle, " is required")
+          });
+          expect(RESULT[3]).toEqual({
+            id: 'd',
+            error: "Delta ".concat(PAGE.formData.lion, " is required")
+          });
+          expect(RESULT[4]).toEqual({
+            id: 'e',
+            error: "Echo ".concat(PAGE.formData.zoo, " is required")
+          });
+        });
       });
       describe('when the form data is fully valid', function () {
         var DATA = {
@@ -164,6 +209,28 @@ describe('utils', function () {
             error: 'Charlie is required'
           });
         });
+        it('should return an interpolated error for both invalid fields when all are required and email types', function () {
+          var COMPONENTS = [setup('alpha', _models.ComponentTypes.EMAIL, 'Alpha', true), // eslint-disable-next-line no-template-curly-in-string
+          setup('bravo', _models.ComponentTypes.EMAIL, 'Bravo ${lion}', true), // eslint-disable-next-line no-template-curly-in-string
+          setup('charlie', _models.ComponentTypes.EMAIL, 'Charlie ${panther}', true)];
+          var PAGE = {
+            components: COMPONENTS,
+            formData: _objectSpread(_objectSpread({}, DATA), {}, {
+              lion: 'Lion',
+              panther: 'Panther'
+            })
+          };
+          var RESULT = (0, _validatePage.default)(PAGE);
+          expect(RESULT.length).toEqual(2);
+          expect(RESULT[0]).toEqual({
+            id: 'bravo',
+            error: "Enter bravo ".concat(PAGE.formData.lion, " in the correct format, like jane.doe@homeoffice.gov.uk")
+          });
+          expect(RESULT[1]).toEqual({
+            id: 'charlie',
+            error: "Charlie ".concat(PAGE.formData.panther, " is required")
+          });
+        });
       });
     });
   });

package/package.json

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