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

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

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

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

@@ -0,0 +1,10 @@
+import type { StatCardProps } from '../../lib/types';
+
+export const StatCard = ({ value, label }: StatCardProps) => {
+  return (
+    <div className="pc-notification-stat-card">
+      <span className="pc-notification-stat-value">{value}</span>
+      <span className="pc-notification-stat-label">{label}</span>
+    </div>
+  );
+}

package/src/RedactoPrivacyCenter/components/NotificationHub/useNotificationActions.ts

@@ -0,0 +1,112 @@
+import { useCallback, useMemo } from 'react';
+import { useInternalNavigation } from '../../context/NavigationContext';
+import { useOrganization } from '../../context/OrganizationContext';
+import { useAuth } from '../../context/AuthContext';
+import { useBaseUrl } from '../../context/BaseUrlContext';
+import { markNotificationRead, markAllRead, acknowledgeNotification, fetchCaseHistory } from '../../lib/api';
+import type { AuthContext } from '../../lib/api';
+import { useCurrentLanguage } from '../../lib/useCurrentLanguage';
+import type { Notification, NotificationCTA } from '../../lib/types';
+import { CASE_DETAILS_PREFIX } from '../../lib/constants';
+
+export const useNotificationActions = () => {
+  const { navigateTo, setSelectedCase } = useInternalNavigation();
+  const { organization } = useOrganization();
+  const { accessToken, refreshToken, onError, updateTokens } = useAuth();
+  const { consentClient } = useBaseUrl();
+  const { langParam } = useCurrentLanguage();
+
+  const organizationId = organization?.uuid;
+  const workspaceId = organization?.workspaces[0]?.uuid;
+
+  const authContext: AuthContext = useMemo(() => ({
+    accessToken, refreshToken, onError, updateTokens,
+  }), [accessToken, refreshToken, onError, updateTokens]);
+
+  const hasAcknowledgeCTA = useCallback((notification: Notification) => {
+    return notification.ctas?.some((cta) => cta.action_type === 'acknowledge') ?? false;
+  }, []);
+
+  const handleMarkRead = useCallback(async (notificationUuid: string): Promise<boolean> => {
+    if (!organizationId || !workspaceId) {
+      return false;
+    }
+    const result = await markNotificationRead(organizationId, workspaceId, notificationUuid, authContext, consentClient);
+    return result !== null;
+  }, [organizationId, workspaceId, authContext, consentClient]);
+
+  const handleMarkAllRead = useCallback(async (): Promise<boolean> => {
+    if (!organizationId || !workspaceId) {
+      return false;
+    }
+    const result = await markAllRead(organizationId, workspaceId, authContext, consentClient);
+    return result !== null;
+  }, [organizationId, workspaceId, authContext, consentClient]);
+
+  const handleAcknowledge = useCallback(async (notificationUuid: string): Promise<boolean> => {
+    if (!organizationId || !workspaceId) {
+      return false;
+    }
+    const result = await acknowledgeNotification(organizationId, workspaceId, notificationUuid, authContext, consentClient);
+    return result !== null;
+  }, [organizationId, workspaceId, authContext, consentClient]);
+
+  const handleCTAClick = useCallback(async (notification: Notification, cta: NotificationCTA) => {
+    if (cta.action_type === 'acknowledge') {
+      const ok = await handleAcknowledge(notification.uuid);
+      if (!ok) {
+        return null;
+      }
+      return 'acknowledged' as const;
+    }
+
+    if (cta.action_type !== 'link' || !cta.url) {
+      return null;
+    }
+
+    if (!notification.is_read) {
+      await handleMarkRead(notification.uuid);
+    }
+
+    
+    const caseUuid = cta.url.startsWith(CASE_DETAILS_PREFIX)
+      ? cta.url.slice(CASE_DETAILS_PREFIX.length)
+      : '';
+    if (caseUuid && organizationId && workspaceId) {
+      const contact = typeof window !== 'undefined' ? sessionStorage.getItem('email') || '' : '';
+      const caseHistory = await fetchCaseHistory(organizationId, workspaceId, contact, undefined, undefined, authContext, consentClient, langParam);
+      const fullCase = caseHistory?.data?.find((c) => c.uuid === caseUuid);
+      if (fullCase) {
+        setSelectedCase(fullCase);
+        navigateTo('case-details');
+        return 'navigated' as const;
+      }
+      return 'not_found' as const;
+    }
+
+    let parsed: URL;
+    try {
+      parsed = new URL(cta.url);
+    } catch {
+      return null;
+    }
+    if (parsed.protocol !== 'http:' && parsed.protocol !== 'https:') {
+      return null;
+    }
+    window.open(parsed.href, '_blank', 'noopener,noreferrer');
+    return 'opened' as const;
+  }, [handleAcknowledge, handleMarkRead, navigateTo, setSelectedCase, organizationId, workspaceId, authContext, consentClient, langParam]);
+
+  return {
+    organizationId,
+    workspaceId,
+    authContext,
+    consentClient,
+    navigateTo,
+    hasAcknowledgeCTA,
+    handleMarkRead,
+    handleMarkAllRead,
+    handleAcknowledge,
+    handleCTAClick,
+  };
+}

