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

package/src/RedactoPrivacyCenter/styles/injectStyles.ts

@@ -664,6 +664,111 @@ export const injectPCStyles = () => {
       color: var(--pc-text-secondary);
       line-height: 1.25;
     }
+    .pc-select-user {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      gap: var(--pc-spacing-xl);
+      width: 100%;
+      max-width: 460px;
+      margin: 0 auto;
+      min-height: min(62vh, 540px);
+      padding-top: var(--pc-spacing-2xl);
+      padding-bottom: var(--pc-spacing-2xl);
+    }
+    .pc-select-user__header {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+      gap: var(--pc-spacing-sm);
+    }
+    .pc-select-user__header > * {
+      margin: 0;
+    }
+    .pc-select-user__list {
+      display: flex;
+      flex-direction: column;
+      gap: 0.625rem;
+    }
+    .pc-select-user__item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 0.75rem;
+      width: 100%;
+      box-sizing: border-box;
+      padding: 0.75rem 1rem;
+      border: 1px solid var(--pc-border-color);
+      border-radius: 0.625rem;
+      background-color: var(--pc-bg-primary);
+      color: var(--pc-text-primary);
+      cursor: pointer;
+      text-align: left;
+      appearance: none;
+      -webkit-appearance: none;
+      font-family: inherit;
+      transition: border-color 0.2s ease, background-color 0.2s ease;
+    }
+    .pc-select-user__item:hover:not(:disabled) {
+      border-color: var(--pc-primary);
+      background-color: color-mix(in srgb, var(--pc-primary) 6%, var(--pc-bg-primary));
+    }
+    .pc-select-user__item:disabled {
+      cursor: default;
+      opacity: 0.7;
+    }
+    .pc-select-user__item:focus-visible {
+      outline: 2px solid var(--pc-border-color-focus);
+      outline-offset: 2px;
+    }
+    .pc-select-user__item-text {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 0.125rem;
+      min-width: 0;
+    }
+    .pc-select-user__item-primary {
+      font-size: 0.875rem;
+      font-weight: 600;
+      line-height: 1.25;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      max-width: 100%;
+    }
+    .pc-select-user__item-secondary {
+      font-size: 0.75rem;
+      color: var(--pc-text-secondary);
+      line-height: 1.25;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      max-width: 100%;
+    }
+    .pc-select-user__item-status {
+      font-size: 0.75rem;
+      font-weight: 600;
+      color: var(--pc-primary);
+      flex-shrink: 0;
+    }
+    .pc-select-user__item-chevron {
+      color: var(--pc-primary);
+      flex-shrink: 0;
+    }
+    .pc-select-user__error {
+      margin: 0.75rem 0 0;
+      font-size: 0.8125rem;
+      color: var(--pc-error);
+      text-align: center;
+    }
+    .pc-select-user-loading {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 60vh;
+    }
     .pc-product-purpose-panel {
       display: flex;
       flex-direction: column;
@@ -2639,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;
@@ -2661,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);
     }
@@ -2724,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";