@redacto.io/consent-sdk-react 9.1.0 → 9.2.0-beta.1

package/tests/Form.test.tsx

@@ -0,0 +1,1170 @@
+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}} active purpose',
+    activePurposes_other: '{{count}} active 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 ───────────────────────────────────────────────────────────────
+// `createCaseRequest` (legacy single-case path) and `createCaseRequestUnsafe`
+// (batch path) are both shipped at runtime. We route them through one
+// shared mock so existing tests can keep using `createCaseRequest.mock...`
+// regardless of which code path the Form picks. Tests that need to assert
+// throw-vs-null semantics override the relevant mock individually.
+const createCaseRequest = vi.fn();
+const getFormData = vi.fn();
+vi.mock('../src/RedactoPrivacyCenter/lib/api', () => ({
+  createCaseRequest: (...args: unknown[]) => createCaseRequest(...args),
+  createCaseRequestUnsafe: (...args: unknown[]) => createCaseRequest(...args),
+  getFormData: (...args: unknown[]) => getFormData(...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 };
+});
+
+vi.mock('../src/RedactoPrivacyCenter/context/BaseUrlContext', () => {
+  const base = {
+    consentClient: { get: () => Promise.resolve(null), post: () => Promise.resolve(null) },
+    baseUrl: 'https://consent.test',
+  };
+  return { useBaseUrl: () => base };
+});
+
+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',
+  () => ({
+    default: () => <div data-testid="nomination-section" />,
+  }),
+);
+vi.mock('../src/RedactoPrivacyCenter/components/RequestSubmit', () => ({
+  default: ({
+    result,
+    onRetry,
+  }: {
+    result: {
+      succeeded: Array<{
+        case_id: string;
+        product_uuid: string;
+        product_name: string;
+        group_key: string;
+      }>;
+      failed: Array<{
+        group_key: string;
+        product_uuid: string;
+        product_name: string;
+        error: string;
+      }>;
+    };
+    onRetry?: (groupKey: string) => void;
+  }) => (
+    <div data-testid="request-submitted">
+      <ul data-testid="request-submitted-succeeded">
+        {result.succeeded.map((s) => (
+          <li key={`${s.group_key}:${s.case_id}`} data-group-key={s.group_key}>
+            {s.case_id}
+          </li>
+        ))}
+      </ul>
+      <ul data-testid="request-submitted-failed">
+        {result.failed.map((f) => (
+          <li key={f.group_key} data-group-key={f.group_key}>
+            {f.product_name}
+            {onRetry !== undefined && (
+              <button
+                type="button"
+                onClick={() => onRetry(f.group_key)}
+                aria-label={`retry-${f.group_key}`}
+              >
+                Retry
+              </button>
+            )}
+          </li>
+        ))}
+      </ul>
+    </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();
+    sessionStorage.clear();
+  });
+
+  afterEach(() => {
+    sessionStorage.clear();
+  });
+
+  it('falls back to the legacy flat render when direct_groups is undefined', async () => {
+    setupSession();
+    // Legacy backend shape: no direct_groups field at all.
+    const legacyData = {
+      uuid: 'form-session-uuid',
+      name: 'Jane',
+      contact: 'jane@example.com',
+      grievance_options: [],
+      purposes: [{ purpose: basePurpose('purp-1', 'Marketing') }],
+    } as unknown as FormData;
+    getFormData.mockResolvedValue(legacyData);
+
+    // The Form emits a one-time console.warn when it falls back to the
+    // legacy render so customer developers notice their backend hasn't
+    // shipped Phase 1. Spy on it so we can both silence and assert.
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+    render(<Form onCreateRequest={vi.fn()} />);
+    await waitFor(() => expect(getFormData).toHaveBeenCalled());
+
+    pickRequestType(RequestTypeEnum.ERASURE);
+
+    // Legacy purpose row should appear; the grouped header must not.
+    await waitFor(() => {
+      expect(screen.getByText('Marketing')).toBeInTheDocument();
+    });
+    expect(
+      screen.queryByText(/Select a product/i),
+    ).not.toBeInTheDocument();
+
+    expect(warnSpy).toHaveBeenCalledWith(
+      expect.stringContaining('Backend response lacks direct_groups'),
+    );
+    warnSpy.mockRestore();
+  });
+
+  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);
+    });
+
+    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');
+    expect(payload.revoke_consent_on_fulfilment).toBe(false);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('request-submitted')).toBeInTheDocument();
+    });
+  });
+
+  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('falls back to the legacy flat CorrectionDataSection when direct_groups is undefined', async () => {
+    // TECH-3712 (correction grouped path) regression guard: when the
+    // backend hasn't shipped Phase 1 yet (`direct_groups` absent), the
+    // CORRECTION render path must drop back to the legacy flat-data-element
+    // CorrectionDataSection and the submit must produce a single POST
+    // without `product_uuid`.
+    setupSession();
+    const legacyData = {
+      uuid: 'form-session-uuid',
+      name: 'Jane',
+      contact: 'jane@example.com',
+      grievance_options: [],
+      purposes: [
+        {
+          purpose: basePurpose('purp-1', 'Marketing', [
+            baseDataElement('de-1', 'email'),
+          ]),
+        },
+      ],
+    } as unknown as FormData;
+    getFormData.mockResolvedValue(legacyData);
+    createCaseRequest.mockResolvedValueOnce({
+      case_id: 'CASE-LEGACY',
+      uuid: 'uuid-legacy',
+    });
+
+    // Silence the legacy-mode warning emitted by Form.tsx so test output
+    // stays focused on the assertions.
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+    render(<Form onCreateRequest={vi.fn()} />);
+    await waitFor(() => expect(getFormData).toHaveBeenCalled());
+
+    pickRequestType(RequestTypeEnum.CORRECTION);
+
+    // The product-step header must NOT appear — legacy fallback skips it.
+    expect(
+      screen.queryByText(/Select a product/i),
+    ).not.toBeInTheDocument();
+
+    // The legacy flat CorrectionDataSection should render with the
+    // backend's flat `purposes` data elements.
+    const correctionSection = await screen.findByTestId('correction-section');
+    expect(
+      within(correctionSection).getByLabelText('correction-de-email'),
+    ).toBeInTheDocument();
+
+    fireEvent.click(
+      within(correctionSection).getByLabelText('correction-de-email'),
+    );
+    fireEvent.change(
+      within(correctionSection).getByLabelText('correction-current-email'),
+      { target: { value: 'old' } },
+    );
+    fireEvent.change(
+      within(correctionSection).getByLabelText('correction-updated-email'),
+      { target: { value: 'new' } },
+    );
+
+    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);
+    });
+
+    // Single POST with no product anchor — the legacy single-case path.
+    const payload = createCaseRequest.mock.calls[0][2];
+    expect(payload.request_type).toBe('correction');
+    expect(payload.product_uuid).toBeUndefined();
+    expect('data_principal_uuid' in payload).toBe(false);
+    expect(payload.request_details.correction_data).toEqual([
+      { name: 'email', curr_value: 'old', new_value: 'new' },
+    ]);
+
+    warnSpy.mockRestore();
+  });
+
+  it('records group_key on successful single-product batch submission', 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 }));
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('request-submitted')).toBeInTheDocument();
+    });
+
+    const succeededItems = within(
+      screen.getByTestId('request-submitted-succeeded'),
+    ).getAllByRole('listitem');
+    expect(succeededItems).toHaveLength(1);
+    expect(succeededItems[0].getAttribute('data-group-key')).toBe(
+      'prod-cc:alice-uuid',
+    );
+  });
+
+  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);
+  });
+});