package/src/RedactoPrivacyCenter/components/NotificationHub/utils.ts

@@ -0,0 +1,27 @@
+import type { TFunction } from 'i18next';
+
+export const formatTimeAgo = (dateString: string, t: TFunction): string => {
+  const now = new Date();
+  const date = new Date(dateString);
+  if (Number.isNaN(date.getTime())) {
+    return t('justNow')
+  };
+  const diffMs = now.getTime() - date.getTime();
+  const diffMin = Math.floor(diffMs / 60_000);
+  if (diffMin < 1) {
+    return t('justNow')
+  };
+  if (diffMin < 60) {
+    return t('minutesAgo', { count: diffMin })
+  };
+  const diffHrs = Math.floor(diffMin / 60);
+  if (diffHrs < 24) {
+    return t('hoursAgo', { count: diffHrs })
+  };
+  const diffDays = Math.floor(diffHrs / 24);
+  if (diffDays < 7) {
+    return t('daysAgo', { count: diffDays })
+  };
+  const diffWeeks = Math.floor(diffDays / 7);
+  return t('weeksAgo', { count: diffWeeks });
+};

package/src/RedactoPrivacyCenter/components/PrivacyCenterLayout.tsx

@@ -12,8 +12,8 @@ import { usePageChrome } from '../context/PageChromeContext';
 import i18n from '../lib/i18n';
 import { pcStyles } from '../styles/pcStyles';
 import type { PrivacyCenterLayoutProps } from './types';
