Merge branch 'main' into SteveDMurphy-4179-braze-part-two

CHANGELOG.md

@@ -17,14 +17,21 @@ 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)
+- Added two toggles for vendors in the TCF overlay, one for Consent, and one for Legitimate Interest [#4189](https://github.com/ethyca/fides/pull/4189)
+
+
 ### 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)
 - Various improvements to the TCF modal such as vendor storage disclosures, vendor counts, privacy policies, etc. [#4167](https://github.com/ethyca/fides/pull/4167)
 - An issue where Braze could not mask an email due to formatting [#4187](https://github.com/ethyca/fides/pull/4187)
 - An issue where email was not being overridden correctly for Braze and Domo [#4196](https://github.com/ethyca/fides/pull/4196)
+- Use `stdRetention` when there is not a specific value for a purpose's data retention [#4199](https://github.com/ethyca/fides/pull/4199)
 
 ## [2.21.0](https://github.com/ethyca/fides/compare/2.20.2...2.21.0)
 
@@ -41,6 +48,9 @@ The types of changes are:
 - Embed the GVL in the GET Experiences response [#4143](https://github.com/ethyca/fides/pull/4143)
 - Button to view how many vendors and to open the vendor tab in the TCF modal [#4144](https://github.com/ethyca/fides/pull/4144)
 - "Edit vendor" flow to configuring consent page [#4162](https://github.com/ethyca/fides/pull/4162)
+- TCF overlay description updates [#4051] https://github.com/ethyca/fides/pull/4151
+- Added developer-friendly TCF information under Experience meta [#4160](https://github.com/ethyca/fides/pull/4160/)
+- Added fides.css customization for Plus users [#4136](https://github.com/ethyca/fides/pull/4136)
 
 ### Changed
 - Added further config options to customize the privacy center [#4090](https://github.com/ethyca/fides/pull/4090)

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/DataUseToggle.tsx

@@ -17,6 +17,7 @@ const DataUseToggle = ({
   disabled,
   isHeader,
   includeToggle = true,
+  secondToggle,
 }: {
   dataUse: DataUse;
   checked: boolean;
@@ -27,6 +28,7 @@ const DataUseToggle = ({
   disabled?: boolean;
   isHeader?: boolean;
   includeToggle?: boolean;
+  secondToggle?: ComponentChildren;
 }) => {
   const {
     isOpen,
@@ -81,6 +83,7 @@ const DataUseToggle = ({
             disabled={disabled}
           />
         ) : null}
+        {secondToggle || null}
       </div>
       {children ? <div {...getDisclosureProps()}>{children}</div> : null}
     </div>

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/fides.css

@@ -649,6 +649,10 @@ div#fides-modal .fides-modal-button-group {
   align-items: center;
 }
 
+.fides-margin-right {
+  margin-right: 0.2em;
+}
+
 /* TCF toggles */
 .fides-tcf-toggle-content {
   margin-right: 60px;
@@ -681,6 +685,18 @@ div#fides-modal .fides-modal-button-group {
   margin-left: 0;
 }
 
+.fides-tcf-vendor-toggles {
+  display: flex;
+}
+
+.fides-legal-basis-labels {
+  display: flex;
+  align-items: end;
+  justify-content: end;
+  font-size: 0.8em;
+  font-weight: 500;
+}
+
 /* Vendor purpose table */
 .fides-vendor-details-table {
   width: 100%;

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

@@ -2,7 +2,7 @@ import { VNode, h } from "preact";
 
 import { PrivacyExperience } from "../../lib/consent-types";
 import { ConsentButtons } from "../ConsentButtons";
-import type { EnabledIds } from "./TcfOverlay";
+import type { EnabledIds } from "../../lib/tcf/types";
 import {
   TCFPurposeRecord,
   TCFFeatureRecord,
@@ -40,13 +40,18 @@ export const TcfConsentButtons = ({
   }
 
   const handleAcceptAll = () => {
+    const vendorsAndSystems = [
+      ...(experience.tcf_vendors || []),
+      ...(experience.tcf_systems || []),
+    ];
     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),
-      systems: getAllIds(experience.tcf_systems),
+      // TODO: make these read from separate fields once the backend supports it (fidesplus1128)
+      vendorsConsent: getAllIds(vendorsAndSystems),
+      vendorsLegint: getAllIds(vendorsAndSystems),
     };
     onSave(allIds);
   };
@@ -56,8 +61,8 @@ export const TcfConsentButtons = ({
       specialPurposes: [],
       features: [],
       specialFeatures: [],
-      vendors: [],
-      systems: [],
+      vendorsConsent: [],
+      vendorsLegint: [],
     };
     onSave(emptyIds);
   };