astra-sdk-web 1.1.8 → 1.1.10

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;
@@ -125,6 +121,10 @@ declare class KycApiService {
      * Upload document scan image
      */
     uploadDocument(docBlob: Blob | File, docType: string): Promise<DocumentUploadResponse>;
+    /**
+     * Retry session - resets the session to allow face registration again
+     */
+    retrySession(): Promise<any>;
     /**
      * Check if session is active, throw error if not
      */

package/package.json

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

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

@@ -78,8 +78,8 @@ export function useFaceScan(
   const handleFaceCapture = useCallback(async () => {
     if (!videoRef.current) return;
     
-    // Check if face is straight before capturing
-    const centerThreshold = 0.05;
+    // 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) {
@@ -90,7 +90,7 @@ export function useFaceScan(
       return;
     }
     
-    if (currentAbsYaw >= centerThreshold) {
+    if (currentAbsYaw >= reducedThreshold) {
       setState(prev => ({
         ...prev,
         livenessInstruction: "Please look straight at the camera before capturing",

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 {
@@ -12,6 +13,7 @@ function DocumentUploadModal({ onComplete }: DocumentUploadModalProps) {
   const navigate = useNavigate();
   const { apiService } = useKycContext();
   const [sessionError, setSessionError] = useState<string | null>(null);
+  const [kycCompleted, setKycCompleted] = useState(false);
   
   const {
     state,
@@ -28,6 +30,16 @@ function DocumentUploadModal({ onComplete }: DocumentUploadModalProps) {
         throw new Error('API service not initialized');
       }
       await apiService.uploadDocument(blob, docType);
+      // Check if KYC is completed after document upload
+      try {
+        const statusResponse = await apiService.getSessionStatus();
+        const { completed_steps, status } = statusResponse.data;
+        if (status === 'COMPLETED' || completed_steps.includes(COMPLETED_STEPS.COMPLETED)) {
+          setKycCompleted(true);
+        }
+      } catch (error) {
+        console.error('Error checking completion status:', error);
+      }
     },
     onUpload: (file, docType) => {
       if (onComplete) {
@@ -47,7 +59,35 @@ 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 KYC is completed
+        if (status === 'COMPLETED' || completed_steps.includes(COMPLETED_STEPS.COMPLETED)) {
+          setKycCompleted(true);
+          return;
+        }
+        
+        // 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)) {
+          // Check if all steps are completed
+          if (completed_steps.includes(COMPLETED_STEPS.FACE) && completed_steps.includes(COMPLETED_STEPS.DOCS)) {
+            setKycCompleted(true);
+            return;
+          }
+        }
+        
+        // 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';
@@ -63,6 +103,28 @@ function DocumentUploadModal({ onComplete }: DocumentUploadModalProps) {
   }, [apiService, navigate]);
 
 
+  // Show KYC completion message
+  if (kycCompleted) {
+    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">
+            <div className="mb-4 text-6xl">✅</div>
+            <h2 className="m-0 mb-4 text-[26px] font-bold text-green-500">
+              KYC Completed
+            </h2>
+            <p className="text-[#e5e7eb] mb-4 text-lg">
+              All steps have been completed successfully.
+            </p>
+            <p className="text-[#9ca3af] text-sm mb-6">
+              Please return to your desktop to continue.
+            </p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   // Show session error if present
   if (sessionError) {
     return (

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 {
@@ -18,6 +19,9 @@ function FaceScanModal({ onComplete }: FaceScanModalProps) {
   const { apiService } = useKycContext();
   const [sessionError, setSessionError] = useState<string | null>(null);
   const [toast, setToast] = useState<{ message: string; type: 'success' | 'error' | 'info' | 'warning' } | null>(null);
+  const [showRetryButton, setShowRetryButton] = useState(false);
+  const [isRetrying, setIsRetrying] = useState(false);
+  const [kycCompleted, setKycCompleted] = useState(false);
   
   const { videoRef, cameraReady, stopCamera } = useCamera();
   const { state, setState, refs, handleFaceCapture } = useFaceScan(videoRef, faceCanvasRef, {
@@ -37,10 +41,12 @@ function FaceScanModal({ onComplete }: FaceScanModalProps) {
           errorData?.message?.includes('Face already registered') ||
           (error as any)?.statusCode === 500 && errorMessage.includes('Face')
         ) {
+          setShowRetryButton(true);
           setToast({
-            message: 'Face already registered',
+            message: 'Face already registered. Click Retry to register again.',
             type: 'warning',
           });
+          setState(prev => ({ ...prev, loading: false }));
           return;
         }
         throw error;
@@ -58,7 +64,34 @@ function FaceScanModal({ onComplete }: FaceScanModalProps) {
       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');
+        }
+        
+        // Check if KYC is completed
+        if (status === 'COMPLETED' || completed_steps.includes(COMPLETED_STEPS.COMPLETED)) {
+          setKycCompleted(true);
+          return;
+        }
+        
+        // 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';
@@ -70,7 +103,7 @@ function FaceScanModal({ onComplete }: FaceScanModalProps) {
     };
     
     checkSession();
-  }, [apiService, navigate]);
+  }, [apiService, navigate, setState]);
 
   useEffect(() => {
     setState(prev => ({ ...prev, cameraReady }));
@@ -103,7 +136,55 @@ function FaceScanModal({ onComplete }: FaceScanModalProps) {
     }
   }, [cameraReady, apiService]);
 
-  const handleRetry = () => {
+  const handleRetry = async () => {
+    if (!apiService || isRetrying) return;
+    
+    setIsRetrying(true);
+    setShowRetryButton(false);
+    setToast(null);
+    
+    try {
+      await apiService.retrySession();
+      
+      // Reset face scan state
+      stopCamera();
+      setState({
+        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,
+      });
+      
+      refs.centerHold.current = 0;
+      refs.leftHold.current = 0;
+      refs.rightHold.current = 0;
+      refs.snapTriggered.current = false;
+      refs.lastResultsAt.current = 0;
+      refs.modelLoaded.current = false;
+      refs.livenessFailed.current = false;
+      
+      // Reload to restart face scan
+      setTimeout(() => {
+        window.location.reload();
+      }, 500);
+    } catch (error: any) {
+      setIsRetrying(false);
+      setShowRetryButton(true);
+      setToast({
+        message: error?.message || 'Retry failed. Please try again.',
+        type: 'error',
+      });
+    }
+  };
+
+  const handleRestart = () => {
     stopCamera();
     setState({
       cameraReady: false,
@@ -132,6 +213,28 @@ function FaceScanModal({ onComplete }: FaceScanModalProps) {
     }, 100);
   };
 
+  // Show KYC completion message
+  if (kycCompleted) {
+    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">
+            <div className="mb-4 text-6xl">✅</div>
+            <h2 className="m-0 mb-4 text-[26px] font-bold text-green-500">
+              KYC Completed
+            </h2>
+            <p className="text-[#e5e7eb] mb-4 text-lg">
+              All steps have been completed successfully.
+            </p>
+            <p className="text-[#9ca3af] text-sm mb-6">
+              Please return to your desktop to continue.
+            </p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   if (state.showDocumentUpload) {
     return (
       <DocumentUploadModal
@@ -224,12 +327,23 @@ function FaceScanModal({ onComplete }: FaceScanModalProps) {
             </div>
           )}
           
+          {showRetryButton && (
+            <button
+              type="button"
+              onClick={handleRetry}
+              disabled={isRetrying || state.loading}
+              className="py-3.5 px-4 rounded-xl text-base font-bold border-none transition-colors bg-[#f59e0b] text-[#0b0f17] cursor-pointer hover:bg-[#d97706] disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {isRetrying ? "Retrying..." : "Retry Face Registration"}
+            </button>
+          )}
+          
           <button
             type="button"
-            disabled={!state.cameraReady || state.loading || (!state.livenessFailed && state.livenessStage !== "DONE")}
+            disabled={!state.cameraReady || state.loading || (!state.livenessFailed && state.livenessStage !== "DONE") || showRetryButton}
             onClick={handleFaceCapture}
             className={`py-3.5 px-4 rounded-xl text-base font-bold border-none transition-colors ${
-              state.cameraReady && !state.loading && (state.livenessFailed || state.livenessStage === "DONE")
+              state.cameraReady && !state.loading && (state.livenessFailed || state.livenessStage === "DONE") && !showRetryButton
                 ? "bg-[#22c55e] text-[#0b0f17] cursor-pointer hover:bg-[#16a34a]"
                 : "bg-[#374151] text-[#e5e7eb] cursor-not-allowed"
             }`}
@@ -243,10 +357,10 @@ function FaceScanModal({ onComplete }: FaceScanModalProps) {
           
           <button
             type="button"
-            onClick={handleRetry}
-            disabled={state.loading}
+            onClick={handleRestart}
+            disabled={state.loading || isRetrying}
             className={`py-3 px-4 rounded-[10px] text-[15px] font-semibold border-none w-full transition-colors ${
-              state.loading ? "bg-[#374151] text-[#e5e7eb] cursor-not-allowed opacity-50" : "bg-[#374151] text-[#e5e7eb] cursor-pointer hover:bg-[#4b5563]"
+              (state.loading || isRetrying) ? "bg-[#374151] text-[#e5e7eb] cursor-not-allowed opacity-50" : "bg-[#374151] text-[#e5e7eb] cursor-pointer hover:bg-[#4b5563]"
             }`}
           >
             Restart

package/src/services/faceMeshService.ts

@@ -265,8 +265,10 @@ export class FaceMeshService {
           }
         }
       } else if (state.stage === "DONE") {
-        // In DONE stage, wait for face to be straight before capturing
-        if (absYaw < centerThreshold && insideGuide) {
+        // 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;
@@ -280,11 +282,7 @@ export class FaceMeshService {
         } 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");
-            }
+            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;
@@ -170,6 +177,40 @@ export class KycApiService {
     }
   }
 
+  /**
+   * Retry session - resets the session to allow face registration again
+   */
+  async retrySession(): Promise<any> {
+    const deviceType = this.config.deviceType || this.detectDeviceType();
+    
+    try {
+      const response = await fetch(
+        `${this.config.apiBaseUrl}/api/v2/dashboard/merchant/onsite/session/${this.config.sessionId}/retry`,
+        {
+          method: 'POST',
+          headers: {
+            'x-server-key': this.config.serverKey,
+            'device-type': deviceType,
+            'Content-Type': 'application/json',
+          },
+          credentials: 'include',
+        }
+      );
+
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}));
+        const message = errorData?.message || `Retry failed with status ${response.status}`;
+        throw new Error(message);
+      }
+
+      const data = await response.json();
+      return data;
+    } catch (error: any) {
+      const message = error?.message || 'Retry failed';
+      throw new Error(`Retry failed: ${message}`);
+    }
+  }
+
   /**
    * Check if session is active, throw error if not
    */