pc/consent: Extract fides-consent integrations into their own files

clients/privacy-center/.eslintrc.json

@@ -11,6 +11,7 @@
   "rules": {
     "curly": ["error", "all"],
     "nonblock-statement-body-position": ["error", "below"],
+    "import/prefer-default-export": "off",
     "react/jsx-filename-extension": [1, { "extensions": [".tsx"] }],
     "react/jsx-props-no-spreading": [0],
     "react/function-component-definition": [

clients/privacy-center/packages/fides-consent/src/fides-consent.ts

@@ -6,94 +6,24 @@
 // This file is created at build time by `generateConsentConfig` in `rollup.config.js`.
 import consentConfig from "./consent-config.json";
 
+import { gtm } from "./integrations/gtm";
+import { shopify } from "./integrations/shopify";
 import { getConsentCookie } from "./lib/cookie";
 
-declare global {
-  interface Window {
-    /** GTM */
-    dataLayer?: any[];
-
-    /** Shopify */
-    Shopify?: {
-      loadFeatures(
-        features: Array<{ name: string; version: string }>,
-        callback: (error: Error) => void
-      ): void;
-      customerPrivacy?: {
-        setTrackingConsent(consent: boolean, callback: () => void): void;
-      };
-    };
-  }
-}
-
 const Fides = {
   /**
    * Immediately load the stored consent settings from the browser cookie.
    */
   consent: getConsentCookie(consentConfig.defaults),
 
-  /**
-   * Call Fides.gtm to configure Google Tag Manager. The user's consent choices will be
-   * pushed into GTM's `dataLayer` under `Fides.consent`.
-   */
-  gtm() {
-    const dataLayer = window?.dataLayer ?? [];
-    dataLayer.push({
-      Fides: {
-        consent: Fides.consent,
-      },
-    });
-  },
-
-  /**
-   * Call Fides.shopify to configure Shopify customer privacy. Currently the only consent option
-   * Shopify allows to be configured is user tracking.
-   *
-   * @example
-   * Fides.shopify({ tracking: Fides.consent.data_sales })
-   */
-  shopify(options: { tracking: boolean | undefined }) {
-    const Shopify = window?.Shopify;
-    if (!Shopify) {
-      throw Error(
-        "Fides.shopify was called but Shopify is not present in the page."
-      );
-    }
-
-    const applyOptions = () => {
-      if (!Shopify.customerPrivacy) {
-        throw Error("Fides could not access Shopify's customerPrivacy API");
-      }
-
-      Shopify.customerPrivacy.setTrackingConsent(
-        Boolean(options.tracking),
-        () => {}
-      );
-    };
-
-    // If the API is already present, simply call it.
-    if (Shopify.customerPrivacy) {
-      applyOptions();
-      return;
-    }
-
-    // Otherwise we need to load the feature before applying the options.
-    Shopify.loadFeatures(
-      [
-        {
-          name: "consent-tracking-api",
-          version: "0.1",
-        },
-      ],
-      (error) => {
-        if (error) {
-          throw Error("Fides could not load Shopify's consent-tracking-api");
-        }
-
-        applyOptions();
-      }
-    );
-  },
+  gtm,
+  shopify,
 };
 
+declare global {
+  interface Window {
+    Fides: typeof Fides;
+  }
+}
+
 export default Fides;

clients/privacy-center/packages/fides-consent/src/integrations/gtm.ts

@@ -0,0 +1,18 @@
+declare global {
+  interface Window {
+    dataLayer?: any[];
+  }
+}
+
+/**
+ * Call Fides.gtm to configure Google Tag Manager. The user's consent choices will be
+ * pushed into GTM's `dataLayer` under `Fides.consent`.
+ */
+export const gtm = () => {
+  const dataLayer = window.dataLayer ?? [];
+  dataLayer.push({
+    Fides: {
+      consent: window.Fides.consent,
+    },
+  });
+};

clients/privacy-center/packages/fides-consent/src/integrations/shopify.ts

@@ -0,0 +1,68 @@
+declare global {
+  interface Window {
+    Shopify?: {
+      /** https://shopify.dev/api/consent-tracking#loading-pattern-for-visitor-tracking */
+      loadFeatures(
+        features: Array<{ name: string; version: string }>,
+        callback: (error: Error) => void
+      ): void;
+      customerPrivacy?: {
+        /** https://shopify.dev/api/consent-tracking#settrackingconsent-consent-boolean-callback-function */
+        setTrackingConsent(consent: boolean, callback: () => void): void;
+      };
+    };
+  }
+}
+
+type ShopifyOptions = {
+  tracking: boolean | undefined;
+};
+
+const applyOptions = (options: ShopifyOptions) => {
+  if (!window.Shopify?.customerPrivacy) {
+    throw Error("Fides could not access Shopify's customerPrivacy API");
+  }
+
+  window.Shopify.customerPrivacy.setTrackingConsent(
+    Boolean(options.tracking),
+    () => {}
+  );
+};
+
+/**
+ * Call Fides.shopify to configure Shopify customer privacy. Currently the only consent option
+ * Shopify allows to be configured is user tracking.
+ *
+ * @example
+ * Fides.shopify({ tracking: Fides.consent.data_sales })
+ */
+export const shopify = (options: ShopifyOptions) => {
+  if (!window.Shopify) {
+    throw Error(
+      "Fides.shopify was called but Shopify is not present in the page."
+    );
+  }
+
+  // If the API is already present, simply call it.
+  if (window.Shopify.customerPrivacy) {
+    applyOptions(options);
+    return;
+  }
+
+  // Otherwise we need to load the feature before applying the options.
+  window.Shopify.loadFeatures(
+    [
+      {
+        name: "consent-tracking-api",
+        version: "0.1",
+      },
+    ],
+    (error) => {
+      if (error) {
+        throw Error("Fides could not load Shopify's consent-tracking-api");
+      }
+
+      applyOptions(options);
+    }
+  );
+};