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

package/src/RedactoNoticeConsentInline/styles.ts

@@ -0,0 +1,397 @@
+export const styles = {
+  overlay: {
+    position: "fixed",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 999,
+    animation: "overlayFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1)",
+    pointerEvents: "all",
+    margin: 0,
+    padding: 0,
+    boxSizing: "border-box",
+  },
+
+  container: {
+    position: "relative",
+    width: "100%",
+    maxWidth: "700px",
+    borderRadius: "8px",
+    backgroundColor: "#ffffff",
+    boxShadow: "0px 1px 3px rgba(0, 0, 0, 0.1)",
+    border: "1px solid #e5e7eb",
+    display: "flex",
+    flexDirection: "column",
+    margin: 0,
+    padding: 0,
+    boxSizing: "border-box",
+    textAlign: "left",
+    fontFamily: "inherit",
+  },
+
+  content: {
+    margin: "22px",
+    display: "flex",
+    flexDirection: "column",
+    flexGrow: 1,
+    overflow: "hidden",
+    minHeight: 0,
+    boxSizing: "border-box",
+    textAlign: "left",
+  },
+
+  topSection: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingBottom: "15px",
+    borderBottom: "1px solid #e5e7eb",
+    boxShadow: "0 1px 2px rgba(0, 0, 0, 0.03)",
+    backgroundColor: "#ffffff",
+    margin: 0,
+    boxSizing: "border-box",
+    textAlign: "left",
+  },
+
+  topLeft: {
+    display: "flex",
+    alignItems: "center",
+    gap: "10px",
+    margin: 0,
+    padding: 0,
+    boxSizing: "border-box",
+  },
+
+  logo: {
+    height: "32px",
+    width: "auto",
+    objectFit: "contain",
+    margin: 0,
+    padding: 0,
+    display: "block",
+  },
+
+  title: {
+    fontSize: "18px",
+    fontWeight: 700,
+    lineHeight: "150%",
+    letterSpacing: "0.2px",
+    verticalAlign: "middle",
+    color: "#101828",
+    margin: 0,
+    padding: 0,
+    textAlign: "left",
+  },
+
+  topRight: {
+    borderRadius: "8px",
+    padding: "3px 9px",
+    border: "1px solid #d0d5dd",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontWeight: 400,
+    fontSize: "12px",
+    lineHeight: "150%",
+    letterSpacing: "0.2px",
+    verticalAlign: "middle",
+    color: "#344054",
+    gap: "5px",
+    margin: 0,
+    boxSizing: "border-box",
+    textAlign: "left",
+    cursor: "pointer",
+    backgroundColor: "#ffffff",
+  },
+
+  middleSection: {
+    margin: "20px 0px",
+    display: "flex",
+    flexDirection: "column",
+    gap: "12px",
+    flexGrow: 1,
+    overflowY: "auto",
+    minHeight: 0,
+    paddingRight: "15px",
+    boxSizing: "border-box",
+    textAlign: "left",
+  },
+
+  privacyText: {
+    fontSize: "16px",
+    fontWeight: 400,
+    lineHeight: "150%",
+    letterSpacing: "0.2px",
+    color: "#344054",
+    margin: 0,
+    padding: 0,
+    textAlign: "left",
+  },
+
+  link: {
+    color: "#4f87ff",
+    textDecoration: "none",
+    margin: 0,
+    padding: 0,
+    boxSizing: "border-box",
+  },
+
+  subTitle: {
+    fontWeight: 600,
+    fontSize: "16px",
+    lineHeight: "150%",
+    letterSpacing: "0.2px",
+    color: "#101828",
+    margin: 0,
+    padding: 0,
+    textAlign: "left",
+  },
+
+  optionsContainer: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "14px",
+    margin: 0,
+    padding: 0,
+    boxSizing: "border-box",
+  },
+
+  optionItem: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    margin: 0,
+    padding: 0,
+    boxSizing: "border-box",
+  },
+
+  optionLeft: {
+    display: "flex",
+    gap: "12px",
+    alignItems: "center",
+    cursor: "pointer",
+    margin: 0,
+    padding: 0,
+    boxSizing: "border-box",
+  },
+
+  optionTextContainer: {
+    display: "flex",
+    flexDirection: "column",
+    margin: 0,
+    padding: 0,
+    boxSizing: "border-box",
+  },
+
+  optionTitle: {
+    fontWeight: 500,
+    fontSize: "16px",
+    lineHeight: "150%",
+    letterSpacing: "0.2px",
+    color: "#101828",
+    margin: 0,
+    padding: 0,
+    textAlign: "left",
+  },
+
+  optionDescription: {
+    fontWeight: 400,
+    fontSize: "12px",
+    lineHeight: "150%",
+    letterSpacing: "0.2px",
+    color: "#475467",
+    verticalAlign: "middle",
+    margin: 0,
+    padding: 0,
+    textAlign: "left",
+  },
+
+  checkboxLarge: {
+    height: "20px",
+    width: "20px",
+    padding: "4px",
+    borderRadius: "5px",
+    border: "2px solid #d0d5dd",
+    margin: 0,
+    boxSizing: "border-box",
+    appearance: "none",
+    WebkitAppearance: "none",
+    MozAppearance: "none",
+    cursor: "pointer",
+    position: "relative",
+    backgroundColor: "transparent",
+  },
+
+  dataElementsContainer: {
+    marginLeft: "27px",
+    display: "flex",
+    flexDirection: "column",
+    margin: 0,
+    padding: 0,
+    boxSizing: "border-box",
+    paddingLeft: "22px",
+  },
+
+  dataElementItem: {
+    display: "flex",
+    alignItems: "center",
+    gap: "10px",
+    justifyContent: "space-between",
+    margin: 0,
+    padding: 0,
+    boxSizing: "border-box",
+    minHeight: "24px",
+  },
+
+  dataElementText: {
+    fontWeight: 400,
+    fontSize: "14px",
+    lineHeight: "150%",
+    letterSpacing: "0.2px",
+    color: "#344054",
+    margin: 0,
+    padding: 0,
+    textAlign: "left",
+  },
+
+  checkboxSmall: {
+    height: "16px",
+    width: "16px",
+    padding: "4px",
+    borderRadius: "5px",
+    border: "2px solid #d0d5dd",
+    margin: 0,
+    boxSizing: "border-box",
+    appearance: "none",
+    WebkitAppearance: "none",
+    MozAppearance: "none",
+    cursor: "pointer",
+    position: "relative",
+    backgroundColor: "transparent",
+  },
+
+  bottomSection: {
+    display: "flex",
+    justifyContent: "space-between",
+    gap: "29px",
+    paddingTop: "15px",
+    borderTop: "1px solid #e5e7eb",
+    boxShadow: "0 -1px 2px rgba(0, 0, 0, 0.03)",
+    backgroundColor: "#ffffff",
+    margin: 0,
+    boxSizing: "border-box",
+  },
+
+  button: {
+    width: "100%",
+    borderRadius: "8px",
+    padding: "9px 45px",
+    fontWeight: 400,
+    fontSize: "16px",
+    lineHeight: "150%",
+    letterSpacing: "0.2px",
+    cursor: "pointer",
+    margin: 0,
+    boxSizing: "border-box",
+    textAlign: "center",
+  },
+
+  acceptButton: {
+    backgroundColor: "#4f87ff",
+    border: "none",
+    color: "#ffffff",
+  },
+
+  cancelButton: {
+    border: "1px solid #d0d5dd",
+    backgroundColor: "#ffffff",
+    color: "#000000",
+  },
+
+  languageSelectorContainer: {
+    position: "relative",
+    margin: 0,
+    padding: 0,
+    boxSizing: "border-box",
+  },
+
+  languageDropdown: {
+    position: "absolute",
+    top: "100%",
+    right: 0,
+    backgroundColor: "#ffffff",
+    border: "1px solid #d0d5dd",
+    borderRadius: "4px",
+    boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.1)",
+    zIndex: 10,
+    width: "max-content",
+    marginTop: "4px",
+    padding: 0,
+    boxSizing: "border-box",
+    textAlign: "left",
+  },
+
+  languageItem: {
+    padding: "8px 12px",
+    cursor: "pointer",
+    fontSize: "12px",
+    color: "#344054",
+    backgroundColor: "#ffffff",
+    borderBottom: "1px solid #e5e7eb",
+    margin: 0,
+    boxSizing: "border-box",
+    textAlign: "left",
+  },
+
+  selectedLanguageItem: {
+    backgroundColor: "#f3f4f6",
+    fontWeight: 600,
+  },
+
+  loadingContainer: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: "2rem",
+    minHeight: "200px",
+    margin: 0,
+    boxSizing: "border-box",
+  },
+
+  loadingSpinner: {
+    width: "40px",
+    height: "40px",
+    border: "4px solid #f3f3f3",
+    borderTop: "4px solid #3498db",
+    borderRadius: "50%",
+    animation: "spin 1s linear infinite",
+    marginBottom: "1rem",
+    boxSizing: "border-box",
+  },
+} as const;
+
+// Keyframes
+export const keyframes = {
+  overlayFadeIn: {
+    from: {
+      opacity: 0,
+    },
+    to: {
+      opacity: 1,
+    },
+  },
+  spin: {
+    "0%": {
+      transform: "rotate(0deg)",
+    },
+    "100%": {
+      transform: "rotate(360deg)",
+    },
+  },
+} as const;

