@trustchex/react-native-sdk 1.161.0

package/lib/module/Screens/Static/ResultScreen.js

@@ -0,0 +1,627 @@
+"use strict";
+
+import React, { useCallback, useContext, useEffect, useState } from 'react';
+import { Alert, Image, Platform, SafeAreaView, ScrollView, StyleSheet, Text, View } from 'react-native';
+import AppContext from "../../Shared/Contexts/AppContext.js";
+import httpClient from "../../Shared/Libs/http-client.js";
+import RNFS from 'react-native-fs';
+import NativeProgressBar from "../../Shared/Components/NativeProgressBar.js";
+import LottieView from 'lottie-react-native';
+import { runWithRetry } from "../../Shared/Libs/promise.utils.js";
+import NavigationManager from "../../Shared/Components/NavigationManager.js";
+import mrzUtils from "../../Shared/Libs/mrz.utils.js";
+import { useTranslation } from 'react-i18next';
+import { Video as VideoCompressor } from 'react-native-compressor';
+import { encryptWithAes, getSessionKey } from "../../Shared/Libs/crypto.utils.js";
+import Video from 'react-native-video';
+import { Button } from 'react-native-paper';
+import NativeDeviceInfo from "../../Shared/Libs/native-device-info.utils.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const ResultScreen = () => {
+  const appContext = useContext(AppContext);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const navigationManagerRef = React.useRef(null);
+  const [apiUrl, setApiUrl] = useState(`${appContext.baseUrl}/api/app/mobile`);
+  const [shouldShowDemoData, setShouldShowDemoData] = useState(false);
+  const [deviceIdentifier, setDeviceIdentifier] = useState('');
+  const {
+    t
+  } = useTranslation();
+  useEffect(() => {
+    if (appContext.baseUrl) {
+      setApiUrl(`${appContext.baseUrl}/api/app/mobile`);
+    }
+  }, [appContext.baseUrl]);
+  useEffect(() => {
+    if (appContext.isDemoSession) {
+      setShouldShowDemoData(true);
+      // Generate device identifier for demo
+      NativeDeviceInfo.generateHumanReadableIdentifier().then(setDeviceIdentifier);
+    }
+  }, [appContext.identificationInfo.identificationId, appContext.isDemoSession]);
+  const createIdentification = useCallback(async identificationId => {
+    await httpClient.post(`${apiUrl}/identifications/${identificationId}`, null);
+  }, [apiUrl]);
+  const finishIdentification = useCallback(async (identificationId, sessionKey) => {
+    const {
+      encryptedData,
+      nonce
+    } = encryptWithAes(JSON.stringify({
+      status: 'SUBMITTED'
+    }), sessionKey);
+    await httpClient.put(`${apiUrl}/identifications/${identificationId}`, {
+      encryptedData,
+      nonce
+    });
+  }, [apiUrl]);
+  const getGenderEnumType = useCallback(gender => {
+    switch (gender?.toLowerCase()) {
+      case 'm':
+      case 'male':
+        return 'MALE';
+      case 'f':
+      case 'female':
+        return 'FEMALE';
+      case 'x':
+      case 'unspecified':
+        return 'UNSPECIFIED';
+      default:
+        return 'UNKNOWN';
+    }
+  }, []);
+  const submitIdentificationConsent = useCallback(async (identificationId, sessionKey) => {
+    const {
+      encryptedData,
+      nonce
+    } = encryptWithAes(JSON.stringify(appContext.identificationInfo.consent), sessionKey);
+    await httpClient.post(`${apiUrl}/identifications/${identificationId}/consents`, {
+      encryptedData,
+      nonce
+    });
+  }, [apiUrl, appContext.identificationInfo.consent]);
+  const submitIdentificationDocument = useCallback(async (identificationId, scannedDocument, sessionKey) => {
+    if (!scannedDocument.mrzFields) {
+      throw new Error('MRZ fields not found');
+    }
+    const identificationDocument = {
+      type: scannedDocument.mrzFields.documentCode,
+      name: scannedDocument.mrzFields.firstName,
+      surname: scannedDocument.mrzFields.lastName,
+      gender: getGenderEnumType(scannedDocument.mrzFields.sex),
+      number: scannedDocument.mrzFields.documentNumber,
+      country: scannedDocument.mrzFields.issuingState,
+      barcodeValue: scannedDocument.barcodeValue,
+      personalNumber: scannedDocument.mrzFields.personalNumber || scannedDocument.mrzFields.optional1,
+      issueDate: mrzUtils.convertMRZDateToISODate(scannedDocument.mrzFields.issueDate),
+      birthDate: mrzUtils.convertMRZDateToISODate(scannedDocument.mrzFields.birthDate),
+      expiryDate: mrzUtils.convertMRZDateToISODate(scannedDocument.mrzFields.expirationDate),
+      dataSource: scannedDocument.dataSource,
+      mrzText: scannedDocument.mrzText
+    };
+    const {
+      encryptedData,
+      nonce
+    } = encryptWithAes(JSON.stringify(identificationDocument), sessionKey);
+    await httpClient.post(`${apiUrl}/identifications/${identificationId}/documents`, {
+      encryptedData,
+      nonce
+    });
+  }, [apiUrl, getGenderEnumType]);
+  const uploadIdentificationMedia = useCallback(async (identificationId, scannedIdentityDocument, livenessDetection) => {
+    const uploadFileOptions = {
+      toUrl: `${apiUrl}/identifications/${identificationId}/media`,
+      method: 'POST',
+      headers: {
+        Accept: 'application/json'
+      },
+      files: [],
+      progress: res => {
+        setProgress(40 + res.totalBytesSent / res.totalBytesExpectedToSend * 50);
+      }
+    };
+    const frontImage = scannedIdentityDocument?.frontImage;
+    if (frontImage && frontImage !== '') {
+      await RNFS.writeFile(decodeURIComponent(`${RNFS.TemporaryDirectoryPath}/DOCUMENT_FRONT_IMAGE.jpg`), frontImage, 'base64');
+      uploadFileOptions.files.push({
+        name: 'files',
+        filename: 'DOCUMENT_FRONT_IMAGE.jpg',
+        filepath: decodeURIComponent(`${RNFS.TemporaryDirectoryPath}/DOCUMENT_FRONT_IMAGE.jpg`),
+        filetype: 'image/jpeg'
+      });
+    }
+    const backImage = scannedIdentityDocument?.backImage;
+    if (backImage && backImage !== '') {
+      await RNFS.writeFile(decodeURIComponent(`${RNFS.TemporaryDirectoryPath}/DOCUMENT_BACK_IMAGE.jpg`), backImage, 'base64');
+      uploadFileOptions.files.push({
+        name: 'files',
+        filename: 'DOCUMENT_BACK_IMAGE.jpg',
+        filepath: decodeURIComponent(`${RNFS.TemporaryDirectoryPath}/DOCUMENT_BACK_IMAGE.jpg`),
+        filetype: 'image/jpeg'
+      });
+    }
+    const faceImage = scannedIdentityDocument?.faceImage;
+    if (faceImage && faceImage !== '') {
+      scannedIdentityDocument.faceImageMimeType ||= 'image/jpeg';
+      const extension = scannedIdentityDocument.faceImageMimeType === 'image/jp2' ? 'jp2' : 'jpg';
+      await RNFS.writeFile(decodeURIComponent(`${RNFS.TemporaryDirectoryPath}/FACE_IMAGE.${extension}`), faceImage, 'base64');
+      uploadFileOptions.files.push({
+        name: 'files',
+        filename: `FACE_IMAGE.${extension}`,
+        filepath: decodeURIComponent(`${RNFS.TemporaryDirectoryPath}/FACE_IMAGE.${extension}`),
+        filetype: scannedIdentityDocument.faceImageMimeType
+      });
+    }
+    const secondaryFaceImage = scannedIdentityDocument?.secondaryFaceImage;
+    if (secondaryFaceImage && secondaryFaceImage !== '') {
+      await RNFS.writeFile(decodeURIComponent(`${RNFS.TemporaryDirectoryPath}/DOCUMENT_SECONDARY_FACE_IMAGE.jpg`), secondaryFaceImage, 'base64');
+      uploadFileOptions.files.push({
+        name: 'files',
+        filename: 'DOCUMENT_SECONDARY_FACE_IMAGE.jpg',
+        filepath: decodeURIComponent(`${RNFS.TemporaryDirectoryPath}/DOCUMENT_SECONDARY_FACE_IMAGE.jpg`),
+        filetype: 'image/jpeg'
+      });
+    }
+    const hologramImage = scannedIdentityDocument?.hologramImage;
+    if (hologramImage && hologramImage !== '') {
+      await RNFS.writeFile(decodeURIComponent(`${RNFS.TemporaryDirectoryPath}/DOCUMENT_HOLOGRAM_IMAGE.jpg`), hologramImage, 'base64');
+      uploadFileOptions.files.push({
+        name: 'files',
+        filename: 'DOCUMENT_HOLOGRAM_IMAGE.jpg',
+        filepath: decodeURIComponent(`${RNFS.TemporaryDirectoryPath}/DOCUMENT_HOLOGRAM_IMAGE.jpg`),
+        filetype: 'image/jpeg'
+      });
+    }
+    if (livenessDetection) {
+      for (const instruction of livenessDetection.instructions) {
+        if (instruction.photo !== '') {
+          await RNFS.writeFile(decodeURIComponent(`${RNFS.TemporaryDirectoryPath}/LIVENESS_${instruction.instruction}_IMAGE.jpg`), instruction.photo, 'base64');
+          uploadFileOptions.files.push({
+            name: 'files',
+            filename: `LIVENESS_${instruction.instruction}_IMAGE.jpg`,
+            filepath: decodeURIComponent(`${RNFS.TemporaryDirectoryPath}/LIVENESS_${instruction.instruction}_IMAGE.jpg`),
+            filetype: 'image/jpeg'
+          });
+          if (instruction.instruction === 'LOOK_STRAIGHT_AND_BLINK') {
+            uploadFileOptions.files.push({
+              name: 'files',
+              filename: 'SELFIE_IMAGE.jpg',
+              filepath: decodeURIComponent(`${RNFS.TemporaryDirectoryPath}/LIVENESS_${instruction.instruction}_IMAGE.jpg`),
+              filetype: 'image/jpeg'
+            });
+          }
+        }
+      }
+      const livenessVideoPath = livenessDetection.videoPath;
+      if (livenessVideoPath) {
+        let videoFilePath;
+        if (Platform.OS === 'ios') {
+          await RNFS.mkdir(`${RNFS.TemporaryDirectoryPath}/${new Date().getTime()}`);
+          videoFilePath = `${RNFS.TemporaryDirectoryPath}/${new Date().getTime()}/LIVENESS_VIDEO.mp4`;
+        } else {
+          videoFilePath = `${RNFS.TemporaryDirectoryPath}/LIVENESS_VIDEO.mp4`;
+        }
+        await RNFS.copyFile(livenessVideoPath, videoFilePath);
+        await VideoCompressor.compress(videoFilePath);
+        uploadFileOptions.files.push({
+          name: 'files',
+          filename: 'LIVENESS_VIDEO.mp4',
+          filepath: videoFilePath,
+          filetype: 'video/mp4'
+        });
+      }
+    }
+    const response = await RNFS.uploadFiles(uploadFileOptions).promise;
+    if (![200, 201, 204].includes(response.statusCode)) {
+      throw new Error('Media upload failed');
+    }
+  }, [apiUrl]);
+  const submit = useCallback(async identificationInfo => {
+    try {
+      setIsSubmitting(true);
+      const identificationId = identificationInfo.identificationId;
+      if (!identificationId) {
+        throw new Error('IdentificationId not found');
+      }
+      const sessionKey = await runWithRetry(() => getSessionKey(apiUrl, appContext.identificationInfo.sessionId));
+      await runWithRetry(() => createIdentification(identificationId));
+      setProgress(20);
+      await runWithRetry(() => submitIdentificationConsent(identificationId, sessionKey));
+      setProgress(30);
+      const scannedIdentityDocument = identificationInfo.scannedDocument;
+      if (scannedIdentityDocument && scannedIdentityDocument.documentType !== 'UNKNOWN') {
+        await runWithRetry(() => submitIdentificationDocument(identificationId, scannedIdentityDocument, sessionKey));
+      }
+      setProgress(40);
+      const livenessDetection = identificationInfo.livenessDetection;
+      await runWithRetry(() => uploadIdentificationMedia(identificationId, scannedIdentityDocument, livenessDetection));
+      await runWithRetry(() => finishIdentification(identificationId, sessionKey));
+      setProgress(100);
+      setIsSubmitting(false);
+    } catch (error) {
+      setIsSubmitting(false);
+      setProgress(0);
+      Alert.alert(t('general.error'), t('resultScreen.submissionFailed'));
+      appContext.onError?.(t('resultScreen.submissionFailed'));
+      navigationManagerRef.current?.reset();
+    }
+  }, [createIdentification, apiUrl, uploadIdentificationMedia, finishIdentification, submitIdentificationDocument, submitIdentificationConsent, t, appContext]);
+  useEffect(() => {
+    if (appContext.identificationInfo && !appContext.isDemoSession) {
+      submit(appContext.identificationInfo);
+    }
+  }, [appContext.identificationInfo, appContext.isDemoSession, submit]);
+  useEffect(() => {
+    if (progress === 100 && !appContext.isDemoSession) {
+      setTimeout(() => {
+        appContext.onCompleted?.();
+        navigationManagerRef.current?.reset();
+      }, 3000);
+    }
+  }, [appContext, progress]);
+  return /*#__PURE__*/_jsx(SafeAreaView, {
+    style: styles.container,
+    children: /*#__PURE__*/_jsxs(View, {
+      style: styles.container,
+      children: [isSubmitting ? /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.sectionHeader,
+          children: t('resultScreen.submitting')
+        }), /*#__PURE__*/_jsx(NativeProgressBar, {
+          progress: progress / 100,
+          width: null,
+          height: 30,
+          borderRadius: 8,
+          color: appContext.branding.primaryColor
+        })]
+      }) : shouldShowDemoData ? /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Image, {
+          source: require('../../Shared/Assets/trustchex-logo-black.png'),
+          style: styles.trustchexLogo
+        }), /*#__PURE__*/_jsx(ScrollView, {
+          children: /*#__PURE__*/_jsxs(View, {
+            style: styles.demoView,
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: styles.sectionHeader,
+              children: t('resultScreen.demo')
+            }), /*#__PURE__*/_jsx(Text, {
+              style: styles.sectionText,
+              children: t('resultScreen.demoDescription')
+            }), deviceIdentifier && /*#__PURE__*/_jsxs(_Fragment, {
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: styles.sectionHeader,
+                children: t('resultScreen.demoDeviceIdentifier')
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.sectionText,
+                children: deviceIdentifier
+              })]
+            }), appContext.identificationInfo.scannedDocument && /*#__PURE__*/_jsxs(_Fragment, {
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: styles.sectionHeader,
+                children: t('resultScreen.demoScannedDocument')
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.sectionText,
+                children: t('resultScreen.demoScannedDocumentInformation')
+              }), /*#__PURE__*/_jsxs(View, {
+                style: styles.mrzInfo,
+                children: [/*#__PURE__*/_jsxs(View, {
+                  style: styles.mrzInfoItem,
+                  children: [/*#__PURE__*/_jsxs(Text, {
+                    style: styles.mrzInfoLabel,
+                    children: [t('eidScannerScreen.documentCode'), ":"]
+                  }), /*#__PURE__*/_jsx(Text, {
+                    style: styles.mrzInfoText,
+                    children: appContext.identificationInfo.scannedDocument.mrzFields?.documentCode
+                  })]
+                }), /*#__PURE__*/_jsxs(View, {
+                  style: styles.mrzInfoItem,
+                  children: [/*#__PURE__*/_jsxs(Text, {
+                    style: styles.mrzInfoLabel,
+                    children: [t('eidScannerScreen.nationality'), ":"]
+                  }), /*#__PURE__*/_jsx(Text, {
+                    style: styles.mrzInfoText,
+                    children: appContext.identificationInfo.scannedDocument.mrzFields?.issuingState
+                  })]
+                }), /*#__PURE__*/_jsxs(View, {
+                  style: styles.mrzInfoItem,
+                  children: [/*#__PURE__*/_jsxs(Text, {
+                    style: styles.mrzInfoLabel,
+                    children: [t('eidScannerScreen.personalNumber'), ":"]
+                  }), /*#__PURE__*/_jsx(Text, {
+                    style: styles.mrzInfoText,
+                    children: appContext.identificationInfo.scannedDocument.mrzFields?.personalNumber || appContext.identificationInfo.scannedDocument.mrzFields?.optional1
+                  })]
+                }), /*#__PURE__*/_jsxs(View, {
+                  style: styles.mrzInfoItem,
+                  children: [/*#__PURE__*/_jsxs(Text, {
+                    style: styles.mrzInfoLabel,
+                    children: [t('eidScannerScreen.documentNumber'), ":"]
+                  }), /*#__PURE__*/_jsx(Text, {
+                    style: styles.mrzInfoText,
+                    children: appContext.identificationInfo.scannedDocument.mrzFields?.documentNumber
+                  })]
+                }), /*#__PURE__*/_jsxs(View, {
+                  style: styles.mrzInfoItem,
+                  children: [/*#__PURE__*/_jsxs(Text, {
+                    style: styles.mrzInfoLabel,
+                    children: [t('eidScannerScreen.name'), ":"]
+                  }), /*#__PURE__*/_jsx(Text, {
+                    style: styles.mrzInfoText,
+                    children: appContext.identificationInfo.scannedDocument.mrzFields?.firstName
+                  })]
+                }), /*#__PURE__*/_jsxs(View, {
+                  style: styles.mrzInfoItem,
+                  children: [/*#__PURE__*/_jsxs(Text, {
+                    style: styles.mrzInfoLabel,
+                    children: [t('eidScannerScreen.surname'), ":"]
+                  }), /*#__PURE__*/_jsx(Text, {
+                    style: styles.mrzInfoText,
+                    children: appContext.identificationInfo.scannedDocument.mrzFields?.lastName
+                  })]
+                }), /*#__PURE__*/_jsxs(View, {
+                  style: styles.mrzInfoItem,
+                  children: [/*#__PURE__*/_jsxs(Text, {
+                    style: styles.mrzInfoLabel,
+                    children: [t('eidScannerScreen.birthDate'), ":"]
+                  }), /*#__PURE__*/_jsx(Text, {
+                    style: styles.mrzInfoText,
+                    children: appContext.identificationInfo.scannedDocument.mrzFields?.birthDate
+                  })]
+                }), /*#__PURE__*/_jsxs(View, {
+                  style: styles.mrzInfoItem,
+                  children: [/*#__PURE__*/_jsxs(Text, {
+                    style: styles.mrzInfoLabel,
+                    children: [t('eidScannerScreen.gender'), ":"]
+                  }), /*#__PURE__*/_jsx(Text, {
+                    style: styles.mrzInfoText,
+                    children: appContext.identificationInfo.scannedDocument.mrzFields?.sex
+                  })]
+                }), /*#__PURE__*/_jsxs(View, {
+                  style: styles.mrzInfoItem,
+                  children: [/*#__PURE__*/_jsxs(Text, {
+                    style: styles.mrzInfoLabel,
+                    children: [t('eidScannerScreen.expirationDate'), ":"]
+                  }), /*#__PURE__*/_jsx(Text, {
+                    style: styles.mrzInfoText,
+                    children: appContext.identificationInfo.scannedDocument.mrzFields?.expirationDate
+                  })]
+                }), /*#__PURE__*/_jsxs(View, {
+                  style: styles.mrzInfoItem,
+                  children: [/*#__PURE__*/_jsxs(Text, {
+                    style: styles.mrzInfoLabel,
+                    children: [t('eidScannerScreen.mrzText'), ":"]
+                  }), /*#__PURE__*/_jsx(Text, {
+                    style: styles.mrzInfoText,
+                    children: appContext.identificationInfo.scannedDocument.mrzText
+                  })]
+                })]
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.sectionText,
+                children: t('resultScreen.demoImages')
+              }), /*#__PURE__*/_jsx(ScrollView, {
+                horizontal: true,
+                children: /*#__PURE__*/_jsxs(View, {
+                  style: styles.imageContainer,
+                  children: [appContext.identificationInfo.scannedDocument.frontImage && /*#__PURE__*/_jsxs(View, {
+                    style: styles.imageItem,
+                    children: [/*#__PURE__*/_jsx(Image, {
+                      style: styles.image,
+                      source: {
+                        uri: `data:image/jpeg;base64,${appContext.identificationInfo.scannedDocument.frontImage}`
+                      }
+                    }), /*#__PURE__*/_jsx(Text, {
+                      style: styles.imageText,
+                      children: t('resultScreen.demoImageFront')
+                    })]
+                  }), appContext.identificationInfo.scannedDocument.backImage && /*#__PURE__*/_jsxs(View, {
+                    style: styles.imageItem,
+                    children: [/*#__PURE__*/_jsx(Image, {
+                      style: styles.image,
+                      source: {
+                        uri: `data:image/jpeg;base64,${appContext.identificationInfo.scannedDocument.backImage}`
+                      }
+                    }), /*#__PURE__*/_jsx(Text, {
+                      style: styles.imageText,
+                      children: t('resultScreen.demoImageBack')
+                    })]
+                  }), appContext.identificationInfo.scannedDocument.faceImage && /*#__PURE__*/_jsxs(View, {
+                    style: styles.imageItem,
+                    children: [/*#__PURE__*/_jsx(Image, {
+                      style: styles.image,
+                      source: {
+                        uri: `data:image/jpeg;base64,${appContext.identificationInfo.scannedDocument.faceImage}`
+                      }
+                    }), /*#__PURE__*/_jsx(Text, {
+                      style: styles.imageText,
+                      children: t('resultScreen.demoImageFace')
+                    })]
+                  }), appContext.identificationInfo.scannedDocument.secondaryFaceImage && /*#__PURE__*/_jsxs(View, {
+                    style: styles.imageItem,
+                    children: [/*#__PURE__*/_jsx(Image, {
+                      style: styles.image,
+                      source: {
+                        uri: `data:image/jpeg;base64,${appContext.identificationInfo.scannedDocument.secondaryFaceImage}`
+                      }
+                    }), /*#__PURE__*/_jsx(Text, {
+                      style: styles.imageText,
+                      children: t('resultScreen.demoImageSecondaryFace')
+                    })]
+                  }), appContext.identificationInfo.scannedDocument.hologramImage && /*#__PURE__*/_jsxs(View, {
+                    style: styles.imageItem,
+                    children: [/*#__PURE__*/_jsx(Image, {
+                      style: styles.image,
+                      source: {
+                        uri: `data:image/jpeg;base64,${appContext.identificationInfo.scannedDocument.hologramImage}`
+                      }
+                    }), /*#__PURE__*/_jsx(Text, {
+                      style: styles.imageText,
+                      children: t('resultScreen.demoImageHologram')
+                    })]
+                  })]
+                })
+              })]
+            }), appContext.identificationInfo.livenessDetection?.videoPath && /*#__PURE__*/_jsxs(_Fragment, {
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: styles.sectionHeader,
+                children: t('resultScreen.demoLivenessDetection')
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.sectionText,
+                children: t('resultScreen.demoVideo')
+              }), /*#__PURE__*/_jsx(Video, {
+                source: {
+                  uri: appContext.identificationInfo.livenessDetection?.videoPath
+                },
+                resizeMode: "contain",
+                style: styles.video,
+                controls: true,
+                muted: false
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.sectionText,
+                children: t('resultScreen.demoImages')
+              }), /*#__PURE__*/_jsx(ScrollView, {
+                horizontal: true,
+                children: /*#__PURE__*/_jsx(View, {
+                  style: styles.imageContainer,
+                  children: appContext.identificationInfo.livenessDetection?.instructions?.filter(instruction => !!instruction.photo)?.map((instruction, index) => /*#__PURE__*/_jsxs(View, {
+                    style: styles.imageItem,
+                    children: [/*#__PURE__*/_jsx(Image, {
+                      style: styles.image,
+                      source: {
+                        uri: `data:image/jpeg;base64,${instruction.photo}`
+                      }
+                    }), /*#__PURE__*/_jsx(Text, {
+                      style: styles.imageText,
+                      children: t('resultScreen.demoInstruction_' + instruction.instruction.toLowerCase())
+                    })]
+                  }, index))
+                })
+              })]
+            })]
+          })
+        }), /*#__PURE__*/_jsx(Button, {
+          mode: "contained",
+          onPress: () => {
+            appContext.onCompleted?.();
+            navigationManagerRef.current?.reset();
+          },
+          children: t('resultScreen.demoStartOver')
+        })]
+      }) : /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(LottieView, {
+          source: require('../../Shared/Animations/success.json'),
+          style: styles.sectionAnimation,
+          autoPlay: true,
+          loop: false
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.sectionHeader,
+          children: t('resultScreen.thankYou')
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.sectionText,
+          children: t('resultScreen.submissionSuccessful')
+        })]
+      }), /*#__PURE__*/_jsx(NavigationManager, {
+        ref: navigationManagerRef
+      })]
+    })
+  });
+};
+const styles = StyleSheet.create({
+  safeAreaContainer: {
+    flex: 1,
+    backgroundColor: 'white'
+  },
+  container: {
+    flex: 1,
+    display: 'flex',
+    padding: 20,
+    justifyContent: 'center',
+    gap: 20
+  },
+  sectionAnimation: {
+    width: 192,
+    height: 192,
+    alignSelf: 'center'
+  },
+  sectionHeader: {
+    fontSize: 18,
+    color: 'black',
+    fontWeight: 'bold',
+    textAlign: 'center',
+    textTransform: 'capitalize'
+  },
+  sectionText: {
+    fontSize: 18,
+    color: 'black',
+    textAlign: 'center'
+  },
+  progress: {
+    width: '100%',
+    marginVertical: 10
+  },
+  footer: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 10,
+    padding: 20,
+    justifyContent: 'center'
+  },
+  demoView: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 20,
+    justifyContent: 'center'
+  },
+  video: {
+    width: '100%',
+    height: 200
+  },
+  image: {
+    width: 100,
+    height: 100,
+    objectFit: 'contain'
+  },
+  imageItem: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 10,
+    alignItems: 'center'
+  },
+  imageContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: 10
+  },
+  imageText: {
+    fontSize: 10,
+    color: 'black',
+    textAlign: 'center',
+    textTransform: 'capitalize'
+  },
+  mrzInfo: {
+    flexDirection: 'column',
+    width: '100%'
+  },
+  mrzInfoItem: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    borderBottomColor: 'lightgray',
+    borderBottomWidth: 1,
+    paddingVertical: 5
+  },
+  mrzInfoLabel: {
+    color: 'black',
+    fontWeight: 'bold',
+    fontSize: 12
+  },
+  mrzInfoText: {
+    color: 'black',
+    fontSize: 10
+  },
+  trustchexLogo: {
+    width: 150,
+    height: 75,
+    resizeMode: 'contain',
+    alignSelf: 'center'
+  }
+});
+export default ResultScreen;