@trustchex/react-native-sdk 1.478.7 → 1.483.4

package/src/Screens/Dynamic/IdentityDocumentScanningScreen.tsx

@@ -1,6 +1,8 @@
 import React, { useContext, useEffect, useState } from 'react';
 
 import type { MRZFields } from '../../Shared/Types/mrzFields';
+import { buildDocumentName } from '../../Shared/Libs/mrzTransliteration';
+import { normalizeFromMRZFields } from '../../Shared/Libs/documentDataNormalizer';
 import { Alert, SafeAreaView, StyleSheet, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import IdentityDocumentCamera, {
@@ -122,6 +124,27 @@ const IdentityDocumentScanningScreen = () => {
         true
       );
 
+      {
+        const documentData = normalizeFromMRZFields(mrzFields);
+        const faceImg = idFrontSideData?.faceImage || passportData?.faceImage;
+        const builtName = buildDocumentName(
+          documentData.firstName,
+          documentData.lastName,
+          documentData.issuingCountry
+        );
+        const documentReadResult = {
+          document: {
+            ...documentData,
+            firstName: builtName.displayFirst,
+            lastName: builtName.displayLast,
+          },
+          name: builtName,
+          face: faceImg ? { data: faceImg, mimeType: 'image/jpeg' } : undefined,
+        };
+        appContext.setLastDocumentRead?.(documentReadResult);
+        appContext.onDocumentRead?.(documentReadResult);
+      }
+
       setTimeout(
         () => navigationManagerRef.current?.navigateToNextStep(),
         1000

package/src/Screens/Dynamic/VideoCallScreen.tsx

@@ -147,7 +147,11 @@ const VideoCallScreen = ({ navigation }: any) => {
               const uploadService = new DataUploadService(baseUrl);
               dataUploadServiceRef.current = uploadService;
               const uploaded =
-                await uploadService.uploadCollectedData(identificationInfo);
+                await uploadService.uploadCollectedData(
+                  identificationInfo,
+                  undefined,
+                  appContext.lastDocumentRead?.name
+                );
               if (!uploaded) {
                 console.warn('[VideoCallScreen] Upload service returned false');
                 if (mounted) {

package/src/Screens/Static/ResultScreen.tsx

@@ -39,7 +39,32 @@ import { Video as VideoCompressor } from 'react-native-compressor';
 import { encryptWithAes, getSessionKey } from '../../Shared/Libs/crypto.utils';
 import Video from 'react-native-video';
 import StyledButton from '../../Shared/Components/StyledButton';
+import DiagnosticReportButton from '../../Shared/Components/DiagnosticReportButton';
+import type { DiagnosticImage } from '../../Shared/Libs/sendDiagnosticReport';
 import NativeDeviceInfo from '../../Shared/Libs/native-device-info.utils';
+
+/**
+ * Collect the captured document/face images (base64) as attachments for a
+ * diagnostic report. On an ID card the BACK image is the MRZ side; on a passport
+ * the front carries the MRZ. The NFC chip face arrives as `faceImage` with its
+ * own mime type, which may be png.
+ */
+const collectDiagnosticImages = (
+  doc?: ScannedIdentityDocument
+): DiagnosticImage[] => {
+  if (!doc) return [];
+  const out: DiagnosticImage[] = [];
+  const push = (name: string, b64?: string, mime: 'jpg' | 'png' = 'jpg') => {
+    if (b64 && b64 !== '') out.push({ name, base64: b64, mime });
+  };
+  push('mrz-side', doc.backImage);
+  push('front', doc.frontImage);
+  const faceMime = doc.faceImageMimeType === 'image/png' ? 'png' : 'jpg';
+  push('face', doc.faceImage, faceMime);
+  push('secondary-face', doc.secondaryFaceImage);
+  push('hologram', doc.hologramImage);
+  return out;
+};
 import {
   trackError,
   trackFunnelStep,
@@ -234,14 +259,16 @@ const ResultScreen = () => {
         throw new Error('MRZ fields not found');
       }
 
-      // Backend payload must contain raw MRZ data only.
-      // Human-friendly formatting is strictly for UI rendering paths.
       const rawMrzFields = scannedDocument.mrzFields;
+      const docName = appContext.lastDocumentRead?.name;
 
       const identificationDocument = {
         type: rawMrzFields.documentCode,
         name: rawMrzFields.firstName,
         surname: rawMrzFields.lastName,
+          displayName: docName?.source === 'dg11' ? docName.displayFirst : undefined,
+        displaySurname: docName?.source === 'dg11' ? docName.displayLast : undefined,
+        nameSource: docName?.source === 'dg11' ? docName.source : undefined,
         gender: getGenderEnumType(rawMrzFields.sex),
         number: rawMrzFields.documentNumber,
         country: rawMrzFields.issuingState,
@@ -267,7 +294,7 @@ const ResultScreen = () => {
         }
       );
     },
-    [apiUrl, getGenderEnumType]
+    [apiUrl, appContext.lastDocumentRead, getGenderEnumType]
   );
 
   const uploadIdentificationMedia = useCallback(
@@ -765,23 +792,35 @@ const ResultScreen = () => {
                         <Text style={styles.mrzInfoLabel}>
                           {t('eidScannerScreen.name')}:
                         </Text>
-                        <Text style={styles.mrzInfoText}>
-                          {
-                            appContext.identificationInfo.scannedDocument
-                              .mrzFields?.firstName
-                          }
-                        </Text>
+                        <View style={styles.mrzInfoValueGroup}>
+                          <Text style={styles.mrzInfoText}>
+                            {appContext.lastDocumentRead?.name.source === 'dg11'
+                              ? appContext.lastDocumentRead.name.displayFirst
+                              : appContext.identificationInfo.scannedDocument.mrzFields?.firstName}
+                          </Text>
+                          {appContext.lastDocumentRead?.name.source === 'dg11' && (
+                            <Text style={styles.mrzInfoSubText}>
+                              {appContext.identificationInfo.scannedDocument.mrzFields?.firstName}
+                            </Text>
+                          )}
+                        </View>
                       </View>
                       <View style={styles.mrzInfoItem}>
                         <Text style={styles.mrzInfoLabel}>
                           {t('eidScannerScreen.surname')}:
                         </Text>
-                        <Text style={styles.mrzInfoText}>
-                          {
-                            appContext.identificationInfo.scannedDocument
-                              .mrzFields?.lastName
-                          }
-                        </Text>
+                        <View style={styles.mrzInfoValueGroup}>
+                          <Text style={styles.mrzInfoText}>
+                            {appContext.lastDocumentRead?.name.source === 'dg11'
+                              ? appContext.lastDocumentRead.name.displayLast
+                              : appContext.identificationInfo.scannedDocument.mrzFields?.lastName}
+                          </Text>
+                          {appContext.lastDocumentRead?.name.source === 'dg11' && (
+                            <Text style={styles.mrzInfoSubText}>
+                              {appContext.identificationInfo.scannedDocument.mrzFields?.lastName}
+                            </Text>
+                          )}
+                        </View>
                       </View>
                       <View style={styles.mrzInfoItem}>
                         <Text style={styles.mrzInfoLabel}>
@@ -1045,7 +1084,7 @@ const ResultScreen = () => {
                 )}
               </View>
             </ScrollView>
-            <View style={{ paddingBottom: insets.bottom }}>
+            <View style={[styles.footer, { paddingBottom: insets.bottom + 20 }]}>
               <StyledButton
                 mode="contained"
                 onPress={() => {
@@ -1055,6 +1094,26 @@ const ResultScreen = () => {
               >
                 {t('resultScreen.demoStartOver')}
               </StyledButton>
+              <DiagnosticReportButton
+                sessionId={appContext.identificationInfo?.sessionId}
+                scan={{
+                  documentType:
+                    appContext.identificationInfo?.scannedDocument
+                      ?.documentType,
+                  dataSource:
+                    appContext.identificationInfo?.scannedDocument?.dataSource,
+                  mrzText:
+                    appContext.identificationInfo?.scannedDocument?.mrzText,
+                  mrzFields:
+                    appContext.identificationInfo?.scannedDocument?.mrzFields,
+                  barcodeValue:
+                    appContext.identificationInfo?.scannedDocument
+                      ?.barcodeValue,
+                }}
+                images={collectDiagnosticImages(
+                  appContext.identificationInfo?.scannedDocument
+                )}
+              />
             </View>
           </>
         ) : (
@@ -1182,6 +1241,16 @@ const styles = StyleSheet.create({
     fontSize: 10,
     fontFamily: Platform.OS === 'ios' ? 'Courier' : 'monospace',
   },
+  mrzInfoValueGroup: {
+    flexDirection: 'column',
+    alignItems: 'flex-end',
+  },
+  mrzInfoSubText: {
+    color: '#aaa',
+    fontSize: 9,
+    fontFamily: Platform.OS === 'ios' ? 'Courier' : 'monospace',
+    marginTop: 1,
+  },
   mrzTextContainer: {
     padding: 12,
     backgroundColor: '#F3F4F6',

package/src/Shared/Components/DiagnosticReportButton.tsx

@@ -0,0 +1,77 @@
+import React, { useState } from 'react';
+import { Alert } from 'react-native';
+import { useTranslation } from 'react-i18next';
+import StyledButton from './StyledButton';
+import {
+  sendDiagnosticReport,
+  isDiagnosticSharingAvailable,
+  type DiagnosticImage,
+} from '../Libs/sendDiagnosticReport';
+import type { ScanDataForReport } from '../Libs/diagnosticReport';
+import { SDK_VERSION } from '../../version';
+
+export interface DiagnosticReportButtonProps {
+  scan: ScanDataForReport;
+  sessionId?: string;
+  images?: DiagnosticImage[];
+}
+
+/**
+ * "Report a scanning issue" button for the result screen.
+ *
+ * Shows a brief notice describing what will be shared (the draft itself is the
+ * user's review/consent step), then opens the OS share sheet — the user picks
+ * email / WhatsApp / Drive / etc. and sends the diagnostic bundle to support.
+ * Self-contained so the result screen only needs to render it with the scan
+ * data + captured images.
+ */
+const DiagnosticReportButton: React.FC<DiagnosticReportButtonProps> = ({
+  scan,
+  sessionId,
+  images,
+}) => {
+  const { t } = useTranslation();
+  const [sending, setSending] = useState(false);
+
+  // `react-native-share` is optional — hide the button entirely when the host
+  // app hasn't installed it, so apps that don't want diagnostics see no UI.
+  if (!isDiagnosticSharingAvailable()) {
+    return null;
+  }
+
+  const onPress = () => {
+    if (sending) return;
+    // Brief notice — the share draft is the actual review/consent step.
+    Alert.alert(
+      t('diagnosticReport.noticeTitle'),
+      t('diagnosticReport.noticeBody'),
+      [
+        { text: t('diagnosticReport.cancel'), style: 'cancel' },
+        {
+          text: t('diagnosticReport.continue'),
+          onPress: async () => {
+            setSending(true);
+            try {
+              await sendDiagnosticReport({
+                scan,
+                sdkVersion: SDK_VERSION,
+                sessionId,
+                images,
+              });
+            } finally {
+              setSending(false);
+            }
+          },
+        },
+      ]
+    );
+  };
+
+  return (
+    <StyledButton mode="outlined" onPress={onPress} disabled={sending}>
+      {t('diagnosticReport.button')}
+    </StyledButton>
+  );
+};
+
+export default DiagnosticReportButton;

package/src/Shared/Components/EIDScanner.tsx

@@ -9,6 +9,8 @@ import { MRZInfo } from '../EIDReader/lds/icao/mrzInfo';
 import { eidReader } from '../EIDReader/eidReader';
 import NativeProgressBar from './NativeProgressBar';
 import type { MRZFields } from '../Types/mrzFields';
+import { buildDocumentName } from '../Libs/mrzTransliteration';
+import { normalizeFromMRZInfo } from '../Libs/documentDataNormalizer';
 import { useTranslation } from 'react-i18next';
 import AppContext from '../Contexts/AppContext';
 import StyledButton from './StyledButton';
@@ -52,6 +54,7 @@ const EIDScanner = ({
   const [documentMRZInfo, setDocumentMRZInfo] = React.useState<MRZInfo>();
   const [documentFaceImageMimeType, setDocumentFaceImageMimeType] =
     React.useState<string>();
+  const [documentName, setDocumentName] = React.useState<import('../Types/documentReadResult').DocumentName>();
   const [progress, setProgress] = React.useState(0);
   const [progressStage, setProgressStage] = React.useState<string>('');
 
@@ -133,6 +136,21 @@ const EIDScanner = ({
   const [voiceGuidanceMessage, setVoiceGuidanceMessage] = useState<string>();
   const [attemptNumber, setAttemptNumber] = useState<number>(0);
 
+  const getFieldsFromMRZ = useCallback((mrz: MRZInfo) => {
+    return {
+      documentCode: mrz.getDocumentCode(),
+      personalNumber: mrz.getPersonalNumber() || mrz.getOptionalData1(),
+      documentNumber: mrz.getDocumentNumber(),
+      firstName: mrz.getSecondaryIdentifier(),
+      lastName: mrz.getPrimaryIdentifier(),
+      birthDate: mrz.getDateOfBirth(),
+      expirationDate: mrz.getDateOfExpiry(),
+      issuingState: mrz.getIssuingState(),
+      sex: mrz.getGender().getStrCode(),
+      nationality: mrz.getNationality(),
+    } satisfies MRZFields;
+  }, []);
+
   const readNFC = useCallback(async () => {
     const startTime = Date.now();
     const currentAttempt = attemptNumber + 1;
@@ -228,6 +246,32 @@ const EIDScanner = ({
           setDocumentMRZInfo(passportData.mrz);
           setDocumentFaceImageMimeType(passportData.mimeType);
           setIsScanned(true);
+
+          {
+            const documentData = normalizeFromMRZInfo(passportData.mrz);
+            const builtName = buildDocumentName(
+              documentData.firstName,
+              documentData.lastName,
+              documentData.issuingCountry,
+              passportData.dg11FirstName,
+              passportData.dg11LastName
+            );
+            setDocumentName(builtName);
+            const documentReadResult = {
+              document: {
+                ...documentData,
+                firstName: builtName.displayFirst,
+                lastName: builtName.displayLast,
+              },
+              name: builtName,
+              face: {
+                data: passportData.faceImage,
+                mimeType: passportData.mimeType,
+              },
+            };
+            appContext.setLastDocumentRead?.(documentReadResult);
+            appContext.onDocumentRead?.(documentReadResult);
+          }
           await trackEIDScanComplete(
             docType,
             scanDuration,
@@ -314,23 +358,10 @@ const EIDScanner = ({
     isEnabled,
     attemptNumber,
     t,
+    getFieldsFromMRZ,
+    appContext,
   ]);
 
-  const getFieldsFromMRZ = useCallback((mrz: MRZInfo) => {
-    return {
-      documentCode: mrz.getDocumentCode(),
-      personalNumber: mrz.getPersonalNumber() || mrz.getOptionalData1(),
-      documentNumber: mrz.getDocumentNumber(),
-      firstName: mrz.getSecondaryIdentifier(),
-      lastName: mrz.getPrimaryIdentifier(),
-      birthDate: mrz.getDateOfBirth(),
-      expirationDate: mrz.getDateOfExpiry(),
-      issuingState: mrz.getIssuingState(),
-      sex: mrz.getGender().getStrCode(),
-      nationality: mrz.getNationality(),
-    } satisfies MRZFields;
-  }, []);
-
   useEffect(() => {
     const checkIsSupported = async () => {
       const deviceIsSupported = await NFCManager.isSupported();
@@ -533,11 +564,13 @@ const EIDScanner = ({
                   <View style={styles.idCardFields}>
                     <IDCardField
                       label={t('eidScannerScreen.surname')}
-                      value={documentMRZInfo.getPrimaryIdentifier()}
+                      value={documentName?.displayLast ?? documentMRZInfo.getPrimaryIdentifier()}
+                      subValue={documentName?.source === 'dg11' ? documentMRZInfo.getPrimaryIdentifier() : undefined}
                     />
                     <IDCardField
                       label={t('eidScannerScreen.name')}
-                      value={documentMRZInfo.getSecondaryIdentifier()}
+                      value={documentName?.displayFirst ?? documentMRZInfo.getSecondaryIdentifier()}
+                      subValue={documentName?.source === 'dg11' ? documentMRZInfo.getSecondaryIdentifier() : undefined}
                     />
                     <IDCardField
                       label={t('eidScannerScreen.documentNumber')}
@@ -866,6 +899,11 @@ const styles = StyleSheet.create({
     flexShrink: 1,
     flexWrap: 'wrap',
   },
+  idCardFieldSubValue: {
+    fontSize: 9,
+    color: '#aaa',
+    marginTop: 1,
+  },
   guide: {
     flex: 1,
     display: 'flex',
@@ -896,12 +934,23 @@ const styles = StyleSheet.create({
   },
 });
 
-const IDCardField = ({ label, value }: { label: string; value: string }) => (
+const IDCardField = ({
+  label,
+  value,
+  subValue,
+}: {
+  label: string;
+  value: string;
+  subValue?: string;
+}) => (
   <View style={styles.idCardFieldItem}>
     <Text style={styles.idCardFieldLabel} numberOfLines={1}>
       {label}
     </Text>
     <Text style={styles.idCardFieldValue}>{value || '—'}</Text>
+    {subValue ? (
+      <Text style={styles.idCardFieldSubValue}>{subValue}</Text>
+    ) : null}
   </View>
 );