@trustchex/react-native-sdk 1.161.0

package/lib/module/Shared/Components/LanguageSelector.js

@@ -0,0 +1,53 @@
+"use strict";
+
+import React from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import i18n from "../../Translation/index.js";
+import AppContext from "../Contexts/AppContext.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const LanguageSelector = () => {
+  const appContext = React.useContext(AppContext);
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.container,
+    children: [/*#__PURE__*/_jsx(Pressable, {
+      onPress: () => i18n.changeLanguage('en'),
+      children: /*#__PURE__*/_jsx(Text, {
+        style: [styles.buttonText, i18n.language.startsWith('en') ? styles.buttonTextSelected : null, {
+          color: appContext.branding.primaryColor
+        }],
+        children: "EN"
+      })
+    }), /*#__PURE__*/_jsx(View, {
+      style: styles.verticalSeperator
+    }), /*#__PURE__*/_jsx(Pressable, {
+      onPress: () => i18n.changeLanguage('tr'),
+      children: /*#__PURE__*/_jsx(Text, {
+        style: [styles.buttonText, i18n.language.startsWith('tr') ? styles.buttonTextSelected : null],
+        children: "TR"
+      })
+    })]
+  });
+};
+const styles = StyleSheet.create({
+  container: {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: 10,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  buttonText: {
+    fontSize: 18,
+    color: 'black'
+  },
+  buttonTextSelected: {
+    color: '#000000',
+    fontWeight: 'bold'
+  },
+  verticalSeperator: {
+    borderLeftWidth: 1,
+    height: 24,
+    borderColor: 'black'
+  }
+});
+export default LanguageSelector;

package/lib/module/Shared/Components/NativeCircularProgress.js

@@ -0,0 +1,64 @@
+"use strict";
+
+import React, { useEffect, useRef } from 'react';
+import { Animated, StyleSheet } from 'react-native';
+import Svg, { Circle } from 'react-native-svg';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+const NativeCircularProgress = ({
+  size,
+  width = 10,
+  backgroundWidth = 5,
+  fill,
+  tintColor = '#007AFF',
+  backgroundColor = '#E5E5EA',
+  style
+}) => {
+  const animatedFill = useRef(new Animated.Value(0)).current;
+  const radius = (size - width) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const center = size / 2;
+  useEffect(() => {
+    Animated.timing(animatedFill, {
+      toValue: fill,
+      duration: 300,
+      useNativeDriver: false
+    }).start();
+  }, [fill, animatedFill]);
+  const strokeDashoffset = animatedFill.interpolate({
+    inputRange: [0, 100],
+    outputRange: [circumference, 0],
+    extrapolate: 'clamp'
+  });
+  return /*#__PURE__*/_jsx(Animated.View, {
+    style: [style, {
+      width: size,
+      height: size
+    }],
+    children: /*#__PURE__*/_jsxs(Svg, {
+      width: size,
+      height: size,
+      style: StyleSheet.absoluteFillObject,
+      children: [/*#__PURE__*/_jsx(Circle, {
+        cx: center,
+        cy: center,
+        r: radius,
+        stroke: backgroundColor,
+        strokeWidth: backgroundWidth,
+        fill: "transparent"
+      }), /*#__PURE__*/_jsx(AnimatedCircle, {
+        cx: center,
+        cy: center,
+        r: radius,
+        stroke: tintColor,
+        strokeWidth: width,
+        fill: "transparent",
+        strokeDasharray: circumference,
+        strokeDashoffset: strokeDashoffset,
+        strokeLinecap: "round",
+        transform: `rotate(-90 ${center} ${center})`
+      })]
+    })
+  });
+};
+export default NativeCircularProgress;

package/lib/module/Shared/Components/NativeProgressBar.js

@@ -0,0 +1,53 @@
+"use strict";
+
+import React from 'react';
+import { View, StyleSheet, Animated } from 'react-native';
+import { jsx as _jsx } from "react/jsx-runtime";
+const NativeProgressBar = ({
+  progress,
+  width = null,
+  height = 30,
+  borderRadius = 8,
+  color = '#007AFF',
+  backgroundColor = '#E5E5EA'
+}) => {
+  const animatedProgress = React.useRef(new Animated.Value(0)).current;
+  React.useEffect(() => {
+    Animated.timing(animatedProgress, {
+      toValue: progress,
+      duration: 300,
+      useNativeDriver: false
+    }).start();
+  }, [progress, animatedProgress]);
+  const progressWidth = animatedProgress.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0%', '100%'],
+    extrapolate: 'clamp'
+  });
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.container, {
+      height,
+      borderRadius,
+      backgroundColor,
+      width: width || '100%'
+    }],
+    children: /*#__PURE__*/_jsx(Animated.View, {
+      style: [styles.progressBar, {
+        width: progressWidth,
+        borderRadius,
+        backgroundColor: color
+      }]
+    })
+  });
+};
+const styles = StyleSheet.create({
+  container: {
+    overflow: 'hidden'
+  },
+  progressBar: {
+    height: '100%',
+    justifyContent: 'center',
+    alignItems: 'center'
+  }
+});
+export default NativeProgressBar;

