@redacto.io/consent-sdk-react 4.0.0 → 5.1.0

package/dist/index.js

@@ -134,6 +134,7 @@ var submitConsentEvent = async ({
   noticeUuid,
   purposes,
   declined,
+  language,
   meta_data,
   guardianVerificationReference,
   selfDeclaredAdult,
@@ -171,6 +172,7 @@ var submitConsentEvent = async ({
     select_all_mandatory: false,
     source: "WEB",
     declined: Boolean(declined),
+    language: language || void 0,
     meta_data: meta_data ? { specific_uuid: meta_data.specific_uuid, minor_age: meta_data.minor_age } : void 0,
     guardian_verification_reference: guardianVerificationReference,
     self_declared_adult: selfDeclaredAdult
@@ -449,6 +451,83 @@ var DPO_AUDIO_ELEMENT_MAP = [
   { audioKey: "dpo_anchor_text_audio_url", elementId: "dpo-dpo-link" }
 ];
 
+// src/RedactoNoticeConsent/language-codes.ts
+var LANGUAGE_NATIVE_LABELS = {
+  English: "English",
+  Assamese: "\u0985\u09B8\u09AE\u09C0\u09AF\u09BC\u09BE (Assamese)",
+  Bengali: "\u09AC\u09BE\u0982\u09B2\u09BE (Bengali)",
+  Bhojpuri: "\u092D\u094B\u091C\u092A\u0941\u0930\u0940 (Bhojpuri)",
+  Bodo: "\u092C\u0921\u093C\u094B (Bodo)",
+  Dogri: "\u0921\u094B\u0917\u0930\u0940 (Dogri)",
+  Gujarati: "\u0A97\u0AC1\u0A9C\u0AB0\u0ABE\u0AA4\u0AC0 (Gujarati)",
+  Hindi: "\u0939\u093F\u0928\u094D\u0926\u0940 (Hindi)",
+  Kannada: "\u0C95\u0CA8\u0CCD\u0CA8\u0CA1 (Kannada)",
+  Kashmiri: "\u0643\u0672\u0634\u064F\u0631 (Kashmiri)",
+  "Goan Konkani": "\u0915\u094B\u0902\u0915\u0923\u0940 (Goan Konkani)",
+  Maithili: "\u092E\u0948\u0925\u093F\u0932\u0940 (Maithili)",
+  Malayalam: "\u0D2E\u0D32\u0D2F\u0D3E\u0D33\u0D02 (Malayalam)",
+  Manipuri: "\uABC3\uABE9\uABC7\uABE9\uABC2\uABE3\uABDF (Manipuri)",
+  Marathi: "\u092E\u0930\u093E\u0920\u0940 (Marathi)",
+  Nepali: "\u0928\u0947\u092A\u093E\u0932\u0940 (Nepali)",
+  Odia: "\u0B13\u0B21\u0B3C\u0B3F\u0B06 (Odia)",
+  Punjabi: "\u0A2A\u0A70\u0A1C\u0A3E\u0A2C\u0A40 (Punjabi)",
+  Sanskrit: "\u0938\u0902\u0938\u094D\u0915\u0943\u0924\u092E\u094D (Sanskrit)",
+  Santali: "\u1C65\u1C5F\u1C71\u1C5B\u1C5F\u1C72\u1C64 (Santali)",
+  Sindhi: "\u0633\u0646\u068C\u064A (Sindhi)",
+  Tamil: "\u0BA4\u0BAE\u0BBF\u0BB4\u0BCD (Tamil)",
+  Telugu: "\u0C24\u0C46\u0C32\u0C41\u0C17\u0C41 (Telugu)",
+  Urdu: "\u0627\u0631\u062F\u0648 (Urdu)"
+};
+var toNativeLabel = (name) => {
+  var _a;
+  return (_a = LANGUAGE_NATIVE_LABELS[name]) != null ? _a : name;
+};
+var LANGUAGE_NAME_TO_BCP47 = {
+  English: "en",
+  Assamese: "as",
+  Bengali: "bn",
+  Bhojpuri: "bho",
+  Bodo: "brx",
+  Dogri: "doi",
+  Gujarati: "gu",
+  Hindi: "hi",
+  Kannada: "kn",
+  Kashmiri: "ks",
+  "Goan Konkani": "gom",
+  Maithili: "mai",
+  Malayalam: "ml",
+  Manipuri: "mni-Mtei",
+  Marathi: "mr",
+  Nepali: "ne",
+  Odia: "or",
+  Punjabi: "pa",
+  Sanskrit: "sa",
+  Santali: "sat",
+  Sindhi: "sd",
+  Tamil: "ta",
+  Telugu: "te",
+  Urdu: "ur"
+};
+var KNOWN_BCP47_CODES = new Set(Object.values(LANGUAGE_NAME_TO_BCP47));
+var toBcp47Code = (language) => {
+  if (LANGUAGE_NAME_TO_BCP47[language]) {
+    return LANGUAGE_NAME_TO_BCP47[language];
+  }
+  if (KNOWN_BCP47_CODES.has(language)) {
+    return language;
+  }
+  const lower = language.toLowerCase();
+  for (const [name, code] of Object.entries(LANGUAGE_NAME_TO_BCP47)) {
+    if (name.toLowerCase() === lower) {
+      return code;
+    }
+  }
+  if (/^[A-Za-z]{2,3}(?:-[A-Za-z0-9]{2,8})*$/.test(language)) {
+    return language;
+  }
+  return "en";
+};
+
 // src/RedactoNoticeConsent/injectStyles.ts
 var stylesInjected = false;
 var injectCheckboxStyles = () => {
@@ -2837,6 +2916,7 @@ var RedactoNoticeConsent = ({
             };
           }),
           declined: false,
+          language: toBcp47Code(selectedLanguage),
           meta_data: applicationId ? { specific_uuid: applicationId } : void 0,
           guardianVerificationReference: verificationReference || void 0,
           selfDeclaredAdult: selfDeclaredAdult || void 0,
@@ -4118,9 +4198,9 @@ var RedactoNoticeConsent = ({
                         "aria-expanded": isLanguageDropdownOpen,
                         "aria-haspopup": "listbox",
                         "aria-controls": "language-listbox",
-                        "aria-label": `Select language. Current language: ${selectedLanguage}`,
+                        "aria-label": `Select language. Current language: ${toNativeLabel(selectedLanguage)}`,
                         children: [
-                          selectedLanguage,
+                          toNativeLabel(selectedLanguage),
                           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                             "svg",
                             {
@@ -4167,8 +4247,8 @@ var RedactoNoticeConsent = ({
                       role: "option",
                       "aria-selected": selectedLanguage === lang,
                       tabIndex: 0,
-                      "aria-label": `Select ${lang} language`,
-                      children: lang
+                      "aria-label": `Select ${toNativeLabel(lang)} language`,
+                      children: toNativeLabel(lang)
                     },
                     lang
                   ))
@@ -4527,7 +4607,6 @@ var fetchConsentContent2 = async ({
   workspace_uuid,
   notice_uuid,
   baseUrl,
-  language = "en",
   specific_uuid
 }) => {
   try {
@@ -5104,7 +5183,6 @@ var RedactoConsentInlineComponent = ({
   (0, import_react4.useEffect)(() => {
     onValidationChange == null ? void 0 : onValidationChange(areAllRequiredElementsChecked);
   }, [areAllRequiredElementsChecked, onValidationChange]);
-  const acceptDisabled = isSubmitting || !areAllRequiredElementsChecked || !accessToken;
   (0, import_react4.useEffect)(() => {
     if (hasAlreadyConsented) {
       onAccept == null ? void 0 : onAccept();
@@ -5831,138 +5909,195 @@ var DigiLockerCallback = ({
     alignItems: "center",
     justifyContent: "center",
     minHeight: "100vh",
-    backgroundColor: "#f9fafb",
+    backgroundColor: "#f8fafc",
     fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
-    padding: "20px",
+    padding: "24px",
     boxSizing: "border-box"
   };
   const cardStyle = {
     backgroundColor: "#ffffff",
-    borderRadius: "12px",
-    boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
-    padding: "40px",
+    borderRadius: "16px",
+    boxShadow: "0 1px 3px rgba(0, 0, 0, 0.08), 0 8px 30px rgba(0, 0, 0, 0.06)",
+    padding: "48px 40px 40px",
     textAlign: "center",
-    maxWidth: "400px",
+    maxWidth: "420px",
     width: "100%"
   };
+  const spinnerContainerStyle = {
+    width: "72px",
+    height: "72px",
+    margin: "0 auto 28px",
+    position: "relative"
+  };
   const spinnerStyle = {
-    width: "48px",
-    height: "48px",
-    border: "4px solid #e5e7eb",
-    borderTopColor: "#3b82f6",
+    width: "72px",
+    height: "72px",
+    border: "3px solid #e5e7eb",
+    borderTopColor: "#4f87ff",
     borderRadius: "50%",
-    animation: "spin 1s linear infinite",
-    margin: "0 auto 24px"
+    animation: "redacto-dl-spin 0.8s linear infinite",
+    boxSizing: "border-box"
   };
-  const iconStyle = {
-    width: "64px",
-    height: "64px",
+  const iconContainerStyle = {
+    width: "72px",
+    height: "72px",
     borderRadius: "50%",
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    margin: "0 auto 24px"
+    margin: "0 auto 28px",
+    animation: "redacto-dl-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards",
+    position: "relative"
   };
   const successIconStyle = {
-    ...iconStyle,
+    ...iconContainerStyle,
     backgroundColor: "#d1fae5",
     color: "#059669"
   };
   const errorIconStyle = {
-    ...iconStyle,
+    ...iconContainerStyle,
     backgroundColor: "#fee2e2",
     color: "#dc2626"
   };
   const titleStyle = {
-    fontSize: "20px",
-    fontWeight: 600,
+    fontSize: "22px",
+    fontWeight: 700,
     color: "#111827",
-    margin: "0 0 12px 0"
+    margin: "0 0 8px 0",
+    letterSpacing: "-0.01em"
   };
   const messageStyle = {
     fontSize: "14px",
     color: "#6b7280",
-    marginBottom: "8px",
+    marginBottom: "0",
+    lineHeight: 1.6
+  };
+  const subtextStyle = {
+    fontSize: "13px",
+    color: "#9ca3af",
+    marginTop: "16px",
     lineHeight: 1.5
   };
   const errorDetailStyle = {
     fontSize: "13px",
     color: "#dc2626",
-    marginTop: "12px",
-    padding: "12px",
+    marginTop: "16px",
+    padding: "12px 16px",
     backgroundColor: "#fef2f2",
-    borderRadius: "6px",
-    border: "1px solid #fecaca"
+    borderRadius: "10px",
+    border: "1px solid #fecaca",
+    lineHeight: 1.5,
+    textAlign: "left"
   };
   const buttonStyle = {
-    marginTop: "20px",
-    padding: "10px 24px",
-    backgroundColor: "#3b82f6",
+    marginTop: "24px",
+    padding: "12px 28px",
+    backgroundColor: "#4f87ff",
     color: "#ffffff",
     border: "none",
-    borderRadius: "6px",
-    fontSize: "14px",
-    fontWeight: 500,
+    borderRadius: "10px",
+    fontSize: "15px",
+    fontWeight: 600,
     cursor: "pointer",
-    transition: "background-color 0.2s"
+    transition: "background-color 0.2s, transform 0.15s",
+    width: "100%"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: containerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: cardStyle, children: [
-    status === "processing" && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: spinnerStyle }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h2", { style: titleStyle, children: "Processing Verification" }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: messageStyle, children: message }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: { ...messageStyle, fontSize: "12px", color: "#9ca3af" }, children: "Please wait while we verify your guardian's identity..." })
-    ] }),
-    status === "success" && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: successIconStyle, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        "svg",
-        {
-          width: "32",
-          height: "32",
-          viewBox: "0 0 24 24",
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: "2",
-          strokeLinecap: "round",
-          strokeLinejoin: "round",
-          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("polyline", { points: "20 6 9 17 4 12" })
-        }
-      ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h2", { style: titleStyle, children: "Verification Successful" }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: messageStyle, children: message })
-    ] }),
-    status === "error" && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: errorIconStyle, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-        "svg",
-        {
-          width: "32",
-          height: "32",
-          viewBox: "0 0 24 24",
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: "2",
-          strokeLinecap: "round",
-          strokeLinejoin: "round",
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h2", { style: titleStyle, children: "Verification Failed" }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: messageStyle, children: message }),
-      errorDetail && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: errorDetailStyle, children: errorDetail }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        "button",
-        {
-          className: "redacto-dl-retry-btn",
-          style: buttonStyle,
-          onClick: handleRetry,
-          children: "Try Again"
-        }
-      )
-    ] })
-  ] }) });
+  const keyframesStyle = `
+    @keyframes redacto-dl-spin {
+      to { transform: rotate(360deg); }
+    }
+    @keyframes redacto-dl-pop {
+      0% { transform: scale(0.3); opacity: 0; }
+      60% { transform: scale(1.08); opacity: 1; }
+      100% { transform: scale(1); opacity: 1; }
+    }
+    @keyframes redacto-dl-check {
+      0% { stroke-dashoffset: 24; }
+      100% { stroke-dashoffset: 0; }
+    }
+    @keyframes redacto-dl-pulse {
+      0%, 100% { transform: scale(1); opacity: 0.6; }
+      50% { transform: scale(1.15); opacity: 0; }
+    }
+    .redacto-dl-retry-btn:hover {
+      background-color: #3d6fdb !important;
+      transform: translateY(-1px);
+    }
+    .redacto-dl-retry-btn:active {
+      transform: translateY(0);
+    }
+  `;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("style", { dangerouslySetInnerHTML: { __html: keyframesStyle } }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: containerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: cardStyle, children: [
+      status === "processing" && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: spinnerContainerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: spinnerStyle }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h2", { style: titleStyle, children: "Processing Verification" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: messageStyle, children: message }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: subtextStyle, children: "Please wait while we verify your guardian's identity..." })
+      ] }),
+      status === "success" && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { position: "relative", width: "72px", height: "72px", margin: "0 auto 28px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: {
+            position: "absolute",
+            inset: "-8px",
+            borderRadius: "50%",
+            border: "2px solid #d1fae5",
+            animation: "redacto-dl-pulse 1.5s ease-out infinite"
+          } }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: successIconStyle, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "svg",
+            {
+              width: "30",
+              height: "30",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2.5",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              style: { strokeDasharray: 24, animation: "redacto-dl-check 0.4s ease-out 0.3s forwards", strokeDashoffset: 24 },
+              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("polyline", { points: "20 6 9 17 4 12" })
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h2", { style: titleStyle, children: "Verification Successful" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: messageStyle, children: message }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: subtextStyle, children: "You will be redirected automatically." })
+      ] }),
+      status === "error" && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: errorIconStyle, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          "svg",
+          {
+            width: "30",
+            height: "30",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h2", { style: titleStyle, children: "Verification Failed" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: messageStyle, children: message }),
+        errorDetail && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: errorDetailStyle, children: errorDetail }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "button",
+          {
+            className: "redacto-dl-retry-btn",
+            style: buttonStyle,
+            onClick: handleRetry,
+            children: "Try Again"
+          }
+        )
+      ] })
+    ] }) })
+  ] });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {