Add infrastructure for consent banner and link

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

@@ -1,20 +1,28 @@
-import { h } from "preact";
-import { FidesConfig } from "../lib/consent-types";
+import { FunctionComponent, h } from "preact";
+import {
+  ExperienceConfig,
+  FidesOptions,
+  UserGeolocation,
+} from "../lib/consent-types";
 import ConsentBanner from "./ConsentBanner";
-import { getConsentContext } from "../lib/consent-context";
 import {
-  makeConsentDefaults,
+  CookieKeyConsent,
   setConsentCookieAcceptAll,
   setConsentCookieRejectAll,
 } from "../lib/cookie";
 
-const App = ({ config }: { config: FidesConfig }) => {
-  const context = getConsentContext();
-  const consentDefaults = makeConsentDefaults({
-    config: config.consent,
-    context,
-  });
+export interface OverlayProps {
+  consentDefaults: CookieKeyConsent;
+  options: FidesOptions;
+  experience?: ExperienceConfig;
+  geolocation?: UserGeolocation;
+}
 
+const Overlay: FunctionComponent<OverlayProps> = ({
+  consentDefaults,
+  experience,
+  options,
+}) => {
   const onAcceptAll = () => {
     setConsentCookieAcceptAll(consentDefaults);
     // TODO: save to Fides consent request API
@@ -35,16 +43,15 @@ const App = ({ config }: { config: FidesConfig }) => {
 
   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}
+      bannerTitle={experience?.banner_title}
+      bannerDescription={experience?.banner_description}
+      confirmationButtonLabel={experience?.confirmation_button_label}
+      rejectButtonLabel={experience?.reject_button_label}
+      privacyCenterUrl={options.privacyCenterUrl}
       onAcceptAll={onAcceptAll}
       onRejectAll={onRejectAll}
-      waitBeforeShow={100}
     />
   );
 };
 
-export default App;
+export default Overlay;

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

@@ -6,25 +6,25 @@ import "../lib/banner.module.css";
 import { useHasMounted } from "../lib/hooks";
 
 interface BannerProps {
-  bannerTitle?: string;
+  onAcceptAll: () => void;
+  onRejectAll: () => void;
+  privacyCenterUrl: string;
   bannerDescription?: string;
+  bannerTitle?: string;
   confirmationButtonLabel?: string;
   rejectButtonLabel?: string;
-  privacyCenterUrl: string;
-  onAcceptAll: () => void;
-  onRejectAll: () => void;
-  waitBeforeShow: number;
+  waitBeforeShow?: number;
 }
 
 const ConsentBanner: FunctionComponent<BannerProps> = ({
-  bannerTitle = "Manage your consent",
+  onAcceptAll,
+  onRejectAll,
+  privacyCenterUrl,
   bannerDescription = "This website processes your data respectfully, so we require your consent to use cookies.",
+  bannerTitle = "Manage your consent",
   confirmationButtonLabel = "Accept All",
   rejectButtonLabel = "Reject All",
-  privacyCenterUrl,
-  onAcceptAll,
-  onRejectAll,
-  waitBeforeShow,
+  waitBeforeShow = 100,
 }) => {
   const [isShown, setIsShown] = useState(false);
   const hasMounted = useHasMounted();

clients/fides-js/src/fides.ts

@@ -99,7 +99,12 @@ const init = async (config: FidesConfig) => {
   // Load any existing user preferences from the browser cookie
   const cookie = getOrMakeFidesCookie(consentDefaults);
 
-  await initOverlay(config);
+  await initOverlay({
+    consentDefaults,
+    experience: config.experience,
+    geolocation: config.geolocation,
+    options: config.options,
+  });
 
   // Initialize the window.Fides object
   _Fides.consent = cookie.consent;

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

@@ -3,35 +3,32 @@ import { h, render } from "preact";
 import { FidesConfig, FidesOptions, UserGeolocation } from "./consent-types";
 import { debugLog } from "./consent-utils";
 
-import App from "../components/App";
+import Overlay, { OverlayProps } from "../components/App";
 
 /**
  * Validate the config options
  */
-const validateBannerOptions = (config: FidesConfig): boolean => {
+const validateOptions = (options: FidesOptions): boolean => {
   // Check if options is an invalid type
-  if (config.options === undefined || typeof config.options !== "object") {
+  if (options === undefined || typeof options !== "object") {
     return false;
   }
   // todo- more validation here?
 
-  if (!config.options.privacyCenterUrl) {
-    debugLog(
-      config.options.debug,
-      "Invalid banner options: privacyCenterUrl is required!"
-    );
+  if (!options.privacyCenterUrl) {
+    debugLog(options.debug, "Invalid options: privacyCenterUrl is required!");
     return false;
   }
 
-  if (config.options.privacyCenterUrl) {
+  if (options.privacyCenterUrl) {
     try {
       // eslint-disable-next-line no-new
-      new URL(config.options.privacyCenterUrl);
+      new URL(options.privacyCenterUrl);
     } catch (e) {
       debugLog(
-        config.options.debug,
-        "Invalid banner options: privacyCenterUrl is an invalid URL!",
-        config
+        options.debug,
+        "Invalid options: privacyCenterUrl is an invalid URL!",
+        options.privacyCenterUrl
       );
       return false;
     }
@@ -45,8 +42,8 @@ const validateBannerOptions = (config: FidesConfig): boolean => {
  * Returns null if geolocation cannot be constructed by provided params
  */
 const constructLocation = (
-  debug: boolean,
-  geoLocation: UserGeolocation
+  geoLocation: UserGeolocation,
+  debug: boolean = false
 ): string | null => {
   debugLog(debug, "validating getLocation...");
   if (geoLocation.location) {
@@ -55,6 +52,9 @@ const constructLocation = (
   if (geoLocation.country && geoLocation.region) {
     return `${geoLocation.country}-${geoLocation.region}`;
   }
+  if (geoLocation.country) {
+    return geoLocation.country;
+  }
   debugLog(
     debug,
     "cannot construct user location from provided geoLocation params..."
@@ -65,30 +65,29 @@ const constructLocation = (
 /**
  * Fetch the user's geolocation from an external API
  */
-const getLocation = async (options: FidesOptions): Promise<UserGeolocation> => {
-  debugLog(options.debug, "Running getLocation...");
-  const { geolocationApiUrl } = options;
+const getLocation = async (
+  geolocationApiUrl: string,
+  debug: boolean = false
+): Promise<UserGeolocation> => {
+  debugLog(debug, "Running getLocation...");
 
   if (!geolocationApiUrl) {
     debugLog(
-      options.debug,
+      debug,
       "Location cannot be found due to no configured geoLocationApiUrl."
     );
     return {};
   }
 
-  debugLog(
-    options.debug,
-    `Calling geolocation API: GET ${geolocationApiUrl}...`
-  );
+  debugLog(debug, `Calling geolocation API: GET ${geolocationApiUrl}...`);
   const fetchOptions: RequestInit = {
     mode: "cors",
   };
   const response = await fetch(geolocationApiUrl, fetchOptions);
 
   if (!response.ok) {
     debugLog(
-      options.debug,
+      debug,
       "Error getting location from geolocation API, returning {}. Response:",
       response
     );
@@ -98,14 +97,14 @@ const getLocation = async (options: FidesOptions): Promise<UserGeolocation> => {
   try {
     const body = await response.json();
     debugLog(
-      options.debug,
+      debug,
       "Got location response from geolocation API, returning:",
       body
     );
     return body;
   } catch (e) {
     debugLog(
-      options.debug,
+      debug,
       "Error parsing response body from geolocation API, returning {}. Response:",
       response
     );
@@ -121,88 +120,110 @@ const getLocation = async (options: FidesOptions): Promise<UserGeolocation> => {
  *
  * (see the type definition of ConsentBannerOptions for what options are available)
  */
-export const initOverlay = async (config: FidesConfig): Promise<void> => {
-  debugLog(config.options.debug, "Initializing Fides consent overlays...");
+export const initOverlay = async ({
+  consentDefaults,
+  experience,
+  geolocation,
+  options,
+}: OverlayProps): Promise<void> => {
+  debugLog(options.debug, "Initializing Fides consent overlays...");
 
   debugLog(
-    config.options.debug,
+    options.debug,
     "Validating Fides consent banner options...",
-    config.options
+    options
   );
-  if (!validateBannerOptions(config)) {
+  if (!validateOptions(options)) {
     return Promise.reject(new Error("Invalid banner options"));
   }
 
-  if (config.options.isOverlayDisabled) {
+  if (options.isOverlayDisabled) {
     debugLog(
-      config.options.debug,
+      options.debug,
       "Fides consent banner is disabled, skipping banner initialization!"
     );
     return Promise.resolve();
   }
 
-  async function afterDomIsLoaded() {
-    debugLog(config.options.debug, "DOM fully loaded and parsed");
-
+  async function renderFidesOverlay() {
     try {
       debugLog(
-        config.options.debug,
-        "Adding Fides consent banner CSS & HTML into the DOM..."
+        options.debug,
+        "Rending Fides overlay CSS & HTML into the DOM..."
       );
-      let userLocation: UserGeolocation | undefined = config.geolocation;
+
+      // Fetch the user location (if not pre-loaded)
+      let userLocation: UserGeolocation | undefined = geolocation;
       if (
-        !config.experience &&
         !userLocation &&
-        config.options.isGeolocationEnabled
+        options.isGeolocationEnabled &&
+        options.geolocationApiUrl
       ) {
-        userLocation = await getLocation(config.options);
-        if (constructLocation(config.options.debug, userLocation)) {
+        userLocation = await getLocation(
+          options.geolocationApiUrl,
+          options.debug
+        );
+        if (constructLocation(userLocation, options.debug)) {
           // todo- get applicable notices using geoLocation
-          debugLog(config.options.debug, "User location found.", userLocation);
+          debugLog(options.debug, "User location found.", userLocation);
         } else {
           debugLog(
-            config.options.debug,
+            options.debug,
             "User location could not be constructed from location params.",
             userLocation
           );
         }
       } else {
         debugLog(
-          config.options.debug,
+          options.debug,
           "Geolocation must be enabled if config.geolocation is not provided!"
         );
       }
 
-      render(<App config={config} />, document.body);
+      // Render the Overlay to the DOM!
+      render(
+        <Overlay
+          consentDefaults={consentDefaults}
+          options={options}
+          experience={experience}
+          geolocation={userLocation}
+        />,
+        document.body
+      );
+      debugLog(options.debug, "Fides overlay is now showing!");
+
+      // Look for a "#fides-consent-link" element in the DOM and update it to link to the Privacy Center
+      // DEFER: Revisit whether or not this "link" logic is needed
       const consentLinkEl = document.getElementById("fides-consent-link");
       if (
         consentLinkEl &&
         consentLinkEl instanceof HTMLAnchorElement &&
-        config.options.privacyCenterUrl
+        options.privacyCenterUrl
       ) {
         debugLog(
-          config.options.debug,
-          `Fides consent link el found, replacing href with ${config.options.privacyCenterUrl}`
+          options.debug,
+          `Fides consent link el found, replacing href with ${options.privacyCenterUrl}`
         );
-        consentLinkEl.href = config.options.privacyCenterUrl;
+        consentLinkEl.href = options.privacyCenterUrl;
         // TODO: depending on notices / experience config, we update onclick of this link to nav to PC or open modal,
         // or hide link entirely
       } else {
-        debugLog(config.options.debug, "Fides consent link el not found");
+        debugLog(options.debug, "Fides consent link el not found");
       }
-
-      debugLog(config.options.debug, "Fides consent banner is now showing!");
     } catch (e) {
-      debugLog(config.options.debug, e);
+      debugLog(options.debug, e);
     }
   }
+
+  // Ensure we only render the overlay to the DOM once it's loaded
   if (document?.readyState !== "complete") {
-    debugLog(config.options.debug, "DOM not loaded, adding event listener");
+    debugLog(options.debug, "DOM not loaded, adding event listener");
     document.addEventListener("DOMContentLoaded", async () => {
-      await afterDomIsLoaded();
+      debugLog(options.debug, "DOM fully loaded and parsed");
+      await renderFidesOverlay();
     });
   } else {
-    await afterDomIsLoaded();
+    await renderFidesOverlay();
   }
 
   return Promise.resolve();