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

package/src/RedactoPrivacyCenter/components/ModifyConsentModal.tsx

@@ -1,334 +0,0 @@
-import { useState, useMemo, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import { PCButton, PCText, PCModal, PCAccordion, PCBadge, PCCheckbox } from '../ui';
-import { pcStyles } from '../styles/pcStyles';
-import { ChevronDownIcon } from 'lucide-react';
-import { PiWarningCircleBold } from 'react-icons/pi';
-import type { ModifyConsentModalProps } from './types';
-import { ConsentStatusEnum } from '../lib/types';
-import type { ConsentAction } from '../lib/types';
-
-export const ModifyConsentModal = ({
-  isOpen,
-  onClose,
-  selectedRecord,
-  isLoading,
-  onManageConsent,
-}: ModifyConsentModalProps) => {
-  const { t } = useTranslation();
-  const [isAccordionOpen, setIsAccordionOpen] = useState(false);
-  const [selectedDataElementUuids, setSelectedDataElementUuids] = useState<string[]>([]);
-
-  const nominatorInfo = selectedRecord?.nominator;
-  const nominatorLabel = nominatorInfo?.name || nominatorInfo?.email || nominatorInfo?.org_user_id || null;
-
-  const actionConfig = useMemo(() => {
-    if (!selectedRecord) return null;
-
-    const status = selectedRecord.status;
-
-    if (status === ConsentStatusEnum.ACTIVE) {
-      return {
-        action: 'revoke' as ConsentAction,
-        buttonLabel: t('revokeConsent'),
-        buttonVariant: 'danger' as const,
-        warningMessage: t('revokeConsentWarning'),
-        description: nominatorLabel
-          ? t('aboutToModifyConsentOnBehalf', { nominator: nominatorLabel })
-          : t('aboutToModifyConsent'),
-      };
-    }
-
-    if (
-      status === ConsentStatusEnum.WITHDRAWN ||
-      status === ConsentStatusEnum.REVOKED
-    ) {
-      return {
-        action: 'regrant' as ConsentAction,
-        buttonLabel: t('regrantConsent'),
-        buttonVariant: 'primary' as const,
-        warningMessage: t('regrantConsentWarning'),
-        description: nominatorLabel
-          ? t('aboutToRegrantConsentOnBehalf', { nominator: nominatorLabel })
-          : t('aboutToRegrantConsent'),
-      };
-    }
-
-    if (status === ConsentStatusEnum.EXPIRED) {
-      return {
-        action: 'renew' as ConsentAction,
-        buttonLabel: t('renewConsent'),
-        buttonVariant: 'primary' as const,
-        warningMessage: t('renewConsentWarning'),
-        description: nominatorLabel
-          ? t('aboutToRenewConsentOnBehalf', { nominator: nominatorLabel })
-          : t('aboutToRenewConsent'),
-      };
-    }
-
-    // DECLINED or unknown statuses — no action available
-    return null;
-  }, [selectedRecord, t, nominatorLabel]);
-
-  const isRegrantAction = actionConfig?.action === 'regrant';
-
-  useEffect(() => {
-    setIsAccordionOpen(isRegrantAction);
-  }, [selectedRecord, isRegrantAction]);
-
-  const regrantEligibleDataElements = useMemo(
-    () =>
-      (selectedRecord?.data_elements || []).filter(
-        (element) => Boolean(element?.uuid) && element.enabled
-      ),
-    [selectedRecord]
-  );
-
-  const requiredDataElementUuids = useMemo(
-    () =>
-      regrantEligibleDataElements
-        .filter((element) => element.required)
-        .map((element) => element.uuid),
-    [regrantEligibleDataElements]
-  );
-
-  const requiredDataElementUuidSet = useMemo(
-    () => new Set(requiredDataElementUuids),
-    [requiredDataElementUuids]
-  );
-
-  useEffect(() => {
-    if (isRegrantAction) {
-      setSelectedDataElementUuids(regrantEligibleDataElements.map((element) => element.uuid));
-      return;
-    }
-    setSelectedDataElementUuids([]);
-  }, [isRegrantAction, regrantEligibleDataElements]);
-
-  const toggleDataElementSelection = (uuid: string, checked: boolean) => {
-    if (requiredDataElementUuidSet.has(uuid)) {
-      return;
-    }
-    setSelectedDataElementUuids((prev) => {
-      if (checked) {
-        return prev.includes(uuid) ? prev : [...prev, uuid];
-      }
-      return prev.filter((item) => item !== uuid);
-    });
-  };
-
-  return (
-    <PCModal
-      isOpen={isOpen}
-      onClose={onClose}
-      closeAriaLabel={t('closeModal')}
-      title={
-        <PCText size="base" weight="semibold">
-          {t('modifyConsent')}
-        </PCText>
-      }
-    >
-      <div style={{ padding: pcStyles.pMd.padding }}>
-        {selectedRecord && !actionConfig && (
-          <PCText size="sm" weight="medium" color="tertiary" style={{ textAlign: 'center', padding: pcStyles.pMd.padding }}>
-            {t('noActionsAvailable', 'No actions available for this record.')}
-          </PCText>
-        )}
-        {selectedRecord && actionConfig && (
-          <>
-            <PCText size="sm" weight="medium" color="secondary" style={{ marginBottom: pcStyles.mbMd.marginBottom }}>
-              {actionConfig.description}
-            </PCText>
-            <div style={{
-              marginTop: pcStyles.mtMd.marginTop,
-              borderRadius: pcStyles.borderRadiusMd,
-              ...pcStyles.bgSecondary,
-              border: `1px solid ${pcStyles.borderColor}`,
-              padding: pcStyles.pMd.padding,
-              ...pcStyles.overflowHidden,
-            }}>
-              <PCAccordion style={{ border: 'none', borderRadius: 0 }}>
-                <PCAccordion.Header
-                  open={isAccordionOpen}
-                  onToggle={() => setIsAccordionOpen(!isAccordionOpen)}
-                >
-                  {({ open }) => (
-                    <>
-                      <div style={{ flex: 1 }}>
-                        <p style={{
-                          marginBottom: pcStyles.mbXs.marginBottom,
-                          fontSize: pcStyles.textBase.fontSize,
-                          fontWeight: pcStyles.fontWeightSemibold.fontWeight,
-                          color: pcStyles.textPrimary.color,
-                        }}>
-                          {selectedRecord.name}
-                        </p>
-                        <p style={{
-                          textAlign: 'left',
-                          fontSize: pcStyles.textSm.fontSize,
-                          fontWeight: pcStyles.fontWeightMedium.fontWeight,
-                          color: pcStyles.textSecondary.color,
-                          margin: 0,
-                        }}>
-                          {selectedRecord.description}
-                        </p>
-                      </div>
-                      <ChevronDownIcon
-                        size={20}
-                        style={{
-                          transform: open ? 'rotate(0deg)' : 'rotate(-90deg)',
-                          transition: 'transform 0.3s',
-                          color: pcStyles.textSecondary.color,
-                          flexShrink: 0,
-                          marginLeft: pcStyles.mlSm.marginLeft,
-                        }}
-                      />
-                    </>
-                  )}
-                </PCAccordion.Header>
-
-                <PCAccordion.Body open={isAccordionOpen}>
-                  <div style={{
-                    marginTop: pcStyles.mtSm.marginTop,
-                    paddingTop: pcStyles.ptSm.paddingTop,
-                    ...(!isRegrantAction && { borderTop: `1px solid ${pcStyles.borderColor}` }),
-                  }}>
-                    {isRegrantAction && regrantEligibleDataElements.length > 0 ? (
-                      <div>
-                        <PCText
-                          size="sm"
-                          color="secondary"
-                          style={{ marginTop: 0, marginBottom: pcStyles.mbSm.marginBottom }}
-                        >
-                          {t(
-                            'selectDataElementsForRegrant',
-                            'Select the data elements you want to regrant consent for.'
-                          )}
-                        </PCText>
-                        <div style={{ display: 'grid', gap: pcStyles.gapSm.gap }}>
-                          {regrantEligibleDataElements.map((element) => {
-                            const isRequired = requiredDataElementUuidSet.has(element.uuid);
-                            const isChecked = isRequired || selectedDataElementUuids.includes(element.uuid);
-
-                            return (
-                              <PCCheckbox
-                                key={element.uuid}
-                                size="md"
-                                checked={isChecked}
-                                disabled={isRequired}
-                                onChange={(event) =>
-                                  toggleDataElementSelection(element.uuid, event.target.checked)
-                                }
-                                label={
-                                  isRequired
-                                    ? `${element.name} (${t('mandatory', 'Mandatory')})`
-                                    : element.name
-                                }
-                                labelClassName="text-sm"
-                                style={{ accentColor: pcStyles.primary }}
-                              />
-                            );
-                          })}
-                        </div>
-                      </div>
-                    ) : Array.isArray(selectedRecord.data_elements) &&
-                      selectedRecord.data_elements.filter((el) => el.selected).length > 0 ? (
-                      selectedRecord.data_elements
-                        .filter((el) => el.selected)
-                        .map((i, index, filteredArray) => (
-                          <div
-                            key={index}
-                            style={{
-                              ...pcStyles.flex,
-                              ...pcStyles.itemsCenter,
-                              paddingBottom: index < filteredArray.length - 1 ? pcStyles.pbXs.paddingBottom : 0,
-                              marginBottom: index < filteredArray.length - 1 ? pcStyles.mbXs.marginBottom : 0,
-                            }}
-                          >
-                            <PCBadge renderAsDot size="sm">{''}</PCBadge>
-                            <span style={{
-                              marginLeft: pcStyles.mlSm.marginLeft,
-                              fontSize: pcStyles.textSm.fontSize,
-                              color: pcStyles.textPrimary.color,
-                              fontWeight: pcStyles.fontWeightMedium.fontWeight,
-                            }}>
-                              {i.name}
-                            </span>
-                          </div>
-                        ))
-                    ) : (
-                      <PCText size="sm" color="tertiary">
-                        {t('noDataElementsAvailable')}
-                      </PCText>
-                    )}
-                  </div>
-                </PCAccordion.Body>
-              </PCAccordion>
-            </div>
-            <div style={{
-              marginTop: pcStyles.mtLg.marginTop,
-              ...pcStyles.flex,
-              ...pcStyles.itemsStart,
-              ...pcStyles.gapSm,
-              borderRadius: pcStyles.borderRadiusMd,
-              border: `1px solid ${pcStyles.warningBorder}`,
-              backgroundColor: pcStyles.warningBg,
-              padding: pcStyles.pMd.padding,
-              lineHeight: 1.5,
-            }}>
-              <PiWarningCircleBold
-                size={20}
-                style={{
-                  flexShrink: 0,
-                  color: pcStyles.warningText,
-                  marginTop: '2px',
-                }}
-              />
-              <span style={{
-                fontWeight: pcStyles.fontWeightMedium.fontWeight,
-                fontSize: pcStyles.textSm.fontSize,
-                color: pcStyles.warningText,
-              }}>
-                {actionConfig.warningMessage}
-              </span>
-            </div>
-
-            <div style={{
-              marginTop: pcStyles.mtLg.marginTop,
-              ...pcStyles.flex,
-              ...pcStyles.flexRow,
-              ...pcStyles.gapSm,
-              ...pcStyles.justifyEnd,
-            }}>
-              <PCButton variant="secondary" onClick={onClose}>
-                {t('cancel')}
-              </PCButton>
-              <PCButton
-                isLoading={isLoading}
-                disabled={
-                  !selectedRecord.purpose_uuid ||
-                  (isRegrantAction && selectedDataElementUuids.length === 0)
-                }
-                variant={actionConfig.buttonVariant}
-                onClick={() => {
-                  if (selectedRecord.purpose_uuid) {
-                    const nomContact = selectedRecord.nominator?.email || selectedRecord.nominator?.org_user_id || undefined;
-                    onManageConsent(
-                      selectedRecord.purpose_uuid,
-                      actionConfig.action,
-                      nomContact,
-                      isRegrantAction ? selectedDataElementUuids : undefined,
-                      selectedRecord.product_uuid
-                    );
-                  }
-                }}
-              >
-                {actionConfig.buttonLabel}
-              </PCButton>
-            </div>
-          </>
-        )}
-      </div>
-    </PCModal>
-  );
-};

package/src/RedactoPrivacyCenter/components/NotificationHub/NotificationBell.tsx

@@ -1,173 +0,0 @@
-import { useState, useCallback, useEffect, useRef } from 'react';
-import { useTranslation } from 'react-i18next';
-import { IoNotificationsOutline } from 'react-icons/io5';
-import { PCPopover } from '../../ui';
-import { PCTooltip } from '../../ui/PCTooltip';
-import { fetchUnreadCount, fetchNotifications } from '../../lib/api';
-import { POLL_INTERVAL, NOTIFICATION_DROPDOWN_LIMIT } from '../../lib/constants';
-import { isRefreshBlocked } from '../../lib/utils';
-import { useCurrentLanguage } from '../../lib/useCurrentLanguage';
-import type { Notification, NotificationCTA } from '../../lib/types';
-import { NotificationDropdown } from './NotificationDropdown';
-import { useNotificationActions } from './useNotificationActions';
-
-export const NotificationBell = () => {
-  const { t } = useTranslation();
-  const { langParam } = useCurrentLanguage();
-  const [notifications, setNotifications] = useState<Notification[]>([]);
-  const [unreadCount, setUnreadCount] = useState(0);
-  const [isRefreshing, setIsRefreshing] = useState(false);
-  const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
-  const tenantRequestRef = useRef(0);
-
-  const {
-    organizationId, workspaceId, authContext, consentClient, navigateTo,
-    handleMarkRead, handleMarkAllRead, handleCTAClick,
-  } = useNotificationActions();
-
-  const pollUnreadCount = useCallback(async () => {
-    if (!organizationId || !workspaceId) {
-      return;
-    }
-    // Skip doomed work while auth is terminally failed / backing off (incident 2026-06-22).
-    if (isRefreshBlocked(authContext)) {
-      return;
-    }
-    const requestId = tenantRequestRef.current;
-    const result = await fetchUnreadCount(organizationId, workspaceId, authContext, consentClient);
-    if (requestId !== tenantRequestRef.current) {
-      return;
-    }
-    if (result) {
-      setUnreadCount(result.count);
-    }
-  }, [organizationId, workspaceId, authContext, consentClient]);
-
-  const loadDropdownNotifications = useCallback(async () => {
-    if (!organizationId || !workspaceId) {
-      return;
-    }
-    const requestId = tenantRequestRef.current;
-    const result = await fetchNotifications(organizationId, workspaceId, { limit: NOTIFICATION_DROPDOWN_LIMIT, include_summary: true }, authContext, consentClient, langParam);
-    if (requestId !== tenantRequestRef.current) {
-      return;
-    }
-    if (result) {
-      setNotifications(result.data);
-      if (result.summary) {
-        setUnreadCount(result.summary.unread);
-      }
-    }
-  }, [organizationId, workspaceId, authContext, consentClient, langParam]);
-
-  useEffect(() => {
-    tenantRequestRef.current += 1;
-    setNotifications([]);
-    setUnreadCount(0);
-    return () => {
-      tenantRequestRef.current += 1;
-    };
-  }, [organizationId, workspaceId]);
-
-  // Keep the interval pointed at the latest poll fn without resetting it (and
-  // re-firing an immediate poll) each time authContext identity churns — that
-  // churn was an amplifier in the 2026-06-22 refresh storm.
-  const pollUnreadCountRef = useRef(pollUnreadCount);
-  useEffect(() => {
-    pollUnreadCountRef.current = pollUnreadCount;
-  }, [pollUnreadCount]);
-
-  useEffect(() => {
-    if (!organizationId || !workspaceId) {
-      if (pollRef.current) {
-        clearInterval(pollRef.current);
-        pollRef.current = null;
-      }
-      return;
-    }
-    pollUnreadCountRef.current();
-    pollRef.current = setInterval(() => pollUnreadCountRef.current(), POLL_INTERVAL);
-    return () => {
-      if (pollRef.current) {
-        clearInterval(pollRef.current);
-      }
-    };
-  }, [organizationId, workspaceId]);
-
-  const onRefresh = useCallback(async () => {
-    setIsRefreshing(true);
-    try {
-      await loadDropdownNotifications();
-    } finally {
-      setIsRefreshing(false);
-    }
-  }, [loadDropdownNotifications]);
-
-  const onMarkAllRead = useCallback(async () => {
-    const ok = await handleMarkAllRead();
-    if (!ok) {
-      return;
-    }
-    setNotifications((prev) => prev.map((n) => ({ ...n, is_read: true })));
-    setUnreadCount(0);
-  }, [handleMarkAllRead]);
-
-  const onNotificationClick = useCallback(async (notification: Notification) => {
-    if (!notification.is_read) {
-      const ok = await handleMarkRead(notification.uuid);
-      if (!ok) {
-        return;
-      }
-      setNotifications((prev) => prev.map((n) => n.uuid === notification.uuid ? { ...n, is_read: true } : n));
-      setUnreadCount((prev) => Math.max(0, prev - 1));
-    }
-  }, [handleMarkRead]);
-
-  const onCTAClick = useCallback(async (notification: Notification, cta: NotificationCTA) => {
-    const result = await handleCTAClick(notification, cta);
-    if (result === 'acknowledged') {
-      setNotifications((prev) => prev.map((n) =>
-        n.uuid === notification.uuid ? { ...n, is_read: true, is_acknowledged: true } : n
-      ));
-      setUnreadCount((prev) => Math.max(0, prev - (notification.is_read ? 0 : 1)));
-    } else if (result === 'opened' || result === 'navigated' || result === 'not_found') {
-      if (!notification.is_read) {
-        setNotifications((prev) => prev.map((n) =>
-          n.uuid === notification.uuid ? { ...n, is_read: true } : n
-        ));
-        setUnreadCount((prev) => Math.max(0, prev - 1));
-      }
-    }
-  }, [handleCTAClick]);
-
-  return (
-    <PCPopover
-      placement="bottom-end"
-      shadow="lg"
-      className="pc-notification-popover-offset"
-      onOpen={loadDropdownNotifications}
-      content={
-        <NotificationDropdown
-          notifications={notifications}
-          onMarkAllRead={onMarkAllRead}
-          onRefresh={onRefresh}
-          isRefreshing={isRefreshing}
-          onViewAll={() => navigateTo('notifications')}
-          onNotificationClick={onNotificationClick}
-          onCTAClick={onCTAClick}
-        />
-      }
-    >
-      <PCTooltip content={t('notifications')} placement="bottom" color="invert">
-        <div className="pc-notification-bell-wrapper">
-          <button type="button" aria-label={t('notifications')} className="pc-notification-bell-btn">
-            <IoNotificationsOutline size={18} />
-          </button>
-          {unreadCount > 0 && (
-            <span className="pc-notification-badge">{unreadCount}</span>
-          )}
-        </div>
-      </PCTooltip>
-    </PCPopover>
-  );
-}

package/src/RedactoPrivacyCenter/components/NotificationHub/NotificationCTAButton.tsx

@@ -1,18 +0,0 @@
-import type { NotificationCTAButtonProps } from '../../lib/types';
-import { CTA_VARIANT_CLASS } from '../../lib/constants';
-import { cn } from '../../utils/cn';
-
-export const NotificationCTAButton = ({ cta, onClick, size = 'lg' }: NotificationCTAButtonProps) => {
-  const sizeClass = size === 'sm' ? 'pc-notification-cta-sm' : 'pc-notification-cta-lg';
-  const variantClass = CTA_VARIANT_CLASS[cta.style] ?? CTA_VARIANT_CLASS.secondary;
-
-  return (
-    <button
-      type='button'
-      onClick={onClick}
-      className={cn('pc-notification-cta', sizeClass, variantClass)}
-    >
-      {cta.label}
-    </button>
-  );
-}

package/src/RedactoPrivacyCenter/components/NotificationHub/NotificationDropdown.tsx

@@ -1,54 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import type { NotificationDropdownProps } from '../../lib/types';
-import { NOTIFICATION_DROPDOWN_LIMIT } from '../../lib/constants';
-import { NotificationDropdownItem } from './NotificationDropdownItem';
-import { NotificationRefreshButton } from './NotificationRefreshButton';
-
-export const NotificationDropdown = ({
-  notifications, onMarkAllRead, onRefresh, isRefreshing, onViewAll, onNotificationClick, onCTAClick,
-}: NotificationDropdownProps) => {
-  const { t } = useTranslation();
-  const recentNotifications = notifications.slice(0, NOTIFICATION_DROPDOWN_LIMIT);
-
-  return (
-    <div className="pc-notification-dropdown">
-      {/* Header */}
-      <div className="pc-notification-panel-header">
-        <span className="pc-notification-dropdown-title">{t('notifications')}</span>
-        <div className="pc-notification-header-actions">
-          <NotificationRefreshButton isRefreshing={isRefreshing} onRefresh={onRefresh} iconSize={16} />
-          <button type="button" onClick={onMarkAllRead} className="pc-notification-link-btn">
-            {t('markAllAsRead')}
-          </button>
-        </div>
-      </div>
-
-      {/* Notification List */}
-      <div className="pc-notification-dropdown-list">
-        {recentNotifications.length === 0 ? (
-          <div className="pc-notification-dropdown-empty-state">{t('noNotificationsYet')}</div>
-        ) : (
-          recentNotifications.map((notification) => (
-            <NotificationDropdownItem
-              key={notification.uuid}
-              notification={notification}
-              onNotificationClick={onNotificationClick}
-              onCTAClick={onCTAClick}
-            />
-          ))
-        )}
-      </div>
-
-      {/* Footer */}
-      <div className="pc-notification-dropdown-footer">
-        <button
-          type="button"
-          onClick={onViewAll}
-          className="pc-notification-link-btn pc-notification-link-btn-arrow"
-        >
-          {t('viewAllNotifications')} →
-        </button>
-      </div>
-    </div>
-  );
-}

package/src/RedactoPrivacyCenter/components/NotificationHub/NotificationDropdownItem.tsx

@@ -1,57 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import type { NotificationDropdownItemProps } from '../../lib/types';
-import { NotificationIcon } from './NotificationIcon';
-import { NotificationCTAButton } from './NotificationCTAButton';
-import { formatTimeAgo } from './utils';
-
-export const NotificationDropdownItem = ({
-  notification, onNotificationClick, onCTAClick,
-}: NotificationDropdownItemProps) => {
-  const { t } = useTranslation();
-  const statusLabel = notification.status_label_display || notification.status_label;
-
-  return (
-    <div
-      className="pc-notification-dropdown-row"
-      data-read={notification.is_read ? 'true' : 'false'}
-      role="button"
-      tabIndex={0}
-      onClick={() => onNotificationClick(notification)}
-      onKeyDown={(e) => {
-        if (e.currentTarget !== e.target) {
-          return;
-        }
-        if (e.key === 'Enter' || e.key === ' ') {
-          e.preventDefault();
-          onNotificationClick(notification);
-        }
-      }}
-    >
-      <NotificationIcon notificationType={notification.notification_type} size="sm" />
-
-      <div className="pc-notification-dropdown-content">
-        <p className="pc-notification-dropdown-title-text">{notification.title}</p>
-        {statusLabel && (
-          <span className="pc-notification-status-badge">{statusLabel}</span>
-        )}
-        <p className="pc-notification-dropdown-description">{notification.description}</p>
-        <p className="pc-notification-dropdown-time">{formatTimeAgo(notification.created_at, t)}</p>
-
-        {notification.ctas && notification.ctas.length > 0 && (
-          <div className="pc-notification-dropdown-ctas">
-            {notification.ctas.map((cta) => (
-              <NotificationCTAButton
-                key={cta.label}
-                cta={cta}
-                size="sm"
-                onClick={(e) => { e.stopPropagation(); onCTAClick(notification, cta); }}
-              />
-            ))}
-          </div>
-        )}
-      </div>
-
-      {!notification.is_read && <div className="pc-notification-unread-dot-sm" />}
-    </div>
-  );
-}

package/src/RedactoPrivacyCenter/components/NotificationHub/NotificationIcon.tsx

@@ -1,19 +0,0 @@
-import type { CSSProperties } from 'react';
-import type { NotificationIconProps } from '../../lib/types';
-import { TYPE_TO_ICON_CATEGORY, ICON_MAP, ICON_COLORS } from '../../lib/constants';
-import { cn } from '../../utils/cn';
-
-export const NotificationIcon = ({ notificationType, size = 'lg' }: NotificationIconProps) => {
-  const category = TYPE_TO_ICON_CATEGORY[notificationType] ?? 'system';
-  const Icon = ICON_MAP[category];
-  const color = ICON_COLORS[category];
-  const sizeClass = size === 'sm' ? 'pc-notification-icon-sm' : 'pc-notification-icon-lg';
-  const iconPx = size === 'sm' ? 18 : 20;
-  const iconBgStyle = { '--pc-notification-icon-bg': `${color}14` } as CSSProperties;
-
-  return (
-    <div className={cn('pc-notification-icon', sizeClass)} style={iconBgStyle}>
-      <Icon size={iconPx} color={color} />
-    </div>
-  );
-}