@redacto.io/consent-sdk-react 0.0.2 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redacto.io/consent-sdk-react",
-  "version": "0.0.2",
+  "version": "1.0.0",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -24,7 +24,6 @@
     "react-dom": "^19.1.0"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.29.4",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@types/react": "^19.1.3",
@@ -40,7 +39,7 @@
     "dev": "tsup --watch",
     "test": "vitest",
     "test:watch": "vitest watch",
-    "release": "pnpm run build && changeset publish",
+    "release": "pnpm run build",
     "coverage": "vitest run --coverage"
   }
 }

package/src/RedactoNoticeConsent/RedactoNoticeConsent.test.tsx

@@ -1,21 +1,32 @@
+import "@testing-library/jest-dom";
 import {
+  act,
+  fireEvent,
   render,
   screen,
-  fireEvent,
   waitFor,
-  act,
 } from "@testing-library/react";
-import { vi, expect, it, describe, beforeEach, afterEach } from "vitest";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { defaultProps, mockConsentContent, mockMinorConsentContent, mockReconsentContent } from "../../tests/mocks";
 import { RedactoNoticeConsent } from "./RedactoNoticeConsent";
 import * as api from "./api";
 import type { ConsentContent } from "./api/types";
-import { defaultProps, mockConsentContent } from "../../tests/mocks";
-import "@testing-library/jest-dom";
 
 // Mock the API functions
 vi.mock("./api", () => ({
   fetchConsentContent: vi.fn(),
   submitConsentEvent: vi.fn(),
+  submitGuardianInfo: vi.fn(),
+  clearApiCache: vi.fn(),
+}));
+
+// Mock jwt-decode
+vi.mock("jwt-decode", () => ({
+  jwtDecode: vi.fn(() => ({
+    organisation_uuid: "org-123",
+    workspace_uuid: "workspace-123",
+    user_uuid: "user-123",
+  })),
 }));
 
 // Mock the logo import correctly for ES modules
@@ -23,12 +34,19 @@ vi.mock("./assets/redacto-logo.png", () => ({
   default: "mocked-logo.png",
 }));
 
