Feature: Privacy components 🥸

CHANGELOG.md

@@ -19,14 +19,22 @@ The types of changes are:
 ## [Unreleased](https://github.com/ethyca/fides/compare/2.14.1...main)
 
 ### Added
-
+- Privacy center can now render its consent values based on Privacy Notices and Privacy Experiences [#3411](https://github.com/ethyca/fides/pull/3411)
 - Add Google Tag Manager and Privacy Center ENV vars to sample app [#2949](https://github.com/ethyca/fides/pull/2949)
 - Add `notice_key` field to Privacy Notice UI form [#3403](https://github.com/ethyca/fides/pull/3403)
+- Add `identity` query param to the consent reporting API view [#3418](https://github.com/ethyca/fides/pull/3418)
+- Use `rollup-plugin-postcss` to bundle and optimize the `fides.js` components CSS [#3411](https://github.com/ethyca/fides/pull/3411)
+- Dispatch Fides.js lifecycle events on window (FidesInitialized, FidesUpdated) and cross-publish to Fides.gtm() integration [#3411](https://github.com/ethyca/fides/pull/3411)
 - Added the ability to use custom CAs with Redis via TLS [#3451](https://github.com/ethyca/fides/pull/3451)
 - Add default experience configs on startup [#3449](https://github.com/ethyca/fides/pull/3449)
 - Load default privacy notices on startup [#3401](https://github.com/ethyca/fides/pull/3401)
 - Add ability for users to pass in additional parameters for application database connection [#3450](https://github.com/ethyca/fides/pull/3450)
 - Load default privacy notices on startup [#3401](https://github.com/ethyca/fides/pull/3401/files)
+- Add ability for `fides-js` to make API calls to Fides [#3411](https://github.com/ethyca/fides/pull/3411)
+- `fides-js` banner is now responsive across different viewport widths [#3411](https://github.com/ethyca/fides/pull/3411)
+- Add ability to close `fides-js` banner and modal via a button or ESC [#3411](https://github.com/ethyca/fides/pull/3411)
+- Add ability to open the `fides-js` modal from a link on the host site [#3411](https://github.com/ethyca/fides/pull/3411)
+- GPC preferences are automatically applied via `fides-js` [#3411](https://github.com/ethyca/fides/pull/3411)
 
 ### Fixed
 
@@ -58,6 +66,7 @@ The types of changes are:
 ### Fixed
 
 - Flaky custom field Cypress test on systems page [#3408](https://github.com/ethyca/fides/pull/3408)
+- Fix NextJS errors & warnings for Cookie House sample app [#3411](https://github.com/ethyca/fides/pull/3411)
 
 ### Removed
 

clients/admin-ui/package.json

@@ -7,6 +7,7 @@
     "analyze:server": "cross-env BUNDLE_ANALYZE=server next build",
     "build": "next build",
     "chrome:debug": "BROWSER='google chrome' BROWSER_ARGS='--remote-debugging-port=9222' npm run dev",
+    "clean": "rm -rf .turbo node_modules",
     "copy-export": "mkdir -p ../../src/fides/ui-build/static/admin/ && rsync -a --delete out/ ../../src/fides/ui-build/static/admin/",
     "cy:open": "cypress open",
     "cy:run": "cypress run",

clients/admin-ui/src/types/api/models/ConsentReport.ts

@@ -13,6 +13,7 @@ export type ConsentReport = {
   opt_in: boolean;
   has_gpc_flag?: boolean;
   conflicts_with_gpc?: boolean;
+  id: string;
   identity: IdentityBase;
   created_at: string;
   updated_at: string;

clients/admin-ui/src/types/api/models/ConsentReportingSchema.ts

@@ -33,7 +33,7 @@ export type ConsentReportingSchema = {
   url_recorded?: string;
   user_agent?: string;
   experience_config_history_id?: string;
-  privacy_experience_history_id?: string;
+  privacy_experience_id?: string;
   truncated_ip_address?: string;
   method?: ConsentMethod;
 };

clients/admin-ui/src/types/api/models/ExperienceConfigCreate.ts

@@ -42,9 +42,12 @@ export type ExperienceConfigCreate = {
    * Overlay 'Privacy preferences link label'
    */
   privacy_preferences_link_label?: string;
+  /**
+   * Regions using this ExperienceConfig
+   */
+  regions?: Array<PrivacyNoticeRegion>;
   reject_button_label: string;
   save_button_label: string;
   title: string;
   component: ComponentType;
-  regions: Array<PrivacyNoticeRegion>;
 };

clients/admin-ui/src/types/api/models/ExperienceConfigResponse.ts

@@ -46,6 +46,7 @@ export type ExperienceConfigResponse = {
    * Overlay 'Privacy preferences link label'
    */
   privacy_preferences_link_label?: string;
+  regions: Array<PrivacyNoticeRegion>;
   /**
    * Overlay 'Reject button displayed on the Banner and 'Privacy Preferences' of Privacy Center 'Reject button label'
    */
@@ -64,5 +65,4 @@ export type ExperienceConfigResponse = {
   version: number;
   created_at: string;
   updated_at: string;
-  regions: Array<PrivacyNoticeRegion>;
 };

clients/admin-ui/src/types/api/models/ExperienceConfigUpdate.ts

@@ -45,6 +45,10 @@ export type ExperienceConfigUpdate = {
    * Overlay 'Privacy preferences link label'
    */
   privacy_preferences_link_label?: string;
+  /**
+   * Regions using this ExperienceConfig
+   */
+  regions?: Array<PrivacyNoticeRegion>;
   /**
    * Overlay 'Reject button displayed on the Banner and 'Privacy Preferences' of Privacy Center 'Reject button label'
    */
@@ -57,8 +61,4 @@ export type ExperienceConfigUpdate = {
    * Overlay 'Banner title' or Privacy Center 'title'
    */
   title?: string;
-  /**
-   * If None, no edits will be made to regions.  If an empty list, all regions will be removed.
-   */
-  regions?: Array<PrivacyNoticeRegion>;
 };

clients/admin-ui/src/types/api/models/PrivacyExperienceResponse.ts

@@ -13,13 +13,10 @@ import type { PrivacyNoticeResponseWithUserPreferences } from "./PrivacyNoticeRe
 export type PrivacyExperienceResponse = {
   region: PrivacyNoticeRegion;
   component?: ComponentType;
-  disabled?: boolean;
   experience_config?: ExperienceConfigResponse;
   id: string;
   created_at: string;
   updated_at: string;
-  version: number;
-  privacy_experience_history_id: string;
   show_banner?: boolean;
   privacy_notices?: Array<PrivacyNoticeResponseWithUserPreferences>;
 };

clients/admin-ui/src/types/api/models/PrivacyNoticeRegion.ts

@@ -83,4 +83,11 @@ export enum PrivacyNoticeRegion {
   EU_SK = "eu_sk",
   EU_FI = "eu_fi",
   EU_SE = "eu_se",
+  GB_ENG = "gb_eng",
+  GB_SCT = "gb_sct",
+  GB_WLS = "gb_wls",
+  GB_NIR = "gb_nir",
+  ISL = "isl",
+  NOR = "nor",
+  LI = "li",
 }

clients/admin-ui/src/types/api/models/PrivacyPreferencesRequest.ts

@@ -15,7 +15,7 @@ export type PrivacyPreferencesRequest = {
   code?: string;
   preferences: Array<ConsentOptionCreate>;
   policy_key?: string;
-  privacy_experience_history_id?: string;
+  privacy_experience_id?: string;
   user_geography?: PrivacyNoticeRegion;
   method?: ConsentMethod;
 };

clients/cypress-e2e/cypress/e2e/smoke_test.cy.ts

@@ -88,26 +88,26 @@ describe("Smoke test", () => {
     //  - Data Sales or Sharing => true
     //  - Email Marketing => true
     //  - Product Analytics => true
-    cy.getByTestId(`consent-item-card-marketing.advertising`).within(() => {
+    cy.getByTestId(`consent-item-marketing.advertising`).within(() => {
       cy.contains("Data Sales or Sharing");
       cy.getRadio("true").should("be.checked");
       cy.getRadio("false").should("not.be.checked");
     });
-    cy.getByTestId(
-      `consent-item-card-marketing.advertising.first_party`
-    ).within(() => {
-      cy.contains("Email Marketing");
-      cy.getRadio("true").should("be.checked");
-      cy.getRadio("false").should("not.be.checked");
-    });
-    cy.getByTestId(`consent-item-card-improve`).within(() => {
+    cy.getByTestId(`consent-item-marketing.advertising.first_party`).within(
+      () => {
+        cy.contains("Email Marketing");
+        cy.getRadio("true").should("be.checked");
+        cy.getRadio("false").should("not.be.checked");
+      }
+    );
+    cy.getByTestId(`consent-item-improve`).within(() => {
       cy.contains("Product Analytics");
       cy.getRadio("true").should("be.checked");
       cy.getRadio("false").should("not.be.checked");
     });
 
     // Opt-out of data sales / sharing
-    cy.getByTestId(`consent-item-card-marketing.advertising`).within(() => {
+    cy.getByTestId(`consent-item-marketing.advertising`).within(() => {
       cy.getRadio("false").check({ force: true });
     });
     cy.contains("Save").click();
@@ -121,7 +121,7 @@ describe("Smoke test", () => {
       cy.get("input#email").type("[email protected]");
       cy.get("button").contains("Continue").click();
     });
-    cy.getByTestId(`consent-item-card-marketing.advertising`).within(() => {
+    cy.getByTestId(`consent-item-marketing.advertising`).within(() => {
       cy.getRadio("true").should("not.be.checked");
       cy.getRadio("false").should("be.checked");
     });

clients/cypress-e2e/package.json

@@ -1,5 +1,6 @@
 {
   "scripts": {
+    "clean": "rm -rf node_modules",
     "cy:open": "cypress open",
     "cy:run": "cypress run",
     "format": "prettier --write .",

clients/fides-js/.eslintrc.json

@@ -18,6 +18,8 @@
     "curly": ["error", "all"],
     "nonblock-statement-body-position": ["error", "below"],
     "import/prefer-default-export": "off",
+    "react/jsx-props-no-spreading": [0],
+    "react/require-default-props": "off",
     "import/extensions": "off",
     "react/react-in-jsx-scope": "off",
     "react/prop-types": "off",

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

@@ -3,12 +3,13 @@ import {
   CookieKeyConsent,
   FidesCookie,
   getOrMakeFidesCookie,
-  makeConsentDefaults,
+  isNewFidesCookie,
+  makeConsentDefaultsLegacy,
   makeFidesCookie,
   saveFidesCookie,
 } from "../../src/lib/cookie";
-import type { ConsentConfig } from "../../src/lib/consent-config";
 import type { ConsentContext } from "../../src/lib/consent-context";
+import { LegacyConsentConfig } from "~/lib/consent-types";
 
 // Setup mock date
 const MOCK_DATE = "2023-01-01T12:00:00.000Z";
@@ -47,6 +48,7 @@ describe("makeFidesCookie", () => {
       consent: {},
       fides_meta: {
         createdAt: MOCK_DATE,
+        updatedAt: "",
         version: "0.9.0",
       },
       identity: {
@@ -74,27 +76,34 @@ describe("getOrMakeFidesCookie", () => {
       const cookie: FidesCookie = getOrMakeFidesCookie();
       expect(cookie.consent).toEqual({});
       expect(cookie.fides_meta.createdAt).toEqual(MOCK_DATE);
+      expect(cookie.fides_meta.updatedAt).toEqual("");
       expect(cookie.identity.fides_user_device_id).toEqual(MOCK_UUID);
     });
   });
 
   describe("when a saved cookie exists", () => {
-    const SAVED_DATE = "2022-12-25T12:00:00.000Z";
+    const CREATED_DATE = "2022-12-24T12:00:00.000Z";
+    const UPDATED_DATE = "2022-12-25T12:00:00.000Z";
     const SAVED_UUID = "8a46c3ee-d6c3-4518-9b6c-074528b7bfd0";
     const SAVED_CONSENT = { data_sales: false, performance: true };
 
     describe("in v0.9.0 format", () => {
       const V090_COOKIE = JSON.stringify({
         consent: SAVED_CONSENT,
         identity: { fides_user_device_id: SAVED_UUID },
-        fides_meta: { createdAt: SAVED_DATE, version: "0.9.0" },
+        fides_meta: {
+          createdAt: CREATED_DATE,
+          updatedAt: UPDATED_DATE,
+          version: "0.9.0",
+        },
       });
       beforeEach(() => mockGetCookie.mockReturnValue(V090_COOKIE));
 
       it("returns the saved cookie", () => {
         const cookie: FidesCookie = getOrMakeFidesCookie();
         expect(cookie.consent).toEqual(SAVED_CONSENT);
-        expect(cookie.fides_meta.createdAt).toEqual(SAVED_DATE);
+        expect(cookie.fides_meta.createdAt).toEqual(CREATED_DATE);
+        expect(cookie.fides_meta.updatedAt).toEqual(UPDATED_DATE);
         expect(cookie.identity.fides_user_device_id).toEqual(SAVED_UUID);
       });
     });
@@ -117,10 +126,17 @@ describe("getOrMakeFidesCookie", () => {
 describe("saveFidesCookie", () => {
   afterEach(() => mockSetCookie.mockClear());
 
+  it("updates the updatedAt date", () => {
+    const cookie: FidesCookie = getOrMakeFidesCookie();
+    expect(cookie.fides_meta.updatedAt).toEqual("");
+    saveFidesCookie(cookie);
+    expect(cookie.fides_meta.updatedAt).toEqual(MOCK_DATE);
+  });
+
   it("sets a cookie on the root domain with 1 year expiry date", () => {
     const cookie: FidesCookie = getOrMakeFidesCookie();
-    const expectedCookieString = JSON.stringify(cookie);
     saveFidesCookie(cookie);
+    const expectedCookieString = JSON.stringify(cookie);
     // NOTE: signature of the setCookie fn is: setCookie(name, value, attributes, encoding)
     expect(mockSetCookie.mock.calls).toHaveLength(1);
     expect(mockSetCookie.mock.calls[0][0]).toEqual("fides_consent"); // name
@@ -171,8 +187,8 @@ describe("saveFidesCookie", () => {
   });
 });
 
-describe("makeConsentDefaults", () => {
-  const config: ConsentConfig = {
+describe("makeConsentDefaultsLegacy", () => {
+  const config: LegacyConsentConfig = {
     options: [
       {
         cookieKeys: ["default_undefined"],
@@ -205,7 +221,7 @@ describe("makeConsentDefaults", () => {
     const context: ConsentContext = {};
 
     it("returns the default consent values by key", () => {
-      expect(makeConsentDefaults({ config, context })).toEqual({
+      expect(makeConsentDefaultsLegacy(config, context, false)).toEqual({
         default_true: true,
         default_false: false,
         default_true_with_gpc_false: true,
@@ -220,7 +236,7 @@ describe("makeConsentDefaults", () => {
     };
 
     it("returns the default consent values by key", () => {
-      expect(makeConsentDefaults({ config, context })).toEqual({
+      expect(makeConsentDefaultsLegacy(config, context, false)).toEqual({
         default_true: true,
         default_false: false,
         default_true_with_gpc_false: false,
@@ -229,3 +245,34 @@ describe("makeConsentDefaults", () => {
     });
   });
 });
+
+describe("isNewFidesCookie", () => {
+  it("returns true for new cookies", () => {
+    const newCookie: FidesCookie = getOrMakeFidesCookie();
+    expect(isNewFidesCookie(newCookie)).toBeTruthy();
+  });
+
+  describe("when a saved cookie exists", () => {
+    const CREATED_DATE = "2022-12-24T12:00:00.000Z";
+    const UPDATED_DATE = "2022-12-25T12:00:00.000Z";
+    const SAVED_UUID = "8a46c3ee-d6c3-4518-9b6c-074528b7bfd0";
+    const SAVED_CONSENT = { data_sales: false, performance: true };
+    const V090_COOKIE = JSON.stringify({
+      consent: SAVED_CONSENT,
+      identity: { fides_user_device_id: SAVED_UUID },
+      fides_meta: {
+        createdAt: CREATED_DATE,
+        updatedAt: UPDATED_DATE,
+        version: "0.9.0",
+      },
+    });
+    beforeEach(() => mockGetCookie.mockReturnValue(V090_COOKIE));
+
+    it("returns false for saved cookies", () => {
+      const savedCookie: FidesCookie = getOrMakeFidesCookie();
+      expect(savedCookie.fides_meta.createdAt).toEqual(CREATED_DATE);
+      expect(savedCookie.fides_meta.updatedAt).toEqual(UPDATED_DATE);
+      expect(isNewFidesCookie(savedCookie)).toBeFalsy();
+    });
+  });
+});

clients/fides-js/package.json

@@ -12,7 +12,7 @@
   ],
   "scripts": {
     "build": "NODE_ENV=production rollup -c",
-    "clean": "rm -rf dist .turbo",
+    "clean": "rm -rf dist .turbo node_modules",
     "format": "prettier --write .",
     "format:ci": "prettier --check .",
     "lint": "eslint . --ext .ts,.tsx",
@@ -25,6 +25,7 @@
     "directory": "clients/fides-js"
   },
   "dependencies": {
+    "a11y-dialog": "^7.5.2",
     "preact": "^10.13.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -47,13 +48,14 @@
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
     "js-cookie": "^3.0.5",
+    "postcss": "^8.4.24",
     "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",
+    "rollup-plugin-postcss": "^4.0.2",
     "ts-jest": "^29.1.0",
     "typescript": "^4.9.5",
     "typescript-plugin-css-modules": "^5.0.1"