-
-const getVar = (varName: string): string => `var(${varName})`;
+import { NotificationBell } from './NotificationHub/NotificationBell';
+import { getVar } from '../lib/utils';
 
 export default function PrivacyCenterLayout({
   children,
@@ -141,6 +141,7 @@ export default function PrivacyCenterLayout({
                   value={languageOptions.find((opt) => opt.value === locale) || null}
                   onChange={handleLanguageChange}
                 />
+                <NotificationBell />
                 <ThemeToggle />
               </div>
             </nav>

package/src/RedactoPrivacyCenter/context/NavigationContext.tsx

@@ -1,13 +1,13 @@
 import { createContext, useContext, useState, useCallback, type ReactNode } from 'react';
 import type { CaseRequest } from '../lib/types';
 
-export type InternalPage = 'consent-manager' | 'form' | 'activity' | 'case-details';
+export type InternalPage = 'consent-manager' | 'form' | 'activity' | 'case-details' | 'notifications';
 
 const NAV_STORAGE_KEY = 'pc_current_page';
 const CASE_UUID_STORAGE_KEY = 'pc_selected_case_uuid';
 
 const VALID_PAGES: ReadonlySet<string> = new Set<InternalPage>([
-  'consent-manager', 'form', 'activity', 'case-details',
+  'consent-manager', 'form', 'activity', 'case-details', 'notifications',
 ]);
 
 function getStoredPage(fallback: InternalPage): InternalPage {

package/src/RedactoPrivacyCenter/lib/api.ts

@@ -11,6 +11,12 @@ import {
   uploadCaseDocumentServer,
   submitDocumentForRequestServer,
   getCaseDocumentServer,
+  getNotificationsServer,
+  getNotificationSummaryServer,
+  getUnreadCountServer,
+  markNotificationReadServer,
+  markAllNotificationsReadServer,
+  acknowledgeNotificationServer,
 } from '../api/actions';
 import type { BaseUrlContextValue } from '../context/BaseUrlContext';
 import type {
@@ -20,6 +26,11 @@ import type {
   CreateCaseResponse,
   FormData,
   MessageDocument,
+  NotificationActionResponse,
+  NotificationListResponse,
+  NotificationQueryParams,
+  NotificationSummary,
+  UnreadCountResponse,
   UploadDocumentResponse,
   UserConsentDetail,
   UserDataRequest,
@@ -564,3 +575,69 @@ export const getCaseDocument = async (
   withAuthRetry(organizationId, workspaceId, authContext, consentClient, 'Error fetching case document:', (token) =>
     getCaseDocumentServer({ organizationId, workspaceId, caseUuid, documentUuid, authToken: token, consentClient })
   );
+
+// ─── Notification Hub ───────────────────────────────────────────────────────
+
+export const fetchNotifications = async (
+  organizationId: string,
+  workspaceId: string,
+  params?: NotificationQueryParams,
+  authContext?: AuthContext,
+  consentClient?: BaseUrlContextValue['consentClient'],
+  language?: string,
+): Promise<NotificationListResponse | null> =>
+  withAuthRetry(organizationId, workspaceId, authContext, consentClient, 'Error fetching notifications:', (token) =>
+    getNotificationsServer({ organizationId, workspaceId, ...params, language, authToken: token, consentClient })
+  );
+
+export const fetchNotificationSummary = async (
+  organizationId: string,
+  workspaceId: string,
+  authContext?: AuthContext,
+  consentClient?: BaseUrlContextValue['consentClient']
+): Promise<NotificationSummary | null> =>
+  withAuthRetry(organizationId, workspaceId, authContext, consentClient, 'Error fetching notification summary:', (token) =>
+    getNotificationSummaryServer({ organizationId, workspaceId, authToken: token, consentClient })
+  );
+
+export const fetchUnreadCount = async (
+  organizationId: string,
+  workspaceId: string,
+  authContext?: AuthContext,
+  consentClient?: BaseUrlContextValue['consentClient']
+): Promise<UnreadCountResponse | null> =>
+  withAuthRetry(organizationId, workspaceId, authContext, consentClient, 'Error fetching unread count:', (token) =>
+    getUnreadCountServer({ organizationId, workspaceId, authToken: token, consentClient })
+  );
+
+export const markNotificationRead = async (
+  organizationId: string,
+  workspaceId: string,
+  notificationUuid: string,
+  authContext?: AuthContext,
+  consentClient?: BaseUrlContextValue['consentClient']
+): Promise<NotificationActionResponse | null> =>
+  withAuthRetry(organizationId, workspaceId, authContext, consentClient, 'Error marking notification as read:', (token) =>
+    markNotificationReadServer({ organizationId, workspaceId, notificationUuid, authToken: token, consentClient })
+  );
+
+export const markAllRead = async (
+  organizationId: string,
+  workspaceId: string,
+  authContext?: AuthContext,
+  consentClient?: BaseUrlContextValue['consentClient']
+): Promise<NotificationActionResponse | null> =>
+  withAuthRetry(organizationId, workspaceId, authContext, consentClient, 'Error marking all notifications as read:', (token) =>
+    markAllNotificationsReadServer({ organizationId, workspaceId, authToken: token, consentClient })
+  );
+
+export const acknowledgeNotification = async (
+  organizationId: string,
+  workspaceId: string,
+  notificationUuid: string,
+  authContext?: AuthContext,
+  consentClient?: BaseUrlContextValue['consentClient']
+): Promise<NotificationActionResponse | null> =>
+  withAuthRetry(organizationId, workspaceId, authContext, consentClient, 'Error acknowledging notification:', (token) =>
+    acknowledgeNotificationServer({ organizationId, workspaceId, notificationUuid, authToken: token, consentClient })
+  );

package/src/RedactoPrivacyCenter/lib/constants.ts

@@ -4,7 +4,8 @@ import { GRIEVANCE_TAB_IDS } from '../components/constant';
 import { menuItemsPC } from '../components/SideMenuBarPC/constants';
 import type { MenuItem } from '../components/SideMenuBarPC/types';
 import type { InternalPage } from '../context/NavigationContext';
-import type { DocumentRequestStatus, DocumentRequestStatusInfo } from './types';
+import type { DocumentRequestStatus, DocumentRequestStatusInfo, NotificationCTA, NotificationType, NotificationCategory, IconCategory, FilterTab } from './types';
+import { IoPersonOutline, IoTimeOutline, IoDocumentOutline, IoShieldCheckmarkOutline, IoAlertCircleOutline, IoSettingsOutline } from 'react-icons/io5';
 
 export const useRequestTypeLabels = () => {
   const { t } = useTranslation();
@@ -89,6 +90,10 @@ export const PAGE_CHROME_BY_PAGE: Record<InternalPage, PageChromeConfig> = {
     titleKey: 'caseDetails',
     descriptionKey: 'yourPrivacyCenter',
   },
+  notifications: {
+    titleKey: 'notificationHub',
+    descriptionKey: 'notificationHubSubtitle',
+  },
 };
 
 const HREF_TO_NAME_KEY: Record<string, string> = {
@@ -159,3 +164,75 @@ export const ACTIVITY_DATE_FORMATS = {
   DISPLAY: 'MMM D, YYYY [at] h:mm A',
   TOOLTIP: 'MMMM D, YYYY [at] h:mm:ss A',
 } as const;
+
+
+// ─── Notification Hub ──────────────────────────────────────────────────────
+
+export const POLL_INTERVAL = 30_000;
+export const NOTIFICATION_PAGE_SIZE = 10;
+export const NOTIFICATION_DROPDOWN_LIMIT = 5;
+
+export const TAB_TO_CATEGORY: Record<FilterTab, NotificationCategory | undefined> = {
+  all: undefined,
+  consent: 'consent',
+  request: 'request',
+  system: 'system',
+};
+
+export const TYPE_TO_ICON_CATEGORY: Record<NotificationType, IconCategory> = {
+  guardian_verification_request: 'guardian',
+  consent_expiry_warning: 'consent',
+  new_consent_notice: 'system',
+  consent_withdrawal_confirmation: 'withdrawal',
+  data_request_status_update: 'access',
+  case_message: 'access',
+  grievance_status_update: 'grievance',
+  consent_regrant_prompt: 'consent',
+};
+
+export const ICON_MAP: Record<IconCategory, typeof IoPersonOutline> = {
+  guardian: IoPersonOutline,
+  consent: IoTimeOutline,
+  access: IoDocumentOutline,
+  withdrawal: IoShieldCheckmarkOutline,
+  grievance: IoAlertCircleOutline,
+  system: IoSettingsOutline,
+};
+
+export const ICON_COLORS: Record<IconCategory, string> = {
+  guardian: '#7c3aed',
+  consent: '#ea580c',
+  access: '#16a34a',
+  withdrawal: '#2563eb',
+  grievance: '#dc2626',
+  system: '#6b7280',
+};
+
+export const CTA_VARIANT_CLASS: Record<NotificationCTA['style'], string> = {
+  primary: 'pc-notification-cta--primary',
+  danger: 'pc-notification-cta--danger',
+  secondary: 'pc-notification-cta--secondary',
+};
+
+export const useNotificationFilterTabs = () => {
+  const { t } = useTranslation();
+  return [
+    { key: 'all' as FilterTab, label: t('all') },
+    { key: 'consent' as FilterTab, label: t('consent') },
+    { key: 'request' as FilterTab, label: t('requests') },
+    { key: 'system' as FilterTab, label: t('system') },
+  ];
+};
+
+export const useNotificationStatLabels = () => {
+  const { t } = useTranslation();
+  return {
+    total: t('total'),
+    unread: t('unread'),
+    action_needed: t('actionNeeded'),
+    acknowledged: t('acknowledged'),
+  };
+};
+
+
+export const CASE_DETAILS_PREFIX = '/case-details/';

package/src/RedactoPrivacyCenter/lib/types.ts

@@ -529,3 +529,151 @@ export type SubmitDocumentForRequestInput = Readonly<{
 export type DocumentRequestStatusInfo = Readonly<{ labelKey: string; color: string }>;
 
 export type CaseDetailsTab = Readonly<{ id: TabId; label: string }>;
+
+// ─── Notification Hub ──────────────────────────────────────────────────────
+
+export type NotificationType =
+  | 'guardian_verification_request'
+  | 'consent_expiry_warning'
+  | 'new_consent_notice'
+  | 'consent_withdrawal_confirmation'
+  | 'data_request_status_update'
+  | 'case_message'
+  | 'grievance_status_update'
+  | 'consent_regrant_prompt';
+
+export type NotificationCategory = 'consent' | 'request' | 'system';
+
+export type NotificationCTA = {
+  label: string;
+  style: 'primary' | 'secondary' | 'danger';
+  action_type: 'link' | 'acknowledge';
+  url?: string;
+};
+
+export type Notification = {
+  uuid: string;
+  notification_type: NotificationType;
+  category: NotificationCategory;
+  title: string;
+  description: string;
+  is_read: boolean;
+  is_acknowledged: boolean;
+  source_type: string;
+  source_uuid: string | null;
+  request_type: string;
+  request_type_display?: string | null;
+  status_label: string;
+  status_label_display?: string | null;
+  ctas: NotificationCTA[];
+  created_at: string;
+};
+
+export type NotificationSummary = {
+  total: number;
+  unread: number;
+  action_needed: number;
+  acknowledged: number;
+};
+
+export type NotificationListResponse = {
+  data: Notification[];
+  total: number;
+  skip: number;
+  limit: number;
+  summary: NotificationSummary | null;
+};
+
+export type UnreadCountResponse = {
+  count: number;
+};
+
+export type NotificationActionResponse = {
+  message: string;
+};
+
+export type NotificationActionBaseParams = {
+  organizationId: string;
+  workspaceId: string;
+  authToken?: string;
+  consentClient?: ReturnType<typeof import('../api/client').createConsentClient>;
+};
+
+export type StatCardProps = Readonly<{
+  value: number; label: string;
+}>
+
+export type NotificationDropdownProps = Readonly<{
+  notifications: Notification[];
+  onMarkAllRead: () => void;
+  onRefresh: () => void;
+  isRefreshing: boolean;
+  onViewAll: () => void;
+  onNotificationClick: (notification: Notification) => void;
+  onCTAClick: (notification: Notification, cta: NotificationCTA) => void;
+}>;
+
+export type NotificationListPanelProps = Readonly<{
+  notifications: Notification[];
+  totalCount: number;
+  activeTab: FilterTab;
+  onTabChange: (tab: FilterTab) => void;
+  skip: number;
+  onSkipChange: (skip: number) => void;
+  isLoading: boolean;
+  isRefreshing: boolean;
+  onRefresh: () => void;
+  onMarkAllRead: () => void;
+  onNotificationClick: (notification: Notification) => void;
+  onCTAClick: (notification: Notification, cta: NotificationCTA) => void;
+}>;
+
+
+export type NotificationRowProps = Readonly<{
+  notification: Notification;
+  onClick: () => void;
+  onCTAClick: (cta: NotificationCTA) => void;
+}>;
+
+export type NotificationIconProps = Readonly<{
+  notificationType: NotificationType;
+  size?: 'sm' | 'lg';
+}>;
+
+export type NotificationCTAButtonProps = Readonly<{
+  cta: NotificationCTA;
+  onClick: (e: React.MouseEvent) => void;
+  size?: 'sm' | 'lg';
+}>;
+
+export type FilterTab = 'all' | 'consent' | 'request' | 'system';
+
+export type IconCategory = 'guardian' | 'consent' | 'access' | 'withdrawal' | 'grievance' | 'system';
+
+export type NotificationDropdownItemProps = Readonly<{
+  notification: Notification;
+  onNotificationClick: (notification: Notification) => void;
+  onCTAClick: (notification: Notification, cta: NotificationCTA) => void;
+}>
+
+export type NotificationQueryParams = {
+  category?: NotificationCategory;
+  notification_type?: NotificationType;
+  is_read?: boolean;
+  skip?: number;
+  limit?: number;
+  include_summary?: boolean;
+  language?: string;
+};
+
+export type NotificationClient = NonNullable<NotificationActionBaseParams['consentClient']>;
+
+export type GetNotificationsServerParams = NotificationActionBaseParams & NotificationQueryParams;
+
+export type NotificationByUuidServerParams = NotificationActionBaseParams & { notificationUuid: string };
+
+export type NotificationRefreshButtonProps = Readonly<{
+  isRefreshing: boolean;
+  onRefresh: () => void;
+  iconSize?: number;
+}>;

package/src/RedactoPrivacyCenter/lib/utils.ts

@@ -624,3 +624,6 @@ export const formatActivityType = (activityType: string): string => {
     .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
     .join(' ');
 };
+
+
+export const getVar = (varName: string): string => `var(${varName})`;

package/src/RedactoPrivacyCenter/locales/en/translation.json

@@ -251,5 +251,31 @@
   "document": "Document",
   "downloadAttachment": "Download {{fileName}}",
   "sortByColumn": "Sort by column",
-  "failedToFetchActivityData": "Failed to fetch activity data"
+  "failedToFetchActivityData": "Failed to fetch activity data",
+  "acknowledged": "Acknowledged",
+  "actionNeeded": "Action needed",
+  "all": "All",
+  "backToManageConsent": "Back to manage consent",
+  "consent": "Consent",
+  "daysAgo": "{{count}}d ago",
+  "hoursAgo": "{{count}}h ago",
+  "justNow": "Just now",
+  "loadingNotifications": "Loading notifications...",
+  "markAllAsRead": "Mark all as read",
+  "minutesAgo": "{{count}}m ago",
+  "next": "Next",
+  "noNotificationsInCategory": "No notifications in this category.",
+  "noNotificationsYet": "No notifications yet.",
+  "notificationHub": "Notification Hub",
+  "notificationHubSubtitle": "All your privacy-related notifications in one place",
+  "notifications": "Notifications",
+  "paginationRange": "{{start}}–{{end}} of {{total}}",
+  "previous": "Previous",
+  "refreshNotifications": "Refresh notifications",
+  "requests": "Requests",
+  "system": "System",
+  "total": "Total",
+  "unread": "Unread",
+  "viewAllNotifications": "View all notifications",
+  "weeksAgo": "{{count}}w ago"
 }