@redacto.io/consent-sdk-react 5.1.0 → 5.3.0

package/src/RedactoPrivacyCenter/api/actions.ts

@@ -22,12 +22,20 @@ import type {
   GetCaseDocumentParams,
   GetCaseMessagesParams,
   MessageDocument,
+  GetNotificationsServerParams,
+  NotificationActionBaseParams,
+  NotificationActionResponse,
+  NotificationByUuidServerParams,
+  NotificationClient,
+  NotificationListResponse,
+  NotificationSummary,
   OtpResponse,
   OtpVerificationResponse,
   Pagination,
   SendCaseMessageParams,
   SubmitDocumentForRequestParams,
   TokenExchangeResponse,
+  UnreadCountResponse,
   UploadCaseDocumentParams,
   UploadDocumentResponse,
   UserConsentDetail,
@@ -474,3 +482,79 @@ export async function getCaseDocumentServer(params: GetCaseDocumentParams): Prom
     client.getCaseDocument(base, params.caseUuid, params.documentUuid, params.authToken)
   );
 }
+
+// ─── Notification Hub ───────────────────────────────────────────────────────
+
+
+
+async function runNotificationAction<T>(
+  params: NotificationActionBaseParams,
+  label: string,
+  fn: (client: NotificationClient, baseRequest: BaseRequest) => Promise<T>
+): Promise<T | null> {
+  try {
+    if (!params.consentClient) {
+      throw new Error('Consent client is required')
+    }
+    const baseRequest = buildBaseRequest(params.organizationId, params.workspaceId, params.authToken);
+    return await fn(params.consentClient, baseRequest);
+  } catch (error) {
+    return handleServerActionError(error, label);
+  }
+}
+
+export async function getNotificationsServer(
+  params: GetNotificationsServerParams
+): Promise<NotificationListResponse | null> {
+  return runNotificationAction(params, 'fetching notifications', (client, base) =>
+    client.getNotifications(base, {
+      category: params.category,
+      notification_type: params.notification_type,
+      is_read: params.is_read,
+      skip: params.skip,
+      limit: params.limit,
+      include_summary: params.include_summary,
+      language: params.language,
+    }, params.authToken)
+  );
+}
+
+export async function getNotificationSummaryServer(
+  params: NotificationActionBaseParams
+): Promise<NotificationSummary | null> {
+  return runNotificationAction(params, 'fetching notification summary', (client, base) =>
+    client.getNotificationSummary(base, params.authToken)
+  );
+}
+
+export async function getUnreadCountServer(
+  params: NotificationActionBaseParams
+): Promise<UnreadCountResponse | null> {
+  return runNotificationAction(params, 'fetching unread count', (client, base) =>
+    client.getUnreadCount(base, params.authToken)
+  );
+}
+
+export async function markNotificationReadServer(
+  params: NotificationByUuidServerParams
+): Promise<NotificationActionResponse | null> {
+  return runNotificationAction(params, 'marking notification as read', (client, base) =>
+    client.markNotificationRead(base, params.notificationUuid, params.authToken)
+  );
+}
+
+export async function markAllNotificationsReadServer(
+  params: NotificationActionBaseParams
+): Promise<NotificationActionResponse | null> {
+  return runNotificationAction(params, 'marking all notifications as read', (client, base) =>
+    client.markAllNotificationsRead(base, params.authToken)
+  );
+}
+
+export async function acknowledgeNotificationServer(
+  params: NotificationByUuidServerParams
+): Promise<NotificationActionResponse | null> {
+  return runNotificationAction(params, 'acknowledging notification', (client, base) =>
+    client.acknowledgeNotification(base, params.notificationUuid, params.authToken)
+  );
+}

package/src/RedactoPrivacyCenter/api/client.ts

@@ -3,6 +3,11 @@ import type { ApiFetchOptions, ApiResponse } from "./fetcher";
 import type {
   CaseMessage,
   MessageDocument,
+  NotificationActionResponse,
+  NotificationListResponse,
+  NotificationQueryParams,
+  NotificationSummary,
+  UnreadCountResponse,
   UploadDocumentResponse,
 } from "../lib/types";
 
@@ -157,6 +162,10 @@ export function createConsentClient(baseUrl: string) {
     return privacyCenterUrl(baseRequest, `/cases/${caseUuid}${path}`);
   }
 
+  function notificationUrl(baseRequest: BaseRequest, path = ''): string {
+    return privacyCenterUrl(baseRequest, `/notifications${path}`);
+  }
+
   function resolveAuthToken(authToken: string | undefined, baseRequest: BaseRequest): string {
     return authToken || baseRequest.authToken;
   }
@@ -520,5 +529,114 @@ export function createConsentClient(baseUrl: string) {
         authToken: resolveAuthToken(authToken, baseRequest),
       });
     },
