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

package/src/RedactoNoticeConsent/api/index.ts

@@ -5,11 +5,13 @@ 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";
 
@@ -45,16 +47,6 @@ function decodeTokenSafely(token: string): RedactoJwtPayload | null {
   }
 }
 
-// Abstract localStorage access for better testability
-const storage = {
-  getItem: (key: string): string | null => {
-    if (typeof window !== 'undefined') {
-      return localStorage.getItem(key);
-    }
-    return null;
-  }
-};
-
 // Function to clear API cache (useful for testing or when switching users)
 export const clearApiCache = (): void => {
   apiCache.clear();
@@ -67,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 {
@@ -88,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) {
@@ -106,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",
@@ -146,8 +142,6 @@ export const fetchConsentContent = async ({
 
     return data;
   } catch (error) {
-    // Log error for debugging but don't expose sensitive information
-    console.error("Error fetching consent content:", error instanceof Error ? error.message : error);
     throw error;
   }
 };
@@ -177,48 +171,72 @@ export const submitConsentEvent = async ({
       throw new Error("Invalid token: missing organization or workspace UUID");
     }
 
-    const primaryEmail = storage.getItem("userEmail");
+    const apiBaseUrl = baseUrl || BASE_URL;
 
-    // Validate purposes data
-    const validatedPurposes = purposes.map((purpose) => {
-      if (!purpose.uuid || !purpose.name) {
-        throw new Error(`Invalid purpose data: missing uuid or name`);
-      }
+    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`);
+        }
 
-      return {
-        uuid: purpose.uuid,
-        name: purpose.name,
-        description: purpose.description || "",
-        industries: purpose.industries || "",
-        selected: Boolean(purpose.selected),
-        data_elements: (purpose.data_elements || []).map((element) => {
-          if (!element.uuid || !element.name) {
-            throw new Error(`Invalid data element: missing uuid or name`);
-          }
-
-          return {
+        // Only include enabled data elements (disabled elements are not selectable)
+        const dataElements = (purpose.data_elements || [])
+          .filter((element) => element.enabled)
+          .map((element) => ({
             uuid: element.uuid,
-            name: element.name,
-            enabled: Boolean(element.enabled),
-            required: Boolean(element.required),
             selected: element.required ? true : Boolean(element.selected),
-          };
-        }),
-      };
-    });
+          }));
 
-    const payload: ConsentEventPayload = {
-      primary_email: primaryEmail || undefined,
-      notice_uuid: noticeUuid,
-      source: "WEB",
-      declined: Boolean(declined),
-      consents: {
-        purposes: validatedPurposes,
-      },
-      meta_data: meta_data ? { specific_uuid: meta_data.specific_uuid } : undefined,
-    };
+        return {
+          purpose_uuid: purpose.uuid,
+          selected: Boolean(purpose.selected),
+          data_elements: dataElements.length > 0 ? dataElements : undefined,
+        };
+      });
 
-    const apiBaseUrl = baseUrl || BASE_URL;
+      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,
+      };
+    }
 
     const response = await fetch(
       `${apiBaseUrl}/public/organisations/${ORGANISATION_UUID}/workspaces/${WORKSPACE_UUID}/submit-consent`,
@@ -257,8 +275,6 @@ export const submitConsentEvent = async ({
     apiCache.clear();
 
   } catch (error) {
-    // Log error for debugging but don't expose sensitive information
-    console.error("Error submitting consent event:", error instanceof Error ? error.message : error);
     throw error;
   }
 };
@@ -414,8 +430,6 @@ export const fetchTTSAudioUrls = async ({
 
     return data;
   } catch (error) {
-    // Log error for debugging but don't expose sensitive information
-    console.error("Error fetching TTS audio URLs:", error instanceof Error ? error.message : error);
     throw error;
   }
 };

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,12 +154,30 @@ export type FetchConsentContentParams = {
   language?: string;
   specific_uuid?: string;
   validate_against?: "all" | "required";
+  include_fully_consented_data?: boolean;
 };
 
 export type ConsentEventPayload = {
-  org_user_id?: string;
+  notice_uuid: string;
+  purposes: Array<{
+    purpose_uuid: string;
+    selected: boolean;
+    data_elements?: Array<{
+      uuid: string;
+      selected: boolean;
+    }>;
+  }>;
+  select_all_mandatory: boolean;
+  source?: string;
+  declined?: boolean;
+  meta_data?: {
+    specific_uuid: string;
+  };
+};
+
+// @deprecated Remove when production backend supports the new payload format.
+export type LegacyConsentEventPayload = {
   primary_email?: string;
-  primary_mobile?: string;
   notice_uuid: string;
   source: string;
   declined: boolean;
@@ -179,9 +197,7 @@ export type ConsentEventPayload = {
       }>;
     }>;
   };
-  meta_data?: {
-    specific_uuid: string;
-  };
+  meta_data?: { specific_uuid: string };
 };
 
 export type DataElement = {
@@ -263,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;
@@ -285,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;
     }
 
@@ -154,26 +163,24 @@ const RedactoConsentInlineComponent = ({
         language,
         specific_uuid: applicationId,
       });
-      setContent(consentContentData.detail.active_config);
-      if (consentContentData.detail.active_config.default_language) {
-        setSelectedLanguage(
-          consentContentData.detail.active_config.default_language
-        );
+      const activeConfig = consentContentData.detail.active_config;
+      setContent(activeConfig);
+      if (activeConfig.default_language) {
+        setSelectedLanguage(activeConfig.default_language);
       }
-      const initialCollapsedState =
-        consentContentData.detail.active_config.purposes.reduce(
-          (acc, purpose) => ({
-            ...acc,
-            [purpose.uuid]: true,
-          }),
-          {}
-        );
+      const initialCollapsedState = activeConfig.purposes.reduce(
+        (acc, purpose) => ({
+          ...acc,
+          [purpose.uuid]: true,
+        }),
+        {}
+      );
       setCollapsedPurposes(initialCollapsedState);
 
       // Initialize selected states
       // All elements start unchecked, but required elements cannot be unchecked once checked
       const initialDataElementState: Record<string, boolean> =
-        consentContentData.detail.active_config.purposes.reduce(
+        activeConfig.purposes.reduce(
           (acc: Record<string, boolean>, purpose) => {
             purpose.data_elements.forEach((element) => {
               const combinedId = `${purpose.uuid}-${element.uuid}`;
@@ -187,7 +194,7 @@ const RedactoConsentInlineComponent = ({
 
       // Initialize purpose states - all start unchecked
       const initialPurposeState: Record<string, boolean> =
-        consentContentData.detail.active_config.purposes.reduce(
+        activeConfig.purposes.reduce(
           (acc: Record<string, boolean>, purpose) => {
             return {
               ...acc,
@@ -198,7 +205,6 @@ const RedactoConsentInlineComponent = ({
         );
       setSelectedPurposes(initialPurposeState);
     } catch (err: unknown) {
-      console.error(err);
       const error = err as Error & { status?: number };
       setFetchError(error);
       if (error.status === 409) {
@@ -360,13 +366,12 @@ const RedactoConsentInlineComponent = ({
         // Reset ref on success to allow re-submission if needed
         hasSubmittedRef.current = false;
       } catch (error) {
-        console.error("Error submitting consent:", error);
         const err = error as Error & { status?: number };
-        if (err.status === 500) {
-          setErrorMessage(
-            "An error occurred while submitting your consent. Please try again later."
-          );
-        }
+        const message =
+          err.status === 500
+            ? "An error occurred while submitting your consent. Please try again later."
+            : err.message || "Failed to submit consent. Please try again.";
+        setErrorMessage(message);
         // Reset ref on error to allow retry
         hasSubmittedRef.current = false;
         throw error;
@@ -400,7 +405,6 @@ const RedactoConsentInlineComponent = ({
         try {
           await handleAcceptWithToken(accessToken);
         } catch (err) {
-          console.error("Failed to auto-submit consent:", err);
           hasSubmittedRef.current = false;
           onError?.(err as Error);
         }

package/src/RedactoNoticeConsentInline/api/index.ts

@@ -1,9 +1,11 @@
 import type {
   ConsentContent,
   ConsentEventPayload,
+  LegacyConsentEventPayload,
   FetchConsentContentParams,
   SubmitConsentEventParams,
 } from "./types";
+import { isLegacyApi } from "../../utils/isLegacyApi";
 
 const BASE_URL = "https://api.redacto.tech/consent";
 
@@ -58,7 +60,6 @@ export const fetchConsentContent = async ({
     const data = await response.json();
     return data;
   } catch (error) {
-    console.error("Error fetching consent content:", error);
     throw error;
   }
 };
@@ -74,33 +75,71 @@ export const submitConsentEvent = async ({
   meta_data,
 }: SubmitConsentEventParams): Promise<void> => {
   try {
-    const primaryEmail = localStorage.getItem("userEmail");
-    const payload: ConsentEventPayload = {
-      primary_email: primaryEmail || undefined,
-      notice_uuid: noticeUuid,
-      source: "WEB",
-      declined,
-      consents: {
-        purposes: purposes.map((purpose) => ({
-          uuid: purpose.uuid,
-          name: purpose.name,
-          description: purpose.description,
-          industries: purpose.industries || "",
-          selected: purpose.selected,
-          data_elements: purpose.data_elements.map((element) => ({
-            uuid: element.uuid,
-            name: element.name,
-            enabled: element.enabled,
-            required: element.required,
-            selected: element.required ? true : element.selected,
-          })),
-        })),
-      },
-      meta_data,
-    };
-
     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 response = await fetch(
       `${apiBaseUrl}/public/organisations/${org_uuid}/workspaces/${workspace_uuid}/submit-consent`,
       {
@@ -151,7 +190,6 @@ export const submitConsentEvent = async ({
       throw error;
     }
   } catch (error) {
-    console.error("Error submitting consent event:", error);
     throw error;
   }
 };