astra-sdk-web 1.1.5 → 1.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astra-sdk-web",
-  "version": "1.1.5",
+  "version": "1.1.7",
   "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/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,29 @@ 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) {
+        // Check if it's a "Face already registered" error
+        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 has already been registered for this session. Proceeding to document upload.',
+            type: 'warning',
+          });
+          // Don't throw error - allow flow to continue to document upload
+          return;
+        }
+        // Re-throw other errors
+        throw error;
+      }
     },
     onFaceCaptureComplete: (imageData: string) => {
       if (onComplete) {
@@ -147,8 +171,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 +264,7 @@ function FaceScanModal({ onComplete }: FaceScanModalProps) {
         </div>
       </div>
     </div>
+    </>
   );
 }
 

package/src/pages/QRCodePage.tsx

@@ -86,14 +86,14 @@ function QRCodePage({ onClose, onNavigate, mobileBaseUrl = 'https://astra-sdk-re
           </p>
           
           {qrUrl && (
-            <div className="flex justify-center items-center p-3 sm:p-4 bg-white rounded-xl border-2 border-white">
+            <div className="flex justify-center items-center p-3 sm:p-4 bg-black rounded-xl border-2 border-white shadow-lg">
               <QRCodeSVG
                 value={qrUrl}
                 size={180}
                 level="H"
                 includeMargin={true}
-                bgColor="transparent"
-                fgColor="#000000"
+                bgColor="#000000"
+                fgColor="#FFFFFF"
               />
             </div>
           )}

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();