@redacto.io/consent-sdk-react 3.5.0 → 3.6.0

package/src/RedactoNoticeConsent/components/DigiLockerCallback.tsx

@@ -0,0 +1,602 @@
+/**
+ * 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
+ * import { DigiLockerCallback } from '@redacto.io/consent-sdk-react';
+ *
+ * export default function DigiLockerCallbackPage() {
+ *   return <DigiLockerCallback accessToken={"<token>"} />;
+ * }
+ * ```
+ *
+ * Usage in React Router:
+ * ```tsx
+ * <Route path="/digilocker-callback" element={<DigiLockerCallback accessToken={"<token>"} />} />
+ * ```
+ *
+ * URL Parameters expected from redirect:
+ * - session_token: The verification session token
+ * - 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.
+ */
+
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { verifyGuardianStatus } from "../api";
+import type { DigiLockerCallbackProps, GuardianVerificationErrorCode } from "../api/types";
+import { injectCheckboxStyles } from "../injectStyles";
+import {
+    clearConsentState,
+    getConsentState,
+    updateConsentState,
+} from "../services/storage";
+
+type CallbackStatus = "processing" | "success" | "error";
+
+export const DigiLockerCallback: React.FC<DigiLockerCallbackProps> = ({
+  accessToken: propAccessToken,
+  baseUrl,
+  onSuccess,
+  onError,
+}) => {
+  const [status, setStatus] = useState<CallbackStatus>("processing");
+  const [message, setMessage] = useState("Verifying your guardian...");
+  const [errorDetail, setErrorDetail] = useState<string | null>(null);
+  const retryTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const redirectTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const isMountedRef = useRef(true);
+
+  const getErrorMessage = (errorCode?: GuardianVerificationErrorCode): string => {
+    switch (errorCode) {
+      case "GUARDIAN_UNDER_18":
+        return "Guardian verification failed: The guardian must be 18 years or older.";
+      case "SESSION_EXPIRED":
+        return "Verification session has expired. Please restart the verification process.";
+      case "TOKEN_FAILED":
+        return "DigiLocker authentication failed. Please try again.";
+      case "DIGILOCKER_AUTH_FAILED":
+        return "DigiLocker authorization was cancelled or failed. Please try again.";
+      case "NO_AUTH_CODE":
+        return "Missing authorization code from DigiLocker. Please try again.";
+      default:
+        return "Verification failed. Please try again.";
+    }
+  };
+
+  const redirectToOriginalPage = useCallback(
+    (
+      originalUrl: string,
+      verificationResult: "verified" | "failed" | "expired",
+      verificationReference?: string
+    ) => {
+      // Update persisted state with verification result
+      updateConsentState({
+        verificationResult,
+        verificationReference,
+        flowState: verificationResult === "verified" ? "consent-form" : "error",
+      });
+
+      // Redirect back to original page
+      redirectTimeoutRef.current = setTimeout(() => {
+        window.location.href = originalUrl;
+      }, 1500);
+    },
+    []
+  );
+
+  const handleCallback = useCallback(async () => {
+    try {
+      // 1. Extract URL parameters (new format from backend)
+      const params = new URLSearchParams(window.location.search);
+      const sessionToken = params.get("session_token");
+      const urlStatus = params.get("status") as "verified" | "failed" | "expired" | null;
+      const verificationReference = params.get("verification_reference");
+      const errorCode = params.get("error_code") as GuardianVerificationErrorCode | null;
+
+      // 2. Retrieve persisted state (optional — popup mode may not have saved state)
+      const persistedState = getConsentState();
+
+      const originalUrl = persistedState?.originalUrl || "/";
+      const storedBaseUrl = persistedState?.baseUrl;
+      const storedSessionToken = persistedState?.sessionToken;
+
+      // Use accessToken from props (never stored in sessionStorage for security)
+      const accessToken = propAccessToken;
+      if (!accessToken) {
+        throw new Error("Access token not provided. Please pass accessToken as a prop.");
+      }
+
+      // Use session token from URL (source of truth) or stored state as fallback
+      const activeSessionToken = sessionToken || storedSessionToken;
+      if (!activeSessionToken) {
+        throw new Error("Session token not found. Please restart the verification process.");
+      }
+
+      // Check if we're in an iframe (for iframe mode)
+      // Wrapped in try-catch: cross-origin iframes throw SecurityError on window.top access
+      let isInIframe = false;
+      try {
+        isInIframe = window.self !== window.top;
+      } catch {
+        isInIframe = true;
+      }
+
+      // 3. If status is already in URL params (direct redirect from backend)
+      if (urlStatus === "verified" && verificationReference) {
+        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(
+            {
+              type: "DIGILOCKER_VERIFICATION_STATUS",
+              status: "verified",
+              verificationReference,
+            },
+            window.location.origin
+          );
+          return;
+        }
+
+        redirectToOriginalPage(originalUrl, "verified", verificationReference);
+        return;
+      }
+
+      if (urlStatus === "failed" || urlStatus === "expired") {
+        const urlErrorCode = errorCode ?? undefined;
+        const errorMessage = getErrorMessage(urlErrorCode);
+        setStatus("error");
+        setMessage("Verification failed");
+        setErrorDetail(errorMessage);
+        onError?.(new Error(errorMessage), urlErrorCode);
+
+        // If in iframe, postMessage to parent instead of redirecting
+        if (isInIframe && window.parent) {
+          window.parent.postMessage(
+            {
+              type: "DIGILOCKER_VERIFICATION_STATUS",
+              status: urlStatus,
+              errorCode: urlErrorCode,
+              error: errorMessage,
+            },
+            window.location.origin
+          );
+          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,
+        sessionToken: activeSessionToken,
+      });
+      if (!isMountedRef.current) return;
+
+      if (response.status === "verified") {
+        // Use top-level verification_reference first, fall back to guardian_details
+        const verificationRef = response.verification_reference || response.guardian_details?.verification_reference || undefined;
+
+        if (!verificationRef) {
+          setStatus("error");
+          setMessage("Verification failed");
+          setErrorDetail("Verification completed but no reference received. Please try again.");
+          onError?.(new Error("Verification completed but no reference received."));
+          redirectToOriginalPage(originalUrl, "failed");
+          return;
+        }
+
+        setStatus("success");
+        setMessage("Guardian verified successfully! Redirecting...");
+        onSuccess?.(verificationRef);
+
+        // If in iframe, postMessage to parent instead of redirecting
+        if (isInIframe && window.parent) {
+          window.parent.postMessage(
+            {
+              type: "DIGILOCKER_VERIFICATION_STATUS",
+              status: "verified",
+              verificationReference: verificationRef,
+            },
+            window.location.origin
+          );
+          return;
+        }
+
+        redirectToOriginalPage(originalUrl, "verified", verificationRef);
+      } else if (response.status === "failed" || response.status === "expired") {
+        const responseErrorCode = response.error_code ?? undefined;
+        const errorMessage = response.error || getErrorMessage(responseErrorCode);
+        setStatus("error");
+        setMessage("Verification failed");
+        setErrorDetail(errorMessage);
+        onError?.(new Error(errorMessage), responseErrorCode);
+
+        // If in iframe, postMessage to parent instead of redirecting
+        if (isInIframe && window.parent) {
+          window.parent.postMessage(
+            {
+              type: "DIGILOCKER_VERIFICATION_STATUS",
+              status: response.status,
+              errorCode: responseErrorCode,
+              error: errorMessage,
+            },
+            window.location.origin
+          );
+          return;
+        }
+
+        redirectToOriginalPage(originalUrl, response.status);
+      } else {
+        // Still in progress - this shouldn't happen on callback page
+        // but handle it gracefully
+        setMessage("Verification is still in progress. Please wait...");
+        // Poll again after a short delay
+        // Retry with exponential backoff before giving up
+        const MAX_RETRIES = 3;
+        let retryCount = 0;
+
+        const attemptRetry = () => {
+          retryCount++;
+          const delay = 3000 * Math.pow(2, retryCount - 1); // 3s, 6s, 12s
+          retryTimeoutRef.current = setTimeout(async () => {
+            if (!isMountedRef.current) return;
+            try {
+              const retryResponse = await verifyGuardianStatus({
+                accessToken,
+                baseUrl: apiBaseUrl,
+                sessionToken: activeSessionToken,
+              });
+              if (!isMountedRef.current) return;
+
+              const retryRef = retryResponse.verification_reference || retryResponse.guardian_details?.verification_reference || undefined;
+
+              if (retryResponse.status === "verified" && retryRef) {
+                setStatus("success");
+                setMessage("Guardian verified successfully! Redirecting...");
+                onSuccess?.(retryRef);
+
+                if (isInIframe && window.parent) {
+                  window.parent.postMessage(
+                    {
+                      type: "DIGILOCKER_VERIFICATION_STATUS",
+                      status: "verified",
+                      verificationReference: retryRef,
+                    },
+                    window.location.origin
+                  );
+                  return;
+                }
+
+                redirectToOriginalPage(originalUrl, "verified", retryRef);
+              } else if (retryResponse.status === "failed" || retryResponse.status === "expired") {
+                const retryErrorCode = retryResponse.error_code ?? undefined;
+                const retryErrorMessage = retryResponse.error || getErrorMessage(retryErrorCode) || "Verification could not be completed. Please try again.";
+                setStatus("error");
+                setMessage("Verification failed");
+                setErrorDetail(retryErrorMessage);
+                onError?.(new Error(retryErrorMessage), retryErrorCode);
+
+                if (isInIframe && window.parent) {
+                  window.parent.postMessage(
+                    {
+                      type: "DIGILOCKER_VERIFICATION_STATUS",
+                      status: retryResponse.status,
+                      errorCode: retryErrorCode,
+                      error: retryErrorMessage,
+                    },
+                    window.location.origin
+                  );
+                  return;
+                }
+
+                redirectToOriginalPage(originalUrl, retryResponse.status);
+              } else if (retryCount < MAX_RETRIES) {
+                setMessage("Verification taking longer than expected. Please wait...");
+                attemptRetry();
+              } else {
+                const timeoutMessage = "Verification could not be completed in time. Please try again.";
+                setStatus("error");
+                setMessage("Verification failed");
+                setErrorDetail(timeoutMessage);
+                onError?.(new Error(timeoutMessage));
+                redirectToOriginalPage(originalUrl, "failed");
+              }
+            } catch (retryErr) {
+              if (!isMountedRef.current) return;
+              if (retryCount < MAX_RETRIES) {
+                attemptRetry();
+              } else {
+                setStatus("error");
+                setMessage("Verification failed");
+                setErrorDetail((retryErr as Error).message);
+                onError?.(retryErr as Error);
+                redirectToOriginalPage(originalUrl, "failed");
+              }
+            }
+          }, delay);
+        };
+
+        attemptRetry();
+      }
+    } 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
+      const persistedState = getConsentState();
+      if (persistedState?.originalUrl) {
+        redirectTimeoutRef.current = setTimeout(() => {
+          redirectToOriginalPage(persistedState.originalUrl, "failed");
+        }, 3000);
+      }
+    }
+  }, [propAccessToken, baseUrl, onSuccess, onError, redirectToOriginalPage]);
+
+  useEffect(() => {
+    injectCheckboxStyles();
+    handleCallback();
+    return () => {
+      isMountedRef.current = false;
+      if (retryTimeoutRef.current) clearTimeout(retryTimeoutRef.current);
+      if (redirectTimeoutRef.current) clearTimeout(redirectTimeoutRef.current);
+    };
+  }, [handleCallback]);
+
+  const handleRetry = useCallback(() => {
+    const persistedState = getConsentState();
+    if (persistedState?.originalUrl) {
+      clearConsentState();
+      window.location.href = persistedState.originalUrl;
+    } else {
+      window.location.href = "/";
+    }
+  }, []);
+
+  // --- Styles ---
+
+  const containerStyle: React.CSSProperties = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    minHeight: "100vh",
+    backgroundColor: "#f8fafc",
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+    padding: "24px",
+    boxSizing: "border-box",
+  };
+
+  const cardStyle: React.CSSProperties = {
+    backgroundColor: "#ffffff",
+    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: "420px",
+    width: "100%",
+  };
+
+  const spinnerContainerStyle: React.CSSProperties = {
+    width: "72px",
+    height: "72px",
+    margin: "0 auto 28px",
+    position: "relative",
+  };
+
+  const spinnerStyle: React.CSSProperties = {
+    width: "72px",
+    height: "72px",
+    border: "3px solid #e5e7eb",
+    borderTopColor: "#4f87ff",
+    borderRadius: "50%",
+    animation: "redacto-dl-spin 0.8s linear infinite",
+    boxSizing: "border-box",
+  };
+
+  const iconContainerStyle: React.CSSProperties = {
+    width: "72px",
+    height: "72px",
+    borderRadius: "50%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    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 = {
+    ...iconContainerStyle,
+    backgroundColor: "#d1fae5",
+    color: "#059669",
+  };
+
+  const errorIconStyle: React.CSSProperties = {
+    ...iconContainerStyle,
+    backgroundColor: "#fee2e2",
+    color: "#dc2626",
+  };
+
+  const titleStyle: React.CSSProperties = {
+    fontSize: "22px",
+    fontWeight: 700,
+    color: "#111827",
+    margin: "0 0 8px 0",
+    letterSpacing: "-0.01em",
+  };
+
+  const messageStyle: React.CSSProperties = {
+    fontSize: "14px",
+    color: "#6b7280",
+    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: "16px",
+    padding: "12px 16px",
+    backgroundColor: "#fef2f2",
+    borderRadius: "10px",
+    border: "1px solid #fecaca",
+    lineHeight: 1.5,
+    textAlign: "left",
+  };
+
+  const buttonStyle: React.CSSProperties = {
+    marginTop: "24px",
+    padding: "12px 28px",
+    backgroundColor: "#4f87ff",
+    color: "#ffffff",
+    border: "none",
+    borderRadius: "10px",
+    fontSize: "15px",
+    fontWeight: 600,
+    cursor: "pointer",
+    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={spinnerContainerStyle}>
+                <div style={spinnerStyle} />
+              </div>
+              <h2 style={titleStyle}>Processing Verification</h2>
+              <p style={messageStyle}>{message}</p>
+              <p style={subtextStyle}>
+                Please wait while we verify your guardian's identity...
+              </p>
+            </>
+          )}
+
+          {status === "success" && (
+            <>
+              <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>
+            </>
+          )}
+
+          {status === "error" && (
+            <>
+              <div style={errorIconStyle}>
+                <svg
+                  width="30"
+                  height="30"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2.5"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <line x1="18" y1="6" x2="6" y2="18" />
+                  <line x1="6" y1="6" x2="18" y2="18" />
+                </svg>
+              </div>
+              <h2 style={titleStyle}>Verification Failed</h2>
+              <p style={messageStyle}>{message}</p>
+              {errorDetail && <p style={errorDetailStyle}>{errorDetail}</p>}
+              <button
+                className="redacto-dl-retry-btn"
+                style={buttonStyle}
+                onClick={handleRetry}
+              >
+                Try Again
+              </button>
+            </>
+          )}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default DigiLockerCallback;

package/src/RedactoNoticeConsent/components/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Consent SDK Components
+ * 
+ * Export reusable components for the consent flow.
+ */
+
+export { DigiLockerCallback } from "./DigiLockerCallback";

package/src/RedactoNoticeConsent/injectStyles.ts

@@ -133,6 +133,17 @@ export const injectCheckboxStyles = () => {
       outline: 3px solid #FFF9C4 !important;
       outline-offset: 2px !important;
     }
+
+    /* Spinner animation for verification screens */
+    @keyframes spin {
+      from { transform: rotate(0deg); }
+      to { transform: rotate(360deg); }
+    }
+
+    /* DigiLocker callback retry button hover */
+    .redacto-dl-retry-btn:hover {
+      background-color: #2563eb !important;
+    }
   `;
 
   document.head.appendChild(style);

package/src/RedactoNoticeConsent/language-codes.ts

@@ -0,0 +1,61 @@
+/**
+ * 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",
+  Bodo: "brx",
+  Dogri: "doi",
+  Gujarati: "gu",
+  Hindi: "hi",
+  Kannada: "kn",
+  Kashmiri: "ks",
+  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";
+};