@redacto.io/consent-sdk-react 10.3.1 → 11.0.0-beta.2

package/dist/index.mjs

@@ -15,6 +15,7 @@ import {
   THEMED_CONTROL_OFF,
   THEMED_TTS_BACKGROUND,
   TTS_TEXT_ATTRIBUTE,
+  applyScopedCustomCss,
   buildTtsCssVariables,
   buildTtsRootAttributes,
   configureNoticeFonts,
@@ -26,14 +27,16 @@ import {
   opaqueOver,
   paintableColor,
   prefersReducedMotion,
+  resolveEndpoints,
   resolveNoticeAppearance,
   resolveNoticeLayout,
   useIsomorphicLayoutEffect,
   useMediaQuery,
+  useResolvedEndpoints,
   withAlpha,
   withColorScheme,
   withIdempotencyKey
-} from "./chunk-RG4PVVKF.mjs";
+} from "./chunk-W45JQYDG.mjs";
 import {
   NOTICE_FONT_ROOT_PROPS,
   REQUIRED_MARKER_ARIA_LABEL,
@@ -1312,8 +1315,6 @@ var MOTION_ATTRIBUTE = "data-redacto-motion";
 var MOTION_OFF = "off";
 var NOTICE_ID_ATTRIBUTE = "data-redacto-notice-id";
 var CUSTOM_CSS_ATTRIBUTE = "data-redacto-notice-css";
-var CSS_SCOPE_AT_RULE = "@scope";
-var CSS_STRING_SPECIALS_RE = /["\\\n]/g;
 var PX_LENGTH_RE = /^(\d+(?:\.\d+)?)px$/;
 var FONT_SIZE_PRECISION = 10;
 var DARK_SCHEME_QUERY = "(prefers-color-scheme: dark)";
@@ -3989,29 +3990,12 @@ var showsNoticePolicyLink = (productCount, entryCount) => entryCount === 0 || pr
 import { useEffect as useEffect4, useMemo as useMemo2 } from "react";
 
 // src/RedactoNoticeConsent/services/customCss.ts
-var escapesScope = (style) => {
-  var _a, _b;
-  return Array.from((_b = (_a = style.sheet) == null ? void 0 : _a.cssRules) != null ? _b : []).some(
-    (rule) => !rule.cssText.startsWith(CSS_SCOPE_AT_RULE)
-  );
-};
-var applyNoticeCustomCss = (noticeId, css3) => {
-  if (typeof document === "undefined") {
-    return () => void 0;
-  }
-  const id = noticeId.replace(CSS_STRING_SPECIALS_RE, "\\$&");
-  const style = document.createElement("style");
-  style.setAttribute(CUSTOM_CSS_ATTRIBUTE, noticeId);
-  style.textContent = `${CSS_SCOPE_AT_RULE} ([${NOTICE_ID_ATTRIBUTE}="${id}"]) {
-${css3}
-}`;
-  document.head.appendChild(style);
-  if (escapesScope(style)) {
-    style.remove();
-    return () => void 0;
-  }
-  return () => style.remove();
-};
+var applyNoticeCustomCss = (noticeId, css3) => applyScopedCustomCss({
+  scopeAttribute: NOTICE_ID_ATTRIBUTE,
+  scopeId: noticeId,
+  markerAttribute: CUSTOM_CSS_ATTRIBUTE,
+  css: css3
+});
 
 // src/RedactoNoticeConsent/utils/mergeHostSettings.ts
 var definedColors = (colors) => Object.fromEntries(
@@ -5455,8 +5439,8 @@ var NoticeConsentView = ({
   ucic,
   organisationUuid,
   workspaceUuid,
-  baseUrl,
-  ledgerBaseUrl,
+  baseUrl: baseUrlProp,
+  ledgerBaseUrl: ledgerBaseUrlProp,
   language = "en",
   blockUI = true,
   onAccept,
@@ -5478,6 +5462,10 @@ var NoticeConsentView = ({
   forceColorScheme
 }) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L;
+  const endpoints = useResolvedEndpoints(baseUrlProp, ledgerBaseUrlProp, {
+    warn: !previewContent
+  });
+  const { baseUrl, ledgerBaseUrl } = endpoints;
   const sandboxParams = useMemo3(
     () => ({
       token,
@@ -7497,7 +7485,7 @@ var NoticeConsentView = ({
     const ttsAbortController = new AbortController();
     fetchTTSAudioUrls({
       accessToken,
-      baseUrl,
+      baseUrl: endpoints.mode === "host" ? ledgerBaseUrl : baseUrl,
       ledgerBaseUrl,
       noticeUuid: content.notice_uuid,
       language: languageCode,
@@ -7522,6 +7510,7 @@ var NoticeConsentView = ({
     sandboxParams,
     baseUrl,
     ledgerBaseUrl,
+    endpoints.mode,
     getLanguageCode
   ]);
   const hostRadius = noticeSettings == null ? void 0 : noticeSettings.borderRadius;
@@ -9427,8 +9416,8 @@ var RedactoConsentInlineComponent = ({
   workspace_uuid,
   notice_uuid,
   accessToken,
-  baseUrl,
-  ledgerBaseUrl,
+  baseUrl: baseUrlProp,
+  ledgerBaseUrl: ledgerBaseUrlProp,
   language = "en",
   onAccept,
   onError,
@@ -9437,6 +9426,8 @@ var RedactoConsentInlineComponent = ({
   applicationId
 }) => {
   var _a, _b, _c;
+  const endpoints = useResolvedEndpoints(baseUrlProp, ledgerBaseUrlProp);
+  const { baseUrl, ledgerBaseUrl } = endpoints;
   const [content, setContent] = useState3(null);
   const [isLoading, setIsLoading] = useState3(true);
   const [isSubmitting, setIsSubmitting] = useState3(false);
@@ -9454,6 +9445,31 @@ var RedactoConsentInlineComponent = ({
   const [awaitingConfirm, setAwaitingConfirm] = useState3(false);
   const refusedSelectionRef = useRef4(null);
   const confirmedSelectionRef = useRef4(null);
+  const endpointsKey = JSON.stringify([endpoints.mode, baseUrl != null ? baseUrl : "", ledgerBaseUrl != null ? ledgerBaseUrl : ""]);
+  const [loadedEndpointsKey, setLoadedEndpointsKey] = useState3(endpointsKey);
+  if (loadedEndpointsKey !== endpointsKey) {
+    setLoadedEndpointsKey(endpointsKey);
+    setContent(null);
+    setIsLoading(true);
+    setFetchError(null);
+    setErrorMessage(null);
+    setHasAlreadyConsented(false);
+    setIsCheckingConsent(Boolean(ledgerBaseUrl) && !applicationId);
+    setIsSubmitting(false);
+    setAwaitingConfirm(false);
+  }
+  const endpointsGenerationRef = useRef4(0);
+  const committedEndpointsKeyRef = useRef4(endpointsKey);
+  useIsomorphicLayoutEffect(() => {
+    if (committedEndpointsKeyRef.current === endpointsKey) {
+      return;
+    }
+    committedEndpointsKeyRef.current = endpointsKey;
+    endpointsGenerationRef.current += 1;
+    hasSubmittedRef.current = false;
+    refusedSelectionRef.current = null;
+    confirmedSelectionRef.current = null;
+  }, [endpointsKey]);
   useEffect7(() => {
     injectSpinnerAnimation();
     injectCheckboxStyles();
@@ -9573,12 +9589,13 @@ var RedactoConsentInlineComponent = ({
     setFetchError(null);
     setHasAlreadyConsented(false);
     try {
+      const noticeBaseUrl = endpoints.mode === "host" && accessToken && !applicationId ? ledgerBaseUrl : baseUrl;
       const consentContentData = await fetchConsentContent2({
         org_uuid,
         workspace_uuid,
         notice_uuid,
         accessToken,
-        baseUrl,
+        baseUrl: noticeBaseUrl,
         language,
         specific_uuid: applicationId,
         signal
@@ -9642,7 +9659,8 @@ var RedactoConsentInlineComponent = ({
     notice_uuid,
     language,
     applicationId,
-    accessToken
+    accessToken,
+    endpointsKey
   ]);
   useEffect7(() => {
     if (!ledgerBaseUrl || applicationId) {
@@ -9747,6 +9765,8 @@ var RedactoConsentInlineComponent = ({
         setErrorMessage("Unable to submit consent. Please try again.");
         throw new Error("Access token or content not available");
       }
+      const generation = endpointsGenerationRef.current;
+      const isCurrent = () => endpointsGenerationRef.current === generation;
       try {
         setIsSubmitting(true);
         setErrorMessage(null);
@@ -9782,16 +9802,24 @@ var RedactoConsentInlineComponent = ({
           declined: false,
           meta_data: applicationId ? { specific_uuid: applicationId } : void 0
         });
+        if (!isCurrent()) {
+          return;
+        }
         onAccept == null ? void 0 : onAccept();
         hasSubmittedRef.current = false;
       } catch (error) {
+        if (!isCurrent()) {
+          return;
+        }
         const err = error;
         const message = err.message || "Failed to submit consent. Please try again.";
         setErrorMessage(message);
         hasSubmittedRef.current = false;
         throw error;
       } finally {
-        setIsSubmitting(false);
+        if (isCurrent()) {
+          setIsSubmitting(false);
+        }
       }
     },
     [
@@ -12734,13 +12762,17 @@ var RedactoNoticeAssisted = ({
   organisationUuid,
   workspaceUuid,
   noticeUuid,
-  baseUrl,
-  ledgerBaseUrl,
+  baseUrl: baseUrlProp,
+  ledgerBaseUrl: ledgerBaseUrlProp,
   onDecline,
   onComplete,
   settings
 }) => {
   var _a, _b, _c, _d;
+  const { baseUrl, ledgerBaseUrl } = useResolvedEndpoints(
+    baseUrlProp,
+    ledgerBaseUrlProp
+  );
   const isMobile = useMediaQuery3("(max-width: 768px)");
   const [content, setContent] = useState5(null);
   const [isLoading, setIsLoading] = useState5(true);
@@ -14527,6 +14559,15 @@ var RedactoNoticePreview = ({
 // src/RedactoNoticeConsent/components/DigiLockerCallback.tsx
 import { useCallback as useCallback6, useEffect as useEffect10, useRef as useRef6, useState as useState6 } from "react";
 import { Fragment as Fragment5, jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+var sameOriginUrlOrRoot = (candidate) => {
+  if (!candidate) return "/";
+  try {
+    const url = new URL(candidate, window.location.origin);
+    return url.origin === window.location.origin ? url.href : "/";
+  } catch {
+    return "/";
+  }
+};
 var DigiLockerCallback = ({
   accessToken: propAccessToken,
   baseUrl,
@@ -14563,7 +14604,7 @@ var DigiLockerCallback = ({
         flowState: verificationResult === "verified" ? "consent-form" : "error"
       });
       redirectTimeoutRef.current = setTimeout(() => {
-        window.location.href = originalUrl;
+        window.location.href = sameOriginUrlOrRoot(originalUrl);
       }, 1500);
     },
     []
@@ -14635,7 +14676,7 @@ var DigiLockerCallback = ({
         return;
       }
       setMessage("Processing verification...");
-      const apiBaseUrl = baseUrl || storedBaseUrl;
+      const apiBaseUrl = resolveEndpoints(baseUrl || storedBaseUrl).baseUrl;
       const response = await verifyGuardianStatus({
         accessToken,
         baseUrl: apiBaseUrl,
@@ -14796,7 +14837,7 @@ var DigiLockerCallback = ({
     const persistedState = getConsentState();
     if (persistedState == null ? void 0 : persistedState.originalUrl) {
       clearConsentState();
-      window.location.href = persistedState.originalUrl;
+      window.location.href = sameOriginUrlOrRoot(persistedState.originalUrl);
     } else {
       window.location.href = "/";
     }