From 40d4ba6a4b65e8da0522a1749d8beb895b7bc871 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= <DafyddLlyr@gmail.com>
Date: Sat, 14 Sep 2024 19:40:11 +0100
Subject: [PATCH 1/2] feat: Editor modal

---
 .../src/@planx/components/Page/Editor.tsx     | 86 ++++++++++++++++++-
 .../src/@planx/components/Page/model.ts       | 19 +++-
 .../components/Page/schema/AdvertConsent.ts   | 41 +++++++++
 3 files changed, 142 insertions(+), 4 deletions(-)
 create mode 100644 editor.planx.uk/src/@planx/components/Page/schema/AdvertConsent.ts

diff --git a/editor.planx.uk/src/@planx/components/Page/Editor.tsx b/editor.planx.uk/src/@planx/components/Page/Editor.tsx
index ac96bbe804..fd5eb2cadb 100644
--- a/editor.planx.uk/src/@planx/components/Page/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/Page/Editor.tsx
@@ -1,13 +1,25 @@
+import MenuItem from "@mui/material/MenuItem";
 import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
 import { useFormik } from "formik";
 import React from "react";
+import ModalSection from "ui/editor/ModalSection";
+import ModalSectionContent from "ui/editor/ModalSectionContent";
+import RichTextInput from "ui/editor/RichTextInput";
+import SelectInput from "ui/editor/SelectInput";
+import Input from "ui/shared/Input";
+import InputRow from "ui/shared/InputRow";
+import InputRowItem from "ui/shared/InputRowItem";
+import InputRowLabel from "ui/shared/InputRowLabel";
 
-import { EditorProps } from "../ui";
+import { EditorProps, ICONS, InternalNotes, MoreInformation } from "../ui";
 import { Page, parsePage } from "./model";
+import { ProposedAdvertisements } from "./schema/AdvertConsent";
 
 type Props = EditorProps<TYPES.Page, Page>;
 
