Add infrastructure for consent banner and link

clients/fides-js/.eslintrc.json

@@ -4,10 +4,15 @@
     "project": "./tsconfig.json"
   },
   "rules": {
+    "react/jsx-filename-extension": [2, { "extensions": [",.js", ".jsx", ".ts", ".tsx"] }],
     "curly": ["error", "all"],
     "nonblock-statement-body-position": ["error", "below"],
     "import/prefer-default-export": "off",
     "import/extensions": "off",
+    "react/react-in-jsx-scope": "off",
+    "react/prop-types": "off",
+    "react/button-has-type": "off",
+    "react/function-component-definition": "off",
     "no-param-reassign": [
       "error",
       {

clients/fides-js/__tests__/lib/cookie.test.ts

@@ -5,7 +5,7 @@ import {
   getOrMakeFidesCookie,
   makeFidesCookie,
   saveFidesCookie,
-} from "~/lib/cookie";
+} from "../../src/lib/cookie";
 
 // Setup mock date
 const MOCK_DATE = "2023-01-01T12:00:00.000Z";

clients/fides-js/package.json

@@ -25,6 +25,7 @@
     "directory": "clients/fides-js"
   },
   "dependencies": {
+    "preact": "^10.13.2",
     "typescript-cookie": "^1.0.6",
     "uuid": "^9.0.0"
   },
@@ -37,17 +38,28 @@
     "eslint": "^8.36.0",
     "eslint-config-airbnb": "^19.0.4",
     "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",
     "js-cookie": "^3.0.5",
+    "npm": "^9.6.5",
     "prettier": "^2.8.8",
     "rollup": "^3.21.3",
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-dts": "^5.3.0",
     "rollup-plugin-esbuild": "^5.0.0",
     "rollup-plugin-filesize": "^10.0.0",
+    "rollup-plugin-import-css": "^3.2.1",
     "ts-jest": "^29.1.0",
-    "typescript": "^4.9.5"
+    "typescript": "^4.9.5",
+    "typescript-plugin-css-modules": "^5.0.1"
+  },
+  "eslintConfig": {
+    "extends": "preact"
   }
 }

clients/fides-js/rollup.config.mjs

@@ -3,6 +3,7 @@ import dts from "rollup-plugin-dts";
 import esbuild from "rollup-plugin-esbuild";
 import filesize from "rollup-plugin-filesize";
 import nodeResolve from "@rollup/plugin-node-resolve";
+import css from "rollup-plugin-import-css";
 
 const name = "fides";
 const isDev = process.env.NODE_ENV === "development";
