From ecf82c5d704400cb11077891ebbe54e9c10bd099 Mon Sep 17 00:00:00 2001
From: Jason Gill <jason.gill@ethyca.com>
Date: Thu, 5 Dec 2024 16:17:12 -0700
Subject: [PATCH] Embedded CMP Layer 2 example page (#5564)

---
 CHANGELOG.md                                  |  3 +-
 clients/sample-app/README.md                  |  7 ++
 .../sample-app/src/pages/embedded-consent.tsx | 99 +++++++++++++++++++
 3 files changed, 108 insertions(+), 1 deletion(-)
 create mode 100644 clients/sample-app/src/pages/embedded-consent.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9a29e3703b..67b323801c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,7 +17,8 @@ The types of changes are:
 
 ## [Unreleased](https://github.com/ethyca/fides/compare/2.51.0...main)
 
-
+### Added
+- New page in the Cookie House sample app to demonstrate the use of embedding the FidesJS SDK on the page [#5564](https://github.com/ethyca/fides/pull/5564)
 
 
 
diff --git a/clients/sample-app/README.md b/clients/sample-app/README.md
index 9142c14617..73d161ae94 100644
--- a/clients/sample-app/README.md
+++ b/clients/sample-app/README.md
@@ -31,6 +31,13 @@ This will automatically bring up a Docker Compose project to create a sample app
 
 Once running successfully, open http://localhost:3000 to see the Cookie House!
 
+Note: If you are already running a database on port 5432 locally, you can override the default port by setting the `FIDES_SAMPLE_APP__DATABASE_PORT` environment variable and ALSO changing the **host** port number in the `docker-compose.yml` file. For example:
+
+```yaml
+ports:
+  - "5433:5432"
+```
+
 ## Pre-commit
 
 Before committing any changes, run the following:
diff --git a/clients/sample-app/src/pages/embedded-consent.tsx b/clients/sample-app/src/pages/embedded-consent.tsx
new file mode 100644
index 0000000000..8700b8ce3e
--- /dev/null
+++ b/clients/sample-app/src/pages/embedded-consent.tsx
@@ -0,0 +1,99 @@
+import { GetServerSideProps } from "next";
+import Head from "next/head";
+import { useRouter } from "next/router";
+import Script from "next/script";
+
+interface Props {
+  gtmContainerId: string | null;
+  privacyCenterUrl: string;
+}
+
+// Regex to ensure the provided GTM container ID appears valid (e.g. "GTM-ABCD123")
+// NOTE: this also protects against XSS since this ID is added to a script template
+const VALID_GTM_REGEX = /^[0-9a-zA-Z-]+$/;
+
+/**
+ * Pass the following server-side ENV variables to the page:
+ * - FIDES_SAMPLE_APP__GOOGLE_TAG_MANAGER_CONTAINER_ID: configure a GTM container, e.g. "GTM-ABCD123"
+ * - FIDES_SAMPLE_APP__PRIVACY_CENTER_URL: configure Privacy Center URL, e.g. "http://localhost:3001"
+ */
+export const getServerSideProps: GetServerSideProps<Props> = async () => {
+  // Check for a valid FIDES_SAMPLE_APP__GOOGLE_TAG_MANAGER_CONTAINER_ID
+  let gtmContainerId = null;
+  if (
+    process.env.FIDES_SAMPLE_APP__GOOGLE_TAG_MANAGER_CONTAINER_ID?.match(
+      VALID_GTM_REGEX,
+    )
+  ) {
+    gtmContainerId =
+      process.env.FIDES_SAMPLE_APP__GOOGLE_TAG_MANAGER_CONTAINER_ID;
+  }
+
+  // Check for a valid FIDES_SAMPLE_APP__PRIVACY_CENTER_URL
+  const privacyCenterUrl =
+    process.env.FIDES_SAMPLE_APP__PRIVACY_CENTER_URL || "http://localhost:3001";
+
+  // Pass the server-side props to the page
+  return { props: { gtmContainerId, privacyCenterUrl } };
+};
+
+const IndexPage = ({ gtmContainerId, privacyCenterUrl }: Props) => {
+  // Load the fides.js script from the Fides Privacy Center, assumed to be
+  // running at http://localhost:3001
+  const fidesScriptTagUrl = new URL(`${privacyCenterUrl}/fides.js`);
+  const router = useRouter();
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  const { geolocation, property_id } = router.query;
+
+  // If `geolocation=` or `property_id` query params exists, pass those along to the fides.js fetch
+  if (geolocation && typeof geolocation === "string") {
+    fidesScriptTagUrl.searchParams.append("geolocation", geolocation);
+  }
+  if (typeof property_id === "string") {
+    fidesScriptTagUrl.searchParams.append("property_id", property_id);
+  }
+
+  return (
+    <>
+      <Head>
+        <title>Cookie House</title>
+        {/* Require FidesJS to "embed" it's UI onto the page, instead of as an overlay over the <body> itself. (see https://ethyca.com/docs/dev-docs/js/reference/interfaces/FidesOptions#fides_embed) */}
+        <script>{`window.fides_overrides = { fides_embed: true, fides_disable_banner: true }`}</script>
+        {/* Allow the embedded consent modal to fill the screen */}
+        <style>{`#fides-embed-container { --fides-overlay-width: 'auto' }`}</style>
+      </Head>
+      {/**
+      Insert the fides.js script and run the GTM integration once ready
+      DEFER: using "beforeInteractive" here triggers a lint warning from NextJS
+      as it should only be used in the _document.tsx file. This still works and
+      ensures that fides.js fires earlier than other scripts, but isn't a best
+      practice.
+      */}
+      <Script
+        id="fides-js"
+        src={fidesScriptTagUrl.href}
+        onReady={() => {
+          // Enable the GTM integration, if GTM is configured
+          if (gtmContainerId) {
+            (window as any).Fides.gtm();
+          }
+        }}
+      />
+      {/* Insert the GTM script, if a container ID was provided */}
+      {gtmContainerId ? (
+        <Script id="google-tag-manager" strategy="afterInteractive">
+          {`
+            (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+            new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+            j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+            'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+            })(window,document,'script','dataLayer','${gtmContainerId}');
+          `}
+        </Script>
+      ) : null}
+      <div id="fides-embed-container" />
+    </>
+  );
+};
+
+export default IndexPage;