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

package/src/RedactoNoticeAssisted/RedactoNoticeAssisted.test.tsx

@@ -1,934 +0,0 @@
-import "@testing-library/jest-dom";
-import {
-  fireEvent,
-  render,
-  screen,
-  waitFor,
-  within,
-} from "@testing-library/react";
-import { beforeEach, describe, expect, it, vi } from "vitest";
-import { RedactoNoticeAssisted } from "./RedactoNoticeAssisted";
-import { ASSISTED_CONFIG } from "./constants";
-import {
-  fetchAssistedNotice,
-  fetchAssistedTTSAudioUrls,
-  createOtp,
-  verifyOtp,
-  submitAssistedConsent,
-} from "./api";
-import type { ConsentContent, TTSAudioUrlsResponse } from "./api/types";
-import { ApiError } from "../shared/api-errors";
-import { fetchNoticeConsentStatusForScope } from "../shared/notice-consent-status";
-import { makeStaticT } from "./i18n";
-
-vi.mock("./api", () => ({
-  fetchAssistedNotice: vi.fn(),
-  fetchAssistedTTSAudioUrls: vi.fn(),
-  createOtp: vi.fn(),
-  verifyOtp: vi.fn(),
-  submitAssistedConsent: vi.fn(),
-}));
-
-// Mock only the ledger check-consent network read; keep the real
-// isNoticeFullyConsented predicate so the already-consented decision is exercised.
-vi.mock("../shared/notice-consent-status", async (importActual) => {
-  const actual =
-    await importActual<typeof import("../shared/notice-consent-status")>();
-  return {
-    ...actual,
-    fetchNoticeConsentStatusForScope: vi.fn(),
-  };
-});
-
-const LEDGER_BASE_URL = "https://ledger.example.test/consent-ledger";
-
-const otpLength = ASSISTED_CONFIG.otpLength;
-const mockedFetch = vi.mocked(fetchAssistedNotice);
-const mockedFetchTTS = vi.mocked(fetchAssistedTTSAudioUrls);
-const mockedCreateOtp = vi.mocked(createOtp);
-const mockedVerifyOtp = vi.mocked(verifyOtp);
-const mockedSubmitConsent = vi.mocked(submitAssistedConsent);
-const mockedFetchScope = vi.mocked(fetchNoticeConsentStatusForScope);
-
-const OTP_DETAIL = {
-  uuid: "otp-1",
-  to: "+919876543210",
-  channel: "sms",
-  expire_at: "2026-06-24T09:55:34Z",
-  success: true,
-  message: "OTP created successfully",
-};
-
-const VERIFY_DETAIL = {
-  token: null,
-  access_token: "access-token-1",
-  refresh_token: "refresh-token-1",
-  expires_in: 3600,
-  token_type: "Bearer",
-  success: true,
-  message: "OTP verified successfully",
-};
-
-const PROPS = {
-  organisationUuid: "org-1",
-  workspaceUuid: "ws-1",
-  noticeUuid: "ntc-1",
-  baseUrl: "https://api.example.test/consent",
-};
-
-// Trimmed EA-Sports notice payload (shape of the public API response).
-const NOTICE = {
-  detail: {
-    active_config: {
-      notice_text: "We use data to personalise your experience.",
-      additional_text: "Manage or withdraw consent anytime at",
-      confirm_button_text: "Agree",
-      decline_button_text: "Decline",
-      logo_url: "https://cdn.example.test/ea.svg",
-      privacy_policy_url: "https://www.ea.com/legal/privacy",
-      privacy_center_url: "https://privacy.example.test/",
-      primary_color: "#9c0716",
-      secondary_color: "#000bdb",
-      font_preference: "Arial",
-      privacy_policy_prefix_text: "Learn more in our",
-      privacy_policy_anchor_text: "Privacy Policy",
-      privacy_center_anchor_text: "Privacy Center",
-      purpose_section_heading: "Manage What You Share",
-      notice_banner_heading: "EA Sports",
-      default_language: "English",
-      purposes: [
-        {
-          uuid: "p-account",
-          name: "Account Management",
-          description: "To maintain and update your account information.",
-          data_elements: [
-            { uuid: "e-email", name: "Email", enabled: true, required: true },
-            {
-              uuid: "e-phone",
-              name: "Phone Number",
-              enabled: true,
-              required: false,
-            },
-          ],
-        },
-        {
-          uuid: "p-identity",
-          name: "Identity Verification",
-          description: "To authenticate your identity securely.",
-          data_elements: [
-            {
-              uuid: "e-govid",
-              name: "Government ID",
-              enabled: true,
-              required: true,
-            },
-          ],
-        },
-      ],
-      dpo_info: {
-        grievance_text: "If you have any grievances",
-        grievance_url: "https://google.com",
-        grievance_anchor_text: "click here",
-        grievance_email_connector_text: "or email to",
-        grievance_email: "help@redacto.io",
-        dp_board_text: "You can escalate to the DP board",
-        dp_board_url: "https://google.com",
-        dp_board_anchor_text: "click here",
-        dpo_text: "To connect with the DPO",
-        dpo_email: "sadan@redacto.ai",
-        dpo_anchor_text: "Click here",
-      },
-      supported_languages_and_translations: {
-        Hindi: {
-          notice_banner_heading: "ईए स्पोर्ट्स",
-          notice_text: "हम डेटा का उपयोग करते हैं।",
-          purpose_section_heading: "आप जो साझा करते हैं उसे प्रबंधित करें",
-          purposes: {
-            "p-account": { name: "खाता प्रबंधन", description: "..." },
-          },
-          data_elements: { "e-email": "ईमेल" },
-        },
-      },
-    },
-  },
-} as unknown as ConsentContent;
-
-// Notice variant carrying a notice_uuid — the audio effect only fires when one is
-// present, so the base NOTICE (no uuid) leaves TTS disabled.
-const NOTICE_WITH_AUDIO = {
-  detail: {
-    active_config: {
-      ...NOTICE.detail.active_config,
-      notice_uuid: "ntc-1",
-    },
-  },
-} as unknown as ConsentContent;
-
-// Minimal audio response in the new endpoint shape (incl. language_name +
-// full_notice_audio_url). Only a couple of clip URLs are needed to exercise the
-// player; the sequence builder skips any missing ones.
-const TTS_RESPONSE = {
-  code: 200,
-  status: "OK",
-  detail: {
-    language_name: "English",
-    uuid: "tts-1",
-    language: "en",
-    notice_text_audio_url: "https://cdn.example.test/notice.mp3",
-    additional_text_audio_url: "https://cdn.example.test/additional.mp3",
-    notice_summary_audio_url: null,
-    confirm_button_text_audio_url: "https://cdn.example.test/confirm.mp3",
-    decline_button_text_audio_url: "https://cdn.example.test/decline.mp3",
-    privacy_policy_prefix_text_audio_url: "https://cdn.example.test/pp-prefix.mp3",
-    privacy_policy_anchor_text_audio_url: "https://cdn.example.test/pp-anchor.mp3",
-    privacy_center_anchor_text_audio_url: "https://cdn.example.test/pc.mp3",
-    purpose_section_heading_audio_url: "https://cdn.example.test/section.mp3",
-    notice_banner_heading_audio_url: "https://cdn.example.test/banner.mp3",
-    purposes_audio: {
-      "p-account": {
-        name_audio_url: "https://cdn.example.test/p-account-name.mp3",
-        description_audio_url: "https://cdn.example.test/p-account-desc.mp3",
-      },
-    },
-    data_elements_audio: {
-      "e-email": { name_audio_url: "https://cdn.example.test/e-email.mp3" },
-    },
-    dpo_info_audio: {
-      dpo_text_audio_url: "https://cdn.example.test/dpo.mp3",
-    },
-    full_notice_audio_url: "https://cdn.example.test/full.mp3",
-  },
-} as unknown as TTSAudioUrlsResponse;
-
-const typeOtp = (value: string) => {
-  const boxes = screen.getAllByLabelText(/OTP digit/);
-  expect(boxes).toHaveLength(otpLength);
-  value.split("").forEach((digit, i) => {
-    fireEvent.change(boxes[i], { target: { value: digit } });
-  });
-};
-
-const renderLoaded = async () => {
-  const result = render(<RedactoNoticeAssisted {...PROPS} />);
-  await screen.findByRole("heading", { name: "EA Sports" });
-  return result;
-};
-
-// Ticking both purposes selects their required data elements (Email, Government
-// ID), which the Confirm CTA now requires before the verify step can open.
-const selectRequired = () => {
-  fireEvent.click(
-    screen.getByRole("checkbox", {
-      name: /Select all data elements for Account Management/,
-    }),
-  );
-  fireEvent.click(
-    screen.getByRole("checkbox", {
-      name: /Select all data elements for Identity Verification/,
-    }),
-  );
-};
-
-describe("RedactoNoticeAssisted", () => {
-  beforeEach(() => {
-    mockedFetch.mockReset();
-    mockedFetchTTS.mockReset();
-    mockedCreateOtp.mockReset();
-    mockedVerifyOtp.mockReset();
-    mockedSubmitConsent.mockReset();
-    mockedFetch.mockResolvedValue(NOTICE);
-    mockedFetchTTS.mockResolvedValue(TTS_RESPONSE);
-    mockedCreateOtp.mockResolvedValue(OTP_DETAIL);
-    mockedVerifyOtp.mockResolvedValue(VERIFY_DETAIL);
-    mockedSubmitConsent.mockResolvedValue(null);
-    // Default: ledger reports no prior full consent, so flows proceed to submit.
-    mockedFetchScope.mockReset();
-    mockedFetchScope.mockResolvedValue(null);
-  });
-
-  it("fetches with the public-notice props (no auth)", async () => {
-    await renderLoaded();
-    expect(mockedFetch).toHaveBeenCalledWith(
-      expect.objectContaining({
-        organisationUuid: "org-1",
-        workspaceUuid: "ws-1",
-        noticeUuid: "ntc-1",
-        baseUrl: "https://api.example.test/consent",
-      }),
-    );
-  });
-
-  it("renders the fetched notice (logo, title, purposes, footer)", async () => {
-    await renderLoaded();
-    expect(screen.getByAltText("Logo")).toHaveAttribute(
-      "src",
-      "https://cdn.example.test/ea.svg",
-    );
-    expect(
-      screen.getByRole("link", { name: /Privacy Policy/ }),
-    ).toHaveAttribute("href", "https://www.ea.com/legal/privacy");
-    expect(
-      screen.getByRole("heading", { name: "Manage What You Share" }),
-    ).toBeInTheDocument();
-    expect(screen.getByText("Account Management")).toBeInTheDocument();
-    expect(screen.getByText("Identity Verification")).toBeInTheDocument();
-    expect(screen.getByRole("button", { name: "Agree" })).toBeInTheDocument();
-    expect(screen.getByRole("button", { name: "Decline" })).toBeInTheDocument();
-  });
-
-  it("keeps Confirm disabled until every required data element is selected", async () => {
-    await renderLoaded();
-    const confirm = screen.getByRole("button", { name: "Agree" });
-    // Required elements (Email, Government ID) start unchecked → CTA disabled.
-    expect(confirm).toBeDisabled();
-
-    // Selecting only one purpose still leaves a required element unchecked.
-    fireEvent.click(
-      screen.getByRole("checkbox", {
-        name: /Select all data elements for Account Management/,
-      }),
-    );
-    expect(confirm).toBeDisabled();
-
-    // Once both required elements are selected, the CTA enables.
-    fireEvent.click(
-      screen.getByRole("checkbox", {
-        name: /Select all data elements for Identity Verification/,
-      }),
-    );
-    expect(confirm).toBeEnabled();
-  });
-
-  it("checks the parent purpose once its required element is selected", async () => {
-    await renderLoaded();
-    // Expand Account Management (Email = required, Phone = optional).
-    fireEvent.click(screen.getByRole("button", { name: /Account Management/ }));
-    const purpose = screen.getByRole("checkbox", {
-      name: "Select all data elements for Account Management",
-    });
-    const email = screen.getByRole("checkbox", {
-      name: "Select Email (required)",
-    });
-    expect(purpose).not.toBeChecked();
-    // Email is the only required element → ticking it checks the purpose.
-    fireEvent.click(email);
-    expect(email).toBeChecked();
-    expect(purpose).toBeChecked();
-  });
-
-  it("unchecks the parent purpose when a required element is deselected", async () => {
-    await renderLoaded();
-    fireEvent.click(screen.getByRole("button", { name: /Account Management/ }));
-    const purpose = screen.getByRole("checkbox", {
-      name: "Select all data elements for Account Management",
-    });
-    const email = screen.getByRole("checkbox", {
-      name: "Select Email (required)",
-    });
-    // Ticking the purpose selects every element.
-    fireEvent.click(purpose);
-    expect(purpose).toBeChecked();
-    expect(email).toBeChecked();
-    // Removing the required Email element drops the purpose.
-    fireEvent.click(email);
-    expect(email).not.toBeChecked();
-    expect(purpose).not.toBeChecked();
-  });
-
-  it("selects and clears every data element when the purpose is toggled", async () => {
-    await renderLoaded();
-    fireEvent.click(screen.getByRole("button", { name: /Account Management/ }));
-    const purpose = screen.getByRole("checkbox", {
-      name: "Select all data elements for Account Management",
-    });
-    const email = screen.getByRole("checkbox", {
-      name: "Select Email (required)",
-    });
-    const phone = screen.getByRole("checkbox", {
-      name: "Select Phone Number",
-    });
-    fireEvent.click(purpose);
-    expect(email).toBeChecked();
-    expect(phone).toBeChecked();
-    fireEvent.click(purpose);
-    expect(email).not.toBeChecked();
-    expect(phone).not.toBeChecked();
-  });
-
-  it("lists the API languages in the dropdown", async () => {
-    await renderLoaded();
-    fireEvent.click(screen.getByRole("button", { name: /Select language/ }));
-    const list = screen.getByRole("listbox");
-    expect(
-      within(list).getByRole("option", { name: "English" }),
-    ).toBeInTheDocument();
-    expect(
-      within(list).getByRole("option", { name: /Hindi/ }),
-    ).toBeInTheDocument();
-  });
-
-  it("renders a non-English default_language from the translations", async () => {
-    // default_language points at Hindi; the base active_config fields are English,
-    // so the Hindi copy must come from supported_languages_and_translations.
-    const hindiDefault = {
-      detail: {
-        active_config: {
-          ...NOTICE.detail.active_config,
-          default_language: "Hindi",
-        },
-      },
-    } as unknown as ConsentContent;
-    mockedFetch.mockResolvedValue(hindiDefault);
-
-    render(<RedactoNoticeAssisted {...PROPS} />);
-    // Heading + notice text render in Hindi, not the English base copy.
-    expect(
-      await screen.findByRole("heading", { name: "ईए स्पोर्ट्स" }),
-    ).toBeInTheDocument();
-    expect(screen.getByText("हम डेटा का उपयोग करते हैं।")).toBeInTheDocument();
-    expect(
-      screen.queryByText("We use data to personalise your experience."),
-    ).not.toBeInTheDocument();
-  });
-
-  it("expands a purpose accordion to reveal its data elements", async () => {
-    await renderLoaded();
-    expect(screen.queryByText("Email")).not.toBeInTheDocument();
-    fireEvent.click(screen.getByRole("button", { name: /Account Management/ }));
-    expect(screen.getByText("Email")).toBeInTheDocument();
-    expect(screen.getByText("Phone Number")).toBeInTheDocument();
-  });
-
-  it("walks the single-screen flow: Confirm → mobile → Send OTP → Confirm OTP → onComplete", async () => {
-    const onComplete = vi.fn();
-    render(<RedactoNoticeAssisted {...PROPS} onComplete={onComplete} />);
-    await screen.findByRole("heading", { name: "EA Sports" });
-
-    // The notice stays mounted throughout; clicking Confirm reveals the inline
-    // verify panel below it. (API confirm label is "Agree" in this fixture.)
-    selectRequired();
-    fireEvent.click(screen.getByRole("button", { name: "Agree" }));
-    expect(
-      screen.getByRole("heading", { name: "Manage What You Share" }),
-    ).toBeInTheDocument();
-    const mobileInput = screen.getByLabelText("Mobile number");
-    expect(screen.queryByLabelText(/OTP digit/)).not.toBeInTheDocument();
-
-    const sendOtpBtn = screen.getByRole("button", { name: "Send OTP" });
-    expect(sendOtpBtn).toBeDisabled();
-    fireEvent.change(mobileInput, { target: { value: "9876543210" } });
-    expect(sendOtpBtn).toBeEnabled();
-
-    fireEvent.click(sendOtpBtn);
-    // Create-OTP is called with the E.164 recipient + sms channel.
-    await waitFor(() =>
-      expect(mockedCreateOtp).toHaveBeenCalledWith(
-        expect.objectContaining({ to: "+919876543210", channel: "sms" }),
-      ),
-    );
-    expect(await screen.findByText(/OTP sent to/)).toHaveTextContent(
-      "OTP sent to +91 9876543210",
-    );
-    expect(
-      screen.getByRole("button", { name: "Change Mobile Number" }),
-    ).toBeInTheDocument();
-
-    const confirmOtpBtn = screen.getByRole("button", { name: "Confirm OTP" });
-    expect(confirmOtpBtn).toBeDisabled();
-    typeOtp("1".repeat(otpLength));
-    expect(confirmOtpBtn).toBeEnabled();
-
-    fireEvent.click(confirmOtpBtn);
-    // Verify is called with the create-OTP uuid, then consent is submitted with
-    // the access_token from verify.
-    await waitFor(() =>
-      expect(mockedVerifyOtp).toHaveBeenCalledWith(
-        expect.objectContaining({
-          uuid: "otp-1",
-          otp: "1".repeat(otpLength),
-          purpose: "login",
-        }),
-      ),
-    );
-    expect(mockedSubmitConsent).toHaveBeenCalledWith(
-      expect.objectContaining({
-        accessToken: "access-token-1",
-        organisationUuid: "org-1",
-        workspaceUuid: "ws-1",
-      }),
-    );
-    // No confirmation screen — onComplete fires immediately on success.
-    await waitFor(() => expect(onComplete).toHaveBeenCalledTimes(1));
-    expect(
-      screen.queryByRole("heading", { name: "Consent confirmed" }),
-    ).not.toBeInTheDocument();
-  });
-
-  it("verifies by email: Confirm → Email toggle → Send OTP (channel email) → Confirm OTP → onComplete", async () => {
-    const onComplete = vi.fn();
-    render(<RedactoNoticeAssisted {...PROPS} onComplete={onComplete} />);
-    await screen.findByRole("heading", { name: "EA Sports" });
-
-    selectRequired();
-    fireEvent.click(screen.getByRole("button", { name: "Agree" }));
-
-    // Mobile is the default; its field is shown. Switch to email via the link.
-    expect(screen.getByLabelText("Mobile number")).toBeInTheDocument();
-    fireEvent.click(screen.getByRole("button", { name: /Use email instead/ }));
-
-    // The mobile field is replaced by the email field.
-    expect(screen.queryByLabelText("Mobile number")).not.toBeInTheDocument();
-    const emailInput = screen.getByLabelText("Email address");
-
-    const sendOtpBtn = screen.getByRole("button", { name: "Send OTP" });
-    // An invalid address keeps Send OTP disabled; a valid one enables it.
-    fireEvent.change(emailInput, { target: { value: "not-an-email" } });
-    expect(sendOtpBtn).toBeDisabled();
-    fireEvent.change(emailInput, { target: { value: "user@example.com" } });
-    expect(sendOtpBtn).toBeEnabled();
-
-    fireEvent.click(sendOtpBtn);
-    // Create-OTP is called with the raw email recipient + the "email" channel.
-    await waitFor(() =>
-      expect(mockedCreateOtp).toHaveBeenCalledWith(
-        expect.objectContaining({ to: "user@example.com", channel: "email" }),
-      ),
-    );
-    expect(await screen.findByText(/OTP sent to/)).toHaveTextContent(
-      "OTP sent to user@example.com",
-    );
-    expect(
-      screen.getByRole("button", { name: "Change Email" }),
-    ).toBeInTheDocument();
-
-    const confirmOtpBtn = screen.getByRole("button", { name: "Confirm OTP" });
-    expect(confirmOtpBtn).toBeDisabled();
-    typeOtp("1".repeat(otpLength));
-    expect(confirmOtpBtn).toBeEnabled();
-
-    fireEvent.click(confirmOtpBtn);
-    await waitFor(() =>
-      expect(mockedVerifyOtp).toHaveBeenCalledWith(
-        expect.objectContaining({
-          uuid: "otp-1",
-          otp: "1".repeat(otpLength),
-          purpose: "login",
-        }),
-      ),
-    );
-    expect(mockedSubmitConsent).toHaveBeenCalledWith(
-      expect.objectContaining({
-        accessToken: "access-token-1",
-        organisationUuid: "org-1",
-        workspaceUuid: "ws-1",
-      }),
-    );
-    await waitFor(() => expect(onComplete).toHaveBeenCalledTimes(1));
-  });
-
-  it("locks the notice selections once Confirm is pressed", async () => {
-    await renderLoaded();
-    // Editable before Confirm.
-    const accountCheckbox = screen.getByRole("checkbox", {
-      name: /Select all data elements for Account Management/,
-    });
-    expect(accountCheckbox).toBeEnabled();
-    selectRequired();
-    fireEvent.click(screen.getByRole("button", { name: "Agree" }));
-    // Locked after Confirm; the notice is still visible.
-    expect(accountCheckbox).toBeDisabled();
-    expect(screen.getByText("Account Management")).toBeInTheDocument();
-  });
-
-  it("reopens the notice for editing via Edit selections", async () => {
-    await renderLoaded();
-    selectRequired();
-    fireEvent.click(screen.getByRole("button", { name: "Agree" }));
-    expect(screen.getByLabelText("Mobile number")).toBeInTheDocument();
-    fireEvent.click(screen.getByRole("button", { name: "Edit selections" }));
-    // Back on the notice step: panel gone, CTA reverts, selections editable.
-    expect(screen.queryByLabelText("Mobile number")).not.toBeInTheDocument();
-    expect(screen.getByRole("button", { name: "Agree" })).toBeInTheDocument();
-    expect(
-      screen.getByRole("checkbox", {
-        name: /Select all data elements for Account Management/,
-      }),
-    ).toBeEnabled();
-  });
-
-  it("returns to the mobile field via Change Mobile Number", async () => {
-    await renderLoaded();
-    selectRequired();
-    fireEvent.click(screen.getByRole("button", { name: "Agree" }));
-    fireEvent.change(screen.getByLabelText("Mobile number"), {
-      target: { value: "9876543210" },
-    });
-    fireEvent.click(screen.getByRole("button", { name: "Send OTP" }));
-    await screen.findByText(/OTP sent to/);
-    typeOtp("12");
-    fireEvent.click(
-      screen.getByRole("button", { name: "Change Mobile Number" }),
-    );
-    expect(screen.queryByLabelText(/OTP digit/)).not.toBeInTheDocument();
-    expect(screen.getByLabelText("Mobile number")).toBeEnabled();
-    expect(
-      screen.getByRole("button", { name: "Send OTP" }),
-    ).toBeInTheDocument();
-  });
-
-  it("shows a localized inline error when create-OTP fails", async () => {
-    mockedCreateOtp.mockRejectedValue(new Error("SMS service unavailable"));
-    await renderLoaded();
-    selectRequired();
-    fireEvent.click(screen.getByRole("button", { name: "Agree" }));
-    fireEvent.change(screen.getByLabelText("Mobile number"), {
-      target: { value: "9876543210" },
-    });
-    fireEvent.click(screen.getByRole("button", { name: "Send OTP" }));
-    // Server copy is English-only, so the SDK shows a localized generic message.
-    expect(
-      await screen.findByText("Could not send the OTP. Please try again."),
-    ).toBeInTheDocument();
-    // Stays on the mobile-entry step (no OTP boxes).
-    expect(screen.queryByLabelText(/OTP digit/)).not.toBeInTheDocument();
-  });
-
-  it("treats an already-consented 409 as success (no error)", async () => {
-    mockedSubmitConsent.mockRejectedValue(
-      new ApiError({
-        status: 409,
-        code: "CONSENT_ALREADY_PROVIDED",
-        message: "You have already provided consent for this notice.",
-      }),
-    );
-    const onComplete = vi.fn();
-    render(<RedactoNoticeAssisted {...PROPS} onComplete={onComplete} />);
-    await screen.findByRole("heading", { name: "EA Sports" });
-
-    selectRequired();
-    fireEvent.click(screen.getByRole("button", { name: "Agree" }));
-    fireEvent.change(screen.getByLabelText("Mobile number"), {
-      target: { value: "9876543210" },
-    });
-    fireEvent.click(screen.getByRole("button", { name: "Send OTP" }));
-    await screen.findByText(/OTP sent to/);
-    typeOtp("1".repeat(otpLength));
-    fireEvent.click(screen.getByRole("button", { name: "Confirm OTP" }));
-
-    // Treated as success: onComplete fires and the 409 message is never shown.
-    await waitFor(() => expect(onComplete).toHaveBeenCalledTimes(1));
-    expect(
-      screen.queryByText("You have already provided consent for this notice."),
-    ).not.toBeInTheDocument();
-  });
-
-  // ── Go ledger (ledgerBaseUrl) ─────────────────────────────────────────────
-  // Drives the full notice → OTP → Confirm flow with a notice that carries a
-  // notice_uuid (so the check-consent read runs), and returns the onComplete spy.
-  const runConfirmFlow = async (extraProps: Record<string, unknown>) => {
-    mockedFetch.mockResolvedValue(NOTICE_WITH_AUDIO);
-    const onComplete = vi.fn();
-    render(
-      <RedactoNoticeAssisted {...PROPS} onComplete={onComplete} {...extraProps} />,
-    );
-    await screen.findByRole("heading", { name: "EA Sports" });
-    selectRequired();
-    fireEvent.click(screen.getByRole("button", { name: "Agree" }));
-    fireEvent.change(screen.getByLabelText("Mobile number"), {
-      target: { value: "9876543210" },
-    });
-    fireEvent.click(screen.getByRole("button", { name: "Send OTP" }));
-    await screen.findByText(/OTP sent to/);
-    typeOtp("1".repeat(otpLength));
-    fireEvent.click(screen.getByRole("button", { name: "Confirm OTP" }));
-    return onComplete;
-  };
-
-  it("routes the write through ledgerBaseUrl and submits when not already consented", async () => {
-    const onComplete = await runConfirmFlow({ ledgerBaseUrl: LEDGER_BASE_URL });
-
-    await waitFor(() => expect(mockedSubmitConsent).toHaveBeenCalledTimes(1));
-    // The check-consent read runs with props org/workspace + the OTP token.
-    expect(mockedFetchScope).toHaveBeenCalledWith(
-      expect.objectContaining({
-        accessToken: "access-token-1",
-        ledgerBaseUrl: LEDGER_BASE_URL,
-        organisationUuid: "org-1",
-        workspaceUuid: "ws-1",
-        noticeUuid: "ntc-1",
-      }),
-    );
-    // The submit carries ledgerBaseUrl so the api layer routes it to the ledger.
-    expect(mockedSubmitConsent).toHaveBeenCalledWith(
-      expect.objectContaining({ ledgerBaseUrl: LEDGER_BASE_URL }),
-    );
-    await waitFor(() => expect(onComplete).toHaveBeenCalledTimes(1));
-  });
-
-  it("short-circuits an already fully-consented principal via the ledger (no submit)", async () => {
-    mockedFetchScope.mockResolvedValue({
-      consented: true,
-      all_mandatory_active: true,
-      purposes: [],
-    });
-    const onComplete = await runConfirmFlow({ ledgerBaseUrl: LEDGER_BASE_URL });
-
-    await waitFor(() => expect(onComplete).toHaveBeenCalledTimes(1));
-    expect(mockedSubmitConsent).not.toHaveBeenCalled();
-  });
-
-  it("skips the ledger check-consent and stays on baseUrl when ledgerBaseUrl is absent", async () => {
-    const onComplete = await runConfirmFlow({});
-
-    await waitFor(() => expect(mockedSubmitConsent).toHaveBeenCalledTimes(1));
-    expect(mockedFetchScope).not.toHaveBeenCalled();
-    expect(mockedSubmitConsent).toHaveBeenCalledWith(
-      expect.objectContaining({
-        ledgerBaseUrl: undefined,
-        baseUrl: "https://api.example.test/consent",
-      }),
-    );
-    await waitFor(() => expect(onComplete).toHaveBeenCalledTimes(1));
-  });
-
-  // The verify endpoint returns English copy with no error_code, so the SDK
-  // localizes by HTTP status + the `should_request_new` flag instead of echoing
-  // the server message.
-  const submitVerifyAttempt = async () => {
-    await renderLoaded();
-    selectRequired();
-    fireEvent.click(screen.getByRole("button", { name: "Agree" }));
-    fireEvent.change(screen.getByLabelText("Mobile number"), {
-      target: { value: "9876543210" },
-    });
-    fireEvent.click(screen.getByRole("button", { name: "Send OTP" }));
-    await screen.findByText(/OTP sent to/);
-    typeOtp("1".repeat(otpLength));
-    fireEvent.click(screen.getByRole("button", { name: "Confirm OTP" }));
-  };
-
-  it("shows a localized 'incorrect code' error on a 400 verify failure", async () => {
-    mockedVerifyOtp.mockRejectedValue(
-      new ApiError({ status: 400, message: "incorrect (server copy)" }),
-    );
-    await submitVerifyAttempt();
-    expect(
-      await screen.findByText(
-        "The verification code you entered is incorrect. Please check and try again.",
-      ),
-    ).toBeInTheDocument();
-    // Stays on the OTP step; consent is never submitted.
-    expect(mockedSubmitConsent).not.toHaveBeenCalled();
-  });
-
-  it("shows a localized 'expired code' error on 400 with should_request_new", async () => {
-    mockedVerifyOtp.mockRejectedValue(
-      new ApiError({
-        status: 400,
-        message: "expired (server copy)",
-        shouldRequestNew: true,
-      }),
-    );
-    await submitVerifyAttempt();
-    expect(
-      await screen.findByText(
-        "Your verification code has expired. Please request a new code.",
-      ),
-    ).toBeInTheDocument();
-    expect(mockedSubmitConsent).not.toHaveBeenCalled();
-  });
-
-  it("shows a localized 'not found' error on a 404 verify failure", async () => {
-    mockedVerifyOtp.mockRejectedValue(
-      new ApiError({ status: 404, message: "not found (server copy)" }),
-    );
-    await submitVerifyAttempt();
-    expect(
-      await screen.findByText(
-        "Verification code not found. Please request a new code.",
-      ),
-    ).toBeInTheDocument();
-    expect(mockedSubmitConsent).not.toHaveBeenCalled();
-  });
-
-  // ── Audio narration (talkback) ────────────────────────────────────────────
-  describe("audio narration", () => {
-    // jsdom doesn't implement media playback — stub play/pause so the player runs.
-    beforeEach(() => {
-      window.HTMLMediaElement.prototype.play = vi
-        .fn()
-        .mockResolvedValue(undefined);
-      window.HTMLMediaElement.prototype.pause = vi.fn();
-    });
-
-    const renderWithAudio = async () => {
-      mockedFetch.mockResolvedValue(NOTICE_WITH_AUDIO);
-      const result = render(<RedactoNoticeAssisted {...PROPS} />);
-      await screen.findByRole("heading", { name: "EA Sports" });
-      return result;
-    };
-
-    it("does not fetch audio or show the speaker without a notice_uuid", async () => {
-      // The base NOTICE has no notice_uuid → the audio effect returns early.
-      await renderLoaded();
-      expect(mockedFetchTTS).not.toHaveBeenCalled();
-      expect(
-        screen.queryByRole("button", { name: "Start audio playback" }),
-      ).not.toBeInTheDocument();
-    });
-
-    it("fetches audio with the public props + language and shows the speaker", async () => {
-      await renderWithAudio();
-      await waitFor(() =>
-        expect(mockedFetchTTS).toHaveBeenCalledWith(
-          expect.objectContaining({
-            organisationUuid: "org-1",
-            workspaceUuid: "ws-1",
-            noticeUuid: "ntc-1",
-            language: "English",
-            baseUrl: "https://api.example.test/consent",
-          }),
-        ),
-      );
-      expect(
-        await screen.findByRole("button", { name: "Start audio playback" }),
-      ).toBeInTheDocument();
-    });
-
-    it("toggles play/pause when the speaker is clicked", async () => {
-      await renderWithAudio();
-      const speaker = await screen.findByRole("button", {
-        name: "Start audio playback",
-      });
-      fireEvent.click(speaker);
-      // Now playing → the same control flips to a pause affordance.
-      expect(
-        await screen.findByRole("button", { name: "Pause audio playback" }),
-      ).toBeInTheDocument();
-      fireEvent.click(
-        screen.getByRole("button", { name: "Pause audio playback" }),
-      );
-      expect(
-        screen.getByRole("button", { name: "Start audio playback" }),
-      ).toBeInTheDocument();
-    });
-
-    it("hides the speaker once the notice advances to verify", async () => {
-      await renderWithAudio();
-      await screen.findByRole("button", { name: "Start audio playback" });
-      selectRequired();
-      fireEvent.click(screen.getByRole("button", { name: "Agree" }));
-      // Narration is notice-only — the speaker is gone on the verify step.
-      expect(
-        screen.queryByRole("button", { name: "Start audio playback" }),
-      ).not.toBeInTheDocument();
-      expect(
-        screen.queryByRole("button", { name: "Pause audio playback" }),
-      ).not.toBeInTheDocument();
-    });
-
-    it("refetches audio in the newly selected language", async () => {
-      await renderWithAudio();
-      await waitFor(() => expect(mockedFetchTTS).toHaveBeenCalled());
-      mockedFetchTTS.mockClear();
-      fireEvent.click(screen.getByRole("button", { name: /Select language/ }));
-      fireEvent.click(
-        within(screen.getByRole("listbox")).getByRole("option", {
-          name: /Hindi/,
-        }),
-      );
-      await waitFor(() =>
-        expect(mockedFetchTTS).toHaveBeenCalledWith(
-          expect.objectContaining({ language: "Hindi" }),
-        ),
-      );
-    });
-  });
-
-  it("fires onDecline from the notice screen", async () => {
-    const onDecline = vi.fn();
-    render(<RedactoNoticeAssisted {...PROPS} onDecline={onDecline} />);
-    await screen.findByRole("heading", { name: "EA Sports" });
-    fireEvent.click(screen.getByRole("button", { name: "Decline" }));
-    expect(onDecline).toHaveBeenCalledTimes(1);
-  });
-
-  it("shows a spinner while loading", () => {
-    mockedFetch.mockReturnValue(new Promise(() => {}));
-    render(<RedactoNoticeAssisted {...PROPS} />);
-    expect(screen.getByLabelText("Loading notice")).toBeInTheDocument();
-  });
-
-  it("shows an error state when the fetch fails", async () => {
-    mockedFetch.mockRejectedValue(new Error("Notice not found"));
-    render(<RedactoNoticeAssisted {...PROPS} />);
-    await waitFor(() =>
-      expect(
-        screen.getByText(/Couldn.t load the consent notice/),
-      ).toBeInTheDocument(),
-    );
-    expect(screen.getByText("Notice not found")).toBeInTheDocument();
-  });
-
-  it("localizes the static OTP-flow strings when the language is switched", async () => {
-    await renderLoaded();
-    // Select required elements while labels are still English, then switch the
-    // in-notice picker to Hindi.
-    selectRequired();
-    fireEvent.click(screen.getByRole("button", { name: /Select language/ }));
-    fireEvent.click(
-      within(screen.getByRole("listbox")).getByRole("option", {
-        name: /Hindi/,
-      }),
-    );
-
-    // Agree label has no Hindi API translation → falls back to English "Agree".
-    fireEvent.click(screen.getByRole("button", { name: "Agree" }));
-
-    // Static strings now render in Hindi (from the i18n dictionary).
-    expect(screen.getByText("मोबाइल नंबर")).toBeInTheDocument();
-    // CTA now reads the localized "Send OTP".
-    expect(
-      screen.getByRole("button", { name: "ओटीपी (OTP) भेजें" }),
-    ).toBeInTheDocument();
-    // The inline verify panel heading is localized too.
-    expect(
-      screen.getByText("ओटीपी (OTP) से सत्यापित करें"),
-    ).toBeInTheDocument();
-    // English static text is gone.
-    expect(screen.queryByText("Mobile number")).not.toBeInTheDocument();
-  });
-});
-
-describe("makeStaticT", () => {
-  it("returns the translation for a known language and interpolates vars", () => {
-    const t = makeStaticT("hi");
-    expect(t("getOtp")).toBe("ओटीपी (OTP) प्राप्त करें");
-    expect(t("enterNDigitOtp", { count: 6 })).toBe(
-      "6-अंकों का ओटीपी (OTP) दर्ज करें",
-    );
-  });
-
-  it("falls back to English for an unknown language code", () => {
-    const t = makeStaticT("zz");
-    expect(t("getOtp")).toBe("Get OTP");
-    expect(t("otpDigit", { index: 3 })).toBe("OTP digit 3");
-  });
-
-  it("resolves the single-screen CTA + panel keys", () => {
-    const en = makeStaticT("en");
-    expect(en("sendOtp")).toBe("Send OTP");
-    expect(en("confirmOtp")).toBe("Confirm OTP");
-    expect(en("verifyWithOtp")).toBe("Verify with OTP");
-    expect(en("editSelections")).toBe("Edit selections");
-    // Localized (Hindi) — must not fall back to English.
-    const hi = makeStaticT("hi");
-    expect(hi("sendOtp")).toBe("ओटीपी (OTP) भेजें");
-    expect(hi("confirmOtp")).toBe("ओटीपी (OTP) की पुष्टि करें");
-  });
-
-  it("leaves unmatched placeholders untouched", () => {
-    const t = makeStaticT("en");
-    expect(t("enterNDigitOtp")).toBe("Enter {count}-digit OTP");
-  });
-});