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

package/tests/ProductSelectionSection.test.tsx

@@ -0,0 +1,328 @@
+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}} purpose',
+    activePurposes_other: '{{count}} 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 purposes')).toBeInTheDocument();
+  });
+
+  it('chip count reflects total raisable purposes regardless of status', () => {
+    // Per TECH-4089, withdrawn purposes still appear in the picker (revoking
+    // consent is not deletion — DP must still be able to raise requests for
+    // them). The chip label is a plain count of raisable purposes — no
+    // active/withdrawn distinction is surfaced in the label.
+    const direct = makeGroup({
+      product_uuid: 'prod-mixed',
+      product_name: 'Acme Loyalty',
+      purposes: [
+        {
+          uuid: 'p-active',
+          data_elements: [{ uuid: 'de-a', selected: true }],
+          status: 'ACTIVE',
+        } as never,
+        {
+          uuid: 'p-withdrawn',
+          data_elements: [{ uuid: 'de-w', selected: false }],
+          status: 'WITHDRAW',
+        } as never,
+      ],
+    });
+
+    render(
+      <ProductSelectionSection
+        directGroups={[direct]}
+        nominatedGroups={[]}
+        selectedProductKey={null}
+        onSelect={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByText('2 purposes')).toBeInTheDocument();
+    expect(screen.queryByText(/active/)).not.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 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,135 @@
+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
+// 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',
+    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 template = 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 { RequestSubmitResult } from '../src/RedactoPrivacyCenter/components/types';
+
+const productScopedResult: RequestSubmitResult = {
+  case_id: 'CASE-PROD',
+  uuid: 'uuid-prod',
+  product_name: 'Acme Loyalty',
+  product_uuid: 'prod-1',
+};
+
+const orgLevelResult: RequestSubmitResult = {
+  case_id: 'CASE-ORG',
+  uuid: 'uuid-org',
+  product_name: '',
+  product_uuid: '',
+};
+
+describe('RequestSubmit', () => {
+  it('renders the case id and product label for a product-scoped result', () => {
+    render(
+      <RequestSubmit
+        result={productScopedResult}
+        contact="alice@example.com"
+        onCreateRequest={vi.fn()}
+      />,
+    );
+
+    expect(
+      screen.getByText('Request Submitted Successfully'),
+    ).toBeInTheDocument();
+    expect(screen.getByText(/Case ID:\s*CASE-PROD/)).toBeInTheDocument();
+    expect(screen.getByText('Acme Loyalty')).toBeInTheDocument();
+  });
+
+  it('omits the product label when the result has no product anchor', () => {
+    render(
+      <RequestSubmit
+        result={orgLevelResult}
+        contact="alice@example.com"
+        onCreateRequest={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByText(/Case ID:\s*CASE-ORG/)).toBeInTheDocument();
+    // Empty product_name means the product line is not rendered.
+    expect(screen.queryByText('Acme Loyalty')).not.toBeInTheDocument();
+  });
+
+  it('shows the contact in the confirmation line', () => {
+    render(
+      <RequestSubmit
+        result={productScopedResult}
+        contact="alice@example.com"
+        onCreateRequest={vi.fn()}
+      />,
+    );
+
+    expect(
+      screen.getByText(/Confirmation sent to:\s*alice@example\.com/),
+    ).toBeInTheDocument();
+  });
+
+  it('invokes onCreateRequest when "Back to homepage" is clicked', () => {
+    const onCreateRequest = vi.fn();
+    render(
+      <RequestSubmit
+        result={productScopedResult}
+        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={productScopedResult}
+        contact="alice@example.com"
+        onCreateRequest={vi.fn()}
+        revokeConsentOnFulfilment
+        revokedPurposeNames="Marketing, Analytics"
+      />,
+    );
+
+    expect(
+      screen.getByText(/Marketing, Analytics/),
+    ).toBeInTheDocument();
+  });
+});