@trustchex/react-native-sdk 1.409.0 → 1.472.0

package/src/Shared/Components/EIDScanner.tsx

@@ -3,6 +3,8 @@ import { Alert, View, Text, Image, StyleSheet, Animated } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import NFCManager from 'react-native-nfc-manager';
 import DeviceInfo from 'react-native-device-info';
+import PermissionManager from '../Libs/permissions.utils';
+import { debugError } from '../Libs/debug.utils';
 import { MRZInfo } from '../EIDReader/lds/icao/mrzInfo';
 import { eidReader } from '../EIDReader/eidReader';
 import NativeProgressBar from './NativeProgressBar';
@@ -11,6 +13,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,8 +90,46 @@ 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);
 
@@ -103,6 +144,21 @@ const EIDScanner = ({
     setProgressStage('');
     resetLastMessage();
 
+    // Check NFC permissions before attempting to scan
+    const hasNFCPermission = await PermissionManager.requestPermission('nfc');
+    if (!hasNFCPermission) {
+      debugError('EIDScanner', 'NFC permission denied');
+      setIsScanning(false);
+      Alert.alert(
+        t('eidScannerScreen.error'),
+        t(
+          'eidScannerScreen.nfcPermissionDenied',
+          'NFC permission is required to scan your document'
+        )
+      );
+      return;
+    }
+
     // Track EID scan start using analytics helper
     const docType =
       (documentType as 'ID' | 'PASSPORT' | 'UNKNOWN') || 'UNKNOWN';
@@ -434,106 +490,126 @@ 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>
+            <View style={styles.idCardWrapper}>
+              <View style={styles.idCard}>
+                {/* ── Card header strip: doc type + issuing state ── */}
+                <View
+                  style={[
+                    styles.idCardStrip,
+                    { backgroundColor: appContext.branding.primaryColor },
+                  ]}
+                >
+                  <Text style={styles.idCardStripDocType}>
+                    {formatDocumentType(documentMRZInfo.getDocumentCode())}
+                  </Text>
+                </View>
+
+                {/* ── Photo (left) + fields (right) ── */}
+                <View style={styles.idCardBody}>
+                  <View style={styles.idCardPhotoContainer}>
+                    <View style={styles.idCardPhotoFrame}>
+                      {documentFaceImage &&
+                      (documentFaceImageMimeType === 'image/jpeg' ||
+                        documentFaceImageMimeType === 'image/png') ? (
+                        <Image
+                          source={{
+                            uri: `data:${documentFaceImageMimeType};base64,${documentFaceImage}`,
+                          }}
+                          style={styles.idCardPhoto}
+                          resizeMode="cover"
+                        />
+                      ) : (
+                        <View style={styles.idCardPhotoPlaceholder}>
+                          <Text style={styles.idCardPhotoPlaceholderText}>
+                            ?
+                          </Text>
+                        </View>
+                      )}
+                    </View>
+                  </View>
+
+                  {/* Right column: all fields as grid */}
+                  <View style={styles.idCardFields}>
+                    <IDCardField
+                      label={t('eidScannerScreen.surname')}
+                      value={documentMRZInfo.getPrimaryIdentifier()}
+                    />
+                    <IDCardField
+                      label={t('eidScannerScreen.name')}
+                      value={documentMRZInfo.getSecondaryIdentifier()}
+                    />
+                    <IDCardField
+                      label={t('eidScannerScreen.documentNumber')}
+                      value={documentMRZInfo.getDocumentNumber()}
+                    />
+                    <IDCardField
+                      label={t('eidScannerScreen.birthDate')}
+                      value={formatDate(documentMRZInfo.getDateOfBirth())}
+                    />
+                    <IDCardField
+                      label={t('eidScannerScreen.expirationDate')}
+                      value={formatDate(documentMRZInfo.getDateOfExpiry())}
+                    />
+                    <IDCardField
+                      label={t('eidScannerScreen.gender')}
+                      value={formatGender(
+                        documentMRZInfo.getGender().getStrCode()
+                      )}
+                    />
+                    <IDCardField
+                      label={t('eidScannerScreen.nationality')}
+                      value={formatNationality(
+                        documentMRZInfo.getNationality()
+                      )}
+                    />
+                    <IDCardField
+                      label={t('eidScannerScreen.issuingState')}
+                      value={formatNationality(
+                        documentMRZInfo.getIssuingState()
+                      )}
+                    />
+                    {!!(
+                      documentMRZInfo.getPersonalNumber() ||
+                      documentMRZInfo.getOptionalData1()
+                    ) && (
+                      <IDCardField
+                        label={t('eidScannerScreen.personalNumber')}
+                        value={
+                          documentMRZInfo.getPersonalNumber() ||
+                          documentMRZInfo.getOptionalData1() ||
+                          ''
+                        }
+                      />
+                    )}
+                  </View>
+                </View>
               </View>
+
+              {hasNfc && isEnabled && isScanned && (
+                <View style={styles.buttonsContainer}>
+                  <StyledButton
+                    mode="contained"
+                    disabled={!documentFaceImage || !documentMRZInfo}
+                    onPress={() => {
+                      if (
+                        onScanSuccess &&
+                        documentMRZInfo &&
+                        documentFaceImage &&
+                        documentFaceImageMimeType
+                      ) {
+                        onScanSuccess(
+                          getFieldsFromMRZ(documentMRZInfo),
+                          documentFaceImage,
+                          documentFaceImageMimeType
+                        );
+                      }
+                    }}
+                  >
+                    {t('eidScannerScreen.approveAndContinue')}
+                  </StyledButton>
+                </View>
+              )}
             </View>
           )}
 
