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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redacto.io/consent-sdk-react",
-  "version": "4.0.0",
+  "version": "5.1.0",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -9,12 +9,17 @@
       "types": "./dist/index.d.ts",
       "require": "./dist/index.cjs",
       "import": "./dist/index.mjs"
+    },
+    "./privacy-center": {
+      "types": "./dist/privacy-center.d.ts",
+      "require": "./dist/privacy-center.cjs",
+      "import": "./dist/privacy-center.mjs"
     }
   },
   "keywords": [],
   "author": "",
   "license": "Apache-2.0",
-  "description": "",
+  "description": "React SDK for Redacto consent notices and privacy center",
   "publishConfig": {
     "access": "public"
   },
@@ -24,6 +29,7 @@
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
+    "@types/lodash": "^4.17.0",
     "@types/react": "^19.1.3",
     "@types/react-dom": "^19.1.3",
     "@vitest/coverage-v8": "3.1.3",
@@ -34,7 +40,45 @@
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17 || ^18 || ^19",
-    "react-dom": "^16.8.0 || ^17 || ^18 || ^19"
+    "react-dom": "^16.8.0 || ^17 || ^18 || ^19",
+    "@tanstack/react-query": "^5.0.0",
+    "@tanstack/react-table": "^8.0.0",
+    "i18next": "^23.0.0",
+    "i18next-browser-languagedetector": "^7.0.0",
+    "react-i18next": "^13.0.0",
+    "lucide-react": ">=0.300.0",
+    "react-icons": "^5.0.0",
+    "dayjs": "^1.11.0",
+    "lodash": "^4.17.0"
+  },
+  "peerDependenciesMeta": {
+    "@tanstack/react-query": {
+      "optional": true
+    },
+    "@tanstack/react-table": {
+      "optional": true
+    },
+    "i18next": {
+      "optional": true
+    },
+    "i18next-browser-languagedetector": {
+      "optional": true
+    },
+    "react-i18next": {
+      "optional": true
+    },
+    "lucide-react": {
+      "optional": true
+    },
+    "react-icons": {
+      "optional": true
+    },
+    "dayjs": {
+      "optional": true
+    },
+    "lodash": {
+      "optional": true
+    }
   },
   "scripts": {
     "build": "tsup",

package/src/RedactoNoticeConsent/RedactoNoticeConsent.tsx

@@ -32,6 +32,7 @@ import logo from "./assets/redacto-logo.png";
 
 // Constants
 import { DPO_AUDIO_ELEMENT_MAP } from "./constants";
+import { toBcp47Code, toNativeLabel } from "./language-codes";
 
 // Utility imports
 import { injectCheckboxStyles } from "./injectStyles";
@@ -2151,6 +2152,7 @@ export const RedactoNoticeConsent = ({
             };
           }),
           declined: false,
+          language: toBcp47Code(selectedLanguage),
           meta_data: applicationId
             ? { specific_uuid: applicationId }
             : undefined,
@@ -3778,9 +3780,9 @@ export const 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)}`}
                         >
-                          {selectedLanguage}
+                          {toNativeLabel(selectedLanguage)}
                           <svg
                             xmlns="http://www.w3.org/2000/svg"
                             width="16"
@@ -3827,9 +3829,9 @@ export const RedactoNoticeConsent = ({
                             role="option"
                             aria-selected={selectedLanguage === lang}
                             tabIndex={0}
-                            aria-label={`Select ${lang} language`}
+                            aria-label={`Select ${toNativeLabel(lang)} language`}
                           >
-                            {lang}
+                            {toNativeLabel(lang)}
                           </li>
                         ))}
                       </ul>

package/src/RedactoNoticeConsent/api/index.ts

@@ -143,6 +143,7 @@ export const submitConsentEvent = async ({
   noticeUuid,
   purposes,
   declined,
+  language,
   meta_data,
   guardianVerificationReference,
   selfDeclaredAdult,
@@ -190,6 +191,7 @@ export const submitConsentEvent = async ({
     select_all_mandatory: false,
     source: "WEB",
     declined: Boolean(declined),
+    language: language || undefined,
     meta_data: meta_data ? { specific_uuid: meta_data.specific_uuid, minor_age: meta_data.minor_age } : undefined,
     guardian_verification_reference: guardianVerificationReference,
     self_declared_adult: selfDeclaredAdult,

package/src/RedactoNoticeConsent/api/types.ts

@@ -170,6 +170,7 @@ export type ConsentEventPayload = {
   select_all_mandatory: boolean;
   source?: string;
   declined?: boolean;
+  language?: string;
   meta_data?: {
     specific_uuid?: string;
     minor_age?: number;
@@ -201,6 +202,7 @@ export type SubmitConsentEventParams = {
   noticeUuid: string;
   purposes: Array<Purpose>;
   declined: boolean;
+  language?: string;
   meta_data?: {
     specific_uuid?: string;
     minor_age?: number;

package/src/RedactoNoticeConsent/components/DigiLockerCallback.tsx

@@ -1,9 +1,9 @@
 /**
  * DigiLockerCallback Component
- * 
+ *
  * Standalone component for handling DigiLocker redirect callbacks.
  * Clients should add this to their routing (e.g., /digilocker-callback page).
- * 
+ *
  * Usage in Next.js:
  * ```tsx
  * // pages/digilocker-callback.tsx
