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

package/src/RedactoPrivacyCenter/components/ConsentManagerGroupedColumns.tsx

@@ -0,0 +1,318 @@
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ChevronDown } from 'lucide-react';
+import { createColumnHelper } from '@tanstack/react-table';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import { PCBadge, PCText } from '../ui';
+import { pcStyles } from '../styles/pcStyles';
+import type { DisplayProductGroup } from '../lib/types';
+
+dayjs.extend(relativeTime);
+
+const getVar = (varName: string): string => `var(${varName})`;
+
+type DotChipVariant = 'success' | 'error' | 'warning';
+
+const dotChipColors: Record<DotChipVariant, { bg: string; text: string }> = {
+  success: { bg: 'rgba(16, 185, 129, 0.12)', text: getVar('--pc-success') },
+  error: { bg: 'rgba(239, 68, 68, 0.12)', text: getVar('--pc-error') },
+  warning: { bg: 'rgba(245, 158, 11, 0.12)', text: getVar('--pc-warning') },
+};
+
+const ConsentCountChip = ({ count, label }: { count: number; label: string }) => (
+  <PCBadge
+    className="pc-status-badge"
+    size="sm"
+    variant="secondary"
+    style={{
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: '0.3125rem',
+      padding: '0.1875rem 0.5rem',
+      borderRadius: '9999px',
+      border: `1px solid ${getVar('--pc-border-color')}`,
+      backgroundColor: getVar('--pc-bg-primary'),
+      color: getVar('--pc-text-primary'),
+      fontSize: '0.6875rem',
+      fontWeight: 600,
+      lineHeight: 1.2,
+    }}
+  >
+    <span
+      aria-hidden="true"
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        minWidth: '1rem',
+        color: getVar('--pc-primary'),
+        fontSize: '0.6875rem',
+        fontWeight: 700,
+        lineHeight: 1,
+      }}
+    >
+      {count}
+    </span>
+    <span>{label}</span>
+  </PCBadge>
+);
+
+const DotChip = ({ variant, label }: { variant: DotChipVariant; label: string }) => {
+  const colors = dotChipColors[variant];
+  return (
+    <span
+      className="pc-status-badge"
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: '0.3125rem',
+        padding: '0.125rem 0.5rem',
+        borderRadius: '9999px',
+        fontSize: '0.6875rem',
+        fontWeight: 600,
+        lineHeight: 1.2,
+        backgroundColor: colors.bg,
+        color: colors.text,
+      }}
+    >
+      <span
+        aria-hidden="true"
+        style={{
+          width: '0.375rem',
+          height: '0.375rem',
+          borderRadius: '9999px',
+          backgroundColor: colors.text,
+          flexShrink: 0,
+        }}
+      />
+      {label}
+    </span>
+  );
+};
+
+const avatarColors: Array<'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info'> = [
+  'primary',
+  'info',
+  'success',
+  'warning',
+  'error',
+  'secondary',
+];
+
+const pickAvatarColor = (seed: string) => {
+  let hash = 0;
+  for (let i = 0; i < seed.length; i += 1) {
+    hash = (hash << 5) - hash + seed.charCodeAt(i);
+    hash |= 0;
+  }
+  return avatarColors[Math.abs(hash) % avatarColors.length];
+};
+
+const avatarColorMap: Record<ReturnType<typeof pickAvatarColor>, { bg: string; color: string }> = {
+  primary: { bg: '#4f46e5', color: '#ffffff' },
+  secondary: { bg: '#6b7280', color: '#ffffff' },
+  success: { bg: '#10b981', color: '#ffffff' },
+  error: { bg: '#ec4899', color: '#ffffff' },
+  warning: { bg: '#f59e0b', color: '#ffffff' },
+  info: { bg: '#0ea5e9', color: '#ffffff' },
+};
+
+const getProductInitials = (name: string) => {
+  const words = name.trim().split(/\s+/).filter(Boolean);
+  if (words.length >= 2) {
+    return `${words[0][0]}${words[1][0]}`.toUpperCase();
+  }
+  return name.slice(0, 2).toUpperCase();
+};
+
+const ProductAvatar = ({ name, seed }: { name: string; seed: string }) => {
+  const colors = avatarColorMap[pickAvatarColor(seed)];
+  return (
+    <span
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: '24px',
+        height: '24px',
+        flexShrink: 0,
+        borderRadius: '0.4375rem',
+        backgroundColor: colors.bg,
+        color: colors.color,
+        fontSize: '0.6875rem',
+        fontWeight: 700,
+        lineHeight: 1,
+      }}
+    >
+      {getProductInitials(name)}
+    </span>
+  );
+};
+
+const columnHelper = createColumnHelper<DisplayProductGroup>();
+
+export const useConsentManagerGroupedColumns = () => {
+  const { t } = useTranslation();
+
+  return useMemo(
+    () => [
+      columnHelper.display({
+        id: 'expander',
+        size: 36,
+        minSize: 36,
+        header: '',
+        cell: ({ row }) => (
+          <button
+            type="button"
+            aria-label={row.getIsExpanded() ? t('collapseSidebar') : t('expandSidebar')}
+            onClick={(e) => {
+              e.stopPropagation();
+              row.toggleExpanded();
+            }}
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              width: '14px',
+              height: '14px',
+              margin: '0 auto',
+              padding: 0,
+              border: 'none',
+              background: 'transparent',
+              cursor: 'pointer',
+              color: getVar('--pc-text-secondary'),
+              borderRadius: 0,
+              transition: 'color 0.15s ease',
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.color = getVar('--pc-text-primary');
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.color = getVar('--pc-text-secondary');
+            }}
+          >
+            <ChevronDown
+              size={12}
+              style={{
+                transform: row.getIsExpanded() ? 'rotate(0deg)' : 'rotate(-90deg)',
+                transition: 'transform 0.2s ease',
+              }}
+            />
+          </button>
+        ),
+      }),
+
+      columnHelper.accessor('product_name', {
+        id: 'product',
+        size: 280,
+        minSize: 200,
+        header: t('product'),
+        cell: ({ row }) => {
+          const group = row.original;
+          const name = group.product_name || '-';
+          return (
+            <div style={{
+              ...pcStyles.flex,
+              ...pcStyles.itemsCenter,
+              gap: getVar('--pc-spacing-sm'),
+              minWidth: 0,
+            }}>
+              <ProductAvatar name={name} seed={group.product_uuid || name} />
+              <div style={{ minWidth: 0, ...pcStyles.flex, ...pcStyles.flexCol, gap: '0.125rem' }}>
+                <PCText size="sm" weight="semibold">{name}</PCText>
+                {group.product_description && (
+                  <PCText
+                    size="sm"
+                    color="secondary"
+                    style={{
+                      display: '-webkit-box',
+                      WebkitLineClamp: 1,
+                      WebkitBoxOrient: 'vertical',
+                      overflow: 'hidden',
+                      wordBreak: 'break-word',
+                      fontSize: '0.6875rem',
+                    }}
+                    title={group.product_description}
+                  >
+                    {group.product_description}
+                  </PCText>
+                )}
+              </div>
+            </div>
+          );
+        },
+        enableSorting: false,
+      }),
+
+      columnHelper.display({
+        id: 'consents',
+        size: 120,
+        minSize: 90,
+        header: t('consent'),
+        cell: ({ row }) => {
+          if (row.getIsExpanded()) return null;
+          const count = row.original.total_purposes;
+          const consentLabel = t('consent', { count });
+          return (
+            <div style={{ display: 'inline-flex', alignItems: 'center', minHeight: '1.5rem' }}>
+              <ConsentCountChip count={count} label={consentLabel} />
+            </div>
+          );
+        },
+      }),
+
+      columnHelper.display({
+        id: 'statusSummary',
+        size: 160,
+        minSize: 130,
+        header: t('status'),
+        cell: ({ row }) => {
+          if (row.getIsExpanded()) return null;
+          const g = row.original;
+          const items: Array<{ count: number; label: string; variant: 'success' | 'error' | 'warning' }> = [];
+          if (g.active_purposes > 0) {
+            items.push({ count: g.active_purposes, label: `${g.active_purposes} ${t('statusActive')}`, variant: 'success' });
+          }
+          if (g.withdrawn_purposes > 0) {
+            items.push({ count: g.withdrawn_purposes, label: `${g.withdrawn_purposes} ${t('statusWithdrawn')}`, variant: 'error' });
+          }
+          if (g.expired_purposes > 0) {
+            items.push({ count: g.expired_purposes, label: `${g.expired_purposes} ${t('statusExpired')}`, variant: 'warning' });
+          }
+          if (g.declined_purposes > 0) {
+            items.push({ count: g.declined_purposes, label: `${g.declined_purposes} ${t('statusDeclined')}`, variant: 'warning' });
+          }
+          if (items.length === 0) return <PCText size="sm" color="secondary">-</PCText>;
+          return (
+            <div style={{ ...pcStyles.flex, ...pcStyles.flexCol, gap: '0.25rem', alignItems: 'flex-start' }}>
+              {items.map((item) => (
+                <DotChip key={item.label} variant={item.variant} label={item.label} />
+              ))}
+            </div>
+          );
+        },
+      }),
+
+      columnHelper.display({
+        id: 'latestActivity',
+        size: 208,
+        minSize: 170,
+        header: t('activity'),
+        cell: ({ row }) => {
+          if (row.getIsExpanded()) return null;
+          const ts = row.original.latest_given_date;
+          if (!ts) return <PCText size="sm" color="secondary">-</PCText>;
+          const date = dayjs(ts);
+          return (
+            <div style={{ ...pcStyles.flex, ...pcStyles.flexCol, gap: '0.0625rem' }}>
+              <PCText size="sm" weight="medium">{date.format('MMM D, YYYY • h:mm A')}</PCText>
+              <PCText size="sm" color="secondary" style={{ fontSize: '0.6875rem' }}>{date.fromNow()}</PCText>
+            </div>
+          );
+        },
+      }),
+    ],
+    [t]
+  );
+};

