From 2b2b3b8e4217287cf4f41ecf5ae91f52c38dc4f4 Mon Sep 17 00:00:00 2001
From: John Davey <john.davey@nice.org.uk>
Date: Thu, 1 Jun 2023 12:41:34 +0100
Subject: [PATCH] NXT-149 Reinstate jotforms files from broken PR to resolve
 teamcity VSC issues after Ians account deactivated

---
 .../JotFormEmbed/JotFormEmbed.module.scss     |   8 +
 .../JotFormEmbed/JotFormEmbed.test.tsx        | 177 +++++++++++++++++
 .../components/JotFormEmbed/JotFormEmbed.tsx  | 188 ++++++++++++++++++
 .../JotFormPage/JotFormPage.test.tsx          |  74 +++++++
 .../components/JotFormPage/JotFormPage.tsx    |  48 +++++
 .../JotFormPage/getGetServerSideProps.test.ts | 131 ++++++++++++
 .../JotFormPage/getGetServerSideProps.ts      |  48 +++++
 web/src/feeds/jotform/jotform.ts              |  22 ++
 web/src/feeds/jotform/types.ts                |  51 +++++
 ...procedures-notification.page.test.tsx.snap | 186 +++++++++++++++++
 ...-nice-content-in-the-uk.page.test.tsx.snap |  96 +++++++++
 ...onal-procedures-notification.page.test.tsx |  46 +++++
 ...ventional-procedures-notification.page.tsx |  45 +++++
 ...se-of-nice-content-in-the-uk.page.test.tsx |  46 +++++
 .../use-of-nice-content-in-the-uk.page.tsx    |  25 +++
 15 files changed, 1191 insertions(+)
 create mode 100644 web/src/components/JotFormEmbed/JotFormEmbed.module.scss
 create mode 100644 web/src/components/JotFormEmbed/JotFormEmbed.test.tsx
 create mode 100644 web/src/components/JotFormEmbed/JotFormEmbed.tsx
 create mode 100644 web/src/components/JotFormPage/JotFormPage.test.tsx
 create mode 100644 web/src/components/JotFormPage/JotFormPage.tsx
 create mode 100644 web/src/components/JotFormPage/getGetServerSideProps.test.ts
 create mode 100644 web/src/components/JotFormPage/getGetServerSideProps.ts
 create mode 100644 web/src/feeds/jotform/jotform.ts
 create mode 100644 web/src/feeds/jotform/types.ts
 create mode 100644 web/src/pages/forms/__snapshots__/interventional-procedures-notification.page.test.tsx.snap
 create mode 100644 web/src/pages/forms/__snapshots__/use-of-nice-content-in-the-uk.page.test.tsx.snap
 create mode 100644 web/src/pages/forms/interventional-procedures-notification.page.test.tsx
 create mode 100644 web/src/pages/forms/interventional-procedures-notification.page.tsx
 create mode 100644 web/src/pages/forms/use-of-nice-content-in-the-uk.page.test.tsx
 create mode 100644 web/src/pages/forms/use-of-nice-content-in-the-uk.page.tsx

