@redacto.io/consent-sdk-react 7.2.0 → 8.0.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @redacto.io/consent-sdk-react
 
+## 8.0.0
+
+### Major Changes
+
+- enhance ui/ux
+
+## 7.3.0
+
+### Minor Changes
+
+- change branding path
+
 ## 7.2.0
 
 ### Minor Changes

package/dist/chunk-6A665OPR.mjs

@@ -0,0 +1,30 @@
+// src/RedactoNoticeConsent/useMediaQuery.ts
+import { useState, useEffect } from "react";
+var useMediaQuery = (query) => {
+  const getMatches = () => typeof window !== "undefined" ? window.matchMedia(query).matches : false;
+  const [matches, setMatches] = useState(getMatches);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const media = window.matchMedia(query);
+    const listener = (e) => {
+      setMatches(e.matches);
+    };
+    if (media.addEventListener) {
+      media.addEventListener("change", listener);
+    } else {
+      media.addListener(listener);
+    }
+    return () => {
+      if (media.removeEventListener) {
+        media.removeEventListener("change", listener);
+      } else {
+        media.removeListener(listener);
+      }
+    };
+  }, [query]);
+  return matches;
+};
+
+export {
+  useMediaQuery
+};

package/dist/index.mjs

@@ -1,5 +1,9 @@
+import {
+  useMediaQuery
+} from "./chunk-6A665OPR.mjs";
+
 // src/RedactoNoticeConsent/RedactoNoticeConsent.tsx
-import { useCallback, useEffect as useEffect2, useMemo, useRef, useState as useState2 } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 // src/RedactoNoticeConsent/api/index.ts
 import { jwtDecode } from "jwt-decode";
@@ -990,33 +994,6 @@ var styles = {
   }
 };
 
-// src/RedactoNoticeConsent/useMediaQuery.ts
-import { useState, useEffect } from "react";
-var useMediaQuery = (query) => {
-  const getMatches = () => typeof window !== "undefined" ? window.matchMedia(query).matches : false;
-  const [matches, setMatches] = useState(getMatches);
-  useEffect(() => {
-    if (typeof window === "undefined") return;
-    const media = window.matchMedia(query);
-    const listener = (e) => {
-      setMatches(e.matches);
-    };
-    if (media.addEventListener) {
-      media.addEventListener("change", listener);
-    } else {
-      media.addListener(listener);
-    }
-    return () => {
-      if (media.removeEventListener) {
-        media.removeEventListener("change", listener);
-      } else {
-        media.removeListener(listener);
-      }
-    };
-  }, [query]);
-  return matches;
-};
-
 // src/RedactoNoticeConsent/services/storage.ts
 var STORAGE_KEY = "redacto_consent_sdk_state";
 var STATE_EXPIRY_MS = 30 * 60 * 1e3;
