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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redacto.io/consent-sdk-react",
-  "version": "10.0.0-beta.0",
+  "version": "10.0.0-beta.1",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",

package/src/RedactoNoticeConsent/RedactoNoticeConsent.tsx

@@ -2145,6 +2145,7 @@ export const RedactoNoticeConsent = ({
       if (content) {
         await submitConsentEvent({
           accessToken,
+          baseUrl,
           ledgerBaseUrl,
           noticeUuid: content.notice_uuid,
           purposes: content.purposes.map((purpose) => {

package/src/RedactoNoticeConsent/api/index.ts

@@ -131,6 +131,7 @@ export const fetchConsentContent = async ({
 
 export const submitConsentEvent = async ({
   accessToken,
+  baseUrl,
   ledgerBaseUrl,
   noticeUuid,
   purposes,
@@ -155,10 +156,9 @@ export const submitConsentEvent = async ({
     throw new Error("Invalid token: missing organization or workspace UUID");
   }
 
-  if (!ledgerBaseUrl) {
-    throw new Error("ledgerBaseUrl is required to submit consent");
-  }
-  const apiBaseUrl = ledgerBaseUrl;
+  // Fall back to the consent server when no ledger is configured, so existing
+  // integrations that only pass baseUrl remain backwards compatible.
+  const apiBaseUrl = ledgerBaseUrl || baseUrl || BASE_URL;
 
   const validatedPurposes = purposes.map((purpose) => {
     if (!purpose.uuid) {

package/src/RedactoNoticeConsent/api/types.ts

@@ -46,7 +46,7 @@ export type NoticeConsentStatusResponse = {
 
 export type FetchNoticeConsentStatusParams = {
   accessToken: string;
-  ledgerBaseUrl: string;
+  ledgerBaseUrl?: string;
   noticeUuid: string;
   signal?: AbortSignal;
 };
@@ -230,7 +230,8 @@ export type Purpose = {
 
 export type SubmitConsentEventParams = {
   accessToken: string;
-  ledgerBaseUrl: string;
+  baseUrl?: string;
+  ledgerBaseUrl?: string;
   noticeUuid: string;
   purposes: Array<Purpose>;
   declined: boolean;

package/src/RedactoNoticeConsent/types.ts

@@ -5,7 +5,7 @@ export type Props = Readonly<{
   accessToken: string;
   refreshToken: string;
   baseUrl?: string;
-  ledgerBaseUrl: string;
+  ledgerBaseUrl?: string;
   settings?: Partial<Settings>;
   language?: string;
   blockUI?: boolean;

package/src/RedactoNoticeConsentInline/RedactoNoticeConsentInline.tsx

@@ -320,6 +320,7 @@ const RedactoConsentInlineComponent = ({
           org_uuid,
           workspace_uuid,
           accessToken: tokenToUse,
+          baseUrl,
           ledgerBaseUrl,
           noticeUuid: content.notice_uuid,
           purposes: content.purposes.map((purpose) => {

package/src/RedactoNoticeConsentInline/api/index.ts

@@ -47,16 +47,16 @@ export const submitConsentEvent = async ({
   org_uuid,
   workspace_uuid,
   accessToken,
+  baseUrl,
   ledgerBaseUrl,
   noticeUuid,
   purposes,
   declined,
   meta_data,
 }: SubmitConsentEventParams): Promise<void> => {
-  if (!ledgerBaseUrl) {
-    throw new Error("ledgerBaseUrl is required to submit consent");
-  }
-  const apiBaseUrl = ledgerBaseUrl;
+  // Fall back to the consent server when no ledger is configured, so existing
+  // integrations that only pass baseUrl remain backwards compatible.
+  const apiBaseUrl = ledgerBaseUrl || baseUrl || BASE_URL;
 
   const payload: ConsentEventPayload = {
     notice_uuid: noticeUuid,

package/src/RedactoNoticeConsentInline/api/types.ts

@@ -172,7 +172,8 @@ export type SubmitConsentEventParams = {
   org_uuid: string;
   workspace_uuid: string;
   accessToken: string;
-  ledgerBaseUrl: string;
+  baseUrl?: string;
+  ledgerBaseUrl?: string;
   noticeUuid: string;
   purposes: Array<Purpose>;
   declined: boolean;

package/src/RedactoNoticeConsentInline/types.ts

@@ -8,7 +8,7 @@ export type Props = Readonly<{
   accessToken?: string;
   refreshToken?: string;
   baseUrl?: string;
-  ledgerBaseUrl: string;
+  ledgerBaseUrl?: string;
   settings?: Partial<Settings>;
   language?: string;
   onAccept?: () => void;

package/src/RedactoPrivacyCenter/PrivacyCenterLayout.tsx

@@ -12,6 +12,7 @@ import { useAuth } from './context/AuthContext';
 import { PCLoader } from './ui';
 import { pcStyles } from './styles/pcStyles';
 import AppShell from './components/AppShell/AppShell';
+import { SelectUserGate } from './components/SelectUserGate';
 
 interface PrivacyCenterLayoutProps {
   children: ReactNode;
@@ -164,11 +165,13 @@ export function PrivacyCenterLayout({ children, slug, onBack }: PrivacyCenterLay
 
   return (
     <OrganizationProvider organization={organization}>
-      <DataAvailabilityProvider>
-        <AppShell onBack={onBack}>
-          {children}
-        </AppShell>
-      </DataAvailabilityProvider>
+      <SelectUserGate>
+        <DataAvailabilityProvider>
+          <AppShell onBack={onBack}>
+            {children}
+          </AppShell>
+        </DataAvailabilityProvider>
+      </SelectUserGate>
     </OrganizationProvider>
   );
 }

package/src/RedactoPrivacyCenter/RedactoPrivacyCenter.tsx

@@ -15,7 +15,7 @@ injectPCStyles();
 
 interface RedactoPrivacyCenterProps {
   baseUrl: string; // Consent server base URL
-  ledgerBaseUrl: string; // Go ledger base URL — serves user-consents
+  ledgerBaseUrl?: string; // Go ledger base URL — serves user-consents; omit to use the legacy Python privacy-center consent endpoints
   slug: string;
   accessToken: string;
   refreshToken: string;

package/src/RedactoPrivacyCenter/api/actions.ts

@@ -24,6 +24,7 @@ import type {
   GetCaseMessagesParams,
   MessageDocument,
   GetNotificationsServerParams,
+  LegacyManageConsentResponse,
   NotificationActionBaseParams,
   NotificationActionResponse,
   NotificationByUuidServerParams,
@@ -361,10 +362,12 @@ export async function manageConsentServer(params: {
     // Privacy center endpoints use JWT Bearer tokens, not session-based auth
     const baseRequest = buildBaseRequest(params.organizationId, params.workspaceId, params.authToken);
 
-    // Routes to the Go ledger's submit-consent (partial); resolves on 2xx and
-    // throws otherwise, so a resolved call is success. The ledger returns a
-    // ConsentEventResponse (no `success` flag), unlike the old Python endpoint.
-    await params.consentClient.manageConsent(
+    // Ledger mode routes to the Go ledger's submit-consent (partial), which
+    // resolves on 2xx and throws otherwise — a resolved call is success (the
+    // ledger returns a ConsentEventResponse, no `success` flag). Legacy mode
+    // hits the Python manage-consent endpoint, whose unwrapped response
+    // carries a `success` flag that must be honored even on 2xx.
+    const result = await params.consentClient.manageConsent(
       baseRequest,
       params.purposeId,
       params.contact,
@@ -377,6 +380,9 @@ export async function manageConsentServer(params: {
       params.noticeUuid,
       params.dataElements
     );
+    if (result && typeof result === 'object' && 'success' in result) {
+      return Boolean((result as LegacyManageConsentResponse).success);
+    }
     return true;
   } catch (error: any) {
     // Normalize nominator-specific errors into stable error codes

package/src/RedactoPrivacyCenter/api/client.ts

@@ -2,11 +2,13 @@ import { apiFetch, ApiError } from "./fetcher";
 import type { ApiFetchOptions, ApiResponse } from "./fetcher";
 import type {
   CaseMessage,
+  IdentityListResponse,
   MessageDocument,
   NotificationActionResponse,
   NotificationListResponse,
   NotificationQueryParams,
   NotificationSummary,
+  SelectPrincipalResponse,
   UnreadCountResponse,
   UploadDocumentResponse,
 } from "../lib/types";
@@ -25,13 +27,14 @@ export type BaseRequest = {
  * Creates a client instance with a specific base URL.
  * @param baseUrl - Consent server base URL (Python service, e.g. http://host/consent)
  * @param ledgerBaseUrl - Go ledger base URL (e.g. http://host:8090/consent-ledger).
- *   Used for user-consents reads which are served from the ledger's `/public/...` paths.
+ *   Used for user-consents reads/writes served from the ledger's `/public/...` paths.
+ *   When omitted, those calls fall back to the legacy Python
+ *   `/dsar/privacy-center` endpoints and payloads (pre-ledger behavior), so
+ *   integrations without a deployed ledger keep working.
  */
-export function createConsentClient(baseUrl: string, ledgerBaseUrl: string) {
-  if (!ledgerBaseUrl) {
-    throw new Error("ledgerBaseUrl is required to create the consent client");
-  }
-  const ledgerBase = ledgerBaseUrl.replace(/\/$/, "");
+export function createConsentClient(baseUrl: string, ledgerBaseUrl?: string) {
+  const useLedger = Boolean(ledgerBaseUrl);
+  const ledgerBase = (ledgerBaseUrl ?? "").replace(/\/$/, "");
   /**
    * Privacy Center API fetch wrapper that uses Authorization: Bearer header.
    * Privacy center endpoints require JWT tokens in Authorization header, not X-Auth-Token.
@@ -177,6 +180,9 @@ export function createConsentClient(baseUrl: string, ledgerBaseUrl: string) {
   }
 
   function ledgerUrl(baseRequest: BaseRequest, path: string): string {
+    if (!useLedger) {
+      throw new Error("ledgerUrl called without a configured ledgerBaseUrl");
+    }
     return `${ledgerBase}/public/organisations/${baseRequest.organisationUuid}/workspaces/${baseRequest.workspaceUuid}${path}`;
   }
 
@@ -384,7 +390,9 @@ export function createConsentClient(baseUrl: string, ledgerBaseUrl: string) {
       if (params.language) queryParams.append("language", params.language);
       const queryString = queryParams.toString();
       const suffix = `/user-consents${queryString ? `?${queryString}` : ""}`;
-      const url = ledgerUrl(baseRequest, suffix);
+      const url = useLedger
+        ? ledgerUrl(baseRequest, suffix)
+        : privacyCenterUrl(baseRequest, suffix);
       return privacyCenterApiFetch(url, {
         ...options,
         method: "GET",
@@ -420,7 +428,9 @@ export function createConsentClient(baseUrl: string, ledgerBaseUrl: string) {
       if (params.nominator_uuid) queryParams.append("nominator_uuid", params.nominator_uuid);
       const queryString = queryParams.toString();
       const suffix = `/user-consents/${productUuid}/purposes${queryString ? `?${queryString}` : ""}`;
-      const url = ledgerUrl(baseRequest, suffix);
+      const url = useLedger
+        ? ledgerUrl(baseRequest, suffix)
+        : privacyCenterUrl(baseRequest, suffix);
       return privacyCenterApiFetch(url, {
         ...options,
         method: "GET",
@@ -432,18 +442,23 @@ export function createConsentClient(baseUrl: string, ledgerBaseUrl: string) {
     /**
      * Manage consent (privacy center) - revoke, regrant, or renew.
      *
-     * The Go ledger has no manage-consent route, so this is expressed as a
-     * `partial` submit-consent on the ledger — mirroring the Python dual-write
-     * relay (`build_consent_management_payload`): the affected purpose is
-     * re-submitted with `selected: false` to revoke or `selected: true` to
-     * regrant/renew, and `partial: true` so the rest of the notice's purposes
-     * are left untouched. The principal is resolved from the JWT, so no
-     * `contact`/identifiers are sent in the body, and `consent_event_uuid` is
-     * omitted so the ledger mints a fresh event.
+     * The Go ledger has no manage-consent route, so with a ledger configured
+     * this is expressed as a `partial` submit-consent on the ledger — mirroring
+     * the Python dual-write relay (`build_consent_management_payload`): the
+     * affected purpose is re-submitted with `selected: false` to revoke or
+     * `selected: true` to regrant/renew, and `partial: true` so the rest of the
+     * notice's purposes are left untouched. The principal is resolved from the
+     * JWT, so no `contact`/identifiers are sent in the body, and
+     * `consent_event_uuid` is omitted so the ledger mints a fresh event.
+     *
+     * Without a ledger, the legacy Python `/manage-consent?status=` endpoint is
+     * used with its `{ purpose_uuid, contact, ... }` payload.
      */
     async manageConsent(
       baseRequest: BaseRequest,
       purposeId: string,
+      // Sent to the legacy Python endpoint only; the ledger resolves the
+      // principal from the JWT, so no identifiers are sent in ledger mode.
       contact: string,
       status: 'revoke' | 'regrant' | 'renew',
       authToken?: string,
@@ -454,6 +469,25 @@ export function createConsentClient(baseUrl: string, ledgerBaseUrl: string) {
       noticeUuid?: string,
       dataElements?: Array<{ uuid: string; selected: boolean }>
     ): Promise<unknown> {
+      if (!useLedger) {
+        const url = privacyCenterUrl(baseRequest, `/manage-consent?status=${status}`);
+        const body: Record<string, unknown> = { purpose_uuid: purposeId, contact };
+        if (nominatorContact) {
+          body.nominator_contact = nominatorContact;
+        }
+        if (Array.isArray(dataElementUuids) && dataElementUuids.length > 0) {
+          body.data_element_uuids = dataElementUuids;
+        }
+        if (productUuid) {
+          body.product_uuid = productUuid;
+        }
+        return privacyCenterApiFetch(url, {
+          ...options,
+          method: "POST",
+          body: JSON.stringify(body),
+          authToken: resolveAuthToken(authToken, baseRequest),
+        });
+      }
       if (!noticeUuid) {
         throw new Error("notice_uuid is required to manage consent via the ledger");
       }
@@ -519,6 +553,44 @@ export function createConsentClient(baseUrl: string, ledgerBaseUrl: string) {
       });
     },
 
+    /**
+     * List all data principals that share this session's contact
+     * (shared-contact profile picker). Identity is derived server-side from the
+     * JWT — the caller sends nothing but its bearer token.
+     */
+    async listIdentities(
+      baseRequest: BaseRequest,
+      authToken?: string,
+      options?: Omit<ApiFetchOptions, "getAuthToken">
+    ): Promise<IdentityListResponse> {
+      const url = privacyCenterUrl(baseRequest, '/identities');
+      return privacyCenterApiFetch<IdentityListResponse>(url, {
+        ...options,
+        cache: 'no-store',
+        authToken: resolveAuthToken(authToken, baseRequest),
+      });
+    },
+
+    /**
+     * Re-scope the session to a chosen principal uuid (must be one of the
+     * principals sharing this session's contact). Returns fresh access/refresh
+     * tokens scoped to that principal.
+     */
+    async selectPrincipal(
+      baseRequest: BaseRequest,
+      principalUuid: string,
+      authToken?: string,
+      options?: Omit<ApiFetchOptions, "getAuthToken">
+    ): Promise<SelectPrincipalResponse> {
+      const url = privacyCenterUrl(baseRequest, '/identities/select');
+      return privacyCenterApiFetch<SelectPrincipalResponse>(url, {
+        ...options,
+        method: 'POST',
+        body: JSON.stringify({ uuid: principalUuid }),
+        authToken: resolveAuthToken(authToken, baseRequest),
+      });
+    },
+
     /**
      * Get receipts (privacy center) — consent receipts for the authenticated user
      */
@@ -547,8 +619,13 @@ export function createConsentClient(baseUrl: string, ledgerBaseUrl: string) {
       if (params.created_before) queryParams.append("created_before", params.created_before);
       if (params.language) queryParams.append("language", params.language);
       const queryString = queryParams.toString();
-      // Receipts are served by the Go ledger (paginated list under /public/...).
-      const url = ledgerUrl(baseRequest, `/receipts${queryString ? `?${queryString}` : ""}`);
+      // With a ledger configured, receipts are served by the Go ledger
+      // (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
+        ? ledgerUrl(baseRequest, receiptsSuffix)
+        : privacyCenterUrl(baseRequest, receiptsSuffix);
       return privacyCenterApiFetch<unknown>(url, {
         ...options,
         method: "GET",
@@ -568,9 +645,12 @@ export function createConsentClient(baseUrl: string, ledgerBaseUrl: string) {
       receiptUuid: string,
       authToken?: string
     ): Promise<Blob> {
-      // The ledger serves the receipt PDF at /receipts/{uuid}/download; the
-      // receipt_uuid comes from the ledger list above, so both must be the ledger.
-      const url = ledgerUrl(baseRequest, `/receipts/${receiptUuid}/download`);
+      // 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
+        ? ledgerUrl(baseRequest, `/receipts/${receiptUuid}/download`)
+        : privacyCenterUrl(baseRequest, `/receipts/${receiptUuid}/pdf`);
       const token = resolveAuthToken(authToken, baseRequest);
       const requestHeaders = new Headers();
       requestHeaders.set("Accept", "application/pdf");

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

@@ -1,8 +1,10 @@
 import { useEffect, useState, type CSSProperties } from 'react';
-import { ChevronDown } from 'lucide-react';
+import { ChevronDown, 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 { usePrivacyCenterExitAction } from './usePrivacyCenterExitAction';
 
@@ -30,6 +32,7 @@ function initialsFromEmail(email: string): string {
 }
 
 export function UserMenu({ onBack }: UserMenuProps) {
+  const { t } = useTranslation();
   const branding = useBranding();
   const { organization } = useOrganization();
   const [email, setEmail] = useState('');
@@ -40,6 +43,7 @@ export function UserMenu({ onBack }: UserMenuProps) {
 
   const { handleAction, label: actionLabel, Icon: ActionIcon } =
     usePrivacyCenterExitAction(onBack);
+  const { canSwitch, switchProfile } = useProfileSwitch();
 
   const displayName = branding?.brand_name || organization?.name || '';
   const triggerAvatarName = email ? initialsFromEmail(email) : displayName || '?';
@@ -57,6 +61,25 @@ export function UserMenu({ onBack }: UserMenuProps) {
     transition: 'background 150ms ease, border-color 150ms ease, box-shadow 150ms ease',
   };
 
+  // Shared style for the popover's action rows (switch profile, back/sign out).
+  const menuItemStyle: CSSProperties = {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 10,
+    width: '100%',
+    padding: '10px 14px',
+    border: 'none',
+    borderRadius: 8,
+    background: 'transparent',
+    color: getVar('--pc-text-primary'),
+    cursor: 'pointer',
+    fontFamily: 'inherit',
+    fontSize: 14,
+    fontWeight: 500,
+    textAlign: 'left',
+    transition: 'background 150ms ease',
+  };
+
   const trigger = (
     <div
       style={triggerStyle}
@@ -139,7 +162,10 @@ export function UserMenu({ onBack }: UserMenuProps) {
             display: 'flex',
             alignItems: 'center',
             gap: 10,
-            borderBottom: onBack ? `1px solid ${getVar('--pc-border-color')}` : 'none',
+            borderBottom:
+              onBack || canSwitch
+                ? `1px solid ${getVar('--pc-border-color')}`
+                : 'none',
           }}
         >
           <PCAvatar name={initialsFromEmail(email)} size="sm" color="info" />
@@ -162,40 +188,43 @@ export function UserMenu({ onBack }: UserMenuProps) {
         </div>
       )}
 
-      {/* Action row */}
-      {onBack && (
+      {/* Action rows */}
+      {(canSwitch || onBack) && (
         <div style={{ padding: '6px 8px 8px' }}>
-          <button
-            type="button"
-            role="menuitem"
-            onClick={handleAction}
-            style={{
-              display: 'flex',
-              alignItems: 'center',
-              gap: 10,
-              width: '100%',
-              padding: '10px 14px',
-              border: 'none',
-              borderRadius: 8,
-              background: 'transparent',
-              color: getVar('--pc-text-primary'),
-              cursor: 'pointer',
-              fontFamily: 'inherit',
-              fontSize: 14,
-              fontWeight: 500,
-              textAlign: 'left',
-              transition: 'background 150ms ease',
-            }}
-            onMouseEnter={(e) => {
-              e.currentTarget.style.background = getVar('--pc-bg-hover');
-            }}
-            onMouseLeave={(e) => {
-              e.currentTarget.style.background = 'transparent';
-            }}
-          >
-            <ActionIcon size={16} strokeWidth={2} />
-            <span>{actionLabel}</span>
-          </button>
+          {canSwitch && (
+            <button
+              type="button"
+              role="menuitem"
+              onClick={switchProfile}
+              style={menuItemStyle}
+              onMouseEnter={(e) => {
+                e.currentTarget.style.background = getVar('--pc-bg-hover');
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.background = 'transparent';
+              }}
+            >
+              <Users size={16} strokeWidth={2} />
+              <span>{t('switchProfile')}</span>
+            </button>
+          )}
+          {onBack && (
+            <button
+              type="button"
+              role="menuitem"
+              onClick={handleAction}
+              style={menuItemStyle}
+              onMouseEnter={(e) => {
+                e.currentTarget.style.background = getVar('--pc-bg-hover');
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.background = 'transparent';
+              }}
+            >
+              <ActionIcon size={16} strokeWidth={2} />
+              <span>{actionLabel}</span>
+            </button>
+          )}
         </div>
       )}
     </div>

package/src/RedactoPrivacyCenter/components/Form.tsx

@@ -143,7 +143,7 @@ export default function Form({
   const [isSubmitted, setIsSubmitted] = useState(false);
   const { t } = useTranslation();
   const { accessToken, refreshToken, onError, updateTokens } = useAuth();
-  const { consentClient, baseUrl } = useBaseUrl();
+  const { consentClient, baseUrl, ledgerBaseUrl } = useBaseUrl();
   const organizationId = organization?.uuid;
   const workspaceId = organization?.workspaces[0]?.uuid;
 
@@ -283,10 +283,13 @@ export default function Form({
   // an arbitrary contact, which the JWT-scoped ledger endpoint cannot serve,
   // so those keep the Python form/data groups. Returns the form data unchanged
   // when ineligible or when the ledger read fails (graceful fallback to
-  // whatever groups form/data supplied).
+  // whatever groups form/data supplied). Without a configured ledgerBaseUrl,
+  // consents still live in Python and form/data groups are authoritative, so
+  // the overlay must not run (fetchUserConsents would return the legacy Python
+  // shape, which consentGroupToFormProductGroup does not map).
   const withLedgerPickerGroups = useCallback(
     async (form: FormData, language?: string): Promise<FormData> => {
-      if (isPopup || isCaseManagementContext || !organizationId || !workspaceId) {
+      if (!ledgerBaseUrl || isPopup || isCaseManagementContext || !organizationId || !workspaceId) {
         return form;
       }
       const consents = await fetchUserConsents({
@@ -313,6 +316,7 @@ export default function Form({
       };
     },
     [
+      ledgerBaseUrl,
       isPopup,
       isCaseManagementContext,
       organizationId,

package/src/RedactoPrivacyCenter/components/SelectUser.tsx

@@ -0,0 +1,83 @@
+import { ChevronRight } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { PCText, PCTitle } from '../ui';
+import type { SelectUserProps } from '../lib/types';
+
+/**
+ * "Choose your profile" picker, shown when the signed-in contact maps to more
+ * than one data principal (shared contact). Selecting one re-scopes the session
+ * to that principal uuid. Purely presentational — SelectUserGate owns the fetch
+ * and the re-scope. Structural styles live in styles/injectStyles.ts
+ * (.pc-select-user*).
+ */
+export const SelectUser = ({
+  email,
+  candidates,
+  onSelect,
+  busyOrgUserId,
+  error,
+}: SelectUserProps) => {
+  const { t } = useTranslation();
+  const subtitle = email
+    ? t('emailLinkedToMultipleProfiles', { email })
+    : t('contactLinkedToMultipleProfiles');
+
+  // A candidate with no uuid can't be selected (it's the value we submit),
+  // so drop it rather than render an unclickable row.
+  const selectable = candidates.filter((candidate) => candidate.uuid);
+
+  return (
+    <div className="pc-select-user">
+      <div className="pc-select-user__header">
+        <PCTitle as="h2">{t('chooseYourProfile')}</PCTitle>
+        <PCText as="p" size="base" color="secondary" align="center">
+          {subtitle}
+        </PCText>
+      </div>
+
+      <div className="pc-select-user__list">
+        {selectable.map((candidate) => {
+          const principalUuid = candidate.uuid || '';
+          const primaryLabel =
+            candidate.primary_email || candidate.primary_mobile || candidate.uuid;
+          const secondaryLabel =
+            candidate.primary_mobile || candidate.primary_email || '';
+          const isBusy = busyOrgUserId === principalUuid;
+          return (
+            <button
+              key={candidate.uuid}
+              type="button"
+              className="pc-select-user__item"
+              onClick={() => onSelect(principalUuid)}
+              disabled={!principalUuid || busyOrgUserId !== null}
+            >
+              <span className="pc-select-user__item-text">
+                <span className="pc-select-user__item-primary">
+                  {primaryLabel}
+                </span>
+                {secondaryLabel ? (
+                  <span className="pc-select-user__item-secondary">
+                    {secondaryLabel}
+                  </span>
+                ) : null}
+              </span>
+              {isBusy ? (
+                <span className="pc-select-user__item-status">
+                  {t('signingInEllipsis')}
+                </span>
+              ) : (
+                <ChevronRight size={18} className="pc-select-user__item-chevron" />
+              )}
+            </button>
+          );
+        })}
+      </div>
+
+      {error ? (
+        <p className="pc-select-user__error" role="alert">
+          {error}
+        </p>
+      ) : null}
+    </div>
+  );
+};