package/src/RedactoNoticeConsentInline/types.ts

@@ -0,0 +1,45 @@
+import type { Settings } from "./api/types";
+
+export type Props = Readonly<{
+  org_uuid: string;
+  workspace_uuid: string;
+  notice_uuid: string;
+  accessToken?: string;
+  refreshToken?: string;
+  baseUrl?: string;
+  settings?: Partial<Settings>;
+  language?: string;
+  onAccept?: () => void;
+  onDecline?: () => void;
+  onError?: (error: Error) => void;
+  onValidationChange?: (isValid: boolean) => void;
+  applicationId?: string;
+}>;
+
+export type PurposeTranslations = {
+  [purposeId: string]: string;
+};
+
+export type DataElementTranslations = {
+  [elementId: string]: string;
+};
+
+export type TranslationObject = {
+  notice_text?: string;
+  additional_text?: string;
+  confirm_button_text?: string;
+  decline_button_text?: string;
+  purposes?: PurposeTranslations;
+  data_elements?: DataElementTranslations;
+  purpose_section_heading?: string;
+  privacy_policy_prefix_text?: string;
+  vendor_list_prefix_text?: string;
+  privacy_policy_anchor_text?: string;
+  vendors_list_anchor_text?: string;
+  [key: string]:
+    | string
+    | PurposeTranslations
+    | DataElementTranslations
+    | Record<string, string>
+    | undefined;
+};