@@ -1410,12 +1387,12 @@ var GuardianForm = ({
   logoUrl
 }) => {
   var _a, _b, _c, _d, _e;
-  const [isDropdownOpen, setIsDropdownOpen] = useState2(false);
-  const [focusedIndex, setFocusedIndex] = useState2(-1);
-  const [openUpward, setOpenUpward] = useState2(false);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [focusedIndex, setFocusedIndex] = useState(-1);
+  const [openUpward, setOpenUpward] = useState(false);
   const dropdownRef = useRef(null);
   const optionsRef = useRef(null);
-  useEffect2(() => {
+  useEffect(() => {
     if (!isDropdownOpen) return;
     const handleClickOutside = (e) => {
       if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
@@ -1426,7 +1403,7 @@ var GuardianForm = ({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [isDropdownOpen]);
-  useEffect2(() => {
+  useEffect(() => {
     if (!isDropdownOpen || !dropdownRef.current) return;
     const rect = dropdownRef.current.getBoundingClientRect();
     const spaceBelow = window.innerHeight - rect.bottom;
@@ -1468,7 +1445,7 @@ var GuardianForm = ({
         break;
     }
   };
-  useEffect2(() => {
+  useEffect(() => {
     var _a2;
     if (focusedIndex >= 0 && optionsRef.current) {
       const option = optionsRef.current.children[focusedIndex];
@@ -2306,50 +2283,50 @@ var RedactoNoticeConsent = ({
       }
     );
   }
-  const [isLoading, setIsLoading] = useState2(true);
-  const [isSubmitting, setIsSubmitting] = useState2(false);
-  const [isSubmittingAccept, setIsSubmittingAccept] = useState2(false);
-  const [isSubmittingDecline, setIsSubmittingDecline] = useState2(false);
-  const [content, setContent] = useState2(null);
-  const [categorizedPurposes, setCategorizedPurposes] = useState2(null);
-  const [selectedPurposes, setSelectedPurposes] = useState2({});
-  const [selectedDataElements, setSelectedDataElements] = useState2({});
-  const [initialDataElementSelections, setInitialDataElementSelections] = useState2({});
-  const [collapsedPurposes, setCollapsedPurposes] = useState2({});
-  const [hasAlreadyConsented, setHasAlreadyConsented] = useState2(false);
-  const [isFullyConsentedReviewMode, setIsFullyConsentedReviewMode] = useState2(false);
-  const [isLanguageDropdownOpen, setIsLanguageDropdownOpen] = useState2(false);
-  const [selectedLanguage, setSelectedLanguage] = useState2(language);
-  const [errorMessage, setErrorMessage] = useState2(null);
-  const [fetchError, setFetchError] = useState2(null);
-  const [ttsAudioUrls, setTtsAudioUrls] = useState2(null);
-  const [isTTSAvailable, setIsTTSAvailable] = useState2(false);
-  const [isPlaying, setIsPlaying] = useState2(false);
-  const [isPaused, setIsPaused] = useState2(false);
-  const [currentAudioIndex, setCurrentAudioIndex] = useState2(0);
-  const [highlightedElementId, setHighlightedElementId] = useState2(null);
-  const [showAgeVerification, setShowAgeVerification] = useState2(false);
-  const [isMinorFlow, setIsMinorFlow] = useState2(false);
-  const [selfDeclaredAdult, setSelfDeclaredAdult] = useState2(false);
-  const [showGuardianForm, setShowGuardianForm] = useState2(false);
-  const [isSubmittingGuardian, setIsSubmittingGuardian] = useState2(false);
-  const [guardianFormData, setGuardianFormData] = useState2({
+  const [isLoading, setIsLoading] = useState(true);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isSubmittingAccept, setIsSubmittingAccept] = useState(false);
+  const [isSubmittingDecline, setIsSubmittingDecline] = useState(false);
+  const [content, setContent] = useState(null);
+  const [categorizedPurposes, setCategorizedPurposes] = useState(null);
+  const [selectedPurposes, setSelectedPurposes] = useState({});
+  const [selectedDataElements, setSelectedDataElements] = useState({});
+  const [initialDataElementSelections, setInitialDataElementSelections] = useState({});
+  const [collapsedPurposes, setCollapsedPurposes] = useState({});
+  const [hasAlreadyConsented, setHasAlreadyConsented] = useState(false);
+  const [isFullyConsentedReviewMode, setIsFullyConsentedReviewMode] = useState(false);
+  const [isLanguageDropdownOpen, setIsLanguageDropdownOpen] = useState(false);
+  const [selectedLanguage, setSelectedLanguage] = useState(language);
+  const [errorMessage, setErrorMessage] = useState(null);
+  const [fetchError, setFetchError] = useState(null);
+  const [ttsAudioUrls, setTtsAudioUrls] = useState(null);
+  const [isTTSAvailable, setIsTTSAvailable] = useState(false);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [isPaused, setIsPaused] = useState(false);
+  const [currentAudioIndex, setCurrentAudioIndex] = useState(0);
+  const [highlightedElementId, setHighlightedElementId] = useState(null);
+  const [showAgeVerification, setShowAgeVerification] = useState(false);
+  const [isMinorFlow, setIsMinorFlow] = useState(false);
+  const [selfDeclaredAdult, setSelfDeclaredAdult] = useState(false);
+  const [showGuardianForm, setShowGuardianForm] = useState(false);
+  const [isSubmittingGuardian, setIsSubmittingGuardian] = useState(false);
+  const [guardianFormData, setGuardianFormData] = useState({
     guardianName: "",
     guardianContact: "",
     guardianRelationship: ""
   });
-  const [guardianFormErrors, setGuardianFormErrors] = useState2({});
-  const [showVerificationScreen, setShowVerificationScreen] = useState2(false);
-  const [verificationReference, setVerificationReference] = useState2(null);
-  const [isInitiatingVerification, setIsInitiatingVerification] = useState2(false);
-  const [verificationError, setVerificationError] = useState2(
+  const [guardianFormErrors, setGuardianFormErrors] = useState({});
+  const [showVerificationScreen, setShowVerificationScreen] = useState(false);
+  const [verificationReference, setVerificationReference] = useState(null);
+  const [isInitiatingVerification, setIsInitiatingVerification] = useState(false);
+  const [verificationError, setVerificationError] = useState(
     null
   );
-  const [verificationErrorCode, setVerificationErrorCode] = useState2(null);
-  const [canRetryVerification, setCanRetryVerification] = useState2(false);
-  const [isPollingStatus, setIsPollingStatus] = useState2(false);
-  const [isVerificationComplete, setIsVerificationComplete] = useState2(false);
-  const [isAutoTransitioning, setIsAutoTransitioning] = useState2(false);
+  const [verificationErrorCode, setVerificationErrorCode] = useState(null);
+  const [canRetryVerification, setCanRetryVerification] = useState(false);
+  const [isPollingStatus, setIsPollingStatus] = useState(false);
+  const [isVerificationComplete, setIsVerificationComplete] = useState(false);
+  const [isAutoTransitioning, setIsAutoTransitioning] = useState(false);
   const modalRef = useRef(null);
   const firstFocusableRef = useRef(null);
   const lastFocusableRef = useRef(null);
@@ -2480,7 +2457,7 @@ var RedactoNoticeConsent = ({
     });
   }, [content, selectedDataElements]);
   const acceptDisabled = isSubmitting || !areAllRequiredElementsChecked;
-  useEffect2(() => {
+  useEffect(() => {
     var _a2, _b2;
     clearApiCache();
     isRequestInProgressRef.current = false;
@@ -2543,7 +2520,7 @@ var RedactoNoticeConsent = ({
     }
     isInitialMountRef.current = false;
   }, [accessToken]);
-  useEffect2(() => {
+  useEffect(() => {
     if (hasAlreadyConsented) {
       onAccept == null ? void 0 : onAccept();
     }
@@ -2773,7 +2750,7 @@ var RedactoNoticeConsent = ({
       isRequestInProgressRef.current = false;
     }
   };
-  useEffect2(() => {
+  useEffect(() => {
     injectCheckboxStyles();
     fetchNotice();
   }, [
@@ -3544,7 +3521,7 @@ var RedactoNoticeConsent = ({
       playAudio();
     }
   }, [isPlaying, playAudio, pauseAudio]);
-  useEffect2(() => {
+  useEffect(() => {
     var _a2;
     if (!isPlaying || !content || audioSequence.length === 0) return;
     const currentIndex = currentAudioIndex;
@@ -3578,7 +3555,7 @@ var RedactoNoticeConsent = ({
     categorizedPurposes,
     collapsedPurposes
   ]);
-  useEffect2(() => {
+  useEffect(() => {
     const removeAllHighlights = () => {
       document.querySelectorAll(".redacto-tts-highlight").forEach((el) => {
         el.classList.remove("redacto-tts-highlight");
@@ -3614,7 +3591,7 @@ var RedactoNoticeConsent = ({
       removeAllHighlights();
     };
   }, [highlightedElementId, isPlaying]);
-  useEffect2(() => {
+  useEffect(() => {
     setIsTTSAvailable(false);
     setTtsAudioUrls(null);
     stopAudio();
@@ -3678,7 +3655,7 @@ var RedactoNoticeConsent = ({
   const handleCloseError = () => {
     setErrorMessage(null);
   };
-  useEffect2(() => {
+  useEffect(() => {
     const handleKeyDown = (event) => {
       if (!modalRef.current) return;
       const focusableElements = modalRef.current.querySelectorAll(
@@ -3717,13 +3694,13 @@ var RedactoNoticeConsent = ({
       modal == null ? void 0 : modal.removeEventListener("keydown", handleKeyDown);
     };
   }, [isLoading, handleDecline]);
-  useEffect2(() => {
+  useEffect(() => {
     stopAudio();
   }, [selectedLanguage, stopAudio]);
-  useEffect2(() => {
+  useEffect(() => {
     stopAudio();
   }, [content, stopAudio]);
-  useEffect2(() => {
+  useEffect(() => {
     return () => {
       var _a2, _b2;
       if (abortControllerRef.current) {
@@ -3749,7 +3726,7 @@ var RedactoNoticeConsent = ({
       }
     };
   }, [stopAudio]);
-  useEffect2(() => {
+  useEffect(() => {
     const persistedState = getConsentState();
     if (!persistedState) return;
     if (persistedState.noticeId && persistedState.noticeId !== noticeId) {
@@ -4609,7 +4586,7 @@ var RedactoNoticeConsent = ({
 };
 
 // src/RedactoNoticeConsentInline/RedactoNoticeConsentInline.tsx
-import { useEffect as useEffect4, useMemo as useMemo2, useState as useState4, useRef as useRef2, useCallback as useCallback2, memo } from "react";
+import { useEffect as useEffect3, useMemo as useMemo2, useState as useState3, useRef as useRef2, useCallback as useCallback2, memo } from "react";
 
 // src/RedactoNoticeConsentInline/api/index.ts
 var BASE_URL2 = "https://api.redacto.tech/consent";
@@ -5041,11 +5018,11 @@ var styles2 = {
 };
 
 // src/RedactoNoticeConsentInline/useMediaQuery.ts
-import { useState as useState3, useEffect as useEffect3 } from "react";
+import { useState as useState2, useEffect as useEffect2 } from "react";
 var useMediaQuery2 = (query) => {
   const getMatches = () => typeof window !== "undefined" ? window.matchMedia(query).matches : false;
-  const [matches, setMatches] = useState3(getMatches);
-  useEffect3(() => {
+  const [matches, setMatches] = useState2(getMatches);
+  useEffect2(() => {
     if (typeof window === "undefined") return;
     const media = window.matchMedia(query);
     const listener = (e) => {
@@ -5111,18 +5088,18 @@ var RedactoConsentInlineComponent = ({
   applicationId
 }) => {
   var _a;
-  const [content, setContent] = useState4(null);
-  const [isLoading, setIsLoading] = useState4(true);
-  const [isSubmitting, setIsSubmitting] = useState4(false);
-  const [selectedLanguage, setSelectedLanguage] = useState4(language);
-  const [collapsedPurposes, setCollapsedPurposes] = useState4({});
-  const [selectedPurposes, setSelectedPurposes] = useState4({});
-  const [selectedDataElements, setSelectedDataElements] = useState4({});
-  const [hasAlreadyConsented, setHasAlreadyConsented] = useState4(false);
-  const [fetchError, setFetchError] = useState4(null);
-  const [errorMessage, setErrorMessage] = useState4(null);
+  const [content, setContent] = useState3(null);
+  const [isLoading, setIsLoading] = useState3(true);
+  const [isSubmitting, setIsSubmitting] = useState3(false);
+  const [selectedLanguage, setSelectedLanguage] = useState3(language);
+  const [collapsedPurposes, setCollapsedPurposes] = useState3({});
+  const [selectedPurposes, setSelectedPurposes] = useState3({});
+  const [selectedDataElements, setSelectedDataElements] = useState3({});
+  const [hasAlreadyConsented, setHasAlreadyConsented] = useState3(false);
+  const [fetchError, setFetchError] = useState3(null);
+  const [errorMessage, setErrorMessage] = useState3(null);
   const hasSubmittedRef = useRef2(false);
-  useEffect4(() => {
+  useEffect3(() => {
     injectSpinnerAnimation();
   }, []);
   const isMobile = useMediaQuery2("(max-width: 768px)");
@@ -5155,10 +5132,10 @@ var RedactoConsentInlineComponent = ({
       );
     });
   }, [content, selectedDataElements]);
-  useEffect4(() => {
+  useEffect3(() => {
     onValidationChange == null ? void 0 : onValidationChange(areAllRequiredElementsChecked);
   }, [areAllRequiredElementsChecked, onValidationChange]);
-  useEffect4(() => {
+  useEffect3(() => {
     if (hasAlreadyConsented) {
       onAccept == null ? void 0 : onAccept();
     }
@@ -5258,7 +5235,7 @@ var RedactoConsentInlineComponent = ({
       setIsLoading(false);
     }
   };
-  useEffect4(() => {
+  useEffect3(() => {
     fetchNotice();
   }, [org_uuid, workspace_uuid, notice_uuid, language, applicationId]);
   const togglePurposeCollapse = (purposeUuid) => {
@@ -5381,7 +5358,7 @@ var RedactoConsentInlineComponent = ({
       onAccept
     ]
   );
-  useEffect4(() => {
+  useEffect3(() => {
     if (accessToken && content && areAllRequiredElementsChecked && !isSubmitting && !hasSubmittedRef.current) {
       hasSubmittedRef.current = true;
       const autoSubmit = async () => {
@@ -5401,7 +5378,7 @@ var RedactoConsentInlineComponent = ({
     isSubmitting,
     handleAcceptWithToken
   ]);
-  useEffect4(() => {
+  useEffect3(() => {
     if (!accessToken) {
       hasSubmittedRef.current = false;
     }
@@ -5603,7 +5580,7 @@ RedactoConsentInlineComponent.displayName = "RedactoConsentInline";
 var RedactoConsentInline = memo(RedactoConsentInlineComponent);
 
 // src/RedactoNoticeConsent/components/DigiLockerCallback.tsx
-import { useCallback as useCallback3, useEffect as useEffect5, useRef as useRef3, useState as useState5 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect4, useRef as useRef3, useState as useState4 } from "react";
 import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var DigiLockerCallback = ({
   accessToken: propAccessToken,
@@ -5611,9 +5588,9 @@ var DigiLockerCallback = ({
   onSuccess,
   onError
 }) => {
-  const [status, setStatus] = useState5("processing");
-  const [message, setMessage] = useState5("Verifying your guardian...");
-  const [errorDetail, setErrorDetail] = useState5(null);
+  const [status, setStatus] = useState4("processing");
+  const [message, setMessage] = useState4("Verifying your guardian...");
+  const [errorDetail, setErrorDetail] = useState4(null);
   const retryTimeoutRef = useRef3(null);
   const redirectTimeoutRef = useRef3(null);
   const isMountedRef = useRef3(true);
@@ -5861,7 +5838,7 @@ var DigiLockerCallback = ({
       }
     }
   }, [propAccessToken, baseUrl, onSuccess, onError, redirectToOriginalPage]);
-  useEffect5(() => {
+  useEffect4(() => {
     injectCheckboxStyles();
     handleCallback();
     return () => {