@redacto.io/consent-sdk-react 10.0.0-beta.1 → 10.0.0-beta.12

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

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

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

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

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

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

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

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

@@ -1,140 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import { PCActionIcon, PCSelect, PCText } from '../ui';
-import {
-  ChevronLeft,
-  ChevronRight,
-  ChevronsLeft,
-  ChevronsRight,
-} from 'lucide-react';
-import { cn } from '../utils/cn';
-import { pcStyles } from '../styles/pcStyles';
-import { PAGE_SIZE_OPTIONS } from './constant';
-import type { PaginationProps } from './types';
-
-export default function Pagination({
-  currentPage,
-  totalPages,
-  totalRecords,
-  pageSize,
-  onPageChange,
-  onPageSizeChange,
-  className,
-}: PaginationProps) {
-  const { t } = useTranslation();
-  const handlePageChange = (newPageIndex: number) => {
-    onPageChange(newPageIndex + 1);
-  };
-
-  const currentPageSizeOption = PAGE_SIZE_OPTIONS.find(opt => opt.value === pageSize) || PAGE_SIZE_OPTIONS[1];
-
-  return (
-    <div className={cn("pc-flex-responsive", className)} style={{
-      ...pcStyles.flex,
-      ...pcStyles.gapMd,
-      ...pcStyles.itemsCenter,
-      ...pcStyles.justifyBetween,
-    }}>
-      <div style={{
-        ...pcStyles.flex,
-        ...pcStyles.itemsCenter,
-        ...pcStyles.gapMd,
-        width: '100%',
-        flexShrink: 0,
-      }} className="pc-flex-responsive">
-        <div style={{ ...pcStyles.flex, ...pcStyles.itemsCenter, ...pcStyles.gapSm }}>
-          <PCText size="xs" color="secondary" className="pc-hidden-xs pc-block-sm">
-            {t('rowsPerPage')}
-          </PCText>
-          <PCSelect
-            size="sm"
-            options={PAGE_SIZE_OPTIONS}
-            value={currentPageSizeOption}
-            onChange={(v) => {
-              if (v) {
-                const newSize = Number(v.value);
-                onPageSizeChange(newSize);
-              }
-            }}
-            style={{ width: '48px' }}
-          />
-        </div>
-        <div style={{ ...pcStyles.flex, ...pcStyles.itemsCenter, ...pcStyles.gapSm }}>
-          <PCText size="xs" color="secondary">
-            {t('totalRecords', { count: totalRecords })}
-          </PCText>
-        </div>
-      </div>
-      <div style={{
-        ...pcStyles.flex,
-        ...pcStyles.justifyEnd,
-        ...pcStyles.itemsCenter,
-        ...pcStyles.gapSm,
-        width: '100%',
-      }} className="pc-flex-responsive">
-        <div style={{ ...pcStyles.flex, ...pcStyles.itemsCenter, ...pcStyles.gapSm }}>
-          <PCText size="xs" color="secondary">
-            {t('pageOf', { current: totalPages === 0 ? 0 : currentPage, total: totalPages })}
-          </PCText>
-        </div>
-        <div style={{
-          display: 'grid',
-          gridTemplateColumns: 'repeat(4, 1fr)',
-          gap: '0.375rem',
-        }}>
-          <PCActionIcon
-            size="sm"
-            variant="outline"
-            aria-label={t('goToFirstPage')}
-            onClick={() => handlePageChange(0)}
-            disabled={currentPage === 1}
-            style={{
-              borderRadius: '0.5rem',
-              boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-            }}
-          >
-            <ChevronsLeft size={14} />
-          </PCActionIcon>
-          <PCActionIcon
-            size="sm"
-            variant="outline"
-            aria-label={t('goToPreviousPage')}
-            onClick={() => handlePageChange(currentPage - 2)}
-            disabled={currentPage === 1}
-            style={{
-              borderRadius: '0.5rem',
-              boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-            }}
-          >
-            <ChevronLeft size={14} />
-          </PCActionIcon>
-          <PCActionIcon
-            size="sm"
-            variant="outline"
-            aria-label={t('goToNextPage')}
-            onClick={() => handlePageChange(currentPage)}
-            disabled={totalRecords === 0 || currentPage === totalPages}
-            style={{
-              borderRadius: '0.5rem',
-              boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-            }}
-          >
-            <ChevronRight size={14} />
-          </PCActionIcon>
-          <PCActionIcon
-            size="sm"
-            variant="outline"
-            aria-label={t('goToLastPage')}
-            onClick={() => handlePageChange(totalPages - 1)}
-            disabled={totalRecords === 0 || currentPage === totalPages}
-            style={{
-              borderRadius: '0.5rem',
-              boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-            }}
-          >
-            <ChevronsRight size={14} />
-          </PCActionIcon>
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/RedactoPrivacyCenter/components/PrivacyCenterEmptyState.tsx

@@ -1,76 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import character from '../assets/character.svg';
-import { PCText, PCTitle } from '../ui';
-import { pcStyles } from '../styles/pcStyles';
-import { getVar } from '../lib/utils';
-
-/**
- * Full-screen content shown (in place of the consent manager / tabs) when the
- * user has no data anywhere — no consents, no data-request cases, no activity.
- * Purely presentational: a friendly illustration, heading, and subtitle.
- */
-export function PrivacyCenterEmptyState() {
-  const { t } = useTranslation();
-
-  return (
-    <div
-      style={{
-        ...pcStyles.flex,
-        ...pcStyles.flexCol,
-        ...pcStyles.itemsCenter,
-        ...pcStyles.justifyCenter,
-        ...pcStyles.textCenter,
-        width: '100%',
-        maxWidth: 460,
-        margin: '0 auto',
-        minHeight: 'min(62vh, 540px)',
-        paddingTop: getVar('--pc-spacing-2xl'),
-        paddingBottom: getVar('--pc-spacing-2xl'),
-        gap: getVar('--pc-spacing-xl'),
-      }}
-    >
-      <div
-        aria-hidden="true"
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          width: 168,
-          height: 168,
-          borderRadius: '50%',
-          background:
-            'color-mix(in srgb, var(--pc-primary) 8%, var(--pc-bg-shell))',
-          flexShrink: 0,
-        }}
-      >
-        <img
-          src={character}
-          alt=""
-          style={{ width: 104, height: 'auto', display: 'block' }}
-        />
-      </div>
-
-      <div
-        style={{
-          ...pcStyles.flex,
-          ...pcStyles.flexCol,
-          ...pcStyles.itemsCenter,
-          gap: getVar('--pc-spacing-sm'),
-        }}
-      >
-        <PCTitle as="h2" style={{ margin: 0 }}>
-          {t('noDataTitle')}
-        </PCTitle>
-        <PCText
-          as="p"
-          size="base"
-          color="secondary"
-          align="center"
-          style={{ margin: 0, maxWidth: 400 }}
-        >
-          {t('noDataDescription')}
-        </PCText>
-      </div>
-    </div>
-  );
-}

