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

package/src/RedactoNoticeConsent/api/index.ts

@@ -5,13 +5,11 @@ import type {
   FetchConsentContentParams,
   FetchTTSAudioUrlsParams,
   GuardianInfoPayload,
-  LegacyConsentEventPayload,
   RedactoJwtPayload,
   SubmitConsentEventParams,
   SubmitGuardianInfoParams,
   TTSAudioUrlsResponse,
 } from "./types";
-import { isLegacyApi } from "../../utils/isLegacyApi";
 
 const BASE_URL = "https://api.redacto.io/consent";
 
@@ -59,6 +57,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 +79,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 +97,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",
@@ -169,70 +171,34 @@ export const submitConsentEvent = async ({
 
     const apiBaseUrl = baseUrl || BASE_URL;
 
-    let payload: ConsentEventPayload | LegacyConsentEventPayload;
-
-    if (isLegacyApi(apiBaseUrl)) {
-      // @deprecated Legacy payload for production (.io) backend
-      const primaryEmail = typeof window !== "undefined" ? localStorage.getItem("userEmail") : null;
-      payload = {
-        primary_email: primaryEmail || undefined,
-        notice_uuid: noticeUuid,
-        source: "WEB",
-        declined: Boolean(declined),
-        consents: {
-          purposes: purposes.map((purpose) => {
-            if (!purpose.uuid) {
-              throw new Error(`Invalid purpose data: missing uuid`);
-            }
-            return {
-              uuid: purpose.uuid,
-              name: purpose.name,
-              description: purpose.description || "",
-              industries: purpose.industries || "",
-              selected: Boolean(purpose.selected),
-              data_elements: (purpose.data_elements || []).map((element) => ({
-                uuid: element.uuid,
-                name: element.name,
-                enabled: Boolean(element.enabled),
-                required: Boolean(element.required),
-                selected: element.required ? true : Boolean(element.selected),
-              })),
-            };
-          }),
-        },
-        meta_data: meta_data ? { specific_uuid: meta_data.specific_uuid } : undefined,
-      };
-    } else {
-      // New payload for staging (.tech) / localhost
-      const validatedPurposes = purposes.map((purpose) => {
-        if (!purpose.uuid) {
-          throw new Error(`Invalid purpose data: missing uuid`);
-        }
+    const validatedPurposes = purposes.map((purpose) => {
+      if (!purpose.uuid) {
+        throw new Error(`Invalid purpose data: missing uuid`);
+      }
 
-        // Only include enabled data elements (disabled elements are not selectable)
-        const dataElements = (purpose.data_elements || [])
-          .filter((element) => element.enabled)
-          .map((element) => ({
-            uuid: element.uuid,
-            selected: element.required ? true : Boolean(element.selected),
-          }));
-
-        return {
-          purpose_uuid: purpose.uuid,
-          selected: Boolean(purpose.selected),
-          data_elements: dataElements.length > 0 ? dataElements : undefined,
-        };
-      });
-
-      payload = {
-        notice_uuid: noticeUuid,
-        purposes: validatedPurposes,
-        select_all_mandatory: false,
-        source: "WEB",
-        declined: Boolean(declined),
-        meta_data: meta_data ? { specific_uuid: meta_data.specific_uuid } : undefined,
+      // Only include enabled data elements (disabled elements are not selectable)
+      const dataElements = (purpose.data_elements || [])
+        .filter((element) => element.enabled)
+        .map((element) => ({
+          uuid: element.uuid,
+          selected: element.required ? true : Boolean(element.selected),
+        }));
+
+      return {
+        purpose_uuid: purpose.uuid,
+        selected: Boolean(purpose.selected),
+        data_elements: dataElements.length > 0 ? dataElements : undefined,
       };
-    }
+    });
+
+    const payload: ConsentEventPayload = {
+      notice_uuid: noticeUuid,
+      purposes: validatedPurposes,
+      select_all_mandatory: false,
+      source: "WEB",
+      declined: Boolean(declined),
+      meta_data: meta_data ? { specific_uuid: meta_data.specific_uuid } : undefined,
+    };
 
     const response = await fetch(
       `${apiBaseUrl}/public/organisations/${ORGANISATION_UUID}/workspaces/${WORKSPACE_UUID}/submit-consent`,

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 = {
@@ -174,31 +175,6 @@ export type ConsentEventPayload = {
   };
 };
 
-// @deprecated Remove when production backend supports the new payload format.
-export type LegacyConsentEventPayload = {
-  primary_email?: string;
-  notice_uuid: string;
-  source: string;
-  declined: boolean;
-  consents: {
-    purposes: Array<{
-      uuid: string;
-      name: string;
-      description: string;
-      industries?: string;
-      selected: boolean;
-      data_elements: Array<{
-        uuid: string;
-        name: string;
-        enabled: boolean;
-        required: boolean;
-        selected: boolean;
-      }>;
-    }>;
-  };
-  meta_data?: { specific_uuid: string };
-};
-
 export type DataElement = {
   uuid: string;
   name: string;
@@ -278,6 +254,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 +301,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/index.ts

@@ -1,11 +1,9 @@
 import type {
   ConsentContent,
   ConsentEventPayload,
-  LegacyConsentEventPayload,
   FetchConsentContentParams,
   SubmitConsentEventParams,
 } from "./types";
-import { isLegacyApi } from "../../utils/isLegacyApi";
 
 const BASE_URL = "https://api.redacto.tech/consent";
 
@@ -77,68 +75,32 @@ export const submitConsentEvent = async ({
   try {
     const apiBaseUrl = baseUrl || BASE_URL;
 
-    let payload: ConsentEventPayload | LegacyConsentEventPayload;
-
-    if (isLegacyApi(apiBaseUrl)) {
-      // @deprecated Legacy payload for production (.io) backend
-      const primaryEmail = typeof window !== "undefined" ? localStorage.getItem("userEmail") : null;
-      payload = {
-        primary_email: primaryEmail || undefined,
-        notice_uuid: noticeUuid,
-        source: "WEB",
-        declined: Boolean(declined),
-        consents: {
-          purposes: purposes.map((purpose) => {
-            if (!purpose.uuid) {
-              throw new Error(`Invalid purpose data: missing uuid`);
-            }
-            return {
-              uuid: purpose.uuid,
-              name: purpose.name,
-              description: purpose.description || "",
-              industries: purpose.industries || "",
-              selected: Boolean(purpose.selected),
-              data_elements: (purpose.data_elements || []).map((element) => ({
-                uuid: element.uuid,
-                name: element.name,
-                enabled: Boolean(element.enabled),
-                required: Boolean(element.required),
-                selected: element.required ? true : Boolean(element.selected),
-              })),
-            };
-          }),
-        },
-        meta_data: meta_data ? { specific_uuid: meta_data.specific_uuid } : undefined,
-      };
-    } else {
-      // New payload for staging (.tech) / localhost
-      payload = {
-        notice_uuid: noticeUuid,
-        purposes: purposes.map((purpose) => {
-          if (!purpose.uuid) {
-            throw new Error(`Invalid purpose data: missing uuid`);
-          }
-
-          // Only include enabled data elements (disabled elements are not selectable)
-          const dataElements = purpose.data_elements
-            .filter((element) => element.enabled)
-            .map((element) => ({
-              uuid: element.uuid,
-              selected: element.required ? true : Boolean(element.selected),
-            }));
-
-          return {
-            purpose_uuid: purpose.uuid,
-            selected: Boolean(purpose.selected),
-            data_elements: dataElements.length > 0 ? dataElements : undefined,
-          };
-        }),
-        select_all_mandatory: false,
-        source: "WEB",
-        declined,
-        meta_data,
-      };
-    }
+    const payload: ConsentEventPayload = {
+      notice_uuid: noticeUuid,
+      purposes: purposes.map((purpose) => {
+        if (!purpose.uuid) {
+          throw new Error(`Invalid purpose data: missing uuid`);
+        }
+
+        // Only include enabled data elements (disabled elements are not selectable)
+        const dataElements = purpose.data_elements
+          .filter((element) => element.enabled)
+          .map((element) => ({
+            uuid: element.uuid,
+            selected: element.required ? true : Boolean(element.selected),
+          }));
+
+        return {
+          purpose_uuid: purpose.uuid,
+          selected: Boolean(purpose.selected),
+          data_elements: dataElements.length > 0 ? dataElements : undefined,
+        };
+      }),
+      select_all_mandatory: false,
+      source: "WEB",
+      declined,
+      meta_data,
+    };
 
     const response = await fetch(
       `${apiBaseUrl}/public/organisations/${org_uuid}/workspaces/${workspace_uuid}/submit-consent`,

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;
@@ -149,31 +151,6 @@ export type ConsentEventPayload = {
   };
 };
 
-// @deprecated Remove when production backend supports the new payload format.
-export type LegacyConsentEventPayload = {
-  primary_email?: string;
-  notice_uuid: string;
-  source: string;
-  declined: boolean;
-  consents: {
-    purposes: Array<{
-      uuid: string;
-      name: string;
-      description: string;
-      industries?: string;
-      selected: boolean;
-      data_elements: Array<{
-        uuid: string;
-        name: string;
-        enabled: boolean;
-        required: boolean;
-        selected: boolean;
-      }>;
-    }>;
-  };
-  meta_data?: { specific_uuid: string };
-};
-
 export type DataElement = {
   uuid: string;
   name: 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 {}
+  }
+}