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

package/src/RedactoPrivacyCenter/components/ConsentManagerCells.tsx

@@ -1,201 +0,0 @@
-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';
-import type { BadgeVariant } from './types';
-
-dayjs.extend(relativeTime);
-const getVar = (varName: string): string => `var(${varName})`;
-
-const statusVariantMap: Record<string, BadgeVariant> = {
-  [ConsentStatusEnum.ACTIVE]: 'success',
-  [ConsentStatusEnum.WITHDRAWN]: 'error',
-  [ConsentStatusEnum.REVOKED]: 'error',
-  [ConsentStatusEnum.EXPIRED]: 'warning',
-  [ConsentStatusEnum.DECLINED]: 'warning',
-};
-
-export const getStatusVariant = (status: string): BadgeVariant =>
-  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<BadgeVariant, { 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>
-  );
-};
-
-// Plain-string version of the given-date cell, for reuse in CSV export etc.
-export const getGivenDateLabel = (timestamp: string | null): string => {
-  if (!timestamp) {
-    return '-';
-  }
-  return dayjs(timestamp).format('MMM D, YYYY [at] h:mm A');
-};
-
-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 = getGivenDateLabel(timestamp);
-  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>
-  );
-};
-
-// Plain-string version of the valid-till cell, for reuse in CSV export etc.
-export const getValidTillLabel = (consent: PurposeItem, t: TFunction): string => {
-  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 '-';
-  }
-  if (normalized === ConsentStatusEnum.ACTIVE && (valid_till === null || valid_till === undefined)) {
-    return t('untilWithdrawalNoExpiry');
-  }
-  return valid_till ? formatDateTime(valid_till) : '-';
-};
-
-export const renderValidTill = (consent: PurposeItem, t: TFunction) => (
-  <PCText size="sm" style={{ whiteSpace: 'normal', overflowWrap: 'anywhere' }}>
-    {getValidTillLabel(consent, t)}
-  </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,138 +0,0 @@
-import { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { createColumnHelper } from '@tanstack/react-table';
-import type { DisplayPurposeRow, ConsentModalRecord } from '../lib/types';
-import { PCText } from '../ui';
-import { pcStyles } from '../styles/pcStyles';
-import {
-  renderGivenDate,
-  renderMethod,
-  renderModifyButton,
-  renderStatusBadge,
-  renderValidTill,
-} from './ConsentManagerCells';
-
-type UseConsentManagerColumnsProps = {
-  onOpenModal: (record: ConsentModalRecord) => void;
-};
-
-const columnHelper = createColumnHelper<DisplayPurposeRow>();
-
-export const useConsentManagerColumns = ({
-  onOpenModal,
-}: UseConsentManagerColumnsProps) => {
-  const { t } = useTranslation();
-
-  return useMemo(
-    () => [
-      columnHelper.accessor('name', {
-        id: 'purpose',
-        size: 280,
-        minSize: 200,
-        header: t('purpose'),
-        cell: (info) => (
-          <div style={{ width: '100%', minWidth: '10rem' }}>
-            <PCText size="sm" weight="semibold">
-              {info.getValue()}
-            </PCText>
-            {info.row.original.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,
-                  marginTop: '0.125rem',
-                }}
-                title={info.row.original.description ?? undefined}
-              >
-                {info.row.original.description}
-              </PCText>
-            )}
-          </div>
-        ),
-        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: 130,
-        minSize: 100,
-        header: t('status'),
-        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) => renderGivenDate(info.getValue()),
-        enableSorting: false,
-        enableColumnFilter: false,
-      }),
-
-      columnHelper.accessor('valid_till', {
-        id: 'valid_till',
-        size: 160,
-        minSize: 120,
-        header: t('validTill'),
-        cell: (info) => renderValidTill(info.row.original, t),
-        enableSorting: false,
-        enableColumnFilter: false,
-      }),
-
-      columnHelper.accessor('method', {
-        id: 'method',
-        size: 120,
-        minSize: 90,
-        header: t('method'),
-        cell: (info) => renderMethod(info.getValue()),
-        enableSorting: false,
-        enableColumnFilter: false,
-      }),
-
-      columnHelper.display({
-        id: 'action',
-        size: 90,
-        minSize: 70,
-        header: t('action'),
-        meta: {
-          align: 'right',
-        },
-        enableSorting: false,
-        enableColumnFilter: false,
-        cell: ({ row }) => (
-          <div style={{ ...pcStyles.flex, ...pcStyles.justifyEnd }}>
-            {renderModifyButton(row.original, onOpenModal, t)}
-          </div>
-        ),
-      }),
-    ],
-    [onOpenModal, t]
-  );
-};

package/src/RedactoPrivacyCenter/components/ConsentManagerConstants.ts

@@ -1,7 +0,0 @@
-// Re-export shared table configuration
-export {
-  SEARCH_DEBOUNCE_DELAY,
-  DEFAULT_PAGE,
-  DEFAULT_PAGE_SIZE,
-  SKELETON_ROW_COUNT,
-} from '../config/table';

package/src/RedactoPrivacyCenter/components/ConsentManagerExpandedRow.tsx

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