@ukhomeoffice/cop-react-form-renderer 0.1.0-gamma → 1.0.0-alpha

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

@@ -6,6 +6,8 @@ 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"));
@@ -171,7 +173,7 @@ describe('components', function () {
 
               expect(ON_ACTION_CALLS.length).toEqual(1);
               expect(PAGE.formData.text).toEqual(NEW_VALUE);
-              expect(ON_ACTION_CALLS[0].action).toEqual(_ActionButton.DEFAULT_ACTIONS.submit);
+              expect(ON_ACTION_CALLS[0].action).toEqual(_models.PageAction.DEFAULTS.submit);
               expect(ON_ACTION_CALLS[0].patch).toEqual({
                 text: NEW_VALUE
               });

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");
 
@@ -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,7 +64,7 @@ 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,
       classBlock = _ref.classBlock,
@@ -74,30 +77,25 @@ 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, _hooks2.useHooks)(),
@@ -118,75 +116,95 @@ 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, _objectSpread({}, data)));
   }, [type, _hub, data, components, setHub]); // Form state.
 
   (0, _react.useEffect)(function () {
-    setFormState((0, _helpers.getFormState)(pageId, pages, hub));
+    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]); // Handle actions from pages.
+  }, [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') {
-        var newPageId = action.url.replace('/', '');
-        setPageId(newPageId);
-        hooks.onPageChange(newPageId);
-      } else if (action.type === 'cancel') {
-        setRedoPages(Date.now);
-        setPageId('hub');
-        hooks.onPageChange('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);
-          });
+          setData(submissionData);
         } // Now submit the data to the backend...
 
 
-        hooks.onSubmit(action.type, _objectSpread(_objectSpread({}, data), patch), function () {
-          setPageId('hub');
-          hooks.onPageChange('hub');
+        hooks.onSubmit(action.type, submissionData, function () {
+          var nextPageId = _helpers.default.getNextPageId(type, pages, pageId, action);
+
+          onPageChange(nextPageId);
         }, function (errors) {
-          // Handle the errors.
-          console.error('Submission errors', errors);
+          _handlers.default.submissionError(errors, onError);
         });
       }
     }
   }; // Handle navigation from "Check your answers".
 
 
-  var onCheckYourAnswerChange = function onCheckYourAnswerChange(page) {
-    var action = page.action;
-    var newPageId = page.pageId;
+  var onCYARowAction = function onCYARowAction(page) {
+    _handlers.default.cyaAction(page, pageId, onPageChange);
+  }; // Handle actions from "Check your answers".
 
-    if (action && action.href) {
-      newPageId = action.href.replace('/', '');
-    }
 
-    setPageId(newPageId);
-    hooks.onPageChange(newPageId);
+  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);
+
+        setData(submissionData); // Now submit the data to the backend...
+
+        hooks.onSubmit(action.type, submissionData, function () {
+          hooks.onFormComplete();
+        }, function (errors) {
+          _handlers.default.submissionError(errors, onError);
+        });
+      }
+    }
   };
 
   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,
+    onRowAction: onCYARowAction
   })), formState.page && /*#__PURE__*/_react.default.createElement(_FormPage.default, {
     page: formState.page,
-    onAction: onAction
+    onAction: onPageAction
   }));
 };
 
@@ -201,7 +219,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)]),

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,17 +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>