assentify-sdk-react-native 0.0.1 → 0.0.2

package/src/AssentifyProvider.tsx

@@ -25,15 +25,38 @@ import JsonParserPassport from './helpers/parsers/PassportParser';
 import JsonParserFaceMatch from './helpers/parsers/FaceMatchParser';
 import JsonParserIdCard from './helpers/parsers/IDCardParser';
 import JsonParserOtherID from './helpers/parsers/OtherIDParser';
-
+import './navigator';
+import NavigationContainer from './navigator';
+import {
+  BottomSheetModal,
+  BottomSheetModalProvider,
+} from '@gorhom/bottom-sheet';
+import useGlobalStore from './useGlobalStore';
 const { NativeAssentifySdk } = NativeModules;
+const AssentifySdk = NativeModules.NativeAssentifySdk
 
-const AssentifyContext = createContext<undefined>(undefined);
 
+export const bottomSheetModalRef = useRef<BottomSheetModal>(null);
+export const kycDocumentDetailsSize = useRef<number | null>(null);
+const AssentifyContext = createContext<undefined>(undefined);
+const { setSupportedCountries } = useGlobalStore();
 LogBox.ignoreAllLogs();
+
+let imageUrl = '';
+let isFlow = false;
+let order = 0;
+
 const AssentifyProvider = () => {
+  const snapPoints = useMemo(() => ['100%'], []);
 
 
+ const handleSheetChanges = (index: number) => {
+    if (index === -1) {
+      isFlow = false;
+    } else {
+       isFlow = true;
+    }
+  };
 
   useEffect(() => {
     const emitter = new NativeEventEmitter(NativeAssentifySdk);
@@ -43,6 +66,7 @@ const AssentifyProvider = () => {
     if(result?.assentifySdkInitSuccess!=null){
       if (result?.assentifySdkInitSuccess) {
             const templates = JSON.parse(result?.AssentifySdkHasTemplates ) as TemplatesByCountry[];
+             setSupportedCountries(templates as TemplatesByCountry[]);
              DeviceEventEmitter.emit('assentifySdkInit',{"status":true,"templates":templates});
           }else{
              DeviceEventEmitter.emit('assentifySdkInit',{"status":false});
@@ -55,12 +79,28 @@ const AssentifyProvider = () => {
       if (result?.PassportDataModel) {
         const response = JsonParserPassport(result?.PassportDataModel);
         DeviceEventEmitter.emit('onCompletePassport',{"passportExtractedModel":response});
+        if(isFlow === true){
+           AssentifySdk.startFaceMatch(response.imageUrl,true);
+        }
       } else if (result?.FaceMatchDataModel) {
         const response = JsonParserFaceMatch(result?.FaceMatchDataModel);
-       DeviceEventEmitter.emit('onCompleteFaceMatch',{"faceExtractedModel":response});
+        DeviceEventEmitter.emit('onCompleteFaceMatch',{"faceExtractedModel":response});
+        if(isFlow === true){
+           DeviceEventEmitter.emit('onFlowComplete',{});
+           bottomSheetModalRef.current?.dismiss();
+        }
       } else if (result?.IdDataModel) {
         const response = JsonParserIdCard(result?.IdDataModel);
-       DeviceEventEmitter.emit('onCompleteIDCard',{"iDExtractedModel":response});
+         DeviceEventEmitter.emit('onCompleteIDCard',{"iDExtractedModel":response});
+          order = order + 1;
+          if(isFlow === true){
+          if (order === 1) {
+               imageUrl = response.imageUrl ?? '';
+           }
+          if(kycDocumentDetailsSize.current === order){
+              AssentifySdk.startFaceMatch(imageUrl,true);
+            }
+          }
       } else if (result?.OtherDataModel) {
         const response = JsonParserOtherID(result?.OtherDataModel);
         DeviceEventEmitter.emit('onCompleteOther',{"otherExtractedModel":response});
@@ -180,7 +220,21 @@ const AssentifyProvider = () => {
   ]);
 
   return (
-    <AssentifyContext.Provider value={undefined}>
+ <AssentifyContext.Provider value={undefined}>
+      <BottomSheetModalProvider>
+        <BottomSheetModal
+          handleComponent={null}
+          enablePanDownToClose={false}
+          enableHandlePanningGesture={true}
+          enableContentPanningGesture={false}
+          ref={bottomSheetModalRef}
+          index={0}
+          onChange={handleSheetChanges}
+          snapPoints={snapPoints}
+        >
+          <NavigationContainer />
+        </BottomSheetModal>
+      </BottomSheetModalProvider>
     </AssentifyContext.Provider>
   );
 };

package/src/AssentifyWrapper.ts

@@ -1,8 +1,11 @@
 import { NativeModules, Platform, Alert, Linking } from 'react-native';
-import { request, PERMISSIONS, RESULTS } from 'react-native-permissions';
 import { type LanguageCode } from './Language';
 import { type KycDocumentDetails } from './types';
-
+import NavigationService from './helpers/NavigationService';
+import { PAGES } from './helpers/constants';
+import { bottomSheetModalRef  } from './AssentifyProvider';
+import React, { useContext } from 'react';
+import useGlobalStore from './useGlobalStore';
 const LINKING_ERROR =
   `The package 'assentify-sdk-react-native-react-native' doesn't seem to be linked. Make sure: \n\n` +
   Platform.select({ ios: "- You have run 'pod install'\n", default: '' }) +
@@ -10,7 +13,7 @@ const LINKING_ERROR =
   '- You are not using Expo Go\n';
 
 const { NativeAssentifySdk } = NativeModules;
-
+const { setFlowLanguage } = useGlobalStore();
 const AssentifySdk = NativeModules.NativeAssentifySdk
   ? NativeModules.NativeAssentifySdk
   : new Proxy(
@@ -22,6 +25,8 @@ const AssentifySdk = NativeModules.NativeAssentifySdk
       }
     );
 
+
+
 const AssentifyWrapper = {
  /// Initialize
   initialize: function (
@@ -39,72 +44,21 @@ const AssentifyWrapper = {
     enableDetect?: boolean,
     enableGuide?: boolean
   ) {
-    request(
-      Platform.select({
-        android: PERMISSIONS.ANDROID.CAMERA,
-        ios: PERMISSIONS.IOS.CAMERA,
-        default: PERMISSIONS.ANDROID.CAMERA,
-      })
-    ).then(
-      (result) => {
-        if (result === RESULTS.GRANTED) {
-          AssentifySdk.initialize(
-            apiKey,
-            tenantIdentifier,
-            instanceHash,
-            processMrz ?? true,
-            storeCapturedDocument ?? true,
-            performLivenessDocument ?? false,
-            performLivenessFace ?? false,
-            storeImageStream ?? true,
-            saveCapturedVideoID ?? true,
-            saveCapturedVideoFace ?? true,
-            ENV_CustomColor ?? '#f5a103',
-            enableDetect ?? true,
-            enableGuide ?? true
-          );
-        } else if (
-          result === RESULTS.UNAVAILABLE ||
-          result === RESULTS.DENIED ||
-          result === RESULTS.BLOCKED
-        ) {
-          Alert.alert(
-            'Warning!',
-            'Please allow your camera permission in order to proceed further',
-            [
-              {
-                text: 'Open Settings',
-                onPress: () => {
-                  Linking.openSettings();
-                },
-              },
-              {
-                text: 'Cancel',
-                onPress: () => {},
-              },
-            ]
-          );
-        }
-      },
-      () => {
-        Alert.alert(
-          'Warning!',
-          'Please allow your camera permission in order to proceed further',
-          [
-            {
-              text: 'Open Settings',
-              onPress: () => {
-                Linking.openSettings();
-              },
-            },
-            {
-              text: 'Cancel',
-              onPress: () => {},
-            },
-          ]
-        );
-      }
-    );
+     AssentifySdk.initialize(
+              apiKey,
+              tenantIdentifier,
+              instanceHash,
+              processMrz ?? true,
+              storeCapturedDocument ?? true,
+              performLivenessDocument ?? false,
+              performLivenessFace ?? false,
+              storeImageStream ?? true,
+              saveCapturedVideoID ?? true,
+              saveCapturedVideoFace ?? true,
+              ENV_CustomColor ?? '#f5a103',
+              enableDetect ?? true,
+              enableGuide ?? true
+            );
   },
 
   /// Passport
@@ -131,9 +85,13 @@ const AssentifyWrapper = {
      /// Submit Data
      submitData: function (dataMap:Record<string, string> ){
           AssentifySdk.submitData(dataMap);
-      }
-
+      },
 
+    /// Start Flow
+     startFlow: function (language: LanguageCode,){
+       bottomSheetModalRef.current?.present();
+       setFlowLanguage(language)
+      }
 
 
 

package/src/components/BackButton.tsx

@@ -0,0 +1,28 @@
+import { StyleSheet, TouchableOpacity } from 'react-native';
+import React from 'react';
+import { pixelSizeHorizontal } from '../themes/styling';
+import { COLORS } from '../themes';
+import BaseIcon from './BaseIcon';
+
+type Props = {
+  onPress?: () => void;
+};
+
+const BackButton: React.FC<Props> = ({ onPress }) => {
+  return (
+    <TouchableOpacity style={styles.BackButtons} onPress={onPress}>
+      <BaseIcon name="arrow_left" color={COLORS.secondaryBase1} />
+    </TouchableOpacity>
+  );
+};
+
+export default BackButton;
+
+const styles = StyleSheet.create({
+  BackButtons: {
+    padding: 6,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginLeft: pixelSizeHorizontal(16),
+  },
+});

package/src/components/BaseButton.tsx

@@ -0,0 +1,44 @@
+import { StyleSheet, Text, TouchableOpacity } from 'react-native';
+import React from 'react';
+import { COLORS } from '../themes';
+import {
+  fontPixel,
+  pixelSizeHorizontal,
+  pixelSizeVertical,
+} from '../themes/styling';
+
+type Props = {
+  label: string;
+  onPress?: () => void;
+};
+
+const BaseButton: React.FC<Props> = ({ label, onPress }) => {
+  return (
+    <TouchableOpacity
+      activeOpacity={0.7}
+      style={styles.BaseButton}
+      onPress={onPress}
+    >
+      <Text style={styles.labelStyle}>{label}</Text>
+    </TouchableOpacity>
+  );
+};
+
+export default BaseButton;
+
+const styles = StyleSheet.create({
+  BaseButton: {
+    backgroundColor: "#f5a103",
+    paddingVertical: pixelSizeVertical(12),
+    paddingHorizontal: pixelSizeHorizontal(16),
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 48,
+  },
+  labelStyle: {
+    fontSize: fontPixel(16),
+    fontWeight: '500',
+    lineHeight: 22,
+    color: COLORS.white,
+  },
+});

package/src/components/BaseIcon.tsx

@@ -0,0 +1,96 @@
+import type { ThemeIcon } from './type';
+import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import ArrowLeftIcon from './icons/arrow-left';
+import ChevronDownIcon from './icons/chevron-down';
+import ChevronLeftIcon from './icons/chevron-left';
+import ChevronRightIcon from './icons/chevron-right';
+import ChevronUpIcon from './icons/chevron-up';
+import CloseIcon from './icons/close';
+import BigWarningIcon from './icons/big-warning';
+import CheckSuccessIcon from './icons/check-success';
+
+export type Props = {
+  /**
+   * Name of the icon
+   */
+  name: ThemeIcon;
+  /**
+   * Size of the icon.
+   */
+  size?: number;
+  /**
+   * Custom icon's text color.
+   */
+  color?: string;
+  /**
+   * @optional
+   * Style for icon
+   */
+  style?: StyleProp<ViewStyle>;
+};
+/**
+ *
+ * <div class="screenshots">
+ *   <figure>
+ *     <img class="small" src="screenshots/icon-1.png" />
+ *     <figcaption>Default icon</figcaption>
+ *   </figure>
+ *   <figure>
+ *     <img class="small" src="screenshots/icon-2.png" />
+ *     <figcaption>Custom icon colors</figcaption>
+ *   </figure>
+ *   <figure>
+ *     <img class="small" src="screenshots/icon-3.png" />
+ *     <figcaption>Custom icon sizes</figcaption>
+ *   </figure>
+ * </div>
+ *
+ * ## Usage
+ * ```js
+ */
+
+const BaseIcon = ({ name, color, size, ...rest }: Props) => {
+  const DEFAULT_SIZE = 24;
+
+  const iconHeight = size || DEFAULT_SIZE;
+  const iconWidth = size || DEFAULT_SIZE;
+
+  const getProps = () => ({
+    color: color,
+    width: iconWidth,
+    height: iconHeight,
+    ...rest,
+  });
+
+  switch (name) {
+    case 'chevron_down':
+      //@ts-ignore
+      return <ChevronDownIcon {...getProps()} />;
+    case 'chevron_left':
+      //@ts-ignore
+      return <ChevronLeftIcon {...getProps()} />;
+    case 'chevron_right':
+      //@ts-ignore
+      return <ChevronRightIcon {...getProps()} />;
+    case 'chevron_up':
+      //@ts-ignore
+      return <ChevronUpIcon {...getProps()} />;
+    case 'close':
+      //@ts-ignore
+      return <CloseIcon {...getProps()} />;
+    case 'arrow_left':
+      //@ts-ignore
+      return <ArrowLeftIcon {...getProps()} />;
+    case 'big_warning':
+      //@ts-ignore
+      return <BigWarningIcon {...getProps()} />;
+    case 'check_success':
+      //@ts-ignore
+      return <CheckSuccessIcon {...getProps()} />;
+    default:
+      return null;
+  }
+};
+
+export default BaseIcon;

package/src/components/CloseButton.tsx

@@ -0,0 +1,28 @@
+import { StyleSheet, TouchableOpacity } from 'react-native';
+import React from 'react';
+import { pixelSizeHorizontal } from '../themes/styling';
+import { COLORS } from '../themes';
+import BaseIcon from './BaseIcon';
+
+type Props = {
+  onPress?: () => void;
+};
+
+const CloseButton: React.FC<Props> = ({ onPress }) => {
+  return (
+    <TouchableOpacity style={styles.BackButtons} onPress={onPress}>
+      <BaseIcon name="close" color={COLORS.secondaryBase1} />
+    </TouchableOpacity>
+  );
+};
+
+export default CloseButton;
+
+const styles = StyleSheet.create({
+  BackButtons: {
+    padding: 6,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginLeft: pixelSizeHorizontal(16),
+  },
+});

package/src/components/CustomHeader.tsx

@@ -0,0 +1,58 @@
+import { pixelSizeVertical } from '../themes/styling';
+import React from 'react';
+import { View, StyleSheet, SafeAreaView } from 'react-native';
+import type { ViewStyle, StyleProp } from 'react-native';
+
+type HeaderSubComponent = React.ReactElement<{}> | React.ReactNode;
+
+type CustomHeaderProps = {
+  headerLeft?: HeaderSubComponent;
+  headerRight?: HeaderSubComponent;
+  headerTitle?: HeaderSubComponent;
+  containerStyle?: StyleProp<ViewStyle>;
+};
+
+const CustomHeader: React.FC<CustomHeaderProps> = ({
+  headerLeft,
+  headerRight,
+  headerTitle,
+  containerStyle,
+}) => {
+  return (
+    <SafeAreaView style={[styles.ViewHeader, containerStyle]}>
+      <View style={styles.headerLeft}>{headerLeft}</View>
+      <View style={styles.headerTitle}>{headerTitle}</View>
+      <View style={styles.headerRight}>{headerRight}</View>
+    </SafeAreaView>
+  );
+};
+
+export default CustomHeader;
+
+const styles = StyleSheet.create({
+  ViewHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+
+    marginTop: pixelSizeVertical(15),
+    width: '100%',
+  },
+  headerLeft: {
+    // flex: 1,
+    minWidth: 50,
+    justifyContent: 'center',
+    alignItems: 'flex-start',
+  },
+  headerRight: {
+    // flex: 1,
+    minWidth: 50,
+    justifyContent: 'center',
+    alignItems: 'flex-end',
+  },
+  headerTitle: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: 'auto',
+  },
+});

package/src/components/Each.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+interface EachProps {
+  render: (item: any, index: number) => React.ReactNode;
+  of?: any[];
+}
+
+const Each: React.FC<EachProps> = ({ render, of }) => {
+  return React.Children.toArray(of?.map((item, index) => render(item, index)));
+};
+
+export default Each;

package/src/components/Page.tsx

@@ -0,0 +1,64 @@
+import { ScrollView, StyleSheet, SafeAreaView } from 'react-native';
+import type { ViewStyle, StyleProp } from 'react-native';
+import React from 'react';
+import CustomHeader from './CustomHeader';
+import { COLORS } from '../themes';
+
+type HeaderSubComponent = React.ReactElement<{}> | React.ReactNode;
+
+type PageProps = {
+  containerStyle?: StyleProp<ViewStyle>;
+  scrollViewStyle?: StyleProp<ViewStyle>;
+  scrollViewContentContainerStyle?: StyleProp<ViewStyle>;
+  headerContainerStyle?: StyleProp<ViewStyle>;
+  children?: React.ReactNode;
+  footerComponent?: React.ReactNode;
+  headerLeft?: HeaderSubComponent;
+  headerRight?: HeaderSubComponent;
+  headerTitle?: HeaderSubComponent;
+};
+
+const Page: React.FC<PageProps> = ({
+  containerStyle,
+  scrollViewStyle,
+  scrollViewContentContainerStyle,
+  children,
+  footerComponent,
+  headerContainerStyle,
+  headerLeft,
+  headerRight,
+  headerTitle,
+}) => {
+  return (
+    <SafeAreaView style={[styles.container, containerStyle]}>
+      <CustomHeader
+        headerLeft={headerLeft}
+        headerRight={headerRight}
+        headerTitle={headerTitle}
+        containerStyle={headerContainerStyle}
+      />
+      <ScrollView
+        style={scrollViewStyle}
+        contentContainerStyle={[
+          styles.ScrollViewContainer,
+          scrollViewContentContainerStyle,
+        ]}
+      >
+        {children}
+      </ScrollView>
+      {footerComponent}
+    </SafeAreaView>
+  );
+};
+
+export default Page;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: COLORS.white,
+  },
+  ScrollViewContainer: {
+    flexGrow: 1,
+  },
+});

package/src/components/icons/arrow-left.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import Svg, { Path, type SvgProps } from 'react-native-svg';
+
+const ArrowLeftIcon: React.FC = (props: SvgProps) => (
+  <Svg
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    fill="none"
+    // @ts-ignore
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M12.5303 5.46967C12.8232 5.76256 12.8232 6.23744 12.5303 6.53033L7.81066 11.25H18.5C18.9142 11.25 19.25 11.5858 19.25 12C19.25 12.4142 18.9142 12.75 18.5 12.75H7.81066L12.5303 17.4697C12.8232 17.7626 12.8232 18.2374 12.5303 18.5303C12.2374 18.8232 11.7626 18.8232 11.4697 18.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697L11.4697 5.46967C11.7626 5.17678 12.2374 5.17678 12.5303 5.46967Z"
+      fill={props.color}
+    />
+  </Svg>
+);
+export default ArrowLeftIcon;

package/src/components/icons/big-warning.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import Svg, { Path, type SvgProps } from 'react-native-svg';
+
+const BigWarningIcon: React.FC = (props: SvgProps) => (
+  <Svg
+    width={81}
+    height={80}
+    viewBox="0 0 81 80"
+    fill="none"
+    // @ts-ignore
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <Path
+      d="M40.5 29.9999V43.3333M67.31 69.9999H13.69C8.5633 69.9999 5.35663 64.4533 7.90996 60.0099L34.72 13.3833C37.2866 8.9266 43.7166 8.9266 46.28 13.3833L73.09 60.0099C75.6433 64.4533 72.4333 69.9999 67.31 69.9999Z"
+      stroke="#DB7742"
+      strokeWidth={3}
+      strokeLinecap="round"
+    />
+    <Path
+      d="M40.5 56.7L40.5333 56.6633"
+      stroke="#DB7742"
+      strokeWidth={3}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+export default BigWarningIcon;

package/src/components/icons/check-success.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import Svg, { Path, type SvgProps } from 'react-native-svg';
+
+const CheckSuccessIcon: React.FC = (props: SvgProps) => (
+  <Svg
+    width={25}
+    height={24}
+    viewBox="0 0 25 24"
+    fill="none"
+    // @ts-ignore
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M1.75 12C1.75 6.06279 6.56279 1.25 12.5 1.25C18.4372 1.25 23.25 6.06279 23.25 12C23.25 17.9372 18.4372 22.75 12.5 22.75C6.56279 22.75 1.75 17.9372 1.75 12ZM12.5 2.75C7.39121 2.75 3.25 6.89121 3.25 12C3.25 17.1088 7.39121 21.25 12.5 21.25C17.6088 21.25 21.75 17.1088 21.75 12C21.75 6.89121 17.6088 2.75 12.5 2.75ZM18.0303 7.96967C18.3232 8.26256 18.3232 8.73744 18.0303 9.03033L11.0303 16.0303C10.7374 16.3232 10.2626 16.3232 9.96967 16.0303L6.96967 13.0303C6.67678 12.7374 6.67678 12.2626 6.96967 11.9697C7.26256 11.6768 7.73744 11.6768 8.03033 11.9697L10.5 14.4393L16.9697 7.96967C17.2626 7.67678 17.7374 7.67678 18.0303 7.96967Z"
+      fill="#6BA784"
+    />
+  </Svg>
+);
+export default CheckSuccessIcon;

package/src/components/icons/chevron-down.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import Svg, { Path, type SvgProps } from 'react-native-svg';
+
+const ChevronDownIcon: React.FC = (props: SvgProps) => (
+  <Svg
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    fill="none"
+    // @ts-ignore
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M5.46967 8.46967C5.76256 8.17678 6.23744 8.17678 6.53033 8.46967L12 13.9393L17.4697 8.46967C17.7626 8.17678 18.2374 8.17678 18.5303 8.46967C18.8232 8.76256 18.8232 9.23744 18.5303 9.53033L12.5303 15.5303C12.2374 15.8232 11.7626 15.8232 11.4697 15.5303L5.46967 9.53033C5.17678 9.23744 5.17678 8.76256 5.46967 8.46967Z"
+      fill={props.color}
+    />
+  </Svg>
+);
+export default ChevronDownIcon;