Rename files to verifySubmissionEmail

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

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

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

@@ -18,14 +18,16 @@ import useQueryApplicationFileDownload, {
   DOWNLOAD_APPLICATION_FILE_QUERY_KEY,
 } from "./queries/useQueryApplicationFileDownload";
 
-const verifyEmailSchema = object({
+const verifySubmissionEmailSchema = object({
   email: string().email("Invalid email").required("Email address required"),
 });
-interface VerifyEmailProps {
+interface VerifySubmissionEmailProps {
   params: Record<string, string>;
 }
 
-export const VerifyEmail = ({ params }: VerifyEmailProps): JSX.Element => {
+export const VerifySubmissionEmail = ({
+  params,
+}: VerifySubmissionEmailProps): JSX.Element => {
   const { sessionId, team } = params;
   const [email, setEmail] = useState("");
   const emailInputIsValid = useMemo(() => email !== "", [email]);
@@ -81,12 +83,12 @@ export const VerifyEmail = ({ params }: VerifyEmailProps): JSX.Element => {
     },
     validateOnChange: false,
     validateOnBlur: false,
-    validationSchema: verifyEmailSchema,
+    validationSchema: verifySubmissionEmailSchema,
   });
   return (
     <Container maxWidth="contentWrap">
       <Typography maxWidth="formWrap" variant="h1" pt={5} gutterBottom>
-        Download your application
+        Download application
       </Typography>
       {isLoading ? (
         <DelayedLoadingIndicator />
@@ -96,7 +98,7 @@ export const VerifyEmail = ({ params }: VerifyEmailProps): JSX.Element => {
             <ErrorWrapper error={downloadApplicationError}>
               <>
                 <CardHeader
-                  title="Enter your planning office's email address"
+                  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>

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

@@ -0,0 +1,30 @@
+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");
+});
+
+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/routes/index.tsx

@@ -1,6 +1,6 @@
 import { compose, lazy, map, mount, redirect, route, withView } from "navi";
 import { loadingView } from "pages/layout/LoadingLayout";
-import { VerifyEmail } from "pages/VerifyEmail/VerifyEmail";
+import { VerifySubmissionEmail } from "pages/SubmissionDownload/VerifySubmissionEmail";
 import * as React from "react";
 
 import { client } from "../lib/graphql";
@@ -34,7 +34,7 @@ const editorRoutes = mount({
   "/:team/:flow/:sessionId/verify-email": map((req) => {
     return route({
       title: makeTitle("Verify your email"),
-      view: <VerifyEmail params={req.params} />,
+      view: <VerifySubmissionEmail params={req.params} />,
     });
   }),