Redirect download link to basic verify email page

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

@@ -33,14 +33,16 @@ 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}`;
 
     // 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: `${process.env.API_URL_EXT}/download-application-files/${sessionId}?email=${teamSettings.submissionEmail}&localAuthority=${localAuthority}`,
+        downloadLink: `${serviceURL}/verify-email`,
         ...teamSettings,
       },
     };

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/VerifyEmail/VerifyEmail.stories.tsx

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

editor.planx.uk/src/pages/VerifyEmail/VerifyEmail.tsx

@@ -0,0 +1,74 @@
+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 { useFormik } from "formik";
+import React from "react";
+import InputLabel from "ui/public/InputLabel";
+import Input from "ui/shared/Input/Input";
+import InputRow from "ui/shared/InputRow";
+import { object, string } from "yup";
+
+const verifyEmailSchema = object({
+  email: string().email("Invalid email").required("Email address required"),
+});
+
+// interface VerifyEmailProps {
+//   handleSubmit: (email: string) => void;
+// }
+
+// export const VerifyEmail = ({
+//   handleSubmit,
+// }: VerifyEmailProps): JSX.Element => {
+
+export const VerifyEmail = (): JSX.Element => {
+  const handleSubmit = (email: string) => {
+    console.log("submitting!", email);
+  };
+
+  const formik = useFormik({
+    initialValues: {
+      email: "",
+    },
+    onSubmit: (values) => handleSubmit(values.email),
+    validateOnChange: false,
+    validateOnBlur: false,
+    validationSchema: verifyEmailSchema,
+  });
+
+  return (
+    <Container maxWidth="contentWrap">
+      <Typography maxWidth="formWrap" variant="h1" pt={5} gutterBottom>
+        Download your application
+      </Typography>
+
+      <Box width="100%">
+        <Card handleSubmit={formik.handleSubmit}>
+          <CardHeader
+            title="Verify your email address"
+            description="We will use this to verify that you can download your application. 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>
+        </Card>
+      </Box>
+    </Container>
+  );
+};

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

@@ -6,6 +6,7 @@ import { client } from "../lib/graphql";
 import ErrorPage from "../pages/ErrorPage";
 import Login from "../pages/Login";
 import { isPreviewOnlyDomain, makeTitle } from "./utils";
+import { VerifyEmail } from "pages/VerifyEmail/VerifyEmail";
 
 type RoutingContext = {
   currentUser?: any;
@@ -30,6 +31,11 @@ const editorRoutes = mount({
         }),
   ),
 
+  ":team/:flow/verify-email": route({
+    title: makeTitle("Verify your email"),
+    view: <VerifyEmail />,
+  }),
+
   "/logout": map((): any => {
     try {
       client.resetStore();