feat: query submission_services_summary and log result

- Setup up the types and function to query the submission_services_summary for the pertinent data
- For now simply log the data out in the console

editor.planx.uk/src/pages/FlowEditor/components/Settings/Submissions/index.tsx

@@ -1,9 +1,35 @@
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { FeaturePlaceholder } from "ui/editor/FeaturePlaceholder";
 
+import { useStore } from "../../../lib/store";
+import {
+  fetchSubmittedApplications,
+  SubmissionData,
+} from "./submissionDataTypesAndQueries";
+
 const Submissions: React.FC = () => {
+  const flowSlug = useStore.getState().flowSlug;
+  const teamSlug = useStore.getState().teamSlug;
+  const [applications, setApplications] = useState<SubmissionData[]>();
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    if (flowSlug && teamSlug) {
+      fetchSubmittedApplications(flowSlug, teamSlug)
+        .then((result) => setApplications(result.submission_services_summary))
+        .catch((error) => {
+          setError(error);
+        });
+    }
+  }, [flowSlug, teamSlug]);
+
+  useEffect(() => {
+    console.log(applications);
+    console.log(error);
+  }, [applications, error]);
+
   return (
     <Box>
       <Typography variant="h2" component="h3" gutterBottom>

editor.planx.uk/src/pages/FlowEditor/components/Settings/Submissions/submissionDataTypesAndQueries.ts

@@ -0,0 +1,75 @@
+import gql from "graphql-tag";
+import { client } from "lib/graphql";
+
+type PaymentRequest = {
+  id: string;
+  created_at: Date;
+  paidAt: Date;
+  govPaymentId: string;
+};
+
+type PaymentStatus = {
+  govPaymentId: string;
+  created_at: Date;
+  status: string;
+};
+
+type BopsApplication = {
+  id: string;
+  submittedAt: Date;
+  destinationUrl: string;
+};
+
+type EmailApplication = {
+  id: string;
+  recipient: string;
+  submittedAt: Date;
+};
+
+type UniformApplication = {
+  id: string;
+  submittedAt: Date;
+};
+
+export type SubmissionData = {
+  sessionId: string;
+  submittedAt: Date | string;
+  paymentRequests: PaymentRequest[] | null;
+  paymentStatus: PaymentStatus[] | null;
+  bopsApplications: BopsApplication[] | null;
+  uniformApplications: UniformApplication[] | null;
+  emailApplications: EmailApplication[] | null;
+};
+
+export async function fetchSubmittedApplications(
+  flowSlug: string,
+  teamSlug: string,
+) {
+  const { data } = await client.query({
+    query: gql`
+      query SubmittedApplications($service_slug: String!, $team_slug: String!) {
+        submission_services_summary(
+          where: {
+            service_slug: { _eq: $service_slug }
+            team_slug: { _eq: $team_slug }
+            submitted_at: { _is_null: false }
+          }
+          order_by: { submitted_at: desc }
+        ) {
+          sessionId: session_id
+          submittedAt: submitted_at
+          paymentRequests: payment_requests
+          paymentStatus: payment_status
+          bopsApplications: bops_applications
+          uniformApplications: uniform_applications
+          emailApplications: email_applications
+        }
+      }
+    `,
+    variables: {
+      service_slug: flowSlug,
+      team_slug: teamSlug,
+    },
+  });
+  return data;
+}