Support the “minimal” TCF experience API and dynamically fetch “full” API response after banner is shown

CHANGELOG.md

@@ -25,6 +25,7 @@ The types of changes are:
 - Removed unused `username` parameter from the Delighted integration configuration [#5220](https://github.com/ethyca/fides/pull/5220)
 - Removed unused `ad_account_id` parameter from the Snap integration configuration [#5229](https://github.com/ethyca/fides/pull/5220)
 - Updates to support consent signal processing (Fidesplus) [#5200](https://github.com/ethyca/fides/pull/5200)
+- TCF Optimized for performance on initial load by offsetting most experience data until after banner is shown [#5230](https://github.com/ethyca/fides/pull/5230)
 
 ### Developer Experience
 - Sourcemaps are now working for fides-js in debug mode [#5222](https://github.com/ethyca/fides/pull/5222)

clients/fides-js/__tests__/lib/tcf/utils.ts

@@ -4,11 +4,17 @@ import * as uuid from "uuid";
 import { PrivacyExperience, UserConsentPreference } from "~/lib/consent-types";
 import { makeFidesCookie } from "~/lib/cookie";
 import {
+  GVLTranslations,
   TcfExperienceRecords,
   TCFPurposeConsentRecord,
   TCFVendorConsentRecord,
 } from "~/lib/tcf/types";
-import { updateExperienceFromCookieConsentTcf } from "~/lib/tcf/utils";
+import {
+  getGVLPurposeList,
+  updateExperienceFromCookieConsentTcf,
+} from "~/lib/tcf/utils";
+
+import mockGVLTranslationsJSON from "../../__fixtures__/mock_gvl_translations.json";
 
 // Setup mock date
 const MOCK_DATE = "2023-01-01T12:00:00.000Z";
@@ -170,3 +176,25 @@ describe("updateExperienceFromCookieConsentTcf", () => {
     });
   });
 });
+
+describe("getGVLPurposeList", () => {
+  it("can pull out the purpose list from the GVL", () => {
+    const gvl = mockGVLTranslationsJSON as GVLTranslations;
+    const purposeList = getGVLPurposeList(gvl.en);
+    expect(purposeList).toEqual([
+      "Store and/or access information on a device",
+      "Use limited data to select advertising",
+      "Create profiles for personalised advertising",
+      "Use profiles to select personalised advertising",
+      "Create profiles to personalise content",
+      "Use profiles to select personalised content",
+      "Measure advertising performance",
+      "Measure content performance",
+      "Understand audiences through statistics or combinations of data from different sources",
+      "Develop and improve services",
+      "Use limited data to select content",
+      "Use precise geolocation data",
+      "Actively scan device characteristics for identification",
+    ]);
+  });
+});

clients/fides-js/docs/interfaces/Fides.md

@@ -257,7 +257,7 @@ However, initialization can be called manually if needed - for example to delay
 initialization until after your own custom JavaScript has run to set up some
 config options. In this case, you can disable the automatic initialization
 by including the query param `initialize=false` in the Fides script URL
-(see /docs/dev-docs/js/privacy-center-fidesjs-hosting for details).
+(see (Privacy Center FidesJS Hosting)[/docs/dev-docs/js/privacy-center-fidesjs-hosting] for details).
 You will then need to call `Fides.init()` manually at the appropriate time.
 
 This function can also be used to reinitialize FidesJS. This is useful when

clients/fides-js/package.json

@@ -22,7 +22,8 @@
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "test": "jest --watchAll",
-    "test:ci": "jest"
+    "test:ci": "jest",
+    "typecheck": "tsc --noEmit"
   },
   "repository": {
     "type": "git",

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

@@ -8,6 +8,7 @@ interface ButtonProps {
   id?: string;
   onClick?: () => void;
   className?: string;
+  disabled?: boolean;
 }
 
 const Button: FunctionComponent<ButtonProps> = ({
@@ -16,13 +17,15 @@ const Button: FunctionComponent<ButtonProps> = ({
   id,
   onClick,
   className = "",
+  disabled,
 }) => (
   <button
     type="button"
     id={id}
     className={`fides-banner-button fides-banner-button-${buttonType.valueOf()} ${className}`}
     onClick={onClick}
     data-testid={`${label}-btn`}
+    disabled={disabled}
   >
     {label || ""}
   </button>