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

package/src/RedactoPrivacyCenter/components/ReceiptsList.tsx

@@ -1,454 +0,0 @@
-import { useState, useEffect, useCallback, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { getCoreRowModel, useReactTable } from '@tanstack/react-table';
-import dayjs from 'dayjs';
-import { CalendarDays, Filter } from 'lucide-react';
-import { AdvancedTable, AdvancedTablePagination } from '../table';
-import { PCSelect, PCInput, PCButton, PCText, type SelectOption } from '../ui';
-import { pcStyles } from '../styles/pcStyles';
-import { getVar } from '../lib/utils';
-import { fetchReceipts, fetchReceiptPdf } from '../lib/api';
-import { useOrganization } from '../context/OrganizationContext';
-import { useAuth } from '../context/AuthContext';
-import { useBaseUrl } from '../context/BaseUrlContext';
-import { useCurrentLanguage } from '../lib/useCurrentLanguage';
-import { toast } from '../utils/toast';
-import type { Receipt, ReceiptEventType } from '../lib/types';
-import { useReceiptColumns } from './receiptColumns';
-
-/**
- * Normalize the (still-evolving) receipts response into rows + total.
- * Defensive about the wrapper shape ({data} | {items} | array) and the total
- * key so the table works regardless of the exact envelope the API returns.
- */
-function normalizeReceipts(resp: unknown): { rows: Receipt[]; total: number } {
-  if (!resp || typeof resp !== 'object') return { rows: [], total: 0 };
-  const r = resp as Record<string, unknown>;
-  const arr = (Array.isArray(resp)
-    ? resp
-    : [r.data, r.items, r.receipts, r.results].find(Array.isArray)) as unknown[] | undefined;
-  const rows: Receipt[] = (arr ?? []).map((row) => {
-    const rec = (row ?? {}) as Record<string, unknown>;
-    // The receipt id field name may vary — coerce it so downloads always work.
-    return { ...rec, uuid: (rec.uuid ?? rec.receipt_uuid ?? rec.id ?? '') as string } as Receipt;
-  });
-  const pag = (r.pagination ?? r.meta ?? {}) as Record<string, unknown>;
-  const totalRaw = pag.total_count ?? pag.total ?? r.total_count ?? r.total ?? r.count ?? rows.length;
-  const total = Number(totalRaw);
-  return { rows, total: Number.isFinite(total) ? total : rows.length };
-}
-
-/**
- * Map the date filter (preset or custom range) to the API's inclusive
- * created_after / created_before ISO datetimes.
- */
-function dateRangeParams(
-  preset: string,
-  from: string,
-  to: string
-): { created_after?: string; created_before?: string } {
-  if (preset === 'custom') {
-    return {
-      created_after: from ? dayjs(from).startOf('day').toISOString() : undefined,
-      created_before: to ? dayjs(to).endOf('day').toISOString() : undefined,
-    };
-  }
-  if (preset === '1') {
-    return { created_after: dayjs().startOf('day').toISOString() };
-  }
-  if (preset === '7' || preset === '30' || preset === '90') {
-    return { created_after: dayjs().subtract(Number(preset), 'day').startOf('day').toISOString() };
-  }
-  return {};
-}
-
-export default function ReceiptsList() {
-  const { t } = useTranslation();
-  const { organization } = useOrganization();
-  const { accessToken, refreshToken, onError, updateTokens } = useAuth();
-  const { consentClient } = useBaseUrl();
-  const { langParam } = useCurrentLanguage();
-
-  const organizationId = organization?.uuid;
-  const workspaceId = organization?.workspaces[0]?.uuid;
-
-  const authContext = useMemo(
-    () => ({ accessToken, refreshToken, onError, updateTokens }),
-    [accessToken, refreshToken, onError, updateTokens]
-  );
-
-  const [receipts, setReceipts] = useState<Receipt[]>([]);
-  const [totalCount, setTotalCount] = useState(0);
-  const [isLoading, setIsLoading] = useState(false);
-  const [currentPage, setCurrentPage] = useState(1);
-  const [pageSize, setPageSize] = useState(10);
-  const [downloadingUuid, setDownloadingUuid] = useState<string | null>(null);
-  // Keep showing prior rows while a new page loads (smooth pagination).
-  const [previousData, setPreviousData] = useState<Receipt[]>([]);
-  const [previousTotalCount, setPreviousTotalCount] = useState(0);
-
-  // ─── Filters ────────────────────────────────────────────────────────────────
-  const [eventType, setEventType] = useState<ReceiptEventType | ''>('');
-  const [datePreset, setDatePreset] = useState<string>(''); // '' | '1' | '7' | '30' | '90' | 'custom'
-  const [customFrom, setCustomFrom] = useState<string>('');
-  const [customTo, setCustomTo] = useState<string>('');
-
-  const eventTypeOptions = useMemo<SelectOption[]>(
-    () => [
-      { value: '', label: t('all') },
-      { value: 'GRANTED', label: t('consentGranted') },
-      { value: 'WITHDRAWN', label: t('consentRevoked') },
-      { value: 'DECLINED', label: t('consentDeclined') },
-      { value: 'EXPIRED', label: t('consentExpired') },
-    ],
-    [t]
-  );
-  const dateOptions = useMemo<SelectOption[]>(
-    () => [
-      { value: '', label: t('allTime') },
-      { value: '1', label: t('today') },
-      { value: '7', label: t('last7Days') },
-      { value: '30', label: t('last30Days') },
-      { value: '90', label: t('last3Months') },
-      { value: 'custom', label: t('customRange') },
-    ],
-    [t]
-  );
-
-  const eventValue = eventTypeOptions.find((o) => o.value === eventType) ?? null;
-  const dateValue = dateOptions.find((o) => o.value === datePreset) ?? null;
-  const hasActiveFilters = Boolean(eventType || datePreset);
-  const isCustomRangeInvalid = useMemo(
-    () =>
-      datePreset === 'custom' &&
-      Boolean(customFrom && customTo && dayjs(customFrom).isAfter(dayjs(customTo), 'day')),
-    [datePreset, customFrom, customTo]
-  );
-
-  const activeFilterLabels = useMemo(() => {
-    const filters: { id: string; label: string; value: string }[] = [];
-
-    if (eventType && eventValue?.label) {
-      filters.push({ id: 'event', label: t('event'), value: eventValue.label });
-    }
-    if (datePreset && dateValue?.label) {
-      let dateLabel = dateValue.label;
-      if (datePreset === 'custom') {
-        const fromLabel = customFrom ? dayjs(customFrom).format('DD MMM YYYY') : t('from');
-        const toLabel = customTo ? dayjs(customTo).format('DD MMM YYYY') : t('to');
-        dateLabel = `${fromLabel} - ${toLabel}`;
-      }
-      filters.push({ id: 'dateRange', label: t('dateRange'), value: dateLabel });
-    }
-
-    return filters;
-  }, [eventType, eventValue, datePreset, dateValue, customFrom, customTo, t]);
-
-  const handleEventChange = (opt: SelectOption | null) => {
-    setEventType((opt ? String(opt.value) : '') as ReceiptEventType | '');
-    setCurrentPage(1);
-  };
-  const handleDateChange = (opt: SelectOption | null) => {
-    const nextDatePreset = opt ? String(opt.value) : '';
-    setDatePreset(nextDatePreset);
-    if (nextDatePreset !== 'custom') {
-      setCustomFrom('');
-      setCustomTo('');
-    }
-    setCurrentPage(1);
-  };
-  const handleClearFilters = () => {
-    setEventType('');
-    setDatePreset('');
-    setCustomFrom('');
-    setCustomTo('');
-    setCurrentPage(1);
-  };
-
-  const handleGetReceipts = useCallback(
-    async (page: number = currentPage, size: number = pageSize) => {
-      if (!organizationId || !workspaceId) return;
-      if (isCustomRangeInvalid) return;
-      setIsLoading(true);
-      try {
-        const skip = (page - 1) * size;
-        const { created_after, created_before } = dateRangeParams(datePreset, customFrom, customTo);
-        const response = await fetchReceipts(
-          organizationId,
-          workspaceId,
-          {
-            skip,
-            limit: size,
-            event_type: eventType || undefined,
-            created_after,
-            created_before,
-            language: langParam,
-          },
-          authContext,
-          consentClient
-        );
-        const { rows, total } = normalizeReceipts(response);
-        setReceipts(rows);
-        setTotalCount(total);
-        if (page !== currentPage) setCurrentPage(page);
-        if (size !== pageSize) setPageSize(size);
-      } catch (error) {
-        console.error('[My Receipt] failed to fetch receipts:', error);
-        setReceipts([]);
-        setTotalCount(0);
-        setPreviousData([]);
-        setPreviousTotalCount(0);
-        toast.error(t('failedToFetchReceipts'));
-      } finally {
-        setIsLoading(false);
-      }
-    },
-    [
-      organizationId,
-      workspaceId,
-      currentPage,
-      pageSize,
-      eventType,
-      datePreset,
-      customFrom,
-      customTo,
-      isCustomRangeInvalid,
-      authContext,
-      consentClient,
-      langParam,
-      t,
-    ]
-  );
-
-  const handleDownload = useCallback(
-    async (receipt: Receipt) => {
-      if (!organizationId || !workspaceId || !receipt.uuid) return;
-      setDownloadingUuid(receipt.uuid);
-      try {
-        const blob = await fetchReceiptPdf(
-          organizationId,
-          workspaceId,
-          receipt.uuid,
-          authContext,
-          consentClient
-        );
-        if (!blob) throw new Error('No PDF returned');
-        const url = URL.createObjectURL(blob);
-        const link = document.createElement('a');
-        link.href = url;
-        link.download = `receipt-${receipt.uuid}.pdf`;
-        document.body.appendChild(link);
-        link.click();
-        link.remove();
-        URL.revokeObjectURL(url);
-      } catch (error) {
-        console.error('[My Receipt] failed to download receipt PDF:', error);
-        toast.error(t('failedToDownloadReceipt'));
-      } finally {
-        setDownloadingUuid(null);
-      }
-    },
-    [organizationId, workspaceId, authContext, consentClient, t]
-  );
-
-  const columns = useReceiptColumns({ onDownload: handleDownload, downloadingUuid });
-
-  // Preserve previous data when a new page starts loading.
-  useEffect(() => {
-    if (receipts.length > 0) {
-      setPreviousData(receipts);
-      setPreviousTotalCount(totalCount);
-    }
-  }, [receipts, totalCount]);
-
-  useEffect(() => {
-    void handleGetReceipts();
-  }, [organizationId, workspaceId, handleGetReceipts]);
-
-  const displayData = isLoading && receipts.length === 0 ? previousData : receipts;
-  const displayTotalCount = isLoading && totalCount === 0 ? previousTotalCount : totalCount;
-
-  const table = useReactTable<Receipt>({
-    data: displayData,
-    columns,
-    getCoreRowModel: getCoreRowModel(),
-    manualPagination: true,
-    pageCount: Math.ceil(displayTotalCount / pageSize) || 0,
-    state: {
-      pagination: {
-        pageIndex: currentPage - 1,
-        pageSize,
-      },
-    },
-    onPaginationChange: (updater) => {
-      const next =
-        typeof updater === 'function'
-          ? updater({ pageIndex: currentPage - 1, pageSize })
-          : updater;
-      const nextPage = (next as { pageIndex: number }).pageIndex + 1;
-      const nextSize = (next as { pageSize: number }).pageSize;
-      if (nextPage === currentPage && nextSize === pageSize) return;
-      setCurrentPage(nextPage);
-      setPageSize(nextSize);
-      void handleGetReceipts(nextPage, nextSize);
-    },
-  });
-
-  return (
-    <div
-      style={{
-        width: '100%',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: getVar('--pc-spacing-md'),
-      }}
-    >
-      {/* Filters */}
-      <section className="pc-receipts-filters-card">
-        <div className="pc-receipts-filters-header">
-          <div style={{ minWidth: 0 }}>
-            <PCText
-              as="p"
-              size="sm"
-              weight="semibold"
-              style={{
-                margin: 0,
-                display: 'inline-flex',
-                alignItems: 'center',
-                gap: '0.375rem',
-              }}
-            >
-              <Filter size={13} strokeWidth={1.9} />
-              {t('filterReceipts')}
-            </PCText>
-            <PCText as="p" size="xs" color="secondary" style={{ margin: '0.1875rem 0 0' }}>
-              {t('receiptFiltersHint')}
-            </PCText>
-          </div>
-          <PCButton
-            size="sm"
-            variant="text"
-            disabled={!hasActiveFilters}
-            onClick={handleClearFilters}
-            style={{ whiteSpace: 'nowrap' }}
-          >
-            {t('clearFilters')}
-          </PCButton>
-        </div>
-
-        <div className="pc-receipts-filters-grid">
-          <PCSelect
-            className="pc-filter-select pc-receipts-filter-control"
-            size="sm"
-            label={t('event')}
-            placeholder={t('all')}
-            options={eventTypeOptions}
-            value={eventValue}
-            onChange={handleEventChange}
-            onClear={() => {
-              setEventType('');
-              setCurrentPage(1);
-            }}
-            clearable={Boolean(eventType)}
-            showSelectedCheck
-            dropdownMatchTriggerWidth
-            style={{ width: '100%' }}
-          />
-          <PCSelect
-            className="pc-filter-select pc-receipts-filter-control"
-            size="sm"
-            label={t('dateRange')}
-            placeholder={t('allTime')}
-            prefix={<CalendarDays size={12} strokeWidth={1.8} />}
-            options={dateOptions}
-            value={dateValue}
-            onChange={handleDateChange}
-            onClear={() => {
-              setDatePreset('');
-              setCustomFrom('');
-              setCustomTo('');
-              setCurrentPage(1);
-            }}
-            clearable={Boolean(datePreset)}
-            showSelectedCheck
-            dropdownMatchTriggerWidth
-            style={{ width: '100%' }}
-          />
-        </div>
-
-        {datePreset === 'custom' && (
-          <div className="pc-receipt-date-range">
-            <div className="pc-receipt-date-field">
-              <PCInput
-                type="date"
-                size="sm"
-                label={t('from')}
-                aria-label={t('from')}
-                value={customFrom}
-                error={isCustomRangeInvalid}
-                max={customTo || undefined}
-                onChange={(e) => {
-                  setCustomFrom(e.target.value);
-                  setCurrentPage(1);
-                }}
-              />
-            </div>
-            <div className="pc-receipt-date-field">
-              <PCInput
-                type="date"
-                size="sm"
-                label={t('to')}
-                aria-label={t('to')}
-                value={customTo}
-                error={isCustomRangeInvalid}
-                min={customFrom || undefined}
-                onChange={(e) => {
-                  setCustomTo(e.target.value);
-                  setCurrentPage(1);
-                }}
-              />
-            </div>
-          </div>
-        )}
-
-        {datePreset === 'custom' && isCustomRangeInvalid && (
-          <PCText as="p" size="xs" className="pc-receipt-custom-hint">
-            {t('receiptDateRangeInvalid')}
-          </PCText>
-        )}
-
-        <div className="pc-receipts-summary-row">
-          <PCText as="p" size="xs" color="secondary" style={{ margin: 0 }}>
-            {t('totalRecords', { count: displayTotalCount })}
-          </PCText>
-          {activeFilterLabels.length > 0 && (
-            <div className="pc-receipts-active-chips" aria-label={t('filtersApplied')}>
-              {activeFilterLabels.map((item) => (
-                <span key={item.id} className="pc-receipts-filter-chip">
-                  <span className="pc-receipts-filter-chip-label">{item.label}:</span>
-                  <span>{item.value}</span>
-                </span>
-              ))}
-            </div>
-          )}
-        </div>
-      </section>
-
-      <AdvancedTable table={table} isLoading={isLoading && displayData.length === 0} />
-
-      <div
-        style={{
-          ...pcStyles.flex,
-          ...pcStyles.flexCol,
-          ...pcStyles.itemsCenter,
-          ...pcStyles.justifyBetween,
-          ...pcStyles.gapSm,
-          marginTop: '0.25rem',
-        }}
-        className="pc-flex-responsive"
-      >
-        <AdvancedTablePagination table={table} />
-      </div>
-    </div>
-  );
-}