@redacto.io/consent-sdk-react 9.1.0 → 9.2.0-beta.1

package/src/RedactoPrivacyCenter/components/ReceiptsList.tsx

@@ -0,0 +1,492 @@
+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, ReceiptPurposeStatus } 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 [status, setStatus] = useState<ReceiptPurposeStatus | ''>('');
+  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 statusOptions = useMemo<SelectOption[]>(
+    () => [
+      { value: '', label: t('all') },
+      { value: 'CONSENTED', label: t('consented') },
+      { value: 'DECLINED', label: t('declined') },
+      { value: 'WITHDRAWN', label: t('withdrawn') },
+    ],
+    [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 statusValue = statusOptions.find((o) => o.value === status) ?? null;
+  const dateValue = dateOptions.find((o) => o.value === datePreset) ?? null;
+  const hasActiveFilters = Boolean(eventType || status || 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 (status && statusValue?.label) {
+      filters.push({ id: 'status', label: t('status'), value: statusValue.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, status, statusValue, datePreset, dateValue, customFrom, customTo, t]);
+
+  const handleEventChange = (opt: SelectOption | null) => {
+    setEventType((opt ? String(opt.value) : '') as ReceiptEventType | '');
+    setCurrentPage(1);
+  };
+  const handleStatusChange = (opt: SelectOption | null) => {
+    setStatus((opt ? String(opt.value) : '') as ReceiptPurposeStatus | '');
+    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('');
+    setStatus('');
+    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,
+            status: status || 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,
+      status,
+      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('status')}
+            placeholder={t('all')}
+            options={statusOptions}
+            value={statusValue}
+            onChange={handleStatusChange}
+            onClear={() => {
+              setStatus('');
+              setCurrentPage(1);
+            }}
+            clearable={Boolean(status)}
+            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>
+  );
+}