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

package/src/RedactoPrivacyCenter/components/activitiesColumns.tsx

@@ -0,0 +1,141 @@
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { createColumnHelper } from '@tanstack/react-table';
+import { PCText, PCTooltip } from '../ui';
+import { pcStyles } from '../styles/pcStyles';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import type { Activity } from '../lib/types';
+import StatusBadge from '../ui/StatusBadge';
+import { getActivityTypeStatus, formatActivityType } from '../lib/utils';
+import {
+  ACTIVITY_COLUMN_SIZES,
+  ACTIVITY_DESCRIPTION_TRUNCATE_LENGTH,
+  ACTIVITY_DATE_FORMATS,
+} from '../lib/constants';
+
+dayjs.extend(relativeTime);
+
+const columnHelper = createColumnHelper<Activity>();
+
+export const useActivitiesColumns = () => {
+  const { t } = useTranslation();
+  return useMemo(
+    () => [
+  columnHelper.accessor('title', {
+    id: 'title',
+    minSize: ACTIVITY_COLUMN_SIZES.TITLE,
+    header: t('activity'),
+    cell: (info) => {
+      const row = info.row.original;
+      const title = row.title_display || info.getValue();
+      return (
+        <div style={{ paddingTop: pcStyles.pySm.paddingTop, paddingBottom: pcStyles.pySm.paddingBottom }}>
+          <PCText size="sm" weight="medium" color="primary">
+            {title}
+          </PCText>
+        </div>
+      );
+    },
+    enableSorting: false,
+    enableColumnFilter: false,
+  }),
+  columnHelper.accessor('activity_type', {
+    id: 'activity_type',
+    minSize: ACTIVITY_COLUMN_SIZES.ACTIVITY_TYPE,
+    header: t('activityType'),
+    cell: (info) => {
+      const activityType = info.getValue();
+      const row = info.row.original;
+      const displayType = row.activity_type_display || formatActivityType(activityType);
+      const status = getActivityTypeStatus(activityType);
+
+      return (
+        <div style={{ paddingTop: pcStyles.pySm.paddingTop, paddingBottom: pcStyles.pySm.paddingBottom }}>
+          <StatusBadge status={status} className="pc-status-badge">
+            {displayType}
+          </StatusBadge>
+        </div>
+      );
+    },
+    enableSorting: false,
+    enableColumnFilter: false,
+  }),
+  columnHelper.accessor('description', {
+    id: 'description',
+    minSize: ACTIVITY_COLUMN_SIZES.DESCRIPTION,
+    header: t('activityDescription'),
+    cell: (info) => {
+      const row = info.row.original;
+      const description = row.description_display || info.getValue();
+      const truncatedDescription =
+        description.length > ACTIVITY_DESCRIPTION_TRUNCATE_LENGTH
+          ? `${description.substring(0, ACTIVITY_DESCRIPTION_TRUNCATE_LENGTH)}...`
+          : description;
+
+      return (
+        <div style={{ paddingTop: pcStyles.pySm.paddingTop, paddingBottom: pcStyles.pySm.paddingBottom }}>
+          {description.length > ACTIVITY_DESCRIPTION_TRUNCATE_LENGTH ? (
+            <PCTooltip content={description} placement="top">
+              <span style={{ display: 'block', cursor: 'help' }}>
+                <PCText size="sm" color="secondary" style={{
+                  display: '-webkit-box',
+                  WebkitLineClamp: 2,
+                  WebkitBoxOrient: 'vertical',
+                  overflow: 'hidden',
+                }}>
+                  {truncatedDescription}
+                </PCText>
+              </span>
+            </PCTooltip>
+          ) : (
+            <PCText size="sm" color="secondary">
+              {description}
+            </PCText>
+          )}
+        </div>
+      );
+    },
+    enableSorting: false,
+    enableColumnFilter: false,
+  }),
+  columnHelper.accessor('timestamp', {
+    id: 'timestamp',
+    minSize: ACTIVITY_COLUMN_SIZES.TIMESTAMP,
+    header: t('timestamp'),
+    cell: (info) => {
+      const timestamp = info.getValue();
+      const date = dayjs(timestamp);
+      const formattedDateTime = date.format(ACTIVITY_DATE_FORMATS.DISPLAY);
+      const relativeTime = date.fromNow();
+
+      return (
+        <div style={{ paddingTop: pcStyles.pySm.paddingTop, paddingBottom: pcStyles.pySm.paddingBottom }}>
+          <PCTooltip
+            content={date.format(ACTIVITY_DATE_FORMATS.TOOLTIP)}
+            placement="top"
+          >
+            <div style={{
+              ...pcStyles.flex,
+              ...pcStyles.flexCol,
+              minWidth: '120px',
+              gap: '0.125rem',
+            }}>
+              <PCText size="sm" weight="medium" color="primary">
+                {formattedDateTime}
+              </PCText>
+              <PCText size="sm" color="secondary" style={{ fontSize: '0.75rem' }}>
+                {relativeTime}
+              </PCText>
+            </div>
+          </PCTooltip>
+        </div>
+      );
+    },
+    enableSorting: false,
+    enableColumnFilter: false,
+  }),
+],
+    [t]
+  );
+};