diff --git a/web/src/components/JotFormEmbed/JotFormEmbed.module.scss b/web/src/components/JotFormEmbed/JotFormEmbed.module.scss
new file mode 100644
index 000000000..52ff438a0
--- /dev/null
+++ b/web/src/components/JotFormEmbed/JotFormEmbed.module.scss
@@ -0,0 +1,8 @@
+.iframe {
+  background: transparent;
+  border: 0;
+  max-width: 100%;
+  min-height: 540px;
+  min-width: 100%;
+  width: 100%;
+}
diff --git a/web/src/components/JotFormEmbed/JotFormEmbed.test.tsx b/web/src/components/JotFormEmbed/JotFormEmbed.test.tsx
new file mode 100644
index 000000000..7cc0f2f24
--- /dev/null
+++ b/web/src/components/JotFormEmbed/JotFormEmbed.test.tsx
@@ -0,0 +1,177 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+
+import { JotFormEmbed } from "./JotFormEmbed";
+
+describe("JotFormEmbed", () => {
+	it("should render iframe with title", () => {
+		render(<JotFormEmbed jotFormID="1234" title="This is a title" />);
+
+		expect(screen.getByTitle("This is a title")).toHaveProperty(
+			"tagName",
+			"IFRAME"
+		);
+	});
+
+	it("should create iframe source URL from form id, JotForm base URL and isIframeEmbed querystring", () => {
+		render(<JotFormEmbed jotFormID="1234" title="This is a title" />);
+
+		expect(screen.getByTitle("This is a title")).toHaveAttribute(
+			"src",
+			"https://next-web-tests.jotform.com/1234?isIframeEmbed=1"
+		);
+	});
+
+	it("should allow full screen on iframe", () => {
+		render(<JotFormEmbed jotFormID="1234" title="This is a title" />);
+
+		expect(screen.getByTitle("This is a title")).toHaveAttribute(
+			"allowfullscreen",
+			""
+		);
+	});
+
+	it("should allow geolocation, microphone and camera on iframe", () => {
+		render(<JotFormEmbed jotFormID="1234" title="This is a title" />);
+
+		expect(screen.getByTitle("This is a title")).toHaveAttribute(
+			"allow",
+			"geolocation; microphone; camera"
+		);
+	});
+
+	it("should use hidden overflow style", () => {
+		render(<JotFormEmbed jotFormID="1234" title="This is a title" />);
+
+		expect(screen.getByTitle("This is a title")).toHaveStyle({
+			overflow: "hidden",
+		});
+	});
+
+	it("should add data attribute with form ID for GTM tracking", () => {
+		render(<JotFormEmbed jotFormID="1234" title="This is a title" />);
+
+		expect(screen.getByTitle("This is a title")).toHaveAttribute(
+			"data-jotform-id",
+			"1234"
+		);
+	});
+
+	it("should use given initial height", () => {
+		render(
+			<JotFormEmbed jotFormID="1234" title="This is a title" height={999} />
+		);
+
+		expect(screen.getByTitle("This is a title")).toHaveStyle({
+			height: "999px",
+		});
+	});
+
+	it("should set height from iframe post message", () => {
+		render(<JotFormEmbed jotFormID="1234" title="This is a title" />);
+
+		fireEvent(
+			window,
+			new MessageEvent("message", {
+				data: "setHeight:987:1234",
+				origin: "https://next-web-tests.jotform.com",
+			})
+		);
+
+		expect(screen.getByTitle("This is a title")).toHaveStyle({
+			height: "987px",
+		});
+	});
+
+	it("should call given onSubmit callback prop after form submission event", () => {
+		const onSubmit = jest.fn();
+
+		render(
+			<JotFormEmbed
+				jotFormID="1234"
+				title="This is a title"
+				onSubmit={onSubmit}
+			/>
+		);
+
+		fireEvent(
+			window,
+			new MessageEvent("message", {
+				data: {
+					action: "submission-completed",
+					formID: "1234",
+				},
+				origin: "https://next-web-tests.jotform.com",
+			})
+		);
+
+		expect(onSubmit).toHaveBeenCalled();
+	});
+
+	it("should push submit event to data layer after form submission message", () => {
+		const dataLayerPush = jest.spyOn(window.dataLayer, "push");
+
+		render(<JotFormEmbed jotFormID="1234" title="This is a title" />);
+
+		fireEvent(
+			window,
+			new MessageEvent("message", {
+				data: {
+					action: "submission-completed",
+					formID: "1234",
+				},
+				origin: "https://next-web-tests.jotform.com",
+			})
+		);
+
+		expect(dataLayerPush).toHaveBeenCalledWith({
+			event: "Jotform Message",
+			jf_id: "1234",
+			jf_title: "This is a title",
+			jf_type: "submit",
+		});
+
+		dataLayerPush.mockReset();
+	});
+
+	it("should push progress event to data layer after scroll into view message", () => {
+		const dataLayerPush = jest.spyOn(window.dataLayer, "push");
+
+		render(<JotFormEmbed jotFormID="1234" title="This is a title" />);
+
+		fireEvent(
+			window,
+			new MessageEvent("message", {
+				data: "scrollIntoView::1234",
+				origin: "https://next-web-tests.jotform.com",
+			})
+		);
+
+		expect(dataLayerPush).toHaveBeenCalledWith({
+			event: "Jotform Message",
+			jf_id: "1234",
+			jf_title: "This is a title",
+			jf_type: "progress",
+		});
+
+		dataLayerPush.mockReset();
+	});
+
+	it("should scroll iframe into view in response to scrollIntoView message", () => {
+		render(<JotFormEmbed jotFormID="1234" title="This is a title" />);
+
+		const iframe = screen.getByTitle("This is a title"),
+			scrollIntoView = jest.fn();
+
+		iframe.scrollIntoView = scrollIntoView;
+
+		fireEvent(
+			window,
+			new MessageEvent("message", {
+				data: "scrollIntoView::1234",
+				origin: "https://next-web-tests.jotform.com",
+			})
+		);
+
+		expect(scrollIntoView).toHaveBeenCalled();
+	});
+});
diff --git a/web/src/components/JotFormEmbed/JotFormEmbed.tsx b/web/src/components/JotFormEmbed/JotFormEmbed.tsx
new file mode 100644
index 000000000..6595de608
--- /dev/null
+++ b/web/src/components/JotFormEmbed/JotFormEmbed.tsx
@@ -0,0 +1,188 @@
+import React, {
+	CSSProperties,
+	FC,
+	useCallback,
+	useEffect,
+	useRef,
+	useState,
+} from "react";
+
+import { publicRuntimeConfig } from "@/config";
+import type { FormID } from "@/feeds/jotform/jotform";
+import { logger } from "@/logger";
+
+import styles from "./JotFormEmbed.module.scss";
+
+const jotFormBaseURL = publicRuntimeConfig.jotForm.baseURL;
+
+interface JotFormEmbedProps {
+	jotFormID: FormID;
+	title: string;
+	/** An optional, initial height */
+	height?: number;
+	onSubmit?: () => void;
+}
+
+type JFMessageObject = {
+	action: "submission-completed";
+	formID: FormID;
+};
+
+type JFMessageName =
+	| "scrollIntoView"
+	| "setHeight"
+	| "setMinHeight"
+	| "collapseErrorPage"
+	| "reloadPage"
+	| "loadScript"
+	| "exitFullscreen";
+
+type JFMessageString = `${JFMessageName}:${number | ""}:${FormID}`;
+
+type JFMessageEvent = MessageEvent<JFMessageObject | JFMessageString>;
+
+export const JotFormEmbed: FC<JotFormEmbedProps> = ({
+	jotFormID,
+	title,
+	height,
+	onSubmit,
+}) => {
+	const iframeRef = useRef<HTMLIFrameElement>(null),
+		[styleOverrides, setStyleOverrides] = useState<CSSProperties>({
+			height: height ? `${height}px` : undefined,
+		}),
+		handleIFrameMessage = useCallback(
+			(content?: JFMessageEvent) => {
+				if (!iframeRef.current || !content || content.origin != jotFormBaseURL)
+					return;
+
+				const { data } = content;
+
+				// The form completion message is an object rather than a string like other messages so handle it first
+				if (
+					typeof data === "object" &&
+					data.action === "submission-completed"
+				) {
+					window.dataLayer.push({
+						event: "Jotform Message",
+						jf_type: "submit",
+						jf_id: jotFormID,
+						jf_title: title,
+					});
+					if (onSubmit) onSubmit();
+					return;
+				}
+
+				// Ignore non-string messages as they should all be strings in the format like "setHeight:1577:230793530776059"
+				if (typeof data !== "string") return;
+
+				const messageParts = data.split(":"),
+					[messageName, value, targetFormID] = messageParts,
+					iframe = iframeRef.current;
+
+				if (targetFormID !== jotFormID) {
+					logger.warn(
+						`Form with ID ${jotFormID} didn't match event with form ID ${targetFormID}`
+					);
+					return;
+				}
+
+				switch (messageName as JFMessageName) {
+					case "scrollIntoView":
+						if (typeof iframe.scrollIntoView === "function")
+							iframe.scrollIntoView();
+						// There's no 'page event' sent from JotForm for multi page forms,
+						// but scrollIntoView is fired for pages so we use this as the closest thing to track pagination
+						window.dataLayer.push({
+							event: "Jotform Message",
+							jf_type: "progress",
+							jf_id: jotFormID,
+							jf_title: title,
+						});
+						break;
+					case "setHeight": {
+						const height = parseInt(value, 10) + "px";
+						setStyleOverrides((s) => ({ ...s, height }));
+						break;
+					}
+					case "setMinHeight": {
+						const minHeight = parseInt(value, 10) + "px";
+						setStyleOverrides((s) => ({ ...s, minHeight }));
+						break;
+					}
+					case "reloadPage":
+						if (iframe.contentWindow) {
+							try {
+								iframe.contentWindow.location.reload();
+							} catch (e) {
+								window.location.reload();
+							}
+						} else window.location.reload();
+						break;
+					case "collapseErrorPage":
+						if (iframe.clientHeight > window.innerHeight) {
+							iframe.style.height = window.innerHeight + "px";
+						}
+						break;
+					case "exitFullscreen":
+						if (window.document.exitFullscreen)
+							window.document.exitFullscreen();
+						break;
+					case "loadScript": {
+						let src = value;
+						if (messageParts.length > 3) {
+							src = value + ":" + messageParts[2];
+						}
+
+						const script = document.createElement("script");
+						script.src = src;
+						script.type = "text/javascript";
+						document.body.appendChild(script);
+						break;
+					}
+					default:
+						break;
+				}
+
+				if (iframe.contentWindow && iframe.contentWindow.postMessage) {
+					const urls = {
+						docurl: encodeURIComponent(global.document.URL),
+						referrer: encodeURIComponent(global.document.referrer),
+					};
+					iframe.contentWindow.postMessage(
+						JSON.stringify({ type: "urls", value: urls }),
+						"*"
+					);
+				}
+			},
+			[jotFormID, onSubmit, iframeRef, title]
+		);
+
+	useEffect(() => {
+		window.addEventListener("message", handleIFrameMessage, false);
+
+		return () =>
+			window.removeEventListener("message", handleIFrameMessage, false);
+	}, [handleIFrameMessage]);
+
+	useEffect(() => {
+		// Only hide the iframe scroll bar once JS has kicked in and we know we can respond to the setHeight message
+		setStyleOverrides((s) => ({ ...s, overflow: "hidden" }));
+	}, []);
+
+	return (
+		<iframe
+			id={`JotFormIFrame-${jotFormID}`}
+			data-jotform-id={jotFormID}
+			ref={iframeRef}
+			src={`${jotFormBaseURL}/${jotFormID}?isIframeEmbed=1`}
+			title={title}
+			allowFullScreen
+			allow="geolocation; microphone; camera"
+			className={styles.iframe}
+			style={styleOverrides}
+			//deprecated scrolling attr to prevent iframe scrollbar flickering on validation
+			// scrolling="no"
+		/>
+	);
+};
diff --git a/web/src/components/JotFormPage/JotFormPage.test.tsx b/web/src/components/JotFormPage/JotFormPage.test.tsx
new file mode 100644
index 000000000..80be6be9b
--- /dev/null
+++ b/web/src/components/JotFormPage/JotFormPage.test.tsx
@@ -0,0 +1,74 @@
+import { render, screen, within } from "@testing-library/react";
+
+import { JotFormPage, type JotFormPageProps } from "./JotFormPage";
+
+const props: JotFormPageProps = {
+	formID: "1234",
+	formName: "Form title",
+	height: 567,
+	lead: "Some lead copy",
+	parentPages: [
+		{
+			title: "What we do",
+			path: "/about/what-we-do",
+		},
+		{
+			title: "About",
+			path: "/about",
+		},
+	],
+};
+
+describe("JotFormPage", () => {
+	it("should render form name and parent pages in page title", () => {
+		render(<JotFormPage {...props} />);
+
+		expect(document.title).toBe("Form title | What we do | About");
+	});
+
+	it("should render home breadcrumb", () => {
+		render(<JotFormPage {...props} />);
+
+		expect(screen.getByText("Home")).toHaveAttribute("href", "/");
+	});
+
+	it("should render breadcrumbs in reverse order", () => {
+		render(<JotFormPage {...props} />);
+
+		const breadcrumbs = screen.getByRole("navigation", { name: "Breadcrumbs" });
+
+		expect(
+			within(breadcrumbs)
+				.getAllByRole("link")
+				.map((a) => a.textContent)
+		).toStrictEqual(["Home", "About", "What we do"]);
+	});
+
+	it("should render form name as heading 1", () => {
+		render(<JotFormPage {...props} />);
+
+		expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent(
+			props.formName
+		);
+	});
+
+	it("should render content start id on page header", () => {
+		render(<JotFormPage {...props} />);
+
+		const h1 = screen.getByRole("heading", { level: 1 });
+
+		// eslint-disable-next-line testing-library/no-node-access
+		expect(h1.parentNode).toHaveAttribute("id", "content-start");
+	});
+
+	it("should render iframe with form id and title", () => {
+		render(<JotFormPage {...props} />);
+
+		const iframe = screen.getByTitle(props.formName);
+
+		expect(iframe).toHaveAttribute(
+			"src",
+			"https://next-web-tests.jotform.com/1234?isIframeEmbed=1"
+		);
+	});
+});
diff --git a/web/src/components/JotFormPage/JotFormPage.tsx b/web/src/components/JotFormPage/JotFormPage.tsx
new file mode 100644
index 000000000..52643db24
--- /dev/null
+++ b/web/src/components/JotFormPage/JotFormPage.tsx
@@ -0,0 +1,48 @@
+import { NextSeo } from "next-seo";
+import { FC } from "react";
+
+import { Breadcrumbs, Breadcrumb } from "@nice-digital/nds-breadcrumbs";
+import { PageHeader } from "@nice-digital/nds-page-header";
+
+import { JotFormEmbed } from "@/components/JotFormEmbed/JotFormEmbed";
+
+import { FormProps } from "./getGetServerSideProps";
+
+export type JotFormPageProps = FormProps & {
+	formName: string;
+	parentPages: { title: string; path?: string }[];
+	lead: string;
+};
+
+export const JotFormPage: FC<JotFormPageProps> = ({
+	height,
+	formID,
+	formName,
+	parentPages,
+	lead,
+}) => {
+	return (
+		<>
+			<NextSeo
+				title={[formName, ...parentPages.map((p) => p.title)].join(" | ")}
+				description={lead}
+			/>
+
+			<Breadcrumbs>
+				{[
+					{ title: "Home", path: "/" },
+					...parentPages.slice().reverse(),
+					{ title: formName },
+				].map(({ title, path }) => (
+					<Breadcrumb key={title} to={path}>
+						{title}
+					</Breadcrumb>
+				))}
+			</Breadcrumbs>
+
+			<PageHeader heading={formName} lead={lead} id="content-start" />
+
+			<JotFormEmbed jotFormID={formID} title={formName} height={height} />
+		</>
+	);
+};
diff --git a/web/src/components/JotFormPage/getGetServerSideProps.test.ts b/web/src/components/JotFormPage/getGetServerSideProps.test.ts
new file mode 100644
index 000000000..039615074
--- /dev/null
+++ b/web/src/components/JotFormPage/getGetServerSideProps.test.ts
@@ -0,0 +1,131 @@
+import { getForm } from "@/feeds/jotform/jotform";
+import { logger } from "@/logger";
+
+import { getGetServerSideProps } from "./getGetServerSideProps";
+
+import type { GetServerSidePropsContext } from "next";
+
+jest.mock("@/feeds/jotform/jotform");
+jest.mock("@/logger");
+
+const loggerMock = jest.mocked(logger);
+
+const getFormMock = (getForm as jest.Mock).mockResolvedValue({
+	responseCode: 200,
+	message: "success",
+	content: {
+		id: "223412731228044",
+		username: "nice_teams",
+		title: "NICE UK open content licence form",
+		height: "539",
+		status: "ENABLED",
+		created_at: "2022-12-08 06:31:44",
+		updated_at: "2023-03-27 05:03:55",
+		last_submission: "2023-03-24 14:43:43",
+		new: "34",
+		count: "46",
+		type: "LEGACY",
+		favorite: "0",
+		archived: "0",
+		url: "https://nice.jotform.com/223412731228044",
+	},
+	duration: "14.98ms",
+});
+
+const getServerSidePropsContext = {
+	resolvedUrl: "/forms/anything",
+} as GetServerSidePropsContext;
+
+describe("getGetServerSideProps", () => {
+	it("should return valid props after successful API form response", async () => {
+		getFormMock.mockResolvedValueOnce({
+			responseCode: 200,
+			message: "success",
+			content: {
+				status: "ENABLED",
+				height: "987",
+			},
+			duration: "17.33ms",
+		});
+
+		await expect(
+			getGetServerSideProps("1234")(getServerSidePropsContext)
+		).resolves.toStrictEqual({
+			props: {
+				height: "987",
+				formID: "1234",
+			},
+		});
+	});
+
+	it("should log error message and throw when the API request to JotForm fails", async () => {
+		const error = new Error("Test error");
+		getFormMock.mockRejectedValueOnce(error);
+
+		await expect(
+			getGetServerSideProps("1234")(getServerSidePropsContext)
+		).rejects.toBe(error);
+
+		expect(loggerMock.error).toHaveBeenCalledWith(
+			"Could not get form from JotForm API with id 1234 at URL /forms/anything",
+			error
+		);
+	});
+
+	it("should log message and return not found when the form is not found", async () => {
+		getFormMock.mockResolvedValueOnce({
+			responseCode: 404,
+			message: "Requested URL (/form/1234) is not available!",
+			content: "",
+			duration: "14.48ms",
+			info: "https://api.jotform.com/docs",
+		});
+
+		const result = await getGetServerSideProps("1234")(
+			getServerSidePropsContext
+		);
+
+		expect(result).toStrictEqual({ notFound: true });
+
+		expect(loggerMock.info).toHaveBeenCalledWith(
+			"Couldn't find form with id 1234 at URL /forms/anything"
+		);
+	});
+
+	it("should log message and throw when the request to JotForm API is unauthorized", async () => {
+		getFormMock.mockResolvedValueOnce({
+			responseCode: 401,
+			message: "You're not authorized to use (/form-id) ",
+			content: "",
+			duration: "15.15ms",
+			info: "https://api.jotform.com/docs#form-id",
+		});
+
+		await expect(
+			getGetServerSideProps("1234")(getServerSidePropsContext)
+		).rejects.toThrow(
+			"Got 401 unauthorized response for form with id 1234 at URL /forms/anything"
+		);
+	});
+
+	it("should log warning message and return not found when form is disabled", async () => {
+		getFormMock.mockResolvedValueOnce({
+			responseCode: 200,
+			message: "success",
+			content: {
+				status: "DISABLED",
+			},
+			duration: "17.33ms",
+		});
+
+		const result = await getGetServerSideProps("1234")(
+			getServerSidePropsContext
+		);
+
+		expect(result).toStrictEqual({ notFound: true });
+
+		expect(loggerMock.warn).toHaveBeenCalledWith(
+			"Form with id 1234 at URL /forms/anything is disabled"
+		);
+	});
+});
diff --git a/web/src/components/JotFormPage/getGetServerSideProps.ts b/web/src/components/JotFormPage/getGetServerSideProps.ts
new file mode 100644
index 000000000..30742f038
--- /dev/null
+++ b/web/src/components/JotFormPage/getGetServerSideProps.ts
@@ -0,0 +1,48 @@
+import { GetServerSideProps } from "next";
+
+import { type FormID, getForm } from "@/feeds/jotform/jotform";
+import { logger } from "@/logger";
+
+export type FormProps = {
+	height: number;
+	formID: FormID;
+};
+
+// Note: this is a separate file rather than named export from the page component, because the NextJS tree shaking was trying to include needle client side, and causing a build error
+export const getGetServerSideProps =
+	(formID: FormID): GetServerSideProps<FormProps> =>
+	async ({ resolvedUrl }) => {
+		try {
+			const formResponse = await getForm(formID);
+
+			if (formResponse.responseCode === 404) {
+				logger.info(
+					`Couldn't find form with id ${formID} at URL ${resolvedUrl}`
+				);
+				return { notFound: true };
+			} else if (formResponse.responseCode === 401)
+				throw Error(
+					`Got 401 unauthorized response for form with id ${formID} at URL ${resolvedUrl}`
+				);
+
+			const { height, status } = formResponse.content;
+
+			if (status === "DISABLED") {
+				logger.warn(`Form with id ${formID} at URL ${resolvedUrl} is disabled`);
+				return { notFound: true };
+			}
+
+			return {
+				props: {
+					height,
+					formID,
+				},
+			};
+		} catch (e) {
+			logger.error(
+				`Could not get form from JotForm API with id ${formID} at URL ${resolvedUrl}`,
+				e
+			);
+			throw e;
+		}
+	};
diff --git a/web/src/feeds/jotform/jotform.ts b/web/src/feeds/jotform/jotform.ts
new file mode 100644
index 000000000..1671b517b
--- /dev/null
+++ b/web/src/feeds/jotform/jotform.ts
@@ -0,0 +1,22 @@
+import needle from "needle";
+
+import { serverRuntimeConfig, publicRuntimeConfig } from "@/config";
+
+import type { FormID, GetFormResponse } from "./types";
+
+export * from "./types";
+
+const { apiKey } = serverRuntimeConfig.feeds.jotForm,
+	{ baseURL } = publicRuntimeConfig.jotForm;
+
+export const getForm = async (formID: FormID): Promise<GetFormResponse> => {
+	const response = await needle(
+		"get",
+		`${baseURL}/API/form/${formID}?apiKey=${apiKey}`,
+		{
+			json: true,
+		}
+	);
+
+	return response.body as GetFormResponse;
+};
diff --git a/web/src/feeds/jotform/types.ts b/web/src/feeds/jotform/types.ts
new file mode 100644
index 000000000..cdf937fc7
--- /dev/null
+++ b/web/src/feeds/jotform/types.ts
@@ -0,0 +1,51 @@
+export type FormID = `${number}`;
+
+export type Duration = `${number}ms`;
+
+export type NotFoundResponse = {
+	responseCode: 404;
+	message: string;
+	content: "";
+	duration: Duration;
+	info: string;
+};
+
+export type NotAuthorizedResponse = {
+	responseCode: 401;
+	message: string;
+	content: "";
+	duration: Duration;
+	info: string;
+};
+
+export type FormStatus = "ENABLED" | "DISABLED";
+
+export type FormType = "LEGACY" | "CARD";
+
+export type FormSuccessResponse = {
+	responseCode: 200;
+	message: "success";
+	content: {
+		id: string;
+		username: string;
+		title: string;
+		height: number;
+		status: FormStatus;
+		/** Format like "2023-03-21 09:27:18" */
+		created_at: string;
+		updated_at: string;
+		last_submission: string;
+		new: `${number}`;
+		count: `${number}`;
+		type: FormType;
+		favorite: `${number}`;
+		archived: `${number}`;
+		url: string;
+	};
+	duration: Duration;
+};
+
+export type GetFormResponse =
+	| NotAuthorizedResponse
+	| NotFoundResponse
+	| FormSuccessResponse;
diff --git a/web/src/pages/forms/__snapshots__/interventional-procedures-notification.page.test.tsx.snap b/web/src/pages/forms/__snapshots__/interventional-procedures-notification.page.test.tsx.snap
new file mode 100644
index 000000000..afc93a007
--- /dev/null
+++ b/web/src/pages/forms/__snapshots__/interventional-procedures-notification.page.test.tsx.snap
@@ -0,0 +1,186 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`InterventionalProceduresNotificationForm should match snapshot 1`] = `
+<div>
+  <nav
+    aria-label="Breadcrumbs"
+    data-component="breadcrumbs"
+    role="navigation"
+  >
+    <ol
+      class="breadcrumbs"
+    >
+      <li
+        class="breadcrumbs__crumb"
+      >
+        <a
+          href="/"
+        >
+          Home
+        </a>
+      </li>
+      <li
+        class="breadcrumbs__crumb"
+      >
+        <a
+          href="/about"
+        >
+          About
+        </a>
+      </li>
+      <li
+        class="breadcrumbs__crumb"
+      >
+        <a
+          href="/about/what-we-do"
+        >
+          What we do
+        </a>
+      </li>
+      <li
+        class="breadcrumbs__crumb"
+      >
+        <a
+          href="/about/what-we-do/our-programmes"
+        >
+          Our programmes
+        </a>
+      </li>
+      <li
+        class="breadcrumbs__crumb"
+      >
+        <a
+          href="/about/what-we-do/our-programmes/nice-guidance"
+        >
+          NICE guidance
+        </a>
+      </li>
+      <li
+        class="breadcrumbs__crumb"
+      >
+        <a
+          href="/about/what-we-do/our-programmes/nice-guidance/nice-interventional-procedures-guidance"
+        >
+          NICE interventional procedures guidance
+        </a>
+      </li>
+      <li
+        class="breadcrumbs__crumb"
+      >
+        <a
+          href="/about/what-we-do/our-programmes/nice-guidance/nice-interventional-procedures-guidance/notify"
+        >
+          Notify a procedure
+        </a>
+      </li>
+      <li
+        class="breadcrumbs__crumb"
+      >
+        <span>
+          Interventional procedures notification form
+        </span>
+      </li>
+    </ol>
+  </nav>
+  <script
+    type="application/ld+json"
+  >
+    {
+  "@context": "http://schema.org",
+  "@type": "BreadcrumbList",
+  "itemListElement": [
+    {
+      "@type": "ListItem",
+      "position": 1,
+      "item": {
+        "@id": "/",
+        "name": "Home"
+      }
+    },
+    {
+      "@type": "ListItem",
+      "position": 2,
+      "item": {
+        "@id": "/about",
+        "name": "About"
+      }
+    },
+    {
+      "@type": "ListItem",
+      "position": 3,
+      "item": {
+        "@id": "/about/what-we-do",
+        "name": "What we do"
+      }
+    },
+    {
+      "@type": "ListItem",
+      "position": 4,
+      "item": {
+        "@id": "/about/what-we-do/our-programmes",
+        "name": "Our programmes"
+      }
+    },
+    {
+      "@type": "ListItem",
+      "position": 5,
+      "item": {
+        "@id": "/about/what-we-do/our-programmes/nice-guidance",
+        "name": "NICE guidance"
+      }
+    },
+    {
+      "@type": "ListItem",
+      "position": 6,
+      "item": {
+        "@id": "/about/what-we-do/our-programmes/nice-guidance/nice-interventional-procedures-guidance",
+        "name": "NICE interventional procedures guidance"
+      }
+    },
+    {
+      "@type": "ListItem",
+      "position": 7,
+      "item": {
+        "@id": "/about/what-we-do/our-programmes/nice-guidance/nice-interventional-procedures-guidance/notify",
+        "name": "Notify a procedure"
+      }
+    },
+    {
+      "@type": "ListItem",
+      "position": 8,
+      "item": {
+        "name": "Interventional procedures notification form"
+      }
+    }
+  ]
+}
+  </script>
+  <div
+    class="page-header"
+    data-component="page-header"
+    id="content-start"
+  >
+    <h1
+      class="page-header__heading "
+    >
+      Interventional procedures notification form
+    </h1>
+    <p
+      class="page-header__lead"
+    >
+      Tell us about an interventional procedure you think should be assessed by NICE. This can be a new procedure or a review of our existing guidance.
+    </p>
+  </div>
+  <iframe
+    allow="geolocation; microphone; camera"
+    allowfullscreen=""
+    class="iframe"
+    data-jotform-id="230793530776059"
+    id="JotFormIFrame-230793530776059"
+    scrolling="no"
+    src="https://next-web-tests.jotform.com/230793530776059?isIframeEmbed=1"
+    style="height: 539px; overflow: hidden;"
+    title="Interventional procedures notification form"
+  />
+</div>
+`;
diff --git a/web/src/pages/forms/__snapshots__/use-of-nice-content-in-the-uk.page.test.tsx.snap b/web/src/pages/forms/__snapshots__/use-of-nice-content-in-the-uk.page.test.tsx.snap
new file mode 100644
index 000000000..c367f9ffc
--- /dev/null
+++ b/web/src/pages/forms/__snapshots__/use-of-nice-content-in-the-uk.page.test.tsx.snap
@@ -0,0 +1,96 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`UseOfNICEContentInTheUKForm should match snapshot 1`] = `
+<div>
+  <nav
+    aria-label="Breadcrumbs"
+    data-component="breadcrumbs"
+    role="navigation"
+  >
+    <ol
+      class="breadcrumbs"
+    >
+      <li
+        class="breadcrumbs__crumb"
+      >
+        <a
+          href="/"
+        >
+          Home
+        </a>
+      </li>
+      <li
+        class="breadcrumbs__crumb"
+      >
+        <a
+          href="/re-using-our-content"
+        >
+          Reusing our content
+        </a>
+      </li>
+      <li
+        class="breadcrumbs__crumb"
+      >
+        <span>
+          Use of NICE content in the UK form
+        </span>
+      </li>
+    </ol>
+  </nav>
+  <script
+    type="application/ld+json"
+  >
+    {
+  "@context": "http://schema.org",
+  "@type": "BreadcrumbList",
+  "itemListElement": [
+    {
+      "@type": "ListItem",
+      "position": 1,
+      "item": {
+        "@id": "/",
+        "name": "Home"
+      }
+    },
+    {
+      "@type": "ListItem",
+      "position": 2,
+      "item": {
+        "@id": "/re-using-our-content",
+        "name": "Reusing our content"
+      }
+    },
+    {
+      "@type": "ListItem",
+      "position": 3,
+      "item": {
+        "name": "Use of NICE content in the UK form"
+      }
+    }
+  ]
+}
+  </script>
+  <div
+    class="page-header"
+    data-component="page-header"
+    id="content-start"
+  >
+    <h1
+      class="page-header__heading "
+    >
+      Use of NICE content in the UK form
+    </h1>
+  </div>
+  <iframe
+    allow="geolocation; microphone; camera"
+    allowfullscreen=""
+    class="iframe"
+    data-jotform-id="223412731228044"
+    id="JotFormIFrame-223412731228044"
+    scrolling="no"
+    src="https://next-web-tests.jotform.com/223412731228044?isIframeEmbed=1"
+    style="height: 539px; overflow: hidden;"
+    title="Use of NICE content in the UK form"
+  />
+</div>
+`;
diff --git a/web/src/pages/forms/interventional-procedures-notification.page.test.tsx b/web/src/pages/forms/interventional-procedures-notification.page.test.tsx
new file mode 100644
index 000000000..704452964
--- /dev/null
+++ b/web/src/pages/forms/interventional-procedures-notification.page.test.tsx
@@ -0,0 +1,46 @@
+import { render } from "@testing-library/react";
+import { GetServerSidePropsContext } from "next";
+
+import { FormProps } from "@/components/JotFormPage/getGetServerSideProps";
+
+import InterventionalProceduresNotificationForm, {
+	getServerSideProps,
+} from "./interventional-procedures-notification.page";
+
+jest.mock("@/feeds/jotform/jotform", () => ({
+	getForm: jest.fn().mockResolvedValue({
+		responseCode: 200,
+		message: "success",
+		content: {
+			id: "230793530776059",
+			username: "nice_teams",
+			title: "Interventional procedures notification form",
+			height: "539",
+			status: "ENABLED",
+			created_at: "2023-03-21 09:27:18",
+			updated_at: "2023-03-27 05:10:51",
+			last_submission: "2023-03-24 11:33:20",
+			new: "3",
+			count: "3",
+			type: "LEGACY",
+			favorite: "0",
+			archived: "0",
+			url: "https://nice.jotform.com/230793530776059",
+		},
+		duration: "23.46ms",
+	}),
+}));
+
+describe("InterventionalProceduresNotificationForm", () => {
+	it("should match snapshot", async () => {
+		const props = (await getServerSideProps({
+			resolvedUrl: "/forms/interventional-procedures-notification",
+		} as GetServerSidePropsContext)) as { props: FormProps };
+
+		const { container } = render(
+			<InterventionalProceduresNotificationForm {...props.props} />
+		);
+
+		expect(container).toMatchSnapshot();
+	});
+});
diff --git a/web/src/pages/forms/interventional-procedures-notification.page.tsx b/web/src/pages/forms/interventional-procedures-notification.page.tsx
new file mode 100644
index 000000000..e3d5f4467
--- /dev/null
+++ b/web/src/pages/forms/interventional-procedures-notification.page.tsx
@@ -0,0 +1,45 @@
+import {
+	type FormProps,
+	getGetServerSideProps,
+} from "@/components/JotFormPage/getGetServerSideProps";
+import { JotFormPage } from "@/components/JotFormPage/JotFormPage";
+
+export const getServerSideProps = getGetServerSideProps("230793530776059");
+
+export default function InterventionalProceduresNotificationForm(
+	props: FormProps
+): JSX.Element {
+	return (
+		<JotFormPage
+			{...props}
+			formName="Interventional procedures notification form"
+			lead="Tell us about an interventional procedure you think should be assessed by NICE. This can be a new procedure or a review of our existing guidance."
+			parentPages={[
+				{
+					title: "Notify a procedure",
+					path: "/about/what-we-do/our-programmes/nice-guidance/nice-interventional-procedures-guidance/notify",
+				},
+				{
+					title: "NICE interventional procedures guidance",
+					path: "/about/what-we-do/our-programmes/nice-guidance/nice-interventional-procedures-guidance",
+				},
+				{
+					title: "NICE guidance",
+					path: "/about/what-we-do/our-programmes/nice-guidance",
+				},
+				{
+					title: "Our programmes",
+					path: "/about/what-we-do/our-programmes",
+				},
+				{
+					title: "What we do",
+					path: "/about/what-we-do",
+				},
+				{
+					title: "About",
+					path: "/about",
+				},
+			]}
+		/>
+	);
+}
diff --git a/web/src/pages/forms/use-of-nice-content-in-the-uk.page.test.tsx b/web/src/pages/forms/use-of-nice-content-in-the-uk.page.test.tsx
new file mode 100644
index 000000000..cd40ba47b
--- /dev/null
+++ b/web/src/pages/forms/use-of-nice-content-in-the-uk.page.test.tsx
@@ -0,0 +1,46 @@
+import { render } from "@testing-library/react";
+import { GetServerSidePropsContext } from "next";
+
+import { FormProps } from "@/components/JotFormPage/getGetServerSideProps";
+
+import UseOfNICEContentInTheUKForm, {
+	getServerSideProps,
+} from "./use-of-nice-content-in-the-uk.page";
+
+jest.mock("@/feeds/jotform/jotform", () => ({
+	getForm: jest.fn().mockResolvedValue({
+		responseCode: 200,
+		message: "success",
+		content: {
+			id: "223412731228044",
+			username: "nice_teams",
+			title: "NICE UK open content licence form",
+			height: "539",
+			status: "ENABLED",
+			created_at: "2022-12-08 06:31:44",
+			updated_at: "2023-03-27 05:03:55",
+			last_submission: "2023-03-24 14:43:43",
+			new: "34",
+			count: "46",
+			type: "LEGACY",
+			favorite: "0",
+			archived: "0",
+			url: "https://nice.jotform.com/223412731228044",
+		},
+		duration: "14.98ms",
+	}),
+}));
+
+describe("UseOfNICEContentInTheUKForm", () => {
+	it("should match snapshot", async () => {
+		const props = (await getServerSideProps({
+			resolvedUrl: "/forms/use-of-nice-content-in-the-uk",
+		} as GetServerSidePropsContext)) as { props: FormProps };
+
+		const { container } = render(
+			<UseOfNICEContentInTheUKForm {...props.props} />
+		);
+
+		expect(container).toMatchSnapshot();
+	});
+});
diff --git a/web/src/pages/forms/use-of-nice-content-in-the-uk.page.tsx b/web/src/pages/forms/use-of-nice-content-in-the-uk.page.tsx
new file mode 100644
index 000000000..27412a261
--- /dev/null
+++ b/web/src/pages/forms/use-of-nice-content-in-the-uk.page.tsx
@@ -0,0 +1,25 @@
+import {
+	type FormProps,
+	getGetServerSideProps,
+} from "@/components/JotFormPage/getGetServerSideProps";
+import { JotFormPage } from "@/components/JotFormPage/JotFormPage";
+
+export const getServerSideProps = getGetServerSideProps("223412731228044");
+
+export default function UseOfNICEContentInTheUKForm(
+	props: FormProps
+): JSX.Element {
+	return (
+		<JotFormPage
+			{...props}
+			formName="Use of NICE content in the UK form"
+			lead=""
+			parentPages={[
+				{
+					title: "Reusing our content",
+					path: "/re-using-our-content",
+				},
+			]}
+		/>
+	);
+}