@ukhomeoffice/cop-react-form-renderer 2.0.0 → 2.5.0

package/dist/components/FormRenderer/FormRenderer.js

@@ -23,6 +23,8 @@ var _CheckYourAnswers = _interopRequireDefault(require("../CheckYourAnswers"));
 
 var _FormPage = _interopRequireDefault(require("../FormPage"));
 
+var _TaskList = _interopRequireDefault(require("../TaskList"));
+
 var _handlers = _interopRequireDefault(require("./handlers"));
 
 var _helpers = _interopRequireDefault(require("./helpers"));
@@ -69,7 +71,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)({}),
@@ -95,7 +100,17 @@ var FormRenderer = function FormRenderer(_ref) {
   var _useState9 = (0, _react.useState)(_helpers.default.getFormState(pageId, pages, hub)),
       _useState10 = _slicedToArray(_useState9, 2),
       formState = _useState10[0],
-      setFormState = _useState10[1]; // Set up hooks.
+      setFormState = _useState10[1];
+
+  var _useState11 = (0, _react.useState)({}),
+      _useState12 = _slicedToArray(_useState11, 2),
+      currentTask = _useState12[0],
+      setCurrentTask = _useState12[1];
+
+  var _useState13 = (0, _react.useState)({}),
+      _useState14 = _slicedToArray(_useState13, 2),
+      hubDetails = _useState14[0],
+      setHubDetails = _useState14[1]; // Set up hooks.
 
 
   var _useHooks = (0, _hooks2.useHooks)(),
@@ -143,6 +158,36 @@ var FormRenderer = function FormRenderer(_ref) {
   (0, _react.useEffect)(function () {
     hooks.onFormLoad();
   }, [hooks]);
+  (0, _react.useEffect)(function () {
+    setHubDetails(_hub);
+  }, [_hub]); // Update task list pages with form data and update states
+
+  (0, _react.useEffect)(function () {
+    var pages = currentTask.fullPages;
+
+    if (pages) {
+      pages.forEach(function (page) {
+        page.formData = data;
+      });
+      setCurrentTask(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          fullPages: pages
+        });
+      });
+    }
+
+    if (hubDetails !== null && hubDetails !== void 0 && hubDetails.sections) {
+      var _data$formStatus2;
+
+      var tasks = data !== null && data !== void 0 && (_data$formStatus2 = data.formStatus) !== null && _data$formStatus2 !== void 0 && _data$formStatus2.tasks ? data.formStatus.tasks : {};
+
+      var updatedSections = _helpers.default.getUpdatedSectionStates(hubDetails.sections, tasks);
+
+      setHubDetails(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), updatedSections);
+      });
+    }
+  }, [currentTask.fullPages, data, hubDetails === null || hubDetails === void 0 ? void 0 : hubDetails.sections]);
 
   var onPageChange = function onPageChange(newPageId) {
     setPageId(newPageId);
@@ -163,10 +208,20 @@ var FormRenderer = function FormRenderer(_ref) {
           components: components
         }, _objectSpread(_objectSpread({}, data), patch), _models.EventTypes.SUBMIT);
 
-        submissionData.formStatus = _helpers.default.getSubmissionStatus(type, pages, pageId, action, submissionData);
+        submissionData.formStatus = _helpers.default.getSubmissionStatus(type, pages, pageId, action, submissionData, currentTask);
 
         if (patch) {
           setData(submissionData);
+        }
+
+        var pageUpdate = function pageUpdate(next) {
+          return onPageChange(_helpers.default.getNextPageId(type, pages, pageId, action, next));
+        };
+
+        if (action.type === _models.PageAction.TYPES.SAVE_AND_NAVIGATE) {
+          pageUpdate = function pageUpdate() {
+            return _handlers.default.navigate(action, pageId, onPageChange);
+          };
         } // Now submit the data to the backend...
 
 
