feat: Boilerplate next steps component (#1909)

* feat: Boilerplate next steps component * feat: update suggestions from QA
theopensystemslab · Jul 6, 2023 · 594e978 · 594e978
1 parent 740f270
commit 594e978
Show file tree

Hide file tree

Showing 12 changed files with 128 additions and 0 deletions.
diff --git a/editor.planx.uk/src/@planx/components/NextSteps/Editor.tsx b/editor.planx.uk/src/@planx/components/NextSteps/Editor.tsx
@@ -0,0 +1,70 @@
+import { TYPES } from "@planx/components/types";
+import {
+  EditorProps,
+  ICONS,
+  InternalNotes,
+  MoreInformation,
+} from "@planx/components/ui";
+import { useFormik } from "formik";
+import React from "react";
+import Input from "ui/Input";
+import InputRow from "ui/InputRow";
+import ModalSection from "ui/ModalSection";
+import ModalSectionContent from "ui/ModalSectionContent";
+import RichTextInput from "ui/RichTextInput";
+
+import { NextSteps, parseContent } from "./model";
+
+type Props = EditorProps<TYPES.NextSteps, NextSteps>;
+
+export default NextSteps;
+
+function NextSteps(props: Props) {
+  const formik = useFormik({
+    initialValues: parseContent(props.node?.data),
+    onSubmit: (newValues) => {
+      props.handleSubmit?.({
+        type: TYPES.NextSteps,
+        data: newValues,
+      });
+    },
+  });
+
+  return (
+    <form onSubmit={formik.handleSubmit} id="modal">
+      <ModalSection>
+        <ModalSectionContent title="Next steps" Icon={ICONS[TYPES.NextSteps]}>
+          <InputRow>
+            <Input
+              format="large"
+              name="title"
+              placeholder={formik.values.title}
+              value={formik.values.title}
+              onChange={formik.handleChange}
+            />
+          </InputRow>
+          <InputRow>
+            <RichTextInput
+              name="description"
+              placeholder="Description"
+              value={formik.values.description}
+              onChange={formik.handleChange}
+            />
+          </InputRow>
+        </ModalSectionContent>
+      </ModalSection>
+      <MoreInformation
+        changeField={formik.handleChange}
+        definitionImg={formik.values.definitionImg}
+        howMeasured={formik.values.howMeasured}
+        policyRef={formik.values.policyRef}
+        info={formik.values.info}
+      />
+      <InternalNotes
+        name="notes"
+        value={formik.values.notes}
+        onChange={formik.handleChange}
+      />
+    </form>
+  );
+}
diff --git a/editor.planx.uk/src/@planx/components/NextSteps/Public.tsx b/editor.planx.uk/src/@planx/components/NextSteps/Public.tsx
@@ -0,0 +1,25 @@
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import { PublicProps } from "@planx/components/ui";
+import React from "react";
+
+import Card from "../shared/Preview/Card";
+import QuestionHeader from "../shared/Preview/QuestionHeader";
+import { NextSteps } from "./model";
+
+type Props = PublicProps<NextSteps>;
+
+export default Component;
+
+function Component(props: Props) {
+  return (
+    <Card handleSubmit={props.handleSubmit} isValid>
+      <QuestionHeader {...props} />
+      <Box>
+        <Typography variant="h2" style={{ color: "orangered" }}>
+          UNDER DEVELOPMENT
+        </Typography>
+      </Box>
+    </Card>
+  );
+}
diff --git a/editor.planx.uk/src/@planx/components/NextSteps/model.ts b/editor.planx.uk/src/@planx/components/NextSteps/model.ts
@@ -0,0 +1,18 @@
+import { MoreInformation, parseMoreInformation } from "../shared";
+
+export interface NextSteps extends MoreInformation {
+  title: string;
+  description: string;
+  fn: string;
+}
+
+export const parseContent = (
+  data: Record<string, any> | undefined
+): NextSteps => ({
+  title: data?.title || DEFAULT_TITLE,
+  description: data?.description || "",
+  fn: data?.fn || "",
+  ...parseMoreInformation(data),
+});
+
+const DEFAULT_TITLE = "What would you like to do next?";
diff --git a/editor.planx.uk/src/@planx/components/Send/bops/index.ts b/editor.planx.uk/src/@planx/components/Send/bops/index.ts
@@ -56,6 +56,7 @@ function isTypeForBopsPayload(type?: TYPES) {
     case TYPES.FindProperty:
     case TYPES.Flow:
     case TYPES.InternalPortal:
+    case TYPES.NextSteps:
     case TYPES.Notice:
     case TYPES.Pay:
     case TYPES.PlanningConstraints:

diff --git a/editor.planx.uk/src/@planx/components/shared/Preview/SummaryList.tsx b/editor.planx.uk/src/@planx/components/shared/Preview/SummaryList.tsx
@@ -64,6 +64,7 @@ const presentationalComponents: {
   [TYPES.InternalPortal]: undefined,
   [TYPES.FileUploadAndLabel]: FileUploadAndLabel,
   [TYPES.Notice]: undefined,
+  [TYPES.NextSteps]: undefined,
   [TYPES.NumberInput]: NumberInput,
   [TYPES.Pay]: undefined,
   [TYPES.PlanningConstraints]: undefined,

diff --git a/editor.planx.uk/src/@planx/components/types.ts b/editor.planx.uk/src/@planx/components/types.ts
@@ -29,4 +29,5 @@ export enum TYPES {
   Send = 650,
   Calculate = 700,
   Confirmation = 725,
+  NextSteps = 730,
 }
diff --git a/editor.planx.uk/src/@planx/components/ui.tsx b/editor.planx.uk/src/@planx/components/ui.tsx
@@ -1,3 +1,4 @@
+import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
 import BorderColorIcon from "@mui/icons-material/BorderColor";
 import CallSplit from "@mui/icons-material/CallSplit";
 import CheckBoxOutlined from "@mui/icons-material/CheckBoxOutlined";
@@ -72,6 +73,7 @@ export const ICONS: {
   [TYPES.Flow]: undefined,
   [TYPES.InternalPortal]: undefined,
   [TYPES.Notice]: ReportProblemOutlined,
+  [TYPES.NextSteps]: ArrowForwardIcon,
   [TYPES.NumberInput]: Pin,
   [TYPES.Pay]: PaymentOutlined,
   [TYPES.PlanningConstraints]: Map,

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Node.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Node.tsx
@@ -64,6 +64,8 @@ const Node: React.FC<any> = (props) => {
       return <Filter {...allProps} text="(Flags Filter)" />;
     case TYPES.FindProperty:
       return <Question {...allProps} text="Find property" />;
+    case TYPES.NextSteps:
+      return <Question {...allProps} text="Next steps" />;
     case TYPES.Notice:
       return <Question {...allProps} text={node?.data?.title ?? "Notice"} />;
     case TYPES.NumberInput:

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/forms/FormModal.tsx b/editor.planx.uk/src/pages/FlowEditor/components/forms/FormModal.tsx
@@ -46,6 +46,7 @@ const NodeTypeSelect: React.FC<{
       <optgroup label="Question">
         <option value={TYPES.Statement}>Question</option>
         <option value={TYPES.Checklist}>Checklist</option>
+        <option value={TYPES.NextSteps}>Next steps</option>
       </optgroup>
       <optgroup label="Inputs">
         <option value={TYPES.TextInput}>Text Input</option>

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/forms/index.ts b/editor.planx.uk/src/pages/FlowEditor/components/forms/index.ts
@@ -12,6 +12,7 @@ import FileUploadAndLabel from "@planx/components/FileUploadAndLabel/Editor";
 import Filter from "@planx/components/Filter/Editor";
 import FindProperty from "@planx/components/FindProperty/Editor";
 import InternalPortal from "@planx/components/InternalPortal/Editor";
+import NextSteps from "@planx/components/NextSteps/Editor";
 import Notice from "@planx/components/Notice/Editor";
 import NumberInput from "@planx/components/NumberInput/Editor";
 import Pay from "@planx/components/Pay/Editor";
@@ -50,6 +51,7 @@ const components: {
   flow: EmptyComponent,
   "internal-portal": InternalPortal,
   "file-upload-and-label": FileUploadAndLabel,
+  "next-steps": NextSteps,
   notice: Notice,
   "number-input": NumberInput,
   pay: Pay,

diff --git a/editor.planx.uk/src/pages/FlowEditor/data/types.ts b/editor.planx.uk/src/pages/FlowEditor/data/types.ts
@@ -18,6 +18,7 @@ export const SLUGS: {
   [TYPES.Flow]: "flow",
   [TYPES.InternalPortal]: "internal-portal",
   [TYPES.FileUploadAndLabel]: "file-upload-and-label",
+  [TYPES.NextSteps]: "next-steps",
   [TYPES.Notice]: "notice",
   [TYPES.NumberInput]: "number-input",
   [TYPES.Pay]: "pay",

diff --git a/editor.planx.uk/src/pages/Preview/Node.tsx b/editor.planx.uk/src/pages/Preview/Node.tsx
@@ -9,6 +9,7 @@ import DrawBoundary from "@planx/components/DrawBoundary/Public";
 import FileUpload from "@planx/components/FileUpload/Public";
 import FileUploadAndLabel from "@planx/components/FileUploadAndLabel/Public";
 import FindProperty from "@planx/components/FindProperty/Public";
+import NextSteps from "@planx/components/NextSteps/Public";
 import Notice from "@planx/components/Notice/Public";
 import NumberInput from "@planx/components/NumberInput/Public";
 import { GOV_PAY_PASSPORT_KEY } from "@planx/components/Pay/model";
@@ -163,6 +164,9 @@ const Node: React.FC<any> = (props: Props) => {
     case TYPES.FindProperty:
       return <FindProperty {...allProps} />;
 
+    case TYPES.NextSteps:
+      return <NextSteps {...allProps} />;
+
     case TYPES.Notice:
       return <Notice {...allProps} />;