Recording interactions with TCF notices

CHANGELOG.md

@@ -30,6 +30,7 @@ The types of changes are:
 - Access and erasure support for SparkPost [#4328](https://github.com/ethyca/fides/pull/4238)
 - Access and erasure support for Iterate [#4332](https://github.com/ethyca/fides/pull/4332)
 - SSH Support for MySQL connections [#4310](https://github.com/ethyca/fides/pull/4310)
+- Added served notice history IDs to the TCF privacy preference API calls [#4161](https://github.com/ethyca/fides/pull/4161)
 
 ### Fixed
 - Cleans up CSS for fidesEmbed mode [#4306](https://github.com/ethyca/fides/pull/4306)

clients/fides-js/rollup.config.mjs

@@ -10,7 +10,7 @@ import postcss from "rollup-plugin-postcss";
 
 const NAME = "fides";
 const IS_DEV = process.env.NODE_ENV === "development";
-const GZIP_SIZE_ERROR_KB = 22; // fail build if bundle size exceeds this
+const GZIP_SIZE_ERROR_KB = 24; // fail build if bundle size exceeds this
 const GZIP_SIZE_WARN_KB = 15; // log a warning if bundle size exceeds this
 
 // TCF

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

@@ -1,4 +1,5 @@
 import { h, FunctionComponent, ComponentChildren, VNode } from "preact";
+import { useEffect } from "react";
 import { getConsentContext } from "../lib/consent-context";
 import { ExperienceConfig } from "../lib/consent-types";
 import CloseButton from "./CloseButton";
@@ -7,6 +8,7 @@ import ExperienceDescription from "./ExperienceDescription";
 
 interface BannerProps {
   experience: ExperienceConfig;
+  onOpen: () => void;
   onClose: () => void;
   bannerIsOpen: boolean;
   /**
@@ -20,13 +22,21 @@ interface BannerProps {
 
 const ConsentBanner: FunctionComponent<BannerProps> = ({
   experience,
+  onOpen,
   onClose,
   bannerIsOpen,
   children,
   onVendorPageClick,
   buttonGroup,
 }) => {
   const showGpcBadge = getConsentContext().globalPrivacyControl;
+
+  useEffect(() => {
+    if (bannerIsOpen) {
+      onOpen();
+    }
+  }, [bannerIsOpen]);
+
   return (
     <div
       id="fides-banner-container"

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

@@ -1,10 +1,6 @@
 import { h, FunctionComponent, VNode } from "preact";
 import { useEffect, useState, useCallback, useMemo } from "preact/hooks";
-import {
-  FidesOptions,
-  PrivacyExperience,
-  ServingComponent,
-} from "../lib/consent-types";
+import { FidesOptions, PrivacyExperience } from "../lib/consent-types";
 
 import { debugLog, hasActionNeededNotices } from "../lib/consent-utils";
 
@@ -30,6 +26,7 @@ interface Props {
   options: FidesOptions;
   experience: PrivacyExperience;
   cookie: FidesCookie;
+  onOpen: () => void;
   renderBanner: (props: RenderBannerProps) => VNode | null;
   renderModalContent: (props: RenderModalContent) => VNode;
   onVendorPageClick?: () => void;
@@ -39,6 +36,7 @@ const Overlay: FunctionComponent<Props> = ({
   experience,
   options,
   cookie,
+  onOpen,
   renderBanner,
   renderModalContent,
   onVendorPageClick,
@@ -63,9 +61,7 @@ const Overlay: FunctionComponent<Props> = ({
   const handleOpenModal = useCallback(() => {
     if (instance) {
       instance.show();
-      dispatchFidesEvent("FidesUIShown", cookie, options.debug, {
-        servingComponent: ServingComponent.OVERLAY,
-      });
+      onOpen();
     }
   }, [instance, cookie, options.debug]);
 
@@ -122,15 +118,6 @@ const Overlay: FunctionComponent<Props> = ({
     [experience, options]
   );
 
-  useEffect(() => {
-    const eventCookie = cookie;
-    if (showBanner && bannerIsOpen) {
-      dispatchFidesEvent("FidesUIShown", eventCookie, options.debug, {
-        servingComponent: ServingComponent.BANNER,
-      });
-    }
-  }, [showBanner, cookie, options.debug, bannerIsOpen]);
-
   const handleManagePreferencesClick = (): void => {
     handleOpenModal();
     setBannerIsOpen(false);

clients/fides-js/src/components/notices/NoticeOverlay.tsx

@@ -3,8 +3,10 @@ import { useState, useCallback, useMemo } from "preact/hooks";
 import {
   ConsentMechanism,
   ConsentMethod,
+  LastServedConsentSchema,
   PrivacyNotice,
   SaveConsentPreference,
+  ServingComponent,
 } from "../../lib/consent-types";
 import ConsentBanner from "../ConsentBanner";
 
@@ -59,26 +61,51 @@ const NoticeOverlay: FunctionComponent<OverlayProps> = ({
     options,
     userGeography: fidesRegionString,
     acknowledgeMode: isAllNoticeOnly,
-    privacyExperienceId: experience.id,
+    privacyExperience: experience,
   });
 
+  const createConsentPreferencesToSave = (
+    privacyNoticeList: PrivacyNotice[],
+    enabledPrivacyNoticeKeys: string[],
+    servedNoticeList: LastServedConsentSchema[]
+  ): SaveConsentPreference[] => {
+    const servedNoticeMap = Object.fromEntries(
+      servedNoticeList
+        .filter((notice) => notice.privacy_notice_history?.id !== undefined)
+        .map((notice) => [
+          notice.privacy_notice_history?.id,
+          notice.served_notice_history_id,
+        ])
+    );
+
+    return privacyNoticeList.map((notice) => {
+      const userPreference = transformConsentToFidesUserPreference(
+        enabledPrivacyNoticeKeys.includes(notice.notice_key),
+        notice.consent_mechanism
+      );
+      return new SaveConsentPreference(
+        notice,
+        userPreference,
+        servedNoticeMap[notice.privacy_notice_history_id]
+      );
+    });
+  };
+
   const handleUpdatePreferences = useCallback(
     (enabledPrivacyNoticeKeys: Array<PrivacyNotice["notice_key"]>) => {
-      const consentPreferencesToSave = privacyNotices.map((notice) => {
-        const userPreference = transformConsentToFidesUserPreference(
-          enabledPrivacyNoticeKeys.includes(notice.notice_key),
-          notice.consent_mechanism
-        );
-        return new SaveConsentPreference(notice, userPreference);
-      });
+      const consentPreferencesToSave = createConsentPreferencesToSave(
+        privacyNotices,
+        enabledPrivacyNoticeKeys,
+        servedNotices
+      );
+
       updateConsentPreferences({
         consentPreferencesToSave,
         experience,
         consentMethod: ConsentMethod.button,
         options,
         userLocationString: fidesRegionString,
         cookie,
-        servedNotices,
         updateCookie: (oldCookie) =>
           updateCookieFromNoticePreferences(
             oldCookie,
@@ -104,15 +131,29 @@ const NoticeOverlay: FunctionComponent<OverlayProps> = ({
   }
   const experienceConfig = experience.experience_config;
 
+  const dispatchOpenBannerEvent = () => {
+    dispatchFidesEvent("FidesUIShown", cookie, options.debug, {
+      servingComponent: ServingComponent.BANNER,
+    });
+  };
+
+  const dispatchOpenOverlayEvent = () => {
+    dispatchFidesEvent("FidesUIShown", cookie, options.debug, {
+      servingComponent: ServingComponent.OVERLAY,
+    });
+  };
+
   return (
     <Overlay
       options={options}
       experience={experience}
       cookie={cookie}
+      onOpen={dispatchOpenOverlayEvent}
       renderBanner={({ isOpen, onClose, onSave, onManagePreferencesClick }) =>
         showBanner ? (
           <ConsentBanner
             bannerIsOpen={isOpen}
+            onOpen={dispatchOpenBannerEvent}
             onClose={onClose}
             experience={experienceConfig}
             buttonGroup={