@@ -17,6 +18,7 @@ export default [
     input: `src/${name}.ts`,
     plugins: [
       nodeResolve(),
+      css(),
       esbuild({
         minify: !isDev,
       }),
@@ -28,6 +30,14 @@ export default [
         verbose: true,
         hook: "writeBundle",
       }),
+      copy({
+        // Automatically add the built css to the privacy center's static files for bundling:
+        targets: [
+          { src: `dist/${name}.css`, dest: "../privacy-center/public/lib/" },
+        ],
+        verbose: true,
+        hook: "writeBundle",
+      }),
       filesize({
         reporter: [
           "boxen", // default reporter, which prints a nice CLI output
@@ -70,7 +80,7 @@ export default [
   },
   {
     input: `src/${name}.ts`,
-    plugins: [nodeResolve(), esbuild()],
+    plugins: [nodeResolve(), css(), esbuild()],
     output: [
       {
         // Compatible with ES module imports. Apps in this repo may be able to share the code.
@@ -82,7 +92,7 @@ export default [
   },
   {
     input: `src/${name}.ts`,
-    plugins: [dts()],
+    plugins: [dts(), css()],
     output: [
       {
         file: `dist/${name}.d.ts`,

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

@@ -0,0 +1,82 @@
+import {h, FunctionComponent} from "preact";
+import {useState, useEffect} from "preact/hooks";
+import {ButtonType, ConsentBannerOptions} from "../lib/consent-types";
+import debugLog from "../lib/consent-utils";
+import ConsentBannerButton from "./ConsentBannerButton";
+import "../lib/banner.module.css";
+
+interface BannerProps {
+    options: ConsentBannerOptions;
+    onAcceptAll: () => void;
+    onRejectAll: () => void;
+    waitBeforeShow: number;
+}
+
+const ConsentBanner: FunctionComponent<BannerProps> = (
+    { options, onAcceptAll, onRejectAll, waitBeforeShow }
+) => {
+  const [isShown, setIsShown] = useState(false)
+  useEffect(() => {
+    const delayBanner = setTimeout(() => {
+      setIsShown(true)
+    }, waitBeforeShow)
+    return () => clearTimeout(delayBanner)
+  }, [setIsShown, waitBeforeShow])
+  const navigateToPrivacyCenter = (): void => {
+    debugLog("Navigate to Privacy Center URL:", options.privacyCenterUrl);
+    if (options.privacyCenterUrl) {
+      window.location.assign(options.privacyCenterUrl);
+    }
+  };
+// TODO: support option to specify top/bottom
+  return (
+      <div
+          id="fides-consent-banner"
+          className={`fides-consent-banner fides-consent-banner-bottom ${
+              isShown ? "" : "fides-consent-banner-hidden"
+          } `}
+      >
+        <div
+            id="fides-consent-banner-description"
+            className="fides-consent-banner-description"
+        >
+          {options.labels?.bannerDescription || ""}
+        </div>
+        <div
+            id="fides-consent-banner-buttons"
+            className="fides-consent-banner-buttons"
+        >
+          <ConsentBannerButton
+              buttonType={ButtonType.TERTIARY}
+              label={options.labels?.tertiaryButton}
+              onClick={navigateToPrivacyCenter} />
+          <ConsentBannerButton
+              buttonType={ButtonType.SECONDARY}
+              label={options.labels?.secondaryButton}
+              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
+              buttonType={ButtonType.PRIMARY}
+              label={options.labels?.primaryButton}
+              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>
+      </div>
+  );
+}
+
+export default ConsentBanner;

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

@@ -0,0 +1,20 @@
+import {h, FunctionComponent} from "preact";
+import {ButtonType} from "../lib/consent-types";
+
+interface ButtonProps {
+    buttonType: ButtonType;
+    label?: string,
+    onClick?: () => void
+}
+
+const ConsentBannerButton: FunctionComponent<ButtonProps> = ({ buttonType, label, onClick }) => (
+    <button
+        id={`fides-consent-banner-button-${buttonType.valueOf()}`}
+        className={`fides-consent-banner-button fides-consent-banner-button-${buttonType.valueOf()}`}
+        onClick={onClick}
+    >
+        {label || ""}
+    </button>
+);
+
+export default ConsentBannerButton;

clients/fides-js/src/fides.ts

@@ -38,21 +38,26 @@ import { meta } from "./integrations/meta";
 import { shopify } from "./integrations/shopify";
 import { ConsentConfig } from "./lib/consent-config";
 import { getConsentContext } from "./lib/consent-context";
+import { initFidesConsent } from "./lib/consent";
 import {
   CookieKeyConsent,
   CookieIdentity,
   CookieMeta,
   getOrMakeFidesCookie,
   makeConsentDefaults,
 } from "./lib/cookie";
+import { ConsentBannerOptions } from "./lib/consent-types";
+import { getBannerOptions } from "./lib/consent-utils";
 
 export interface FidesConfig {
   consent: ConsentConfig;
+  bannerOptions?: ConsentBannerOptions;
 }
 
 type Fides = {
   consent: CookieKeyConsent;
   fides_meta: CookieMeta;
+  getBannerOptions: () => ConsentBannerOptions;
   gtm: typeof gtm;
   identity: CookieIdentity;
   init: typeof init;
@@ -71,8 +76,10 @@ declare global {
 // eslint-disable-next-line no-underscore-dangle,@typescript-eslint/naming-convention
 let _Fides: Fides;
 
-// Initialize the global Fides object with the given configuration values
-const init = (config: FidesConfig) => {
+/**
+ * Initialize the global Fides object with the given configuration values
+ */
+const init = async (config: FidesConfig) => {
   // Configure the default values
   const context = getConsentContext();
   const defaults = makeConsentDefaults({
@@ -83,17 +90,21 @@ const init = (config: FidesConfig) => {
   // Load any existing user preferences from the browser cookie
   const cookie = getOrMakeFidesCookie(defaults);
 
+  await initFidesConsent(defaults, config.bannerOptions);
   // Initialize the window.Fides object
   _Fides.consent = cookie.consent;
+  _Fides.getBannerOptions = getBannerOptions;
   _Fides.fides_meta = cookie.fides_meta;
   _Fides.identity = cookie.identity;
+
   _Fides.initialized = true;
 };
 
 // The global Fides object; this is bound to window.Fides if available
 _Fides = {
   consent: {},
   fides_meta: {},
+  getBannerOptions,
   identity: {},
   gtm,
   init,
@@ -107,8 +118,13 @@ if (typeof window !== "undefined") {
 }
 
 // Export everything from ./lib/* to use when importing fides.mjs as a module
+export * from "./lib/consent";
+export * from "./components/ConsentBanner";
 export * from "./lib/consent-config";
 export * from "./lib/consent-context";
+export * from "./lib/consent-types";
+export * from "./lib/consent-utils";
 export * from "./lib/consent-value";
 export * from "./lib/cookie";
+
 export default Fides;