@ukhomeoffice/cop-react-form-renderer 1.0.0-delta → 2.0.0

package/dist/components/CheckYourAnswers/CheckYourAnswers.js

@@ -15,6 +15,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _utils = _interopRequireDefault(require("../../utils"));
 
+var _PageActions = _interopRequireDefault(require("../PageActions"));
+
 var _SummaryList = _interopRequireDefault(require("../SummaryList"));
 
 var _Answer = _interopRequireDefault(require("./Answer"));
@@ -55,17 +57,25 @@ exports.DEFAULT_MARGIN_BOTTOM = DEFAULT_MARGIN_BOTTOM;
 var CheckYourAnswers = function CheckYourAnswers(_ref) {
   var title = _ref.title,
       _pages = _ref.pages,
+      actions = _ref.actions,
+      _onAction = _ref.onAction,
+      onRowAction = _ref.onRowAction,
       hide_page_titles = _ref.hide_page_titles,
-      onAction = _ref.onAction;
+      hide_actions = _ref.hide_actions;
 
   var _useState = (0, _react.useState)([]),
       _useState2 = _slicedToArray(_useState, 2),
       pages = _useState2[0],
       setPages = _useState2[1];
 
+  var _useState3 = (0, _react.useState)([]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      errors = _useState4[0],
+      setErrors = _useState4[1];
+
   (0, _react.useEffect)(function () {
     var getRows = function getRows(page, pageIndex) {
-      var rows = _utils.default.CheckYourAnswers.getRows(page, onAction);
+      var rows = _utils.default.CheckYourAnswers.getRows(page, onRowAction);
 
       return rows.map(function (row, index) {
         return _objectSpread(_objectSpread({}, row), {}, {
@@ -86,18 +96,24 @@ var CheckYourAnswers = function CheckYourAnswers(_ref) {
     }).filter(function (p) {
       return !!p;
     }));
-  }, [_pages, onAction, setPages]);
+  }, [_pages, onRowAction, setPages]);
   var listMarginBottom = hide_page_titles ? 0 : DEFAULT_MARGIN_BOTTOM;
 
   var isLastPage = function isLastPage(index) {
     return index === pages.length - 1;
   };
 
+  var onError = function onError(errors) {
+    setErrors(errors);
+  };
+
   return /*#__PURE__*/_react.default.createElement("div", {
     className: DEFAULT_CLASS
   }, title && /*#__PURE__*/_react.default.createElement(_copReactComponents.LargeHeading, {
     key: "heading"
-  }, title), pages && pages.map(function (page, pageIndex) {
+  }, title), errors && errors.length > 0 && /*#__PURE__*/_react.default.createElement(_copReactComponents.ErrorSummary, {
+    errors: errors
+  }), pages && pages.map(function (page, pageIndex) {
     var pageMarginBottom = isLastPage(pageIndex) ? DEFAULT_MARGIN_BOTTOM : listMarginBottom;
     var className = "govuk-!-margin-bottom-".concat(pageMarginBottom);
     return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
@@ -106,17 +122,27 @@ var CheckYourAnswers = function CheckYourAnswers(_ref) {
       className: className,
       rows: page.rows
     }));
+  }), !hide_actions && /*#__PURE__*/_react.default.createElement(_PageActions.default, {
+    actions: actions,
+    onAction: function onAction(action) {
+      return _onAction(action, onError);
+    }
   }));
 };
 
 CheckYourAnswers.propTypes = {
   title: _propTypes.default.string.isRequired,
   pages: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
-  hide_page_titles: _propTypes.default.bool
+  actions: _propTypes.default.arrayOf(_propTypes.default.object),
+  onAction: _propTypes.default.func.isRequired,
+  onRowAction: _propTypes.default.func.isRequired,
+  hide_page_titles: _propTypes.default.bool,
+  hide_actions: _propTypes.default.bool
 };
 CheckYourAnswers.defaultProps = {
   title: DEFAULT_TITLE,
-  hide_page_titles: false
+  hide_page_titles: false,
+  hide_actions: false
 };
 var _default = CheckYourAnswers;
 exports.default = _default;

