astra-sdk-web 1.0.0 → 1.1.0

package/src/features/faceScan/hooks/useFaceScan.ts

@@ -0,0 +1,249 @@
+import { useRef, useState, useEffect, useCallback } from 'react';
+import { FaceMeshService } from '../../../services/faceMeshService';
+import type { LivenessStage } from '../../../services/faceMeshService';
+import type { FaceScanState, LivenessRefs } from '../types';
+
+export interface FaceScanCallbacks {
+  onFaceCaptureComplete?: (imageData: string) => void;
+  onLivenessFailedCallback?: (failed: boolean) => void;
+  onFaceUpload?: (blob: Blob) => Promise<void>;
+}
+
+export function useFaceScan(
+  videoRef: React.RefObject<HTMLVideoElement | null>,
+  canvasRef: React.RefObject<HTMLCanvasElement | null>,
+  callbacks?: FaceScanCallbacks
+) {
+  const [state, setState] = useState<FaceScanState>({
+    cameraReady: false,
+    livenessStage: 'CENTER',
+    livenessReady: false,
+    livenessFailed: false,
+    modelLoading: true,
+    modelLoaded: false,
+    livenessInstruction: 'Look straight at the camera',
+    loading: false,
+    allStepsCompleted: false,
+    capturedImage: null,
+    showDocumentUpload: false,
+  });
+
+  const refs: LivenessRefs = {
+    centerHold: useRef<number>(0),
+    leftHold: useRef<number>(0),
+    rightHold: useRef<number>(0),
+    snapTriggered: useRef<boolean>(false),
+    lastResultsAt: useRef<number>(0),
+    livenessStage: useRef<LivenessStage>('CENTER'),
+    cameraDriver: useRef<number | null>(null),
+    modelLoaded: useRef<boolean>(false),
+    livenessFailed: useRef<boolean>(false),
+    handleFaceCapture: useRef<(() => void) | null>(null),
+  };
+
+  const livenessStateRef = useRef({
+    centerHold: 0,
+    leftHold: 0,
+    rightHold: 0,
+    snapTriggered: false,
+    lastResultsAt: 0,
+    stage: 'CENTER' as LivenessStage,
+    livenessReady: false,
+  });
+
+  // Sync refs with state
+  useEffect(() => {
+    livenessStateRef.current.centerHold = refs.centerHold.current;
+    livenessStateRef.current.leftHold = refs.leftHold.current;
+    livenessStateRef.current.rightHold = refs.rightHold.current;
+    livenessStateRef.current.snapTriggered = refs.snapTriggered.current;
+    livenessStateRef.current.lastResultsAt = refs.lastResultsAt.current;
+    livenessStateRef.current.stage = state.livenessStage;
+    livenessStateRef.current.livenessReady = state.livenessReady;
+  }, [state.livenessStage, state.livenessReady]);
+
+  useEffect(() => {
+    refs.livenessStage.current = state.livenessStage;
+  }, [state.livenessStage]);
+
+  const setStage = useCallback((next: LivenessStage) => {
+    refs.livenessStage.current = next;
+    livenessStateRef.current.stage = next;
+    setState(prev => ({ ...prev, livenessStage: next }));
+  }, []);
+
+  const handleFaceCapture = useCallback(async () => {
+    if (!videoRef.current) return;
+    setState(prev => ({ ...prev, loading: 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);
+      
+      // Convert data URL to blob
+      const blob = await (await fetch(dataUrl)).blob();
+      
+      // Upload face scan if callback provided
+      if (callbacks?.onFaceUpload) {
+        try {
+          await callbacks.onFaceUpload(blob);
+          setState(prev => ({
+            ...prev,
+            capturedImage: dataUrl,
+            allStepsCompleted: true,
+            livenessInstruction: "Face captured and uploaded successfully!",
+            loading: false,
+          }));
+        } catch (uploadError: any) {
+          throw new Error(uploadError.message || 'Failed to upload face scan');
+        }
+      } else {
+        setState(prev => ({
+          ...prev,
+          capturedImage: dataUrl,
+          allStepsCompleted: true,
+          livenessInstruction: "Face captured successfully!",
+          loading: false,
+        }));
+      }
+      
+      // Call completion callback
+      if (callbacks?.onFaceCaptureComplete) {
+        callbacks.onFaceCaptureComplete(dataUrl);
+      }
+      
+      setTimeout(() => {
+        setState(prev => ({ ...prev, showDocumentUpload: true }));
+      }, 500);
+    } catch (err: any) {
+      console.error('Error capturing image:', err);
+      setState(prev => ({
+        ...prev,
+        livenessInstruction: err.message || 'Error capturing image. Please try again.',
+        loading: false,
+      }));
+    }
+  }, [callbacks]);
+
+  useEffect(() => {
+    refs.handleFaceCapture.current = handleFaceCapture;
+  }, [handleFaceCapture]);
+
+  useEffect(() => {
+    if (!state.cameraReady) return;
+    
+    let service: FaceMeshService | null = null;
+    let initTimeoutId: number | null = null;
+    let cancelled = false;
+
+    const start = async () => {
+      try {
+        service = new FaceMeshService(
+          videoRef,
+          canvasRef,
+          refs.cameraDriver,
+          livenessStateRef,
+          {
+            onModelLoaded: () => {
+              if (cancelled) return;
+              setState(prev => ({
+                ...prev,
+                modelLoaded: true,
+                modelLoading: false,
+              }));
+              refs.modelLoaded.current = true;
+            },
+            onModelFailed: (error) => {
+              if (cancelled) return;
+              setState(prev => ({
+                ...prev,
+                livenessFailed: true,
+                modelLoading: false,
+                modelLoaded: false,
+              }));
+              refs.livenessFailed.current = true;
+              console.error("mediapipe facemesh init error", error);
+            },
+            onLivenessUpdate: (stage, instruction) => {
+              if (cancelled) return;
+              setState(prev => ({
+                ...prev,
+                livenessStage: stage,
+                livenessInstruction: instruction,
+                livenessReady: true,
+              }));
+              livenessStateRef.current.stage = stage;
+              refs.livenessStage.current = stage;
+              // Sync hold counts from service state
+              refs.centerHold.current = livenessStateRef.current.centerHold;
+              refs.leftHold.current = livenessStateRef.current.leftHold;
+              refs.rightHold.current = livenessStateRef.current.rightHold;
+              refs.snapTriggered.current = livenessStateRef.current.snapTriggered;
+            },
+            onCaptureTrigger: () => {
+              if (cancelled) return;
+              if (refs.handleFaceCapture.current) {
+                refs.handleFaceCapture.current();
+              }
+            },
+          }
+        );
+
+        await service.initialize();
+      } catch (e) {
+        if (!cancelled && refs.livenessFailed.current === false) {
+          setState(prev => ({
+            ...prev,
+            livenessFailed: true,
+            modelLoading: false,
+            modelLoaded: false,
+          }));
+          refs.livenessFailed.current = true;
+        }
+      }
+    };
+
+    initTimeoutId = window.setTimeout(() => {
+      if (!cancelled && !refs.modelLoaded.current && !refs.livenessFailed.current) {
+        setState(prev => ({
+          ...prev,
+          livenessFailed: true,
+          modelLoading: false,
+        }));
+        refs.livenessFailed.current = true;
+      }
+    }, 8000);
+
+    start();
+
+    // Cleanup function - must return a function, not a Promise
+    return () => {
+      cancelled = true;
+      if (initTimeoutId) {
+        window.clearTimeout(initTimeoutId);
+        initTimeoutId = null;
+      }
+      if (service) {
+        service.cleanup();
+        service = null;
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state.cameraReady]);
+
+  return {
+    state,
+    setState,
+    refs,
+    setStage,
+    handleFaceCapture,
+  };
+}
+

package/src/features/faceScan/index.ts

@@ -0,0 +1,4 @@
+export * from './types';
+export { useFaceScan } from './hooks/useFaceScan';
+export { useCamera } from './hooks/useCamera';
+

package/src/features/faceScan/types.ts

@@ -0,0 +1,29 @@
+export type LivenessStage = 'CENTER' | 'LEFT' | 'RIGHT' | 'SNAP' | 'DONE';
+
+export interface FaceScanState {
+  cameraReady: boolean;
+  livenessStage: LivenessStage;
+  livenessReady: boolean;
+  livenessFailed: boolean;
+  modelLoading: boolean;
+  modelLoaded: boolean;
+  livenessInstruction: string;
+  loading: boolean;
+  allStepsCompleted: boolean;
+  capturedImage: string | null;
+  showDocumentUpload: boolean;
+}
+
+export interface LivenessRefs {
+  centerHold: React.MutableRefObject<number>;
+  leftHold: React.MutableRefObject<number>;
+  rightHold: React.MutableRefObject<number>;
+  snapTriggered: React.MutableRefObject<boolean>;
+  lastResultsAt: React.MutableRefObject<number>;
+  livenessStage: React.MutableRefObject<LivenessStage>;
+  cameraDriver: React.MutableRefObject<number | null>;
+  modelLoaded: React.MutableRefObject<boolean>;
+  livenessFailed: React.MutableRefObject<boolean>;
+  handleFaceCapture: React.MutableRefObject<(() => void) | null>;
+}
+

package/src/index.css

@@ -1,68 +1,19 @@
-:root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
 
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
 
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
+.custom__scrollbar {
+    scrollbar-width: thin;
+    scrollbar-color: #474747 transparent;
   }
-  a:hover {
-    color: #747bff;
+  
+  .custom__scrollbar::-webkit-scrollbar {
+    width: 6px;
   }
-  button {
-    background-color: #f9f9f9;
+  
+  .custom__scrollbar::-webkit-scrollbar-track {
+    background: transparent;
   }
-}
+  

package/src/pages/DocumentUploadModal.tsx

@@ -0,0 +1,262 @@
+import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useDocumentUpload } from '../features/documentUpload/hooks/useDocumentUpload';
+import { useKycContext } from '../contexts/KycContext';
+import type { DocumentType } from '../features/documentUpload/types';
+
+interface DocumentUploadModalProps {
+  onComplete?: (file: File, docType: string) => void;
+}
+
+function DocumentUploadModal({ onComplete }: DocumentUploadModalProps) {
+  const navigate = useNavigate();
+  const { apiService } = useKycContext();
+  const [sessionError, setSessionError] = useState<string | null>(null);
+  
+  const {
+    state,
+    setState,
+    fileInputRef,
+    docVideoRef,
+    handleDocumentUpload,
+    handleConfirmDocumentUpload,
+    handleManualCapture,
+    startDocCamera,
+  } = useDocumentUpload({
+    onDocumentUpload: async (blob: Blob, docType: string) => {
+      if (!apiService) {
+        throw new Error('API service not initialized');
+      }
+      await apiService.uploadDocument(blob, docType);
+    },
+    onUpload: (file, docType) => {
+      if (onComplete) {
+        onComplete(file, docType);
+      }
+    },
+    onScan: (file, docType) => {
+      if (onComplete) {
+        onComplete(file, docType);
+      }
+    },
+  });
+  
+  // Check session status on mount
+  useEffect(() => {
+    const checkSession = async () => {
+      if (!apiService) return;
+      
+      try {
+        await apiService.checkSessionActive();
+        setSessionError(null);
+      } catch (error: any) {
+        const message = error.message || 'Session expired or inactive';
+        setSessionError(message);
+        // Redirect to QR page after showing error
+        setTimeout(() => {
+          navigate('/qr', { replace: true });
+        }, 2000);
+      }
+    };
+    
+    checkSession();
+  }, [apiService, navigate]);
+
+
+  // Show session error if present
+  if (sessionError) {
+    return (
+      <div className="fixed inset-0 bg-black p-5 z-[1000] flex items-center justify-center font-sans overflow-y-auto custom__scrollbar">
+        <div className="max-w-[400px] w-full mx-auto bg-[#0b0f17] rounded-2xl p-6 shadow-xl">
+          <div className="text-center">
+            <h2 className="m-0 mb-4 text-[26px] font-bold text-red-500">
+              Session Expired
+            </h2>
+            <p className="text-[#e5e7eb] mb-4">{sessionError}</p>
+            <p className="text-[#9ca3af] text-sm">Redirecting to QR code page...</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="fixed inset-0 bg-black p-5 z-[1000] flex items-center justify-center font-sans overflow-y-auto custom__scrollbar">
+      <div 
+        className="max-w-[400px] w-full mx-auto bg-[#0b0f17] rounded-2xl p-6 shadow-xl"
+        style={{
+          marginTop: state.docPreviewUrl && !state.isDocScanMode ? '192px' : '0'
+        }}
+      >
+        <div className="relative mb-4">
+          <h2 className="m-0 mb-4 text-xl font-bold text-white">
+            Document
+          </h2>
+        </div>
+
+        {!state.isDocScanMode && (
+          <div className="grid gap-2 mb-3">
+            <button
+              type="button"
+              onClick={() => fileInputRef.current?.click()}
+              className="w-full py-3 px-4 rounded-lg border-2 border-dashed border-[#374151] bg-[#0f172a] text-[#e5e7eb] text-base cursor-pointer hover:border-[#4b5563] transition-colors"
+            >
+              Upload Document
+            </button>
+            <button
+              type="button"
+              onClick={() => {
+                setState(prev => ({ ...prev, isDocScanMode: true }));
+                startDocCamera();
+              }}
+              className="w-full py-3 px-4 rounded-lg text-white border-none text-base cursor-pointer transition-opacity hover:opacity-90"
+              style={{
+                background: "linear-gradient(90deg, #FF8A00 0%, #FF3D77 100%)"
+              }}
+            >
+              Scan Document (Back Camera)
+            </button>
+          </div>
+        )}
+
+        <div className="flex gap-3 mb-4">
+          <label className="flex items-center gap-1.5 text-[#e5e7eb] cursor-pointer">
+            <input
+              type="radio"
+              name="doc-type"
+              value="CNIC"
+              checked={state.docType === "CNIC"}
+              defaultChecked
+              onChange={() => setState(prev => ({ ...prev, docType: "CNIC" as DocumentType }))}
+              className="cursor-pointer w-4 h-4"
+              style={{
+                accentColor: state.docType === "CNIC" ? "#ef4444" : "#6b7280"
+              }}
+            />
+            NIC
+          </label>
+          <label className="flex items-center gap-1.5 text-[#e5e7eb] cursor-pointer">
+            <input
+              type="radio"
+              name="doc-type"
+              value="Passport"
+              checked={state.docType === "Passport"}
+              onChange={() => setState(prev => ({ ...prev, docType: "Passport" as DocumentType }))}
+              className="cursor-pointer w-4 h-4"
+              style={{
+                accentColor: state.docType === "Passport" ? "#ef4444" : "#6b7280"
+              }}
+            />
+            Passport
+          </label>
+        </div>
+
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept="image/*,.pdf"
+          onChange={handleDocumentUpload}
+          className="hidden"
+        />
+
+        {state.isDocScanMode && (
+          <div className="grid gap-3 mt-2">
+            <div className="relative w-full aspect-[3/4] rounded-lg overflow-hidden bg-black">
+              <video
+                ref={docVideoRef}
+                playsInline
+                muted
+                autoPlay
+                className="w-full h-full object-cover"
+              />
+            </div>
+            <div className="flex gap-2">
+              <button
+                type="button"
+                onClick={handleManualCapture}
+                disabled={state.loading}
+                className="flex-1 py-3 px-4 rounded-lg text-white border-none text-base cursor-pointer transition-opacity disabled:opacity-50 disabled:cursor-not-allowed hover:opacity-90"
+                style={{
+                  background: "linear-gradient(90deg, #FF8A00 0%, #FF3D77 100%)"
+                }}
+              >
+                {state.loading ? "Capturing..." : "Capture Document"}
+              </button>
+              <button
+                type="button"
+                onClick={() => {
+                  setState(prev => ({ ...prev, isDocScanMode: false }));
+                }}
+                disabled={state.loading}
+                className="py-3 px-4 rounded-lg bg-[#111827] text-[#e5e7eb] border-none text-base cursor-pointer hover:bg-[#1f2937] transition-colors disabled:opacity-50"
+              >
+                Cancel
+              </button>
+            </div>
+            <p className="m-0 text-[#9ca3af] text-xs text-center">
+              {state.loading 
+                ? "Processing document..." 
+                : "Position your document in the frame and tap 'Capture Document' when ready."}
+            </p>
+          </div>
+        )}
+
+        {state.docFileName && !state.isDocScanMode && (
+          <div className="inline-flex items-center gap-2 py-2 px-3 rounded-full bg-[#1f2937] text-[#e5e7eb] text-sm mb-3">
+            <span>✔</span>
+            <span>File selected</span>
+          </div>
+        )}
+
+        {state.loading && !state.isDocScanMode && (
+          <p className="m-3 mt-0 text-[#60a5fa] text-center">
+            Processing...
+          </p>
+        )}
+
+        {!state.isDocScanMode && state.docPreviewUrl && (
+          <div className="mt-3">
+            <div className="font-semibold mb-1.5 text-[#e5e7eb]">Preview</div>
+            <img src={state.docPreviewUrl} alt="Document preview" className="w-full rounded-lg border border-[#374151]" />
+            <div className="grid gap-2 grid-cols-2 mt-2">
+              <button
+                type="button"
+                onClick={handleConfirmDocumentUpload}
+                disabled={state.loading}
+                className="py-3 px-4 rounded-lg text-white border-none text-base cursor-pointer w-full transition-opacity disabled:opacity-50 disabled:cursor-not-allowed hover:opacity-90"
+                style={{
+                  background: "linear-gradient(90deg, #10b981 0%, #059669 100%)"
+                }}
+              >
+                {state.loading ? "Uploading..." : "Looks good, continue"}
+              </button>
+              <button
+                type="button"
+                onClick={() => {
+                  setState(prev => ({
+                    ...prev,
+                    docPreviewUrl: null,
+                    docFileName: "",
+                  }));
+                }}
+                disabled={state.loading}
+                className="py-3 px-4 rounded-lg bg-[#111827] text-[#e5e7eb] border-none text-base cursor-pointer w-full hover:bg-[#1f2937] transition-colors disabled:opacity-50"
+              >
+                Retake / Choose again
+              </button>
+            </div>
+          </div>
+        )}
+
+        {!state.isDocScanMode && !state.docFileName && !state.docPreviewUrl && (
+          <p className="m-0 text-[#9ca3af] text-xs text-center">
+            After uploading or scanning, return to your desktop to check status.
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default DocumentUploadModal;
+