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

package/src/RedactoPrivacyCenter/components/ConsentManagerColumns.tsx

@@ -0,0 +1,238 @@
+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';
+
+dayjs.extend(relativeTime);
+
+const columnHelper = createColumnHelper<UserConsent>();
+
+export const useConsentManagerColumns = ({
+  onOpenModal,
+}: UseConsentManagerColumnsProps) => {
+  const { t } = useTranslation();
+  return useMemo(
+    () => [
+      columnHelper.accessor('purpose', {
+        id: 'purpose',
+        size: 300,
+        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}
+            </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 && (
+              <PCText
+                size="sm"
+                color="secondary"
+                style={{
+                  display: '-webkit-box',
+                  WebkitLineClamp: 2,
+                  WebkitBoxOrient: 'vertical',
+                  overflow: 'hidden',
+                  wordBreak: 'break-word',
+                  fontSize: '0.75rem',
+                }}
+                title={info.row.original.product_description}
+              >
+                {info.row.original.product_description}
+              </PCText>
+            )}
+          </div>
+        ),
+        enableSorting: false,
+        enableColumnFilter: false,
+      }),
+      columnHelper.accessor('status', {
+        id: 'status',
+        size: 120,
+        minSize: 90,
+        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>
+          );
+        },
+        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>
+          );
+        },
+        enableSorting: false,
+        enableColumnFilter: false,
+      }),
+      columnHelper.accessor('valid_till', {
+        id: 'valid_till',
+        minSize: 100,
+        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>;
+        },
+        enableSorting: false,
+        enableColumnFilter: false,
+      }),
+      columnHelper.accessor('method', {
+        id: 'method',
+        size: 120,
+        minSize: 80,
+        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>
+          );
+        },
+        enableSorting: false,
+        enableColumnFilter: false,
+      }),
+
+      columnHelper.display({
+        id: 'action',
+        size: 100,
+        minSize: 70,
+        header: t('action'),
+        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>
+          );
+        },
+      }),
+    ],
+    [onOpenModal, t]
+  );
+};

package/src/RedactoPrivacyCenter/components/ConsentManagerConstants.ts

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

package/src/RedactoPrivacyCenter/components/ConsentManagerTableSkeleton.tsx

