@trustchex/react-native-sdk 1.161.0

package/src/Shared/Components/EIDScanner.tsx

@@ -0,0 +1,472 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { Alert, View, Text, Image, StyleSheet } from 'react-native';
+import NFCManager from 'react-native-nfc-manager';
+import { MRZInfo } from '../EIDReader/lds/icao/mrzInfo';
+import { eidReader } from '../EIDReader/eidReader';
+import NativeProgressBar from './NativeProgressBar';
+import type { FieldRecords } from 'mrz';
+import { useTranslation } from 'react-i18next';
+import AppContext from '../Contexts/AppContext';
+import { Button } from 'react-native-paper';
+import LottieView from 'lottie-react-native';
+import { useKeepAwake } from '../Libs/native-keep-awake.utils';
+import { speakWithDebounce } from '../Libs/tts.utils';
+
+interface eIDScannerProps {
+  documentNumber: string;
+  dateOfBirth: string;
+  dateOfExpiry: string;
+  documentType?: string;
+  onScanSuccess?: (
+    mrzInfo: FieldRecords,
+    faceImage: string,
+    faceImageMimeType: string
+  ) => void;
+  isNFCSupported?: (supported: boolean) => void;
+}
+
+const EIDScanner = ({
+  documentNumber,
+  dateOfBirth,
+  dateOfExpiry,
+  documentType,
+  onScanSuccess,
+  isNFCSupported,
+}: eIDScannerProps) => {
+  useKeepAwake();
+  const [isScanning, setIsScanning] = React.useState(false);
+  const [hasNfc, setHasNFC] = React.useState(false);
+  const [isEnabled, setIsEnabled] = React.useState(false);
+  const [documentFaceImage, setDocumentFaceImage] = React.useState<string>();
+  const [documentMRZInfo, setDocumentMRZInfo] = React.useState<MRZInfo>();
+  const [documentFaceImageMimeType, setDocumentFaceImageMimeType] =
+    React.useState<string>();
+  const [progress, setProgress] = React.useState(0);
+  const [isScanned, setIsScanned] = React.useState(false);
+  const [hasGuideShown, setHasGuideShown] = React.useState(false);
+  const { t } = useTranslation();
+  const appContext = React.useContext(AppContext);
+  const [voiceGuidanceMessage, setVoiceGuidanceMessage] = useState<string>();
+
+  const readNFC = useCallback(async () => {
+    setIsScanning(true);
+    setIsScanned(false);
+    setProgress(0);
+
+    try {
+      if (documentNumber && dateOfBirth && dateOfExpiry) {
+        const passportData = await eidReader(
+          documentNumber,
+          dateOfBirth,
+          dateOfExpiry,
+          (progressValue) => {
+            setProgress(progressValue);
+          }
+        );
+        if (passportData) {
+          setDocumentFaceImage(passportData.faceImage);
+          setDocumentMRZInfo(passportData.mrz);
+          setDocumentFaceImageMimeType(passportData.mimeType);
+          setIsScanned(true);
+        }
+      } else {
+        Alert.alert(t('general.error'), t('eidScannerScreen.invalidMRZFields'));
+      }
+    } catch (error) {
+      console.debug(error);
+      // Ignore error
+    } finally {
+      setIsScanning(false);
+      setProgress(0);
+      setHasGuideShown(false);
+    }
+  }, [documentNumber, dateOfBirth, dateOfExpiry, t]);
+
+  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 FieldRecords;
+  }, []);
+
+  useEffect(() => {
+    const checkIsSupported = async () => {
+      const deviceIsSupported = await NFCManager.isSupported();
+      setHasNFC(deviceIsSupported);
+      isNFCSupported && isNFCSupported(deviceIsSupported);
+
+      const deviceIsEnabled = await NFCManager.isEnabled();
+      setIsEnabled(deviceIsEnabled);
+    };
+
+    checkIsSupported();
+  }, [isNFCSupported, isScanning]);
+
+  useEffect(() => {
+    if (hasGuideShown) {
+      let message = '';
+      if (!hasNfc) {
+        message = t('eidScannerScreen.nfcNotSupported');
+      }
+
+      if (hasNfc && !isEnabled) {
+        message = t('eidScannerScreen.nfcNotEnabled');
+      }
+
+      if (hasNfc && isEnabled && isScanning && progress === 0) {
+        if (documentType === 'ID') {
+          message = t('eidScannerScreen.placeIDCardOnNFC');
+        } else if (documentType === 'PASSPORT') {
+          message = t('eidScannerScreen.placeDocumentOnNFC');
+        } else if (documentType === 'UNKNOWN') {
+          message = t('eidScannerScreen.placeDocumentOnNFC');
+        }
+      }
+
+      if (hasNfc && isEnabled && isScanning && progress > 0) {
+        message = t('eidScannerScreen.readingDocument');
+      }
+
+      if (hasNfc && isEnabled && isScanned) {
+        message = t('eidScannerScreen.checkYourInformation');
+      }
+
+      setVoiceGuidanceMessage(message);
+    }
+  }, [
+    hasGuideShown,
+    hasNfc,
+    isEnabled,
+    isScanning,
+    progress,
+    isScanned,
+    documentType,
+    t,
+    appContext.currentWorkflowStep?.data?.voiceGuidanceActive,
+  ]);
+
+  useEffect(() => {
+    if (
+      voiceGuidanceMessage &&
+      appContext.currentWorkflowStep?.data?.voiceGuidanceActive
+    ) {
+      speakWithDebounce(voiceGuidanceMessage);
+    }
+  }, [
+    voiceGuidanceMessage,
+    appContext.currentWorkflowStep?.data?.voiceGuidanceActive,
+  ]);
+
+  return (
+    <View style={styles.container}>
+      {!hasGuideShown && !isScanned ? (
+        <View style={styles.guide}>
+          <LottieView
+            source={require('../../Shared/Animations/nfc.json')}
+            style={styles.guideAnimation}
+            loop={true}
+            autoPlay
+          />
+          <Text style={styles.guideHeader}>
+            {t('eidScannerScreen.guideHeader')}
+          </Text>
+          <View style={styles.guidePoints}>
+            <Text style={styles.guideText}>
+              {t('eidScannerScreen.guideText')}
+            </Text>
+          </View>
+          <Button
+            mode="contained"
+            onPress={() => {
+              setHasGuideShown(true);
+              readNFC();
+            }}
+          >
+            {t('eidScannerScreen.startScanning')}
+          </Button>
+        </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}>
+                  {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}>
+                  {documentMRZInfo.getDateOfExpiry()}
+                </Text>
+              </View>
+            </View>
+          )}
+
+          {!hasNfc && (
+            <Text style={styles.mainText}>
+              {t('eidScannerScreen.nfcNotSupported')}
+            </Text>
+          )}
+
+          {hasNfc && !isEnabled && (
+            <View style={styles.buttonsContainer}>
+              <Text style={styles.mainText}>
+                {t('eidScannerScreen.nfcNotEnabled')}
+              </Text>
+              <Button
+                mode="contained"
+                onPress={async () => {
+                  await NFCManager.goToNfcSetting();
+                  await readNFC();
+                }}
+              >
+                {t('eidScannerScreen.enableNFC')}
+              </Button>
+            </View>
+          )}
+
+          {hasNfc && isEnabled && isScanning && progress === 0 && (
+            <LottieView
+              source={require('../../Shared/Animations/nfc-scan.json')}
+              style={styles.guideAnimation}
+              loop={true}
+              autoPlay
+            />
+          )}
+
+          {hasNfc &&
+            isEnabled &&
+            isScanning &&
+            progress === 0 &&
+            ((documentType === 'ID' && (
+              <Text style={styles.mainText}>
+                {t('eidScannerScreen.placeIDCardOnNFC')}
+              </Text>
+            )) ||
+              (documentType === 'PASSPORT' && (
+                <Text style={styles.mainText}>
+                  {t('eidScannerScreen.placePassportOnNFC')}
+                </Text>
+              )) ||
+              (documentType === 'UNKNOWN' && (
+                <Text style={styles.mainText}>
+                  {t('eidScannerScreen.placeDocumentOnNFC')}
+                </Text>
+              )))}
+
+          {hasNfc && isEnabled && isScanning && progress > 0 && (
+            <Text style={styles.mainText}>
+              {t('eidScannerScreen.readingDocument')}
+            </Text>
+          )}
+
+          {hasNfc && !isScanned && progress > 0 && (
+            <NativeProgressBar
+              progress={progress / 100}
+              width={null}
+              height={30}
+              borderRadius={8}
+              color={appContext.branding.primaryColor}
+            />
+          )}
+
+          {hasNfc && isEnabled && isScanned && (
+            <View style={styles.buttonsContainer}>
+              <Button
+                mode="contained"
+                disabled={!documentFaceImage || !documentMRZInfo}
+                onPress={() => {
+                  if (
+                    onScanSuccess &&
+                    documentMRZInfo &&
+                    documentFaceImage &&
+                    documentFaceImageMimeType
+                  ) {
+                    onScanSuccess(
+                      getFieldsFromMRZ(documentMRZInfo),
+                      documentFaceImage,
+                      documentFaceImageMimeType
+                    );
+                  }
+                }}
+              >
+                {t('eidScannerScreen.approveAndContinue')}
+              </Button>
+            </View>
+          )}
+        </>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    gap: 10,
+    padding: 20,
+  },
+  buttonsContainer: {
+    flexDirection: 'column',
+    gap: 10,
+  },
+  mainText: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    color: 'black',
+    textAlign: 'center',
+  },
+  faceImage: {
+    width: 150,
+    height: 150,
+    borderRadius: 150,
+    borderColor: 'lightgray',
+    borderWidth: 1,
+    alignSelf: 'center',
+  },
+  mrzInfo: {
+    flexDirection: 'column',
+    width: '100%',
+  },
+  mrzInfoItem: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    borderBottomColor: 'lightgray',
+    borderBottomWidth: 1,
+    paddingVertical: 5,
+  },
+  mrzInfoLabel: {
+    color: 'black',
+    fontWeight: 'bold',
+  },
+  mrzInfoText: {
+    color: 'black',
+  },
+  guide: {
+    flex: 1,
+    display: 'flex',
+    justifyContent: 'center',
+    paddingHorizontal: 20,
+    gap: 10,
+    backgroundColor: 'white',
+  },
+  guideAnimation: {
+    width: 250,
+    height: 250,
+    alignSelf: 'center',
+  },
+  guideHeader: {
+    color: 'black',
+    fontSize: 18,
+    textAlign: 'center',
+    fontWeight: 'bold',
+  },
+  guidePoints: {
+    display: 'flex',
+    gap: 10,
+    padding: 10,
+  },
+  guideText: {
+    color: 'black',
+    fontSize: 14,
+  },
+});
+
+export default EIDScanner;