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

package/src/RedactoPrivacyCenter/api/client.ts

@@ -1,5 +1,10 @@
 import { apiFetch } from "./fetcher";
 import type { ApiFetchOptions, ApiResponse } from "./fetcher";
+import type {
+  CaseMessage,
+  MessageDocument,
+  UploadDocumentResponse,
+} from "../lib/types";
 
 /**
  * Base request parameters for consent service calls
@@ -81,6 +86,7 @@ export function createConsentClient(baseUrl: string) {
           const errorData = (await response.json()) as {
             detail?: unknown;
             message?: string;
+            code?: string;
           } | null;
           if (errorData) {
             if ("detail" in errorData && errorData.detail) {
@@ -90,6 +96,9 @@ export function createConsentClient(baseUrl: string) {
                   : JSON.stringify(errorData.detail, null, 2);
             } else if ("message" in errorData && errorData.message) {
               errorMessage = errorData.message;
+            } else if ("code" in errorData && errorData.code) {
+              // e.g. { code: "empty_file" } or { code: "document_already_exists" }
+              errorMessage = errorData.code;
             }
           }
         } catch {
@@ -104,7 +113,8 @@ export function createConsentClient(baseUrl: string) {
           }
         }
 
-        throw new Error(errorMessage);
+        // Prepend HTTP status so callers can branch on it without losing context
+        throw new Error(`[${response.status}] ${errorMessage}`);
       }
 
       // Parse JSON response
@@ -139,6 +149,18 @@ export function createConsentClient(baseUrl: string) {
     }
   }
 
+  function privacyCenterUrl(baseRequest: BaseRequest, path: string): string {
+    return `${baseUrl}/organisations/${baseRequest.organisationUuid}/workspaces/${baseRequest.workspaceUuid}/dsar/privacy-center${path}`;
+  }
+
+  function caseUrl(baseRequest: BaseRequest, caseUuid: string, path = ''): string {
+    return privacyCenterUrl(baseRequest, `/cases/${caseUuid}${path}`);
+  }
+
+  function resolveAuthToken(authToken: string | undefined, baseRequest: BaseRequest): string {
+    return authToken || baseRequest.authToken;
+  }
+
   return {
     /**
      * Get form data (privacy center)
@@ -153,7 +175,7 @@ export function createConsentClient(baseUrl: string) {
       const queryParams = new URLSearchParams();
       if (language) queryParams.append("language", language);
       const queryString = queryParams.toString();
-      const url = `${baseUrl}/organisations/${baseRequest.organisationUuid}/workspaces/${baseRequest.workspaceUuid}/dsar/privacy-center/form/data${queryString ? `?${queryString}` : ""}`;
+      const url = privacyCenterUrl(baseRequest, `/form/data${queryString ? `?${queryString}` : ""}`);
       const { useSessionAuth = false, getAuthToken, ...fetchOptions } = options || {};
 
       // Case management uses session-based auth (X-Auth-Token)
@@ -172,7 +194,7 @@ export function createConsentClient(baseUrl: string) {
         ...fetchOptions,
         method: "POST",
         body: JSON.stringify({ contact }),
-        authToken: authToken || baseRequest.authToken,
+        authToken: resolveAuthToken(authToken, baseRequest),
       });
     },
 
@@ -185,7 +207,7 @@ export function createConsentClient(baseUrl: string) {
       authToken?: string,
       options?: ApiFetchOptions & { useSessionAuth?: boolean }
     ): Promise<unknown> {
-      const url = `${baseUrl}/organisations/${baseRequest.organisationUuid}/workspaces/${baseRequest.workspaceUuid}/dsar/privacy-center/case`;
+      const url = privacyCenterUrl(baseRequest, '/case');
       const { useSessionAuth = false, getAuthToken, ...fetchOptions } = options || {};
 
       // Case management uses session-based auth (X-Auth-Token)
@@ -204,7 +226,7 @@ export function createConsentClient(baseUrl: string) {
         ...fetchOptions,
         method: "POST",
         body: JSON.stringify(payload),
-        authToken: authToken || baseRequest.authToken,
+        authToken: resolveAuthToken(authToken, baseRequest),
       });
     },
 
@@ -325,12 +347,12 @@ export function createConsentClient(baseUrl: string) {
       if (product_uuid) queryParams.append("product_uuid", product_uuid);
       if (language) queryParams.append("language", language);
       const queryString = queryParams.toString();
-      const url = `${baseUrl}/organisations/${baseRequest.organisationUuid}/workspaces/${baseRequest.workspaceUuid}/dsar/privacy-center/user-consents${queryString ? `?${queryString}` : ""}`;
+      const url = privacyCenterUrl(baseRequest, `/user-consents${queryString ? `?${queryString}` : ""}`);
       return privacyCenterApiFetch(url, {
         ...options,
         method: "POST",
         body: JSON.stringify({ contact }),
-        authToken: authToken || baseRequest.authToken,
+        authToken: resolveAuthToken(authToken, baseRequest),
       });
     },
 
@@ -347,7 +369,7 @@ export function createConsentClient(baseUrl: string) {
       nominatorContact?: string,
       dataElementUuids?: string[]
     ): Promise<unknown> {
-      const url = `${baseUrl}/organisations/${baseRequest.organisationUuid}/workspaces/${baseRequest.workspaceUuid}/dsar/privacy-center/manage-consent?status=${status}`;
+      const url = privacyCenterUrl(baseRequest, `/manage-consent?status=${status}`);
       const body: Record<string, unknown> = { purpose_uuid: purposeId, contact };
       if (nominatorContact) {
         body.nominator_contact = nominatorContact;
@@ -359,7 +381,7 @@ export function createConsentClient(baseUrl: string) {
         ...options,
         method: "POST",
         body: JSON.stringify(body),
-        authToken: authToken || baseRequest.authToken,
+        authToken: resolveAuthToken(authToken, baseRequest),
       });
     },
 
@@ -379,10 +401,10 @@ export function createConsentClient(baseUrl: string) {
       if (limit !== undefined) queryParams.append("limit", limit.toString());
       if (language) queryParams.append("language", language);
       const queryString = queryParams.toString();
-      const url = `${baseUrl}/organisations/${baseRequest.organisationUuid}/workspaces/${baseRequest.workspaceUuid}/dsar/privacy-center/activities${queryString ? `?${queryString}` : ""}`;
+      const url = privacyCenterUrl(baseRequest, `/activities${queryString ? `?${queryString}` : ""}`);
       return privacyCenterApiFetch<unknown>(url, {
         ...options,
-        authToken: authToken || baseRequest.authToken,
+        authToken: resolveAuthToken(authToken, baseRequest),
       });
     },
 
@@ -391,7 +413,7 @@ export function createConsentClient(baseUrl: string) {
      */
     async getCaseHistory(
       baseRequest: BaseRequest,
-      contact: string,
+      _contact: string,
       offset?: number,
       limit?: number,
       language?: string,
@@ -403,10 +425,99 @@ export function createConsentClient(baseUrl: string) {
       if (limit !== undefined) queryParams.append("limit", limit.toString());
       if (language) queryParams.append("language", language);
       const queryString = queryParams.toString();
-      const url = `${baseUrl}/organisations/${baseRequest.organisationUuid}/workspaces/${baseRequest.workspaceUuid}/dsar/privacy-center/cases?${queryString}`;
+      const url = privacyCenterUrl(baseRequest, `/cases?${queryString}`);
       return privacyCenterApiFetch<unknown>(url, {
         ...options,
-        authToken: authToken || baseRequest.authToken,
+        authToken: resolveAuthToken(authToken, baseRequest),
+      });
+    },
+
+    // ─── Case Communication ─────────────────────────────────────────────────
+
+    /**
+     * Get messages for a case (privacy center)
+     */
+    async getCaseMessages(
+      baseRequest: BaseRequest,
+      caseUuid: string,
+      authToken?: string
+    ): Promise<CaseMessage[]> {
+      const url = caseUrl(baseRequest, caseUuid, '/messages');
+      return privacyCenterApiFetch<CaseMessage[]>(url, {
+        authToken: resolveAuthToken(authToken, baseRequest),
+      });
+    },
+
+    /**
+     * Send a message on a case (privacy center)
+     */
+    async sendCaseMessage(
+      baseRequest: BaseRequest,
+      caseUuid: string,
+      body: string,
+      documentUuids: string[],
+      authToken?: string
+    ): Promise<CaseMessage> {
+      const url = caseUrl(baseRequest, caseUuid, '/messages');
+      return privacyCenterApiFetch<CaseMessage>(url, {
+        method: 'POST',
+        body: JSON.stringify({ body, document_uuids: documentUuids }),
+        authToken: resolveAuthToken(authToken, baseRequest),
+      });
+    },
+
+    /**
+     * Upload a document on a case (multipart/form-data, privacy center)
+     */
+    async uploadCaseDocument(
+      baseRequest: BaseRequest,
+      caseUuid: string,
+      file: File,
+      authToken?: string
+    ): Promise<UploadDocumentResponse> {
+      const url = caseUrl(baseRequest, caseUuid, '/upload-document');
+      const formData = new FormData();
+      formData.append('file', file, file.name); // field name must be exactly "file"
+      // "payload" is required by the privacy-center endpoint (omitting it causes 422)
+      formData.append('payload', JSON.stringify({ metadata: null }));
+      return privacyCenterApiFetch<UploadDocumentResponse>(url, {
+        method: 'POST',
+        body: formData,
+        authToken: resolveAuthToken(authToken, baseRequest),
+      });
+    },
+
+    /**
+     * Submit a document against a handler document request (privacy center)
+     */
+    async submitDocumentForRequest(
+      baseRequest: BaseRequest,
+      caseUuid: string,
+      requestEventUuid: string,
+      documentUuid: string,
+      body: string,
+      authToken?: string
+    ): Promise<CaseMessage> {
+      const url = caseUrl(baseRequest, caseUuid, `/document-requests/${requestEventUuid}/submit`);
+      return privacyCenterApiFetch<CaseMessage>(url, {
+        method: 'POST',
+        body: JSON.stringify({ document_uuid: documentUuid, body }),
+        authToken: resolveAuthToken(authToken, baseRequest),
+      });
+    },
+
+    /**
+     * Get document info/download URL for a case document (privacy center)
+     */
+    async getCaseDocument(
+      baseRequest: BaseRequest,
+      caseUuid: string,
+      documentUuid: string,
+      authToken?: string
+    ): Promise<MessageDocument> {
+      const url = caseUrl(baseRequest, caseUuid, `/documents/${documentUuid}`);
+      return privacyCenterApiFetch<MessageDocument>(url, {
+        authToken: resolveAuthToken(authToken, baseRequest),
       });
     },
   };

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

