diff --git a/src/app/components/pages/Contact.tsx b/src/app/components/pages/Contact.tsx index 0ea91c6c3b..cdd190f3a2 100644 --- a/src/app/components/pages/Contact.tsx +++ b/src/app/components/pages/Contact.tsx @@ -64,12 +64,20 @@ const determineUrlQueryPresets = (user?: Immutable | null) => { } }; + const setPageNotFoundPresets = () => { + presetSubject = `Page not found "${urlQuery.page ?? ""}"`; + presetUrl = `Page link: ${urlQuery.url}`; + presetPlaceholder = "Please describe how you reached this page and what you expected to see."; + }; + if (urlQuery?.preset == "teacherRequest" && user?.loggedIn && !isTeacherOrAbove(user)) { setTeacherRequestPresets(user); } else if (urlQuery?.preset == "accountDeletion" && user?.loggedIn) { setAccountDeletionPresets(user); } else if (urlQuery?.preset == "contentProblem") { setContentProblemPresets(); + } else if (urlQuery?.preset == "pageNotFound") { + setPageNotFoundPresets(); } return [ diff --git a/src/app/components/pages/NotFound.tsx b/src/app/components/pages/NotFound.tsx index 44b6232f12..e7e42b09e4 100644 --- a/src/app/components/pages/NotFound.tsx +++ b/src/app/components/pages/NotFound.tsx @@ -5,14 +5,29 @@ import { TitleAndBreadcrumb } from "../elements/TitleAndBreadcrumb"; export const NotFound = () => { const { pathname, state } = useLocation<{ overridePathname?: string }>(); + const missingPageId = state?.overridePathname || pathname; + const contactUrl = + `/contact?preset=pageNotFound&page=${encodeURIComponent(missingPageId)}` + + `&url=${encodeURIComponent(globalThis.location.href)}`; return (
- +

- {"We're sorry, page not found: "} - {(state && state.overridePathname) || pathname} +

+ {"Sorry, we couldn't find the page you were looking for: "} + {missingPageId} +

+

{"If you entered a web address, check it was correct."}

+

{"If you pasted the web address, check you copied the entire address."}

+

+ {"If the web address is correct or you selected a link or button, please"}{" "} + + contact us + {" "} + {"to let us know."} +

diff --git a/src/test/pages/Contact.test.tsx b/src/test/pages/Contact.test.tsx index 990c100010..a0de67c428 100644 --- a/src/test/pages/Contact.test.tsx +++ b/src/test/pages/Contact.test.tsx @@ -213,6 +213,26 @@ describe("Contact form presets", () => { ); }); + it("shows page-not-found subject when pageNotFound preset is provided", async () => { + renderContactUs(); + setLocation("?preset=pageNotFound&page=%2Fmissing-page"); + const { firstName, subject } = formFields; + await waitFor(() => expect(firstName()).not.toHaveValue("")); + expect(subject()).toHaveValue('Page not found "/missing-page"'); + }); + + it("includes the page URL in the message if submitting a form with pageNotFound preset", async () => { + renderContactUs(); + setLocation("?preset=pageNotFound&page=%2Fmissing-page&url=https://example.com/missing-page"); + const { firstName, message } = formFields; + await waitFor(() => expect(firstName()).not.toHaveValue("")); + await userEvent.type(message(), "Test message"); + await clickButton("Submit"); + expect(contactFormSubmitSpy).toHaveBeenCalledWith( + expect.objectContaining({ message: expect.stringContaining("https://example.com/missing-page") }), + ); + }); + const testFields = ["subject", "message"]; it.each(testFields)("includes a custom %s if provided in the URL", async (field) => { diff --git a/src/test/pages/NotFound.test.tsx b/src/test/pages/NotFound.test.tsx new file mode 100644 index 0000000000..05fc12c26f --- /dev/null +++ b/src/test/pages/NotFound.test.tsx @@ -0,0 +1,18 @@ +import { screen } from "@testing-library/react"; +import { renderTestEnvironment } from "../utils"; +import { NotFound } from "../../app/components/pages/NotFound"; + +describe("NotFound page", () => { + it("links to contact form using pageNotFound preset and page id", () => { + renderTestEnvironment({ + PageComponent: NotFound, + initialRouteEntries: ["/missing-page"], + }); + + const contactLink = screen.getByRole("link", { name: /contact us/i }); + expect(contactLink).toHaveAttribute( + "href", + expect.stringContaining("/contact?preset=pageNotFound&page=%2Fmissing-page&url="), + ); + }); +});