feat(page): Initial setup of Page component (#3675)

editor.planx.uk/package.json

@@ -15,7 +15,7 @@
     "@mui/material": "^5.15.10",
     "@mui/utils": "^5.15.11",
     "@opensystemslab/map": "1.0.0-alpha.3",
-    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#bea2192",
+    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#e6040d9",
     "@tiptap/core": "^2.4.0",
     "@tiptap/extension-bold": "^2.0.3",
     "@tiptap/extension-bubble-menu": "^2.1.13",

editor.planx.uk/src/@planx/components/Page/Editor.tsx

@@ -0,0 +1,108 @@
+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, ICONS, InternalNotes, MoreInformation } from "../ui";
+import { Page, parsePage } from "./model";
+import { ProposedAdvertisements } from "./schema/AdvertConsent";
+
+type Props = EditorProps<TYPES.Page, Page>;
+
+export const PAGE_SCHEMAS = [
+  { name: "Advert consent", schema: ProposedAdvertisements },
+] as const;
+
+function PageComponent(props: Props) {
+  const formik = useFormik({
+    initialValues: parsePage(props.node?.data),
+    onSubmit: (newValues) => {
+      props.handleSubmit?.({
+        type: TYPES.Page,
+        data: newValues,
+      });
+    },
+  });
+
+  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;

editor.planx.uk/src/@planx/components/Page/Public.test.tsx

@@ -0,0 +1 @@
+test.todo("coming soon!");

editor.planx.uk/src/@planx/components/Page/Public.tsx

@@ -0,0 +1,41 @@
+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={formik.handleSubmit} isValid>
+      <CardHeader {...props} />
+      <SchemaFields
+        formik={formik}
+        schema={props.schema}
+        sx={(theme) => ({
+          display: "flex",
+          flexDirection: "column",
+          gap: theme.spacing(2),
+        })}
+      />
+    </Card>
+  );
+}
+
+export default PageComponent;

editor.planx.uk/src/@planx/components/Page/model.ts

@@ -0,0 +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,
+  title: data?.title,
+  description: data?.description,
+  schemaName: data?.schemaName || PAGE_SCHEMAS[0].name,
+  schema: cloneDeep(data?.schema) || PAGE_SCHEMAS[0].schema,
+  ...parseMoreInformation(data),
+});

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;

editor.planx.uk/src/@planx/components/shared/Preview/SummaryList.tsx

@@ -108,6 +108,8 @@ const presentationalComponents: {
   [TYPES.Notice]: undefined,
   [TYPES.NextSteps]: undefined,
   [TYPES.NumberInput]: NumberInput,
+  // TODO!
+  [TYPES.Page]: undefined,
   [TYPES.Pay]: undefined,
   [TYPES.PlanningConstraints]: undefined,
   [TYPES.PropertyInformation]: undefined,

editor.planx.uk/src/@planx/components/ui.tsx

@@ -1,4 +1,5 @@
 import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
+import Article from "@mui/icons-material/Article";
 import BorderColorIcon from "@mui/icons-material/BorderColor";
 import CallSplit from "@mui/icons-material/CallSplit";
 import CheckBoxOutlined from "@mui/icons-material/CheckBoxOutlined";
@@ -81,6 +82,7 @@ export const ICONS: {
   [TYPES.Notice]: ReportProblemOutlined,
   [TYPES.NextSteps]: ArrowForwardIcon,
   [TYPES.NumberInput]: Pin,
+  [TYPES.Page]: Article,
   [TYPES.Pay]: PaymentOutlined,
   [TYPES.PlanningConstraints]: Map,
   [TYPES.PropertyInformation]: LocationOnOutlined,

editor.planx.uk/src/lib/featureFlags.ts

@@ -1,5 +1,5 @@
 // add/edit/remove feature flags in array below
-const AVAILABLE_FEATURE_FLAGS = ["SEARCH", "ADD_NEW_EDITOR"] as const;
+const AVAILABLE_FEATURE_FLAGS = ["SEARCH", "ADD_NEW_EDITOR", "PAGE"] as const;
 
 type FeatureFlag = (typeof AVAILABLE_FEATURE_FLAGS)[number];
 

editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Node.tsx

@@ -77,6 +77,8 @@ const Node: React.FC<any> = (props) => {
       return <Question {...allProps} text={node?.data?.title ?? "Notice"} />;
     case TYPES.NumberInput:
       return <Question {...allProps} text={node?.data?.title ?? "Number"} />;
+    case TYPES.Page:
+      return <Question {...allProps} text={node?.data?.title ?? "Page"} />;
     case TYPES.Pay:
       return <Question {...allProps} text={node?.data?.title ?? "Pay"} />;
     case TYPES.PlanningConstraints:

editor.planx.uk/src/pages/FlowEditor/components/forms/FormModal.tsx

@@ -62,6 +62,7 @@ const NodeTypeSelect: React.FC<{
         <option value={TYPES.AddressInput}>Address Input</option>
         <option value={TYPES.ContactInput}>Contact Input</option>
         <option value={TYPES.List}>List</option>
+        {hasFeatureFlag("PAGE") && <option value={TYPES.Page}>Page</option>}
         <option value={TYPES.MapAndLabel}>Map and Label (Testing only)</option>
       </optgroup>
       <optgroup label="Information">

editor.planx.uk/src/pages/FlowEditor/components/forms/index.ts

@@ -18,6 +18,7 @@ import MapAndLabel from "@planx/components/MapAndLabel/Editor";
 import NextSteps from "@planx/components/NextSteps/Editor";
 import Notice from "@planx/components/Notice/Editor";
 import NumberInput from "@planx/components/NumberInput/Editor";
+import Page from "@planx/components/Page/Editor";
 import Pay from "@planx/components/Pay/Editor";
 import PlanningConstraints from "@planx/components/PlanningConstraints/Editor";
 import PropertyInformation from "@planx/components/PropertyInformation/Editor";
@@ -58,6 +59,7 @@ const components: {
   "next-steps": NextSteps,
   notice: Notice,
   "number-input": NumberInput,
+  page: Page,
   pay: Pay,
   "planning-constraints": PlanningConstraints,
   "property-information": PropertyInformation,

editor.planx.uk/src/pages/FlowEditor/data/types.ts

@@ -23,6 +23,7 @@ export const SLUGS: {
   [TYPES.NextSteps]: "next-steps",
   [TYPES.Notice]: "notice",
   [TYPES.NumberInput]: "number-input",
+  [TYPES.Page]: "page",
   [TYPES.Pay]: "pay",
   [TYPES.PlanningConstraints]: "planning-constraints",
   [TYPES.PropertyInformation]: "property-information",

editor.planx.uk/src/pages/Preview/Node.tsx

@@ -18,6 +18,7 @@ import MapAndLabel from "@planx/components/MapAndLabel/Public";
 import NextSteps from "@planx/components/NextSteps/Public";
 import Notice from "@planx/components/Notice/Public";
 import NumberInput from "@planx/components/NumberInput/Public";
+import Page from "@planx/components/Page/Public";
 import Pay from "@planx/components/Pay/Public";
 import PlanningConstraints from "@planx/components/PlanningConstraints/Public";
 import PropertyInformation from "@planx/components/PropertyInformation/Public";
@@ -144,6 +145,9 @@ const Node: React.FC<Props> = (props) => {
     case TYPES.NumberInput:
       return <NumberInput {...allProps} />;
 
+    case TYPES.Page:
+      return <Page {...allProps} />;
+
     case TYPES.Pay:
       return <Pay {...allProps} />;