@redacto.io/consent-sdk-react 10.0.0-beta.3 → 10.0.0-beta.4

package/package.json

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

package/src/RedactoNoticeAssisted/i18n.ts

@@ -1248,60 +1248,6 @@ const as: StaticStrings = {
   close: "বন্ধ কৰক",
 };
 
-const bho: StaticStrings = {
-  useEmailInstead: "ईमेल इस्तेमाल करीं",
-  useMobileInstead: "मोबाइल इस्तेमाल करीं",
-  emailAddress: "ईमेल पता",
-  otpHelperEmail: "हमनी एह ईमेल पर एक बेर इस्तेमाल होखे वाला पासवर्ड भेजब।",
-  changeEmail: "ईमेल बदलीं",
-  expandDetails: "{name} के विवरण फैलाईं",
-  collapseDetails: "{name} के विवरण समेटीं",
-  selectAllFor: "{name} खातिर सभ डेटा तत्व चुनीं",
-  selectElement: "{name} चुनीं",
-  selectElementRequired: "{name} चुनीं (जरूरी)",
-  required: "जरूरी",
-  logoAlt: "लोगो",
-  selectLanguage: "भाषा चुनीं",
-  selectLanguageCurrent: "भाषा चुनीं. मौजूदा भाषा: {lang}",
-  opensInNewTab: "नया टैब में खुलेला",
-  audioStart: "ऑडियो प्लेबैक शुरू करीं",
-  audioPause: "ऑडियो प्लेबैक रोकीं",
-  talkbackStart: "टॉकबैक शुरू करीं",
-  talkbackPause: "टॉकबैक रोकीं",
-  mobileNumber: "मोबाइल नंबर",
-  otpHelper: "हमनी एह नंबर पर एक बेर इस्तेमाल होखे वाला पासवर्ड भेजब।",
-  otpSentTo: "ओटीपी (OTP) भेजल गइल",
-  changeMobile: "मोबाइल नंबर बदलीं",
-  enterNDigitOtp: "{count}-अंक के ओटीपी (OTP) डालीं",
-  otpDigit: "ओटीपी (OTP) अंक {index}",
-  resendIn: "{seconds} सेकंड में ओटीपी (OTP) फेर से भेजीं",
-  sending: "भेजल जा रहल बा…",
-  resendOtp: "ओटीपी (OTP) फेर से भेजीं",
-  getOtp: "ओटीपी (OTP) पाईं",
-  verifying: "सत्यापित कइल जा रहल बा…",
-  verifyOtp: "ओटीपी (OTP) सत्यापित करीं",
-  sendOtp: "ओटीपी (OTP) भेजीं",
-  confirmOtp: "ओटीपी (OTP) के पुष्टि करीं",
-  verifyWithOtp: "ओटीपी (OTP) से सत्यापित करीं",
-  editSelections: "चुनाव में बदलाव करीं",
-  otpIncorrect:
-    "रउरा डालल सत्यापन कोड गलत बा। कृपया जाँच करीं आ फेर से कोशिश करीं।",
-  otpExpired: "रउरा सत्यापन कोड के मियाद खतम हो गइल बा। कृपया नया कोड मांगीं।",
-  otpNotFound: "सत्यापन कोड ना मिलल। कृपया नया कोड मांगीं।",
-  otpVerifyFailed: "ओटीपी (OTP) के सत्यापन ना हो सकल। कृपया फेर से कोशिश करीं।",
-  otpSendFailed: "ओटीपी (OTP) ना भेजल जा सकल। कृपया फेर से कोशिश करीं।",
-  consentConfirmed: "सहमति के पुष्टि भइल",
-  recordedUnder: "ओटीपी (OTP) सत्यापित · {regulation} के तहत दर्ज भइल",
-  recordedUnderAt:
-    "ओटीपी (OTP) सत्यापित · {regulation} के तहत {time} बजे दर्ज भइल",
-  consentReferenceId: "सहमति संदर्भ आईडी",
-  proceed: "आगे बढ़ीं",
-  loadingNotice: "नोटिस लोड हो रहल बा",
-  loadFailedTitle: "सहमति नोटिस लोड ना हो सकल",
-  tryAgain: "कृपया फेर से कोसिस करीं।",
-  close: "बंद करीं",
-};
-
 const brx: StaticStrings = {
   useEmailInstead: "इमेल बाहाय",
   useMobileInstead: "मबाइल बाहाय",
@@ -1435,7 +1381,6 @@ export const STATIC_STRINGS: Record<string, StaticStrings> = {
   te,
   ur,
   as,
-  bho,
   brx,
   doi,
 };

package/src/RedactoNoticeConsent/language-codes.ts

@@ -6,7 +6,6 @@ export const LANGUAGE_NATIVE_LABELS: Record<string, string> = {
   English: "English",
   Assamese: "অসমীয়া (Assamese)",
   Bengali: "বাংলা (Bengali)",
-  Bhojpuri: "भोजपुरी (Bhojpuri)",
   Bodo: "बड़ो (Bodo)",
   Dogri: "डोगरी (Dogri)",
   Gujarati: "ગુજરાતી (Gujarati)",
@@ -44,7 +43,6 @@ const LANGUAGE_NAME_TO_BCP47: Record<string, string> = {
   English: "en",
   Assamese: "as",
   Bengali: "bn",
-  Bhojpuri: "bho",
   Bodo: "brx",
   Dogri: "doi",
   Gujarati: "gu",

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

@@ -1,5 +1,5 @@
 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';
@@ -56,17 +56,11 @@ export function UserMenu({ onBack }: UserMenuProps) {
   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).
@@ -89,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 = (

package/src/RedactoPrivacyCenter/lib/constants.ts

@@ -40,7 +40,6 @@ export const languageOptions = [
   { value: 'mni-Mtei', label: 'ꯃꯩꯇꯩꯂꯣꯟ (Manipuri)' },
   { value: 'gom', label: 'कोंकणी (Goan Konkani)' },
   { value: 'sa', label: 'संस्कृतम् (Sanskrit)' },
-  { value: 'bho', label: 'भोजपुरी (Bhojpuri)' },
   { value: 'brx', label: 'बड़ो (Bodo)' },
   { value: 'ks', label: 'كٲشُر (Kashmiri)' },
   { value: 'sat', label: 'ᱥᱟᱱᱛᱟᱲᱤ (Santali)' },

package/src/RedactoPrivacyCenter/lib/locales.ts

@@ -2,7 +2,6 @@
 import enTranslation from '../locales/en/translation.json';
 import asTranslation from '../locales/as/translation.json';
 import bnTranslation from '../locales/bn/translation.json';
-import bhoTranslation from '../locales/bho/translation.json';
 import brxTranslation from '../locales/brx/translation.json';
 import doiTranslation from '../locales/doi/translation.json';
 import gomTranslation from '../locales/gom/translation.json';
@@ -28,7 +27,6 @@ const activityFetchErrorTranslations: Record<string, string> = {
   en: 'Failed to fetch activity data',
   as: 'কাৰ্যকলাপৰ তথ্য আনিবলৈ ব্যৰ্থ',
   bn: 'কার্যকলাপের ডেটা আনতে ব্যর্থ',
-  bho: 'गतिविधि डेटा लावे में विफल',
   brx: 'खामानि डाटा लाङो दिहुनायाव असफल',
   doi: 'गतिविधि डेटा लावै मे असफल',
   gom: 'क्रियाकलाप डेटा आणपांत अयशस्वी',
@@ -68,7 +66,6 @@ const translations: Record<string, Record<string, any>> = {
   en: { translation: withSharedActivityErrors('en', enTranslation) },
   as: { translation: withSharedActivityErrors('as', asTranslation) },
   bn: { translation: withSharedActivityErrors('bn', bnTranslation) },
-  bho: { translation: withSharedActivityErrors('bho', bhoTranslation) },
   brx: { translation: withSharedActivityErrors('brx', brxTranslation) },
   doi: { translation: withSharedActivityErrors('doi', doiTranslation) },
   gom: { translation: withSharedActivityErrors('gom', gomTranslation) },

package/src/RedactoPrivacyCenter/locales/en/translation.json

@@ -353,5 +353,6 @@
   "couldNotSwitchProfile": "Could not switch to that profile. Please try again.",
   "purposeNotRevocable": "This purpose can't be withdrawn directly.",
   "purposeNotRevocableError": "This purpose can't be withdrawn directly. Please raise a request to remove it.",
-  "userIdLabel": "User ID: {{id}}"
+  "userIdLabel": "User ID: {{id}}",
+  "accountMenu": "Account menu"
 }

package/src/RedactoPrivacyCenter/styles/injectStyles.ts

@@ -2755,7 +2755,10 @@ export const injectPCStyles = () => {
       border-radius: 9999px;
     }
 
-    .pc-notification-bell-btn {
+    /* Circular navbar controls: the bell and the org-logo menu button. Same size
+       token, ring and hover, so the topbar cluster reads as one set of controls. */
+    .pc-notification-bell-btn,
+    .pc-navbar-avatar-btn {
       display: flex;
       align-items: center;
       justify-content: center;
@@ -2777,7 +2780,8 @@ export const injectPCStyles = () => {
       height: 14px;
     }
 
-    .pc-notification-bell-btn:hover {
+    .pc-notification-bell-btn:hover,
+    .pc-navbar-avatar-btn:hover {
       background-color: var(--pc-bg-hover);
       border-color: var(--pc-border-color-hover);
     }
@@ -2840,6 +2844,7 @@ export const injectPCStyles = () => {
     /* Keyboard focus rings for Notification Hub interactive controls */
     .pc-notification-cta:focus-visible,
     .pc-notification-bell-btn:focus-visible:not(:disabled),
+    .pc-navbar-avatar-btn:focus-visible:not(:disabled),
     .pc-notification-filter-tab:focus-visible:not(:disabled),
     .pc-notification-pagination-btn:focus-visible:not(:disabled),
     .pc-notification-link-btn:focus-visible:not(:disabled),

package/src/RedactoPrivacyCenter/styles/pcStyles.ts

@@ -669,6 +669,23 @@ export const pcStyles = {
     height: '48px',
     fontSize: getVar('--pc-font-size-base'),
   },
+  // Image avatars (org logos) must NOT sit on the brand-colour fill `avatar` sets:
+  // --pc-info resolves to the org's own primary colour, so a brand-coloured mark on a
+  // transparent background would be invisible against it. Neutral surface + hairline
+  // border instead. border-box keeps the rendered box at the exact avatarSm/Md/Lg size.
+  avatarImage: {
+    backgroundColor: getVar('--pc-bg-shell'),
+    border: `1px solid ${getVar('--pc-border-color')}`,
+    boxSizing: 'border-box',
+    objectFit: 'contain',
+    padding: '3px',
+  },
+  // For an image avatar inside a control that already draws the ring and surface
+  // (the navbar avatar button) — otherwise the two rings nest as concentric circles.
+  avatarImageBare: {
+    backgroundColor: 'transparent',
+    border: 'none',
+  },
 
   // Empty state styles
   empty: {

package/src/RedactoPrivacyCenter/ui/PCAvatar.test.tsx

@@ -0,0 +1,83 @@
+import { afterEach, describe, expect, it } from 'vitest';
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { PCAvatar } from './PCAvatar';
+
+/**
+ * Regression: PCAvatar applied a single style object to BOTH branches, so an image
+ * avatar (the org logo) was painted onto a disc filled with var(--pc-info) — which
+ * applyBrandingTheme maps to the org's own primary colour. A brand-coloured mark on a
+ * transparent background therefore rendered as a featureless brand-coloured circle.
+ */
+
+const LOGO_SRC = 'https://cdn.example.com/org-icon.svg';
+
+afterEach(cleanup);
+
+describe('PCAvatar', () => {
+  it('does not paint the brand-colour fill behind a logo image', () => {
+    render(<PCAvatar src={LOGO_SRC} name="Acme Corp" color="info" />);
+
+    const image = screen.getByRole('img');
+    expect(image.style.backgroundColor).not.toBe('var(--pc-info)');
+    expect(image.style.backgroundColor).toBe('var(--pc-bg-shell)');
+  });
+
+  it('contains the logo instead of stretching it, and keeps the box at its nominal size', () => {
+    render(<PCAvatar src={LOGO_SRC} name="Acme Corp" size="sm" color="info" />);
+
+    const image = screen.getByRole('img');
+    expect(image.style.objectFit).toBe('contain');
+    expect(image.style.boxSizing).toBe('border-box');
+    expect(image.style.width).toBe('24px');
+    expect(image.style.height).toBe('24px');
+  });
+
+  it('falls back to initials when the logo fails to load', () => {
+    render(<PCAvatar src={LOGO_SRC} name="Acme Corp" color="info" />);
+
+    fireEvent.error(screen.getByRole('img'));
+
+    expect(screen.queryByRole('img')).toBeNull();
+    expect(screen.getByText('AC')).toBeTruthy();
+  });
+
+  it('still fills initials avatars with the requested colour', () => {
+    render(<PCAvatar name="Acme Corp" color="info" />);
+
+    expect(screen.getByText('AC').style.backgroundColor).toBe('var(--pc-info)');
+  });
+
+  it('keeps its tile and ring by default (standalone brand mark)', () => {
+    render(<PCAvatar src={LOGO_SRC} name="Acme Corp" color="info" />);
+
+    const image = screen.getByRole('img');
+    expect(image.style.border).toContain('var(--pc-border-color)');
+    expect(image.style.backgroundColor).toBe('var(--pc-bg-shell)');
+  });
+
+  it('drops its tile and ring when framed={false}, so it cannot nest inside a bordered control', () => {
+    render(<PCAvatar src={LOGO_SRC} name="Acme Corp" color="info" framed={false} />);
+
+    const image = screen.getByRole('img');
+    expect(image.style.border).not.toContain('--pc-border-color');
+    expect(image.style.backgroundColor).toBe('transparent');
+    // Still contained — framed only controls the chrome, not the fit.
+    expect(image.style.objectFit).toBe('contain');
+  });
+
+  it('does not strip the initials fill when framed={false}', () => {
+    render(<PCAvatar name="Acme Corp" color="info" framed={false} />);
+
+    expect(screen.getByText('AC').style.backgroundColor).toBe('var(--pc-info)');
+  });
+
+  it('lets a caller override the style on both branches', () => {
+    const { rerender } = render(
+      <PCAvatar src={LOGO_SRC} name="Acme Corp" style={{ backgroundColor: 'red' }} />,
+    );
+    expect(screen.getByRole('img').style.backgroundColor).toBe('red');
+
+    rerender(<PCAvatar name="Acme Corp" style={{ backgroundColor: 'red' }} />);
+    expect(screen.getByText('AC').style.backgroundColor).toBe('red');
+  });
+});

package/src/RedactoPrivacyCenter/ui/PCAvatar.tsx

@@ -1,14 +1,17 @@
-import { type CSSProperties } from 'react';
+import { useEffect, useState, type CSSProperties } from 'react';
 import { pcStyles } from '../styles/pcStyles';
 
-export interface PCAvatarProps {
+export type PCAvatarProps = Readonly<{
   name?: string;
   src?: string;
   className?: string;
   style?: CSSProperties;
   size?: 'sm' | 'md' | 'lg';
   color?: 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info';
-}
+  // Image avatars draw their own surface + hairline ring. Set false when a parent
+  // control already draws them, so the two don't nest as concentric rings.
+  framed?: boolean;
+}>;
 
 function getInitials(name: string): string {
   return name
@@ -40,29 +43,50 @@ export function PCAvatar({
   style = {},
   size = 'md',
   color = 'primary',
+  framed = true,
 }: PCAvatarProps) {
-  const avatarStyle: CSSProperties = {
+  const [failed, setFailed] = useState(false);
+
+  // A new src deserves a fresh attempt — otherwise switching org/profile strands
+  // the avatar on the previous image's failure.
+  useEffect(() => setFailed(false), [src]);
+
+  const baseStyle: CSSProperties = {
     ...pcStyles.avatar,
     ...(size === 'sm' && pcStyles.avatarSm),
     ...(size === 'md' && pcStyles.avatarMd),
     ...(size === 'lg' && pcStyles.avatarLg),
-    backgroundColor: getColor(color),
-    ...style,
   };
 
-  if (src) {
+  if (src && !failed) {
+    // avatarImage overrides the brand-colour fill baked into pcStyles.avatar; a logo
+    // is usually a brand-coloured mark on transparency and would vanish against it.
+    const imageStyle: CSSProperties = {
+      ...baseStyle,
+      ...pcStyles.avatarImage,
+      ...(!framed && pcStyles.avatarImageBare),
+      ...style,
+    };
+
     return (
       <img
         src={src}
         alt={name}
         className={className}
-        style={avatarStyle}
+        style={imageStyle}
+        onError={() => setFailed(true)}
       />
     );
   }
 
+  const initialsStyle: CSSProperties = {
+    ...baseStyle,
+    backgroundColor: getColor(color),
+    ...style,
+  };
+
   return (
-    <div className={className} style={avatarStyle}>
+    <div className={className} style={initialsStyle}>
       {name ? getInitials(name) : '?'}
     </div>
   );