@redacto.io/consent-sdk-react 1.4.0 → 2.0.0

package/src/RedactoNoticeConsent/api/index.ts

@@ -3,10 +3,12 @@ import type {
   ConsentContent,
   ConsentEventPayload,
   FetchConsentContentParams,
+  FetchTTSAudioUrlsParams,
   GuardianInfoPayload,
   RedactoJwtPayload,
   SubmitConsentEventParams,
   SubmitGuardianInfoParams,
+  TTSAudioUrlsResponse,
 } from "./types";
 
 const BASE_URL = "https://api.redacto.io/consent";
@@ -352,3 +354,68 @@ export const submitGuardianInfo = async ({
     throw error;
   }
 };
+
+export const fetchTTSAudioUrls = async ({
+  accessToken,
+  baseUrl,
+  noticeUuid,
+  language,
+  signal, // AbortSignal for request cancellation
+}: FetchTTSAudioUrlsParams & { signal?: AbortSignal }): Promise<TTSAudioUrlsResponse> => {
+  try {
+    // Validate required parameters
+    if (!accessToken || !noticeUuid || !language) {
+      throw new Error("accessToken, noticeUuid, and language are required");
+    }
+
+    const decodedToken = decodeTokenSafely(accessToken);
+    if (!decodedToken) {
+      throw new Error("Invalid access token");
+    }
+
+    const { organisation_uuid: ORGANISATION_UUID, workspace_uuid: WORKSPACE_UUID } = decodedToken;
+    if (!ORGANISATION_UUID || !WORKSPACE_UUID) {
+      throw new Error("Invalid token: missing organization or workspace UUID");
+    }
+
+    const apiBaseUrl = baseUrl || BASE_URL;
+
+    const url = `${apiBaseUrl}/public/organisations/${ORGANISATION_UUID}/workspaces/${WORKSPACE_UUID}/notices/${noticeUuid}/audio/${language}`;
+
+    const response = await fetch(url, {
+      method: "GET",
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+        Accept: "application/json",
+        "Content-Type": "application/json",
+      },
+      signal, // Add abort signal for request cancellation
+    });
+
+    if (!response.ok) {
+      let errorMessage = `Failed to fetch TTS audio URLs: ${response.status} ${response.statusText}`;
+
+      if (response.status === 401) {
+        errorMessage = "Unauthorized: Invalid or expired token";
+      } else if (response.status === 403) {
+        errorMessage = "Forbidden: Access denied";
+      } else if (response.status === 404) {
+        errorMessage = "Notice or audio not found";
+      } else if (response.status >= 500) {
+        errorMessage = "Server error: Please try again later";
+      }
+
+      const error = new Error(errorMessage) as Error & { status?: number };
+      error.status = response.status;
+      throw error;
+    }
+
+    const data: TTSAudioUrlsResponse = await response.json();
+
+    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

@@ -262,3 +262,42 @@ export type PurposeItemProps = {
   getTranslatedText: (key: string, defaultText: string, itemId?: string) => string;
   isAlreadyConsented: boolean;
 };
+
+// TTS Audio Types
+export type PurposeAudioUrls = {
+  name_audio_url: string;
+  description_audio_url: string;
+};
+
+export type DataElementAudioUrls = {
+  name_audio_url: string;
+};
+
+export type TTSAudioUrlsResponse = {
+  code: number;
+  status: string;
+  detail: {
+    uuid: string;
+    language: string;
+    notice_text_audio_url: string;
+    additional_text_audio_url: string;
+    notice_summary_audio_url: string;
+    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;
+    purpose_section_heading_audio_url: string;
+    notice_banner_heading_audio_url: string;
+    purposes_audio: Record<string, PurposeAudioUrls>;
+    data_elements_audio: Record<string, DataElementAudioUrls>;
+  };
+};
+
+export type FetchTTSAudioUrlsParams = {
+  accessToken: string;
+  baseUrl?: string;
+  noticeUuid: string;
+  language: string;
+};

package/src/RedactoNoticeConsent/injectStyles.ts

@@ -96,20 +96,42 @@ export const injectCheckboxStyles = () => {
       outline-offset: 2px !important;
     }
 
-    /* Text-to-Speech Highlight Styles */
+    /* TTS Highlight Styles - Visible highlighting without layout shift */
     .redacto-tts-highlight {
+      position: relative !important;
+      transition: background-color 0.3s ease, outline 0.3s ease !important;
+    }
+
+    /* Block-level elements - headings */
+    h2.redacto-tts-highlight,
+    h3.redacto-tts-highlight {
       background-color: #FFF9C4 !important;
-      transition: background-color 0.3s ease !important;
-      border-radius: 2px !important;
+      border-radius: 3px !important;
       padding: 2px 4px !important;
+      margin: -2px -4px !important;
     }
 
-    /* Word-by-word highlighting */
-    .redacto-tts-word-highlight {
+    /* Inline elements - spans, links */
+    span.redacto-tts-highlight,
+    a.redacto-tts-highlight {
       background-color: #FFF9C4 !important;
-      transition: background-color 0.2s ease !important;
-      border-radius: 2px !important;
-      padding: 0 1px !important;
+      border-radius: 3px !important;
+      padding: 2px 4px !important;
+      margin: -2px -4px !important;
+    }
+
+    /* Paragraphs - handle carefully to avoid layout shift */
+    p.redacto-tts-highlight {
+      background-color: #FFF9C4 !important;
+      border-radius: 3px !important;
+      padding: 2px 4px !important;
+      margin: -2px -4px !important;
+    }
+
+    /* Buttons - use outline to keep button styles intact */
+    button.redacto-tts-highlight {
+      outline: 3px solid #FFF9C4 !important;
+      outline-offset: 2px !important;
     }
   `;
 

package/src/RedactoNoticeConsent/types.ts

@@ -43,26 +43,3 @@ export type TranslationObject = {
     | Record<string, string>
     | undefined;
 };
-
-export type TextSegment = {
-  text: string;
-  elementId: string;
-  elementRef?: React.RefObject<HTMLElement>;
-};
-
-export type UseTextToSpeechReturn = {
-  isPlaying: boolean;
-  isPaused: boolean;
-  currentIndex: number;
-  play: () => void;
-  pause: () => void;
-  stop: () => void;
-  toggle: () => void;
-};
-
-export type WordSpan = {
-  word: string;
-  span: HTMLSpanElement;
-  startIndex: number;
-  endIndex: number;
-};

package/src/RedactoNoticeConsentInline/RedactoNoticeConsentInline.tsx

@@ -465,6 +465,11 @@ const RedactoConsentInlineComponent = ({
               tabIndex={0}
               aria-expanded={!collapsedPurposes[purpose.uuid]}
               aria-controls={`purpose-${purpose.uuid}`}
+              aria-label={`${collapsedPurposes[purpose.uuid] ? "Expand" : "Collapse"} ${getTranslatedText(
+                `purposes.name`,
+                purpose.name,
+                purpose.uuid
+              )} details`}
               onKeyDown={(e) => {
                 if (e.key === "Enter" || e.key === " ") {
                   e.preventDefault();

package/src/RedactoNoticeConsent/useTextToSpeech.ts

@@ -1,378 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-import type { TextSegment, UseTextToSpeechReturn, WordSpan } from "./types";
-
-/**
- * Custom hook for text-to-speech functionality with synchronized word-by-word highlighting
- */
-export const useTextToSpeech = (
-  segments: TextSegment[],
-  language: string = "en"
-): UseTextToSpeechReturn => {
-  const [isPlaying, setIsPlaying] = useState(false);
-  const [isPaused, setIsPaused] = useState(false);
-  const [currentIndex, setCurrentIndex] = useState(0);
-
-  const utteranceRef = useRef<SpeechSynthesisUtterance | null>(null);
-  const synthRef = useRef<SpeechSynthesis | null>(null);
-  const currentSegmentRef = useRef<number>(0);
-  const wordSpansRef = useRef<WordSpan[]>([]);
-  const originalTextsRef = useRef<Map<string, string>>(new Map());
-  const originalHTMLRef = useRef<Map<string, string>>(new Map());
-  const currentWordIndexRef = useRef<number>(-1);
-  const isInitializedRef = useRef<boolean>(false);
-
-  // Initialize speech synthesis
-  useEffect(() => {
-    if (typeof window !== "undefined" && "speechSynthesis" in window) {
-      synthRef.current = window.speechSynthesis;
-    }
-  }, []);
-
-  // Cleanup on unmount
-  useEffect(() => {
-    return () => {
-      cleanupWordSpans();
-      if (synthRef.current) {
-        synthRef.current.cancel();
-      }
-    };
-  }, []);
-
-  // Cleanup word spans and restore original text
-  const cleanupWordSpans = useCallback(() => {
-    wordSpansRef.current.forEach((wordSpan) => {
-      if (wordSpan.span.parentNode) {
-        wordSpan.span.classList.remove("redacto-tts-word-highlight");
-        wordSpan.span.style.backgroundColor = "";
-      }
-    });
-    wordSpansRef.current = [];
-    currentWordIndexRef.current = -1;
-    isInitializedRef.current = false;
-
-    // Restore original HTML structure
-    originalHTMLRef.current.forEach((originalHTML, elementId) => {
-      const element = document.getElementById(elementId);
-      if (element && originalHTML) {
-        // Restore the original HTML structure
-        element.innerHTML = originalHTML;
-      }
-    });
-    originalHTMLRef.current.clear();
-    originalTextsRef.current.clear();
-  }, []);
-
-  // Remove highlight from all words
-  const removeAllHighlights = useCallback(() => {
-    wordSpansRef.current.forEach((wordSpan) => {
-      wordSpan.span.classList.remove("redacto-tts-word-highlight");
-      wordSpan.span.style.backgroundColor = "";
-    });
-  }, []);
-
-  // Create word spans for an element
-  const createWordSpans = useCallback((elementId: string, text: string): WordSpan[] => {
-    const element = document.getElementById(elementId);
-    if (!element) return [];
-
-    // Store original HTML structure if not already stored
-    if (!originalHTMLRef.current.has(elementId)) {
-      const originalHTML = element.innerHTML || "";
-      originalHTMLRef.current.set(elementId, originalHTML);
-      const originalText = element.textContent || element.innerText || "";
-      originalTextsRef.current.set(elementId, originalText);
-    }
-
-    // Split text into words while preserving spaces
-    const words = text.split(/(\s+)/);
-    const wordSpans: WordSpan[] = [];
-    let charIndex = 0;
-
-    // Clear element content and rebuild with word spans
-    element.innerHTML = "";
-
-    words.forEach((word) => {
-      if (word.trim()) {
-        // Create span for word
-        const span = document.createElement("span");
-        span.textContent = word;
-        span.style.display = "inline";
-        span.style.transition = "background-color 0.2s ease";
-        span.style.padding = "0 1px";
-        element.appendChild(span);
-
-        const startIndex = charIndex;
-        const endIndex = charIndex + word.length;
-        wordSpans.push({
-          word,
-          span,
-          startIndex,
-          endIndex,
-        });
-      } else if (word) {
-        // Preserve whitespace
-        element.appendChild(document.createTextNode(word));
-      }
-      charIndex += word.length;
-    });
-
-    return wordSpans;
-  }, []);
-
-  // Highlight a specific word by index
-  const highlightWordByIndex = useCallback((wordIndex: number) => {
-    if (wordIndex >= 0 && wordIndex < wordSpansRef.current.length) {
-      removeAllHighlights();
-      const wordSpan = wordSpansRef.current[wordIndex];
-      wordSpan.span.classList.add("redacto-tts-word-highlight");
-      wordSpan.span.style.backgroundColor = "#FFF9C4";
-      
-      // Scroll into view if needed
-      wordSpan.span.scrollIntoView({
-        behavior: "smooth",
-        block: "center",
-        inline: "nearest",
-      });
-    }
-  }, [removeAllHighlights]);
-
-  // Speak a single segment with word-by-word highlighting
-  const speakSegment = useCallback(
-    (index: number) => {
-      if (!synthRef.current || index >= segments.length) {
-        setIsPlaying(false);
-        setIsPaused(false);
-        setCurrentIndex(0);
-        currentSegmentRef.current = 0;
-        cleanupWordSpans();
-        return;
-      }
-
-      const segment = segments[index];
-      if (!segment.text.trim()) {
-        // Skip empty segments
-        speakSegment(index + 1);
-        return;
-      }
-
-      setCurrentIndex(index);
-      currentSegmentRef.current = index;
-
-      // Create word spans for this segment if not already created
-      // If element doesn't exist in DOM (e.g., collapsed), we'll still speak without highlighting
-      if (!isInitializedRef.current || wordSpansRef.current.length === 0) {
-        const wordSpans = createWordSpans(segment.elementId, segment.text);
-        wordSpansRef.current = wordSpans;
-        currentWordIndexRef.current = -1;
-        isInitializedRef.current = true;
-      }
-
-      // If no word spans were created (element not in DOM), still speak the text
-      // This ensures TTS works even when elements are collapsed/hidden
-      if (wordSpansRef.current.length === 0) {
-        // Element doesn't exist in DOM - speak without highlighting
-        const utterance = new SpeechSynthesisUtterance(segment.text);
-        
-        // Set language
-        const langCode = language === "English" || language === "en" 
-          ? "en-US" 
-          : language;
-        utterance.lang = langCode;
-        
-        // Set voice properties
-        utterance.rate = 1.0;
-        utterance.pitch = 1.0;
-        utterance.volume = 1.0;
-
-        utterance.onend = () => {
-          // Move to next segment
-          const nextIndex = index + 1;
-          currentSegmentRef.current = nextIndex;
-          if (nextIndex < segments.length) {
-            speakSegment(nextIndex);
-          } else {
-            // Finished all segments
-            setIsPlaying(false);
-            setIsPaused(false);
-            setCurrentIndex(0);
-            currentSegmentRef.current = 0;
-            cleanupWordSpans();
-          }
-        };
-
-        utterance.onerror = (event) => {
-          console.error("Speech synthesis error:", event);
-          setIsPlaying(false);
-          setIsPaused(false);
-          cleanupWordSpans();
-        };
-
-        utteranceRef.current = utterance;
-        synthRef.current.speak(utterance);
-        return;
-      }
-
-      const utterance = new SpeechSynthesisUtterance(segment.text);
-      
-      // Set language
-      const langCode = language === "English" || language === "en" 
-        ? "en-US" 
-        : language;
-      utterance.lang = langCode;
-      
-      // Set voice properties
-      utterance.rate = 1.0;
-      utterance.pitch = 1.0;
-      utterance.volume = 1.0;
-
-      // Handle word boundary events for word-by-word highlighting
-      utterance.onboundary = (event) => {
-        if (event.name === "word" && event.charIndex !== undefined) {
-          // Find the word span that corresponds to this character index
-          const wordIndex = wordSpansRef.current.findIndex(
-            (ws) =>
-              event.charIndex >= ws.startIndex &&
-              event.charIndex < ws.endIndex
-          );
-          
-          if (wordIndex !== -1) {
-            currentWordIndexRef.current = wordIndex;
-            highlightWordByIndex(wordIndex);
-          }
-        }
-      };
-
-      utterance.onstart = () => {
-        // Highlight first word when speech starts
-        if (currentWordIndexRef.current === -1 && wordSpansRef.current.length > 0) {
-          highlightWordByIndex(0);
-          currentWordIndexRef.current = 0;
-        }
-      };
-
-      utterance.onend = () => {
-        // Remove highlights
-        removeAllHighlights();
-        
-        // Reset for next segment
-        isInitializedRef.current = false;
-        wordSpansRef.current = [];
-        currentWordIndexRef.current = -1;
-        
-        // Move to next segment
-        const nextIndex = index + 1;
-        currentSegmentRef.current = nextIndex;
-        if (nextIndex < segments.length) {
-          speakSegment(nextIndex);
-        } else {
-          // Finished all segments
-          setIsPlaying(false);
-          setIsPaused(false);
-          setCurrentIndex(0);
-          currentSegmentRef.current = 0;
-          cleanupWordSpans();
-        }
-      };
-
-      utterance.onerror = (event) => {
-        console.error("Speech synthesis error:", event);
-        setIsPlaying(false);
-        setIsPaused(false);
-        cleanupWordSpans();
-      };
-
-      utteranceRef.current = utterance;
-      synthRef.current.speak(utterance);
-    },
-    [segments, language, createWordSpans, highlightWordByIndex, removeAllHighlights, cleanupWordSpans]
-  );
-
-  // Play function
-  const play = useCallback(() => {
-    if (!synthRef.current || segments.length === 0) return;
-
-    if (isPaused) {
-      // Resume from where we paused using native resume
-      try {
-        setIsPaused(false);
-        setIsPlaying(true);
-        
-        // Resume the paused utterance
-        if (synthRef.current.paused) {
-          synthRef.current.resume();
-        } else {
-          // If not paused, we might need to restart
-          // This can happen if the utterance ended while paused
-          const currentSegment = currentSegmentRef.current;
-          if (currentSegment < segments.length) {
-            isInitializedRef.current = false;
-            speakSegment(currentSegment);
-          }
-        }
-      } catch (error) {
-        console.error("Error resuming speech:", error);
-        // If resume fails, restart from current segment
-        const currentSegment = currentSegmentRef.current;
-        if (currentSegment < segments.length) {
-          isInitializedRef.current = false;
-          speakSegment(currentSegment);
-        }
-      }
-    } else {
-      // Start from beginning
-      setIsPlaying(true);
-      setIsPaused(false);
-      currentSegmentRef.current = 0;
-      currentWordIndexRef.current = -1;
-      isInitializedRef.current = false;
-      cleanupWordSpans();
-      speakSegment(0);
-    }
-  }, [isPaused, segments, speakSegment, cleanupWordSpans]);
-
-  // Pause function
-  const pause = useCallback(() => {
-    if (synthRef.current && isPlaying && !isPaused) {
-      try {
-        synthRef.current.pause();
-        setIsPaused(true);
-      } catch (error) {
-        console.error("Error pausing speech:", error);
-        // If pause fails, stop instead
-        stop();
-      }
-    }
-  }, [isPlaying, isPaused]);
-
-  // Stop function
-  const stop = useCallback(() => {
-    if (synthRef.current) {
-      synthRef.current.cancel();
-      setIsPlaying(false);
-      setIsPaused(false);
-      setCurrentIndex(0);
-      currentSegmentRef.current = 0;
-      currentWordIndexRef.current = -1;
-      cleanupWordSpans();
-    }
-  }, [cleanupWordSpans]);
-
-  // Toggle play/pause
-  const toggle = useCallback(() => {
-    if (isPlaying && !isPaused) {
-      pause();
-    } else {
-      play();
-    }
-  }, [isPlaying, isPaused, play, pause]);
-
-  return {
-    isPlaying,
-    isPaused,
-    currentIndex,
-    play,
-    pause,
-    stop,
-    toggle,
-  };
-};