@trustchex/react-native-sdk 1.374.0 → 1.409.0

package/src/Screens/Dynamic/VideoCallScreen.tsx

@@ -0,0 +1,764 @@
+import React, { useEffect, useState, useRef, useContext } from 'react';
+import {
+  Dimensions,
+  Platform,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+  ActivityIndicator,
+  PermissionsAndroid,
+  StatusBar,
+} from 'react-native';
+import { RTCView, MediaStream } from 'react-native-webrtc';
+import InCallManager from 'react-native-incall-manager';
+import LottieView from 'lottie-react-native';
+import { useTranslation } from 'react-i18next';
+import { useStatusBarWhiteBackground } from '../../Shared/Libs/status-bar.utils';
+import { WebRTCService } from '../../Shared/Services/WebRTCService';
+import { VideoSessionService } from '../../Shared/Services/VideoSessionService';
+import { DataUploadService } from '../../Shared/Services/DataUploadService';
+import AppContext from '../../Shared/Contexts/AppContext';
+import NavigationManager, {
+  type NavigationManagerRef,
+} from '../../Shared/Components/NavigationManager';
+import StyledButton from '../../Shared/Components/StyledButton';
+import {
+  trackVerificationStart,
+  trackVerificationComplete,
+} from '../../Shared/Libs/analytics.utils';
+import { useKeepAwake } from '../../Shared/Libs/native-keep-awake.utils';
+
+const { width, height } = Dimensions.get('window');
+
+const VideoCallScreen = ({ navigation }: any) => {
+  useKeepAwake();
+  const appContext = useContext(AppContext);
+  const { baseUrl, identificationInfo, onError } = appContext;
+  const { t } = useTranslation();
+
+  // Configure status bar for white background
+  useStatusBarWhiteBackground();
+
+  const [hasGuideShown, setHasGuideShown] = useState(false);
+  const [localStream, setLocalStream] = useState<MediaStream | null>(null);
+  const [remoteStream, setRemoteStream] = useState<MediaStream | null>(null);
+  const [connectionState, setConnectionState] = useState<string>('connecting');
+  const [queuePosition, setQueuePosition] = useState<number | null>(null);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [showLeaveButton, setShowLeaveButton] = useState(false);
+  const [uploadStatus, setUploadStatus] = useState<
+    'pending' | 'uploading' | 'done' | 'failed'
+  >('pending');
+  const [agentInstructions, setAgentInstructions] = useState<
+    Array<{ id: string; text: string; timestamp: number }>
+  >([]);
+  const [localStreamKey, setLocalStreamKey] = useState(0);
+
+  // Update status bar when guide visibility changes
+  useEffect(() => {
+    if (hasGuideShown) {
+      // Video call view - use light icons
+      StatusBar.setBarStyle('light-content', true);
+    } else {
+      // Guide screen with white background - use dark icons
+      StatusBar.setBarStyle('dark-content', true);
+      StatusBar.setBackgroundColor('#ffffff', true);
+    }
+  }, [hasGuideShown]);
+  const serviceRef = useRef<WebRTCService | null>(null);
+  const videoSessionServiceRef = useRef<VideoSessionService | null>(null);
+  const dataUploadServiceRef = useRef<DataUploadService | null>(null);
+  const uploadPromiseMapRef = useRef<Map<string, Promise<boolean>>>(new Map());
+  const navigationManagerRef = useRef<NavigationManagerRef>(null);
+  const joinedSessionIdRef = useRef<string | null>(null);
+  const callConnectedRef = useRef<boolean>(false);
+  const sessionEndedRef = useRef<boolean>(false);
+
+  const handleRemoteCommand = (command: any) => {
+    switch (command.type) {
+      case 'toggleFlash':
+        serviceRef.current?.toggleFlash();
+        break;
+      case 'displayInstruction':
+        setAgentInstructions((prev) =>
+          [
+            ...prev,
+            {
+              id: command.itemId || Date.now().toString(),
+              text: command.text,
+              timestamp: Date.now(),
+            },
+          ].slice(-3)
+        ); // Keep only last 3 instructions
+        break;
+    }
+  };
+
+  useEffect(() => {
+    // Don't initialize until guide is dismissed
+    if (!hasGuideShown) return;
+
+    const identificationId = identificationInfo.identificationId;
+    const verificationSessionId = identificationInfo.sessionId;
+    const existingVideoSessionId = identificationInfo.videoSessionId;
+    const hasCollectedData =
+      !!identificationInfo.scannedDocument ||
+      !!identificationInfo.livenessDetection;
+
+    let mounted = true;
+    let queueUnsubscribe: (() => void) | null = null;
+    let callStartTime: number | null = null;
+    let heartbeatInterval: ReturnType<typeof setInterval> | null = null;
+    let leaveButtonTimeout: ReturnType<typeof setTimeout> | null = null;
+
+    // Track video call started
+    trackVerificationStart('VIDEO_CALL');
+
+    const init = async () => {
+      if (!baseUrl) {
+        console.error('Missing base URL');
+        return;
+      }
+
+      if (!identificationId) {
+        console.error('Missing identification ID');
+        return;
+      }
+
+      // Upload collected data in background (don't block video call initialization)
+      // This allows the agent to see the data during the video call
+      const uploadCollectedData = async () => {
+        const uploadKey = `${identificationId}:${verificationSessionId || ''}`;
+
+        // If upload already in progress, return the same promise
+        const existingPromise = uploadPromiseMapRef.current.get(uploadKey);
+        if (existingPromise) {
+          return existingPromise;
+        }
+
+        // Create the upload promise
+        const uploadPromise = (async () => {
+          if (hasCollectedData) {
+            setUploadStatus('uploading');
+            try {
+              const uploadService = new DataUploadService(baseUrl);
+              dataUploadServiceRef.current = uploadService;
+              const uploaded =
+                await uploadService.uploadCollectedData(identificationInfo);
+              if (!uploaded) {
+                console.warn('[VideoCallScreen] Upload service returned false');
+                if (mounted) {
+                  setUploadStatus('failed');
+                }
+                return false;
+              }
+              if (mounted) {
+                setUploadStatus('done');
+              }
+              return true;
+            } catch (error) {
+              console.error(
+                '[VideoCallScreen] Failed to upload collected data:',
+                error
+              );
+              if (mounted) {
+                setUploadStatus('failed');
+              }
+              return false;
+            } finally {
+              uploadPromiseMapRef.current.delete(uploadKey);
+            }
+          } else {
+            setUploadStatus('done');
+            return true;
+          }
+        })();
+
+        // Store the promise before awaiting
+        uploadPromiseMapRef.current.set(uploadKey, uploadPromise);
+
+        return uploadPromise;
+      };
+
+      const uploadedBeforeCall = await uploadCollectedData();
+
+      if (hasCollectedData && !uploadedBeforeCall) {
+        if (mounted) {
+          setErrorMessage(
+            'Failed to upload verification data before video call.'
+          );
+          setConnectionState('failed');
+        }
+        return;
+      }
+
+      // Fetch or create video session if videoSessionId is not available
+      let videoSessionId = existingVideoSessionId;
+      if (!videoSessionId) {
+        try {
+          // Build URL with both identificationId and verificationSessionId for better lookup.
+          // Avoid new URL() + searchParams.set — not implemented on Android Hermes.
+          let sessionUrl = `${baseUrl}/api/app/mobile/identifications/${identificationId}/video-session`;
+          if (verificationSessionId) {
+            sessionUrl += `?verificationSessionId=${encodeURIComponent(verificationSessionId)}`;
+          }
+
+          const response = await fetch(sessionUrl, {
+            method: 'GET',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+          });
+
+          if (!response.ok) {
+            let errorMessage = 'Unknown error';
+            try {
+              const errorBody = await response.json();
+              errorMessage =
+                errorBody.message || errorBody.error || response.statusText;
+              if (errorBody.details) {
+                errorMessage = `${errorMessage}: ${errorBody.details}`;
+              }
+            } catch {
+              errorMessage = response.statusText;
+            }
+            console.error('[VideoCallScreen] Server error response:', {
+              status: response.status,
+              message: errorMessage,
+              url: sessionUrl,
+            });
+            throw new Error(
+              `Failed to get video session: ${response.status} ${errorMessage}`
+            );
+          }
+
+          const data = await response.json();
+          videoSessionId = data.videoSessionId;
+        } catch (error) {
+          console.error(
+            '[VideoCallScreen] Failed to get video session:',
+            error
+          );
+          if (mounted) {
+            setErrorMessage(
+              'Failed to initialize video session. Please try again.'
+            );
+            setConnectionState('failed');
+          }
+          return;
+        }
+      }
+
+      if (!videoSessionId) {
+        console.error('Missing video session ID');
+        if (mounted) {
+          setErrorMessage('Unable to start video call. Please try again.');
+          setConnectionState('failed');
+        }
+        return;
+      }
+
+      // Initialize video session service (mobile API is public, no auth token needed)
+      const videoSessionService = new VideoSessionService(
+        baseUrl,
+        identificationId
+      );
+      videoSessionServiceRef.current = videoSessionService;
+
+      // Try to join the session
+      try {
+        await videoSessionService.joinSession(videoSessionId);
+        joinedSessionIdRef.current = videoSessionId;
+
+        // Send heartbeat every 10s while in queue
+        heartbeatInterval = setInterval(() => {
+          if (!callConnectedRef.current) {
+            videoSessionService.sendHeartbeat(videoSessionId);
+          } else {
+            clearInterval(heartbeatInterval!);
+            heartbeatInterval = null;
+          }
+        }, 10_000);
+
+        // Show leave button after 60s if still waiting
+        leaveButtonTimeout = setTimeout(() => {
+          if (mounted && !callConnectedRef.current) {
+            setShowLeaveButton(true);
+          }
+        }, 60_000);
+      } catch (error: any) {
+        console.error('[VideoCallScreen] Failed to join session:', error);
+        if (mounted) {
+          setErrorMessage(error?.message || 'Failed to join video session');
+          setConnectionState('failed');
+        }
+        return;
+      }
+
+      // Subscribe to queue updates
+      queueUnsubscribe = videoSessionService.subscribeToQueueUpdates(
+        videoSessionId,
+        (position) => {
+          if (mounted) {
+            setQueuePosition(position);
+          }
+        },
+        (error) => {
+          console.error('[VideoCallScreen] Queue update error:', error);
+        }
+      );
+
+      // Initialize WebRTC service
+      const service = new WebRTCService({
+        baseUrl,
+        sessionId: videoSessionId,
+        identificationId,
+        onRemoteStream: (stream) => {
+          if (mounted) {
+            setRemoteStream(stream);
+          }
+        },
+        onConnectionStateChange: (state) => {
+          if (mounted) setConnectionState(state);
+          if (state === 'connected') {
+            callConnectedRef.current = true;
+            setShowLeaveButton(false);
+            if (leaveButtonTimeout) {
+              clearTimeout(leaveButtonTimeout);
+              leaveButtonTimeout = null;
+            }
+          }
+          if (
+            (state === 'failed' || state === 'closed') &&
+            callConnectedRef.current &&
+            !sessionEndedRef.current
+          ) {
+            const durationMs = callStartTime ? Date.now() - callStartTime : 0;
+            trackVerificationComplete('VIDEO_CALL', false, durationMs / 1000);
+            service.cleanup();
+            if (mounted) {
+              if (appContext.currentWorkflowStep?.required) {
+                setErrorMessage(t('videoCallScreen.callNotCompleted'));
+                setConnectionState('failed');
+              } else {
+                navigation.navigate('ResultScreen');
+              }
+            }
+          }
+        },
+        onCommand: handleRemoteCommand,
+        onLocalStreamUpdate: (newStream) => {
+          setLocalStream(newStream);
+          setLocalStreamKey((k) => k + 1);
+        },
+        onSessionEnded: (state) => {
+          sessionEndedRef.current = true;
+          // Track video call completed
+          const durationMs = callStartTime ? Date.now() - callStartTime : 0;
+          trackVerificationComplete(
+            'VIDEO_CALL',
+            state === 'COMPLETED',
+            durationMs / 1000
+          );
+          // Always navigate to ResultScreen so data is submitted regardless of
+          // whether the agent ended the session as COMPLETED or FAILED
+          service.cleanup();
+          if (mounted) {
+            navigation.navigate('ResultScreen');
+          }
+        },
+      });
+      serviceRef.current = service;
+
+      // Request Permissions
+      if (Platform.OS === 'android') {
+        const granted = await PermissionsAndroid.requestMultiple([
+          PermissionsAndroid.PERMISSIONS.CAMERA,
+          PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
+        ]);
+        if (
+          granted['android.permission.CAMERA'] !==
+            PermissionsAndroid.RESULTS.GRANTED ||
+          granted['android.permission.RECORD_AUDIO'] !==
+            PermissionsAndroid.RESULTS.GRANTED
+        ) {
+          if (mounted) setConnectionState('permissions_denied');
+          return;
+        }
+      }
+      // For iOS, react-native-webrtc or VisionCamera usually triggers it,
+      // but explicit request via library is better if we had one.
+      // Assuming automatic or previously granted for now.
+
+      try {
+        const stream = await service.initialize();
+        if (mounted) {
+          setLocalStream(stream);
+          callStartTime = Date.now();
+        }
+
+        // Start InCallManager to route audio through speaker
+        InCallManager.start({ media: 'video' });
+        InCallManager.setSpeakerphoneOn(true);
+      } catch (e) {
+        console.error('[VideoCallScreen] Failed to start call', e);
+        if (mounted) setConnectionState('failed');
+      }
+    };
+
+    init();
+
+    return () => {
+      mounted = false;
+      if (heartbeatInterval) clearInterval(heartbeatInterval);
+      if (leaveButtonTimeout) clearTimeout(leaveButtonTimeout);
+      queueUnsubscribe?.();
+      // If joined but call never connected, explicitly leave to drop from queue
+      if (joinedSessionIdRef.current && !callConnectedRef.current) {
+        videoSessionServiceRef.current?.leaveSession(
+          joinedSessionIdRef.current
+        );
+      }
+      serviceRef.current?.cleanup();
+      InCallManager.stop();
+    };
+  }, [
+    baseUrl,
+    identificationInfo.identificationId,
+    identificationInfo.sessionId,
+    identificationInfo.videoSessionId,
+    hasGuideShown,
+    appContext.currentWorkflowStep?.required,
+    t,
+    navigation,
+    identificationInfo,
+  ]);
+
+  const handleCloseSession = () => {
+    serviceRef.current?.cleanup();
+    // Call onError to notify parent and reset navigation to start over
+    onError?.('Video call session closed by user');
+    navigationManagerRef.current?.reset();
+  };
+
+  if (!identificationInfo || !identificationInfo.identificationId) {
+    return null;
+  }
+
+  // Show guide screen first
+  if (!hasGuideShown) {
+    return (
+      <View style={styles.guide}>
+        <LottieView
+          source={require('../../Shared/Animations/video-call.json')}
+          style={styles.guideAnimation}
+          loop={true}
+          autoPlay
+        />
+        <Text style={styles.guideHeader}>
+          {t('videoCallScreen.guideHeader')}
+        </Text>
+        <View style={styles.guidePoints}>
+          <Text style={styles.guideText}>{t('videoCallScreen.guideText')}</Text>
+          <Text style={styles.guideText}>
+            • {t('videoCallScreen.guidePoint1')}
+          </Text>
+          <Text style={styles.guideText}>
+            • {t('videoCallScreen.guidePoint2')}
+          </Text>
+          <Text style={styles.guideText}>
+            • {t('videoCallScreen.guidePoint3')}
+          </Text>
+          <Text style={styles.guideText}>
+            • {t('videoCallScreen.guidePoint4')}
+          </Text>
+        </View>
+        <StyledButton
+          mode="contained"
+          onPress={() => {
+            setHasGuideShown(true);
+          }}
+        >
+          {t('general.letsGo')}
+        </StyledButton>
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.container}>
+      {errorMessage ? (
+        <View style={styles.errorContainer}>
+          <Text style={styles.errorText}>{errorMessage}</Text>
+          <TouchableOpacity
+            style={styles.closeSessionButton}
+            onPress={handleCloseSession}
+          >
+            <Text style={styles.buttonText}>
+              {t('videoCallScreen.closeSession')}
+            </Text>
+          </TouchableOpacity>
+          <Text style={styles.closeSessionHint}>
+            {t('videoCallScreen.closeSessionHint')}
+          </Text>
+        </View>
+      ) : remoteStream ? (
+        <RTCView
+          streamURL={remoteStream.toURL()}
+          style={styles.remoteVideo}
+          objectFit="contain"
+          mirror={false}
+        />
+      ) : connectionState === 'connected' ? (
+        // WebRTC connected but remote stream not yet received — show black background
+        // so the PIP local video and controls are visible without "waiting" overlay
+        <View style={styles.remoteVideo} />
+      ) : (
+        <View style={styles.waitingContainer}>
+          <ActivityIndicator size="large" color="#fff" />
+          <Text style={styles.waitingText}>
+            {t('videoCallScreen.waitingForAgent')}
+          </Text>
+          {queuePosition !== null && (
+            <Text style={styles.queueText}>
+              {t('videoCallScreen.queuePosition', { position: queuePosition })}
+            </Text>
+          )}
+          <Text style={styles.statusText}>
+            {t(`videoCallScreen.${connectionState}`)}
+          </Text>
+          {showLeaveButton && (
+            <TouchableOpacity
+              style={styles.leaveQueueButton}
+              onPress={handleCloseSession}
+            >
+              <Text style={styles.leaveQueueButtonText}>
+                {t('videoCallScreen.leaveQueue')}
+              </Text>
+            </TouchableOpacity>
+          )}
+        </View>
+      )}
+
+      {/* Local Video (PIP) */}
+      {localStream && (
+        <View style={styles.localVideoContainer}>
+          <RTCView
+            key={localStreamKey}
+            streamURL={localStream.toURL()}
+            style={styles.localVideo}
+            objectFit="cover"
+            mirror={true}
+            zOrder={1}
+          />
+        </View>
+      )}
+
+      {/* Agent Instructions Display */}
+      {agentInstructions.length > 0 && (
+        <View style={styles.instructionsContainer}>
+          <View style={styles.instructionsHeader}>
+            <Text style={styles.instructionsTitle}>
+              {t('videoCallScreen.agentInstructions')}
+            </Text>
+          </View>
+          {agentInstructions.map((instruction) => (
+            <View key={instruction.id} style={styles.instructionItem}>
+              <Text style={styles.instructionIcon}>📋</Text>
+              <Text style={styles.instructionText}>{instruction.text}</Text>
+            </View>
+          ))}
+        </View>
+      )}
+
+      {/* No user controls - agent controls everything */}
+      <NavigationManager ref={navigationManagerRef} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#000',
+  },
+  remoteVideo: {
+    width: width,
+    height: height,
+    backgroundColor: '#000',
+  },
+  errorContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 20,
+  },
+  errorText: {
+    color: '#fff',
+    fontSize: 18,
+    textAlign: 'center',
+    marginBottom: 30,
+  },
+  retryButton: {
+    backgroundColor: '#d32f2f',
+    padding: 15,
+    borderRadius: 8,
+    minWidth: 120,
+    alignItems: 'center',
+  },
+  closeSessionButton: {
+    backgroundColor: '#d32f2f',
+    paddingVertical: 16,
+    paddingHorizontal: 32,
+    borderRadius: 8,
+    minWidth: 200,
+    alignItems: 'center',
+  },
+  closeSessionHint: {
+    color: '#aaa',
+    fontSize: 14,
+    textAlign: 'center',
+    marginTop: 16,
+    paddingHorizontal: 40,
+  },
+  waitingContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  waitingText: {
+    color: '#fff',
+    marginTop: 20,
+    fontSize: 18,
+  },
+  queueText: {
+    color: '#fff',
+    marginTop: 10,
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+  statusText: {
+    color: '#aaa',
+    marginTop: 10,
+    fontSize: 14,
+  },
+  localVideoContainer: {
+    position: 'absolute',
+    top: 50,
+    right: 20,
+    width: 100,
+    height: 150,
+    borderRadius: 10,
+    overflow: 'hidden',
+    borderWidth: 1,
+    borderColor: '#fff',
+    backgroundColor: '#333',
+  },
+  localVideo: {
+    flex: 1,
+  },
+  instructionsContainer: {
+    position: 'absolute',
+    bottom: 40,
+    left: 20,
+    right: 20,
+    backgroundColor: 'rgba(59, 130, 246, 0.95)',
+    borderRadius: 12,
+    padding: 16,
+    maxHeight: 200,
+  },
+  instructionsHeader: {
+    marginBottom: 12,
+    paddingBottom: 8,
+    borderBottomWidth: 1,
+    borderBottomColor: 'rgba(255, 255, 255, 0.3)',
+  },
+  instructionsTitle: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+  instructionItem: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    backgroundColor: 'rgba(255, 255, 255, 0.15)',
+    borderRadius: 8,
+    padding: 12,
+    marginBottom: 8,
+  },
+  instructionIcon: {
+    fontSize: 18,
+    marginRight: 10,
+  },
+  instructionText: {
+    flex: 1,
+    color: '#fff',
+    fontSize: 14,
+    lineHeight: 20,
+  },
+  controlsContainer: {
+    position: 'absolute',
+    bottom: 40,
+    left: 0,
+    right: 0,
+    flexDirection: 'row',
+    justifyContent: 'space-evenly',
+    alignItems: 'center',
+  },
+  controlButton: {
+    width: 60,
+    height: 60,
+    borderRadius: 30,
+    backgroundColor: 'rgba(255,255,255,0.3)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  endCallButton: {
+    backgroundColor: '#ff4444',
+  },
+  buttonText: {
+    color: '#fff',
+    fontSize: 12,
+  },
+  leaveQueueButton: {
+    marginTop: 24,
+    paddingVertical: 12,
+    paddingHorizontal: 32,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: '#fff',
+  },
+  leaveQueueButtonText: {
+    color: '#fff',
+    fontSize: 15,
+  },
+  guide: {
+    flex: 1,
+    justifyContent: 'center',
+    paddingHorizontal: 20,
+    gap: 10,
+    backgroundColor: 'white',
+  },
+  guideAnimation: {
+    width: 250,
+    height: 250,
+    alignSelf: 'center',
+  },
+  guideHeader: {
+    color: 'black',
+    fontSize: 18,
+    textAlign: 'center',
+    fontWeight: 'bold',
+  },
+  guidePoints: {
+    gap: 10,
+    padding: 10,
+  },
+  guideText: {
+    color: 'black',
+    fontSize: 14,
+  },
+});
+
+export default VideoCallScreen;