From 06ad6fb309a8c9c4bfb1dcebed992b9803596e5c Mon Sep 17 00:00:00 2001
From: Ian Jones <hello@ianjo.uk>
Date: Tue, 4 Jul 2023 16:52:04 +0100
Subject: [PATCH 1/2] feat: Boilerplate next steps component

---
 .../@planx/components/NextSteps/Editor.tsx    | 70 +++++++++++++++++++
 .../@planx/components/NextSteps/Public.tsx    | 25 +++++++
 .../src/@planx/components/NextSteps/model.ts  | 18 +++++
 .../src/@planx/components/Send/bops/index.ts  |  1 +
 .../components/shared/Preview/SummaryList.tsx |  1 +
 .../src/@planx/components/types.ts            |  1 +
 editor.planx.uk/src/@planx/components/ui.tsx  |  2 +
 .../components/Flow/components/Node.tsx       |  2 +
 .../FlowEditor/components/forms/FormModal.tsx |  1 +
 .../FlowEditor/components/forms/index.ts      |  2 +
 .../src/pages/FlowEditor/data/types.ts        |  1 +
 editor.planx.uk/src/pages/Preview/Node.tsx    |  4 ++
 12 files changed, 128 insertions(+)
 create mode 100644 editor.planx.uk/src/@planx/components/NextSteps/Editor.tsx
 create mode 100644 editor.planx.uk/src/@planx/components/NextSteps/Public.tsx
 create mode 100644 editor.planx.uk/src/@planx/components/NextSteps/model.ts

diff --git a/editor.planx.uk/src/@planx/components/NextSteps/Editor.tsx b/editor.planx.uk/src/@planx/components/NextSteps/Editor.tsx
new file mode 100644
index 0000000000..b2e0aaf60d
--- /dev/null
+++ 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
new file mode 100644
index 0000000000..dd893c0d48
--- /dev/null
+++ 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 title={props.title} description={props.description} />
+      <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
new file mode 100644
index 0000000000..80ee183cd4
--- /dev/null
+++ 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
index b4f6db799c..015b87da34 100644
--- 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
index 0f6c1d1f1b..027f8c2533 100644
--- 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
index 0558536333..6ad41564d4 100644
--- 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
index 39283855b9..dd9b947940 100644
--- 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
index 6f574d88a6..74a45a3daf 100644
--- 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
index a8336cb069..674309a3d9 100644
--- 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
index 6afe01aaf2..a8fd24421e 100644
--- 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
index 7c7ecac61b..77d5addb36 100644
--- 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
index cf8335192a..db53120f0a 100644
--- 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} />;
 

From c51225ba563512f4f71115f3c3150b5fa7d9a917 Mon Sep 17 00:00:00 2001
From: Ian Jones <hello@ianjo.uk>
Date: Wed, 5 Jul 2023 13:09:25 +0100
Subject: [PATCH 2/2] feat: update suggestions from QA

---
 editor.planx.uk/src/@planx/components/NextSteps/Public.tsx      | 2 +-
 .../src/pages/FlowEditor/components/forms/FormModal.tsx         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/editor.planx.uk/src/@planx/components/NextSteps/Public.tsx b/editor.planx.uk/src/@planx/components/NextSteps/Public.tsx
index dd893c0d48..66da83d2a7 100644
--- a/editor.planx.uk/src/@planx/components/NextSteps/Public.tsx
+++ b/editor.planx.uk/src/@planx/components/NextSteps/Public.tsx
@@ -14,7 +14,7 @@ export default Component;
 function Component(props: Props) {
   return (
     <Card handleSubmit={props.handleSubmit} isValid>
-      <QuestionHeader title={props.title} description={props.description} />
+      <QuestionHeader {...props} />
       <Box>
         <Typography variant="h2" style={{ color: "orangered" }}>
           UNDER DEVELOPMENT
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/forms/FormModal.tsx b/editor.planx.uk/src/pages/FlowEditor/components/forms/FormModal.tsx
index 674309a3d9..640e0b6a4f 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/forms/FormModal.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/forms/FormModal.tsx
@@ -46,7 +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> */}
+        <option value={TYPES.NextSteps}>Next steps</option>
       </optgroup>
       <optgroup label="Inputs">
         <option value={TYPES.TextInput}>Text Input</option>