From 8baebe54359bf5fedb0e1d28ccd85e3fbba5633a Mon Sep 17 00:00:00 2001
From: Katie Brady <katie@astronomer.io>
Date: Fri, 22 Sep 2023 16:28:41 -0400
Subject: [PATCH 1/2] Add Segment Cookie Consent Manager

---
 ui/package-lock.json                          |  17 +++
 ui/package.json                               |   3 +-
 .../components/custom/ConsentManager.svelte   | 117 ++++++++++++++++++
 ui/src/routes/+layout.svelte                  |   3 +
 4 files changed, 139 insertions(+), 1 deletion(-)
 create mode 100644 ui/src/lib/components/custom/ConsentManager.svelte

diff --git a/ui/package-lock.json b/ui/package-lock.json
index 2d50ad31..5b145149 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -8,6 +8,7 @@
       "name": "ui",
       "version": "0.0.1",
       "dependencies": {
+        "@segment/in-eu": "astronomer/in-eu",
         "bits-ui": "^0.5.7",
         "clsx": "^2.0.0",
         "radix-icons-svelte": "^1.2.1",
@@ -561,6 +562,14 @@
       "integrity": "sha512-C16M+IYz0rgRhWZdCmK+h58JMv8vijAA61gmz2rspCSwKwzBebpdcsiUmwrtJRdphuY30i6BSLEOP8ppbNLyLg==",
       "dev": true
     },
+    "node_modules/@segment/in-eu": {
+      "version": "0.3.0",
+      "resolved": "git+ssh://git@github.com/astronomer/in-eu.git#49f901c7a9e7e0c4a5d9cef5364e3b637254e8f5",
+      "license": "MIT",
+      "dependencies": {
+        "jstz": "^2.0.0"
+      }
+    },
     "node_modules/@sveltejs/adapter-auto": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/@sveltejs/adapter-auto/-/adapter-auto-2.1.0.tgz",
@@ -1383,6 +1392,14 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/jstz": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/jstz/-/jstz-2.1.1.tgz",
+      "integrity": "sha512-8hfl5RD6P7rEeIbzStBz3h4f+BQHfq/ABtoU6gXKQv5OcZhnmrIpG7e1pYaZ8hS9e0mp+bxUj08fnDUbKctYyA==",
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/kleur": {
       "version": "4.1.5",
       "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
diff --git a/ui/package.json b/ui/package.json
index a5a89ca2..6bb6d5eb 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -27,6 +27,7 @@
   },
   "type": "module",
   "dependencies": {
+    "@segment/in-eu": "astronomer/in-eu",
     "bits-ui": "^0.5.7",
     "clsx": "^2.0.0",
     "radix-icons-svelte": "^1.2.1",
@@ -34,4 +35,4 @@
     "tailwind-merge": "^1.14.0",
     "tailwind-variants": "^0.1.14"
   }
