NXT-149 & NXT-151 Add IP notification and UK open content forms

web/config/default.yml

@@ -22,6 +22,8 @@ public:
     # See https://nextjs.org/docs/going-to-production#caching for more details on cache headers with NextJS
     # Note the use of s-max-age to cache in varnish, max-age to cache on the client and SWR for background refreshes
     defaultCacheHeader: public, s-max-age=300, max-age=120, stale-while-revalidate=1800
+  jotForm:
+    baseURL: https://nice.jotform.com
 
 # ! This is a PUBLIC repo so please don't put any sensitive info or secrets in here
 # ! Use local-development.yml or local-development.json to override settings locally instead: https://edibleco.de/3dLJKiP
@@ -47,3 +49,6 @@ server:
     inDev:
       origin: SECRET
       apiKey: SECRET
+    jotForm:
+      # Notice how the JotForm base URL is public as it's used in iframes, unlike our internal services. But the API key is still secret as it's used server side
+      apiKey: SECRET

web/config/test.js

@@ -5,6 +5,9 @@ module.exports = {
 	public: {
 		environment: "test",
 		baseURL: jestConfig.testEnvironmentOptions.url,
+		jotForm: {
+			baseURL: "https://next-web-tests.jotform.com",
+		},
 	},
 	server: {
 		cache: {

web/jest.config.js

@@ -32,7 +32,7 @@ module.exports = {
 		"./jest.setup.ts",
 		"jest-extended/all",
 	],
-	testPathIgnorePatterns: ["./config/"],
+	testPathIgnorePatterns: ["./config/", "./.next/"],
 	testEnvironmentOptions: {
 		url: "https://next-web-tests.nice.org.uk",
 	},

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%;
+}

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();
+	});
+});