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

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

@@ -1,245 +0,0 @@
-import { useEffect, useState, type CSSProperties } from '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 { useProfileSwitch } from '../../context/ProfileSwitchContext';
-import { useAuth } from '../../context/AuthContext';
-import { decodeJwtToken, getVar } from '../../lib/utils';
-import { usePrivacyCenterExitAction } from './usePrivacyCenterExitAction';
-
-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 { accessToken } = useAuth();
-  const [email, setEmail] = useState('');
-
-  useEffect(() => {
-    setEmail(readEmail());
-  }, []);
-
-  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 || '?';
-
-  // 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: 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 = (
-    <button type="button" aria-label={t('accountMenu')} className="pc-navbar-avatar-btn">
-      {branding?.icon_url ? (
-        <PCAvatar
-          src={branding.icon_url}
-          name={triggerAvatarName}
-          size="md"
-          color="info"
-          framed={false}
-          style={avatarFillStyle}
-        />
-      ) : (
-        <PCAvatar
-          name={triggerAvatarName}
-          size="md"
-          color="info"
-          style={avatarFillStyle}
-        />
-      )}
-    </button>
-  );
-
-  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,
-            display: '-webkit-box',
-            WebkitBoxOrient: 'vertical',
-            WebkitLineClamp: 3,
-            overflow: 'hidden',
-            wordBreak: 'break-word',
-          }}
-        >
-          {displayName || '—'}
-        </div>
-      </div>
-
-      {/* Identity card */}
-      {(email || orgUserId) && (
-        <div
-          style={{
-            padding: '12px 16px',
-            display: 'flex',
-            alignItems: 'center',
-            gap: 10,
-            borderBottom:
-              onBack || canSwitch
-                ? `1px solid ${getVar('--pc-border-color')}`
-                : 'none',
-          }}
-        >
-          <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 rows */}
-      {(canSwitch || onBack) && (
-        <div style={{ padding: '6px 8px 8px' }}>
-          {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>
-  );
-
-  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

@@ -1,28 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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

@@ -1,62 +0,0 @@
-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/AppShell/usePrivacyCenterExitAction.ts

@@ -1,36 +0,0 @@
-import { useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-import { ArrowLeft, LogOut, type LucideIcon } from 'lucide-react';
-import { signOutPrivacyCenter } from '../../lib/utils';
-
-/**
- * Shared "exit the Privacy Center" action, driven by the consumer's
- * `onBack` prop ('back' | 'signout'). Centralised so the top-bar UserMenu item
- * and the session-expired screen's CTA stay in lockstep — same label, icon, and
- * behaviour. `enabled` is false when the consumer passed no `onBack`, so callers
- * render no affordance (and nothing ever fires automatically).
- */
-export function usePrivacyCenterExitAction(onBack?: 'back' | 'signout'): {
-  enabled: boolean;
-  handleAction: () => void;
-  label: string;
-  Icon: LucideIcon;
-} {
-  const { t } = useTranslation();
-
-  const handleAction = useCallback(() => {
-    if (onBack === 'back') {
-      window.history.back();
-    } else if (onBack === 'signout') {
-      signOutPrivacyCenter();
-      window.history.back();
-    }
-  }, [onBack]);
-
-  return {
-    enabled: !!onBack,
-    handleAction,
-    label: onBack === 'back' ? t('back') : t('signOut'),
-    Icon: onBack === 'back' ? ArrowLeft : LogOut,
-  };
-}

package/src/RedactoPrivacyCenter/components/CaseDetails/AttachmentCard.tsx

@@ -1,38 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import { IoDocumentText } from 'react-icons/io5';
-import type { AttachmentCardProps } from '../../lib/types';
-import { formatFileSize, getDownloadUrl } from './utils';
-
-export const AttachmentCard = ({ doc }: AttachmentCardProps) => {
-  const { t } = useTranslation();
-  const downloadUrl = getDownloadUrl(doc.file_url);
-  const fileName = doc.file_name || t('document');
-
-  const content = (
-    <>
-      <IoDocumentText size={20} className="pc-attachment-icon" />
-      <div className="pc-attachment-info">
-        <div className="pc-attachment-name">{fileName}</div>
-        <div className="pc-attachment-size">
-          {doc.file_size ? formatFileSize(doc.file_size) : ''}
-        </div>
-      </div>
-    </>
-  );
-
-  if (downloadUrl) {
-    return (
-      <a
-        href={downloadUrl}
-        target="_blank"
-        rel="noopener noreferrer"
-        aria-label={t('downloadAttachment', { fileName })}
-        className="pc-attachment-card"
-      >
-        {content}
-      </a>
-    );
-  }
-
-  return <div className="pc-attachment-card">{content}</div>;
-};

package/src/RedactoPrivacyCenter/components/CaseDetails/ChatBubble.tsx

@@ -1,31 +0,0 @@
-import type { ChatBubbleProps } from '../../lib/types';
-import { AttachmentCard } from './AttachmentCard';
-
-export const ChatBubble = ({
-  message,
-  isPrincipal,
-  senderLabel,
-  timestamp,
-}: ChatBubbleProps) => {
-  const direction = isPrincipal ? 'sent' : 'received';
-
-  return (
-    <div className={`pc-chat-bubble-wrap pc-chat-bubble-wrap--${direction}`}>
-      <span className="pc-chat-sender">
-        {senderLabel} · {timestamp}
-      </span>
-
-      {/* Text bubble */}
-      {message.body && (
-        <div className={`pc-chat-bubble pc-chat-bubble--${direction}`}>
-          {message.body}
-        </div>
-      )}
-
-      {/* Attachment cards */}
-      {message.documents.map((doc) => (
-        <AttachmentCard key={doc.uuid} doc={doc} />
-      ))}
-    </div>
-  );
-};

package/src/RedactoPrivacyCenter/components/CaseDetails/DocumentRequestCard.tsx

@@ -1,79 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import { IoAttach } from 'react-icons/io5';
-import { PCButton, PCLoader } from '../../ui';
-import type { DocumentRequestCardProps } from '../../lib/types';
-import { UPLOAD_ACTIVE_STATUSES, DOCUMENT_REQUEST_STATUS_LABEL, STATUS_COLORS } from '../../lib/constants';
-import { FinalizedTooltipWrapper } from './FinalizedTooltipWrapper';
-
-export const DocumentRequestCard = ({
-  message,
-  onUpload,
-  isSubmitting,
-  isCaseFinalized,
-}: DocumentRequestCardProps) => {
-  const { t } = useTranslation();
-  const meta = message.document_request_metadata;
-  if (!meta) {
-    return null;
-  }
-
-  const canUpload = UPLOAD_ACTIVE_STATUSES.includes(meta.document_request_status);
-  const statusInfo = DOCUMENT_REQUEST_STATUS_LABEL[meta.document_request_status];
-
-  return (
-    <div
-      className="pc-doc-request-card"
-      style={{
-        border: `1.5px dashed ${STATUS_COLORS.info.border}`,
-        backgroundColor: STATUS_COLORS.info.bg,
-      }}
-    >
-      <div className="pc-doc-request-header">
-        <IoAttach size={16} className="pc-doc-request-icon" style={{ color: STATUS_COLORS.info.color }} />
-        <div>
-          <div className="pc-doc-request-title" style={{ color: STATUS_COLORS.infoDark }}>
-            {t('documentRequestedLabel', { title: meta.title })}
-          </div>
-          {meta.accepted_document && (
-            <div className="pc-doc-request-accepted" style={{ color: STATUS_COLORS.info.color }}>
-              {t('acceptedLabel', { accepted: meta.accepted_document })}
-            </div>
-          )}
-        </div>
-
-        <span
-          className="pc-doc-request-status"
-          style={{ color: statusInfo.color, border: `1px solid ${statusInfo.color}` }}
-        >
-          {t(statusInfo.labelKey)}
-        </span>
-      </div>
-
-      {canUpload && (
-        <FinalizedTooltipWrapper enabled={isCaseFinalized} autoWidth>
-          <PCButton
-            variant="outline"
-            size="sm"
-            disabled={isSubmitting || isCaseFinalized}
-            onClick={isCaseFinalized ? undefined : () => onUpload(message.uuid)}
-            className="pc-doc-request-upload-btn"
-          >
-            {isSubmitting
-              ? <PCLoader variant="spinner" size="sm" />
-              : <IoAttach size={14} />}
-            {t('uploadAndSubmit')}
-          </PCButton>
-        </FinalizedTooltipWrapper>
-      )}
-
-      {meta.document_request_status === 'rejected' && meta.rejection_reason && (
-        <div
-          className="pc-doc-request-rejection"
-          style={{ color: STATUS_COLORS.error.color, backgroundColor: STATUS_COLORS.error.bg }}
-        >
-          {t('rejectionReasonLabel', { reason: meta.rejection_reason })}
-        </div>
-      )}
-    </div>
-  );
-};

package/src/RedactoPrivacyCenter/components/CaseDetails/FinalizedTooltipWrapper.tsx

@@ -1,25 +0,0 @@
-import type { CSSProperties } from 'react';
-import { PCTooltip } from '../../ui';
-import { useCaseFinalizedTooltip } from '../../lib/constants';
-import type { FinalizedTooltipWrapperProps } from '../../lib/types';
-
-const AUTO_WIDTH_TRIGGER_STYLE: CSSProperties = { width: 'auto' };
-
-export const FinalizedTooltipWrapper = ({
-  enabled,
-  autoWidth = false,
-  children,
-}: FinalizedTooltipWrapperProps) => {
-  const tooltip = useCaseFinalizedTooltip();
-  if (!enabled) {
-    return children;
-  }
-  return (
-    <PCTooltip
-      content={tooltip}
-      triggerStyle={autoWidth ? AUTO_WIDTH_TRIGGER_STYLE : undefined}
-    >
-      {children}
-    </PCTooltip>
-  );
-};

package/src/RedactoPrivacyCenter/components/CaseDetails/MessageComposer.tsx

@@ -1,96 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import { IoAttach, IoSend, IoDocumentText } from 'react-icons/io5';
-import { PCButton, PCLoader } from '../../ui';
-import type { MessageComposerProps } from '../../lib/types';
-import { formatFileSize } from './utils';
-import { FinalizedTooltipWrapper } from './FinalizedTooltipWrapper';
-
-export const MessageComposer = ({
-  messageText,
-  onMessageTextChange,
-  pendingUpload,
-  onRemovePendingUpload,
-  onAttachClick,
-  onSend,
-  isSending,
-  isUploading,
-  isCaseFinalized,
-}: MessageComposerProps) => {
-  const { t } = useTranslation();
-
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
-      e.preventDefault();
-      onSend();
-    }
-  };
-
-  return (
-    <div className="pc-composer">
-      {pendingUpload && (
-        <div className="pc-composer-pending-row">
-          <div className="pc-composer-pending-pill">
-            <IoDocumentText size={14} />
-            <span>{pendingUpload.file_name}</span>
-            <span className="pc-composer-pending-size">
-              {formatFileSize(pendingUpload.file_size)}
-            </span>
-            <button
-              type="button"
-              aria-label={t('removeAttachment')}
-              onClick={onRemovePendingUpload}
-              className="pc-composer-remove-btn"
-            >
-              ×
-            </button>
-          </div>
-        </div>
-      )}
-
-      <div className="pc-composer-textarea-wrap">
-        <FinalizedTooltipWrapper enabled={isCaseFinalized}>
-          <textarea
-            value={messageText}
-            onChange={(e) => onMessageTextChange(e.target.value)}
-            onKeyDown={handleKeyDown}
-            placeholder={t('writeMessagePlaceholder')}
-            rows={3}
-            className="pc-composer-textarea"
-            disabled={isCaseFinalized}
-          />
-        </FinalizedTooltipWrapper>
-      </div>
-      <div className="pc-composer-actions">
-        <FinalizedTooltipWrapper enabled={isCaseFinalized} autoWidth>
-          <PCButton
-            variant="outline"
-            size="sm"
-            disabled={isUploading || isSending || isCaseFinalized}
-            onClick={onAttachClick}
-            className="pc-composer-btn"
-          >
-            {isUploading
-              ? <PCLoader variant="spinner" size="sm" />
-              : <IoAttach size={16} />}
-            {t('attachFile')}
-          </PCButton>
-        </FinalizedTooltipWrapper>
-        <FinalizedTooltipWrapper enabled={isCaseFinalized} autoWidth>
-          <PCButton
-            size="sm"
-            disabled={(!messageText.trim() && !pendingUpload) || isSending || isUploading || isCaseFinalized}
-            onClick={onSend}
-            className="pc-composer-btn"
-          >
-            {isSending ? <PCLoader variant="spinner" size="sm" /> : null}
-            {t('send')}
-            <IoSend size={14} />
-          </PCButton>
-        </FinalizedTooltipWrapper>
-      </div>
-      <div className="pc-composer-footer">
-        {t('messagesSecureFooter')}
-      </div>
-    </div>
-  );
-};