package/src/RedactoNoticeConsentInline/useMediaQuery.ts

@@ -0,0 +1,36 @@
+import { useState, useEffect } from "react";
+
+export const useMediaQuery = (query: string): boolean => {
+  const getMatches = () =>
+    typeof window !== "undefined" ? window.matchMedia(query).matches : false;
+  const [matches, setMatches] = useState<boolean>(getMatches);
+
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const media = window.matchMedia(query);
+
+    // Create event listener
+    const listener = (e: MediaQueryListEvent) => {
+      setMatches(e.matches);
+    };
+
+    // Add listener (fallback for legacy browsers)
+    if (media.addEventListener) {
+      media.addEventListener("change", listener);
+    } else {
+      // @ts-ignore – deprecated fallback
+      media.addListener(listener);
+    }
+
+    // Clean up
+    return () => {
+      if (media.removeEventListener) {
+        media.removeEventListener("change", listener);
+      } else {
+        media.removeListener(listener);
+      }
+    };
+  }, [query]);
+
+  return matches;
+};

package/src/index.ts

@@ -1 +1,2 @@
 export { default as RedactoNoticeConsent } from "./RedactoNoticeConsent";
+export { default as RedactoNoticeConsentInline } from "./RedactoNoticeConsentInline";

package/tests/mocks.ts