package/lib/module/Shared/Components/NavigationManager.js

@@ -0,0 +1,180 @@
+"use strict";
+
+import React, { forwardRef, useCallback, useContext, useImperativeHandle } from 'react';
+import AppContext from "../Contexts/AppContext.js";
+import { CommonActions, useNavigation } from '@react-navigation/native';
+import { View, StyleSheet, Alert } from 'react-native';
+import { useTranslation } from 'react-i18next';
+import i18n from "../../Translation/index.js";
+import { Button } from 'react-native-paper';
+
+// Simple global navigation lock
+import { jsx as _jsx } from "react/jsx-runtime";
+let isNavigating = false;
+let lastNavigationTime = 0;
+const NavigationManager = /*#__PURE__*/forwardRef(({
+  canSkipStep
+}, ref) => {
+  const appContext = useContext(AppContext);
+  const navigation = useNavigation();
+  const {
+    t
+  } = useTranslation();
+  const routes = {
+    VERIFICATION_SESSION_CHECK: 'VerificationSessionCheckScreen',
+    DYNAMIC_ROUTES: {
+      CONTRACT_ACCEPTANCE: 'ContractAcceptanceScreen',
+      IDENTITY_DOCUMENT_SCAN: 'IdentityDocumentScanningScreen',
+      IDENTITY_DOCUMENT_EID_SCAN: 'IdentityDocumentEIDScanningScreen',
+      LIVENESS_CHECK: 'LivenessDetectionScreen'
+    },
+    RESULT: 'ResultScreen'
+  };
+  React.useEffect(() => {
+    const handleRemove = event => {
+      if (event.data.action.type !== 'RESET') {
+        event.preventDefault();
+      }
+    };
+    const handleFocus = () => {
+      // Reset navigation state when screen comes into focus
+      isNavigating = false;
+    };
+    navigation.addListener('beforeRemove', handleRemove);
+    navigation.addListener('focus', handleFocus);
+    return () => {
+      navigation.removeListener('beforeRemove', handleRemove);
+      navigation.removeListener('focus', handleFocus);
+      // Reset state on cleanup
+      isNavigating = false;
+    };
+  }, [navigation]);
+  const getNextRoute = useCallback((workflowSteps, currentWorkFlowStep) => {
+    const currentStepIndex = workflowSteps?.findIndex(step => step.id ? step.id === currentWorkFlowStep?.id : step.type === currentWorkFlowStep?.type) ?? -1;
+    const nextStep = workflowSteps && currentStepIndex < workflowSteps.length ? workflowSteps[currentStepIndex + 1] : null;
+    if (!nextStep) {
+      appContext.currentWorkflowStep = undefined;
+      return routes.RESULT;
+    }
+    appContext.currentWorkflowStep = nextStep;
+    if (nextStep.type === 'CONTRACT_ACCEPTANCE') {
+      return routes.DYNAMIC_ROUTES.CONTRACT_ACCEPTANCE;
+    }
+    if (nextStep.type === 'IDENTITY_DOCUMENT_SCAN') {
+      return routes.DYNAMIC_ROUTES.IDENTITY_DOCUMENT_SCAN;
+    }
+    if (nextStep.type === 'IDENTITY_DOCUMENT_EID_SCAN') {
+      return routes.DYNAMIC_ROUTES.IDENTITY_DOCUMENT_EID_SCAN;
+    }
+    if (nextStep.type === 'LIVENESS_CHECK') {
+      return routes.DYNAMIC_ROUTES.LIVENESS_CHECK;
+    }
+    return routes.VERIFICATION_SESSION_CHECK;
+  }, [appContext, routes.VERIFICATION_SESSION_CHECK, routes.DYNAMIC_ROUTES.CONTRACT_ACCEPTANCE, routes.DYNAMIC_ROUTES.IDENTITY_DOCUMENT_EID_SCAN, routes.DYNAMIC_ROUTES.IDENTITY_DOCUMENT_SCAN, routes.DYNAMIC_ROUTES.LIVENESS_CHECK, routes.RESULT]);
+  const goToNextRoute = useCallback(() => {
+    const currentTime = Date.now();
+    const minTimeBetweenNavigation = 1000; // 1 second minimum between navigations
+
+    // Simple protection: prevent rapid consecutive calls
+    if (isNavigating || currentTime - lastNavigationTime < minTimeBetweenNavigation) {
+      return;
+    }
+
+    // Set protection flags
+    isNavigating = true;
+    lastNavigationTime = currentTime;
+    try {
+      const nextRoute = getNextRoute(appContext.workflowSteps, appContext.currentWorkflowStep);
+      navigation.dispatch(CommonActions.navigate({
+        name: nextRoute,
+        params: {
+          navId: Math.random()
+        }
+      }));
+    } catch (error) {
+      // Reset flags on error
+      isNavigating = false;
+      throw error;
+    }
+
+    // Reset flags after navigation
+    setTimeout(() => {
+      isNavigating = false;
+    }, 1000);
+  }, [getNextRoute, appContext.workflowSteps, appContext.currentWorkflowStep, navigation]);
+  const goToNextRouteWithAlert = useCallback(() => {
+    // Prevent multiple alerts if already navigating
+    if (isNavigating) {
+      return;
+    }
+    Alert.alert(t('general.warning'), t('navigationManager.skipStepWarning'), [{
+      text: t('general.no'),
+      style: 'cancel'
+    }, {
+      text: t('general.yes'),
+      onPress: goToNextRoute
+    }]);
+  }, [goToNextRoute, t]);
+  const reset = useCallback(() => {
+    // Prevent rapid successive reset calls
+    if (isNavigating) {
+      return;
+    }
+    isNavigating = true;
+    try {
+      appContext.currentWorkflowStep = undefined;
+      appContext.workflowSteps = undefined;
+      appContext.identificationInfo = {
+        sessionId: '',
+        identificationId: '',
+        consent: {
+          contractIds: [],
+          deviceInfo: ''
+        },
+        locale: appContext.locale || i18n.language
+      };
+      appContext.branding = {
+        logoUrl: appContext.branding?.logoUrl || '',
+        primaryColor: appContext.branding?.primaryColor || '#000000',
+        secondaryColor: appContext.branding?.secondaryColor || '#CCCCCC',
+        tertiaryColor: appContext.branding?.tertiaryColor || '#FF0000'
+      };
+      navigation.dispatch(CommonActions.reset({
+        index: 0,
+        routes: [{
+          name: routes.VERIFICATION_SESSION_CHECK
+        }]
+      }));
+    } catch (error) {
+      isNavigating = false;
+      throw error;
+    }
+
+    // Reset flag after operation
+    setTimeout(() => {
+      isNavigating = false;
+    }, 1000);
+  }, [appContext, navigation, routes.VERIFICATION_SESSION_CHECK]);
+  useImperativeHandle(ref, () => ({
+    navigateToNextStep: goToNextRoute,
+    reset: reset,
+    allowSkipStep: appContext.currentWorkflowStep?.required
+  }));
+  return appContext.currentWorkflowStep && (!appContext.currentWorkflowStep?.required || canSkipStep) && /*#__PURE__*/_jsx(View, {
+    style: styles.container,
+    children: /*#__PURE__*/_jsx(Button, {
+      mode: "text",
+      onPress: goToNextRouteWithAlert,
+      children: t('navigationManager.skipStepLabel')
+    })
+  });
+});
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 20,
+    backgroundColor: 'white'
+  }
+});
+export default NavigationManager;

