astra-sdk-web 1.1.12 → 1.1.14

package/src/components/kycModal.tsx

@@ -0,0 +1,551 @@
+import React, { useEffect, useRef, useState } from "react";
+import { toast } from "react-toastify";
+import VerificationSDK from "../VerificationSDK";
+import "./kycModal.css";
+
+// Simple QR Code generator using canvas
+const generateQRCode = (text: string, size: number = 120): string => {
+  const canvas = document.createElement('canvas');
+  const ctx = canvas.getContext('2d');
+  if (!ctx) return '';
+  
+  canvas.width = size;
+  canvas.height = size;
+  
+  // Simple QR-like pattern (for demo purposes)
+  // In production, use a proper QR code library like 'qrcode' or 'qr-scanner'
+  ctx.fillStyle = '#000000';
+  ctx.fillRect(0, 0, size, size);
+  
+  // Create a simple pattern that looks like a QR code
+  const moduleSize = size / 25;
+  for (let i = 0; i < 25; i++) {
+    for (let j = 0; j < 25; j++) {
+      if ((i + j) % 3 === 0 || (i * j) % 7 === 0) {
+        ctx.fillStyle = '#ffffff';
+        ctx.fillRect(i * moduleSize, j * moduleSize, moduleSize, moduleSize);
+      }
+    }
+  }
+  
+  // Add corner markers
+  ctx.fillStyle = '#000000';
+  ctx.fillRect(0, 0, moduleSize * 7, moduleSize * 7);
+  ctx.fillRect(0, 0, moduleSize * 3, moduleSize * 3);
+  ctx.fillRect(moduleSize * 4, 0, moduleSize * 3, moduleSize * 3);
+  ctx.fillRect(0, moduleSize * 4, moduleSize * 3, moduleSize * 3);
+  
+  return canvas.toDataURL();
+};
+
+interface KycModalClassNames {
+  backdrop?: string;
+  container?: string;
+  closeButton?: string;
+  title?: string;
+  input?: string;
+  statusBlock?: string;
+  error?: string;
+  loading?: string;
+}
+
+interface KycModalStyleOverrides {
+  backdrop?: React.CSSProperties;
+  container?: React.CSSProperties;
+  closeButton?: React.CSSProperties;
+  title?: React.CSSProperties;
+  input?: React.CSSProperties;
+  statusBlock?: React.CSSProperties;
+  error?: React.CSSProperties;
+  loading?: React.CSSProperties;
+}
+
+interface KycModalProps {
+  sdk: VerificationSDK;
+  onClose: () => void;// e.g., "PASSPORT", "ID_CARD"
+  classNames?: KycModalClassNames;
+  styles?: KycModalStyleOverrides;
+  defaultDocumentType?: string;  // Add this
+}
+
+type Step = "FACE" | "DOCUMENT" | "STATUS";
+
+export const KycModal: React.FC<KycModalProps> = ({ sdk, onClose, classNames, styles, defaultDocumentType = "CNIC" }: KycModalProps) => {
+  try { console.log('[KycModal] render'); } catch {}
+  // Merge SDK-provided defaults with component props (props win)
+  const uiDefaults = sdk.getUiConfig?.() || {};
+  const mergedClassNames = { ...(uiDefaults.classNames || {}), ...(classNames || {}) } as KycModalClassNames;
+  const mergedStyles = { ...(uiDefaults.styles || {}), ...(styles || {}) } as KycModalStyleOverrides;
+  const sessionId = sdk.getSessionId?.() || localStorage.getItem("kyc_session_id") || null;
+  const qrFromServer = sdk.getQrCodeUrl?.() || localStorage.getItem("kyc_qrcode_url") || null;
+  const mobileUrl = sessionId ? (() => {
+    const key = (sdk as any)?.getServerKey?.();
+    const origin = (typeof window !== 'undefined' && window.location && window.location.origin) ? window.location.origin : '';
+    return `${origin}/mobile-kyc/${sessionId}?mode=face${key ? `&key=${encodeURIComponent(key)}` : ""}`;
+  })() : null;
+  const showQr = Boolean(qrFromServer || sessionId);
+  try { console.log('[KycModal] computed', { sessionId, showQr, hasKey: Boolean((sdk as any)?.getServerKey?.()) }); } catch {}
+  const computedQrSrc = qrFromServer || (mobileUrl ? `https://api.qrserver.com/v1/create-qr-code/?size=220x220&data=${encodeURIComponent(mobileUrl)}` : "");
+  const [step, setStep] = useState<Step>("FACE");
+  const [loading, setLoading] = useState(false);
+  const [status, setStatus] = useState<any>(null);
+  const videoRef = useRef<HTMLVideoElement | null>(null);
+  const streamRef = useRef<MediaStream | null>(null);
+  const [cameraReady, setCameraReady] = useState(false);
+  const [toastMessage, setToastMessage] = useState<string | null>(null);
+  const [docType, setDocType] = useState<string>(defaultDocumentType);
+  const [docFileName, setDocFileName] = useState<string>("");
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+
+  // Map backend next_step/completed_steps to local Step
+  const mapStatusToStep = (response: any): Step | null => {
+    const data = response?.data ?? response ?? {};
+    const nextStepRaw: string | undefined = data?.next_step ?? data?.nextStep;
+    const completedSteps: string[] = Array.isArray(data?.completed_steps)
+      ? data.completed_steps
+      : (Array.isArray(data?.completedSteps) ? data.completedSteps : []);
+    const norm = (s: string) => String(s || "").toLowerCase().replace(/\s+/g, "_");
+    const next = nextStepRaw ? norm(nextStepRaw) : "";
+    if (next.includes("face")) return "FACE";
+    if (next.includes("doc")) return "DOCUMENT";
+    if (next.includes("status") || next.includes("result")) return "STATUS";
+    // Fallback using completed steps when next_step is missing
+    const cs = completedSteps.map(norm);
+    if (cs.includes("face_scan") && !cs.includes("document_upload")) return "DOCUMENT";
+    if (cs.includes("face_scan") && cs.includes("document_upload")) return "STATUS";
+    return null;
+  };
+
+  // Extract a human-friendly error from SDK/network errors
+  const getDisplayError = (err: unknown): string => {
+    const raw = (err && (err as any).message) ? String((err as any).message) : String(err || "");
+    // Try to extract JSON payload after a colon
+    const afterColon = raw.includes(":") ? raw.split(":").slice(1).join(":").trim() : raw;
+    try {
+      const parsed = JSON.parse(afterColon);
+      if (parsed && typeof parsed.message === "string") return parsed.message;
+    } catch {}
+    // Pull common phrases (e.g., "Face does not match") if present in raw
+    const match = raw.match(/(Face does not match[^\n]*)/i) || raw.match(/(Document[^\n]*failed[^\n]*)/i);
+    if (match && match[1]) return match[1];
+    // Fallback to trimmed raw message without the generic prefix
+    return afterColon.replace(/^document upload failed\s*/i, "").replace(/^face upload failed\s*/i, "").trim() || "Something went wrong";
+  };
+
+  const handleRetryDocument = () => {
+    setDocFileName("");
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+      fileInputRef.current.click();
+    }
+  };
+
+  // Auto-hide toast after 3 seconds
+  useEffect(() => {
+    if (!toastMessage) return;
+    const id = setTimeout(() => setToastMessage(null), 3000);
+    return () => clearTimeout(id);
+  }, [toastMessage]);
+
+  // Start camera when FACE step shows
+  useEffect(() => {
+    const startCamera = async () => {
+      try {
+        const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: "user" }, audio: false });
+        if (videoRef.current) {
+          videoRef.current.srcObject = stream;
+          await videoRef.current.play().catch(() => {});
+        }
+        streamRef.current = stream;
+        setCameraReady(true);
+      } catch (e: any) {
+        toast.error(e?.message || "Could not access camera");
+      }
+    };
+    if (step === "FACE") {
+      startCamera();
+    }
+    return () => {
+      // Stop camera when leaving screen/component
+      if (streamRef.current) {
+        streamRef.current.getTracks().forEach((t) => t.stop());
+        streamRef.current = null;
+      }
+      setCameraReady(false);
+    };
+  }, [step]);
+
+  // On each step, check session status; if expired, inform and close
+  useEffect(() => {
+    if (!sessionId) return; // avoid calling status without a session
+    let cancelled = false;
+    const checkStatus = async () => {
+      try {
+        const res: any = await sdk.getStatus(sdk?.getServerKey());
+        if (cancelled) return;
+        // Detect expired by explicit status or heuristics
+        const explicitStatus: string | undefined = res?.data?.status ?? res?.status;
+        const msg: string | undefined = res?.message;
+        const expiredFlag: boolean | undefined = res?.data?.expired ?? res?.expired;
+        const expiredAt: string | undefined = res?.data?.expired_at ?? res?.expired_at;
+        const expiredByDate = expiredAt ? new Date(expiredAt).getTime() < Date.now() : false;
+        const expiredByMsg = typeof msg === "string" && msg.toLowerCase().includes("expired");
+        if ((explicitStatus && explicitStatus.toUpperCase() === "EXPIRED") || expiredFlag || expiredByDate || expiredByMsg) {
+          setToastMessage("Session expired. Returning to previous screen...");
+          setTimeout(() => {
+            if (!cancelled) onClose();
+          }, 1200);
+        }
+        // Drive UI using next_step/completed_steps
+        const suggested = mapStatusToStep(res);
+        if (suggested && suggested !== step) {
+          setStep(suggested);
+          if (suggested === "STATUS") {
+            try {
+              const result = await sdk.getResult(sdk?.getServerKey());
+              setStatus(result);
+            } catch {
+              setStatus(res);
+            }
+          }
+        }
+      } catch (e: any) {
+        // If the server signals expiry via error message
+        const emsg = e?.message as string | undefined;
+        if (emsg && emsg.toLowerCase().includes("expired")) {
+          setToastMessage("Session expired. Returning to previous screen...");
+          setTimeout(() => {
+            if (!cancelled) onClose();
+          }, 1200);
+        }
+        // else ignore to avoid disrupting other flows
+      }
+    };
+    checkStatus();
+    return () => {
+      cancelled = true;
+    };
+  }, [step, sdk, onClose]);
+
+  // On mount, hydrate step from status so refresh returns to the correct place
+  useEffect(() => {
+    let cancelled = false;
+    const hydrate = async () => {
+      try {
+        const res = await sdk.getStatus(sdk?.getServerKey());
+        if (cancelled) return;
+        const suggested = mapStatusToStep(res);
+        if (suggested) {
+          setStep(suggested);
+          if (suggested === "STATUS") {
+            try {
+              const result = await sdk.getResult(sdk?.getServerKey());
+              setStatus(result);
+            } catch {
+              setStatus(res);
+            }
+          }
+        }
+      } catch {}
+    };
+    hydrate();
+    return () => { cancelled = true; };
+  }, []);
+
+  // Capture a frame from the camera and upload as base64
+  const handleFaceCapture = async () => {
+    if (!videoRef.current) return;
+    setLoading(true);
+    try {
+      const video = videoRef.current;
+      const canvas = document.createElement("canvas");
+      const width = video.videoWidth || 640;
+      const height = video.videoHeight || 480;
+      canvas.width = width;
+      canvas.height = height;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) throw new Error("Canvas not supported");
+      ctx.drawImage(video, 0, 0, width, height);
+      const dataUrl = canvas.toDataURL("image/jpeg", 0.92);
+      const base64 = dataUrl.split(",")[1] || dataUrl;
+      console.log("sdk from kycmodal",sdk,sdk?.getServerKey());
+      
+      await sdk.uploadFace(await (await fetch(dataUrl)).blob(), sdk?.getServerKey());
+       setStep("DOCUMENT");
+    } catch (err: any) {
+      const msg = getDisplayError(err) || "Face capture failed";
+      // If face already exists, do not proceed further
+      if (typeof msg === "string" && msg.toLowerCase().includes("face already registered")) {
+        toast.info("Face already registered. Please proceed later or use a different session.");
+      } else {
+        toast.error(msg);
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // Handle document upload
+  const handleDocumentUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (loading) return; // prevent concurrent uploads
+    if (!event.target.files?.[0]) return;
+    setDocFileName(event.target.files[0].name || "");
+    setLoading(true);
+
+    try {
+      const file = event.target.files[0];
+      // Single attempt only; user can click "Upload again" if it fails
+      await sdk.uploadDocument(file, docType, sdk?.getServerKey());
+
+      setStep("STATUS");
+      // Prefer final result if available, fallback to status
+      try {
+        const result = await sdk.getResult(sdk?.getServerKey());
+        setStatus(result);
+      } catch {
+        const res = await sdk.getStatus(sdk?.getServerKey());
+        setStatus(res);
+      }
+    } catch (err: any) {
+      const msg = getDisplayError(err);
+      if (msg && msg.toLowerCase().includes("document") && msg.toLowerCase().includes("already exists")) {
+        toast.info("Document already exists. Please do not upload again.");
+      } else {
+        toast.error(msg || "Document upload failed");
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className={`kyc-backdrop ${mergedClassNames?.backdrop || ""}`} style={mergedStyles?.backdrop}>
+      <div className={`kyc-container ${mergedClassNames?.container || ""}`} style={mergedStyles?.container}>
+        {toastMessage && (
+          <div style={{
+            background: "#10b981",
+            color: "#ffffff",
+            padding: 8,
+            borderRadius: 8,
+            marginBottom: 8,
+            textAlign: "center"
+          }}>
+            {toastMessage}
+          </div>
+        )}
+        <button
+          onClick={onClose}
+          className={`kyc-close ${mergedClassNames?.closeButton || ""}`}
+          style={mergedStyles?.closeButton}
+          aria-label="Close"
+        >
+          ✕
+        </button>
+
+        {/* Loading indicator will be shown contextually within steps */}
+
+        {step === "FACE" && (
+          <div>
+            <h2 className={`kyc-title ${mergedClassNames?.title || ""}`} style={mergedStyles?.title}>Capture Face</h2>
+            <div style={{ display: "grid", gap: 8 }}>
+              <video ref={videoRef} playsInline muted style={{ width: "100%", borderRadius: 8, background: "#000" }} />
+              <button
+                type="button"
+                disabled={!cameraReady || loading}
+                onClick={handleFaceCapture}
+              className={`kyc-input ${mergedClassNames?.input || ""}`}
+              style={{
+                ...(mergedStyles?.input || {}),
+                background: cameraReady && !loading ? "linear-gradient(90deg, #FF8A00 0%, #FF3D77 100%)" : "#9ca3af",
+                color: "#ffffff",
+                border: cameraReady && !loading ? "none" : "1px solid #d1d5db",
+                borderRadius: 8
+              }}
+              >
+                {loading ? "Capturing..." : "Capture & Continue"}
+              </button>
+              
+              {showQr && (
+                <div style={{ textAlign: "center", marginTop: "16px" }}>
+                  <p style={{ margin: "0 0 8px 0", fontSize: "14px", color: "#6b7280" }}>
+                    Or continue on mobile for better camera quality
+                  </p>
+                  <div style={{
+                    display: "inline-block",
+                    padding: "16px",
+                    background: "#f9fafb",
+                    border: "1px solid #e5e7eb",
+                    borderRadius: "8px",
+                    marginBottom: "8px"
+                  }}>
+                    <div style={{
+                      width: "120px",
+                      height: "120px",
+                      background: "#ffffff",
+                      border: "1px solid #d1d5db",
+                      borderRadius: "4px",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      fontSize: "10px",
+                      color: "#6b7280",
+                      textAlign: "center",
+                      padding: "8px",
+                      wordBreak: "break-all"
+                    }}>
+                      <img 
+                        src={computedQrSrc} 
+                        alt="QR Code for mobile continuation" 
+                        style={{ 
+                          width: "100%", 
+                          height: "100%",
+                          objectFit: "contain"
+                        }} 
+                      />
+                    </div>
+                  </div>
+                  <p style={{ margin: "0", fontSize: "12px", color: "#9ca3af" }}>
+                    Scan QR code with your mobile device
+                  </p>
+                  {mobileUrl && (
+                    <p style={{ margin: "4px 0 0 0", fontSize: "10px", color: "#9ca3af" }}>
+                      Or visit: <a href={mobileUrl} style={{ color: "#2563eb" }}>{mobileUrl}</a>
+                    </p>
+                  )}
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+
+        {step === "DOCUMENT" && (
+          <div style={{ minHeight: 380, display: "flex", flexDirection: "column" }}>
+            <h2 className={`kyc-title ${mergedClassNames?.title || ""}`} style={mergedStyles?.title}>Upload Document</h2>
+            <div style={{ display: "flex", gap: 8, marginBottom: 8 }}>
+              <label style={{ display: "flex", alignItems: "center", gap: 6, color: "#000" }}>
+                <input
+                  type="radio"
+                  name="doc-type"
+                  value="CNIC"
+                  checked={docType === "CNIC"}
+                  onChange={() => setDocType("CNIC")}
+                />
+                NIC
+              </label>
+              <label style={{ display: "flex", alignItems: "center", gap: 6, color: "#000" }}>
+                <input
+                  type="radio"
+                  name="doc-type"
+                  value="PASSPORT"
+                  checked={docType === "PASSPORT"}
+                  onChange={() => setDocType("PASSPORT")}
+                />
+                Passport
+              </label>
+            </div>
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept="image/*,.pdf"
+              onChange={handleDocumentUpload}
+              className={`kyc-input ${mergedClassNames?.input || ""}`}
+              style={{ ...mergedStyles?.input, display: "none" }}
+            />
+            {loading && (
+              <p className={`kyc-loading ${mergedClassNames?.loading || ""}`} style={mergedStyles?.loading}>Processing...</p>
+            )}
+            {docFileName && (
+              <div style={{
+                marginTop: 6,
+                display: "inline-flex",
+                alignItems: "center",
+                gap: 8,
+                padding: "6px 10px",
+                borderRadius: 9999,
+                background: "#eef2ff",
+                color: "#111827",
+                fontSize: 13,
+              }}>
+                <span aria-hidden>✔</span>
+                <span>File selected</span>
+              </div>
+            )}
+            <div style={{ flex: 1 }} />
+            {!docFileName && (
+              <button
+                type="button"
+                onClick={() => fileInputRef.current?.click()}
+                className={`kyc-input ${mergedClassNames?.input || ""}`}
+                style={{
+                  ...mergedStyles?.input,
+                  background: "linear-gradient(90deg, #FF8A00 0%, #FF3D77 100%)",
+                  color: "#fff",
+                  border: "none",
+                  borderRadius: 8,
+                  padding: 10,
+                  marginTop: 12
+                }}
+              >
+                Choose file
+              </button>
+            )}
+          </div>
+        )}
+
+        {step === "STATUS" && (
+          <div>
+            <h2 className={`kyc-title ${mergedClassNames?.title || ""}`} style={mergedStyles?.title}>Verification Status</h2>
+            {status ? (
+              <div className={`kyc-status ${mergedClassNames?.statusBlock || ""}`} style={mergedStyles?.statusBlock}>
+                {(() => {
+                  const data: any = status?.data ?? status;
+                  const reference: string | undefined = data?.reference ?? data?.ref;
+                  const email: string | undefined = data?.email;
+                  const faceStatus: string | undefined = data?.face_recognition_status ?? data?.face_status ?? data?.face ?? data?.faceRecognitionStatus;
+                  const kycStatus: string | undefined = data?.kyc_status ?? data?.status ?? status?.status;
+                  const redirectUrl: string | undefined = data?.redirect_url ?? data?.redirectUrl;
+                  return (
+                    <div style={{ display: "grid", gap: 8, color: "#000", padding: 0 }}>
+                      {reference && (
+                        <div><strong>Reference:</strong> {reference}</div>
+                      )}
+                      {email && (
+                        <div><strong>Email:</strong> {email}</div>
+                      )}
+                      {faceStatus && (
+                        <div><strong>Face Status:</strong> {String(faceStatus)}</div>
+                      )}
+                      {kycStatus && (
+                        <div><strong>KYC Status:</strong> {String(kycStatus)}</div>
+                      )}
+                      {redirectUrl && (
+                        <div style={{ overflowWrap: "anywhere" }}>
+                          <strong>Redirect URL:</strong> {redirectUrl}
+                        </div>
+                      )}
+                      {!reference && !email && !faceStatus && !kycStatus && !redirectUrl && (
+                        <pre style={{ margin: 0 }}>{JSON.stringify(status, null, 2)}</pre>
+                      )}
+                    </div>
+                  );
+                })()}
+              </div>
+            ) : (
+              <p>No status available.</p>
+            )}
+            <div style={{ marginTop: 12 }}>
+              <button
+                type="button"
+                onClick={onClose}
+                className={`kyc-input ${mergedClassNames?.input || ""}`}
+                style={{ ...(mergedStyles?.input || {}), background: "#111827", color: "#fff", border: "none", borderRadius: 8, padding: 10 }}
+              >
+                Close
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/index.css

@@ -1,19 +1,23 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-
-
-.custom__scrollbar {
-    scrollbar-width: thin;
-    scrollbar-color: #474747 transparent;
-  }
-  
-  .custom__scrollbar::-webkit-scrollbar {
-    width: 6px;
-  }
-  
-  .custom__scrollbar::-webkit-scrollbar-track {
-    background: transparent;
-  }
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
+
+.custom__scrollbar {
+    scrollbar-width: thin;
+    scrollbar-color: #474747 transparent;
+  }
+  
+  .custom__scrollbar::-webkit-scrollbar {
+    width: 6px;
+  }
+  
+  .custom__scrollbar::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  
+
+
+
   

package/src/main.tsx

@@ -1,10 +1,10 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.tsx'
-
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
-)
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

package/src/pages/QRCodePage.tsx

@@ -11,7 +11,7 @@ interface QRCodePageProps {
   serverKey?: string;
 }
 
-function QRCodePage({ onClose, onNavigate, mobileBaseUrl = 'https://astra-sdk-rebuild.vercel.app', sessionId, apiBaseUrl, serverKey }: QRCodePageProps = {}) {
+function QRCodePage({ onClose, onNavigate, mobileBaseUrl = 'https://kyc-sdk.astraprotocol.com', sessionId, apiBaseUrl, serverKey }: QRCodePageProps = {}) {
   const [qrUrl, setQrUrl] = useState<string>('');
   const [copied, setCopied] = useState<boolean>(false);
 

package/dist/.htaccess

@@ -1,9 +0,0 @@
-# Apache .htaccess for SPA routing
-<IfModule mod_rewrite.c>
-  RewriteEngine On
-  RewriteBase /
-  RewriteRule ^index\.html$ - [L]
-  RewriteCond %{REQUEST_FILENAME} !-f
-  RewriteCond %{REQUEST_FILENAME} !-d
-  RewriteRule . /index.html [L]
-</IfModule>