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

package/src/RedactoPrivacyCenter/components/caseHistoryColumns.tsx

@@ -1,159 +0,0 @@
-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

@@ -1,52 +0,0 @@
-import type { BadgeVariant, MarkerTint } from './types';
-
-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;
-
-// ─── Activity timeline ──────────────────────────────────────────────────────
-
-export const TIMELINE_MARKER_SIZE = 30;
-export const TIMELINE_TIME_COL = '64px';
-export const TIMELINE_MARKER_COL = '34px';
-export const TIMELINE_COL_GAP = 12;
-// Rail sits at the centre of the marker column: time col + gap + half marker col.
-export const TIMELINE_RAIL_LEFT = 64 + TIMELINE_COL_GAP + 17;
-
-// Marker tint per variant — mirrors the PCBadge palette so tag + marker match.
-// Literal `var(--…)` strings (same as getVar) avoid a constants↔utils import cycle.
-export const MARKER_TINT: Record<BadgeVariant, MarkerTint> = {
-  success: { color: 'var(--pc-success)', bg: 'rgba(16, 185, 129, 0.12)' },
-  error: { color: 'var(--pc-error)', bg: 'rgba(239, 68, 68, 0.12)' },
-  warning: { color: 'var(--pc-warning)', bg: 'rgba(245, 158, 11, 0.13)' },
-  info: { color: 'var(--pc-info)', bg: 'rgba(59, 130, 246, 0.12)' },
-  secondary: { color: 'var(--pc-text-secondary)', bg: 'var(--pc-bg-tertiary)' },
-};
-
-// Internal error thrown when an activity page fails to load (surfaced to the
-// user via the i18n `failedToFetchActivityData` toast).
-export const ACTIVITY_FETCH_ERROR_MESSAGE = 'Failed to fetch activity data';
-
-// ─── Shared-contact profile picker ───────────────────────────────────────────
-
-// sessionStorage key pinning the principal the user chose this session, so
-// routine token refreshes skip the picker.
-export const PICKED_ORG_USER_KEY = 'pc_picked_org_user_id';
-
-// The shared-contact picker/switch user-facing strings are localized via i18n —
-// see the chooseYourProfile / loginIdentifierLinkedToMultipleProfiles /
-// signingInEllipsis / couldNotSwitchProfile / switchProfile keys in
-// locales/*/translation.json.

package/src/RedactoPrivacyCenter/components/groupHelpers.ts

