@ukhomeoffice/cop-react-form-renderer 1.0.0 → 2.2.0

package/dist/components/FormRenderer/FormRenderer.js

@@ -69,7 +69,10 @@ var FormRenderer = function FormRenderer(_ref) {
       _hooks = _ref.hooks,
       classBlock = _ref.classBlock,
       classModifiers = _ref.classModifiers,
-      className = _ref.className;
+      className = _ref.className,
+      hide_title = _ref.hide_title,
+      summaryListClassModifiers = _ref.summaryListClassModifiers,
+      noChangeAction = _ref.noChangeAction;
 
   // Set up the initial states.
   var _useState = (0, _react.useState)({}),
@@ -111,12 +114,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)));
@@ -143,12 +160,14 @@ var FormRenderer = function FormRenderer(_ref) {
       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...
@@ -157,12 +176,11 @@ var FormRenderer = function FormRenderer(_ref) {
         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), response);
-          });
+            var next = _objectSpread(_objectSpread({}, prev), response);
 
-          var nextPageId = _helpers.default.getNextPageId(type, pages, pageId, action);
-
-          onPageChange(nextPageId);
+            onPageChange(_helpers.default.getNextPageId(type, pages, pageId, action, next));
+            return next;
+          });
         }, function (errors) {
           _handlers.default.submissionError(errors, onError);
         });
@@ -187,12 +205,13 @@ var FormRenderer = function FormRenderer(_ref) {
           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 () {
-          hooks.onFormComplete();
+          return hooks.onFormComplete();
         }, function (errors) {
-          _handlers.default.submissionError(errors, onError);
+          return _handlers.default.submissionError(errors, onError);
         });
       }
     }
@@ -202,11 +221,14 @@ var FormRenderer = function FormRenderer(_ref) {
 
   return /*#__PURE__*/_react.default.createElement("div", {
     className: classes()
-  }, title && pageId === _models.FormPages.HUB && /*#__PURE__*/_react.default.createElement(_copReactComponents.LargeHeading, null, title), formState.cya && /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, _extends({
+  }, title && !hide_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,
-    onRowAction: onCYARowAction
+    onRowAction: onCYARowAction,
+    summaryListClassModifiers: summaryListClassModifiers,
+    hide_title: hide_title,
+    noChangeAction: noChangeAction
   })), formState.page && /*#__PURE__*/_react.default.createElement(_FormPage.default, {
     page: formState.page,
     onAction: onPageAction
@@ -231,14 +253,20 @@ FormRenderer.propTypes = {
   }),
   classBlock: _propTypes.default.string,
   classModifiers: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
-  className: _propTypes.default.string
+  className: _propTypes.default.string,
+  hide_title: _propTypes.default.bool,
+  summaryListClassModifiers: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
+  noChangeAction: _propTypes.default.bool
 };
 FormRenderer.defaultProps = {
   type: _models.FormTypes.HUB,
   components: [],
   pages: [],
   classBlock: DEFAULT_CLASS,
-  classModifiers: []
+  classModifiers: [],
+  hide_title: false,
+  summaryListClassModifiers: [],
+  noChangeAction: false
 };
 var _default = FormRenderer;
 exports.default = _default;

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

@@ -1,14 +1,23 @@
 <!-- Global imports -->
+
 import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
-import { Button, Details, Heading, Link, Panel } 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 -->
+
 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';
@@ -16,52 +25,60 @@ 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]} />
+<Meta
+  title='Components/Form renderer'
+  id='D-FormRenderer'
+  component={FormRenderer}
+  decorators={[withMock]}
+/>
 
-<Heading size="xl" caption="Components">Form renderer</Heading>
+<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
-      }
-    ]
-  }}>
+  <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} />
-      );
+      return <FormRenderer {...USER_PROFILE} data={USER_PROFILE_DATA} />;
     }}
   </Story>
 </Canvas>
 
-<Details summary="Properties" className="no-indent">
-  <ArgsTable of={ FormRenderer } />
+<Details summary='Properties' className='no-indent'>
+  <ArgsTable of={FormRenderer} />
 </Details>
 
 ## CYA type
 
 <Canvas>
-  <Story name="CYA">
+  <Story name='CYA'>
     {() => {
       const [complete, setComplete] = useState(false);
       const [returnLater, setReturnLater] = useState(false);
@@ -82,7 +99,12 @@ on the basis of a <Link href="/?path=/docs/f-json-form">JSON</Link> that describ
         setReturnLater(!!pageId === false);
       });
       addHook('onSubmit', (type, payload, onSuccess, onError) => {
-        console.log('onSubmit called of type', type, 'called, with the payload', payload);
+        console.log(
+          'onSubmit called of type',
+          type,
+          'called, with the payload',
+          payload
+        );
         onSuccess();
       });
       const reset = () => {
@@ -91,25 +113,69 @@ on the basis of a <Link href="/?path=/docs/f-json-form">JSON</Link> that describ
       };
       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>