@@ -0,0 +1,155 @@
+import { SKELETON_ROW_COUNT } from './ConsentManagerConstants';
+import { pcStyles } from '../styles/pcStyles';
+
+const getVar = (varName: string): string => `var(${varName})`;
+
+export const ConsentManagerTableSkeleton = () => {
+  return (
+    <div style={{
+      borderRadius: getVar('--pc-border-radius-md'),
+      border: `1px solid ${getVar('--pc-border-color')}`,
+      backgroundColor: getVar('--pc-bg-primary'),
+    }}>
+      {/* Table Header */}
+      <div style={{
+        borderBottom: `1px solid ${getVar('--pc-border-color')}`,
+        backgroundColor: getVar('--pc-bg-secondary'),
+      }}>
+        <div style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(7, 1fr)',
+          gap: getVar('--pc-spacing-md'),
+          paddingLeft: getVar('--pc-spacing-lg'),
+          paddingRight: getVar('--pc-spacing-lg'),
+          paddingTop: getVar('--pc-spacing-md'),
+          paddingBottom: getVar('--pc-spacing-md'),
+        }} className="pc-grid-responsive">
+          {Array.from({ length: 7 }).map((_, i) => (
+            <div 
+              key={i}
+              style={{ 
+                height: '1rem', 
+                width: '6rem', 
+                animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', 
+                borderRadius: getVar('--pc-border-radius-md'), 
+                backgroundColor: getVar('--pc-bg-tertiary'),
+              }}
+            />
+          ))}
+        </div>
+      </div>
+
+      {/* Table Rows */}
+      {Array.from({ length: SKELETON_ROW_COUNT }).map((_, index) => (
+        <div
+          key={index}
+          style={{
+            borderBottom: `1px solid ${getVar('--pc-border-color')}`,
+            backgroundColor: getVar('--pc-bg-primary'),
+          }}
+        >
+          <div style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(7, 1fr)',
+            gap: getVar('--pc-spacing-md'),
+            paddingLeft: getVar('--pc-spacing-lg'),
+            paddingRight: getVar('--pc-spacing-lg'),
+            paddingTop: getVar('--pc-spacing-md'),
+            paddingBottom: getVar('--pc-spacing-md'),
+          }} className="pc-grid-responsive">
+            {/* Purpose */}
+            <div style={{ ...pcStyles.flex, ...pcStyles.flexCol, ...pcStyles.gapXs }}>
+              <div style={{ 
+                height: '1rem', 
+                width: '8rem', 
+                animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', 
+                borderRadius: getVar('--pc-border-radius-md'), 
+                backgroundColor: getVar('--pc-bg-tertiary'),
+              }} />
+              <div style={{ 
+                height: '0.75rem', 
+                width: '12rem', 
+                animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', 
+                borderRadius: getVar('--pc-border-radius-md'), 
+                backgroundColor: getVar('--pc-bg-tertiary'),
+              }} />
+            </div>
+
+            {/* Product */}
+            <div style={{ ...pcStyles.flex, ...pcStyles.flexCol, ...pcStyles.gapXs }}>
+              <div style={{ 
+                height: '1rem', 
+                width: '6rem', 
+                animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', 
+                borderRadius: getVar('--pc-border-radius-md'), 
+                backgroundColor: getVar('--pc-bg-tertiary'),
+              }} />
+              <div style={{ 
+                height: '0.75rem', 
+                width: '8rem', 
+                animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', 
+                borderRadius: getVar('--pc-border-radius-md'), 
+                backgroundColor: getVar('--pc-bg-tertiary'),
+              }} />
+            </div>
+
+            {/* Status */}
+            <div style={{ ...pcStyles.flex, ...pcStyles.itemsCenter }}>
+              <div style={{ 
+                height: '1.5rem', 
+                width: '5rem', 
+                animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', 
+                borderRadius: '9999px', 
+                backgroundColor: getVar('--pc-bg-tertiary'),
+              }} />
+            </div>
+
+            {/* Given Date */}
+            <div style={{ ...pcStyles.flex, ...pcStyles.itemsCenter }}>
+              <div style={{ 
+                height: '1rem', 
+                width: '6rem', 
+                animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', 
+                borderRadius: getVar('--pc-border-radius-md'), 
+                backgroundColor: getVar('--pc-bg-tertiary'),
+              }} />
+            </div>
+
+            {/* Valid till */}
+            <div style={{ ...pcStyles.flex, ...pcStyles.itemsCenter }}>
+              <div style={{ 
+                height: '1rem', 
+                width: '6rem', 
+                animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', 
+                borderRadius: getVar('--pc-border-radius-md'), 
+                backgroundColor: getVar('--pc-bg-tertiary'),
+              }} />
+            </div>
+
+            {/* Method */}
+            <div style={{ ...pcStyles.flex, ...pcStyles.itemsCenter }}>
+              <div style={{ 
+                height: '1rem', 
+                width: '4rem', 
+                animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', 
+                borderRadius: getVar('--pc-border-radius-md'), 
+                backgroundColor: getVar('--pc-bg-tertiary'),
+              }} />
+            </div>
+
+            {/* Action */}
+            <div style={{ ...pcStyles.flex, ...pcStyles.itemsCenter }}>
+              <div style={{ 
+                height: '1.5rem', 
+                width: '4rem', 
+                animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', 
+                borderRadius: getVar('--pc-border-radius-md'), 
+                backgroundColor: getVar('--pc-bg-tertiary'),
+              }} />
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};

package/src/RedactoPrivacyCenter/components/DataRequest/CorrectionDataSection.tsx

