@trustchex/react-native-sdk 1.267.0 → 1.354.0

package/src/Screens/Static/ResultScreen.tsx

@@ -15,6 +15,7 @@ import {
   Text,
   View,
 } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import AppContext from '../../Shared/Contexts/AppContext';
 import httpClient from '../../Shared/Libs/http-client';
 import RNFS from 'react-native-fs';
@@ -55,10 +56,41 @@ const ResultScreen = () => {
   const [shouldShowDemoData, setShouldShowDemoData] = useState(false);
   const [deviceIdentifier, setDeviceIdentifier] = useState<string>('');
   const { t } = useTranslation();
+  const insets = useSafeAreaInsets();
 
   // Track screen view and exit
   useScreenTracking('result_screen');
 
+  const formatDate = useCallback((dateStr?: string | null) => {
+    if (!dateStr) return '';
+
+    try {
+      // Check if it's YYMMDD format (6 digits)
+      if (dateStr.length === 6 && /^\d{6}$/.test(dateStr)) {
+        const yy = dateStr.substring(0, 2);
+        const mm = dateStr.substring(2, 4);
+        const dd = dateStr.substring(4, 6);
+
+        // Assume 19xx if YY >= 50, else 20xx
+        const year = parseInt(yy) >= 50 ? `19${yy}` : `20${yy}`;
+        return `${dd}/${mm}/${year}`;
+      }
+
+      // Otherwise try to parse as ISO 8601
+      const date = new Date(dateStr);
+      if (!isNaN(date.getTime())) {
+        const day = String(date.getDate()).padStart(2, '0');
+        const month = String(date.getMonth() + 1).padStart(2, '0');
+        const year = date.getFullYear();
+        return `${day}/${month}/${year}`;
+      }
+
+      return dateStr;
+    } catch {
+      return dateStr;
+    }
+  }, []);
+
   const apiUrl = useMemo(
     () => `${appContext.baseUrl}/api/app/mobile`,
     [appContext.baseUrl]
@@ -463,12 +495,12 @@ const ResultScreen = () => {
         setIsSubmitting(false);
 
         // Track successful verification completion as final funnel step
-        trackFunnelStep('Verification Completed', 5, 5, 'nfc_scanning', true).catch(() => {});
+        trackFunnelStep('Verification Completed', 5, 5, 'nfc_scanning', true).catch(() => { });
         analyticsService.trackEvent(
           AnalyticsEventName.VERIFICATION_SUCCESS,
           AnalyticsEventCategory.VERIFICATION,
           { sessionId: appContext.identificationInfo.sessionId || '' }
-        ).catch(() => {});
+        ).catch(() => { });
       } catch (error) {
         setIsSubmitting(false);
         setProgress(0);
@@ -482,7 +514,7 @@ const ResultScreen = () => {
           'result_screen',
           'critical',
           { recoverable: false, userAction: 'submit_verification' }
-        ).catch(() => {});
+        ).catch(() => { });
         analyticsService.trackEvent(
           AnalyticsEventName.VERIFICATION_FAILED,
           AnalyticsEventCategory.VERIFICATION,
@@ -490,7 +522,7 @@ const ResultScreen = () => {
             sessionId: appContext.identificationInfo.sessionId || '',
             errorMessage,
           }
-        ).catch(() => {});
+        ).catch(() => { });
 
         Alert.alert(t('general.error'), t('resultScreen.submissionFailed'));
         appContext.onError?.(t('resultScreen.submissionFailed'));
