@trustchex/react-native-sdk 1.374.0 → 1.409.0

package/src/Shared/Components/DebugOverlay.tsx

@@ -0,0 +1,656 @@
+/* eslint-disable react-native/no-inline-styles */
+import React from 'react';
+import { View, Text as TextView, Image, ScrollView } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import type {
+  ScanStep,
+  ScanStatus,
+  DocumentType,
+  BoundsWithRotation,
+  BoundsWithAngle,
+} from './IdentityDocumentCamera.types';
+import { HOLOGRAM_IMAGE_COUNT } from './IdentityDocumentCamera.constants';
+import {
+  angleBetweenPoints,
+  distanceBetweenPoints,
+} from './IdentityDocumentCamera.utils';
+
+// --- Shared overlay sub-components ---
+
+/**
+ * Renders a rotated face bounds overlay with optional crop padding border.
+ */
+function FaceBoundsOverlay({
+  bounds,
+  color,
+}: {
+  bounds: BoundsWithRotation;
+  color: string;
+}) {
+  const dashColor = color.replace(')', ', 0.5)').replace('rgb', 'rgba');
+  return (
+    <>
+      {!!bounds.cropPadding && (
+        <View
+          style={{
+            position: 'absolute',
+            left: bounds.x - bounds.cropPadding,
+            top: bounds.y - bounds.cropPadding,
+            width: bounds.width + 2 * bounds.cropPadding,
+            height: bounds.height + 2 * bounds.cropPadding,
+            borderWidth: 2,
+            borderColor: dashColor,
+            borderStyle: 'dashed',
+            borderRadius: 8,
+            backgroundColor: 'transparent',
+            transform: [{ rotate: `${-(bounds.rollAngle || 0)}deg` }],
+            transformOrigin: 'center',
+          }}
+        />
+      )}
+      <View
+        style={{
+          position: 'absolute',
+          left: bounds.x,
+          top: bounds.y,
+          width: bounds.width,
+          height: bounds.height,
+          borderWidth: 3,
+          borderColor: color,
+          borderRadius: 8,
+          backgroundColor: 'transparent',
+          transform: [{ rotate: `${-(bounds.rollAngle || 0)}deg` }],
+          transformOrigin: 'center',
+        }}
+      >
+        {!!bounds.rollAngle && Math.abs(bounds.rollAngle) > 5 && (
+          <TextView
+            style={{
+              position: 'absolute',
+              top: -20,
+              left: 0,
+              color: color,
+              fontSize: 10,
+              fontWeight: 'bold',
+              backgroundColor: 'rgba(0,0,0,0.7)',
+              paddingHorizontal: 4,
+              paddingVertical: 2,
+              borderRadius: 2,
+            }}
+          >
+            {bounds.rollAngle.toFixed(1)}°
+          </TextView>
+        )}
+      </View>
+    </>
+  );
+}
+
+/**
+ * Renders bounds with corner points (for barcode, MRZ, signature).
+ * Falls back to a rotated rectangle when corners aren't available.
+ */
+function CornerBoundsOverlay({
+  bounds,
+  color,
+}: {
+  bounds: BoundsWithAngle;
+  color: string;
+}) {
+  if (bounds.corners && bounds.corners.length >= 2) {
+    return (
+      <>
+        {bounds.corners.map((corner, idx) => {
+          const nextCorner =
+            bounds.corners![(idx + 1) % bounds.corners!.length];
+          const length = distanceBetweenPoints(corner, nextCorner);
+          const angle = angleBetweenPoints(corner, nextCorner);
+
+          return (
+            <View
+              key={idx}
+              style={{
+                position: 'absolute',
+                left: corner.x,
+                top: corner.y,
+                width: length,
+                height: 3,
+                backgroundColor: color,
+                transform: [{ rotate: `${angle}deg` }],
+                transformOrigin: 'top left',
+              }}
+            />
+          );
+        })}
+        {/* Corner markers for barcode (4+ corners) */}
+        {bounds.corners.length >= 4 &&
+          bounds.corners.map((corner, idx) => (
+            <View
+              key={`corner-${idx}`}
+              style={{
+                position: 'absolute',
+                left: corner.x - 4,
+                top: corner.y - 4,
+                width: 8,
+                height: 8,
+                borderRadius: 4,
+                backgroundColor: color,
+              }}
+            />
+          ))}
+        {!!bounds.angle && Math.abs(bounds.angle) > 5 && (
+          <TextView
+            style={{
+              position: 'absolute',
+              left: bounds.x,
+              top: bounds.y - 20,
+              color: color,
+              fontSize: 10,
+              fontWeight: 'bold',
+              backgroundColor: 'rgba(0,0,0,0.7)',
+              paddingHorizontal: 4,
+              paddingVertical: 2,
+              borderRadius: 2,
+            }}
+          >
+            {bounds.angle.toFixed(1)}°
+          </TextView>
+        )}
+      </>
+    );
+  }
+
+  // Fallback: rotated rectangle
+  return (
+    <View
+      style={{
+        position: 'absolute',
+        left: bounds.x + bounds.width / 2,
+        top: bounds.y + bounds.height / 2,
+        width: bounds.width,
+        height: bounds.height,
+        marginLeft: -bounds.width / 2,
+        marginTop: -bounds.height / 2,
+        borderWidth: 3,
+        borderColor: color,
+        borderRadius: 8,
+        backgroundColor: 'transparent',
+        transform: [{ rotate: `${bounds.angle || 0}deg` }],
+      }}
+    >
+      {!!bounds.angle && Math.abs(bounds.angle) > 5 && (
+        <TextView
+          style={{
+            position: 'absolute',
+            top: -20,
+            left: 0,
+            color: color,
+            fontSize: 10,
+            fontWeight: 'bold',
+            backgroundColor: 'rgba(0,0,0,0.7)',
+            paddingHorizontal: 4,
+            paddingVertical: 2,
+            borderRadius: 2,
+          }}
+        >
+          {bounds.angle.toFixed(1)}°
+        </TextView>
+      )}
+    </View>
+  );
+}
+
+/**
+ * Debug image thumbnail with label
+ */
+function DebugImageThumbnail({
+  image,
+  label,
+  activeColor,
+  borderColor,
+}: {
+  image?: string;
+  label: string;
+  activeColor: string;
+  borderColor: string;
+}) {
+  return (
+    <View style={{ alignItems: 'center' }}>
+      {image ? (
+        <Image
+          source={{ uri: `data:image/jpeg;base64,${image}` }}
+          style={{
+            width: 40,
+            height: 48,
+            borderRadius: 2,
+            borderWidth: 1,
+            borderColor,
+          }}
+        />
+      ) : (
+        <View
+          style={{
+            width: 40,
+            height: 48,
+            borderRadius: 2,
+            borderWidth: 1,
+            borderColor: '#666',
+            backgroundColor: '#222',
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}
+        >
+          <TextView style={{ color: '#666', fontSize: 7 }}>—</TextView>
+        </View>
+      )}
+      <TextView
+        style={{
+          color: image ? activeColor : '#999',
+          fontSize: 7,
+          marginTop: 1,
+          fontWeight: 'bold',
+        }}
+      >
+        {`${image ? '✓' : '○'} ${label}`}
+      </TextView>
+    </View>
+  );
+}
+
+// --- Main DebugOverlay ---
+
+export interface DebugOverlayProps {
+  nextStep: ScanStep;
+  status: ScanStatus;
+  detectedDocumentType: DocumentType;
+  isBrightnessLow: boolean;
+  isFrameBlurry: boolean;
+  isTorchOn: boolean;
+  documentPlaneBounds: BoundsWithRotation | null;
+  secondaryFaceBounds: BoundsWithRotation | null;
+  barcodeBounds: BoundsWithAngle | null;
+  mrzBounds: BoundsWithAngle | null;
+  signatureBounds: BoundsWithAngle | null;
+  currentFaceImage?: string;
+  currentSecondaryFaceImage?: string;
+  currentHologramImage?: string;
+  currentHologramMaskImage?: string;
+  latestHologramFaceImage?: string;
+  hologramImageCount: number;
+  allElementsDetected: boolean;
+  elementsOutsideScanArea: string[];
+}
+
+const DebugOverlay = React.memo(function DebugOverlay({
+  nextStep,
+  status,
+  detectedDocumentType,
+  isBrightnessLow,
+  isFrameBlurry,
+  isTorchOn,
+  documentPlaneBounds,
+  secondaryFaceBounds,
+  barcodeBounds,
+  mrzBounds,
+  signatureBounds,
+  currentFaceImage,
+  currentSecondaryFaceImage,
+  currentHologramImage,
+  currentHologramMaskImage,
+  latestHologramFaceImage,
+  hologramImageCount,
+  elementsOutsideScanArea,
+}: DebugOverlayProps) {
+  const insets = useSafeAreaInsets();
+
+  return (
+    <>
+      {/* Bounds overlays */}
+      {documentPlaneBounds && nextStep !== 'COMPLETED' && (
+        <FaceBoundsOverlay bounds={documentPlaneBounds} color="#4CAF50" />
+      )}
+      {secondaryFaceBounds && nextStep !== 'COMPLETED' && (
+        <FaceBoundsOverlay bounds={secondaryFaceBounds} color="#2196F3" />
+      )}
+      {barcodeBounds && nextStep !== 'COMPLETED' && (
+        <CornerBoundsOverlay bounds={barcodeBounds} color="#FF9800" />
+      )}
+      {mrzBounds && nextStep !== 'COMPLETED' && (
+        <CornerBoundsOverlay bounds={mrzBounds} color="#9C27B0" />
+      )}
+      {signatureBounds && nextStep !== 'COMPLETED' && (
+        <CornerBoundsOverlay bounds={signatureBounds} color="#00BCD4" />
+      )}
+
+      {/* Debug info panel */}
+      <View
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          paddingTop: insets.top,
+          alignItems: 'center',
+          pointerEvents: 'none',
+        }}
+      >
+        <View
+          style={{
+            marginTop: 8,
+            marginHorizontal: 8,
+            backgroundColor: 'rgba(0, 0, 0, 0.9)',
+            padding: 8,
+            borderRadius: 6,
+            borderWidth: 1,
+            borderColor: 'rgba(255, 82, 82, 0.5)',
+            minWidth: 220,
+            maxWidth: '92%',
+          }}
+        >
+          {/* Status & State Row */}
+          <View
+            style={{
+              flexDirection: 'row',
+              justifyContent: 'space-between',
+              marginBottom: 4,
+            }}
+          >
+            <TextView
+              style={{ color: '#88D8B0', fontSize: 10, fontWeight: 'bold' }}
+            >
+              {`Status: ${status}`}
+            </TextView>
+            <TextView
+              style={{ color: '#FFEB3B', fontSize: 10, fontWeight: 'bold' }}
+            >
+              {`Step: ${nextStep}`}
+            </TextView>
+          </View>
+
+          {/* Quality Badges */}
+          <View
+            style={{
+              flexDirection: 'row',
+              justifyContent: 'space-between',
+              marginBottom: 4,
+              gap: 3,
+            }}
+          >
+            <View
+              style={{
+                backgroundColor: isBrightnessLow ? '#f44336' : '#4CAF50',
+                paddingHorizontal: 6,
+                paddingVertical: 1,
+                borderRadius: 3,
+              }}
+            >
+              <TextView
+                style={{ color: '#FFFFFF', fontSize: 8, fontWeight: 'bold' }}
+              >
+                {isBrightnessLow ? 'Low Light' : 'Good Light'}
+              </TextView>
+            </View>
+            <View
+              style={{
+                backgroundColor: isFrameBlurry ? '#f44336' : '#4CAF50',
+                paddingHorizontal: 6,
+                paddingVertical: 1,
+                borderRadius: 3,
+              }}
+            >
+              <TextView
+                style={{ color: '#FFFFFF', fontSize: 8, fontWeight: 'bold' }}
+              >
+                {isFrameBlurry ? 'Blurry' : 'Sharp'}
+              </TextView>
+            </View>
+          </View>
+
+          {/* Elements Status */}
+          <TextView
+            style={{
+              color:
+                elementsOutsideScanArea.length === 0 ? '#4CAF50' : '#FFA500',
+              fontSize: 8,
+              marginBottom: 3,
+            }}
+          >
+            {elementsOutsideScanArea.length === 0
+              ? 'All elements in frame'
+              : `Outside: ${elementsOutsideScanArea.join(', ')}`}
+          </TextView>
+
+          {/* Detection Info */}
+          <TextView
+            style={{
+              color: 'rgba(255, 255, 255, 0.7)',
+              fontSize: 8,
+              marginBottom: 3,
+            }}
+          >
+            {`Face: ${documentPlaneBounds ? '✓' : '✗'}, MRZ: ${mrzBounds ? '✓' : '✗'}, Sig: ${signatureBounds ? '✓' : '✗'}`}
+          </TextView>
+
+          {/* Hologram Count */}
+          {nextStep === 'SCAN_HOLOGRAM' && hologramImageCount > 0 && (
+            <TextView
+              style={{
+                color: '#9C27B0',
+                fontSize: 8,
+                fontWeight: 'bold',
+                marginBottom: 3,
+              }}
+            >
+              {`Hologram: ${hologramImageCount}/${HOLOGRAM_IMAGE_COUNT}`}
+            </TextView>
+          )}
+
+          {/* Additional Info */}
+          <View
+            style={{
+              flexDirection: 'row',
+              gap: 8,
+              paddingTop: 3,
+              borderTopWidth: 1,
+              borderTopColor: 'rgba(255, 255, 255, 0.2)',
+              marginBottom: 4,
+            }}
+          >
+            <TextView
+              style={{
+                color: 'rgba(255, 255, 255, 0.7)',
+                fontSize: 8,
+                marginTop: 3,
+              }}
+            >
+              {`Doc: ${detectedDocumentType}`}
+            </TextView>
+            <TextView
+              style={{
+                color: 'rgba(255, 255, 255, 0.7)',
+                fontSize: 8,
+                marginTop: 3,
+              }}
+            >
+              {`Flash: ${isTorchOn ? '🔦' : '○'}`}
+            </TextView>
+          </View>
+
+          {/* Debug Images Grid */}
+          <View
+            style={{
+              flexDirection: 'row',
+              flexWrap: 'wrap',
+              gap: 4,
+              justifyContent: 'center',
+            }}
+          >
+            <DebugImageThumbnail
+              image={currentFaceImage}
+              label="Face"
+              activeColor="#4CAF50"
+              borderColor="#4CAF50"
+            />
+            <DebugImageThumbnail
+              image={currentSecondaryFaceImage}
+              label="2nd"
+              activeColor="#2196F3"
+              borderColor="#2196F3"
+            />
+
+            {/* Hologram thumbnail (special: shows progress) */}
+            <View style={{ alignItems: 'center' }}>
+              {currentHologramImage ? (
+                <Image
+                  source={{
+                    uri: `data:image/jpeg;base64,${currentHologramImage}`,
+                  }}
+                  style={{
+                    width: 40,
+                    height: 48,
+                    borderRadius: 2,
+                    borderWidth: 1,
+                    borderColor: '#9C27B0',
+                  }}
+                />
+              ) : latestHologramFaceImage && hologramImageCount > 0 ? (
+                <View style={{ position: 'relative' }}>
+                  <Image
+                    source={{
+                      uri: `data:image/jpeg;base64,${latestHologramFaceImage}`,
+                    }}
+                    style={{
+                      width: 40,
+                      height: 48,
+                      borderRadius: 2,
+                      borderWidth: 1,
+                      borderColor: '#FFA500',
+                      opacity: 0.7,
+                    }}
+                  />
+                  <View
+                    style={{
+                      position: 'absolute',
+                      bottom: 1,
+                      left: 1,
+                      right: 1,
+                      backgroundColor: 'rgba(0,0,0,0.8)',
+                      paddingVertical: 0,
+                      borderRadius: 1,
+                    }}
+                  >
+                    <TextView
+                      style={{
+                        color: '#FFA500',
+                        fontSize: 6,
+                        textAlign: 'center',
+                        fontWeight: 'bold',
+                      }}
+                    >
+                      {hologramImageCount}/{HOLOGRAM_IMAGE_COUNT}
+                    </TextView>
+                  </View>
+                </View>
+              ) : (
+                <View
+                  style={{
+                    width: 40,
+                    height: 48,
+                    borderRadius: 2,
+                    borderWidth: 1,
+                    borderColor: '#666',
+                    backgroundColor: '#222',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                  }}
+                >
+                  <TextView style={{ color: '#666', fontSize: 7 }}>—</TextView>
+                </View>
+              )}
+              <TextView
+                style={{
+                  color: currentHologramImage
+                    ? '#9C27B0'
+                    : latestHologramFaceImage
+                      ? '#FFA500'
+                      : '#999',
+                  fontSize: 7,
+                  marginTop: 1,
+                  fontWeight: 'bold',
+                }}
+              >
+                {`${currentHologramImage ? '✓' : latestHologramFaceImage ? '⏳' : '○'} Holo`}
+              </TextView>
+            </View>
+
+            <DebugImageThumbnail
+              image={currentHologramMaskImage}
+              label="Mask"
+              activeColor="#FF6B6B"
+              borderColor="#FF6B6B"
+            />
+          </View>
+        </View>
+      </View>
+    </>
+  );
+});
+
+// --- Test Mode Panel ---
+
+export interface TestModePanelProps {
+  mrzText: string;
+}
+
+export const TestModePanel = React.memo(function TestModePanel({
+  mrzText,
+}: TestModePanelProps) {
+  const insets = useSafeAreaInsets();
+
+  return (
+    <View
+      style={{
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
+        right: 0,
+        maxHeight: '40%',
+        paddingBottom: insets.bottom,
+        backgroundColor: 'rgba(0, 0, 0, 0.95)',
+        borderTopWidth: 2,
+        borderTopColor: '#FFA500',
+      }}
+    >
+      <ScrollView style={{ flex: 1 }}>
+        <View style={{ padding: 10 }}>
+          <TextView
+            style={{
+              color: '#FFA500',
+              fontSize: 12,
+              fontWeight: 'bold',
+              marginBottom: 8,
+              textAlign: 'center',
+            }}
+          >
+            MRZ Text Read
+          </TextView>
+          <TextView
+            style={{
+              color: '#FFFFFF',
+              fontSize: 9,
+              fontFamily: 'monospace',
+              lineHeight: 16,
+            }}
+          >
+            {mrzText
+              .split('\n')
+              .map((line, i) => `Line ${i + 1}: ${line} (${line.length} chars)`)
+              .join('\n')}
+          </TextView>
+        </View>
+      </ScrollView>
+    </View>
+  );
+});
+
+export default DebugOverlay;