package/src/RedactoPrivacyCenter/components/PrivacyCenterSessionExpired.tsx

@@ -1,97 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import { Clock } from 'lucide-react';
-import { PCButton, PCText, PCTitle } from '../ui';
-import { pcStyles } from '../styles/pcStyles';
-import { getVar } from '../lib/utils';
-import { usePrivacyCenterExitAction } from './AppShell/usePrivacyCenterExitAction';
-
-type PrivacyCenterSessionExpiredProps = {
-  onBack?: 'back' | 'signout';
-};
-
-/**
- * Terminal screen shown when the session has expired (the refresh token is
- * dead). Purely presentational — no data fetching happens behind it. Mirrors
- * PrivacyCenterEmptyState's layout. The exit is MANUAL: an inline CTA (and the
- * top-bar UserMenu item) reuse the consumer's existing `onBack` prop; nothing
- * navigates automatically. When `onBack` is absent, only the message shows.
- */
-export function PrivacyCenterSessionExpired({
-  onBack,
-}: PrivacyCenterSessionExpiredProps) {
-  const { t } = useTranslation();
-  const { enabled, handleAction, label, Icon } = usePrivacyCenterExitAction(onBack);
-
-  return (
-    <div
-      style={{
-        ...pcStyles.flex,
-        ...pcStyles.flexCol,
-        ...pcStyles.itemsCenter,
-        ...pcStyles.justifyCenter,
-        ...pcStyles.textCenter,
-        width: '100%',
-        maxWidth: 460,
-        margin: '0 auto',
-        minHeight: 'min(62vh, 540px)',
-        paddingTop: getVar('--pc-spacing-2xl'),
-        paddingBottom: getVar('--pc-spacing-2xl'),
-        gap: getVar('--pc-spacing-xl'),
-      }}
-    >
-      <div
-        aria-hidden="true"
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          width: 168,
-          height: 168,
-          borderRadius: '50%',
-          background:
-            'color-mix(in srgb, var(--pc-primary) 8%, var(--pc-bg-shell))',
-          flexShrink: 0,
-        }}
-      >
-        <Clock size={72} strokeWidth={1.5} color={getVar('--pc-primary')} />
-      </div>
-
-      <div
-        style={{
-          ...pcStyles.flex,
-          ...pcStyles.flexCol,
-          ...pcStyles.itemsCenter,
-          gap: getVar('--pc-spacing-sm'),
-        }}
-      >
-        <PCTitle as="h2" style={{ margin: 0 }}>
-          {t('sessionExpiredTitle')}
-        </PCTitle>
-        <PCText
-          as="p"
-          size="base"
-          color="secondary"
-          align="center"
-          style={{ margin: 0, maxWidth: 400 }}
-        >
-          {t('sessionExpiredDescription')}
-        </PCText>
-      </div>
-
-      {enabled && (
-        <PCButton
-          variant="primary"
-          onClick={handleAction}
-          style={{
-            display: 'inline-flex',
-            alignItems: 'center',
-            gap: 8,
-          }}
-        >
-          <Icon size={16} strokeWidth={2} />
-          <span>{label}</span>
-        </PCButton>
-      )}
-    </div>
-  );
-}