+// Mock injectCheckboxStyles to avoid DOM manipulation in tests
+vi.mock("./injectStyles", () => ({
+  injectCheckboxStyles: vi.fn(),
+}));
+
 describe("RedactoNoticeConsent", () => {
   const mockedApi = vi.mocked(api, { partial: true });
   beforeEach(() => {
     vi.clearAllMocks();
-    mockedApi.fetchConsentContent.mockResolvedValue(mockConsentContent);
-    mockedApi.submitConsentEvent.mockResolvedValue(undefined);
+    // 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));
   });
 
   afterEach(() => {
@@ -36,12 +54,16 @@ describe("RedactoNoticeConsent", () => {
   });
 
   it("renders loading state initially", () => {
-    render(<RedactoNoticeConsent {...defaultProps} />);
+    act(() => {
+      render(<RedactoNoticeConsent {...defaultProps} />);
+    });
     expect(screen.getByText("Loading...")).toBeInTheDocument();
   });
 
   it("renders consent content after loading", async () => {
-    render(<RedactoNoticeConsent {...defaultProps} />);
+    act(() => {
+      render(<RedactoNoticeConsent {...defaultProps} />);
+    });
     await waitFor(
       () => {
         expect(screen.getByText("Your Privacy Matters")).toBeInTheDocument();
@@ -51,9 +73,7 @@ describe("RedactoNoticeConsent", () => {
         expect(
           screen.getByRole("link", { name: /Privacy Policy/i })
         ).toBeInTheDocument();
-        expect(
-          screen.getByRole("link", { name: /Vendors List/i })
-        ).toBeInTheDocument();
+        expect(screen.getByText("[Vendors List]")).toBeInTheDocument();
         expect(screen.getByText("Manage What You Share")).toBeInTheDocument();
         expect(screen.getByText("Marketing")).toBeInTheDocument();
       },
@@ -65,7 +85,7 @@ describe("RedactoNoticeConsent", () => {
     const { unmount } = render(<RedactoNoticeConsent {...defaultProps} />);
     await waitFor(
       () => {
-        const logo = screen.getByAltText("logo");
+        const logo = screen.getByAltText("Redacto Logo");
         expect(logo).toHaveAttribute("src", "https://example.com/logo.png");
       },
       { timeout: 3000 }
@@ -88,7 +108,7 @@ describe("RedactoNoticeConsent", () => {
     const { unmount } = render(<RedactoNoticeConsent {...defaultProps} />);
     await waitFor(
       () => {
-        const logo = screen.getByAltText("logo");
+        const logo = screen.getByAltText("Redacto Logo");
         expect(logo).toHaveAttribute("src", "mocked-logo.png");
       },
       { timeout: 3000 }
@@ -123,9 +143,7 @@ describe("RedactoNoticeConsent", () => {
         expect(
           screen.getByText(/Nos importa tu privacidad/i)
         ).toBeInTheDocument();
-        expect(
-          screen.getByRole("link", { name: /Política de Privacidad/i })
-        ).toBeInTheDocument();
+        expect(screen.getByText("[Política de Privacidad]")).toBeInTheDocument();
         expect(
           screen.getByText("Gestionar Consentimiento")
         ).toBeInTheDocument();
@@ -257,6 +275,7 @@ describe("RedactoNoticeConsent", () => {
       () => {
         expect(api.submitConsentEvent).toHaveBeenCalledWith({
           accessToken: "mock-token",
+          baseUrl: undefined,
           noticeUuid: "notice-123",
           purposes: [
             {
@@ -288,6 +307,8 @@ describe("RedactoNoticeConsent", () => {
             },
           ],
           declined: false,
+          meta_data: undefined,
+          signal: expect.any(AbortSignal),
         });
         expect(defaultProps.onAccept).toHaveBeenCalled();
       },
@@ -365,4 +386,470 @@ describe("RedactoNoticeConsent", () => {
       { timeout: 3000 }
     );
   });
+
+  describe("reconsent functionality", () => {
+    beforeEach(() => {
+      mockedApi.fetchConsentContent.mockResolvedValue(mockReconsentContent);
+      mockedApi.submitConsentEvent.mockResolvedValue(undefined);
+    });
+
+    it("shows reconsent UI with visual indicators for different consent states", async () => {
+      render(<RedactoNoticeConsent {...defaultProps} />);
+      await waitFor(
+        () => {
+          expect(screen.getByText("Marketing")).toBeInTheDocument();
+          expect(screen.getByText("Analytics")).toBeInTheDocument();
+        },
+        { timeout: 3000 }
+      );
+
+      // Check that both purposes are displayed in the reconsent UI
+      expect(screen.getByText("Marketing")).toBeInTheDocument();
+      expect(screen.getByText("Analytics")).toBeInTheDocument();
+    });
+
+    it("allows reconsent UI to render without errors", async () => {
+      render(<RedactoNoticeConsent {...defaultProps} />);
+      await waitFor(
+        () => {
+          expect(screen.getByText("Marketing")).toBeInTheDocument();
+        },
+        { timeout: 3000 }
+      );
+
+      // Verify the reconsent UI renders successfully with visual indicators
+      expect(screen.getByText("Analytics")).toBeInTheDocument();
+      // Verify both purposes are present in the reconsent layout
+      const purposes = screen.getAllByText(/Marketing|Analytics/);
+      expect(purposes).toHaveLength(2);
+    });
+
+    it("passes check_mode parameter to API", async () => {
+      render(<RedactoNoticeConsent {...defaultProps} checkMode="required" />);
+      await waitFor(
+        () => {
+          expect(api.fetchConsentContent).toHaveBeenCalledWith({
+            noticeId: "notice-123",
+            accessToken: "mock-token",
+            refreshToken: "mock-refresh-token",
+            baseUrl: undefined,
+            language: "en",
+            specific_uuid: undefined,
+            check_mode: "required",
+            signal: expect.any(AbortSignal),
+          });
+        },
+        { timeout: 3000 }
+      );
+    });
+
+    it("defaults to check_mode 'all' when not specified", async () => {
+      render(<RedactoNoticeConsent {...defaultProps} />);
+      await waitFor(
+        () => {
+          expect(api.fetchConsentContent).toHaveBeenCalledWith({
+            noticeId: "notice-123",
+            accessToken: "mock-token",
+            refreshToken: "mock-refresh-token",
+            baseUrl: undefined,
+            language: "en",
+            specific_uuid: undefined,
+            check_mode: "all",
+            signal: expect.any(AbortSignal),
+          });
+        },
+        { timeout: 3000 }
+      );
+    });
+  });
+
+  describe("age verification and minor consent functionality", () => {
+    beforeEach(() => {
+      mockedApi.fetchConsentContent.mockResolvedValue(mockMinorConsentContent);
+      mockedApi.submitConsentEvent.mockResolvedValue(undefined);
+      mockedApi.submitGuardianInfo.mockResolvedValue(undefined);
+    });
+
+    it("shows age verification when is_minor is true", async () => {
+      render(<RedactoNoticeConsent {...defaultProps} />);
+      await waitFor(
+        () => {
+          expect(screen.getByText("Age Verification Required")).toBeInTheDocument();
+          expect(
+            screen.getByText(/Are you 18 years of age or older/)
+          ).toBeInTheDocument();
+        },
+        { timeout: 3000 }
+      );
+    });
+
+    it("shows age verification fields", async () => {
+      render(<RedactoNoticeConsent {...defaultProps} />);
+      await waitFor(
+        () => {
+          expect(screen.getByText("Age Verification Required")).toBeInTheDocument();
+          expect(screen.getByText("Yes, I am 18 or older")).toBeInTheDocument();
+          expect(screen.getByText("No, I am under 18")).toBeInTheDocument();
+          expect(screen.getByAltText("Redacto Logo")).toBeInTheDocument();
+        },
+        { timeout: 3000 }
+      );
+    });
+
+    it("proceeds to consent form when user clicks Yes (18+)", async () => {
+      render(<RedactoNoticeConsent {...defaultProps} />);
+      await waitFor(
+        () => {
+          expect(screen.getByText("Age Verification Required")).toBeInTheDocument();
+        },
+        { timeout: 3000 }
+      );
+
+      const yesButton = screen.getByText("Yes, I am 18 or older");
+      fireEvent.click(yesButton);
+
+      // Should transition directly to consent form
+      await waitFor(
+        () => {
+          expect(screen.getByText("Your Privacy Matters")).toBeInTheDocument();
+          expect(screen.queryByText("Age Verification Required")).not.toBeInTheDocument();
+          expect(screen.queryByText("Guardian Information Required")).not.toBeInTheDocument();
+        },
+        { timeout: 3000 }
+      );
+    });
+
+    it("shows guardian form when user clicks No (under 18)", async () => {
+      render(<RedactoNoticeConsent {...defaultProps} />);
+      await waitFor(
+        () => {
+          expect(screen.getByText("Age Verification Required")).toBeInTheDocument();
+        },
+        { timeout: 3000 }
+      );
+
+      const noButton = screen.getByText("No, I am under 18");
+      fireEvent.click(noButton);
+
+      // Should transition to guardian form
+      await waitFor(
+        () => {
+          expect(screen.getByText("Guardian Information Required")).toBeInTheDocument();
+          expect(screen.queryByText("Age Verification Required")).not.toBeInTheDocument();
+        },
+        { timeout: 3000 }
+      );
+    });
+
+    it("completes full minor flow: age verification -> guardian form -> consent", async () => {
+      render(<RedactoNoticeConsent {...defaultProps} />);
+      await waitFor(
+        () => {
+          expect(screen.getByText("Age Verification Required")).toBeInTheDocument();
+        },
+        { timeout: 3000 }
+      );
+
+      // Click No to proceed to guardian form
+      const noButton = screen.getByText("No, I am under 18");
+      fireEvent.click(noButton);
+
+      // Should show guardian form
+      await waitFor(
+        () => {
+          expect(screen.getByText("Guardian Information Required")).toBeInTheDocument();
+          expect(
+            screen.getByText(/As you are under the age of consent/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);
+
+      fireEvent.change(nameInput, { target: { value: "John Doe" } });
+      fireEvent.change(contactInput, { target: { value: "john@example.com" } });
+      fireEvent.change(relationshipInput, { target: { value: "Parent" } });
+
+      const nextButton = screen.getByText("Next");
+      fireEvent.click(nextButton);
+
+      // Should transition to consent form
+      await waitFor(
+        () => {
+          expect(screen.getByText("Your Privacy Matters")).toBeInTheDocument();
+          expect(screen.queryByText("Guardian Information Required")).not.toBeInTheDocument();
+        },
+        { timeout: 3000 }
+      );
+    });
+
+    it("displays guardian form fields after age verification", 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.getByAltText("Redacto Logo")).toBeInTheDocument();
+          expect(screen.getByLabelText(/Name of Guardian/i)).toBeInTheDocument();
+          expect(screen.getByLabelText(/Contact of Guardian/i)).toBeInTheDocument();
+          expect(screen.getByLabelText(/Relationship to Guardian/i)).toBeInTheDocument();
+          expect(screen.getByText("Next")).toBeInTheDocument();
+          expect(screen.getByText("Cancel")).toBeInTheDocument();
+        },
+        { timeout: 3000 }
+      );
+    });
+
+    it("validates guardian form fields", 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 Information Required")).toBeInTheDocument();
+        },
+        { timeout: 3000 }
+      );
+
+      const nextButton = screen.getByText("Next");
+      fireEvent.click(nextButton);
+
+      await waitFor(
+        () => {
+          expect(screen.getByText("Guardian name is required")).toBeInTheDocument();
+          expect(screen.getByText("Guardian contact is required")).toBeInTheDocument();
+          expect(screen.getByText("Relationship to guardian is required")).toBeInTheDocument();
+        },
+        { timeout: 3000 }
+      );
+    });
+
+    it("transitions to consent form after filling guardian form", 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 Information Required")).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);
+
+      fireEvent.change(nameInput, { target: { value: "John Doe" } });
+      fireEvent.change(contactInput, { target: { value: "john@example.com" } });
+      fireEvent.change(relationshipInput, { target: { value: "Parent" } });
+
+      const nextButton = screen.getByText("Next");
+      fireEvent.click(nextButton);
+
+      // Should transition to consent form
+      await waitFor(
+        () => {
+          expect(screen.getByText("Your Privacy Matters")).toBeInTheDocument();
+          expect(screen.queryByText("Guardian Information Required")).not.toBeInTheDocument();
+        },
+        { timeout: 3000 }
+      );
+    });
+
+    it("validates whitespace-only input as empty", 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 Information Required")).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);
+
+      fireEvent.change(nameInput, { target: { value: "   " } });
+      fireEvent.change(contactInput, { target: { value: "\t\t" } });
+      fireEvent.change(relationshipInput, { target: { value: "\n\n" } });
+
+      const nextButton = screen.getByText("Next");
+      fireEvent.click(nextButton);
+
+      // Should still show validation errors for whitespace-only input
+      await waitFor(
+        () => {
+          expect(screen.getByText("Guardian name is required")).toBeInTheDocument();
+          expect(screen.getByText("Guardian contact is required")).toBeInTheDocument();
+          expect(screen.getByText("Relationship to guardian is required")).toBeInTheDocument();
+        },
+        { timeout: 3000 }
+      );
+    });
+
+    it("clears validation errors when user starts typing", 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 Information Required")).toBeInTheDocument();
+        },
+        { timeout: 3000 }
+      );
+
+      // Click next with empty fields to trigger errors
+      const nextButton = screen.getByText("Next");
+      fireEvent.click(nextButton);
+
+      await waitFor(
+        () => {
+          expect(screen.getByText("Guardian name is required")).toBeInTheDocument();
+        },
+        { timeout: 3000 }
+      );
+
+      // Start typing in name field
+      const nameInput = screen.getByLabelText(/Name of Guardian/i);
+      fireEvent.change(nameInput, { target: { value: "J" } });
+
+      // Error should be cleared
+      await waitFor(
+        () => {
+          expect(screen.queryByText("Guardian name is required")).not.toBeInTheDocument();
+        },
+        { timeout: 3000 }
+      );
+    });
+
+    it("calls onDecline when cancel is clicked in guardian form", 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 Information Required")).toBeInTheDocument();
+        },
+        { timeout: 3000 }
+      );
+
+      const cancelButton = screen.getByText("Cancel");
+      fireEvent.click(cancelButton);
+
+      await waitFor(
+        () => {
+          expect(defaultProps.onDecline).toHaveBeenCalled();
+        },
+        { timeout: 3000 }
+      );
+    });
+
+    it("maintains focus when typing in guardian form fields", 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 Information Required")).toBeInTheDocument();
+        },
+        { timeout: 3000 }
+      );
+
+      const contactInput = screen.getByLabelText(/Contact of Guardian/i);
+
+      // Focus on contact field and type
+      contactInput.focus();
+      fireEvent.change(contactInput, { target: { value: "j" } });
+
+      // Verify the input still has focus and value
+      expect(contactInput).toHaveFocus();
+      expect(contactInput).toHaveValue("j");
+
+      // Continue typing
+      fireEvent.change(contactInput, { target: { value: "john@example.com" } });
+
+      // Verify the input still has focus and updated value
+      expect(contactInput).toHaveFocus();
+      expect(contactInput).toHaveValue("john@example.com");
+
+      // Test other fields maintain focus too
+      const nameInput = screen.getByLabelText(/Name of Guardian/i);
+      nameInput.focus();
+      fireEvent.change(nameInput, { target: { value: "J" } });
+
+      expect(nameInput).toHaveFocus();
+      expect(nameInput).toHaveValue("J");
+    });
+  });
 });