assentify-sdk-react-native 0.0.1 → 0.0.2

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import Svg, { Path, type SvgProps } from 'react-native-svg';
+
+const ChevronLeftIcon: 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="M15.5303 5.46967C15.8232 5.76256 15.8232 6.23744 15.5303 6.53033L10.0607 12L15.5303 17.4697C15.8232 17.7626 15.8232 18.2374 15.5303 18.5303C15.2374 18.8232 14.7626 18.8232 14.4697 18.5303L8.46967 12.5303C8.17678 12.2374 8.17678 11.7626 8.46967 11.4697L14.4697 5.46967C14.7626 5.17678 15.2374 5.17678 15.5303 5.46967Z"
+      fill={props.color}
+    />
+  </Svg>
+);
+export default ChevronLeftIcon;

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import Svg, { Path, type SvgProps } from 'react-native-svg';
+
+const ChevronRightIcon: 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="M8.46967 18.5303C8.17678 18.2374 8.17678 17.7626 8.46967 17.4697L13.9393 12L8.46967 6.53033C8.17678 6.23744 8.17678 5.76256 8.46967 5.46967C8.76256 5.17678 9.23744 5.17678 9.53033 5.46967L15.5303 11.4697C15.8232 11.7626 15.8232 12.2374 15.5303 12.5303L9.53033 18.5303C9.23744 18.8232 8.76256 18.8232 8.46967 18.5303Z"
+      fill={props.color}
+    />
+  </Svg>
+);
+export default ChevronRightIcon;

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

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import Svg, { Path, type SvgProps } from 'react-native-svg';
+
+const ChevronUpIcon: 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="M18.5303 15.5303C18.2374 15.8232 17.7626 15.8232 17.4697 15.5303L12 10.0607L6.53033 15.5303C6.23744 15.8232 5.76256 15.8232 5.46967 15.5303C5.17678 15.2374 5.17678 14.7626 5.46967 14.4697L11.4697 8.46967C11.7626 8.17678 12.2374 8.17678 12.5303 8.46967L18.5303 14.4697C18.8232 14.7626 18.8232 15.2374 18.5303 15.5303Z"
+      fill={props.color}
+    />
+  </Svg>
+);
+export default ChevronUpIcon;

package/src/components/icons/close.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import Svg, { Path, type SvgProps } from 'react-native-svg';
+
+const CloseIcon: 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="M6.22772 6.22662C6.52064 5.93376 6.99551 5.9338 7.28838 6.22672L12.0001 10.9393L16.7137 6.22662C17.0066 5.93376 17.4815 5.9338 17.7744 6.22672C18.0672 6.51965 18.0672 6.99452 17.7743 7.28738L13.0612 11.9996L17.7743 16.7127C18.0672 17.0056 18.0672 17.4804 17.7743 17.7733C17.4814 18.0662 17.0066 18.0662 16.7137 17.7733L12.001 13.0607L7.28833 17.7733C6.99543 18.0662 6.52056 18.0662 6.22767 17.7733C5.93477 17.4804 5.93477 17.0056 6.22767 16.7127L10.9399 12.0005L6.22761 7.28728C5.93475 6.99436 5.93479 6.51949 6.22772 6.22662Z"
+      fill={props.color}
+    />
+  </Svg>
+);
+export default CloseIcon;

package/src/components/type.ts

@@ -0,0 +1,11 @@
+export type ThemeIcon =
+  | 'chevron_down'
+  | 'chevron_left'
+  | 'chevron_right'
+  | 'chevron_up'
+  | 'close'
+  | 'arrow_left'
+  | 'big_warning'
+  | 'check_success';
+
+export type ThemeIcons = Record<ThemeIcon, string>;

package/src/helpers/NavigationService.ts