package/src/RedactoPrivacyCenter/components/caseHistoryColumns.tsx

@@ -0,0 +1,159 @@
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PCText, PCActionIcon, PCTooltip, PCBadge } from '../ui';
+import { pcStyles } from '../styles/pcStyles';
+import { FiDownload } from 'react-icons/fi';
+import { createColumnHelper } from '@tanstack/react-table';
+import type { CaseRequest } from '../lib/types';
+import { formatDate } from './utils';
+
+const getVar = (varName: string): string => `var(${varName})`;
+const columnHelper = createColumnHelper<CaseRequest>();
+
+const getCaseStatusVariant = (status: string): 'success' | 'error' | 'warning' | 'info' | 'secondary' => {
+  const n = status.toLowerCase().replace(/_/g, '');
+  if (n === 'completed') return 'success';
+  if (n === 'rejected' || n === 'declined') return 'error';
+  if (n === 'processing' || n === 'inprogress' || n === 'expired') return 'warning';
+  if (n === 'initiated') return 'info';
+  return 'secondary';
+};
+const formatCaseStatus = (s: string) =>
+  s.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
+
+export const useCaseHistoryColumns = () => {
+  const { t } = useTranslation();
+  return useMemo(
+    () => [
+      columnHelper.accessor('case_id', {
+        id: 'case_id',
+        size: 150,
+        minSize: 120,
+        header: t('caseID'),
+        meta: { align: 'left' },
+        cell: (info) => (
+          <div style={{ width: '100%', minWidth: '100px', textAlign: 'left' }}>
+            <PCText size="sm" weight="medium" color="primary">
+              {info.getValue()}
+            </PCText>
+            <PCText
+              size="sm"
+              color="secondary"
+              style={{
+                marginTop: pcStyles.mtXs.marginTop,
+                display: 'block',
+                fontSize: '0.75rem',
+              }}
+            >
+              {formatDate(info.row.original.created_at)}
+            </PCText>
+          </div>
+        ),
+        enableSorting: false,
+        enableColumnFilter: false,
+      }),
+      columnHelper.accessor('request_type', {
+        id: 'request_type',
+        size: 150,
+        minSize: 120,
+        header: t('requestType'),
+        meta: { align: 'left' },
+        cell: (info) => {
+          const row = info.row.original;
+          const displayValue = row.request_type_display || info.getValue().replace('_', ' ');
+          return (
+            <PCText
+              size="sm"
+              style={{
+                textAlign: 'left',
+                textTransform: row.request_type_display ? 'none' : 'capitalize',
+                width: '100%',
+              }}
+            >
+              {displayValue}
+            </PCText>
+          );
+        },
+        enableSorting: false,
+        enableColumnFilter: false,
+      }),
+      columnHelper.accessor('status', {
+        id: 'status',
+        size: 120,
+        minSize: 100,
+        header: t('status'),
+        meta: { align: 'left' },
+        cell: (info) => {
+          const row = info.row.original;
+          const displayStatus = row.status_display || formatCaseStatus(info.getValue());
+          return (
+            <div style={{ ...pcStyles.flex, ...pcStyles.itemsCenter, ...pcStyles.justifyStart, width: '100%' }}>
+              <PCBadge variant={getCaseStatusVariant(info.getValue())} size="sm" className="pc-status-badge">
+                {displayStatus}
+              </PCBadge>
+            </div>
+          );
+        },
+        enableSorting: false,
+        enableColumnFilter: false,
+      }),
+      columnHelper.accessor('created_at', {
+        id: 'created_at',
+        size: 180,
+        minSize: 140,
+        header: t('submittedOn'),
+        meta: { align: 'left' },
+        cell: (info) => (
+          <PCText
+            size="sm"
+            color="secondary"
+            style={{
+              textAlign: 'left',
+              fontSize: '0.875rem',
+              width: '100%',
+            }}
+          >
+            {formatDate(info.getValue())}
+          </PCText>
+        ),
+        enableSorting: false,
+        enableColumnFilter: false,
+      }),
+      columnHelper.display({
+        id: 'action',
+        size: 100,
+        minSize: 80,
+        header: t('action'),
+        meta: { align: 'right' },
+        enableSorting: false,
+        enableColumnFilter: false,
+        cell: () => {
+          return (
+            <div style={{
+              ...pcStyles.flex,
+              ...pcStyles.justifyEnd,
+              ...pcStyles.gapXs,
+              width: '100%',
+            }}>
+              <PCTooltip content={t('downloadResponse')}>
+                <PCActionIcon
+                  variant="outline"
+                  size="sm"
+                  disabled={true}
+                  style={{
+                    color: getVar('--pc-text-secondary'),
+                    opacity: 0.5,
+                  }}
+                  aria-label={t('downloadResponse')}
+                >
+                  <FiDownload size={16} />
+                </PCActionIcon>
+              </PCTooltip>
+            </div>
+          );
+        },
+      }),
+    ],
+    [t]
+  );
+};

