PROD-2599 Update PC to support hierarchical consent notices + Update …

…all types (#5291)

Co-authored-by: Lucano Vera <[email protected]>

CHANGELOG.md

@@ -22,6 +22,10 @@ The types of changes are:
 - Fix Email Connector logs so they use configuration key instead of name [#5286](https://github.com/ethyca/fides/pull/5286)
 - Updated Responsys and Firebase Auth integrations to allow multiple identities [#5318](https://github.com/ethyca/fides/pull/5318)
 
+### Added
+- Added support for hierarchical notices in Privacy Center [#5291](https://github.com/ethyca/fides/pull/5291)
+
+
 ## [2.45.2](https://github.com/ethyca/fides/compare/2.45.1...2.45.2)
 
 ### Fixed

clients/privacy-center/__tests__/features/consent/helpers.test.ts

@@ -1,7 +1,7 @@
 import { ConsentContext } from "fides-js";
 
 import { makeNoticeConsent } from "~/features/consent/helpers";
-import { ConfigConsentOption } from "~/types/config";
+import { ConfigConsentOption } from "~/types/api";
 
 describe("makeNoticeConsent", () => {
   // Some display options don't matter for these tests.

clients/privacy-center/common/hooks/useI18n.ts

@@ -6,6 +6,8 @@ import {
 } from "fides-js";
 import { useCallback, useContext } from "react";
 
+import { ExperienceConfigResponseNoNotices } from "~/types/api";
+
 import { I18nContext } from "../i18nContext";
 
 const useI18n = () => {
@@ -18,12 +20,23 @@ const useI18n = () => {
 
   // Useful wrapper for selectBestExperienceConfigTranslation
   const selectExperienceConfigTranslation = useCallback(
-    (experienceConfig: ExperienceConfig | undefined) => {
+    (
+      experienceConfig:
+        | ExperienceConfig
+        | ExperienceConfigResponseNoNotices
+        | undefined,
+    ) => {
       if (!experienceConfig) {
         throw new Error("ExperienceConfig must be defined");
       }
+
       const experienceConfigTransalation =
-        selectBestExperienceConfigTranslation(i18n, experienceConfig);
+        selectBestExperienceConfigTranslation(
+          i18n,
+          // DEFER (PROD-2737) remove type casting
+          experienceConfig as ExperienceConfig,
+        );
+
       if (!experienceConfigTransalation) {
         throw new Error("Coudln't find correct experience config translation");
       }

clients/privacy-center/components/Layout.tsx

@@ -26,7 +26,7 @@ const Layout = ({ children }: { children: ReactNode }) => {
           justifyContent="center"
           alignItems="center"
         >
-          <Logo src={config.logo_path} href={config.logo_url} />
+          <Logo src={config.logo_path ?? ""} href={config.logo_url ?? ""} />
         </Flex>
       </header>
       <div>{children}</div>

clients/privacy-center/components/consent/ConfigDrivenConsent.tsx

@@ -61,7 +61,7 @@ const ConfigDrivenConsent = ({
     });
     const consent = consentOptions.map((option) => {
       const defaultValue = resolveLegacyConsentValue(
-        option.default,
+        option.default!,
         consentContext,
       );
       const value = fidesKeyToConsent[option.fidesDataUseKey] ?? defaultValue;
@@ -161,7 +161,7 @@ const ConfigDrivenConsent = ({
     () =>
       consentOptions.map((option) => {
         const defaultValue = resolveLegacyConsentValue(
-          option.default,
+          option.default!,
           consentContext,
         );
         const value = fidesKeyToConsent[option.fidesDataUseKey] ?? defaultValue;

clients/privacy-center/components/consent/ConsentDescription.tsx

@@ -7,7 +7,7 @@ import { selectIsNoticeDriven } from "~/features/common/settings.slice";
 
 const TEXT_PROPS: TextProps = {
   fontSize: ["small", "medium"],
-  fontWeight: "medium",
+  fontWeight: "normal",
   maxWidth: 624,
   textAlign: "center",
   color: "gray.600",

clients/privacy-center/components/consent/ConsentHeading.tsx

@@ -23,9 +23,10 @@ const ConsentHeading = () => {
     <Heading
       fontSize={["3xl", "4xl"]}
       color="gray.600"
-      fontWeight="semibold"
+      fontWeight="medium"
       textAlign="center"
       data-testid="consent-heading"
+      mb={3}
     >
       {headingText}
     </Heading>

clients/privacy-center/components/consent/ConsentItem.tsx

@@ -19,7 +19,7 @@ export type ConsentItemProps = {
   id: string;
   name: string;
   description: string;
-  highlight?: boolean;
+  highlight?: boolean | null;
   url?: string;
   value: boolean;
   gpcStatus: GpcStatus;

clients/privacy-center/components/consent/ConsentToggles.tsx

@@ -2,7 +2,7 @@ import { useSettings } from "~/features/common/settings.slice";
 import { ConsentPreferences } from "~/types/api";
 
 import ConfigDrivenConsent from "./ConfigDrivenConsent";
-import NoticeDrivenConsent from "./NoticeDrivenConsent";
+import NoticeDrivenConsent from "./notice-driven/NoticeDrivenConsent";
 
 const ConsentToggles = ({
   storePreferences,

clients/privacy-center/components/consent/PrivacyPolicyLink.tsx

@@ -23,6 +23,7 @@ const PrivacyPolicyLink = ({
   if (!label || !url) {
     return null;
   }
+
   return (
     <Link
       href={url}

clients/privacy-center/components/consent/notice-driven/ConsentChildItem.tsx

@@ -0,0 +1,31 @@
+import { Flex, Text } from "fidesui";
+
+import Toggle from "../Toggle";
+
+interface ConsentChildItemProps {
+  id: string;
+  title: string;
+  value: boolean;
+  onChange: (value: boolean) => void;
+  isDisabled?: boolean;
+}
+const ConsentChildItem = ({
+  id,
+  title,
+  value,
+  onChange,
+  isDisabled,
+}: ConsentChildItemProps) => (
+  <Flex justifyContent="space-between" alignItems="center" pl={0} py={1}>
+    <Text fontSize={16}>{title}</Text>
+    <Toggle
+      label={title}
+      name={id}
+      id={id}
+      disabled={isDisabled}
+      checked={value}
+      onChange={() => onChange(!value)}
+    />
+  </Flex>
+);
+export default ConsentChildItem;

clients/privacy-center/components/consent/notice-driven/ConsentItemAccordion.tsx

@@ -0,0 +1,102 @@
+import { GpcStatus } from "fides-js";
+import {
+  AccordionButton,
+  AccordionIcon,
+  AccordionItem,
+  AccordionPanel,
+  Box,
+  Flex,
+  Text,
+} from "fidesui";
+import React from "react";
+
+import { GpcBadge, GpcInfo } from "~/features/consent/GpcMessages";
+
+import Toggle from "../Toggle";
+
+export type ConsentItemAccordionProps = {
+  id: string;
+  title: string;
+  description: string;
+  value: boolean;
+  gpcStatus: GpcStatus;
+  onChange: (value: boolean) => void;
+  disabled?: boolean;
+  children?: React.ReactNode;
+};
+
+const ConsentItemAccordion = ({
+  id,
+  title,
+  description,
+  value,
+  gpcStatus,
+  onChange,
+  disabled,
+  children,
+}: ConsentItemAccordionProps) => (
+  <AccordionItem
+    data-testid={`consent-item-${id}`}
+    width="full"
+    _hover={{ bgColor: "gray.100" }}
+  >
+    <AccordionButton pl={2} py={2.5} _hover={{ bgColor: "gray.100" }}>
+      <Flex justifyContent="space-between" alignItems="center" width="full">
+        <Flex alignItems="center">
+          <AccordionIcon fontSize={26} />
+          <Text
+            fontSize="lg"
+            fontWeight="medium"
+            color="gray.600"
+            ml={1}
+            mb="4px"
+          >
+            {title}
+          </Text>
+        </Flex>
+        <Flex alignItems="center">
+          <Box display={{ base: "none", sm: "block" }}>
+            <GpcBadge status={gpcStatus} />
+          </Box>
+          <Flex ml={2} onClick={(e) => e.stopPropagation()}>
+            <Toggle
+              label={title}
+              name={id}
+              id={id}
+              disabled={disabled}
+              checked={value}
+              onChange={() => onChange(!value)}
+            />
+          </Flex>
+        </Flex>
+      </Flex>
+    </AccordionButton>
+    <AccordionPanel>
+      <Box>
+        <Flex
+          justifyContent="flex-start"
+          mb={2}
+          display={{ base: "block", sm: "none" }}
+        >
+          <GpcBadge status={gpcStatus} />
+        </Flex>
+
+        <GpcInfo status={gpcStatus} />
+        <Text
+          fontSize="sm"
+          fontWeight="medium"
+          color="gray.600"
+          mb="2px"
+          pr={[0, 8]}
+          pl={6}
+        >
+          {description}
+        </Text>
+
+        <Box pl={6}>{children}</Box>
+      </Box>
+    </AccordionPanel>
+  </AccordionItem>
+);
+
+export default ConsentItemAccordion;