astra-sdk-web 1.1.3 → 1.1.5

package/package.json

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

package/src/components/KycFlow.tsx

@@ -10,6 +10,7 @@ export interface KycFlowProps {
   deviceType?: string;
   startAtQr?: boolean;
   onClose?: () => void;
+  mobileBaseUrl?: string;
 }
 
 type KycFlowView = 'qr' | 'mobileroute';
@@ -21,6 +22,7 @@ export const KycFlow: React.FC<KycFlowProps> = ({
   deviceType,
   startAtQr = true,
   onClose,
+  mobileBaseUrl = 'https://astra-sdk-rebuild.vercel.app',
 }) => {
   const [currentView, setCurrentView] = useState<KycFlowView>(startAtQr ? 'qr' : 'mobileroute');
 
@@ -42,7 +44,14 @@ export const KycFlow: React.FC<KycFlowProps> = ({
       deviceType={deviceType}
     >
       {currentView === 'qr' ? (
-        <QRCodePage onClose={handleClose} onNavigate={handleNavigate} />
+        <QRCodePage 
+          onClose={handleClose} 
+          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

@@ -5,23 +5,37 @@ import '../index.css';
 interface QRCodePageProps {
   onClose?: () => void;
   onNavigate?: (view: 'qr' | 'mobileroute') => void;
+  mobileBaseUrl?: string;
+  sessionId?: string;
+  apiBaseUrl?: string;
+  serverKey?: string;
 }
 
-function QRCodePage({ onClose, onNavigate }: 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);
 
   useEffect(() => {
-    const currentUrl = window.location.origin;
-    
     // Get search params from current URL
     const searchParams = new URLSearchParams(window.location.search);
+    
+    // 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 = `${currentUrl}${mobileRoute}${queryString ? `?${queryString}` : ''}`;
+    const fullUrl = `${mobileBaseUrl}${mobileRoute}${queryString ? `?${queryString}` : ''}`;
     
     setQrUrl(fullUrl);
-  }, []);
+  }, [mobileBaseUrl, sessionId, apiBaseUrl, serverKey]);
 
   const handleCopyUrl = async () => {
     if (qrUrl) {
@@ -46,8 +60,14 @@ function QRCodePage({ onClose, onNavigate }: QRCodePageProps = {}) {
   };
 
   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)]">
+    <div className="fixed inset-0 flex items-center justify-center bg-gradient-to-br from-gray-900 via-gray-800 to-black p-4 sm:p-6 md:p-8 z-[1000]">
+      {/* Background pattern overlay */}
+      <div className="absolute inset-0 opacity-10" style={{
+        backgroundImage: `radial-gradient(circle at 2px 2px, rgba(255,255,255,0.15) 1px, transparent 0)`,
+        backgroundSize: '40px 40px'
+      }}></div>
+      
+      <div className="relative bg-[rgba(20,20,20,0.95)] backdrop-blur-sm 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)] border border-white/10">
         <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}