package/src/RedactoPrivacyCenter/components/constant.ts

@@ -0,0 +1,16 @@
+export const GRIEVANCE_TAB_IDS = {
+  ALL: 'all',
+  PROCESSING: 'processing',
+  COMPLETED: 'completed',
+  REJECTED: 'rejected',
+} as const;
+
+// Re-export shared table configuration
+export {
+  PAGE_SIZE_OPTIONS,
+  INITIAL_PAGE,
+  INITIAL_PAGE_SIZE,
+} from '../config/table';
+
+
+export const MAX_DISPLAYED_PURPOSE_NAMES_IN_ERASURE_MODAL = 3;

package/src/RedactoPrivacyCenter/components/types.ts

@@ -0,0 +1,76 @@
+import type { ReactNode } from 'react';
+import type { CaseRequest, UserConsent } from '../lib/types';
+
+export type TableColumnAlign = 'left' | 'center' | 'right';
+
+export type TableColumnMeta = {
+  align?: TableColumnAlign;
+};
+
+export type PrivacyCenterLayoutProps = {
+  children: ReactNode;
+  sidebarClassName?: string;
+  contentClassName?: string;
+  onBack?: 'back' | 'signout';
+};
+
+export type CaseHistoryProps = {
+  onCreateRequest: () => void;
+  isPopup?: boolean;
+  onClose?: () => void;
+};
+
+export type CaseDetailsModalProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  selectedCase: CaseRequest | null;
+};
+
+export type RequestSubmitProps = Readonly<{
+  caseId: string;
+  contact: string;
+  onCreateRequest: () => void;
+  revokeConsentOnFulfilment?: boolean;
+  revokedPurposeNames?: string;
+}>;
+
+export type PaginationProps = {
+  currentPage: number;
+  totalPages: number;
+  totalRecords: number;
+  pageSize: number;
+  onPageChange: (page: number) => void;
+  onPageSizeChange: (size: number) => void;
+  className?: string;
+};
+
+export type StatusFilterOption = {
+  label: string;
+  value: string;
+};
+
+export type ProductFilterOption = {
+  label: string;
+  value: string;
+};
+
+export type ConsentManagerProps = {
+  variant?: 'modern' | 'minimal';
+};
+
+export type ModifyConsentModalProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  selectedRecord: UserConsent | null;
+  isLoading: boolean;
+  onManageConsent: (
+    purposeId: string,
+    action: import('../lib/types').ConsentAction,
+    nominatorContact?: string,
+    dataElementUuids?: string[]
+  ) => void;
+};
+
+export type UseConsentManagerColumnsProps = {
+  onOpenModal: (record: UserConsent) => void;
+};

package/src/RedactoPrivacyCenter/components/utils.tsx

