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

package/tests/ProductSelectionSection.test.tsx

@@ -0,0 +1,293 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+
+vi.mock('react-i18next', () => {
+  const en: Record<string, string> = {
+    activePurposes_one: '{{count}} active purpose',
+    activePurposes_other: '{{count}} active purposes',
+    noProductsAvailable: 'No products available',
+    noProductsAvailableDescription: 'You have no consents to manage yet.',
+    nominationChipSuffix: '· {{nominator}}',
+    selectProductsForRequest:
+      'Select a product for your {{requestType}} request',
+    selectProductsForRequestGeneric: 'Select a product to continue',
+  };
+  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' } }),
+  };
+});
+
+import {
+  ProductSelectionSection,
+  productGroupKey,
+} from '../src/RedactoPrivacyCenter/components/DataRequest/ProductSelectionSection';
+import type {
+  FormProductGroup,
+  NominatorInfo,
+} from '../src/RedactoPrivacyCenter/lib/types';
+
+const makeGroup = (
+  overrides: Partial<FormProductGroup> = {},
+): FormProductGroup => ({
+  product_uuid: 'prod-1',
+  product_name: 'Acme Loyalty',
+  product_description: null,
+  nominator: null,
+  purposes: [],
+  ...overrides,
+});
+
+const makeNominator = (overrides: Partial<NominatorInfo> = {}): NominatorInfo => ({
+  org_user_id: 'org-user-1',
+  name: 'Jane Doe',
+  uuid: 'nom-uuid-1',
+  email: 'jane@example.com',
+  ...overrides,
+});
+
+describe('ProductSelectionSection', () => {
+  it('renders direct groups as pill chips in a wrapping row', () => {
+    const direct = makeGroup({
+      product_uuid: 'prod-direct',
+      product_name: 'Acme Loyalty',
+      purposes: [
+        {
+          uuid: 'p1',
+          data_elements: [{ uuid: 'de1', selected: true }],
+        } as never,
+        {
+          uuid: 'p2',
+          data_elements: [{ uuid: 'de2', selected: true }],
+        } as never,
+      ],
+    });
+    const second = makeGroup({
+      product_uuid: 'prod-direct-2',
+      product_name: 'Acme Rewards',
+    });
+
+    render(
+      <ProductSelectionSection
+        directGroups={[direct, second]}
+        nominatedGroups={[]}
+        selectedProductKey={null}
+        onSelect={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByText('Acme Loyalty')).toBeInTheDocument();
+    expect(screen.getByText('Acme Rewards')).toBeInTheDocument();
+    expect(screen.getByTestId('product-selection-chips')).toHaveClass(
+      'pc-product-select-chips',
+    );
+    expect(screen.getByText('2 active purposes')).toBeInTheDocument();
+  });
+
+  it('marks the selected chip with aria-selected and selected style class', () => {
+    const direct = makeGroup({
+      product_uuid: 'prod-direct',
+      product_name: 'Acme Loyalty',
+    });
+
+    render(
+      <ProductSelectionSection
+        directGroups={[direct]}
+        nominatedGroups={[]}
+        selectedProductKey={productGroupKey(direct)}
+        onSelect={vi.fn()}
+      />,
+    );
+
+    const chip = screen.getByTestId('product-chip-prod-direct');
+    expect(chip).toHaveClass('pc-product-select-chip');
+    expect(chip).toHaveClass('pc-product-select-chip--selected');
+    expect(chip).toHaveAttribute('aria-selected', 'true');
+  });
+
+  it('renders nominated groups with an inline nominator suffix on the chip', () => {
+    const nominated = makeGroup({
+      product_uuid: 'prod-nom',
+      product_name: 'Partner Bank',
+      nominator: makeNominator({ name: 'Alice Johnson' }),
+      purposes: [
+        {
+          uuid: 'p1',
+          data_elements: [{ uuid: 'de1', selected: true }],
+        } as never,
+      ],
+    });
+    const otherDirect = makeGroup({
+      product_uuid: 'prod-direct',
+      product_name: 'Acme Loyalty',
+    });
+
+    render(
+      <ProductSelectionSection
+        directGroups={[otherDirect]}
+        nominatedGroups={[nominated]}
+        selectedProductKey={null}
+        onSelect={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByText('Partner Bank')).toBeInTheDocument();
+    expect(screen.getByText('· Alice Johnson')).toBeInTheDocument();
+    expect(screen.getByText('1 active purpose')).toBeInTheDocument();
+  });
+
+  it('falls back to nominator email in the chip suffix when name is null', () => {
+    const nominated = makeGroup({
+      product_uuid: 'prod-nom',
+      product_name: 'Partner Bank',
+      nominator: makeNominator({ name: null, email: 'fallback@example.com' }),
+    });
+    const otherDirect = makeGroup({ product_uuid: 'prod-direct' });
+
+    render(
+      <ProductSelectionSection
+        directGroups={[otherDirect]}
+        nominatedGroups={[nominated]}
+        selectedProductKey={null}
+        onSelect={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByText('· fallback@example.com')).toBeInTheDocument();
+  });
+
+  it('invokes onSelect with the correct key when a chip is clicked', () => {
+    const direct = makeGroup({
+      product_uuid: 'prod-direct',
+      product_name: 'Acme Loyalty',
+    });
+    const nominated = makeGroup({
+      product_uuid: 'prod-nom',
+      product_name: 'Partner Bank',
+      nominator: makeNominator(),
+    });
+    const onSelect = vi.fn();
+
+    render(
+      <ProductSelectionSection
+        directGroups={[direct]}
+        nominatedGroups={[nominated]}
+        selectedProductKey={null}
+        onSelect={onSelect}
+      />,
+    );
+
+    fireEvent.click(screen.getByTestId('product-chip-prod-direct'));
+    fireEvent.click(screen.getByTestId(`product-chip-${productGroupKey(nominated)}`));
+
+    expect(onSelect).toHaveBeenCalledWith(
+      productGroupKey(direct),
+      expect.objectContaining({ product_uuid: 'prod-direct' }),
+    );
+    expect(onSelect).toHaveBeenCalledWith(
+      productGroupKey(nominated),
+      expect.objectContaining({ product_uuid: 'prod-nom' }),
+    );
+    expect(onSelect).toHaveBeenCalledTimes(2);
+  });
+
+  it('clears selection when the already-selected chip is clicked again', () => {
+    const direct = makeGroup({
+      product_uuid: 'prod-direct',
+      product_name: 'Acme Loyalty',
+    });
+    const second = makeGroup({
+      product_uuid: 'prod-direct-2',
+      product_name: 'Acme Rewards',
+    });
+    const onSelect = vi.fn();
+
+    render(
+      <ProductSelectionSection
+        directGroups={[direct, second]}
+        nominatedGroups={[]}
+        selectedProductKey={productGroupKey(direct)}
+        onSelect={onSelect}
+      />,
+    );
+
+    fireEvent.click(screen.getByTestId('product-chip-prod-direct'));
+
+    expect(onSelect).toHaveBeenCalledWith(null, null);
+  });
+
+  it('auto-selects and locks the only available group', () => {
+    const only = makeGroup({
+      product_uuid: 'prod-only',
+      product_name: 'Sole Product',
+    });
+    const onSelect = vi.fn();
+
+    render(
+      <ProductSelectionSection
+        directGroups={[only]}
+        nominatedGroups={[]}
+        selectedProductKey={null}
+        onSelect={onSelect}
+      />,
+    );
+
+    expect(onSelect).toHaveBeenCalledTimes(1);
+    expect(onSelect).toHaveBeenCalledWith(
+      productGroupKey(only),
+      expect.objectContaining({ product_uuid: 'prod-only' }),
+    );
+
+    const chip = screen.getByTestId('product-chip-prod-only') as HTMLButtonElement;
+    expect(chip).toHaveAttribute('aria-selected', 'true');
+    expect(chip.disabled).toBe(true);
+  });
+
+  it('renders an empty state when both arrays are empty', () => {
+    render(
+      <ProductSelectionSection
+        directGroups={[]}
+        nominatedGroups={[]}
+        selectedProductKey={null}
+        onSelect={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByText('No products available')).toBeInTheDocument();
+    expect(
+      screen.getByText('You have no consents to manage yet.'),
+    ).toBeInTheDocument();
+    expect(screen.queryByRole('option')).not.toBeInTheDocument();
+  });
+
+  it('distinguishes direct vs nominated chips on the same product via key helper', () => {
+    const direct = makeGroup({
+      product_uuid: 'prod-shared',
+      product_name: 'Shared Product',
+    });
+    const nominated = makeGroup({
+      product_uuid: 'prod-shared',
+      product_name: 'Shared Product',
+      nominator: makeNominator({ uuid: 'nom-uuid-x' }),
+    });
+
+    expect(productGroupKey(direct)).toBe('prod-shared');
+    expect(productGroupKey(nominated)).toBe('prod-shared:nom-uuid-x');
+    expect(productGroupKey(direct)).not.toBe(productGroupKey(nominated));
+  });
+});

package/tests/RequestSubmit.test.tsx

@@ -0,0 +1,295 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+
+// react-i18next is an optional peer dep that is not installed in this
+// package's node_modules. Stub it with a minimal `useTranslation` that
+// resolves the en/translation.json keys we use here, with interpolation
+// and `_one` / `_other` plural suffix support.
+vi.mock('react-i18next', () => {
+  const en: Record<string, string> = {
+    requestSubmittedSuccessfully: 'Request Submitted Successfully',
+    thankYouForSubmittingYourRequest: 'Thank you for submitting your request',
+    caseID: 'Case ID',
+    saveThisID: 'Please save this ID for future reference',
+    casesCreatedCount_one: '{{count}} case created',
+    casesCreatedCount_other: '{{count}} cases created',
+    someRequestsFailed: 'Some requests failed',
+    retry: 'Retry',
+    retrying: 'Retrying...',
+    confirmationSentTo: 'Confirmation sent to',
+    processRequest: 'We will process your request as per laws',
+    backToHome: 'Back to homepage',
+    yourDataIsSafeWithUs: 'Your data is safe with us',
+    erasureConsentRevokeNotice:
+      'Your consent for {{purposes}} will be revoked once fulfilled.',
+  };
+  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' } }),
+  };
+});
+
+// `lucide-react` is also a peer dep — stub the icon used by RequestSubmit.
+vi.mock('lucide-react', () => ({
+  Mail: () => null,
+}));
+
+import RequestSubmit from '../src/RedactoPrivacyCenter/components/RequestSubmit';
+import type { BatchCaseSubmitResult } from '../src/RedactoPrivacyCenter/lib/types';
+
+const makeResult = (
+  overrides: Partial<BatchCaseSubmitResult> = {},
+): BatchCaseSubmitResult => ({
+  succeeded: [],
+  failed: [],
+  ...overrides,
+});
+
+const singleSucceeded: BatchCaseSubmitResult = {
+  succeeded: [
+    {
+      group_key: '',
+      product_uuid: '',
+      product_name: '',
+      case_id: 'CASE-ONLY',
+      uuid: 'uuid-only',
+    },
+  ],
+  failed: [],
+};
+
+const multiSucceeded: BatchCaseSubmitResult = {
+  succeeded: [
+    {
+      group_key: 'prod-1',
+      product_uuid: 'prod-1',
+      product_name: 'Acme Loyalty',
+      case_id: 'CASE-1',
+      uuid: 'uuid-1',
+    },
+    {
+      group_key: 'prod-2',
+      product_uuid: 'prod-2',
+      product_name: 'Acme Rewards',
+      case_id: 'CASE-2',
+      uuid: 'uuid-2',
+    },
+  ],
+  failed: [],
+};
+
+const partialResult: BatchCaseSubmitResult = {
+  succeeded: [
+    {
+      group_key: 'prod-ok',
+      product_uuid: 'prod-ok',
+      product_name: 'Working Product',
+      case_id: 'CASE-OK',
+      uuid: 'uuid-ok',
+    },
+  ],
+  failed: [
+    {
+      group_key: 'prod-fail',
+      product_uuid: 'prod-fail',
+      product_name: 'Broken Product',
+      error: 'Network unreachable',
+    },
+  ],
+};
+
+describe('RequestSubmit', () => {
+  it('renders a single-case success card (legacy / nomination / grievance shape)', () => {
+    render(
+      <RequestSubmit
+        result={singleSucceeded}
+        contact="alice@example.com"
+        onCreateRequest={vi.fn()}
+      />,
+    );
+
+    // Single-case branch: one "Case ID: ..." row, no plural header, no
+    // failure block.
+    expect(
+      screen.getByText('Request Submitted Successfully'),
+    ).toBeInTheDocument();
+    expect(screen.getByText(/Case ID:\s*CASE-ONLY/)).toBeInTheDocument();
+    expect(screen.queryByText(/cases created/)).not.toBeInTheDocument();
+    expect(
+      screen.queryByText('Some requests failed'),
+    ).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Retry' })).toBeNull();
+  });
+
+  it('renders a multi-case success list with product names and case IDs', () => {
+    render(
+      <RequestSubmit
+        result={multiSucceeded}
+        contact="alice@example.com"
+        onCreateRequest={vi.fn()}
+      />,
+    );
+
+    // Header reflects pluralised count.
+    expect(screen.getByText('2 cases created')).toBeInTheDocument();
+    // Each entry renders product name + case id.
+    expect(screen.getByText('Acme Loyalty')).toBeInTheDocument();
+    expect(screen.getByText('Acme Rewards')).toBeInTheDocument();
+    expect(screen.getByText(/Case ID:\s*CASE-1/)).toBeInTheDocument();
+    expect(screen.getByText(/Case ID:\s*CASE-2/)).toBeInTheDocument();
+    // No failure block when all succeeded.
+    expect(
+      screen.queryByText('Some requests failed'),
+    ).not.toBeInTheDocument();
+  });
+
+  it('renders a failed-cases block with per-row retry buttons when failures exist', () => {
+    render(
+      <RequestSubmit
+        result={partialResult}
+        contact="alice@example.com"
+        onCreateRequest={vi.fn()}
+        onRetry={vi.fn()}
+      />,
+    );
+
+    // Succeeded row still present.
+    expect(screen.getByText('Working Product')).toBeInTheDocument();
+    expect(screen.getByText(/Case ID:\s*CASE-OK/)).toBeInTheDocument();
+
+    // Failure block with product name, error message, retry button.
+    expect(screen.getByText('Some requests failed')).toBeInTheDocument();
+    expect(screen.getByText('Broken Product')).toBeInTheDocument();
+    expect(screen.getByText('Network unreachable')).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: 'Retry' }),
+    ).toBeInTheDocument();
+  });
+
+  it('does not render retry buttons when onRetry is not provided', () => {
+    render(
+      <RequestSubmit
+        result={partialResult}
+        contact="alice@example.com"
+        onCreateRequest={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByText('Some requests failed')).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Retry' })).toBeNull();
+  });
+
+  it('invokes onRetry with the failed entry group_key when retry is clicked', () => {
+    const onRetry = vi.fn();
+    render(
+      <RequestSubmit
+        result={partialResult}
+        contact="alice@example.com"
+        onCreateRequest={vi.fn()}
+        onRetry={onRetry}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: 'Retry' }));
+
+    expect(onRetry).toHaveBeenCalledTimes(1);
+    expect(onRetry).toHaveBeenCalledWith('prod-fail');
+  });
+
+  it('shows the Retrying… label and disables the button for rows in retryingGroupKeys', () => {
+    const onRetry = vi.fn();
+    render(
+      <RequestSubmit
+        result={partialResult}
+        contact="alice@example.com"
+        onCreateRequest={vi.fn()}
+        onRetry={onRetry}
+        retryingGroupKeys={new Set(['prod-fail'])}
+      />,
+    );
+
+    const button = screen.getByRole('button', {
+      name: /Retrying/,
+    }) as HTMLButtonElement;
+    expect(button).toBeInTheDocument();
+    expect(button.disabled).toBe(true);
+  });
+
+  it('invokes onCreateRequest when "Back to homepage" is clicked', () => {
+    const onCreateRequest = vi.fn();
+    render(
+      <RequestSubmit
+        result={singleSucceeded}
+        contact="alice@example.com"
+        onCreateRequest={onCreateRequest}
+      />,
+    );
+
+    // Two rendered "Back to homepage" buttons exist for the responsive
+    // mobile/desktop variants. Clicking either should fire the handler.
+    const buttons = screen.getAllByRole('button', { name: 'Back to homepage' });
+    expect(buttons.length).toBeGreaterThanOrEqual(1);
+    fireEvent.click(buttons[0]);
+    expect(onCreateRequest).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders the erasure-revoke notice when revokeConsentOnFulfilment is true', () => {
+    render(
+      <RequestSubmit
+        result={singleSucceeded}
+        contact="alice@example.com"
+        onCreateRequest={vi.fn()}
+        revokeConsentOnFulfilment
+        revokedPurposeNames="Marketing, Analytics"
+      />,
+    );
+
+    expect(
+      screen.getByText(/Marketing, Analytics/),
+    ).toBeInTheDocument();
+  });
+
+  it('renders nothing in the case-list area when succeeded is empty (failures-only)', () => {
+    // Edge case: every product failed. Header still shows the success
+    // banner (parent decides whether to render); the case-list area is
+    // omitted and the failure block is the only middle content.
+    const failuresOnly = makeResult({
+      failed: [
+        {
+          group_key: 'prod-a',
+          product_uuid: 'prod-a',
+          product_name: 'Product A',
+          error: 'Timeout',
+        },
+      ],
+    });
+    render(
+      <RequestSubmit
+        result={failuresOnly}
+        contact="alice@example.com"
+        onCreateRequest={vi.fn()}
+        onRetry={vi.fn()}
+      />,
+    );
+
+    expect(screen.queryByText(/Case ID:/)).not.toBeInTheDocument();
+    expect(screen.queryByText(/cases created/)).not.toBeInTheDocument();
+    expect(screen.getByText('Some requests failed')).toBeInTheDocument();
+    expect(screen.getByText('Product A')).toBeInTheDocument();
+  });
+});