@@ -33,6 +33,7 @@ export const mockConsentContent: ConsentContent = {
       privacy_policy_anchor_text: "Privacy Policy",
       vendors_list_anchor_text: "Vendors List",
       purpose_section_heading: "Manage Consent",
+      notice_banner_heading: "Privacy Notice",
       created_at: "2023-01-01T00:00:00Z",
       updated_at: "2023-01-01T00:00:00Z",
       deployed_at: "2023-01-01T00:00:00Z",
@@ -47,6 +48,7 @@ export const mockConsentContent: ConsentContent = {
           confirm_button_text: "Aceptar",
           decline_button_text: "Rechazar",
           purpose_section_heading: "Gestionar Consentimiento",
+          notice_banner_heading: "Aviso de Privacidad",
           purposes: {
             "purpose-1": "Marketing",
             "purpose-1-description": "Usamos datos para marketing.",
@@ -90,12 +92,106 @@ export const mockConsentContent: ConsentContent = {
   },
 } as const;
 
+export const mockReconsentContent: ConsentContent = {
+  ...mockConsentContent,
+  detail: {
+    ...mockConsentContent.detail,
+    reconsent_required: true,
+    active_config: {
+      ...mockConsentContent.detail.active_config,
+      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,
+            },
+            {
+              uuid: "element-2",
+              name: "Phone",
+              required: true,
+              description: null,
+              industries: null,
+              enabled: true,
+            },
+          ],
+        },
+        {
+          uuid: "purpose-2",
+          name: "Analytics",
+          description: "We use data for analytics purposes.",
+          industries: "Analytics",
+          data_elements: [
+            {
+              uuid: "element-3",
+              name: "Usage Data",
+              required: false,
+              description: null,
+              industries: null,
+              enabled: true,
+            },
+          ],
+        },
+      ],
+    },
+    purpose_selections: {
+      "purpose-1": {
+        selected: true,
+        status: "ACTIVE",
+        needs_reconsent: false,
+        data_elements: {
+          "element-1": {
+            selected: true,
+            enabled: true,
+            required: false,
+          },
+          "element-2": {
+            selected: true,
+            enabled: true,
+            required: true,
+          },
+        },
+      },
+      "purpose-2": {
+        selected: false,
+        status: "EXPIRED",
+        needs_reconsent: true,
+        data_elements: {
+          "element-3": {
+            selected: false,
+            enabled: true,
+            required: false,
+          },
+        },
+      },
+    },
+  },
+} as const;
+
+export const mockMinorConsentContent: ConsentContent = {
+  ...mockConsentContent,
+  detail: {
+    ...mockConsentContent.detail,
+    is_minor: true,
+  },
+} as const;
+
 export const defaultProps = {
   noticeId: "notice-123",
+  org_uuid: "org-123",
+  workspace_uuid: "workspace-123",
+  notice_uuid: "notice-123",
   accessToken: "mock-token",
   refreshToken: "mock-refresh-token",
   language: "en",
-  blockUI: true,
   onAccept: vi.fn(),
   onDecline: vi.fn(),
   onError: vi.fn(),
@@ -111,4 +207,4 @@ export const defaultProps = {
     },
     link: "#4f87ff",
   },
-} as const;
+} as const;

package/tests/setup.ts

@@ -1 +1,16 @@
 import "@testing-library/jest-dom";
+
+// Mock window.matchMedia
+Object.defineProperty(window, "matchMedia", {
+  writable: true,
+  value: (query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(), // deprecated
+    removeListener: vi.fn(), // deprecated
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  }),
+});

package/.changeset/README.md

@@ -1,8 +0,0 @@
-# Changesets
-
-Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
-with multi-package repos, or single-package repos to help you version and publish your code. You can
-find the full documentation for it [in our repository](https://github.com/changesets/changesets)
-
-We have a quick list of common questions to get you started engaging with this project in
-[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

package/.changeset/config.json

@@ -1,11 +0,0 @@
-{
-  "$schema": "https://unpkg.com/@changesets/config@3.1.1/schema.json",
-  "changelog": "@changesets/cli/changelog",
-  "commit": false,
-  "fixed": [],
-  "linked": [],
-  "access": "public",
-  "baseBranch": "main",
-  "updateInternalDependencies": "patch",
-  "ignore": []
-}

package/.changeset/fifty-candies-drop.md

@@ -1,5 +0,0 @@
----
-"@redacto.io/consent-sdk-react": patch
----
-
-Added base url as prop