-        }
+          {!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>
+
+## Read-only style
+
+<Canvas>
+  <Story
+    name='Read-only style'
+    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}
+          summaryListClassModifiers='no-border'
+          hide_title={true}
+          noChangeAction={true}
+        />
+      );
+    }}
+  </Story>
+</Canvas>

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

@@ -467,5 +467,45 @@ describe('components', function () {
         }
       }, _callee12);
     })));
+    it('should show no title when hide_title is set to true', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee14() {
+      var form, hub;
+      return regeneratorRuntime.wrap(function _callee14$(_context14) {
+        while (1) {
+          switch (_context14.prev = _context14.next) {
+            case 0:
+              _context14.next = 2;
+              return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee13() {
+                return regeneratorRuntime.wrap(function _callee13$(_context13) {
+                  while (1) {
+                    switch (_context13.prev = _context13.next) {
+                      case 0:
+                        (0, _reactDom.render)( /*#__PURE__*/_react2.default.createElement(_FormRenderer.default, _extends({}, _userProfile.default, {
+                          data: _userProfileData.default,
+                          hide_title: true
+                        })), container);
+
+                      case 1:
+                      case "end":
+                        return _context13.stop();
+                    }
+                  }
+                }, _callee13);
+              })));
+
+            case 2:
+              form = checkForm(container);
+              expect(form.childNodes.length).toEqual(1); //Hub page (= CYA)
+
+              hub = form.childNodes[0];
+              expect(hub.tagName).toEqual('DIV');
+              expect(hub.classList).toContain(_CheckYourAnswers.DEFAULT_CLASS);
+
+            case 7:
+            case "end":
+              return _context14.stop();
+          }
+        }
+      }, _callee14);
+    })));
   });
 });

package/dist/components/FormRenderer/handlers/getPageId.js

@@ -12,16 +12,7 @@ exports.default = void 0;
  * @returns A page id.
  */
 var getPageId = function getPageId(action, pageId) {
-  if (action) {
-    // TODO: Improve how this is handled.
-    if (action.href) {
-      return action.href.split('/').pop();
-    } else if (action.url) {
-      return action.url.split('/').pop();
-    }
-  }
-
-  return pageId;
+  return (action === null || action === void 0 ? void 0 : action.page) || pageId;
 };
 
 var _default = getPageId;

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

@@ -14,46 +14,20 @@ describe('components', function () {
           var ACTION = null;
           expect((0, _getPageId.default)(ACTION, PAGE_ID)).toEqual(PAGE_ID);
         });
-        it('should return the pageId when the action contains no href or url', function () {
+        it('should return the pageId when the action contains no page', function () {
           var PAGE_ID = 'alpha';
           var ACTION = {
             id: 'bravo'
           };
           expect((0, _getPageId.default)(ACTION, PAGE_ID)).toEqual(PAGE_ID);
         });
-        it('should return the final part of the href when provided', function () {
-          var LAST_PART = 'delta';
-          var HREF = "/bravo/charlie/".concat(LAST_PART);
+        it('should return the page when provided', function () {
+          var NAVIGATE_TO = 'delta';
           var PAGE_ID = 'alpha';
           var ACTION = {
-            href: HREF
+            page: NAVIGATE_TO
           };
-          expect((0, _getPageId.default)(ACTION, PAGE_ID)).toEqual(LAST_PART);
-        });
-        it('should return the final part of the url when provided', function () {
-          var LAST_PART = 'delta';
-          var URL = "/bravo/charlie/".concat(LAST_PART);
-          var PAGE_ID = 'alpha';
-          var ACTION = {
-            url: URL
-          };
-          expect((0, _getPageId.default)(ACTION, PAGE_ID)).toEqual(LAST_PART);
-        });
-        it('should return the whole href when it contains no backslashes', function () {
-          var HREF = 'delta';
-          var PAGE_ID = 'alpha';
-          var ACTION = {
-            href: HREF
-          };
-          expect((0, _getPageId.default)(ACTION, PAGE_ID)).toEqual(HREF);
-        });
-        it('should return the whole url when it contains no backslashes', function () {
-          var URL = 'delta';
-          var PAGE_ID = 'alpha';
-          var ACTION = {
-            url: URL
-          };
-          expect((0, _getPageId.default)(ACTION, PAGE_ID)).toEqual(URL);
+          expect((0, _getPageId.default)(ACTION, PAGE_ID)).toEqual(NAVIGATE_TO);
         });
       });
     });

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

