@redacto.io/consent-sdk-react 7.3.0 → 8.0.0

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

@@ -0,0 +1,222 @@
+import { useCallback, useEffect, useState, type CSSProperties } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ArrowLeft, ChevronDown, LogOut } from 'lucide-react';
+import { PCAvatar, PCPopover } from '../../ui';
+import { useBranding } from '../../context/BrandingContext';
+import { useOrganization } from '../../context/OrganizationContext';
+import { getVar, signOutPrivacyCenter } from '../../lib/utils';
+
+type UserMenuProps = {
+  onBack?: 'back' | 'signout';
+};
+
+function readEmail(): string {
+  if (typeof window === 'undefined') return '';
+  try {
+    return window.sessionStorage.getItem('email') ?? '';
+  } catch {
+    return '';
+  }
+}
+
+function initialsFromEmail(email: string): string {
+  if (!email) return '?';
+  const handle = email.split('@')[0] ?? '';
+  const parts = handle.split(/[._-]+/).filter(Boolean);
+  if (parts.length >= 2) {
+    return (parts[0]![0]! + parts[1]![0]!).toUpperCase();
+  }
+  return (handle[0] ?? '?').toUpperCase();
+}
+
+export function UserMenu({ onBack }: UserMenuProps) {
+  const { t } = useTranslation();
+  const branding = useBranding();
+  const { organization } = useOrganization();
+  const [email, setEmail] = useState('');
+
+  useEffect(() => {
+    setEmail(readEmail());
+  }, []);
+
+  const handleAction = useCallback(() => {
+    if (onBack === 'back') {
+      window.history.back();
+    } else if (onBack === 'signout') {
+      signOutPrivacyCenter();
+      window.history.back();
+    }
+  }, [onBack]);
+
+  const actionLabel = onBack === 'back' ? t('back') : t('signOut');
+  const ActionIcon = onBack === 'back' ? ArrowLeft : LogOut;
+
+  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',
+  };
+
+  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';
+      }}
+    >
+      {branding?.icon_url ? (
+        <PCAvatar src={branding.icon_url} name={triggerAvatarName} size="sm" color="info" />
+      ) : (
+        <PCAvatar name={triggerAvatarName} size="sm" color="info" />
+      )}
+      <ChevronDown size={14} strokeWidth={2} />
+    </div>
+  );
+
+  const content = (
+    <div
+      role="menu"
+      style={{
+        minWidth: 280,
+        maxWidth: 320,
+        padding: 0,
+        background: getVar('--pc-bg-primary'),
+      }}
+    >
+      {/* Branded gradient header */}
+      <div
+        className="pc-shell-user-menu-header"
+        style={{
+          padding: '14px 18px',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 4,
+          borderBottom: `1px solid ${getVar('--pc-border-color')}`,
+        }}
+      >
+        <div
+          style={{
+            fontSize: 10,
+            fontWeight: 600,
+            letterSpacing: '0.1em',
+            textTransform: 'uppercase',
+            color: getVar('--pc-text-secondary'),
+            lineHeight: 1.2,
+            opacity: 0.85,
+          }}
+        >
+          Privacy Center
+        </div>
+        <div
+          title={displayName}
+          style={{
+            fontSize: 16,
+            fontWeight: 600,
+            letterSpacing: '-0.01em',
+            color: getVar('--pc-text-primary'),
+            lineHeight: 1.25,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+          }}
+        >
+          {displayName || '—'}
+        </div>
+      </div>
+
+      {/* Identity card */}
+      {email && (
+        <div
+          style={{
+            padding: '12px 16px',
+            display: 'flex',
+            alignItems: 'center',
+            gap: 10,
+            borderBottom: onBack ? `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}
+          </div>
+        </div>
+      )}
+
+      {/* Action row */}
+      {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>
+        </div>
+      )}
+    </div>
+  );
+
+  return (
+    <PCPopover
+      placement="bottom-end"
+      shadow="md"
+      className="pc-shell-user-menu-popover"
+      content={content}
+    >
+      {trigger}
+    </PCPopover>
+  );
+}

package/src/RedactoPrivacyCenter/components/AppShell/hooks/useIsTruncated.ts

@@ -0,0 +1,28 @@
+import { useEffect, useState, type RefObject } from 'react';
+
+export function useIsTruncated<T extends HTMLElement>(ref: RefObject<T>): boolean {
+  const [truncated, setTruncated] = useState(false);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    const check = () => {
+      setTruncated(el.scrollWidth > el.clientWidth + 1);
+    };
+
+    check();
+
+    if (typeof ResizeObserver === 'undefined') {
+      const onResize = () => check();
+      window.addEventListener('resize', onResize);
+      return () => window.removeEventListener('resize', onResize);
+    }
+
+    const ro = new ResizeObserver(check);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [ref]);
+
+  return truncated;
+}

package/src/RedactoPrivacyCenter/components/AppShell/hooks/useKeyboardShortcut.ts

@@ -0,0 +1,40 @@
+import { useEffect } from 'react';
+
+export type ShortcutCombo = {
+  key: string;
+  /** When true, requires Cmd (mac) or Ctrl (win/linux). */
+  mod?: boolean;
+  shift?: boolean;
+  alt?: boolean;
+};
+
+function isEditableTarget(target: EventTarget | null): boolean {
+  if (!target || !(target instanceof HTMLElement)) return false;
+  const tag = target.tagName;
+  if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return true;
+  if (target.isContentEditable) return true;
+  return false;
+}
+
+export function useKeyboardShortcut(combo: ShortcutCombo, handler: () => void) {
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key.toLowerCase() !== combo.key.toLowerCase()) return;
+      if (combo.mod && !(event.metaKey || event.ctrlKey)) return;
+      if (!combo.mod && (event.metaKey || event.ctrlKey)) return;
+      if (combo.shift && !event.shiftKey) return;
+      if (!combo.shift && event.shiftKey) return;
+      if (combo.alt && !event.altKey) return;
+      if (!combo.alt && event.altKey) return;
+      if (isEditableTarget(event.target)) return;
+
+      event.preventDefault();
+      handler();
+    };
+
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [combo.key, combo.mod, combo.shift, combo.alt, handler]);
+}

package/src/RedactoPrivacyCenter/components/AppShell/hooks/useSidebarState.ts

@@ -0,0 +1,62 @@
+import { useCallback, useEffect, useState } from 'react';
+
+export type SidebarState = 'expanded' | 'collapsed';
+
+const STORAGE_KEY = 'redacto-pc-sidebar-state';
+const EXPAND_MIN_WIDTH = '(min-width: 1024px)';
+
+function getDefaultState(): SidebarState {
+  if (typeof window === 'undefined') return 'collapsed';
+  try {
+    return window.matchMedia(EXPAND_MIN_WIDTH).matches ? 'expanded' : 'collapsed';
+  } catch {
+    return 'collapsed';
+  }
+}
+
+function readStored(): SidebarState | null {
+  if (typeof window === 'undefined') return null;
+  try {
+    const value = window.localStorage.getItem(STORAGE_KEY);
+    return value === 'expanded' || value === 'collapsed' ? value : null;
+  } catch {
+    return null;
+  }
+}
+
+function writeStored(value: SidebarState) {
+  if (typeof window === 'undefined') return;
+  try {
+    window.localStorage.setItem(STORAGE_KEY, value);
+  } catch {
+    // localStorage unavailable / quota exceeded — ignore
+  }
+}
+
+export function useSidebarState() {
+  const [state, setStateRaw] = useState<SidebarState | undefined>(undefined);
+
+  useEffect(() => {
+    setStateRaw(readStored() ?? getDefaultState());
+  }, []);
+
+  useEffect(() => {
+    if (state) writeStored(state);
+  }, [state]);
+
+  const setState = useCallback((next: SidebarState) => {
+    setStateRaw(next);
+  }, []);
+
+  const toggle = useCallback(() => {
+    setStateRaw((prev) => (prev === 'expanded' ? 'collapsed' : 'expanded'));
+  }, []);
+
+  return {
+    state: state ?? 'collapsed',
+    isHydrated: state !== undefined,
+    isExpanded: state === 'expanded',
+    setState,
+    toggle,
+  };
+}

package/src/RedactoPrivacyCenter/components/SideMenuBarPC/constants.tsx

@@ -1,42 +1,20 @@
-import {
-  IoAlertCircleOutline,
-  IoPulseOutline,
-  IoShieldCheckmarkOutline,
-} from 'react-icons/io5';
-import type { BadgeType, MenuItem } from './types';
+import { Activity, MessageCircleWarning, ShieldCheck } from 'lucide-react';
+import type { MenuItem } from './types';
 
 export const menuItemsPC: MenuItem[] = [
   {
     name: 'Consent Manager',
     href: 'consent-manager',
-    icon: <IoShieldCheckmarkOutline size={20} />,
+    icon: <ShieldCheck size={18} strokeWidth={1.75} />,
   },
   {
     name: 'Grievance',
     href: 'form',
-    icon: <IoAlertCircleOutline size={20} />,
+    icon: <MessageCircleWarning size={18} strokeWidth={1.75} />,
   },
   {
     name: 'Activity',
     href: 'activity',
-    icon: <IoPulseOutline size={20} />,
+    icon: <Activity size={18} strokeWidth={1.75} />,
   },
 ];
-
-export const badges: Record<BadgeType, { text: string; className: string }> = {
-  new: {
-    text: 'New',
-    className: 'bg-blue-100 text-blue-500',
-  },
-  coming: {
-    text: '',
-    className: 'visibility-hidden',
-  },
-};
-
-export const LOCAL_STORAGE_KEYS_TO_REMOVE = [
-  'email',
-  'access_token',
-  'i18nextLng',
-  'lang',
-] as const;

package/src/RedactoPrivacyCenter/components/SideMenuBarPC/types.ts

@@ -1,12 +1,5 @@
 import type { ReactElement } from 'react';
 
-export type BadgeType = 'new' | 'coming';
-
-export type MenuBadgeProps = {
-  type: BadgeType;
-  isDisabled?: boolean;
-};
-
 export type DropdownItem = {
   name: string;
   href: string;
@@ -26,15 +19,3 @@ export type MenuItem = {
   badge?: string;
   dropdownItems?: DropdownItem[];
 };
-
-export type SideMenuPCProps = {
-  menuItems: MenuItem[];
-  isCollapsed: boolean;
-  onItemSelect?: () => void;
-};
-
-export type SideBarPCProps = {
-  className?: string;
-  isCompact?: boolean;
-  onBack?: 'back' | 'signout';
-};

package/src/RedactoPrivacyCenter/styles/injectStyles.ts

@@ -77,7 +77,7 @@ export const injectPCStyles = () => {
         --pc-spacing-lg: 1.25rem;
         --pc-spacing-xl: 1.75rem;
         --pc-spacing-2xl: 2.5rem;
-        --pc-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+        --pc-font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif;
         --pc-font-size-xs: 0.75rem;
         --pc-font-size-sm: 0.8125rem;
         --pc-font-size-base: 0.9375rem;
@@ -111,6 +111,30 @@ export const injectPCStyles = () => {
     document.head.appendChild(variablesStyle);
   }
 
+  // Inject Inter font from Google Fonts so the SDK has a polished default
+  // even when the host app provides no custom typography. Hosts can opt out
+  // by overriding --pc-font-family.
+  const FONT_LINK_ID = 'redacto-privacy-center-fonts';
+  if (!document.getElementById(FONT_LINK_ID)) {
+    const preconnect1 = document.createElement('link');
+    preconnect1.rel = 'preconnect';
+    preconnect1.href = 'https://fonts.googleapis.com';
+    document.head.appendChild(preconnect1);
+
+    const preconnect2 = document.createElement('link');
+    preconnect2.rel = 'preconnect';
+    preconnect2.href = 'https://fonts.gstatic.com';
+    preconnect2.crossOrigin = 'anonymous';
+    document.head.appendChild(preconnect2);
+
+    const fontLink = document.createElement('link');
+    fontLink.id = FONT_LINK_ID;
+    fontLink.rel = 'stylesheet';
+    fontLink.href =
+      'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap';
+    document.head.appendChild(fontLink);
+  }
+
   style.textContent = `
     /* Privacy Center SDK Styles */
     
@@ -315,6 +339,17 @@ export const injectPCStyles = () => {
     .pc-select-dropdown {
       animation: pc-slideDown 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
     }
+
+    /* Popover Animation - matches modal/dropdown motion vocabulary */
+    .pc-popover {
+      animation: pc-fadeIn 120ms cubic-bezier(0.16, 1, 0.3, 1);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .pc-popover {
+        animation: none !important;
+      }
+    }
     
     /* Responsive dropdown - allow width to be set via inline styles */
     .pc-select-dropdown {
@@ -2299,7 +2334,7 @@ export const injectPCStyles = () => {
       border: 1px solid var(--pc-border-color);
       background: var(--pc-bg-primary);
       cursor: pointer;
-      border-radius: 0.5rem;
+      border-radius: 9999px;
       color: var(--pc-text-primary);
       transition: color 0.3s ease, background-color 0.15s ease, border-color 0.15s ease;
       padding: 0;
@@ -2458,12 +2493,14 @@ export const injectPCStyles = () => {
       position: relative;
     }
 
-    .pc-notification-popover-offset {
-      transform: translateX(-65px) !important;
+    @media (min-width: 640px) {
+      .pc-notification-popover-offset {
+        transform: translateX(-65px) !important;
+      }
     }
 
     .pc-notification-dropdown {
-      width: 380px;
+      width: min(380px, calc(100vw - 16px));
       max-height: 480px;
       display: flex;
       flex-direction: column;

package/src/RedactoPrivacyCenter/ui/PCPopover.tsx

@@ -1,6 +1,17 @@
-import { type ReactNode, type CSSProperties, useState, useRef, useEffect } from 'react';
+import {
+  type ReactNode,
+  type CSSProperties,
+  useState,
+  useRef,
+  useEffect,
+  useLayoutEffect,
+} from 'react';
 import { pcStyles } from '../styles/pcStyles';
 
+// useLayoutEffect warns under SSR; fall back to useEffect when window is absent.
+const useIsomorphicLayoutEffect =
+  typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+
 export interface PCPopoverProps {
   content: ReactNode;
   children: ReactNode;
@@ -88,7 +99,7 @@ export function PCPopover({
     setPosition({ top, left });
   };
 
-  useEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (isOpen) {
       updatePosition();
       window.addEventListener('scroll', updatePosition, true);