@redacto.io/consent-sdk-react 0.0.1

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@redacto.io/consent-sdk-react",
+  "version": "0.0.1",
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.mjs"
+    }
+  },
+  "keywords": [],
+  "author": "",
+  "license": "Apache-2.0",
+  "description": "",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "jwt-decode": "^4.0.0",
+    "react": "^19.1.0",
+    "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",
+    "@types/react-dom": "^19.1.3",
+    "@vitest/coverage-v8": "3.1.3",
+    "jsdom": "^26.1.0",
+    "tsup": "^8.4.0",
+    "typescript": "5.8.2",
+    "vitest": "^3.1.3"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest",
+    "test:watch": "vitest watch",
+    "release": "pnpm run build && changeset publish",
+    "coverage": "vitest run --coverage"
+  }
+}

package/src/RedactoNoticeConsent/RedactoNoticeConsent.test.tsx

@@ -0,0 +1,368 @@
+import {
+  render,
+  screen,
+  fireEvent,
+  waitFor,
+  act,
+} from "@testing-library/react";
+import { vi, expect, it, describe, beforeEach, afterEach } from "vitest";
+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(),
+}));
+
+// Mock the logo import correctly for ES modules
+vi.mock("./assets/redacto-logo.png", () => ({
+  default: "mocked-logo.png",
+}));
+
+describe("RedactoNoticeConsent", () => {
+  const mockedApi = vi.mocked(api, { partial: true });
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockedApi.fetchConsentContent.mockResolvedValue(mockConsentContent);
+    mockedApi.submitConsentEvent.mockResolvedValue(undefined);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("renders loading state initially", () => {
+    render(<RedactoNoticeConsent {...defaultProps} />);
+    expect(screen.getByText("Loading...")).toBeInTheDocument();
+  });
+
+  it("renders consent content after loading", async () => {
+    render(<RedactoNoticeConsent {...defaultProps} />);
+    await waitFor(
+      () => {
+        expect(screen.getByText("Your Privacy Matters")).toBeInTheDocument();
+        expect(
+          screen.getByText(/We care about your privacy/i)
+        ).toBeInTheDocument();
+        expect(
+          screen.getByRole("link", { name: /Privacy Policy/i })
+        ).toBeInTheDocument();
+        expect(
+          screen.getByRole("link", { name: /Vendors List/i })
+        ).toBeInTheDocument();
+        expect(screen.getByText("Manage What You Share")).toBeInTheDocument();
+        expect(screen.getByText("Marketing")).toBeInTheDocument();
+      },
+      { timeout: 3000 }
+    );
+  });
+
+  it("displays logo from content", async () => {
+    const { unmount } = render(<RedactoNoticeConsent {...defaultProps} />);
+    await waitFor(
+      () => {
+        const logo = screen.getByAltText("logo");
+        expect(logo).toHaveAttribute("src", "https://example.com/logo.png");
+      },
+      { timeout: 3000 }
+    );
+    unmount();
+  });
+
+  it("displays fallback logo when no content logo provided", async () => {
+    const noLogoContent: ConsentContent = {
+      ...mockConsentContent,
+      detail: {
+        ...mockConsentContent.detail,
+        active_config: {
+          ...mockConsentContent.detail.active_config,
+          logo_url: "",
+        },
+      },
+    };
+    mockedApi.fetchConsentContent.mockResolvedValueOnce(noLogoContent);
+    const { unmount } = render(<RedactoNoticeConsent {...defaultProps} />);
+    await waitFor(
+      () => {
+        const logo = screen.getByAltText("logo");
+        expect(logo).toHaveAttribute("src", "mocked-logo.png");
+      },
+      { timeout: 3000 }
+    );
+    unmount();
+  });
+
+  it("handles language selection", async () => {
+    render(<RedactoNoticeConsent {...defaultProps} />);
+    await waitFor(
+      () => {
+        expect(screen.getByRole("button", { name: "en" })).toBeInTheDocument();
+      },
+      { timeout: 3000 }
+    );
+
+    await act(async () => {
+      fireEvent.click(screen.getByRole("button", { name: "en" }));
+    });
+    await waitFor(
+      () => {
+        expect(screen.getByRole("option", { name: "es" })).toBeInTheDocument();
+      },
+      { timeout: 3000 }
+    );
+    await act(async () => {
+      fireEvent.click(screen.getByText("es"));
+    });
+
+    await waitFor(
+      () => {
+        expect(
+          screen.getByText(/Nos importa tu privacidad/i)
+        ).toBeInTheDocument();
+        expect(
+          screen.getByRole("link", { name: /Política de Privacidad/i })
+        ).toBeInTheDocument();
+        expect(
+          screen.getByText("Gestionar Consentimiento")
+        ).toBeInTheDocument();
+      },
+      { timeout: 3000 }
+    );
+  });
+
+  it("toggles purpose collapse", async () => {
+    render(<RedactoNoticeConsent {...defaultProps} />);
+    await waitFor(
+      () => {
+        expect(screen.getByText("Marketing")).toBeInTheDocument();
+      },
+      { timeout: 3000 }
+    );
+
+    const marketingHeading = screen.getByText("Marketing");
+    const collapseDiv = marketingHeading
+      .closest('div[style*="cursor: pointer"]')
+      ?.querySelector("svg");
+    if (!collapseDiv) throw new Error("Collapse div not found");
+
+    await act(async () => {
+      fireEvent.click(collapseDiv);
+    });
+    await waitFor(
+      () => {
+        expect(screen.getByText("Email")).toBeInTheDocument();
+        expect(screen.getByText("Phone")).toBeInTheDocument();
+      },
+      { timeout: 3000 }
+    );
+
+    await act(async () => {
+      fireEvent.click(collapseDiv);
+    });
+    await waitFor(
+      () => {
+        expect(screen.queryByText("Email")).not.toBeInTheDocument();
+      },
+      { timeout: 3000 }
+    );
+  });
+
+  it("handles purpose checkbox interaction", async () => {
+    render(<RedactoNoticeConsent {...defaultProps} />);
+    await waitFor(
+      () => {
+        expect(screen.getByText("Marketing")).toBeInTheDocument();
+      },
+      { timeout: 3000 }
+    );
+
+    const marketingHeading = screen.getByText("Marketing");
+    const purposeCheckbox = marketingHeading
+      .closest('div[style*="justify-content: space-between"]')
+      ?.querySelector('input[type="checkbox"]');
+    if (!purposeCheckbox) throw new Error("Purpose checkbox not found");
+
+    expect(purposeCheckbox).not.toBeChecked();
+    await act(async () => {
+      fireEvent.click(purposeCheckbox);
+    });
+    expect(purposeCheckbox).toBeChecked();
+
+    await act(async () => {
+      fireEvent.click(purposeCheckbox);
+    });
+    expect(purposeCheckbox).not.toBeChecked();
+  });
+
+  it("disables required data element checkboxes", async () => {
+    render(<RedactoNoticeConsent {...defaultProps} />);
+    await waitFor(
+      () => {
+        expect(screen.getByText("Marketing")).toBeInTheDocument();
+      },
+      { timeout: 3000 }
+    );
+
+    const marketingHeading = screen.getByText("Marketing");
+    const collapseDiv = marketingHeading
+      .closest('div[style*="cursor: pointer"]')
+      ?.querySelector("svg");
+    if (!collapseDiv) throw new Error("Collapse div not found");
+    await act(async () => {
+      fireEvent.click(collapseDiv);
+    });
+
+    await waitFor(
+      () => {
+        const emailText = screen.getByText("Email");
+        const emailCheckbox = emailText
+          .closest('div[style*="align-items: center"]')
+          ?.querySelector('input[type="checkbox"]');
+        if (!emailCheckbox) throw new Error("Email checkbox not found");
+
+        const phoneText = screen.getByText(/Phone/);
+        const phoneCheckbox = phoneText
+          .closest('div[style*="align-items: center"]')
+          ?.querySelector('input[type="checkbox"]');
+        if (!phoneCheckbox) throw new Error("Phone checkbox not found");
+
+        expect(phoneCheckbox).toBeDisabled();
+        expect(phoneCheckbox).toBeChecked();
+
+        expect(emailCheckbox).not.toBeDisabled();
+        fireEvent.click(emailCheckbox);
+        expect(emailCheckbox).toBeChecked();
+      },
+      { timeout: 3000 }
+    );
+  });
+
+  it("calls submitConsentEvent on accept", async () => {
+    render(<RedactoNoticeConsent {...defaultProps} />);
+    await waitFor(
+      () => {
+        expect(screen.getByText("Accept")).toBeInTheDocument();
+      },
+      { timeout: 3000 }
+    );
+
+    await act(async () => {
+      fireEvent.click(screen.getByText("Accept"));
+    });
+    await waitFor(
+      () => {
+        expect(api.submitConsentEvent).toHaveBeenCalledWith({
+          accessToken: "mock-token",
+          noticeUuid: "notice-123",
+          purposes: [
+            {
+              uuid: "purpose-1",
+              name: "Marketing",
+              description: "We use data for marketing purposes.",
+              industries: "Marketing",
+              data_elements: [
+                {
+                  uuid: "element-1",
+                  name: "Email",
+                  required: false,
+                  description: null,
+                  industries: null,
+                  enabled: true,
+                  selected: false,
+                },
+                {
+                  uuid: "element-2",
+                  name: "Phone",
+                  required: true,
+                  description: null,
+                  industries: null,
+                  enabled: true,
+                  selected: true,
+                },
+              ],
+              selected: false,
+            },
+          ],
+          declined: false,
+        });
+        expect(defaultProps.onAccept).toHaveBeenCalled();
+      },
+      { timeout: 3000 }
+    );
+  });
+
+  it("calls onDecline on decline", async () => {
+    render(<RedactoNoticeConsent {...defaultProps} />);
+    await waitFor(
+      () => {
+        expect(screen.getByText("Decline")).toBeInTheDocument();
+      },
+      { timeout: 3000 }
+    );
+
+    await act(async () => {
+      fireEvent.click(screen.getByText("Decline"));
+    });
+    await waitFor(
+      () => {
+        expect(defaultProps.onDecline).toHaveBeenCalled();
+      },
+      { timeout: 3000 }
+    );
+  });
+
+  it("handles 409 conflict error (already consented)", async () => {
+    mockedApi.fetchConsentContent.mockRejectedValueOnce({ status: 409 });
+    await act(async () => {
+      render(<RedactoNoticeConsent {...defaultProps} />);
+    });
+    await waitFor(
+      () => {
+        expect(defaultProps.onAccept).toHaveBeenCalled();
+        expect(
+          screen.queryByText("Your Privacy Matters")
+        ).not.toBeInTheDocument();
+      },
+      { timeout: 3000 }
+    );
+  });
+
+  it("handles other errors", async () => {
+    mockedApi.fetchConsentContent.mockRejectedValueOnce(
+      new Error("Network Error")
+    );
+    await act(async () => {
+      render(<RedactoNoticeConsent {...defaultProps} />);
+    });
+    await waitFor(
+      () => {
+        expect(defaultProps.onError).toHaveBeenCalledWith(expect.any(Error));
+      },
+      { timeout: 3000 }
+    );
+  });
+
+  it("applies custom styles from settings", async () => {
+    render(<RedactoNoticeConsent {...defaultProps} />);
+    await waitFor(
+      () => {
+        const modal = screen.getByRole("dialog");
+        expect(modal).toHaveStyle({
+          backgroundColor: "#ffffff",
+          borderRadius: "8px",
+        });
+
+        const acceptButton = screen.getByText("Accept");
+        expect(acceptButton).toHaveStyle({
+          backgroundColor: "#4f87ff",
+          color: "#ffffff",
+        });
+      },
+      { timeout: 3000 }
+    );
+  });
+});