@redacto.io/consent-sdk-react 10.0.0-beta.8 → 10.0.0

package/src/RedactoNoticeConsent/styles.ts

@@ -1,409 +0,0 @@
-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",
-  },
-
-  modal: {
-    position: "fixed",
-    top: "50%",
-    left: "50%",
-    transform: "translate(-50%, -50%)",
-    width: "700px",
-    borderRadius: "8px",
-    backgroundColor: "#ffffff",
-    boxShadow: "4px 0px 4px 0px #00000040",
-    border: "none",
-    display: "flex",
-    flexDirection: "column",
-    maxHeight: "90vh",
-    zIndex: 1000,
-    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: "flex-start",
-    gap: "10px",
-    paddingBottom: "15px",
-    borderBottom: "none",
-    backgroundColor: "#ffffff",
-    margin: 0,
-    boxSizing: "border-box",
-    textAlign: "left",
-  },
-
-  topLeft: {
-    display: "flex",
-    alignItems: "center",
-    gap: "10px",
-    flex: "1 1 0",
-    minWidth: 0,
-    margin: 0,
-    padding: 0,
-    boxSizing: "border-box",
-  },
-
-  logo: {
-    height: "32px",
-    width: "auto",
-    maxWidth: "140px",
-    objectFit: "contain",
-    flexShrink: 0,
-    margin: 0,
-    padding: 0,
-    display: "block",
-  },
-
-  title: {
-    fontSize: "18px",
-    fontWeight: 700,
-    lineHeight: "150%",
-    letterSpacing: "0.2px",
-    verticalAlign: "middle",
-    color: "#101828",
-    flex: "1 1 auto",
-    minWidth: 0,
-    wordBreak: "normal",
-    overflowWrap: "anywhere",
-    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: "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%",
-    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: "10px",
-    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: "none",
-    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",
-    maxHeight: "200px",
-    overflowY: "auto",
-    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/RedactoNoticeConsent/types.ts

@@ -1,54 +0,0 @@
-import type { Settings, DpoInfoTranslation } from "./api/types";
-
-export type Props = Readonly<{
-  noticeId: string;
-  accessToken: string;
-  refreshToken: string;
-  baseUrl?: string;
-  ledgerBaseUrl?: string;
-  settings?: Partial<Settings>;
-  language?: string;
-  blockUI?: boolean;
-  onAccept: () => void;
-  onDecline: () => void;
-  onError?: (error: Error) => void;
-  applicationId?: string;
-  validateAgainst?: "all" | "required";
-  digilockerMode?: "popup" | "redirect"; // Default: "redirect" (full page redirect - required for DigiLocker)
-  digilockerCallbackUrl?: string; // Default: "/digilocker-callback"
-  includeFullyConsentedData?: boolean;
-  reviewModeButtonText?: string;
-}>;
-
-export type PurposeTranslation = string | { name: string; description: string };
-
-export type PurposeTranslations = {
-  [purposeId: string]: PurposeTranslation;
-};
-
-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;
-  notice_banner_heading?: string;
-  privacy_policy_prefix_text?: string;
-  privacy_policy_anchor_text?: string;
-  privacy_center_anchor_text?: string;
-  dpo_info?: DpoInfoTranslation;
-  [key: string]:
-    | string
-    | PurposeTranslations
-    | DataElementTranslations
-    | DpoInfoTranslation
-    | Record<string, string | undefined>
-    | Record<string, string | { name: string; description: string }>
-    | undefined;
-};

package/src/RedactoNoticeConsent/useMediaQuery.ts

@@ -1,36 +0,0 @@
-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;
-};