@redacto.io/consent-sdk-react 9.3.0 → 9.4.0

package/src/RedactoPrivacyCenter/components/ActivityTimeline.tsx

@@ -0,0 +1,239 @@
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import dayjs from 'dayjs';
+import {
+  ShieldCheck,
+  FileText,
+  Eye,
+  MessageSquareWarning,
+  Activity as ActivityIcon,
+} from 'lucide-react';
+import { PCText, PCTooltip, PCBadge } from '../ui';
+import { getVar, formatActivityType } from '../lib/utils';
+import { ACTIVITY_DATE_FORMATS } from '../lib/constants';
+import {
+  MARKER_TINT,
+  TIMELINE_COL_GAP,
+  TIMELINE_MARKER_COL,
+  TIMELINE_MARKER_SIZE,
+  TIMELINE_RAIL_LEFT,
+  TIMELINE_TIME_COL,
+} from './constant';
+import { formatTimeAgo } from './NotificationHub/utils';
+import type {
+  ActivityCategory,
+  ActivityDateGroup,
+  ActivityTimelineProps,
+  TimelineRowProps,
+} from './types';
+
+// Colour by category (matches the reference): Consent = green, Case = blue, etc.
+// Same colour regardless of grant/withdraw — deliberately not getActivityTypeStatus.
+const getActivityCategory = (activityType: string): ActivityCategory => {
+  const type = activityType.toLowerCase();
+  if (type.includes('consent') || type.includes('grant')) return { variant: 'success', Icon: ShieldCheck };
+  if (type.includes('case')) return { variant: 'info', Icon: FileText };
+  if (type.includes('access') || type.includes('view')) return { variant: 'info', Icon: Eye };
+  if (type.includes('grievance') || type.includes('request')) return { variant: 'warning', Icon: MessageSquareWarning };
+  return { variant: 'secondary', Icon: ActivityIcon };
+};
+
+export default function ActivityTimeline({
+  activities,
+}: ActivityTimelineProps) {
+  const { t } = useTranslation();
+
+  // Group by calendar day, preserving the API's newest-first ordering.
+  const groups = useMemo<ActivityDateGroup[]>(() => {
+    const ordered: ActivityDateGroup[] = [];
+    const byKey = new Map<string, ActivityDateGroup>();
+
+    for (const activity of activities) {
+      const date = dayjs(activity.timestamp);
+      const key = date.format('YYYY-MM-DD');
+      let group = byKey.get(key);
+      if (!group) {
+        group = {
+          key,
+          label: date.format(ACTIVITY_DATE_FORMATS.DATE),
+          newest: activity.timestamp,
+          items: [],
+        };
+        byKey.set(key, group);
+        ordered.push(group);
+      }
+      group.items.push(activity);
+    }
+
+    return ordered;
+  }, [activities]);
+
+  return (
+    <div style={{ width: '100%' }}>
+      {groups.map((group, groupIndex) => (
+        <div
+          key={group.key}
+          style={{ marginTop: groupIndex === 0 ? 0 : getVar('--pc-spacing-lg') }}
+        >
+          {/* Date header: explicit date + relative hint */}
+          <div style={{
+            display: 'flex',
+            alignItems: 'baseline',
+            gap: getVar('--pc-spacing-sm'),
+            marginBottom: getVar('--pc-spacing-md'),
+            paddingLeft: '0.125rem',
+          }}>
+            <PCText
+              as="span"
+              size="xs"
+              weight="bold"
+              color="primary"
+              style={{ textTransform: 'uppercase', letterSpacing: '0.04em' }}
+            >
+              {group.label}
+            </PCText>
+            <PCText as="span" size="xs" color="tertiary">
+              {formatTimeAgo(group.newest, t)}
+            </PCText>
+          </div>
+
+          {/* Rows + continuous rail */}
+          <div style={{ position: 'relative' }}>
+            <span
+              aria-hidden
+              style={{
+                position: 'absolute',
+                top: TIMELINE_MARKER_SIZE / 2,
+                bottom: TIMELINE_MARKER_SIZE / 2,
+                left: TIMELINE_RAIL_LEFT,
+                width: 2,
+                marginLeft: -1,
+                background: `linear-gradient(180deg, transparent 0, ${getVar('--pc-border-color')} 12px, ${getVar('--pc-border-color')} calc(100% - 12px), transparent 100%)`,
+              }}
+            />
+            {group.items.map((activity, index) => (
+              <TimelineRow
+                key={`${group.key}-${index}`}
+                activity={activity}
+              />
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function TimelineRow({
+  activity,
+}: TimelineRowProps) {
+  const { t } = useTranslation();
+
+  const { variant, Icon } = getActivityCategory(activity.activity_type);
+  const tint = MARKER_TINT[variant];
+
+  const title = activity.title_display || activity.title;
+  const description = activity.description_display || activity.description;
+  const typeLabel = activity.activity_type_display || formatActivityType(activity.activity_type);
+
+  const date = dayjs(activity.timestamp);
+  const clock = date.format(ACTIVITY_DATE_FORMATS.TIME);
+  const relative = formatTimeAgo(activity.timestamp, t);
+  const absolute = date.format(ACTIVITY_DATE_FORMATS.TOOLTIP);
+
+  return (
+    <div
+      className="pc-timeline-item pc-timeline-row"
+      style={{
+        position: 'relative',
+        display: 'grid',
+        gridTemplateColumns: `${TIMELINE_TIME_COL} ${TIMELINE_MARKER_COL} 1fr`,
+        columnGap: `${TIMELINE_COL_GAP}px`,
+      }}
+    >
+      {/* Time column */}
+      <PCTooltip content={absolute} placement="top">
+        <div style={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'flex-end',
+          textAlign: 'right',
+          paddingTop: '0.5rem',
+          cursor: 'help',
+        }}>
+          <PCText as="span" size="sm" weight="medium" color="secondary" style={{ whiteSpace: 'nowrap', lineHeight: 1.3 }}>
+            {clock}
+          </PCText>
+          <PCText as="span" size="xs" color="tertiary" style={{ whiteSpace: 'nowrap', lineHeight: 1.3 }}>
+            {relative}
+          </PCText>
+        </div>
+      </PCTooltip>
+
+      {/* Marker on the rail */}
+      <div style={{ display: 'flex', justifyContent: 'center', paddingTop: '0.5rem' }}>
+        <div
+          style={{
+            position: 'relative',
+            zIndex: 1,
+            width: TIMELINE_MARKER_SIZE,
+            height: TIMELINE_MARKER_SIZE,
+            borderRadius: '9999px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            // Opaque base + tint overlay so the rail never shows through the disc.
+            backgroundColor: getVar('--pc-bg-primary'),
+            backgroundImage: `linear-gradient(${tint.bg}, ${tint.bg})`,
+            color: tint.color,
+            boxShadow: `0 0 0 3px ${getVar('--pc-bg-primary')}`,
+          }}
+        >
+          <Icon size={16} strokeWidth={2.25} aria-hidden />
+        </div>
+      </div>
+
+      {/* Content */}
+      <div
+        className="pc-timeline-content"
+        style={{
+          minWidth: 0,
+          marginBottom: getVar('--pc-spacing-sm'),
+          padding: '0.5rem 0.625rem',
+          borderRadius: getVar('--pc-border-radius-md'),
+        }}
+      >
+        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+          <PCText
+            size="sm"
+            weight="semibold"
+            color="primary"
+            style={{ minWidth: 0, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}
+          >
+            {title}
+          </PCText>
+          <PCBadge variant={variant} size="sm" style={{ flexShrink: 0 }}>
+            {typeLabel}
+          </PCBadge>
+        </div>
+        {description ? (
+          <PCText
+            size="sm"
+            color="secondary"
+            title={description}
+            style={{
+              marginTop: '0.125rem',
+              lineHeight: 1.5,
+              display: '-webkit-box',
+              WebkitLineClamp: 2,
+              WebkitBoxOrient: 'vertical',
+              overflow: 'hidden',
+            }}
+          >
+            {description}
+          </PCText>
+        ) : null}
+      </div>
+    </div>
+  );
+}

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

@@ -22,6 +22,7 @@ import { PageHeader } from './PageHeader';
 import { PCLoader } from '../../ui';
 import { useDataAvailability } from '../../context/DataAvailabilityContext';
 import { PrivacyCenterEmptyState } from '../PrivacyCenterEmptyState';
+import { PrivacyCenterSessionExpired } from '../PrivacyCenterSessionExpired';
 import type { PrivacyCenterLayoutProps } from '../types';
 
 export default function AppShell({
@@ -149,6 +150,10 @@ export default function AppShell({
                   >
                     <PCLoader variant="spinner" color="info" size="lg" />
                   </div>
+                ) : status === 'session-expired' ? (
+                  <div style={{ flex: 1, minWidth: 0, width: '100%' }}>
+                    <PrivacyCenterSessionExpired onBack={onBack} />
+                  </div>
                 ) : status === 'empty' ? (
                   <div style={{ flex: 1, minWidth: 0, width: '100%' }}>
                     <PrivacyCenterEmptyState />

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

@@ -1,10 +1,10 @@
-import { useCallback, useEffect, useState, type CSSProperties } from 'react';
-import { useTranslation } from 'react-i18next';
-import { ArrowLeft, ChevronDown, LogOut } from 'lucide-react';
+import { useEffect, useState, type CSSProperties } from 'react';
+import { ChevronDown } from 'lucide-react';
 import { PCAvatar, PCPopover } from '../../ui';
 import { useBranding } from '../../context/BrandingContext';
 import { useOrganization } from '../../context/OrganizationContext';
-import { getVar, signOutPrivacyCenter } from '../../lib/utils';
+import { getVar } from '../../lib/utils';
+import { usePrivacyCenterExitAction } from './usePrivacyCenterExitAction';
 
 type UserMenuProps = {
   onBack?: 'back' | 'signout';
@@ -30,7 +30,6 @@ function initialsFromEmail(email: string): string {
 }
 
 export function UserMenu({ onBack }: UserMenuProps) {
-  const { t } = useTranslation();
   const branding = useBranding();
   const { organization } = useOrganization();
   const [email, setEmail] = useState('');
@@ -39,17 +38,8 @@ export function UserMenu({ onBack }: UserMenuProps) {
     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 { handleAction, label: actionLabel, Icon: ActionIcon } =
+    usePrivacyCenterExitAction(onBack);
 
   const displayName = branding?.brand_name || organization?.name || '';
   const triggerAvatarName = email ? initialsFromEmail(email) : displayName || '?';

package/src/RedactoPrivacyCenter/components/AppShell/usePrivacyCenterExitAction.ts

@@ -0,0 +1,36 @@
+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/MessagesTab.tsx

@@ -11,6 +11,7 @@ import {
   useSubmitDocumentForRequest,
 } from '../../lib/queries';
 import { STATUS_COLORS, useCaseFinalizedTooltip } from '../../lib/constants';
+import { isRefreshBlocked } from '../../lib/utils';
 import type { MessagesTabProps } from '../../lib/types';
 import { MessageItem } from './MessageItem';
 import { MessageComposer } from './MessageComposer';
@@ -40,7 +41,8 @@ export const MessagesTab = ({ caseUuid, caseStatus }: MessagesTabProps) => {
   const uploadMutation = useUploadCaseDocument(organizationId, workspaceId, caseUuid, authContext);
   const submitMutation = useSubmitDocumentForRequest(organizationId, workspaceId, caseUuid, authContext);
 
-  const { scrollContainerRef, handleScroll, scrollToBottom } = useMessagePolling(refetch, messages);
+  const isPollingPaused = useCallback(() => isRefreshBlocked(authContext), [authContext]);
+  const { scrollContainerRef, handleScroll, scrollToBottom } = useMessagePolling(refetch, messages, isPollingPaused);
 
   const {
     pendingUpload, setPendingUpload, submittingForRequest,

package/src/RedactoPrivacyCenter/components/CaseDetails/useMessagePolling.ts

@@ -4,13 +4,20 @@ import type { CaseMessage } from '../../lib/types';
 export function useMessagePolling(
   refetch: () => void,
   messages: CaseMessage[],
+  isPaused?: () => boolean,
 ) {
   const scrollContainerRef = useRef<HTMLDivElement>(null);
   const isNearBottomRef = useRef(true);
   const shouldAutoScrollRef = useRef(true);
+  // Latest pause predicate, read inside the interval without resetting it.
+  const isPausedRef = useRef(isPaused);
+  isPausedRef.current = isPaused;
 
   useEffect(() => {
-    const interval = setInterval(() => { refetch(); }, 30_000);
+    const interval = setInterval(() => {
+      // Don't poll while auth is terminally failed / backing off (incident 2026-06-22).
+      if (!isPausedRef.current?.()) refetch();
+    }, 30_000);
     return () => clearInterval(interval);
   }, [refetch]);
 

package/src/RedactoPrivacyCenter/components/ConsentManager.tsx

@@ -39,6 +39,7 @@ import { ConsentManagerTableSkeleton } from './ConsentManagerTableSkeleton';
 import { ModifyConsentModal } from './ModifyConsentModal';
 import { useConsentManagerGroupedColumns } from './ConsentManagerGroupedColumns';
 import { useConsentManagerColumns } from './ConsentManagerColumns';
+import { getStatusLabel, getGivenDateLabel, getValidTillLabel } from './ConsentManagerCells';
 import { ConsentManagerExpandedRow } from './ConsentManagerExpandedRow';
 import { ConsentManagerProductCards } from './ConsentManagerProductCards';
 import { ConsentManagerPurposeCards } from './ConsentManagerPurposeCards';
@@ -281,6 +282,7 @@ export default function ConsentManager({ variant }: ConsentManagerProps) {
         acc.push({
           ...group,
           purposes: filteredPurposes,
+          active_purposes: counts.active,
           withdrawn_purposes: counts.withdrawn,
           expired_purposes: counts.expired,
           declined_purposes: counts.declined,
@@ -640,26 +642,30 @@ export default function ConsentManager({ variant }: ConsentManagerProps) {
   };
 
   const handleExport = useCallback(() => {
-    const value = viewMode === 'product'
+    // Build CSV rows whose cells exactly match the on-screen table: formatted
+    // dates, translated status labels, and the "Until Withdrawal (no expiry)" /
+    // "-" valid-till labels. Keys are the localized column headers.
+    const toRow = (purpose: PurposeItem, productName: string | null) => ({
+      [t('purpose')]: purpose.name,
+      [t('descriptionLabel')]: purpose.description ?? '',
+      [t('product')]: productName ?? '-',
+      [t('status')]: getStatusLabel(String(purpose.status), t),
+      [t('givenDate')]: getGivenDateLabel(purpose.given_date),
+      [t('validTill')]: getValidTillLabel(purpose, t),
+      [t('method')]: purpose.method ?? '',
+    });
+
+    const rows = viewMode === 'product'
       ? productTable.getRowModel().rows.flatMap((row) =>
-        row.original.purposes.map((purpose) => {
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          const { purpose_uuid, link_reason, data_elements, ...rest } = purpose;
-          return {
-            ...rest,
-            product_name: row.original.product_name,
-            product_description: row.original.product_description,
-          };
-        })
+        row.original.purposes.map((purpose) => toRow(purpose, row.original.product_name))
       )
-      : purposeTable.getRowModel().rows.map((row) => {
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const { purpose_uuid, link_reason, nominator, data_elements, ...rest } = row.original;
-        return rest;
-      });
-    exportTableToCSV(value);
+      : purposeTable.getRowModel().rows.map((row) =>
+        toRow(row.original, row.original.product_name)
+      );
+
+    exportTableToCSV(rows);
     setExportModal(false);
-  }, [viewMode, productTable, purposeTable]);
+  }, [viewMode, productTable, purposeTable, t]);
 
   const handleLoadMorePurposes = useCallback(
     async (group: DisplayProductGroup) => {

package/src/RedactoPrivacyCenter/components/ConsentManagerCells.tsx

@@ -7,13 +7,12 @@ import { pcStyles } from '../styles/pcStyles';
 import { ConsentStatusEnum } from '../lib/types';
 import type { PurposeItem, ConsentModalRecord } from '../lib/types';
 import { formatDateTime } from '../lib/consent-manager/utils';
+import type { BadgeVariant } from './types';
 
 dayjs.extend(relativeTime);
 const getVar = (varName: string): string => `var(${varName})`;
 
-type StatusVariant = 'success' | 'error' | 'warning' | 'info' | 'secondary';
-
-const statusVariantMap: Record<string, StatusVariant> = {
+const statusVariantMap: Record<string, BadgeVariant> = {
   [ConsentStatusEnum.ACTIVE]: 'success',
   [ConsentStatusEnum.WITHDRAWN]: 'error',
   [ConsentStatusEnum.REVOKED]: 'error',
@@ -21,7 +20,7 @@ const statusVariantMap: Record<string, StatusVariant> = {
   [ConsentStatusEnum.DECLINED]: 'warning',
 };
 
-export const getStatusVariant = (status: string): StatusVariant =>
+export const getStatusVariant = (status: string): BadgeVariant =>
   statusVariantMap[status?.toUpperCase()] ?? 'secondary';
 
 export const getStatusLabel = (status: string, t: TFunction): string => {
@@ -34,7 +33,7 @@ export const getStatusLabel = (status: string, t: TFunction): string => {
   return status;
 };
 
-const statusBadgeColors: Record<StatusVariant, { bg: string; fg: string }> = {
+const statusBadgeColors: Record<BadgeVariant, { bg: string; fg: string }> = {
   success: { bg: 'rgba(16, 185, 129, 0.12)', fg: 'var(--pc-success)' },
   error: { bg: 'rgba(239, 68, 68, 0.12)', fg: 'var(--pc-error)' },
   warning: { bg: 'rgba(245, 158, 11, 0.12)', fg: 'var(--pc-warning)' },
@@ -77,6 +76,14 @@ export const renderStatusBadge = (status: string, t: TFunction) => {
   );
 };
 
+// Plain-string version of the given-date cell, for reuse in CSV export etc.
+export const getGivenDateLabel = (timestamp: string | null): string => {
+  if (!timestamp) {
+    return '-';
+  }
+  return dayjs(timestamp).format('MMM D, YYYY [at] h:mm A');
+};
+
 export const renderGivenDate = (
   timestamp: string | null,
   options?: { showTooltip?: boolean }
@@ -85,7 +92,7 @@ export const renderGivenDate = (
     return <PCText size="sm" style={{ whiteSpace: 'normal', overflowWrap: 'anywhere' }}>-</PCText>;
   }
   const date = dayjs(timestamp);
-  const formatted = date.format('MMM D, YYYY [at] h:mm A');
+  const formatted = getGivenDateLabel(timestamp);
   const relative = date.fromNow();
   const showTooltip = options?.showTooltip ?? true;
 
@@ -116,7 +123,8 @@ export const renderGivenDate = (
   );
 };
 
-export const renderValidTill = (consent: PurposeItem, t: TFunction) => {
+// Plain-string version of the valid-till cell, for reuse in CSV export etc.
+export const getValidTillLabel = (consent: PurposeItem, t: TFunction): string => {
   const { status, valid_till } = consent;
   const normalized = (typeof status === 'string' ? status : '').toUpperCase();
   const inactiveLike =
@@ -124,14 +132,20 @@ export const renderValidTill = (consent: PurposeItem, t: TFunction) => {
     normalized === ConsentStatusEnum.WITHDRAWN ||
     normalized === ConsentStatusEnum.REVOKED;
   if (inactiveLike) {
-    return <PCText size="sm" style={{ whiteSpace: 'normal', overflowWrap: 'anywhere' }}>-</PCText>;
+    return '-';
   }
   if (normalized === ConsentStatusEnum.ACTIVE && (valid_till === null || valid_till === undefined)) {
-    return <PCText size="sm" style={{ whiteSpace: 'normal', overflowWrap: 'anywhere' }}>{t('untilWithdrawalNoExpiry')}</PCText>;
+    return t('untilWithdrawalNoExpiry');
   }
-  return <PCText size="sm" style={{ whiteSpace: 'normal', overflowWrap: 'anywhere' }}>{valid_till ? formatDateTime(valid_till) : '-'}</PCText>;
+  return valid_till ? formatDateTime(valid_till) : '-';
 };
 
+export const renderValidTill = (consent: PurposeItem, t: TFunction) => (
+  <PCText size="sm" style={{ whiteSpace: 'normal', overflowWrap: 'anywhere' }}>
+    {getValidTillLabel(consent, t)}
+  </PCText>
+);
+
 const methodIconMap: Record<string, JSX.Element> = {
   MOBILE: <Smartphone size={12} style={{ color: 'var(--pc-text-secondary)' }} />,
   WEB: <LaptopMinimal size={12} style={{ color: 'var(--pc-text-secondary)' }} />,

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

@@ -5,6 +5,7 @@ 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';
@@ -28,6 +29,10 @@ export const NotificationBell = () => {
     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) {
@@ -64,6 +69,14 @@ export const NotificationBell = () => {
     };
   }, [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) {
@@ -72,14 +85,14 @@ export const NotificationBell = () => {
       }
       return;
     }
-    pollUnreadCount();
-    pollRef.current = setInterval(() => pollUnreadCount(), POLL_INTERVAL);
+    pollUnreadCountRef.current();
+    pollRef.current = setInterval(() => pollUnreadCountRef.current(), POLL_INTERVAL);
     return () => {
       if (pollRef.current) {
         clearInterval(pollRef.current);
       }
     };
-  }, [pollUnreadCount, organizationId, workspaceId]);
+  }, [organizationId, workspaceId]);
 
   const onRefresh = useCallback(async () => {
     setIsRefreshing(true);