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

package/package.json

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

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/tests/Form.test.tsx

@@ -694,6 +694,13 @@ describe('Form (P2-SDK-3)', () => {
       fireEvent.click(submitButton);
     });
 
+    // ERASURE asks whether to also revoke consent before it submits.
+    // Choosing "Yes" (revokeConsentYes) sets revoke_consent_on_fulfilment=true.
+    const revokeYesButton = await screen.findByRole('button', { name: 'Yes' });
+    await act(async () => {
+      fireEvent.click(revokeYesButton);
+    });
+
     await waitFor(() => {
       expect(createCaseRequest).toHaveBeenCalledTimes(1);
     });
@@ -703,7 +710,7 @@ describe('Form (P2-SDK-3)', () => {
     expect('data_principal_uuid' in payload).toBe(false);
     expect(payload.uuid).toBe('form-session-uuid');
     expect(payload.request_type).toBe('erasure');
-    // ERASURE submits must set this flag so the backend's
+    // The user chose "Yes" in the consent-revoke modal, so the backend's
     // auto-revoke task fires when the case is fulfilled (DPDPA Sec 12:
     // erasing data implies revoking the consent that authorized
     // processing it).
@@ -714,6 +721,86 @@ describe('Form (P2-SDK-3)', () => {
     });
   });
 
+  it('opens the consent-revoke modal on erasure and sends revoke_consent_on_fulfilment=false when the user declines', async () => {
+    setupSession();
+    const directGroup = makeGroup({
+      product_uuid: 'prod-direct',
+      product_name: 'Acme Loyalty',
+      purposes: [basePurpose('purp-direct', 'Marketing')],
+    });
+    const nominatedGroup = makeGroup({
+      product_uuid: 'prod-nominated',
+      product_name: 'Partner Bank',
+      nominator: {
+        uuid: 'nominator-uuid',
+        org_user_id: 'org-user-1',
+        name: 'Alice',
+        email: 'alice@example.com',
+      },
+      purposes: [basePurpose('purp-nominated', 'Analytics')],
+    });
+    getFormData.mockResolvedValue(
+      makeFormData({
+        direct_groups: [directGroup],
+        nominated_groups: [nominatedGroup],
+      }),
+    );
+    createCaseRequest.mockResolvedValueOnce({
+      case_id: 'CASE-2',
+      uuid: 'uuid-2',
+    });
+
+    render(<Form onCreateRequest={vi.fn()} />);
+    await waitFor(() => expect(getFormData).toHaveBeenCalled());
+
+    pickRequestType(RequestTypeEnum.ERASURE);
+
+    await waitFor(() =>
+      expect(screen.getByText('Acme Loyalty')).toBeInTheDocument(),
+    );
+    clickProductChip('prod-direct');
+
+    await waitFor(() => {
+      expect(
+        screen.getByTestId('per-product-purposes-prod-direct'),
+      ).toBeInTheDocument();
+    });
+
+    const marketingCheckbox = screen
+      .getByText('Marketing')
+      .closest('label')
+      ?.querySelector('input[type="checkbox"]') as HTMLInputElement | null;
+    expect(marketingCheckbox).toBeTruthy();
+    fireEvent.click(marketingCheckbox!);
+
+    const confirmCheckbox = (
+      screen.getAllByRole('checkbox') as HTMLInputElement[]
+    ).find((c) => c.closest('label')?.textContent?.includes('I confirm'));
+    expect(confirmCheckbox).toBeTruthy();
+    fireEvent.click(confirmCheckbox!);
+
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: /^submit$/i }));
+    });
+
+    // The consent-revoke modal must appear, and no request fires until the
+    // user makes a choice. ('Revoke consent?' === revokeConsentModalTitle stub.)
+    expect(await screen.findByText('Revoke consent?')).toBeInTheDocument();
+    expect(createCaseRequest).not.toHaveBeenCalled();
+
+    // Declining ('No' === revokeConsentNo) submits with the flag explicitly false.
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: 'No' }));
+    });
+
+    await waitFor(() => {
+      expect(createCaseRequest).toHaveBeenCalledTimes(1);
+    });
+    const payload = createCaseRequest.mock.calls[0][2];
+    expect(payload.request_type).toBe('erasure');
+    expect(payload.revoke_consent_on_fulfilment).toBe(false);
+  });
+
   it('switches the inline purpose panel when another product chip is selected', async () => {
     setupSession();
     const creditCard = makeGroup({
@@ -1052,6 +1139,11 @@ describe('Form (P2-SDK-3)', () => {
       fireEvent.click(screen.getByRole('button', { name: /^submit$/i }));
     });
 
+    // ERASURE routes through the consent-revoke modal before submitting.
+    await act(async () => {
+      fireEvent.click(await screen.findByRole('button', { name: 'Yes' }));
+    });
+
     await waitFor(() => {
       expect(createCaseRequest).toHaveBeenCalledTimes(1);
     });