@@ -644,10 +676,10 @@ const ResultScreen = () => {
                           {t('eidScannerScreen.birthDate')}:
                         </Text>
                         <Text style={styles.mrzInfoText}>
-                          {
+                          {formatDate(
                             appContext.identificationInfo.scannedDocument
                               .mrzFields?.birthDate
-                          }
+                          )}
                         </Text>
                       </View>
                       <View style={styles.mrzInfoItem}>
@@ -666,24 +698,24 @@ const ResultScreen = () => {
                           {t('eidScannerScreen.expirationDate')}:
                         </Text>
                         <Text style={styles.mrzInfoText}>
-                          {
+                          {formatDate(
                             appContext.identificationInfo.scannedDocument
                               .mrzFields?.expirationDate
-                          }
+                          )}
                         </Text>
                       </View>
-                      <View style={styles.mrzInfoItem}>
-                        <Text style={styles.mrzInfoLabel}>
-                          {t('eidScannerScreen.mrzText')}:
+                    </View>
+
+                    {appContext.identificationInfo.scannedDocument.mrzText && (
+                      <View style={styles.mrzTextContainer}>
+                        <Text style={styles.mrzTextLabel}>
+                          {t('eidScannerScreen.mrzText')}
                         </Text>
-                        <Text style={styles.mrzInfoText}>
-                          {
-                            appContext.identificationInfo.scannedDocument
-                              .mrzText
-                          }
+                        <Text style={styles.mrzTextValue}>
+                          {appContext.identificationInfo.scannedDocument.mrzText}
                         </Text>
                       </View>
-                    </View>
+                    )}
 
                     <Text style={styles.sectionText}>
                       {t('resultScreen.demoImages')}
@@ -692,89 +724,84 @@ const ResultScreen = () => {
                       <View style={styles.imageContainer}>
                         {appContext.identificationInfo.scannedDocument
                           .frontImage && (
-                          <View style={styles.imageItem}>
-                            <Image
-                              style={styles.image}
-                              source={{
-                                uri: `data:image/jpeg;base64,${
-                                  appContext.identificationInfo.scannedDocument
+                            <View style={styles.imageItem}>
+                              <Image
+                                style={styles.image}
+                                source={{
+                                  uri: `data:image/jpeg;base64,${appContext.identificationInfo.scannedDocument
                                     .frontImage
-                                }`,
-                              }}
-                            />
-                            <Text style={styles.imageText}>
-                              {t('resultScreen.demoImageFront')}
-                            </Text>
-                          </View>
-                        )}
+                                    }`,
+                                }}
+                              />
+                              <Text style={styles.imageText}>
+                                {t('resultScreen.demoImageFront')}
+                              </Text>
+                            </View>
+                          )}
                         {appContext.identificationInfo.scannedDocument
                           .backImage && (
-                          <View style={styles.imageItem}>
-                            <Image
-                              style={styles.image}
-                              source={{
-                                uri: `data:image/jpeg;base64,${
-                                  appContext.identificationInfo.scannedDocument
+                            <View style={styles.imageItem}>
+                              <Image
+                                style={styles.image}
+                                source={{
+                                  uri: `data:image/jpeg;base64,${appContext.identificationInfo.scannedDocument
                                     .backImage
-                                }`,
-                              }}
-                            />
-                            <Text style={styles.imageText}>
-                              {t('resultScreen.demoImageBack')}
-                            </Text>
-                          </View>
-                        )}
+                                    }`,
+                                }}
+                              />
+                              <Text style={styles.imageText}>
+                                {t('resultScreen.demoImageBack')}
+                              </Text>
+                            </View>
+                          )}
                         {appContext.identificationInfo.scannedDocument
                           .faceImage && (
-                          <View style={styles.imageItem}>
-                            <Image
-                              style={styles.image}
-                              source={{
-                                uri: `data:image/jpeg;base64,${
-                                  appContext.identificationInfo.scannedDocument
+                            <View style={styles.imageItem}>
+                              <Image
+                                style={styles.image}
+                                source={{
+                                  uri: `data:image/jpeg;base64,${appContext.identificationInfo.scannedDocument
                                     .faceImage
-                                }`,
-                              }}
-                            />
-                            <Text style={styles.imageText}>
-                              {t('resultScreen.demoImageFace')}
-                            </Text>
-                          </View>
-                        )}
+                                    }`,
+                                }}
+                              />
+                              <Text style={styles.imageText}>
+                                {t('resultScreen.demoImageFace')}
+                              </Text>
+                            </View>
+                          )}
                         {appContext.identificationInfo.scannedDocument
                           .secondaryFaceImage && (
-                          <View style={styles.imageItem}>
-                            <Image
-                              style={styles.image}
-                              source={{
-                                uri: `data:image/jpeg;base64,${
-                                  appContext.identificationInfo.scannedDocument
+                            <View style={styles.imageItem}>
+                              <Image
+                                style={styles.image}
+                                source={{
+                                  uri: `data:image/jpeg;base64,${appContext.identificationInfo.scannedDocument
                                     .secondaryFaceImage
-                                }`,
-                              }}
-                            />
-                            <Text style={styles.imageText}>
-                              {t('resultScreen.demoImageSecondaryFace')}
-                            </Text>
-                          </View>
-                        )}
+                                    }`,
+                                }}
+                              />
+                              <Text style={styles.imageText}>
+                                {t('resultScreen.demoImageSecondaryFace')}
+                              </Text>
+                            </View>
+                          )}
                         {appContext.identificationInfo.scannedDocument
                           .hologramImage && (
-                          <View style={styles.imageItem}>
-                            <Image
-                              style={styles.image}
-                              source={{
-                                uri: `data:image/jpeg;base64,${
-                                  appContext.identificationInfo.scannedDocument
+                            <View style={styles.imageItem}>
+                              <Image
+                                style={styles.image}
+                                source={{
+                                  uri: `data:image/jpeg;base64,${appContext.identificationInfo.scannedDocument
                                     .hologramImage
-                                }`,
-                              }}
-                            />
-                            <Text style={styles.imageText}>
-                              {t('resultScreen.demoImageHologram')}
-                            </Text>
-                          </View>
-                        )}
+                                    }`,
+                                }}
+                              />
+                              <Text style={styles.imageText}>
+                                {t('resultScreen.demoImageHologram')}
+                              </Text>
+                            </View>
+                          )}
                       </View>
                     </ScrollView>
                   </>
@@ -815,7 +842,7 @@ const ResultScreen = () => {
                               <Text style={styles.imageText}>
                                 {t(
                                   'resultScreen.demoInstruction_' +
-                                    instruction.instruction.toLowerCase()
+                                  instruction.instruction.toLowerCase()
                                 )}
                               </Text>
                             </View>
@@ -826,15 +853,17 @@ const ResultScreen = () => {
                 )}
               </View>
             </ScrollView>
-            <StyledButton
-              mode="contained"
-              onPress={() => {
-                appContext.onCompleted?.();
-                navigationManagerRef.current?.reset();
-              }}
-            >
-              {t('resultScreen.demoStartOver')}
-            </StyledButton>
+            <View style={{ paddingBottom: insets.bottom }}>
+              <StyledButton
+                mode="contained"
+                onPress={() => {
+                  appContext.onCompleted?.();
+                  navigationManagerRef.current?.reset();
+                }}
+              >
+                {t('resultScreen.demoStartOver')}
+              </StyledButton>
+            </View>
           </>
         ) : (
           <>
@@ -866,9 +895,11 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     display: 'flex',
-    padding: 20,
+    paddingVertical: 20,
+    paddingHorizontal: 10,
     justifyContent: 'center',
     gap: 20,
+    backgroundColor: 'white',
   },
   sectionAnimation: {
     width: 192,
@@ -912,17 +943,19 @@ const styles = StyleSheet.create({
     width: 100,
     height: 100,
     objectFit: 'contain',
+    borderRadius: 8,
   },
   imageItem: {
     display: 'flex',
     flexDirection: 'column',
-    gap: 10,
+    gap: 8,
     alignItems: 'center',
   },
   imageContainer: {
     display: 'flex',
     flexDirection: 'row',
     gap: 10,
+    paddingVertical: 8,
   },
   imageText: {
     fontSize: 10,
@@ -933,13 +966,18 @@ const styles = StyleSheet.create({
   mrzInfo: {
     flexDirection: 'column',
     width: '100%',
+    borderWidth: 1,
+    borderColor: '#D1D5DB',
+    borderRadius: 8,
+    overflow: 'hidden',
   },
   mrzInfoItem: {
     flexDirection: 'row',
     justifyContent: 'space-between',
-    borderBottomColor: 'lightgray',
+    borderBottomColor: '#D1D5DB',
     borderBottomWidth: 1,
-    paddingVertical: 5,
+    paddingVertical: 8,
+    paddingHorizontal: 12,
   },
   mrzInfoLabel: {
     color: 'black',
@@ -949,6 +987,27 @@ const styles = StyleSheet.create({
   mrzInfoText: {
     color: 'black',
     fontSize: 10,
+    fontFamily: Platform.OS === 'ios' ? 'Courier' : 'monospace',
+  },
+  mrzTextContainer: {
+    padding: 12,
+    backgroundColor: '#F3F4F6',
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: '#D1D5DB',
+  },
+  mrzTextLabel: {
+    fontSize: 12,
+    fontWeight: '600',
+    color: '#6B7280',
+    marginBottom: 8,
+  },
+  mrzTextValue: {
+    fontFamily: Platform.OS === 'ios' ? 'Courier' : 'monospace',
+    fontSize: 10,
+    letterSpacing: 1,
+    lineHeight: 14,
+    color: '#1F2937',
   },
   trustchexLogo: {
     width: 150,