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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redacto.io/consent-sdk-react",
-  "version": "9.2.0",
+  "version": "9.3.0-beta.1",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -32,11 +32,11 @@
     "@types/lodash": "^4.17.0",
     "@types/react": "^19.1.3",
     "@types/react-dom": "^19.1.3",
-    "@vitest/coverage-v8": "3.1.3",
+    "@vitest/coverage-v8": "^4.1.8",
     "jsdom": "^26.1.0",
     "tsup": "^8.4.0",
     "typescript": "5.8.2",
-    "vitest": "^3.1.3"
+    "vitest": "^4.1.8"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17 || ^18 || ^19",

package/src/RedactoPrivacyCenter/PrivacyCenterLayout.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState, useRef, type ReactNode } from 'react';
 import { OrganizationProvider } from './context/OrganizationContext';
+import { DataAvailabilityProvider } from './context/DataAvailabilityContext';
 import type { OrganizationDetail } from './lib/types';
 import {
   checkAndRefreshAuth,
@@ -161,9 +162,11 @@ export function PrivacyCenterLayout({ children, slug, onBack }: PrivacyCenterLay
 
   return (
     <OrganizationProvider organization={organization}>
-      <AppShell onBack={onBack}>
-        {children}
-      </AppShell>
+      <DataAvailabilityProvider>
+        <AppShell onBack={onBack}>
+          {children}
+        </AppShell>
+      </DataAvailabilityProvider>
     </OrganizationProvider>
   );
 }

package/src/RedactoPrivacyCenter/components/AppShell/AppShell.tsx

@@ -19,6 +19,9 @@ import { TopAppBar } from './TopAppBar';
 import { SidebarNav } from './SidebarNav';
 import { MobileNavDrawer } from './MobileNavDrawer';
 import { PageHeader } from './PageHeader';
+import { PCLoader } from '../../ui';
+import { useDataAvailability } from '../../context/DataAvailabilityContext';
+import { PrivacyCenterEmptyState } from '../PrivacyCenterEmptyState';
 import type { PrivacyCenterLayoutProps } from '../types';
 
 export default function AppShell({
@@ -35,6 +38,13 @@ export default function AppShell({
 
   const isMobile = useMediaQuery('(max-width: 639px)');
 
+  // Keep the shell minimal — top bar + a content spinner — until we've CONFIRMED
+  // the user has data. Hiding the sidebar/tabs/bell during 'checking' (not just
+  // 'empty') stops the nav from flashing in on refresh only to disappear when
+  // the API resolves to "no data". The branded top bar stays visible throughout.
+  const { status } = useDataAvailability();
+  const hideNav = status !== 'has-data';
+
   // Close mobile drawer when crossing the breakpoint
   useEffect(() => {
     if (!isMobile && isMobileNavOpen) setMobileNavOpen(false);
@@ -110,14 +120,15 @@ export default function AppShell({
         <main className="pc-root pc-shell-root" style={rootStyle}>
           <TopAppBar
             ref={hamburgerRef}
-            showHamburger={isMobile}
+            showHamburger={isMobile && !hideNav}
             onOpenMobileNav={() => setMobileNavOpen(true)}
             locale={locale}
             onLocaleChange={setLocale}
             onBack={onBack}
+            showNotifications={!hideNav}
           />
           <div className="pc-shell-body" style={bodyStyle}>
-            {!isMobile && (
+            {!isMobile && !hideNav && (
               <SidebarNav
                 className={sidebarClassName}
                 isExpanded={sidebar.isExpanded}
@@ -126,8 +137,28 @@ export default function AppShell({
             )}
             <section className="pc-shell-content" style={mainStyle}>
               <div className={contentClassName} style={contentWrapperStyle}>
-                <PageHeader />
-                <div style={{ flex: 1, minWidth: 0, width: '100%' }}>{children}</div>
+                {status === 'checking' ? (
+                  <div
+                    style={{
+                      ...pcStyles.flex,
+                      ...pcStyles.itemsCenter,
+                      ...pcStyles.justifyCenter,
+                      flex: 1,
+                      minHeight: 240,
+                    }}
+                  >
+                    <PCLoader variant="spinner" color="info" size="lg" />
+                  </div>
+                ) : status === 'empty' ? (
+                  <div style={{ flex: 1, minWidth: 0, width: '100%' }}>
+                    <PrivacyCenterEmptyState />
+                  </div>
+                ) : (
+                  <>
+                    <PageHeader />
+                    <div style={{ flex: 1, minWidth: 0, width: '100%' }}>{children}</div>
+                  </>
+                )}
                 <div
                   style={{
                     ...pcStyles.flex,
@@ -143,7 +174,7 @@ export default function AppShell({
               </div>
             </section>
           </div>
-          {isMobile && (
+          {isMobile && !hideNav && (
             <MobileNavDrawer
               isOpen={isMobileNavOpen}
               onClose={() => setMobileNavOpen(false)}

package/src/RedactoPrivacyCenter/components/AppShell/TopAppBar.tsx

@@ -26,10 +26,11 @@ type TopAppBarProps = {
   locale: string;
   onLocaleChange: (next: string) => void;
   onBack?: 'back' | 'signout';
+  showNotifications?: boolean;
 };
 
 export const TopAppBar = forwardRef<HTMLButtonElement, TopAppBarProps>(function TopAppBar(
-  { onOpenMobileNav, showHamburger, locale, onLocaleChange, onBack },
+  { onOpenMobileNav, showHamburger, locale, onLocaleChange, onBack, showNotifications = true },
   hamburgerRef,
 ) {
   const { t } = useTranslation();
@@ -170,7 +171,7 @@ export const TopAppBar = forwardRef<HTMLButtonElement, TopAppBarProps>(function
               onChange={handleLanguageChange}
             />
           )}
-          <NotificationBell />
+          {showNotifications && <NotificationBell />}
           <UserMenu onBack={onBack} />
         </div>
       </header>

package/src/RedactoPrivacyCenter/components/Form.tsx

@@ -9,6 +9,7 @@ import { AiOutlineClose } from 'react-icons/ai';
 import { PiUploadBold } from 'react-icons/pi';
 import { toast } from '../utils/toast';
 import { PCButton, PCCheckbox, PCInput, PCLoader, PCSelect, PCText, PCTextarea } from '../ui';
+import { PCModal } from '../ui/PCModal';
 import { buildGroupDataElements, buildGroupPurposes } from './groupHelpers';
 import { pcStyles } from '../styles/pcStyles';
 import { createCaseRequest, getFormData } from '../lib/api';
@@ -46,7 +47,8 @@ import {
 import PurposeSelectionSection from './DataRequest/PurposeSelectionSection';
 import RequestSubmit from './RequestSubmit';
 import type { CaseHistoryProps } from './types';
-import { FiChevronDown, FiChevronUp, FiX } from 'react-icons/fi';
+import { FiAlertCircle, FiChevronDown, FiChevronUp, FiX } from 'react-icons/fi';
+import { MAX_DISPLAYED_PURPOSE_NAMES_IN_ERASURE_MODAL } from './constant';
 
 const getVar = (varName: string): string => `var(${varName})`;
 
@@ -219,6 +221,10 @@ export default function Form({
   const [isTranslating, setIsTranslating] = useState(false);
   const [isRequestDetailsExpanded, setIsRequestDetailsExpanded] =
     useState(true);
+  const [isErasureConsentModalOpen, setIsErasureConsentModalOpen] =
+    useState(false);
+  const [revokeConsentOnFulfilment, setRevokeConsentOnFulfilment] =
+    useState(false);
 
   const resetFileInput = () => {
     if (fileInputRef.current) {
@@ -537,17 +543,52 @@ export default function Form({
     return translatedName;
   }, [data]);
 
+  // Purpose names selected in an ERASURE request — surfaced in the
+  // consent-revoke modal and the post-submit notice. When the list is
+  // empty or too long to enumerate, fall back to a generic phrase.
+  const selectedErasurePurposeList = useMemo(
+    () =>
+      selectedPurposes
+        .filter((p) => p.selected || p.data_elements.some((de) => de.selected))
+        .map((p) => p.name)
+        .filter(Boolean),
+    [selectedPurposes]
+  );
+
+  const selectedErasurePurposeNames = useMemo(() => {
+    if (
+      selectedErasurePurposeList.length === 0 ||
+      selectedErasurePurposeList.length > MAX_DISPLAYED_PURPOSE_NAMES_IN_ERASURE_MODAL
+    ) {
+      return t('revokeConsentModalYourPurposes');
+    }
+    return selectedErasurePurposeList.join(', ');
+  }, [selectedErasurePurposeList, t]);
+
   const handleSubmitClick = () => {
     if (!isFormValid) {
       return;
     }
-    // For ERASURE, set revoke_consent_on_fulfilment=true so the
-    // backend's auto-revoke task fires when the case is fulfilled.
-    // Erasing data without revoking the consent that authorized its
-    // processing is incoherent per DPDPA Sec 12. Other request types
-    // (ACCESS / CORRECTION / NOMINATION / GRIEVANCE) do not engage
-    // the auto-revoke path on the backend and pass false here.
-    void handleSubmit(requestType === RequestTypeEnum.ERASURE);
+    // ERASURE asks the data principal whether to also revoke consent on
+    // fulfilment — the choice is made in the modal and threaded into the
+    // payload via handleErasureModalChoice. Other request types
+    // (ACCESS / CORRECTION / NOMINATION / GRIEVANCE) submit directly.
+    if (requestType === RequestTypeEnum.ERASURE) {
+      setIsErasureConsentModalOpen(true);
+      return;
+    }
+    setRevokeConsentOnFulfilment(false);
+    void handleSubmit(false);
+  };
+
+  const handleErasureModalChoice = (revoke: boolean) => {
+    setRevokeConsentOnFulfilment(revoke);
+    setIsErasureConsentModalOpen(false);
+    void handleSubmit(revoke);
+  };
+
+  const handleErasureModalClose = () => {
+    setIsErasureConsentModalOpen(false);
   };
 
   /**
@@ -959,6 +1000,8 @@ export default function Form({
           result={submittedCase}
           contact={formData?.contact}
           onCreateRequest={onCreateRequest}
+          revokeConsentOnFulfilment={revokeConsentOnFulfilment}
+          revokedPurposeNames={selectedErasurePurposeNames}
         />
       ) : (
         <div>
@@ -1616,6 +1659,82 @@ export default function Form({
           </div>
         </div>
       )}
+      <PCModal
+        isOpen={isErasureConsentModalOpen}
+        onClose={handleErasureModalClose}
+        size="md"
+        showCloseButton={false}
+        footer={
+          <div className="pc-erasure-modal-footer">
+            <PCButton
+              variant="secondary"
+              onClick={() => handleErasureModalChoice(false)}
+              disabled={isLoading}
+            >
+              {t('revokeConsentNo')}
+            </PCButton>
+            <PCButton
+              variant="primary"
+              onClick={() => handleErasureModalChoice(true)}
+              disabled={isLoading}
+              isLoading={isLoading}
+            >
+              {t('revokeConsentYes')}
+            </PCButton>
+          </div>
+        }
+      >
+        <div className="pc-erasure-modal-content">
+          <div className="pc-erasure-modal-header">
+            <div className="pc-erasure-modal-icon">
+              <FiAlertCircle size={24} />
+            </div>
+            <p className="pc-erasure-modal-title">
+              {t('revokeConsentModalTitle')}
+            </p>
+            <p className="pc-erasure-modal-question">
+              {t('revokeConsentModalQuestion')}
+            </p>
+          </div>
+
+          <div className="pc-erasure-modal-purposes">
+            <p className="pc-erasure-modal-purposes-label">
+              {t('revokeConsentModalPurposesLabel')}
+            </p>
+            {selectedErasurePurposeList.length > 0 ? (
+              <>
+                {selectedErasurePurposeList
+                  .slice(0, MAX_DISPLAYED_PURPOSE_NAMES_IN_ERASURE_MODAL)
+                  .map((name) => (
+                    <div key={name} className="pc-erasure-modal-purpose-item">
+                      {name}
+                    </div>
+                  ))}
+                {selectedErasurePurposeList.length > MAX_DISPLAYED_PURPOSE_NAMES_IN_ERASURE_MODAL && (
+                  <span className="pc-erasure-modal-purposes-placeholder">
+                    {t('revokeConsentModalAndMore', {
+                      count: selectedErasurePurposeList.length - MAX_DISPLAYED_PURPOSE_NAMES_IN_ERASURE_MODAL,
+                    })}
+                  </span>
+                )}
+              </>
+            ) : (
+              <span className="pc-erasure-modal-purposes-placeholder">
+                {t('revokeConsentModalYourPurposes')}
+              </span>
+            )}
+          </div>
+
+          <div className="pc-erasure-modal-warning">
+            <p className="pc-erasure-modal-warning-text">
+              <span className="pc-erasure-modal-warning-label">
+                {t('revokeConsentModalIfYesLabel')}
+              </span>{' '}
+              {t('revokeConsentModalIfYesBody')}
+            </p>
+          </div>
+        </div>
+      </PCModal>
     </>
   );
 }

package/src/RedactoPrivacyCenter/components/PrivacyCenterEmptyState.tsx

@@ -0,0 +1,76 @@
+import { useTranslation } from 'react-i18next';
+import character from '../assets/character.svg';
+import { PCText, PCTitle } from '../ui';
+import { pcStyles } from '../styles/pcStyles';
+import { getVar } from '../lib/utils';
+
+/**
+ * Full-screen content shown (in place of the consent manager / tabs) when the
+ * user has no data anywhere — no consents, no data-request cases, no activity.
+ * Purely presentational: a friendly illustration, heading, and subtitle.
+ */
+export function PrivacyCenterEmptyState() {
+  const { t } = useTranslation();
+
+  return (
+    <div
+      style={{
+        ...pcStyles.flex,
+        ...pcStyles.flexCol,
+        ...pcStyles.itemsCenter,
+        ...pcStyles.justifyCenter,
+        ...pcStyles.textCenter,
+        width: '100%',
+        maxWidth: 460,
+        margin: '0 auto',
+        minHeight: 'min(62vh, 540px)',
+        paddingTop: getVar('--pc-spacing-2xl'),
+        paddingBottom: getVar('--pc-spacing-2xl'),
+        gap: getVar('--pc-spacing-xl'),
+      }}
+    >
+      <div
+        aria-hidden="true"
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          width: 168,
+          height: 168,
+          borderRadius: '50%',
+          background:
+            'color-mix(in srgb, var(--pc-primary) 8%, var(--pc-bg-shell))',
+          flexShrink: 0,
+        }}
+      >
+        <img
+          src={character}
+          alt=""
+          style={{ width: 104, height: 'auto', display: 'block' }}
+        />
+      </div>
+
+      <div
+        style={{
+          ...pcStyles.flex,
+          ...pcStyles.flexCol,
+          ...pcStyles.itemsCenter,
+          gap: getVar('--pc-spacing-sm'),
+        }}
+      >
+        <PCTitle as="h2" style={{ margin: 0 }}>
+          {t('noDataTitle')}
+        </PCTitle>
+        <PCText
+          as="p"
+          size="base"
+          color="secondary"
+          align="center"
+          style={{ margin: 0, maxWidth: 400 }}
+        >
+          {t('noDataDescription')}
+        </PCText>
+      </div>
+    </div>
+  );
+}

package/src/RedactoPrivacyCenter/components/ReceiptsList.tsx

@@ -13,7 +13,7 @@ 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 type { Receipt, ReceiptEventType } from '../lib/types';
 import { useReceiptColumns } from './receiptColumns';
 
 /**
@@ -89,7 +89,6 @@ export default function ReceiptsList() {
 
   // ─── 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>('');
@@ -104,15 +103,6 @@ export default function ReceiptsList() {
     ],
     [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') },
@@ -126,9 +116,8 @@ export default function ReceiptsList() {
   );
 
   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 hasActiveFilters = Boolean(eventType || datePreset);
   const isCustomRangeInvalid = useMemo(
     () =>
       datePreset === 'custom' &&
@@ -142,9 +131,6 @@ export default function ReceiptsList() {
     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') {
@@ -156,16 +142,12 @@ export default function ReceiptsList() {
     }
 
     return filters;
-  }, [eventType, eventValue, status, statusValue, datePreset, dateValue, customFrom, customTo, t]);
+  }, [eventType, eventValue, 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);
@@ -177,7 +159,6 @@ export default function ReceiptsList() {
   };
   const handleClearFilters = () => {
     setEventType('');
-    setStatus('');
     setDatePreset('');
     setCustomFrom('');
     setCustomTo('');
@@ -199,7 +180,6 @@ export default function ReceiptsList() {
             skip,
             limit: size,
             event_type: eventType || undefined,
-            status: status || undefined,
             created_after,
             created_before,
             language: langParam,
@@ -229,7 +209,6 @@ export default function ReceiptsList() {
       currentPage,
       pageSize,
       eventType,
-      status,
       datePreset,
       customFrom,
       customTo,
@@ -375,23 +354,6 @@ export default function ReceiptsList() {
             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"