@redacto.io/consent-sdk-react 3.3.0 → 3.4.0

package/src/RedactoNoticeConsent/api/index.ts

@@ -59,6 +59,7 @@ export const fetchConsentContent = async ({
   language = "en",
   specific_uuid,
   validate_against = "all",
+  include_fully_consented_data = false,
   signal, // AbortSignal for request cancellation
 }: FetchConsentContentParams & { signal?: AbortSignal }): Promise<ConsentContent> => {
   try {
@@ -80,7 +81,7 @@ export const fetchConsentContent = async ({
     const apiBaseUrl = baseUrl || BASE_URL;
 
     // Create cache key for this request - include accessToken to ensure different users get different cache
-    const cacheKey = `${accessToken}-${noticeId}-${validate_against}-${language}-${specific_uuid || ''}`;
+    const cacheKey = `${accessToken}-${noticeId}-${validate_against}-${language}-${specific_uuid || ''}-${include_fully_consented_data}`;
 
     // Check cache first (skip for reconsent requests as they need fresh data)
     if (validate_against === "all" && !specific_uuid) {
@@ -98,6 +99,9 @@ export const fetchConsentContent = async ({
       url.searchParams.append("specific_uuid", specific_uuid);
     }
     url.searchParams.append("validate_against", validate_against);
+    if (include_fully_consented_data) {
+      url.searchParams.append("include_fully_consented_data", "true");
+    }
 
     const response = await fetch(url.toString(), {
       method: "GET",

package/src/RedactoNoticeConsent/api/types.ts

@@ -49,7 +49,7 @@ export type ConsentContent = {
       decline_button_text: string;
       logo_url: string;
       privacy_policy_url: string;
-      sub_processors_url: string;
+      privacy_center_url: string;
       primary_color: string;
       secondary_color: string;
       font_preference: string;
@@ -75,28 +75,28 @@ export type ConsentContent = {
           confirm_button_text: string;
           decline_button_text: string;
           privacy_policy_prefix_text: string;
-          vendor_list_prefix_text: string;
           privacy_policy_anchor_text: string;
-          vendors_list_anchor_text: string;
+          privacy_center_anchor_text?: string;
           purpose_section_heading: string;
           notice_banner_heading: string;
           data_elements: {
             [key: string]: string;
           };
           purposes: {
-            [key: string]: string;
+            [key: string]: string | { name: string; description: string };
           };
+          dpo_info?: DpoInfoTranslation;
         };
       };
       created_at: string;
       updated_at: string;
       deployed_at: string;
       privacy_policy_prefix_text: string;
-      vendor_list_prefix_text: string;
       privacy_policy_anchor_text: string;
-      vendors_list_anchor_text: string;
+      privacy_center_anchor_text?: string;
       purpose_section_heading: string;
       notice_banner_heading: string;
+      dpo_info?: DpoInfo;
     };
     notice_type?: string;
     compliance_requirement?: string;
@@ -154,6 +154,7 @@ export type FetchConsentContentParams = {
   language?: string;
   specific_uuid?: string;
   validate_against?: "all" | "required";
+  include_fully_consented_data?: boolean;
 };
 
 export type ConsentEventPayload = {
@@ -278,6 +279,31 @@ export type PurposeItemProps = {
   isAlreadyConsented: boolean;
 };
 
+// DPO Info Types
+export type DpoInfo = {
+  grievance_text: string;
+  grievance_anchor_text: string;
+  grievance_url: string;
+  grievance_email: string;
+  grievance_email_connector_text?: string;
+  dp_board_text: string;
+  dp_board_anchor_text: string;
+  dp_board_url: string;
+  dpo_text: string;
+  dpo_anchor_text: string;
+  dpo_url: string;
+};
+
+export type DpoInfoTranslation = {
+  grievance_text?: string;
+  grievance_anchor_text?: string;
+  grievance_email_connector_text?: string;
+  dp_board_text?: string;
+  dp_board_anchor_text?: string;
+  dpo_text?: string;
+  dpo_anchor_text?: string;
+};
+
 // TTS Audio Types
 export type PurposeAudioUrls = {
   name_audio_url: string;
@@ -300,16 +326,29 @@ export type TTSAudioUrlsResponse = {
     confirm_button_text_audio_url: string;
     decline_button_text_audio_url: string;
     privacy_policy_prefix_text_audio_url: string;
-    vendor_list_prefix_text_audio_url: string;
     privacy_policy_anchor_text_audio_url: string;
-    vendors_list_anchor_text_audio_url: string;
+    privacy_center_anchor_text_audio_url?: string;
     purpose_section_heading_audio_url: string;
     notice_banner_heading_audio_url: string;
     purposes_audio: Record<string, PurposeAudioUrls>;
     data_elements_audio: Record<string, DataElementAudioUrls>;
+    dpo_info_audio?: DpoInfoAudio;
   };
 };
 
+export type DpoInfoAudioKey = keyof DpoInfoAudio;
+
+export type DpoInfoAudio = {
+  grievance_text_audio_url?: string;
+  grievance_anchor_text_audio_url?: string;
+  dp_board_text_audio_url?: string;
+  dp_board_anchor_text_audio_url?: string;
+  dpo_text_audio_url?: string;
+  dpo_anchor_text_audio_url?: string;
+  grievance_email_connector_text_audio_url?: string;
+  grievance_email_audio_url?: string;
+};
+
 export type FetchTTSAudioUrlsParams = {
   accessToken: string;
   baseUrl?: string;

package/src/RedactoNoticeConsent/constants.ts

@@ -0,0 +1,20 @@
+import type { DpoInfoAudioKey } from "./api/types";
+
+/**
+ * Maps DPO info audio URL keys to their corresponding DOM element IDs.
+ * Used by both audioSequence and elementIdSequence builders to keep them in sync.
+ * Order determines playback sequence: grievance → dp board → dpo.
+ */
+export const DPO_AUDIO_ELEMENT_MAP: ReadonlyArray<{
+  audioKey: DpoInfoAudioKey;
+  elementId: string;
+}> = [
+  { audioKey: "grievance_text_audio_url", elementId: "dpo-grievance-text" },
+  { audioKey: "grievance_anchor_text_audio_url", elementId: "dpo-grievance-link" },
+  { audioKey: "grievance_email_connector_text_audio_url", elementId: "dpo-grievance-email-connector" },
+  { audioKey: "grievance_email_audio_url", elementId: "dpo-grievance-email" },
+  { audioKey: "dp_board_text_audio_url", elementId: "dpo-dp-board-text" },
+  { audioKey: "dp_board_anchor_text_audio_url", elementId: "dpo-dp-board-link" },
+  { audioKey: "dpo_text_audio_url", elementId: "dpo-dpo-text" },
+  { audioKey: "dpo_anchor_text_audio_url", elementId: "dpo-dpo-link" },
+] as const;

package/src/RedactoNoticeConsent/styles.ts

@@ -54,8 +54,7 @@ export const styles = {
     justifyContent: "space-between",
     alignItems: "center",
     paddingBottom: "15px",
-    borderBottom: "1px solid #e5e7eb",
-    boxShadow: "0 1px 2px rgba(0, 0, 0, 0.03)",
+    borderBottom: "none",
     backgroundColor: "#ffffff",
     margin: 0,
     boxSizing: "border-box",
@@ -114,7 +113,7 @@ export const styles = {
   },
 
   middleSection: {
-    margin: "20px 0px",
+    margin: "0px",
     display: "flex",
     flexDirection: "column",
     gap: "12px",
@@ -130,7 +129,6 @@ export const styles = {
     fontSize: "16px",
     fontWeight: 400,
     lineHeight: "150%",
-    letterSpacing: "0.2px",
     color: "#344054",
     margin: 0,
     padding: 0,
@@ -284,8 +282,7 @@ export const styles = {
     justifyContent: "space-between",
     gap: "29px",
     paddingTop: "15px",
-    borderTop: "1px solid #e5e7eb",
-    boxShadow: "0 -1px 2px rgba(0, 0, 0, 0.03)",
+    borderTop: "none",
     backgroundColor: "#ffffff",
     margin: 0,
     boxSizing: "border-box",

package/src/RedactoNoticeConsent/types.ts

@@ -1,4 +1,4 @@
-import type { Settings } from "./api/types";
+import type { Settings, DpoInfoTranslation } from "./api/types";
 
 export type Props = Readonly<{
   noticeId: string;
@@ -13,10 +13,14 @@ export type Props = Readonly<{
   onError?: (error: Error) => void;
   applicationId?: string;
   validateAgainst?: "all" | "required";
+  includeFullyConsentedData?: boolean;
+  reviewModeButtonText?: string;
 }>;
 
+export type PurposeTranslation = string | { name: string; description: string };
+
 export type PurposeTranslations = {
-  [purposeId: string]: string;
+  [purposeId: string]: PurposeTranslation;
 };
 
 export type DataElementTranslations = {
@@ -33,13 +37,15 @@ export type TranslationObject = {
   purpose_section_heading?: string;
   notice_banner_heading?: string;
   privacy_policy_prefix_text?: string;
-  vendor_list_prefix_text?: string;
   privacy_policy_anchor_text?: string;
-  vendors_list_anchor_text?: string;
+  privacy_center_anchor_text?: string;
+  dpo_info?: DpoInfoTranslation;
   [key: string]:
     | string
     | PurposeTranslations
     | DataElementTranslations
-    | Record<string, string>
+    | DpoInfoTranslation
+    | Record<string, string | undefined>
+    | Record<string, string | { name: string; description: string }>
     | undefined;
 };

package/src/RedactoNoticeConsentInline/RedactoNoticeConsentInline.tsx

@@ -103,7 +103,7 @@ const RedactoConsentInlineComponent = ({
   ): string => {
     if (!content) return defaultText;
 
-    if (selectedLanguage === content.default_language) {
+    if (selectedLanguage === "English" || selectedLanguage === "en" || selectedLanguage === "EN") {
       if (
         key === "privacy_policy_anchor_text" &&
         content.privacy_policy_anchor_text
@@ -127,7 +127,16 @@ const RedactoConsentInlineComponent = ({
 
     if (itemId) {
       if (key === "purposes.name" || key === "purposes.description") {
-        return translationMap.purposes?.[itemId] || defaultText;
+        const purposeData = translationMap.purposes?.[itemId];
+        if (purposeData) {
+          if (typeof purposeData === "string") {
+            return key === "purposes.name" ? purposeData : defaultText;
+          }
+          return key === "purposes.name"
+            ? purposeData.name || defaultText
+            : purposeData.description || defaultText;
+        }
+        return defaultText;
       }
       if (key.startsWith("data_elements.")) {
         return translationMap.data_elements?.[itemId] || defaultText;
@@ -135,7 +144,7 @@ const RedactoConsentInlineComponent = ({
     }
 
     const value = translationMap[key];
-    if (typeof value === "string") {
+    if (typeof value === "string" && value) {
       return value;
     }
 

package/src/RedactoNoticeConsentInline/api/types.ts

@@ -1,3 +1,5 @@
+import type { DpoInfo, DpoInfoTranslation } from "../../RedactoNoticeConsent/api/types";
+
 export type RedactoJwtPayload = {
   organisation_uuid: string;
   workspace_uuid: string;
@@ -33,7 +35,7 @@ export type ConsentContent = {
       decline_button_text: string;
       logo_url: string;
       privacy_policy_url: string;
-      sub_processors_url: string;
+      privacy_center_url: string;
       primary_color: string;
       secondary_color: string;
       font_preference: string;
@@ -59,26 +61,26 @@ export type ConsentContent = {
           confirm_button_text: string;
           decline_button_text: string;
           privacy_policy_prefix_text: string;
-          vendor_list_prefix_text: string;
           privacy_policy_anchor_text: string;
-          vendors_list_anchor_text: string;
+          privacy_center_anchor_text?: string;
           purpose_section_heading: string;
           data_elements: {
             [key: string]: string;
           };
           purposes: {
-            [key: string]: string;
+            [key: string]: string | { name: string; description: string };
           };
+          dpo_info?: DpoInfoTranslation;
         };
       };
       created_at: string;
       updated_at: string;
       deployed_at: string;
       privacy_policy_prefix_text: string;
-      vendor_list_prefix_text: string;
       privacy_policy_anchor_text: string;
-      vendors_list_anchor_text: string;
+      privacy_center_anchor_text?: string;
       purpose_section_heading: string;
+      dpo_info?: DpoInfo;
     };
     created_at: string;
     updated_at: string;

package/src/RedactoNoticeConsentInline/types.ts

@@ -1,4 +1,5 @@
 import type { Settings } from "./api/types";
+import type { DpoInfoTranslation } from "../RedactoNoticeConsent/api/types";
 
 export type Props = Readonly<{
   org_uuid: string;
@@ -16,8 +17,10 @@ export type Props = Readonly<{
   applicationId?: string;
 }>;
 
+export type PurposeTranslation = string | { name: string; description: string };
+
 export type PurposeTranslations = {
-  [purposeId: string]: string;
+  [purposeId: string]: PurposeTranslation;
 };
 
 export type DataElementTranslations = {
@@ -33,13 +36,15 @@ export type TranslationObject = {
   data_elements?: DataElementTranslations;
   purpose_section_heading?: string;
   privacy_policy_prefix_text?: string;
-  vendor_list_prefix_text?: string;
   privacy_policy_anchor_text?: string;
-  vendors_list_anchor_text?: string;
+  privacy_center_anchor_text?: string;
+  dpo_info?: DpoInfoTranslation;
   [key: string]:
     | string
     | PurposeTranslations
     | DataElementTranslations
-    | Record<string, string>
+    | DpoInfoTranslation
+    | Record<string, string | undefined>
+    | Record<string, string | { name: string; description: string }>
     | undefined;
 };

package/src/types/react-jsx.d.ts

@@ -0,0 +1,26 @@
+/**
+ * React 19 JSX compatibility: ensures intrinsic elements (div, button, etc.)
+ * and Element type align with React's types to fix "Element is not assignable to ReactNode".
+ * @see https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/71395
+ */
+import type React from "react";
+
+declare global {
+  namespace JSX {
+    type Element = React.ReactElement;
+  }
+}
+
+declare module "react/jsx-runtime" {
+  namespace JSX {
+    type Element = React.ReactElement;
+    interface IntrinsicElements extends React.JSX.IntrinsicElements {}
+  }
+}
+
+declare module "react/jsx-dev-runtime" {
+  namespace JSX {
+    type Element = React.ReactElement;
+    interface IntrinsicElements extends React.JSX.IntrinsicElements {}
+  }
+}

package/tests/mocks.ts

@@ -24,16 +24,28 @@ export const mockConsentContent: ConsentContent = {
       decline_button_text: "Decline",
       logo_url: "https://example.com/logo.png",
       privacy_policy_url: "https://example.com/privacy",
-      sub_processors_url: "https://example.com/vendors",
+      privacy_center_url: "https://example.com/privacy-center",
       primary_color: "#4f87ff",
       secondary_color: "#ffffff",
       font_preference: "Arial",
       privacy_policy_prefix_text: "",
-      vendor_list_prefix_text: "",
       privacy_policy_anchor_text: "Privacy Policy",
-      vendors_list_anchor_text: "Vendors List",
+      privacy_center_anchor_text: "Privacy Center",
       purpose_section_heading: "Manage Consent",
       notice_banner_heading: "Privacy Notice",
+      dpo_info: {
+        grievance_text: "If you have any grievances related to data processing,",
+        grievance_anchor_text: "click here",
+        grievance_url: "https://example.com/grievance",
+        grievance_email: "grievance@example.com",
+        grievance_email_connector_text: "or email to",
+        dp_board_text: "In case we were not able to resolve your grievance, you can reach out to the Data Protection Board",
+        dp_board_anchor_text: "here",
+        dp_board_url: "https://example.com/dp-board",
+        dpo_text: "To connect with the Data Protection Officer,",
+        dpo_anchor_text: "Click here",
+        dpo_url: "https://example.com/dpo",
+      },
       created_at: "2023-01-01T00:00:00Z",
       updated_at: "2023-01-01T00:00:00Z",
       deployed_at: "2023-01-01T00:00:00Z",
@@ -42,21 +54,28 @@ export const mockConsentContent: ConsentContent = {
           notice_text: "Nos importa tu privacidad.",
           additional_text: "",
           privacy_policy_prefix_text: "",
-          vendor_list_prefix_text: "",
           privacy_policy_anchor_text: "Política de Privacidad",
-          vendors_list_anchor_text: "Lista de Proveedores",
           confirm_button_text: "Aceptar",
           decline_button_text: "Rechazar",
           purpose_section_heading: "Gestionar Consentimiento",
           notice_banner_heading: "Aviso de Privacidad",
+          privacy_center_anchor_text: "Centro de Privacidad",
           purposes: {
-            "purpose-1": "Marketing",
-            "purpose-1-description": "Usamos datos para marketing.",
+            "purpose-1": { name: "Marketing", description: "Usamos datos para marketing." },
           },
           data_elements: {
             "element-1": "Email",
             "element-2": "Phone",
           },
+          dpo_info: {
+            grievance_text: "Si tiene alguna queja relacionada con el procesamiento de datos,",
+            grievance_anchor_text: "haga clic aquí",
+            grievance_email_connector_text: "o envíe un correo a",
+            dp_board_text: "En caso de que no hayamos podido resolver su queja, puede comunicarse con la Junta de Protección de Datos",
+            dp_board_anchor_text: "aquí",
+            dpo_text: "Para comunicarse con el Oficial de Protección de Datos,",
+            dpo_anchor_text: "Haga clic aquí",
+          },
         },
       },
       purposes: [
@@ -176,6 +195,33 @@ export const mockReconsentContent: ConsentContent = {
   },
 } as const;
 
+export const mockMagicLinkContent: ConsentContent = {
+  ...mockConsentContent,
+  detail: {
+    ...mockConsentContent.detail,
+    reconsent_required: false,
+    purpose_selections: {
+      "purpose-1": {
+        selected: true,
+        status: "ACTIVE",
+        needs_reconsent: false,
+        data_elements: {
+          "element-1": {
+            selected: true,
+            enabled: true,
+            required: false,
+          },
+          "element-2": {
+            selected: true,
+            enabled: true,
+            required: true,
+          },
+        },
+      },
+    },
+  },
+} as const;
+
 export const mockMinorConsentContent: ConsentContent = {
   ...mockConsentContent,
   detail: {

package/tsconfig.json

@@ -8,11 +8,7 @@
     "moduleResolution": "node",
     "esModuleInterop": true,
     "skipLibCheck": true,
-    "plugins": [
-      {
-        "name": "typescript-plugin-css-modules"
-      }
-    ]
+    "plugins": [{ "name": "typescript-plugin-css-modules" }]
   },
   "include": ["src"]
 }