@@ -1,155 +0,0 @@
-import { LEGACY_PRODUCT_GROUP_UUID } from '../lib/constants';
-import type {
-  ConsentDataElement,
-  ConsentGroup,
-  DataElement,
-  FormData,
-  FormProductGroup,
-  Purpose,
-  PurposeItem,
-} from '../lib/types';
-
-/**
- * Map a `ConsentGroup` (from the user-consents endpoint — served by the Go
- * ledger, or by Python's `/dsar/privacy-center/user-consents` when no
- * ledgerBaseUrl is configured) onto the DSAR request form's
- * `FormProductGroup`. Approach A: the request-form product picker is sourced
- * from user-consents instead of Python's `form/data`, since after the cutover
- * `form/data` no longer emits product groups.
- *
- * The shapes are near-identical; the only adaptations are:
- * - purpose id rename: ledger `purpose_uuid` -> form `uuid` (which the picker
- *   keys on and the submit payload sends back as `purpose_uuid`),
- * - the ledger data-element's `selected` stands in for the form's
- *   `given_consent`,
- * - fields the picker never reads (industries, validity, descriptions) are
- *   defaulted.
- *
- * NOTE: the ledger caps inline purposes at 50 per group (`has_more_purposes`).
- * A product with more than 50 purposes would need the per-group purposes
- * endpoint to assemble a complete CORRECTION data-element list (follow-up).
- */
-export const consentGroupToFormProductGroup = (
-  group: ConsentGroup,
-): FormProductGroup => ({
-  product_uuid: group.product_uuid,
-  product_name: group.product_name,
-  product_description: group.product_description,
-  nominator: group.nominator,
-  purposes: (group.purposes ?? []).map(purposeItemToFormPurpose),
-});
-
-const purposeItemToFormPurpose = (purpose: PurposeItem): Purpose => ({
-  // The ledger keys purposes as `purpose_uuid`; the legacy Python
-  // user-consents payload keys some of them as `uuid`. Accept either so the
-  // picker and the submitted `purpose_uuid` resolve on both backends.
-  uuid: purpose.purpose_uuid ?? purpose.uuid ?? '',
-  purpose_uuid: purpose.purpose_uuid ?? purpose.uuid ?? '',
-  name: purpose.name,
-  description: purpose.description ?? '',
-  industries: '',
-  selected: false,
-  given_consent: false,
-  status: purpose.status,
-  validity: null,
-  enabled: true,
-  data_elements: (purpose.data_elements ?? []).map(
-    consentDataElementToFormDataElement,
-  ),
-});
-
-/**
- * Build a single synthetic product group from a backend's legacy flat
- * `form/data.purposes` list.
- *
- * Used as the last fallback for the DSAR picker: pre-grouping Python
- * deployments (and the popup / case-management contexts, which resolve an
- * arbitrary contact that the JWT-scoped user-consents endpoint cannot serve)
- * return purposes without any product grouping. Rendering them under one
- * group keeps the picker usable instead of showing "No products available"
- * while the response actually carries consents — it is the lone group, so the
- * product-selection step is skipped and the purpose list renders directly,
- * matching the pre-grouping UX.
- *
- * The group carries `LEGACY_PRODUCT_GROUP_UUID`, which the submit path uses to
- * omit the product anchor (there is no real product to scope the case to).
- */
-export const legacyFlatGroup = (
-  form: FormData,
-  label: string,
-): FormProductGroup => ({
-  product_uuid: LEGACY_PRODUCT_GROUP_UUID,
-  product_name: label,
-  product_description: null,
-  nominator: null,
-  purposes: (form.purposes ?? [])
-    .map((wrapper) => wrapper?.purpose)
-    .filter((purpose): purpose is Purpose => Boolean(purpose)),
-});
-
-const consentDataElementToFormDataElement = (
-  element: ConsentDataElement,
-): DataElement => ({
-  uuid: element.uuid,
-  name: element.name,
-  description: '',
-  enabled: element.enabled,
-  required: element.required,
-  given_consent: element.selected,
-  selected: element.selected,
-});
-
-/**
- * Build the per-purpose state used by `PurposeSelectionSection` for a single
- * product group. Mirrors the legacy `data.purposes`-derived shape so the
- * existing checkbox component works unchanged: data-elements default to
- * `selected: false` and purposes are filtered to those with at least one
- * data element.
- *
- * Lives in its own module so both `Form.tsx` (which seeds the per-group
- * state Map) and `ProductSelectionSection.tsx` (which computes the
- * activeCount shown on each product card) can share the same filter —
- * otherwise the card header drifts from the list-body it summarises.
- */
-export const buildGroupPurposes = (group: FormProductGroup): Purpose[] =>
-  group.purposes
-    .filter((p): p is Purpose => p !== null && p !== undefined)
-    .map((p) => {
-      const validDataElements = Array.isArray(p.data_elements)
-        ? p.data_elements
-            .filter((de) => de !== null && de !== undefined && Boolean(de.uuid))
-            .map((de) => ({ ...de, selected: false }))
-        : [];
-      return {
-        ...p,
-        selected: false,
-        data_elements: validDataElements,
-      };
-    })
-    .filter((p) => p.data_elements.length > 0);
-
-export type GroupCorrectionDataElement = DataElement & { purposeName: string };
-
-/**
- * Build a product-scoped deduped data-element list for grouped CORRECTION.
- * Dedup is done by data-element UUID within the product group.
- */
-export const buildGroupDataElements = (
-  group: FormProductGroup,
-): GroupCorrectionDataElement[] => {
-  const byUuid = new Map<string, GroupCorrectionDataElement>();
-  for (const purpose of group.purposes) {
-    if (!purpose) {
-      continue;
-    }
-    const dataElements = Array.isArray(purpose.data_elements)
-      ? purpose.data_elements
-      : [];
-    for (const de of dataElements) {
-      if (de && de.uuid && !byUuid.has(de.uuid)) {
-        byUuid.set(de.uuid, { ...de, purposeName: purpose.name });
-      }
-    }
-  }
-  return Array.from(byUuid.values());
-};

package/src/RedactoPrivacyCenter/components/receiptColumns.tsx