@@ -0,0 +1,38 @@
+import { useTranslation } from 'react-i18next';
+import { IoDocumentText } from 'react-icons/io5';
+import type { AttachmentCardProps } from '../../lib/types';
+import { formatFileSize, getDownloadUrl } from './utils';
+
+export const AttachmentCard = ({ doc }: AttachmentCardProps) => {
+  const { t } = useTranslation();
+  const downloadUrl = getDownloadUrl(doc.file_url);
+  const fileName = doc.file_name || t('document');
+
+  const content = (
+    <>
+      <IoDocumentText size={20} className="pc-attachment-icon" />
+      <div className="pc-attachment-info">
+        <div className="pc-attachment-name">{fileName}</div>
+        <div className="pc-attachment-size">
+          {doc.file_size ? formatFileSize(doc.file_size) : ''}
+        </div>
+      </div>
+    </>
+  );
+
+  if (downloadUrl) {
+    return (
+      <a
+        href={downloadUrl}
+        target="_blank"
+        rel="noopener noreferrer"
+        aria-label={t('downloadAttachment', { fileName })}
+        className="pc-attachment-card"
+      >
+        {content}
+      </a>
+    );
+  }
+
+  return <div className="pc-attachment-card">{content}</div>;
+};

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

@@ -0,0 +1,31 @@
+import type { ChatBubbleProps } from '../../lib/types';
+import { AttachmentCard } from './AttachmentCard';
+
+export const ChatBubble = ({
+  message,
+  isPrincipal,
+  senderLabel,
+  timestamp,
+}: ChatBubbleProps) => {
+  const direction = isPrincipal ? 'sent' : 'received';
+
+  return (
+    <div className={`pc-chat-bubble-wrap pc-chat-bubble-wrap--${direction}`}>
+      <span className="pc-chat-sender">
+        {senderLabel} · {timestamp}
+      </span>
+
+      {/* Text bubble */}
+      {message.body && (
+        <div className={`pc-chat-bubble pc-chat-bubble--${direction}`}>
+          {message.body}
+        </div>
+      )}
+
+      {/* Attachment cards */}
+      {message.documents.map((doc) => (
+        <AttachmentCard key={doc.uuid} doc={doc} />
+      ))}
+    </div>
+  );
+};

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

