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

package/src/RedactoPrivacyCenter/styles/injectStyles.ts

@@ -2744,7 +2744,10 @@ export const injectPCStyles = () => {
       border-radius: 9999px;
     }
 
-    .pc-notification-bell-btn {
+    /* Circular navbar controls: the bell and the org-logo menu button. Same size
+       token, ring and hover, so the topbar cluster reads as one set of controls. */
+    .pc-notification-bell-btn,
+    .pc-navbar-avatar-btn {
       display: flex;
       align-items: center;
       justify-content: center;
@@ -2766,7 +2769,8 @@ export const injectPCStyles = () => {
       height: 14px;
     }
 
-    .pc-notification-bell-btn:hover {
+    .pc-notification-bell-btn:hover,
+    .pc-navbar-avatar-btn:hover {
       background-color: var(--pc-bg-hover);
       border-color: var(--pc-border-color-hover);
     }
@@ -2829,6 +2833,7 @@ export const injectPCStyles = () => {
     /* Keyboard focus rings for Notification Hub interactive controls */
     .pc-notification-cta:focus-visible,
     .pc-notification-bell-btn:focus-visible:not(:disabled),
+    .pc-navbar-avatar-btn:focus-visible:not(:disabled),
     .pc-notification-filter-tab:focus-visible:not(:disabled),
     .pc-notification-pagination-btn:focus-visible:not(:disabled),
     .pc-notification-link-btn:focus-visible:not(:disabled),

package/src/RedactoPrivacyCenter/styles/pcStyles.ts

@@ -669,6 +669,23 @@ export const pcStyles = {
     height: '48px',
     fontSize: getVar('--pc-font-size-base'),
   },
+  // Image avatars (org logos) must NOT sit on the brand-colour fill `avatar` sets:
+  // --pc-info resolves to the org's own primary colour, so a brand-coloured mark on a
+  // transparent background would be invisible against it. Neutral surface + hairline
+  // border instead. border-box keeps the rendered box at the exact avatarSm/Md/Lg size.
+  avatarImage: {
+    backgroundColor: getVar('--pc-bg-shell'),
+    border: `1px solid ${getVar('--pc-border-color')}`,
+    boxSizing: 'border-box',
+    objectFit: 'contain',
+    padding: '3px',
+  },
+  // For an image avatar inside a control that already draws the ring and surface
+  // (the navbar avatar button) — otherwise the two rings nest as concentric circles.
+  avatarImageBare: {
+    backgroundColor: 'transparent',
+    border: 'none',
+  },
 
   // Empty state styles
   empty: {

package/src/RedactoPrivacyCenter/ui/PCAvatar.test.tsx

@@ -0,0 +1,83 @@
+import { afterEach, describe, expect, it } from 'vitest';
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { PCAvatar } from './PCAvatar';
+
+/**
+ * Regression: PCAvatar applied a single style object to BOTH branches, so an image
+ * avatar (the org logo) was painted onto a disc filled with var(--pc-info) — which
+ * applyBrandingTheme maps to the org's own primary colour. A brand-coloured mark on a
+ * transparent background therefore rendered as a featureless brand-coloured circle.
+ */
+
+const LOGO_SRC = 'https://cdn.example.com/org-icon.svg';
+
+afterEach(cleanup);
+
+describe('PCAvatar', () => {
+  it('does not paint the brand-colour fill behind a logo image', () => {
+    render(<PCAvatar src={LOGO_SRC} name="Acme Corp" color="info" />);
+
+    const image = screen.getByRole('img');
+    expect(image.style.backgroundColor).not.toBe('var(--pc-info)');
+    expect(image.style.backgroundColor).toBe('var(--pc-bg-shell)');
+  });
+
+  it('contains the logo instead of stretching it, and keeps the box at its nominal size', () => {
+    render(<PCAvatar src={LOGO_SRC} name="Acme Corp" size="sm" color="info" />);
+
+    const image = screen.getByRole('img');
+    expect(image.style.objectFit).toBe('contain');
+    expect(image.style.boxSizing).toBe('border-box');
+    expect(image.style.width).toBe('24px');
+    expect(image.style.height).toBe('24px');
+  });
+
+  it('falls back to initials when the logo fails to load', () => {
+    render(<PCAvatar src={LOGO_SRC} name="Acme Corp" color="info" />);
+
+    fireEvent.error(screen.getByRole('img'));
+
+    expect(screen.queryByRole('img')).toBeNull();
+    expect(screen.getByText('AC')).toBeTruthy();
+  });
+
+  it('still fills initials avatars with the requested colour', () => {
+    render(<PCAvatar name="Acme Corp" color="info" />);
+
+    expect(screen.getByText('AC').style.backgroundColor).toBe('var(--pc-info)');
+  });
+
+  it('keeps its tile and ring by default (standalone brand mark)', () => {
+    render(<PCAvatar src={LOGO_SRC} name="Acme Corp" color="info" />);
+
+    const image = screen.getByRole('img');
+    expect(image.style.border).toContain('var(--pc-border-color)');
+    expect(image.style.backgroundColor).toBe('var(--pc-bg-shell)');
+  });
+
+  it('drops its tile and ring when framed={false}, so it cannot nest inside a bordered control', () => {
+    render(<PCAvatar src={LOGO_SRC} name="Acme Corp" color="info" framed={false} />);
+
+    const image = screen.getByRole('img');
+    expect(image.style.border).not.toContain('--pc-border-color');
+    expect(image.style.backgroundColor).toBe('transparent');
+    // Still contained — framed only controls the chrome, not the fit.
+    expect(image.style.objectFit).toBe('contain');
+  });
+
+  it('does not strip the initials fill when framed={false}', () => {
+    render(<PCAvatar name="Acme Corp" color="info" framed={false} />);
+
+    expect(screen.getByText('AC').style.backgroundColor).toBe('var(--pc-info)');
+  });
+
+  it('lets a caller override the style on both branches', () => {
+    const { rerender } = render(
+      <PCAvatar src={LOGO_SRC} name="Acme Corp" style={{ backgroundColor: 'red' }} />,
+    );
+    expect(screen.getByRole('img').style.backgroundColor).toBe('red');
+
+    rerender(<PCAvatar name="Acme Corp" style={{ backgroundColor: 'red' }} />);
+    expect(screen.getByText('AC').style.backgroundColor).toBe('red');
+  });
+});

package/src/RedactoPrivacyCenter/ui/PCAvatar.tsx

@@ -1,14 +1,17 @@
-import { type CSSProperties } from 'react';
+import { useEffect, useState, type CSSProperties } from 'react';
 import { pcStyles } from '../styles/pcStyles';
 
-export interface PCAvatarProps {
+export type PCAvatarProps = Readonly<{
   name?: string;
   src?: string;
   className?: string;
   style?: CSSProperties;
   size?: 'sm' | 'md' | 'lg';
   color?: 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info';
-}
+  // Image avatars draw their own surface + hairline ring. Set false when a parent
+  // control already draws them, so the two don't nest as concentric rings.
+  framed?: boolean;
+}>;
 
 function getInitials(name: string): string {
   return name
@@ -40,29 +43,50 @@ export function PCAvatar({
   style = {},
   size = 'md',
   color = 'primary',
+  framed = true,
 }: PCAvatarProps) {
-  const avatarStyle: CSSProperties = {
+  const [failed, setFailed] = useState(false);
+
+  // A new src deserves a fresh attempt — otherwise switching org/profile strands
+  // the avatar on the previous image's failure.
+  useEffect(() => setFailed(false), [src]);
+
+  const baseStyle: CSSProperties = {
     ...pcStyles.avatar,
     ...(size === 'sm' && pcStyles.avatarSm),
     ...(size === 'md' && pcStyles.avatarMd),
     ...(size === 'lg' && pcStyles.avatarLg),
-    backgroundColor: getColor(color),
-    ...style,
   };
 
-  if (src) {
+  if (src && !failed) {
+    // avatarImage overrides the brand-colour fill baked into pcStyles.avatar; a logo
+    // is usually a brand-coloured mark on transparency and would vanish against it.
+    const imageStyle: CSSProperties = {
+      ...baseStyle,
+      ...pcStyles.avatarImage,
+      ...(!framed && pcStyles.avatarImageBare),
+      ...style,
+    };
+
     return (
       <img
         src={src}
         alt={name}
         className={className}
-        style={avatarStyle}
+        style={imageStyle}
+        onError={() => setFailed(true)}
       />
     );
   }
 
+  const initialsStyle: CSSProperties = {
+    ...baseStyle,
+    backgroundColor: getColor(color),
+    ...style,
+  };
+
   return (
-    <div className={className} style={avatarStyle}>
+    <div className={className} style={initialsStyle}>
       {name ? getInitials(name) : '?'}
     </div>
   );

package/src/shared/notice-consent-status.ts

@@ -0,0 +1,190 @@
+import { jwtDecode } from "jwt-decode";
+
+/**
+ * Shared Go-ledger notice `check-consent` read for the consent-sdk-react
+ * package.
+ *
+ * Post-cutover, consent records live in the Go ledger, so the Python
+ * `get-notice` endpoint no longer knows whether a principal has already
+ * consented (it used to answer that with a 409 `CONSENT_ALREADY_PROVIDED`).
+ * Both the banner (`RedactoNoticeConsent`) and the embedded widget
+ * (`RedactoNoticeConsentInline`) ask the ledger directly instead — this module
+ * is the single implementation they share.
+ *
+ * Every failure mode (no ledger configured, undecodable token, non-OK
+ * response, network/abort/parse error) degrades to `null` so callers can fall
+ * back to the legacy Python-driven flow.
+ */
+
+type NoticeConsentJwtPayload = {
+  organisation_uuid: string;
+  workspace_uuid: string;
+};
+
+// Mirrors the Go ledger's `NoticeConsentStatusResponse`. Used to overlay the
+// prior-consent / reconsent state from the ledger, since Python's
+// notice-validation overlay is empty after the consent cutover.
+export type NoticeConsentStatusDataElement = {
+  uuid: string;
+  name: string;
+  selected: boolean;
+};
+
+export type NoticeConsentStatusPurpose = {
+  uuid: string;
+  name: string;
+  selected: boolean;
+  status: string; // ACTIVE | EXPIRED | WITHDRAW | DECLINED | INACTIVE
+  expiry_datetime?: string | null;
+  data_elements: NoticeConsentStatusDataElement[];
+};
+
+export type NoticeConsentStatusResponse = {
+  consented: boolean;
+  all_mandatory_active: boolean;
+  purposes: NoticeConsentStatusPurpose[];
+};
+
+export type FetchNoticeConsentStatusParams = {
+  accessToken: string;
+  ledgerBaseUrl?: string;
+  noticeUuid: string;
+  signal?: AbortSignal;
+};
+
+// Same read, but with org/workspace supplied explicitly instead of decoded from
+// the JWT. Used by flows that already hold authoritative org/workspace (props)
+// and whose token may be opaque — e.g. RedactoNoticeAssisted, whose OTP access
+// token carries no org/workspace claims.
+export type FetchNoticeConsentStatusForScopeParams = {
+  accessToken: string;
+  ledgerBaseUrl?: string;
+  organisationUuid: string;
+  workspaceUuid: string;
+  noticeUuid: string;
+  signal?: AbortSignal;
+};
+
+// Decode the JWT to resolve the org/workspace the ledger path is scoped to.
+// Returns null on any decode failure so the caller degrades gracefully.
+const decodeNoticeConsentToken = (
+  token: string
+): NoticeConsentJwtPayload | null => {
+  try {
+    return jwtDecode(token) as NoticeConsentJwtPayload;
+  } catch {
+    return null;
+  }
+};
+
+/**
+ * Fetch the principal's current consent status for a notice from the Go
+ * ledger (`check-consent`), with org/workspace supplied explicitly. The
+ * principal resolves from the bearer token server-side, so the body is empty.
+ * Returns null on any failure so the caller can fall back to the Python-driven
+ * flow (graceful degradation). This holds the single network implementation;
+ * {@link fetchNoticeConsentStatus} decodes the JWT and delegates here.
+ */
+export const fetchNoticeConsentStatusForScope = async ({
+  accessToken,
+  ledgerBaseUrl,
+  organisationUuid,
+  workspaceUuid,
+  noticeUuid,
+  signal,
+}: FetchNoticeConsentStatusForScopeParams): Promise<NoticeConsentStatusResponse | null> => {
+  if (
+    !accessToken ||
+    !ledgerBaseUrl ||
+    !organisationUuid ||
+    !workspaceUuid ||
+    !noticeUuid
+  ) {
+    return null;
+  }
+
+  try {
+    const response = await fetch(
+      `${ledgerBaseUrl}/public/organisations/${organisationUuid}/workspaces/${workspaceUuid}/notices/${noticeUuid}/check-consent`,
+      {
+        method: "POST",
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+          "Content-Type": "application/json",
+        },
+        body: "{}",
+        signal,
+      }
+    );
+
+    if (!response.ok) {
+      return null;
+    }
+
+    const data = (await response.json()) as
+      | NoticeConsentStatusResponse
+      | { detail?: NoticeConsentStatusResponse };
+    // The ledger returns the response directly; tolerate a {detail} envelope too.
+    const body =
+      data && typeof data === "object" && "detail" in data && data.detail
+        ? data.detail
+        : (data as NoticeConsentStatusResponse);
+
+    if (!body || !Array.isArray(body.purposes)) {
+      return null;
+    }
+    return body;
+  } catch {
+    // Network / abort / parse failure — degrade to the Python-driven flow.
+    return null;
+  }
+};
+
+/**
+ * Fetch the principal's current consent status for a notice from the Go
+ * ledger (`check-consent`). The org/workspace are resolved by decoding the
+ * JWT. Returns null on any failure so the caller can fall back to the
+ * Python-provided overlay (graceful degradation).
+ */
+export const fetchNoticeConsentStatus = async ({
+  accessToken,
+  ledgerBaseUrl,
+  noticeUuid,
+  signal,
+}: FetchNoticeConsentStatusParams): Promise<NoticeConsentStatusResponse | null> => {
+  if (!accessToken || !ledgerBaseUrl || !noticeUuid) {
+    return null;
+  }
+
+  const decodedToken = decodeNoticeConsentToken(accessToken);
+  if (!decodedToken) {
+    return null;
+  }
+
+  const {
+    organisation_uuid: ORGANISATION_UUID,
+    workspace_uuid: WORKSPACE_UUID,
+  } = decodedToken;
+  if (!ORGANISATION_UUID || !WORKSPACE_UUID) {
+    return null;
+  }
+
+  return fetchNoticeConsentStatusForScope({
+    accessToken,
+    ledgerBaseUrl,
+    organisationUuid: ORGANISATION_UUID,
+    workspaceUuid: WORKSPACE_UUID,
+    noticeUuid,
+    signal,
+  });
+};
+
+/**
+ * Whether the principal has already fully consented to this notice with no
+ * reconsent needed — the ledger equivalent of Python's 409
+ * `CONSENT_ALREADY_PROVIDED`. Requires an active consent record with every
+ * mandatory purpose still ACTIVE.
+ */
+export const isNoticeFullyConsented = (
+  status: NoticeConsentStatusResponse
+): boolean => status.consented && status.all_mandatory_active;

package/src/shared/sandbox.ts

@@ -0,0 +1,6 @@
+/**
+ * HTTP header carrying the static sandbox token (the credential). Its presence
+ * marks a request as `environment=test`. Shared by the Notice-consent and
+ * Privacy-Center sandbox paths so the header name is defined once.
+ */
+export const SANDBOX_TOKEN_HEADER = "X-Consent-Token";

package/tests/Form.test.tsx

@@ -524,12 +524,14 @@ describe('Form (P2-SDK-3)', () => {
     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).
+  it('runs the picker overlay against the legacy endpoint when no ledgerBaseUrl is configured', async () => {
+    // `getUserConsents` serves the same grouped payload from either backend
+    // (ledger `/public/...` or Python `/dsar/privacy-center/...`), so the
+    // overlay must run in both modes — Python's form/data no longer emits
+    // product groups, and skipping the read leaves the picker empty.
     baseUrlStub.ledgerBaseUrl = undefined;
     setupSession();
+    fetchUserConsents.mockResolvedValue(null);
     getFormData.mockResolvedValue(
       makeFormData({
         direct_groups: [
@@ -545,12 +547,12 @@ describe('Form (P2-SDK-3)', () => {
 
     render(<Form onCreateRequest={vi.fn()} />);
     await waitFor(() => expect(getFormData).toHaveBeenCalled());
+    await waitFor(() => expect(fetchUserConsents).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 () => {
@@ -565,6 +567,141 @@ describe('Form (P2-SDK-3)', () => {
     await waitFor(() => expect(fetchUserConsents).toHaveBeenCalled());
   });
 
+  it('keeps the form/data groups when user-consents comes back with no groups', async () => {
+    // A successful-but-empty read must never overwrite groups form/data did
+    // supply — that turned a populated picker into "No products available".
+    setupSession();
+    fetchUserConsents.mockResolvedValue({ direct: [], nominated: [] });
+    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(fetchUserConsents).toHaveBeenCalled());
+
+    pickRequestType(RequestTypeEnum.ERASURE);
+    await waitFor(() => {
+      expect(screen.getByText('Acme Loyalty')).toBeInTheDocument();
+    });
+    expect(screen.getByText('Acme Rewards')).toBeInTheDocument();
+    expect(screen.queryByText('No products available')).not.toBeInTheDocument();
+  });
+
+  it('falls back to the legacy flat purposes list when the backend exposes no product groups', async () => {
+    // Pre-grouping backends return purposes without any product grouping.
+    // Those consents must stay reachable under one synthetic group instead
+    // of the picker claiming the principal has none.
+    setupSession();
+    fetchUserConsents.mockResolvedValue(null);
+    getFormData.mockResolvedValue(
+      makeFormData({
+        direct_groups: [],
+        nominated_groups: [],
+        purposes: [{ purpose: basePurpose('purp-flat', 'Marketing') }],
+      }),
+    );
+
+    render(<Form onCreateRequest={vi.fn()} />);
+    await waitFor(() => expect(getFormData).toHaveBeenCalled());
+
+    pickRequestType(RequestTypeEnum.ACCESS);
+
+    await waitFor(() => {
+      expect(screen.getByText('Your data')).toBeInTheDocument();
+    });
+    expect(screen.getByText('Marketing')).toBeInTheDocument();
+    expect(screen.queryByText('No products available')).not.toBeInTheDocument();
+  });
+
+  it('keeps the empty state when the flat purposes carry no data elements', async () => {
+    // Nothing selectable survives `buildGroupPurposes`, so the synthetic group
+    // would render an unusable panel — the empty state is the honest answer.
+    setupSession();
+    fetchUserConsents.mockResolvedValue(null);
+    getFormData.mockResolvedValue(
+      makeFormData({
+        direct_groups: [],
+        nominated_groups: [],
+        purposes: [{ purpose: basePurpose('purp-flat', 'Marketing', []) }],
+      }),
+    );
+
+    render(<Form onCreateRequest={vi.fn()} />);
+    await waitFor(() => expect(getFormData).toHaveBeenCalled());
+
+    pickRequestType(RequestTypeEnum.ACCESS);
+
+    await waitFor(() => {
+      expect(screen.getByText('No products available')).toBeInTheDocument();
+    });
+    expect(screen.queryByText('Your data')).not.toBeInTheDocument();
+  });
+
+  it('submits the legacy flat fallback as an org-level case without a product anchor', async () => {
+    // The synthetic group has no server-side product, so the case must go up
+    // in the pre-grouping org-level shape rather than carrying a made-up
+    // `product_uuid` the backend cannot resolve.
+    setupSession();
+    fetchUserConsents.mockResolvedValue(null);
+    getFormData.mockResolvedValue(
+      makeFormData({
+        direct_groups: [],
+        nominated_groups: [],
+        purposes: [{ purpose: basePurpose('purp-flat', 'Marketing') }],
+      }),
+    );
+    createCaseRequest.mockResolvedValueOnce({
+      case_id: 'CASE-FLAT',
+      uuid: 'uuid-flat',
+    });
+
+    render(<Form onCreateRequest={vi.fn()} />);
+    await waitFor(() => expect(getFormData).toHaveBeenCalled());
+
+    pickRequestType(RequestTypeEnum.ACCESS);
+
+    await waitFor(() => {
+      expect(screen.getByText('Marketing')).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!);
+
+    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('product_uuid' in payload).toBe(false);
+    expect('data_principal_uuid' in payload).toBe(false);
+    expect(payload.request_details.purposes).toEqual([
+      { purpose_uuid: 'purp-flat', data_element_uuids: ['purp-flat-de1'] },
+    ]);
+  });
+
   it('renders the product step for DSAR types when direct_groups is present', async () => {
     setupSession();
     const direct = makeGroup({