@@ -18,10 +18,10 @@
  * ```tsx
  * <Route path="/digilocker-callback" element={<DigiLockerCallback accessToken={"<token>"} />} />
  * ```
- * 
+ *
  * URL Parameters expected from redirect:
  * - session_token: The verification session token
- * - status: "verified" | "failed" | "expired"  
+ * - status: "verified" | "failed" | "expired"
  * - verification_reference: (if verified) Reference for consent submission
  * - error_code: (if failed) Error code like GUARDIAN_UNDER_18, SESSION_EXPIRED, etc.
  */
@@ -131,7 +131,7 @@ export const DigiLockerCallback: React.FC<DigiLockerCallbackProps> = ({
         setStatus("success");
         setMessage("Guardian verified successfully! Redirecting...");
         onSuccess?.(verificationReference);
-        
+
         // If in iframe, postMessage to parent instead of redirecting
         if (isInIframe && window.parent) {
           window.parent.postMessage(
@@ -144,7 +144,7 @@ export const DigiLockerCallback: React.FC<DigiLockerCallbackProps> = ({
           );
           return;
         }
-        
+
         redirectToOriginalPage(originalUrl, "verified", verificationReference);
         return;
       }
@@ -170,16 +170,16 @@ export const DigiLockerCallback: React.FC<DigiLockerCallbackProps> = ({
           );
           return;
         }
-        
+
         redirectToOriginalPage(originalUrl, urlStatus);
         return;
       }
 
       // 4. If no status in URL, poll the backend for verification status
       setMessage("Processing verification...");
-      
+
       const apiBaseUrl = baseUrl || storedBaseUrl;
-      
+
       const response = await verifyGuardianStatus({
         accessToken,
         baseUrl: apiBaseUrl,
@@ -336,11 +336,11 @@ export const DigiLockerCallback: React.FC<DigiLockerCallbackProps> = ({
     } catch (error) {
       console.error("DigiLocker callback error:", error);
       setStatus("error");
-      
+
       const err = error as Error;
       setMessage("Verification failed");
       setErrorDetail(err.message || "An error occurred during verification");
-      
+
       onError?.(err);
 
       // Try to redirect back even on error
@@ -373,106 +373,157 @@ export const DigiLockerCallback: React.FC<DigiLockerCallbackProps> = ({
     }
   }, []);
 
-  // Inline styles for the callback page
+  // --- Styles ---
+
   const containerStyle: React.CSSProperties = {
     display: "flex",
     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: React.CSSProperties = {
     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: React.CSSProperties = {
+    width: "72px",
+    height: "72px",
+    margin: "0 auto 28px",
+    position: "relative",
+  };
+
   const spinnerStyle: React.CSSProperties = {
-    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: React.CSSProperties = {
-    width: "64px",
-    height: "64px",
+  const iconContainerStyle: React.CSSProperties = {
+    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: React.CSSProperties = {
-    ...iconStyle,
+    ...iconContainerStyle,
     backgroundColor: "#d1fae5",
     color: "#059669",
   };
 
   const errorIconStyle: React.CSSProperties = {
-    ...iconStyle,
+    ...iconContainerStyle,
     backgroundColor: "#fee2e2",
     color: "#dc2626",
   };
 
   const titleStyle: React.CSSProperties = {
-    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: React.CSSProperties = {
     fontSize: "14px",
     color: "#6b7280",
-    marginBottom: "8px",
+    marginBottom: "0",
+    lineHeight: 1.6,
+  };
+
+  const subtextStyle: React.CSSProperties = {
+    fontSize: "13px",
+    color: "#9ca3af",
+    marginTop: "16px",
     lineHeight: 1.5,
   };
 
   const errorDetailStyle: React.CSSProperties = {
     fontSize: "13px",
     color: "#dc2626",
-    marginTop: "12px",
-    padding: "12px",
+    marginTop: "16px",
+    padding: "12px 16px",
     backgroundColor: "#fef2f2",
-    borderRadius: "6px",
+    borderRadius: "10px",
     border: "1px solid #fecaca",
+    lineHeight: 1.5,
+    textAlign: "left",
   };
 
   const buttonStyle: React.CSSProperties = {
-    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%",
   };
 
+  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 (
+    <>
+      <style dangerouslySetInnerHTML={{ __html: keyframesStyle }} />
       <div style={containerStyle}>
         <div style={cardStyle}>
           {status === "processing" && (
             <>
-              <div style={spinnerStyle} />
+              <div style={spinnerContainerStyle}>
+                <div style={spinnerStyle} />
+              </div>
               <h2 style={titleStyle}>Processing Verification</h2>
               <p style={messageStyle}>{message}</p>
-              <p style={{ ...messageStyle, fontSize: "12px", color: "#9ca3af" }}>
+              <p style={subtextStyle}>
                 Please wait while we verify your guardian's identity...
               </p>
             </>
@@ -480,22 +531,36 @@ export const DigiLockerCallback: React.FC<DigiLockerCallbackProps> = ({
 
           {status === "success" && (
             <>
-              <div style={successIconStyle}>
-                <svg
-                  width="32"
-                  height="32"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                >
-                  <polyline points="20 6 9 17 4 12" />
-                </svg>
+              <div style={{ position: "relative", width: "72px", height: "72px", margin: "0 auto 28px" }}>
+                {/* Pulse ring */}
+                <div style={{
+                  position: "absolute",
+                  inset: "-8px",
+                  borderRadius: "50%",
+                  border: "2px solid #d1fae5",
+                  animation: "redacto-dl-pulse 1.5s ease-out infinite",
+                }} />
+                <div style={successIconStyle}>
+                  <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 }}
+                  >
+                    <polyline points="20 6 9 17 4 12" />
+                  </svg>
+                </div>
               </div>
               <h2 style={titleStyle}>Verification Successful</h2>
               <p style={messageStyle}>{message}</p>
+              <p style={subtextStyle}>
+                You will be redirected automatically.
+              </p>
             </>
           )}
 
@@ -503,12 +568,12 @@ export const DigiLockerCallback: React.FC<DigiLockerCallbackProps> = ({
             <>
               <div style={errorIconStyle}>
                 <svg
-                  width="32"
-                  height="32"
+                  width="30"
+                  height="30"
                   viewBox="0 0 24 24"
                   fill="none"
                   stroke="currentColor"
-                  strokeWidth="2"
+                  strokeWidth="2.5"
                   strokeLinecap="round"
                   strokeLinejoin="round"
                 >
@@ -530,6 +595,7 @@ export const DigiLockerCallback: React.FC<DigiLockerCallbackProps> = ({
           )}
         </div>
       </div>
+    </>
   );
 };
 

package/src/RedactoNoticeConsent/language-codes.ts

@@ -0,0 +1,97 @@
+/**
+ * Maps English language names to "Native script (English)" display labels.
+ * English itself is kept as-is; all others show the native script first.
+ */
+export const LANGUAGE_NATIVE_LABELS: Record<string, string> = {
+  English: "English",
+  Assamese: "অসমীয়া (Assamese)",
+  Bengali: "বাংলা (Bengali)",
+  Bhojpuri: "भोजपुरी (Bhojpuri)",
+  Bodo: "बड़ो (Bodo)",
+  Dogri: "डोगरी (Dogri)",
+  Gujarati: "ગુજરાતી (Gujarati)",
+  Hindi: "हिन्दी (Hindi)",
+  Kannada: "ಕನ್ನಡ (Kannada)",
+  Kashmiri: "كٲشُر (Kashmiri)",
+  "Goan Konkani": "कोंकणी (Goan Konkani)",
+  Maithili: "मैथिली (Maithili)",
+  Malayalam: "മലയാളം (Malayalam)",
+  Manipuri: "ꯃꯩꯇꯩꯂꯣꯟ (Manipuri)",
+  Marathi: "मराठी (Marathi)",
+  Nepali: "नेपाली (Nepali)",
+  Odia: "ଓଡ଼ିଆ (Odia)",
+  Punjabi: "ਪੰਜਾਬੀ (Punjabi)",
+  Sanskrit: "संस्कृतम् (Sanskrit)",
+  Santali: "ᱥᱟᱱᱛᱟᱲᱤ (Santali)",
+  Sindhi: "سنڌي (Sindhi)",
+  Tamil: "தமிழ் (Tamil)",
+  Telugu: "తెలుగు (Telugu)",
+  Urdu: "اردو (Urdu)",
+};
+
+/** Returns the "Native (English)" display label for a language name, falling back to the name itself. */
+export const toNativeLabel = (name: string): string =>
+  LANGUAGE_NATIVE_LABELS[name] ?? name;
+
+/**
+ * Maps display language names (as used in supported_languages_and_translations
+ * keys and the language dropdown) to BCP-47 codes for the submit-consent payload.
+ *
+ * Covers English + the 22 languages in the 8th Schedule of the Indian Constitution
+ * (DPDP Act 2023, Sections 5 & 6).
+ */
+const LANGUAGE_NAME_TO_BCP47: Record<string, string> = {
+  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",
+};
+
+const KNOWN_BCP47_CODES = new Set(Object.values(LANGUAGE_NAME_TO_BCP47));
+
+/**
+ * Convert a language display name or code to a BCP-47 code.
+ * Handles these cases:
+ *  1. Display name ("Punjabi") → BCP-47 ("pa")
+ *  2. Already a BCP-47 tag, including region/script subtags ("pa", "en-US", "zh-Hans") → returned as-is
+ *  3. Unknown value → falls back to "en"
+ */
+export const toBcp47Code = (language: string): string => {
+  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;
+    }
+  }
+  // Pass through well-formed BCP-47 tags with subtags (e.g. en-US, pa-IN, zh-Hans).
+  if (/^[A-Za-z]{2,3}(?:-[A-Za-z0-9]{2,8})*$/.test(language)) {
+    return language;
+  }
+  return "en";
+};

package/src/RedactoNoticeConsentInline/RedactoNoticeConsentInline.tsx

@@ -87,9 +87,6 @@ const RedactoConsentInlineComponent = ({
     onValidationChange?.(areAllRequiredElementsChecked);
   }, [areAllRequiredElementsChecked, onValidationChange]);
 
-  const acceptDisabled =
-    isSubmitting || !areAllRequiredElementsChecked || !accessToken;
-
   useEffect(() => {
     if (hasAlreadyConsented) {
       onAccept?.();

package/src/RedactoNoticeConsentInline/api/index.ts

@@ -12,7 +12,6 @@ export const fetchConsentContent = async ({
   workspace_uuid,
   notice_uuid,
   baseUrl,
-  language = "en",
   specific_uuid,
 }: FetchConsentContentParams): Promise<ConsentContent> => {
   try {

package/src/RedactoPrivacyCenter/PrivacyCenterActivityPage.tsx

@@ -0,0 +1,19 @@
+import { useEffect } from 'react';
+import i18n from './lib/i18n';
+import ActivitiesList from './components/ActivitiesList';
+
+export function PrivacyCenterActivityPage() {
+  useEffect(() => {
+    if (!i18n.language) {
+      i18n.changeLanguage('en');
+    }
+  }, []);
+
+  return (
+    <div style={{ width: '100%' }}>
+      <div style={{ paddingTop: '0.5rem' }}>
+        <ActivitiesList />
+      </div>
+    </div>
+  );
+}