astra-sdk-web 1.0.0 → 1.1.1

package/src/pages/FaceScanModal.tsx

@@ -0,0 +1,207 @@
+import { useRef, useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import DocumentUploadModal from './DocumentUploadModal';
+import { useCamera } from '../features/faceScan/hooks/useCamera';
+import { useFaceScan } from '../features/faceScan/hooks/useFaceScan';
+import { useKycContext } from '../contexts/KycContext';
+import '../index.css';
+
+interface FaceScanModalProps {
+  onClose: () => void;
+  onComplete?: (capturedImage: string) => void;
+}
+
+function FaceScanModal({ onComplete }: FaceScanModalProps) {
+  const faceCanvasRef = useRef<HTMLCanvasElement>(null);
+  const navigate = useNavigate();
+  const { apiService } = useKycContext();
+  const [sessionError, setSessionError] = useState<string | null>(null);
+  
+  const { videoRef, cameraReady, stopCamera } = useCamera();
+  const { state, setState, refs, handleFaceCapture } = useFaceScan(videoRef, faceCanvasRef, {
+    onFaceUpload: async (blob: Blob) => {
+      if (!apiService) {
+        throw new Error('API service not initialized');
+      }
+      await apiService.uploadFaceScan(blob);
+    },
+    onFaceCaptureComplete: (imageData: string) => {
+      if (onComplete) {
+        onComplete(imageData);
+      }
+    },
+  });
+  
+  // 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]);
+
+  // Sync camera ready state
+  useEffect(() => {
+    setState(prev => ({ ...prev, cameraReady }));
+  }, [cameraReady, setState]);
+
+  const handleRetry = () => {
+    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;
+    
+    setTimeout(() => {
+      window.location.reload();
+    }, 100);
+  };
+
+  if (state.showDocumentUpload) {
+    return (
+      <DocumentUploadModal
+        onComplete={(_file, _docType) => {
+          if (onComplete && state.capturedImage) {
+            onComplete(state.capturedImage);
+          }
+        }}
+      />
+    );
+  }
+
+  // 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 mt-48">
+        <div className="relative mb-4">
+          <h2 className="m-0 mb-4 text-[26px] font-bold text-white text-center">
+            Capture Face
+          </h2>
+        </div>
+        
+        <div className="grid gap-4">
+          {!state.modelLoading && state.modelLoaded && !state.livenessFailed && (
+            <div className="bg-[#0a2315] text-[#34d399] py-3.5 px-4 rounded-xl text-sm border border-[#155e3b] text-left">
+              Face detection model loaded.
+            </div>
+          )}
+          {state.modelLoading && !state.livenessFailed && (
+            <div className="bg-[#1f2937] text-[#e5e7eb] py-3.5 px-4 rounded-xl text-sm border border-[#374151] text-left">
+              Loading face detection model...
+            </div>
+          )}
+          
+          <div className="relative w-full aspect-square rounded-full overflow-hidden bg-black">
+            <video 
+              ref={videoRef} 
+              playsInline 
+              muted 
+              className="w-full h-full block bg-black object-cover -scale-x-100 origin-center"
+            />
+            <canvas
+              ref={faceCanvasRef}
+              className="absolute top-0 left-0 w-full h-full pointer-events-none z-[2]"
+            />
+            <svg viewBox="0 0 100 100" preserveAspectRatio="none" className="absolute inset-0 pointer-events-none z-[3]">
+              <circle cx="50" cy="50" r="44" fill="none" stroke="#22c55e" strokeWidth="2" strokeDasharray="1 3" />
+            </svg>
+          </div>
+          
+          {!state.livenessFailed && (
+            <div className="bg-gradient-to-b from-[rgba(17,24,39,0.9)] to-[rgba(17,24,39,0.6)] text-[#e5e7eb] p-4 rounded-2xl text-base border border-[#30363d]">
+              <div className="font-bold mb-2.5 text-[22px] text-white">Liveness Check</div>
+              <div className="mb-2.5 text-base">{state.livenessInstruction}</div>
+              <div className="grid gap-2.5 text-lg">
+                <div className={state.livenessStage === "CENTER" || state.livenessStage === "LEFT" || state.livenessStage === "RIGHT" || state.livenessStage === "DONE" ? "opacity-100" : "opacity-40"}>
+                  1. Look Straight
+                </div>
+                <div className={state.livenessStage === "RIGHT" || state.livenessStage === "DONE" ? "opacity-100" : "opacity-40"}>
+                  2. Turn your face right
+                </div>
+                <div className={state.livenessStage === "DONE" ? "opacity-100" : "opacity-30"}>
+                  3. Turn your face left
+                </div>
+              </div>
+            </div>
+          )}
+          
+          <button
+            type="button"
+            disabled={!state.cameraReady || state.loading || (!state.livenessFailed && state.livenessStage !== "DONE")}
+            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")
+                ? "bg-[#22c55e] text-[#0b0f17] cursor-pointer hover:bg-[#16a34a]"
+                : "bg-[#374151] text-[#e5e7eb] cursor-not-allowed"
+            }`}
+          >
+            {state.loading
+              ? "Capturing..."
+              : (state.livenessFailed || state.livenessStage === "DONE")
+                ? "Capture & Continue"
+                : "Complete steps to continue"}
+          </button>
+          
+          <button
+            type="button"
+            onClick={handleRetry}
+            disabled={state.loading}
+            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]"
+            }`}
+          >
+            Restart
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default FaceScanModal;

