@redacto.io/consent-sdk-react 3.4.0 → 3.6.0

package/src/RedactoPrivacyCenter/components/ConsentManager.tsx

@@ -0,0 +1,726 @@
+import { useState, useEffect, useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PCInput, PCSelect, PCButton, PCText, PCModal, type SelectOption } from '../ui';
+import { Search, ArrowUpToLine } from 'lucide-react';
+import { pcStyles } from '../styles/pcStyles';
+import { AdvancedTable, AdvancedTablePagination } from '../table';
+import { getCoreRowModel, useReactTable } from '@tanstack/react-table';
+import {
+  fetchUserConsents,
+  manageConsent,
+} from '../lib/api';
+import { useOrganization } from '../context/OrganizationContext';
+import { useAuth } from '../context/AuthContext';
+import { useBaseUrl } from '../context/BaseUrlContext';
+import type { UserConsent, UserConsentDetail, ProductConsentHistoryGroup, ConsentAction } from '../lib/types';
+import { useCurrentLanguage } from '../lib/useCurrentLanguage';
+import { exportTableToCSV, useStatusOptions } from '../lib/consent-manager/utils';
+import { toast } from '../utils/toast';
+import { ConsentManagerTableSkeleton } from './ConsentManagerTableSkeleton';
+import { ModifyConsentModal } from './ModifyConsentModal';
+import { useConsentManagerColumns } from './ConsentManagerColumns';
+import type {
+  ConsentManagerProps,
+  StatusFilterOption,
+  ProductFilterOption,
+} from './types';
+import {
+  SEARCH_DEBOUNCE_DELAY,
+  DEFAULT_PAGE,
+  DEFAULT_PAGE_SIZE,
+} from './ConsentManagerConstants';
+
+export default function ConsentManager({ variant }: ConsentManagerProps) {
+  const { t } = useTranslation();
+  const statusOptions = useStatusOptions();
+  const { organization } = useOrganization();
+  const { accessToken, refreshToken, onError, updateTokens } = useAuth();
+  const { consentClient } = useBaseUrl();
+  const organizationId = organization?.uuid;
+  const workspaceId = organization?.workspaces[0]?.uuid;
+  const contact = sessionStorage.getItem('email') || '';
+
+  // Create auth context object for API calls - memoized to prevent infinite loops
+  const authContext = useMemo(() => ({
+    accessToken,
+    refreshToken,
+    onError,
+    updateTokens,
+  }), [accessToken, refreshToken, onError, updateTokens]);
+
+  // Track language changes for localized API calls
+  const { langParam } = useCurrentLanguage();
+
+  // State management
+  const [activeTab, setActiveTab] = useState<'direct' | 'nominated'>('direct');
+  const [consentDetail, setConsentDetail] = useState<UserConsentDetail | null>(null);
+  const [consentData, setConsentData] = useState<UserConsent[]>([]);
+  const [totalCount, setTotalCount] = useState(0);
+  const [isLoading, setIsLoading] = useState(true);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [debouncedSearch, setDebouncedSearch] = useState('');
+  const [statusFilter, setStatusFilter] = useState<StatusFilterOption | null>(
+    null
+  );
+  const [productFilter, setProductFilter] =
+    useState<ProductFilterOption | null>(null);
+  const [productOptions, setProductOptions] = useState<ProductFilterOption[]>(
+    []
+  );
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [selectedRecord, setSelectedRecord] = useState<UserConsent | null>(
+    null
+  );
+  const [exportModal, setExportModal] = useState(false);
+  const [isManageLoading, setIsManageLoading] = useState(false);
+  const [currentPage, setCurrentPage] = useState(DEFAULT_PAGE);
+  const [pageSize, setPageSize] = useState(DEFAULT_PAGE_SIZE);
+
+  // Sync selected status filter label when language changes
+  useEffect(() => {
+    if (statusFilter) {
+      const updated = statusOptions.find(opt => opt.value === statusFilter.value);
+      if (updated && updated.label !== statusFilter.label) {
+        setStatusFilter(updated);
+      }
+    }
+  }, [statusOptions, statusFilter]);
+
+  // Sync selected product filter label when language changes
+  useEffect(() => {
+    if (productFilter) {
+      const updated = productOptions.find(opt => opt.value === productFilter.value);
+      if (updated && updated.label !== productFilter.label) {
+        setProductFilter(updated);
+      }
+    }
+  }, [productOptions, productFilter]);
+
+  // Debounce search query
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedSearch(searchQuery);
+    }, SEARCH_DEBOUNCE_DELAY);
+    return () => clearTimeout(timer);
+  }, [searchQuery]);
+
+  const handleOpenModal = useCallback((record: UserConsent) => {
+    setSelectedRecord(record);
+    setIsModalOpen(true);
+  }, []);
+
+  const handleCloseModal = useCallback(() => {
+    setIsModalOpen(false);
+    setSelectedRecord(null);
+  }, []);
+
+  const flattenProductGroups = useCallback(
+    (groups: ProductConsentHistoryGroup[] | undefined): UserConsent[] => {
+      if (!groups || groups.length === 0) return [];
+      return groups.flatMap((group) =>
+        (group.purposes || []).map((purpose) => ({
+          ...purpose,
+          product_uuid: purpose.product_uuid ?? group.product_uuid,
+          product_name: purpose.product_name ?? group.product_name,
+          product_description: purpose.product_description ?? group.product_description ?? null,
+        }))
+      );
+    },
+    []
+  );
+
+  const filterConsentRows = useCallback(
+    (
+      rows: UserConsent[],
+      search: string,
+      statusValue?: string,
+      productUuid?: string
+    ) => {
+      const normalizedSearch = search.trim().toLowerCase();
+
+      return rows.filter((row) => {
+        const matchesSearch =
+          !normalizedSearch ||
+          [
+            row.purpose,
+            row.purpose_description,
+            row.product_name,
+            row.product_description,
+            row.method,
+            row.status,
+          ]
+            .filter(Boolean)
+            .some((value) =>
+              String(value).toLowerCase().includes(normalizedSearch)
+            );
+
+        const matchesStatus =
+          !statusValue || row.status?.toLowerCase() === statusValue.toLowerCase();
+
+        const matchesProduct =
+          !productUuid || row.product_uuid === productUuid;
+
+        return matchesSearch && matchesStatus && matchesProduct;
+      });
+    },
+    []
+  );
+
+  const buildProductOptionsFromGroups = useCallback(
+    (groups: ProductConsentHistoryGroup[] | undefined) => {
+      if (!groups || groups.length === 0) return [];
+      const productMap = new Map<string, { label: string; value: string }>();
+      groups.forEach((group) => {
+        if (!productMap.has(group.product_uuid)) {
+          productMap.set(group.product_uuid, {
+            label: group.product_name,
+            value: group.product_uuid,
+          });
+        }
+      });
+      return Array.from(productMap.values());
+    },
+    []
+  );
+
+  const getNominatedProductGroups = useCallback(
+    (detail: UserConsentDetail | null | undefined): ProductConsentHistoryGroup[] => {
+      if (!detail?.nominated_purposes || detail.nominated_purposes.length === 0) {
+        return [];
+      }
+      return detail.nominated_purposes.flatMap((np) =>
+        (np.product_groups || []).map((group) => ({
+          ...group,
+          purposes: group.purposes.map((purpose) => ({
+            ...purpose,
+            nominator_info: np.nominator_info,
+          })),
+        }))
+      );
+    },
+    []
+  );
+
+  const columns = useConsentManagerColumns({
+    onOpenModal: handleOpenModal,
+  });
+
+  // Single data fetch function
+  const fetchData = useCallback(async () => {
+    if (!organizationId || !workspaceId || !contact) {
+      return;
+    }
+
+    setIsLoading(true);
+    try {
+      const offset = (currentPage - 1) * pageSize;
+      const searchParam = debouncedSearch.trim() || undefined;
+      const statusParam = statusFilter?.value;
+      const productUuidParam = productFilter?.value;
+
+      const response = await fetchUserConsents(
+        organizationId,
+        workspaceId,
+        contact,
+        offset,
+        pageSize,
+        searchParam,
+        statusParam,
+        productUuidParam,
+        authContext,
+        consentClient,
+        langParam
+      );
+
+      if (!response) {
+        throw new Error('Failed to fetch consent data');
+      }
+
+      setConsentDetail(response);
+
+      const directGroups = response?.direct_product_groups;
+      const nominatedGroups = getNominatedProductGroups(response);
+
+      const selectedGroups =
+        activeTab === 'direct' ? directGroups : nominatedGroups;
+      const flattenedRows = flattenProductGroups(selectedGroups);
+      const filteredRows = filterConsentRows(
+        flattenedRows,
+        debouncedSearch,
+        statusParam,
+        productUuidParam
+      );
+      setConsentData(filteredRows);
+
+      const directCount = response?.status_summary?.direct_purposes;
+      const nominatedCount = response?.status_summary?.nominated_purposes;
+      const fallbackTotal = response?.pagination?.total_count ?? 0;
+      const hasActiveFilters = Boolean(searchParam || statusParam || productUuidParam);
+      setTotalCount(
+        hasActiveFilters
+          ? filteredRows.length
+          : activeTab === 'direct'
+            ? (directCount ?? fallbackTotal)
+            : (nominatedCount ?? fallbackTotal)
+      );
+
+      // Extract unique products from all groups
+      const combinedGroups = [
+        ...(response?.direct_product_groups || []),
+        ...nominatedGroups,
+      ];
+      setProductOptions(buildProductOptionsFromGroups(combinedGroups));
+    } catch (error) {
+      console.error(error);
+      setConsentDetail(null);
+      setConsentData([]);
+      setTotalCount(0);
+      setProductOptions([]);
+      toast.error(t('failedToFetchConsentData'));
+    } finally {
+      setIsLoading(false);
+    }
+  }, [
+    organizationId,
+    workspaceId,
+    contact,
+    currentPage,
+    pageSize,
+    debouncedSearch,
+    statusFilter?.value,
+    productFilter?.value,
+    activeTab,
+    authContext,
+    consentClient,
+    langParam,
+    flattenProductGroups,
+    filterConsentRows,
+    buildProductOptionsFromGroups,
+    getNominatedProductGroups,
+    t,
+  ]);
+
+  // Single effect for data fetching
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  const table = useReactTable<UserConsent>({
+    data: consentData,
+    columns: columns,
+    getCoreRowModel: getCoreRowModel(),
+    manualPagination: true,
+    pageCount: Math.ceil(totalCount / pageSize) || 0,
+    state: {
+      pagination: {
+        pageIndex: currentPage - 1,
+        pageSize: pageSize,
+      },
+    },
+    onPaginationChange: (updater) => {
+      const next =
+        typeof updater === 'function'
+          ? updater({ pageIndex: currentPage - 1, pageSize })
+          : updater;
+      const nextPage = (next as any).pageIndex + 1;
+      const nextSize = (next as any).pageSize;
+      if (nextPage === currentPage && nextSize === pageSize) return;
+      setCurrentPage(nextPage);
+      setPageSize(nextSize);
+    },
+  });
+
+  const handleStatusFilterChange = (data: SelectOption | null) => {
+    setStatusFilter(data as StatusFilterOption | null);
+    setCurrentPage(DEFAULT_PAGE);
+  };
+
+  const handleProductFilterChange = (data: SelectOption | null) => {
+    setProductFilter(data as ProductFilterOption | null);
+    setCurrentPage(DEFAULT_PAGE);
+  };
+
+  const handleTabChange = (tab: 'direct' | 'nominated') => {
+    setActiveTab(tab);
+    setCurrentPage(DEFAULT_PAGE);
+  };
+
+  const handleExport = useCallback(() => {
+    const value = table.getRowModel().rows.map((r) => {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const { purpose_uuid, nominator_info, ...rowWithoutInternalFields } = r.original;
+      return rowWithoutInternalFields;
+    });
+    exportTableToCSV(value);
+    setExportModal(false);
+  }, [table]);
+
+  const handleManageConsent = useCallback(
+    async (
+      purposeId: string,
+      action: ConsentAction,
+      nominatorContact?: string,
+      dataElementUuids?: string[]
+    ) => {
+      if (!organizationId || !workspaceId || !contact) {
+        toast.error(t('missingInfoToManage'));
+        return;
+      }
+
+      setIsManageLoading(true);
+
+      const successMessages: Record<ConsentAction, string> = {
+        revoke: t('consentRevokedSuccess'),
+        regrant: t('consentRegrantedSuccess'),
+        renew: t('consentRenewedSuccess'),
+      };
+
+      const errorMessages: Record<ConsentAction, string> = {
+        revoke: t('unableToRevokeConsent'),
+        regrant: t('unableToRegrantConsent'),
+        renew: t('unableToRenewConsent'),
+      };
+
+      try {
+        const response = await manageConsent({
+          organizationId,
+          workspaceId,
+          purposeId,
+          contact,
+          action,
+          authContext,
+          consentClient,
+          nominatorContact,
+          dataElementUuids,
+        });
+
+        if (response) {
+          toast.success(successMessages[action]);
+          await fetchData();
+        } else {
+          toast.error(errorMessages[action]);
+        }
+      } catch (error: any) {
+        console.error(`Error ${action} consent:`, error);
+        if (error?.code === 'NOMINATOR_NOT_FOUND') {
+          toast.error(t('nominatorNotFound'));
+        } else if (error?.code === 'NOMINEE_MUST_SPECIFY_NOMINATOR') {
+          toast.error(t('nomineeMustSpecifyNominator'));
+        } else {
+          toast.error(errorMessages[action]);
+        }
+      } finally {
+        setIsManageLoading(false);
+        handleCloseModal();
+      }
+    },
+    [organizationId, workspaceId, contact, fetchData, handleCloseModal, t, authContext, consentClient]
+  );
+
+  const getVar = (varName: string): string => `var(${varName})`;
+
+  const directBadge =
+    consentDetail?.status_summary?.direct_purposes ??
+    (activeTab === 'direct' ? totalCount : '');
+
+  const nominatedBadge: number | '' =
+    consentDetail?.status_summary?.nominated_purposes ??
+    (activeTab === 'nominated' ? totalCount : '');
+
+  const renderUserRelationshipStrip = () => {
+    if (!consentDetail) return null;
+
+    const status = consentDetail.user_status;
+    let statusLabel: string | null = null;
+    let statusBgColor: string | null = null;
+    let statusTextColor: string | null = null;
+    if (status === 'ACTIVE') {
+      statusLabel = t('statusActive');
+      statusBgColor = 'rgba(16, 185, 129, 0.1)';
+      statusTextColor = getVar('--pc-success');
+    } else if (status === 'TRANSFERRED') {
+      statusLabel = t('statusTransferred');
+      statusBgColor = 'rgba(245, 158, 11, 0.1)';
+      statusTextColor = getVar('--pc-warning');
+    }
+
+    const nominators = consentDetail.nominators || [];
+    const nominatorLabels = nominators
+      .map((n) => n.email?.trim() || n.org_user_id?.trim() || n.uuid?.trim() || '')
+      .filter(Boolean);
+
+    const hasAnyInfo = Boolean(statusLabel) || nominatorLabels.length > 0;
+    if (!hasAnyInfo) return null;
+
+    return (
+      <div style={{
+        marginBottom: getVar('--pc-spacing-md'),
+        borderRadius: getVar('--pc-border-radius-lg'),
+        border: `1px solid ${getVar('--pc-border-color')}`,
+        backgroundColor: getVar('--pc-bg-secondary'),
+        padding: getVar('--pc-spacing-md'),
+      }}>
+        <div style={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: getVar('--pc-spacing-sm'),
+        }} className="pc-flex-responsive">
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
+            <PCText size="sm" weight="semibold" style={{ margin: 0, color: getVar('--pc-text-primary') }}>
+              {t('consentVisibility')}
+            </PCText>
+            {nominatorLabels.length > 0 && (
+              <PCText size="sm" style={{ margin: 0, color: getVar('--pc-text-secondary') }}>
+                {t('managingConsentsFor')}{' '}
+                <span style={{ fontWeight: 600, color: getVar('--pc-text-primary') }}>
+                  {nominatorLabels.join(', ')}
+                </span>
+              </PCText>
+            )}
+          </div>
+          {statusLabel && (
+            <div style={{ flexShrink: 0 }}>
+              <span style={{
+                display: 'inline-flex',
+                alignItems: 'center',
+                borderRadius: '9999px',
+                padding: '0.25rem 0.75rem',
+                fontSize: getVar('--pc-font-size-xs'),
+                fontWeight: 600,
+                backgroundColor: statusBgColor!,
+                color: statusTextColor!,
+              }}>
+                {statusLabel}
+              </span>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div style={{ width: '100%' }}>
+      {/* User Relationship Strip */}
+      {renderUserRelationshipStrip()}
+
+      <div
+        style={{
+          borderRadius: getVar('--pc-border-radius-lg'),
+          border: `1px solid ${getVar('--pc-border-color')}`,
+          backgroundColor: getVar('--pc-bg-primary'),
+          boxShadow: getVar('--pc-shadow-sm'),
+          padding: getVar('--pc-spacing-md'),
+          marginBottom: getVar('--pc-spacing-lg'),
+        }}
+      >
+        {/* Tabs: My Consents / Managing */}
+        <div style={{
+          display: 'flex',
+          borderBottom: `1px solid ${getVar('--pc-border-color')}`,
+          marginBottom: getVar('--pc-spacing-md'),
+          paddingBottom: '0.125rem',
+        }}>
+          <button
+            type="button"
+            onClick={() => handleTabChange('direct')}
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: getVar('--pc-spacing-sm'),
+              padding: `${getVar('--pc-spacing-sm')} ${getVar('--pc-spacing-md')}`,
+              fontSize: getVar('--pc-font-size-sm'),
+              fontWeight: 600,
+              background: 'none',
+              border: 'none',
+              cursor: 'pointer',
+              borderBottom: activeTab === 'direct' ? `2px solid ${getVar('--pc-primary')}` : '2px solid transparent',
+              color: activeTab === 'direct' ? getVar('--pc-primary') : getVar('--pc-text-secondary'),
+              transition: 'color 0.2s, border-color 0.2s',
+            }}
+          >
+            {t('myConsents')}
+            <span style={{
+              borderRadius: '9999px',
+              backgroundColor: getVar('--pc-bg-tertiary'),
+              padding: '0.125rem 0.5rem',
+              fontSize: getVar('--pc-font-size-xs'),
+              color: getVar('--pc-text-secondary'),
+            }}>
+              {directBadge}
+            </span>
+          </button>
+          <button
+            type="button"
+            onClick={() => handleTabChange('nominated')}
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: getVar('--pc-spacing-sm'),
+              padding: `${getVar('--pc-spacing-sm')} ${getVar('--pc-spacing-md')}`,
+              fontSize: getVar('--pc-font-size-sm'),
+              fontWeight: 600,
+              background: 'none',
+              border: 'none',
+              cursor: 'pointer',
+              borderBottom: activeTab === 'nominated' ? `2px solid ${getVar('--pc-primary')}` : '2px solid transparent',
+              color: activeTab === 'nominated' ? getVar('--pc-primary') : getVar('--pc-text-secondary'),
+              transition: 'color 0.2s, border-color 0.2s',
+            }}
+          >
+            {t('managing')}
+            <span style={{
+              borderRadius: '9999px',
+              backgroundColor: getVar('--pc-bg-tertiary'),
+              padding: '0.125rem 0.5rem',
+              fontSize: getVar('--pc-font-size-xs'),
+              color: getVar('--pc-text-secondary'),
+            }}>
+              {nominatedBadge}
+            </span>
+          </button>
+        </div>
+
+        {/* Filters Section: Search on left, filters and export on the right */}
+        <div style={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: getVar('--pc-spacing-md'),
+          width: '100%',
+        }} className="pc-filters-responsive">
+          <div style={{ width: '100%' }} className="pc-search-responsive">
+            <PCInput
+              type="search"
+              clearable
+              placeholder={t('search')}
+              value={searchQuery}
+              onClear={() => {
+                setSearchQuery('');
+                setCurrentPage(DEFAULT_PAGE);
+              }}
+              prefix={<Search size={18} strokeWidth={1.8} />}
+              onChange={(e) => {
+                setSearchQuery(e.target.value);
+                setCurrentPage(DEFAULT_PAGE);
+              }}
+              style={{
+                width: '100%',
+              }}
+            />
+          </div>
+
+          <div style={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: getVar('--pc-spacing-md'),
+            width: '100%',
+          }} className="pc-filters-row-responsive">
+            <PCSelect
+              className="pc-filter-select"
+              placeholder={t('status')}
+              options={statusOptions}
+              value={statusFilter}
+              onChange={handleStatusFilterChange}
+              onClear={() => setStatusFilter(null)}
+              clearable={statusFilter !== null}
+              dropdownMatchTriggerWidth
+              style={{
+                width: '100%',
+              }}
+            />
+            <PCSelect
+              className="pc-filter-select"
+              placeholder={t('product')}
+              searchable
+              options={productOptions}
+              value={productFilter}
+              onChange={handleProductFilterChange}
+              onClear={() => setProductFilter(null)}
+              clearable={productFilter !== null}
+              dropdownMatchTriggerWidth
+              style={{
+                width: '100%',
+              }}
+            />
+            <div className="pc-export-button-responsive">
+              <PCButton
+                variant="outline"
+                onClick={() => setExportModal(true)}
+                style={{
+                  whiteSpace: 'nowrap',
+                  width: '100%',
+                  minHeight: '2.25rem',
+                  padding: '0.4375rem 0.875rem',
+                }}
+              >
+                <ArrowUpToLine size={16} />
+                <span>{t('export')}</span>
+              </PCButton>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <PCModal
+        isOpen={exportModal}
+        onClose={() => setExportModal(false)}
+        size="sm"
+        title={
+          <div style={{ minWidth: 0, flex: 1, paddingRight: getVar('--pc-spacing-sm') }}>
+            <PCText size="base" weight="semibold" style={{ margin: 0, color: getVar('--pc-text-primary') }}>
+              {t('exportConsentData')}
+            </PCText>
+            <PCText
+              size="xs"
+              color="secondary"
+              style={{ marginTop: pcStyles.mtXs.marginTop, marginBottom: 0, lineHeight: 1.5 }}
+            >
+              {t('exportConsentDataSubtitle')}
+            </PCText>
+          </div>
+        }
+        footer={
+          <div className="pc-modal-footer-actions">
+            <PCButton variant="outline" onClick={() => setExportModal(false)}>
+              {t('cancel')}
+            </PCButton>
+            <PCButton variant="primary" onClick={handleExport}>
+              {t('export')}
+            </PCButton>
+          </div>
+        }
+      >
+        <div style={{ ...pcStyles.flex, ...pcStyles.flexCol, gap: pcStyles.gapSm.gap }}>
+          <PCText size="sm" color="secondary" style={{ margin: 0, lineHeight: 1.6 }}>
+            {t('exportingIncludesFilters')}
+          </PCText>
+        </div>
+      </PCModal>
+
+      {isLoading ? (
+        <ConsentManagerTableSkeleton />
+      ) : (
+        <AdvancedTable table={table} variant={variant} isLoading={isLoading} />
+      )}
+
+      {/* Always show pagination, even during loading */}
+      <div style={{
+        ...pcStyles.flex,
+        ...pcStyles.flexCol,
+        ...pcStyles.itemsCenter,
+        ...pcStyles.justifyBetween,
+        ...pcStyles.gapSm,
+      }} className="pc-flex-responsive">
+        <AdvancedTablePagination table={table} />
+      </div>
+
+      <ModifyConsentModal
+        isOpen={isModalOpen}
+        onClose={handleCloseModal}
+        selectedRecord={selectedRecord}
+        isLoading={isManageLoading}
+        onManageConsent={handleManageConsent}
+      />
+    </div>
+  );
+}