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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redacto.io/consent-sdk-react",
-  "version": "9.2.0-beta.0",
+  "version": "9.2.0-beta.2",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",

package/src/RedactoPrivacyCenter/PrivacyCenterHomePage.tsx

@@ -4,6 +4,7 @@ import { useInternalNavigation } from './context/NavigationContext';
 import { PrivacyCenterConsentManagerPage } from './PrivacyCenterConsentManagerPage';
 import { PrivacyCenterFormPage } from './PrivacyCenterFormPage';
 import { PrivacyCenterActivityPage } from './PrivacyCenterActivityPage';
+import { PrivacyCenterMyReceiptPage } from './PrivacyCenterMyReceiptPage';
 import { PrivacyCenterCaseDetailsPage } from './PrivacyCenterCaseDetailsPage';
 import { NotificationsPage } from './NotificationsPage';
 
@@ -23,6 +24,8 @@ export function PrivacyCenterHomePage() {
       return <PrivacyCenterFormPage />;
     case 'activity':
       return <PrivacyCenterActivityPage />;
+    case 'receipts':
+      return <PrivacyCenterMyReceiptPage />;
     case 'case-details':
       return <PrivacyCenterCaseDetailsPage />;
     case 'notifications':

package/src/RedactoPrivacyCenter/PrivacyCenterMyReceiptPage.tsx

@@ -0,0 +1,26 @@
+import { useEffect } from 'react';
+import i18n from './lib/i18n';
+import ReceiptsList from './components/ReceiptsList';
+
+export function PrivacyCenterMyReceiptPage() {
+  useEffect(() => {
+    if (!i18n.language) {
+      i18n.changeLanguage('en');
+    }
+  }, []);
+
+  return (
+    <div
+      style={{
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '0.5rem',
+      }}
+    >
+      <div style={{ paddingTop: '0.25rem' }}>
+        <ReceiptsList />
+      </div>
+    </div>
+  );
+}

package/src/RedactoPrivacyCenter/api/actions.ts

@@ -419,6 +419,72 @@ export async function fetchActivitiesServer(params: {
   }
 }
 
+export async function fetchReceiptsServer(params: {
+  organizationId: string;
+  workspaceId: string;
+  skip?: number;
+  limit?: number;
+  notice_uuid?: string;
+  event_type?: string;
+  status?: string;
+  created_after?: string;
+  created_before?: string;
+  language?: string;
+  authToken?: string;
+  consentClient?: ReturnType<typeof import('./client').createConsentClient>;
+}): Promise<unknown | null> {
+  try {
+    if (!params.consentClient) {
+      throw new Error('Consent client is required');
+    }
+    // Privacy center endpoints use JWT Bearer tokens, not session-based auth
+    const baseRequest = buildBaseRequest(params.organizationId, params.workspaceId, params.authToken);
+
+    const result = await params.consentClient.getReceipts(
+      baseRequest,
+      {
+        skip: params.skip,
+        limit: params.limit,
+        notice_uuid: params.notice_uuid,
+        event_type: params.event_type,
+        status: params.status,
+        created_after: params.created_after,
+        created_before: params.created_before,
+        language: params.language,
+      },
+      params.authToken
+    );
+    return result;
+  } catch (error: any) {
+    return handleServerActionError(error, 'fetching receipts');
+  }
+}
+
+export async function fetchReceiptPdfServer(params: {
+  organizationId: string;
+  workspaceId: string;
+  receiptUuid: string;
+  authToken?: string;
+  consentClient?: ReturnType<typeof import('./client').createConsentClient>;
+}): Promise<Blob | null> {
+  try {
+    if (!params.consentClient) {
+      throw new Error('Consent client is required');
+    }
+    const baseRequest = buildBaseRequest(params.organizationId, params.workspaceId, params.authToken);
+
+    const result = await params.consentClient.getReceiptPdf(
+      baseRequest,
+      params.receiptUuid,
+      params.authToken
+    );
+    return result;
+  } catch (error: any) {
+    // Re-throw 404s (receipt doesn't exist or not yours) so the UI can show a targeted message
+    return handleServerActionError(error, 'downloading receipt PDF', true);
+  }
+}
+
 export async function fetchCaseHistoryServer(params: {
   organizationId: string;
   workspaceId: string;

package/src/RedactoPrivacyCenter/api/client.ts

@@ -464,6 +464,85 @@ export function createConsentClient(baseUrl: string) {
       });
     },
 
+    /**
+     * Get receipts (privacy center) — consent receipts for the authenticated user
+     */
+    async getReceipts(
+      baseRequest: BaseRequest,
+      params: {
+        skip?: number;
+        limit?: number;
+        notice_uuid?: string;
+        event_type?: string;
+        status?: string;
+        created_after?: string;
+        created_before?: string;
+        language?: string;
+      },
+      authToken?: string,
+      options?: Omit<ApiFetchOptions, "getAuthToken">
+    ): Promise<unknown> {
+      const queryParams = new URLSearchParams();
+      if (params.skip !== undefined) queryParams.append("skip", params.skip.toString());
+      if (params.limit !== undefined) queryParams.append("limit", params.limit.toString());
+      if (params.notice_uuid) queryParams.append("notice_uuid", params.notice_uuid);
+      if (params.event_type) queryParams.append("event_type", params.event_type);
+      if (params.status) queryParams.append("status", params.status);
+      if (params.created_after) queryParams.append("created_after", params.created_after);
+      if (params.created_before) queryParams.append("created_before", params.created_before);
+      if (params.language) queryParams.append("language", params.language);
+      const queryString = queryParams.toString();
+      const url = privacyCenterUrl(baseRequest, `/receipts${queryString ? `?${queryString}` : ""}`);
+      return privacyCenterApiFetch<unknown>(url, {
+        ...options,
+        method: "GET",
+        cache: "no-store",
+        authToken: resolveAuthToken(authToken, baseRequest),
+      });
+    },
+
+    /**
+     * Download a single receipt as a PDF (privacy center).
+     * Returns raw PDF bytes as a Blob — the caller builds an object URL to open/save it.
+     * Uses a direct fetch (not privacyCenterApiFetch) because the response is binary, not JSON,
+     * and the Authorization header must be sent (anchor navigation wouldn't carry it).
+     */
+    async getReceiptPdf(
+      baseRequest: BaseRequest,
+      receiptUuid: string,
+      authToken?: string
+    ): Promise<Blob> {
+      const url = privacyCenterUrl(baseRequest, `/receipts/${receiptUuid}/pdf`);
+      const token = resolveAuthToken(authToken, baseRequest);
+      const requestHeaders = new Headers();
+      requestHeaders.set("Accept", "application/pdf");
+      if (token) {
+        const trimmedToken = token.trim();
+        requestHeaders.set(
+          "Authorization",
+          trimmedToken.startsWith("Bearer ") ? trimmedToken : `Bearer ${trimmedToken}`
+        );
+      }
+      const response = await fetch(url, { method: "GET", headers: requestHeaders });
+      if (!response.ok) {
+        let errorMessage = `Request failed with status ${response.status}`;
+        try {
+          const errorData = (await response.json()) as { detail?: unknown; error_code?: string } | null;
+          if (errorData?.detail) {
+            errorMessage =
+              typeof errorData.detail === "string" ? errorData.detail : JSON.stringify(errorData.detail);
+          } else if (errorData?.error_code) {
+            errorMessage = errorData.error_code;
+          }
+        } catch {
+          // non-JSON error body — keep default message
+        }
+        // Prepend HTTP status so callers can branch on it (e.g. 404 = receipt not found)
+        throw new Error(`[${response.status}] ${errorMessage}`);
+      }
+      return response.blob();
+    },
+
     /**
      * Get case history (privacy center)
      */

package/src/RedactoPrivacyCenter/components/DataRequest/ProductSelectionSection.tsx

@@ -0,0 +1,222 @@
+import { type CSSProperties, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PCEmpty } from '../../ui/PCEmpty';
+import { pcStyles } from '../../styles/pcStyles';
+import type { FormProductGroup } from '../../lib/types';
+import { buildGroupPurposes } from '../groupHelpers';
+
+const getVar = (varName: string): string => `var(${varName})`;
+
+/**
+ * Compute the unique selection key for a product group.
+ *
+ * Direct (own-data) groups key on `product_uuid`. Nominated groups append
+ * the nominator UUID so two chips on the same product — one direct and one
+ * via a nominator — register as distinct selections.
+ */
+export const productGroupKey = (group: FormProductGroup): string =>
+  group.nominator
+    ? `${group.product_uuid}:${group.nominator.uuid}`
+    : group.product_uuid;
+
+export type ProductSelectionSectionProps = Readonly<{
+  directGroups: FormProductGroup[];
+  nominatedGroups: FormProductGroup[];
+  selectedProductKey: string | null;
+  onSelect: (key: string | null, group: FormProductGroup | null) => void;
+  /** Optional human label of the request type, e.g. "access". Folded into
+   *  the instruction header when supplied. */
+  requestTypeLabel?: string;
+  isTranslating?: boolean;
+}>;
+
+type ChipProps = Readonly<{
+  group: FormProductGroup;
+  isSelected: boolean;
+  isLocked: boolean;
+  onSelect: (key: string | null, group: FormProductGroup | null) => void;
+  nominationSuffix?: string;
+  activePurposesLabel: string;
+}>;
+
+const productSelectHeaderStyle: CSSProperties = {
+  paddingLeft: pcStyles.pxMd.paddingLeft,
+  paddingRight: pcStyles.pxMd.paddingRight,
+  marginBottom: pcStyles.mbMd.marginBottom,
+};
+
+const ProductChip = ({
+  group,
+  isSelected,
+  isLocked,
+  onSelect,
+  nominationSuffix,
+  activePurposesLabel,
+}: ChipProps) => {
+  const key = productGroupKey(group);
+
+  return (
+    <button
+      type="button"
+      role="option"
+      aria-selected={isSelected}
+      disabled={isLocked}
+      title={group.product_name}
+      className={`pc-product-select-chip ${isSelected ? 'pc-product-select-chip--selected' : ''}`}
+      data-testid={`product-chip-${key}`}
+      onClick={() => {
+        if (isLocked) {
+          return;
+        }
+        if (isSelected) {
+          onSelect(null, null);
+        } else {
+          onSelect(key, group);
+        }
+      }}
+    >
+      <span className="pc-product-select-chip-inner">
+        <span className="pc-product-select-chip-label">{group.product_name}</span>
+        {nominationSuffix && (
+          <span className="pc-product-select-chip-suffix">{nominationSuffix}</span>
+        )}
+        <span className="pc-product-select-chip-meta">{activePurposesLabel}</span>
+      </span>
+    </button>
+  );
+};
+
+const SkeletonChip = () => (
+  <div
+    className="pc-product-select-chip pc-product-select-chip--skeleton"
+    aria-hidden="true"
+  >
+    <div
+      style={{
+        height: '0.875rem',
+        width: '6rem',
+        animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+        borderRadius: pcStyles.borderRadiusMd,
+        backgroundColor: getVar('--pc-bg-tertiary'),
+      }}
+    />
+  </div>
+);
+
+export function ProductSelectionSection({
+  directGroups,
+  nominatedGroups,
+  selectedProductKey,
+  onSelect,
+  requestTypeLabel,
+  isTranslating = false,
+}: ProductSelectionSectionProps) {
+  const { t } = useTranslation();
+
+  const totalGroups = directGroups.length + nominatedGroups.length;
+  const isSingleGroup = totalGroups === 1;
+  const singleGroup = isSingleGroup
+    ? (directGroups[0] ?? nominatedGroups[0] ?? null)
+    : null;
+
+  // Auto-select the only group when present. This drives the parent's
+  // selection state without requiring a click — per spec, single-group
+  // step is pre-selected and rendered read-only.
+  useEffect(() => {
+    if (!singleGroup) {
+      return;
+    }
+    const key = productGroupKey(singleGroup);
+    if (selectedProductKey !== key) {
+      onSelect(key, singleGroup);
+    }
+  }, [singleGroup, selectedProductKey, onSelect]);
+
+  if (isTranslating) {
+    return (
+      <div className="pc-product-select-section">
+        <div
+          className="pc-product-select-chips"
+          data-testid="product-selection-chips"
+          role="listbox"
+          aria-label={t('selectProductsForRequestGeneric')}
+        >
+          {[0, 1, 2].map((i) => (
+            <SkeletonChip key={i} />
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  if (totalGroups === 0) {
+    return (
+      <PCEmpty
+        title={t('noProductsAvailable')}
+        description={t('noProductsAvailableDescription')}
+      />
+    );
+  }
+
+  const headerText = requestTypeLabel
+    ? t('selectProductsForRequest', { requestType: requestTypeLabel })
+    : t('selectProductsForRequestGeneric');
+
+  return (
+    <div className="pc-product-select-section">
+      <div style={productSelectHeaderStyle} className="pc-product-select-header">
+        <p
+          style={{
+            margin: 0,
+            fontSize: pcStyles.textXs.fontSize,
+            color: getVar('--pc-text-secondary'),
+          }}
+        >
+          {headerText}
+        </p>
+      </div>
+
+      <div
+        className="pc-product-select-chips"
+        data-testid="product-selection-chips"
+        role="listbox"
+        aria-label={headerText}
+      >
+        {directGroups.map((group) => {
+          const key = productGroupKey(group);
+          const purposeCount = buildGroupPurposes(group).length;
+          return (
+            <ProductChip
+              key={key}
+              group={group}
+              isSelected={selectedProductKey === key || isSingleGroup}
+              isLocked={isSingleGroup}
+              onSelect={onSelect}
+              activePurposesLabel={t('activePurposes', { count: purposeCount })}
+            />
+          );
+        })}
+
+        {nominatedGroups.map((group) => {
+          const key = productGroupKey(group);
+          const purposeCount = buildGroupPurposes(group).length;
+          const nominatorLabel =
+            group.nominator?.name ?? group.nominator?.email ?? '';
+          return (
+            <ProductChip
+              key={key}
+              group={group}
+              isSelected={selectedProductKey === key || isSingleGroup}
+              isLocked={isSingleGroup}
+              onSelect={onSelect}
+              nominationSuffix={t('nominationChipSuffix', {
+                nominator: nominatorLabel,
+              })}
+              activePurposesLabel={t('activePurposes', { count: purposeCount })}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+}