Add number of vendors with link to vendor tab (#4144)

CHANGELOG.md

@@ -27,6 +27,7 @@ The types of changes are:
 - Fides-js can now display preliminary TCF data [#3879](https://github.com/ethyca/fides/pull/3879)
 - Fides-js can persist TCF preferences to the backend [#3887](https://github.com/ethyca/fides/pull/3887)
 - TCF modal now supports setting legitimate interest fields [#4037](https://github.com/ethyca/fides/pull/4037)
+- Button to view how many vendors and to open the vendor tab in the TCF modal [#4144](https://github.com/ethyca/fides/pull/4144)
 
 ### Changed
 - Added further config options to customize the privacy center [#4090](https://github.com/ethyca/fides/pull/4090)

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

@@ -1,4 +1,4 @@
-import { VNode, h } from "preact";
+import { h } from "preact";
 import { useMemo } from "preact/hooks";
 import { PrivacyExperience } from "../../lib/consent-types";
 
@@ -12,13 +12,7 @@ import InitialLayerAccordion from "./InitialLayerAccordion";
 
 const STACKS: Record<string, Stack> = GVL_JSON.stacks;
 
-const InitialLayer = ({
-  experience,
-  managePreferencesLink,
-}: {
-  experience: PrivacyExperience;
-  managePreferencesLink: VNode;
-}) => {
+const InitialLayer = ({ experience }: { experience: PrivacyExperience }) => {
   const purposeIds = useMemo(
     () =>
       experience.tcf_purposes ? experience.tcf_purposes.map((p) => p.id) : [],
@@ -86,7 +80,6 @@ const InitialLayer = ({
               title={s.name}
               description={s.description}
               purposes={stackPurposes}
-              managePreferencesLink={managePreferencesLink}
             />
           );
         })}
@@ -97,18 +90,15 @@ const InitialLayer = ({
             key={p.id}
             title={p.name}
             description={p.description}
-            managePreferencesLink={managePreferencesLink}
           />
         ))}
       </div>
       <div>
         {specialFeatures.map((sf) => (
           <InitialLayerAccordion
             key={sf.id}
-            // TODO: features are still being worked on in the backend
-            title={sf.name || ""}
-            description=""
-            managePreferencesLink={managePreferencesLink}
+            title={sf.name}
+            description={sf.description}
           />
         ))}
       </div>

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

@@ -1,4 +1,4 @@
-import { VNode, h } from "preact";
+import { h } from "preact";
 import { useDisclosure } from "../../lib/hooks";
 import { TCFPurposeRecord } from "~/lib/tcf/types";
 
@@ -15,11 +15,9 @@ const InitialLayerAccordion = ({
   title,
   description,
   purposes,
-  managePreferencesLink,
 }: {
   title: string;
   description: string;
-  managePreferencesLink: VNode;
   purposes?: Array<TCFPurposeRecord>;
 }) => {
   const { isOpen, getButtonProps, getDisclosureProps, onToggle } =
@@ -69,7 +67,6 @@ const InitialLayerAccordion = ({
             </ul>
           </div>
         ) : null}
-        {managePreferencesLink}
       </div>
     </div>
   );

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

@@ -27,11 +27,16 @@ import type {
 } from "../../lib/tcf/types";
 
 import { updateConsentPreferences } from "../../lib/preferences";
-import { ConsentMethod, PrivacyExperience } from "../../lib/consent-types";
-import TcfModalContent from "./TcfModalContent";
+import {
+  ButtonType,
+  ConsentMethod,
+  PrivacyExperience,
+} from "../../lib/consent-types";
 import { generateTcString } from "../../lib/tcf";
 import { FidesCookie } from "../../lib/cookie";
 import InitialLayer from "./InitialLayer";
+import TcfTabs from "./TcfTabs";
+import Button from "../Button";
 
 const resolveConsentValueFromTcfModel = (
   model: TCFPurposeRecord | TCFFeatureRecord | TCFVendorRecord
@@ -174,6 +179,16 @@ const TcfOverlay: FunctionComponent<OverlayProps> = ({
     [experience]
   );
 
+  const numVendors = useMemo(() => {
+    const systemCount = experience.tcf_systems
+      ? experience.tcf_systems.length
+      : 0;
+    const vendorCount = experience.tcf_vendors
+      ? experience.tcf_vendors.length
+      : 0;
+    return systemCount + vendorCount;
+  }, [experience]);
+
   const handleUpdateDraftState = useCallback(
     ({ newEnabledIds, modelType }: UpdateEnabledIds) => {
       const updated = { ...draftIds, [modelType]: newEnabledIds };
@@ -202,12 +217,18 @@ const TcfOverlay: FunctionComponent<OverlayProps> = ({
     [cookie, experience, fidesRegionString, options]
   );
 
+  const [activeTabIndex, setActiveTabIndex] = useState(0);
+
   if (!experience.experience_config) {
     debugLog(options.debug, "No experience config found");
     return null;
   }
   const experienceConfig = experience.experience_config;
 
+  const goToVendorTab = () => {
+    setActiveTabIndex(2);
+  };
+
   return (
     <Overlay
       options={options}
@@ -220,19 +241,17 @@ const TcfOverlay: FunctionComponent<OverlayProps> = ({
             onClose={onClose}
             experience={experienceConfig}
           >
-            <InitialLayer
-              experience={experience}
-              managePreferencesLink={
-                <button
-                  type="button"
-                  onClick={onManagePreferencesClick}
-                  className="fides-link-button"
-                >
-                  {experience.experience_config
-                    ?.privacy_preferences_link_label || ""}
-                </button>
-              }
-            />
+            <InitialLayer experience={experience} />
+            <button
+              type="button"
+              className="fides-link-button"
+              onClick={() => {
+                onManagePreferencesClick();
+                goToVendorTab();
+              }}
+            >
+              View our {numVendors} partner{numVendors === 1 ? "" : "s"}
+            </button>
             <TcfConsentButtons
               experience={experience}
               onManagePreferencesClick={onManagePreferencesClick}
@@ -244,17 +263,34 @@ const TcfOverlay: FunctionComponent<OverlayProps> = ({
           </ConsentBanner>
         ) : null
       }
-      renderModalContent={({ onClose }) => (
-        <TcfModalContent
-          experience={experience}
-          draftIds={draftIds}
-          onChange={handleUpdateDraftState}
-          onSave={(keys) => {
-            handleUpdateAllPreferences(keys);
-            onClose();
-          }}
-        />
-      )}
+      renderModalContent={({ onClose }) => {
+        const onSave = (keys: EnabledIds) => {
+          handleUpdateAllPreferences(keys);
+          onClose();
+        };
+        return (
+          <div>
+            <TcfTabs
+              experience={experience}
+              enabledIds={draftIds}
+              onChange={handleUpdateDraftState}
+              activeTabIndex={activeTabIndex}
+              onTabChange={setActiveTabIndex}
+            />
+            <TcfConsentButtons
+              experience={experience}
+              onSave={onSave}
+              firstButton={
+                <Button
+                  buttonType={ButtonType.SECONDARY}
+                  label={experience.experience_config?.save_button_label}
+                  onClick={() => onSave(draftIds)}
+                />
+              }
+            />
+          </div>
+        );
+      }}
     />
   );
 };

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

@@ -1,5 +1,5 @@
 import { h } from "preact";
-import { useRef, useState } from "preact/hooks";
+import { useRef } from "preact/hooks";
 import TcfPurposes from "./TcfPurposes";
 import { PrivacyExperience } from "../../lib/consent-types";
 import type { EnabledIds, UpdateEnabledIds } from "./TcfOverlay";
@@ -13,10 +13,14 @@ const TcfTabs = ({
   experience,
   enabledIds,
   onChange,
+  activeTabIndex,
+  onTabChange,
 }: {
   experience: PrivacyExperience;
   enabledIds: EnabledIds;
   onChange: (payload: UpdateEnabledIds) => void;
+  activeTabIndex: number;
+  onTabChange: (tabIndex: number) => void;
 }) => {
   const tcfTabs = [
     {
@@ -56,7 +60,7 @@ const TcfTabs = ({
       ),
     },
   ];
-  const [activeTabIndex, setActiveTabIndex] = useState(0);
+
   const inputRefs = [
     useRef<HTMLButtonElement>(null),
     useRef<HTMLButtonElement>(null),
@@ -75,7 +79,7 @@ const TcfTabs = ({
         activeTabIndex === 0 ? tcfTabs.length - 1 : activeTabIndex - 1;
     }
     if (newActiveTab != null) {
-      setActiveTabIndex(newActiveTab);
+      onTabChange(newActiveTab);
       inputRefs[newActiveTab].current?.focus();
     }
   };
@@ -88,7 +92,7 @@ const TcfTabs = ({
               id={`fides-tab-${name}`}
               aria-selected={idx === activeTabIndex}
               onClick={() => {
-                setActiveTabIndex(idx);
+                onTabChange(idx);
               }}
               role="tab"
               type="button"

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

@@ -172,6 +172,15 @@ describe("Fides-js TCF", () => {
       });
       cy.get("#fides-tab-Purposes");
     });
+
+    it("can open the modal from vendor information", () => {
+      cy.get("div#fides-banner").within(() => {
+        cy.get("button").contains("View our 2 partners").click();
+      });
+      cy.get("#fides-tab-Vendors");
+      cy.getByTestId(`toggle-${VENDOR_1.name}`);
+      cy.getByTestId(`toggle-${VENDOR_2.name}`);
+    });
   });
 
   describe("second layer", () => {