@@ -0,0 +1,10 @@
+import { getStatusColor as getSharedStatusColor } from '../utils/status';
+import { formatDateShort } from '../utils/date';
+
+// Re-export shared utilities with case-specific naming
+export const getStatusColor = (status: string) => {
+    return getSharedStatusColor({ status });
+};
+
+// Re-export shared date formatting
+export const formatDate = formatDateShort;

package/src/RedactoPrivacyCenter/config/routes.ts

@@ -0,0 +1,9 @@
+export const routes = {
+  cmp: {
+    privacyCenter: {
+      home: '/privacy-center',
+      signIn: (slug: string) => `/privacy-center/${slug}/sign-in`,
+      dashboard: (slug: string) => `/privacy-center/${slug}/home`,
+    },
+  },
+};

package/src/RedactoPrivacyCenter/config/table.ts

@@ -0,0 +1,25 @@
+/**
+ * Unified table and pagination configuration constants
+ */
+
+export const DEFAULT_PAGE = 1;
+export const DEFAULT_PAGE_SIZE = 10;
+export const INITIAL_PAGE = 1;
+export const INITIAL_PAGE_SIZE = 10;
+
+export const PAGE_SIZE_OPTIONS = [
+  { value: 10, label: '10' },
+  { value: 15, label: '15' },
+  { value: 20, label: '20' },
+  { value: 25, label: '25' },
+  { value: 50, label: '50' },
+  { value: 100, label: '100' },
+] as const;
+
+export const TABLE_CONFIG = {
+  pageSize: DEFAULT_PAGE_SIZE,
+  maxDisplayPurposes: 3,
+} as const;
+
+export const SEARCH_DEBOUNCE_DELAY = 500;
+export const SKELETON_ROW_COUNT = 5;

package/src/RedactoPrivacyCenter/context/AuthContext.tsx

