@redacto.io/consent-sdk-react 3.4.0 → 4.0.0

package/package.json

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

package/src/RedactoNoticeConsent/RedactoNoticeConsent.test.tsx

@@ -22,30 +22,10 @@ import type { ConsentContent } from "./api/types";
 vi.mock("./api", () => ({
   fetchConsentContent: vi.fn(),
   submitConsentEvent: vi.fn(),
-  submitGuardianInfo: vi.fn(),
-  fetchTTSAudioUrls: vi.fn().mockResolvedValue({
-    code: 200,
-    status: "success",
-    detail: {
-      uuid: "notice-123",
-      language: "en",
-      notice_text_audio_url: "",
-      additional_text_audio_url: "",
-      notice_summary_audio_url: "",
-      confirm_button_text_audio_url: "",
-      decline_button_text_audio_url: "",
-      privacy_policy_prefix_text_audio_url: "",
-      privacy_policy_anchor_text_audio_url: "",
-      purpose_section_heading_audio_url: "",
-      notice_banner_heading_audio_url: "",
-      purposes_audio: {
-        "purpose-1": { name_audio_url: "", description_audio_url: "" },
-        "purpose-2": { name_audio_url: "", description_audio_url: "" },
-      },
-      data_elements_audio: {},
-    },
-  }),
   clearApiCache: vi.fn(),
+  fetchTTSAudioUrls: vi.fn(),
+  initiateGuardianVerification: vi.fn(),
+  verifyGuardianStatus: vi.fn(),
 }));
 
 // Mock jwt-decode
@@ -67,16 +47,36 @@ vi.mock("./injectStyles", () => ({
   injectCheckboxStyles: vi.fn(),
 }));
 