package/dist/components/CheckYourAnswers/CheckYourAnswers.stories.mdx

@@ -13,6 +13,7 @@ import GRADE from '../../json/grade.json';
 import TEAMS from '../../json/team.json';
 import USER_PROFILE_DATA from '../../json/userProfile.data.json';
 import USER_PROFILE from '../../json/userProfile.json';
+import FIRST_FORM from '../../json/firstForm.json';
 
 <Meta title="Components/Check your answers" id="D-CheckYourAnswers" component={ CheckYourAnswers } decorators={[withMock]} />
 
@@ -44,13 +45,16 @@ Renders the **Check your answers** screen for a form.
     ]
   }}>
     {() => {
-      const DATA = Utils.Data.setupForm(USER_PROFILE.pages, USER_PROFILE.components, USER_PROFILE_DATA)
+      const DATA = Utils.Data.setupForm(USER_PROFILE.pages, USER_PROFILE.components, USER_PROFILE_DATA);
       const PAGES = Utils.FormPage.getAll(USER_PROFILE.pages, USER_PROFILE.components, { ...DATA });
       const ON_ACTION = (action, patch, onError) => {
         console.log('action invoked', action, patch);
       };
+      const ON_ROW_ACTION = (page) => {
+        console.log('row action invoked', page);
+      };
       return (
-        <CheckYourAnswers pages={PAGES} onAction={ON_ACTION} />
+        <CheckYourAnswers pages={PAGES} onAction={ON_ACTION} onRowAction={ON_ROW_ACTION} />
       );
     }}
   </Story>
@@ -87,13 +91,58 @@ Renders the **Check your answers** screen for a form.
     ]
   }}>
     {() => {
-      const DATA = Utils.Data.setupForm(USER_PROFILE.pages, USER_PROFILE.components, USER_PROFILE_DATA)
+      const DATA = Utils.Data.setupForm(USER_PROFILE.pages, USER_PROFILE.components, USER_PROFILE_DATA);
       const PAGES = Utils.FormPage.getAll(USER_PROFILE.pages, USER_PROFILE.components, { ...DATA });
       const ON_ACTION = (action, patch, onError) => {
         console.log('action invoked', action, patch);
       };
+      const ON_ROW_ACTION = (page) => {
+        console.log('row action invoked', page);
+      };
+      return (
+        <CheckYourAnswers pages={PAGES} hide_page_titles={true} onAction={ON_ACTION} onRowAction={ON_ROW_ACTION} />
+      );
+    }}
+  </Story>
+</Canvas>
+
+### With actions
+
+<Canvas>
+  <Story name="With actions" parameters={{
+    mockData: [
+      {
+        url: `${USER_PROFILE_DATA.urls.refData}/areYouACivilServant`,
+        method: 'GET',
+        status: 200,
+        response: CIVIL_SERVANT
+      },
+      {
+        url: `${USER_PROFILE_DATA.urls.refData}/grade`,
+        method: 'GET',
+        status: 200,
+        response: GRADE
+      },
+      {
+        url: `${USER_PROFILE_DATA.urls.refData}/team`,
+        method: 'GET',
+        status: 200,
+        response: TEAMS
+      }
+    ]
+  }}>
+    {() => {
+      const DATA = { firstName: 'John', surname: 'Smith', age: 41 };
+      const PAGES = Utils.FormPage.getAll(FIRST_FORM.pages, FIRST_FORM.components, { ...DATA });
+      const ACTIONS = FIRST_FORM.cya.actions;
+      const ON_ACTION = (action, patch, onError) => {
+        console.log('action invoked', action, patch);
+      };
+      const ON_ROW_ACTION = (page) => {
+        console.log('row action invoked', page);
+      };
       return (
-        <CheckYourAnswers pages={PAGES} hide_page_titles={true} onAction={ON_ACTION} />
+        <CheckYourAnswers pages={PAGES} hide_page_titles={true} actions={ACTIONS} onAction={ON_ACTION} onRowAction={ON_ROW_ACTION} />
       );
     }}
   </Story>

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