@@ -0,0 +1,137 @@
+import { createContext, useContext, useState, useEffect, useCallback, useMemo, type ReactNode } from 'react';
+import { setRefreshTokenCookie, decodeJwtToken } from '../lib/utils';
+import type { AuthContextValue } from './types';
+
+export type { AuthContextValue } from './types';
+
+const AuthContext = createContext<AuthContextValue | null>(null);
+
+interface AuthProviderProps {
+  children: ReactNode;
+  accessToken: string;
+  refreshToken: string;
+  onError: (error: Error) => boolean;
+}
+
+/**
+ * Extract and store organization/auth data from JWT token to sessionStorage
+ * This makes the SDK self-sufficient - it doesn't depend on host app to set these values
+ */
+const syncJwtDataToSessionStorage = (accessToken: string): void => {
+  if (typeof window === 'undefined') return;
+
+  const decoded = decodeJwtToken(accessToken);
+  if (!decoded) {
+    return;
+  }
+
+  // Extract email from JWT (contact or primary_email), fall back to existing sources
+  const email = decoded.contact || decoded.primary_email
+    || sessionStorage.getItem('email')
+    || (typeof localStorage !== 'undefined' ? localStorage.getItem('userEmail') : null);
+  if (email && typeof email === 'string') {
+    sessionStorage.setItem('email', email);
+  }
+
+  // Extract organization UUID
+  const orgUuid = decoded.organisation_uuid;
+  if (orgUuid && typeof orgUuid === 'string') {
+    sessionStorage.setItem('pc_org_id', orgUuid);
+  }
+
+  // Extract workspace UUID
+  const workspaceUuid = decoded.workspace_uuid;
+  if (workspaceUuid && typeof workspaceUuid === 'string') {
+    sessionStorage.setItem('pc_workspace_id', workspaceUuid);
+  }
+
+  // Extract organization slug
+  const orgSlug = decoded.organisation_slug;
+  if (orgSlug && typeof orgSlug === 'string') {
+    sessionStorage.setItem('pc_org_slug', orgSlug);
+  }
+};
+
+export const AuthProvider = ({
+  children,
+  accessToken: initialAccessToken,
+  refreshToken: initialRefreshToken,
+  onError,
+}: AuthProviderProps) => {
+  // Sync to sessionStorage synchronously during initialization so child
+  // components (ConsentManager, SideBarPC) find the data when they mount.
+  // useEffect runs AFTER children render — too late for components that
+  // read sessionStorage during their render phase.
+  const [accessToken, setAccessToken] = useState(() => {
+    if (initialAccessToken && typeof initialAccessToken === 'string' && initialAccessToken.trim() !== '') {
+      if (typeof window !== 'undefined') {
+        sessionStorage.setItem('access_token', initialAccessToken);
+        syncJwtDataToSessionStorage(initialAccessToken);
+      }
+    }
+    return initialAccessToken;
+  });
+  const [refreshToken, setRefreshToken] = useState(() => {
+    if (initialRefreshToken && typeof initialRefreshToken === 'string' && initialRefreshToken.trim() !== '') {
+      if (typeof window !== 'undefined') {
+        setRefreshTokenCookie(initialRefreshToken);
+      }
+    }
+    return initialRefreshToken;
+  });
+
+  // Re-sync when props change (for token refresh scenarios)
+  useEffect(() => {
+    if (initialAccessToken && typeof initialAccessToken === 'string' && initialAccessToken.trim() !== '') {
+      setAccessToken(initialAccessToken);
+      if (typeof window !== 'undefined') {
+        sessionStorage.setItem('access_token', initialAccessToken);
+        syncJwtDataToSessionStorage(initialAccessToken);
+      }
+    }
+  }, [initialAccessToken]);
+
+  useEffect(() => {
+    if (initialRefreshToken && typeof initialRefreshToken === 'string' && initialRefreshToken.trim() !== '') {
+      setRefreshToken(initialRefreshToken);
+      if (typeof window !== 'undefined') {
+        setRefreshTokenCookie(initialRefreshToken);
+      }
+    }
+  }, [initialRefreshToken]);
+
+  // Internal method to update tokens after refresh
+  const updateTokens = useCallback((newAccessToken: string, newRefreshToken?: string) => {
+    setAccessToken(newAccessToken);
+    if (newRefreshToken) {
+      setRefreshToken(newRefreshToken);
+    }
+    // Also update storage
+    if (typeof window !== 'undefined') {
+      sessionStorage.setItem('access_token', newAccessToken);
+      // Extract and store org/auth data from JWT
+      syncJwtDataToSessionStorage(newAccessToken);
+      if (newRefreshToken) {
+        setRefreshTokenCookie(newRefreshToken);
+      }
+    }
+  }, []);
+
+  // Memoize context value to prevent unnecessary re-renders
+  const value: AuthContextValue = useMemo(() => ({
+    accessToken,
+    refreshToken,
+    onError,
+    updateTokens,
+  }), [accessToken, refreshToken, onError, updateTokens]);
+
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+};
+
+export const useAuth = (): AuthContextValue => {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context;
+};

package/src/RedactoPrivacyCenter/context/BaseUrlContext.tsx

@@ -0,0 +1,41 @@
+import { createContext, useContext, useMemo, type ReactNode } from 'react';
+import { createConsentClient } from '../api/client';
+import type { BaseUrlContextValue } from './types';
+
+export type { BaseUrlContextValue } from './types';
+
+export const BaseUrlContext = createContext<BaseUrlContextValue | null>(null);
+
+export const BaseUrlProvider = ({
+  children,
+  baseUrl,
+}: {
+  children: ReactNode;
+  baseUrl: string; // Consent server base URL
+}) => {
+  const consentClient = useMemo(() => createConsentClient(baseUrl), [baseUrl]);
+
+  const value: BaseUrlContextValue = useMemo(
+    () => ({
+      baseUrl,
+      consentClient,
+    }),
+    [baseUrl, consentClient]
+  );
+
+  return (
+    <BaseUrlContext.Provider value={value}>
+      {children}
+    </BaseUrlContext.Provider>
+  );
+};
+
+export const useBaseUrl = () => {
+  const context = useContext(BaseUrlContext);
+  if (!context) {
+    throw new Error(
+      'useBaseUrl must be used within a BaseUrlProvider'
+    );
+  }
+  return context;
+};

package/src/RedactoPrivacyCenter/context/LocaleContext.tsx

@@ -0,0 +1,11 @@
+import { createContext } from 'react';
+
+type LocaleContextType = {
+  locale: string;
+  setLocale: (locale: string) => void;
+};
+
+export const LocaleContext = createContext<LocaleContextType>({
+  locale: 'en',
+  setLocale: () => {},
+});