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

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

@@ -148,7 +148,7 @@ export default function CorrectionDataSection({
                     gap: getVar('--pc-spacing-xs'),
                   }}>
                     <PCInput
-                      placeholder="Current value"
+                      placeholder={t('currentValuePlaceholder')}
                       size="sm"
                       required
                       value={correctionValues[name]?.current || ''}
@@ -163,7 +163,7 @@ export default function CorrectionDataSection({
                       }
                     />
                     <PCInput
-                      placeholder="Updated value"
+                      placeholder={t('updatedValuePlaceholder')}
                       size="sm"
                       required
                       value={correctionValues[name]?.updated || ''}

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

@@ -3,7 +3,6 @@ import { pcStyles } from '../../styles/pcStyles';
 import { ChevronDown } from 'lucide-react';
 import { RequestTypeEnum } from '../../lib/types';
 import type { Purpose, DataElement } from '../../lib/types';
-import { cn } from '../../utils/cn';
 import { useTranslation } from 'react-i18next';
 import { useEffect, useState } from 'react';
 
@@ -206,7 +205,7 @@ export default function PurposeSelectionSection({
                 type="button"
                 onClick={() => toggleAccordion(index)}
                 style={{
-                  marginLeft: pcStyles.mLg.marginLeft,
+                  marginLeft: getVar('--pc-spacing-lg'),
                   color: getVar('--pc-text-secondary'),
                   background: 'none',
                   border: 'none',
@@ -254,7 +253,7 @@ export default function PurposeSelectionSection({
                           // The backend should handle consent validation
                           return de !== null && de !== undefined;
                         })
-                        .map((de: DataElement, originalIndex: number) => {
+                        .map((de: DataElement) => {
                           // Find the original index in the unfiltered array for proper state updates
                           const actualIndex = item.data_elements.findIndex(
                             (el) => el.uuid === de.uuid

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, PCTextarea } from '../ui';
+import { PCModal } from '../ui/PCModal';
 import { pcStyles } from '../styles/pcStyles';
 import { createCaseRequest, getFormData } from '../lib/api';
 import { ensureValidToken } from '../lib/utils';
@@ -40,8 +41,8 @@ import NominationDataSection from './DataRequest/NominationDataSection';
 import PurposeSelectionSection from './DataRequest/PurposeSelectionSection';
 import RequestSubmit from './RequestSubmit';
 import type { CaseHistoryProps } from './types';
-import { cn } from '../utils/cn';
-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})`;
 
@@ -133,6 +134,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) {
@@ -472,7 +477,9 @@ export default function Form({
    * Maps translated correction element names back to English names using UUID lookup.
    */
   const getEnglishDataElementName = useCallback((translatedName: string): string => {
-    if (!englishDataRef.current?.purposes) return translatedName;
+    if (!englishDataRef.current?.purposes){
+       return translatedName
+      }
 
     // Build a map from translated name -> english name via UUID
     const translatedToUuid = new Map<string, string>();
@@ -485,17 +492,64 @@ export default function Form({
     }
 
     const uuid = translatedToUuid.get(translatedName);
-    if (!uuid) return translatedName;
+    if (!uuid){
+       return translatedName
+      }
 
     for (const pw of englishDataRef.current.purposes) {
       const englishDe = pw.purpose?.data_elements?.find((de) => de.uuid === uuid);
-      if (englishDe) return englishDe.name;
+      if (englishDe){
+         return englishDe.name
+        }
     }
     return translatedName;
   }, [data]);
 
-  const handleSubmit = async () => {
-    if (!isFormValid) return;
+  const selectedErasurePurposeList = useMemo(
+    () =>
+      erasurePurposes
+        .filter((p) => p.selected || p.data_elements.some((de) => de.selected))
+        .map((p) => p.name)
+        .filter(Boolean),
+    [erasurePurposes]
+  );
+
+  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
+    };
+    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);
+  };
+
+  const handleSubmit = async (revokeConsent: boolean = false) => {
+    if (!isFormValid){
+       return
+      };
 
     const requestDetails: {
       purposes: UpdatePurpose[];
@@ -569,6 +623,9 @@ export default function Form({
           ? parseInt(timePeriod || '30', 10)
           : 0,
       requestor_note: formData.additionalNote || '',
+      ...(requestType === RequestTypeEnum.ERASURE
+        ? { revoke_consent_on_fulfilment: revokeConsent }
+        : {}),
     };
 
     try {
@@ -626,7 +683,9 @@ export default function Form({
   };
 
   const isRequestDetailsValid = useCallback(() => {
-    if (!requestType) return false;
+    if (!requestType){
+       return false
+      };
     switch (requestType) {
       case RequestTypeEnum.ACCESS:
         return accessPurposes.some(
@@ -768,7 +827,9 @@ export default function Form({
   };
 
   const handleVerifyContact = async () => {
-    if (!isPopup) return;
+    if (!isPopup) {
+      return
+    };
     if (!formData.contact) {
       toast.error(t('pleaseEnterContactToVerify'));
       return;
@@ -862,6 +923,8 @@ export default function Form({
           caseId={caseId || ''}
           contact={formData?.contact}
           onCreateRequest={onCreateRequest}
+          revokeConsentOnFulfilment={revokeConsentOnFulfilment}
+          revokedPurposeNames={selectedErasurePurposeNames}
         />
       ) : (
         <div>
@@ -962,7 +1025,9 @@ export default function Form({
                       value={formData.contact}
                       readOnly={!isPopup}
                       onChange={(e) => {
-                        if (!isPopup) return;
+                        if (!isPopup){
+                           return
+                          };
                         setFormData({
                           ...formData,
                           contact: e.target.value,
@@ -1428,7 +1493,7 @@ export default function Form({
                     )}
                     <PCButton
                       variant="primary"
-                      onClick={handleSubmit}
+                      onClick={handleSubmitClick}
                       disabled={!isFormValid || isLoading}
                       isLoading={isLoading}
                       style={{
@@ -1450,6 +1515,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="outline"
+              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/GrievanceTable.tsx

@@ -3,10 +3,8 @@ import { useTranslation } from 'react-i18next';
 import { flexRender } from '@tanstack/react-table';
 import { PCTable, PCLoader, PCEmpty } from '../ui';
 import { pcStyles } from '../styles/pcStyles';
-import type {
-  Table as ReactTableType,
-  Row,
-} from '@tanstack/react-table';
+import type { Table as ReactTableType } from '@tanstack/react-table';
+import type { TableColumnMeta } from './types';
 
 const getVar = (varName: string): string => `var(${varName})`;
 
@@ -74,7 +72,7 @@ export default function GrievanceTable<TData extends Record<string, any>>({
                     color: getVar('--pc-text-primary'),
                     backgroundColor: getVar('--pc-bg-secondary'),
                     borderBottom: `1px solid ${getVar('--pc-border-color')}`,
-                    textAlign: header.column.columnDef.meta?.align || 'left',
+                    textAlign: (header.column.columnDef.meta as TableColumnMeta | undefined)?.align || 'left',
                     whiteSpace: 'nowrap',
                   }}
                 >
@@ -156,7 +154,7 @@ export default function GrievanceTable<TData extends Record<string, any>>({
                         fontSize: pcStyles.textSm.fontSize,
                         color: getVar('--pc-text-primary'),
                         borderBottom: `1px solid ${getVar('--pc-border-color')}`,
-                        textAlign: cell.column.columnDef.meta?.align || 'left',
+                        textAlign: (cell.column.columnDef.meta as TableColumnMeta | undefined)?.align || 'left',
                       }}
                     >
                       {flexRender(

package/src/RedactoPrivacyCenter/components/GrievanceTablePagination.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { type Table as ReactTableType } from '@tanstack/react-table';
 import {
@@ -7,7 +6,7 @@ import {
   PiCaretLeftBold,
   PiCaretRightBold,
 } from 'react-icons/pi';
-import { PCActionIcon, PCSelect, PCText, type SelectOption } from '../ui';
+import { PCActionIcon, PCSelect, PCText } from '../ui';
 import { pcStyles } from '../styles/pcStyles';
 
 const getVar = (varName: string): string => `var(${varName})`;
@@ -161,6 +160,7 @@ export default function GrievanceTablePagination<
             <PCActionIcon
               size="sm"
               variant="outline"
+              aria-label={t('goToFirstPage')}
               onClick={() => handlePageChange(0)}
               disabled={!canPreviousPage}
               style={{
@@ -174,6 +174,7 @@ export default function GrievanceTablePagination<
             <PCActionIcon
               size="sm"
               variant="outline"
+              aria-label={t('goToPreviousPage')}
               onClick={() => handlePageChange(currentPageIndex - 1)}
               disabled={!canPreviousPage}
               style={{
@@ -187,6 +188,7 @@ export default function GrievanceTablePagination<
             <PCActionIcon
               size="sm"
               variant="outline"
+              aria-label={t('goToNextPage')}
               onClick={() => handlePageChange(currentPageIndex + 1)}
               disabled={!canNextPage}
               style={{
@@ -200,6 +202,7 @@ export default function GrievanceTablePagination<
             <PCActionIcon
               size="sm"
               variant="outline"
+              aria-label={t('goToLastPage')}
               onClick={() => handlePageChange(totalPages - 1)}
               disabled={!canNextPage}
               style={{
@@ -274,6 +277,7 @@ export default function GrievanceTablePagination<
             <PCActionIcon
               size="sm"
               variant="outline"
+              aria-label={t('goToFirstPage')}
               onClick={() => handlePageChange(0)}
               disabled={!canPreviousPage}
               style={{
@@ -287,6 +291,7 @@ export default function GrievanceTablePagination<
             <PCActionIcon
               size="sm"
               variant="outline"
+              aria-label={t('goToPreviousPage')}
               onClick={() => handlePageChange(currentPageIndex - 1)}
               disabled={!canPreviousPage}
               style={{
@@ -300,6 +305,7 @@ export default function GrievanceTablePagination<
             <PCActionIcon
               size="sm"
               variant="outline"
+              aria-label={t('goToNextPage')}
               onClick={() => handlePageChange(currentPageIndex + 1)}
               disabled={!canNextPage}
               style={{
@@ -313,6 +319,7 @@ export default function GrievanceTablePagination<
             <PCActionIcon
               size="sm"
               variant="outline"
+              aria-label={t('goToLastPage')}
               onClick={() => handlePageChange(totalPages - 1)}
               disabled={!canNextPage}
               style={{

package/src/RedactoPrivacyCenter/components/ModifyConsentModal.tsx

@@ -118,6 +118,7 @@ export const ModifyConsentModal = ({
     <PCModal
       isOpen={isOpen}
       onClose={onClose}
+      closeAriaLabel={t('closeModal')}
       title={
         <PCText size="base" weight="semibold">
           {t('modifyConsent')}

package/src/RedactoPrivacyCenter/components/Pagination.tsx

@@ -1,4 +1,5 @@
-import { PCActionIcon, PCSelect, PCText, type SelectOption } from '../ui';
+import { useTranslation } from 'react-i18next';
+import { PCActionIcon, PCSelect, PCText } from '../ui';
 import {
   ChevronLeft,
   ChevronRight,
@@ -19,6 +20,7 @@ export default function Pagination({
   onPageSizeChange,
   className,
 }: PaginationProps) {
+  const { t } = useTranslation();
   const handlePageChange = (newPageIndex: number) => {
     onPageChange(newPageIndex + 1);
   };
@@ -41,11 +43,11 @@ export default function Pagination({
       }} className="pc-flex-responsive">
         <div style={{ ...pcStyles.flex, ...pcStyles.itemsCenter, ...pcStyles.gapSm }}>
           <PCText size="xs" color="secondary" className="pc-hidden-xs pc-block-sm">
-            Rows per page
+            {t('rowsPerPage')}
           </PCText>
           <PCSelect
             size="sm"
-            options={PAGE_SIZE_OPTIONS as SelectOption[]}
+            options={PAGE_SIZE_OPTIONS}
             value={currentPageSizeOption}
             onChange={(v) => {
               if (v) {
@@ -58,7 +60,7 @@ export default function Pagination({
         </div>
         <div style={{ ...pcStyles.flex, ...pcStyles.itemsCenter, ...pcStyles.gapSm }}>
           <PCText size="xs" color="secondary">
-            Total: {totalRecords} records
+            {t('totalRecords', { count: totalRecords })}
           </PCText>
         </div>
       </div>
@@ -70,11 +72,9 @@ export default function Pagination({
         width: '100%',
       }} className="pc-flex-responsive">
         <div style={{ ...pcStyles.flex, ...pcStyles.itemsCenter, ...pcStyles.gapSm }}>
-          <PCText size="xs" color="secondary" className="pc-hidden-xs pc-block-sm">Page</PCText>
-          <PCText size="xs" weight="semibold" color="primary">
-            {totalPages === 0 ? 0 : currentPage}
+          <PCText size="xs" color="secondary">
+            {t('pageOf', { current: totalPages === 0 ? 0 : currentPage, total: totalPages })}
           </PCText>
-          <PCText size="xs" color="secondary">of {totalPages}</PCText>
         </div>
         <div style={{
           display: 'grid',
@@ -84,7 +84,7 @@ export default function Pagination({
           <PCActionIcon
             size="sm"
             variant="outline"
-            aria-label="Go to first page"
+            aria-label={t('goToFirstPage')}
             onClick={() => handlePageChange(0)}
             disabled={currentPage === 1}
             style={{
@@ -97,7 +97,7 @@ export default function Pagination({
           <PCActionIcon
             size="sm"
             variant="outline"
-            aria-label="Go to previous page"
+            aria-label={t('goToPreviousPage')}
             onClick={() => handlePageChange(currentPage - 2)}
             disabled={currentPage === 1}
             style={{
@@ -110,7 +110,7 @@ export default function Pagination({
           <PCActionIcon
             size="sm"
             variant="outline"
-            aria-label="Go to next page"
+            aria-label={t('goToNextPage')}
             onClick={() => handlePageChange(currentPage)}
             disabled={totalRecords === 0 || currentPage === totalPages}
             style={{
@@ -123,7 +123,7 @@ export default function Pagination({
           <PCActionIcon
             size="sm"
             variant="outline"
-            aria-label="Go to last page"
+            aria-label={t('goToLastPage')}
             onClick={() => handlePageChange(totalPages - 1)}
             disabled={totalRecords === 0 || currentPage === totalPages}
             style={{

package/src/RedactoPrivacyCenter/components/PrivacyCenterLayout.tsx

@@ -40,7 +40,7 @@ export default function PrivacyCenterLayout({
 
   return (
     <LocaleContext.Provider value={{ locale, setLocale }}>
-      <Suspense fallback={<div style={{ ...pcStyles.flex, ...pcStyles.itemsCenter, ...pcStyles.justifyCenter, minHeight: '100vh' }}>Loading...</div>}>
+      <Suspense fallback={<div style={{ ...pcStyles.flex, ...pcStyles.itemsCenter, ...pcStyles.justifyCenter, minHeight: '100vh' }}>{t('loadingEllipsis')}</div>}>
         <ThemeTransitionOverlay />
         <main
           className="pc-root"
@@ -129,6 +129,8 @@ export default function PrivacyCenterLayout({
                 <PCSelect
                   size="sm"
                   searchable
+                  searchPlaceholder={t('searchPlaceholder')}
+                  noOptionsMessage={t('noOptionsFound')}
                   style={{
                     width: 'auto',
                     minWidth: '92px',

package/src/RedactoPrivacyCenter/components/RequestSubmit.tsx

@@ -1,6 +1,5 @@
 import character from '../assets/character.svg';
 import greenTick from '../assets/greenTick.svg';
-import mailIcon from '../assets/mail.svg';
 import sentImg from '../assets/sentImg.svg';
 import { useTranslation } from 'react-i18next';
 import { PCButton, PCText } from '../ui';
@@ -14,6 +13,8 @@ export default function RequestSubmit({
   caseId,
   contact,
   onCreateRequest,
+  revokeConsentOnFulfilment,
+  revokedPurposeNames,
 }: RequestSubmitProps) {
   const { t } = useTranslation();
   return (
@@ -158,6 +159,19 @@ export default function RequestSubmit({
               >
                 {t('processRequest')}.
               </PCText>
+              {revokeConsentOnFulfilment && (
+                <div className="pc-request-submit-revoke-notice">
+                  <PCText
+                    size="xs"
+                    weight="medium"
+                    className="pc-request-submit-revoke-notice-text"
+                  >
+                    {t('erasureConsentRevokeNotice', {
+                      purposes: revokedPurposeNames,
+                    })}
+                  </PCText>
+                </div>
+              )}
             </div>
           </div>
           <div className="pc-hidden-xs pc-block-md" style={{ width: '100%' }}>

package/src/RedactoPrivacyCenter/components/SideMenuBarPC/SideBarPC.tsx

@@ -3,7 +3,7 @@ import SimpleBar from '../../ui/SimpleBar';
 import { PCText, PCAvatar, PCButton, PCActionIcon } from '../../ui';
 import { PCTooltip } from '../../ui/PCTooltip';
 import { pcStyles } from '../../styles/pcStyles';
-import { useState, useEffect, useCallback, useMemo } from 'react';
+import { useState, useEffect, useCallback, useMemo, type CSSProperties } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   IoArrowBackOutline,
@@ -119,9 +119,9 @@ export default function SideBarPC({
     [isCollapsed, className]
   );
 
-  const sidebarStyle = useMemo(
+  const sidebarStyle = useMemo<CSSProperties>(
     () => ({
-      position: 'fixed' as const,
+      position: 'fixed',
       top: 0,
       bottom: 0,
       left: 0,
@@ -131,8 +131,8 @@ export default function SideBarPC({
       transition: 'width 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease, border-color 0.3s ease',
       display: 'flex',
       flexDirection: 'column',
-      overflowY: 'hidden' as const,
-      overflowX: 'visible' as const,
+      overflowY: 'hidden',
+      overflowX: 'visible',
       boxSizing: 'border-box',
       height: '100vh',
       willChange: 'width',
@@ -226,7 +226,7 @@ export default function SideBarPC({
       {!isCompact && !isMobileOpen && (
         <PCActionIcon
           variant="outline"
-          aria-label={isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+          aria-label={isCollapsed ? t('expandSidebar') : t('collapseSidebar')}
           className="pc-sidebar-toggle-desktop pc-hidden-xs pc-hidden-sm pc-flex-md"
           data-collapsed={isCollapsed ? 'true' : 'false'}
           data-visible={(!isCollapsed || isDesktopHovered) ? 'true' : 'false'}
@@ -258,7 +258,7 @@ export default function SideBarPC({
       {!isMobileOpen && (
         <PCActionIcon
           data-mobile-menu-button
-          aria-label="Open Sidebar Menu"
+          aria-label={t('openSidebarMenu')}
           variant="default"
           style={{
             position: 'fixed',
@@ -357,7 +357,7 @@ export default function SideBarPC({
               style={{ color: getVar('--pc-text-primary') }}
               className="pc-hidden-md"
               onClick={handleMobileClose}
-              aria-label="Close Sidebar Menu"
+              aria-label={t('closeSidebarMenu')}
             >
               <IoCloseOutline size={20} />
             </PCActionIcon>