@@ -0,0 +1,189 @@
+import { PCCheckbox, PCInput } from '../../ui';
+import { pcStyles } from '../../styles/pcStyles';
+import type { DataElement } from '../../lib/types';
+import { useTranslation } from 'react-i18next';
+
+const getVar = (varName: string): string => `var(${varName})`;
+
+export default function CorrectionDataSection({
+  dataElements,
+  selected,
+  setSelected,
+  correctionValues,
+  setCorrectionValues,
+  isTranslating = false,
+}: {
+  dataElements: DataElement[];
+  selected: string[];
+  setSelected: (values: string[]) => void;
+  correctionValues: Record<string, { current: string; updated: string }>;
+  setCorrectionValues: (
+    values: Record<string, { current: string; updated: string }>
+  ) => void;
+  isTranslating?: boolean;
+}) {
+  const { t } = useTranslation();
+
+  const handleSelectAll = (checked: boolean) => {
+    setSelected(checked ? dataElements.map((el) => el.name) : []);
+  };
+
+  const handleToggle = (name: string, checked: boolean) => {
+    setSelected(
+      checked ? [...selected, name] : selected.filter((n) => n !== name)
+    );
+  };
+
+  const getElementByName = (name: string) =>
+    dataElements.find((el) => el.name === name);
+
+  if (isTranslating) {
+    return (
+      <div>
+        <div style={{ marginBottom: '0.375rem', paddingLeft: pcStyles.pxMd.paddingLeft, paddingRight: pcStyles.pxMd.paddingRight }}>
+          <div style={{ height: '1rem', width: '10rem', animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', borderRadius: pcStyles.borderRadiusMd, backgroundColor: getVar('--pc-bg-tertiary'), marginBottom: '0.375rem' }}></div>
+          <div style={{ height: '1rem', width: '6rem', animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', borderRadius: pcStyles.borderRadiusMd, backgroundColor: getVar('--pc-bg-tertiary'), marginBottom: '0.5rem' }}></div>
+        </div>
+        <div style={{
+          backgroundColor: getVar('--pc-bg-secondary'),
+          borderRadius: pcStyles.borderRadiusMd,
+          padding: getVar('--pc-spacing-sm'),
+          border: `1px solid ${getVar('--pc-border-color')}`,
+        }}>
+          {[1, 2, 3, 4].map((skeletonIndex) => (
+            <div key={skeletonIndex} style={{ marginBottom: skeletonIndex < 4 ? getVar('--pc-spacing-xs') : 0, ...pcStyles.flex, ...pcStyles.itemsCenter, ...pcStyles.gapSm }}>
+              <div style={{ height: '1rem', width: '1rem', animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', borderRadius: pcStyles.borderRadiusMd, backgroundColor: getVar('--pc-bg-tertiary') }}></div>
+              <div style={{ height: '1rem', width: '8rem', animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', borderRadius: pcStyles.borderRadiusMd, backgroundColor: getVar('--pc-bg-tertiary') }}></div>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <div style={{ ...pcStyles.flex, ...pcStyles.flexCol, gap: getVar('--pc-spacing-xs') }}>
+        <p style={{
+          margin: 0,
+          fontSize: pcStyles.textXs.fontSize,
+          color: getVar('--pc-text-secondary'),
+        }}>
+          {t('selectFieldsToUpdate')}
+        </p>
+        <div style={{
+          backgroundColor: getVar('--pc-bg-secondary'),
+          borderRadius: pcStyles.borderRadiusMd,
+          padding: getVar('--pc-spacing-sm'),
+          border: `1px solid ${getVar('--pc-border-color')}`,
+        }}>
+          <PCCheckbox
+            label={t('selectAll')}
+            size="sm"
+            checked={
+              dataElements.length > 0 && selected.length === dataElements.length
+            }
+            onChange={(e) => handleSelectAll(e.target.checked)}
+            labelClassName="text-sm font-medium"
+            style={{ marginBottom: getVar('--pc-spacing-xl') }}
+          />
+          <div style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
+            gap: getVar('--pc-spacing-md'),
+          }}>
+            {dataElements.map((element) => (
+              <PCCheckbox
+                key={element.uuid}
+                label={element.name}
+                size="sm"
+                checked={selected.includes(element.name)}
+                onChange={(e) => handleToggle(element.name, e.target.checked)}
+                labelClassName="text-sm capitalize"
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+      {selected.length > 0 && (
+        <div style={{
+          marginTop: getVar('--pc-spacing-md'),
+          paddingTop: getVar('--pc-spacing-md'),
+          borderTop: `1px solid ${getVar('--pc-border-color')}`,
+        }}>
+          <p style={{
+            marginBottom: getVar('--pc-spacing-sm'),
+            fontSize: pcStyles.textSm.fontSize,
+            fontWeight: pcStyles.fontWeightMedium.fontWeight,
+            color: getVar('--pc-text-primary'),
+          }}>
+            <span style={{ color: getVar('--pc-error') }}>*</span>{' '}
+            {t('enterCorrectValue')}
+          </p>
+          <div style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(1, 1fr)',
+            gap: getVar('--pc-spacing-sm'),
+          }}>
+            {selected.map((name) => {
+              const field = getElementByName(name);
+              return (
+                <div key={name} style={{
+                  padding: getVar('--pc-spacing-sm'),
+                  backgroundColor: getVar('--pc-bg-secondary'),
+                  borderRadius: pcStyles.borderRadiusSm,
+                }}>
+                  <label style={{
+                    marginBottom: getVar('--pc-spacing-xs'),
+                    display: 'block',
+                    fontSize: pcStyles.textSm.fontSize,
+                    fontWeight: pcStyles.fontWeightMedium.fontWeight,
+                    color: getVar('--pc-text-primary'),
+                  }}>
+                    {field?.name}
+                  </label>
+                  <div style={{
+                    display: 'grid',
+                    gridTemplateColumns: 'repeat(1, 1fr)',
+                    gap: getVar('--pc-spacing-xs'),
+                  }}>
+                    <PCInput
+                      placeholder={t('currentValuePlaceholder')}
+                      size="sm"
+                      required
+                      value={correctionValues[name]?.current || ''}
+                      onChange={(e) =>
+                        setCorrectionValues({
+                          ...correctionValues,
+                          [name]: {
+                            ...correctionValues[name],
+                            current: e.target.value,
+                          },
+                        })
+                      }
+                    />
+                    <PCInput
+                      placeholder={t('updatedValuePlaceholder')}
+                      size="sm"
+                      required
+                      value={correctionValues[name]?.updated || ''}
+                      onChange={(e) =>
+                        setCorrectionValues({
+                          ...correctionValues,
+                          [name]: {
+                            ...correctionValues[name],
+                            updated: e.target.value,
+                          },
+                        })
+                      }
+                    />
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+    </>
+  );
+}