From 3a4c3456fa1795949e248358ded7442ae1e2fc82 Mon Sep 17 00:00:00 2001
From: Jason Gill <jason.gill@ethyca.com>
Date: Fri, 16 Aug 2024 12:29:30 -0600
Subject: [PATCH 1/6] Add support for Vendor Count in descriptions

---
 .../src/components/ExperienceDescription.tsx  | 34 ++++++++------
 .../src/components/tcf/TcfOverlay.tsx         |  9 ++++
 .../src/components/tcf/VendorInfoBanner.tsx   | 10 +++-
 clients/fides-js/src/lib/consent-types.ts     |  1 +
 .../fides-js/src/lib/i18n/i18n-context.tsx    |  4 +-
 .../fides-js/src/lib/tcf/renderOverlay.tsx    |  5 +-
 .../src/lib/tcf/vendor-button-context.tsx     | 46 +++++++++++++++++++
 7 files changed, 90 insertions(+), 19 deletions(-)
 create mode 100644 clients/fides-js/src/lib/tcf/vendor-button-context.tsx

diff --git a/clients/fides-js/src/components/ExperienceDescription.tsx b/clients/fides-js/src/components/ExperienceDescription.tsx
index 7277d2228c..b0f8bf8432 100644
--- a/clients/fides-js/src/components/ExperienceDescription.tsx
+++ b/clients/fides-js/src/components/ExperienceDescription.tsx
@@ -1,6 +1,9 @@
+/* eslint-disable no-template-curly-in-string */
 import { h } from "preact";
 
