Update to not fetch experience if it is empty

CHANGELOG.md

@@ -35,6 +35,7 @@ The types of changes are:
 ### Fixed
 - Allows CDN to cache empty experience responses from fides.js API  [#4113](https://github.com/ethyca/fides/pull/4113)
 - added version_added, version_deprecated, and replaced_by to data use, data subject, and data category APIs [#4135](https://github.com/ethyca/fides/pull/4135)
+- Update fides.js to not fetch experience client-side if pre-fetched experience is empty [#4149](https://github.com/ethyca/fides/pull/4149)
 
 ## [2.20.1](https://github.com/ethyca/fides/compare/2.20.0...2.20.1)
 

clients/fides-js/src/lib/consent-types.ts

@@ -15,8 +15,8 @@ export interface FidesConfig {
   // Set the consent defaults from a "legacy" Privacy Center config.json.
   consent?: LegacyConsentConfig;
   // Set the "experience" to be used for this Fides.js instance -- overrides the "legacy" config.
-  // If set, Fides.js will fetch neither experience config nor user geolocation.
-  // If not set or is empty, Fides.js will attempt to fetch its own experience config.
+  // If defined or is empty, Fides.js will not fetch experience config.
+  // If undefined, Fides.js will attempt to fetch its own experience config.
   experience?: PrivacyExperience | EmptyExperience;
   // Set the geolocation for this Fides.js instance. If *not* set, Fides.js will fetch its own geolocation.
   geolocation?: UserGeolocation;

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

@@ -235,7 +235,9 @@ export const initialize = async ({
         `User location could not be obtained. Skipping overlay initialization.`
       );
       shouldInitOverlay = false;
-    } else if (!isPrivacyExperience(experience)) {
+      // An empty experience (e.g. {}) is expected when 1. pre-fetch is enabled, and 2. the location has no associated
+      // experience. We should not fetch experiences again in this case. We only fetch experiences if it's undefined.
+    } else if (!experience) {
       effectiveExperience = await fetchExperience(
         fidesRegionString,
         options.fidesApiUrl,

clients/privacy-center/cypress/e2e/consent-banner.cy.ts

@@ -1,12 +1,12 @@
 import {
   ComponentType,
   CONSENT_COOKIE_NAME,
-  ConsentMethod,
   ConsentMechanism,
-  UserConsentPreference,
+  ConsentMethod,
+  ConsentOptionCreate,
   FidesCookie,
   LastServedNoticeSchema,
-  ConsentOptionCreate,
+  UserConsentPreference,
 } from "fides-js";
 
 import { mockPrivacyNotice } from "../support/mocks";
@@ -49,7 +49,7 @@ describe("Consent banner", () => {
             options: {
               isOverlayEnabled: false,
             },
-            experience: OVERRIDE.EMPTY,
+            experience: OVERRIDE.UNDEFINED,
           },
           {},
           {}
@@ -681,7 +681,7 @@ describe("Consent banner", () => {
     describe("when experience is not provided, and valid geolocation is provided", () => {
       beforeEach(() => {
         stubConfig({
-          experience: OVERRIDE.EMPTY,
+          experience: OVERRIDE.UNDEFINED,
           geolocation: {
             country: "US",
             location: "US-CA",
@@ -712,7 +712,7 @@ describe("Consent banner", () => {
     describe("when experience is provided, and geolocation is not provided", () => {
       beforeEach(() => {
         stubConfig({
-          geolocation: OVERRIDE.EMPTY,
+          geolocation: OVERRIDE.UNDEFINED,
           options: {
             isGeolocationEnabled: true,
             geolocationApiUrl: "https://some-geolocation-url.com",
@@ -738,13 +738,61 @@ describe("Consent banner", () => {
       });
     });
 
+    describe("when experience is empty, and geolocation is not provided", () => {
+      beforeEach(() => {
+        stubConfig({
+          geolocation: OVERRIDE.UNDEFINED,
+          experience: OVERRIDE.EMPTY,
+          options: {
+            isGeolocationEnabled: true,
+            geolocationApiUrl: "https://some-geolocation-url.com",
+          },
+        });
+      });
+
+      it("does fetches geolocation and does not render the banner", () => {
+        // we still need geolocation because it is needed to save consent preference
+        cy.wait("@getGeolocation");
+        cy.get("div#fides-banner").should("not.exist");
+        cy.contains("button", "Accept Test").should("not.exist");
+      });
+      it("does not render modal link", () => {
+        cy.get("#fides-modal-link").should("not.be.visible");
+      });
+    });
+
+    describe("when experience is empty, and geolocation is provided", () => {
+      beforeEach(() => {
+        stubConfig({
+          geolocation: {
+            country: "US",
+            location: "US-CA",
+            region: "CA",
+          },
+          experience: OVERRIDE.EMPTY,
+          options: {
+            isGeolocationEnabled: true,
+            geolocationApiUrl: "https://some-geolocation-url.com",
+          },
+        });
+      });
+
+      it("does not geolocate and does not render the banner", () => {
+        cy.get("div#fides-banner").should("not.exist");
+        cy.contains("button", "Accept Test").should("not.exist");
+      });
+      it("does not render modal link", () => {
+        cy.get("#fides-modal-link").should("not.be.visible");
+      });
+    });
+
     describe("when neither experience nor geolocation is provided, but geolocationApiUrl is defined", () => {
       describe("when geolocation is successful", () => {
         beforeEach(() => {
           const geoLocationUrl = "https://some-geolocation-api.com";
           stubConfig({
-            experience: OVERRIDE.EMPTY,
-            geolocation: OVERRIDE.EMPTY,
+            experience: OVERRIDE.UNDEFINED,
+            geolocation: OVERRIDE.UNDEFINED,
             options: {
               isGeolocationEnabled: true,
               geolocationApiUrl: geoLocationUrl,
@@ -780,8 +828,8 @@ describe("Consent banner", () => {
           };
           stubConfig(
             {
-              experience: OVERRIDE.EMPTY,
-              geolocation: OVERRIDE.EMPTY,
+              experience: OVERRIDE.UNDEFINED,
+              geolocation: OVERRIDE.UNDEFINED,
               options: {
                 isGeolocationEnabled: true,
                 geolocationApiUrl: "https://some-geolocation-api.com",
@@ -805,7 +853,7 @@ describe("Consent banner", () => {
     describe("when experience is not provided, and geolocation is invalid", () => {
       beforeEach(() => {
         stubConfig({
-          experience: OVERRIDE.EMPTY,
+          experience: OVERRIDE.UNDEFINED,
           geolocation: {
             country: "US",
             location: "",
@@ -842,8 +890,8 @@ describe("Consent banner", () => {
     describe("when experience is not provided, and geolocation is not provided, but geolocation is disabled", () => {
       beforeEach(() => {
         stubConfig({
-          experience: OVERRIDE.EMPTY,
-          geolocation: OVERRIDE.EMPTY,
+          experience: OVERRIDE.UNDEFINED,
+          geolocation: OVERRIDE.UNDEFINED,
           options: {
             isGeolocationEnabled: false,
           },

clients/privacy-center/cypress/support/stubs.ts

@@ -18,8 +18,19 @@ export const stubIdVerification = () => {
 export enum OVERRIDE {
   // signals that we should override entire prop with undefined
   EMPTY = "Empty",
+  UNDEFINED = "Undefined",
 }
 
+const setNewConfig = (baseConfigObj: any, newConfig: any): any => {
+  if (newConfig === OVERRIDE.EMPTY) {
+    return {};
+  }
+  if (newConfig === OVERRIDE.UNDEFINED) {
+    return undefined;
+  }
+  return Object.assign(baseConfigObj, newConfig);
+};
+
 interface FidesConfigTesting {
   // We don't need all required props to override the default config
   consent?: Partial<LegacyConsentConfig> | OVERRIDE;
@@ -39,22 +50,10 @@ export const stubConfig = (
 ) => {
   cy.fixture("consent/test_banner_options.json").then((config) => {
     const updatedConfig = {
-      consent:
-        consent === OVERRIDE.EMPTY
-          ? undefined
-          : Object.assign(config.consent, consent),
-      experience:
-        experience === OVERRIDE.EMPTY
-          ? {}
-          : Object.assign(config.experience, experience),
-      geolocation:
-        geolocation === OVERRIDE.EMPTY
-          ? undefined
-          : Object.assign(config.geolocation, geolocation),
-      options:
-        options === OVERRIDE.EMPTY
-          ? undefined
-          : Object.assign(config.options, options),
+      consent: setNewConfig(config.consent, consent),
+      experience: setNewConfig(config.experience, experience),
+      geolocation: setNewConfig(config.geolocation, geolocation),
+      options: setNewConfig(config.options, options),
     };
     // We conditionally stub these APIs because we need the exact API urls, which can change or not even exist
     // depending on the specific test case.