@@ -0,0 +1,73 @@
+import { useTranslation } from 'react-i18next';
+import { IoAttach } from 'react-icons/io5';
+import { PCButton, PCLoader } from '../../ui';
+import type { DocumentRequestCardProps } from '../../lib/types';
+import { UPLOAD_ACTIVE_STATUSES, DOCUMENT_REQUEST_STATUS_LABEL, STATUS_COLORS } from '../../lib/constants';
+
+export const DocumentRequestCard = ({
+  message,
+  onUpload,
+  isSubmitting,
+}: DocumentRequestCardProps) => {
+  const { t } = useTranslation();
+  const meta = message.document_request_metadata;
+  if (!meta) return null;
+
+  const canUpload = UPLOAD_ACTIVE_STATUSES.includes(meta.document_request_status);
+  const statusInfo = DOCUMENT_REQUEST_STATUS_LABEL[meta.document_request_status];
+
+  return (
+    <div
+      className="pc-doc-request-card"
+      style={{
+        border: `1.5px dashed ${STATUS_COLORS.info.border}`,
+        backgroundColor: STATUS_COLORS.info.bg,
+      }}
+    >
+      <div className="pc-doc-request-header">
+        <IoAttach size={16} className="pc-doc-request-icon" style={{ color: STATUS_COLORS.info.color }} />
+        <div>
+          <div className="pc-doc-request-title" style={{ color: STATUS_COLORS.infoDark }}>
+            {t('documentRequestedLabel', { title: meta.title })}
+          </div>
+          {meta.accepted_document && (
+            <div className="pc-doc-request-accepted" style={{ color: STATUS_COLORS.info.color }}>
+              {t('acceptedLabel', { accepted: meta.accepted_document })}
+            </div>
+          )}
+        </div>
+
+        <span
+          className="pc-doc-request-status"
+          style={{ color: statusInfo.color, border: `1px solid ${statusInfo.color}` }}
+        >
+          {t(statusInfo.labelKey)}
+        </span>
+      </div>
+
+      {canUpload && (
+        <PCButton
+          variant="outline"
+          size="sm"
+          disabled={isSubmitting}
+          onClick={() => onUpload(message.uuid)}
+          className="pc-doc-request-upload-btn"
+        >
+          {isSubmitting
+            ? <PCLoader variant="spinner" size="sm" />
+            : <IoAttach size={14} />}
+          {t('uploadAndSubmit')}
+        </PCButton>
+      )}
+
+      {meta.document_request_status === 'rejected' && meta.rejection_reason && (
+        <div
+          className="pc-doc-request-rejection"
+          style={{ color: STATUS_COLORS.error.color, backgroundColor: STATUS_COLORS.error.bg }}
+        >
+          {t('rejectionReasonLabel', { reason: meta.rejection_reason })}
+        </div>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,87 @@
+import { useTranslation } from 'react-i18next';
+import { IoAttach, IoSend, IoDocumentText } from 'react-icons/io5';
+import { PCButton, PCLoader } from '../../ui';
+import type { MessageComposerProps } from '../../lib/types';
+import { formatFileSize } from './utils';
+
+export const MessageComposer = ({
+  messageText,
+  onMessageTextChange,
+  pendingUpload,
+  onRemovePendingUpload,
+  onAttachClick,
+  onSend,
+  isSending,
+  isUploading,
+}: MessageComposerProps) => {
+  const { t } = useTranslation();
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+      e.preventDefault();
+      onSend();
+    }
+  };
+
+  return (
+    <div className="pc-composer">
+      {pendingUpload && (
+        <div className="pc-composer-pending-row">
+          <div className="pc-composer-pending-pill">
+            <IoDocumentText size={14} />
+            <span>{pendingUpload.file_name}</span>
+            <span className="pc-composer-pending-size">
+              {formatFileSize(pendingUpload.file_size)}
+            </span>
+            <button
+              type="button"
+              aria-label={t('removeAttachment')}
+              onClick={onRemovePendingUpload}
+              className="pc-composer-remove-btn"
+            >
+              ×
+            </button>
+          </div>
+        </div>
+      )}
+
+      <div className="pc-composer-textarea-wrap">
+        <textarea
+          value={messageText}
+          onChange={(e) => onMessageTextChange(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder={t('writeMessagePlaceholder')}
+          rows={3}
+          className="pc-composer-textarea"
+        />
+      </div>
+      <div className="pc-composer-actions">
+        <PCButton
+          variant="outline"
+          size="sm"
+          disabled={isUploading || isSending}
+          onClick={onAttachClick}
+          className="pc-composer-btn"
+        >
+          {isUploading
+            ? <PCLoader variant="spinner" size="sm" />
+            : <IoAttach size={16} />}
+          {t('attachFile')}
+        </PCButton>
+        <PCButton
+          size="sm"
+          disabled={(!messageText.trim() && !pendingUpload) || isSending || isUploading}
+          onClick={onSend}
+          className="pc-composer-btn"
+        >
+          {isSending ? <PCLoader variant="spinner" size="sm" /> : null}
+          {t('send')}
+          <IoSend size={14} />
+        </PCButton>
+      </div>
+      <div className="pc-composer-footer">
+        {t('messagesSecureFooter')}
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,95 @@
+import { useTranslation } from 'react-i18next';
+import {
+  IoCheckmarkCircle, IoCloseCircle, IoAlertCircle,
+} from 'react-icons/io5';
+import type { MessageItemProps } from '../../lib/types';
+import { STATUS_COLORS } from '../../lib/constants';
+import { formatMessageTime } from './utils';
+import { DocumentRequestCard } from './DocumentRequestCard';
+import { StatusEvent } from './StatusEvent';
+import { ChatBubble } from './ChatBubble';
+
+export const MessageItem = ({
+  message,
+  onUploadForRequest,
+  isSubmittingForRequest,
+}: MessageItemProps) => {
+  const { t } = useTranslation();
+  const isPrincipal = message.sender_role === 'data_principal';
+  const timestamp = formatMessageTime(message.created_at);
+  const senderLabel = isPrincipal ? t('senderYou') : message.triggered_by_email || t('senderPrivacyTeam');
+
+  switch (message.message_type) {
+    case 'document_requested':
+      return (
+        <>
+          {message.body && (
+            <div className="pc-chat-bubble-wrap pc-chat-bubble-wrap--received">
+              <span className="pc-chat-sender">
+                {senderLabel} · {timestamp}
+              </span>
+              <div className="pc-chat-bubble pc-chat-bubble--received">
+                {message.body}
+              </div>
+            </div>
+          )}
+          <DocumentRequestCard
+            message={message}
+            onUpload={onUploadForRequest}
+            isSubmitting={isSubmittingForRequest}
+          />
+        </>
+      );
+
+    case 'document_approved':
+      return (
+        <StatusEvent
+          icon={<IoCheckmarkCircle size={18} />}
+          color={STATUS_COLORS.success.color}
+          bgColor={STATUS_COLORS.success.bg}
+          borderColor={STATUS_COLORS.success.border}
+          text={t('documentAccepted')}
+          timestamp={timestamp}
+        />
+      );
+
+    case 'document_rejected':
+      return (
+        <StatusEvent
+          icon={<IoCloseCircle size={18} />}
+          color={STATUS_COLORS.error.color}
+          bgColor={STATUS_COLORS.error.bg}
+          borderColor={STATUS_COLORS.error.border}
+          text={t('documentRejected')}
+          subText={message.document_request_metadata?.rejection_reason}
+          timestamp={timestamp}
+        />
+      );
+
+    case 'document_replacement_requested':
+      return (
+        <StatusEvent
+          icon={<IoAlertCircle size={18} />}
+          color={STATUS_COLORS.warning.color}
+          bgColor={STATUS_COLORS.warning.bg}
+          borderColor={STATUS_COLORS.warning.border}
+          text={t('replacementRequested')}
+          subText={message.body}
+          timestamp={timestamp}
+        />
+      );
+
+    case 'document_submitted':
+    case 'document_replaced':
+    case 'message_sent':
+    default:
+      return (
+        <ChatBubble
+          message={message}
+          isPrincipal={isPrincipal}
+          senderLabel={senderLabel}
+          timestamp={timestamp}
+        />
+      );
+  }
+};