astra-sdk-web 1.1.6 → 1.1.8

package/package.json

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

package/src/components/Toast.tsx

@@ -0,0 +1,82 @@
+import { useEffect, useState } from 'react';
+
+interface ToastProps {
+  message: string;
+  type?: 'success' | 'error' | 'info' | 'warning';
+  duration?: number;
+  onClose?: () => void;
+}
+
+export function Toast({ message, type = 'info', duration = 5000, onClose }: ToastProps) {
+  const [isVisible, setIsVisible] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsVisible(false);
+      setTimeout(() => {
+        if (onClose) onClose();
+      }, 300); // Wait for fade out animation
+    }, duration);
+
+    return () => clearTimeout(timer);
+  }, [duration, onClose]);
+
+  const bgColor = {
+    success: 'bg-green-600',
+    error: 'bg-red-600',
+    info: 'bg-blue-600',
+    warning: 'bg-yellow-600',
+  }[type];
+
+  return (
+    <div
+      className={`fixed top-4 right-4 z-[10000] transition-all duration-300 ${
+        isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-2'
+      }`}
+    >
+      <div
+        className={`${bgColor} text-white px-6 py-4 rounded-lg shadow-lg flex items-center gap-3 min-w-[300px] max-w-[500px]`}
+      >
+        <div className="flex-1">
+          <p className="m-0 text-sm font-medium">{message}</p>
+        </div>
+        <button
+          onClick={() => {
+            setIsVisible(false);
+            setTimeout(() => {
+              if (onClose) onClose();
+            }, 300);
+          }}
+          className="text-white hover:text-gray-200 transition-colors"
+          aria-label="Close"
+        >
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <line x1="18" y1="6" x2="6" y2="18"></line>
+            <line x1="6" y1="6" x2="18" y2="18"></line>
+          </svg>
+        </button>
+      </div>
+    </div>
+  );
+}
+
+interface ToastContainerProps {
+  toasts: Array<{ id: string; message: string; type?: 'success' | 'error' | 'info' | 'warning' }>;
+  onRemove: (id: string) => void;
+}
+
+export function ToastContainer({ toasts, onRemove }: ToastContainerProps) {
+  return (
+    <div className="fixed top-4 right-4 z-[10000] flex flex-col gap-2">
+      {toasts.map((toast) => (
+        <Toast
+          key={toast.id}
+          message={toast.message}
+          type={toast.type}
+          onClose={() => onRemove(toast.id)}
+        />
+      ))}
+    </div>
+  );
+}
+

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
+    const centerThreshold = 0.05;
+    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 >= centerThreshold) {
+      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/FaceScanModal.tsx

@@ -4,6 +4,7 @@ import DocumentUploadModal from './DocumentUploadModal';
 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 '../index.css';
 
 interface FaceScanModalProps {
@@ -16,6 +17,7 @@ function FaceScanModal({ onComplete }: FaceScanModalProps) {
   const navigate = useNavigate();
   const { apiService } = useKycContext();
   const [sessionError, setSessionError] = useState<string | null>(null);
+  const [toast, setToast] = useState<{ message: string; type: 'success' | 'error' | 'info' | 'warning' } | null>(null);
   
   const { videoRef, cameraReady, stopCamera } = useCamera();
   const { state, setState, refs, handleFaceCapture } = useFaceScan(videoRef, faceCanvasRef, {
@@ -23,7 +25,26 @@ function FaceScanModal({ onComplete }: FaceScanModalProps) {
       if (!apiService) {
         throw new Error('API service not initialized');
       }
-      await apiService.uploadFaceScan(blob);
+      try {
+        await apiService.uploadFaceScan(blob);
+      } catch (error: any) {
+        const errorMessage = error?.message || '';
+        const errorData = (error as any)?.errorData || {};
+        
+        if (
+          errorMessage.includes('Face already registered') || 
+          errorMessage.includes('already registered') ||
+          errorData?.message?.includes('Face already registered') ||
+          (error as any)?.statusCode === 500 && errorMessage.includes('Face')
+        ) {
+          setToast({
+            message: 'Face already registered',
+            type: 'warning',
+          });
+          return;
+        }
+        throw error;
+      }
     },
     onFaceCaptureComplete: (imageData: string) => {
       if (onComplete) {
@@ -32,7 +53,6 @@ function FaceScanModal({ onComplete }: FaceScanModalProps) {
     },
   });
   
-  // Check session status on mount
   useEffect(() => {
     const checkSession = async () => {
       if (!apiService) return;
@@ -43,7 +63,6 @@ function FaceScanModal({ onComplete }: FaceScanModalProps) {
       } 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);
@@ -53,15 +72,12 @@ function FaceScanModal({ onComplete }: FaceScanModalProps) {
     checkSession();
   }, [apiService, navigate]);
 
-  // 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 ===');
@@ -70,7 +86,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 ===');
@@ -128,8 +143,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">
@@ -147,8 +161,17 @@ function FaceScanModal({ onComplete }: FaceScanModalProps) {
   }
 
   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 mt-48">
+    <>
+      {toast && (
+        <Toast
+          message={toast.message}
+          type={toast.type}
+          onClose={() => setToast(null)}
+          duration={6000}
+        />
+      )}
+      <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 mt-48">
         <div className="relative mb-4">
           <h2 className="m-0 mb-4 text-[26px] font-bold text-white text-center">
             Capture Face
@@ -231,6 +254,7 @@ function FaceScanModal({ onComplete }: FaceScanModalProps) {
         </div>
       </div>
     </div>
+    </>
   );
 }
 

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,29 @@ 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
+        if (absYaw < centerThreshold && insideGuide) {
+          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) {
+            if (!insideGuide) {
+              this.callbacks.onLivenessUpdate(state.stage, "Center your face inside the circle");
+            } else {
+              this.callbacks.onLivenessUpdate(state.stage, "Please look straight at the camera");
+            }
+          }
+        }
       }
     }
   }

package/src/services/kycApiService.ts

@@ -114,7 +114,11 @@ export class KycApiService {
       if (!response.ok) {
         const errorData = await response.json().catch(() => ({}));
         const message = errorData?.message || `Face upload failed with status ${response.status}`;
-        throw new Error(message);
+        // Preserve the original error message for better error handling
+        const error = new Error(message);
+        (error as any).statusCode = response.status;
+        (error as any).errorData = errorData;
+        throw error;
       }
 
       const data = await response.json();