+// Mock storage service
+vi.mock("./services/storage", () => ({
+  saveConsentState: vi.fn(),
+  getConsentState: vi.fn(() => null),
+  clearConsentState: vi.fn(),
+  updateConsentState: vi.fn(),
+  hasPendingVerification: vi.fn(() => false),
+  getVerificationResult: vi.fn(() => null),
+  getVerificationReference: vi.fn(() => null),
+}));
+
+// Mock window.open for popup tests
+const mockWindowOpen = vi.fn(() => ({
+  closed: false,
+  focus: vi.fn(),
+  close: vi.fn(),
+}));
+Object.defineProperty(window, 'open', {
+  writable: true,
+  value: mockWindowOpen,
+});
+
 describe("RedactoNoticeConsent", () => {
-  const mockedApi = vi.mocked(api, { partial: true });
-  beforeEach(() => {
-    vi.clearAllMocks();
+  const mockedApi = vi.mocked(api);
+  
+  const setupCommonMocks = () => {
     // Mock API calls synchronously to avoid act() warnings
-    mockedApi.fetchConsentContent.mockReturnValue(
-      Promise.resolve(mockConsentContent)
-    );
-    mockedApi.submitConsentEvent.mockReturnValue(Promise.resolve(undefined));
-    mockedApi.submitGuardianInfo.mockReturnValue(Promise.resolve(undefined));
+    mockedApi.fetchConsentContent.mockResolvedValue(mockConsentContent);
+    mockedApi.submitConsentEvent.mockResolvedValue(undefined);
+    // Mock TTS audio URLs API
     mockedApi.fetchTTSAudioUrls.mockResolvedValue({
       code: 200,
       status: "success",
@@ -99,6 +99,35 @@ describe("RedactoNoticeConsent", () => {
         data_elements_audio: {},
       },
     });
+    // Mock guardian verification APIs (DigiLocker flow)
+    mockedApi.initiateGuardianVerification.mockResolvedValue({
+      success: true,
+      already_verified: false,
+      session_token: "gvs_test-session-token",
+      digilocker_redirect_url: "https://digilocker.example.com/authorize?session=xyz",
+      expires_at: new Date(Date.now() + 600000).toISOString(),
+      guardian_info_uuid: "test-guardian-uuid",
+    });
+    mockedApi.verifyGuardianStatus.mockResolvedValue({
+      status: "verified" as const,
+      guardian_info_uuid: "test-guardian-uuid",
+      verification_reference: "VER_ABC123",
+      guardian_details: {
+        verified_name: "John Doe",
+        is_guardian_adult: true,
+        verified_at: new Date().toISOString(),
+        verification_reference: "VER_ABC123",
+      },
+      error: null,
+      error_code: null,
+      can_retry: false,
+    });
+  };
+
+  beforeEach(() => {
+    vi.resetAllMocks();
+    mockWindowOpen.mockClear();
+    setupCommonMocks();
   });
 
   afterEach(() => {
@@ -113,7 +142,7 @@ describe("RedactoNoticeConsent", () => {
   });
 
   it("renders consent content after loading", async () => {
-    act(() => {
+    await act(async () => {
       render(<RedactoNoticeConsent {...defaultProps} />);
     });
     await waitFor(
@@ -125,8 +154,6 @@ describe("RedactoNoticeConsent", () => {
         expect(
           screen.getByRole("link", { name: /Privacy Policy/i })
         ).toBeInTheDocument();
-        expect(screen.getByText("[Vendors List]")).toBeInTheDocument();
-        expect(screen.getByText("Manage What You Share")).toBeInTheDocument();
         expect(screen.getByText("Marketing")).toBeInTheDocument();
       },
       { timeout: 3000 }
@@ -169,7 +196,9 @@ describe("RedactoNoticeConsent", () => {
   });
 
   it("handles language selection", async () => {
-    render(<RedactoNoticeConsent {...defaultProps} />);
+    await act(async () => {
+      render(<RedactoNoticeConsent {...defaultProps} />);
+    });
     await waitFor(
       () => {
         expect(screen.getByRole("button", { name: "en" })).toBeInTheDocument();
@@ -271,7 +300,9 @@ describe("RedactoNoticeConsent", () => {
   });
 
   it("disables required data element checkboxes", async () => {
-    render(<RedactoNoticeConsent {...defaultProps} />);
+    await act(async () => {
+      render(<RedactoNoticeConsent {...defaultProps} />);
+    });
     await waitFor(
       () => {
         expect(screen.getByText("Marketing")).toBeInTheDocument();
@@ -314,7 +345,9 @@ describe("RedactoNoticeConsent", () => {
   });
 
   it("calls submitConsentEvent on accept", async () => {
-    render(<RedactoNoticeConsent {...defaultProps} />);
+    await act(async () => {
+      render(<RedactoNoticeConsent {...defaultProps} />);
+    });
     await waitFor(
       () => {
         expect(screen.getByText("Accept")).toBeInTheDocument();
@@ -362,6 +395,7 @@ describe("RedactoNoticeConsent", () => {
           ],
           declined: false,
           meta_data: undefined,
+          guardianVerificationReference: undefined,
           signal: expect.any(AbortSignal),
         });
         expect(defaultProps.onAccept).toHaveBeenCalled();
@@ -441,30 +475,10 @@ describe("RedactoNoticeConsent", () => {
 
   describe("reconsent functionality", () => {
     beforeEach(() => {
+      vi.resetAllMocks();
+      mockWindowOpen.mockClear();
+      setupCommonMocks();
       mockedApi.fetchConsentContent.mockResolvedValue(mockReconsentContent);
-      mockedApi.submitConsentEvent.mockResolvedValue(undefined);
-      mockedApi.fetchTTSAudioUrls.mockResolvedValue({
-        code: 200,
-        status: "success",
-        detail: {
-          uuid: "notice-123",
-          language: "en",
-          notice_text_audio_url: "",
-          additional_text_audio_url: "",
-          notice_summary_audio_url: "",
-          confirm_button_text_audio_url: "",
-          decline_button_text_audio_url: "",
-          privacy_policy_prefix_text_audio_url: "",
-          privacy_policy_anchor_text_audio_url: "",
-          purpose_section_heading_audio_url: "",
-          notice_banner_heading_audio_url: "",
-          purposes_audio: {
-            "purpose-1": { name_audio_url: "", description_audio_url: "" },
-            "purpose-2": { name_audio_url: "", description_audio_url: "" },
-          },
-          data_elements_audio: {},
-        },
-      });
     });
 
     it("shows reconsent UI with visual indicators for different consent states", async () => {
@@ -499,9 +513,11 @@ describe("RedactoNoticeConsent", () => {
     });
 
     it("passes validate_against parameter to API", async () => {
-      render(
-        <RedactoNoticeConsent {...defaultProps} validateAgainst="required" />
-      );
+      await act(async () => {
+        render(
+          <RedactoNoticeConsent {...defaultProps} validateAgainst="required" />
+        );
+      });
       await waitFor(
         () => {
           expect(api.fetchConsentContent).toHaveBeenCalledWith({
@@ -521,7 +537,9 @@ describe("RedactoNoticeConsent", () => {
     });
 
     it("defaults to validate_against 'all' when not specified", async () => {
-      render(<RedactoNoticeConsent {...defaultProps} />);
+      await act(async () => {
+        render(<RedactoNoticeConsent {...defaultProps} />);
+      });
       await waitFor(
         () => {
           expect(api.fetchConsentContent).toHaveBeenCalledWith({
@@ -596,9 +614,10 @@ describe("RedactoNoticeConsent", () => {
 
   describe("age verification and minor consent functionality", () => {
     beforeEach(() => {
+      vi.resetAllMocks();
+      mockWindowOpen.mockClear();
+      setupCommonMocks();
       mockedApi.fetchConsentContent.mockResolvedValue(mockMinorConsentContent);
-      mockedApi.submitConsentEvent.mockResolvedValue(undefined);
-      mockedApi.submitGuardianInfo.mockResolvedValue(undefined);
     });
 
     it("shows age verification when is_minor is true", async () => {
@@ -653,11 +672,30 @@ describe("RedactoNoticeConsent", () => {
             screen.queryByText("Age Verification Required")
           ).not.toBeInTheDocument();
           expect(
-            screen.queryByText("Guardian Information Required")
+            screen.queryByText("Guardian Verification")
           ).not.toBeInTheDocument();
         },
         { timeout: 3000 }
       );
+
+      // Verify the adult can submit consent without guardian verification
+      const acceptButton = screen.getByText("Accept");
+      fireEvent.click(acceptButton);
+
+      await waitFor(
+        () => {
+          expect(mockedApi.submitConsentEvent).toHaveBeenCalledWith(
+            expect.objectContaining({
+              accessToken: "mock-token",
+              noticeUuid: "notice-123",
+              declined: false,
+              guardianVerificationReference: undefined,
+            })
+          );
+          expect(defaultProps.onAccept).toHaveBeenCalled();
+        },
+        { timeout: 3000 }
+      );
     });
 
     it("shows guardian form when user clicks No (under 18)", async () => {
@@ -678,7 +716,7 @@ describe("RedactoNoticeConsent", () => {
       await waitFor(
         () => {
           expect(
-            screen.getByText("Guardian Information Required")
+            screen.getByText("Guardian Verification")
           ).toBeInTheDocument();
           expect(
             screen.queryByText("Age Verification Required")
@@ -688,7 +726,7 @@ describe("RedactoNoticeConsent", () => {
       );
     });
 
-    it("completes full minor flow: age verification -> guardian form -> consent", async () => {
+    it("completes full minor flow: age verification -> guardian form -> verification screen", async () => {
       render(<RedactoNoticeConsent {...defaultProps} />);
       await waitFor(
         () => {
@@ -707,35 +745,33 @@ describe("RedactoNoticeConsent", () => {
       await waitFor(
         () => {
           expect(
-            screen.getByText("Guardian Information Required")
+            screen.getByText("Guardian Verification")
           ).toBeInTheDocument();
           expect(
-            screen.getByText(/As you are under the age of consent/i)
+            screen.getByText(/a legal guardian must verify/i)
           ).toBeInTheDocument();
         },
         { timeout: 3000 }
       );
 
       // Fill out guardian form
-      const nameInput = screen.getByLabelText(/Name of Guardian/i);
-      const contactInput = screen.getByLabelText(/Contact of Guardian/i);
-      const relationshipInput = screen.getByLabelText(
-        /Relationship to Guardian/i
-      );
-
+      const nameInput = screen.getByLabelText(/Guardian's Full Name/i);
+      const contactInput = screen.getByLabelText(/Guardian's Phone Number/i);
       fireEvent.change(nameInput, { target: { value: "John Doe" } });
       fireEvent.change(contactInput, { target: { value: "john@example.com" } });
-      fireEvent.change(relationshipInput, { target: { value: "Parent" } });
+      // Select "Father" from the custom dropdown
+      const relationshipDropdown = screen.getByRole("combobox", { name: /Relationship/i });
+      fireEvent.click(relationshipDropdown);
+      fireEvent.click(screen.getByRole("option", { name: "Father" }));
 
-      const nextButton = screen.getByText("Next");
+      const nextButton = screen.getByText("Verify via DigiLocker");
       fireEvent.click(nextButton);
 
-      // Should transition to consent form
+      // Should transition to verification screen (guardian form text should be gone)
       await waitFor(
         () => {
-          expect(screen.getByText("Privacy Notice")).toBeInTheDocument();
           expect(
-            screen.queryByText("Guardian Information Required")
+            screen.queryByText(/a legal guardian must verify/i)
           ).not.toBeInTheDocument();
         },
         { timeout: 3000 }
@@ -759,17 +795,17 @@ describe("RedactoNoticeConsent", () => {
 
       await waitFor(
         () => {
-          expect(screen.getByAltText("Redacto Logo")).toBeInTheDocument();
+          expect(screen.getByAltText("Logo")).toBeInTheDocument();
           expect(
-            screen.getByLabelText(/Name of Guardian/i)
+            screen.getByLabelText(/Guardian's Full Name/i)
           ).toBeInTheDocument();
           expect(
-            screen.getByLabelText(/Contact of Guardian/i)
+            screen.getByLabelText(/Guardian's Phone Number/i)
           ).toBeInTheDocument();
           expect(
-            screen.getByLabelText(/Relationship to Guardian/i)
+            screen.getByRole("combobox", { name: /Relationship/i })
           ).toBeInTheDocument();
-          expect(screen.getByText("Next")).toBeInTheDocument();
+          expect(screen.getByText("Verify via DigiLocker")).toBeInTheDocument();
           expect(screen.getByText("Cancel")).toBeInTheDocument();
         },
         { timeout: 3000 }
@@ -794,13 +830,13 @@ describe("RedactoNoticeConsent", () => {
       await waitFor(
         () => {
           expect(
-            screen.getByText("Guardian Information Required")
+            screen.getByText("Guardian Verification")
           ).toBeInTheDocument();
         },
         { timeout: 3000 }
       );
 
-      const nextButton = screen.getByText("Next");
+      const nextButton = screen.getByText("Verify via DigiLocker");
       fireEvent.click(nextButton);
 
       await waitFor(
@@ -819,7 +855,7 @@ describe("RedactoNoticeConsent", () => {
       );
     });
 
-    it("transitions to consent form after filling guardian form", async () => {
+    it("transitions to verification screen after filling guardian form", async () => {
       render(<RedactoNoticeConsent {...defaultProps} />);
       await waitFor(
         () => {
@@ -837,32 +873,30 @@ describe("RedactoNoticeConsent", () => {
       await waitFor(
         () => {
           expect(
-            screen.getByText("Guardian Information Required")
+            screen.getByText("Guardian Verification")
           ).toBeInTheDocument();
         },
         { timeout: 3000 }
       );
 
       // Fill out guardian form
-      const nameInput = screen.getByLabelText(/Name of Guardian/i);
-      const contactInput = screen.getByLabelText(/Contact of Guardian/i);
-      const relationshipInput = screen.getByLabelText(
-        /Relationship to Guardian/i
-      );
-
+      const nameInput = screen.getByLabelText(/Guardian's Full Name/i);
+      const contactInput = screen.getByLabelText(/Guardian's Phone Number/i);
       fireEvent.change(nameInput, { target: { value: "John Doe" } });
       fireEvent.change(contactInput, { target: { value: "john@example.com" } });
-      fireEvent.change(relationshipInput, { target: { value: "Parent" } });
+      // Select "Father" from the custom dropdown
+      const relationshipDropdown = screen.getByRole("combobox", { name: /Relationship/i });
+      fireEvent.click(relationshipDropdown);
+      fireEvent.click(screen.getByRole("option", { name: "Father" }));
 
-      const nextButton = screen.getByText("Next");
+      const nextButton = screen.getByText("Verify via DigiLocker");
       fireEvent.click(nextButton);
 
-      // Should transition to consent form
+      // Should transition to verification screen (guardian form fields should be gone)
       await waitFor(
         () => {
-          expect(screen.getByText("Privacy Notice")).toBeInTheDocument();
           expect(
-            screen.queryByText("Guardian Information Required")
+            screen.queryByLabelText(/Guardian's Full Name/i)
           ).not.toBeInTheDocument();
         },
         { timeout: 3000 }
@@ -887,24 +921,20 @@ describe("RedactoNoticeConsent", () => {
       await waitFor(
         () => {
           expect(
-            screen.getByText("Guardian Information Required")
+            screen.getByText("Guardian Verification")
           ).toBeInTheDocument();
         },
         { timeout: 3000 }
       );
 
-      // Fill fields with only whitespace
-      const nameInput = screen.getByLabelText(/Name of Guardian/i);
-      const contactInput = screen.getByLabelText(/Contact of Guardian/i);
-      const relationshipInput = screen.getByLabelText(
-        /Relationship to Guardian/i
-      );
+      // Fill fields with only whitespace (leave relationship empty — don't select anything)
+      const nameInput = screen.getByLabelText(/Guardian's Full Name/i);
+      const contactInput = screen.getByLabelText(/Guardian's Phone Number/i);
 
       fireEvent.change(nameInput, { target: { value: "   " } });
       fireEvent.change(contactInput, { target: { value: "\t\t" } });
-      fireEvent.change(relationshipInput, { target: { value: "\n\n" } });
 
-      const nextButton = screen.getByText("Next");
+      const nextButton = screen.getByText("Verify via DigiLocker");
       fireEvent.click(nextButton);
 
       // Should still show validation errors for whitespace-only input
@@ -942,14 +972,14 @@ describe("RedactoNoticeConsent", () => {
       await waitFor(
         () => {
           expect(
-            screen.getByText("Guardian Information Required")
+            screen.getByText("Guardian Verification")
           ).toBeInTheDocument();
         },
         { timeout: 3000 }
       );
 
       // Click next with empty fields to trigger errors
-      const nextButton = screen.getByText("Next");
+      const nextButton = screen.getByText("Verify via DigiLocker");
       fireEvent.click(nextButton);
 
       await waitFor(
@@ -962,7 +992,7 @@ describe("RedactoNoticeConsent", () => {
       );
 
       // Start typing in name field
-      const nameInput = screen.getByLabelText(/Name of Guardian/i);
+      const nameInput = screen.getByLabelText(/Guardian's Full Name/i);
       fireEvent.change(nameInput, { target: { value: "J" } });
 
       // Error should be cleared
@@ -994,7 +1024,7 @@ describe("RedactoNoticeConsent", () => {
       await waitFor(
         () => {
           expect(
-            screen.getByText("Guardian Information Required")
+            screen.getByText("Guardian Verification")
           ).toBeInTheDocument();
         },
         { timeout: 3000 }
@@ -1029,13 +1059,13 @@ describe("RedactoNoticeConsent", () => {
       await waitFor(
         () => {
           expect(
-            screen.getByText("Guardian Information Required")
+            screen.getByText("Guardian Verification")
           ).toBeInTheDocument();
         },
         { timeout: 3000 }
       );
 
-      const contactInput = screen.getByLabelText(/Contact of Guardian/i);
+      const contactInput = screen.getByLabelText(/Guardian's Phone Number/i);
 
       // Focus on contact field and type
       contactInput.focus();
@@ -1053,12 +1083,65 @@ describe("RedactoNoticeConsent", () => {
       expect(contactInput).toHaveValue("john@example.com");
 
       // Test other fields maintain focus too
-      const nameInput = screen.getByLabelText(/Name of Guardian/i);
+      const nameInput = screen.getByLabelText(/Guardian's Full Name/i);
       nameInput.focus();
       fireEvent.change(nameInput, { target: { value: "J" } });
 
       expect(nameInput).toHaveFocus();
       expect(nameInput).toHaveValue("J");
     });
+
+    it("calls initiateGuardianVerification with correct params", async () => {
+      render(<RedactoNoticeConsent {...defaultProps} />);
+      await waitFor(
+        () => {
+          expect(
+            screen.getByText("Age Verification Required")
+          ).toBeInTheDocument();
+        },
+        { timeout: 3000 }
+      );
+
+      // Navigate to guardian form
+      const noButton = screen.getByText("No, I am under 18");
+      fireEvent.click(noButton);
+
+      await waitFor(
+        () => {
+          expect(
+            screen.getByText("Guardian Verification")
+          ).toBeInTheDocument();
+        },
+        { timeout: 3000 }
+      );
+
+      // Fill out guardian form
+      const nameInput = screen.getByLabelText(/Guardian's Full Name/i);
+      const contactInput = screen.getByLabelText(/Guardian's Phone Number/i);
+      fireEvent.change(nameInput, { target: { value: "John Doe" } });
+      fireEvent.change(contactInput, { target: { value: "john@example.com" } });
+      // Select "Father" from the custom dropdown
+      const relationshipDropdown = screen.getByRole("combobox", { name: /Relationship/i });
+      fireEvent.click(relationshipDropdown);
+      fireEvent.click(screen.getByRole("option", { name: "Father" }));
+
+      const nextButton = screen.getByText("Verify via DigiLocker");
+      fireEvent.click(nextButton);
+
+      // Verify initiateGuardianVerification was called with correct params
+      await waitFor(
+        () => {
+          expect(api.initiateGuardianVerification).toHaveBeenCalledWith(
+            expect.objectContaining({
+              accessToken: "mock-token",
+              guardianName: "John Doe",
+              guardianContact: "john@example.com",
+              guardianRelationship: "Father",
+            })
+          );
+        },
+        { timeout: 3000 }
+      );
+    });
   });
 });