@@ -46,7 +46,7 @@ describe('components', function () {
         it('should not call the onNavigate method when the page is unchanged', function () {
           var CURRENT_PAGE_ID = 'alpha';
           var ACTION = {
-            href: "/".concat(CURRENT_PAGE_ID)
+            page: CURRENT_PAGE_ID
           };
           var ON_NAVIGATE_CALLS = [];
 
@@ -62,7 +62,7 @@ describe('components', function () {
           var CURRENT_PAGE_ID = 'alpha';
           var NEW_PAGE_ID = 'bravo';
           var ACTION = {
-            href: "/".concat(NEW_PAGE_ID)
+            page: NEW_PAGE_ID
           };
           var ON_NAVIGATE_CALLS = [];
 

package/dist/components/FormRenderer/helpers/getNextPageId.js

@@ -7,57 +7,64 @@ exports.default = void 0;
 
 var _models = require("../../../models");
 
+var _FormPage = _interopRequireDefault(require("../../../utils/FormPage"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 var getNextHubPageId = function getNextHubPageId(action) {
-  if ((action === null || action === void 0 ? void 0 : action.type) === _models.PageAction.TYPES.SAVE_AND_RETURN) {
-    return _models.FormPages.HUB;
-  }
+  return (action === null || action === void 0 ? void 0 : action.page) || _models.FormPages.HUB;
+};
 
-  return (action === null || action === void 0 ? void 0 : action.nextPageId) || _models.FormPages.HUB;
+var getNextCYAPageId = function getNextCYAPageId(pages, currentPageId, formData) {
+  return getNextWizardPageId(pages, currentPageId, formData) || _models.FormPages.CYA;
 };
 
-var getNextCYAPageId = function getNextCYAPageId(pages, currentPageId, action) {
-  if ((action === null || action === void 0 ? void 0 : action.type) === _models.PageAction.TYPES.SAVE_AND_RETURN) {
-    return undefined;
-  }
+var getNextWizardPageId = function getNextWizardPageId(pages, currentPageId, formData) {
+  var _page;
 
   var nextIndex = pages.findIndex(function (p) {
     return p.id === currentPageId;
   }) + 1;
-  return nextIndex < pages.length ? pages[nextIndex].id : _models.FormPages.CYA;
-};
+  var page = pages[nextIndex];
 
-var getNextWizardPageId = function getNextWizardPageId(pages, currentPageId, action) {
-  if ((action === null || action === void 0 ? void 0 : action.type) === _models.PageAction.TYPES.SAVE_AND_RETURN) {
-    return undefined;
+  while (page && !_FormPage.default.show(page, formData)) {
+    nextIndex++;
+    page = pages[nextIndex];
   }
 
-  var nextIndex = pages.findIndex(function (p) {
-    return p.id === currentPageId;
-  }) + 1;
-  return nextIndex < pages.length ? pages[nextIndex].id : undefined;
+  return ((_page = page) === null || _page === void 0 ? void 0 : _page.id) || undefined;
 };
 
-var getNextFormPageId = function getNextFormPageId(pages, action) {
-  if ((action === null || action === void 0 ? void 0 : action.type) === _models.PageAction.TYPES.SAVE_AND_RETURN) {
-    return undefined;
-  }
-
+var getNextFormPageId = function getNextFormPageId(pages) {
+  // A form has a single page... so always return that id.
   return pages.length > 0 ? pages[0].id : undefined;
 };
 
-var getNextPageId = function getNextPageId(formType, pages, currentPageId, action) {
+var getNextPageId = function getNextPageId(formType, pages, currentPageId, action, formData) {
+  if (action) {
+    if (action.type === _models.PageAction.TYPES.NAVIGATE) {
+      return pages.find(function (p) {
+        return p.id === action.page;
+      }) ? action.page : undefined;
+    }
+
+    if (action.type === _models.PageAction.TYPES.SAVE_AND_RETURN) {
+      return formType === _models.FormTypes.HUB ? _models.FormPages.HUB : undefined;
+    }
+  }
+
   switch (formType) {
     case _models.FormTypes.HUB:
       return getNextHubPageId(action);
 
     case _models.FormTypes.CYA:
-      return getNextCYAPageId(pages, currentPageId, action);
+      return getNextCYAPageId(pages, currentPageId, formData);
 
     case _models.FormTypes.WIZARD:
-      return getNextWizardPageId(pages, currentPageId, action);
+      return getNextWizardPageId(pages, currentPageId, formData);
 
     default:
-      return getNextFormPageId(pages, action);
+      return getNextFormPageId(pages);
   }
 };