@@ -1,203 +0,0 @@
-import { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { createColumnHelper } from '@tanstack/react-table';
-import dayjs from 'dayjs';
-import { Download } from 'lucide-react';
-import { PCText, PCButton, PCBadge } from '../ui';
-import { pcStyles } from '../styles/pcStyles';
-import { STATUS_COLORS } from '../lib/constants';
-import { getVar } from '../lib/utils';
-import type { Receipt } from '../lib/types';
-
-const columnHelper = createColumnHelper<Receipt>();
-
-type EventPalette = { color: string; bg: string };
-type BadgeVariant = 'success' | 'error' | 'warning' | 'info';
-
-// Map the raw event_type enum to a status palette + a fallback i18n label.
-// The localized `event_type_display` from the API is preferred when present.
-const EVENT_PALETTE: Record<string, EventPalette> = {
-  GRANTED: STATUS_COLORS.success,
-  WITHDRAWN: STATUS_COLORS.warning,
-  DECLINED: STATUS_COLORS.error,
-  EXPIRED: STATUS_COLORS.warning,
-};
-
-const EVENT_LABEL_KEY: Record<string, string> = {
-  GRANTED: 'consentGranted',
-  WITHDRAWN: 'consentRevoked',
-  DECLINED: 'consentDeclined',
-  EXPIRED: 'consentExpired',
-};
-
-const FALLBACK_PALETTE: EventPalette = STATUS_COLORS.info;
-const EVENT_BADGE_VARIANT: Record<string, BadgeVariant> = {
-  GRANTED: 'success',
-  WITHDRAWN: 'warning',
-  DECLINED: 'error',
-  EXPIRED: 'warning',
-};
-
-// First two alphanumerics of the product name, e.g. "Website" → "WE", "Mobile App" → "MO".
-function getProductInitials(name: string): string {
-  const cleaned = name.replace(/[^a-zA-Z0-9]/g, '');
-  return cleaned.slice(0, 2).toUpperCase() || '?';
-}
-
-const cellPad = { paddingTop: pcStyles.pySm.paddingTop, paddingBottom: pcStyles.pySm.paddingBottom };
-
-export const useReceiptColumns = ({
-  onDownload,
-  downloadingUuid,
-}: {
-  onDownload: (receipt: Receipt) => void;
-  downloadingUuid: string | null;
-}) => {
-  const { t } = useTranslation();
-  return useMemo(
-    () => [
-      columnHelper.accessor('event_type', {
-        id: 'event',
-        header: t('event'),
-        cell: (info) => {
-          const row = info.row.original;
-          const raw = String(row.event_type ?? '').toUpperCase();
-          const palette = EVENT_PALETTE[raw] ?? FALLBACK_PALETTE;
-          const badgeVariant = EVENT_BADGE_VARIANT[raw] ?? 'info';
-          const labelKey = EVENT_LABEL_KEY[raw];
-          const label = row.event_type_display || (labelKey ? t(labelKey) : row.event_type || '—');
-          return (
-            <div style={cellPad}>
-              <PCBadge
-                variant={badgeVariant}
-                size="sm"
-                style={{
-                  display: 'inline-flex',
-                  alignItems: 'center',
-                  gap: '0.4375rem',
-                  fontWeight: 600,
-                  whiteSpace: 'nowrap',
-                }}
-              >
-                <span
-                  aria-hidden="true"
-                  style={{
-                    width: 7,
-                    height: 7,
-                    borderRadius: '50%',
-                    backgroundColor: palette.color,
-                    flexShrink: 0,
-                  }}
-                />
-                {label}
-              </PCBadge>
-            </div>
-          );
-        },
-        enableSorting: false,
-        enableColumnFilter: false,
-      }),
-      columnHelper.accessor('product_name', {
-        id: 'product',
-        header: t('product'),
-        cell: (info) => {
-          const row = info.row.original;
-          const name = row.product_name_display || row.product_name || '—';
-          return (
-            <div style={{ ...cellPad, display: 'flex', alignItems: 'center', gap: '0.625rem' }}>
-              <span
-                aria-hidden="true"
-                style={{
-                  display: 'inline-flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  width: 32,
-                  height: 32,
-                  borderRadius: 8,
-                  backgroundColor: getVar('--pc-bg-tertiary'),
-                  color: getVar('--pc-text-secondary'),
-                  border: `1px solid ${getVar('--pc-border-color')}`,
-                  fontSize: '0.6875rem',
-                  fontWeight: 600,
-                  flexShrink: 0,
-                }}
-              >
-                {getProductInitials(name)}
-              </span>
-              <PCText size="sm" weight="medium" color="primary">
-                {name}
-              </PCText>
-            </div>
-          );
-        },
-        enableSorting: false,
-        enableColumnFilter: false,
-      }),
-      columnHelper.accessor('created_at', {
-        id: 'date',
-        header: t('date'),
-        cell: (info) => {
-          const d = dayjs(info.getValue());
-          return (
-            <div style={cellPad}>
-              <PCText size="sm" color="primary" weight="medium">
-                {d.isValid() ? d.format('MMM D, YYYY') : '—'}
-              </PCText>
-            </div>
-          );
-        },
-        enableSorting: false,
-        enableColumnFilter: false,
-      }),
-      columnHelper.display({
-        id: 'time',
-        header: t('time'),
-        cell: (info) => {
-          const d = dayjs(info.row.original.created_at);
-          return (
-            <div style={cellPad}>
-              <PCText size="sm" color="secondary">
-                {d.isValid() ? d.format('h:mm A') : '—'}
-              </PCText>
-            </div>
-          );
-        },
-        enableSorting: false,
-        enableColumnFilter: false,
-      }),
-      columnHelper.display({
-        id: 'download',
-        header: t('download'),
-        meta: { align: 'right' },
-        cell: (info) => {
-          const row = info.row.original;
-          const isDownloading = downloadingUuid === row.uuid;
-          return (
-            <div style={{ ...cellPad, display: 'flex', justifyContent: 'flex-end' }}>
-              <PCButton
-                variant="outline"
-                size="sm"
-                isLoading={isDownloading}
-                disabled={isDownloading || !row.uuid}
-                onClick={() => onDownload(row)}
-                style={{
-                  display: 'inline-flex',
-                  alignItems: 'center',
-                  gap: '0.375rem',
-                  minWidth: '6.75rem',
-                  justifyContent: 'center',
-                }}
-              >
-                {!isDownloading && <Download size={15} strokeWidth={1.9} />}
-                {t('download')}
-              </PCButton>
-            </div>
-          );
-        },
-        enableSorting: false,
-        enableColumnFilter: false,
-      }),
-    ],
-    [t, onDownload, downloadingUuid]
-  );
-};

package/src/RedactoPrivacyCenter/components/types.ts

@@ -1,123 +0,0 @@
-import type { ComponentType, ReactNode } from 'react';
-import type { LucideProps } from 'lucide-react';
-import type {
-  Activity,
-  CaseRequest,
-  ConsentModalRecord,
-} 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;
-};
-
-/**
- * Single-case success surface. The Form's 1-form -> 1-case contract
- * means there is no fan-out and no partial-failure UI — every submit
- * produces exactly one `case_id`. `product_name` / `product_uuid` are
- * populated for product-scoped request types (ACCESS / ERASURE /
- * CORRECTION) and empty strings for org-level types (NOMINATION /
- * GRIEVANCE), in which case the success card omits the product label.
- */
-export type RequestSubmitResult = Readonly<{
-  case_id: string;
-  uuid: string;
-  product_name: string;
-  product_uuid: string;
-}>;
-
-export type RequestSubmitProps = Readonly<{
-  result: RequestSubmitResult;
-  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: ConsentModalRecord | null;
-  isLoading: boolean;
-  onManageConsent: (
-    purposeId: string,
-    action: import('../lib/types').ConsentAction,
-    nominatorContact?: string,
-    dataElementUuids?: string[],
-    productUuid?: string
-  ) => void;
-};
-
-// ─── Activity timeline ──────────────────────────────────────────────────────
-
-export type BadgeVariant = 'success' | 'error' | 'warning' | 'info' | 'secondary';
-
-export type ActivityCategory = {
-  variant: BadgeVariant;
-  Icon: ComponentType<LucideProps>;
-};
-
-export type MarkerTint = Readonly<{
-  color: string;
-  bg: string;
-}>;
-
-export type ActivityDateGroup = {
-  key: string;
-  label: string;
-  newest: string;
-  items: Activity[];
-};
-
-export type ActivityTimelineProps = Readonly<{
-  activities: Activity[];
-}>;
-
-export type TimelineRowProps = Readonly<{
-  activity: Activity;
-}>;
-