-}
+}
\ No newline at end of file
diff --git a/ui/src/lib/components/custom/ConsentManager.svelte b/ui/src/lib/components/custom/ConsentManager.svelte
new file mode 100644
index 00000000..dc64c3f4
--- /dev/null
+++ b/ui/src/lib/components/custom/ConsentManager.svelte
@@ -0,0 +1,117 @@
+<script>
+  import inEU from "@segment/in-eu";
+  import { onMount } from "svelte";
+
+  onMount(() => {
+    window.localStorage.setItem("inEU", inEU());
+  });
+</script>
+
+<svelte:head>
+  <script>
+    const inEU = window.localStorage.getItem("inEU");
+    window.consentManagerConfig = function (exports) {
+      let React = exports.React;
+      let bannerContent = React.createElement(
+        "span",
+        null,
+        "We use cookies (and other similar technologies) to collect data to improve your experience on our site. By using our website, you’re agreeing to the collection of data as described in our",
+        " ",
+        React.createElement(
+          "a",
+          {
+            href: "/privacy/",
+            target: "_blank",
+          },
+          "Privacy Policy"
+        ),
+        "."
+      );
+
+      return {
+        container: "#consent-manager",
+        writeKey: "YtGAJiHNKB84NxpN0PxmgP0LmHeoMKGl",
+        bannerActionsBlock: inEU,
+        bannerContent: bannerContent,
+        bannerSubContent: "You can change your preferences.",
+        preferencesDialogTitle: "Website Data Collection Preferences",
+        preferencesDialogContent:
+          "We use data collected by cookies and JavaScript libraries to improve your browsing experience, analyze site traffic, deliver personalized advertisements, and increase the overall performance of our site.",
+        cancelDialogTitle: "Are you sure you want to cancel?",
+        cancelDialogContent:
+          "Your preferences have not been saved. By continuing to use our website, you՚re agreeing to our Website Data Collection Policy.",
+        closeBehavior: inEU ? "dismiss" : "accept",
+        bannerHideCloseButton: inEU,
+        defaultDestinationBehavior: "imply",
+        implyConsentOnInteraction: !inEU,
+      };
+    };
+  </script>
+  <script>
+    !(function () {
+      var analytics = window && (window.analytics = window.analytics || []);
+      if (!analytics.initialize)
+        if (analytics.invoked)
+          window.console &&
+            console.error &&
+            console.error("Segment snippet included twice.");
+        else {
+          analytics.invoked = !0;
+          analytics.methods = [
+            "trackSubmit",
+            "trackClick",
+            "trackLink",
+            "trackForm",
+            "pageview",
+            "identify",
+            "reset",
+            "group",
+            "track",
+            "ready",
+            "alias",
+            "debug",
+            "page",
+            "once",
+            "off",
+            "on",
+            "addSourceMiddleware",
+          ];
+          analytics.factory = function (t) {
+            return function () {
+              var e = Array.prototype.slice.call(arguments);
+              e.unshift(t);
+              analytics.push(e);
+              return analytics;
+            };
+          };
+          for (var t = 0; t < analytics.methods.length; t++) {
+            var e = analytics.methods[t];
+            analytics[e] = analytics.factory(e);
+          }
+          analytics.load = function (t, e) {
+            var n = document.createElement("script");
+            n.type = "text/javascript";
+            n.async = !0;
+            n.src =
+              ("https:" === document.location.protocol
+                ? "https://"
+                : "http://") +
+              "cdn.segment.com/analytics.js/v1/" +
+              t +
+              "/analytics.min.js";
+            var o = document.getElementsByTagName("script")[0];
+            o.parentNode.insertBefore(n, o);
+            analytics._loadOptions = e;
+          };
+          analytics.SNIPPET_VERSION = "4.1.0";
+          analytics.page();
+        }
+    })();
+  </script>
+  <script
+    src="https://www.astronomer.io/scripts/consent-manager.js"
+    defer
+  ></script>
+</svelte:head>
+
+<div id="consent-manager" class="absolute w-full bottom-0" />
diff --git a/ui/src/routes/+layout.svelte b/ui/src/routes/+layout.svelte
index 3218d645..4f7bb79d 100644
--- a/ui/src/routes/+layout.svelte
+++ b/ui/src/routes/+layout.svelte
@@ -5,6 +5,7 @@
   import { applyAction, enhance } from "$app/forms";
   import { page } from "$app/stores";
   import StarsIcon from "$lib/components/custom/StarsIcon.svelte";
+  import ConsentManager from "$lib/components/custom/ConsentManager.svelte";
 
   let isSubmittingPrompt = false;
   let includeCurrentRequest = true;
@@ -103,6 +104,8 @@
       >source code</a
     >.
   </footer>
+
+  <ConsentManager />
 </div>
 
 <style>

From aa03aefa3a7c54dafd078c5e76640352e03bcecb Mon Sep 17 00:00:00 2001
From: Katie Brady <katie@astronomer.io>
Date: Fri, 22 Sep 2023 16:40:04 -0400
Subject: [PATCH 2/2] Fix button background colors

---
 .../lib/components/custom/ConsentManager.svelte  | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/ui/src/lib/components/custom/ConsentManager.svelte b/ui/src/lib/components/custom/ConsentManager.svelte
index dc64c3f4..f07ad488 100644
--- a/ui/src/lib/components/custom/ConsentManager.svelte
+++ b/ui/src/lib/components/custom/ConsentManager.svelte
@@ -9,7 +9,7 @@
 
 <svelte:head>
   <script>
-    const inEU = window.localStorage.getItem("inEU");
+    const inEU = true;
     window.consentManagerConfig = function (exports) {
       let React = exports.React;
       let bannerContent = React.createElement(
@@ -115,3 +115,17 @@
 </svelte:head>
 
 <div id="consent-manager" class="absolute w-full bottom-0" />
+
+<style>
+  #consent-manager button:first-child {
+    background-color: rgb(71, 184, 129);
+  }
+
+  #consent-manager button:last-child {
+    background-color: rgb(255, 255, 255);
+  }
+
+  #consent-manager p > button {
+    background-color: transparent !important;
+  }
+</style>