@@ -175,7 +230,7 @@ var FormRenderer = function FormRenderer(_ref) {
           setData(function (prev) {
             var next = _objectSpread(_objectSpread({}, prev), response);
 
-            onPageChange(_helpers.default.getNextPageId(type, pages, pageId, action, next));
+            pageUpdate(next);
             return next;
           });
         }, function (errors) {
@@ -188,6 +243,23 @@ var FormRenderer = function FormRenderer(_ref) {
 
   var onCYARowAction = function onCYARowAction(page) {
     _handlers.default.cyaAction(page, pageId, onPageChange);
+  }; //Kick off a task, gather required pages and move to the correct point
+
+
+  var onTaskAction = function onTaskAction(currentTask) {
+    if (currentTask) {
+      currentTask.fullPages = [];
+      currentTask.pages.forEach(function (page) {
+        currentTask.fullPages.push(_helpers.default.getPage(page, pages));
+      });
+      setCurrentTask(currentTask);
+
+      if (currentTask.state === _models.TaskStates.TYPES.COMPLETE) {
+        onPageChange(_models.FormPages.CYA);
+      } else {
+        onPageChange(currentTask.pages[0]);
+      }
+    }
   }; // Handle actions from "Check your answers".
 
 
@@ -212,18 +284,51 @@ var FormRenderer = function FormRenderer(_ref) {
         });
       }
     }
+
+    if (action.type === _models.PageAction.TYPES.SAVE_AND_RETURN) {
+      if (_helpers.default.canCYASubmit(currentTask.fullPages, onError)) {
+        var _submissionData = _utils.default.Format.form({
+          pages: pages,
+          components: components
+        }, _objectSpread({}, data), _models.EventTypes.SUBMIT);
+
+        _submissionData.formStatus = _helpers.default.getSubmissionStatus(type, pages, pageId, action, _submissionData, currentTask);
+        setData(_submissionData);
+        hooks.onSubmit(action.type, _submissionData, function () {
+          return onPageChange(_models.FormPages.HUB);
+        }, function (errors) {
+          return _handlers.default.submissionError(errors, onError);
+        });
+      }
+    }
   };
 
   var classes = _utils.default.classBuilder(classBlock, classModifiers, className);
 
+  if (hub === _models.HubFormats.TASK) {
+    cya.actions = [{
+      type: _models.PageAction.TYPES.SAVE_AND_RETURN,
+      label: 'Submit',
+      validate: true
+    }];
+  }
+
   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({
-    pages: pages
+  }, 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: currentTask.fullPages ? currentTask.fullPages : pages
   }, cya, formState.cya, {
     onAction: onCYAAction,
-    onRowAction: onCYARowAction
-  })), formState.page && /*#__PURE__*/_react.default.createElement(_FormPage.default, {
+    onRowAction: onCYARowAction,
+    summaryListClassModifiers: summaryListClassModifiers,
+    hide_title: hide_title,
+    noChangeAction: noChangeAction
+  })), hub === _models.HubFormats.TASK && formState.pageId === _models.FormPages.HUB && /*#__PURE__*/_react.default.createElement(_TaskList.default, {
+    sections: hubDetails.sections,
+    refNumber: data['businessKey'],
+    refTitle: _hub.refTitle,
+    onTaskAction: onTaskAction
+  }), formState.page && /*#__PURE__*/_react.default.createElement(_FormPage.default, {
     page: formState.page,
     onAction: onPageAction
   }));
@@ -233,7 +338,7 @@ FormRenderer.propTypes = {
   title: _propTypes.default.string,
 
   /** See <a href="/?path=/docs/f-json--page#formtypes">FormTypes</a>. */
-  type: _propTypes.default.oneOf([_models.FormTypes.CYA, _models.FormTypes.FORM, _models.FormTypes.HUB, _models.FormTypes.WIZARD]).isRequired,
+  type: _propTypes.default.oneOf([_models.FormTypes.CYA, _models.FormTypes.FORM, _models.FormTypes.HUB, _models.FormTypes.TASK, _models.FormTypes.WIZARD]).isRequired,
   components: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
   pages: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
   hub: _propTypes.default.object,
@@ -247,14 +352,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>