feat: New types in Editor

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

@@ -2,7 +2,7 @@ import Warning from "@mui/icons-material/Warning";
 import Box from "@mui/material/Box";
 import Grid from "@mui/material/Grid";
 import Typography from "@mui/material/Typography";
-import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
+import { ComponentType as TYPES, SendIntegration } from "@opensystemslab/planx-core/types";
 import { getIn, useFormik } from "formik";
 import React from "react";
 import ModalSection from "ui/editor/ModalSection";
@@ -14,7 +14,7 @@ import InputRow from "ui/shared/InputRow";
 import { array, object } from "yup";
 
 import { EditorProps, ICONS } from "../ui";
-import { Destination, Send } from "./model";
+import { Send } from "./model";
 import { parseContent } from "./model";
 
 export type Props = EditorProps<TYPES.Send, Send>;
@@ -35,40 +35,40 @@ const SendComponent: React.FC<Props> = (props) => {
         .test({
           name: "atLeastOneChecked",
           message: "Select at least one destination",
-          test: (destinations?: Array<Destination>) => {
+          test: (destinations?: Array<SendIntegration>) => {
             return Boolean(destinations && destinations.length > 0);
           },
         }),
     }),
   });
 
-  const options: { value: Destination; label: string }[] = [
+  const options: { value: SendIntegration; label: string }[] = [
     {
-      value: Destination.BOPS,
+      value: "bops",
       label: "BOPS",
     },
     {
-      value: Destination.Uniform,
+      value: "uniform",
       label: "Uniform",
     },
     {
-      value: Destination.Idox,
+      value: "idox",
       label: "Idox Nexus (TESTING ONLY)",
     },
     {
-      value: Destination.Email,
+      value: "email",
       label: "Email to planning office",
     },
     {
-      value: Destination.S3,
+      value: "s3",
       label: "Upload to AWS S3 bucket",
     },
   ];
 
   const changeCheckbox =
-    (value: Destination) =>
+    (value: SendIntegration) =>
     (_checked: React.MouseEvent<HTMLButtonElement, MouseEvent> | undefined) => {
-      let newCheckedValues: Destination[];
+      let newCheckedValues: SendIntegration[];
 
       if (formik.values.destinations.includes(value)) {
         newCheckedValues = formik.values.destinations.filter(
@@ -90,14 +90,14 @@ const SendComponent: React.FC<Props> = (props) => {
       //   Don't actually restrict selection because flowSlug matching is imperfect for some valid test cases
       const teamSlug = window.location.pathname?.split("/")?.[1];
       const flowSlug = window.location.pathname?.split("/")?.[2];
-      if (value === Destination.BOPS && newCheckedValues.includes(value)) {
+      if (value === "bops" && newCheckedValues.includes(value)) {
         alert(
           "BOPS only accepts Lawful Development Certificate, Prior Approval, and Planning Permission submissions. Please do not select if you're building another type of submission service!",
         );
       }
 
       if (
-        value === Destination.Uniform &&
+        value === "uniform" &&
         newCheckedValues.includes(value) &&
         flowSlug !== "apply-for-a-lawful-development-certificate" &&
         !["buckinghamshire", "lambeth", "southwark"].includes(teamSlug)
@@ -108,7 +108,7 @@ const SendComponent: React.FC<Props> = (props) => {
       }
 
       if (
-        value === Destination.S3 &&
+        value === "s3" &&
         newCheckedValues.includes(value) &&
         !["barnet", "lambeth"].includes(teamSlug)
       ) {

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

@@ -5,7 +5,6 @@ import { vi } from "vitest";
 import { axe } from "vitest-axe";
 
 import hasuraEventsResponseMock from "./mocks/hasuraEventsResponseMock";
-import { Destination } from "./model";
 import SendComponent from "./Public";
 
 vi.mock("axios");
@@ -30,7 +29,7 @@ it("should not have any accessibility violations", async () => {
   const { container } = setup(
     <SendComponent
       title="Send"
-      destinations={[Destination.BOPS, Destination.Uniform]}
+      destinations={["bops", "uniform"]}
     />,
   );
   const results = await axe(container);

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

@@ -1,22 +1,29 @@
 import ErrorOutline from "@mui/icons-material/ErrorOutline";
 import Typography from "@mui/material/Typography";
-import axios from "axios";
+import { SendIntegration } from "@opensystemslab/planx-core/types";
+import axios, { AxiosResponse } from "axios";
 import DelayedLoadingIndicator from "components/DelayedLoadingIndicator";
 import { useStore } from "pages/FlowEditor/lib/store";
 import React, { useEffect } from "react";
 import { useAsync } from "react-use";
+import { AsyncState } from "react-use/lib/useAsyncFn";
 
 import Card from "../shared/Preview/Card";
 import { WarningContainer } from "../shared/Preview/WarningContainer";
 import { makeData } from "../shared/utils";
 import { PublicProps } from "../ui";
 import {
   DEFAULT_DESTINATION,
-  Destination,
   getCombinedEventsPayload,
   Send,
 } from "./model";
 
+/** Response returned by /create-send-events endpoint */
+type SendResponse = Record<SendIntegration, { "event_id": string }>;
+
+/** State generated by useAsync to hold SendResponse */
+type SendRequestState = AsyncState<AxiosResponse<SendResponse>>
+
 export type Props = PublicProps<Send>;
 
 const SendComponent: React.FC<Props> = ({
@@ -61,10 +68,9 @@ const CreateSendEvents: React.FC<Props> = ({
   ]);
 
   // Send makes a single request to create scheduled events in Hasura, then those events make the actual submission requests with retries etc
-  const url = `${
-    import.meta.env.VITE_APP_API_URL
-  }/create-send-events/${sessionId}`;
-  const request: any = useAsync(async () => {
+  const url = `${import.meta.env.VITE_APP_API_URL
+    }/create-send-events/${sessionId}`;
+  const request: SendRequestState = useAsync(async () => {
     const combinedEventsPayload = getCombinedEventsPayload({
       destinations,
       teamSlug,
@@ -77,56 +83,13 @@ const CreateSendEvents: React.FC<Props> = ({
 
   useEffect(() => {
     const isReady = !request.loading && !request.error && request.value;
+    if (!isReady) return;
 
-    if (
-      destinations.includes(Destination.BOPS) &&
-      isReady &&
-      props.handleSubmit
-    ) {
-      props.handleSubmit(
-        makeData(props, request.value.bops?.event_id, "bopsSendEventId"),
-      );
-    }
-
-    if (
-      destinations.includes(Destination.Uniform) &&
-      isReady &&
-      props.handleSubmit
-    ) {
-      props.handleSubmit(
-        makeData(props, request.value.uniform?.event_id, "uniformSendEventId"),
-      );
-    }
-
-    if (
-      destinations.includes(Destination.Idox) &&
-      isReady &&
-      props.handleSubmit
-    ) {
-      props.handleSubmit(
-        makeData(props, request.value.idox?.event_id, "idoxSendEventId"),
-      );
-    }
-
-    if (
-      destinations.includes(Destination.Email) &&
-      isReady &&
-      props.handleSubmit
-    ) {
-      props.handleSubmit(
-        makeData(props, request.value.email?.event_id, "emailSendEventId"),
-      );
-    }
-
-    if (
-      destinations.includes(Destination.S3) &&
-      isReady &&
-      props.handleSubmit
-    ) {
-      props.handleSubmit(
-        makeData(props, request.value.s3?.event_id, "s3SendEventId"),
+    destinations.forEach((destination) => {
+      props.handleSubmit && props.handleSubmit(
+        makeData(props, request.value.data[destination]?.event_id, `${destination}SendEventId`),
       );
-    }
+    })
   }, [request.loading, request.error, request.value, destinations, props]);
 
   if (request.loading) {

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

@@ -1,13 +1,9 @@
+import { SendIntegration } from "@opensystemslab/planx-core/types";
+
 import type { Store } from "../../../pages/FlowEditor/lib/store";
 import { BaseNodeData, parseBaseNodeData } from "../shared";
 
-export enum Destination {
-  BOPS = "bops",
-  Uniform = "uniform",
-  Idox = "idox",
-  Email = "email",
-  S3 = "s3",
-}
+type CombinedEventsPayload = Partial<Record<SendIntegration, EventPayload>>;
 
 interface EventPayload {
   localAuthority: string;
@@ -18,81 +14,64 @@ interface EventPayload {
 
 export interface Send extends BaseNodeData {
   title: string;
-  destinations: Destination[];
+  destinations: SendIntegration[];
 }
 
 export const DEFAULT_TITLE = "Send";
-export const DEFAULT_DESTINATION = Destination.Email;
+export const DEFAULT_DESTINATION = "email";
 
 export const parseContent = (data: Record<string, any> | undefined): Send => ({
   ...parseBaseNodeData(data),
   title: data?.title || DEFAULT_TITLE,
   destinations: data?.destinations || [DEFAULT_DESTINATION],
 });
 
+const isSendingToUniform = (
+  payload: CombinedEventsPayload
+): payload is CombinedEventsPayload & { uniform: EventPayload } =>
+  "uniform" in payload;
+
 export function getCombinedEventsPayload({
   destinations,
   teamSlug,
   passport,
   sessionId,
 }: {
-  destinations: Destination[];
+  destinations: SendIntegration[];
   teamSlug: string;
   passport: Store.Passport;
   sessionId: string;
 }) {
-  const combinedEventsPayload: Record<string, EventPayload> = {};
+  const payload: CombinedEventsPayload = {};
 
-  // Format application user data as required by BOPS
-  if (destinations.includes(Destination.BOPS)) {
-    combinedEventsPayload[Destination.BOPS] = {
+  // Construct payload containing details for each send destination
+  destinations.forEach((destination) => {
+    payload[destination] = {
       localAuthority: teamSlug,
       body: { sessionId },
     };
-  }
+  });
 
-  if (destinations.includes(Destination.Email)) {
-    combinedEventsPayload[Destination.Email] = {
-      localAuthority: teamSlug,
-      body: { sessionId },
-    };
-  }
+  // Bucks has 3 instances of Uniform for 4 legacy councils, set teamSlug to pre-merger council name
+  const isUniformOverrideRequired =
+    isSendingToUniform(payload) && teamSlug === "buckinghamshire";
 
-  // Format application user data as required by Idox/Uniform
-  if (destinations.includes(Destination.Uniform)) {
+  if (isUniformOverrideRequired) {
     let uniformTeamSlug = teamSlug;
-    // Bucks has 3 instances of Uniform for 4 legacy councils, set teamSlug to pre-merger council name
-    if (uniformTeamSlug === "buckinghamshire") {
-      uniformTeamSlug = passport.data?.["property.localAuthorityDistrict"]
-        ?.filter((name: string) => name !== "Buckinghamshire")[0]
-        ?.toLowerCase()
-        ?.replace(/\W+/g, "-");
 
-      // South Bucks & Chiltern share an Idox connector, route addresses in either to Chiltern
-      if (uniformTeamSlug === "south-bucks") {
-        uniformTeamSlug = "chiltern";
-      }
-    }
+    uniformTeamSlug = passport.data?.["property.localAuthorityDistrict"]
+      ?.filter((name: string) => name !== "Buckinghamshire")[0]
+      ?.toLowerCase()
+      ?.replace(/\W+/g, "-");
 
-    combinedEventsPayload[Destination.Uniform] = {
-      localAuthority: uniformTeamSlug,
-      body: { sessionId },
-    };
-  }
-
-  if (destinations.includes(Destination.Idox)) {
-    combinedEventsPayload[Destination.Idox] = {
-      localAuthority: teamSlug,
-      body: { sessionId },
-    };
-  }
+    // South Bucks & Chiltern share an Idox connector, route addresses in either to Chiltern
+    if (uniformTeamSlug === "south-bucks") {
+      uniformTeamSlug = "chiltern";
+    }
 
-  if (destinations.includes(Destination.S3)) {
-    combinedEventsPayload[Destination.S3] = {
-      localAuthority: teamSlug,
-      body: { sessionId },
-    };
+    // Apply override
+    payload["uniform"].localAuthority = uniformTeamSlug;
   }
 
-  return combinedEventsPayload;
+  return payload;
 }