@ukhomeoffice/cop-react-form-renderer 0.1.0-beta → 1.0.0-delta

package/dist/components/FormPage/FormPage.js

@@ -5,28 +5,28 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.DEFAULT_CLASS = void 0;
 
-var _react = _interopRequireWildcard(require("react"));
+var _copReactComponents = require("@ukhomeoffice/cop-react-components");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _copReactComponents = require("@ukhomeoffice/cop-react-components");
+var _react = _interopRequireWildcard(require("react"));
+
+var _utils = _interopRequireDefault(require("../../utils"));
 
 var _FormComponent = _interopRequireDefault(require("../FormComponent"));
 
 var _PageActions = _interopRequireDefault(require("../PageActions"));
 
-var _utils = _interopRequireDefault(require("../../utils"));
-
 require("./FormPage.scss");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 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; }
 
+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); 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; }
@@ -46,6 +46,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var DEFAULT_CLASS = 'hods-form';
+exports.DEFAULT_CLASS = DEFAULT_CLASS;
 
 var FormPage = function FormPage(_ref) {
   var page = _ref.page,
@@ -89,10 +90,10 @@ var FormPage = function FormPage(_ref) {
     return /*#__PURE__*/_react.default.createElement(_FormComponent.default, {
       key: index,
       component: component,
-      value: page.formData[component.fieldId] || '',
-      onChange: onPageChange
+      onChange: onPageChange,
+      value: page.formData[component.fieldId] || ''
     });
-  }), page.actions && /*#__PURE__*/_react.default.createElement(_PageActions.default, {
+  }), /*#__PURE__*/_react.default.createElement(_PageActions.default, {
     actions: page.actions,
     onAction: function onAction(action) {
       return _onAction(action, patch, setErrors);
@@ -106,7 +107,7 @@ FormPage.propTypes = {
     title: _propTypes.default.string,
     components: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object])).isRequired,
     actions: _propTypes.default.array,
-    formData: _propTypes.default.object
+    formData: _propTypes.default.object.isRequired
   }).isRequired,
   onAction: _propTypes.default.func.isRequired,
   classBlock: _propTypes.default.string,

package/dist/components/FormPage/FormPage.stories.mdx

@@ -0,0 +1,118 @@
+<!-- Global imports -->
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Details, Heading, Link } from '@ukhomeoffice/cop-react-components';
+import withMock from 'storybook-addon-mock';
+
+<!-- Local imports -->
+import Utils from '../../utils';
+import FormPage from './FormPage';
+
+<!-- JSON documents -->
+import CIVIL_SERVANT from '../../json/areYouACivilServant.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';
+
+<Meta title="Components/Form page" id="D-FormPage" component={ FormPage } decorators={[withMock]} />
+
+<Heading size="xl" caption="Components">Form page</Heading>
+
+Renders a page on a form with <Link href="https://ukhomeoffice.github.io/cop-react-components/?path=/docs/d-alert--default-story">COP React components</Link>,
+on the basis of a <Link href="/?path=/docs/f-json-page">JSON</Link> configuration.
+
+<Canvas withToolbar>
+  <Story name="Default" 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 PAGE_JSON = USER_PROFILE.pages.find(p => p.id === 'civil-servant-status');
+      const PAGE = Utils.FormPage.get(PAGE_JSON, USER_PROFILE.components, { ...USER_PROFILE_DATA });
+      const ON_ACTION = (action, patch, onError) => {
+        console.log('action invoked', action, patch);
+      };
+      return (
+        <FormPage page={PAGE} onAction={ON_ACTION} />
+      );
+    }}
+  </Story>
+</Canvas>
+
+<Details summary="Properties" className="no-indent">
+  <ArgsTable of={ FormPage } />
+</Details>
+
+
+## Variants
+### With `autocomplete`
+<Canvas>
+  <Story name="With autocomplete" 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 PAGE_JSON = USER_PROFILE.pages.find(p => p.id === 'team-name');
+      const PAGE = Utils.FormPage.get(PAGE_JSON, USER_PROFILE.components, { ...USER_PROFILE_DATA });
+      const ON_ACTION = (action, patch, onError) => {
+        console.log('action invoked', action, patch);
+      };
+      return (
+        <FormPage page={PAGE} onAction={ON_ACTION} />
+      );
+    }}
+  </Story>
+</Canvas>
+
+### Without editable controls
+
+<Canvas>
+  <Story name="Without editable controls">
+    {() => {
+      const PAGE_JSON = USER_PROFILE.pages.find(p => p.id === 'add-or-change-line-manager');
+      const PAGE = Utils.FormPage.get(PAGE_JSON, USER_PROFILE.components, { ...USER_PROFILE_DATA });
+      const ON_ACTION = (action, patch, onError) => {
+        console.log('action invoked', action, patch);
+      };
+      return (
+        <FormPage page={PAGE} onAction={ON_ACTION} />
+      );
+    }}
+  </Story>
+</Canvas>

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

