w2 react native

kyc.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { View, StyleSheet, Image } from 'react-native';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import DocumentVerificationClientCapture from 'w2-document-verification-capture-client-react-native';

import Actions from 'actions';
import Selectors from 'selectors';
import Text from 'common/Text';
import Button from 'common/button';
import NavBar from 'common/nav/NavBar';
import BackgroundImage from 'common/BackgroundImage';
import normalize from 'utils/normalize';
import BlocserLogo from '../shared/BlocserLogo';
// import I18n from 'config/i18n';

const images = {
  exampleLicenceFront: require('images/payment/front_licence_example.png'),
  exampleLicenceBack: require('images/payment/back_licence_example.png'),
  camera: require('images/payment/camera_icon.png'),
};

const imagesMap = {
  front: images.exampleLicenceFront,
  back: images.exampleLicenceBack,
};

const LICENSE_KEY =
  'LICENSING_KEY';

class KycCheck1 extends Component {
  componentDidMount() {
    const { user } = this.props;
    DocumentVerificationClientCapture.build(
      `blocser::${user.id}${new Date().getTime()}`,
      LICENSE_KEY,
      (result, status) => {
        console.log({ result, status });
      },
    );
  }

  onNext = () => {
    const { navigation } = this.props;
    DocumentVerificationClientCapture.capture(
      'id1',
      image => {
        console.log(image);
        const example = navigation.getParam('example', 'front');
        navigation.push('KycCheck3', { example });
      },
      error => console.log(`Error getting document image: ${error}`),
    );
  };

  renderExample = () => {
    const { navigation } = this.props;
    const example = navigation.getParam('example', 'front');
    return (
      <View style={styles.exampleContainer}>
        <Image source={imagesMap[example]} style={styles.example} resizeMode="contain" />
      </View>
    );
  };

  render() {
    const { goBack, navigation } = this.props;
    const example = navigation.getParam('example', 'front');
    return (
      <BackgroundImage>
        <NavBar hideLogo onLeftIconPressed={goBack} leftIconName="arrow-left" />
        <KeyboardAwareScrollView style={styles.container} contentContainerStyle={{ flexGrow: 1 }}>
          <BlocserLogo />
          <Text large bold style={styles.label}>
            {example === 'front'
              ? 'Front Photo of Driving Licence'
              : 'Back Photo of Driving Licence'}
          </Text>
          <Text medium style={[styles.label, { paddingBottom: normalize(30) }]}>
            {example === 'front'
              ? 'Take a front photo of your Driving Licence. Make sure that it positions inside the white line'
              : 'Take a back photo of your Driving Licence. Makesure that it positions inside the white line.'}
          </Text>
          {this.renderExample()}
        </KeyboardAwareScrollView>
        <View style={styles.bottomContainer}>
          <Button
            leftElement={
              <Image source={images.camera} style={styles.camera} resizeMode="contain" />
            }
            labelContainerStyle={{ flexDirection: 'row', justifyContent: 'space-evenly' }}
            blue
            label="OPEN CAMERA"
            onPress={this.onNext}
          />
        </View>
      </BackgroundImage>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingHorizontal: normalize(30),
  },
  exampleContainer: {
    alignItems: 'center',
  },
  example: {
    width: '100%',
    height: normalize(150),
  },
  camera: {
    width: normalize(25),
    height: normalize(25),
  },
  bottomContainer: {
    paddingBottom: normalize(30),
    alignItems: 'center',
  },
  label: {
    paddingHorizontal: normalize(25),
    paddingVertical: normalize(10),
  },
});

KycCheck1.propTypes = {
  navigation: PropTypes.object.isRequired,
  goBack: PropTypes.func.isRequired,
  user: PropTypes.object.isRequired,
};

const mapStateToProps = store => {
  return {
    user: Selectors.getUserProfile(store),
  };
};

const mapDispatchToProps = {
  navigateTo: Actions.navigateTo,
  goBack: Actions.goBack,
};

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(KycCheck1);