package/lib/module/Shared/Components/OTPCodeInput.js

@@ -0,0 +1,74 @@
+"use strict";
+
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { TextInput } from 'react-native-paper';
+import { jsx as _jsx } from "react/jsx-runtime";
+const OTPCodeInput = ({
+  codeLength,
+  value,
+  onChangeText,
+  onCodeFilled,
+  disabled
+}) => {
+  const [code, setCode] = React.useState(value.split(''));
+  const refArray = React.useRef([]);
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.container,
+    children: /*#__PURE__*/_jsx(View, {
+      style: styles.inputWrapper,
+      children: [...Array(codeLength)].map((_, index) => /*#__PURE__*/_jsx(TextInput, {
+        mode: "outlined",
+        style: [styles.input],
+        ref: el => refArray.current[index] = el,
+        value: code[index],
+        autoFocus: index === 0,
+        inputMode: "numeric",
+        disabled: disabled,
+        onChangeText: text => {
+          code[index] = text;
+          setCode(code);
+          if (onChangeText) {
+            onChangeText(code.join(''));
+          }
+          if (code.length === codeLength && code.every(c => !!c) && onCodeFilled) {
+            onCodeFilled(code.join(''));
+          }
+        },
+        onKeyPress: ({
+          nativeEvent
+        }) => {
+          if (nativeEvent.key === 'Backspace' && index > 0) {
+            refArray.current[index - 1]?.focus();
+          } else if (nativeEvent.key !== 'Backspace' && index < codeLength - 1) {
+            refArray.current[index + 1]?.focus();
+          }
+        },
+        keyboardType: "number-pad",
+        maxLength: 1,
+        textContentType: "oneTimeCode"
+      }, index))
+    })
+  });
+};
+const styles = StyleSheet.create({
+  container: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  inputWrapper: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    gap: 10
+  },
+  input: {
+    width: 48,
+    height: 48,
+    fontSize: 24,
+    fontWeight: 'bold'
+  }
+});
+export default OTPCodeInput;