@@ -0,0 +1,255 @@
+"use strict";
+
+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 _react2 = _interopRequireDefault(require("react"));
+
+var _models = require("../../models");
+
+var _ActionButton = require("../PageActions/ActionButton");
+
+var _FormPage = _interopRequireWildcard(require("./FormPage"));
+
+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; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+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); }); }; }
+
+describe('components', function () {
+  describe('FormPage', function () {
+    var TEXT = {
+      id: 'text',
+      fieldId: 'text',
+      type: 'text',
+      label: 'Text component',
+      hint: 'Text hint'
+    };
+    var VALUE = 'Text value';
+    var PAGE = {
+      id: 'pageId',
+      title: 'Page 1',
+      components: [TEXT],
+      actions: ['submit'],
+      formData: {
+        text: VALUE
+      }
+    };
+    var ON_ACTION_CALLS = [];
+
+    var ON_ACTION = function ON_ACTION(action, patch, onError) {
+      ON_ACTION_CALLS.push({
+        action: action,
+        patch: patch,
+        onError: onError
+      });
+    };
+
+    beforeEach(function () {
+      PAGE.formData = {
+        text: VALUE
+      };
+      ON_ACTION_CALLS.length = 0;
+    });
+    it('should render a submit page correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+      var _render, container, page, heading, formGroup, label, hint, input, buttonGroup, button;
+
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _render = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_FormPage.default, {
+                page: PAGE,
+                onAction: ON_ACTION
+              })), container = _render.container;
+              page = container.childNodes[0];
+              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(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('govuk-button-group');
+              button = buttonGroup.childNodes[0];
+              expect(button.tagName).toEqual('BUTTON');
+              expect(button.classList).toContain('govuk-button');
+              expect(button.textContent).toEqual(_ActionButton.DEFAULT_LABEL);
+
+            case 31:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    })));
+    it('should handle a page change appropriately', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+      var _render2, container, page, input, NEW_VALUE, EVENT;
+
+      return regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              _render2 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_FormPage.default, {
+                page: PAGE,
+                onAction: ON_ACTION
+              })), container = _render2.container;
+              page = container.childNodes[0];
+              expect(page.tagName).toEqual('DIV'); // Change the input.
+
+              input = page.childNodes[1].childNodes[2];
+              NEW_VALUE = "".concat(VALUE, ".");
+              EVENT = {
+                target: {
+                  name: TEXT.fieldId,
+                  value: NEW_VALUE
+                }
+              };
+
+              _react.fireEvent.change(input, EVENT); // And confirm the formData has been changed.
+
+
+              expect(PAGE.formData.text).toEqual(NEW_VALUE);
+
+            case 8:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    })));
+    it('should handle a page action appropriately', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
+      var _render3, container, page, input, NEW_VALUE, CHANGE_EVENT, button;
+
+      return regeneratorRuntime.wrap(function _callee3$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              _render3 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_FormPage.default, {
+                page: PAGE,
+                onAction: ON_ACTION
+              })), container = _render3.container;
+              page = container.childNodes[0]; // Change the input.
+
+              input = page.childNodes[1].childNodes[2];
+              NEW_VALUE = "".concat(VALUE, ".");
+              CHANGE_EVENT = {
+                target: {
+                  name: TEXT.fieldId,
+                  value: NEW_VALUE
+                }
+              };
+
+              _react.fireEvent.change(input, CHANGE_EVENT); // Then click the action button.
+
+
+              button = page.childNodes[2].childNodes[0];
+
+              _react.fireEvent.click(button, {}); // And confirm an appropriate action was received.
+
+
+              expect(ON_ACTION_CALLS.length).toEqual(1);
+              expect(PAGE.formData.text).toEqual(NEW_VALUE);
+              expect(ON_ACTION_CALLS[0].action).toEqual(_models.PageAction.DEFAULTS.submit);
+              expect(ON_ACTION_CALLS[0].patch).toEqual({
+                text: NEW_VALUE
+              });
+
+            case 12:
+            case "end":
+              return _context3.stop();
+          }
+        }
+      }, _callee3);
+    })));
+    it('should display errors appropriately', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
+      var ERRORS, THROW_ERROR_ON_ACTION, _render4, container, page, input, NEW_VALUE, CHANGE_EVENT, button, errorSummary, errorList, error, errorLink;
+
+      return regeneratorRuntime.wrap(function _callee4$(_context4) {
+        while (1) {
+          switch (_context4.prev = _context4.next) {
+            case 0:
+              ERRORS = [{
+                id: TEXT.id,
+                error: 'Invalid value'
+              }];
+
+              THROW_ERROR_ON_ACTION = function THROW_ERROR_ON_ACTION(action, patch, onError) {
+                ON_ACTION_CALLS.push({
+                  action: action,
+                  patch: patch,
+                  onError: onError
+                });
+                onError(ERRORS);
+              };
+
+              _render4 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_FormPage.default, {
+                page: PAGE,
+                onAction: THROW_ERROR_ON_ACTION
+              })), container = _render4.container;
+              page = container.childNodes[0]; // Change the input.
+
+              input = page.childNodes[1].childNodes[2];
+              NEW_VALUE = "".concat(VALUE, ".");
+              CHANGE_EVENT = {
+                target: {
+                  name: TEXT.fieldId,
+                  value: NEW_VALUE
+                }
+              };
+
+              _react.fireEvent.change(input, CHANGE_EVENT); // Then click the action button, which should call the onError callback method.
+
+
+              button = page.childNodes[2].childNodes[0];
+
+              _react.fireEvent.click(button, {}); // And confirm the page error is now displayed.
+
+
+              errorSummary = page.childNodes[1];
+              expect(errorSummary.tagName).toEqual('DIV');
+              expect(errorSummary.id).toEqual('error-summary');
+              expect(errorSummary.classList).toContain('govuk-error-summary');
+              errorList = errorSummary.childNodes[1].childNodes[0];
+              expect(errorList.tagName).toEqual('UL');
+              expect(errorList.classList).toContain('govuk-error-summary__list');
+              expect(errorList.childNodes.length).toEqual(ERRORS.length);
+              error = errorList.childNodes[0];
+              expect(error.tagName).toEqual('LI');
+              errorLink = error.childNodes[0];
+              expect(errorLink.tagName).toEqual('A');
+              expect(errorLink.textContent).toEqual(ERRORS[0].error);
+              expect(errorLink.getAttribute('href')).toEqual("#".concat(ERRORS[0].id));
+
+            case 24:
+            case "end":
+              return _context4.stop();
+          }
+        }
+      }, _callee4);
+    })));
+  });
+});

