@redacto.io/consent-sdk-react 9.3.0-beta.1 → 9.4.0-beta.0

package/src/RedactoNoticeAssisted/RedactoNoticeAssisted.tsx

@@ -0,0 +1,2133 @@
+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 {
+  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,
+  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;
+
+      // 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,
+        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,
+    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;