@redacto.io/consent-sdk-react 10.0.0-beta.11 → 10.0.0-beta.12

package/src/RedactoNoticeConsent/components/DigiLockerCallback.tsx

@@ -1,602 +0,0 @@
-/**
- * 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

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

package/src/RedactoNoticeConsent/constants.ts

@@ -1,20 +0,0 @@
-import type { DpoInfoAudioKey } from "./api/types";
-
-/**
- * Maps DPO info audio URL keys to their corresponding DOM element IDs.
- * Used by both audioSequence and elementIdSequence builders to keep them in sync.
- * Order determines playback sequence: grievance → dp board → dpo.
- */
-export const DPO_AUDIO_ELEMENT_MAP: ReadonlyArray<{
-  audioKey: DpoInfoAudioKey;
-  elementId: string;
-}> = [
-  { audioKey: "grievance_text_audio_url", elementId: "dpo-grievance-text" },
-  { audioKey: "grievance_anchor_text_audio_url", elementId: "dpo-grievance-link" },
-  { audioKey: "grievance_email_connector_text_audio_url", elementId: "dpo-grievance-email-connector" },
-  { audioKey: "grievance_email_audio_url", elementId: "dpo-grievance-email" },
-  { audioKey: "dp_board_text_audio_url", elementId: "dpo-dp-board-text" },
-  { audioKey: "dp_board_anchor_text_audio_url", elementId: "dpo-dp-board-link" },
-  { audioKey: "dpo_text_audio_url", elementId: "dpo-dpo-text" },
-  { audioKey: "dpo_anchor_text_audio_url", elementId: "dpo-dpo-link" },
-] as const;

package/src/RedactoNoticeConsent/index.ts

@@ -1 +0,0 @@
-export { RedactoNoticeConsent as default } from "./RedactoNoticeConsent";