package/dist/components/FormRenderer/FormRenderer.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.DEFAULT_CLASS = void 0;
 
 var _copReactComponents = require("@ukhomeoffice/cop-react-components");
 
@@ -13,7 +13,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _hooks = require("../../hooks");
+var _hooks2 = require("../../hooks");
 
 var _models = require("../../models");
 
@@ -23,7 +23,9 @@ var _CheckYourAnswers = _interopRequireDefault(require("../CheckYourAnswers"));
 
 var _FormPage = _interopRequireDefault(require("../FormPage"));
 
-var _helpers = require("./helpers");
+var _handlers = _interopRequireDefault(require("./handlers"));
+
+var _helpers = _interopRequireDefault(require("./helpers"));
 
 require("./FormRenderer.scss");
 
@@ -54,6 +56,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var DEFAULT_CLASS = 'hods-form';
+exports.DEFAULT_CLASS = DEFAULT_CLASS;
 
 var FormRenderer = function FormRenderer(_ref) {
   var title = _ref.title,
@@ -61,9 +64,9 @@ var FormRenderer = function FormRenderer(_ref) {
       components = _ref.components,
       _pages = _ref.pages,
       _hub = _ref.hub,
-      _cya = _ref.cya,
+      cya = _ref.cya,
       _data = _ref.data,
-      hooks = _ref.hooks,
+      _hooks = _ref.hooks,
       classBlock = _ref.classBlock,
       classModifiers = _ref.classModifiers,
       className = _ref.className;
@@ -74,42 +77,38 @@ var FormRenderer = function FormRenderer(_ref) {
       data = _useState2[0],
       setData = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(0),
+  var _useState3 = (0, _react.useState)([]),
       _useState4 = _slicedToArray(_useState3, 2),
-      redoPages = _useState4[0],
-      setRedoPages = _useState4[1];
+      pages = _useState4[0],
+      setPages = _useState4[1];
 
-  var _useState5 = (0, _react.useState)([]),
+  var _useState5 = (0, _react.useState)(undefined),
       _useState6 = _slicedToArray(_useState5, 2),
-      pages = _useState6[0],
-      setPages = _useState6[1];
+      hub = _useState6[0],
+      setHub = _useState6[1];
 
-  var _useState7 = (0, _react.useState)(undefined),
+  var _useState7 = (0, _react.useState)(_helpers.default.getNextPageId(type, _pages)),
       _useState8 = _slicedToArray(_useState7, 2),
-      hub = _useState8[0],
-      setHub = _useState8[1];
+      pageId = _useState8[0],
+      setPageId = _useState8[1];
 
-  var _useState9 = (0, _react.useState)('hub'),
+  var _useState9 = (0, _react.useState)(_helpers.default.getFormState(pageId, pages, hub)),
       _useState10 = _slicedToArray(_useState9, 2),
-      pageId = _useState10[0],
-      setPageId = _useState10[1];
-
-  var _useState11 = (0, _react.useState)((0, _helpers.getFormState)(pageId, pages, hub)),
-      _useState12 = _slicedToArray(_useState11, 2),
-      formState = _useState12[0],
-      setFormState = _useState12[1]; // Set up hooks.
+      formState = _useState10[0],
+      setFormState = _useState10[1]; // Set up hooks.
 
 
-  var _useHooks = (0, _hooks.useHooks)(),
+  var _useHooks = (0, _hooks2.useHooks)(),
+      hooks = _useHooks.hooks,
       addHook = _useHooks.addHook;
 
   (0, _react.useEffect)(function () {
-    if (hooks) {
-      Object.keys(hooks).forEach(function (key) {
-        addHook(key, hooks[key]);
+    if (_hooks) {
+      Object.keys(_hooks).forEach(function (key) {
+        addHook(key, _hooks[key]);
       });
     }
-  }, [hooks, addHook]); // Setup data.
+  }, [_hooks, addHook]); // Setup data.
 
   (0, _react.useEffect)(function () {
     setData(_utils.default.Data.setupForm(_pages, components, _data));
@@ -117,61 +116,71 @@ var FormRenderer = function FormRenderer(_ref) {
 
   (0, _react.useEffect)(function () {
     setPages(_utils.default.FormPage.getAll(_pages, components, _objectSpread({}, data)));
-  }, [components, _pages, data, redoPages, setPages]); // Setup hub.
+  }, [components, _pages, data, setPages]); // Setup hub.
 
   (0, _react.useEffect)(function () {
-    setHub(_utils.default.Hub.get(type, _hub, components));
-  }, [type, _hub, components, setHub]); // Form state.
+    setHub(_utils.default.Hub.get(type, _hub, components, _objectSpread({}, data)));
+  }, [type, _hub, data, components, setHub]); // Form state.
 
   (0, _react.useEffect)(function () {
-    setFormState((0, _helpers.getFormState)(pageId, pages, hub));
-  }, [pages, hub, pageId, setFormState]); // Handle actions from pages.
+    setFormState(_helpers.default.getFormState(pageId, pages, hub));
+  }, [pages, hub, pageId, setFormState]); // Call the onFormLoad hook just when this component first renders.
+
+  (0, _react.useEffect)(function () {
+    hooks.onFormLoad();
+  }, [hooks]);
+
+  var onPageChange = function onPageChange(newPageId) {
+    setPageId(newPageId);
+    hooks.onPageChange(newPageId);
+  }; // Handle actions from pages.
 
-  var onAction = function onAction(action, patch, onError) {
-    // First check the validity of the
-    if ((0, _helpers.canActionProceed)(action, formState.page, onError)) {
+
+  var onPageAction = function onPageAction(action, patch, 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 (_helpers.default.canActionProceed(action, formState.page, onError)) {
       if (action.type === 'navigate') {
-        setPageId(action.url.replace('/', ''));
-      } else if (action.type === 'cancel') {
-        setRedoPages(Date.now);
-        setPageId('hub');
+        _handlers.default.navigate(action, pageId, onPageChange);
       } else {
         // Submit.
+        var submissionData = _utils.default.Format.form({
+          pages: pages,
+          components: components
+        }, _objectSpread(_objectSpread({}, data), patch), _models.EventTypes.SUBMIT);
+
         if (patch) {
-          setData(function (prev) {
-            return _objectSpread(_objectSpread({}, prev), patch);
-          });
-        } // Now submit the data to the backend and, if that succeeds...
+          setData(submissionData);
+        } // Now submit the data to the backend...
+
 
+        hooks.onSubmit(action.type, submissionData, function () {
+          var nextPageId = _helpers.default.getNextPageId(type, pages, pageId, action);
 
-        setPageId('hub');
+          onPageChange(nextPageId);
+        }, function (errors) {
+          _handlers.default.submissionError(errors, onError);
+        });
       }
     }
   }; // Handle navigation from "Check your answers".
 
 
-  var onCheckYourAnswerChange = function onCheckYourAnswerChange(page) {
-    var action = page.action;
-
-    if (action && action.href) {
-      setPageId(action.href.replace('/', ''));
-    } else {
-      setPageId(page.pageId);
-    }
+  var onCYAAction = function onCYAAction(page) {
+    _handlers.default.cyaAction(page, pageId, onPageChange);
   };
 
   var classes = _utils.default.classBuilder(classBlock, classModifiers, className);
 
   return /*#__PURE__*/_react.default.createElement("div", {
     className: classes()
-  }, title && pageId === 'hub' && /*#__PURE__*/_react.default.createElement(_copReactComponents.LargeHeading, null, title), formState.cya && /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, _extends({
+  }, 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: onCheckYourAnswerChange
+  }, cya, formState.cya, {
+    onAction: onCYAAction
   })), formState.page && /*#__PURE__*/_react.default.createElement(_FormPage.default, {
     page: formState.page,
-    onAction: onAction,
-    classes: classes
+    onAction: onPageAction
   }));
 };
 
@@ -186,7 +195,10 @@ FormRenderer.propTypes = {
   cya: _propTypes.default.object,
   data: _propTypes.default.object,
   hooks: _propTypes.default.shape({
-    onRequest: _propTypes.default.func
+    onFormLoad: _propTypes.default.func,
+    onPageChange: _propTypes.default.func,
+    onRequest: _propTypes.default.func,
+    onSubmit: _propTypes.default.func
   }),
   classBlock: _propTypes.default.string,
   classModifiers: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),