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

package/src/RedactoPrivacyCenter/components/ConsentManagerCells.tsx

@@ -0,0 +1,187 @@
+import type { TFunction } from 'i18next';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import { Smartphone, LaptopMinimal } from 'lucide-react';
+import { PCText, PCTooltip } from '../ui';
+import { pcStyles } from '../styles/pcStyles';
+import { ConsentStatusEnum } from '../lib/types';
+import type { PurposeItem, ConsentModalRecord } from '../lib/types';
+import { formatDateTime } from '../lib/consent-manager/utils';
+
+dayjs.extend(relativeTime);
+const getVar = (varName: string): string => `var(${varName})`;
+
+type StatusVariant = 'success' | 'error' | 'warning' | 'info' | 'secondary';
+
+const statusVariantMap: Record<string, StatusVariant> = {
+  [ConsentStatusEnum.ACTIVE]: 'success',
+  [ConsentStatusEnum.WITHDRAWN]: 'error',
+  [ConsentStatusEnum.REVOKED]: 'error',
+  [ConsentStatusEnum.EXPIRED]: 'warning',
+  [ConsentStatusEnum.DECLINED]: 'warning',
+};
+
+export const getStatusVariant = (status: string): StatusVariant =>
+  statusVariantMap[status?.toUpperCase()] ?? 'secondary';
+
+export const getStatusLabel = (status: string, t: TFunction): string => {
+  const normalized = status?.toUpperCase();
+  if (normalized === ConsentStatusEnum.ACTIVE) return t('statusActive');
+  if (normalized === ConsentStatusEnum.WITHDRAWN) return t('statusWithdrawn');
+  if (normalized === ConsentStatusEnum.REVOKED) return t('statusRevoked');
+  if (normalized === ConsentStatusEnum.EXPIRED) return t('statusExpired');
+  if (normalized === ConsentStatusEnum.DECLINED) return t('statusDeclined');
+  return status;
+};
+
+const statusBadgeColors: Record<StatusVariant, { bg: string; fg: string }> = {
+  success: { bg: 'rgba(16, 185, 129, 0.12)', fg: 'var(--pc-success)' },
+  error: { bg: 'rgba(239, 68, 68, 0.12)', fg: 'var(--pc-error)' },
+  warning: { bg: 'rgba(245, 158, 11, 0.12)', fg: 'var(--pc-warning)' },
+  info: { bg: 'rgba(59, 130, 246, 0.12)', fg: 'var(--pc-info)' },
+  secondary: { bg: 'rgba(107, 114, 128, 0.12)', fg: 'var(--pc-text-secondary)' },
+};
+
+export const renderStatusBadge = (status: string, t: TFunction) => {
+  const variant = getStatusVariant(status);
+  const colors = statusBadgeColors[variant];
+  return (
+    <div style={{ ...pcStyles.flex, ...pcStyles.itemsCenter, ...pcStyles.justifyStart }}>
+      <span
+        className="pc-status-badge"
+        style={{
+          display: 'inline-flex',
+          alignItems: 'center',
+          gap: '0.3125rem',
+          borderRadius: '9999px',
+          padding: '0.1875rem 0.5625rem',
+          fontSize: '0.6875rem',
+          fontWeight: 600,
+          backgroundColor: colors.bg,
+          color: colors.fg,
+        }}
+      >
+        <span
+          aria-hidden="true"
+          style={{
+            width: '0.375rem',
+            height: '0.375rem',
+            borderRadius: '9999px',
+            backgroundColor: colors.fg,
+            flexShrink: 0,
+          }}
+        />
+        {getStatusLabel(status, t)}
+      </span>
+    </div>
+  );
+};
+
+export const renderGivenDate = (
+  timestamp: string | null,
+  options?: { showTooltip?: boolean }
+) => {
+  if (!timestamp) {
+    return <PCText size="sm" style={{ whiteSpace: 'normal', overflowWrap: 'anywhere' }}>-</PCText>;
+  }
+  const date = dayjs(timestamp);
+  const formatted = date.format('MMM D, YYYY [at] h:mm A');
+  const relative = date.fromNow();
+  const showTooltip = options?.showTooltip ?? true;
+
+  const content = (
+    <div style={{
+      ...pcStyles.flex,
+      ...pcStyles.flexCol,
+      gap: '0.125rem',
+      minWidth: 0,
+    }}>
+      <PCText size="sm" weight="medium" color="primary" style={{ lineHeight: 1.25, whiteSpace: 'normal', overflowWrap: 'anywhere' }}>
+        {formatted}
+      </PCText>
+      <PCText size="sm" color="secondary" style={{ fontSize: '0.65625rem', lineHeight: 1.2, whiteSpace: 'normal', overflowWrap: 'anywhere' }}>
+        {relative}
+      </PCText>
+    </div>
+  );
+
+  if (!showTooltip) {
+    return content;
+  }
+
+  return (
+    <PCTooltip content={date.format('MMMM D, YYYY [at] h:mm:ss A')} placement="top">
+      {content}
+    </PCTooltip>
+  );
+};
+
+export const renderValidTill = (consent: PurposeItem, t: TFunction) => {
+  const { status, valid_till } = consent;
+  const normalized = (typeof status === 'string' ? status : '').toUpperCase();
+  const inactiveLike =
+    normalized === ConsentStatusEnum.DECLINED ||
+    normalized === ConsentStatusEnum.WITHDRAWN ||
+    normalized === ConsentStatusEnum.REVOKED;
+  if (inactiveLike) {
+    return <PCText size="sm" style={{ whiteSpace: 'normal', overflowWrap: 'anywhere' }}>-</PCText>;
+  }
+  if (normalized === ConsentStatusEnum.ACTIVE && (valid_till === null || valid_till === undefined)) {
+    return <PCText size="sm" style={{ whiteSpace: 'normal', overflowWrap: 'anywhere' }}>{t('untilWithdrawalNoExpiry')}</PCText>;
+  }
+  return <PCText size="sm" style={{ whiteSpace: 'normal', overflowWrap: 'anywhere' }}>{valid_till ? formatDateTime(valid_till) : '-'}</PCText>;
+};
+
+const methodIconMap: Record<string, JSX.Element> = {
+  MOBILE: <Smartphone size={12} style={{ color: 'var(--pc-text-secondary)' }} />,
+  WEB: <LaptopMinimal size={12} style={{ color: 'var(--pc-text-secondary)' }} />,
+};
+
+export const renderMethod = (method: string) => (
+  <div
+    style={{
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: '0.25rem',
+      minWidth: '48px',
+      borderRadius: getVar('--pc-border-radius-sm'),
+      border: `1px solid ${getVar('--pc-border-color')}`,
+      backgroundColor: getVar('--pc-bg-primary'),
+      padding: '0.125rem 0.375rem',
+    }}
+  >
+    {methodIconMap[method] ?? null}
+    <PCText size="sm" color="secondary" style={{ fontSize: '0.6875rem', fontWeight: 600 }}>
+      {method}
+    </PCText>
+  </div>
+);
+
+export const renderModifyButton = (
+  consent: ConsentModalRecord,
+  onModify: (consent: ConsentModalRecord) => void,
+  t: TFunction
+) => {
+  const isDisabled = consent.status === ConsentStatusEnum.DECLINED;
+  return (
+    <button
+      type="button"
+      style={{
+        fontSize: pcStyles.textSm.fontSize,
+        fontWeight: pcStyles.fontWeightSemibold.fontWeight,
+        cursor: isDisabled ? 'not-allowed' : 'pointer',
+        color: isDisabled ? '#9ca3af' : getVar('--pc-primary'),
+        background: 'none',
+        border: 'none',
+        padding: 0,
+      }}
+      onClick={(e) => {
+        e.stopPropagation();
+        if (!isDisabled) onModify(consent);
+      }}
+      disabled={isDisabled}
+    >
+      {t('modifyButton')}
+    </button>
+  );
+};

