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

package/src/RedactoPrivacyCenter/components/ConsentManagerPurposeCards.tsx

@@ -0,0 +1,102 @@
+import { useTranslation } from 'react-i18next';
+import { PCEmpty, PCText } from '../ui';
+import type { ConsentModalRecord, DisplayPurposeRow } from '../lib/types';
+import {
+  renderGivenDate,
+  renderMethod,
+  renderModifyButton,
+  renderStatusBadge,
+  renderValidTill,
+} from './ConsentManagerCells';
+
+type ConsentManagerPurposeCardsProps = {
+  rows: DisplayPurposeRow[];
+  onModify: (record: ConsentModalRecord) => void;
+};
+
+const toModalRecord = (row: DisplayPurposeRow): ConsentModalRecord => ({
+  ...row,
+});
+
+export function ConsentManagerPurposeCards({
+  rows,
+  onModify,
+}: ConsentManagerPurposeCardsProps) {
+  const { t } = useTranslation();
+
+  if (rows.length === 0) {
+    return (
+      <div className="pc-consent-mobile-empty">
+        <PCEmpty title={t('noData')} />
+      </div>
+    );
+  }
+
+  return (
+    <div className="pc-consent-mobile-list">
+      {rows.map((row) => (
+        <article
+          key={`${row.product_uuid}:${row.purpose_uuid}`}
+          className="pc-consent-mobile-card"
+        >
+          <div className="pc-consent-mobile-purpose-head">
+            <div style={{ minWidth: 0 }}>
+              <PCText size="sm" weight="semibold">{row.name}</PCText>
+              {row.description && (
+                <PCText size="sm" color="secondary" className="pc-consent-mobile-subtle-text">
+                  {row.description}
+                </PCText>
+              )}
+            </div>
+            {renderStatusBadge(row.status, t)}
+          </div>
+
+          <div className="pc-consent-mobile-activity-row">
+            <PCText size="sm" color="secondary" className="pc-consent-mobile-meta-label">
+              {t('product')}
+            </PCText>
+            <PCText size="sm" weight="medium">{row.product_name || '-'}</PCText>
+          </div>
+
+          {row.nominator && (
+            <div className="pc-consent-mobile-activity-row">
+              <PCText size="sm" color="secondary" className="pc-consent-mobile-meta-label">
+                {t('nominatedBy')}
+              </PCText>
+              <PCText size="sm" weight="medium">
+                {row.nominator.name || row.nominator.email || row.nominator.org_user_id}
+              </PCText>
+            </div>
+          )}
+
+          <div className="pc-consent-mobile-meta-grid">
+            <div>
+              <PCText size="sm" color="secondary" className="pc-consent-mobile-meta-label">
+                {t('givenDate')}
+              </PCText>
+              {renderGivenDate(row.given_date, { showTooltip: false })}
+            </div>
+            <div>
+              <PCText size="sm" color="secondary" className="pc-consent-mobile-meta-label">
+                {t('validTill')}
+              </PCText>
+              {renderValidTill(row, t)}
+            </div>
+            <div>
+              <PCText size="sm" color="secondary" className="pc-consent-mobile-meta-label">
+                {t('method')}
+              </PCText>
+              {renderMethod(row.method)}
+            </div>
+            <div className="pc-consent-mobile-action-cell">
+              <PCText size="sm" color="secondary" className="pc-consent-mobile-meta-label">
+                {t('action')}
+              </PCText>
+              {renderModifyButton(toModalRecord(row), onModify, t)}
+            </div>
+          </div>
+        </article>
+      ))}
+    </div>
+  );
+}

package/src/RedactoPrivacyCenter/components/ConsentManagerTableSkeleton.tsx

@@ -6,8 +6,9 @@ const getVar = (varName: string): string => `var(${varName})`;
 export const ConsentManagerTableSkeleton = () => {
   return (
     <div style={{
-      borderRadius: getVar('--pc-border-radius-md'),
+      borderRadius: `${getVar('--pc-border-radius-lg')} ${getVar('--pc-border-radius-lg')} 0 0`,
       border: `1px solid ${getVar('--pc-border-color')}`,
+      borderBottom: 'none',
       backgroundColor: getVar('--pc-bg-primary'),
     }}>
       {/* Table Header */}
@@ -44,7 +45,10 @@ export const ConsentManagerTableSkeleton = () => {
         <div
           key={index}
           style={{
-            borderBottom: `1px solid ${getVar('--pc-border-color')}`,
+            borderBottom:
+              index === SKELETON_ROW_COUNT - 1
+                ? 'none'
+                : `1px solid ${getVar('--pc-border-color')}`,
             backgroundColor: getVar('--pc-bg-primary'),
           }}
         >

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/ModifyConsentModal.tsx

@@ -19,7 +19,7 @@ export const ModifyConsentModal = ({
   const [isAccordionOpen, setIsAccordionOpen] = useState(false);
   const [selectedDataElementUuids, setSelectedDataElementUuids] = useState<string[]>([]);
 
-  const nominatorInfo = selectedRecord?.nominator_info;
+  const nominatorInfo = selectedRecord?.nominator;
   const nominatorLabel = nominatorInfo?.name || nominatorInfo?.email || nominatorInfo?.org_user_id || null;
 
   const actionConfig = useMemo(() => {
@@ -39,7 +39,10 @@ export const ModifyConsentModal = ({
       };
     }
 
-    if (status === ConsentStatusEnum.WITHDRAWN) {
+    if (
+      status === ConsentStatusEnum.WITHDRAWN ||
+      status === ConsentStatusEnum.REVOKED
+    ) {
       return {
         action: 'regrant' as ConsentAction,
         buttonLabel: t('regrantConsent'),
@@ -158,7 +161,7 @@ export const ModifyConsentModal = ({
                           fontWeight: pcStyles.fontWeightSemibold.fontWeight,
                           color: pcStyles.textPrimary.color,
                         }}>
-                          {selectedRecord.purpose}
+                          {selectedRecord.name}
                         </p>
                         <p style={{
                           textAlign: 'left',
@@ -167,7 +170,7 @@ export const ModifyConsentModal = ({
                           color: pcStyles.textSecondary.color,
                           margin: 0,
                         }}>
-                          {selectedRecord.purpose_description}
+                          {selectedRecord.description}
                         </p>
                       </div>
                       <ChevronDownIcon
@@ -309,7 +312,7 @@ export const ModifyConsentModal = ({
                 variant={actionConfig.buttonVariant}
                 onClick={() => {
                   if (selectedRecord.purpose_uuid) {
-                    const nomContact = selectedRecord.nominator_info?.email || selectedRecord.nominator_info?.org_user_id || undefined;
+                    const nomContact = selectedRecord.nominator?.email || selectedRecord.nominator?.org_user_id || undefined;
                     onManageConsent(
                       selectedRecord.purpose_uuid,
                       actionConfig.action,

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={18} />
+          </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>
+  );
+};