+
+    // ─── Notification Hub ─────────────────────────────────────────────────
+
+    /**
+     * List notifications (paginated, with filters)
+     */
+    async getNotifications(
+      baseRequest: BaseRequest,
+      params?: NotificationQueryParams,
+      authToken?: string
+    ): Promise<NotificationListResponse> {
+      const queryParams = new URLSearchParams();
+      if (params?.category) {
+        queryParams.append('category', params.category);
+      }
+      if (params?.notification_type) {
+        queryParams.append('notification_type', params.notification_type);
+      }
+      if (params?.is_read !== undefined) {
+        queryParams.append('is_read', String(params.is_read));
+      }
+      if (params?.skip !== undefined) {
+        queryParams.append('skip', params.skip.toString());
+      }
+      if (params?.limit !== undefined) {
+        queryParams.append('limit', params.limit.toString());
+      }
+      if (params?.include_summary) {
+        queryParams.append('include_summary', 'true');
+      }
+      if (params?.language) {
+        queryParams.append('language', params.language);
+      }
+      const queryString = queryParams.toString();
+      const url = notificationUrl(baseRequest, queryString ? `?${queryString}` : '');
+      return privacyCenterApiFetch<NotificationListResponse>(url, {
+        authToken: resolveAuthToken(authToken, baseRequest),
+      });
+    },
+
+    /**
+     * Get notification summary (aggregated counts only)
+     */
+    async getNotificationSummary(
+      baseRequest: BaseRequest,
+      authToken?: string
+    ): Promise<NotificationSummary> {
+      const url = notificationUrl(baseRequest, '/summary');
+      return privacyCenterApiFetch<NotificationSummary>(url, {
+        authToken: resolveAuthToken(authToken, baseRequest),
+      });
+    },
+
+    /**
+     * Get unread notification count (lightweight, for badge)
+     */
+    async getUnreadCount(
+      baseRequest: BaseRequest,
+      authToken?: string
+    ): Promise<UnreadCountResponse> {
+      const url = notificationUrl(baseRequest, '/unread-count');
+      return privacyCenterApiFetch<UnreadCountResponse>(url, {
+        authToken: resolveAuthToken(authToken, baseRequest),
+      });
+    },
+
+    /**
+     * Mark a single notification as read
+     */
+    async markNotificationRead(
+      baseRequest: BaseRequest,
+      notificationUuid: string,
+      authToken?: string
+    ): Promise<NotificationActionResponse> {
+      const url = notificationUrl(baseRequest, `/${notificationUuid}/read`);
+      return privacyCenterApiFetch<NotificationActionResponse>(url, {
+        method: 'PATCH',
+        authToken: resolveAuthToken(authToken, baseRequest),
+      });
+    },
+
+    /**
+     * Mark all notifications as read
+     */
+    async markAllNotificationsRead(
+      baseRequest: BaseRequest,
+      authToken?: string
+    ): Promise<NotificationActionResponse> {
+      const url = notificationUrl(baseRequest, '/mark-all-read');
+      return privacyCenterApiFetch<NotificationActionResponse>(url, {
+        method: 'POST',
+        authToken: resolveAuthToken(authToken, baseRequest),
+      });
+    },
+
+    /**
+     * Acknowledge a notification (sets is_read and is_acknowledged to true)
+     */
+    async acknowledgeNotification(
+      baseRequest: BaseRequest,
+      notificationUuid: string,
+      authToken?: string
+    ): Promise<NotificationActionResponse> {
+      const url = notificationUrl(baseRequest, `/${notificationUuid}/acknowledge`);
+      return privacyCenterApiFetch<NotificationActionResponse>(url, {
+        method: 'POST',
+        authToken: resolveAuthToken(authToken, baseRequest),
+      });
+    },
   };
 }

package/src/RedactoPrivacyCenter/components/DataRequest/PurposeSelectionSection.tsx

@@ -258,6 +258,21 @@ export default function PurposeSelectionSection({
                           const actualIndex = item.data_elements.findIndex(
                             (el) => el.uuid === de.uuid
                           );
+                          if (isErasure) {
+                            return (
+                              <p
+                                key={de.uuid}
+                                style={{
+                                  fontSize: pcStyles.textSm.fontSize,
+                                  color: getVar('--pc-text-primary'),
+                                  textTransform: 'capitalize',
+                                  margin: 0,
+                                }}
+                              >
+                                {de.name}
+                              </p>
+                            );
+                          }
                           return (
                             <PCCheckbox
                               key={de.uuid}

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

@@ -0,0 +1,160 @@
+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 { 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;
+    }
+    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]);
+
+  useEffect(() => {
+    if (!organizationId || !workspaceId) {
+      if (pollRef.current) {
+        clearInterval(pollRef.current);
+        pollRef.current = null;
+      }
+      return;
+    }
+    pollUnreadCount();
+    pollRef.current = setInterval(() => pollUnreadCount(), POLL_INTERVAL);
+    return () => {
+      if (pollRef.current) {
+        clearInterval(pollRef.current);
+      }
+    };
+  }, [pollUnreadCount, 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={20} />
+          </button>
+          {unreadCount > 0 && (
+            <span className="pc-notification-badge">{unreadCount}</span>
+          )}
+        </div>
+      </PCTooltip>
+    </PCPopover>
+  );
+}

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

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

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

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

@@ -0,0 +1,19 @@
+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>
+  );
+}

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

