astra-sdk-web 1.1.4 → 1.1.6

package/package.json

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

package/src/components/KycFlow.tsx

@@ -49,6 +49,8 @@ export const KycFlow: React.FC<KycFlowProps> = ({
           onNavigate={handleNavigate}
           mobileBaseUrl={mobileBaseUrl}
           sessionId={sessionId}
+          apiBaseUrl={apiBaseUrl}
+          serverKey={serverKey}
         />
       ) : (
         <MobileRoute onClose={handleClose} onNavigate={handleNavigate} />

package/src/pages/FaceScanModal.tsx

@@ -58,6 +58,36 @@ function FaceScanModal({ onComplete }: FaceScanModalProps) {
     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 ===');
+        console.log('Session ID:', config.sessionId);
+        console.log('Server Key:', config.serverKey);
+        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 ===');
+            console.log('Full Response:', statusResponse);
+            console.log('Session Status:', statusResponse.data?.status);
+            console.log('Session ID:', statusResponse.data?.session_id);
+            console.log('Completed Steps:', statusResponse.data?.completed_steps);
+            console.log('Next Step:', statusResponse.data?.next_step);
+          })
+          .catch((error) => {
+            console.error('=== Session Status API Error ===');
+            console.error('Error fetching session status:', error);
+          });
+      }
+    }
+  }, [cameraReady, apiService]);
+
   const handleRetry = () => {
     stopCamera();
     setState({

package/src/pages/MobileRoute.tsx

@@ -1,6 +1,7 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { isMobileDevice } from '../utils/deviceDetection';
 import FaceScanModal from './FaceScanModal';
+import { KycProvider } from '../contexts/KycContext';
 import '../index.css';
 
 interface MobileRouteProps {
@@ -8,12 +9,41 @@ interface MobileRouteProps {
   onNavigate?: (view: 'qr' | 'mobileroute') => void;
 }
 
+// Inner component that uses the context
+function MobileRouteContent({ onClose, onComplete }: { onClose?: () => void; onComplete?: (image: string) => void }) {
+  return <FaceScanModal onClose={onClose} onComplete={onComplete} />;
+}
+
 function MobileRoute({ onClose, onNavigate }: MobileRouteProps = {}) {
+  const [config, setConfig] = useState<{
+    apiBaseUrl: string;
+    sessionId: string;
+    serverKey: string;
+  } | null>(null);
+
   useEffect(() => {
     if (!isMobileDevice() && onNavigate) {
       onNavigate('qr');
       return;
     }
+
+    // If accessed standalone (via URL), get config from URL params
+    const searchParams = new URLSearchParams(window.location.search);
+    const sessionId = searchParams.get('sessionId');
+    const apiBaseUrl = searchParams.get('apiBaseUrl') || searchParams.get('apiUrl') || '';
+    const serverKey = searchParams.get('serverKey') || '';
+
+    if (sessionId && apiBaseUrl && serverKey) {
+      setConfig({
+        apiBaseUrl,
+        sessionId,
+        serverKey,
+      });
+    } else if (sessionId) {
+      // Try to get from localStorage or use defaults
+      // For now, we'll need these to be passed via URL
+      console.error('Missing required parameters: apiBaseUrl and serverKey must be in URL');
+    }
   }, [onNavigate]);
 
   const handleClose = () => {
@@ -32,7 +62,39 @@ function MobileRoute({ onClose, onNavigate }: MobileRouteProps = {}) {
     return null;
   }
 
-  return <FaceScanModal onClose={handleClose} onComplete={handleComplete} />;
+  // If we have config from URL (standalone mode), wrap in provider
+  if (config) {
+    return (
+      <KycProvider
+        apiBaseUrl={config.apiBaseUrl}
+        sessionId={config.sessionId}
+        serverKey={config.serverKey}
+        deviceType="mobile"
+      >
+        <MobileRouteContent onClose={handleClose} onComplete={handleComplete} />
+      </KycProvider>
+    );
+  }
+
+  // If used within SDK (has onNavigate), it should already be wrapped in provider
+  // But we'll still wrap it to be safe
+  if (onNavigate) {
+    // This means it's being used within the SDK component
+    // The provider should already be there, but we'll render the content directly
+    return <MobileRouteContent onClose={handleClose} onComplete={handleComplete} />;
+  }
+
+  // Fallback: show error if no config
+  return (
+    <div className="fixed inset-0 flex items-center justify-center bg-black/50 z-[1000]">
+      <div className="bg-white p-6 rounded-lg text-center max-w-md mx-4">
+        <p className="text-red-600 mb-2">Missing Configuration</p>
+        <p className="text-sm text-gray-600">
+          Please ensure the URL includes sessionId, apiBaseUrl, and serverKey parameters.
+        </p>
+      </div>
+    </div>
+  );
 }
 
 export default MobileRoute;

package/src/pages/QRCodePage.tsx

@@ -7,9 +7,11 @@ interface QRCodePageProps {
   onNavigate?: (view: 'qr' | 'mobileroute') => void;
   mobileBaseUrl?: string;
   sessionId?: string;
+  apiBaseUrl?: string;
+  serverKey?: string;
 }
 
-function QRCodePage({ onClose, onNavigate, mobileBaseUrl = 'https://astra-sdk-rebuild.vercel.app', sessionId }: QRCodePageProps = {}) {
+function QRCodePage({ onClose, onNavigate, mobileBaseUrl = 'https://astra-sdk-rebuild.vercel.app', sessionId, apiBaseUrl, serverKey }: QRCodePageProps = {}) {
   const [qrUrl, setQrUrl] = useState<string>('');
   const [copied, setCopied] = useState<boolean>(false);
 
@@ -17,17 +19,23 @@ function QRCodePage({ onClose, onNavigate, mobileBaseUrl = 'https://astra-sdk-re
     // Get search params from current URL
     const searchParams = new URLSearchParams(window.location.search);
     
-    // Add sessionId to query params if provided
+    // Add required params to query string for mobile route
     if (sessionId) {
       searchParams.set('sessionId', sessionId);
     }
+    if (apiBaseUrl) {
+      searchParams.set('apiBaseUrl', apiBaseUrl);
+    }
+    if (serverKey) {
+      searchParams.set('serverKey', serverKey);
+    }
     
     const mobileRoute = '/mobileroute';
     const queryString = searchParams.toString();
     const fullUrl = `${mobileBaseUrl}${mobileRoute}${queryString ? `?${queryString}` : ''}`;
     
     setQrUrl(fullUrl);
-  }, [mobileBaseUrl, sessionId]);
+  }, [mobileBaseUrl, sessionId, apiBaseUrl, serverKey]);
 
   const handleCopyUrl = async () => {
     if (qrUrl) {
@@ -78,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>
           )}