package/src/RedactoPrivacyCenter/components/ConsentManagerColumns.tsx

@@ -1,78 +1,57 @@
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { PCText, PCTooltip, PCBadge } from '../ui';
-import { pcStyles } from '../styles/pcStyles';
-import { Smartphone, LaptopMinimal } from 'lucide-react';
 import { createColumnHelper } from '@tanstack/react-table';
-import dayjs from 'dayjs';
-import relativeTime from 'dayjs/plugin/relativeTime';
-import { ConsentStatusEnum } from '../lib/types';
-import type { UserConsent } from '../lib/types';
-import { formatDateTime } from '../lib/consent-manager/utils';
-import type { UseConsentManagerColumnsProps } from './types';
+import type { DisplayPurposeRow, ConsentModalRecord } from '../lib/types';
+import { PCText } from '../ui';
+import { pcStyles } from '../styles/pcStyles';
+import {
+  renderGivenDate,
+  renderMethod,
+  renderModifyButton,
+  renderStatusBadge,
+  renderValidTill,
+} from './ConsentManagerCells';
 
-dayjs.extend(relativeTime);
+type UseConsentManagerColumnsProps = {
+  onOpenModal: (record: ConsentModalRecord) => void;
+};
 
-const columnHelper = createColumnHelper<UserConsent>();
+const columnHelper = createColumnHelper<DisplayPurposeRow>();
 
 export const useConsentManagerColumns = ({
   onOpenModal,
 }: UseConsentManagerColumnsProps) => {
   const { t } = useTranslation();
+
   return useMemo(
     () => [
-      columnHelper.accessor('purpose', {
+      columnHelper.accessor('name', {
         id: 'purpose',
-        size: 300,
+        size: 280,
         minSize: 200,
         header: t('purpose'),
         cell: (info) => (
-          <div style={{ width: '100%', minWidth: '150px' }}>
-            <PCText size="sm" weight="medium">{info.getValue()}</PCText>
-            <PCText
-              size="sm"
-              color="secondary"
-              style={{
-                display: '-webkit-box',
-                WebkitLineClamp: 2,
-                WebkitBoxOrient: 'vertical',
-                overflow: 'hidden',
-                wordBreak: 'break-word',
-                fontSize: '0.75rem',
-                maxWidth: '400px',
-              }}
-              title={info.row.original.purpose_description}
-            >
-              {info.row.original.purpose_description}
+          <div style={{ width: '100%', minWidth: '10rem' }}>
+            <PCText size="sm" weight="semibold">
+              {info.getValue()}
             </PCText>
-          </div>
-        ),
-        enableSorting: false,
-        enableColumnFilter: false,
-      }),
-      columnHelper.accessor('product_name', {
-        id: 'product',
-        size: 150,
-        minSize: 100,
-        header: t('product'),
-        cell: (info) => (
-          <div style={{ width: '100%', minWidth: '80px' }}>
-            <PCText size="sm" weight="medium">{info.getValue() || '-'}</PCText>
-            {info.row.original.product_description && (
+            {info.row.original.description && (
               <PCText
                 size="sm"
                 color="secondary"
                 style={{
                   display: '-webkit-box',
-                  WebkitLineClamp: 2,
+                  WebkitLineClamp: 1,
                   WebkitBoxOrient: 'vertical',
                   overflow: 'hidden',
                   wordBreak: 'break-word',
-                  fontSize: '0.75rem',
+                  fontSize: '0.6875rem',
+                  lineHeight: 1.2,
+                  marginTop: '0.125rem',
                 }}
-                title={info.row.original.product_description}
+                title={info.row.original.description ?? undefined}
               >
-                {info.row.original.product_description}
+                {info.row.original.description}
               </PCText>
             )}
           </div>
@@ -80,157 +59,78 @@ export const useConsentManagerColumns = ({
         enableSorting: false,
         enableColumnFilter: false,
       }),
+
+      columnHelper.accessor('product_name', {
+        id: 'product',
+        size: 180,
+        minSize: 130,
+        header: t('product'),
+        cell: (info) => (
+          <div style={{ width: '100%', minWidth: '8rem' }}>
+            <PCText size="sm" weight="medium">
+              {info.getValue() || '-'}
+            </PCText>
+          </div>
+        ),
+        enableSorting: false,
+        enableColumnFilter: false,
+      }),
+
       columnHelper.accessor('status', {
         id: 'status',
-        size: 120,
-        minSize: 90,
+        size: 130,
+        minSize: 100,
         header: t('status'),
-        cell: (info) => {
-          const status = info.getValue();
-          const getStatusName = (status: string) => {
-            if (status === ConsentStatusEnum.ACTIVE) {
-              return t('statusActive');
-            } else if (status === ConsentStatusEnum.WITHDRAWN) {
-              return t('statusWithdrawn');
-            } else if (status === ConsentStatusEnum.EXPIRED) {
-              return t('statusExpired');
-            } else if (status === ConsentStatusEnum.DECLINED) {
-              return t('statusDeclined');
-            } else {
-              return status;
-            }
-          };
-
-          const getStatusVariant = (status: string): 'success' | 'error' | 'warning' | 'info' | 'secondary' => {
-            if (status === ConsentStatusEnum.ACTIVE) return 'success';
-            if (status === ConsentStatusEnum.WITHDRAWN) return 'error';
-            if (status === ConsentStatusEnum.EXPIRED) return 'warning';
-            if (status === ConsentStatusEnum.DECLINED) return 'warning';
-            return 'secondary';
-          };
-
-          return (
-            <div style={{ ...pcStyles.flex, ...pcStyles.itemsCenter, ...pcStyles.justifyStart, width: '100%' }}>
-              <PCBadge variant={getStatusVariant(status)} size="sm" className="pc-status-badge">
-                {getStatusName(status)}
-              </PCBadge>
-            </div>
-          );
-        },
+        cell: (info) => renderStatusBadge(info.getValue(), t),
         enableSorting: false,
         enableColumnFilter: false,
       }),
+
       columnHelper.accessor('given_date', {
         id: 'given_date',
         size: 180,
         minSize: 140,
         header: t('givenDate'),
-        cell: (info) => {
-          const timestamp = info.getValue();
-          const date = dayjs(timestamp);
-          const formattedDateTime = date.format('MMM D, YYYY [at] h:mm A');
-          const relativeTimeText = date.fromNow();
-
-          return (
-            <PCTooltip
-              content={date.format('MMMM D, YYYY [at] h:mm:ss A')}
-              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' }}>
-                  {relativeTimeText}
-                </PCText>
-              </div>
-            </PCTooltip>
-          );
-        },
+        cell: (info) => renderGivenDate(info.getValue()),
         enableSorting: false,
         enableColumnFilter: false,
       }),
+
       columnHelper.accessor('valid_till', {
         id: 'valid_till',
-        minSize: 100,
+        size: 160,
+        minSize: 120,
         header: t('validTill'),
-        cell: (info) => {
-          const status = info.row.original.status;
-          if (
-            status === ConsentStatusEnum.DECLINED ||
-            status === ConsentStatusEnum.WITHDRAWN
-          ) {
-            return '-';
-          }
-          const validTillValue = info.getValue();
-          if (status === ConsentStatusEnum.ACTIVE && (validTillValue === null || validTillValue === undefined)) {
-            return <PCText size="sm">{t('untilWithdrawalNoExpiry')}</PCText>;
-          }
-          return <PCText size="sm">{formatDateTime(info.getValue())}</PCText>;
-        },
+        cell: (info) => renderValidTill(info.row.original, t),
         enableSorting: false,
         enableColumnFilter: false,
       }),
+
       columnHelper.accessor('method', {
         id: 'method',
         size: 120,
-        minSize: 80,
+        minSize: 90,
         header: t('method'),
-        cell: (info) => {
-          const method = info.getValue();
-          const iconMap: Record<string, JSX.Element> = {
-            MOBILE: <Smartphone size={12} style={{ marginRight: '0.25rem', color: '#6b7280' }} />,
-            WEB: <LaptopMinimal size={12} style={{ marginRight: '0.25rem', color: '#6b7280' }} />,
-          };
-          return (
-            <div style={{
-              ...pcStyles.flex,
-              ...pcStyles.itemsCenter,
-              minWidth: '60px',
-            }}>
-              {iconMap[method] || null}
-              <PCText size="sm">{method}</PCText>
-            </div>
-          );
-        },
+        cell: (info) => renderMethod(info.getValue()),
         enableSorting: false,
         enableColumnFilter: false,
       }),
 
       columnHelper.display({
         id: 'action',
-        size: 100,
+        size: 90,
         minSize: 70,
         header: t('action'),
+        meta: {
+          align: 'right',
+        },
         enableSorting: false,
         enableColumnFilter: false,
-        cell: ({ row }) => {
-          const isDisabled =
-            row.original.status === ConsentStatusEnum.DECLINED;
-
-          return (
-            <button
-              style={{
-                fontSize: pcStyles.textSm.fontSize,
-                fontWeight: pcStyles.fontWeightMedium.fontWeight,
-                cursor: isDisabled ? 'not-allowed' : 'pointer',
-                color: isDisabled ? '#9ca3af' : '#4F87FF',
-                background: 'none',
-                border: 'none',
-                padding: 0,
-              }}
-              onClick={() => onOpenModal(row.original)}
-              disabled={isDisabled}
-            >
-              {t('modifyButton')}
-            </button>
-          );
-        },
+        cell: ({ row }) => (
+          <div style={{ ...pcStyles.flex, ...pcStyles.justifyEnd }}>
+            {renderModifyButton(row.original, onOpenModal, t)}
+          </div>
+        ),
       }),
     ],
     [onOpenModal, t]

package/src/RedactoPrivacyCenter/components/ConsentManagerExpandedRow.tsx

@@ -0,0 +1,179 @@
+import { useTranslation } from 'react-i18next';
+import { PCButton, PCText } from '../ui';
+import { pcStyles } from '../styles/pcStyles';
+import type {
+  ConsentModalRecord,
+  DisplayProductGroup,
+  PurposeItem,
+} from '../lib/types';
+import {
+  renderStatusBadge,
+  renderGivenDate,
+  renderValidTill,
+  renderMethod,
+  renderModifyButton,
+} from './ConsentManagerCells';
+
+const getVar = (varName: string): string => `var(${varName})`;
+
+type ConsentManagerExpandedRowProps = {
+  group: DisplayProductGroup;
+  onModify: (consent: ConsentModalRecord) => void;
+  extraPurposes?: PurposeItem[];
+  hasMore?: boolean;
+  isLoadingMore?: boolean;
+  onLoadMore?: (group: DisplayProductGroup) => void;
+};
+
+const buildModalRecord = (
+  purpose: PurposeItem,
+  group: DisplayProductGroup
+): ConsentModalRecord => ({
+  ...purpose,
+  product_uuid: group.product_uuid,
+  product_name: group.product_name,
+  product_description: group.product_description,
+  nominator: group.nominator,
+});
+
+const headerCellStyle: React.CSSProperties = {
+  textAlign: 'left',
+  padding: '0.4375rem 0.875rem',
+  fontSize: '0.59375rem',
+  fontWeight: 600,
+  letterSpacing: '0.08em',
+  textTransform: 'uppercase',
+  color: getVar('--pc-text-tertiary'),
+  borderBottom: `1px solid ${getVar('--pc-border-color')}`,
+  whiteSpace: 'nowrap',
+  backgroundColor: getVar('--pc-bg-secondary'),
+  verticalAlign: 'middle',
+};
+
+const bodyCellStyle: React.CSSProperties = {
+  padding: '0.5rem 0.875rem',
+  fontSize: getVar('--pc-font-size-sm'),
+  color: getVar('--pc-text-primary'),
+  borderBottom: `1px solid ${getVar('--pc-border-color')}`,
+  verticalAlign: 'middle',
+  backgroundColor: getVar('--pc-bg-primary'),
+};
+
+export const ConsentManagerExpandedRow = ({
+  group,
+  onModify,
+  extraPurposes,
+  hasMore,
+  isLoadingMore,
+  onLoadMore,
+}: ConsentManagerExpandedRowProps) => {
+  const { t } = useTranslation();
+  const purposes: PurposeItem[] = [...group.purposes, ...(extraPurposes ?? [])];
+
+  return (
+    <div
+      className="pc-consent-expanded-surface"
+      style={{
+        backgroundColor: getVar('--pc-bg-primary'),
+        // Keep expanded section visually nested under the product cell
+        // with extra breathing space for cleaner UI.
+        padding: '0.25rem 1rem 0.875rem 3.5rem',
+      }}
+      onClick={(e) => e.stopPropagation()}
+    >
+      <div
+        className="pc-consent-expanded-card"
+        style={{
+          border: `1px solid ${getVar('--pc-border-color')}`,
+          borderRadius: '0.375rem',
+          overflow: 'hidden',
+          backgroundColor: getVar('--pc-bg-primary'),
+          boxShadow: 'none',
+        }}
+      >
+        <table style={{ width: '100%', borderCollapse: 'collapse', tableLayout: 'fixed' }}>
+          <colgroup>
+            <col style={{ width: '46%' }} />
+            <col style={{ width: '4%' }} />
+            <col style={{ width: '26%' }} />
+            <col style={{ width: '12%' }} />
+            <col style={{ width: '7%' }} />
+            <col style={{ width: '5%' }} />
+          </colgroup>
+          <thead>
+            <tr>
+              <th style={headerCellStyle}>{t('purpose')}</th>
+              <th style={headerCellStyle}>{t('status')}</th>
+              <th style={headerCellStyle}>{t('givenDate')}</th>
+              <th style={headerCellStyle}>{t('validTill')}</th>
+              <th style={headerCellStyle}>{t('method')}</th>
+              <th style={{ ...headerCellStyle, textAlign: 'right' }}>{t('action')}</th>
+            </tr>
+          </thead>
+          <tbody>
+            {purposes.map((purpose, idx) => {
+              const isLast = idx === purposes.length - 1;
+              const cellStyle = isLast ? { ...bodyCellStyle, borderBottom: 'none' } : bodyCellStyle;
+              const rowKey = purpose.purpose_uuid;
+              const modalRecord = buildModalRecord(purpose, group);
+              return (
+                <tr key={rowKey}>
+                  <td style={cellStyle}>
+                    <div style={{ ...pcStyles.flex, ...pcStyles.flexCol, gap: '0.125rem', minWidth: 0 }}>
+                      <PCText size="sm" weight="semibold">{purpose.name}</PCText>
+                      {purpose.description && (
+                        <PCText
+                          size="sm"
+                          color="secondary"
+                          style={{
+                            display: '-webkit-box',
+                            WebkitLineClamp: 1,
+                            WebkitBoxOrient: 'vertical',
+                            overflow: 'hidden',
+                            wordBreak: 'break-word',
+                            fontSize: '0.6875rem',
+                            lineHeight: 1.2,
+                          }}
+                          title={purpose.description ?? undefined}
+                        >
+                          {purpose.description}
+                        </PCText>
+                      )}
+                    </div>
+                  </td>
+                  <td style={cellStyle}>{renderStatusBadge(purpose.status, t)}</td>
+                  <td style={cellStyle}>{renderGivenDate(purpose.given_date, { showTooltip: false })}</td>
+                  <td style={cellStyle}>{renderValidTill(purpose, t)}</td>
+                  <td style={cellStyle}>{renderMethod(purpose.method)}</td>
+                  <td style={{ ...cellStyle, textAlign: 'right' }}>
+                    {renderModifyButton(modalRecord, onModify, t)}
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+        {hasMore && onLoadMore && (
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: 'center',
+              padding: '0.5rem',
+              borderTop: `1px solid ${getVar('--pc-border-color')}`,
+              backgroundColor: getVar('--pc-bg-primary'),
+            }}
+          >
+            <PCButton
+              size="sm"
+              variant="outline"
+              onClick={() => onLoadMore(group)}
+              disabled={isLoadingMore}
+            >
+              {isLoadingMore ? t('loading') : t('loadMorePurposes')}
+            </PCButton>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};