@@ -0,0 +1,89 @@
+import {
+  StackActions,
+  CommonActions,
+  type NavigationContainerRef,
+} from '@react-navigation/native';
+
+let _navigator: NavigationContainerRef<any>;
+let currentRoute = 'Profile';
+
+function setTopLevelNavigator(navigatorRef?: NavigationContainerRef<any>) {
+  _navigator = navigatorRef!;
+}
+
+function navigate(routeName: string, params?: any) {
+  _navigator.navigate(routeName, params);
+}
+
+function replace(routeName: string, params?: any) {
+  _navigator.dispatch(StackActions.replace(routeName, params));
+}
+
+function push(routeName: string, params?: any) {
+  _navigator.dispatch(StackActions.push(routeName, params));
+}
+
+function pop(number = 1) {
+  _navigator.dispatch(StackActions.pop(number));
+}
+
+function popToTop() {
+  _navigator.dispatch(StackActions.popToTop());
+}
+
+function goBack() {
+  _navigator.goBack();
+}
+
+function canGoBack() {
+  return _navigator.canGoBack();
+}
+
+function getNavigator() {
+  return _navigator;
+}
+
+function reset(routeName: string) {
+  // _navigator.dispatch(
+  //   StackActions.reset({
+  //     index: 0,
+  //     actions: [NavigationActions.navigate({ routeName })],
+  //   }),
+  // );
+
+  const resetAction = CommonActions.reset({
+    index: 0,
+    routes: [{ name: routeName }],
+  });
+  _navigator.dispatch(resetAction);
+}
+
+function setCurrentRoute(route: string) {
+  currentRoute = route;
+}
+
+function getCurrentRoute() {
+  return currentRoute;
+  // let route = _navigator.state.nav;
+  // while (route.routes) {
+  //   route = route.routes[route.index];
+  // }
+  // return route.routeName;
+}
+
+// add other navigation functions that you need and export them
+
+export default {
+  replace,
+  push,
+  pop,
+  setTopLevelNavigator,
+  setCurrentRoute,
+  getCurrentRoute,
+  getNavigator,
+  navigate,
+  reset,
+  popToTop,
+  goBack,
+  canGoBack,
+};

package/src/helpers/constants.ts

@@ -0,0 +1,13 @@
+export const DOC_TYPE = {
+  PASSPORT: 'passport',
+  CIVIL_ID: 'civil_id',
+  OTHER: 'other',
+};
+
+export const PAGES = {
+  SELECT_DOCUMENT: 'Select Document',
+  Empty: 'Assentify_Empty',
+};
+
+
+

package/src/helpers/useBackHandler.ts

@@ -0,0 +1,14 @@
+import { useFocusEffect } from '@react-navigation/native';
+import { useCallback } from 'react';
+import { BackHandler } from 'react-native';
+
+export function useBackHandler(handler: () => boolean) {
+  useFocusEffect(
+    useCallback(() => {
+      BackHandler.addEventListener('hardwareBackPress', handler);
+
+      return () =>
+        BackHandler.removeEventListener('hardwareBackPress', handler);
+    }, [handler])
+  );
+}

package/src/navigator/index.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { View } from 'react-native';
+import { NavigationContainer, type NavigationContainerRef } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import NavigationService from '../helpers/NavigationService';
+import { PAGES } from '../helpers/constants';
+import SelectDocument from '../screens/SelectDocument';
+
+const Stack = createNativeStackNavigator();
+
+const EmptyScreen = () => null;
+
+
+
+const AssentifyNavigator = () => {
+  const navigationRef = React.useRef<NavigationContainerRef<any> | null>(null);
+
+  return (
+      <NavigationContainer
+        independent
+        ref={navigationRef}
+        onReady={() => {
+          NavigationService.setTopLevelNavigator(navigationRef.current!);
+        }}
+      >
+        <Stack.Navigator>
+          <Stack.Screen name={PAGES.SELECT_DOCUMENT} component={SelectDocument} />
+        </Stack.Navigator>
+      </NavigationContainer>
+
+  );
+};
+
+export default AssentifyNavigator;

package/src/screens/SelectDocument.tsx