-export default PageComponent;
+export const PAGE_SCHEMAS = [
+  { name: "Advert consent", schema: ProposedAdvertisements },
+] as const;
 
 function PageComponent(props: Props) {
   const formik = useFormik({
@@ -22,7 +34,75 @@ function PageComponent(props: Props) {
 
   return (
     <form onSubmit={formik.handleSubmit} id="modal">
-      //...
+      <ModalSection>
+        <ModalSectionContent title="Page" Icon={ICONS[TYPES.Page]}>
+          <InputRow>
+            <Input
+              format="large"
+              name="title"
+              value={formik.values.title}
+              placeholder="Title"
+              onChange={formik.handleChange}
+              required
+            />
+          </InputRow>
+          <InputRow>
+            <RichTextInput
+              placeholder="Description"
+              name="description"
+              value={formik.values.description}
+              onChange={formik.handleChange}
+            />
+          </InputRow>
+          <InputRow>
+            <Input
+              format="data"
+              name="fn"
+              value={formik.values.fn}
+              placeholder="Data Field"
+              onChange={formik.handleChange}
+              required
+            />
+          </InputRow>
+          <InputRow>
+            <InputRowLabel>Schema</InputRowLabel>
+            <InputRowItem>
+              <SelectInput
+                value={formik.values.schemaName}
+                onChange={(e) => {
+                  formik.setFieldValue("schemaName", e.target.value);
+                  formik.setFieldValue(
+                    "schema",
+                    PAGE_SCHEMAS.find(
+                      ({ name }) => name === (e.target.value as string),
+                    )?.schema,
+                  );
+                }}
+              >
+                {PAGE_SCHEMAS.map(({ name }) => (
+                  <MenuItem key={name} value={name}>
+                    {name}
+                  </MenuItem>
+                ))}
+              </SelectInput>
+            </InputRowItem>
+          </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>
   );
 }
+
+export default PageComponent;
diff --git a/editor.planx.uk/src/@planx/components/Page/model.ts b/editor.planx.uk/src/@planx/components/Page/model.ts
index a1da2c2b16..6f43aa971d 100644
--- a/editor.planx.uk/src/@planx/components/Page/model.ts
+++ b/editor.planx.uk/src/@planx/components/Page/model.ts
@@ -1,10 +1,27 @@
+import { cloneDeep } from "lodash";
+
 import { MoreInformation, parseMoreInformation } from "../shared";
+import { Schema } from "../shared/Schema/model";
+import { PAGE_SCHEMAS } from "./Editor";
+
+export interface PageSchema extends Schema {
+  min: 1;
+  max: 1;
+}
 
 export interface Page extends MoreInformation {
   fn: string;
+  title: string;
+  description?: string;
+  schemaName: string;
+  schema: PageSchema;
 }
 
 export const parsePage = (data: Record<string, any> | undefined): Page => ({
-  fn: data?.fn || "",
+  fn: data?.fn,
+  title: data?.title,
+  description: data?.description,
+  schemaName: data?.schemaName || PAGE_SCHEMAS[0].name,
+  schema: cloneDeep(data?.schema) || PAGE_SCHEMAS[0].schema,
   ...parseMoreInformation(data),
 });
diff --git a/editor.planx.uk/src/@planx/components/Page/schema/AdvertConsent.ts b/editor.planx.uk/src/@planx/components/Page/schema/AdvertConsent.ts
new file mode 100644
index 0000000000..78165a04d4
--- /dev/null
+++ b/editor.planx.uk/src/@planx/components/Page/schema/AdvertConsent.ts
@@ -0,0 +1,41 @@
+import { PageSchema } from "../model";
+
+export const ProposedAdvertisements: PageSchema = {
+  type: "Proposed advertisements",
+  fields: [
+    {
+      type: "number",
+      data: {
+        title: "How many fascia signs are you applying for?",
+        fn: "fascia",
+        allowNegatives: false,
+      },
+    },
+    {
+      type: "number",
+      data: {
+        title: "How many projecting or hanging signs are you applying for?",
+        fn: "projecting",
+        allowNegatives: false,
+      },
+    },
+    {
+      type: "number",
+      data: {
+        title: "How many hoardings are you applying for?",
+        fn: "hoarding",
+        allowNegatives: false,
+      },
+    },
+    {
+      type: "number",
+      data: {
+        title: "How many other advertisements are you applying for?",
+        fn: "other",
+        allowNegatives: false,
+      },
+    },
+  ],
+  min: 1,
+  max: 1,
+} as const;

From a973472f67e510a444009e9a952c55b2ee3cc4c7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= <DafyddLlyr@gmail.com>
Date: Mon, 16 Sep 2024 10:09:49 +0100
Subject: [PATCH 2/2] feat(page): Public interface (#3677)

---
 .../src/@planx/components/Page/Public.tsx     | 29 +++++++++++++++----
 1 file changed, 24 insertions(+), 5 deletions(-)

diff --git a/editor.planx.uk/src/@planx/components/Page/Public.tsx b/editor.planx.uk/src/@planx/components/Page/Public.tsx
index d960c5dfc7..81c18cc423 100644
--- a/editor.planx.uk/src/@planx/components/Page/Public.tsx
+++ b/editor.planx.uk/src/@planx/components/Page/Public.tsx
@@ -1,19 +1,38 @@
 import { PublicProps } from "@planx/components/ui";
+import { useFormik } from "formik";
 import React from "react";
 
 import Card from "../shared/Preview/Card";
 import CardHeader from "../shared/Preview/CardHeader";
+import { useSchema } from "../shared/Schema/hook";
+import { SchemaFields } from "../shared/Schema/SchemaFields";
+import { getPreviouslySubmittedData } from "../shared/utils";
 import { Page } from "./model";
 
 type Props = PublicProps<Page>;
 
 function PageComponent(props: Props) {
+  const { formikConfig } = useSchema({
+    schema: props.schema,
+    previousValues: getPreviouslySubmittedData(props),
+  });
+
+  const formik = useFormik({
+    ...formikConfig,
+    onSubmit: (data) => console.log({ data }),
+  });
+
   return (
-    <Card handleSubmit={props.handleSubmit} isValid>
-      <CardHeader
-        info={props.info}
-        policyRef={props.policyRef}
-        howMeasured={props.howMeasured}
+    <Card handleSubmit={formik.handleSubmit} isValid>
+      <CardHeader {...props} />
+      <SchemaFields
+        formik={formik}
+        schema={props.schema}
+        sx={(theme) => ({
+          display: "flex",
+          flexDirection: "column",
+          gap: theme.spacing(2),
+        })}
       />
     </Card>
   );