-const TEXT_TO_LINK = "vendors page.";
+import { useVendorButton } from "../lib/tcf/vendor-button-context";
+
+const VENDOR_COUNT_LINK = "${VENDOR_COUNT_LINK}";
 
 const ExperienceDescription = ({
   description,
@@ -11,6 +14,8 @@ const ExperienceDescription = ({
   onVendorPageClick?: () => void;
   allowHTMLDescription?: boolean | null;
 }) => {
+  const { vendorCount } = useVendorButton();
+
   if (!description) {
     return null;
   }
@@ -29,22 +34,21 @@ const ExperienceDescription = ({
   }
 
   // Swap out reference to "vendors page" with a button that can go to the vendor page
-  if (
-    onVendorPageClick &&
-    (description.endsWith(TEXT_TO_LINK) ||
-      description.endsWith(`${TEXT_TO_LINK}\n`))
-  ) {
-    const firstPart = description.split(TEXT_TO_LINK)[0];
+  if (description.includes(VENDOR_COUNT_LINK)) {
+    const parts = description.split(VENDOR_COUNT_LINK);
     return (
       <div>
-        {firstPart}{" "}
-        <button
-          type="button"
-          className="fides-link-button"
-          onClick={onVendorPageClick}
-        >
-          {TEXT_TO_LINK}
-        </button>
+        {parts[0]}
+        {onVendorPageClick && vendorCount && (
+          <button
+            type="button"
+            className="fides-link-button"
+            onClick={onVendorPageClick}
+          >
+            {vendorCount}
+          </button>
+        )}
+        {parts[1]}
       </div>
     );
   }
diff --git a/clients/fides-js/src/components/tcf/TcfOverlay.tsx b/clients/fides-js/src/components/tcf/TcfOverlay.tsx
index 8dab5e09b0..243d58e692 100644
--- a/clients/fides-js/src/components/tcf/TcfOverlay.tsx
+++ b/clients/fides-js/src/components/tcf/TcfOverlay.tsx
@@ -41,6 +41,7 @@ import type {
   TCFVendorLegitimateInterestsRecord,
   TCFVendorSave,
 } from "../../lib/tcf/types";
+import { useVendorButton } from "../../lib/tcf/vendor-button-context";
 import { fetchGvlTranslations } from "../../services/api";
 import Button from "../Button";
 import ConsentBanner from "../ConsentBanner";
@@ -205,6 +206,8 @@ const TcfOverlay: FunctionComponent<OverlayProps> = ({
   cookie,
   savedConsent,
 }) => {
+  const { setVendorCount } = useVendorButton();
+
   const initialEnabledIds: EnabledIds = useMemo(() => {
     const {
       tcf_purpose_consents: consentPurposes = [],
@@ -252,6 +255,12 @@ const TcfOverlay: FunctionComponent<OverlayProps> = ({
     setCurrentLocale(locale);
   };
 
+  useEffect(() => {
+    if (experience.vendor_count && setVendorCount) {
+      setVendorCount(experience.vendor_count);
+    }
+  }, [experience, setVendorCount]);
+
   useEffect(() => {
     if (!currentLocale && locale && defaultLocale) {
       if (locale !== defaultLocale) {
diff --git a/clients/fides-js/src/components/tcf/VendorInfoBanner.tsx b/clients/fides-js/src/components/tcf/VendorInfoBanner.tsx
index 965c547324..4175d6c5a9 100644
--- a/clients/fides-js/src/components/tcf/VendorInfoBanner.tsx
+++ b/clients/fides-js/src/components/tcf/VendorInfoBanner.tsx
@@ -1,8 +1,9 @@
 import { h } from "preact";
-import { useMemo } from "preact/hooks";
+import { useEffect, useMemo } from "preact/hooks";
 
 import { PrivacyExperience } from "../../lib/consent-types";
 import type { I18n } from "../../lib/i18n";
+import { useVendorButton } from "../../lib/tcf/vendor-button-context";
 
 const VendorInfo = ({
   label,
@@ -38,6 +39,7 @@ const VendorInfoBanner = ({
   i18n: I18n;
   goToVendorTab: () => void;
 }) => {
+  const { setVendorCount } = useVendorButton();
   const counts = useMemo(() => {
     const {
       tcf_vendor_consents: consentVendors = [],
@@ -57,6 +59,12 @@ const VendorInfoBanner = ({
     return { total, consent, legint };
   }, [experience]);
 
+  useEffect(() => {
+    if (counts.total && setVendorCount) {
+      setVendorCount(counts.total);
+    }
+  }, [counts.total, setVendorCount]);
+
   return (
     <div className="fides-background-dark fides-vendor-info-banner">
       <VendorInfo
diff --git a/clients/fides-js/src/lib/consent-types.ts b/clients/fides-js/src/lib/consent-types.ts
index abb9d946c5..574edd8fc6 100644
--- a/clients/fides-js/src/lib/consent-types.ts
+++ b/clients/fides-js/src/lib/consent-types.ts
@@ -415,6 +415,7 @@ export type PrivacyExperience = {
   gvl?: GVLJson; // NOTE: uses our client-side GVLJson type
   meta?: ExperienceMeta;
   available_locales?: string[];
+  vendor_count?: number;
 };
 
 /**
diff --git a/clients/fides-js/src/lib/i18n/i18n-context.tsx b/clients/fides-js/src/lib/i18n/i18n-context.tsx
index cac6b212e6..9c7bbf33e1 100644
--- a/clients/fides-js/src/lib/i18n/i18n-context.tsx
+++ b/clients/fides-js/src/lib/i18n/i18n-context.tsx
@@ -17,7 +17,7 @@ interface I18nContextProps {
   setIsLoading: Dispatch<StateUpdater<boolean>>;
 }
 
-const I18nContext = createContext<I18nContextProps>({} as I18nContextProps);
+const I18nContext = createContext<I18nContextProps | Record<any, never>>({});
 
 export const I18nProvider: FunctionComponent = ({ children }) => {
   const [currentLocale, setCurrentLocale] = useState<string>();
@@ -41,7 +41,7 @@ export const I18nProvider: FunctionComponent = ({ children }) => {
 
 export const useI18n = () => {
   const context = useContext(I18nContext);
-  if (!context) {
+  if (!context || Object.keys(context).length === 0) {
     throw new Error("useI18n must be used within a I18nProvider");
   }
   return context;
diff --git a/clients/fides-js/src/lib/tcf/renderOverlay.tsx b/clients/fides-js/src/lib/tcf/renderOverlay.tsx
index 1a8098d5ac..99922e6ab5 100644
--- a/clients/fides-js/src/lib/tcf/renderOverlay.tsx
+++ b/clients/fides-js/src/lib/tcf/renderOverlay.tsx
@@ -4,6 +4,7 @@ import TcfOverlay from "../../components/tcf/TcfOverlay";
 import { OverlayProps } from "../../components/types";
 import { I18nProvider } from "../i18n/i18n-context";
 import { loadTcfMessagesFromFiles } from "./i18n/tcf-i18n-utils";
+import { VendorButtonProvider } from "./vendor-button-context";
 
 export const renderOverlay = (props: OverlayProps, parent: ContainerNode) => {
   /**
@@ -18,7 +19,9 @@ export const renderOverlay = (props: OverlayProps, parent: ContainerNode) => {
 
   render(
     <I18nProvider>
-      <TcfOverlay {...props} />
+      <VendorButtonProvider>
+        <TcfOverlay {...props} />
+      </VendorButtonProvider>
     </I18nProvider>,
     parent,
   );
diff --git a/clients/fides-js/src/lib/tcf/vendor-button-context.tsx b/clients/fides-js/src/lib/tcf/vendor-button-context.tsx
new file mode 100644
index 0000000000..e56acb8209
--- /dev/null
+++ b/clients/fides-js/src/lib/tcf/vendor-button-context.tsx
@@ -0,0 +1,46 @@
+import { createContext, h } from "preact";
+import { FC } from "preact/compat";
+import {
+  Dispatch,
+  StateUpdater,
+  useContext,
+  useMemo,
+  useState,
+} from "preact/hooks";
+
+interface VendorButtonContextProps {
+  vendorCount?: number;
+  setVendorCount: Dispatch<StateUpdater<number | undefined>>;
+}
+
+const VendorButtonContext = createContext<
+  VendorButtonContextProps | Record<any, never>
+>({});
+
+export const VendorButtonProvider: FC = ({ children }) => {
+  const [vendorCount, setVendorCount] = useState<number>();
+
+  const value: VendorButtonContextProps = useMemo(
+    () => ({
+      vendorCount,
+      setVendorCount,
+    }),
+    [vendorCount, setVendorCount],
+  );
+
+  return (
+    <VendorButtonContext.Provider value={value}>
+      {children}
+    </VendorButtonContext.Provider>
+  );
+};
+
+export const useVendorButton = () => {
+  const context = useContext(VendorButtonContext);
+  if (!context || Object.keys(context).length === 0) {
+    throw new Error(
+      "useVendorButton must be used within a VendorButtonProvider",
+    );
+  }
+  return context;
+};

From 8c6418c199fc4bda1a439d0a48a384325756b7d5 Mon Sep 17 00:00:00 2001
From: Jason Gill <jason.gill@ethyca.com>
Date: Fri, 16 Aug 2024 14:44:33 -0600
Subject: [PATCH 2/6] fix to include count, even if no button action set

---
 clients/fides-js/src/components/ExperienceDescription.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/clients/fides-js/src/components/ExperienceDescription.tsx b/clients/fides-js/src/components/ExperienceDescription.tsx
index b0f8bf8432..19a7dcec31 100644
--- a/clients/fides-js/src/components/ExperienceDescription.tsx
+++ b/clients/fides-js/src/components/ExperienceDescription.tsx
@@ -39,10 +39,13 @@ const ExperienceDescription = ({
     return (
       <div>
         {parts[0]}
+        {!onVendorPageClick && vendorCount && (
+          <span className="fides-vendor-count">{vendorCount}</span>
+        )}
         {onVendorPageClick && vendorCount && (
           <button
             type="button"
-            className="fides-link-button"
+            className="fides-link-button fides-vendor-count"
             onClick={onVendorPageClick}
           >
             {vendorCount}

From 980731f01bf4856386744a88f6ff57379e123aef Mon Sep 17 00:00:00 2001
From: Jason Gill <jason.gill@ethyca.com>
Date: Fri, 16 Aug 2024 14:52:34 -0600
Subject: [PATCH 3/6] Update CHANGELOG.md

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1d3c6f9d71..23cc59ec1c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -31,6 +31,7 @@ The types of changes are:
 - Add function to return list of StagedResource objs according to list of URNs [#5192](https://github.com/ethyca/fides/pull/5192)
 - Add DSR Support for ScyllaDB [#5140](https://github.com/ethyca/fides/pull/5140)
 - Added support for nested fields in BigQuery in D&D result views [#5175](https://github.com/ethyca/fides/pull/5175)
+- Added support for Vendor Count in Fides-JS overlay descriptions [#5210](https://github.com/ethyca/fides/pull/5210)
 
 ### Fixed
 - Fixed the OAuth2 configuration for the Snap integration [#5158](https://github.com/ethyca/fides/pull/5158)

From 56185d3ef87ff4aa98c9e1afbffe4f4d5d518c75 Mon Sep 17 00:00:00 2001
From: Jason Gill <jason.gill@ethyca.com>
Date: Fri, 16 Aug 2024 15:13:52 -0600
Subject: [PATCH 4/6] fixes

---
 clients/fides-js/src/components/ConsentModal.tsx         | 2 ++
 .../fides-js/src/components/ExperienceDescription.tsx    | 9 +++++++--
 clients/fides-js/src/lib/tcf/vendor-button-context.tsx   | 2 +-
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/clients/fides-js/src/components/ConsentModal.tsx b/clients/fides-js/src/components/ConsentModal.tsx
index 5dd7b549f1..a3b62d2f28 100644
--- a/clients/fides-js/src/components/ConsentModal.tsx
+++ b/clients/fides-js/src/components/ConsentModal.tsx
@@ -11,6 +11,7 @@ const ConsentModal = ({
   children,
   dismissable,
   i18n,
+  onVendorPageClick,
   renderModalFooter,
 }: {
   attributes: Attributes;
@@ -46,6 +47,7 @@ const ConsentModal = ({
           titleProps={title}
           i18n={i18n}
           renderModalFooter={renderModalFooter}
+          onVendorPageClick={onVendorPageClick}
         >
           {children}
         </ConsentContent>
diff --git a/clients/fides-js/src/components/ExperienceDescription.tsx b/clients/fides-js/src/components/ExperienceDescription.tsx
index 19a7dcec31..5bb9db41cc 100644
--- a/clients/fides-js/src/components/ExperienceDescription.tsx
+++ b/clients/fides-js/src/components/ExperienceDescription.tsx
@@ -1,7 +1,8 @@
 /* eslint-disable no-template-curly-in-string */
 import { h } from "preact";
+import { useContext } from "preact/hooks";
 
-import { useVendorButton } from "../lib/tcf/vendor-button-context";
+import { VendorButtonContext } from "../lib/tcf/vendor-button-context";
 
 const VENDOR_COUNT_LINK = "${VENDOR_COUNT_LINK}";
 
@@ -14,7 +15,11 @@ const ExperienceDescription = ({
   onVendorPageClick?: () => void;
   allowHTMLDescription?: boolean | null;
 }) => {
-  const { vendorCount } = useVendorButton();
+  let vendorCount = 0;
+  const context = useContext(VendorButtonContext);
+  if (context?.vendorCount) {
+    vendorCount = context.vendorCount;
+  }
 
   if (!description) {
     return null;
diff --git a/clients/fides-js/src/lib/tcf/vendor-button-context.tsx b/clients/fides-js/src/lib/tcf/vendor-button-context.tsx
index e56acb8209..d5a5460ab9 100644
--- a/clients/fides-js/src/lib/tcf/vendor-button-context.tsx
+++ b/clients/fides-js/src/lib/tcf/vendor-button-context.tsx
@@ -13,7 +13,7 @@ interface VendorButtonContextProps {
   setVendorCount: Dispatch<StateUpdater<number | undefined>>;
 }
 
-const VendorButtonContext = createContext<
+export const VendorButtonContext = createContext<
   VendorButtonContextProps | Record<any, never>
 >({});
 

From 88f4f1c921b1ba20372eaaf3cd6f6f20ccad0705 Mon Sep 17 00:00:00 2001
From: Jason Gill <jason.gill@ethyca.com>
Date: Fri, 16 Aug 2024 15:42:48 -0600
Subject: [PATCH 5/6] add vendor count to tests

---
 .../privacy-center/cypress/e2e/consent-banner-tcf.cy.ts  | 9 ++++++++-
 .../cypress/fixtures/consent/experience_tcf.json         | 2 +-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/clients/privacy-center/cypress/e2e/consent-banner-tcf.cy.ts b/clients/privacy-center/cypress/e2e/consent-banner-tcf.cy.ts
index a573f4a71b..2854096cd0 100644
--- a/clients/privacy-center/cypress/e2e/consent-banner-tcf.cy.ts
+++ b/clients/privacy-center/cypress/e2e/consent-banner-tcf.cy.ts
@@ -275,7 +275,14 @@ describe("Fides-js TCF", () => {
       });
     });
 
-    it("can open the modal", () => {
+    it("can open the modal from vendor count", () => {
+      cy.get("div#fides-banner").within(() => {
+        cy.get(".fides-vendor-count").first().should("have.text", "2").click();
+      });
+      cy.get("#fides-tab-vendors");
+    });
+
+    it("can open the modal from preferences button", () => {
       cy.get("div#fides-banner").within(() => {
         cy.get("#fides-button-group").within(() => {
           cy.get("button").contains("Manage preferences").click();
diff --git a/clients/privacy-center/cypress/fixtures/consent/experience_tcf.json b/clients/privacy-center/cypress/fixtures/consent/experience_tcf.json
index 7be4fb12ab..1b53ef4985 100644
--- a/clients/privacy-center/cypress/fixtures/consent/experience_tcf.json
+++ b/clients/privacy-center/cypress/fixtures/consent/experience_tcf.json
@@ -17,7 +17,7 @@
             "language": "en",
             "accept_button_label": "Opt in to all",
             "acknowledge_button_label": "OK",
-            "banner_description": "[banner] We use cookies and similar methods to recognize visitors and remember their preferences. We may also use these technologies to gauge the effectiveness of advertising campaigns, target advertisements, and analyze website traffic. Some of these technologies are essential for ensuring the proper functioning of the service or website and cannot be disabled, while others are optional but serve to enhance the user experience in various ways.\n\nWe, in collaboration with our partners, store and/or access information on a user's device, including but not limited to IP addresses, unique identifiers, and browsing data stored in cookies, in order to process personal data. You have the option to manage your preferences by selecting the 'Manage Preferences' option located in the page's footer. To review or object to instances where our partners assert a legitimate interest in utilizing your data, please visit our vendors page.\n",
+            "banner_description": "[banner] We, and our ${VENDOR_COUNT_LINK} vendors, use cookies and similar methods to recognize visitors and remember their preferences. We may also use these technologies to gauge the effectiveness of advertising campaigns, target advertisements, and analyze website traffic. Some of these technologies are essential for ensuring the proper functioning of the service or website and cannot be disabled, while others are optional but serve to enhance the user experience in various ways.\n\nWe, in collaboration with our partners, store and/or access information on a user's device, including but not limited to IP addresses, unique identifiers, and browsing data stored in cookies, in order to process personal data. You have the option to manage your preferences by selecting the 'Manage Preferences' option located in the page's footer. To review or object to instances where our partners assert a legitimate interest in utilizing your data, please visit our vendors page.\n",
             "banner_title": "[banner] Manage your consent preferences",
             "description": "We use cookies and similar methods to recognize visitors and remember their preferences. We may also use these technologies to gauge the effectiveness of advertising campaigns, target advertisements, and analyze website traffic. Some of these technologies are essential for ensuring the proper functioning of the service or website and cannot be disabled, while others are optional but serve to enhance the user experience in various ways.\n\nWe, in collaboration with our partners, store and/or access information on a user's device, including but not limited to IP addresses, unique identifiers, and browsing data stored in cookies, in order to process personal data. You have the option to manage your preferences by selecting the 'Manage Preferences' option located in the page's footer. To review or object to instances where our partners assert a legitimate interest in utilizing your data, please visit our vendors page.\n",
             "modal_link_label": "Manage my consent preferences",

From 5d337102fb64a149178d8d13fb495af385aaa26c Mon Sep 17 00:00:00 2001
From: Jason Gill <jason.gill@ethyca.com>
Date: Fri, 16 Aug 2024 16:04:55 -0600
Subject: [PATCH 6/6] fix expected description in tests

---
 clients/privacy-center/cypress/e2e/consent-i18n.cy.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/clients/privacy-center/cypress/e2e/consent-i18n.cy.ts b/clients/privacy-center/cypress/e2e/consent-i18n.cy.ts
index 46bbba4eb8..b22cf0d168 100644
--- a/clients/privacy-center/cypress/e2e/consent-i18n.cy.ts
+++ b/clients/privacy-center/cypress/e2e/consent-i18n.cy.ts
@@ -153,6 +153,8 @@ const ENGLISH_NOTICES: TestNoticeTranslations[] = [
 const ENGLISH_TCF_BANNER: TestTcfBannerTranslations = {
   ...ENGLISH_BANNER,
   ...{
+    banner_description:
+      "[banner] We, and our 2 vendors, use cookies and similar",
     vendors_count: "Vendors",
     vendors_consent_count: "Vendors using consent",
     vendors_legint_count: "Vendors using legitimate interest",