@@ -0,0 +1,250 @@
+import {  NativeModules,StyleSheet, Text, TouchableOpacity, View, FlatList } from 'react-native';
+import React, { useEffect, useState } from 'react';
+import { type TemplatesByCountry, type Templates ,type KycDocumentDetails } from '../types';
+import { fontPixel, pixelSizeHorizontal, pixelSizeVertical } from '../themes/styling';
+import { COLORS } from '../themes';
+import BaseIcon from '../components/BaseIcon';
+import Page from '../components/Page';
+import CloseButton from '../components/CloseButton';
+import { DOC_TYPE, PAGES } from '../helpers/constants';
+import useGlobalStore from '../useGlobalStore';
+import Each from '../components/Each';
+import NavigationService from '../helpers/NavigationService';
+import { useBackHandler } from '../helpers/useBackHandler';
+import { Image } from 'react-native';
+import { kycDocumentDetailsSize,bottomSheetModalRef  } from '../AssentifyProvider';
+import  AssentifyWrapper   from '../AssentifyWrapper';
+import type { CountryCode } from 'react-native-country-picker-modal';
+
+
+type Props = {};
+
+
+
+const SelectDocument: React.FC<Props> = () => {
+  const {
+    supportedTemplates,
+    languageCode,
+    supportedCountries,
+    preferredCountry,
+    countryCode,
+    setCountryCode,
+    setSupportedTemplates,
+    setKYCDocumentDetails,
+    setDocType,
+    setIsVisible,
+  } = useGlobalStore();
+  const [isOpenModal, setIsOpenModal] = useState<boolean>(false);
+  const [selectedCountry, setSelectedCountry] = useState<TemplatesByCountry | null>(null);
+  useBackHandler(() => {
+    onClose();
+    return false;
+  });
+
+  const onClose = () => {
+    setCountryCode(null);
+    setDocType(null);
+    setIsVisible(false);
+    bottomSheetModalRef.current?.dismiss();
+  };
+
+  const onScanId = (kycDocumentDetailsList?: KycDocumentDetails[]) => {
+   kycDocumentDetailsSize.current = kycDocumentDetailsList?.length ?? 0;
+   AssentifyWrapper.startScanIDCard(kycDocumentDetailsList ?? [], languageCode, true);
+  };
+
+   const onScanPassport = () => {
+     console.log("ExampleEvents : ", languageCode);
+     AssentifyWrapper.startScanPassport(languageCode);
+   };
+
+
+  const onSelect = (country: TemplatesByCountry) => {
+   setCountryCode(country.sourceCountryCode as CountryCode);
+    setSelectedCountry(country);
+    setIsOpenModal(false);
+  };
+
+  const onOpen = () => {
+    setIsOpenModal(true);
+  };
+
+  useEffect(() => {
+    if (supportedCountries) {
+      const codeToUse = (countryCode ?? '') || supportedCountries[0]?.sourceCountryCode;
+      const selected = supportedCountries.find(
+           (item) => item.sourceCountryCode === codeToUse
+       );
+      if (selected) {
+        const templates = selected.templates;
+        const kycDetails: Templates[] = [];
+        templates.forEach((item) => {
+          if (item.kycDocumentDetails && item.kycDocumentDetails.length) {
+            kycDetails.push(item);
+          }
+        });
+        setSupportedTemplates(kycDetails);
+        setSelectedCountry(selected);
+      }
+    }
+  }, [countryCode, setSupportedTemplates, supportedCountries]);
+
+  return (
+    <Page scrollViewStyle={styles.ScrollView} headerLeft={<CloseButton onPress={onClose} />}>
+      <View style={styles.container}>
+        <Text style={styles.CardTitle}>Select Document</Text>
+        {preferredCountry && (
+          <TouchableOpacity style={styles.DropdownSelect} onPress={onOpen}>
+            {selectedCountry ? (
+              <View style={styles.selectedCountryContainer}>
+                <Image source={{ uri: selectedCountry.flag }}   style={[styles.flag, { width: 30, height: undefined, aspectRatio: 1 }]} />
+                <Text style={styles.DropdownTitle}>{selectedCountry.name}</Text>
+              </View>
+            ) : (
+              <Text style={styles.DropdownTitle}>Select Country</Text>
+            )}
+            <BaseIcon name="chevron_down" color={COLORS.secondary800} />
+          </TouchableOpacity>
+        )}
+      </View>
+      {isOpenModal && (
+        <View style={styles.dropdownModal}>
+          <FlatList
+            data={supportedCountries}
+            renderItem={({ item }) => (
+              <TouchableOpacity
+                style={styles.dropdownItem}
+                onPress={() => onSelect(item)}
+              >
+                <Image source={{ uri: item.flag }} style={styles.flag} />
+                <Text style={styles.DropdownTitle}>{item.name}</Text>
+              </TouchableOpacity>
+            )}
+            keyExtractor={(item) => item.sourceCountryCode}
+          />
+        </View>
+      )}
+      <View style={styles.Card}>
+        <Text style={styles.CardTitle}>Select document type</Text>
+        <View style={styles.CardContent}>
+          <TouchableOpacity
+            style={[styles.CardItem, supportedTemplates?.length ? styles.CardItemBordered : null]}
+            onPress={() => onScanPassport()}
+          >
+            <Text style={styles.CardItemText}>Passport</Text>
+            <BaseIcon name="chevron_right" color={COLORS.secondary800} />
+          </TouchableOpacity>
+          {supportedTemplates && (
+            <Each
+              of={supportedTemplates}
+              render={(item, index) => (
+                <TouchableOpacity
+                  key={`supported_template_${index}`}
+                  style={[
+                    styles.CardItem,
+                    index !== supportedTemplates.length - 1 ? styles.CardItemBordered : null,
+                  ]}
+                  onPress={() => onScanId(item.kycDocumentDetails)}
+                >
+                  <Text style={styles.CardItemText}>{item?.kycDocumentType}</Text>
+                  <BaseIcon name="chevron_right" color={COLORS.secondary800} />
+                </TouchableOpacity>
+              )}
+            />
+          )}
+        </View>
+      </View>
+    </Page>
+  );
+};
+
+export default SelectDocument;
+
+const styles = StyleSheet.create({
+  ScrollView: {
+    flex: 1,
+    backgroundColor: '#fff',
+    paddingHorizontal: pixelSizeHorizontal(16),
+  },
+  container: {
+    marginTop: pixelSizeVertical(40),
+  },
+  Card: {
+    flex: 1,
+    marginVertical: pixelSizeVertical(16),
+  },
+  CardTitle: {
+    fontSize: fontPixel(14),
+    fontWeight: '600',
+    lineHeight: 20,
+    color: COLORS.secondary1200,
+    marginBottom: pixelSizeVertical(8),
+  },
+  CardContent: {
+    borderWidth: 1,
+    borderColor: COLORS.secondary300,
+    borderRadius: 16,
+  },
+  CardItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingLeft: pixelSizeHorizontal(24),
+    paddingRight: pixelSizeHorizontal(12),
+    paddingVertical: pixelSizeVertical(16),
+  },
+  CardItemBordered: {
+    borderBottomWidth: 1,
+    borderBottomColor: COLORS.secondary300,
+  },
+  CardItemText: {
+    fontSize: fontPixel(14),
+    fontWeight: '600',
+    lineHeight: 20,
+    color: COLORS.secondaryBase1,
+  },
+  DropdownSelect: {
+    borderWidth: 1,
+    borderColor: COLORS.secondary300,
+    borderRadius: 16,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingVertical: pixelSizeVertical(10),
+    paddingHorizontal: pixelSizeVertical(16),
+  },
+  DropdownTitle: {
+    fontSize: fontPixel(14),
+    fontWeight: '500',
+    lineHeight: 20,
+    color: COLORS.secondaryBase1,
+  },
+  selectedCountryContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  flag: {
+    width: 24,
+    height: 24,
+    marginRight: pixelSizeHorizontal(8),
+  },
+  dropdownModal: {
+    backgroundColor: 'white',
+    borderRadius: 16,
+    marginTop: pixelSizeVertical(8),
+    position: 'absolute',
+    top: 80, // Adjust depending on your layout
+    left: 16,
+    right: 16,
+    maxHeight: 300,
+    borderWidth: 1,
+    borderColor: COLORS.secondary300,
+    zIndex: 1000,
+  },
+  dropdownItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: pixelSizeVertical(12),
+    paddingHorizontal: pixelSizeHorizontal(16),
+  },
+});

