@trustchex/react-native-sdk 1.381.0 → 1.464.0

package/src/Screens/Debug/NFCScanTestScreen.tsx

@@ -0,0 +1,692 @@
+import React, { useState, useRef, useCallback } from 'react';
+import {
+  View,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  ScrollView,
+  StyleSheet,
+  Image,
+  Platform,
+  StatusBar,
+  KeyboardAvoidingView,
+  Modal,
+  type NativeSyntheticEvent,
+} from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import NFCManager from 'react-native-nfc-manager';
+import { eidReader } from '../../Shared/EIDReader/eidReader';
+import { useKeepAwake } from '../../Shared/Libs/native-keep-awake.utils';
+import type { MRZInfo } from '../../Shared/EIDReader/lds/icao/mrzInfo';
+import mrzUtils from '../../Shared/Libs/mrz.utils';
+import {
+  TrustchexCamera,
+  type TrustchexCameraHandle,
+  type Frame,
+} from '../../Shared/Components/TrustchexCamera';
+
+type LogType = 'info' | 'debug' | 'success' | 'error';
+
+interface LogEntry {
+  time: string;
+  message: string;
+  type: LogType;
+}
+
+const NFCScanTestScreen = () => {
+  useKeepAwake();
+
+  const [documentNumber, setDocumentNumber] = useState('');
+  const [dateOfBirth, setDateOfBirth] = useState('');
+  const [dateOfExpiry, setDateOfExpiry] = useState('');
+  const [isScanning, setIsScanning] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [logs, setLogs] = useState<LogEntry[]>([]);
+  const [faceImage, setFaceImage] = useState<string | null>(null);
+  const [faceMimeType, setFaceMimeType] = useState<string>('image/jpeg');
+  const [mrzResult, setMrzResult] = useState<MRZInfo | null>(null);
+  const [mrzText, setMrzText] = useState('');
+  const [cameraOpen, setCameraOpen] = useState(false);
+  const [cameraMrzStatus, setCameraMrzStatus] = useState('');
+
+  const scrollRef = useRef<ScrollView>(null);
+  const cameraRef = useRef<TrustchexCameraHandle>(null);
+  const originalConsoleDebug = useRef<((...args: unknown[]) => void) | null>(
+    null
+  );
+
+  const addLog = useCallback((message: string, type: LogType = 'info') => {
+    const now = new Date();
+    const time = `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}.${String(now.getMilliseconds()).padStart(3, '0')}`;
+    setLogs((prev) => [...prev, { time, message: String(message), type }]);
+    setTimeout(() => scrollRef.current?.scrollToEnd({ animated: false }), 50);
+  }, []);
+
+  const clearAll = useCallback(() => {
+    setLogs([]);
+    setFaceImage(null);
+    setMrzResult(null);
+    setProgress(0);
+  }, []);
+
+  const parseMRZText = useCallback((text: string) => {
+    setMrzText(text);
+    if (!text.trim()) return;
+    const result = mrzUtils.validateMRZWithCorrections(text);
+    if (result.valid && result.fields) {
+      const {
+        documentNumber: dn,
+        birthDate: bd,
+        expirationDate: ed,
+      } = result.fields;
+      if (dn) setDocumentNumber(dn);
+      if (bd) setDateOfBirth(bd);
+      if (ed) setDateOfExpiry(ed);
+    }
+  }, []);
+
+  const handleCameraFrame = useCallback(
+    (event: NativeSyntheticEvent<{ frame: Frame }>) => {
+      const frame = event.nativeEvent.frame;
+      if (!frame.resultText || !frame.resultText.includes('<')) {
+        setCameraMrzStatus('Point camera at MRZ zone...');
+        return;
+      }
+
+      let mrzOnlyText = '';
+      if (frame.textBlocks && frame.textBlocks.length > 0) {
+        const frameHeight = frame.height;
+        const bottomThreshold = frameHeight * 0.5;
+        const mrzBlocks = frame.textBlocks.filter((block) => {
+          const blockText = block.text || '';
+          return (
+            blockText.includes('<') &&
+            blockText.length >= 12 &&
+            (block.blockFrame ? block.blockFrame.y > bottomThreshold : false)
+          );
+        });
+        if (mrzBlocks.length > 0) {
+          mrzOnlyText = mrzBlocks.map((b) => b.text).join('\n');
+        }
+      }
+      if (!mrzOnlyText) mrzOnlyText = frame.resultText;
+
+      const fixedMrz = mrzUtils.fixMRZ(mrzOnlyText);
+      const result = mrzUtils.validateMRZWithCorrections(fixedMrz);
+
+      if (result.valid && result.fields) {
+        const {
+          documentNumber: dn,
+          birthDate: bd,
+          expirationDate: ed,
+        } = result.fields;
+        if (dn) setDocumentNumber(dn);
+        if (bd) setDateOfBirth(bd);
+        if (ed) setDateOfExpiry(ed);
+        setMrzText(fixedMrz);
+        setCameraOpen(false);
+      } else {
+        setCameraMrzStatus('Reading MRZ... Hold steady');
+      }
+    },
+    []
+  );
+
+  const argsToString = (args: unknown[]): string =>
+    args
+      .map((a) => {
+        if (a instanceof Error) return `[${a.name}] ${a.message}`;
+        if (typeof a === 'object' && a !== null) {
+          try {
+            return JSON.stringify(a);
+          } catch {
+            return String(a);
+          }
+        }
+        return String(a);
+      })
+      .join(' ');
+
+  const startScan = useCallback(async () => {
+    const docNum = documentNumber.trim();
+    const dob = dateOfBirth.trim();
+    const doe = dateOfExpiry.trim();
+
+    if (!docNum) {
+      addLog('Document number is required', 'error');
+      return;
+    }
+    if (dob.length !== 6 || !/^\d{6}$/.test(dob)) {
+      addLog('Date of Birth must be 6 digits (YYMMDD)', 'error');
+      return;
+    }
+    if (doe.length !== 6 || !/^\d{6}$/.test(doe)) {
+      addLog('Date of Expiry must be 6 digits (YYMMDD)', 'error');
+      return;
+    }
+
+    clearAll();
+    setIsScanning(true);
+
+    // Capture console.debug to show internal EIDReader logs
+    originalConsoleDebug.current = console.debug as (
+      ...args: unknown[]
+    ) => void;
+    (console as unknown as Record<string, unknown>).debug = (
+      ...args: unknown[]
+    ) => {
+      originalConsoleDebug.current?.(...args);
+      addLog(argsToString(args), 'debug');
+    };
+
+    addLog(`Doc: ${docNum}  DOB: ${dob}  DOE: ${doe}`, 'info');
+    addLog('Hold device near NFC chip on passport/ID…', 'info');
+
+    try {
+      const result = await eidReader(docNum, dob, doe, (p) => {
+        const pct = Math.round(p);
+        setProgress(pct);
+        addLog(`Progress: ${pct}%`, 'info');
+      });
+
+      if (result) {
+        addLog('Scan completed successfully', 'success');
+        if (result.faceImage) {
+          setFaceImage(result.faceImage);
+          setFaceMimeType(result.mimeType || 'image/jpeg');
+          addLog(
+            `Face image: ${result.faceImage.length} base64 chars (${result.mimeType})`,
+            'success'
+          );
+        } else {
+          addLog('No face image in result', 'info');
+        }
+        if (result.mrz) {
+          setMrzResult(result.mrz);
+          addLog('MRZ data received', 'success');
+        } else {
+          addLog('No MRZ data in result', 'info');
+        }
+      } else {
+        addLog('eidReader returned undefined', 'error');
+      }
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : String(err);
+      addLog(`Error: ${msg}`, 'error');
+      if (err instanceof Error && err.stack) {
+        addLog(err.stack, 'debug');
+      }
+    } finally {
+      if (originalConsoleDebug.current) {
+        (console as unknown as Record<string, unknown>).debug =
+          originalConsoleDebug.current;
+        originalConsoleDebug.current = null;
+      }
+      setIsScanning(false);
+    }
+  }, [documentNumber, dateOfBirth, dateOfExpiry, addLog, clearAll]);
+
+  const cancelScan = useCallback(async () => {
+    addLog('Cancelling NFC session…', 'info');
+    try {
+      await NFCManager.cancelTechnologyRequest();
+    } catch {
+      // ignore
+    }
+  }, [addLog]);
+
+  const logColor: Record<LogType, string> = {
+    info: '#cccccc',
+    debug: '#888888',
+    success: '#4caf50',
+    error: '#f44336',
+  };
+
+  return (
+    <SafeAreaView style={styles.container} edges={['top', 'bottom']}>
+      <StatusBar barStyle="light-content" backgroundColor="#111" />
+      <Text style={styles.header}>NFC Scan Debug</Text>
+
+      <KeyboardAvoidingView
+        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+      >
+        <View style={styles.inputSection}>
+          <View style={styles.row}>
+            <View style={styles.flexOne}>
+              <Text style={styles.label}>
+                Paste MRZ Text (auto-fills fields below)
+              </Text>
+            </View>
+            <TouchableOpacity
+              style={[styles.button, styles.scanMrzButton]}
+              onPress={() => {
+                setCameraMrzStatus('Point camera at MRZ zone...');
+                setCameraOpen(true);
+              }}
+              disabled={isScanning}
+            >
+              <Text style={styles.buttonText}>Scan MRZ</Text>
+            </TouchableOpacity>
+          </View>
+          <TextInput
+            style={[styles.input, styles.mrzInput]}
+            value={mrzText}
+            onChangeText={parseMRZText}
+            placeholder="P<UTOERIKSSON<<ANNA<MARIA<<<<<<<<<<<<<<&#10;L898902C36UTO7408122F1204159<<<<<<<<<<<<<<"
+            placeholderTextColor="#555"
+            multiline
+            numberOfLines={3}
+            autoCapitalize="characters"
+            autoCorrect={false}
+            editable={!isScanning}
+          />
+
+          <Text style={styles.label}>Document Number</Text>
+          <TextInput
+            style={styles.input}
+            value={documentNumber}
+            onChangeText={setDocumentNumber}
+            placeholder="e.g. A12345678"
+            placeholderTextColor="#555"
+            autoCapitalize="characters"
+            autoCorrect={false}
+            editable={!isScanning}
+          />
+
+          <View style={styles.row}>
+            <View style={styles.halfColumn}>
+              <Text style={styles.label}>Date of Birth (YYMMDD)</Text>
+              <TextInput
+                style={styles.input}
+                value={dateOfBirth}
+                onChangeText={setDateOfBirth}
+                placeholder="e.g. 900115"
+                placeholderTextColor="#555"
+                keyboardType="numeric"
+                maxLength={6}
+                editable={!isScanning}
+              />
+            </View>
+            <View style={styles.halfColumn}>
+              <Text style={styles.label}>Date of Expiry (YYMMDD)</Text>
+              <TextInput
+                style={styles.input}
+                value={dateOfExpiry}
+                onChangeText={setDateOfExpiry}
+                placeholder="e.g. 280101"
+                placeholderTextColor="#555"
+                keyboardType="numeric"
+                maxLength={6}
+                editable={!isScanning}
+              />
+            </View>
+          </View>
+
+          <View style={styles.row}>
+            <TouchableOpacity
+              style={[
+                styles.button,
+                styles.scanButton,
+                isScanning && styles.buttonDisabled,
+              ]}
+              onPress={startScan}
+              disabled={isScanning}
+            >
+              <Text style={styles.buttonText}>
+                {isScanning
+                  ? `Scanning… ${Math.round(progress)}%`
+                  : 'Start NFC Scan'}
+              </Text>
+            </TouchableOpacity>
+
+            {isScanning ? (
+              <TouchableOpacity
+                style={[styles.button, styles.cancelButton]}
+                onPress={cancelScan}
+              >
+                <Text style={styles.buttonText}>Cancel</Text>
+              </TouchableOpacity>
+            ) : (
+              <TouchableOpacity
+                style={[styles.button, styles.clearButton]}
+                onPress={clearAll}
+              >
+                <Text style={styles.buttonText}>Clear</Text>
+              </TouchableOpacity>
+            )}
+          </View>
+        </View>
+      </KeyboardAvoidingView>
+
+      {(faceImage || mrzResult) && (
+        <View>
+          <Text style={styles.chipDataHeader}>NFC Chip Data</Text>
+          <View style={styles.resultSection}>
+            {faceImage && (
+              <Image
+                source={{ uri: `data:${faceMimeType};base64,${faceImage}` }}
+                style={styles.faceImage}
+                resizeMode="contain"
+              />
+            )}
+            {mrzResult && (
+              <View style={styles.mrzFields}>
+                <MRZRow label="Doc Code" value={mrzResult.getDocumentCode()} />
+                <MRZRow
+                  label="Issuing State"
+                  value={mrzResult.getIssuingState()}
+                />
+                <MRZRow
+                  label="Surname"
+                  value={mrzResult.getPrimaryIdentifier()}
+                />
+                <MRZRow
+                  label="Given Names"
+                  value={mrzResult.getSecondaryIdentifier()}
+                />
+                <MRZRow
+                  label="Doc Number"
+                  value={mrzResult.getDocumentNumber()}
+                />
+                <MRZRow
+                  label="Nationality"
+                  value={mrzResult.getNationality()}
+                />
+                <MRZRow
+                  label="Date of Birth"
+                  value={mrzResult.getDateOfBirth()}
+                />
+                <MRZRow
+                  label="Date of Expiry"
+                  value={mrzResult.getDateOfExpiry()}
+                />
+                <MRZRow
+                  label="Gender"
+                  value={mrzResult.getGender()?.getStrCode() ?? ''}
+                />
+                <MRZRow
+                  label="Personal Number"
+                  value={mrzResult.getPersonalNumber() ?? ''}
+                />
+              </View>
+            )}
+          </View>
+        </View>
+      )}
+
+      <Modal
+        visible={cameraOpen}
+        animationType="slide"
+        onRequestClose={() => setCameraOpen(false)}
+      >
+        <View style={styles.cameraContainer}>
+          <TrustchexCamera
+            ref={cameraRef}
+            style={StyleSheet.absoluteFill}
+            cameraType="back"
+            enableFrameProcessing={true}
+            enableFaceDetection={false}
+            enableTextRecognition={true}
+            enableBarcodeScanning={false}
+            includeBase64={false}
+            targetFps={10}
+            onFrameAvailable={handleCameraFrame}
+          />
+          <SafeAreaView style={styles.cameraOverlay} edges={['top', 'bottom']}>
+            <View style={styles.cameraTopBar}>
+              <Text style={styles.cameraTitle}>Scan MRZ</Text>
+              <TouchableOpacity
+                style={styles.cameraCloseButton}
+                onPress={() => setCameraOpen(false)}
+              >
+                <Text style={styles.cameraCloseText}>Close</Text>
+              </TouchableOpacity>
+            </View>
+            <View style={styles.cameraGuide}>
+              <View style={styles.cameraGuideBox} />
+              <Text style={styles.cameraGuideText}>{cameraMrzStatus}</Text>
+            </View>
+          </SafeAreaView>
+        </View>
+      </Modal>
+
+      <ScrollView
+        ref={scrollRef}
+        style={styles.logScroll}
+        contentContainerStyle={styles.logContent}
+        nestedScrollEnabled
+      >
+        {logs.length === 0 ? (
+          <Text style={styles.logPlaceholder}>Logs will appear here…</Text>
+        ) : (
+          logs.map((entry, i) => (
+            <Text
+              key={i}
+              style={[styles.logLine, { color: logColor[entry.type] }]}
+            >
+              <Text style={styles.logTime}>{entry.time} </Text>
+              {entry.message}
+            </Text>
+          ))
+        )}
+      </ScrollView>
+    </SafeAreaView>
+  );
+};
+
+const MRZRow = ({ label, value }: { label: string; value: string }) => (
+  <View style={styles.mrzRow}>
+    <Text style={styles.mrzLabel}>{label}:</Text>
+    <Text style={styles.mrzValue}>{value || '—'}</Text>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#111',
+  },
+  header: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '700',
+    textAlign: 'center',
+    paddingVertical: 10,
+    backgroundColor: '#1a1a1a',
+    letterSpacing: 0.5,
+  },
+  inputSection: {
+    padding: 12,
+    backgroundColor: '#1a1a1a',
+    borderBottomWidth: 1,
+    borderBottomColor: '#333',
+  },
+  label: {
+    color: '#aaa',
+    fontSize: 11,
+    marginBottom: 3,
+    marginTop: 8,
+    textTransform: 'uppercase',
+    letterSpacing: 0.5,
+  },
+  input: {
+    backgroundColor: '#2a2a2a',
+    color: '#fff',
+    borderRadius: 6,
+    paddingHorizontal: 10,
+    paddingVertical: 8,
+    fontSize: 14,
+    borderWidth: 1,
+    borderColor: '#444',
+    fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
+  },
+  mrzInput: {
+    fontSize: 11,
+    minHeight: 54,
+    textAlignVertical: 'top',
+  },
+  row: {
+    flexDirection: 'row',
+    gap: 8,
+    marginTop: 4,
+  },
+  halfColumn: {
+    flex: 1,
+  },
+  button: {
+    paddingVertical: 10,
+    paddingHorizontal: 16,
+    borderRadius: 6,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginTop: 10,
+  },
+  scanButton: {
+    flex: 2,
+    backgroundColor: '#1565c0',
+  },
+  scanMrzButton: {
+    backgroundColor: '#e65100',
+    paddingVertical: 6,
+    paddingHorizontal: 12,
+    marginTop: 4,
+  },
+  cancelButton: {
+    flex: 1,
+    backgroundColor: '#b71c1c',
+  },
+  clearButton: {
+    flex: 1,
+    backgroundColor: '#333',
+  },
+  buttonDisabled: {
+    backgroundColor: '#333',
+  },
+  buttonText: {
+    color: '#fff',
+    fontSize: 13,
+    fontWeight: '600',
+  },
+  resultSection: {
+    flexDirection: 'row',
+    backgroundColor: '#1a1a1a',
+    padding: 8,
+    gap: 8,
+  },
+  chipDataHeader: {
+    color: '#4fc3f7',
+    fontSize: 13,
+    fontWeight: '700',
+    paddingHorizontal: 8,
+    paddingTop: 8,
+    paddingBottom: 4,
+    backgroundColor: '#1a1a1a',
+    borderBottomWidth: 0,
+    letterSpacing: 0.5,
+  },
+  faceImage: {
+    width: 72,
+    height: 96,
+    borderRadius: 4,
+    backgroundColor: '#2a2a2a',
+  },
+  mrzFields: {
+    flex: 1,
+  },
+  mrzRow: {
+    flexDirection: 'row',
+    marginBottom: 2,
+  },
+  mrzLabel: {
+    color: '#888',
+    fontSize: 11,
+    width: 90,
+    textTransform: 'uppercase',
+  },
+  mrzValue: {
+    color: '#e0e0e0',
+    fontSize: 11,
+    flex: 1,
+    fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
+  },
+  logScroll: {
+    flex: 1,
+    backgroundColor: '#0d0d0d',
+  },
+  logContent: {
+    padding: 8,
+    paddingBottom: 16,
+  },
+  logPlaceholder: {
+    color: '#444',
+    fontSize: 12,
+    fontStyle: 'italic',
+    textAlign: 'center',
+    marginTop: 20,
+  },
+  logLine: {
+    fontSize: 11,
+    lineHeight: 17,
+    fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
+  },
+  logTime: {
+    color: '#555',
+    fontSize: 10,
+  },
+  cameraContainer: {
+    flex: 1,
+    backgroundColor: '#000',
+  },
+  cameraOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'space-between',
+  },
+  cameraTopBar: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    backgroundColor: 'rgba(0,0,0,0.5)',
+  },
+  cameraTitle: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '700',
+  },
+  cameraCloseButton: {
+    backgroundColor: 'rgba(255,255,255,0.2)',
+    paddingVertical: 6,
+    paddingHorizontal: 14,
+    borderRadius: 6,
+  },
+  cameraCloseText: {
+    color: '#fff',
+    fontSize: 13,
+    fontWeight: '600',
+  },
+  cameraGuide: {
+    alignItems: 'center',
+    paddingBottom: 40,
+  },
+  cameraGuideBox: {
+    width: '85%',
+    height: 80,
+    borderWidth: 2,
+    borderColor: '#FFA500',
+    borderRadius: 8,
+    backgroundColor: 'rgba(255,165,0,0.05)',
+    marginBottom: 12,
+  },
+  cameraGuideText: {
+    color: '#FFA500',
+    fontSize: 13,
+    fontWeight: '600',
+    textAlign: 'center',
+  },
+  flexOne: {
+    flex: 1,
+  },
+});
+
+export default NFCScanTestScreen;