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

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

@@ -1,9 +1,12 @@
 import { useEffect, useState, type CSSProperties } from 'react';
-import { ChevronDown } 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 { getVar } from '../../lib/utils';
+import { useProfileSwitch } from '../../context/ProfileSwitchContext';
+import { useAuth } from '../../context/AuthContext';
+import { decodeJwtToken, getVar } from '../../lib/utils';
 import { usePrivacyCenterExitAction } from './usePrivacyCenterExitAction';
 
 type UserMenuProps = {
@@ -30,8 +33,10 @@ function initialsFromEmail(email: string): string {
 }
 
 export function UserMenu({ onBack }: UserMenuProps) {
+  const { t } = useTranslation();
   const branding = useBranding();
   const { organization } = useOrganization();
+  const { accessToken } = useAuth();
   const [email, setEmail] = useState('');
 
   useEffect(() => {
@@ -40,42 +45,63 @@ export function UserMenu({ onBack }: UserMenuProps) {
 
   const { handleAction, label: actionLabel, Icon: ActionIcon } =
     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',
+  // 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).
+  const menuItemStyle: CSSProperties = {
+    display: 'flex',
     alignItems: 'center',
-    gap: 6,
-    padding: '4px 6px 4px 4px',
-    borderRadius: 9999,
+    gap: 10,
+    width: '100%',
+    padding: '10px 14px',
+    border: 'none',
+    borderRadius: 8,
     background: 'transparent',
-    border: `1px solid ${getVar('--pc-border-color')}`,
-    color: getVar('--pc-text-secondary'),
+    color: getVar('--pc-text-primary'),
     cursor: 'pointer',
-    transition: 'background 150ms ease, border-color 150ms ease, box-shadow 150ms ease',
+    fontFamily: 'inherit',
+    fontSize: 14,
+    fontWeight: 500,
+    textAlign: 'left',
+    transition: 'background 150ms ease',
   };
 
   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 = (
@@ -132,70 +158,75 @@ export function UserMenu({ onBack }: UserMenuProps) {
       </div>
 
       {/* Identity card */}
-      {email && (
+      {(email || orgUserId) && (
         <div
           style={{
             padding: '12px 16px',
             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" />
-          <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>
       )}
 
-      {/* 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

@@ -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})`;

package/src/RedactoPrivacyCenter/components/Form.tsx

@@ -10,10 +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, consentGroupToFormProductGroup } from './groupHelpers';
+import { buildGroupDataElements, buildGroupPurposes, consentGroupToFormProductGroup, legacyFlatGroup } from './groupHelpers';
 import { pcStyles } from '../styles/pcStyles';
 import { createCaseRequest, fetchUserConsents, getFormData } from '../lib/api';
-import { FORM_PICKER_GROUP_LIMIT } from '../lib/constants';
+import { FORM_PICKER_GROUP_LIMIT, LEGACY_PRODUCT_GROUP_UUID } from '../lib/constants';
 import { ensureValidToken } from '../lib/utils';
 import { useAuth } from '../context/AuthContext';
 import { useBaseUrl } from '../context/BaseUrlContext';
@@ -235,12 +235,31 @@ export default function Form({
 
   // Union of direct + nominated product groups exposed by the backend.
   // Drives both the product-cards step and the per-product picker beneath.
+  // When the backend exposes no groups at all but did return the legacy flat
+  // `purposes` list (pre-grouping Python deployments, and the popup /
+  // case-management contexts that cannot read user-consents), fall back to a
+  // single synthetic group so the purposes stay reachable instead of the
+  // picker claiming the principal has no consents.
   const allGroups = useMemo<FormProductGroup[]>(() => {
     if (!data) {
       return [];
     }
-    return [...(data.direct_groups ?? []), ...(data.nominated_groups ?? [])];
-  }, [data]);
+    const groups = [
+      ...(data.direct_groups ?? []),
+      ...(data.nominated_groups ?? []),
+    ];
+    if (groups.length > 0) {
+      return groups;
+    }
+    const flatGroup = legacyFlatGroup(data, t('yourData'));
+    // `buildGroupPurposes` is what the panel renders from — it drops purposes
+    // with no data elements, so a flat list that survives nothing must keep
+    // showing the empty state rather than an unusable panel.
+    if (buildGroupPurposes(flatGroup).length === 0) {
+      return [];
+    }
+    return [flatGroup];
+  }, [data, t]);
 
   // TECH-3712 UX: when the DP has exactly one consent group total
   // (direct + nominated combined), the product-selection step is friction —
@@ -275,16 +294,20 @@ 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).
-  const withLedgerPickerGroups = useCallback(
+  // Approach A: source the DSAR request-form product picker from user-consents
+  // rather than from Python's form/data, which stopped emitting product groups
+  // after the consent cutover. `consentClient.getUserConsents` serves the same
+  // grouped payload from either backend — the Go ledger's
+  // `/public/.../user-consents` when a ledgerBaseUrl is configured, Python's
+  // `/dsar/privacy-center/user-consents` otherwise (the same source the
+  // Manage Consent view reads in both modes) — so the overlay runs regardless
+  // of which backend the SDK points at. Only the end-user privacy-center path
+  // is eligible: popup / case-management resolve an arbitrary contact, which
+  // the JWT-scoped user-consents endpoint cannot serve, so those keep the
+  // form/data groups. Returns the form data unchanged when ineligible, when
+  // the read fails, or when it comes back with no groups at all — an empty
+  // result must never overwrite groups form/data did supply.
+  const withUserConsentPickerGroups = useCallback(
     async (form: FormData, language?: string): Promise<FormData> => {
       if (isPopup || isCaseManagementContext || !organizationId || !workspaceId) {
         return form;
@@ -301,15 +324,15 @@ export default function Form({
         nominatedLimit: FORM_PICKER_GROUP_LIMIT,
         language,
       });
-      if (!consents) {
+      const direct = consents?.direct ?? [];
+      const nominated = consents?.nominated ?? [];
+      if (direct.length === 0 && nominated.length === 0) {
         return form;
       }
       return {
         ...form,
-        direct_groups: (consents.direct ?? []).map(consentGroupToFormProductGroup),
-        nominated_groups: (consents.nominated ?? []).map(
-          consentGroupToFormProductGroup,
-        ),
+        direct_groups: direct.map(consentGroupToFormProductGroup),
+        nominated_groups: nominated.map(consentGroupToFormProductGroup),
       };
     },
     [
@@ -362,7 +385,7 @@ export default function Form({
         return;
       }
 
-      setData(await withLedgerPickerGroups(translatedFormData, langValue));
+      setData(await withUserConsentPickerGroups(translatedFormData, langValue));
 
       if (translatedFormData.grievance_options) {
         const currentGrievanceSelections = { ...selectedGrievances };
@@ -381,7 +404,7 @@ export default function Form({
     } finally {
       setIsTranslating(false);
     }
-  }, [organizationId, workspaceId, data, formData.contact, isPopup, isCaseManagementContext, authContext, consentClient, selectedGrievances, t, withLedgerPickerGroups]);
+  }, [organizationId, workspaceId, data, formData.contact, isPopup, isCaseManagementContext, authContext, consentClient, selectedGrievances, t, withUserConsentPickerGroups]);
 
   // Clear product / org-level selections when request type changes.
   // Per-product state (selectedPurposes, selectedCorrectionElements,
@@ -534,7 +557,7 @@ export default function Form({
           }
         }
 
-        const pickerData = await withLedgerPickerGroups(
+        const pickerData = await withUserConsentPickerGroups(
           displayData,
           langParam || undefined,
         );
@@ -561,7 +584,7 @@ export default function Form({
     };
 
     void initializePrivacyCenterForm();
-  }, [organizationId, workspaceId, isPopup, authContext, consentClient, withLedgerPickerGroups]);
+  }, [organizationId, workspaceId, isPopup, authContext, consentClient, withUserConsentPickerGroups]);
 
   /**
    * Maps translated correction element names back to English names using UUID lookup.
@@ -667,7 +690,13 @@ export default function Form({
     }
 
     const isProductScoped = isProductScopedRequestType(requestType);
-    const anchorGroup = isProductScoped ? selectedGroup : null;
+    // The synthetic legacy-flat group has no server-side product, so it must
+    // not anchor the case — those submissions keep the pre-grouping
+    // org-level shape (`product_uuid` is optional on the backend).
+    const isLegacyFlatSelection =
+      selectedGroup?.product_uuid === LEGACY_PRODUCT_GROUP_UUID;
+    const anchorGroup =
+      isProductScoped && !isLegacyFlatSelection ? selectedGroup : null;
 
     const requestDetails: {
       purposes: UpdatePurpose[];

package/src/RedactoPrivacyCenter/components/ModifyConsentModal.tsx

@@ -32,7 +32,7 @@ export const ModifyConsentModal = ({
         action: 'revoke' as ConsentAction,
         buttonLabel: t('revokeConsent'),
         buttonVariant: 'danger' as const,
-        warningMessage: t('revokeConsentWarning'),
+        warningMessage: selectedRecord.revoke_warning_message || t('revokeConsentWarning'),
         description: nominatorLabel
           ? t('aboutToModifyConsentOnBehalf', { nominator: nominatorLabel })
           : t('aboutToModifyConsent'),

package/src/RedactoPrivacyCenter/components/SelectUser.tsx

@@ -0,0 +1,95 @@
+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 = ({
+  candidates,
+  onSelect,
+  busyOrgUserId,
+  error,
+}: SelectUserProps) => {
+  const { t } = useTranslation();
+
+  // 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">
+          {t('loginIdentifierLinkedToMultipleProfiles')}
+        </PCText>
+      </div>
+
+      <div className="pc-select-user__list">
+        {selectable.map((candidate) => {
+          const principalUuid = candidate.uuid || '';
+          const email = candidate.primary_email || '';
+          const mobile = candidate.primary_mobile || '';
+          const orgUserId = candidate.org_user_id || '';
+          // org_user_id is unique per principal (ledger-enforced within the
+          // org/workspace), so it leads the row as the reliable way to tell
+          // shared-contact profiles apart when the email/mobile are identical.
+          // Fall back to a contact when a principal has no org_user_id, so the
+          // row still shows something identifiable.
+          const primaryLabel = orgUserId
+            ? t('userIdLabel', { id: orgUserId })
+            : email || mobile || candidate.uuid;
+          // Email and mobile drop below the id. Skip any value that already
+          // surfaced as the primary label (the fallback case) or duplicates the
+          // other contact, so we never echo the same value twice.
+          const secondaryLabels = [email, mobile].filter(
+            (value, index, all) =>
+              value !== '' &&
+              value !== primaryLabel &&
+              all.indexOf(value) === index
+          );
+          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>
+                {secondaryLabels.map((label) => (
+                  <span key={label} className="pc-select-user__item-secondary">
+                    {label}
+                  </span>
+                ))}
+              </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>
+  );
+};