@trustchex/react-native-sdk 1.161.0

package/src/Screens/Dynamic/IdentityDocumentScanningScreen.tsx

@@ -0,0 +1,152 @@
+import React, { useContext, useEffect, useState } from 'react';
+
+import type { FieldRecords } from 'mrz';
+import { Alert, SafeAreaView, StyleSheet, View } from 'react-native';
+import IdentityDocumentCamera, {
+  type DocumentScannedData,
+} from '../../Shared/Components/IdentityDocumentCamera';
+import AppContext from '../../Shared/Contexts/AppContext';
+import NavigationManager, {
+  type NavigationManagerRef,
+} from '../../Shared/Components/NavigationManager';
+import { useTranslation } from 'react-i18next';
+
+const IdentityDocumentScanningScreen = () => {
+  const [idFrontSideData, setIDFrontSideData] =
+    useState<DocumentScannedData | null>(null);
+  const [idBackSideData, setIDBackSideData] =
+    useState<DocumentScannedData | null>(null);
+  const [passportData, setPassportData] =
+    useState<DocumentScannedData | null>();
+  const navigationManagerRef = React.useRef<NavigationManagerRef>(null);
+  const appContext = useContext(AppContext);
+  const { t } = useTranslation();
+  const [allowedDocumentTypes, setAllowedDocumentTypes] = useState<
+    ('I' | 'P')[] | null
+  >(null);
+  const [allowedCountries, setAllowedCountries] = useState<'TUR'[] | null>(
+    null
+  );
+
+  useEffect(() => {
+    if (
+      ((idFrontSideData && idBackSideData) || passportData) &&
+      appContext.identificationInfo &&
+      !appContext.identificationInfo.scannedDocument
+    ) {
+      appContext.identificationInfo.scannedDocument = {
+        documentType: 'UNKNOWN',
+        dataSource: 'UNKNOWN',
+      };
+
+      const mrzFields = (idBackSideData?.mrzFields ||
+        passportData?.mrzFields) as FieldRecords;
+
+      const mrzText = idBackSideData?.mrzText || passportData?.mrzText;
+
+      appContext.identificationInfo.scannedDocument.dataSource = 'MRZ';
+      appContext.identificationInfo.scannedDocument.mrzFields = mrzFields;
+      appContext.identificationInfo.scannedDocument.mrzText = mrzText;
+      appContext.identificationInfo.scannedDocument.frontImage =
+        (idFrontSideData?.image || passportData?.image) as string;
+      appContext.identificationInfo.scannedDocument.backImage =
+        idBackSideData?.image;
+      appContext.identificationInfo.scannedDocument.faceImage =
+        (idFrontSideData?.faceImage || passportData?.faceImage) as string;
+      appContext.identificationInfo.scannedDocument.faceImageMimeType =
+        'image/jpeg';
+      appContext.identificationInfo.scannedDocument.secondaryFaceImage =
+        idFrontSideData?.secondaryFaceImage;
+      appContext.identificationInfo.scannedDocument.hologramImage =
+        idFrontSideData?.hologramImage || passportData?.hologramImage;
+      appContext.identificationInfo.scannedDocument.barcodeValue =
+        idBackSideData?.barcodeValue;
+      appContext.identificationInfo.scannedDocument.documentType =
+        mrzFields.documentCode === 'I'
+          ? 'ID'
+          : mrzFields.documentCode === 'P'
+            ? 'PASSPORT'
+            : 'UNKNOWN';
+
+      if (allowedCountries && allowedCountries.length > 0) {
+        const countryCode = mrzFields.issuingState;
+        if (!allowedCountries.includes(countryCode as 'TUR')) {
+          Alert.alert(t('general.error'), t('general.countryNotAllowed'));
+          appContext.onError?.(t('general.countryNotAllowed'));
+          navigationManagerRef.current?.reset();
+          return;
+        }
+      }
+
+      if (allowedDocumentTypes && allowedDocumentTypes.length > 0) {
+        const documentCode = mrzFields.documentCode;
+        if (!allowedDocumentTypes.includes(documentCode as 'I' | 'P')) {
+          Alert.alert(t('general.error'), t('general.documentTypeNotAllowed'));
+          appContext.onError?.(t('general.documentTypeNotAllowed'));
+          navigationManagerRef.current?.reset();
+          return;
+        }
+      }
+
+      setTimeout(
+        () => navigationManagerRef.current?.navigateToNextStep(),
+        1000
+      );
+    }
+  }, [
+    idFrontSideData,
+    idBackSideData,
+    passportData,
+    appContext.identificationInfo,
+    allowedCountries,
+    allowedDocumentTypes,
+    t,
+    appContext,
+  ]);
+
+  useEffect(() => {
+    setAllowedDocumentTypes(
+      appContext.currentWorkflowStep?.data?.allowedDocumentTypes ?? null
+    );
+    setAllowedCountries(
+      appContext.currentWorkflowStep?.data?.allowedCountries ?? null
+    );
+  }, [appContext.currentWorkflowStep]);
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <IdentityDocumentCamera
+        onlyMRZScan={false}
+        onIdentityDocumentScanned={(data) => {
+          if (data.documentType === 'ID_FRONT') {
+            setIDFrontSideData(data);
+          } else if (data.documentType === 'ID_BACK') {
+            setIDBackSideData(data);
+          } else if (data.documentType === 'PASSPORT') {
+            setPassportData(data);
+          }
+        }}
+        showDebugImages={false}
+      />
+      <View style={styles.footer}>
+        <NavigationManager ref={navigationManagerRef} />
+      </View>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'white',
+  },
+  footer: {
+    flex: 0,
+    position: 'absolute',
+    bottom: 0,
+    width: '100%',
+    zIndex: 10,
+  },
+});
+
+export default IdentityDocumentScanningScreen;