astra-sdk-web 1.1.7 → 1.1.9

package/dist/index.d.ts

@@ -76,10 +76,6 @@ declare class ApiClient {
     getConfig(): Required<AstraSDKConfig>;
 }
 
-/**
- * KYC API Service
- * Handles all KYC-related API calls (face scan, document upload, status check)
- */
 interface KycApiConfig {
     apiBaseUrl: string;
     sessionId: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astra-sdk-web",
-  "version": "1.1.7",
+  "version": "1.1.9",
   "description": "Official Astra SDK for JavaScript/TypeScript",
   "type": "module",
   "main": "./dist/astra-sdk.cjs.js",

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

@@ -49,6 +49,9 @@ export function useFaceScan(
     lastResultsAt: 0,
     stage: 'CENTER' as LivenessStage,
     livenessReady: false,
+    currentYaw: null as number | null,
+    currentAbsYaw: null as number | null,
+    livenessCompleted: false,
   });
 
   // Sync refs with state
@@ -74,6 +77,27 @@ export function useFaceScan(
 
   const handleFaceCapture = useCallback(async () => {
     if (!videoRef.current) return;
+    
+    // Check if face is straight before capturing (reduced threshold, no center check)
+    const reducedThreshold = 0.08; // More lenient threshold - only check if face is straight
+    const currentAbsYaw = livenessStateRef.current.currentAbsYaw;
+    
+    if (currentAbsYaw === null || currentAbsYaw === undefined) {
+      setState(prev => ({
+        ...prev,
+        livenessInstruction: "Please position your face in front of the camera",
+      }));
+      return;
+    }
+    
+    if (currentAbsYaw >= reducedThreshold) {
+      setState(prev => ({
+        ...prev,
+        livenessInstruction: "Please look straight at the camera before capturing",
+      }));
+      return;
+    }
+    
     setState(prev => ({ ...prev, loading: true }));
     try {
       const video = videoRef.current;

package/src/pages/DocumentUploadModal.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useDocumentUpload } from '../features/documentUpload/hooks/useDocumentUpload';
 import { useKycContext } from '../contexts/KycContext';
+import { COMPLETED_STEPS } from '../services/kycApiService';
 import type { DocumentType } from '../features/documentUpload/types';
 
 interface DocumentUploadModalProps {
@@ -47,7 +48,26 @@ function DocumentUploadModal({ onComplete }: DocumentUploadModalProps) {
       if (!apiService) return;
       
       try {
-        await apiService.checkSessionActive();
+        const statusResponse = await apiService.getSessionStatus();
+        const { completed_steps, next_step, status } = statusResponse.data;
+        
+        // Check if session is active
+        if (status !== 'ACTIVE') {
+          throw new Error('Session expired or inactive');
+        }
+        
+        // If document_upload is already completed, show completion message
+        if (completed_steps.includes(COMPLETED_STEPS.DOCS)) {
+          // Document already uploaded, could show completion or redirect
+          console.log('Document already uploaded');
+        }
+        
+        // If next_step is not document_upload and face_scan is not completed, redirect to face scan
+        if (next_step === COMPLETED_STEPS.FACE && !completed_steps.includes(COMPLETED_STEPS.FACE)) {
+          // Should not happen if we're in document upload modal, but handle it
+          console.warn('Face scan not completed, but in document upload modal');
+        }
+        
         setSessionError(null);
       } catch (error: any) {
         const message = error.message || 'Session expired or inactive';

package/src/pages/FaceScanModal.tsx

@@ -5,6 +5,7 @@ import { useCamera } from '../features/faceScan/hooks/useCamera';
 import { useFaceScan } from '../features/faceScan/hooks/useFaceScan';
 import { useKycContext } from '../contexts/KycContext';
 import { Toast } from '../components/Toast';
+import { COMPLETED_STEPS } from '../services/kycApiService';
 import '../index.css';
 
 interface FaceScanModalProps {
@@ -28,7 +29,6 @@ function FaceScanModal({ onComplete }: FaceScanModalProps) {
       try {
         await apiService.uploadFaceScan(blob);
       } catch (error: any) {
-        // Check if it's a "Face already registered" error
         const errorMessage = error?.message || '';
         const errorData = (error as any)?.errorData || {};
         
@@ -39,13 +39,11 @@ function FaceScanModal({ onComplete }: FaceScanModalProps) {
           (error as any)?.statusCode === 500 && errorMessage.includes('Face')
         ) {
           setToast({
-            message: 'Face has already been registered for this session. Proceeding to document upload.',
+            message: 'Face already registered',
             type: 'warning',
           });
-          // Don't throw error - allow flow to continue to document upload
           return;
         }
-        // Re-throw other errors
         throw error;
       }
     },
@@ -56,18 +54,37 @@ function FaceScanModal({ onComplete }: FaceScanModalProps) {
     },
   });
   
-  // Check session status on mount
   useEffect(() => {
     const checkSession = async () => {
       if (!apiService) return;
       
       try {
-        await apiService.checkSessionActive();
+        const statusResponse = await apiService.getSessionStatus();
+        const { completed_steps, next_step, status } = statusResponse.data;
+        
+        // Check if session is active
+        if (status !== 'ACTIVE') {
+          throw new Error('Session expired or inactive');
+        }
+        
+        // If face_scan is already completed, skip to document upload
+        if (completed_steps.includes(COMPLETED_STEPS.FACE)) {
+          setState(prev => ({ ...prev, showDocumentUpload: true }));
+          return;
+        }
+        
+        // If next_step is not face_scan, redirect accordingly
+        if (next_step !== COMPLETED_STEPS.FACE && next_step !== COMPLETED_STEPS.INITIATED) {
+          if (next_step === COMPLETED_STEPS.DOCS) {
+            setState(prev => ({ ...prev, showDocumentUpload: true }));
+            return;
+          }
+        }
+        
         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);
@@ -75,17 +92,14 @@ function FaceScanModal({ onComplete }: FaceScanModalProps) {
     };
     
     checkSession();
-  }, [apiService, navigate]);
+  }, [apiService, navigate, setState]);
 
-  // Sync camera ready state
   useEffect(() => {
     setState(prev => ({ ...prev, cameraReady }));
   }, [cameraReady, setState]);
 
-  // Log session info and call status API when camera opens
   useEffect(() => {
     if (cameraReady && apiService) {
-      // Get config from apiService to log session info
       const config = apiService.getConfig();
       if (config) {
         console.log('=== Camera Opened ===');
@@ -94,7 +108,6 @@ function FaceScanModal({ onComplete }: FaceScanModalProps) {
         console.log('API Base URL:', config.apiBaseUrl);
         console.log('Device Type:', config.deviceType || 'auto-detected');
         
-        // Call status API
         apiService.getSessionStatus()
           .then((statusResponse) => {
             console.log('=== Session Status API Response ===');
@@ -152,8 +165,7 @@ function FaceScanModal({ onComplete }: FaceScanModalProps) {
       />
     );
   }
-
-  // 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">

package/src/services/faceMeshService.ts

@@ -19,6 +19,9 @@ export interface LivenessState {
   lastResultsAt: number;
   stage: LivenessStage;
   livenessReady: boolean;
+  currentYaw: number | null;
+  currentAbsYaw: number | null;
+  livenessCompleted: boolean;
 }
 
 export class FaceMeshService {
@@ -111,6 +114,10 @@ export class FaceMeshService {
 
       this.processLiveness(faceOnCanvas, w, h);
     } else {
+      // Reset face orientation when no face is detected
+      this.livenessStateRef.current.currentYaw = null;
+      this.livenessStateRef.current.currentAbsYaw = null;
+      
       const vid = this.videoRef.current as HTMLVideoElement | null;
       if (vid) {
         const vidW = Math.max(1, vid?.videoWidth || displayW);
@@ -160,6 +167,10 @@ export class FaceMeshService {
       const yaw = (nT.x - midX) / Math.max(1e-6, faceWidth);
       const absYaw = Math.abs(yaw);
       
+      // Store current face orientation for capture validation
+      this.livenessStateRef.current.currentYaw = yaw;
+      this.livenessStateRef.current.currentAbsYaw = absYaw;
+      
       const xs = faceOnCanvas.map(p => p.x), ys = faceOnCanvas.map(p => p.y);
       const minX = Math.min(...xs) * w, maxX = Math.max(...xs) * w;
       const minY = Math.min(...ys) * h, maxY = Math.max(...ys) * h;
@@ -192,11 +203,14 @@ export class FaceMeshService {
         } else if (absYaw < centerThreshold) {
           state.centerHold += 1;
           if (state.centerHold >= holdFramesCenter) {
-            const newStage: LivenessStage = "LEFT";
-            state.stage = newStage;
-            state.centerHold = 0;
-            if (this.callbacks.onLivenessUpdate) {
-              this.callbacks.onLivenessUpdate(newStage, "Turn your face LEFT");
+            // Only transition to LEFT if liveness check hasn't been completed yet
+            if (!state.livenessCompleted) {
+              const newStage: LivenessStage = "LEFT";
+              state.stage = newStage;
+              state.centerHold = 0;
+              if (this.callbacks.onLivenessUpdate) {
+                this.callbacks.onLivenessUpdate(newStage, "Turn your face LEFT");
+              }
             }
           }
         } else {
@@ -235,16 +249,13 @@ export class FaceMeshService {
           state.rightHold += 1;
           if (state.rightHold >= holdFramesTurn) {
             state.rightHold = 0;
-            if (!state.snapTriggered) {
-              state.snapTriggered = true;
-              const newStage: LivenessStage = "DONE";
-              state.stage = newStage;
-              if (this.callbacks.onLivenessUpdate) {
-                this.callbacks.onLivenessUpdate(newStage, "Capturing...");
-              }
-              if (this.callbacks.onCaptureTrigger) {
-                this.callbacks.onCaptureTrigger();
-              }
+            // Mark liveness as completed and transition to DONE stage
+            state.livenessCompleted = true;
+            const newStage: LivenessStage = "DONE";
+            state.stage = newStage;
+            state.centerHold = 0;
+            if (this.callbacks.onLivenessUpdate) {
+              this.callbacks.onLivenessUpdate(newStage, "Great! Now look straight at the camera");
             }
           }
         } else {
@@ -253,6 +264,27 @@ export class FaceMeshService {
             this.callbacks.onLivenessUpdate(state.stage, yaw < -leftThreshold ? "You're facing left. Turn RIGHT" : "Turn a bit more RIGHT");
           }
         }
+      } else if (state.stage === "DONE") {
+        // In DONE stage, wait for face to be straight before capturing (no center check needed)
+        // Reduced threshold for easier capture when face is straight
+        const reducedThreshold = 0.08; // More lenient threshold
+        if (absYaw < reducedThreshold) {
+          state.centerHold += 1;
+          if (state.centerHold >= holdFramesCenter && !state.snapTriggered) {
+            state.snapTriggered = true;
+            if (this.callbacks.onLivenessUpdate) {
+              this.callbacks.onLivenessUpdate(state.stage, "Capturing...");
+            }
+            if (this.callbacks.onCaptureTrigger) {
+              this.callbacks.onCaptureTrigger();
+            }
+          }
+        } else {
+          state.centerHold = 0;
+          if (this.callbacks.onLivenessUpdate) {
+            this.callbacks.onLivenessUpdate(state.stage, "Please look straight at the camera");
+          }
+        }
       }
     }
   }

package/src/services/kycApiService.ts

@@ -3,6 +3,13 @@
  * Handles all KYC-related API calls (face scan, document upload, status check)
  */
 
+export const COMPLETED_STEPS = {
+  INITIATED: "initiated",
+  FACE: "face_scan",
+  DOCS: "document_upload",
+  COMPLETED: "completed",
+} as const;
+
 export interface KycApiConfig {
   apiBaseUrl: string;
   sessionId: string;