wip

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

@@ -1,7 +1,7 @@
 import Card from "@planx/components/shared/Preview/Card";
 import { CardHeader } from "@planx/components/shared/Preview/CardHeader/CardHeader";
 import type { PublicProps } from "@planx/components/shared/types";
-import { useFormik } from "formik";
+import { FormikErrors, useFormik } from "formik";
 import React from "react";
 import InputLabel from "ui/public/InputLabel";
 import Input from "ui/shared/Input/Input";
@@ -14,7 +14,7 @@ import { userDataSchema } from "./model";
 
 export type Props = PublicProps<AddressInput>;
 
-interface FormProps {
+export interface FormProps {
   line1: string;
   line2: string;
   town: string;
@@ -50,16 +50,36 @@ export default function AddressInputComponent(props: Props): FCReturn {
         policyRef={props.policyRef}
         howMeasured={props.howMeasured}
       />
+      <AddressFields
+        id={props.id}
+        values={formik.values}
+        errors={formik.errors}
+        handleChange={formik.handleChange}
+      />
+    </Card>
+  );
+}
+
+interface AddressFieldsProps {
+  id?: string;
+  values: FormProps;
+  errors: FormikErrors<FormProps>;
+  handleChange: (e: React.ChangeEvent) => void;
+}
+
+export function AddressFields(props: AddressFieldsProps): FCReturn {
+  return (
+    <>
       <InputLabel label="Address line 1">
         <Input
           name="line1"
-          value={formik.values.line1}
+          value={props.values?.line1}
           bordered
-          errorMessage={formik.errors.line1}
-          onChange={formik.handleChange}
+          errorMessage={props.errors?.line1}
+          onChange={props.handleChange}
           id={`${props.id}-line1`}
           inputProps={{
-            "aria-describedby": formik.errors.line1
+            "aria-describedby": props.errors?.line1
               ? `${ERROR_MESSAGE}-${props.id}-line1`
               : "",
           }}
@@ -68,22 +88,22 @@ export default function AddressInputComponent(props: Props): FCReturn {
       <InputLabel label="Address line 2 (optional)">
         <Input
           name="line2"
-          value={formik.values.line2}
+          value={props.values?.line2}
           bordered
-          errorMessage={formik.errors.line2}
-          onChange={formik.handleChange}
+          errorMessage={props.errors?.line2}
+          onChange={props.handleChange}
         />
       </InputLabel>
       <InputLabel label="Town">
         <Input
           name="town"
-          value={formik.values.town}
+          value={props.values?.town}
           bordered
-          errorMessage={formik.errors.town}
-          onChange={formik.handleChange}
+          errorMessage={props.errors?.town}
+          onChange={props.handleChange}
           id={`${props.id}-town`}
           inputProps={{
-            "aria-describedby": formik.errors.town
+            "aria-describedby": props.errors?.town
               ? `${ERROR_MESSAGE}-${props.id}-town`
               : "",
           }}
@@ -92,23 +112,23 @@ export default function AddressInputComponent(props: Props): FCReturn {
       <InputLabel label="County (optional)">
         <Input
           name="county"
-          value={formik.values.county}
+          value={props.values?.county}
           bordered
-          errorMessage={formik.errors.county}
-          onChange={formik.handleChange}
+          errorMessage={props.errors?.county}
+          onChange={props.handleChange}
         />
       </InputLabel>
       <InputLabel label="Postcode">
         <InputRowItem width="40%">
           <Input
             name="postcode"
-            value={formik.values.postcode}
+            value={props.values?.postcode}
             bordered
-            errorMessage={formik.errors.postcode}
-            onChange={formik.handleChange}
+            errorMessage={props.errors?.postcode}
+            onChange={props.handleChange}
             id={`${props.id}-postcode`}
             inputProps={{
-              "aria-describedby": formik.errors.postcode
+              "aria-describedby": props.errors?.postcode
                 ? `${ERROR_MESSAGE}-${props.id}-postcode`
                 : "",
             }}
@@ -119,13 +139,13 @@ export default function AddressInputComponent(props: Props): FCReturn {
         <InputRowItem>
           <Input
             name="country"
-            value={formik.values.country}
+            value={props.values?.country}
             bordered
-            errorMessage={formik.errors.country}
-            onChange={formik.handleChange}
+            errorMessage={props.errors?.country}
+            onChange={props.handleChange}
           />
         </InputRowItem>
       </InputLabel>
-    </Card>
+    </>
   );
 }

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

@@ -12,14 +12,15 @@ export type Address = {
   country?: string;
 };
 
-export const userDataSchema: SchemaOf<Address> = object({
-  line1: string().required("Enter the first line of an address"),
-  line2: string(),
-  town: string().required("Enter a town"),
-  county: string(),
-  postcode: string().required("Enter a postcode"),
-  country: string(),
-});
+export const userDataSchema = (_input: AddressInput): SchemaOf<Address> =>
+  object({
+    line1: string().required("Enter the first line of an address"),
+    line2: string(),
+    town: string().required("Enter a town"),
+    county: string(),
+    postcode: string().required("Enter a postcode"),
+    country: string(),
+  });
 
 export interface AddressInput extends BaseNodeData {
   title: string;

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

@@ -25,6 +25,7 @@ import { OpenSpaceGLA } from "./schemas/GLA/OpenSpace";
 import { ParkingGLA } from "./schemas/GLA/ParkingGLA";
 import { ProtectedSpaceGLA } from "./schemas/GLA/ProtectedSpace";
 import { MaterialDetails } from "./schemas/Materials";
+import { Owners } from "./schemas/Owners";
 import { Parking } from "./schemas/Parking";
 import { ResidentialUnitsExisting } from "./schemas/ResidentialUnits/Existing";
 import { ResidentialUnitsExistingLDCE } from "./schemas/ResidentialUnits/ExistingLDCE";
@@ -71,6 +72,7 @@ export const SCHEMAS = [
   { name: "Parking details (GLA)", schema: ParkingGLA },
   { name: "Trees", schema: Trees },
   { name: "Trees (Map first)", schema: TreesMapFirst },
+  { name: "Owners", schema: Owners },
 ];
 
 function ListComponent(props: Props) {

editor.planx.uk/src/@planx/components/List/schemas/Owners.ts

@@ -0,0 +1,68 @@
+import { Schema } from "@planx/components/shared/Schema/model";
+import { TextInputType } from "@planx/components/TextInput/model";
+
+export const Owners: Schema = {
+  type: "Person",
+  fields: [
+    {
+      type: "question",
+      data: {
+        title: "What is the nature of their interest in the land?",
+        fn: "interest",
+        options: [
+          {
+            id: "owner",
+            data: { text: "Owner", val: "owner" },
+          },
+          {
+            id: "lessee",
+            data: { text: "Lessee", val: "lessee" },
+          },
+          {
+            id: "occupier",
+            data: { text: "Occupier", val: "occupier" },
+          },
+          {
+            id: "other",
+            data: { text: "Something else", val: "other" },
+          },
+        ],
+      },
+    },
+    {
+      type: "text",
+      data: {
+        title: "What is their full name?",
+        fn: "name",
+        type: TextInputType.Short,
+      },
+    },
+    {
+      type: "address",
+      data: {
+        title: "What is their address?",
+        fn: "address",
+      },
+    },
+    {
+      type: "question",
+      data: {
+        title: "Have you notified them?",
+        description:
+          "Anyone with an interest in the land should be notified before submitting this application.",
+        fn: "noticeGiven",
+        options: [
+          {
+            id: "yes",
+            data: { text: "Yes", val: "true" },
+          },
+          {
+            id: "no",
+            data: { text: "No", val: "false" },
+          },
+        ],
+      },
+    },
+  ],
+  min: 1,
+} as const;

editor.planx.uk/src/@planx/components/List/utils.tsx

@@ -16,14 +16,15 @@ const List = styled("ul")(() => ({
  * @returns string | React.JSX.Element - the `text` for the given value `val`, or the original value
  */
 export function formatSchemaDisplayValue(
-  value: string | string[],
+  value: string | string[] | Record<string, string>,
   field: Field,
 ) {
   switch (field.type) {
     case "number":
       return field.data.units ? `${value} ${field.data.units}` : value;
     case "text":
     case "date":
+    case "address":
       return value;
     case "checklist": {
       const matchingOptions = field.data.options.filter((option) =>

editor.planx.uk/src/@planx/components/shared/Schema/InputFields/AddressFieldInput.tsx

@@ -0,0 +1,36 @@
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import {
+  AddressFields,
+  FormProps,
+} from "@planx/components/AddressInput/Public";
+import React from "react";
+import InputLegend from "ui/editor/InputLegend";
+
+import { AddressField } from "../model";
+import { getFieldProps, Props } from ".";
+import { FieldInputDescription } from "./shared";
+
+export const AddressFieldInput: React.FC<Props<AddressField>> = (props) => {
+  const { data, formik } = props;
+  const { id, errorMessage, value } = getFieldProps(props);
+
+  return (
+    <Box component="fieldset">
+      <InputLegend>
+        <Typography variant="body1" pb={1}>
+          <strong>{data.title}</strong>
+        </Typography>
+      </InputLegend>
+      {data.description && (
+        <FieldInputDescription description={data.description} />
+      )}
+      <AddressFields
+        id={id}
+        values={value as unknown as FormProps}
+        errors={errorMessage}
+        handleChange={formik.handleChange}
+      />
+    </Box>
+  );
+};

editor.planx.uk/src/@planx/components/shared/Schema/InputFields/index.tsx

@@ -7,6 +7,7 @@ import { get } from "lodash";
 import React from "react";
 import { exhaustiveCheck } from "utils";
 
+import { AddressFieldInput } from "./AddressFieldInput";
 import { ChecklistFieldInput } from "./ChecklistFieldInput";
 import { DateFieldInput } from "./DateFieldInput";
 import { MapFieldInput } from "./MapFieldInput";
@@ -57,6 +58,8 @@ export const InputFields: React.FC<Props<Field>> = (props) => {
       return <DateFieldInput {...props} />;
     case "map":
       return <MapFieldInput {...props} />;
+    case "address":
+      return <AddressFieldInput {...props} />;
     default:
       return exhaustiveCheck(type);
   }

editor.planx.uk/src/@planx/components/shared/Schema/model.ts

@@ -1,3 +1,7 @@
+import {
+  AddressInput,
+  userDataSchema as addressValidationSchema,
+} from "@planx/components/AddressInput/model";
 import { Feature } from "geojson";
 import { exhaustiveCheck } from "utils";
 import { array, BaseSchema, object, ObjectSchema, string } from "yup";
@@ -81,6 +85,11 @@ export type DateField = {
   data: DateInput & { fn: string };
 };
 
+export type AddressField = {
+  type: "address";
+  data: AddressInput & { fn: string };
+};
+
 export type MapField = {
   type: "map";
   data: {
@@ -106,6 +115,7 @@ export type Field =
   | QuestionField
   | ChecklistField
   | DateField
+  | AddressField
   | MapField;
 
 /**
@@ -120,8 +130,8 @@ export interface Schema {
 
 export type SchemaUserResponse = Record<
   Field["data"]["fn"],
-  string | string[] | any[]
->; // string | string[] | Feature[]
+  string | string[] | Record<string, string> | any[]
+>; // string | string[] | Record<string, string> | Feature[]
 
 /**
  * Output data from a form using the useSchema hook
@@ -156,6 +166,9 @@ const generateValidationSchemaForFields = (
       case "date":
         fieldSchemas[data.fn] = dateValidationSchema(data);
         break;
+      case "address":
+        fieldSchemas[data.fn] = addressValidationSchema(data);
+        break;
       case "map":
         fieldSchemas[data.fn] = mapValidationSchema(data);
         break;
@@ -187,9 +200,13 @@ export const generateValidationSchema = (schema: Schema) => {
 export const generateInitialValues = (schema: Schema): SchemaUserResponse => {
   const initialValues: SchemaUserResponse = {};
   schema.fields.forEach((field) => {
-    ["checklist", "map"].includes(field.type)
-      ? (initialValues[field.data.fn] = [])
-      : (initialValues[field.data.fn] = "");
+    if (["checklist", "map"].includes(field.type)) {
+      initialValues[field.data.fn] = [];
+    } else if (field.type === "address") {
+      initialValues[field.data.fn] = {};
+    } else {
+      initialValues[field.data.fn] = "";
+    }
   });
   return initialValues;
 };