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

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";
@@ -23,9 +25,16 @@ export type BaseRequest = {
 /**
  * Consent service client factory.
  * Creates a client instance with a specific base URL.
- * @param baseUrl - Consent server 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/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) {
+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.
@@ -170,6 +179,13 @@ export function createConsentClient(baseUrl: string) {
     return `${baseUrl}/organisations/${baseRequest.organisationUuid}/workspaces/${baseRequest.workspaceUuid}/dsar/privacy-center${path}`;
   }
 
+  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}`;
+  }
+
   function caseUrl(baseRequest: BaseRequest, caseUuid: string, path = ''): string {
     return privacyCenterUrl(baseRequest, `/cases/${caseUuid}${path}`);
   }
@@ -373,7 +389,10 @@ export function createConsentClient(baseUrl: string) {
       if (params.product_uuid) queryParams.append("product_uuid", params.product_uuid);
       if (params.language) queryParams.append("language", params.language);
       const queryString = queryParams.toString();
-      const url = privacyCenterUrl(baseRequest, `/user-consents${queryString ? `?${queryString}` : ""}`);
+      const suffix = `/user-consents${queryString ? `?${queryString}` : ""}`;
+      const url = useLedger
+        ? ledgerUrl(baseRequest, suffix)
+        : privacyCenterUrl(baseRequest, suffix);
       return privacyCenterApiFetch(url, {
         ...options,
         method: "GET",
@@ -408,10 +427,10 @@ export function createConsentClient(baseUrl: string) {
       if (params.language) queryParams.append("language", params.language);
       if (params.nominator_uuid) queryParams.append("nominator_uuid", params.nominator_uuid);
       const queryString = queryParams.toString();
-      const url = privacyCenterUrl(
-        baseRequest,
-        `/user-consents/${productUuid}/purposes${queryString ? `?${queryString}` : ""}`
-      );
+      const suffix = `/user-consents/${productUuid}/purposes${queryString ? `?${queryString}` : ""}`;
+      const url = useLedger
+        ? ledgerUrl(baseRequest, suffix)
+        : privacyCenterUrl(baseRequest, suffix);
       return privacyCenterApiFetch(url, {
         ...options,
         method: "GET",
@@ -421,30 +440,88 @@ export function createConsentClient(baseUrl: string) {
     },
 
     /**
-     * Manage consent (privacy center) - revoke, regrant, or renew
+     * Manage consent (privacy center) - revoke, regrant, or renew.
+     *
+     * 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,
       options?: Omit<ApiFetchOptions, "getAuthToken">,
       nominatorContact?: string,
       dataElementUuids?: string[],
-      productUuid?: string
+      productUuid?: string,
+      noticeUuid?: string,
+      dataElements?: Array<{ uuid: string; selected: boolean }>
     ): Promise<unknown> {
-      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 (!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 (productUuid) {
-        body.product_uuid = productUuid;
+      if (!noticeUuid) {
+        throw new Error("notice_uuid is required to manage consent via the ledger");
       }
+      const purposeSelected = status !== 'revoke';
+      const elements = (dataElements ?? []).map((de) => {
+        let selected: boolean;
+        if (status === 'revoke') {
+          selected = false;
+        } else if (status === 'regrant') {
+          // Only the data elements the user chose to re-grant become selected.
+          selected = Array.isArray(dataElementUuids)
+            ? dataElementUuids.includes(de.uuid)
+            : de.selected;
+        } else {
+          // renew — preserve the currently-granted set.
+          selected = de.selected;
+        }
+        return { uuid: de.uuid, selected };
+      });
+      const body = {
+        notice_uuid: noticeUuid,
+        partial: true,
+        declined: false,
+        select_all_mandatory: false,
+        self_declared_adult: false,
+        purposes: [
+          {
+            purpose_uuid: purposeId,
+            selected: purposeSelected,
+            data_elements: elements,
+          },
+        ],
+      };
+      const url = ledgerUrl(baseRequest, "/submit-consent");
       return privacyCenterApiFetch(url, {
         ...options,
         method: "POST",
@@ -476,6 +553,44 @@ export function createConsentClient(baseUrl: 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
      */
@@ -504,7 +619,13 @@ export function createConsentClient(baseUrl: string) {
       if (params.created_before) queryParams.append("created_before", params.created_before);
       if (params.language) queryParams.append("language", params.language);
       const queryString = queryParams.toString();
-      const url = privacyCenterUrl(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",
@@ -524,7 +645,12 @@ export function createConsentClient(baseUrl: string) {
       receiptUuid: string,
       authToken?: string
     ): Promise<Blob> {
-      const url = privacyCenterUrl(baseRequest, `/receipts/${receiptUuid}/pdf`);
+      // 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/ConsentManager.tsx

@@ -754,6 +754,15 @@ export default function ConsentManager({ variant }: ConsentManagerProps) {
       };
 
       try {
+        // The ledger's submit-consent needs the notice the purpose was consented
+        // under, plus the purpose's data elements with their current selected
+        // state — both live on the loaded consent record (selectedRecord).
+        const noticeUuid = selectedRecord?.notice_uuid ?? undefined;
+        const dataElements = (selectedRecord?.data_elements ?? []).map((el) => ({
+          uuid: el.uuid,
+          selected: el.selected,
+        }));
+
         const response = await manageConsent({
           organizationId,
           workspaceId,
@@ -765,6 +774,8 @@ export default function ConsentManager({ variant }: ConsentManagerProps) {
           nominatorContact,
           dataElementUuids,
           productUuid,
+          noticeUuid,
+          dataElements,
         });
 
         if (response) {
@@ -787,7 +798,7 @@ export default function ConsentManager({ variant }: ConsentManagerProps) {
         handleCloseModal();
       }
     },
-    [organizationId, workspaceId, contact, fetchData, handleCloseModal, t, authContext, consentClient]
+    [organizationId, workspaceId, contact, fetchData, handleCloseModal, t, authContext, consentClient, selectedRecord]
   );
 
   const getVar = (varName: string): string => `var(${varName})`;

package/src/RedactoPrivacyCenter/components/Form.tsx

@@ -10,9 +10,10 @@ import { PiUploadBold } from 'react-icons/pi';
 import { toast } from '../utils/toast';
 import { PCButton, PCCheckbox, PCInput, PCLoader, PCSelect, PCText, PCTextarea } from '../ui';
 import { PCModal } from '../ui/PCModal';
-import { buildGroupDataElements, buildGroupPurposes } from './groupHelpers';
+import { buildGroupDataElements, buildGroupPurposes, consentGroupToFormProductGroup } from './groupHelpers';
 import { pcStyles } from '../styles/pcStyles';
-import { createCaseRequest, getFormData } from '../lib/api';
+import { createCaseRequest, fetchUserConsents, getFormData } from '../lib/api';
+import { FORM_PICKER_GROUP_LIMIT } from '../lib/constants';
 import { ensureValidToken } from '../lib/utils';
 import { useAuth } from '../context/AuthContext';
 import { useBaseUrl } from '../context/BaseUrlContext';
@@ -142,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;
 
@@ -274,6 +275,57 @@ export default function Form({
     [],
   );
 
+  // Approach A: source the DSAR request-form product picker from the Go
+  // ledger's user-consents. After the consent cutover, consents live in the
+  // ledger, so Python's form/data returns no product groups; we overlay the
+  // ledger's product-grouped consents onto the form data instead. Only the
+  // end-user privacy-center path is eligible — popup / case-management resolve
+  // 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). 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 (!ledgerBaseUrl || isPopup || isCaseManagementContext || !organizationId || !workspaceId) {
+        return form;
+      }
+      const consents = await fetchUserConsents({
+        organizationId,
+        workspaceId,
+        authContext,
+        consentClient,
+        // No status filter: include every status (active / expired / withdrawn
+        // / declined), matching Python form/data, so a DSAR can target products
+        // the user no longer actively consents to.
+        limit: FORM_PICKER_GROUP_LIMIT,
+        nominatedLimit: FORM_PICKER_GROUP_LIMIT,
+        language,
+      });
+      if (!consents) {
+        return form;
+      }
+      return {
+        ...form,
+        direct_groups: (consents.direct ?? []).map(consentGroupToFormProductGroup),
+        nominated_groups: (consents.nominated ?? []).map(
+          consentGroupToFormProductGroup,
+        ),
+      };
+    },
+    [
+      ledgerBaseUrl,
+      isPopup,
+      isCaseManagementContext,
+      organizationId,
+      workspaceId,
+      authContext,
+      consentClient,
+    ],
+  );
+
   const fetchAndApplyTranslations = useCallback(async (langValue: string) => {
     if (!organizationId || !workspaceId || !data) {
       return;
@@ -314,7 +366,7 @@ export default function Form({
         return;
       }
 
-      setData(translatedFormData);
+      setData(await withLedgerPickerGroups(translatedFormData, langValue));
 
       if (translatedFormData.grievance_options) {
         const currentGrievanceSelections = { ...selectedGrievances };
@@ -333,7 +385,7 @@ export default function Form({
     } finally {
       setIsTranslating(false);
     }
-  }, [organizationId, workspaceId, data, formData.contact, isPopup, isCaseManagementContext, authContext, consentClient, selectedGrievances, t]);
+  }, [organizationId, workspaceId, data, formData.contact, isPopup, isCaseManagementContext, authContext, consentClient, selectedGrievances, t, withLedgerPickerGroups]);
 
   // Clear product / org-level selections when request type changes.
   // Per-product state (selectedPurposes, selectedCorrectionElements,
@@ -486,7 +538,11 @@ export default function Form({
           }
         }
 
-        setData(displayData);
+        const pickerData = await withLedgerPickerGroups(
+          displayData,
+          langParam || undefined,
+        );
+        setData(pickerData);
         setGrievanceOptions(displayData.grievance_options || []);
         const initialGrievances = (
           displayData.grievance_options || []
@@ -509,7 +565,7 @@ export default function Form({
     };
 
     void initializePrivacyCenterForm();
-  }, [organizationId, workspaceId, isPopup, authContext, consentClient]);
+  }, [organizationId, workspaceId, isPopup, authContext, consentClient, withLedgerPickerGroups]);
 
   /**
    * Maps translated correction element names back to English names using UUID lookup.

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>
+  );
+};