@redacto.io/consent-sdk-react 4.0.0 → 5.1.0

package/src/RedactoPrivacyCenter/components/CaseDetails/MessagesTab.tsx

@@ -0,0 +1,147 @@
+import { useState, useMemo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { IoDocumentText, IoRefresh } from 'react-icons/io5';
+import { PCText, PCLoader } from '../../ui';
+import { useOrganization } from '../../context/OrganizationContext';
+import { useAuth } from '../../context/AuthContext';
+import {
+  useCaseMessages,
+  useSendCaseMessage,
+  useUploadCaseDocument,
+  useSubmitDocumentForRequest,
+} from '../../lib/queries';
+import { STATUS_COLORS } from '../../lib/constants';
+import type { MessagesTabProps } from '../../lib/types';
+import { MessageItem } from './MessageItem';
+import { MessageComposer } from './MessageComposer';
+import { useMessagePolling } from './useMessagePolling';
+import { useFileUpload } from './useFileUpload';
+
+export const MessagesTab = ({ caseUuid }: MessagesTabProps) => {
+  const { t } = useTranslation();
+  const { organization } = useOrganization();
+  const { accessToken, refreshToken, onError, updateTokens } = useAuth();
+  const authContext = useMemo(
+    () => ({ accessToken, refreshToken, onError, updateTokens }),
+    [accessToken, refreshToken, onError, updateTokens]
+  );
+
+  const organizationId = organization?.uuid;
+  const workspaceId = organization?.workspaces[0]?.uuid;
+
+  const { data: messages = [], isLoading, isError, isFetching, refetch } = useCaseMessages(
+    organizationId, workspaceId, caseUuid, authContext
+  );
+
+  const sendMutation = useSendCaseMessage(organizationId, workspaceId, caseUuid, authContext);
+  const uploadMutation = useUploadCaseDocument(organizationId, workspaceId, caseUuid, authContext);
+  const submitMutation = useSubmitDocumentForRequest(organizationId, workspaceId, caseUuid, authContext);
+
+  const { scrollContainerRef, handleScroll, scrollToBottom } = useMessagePolling(refetch, messages);
+
+  const {
+    pendingUpload, setPendingUpload, submittingForRequest,
+    attachInputRef, submitInputRef,
+    handleAttachFile, handleSubmitInputChange, triggerUploadForRequest,
+  } = useFileUpload(uploadMutation, submitMutation, refetch, scrollToBottom);
+
+  const [messageText, setMessageText] = useState('');
+
+  const handleSend = useCallback(() => {
+    if (sendMutation.isPending || uploadMutation.isPending) return;
+    const trimmedBody = messageText.trim();
+    if (!trimmedBody && !pendingUpload) return;
+    sendMutation.mutate(
+      { body: trimmedBody, documentUuids: pendingUpload ? [pendingUpload.uuid] : [] },
+      {
+        onSuccess: () => {
+          setMessageText('');
+          setPendingUpload(null);
+          scrollToBottom();
+          refetch();
+        },
+      }
+    );
+  }, [messageText, pendingUpload, sendMutation, uploadMutation, refetch, setPendingUpload, scrollToBottom]);
+
+  const isSending = sendMutation.isPending;
+  const isUploading = uploadMutation.isPending;
+
+  return (
+    <div className="pc-messages-container">
+      {/* Hidden file inputs */}
+      <input ref={attachInputRef} type="file" className="pc-hidden" onChange={handleAttachFile} />
+      <input ref={submitInputRef} type="file" className="pc-hidden" onChange={handleSubmitInputChange} />
+
+      {/* Secure notice */}
+      <div
+        className="pc-messages-notice"
+        style={{
+          backgroundColor: STATUS_COLORS.infoBanner.bg,
+          borderBottom: `1px solid ${STATUS_COLORS.infoBanner.border}`,
+          color: STATUS_COLORS.infoBanner.color,
+        }}
+      >
+        <span>🔒</span>
+        <span className="pc-messages-notice-text">{t('secureMessagesNotice')}</span>
+        <button
+          type="button"
+          onClick={() => refetch()}
+          disabled={isFetching}
+          aria-label={t('refreshMessages', 'Refresh messages')}
+          title={t('refreshMessages', 'Refresh messages')}
+          className="pc-messages-refresh-btn"
+          style={{ color: STATUS_COLORS.infoBanner.color }}
+        >
+          <IoRefresh
+            size={16}
+            style={{ animation: isFetching ? 'pc-spin 1s linear infinite' : 'none' }}
+          />
+        </button>
+      </div>
+
+      {/* Messages list */}
+      <div
+        ref={scrollContainerRef}
+        onScroll={handleScroll}
+        className="pc-messages-list"
+      >
+        {isLoading && (
+          <div className="pc-messages-center">
+            <PCLoader variant="spinner" size="md" />
+          </div>
+        )}
+        {isError && (
+          <div className="pc-messages-center-text">
+            <PCText size="sm" color="secondary">{t('errorLoadingMessages')}</PCText>
+          </div>
+        )}
+        {!isLoading && !isError && messages.length === 0 && (
+          <div className="pc-messages-empty">
+            <IoDocumentText size={40} className="pc-messages-empty-icon" />
+            <PCText size="sm" color="secondary">{t('noMessagesYet')}</PCText>
+          </div>
+        )}
+        {messages.map((msg) => (
+          <MessageItem
+            key={msg.uuid}
+            message={msg}
+            onUploadForRequest={triggerUploadForRequest}
+            isSubmittingForRequest={submittingForRequest === msg.uuid}
+          />
+        ))}
+      </div>
+
+      <MessageComposer
+        messageText={messageText}
+        onMessageTextChange={setMessageText}
+        pendingUpload={pendingUpload}
+        onRemovePendingUpload={() => setPendingUpload(null)}
+        onAttachClick={() => attachInputRef.current?.click()}
+        onSend={handleSend}
+        isSending={isSending}
+        isUploading={isUploading}
+      />
+    </div>
+  );
+};

package/src/RedactoPrivacyCenter/components/CaseDetails/RequestDetailsTab.tsx

@@ -0,0 +1,171 @@
+import { useTranslation } from 'react-i18next';
+import { PCText, PCBadge, PCTable } from '../../ui';
+import { formatDate } from '../utils';
+import type { RequestDetailsTabProps, RawPurposeWrapper, DataElement, UpdateCorrectionDataItem, GrievanceTypeElement } from '../../lib/types';
+import { getCaseStatusVariant, formatCaseStatus } from './utils';
+
+export const RequestDetailsTab = ({
+  selectedCase,
+  request_details,
+  requestTypeLabel,
+}: RequestDetailsTabProps) => {
+  const { t } = useTranslation();
+  return (
+    <div className="pc-request-details">
+      {/* Summary card */}
+      <div className="pc-request-summary-card">
+        <div className="pc-case-details-grid pc-request-summary-grid">
+          <div>
+            <PCText size="xs" weight="medium" color="secondary" className="pc-request-field-label">
+              {t('requestType')}
+            </PCText>
+            <PCText size="sm" weight="semibold" className="pc-request-field-value--capitalize">
+              {requestTypeLabel}
+            </PCText>
+          </div>
+          <div>
+            <PCText size="xs" weight="medium" color="secondary" className="pc-request-field-label">
+              {t('status')}
+            </PCText>
+            <PCBadge variant={getCaseStatusVariant(selectedCase.status)} size="sm" className="pc-status-badge">
+              {selectedCase.status_display || formatCaseStatus(selectedCase.status)}
+            </PCBadge>
+          </div>
+          <div>
+            <PCText size="xs" weight="medium" color="secondary" className="pc-request-field-label">
+              {t('createdAt')}
+            </PCText>
+            <PCText size="sm" weight="medium" className="pc-request-field-value">
+              {formatDate(selectedCase.created_at)}
+            </PCText>
+          </div>
+          {selectedCase.completed_at && (
+            <div>
+              <PCText size="xs" weight="medium" color="secondary" className="pc-request-field-label">
+                {t('completedAt')}
+              </PCText>
+              <PCText size="sm" weight="medium" className="pc-request-field-value">
+                {formatDate(selectedCase.completed_at)}
+              </PCText>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Description */}
+      {(selectedCase.description_display || selectedCase.description) && (
+        <div className="pc-request-description">
+          <PCText size="sm" weight="semibold" className="pc-request-description-title">
+            {t('descriptionLabel')}
+          </PCText>
+          <PCText size="sm" color="secondary" className="pc-request-description-text">
+            {selectedCase.description_display || selectedCase.description}
+          </PCText>
+        </div>
+      )}
+
+      {/* Request specifics */}
+      {request_details && (
+        <div className="pc-request-specifics">
+          <div className="pc-request-section-divider">
+            <span className="pc-request-section-title">{t('requestSpecifics')}</span>
+          </div>
+
+          {request_details.purposes && request_details.purposes.length > 0 && (
+            <div>
+              <PCText size="sm" weight="semibold" className="pc-request-section-heading">
+                {t('purposesInvolved')}
+              </PCText>
+              <ul className="pc-request-purpose-list">
+                {request_details.purposes.map((p: RawPurposeWrapper) => (
+                  <li key={p.purpose?.uuid} className="pc-request-purpose-item">
+                    <div className="pc-request-purpose-name">
+                      {p.purpose?.name}
+                    </div>
+                    {p.purpose?.description && (
+                      <div className="pc-request-purpose-desc">
+                        {p.purpose.description}
+                      </div>
+                    )}
+                    {p.purpose?.data_elements && p.purpose.data_elements.some((de: DataElement) => de.selected) && (
+                      <div className="pc-request-data-elements">
+                        {p.purpose.data_elements.filter((de: DataElement) => de.selected).map((de: DataElement) => (
+                          <PCBadge key={de.uuid} variant="secondary" size="sm" className="pc-status-badge">{de.name}</PCBadge>
+                        ))}
+                      </div>
+                    )}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+
+          {request_details.correction_data && request_details.correction_data.length > 0 && (
+            <div>
+              <PCText size="sm" weight="semibold" className="pc-request-section-heading">
+                {t('dataToCorrect')}
+              </PCText>
+              <div className="pcOverflowXAuto">
+                <div className="pc-request-table-wrap">
+                  <PCTable className="pc-request-table">
+                    <PCTable.Header className="pc-request-table-header">
+                      <PCTable.Row>
+                        {[t('field'), t('currentValue'), t('newValue')].map((h) => (
+                          <PCTable.Head key={h} className="pc-request-table-head">
+                            {h}
+                          </PCTable.Head>
+                        ))}
+                      </PCTable.Row>
+                    </PCTable.Header>
+                    <PCTable.Body>
+                      {request_details.correction_data.map((item: UpdateCorrectionDataItem) => (
+                        <PCTable.Row key={item.name} className="pc-request-table-row">
+                          <PCTable.Cell className="pc-request-table-cell pc-request-table-cell--name">{item.name}</PCTable.Cell>
+                          <PCTable.Cell className="pc-request-table-cell pc-request-table-cell--value">{item.curr_value || '-'}</PCTable.Cell>
+                          <PCTable.Cell className="pc-request-table-cell pc-request-table-cell--value">{item.new_value || '-'}</PCTable.Cell>
+                        </PCTable.Row>
+                      ))}
+                    </PCTable.Body>
+                  </PCTable>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {request_details.nomination_data && (
+            <div>
+              <PCText size="sm" weight="semibold" className="pc-request-section-heading">
+                {t('nomination')}
+              </PCText>
+              <div className="pc-request-nomination-card">
+                <div className="pc-request-nomination-field">
+                  <PCText size="xs" weight="medium" color="secondary">{t('nomineeEmail')}</PCText>
+                  <PCText size="sm" weight="medium" className="pc-request-field-value">{request_details.nomination_data.nominee_email || '-'}</PCText>
+                </div>
+                <div className="pc-request-nomination-field">
+                  <PCText size="xs" weight="medium" color="secondary">{t('nomineeMobile')}</PCText>
+                  <PCText size="sm" weight="medium" className="pc-request-field-value">{request_details.nomination_data.nominee_mobile || '-'}</PCText>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {request_details.grievance_types && request_details.grievance_types.length > 0 && (
+            <div>
+              <PCText size="sm" weight="semibold" className="pc-request-section-heading">
+                {t('grievanceTypes')}
+              </PCText>
+              <div className="pc-request-grievance-wrap">
+                {request_details.grievance_types.map((g: GrievanceTypeElement) => (
+                  <PCBadge key={g.grievance} variant="secondary" size="sm" className="pc-status-badge">
+                    {g.grievance?.replace('_', ' ')}
+                  </PCBadge>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/RedactoPrivacyCenter/components/CaseDetails/StatusEvent.tsx

@@ -0,0 +1,23 @@
+import type { StatusEventProps } from '../../lib/types';
+
+export const StatusEvent = ({
+  icon, color, bgColor, borderColor, text, subText, timestamp,
+}: StatusEventProps) => {
+  return (
+    <div className="pc-status-event">
+      <div
+        className="pc-status-event-pill"
+        style={{ backgroundColor: bgColor, border: `1px solid ${borderColor}`, color }}
+      >
+        {icon}
+        <span>{text}</span>
+      </div>
+      {subText && (
+        <div className="pc-status-event-sub" style={{ color }}>{subText}</div>
+      )}
+      <span className="pc-status-event-time">
+        {timestamp}
+      </span>
+    </div>
+  );
+};

package/src/RedactoPrivacyCenter/components/CaseDetails/useFileUpload.ts

@@ -0,0 +1,116 @@
+import { useState, useRef, useCallback } from 'react';
+import type { PendingUpload } from '../../lib/types';
+import { toast } from '../../utils/toast';
+import { validateUploadFile, getUploadErrorMessage } from './utils';
+
+type UploadMutation = {
+  mutate: (file: File, opts: {
+    onSuccess: (result: { uuid: string; file_name: string; file_size: number } | null) => void;
+    onError: (error: unknown) => void;
+  }) => void;
+  isPending: boolean;
+};
+
+type SubmitMutation = {
+  mutate: (params: { requestEventUuid: string; documentUuid: string; body: string }, opts: {
+    onSuccess: () => void;
+    onError: () => void;
+  }) => void;
+};
+
+export function useFileUpload(
+  uploadMutation: UploadMutation,
+  submitMutation: SubmitMutation,
+  refetch: () => void,
+  scrollToBottom: () => void,
+) {
+  const [pendingUpload, setPendingUpload] = useState<PendingUpload | null>(null);
+  const [submittingForRequest, setSubmittingForRequest] = useState<string | null>(null);
+
+  const attachInputRef = useRef<HTMLInputElement>(null);
+  const submitInputRef = useRef<HTMLInputElement>(null);
+  const pendingRequestRef = useRef<string | null>(null);
+
+  const handleAttachFile = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    e.target.value = '';
+    const validationError = validateUploadFile(file);
+    if (validationError) {
+      toast.error(validationError);
+      return;
+    }
+    uploadMutation.mutate(file, {
+      onSuccess: (result) => {
+        if (result) {
+          setPendingUpload({ uuid: result.uuid, file_name: result.file_name, file_size: result.file_size });
+          toast.success(`"${result.file_name}" uploaded successfully`);
+        } else {
+          toast.error('Document upload failed. Please try again.');
+        }
+      },
+      onError: (error) => {
+        toast.error(getUploadErrorMessage(error));
+      },
+    });
+  }, [uploadMutation]);
+
+  const handleSubmitForRequest = useCallback((requestEventUuid: string, file: File) => {
+    const validationError = validateUploadFile(file);
+    if (validationError) {
+      toast.error(validationError);
+      return;
+    }
+    setSubmittingForRequest(requestEventUuid);
+    uploadMutation.mutate(file, {
+      onSuccess: (uploaded) => {
+        if (!uploaded) {
+          setSubmittingForRequest(null);
+          toast.error('Document upload failed. Please try again.');
+          return;
+        }
+        toast.success(`"${uploaded.file_name}" uploaded successfully`);
+        submitMutation.mutate(
+          { requestEventUuid, documentUuid: uploaded.uuid, body: '' },
+          {
+            onSuccess: () => { setSubmittingForRequest(null); scrollToBottom(); refetch(); },
+            onError: () => {
+              setSubmittingForRequest(null);
+              toast.error('Failed to submit document. Please try again.');
+            },
+          }
+        );
+      },
+      onError: (error) => {
+        setSubmittingForRequest(null);
+        toast.error(getUploadErrorMessage(error));
+      },
+    });
+  }, [uploadMutation, submitMutation, refetch, scrollToBottom]);
+
+  const handleSubmitInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    e.target.value = '';
+    const requestUuid = pendingRequestRef.current;
+    pendingRequestRef.current = null;
+    if (file && requestUuid) {
+      handleSubmitForRequest(requestUuid, file);
+    }
+  }, [handleSubmitForRequest]);
+
+  const triggerUploadForRequest = useCallback((requestEventUuid: string) => {
+    pendingRequestRef.current = requestEventUuid;
+    submitInputRef.current?.click();
+  }, []);
+
+  return {
+    pendingUpload,
+    setPendingUpload,
+    submittingForRequest,
+    attachInputRef,
+    submitInputRef,
+    handleAttachFile,
+    handleSubmitInputChange,
+    triggerUploadForRequest,
+  };
+}

package/src/RedactoPrivacyCenter/components/CaseDetails/useMessagePolling.ts

@@ -0,0 +1,36 @@
+import { useEffect, useLayoutEffect, useRef, useCallback } from 'react';
+import type { CaseMessage } from '../../lib/types';
+
+export function useMessagePolling(
+  refetch: () => void,
+  messages: CaseMessage[],
+) {
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const isNearBottomRef = useRef(true);
+  const shouldAutoScrollRef = useRef(true);
+
+  useEffect(() => {
+    const interval = setInterval(() => { refetch(); }, 30_000);
+    return () => clearInterval(interval);
+  }, [refetch]);
+
+  const handleScroll = useCallback(() => {
+    const el = scrollContainerRef.current;
+    if (!el) return;
+    isNearBottomRef.current = el.scrollHeight - el.scrollTop - el.clientHeight < 100;
+  }, []);
+
+  useLayoutEffect(() => {
+    const el = scrollContainerRef.current;
+    if (el && (isNearBottomRef.current || shouldAutoScrollRef.current)) {
+      el.scrollTop = el.scrollHeight;
+      shouldAutoScrollRef.current = false;
+    }
+  }, [messages]);
+
+  const scrollToBottom = useCallback(() => {
+    shouldAutoScrollRef.current = true;
+  }, []);
+
+  return { scrollContainerRef, handleScroll, scrollToBottom };
+}

package/src/RedactoPrivacyCenter/components/CaseDetails/utils.ts

@@ -0,0 +1,56 @@
+import { MAX_FILE_SIZE, ALLOWED_MIME_TYPES } from '../../lib/constants';
+import type { CaseStatusVariant } from '../../lib/types';
+
+export const getVar = (v: string) => `var(${v})`;
+
+export const getCaseStatusVariant = (status: string): CaseStatusVariant => {
+  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';
+};
+
+export const formatCaseStatus = (s: string) =>
+  s.split('_').map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
+
+export const getDownloadUrl = (fileUrl: { url?: string; download_url?: string } | null | undefined): string | null =>
+  fileUrl ? (fileUrl.url || fileUrl.download_url || null) : null;
+
+/** Formats a UTC ISO string to local timezone display, e.g. "Mar 24, 2:14 PM" */
+export function formatMessageTime(isoString: string): string {
+  const d = new Date(isoString);
+  return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
+    + ', '
+    + d.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true });
+}
+
+export function formatFileSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+export function validateUploadFile(file: File): string | null {
+  if (file.size === 0) return 'File is empty. Please select a valid file.';
+  if (file.size > MAX_FILE_SIZE) return 'File size must not exceed 10 MB.';
+  if (!file.type || file.type.trim() === '') return 'Could not determine file type. Please try a different file.';
+  if (!ALLOWED_MIME_TYPES.includes(file.type))
+    return 'File type not supported. Allowed: PDF, JPG, PNG, WEBP, DOC, DOCX, XLS, XLSX, TXT, CSV.';
+  return null;
+}
+
+export function getUploadErrorMessage(error: unknown): string {
+  if (!(error instanceof Error)) return 'Something went wrong. Please try again.';
+  const msg = error.message;
+  if (msg.includes('[409]') || msg.includes('document_already_exists'))
+    return 'This document has already been uploaded.';
+  if (msg.includes('[422]'))
+    return 'File format not accepted. Please upload a PDF, image, or Office document.';
+  if (msg.includes('[400]') || msg.includes('empty_file'))
+    return 'File is empty or the request is invalid.';
+  if (msg.includes('[500]'))
+    return 'Something went wrong on the server. Please try again.';
+  return 'Document upload failed. Please try again.';
+}