package/src/themes/index.ts

@@ -0,0 +1,16 @@
+export const COLORS = {
+  white: '#ffffff',
+  primaryBase1: '#66023C',
+
+  secondaryBase1: '#44546A',
+  secondary100: '#F9FAFB',
+  secondary200: '#EEF1F6',
+  secondary300: '#DBE0E9',
+  secondary700: '#808E9E',
+  secondary800: '#6C7B8E',
+  secondary1200: '#2C3844',
+  grey100: '#F9FAFA',
+  grey300: '#DCDEE1',
+  grey600: '#9AA0A7',
+  grey800: '#76797E',
+};

package/src/themes/styling.ts

@@ -0,0 +1,53 @@
+import { Dimensions, PixelRatio, Platform } from 'react-native';
+
+const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');
+// const ratio = PixelRatio.get();
+
+// Use iPhone5 as base size which is 320 x 568
+// const baseWidth = 320;
+// const baseHeight = 568;
+
+// Use iPhone6 as base size which is 375 x 667
+const baseWidth = 375;
+const baseHeight = 667;
+
+// const baseWidth = 375;
+// const baseHeight = 811;
+
+const scaleWidth = SCREEN_WIDTH / baseWidth;
+const scaleHeight = SCREEN_HEIGHT / baseHeight;
+const scale = Math.min(scaleWidth, scaleHeight);
+
+export const normalize = (
+  size: number,
+  based: 'width' | 'height' = 'width'
+) => {
+  // const newSize = size * scale;
+  const newSize = based === 'height' ? size * scale : size * scale;
+  if (Platform.OS === 'ios') {
+    return Math.round(PixelRatio.roundToNearestPixel(newSize));
+  } else {
+    return Math.round(PixelRatio.roundToNearestPixel(newSize)) - 2;
+  }
+};
+
+//for width  pixel
+export const widthPixel = (size: number) => {
+  return normalize(size, 'width');
+};
+//for height  pixel
+export const heightPixel = (size: number) => {
+  return normalize(size, 'height');
+};
+//for font  pixel
+export const fontPixel = (size: number) => {
+  return heightPixel(size);
+};
+//for Margin and Padding vertical pixel
+export const pixelSizeVertical = (size: number) => {
+  return heightPixel(size);
+};
+//for Margin and Padding horizontal pixel
+export const pixelSizeHorizontal = (size: number) => {
+  return widthPixel(size);
+};