@@ -589,7 +665,15 @@ const EIDScanner = ({
                 </Text>
               )))}
 
-          {hasNfc && isEnabled && isScanned && (
+          {hasNfc && isEnabled && !isScanning && !isScanned && (
+            <View style={styles.buttonsContainer}>
+              <StyledButton mode="contained" onPress={readNFC}>
+                {t('eidScannerScreen.startScanning')}
+              </StyledButton>
+            </View>
+          )}
+
+          {hasNfc && isEnabled && isScanned && !documentMRZInfo && (
             <View style={styles.buttonsContainer}>
               <StyledButton
                 mode="contained"
@@ -688,31 +772,99 @@ const styles = StyleSheet.create({
     color: 'black',
     textAlign: 'center',
   },
-  faceImage: {
-    width: 150,
-    height: 150,
-    borderRadius: 150,
-    borderColor: 'lightgray',
-    borderWidth: 1,
-    alignSelf: 'center',
+  // ── ID Card result layout ──────────────────────────────────────────────
+  idCardWrapper: {
+    gap: 10,
   },
-  mrzInfo: {
-    flexDirection: 'column',
-    width: '100%',
+  idCard: {
+    backgroundColor: '#fff',
+    borderRadius: 14,
+    overflow: 'hidden',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 3 },
+    shadowOpacity: 0.12,
+    shadowRadius: 10,
+    elevation: 4,
+    borderWidth: 1,
+    borderColor: '#e8e8e8',
   },
-  mrzInfoItem: {
+  idCardStrip: {
     flexDirection: 'row',
     justifyContent: 'space-between',
-    borderBottomColor: 'lightgray',
-    borderBottomWidth: 1,
-    paddingVertical: 5,
+    alignItems: 'center',
+    paddingHorizontal: 12,
+    paddingVertical: 6,
   },
-  mrzInfoLabel: {
-    color: 'black',
-    fontWeight: 'bold',
+  idCardStripDocType: {
+    color: '#fff',
+    fontSize: 12,
+    fontWeight: '700',
+    letterSpacing: 0.5,
+    textTransform: 'uppercase',
   },
-  mrzInfoText: {
-    color: 'black',
+  idCardStripIssuer: {
+    color: 'rgba(255,255,255,0.85)',
+    fontSize: 12,
+    fontWeight: '600',
+    letterSpacing: 0.3,
+  },
+  idCardBody: {
+    flexDirection: 'row',
+    alignItems: 'stretch',
+  },
+  idCardPhotoContainer: {
+    width: 110,
+    padding: 8,
+    alignSelf: 'stretch',
+  },
+  idCardPhotoFrame: {
+    flex: 1,
+    borderRadius: 10,
+    overflow: 'hidden',
+    borderWidth: 1,
+    borderColor: 'rgba(0,0,0,0.12)',
+  },
+  idCardPhoto: {
+    flex: 1,
+  },
+  idCardPhotoPlaceholder: {
+    flex: 1,
+    borderRadius: 10,
+    backgroundColor: '#f5f5f5',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  idCardPhotoPlaceholderText: {
+    fontSize: 30,
+    color: '#ccc',
+  },
+  idCardFields: {
+    flex: 1,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 6,
+    alignContent: 'flex-start',
+    padding: 10,
+  },
+  idCardFieldItem: {
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: '45%',
+    minWidth: 0,
+  },
+  idCardFieldLabel: {
+    fontSize: 8,
+    fontWeight: '600',
+    color: '#999',
+    letterSpacing: 0.3,
+    marginBottom: 1,
+  },
+  idCardFieldValue: {
+    fontSize: 11,
+    fontWeight: '600',
+    color: '#111',
+    flexShrink: 1,
+    flexWrap: 'wrap',
   },
   guide: {
     flex: 1,
@@ -744,4 +896,13 @@ const styles = StyleSheet.create({
   },
 });
 
+const IDCardField = ({ label, value }: { label: string; value: string }) => (
+  <View style={styles.idCardFieldItem}>
+    <Text style={styles.idCardFieldLabel} numberOfLines={1}>
+      {label}
+    </Text>
+    <Text style={styles.idCardFieldValue}>{value || '—'}</Text>
+  </View>
+);
+
 export default EIDScanner;

package/src/Shared/Components/FaceCamera.tsx

@@ -1,16 +1,15 @@
 import { useIsFocused } from '@react-navigation/native';
 import { useKeepAwake } from '../Libs/native-keep-awake.utils';
 import { debugLog, debugWarn, debugError, logError } from '../Libs/debug.utils';
+import PermissionManager from '../Libs/permissions.utils';
 import React, { useEffect, useState, useRef, useCallback } from 'react';
 import {
   StyleSheet,
   Text,
   View,
-  Platform,
   Linking,
   ActivityIndicator,
   NativeModules,
-  PermissionsAndroid,
   type NativeSyntheticEvent,
 } from 'react-native';
 import {
@@ -81,20 +80,24 @@ const FaceCamera = ({
 
   useEffect(() => {
     const requestPermissions = async () => {
-      if (Platform.OS === 'android') {
-        const cameraGranted = await PermissionsAndroid.request(
-          PermissionsAndroid.PERMISSIONS.CAMERA
-        );
-        const audioGranted = await PermissionsAndroid.request(
-          PermissionsAndroid.PERMISSIONS.RECORD_AUDIO
-        );
-        setHasPermission(
-          cameraGranted === PermissionsAndroid.RESULTS.GRANTED &&
-            audioGranted === PermissionsAndroid.RESULTS.GRANTED
-        );
-      } else {
-        // iOS permissions handled by native camera
-        setHasPermission(true);
+      try {
+        const permissions = await PermissionManager.requestPermissions([
+          'camera',
+          'microphone',
+        ]);
+
+        const hasCamera = permissions.get('camera') ?? false;
+        const hasMicrophone = permissions.get('microphone') ?? false;
+
+        debugLog('FaceCamera', 'Permissions requested:', {
+          camera: hasCamera,
+          microphone: hasMicrophone,
+        });
+
+        setHasPermission(hasCamera && hasMicrophone);
+      } catch (error) {
+        debugError('FaceCamera', 'Permission request failed:', error);
+        setHasPermission(false);
       }
       setPermissionsRequested(true);
     };

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}`,