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

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,46 +116,85 @@ 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 () {
-    setHub(_utils.default.Hub.get(type, _hub, components));
-  }, [type, _hub, components, setHub]); // Form state.
+    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 () {
-    setFormState((0, _helpers.getFormState)(pageId, pages, hub));
-  }, [pages, hub, pageId, setFormState]); // Handle actions from pages.
+    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(submissionData);
+        } // Now submit the data to the backend...
+
+
+        hooks.onSubmit(action.type, submissionData, function (response) {
+          // The backend response may well contain data we need so apply it.
           setData(function (prev) {
-            return _objectSpread(_objectSpread({}, prev), patch);
+            return _objectSpread(_objectSpread({}, prev), response);
           });
-        } // Now submit the data to the backend and, if that succeeds...
 
+          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;
+  var onCYARowAction = function onCYARowAction(page) {
+    _handlers.default.cyaAction(page, pageId, onPageChange);
+  }; // Handle actions from "Check your answers".
 
-    if (action && action.href) {
-      setPageId(action.href.replace('/', ''));
-    } else {
-      setPageId(page.pageId);
+
+  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);
+        });
+      }
     }
   };
 
@@ -164,14 +202,14 @@ var FormRenderer = function FormRenderer(_ref) {
 
   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,
-    classes: classes
+    onAction: onPageAction
   }));
 };
 
@@ -186,7 +224,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

@@ -0,0 +1,115 @@
+<!-- Global imports -->
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Button, Details, Heading, Link, Panel } from '@ukhomeoffice/cop-react-components';
+import { useState } from 'react';
+import withMock from 'storybook-addon-mock';
+
+<!-- Local imports -->
+import { addHook } from '../../hooks/useHooks';
+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';
+
+<Meta title="Components/Form renderer" id="D-FormRenderer" component={ FormRenderer } decorators={[withMock]} />
+
+<Heading size="xl" caption="Components">Form renderer</Heading>
+
+Renders 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-form">JSON</Link> that describes which elements are required.
+
+<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
+      }
+    ]
+  }}>
+    {() => {
+      return (
+        <FormRenderer {...USER_PROFILE} data={USER_PROFILE_DATA} />
+      );
+    }}
+  </Story>
+</Canvas>
+
+<Details summary="Properties" className="no-indent">
+  <ArgsTable of={ FormRenderer } />
+</Details>
+
+## CYA type
+
+<Canvas>
+  <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');
+        return req;
+      });
+      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);
+      });
+      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 (
+        <>
+        {!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>
+</Canvas>