diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/Submissions/SubmissionsView.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/Submissions/SubmissionsView.tsx new file mode 100644 index 0000000000..be0006150a --- /dev/null +++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/Submissions/SubmissionsView.tsx @@ -0,0 +1,38 @@ +import List from "@mui/material/List"; +import ListItem from "@mui/material/ListItem"; +import Typography from "@mui/material/Typography"; +import DelayedLoadingIndicator from "components/DelayedLoadingIndicator"; +import ErrorFallback from "components/ErrorFallback"; +import React from "react"; + +import { SubmissionData } from "./submissionData"; + +interface SubmissionsViewProps { + applications: SubmissionData[]; + loading: boolean; + error: Error | undefined; +} + +const SubmissionsView: React.FC = ({ + applications, + loading, + error, +}) => { + if (loading) return ; + if (error) return ; + if (applications.length === 0) + return ( + + No submitted applications found for this service. + + ); + return ( + + {applications.map((application, index) => ( + {application.sessionId} + ))} + + ); +}; + +export default SubmissionsView; diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/Submissions/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/Submissions/index.tsx index cf8cafe475..a4d190701b 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/Submissions/index.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/Submissions/index.tsx @@ -1,9 +1,21 @@ import Box from "@mui/material/Box"; import Typography from "@mui/material/Typography"; import React from "react"; -import { FeaturePlaceholder } from "ui/editor/FeaturePlaceholder"; + +import { useStore } from "../../../lib/store"; +import { useSubmittedApplications } from "./submissionData"; +import SubmissionsView from "./SubmissionsView"; const Submissions: React.FC = () => { + const [flowSlug, teamSlug] = useStore((state) => [ + state.flowSlug, + state.teamSlug, + ]); + const { applications, loading, error } = useSubmittedApplications({ + flowSlug, + teamSlug, + }); + return ( @@ -13,7 +25,11 @@ const Submissions: React.FC = () => { View data on the user submitted applications for this service. - + ); diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/Submissions/submissionData.ts b/editor.planx.uk/src/pages/FlowEditor/components/Settings/Submissions/submissionData.ts new file mode 100644 index 0000000000..bf716a6949 --- /dev/null +++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/Submissions/submissionData.ts @@ -0,0 +1,93 @@ +import { useQuery } from "@apollo/client"; +import gql from "graphql-tag"; +import { useMemo } from "react"; + +type PaymentRequest = { + id: string; + createdAt: string; + paidAt: string; + govPaymentId: string; +}; + +type PaymentStatus = { + govPaymentId: string; + createdAt: string; + status: string; +}; + +type BopsApplication = { + id: string; + submittedAt: string; + destinationUrl: string; +}; + +type EmailApplication = { + id: string; + recipient: string; + submittedAt: string; +}; + +type UniformApplication = { + id: string; + submittedAt: string; +}; + +export type SubmissionData = { + sessionId: string; + submittedAt: Date | string; + paymentRequests: PaymentRequest[] | null; + paymentStatus: PaymentStatus[] | null; + bopsApplications: BopsApplication[] | null; + uniformApplications: UniformApplication[] | null; + emailApplications: EmailApplication[] | null; +}; + +export type SubmittedApplicationsQueryResult = { + submissionServicesSummary: SubmissionData[]; +}; + +export const SUBMITTED_APPLICATIONS_QUERY = gql` + query SubmittedApplications($service_slug: String!, $team_slug: String!) { + submissionServicesSummary: 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 + } + } +`; + +type UseSubmittedApplicationsParams = { + flowSlug?: string; + teamSlug?: string; +}; + +export const useSubmittedApplications = ({ + flowSlug, + teamSlug, +}: UseSubmittedApplicationsParams) => { + const { data, loading, error } = useQuery( + SUBMITTED_APPLICATIONS_QUERY, + { + variables: { service_slug: flowSlug, team_slug: teamSlug }, + skip: !flowSlug || !teamSlug, + }, + ); + + const applications = useMemo( + () => data?.submissionServicesSummary || [], + [data], + ); + + return { applications, loading, error }; +};