@@ -62,10 +62,19 @@ describe('components', function () {
 
     var PAGES = _utils.default.FormPage.getAll(_userProfile.default.pages, _userProfile.default.components, _objectSpread({}, DATA));
 
+    var ON_ROW_ACTION_CALLS = [];
+
+    var ON_ROW_ACTION = function ON_ROW_ACTION(row) {
+      ON_ROW_ACTION_CALLS.push(row);
+    };
+
     var ON_ACTION_CALLS = [];
 
-    var ON_ACTION = function ON_ACTION(row) {
-      ON_ACTION_CALLS.push(row);
+    var ON_ACTION = function ON_ACTION(action, onError) {
+      ON_ACTION_CALLS.push({
+        action: action,
+        onError: onError
+      });
     };
 
     var container = null;
@@ -75,6 +84,7 @@ describe('components', function () {
     };
 
     beforeEach(function () {
+      ON_ROW_ACTION_CALLS.length = 0;
       ON_ACTION_CALLS.length = 0;
       container = document.createElement('div');
       document.body.appendChild(container);
@@ -121,6 +131,7 @@ describe('components', function () {
                       case 0:
                         (0, _reactDom.render)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
                           pages: PAGES,
+                          onRowAction: ON_ROW_ACTION,
                           onAction: ON_ACTION
                         }), container);
 
@@ -161,6 +172,7 @@ describe('components', function () {
                         (0, _reactDom.render)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
                           title: TITLE,
                           pages: PAGES,
+                          onRowAction: ON_ROW_ACTION,
                           onAction: ON_ACTION
                         }), container);
 
@@ -200,6 +212,7 @@ describe('components', function () {
                       case 0:
                         (0, _reactDom.render)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
                           pages: PAGES,
+                          onRowAction: ON_ROW_ACTION,
                           onAction: ON_ACTION
                         }), container);
 
@@ -242,6 +255,7 @@ describe('components', function () {
                       case 0:
                         (0, _reactDom.render)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
                           pages: PAGES,
+                          onRowAction: ON_ROW_ACTION,
                           onAction: ON_ACTION
                         }), container);
 
@@ -284,6 +298,7 @@ describe('components', function () {
                       case 0:
                         (0, _reactDom.render)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
                           pages: PAGES,
+                          onRowAction: ON_ROW_ACTION,
                           onAction: ON_ACTION,
                           hide_page_titles: true
                         }), container);

package/dist/components/FormPage/FormPage.js

@@ -79,6 +79,10 @@ var FormPage = function FormPage(_ref) {
     });
   };
 
