SUMSUB FACE RECOG

gistfile1.txt

import React, { useEffect } from 'react';
import {StyleSheet, ImageBackground, Button} from 'react-native';
import {View, Image} from 'react-native-ui-lib';
import {NavigationFunctionComponent} from 'react-native-navigation';
import { observer } from 'mobx-react';

import { PinCodeT } from '../../components/PinComponent';

//services
import {useServices} from '../../services';
import { useStores } from '../../stores';
import { useClearCache } from '../../hooks/useClearCache';

//components
import {SliderDescription} from '../../components/authScreen/sliderDescription';
import {BlueButton} from '../../components/ui/blueButton';

//faceSDK
//@ts-ignore
import SNSMobileSDK from '@sumsub/react-native-mobilesdk-module';



export const FaceRecogStartScreen: NavigationFunctionComponent = observer(({componentId}) => {
  //services and hooks
  const {nav, t} = useServices();
  const {userProfile, pinState } = useStores();
  const {clearCache} = useClearCache();

 
  const launchSNSMobileSDK = () => {

    const sumSubToken = userProfile.authUser.sumSub.token;
    const efaasToken = userProfile.authUser.efaas.accessToken;
    console.log('sumsubToken', sumSubToken);

    let snsMobileSDK = SNSMobileSDK.init(sumSubToken, () => {
      // this is a token expiration handler, will be called if the provided token is invalid or got expired
      // call your backend to fetch a new access token (this is just an example)

      const grapqhlQuery = {
        "operationName": "createApplicant",
        "query": `
          mutation CreateApplicant{
            createApplicant {
              success
              message
              data {
                id
                __typename
                userId
                token
                reviewStatus
              }
            }
          }
        `
      }

      return fetch('https://devrnd01.egov.mv/graphql', {
        method: 'POST',
        headers: {
          'content-type': 'application/json',
          'Authorization': 'Bearer ' + efaasToken
        },
        //@ts-ignore
        data: grapqhlQuery
      }).then((resp: any )=> {
        // return a fresh token from here
        console.log('sumsubToken refresh resposnse', resp)
        return 'new_access_token';
      }).catch(error => {
        console.log('sumsubToken refresh eroror', error)
      });
    })
      .withHandlers({
        // Optional callbacks you can use to get notified of the corresponding events
        onStatusChanged: (event: any) => {
          console.log('onStatusChanged: [' + event.prevStatus + '] => [' + event.newStatus + ']');
          //onStatusChanged: [Ready] => [Initial]
          //onStatusChanged: [Incomplete] => [Pending]
          //onStatusChanged: [Ready] => [Incomplete]
        },
        onLog: (event: any) => {
          console.log('onLog: [Idensic] ' + event.message);
        },
        onEvent: (event: any) => {
          console.log("onEvent: " + JSON.stringify(event));
        },
        onActionResult: (result: any) => {
          console.log('--result--', JSON.stringify(result))
          return new Promise(resolve=> {
            resolve('continue');
          })
        }
      })
      .withDebug(true)
      .withLocale('en')
      .build();

    snsMobileSDK
      .launch()
      .then((result: any) => {
        const response = JSON.stringify(result);
        console.log('sumsub_after_livness_test_response', response); //{"success":1,"status":"Pending"}
        return result;
        
        //change isBlocked status if it get succuessfull

        // if(response.status === 'Approved'){
        //   userProfile.setIsBlocked(true)
        // }

        //----------------------------------------------//
        //-----------------------------------------------//
        //HERE I WANT TO SEND THE USER TO THE APP REGARDLESS OF THE STATUS
        //LATER WHEN THE STATUS CHANGES TO APPROVE. I WILL SET THE USER BLOCKED STATUS TO TRUE

        // pinState.setPinState({ ...pinState.PinState, show: true, mode: PinCodeT.Modes.Set })
        // nav.push(componentId, 'PinScreen', { screen: 'auth'});

      })
      .catch((err: any) => {
        console.log('SumSub SDK Error: ' + JSON.stringify(err));
        nav.push(componentId, 'FaceRecogErrorScreen')
      });
  };

  return (
    <View flex-1 bg-bgColor>
      <ImageBackground source={require('../../assets/backgrounds/appDefaultBg.png')} style={styles.backgroundImage}>
        <View padding-20>
          <View height={'50%'} center>
            <Image assetName="faceVer" assetGroup="faceVerifcation" style={{width: 200, height: 200}} />
          </View>
          <View height={'30%'} center>
            <SliderDescription
              title={t.do('section.faceRecog.title')}
              desc={t.do('section.faceRecog.intro')}
            />
          </View>
          <View height={'20%'} centerV>
            {/* <BlueButton 
              title="GET STARTED" 
              onPress={()=> launchSNSMobileSDK()} 
            /> */}
            {/* <Button title='HELLLOW' onPress={launchSNSMobileSDK} /> */}
            {/* <BlueButton 
              title="CANCEL"
              onPress={async () => {
                await clearCache();
                userProfile.reset();
                nav.start();
              }}
            /> */}
          </View>
        </View>
      </ImageBackground>
    </View>
  );
});

const styles = StyleSheet.create({
  backgroundImage: {
    width: '100%',
    height: '100%',
    backfaceVisibility: 'visible',
    resizeMode: 'cover',
  },
});

FaceRecogStartScreen.options = {
  bottomTabs: {
    visible: false,
    drawBehind: true,
  },
  topBar: {
    visible: false,
  },
};