@@ -0,0 +1,92 @@
+import { useTranslation } from 'react-i18next';
+import type { NotificationListPanelProps } from '../../lib/types';
+import { useNotificationFilterTabs, NOTIFICATION_PAGE_SIZE } from '../../lib/constants';
+import { NotificationRow } from './NotificationRow';
+import { NotificationRefreshButton } from './NotificationRefreshButton';
+
+
+export const NotificationListPanel = ({
+  notifications, totalCount, activeTab, onTabChange, skip, onSkipChange,
+  isLoading, isRefreshing, onRefresh, onMarkAllRead, onNotificationClick, onCTAClick,
+}: NotificationListPanelProps) => {
+  const { t } = useTranslation();
+  const tabs = useNotificationFilterTabs();
+  const hasMore = skip + NOTIFICATION_PAGE_SIZE < totalCount;
+
+  return (
+    <div className="pc-notification-panel">
+      {/* Header */}
+      <div className="pc-notification-panel-header">
+        <h2 className="pc-notification-panel-title">
+          {t('notifications')}
+          <span className="pc-notification-panel-count">({totalCount})</span>
+        </h2>
+        <div className="pc-notification-header-actions">
+          <NotificationRefreshButton isRefreshing={isRefreshing} onRefresh={onRefresh} iconSize={18} />
+          <button type="button" onClick={onMarkAllRead} className="pc-notification-link-btn">
+            {t('markAllAsRead')}
+          </button>
+        </div>
+      </div>
+
+      {/* Filter tabs */}
+      <div className="pc-notification-filter-tabs">
+        {tabs.map((tab) => (
+          <button
+            key={tab.key}
+            type="button"
+            onClick={() => onTabChange(tab.key)}
+            className="pc-notification-filter-tab"
+            data-active={activeTab === tab.key ? 'true' : 'false'}
+            aria-pressed={activeTab === tab.key}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Notification list */}
+      <div>
+        {isLoading && !isRefreshing ? (
+          <div className="pc-notification-empty-state">{t('loadingNotifications')}</div>
+        ) : notifications.length === 0 ? (
+          <div className="pc-notification-empty-state">{t('noNotificationsInCategory')}</div>
+        ) : (
+          notifications.map((notification) => (
+            <NotificationRow
+              key={notification.uuid}
+              notification={notification}
+              onClick={() => onNotificationClick(notification)}
+              onCTAClick={(cta) => onCTAClick(notification, cta)}
+            />
+          ))
+        )}
+      </div>
+
+      {/* Pagination */}
+      {totalCount > NOTIFICATION_PAGE_SIZE && (
+        <div className="pc-notification-pagination">
+          <button
+            type="button"
+            onClick={() => onSkipChange(Math.max(0, skip - NOTIFICATION_PAGE_SIZE))}
+            disabled={skip === 0}
+            className="pc-notification-pagination-btn"
+          >
+            {t('previous')}
+          </button>
+          <span className="pc-notification-pagination-range">
+            {t('paginationRange', { start: skip + 1, end: Math.min(skip + NOTIFICATION_PAGE_SIZE, totalCount), total: totalCount })}
+          </span>
+          <button
+            type="button"
+            onClick={() => onSkipChange(skip + NOTIFICATION_PAGE_SIZE)}
+            disabled={!hasMore}
+            className="pc-notification-pagination-btn"
+          >
+            {t('next')}
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,20 @@
+import { useTranslation } from 'react-i18next';
+import { IoRefreshOutline } from 'react-icons/io5';
+import { cn } from '../../utils/cn';
+import type { NotificationRefreshButtonProps } from '../../lib/types';
+
+export const NotificationRefreshButton = ({ isRefreshing, onRefresh, iconSize = 16 }: NotificationRefreshButtonProps) => {
+  const { t } = useTranslation();
+  return (
+    <button
+      type="button"
+      onClick={onRefresh}
+      disabled={isRefreshing}
+      title={t('refreshNotifications')}
+      aria-label={t('refreshNotifications')}
+      className={cn('pc-notification-refresh-btn', isRefreshing && 'pc-notification-refresh-btn--spinning')}
+    >
+      <IoRefreshOutline size={iconSize} />
+    </button>
+  );
+};