Add infrastructure for consent banner and link

CHANGELOG.md

@@ -20,6 +20,7 @@ The types of changes are:
 ### Added 
 
 - Add an automated test to check for `/fides-consent.js` backwards compatibility [#3289](https://github.com/ethyca/fides/pull/3289)
+- Add infrastructure for consent overlay, add bundled script to `/fides.js` route in privacy-center [#3191](https://github.com/ethyca/fides/pull/3191)
 
 ## [2.13.0](https://github.com/ethyca/fides/compare/2.12.1...2.13.0)
 

clients/cypress-e2e/README.md

@@ -15,7 +15,7 @@ Admin UI will be found at `localhost:3000` and Privacy Center at `localhost:3001
 Then, in this folder:
 
 ```
-turbo run cy:run
+npm run cy:run
 ```
 
 ### Environment variables

clients/fides-js/package.json

@@ -40,9 +40,6 @@
     "eslint-config-airbnb-typescript": "^17.0.0",
     "eslint-config-preact": "^1.3.0",
     "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-react": "^7.32.2",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",

clients/fides-js/src/components/App.tsx

@@ -0,0 +1,50 @@
+import { h } from "preact";
+import { FidesConfig } from "../lib/consent-types";
+import ConsentBanner from "./ConsentBanner";
+import { getConsentContext } from "../lib/consent-context";
+import {
+  makeConsentDefaults,
+  setConsentCookieAcceptAll,
+  setConsentCookieRejectAll,
+} from "../lib/cookie";
+
+const App = ({ config }: { config: FidesConfig }) => {
+  const context = getConsentContext();
+  const consentDefaults = makeConsentDefaults({
+    config: config.consent,
+    context,
+  });
+
+  const onAcceptAll = () => {
+    setConsentCookieAcceptAll(consentDefaults);
+    // TODO: save to Fides consent request API
+    // eslint-disable-next-line no-console
+    console.error(
+      "Could not save consent record to Fides API, not implemented!"
+    );
+  };
+
+  const onRejectAll = () => {
+    setConsentCookieRejectAll(consentDefaults);
+    // TODO: save to Fides consent request API
+    // eslint-disable-next-line no-console
+    console.error(
+      "Could not save consent record to Fides API, not implemented!"
+    );
+  };
+
+  return (
+    <ConsentBanner
+      bannerTitle={config.experience?.banner_title}
+      bannerDescription={config.experience?.banner_description}
+      confirmationButtonLabel={config.experience?.confirmation_button_label}
+      rejectButtonLabel={config.experience?.reject_button_label}
+      privacyCenterUrl={config.options.privacyCenterUrl}
+      onAcceptAll={onAcceptAll}
+      onRejectAll={onRejectAll}
+      waitBeforeShow={100}
+    />
+  );
+};
+
+export default App;

clients/fides-js/src/components/ConsentBanner.tsx

@@ -3,6 +3,7 @@ import { useState, useEffect } from "preact/hooks";
 import { ButtonType } from "../lib/consent-types";
 import ConsentBannerButton from "./ConsentBannerButton";
 import "../lib/banner.module.css";
+import { useHasMounted } from "../lib/hooks";
 
 interface BannerProps {
   bannerTitle?: string;
@@ -26,19 +27,25 @@ const ConsentBanner: FunctionComponent<BannerProps> = ({
   waitBeforeShow,
 }) => {
   const [isShown, setIsShown] = useState(false);
+  const hasMounted = useHasMounted();
+
   useEffect(() => {
     const delayBanner = setTimeout(() => {
       setIsShown(true);
     }, waitBeforeShow);
     return () => clearTimeout(delayBanner);
   }, [setIsShown, waitBeforeShow]);
+
   const navigateToPrivacyCenter = (): void => {
     if (privacyCenterUrl) {
       window.location.assign(privacyCenterUrl);
     }
   };
-  // TODO: support option to specify top/bottom
-  // TODO: add banner title
+
+  if (!hasMounted) {
+    return null;
+  }
+
   return (
     <div
       id="fides-consent-banner"
@@ -75,11 +82,6 @@ const ConsentBanner: FunctionComponent<BannerProps> = ({
           onClick={() => {
             onRejectAll();
             setIsShown(false);
-            // TODO: save to Fides consent request API
-            // eslint-disable-next-line no-console
-            console.error(
-              "Could not save consent record to Fides API, not implemented!"
-            );
           }}
         />
         <ConsentBannerButton
@@ -88,11 +90,6 @@ const ConsentBanner: FunctionComponent<BannerProps> = ({
           onClick={() => {
             onAcceptAll();
             setIsShown(false);
-            // TODO: save to Fides consent request API
-            // eslint-disable-next-line no-console
-            console.error(
-              "Could not save consent record to Fides API, not implemented!"
-            );
           }}
         />
       </div>

clients/fides-js/src/fides.ts

@@ -46,7 +46,7 @@ import { gtm } from "./integrations/gtm";
 import { meta } from "./integrations/meta";
 import { shopify } from "./integrations/shopify";
 import { getConsentContext } from "./lib/consent-context";
-import { initFidesConsent } from "./lib/consent";
+import { initOverlay } from "./lib/consent";
 import {
   CookieKeyConsent,
   CookieIdentity,
@@ -55,7 +55,6 @@ import {
   makeConsentDefaults,
 } from "./lib/cookie";
 import {
-  defaultFidesOptions,
   ExperienceConfig,
   FidesConfig,
   FidesOptions,
@@ -90,9 +89,6 @@ let _Fides: Fides;
  * Initialize the global Fides object with the given configuration values
  */
 const init = async (config: FidesConfig) => {
-  // passed-in config should override default options
-  // eslint-disable-next-line no-param-reassign
-  config.options = { ...defaultFidesOptions, ...config.options };
   // Configure the default consent values
   const context = getConsentContext();
   const consentDefaults = makeConsentDefaults({
@@ -103,7 +99,8 @@ const init = async (config: FidesConfig) => {
   // Load any existing user preferences from the browser cookie
   const cookie = getOrMakeFidesCookie(consentDefaults);
 
-  await initFidesConsent(config);
+  await initOverlay(config);
+
   // Initialize the window.Fides object
   _Fides.consent = cookie.consent;
   _Fides.fides_meta = cookie.fides_meta;
@@ -120,7 +117,13 @@ _Fides = {
   consent: {},
   experience: undefined,
   geolocation: {},
-  options: { ...defaultFidesOptions, privacyCenterUrl: "" },
+  options: {
+    debug: true,
+    isOverlayDisabled: true,
+    isGeolocationEnabled: false,
+    geolocationApiUrl: "",
+    privacyCenterUrl: "",
+  },
   fides_meta: {},
   identity: {},
   gtm,

clients/fides-js/src/lib/consent-types.ts

@@ -4,6 +4,7 @@ export interface FidesConfig {
   // Set the consent defaults from a "legacy" Privacy Center config.json.
   consent?: ConsentConfig;
   // Set the "experience" to be used for this Fides.js instance -- overrides the "legacy" config.
+  // If set, Fides.js will fetch neither experience config nor user geolocation.
   // If not set, Fides.js will fetch its own experience config.
   experience?: ExperienceConfig;
   // Set the geolocation for this Fides.js instance. If *not* set, Fides.js will fetch its own geolocation.
@@ -12,19 +13,12 @@ export interface FidesConfig {
   options: FidesOptions;
 }
 
-export const defaultFidesOptions = {
-  debug: false,
-  isDisabled: false,
-  isGeolocationEnabled: false,
-  geolocationApiUrl: "cdn-api.ethyca.com/location",
-};
-
 export type FidesOptions = {
   // Whether or not debug log statements should be enabled
   debug: boolean;
 
   // Whether or not the banner should be globally disabled
-  isDisabled: boolean;
+  isOverlayDisabled: boolean;
 
   // Whether user geolocation should be enabled. Requires geolocationApiUrl
   isGeolocationEnabled: boolean;

clients/fides-js/src/lib/consent.tsx

@@ -1,13 +1,9 @@
 import { h, render } from "preact";
-import {
-  makeConsentDefaults,
-  setConsentCookieAcceptAll,
-  setConsentCookieRejectAll,
-} from "./cookie";
-import ConsentBanner from "../components/ConsentBanner";
+
 import { FidesConfig, FidesOptions, UserGeolocation } from "./consent-types";
 import { debugLog } from "./consent-utils";
-import { getConsentContext } from "./consent-context";
+
+import App from "../components/App";
 
 /**
  * Validate the config options
@@ -44,11 +40,32 @@ const validateBannerOptions = (config: FidesConfig): boolean => {
   return true;
 };
 
+/**
+ * Construct user geolocation str to be ingested by Fides API
+ * Returns null if geolocation cannot be constructed by provided params
+ */
+const constructLocation = (
+  debug: boolean,
+  geoLocation: UserGeolocation
+): string | null => {
+  debugLog(debug, "validating getLocation...");
+  if (geoLocation.location) {
+    return geoLocation.location;
+  }
+  if (geoLocation.country && geoLocation.region) {
+    return `${geoLocation.country}-${geoLocation.region}`;
+  }
+  debugLog(
+    debug,
+    "cannot construct user location from provided geoLocation params..."
+  );
+  return null;
+};
+
 /**
  * Fetch the user's geolocation from an external API
  */
 const getLocation = async (options: FidesOptions): Promise<UserGeolocation> => {
-  // assumes that isGeolocationEnabled is true
   debugLog(options.debug, "Running getLocation...");
   const { geolocationApiUrl } = options;
 
@@ -97,12 +114,15 @@ const getLocation = async (options: FidesOptions): Promise<UserGeolocation> => {
 };
 
 /**
- * Initialize the Fides Consent Banner or Link, with optional extraOptions to override defaults.
+ * Initialize the Fides Consent overlay components.
+ *
+ * Includes fetching location and experience, if not provided, setting up banner and modal,
+ * showing/hiding links, and showing/hiding the banner.
  *
  * (see the type definition of ConsentBannerOptions for what options are available)
  */
-export const initFidesConsent = async (config: FidesConfig): Promise<void> => {
-  debugLog(config.options.debug, "Initializing Fides consent...");
+export const initOverlay = async (config: FidesConfig): Promise<void> => {
+  debugLog(config.options.debug, "Initializing Fides consent overlays...");
 
   debugLog(
     config.options.debug,
@@ -113,55 +133,47 @@ export const initFidesConsent = async (config: FidesConfig): Promise<void> => {
     return Promise.reject(new Error("Invalid banner options"));
   }
 
-  if (config.options.isDisabled) {
+  if (config.options.isOverlayDisabled) {
     debugLog(
       config.options.debug,
       "Fides consent banner is disabled, skipping banner initialization!"
     );
     return Promise.resolve();
   }
 
-  document.addEventListener("DOMContentLoaded", () => {
+  async function afterDomIsLoaded() {
     debugLog(config.options.debug, "DOM fully loaded and parsed");
 
     try {
       debugLog(
         config.options.debug,
         "Adding Fides consent banner CSS & HTML into the DOM..."
       );
-      if (config.options.isGeolocationEnabled) {
-        getLocation(config.options)
-          .then(() => {
-            // todo- get applicable notices using location
-          })
-          .catch(() => {
-            // if something goes wrong with location api, we still want to render notices
-          });
+      let userLocation: UserGeolocation | undefined = config.geolocation;
+      if (
+        !config.experience &&
+        !userLocation &&
+        config.options.isGeolocationEnabled
+      ) {
+        userLocation = await getLocation(config.options);
+        if (constructLocation(config.options.debug, userLocation)) {
+          // todo- get applicable notices using geoLocation
+          debugLog(config.options.debug, "User location found.", userLocation);
+        } else {
+          debugLog(
+            config.options.debug,
+            "User location could not be constructed from location params.",
+            userLocation
+          );
+        }
+      } else {
+        debugLog(
+          config.options.debug,
+          "Geolocation must be enabled if config.geolocation is not provided!"
+        );
       }
-      const context = getConsentContext();
-      const consentDefaults = makeConsentDefaults({
-        config: config.consent,
-        context,
-      });
-      const onAcceptAll = () => {
-        setConsentCookieAcceptAll(consentDefaults);
-      };
-      const onRejectAll = () => {
-        setConsentCookieRejectAll(consentDefaults);
-      };
-      render(
-        <ConsentBanner
-          bannerTitle={config.experience?.banner_title}
-          bannerDescription={config.experience?.banner_description}
-          confirmationButtonLabel={config.experience?.confirmation_button_label}
-          rejectButtonLabel={config.experience?.reject_button_label}
-          privacyCenterUrl={config.options.privacyCenterUrl}
-          onAcceptAll={onAcceptAll}
-          onRejectAll={onRejectAll}
-          waitBeforeShow={100}
-        />,
-        document.body
-      );
+
+      render(<App config={config} />, document.body);
       const consentLinkEl = document.getElementById("fides-consent-link");
       if (
         consentLinkEl &&
@@ -183,6 +195,15 @@ export const initFidesConsent = async (config: FidesConfig): Promise<void> => {
     } catch (e) {
       debugLog(config.options.debug, e);
     }
-  });
+  }
+  if (document?.readyState !== "complete") {
+    debugLog(config.options.debug, "DOM not loaded, adding event listener");
+    document.addEventListener("DOMContentLoaded", async () => {
+      await afterDomIsLoaded();
+    });
+  } else {
+    await afterDomIsLoaded();
+  }
+
   return Promise.resolve();
 };