package/src/pages/MobileRoute.tsx

@@ -0,0 +1,42 @@
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { isMobileDevice } from '../utils/deviceDetection';
+import FaceScanModal from './FaceScanModal';
+import '../index.css';
+
+interface MobileRouteProps {
+  onClose?: () => void;
+}
+
+function MobileRoute({ onClose }: MobileRouteProps = {}) {
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (!isMobileDevice()) {
+      navigate('/qr', { replace: true });
+      return;
+    }
+  }, [navigate]);
+
+  const handleClose = () => {
+    if (onClose) {
+      onClose();
+    } else {
+      navigate(-1);
+    }
+  };
+
+  const handleComplete = (capturedImage: string) => {
+    // Handle completion - send captured image to backend or parent
+    console.log('Face capture completed with image:', capturedImage.substring(0, 50) + '...');
+    // You can emit an event, call a callback, or navigate here
+  };
+
+  if (!isMobileDevice()) {
+    return null;
+  }
+
+  return <FaceScanModal onClose={handleClose} onComplete={handleComplete} />;
+}
+
+export default MobileRoute;

package/src/pages/QRCodePage.tsx

@@ -0,0 +1,125 @@
+import { useState, useEffect } from 'react';
+import { QRCodeSVG } from 'qrcode.react';
+import { useSearchParams, useNavigate } from 'react-router-dom';
+import '../index.css';
+
+interface QRCodePageProps {
+  onClose?: () => void;
+}
+
+function QRCodePage({ onClose }: QRCodePageProps = {}) {
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+  const [qrUrl, setQrUrl] = useState<string>('');
+  const [copied, setCopied] = useState<boolean>(false);
+
+  useEffect(() => {
+    const currentUrl = window.location.origin;
+
+    const params: Record<string, string> = {};
+    searchParams.forEach((value, key) => {
+      params[key] = value;
+    });
+
+    const mobileRoute = '/mobileroute';
+    const queryString = new URLSearchParams(params).toString();
+    const fullUrl = `${currentUrl}${mobileRoute}${queryString ? `?${queryString}` : ''}`;
+    
+    setQrUrl(fullUrl);
+  }, [searchParams]);
+
+  const handleCopyUrl = async () => {
+    if (qrUrl) {
+      try {
+        await navigator.clipboard.writeText(qrUrl);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+      } catch (err) {
+        console.error('Failed to copy:', err);
+      }
+    }
+  };
+
+  const handleClose = () => {
+    if (onClose) {
+      onClose();
+    } else {
+      navigate(-1);
+    }
+  };
+
+  const handleRefresh = () => {
+    window.location.reload();
+  };
+
+  return (
+    <div className="fixed inset-0 flex items-center justify-center bg-black p-4 sm:p-6 md:p-8 z-[1000]">
+      <div className="relative bg-[rgba(20,20,20,0.95)] rounded-2xl p-5 sm:p-6 md:p-7 max-w-[450px] w-full h-[80vh] flex flex-col text-center shadow-[0_8px_32px_rgba(0,0,0,0.5)]">
+        <button 
+          className="absolute top-5 right-5 bg-transparent border-none text-white cursor-pointer p-2 flex items-center justify-center rounded transition-colors hover:bg-white/10 active:bg-white/20" 
+          onClick={handleClose} 
+          aria-label="Close"
+        >
+          <svg width="24" height="24" 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 className="flex flex-col items-center gap-3 sm:gap-4 flex-1 overflow-y-auto custom__scrollbar">
+          <h1 className="m-0 text-white text-xl sm:text-2xl font-semibold leading-tight">Continue on Mobile</h1>
+          <p className="m-0 text-white text-sm sm:text-base opacity-90 leading-relaxed">
+            Scan this QR on your phone to capture your face and document
+          </p>
+          
+          {qrUrl && (
+            <div className="flex justify-center items-center p-3 sm:p-4 bg-white rounded-xl border-2 border-white">
+              <QRCodeSVG
+                value={qrUrl}
+                size={180}
+                level="H"
+                includeMargin={true}
+                bgColor="transparent"
+                fgColor="#000000"
+              />
+            </div>
+          )}
+
+          <div className="w-full text-left mt-auto">
+            <p className="m-0 mb-2 text-white text-xs sm:text-sm opacity-80">Or open:</p>
+            <div className="flex flex-col sm:flex-row items-start sm:items-center gap-2 p-2 sm:p-3 bg-white/10 rounded-lg border border-white/20">
+              <code className="flex-1 text-white text-xs sm:text-sm break-all text-left m-0 font-mono">{qrUrl}</code>
+              <button 
+                className="bg-transparent border-none text-white cursor-pointer p-1.5 flex items-center justify-center rounded transition-colors flex-shrink-0 hover:bg-white/10 active:bg-white/20 self-end sm:self-auto" 
+                onClick={handleCopyUrl}
+                aria-label="Copy URL"
+                title={copied ? 'Copied!' : 'Copy URL'}
+              >
+                {copied ? (
+                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                    <polyline points="20 6 9 17 4 12"></polyline>
+                  </svg>
+                ) : (
+                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                    <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+                    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+                  </svg>
+                )}
+              </button>
+            </div>
+          </div>
+
+          <button 
+            className="w-full py-3 sm:py-4 px-6 bg-gradient-to-r from-[#FF842D] to-[#FF2D55] border-none rounded-lg text-white text-sm sm:text-base font-semibold cursor-pointer transition-all hover:-translate-y-0.5 hover:shadow-[0_4px_12px_rgba(255,107,53,0.4)] active:translate-y-0" 
+            onClick={handleRefresh}
+          >
+            I've completed on mobile - Refresh
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default QRCodePage;
+

package/src/sdk/index.ts

@@ -1,6 +1,3 @@
-/**
- * Astra SDK - Main entry point
- */
 
 import { ApiClient } from './client';
 import { mergeConfig } from './config';
@@ -19,23 +16,17 @@ export class AstraSDK {
     this.client = new ApiClient(mergedConfig);
   }
 
-  /**
-   * Get the underlying API client
-   */
+  
   getClient(): ApiClient {
     return this.client;
   }
 
-  /**
-   * Update SDK configuration
-   */
+  
   updateConfig(config: Partial<AstraSDKConfig>): void {
     this.client.updateConfig(config);
   }
 
-  /**
-   * Make a GET request
-   */
+  
   async get<T = unknown>(
     endpoint: string,
     options?: Omit<RequestOptions, 'method' | 'body'>
@@ -43,9 +34,7 @@ export class AstraSDK {
     return this.client.get<T>(endpoint, options);
   }
 
-  /**
-   * Make a POST request
-   */
+
   async post<T = unknown>(
     endpoint: string,
     body?: unknown,
@@ -54,9 +43,6 @@ export class AstraSDK {
     return this.client.post<T>(endpoint, body, options);
   }
 
-  /**
-   * Make a PUT request
-   */
   async put<T = unknown>(
     endpoint: string,
     body?: unknown,
@@ -65,9 +51,6 @@ export class AstraSDK {
     return this.client.put<T>(endpoint, body, options);
   }
 
-  /**
-   * Make a PATCH request
-   */
   async patch<T = unknown>(
     endpoint: string,
     body?: unknown,
@@ -76,9 +59,6 @@ export class AstraSDK {
     return this.client.patch<T>(endpoint, body, options);
   }
 
-  /**
-   * Make a DELETE request
-   */
   async delete<T = unknown>(
     endpoint: string,
     options?: Omit<RequestOptions, 'method' | 'body'>
@@ -86,9 +66,7 @@ export class AstraSDK {
     return this.client.delete<T>(endpoint, options);
   }
 
-  /**
-   * Make a generic request
-   */
+  
   async request<T = unknown>(
     endpoint: string,
     options?: RequestOptions
@@ -97,13 +75,23 @@ export class AstraSDK {
   }
 }
 
-// Export types
 export type { AstraSDKConfig, ApiResponse, RequestOptions, ApiError } from './types';
 export { AstraSDKError } from './types';
 
-// Export client for advanced usage
 export { ApiClient } from './client';
 
-// Default export
+// Export KYC components
+export { KycFlow } from '../components/KycFlow';
+export type { KycFlowProps } from '../components/KycFlow';
+
+// Export KYC API service
+export { KycApiService } from '../services/kycApiService';
+export type { 
+  KycApiConfig, 
+  SessionStatusResponse, 
+  FaceScanResponse, 
+  DocumentUploadResponse 
+} from '../services/kycApiService';
+
 export default AstraSDK;