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

package/src/RedactoPrivacyCenter/api/client.ts

@@ -1,5 +1,11 @@
 import { apiFetch, ApiError } from "./fetcher";
 import type { ApiFetchOptions, ApiResponse } from "./fetcher";
+import {
+  isSandboxMode,
+  sandboxAuthHeaders,
+  sandboxContact,
+  sandboxQueryIdentity,
+} from "../lib/sandbox";
 import type {
   CaseMessage,
   IdentityListResponse,
@@ -33,7 +39,11 @@ export type BaseRequest = {
  *   integrations without a deployed ledger keep working.
  */
 export function createConsentClient(baseUrl: string, ledgerBaseUrl?: string) {
-  const useLedger = Boolean(ledgerBaseUrl);
+  const ledgerConfigured = Boolean(ledgerBaseUrl);
+  // Sandbox mode never routes to the Go ledger (it has no sandbox / test::
+  // support). A sandbox token forces the legacy consent-server path regardless
+  // of ledgerBaseUrl, so isolation can't be bypassed by also configuring a ledger.
+  const useLedger = () => ledgerConfigured && !isSandboxMode();
   const ledgerBase = (ledgerBaseUrl ?? "").replace(/\/$/, "");
   /**
    * Privacy Center API fetch wrapper that uses Authorization: Bearer header.
@@ -72,15 +82,26 @@ export function createConsentClient(baseUrl: string, ledgerBaseUrl?: string) {
       }
     }
 
-    // Add Authorization Bearer token for privacy center APIs
-    const token = authToken || (getAuthToken ? await getAuthToken() : null);
-    if (token) {
-      const trimmedToken = token.trim();
-      // Format token with Bearer prefix if not already present
-      const bearerToken = trimmedToken.startsWith('Bearer ')
-        ? trimmedToken
-        : `Bearer ${trimmedToken}`;
-      requestHeaders.set("Authorization", bearerToken);
+    // Sandbox PoC: send only the X-Consent-Token credential (no JWT bearer). Set
+    // last so it wins over any caller-supplied Authorization header. The acting
+    // identity travels in the request payload -- query params on reads, the body
+    // on writes -- never a header.
+    const sandboxHeaders = sandboxAuthHeaders();
+    if (sandboxHeaders) {
+      Object.entries(sandboxHeaders).forEach(([key, value]) => {
+        requestHeaders.set(key, value);
+      });
+    } else {
+      // Add Authorization Bearer token for privacy center APIs
+      const token = authToken || (getAuthToken ? await getAuthToken() : null);
+      if (token) {
+        const trimmedToken = token.trim();
+        // Format token with Bearer prefix if not already present
+        const bearerToken = trimmedToken.startsWith('Bearer ')
+          ? trimmedToken
+          : `Bearer ${trimmedToken}`;
+        requestHeaders.set("Authorization", bearerToken);
+      }
     }
 
     // Build fetch options
@@ -180,7 +201,7 @@ export function createConsentClient(baseUrl: string, ledgerBaseUrl?: string) {
   }
 
   function ledgerUrl(baseRequest: BaseRequest, path: string): string {
-    if (!useLedger) {
+    if (!useLedger()) {
       throw new Error("ledgerUrl called without a configured ledgerBaseUrl");
     }
     return `${ledgerBase}/public/organisations/${baseRequest.organisationUuid}/workspaces/${baseRequest.workspaceUuid}${path}`;
@@ -191,13 +212,47 @@ export function createConsentClient(baseUrl: string, ledgerBaseUrl?: string) {
   }
 
   function notificationUrl(baseRequest: BaseRequest, path = ''): string {
-    return privacyCenterUrl(baseRequest, `/notifications${path}`);
+    const identitySuffix = sandboxIdentitySuffix();
+    if (!identitySuffix) {
+      return privacyCenterUrl(baseRequest, `/notifications${path}`);
+    }
+    const separator = path.includes('?') ? `&${identitySuffix.slice(1)}` : identitySuffix;
+    return privacyCenterUrl(baseRequest, `/notifications${path}${separator}`);
   }
 
   function resolveAuthToken(authToken: string | undefined, baseRequest: BaseRequest): string {
     return authToken || baseRequest.authToken;
   }
 
+  /**
+   * Append the sandbox acting identity (`primary_email` / `primary_mobile`) to a
+   * query-param bag when sandbox mode is active; a no-op otherwise. The server
+   * resolves the acting test identity from these query params on reads (there is
+   * no subject header). The credential is the X-Consent-Token header set in
+   * privacyCenterApiFetch.
+   */
+  function appendSandboxIdentity(queryParams: URLSearchParams): void {
+    const identity = sandboxQueryIdentity();
+    if (identity) {
+      Object.entries(identity).forEach(([key, value]) => {
+        queryParams.append(key, value);
+      });
+    }
+  }
+
+  /**
+   * The sandbox acting-identity query suffix (`?primary_email=...` /
+   * `?primary_mobile=...`) for endpoints that build a bare URL with no other
+   * query params (the case-communication reads/POSTs). Empty string outside
+   * sandbox mode, so the JWT path is unchanged.
+   */
+  function sandboxIdentitySuffix(): string {
+    const queryParams = new URLSearchParams();
+    appendSandboxIdentity(queryParams);
+    const queryString = queryParams.toString();
+    return queryString ? `?${queryString}` : "";
+  }
+
   return {
     /**
      * Get form data (privacy center)
@@ -247,13 +302,23 @@ export function createConsentClient(baseUrl: string, ledgerBaseUrl?: string) {
       const url = privacyCenterUrl(baseRequest, '/case');
       const { useSessionAuth = false, getAuthToken, ...fetchOptions } = options || {};
 
+      // Sandbox mode: the acting test identity is the single `contact` field
+      // (the server has no subject header; it namespaces this identity `test::`).
+      // Merge it into the body only when sandbox mode is active and the payload
+      // is a plain object; the JWT path is left byte-for-byte unchanged.
+      const contact = sandboxContact();
+      const requestPayload =
+        contact && payload && typeof payload === "object"
+          ? { ...(payload as Record<string, unknown>), contact }
+          : payload;
+
       // Case management uses session-based auth (X-Auth-Token)
       // Privacy center uses JWT Bearer tokens (Authorization: Bearer)
       if (useSessionAuth) {
         return apiFetch(url, {
           ...fetchOptions,
           method: "POST",
-          body: JSON.stringify(payload),
+          body: JSON.stringify(requestPayload),
           getAuthToken,
         });
       }
@@ -262,7 +327,7 @@ export function createConsentClient(baseUrl: string, ledgerBaseUrl?: string) {
       return privacyCenterApiFetch(url, {
         ...fetchOptions,
         method: "POST",
-        body: JSON.stringify(payload),
+        body: JSON.stringify(requestPayload),
         authToken: resolveAuthToken(authToken, baseRequest),
       });
     },
@@ -388,9 +453,12 @@ export function createConsentClient(baseUrl: string, ledgerBaseUrl?: string) {
       if (params.status) queryParams.append("status", params.status);
       if (params.product_uuid) queryParams.append("product_uuid", params.product_uuid);
       if (params.language) queryParams.append("language", params.language);
+      // Sandbox mode: the acting identity travels as query params
+      // (primary_email / primary_mobile); the credential is the X-Consent-Token header.
+      appendSandboxIdentity(queryParams);
       const queryString = queryParams.toString();
       const suffix = `/user-consents${queryString ? `?${queryString}` : ""}`;
-      const url = useLedger
+      const url = useLedger()
         ? ledgerUrl(baseRequest, suffix)
         : privacyCenterUrl(baseRequest, suffix);
       return privacyCenterApiFetch(url, {
@@ -426,9 +494,12 @@ export function createConsentClient(baseUrl: string, ledgerBaseUrl?: string) {
       if (params.search) queryParams.append("search", params.search);
       if (params.language) queryParams.append("language", params.language);
       if (params.nominator_uuid) queryParams.append("nominator_uuid", params.nominator_uuid);
+      // Sandbox mode: the acting identity travels as query params
+      // (primary_email / primary_mobile); the credential is the X-Consent-Token header.
+      appendSandboxIdentity(queryParams);
       const queryString = queryParams.toString();
       const suffix = `/user-consents/${productUuid}/purposes${queryString ? `?${queryString}` : ""}`;
-      const url = useLedger
+      const url = useLedger()
         ? ledgerUrl(baseRequest, suffix)
         : privacyCenterUrl(baseRequest, suffix);
       return privacyCenterApiFetch(url, {
@@ -467,9 +538,10 @@ export function createConsentClient(baseUrl: string, ledgerBaseUrl?: string) {
       dataElementUuids?: string[],
       productUuid?: string,
       noticeUuid?: string,
-      dataElements?: Array<{ uuid: string; selected: boolean }>
+      dataElements?: Array<{ uuid: string; selected: boolean }>,
+      language?: string
     ): Promise<unknown> {
-      if (!useLedger) {
+      if (!useLedger()) {
         const url = privacyCenterUrl(baseRequest, `/manage-consent?status=${status}`);
         const body: Record<string, unknown> = { purpose_uuid: purposeId, contact };
         if (nominatorContact) {
@@ -481,6 +553,9 @@ export function createConsentClient(baseUrl: string, ledgerBaseUrl?: string) {
         if (productUuid) {
           body.product_uuid = productUuid;
         }
+        if (language) {
+          body.language = language;
+        }
         return privacyCenterApiFetch(url, {
           ...options,
           method: "POST",
@@ -507,7 +582,7 @@ export function createConsentClient(baseUrl: string, ledgerBaseUrl?: string) {
         }
         return { uuid: de.uuid, selected };
       });
-      const body = {
+      const body: Record<string, unknown> = {
         notice_uuid: noticeUuid,
         partial: true,
         declined: false,
@@ -520,6 +595,7 @@ export function createConsentClient(baseUrl: string, ledgerBaseUrl?: string) {
             data_elements: elements,
           },
         ],
+        ...(language ? { language } : {}),
       };
       const url = ledgerUrl(baseRequest, "/submit-consent");
       return privacyCenterApiFetch(url, {
@@ -545,6 +621,9 @@ export function createConsentClient(baseUrl: string, ledgerBaseUrl?: string) {
       if (offset !== undefined) queryParams.append("offset", offset.toString());
       if (limit !== undefined) queryParams.append("limit", limit.toString());
       if (language) queryParams.append("language", language);
+      // Sandbox mode: the acting identity travels as query params
+      // (primary_email / primary_mobile); the credential is the X-Consent-Token header.
+      appendSandboxIdentity(queryParams);
       const queryString = queryParams.toString();
       const url = privacyCenterUrl(baseRequest, `/activities${queryString ? `?${queryString}` : ""}`);
       return privacyCenterApiFetch<unknown>(url, {
@@ -623,7 +702,7 @@ export function createConsentClient(baseUrl: string, ledgerBaseUrl?: string) {
       // (paginated list under /public/...); otherwise the legacy Python
       // privacy-center list is used. normalizeReceipts tolerates both envelopes.
       const receiptsSuffix = `/receipts${queryString ? `?${queryString}` : ""}`;
-      const url = useLedger
+      const url = useLedger()
         ? ledgerUrl(baseRequest, receiptsSuffix)
         : privacyCenterUrl(baseRequest, receiptsSuffix);
       return privacyCenterApiFetch<unknown>(url, {
@@ -648,13 +727,22 @@ export function createConsentClient(baseUrl: string, ledgerBaseUrl?: string) {
       // The ledger serves the receipt PDF at /receipts/{uuid}/download, the
       // legacy Python service at /receipts/{uuid}/pdf. The receiptUuid always
       // comes from the same-mode list above, so list and download stay consistent.
-      const url = useLedger
+      const url = useLedger()
         ? ledgerUrl(baseRequest, `/receipts/${receiptUuid}/download`)
         : privacyCenterUrl(baseRequest, `/receipts/${receiptUuid}/pdf`);
       const token = resolveAuthToken(authToken, baseRequest);
       const requestHeaders = new Headers();
       requestHeaders.set("Accept", "application/pdf");
-      if (token) {
+      // Sandbox PoC: send the single X-Consent-Token header instead of the JWT
+      // bearer. The receipt PDF download identifies the principal by receiptUuid
+      // (already scoped to the sandbox subject via the same-mode list), so no
+      // extra identity payload is needed here.
+      const sandboxHeaders = sandboxAuthHeaders();
+      if (sandboxHeaders) {
+        Object.entries(sandboxHeaders).forEach(([key, value]) => {
+          requestHeaders.set(key, value);
+        });
+      } else if (token) {
         const trimmedToken = token.trim();
         requestHeaders.set(
           "Authorization",
@@ -697,6 +785,9 @@ export function createConsentClient(baseUrl: string, ledgerBaseUrl?: string) {
       if (offset !== undefined) queryParams.append("offset", offset.toString());
       if (limit !== undefined) queryParams.append("limit", limit.toString());
       if (language) queryParams.append("language", language);
+      // Sandbox mode: the acting identity travels as query params
+      // (primary_email / primary_mobile); the credential is the X-Consent-Token header.
+      appendSandboxIdentity(queryParams);
       const queryString = queryParams.toString();
       const url = privacyCenterUrl(baseRequest, `/cases?${queryString}`);
       return privacyCenterApiFetch<unknown>(url, {
@@ -715,7 +806,9 @@ export function createConsentClient(baseUrl: string, ledgerBaseUrl?: string) {
       caseUuid: string,
       authToken?: string
     ): Promise<CaseMessage[]> {
-      const url = caseUrl(baseRequest, caseUuid, '/messages');
+      // Sandbox mode: the acting identity travels as query params
+      // (primary_email / primary_mobile); the credential is the X-Consent-Token header.
+      const url = caseUrl(baseRequest, caseUuid, `/messages${sandboxIdentitySuffix()}`);
       return privacyCenterApiFetch<CaseMessage[]>(url, {
         authToken: resolveAuthToken(authToken, baseRequest),
       });
@@ -731,7 +824,9 @@ export function createConsentClient(baseUrl: string, ledgerBaseUrl?: string) {
       documentUuids: string[],
       authToken?: string
     ): Promise<CaseMessage> {
-      const url = caseUrl(baseRequest, caseUuid, '/messages');
+      // Sandbox mode: the acting identity travels as query params
+      // (primary_email / primary_mobile); the credential is the X-Consent-Token header.
+      const url = caseUrl(baseRequest, caseUuid, `/messages${sandboxIdentitySuffix()}`);
       return privacyCenterApiFetch<CaseMessage>(url, {
         method: 'POST',
         body: JSON.stringify({ body, document_uuids: documentUuids }),
@@ -748,7 +843,9 @@ export function createConsentClient(baseUrl: string, ledgerBaseUrl?: string) {
       file: File,
       authToken?: string
     ): Promise<UploadDocumentResponse> {
-      const url = caseUrl(baseRequest, caseUuid, '/upload-document');
+      // Sandbox mode: the acting identity travels as query params
+      // (primary_email / primary_mobile); the credential is the X-Consent-Token header.
+      const url = caseUrl(baseRequest, caseUuid, `/upload-document${sandboxIdentitySuffix()}`);
       const formData = new FormData();
       formData.append('file', file, file.name); // field name must be exactly "file"
       // "payload" is required by the privacy-center endpoint (omitting it causes 422)

package/src/RedactoPrivacyCenter/api/fetcher.ts

@@ -1,3 +1,5 @@
+import { sandboxAuthHeaders } from "../lib/sandbox";
+
 /**
  * Options for apiFetch function
  */
@@ -125,16 +127,29 @@ export async function apiFetch<T>(
     }
   }
 
-  // Add auth token AFTER custom headers to ensure it's never overridden
+  // Add auth AFTER custom headers so it's never overridden. Only for calls that
+  // opt into auth (a `getAuthToken` is supplied) — public calls like org
+  // branding (which hit the user server, not consent-server) stay unauthenticated
+  // and must NOT receive the sandbox headers.
   if (getAuthToken) {
-    const token = await getAuthToken();
-    if (token) {
-      // Use the exact header format that works in other parts of the codebase
-      // Other working API calls use 'X-Auth-Token' (capital A and T, rest lowercase)
-      const trimmedToken = token.trim();
-      requestHeaders.set("X-Auth-Token", trimmedToken);
-      // Also set lowercase for compatibility (some servers are case-sensitive)
-      requestHeaders.set("x-auth-token", trimmedToken);
+    // Sandbox PoC: send the single X-Consent-Token header instead of the session
+    // token. The acting identity travels in the request payload (injected by the
+    // client call sites), not a header.
+    const sandboxHeaders = sandboxAuthHeaders();
+    if (sandboxHeaders) {
+      Object.entries(sandboxHeaders).forEach(([key, value]) => {
+        requestHeaders.set(key, value);
+      });
+    } else {
+      const token = await getAuthToken();
+      if (token) {
+        // Use the exact header format that works in other parts of the codebase
+        // Other working API calls use 'X-Auth-Token' (capital A and T, rest lowercase)
+        const trimmedToken = token.trim();
+        requestHeaders.set("X-Auth-Token", trimmedToken);
+        // Also set lowercase for compatibility (some servers are case-sensitive)
+        requestHeaders.set("x-auth-token", trimmedToken);
+      }
     }
   }
 

package/src/RedactoPrivacyCenter/components/AppShell/AppShell.tsx

@@ -214,6 +214,34 @@ export default function AppShell({
               var(--pc-bg-shell) 100%
             );
           }
+          .pc-shell-user-menu-identity {
+            display: flex;
+            flex-direction: column;
+            gap: 2px;
+            min-width: 0;
+            flex: 1;
+          }
+          .pc-shell-user-menu-identity-email {
+            font-size: 13px;
+            font-weight: 600;
+            color: var(--pc-text-primary);
+            line-height: 1.3;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            min-width: 0;
+          }
+          .pc-shell-user-menu-identity-id {
+            font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+            font-size: 11px;
+            font-weight: 500;
+            color: var(--pc-text-secondary);
+            line-height: 1.3;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            min-width: 0;
+          }
           .pc-popover.pc-shell-user-menu-popover {
             border-radius: 12px !important;
             overflow: hidden !important;

package/src/RedactoPrivacyCenter/components/AppShell/UserMenu.tsx

@@ -1,11 +1,12 @@
 import { useEffect, useState, type CSSProperties } from 'react';
-import { ChevronDown, Users } from 'lucide-react';
+import { Users } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { PCAvatar, PCPopover } from '../../ui';
 import { useBranding } from '../../context/BrandingContext';
 import { useOrganization } from '../../context/OrganizationContext';
 import { useProfileSwitch } from '../../context/ProfileSwitchContext';
-import { getVar } from '../../lib/utils';
+import { useAuth } from '../../context/AuthContext';
+import { decodeJwtToken, getVar } from '../../lib/utils';
 import { usePrivacyCenterExitAction } from './usePrivacyCenterExitAction';
 
 type UserMenuProps = {
@@ -35,6 +36,7 @@ export function UserMenu({ onBack }: UserMenuProps) {
   const { t } = useTranslation();
   const branding = useBranding();
   const { organization } = useOrganization();
+  const { accessToken } = useAuth();
   const [email, setEmail] = useState('');
 
   useEffect(() => {
@@ -45,20 +47,20 @@ export function UserMenu({ onBack }: UserMenuProps) {
     usePrivacyCenterExitAction(onBack);
   const { canSwitch, switchProfile } = useProfileSwitch();
 
+  // The signed-in principal's org_user_id — unique per profile, unlike the
+  // email a shared contact reuses across profiles — so the menu can show which
+  // profile is active. Read from the (live) token, which re-scopes on switch.
+  const orgUserId =
+    (decodeJwtToken(accessToken)?.user_data?.org_user_id as string) || '';
+
   const displayName = branding?.brand_name || organization?.name || '';
   const triggerAvatarName = email ? initialsFromEmail(email) : displayName || '?';
 
-  const triggerStyle: CSSProperties = {
-    display: 'inline-flex',
-    alignItems: 'center',
-    gap: 6,
-    padding: '4px 6px 4px 4px',
-    borderRadius: 9999,
-    background: 'transparent',
-    border: `1px solid ${getVar('--pc-border-color')}`,
-    color: getVar('--pc-text-secondary'),
-    cursor: 'pointer',
-    transition: 'background 150ms ease, border-color 150ms ease, box-shadow 150ms ease',
+  // The .pc-navbar-avatar-btn control draws the ring and surface, so the avatar fills
+  // it and draws neither (see `framed={false}` below).
+  const avatarFillStyle: CSSProperties = {
+    width: '100%',
+    height: '100%',
   };
 
   // Shared style for the popover's action rows (switch profile, back/sign out).
@@ -81,24 +83,25 @@ export function UserMenu({ onBack }: UserMenuProps) {
   };
 
   const trigger = (
-    <div
-      style={triggerStyle}
-      role="presentation"
-      onMouseEnter={(e) => {
-        (e.currentTarget as HTMLDivElement).style.boxShadow =
-          '0 0 0 2px color-mix(in srgb, var(--pc-primary) 18%, transparent)';
-      }}
-      onMouseLeave={(e) => {
-        (e.currentTarget as HTMLDivElement).style.boxShadow = 'none';
-      }}
-    >
+    <button type="button" aria-label={t('accountMenu')} className="pc-navbar-avatar-btn">
       {branding?.icon_url ? (
-        <PCAvatar src={branding.icon_url} name={triggerAvatarName} size="sm" color="info" />
+        <PCAvatar
+          src={branding.icon_url}
+          name={triggerAvatarName}
+          size="md"
+          color="info"
+          framed={false}
+          style={avatarFillStyle}
+        />
       ) : (
-        <PCAvatar name={triggerAvatarName} size="sm" color="info" />
+        <PCAvatar
+          name={triggerAvatarName}
+          size="md"
+          color="info"
+          style={avatarFillStyle}
+        />
       )}
-      <ChevronDown size={14} strokeWidth={2} />
-    </div>
+    </button>
   );
 
   const content = (
@@ -155,7 +158,7 @@ export function UserMenu({ onBack }: UserMenuProps) {
       </div>
 
       {/* Identity card */}
-      {email && (
+      {(email || orgUserId) && (
         <div
           style={{
             padding: '12px 16px',
@@ -168,22 +171,21 @@ export function UserMenu({ onBack }: UserMenuProps) {
                 : 'none',
           }}
         >
-          <PCAvatar name={initialsFromEmail(email)} size="sm" color="info" />
-          <div
-            title={email}
-            style={{
-              fontSize: 13,
-              fontWeight: 600,
-              color: getVar('--pc-text-primary'),
-              lineHeight: 1.3,
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-              whiteSpace: 'nowrap',
-              minWidth: 0,
-              flex: 1,
-            }}
-          >
-            {email}
+          <PCAvatar name={triggerAvatarName} size="sm" color="info" />
+          <div className="pc-shell-user-menu-identity">
+            {email ? (
+              <div title={email} className="pc-shell-user-menu-identity-email">
+                {email}
+              </div>
+            ) : null}
+            {orgUserId ? (
+              <div
+                title={orgUserId}
+                className="pc-shell-user-menu-identity-id"
+              >
+                {t('userIdLabel', { id: orgUserId })}
+              </div>
+            ) : null}
           </div>
         </div>
       )}

package/src/RedactoPrivacyCenter/components/ConsentManager.tsx

@@ -776,6 +776,7 @@ export default function ConsentManager({ variant }: ConsentManagerProps) {
           productUuid,
           noticeUuid,
           dataElements,
+          language: langParam,
         });
 
         if (response) {
@@ -798,7 +799,7 @@ export default function ConsentManager({ variant }: ConsentManagerProps) {
         handleCloseModal();
       }
     },
-    [organizationId, workspaceId, contact, fetchData, handleCloseModal, t, authContext, consentClient, selectedRecord]
+    [organizationId, workspaceId, contact, fetchData, handleCloseModal, t, authContext, consentClient, selectedRecord, langParam]
   );
 
   const getVar = (varName: string): string => `var(${varName})`;