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

package/tests/Form.test.tsx

@@ -1,1287 +0,0 @@
-import { render, screen, fireEvent, waitFor, act, within } from '@testing-library/react';
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-
-// ─── react-i18next stub ──────────────────────────────────────────────────────
-vi.mock('react-i18next', () => {
-  const en: Record<string, string> = {
-    raiseDataRequest: 'Raise a data request',
-    contact: 'Contact',
-    contactPlaceholder: 'Enter email',
-    requestType: 'Request type',
-    requestDetails: 'Request details',
-    selectRequestType: 'Select request type',
-    supportingDocumentation: 'Supporting documentation',
-    confirmCheckBox: 'I confirm the details above are accurate',
-    submit: 'Submit',
-    cancel: 'Cancel',
-    uploadFile: 'Upload file',
-    uploadFileButton: 'Browse',
-    description: 'Description',
-    additionalNote: 'Additional note',
-    reasonOptional: 'Reason (optional)',
-    timePeriod: 'Time period',
-    today: 'Today',
-    last7Days: 'Last 7 days',
-    last30Days: 'Last 30 days',
-    last3Months: 'Last 3 months',
-    access: 'access',
-    correction: 'correction',
-    erasure: 'erasure',
-    grievance: 'grievance',
-    nomination: 'nomination',
-    forProduct: 'For {{productName}}',
-    actingOnBehalfOfShort: 'acting on behalf of {{nominator}}',
-    selectPurposesForThisProduct: 'Select purposes within this product.',
-    selectProductsForRequest:
-      'Select a product for your {{requestType}} request',
-    selectProductsForRequestGeneric: 'Select a product to continue',
-    nominationChipSuffix: '· {{nominator}}',
-    yourData: 'Your data',
-    actingOnBehalfOf: 'Acting on behalf of {{nominator}}',
-    activePurposes_one: '{{count}} purpose',
-    activePurposes_other: '{{count}} purposes',
-    autoSelected: 'Auto-selected',
-    noProductsAvailable: 'No products available',
-    noProductsAvailableDescription: 'You have no consents to manage yet.',
-    requestSubmittedSuccess: 'Request submitted',
-    requestSubmissionFailed: 'Request failed',
-    submissionFailed: 'Submission failed',
-    whatDataToAccess: 'What data to access',
-    whatDataToDelete: 'What data to delete',
-    selectAll: 'Select all',
-    dataCollected: 'Data collected',
-    revokeConsentNo: 'No',
-    revokeConsentYes: 'Yes',
-    revokeConsentModalTitle: 'Revoke consent?',
-    revokeConsentModalQuestion: 'Do you also want to revoke consent?',
-    revokeConsentModalPurposesLabel: 'Purposes',
-    revokeConsentModalYourPurposes: 'Your purposes',
-    revokeConsentModalIfYesLabel: 'If yes:',
-    revokeConsentModalIfYesBody: 'Your consent will be revoked.',
-    requestSubmittedSuccessfully: 'Request submitted successfully',
-    thankYouForSubmittingYourRequest: 'Thanks',
-  };
-  const interpolate = (template: string, vars?: Record<string, unknown>) =>
-    template.replace(/\{\{(\w+)\}\}/g, (_match, key: string) => {
-      const value = vars?.[key];
-      return value === undefined || value === null ? '' : String(value);
-    });
-  const t = (key: string, opts?: Record<string, unknown>) => {
-    const count = typeof opts?.count === 'number' ? opts.count : undefined;
-    const pluralKey =
-      count !== undefined
-        ? count === 1
-          ? `${key}_one`
-          : `${key}_other`
-        : key;
-    const template = en[pluralKey] ?? en[key] ?? key;
-    return interpolate(template, opts);
-  };
-  return {
-    useTranslation: () => ({
-      t,
-      i18n: { language: 'en', on: vi.fn(), off: vi.fn() },
-    }),
-  };
-});
-
-// ─── i18n module stub (used directly by Form.tsx for `on`/`off`) ─────────────
-vi.mock('../src/RedactoPrivacyCenter/lib/i18n', () => ({
-  default: {
-    language: 'en',
-    on: vi.fn(),
-    off: vi.fn(),
-  },
-}));
-
-// ─── API stubs ───────────────────────────────────────────────────────────────
-// 1-form -> 1-case: only `createCaseRequest` is consumed by Form.tsx now.
-const createCaseRequest = vi.fn();
-const getFormData = vi.fn();
-const fetchUserConsents = vi.fn();
-vi.mock('../src/RedactoPrivacyCenter/lib/api', () => ({
-  createCaseRequest: (...args: unknown[]) => createCaseRequest(...args),
-  getFormData: (...args: unknown[]) => getFormData(...args),
-  // Approach A sources the product picker from the ledger's user-consents.
-  // Default to no ledger result so the form falls back to the getFormData
-  // product groups these tests set up.
-  fetchUserConsents: (...args: unknown[]) => fetchUserConsents(...args),
-}));
-
-// ─── upload stub ─────────────────────────────────────────────────────────────
-vi.mock('../src/RedactoPrivacyCenter/api/upload', () => ({
-  uploadFileWithS2S: vi.fn(),
-}));
-
-// ─── tanstack/react-query stub ───────────────────────────────────────────────
-vi.mock('@tanstack/react-query', () => ({
-  useQueryClient: () => ({ invalidateQueries: vi.fn() }),
-}));
-
-// ─── Toast stub ──────────────────────────────────────────────────────────────
-vi.mock('../src/RedactoPrivacyCenter/utils/toast', () => ({
-  toast: {
-    success: vi.fn(),
-    error: vi.fn(),
-    info: vi.fn(),
-  },
-}));
-
-// ─── Auth / BaseUrl / Organization context stubs ─────────────────────────────
-// Stable references prevent identity churn from re-firing effects whose deps
-// include context-derived values (auth, consentClient, organization).
-vi.mock('../src/RedactoPrivacyCenter/context/AuthContext', () => {
-  const auth = {
-    accessToken: 'tok',
-    refreshToken: 'rtok',
-    onError: () => false,
-    updateTokens: () => {},
-  };
-  return { useAuth: () => auth };
-});
-
-// Mutable so individual tests can drop `ledgerBaseUrl` to exercise the legacy
-// (no-ledger) mode; beforeEach restores the ledger default.
-const baseUrlStub = vi.hoisted(() => ({
-  consentClient: { get: () => Promise.resolve(null), post: () => Promise.resolve(null) },
-  baseUrl: 'https://consent.test',
-  ledgerBaseUrl: 'https://ledger.test/consent-ledger' as string | undefined,
-}));
-vi.mock('../src/RedactoPrivacyCenter/context/BaseUrlContext', () => ({
-  useBaseUrl: () => baseUrlStub,
-}));
-
-vi.mock('../src/RedactoPrivacyCenter/context/OrganizationContext', () => {
-  const org = {
-    organization: {
-      uuid: 'org-uuid',
-      slug: 'acme',
-      name: 'Acme',
-      workspaces: [{ uuid: 'ws-uuid' }],
-    },
-  };
-  return { useOrganization: () => org };
-});
-
-// ─── Optional peer-dep icon libs: stub with concrete named exports.
-// `lucide-react` and `react-icons/*` are peer deps with no entry in the
-// package's own node_modules. Tests don't care about icon glyphs — we
-// stub every name imported by transitively-loaded SDK modules.
-vi.mock('lucide-react', () => {
-  const S = () => null;
-  return {
-    X: S, ChevronDown: S, ChevronDownIcon: S, Check: S, Mail: S, Search: S,
-    ArrowUpToLine: S, ArrowLeft: S, Filter: S, Circle: S, Smartphone: S,
-    LaptopMinimal: S, ShieldCheck: S, Globe2: S, Menu: S, MessageCircleWarning: S,
-    PanelLeftClose: S, PanelLeftOpen: S, LogOut: S, Activity: S, ReceiptText: S,
-  };
-});
-vi.mock('react-icons/ai', () => ({ AiOutlineClose: () => null }));
-vi.mock('react-icons/pi', () => {
-  const S = () => null;
-  return {
-    PiUploadBold: S, PiWarningCircleBold: S, PiCaretDownFill: S, PiCaretUpFill: S,
-  };
-});
-vi.mock('react-icons/fi', () => {
-  const S = () => null;
-  return {
-    FiAlertCircle: S, FiChevronDown: S, FiChevronUp: S, FiX: S,
-    FiDownload: S, FiSearch: S, FiFilter: S,
-  };
-});
-vi.mock('react-icons/io5', () => {
-  const S = () => null;
-  return {
-    IoArrowBack: S, IoChevronBackOutline: S, IoAdd: S, IoAttach: S,
-    IoDocumentText: S, IoNotificationsOutline: S, IoPersonOutline: S,
-    IoRefresh: S, IoRefreshOutline: S, IoSend: S, IoTimeOutline: S,
-    IoDocumentOutline: S, IoShieldCheckmarkOutline: S, IoAlertCircleOutline: S,
-    IoSettingsOutline: S,
-  };
-});
-
-// ─── PCSelect stub: replace at module source so the barrel re-export
-//    picks up the stub. PCSelect uses lucide-react, which is fragile in
-//    tests; stubbing also lets us drive it with a native <select>.
-vi.mock('../src/RedactoPrivacyCenter/ui/PCSelect', () => {
-  type Option = { value: string | number; label: string };
-  const PCSelect = ({
-    options,
-    value,
-    onChange,
-    label,
-    disabled,
-  }: {
-    options: readonly Option[];
-    value: Option | null;
-    onChange?: (opt: Option | null) => void;
-    label?: React.ReactNode;
-    disabled?: boolean;
-  }) => (
-    <label>
-      {typeof label === 'string' ? label : null}
-      <select
-        data-testid="pc-select"
-        disabled={disabled}
-        value={value ? String(value.value) : ''}
-        onChange={(e) => {
-          const opt = options.find((o) => String(o.value) === e.target.value);
-          onChange?.(opt ?? null);
-        }}
-      >
-        <option value="">--</option>
-        {options.map((o) => (
-          <option key={String(o.value)} value={String(o.value)}>
-            {o.label}
-          </option>
-        ))}
-      </select>
-    </label>
-  );
-  return { PCSelect };
-});
-
-// ─── PCModal stub: render inline always when isOpen ──────────────────────────
-vi.mock('../src/RedactoPrivacyCenter/ui/PCModal', () => ({
-  PCModal: ({
-    isOpen,
-    children,
-    footer,
-  }: {
-    isOpen: boolean;
-    children?: React.ReactNode;
-    footer?: React.ReactNode;
-  }) =>
-    isOpen ? (
-      <div data-testid="pc-modal">
-        {children}
-        {footer}
-      </div>
-    ) : null,
-}));
-
-// ─── Heavy/optional child stubs we don't want to exercise ────────────────────
-// CorrectionDataSection stub: light enough to render quickly, rich enough
-// for the per-product CORRECTION grouped-flow tests to drive selection
-// and value entry. Mirrors the real component's prop contract: a checkbox
-// per data-element plus two inputs (current / updated) per selected name.
-// Existing tests that don't interact with it still pass — they just see
-// an empty checklist when their request type isn't CORRECTION.
-vi.mock(
-  '../src/RedactoPrivacyCenter/components/DataRequest/CorrectionDataSection',
-  () => ({
-    default: ({
-      dataElements,
-      selected,
-      setSelected,
-      correctionValues,
-      setCorrectionValues,
-    }: {
-      dataElements: Array<{ uuid: string; name: string }>;
-      selected: string[];
-      setSelected: (values: string[]) => void;
-      correctionValues: Record<
-        string,
-        { current: string; updated: string }
-      >;
-      setCorrectionValues: (
-        values: Record<string, { current: string; updated: string }>,
-      ) => void;
-    }) => (
-      <div data-testid="correction-section">
-        {dataElements.map((de) => (
-          <div key={de.uuid}>
-            <label>
-              <input
-                type="checkbox"
-                aria-label={`correction-de-${de.name}`}
-                checked={selected.includes(de.name)}
-                onChange={(e) =>
-                  setSelected(
-                    e.target.checked
-                      ? [...selected, de.name]
-                      : selected.filter((n) => n !== de.name),
-                  )
-                }
-              />
-              {de.name}
-            </label>
-            {selected.includes(de.name) && (
-              <>
-                <input
-                  aria-label={`correction-current-${de.name}`}
-                  value={correctionValues[de.name]?.current ?? ''}
-                  onChange={(e) =>
-                    setCorrectionValues({
-                      ...correctionValues,
-                      [de.name]: {
-                        ...(correctionValues[de.name] ?? {
-                          current: '',
-                          updated: '',
-                        }),
-                        current: e.target.value,
-                      },
-                    })
-                  }
-                />
-                <input
-                  aria-label={`correction-updated-${de.name}`}
-                  value={correctionValues[de.name]?.updated ?? ''}
-                  onChange={(e) =>
-                    setCorrectionValues({
-                      ...correctionValues,
-                      [de.name]: {
-                        ...(correctionValues[de.name] ?? {
-                          current: '',
-                          updated: '',
-                        }),
-                        updated: e.target.value,
-                      },
-                    })
-                  }
-                />
-              </>
-            )}
-          </div>
-        ))}
-      </div>
-    ),
-  }),
-);
-vi.mock(
-  '../src/RedactoPrivacyCenter/components/DataRequest/GrievanceDataSection',
-  () => ({
-    default: () => <div data-testid="grievance-section" />,
-  }),
-);
-vi.mock(
-  '../src/RedactoPrivacyCenter/components/DataRequest/NominationDataSection',
-  () => ({
-    // Test-only stub: exposes an email input that calls the real
-    // `setNominationData` setter, so tests can drive the form to a
-    // valid NOMINATION state and exercise the actual submit path
-    // (not just the "button disabled" gate).
-    default: ({ nominationData, setNominationData }: any) => (
-      <div data-testid="nomination-section">
-        <input
-          data-testid="nominee-email-input"
-          value={nominationData?.nominee_email ?? ''}
-          onChange={(e) =>
-            setNominationData((prev: any) => ({
-              ...prev,
-              nominee_email: e.target.value,
-            }))
-          }
-        />
-      </div>
-    ),
-  }),
-);
-vi.mock('../src/RedactoPrivacyCenter/components/RequestSubmit', () => ({
-  default: ({
-    result,
-  }: {
-    result: {
-      case_id: string;
-      uuid: string;
-      product_uuid: string;
-      product_name: string;
-    };
-  }) => (
-    <div data-testid="request-submitted">
-      <span data-testid="request-submitted-case-id">{result.case_id}</span>
-      <span data-testid="request-submitted-product-uuid">
-        {result.product_uuid}
-      </span>
-      <span data-testid="request-submitted-product-name">
-        {result.product_name}
-      </span>
-    </div>
-  ),
-}));
-
-// ─── Imports under test (must come after all vi.mock calls) ──────────────────
-import Form from '../src/RedactoPrivacyCenter/components/Form';
-import {
-  RequestTypeEnum,
-  type FormData,
-  type FormProductGroup,
-} from '../src/RedactoPrivacyCenter/lib/types';
-
-const baseDataElement = (uuid: string, name: string) => ({
-  uuid,
-  name,
-  description: '',
-  enabled: true,
-  required: false,
-  given_consent: true,
-  selected: true,
-});
-
-const basePurpose = (
-  uuid: string,
-  name: string,
-  dataElements = [baseDataElement(`${uuid}-de1`, `${name}-data`)],
-) => ({
-  uuid,
-  name,
-  description: '',
-  industries: '',
-  selected: false,
-  given_consent: true,
-  data_elements: dataElements,
-});
-
-/**
- * Build a FormData stub.
- *
- * `formUuid` is the FormDataOut session uuid (a fresh uuid the backend
- * mints per call to `PrivacyCenterSDK._generate_uuid()`) — intentionally
- * distinct from any user / nominator ConsentUser uuid so tests catch
- * the regression where the SDK previously sent this as `data_principal_uuid`
- * on direct cards and the backend rejected it as `invalid_data_principal`.
- */
-const makeFormData = (
-  overrides: Partial<FormData> = {},
-  formUuid = 'form-session-uuid',
-): FormData => ({
-  uuid: formUuid,
-  name: 'Jane Principal',
-  contact: 'jane@example.com',
-  grievance_options: [],
-  purposes: [],
-  direct_groups: [],
-  nominated_groups: [],
-  ...overrides,
-});
-
-const makeGroup = (
-  overrides: Partial<FormProductGroup> = {},
-): FormProductGroup => ({
-  product_uuid: 'prod-1',
-  product_name: 'Acme Loyalty',
-  product_description: null,
-  nominator: null,
-  purposes: [basePurpose('purp-1', 'Marketing')],
-  ...overrides,
-});
-
-const setupSession = (email = 'jane@example.com') => {
-  sessionStorage.setItem('email', email);
-};
-
-const pickRequestType = (value: string) => {
-  const select = screen.getByTestId('pc-select') as HTMLSelectElement;
-  fireEvent.change(select, { target: { value } });
-};
-
-const clickProductChip = (groupKey: string) => {
-  fireEvent.click(screen.getByTestId(`product-chip-${groupKey}`));
-};
-
-describe('Form (P2-SDK-3)', () => {
-  beforeEach(() => {
-    createCaseRequest.mockReset();
-    getFormData.mockReset();
-    fetchUserConsents.mockReset();
-    baseUrlStub.ledgerBaseUrl = 'https://ledger.test/consent-ledger';
-    sessionStorage.clear();
-  });
-
-  afterEach(() => {
-    sessionStorage.clear();
-  });
-
-  it('blocks submit for product-scoped types when the DP has no consent groups', async () => {
-    // 1-form -> 1-case -> 1-product means product-scoped request types
-    // (ACCESS/ERASURE/CORRECTION) MUST have a product anchor. When the
-    // DP has zero consent groups (direct + nominated), the picker shows
-    // its empty state and submit must be hard-blocked at the validity
-    // gate so the case can never be created without an anchor.
-    setupSession();
-    getFormData.mockResolvedValue(
-      makeFormData({ direct_groups: [], nominated_groups: [] }),
-    );
-
-    render(<Form onCreateRequest={vi.fn()} />);
-    await waitFor(() => expect(getFormData).toHaveBeenCalled());
-
-    pickRequestType(RequestTypeEnum.ERASURE);
-
-    // Confirm checkbox alone is not enough — the validity gate has to
-    // see at least one product selected.
-    const confirmCheckbox = (
-      screen.getAllByRole('checkbox') as HTMLInputElement[]
-    ).find((c) => c.closest('label')?.textContent?.includes('I confirm'));
-    expect(confirmCheckbox).toBeTruthy();
-    fireEvent.click(confirmCheckbox!);
-
-    const submitButton = screen.getByRole(
-      'button',
-      { name: /^submit$/i },
-    ) as HTMLButtonElement;
-    expect(submitButton.disabled).toBe(true);
-  });
-
-  it('skips the ledger picker overlay when no ledgerBaseUrl is configured', async () => {
-    // Without a ledger, consents still live in Python and the form/data
-    // groups are authoritative — the overlay must not fire a user-consents
-    // read (it would hit the legacy endpoint and mis-map its shape).
-    baseUrlStub.ledgerBaseUrl = undefined;
-    setupSession();
-    getFormData.mockResolvedValue(
-      makeFormData({
-        direct_groups: [
-          makeGroup(),
-          makeGroup({
-            product_uuid: 'prod-direct-2',
-            product_name: 'Acme Rewards',
-            purposes: [basePurpose('purp-2', 'Analytics')],
-          }),
-        ],
-      }),
-    );
-
-    render(<Form onCreateRequest={vi.fn()} />);
-    await waitFor(() => expect(getFormData).toHaveBeenCalled());
-
-    pickRequestType(RequestTypeEnum.ERASURE);
-    await waitFor(() => {
-      expect(screen.getByText('Acme Loyalty')).toBeInTheDocument();
-    });
-    expect(fetchUserConsents).not.toHaveBeenCalled();
-  });
-
-  it('runs the ledger picker overlay when ledgerBaseUrl is configured', async () => {
-    setupSession();
-    getFormData.mockResolvedValue(
-      makeFormData({ direct_groups: [makeGroup()] }),
-    );
-
-    render(<Form onCreateRequest={vi.fn()} />);
-    await waitFor(() => expect(getFormData).toHaveBeenCalled());
-
-    await waitFor(() => expect(fetchUserConsents).toHaveBeenCalled());
-  });
-
-  it('renders the product step for DSAR types when direct_groups is present', async () => {
-    setupSession();
-    const direct = makeGroup({
-      product_uuid: 'prod-direct',
-      product_name: 'Acme Loyalty',
-    });
-    const second = makeGroup({
-      product_uuid: 'prod-direct-2',
-      product_name: 'Acme Rewards',
-      purposes: [basePurpose('purp-2', 'Analytics')],
-    });
-    getFormData.mockResolvedValue(
-      makeFormData({ direct_groups: [direct, second] }),
-    );
-
-    render(<Form onCreateRequest={vi.fn()} />);
-    await waitFor(() => expect(getFormData).toHaveBeenCalled());
-
-    pickRequestType(RequestTypeEnum.ERASURE);
-
-    await waitFor(() => {
-      expect(screen.getByText('Acme Loyalty')).toBeInTheDocument();
-    });
-    expect(screen.getByText('Acme Rewards')).toBeInTheDocument();
-    expect(
-      screen.getByText(/Select a product for your erasure request/i),
-    ).toBeInTheDocument();
-  });
-
-  it('skips the product selection step when only one consent group exists', async () => {
-    // TECH-3712 UX: when the DP has exactly one consent group total
-    // (direct + nominated combined), ProductSelectionSection is friction —
-    // step 2 must not render at all. The lone group is auto-selected so
-    // step 3 (per-product purpose picker) renders directly.
-    setupSession();
-    const soleGroup = makeGroup({
-      product_uuid: 'prod-sole',
-      product_name: 'Acme Loyalty',
-      purposes: [basePurpose('purp-sole', 'Marketing')],
-    });
-    getFormData.mockResolvedValue(
-      makeFormData({ direct_groups: [soleGroup], nominated_groups: [] }),
-    );
-
-    render(<Form onCreateRequest={vi.fn()} />);
-    await waitFor(() => expect(getFormData).toHaveBeenCalled());
-
-    pickRequestType(RequestTypeEnum.ERASURE);
-
-    // Per-product card for the sole group should appear without the user
-    // touching a product card (auto-selected at Form level).
-    await waitFor(() => {
-      expect(
-        screen.getByTestId('per-product-purposes-prod-sole'),
-      ).toBeInTheDocument();
-    });
-
-    // ProductSelectionSection itself must NOT render. The step-2 product
-    // chip (data-testid `product-chip-prod-sole`) and the step-2 header
-    // ("Select a product...") are both signals it rendered.
-    expect(
-      screen.queryByTestId('product-chip-prod-sole'),
-    ).not.toBeInTheDocument();
-    expect(
-      screen.queryByText(/Select a product/i),
-    ).not.toBeInTheDocument();
-
-    // Step 3 (per-product purpose picker) is fully wired up: the purpose
-    // checkbox is present and tickable.
-    await waitFor(() => {
-      expect(screen.getByText('Marketing')).toBeInTheDocument();
-    });
-    const marketingCheckbox = screen
-      .getByText('Marketing')
-      .closest('label')
-      ?.querySelector('input[type="checkbox"]') as HTMLInputElement | null;
-    expect(marketingCheckbox).toBeTruthy();
-  });
-
-  it('skips the product step for nomination and grievance', async () => {
-    setupSession();
-    const direct = makeGroup();
-    getFormData.mockResolvedValue(
-      makeFormData({
-        direct_groups: [direct],
-        grievance_options: [
-          { value: 'consent_violation', label: 'Consent violation' },
-        ],
-      }),
-    );
-
-    render(<Form onCreateRequest={vi.fn()} />);
-    await waitFor(() => expect(getFormData).toHaveBeenCalled());
-
-    pickRequestType(RequestTypeEnum.GRIEVANCE);
-
-    await waitFor(() => {
-      expect(screen.getByTestId('grievance-section')).toBeInTheDocument();
-    });
-    expect(
-      screen.queryByText(/Select a product/i),
-    ).not.toBeInTheDocument();
-
-    pickRequestType(RequestTypeEnum.NOMINATION);
-
-    await waitFor(() => {
-      expect(screen.getByTestId('nomination-section')).toBeInTheDocument();
-    });
-    expect(
-      screen.queryByText(/Select a product/i),
-    ).not.toBeInTheDocument();
-  });
-
-  it('fires one createCaseRequest with correct anchors on single-product erasure submit', async () => {
-    setupSession();
-    const directGroup = makeGroup({
-      product_uuid: 'prod-direct',
-      product_name: 'Acme Loyalty',
-      purposes: [basePurpose('purp-direct', 'Marketing')],
-    });
-    const nominatedGroup = makeGroup({
-      product_uuid: 'prod-nominated',
-      product_name: 'Partner Bank',
-      nominator: {
-        uuid: 'nominator-uuid',
-        org_user_id: 'org-user-1',
-        name: 'Alice',
-        email: 'alice@example.com',
-      },
-      purposes: [basePurpose('purp-nominated', 'Analytics')],
-    });
-    getFormData.mockResolvedValue(
-      makeFormData({
-        direct_groups: [directGroup],
-        nominated_groups: [nominatedGroup],
-      }),
-    );
-    createCaseRequest.mockResolvedValueOnce({
-      case_id: 'CASE-1',
-      uuid: 'uuid-1',
-    });
-
-    render(<Form onCreateRequest={vi.fn()} />);
-    await waitFor(() => expect(getFormData).toHaveBeenCalled());
-
-    pickRequestType(RequestTypeEnum.ERASURE);
-
-    await waitFor(() =>
-      expect(screen.getByText('Acme Loyalty')).toBeInTheDocument(),
-    );
-    clickProductChip('prod-direct');
-
-    await waitFor(() => {
-      expect(
-        screen.getByTestId('per-product-purposes-prod-direct'),
-      ).toBeInTheDocument();
-    });
-
-    const marketingCheckbox = screen
-      .getByText('Marketing')
-      .closest('label')
-      ?.querySelector('input[type="checkbox"]') as HTMLInputElement | null;
-    expect(marketingCheckbox).toBeTruthy();
-    fireEvent.click(marketingCheckbox!);
-
-    const allCheckboxes = screen.getAllByRole(
-      'checkbox',
-    ) as HTMLInputElement[];
-    const confirmCheckbox = allCheckboxes.find((c) =>
-      c.closest('label')?.textContent?.includes('I confirm'),
-    );
-    expect(confirmCheckbox).toBeTruthy();
-    fireEvent.click(confirmCheckbox!);
-
-    const submitButton = screen.getByRole('button', { name: /^submit$/i });
-    expect(submitButton).not.toBeDisabled();
-    await act(async () => {
-      fireEvent.click(submitButton);
-    });
-
-    // ERASURE asks whether to also revoke consent before it submits.
-    // Choosing "Yes" (revokeConsentYes) sets revoke_consent_on_fulfilment=true.
-    const revokeYesButton = await screen.findByRole('button', { name: 'Yes' });
-    await act(async () => {
-      fireEvent.click(revokeYesButton);
-    });
-
-    await waitFor(() => {
-      expect(createCaseRequest).toHaveBeenCalledTimes(1);
-    });
-
-    const payload = createCaseRequest.mock.calls[0][2];
-    expect(payload.product_uuid).toBe('prod-direct');
-    expect('data_principal_uuid' in payload).toBe(false);
-    expect(payload.uuid).toBe('form-session-uuid');
-    expect(payload.request_type).toBe('erasure');
-    // The user chose "Yes" in the consent-revoke modal, so the backend's
-    // auto-revoke task fires when the case is fulfilled (DPDPA Sec 12:
-    // erasing data implies revoking the consent that authorized
-    // processing it).
-    expect(payload.revoke_consent_on_fulfilment).toBe(true);
-
-    await waitFor(() => {
-      expect(screen.getByTestId('request-submitted')).toBeInTheDocument();
-    });
-  });
-
-  it('opens the consent-revoke modal on erasure and sends revoke_consent_on_fulfilment=false when the user declines', async () => {
-    setupSession();
-    const directGroup = makeGroup({
-      product_uuid: 'prod-direct',
-      product_name: 'Acme Loyalty',
-      purposes: [basePurpose('purp-direct', 'Marketing')],
-    });
-    const nominatedGroup = makeGroup({
-      product_uuid: 'prod-nominated',
-      product_name: 'Partner Bank',
-      nominator: {
-        uuid: 'nominator-uuid',
-        org_user_id: 'org-user-1',
-        name: 'Alice',
-        email: 'alice@example.com',
-      },
-      purposes: [basePurpose('purp-nominated', 'Analytics')],
-    });
-    getFormData.mockResolvedValue(
-      makeFormData({
-        direct_groups: [directGroup],
-        nominated_groups: [nominatedGroup],
-      }),
-    );
-    createCaseRequest.mockResolvedValueOnce({
-      case_id: 'CASE-2',
-      uuid: 'uuid-2',
-    });
-
-    render(<Form onCreateRequest={vi.fn()} />);
-    await waitFor(() => expect(getFormData).toHaveBeenCalled());
-
-    pickRequestType(RequestTypeEnum.ERASURE);
-
-    await waitFor(() =>
-      expect(screen.getByText('Acme Loyalty')).toBeInTheDocument(),
-    );
-    clickProductChip('prod-direct');
-
-    await waitFor(() => {
-      expect(
-        screen.getByTestId('per-product-purposes-prod-direct'),
-      ).toBeInTheDocument();
-    });
-
-    const marketingCheckbox = screen
-      .getByText('Marketing')
-      .closest('label')
-      ?.querySelector('input[type="checkbox"]') as HTMLInputElement | null;
-    expect(marketingCheckbox).toBeTruthy();
-    fireEvent.click(marketingCheckbox!);
-
-    const confirmCheckbox = (
-      screen.getAllByRole('checkbox') as HTMLInputElement[]
-    ).find((c) => c.closest('label')?.textContent?.includes('I confirm'));
-    expect(confirmCheckbox).toBeTruthy();
-    fireEvent.click(confirmCheckbox!);
-
-    await act(async () => {
-      fireEvent.click(screen.getByRole('button', { name: /^submit$/i }));
-    });
-
-    // The consent-revoke modal must appear, and no request fires until the
-    // user makes a choice. ('Revoke consent?' === revokeConsentModalTitle stub.)
-    expect(await screen.findByText('Revoke consent?')).toBeInTheDocument();
-    expect(createCaseRequest).not.toHaveBeenCalled();
-
-    // Declining ('No' === revokeConsentNo) submits with the flag explicitly false.
-    await act(async () => {
-      fireEvent.click(screen.getByRole('button', { name: 'No' }));
-    });
-
-    await waitFor(() => {
-      expect(createCaseRequest).toHaveBeenCalledTimes(1);
-    });
-    const payload = createCaseRequest.mock.calls[0][2];
-    expect(payload.request_type).toBe('erasure');
-    expect(payload.revoke_consent_on_fulfilment).toBe(false);
-  });
-
-  it('switches the inline purpose panel when another product chip is selected', async () => {
-    setupSession();
-    const creditCard = makeGroup({
-      product_uuid: 'prod-cc',
-      product_name: 'Credit Card',
-      purposes: [basePurpose('purp-cc', 'Marketing')],
-    });
-    const savings = makeGroup({
-      product_uuid: 'prod-sav',
-      product_name: 'Savings Account',
-      purposes: [basePurpose('purp-sav', 'Analytics')],
-    });
-    getFormData.mockResolvedValue(
-      makeFormData({ direct_groups: [creditCard, savings] }),
-    );
-
-    render(<Form onCreateRequest={vi.fn()} />);
-    await waitFor(() => expect(getFormData).toHaveBeenCalled());
-
-    pickRequestType(RequestTypeEnum.ERASURE);
-
-    await waitFor(() =>
-      expect(screen.getByText('Credit Card')).toBeInTheDocument(),
-    );
-    clickProductChip('prod-cc');
-
-    const ccPanel = await screen.findByTestId('per-product-purposes-prod-cc');
-    expect(within(ccPanel).getByText('Credit Card')).toBeInTheDocument();
-    expect(within(ccPanel).getByText('Marketing')).toBeInTheDocument();
-    expect(
-      screen.queryByTestId('per-product-purposes-prod-sav'),
-    ).not.toBeInTheDocument();
-
-    clickProductChip('prod-sav');
-
-    const savPanel = await screen.findByTestId('per-product-purposes-prod-sav');
-    expect(within(savPanel).getByText('Savings Account')).toBeInTheDocument();
-    expect(within(savPanel).getByText('Analytics')).toBeInTheDocument();
-    expect(
-      screen.queryByTestId('per-product-purposes-prod-cc'),
-    ).not.toBeInTheDocument();
-
-    clickProductChip('prod-cc');
-    await screen.findByTestId('per-product-purposes-prod-cc');
-    expect(screen.getByText('Marketing')).toBeInTheDocument();
-  });
-
-  it('disambiguates direct vs nominated chips on the same product via inline panel header', async () => {
-    setupSession();
-    const direct = makeGroup({
-      product_uuid: 'prod-cc',
-      product_name: 'Credit Card',
-      purposes: [basePurpose('purp-direct', 'Marketing')],
-    });
-    const nominated = makeGroup({
-      product_uuid: 'prod-cc',
-      product_name: 'Credit Card',
-      nominator: {
-        uuid: 'alice-uuid',
-        org_user_id: 'org-user-alice',
-        name: 'Alice',
-        email: 'alice@example.com',
-      },
-      purposes: [basePurpose('purp-nominated', 'Analytics')],
-    });
-    getFormData.mockResolvedValue(
-      makeFormData({
-        direct_groups: [direct],
-        nominated_groups: [nominated],
-      }),
-    );
-
-    render(<Form onCreateRequest={vi.fn()} />);
-    await waitFor(() => expect(getFormData).toHaveBeenCalled());
-
-    pickRequestType(RequestTypeEnum.ERASURE);
-
-    await waitFor(() =>
-      expect(screen.getByTestId('product-chip-prod-cc')).toBeInTheDocument(),
-    );
-    clickProductChip('prod-cc');
-
-    const directPanel = await screen.findByTestId(
-      'per-product-purposes-prod-cc',
-    );
-    expect(within(directPanel).getByText('Credit Card')).toBeInTheDocument();
-    expect(
-      within(directPanel).queryByText(/acting on behalf of/i),
-    ).not.toBeInTheDocument();
-
-    clickProductChip('prod-cc:alice-uuid');
-
-    const nominatedPanel = await screen.findByTestId(
-      'per-product-purposes-prod-cc:alice-uuid',
-    );
-    expect(within(nominatedPanel).getByText('Credit Card')).toBeInTheDocument();
-    expect(
-      within(nominatedPanel).getByText(/acting on behalf of Alice/i),
-    ).toBeInTheDocument();
-  });
-
-  it('fires one createCaseRequest with per-product correction_data on single-product correction submit', async () => {
-    setupSession();
-    const loyalty = makeGroup({
-      product_uuid: 'prod-loyalty',
-      product_name: 'Acme Loyalty',
-      purposes: [
-        basePurpose('purp-loyalty', 'Marketing', [
-          baseDataElement('de-loyalty-email', 'email'),
-        ]),
-      ],
-    });
-    const rewards = makeGroup({
-      product_uuid: 'prod-rewards',
-      product_name: 'Acme Rewards',
-      purposes: [
-        basePurpose('purp-rewards', 'Analytics', [
-          baseDataElement('de-rewards-phone', 'phone'),
-        ]),
-      ],
-    });
-    getFormData.mockResolvedValue(
-      makeFormData({
-        direct_groups: [loyalty, rewards],
-        purposes: [
-          {
-            purpose: basePurpose('purp-loyalty', 'Marketing', [
-              baseDataElement('de-loyalty-email', 'email'),
-            ]),
-          },
-          {
-            purpose: basePurpose('purp-rewards', 'Analytics', [
-              baseDataElement('de-rewards-phone', 'phone'),
-            ]),
-          },
-        ],
-      }),
-    );
-    createCaseRequest.mockResolvedValueOnce({
-      case_id: 'CASE-1',
-      uuid: 'uuid-1',
-    });
-
-    render(<Form onCreateRequest={vi.fn()} />);
-    await waitFor(() => expect(getFormData).toHaveBeenCalled());
-
-    pickRequestType(RequestTypeEnum.CORRECTION);
-
-    await waitFor(() =>
-      expect(screen.getByText('Acme Loyalty')).toBeInTheDocument(),
-    );
-    clickProductChip('prod-loyalty');
-
-    const loyaltyPanel = await screen.findByTestId(
-      'per-product-purposes-prod-loyalty',
-    );
-
-    expect(
-      within(loyaltyPanel).getByLabelText('correction-de-email'),
-    ).toBeInTheDocument();
-    expect(
-      within(loyaltyPanel).queryByLabelText('correction-de-phone'),
-    ).not.toBeInTheDocument();
-
-    fireEvent.click(within(loyaltyPanel).getByLabelText('correction-de-email'));
-    fireEvent.change(
-      within(loyaltyPanel).getByLabelText('correction-current-email'),
-      { target: { value: 'old@x.com' } },
-    );
-    fireEvent.change(
-      within(loyaltyPanel).getByLabelText('correction-updated-email'),
-      { target: { value: 'new@x.com' } },
-    );
-
-    const allCheckboxes = screen.getAllByRole(
-      'checkbox',
-    ) as HTMLInputElement[];
-    const confirmCheckbox = allCheckboxes.find((c) =>
-      c.closest('label')?.textContent?.includes('I confirm'),
-    );
-    expect(confirmCheckbox).toBeTruthy();
-    fireEvent.click(confirmCheckbox!);
-
-    const submitButton = screen.getByRole('button', { name: /^submit$/i });
-    expect(submitButton).not.toBeDisabled();
-    await act(async () => {
-      fireEvent.click(submitButton);
-    });
-
-    await waitFor(() => {
-      expect(createCaseRequest).toHaveBeenCalledTimes(1);
-    });
-
-    const payload = createCaseRequest.mock.calls[0][2];
-    expect(payload.product_uuid).toBe('prod-loyalty');
-    expect(payload.request_type).toBe('correction');
-    expect('data_principal_uuid' in payload).toBe(false);
-    expect(payload.request_details.purposes).toEqual([]);
-    expect(payload.request_details.correction_data).toEqual([
-      { name: 'email', curr_value: 'old@x.com', new_value: 'new@x.com' },
-    ]);
-
-    await waitFor(() => {
-      expect(screen.getByTestId('request-submitted')).toBeInTheDocument();
-    });
-  });
-
-  it('submits NOMINATION as an org-level case without product_uuid or data_principal_uuid', async () => {
-    // NOMINATION is org-level — the picker is not rendered and the
-    // payload must omit `product_uuid` (backend rejects it on these
-    // types) AND `data_principal_uuid` (this is a direct grant, not a
-    // nominee acting on someone's behalf). Even when the contact has
-    // consent groups available, NOMINATION must not leak them onto
-    // the case anchor.
-    setupSession();
-    const direct = makeGroup();
-    getFormData.mockResolvedValue(
-      makeFormData({ direct_groups: [direct], nominated_groups: [] }),
-    );
-    createCaseRequest.mockResolvedValueOnce({
-      case_id: 'CASE-NOM',
-      uuid: 'uuid-nom',
-    });
-
-    render(<Form onCreateRequest={vi.fn()} />);
-    await waitFor(() => expect(getFormData).toHaveBeenCalled());
-
-    pickRequestType(RequestTypeEnum.NOMINATION);
-
-    await waitFor(() => {
-      expect(screen.getByTestId('nomination-section')).toBeInTheDocument();
-    });
-    // Product picker must not render for NOMINATION even with groups.
-    expect(
-      screen.queryByText(/Select a product/i),
-    ).not.toBeInTheDocument();
-
-    const submitButton = screen.getByRole(
-      'button',
-      { name: /^submit$/i },
-    ) as HTMLButtonElement;
-    // Sanity: gate is closed before a valid nominee email is provided.
-    expect(submitButton.disabled).toBe(true);
-
-    // Drive the form to a valid NOMINATION state via the stubbed
-    // nomination input (see vi.mock above).
-    const emailInput = screen.getByTestId('nominee-email-input');
-    fireEvent.change(emailInput, { target: { value: 'nominee@example.com' } });
-
-    const confirmCheckbox = (
-      screen.getAllByRole('checkbox') as HTMLInputElement[]
-    ).find((c) => c.closest('label')?.textContent?.includes('I confirm'));
-    expect(confirmCheckbox).toBeTruthy();
-    fireEvent.click(confirmCheckbox!);
-
-    await waitFor(() => {
-      const btn = screen.getByRole(
-        'button',
-        { name: /^submit$/i },
-      ) as HTMLButtonElement;
-      expect(btn.disabled).toBe(false);
-    });
-
-    fireEvent.click(
-      screen.getByRole('button', { name: /^submit$/i }),
-    );
-
-    await waitFor(() => expect(createCaseRequest).toHaveBeenCalled());
-
-    const payload = createCaseRequest.mock.calls[0][2];
-    expect(payload.request_type).toBe('nomination');
-    expect(payload).not.toHaveProperty('product_uuid');
-    expect(payload).not.toHaveProperty('data_principal_uuid');
-    expect(payload.request_details.nomination_data).toMatchObject({
-      nominee_email: 'nominee@example.com',
-    });
-  });
-
-  it('sends data_principal_uuid and product anchors on a nominated-card submit', async () => {
-    setupSession();
-    const otherDirect = makeGroup({
-      product_uuid: 'prod-other',
-      product_name: 'Other Product',
-      purposes: [basePurpose('purp-other', 'Other')],
-    });
-    const nominated = makeGroup({
-      product_uuid: 'prod-cc',
-      product_name: 'Credit Card',
-      nominator: {
-        uuid: 'alice-uuid',
-        org_user_id: 'org-user-alice',
-        name: 'Alice',
-        email: 'alice@example.com',
-      },
-      purposes: [basePurpose('purp-nominated', 'Analytics')],
-    });
-    getFormData.mockResolvedValue(
-      makeFormData({
-        direct_groups: [otherDirect],
-        nominated_groups: [nominated],
-      }),
-    );
-    createCaseRequest.mockResolvedValueOnce({
-      case_id: 'CASE-NOMINATED',
-      uuid: 'uuid-nominated',
-    });
-
-    render(<Form onCreateRequest={vi.fn()} />);
-    await waitFor(() => expect(getFormData).toHaveBeenCalled());
-
-    pickRequestType(RequestTypeEnum.ERASURE);
-
-    await waitFor(() =>
-      expect(
-        screen.getByTestId('product-chip-prod-cc:alice-uuid'),
-      ).toBeInTheDocument(),
-    );
-    clickProductChip('prod-cc:alice-uuid');
-
-    const nominatedPanel = await screen.findByTestId(
-      'per-product-purposes-prod-cc:alice-uuid',
-    );
-    fireEvent.click(
-      within(nominatedPanel)
-        .getByText('Analytics')
-        .closest('label')!
-        .querySelector('input[type="checkbox"]')!,
-    );
-
-    const confirmCheckbox = (
-      screen.getAllByRole('checkbox') as HTMLInputElement[]
-    ).find((c) => c.closest('label')?.textContent?.includes('I confirm'));
-    fireEvent.click(confirmCheckbox!);
-
-    await act(async () => {
-      fireEvent.click(screen.getByRole('button', { name: /^submit$/i }));
-    });
-
-    // ERASURE routes through the consent-revoke modal before submitting.
-    await act(async () => {
-      fireEvent.click(await screen.findByRole('button', { name: 'Yes' }));
-    });
-
-    await waitFor(() => {
-      expect(createCaseRequest).toHaveBeenCalledTimes(1);
-    });
-
-    const payload = createCaseRequest.mock.calls[0][2];
-    expect(payload.product_uuid).toBe('prod-cc');
-    // Nominated cards send data_principal_uuid sourced from the
-    // nominator's ConsentUser uuid — NOT from formData.uuid.
-    expect(payload.data_principal_uuid).toBe('alice-uuid');
-
-    await waitFor(() => {
-      expect(screen.getByTestId('request-submitted')).toBeInTheDocument();
-    });
-    expect(
-      screen.getByTestId('request-submitted-product-uuid').textContent,
-    ).toBe('prod-cc');
-    expect(
-      screen.getByTestId('request-submitted-case-id').textContent,
-    ).toBe('CASE-NOMINATED');
-  });
-
-  it('disables submit when the selected CORRECTION product has incomplete entries', async () => {
-    setupSession();
-    const loyalty = makeGroup({
-      product_uuid: 'prod-loyalty',
-      product_name: 'Acme Loyalty',
-      purposes: [
-        basePurpose('purp-loyalty', 'Marketing', [
-          baseDataElement('de-loyalty-email', 'email'),
-        ]),
-      ],
-    });
-    const rewards = makeGroup({
-      product_uuid: 'prod-rewards',
-      product_name: 'Acme Rewards',
-      purposes: [
-        basePurpose('purp-rewards', 'Analytics', [
-          baseDataElement('de-rewards-phone', 'phone'),
-        ]),
-      ],
-    });
-    getFormData.mockResolvedValue(
-      makeFormData({ direct_groups: [loyalty, rewards] }),
-    );
-
-    render(<Form onCreateRequest={vi.fn()} />);
-    await waitFor(() => expect(getFormData).toHaveBeenCalled());
-
-    pickRequestType(RequestTypeEnum.CORRECTION);
-
-    await waitFor(() =>
-      expect(screen.getByText('Acme Loyalty')).toBeInTheDocument(),
-    );
-    clickProductChip('prod-loyalty');
-
-    const loyaltyPanel = await screen.findByTestId(
-      'per-product-purposes-prod-loyalty',
-    );
-
-    const allCheckboxes = screen.getAllByRole(
-      'checkbox',
-    ) as HTMLInputElement[];
-    const confirmCheckbox = allCheckboxes.find((c) =>
-      c.closest('label')?.textContent?.includes('I confirm'),
-    );
-    expect(confirmCheckbox).toBeTruthy();
-    fireEvent.click(confirmCheckbox!);
-
-    const submitButton = screen.getByRole(
-      'button',
-      { name: /^submit$/i },
-    ) as HTMLButtonElement;
-    expect(submitButton.disabled).toBe(true);
-
-    fireEvent.click(within(loyaltyPanel).getByLabelText('correction-de-email'));
-    fireEvent.change(
-      within(loyaltyPanel).getByLabelText('correction-current-email'),
-      { target: { value: 'old@x.com' } },
-    );
-    fireEvent.change(
-      within(loyaltyPanel).getByLabelText('correction-updated-email'),
-      { target: { value: 'new@x.com' } },
-    );
-
-    expect(
-      (screen.getByRole('button', { name: /^submit$/i }) as HTMLButtonElement)
-        .disabled,
-    ).toBe(false);
-  });
-});