package/lib/module/Shared/Components/QrCodeScannerCamera.js

@@ -0,0 +1,262 @@
+"use strict";
+
+import React, { useEffect } from 'react';
+import { View, StyleSheet, ActivityIndicator, Text as TextView, Text, Linking } from 'react-native';
+import { Camera, useCameraDevice, useCameraFormat, useCameraPermission, useFrameProcessor } from 'react-native-vision-camera';
+import { useRunOnJS, useSharedValue } from 'react-native-worklets-core';
+import { useKeepAwake } from "../Libs/native-keep-awake.utils.js";
+import { useIsFocused } from '@react-navigation/native';
+import { useTranslation } from 'react-i18next';
+import LottieView from 'lottie-react-native';
+import { scanCodes } from "../VisionCameraPlugins/BarcodeScanner/index.js";
+import { Button } from 'react-native-paper';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const QrCodeScannerCamera = ({
+  onQrCodeScanned
+}) => {
+  useKeepAwake();
+  const cameraPermission = useCameraPermission();
+  const [permissionsRequested, setPermissionsRequested] = React.useState(false);
+  const [isActive, setIsActive] = React.useState(false);
+  const isFocused = useIsFocused();
+  const device = useCameraDevice('back', {
+    physicalDevices: ['wide-angle-camera']
+  });
+  const format = useCameraFormat(device, [{
+    videoResolution: {
+      width: 1920,
+      height: 1080
+    },
+    iso: 'max',
+    photoHdr: false,
+    videoHdr: false
+  }]);
+  const isCameraInitialized = useSharedValue(false);
+  const {
+    t
+  } = useTranslation();
+  const isInScanningFrame = (code, width, height, orientation) => {
+    const scanningFrame = {
+      x: 0.35 * width,
+      y: 0.03 * height,
+      width: 0.3 * width,
+      height: 0.94 * height
+    };
+    if (orientation === 'landscape-right' || orientation === 'landscape-left') {
+      // Adjust scanning frame for landscape orientation
+      scanningFrame.x = 0.03 * height;
+      scanningFrame.y = 0.35 * width;
+      scanningFrame.width = 0.94 * height;
+      scanningFrame.height = 0.3 * width;
+    }
+
+    // Assuming Barcode has a boundingBox property: { x, y, width, height }
+    const boundingBox = code.boundingBox;
+    if (!boundingBox) {
+      return false;
+    }
+    const codeX = boundingBox.origin.x;
+    const codeY = boundingBox.origin.y;
+    const codeWidth = boundingBox.size.width;
+    const codeHeight = boundingBox.size.height;
+    const codeRight = codeX + codeWidth;
+    const codeBottom = codeY + codeHeight;
+    const frameRight = scanningFrame.x + scanningFrame.width;
+    const frameBottom = scanningFrame.y + scanningFrame.height;
+
+    // Check if the code is within the scanning frame
+    if (codeX >= scanningFrame.x && codeY >= scanningFrame.y && codeRight <= frameRight && codeBottom <= frameBottom) {
+      return true;
+    }
+    return false;
+  };
+  const handleQrCode = useRunOnJS((code, width, height, orientation) => {
+    if (isInScanningFrame(code, width, height, orientation) && code.value) {
+      onQrCodeScanned(code.value);
+    }
+  }, [onQrCodeScanned]);
+  const frameProcessor = useFrameProcessor(frame => {
+    'worklet';
+
+    if (!isCameraInitialized.value) {
+      return;
+    }
+    const codes = scanCodes(frame, {
+      barcodeTypes: ['qr']
+    });
+    if (codes && codes.length === 1) {
+      handleQrCode(codes[0], frame.width, frame.height, frame.orientation);
+    }
+  }, []);
+  useEffect(() => {
+    const requestPermissions = async () => {
+      if (!cameraPermission.hasPermission) {
+        await cameraPermission.requestPermission();
+      }
+      setPermissionsRequested(true);
+    };
+    requestPermissions();
+  }, [cameraPermission]);
+  useEffect(() => {
+    if (!!device && !!format && isFocused) {
+      setIsActive(true);
+    } else {
+      setIsActive(false);
+    }
+    return () => {
+      setIsActive(false);
+    };
+  }, [device, format, isFocused]);
+  if (!permissionsRequested) {
+    return /*#__PURE__*/_jsx(View, {
+      style: styles.permissionContainer,
+      children: /*#__PURE__*/_jsx(ActivityIndicator, {
+        size: "large"
+      })
+    });
+  }
+  if (!cameraPermission.hasPermission) {
+    return /*#__PURE__*/_jsxs(View, {
+      style: styles.permissionContainer,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.permissionText,
+        children: t('general.noCameraPermissionGiven')
+      }), /*#__PURE__*/_jsx(Button, {
+        mode: "contained",
+        onPress: () => {
+          Linking.openSettings();
+        },
+        children: t('general.openSettings')
+      })]
+    });
+  }
+  if (device == null) {
+    return /*#__PURE__*/_jsx(View, {
+      style: styles.permissionContainer,
+      children: /*#__PURE__*/_jsx(TextView, {
+        style: styles.permissionText,
+        children: t('general.noCameraDetected')
+      })
+    });
+  }
+  return /*#__PURE__*/_jsxs(View, {
+    style: StyleSheet.absoluteFill,
+    children: [/*#__PURE__*/_jsx(Camera, {
+      style: StyleSheet.absoluteFill,
+      frameProcessor: frameProcessor,
+      device: device,
+      format: format,
+      isActive: isActive,
+      photo: false,
+      video: false,
+      audio: false,
+      onInitialized: () => {
+        isCameraInitialized.value = true;
+      },
+      fps: 30
+    }), /*#__PURE__*/_jsx(View, {
+      style: styles.topZone,
+      children: /*#__PURE__*/_jsx(TextView, {
+        style: styles.topZoneText,
+        children: t('verificationSessionCheckScreen.scanQRCode')
+      })
+    }), /*#__PURE__*/_jsx(View, {
+      style: styles.leftZone
+    }), /*#__PURE__*/_jsx(View, {
+      style: styles.rightZone
+    }), /*#__PURE__*/_jsx(View, {
+      style: styles.bottomZone
+    }), /*#__PURE__*/_jsx(View, {
+      style: styles.scanArea,
+      children: /*#__PURE__*/_jsx(LottieView, {
+        source: require('../../Shared/Animations/scanning.json'),
+        style: styles.animation,
+        loop: true,
+        autoPlay: true
+      })
+    })]
+  });
+};
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  permissionContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: 20,
+    padding: 20
+  },
+  permissionText: {
+    color: 'black',
+    fontSize: 20,
+    textAlign: 'center',
+    fontWeight: 'bold'
+  },
+  scanArea: {
+    position: 'absolute',
+    top: '35%',
+    left: '3%',
+    right: '3%',
+    bottom: '35%',
+    borderWidth: 5,
+    zIndex: 100,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 5,
+    borderColor: 'white'
+  },
+  animation: {
+    width: '100%',
+    height: '100%'
+  },
+  topZone: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: '65%',
+    backgroundColor: '#00000099',
+    justifyContent: 'flex-end',
+    alignItems: 'center'
+  },
+  topZoneText: {
+    color: 'white',
+    fontSize: 20,
+    textAlign: 'center',
+    fontWeight: 'bold',
+    padding: 20
+  },
+  leftZone: {
+    position: 'absolute',
+    top: '35%',
+    left: 0,
+    right: '97%',
+    bottom: '35%',
+    backgroundColor: '#00000099'
+  },
+  rightZone: {
+    position: 'absolute',
+    top: '35%',
+    left: '97%',
+    right: 0,
+    bottom: '35%',
+    backgroundColor: '#00000099'
+  },
+  bottomZone: {
+    position: 'absolute',
+    top: '65%',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: '#00000099',
+    padding: 20,
+    display: 'flex',
+    flexDirection: 'row',
+    gap: 20,
+    justifyContent: 'space-between'
+  }
+});
+export default QrCodeScannerCamera;