@redacto.io/consent-sdk-react 1.0.0 → 1.2.0

package/src/RedactoNoticeConsent/RedactoNoticeConsent.tsx

@@ -32,6 +32,8 @@ import logo from "./assets/redacto-logo.png";
 import { injectCheckboxStyles } from "./injectStyles";
 import { styles } from "./styles";
 import { useMediaQuery } from "./useMediaQuery";
+import { useTextToSpeech } from "./useTextToSpeech";
+import type { TextSegment } from "./types";
 
 // =============================================================================
 // SUB-COMPONENTS
@@ -121,6 +123,7 @@ const PurposeItem: React.FC<PurposeItemProps> = ({
           </div>
           <div style={styles.optionTextContainer}>
             <h2
+              id={`purpose-name-${purpose.uuid}`}
               style={{
                 ...styles.optionTitle,
                 ...responsiveStyles.optionTitle,
@@ -130,6 +133,7 @@ const PurposeItem: React.FC<PurposeItemProps> = ({
               {getTranslatedText(`purposes.name`, purpose.name, purpose.uuid)}
             </h2>
             <h3
+              id={`purpose-description-${purpose.uuid}`}
               style={{
                 ...styles.optionDescription,
                 ...responsiveStyles.optionDescription,
@@ -198,6 +202,7 @@ const PurposeItem: React.FC<PurposeItemProps> = ({
             {purpose.data_elements.map((dataElement: any) => (
               <div key={dataElement.uuid} style={styles.dataElementItem}>
                 <span
+                  id={`data-element-${purpose.uuid}-${dataElement.uuid}`}
                   style={{
                     ...styles.dataElementText,
                     ...responsiveStyles.dataElementText,
@@ -694,7 +699,7 @@ export const RedactoNoticeConsent = ({
   onError,
   settings,
   applicationId,
-  checkMode = "all",
+  validateAgainst = "all",
 }: Props) => {
   // =============================================================================
   // PROP VALIDATION
@@ -969,7 +974,8 @@ export const RedactoNoticeConsent = ({
   ): string => {
     if (!content) return defaultText;
 
-    if (selectedLanguage === content.default_language) {
+    // If English is selected, use the base content from active_config
+    if (selectedLanguage === "English" || selectedLanguage === "en") {
       if (
         key === "privacy_policy_anchor_text" &&
         content.privacy_policy_anchor_text
@@ -979,6 +985,7 @@ export const RedactoNoticeConsent = ({
       return defaultText;
     }
 
+    // For other languages, check supported_languages_and_translations
     if (!content.supported_languages_and_translations) {
       return defaultText;
     }
@@ -1043,13 +1050,16 @@ export const RedactoNoticeConsent = ({
         baseUrl,
         language,
         specific_uuid: applicationId,
-        check_mode: checkMode,
+        validate_against: validateAgainst,
         signal: abortControllerRef.current?.signal,
       });
       setContent(consentContentData.detail.active_config);
       if (consentContentData.detail.active_config.default_language) {
+        // Normalize "en" to "English" for consistency
+        const defaultLang =
+          consentContentData.detail.active_config.default_language;
         setSelectedLanguage(
-          consentContentData.detail.active_config.default_language
+          defaultLang === "en" || defaultLang === "EN" ? "English" : defaultLang
         );
       }
       const initialCollapsedState =
@@ -1178,7 +1188,7 @@ export const RedactoNoticeConsent = ({
     refreshToken,
     language,
     applicationId,
-    checkMode,
+    validateAgainst,
     // Removed onError and isRefreshingToken from dependencies to prevent duplicate API calls
     // onError is only called on errors, not needed for initial data fetching
   ]);
@@ -1437,16 +1447,217 @@ export const RedactoNoticeConsent = ({
     // User is under 18, show guardian form
   }, []);
 
-  const availableLanguages = useMemo(
-    () =>
-      content
-        ? [
-            content.default_language,
-            ...Object.keys(content.supported_languages_and_translations || {}),
-          ].filter((value, index, self) => self.indexOf(value) === index)
-        : [language],
-    [content, language]
-  );
+  const availableLanguages = useMemo(() => {
+    if (!content) return [language];
+
+    // English is always available since it's in active_config
+    const languages = ["English"];
+
+    // Add default language if it's not English
+    if (
+      content.default_language &&
+      content.default_language !== "English" &&
+      content.default_language !== "en"
+    ) {
+      languages.push(content.default_language);
+    }
+
+    // Add all supported languages from translations
+    if (content.supported_languages_and_translations) {
+      Object.keys(content.supported_languages_and_translations).forEach(
+        (lang) => {
+          if (!languages.includes(lang)) {
+            languages.push(lang);
+          }
+        }
+      );
+    }
+
+    return languages;
+  }, [content, language]);
+
+  // =============================================================================
+  // TEXT-TO-SPEECH FUNCTIONALITY
+  // =============================================================================
+
+  // Create text segments for TTS in reading order
+  const textSegments = useMemo<TextSegment[]>(() => {
+    if (!content) return [];
+
+    const segments: TextSegment[] = [];
+
+    // 1. Notice banner heading
+    const noticeHeading = getTranslatedText(
+      "notice_banner_heading",
+      content.notice_banner_heading || "Privacy Notice"
+    );
+    if (noticeHeading) {
+      segments.push({
+        text: noticeHeading,
+        elementId: "privacy-notice-title",
+      });
+    }
+
+    // 2. Notice text
+    const noticeText = getTranslatedText("notice_text", content.notice_text);
+    if (noticeText) {
+      segments.push({
+        text: noticeText,
+        elementId: "privacy-notice-text",
+      });
+    }
+
+    // 3. Privacy policy text
+    const privacyPrefix = getTranslatedText(
+      "privacy_policy_prefix_text",
+      content.privacy_policy_prefix_text || ""
+    );
+    const privacyAnchor = getTranslatedText(
+      "privacy_policy_anchor_text",
+      content.privacy_policy_anchor_text || "Privacy Policy"
+    );
+    if (privacyPrefix || privacyAnchor) {
+      const privacyText = `${privacyPrefix} ${privacyAnchor}`.trim();
+      if (privacyText) {
+        segments.push({
+          text: privacyText,
+          elementId: "privacy-policy-text",
+        });
+      }
+    }
+
+    // 4. Purpose section heading
+    const purposeHeading = getTranslatedText(
+      "purpose_section_heading",
+      "Manage What You Share"
+    );
+    if (purposeHeading) {
+      segments.push({
+        text: purposeHeading,
+        elementId: "purpose-section-heading",
+      });
+    }
+
+    // 5. Purposes and data elements
+    const purposesToRead = categorizedPurposes
+      ? [
+          ...categorizedPurposes.alreadyConsented,
+          ...categorizedPurposes.needsConsent,
+        ]
+      : content.purposes || [];
+
+    purposesToRead.forEach((purpose) => {
+      // Purpose name
+      const purposeName = getTranslatedText(
+        `purposes.name`,
+        purpose.name,
+        purpose.uuid
+      );
+      if (purposeName) {
+        segments.push({
+          text: purposeName,
+          elementId: `purpose-name-${purpose.uuid}`,
+        });
+      }
+
+      // Purpose description
+      const purposeDescription = getTranslatedText(
+        `purposes.description`,
+        purpose.description,
+        purpose.uuid
+      );
+      if (purposeDescription) {
+        segments.push({
+          text: purposeDescription,
+          elementId: `purpose-description-${purpose.uuid}`,
+        });
+      }
+
+      // Data elements
+      if (purpose.data_elements && purpose.data_elements.length > 0) {
+        purpose.data_elements.forEach((dataElement) => {
+          const elementName = getTranslatedText(
+            `data_elements.name`,
+            dataElement.name,
+            dataElement.uuid
+          );
+          if (elementName) {
+            const requiredText = dataElement.required ? " (required)" : "";
+            segments.push({
+              text: `${elementName}${requiredText}`,
+              elementId: `data-element-${purpose.uuid}-${dataElement.uuid}`,
+            });
+          }
+        });
+      }
+    });
+
+    return segments;
+  }, [content, categorizedPurposes, getTranslatedText]);
+
+  // Initialize TTS hook
+  const tts = useTextToSpeech(textSegments, selectedLanguage);
+
+  // Auto-expand collapsed purposes when TTS is reading their content
+  // This ensures accessibility - users can see what's being read even if sections were collapsed
+  useEffect(() => {
+    if (!tts.isPlaying || !content || textSegments.length === 0) return;
+
+    const currentSegment = textSegments[tts.currentIndex];
+    if (!currentSegment) return;
+
+    // Extract purpose UUID from element ID
+    let purposeUuid: string | null = null;
+
+    // Check if current segment is a data element (format: data-element-{purposeUuid}-{elementUuid})
+    const dataElementMatch = currentSegment.elementId.match(
+      /^data-element-(.+?)-(.+)$/
+    );
+    if (dataElementMatch) {
+      purposeUuid = dataElementMatch[1];
+    } else {
+      // Check if current segment is a purpose name or description (format: purpose-name-{purposeUuid} or purpose-description-{purposeUuid})
+      const purposeNameMatch =
+        currentSegment.elementId.match(/^purpose-name-(.+)$/);
+      const purposeDescMatch = currentSegment.elementId.match(
+        /^purpose-description-(.+)$/
+      );
+      if (purposeNameMatch) {
+        purposeUuid = purposeNameMatch[1];
+      } else if (purposeDescMatch) {
+        purposeUuid = purposeDescMatch[1];
+      }
+    }
+
+    // Expand the purpose if it's collapsed
+    if (purposeUuid && collapsedPurposes[purposeUuid]) {
+      setCollapsedPurposes((prev) => ({
+        ...prev,
+        [purposeUuid!]: false,
+      }));
+    }
+  }, [
+    tts.isPlaying,
+    tts.currentIndex,
+    textSegments,
+    content,
+    collapsedPurposes,
+  ]);
+
+  // Stop TTS when language changes
+  useEffect(() => {
+    tts.stop();
+  }, [selectedLanguage]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Stop TTS when content changes
+  useEffect(() => {
+    tts.stop();
+  }, [content]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Handle TTS button click
+  const handleTTSButtonClick = useCallback(() => {
+    tts.toggle();
+  }, [tts]);
 
   const modalStyle = {
     borderRadius: settings?.borderRadius || "8px",
@@ -1806,7 +2017,10 @@ export const RedactoNoticeConsent = ({
                         ...componentHeadingStyle,
                       }}
                     >
-                      {content?.notice_banner_heading}
+                      {getTranslatedText(
+                        "notice_banner_heading",
+                        content?.notice_banner_heading || "Privacy Notice"
+                      )}
                     </h2>
                   </div>
                   <div style={styles.languageSelectorContainer}>
@@ -1851,37 +2065,76 @@ export const RedactoNoticeConsent = ({
                           </svg>
                         </button>
                       </div>
-                      <button
-                        style={{
-                          ...styles.topRight,
-                          ...responsiveStyles.topRight,
-                          ...languageSelectorStyle,
-                          padding: "3px 9px",
-                        }}
-                        aria-label="Talkback"
-                        title="Talkback"
-                      >
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          width="16"
-                          height="16"
-                          viewBox="0 0 24 24"
-                          fill="none"
-                          stroke={
-                            settings?.button?.language?.textColor ||
-                            "currentColor"
+                      {(selectedLanguage === "English" ||
+                        selectedLanguage === "en") && (
+                        <button
+                          onClick={handleTTSButtonClick}
+                          style={{
+                            ...styles.topRight,
+                            ...responsiveStyles.topRight,
+                            ...languageSelectorStyle,
+                            padding: "3px 9px",
+                            opacity: textSegments.length === 0 ? 0.5 : 1,
+                          }}
+                          aria-label={
+                            tts.isPlaying && !tts.isPaused
+                              ? "Pause text-to-speech"
+                              : tts.isPaused
+                                ? "Resume text-to-speech"
+                                : "Start text-to-speech"
                           }
-                          strokeWidth="2"
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          aria-hidden="true"
+                          title={
+                            tts.isPlaying && !tts.isPaused
+                              ? "Pause Talkback"
+                              : tts.isPaused
+                                ? "Resume Talkback"
+                                : "Start Talkback"
+                          }
+                          disabled={textSegments.length === 0}
                         >
-                          <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" />
-                          <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
-                          <line x1="12" y1="19" x2="12" y2="23" />
-                          <line x1="8" y1="23" x2="16" y2="23" />
-                        </svg>
-                      </button>
+                          {tts.isPlaying && !tts.isPaused ? (
+                            // Pause icon
+                            <svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              width="16"
+                              height="16"
+                              viewBox="0 0 24 24"
+                              fill="none"
+                              stroke={
+                                settings?.button?.language?.textColor ||
+                                "currentColor"
+                              }
+                              strokeWidth="2"
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              aria-hidden="true"
+                            >
+                              <rect x="6" y="4" width="4" height="16" />
+                              <rect x="14" y="4" width="4" height="16" />
+                            </svg>
+                          ) : (
+                            // Play/Sound icon
+                            <svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              width="16"
+                              height="16"
+                              viewBox="0 0 24 24"
+                              fill="none"
+                              stroke={
+                                settings?.button?.language?.textColor ||
+                                "currentColor"
+                              }
+                              strokeWidth="2"
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              aria-hidden="true"
+                            >
+                              <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
+                              <path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07" />
+                            </svg>
+                          )}
+                        </button>
+                      )}
                     </div>
                     {isLanguageDropdownOpen && (
                       <ul
@@ -1931,43 +2184,35 @@ export const RedactoNoticeConsent = ({
                       ...componentTextStyle,
                     }}
                   >
-                    {content
-                      ? getTranslatedText("notice_text", content.notice_text)
-                      : ""}
+                    <span id="privacy-notice-text">
+                      {content
+                        ? getTranslatedText("notice_text", content.notice_text)
+                        : ""}
+                    </span>
                     <br />
-                    Learn more in our{" "}
-                    <a
-                      style={{ ...styles.link, ...linkStyle }}
-                      href={content?.privacy_policy_url || "#"}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      aria-label="Privacy Policy (opens in new tab)"
-                    >
-                      [
+                    <span id="privacy-policy-text">
                       {getTranslatedText(
-                        "privacy_policy_anchor_text",
-                        content?.privacy_policy_anchor_text || "Privacy Policy"
-                      )}
-                      ]
-                    </a>{" "}
-                    and{" "}
-                    <a
-                      style={{ ...styles.link, ...linkStyle }}
-                      href={content?.sub_processors_url || "#"}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      aria-label="Vendors List (opens in new tab)"
-                    >
-                      [
-                      {getTranslatedText(
-                        "vendors_list_anchor_text",
-                        content?.vendors_list_anchor_text || "Vendors List"
-                      )}
-                      ]
-                    </a>
-                    .
+                        "privacy_policy_prefix_text",
+                        content?.privacy_policy_prefix_text || ""
+                      )}{" "}
+                      <a
+                        id="privacy-policy-link"
+                        style={{ ...styles.link, ...linkStyle }}
+                        href={content?.privacy_policy_url || "#"}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        aria-label="Privacy Policy (opens in new tab)"
+                      >
+                        {getTranslatedText(
+                          "privacy_policy_anchor_text",
+                          content?.privacy_policy_anchor_text ||
+                            "Privacy Policy"
+                        )}
+                      </a>
+                    </span>
                   </p>
                   <h2
+                    id="purpose-section-heading"
                     style={{
                       ...styles.subTitle,
                       ...responsiveStyles.subTitle,

package/src/RedactoNoticeConsent/api/index.ts

@@ -64,12 +64,12 @@ export const fetchConsentContent = async ({
   baseUrl,
   language = "en",
   specific_uuid,
-  check_mode = "all",
+  validate_against = "all",
   signal, // AbortSignal for request cancellation
 }: FetchConsentContentParams & { signal?: AbortSignal }): Promise<ConsentContent> => {
   try {
     // Validate required parameters
-    if (!noticeId || !accessToken) {
+    if (!noticeId || !accessToken || !validate_against) {
       throw new Error("noticeId and accessToken are required");
     }
 
@@ -86,10 +86,10 @@ 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}-${check_mode}-${language}-${specific_uuid || ''}`;
+    const cacheKey = `${accessToken}-${noticeId}-${validate_against}-${language}-${specific_uuid || ''}`;
 
     // Check cache first (skip for reconsent requests as they need fresh data)
-    if (check_mode === "all" && !specific_uuid) {
+    if (validate_against === "all" && !specific_uuid) {
       const cachedData = getCachedData(cacheKey);
       if (cachedData) {
         return cachedData;
@@ -103,7 +103,7 @@ export const fetchConsentContent = async ({
     if (specific_uuid) {
       url.searchParams.append("specific_uuid", specific_uuid);
     }
-    url.searchParams.append("check_mode", check_mode);
+    url.searchParams.append("validate_against", validate_against);
 
     const response = await fetch(url.toString(), {
       method: "GET",
@@ -138,7 +138,7 @@ export const fetchConsentContent = async ({
     const data: ConsentContent = await response.json();
 
     // Cache successful responses (skip for reconsent as data may change)
-    if (check_mode === "all" && !specific_uuid) {
+    if (validate_against === "all" && !specific_uuid) {
       setCachedData(cacheKey, data);
     }
 
@@ -219,7 +219,7 @@ export const submitConsentEvent = async ({
     const apiBaseUrl = baseUrl || BASE_URL;
 
     const response = await fetch(
-      `${apiBaseUrl}/public/organisations/${ORGANISATION_UUID}/workspaces/${WORKSPACE_UUID}/by-token`,
+      `${apiBaseUrl}/public/organisations/${ORGANISATION_UUID}/workspaces/${WORKSPACE_UUID}/submit-consent`,
       {
         method: "POST",
         headers: {

package/src/RedactoNoticeConsent/api/types.ts

@@ -153,7 +153,7 @@ export type FetchConsentContentParams = {
   baseUrl?: string;
   language?: string;
   specific_uuid?: string;
-  check_mode?: "all" | "required";
+  validate_against?: "all" | "required";
 };
 
 export type ConsentEventPayload = {

package/src/RedactoNoticeConsent/injectStyles.ts

@@ -95,6 +95,22 @@ export const injectCheckboxStyles = () => {
       outline: 2px solid #4f87ff !important;
       outline-offset: 2px !important;
     }
+
+    /* Text-to-Speech Highlight Styles */
+    .redacto-tts-highlight {
+      background-color: #FFF9C4 !important;
+      transition: background-color 0.3s ease !important;
+      border-radius: 2px !important;
+      padding: 2px 4px !important;
+    }
+
+    /* Word-by-word highlighting */
+    .redacto-tts-word-highlight {
+      background-color: #FFF9C4 !important;
+      transition: background-color 0.2s ease !important;
+      border-radius: 2px !important;
+      padding: 0 1px !important;
+    }
   `;
 
   document.head.appendChild(style);

package/src/RedactoNoticeConsent/types.ts

@@ -12,7 +12,7 @@ export type Props = Readonly<{
   onDecline: () => void;
   onError?: (error: Error) => void;
   applicationId?: string;
-  checkMode?: "all" | "required";
+  validateAgainst?: "all" | "required";
 }>;
 
 export type PurposeTranslations = {
@@ -43,3 +43,26 @@ 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;
+};