@redacto.io/consent-sdk-react 9.2.0-beta.0 → 9.2.0-beta.2

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>
+  );
+}

package/src/RedactoPrivacyCenter/components/RequestSubmit.tsx

@@ -9,14 +9,25 @@ import { Mail } from 'lucide-react';
 
 const getVar = (varName: string): string => `var(${varName})`;
 
+/**
+ * Success surface shown after a case is submitted. Always renders a
+ * single Case-ID card — the form's 1-form -> 1-case contract means
+ * there is no fan-out and no partial-failure surface to maintain.
+ *
+ * The product label above the case ID is rendered only when the
+ * result carries one (product-scoped request types: ACCESS / ERASURE
+ * / CORRECTION). Nomination and grievance leave the field empty and
+ * the label is omitted.
+ */
 export default function RequestSubmit({
-  caseId,
+  result,
   contact,
   onCreateRequest,
   revokeConsentOnFulfilment,
   revokedPurposeNames,
 }: RequestSubmitProps) {
   const { t } = useTranslation();
+
   return (
     <div style={{ marginTop: pcStyles.mtMd.marginTop, position: 'relative' }}>
       <img
@@ -33,37 +44,47 @@ export default function RequestSubmit({
           filter: 'brightness(0) saturate(100%) invert(var(--pc-icon-filter, 0))',
         }}
       />
-      <div style={{
-        ...pcStyles.card,
-        borderRadius: pcStyles.borderRadiusXl,
-        padding: pcStyles.pLg.padding,
-        position: 'relative',
-        ...pcStyles.bgPrimary,
-        border: `1px solid ${pcStyles.borderColor}`,
-      }} className="pc-padding-responsive">
-        <div style={{
-          ...pcStyles.flex,
-          ...pcStyles.flexCol,
-          ...pcStyles.itemsStart,
-          ...pcStyles.gapMd,
-        }} className="pc-flex-responsive">
-          <div style={{
+      <div
+        style={{
+          ...pcStyles.card,
+          borderRadius: pcStyles.borderRadiusXl,
+          padding: pcStyles.pLg.padding,
+          position: 'relative',
+          ...pcStyles.bgPrimary,
+          border: `1px solid ${pcStyles.borderColor}`,
+        }}
+        className="pc-padding-responsive"
+      >
+        <div
+          style={{
             ...pcStyles.flex,
+            ...pcStyles.flexCol,
             ...pcStyles.itemsStart,
             ...pcStyles.gapMd,
-            width: '100%',
-          }}>
-            <div style={{
-              height: '2.5rem',
-              width: '2.5rem',
-              flexShrink: 0,
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              borderRadius: '50%',
-              backgroundColor: `${getVar('--pc-success')}33`,
-              padding: '0.375rem',
-            }}>
+          }}
+          className="pc-flex-responsive"
+        >
+          <div
+            style={{
+              ...pcStyles.flex,
+              ...pcStyles.itemsStart,
+              ...pcStyles.gapMd,
+              width: '100%',
+            }}
+          >
+            <div
+              style={{
+                height: '2.5rem',
+                width: '2.5rem',
+                flexShrink: 0,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                borderRadius: '50%',
+                backgroundColor: `${getVar('--pc-success')}33`,
+                padding: '0.375rem',
+              }}
+            >
               <img
                 src={greenTick}
                 alt="success"
@@ -94,13 +115,27 @@ export default function RequestSubmit({
               >
                 {t('thankYouForSubmittingYourRequest')}.
               </PCText>
-              <div style={{
-                marginTop: pcStyles.mtMd.marginTop,
-                padding: pcStyles.pSm.padding,
-                ...pcStyles.bgSecondary,
-                borderRadius: pcStyles.borderRadiusMd,
-                border: `1px solid ${pcStyles.borderColor}`,
-              }}>
+              <div
+                style={{
+                  marginTop: pcStyles.mtMd.marginTop,
+                  padding: pcStyles.pSm.padding,
+                  ...pcStyles.bgSecondary,
+                  borderRadius: pcStyles.borderRadiusMd,
+                  border: `1px solid ${pcStyles.borderColor}`,
+                }}
+              >
+                {result.product_name !== '' && (
+                  <PCText
+                    size="sm"
+                    weight="medium"
+                    style={{
+                      marginBottom: pcStyles.mbXs.marginBottom,
+                      wordBreak: 'break-word',
+                    }}
+                  >
+                    {result.product_name}
+                  </PCText>
+                )}
                 <PCText
                   size="base"
                   weight="bold"
@@ -111,25 +146,23 @@ export default function RequestSubmit({
                   }}
                   className="pc-text-responsive"
                 >
-                  {t('caseID')}: {caseId}
+                  {t('caseID')}: {result.case_id}
                 </PCText>
-                <PCText
-                  size="xs"
-                  weight="medium"
-                  color="secondary"
-                >
+                <PCText size="xs" weight="medium" color="secondary">
                   {t('saveThisID')}.
                 </PCText>
               </div>
-              <div style={{
-                ...pcStyles.flex,
-                ...pcStyles.itemsStart,
-                ...pcStyles.gapSm,
-                marginTop: pcStyles.mtMd.marginTop,
-                padding: '0.5rem 0.625rem',
-                ...pcStyles.bgSecondary,
-                borderRadius: pcStyles.borderRadiusMd,
-              }}>
+              <div
+                style={{
+                  ...pcStyles.flex,
+                  ...pcStyles.itemsStart,
+                  ...pcStyles.gapSm,
+                  marginTop: pcStyles.mtMd.marginTop,
+                  padding: '0.5rem 0.625rem',
+                  ...pcStyles.bgSecondary,
+                  borderRadius: pcStyles.borderRadiusMd,
+                }}
+              >
                 <Mail
                   size={16}
                   style={{
@@ -187,11 +220,13 @@ export default function RequestSubmit({
                 opacity: 0.9,
               }}
             />
-            <div style={{
-              marginTop: pcStyles.mtMd.marginTop,
-              ...pcStyles.flex,
-              ...pcStyles.justifyCenter
-            }}>
+            <div
+              style={{
+                marginTop: pcStyles.mtMd.marginTop,
+                ...pcStyles.flex,
+                ...pcStyles.justifyCenter,
+              }}
+            >
               <PCButton
                 variant="primary"
                 size="sm"
@@ -203,7 +238,10 @@ export default function RequestSubmit({
             </div>
           </div>
         </div>
-        <div className="pc-block-xs pc-hidden-md" style={{ marginTop: pcStyles.mtMd.marginTop }}>
+        <div
+          className="pc-block-xs pc-hidden-md"
+          style={{ marginTop: pcStyles.mtMd.marginTop }}
+        >
           <div style={{ ...pcStyles.flex, ...pcStyles.justifyCenter }}>
             <PCButton
               variant="primary"