@redacto.io/consent-sdk-react 10.0.0-beta.8 → 10.0.0

package/src/RedactoNoticeAssisted/RedactoNoticeAssisted.tsx

@@ -1,2160 +0,0 @@
-import { useState, useEffect, useMemo, useRef, useCallback } from "react";
-import type {
-  CSSProperties,
-  ChangeEvent,
-  KeyboardEvent,
-  ClipboardEvent,
-} from "react";
-import { styles } from "./styles";
-import { injectAssistedStyles } from "./injectStyles";
-import { useMediaQuery } from "./useMediaQuery";
-import { ASSISTED_CONFIG, DPO_AUDIO_ELEMENT_MAP, EMAIL_REGEX } from "./constants";
-import type { RedactoNoticeAssistedProps } from "./types";
-import {
-  fetchAssistedNotice,
-  fetchAssistedTTSAudioUrls,
-  createOtp,
-  verifyOtp,
-  submitAssistedConsent,
-} from "./api";
-import type {
-  ActiveConfig,
-  Purpose,
-  TTSAudioUrlsResponse,
-} from "./api/types";
-import { ApiError } from "../shared/api-errors";
-import {
-  fetchNoticeConsentStatusForScope,
-  isNoticeFullyConsented,
-} from "../shared/notice-consent-status";
-import {
-  toNativeLabel,
-  toBcp47Code,
-} from "../RedactoNoticeConsent/language-codes";
-import { makeStaticT } from "./i18n";
-import type { StaticTranslate } from "./i18n";
-import logo from "./assets/redacto-logo.png";
-
-export type { RedactoNoticeAssistedProps } from "./types";
-
-// Single progressive screen: the notice is always mounted; `verify` reveals the
-// inline mobile/OTP panel below it. `otpSent` gates the OTP boxes within `verify`.
-type Step = "notice" | "verify";
-
-/** Resolve a (possibly translated) string for the current language. */
-type Translate = (key: string, fallback: string, itemId?: string) => string;
-
-type ResponsiveStyles = {
-  modal: CSSProperties;
-  title: CSSProperties;
-  subTitle: CSSProperties;
-  optionTitle: CSSProperties;
-  optionDescription: CSSProperties;
-  dataElementText: CSSProperties;
-  privacyText: CSSProperties;
-  topSection: CSSProperties;
-  topRight: CSSProperties;
-  logo: CSSProperties;
-  languageItem: CSSProperties;
-  middleSection: CSSProperties;
-  bottomSection: CSSProperties;
-  button: CSSProperties;
-};
-
-/**
- * PurposeItem — accordion row for a single consent purpose (API shape).
- *
- * Chevron that rotates on expand, translated purpose name + description, a large
- * checkbox, and an expandable list of enabled data elements each with its own small
- * checkbox + required asterisk.
- */
-const PurposeItem = ({
-  purpose,
-  selectedPurposes,
-  collapsedPurposes,
-  selectedDataElements,
-  onPurposeToggle,
-  onPurposeCollapse,
-  onDataElementToggle,
-  responsive,
-  t,
-  ts,
-  locked = false,
-}: {
-  purpose: Purpose;
-  selectedPurposes: Record<string, boolean>;
-  collapsedPurposes: Record<string, boolean>;
-  selectedDataElements: Record<string, boolean>;
-  onPurposeToggle: (uuid: string) => void;
-  onPurposeCollapse: (uuid: string) => void;
-  onDataElementToggle: (purposeUuid: string, elementUuid: string) => void;
-  responsive: ResponsiveStyles;
-  t: Translate;
-  ts: StaticTranslate;
-  /** When true (verification started) the selection checkboxes are read-only. */
-  locked?: boolean;
-}) => {
-  const isExpanded = !collapsedPurposes[purpose.uuid];
-  const name = t("purposes.name", purpose.name, purpose.uuid);
-  const description = t(
-    "purposes.description",
-    purpose.description,
-    purpose.uuid,
-  );
-  const dataElements = purpose.data_elements.filter(
-    (el) => el.enabled !== false,
-  );
-  return (
-    <div>
-      <div style={styles.optionItem}>
-        <div
-          style={styles.optionLeft}
-          onClick={() => onPurposeCollapse(purpose.uuid)}
-          role="button"
-          tabIndex={0}
-          aria-expanded={isExpanded}
-          aria-controls={`redacto-assisted-purpose-${purpose.uuid}`}
-          aria-label={
-            isExpanded
-              ? ts("collapseDetails", { name })
-              : ts("expandDetails", { name })
-          }
-          onKeyDown={(e: KeyboardEvent<HTMLDivElement>) => {
-            if (e.key === "Enter" || e.key === " ") {
-              e.preventDefault();
-              onPurposeCollapse(purpose.uuid);
-            }
-          }}
-        >
-          <div
-            style={{
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              marginLeft: "5px",
-            }}
-          >
-            <svg
-              width="7"
-              height="12"
-              viewBox="0 0 7 12"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-              stroke="#323B4B"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              style={{
-                transform: isExpanded ? "rotate(90deg)" : "rotate(0deg)",
-                transition: "transform 0.3s ease",
-              }}
-              aria-hidden="true"
-            >
-              <path d="M1 1L6 6L1 11" />
-            </svg>
-          </div>
-          <div style={styles.optionTextContainer}>
-            <h2
-              id={`purpose-name-${purpose.uuid}`}
-              style={{ ...styles.optionTitle, ...responsive.optionTitle }}
-            >
-              {name}
-            </h2>
-            {description && (
-              <h3
-                id={`purpose-description-${purpose.uuid}`}
-                style={{
-                  ...styles.optionDescription,
-                  ...responsive.optionDescription,
-                }}
-              >
-                {description}
-              </h3>
-            )}
-          </div>
-        </div>
-        <input
-          className="redacto-assisted-checkbox-large"
-          type="checkbox"
-          checked={selectedPurposes[purpose.uuid] || false}
-          disabled={locked}
-          onChange={() => onPurposeToggle(purpose.uuid)}
-          aria-label={ts("selectAllFor", { name })}
-        />
-      </div>
-      {isExpanded && dataElements.length > 0 && (
-        <div
-          id={`redacto-assisted-purpose-${purpose.uuid}`}
-          style={styles.dataElementsContainer}
-        >
-          {dataElements.map((dataElement) => {
-            const combinedId = `${purpose.uuid}-${dataElement.uuid}`;
-            const elementName = t(
-              "data_elements.name",
-              dataElement.name,
-              dataElement.uuid,
-            );
-            return (
-              <div key={combinedId} style={styles.dataElementItem}>
-                <span
-                  id={`data-element-${combinedId}`}
-                  style={{
-                    ...styles.dataElementText,
-                    ...responsive.dataElementText,
-                  }}
-                >
-                  {elementName}
-                  {dataElement.required && (
-                    <span
-                      style={{ color: "red", marginLeft: "4px" }}
-                      aria-label={ts("required")}
-                    >
-                      *
-                    </span>
-                  )}
-                </span>
-                <input
-                  className="redacto-assisted-checkbox-small"
-                  type="checkbox"
-                  checked={selectedDataElements[combinedId] || false}
-                  disabled={locked}
-                  onChange={() =>
-                    onDataElementToggle(purpose.uuid, dataElement.uuid)
-                  }
-                  aria-label={
-                    dataElement.required
-                      ? ts("selectElementRequired", { name: elementName })
-                      : ts("selectElement", { name: elementName })
-                  }
-                />
-              </div>
-            );
-          })}
-        </div>
-      )}
-    </div>
-  );
-};
-
-/**
- * RedactoNoticeAssisted — agent-assisted consent collection.
- *
- * Fetches a consent notice from the PUBLIC notice endpoint (org/workspace/notice
- * UUIDs + baseUrl come from props — no auth) and renders it exactly like
- * RedactoNoticeConsent: logo + title, language pill, privacy text, "Manage What You
- * Share" accordion purposes, DPO footer, themed Confirm/Decline.
- *
- * Single progressive screen: the notice stays mounted throughout. Clicking the
- * primary CTA reveals an inline mobile/OTP panel below the (now locked) notice and
- * advances the CTA — Confirm → Send OTP → Confirm OTP. On successful verify +
- * submit, `onComplete` fires immediately with no confirmation screen (mirroring
- * RedactoNoticeConsent's `onAccept`). Steps: `notice` → `verify` (with `otpSent`).
- */
-export const RedactoNoticeAssisted = ({
-  organisationUuid,
-  workspaceUuid,
-  noticeUuid,
-  baseUrl,
-  ledgerBaseUrl,
-  onDecline,
-  onComplete,
-}: RedactoNoticeAssistedProps) => {
-  const isMobile = useMediaQuery("(max-width: 768px)");
-
-  // Notice content fetched from the public API.
-  const [content, setContent] = useState<ActiveConfig | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const [fetchError, setFetchError] = useState<Error | null>(null);
-
-  const [step, setStep] = useState<Step>("notice");
-
-  // Purpose / data-element / accordion state (keyed by API uuids; filled after fetch).
-  const [selectedPurposes, setSelectedPurposes] = useState<
-    Record<string, boolean>
-  >({});
-  const [selectedDataElements, setSelectedDataElements] = useState<
-    Record<string, boolean>
-  >({});
-  const [collapsedPurposes, setCollapsedPurposes] = useState<
-    Record<string, boolean>
-  >({});
-
-  // Header / language controls.
-  const [isLanguageDropdownOpen, setIsLanguageDropdownOpen] = useState(false);
-  const [selectedLanguage, setSelectedLanguage] = useState("English");
-  const languageContainerRef = useRef<HTMLDivElement>(null);
-
-  // Audio narration (talkback): per-element TTS clips played in render order, with
-  // the playing element highlighted + scrolled into view + auto-expanded. Mirrors
-  // RedactoNoticeConsent; narration is notice-only (stops on entering verify).
-  const [ttsAudioUrls, setTtsAudioUrls] = useState<
-    TTSAudioUrlsResponse["detail"] | null
-  >(null);
-  const [isTTSAvailable, setIsTTSAvailable] = useState(false);
-  const [isPlaying, setIsPlaying] = useState(false);
-  const [isPaused, setIsPaused] = useState(false);
-  const [currentAudioIndex, setCurrentAudioIndex] = useState(0);
-  const [highlightedElementId, setHighlightedElementId] = useState<
-    string | null
-  >(null);
-  const currentAudioRef = useRef<HTMLAudioElement | null>(null);
-
-  // How the customer verifies — by mobile (SMS) or by email. Mobile is the
-  // default so the existing SMS flow is unchanged unless they pick Email.
-  const [verifyMethod, setVerifyMethod] = useState<"mobile" | "email">("mobile");
-  // Mobile number the OTP is sent to (entered in the inline panel, starts empty).
-  const [mobile, setMobile] = useState("");
-  const mobileInputRef = useRef<HTMLInputElement | null>(null);
-  // Email address the OTP is sent to (used when verifyMethod === "email").
-  const [email, setEmail] = useState("");
-  const emailInputRef = useRef<HTMLInputElement | null>(null);
-  // Whether "Send OTP" has been pressed — gates the OTP-entry UI in the panel.
-  const [otpSent, setOtpSent] = useState(false);
-
-  // Refs for the progressive-reveal auto-scroll: the verify panel (revealed on
-  // Confirm) and the OTP boxes section (revealed on Send OTP).
-  const verifyBlockRef = useRef<HTMLDivElement | null>(null);
-  const otpSectionRef = useRef<HTMLDivElement | null>(null);
-
-  // OTP entry state.
-  const [otpDigits, setOtpDigits] = useState<string[]>(() =>
-    Array.from({ length: ASSISTED_CONFIG.otpLength }, () => ""),
-  );
-  const otpInputRefs = useRef<Array<HTMLInputElement | null>>([]);
-  const [resendCountdown, setResendCountdown] = useState(0);
-
-  // OTP uuid from create-OTP (needed to verify-OTP).
-  const [otpUuid, setOtpUuid] = useState("");
-  // In-flight + error state for the create / verify+submit network calls.
-  const [isSendingOtp, setIsSendingOtp] = useState(false);
-  const [isVerifying, setIsVerifying] = useState(false);
-  const [createError, setCreateError] = useState<string | null>(null);
-  const [otpError, setOtpError] = useState<string | null>(null);
-
-  // Inject checkbox / OTP / animation CSS once on mount.
-  useEffect(() => {
-    injectAssistedStyles();
-  }, []);
-
-  // Fetch the notice from the public endpoint.
-  useEffect(() => {
-    const controller = new AbortController();
-    setIsLoading(true);
-    setFetchError(null);
-
-    fetchAssistedNotice({
-      organisationUuid,
-      workspaceUuid,
-      noticeUuid,
-      baseUrl,
-      signal: controller.signal,
-    })
-      .then((data) => {
-        const activeConfig = data.detail.active_config;
-        setContent(activeConfig);
-
-        // Default language → English label when the API reports "en".
-        const dl = activeConfig.default_language;
-        setSelectedLanguage(
-          dl === "en" || dl === "EN" ? "English" : dl || "English",
-        );
-
-        // Seed selection / collapsed state from the purposes.
-        const purposeState: Record<string, boolean> = {};
-        const elementState: Record<string, boolean> = {};
-        const collapsedState: Record<string, boolean> = {};
-        activeConfig.purposes.forEach((p) => {
-          purposeState[p.uuid] = false;
-          collapsedState[p.uuid] = true;
-          p.data_elements.forEach((el) => {
-            elementState[`${p.uuid}-${el.uuid}`] = false;
-          });
-        });
-        setSelectedPurposes(purposeState);
-        setSelectedDataElements(elementState);
-        setCollapsedPurposes(collapsedState);
-        setIsLoading(false);
-      })
-      .catch((err: unknown) => {
-        if (err instanceof Error && err.name === "AbortError") return;
-        setFetchError(err instanceof Error ? err : new Error(String(err)));
-        setIsLoading(false);
-      });
-
-    return () => controller.abort();
-  }, [organisationUuid, workspaceUuid, noticeUuid, baseUrl]);
-
-  // Resend countdown ticker (runs only while waiting on the OTP screen).
-  useEffect(() => {
-    if (resendCountdown <= 0) return;
-    const intervalId = window.setInterval(() => {
-      setResendCountdown((prev) => (prev <= 1 ? 0 : prev - 1));
-    }, 1000);
-    return () => window.clearInterval(intervalId);
-  }, [resendCountdown]);
-
-  // Progressive reveal: when the verify panel mounts, scroll it into view so the
-  // notice "scrolls up a little" and the new mobile field is visible.
-  useEffect(() => {
-    if (step !== "verify") return;
-    const id = window.setTimeout(
-      () => scrollIntoViewSoft(verifyBlockRef.current),
-      60,
-    );
-    return () => window.clearTimeout(id);
-  }, [step]);
-
-  // When the OTP boxes appear (after Send OTP), nudge them into view too.
-  useEffect(() => {
-    if (!otpSent) return;
-    const id = window.setTimeout(
-      () => scrollIntoViewSoft(otpSectionRef.current),
-      60,
-    );
-    return () => window.clearTimeout(id);
-  }, [otpSent]);
-
-  // Close the language dropdown on outside click.
-  useEffect(() => {
-    if (!isLanguageDropdownOpen) return;
-    const handleClickOutside = (e: MouseEvent) => {
-      if (
-        languageContainerRef.current &&
-        !languageContainerRef.current.contains(e.target as Node)
-      ) {
-        setIsLanguageDropdownOpen(false);
-      }
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, [isLanguageDropdownOpen]);
-
-  const otpValue = otpDigits.join("");
-  const isOtpComplete = otpValue.length === ASSISTED_CONFIG.otpLength;
-  const isMobileValid = mobile.replace(/\D/g, "").length >= 10;
-  const isEmailValid = EMAIL_REGEX.test(email.trim());
-  // Whichever contact the chosen method needs must be valid to send the OTP.
-  const isContactValid = verifyMethod === "email" ? isEmailValid : isMobileValid;
-
-  // Gate the notice-step Confirm CTA: every required data element across all
-  // purposes must be selected before consent can proceed (mirrors
-  // RedactoNoticeConsent's areAllRequiredElementsChecked).
-  const areAllRequiredElementsChecked = useMemo(() => {
-    if (!content) return false;
-    return content.purposes.every((purpose) => {
-      const requiredElements = purpose.data_elements.filter(
-        (el) => el.required,
-      );
-      return requiredElements.every(
-        (el) => selectedDataElements[`${purpose.uuid}-${el.uuid}`],
-      );
-    });
-  }, [content, selectedDataElements]);
-
-  // ── Translations ──────────────────────────────────────────────────────────
-  const normalizedDefaultLang = useMemo(() => {
-    const dl = content?.default_language;
-    if (!dl) return "English";
-    return dl === "en" || dl === "EN" ? "English" : dl;
-  }, [content]);
-
-  // The top-level active_config fields hold the BASE (English) copy; every other
-  // language — including a non-English `default_language` like Hindi — is resolved
-  // from `supported_languages_and_translations`. So only English maps to the base
-  // content (mirrors RedactoNoticeConsent's isDefaultLanguage).
-  const isDefaultLanguage = useCallback(
-    (lang: string) => lang === "English" || lang === "en" || lang === "EN",
-    [],
-  );
-
-  // Static (non-API) UI strings follow the same in-notice language picker.
-  const ts = useMemo<StaticTranslate>(
-    () => makeStaticT(toBcp47Code(selectedLanguage)),
-    [selectedLanguage],
-  );
-
-  const getTranslatedText = useCallback<Translate>(
-    (key, fallback, itemId) => {
-      if (!content) return fallback;
-      if (isDefaultLanguage(selectedLanguage)) {
-        // Base purpose/element text is passed as the fallback for the default lang.
-        if (itemId) return fallback;
-        const v = (content as Record<string, unknown>)[key];
-        return typeof v === "string" && v ? v : fallback;
-      }
-      const map =
-        content.supported_languages_and_translations?.[selectedLanguage];
-      if (!map) return fallback;
-      if (itemId) {
-        if (key === "purposes.name" || key === "purposes.description") {
-          const p = map.purposes?.[itemId];
-          if (!p) return fallback;
-          if (typeof p === "string") {
-            return key === "purposes.name" ? p : fallback;
-          }
-          return key === "purposes.name"
-            ? p.name || fallback
-            : p.description || fallback;
-        }
-        if (key.startsWith("data_elements.")) {
-          return map.data_elements?.[itemId] || fallback;
-        }
-        return fallback;
-      }
-      const v = (map as Record<string, unknown>)[key];
-      return typeof v === "string" && v ? v : fallback;
-    },
-    [content, selectedLanguage, isDefaultLanguage],
-  );
-
-  const getTranslatedDpoText = useCallback(
-    (key: string, fallback: string): string => {
-      if (!content?.dpo_info) return fallback;
-      const base =
-        (content.dpo_info as Record<string, string>)[key] || fallback;
-      if (isDefaultLanguage(selectedLanguage)) return base;
-      const map =
-        content.supported_languages_and_translations?.[selectedLanguage];
-      const translated = (
-        map?.dpo_info as Record<string, string> | undefined
-      )?.[key];
-      return translated || base;
-    },
-    [content, selectedLanguage, isDefaultLanguage],
-  );
-
-  const availableLanguages = useMemo(() => {
-    if (!content) return [selectedLanguage];
-    const pinned = ["English"];
-    if (normalizedDefaultLang && normalizedDefaultLang !== "English") {
-      pinned.push(normalizedDefaultLang);
-    }
-    const rest = content.supported_languages_and_translations
-      ? Object.keys(content.supported_languages_and_translations)
-          .filter((lang) => !pinned.includes(lang))
-          .sort((a, b) => a.localeCompare(b, "en"))
-      : [];
-    return [...pinned, ...rest];
-  }, [content, normalizedDefaultLang, selectedLanguage]);
-
-  // ── Theming (from the notice) ───────────────────────────────────────────────
-  const primaryColor = content?.primary_color || "#4f87ff";
-  const secondaryColor = content?.secondary_color || "#4f87ff";
-  // Soft ring + light fill derived from the brand colour. Exposed to the injected
-  // CSS (input/box focus rings) as CSS variables on the modal root.
-  const accentSoft =
-    hexToRgba(primaryColor, 0.18) || "rgba(79, 135, 255, 0.18)";
-  const accentTint = hexToRgba(primaryColor, 0.08) || "#F5F8FF";
-  const accentVars = {
-    "--ra-accent": primaryColor,
-    "--ra-accent-soft": accentSoft,
-  } as CSSProperties;
-  const fontFamily = content?.font_preference || undefined;
-  const logoUrl = content?.logo_url || logo;
-  const linkStyle: CSSProperties = { ...styles.link, color: secondaryColor };
-
-  // Responsive overrides, mirroring RedactoNoticeConsent's useMemo pattern.
-  const responsive = useMemo<ResponsiveStyles>(
-    () => ({
-      modal: { width: isMobile ? "90%" : "700px" },
-      title: { fontSize: isMobile ? "16px" : "18px" },
-      subTitle: { fontSize: isMobile ? "14px" : "16px" },
-      optionTitle: { fontSize: isMobile ? "14px" : "16px" },
-      optionDescription: { fontSize: isMobile ? "12px" : "14px" },
-      dataElementText: { fontSize: isMobile ? "12px" : "14px" },
-      privacyText: { fontSize: isMobile ? "14px" : "16px" },
-      topSection: {
-        flexDirection: isMobile ? "column" : "row",
-        alignItems: isMobile ? "stretch" : "flex-start",
-        gap: isMobile ? "12px" : "10px",
-      },
-      topRight: {
-        fontSize: isMobile ? "11px" : "12px",
-        padding: isMobile ? "3px 6px" : "3px 9px",
-      },
-      logo: {
-        maxWidth: isMobile ? "96px" : "140px",
-        maxHeight: isMobile ? "28px" : "32px",
-      },
-      languageItem: {
-        fontSize: isMobile ? "11px" : "12px",
-        padding: isMobile ? "6px 10px" : "8px 12px",
-      },
-      middleSection: { paddingRight: isMobile ? "10px" : "15px" },
-      bottomSection: {
-        flexDirection: isMobile ? "column" : "row",
-        gap: isMobile ? "12px" : "29px",
-      },
-      button: {
-        fontSize: isMobile ? "14px" : "16px",
-        padding: isMobile ? "10px 20px" : "9px 45px",
-      },
-    }),
-    [isMobile],
-  );
-
-  const togglePurpose = useCallback(
-    (uuid: string) => {
-      setSelectedPurposes((prev) => {
-        const next = !prev[uuid];
-        // Mirror the toggle onto this purpose's data elements.
-        setSelectedDataElements((elements) => {
-          const updated = { ...elements };
-          const purpose = content?.purposes.find((p) => p.uuid === uuid);
-          purpose?.data_elements.forEach((el) => {
-            updated[`${uuid}-${el.uuid}`] = next;
-          });
-          return updated;
-        });
-        return { ...prev, [uuid]: next };
-      });
-    },
-    [content],
-  );
-
-  const togglePurposeCollapse = useCallback((uuid: string) => {
-    setCollapsedPurposes((prev) => ({ ...prev, [uuid]: !prev[uuid] }));
-  }, []);
-
-  const handleDataElementToggle = useCallback(
-    (purposeUuid: string, elementUuid: string) => {
-      if (!content) return;
-      const combinedId = `${purposeUuid}-${elementUuid}`;
-      setSelectedDataElements((prev) => {
-        const next = { ...prev, [combinedId]: !prev[combinedId] };
-        // Recompute the parent purpose from the new element state: checked once
-        // all required elements are selected (or any element, when none are
-        // required). Mirrors RedactoNoticeConsent's two-way checkbox binding.
-        const purpose = content.purposes.find((p) => p.uuid === purposeUuid);
-        if (purpose) {
-          const requiredElements = purpose.data_elements.filter(
-            (el) => el.required,
-          );
-          const shouldCheckPurpose =
-            requiredElements.length > 0
-              ? requiredElements.every(
-                  (el) => next[`${purposeUuid}-${el.uuid}`],
-                )
-              : purpose.data_elements.some(
-                  (el) => next[`${purposeUuid}-${el.uuid}`],
-                );
-          setSelectedPurposes((prevPurposes) => ({
-            ...prevPurposes,
-            [purposeUuid]: shouldCheckPurpose,
-          }));
-        }
-        return next;
-      });
-    },
-    [content],
-  );
-
-  const toggleLanguageDropdown = useCallback(() => {
-    setIsLanguageDropdownOpen((prev) => !prev);
-  }, []);
-
-  const handleLanguageSelect = useCallback((lang: string) => {
-    setSelectedLanguage(lang);
-    setIsLanguageDropdownOpen(false);
-  }, []);
-
-  // ── Audio narration (talkback) ───────────────────────────────────────────────
-  // Build the ordered list of clip URLs to play, matching the on-screen text order.
-  // (Mirrors RedactoNoticeConsent's audioSequence, but iterates content.purposes
-  // directly — the assisted flow has no already-consented categorisation.)
-  const audioSequence = useMemo(() => {
-    if (!ttsAudioUrls || !content) return [];
-
-    const sequence: string[] = [];
-
-    if (ttsAudioUrls.notice_banner_heading_audio_url) {
-      sequence.push(ttsAudioUrls.notice_banner_heading_audio_url);
-    }
-    if (ttsAudioUrls.notice_text_audio_url) {
-      sequence.push(ttsAudioUrls.notice_text_audio_url);
-    }
-    if (ttsAudioUrls.privacy_policy_prefix_text_audio_url) {
-      sequence.push(ttsAudioUrls.privacy_policy_prefix_text_audio_url);
-    }
-    if (ttsAudioUrls.privacy_policy_anchor_text_audio_url) {
-      sequence.push(ttsAudioUrls.privacy_policy_anchor_text_audio_url);
-    }
-    if (ttsAudioUrls.purpose_section_heading_audio_url) {
-      sequence.push(ttsAudioUrls.purpose_section_heading_audio_url);
-    }
-
-    (content.purposes || []).forEach((purpose) => {
-      if (ttsAudioUrls.purposes_audio[purpose.uuid]?.name_audio_url) {
-        sequence.push(ttsAudioUrls.purposes_audio[purpose.uuid].name_audio_url);
-      }
-      if (ttsAudioUrls.purposes_audio[purpose.uuid]?.description_audio_url) {
-        sequence.push(
-          ttsAudioUrls.purposes_audio[purpose.uuid].description_audio_url,
-        );
-      }
-      if (purpose.data_elements && purpose.data_elements.length > 0) {
-        purpose.data_elements.forEach((dataElement) => {
-          if (
-            ttsAudioUrls.data_elements_audio[dataElement.uuid]?.name_audio_url
-          ) {
-            sequence.push(
-              ttsAudioUrls.data_elements_audio[dataElement.uuid].name_audio_url,
-            );
-          }
-        });
-      }
-    });
-
-    if (content.additional_text && ttsAudioUrls.additional_text_audio_url) {
-      sequence.push(ttsAudioUrls.additional_text_audio_url);
-    }
-    if (
-      content.privacy_center_url &&
-      ttsAudioUrls.privacy_center_anchor_text_audio_url
-    ) {
-      sequence.push(ttsAudioUrls.privacy_center_anchor_text_audio_url);
-    }
-
-    if (content.dpo_info && ttsAudioUrls.dpo_info_audio) {
-      const dpoAudio = ttsAudioUrls.dpo_info_audio;
-      DPO_AUDIO_ELEMENT_MAP.forEach(({ audioKey }) => {
-        if (dpoAudio[audioKey]) {
-          sequence.push(dpoAudio[audioKey] as string);
-        }
-      });
-    }
-
-    if (ttsAudioUrls.confirm_button_text_audio_url) {
-      sequence.push(ttsAudioUrls.confirm_button_text_audio_url);
-    }
-    if (ttsAudioUrls.decline_button_text_audio_url) {
-      sequence.push(ttsAudioUrls.decline_button_text_audio_url);
-    }
-
-    return sequence;
-  }, [ttsAudioUrls, content]);
-
-  // DOM element IDs in lock-step with audioSequence, so the playing clip can
-  // highlight + scroll to the matching element.
-  const elementIdSequence = useMemo(() => {
-    if (!ttsAudioUrls || !content) return [];
-
-    const elementIds: (string | null)[] = [];
-
-    if (ttsAudioUrls.notice_banner_heading_audio_url) {
-      elementIds.push("privacy-notice-title");
-    }
-    if (ttsAudioUrls.notice_text_audio_url) {
-      elementIds.push("privacy-notice-text");
-    }
-    if (ttsAudioUrls.privacy_policy_prefix_text_audio_url) {
-      elementIds.push("privacy-policy-text");
-    }
-    if (ttsAudioUrls.privacy_policy_anchor_text_audio_url) {
-      elementIds.push("privacy-policy-link");
-    }
-    if (ttsAudioUrls.purpose_section_heading_audio_url) {
-      elementIds.push("purpose-section-heading");
-    }
-
-    (content.purposes || []).forEach((purpose) => {
-      if (ttsAudioUrls.purposes_audio[purpose.uuid]?.name_audio_url) {
-        elementIds.push(`purpose-name-${purpose.uuid}`);
-      }
-      if (ttsAudioUrls.purposes_audio[purpose.uuid]?.description_audio_url) {
-        elementIds.push(`purpose-description-${purpose.uuid}`);
-      }
-      if (purpose.data_elements && purpose.data_elements.length > 0) {
-        purpose.data_elements.forEach((dataElement) => {
-          if (
-            ttsAudioUrls.data_elements_audio[dataElement.uuid]?.name_audio_url
-          ) {
-            elementIds.push(`data-element-${purpose.uuid}-${dataElement.uuid}`);
-          }
-        });
-      }
-    });
-
-    if (content.additional_text && ttsAudioUrls.additional_text_audio_url) {
-      elementIds.push("additional-text");
-    }
-    if (
-      content.privacy_center_url &&
-      ttsAudioUrls.privacy_center_anchor_text_audio_url
-    ) {
-      elementIds.push("privacy-center-link");
-    }
-
-    if (content.dpo_info && ttsAudioUrls.dpo_info_audio) {
-      const dpoAudio = ttsAudioUrls.dpo_info_audio;
-      DPO_AUDIO_ELEMENT_MAP.forEach(({ audioKey, elementId }) => {
-        if (dpoAudio[audioKey]) {
-          elementIds.push(elementId);
-        }
-      });
-    }
-
-    if (ttsAudioUrls.confirm_button_text_audio_url) {
-      elementIds.push("confirm-button-text");
-    }
-    if (ttsAudioUrls.decline_button_text_audio_url) {
-      elementIds.push("decline-button-text");
-    }
-
-    return elementIds;
-  }, [ttsAudioUrls, content]);
-
-  const stopAudio = useCallback(() => {
-    if (currentAudioRef.current) {
-      currentAudioRef.current.pause();
-      currentAudioRef.current.currentTime = 0;
-      currentAudioRef.current = null;
-    }
-    setIsPlaying(false);
-    setIsPaused(false);
-    setCurrentAudioIndex(0);
-    setHighlightedElementId(null);
-  }, []);
-
-  const playNextAudio = useCallback(
-    (index: number) => {
-      if (index >= audioSequence.length) {
-        stopAudio();
-        return;
-      }
-
-      if (currentAudioRef.current) {
-        currentAudioRef.current.pause();
-        currentAudioRef.current = null;
-      }
-
-      const audio = new Audio(audioSequence[index]);
-      currentAudioRef.current = audio;
-      setCurrentAudioIndex(index);
-      setIsPlaying(true);
-      setIsPaused(false);
-
-      const elementId = elementIdSequence[index];
-      if (elementId) {
-        setHighlightedElementId(elementId);
-      }
-
-      audio.onended = () => {
-        playNextAudio(index + 1);
-      };
-      audio.onerror = () => {
-        // eslint-disable-next-line no-console
-        console.warn(`Failed to load audio at index ${index}`);
-        playNextAudio(index + 1);
-      };
-      audio.play().catch((error) => {
-        // eslint-disable-next-line no-console
-        console.warn(`Failed to play audio at index ${index}:`, error);
-        setIsPlaying(false);
-      });
-    },
-    [audioSequence, elementIdSequence, stopAudio],
-  );
-
-  const playAudio = useCallback(() => {
-    if (audioSequence.length === 0) return;
-
-    if (isPaused && currentAudioRef.current) {
-      currentAudioRef.current
-        .play()
-        .then(() => {
-          setIsPlaying(true);
-          setIsPaused(false);
-        })
-        .catch((error) => {
-          // eslint-disable-next-line no-console
-          console.warn("Failed to resume audio:", error);
-        });
-    } else {
-      const startIndex = isPlaying ? currentAudioIndex : 0;
-      playNextAudio(startIndex);
-    }
-  }, [audioSequence, isPaused, isPlaying, currentAudioIndex, playNextAudio]);
-
-  const pauseAudio = useCallback(() => {
-    if (currentAudioRef.current && isPlaying) {
-      currentAudioRef.current.pause();
-      setIsPlaying(false);
-      setIsPaused(true);
-    }
-  }, [isPlaying]);
-
-  const toggleAudio = useCallback(() => {
-    if (isPlaying) {
-      pauseAudio();
-    } else {
-      playAudio();
-    }
-  }, [isPlaying, playAudio, pauseAudio]);
-
-  // Fetch the TTS clips when the notice loads / language changes. Public endpoint:
-  // org/workspace/notice from props, language is the English name in selectedLanguage.
-  useEffect(() => {
-    setIsTTSAvailable(false);
-    setTtsAudioUrls(null);
-    stopAudio();
-
-    if (!content || !content.notice_uuid) return;
-
-    const ttsAbortController = new AbortController();
-    fetchAssistedTTSAudioUrls({
-      organisationUuid,
-      workspaceUuid,
-      noticeUuid: content.notice_uuid,
-      language: selectedLanguage,
-      baseUrl,
-      signal: ttsAbortController.signal,
-    })
-      .then((response) => {
-        setTtsAudioUrls(response.detail);
-        setIsTTSAvailable(true);
-      })
-      .catch((error: unknown) => {
-        // Fail quiet — a missing narration must never break the notice.
-        if (error instanceof Error && error.name !== "AbortError") {
-          setIsTTSAvailable(false);
-          setTtsAudioUrls(null);
-        }
-      });
-
-    return () => ttsAbortController.abort();
-    // stopAudio is stable (no deps); selectedLanguage is the audio path segment.
-  }, [
-    content,
-    selectedLanguage,
-    organisationUuid,
-    workspaceUuid,
-    baseUrl,
-    stopAudio,
-  ]);
-
-  // Auto-expand a collapsed purpose when its clip starts (so the highlight is visible).
-  useEffect(() => {
-    if (!isPlaying || !content || audioSequence.length === 0) return;
-
-    const currentIndex = currentAudioIndex;
-    // Skip the header clips (banner, notice text, privacy-policy x2, section heading).
-    const headerAudioCount = 5;
-    if (currentIndex < headerAudioCount) return;
-
-    let audioOffset = headerAudioCount;
-    for (const purpose of content.purposes || []) {
-      const dataElementsAudioCount = purpose.data_elements?.length || 0;
-      const totalPurposeAudioCount = 2 + dataElementsAudioCount;
-
-      if (
-        currentIndex >= audioOffset &&
-        currentIndex < audioOffset + totalPurposeAudioCount
-      ) {
-        if (collapsedPurposes[purpose.uuid]) {
-          setCollapsedPurposes((prev) => ({ ...prev, [purpose.uuid]: false }));
-        }
-        break;
-      }
-      audioOffset += totalPurposeAudioCount;
-    }
-  }, [isPlaying, currentAudioIndex, audioSequence, content, collapsedPurposes]);
-
-  // Highlight + scroll the element matching the currently-playing clip.
-  useEffect(() => {
-    const removeAllHighlights = () => {
-      document.querySelectorAll(".redacto-tts-highlight").forEach((el) => {
-        el.classList.remove("redacto-tts-highlight");
-      });
-    };
-
-    if (!highlightedElementId || !isPlaying) {
-      removeAllHighlights();
-      return;
-    }
-
-    removeAllHighlights();
-
-    const highlightTimeout = window.setTimeout(() => {
-      const element = document.getElementById(highlightedElementId);
-      if (!element) return;
-      element.classList.add("redacto-tts-highlight");
-      void element.offsetHeight;
-
-      const rect = element.getBoundingClientRect();
-      const isVisible =
-        rect.top >= 0 &&
-        rect.left >= 0 &&
-        rect.bottom <=
-          (window.innerHeight || document.documentElement.clientHeight) &&
-        rect.right <=
-          (window.innerWidth || document.documentElement.clientWidth);
-      if (!isVisible) {
-        element.scrollIntoView({
-          behavior: "smooth",
-          block: "center",
-          inline: "nearest",
-        });
-      }
-    }, 50);
-
-    return () => {
-      window.clearTimeout(highlightTimeout);
-      removeAllHighlights();
-    };
-  }, [highlightedElementId, isPlaying]);
-
-  // Confirm reveals the inline verify panel (mobile-entry sub-state) below the
-  // now-locked notice. The notice stays mounted; only the panel is appended.
-  const handleConfirmStep = useCallback(() => {
-    // Narration is notice-only — stop any playback before the verify panel opens.
-    stopAudio();
-    setStep("verify");
-    setOtpSent(false);
-    window.setTimeout(() => {
-      (verifyMethod === "email" ? emailInputRef : mobileInputRef).current?.focus();
-    }, 80);
-  }, [verifyMethod, stopAudio]);
-
-  // "Edit selections" reopens the notice for editing: collapse the verify panel
-  // back to the notice step and discard any in-progress OTP session.
-  const handleEditSelections = useCallback(() => {
-    setStep("notice");
-    setOtpSent(false);
-    setOtpUuid("");
-    setMobile("");
-    setEmail("");
-    setOtpDigits(Array.from({ length: ASSISTED_CONFIG.otpLength }, () => ""));
-    setResendCountdown(0);
-    setCreateError(null);
-    setOtpError(null);
-  }, []);
-
-  // The OTP recipient + channel for the create-OTP call. Email sends the address
-  // as-is over the "email" channel; mobile sends E.164 (dial code + digits) over
-  // "sms".
-  const otpRecipient =
-    verifyMethod === "email"
-      ? email.trim()
-      : `${ASSISTED_CONFIG.dialCode}${mobile}`;
-  const otpChannel =
-    verifyMethod === "email"
-      ? ASSISTED_CONFIG.emailChannel
-      : ASSISTED_CONFIG.channel;
-
-  // Shared create-OTP call, used by both "Get OTP" and "Resend OTP". On success it
-  // reveals/keeps the OTP-entry UI on the same screen and (re)starts the countdown.
-  const sendOtp = useCallback(async () => {
-    setCreateError(null);
-    setIsSendingOtp(true);
-    try {
-      const detail = await createOtp({
-        organisationUuid,
-        workspaceUuid,
-        to: otpRecipient,
-        channel: otpChannel,
-        baseUrl,
-      });
-      setOtpUuid(detail.uuid);
-      setOtpDigits(Array.from({ length: ASSISTED_CONFIG.otpLength }, () => ""));
-      setOtpError(null);
-      setResendCountdown(ASSISTED_CONFIG.resendSeconds);
-      setOtpSent(true);
-      window.setTimeout(() => otpInputRefs.current[0]?.focus(), 0);
-    } catch {
-      // The send endpoint returns server copy in English; show a localized,
-      // generic failure so the assisted flow stays in the picked language.
-      setCreateError(ts("otpSendFailed"));
-    } finally {
-      setIsSendingOtp(false);
-    }
-  }, [organisationUuid, workspaceUuid, otpRecipient, otpChannel, baseUrl, ts]);
-
-  const handleGetOtp = useCallback(() => {
-    if (!isContactValid || isSendingOtp) return;
-    void sendOtp();
-  }, [isContactValid, isSendingOtp, sendOtp]);
-
-  // Switch verification method. Disabled once a code is out (otpSent / sending),
-  // so this only fires before "Send OTP"; clears any prior send error and focuses
-  // the newly chosen field.
-  const handleSelectMethod = useCallback(
-    (method: "mobile" | "email") => {
-      if (otpSent || isSendingOtp) return;
-      setVerifyMethod(method);
-      setCreateError(null);
-      window.setTimeout(() => {
-        (method === "email" ? emailInputRef : mobileInputRef).current?.focus();
-      }, 0);
-    },
-    [otpSent, isSendingOtp],
-  );
-
-  const handleResend = useCallback(() => {
-    if (isSendingOtp) return;
-    void sendOtp();
-  }, [isSendingOtp, sendOtp]);
-
-  // "Change Mobile/Email" re-enables the active contact field, discarding the OTP
-  // session and re-enabling the method toggle.
-  const handleChangeContact = useCallback(() => {
-    setOtpSent(false);
-    setOtpUuid("");
-    setOtpDigits(Array.from({ length: ASSISTED_CONFIG.otpLength }, () => ""));
-    setResendCountdown(0);
-    setCreateError(null);
-    setOtpError(null);
-    window.setTimeout(() => {
-      (verifyMethod === "email" ? emailInputRef : mobileInputRef).current?.focus();
-    }, 0);
-  }, [verifyMethod]);
-
-  const handleOtpChange = useCallback((index: number, raw: string) => {
-    // Keep only the last typed digit (handles paste of a single char too).
-    const digit = raw.replace(/\D/g, "").slice(-1);
-    setOtpDigits((prev) => {
-      const next = [...prev];
-      next[index] = digit;
-      return next;
-    });
-    if (digit && index < ASSISTED_CONFIG.otpLength - 1) {
-      otpInputRefs.current[index + 1]?.focus();
-    }
-  }, []);
-
-  const handleOtpKeyDown = useCallback(
-    (index: number, e: KeyboardEvent<HTMLInputElement>) => {
-      if (e.key === "Backspace" && !otpDigits[index] && index > 0) {
-        otpInputRefs.current[index - 1]?.focus();
-      }
-    },
-    [otpDigits],
-  );
-
-  const handleOtpPaste = useCallback((e: ClipboardEvent<HTMLInputElement>) => {
-    const pasted = e.clipboardData
-      .getData("text")
-      .replace(/\D/g, "")
-      .slice(0, ASSISTED_CONFIG.otpLength);
-    if (!pasted) return;
-    e.preventDefault();
-    setOtpDigits(() =>
-      Array.from(
-        { length: ASSISTED_CONFIG.otpLength },
-        (_, i) => pasted[i] ?? "",
-      ),
-    );
-    const focusIndex = Math.min(pasted.length, ASSISTED_CONFIG.otpLength - 1);
-    otpInputRefs.current[focusIndex]?.focus();
-  }, []);
-
-  // Reset back to the start so the flow can be replayed without remounting.
-  const resetFlow = useCallback(() => {
-    setStep("notice");
-    setSelectedPurposes((prev) =>
-      Object.fromEntries(Object.keys(prev).map((k) => [k, false])),
-    );
-    setVerifyMethod("mobile");
-    setMobile("");
-    setEmail("");
-    setOtpSent(false);
-    setOtpUuid("");
-    setOtpDigits(Array.from({ length: ASSISTED_CONFIG.otpLength }, () => ""));
-    setResendCountdown(0);
-    setCreateError(null);
-    setOtpError(null);
-  }, []);
-
-  // Verification + submit succeeded: hand control to the host immediately — no
-  // confirmation screen (mirrors RedactoNoticeConsent calling onAccept right
-  // after a successful submit). Without onComplete, fall back to log + reset.
-  const handleSuccess = useCallback(() => {
-    if (onComplete) {
-      onComplete();
-      return;
-    }
-    // eslint-disable-next-line no-console
-    console.log("[RedactoNoticeAssisted] consent recorded");
-    resetFlow();
-  }, [onComplete, resetFlow]);
-
-  // Verify OTP → on success, submit the consent with the returned access_token,
-  // then hand off via onComplete. Both steps run on one button press.
-  const handleConfirm = useCallback(async () => {
-    if (!isOtpComplete || isVerifying || !content) return;
-    setOtpError(null);
-    setIsVerifying(true);
-    try {
-      // Verify is its own step: the endpoint returns English copy with no
-      // error_code, so localize by HTTP status + the `should_request_new` flag
-      // and stop here on failure (keeps verify errors distinct from submit ones).
-      let verifyDetail;
-      try {
-        verifyDetail = await verifyOtp({
-          organisationUuid,
-          workspaceUuid,
-          uuid: otpUuid,
-          otp: otpValue,
-          purpose: ASSISTED_CONFIG.otpPurpose,
-          baseUrl,
-        });
-      } catch (err) {
-        if (err instanceof ApiError && err.status === 404) {
-          setOtpError(ts("otpNotFound"));
-        } else if (err instanceof ApiError && err.status === 400) {
-          setOtpError(
-            err.shouldRequestNew ? ts("otpExpired") : ts("otpIncorrect"),
-          );
-        } else {
-          setOtpError(ts("otpVerifyFailed"));
-        }
-        return;
-      }
-      const token = verifyDetail.access_token;
-
-      // Post-cutover, consent records live in the Go ledger, so Python's 409
-      // CONSENT_ALREADY_PROVIDED can no longer be relied on. When a ledger is
-      // configured, ask it directly (org/workspace from props, OTP token as
-      // bearer) whether this principal has already fully consented and, if so,
-      // hand off without writing a duplicate consent event. Any failure returns
-      // null and falls through to the normal submit (graceful degradation).
-      if (ledgerBaseUrl) {
-        const ledgerStatus = await fetchNoticeConsentStatusForScope({
-          accessToken: token,
-          ledgerBaseUrl,
-          organisationUuid,
-          workspaceUuid,
-          noticeUuid: content.notice_uuid,
-        });
-        if (ledgerStatus && isNoticeFullyConsented(ledgerStatus)) {
-          handleSuccess();
-          return;
-        }
-      }
-
-      // Map current selection onto the submit payload shape (required → selected).
-      const submitPurposes = content.purposes.map((purpose) => ({
-        ...purpose,
-        selected: selectedPurposes[purpose.uuid] || false,
-        data_elements: purpose.data_elements.map((element) => ({
-          ...element,
-          selected: element.required
-            ? true
-            : selectedDataElements[`${purpose.uuid}-${element.uuid}`] || false,
-        })),
-      }));
-
-      await submitAssistedConsent({
-        accessToken: token,
-        organisationUuid,
-        workspaceUuid,
-        baseUrl,
-        ledgerBaseUrl,
-        noticeUuid: content.notice_uuid,
-        purposes: submitPurposes,
-        language: toBcp47Code(selectedLanguage),
-      });
-
-      handleSuccess();
-    } catch (err) {
-      // Already-consented is not an error — mirror RedactoNoticeConsent and treat
-      // the 409 as success, handing off via onComplete with no error.
-      if (
-        err instanceof ApiError &&
-        (err.status === 409 || err.code === "CONSENT_ALREADY_PROVIDED")
-      ) {
-        handleSuccess();
-        return;
-      }
-      // Submit failed (verify already succeeded) — show a localized generic
-      // message rather than the server's English copy.
-      setOtpError(ts("otpVerifyFailed"));
-    } finally {
-      setIsVerifying(false);
-    }
-  }, [
-    isOtpComplete,
-    isVerifying,
-    content,
-    organisationUuid,
-    workspaceUuid,
-    otpUuid,
-    otpValue,
-    baseUrl,
-    ledgerBaseUrl,
-    selectedPurposes,
-    selectedDataElements,
-    selectedLanguage,
-    handleSuccess,
-    ts,
-  ]);
-
-  // Lifecycle callback: when a host provides onDecline it owns the outcome (e.g.
-  // unmount the modal / navigate away). Without it, fall back to log + reset.
-  const handleDecline = useCallback(() => {
-    if (onDecline) {
-      onDecline();
-      return;
-    }
-    // eslint-disable-next-line no-console
-    console.log("[RedactoNoticeAssisted] consent declined");
-    resetFlow();
-  }, [onDecline, resetFlow]);
-
-  const noticeTitle = getTranslatedText(
-    "notice_banner_heading",
-    content?.notice_banner_heading || "Privacy Notice",
-  );
-
-  const renderHeader = () => {
-    const logoNode = (
-      <img
-        style={{ ...styles.logo, ...responsive.logo }}
-        src={logoUrl}
-        alt={ts("logoAlt")}
-      />
-    );
-    const titleNode = (
-      <h2
-        id="privacy-notice-title"
-        style={{ ...styles.title, ...responsive.title }}
-      >
-        {noticeTitle}
-      </h2>
-    );
-    const controlsBlock = (
-      <div style={styles.languageSelectorContainer} ref={languageContainerRef}>
-        <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
-          {/* Speaker button — narration is notice-only, so it shows only when TTS
-              is available and we're on the notice step. */}
-          {isTTSAvailable && step === "notice" && (
-            <button
-              type="button"
-              onClick={toggleAudio}
-              style={{
-                ...styles.topRight,
-                ...responsive.topRight,
-                padding: "3px 9px",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-              }}
-              aria-label={
-                isPlaying && !isPaused ? ts("audioPause") : ts("audioStart")
-              }
-              title={
-                isPlaying && !isPaused
-                  ? ts("talkbackPause")
-                  : ts("talkbackStart")
-              }
-            >
-              {isPlaying && !isPaused ? (
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="16"
-                  height="16"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="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>
-              ) : (
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="16"
-                  height="16"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="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>
-            <button
-              type="button"
-              style={{ ...styles.topRight, ...responsive.topRight }}
-              onClick={toggleLanguageDropdown}
-              aria-expanded={isLanguageDropdownOpen}
-              aria-haspopup="listbox"
-              aria-controls="redacto-assisted-language-listbox"
-              aria-label={ts("selectLanguageCurrent", {
-                lang: toNativeLabel(selectedLanguage),
-              })}
-            >
-              {toNativeLabel(selectedLanguage)}
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="16"
-                height="16"
-                viewBox="0 0 16 16"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                style={{ flexShrink: 0, marginLeft: "4px" }}
-                aria-hidden="true"
-              >
-                <path d="M4 6l4 4 4-4" />
-              </svg>
-            </button>
-          </div>
-        </div>
-        {isLanguageDropdownOpen && (
-          <ul
-            id="redacto-assisted-language-listbox"
-            style={styles.languageDropdown}
-            role="listbox"
-            aria-label={ts("selectLanguage")}
-          >
-            {availableLanguages.map((lang) => (
-              <li
-                key={lang}
-                style={{
-                  ...styles.languageItem,
-                  ...responsive.languageItem,
-                  ...(selectedLanguage === lang
-                    ? styles.selectedLanguageItem
-                    : null),
-                  listStyle: "none",
-                }}
-                onClick={() => handleLanguageSelect(lang)}
-                role="option"
-                aria-selected={selectedLanguage === lang}
-                tabIndex={0}
-              >
-                {toNativeLabel(lang)}
-              </li>
-            ))}
-          </ul>
-        )}
-      </div>
-    );
-
-    return (
-      <div style={{ ...styles.topSection, ...responsive.topSection }}>
-        {isMobile ? (
-          <>
-            <div
-              style={{
-                display: "flex",
-                alignItems: "center",
-                gap: "10px",
-                width: "100%",
-              }}
-            >
-              {logoNode}
-              <div
-                style={{
-                  marginLeft: "auto",
-                  display: "flex",
-                  alignItems: "center",
-                  flexShrink: 0,
-                }}
-              >
-                {controlsBlock}
-              </div>
-            </div>
-            {titleNode}
-          </>
-        ) : (
-          <>
-            <div style={styles.topLeft}>
-              {logoNode}
-              {titleNode}
-            </div>
-            {controlsBlock}
-          </>
-        )}
-      </div>
-    );
-  };
-
-  const renderDpoFooter = () => {
-    if (!content) return null;
-    const dpoInfo = content.dpo_info;
-    if (!content.privacy_center_url && !dpoInfo) return null;
-    return (
-      <div
-        style={{
-          ...styles.privacyText,
-          ...responsive.privacyText,
-          fontSize: isMobile ? "13px" : "14px",
-          lineHeight: "1.4",
-          borderTop: "1px solid rgba(152, 162, 179, 0.3)",
-          paddingTop: "12px",
-          marginTop: "12px",
-        }}
-      >
-        <p style={{ margin: 0, opacity: 0.6 }}>
-          {content.privacy_center_url && (
-            <>
-              <span id="additional-text">
-                {getTranslatedText(
-                  "additional_text",
-                  content.additional_text ||
-                    "Manage or withdraw consent anytime at",
-                )}
-              </span>{" "}
-              <a
-                id="privacy-center-link"
-                style={linkStyle}
-                href={content.privacy_center_url}
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                {getTranslatedText(
-                  "privacy_center_anchor_text",
-                  content.privacy_center_anchor_text || "Privacy Center",
-                )}
-              </a>
-              .
-            </>
-          )}
-          {dpoInfo && (
-            <>
-              {content.privacy_center_url && <br />}
-              <span id="dpo-grievance-text">
-                {getTranslatedDpoText("grievance_text", dpoInfo.grievance_text)}
-              </span>{" "}
-              {dpoInfo.grievance_url && (
-                <a
-                  id="dpo-grievance-link"
-                  style={linkStyle}
-                  href={dpoInfo.grievance_url}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  {getTranslatedDpoText(
-                    "grievance_anchor_text",
-                    dpoInfo.grievance_anchor_text || "click here",
-                  )}
-                </a>
-              )}{" "}
-              {dpoInfo.grievance_email && (
-                <>
-                  <span id="dpo-grievance-email-connector">
-                    {getTranslatedDpoText(
-                      "grievance_email_connector_text",
-                      dpoInfo.grievance_email_connector_text || "or email to",
-                    )}
-                  </span>{" "}
-                  <a
-                    id="dpo-grievance-email"
-                    style={linkStyle}
-                    href={`mailto:${dpoInfo.grievance_email}`}
-                  >
-                    {dpoInfo.grievance_email}
-                  </a>
-                </>
-              )}
-              <br />
-              <span id="dpo-dp-board-text">
-                {getTranslatedDpoText("dp_board_text", dpoInfo.dp_board_text)}
-              </span>{" "}
-              {dpoInfo.dp_board_url && (
-                <a
-                  id="dpo-dp-board-link"
-                  style={linkStyle}
-                  href={dpoInfo.dp_board_url}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  {getTranslatedDpoText(
-                    "dp_board_anchor_text",
-                    dpoInfo.dp_board_anchor_text || "click here",
-                  )}
-                </a>
-              )}
-              <br />
-              <span id="dpo-dpo-text">
-                {getTranslatedDpoText("dpo_text", dpoInfo.dpo_text)}
-              </span>{" "}
-              {dpoInfo.dpo_email && (
-                <a
-                  id="dpo-dpo-link"
-                  style={linkStyle}
-                  href={`mailto:${dpoInfo.dpo_email}`}
-                >
-                  {getTranslatedDpoText(
-                    "dpo_anchor_text",
-                    dpoInfo.dpo_anchor_text || "Click here",
-                  )}
-                </a>
-              )}
-            </>
-          )}
-        </p>
-      </div>
-    );
-  };
-
-  const renderNoticeScreen = (locked: boolean) => {
-    if (!content) return null;
-    return (
-      <>
-        <p style={{ ...styles.privacyText, ...responsive.privacyText }}>
-          <span id="privacy-notice-text">
-            {getTranslatedText("notice_text", content.notice_text)}
-          </span>
-          <br />
-          <span>
-            <span id="privacy-policy-text">
-              {getTranslatedText(
-                "privacy_policy_prefix_text",
-                content.privacy_policy_prefix_text || "",
-              )}
-            </span>{" "}
-            <a
-              id="privacy-policy-link"
-              style={linkStyle}
-              href={content.privacy_policy_url || "#"}
-              target="_blank"
-              rel="noopener noreferrer"
-              aria-label={`${getTranslatedText(
-                "privacy_policy_anchor_text",
-                content.privacy_policy_anchor_text || "Privacy Policy",
-              )} (${ts("opensInNewTab")})`}
-            >
-              {getTranslatedText(
-                "privacy_policy_anchor_text",
-                content.privacy_policy_anchor_text || "Privacy Policy",
-              )}
-            </a>
-          </span>
-        </p>
-
-        <h2
-          id="purpose-section-heading"
-          style={{ ...styles.subTitle, ...responsive.subTitle }}
-        >
-          {getTranslatedText(
-            "purpose_section_heading",
-            content.purpose_section_heading || "Manage What You Share",
-          )}
-        </h2>
-
-        <div
-          style={{
-            ...styles.optionsContainer,
-            ...(locked ? styles.lockedOptions : null),
-          }}
-          aria-disabled={locked || undefined}
-        >
-          {content.purposes.map((purpose) => (
-            <PurposeItem
-              key={purpose.uuid}
-              purpose={purpose}
-              selectedPurposes={selectedPurposes}
-              collapsedPurposes={collapsedPurposes}
-              selectedDataElements={selectedDataElements}
-              onPurposeToggle={togglePurpose}
-              onPurposeCollapse={togglePurposeCollapse}
-              onDataElementToggle={handleDataElementToggle}
-              responsive={responsive}
-              t={getTranslatedText}
-              ts={ts}
-              locked={locked}
-            />
-          ))}
-        </div>
-
-        {renderDpoFooter()}
-      </>
-    );
-  };
-
-  // Inline verify panel — a separated card appended below the locked notice.
-  // Header carries a "Verify with OTP" title + an "Edit selections" link to
-  // reopen the notice. The mobile field stays visible (soft, locked once the
-  // code is sent), with a justified "code sent / Change number" row beneath it,
-  // then the code boxes. Accent colours come from the API brand colour.
-  const renderVerifyBlock = () => (
-    <div
-      ref={verifyBlockRef}
-      className="redacto-assisted-reveal"
-      style={styles.verifyPanel}
-    >
-      <div style={styles.verifyPanelHeader}>
-        <span style={styles.verifyPanelTitle}>
-          <LockIcon size={15} color={primaryColor} />
-          {ts("verifyWithOtp")}
-        </span>
-        <button
-          type="button"
-          style={{ ...styles.editLink, color: primaryColor }}
-          onClick={handleEditSelections}
-          disabled={isVerifying}
-        >
-          {ts("editSelections")}
-        </button>
-      </div>
-
-      <div style={styles.phoneFieldWrap}>
-        {/* Label row: active method icon + label on the left, a quiet link on
-            the right to switch methods. The link is hidden once a code is sent
-            (the status row below takes over). */}
-        <div style={styles.fieldLabelRow}>
-          <label
-            htmlFor={
-              verifyMethod === "email"
-                ? "redacto-assisted-email"
-                : "redacto-assisted-mobile"
-            }
-            style={styles.fieldLabelWithIcon}
-          >
-            {verifyMethod === "email" ? (
-              <MailIcon size={14} color="#475467" />
-            ) : (
-              <PhoneIcon size={14} color="#475467" />
-            )}
-            {verifyMethod === "email" ? ts("emailAddress") : ts("mobileNumber")}
-          </label>
-          {!otpSent && (
-            <button
-              type="button"
-              className="redacto-assisted-switch-link"
-              style={{ ...styles.editLink, color: primaryColor }}
-              onClick={() =>
-                handleSelectMethod(verifyMethod === "email" ? "mobile" : "email")
-              }
-              disabled={isSendingOtp}
-            >
-              {verifyMethod === "email" ? (
-                <PhoneIcon size={14} color={primaryColor} />
-              ) : (
-                <MailIcon size={14} color={primaryColor} />
-              )}
-              {verifyMethod === "email"
-                ? ts("useMobileInstead")
-                : ts("useEmailInstead")}
-            </button>
-          )}
-        </div>
-
-        {verifyMethod === "mobile" ? (
-          <div
-            className="redacto-assisted-phone-field"
-            style={styles.phoneField}
-          >
-            <span style={styles.phonePrefix}>{ASSISTED_CONFIG.dialCode}</span>
-            <input
-              id="redacto-assisted-mobile"
-              ref={mobileInputRef}
-              type="tel"
-              inputMode="numeric"
-              autoComplete="tel-national"
-              className="redacto-assisted-phone-input"
-              style={styles.phoneInput}
-              placeholder="98765 43210"
-              value={mobile}
-              disabled={otpSent || isSendingOtp}
-              onChange={(e: ChangeEvent<HTMLInputElement>) =>
-                setMobile(e.target.value.replace(/\D/g, "").slice(0, 10))
-              }
-            />
-          </div>
-        ) : (
-          <div
-            className="redacto-assisted-phone-field"
-            style={styles.phoneField}
-          >
-            <input
-              id="redacto-assisted-email"
-              ref={emailInputRef}
-              type="email"
-              inputMode="email"
-              autoComplete="email"
-              className="redacto-assisted-phone-input"
-              style={styles.phoneInput}
-              placeholder="you@example.com"
-              value={email}
-              disabled={otpSent || isSendingOtp}
-              onChange={(e: ChangeEvent<HTMLInputElement>) =>
-                setEmail(e.target.value)
-              }
-            />
-          </div>
-        )}
-
-        {!otpSent ? (
-          <p style={styles.helperText}>
-            {verifyMethod === "email" ? ts("otpHelperEmail") : ts("otpHelper")}
-          </p>
-        ) : (
-          <div style={styles.otpStatusRow}>
-            <span style={styles.otpSentText}>
-              <CheckIcon size={15} color="#10B981" /> {ts("otpSentTo")}{" "}
-              {verifyMethod === "email"
-                ? email
-                : `${ASSISTED_CONFIG.dialCode} ${mobile}`}
-            </span>
-            <button
-              type="button"
-              style={{ ...styles.changeMobileLink, color: primaryColor }}
-              onClick={handleChangeContact}
-              disabled={isVerifying}
-            >
-              {verifyMethod === "email" ? ts("changeEmail") : ts("changeMobile")}
-            </button>
-          </div>
-        )}
-
-        {createError && (
-          <p style={styles.fieldError} role="alert">
-            {createError}
-          </p>
-        )}
-
-        {otpSent && (
-          <div
-            ref={otpSectionRef}
-            style={{ display: "flex", flexDirection: "column", gap: "12px" }}
-          >
-            <p style={styles.centerLabel}>
-              {ts("enterNDigitOtp", { count: ASSISTED_CONFIG.otpLength })}
-            </p>
-
-            <div style={styles.otpRow}>
-              {otpDigits.map((digit, index) => (
-                <input
-                  // OTP boxes are positional and never reorder.
-                  // eslint-disable-next-line react/no-array-index-key
-                  key={index}
-                  ref={(el) => {
-                    otpInputRefs.current[index] = el;
-                  }}
-                  type="text"
-                  inputMode="numeric"
-                  autoComplete="one-time-code"
-                  maxLength={1}
-                  className={`redacto-assisted-otp-input${
-                    otpError ? " redacto-assisted-otp-error" : ""
-                  }`}
-                  style={{
-                    ...styles.otpBox,
-                    // Filled box — emphasised with the brand accent.
-                    ...(digit
-                      ? {
-                          borderColor: primaryColor,
-                          backgroundColor: accentTint,
-                        }
-                      : null),
-                    // 3 + 3 grouping: a slightly larger gap before the 4th box.
-                    ...(index === 3 ? { marginLeft: "8px" } : null),
-                  }}
-                  value={digit}
-                  disabled={isVerifying}
-                  onChange={(e) => handleOtpChange(index, e.target.value)}
-                  onKeyDown={(e) => handleOtpKeyDown(index, e)}
-                  onPaste={handleOtpPaste}
-                  aria-label={ts("otpDigit", { index: index + 1 })}
-                />
-              ))}
-            </div>
-
-            {otpError && (
-              <p style={styles.fieldError} role="alert">
-                {otpError}
-              </p>
-            )}
-
-            <p style={styles.resendText}>
-              {resendCountdown > 0 ? (
-                <>
-                  <ClockIcon />
-                  {ts("resendIn", { seconds: resendCountdown })}
-                </>
-              ) : (
-                <button
-                  type="button"
-                  style={{ ...styles.resendLink, color: primaryColor }}
-                  onClick={handleResend}
-                  disabled={isSendingOtp}
-                >
-                  {isSendingOtp ? ts("sending") : ts("resendOtp")}
-                </button>
-              )}
-            </p>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-
-  const renderFooter = () => {
-    const declineLabel = getTranslatedText(
-      "decline_button_text",
-      content?.decline_button_text || "Decline",
-    );
-
-    const isVerify = step === "verify";
-    // Primary CTA progression: Confirm (notice) → Send OTP (mobile entry) →
-    // Confirm OTP (code entry). The notice's API label seeds the first state.
-    let primaryLabel = getTranslatedText(
-      "confirm_button_text",
-      content?.confirm_button_text || "Confirm",
-    );
-    let primaryDisabled = !areAllRequiredElementsChecked;
-    let primaryOnClick = handleConfirmStep;
-    if (isVerify && !otpSent) {
-      primaryLabel = isSendingOtp ? ts("sending") : ts("sendOtp");
-      primaryDisabled = !isContactValid || isSendingOtp;
-      primaryOnClick = handleGetOtp;
-    } else if (isVerify && otpSent) {
-      primaryLabel = isVerifying ? ts("verifying") : ts("confirmOtp");
-      primaryDisabled = !isOtpComplete || isVerifying;
-      primaryOnClick = handleConfirm;
-    }
-    return (
-      <div style={{ ...styles.bottomSection, ...responsive.bottomSection }}>
-        <button
-          type="button"
-          id="confirm-button-text"
-          className="redacto-assisted-primary-btn"
-          style={{
-            ...styles.button,
-            ...responsive.button,
-            ...styles.acceptButton,
-            backgroundColor: primaryColor,
-          }}
-          disabled={primaryDisabled}
-          onClick={primaryOnClick}
-        >
-          {primaryLabel}
-        </button>
-        <button
-          type="button"
-          id="decline-button-text"
-          className="redacto-assisted-secondary-btn"
-          style={{
-            ...styles.button,
-            ...responsive.button,
-            ...styles.cancelButton,
-          }}
-          onClick={handleDecline}
-        >
-          {declineLabel}
-        </button>
-      </div>
-    );
-  };
-
-  const renderBody = () => {
-    if (isLoading) {
-      return (
-        <div style={styles.loadingWrap}>
-          <div style={styles.loadingSpinner} aria-label={ts("loadingNotice")} />
-        </div>
-      );
-    }
-    if (fetchError || !content) {
-      return (
-        <div style={styles.loadingWrap}>
-          <p style={styles.errorTitle}>{ts("loadFailedTitle")}</p>
-          <p style={styles.errorText}>
-            {fetchError?.message || ts("tryAgain")}
-          </p>
-          <button
-            type="button"
-            className="redacto-assisted-secondary-btn"
-            style={{ ...styles.button, ...styles.cancelButton, width: "auto" }}
-            onClick={handleDecline}
-          >
-            {ts("close")}
-          </button>
-        </div>
-      );
-    }
-    return (
-      <>
-        {renderHeader()}
-        <div style={{ ...styles.middleSection, ...responsive.middleSection }}>
-          {renderNoticeScreen(step === "verify")}
-          {step === "verify" && renderVerifyBlock()}
-        </div>
-        {renderFooter()}
-      </>
-    );
-  };
-
-  return (
-    <div style={styles.overlay}>
-      <div
-        style={{
-          ...styles.modal,
-          ...responsive.modal,
-          fontFamily,
-          ...accentVars,
-        }}
-        role="dialog"
-        aria-modal="true"
-        aria-label={noticeTitle}
-      >
-        <div style={styles.content}>{renderBody()}</div>
-      </div>
-    </div>
-  );
-};
-
-// Inline checkmark icon — avoids pulling an icon dependency into the SDK.
-// Convert a #RGB / #RRGGBB brand colour to an rgba() string. Returns null for
-// anything we can't parse (named colours, rgb(), gradients) so callers fall back.
-const hexToRgba = (hex: string, alpha: number): string | null => {
-  if (typeof hex !== "string" || hex[0] !== "#") return null;
-  let h = hex.slice(1);
-  if (h.length === 3) {
-    h = h
-      .split("")
-      .map((c) => c + c)
-      .join("");
-  }
-  if (h.length !== 6 || /[^0-9a-fA-F]/.test(h)) return null;
-  const n = parseInt(h, 16);
-  return `rgba(${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}, ${alpha})`;
-};
-
-// Bring a freshly-revealed element into view within the scrollable middle
-// section. Honors prefers-reduced-motion by skipping the smooth animation.
-const scrollIntoViewSoft = (el: HTMLElement | null) => {
-  if (!el || typeof el.scrollIntoView !== "function") return;
-  const reduce =
-    typeof window !== "undefined" &&
-    typeof window.matchMedia === "function" &&
-    window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-  el.scrollIntoView({ behavior: reduce ? "auto" : "smooth", block: "nearest" });
-};
-
-const ClockIcon = ({
-  size = 13,
-  color = "#667085",
-}: {
-  size?: number;
-  color?: string;
-}) => (
-  <svg
-    width={size}
-    height={size}
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke={color}
-    strokeWidth={2}
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    aria-hidden="true"
-    style={{ flexShrink: 0 }}
-  >
-    <circle cx="12" cy="12" r="9" />
-    <path d="M12 7v5l3 2" />
-  </svg>
-);
-
-const LockIcon = ({
-  size = 15,
-  color = "#475467",
-}: {
-  size?: number;
-  color?: string;
-}) => (
-  <svg
-    width={size}
-    height={size}
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke={color}
-    strokeWidth={2}
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    aria-hidden="true"
-    style={{ flexShrink: 0 }}
-  >
-    <rect x="3" y="11" width="18" height="11" rx="2" />
-    <path d="M7 11V7a5 5 0 0 1 10 0v4" />
-  </svg>
-);
-
-const CheckIcon = ({
-  size = 16,
-  color = "#10B981",
-}: {
-  size?: number;
-  color?: string;
-}) => (
-  <svg
-    width={size}
-    height={size}
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke={color}
-    strokeWidth={2.5}
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    aria-hidden="true"
-    style={{ flexShrink: 0 }}
-  >
-    <path d="M20 6 9 17l-5-5" />
-  </svg>
-);
-
-const PhoneIcon = ({
-  size = 14,
-  color = "#475467",
-}: {
-  size?: number;
-  color?: string;
-}) => (
-  <svg
-    width={size}
-    height={size}
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke={color}
-    strokeWidth={2}
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    aria-hidden="true"
-    style={{ flexShrink: 0 }}
-  >
-    <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z" />
-  </svg>
-);
-
-const MailIcon = ({
-  size = 14,
-  color = "#475467",
-}: {
-  size?: number;
-  color?: string;
-}) => (
-  <svg
-    width={size}
-    height={size}
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke={color}
-    strokeWidth={2}
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    aria-hidden="true"
-    style={{ flexShrink: 0 }}
-  >
-    <rect x="2" y="4" width="20" height="16" rx="2" />
-    <path d="m22 7-10 5L2 7" />
-  </svg>
-);
-
-export default RedactoNoticeAssisted;