rachel-copy-updates-tcf-experience (#4191)

Co-authored-by: Allison King <[email protected]>

CHANGELOG.md

@@ -17,8 +17,11 @@ The types of changes are:
 
 ## [Unreleased](https://github.com/ethyca/fides/compare/2.21.0...main)
 
+### Added
+- Added an option to link to vendor tab from an experience config description [#4191](https://github.com/ethyca/fides/pull/4191)
 ### Changed
 - Removed `TCF_ENABLED` environment variable from the privacy center in favor of dynamically figuring out which `fides-js` bundle to send [#4131](https://github.com/ethyca/fides/pull/4131)
+- Updated copy of info boxes on each TCF tab [#4191](https://github.com/ethyca/fides/pull/4191)
 
 ### Fixed
 - TCF overlay can initialize its consent preferences from a cookie [#4124](https://github.com/ethyca/fides/pull/4124)

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

@@ -3,19 +3,22 @@ import { getConsentContext } from "../lib/consent-context";
 import { ExperienceConfig } from "../lib/consent-types";
 import CloseButton from "./CloseButton";
 import { GpcBadge } from "./GpcBadge";
+import ExperienceDescription from "./ExperienceDescription";
 
 interface BannerProps {
   experience: ExperienceConfig;
   onClose: () => void;
   bannerIsOpen: boolean;
   children: ComponentChildren;
+  onVendorPageClick?: () => void;
 }
 
 const ConsentBanner: FunctionComponent<BannerProps> = ({
   experience,
   onClose,
   bannerIsOpen,
   children,
+  onVendorPageClick,
 }) => {
   const showGpcBadge = getConsentContext().globalPrivacyControl;
   return (
@@ -43,7 +46,10 @@ const ConsentBanner: FunctionComponent<BannerProps> = ({
             id="fides-banner-description"
             className="fides-banner-description"
           >
-            {experience.description}
+            <ExperienceDescription
+              description={experience.description}
+              onVendorPageClick={onVendorPageClick}
+            />
           </div>
           {children}
         </div>

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

@@ -4,15 +4,18 @@ import { ExperienceConfig } from "../lib/consent-types";
 
 import CloseButton from "./CloseButton";
 import GpcInfo from "./GpcInfo";
+import ExperienceDescription from "./ExperienceDescription";
 
 const ConsentModal = ({
   attributes,
   experience,
   children,
+  onVendorPageClick,
 }: {
   attributes: Attributes;
   experience: ExperienceConfig;
   children: ComponentChildren;
+  onVendorPageClick?: () => void;
 }) => {
   const { container, overlay, dialog, title, closeButton } = attributes;
 
@@ -41,22 +44,13 @@ const ConsentModal = ({
           data-testid="fides-modal-description"
           className="fides-modal-description"
         >
-          {experience.description}
+          <ExperienceDescription
+            onVendorPageClick={onVendorPageClick}
+            description={experience.description}
+          />
         </p>
         <GpcInfo />
         {children}
-        {/* {showTcf ? (
-          <TcfTabs notices={notices} />
-        ) : (
-          <div className="fides-modal-notices">
-            <NoticeToggles
-              notices={notices}
-              enabledNoticeKeys={enabledNoticeKeys}
-              onChange={onChange}
-            />
-          </div>
-        )} */}
-        {/* {buttonGroup} */}
         {experience.privacy_policy_link_label &&
         experience.privacy_policy_url ? (
           <a

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

@@ -0,0 +1,40 @@
+import { h } from "preact";
+
+const TEXT_TO_LINK = "vendors page.";
+
+const ExperienceDescription = ({
+  description,
+  onVendorPageClick,
+}: {
+  description: string | undefined;
+  onVendorPageClick?: () => void;
+}) => {
+  if (!description) {
+    return null;
+  }
+
+  // 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];
+    return (
+      <div>
+        {firstPart}{" "}
+        <button
+          type="button"
+          className="fides-link-button"
+          onClick={onVendorPageClick}
+        >
+          {TEXT_TO_LINK}
+        </button>
+      </div>
+    );
+  }
+
+  return <div>{description}</div>;
+};
+
+export default ExperienceDescription;

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

@@ -4,11 +4,11 @@ const InfoBox = ({
   title,
   children,
 }: {
-  title: ComponentChild;
+  title?: ComponentChild;
   children: ComponentChildren;
 }) => (
   <div className="fides-info-box">
-    <p className="fides-gpc-header">{title}</p>
+    {title ? <p className="fides-gpc-header">{title}</p> : null}
     {children}
   </div>
 );

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

@@ -32,6 +32,7 @@ interface Props {
   cookie: FidesCookie;
   renderBanner: (props: RenderBannerProps) => VNode | null;
   renderModalContent: (props: RenderModalContent) => VNode;
+  onVendorPageClick?: () => void;
 }
 
 const Overlay: FunctionComponent<Props> = ({
@@ -40,6 +41,7 @@ const Overlay: FunctionComponent<Props> = ({
   cookie,
   renderBanner,
   renderModalContent,
+  onVendorPageClick,
 }) => {
   const delayBannerMilliseconds = 100;
   const delayModalLinkMilliseconds = 200;
@@ -150,6 +152,7 @@ const Overlay: FunctionComponent<Props> = ({
       <ConsentModal
         attributes={attributes}
         experience={experience.experience_config}
+        onVendorPageClick={onVendorPageClick}
       >
         {renderModalContent({ onClose: handleCloseModal })}
       </ConsentModal>

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

@@ -223,29 +223,30 @@ const TcfOverlay: FunctionComponent<OverlayProps> = ({
   }
   const experienceConfig = experience.experience_config;
 
-  const goToVendorTab = () => {
-    setActiveTabIndex(2);
-  };
-
   return (
     <Overlay
       options={options}
       experience={experience}
       cookie={cookie}
-      renderBanner={({ isOpen, onClose, onSave, onManagePreferencesClick }) =>
-        showBanner ? (
+      onVendorPageClick={() => {
+        setActiveTabIndex(2);
+      }}
+      renderBanner={({ isOpen, onClose, onSave, onManagePreferencesClick }) => {
+        const goToVendorTab = () => {
+          onManagePreferencesClick();
+          setActiveTabIndex(2);
+        };
+        return showBanner ? (
           <ConsentBanner
             bannerIsOpen={isOpen}
             onClose={onClose}
             experience={experienceConfig}
+            onVendorPageClick={goToVendorTab}
           >
             <InitialLayer experience={experience} />
             <VendorInfoBanner
               experience={experience}
-              goToVendorTab={() => {
-                onManagePreferencesClick();
-                goToVendorTab();
-              }}
+              goToVendorTab={goToVendorTab}
             />
             <TcfConsentButtons
               experience={experience}
@@ -256,8 +257,8 @@ const TcfOverlay: FunctionComponent<OverlayProps> = ({
               }}
             />
           </ConsentBanner>
-        ) : null
-      }
+        ) : null;
+      }}
       renderModalContent={({ onClose }) => {
         const onSave = (keys: EnabledIds) => {
           handleUpdateAllPreferences(keys);

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

@@ -28,10 +28,10 @@ const TcfTabs = ({
       name: "Purposes",
       content: (
         <div>
-          <InfoBox title="Transparency & Consent Framework">
-            The purposes for which your personal data is being collected are
-            detailed here. You can choose to opt in or opt out of any of these
-            purposes.
+          <InfoBox>
+            You can review and and exercise your right to consent to specific
+            purposes by using the filter to switch between Consent and
+            Legitimate Interest below.
           </InfoBox>
           <TcfPurposes
             allPurposes={experience.tcf_purposes}
@@ -47,10 +47,9 @@ const TcfTabs = ({
       name: "Features",
       content: (
         <div>
-          <InfoBox title="Transparency & Consent Framework">
-            The features for which your personal data is being collected are
-            detailed here. You can choose to opt in or opt out of any of these
-            purposes.
+          <InfoBox>
+            You can review the list of features and exercise your right to
+            consent to special features below.
           </InfoBox>
           <TcfFeatures
             allFeatures={experience.tcf_features}
@@ -66,10 +65,11 @@ const TcfTabs = ({
       name: "Vendors",
       content: (
         <div>
-          <InfoBox title="Transparency & Consent Framework">
-            The features for which your personal data is being collected are
-            detailed here. You can choose to opt in or opt out of any of these
-            purposes.
+          <InfoBox>
+            You may review the list of vendors and the purposes or features of
+            processing they individually declare below. You have the right to
+            exercise you consent for each vendor based on the legal basis they
+            assert.
           </InfoBox>
           <TcfVendors
             allSystems={experience.tcf_systems}