+  var onError = function onError(errors) {
+    setErrors(errors);
+  };
+
   var classes = _utils.default.classBuilder(classBlock, classModifiers, className);
 
   return /*#__PURE__*/_react.default.createElement("div", {
@@ -86,7 +90,9 @@ var FormPage = function FormPage(_ref) {
     key: page.id
   }, page.title && /*#__PURE__*/_react.default.createElement(_copReactComponents.LargeHeading, null, page.title), errors && errors.length > 0 && /*#__PURE__*/_react.default.createElement(_copReactComponents.ErrorSummary, {
     errors: errors
-  }), page.components.map(function (component, index) {
+  }), page.components.filter(function (c) {
+    return _utils.default.Component.show(c, page.formData);
+  }).map(function (component, index) {
     return /*#__PURE__*/_react.default.createElement(_FormComponent.default, {
       key: index,
       component: component,
@@ -96,7 +102,7 @@ var FormPage = function FormPage(_ref) {
   }), /*#__PURE__*/_react.default.createElement(_PageActions.default, {
     actions: page.actions,
     onAction: function onAction(action) {
-      return _onAction(action, patch, setErrors);
+      return _onAction(action, patch, onError);
     }
   }));
 };

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

@@ -36,7 +36,7 @@ describe('components', function () {
       id: 'pageId',
       title: 'Page 1',
       components: [TEXT],
-      actions: ['submit'],
+      actions: [_models.PageAction.TYPES.SUBMIT],
       formData: {
         text: VALUE
       }
@@ -93,10 +93,10 @@ describe('components', function () {
               expect(input.value).toEqual(VALUE);
               buttonGroup = page.childNodes[2];
               expect(buttonGroup.tagName).toEqual('DIV');
-              expect(buttonGroup.classList).toContain('govuk-button-group');
+              expect(buttonGroup.classList).toContain('hods-button-group');
               button = buttonGroup.childNodes[0];
               expect(button.tagName).toEqual('BUTTON');
-              expect(button.classList).toContain('govuk-button');
+              expect(button.classList).toContain('hods-button');
               expect(button.textContent).toEqual(_ActionButton.DEFAULT_LABEL);
 
             case 31:

package/dist/components/FormRenderer/FormRenderer.js

@@ -111,12 +111,26 @@ var FormRenderer = function FormRenderer(_ref) {
   }, [_hooks, addHook]); // Setup data.
 
   (0, _react.useEffect)(function () {
-    setData(_utils.default.Data.setupForm(_pages, components, _data));
+    if (components && _pages && _data) {
+      var _data$formStatus;
+
+      setData(_utils.default.Data.setupForm(_pages, components, _data));
+
+      if ((_data$formStatus = _data.formStatus) !== null && _data$formStatus !== void 0 && _data$formStatus.page) {
+        setPageId(_data.formStatus.page);
+      }
+    }
   }, [components, _pages, _data, setData]); // Setup pages.
 
   (0, _react.useEffect)(function () {
     setPages(_utils.default.FormPage.getAll(_pages, components, _objectSpread({}, data)));
-  }, [components, _pages, data, setPages]); // Setup hub.
+  }, [components, _pages, data, setPages]); // Setup initial pageId.
+
+  (0, _react.useEffect)(function () {
+    setPageId(function (prev) {
+      return prev || _helpers.default.getNextPageId(type, pages);
+    });
+  }, [type, pages, setPageId]); // Setup hub.
 
   (0, _react.useEffect)(function () {
     setHub(_utils.default.Hub.get(type, _hub, components, _objectSpread({}, data)));
@@ -140,24 +154,30 @@ var FormRenderer = function FormRenderer(_ref) {
     // 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 (_helpers.default.canActionProceed(action, formState.page, onError)) {
-      if (action.type === 'navigate') {
+      if (action.type === _models.PageAction.TYPES.NAVIGATE) {
         _handlers.default.navigate(action, pageId, onPageChange);
       } else {
-        // Submit.
+        // Save draft or submit.
         var submissionData = _utils.default.Format.form({
           pages: pages,
           components: components
         }, _objectSpread(_objectSpread({}, data), patch), _models.EventTypes.SUBMIT);
 
+        submissionData.formStatus = _helpers.default.getSubmissionStatus(type, pages, pageId, action, submissionData);
+
         if (patch) {
           setData(submissionData);
         } // Now submit the data to the backend...
 
 
-        hooks.onSubmit(action.type, submissionData, function () {
-          var nextPageId = _helpers.default.getNextPageId(type, pages, pageId, action);
+        hooks.onSubmit(action.type, submissionData, function (response) {
+          // The backend response may well contain data we need so apply it.
+          setData(function (prev) {
+            var next = _objectSpread(_objectSpread({}, prev), response);
 
-          onPageChange(nextPageId);
+            onPageChange(_helpers.default.getNextPageId(type, pages, pageId, action, next));
+            return next;
+          });
         }, function (errors) {
           _handlers.default.submissionError(errors, onError);
         });
@@ -166,8 +186,32 @@ var FormRenderer = function FormRenderer(_ref) {
   }; // Handle navigation from "Check your answers".
 
 
-  var onCYAAction = function onCYAAction(page) {
+  var onCYARowAction = function onCYARowAction(page) {
     _handlers.default.cyaAction(page, pageId, onPageChange);
+  }; // Handle actions from "Check your answers".
+
+
+  var onCYAAction = function onCYAAction(action, onError) {
+    // 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) {
+      if (_helpers.default.canCYASubmit(pages, onError)) {
+        // 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);
+        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, onError);
+        });
+      }
+    }
   };
 
   var classes = _utils.default.classBuilder(classBlock, classModifiers, className);
@@ -177,7 +221,8 @@ var FormRenderer = function FormRenderer(_ref) {
   }, title && pageId === _models.FormPages.HUB && /*#__PURE__*/_react.default.createElement(_copReactComponents.LargeHeading, null, title), formState.cya && /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, _extends({
     pages: pages
   }, cya, formState.cya, {
-    onAction: onCYAAction
+    onAction: onCYAAction,
+    onRowAction: onCYARowAction
   })), formState.page && /*#__PURE__*/_react.default.createElement(_FormPage.default, {
     page: formState.page,
     onAction: onPageAction

package/dist/components/FormRenderer/FormRenderer.stories.mdx

@@ -1,6 +1,7 @@
 <!-- Global imports -->
 import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
-import { Details, Heading, Link } from '@ukhomeoffice/cop-react-components';
+import { Button, Details, Heading, Link, Panel } from '@ukhomeoffice/cop-react-components';
+import { useState } from 'react';
 import withMock from 'storybook-addon-mock';
 
 <!-- Local imports -->
@@ -9,11 +10,11 @@ import FormRenderer from './FormRenderer';
 
 <!-- JSON documents -->
 import CIVIL_SERVANT from '../../json/areYouACivilServant.json';
+import FIRST_FORM from '../../json/firstForm.json';
 import GRADE from '../../json/grade.json';
 import TEAMS from '../../json/team.json';
 import USER_PROFILE_DATA from '../../json/userProfile.data.json';
 import USER_PROFILE from '../../json/userProfile.json';
-import SAVE_AND_CONTINUE from '../../json/saveAndContinue.json';
 
 <Meta title="Components/Form renderer" id="D-FormRenderer" component={ FormRenderer } decorators={[withMock]} />
 
@@ -57,11 +58,13 @@ on the basis of a <Link href="/?path=/docs/f-json-form">JSON</Link> that describ
   <ArgsTable of={ FormRenderer } />
 </Details>
 
-## Custom hooks
+## CYA type
 
 <Canvas>
-  <Story name="Save and continue">
+  <Story name="CYA">
     {() => {
+      const [complete, setComplete] = useState(false);
+      const [returnLater, setReturnLater] = useState(false);
       addHook('onRequest', (req) => {
         // Do whatever you need to do to the request in here, such as adding an Authorization header.
         console.log('onRequest hook called');
@@ -70,20 +73,42 @@ on the basis of a <Link href="/?path=/docs/f-json-form">JSON</Link> that describ
       addHook('onFormLoad', () => {
         console.log('onFormLoad called');
       });
+      addHook('onFormComplete', () => {
+        console.log('onFormComplete called');
+        setComplete(true);
+      });
       addHook('onPageChange', (pageId) => {
         console.log('onPageChange called', pageId);
+        setReturnLater(!!pageId === false);
       });
-      
-      /**
-       * In whatever consumes this, do it as:
-       *   intercepts.add('onSubmit', (...) => { ... })
-       */
       addHook('onSubmit', (type, payload, onSuccess, onError) => {
         console.log('onSubmit called of type', type, 'called, with the payload', payload);
         onSuccess();
       });
+      const reset = () => {
+        setComplete(false);
+        setReturnLater(false);
+      };
       return (
-        <FormRenderer {...SAVE_AND_CONTINUE} data={{}} />
+        <>
+        {!complete && !returnLater && <FormRenderer {...FIRST_FORM} data={{}} />}
+        {complete &&
+          <div>
+            <Panel title="Submission successful">
+              Your submission was successful.
+            </Panel>
+            <Button onClick={() => reset()}>Start again</Button>
+          </div>
+        }
+        {!complete && returnLater &&
+          <div>
+            <Panel title="Saved to return later">
+              You clicked on "Save and return later".
+            </Panel>
+            <Button onClick={() => reset()}>Start again</Button>
+          </div>
+        }
+        </>
       );
     }}
   </Story>

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

@@ -2,18 +2,24 @@
 
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
+var _react = require("@testing-library/react");
+
 var _axios = _interopRequireDefault(require("axios"));
 
 var _axiosMockAdapter = _interopRequireDefault(require("axios-mock-adapter"));
 
-var _react = _interopRequireDefault(require("react"));
-
-var _react2 = require("@testing-library/react");
+var _react2 = _interopRequireDefault(require("react"));
 
 var _reactDom = require("react-dom");
 
 var _testUtils = require("react-dom/test-utils");
 
+var _models = require("../../models");
+
+var _CheckYourAnswers = require("../CheckYourAnswers/CheckYourAnswers");
+
+var _FormRenderer = _interopRequireWildcard(require("./FormRenderer"));
+
 var _areYouACivilServant = _interopRequireDefault(require("../../json/areYouACivilServant.json"));
 
 var _grade = _interopRequireDefault(require("../../json/grade.json"));
@@ -24,10 +30,6 @@ var _userProfileData = _interopRequireDefault(require("../../json/userProfile.da
 
 var _userProfile = _interopRequireDefault(require("../../json/userProfile.json"));
 
-var _FormRenderer = _interopRequireWildcard(require("./FormRenderer"));
-
-var _CheckYourAnswers = require("../CheckYourAnswers/CheckYourAnswers");
-
 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); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -105,7 +107,7 @@ describe('components', function () {
                   while (1) {
                     switch (_context.prev = _context.next) {
                       case 0:
-                        (0, _reactDom.render)( /*#__PURE__*/_react.default.createElement(_FormRenderer.default, _extends({}, _userProfile.default, {
+                        (0, _reactDom.render)( /*#__PURE__*/_react2.default.createElement(_FormRenderer.default, _extends({}, _userProfile.default, {
                           data: _userProfileData.default
                         })), container);
 
@@ -156,7 +158,7 @@ describe('components', function () {
                   while (1) {
                     switch (_context3.prev = _context3.next) {
                       case 0:
-                        (0, _reactDom.render)( /*#__PURE__*/_react.default.createElement(_FormRenderer.default, _extends({}, _userProfile.default, {
+                        (0, _reactDom.render)( /*#__PURE__*/_react2.default.createElement(_FormRenderer.default, _extends({}, _userProfile.default, {
                           data: _userProfileData.default,
                           hooks: HOOKS
                         })), container);
@@ -201,7 +203,7 @@ describe('components', function () {
                   while (1) {
                     switch (_context5.prev = _context5.next) {
                       case 0:
-                        (0, _reactDom.render)( /*#__PURE__*/_react.default.createElement(_FormRenderer.default, _extends({}, _userProfile.default, {
+                        (0, _reactDom.render)( /*#__PURE__*/_react2.default.createElement(_FormRenderer.default, _extends({}, _userProfile.default, {
                           data: _userProfileData.default,
                           hooks: HOOKS
                         })), container);
@@ -222,7 +224,7 @@ describe('components', function () {
               link = getChangeLink(civilServantList);
               expect(ON_PAGE_CHANGE_CALLS.length).toEqual(0);
 
-              _react2.fireEvent.click(link, {});
+              _react.fireEvent.click(link, {});
 
               expect(ON_PAGE_CHANGE_CALLS.length).toEqual(1);
               expect(ON_PAGE_CHANGE_CALLS[0]).toEqual(_userProfile.default.pages[1].id); // The form layout should have changed to the current page.
@@ -269,7 +271,7 @@ describe('components', function () {
                   while (1) {
                     switch (_context7.prev = _context7.next) {
                       case 0:
-                        (0, _reactDom.render)( /*#__PURE__*/_react.default.createElement(_FormRenderer.default, _extends({}, _userProfile.default, {
+                        (0, _reactDom.render)( /*#__PURE__*/_react2.default.createElement(_FormRenderer.default, _extends({}, _userProfile.default, {
                           data: _userProfileData.default,
                           hooks: HOOKS
                         })), container);
@@ -290,17 +292,17 @@ describe('components', function () {
               _hub$childNodes2 = _slicedToArray(hub.childNodes, 3), civilServantList = _hub$childNodes2[2];
               link = getChangeLink(civilServantList);
 
-              _react2.fireEvent.click(link, {}); // Should already be answered "Yes", so simply click "Continue".
+              _react.fireEvent.click(link, {}); // Should already be answered "Yes", so simply click "Continue".
 
 
               page = form.childNodes[0];
               continueButton = getContinueButton(page);
               expect(ON_SUBMIT_CALLS.length).toEqual(0);
 
-              _react2.fireEvent.click(continueButton, {});
+              _react.fireEvent.click(continueButton, {});
 
               expect(ON_SUBMIT_CALLS.length).toEqual(1);
-              expect(ON_SUBMIT_CALLS[0].type).toEqual('submit');
+              expect(ON_SUBMIT_CALLS[0].type).toEqual(_models.PageAction.TYPES.SUBMIT);
               expect(ON_SUBMIT_CALLS[0].payload.areYouACivilServant).toEqual('yes'); // And we should be back on the hub.
 
               expect(form.childNodes.length).toEqual(2); // Title + Hub page (= CYA)
@@ -347,7 +349,7 @@ describe('components', function () {
                   while (1) {
                     switch (_context9.prev = _context9.next) {
                       case 0:
-                        (0, _reactDom.render)( /*#__PURE__*/_react.default.createElement(_FormRenderer.default, _extends({}, _userProfile.default, {
+                        (0, _reactDom.render)( /*#__PURE__*/_react2.default.createElement(_FormRenderer.default, _extends({}, _userProfile.default, {
                           data: _userProfileData.default,
                           hooks: HOOKS
                         })), container);
@@ -368,17 +370,17 @@ describe('components', function () {
               _hub$childNodes3 = _slicedToArray(hub.childNodes, 3), civilServantList = _hub$childNodes3[2];
               link = getChangeLink(civilServantList);
 
-              _react2.fireEvent.click(link, {}); // Should already be answered "Yes", so simply click "Continue".
+              _react.fireEvent.click(link, {}); // Should already be answered "Yes", so simply click "Continue".
 
 
               page = form.childNodes[0];
               continueButton = getContinueButton(page);
               expect(ON_SUBMIT_CALLS.length).toEqual(0);
 
-              _react2.fireEvent.click(continueButton, {});
+              _react.fireEvent.click(continueButton, {});
 
               expect(ON_SUBMIT_CALLS.length).toEqual(1);
-              expect(ON_SUBMIT_CALLS[0].type).toEqual('submit');
+              expect(ON_SUBMIT_CALLS[0].type).toEqual(_models.PageAction.TYPES.SUBMIT);
               expect(ON_SUBMIT_CALLS[0].payload.areYouACivilServant).toEqual('yes'); // And we should be kept on the same page.
 
               expect(form.childNodes.length).toEqual(1); // Just the page.
@@ -416,7 +418,7 @@ describe('components', function () {
                   while (1) {
                     switch (_context11.prev = _context11.next) {
                       case 0:
-                        (0, _reactDom.render)( /*#__PURE__*/_react.default.createElement(_FormRenderer.default, _extends({}, _userProfile.default, {
+                        (0, _reactDom.render)( /*#__PURE__*/_react2.default.createElement(_FormRenderer.default, _extends({}, _userProfile.default, {
                           data: _userProfileData.default,
                           hooks: HOOKS
                         })), container);
@@ -438,7 +440,7 @@ describe('components', function () {
               link = getChangeLink(lineManagerList);
               expect(ON_PAGE_CHANGE_CALLS.length).toEqual(0);
 
-              _react2.fireEvent.click(link, {});
+              _react.fireEvent.click(link, {});
 
               expect(ON_PAGE_CHANGE_CALLS[0]).toEqual(_userProfile.default.pages[4].id); // Should be on the page explaining what changing the line manager means.
 
@@ -450,7 +452,7 @@ describe('components', function () {
               continueButton = getContinueButton(page);
               expect(ON_PAGE_CHANGE_CALLS.length).toEqual(1);
 
-              _react2.fireEvent.click(continueButton, {});
+              _react.fireEvent.click(continueButton, {});
 
               expect(ON_PAGE_CHANGE_CALLS.length).toEqual(2);
               expect(ON_PAGE_CHANGE_CALLS[1]).toEqual(_userProfile.default.pages[5].id);