Render new TCF fields in the overlay using the data map

CHANGELOG.md

@@ -20,6 +20,9 @@ The types of changes are:
 ### Added
 - Added a `FidesPreferenceToggled` event to Fides.js to track when user preferences change without being saved [#4253](https://github.com/ethyca/fides/pull/4253)
 
+### Changed
+- Derive cookie storage info, privacy policy and legitimate interest disclosure URLs, and data retention data from the data map instead of directly from gvl.json [#4286](https://github.com/ethyca/fides/pull/4286)
+
 ## [2.22.0](https://github.com/ethyca/fides/compare/2.21.0...2.22.0)
 
 ### Added

clients/admin-ui/src/types/api/index.ts

@@ -122,6 +122,7 @@ export type { DynamoDBDocsSchema } from "./models/DynamoDBDocsSchema";
 export { EdgeDirection } from "./models/EdgeDirection";
 export type { EmailDocsSchema } from "./models/EmailDocsSchema";
 export type { EmbeddedLineItem } from "./models/EmbeddedLineItem";
+export type { EmbeddedPurpose } from "./models/EmbeddedPurpose";
 export type { EmbeddedVendor } from "./models/EmbeddedVendor";
 export type { Endpoint } from "./models/Endpoint";
 export { EnforcementLevel } from "./models/EnforcementLevel";

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

@@ -0,0 +1,12 @@
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+
+/**
+ * Sparse details for an embedded purpose beneath a system or vendor section.  Read-only.
+ */
+export type EmbeddedPurpose = {
+  id: number;
+  name: string;
+  retention_period?: string;
+};

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

@@ -9,6 +9,7 @@ import type { UserConsentPreference } from "./UserConsentPreference";
  * Schema for a TCF Purpose with Consent Legal Basis returned in the TCF Overlay Experience
  */
 export type TCFPurposeConsentRecord = {
+  retention_period?: string;
   /**
    * Official GVL purpose ID. Used for linking with other records, e.g. vendors, cookies, etc.
    */

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

@@ -9,6 +9,7 @@ import type { UserConsentPreference } from "./UserConsentPreference";
  * Schema for a TCF Purpose with Legitimate Interests Legal Basis returned in the TCF Overlay Experience
  */
 export type TCFPurposeLegitimateInterestsRecord = {
+  retention_period?: string;
   /**
    * Official GVL purpose ID. Used for linking with other records, e.g. vendors, cookies, etc.
    */

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

@@ -10,6 +10,7 @@ import type { UserConsentPreference } from "./UserConsentPreference";
  * records where consent was previously served if applicable.
  */
 export type TCFSpecialPurposeRecord = {
+  retention_period?: string;
   /**
    * Official GVL purpose ID. Used for linking with other records, e.g. vendors, cookies, etc.
    */

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

@@ -2,7 +2,7 @@
 /* tslint:disable */
 /* eslint-disable */
 
-import type { EmbeddedLineItem } from "./EmbeddedLineItem";
+import type { EmbeddedPurpose } from "./EmbeddedPurpose";
 import type { UserConsentPreference } from "./UserConsentPreference";
 
 /**
@@ -18,5 +18,5 @@ export type TCFVendorConsentRecord = {
   outdated_preference?: UserConsentPreference;
   current_served?: boolean;
   outdated_served?: boolean;
-  purpose_consents?: Array<EmbeddedLineItem>;
+  purpose_consents?: Array<EmbeddedPurpose>;
 };

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

@@ -2,7 +2,7 @@
 /* tslint:disable */
 /* eslint-disable */
 
-import type { EmbeddedLineItem } from "./EmbeddedLineItem";
+import type { EmbeddedPurpose } from "./EmbeddedPurpose";
 import type { UserConsentPreference } from "./UserConsentPreference";
 
 /**
@@ -18,5 +18,5 @@ export type TCFVendorLegitimateInterestsRecord = {
   outdated_preference?: UserConsentPreference;
   current_served?: boolean;
   outdated_served?: boolean;
-  purpose_legitimate_interests?: Array<EmbeddedLineItem>;
+  purpose_legitimate_interests?: Array<EmbeddedPurpose>;
 };

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

@@ -3,6 +3,7 @@
 /* eslint-disable */
 
 import type { EmbeddedLineItem } from "./EmbeddedLineItem";
+import type { EmbeddedPurpose } from "./EmbeddedPurpose";
 
 /**
  * Collects the other relationships for a given vendor - no preferences are saved here
@@ -12,12 +13,13 @@ export type TCFVendorRelationships = {
   has_vendor_id?: boolean;
   name?: string;
   description?: string;
-  special_purposes?: Array<EmbeddedLineItem>;
+  special_purposes?: Array<EmbeddedPurpose>;
   features?: Array<EmbeddedLineItem>;
   special_features?: Array<EmbeddedLineItem>;
   cookie_max_age_seconds?: number;
   uses_cookies?: boolean;
   cookie_refresh?: boolean;
   uses_non_cookie_access?: boolean;
   legitimate_interest_disclosure_url?: string;
+  privacy_policy_url?: string;
 };

clients/fides-js/src/components/tcf/TcfVendors.tsx

@@ -2,12 +2,10 @@ import { VNode, h } from "preact";
 import { useMemo, useState } from "preact/hooks";
 import { Vendor } from "@iabtechlabtcf/core";
 import {
-  GvlDataRetention,
-  EmbeddedLineItem,
   GvlDataCategories,
-  GvlVendorUrl,
   GvlDataDeclarations,
   VendorRecord,
+  EmbeddedPurpose,
 } from "../../lib/tcf/types";
 import { PrivacyExperience } from "../../lib/consent-types";
 import { UpdateEnabledIds } from "./TcfOverlay";
@@ -21,53 +19,42 @@ import DoubleToggleTable from "./DoubleToggleTable";
 
 const FILTERS = [{ name: "All vendors" }, { name: "IAB TCF vendors" }];
 
-interface Retention {
-  mapping: Record<number, number>;
-  default: number;
-}
-
 const VendorDetails = ({
   label,
   lineItems,
-  dataRetention,
 }: {
   label: string;
-  lineItems: EmbeddedLineItem[] | undefined;
-  dataRetention?: Retention;
+  lineItems: EmbeddedPurpose[] | undefined;
 }) => {
   if (!lineItems || lineItems.length === 0) {
     return null;
   }
 
+  const hasRetentionInfo = lineItems.some((li) => li.retention_period);
+
   return (
     <table className="fides-vendor-details-table">
       <thead>
         <tr>
           <th width="80%">{label}</th>
-          {dataRetention ? (
+          {hasRetentionInfo ? (
             <th width="20%" style={{ textAlign: "right" }}>
               Retention
             </th>
           ) : null}
         </tr>
       </thead>
       <tbody>
-        {lineItems.map((item) => {
-          let retention: string | number = "N/A";
-          if (dataRetention) {
-            retention = dataRetention.mapping[item.id] ?? dataRetention.default;
-          }
-          return (
-            <tr key={item.id}>
-              <td>{item.name}</td>
-              {dataRetention ? (
-                <td style={{ textAlign: "right" }}>
-                  {retention == null ? "N/A" : `${retention} day(s)`}
-                </td>
-              ) : null}
-            </tr>
-          );
-        })}
+        {lineItems.map((item) => (
+          <tr key={item.id}>
+            <td>{item.name}</td>
+            {hasRetentionInfo ? (
+              <td style={{ textAlign: "right" }}>
+                {item.retention_period ?? "N/A"}
+              </td>
+            ) : null}
+          </tr>
+        ))}
       </tbody>
     </table>
   );
@@ -76,11 +63,9 @@ const VendorDetails = ({
 const PurposeVendorDetails = ({
   purposes,
   specialPurposes,
-  gvlVendor,
 }: {
-  purposes: EmbeddedLineItem[] | undefined;
-  specialPurposes: EmbeddedLineItem[] | undefined;
-  gvlVendor: Vendor | undefined;
+  purposes: EmbeddedPurpose[] | undefined;
+  specialPurposes: EmbeddedPurpose[] | undefined;
 }) => {
   const emptyPurposes = purposes ? purposes.length === 0 : true;
   const emptySpecialPurposes = specialPurposes
@@ -90,34 +75,34 @@ const PurposeVendorDetails = ({
   if (emptyPurposes && emptySpecialPurposes) {
     return null;
   }
-  // @ts-ignore our TCF lib does not have GVL v3 types yet
-  const dataRetention: GvlDataRetention | undefined = gvlVendor?.dataRetention;
+  // // @ts-ignore our TCF lib does not have GVL v3 types yet
+  // const dataRetention: GvlDataRetention | undefined = gvlVendor?.dataRetention;
 
   return (
     <div>
       <VendorDetails
         label="Purposes"
-        lineItems={purposes as EmbeddedLineItem[]}
-        dataRetention={
-          dataRetention
-            ? {
-                mapping: dataRetention.purposes,
-                default: dataRetention.stdRetention,
-              }
-            : undefined
-        }
+        lineItems={purposes}
+        // dataRetention={
+        //   dataRetention
+        //     ? {
+        //         mapping: dataRetention.purposes,
+        //         default: dataRetention.stdRetention,
+        //       }
+        //     : undefined
+        // }
       />
       <VendorDetails
         label="Special purposes"
-        lineItems={specialPurposes as EmbeddedLineItem[]}
-        dataRetention={
-          dataRetention
-            ? {
-                mapping: dataRetention.specialPurposes,
-                default: dataRetention.stdRetention,
-              }
-            : undefined
-        }
+        lineItems={specialPurposes}
+        // dataRetention={
+        //   dataRetention
+        //     ? {
+        //         mapping: dataRetention.specialPurposes,
+        //         default: dataRetention.stdRetention,
+        //       }
+        //     : undefined
+        // }
       />
     </div>
   );
@@ -158,13 +143,13 @@ const DataCategories = ({
   );
 };
 
-const StorageDisclosure = ({ vendor }: { vendor: Vendor }) => {
+const StorageDisclosure = ({ vendor }: { vendor: VendorRecord }) => {
   const {
     name,
-    usesCookies,
-    usesNonCookieAccess,
-    cookieMaxAgeSeconds,
-    cookieRefresh,
+    uses_cookies: usesCookies,
+    uses_non_cookie_access: usesNonCookieAccess,
+    cookie_max_age_seconds: cookieMaxAgeSeconds,
+    cookie_refresh: cookieRefresh,
   } = vendor;
   let disclosure = "";
   if (usesCookies) {
@@ -238,22 +223,22 @@ const TcfVendors = ({
         }
         renderToggleChild={(vendor) => {
           const gvlVendor = vendorGvlEntry(vendor.id, experience.gvl);
-          // @ts-ignore the IAB-TCF lib doesn't support GVL v3 types yet
-          const url: GvlVendorUrl | undefined = gvlVendor?.urls.find(
-            (u: GvlVendorUrl) => u.langId === "en"
-          );
           const dataCategories: GvlDataCategories | undefined =
             // @ts-ignore the IAB-TCF lib doesn't support GVL v3 types yet
             experience.gvl?.dataCategories;
           return (
             <div>
-              {gvlVendor ? <StorageDisclosure vendor={gvlVendor} /> : null}
+              <StorageDisclosure vendor={vendor} />
               <div style={{ marginBottom: "1.1em" }}>
-                {url?.privacy ? (
-                  <ExternalLink href={url.privacy}>Privacy policy</ExternalLink>
+                {vendor?.privacy_policy_url ? (
+                  <ExternalLink href={vendor.privacy_policy_url}>
+                    Privacy policy
+                  </ExternalLink>
                 ) : null}
-                {url?.legIntClaim ? (
-                  <ExternalLink href={url.legIntClaim}>
+                {vendor.legitimate_interest_disclosure_url ? (
+                  <ExternalLink
+                    href={vendor.legitimate_interest_disclosure_url}
+                  >
                     Legitimate interest disclosure
                   </ExternalLink>
                 ) : null}
@@ -264,7 +249,6 @@ const TcfVendors = ({
                   ...(vendor.purpose_legitimate_interests || []),
                 ]}
                 specialPurposes={vendor.special_purposes}
-                gvlVendor={gvlVendor}
               />
               <VendorDetails label="Features" lineItems={vendor.features} />
               <VendorDetails

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

@@ -211,7 +211,7 @@ export enum ConsentMethod {
 export type PrivacyPreferencesRequest = {
   browser_identity: Identity;
   code?: string;
-  tc_string?: string;
+  fides_string?: string;
   preferences?: Array<ConsentOptionCreate>;
   purpose_consent_preferences?: Array<TCFPurposeSave>;
   purpose_legitimate_interests_preferences?: Array<TCFPurposeSave>;