package/src/RedactoPrivacyCenter/components/ConsentManagerProductCards.tsx

@@ -0,0 +1,333 @@
+import { type CSSProperties, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import { ChevronDown } from 'lucide-react';
+import { PCBadge, PCButton, PCEmpty, PCText } from '../ui';
+import type {
+  ConsentModalRecord,
+  DisplayProductGroup,
+  PurposeItem,
+} from '../lib/types';
+import { pcStyles } from '../styles/pcStyles';
+import {
+  renderGivenDate,
+  renderMethod,
+  renderModifyButton,
+  renderStatusBadge,
+  renderValidTill,
+} from './ConsentManagerCells';
+
+dayjs.extend(relativeTime);
+
+const getVar = (varName: string): string => `var(${varName})`;
+
+const avatarColors: Array<'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info'> = [
+  'primary',
+  'info',
+  'success',
+  'warning',
+  'error',
+  'secondary',
+];
+
+const pickAvatarColor = (seed: string) => {
+  let hash = 0;
+  for (let i = 0; i < seed.length; i += 1) {
+    hash = (hash << 5) - hash + seed.charCodeAt(i);
+    hash |= 0;
+  }
+  return avatarColors[Math.abs(hash) % avatarColors.length];
+};
+
+const avatarColorMap: Record<ReturnType<typeof pickAvatarColor>, { bg: string; color: string }> = {
+  primary: { bg: '#4f46e5', color: '#ffffff' },
+  secondary: { bg: '#6b7280', color: '#ffffff' },
+  success: { bg: '#10b981', color: '#ffffff' },
+  error: { bg: '#ec4899', color: '#ffffff' },
+  warning: { bg: '#f59e0b', color: '#ffffff' },
+  info: { bg: '#0ea5e9', color: '#ffffff' },
+};
+
+const getProductInitials = (name: string) => {
+  const words = name.trim().split(/\s+/).filter(Boolean);
+  if (words.length >= 2) {
+    return `${words[0][0]}${words[1][0]}`.toUpperCase();
+  }
+  return name.slice(0, 2).toUpperCase();
+};
+
+const ProductAvatar = ({ name, seed }: { name: string; seed: string }) => {
+  const colors = avatarColorMap[pickAvatarColor(seed)];
+  return (
+    <span
+      className="pc-consent-mobile-avatar"
+      style={{
+        backgroundColor: colors.bg,
+        color: colors.color,
+      }}
+    >
+      {getProductInitials(name)}
+    </span>
+  );
+};
+
+type ProductStatusItem = {
+  label: string;
+  variant: 'success' | 'error' | 'warning';
+};
+
+const statusChipStyles: Record<ProductStatusItem['variant'], CSSProperties> = {
+  success: { backgroundColor: 'rgba(16, 185, 129, 0.12)', color: getVar('--pc-success') },
+  error: { backgroundColor: 'rgba(239, 68, 68, 0.12)', color: getVar('--pc-error') },
+  warning: { backgroundColor: 'rgba(245, 158, 11, 0.12)', color: getVar('--pc-warning') },
+};
+
+type ConsentManagerProductCardsProps = {
+  groups: DisplayProductGroup[];
+  onModify: (record: ConsentModalRecord) => void;
+  extraPurposesByKey?: Record<string, PurposeItem[]>;
+  hasMoreByKey?: Record<string, boolean>;
+  loadingMoreByKey?: Record<string, boolean>;
+  onLoadMore?: (group: DisplayProductGroup) => void;
+  cardKeyFor?: (group: DisplayProductGroup) => string;
+};
+
+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,
+});
+
+export function ConsentManagerProductCards({
+  groups,
+  onModify,
+  extraPurposesByKey,
+  hasMoreByKey,
+  loadingMoreByKey,
+  onLoadMore,
+  cardKeyFor,
+}: ConsentManagerProductCardsProps) {
+  const { t } = useTranslation();
+  const [expandedCards, setExpandedCards] = useState<Record<string, boolean>>({});
+
+  const handleToggle = (key: string) => {
+    setExpandedCards((prev) => ({ ...prev, [key]: !prev[key] }));
+  };
+
+  const getStatusItems = useMemo(
+    () =>
+      (group: DisplayProductGroup): ProductStatusItem[] => {
+        const items: ProductStatusItem[] = [];
+        if (group.active_purposes > 0) {
+          items.push({
+            label: `${group.active_purposes} ${t('statusActive')}`,
+            variant: 'success',
+          });
+        }
+        if (group.withdrawn_purposes > 0) {
+          items.push({
+            label: `${group.withdrawn_purposes} ${t('statusWithdrawn')}`,
+            variant: 'error',
+          });
+        }
+        if (group.expired_purposes > 0) {
+          items.push({
+            label: `${group.expired_purposes} ${t('statusExpired')}`,
+            variant: 'warning',
+          });
+        }
+        if (group.declined_purposes > 0) {
+          items.push({
+            label: `${group.declined_purposes} ${t('statusDeclined')}`,
+            variant: 'warning',
+          });
+        }
+        return items;
+      },
+    [t]
+  );
+
+  if (groups.length === 0) {
+    return (
+      <div className="pc-consent-mobile-empty">
+        <PCEmpty title={t('noData')} />
+      </div>
+    );
+  }
+
+  return (
+    <div className="pc-consent-mobile-list">
+      {groups.map((group) => {
+        const cardKey = cardKeyFor ? cardKeyFor(group) : (group.product_uuid || group.product_name);
+        const productName = group.product_name || '-';
+        const statusItems = getStatusItems(group);
+        const latestDate = group.latest_given_date ? dayjs(group.latest_given_date) : null;
+        const isExpanded = Boolean(expandedCards[cardKey]);
+        const extraPurposes = extraPurposesByKey?.[cardKey] ?? [];
+        const purposes: PurposeItem[] = [...group.purposes, ...extraPurposes];
+        const hasMore = hasMoreByKey?.[cardKey] ?? group.has_more_purposes;
+        const isLoadingMore = Boolean(loadingMoreByKey?.[cardKey]);
+        const consentLabel = t('consent', { count: group.total_purposes });
+
+        return (
+          <article key={cardKey} className="pc-consent-mobile-card">
+            <div className="pc-consent-mobile-card-header">
+              <div className="pc-consent-mobile-product-head">
+                <ProductAvatar name={productName} seed={group.product_uuid || productName} />
+                <div style={{ minWidth: 0 }}>
+                  <PCText size="sm" weight="semibold">{productName}</PCText>
+                  {group.product_description && (
+                    <PCText size="sm" color="secondary" className="pc-consent-mobile-subtle-text">
+                      {group.product_description}
+                    </PCText>
+                  )}
+                  {group.nominator && (
+                    <PCText size="sm" color="secondary" className="pc-consent-mobile-subtle-text">
+                      {t('nominatedBy')}{' '}
+                      <span style={{ fontWeight: 600 }}>
+                        {group.nominator.name || group.nominator.email || group.nominator.org_user_id}
+                      </span>
+                    </PCText>
+                  )}
+                </div>
+              </div>
+              <PCBadge
+                className="pc-status-badge"
+                size="sm"
+                variant="secondary"
+                style={{
+                  border: `1px solid ${getVar('--pc-border-color')}`,
+                  backgroundColor: getVar('--pc-bg-primary'),
+                }}
+              >
+                <span style={{ color: getVar('--pc-primary'), fontWeight: 700 }}>
+                  {group.total_purposes}
+                </span>{' '}
+                {consentLabel}
+              </PCBadge>
+            </div>
+
+            {statusItems.length > 0 && (
+              <div className="pc-consent-mobile-chip-row">
+                {statusItems.map((item) => (
+                  <span
+                    key={item.label}
+                    className="pc-status-badge pc-consent-mobile-status-chip"
+                    style={statusChipStyles[item.variant]}
+                  >
+                    {item.label}
+                  </span>
+                ))}
+              </div>
+            )}
+
+            <div className="pc-consent-mobile-activity-row">
+              <PCText size="sm" color="secondary" className="pc-consent-mobile-meta-label">
+                {t('activity')}
+              </PCText>
+              {latestDate ? (
+                <div style={{ ...pcStyles.flex, ...pcStyles.flexCol, gap: '0.0625rem', minWidth: 0 }}>
+                  <PCText size="sm" weight="medium">{latestDate.format('MMM D, YYYY • h:mm A')}</PCText>
+                  <PCText size="sm" color="secondary" className="pc-consent-mobile-subtle-text">
+                    {latestDate.fromNow()}
+                  </PCText>
+                </div>
+              ) : (
+                <PCText size="sm" color="secondary">-</PCText>
+              )}
+            </div>
+
+            <button
+              type="button"
+              className="pc-consent-mobile-expand-btn"
+              onClick={() => handleToggle(cardKey)}
+              aria-expanded={isExpanded}
+            >
+              <span>
+                {purposes.length} {t('purpose')}
+              </span>
+              <ChevronDown
+                size={14}
+                style={{
+                  transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)',
+                  transition: 'transform 0.2s ease',
+                }}
+              />
+            </button>
+
+            {isExpanded && (
+              <div className="pc-consent-mobile-purpose-list">
+                {purposes.map((purpose) => {
+                  const modalRecord = buildModalRecord(purpose, group);
+                  return (
+                  <div
+                    key={purpose.purpose_uuid}
+                    className="pc-consent-mobile-purpose-item"
+                  >
+                    <div className="pc-consent-mobile-purpose-head">
+                      <div style={{ minWidth: 0 }}>
+                        <PCText size="sm" weight="semibold">{purpose.name}</PCText>
+                        {purpose.description && (
+                          <PCText size="sm" color="secondary" className="pc-consent-mobile-subtle-text">
+                            {purpose.description}
+                          </PCText>
+                        )}
+                      </div>
+                      {renderStatusBadge(purpose.status, t)}
+                    </div>
+
+                    <div className="pc-consent-mobile-meta-grid">
+                      <div>
+                        <PCText size="sm" color="secondary" className="pc-consent-mobile-meta-label">
+                          {t('givenDate')}
+                        </PCText>
+                        {renderGivenDate(purpose.given_date, { showTooltip: false })}
+                      </div>
+                      <div>
+                        <PCText size="sm" color="secondary" className="pc-consent-mobile-meta-label">
+                          {t('validTill')}
+                        </PCText>
+                        {renderValidTill(purpose, t)}
+                      </div>
+                      <div>
+                        <PCText size="sm" color="secondary" className="pc-consent-mobile-meta-label">
+                          {t('method')}
+                        </PCText>
+                        {renderMethod(purpose.method)}
+                      </div>
+                      <div className="pc-consent-mobile-action-cell">
+                        <PCText size="sm" color="secondary" className="pc-consent-mobile-meta-label">
+                          {t('action')}
+                        </PCText>
+                        {renderModifyButton(modalRecord, onModify, t)}
+                      </div>
+                    </div>
+                  </div>
+                  );
+                })}
+                {hasMore && onLoadMore && (
+                  <div style={{ display: 'flex', justifyContent: 'center', padding: '0.5rem' }}>
+                    <PCButton
+                      size="sm"
+                      variant="outline"
+                      onClick={() => onLoadMore(group)}
+                      disabled={isLoadingMore}
+                    >
+                      {isLoadingMore ? t('loading') : t('loadMorePurposes')}
+                    </PCButton>
+                  </div>
+                )}
+              </div>
+            )}
+          </article>
+        );
+      })}
+    </div>
+  );
+}