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}/verify-email`, // redirect to verify email before download
         ...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/package.json

@@ -16,6 +16,7 @@
     "@mui/utils": "^5.15.11",
     "@opensystemslab/map": "1.0.0-alpha.4",
     "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#ccf9ac3",
+    "@tanstack/react-query": "^5.61.3",
     "@tiptap/core": "^2.4.0",
     "@tiptap/extension-bold": "^2.0.3",
     "@tiptap/extension-bubble-menu": "^2.1.13",
@@ -117,6 +118,7 @@
     "@storybook/react-vite": "^8.3.1",
     "@storybook/test": "^8.3.1",
     "@storybook/theming": "^8.3.1",
+    "@tanstack/eslint-plugin-query": "^5.61.3",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.2.1",
     "@testing-library/user-event": "^14.4.3",

editor.planx.uk/src/index.tsx

@@ -6,6 +6,7 @@ import { ApolloProvider } from "@apollo/client";
 import CssBaseline from "@mui/material/CssBaseline";
 import { StyledEngineProvider, ThemeProvider } from "@mui/material/styles";
 import { MyMap } from "@opensystemslab/map";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ToastContextProvider } from "contexts/ToastContext";
 import { getCookie, setCookie } from "lib/cookie";
 import ErrorPage from "pages/ErrorPage";
@@ -22,6 +23,8 @@ import { client } from "./lib/graphql";
 import navigation from "./lib/navigation";
 import { defaultTheme } from "./theme";
 
+const queryClient = new QueryClient();
+
 if (import.meta.env.VITE_APP_ENV !== "production") {
   console.log(`ENV: ${import.meta.env.VITE_APP_ENV}`);
 }
@@ -95,20 +98,22 @@ const Layout: React.FC<{
 
 root.render(
   <ToastContextProvider>
-    <ApolloProvider client={client}>
-      <AnalyticsProvider>
-        <Router context={{ currentUser: hasJWT() }} navigation={navigation}>
-          <HelmetProvider>
-            <Layout>
-              <CssBaseline />
-              <Suspense fallback={null}>
-                <View />
-              </Suspense>
-            </Layout>
-          </HelmetProvider>
-        </Router>
-      </AnalyticsProvider>
-    </ApolloProvider>
-    <ToastContainer icon={false} theme="colored" />
-  </ToastContextProvider>,
+    <QueryClientProvider client={queryClient}>
+      <ApolloProvider client={client}>
+        <AnalyticsProvider>
+          <Router context={{ currentUser: hasJWT() }} navigation={navigation}>
+            <HelmetProvider>
+              <Layout>
+                <CssBaseline />
+                <Suspense fallback={null}>
+                  <View />
+                </Suspense>
+              </Layout>
+            </HelmetProvider>
+          </Router>
+        </AnalyticsProvider>
+      </ApolloProvider>
+      <ToastContainer icon={false} theme="colored" />
+    </QueryClientProvider>
+  </ToastContextProvider>
 );

editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts

@@ -21,11 +21,10 @@ import axios from "axios";
 import { client } from "lib/graphql";
 import navigation from "lib/navigation";
 import debounce from "lodash/debounce";
-import isEmpty from "lodash/isEmpty";
-import omitBy from "lodash/omitBy";
 import { customAlphabet } from "nanoid-good";
 import en from "nanoid-good/locale/en";
 import { type } from "ot-json0";
+import { urlWithParams } from "utils";
 import type { StateCreator } from "zustand";
 import { persist } from "zustand/middleware";
 
@@ -507,11 +506,6 @@ export const editorStore: StateCreator<
   async publishFlow(flowId: string, summary?: string) {
     const token = get().jwt;
 
-    const urlWithParams = (url: string, params: any) =>
-      [url, new URLSearchParams(omitBy(params, isEmpty))]
-        .filter(Boolean)
-        .join("?");
-
     const { data } = await axios.post<PublishFlowResponse>(
       urlWithParams(
         `${import.meta.env.VITE_APP_API_URL}/flows/${flowId}/publish`,

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 params={{ sessionId: "1" }} />,
+};