@redacto.io/consent-sdk-react 5.2.0 → 6.0.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,9 @@ 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';
+import { Globe2 } from 'lucide-react';
 
 export default function PrivacyCenterLayout({
   children,
@@ -23,7 +24,7 @@ export default function PrivacyCenterLayout({
 }: PrivacyCenterLayoutProps) {
   const { t } = useTranslation();
   const { currentPage } = useInternalNavigation();
-  const { pageChromeOverride } = usePageChrome();
+  const { pageChromeOverride, headerStatus } = usePageChrome();
   const [locale, setLocale] = useState(i18n.language);
   const pageChrome = pageChromeOverride ?? PAGE_CHROME_BY_PAGE[currentPage];
 
@@ -59,12 +60,11 @@ export default function PrivacyCenterLayout({
             flex: 1,
             minWidth: 0,
             backgroundColor: getVar('--pc-bg-shell'),
+            minHeight: 0,
           }} className="pc-content-wrapper">
             {/* Top Navbar with Theme Toggle */}
             <nav style={{
-              position: 'fixed',
-              top: 0,
-              zIndex: 50,
+              position: 'relative',
               ...pcStyles.flex,
               ...pcStyles.itemsCenter,
               ...pcStyles.justifyBetween,
@@ -74,8 +74,8 @@ export default function PrivacyCenterLayout({
               paddingRight: 'var(--pc-navbar-padding-right, 0.75rem)',
               paddingTop: 'var(--pc-navbar-padding-top, 0.625rem)',
               paddingBottom: 'var(--pc-navbar-padding-bottom, 0.625rem)',
-              transition: 'background-color 0.3s ease, border-color 0.3s ease, width 0.3s ease, left 0.3s ease',
-              willChange: 'background-color, border-color, width, left',
+              transition: 'background-color 0.3s ease, border-color 0.3s ease',
+              willChange: 'background-color, border-color',
             }} className="pc-navbar">
               <div
                 className="pc-navbar-page-meta"
@@ -85,32 +85,76 @@ export default function PrivacyCenterLayout({
                   justifyContent: 'center',
                   minWidth: 0,
                   flex: 1,
-                  gap: '0.125rem',
+                  gap: '0.1875rem',
                 }}
               >
-                <p
-                  className="pc-navbar-title"
-                  style={{
-                    margin: 0,
-                    color: getVar('--pc-text-primary'),
-                    fontSize: '1rem',
-                    fontWeight: 600,
-                    lineHeight: 1.3,
-                    whiteSpace: 'nowrap',
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis',
-                  }}
-                >
-                  {t(pageChrome.titleKey)}
-                </p>
+                <div style={{ display: 'flex', alignItems: 'center', gap: '0.625rem', minWidth: 0 }}>
+                  <p
+                    className="pc-navbar-title"
+                    style={{
+                      margin: 0,
+                      color: getVar('--pc-text-primary'),
+                      fontSize: '1.0625rem',
+                      fontWeight: 700,
+                      lineHeight: 1.2,
+                      whiteSpace: 'nowrap',
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                    }}
+                  >
+                    {t(pageChrome.titleKey)}
+                  </p>
+                  {headerStatus && (
+                    <span
+                      style={{
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        flexShrink: 0,
+                        borderRadius: '9999px',
+                        gap: '0.375rem',
+                        padding: '0.25rem 0.75rem',
+                        fontSize: '0.625rem',
+                        fontWeight: 600,
+                        lineHeight: 1.2,
+                        border: `1px solid ${
+                          headerStatus.variant === 'success'
+                            ? 'rgba(16, 185, 129, 0.35)'
+                            : 'rgba(245, 158, 11, 0.35)'
+                        }`,
+                        backgroundColor:
+                          headerStatus.variant === 'success'
+                            ? 'rgba(16, 185, 129, 0.1)'
+                            : '#fff7ed',
+                        color:
+                          headerStatus.variant === 'success'
+                            ? getVar('--pc-success')
+                            : '#d97706',
+                      }}
+                    >
+                      <span
+                        aria-hidden="true"
+                        style={{
+                          width: '0.4375rem',
+                          height: '0.4375rem',
+                          borderRadius: '9999px',
+                          backgroundColor:
+                            headerStatus.variant === 'success'
+                              ? getVar('--pc-success')
+                              : '#d97706',
+                        }}
+                      />
+                      {headerStatus.label}
+                    </span>
+                  )}
+                </div>
                 {pageChrome.descriptionKey && (
                   <p
                     className="pc-navbar-description"
                     style={{
                       margin: 0,
                       color: getVar('--pc-text-secondary'),
-                      fontSize: '0.8125rem',
-                      lineHeight: 1.35,
+                      fontSize: '0.75rem',
+                      lineHeight: 1.2,
                       whiteSpace: 'nowrap',
                       overflow: 'hidden',
                       textOverflow: 'ellipsis',
@@ -123,52 +167,57 @@ export default function PrivacyCenterLayout({
               <div style={{
                 display: 'flex',
                 alignItems: 'center',
-                gap: '0.5rem',
+                gap: '0.375rem',
                 flexShrink: 0,
               }} className="pc-navbar-actions">
                 <PCSelect
+                  className="pc-navbar-language-select"
                   size="sm"
                   searchable
+                  prefix={<Globe2 size={12} strokeWidth={1.8} />}
                   searchPlaceholder={t('searchPlaceholder')}
                   noOptionsMessage={t('noOptionsFound')}
                   style={{
                     width: 'auto',
-                    minWidth: '92px',
-                    maxWidth: '136px',
+                    minWidth: '120px',
+                    maxWidth: 'min(65vw, 320px)',
                     flexShrink: 0,
                   }}
                   options={languageOptions}
                   value={languageOptions.find((opt) => opt.value === locale) || null}
                   onChange={handleLanguageChange}
                 />
-                <ThemeToggle />
+                <NotificationBell />
+                <ThemeToggle className="pc-navbar-icon-btn" />
               </div>
             </nav>
             <div style={{
               ...pcStyles.flex,
               ...pcStyles.flexCol,
-              flexGrow: 1,
+              flex: 1,
+              minHeight: 0,
               paddingLeft: 'var(--pc-content-padding-left, 0.75rem)',
               paddingRight: 'var(--pc-content-padding-right, 0.75rem)',
-              paddingTop: 'var(--pc-content-padding-top, 4rem)',
+              paddingTop: 'var(--pc-content-padding-top, 0)',
               minWidth: 0,
               backgroundColor: getVar('--pc-bg-shell'),
             }} className="pc-content-container">
               <div style={{
-                minHeight: '100vh',
+                display: 'flex',
+                flexDirection: 'column',
+                flex: 1,
+                minHeight: 0,
                 width: '100%',
               }}>
                 <div style={{
                   ...pcStyles.flex,
                   ...pcStyles.flexCol,
-                  height: '100%',
-                  minHeight: '100vh',
+                  flex: 1,
+                  minHeight: 0,
                   ...pcStyles.justifyBetween,
-                  ...pcStyles.gapMd,
-                  paddingLeft: '0.5rem',
-                  paddingRight: '0.5rem',
-                  paddingTop: '1rem',
-                  paddingBottom: '1rem',
+                  ...pcStyles.gapSm,
+                  paddingTop: '0.625rem',
+                  paddingBottom: '0.75rem',
                 }}>
                   <div className={contentClassName} style={{ width: '100%' }}>{children}</div>
                   <div style={{
@@ -198,17 +247,14 @@ export default function PrivacyCenterLayout({
         .pc-navbar {
           --pc-navbar-padding-left: 0.75rem;
           --pc-navbar-padding-right: 0.75rem;
-          --pc-navbar-padding-top: 0.625rem;
-          --pc-navbar-padding-bottom: 0.625rem;
-          left: var(--pc-sidebar-offset) !important;
-          width: calc(100% - var(--pc-sidebar-offset)) !important;
-          transition: left 0.3s ease, width 0.3s ease !important;
+          --pc-navbar-padding-top: 0.875rem;
+          --pc-navbar-padding-bottom: 0.75rem;
         }
 
         .pc-content-container {
           --pc-content-padding-left: 0.75rem;
           --pc-content-padding-right: 0.75rem;
-          --pc-content-padding-top: 4rem;
+          --pc-content-padding-top: 0;
         }
 
         .pc-navbar-page-meta {
@@ -246,7 +292,7 @@ export default function PrivacyCenterLayout({
           .pc-navbar {
             --pc-navbar-padding-left: 3.75rem;
             --pc-navbar-padding-right: 0.75rem;
-            --pc-navbar-padding-top: 0.625rem;
+            --pc-navbar-padding-top: 0.75rem;
             --pc-navbar-padding-bottom: 0.625rem;
           }
           .pc-navbar-description {
@@ -260,21 +306,21 @@ export default function PrivacyCenterLayout({
             gap: 0.375rem;
           }
           .pc-content-container {
-            --pc-content-padding-top: 4rem;
+            --pc-content-padding-top: 0;
           }
         }
         @media (min-width: 768px) {
           .pc-navbar {
-            --pc-navbar-padding-left: 1rem;
-            --pc-navbar-padding-right: 1rem;
-            --pc-navbar-padding-top: 0.75rem;
+            --pc-navbar-padding-left: 1.25rem;
+            --pc-navbar-padding-right: 1.25rem;
+            --pc-navbar-padding-top: 0.875rem;
             --pc-navbar-padding-bottom: 0.75rem;
           }
           .pc-navbar-description {
             display: block;
           }
           .pc-content-container {
-            --pc-content-padding-top: 4.5rem;
+            --pc-content-padding-top: 0;
           }
         }
         @media (min-width: 768px) {
@@ -282,19 +328,23 @@ export default function PrivacyCenterLayout({
             font-size: 1.0625rem;
           }
           .pc-navbar-description {
-            font-size: 0.8125rem;
+            font-size: 0.6875rem;
           }
           .pc-content-container {
             --pc-content-padding-left: 1.25rem;
             --pc-content-padding-right: 1.25rem;
-            --pc-content-padding-top: 4.5rem;
+            --pc-content-padding-top: 0;
           }
         }
         @media (min-width: 1024px) {
+          .pc-navbar {
+            --pc-navbar-padding-left: 1.5rem;
+            --pc-navbar-padding-right: 1.5rem;
+          }
           .pc-content-container {
             --pc-content-padding-left: 1.5rem;
             --pc-content-padding-right: 1.5rem;
-            --pc-content-padding-top: 4.75rem;
+            --pc-content-padding-top: 0;
           }
         }
       `}</style>

package/src/RedactoPrivacyCenter/components/types.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import type { CaseRequest, UserConsent } from '../lib/types';
+import type { CaseRequest, ConsentModalRecord } from '../lib/types';
 
 export type TableColumnAlign = 'left' | 'center' | 'right';
 
@@ -61,7 +61,7 @@ export type ConsentManagerProps = {
 export type ModifyConsentModalProps = {
   isOpen: boolean;
   onClose: () => void;
-  selectedRecord: UserConsent | null;
+  selectedRecord: ConsentModalRecord | null;
   isLoading: boolean;
   onManageConsent: (
     purposeId: string,
@@ -71,6 +71,3 @@ export type ModifyConsentModalProps = {
   ) => void;
 };
 
-export type UseConsentManagerColumnsProps = {
-  onOpenModal: (record: UserConsent) => void;
-};

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/context/PageChromeContext.tsx

@@ -12,10 +12,17 @@ export type PageChromeOverride = {
   descriptionKey?: string;
 };
 
+export type PageHeaderStatus = {
+  label: string;
+  variant: 'success' | 'warning';
+};
+
 type PageChromeContextValue = {
   pageChromeOverride: PageChromeOverride | null;
   setPageChromeOverride: (override: PageChromeOverride | null) => void;
   clearPageChromeOverride: () => void;
+  headerStatus: PageHeaderStatus | null;
+  setHeaderStatus: (status: PageHeaderStatus | null) => void;
 };
 
 const PageChromeContext = createContext<PageChromeContextValue | null>(null);
@@ -23,6 +30,7 @@ const PageChromeContext = createContext<PageChromeContextValue | null>(null);
 export function PageChromeProvider({ children }: { children: ReactNode }) {
   const [pageChromeOverride, setPageChromeOverrideState] =
     useState<PageChromeOverride | null>(null);
+  const [headerStatus, setHeaderStatusState] = useState<PageHeaderStatus | null>(null);
 
   const setPageChromeOverride = useCallback(
     (override: PageChromeOverride | null) => {
@@ -35,13 +43,25 @@ export function PageChromeProvider({ children }: { children: ReactNode }) {
     setPageChromeOverrideState(null);
   }, []);
 
+  const setHeaderStatus = useCallback((status: PageHeaderStatus | null) => {
+    setHeaderStatusState(status);
+  }, []);
+
   const value = useMemo(
     () => ({
       pageChromeOverride,
       setPageChromeOverride,
       clearPageChromeOverride,
+      headerStatus,
+      setHeaderStatus,
     }),
-    [pageChromeOverride, setPageChromeOverride, clearPageChromeOverride]
+    [
+      pageChromeOverride,
+      setPageChromeOverride,
+      clearPageChromeOverride,
+      headerStatus,
+      setHeaderStatus,
+    ]
   );
 
   return (