package/src/Shared/Components/EIDScanner.tsx

@@ -91,7 +91,6 @@ const EIDScanner = ({
   const appContext = React.useContext(AppContext);
   const [voiceGuidanceMessage, setVoiceGuidanceMessage] = useState<string>();
   const [attemptNumber, setAttemptNumber] = useState<number>(0);
-  const lastVoiceGuidanceMessage = useRef<string>('');
 
   const readNFC = useCallback(async () => {
     const startTime = Date.now();
@@ -102,7 +101,6 @@ const EIDScanner = ({
     setIsScanned(false);
     setProgress(0);
     setProgressStage('');
-    lastVoiceGuidanceMessage.current = '';
     resetLastMessage();
 
     // Track EID scan start using analytics helper
@@ -365,10 +363,8 @@ const EIDScanner = ({
   useEffect(() => {
     if (
       voiceGuidanceMessage &&
-      appContext.currentWorkflowStep?.data?.voiceGuidanceActive &&
-      voiceGuidanceMessage !== lastVoiceGuidanceMessage.current
+      appContext.currentWorkflowStep?.data?.voiceGuidanceActive
     ) {
-      lastVoiceGuidanceMessage.current = voiceGuidanceMessage;
       speak(voiceGuidanceMessage, true);
     }
   }, [