@redacto.io/consent-sdk-react 0.0.1 → 0.0.3

package/dist/index.mjs

@@ -1,56 +1,39 @@
 // src/RedactoNoticeConsent/RedactoNoticeConsent.tsx
-import { useEffect as useEffect2, useMemo, useState as useState2 } from "react";
+import { useEffect as useEffect2, useMemo, useState as useState2, useRef } from "react";
 
 // src/RedactoNoticeConsent/api/index.ts
 import { jwtDecode } from "jwt-decode";
-var BASE_URL = "https://api.redacto.tech";
-var BACKEND_URL = "http://localhost:3000";
+var BASE_URL = "https://api.redacto.tech/consent";
 var fetchConsentContent = async ({
   noticeId,
   accessToken,
-  refreshToken,
-  language = "en"
+  baseUrl,
+  language = "en",
+  specific_uuid
 }) => {
   try {
     const decodedToken = jwtDecode(accessToken);
     const ORGANISATION_UUID = decodedToken == null ? void 0 : decodedToken.organisation_uuid;
     const WORKSPACE_UUID = decodedToken == null ? void 0 : decodedToken.workspace_uuid;
-    const response = await fetch(
-      `${BASE_URL}/consent/public/organisations/${ORGANISATION_UUID}/workspaces/${WORKSPACE_UUID}/notices/${noticeId}`,
-      {
-        method: "GET",
-        headers: {
-          Authorization: `Bearer ${accessToken}`,
-          "Accept-Language": language,
-          "Content-Type": "application/json"
-        }
-      }
+    const apiBaseUrl = baseUrl || BASE_URL;
+    const url = new URL(
+      `${apiBaseUrl}/public/organisations/${ORGANISATION_UUID}/workspaces/${WORKSPACE_UUID}/notices/${noticeId}`
     );
-    if (response.status === 401) {
-      try {
-        const response2 = await fetch(
-          `${BACKEND_URL}/api/consent/refresh-token`,
-          {
-            method: "POST",
-            headers: {
-              "Content-Type": "application/json"
-            },
-            body: JSON.stringify({
-              refreshToken
-            })
-          }
-        );
-        if (!response2.ok) {
-          throw new Error("Failed to get consent tokens");
-        }
-        const data2 = await response2.json();
-        localStorage.setItem("accessToken", data2.token);
-        localStorage.setItem("refreshToken", data2.refresh_token);
-        localStorage.setItem("tokenExpiresAt", data2.expires_at);
-      } catch (error) {
-        console.error("Failed to setup consent:", error);
-        throw error;
+    if (specific_uuid) {
+      url.searchParams.append("specific_uuid", specific_uuid);
+    }
+    const response = await fetch(url.toString(), {
+      method: "GET",
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+        "Accept-Language": language,
+        "Content-Type": "application/json"
       }
+    });
+    if (response.status === 401) {
+      const error = new Error("Unauthorized");
+      error.status = 401;
+      throw error;
     }
     if (response.status === 409) {
       const error = new Error("User has already provided consent");
@@ -71,9 +54,11 @@ var fetchConsentContent = async ({
 };
 var submitConsentEvent = async ({
   accessToken,
+  baseUrl,
   noticeUuid,
   purposes,
-  declined
+  declined,
+  meta_data
 }) => {
   try {
     const primaryEmail = localStorage.getItem("userEmail");
@@ -90,7 +75,7 @@ var submitConsentEvent = async ({
           uuid: purpose.uuid,
           name: purpose.name,
           description: purpose.description,
-          industries: purpose.industries,
+          industries: purpose.industries || "",
           selected: purpose.selected,
           data_elements: purpose.data_elements.map((element) => ({
             uuid: element.uuid,
@@ -100,10 +85,12 @@ var submitConsentEvent = async ({
             selected: element.required ? true : element.selected
           }))
         }))
-      }
+      },
+      meta_data
     };
+    const apiBaseUrl = baseUrl || BASE_URL;
     const response = await fetch(
-      `${BASE_URL}/consent/public/consent-events/organisations/${ORGANISATION_UUID}/workspaces/${WORKSPACE_UUID}/by-token`,
+      `${apiBaseUrl}/public/organisations/${ORGANISATION_UUID}/workspaces/${WORKSPACE_UUID}/by-token`,
       {
         method: "POST",
         headers: {
@@ -136,7 +123,10 @@ var styles = {
     justifyContent: "center",
     zIndex: 999,
     animation: "overlayFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1)",
-    pointerEvents: "all"
+    pointerEvents: "all",
+    margin: 0,
+    padding: 0,
+    boxSizing: "border-box"
   },
   modal: {
     position: "fixed",
@@ -151,7 +141,12 @@ var styles = {
     display: "flex",
     flexDirection: "column",
     maxHeight: "90vh",
-    zIndex: 1e3
+    zIndex: 1e3,
+    margin: 0,
+    padding: 0,
+    boxSizing: "border-box",
+    textAlign: "left",
+    fontFamily: "inherit"
   },
   content: {
     margin: "22px",
@@ -159,7 +154,9 @@ var styles = {
     flexDirection: "column",
     flexGrow: 1,
     overflow: "hidden",
-    minHeight: 0
+    minHeight: 0,
+    boxSizing: "border-box",
+    textAlign: "left"
   },
   topSection: {
     display: "flex",
@@ -168,17 +165,26 @@ var styles = {
     paddingBottom: "15px",
     borderBottom: "1px solid #e5e7eb",
     boxShadow: "0 1px 2px rgba(0, 0, 0, 0.03)",
-    backgroundColor: "#ffffff"
+    backgroundColor: "#ffffff",
+    margin: 0,
+    boxSizing: "border-box",
+    textAlign: "left"
   },
   topLeft: {
     display: "flex",
     alignItems: "center",
-    gap: "10px"
+    gap: "10px",
+    margin: 0,
+    padding: 0,
+    boxSizing: "border-box"
   },
   logo: {
     height: "32px",
     width: "auto",
-    objectFit: "contain"
+    objectFit: "contain",
+    margin: 0,
+    padding: 0,
+    display: "block"
   },
   title: {
     fontSize: "18px",
@@ -186,7 +192,10 @@ var styles = {
     lineHeight: "150%",
     letterSpacing: "0.2px",
     verticalAlign: "middle",
-    color: "#101828"
+    color: "#101828",
+    margin: 0,
+    padding: 0,
+    textAlign: "left"
   },
   topRight: {
     borderRadius: "8px",
@@ -202,6 +211,9 @@ var styles = {
     verticalAlign: "middle",
     color: "#344054",
     gap: "5px",
+    margin: 0,
+    boxSizing: "border-box",
+    textAlign: "left",
     cursor: "pointer",
     backgroundColor: "#ffffff"
   },
@@ -213,52 +225,78 @@ var styles = {
     flexGrow: 1,
     overflowY: "auto",
     minHeight: 0,
-    paddingRight: "15px"
+    paddingRight: "15px",
+    boxSizing: "border-box",
+    textAlign: "left"
   },
   privacyText: {
     fontSize: "16px",
     fontWeight: 400,
     lineHeight: "150%",
     letterSpacing: "0.2px",
-    color: "#344054"
+    color: "#344054",
+    margin: 0,
+    padding: 0,
+    textAlign: "left"
   },
   link: {
     color: "#4f87ff",
-    textDecoration: "none"
+    textDecoration: "none",
+    margin: 0,
+    padding: 0,
+    boxSizing: "border-box"
   },
   subTitle: {
     fontWeight: 600,
     fontSize: "16px",
     lineHeight: "150%",
     letterSpacing: "0.2px",
-    color: "#101828"
+    color: "#101828",
+    margin: 0,
+    padding: 0,
+    textAlign: "left"
   },
   optionsContainer: {
     display: "flex",
     flexDirection: "column",
-    gap: "14px"
+    gap: "14px",
+    margin: 0,
+    padding: 0,
+    boxSizing: "border-box"
   },
   optionItem: {
     display: "flex",
     justifyContent: "space-between",
-    alignItems: "center"
+    alignItems: "center",
+    margin: 0,
+    padding: 0,
+    boxSizing: "border-box"
   },
   optionLeft: {
     display: "flex",
     gap: "12px",
     alignItems: "center",
-    cursor: "pointer"
+    cursor: "pointer",
+    margin: 0,
+    padding: 0,
+    boxSizing: "border-box"
   },
   optionTextContainer: {
     display: "flex",
-    flexDirection: "column"
+    flexDirection: "column",
+    margin: 0,
+    padding: 0,
+    boxSizing: "border-box"
   },
   optionTitle: {
     fontWeight: 500,
     fontSize: "16px",
     lineHeight: "150%",
     letterSpacing: "0.2px",
-    color: "#101828"
+    color: "#101828",
+    margin: 0,
+    padding: 0,
+    textAlign: "left"
   },
   optionDescription: {
     fontWeight: 400,
@@ -266,39 +304,69 @@ var styles = {
     lineHeight: "150%",
     letterSpacing: "0.2px",
     color: "#475467",
-    verticalAlign: "middle"
+    verticalAlign: "middle",
+    margin: 0,
+    padding: 0,
+    textAlign: "left"
   },
   checkboxLarge: {
     height: "20px",
     width: "20px",
     padding: "4px",
     borderRadius: "5px",
-    border: "2px solid #d0d5dd"
+    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"
+    flexDirection: "column",
+    margin: 0,
+    padding: 0,
+    boxSizing: "border-box",
+    paddingLeft: "22px"
   },
   dataElementItem: {
     display: "flex",
     alignItems: "center",
     gap: "10px",
-    justifyContent: "space-between"
+    justifyContent: "space-between",
+    margin: 0,
+    padding: 0,
+    boxSizing: "border-box",
+    minHeight: "24px"
   },
   dataElementText: {
     fontWeight: 400,
     fontSize: "14px",
     lineHeight: "150%",
     letterSpacing: "0.2px",
-    color: "#344054"
+    color: "#344054",
+    margin: 0,
+    padding: 0,
+    textAlign: "left"
   },
   checkboxSmall: {
     height: "16px",
     width: "16px",
     padding: "4px",
     borderRadius: "5px",
-    border: "2px solid #d0d5dd"
+    border: "2px solid #d0d5dd",
+    margin: 0,
+    boxSizing: "border-box",
+    appearance: "none",
+    WebkitAppearance: "none",
+    MozAppearance: "none",
+    cursor: "pointer",
+    position: "relative",
+    backgroundColor: "transparent"
   },
   bottomSection: {
     display: "flex",
@@ -307,7 +375,9 @@ var styles = {
     paddingTop: "15px",
     borderTop: "1px solid #e5e7eb",
     boxShadow: "0 -1px 2px rgba(0, 0, 0, 0.03)",
-    backgroundColor: "#ffffff"
+    backgroundColor: "#ffffff",
+    margin: 0,
+    boxSizing: "border-box"
   },
   button: {
     width: "100%",
@@ -317,7 +387,10 @@ var styles = {
     fontSize: "16px",
     lineHeight: "150%",
     letterSpacing: "0.2px",
-    cursor: "pointer"
+    cursor: "pointer",
+    margin: 0,
+    boxSizing: "border-box",
+    textAlign: "center"
   },
   acceptButton: {
     backgroundColor: "#4f87ff",
@@ -330,7 +403,10 @@ var styles = {
     color: "#000000"
   },
   languageSelectorContainer: {
-    position: "relative"
+    position: "relative",
+    margin: 0,
+    padding: 0,
+    boxSizing: "border-box"
   },
   languageDropdown: {
     position: "absolute",
@@ -342,7 +418,10 @@ var styles = {
     boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.1)",
     zIndex: 10,
     width: "max-content",
-    marginTop: "4px"
+    marginTop: "4px",
+    padding: 0,
+    boxSizing: "border-box",
+    textAlign: "left"
   },
   languageItem: {
     padding: "8px 12px",
@@ -350,7 +429,10 @@ var styles = {
     fontSize: "12px",
     color: "#344054",
     backgroundColor: "#ffffff",
-    borderBottom: "1px solid #e5e7eb"
+    borderBottom: "1px solid #e5e7eb",
+    margin: 0,
+    boxSizing: "border-box",
+    textAlign: "left"
   },
   selectedLanguageItem: {
     backgroundColor: "#f3f4f6",
@@ -362,7 +444,9 @@ var styles = {
     alignItems: "center",
     justifyContent: "center",
     padding: "2rem",
-    minHeight: "200px"
+    minHeight: "200px",
+    margin: 0,
+    boxSizing: "border-box"
   },
   loadingSpinner: {
     width: "40px",
@@ -371,55 +455,8 @@ var styles = {
     borderTop: "4px solid #3498db",
     borderRadius: "50%",
     animation: "spin 1s linear infinite",
-    marginBottom: "1rem"
-  },
-  // Media query styles
-  "@media (max-width: 768px)": {
-    modal: {
-      width: "90%"
-    },
-    content: {
-      margin: "20px"
-    },
-    title: {
-      fontSize: "16px"
-    },
-    subTitle: {
-      fontSize: "14px"
-    },
-    privacyText: {
-      fontSize: "14px"
-    },
-    optionTitle: {
-      fontSize: "14px"
-    },
-    optionDescription: {
-      fontSize: "11px"
-    },
-    dataElementText: {
-      fontSize: "12px"
-    },
-    topRight: {
-      fontSize: "11px",
-      padding: "3px 6px",
-      height: "auto",
-      width: "auto"
-    },
-    languageItem: {
-      fontSize: "11px",
-      padding: "6px 10px"
-    },
-    bottomSection: {
-      flexDirection: "column",
-      gap: "12px"
-    },
-    button: {
-      fontSize: "14px",
-      padding: "10px 20px"
-    },
-    middleSection: {
-      paddingRight: "10px"
-    }
+    marginBottom: "1rem",
+    boxSizing: "border-box"
   }
 };
 
@@ -453,29 +490,136 @@ var useMediaQuery = (query) => {
   return matches;
 };
 
+// src/RedactoNoticeConsent/injectStyles.ts
+var stylesInjected = false;
+var injectCheckboxStyles = () => {
+  if (stylesInjected || typeof document === "undefined") {
+    return;
+  }
+  const STYLE_ID = "redacto-consent-checkbox-styles";
+  if (document.getElementById(STYLE_ID)) {
+    stylesInjected = true;
+    return;
+  }
+  const style = document.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = `
+    /* Redacto Consent SDK Checkbox Styles */
+    .redacto-checkbox-large {
+      appearance: none !important;
+      -webkit-appearance: none !important;
+      -moz-appearance: none !important;
+      height: 20px !important;
+      width: 20px !important;
+      border: 2px solid #d0d5dd !important;
+      border-radius: 5px !important;
+      background-color: transparent !important;
+      cursor: pointer !important;
+      position: relative !important;
+      box-sizing: border-box !important;
+      margin: 0 !important;
+      padding: 4px !important;
+    }
+
+    .redacto-checkbox-small {
+      appearance: none !important;
+      -webkit-appearance: none !important;
+      -moz-appearance: none !important;
+      height: 16px !important;
+      width: 16px !important;
+      border: 2px solid #d0d5dd !important;
+      border-radius: 5px !important;
+      background-color: transparent !important;
+      cursor: pointer !important;
+      position: relative !important;
+      box-sizing: border-box !important;
+      margin: 0 !important;
+      padding: 4px !important;
+    }
+
+    .redacto-checkbox-large:checked {
+      background-color: #4f87ff !important;
+      border-color: #4f87ff !important;
+    }
+
+    .redacto-checkbox-small:checked {
+      background-color: #4f87ff !important;
+      border-color: #4f87ff !important;
+    }
+
+    .redacto-checkbox-large:checked::after {
+      content: '' !important;
+      position: absolute !important;
+      left: 50% !important;
+      top: 50% !important;
+      transform: translate(-50%, -50%) rotate(45deg) !important;
+      width: 4px !important;
+      height: 8px !important;
+      border: solid white !important;
+      border-width: 0 2px 2px 0 !important;
+      box-sizing: border-box !important;
+    }
+
+    .redacto-checkbox-small:checked::after {
+      content: '' !important;
+      position: absolute !important;
+      left: 50% !important;
+      top: 50% !important;
+      transform: translate(-50%, -50%) rotate(45deg) !important;
+      width: 3px !important;
+      height: 6px !important;
+      border: solid white !important;
+      border-width: 0 1.5px 1.5px 0 !important;
+      box-sizing: border-box !important;
+    }
+
+    .redacto-checkbox-large:focus {
+      outline: 2px solid #4f87ff !important;
+      outline-offset: 2px !important;
+    }
+
+    .redacto-checkbox-small:focus {
+      outline: 2px solid #4f87ff !important;
+      outline-offset: 2px !important;
+    }
+  `;
+  document.head.appendChild(style);
+  stylesInjected = true;
+};
+
 // src/RedactoNoticeConsent/RedactoNoticeConsent.tsx
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var RedactoNoticeConsent = ({
   noticeId,
   accessToken,
   refreshToken,
+  baseUrl,
   language = "en",
-  blockUI = false,
+  blockUI = true,
   onAccept,
   onDecline,
   onError,
-  settings
+  settings,
+  applicationId
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s;
   const [content, setContent] = useState2(null);
   const [isLoading, setIsLoading] = useState2(true);
   const [isSubmitting, setIsSubmitting] = useState2(false);
+  const [isRefreshingToken, setIsRefreshingToken] = useState2(false);
   const [isLanguageDropdownOpen, setIsLanguageDropdownOpen] = useState2(false);
   const [selectedLanguage, setSelectedLanguage] = useState2(language);
   const [collapsedPurposes, setCollapsedPurposes] = useState2({});
   const [selectedPurposes, setSelectedPurposes] = useState2({});
   const [selectedDataElements, setSelectedDataElements] = useState2({});
   const [hasAlreadyConsented, setHasAlreadyConsented] = useState2(false);
+  const [errorMessage, setErrorMessage] = useState2(null);
+  const [fetchError, setFetchError] = useState2(null);
+  const modalRef = useRef(null);
+  const firstFocusableRef = useRef(null);
+  const lastFocusableRef = useRef(null);
+  const MAX_REFRESH_ATTEMPTS = 1;
+  const [refreshAttempts, setRefreshAttempts] = useState2(0);
   const isMobile = useMediaQuery("(max-width: 768px)");
   const responsiveStyles = useMemo(
     () => ({
@@ -523,6 +667,28 @@ var RedactoNoticeConsent = ({
       },
       middleSection: {
         paddingRight: isMobile ? "10px" : "15px"
+      },
+      errorDialog: {
+        padding: isMobile ? "12px" : "16px",
+        maxWidth: isMobile ? "100%" : "400px",
+        marginBottom: isMobile ? "16px" : "20px"
+      },
+      errorTitle: {
+        fontSize: isMobile ? "16px" : "18px",
+        margin: isMobile ? "0 0 8px 0" : "0 0 12px 0"
+      },
+      errorMessage: {
+        fontSize: isMobile ? "12px" : "14px",
+        margin: isMobile ? "0 0 12px 0" : "0 0 16px 0"
+      },
+      errorButton: {
+        padding: isMobile ? "6px 12px" : "8px 16px",
+        fontSize: isMobile ? "12px" : "14px"
+      },
+      closeButton: {
+        top: isMobile ? "4px" : "8px",
+        right: isMobile ? "4px" : "8px",
+        padding: isMobile ? "2px" : "4px"
       }
     }),
     [isMobile]
@@ -574,65 +740,83 @@ var RedactoNoticeConsent = ({
     }
     return defaultText;
   };
-  useEffect2(() => {
-    const fetchNotice = async () => {
-      setIsLoading(true);
-      try {
-        const consentContentData = await fetchConsentContent({
-          noticeId,
-          accessToken,
-          refreshToken,
-          language
-        });
-        setContent(consentContentData.detail.active_config);
-        if (consentContentData.detail.active_config.default_language) {
-          setSelectedLanguage(
-            consentContentData.detail.active_config.default_language
-          );
-        }
-        const initialCollapsedState = consentContentData.detail.active_config.purposes.reduce(
-          (acc, purpose) => ({
-            ...acc,
-            [purpose.uuid]: true
-          }),
-          {}
-        );
-        setCollapsedPurposes(initialCollapsedState);
-        const initialPurposeState = consentContentData.detail.active_config.purposes.reduce(
-          (acc, purpose) => {
-            return {
-              ...acc,
-              [purpose.uuid]: false
-              // Initialize all purposes as unchecked
-            };
-          },
-          {}
-        );
-        setSelectedPurposes(initialPurposeState);
-        const initialDataElementState = consentContentData.detail.active_config.purposes.reduce(
-          (acc, purpose) => {
-            purpose.data_elements.forEach((element) => {
-              const combinedId = `${purpose.uuid}-${element.uuid}`;
-              acc[combinedId] = false;
-            });
-            return acc;
-          },
-          {}
+  const fetchNotice = async () => {
+    setIsLoading(true);
+    setFetchError(null);
+    try {
+      const consentContentData = await fetchConsentContent({
+        noticeId,
+        accessToken,
+        refreshToken,
+        baseUrl,
+        language,
+        specific_uuid: applicationId
+      });
+      setContent(consentContentData.detail.active_config);
+      if (consentContentData.detail.active_config.default_language) {
+        setSelectedLanguage(
+          consentContentData.detail.active_config.default_language
         );
-        setSelectedDataElements(initialDataElementState);
-      } catch (err) {
-        console.error(err);
-        if (err.status === 409) {
-          setHasAlreadyConsented(true);
-        } else {
-          onError == null ? void 0 : onError(err);
-        }
-      } finally {
-        setIsLoading(false);
       }
-    };
+      const initialCollapsedState = consentContentData.detail.active_config.purposes.reduce(
+        (acc, purpose) => ({
+          ...acc,
+          [purpose.uuid]: true
+        }),
+        {}
+      );
+      setCollapsedPurposes(initialCollapsedState);
+      const initialPurposeState = consentContentData.detail.active_config.purposes.reduce(
+        (acc, purpose) => {
+          return {
+            ...acc,
+            [purpose.uuid]: false
+          };
+        },
+        {}
+      );
+      setSelectedPurposes(initialPurposeState);
+      const initialDataElementState = consentContentData.detail.active_config.purposes.reduce(
+        (acc, purpose) => {
+          purpose.data_elements.forEach((element) => {
+            const combinedId = `${purpose.uuid}-${element.uuid}`;
+            acc[combinedId] = false;
+          });
+          return acc;
+        },
+        {}
+      );
+      setSelectedDataElements(initialDataElementState);
+    } catch (err) {
+      console.error(err);
+      const error = err;
+      setFetchError(error);
+      if (error.status === 401 && refreshAttempts < MAX_REFRESH_ATTEMPTS) {
+        setRefreshAttempts((c) => c + 1);
+        setIsRefreshingToken(true);
+        onError == null ? void 0 : onError(error);
+      } else if (error.status === 409) {
+        setHasAlreadyConsented(true);
+      } else {
+        onError == null ? void 0 : onError(error);
+      }
+    } finally {
+      setIsLoading(false);
+      setIsRefreshingToken(false);
+    }
+  };
+  useEffect2(() => {
+    injectCheckboxStyles();
     fetchNotice();
-  }, [noticeId, accessToken, refreshToken, language, onError]);
+  }, [
+    noticeId,
+    accessToken,
+    refreshToken,
+    language,
+    onError,
+    applicationId,
+    isRefreshingToken
+  ]);
   const togglePurposeCollapse = (purposeUuid) => {
     setCollapsedPurposes((prev) => ({
       ...prev,
@@ -693,9 +877,11 @@ var RedactoNoticeConsent = ({
   const handleAccept = async () => {
     try {
       setIsSubmitting(true);
+      setErrorMessage(null);
       if (content) {
         await submitConsentEvent({
           accessToken,
+          baseUrl,
           noticeUuid: content.notice_uuid,
           purposes: content.purposes.map((purpose) => ({
             ...purpose,
@@ -705,12 +891,19 @@ var RedactoNoticeConsent = ({
               selected: element.required ? true : selectedDataElements[`${purpose.uuid}-${element.uuid}`] || false
             }))
           })),
-          declined: false
+          declined: false,
+          meta_data: applicationId ? { specific_uuid: applicationId } : void 0
         });
       }
       onAccept == null ? void 0 : onAccept();
     } catch (error) {
       console.error("Error submitting consent:", error);
+      const err = error;
+      if (err.status === 500) {
+        setErrorMessage(
+          "An error occurred while submitting your consent. Please try again later."
+        );
+      }
       onError == null ? void 0 : onError(error);
     } finally {
       setIsSubmitting(false);
@@ -735,7 +928,7 @@ var RedactoNoticeConsent = ({
   };
   const acceptButtonStyle = {
     ...buttonStyle,
-    backgroundColor: ((_b = (_a = settings == null ? void 0 : settings.button) == null ? void 0 : _a.accept) == null ? void 0 : _b.backgroundColor) || "#4f87ff",
+    backgroundColor: ((_b = (_a = settings == null ? void 0 : settings.button) == null ? void 0 : _a.accept) == null ? void 0 : _b.backgroundColor) || (content == null ? void 0 : content.primary_color) || "#4f87ff",
     color: ((_d = (_c = settings == null ? void 0 : settings.button) == null ? void 0 : _c.accept) == null ? void 0 : _d.textColor) || "#ffffff"
   };
   const declineButtonStyle = {
@@ -745,18 +938,18 @@ var RedactoNoticeConsent = ({
     borderColor: (settings == null ? void 0 : settings.borderColor) || "#d0d5dd"
   };
   const linkStyle = {
-    color: ((_i = settings == null ? void 0 : settings.link) == null ? void 0 : _i.color) || "#4f87ff"
+    color: (settings == null ? void 0 : settings.link) || (content == null ? void 0 : content.secondary_color) || "#4f87ff"
   };
   const languageSelectorStyle = {
     borderRadius: (settings == null ? void 0 : settings.borderRadius) || "8px",
     borderColor: (settings == null ? void 0 : settings.borderColor) || "#d0d5dd",
-    backgroundColor: ((_k = (_j = settings == null ? void 0 : settings.button) == null ? void 0 : _j.language) == null ? void 0 : _k.backgroundColor) || "#ffffff",
-    color: ((_m = (_l = settings == null ? void 0 : settings.button) == null ? void 0 : _l.language) == null ? void 0 : _m.textColor) || "#344054"
+    backgroundColor: ((_j = (_i = settings == null ? void 0 : settings.button) == null ? void 0 : _i.language) == null ? void 0 : _j.backgroundColor) || "#ffffff",
+    color: ((_l = (_k = settings == null ? void 0 : settings.button) == null ? void 0 : _k.language) == null ? void 0 : _l.textColor) || "#344054"
   };
   const selectedLanguageItemStyle = {
     ...languageSelectorStyle,
-    backgroundColor: ((_o = (_n = settings == null ? void 0 : settings.button) == null ? void 0 : _n.language) == null ? void 0 : _o.selectedBackgroundColor) || "#f3f4f6",
-    color: ((_q = (_p = settings == null ? void 0 : settings.button) == null ? void 0 : _p.language) == null ? void 0 : _q.selectedTextColor) || "#344054",
+    backgroundColor: ((_n = (_m = settings == null ? void 0 : settings.button) == null ? void 0 : _m.language) == null ? void 0 : _n.selectedBackgroundColor) || "#f3f4f6",
+    color: ((_p = (_o = settings == null ? void 0 : settings.button) == null ? void 0 : _o.language) == null ? void 0 : _p.selectedTextColor) || "#344054",
     fontWeight: 600
   };
   const headingStyle = {
@@ -768,11 +961,61 @@ var RedactoNoticeConsent = ({
   const sectionStyle = {
     backgroundColor: (settings == null ? void 0 : settings.backgroundColor) || "#ffffff"
   };
+  const handleCloseError = () => {
+    setErrorMessage(null);
+  };
+  useEffect2(() => {
+    const handleKeyDown = (event) => {
+      if (!modalRef.current) return;
+      const focusableElements = modalRef.current.querySelectorAll(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      );
+      if (!focusableElements.length) return;
+      if (event.key === "Escape") {
+        handleDecline();
+      }
+      if (event.key === "Tab") {
+        const firstElement = focusableElements[0];
+        const lastElement = focusableElements[focusableElements.length - 1];
+        if (event.shiftKey) {
+          if (document.activeElement === firstElement) {
+            event.preventDefault();
+            lastElement.focus();
+          }
+        } else {
+          if (document.activeElement === lastElement) {
+            event.preventDefault();
+            firstElement.focus();
+          }
+        }
+      }
+    };
+    const modal = modalRef.current;
+    modal == null ? void 0 : modal.addEventListener("keydown", handleKeyDown);
+    if (modal && !isLoading) {
+      const focusableElements = modal.querySelectorAll(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      );
+      const firstElement = focusableElements[0];
+      firstElement == null ? void 0 : firstElement.focus();
+    }
+    return () => {
+      modal == null ? void 0 : modal.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isLoading, handleDecline]);
   return /* @__PURE__ */ jsx(Fragment, { children: hasAlreadyConsented ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
-    blockUI && /* @__PURE__ */ jsx("div", { style: styles.overlay, "aria-hidden": "true" }),
+    blockUI && /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: styles.overlay,
+        "aria-hidden": "true",
+        role: "presentation"
+      }
+    ),
     /* @__PURE__ */ jsx(
       "div",
       {
+        ref: modalRef,
         style: {
           ...styles.modal,
           ...responsiveStyles.modal,
@@ -781,10 +1024,187 @@ var RedactoNoticeConsent = ({
         role: "dialog",
         "aria-modal": "true",
         "aria-labelledby": "privacy-notice-title",
-        children: isLoading ? /* @__PURE__ */ jsxs("div", { style: styles.loadingContainer, children: [
+        "aria-describedby": "privacy-notice-description",
+        tabIndex: -1,
+        children: isLoading || isRefreshingToken ? /* @__PURE__ */ jsxs("div", { style: styles.loadingContainer, children: [
           /* @__PURE__ */ jsx("div", { style: styles.loadingSpinner }),
-          /* @__PURE__ */ jsx("p", { style: { ...styles.privacyText, ...textStyle }, children: "Loading..." })
-        ] }) : /* @__PURE__ */ jsxs("div", { style: { ...styles.content, ...responsiveStyles.content }, children: [
+          /* @__PURE__ */ jsx("p", { style: { ...styles.privacyText, ...textStyle }, children: isRefreshingToken ? "Refreshing session..." : "Loading..." })
+        ] }) : fetchError ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              ...styles.content,
+              ...responsiveStyles.content,
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
+              textAlign: "center",
+              padding: "40px 20px"
+            },
+            children: /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  color: "#DC2626",
+                  padding: responsiveStyles.errorDialog.padding,
+                  borderRadius: "8px",
+                  marginBottom: responsiveStyles.errorDialog.marginBottom,
+                  width: "100%",
+                  maxWidth: responsiveStyles.errorDialog.maxWidth,
+                  position: "relative"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: handleDecline,
+                      style: {
+                        position: "absolute",
+                        top: responsiveStyles.closeButton.top,
+                        right: responsiveStyles.closeButton.right,
+                        background: "none",
+                        border: "none",
+                        color: "#DC2626",
+                        cursor: "pointer",
+                        padding: responsiveStyles.closeButton.padding,
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center"
+                      },
+                      "aria-label": "Close error message",
+                      children: /* @__PURE__ */ jsx(
+                        "svg",
+                        {
+                          width: isMobile ? "14" : "16",
+                          height: isMobile ? "14" : "16",
+                          viewBox: "0 0 16 16",
+                          fill: "none",
+                          xmlns: "http://www.w3.org/2000/svg",
+                          "aria-hidden": "true",
+                          children: /* @__PURE__ */ jsx(
+                            "path",
+                            {
+                              d: "M12 4L4 12M4 4L12 12",
+                              stroke: "currentColor",
+                              strokeWidth: "2",
+                              strokeLinecap: "round",
+                              strokeLinejoin: "round"
+                            }
+                          )
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "h3",
+                    {
+                      style: {
+                        margin: responsiveStyles.errorTitle.margin,
+                        fontSize: responsiveStyles.errorTitle.fontSize,
+                        fontWeight: "600"
+                      },
+                      children: "Error Loading Consent Notice"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "p",
+                    {
+                      style: {
+                        margin: responsiveStyles.errorMessage.margin,
+                        fontSize: responsiveStyles.errorMessage.fontSize,
+                        lineHeight: "1.5"
+                      },
+                      children: fetchError.message || "Failed to load consent notice. Please try again."
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: fetchNotice,
+                      style: {
+                        backgroundColor: "#DC2626",
+                        color: "#FFFFFF",
+                        border: "none",
+                        padding: responsiveStyles.errorButton.padding,
+                        borderRadius: "6px",
+                        cursor: "pointer",
+                        fontSize: responsiveStyles.errorButton.fontSize,
+                        fontWeight: "500",
+                        transition: "background-color 0.2s"
+                      },
+                      onMouseOver: (e) => e.currentTarget.style.backgroundColor = "#B91C1C",
+                      onMouseOut: (e) => e.currentTarget.style.backgroundColor = "#DC2626",
+                      children: "Refresh"
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        ) : /* @__PURE__ */ jsxs("div", { style: { ...styles.content, ...responsiveStyles.content }, children: [
+          errorMessage && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              role: "alert",
+              style: {
+                backgroundColor: "#FEE2E2",
+                color: "#DC2626",
+                padding: "12px",
+                borderRadius: "6px",
+                marginBottom: "16px",
+                fontSize: "14px",
+                border: "1px solid #FCA5A5",
+                position: "relative",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between"
+              },
+              children: [
+                /* @__PURE__ */ jsx("span", { children: errorMessage }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: handleCloseError,
+                    style: {
+                      background: "none",
+                      border: "none",
+                      color: "#DC2626",
+                      cursor: "pointer",
+                      padding: "4px",
+                      marginLeft: "8px",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center"
+                    },
+                    "aria-label": "Close error message",
+                    children: /* @__PURE__ */ jsx(
+                      "svg",
+                      {
+                        width: "16",
+                        height: "16",
+                        viewBox: "0 0 16 16",
+                        fill: "none",
+                        xmlns: "http://www.w3.org/2000/svg",
+                        "aria-hidden": "true",
+                        children: /* @__PURE__ */ jsx(
+                          "path",
+                          {
+                            d: "M12 4L4 12M4 4L12 12",
+                            stroke: "currentColor",
+                            strokeWidth: "2",
+                            strokeLinecap: "round",
+                            strokeLinejoin: "round"
+                          }
+                        )
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          ),
           /* @__PURE__ */ jsxs("div", { style: { ...styles.topSection, ...sectionStyle }, children: [
             /* @__PURE__ */ jsxs("div", { style: styles.topLeft, children: [
               /* @__PURE__ */ jsx(
@@ -792,7 +1212,7 @@ var RedactoNoticeConsent = ({
                 {
                   style: styles.logo,
                   src: (content == null ? void 0 : content.logo_url) || redacto_logo_default,
-                  alt: "logo"
+                  alt: "Redacto Logo"
                 }
               ),
               /* @__PURE__ */ jsx(
@@ -812,6 +1232,7 @@ var RedactoNoticeConsent = ({
               /* @__PURE__ */ jsxs(
                 "button",
                 {
+                  ref: firstFocusableRef,
                   style: {
                     ...styles.topRight,
                     ...responsiveStyles.topRight,
@@ -820,6 +1241,7 @@ var RedactoNoticeConsent = ({
                   onClick: toggleLanguageDropdown,
                   "aria-expanded": isLanguageDropdownOpen,
                   "aria-haspopup": "listbox",
+                  "aria-controls": "language-listbox",
                   children: [
                     selectedLanguage,
                     /* @__PURE__ */ jsx(
@@ -830,11 +1252,12 @@ var RedactoNoticeConsent = ({
                         height: "16",
                         viewBox: "0 0 16 16",
                         fill: "none",
-                        stroke: ((_s = (_r = settings == null ? void 0 : settings.button) == null ? void 0 : _r.language) == null ? void 0 : _s.textColor) || "currentColor",
+                        stroke: ((_r = (_q = settings == null ? void 0 : settings.button) == null ? void 0 : _q.language) == null ? void 0 : _r.textColor) || "currentColor",
                         strokeWidth: "2",
                         strokeLinecap: "round",
                         strokeLinejoin: "round",
                         style: { flexShrink: 0, marginLeft: "4px" },
+                        "aria-hidden": "true",
                         children: /* @__PURE__ */ jsx("path", { d: "M4 6l4 4 4-4" })
                       }
                     )
@@ -844,6 +1267,7 @@ var RedactoNoticeConsent = ({
               isLanguageDropdownOpen && /* @__PURE__ */ jsx(
                 "ul",
                 {
+                  id: "language-listbox",
                   style: {
                     ...styles.languageDropdown,
                     ...languageSelectorStyle
@@ -874,6 +1298,7 @@ var RedactoNoticeConsent = ({
           /* @__PURE__ */ jsxs(
             "div",
             {
+              id: "privacy-notice-description",
               style: {
                 ...styles.middleSection,
                 ...responsiveStyles.middleSection,
@@ -900,6 +1325,7 @@ var RedactoNoticeConsent = ({
                           href: (content == null ? void 0 : content.privacy_policy_url) || "#",
                           target: "_blank",
                           rel: "noopener noreferrer",
+                          "aria-label": "Privacy Policy (opens in new tab)",
                           children: [
                             "[",
                             getTranslatedText(
@@ -918,7 +1344,9 @@ var RedactoNoticeConsent = ({
                         {
                           style: { ...styles.link, ...linkStyle },
                           href: (content == null ? void 0 : content.sub_processors_url) || "#",
-                          target: "",
+                          target: "_blank",
+                          rel: "noopener noreferrer",
+                          "aria-label": "Vendors List (opens in new tab)",
                           children: [
                             "[",
                             getTranslatedText(
@@ -947,13 +1375,23 @@ var RedactoNoticeConsent = ({
                     )
                   }
                 ),
-                /* @__PURE__ */ jsx("div", { style: styles.optionsContainer, children: (_t = content == null ? void 0 : content.purposes) == null ? void 0 : _t.map((purpose) => /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("div", { style: styles.optionsContainer, children: (_s = content == null ? void 0 : content.purposes) == null ? void 0 : _s.map((purpose) => /* @__PURE__ */ jsxs("div", { children: [
                   /* @__PURE__ */ jsxs("div", { style: styles.optionItem, children: [
                     /* @__PURE__ */ jsxs(
                       "div",
                       {
                         style: styles.optionLeft,
                         onClick: () => togglePurposeCollapse(purpose.uuid),
+                        role: "button",
+                        tabIndex: 0,
+                        "aria-expanded": !collapsedPurposes[purpose.uuid],
+                        "aria-controls": `purpose-${purpose.uuid}`,
+                        onKeyDown: (e) => {
+                          if (e.key === "Enter" || e.key === " ") {
+                            e.preventDefault();
+                            togglePurposeCollapse(purpose.uuid);
+                          }
+                        },
                         children: [
                           /* @__PURE__ */ jsx(
                             "div",
@@ -980,6 +1418,7 @@ var RedactoNoticeConsent = ({
                                     transform: !collapsedPurposes[purpose.uuid] ? "rotate(90deg)" : "rotate(0deg)",
                                     transition: "transform 0.3s ease"
                                   },
+                                  "aria-hidden": "true",
                                   children: /* @__PURE__ */ jsx("path", { d: "M1 1L6 6L1 11" })
                                 }
                               )
@@ -1023,61 +1462,79 @@ var RedactoNoticeConsent = ({
                     /* @__PURE__ */ jsx(
                       "input",
                       {
-                        style: styles.checkboxLarge,
+                        className: "redacto-checkbox-large",
                         type: "checkbox",
                         checked: selectedPurposes[purpose.uuid] || false,
-                        onChange: () => handlePurposeCheckboxChange(purpose.uuid)
+                        onChange: () => handlePurposeCheckboxChange(purpose.uuid),
+                        "aria-label": `Select all data elements for ${getTranslatedText(
+                          `purposes.name`,
+                          purpose.name,
+                          purpose.uuid
+                        )}`
                       }
                     )
                   ] }),
-                  !collapsedPurposes[purpose.uuid] && purpose.data_elements && purpose.data_elements.length > 0 && /* @__PURE__ */ jsx("div", { style: styles.dataElementsContainer, children: purpose.data_elements.map((dataElement) => /* @__PURE__ */ jsxs(
+                  !collapsedPurposes[purpose.uuid] && purpose.data_elements && purpose.data_elements.length > 0 && /* @__PURE__ */ jsx(
                     "div",
                     {
-                      style: styles.dataElementItem,
-                      children: [
-                        /* @__PURE__ */ jsxs(
-                          "span",
-                          {
-                            style: {
-                              ...styles.dataElementText,
-                              ...responsiveStyles.dataElementText,
-                              ...textStyle
-                            },
-                            children: [
-                              getTranslatedText(
-                                `data_elements.name`,
-                                dataElement.name,
-                                dataElement.uuid
-                              ),
-                              dataElement.required && /* @__PURE__ */ jsx(
-                                "span",
-                                {
-                                  style: {
-                                    color: "red",
-                                    marginLeft: "4px"
-                                  },
-                                  children: "*"
-                                }
-                              )
-                            ]
-                          }
-                        ),
-                        /* @__PURE__ */ jsx(
-                          "input",
-                          {
-                            style: styles.checkboxSmall,
-                            type: "checkbox",
-                            checked: selectedDataElements[`${purpose.uuid}-${dataElement.uuid}`] || false,
-                            onChange: () => handleDataElementCheckboxChange(
-                              dataElement.uuid,
-                              purpose.uuid
+                      id: `purpose-${purpose.uuid}`,
+                      style: styles.dataElementsContainer,
+                      children: purpose.data_elements.map((dataElement) => /* @__PURE__ */ jsxs(
+                        "div",
+                        {
+                          style: styles.dataElementItem,
+                          children: [
+                            /* @__PURE__ */ jsxs(
+                              "span",
+                              {
+                                style: {
+                                  ...styles.dataElementText,
+                                  ...responsiveStyles.dataElementText,
+                                  ...textStyle
+                                },
+                                children: [
+                                  getTranslatedText(
+                                    `data_elements.name`,
+                                    dataElement.name,
+                                    dataElement.uuid
+                                  ),
+                                  dataElement.required && /* @__PURE__ */ jsx(
+                                    "span",
+                                    {
+                                      style: {
+                                        color: "red",
+                                        marginLeft: "4px"
+                                      },
+                                      "aria-label": "required",
+                                      children: "*"
+                                    }
+                                  )
+                                ]
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              "input",
+                              {
+                                className: "redacto-checkbox-small",
+                                type: "checkbox",
+                                checked: selectedDataElements[`${purpose.uuid}-${dataElement.uuid}`] || false,
+                                onChange: () => handleDataElementCheckboxChange(
+                                  dataElement.uuid,
+                                  purpose.uuid
+                                ),
+                                "aria-label": `Select ${getTranslatedText(
+                                  `data_elements.name`,
+                                  dataElement.name,
+                                  dataElement.uuid
+                                )}${dataElement.required ? " (required)" : ""}`
+                              }
                             )
-                          }
-                        )
-                      ]
-                    },
-                    dataElement.uuid
-                  )) })
+                          ]
+                        },
+                        dataElement.uuid
+                      ))
+                    }
+                  )
                 ] }, purpose.uuid)) })
               ]
             }
@@ -1094,6 +1551,7 @@ var RedactoNoticeConsent = ({
                 /* @__PURE__ */ jsx(
                   "button",
                   {
+                    ref: lastFocusableRef,
                     style: {
                       ...styles.button,
                       ...responsiveStyles.button,
@@ -1103,6 +1561,10 @@ var RedactoNoticeConsent = ({
                     },
                     onClick: handleAccept,
                     disabled: acceptDisabled,
+                    "aria-label": getTranslatedText(
+                      "confirm_button_text",
+                      (content == null ? void 0 : content.confirm_button_text) || "Accept"
+                    ),
                     children: isSubmitting ? "Processing..." : getTranslatedText(
                       "confirm_button_text",
                       (content == null ? void 0 : content.confirm_button_text) || "Accept"
@@ -1120,6 +1582,10 @@ var RedactoNoticeConsent = ({
                     },
                     onClick: handleDecline,
                     disabled: isSubmitting,
+                    "aria-label": getTranslatedText(
+                      "decline_button_text",
+                      (content == null ? void 0 : content.decline_button_text) || "Decline"
+                    ),
                     children: isSubmitting ? "Processing..." : getTranslatedText(
                       "decline_button_text",
                       (content == null ? void 0 : content.decline_button_text) || "Decline"