TCF modal display data

CHANGELOG.md

@@ -21,6 +21,7 @@ The types of changes are:
 - Additional consent reporting calls from `fides-js` [#3845](https://github.com/ethyca/fides/pull/3845)
 - Additional consent reporting calls from privacy center [#3847](https://github.com/ethyca/fides/pull/3847)
 - HTTP Logging for the Privacy Center [#3783](https://github.com/ethyca/fides/pull/3783)
+- Fides-js can now display preliminary TCF data [#3879](https://github.com/ethyca/fides/pull/3879)
 
 ### Fixed
 - Fix datamap zoom for low system counts [#3835](https://github.com/ethyca/fides/pull/3835)

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

@@ -8,7 +8,7 @@ import {
   ExperienceConfig,
 } from "../lib/consent-types";
 
-const ConsentButtons = ({
+export const ConsentButtons = ({
   experienceConfig,
   onManagePreferencesClick,
   onSave,
@@ -122,41 +122,3 @@ export const NoticeConsentButtons = ({
     />
   );
 };
-
-interface TcfConsentButtonProps {
-  experience: PrivacyExperience;
-  onManagePreferencesClick?: () => void;
-  onSave: (keys: string[]) => void;
-  enabledKeys: string[];
-  isInModal?: boolean;
-}
-
-export const TcfConsentButtons = ({
-  experience,
-  onManagePreferencesClick,
-  onSave,
-  enabledKeys,
-  isInModal,
-}: TcfConsentButtonProps) => {
-  if (!experience.experience_config) {
-    return null;
-  }
-
-  // TODO: figure out what accepting all/rejecting all looks like here
-  const handleAcceptAll = () => {};
-  const handleRejectAll = () => {};
-  const handleSave = () => {
-    onSave(enabledKeys);
-  };
-
-  return (
-    <ConsentButtons
-      experienceConfig={experience.experience_config}
-      onManagePreferencesClick={onManagePreferencesClick}
-      onSave={handleSave}
-      onAcceptAll={handleAcceptAll}
-      onRejectAll={handleRejectAll}
-      isInModal={isInModal}
-    />
-  );
-};

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

@@ -15,14 +15,16 @@ const DataUseToggle = ({
   badge,
   gpcBadge,
   disabled,
+  isHeader,
 }: {
   dataUse: DataUse;
   checked: boolean;
   onToggle: (noticeKey: DataUse["key"]) => void;
-  children: ComponentChildren;
+  children?: ComponentChildren;
   badge?: string;
   gpcBadge?: VNode;
   disabled?: boolean;
+  isHeader?: boolean;
 }) => {
   const {
     isOpen,
@@ -39,10 +41,13 @@ const DataUseToggle = ({
     }
   };
 
+  const isClickable = children != null;
+  const buttonProps = isClickable ? getButtonProps() : {};
+
   return (
     <div
       className={
-        isOpen
+        isOpen && isClickable
           ? "fides-notice-toggle fides-notice-toggle-expanded"
           : "fides-notice-toggle"
       }
@@ -51,9 +56,13 @@ const DataUseToggle = ({
         <span
           role="button"
           tabIndex={0}
-          onKeyDown={handleKeyDown}
-          {...getButtonProps()}
-          className="fides-notice-toggle-trigger"
+          onKeyDown={isClickable ? handleKeyDown : undefined}
+          {...buttonProps}
+          className={
+            isHeader
+              ? "fides-notice-toggle-trigger fides-notice-toggle-header"
+              : "fides-notice-toggle-trigger"
+          }
         >
           <span className="fides-flex-center">
             {dataUse.name}
@@ -70,7 +79,7 @@ const DataUseToggle = ({
           disabled={disabled}
         />
       </div>
-      <div {...getDisclosureProps()}>{children}</div>
+      {children ? <div {...getDisclosureProps()}>{children}</div> : null}
     </div>
   );
 };

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

@@ -28,7 +28,7 @@ const Toggle = ({
         onChange={() => {
           onChange(id);
         }}
-        defaultChecked={checked}
+        checked={checked}
         role="switch"
         aria-labelledby={labelId}
         disabled={disabled}

clients/fides-js/src/components/fides.css

@@ -429,6 +429,7 @@ div#fides-modal .fides-modal-button-group {
 /* Disclosure */
 
 .fides-disclosure-hidden {
+  display: flex;
   visibility: hidden;
   height: 0px;
   margin-top: 0px;
@@ -456,14 +457,24 @@ div#fides-modal .fides-modal-button-group {
   background-color: var(--fides-overlay-row-hover-color);
 }
 
-.fides-notice-toggle .disclosure-visible {
-  padding-left: 0.5em;
+.fides-notice-toggle .fides-disclosure-visible {
+  padding-inline: 0.5em;
+}
+
+.fides-notice-toggle p {
+  margin: 0;
+  margin-bottom: 1.1em;
 }
 
 .fides-notice-toggle-expanded {
   background-color: var(--fides-overlay-row-hover-color);
 }
 
+.fides-notice-toggle-header {
+  text-transform: uppercase;
+  font-weight: 600;
+}
+
 /* GPC */
 .fides-gpc-banner {
   border: 1px solid var(--fides-overlay-primary-color);
@@ -614,3 +625,33 @@ div#fides-modal .fides-modal-button-group {
   display: flex;
   align-items: center;
 }
+
+/* TCF toggles */
+.fides-tcf-toggle-content {
+  margin-right: 60px;
+  font-size: 0.9em;
+  font-weight: 400;
+}
+
+.fides-tcf-purpose-vendor-title {
+  font-weight: 500;
+}
+
+.fides-tcf-illustration {
+  font-size: 0.9em;
+  padding: 0.8em;
+  padding-right: 60px;
+  border-radius: var(--fides-overlay-component-border-radius);
+}
+
+.fides-tcf-purpose-vendor {
+  padding: 0.8em;
+  border-radius: var(--fides-overlay-component-border-radius);
+}
+
+.fides-tcf-purpose-vendor-list {
+  font-weight: 400;
+  padding-left: 0;
+  list-style: none;
+  margin-left: 0;
+}

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

@@ -1,9 +1,22 @@
 import { h } from "preact";
 import { useState } from "preact/hooks";
 
-const FilterButtons = () => {
-  const filters = [{ name: "All vendors" }, { name: "Global vendors" }];
+interface Filter {
+  name: string;
+}
+
+const FilterButtons = ({
+  filters,
+  onChange,
+}: {
+  filters: Filter[];
+  onChange: (idx: number) => void;
+}) => {
   const [activeButtonIndex, setActiveButtonIndex] = useState(0);
+  const handleClick = (idx: number) => {
+    setActiveButtonIndex(idx);
+    onChange(idx);
+  };
 
   return (
     <div className="fides-filter-button-group">
@@ -14,7 +27,7 @@ const FilterButtons = () => {
             role="radio"
             type="button"
             aria-checked={selected}
-            onClick={() => setActiveButtonIndex(idx)}
+            onClick={() => handleClick(idx)}
             className="fides-filter-button"
           >
             {name}

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

@@ -0,0 +1,79 @@
+import { h } from "preact";
+
+import { PrivacyExperience } from "../../lib/consent-types";
+import { ConsentButtons } from "../ConsentButtons";
+import type { EnabledIds } from "./TcfOverlay";
+import {
+  TCFPurposeRecord,
+  TCFFeatureRecord,
+  TCFVendorRecord,
+} from "../../lib/tcf/types";
+
+interface TcfConsentButtonProps {
+  experience: PrivacyExperience;
+  onManagePreferencesClick?: () => void;
+  onSave: (keys: EnabledIds) => void;
+  enabledKeys: EnabledIds;
+  isInModal?: boolean;
+}
+
+const getAllIds = (
+  modelList:
+    | TCFPurposeRecord[]
+    | TCFFeatureRecord[]
+    | TCFVendorRecord[]
+    | undefined
+) => {
+  if (!modelList) {
+    return [];
+  }
+  return modelList.map((m) => `${m.id}`);
+};
+
+export const TcfConsentButtons = ({
+  experience,
+  onManagePreferencesClick,
+  onSave,
+  enabledKeys,
+  isInModal,
+}: TcfConsentButtonProps) => {
+  if (!experience.experience_config) {
+    return null;
+  }
+
+  const handleAcceptAll = () => {
+    const allIds: EnabledIds = {
+      purposes: getAllIds(experience.tcf_purposes),
+      specialPurposes: getAllIds(experience.tcf_special_purposes),
+      features: getAllIds(experience.tcf_features),
+      specialFeatures: getAllIds(experience.tcf_special_features),
+      vendors: getAllIds(experience.tcf_vendors),
+    };
+    onSave(allIds);
+  };
+  const handleRejectAll = () => {
+    const emptyIds: EnabledIds = {
+      purposes: [],
+      specialPurposes: [],
+      features: [],
+      specialFeatures: [],
+      vendors: [],
+    };
+    onSave(emptyIds);
+  };
+
+  const handleSave = () => {
+    onSave(enabledKeys);
+  };
+
+  return (
+    <ConsentButtons
+      experienceConfig={experience.experience_config}
+      onManagePreferencesClick={onManagePreferencesClick}
+      onSave={handleSave}
+      onAcceptAll={handleAcceptAll}
+      onRejectAll={handleRejectAll}
+      isInModal={isInModal}
+    />
+  );
+};