feat: verify email before downloading application

api.planx.uk/modules/send/email/index.ts

@@ -33,14 +33,15 @@ export const sendToEmail: SendIntegrationController = async (
     // Get the applicant email and flow slug associated with the session
     const { email, flow } = await getSessionEmailDetailsById(sessionId);
     const flowName = flow.name;
+    const serviceURL = `${process.env.EDITOR_URL_EXT}/${localAuthority}/${flow.slug}/${sessionId}`;
 
     // Prepare email template
     const config: EmailSubmissionNotifyConfig = {
       personalisation: {
         serviceName: flowName,
         sessionId,
         applicantEmail: email,
-        downloadLink: `${process.env.API_URL_EXT}/download-application-files/${sessionId}?email=${teamSettings.submissionEmail}&localAuthority=${localAuthority}`,
+        downloadLink: `${serviceURL}/download-application`,
         ...teamSettings,
       },
     };

api.planx.uk/modules/send/email/service.ts

@@ -1,9 +1,9 @@
-import { gql } from "graphql-request";
-import { $api } from "../../../client/index.js";
 import type {
   Session,
   TeamContactSettings,
 } from "@opensystemslab/planx-core/types";
+import { gql } from "graphql-request";
+import { $api } from "../../../client/index.js";
 import type { EmailSubmissionNotifyConfig } from "../../../types.js";
 
 interface GetTeamEmailSettings {

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

@@ -38,7 +38,7 @@ export const ConfirmEmail: React.FC<{
         <CardHeader
           title="Enter your email address"
           description="We will use this to save your application so you can come back to it later. We will also email you updates about your application."
-        ></CardHeader>
+        />
         <InputRow>
           <InputLabel label={"Email address"} htmlFor={"email"}>
             <Input
@@ -54,7 +54,7 @@ export const ConfirmEmail: React.FC<{
               onChange={formik.handleChange}
               type="email"
               value={formik.values.email}
-            ></Input>
+            />
           </InputLabel>
         </InputRow>
         <InputRow>
@@ -72,7 +72,7 @@ export const ConfirmEmail: React.FC<{
               onChange={formik.handleChange}
               type="email"
               value={formik.values.confirmEmail}
-            ></Input>
+            />
           </InputLabel>
         </InputRow>
       </Card>
@@ -105,7 +105,7 @@ const SaveAndReturn: React.FC<{ children: React.ReactNode }> = ({
       {isEmailCaptured || isContentPage ? (
         children
       ) : (
-        <ConfirmEmail handleSubmit={handleSubmit}></ConfirmEmail>
+        <ConfirmEmail handleSubmit={handleSubmit} />
       )}
     </>
   );

editor.planx.uk/src/pages/SubmissionDownload/VerifySubmissionEmail.stories.tsx

@@ -0,0 +1,19 @@
+import { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+
+import { VerifySubmissionEmail } from "./VerifySubmissionEmail";
+
+const meta = {
+  title: "Design System/Pages/VerifySubmissionEmail",
+  component: VerifySubmissionEmail,
+} satisfies Meta<typeof VerifySubmissionEmail>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Basic = {
+  render: () => (
+    <VerifySubmissionEmail params={{ sessionId: "1", team: "PlanX" }} />
+  ),
+};

editor.planx.uk/src/pages/SubmissionDownload/VerifySubmissionEmail.tsx

@@ -0,0 +1,121 @@
+import Box from "@mui/material/Box";
+import Container from "@mui/material/Container";
+import Typography from "@mui/material/Typography";
+import Card from "@planx/components/shared/Preview/Card";
+import { CardHeader } from "@planx/components/shared/Preview/CardHeader/CardHeader";
+import { SummaryListTable } from "@planx/components/shared/Preview/SummaryList";
+import axios, { isAxiosError } from "axios";
+import DelayedLoadingIndicator from "components/DelayedLoadingIndicator/DelayedLoadingIndicator";
+import { useFormik } from "formik";
+import React, { useState } from "react";
+import InputLabel from "ui/public/InputLabel";
+import ErrorWrapper from "ui/shared/ErrorWrapper";
+import Input from "ui/shared/Input/Input";
+import InputRow from "ui/shared/InputRow";
+import { object, string } from "yup";
+
+import { downloadZipFile } from "./helpers/downloadZip";
+import { VerifySubmissionEmailProps } from "./types";
+
+export const DOWNLOAD_APPLICATION_FILE_URL = `${
+  import.meta.env.VITE_APP_API_URL
+}/download-application-files`;
+
+const verifySubmissionEmailSchema = object({
+  email: string().email("Invalid email").required("Email address required"),
+});
+export const VerifySubmissionEmail = ({
+  params,
+}: VerifySubmissionEmailProps): JSX.Element => {
+  const { sessionId, team } = params;
+  const [downloadApplicationError, setDownloadApplicationError] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const formik = useFormik({
+    initialValues: {
+      email: "",
+    },
+    onSubmit: async (values, { resetForm }) => {
+      setDownloadApplicationError("");
+      setLoading(true);
+      const url = `${DOWNLOAD_APPLICATION_FILE_URL}/${sessionId}/?email=${encodeURIComponent(
+        values.email,
+      )}&localAuthority=${team}`;
+      try {
+        const { data } = await axios.get(url, {
+          responseType: "arraybuffer",
+        });
+        downloadZipFile(data);
+        resetForm();
+        setLoading(false);
+      } catch (error) {
+        setLoading(false);
+        if (isAxiosError(error)) {
+          setDownloadApplicationError(
+            "Sorry, something went wrong. Please try again.",
+          );
+          resetForm();
+        }
+        console.error(error);
+      }
+    },
+    validateOnChange: false,
+    validateOnBlur: false,
+    validationSchema: verifySubmissionEmailSchema,
+  });
+  return (
+    <Container maxWidth="contentWrap">
+      <Typography maxWidth="formWrap" variant="h1" pt={5} gutterBottom>
+        Download application
+      </Typography>
+      {loading ? (
+        <DelayedLoadingIndicator />
+      ) : (
+        <Box width="100%">
+          <Card handleSubmit={formik.handleSubmit}>
+            <ErrorWrapper error={downloadApplicationError}>
+              <>
+                <CardHeader
+                  title="Verify your submission email address"
+                  description="We will use this to confirm that you have access to the submission email inbox that is set up for your team. Entering the correct email address will start the file download automatically."
+                />
+                <InputRow>
+                  <InputLabel label={"Email address"} htmlFor={"email"}>
+                    <Input
+                      bordered
+                      errorMessage={
+                        formik.touched.email && formik.errors.email
+                          ? formik.errors.email
+                          : undefined
+                      }
+                      id="email"
+                      name="email"
+                      onBlur={formik.handleBlur}
+                      onChange={formik.handleChange}
+                      type="email"
+                      value={formik.values.email}
+                    />
+                  </InputLabel>
+                </InputRow>
+                <Typography
+                  maxWidth="formWrap"
+                  variant="h2"
+                  pt={5}
+                  gutterBottom
+                >
+                  Application details
+                </Typography>
+                <SummaryListTable>
+                  <Box component="dt">Session ID</Box>
+                  <Box component="dd">{sessionId}</Box>
+                  <Box component="dt">Local Authority</Box>
+                  <Box component="dd">{team}</Box>
+                </SummaryListTable>
+              </>
+            </ErrorWrapper>
+          </Card>
+        </Box>
+      )}
+    </Container>
+  );
+};

editor.planx.uk/src/pages/SubmissionDownload/helpers/downloadZip.tsx

@@ -0,0 +1,19 @@
+export const downloadZipFile = (data: string) => {
+  if (!data) {
+    console.error("No data to download");
+    return;
+  }
+  const blobData = new Blob([data], { type: "application/zip" });
+  try {
+    const href = URL.createObjectURL(blobData);
+    const link = document.createElement("a");
+    link.href = href;
+    link.setAttribute("download", "application.zip");
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(href);
+  } catch (error) {
+    console.error("Error creating object URL:", error);
+  }
+};

editor.planx.uk/src/pages/SubmissionDownload/tests/VerifySubmissionEmail.test.tsx

@@ -0,0 +1,33 @@
+import { screen } from "@testing-library/react";
+import React from "react";
+import { setup } from "testUtils";
+
+import { VerifySubmissionEmail } from "../VerifySubmissionEmail";
+
+describe("when the VerifySubmissionEmail component renders", () => {
+  it("displays the email address input", () => {
+    setup(<VerifySubmissionEmail params={{ sessionId: "1" }} />);
+
+    expect(
+      screen.queryByText("Verify your submission email address"),
+    ).toBeInTheDocument();
+    expect(screen.queryByLabelText("Email address")).toBeInTheDocument();
+  });
+  it.todo("should not display an error message");
+  it.todo(
+    "shows sessionId and local authority in the application details table",
+  );
+});
+
+describe("when the user submits a correct email address", () => {
+  it.todo("displays visual feedback to the user");
+  it.todo("downloads the application file");
+});
+
+describe("when the user submits an incorrect email address", () => {
+  it.todo("displays a suitable error message");
+});
+
+describe("when user submits an email address and there is a server-side issue", () => {
+  it.todo("displays a suitable error message");
+});

editor.planx.uk/src/pages/SubmissionDownload/types.ts

@@ -0,0 +1,3 @@
+export interface VerifySubmissionEmailProps {
+  params: Record<string, string>;
+}

editor.planx.uk/src/routes/index.tsx

@@ -1,5 +1,6 @@
 import { compose, lazy, map, mount, redirect, route, withView } from "navi";
 import { loadingView } from "pages/layout/LoadingLayout";
+import { VerifySubmissionEmail } from "pages/SubmissionDownload/VerifySubmissionEmail";
 import * as React from "react";
 
 import { client } from "../lib/graphql";
@@ -30,6 +31,13 @@ const editorRoutes = mount({
         }),
   ),
 
+  "/:team/:flow/:sessionId/download-application": map((req) => {
+    return route({
+      title: makeTitle("Download application"),
+      view: <VerifySubmissionEmail params={req.params} />,
+    });
+  }),
+
   "/logout": map((): any => {
     try {
       client.resetStore();

editor.planx.uk/src/ui/shared/ErrorWrapper.tsx

@@ -7,7 +7,7 @@ import React, { ReactElement, useEffect } from "react";
 import { FONT_WEIGHT_SEMI_BOLD } from "theme";
 
 export interface Props {
-  error?: string;
+  error?: string | null;
   children?: ReactElement;
   id?: string;
   // "alert" - important and time-sensitive information (e.g. invalid input feedback)