@ukhomeoffice/cop-react-form-renderer 3.0.2 → 3.0.3

package/dist/utils/FormPage/getFormPage.js

@@ -5,6 +5,8 @@ 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"));
@@ -35,6 +37,8 @@ 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);
@@ -57,6 +61,42 @@ 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

@@ -32,6 +32,18 @@ describe('utils', function () {
         data: {
           url: '${urls.refData}/v3/charlies'
         }
+      }, // eslint-disable-next-line no-template-curly-in-string
+      {
+        id: 'd',
+        fieldId: 'd',
+        label: 'Roger ${currentUser.firstname}',
+        type: 'text'
+      }, // eslint-disable-next-line no-template-curly-in-string
+      {
+        id: 'e',
+        fieldId: 'e',
+        label: 'Bravo ${currentUser.surname}',
+        type: 'text'
       }];
       var FORM_DATA = {
         urls: {
@@ -165,6 +177,59 @@ describe('utils', function () {
         var C = FORM_COMPONENTS[2];
         expect((0, _getFormPage.default)(PAGE, FORM_COMPONENTS, {})).toEqual({
           title: PAGE.title,
+          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]
+          }, // eslint-disable-next-line no-template-curly-in-string
+          _objectSpread(_objectSpread({
+            use: 'c'
+          }, C), {}, {
+            cya_label: C.label,
+            full_path: C.fieldId,
+            data: {
+              url: '${urls.refData}/v3/charlies'
+            }
+          })],
+          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',
@@ -179,9 +244,28 @@ describe('utils', function () {
             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: {}
+          formData: DATA
         });
       });
     });

package/package.json

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