package/src/types.ts

@@ -52,6 +52,8 @@ export interface Assentify {
 
   submitData:(dataMap: Map<string, string>)=> void;
 
+  startFlow:()=> void;
+
 }
 
 export type MrzFields = {
@@ -156,6 +158,7 @@ export type FaceMatchCallback = {
 export type KycDocumentDetails = {
   name: string;
   order: number;
+  templateSpecimen:String;
   templateProcessingKeyInformation: string;
 };
 

package/src/useGlobalStore.ts

@@ -0,0 +1,65 @@
+import type {
+  FaceExtractedModel,
+  IDExtractedModel,
+  KycDocumentDetails,
+  OtherExtractedModel,
+  PassportExtractedModel,
+  Templates,
+  TemplatesByCountry,
+} from './types';
+import { create } from 'zustand';
+import type { CountryCode } from 'react-native-country-picker-modal';
+import { type LanguageCode } from './Language';
+
+type GlobalStoreState = {
+  countryCode: CountryCode | null;
+  languageCode: LanguageCode;
+  preferredCountry: CountryCode[] | string[];
+  supportedCountries: TemplatesByCountry[];
+  supportedTemplates: Templates[];
+  kycDocumentDetails: KycDocumentDetails[] | null;
+  docType: string | null;
+  isVisible: boolean;
+
+  setCountryCode: (countryCode: CountryCode | null) => void;
+  setFlowLanguage: (languageCode: LanguageCode | null) => void;
+  setPreferredCountry: (preferredCountry: CountryCode[]) => void;
+  setSupportedCountries: (supportedCountries: TemplatesByCountry[]) => void;
+  setSupportedTemplates: (supportedTemplates: Templates[]) => void;
+  setKYCDocumentDetails: (
+    kycDocumentDetails: KycDocumentDetails[] | null
+  ) => void;
+  setDocType: (docType: string | null) => void;
+  setIsVisible: (isVisible: boolean) => void;
+  clearGlobalStore: () => void;
+};
+
+const persistState = {
+  countryCode: '' as CountryCode,
+  languageCode: '' as LanguageCode,
+  preferredCountry: [],
+  supportedCountries: [],
+  supportedTemplates: [],
+  kycDocumentDetails: [],
+};
+
+const initialState = {
+  docType: null,
+  isVisible: false,
+};
+
+const useGlobalStore = create<GlobalStoreState>()((set) => ({
+  ...initialState,
+  ...persistState,
+  setCountryCode: (countryCode: CountryCode | null) => set({ countryCode: countryCode as any }),
+  setFlowLanguage: (languageCode: LanguageCode | null) => set({ languageCode: languageCode as any }),
+  setPreferredCountry: (preferredCountry: CountryCode[]) =>set({ preferredCountry }),
+  setSupportedCountries: (supportedCountries: TemplatesByCountry[]) => set({ supportedCountries }),
+  setSupportedTemplates: (supportedTemplates: Templates[]) =>set({ supportedTemplates }),
+  setKYCDocumentDetails: (kycDocumentDetails: KycDocumentDetails[] | null) =>set({ kycDocumentDetails }),
+  setDocType: (docType: string | null) => set({ docType }),
+  setIsVisible: (isVisible: boolean) => set({ isVisible }),
+  clearGlobalStore: () => set({ ...initialState }),
+}));
+
+export default useGlobalStore;