Apply any updated state to the overlay (#5384)

CHANGELOG.md

@@ -23,6 +23,7 @@ The types of changes are:
 ### Fixed
 - Fixed a bug where D&D tables were rendering stale data [#5372](https://github.com/ethyca/fides/pull/5372)
 - Fixed issue where Dataset with nested fields was unable to edit Categories [#5383](https://github.com/ethyca/fides/pull/5383)
+- Fixed racecondition where GPC being updated after FidesJS initialization caused Privacy Notices to be in the wrong state [#5384](https://github.com/ethyca/fides/pull/5384)
 
 
 ## [2.47.0](https://github.com/ethyca/fidesplus/compare/2.46.2...2.47.0)

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

@@ -9,6 +9,7 @@ import {
   ConsentMethod,
   FidesCookie,
   Layer1ButtonOption,
+  NoticeConsent,
   PrivacyNotice,
   PrivacyNoticeTranslation,
   PrivacyNoticeWithPreference,
@@ -58,7 +59,7 @@ const NoticeOverlay: FunctionComponent<OverlayProps> = ({
 
   // TODO (PROD-1792): restore useMemo here but ensure that saved changes are respected
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  const initialEnabledNoticeKeys = () => {
+  const initialEnabledNoticeKeys = (consent?: NoticeConsent) => {
     if (experience.privacy_notices) {
       // ensure we have most up-to-date cookie vals
       // TODO (PROD-1792): we should be able to replace parsedCookie with savedConsent
@@ -67,7 +68,7 @@ const NoticeOverlay: FunctionComponent<OverlayProps> = ({
         const val = resolveConsentValue(
           notice,
           getConsentContext(),
-          parsedCookie?.consent,
+          consent || parsedCookie?.consent,
         );
         return val ? (notice.notice_key as PrivacyNotice["notice_key"]) : "";
       });
@@ -124,6 +125,11 @@ const NoticeOverlay: FunctionComponent<OverlayProps> = ({
     Array<string>
   >(initialEnabledNoticeKeys());
 
+  window.addEventListener("FidesUpdating", (event) => {
+    // If GPC is being applied after initialization, we need to update the initial overlay to reflect the new state. This is especially important for Firefox browsers (Gecko) because GPC gets applied rather late due to how it handles queuing the `setTimeout` on the last step of our `initialize` function.
+    setDraftEnabledNoticeKeys(initialEnabledNoticeKeys(event.detail.consent));
+  });
+
   const isAllNoticeOnly = privacyNoticeItems.every(
     (n) => n.notice.consent_mechanism === ConsentMechanism.NOTICE_ONLY,
   );

clients/fides-js/src/lib/preferences.ts

@@ -143,7 +143,9 @@ export const updateConsentPreferences = async ({
           preference.consentPreference === UserConsentPreference.OPT_OUT,
       )
       .forEach((preference) => {
-        removeCookiesFromBrowser(preference.notice.cookies);
+        if (preference.notice?.cookies) {
+          removeCookiesFromBrowser(preference.notice.cookies);
+        }
       });
   }
 

clients/privacy-center/components/consent/notice-driven/NoticeDrivenConsent.tsx

@@ -303,9 +303,11 @@ const NoticeDrivenConsent = ({ base64Cookie }: { base64Cookie: boolean }) => {
         noticePreference.notice
       ) {
         // DEFER (PROD-2737) remove type casting
-        removeCookiesFromBrowser(
-          noticePreference.notice.cookies as FidesJSCookies[],
-        );
+        if (noticePreference.notice.cookies) {
+          removeCookiesFromBrowser(
+            noticePreference.notice.cookies as FidesJSCookies[],
+          );
+        }
       }
     });
     router.push("/");

clients/privacy-center/public/fides-js-demo.html

@@ -177,6 +177,14 @@ <h2>Property id</h2>
       } else {
         window.addEventListener("FidesInitialized", onInitialized);
       }
+      window.addEventListener("FidesUpdated", () => {
+        console.log("Fides has been updated");
+        document.getElementById("consent-json").textContent = JSON.stringify(
+          Fides.consent,
+          null,
+          2,
+        );
+      });
 
       window.addEventListener("FidesUIShown", () => {
         // Log event timing