@trustchex/react-native-sdk 1.381.0 → 1.464.0

package/src/Shared/Components/EIDScanner.tsx

@@ -11,6 +11,7 @@ import { useTranslation } from 'react-i18next';
 import AppContext from '../Contexts/AppContext';
 import StyledButton from './StyledButton';
 import LottieView from 'lottie-react-native';
+import { getLocalizedCountryName } from '../Libs/country-display.utils';
 import { useKeepAwake } from '../Libs/native-keep-awake.utils';
 import { speak, resetLastMessage } from '../Libs/tts.utils';
 import {
@@ -87,11 +88,48 @@ const EIDScanner = ({
   }, []);
   const [isScanned, setIsScanned] = React.useState(false);
   const [hasGuideShown, setHasGuideShown] = React.useState(false);
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const appContext = React.useContext(AppContext);
+
+  const formatGender = useCallback(
+    (code?: string | null) => {
+      switch (code?.toUpperCase()) {
+        case 'M':
+          return t('eidScannerScreen.genderMale', 'Male');
+        case 'F':
+          return t('eidScannerScreen.genderFemale', 'Female');
+        default:
+          return t('eidScannerScreen.genderUnspecified', 'Unspecified');
+      }
+    },
+    [t]
+  );
+
+  const formatDocumentType = useCallback(
+    (code?: string | null) => {
+      if (!code) return '';
+      const upper = code.toUpperCase();
+      if (upper.startsWith('P'))
+        return t('eidScannerScreen.docTypePassport', 'Passport');
+      if (upper.startsWith('I'))
+        return t('eidScannerScreen.docTypeID', 'ID Card');
+      if (upper.startsWith('A'))
+        return t('eidScannerScreen.docTypeResidence', 'Residence Permit');
+      if (upper.startsWith('V'))
+        return t('eidScannerScreen.docTypeVisa', 'Visa');
+      return code;
+    },
+    [t]
+  );
+
+  const formatNationality = useCallback(
+    (code?: string | null) => {
+      return getLocalizedCountryName(code, i18n.language);
+    },
+    [i18n.language]
+  );
   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 +140,6 @@ const EIDScanner = ({
     setIsScanned(false);
     setProgress(0);
     setProgressStage('');
-    lastVoiceGuidanceMessage.current = '';
     resetLastMessage();
 
     // Track EID scan start using analytics helper
@@ -365,10 +402,8 @@ const EIDScanner = ({
   useEffect(() => {
     if (
       voiceGuidanceMessage &&
-      appContext.currentWorkflowStep?.data?.voiceGuidanceActive &&
-      voiceGuidanceMessage !== lastVoiceGuidanceMessage.current
+      appContext.currentWorkflowStep?.data?.voiceGuidanceActive
     ) {
-      lastVoiceGuidanceMessage.current = voiceGuidanceMessage;
       speak(voiceGuidanceMessage, true);
     }
   }, [
@@ -438,106 +473,118 @@ const EIDScanner = ({
         </View>
       ) : (
         <>
-          {isScanned &&
-            documentFaceImage &&
-            documentFaceImageMimeType === 'image/jpeg' && (
-              <Image
-                source={{
-                  uri: `data:${documentFaceImageMimeType};base64,${documentFaceImage}`,
-                }}
-                style={styles.faceImage}
-              />
-            )}
-
-          {isScanned &&
-            documentFaceImage &&
-            // TODO Add support for jp2 images
-            documentFaceImageMimeType === 'image/jp2' && (
-              <Text style={styles.mainText}>
-                {t('eidScannerScreen.imageCannotBeShown')}
-              </Text>
-            )}
-
-          {isScanned && !documentFaceImage && (
-            <Text style={styles.mainText}>
-              {t('eidScannerScreen.faceImageNotFound')}
-            </Text>
-          )}
-
-          {isScanned && documentMRZInfo && (
-            <View style={styles.mrzInfo}>
-              <View style={styles.mrzInfoItem}>
-                <Text style={styles.mrzInfoLabel}>
-                  {t('eidScannerScreen.documentCode')}:
-                </Text>
-                <Text style={styles.mrzInfoText}>
-                  {documentMRZInfo.getDocumentCode()}
-                </Text>
-              </View>
-              <View style={styles.mrzInfoItem}>
-                <Text style={styles.mrzInfoLabel}>
-                  {t('eidScannerScreen.nationality')}:
-                </Text>
-                <Text style={styles.mrzInfoText}>
-                  {documentMRZInfo.getNationality()}
-                </Text>
-              </View>
-              <View style={styles.mrzInfoItem}>
-                <Text style={styles.mrzInfoLabel}>
-                  {t('eidScannerScreen.personalNumber')}:
-                </Text>
-                <Text style={styles.mrzInfoText}>
-                  {documentMRZInfo.getOptionalData1()}
-                </Text>
-              </View>
-              <View style={styles.mrzInfoItem}>
-                <Text style={styles.mrzInfoLabel}>
-                  {t('eidScannerScreen.documentNumber')}:
-                </Text>
-                <Text style={styles.mrzInfoText}>
-                  {documentMRZInfo.getDocumentNumber()}
-                </Text>
-              </View>
-              <View style={styles.mrzInfoItem}>
-                <Text style={styles.mrzInfoLabel}>
-                  {t('eidScannerScreen.name')}:
-                </Text>
-                <Text style={styles.mrzInfoText}>
-                  {documentMRZInfo.getSecondaryIdentifier()}
-                </Text>
-              </View>
-              <View style={styles.mrzInfoItem}>
-                <Text style={styles.mrzInfoLabel}>
-                  {t('eidScannerScreen.surname')}:
-                </Text>
-                <Text style={styles.mrzInfoText}>
-                  {documentMRZInfo.getPrimaryIdentifier()}
-                </Text>
-              </View>
-              <View style={styles.mrzInfoItem}>
-                <Text style={styles.mrzInfoLabel}>
-                  {t('eidScannerScreen.birthDate')}:
-                </Text>
-                <Text style={styles.mrzInfoText}>
-                  {formatDate(documentMRZInfo.getDateOfBirth())}
-                </Text>
-              </View>
-              <View style={styles.mrzInfoItem}>
-                <Text style={styles.mrzInfoLabel}>
-                  {t('eidScannerScreen.gender')}:
-                </Text>
-                <Text style={styles.mrzInfoText}>
-                  {documentMRZInfo.getGender().getStrCode()}
-                </Text>
-              </View>
-              <View style={styles.mrzInfoItem}>
-                <Text style={styles.mrzInfoLabel}>
-                  {t('eidScannerScreen.expirationDate')}:
-                </Text>
-                <Text style={styles.mrzInfoText}>
-                  {formatDate(documentMRZInfo.getDateOfExpiry())}
-                </Text>
+          {isScanned && (
+            <View style={styles.resultCard}>
+              <View style={styles.resultHeader}>
+                {documentFaceImage &&
+                (documentFaceImageMimeType === 'image/jpeg' ||
+                  documentFaceImageMimeType === 'image/png') ? (
+                  <Image
+                    source={{
+                      uri: `data:${documentFaceImageMimeType};base64,${documentFaceImage}`,
+                    }}
+                    style={styles.faceImage}
+                    resizeMode="cover"
+                  />
+                ) : (
+                  <View style={styles.faceImagePlaceholder}>
+                    <Text style={styles.faceImagePlaceholderText}>?</Text>
+                  </View>
+                )}
+                {documentMRZInfo && (
+                  <View style={styles.resultHeaderInfo}>
+                    <Text style={styles.fullName} numberOfLines={2}>
+                      {documentMRZInfo.getSecondaryIdentifier()}{' '}
+                      {documentMRZInfo.getPrimaryIdentifier()}
+                    </Text>
+                    <Text style={styles.subInfo}>
+                      {formatNationality(documentMRZInfo.getNationality())} ·{' '}
+                      {formatDocumentType(documentMRZInfo.getDocumentCode())}
+                    </Text>
+                    <Text style={styles.subInfo}>
+                      {formatGender(documentMRZInfo.getGender().getStrCode())} ·{' '}
+                      {formatDate(documentMRZInfo.getDateOfBirth())}
+                    </Text>
+                  </View>
+                )}
               </View>
+
+              {documentMRZInfo && (
+                <View style={styles.mrzInfo}>
+                  <View style={styles.mrzInfoItem}>
+                    <Text style={styles.mrzInfoLabel}>
+                      {t('eidScannerScreen.name')}
+                    </Text>
+                    <Text style={styles.mrzInfoText}>
+                      {documentMRZInfo.getSecondaryIdentifier()}
+                    </Text>
+                  </View>
+                  <View style={styles.mrzInfoItem}>
+                    <Text style={styles.mrzInfoLabel}>
+                      {t('eidScannerScreen.surname')}
+                    </Text>
+                    <Text style={styles.mrzInfoText}>
+                      {documentMRZInfo.getPrimaryIdentifier()}
+                    </Text>
+                  </View>
+                  <View style={styles.mrzInfoItem}>
+                    <Text style={styles.mrzInfoLabel}>
+                      {t('eidScannerScreen.documentCode')}
+                    </Text>
+                    <Text style={styles.mrzInfoText}>
+                      {formatDocumentType(documentMRZInfo.getDocumentCode())}
+                    </Text>
+                  </View>
+                  <View style={styles.mrzInfoItem}>
+                    <Text style={styles.mrzInfoLabel}>
+                      {t('eidScannerScreen.documentNumber')}
+                    </Text>
+                    <Text style={styles.mrzInfoText}>
+                      {documentMRZInfo.getDocumentNumber()}
+                    </Text>
+                  </View>
+                  <View style={styles.mrzInfoItem}>
+                    <Text style={styles.mrzInfoLabel}>
+                      {t('eidScannerScreen.personalNumber')}
+                    </Text>
+                    <Text style={styles.mrzInfoText}>
+                      {documentMRZInfo.getOptionalData1()}
+                    </Text>
+                  </View>
+                  <View style={styles.mrzInfoItem}>
+                    <Text style={styles.mrzInfoLabel}>
+                      {t('eidScannerScreen.nationality')}
+                    </Text>
+                    <Text style={styles.mrzInfoText}>
+                      {formatNationality(documentMRZInfo.getNationality())}
+                    </Text>
+                  </View>
+                  <View style={styles.mrzInfoItem}>
+                    <Text style={styles.mrzInfoLabel}>
+                      {t('eidScannerScreen.gender')}
+                    </Text>
+                    <Text style={styles.mrzInfoText}>
+                      {formatGender(documentMRZInfo.getGender().getStrCode())}
+                    </Text>
+                  </View>
+                  <View style={styles.mrzInfoItem}>
+                    <Text style={styles.mrzInfoLabel}>
+                      {t('eidScannerScreen.birthDate')}
+                    </Text>
+                    <Text style={styles.mrzInfoText}>
+                      {formatDate(documentMRZInfo.getDateOfBirth())}
+                    </Text>
+                  </View>
+                  <View style={styles.mrzInfoItem}>
+                    <Text style={styles.mrzInfoLabel}>
+                      {t('eidScannerScreen.expirationDate')}
+                    </Text>
+                    <Text style={styles.mrzInfoText}>
+                      {formatDate(documentMRZInfo.getDateOfExpiry())}
+                    </Text>
+                  </View>
+                </View>
+              )}
             </View>
           )}
 
@@ -593,6 +640,14 @@ const EIDScanner = ({
                 </Text>
               )))}
 
+          {hasNfc && isEnabled && !isScanning && !isScanned && (
+            <View style={styles.buttonsContainer}>
+              <StyledButton mode="contained" onPress={readNFC}>
+                {t('eidScannerScreen.startScanning')}
+              </StyledButton>
+            </View>
+          )}
+
           {hasNfc && isEnabled && isScanned && (
             <View style={styles.buttonsContainer}>
               <StyledButton
@@ -692,31 +747,83 @@ const styles = StyleSheet.create({
     color: 'black',
     textAlign: 'center',
   },
-  faceImage: {
-    width: 150,
-    height: 150,
-    borderRadius: 150,
-    borderColor: 'lightgray',
+  resultCard: {
+    backgroundColor: '#fff',
+    borderRadius: 16,
+    padding: 16,
+    gap: 16,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.08,
+    shadowRadius: 8,
+    elevation: 3,
     borderWidth: 1,
-    alignSelf: 'center',
+    borderColor: '#f0f0f0',
+  },
+  resultHeader: {
+    flexDirection: 'row',
+    gap: 14,
+    alignItems: 'flex-start',
+  },
+  resultHeaderInfo: {
+    flex: 1,
+    gap: 4,
+    justifyContent: 'center',
+  },
+  fullName: {
+    fontSize: 17,
+    fontWeight: '700',
+    color: '#111',
+    letterSpacing: 0.2,
+  },
+  subInfo: {
+    fontSize: 13,
+    color: '#666',
+    fontWeight: '500',
+  },
+  faceImage: {
+    width: 90,
+    height: 115,
+    borderRadius: 10,
+    overflow: 'hidden',
+  },
+  faceImagePlaceholder: {
+    width: 90,
+    height: 115,
+    borderRadius: 10,
+    backgroundColor: '#f5f5f5',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  faceImagePlaceholderText: {
+    fontSize: 32,
+    color: '#ccc',
   },
   mrzInfo: {
     flexDirection: 'column',
     width: '100%',
+    gap: 2,
   },
   mrzInfoItem: {
     flexDirection: 'row',
     justifyContent: 'space-between',
-    borderBottomColor: 'lightgray',
+    alignItems: 'center',
+    paddingVertical: 8,
+    borderBottomColor: '#f0f0f0',
     borderBottomWidth: 1,
-    paddingVertical: 5,
   },
   mrzInfoLabel: {
-    color: 'black',
-    fontWeight: 'bold',
+    color: '#888',
+    fontSize: 13,
+    fontWeight: '500',
   },
   mrzInfoText: {
-    color: 'black',
+    color: '#111',
+    fontSize: 13,
+    fontWeight: '600',
+    textAlign: 'right',
+    flexShrink: 1,
+    marginLeft: 8,
   },
   guide: {
     flex: 1,

package/src/Shared/Components/IdentityDocumentCamera.flows.ts

@@ -6,7 +6,7 @@
  * KEY DISTINGUISHING FEATURES:
  * =============================
  * PASSPORT: Has MRZ on FRONT with pattern P<XXX (e.g., P<TUR, P<USA)
- * ID CARD:  Has NO MRZ on front; MRZ only on BACK with code 'I'
+ * ID CARD:  Has NO MRZ on front; MRZ only on BACK with code starting with I, A, or C
  *
  * IMPORTANT: Both passports and ID cards have signature sections!
  * Signature presence is NOT a distinguishing feature between document types.
@@ -31,7 +31,7 @@
 import type { Face } from './IdentityDocumentCamera.types';
 import type { MRZFields } from '../Types/mrzFields';
 import { PASSPORT_MRZ_PATTERN } from './IdentityDocumentCamera.constants';
-import { debugLog, isDebugEnabled } from '../Libs/debug.utils';
+import { isIDCardDocumentCode } from './IdentityDocumentCamera.utils';
 
 /**
  * After this many retry attempts for ID_FRONT flow, proceed with face detection alone
@@ -222,10 +222,13 @@ export function handleIDFrontFlow(
   }
 
   // ============================================================================
-  // STEP 4: Final MRZ code check (if present, must be 'I' not 'P')
+  // STEP 4: Final MRZ code check (if present, must be an ID card code, not P)
   // ============================================================================
   // ID cards should NOT have MRZ on front, but if detected, verify it's not passport
-  if (mrzFields?.documentCode && mrzFields.documentCode !== 'I') {
+  if (
+    mrzFields?.documentCode &&
+    !isIDCardDocumentCode(mrzFields.documentCode)
+  ) {
     return {
       shouldProceed: false,
       reason: `MRZ shows unexpected document code: ${mrzFields.documentCode}`,