781 lines
32 KiB
JavaScript
781 lines
32 KiB
JavaScript
|
import Button from 'apsl-react-native-button';
|
||
|
|
import React, {Component} from 'react';
|
||
|
|
import {
|
||
|
|
Alert,
|
||
|
|
Image,
|
||
|
|
PermissionsAndroid,
|
||
|
|
Platform,
|
||
|
|
ProgressBarAndroid,
|
||
|
|
ScrollView,
|
||
|
|
StyleSheet,
|
||
|
|
Text,
|
||
|
|
View
|
||
|
|
} from 'react-native';
|
||
|
|
import * as Animatable from 'react-native-animatable';
|
||
|
|
import Dialog from "react-native-dialog";
|
||
|
|
import {TouchableOpacity} from 'react-native-gesture-handler';
|
||
|
|
import I18n from 'react-native-i18n';
|
||
|
|
import ImagePicker from 'react-native-image-crop-picker';
|
||
|
|
import {responsiveHeight, responsiveWidth} from 'react-native-responsive-dimensions';
|
||
|
|
import {Fumi} from 'react-native-textinput-effects';
|
||
|
|
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
|
||
|
|
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
|
||
|
|
import {Color} from '../../config/Color';
|
||
|
|
import isNil from 'lodash/isNil';
|
||
|
|
import isEqual from 'lodash/isEqual';
|
||
|
|
import {SinglePickerMaterialDialog, MultiPickerMaterialDialog, MaterialDialog} from "react-native-material-dialog";
|
||
|
|
import {readUser, getTownInformationName, getListCountriesActive} from './../../webservice/AuthApi';
|
||
|
|
import {Typography, FontWeight} from '../../config/typography';
|
||
|
|
import {connect} from 'react-redux';
|
||
|
|
import Geolocation from 'react-native-geolocation-service';
|
||
|
|
import {bindActionCreators} from 'redux';
|
||
|
|
import {ProgressDialog} from 'react-native-simple-dialogs';
|
||
|
|
import {
|
||
|
|
getUserIdentificationResetAction,
|
||
|
|
getUserIdentificationAction,
|
||
|
|
validateIdentificationAction,
|
||
|
|
validateIdentificationResetAction
|
||
|
|
} from '../../webservice/IdentificationApi'
|
||
|
|
import {getPositionInformation} from '../../webservice/MapService';
|
||
|
|
|
||
|
|
let theme = require('./../../utils/theme.json');
|
||
|
|
let route = require('./../../route.json');
|
||
|
|
const GEOLOCATION_OPTIONS = {enableHighAccuracy: true, timeout: 20000, maximumAge: 1000, useSignificantChanges: true};
|
||
|
|
const moment = require('moment');
|
||
|
|
|
||
|
|
|
||
|
|
class ValidateIdentification extends Component {
|
||
|
|
static navigatorStyle = {
|
||
|
|
navBarBackgroundColor: Color.primaryColor,
|
||
|
|
statusBarColor: Color.primaryDarkColor,
|
||
|
|
navBarTextColor: '#FFFFFF',
|
||
|
|
navBarButtonColor: '#FFFFFF'
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
static navigationOptions = () => {
|
||
|
|
return {
|
||
|
|
drawerLabel: () => null,
|
||
|
|
headerTitle: I18n.t('VALIDATE_IDENTIFICATION_DESCRIPTION'),
|
||
|
|
headerTintColor: 'white',
|
||
|
|
headerStyle: {
|
||
|
|
backgroundColor: Color.primaryColor,
|
||
|
|
marginTop: 0,
|
||
|
|
color: 'white'
|
||
|
|
},
|
||
|
|
headerTitleStyle: {
|
||
|
|
color: "white"
|
||
|
|
},
|
||
|
|
title: I18n.t('VALIDATE_IDENTIFICATION_DESCRIPTION'),
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
constructor(props) {
|
||
|
|
super(props);
|
||
|
|
this.state = {
|
||
|
|
numeroTelephone: null,
|
||
|
|
image: null,
|
||
|
|
displayImage: false,
|
||
|
|
idNetwork: null,
|
||
|
|
idUser: null,
|
||
|
|
idIdentification: null,
|
||
|
|
displayUploadButtons: false,
|
||
|
|
triggerSubmitClick: false,
|
||
|
|
triggerValidateClick: false,
|
||
|
|
isIdentified: false,
|
||
|
|
modalVisible: true,
|
||
|
|
isIdentifiedValidated: false,
|
||
|
|
userId: null,
|
||
|
|
isLoging: false,
|
||
|
|
countries: [],
|
||
|
|
town: [],
|
||
|
|
townName: null,
|
||
|
|
country: null,
|
||
|
|
|
||
|
|
datatoSend: null
|
||
|
|
};
|
||
|
|
this.dataToSendTemp = new FormData();
|
||
|
|
this.props.getUserIdentificationResetAction();
|
||
|
|
this.props.validateIdentificationResetAction();
|
||
|
|
}
|
||
|
|
|
||
|
|
componentDidMount() {
|
||
|
|
readUser().then((user) => {
|
||
|
|
if (user) {
|
||
|
|
if (user !== undefined) {
|
||
|
|
this.setState({user});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
if (Platform.OS === 'android') {
|
||
|
|
this.requestCameraPermission();
|
||
|
|
} else {
|
||
|
|
this.watchLocation();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
componentWillUnmount() {
|
||
|
|
this.mounted = false;
|
||
|
|
if (this.watchID) Geolocation.clearWatch(this.watchID);
|
||
|
|
}
|
||
|
|
|
||
|
|
showErrorDialog() {
|
||
|
|
this.setState({modalDialog: false})
|
||
|
|
Alert.alert("Une erreur est survenue", "Impossible de récuperer des informations du pays verifier que votre gps est activé," +
|
||
|
|
"et que vous êtes connecté à internet puis ressayer", [{
|
||
|
|
text: "Recommencer", onPress: () => {
|
||
|
|
this.watchLocation()
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
text: "Annuler", onPress: () => {
|
||
|
|
this.props.navigation.popToTop()
|
||
|
|
}
|
||
|
|
}])
|
||
|
|
}
|
||
|
|
|
||
|
|
async watchLocation() {
|
||
|
|
Geolocation.getCurrentPosition((position) => {
|
||
|
|
this.treatPosition(position)
|
||
|
|
}, (e) => {
|
||
|
|
this.showErrorDialog()
|
||
|
|
}, this.props.geolocationOptions);
|
||
|
|
if (!this.watchID) {
|
||
|
|
Geolocation.watchPosition((position) => {
|
||
|
|
this.treatPosition(position)
|
||
|
|
}, (e) => {
|
||
|
|
this.showErrorDialog()
|
||
|
|
}, this.props.geolocationOptions)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
async requestCameraPermission() {
|
||
|
|
try {
|
||
|
|
const granted = await PermissionsAndroid.request(
|
||
|
|
PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
|
||
|
|
{
|
||
|
|
'title': 'Cool Photo App Camera Permission',
|
||
|
|
'message': 'Cool Photo App needs access to your camera ' +
|
||
|
|
'so you can take awesome pictures.'
|
||
|
|
}
|
||
|
|
)
|
||
|
|
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
|
||
|
|
this.watchLocation();
|
||
|
|
} else {
|
||
|
|
this.setState({modalDialog: false})
|
||
|
|
Alert.alert("Echec à l'autorisation",
|
||
|
|
"L'application n'est pas autorisé à acceder à votre position veuillez verifier que votre GPS est activé et configurer en mode Haute Precision",
|
||
|
|
[{
|
||
|
|
text: "Ok", onPress: () => {
|
||
|
|
this.props.navigation.popToTop()
|
||
|
|
}
|
||
|
|
}])
|
||
|
|
}
|
||
|
|
} catch (err) {
|
||
|
|
this.setState({modalDialog: false})
|
||
|
|
Alert.alert("Une erreur est Survenue",
|
||
|
|
"Une erreur est survenu lors du demarrage de l'application veuillez relancer l'application",
|
||
|
|
[{
|
||
|
|
text: "Ok", onPress: () => {
|
||
|
|
BackHandler.exitApp()
|
||
|
|
}
|
||
|
|
}])
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
treatPosition(position) {
|
||
|
|
const myLastPosition = this.state.myPosition;
|
||
|
|
const myPosition = position.coords;
|
||
|
|
|
||
|
|
if (!isEqual(myPosition, myLastPosition)) {
|
||
|
|
getPositionInformation(myPosition).then((response) => {
|
||
|
|
if (response.results !== undefined) {
|
||
|
|
if (response.results.length > 0) {
|
||
|
|
let most = response.results[0]
|
||
|
|
let {address_components, formatted_address, place_id} = most
|
||
|
|
this.setState({address: address_components, textadress: formatted_address, place: place_id})
|
||
|
|
|
||
|
|
let results = response.results;
|
||
|
|
let shortcountry;
|
||
|
|
let mcountry;
|
||
|
|
for (let i = 0; i < results[0].address_components.length; i++) {
|
||
|
|
for (let j = 0; j < results[0].address_components[i].types.length; j++) {
|
||
|
|
if (results[0].address_components[i].types[j] === "country") {
|
||
|
|
mcountry = results[0].address_components[i];
|
||
|
|
shortcountry = mcountry.short_name;
|
||
|
|
this.setState({shortCountry: mcountry.short_name, longCountry: mcountry.long_name})
|
||
|
|
} else if (results[0].address_components[i].types[j] === "locality") {
|
||
|
|
const name = results[0].address_components[i].short_name;
|
||
|
|
getTownInformationName(name).then((result) => {
|
||
|
|
let town = null;
|
||
|
|
if (result instanceof Array) {
|
||
|
|
town = result[0];
|
||
|
|
} else {
|
||
|
|
town = result;
|
||
|
|
}
|
||
|
|
|
||
|
|
this.setState({modalVisible: false});
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
getListCountriesActive().then((cnt) => {
|
||
|
|
this.setState({countries: cnt})
|
||
|
|
var found = false
|
||
|
|
for (let i of cnt) {
|
||
|
|
if (i.code_country === shortcountry) {
|
||
|
|
found = true;
|
||
|
|
this.setState({modalVisible: false, indicatif: i.code_dial, country: i.name})
|
||
|
|
/* this.getNetworks(i.code_dial); */
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (!found) {
|
||
|
|
Alert.alert("Impossible de recupérer vos informations", "Nous n'avons pas pu recuperer les informations de votre pays veuillez contacter les administrateurs", [{text: "OK"}]);
|
||
|
|
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
}).catch((e) => {
|
||
|
|
this.showErrorDialog()
|
||
|
|
});
|
||
|
|
this.setState({myPosition: myPosition});
|
||
|
|
/* if (this.mapRef !== undefined && this.mapRef !== null) {
|
||
|
|
this.mapRef.animateToCoordinate({
|
||
|
|
latitude: myPosition.latitude,
|
||
|
|
longitude: myPosition.longitude
|
||
|
|
}, 1000);
|
||
|
|
this.mapRef.animateToRegion({
|
||
|
|
latitude: myPosition.latitude,
|
||
|
|
longitude: myPosition.longitude,
|
||
|
|
latitudeDelta: 0.03,
|
||
|
|
longitudeDelta: 0.01,
|
||
|
|
}, 1000)
|
||
|
|
} */
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
createFormData = (key, photo) => {
|
||
|
|
this.dataToSendTemp.append(key, {
|
||
|
|
name: photo.path.split('/').pop(),
|
||
|
|
type: photo.mime,
|
||
|
|
uri:
|
||
|
|
Platform.OS === "android" ? photo.path : photo.path.replace("file://", "")
|
||
|
|
});
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
renderLoader = () => {
|
||
|
|
return (
|
||
|
|
<ProgressDialog
|
||
|
|
visible={this.props.loadingUserIndentification || this.props.loadingValidateIdentification}
|
||
|
|
title={I18n.t('LOADING')}
|
||
|
|
message={I18n.t('LOADING_INFO')}
|
||
|
|
/>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
renderLoaderModal() {
|
||
|
|
return (
|
||
|
|
<MaterialDialog
|
||
|
|
visible={this.state.modalVisible}
|
||
|
|
title={I18n.t("LOADING_INFO")}>
|
||
|
|
<View style={{justifyContent: 'center', alignItems: 'center'}}>
|
||
|
|
<Text>{I18n.t("LOADING_DESCRIPTION_COUNTRY")}</Text>
|
||
|
|
<ProgressBarAndroid/>
|
||
|
|
</View>
|
||
|
|
</MaterialDialog>)
|
||
|
|
}
|
||
|
|
|
||
|
|
ckeckIfFieldIsOK(champ) {
|
||
|
|
return (isNil(champ) || isEqual(champ.length, 0));
|
||
|
|
}
|
||
|
|
|
||
|
|
renderGetUserIdentificationResponse = () => {
|
||
|
|
const {resultUserIndentification, errorUserIndentification} = this.props;
|
||
|
|
|
||
|
|
if (resultUserIndentification !== null) {
|
||
|
|
if (typeof resultUserIndentification.response !== 'undefined') {
|
||
|
|
if (resultUserIndentification.status === 200) {
|
||
|
|
|
||
|
|
if (resultUserIndentification.response.isIdentifiedValidated) {
|
||
|
|
Alert.alert(
|
||
|
|
I18n.t('ERROR_IDENTIFICATION'),
|
||
|
|
I18n.t('ALREADY_VALIDATED'),
|
||
|
|
[
|
||
|
|
{
|
||
|
|
text: I18n.t("OK"), onPress: () => {
|
||
|
|
this.props.getUserIdentificationResetAction();
|
||
|
|
this.setState({triggerSubmitClick: false})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
],
|
||
|
|
{cancelable: false}
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!resultUserIndentification.response.isIdentified && !resultUserIndentification.response.isIdentifiedValidated) {
|
||
|
|
Alert.alert(
|
||
|
|
I18n.t('ERROR_IDENTIFICATION'),
|
||
|
|
I18n.t('NOT_IDENTIFIED'),
|
||
|
|
[
|
||
|
|
{
|
||
|
|
text: I18n.t("OK"), onPress: () => {
|
||
|
|
this.props.getUserIdentificationResetAction();
|
||
|
|
this.setState({triggerSubmitClick: false});
|
||
|
|
this.props.navigation.pop();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
],
|
||
|
|
{cancelable: false}
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
if (resultUserIndentification.response.isIdentified && !resultUserIndentification.response.isIdentifiedValidated) {
|
||
|
|
this.setState({
|
||
|
|
isIdentified: resultUserIndentification.response.isIdentified,
|
||
|
|
isIdentifiedValidated: resultUserIndentification.response.isIdentifiedValidated,
|
||
|
|
idIdentification: resultUserIndentification.response.data.id,
|
||
|
|
idNetwork: resultUserIndentification.response.data.idNetwork,
|
||
|
|
idUser: resultUserIndentification.response.data.id_user,
|
||
|
|
displayUploadButtons: true,
|
||
|
|
triggerSubmitClick: false
|
||
|
|
});
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (errorUserIndentification !== null) {
|
||
|
|
if (typeof errorUserIndentification.data !== 'undefined') {
|
||
|
|
Alert.alert(
|
||
|
|
I18n.t('ERROR_LABEL'),
|
||
|
|
errorUserIndentification.data.error,
|
||
|
|
[
|
||
|
|
{
|
||
|
|
text: I18n.t("OK"), onPress: () => {
|
||
|
|
this.props.getUserIdentificationResetAction();
|
||
|
|
this.setState({triggerSubmitClick: false});
|
||
|
|
this.props.navigation.pop();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
],
|
||
|
|
{cancelable: false}
|
||
|
|
)
|
||
|
|
} else {
|
||
|
|
Alert.alert(
|
||
|
|
I18n.t('ERROR_LABEL'),
|
||
|
|
JSON.stringify(errorUserIndentification),
|
||
|
|
[
|
||
|
|
{
|
||
|
|
text: I18n.t("OK"), onPress: () => {
|
||
|
|
this.setState({triggerSubmitClick: false});
|
||
|
|
this.props.getUserIdentificationResetAction();
|
||
|
|
this.props.navigation.pop();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
],
|
||
|
|
{cancelable: false}
|
||
|
|
)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
renderValidationResponse = () => {
|
||
|
|
const {resultValidateIdentification, errorValidateIdentification} = this.props;
|
||
|
|
|
||
|
|
if (resultValidateIdentification !== null) {
|
||
|
|
if (typeof resultValidateIdentification.response !== 'undefined') {
|
||
|
|
if (resultValidateIdentification.status === 200) {
|
||
|
|
|
||
|
|
Alert.alert(
|
||
|
|
'Validation effectué',
|
||
|
|
'Utilisateur validé avec succès',
|
||
|
|
[
|
||
|
|
{
|
||
|
|
text: I18n.t("OK"), onPress: () => {
|
||
|
|
this.props.validateIdentificationResetAction();
|
||
|
|
this.setState({triggerSubmitClick: false});
|
||
|
|
this.props.navigation.pop();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
],
|
||
|
|
{cancelable: false}
|
||
|
|
)
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (errorValidateIdentification !== null) {
|
||
|
|
if (typeof errorValidateIdentification.data !== 'undefined') {
|
||
|
|
Alert.alert(
|
||
|
|
I18n.t('ERROR_LABEL'),
|
||
|
|
errorValidateIdentification.data.error,
|
||
|
|
[
|
||
|
|
{
|
||
|
|
text: I18n.t("OK"), onPress: () => {
|
||
|
|
this.props.validateIdentificationResetAction();
|
||
|
|
this.setState({triggerSubmitClick: false});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
],
|
||
|
|
{cancelable: false}
|
||
|
|
)
|
||
|
|
} else {
|
||
|
|
Alert.alert(
|
||
|
|
I18n.t('ERROR_LABEL'),
|
||
|
|
JSON.stringify(errorValidateIdentification),
|
||
|
|
[
|
||
|
|
{
|
||
|
|
text: I18n.t("OK"), onPress: () => {
|
||
|
|
this.props.validateIdentificationResetAction();
|
||
|
|
this.setState({triggerSubmitClick: false});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
],
|
||
|
|
{cancelable: false}
|
||
|
|
)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
onSubmitValidationClient = () => {
|
||
|
|
const {displayUploadButtons, numeroTelephone} = this.state;
|
||
|
|
|
||
|
|
if (displayUploadButtons) {
|
||
|
|
console.log('TRUE', displayUploadButtons);
|
||
|
|
this.dataToSendTemp.append('id_network', 1);
|
||
|
|
this.dataToSendTemp.append('id_country', 1);
|
||
|
|
this.props.validateIdentificationAction(this.dataToSendTemp, this.state.idIdentification);
|
||
|
|
} else {
|
||
|
|
if (this.ckeckIfFieldIsOK(numeroTelephone))
|
||
|
|
this.numeroTelephoneAnim.shake(800);
|
||
|
|
else {
|
||
|
|
this.props.getUserIdentificationAction(numeroTelephone);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
onPicture = ({uri}) => {
|
||
|
|
this.setState({image: uri, displayCamera: true});
|
||
|
|
console.log("URI", uri);
|
||
|
|
}
|
||
|
|
|
||
|
|
onBackToCamera = () => {
|
||
|
|
this.setState({image: null, displayCamera: false});
|
||
|
|
}
|
||
|
|
|
||
|
|
renderDialogImage = () => {
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Dialog.Container contentStyle={{width: responsiveWidth(80)}} useNativeDriver={true}
|
||
|
|
visible={this.state.displayImage}>
|
||
|
|
|
||
|
|
<Dialog.Title>{I18n.t('PREVISUALISATION')}</Dialog.Title>
|
||
|
|
|
||
|
|
<View>
|
||
|
|
<View style={{width: 50}}/>
|
||
|
|
<View style={{justifyContent: 'center', alignContent: 'center', alignItems: 'center'}}>
|
||
|
|
<Image source={{uri: this.state.image.path}} style={{
|
||
|
|
width: this.state.image.width, height: this.state.image.height, aspectRatio: 1,
|
||
|
|
resizeMode: 'contain'
|
||
|
|
}}/>
|
||
|
|
</View>
|
||
|
|
<View style={{width: 50}}/>
|
||
|
|
</View>
|
||
|
|
|
||
|
|
<Dialog.Button bold={true} label={I18n.t('OK')} onPress={() => {
|
||
|
|
this.setState({
|
||
|
|
displayImage: false
|
||
|
|
});
|
||
|
|
}}/>
|
||
|
|
</Dialog.Container>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
console.log("STATE", this.state);
|
||
|
|
const {showPickerDateNaissance} = this.state;
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
{(this.props.loadingUserIndentification || this.props.loadingValidateIdentification) && this.renderLoader()}
|
||
|
|
{this.state.displayImage && this.renderDialogImage()}
|
||
|
|
{this.state.modalVisible && this.renderLoaderModal()}
|
||
|
|
{this.state.triggerSubmitClick && this.renderGetUserIdentificationResponse()}
|
||
|
|
{this.state.triggerValidateClick && this.renderValidationResponse()}
|
||
|
|
<ScrollView style={styles.container}>
|
||
|
|
<Text style={styles.subbigtitle}>{I18n.t('CREATE_IDENTIFICATION_TITLE')}</Text>
|
||
|
|
|
||
|
|
{/* <Animatable.View style={{
|
||
|
|
justifyContent: 'center',
|
||
|
|
alignItems: 'center'
|
||
|
|
}} ref={(comp) => { this.nameanim = comp }}>
|
||
|
|
<TouchableOpacity onPress={() => {
|
||
|
|
this.onBackToCamera();
|
||
|
|
this.setState({ displayCamera: true })
|
||
|
|
}}>
|
||
|
|
|
||
|
|
{
|
||
|
|
this.state.displayCamera ?
|
||
|
|
<View style={styles.lottie}>
|
||
|
|
{
|
||
|
|
this.state.image ?
|
||
|
|
<Image source={{ uri: this.state.image }} style={{ flex: 1 }} />
|
||
|
|
: <Camera onPicture={this.onPicture} />
|
||
|
|
}
|
||
|
|
</View>
|
||
|
|
:
|
||
|
|
<LottieView
|
||
|
|
style={styles.lottie}
|
||
|
|
source={require('../../assets/json/identity_scan.json')}
|
||
|
|
autoPlay
|
||
|
|
loop={true}
|
||
|
|
/>
|
||
|
|
}
|
||
|
|
</TouchableOpacity>
|
||
|
|
</Animatable.View> */}
|
||
|
|
|
||
|
|
<Animatable.View ref={(comp) => {
|
||
|
|
this.numeroTelephoneAnim = comp
|
||
|
|
}}>
|
||
|
|
<Fumi iconClass={FontAwesomeIcon} iconName={'phone'}
|
||
|
|
label={`${I18n.t('PHONE_NUMBER')}`}
|
||
|
|
iconColor={'#f95a25'}
|
||
|
|
keyboardType='phone-pad'
|
||
|
|
value={this.state.numeroTelephone === null ? this.state.indicatif : this.state.numeroTelephone}
|
||
|
|
iconSize={20}
|
||
|
|
onChangeText={(numeroTelephone) => {
|
||
|
|
this.setState({numeroTelephone})
|
||
|
|
}}
|
||
|
|
style={styles.input}
|
||
|
|
>
|
||
|
|
</Fumi>
|
||
|
|
</Animatable.View>
|
||
|
|
|
||
|
|
{
|
||
|
|
this.state.displayUploadButtons &&
|
||
|
|
<View style={{marginTop: 20, flexDirection: 'row'}}>
|
||
|
|
|
||
|
|
<View style={[styles.contentPicker]}>
|
||
|
|
|
||
|
|
|
||
|
|
<View style={[styles.contentPicker]}>
|
||
|
|
<TouchableOpacity
|
||
|
|
style={[styles.contain]}
|
||
|
|
onPress={() => {
|
||
|
|
ImagePicker.openCamera({
|
||
|
|
width: 200,
|
||
|
|
height: 200,
|
||
|
|
cropping: true,
|
||
|
|
useFrontCamera: true
|
||
|
|
}).then(image => {
|
||
|
|
this.createFormData('user_image', image);
|
||
|
|
this.setState({image, displayImage: true});
|
||
|
|
})
|
||
|
|
}}
|
||
|
|
activeOpacity={0.9}>
|
||
|
|
<View style={[styles.contcontainerCenterentLeft]}>
|
||
|
|
<View>
|
||
|
|
<Icon name='account-circle' color={Color.whiteColor}
|
||
|
|
style={[styles.thumb]} size={80}/>
|
||
|
|
<View style={[styles.point, {backgroundColor: Color.accentColor}]}>
|
||
|
|
<Icon name='camera-image' color={Color.whiteColor} size={20}/>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
</TouchableOpacity>
|
||
|
|
|
||
|
|
<Text
|
||
|
|
style={[Typography.footnote, FontWeight.semibold], {color: Color.whiteColor}}>{I18n.t('PROFILE_PICTURE')}</Text>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
|
||
|
|
<View style={[styles.contentPicker]}>
|
||
|
|
|
||
|
|
<View style={[styles.contentPicker]}>
|
||
|
|
<TouchableOpacity
|
||
|
|
style={[styles.contain]}
|
||
|
|
onPress={() => {
|
||
|
|
ImagePicker.openCamera({
|
||
|
|
width: 400,
|
||
|
|
height: 281,
|
||
|
|
cropping: true,
|
||
|
|
useFrontCamera: false
|
||
|
|
}).then(image => {
|
||
|
|
this.createFormData('document_image_front', image);
|
||
|
|
this.setState({image, displayImage: true});
|
||
|
|
})
|
||
|
|
}}
|
||
|
|
activeOpacity={0.9}>
|
||
|
|
<View style={[styles.contcontainerCenterentLeft]}>
|
||
|
|
<View>
|
||
|
|
<Icon name='credit-card-scan' color={Color.whiteColor}
|
||
|
|
style={[styles.thumb]} size={80}/>
|
||
|
|
<View style={[styles.point, {backgroundColor: Color.accentColor}]}>
|
||
|
|
<Icon name='camera-image' color={Color.whiteColor} size={20}/>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
</TouchableOpacity>
|
||
|
|
<Text
|
||
|
|
style={[Typography.footnote, FontWeight.semibold], {color: Color.whiteColor}}>{I18n.t('FRONT_FACE_CB')}</Text>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
|
||
|
|
<View style={[styles.contentPicker]}>
|
||
|
|
<TouchableOpacity
|
||
|
|
style={[styles.contain]}
|
||
|
|
onPress={() => {
|
||
|
|
ImagePicker.openCamera({
|
||
|
|
width: 400,
|
||
|
|
height: 281,
|
||
|
|
cropping: true,
|
||
|
|
useFrontCamera: false
|
||
|
|
}).then(image => {
|
||
|
|
this.createFormData('document_image_back', image);
|
||
|
|
this.setState({image, displayImage: true});
|
||
|
|
})
|
||
|
|
}}
|
||
|
|
activeOpacity={0.9}>
|
||
|
|
<View style={[styles.contcontainerCenterentLeft]}>
|
||
|
|
<View>
|
||
|
|
<Icon name='credit-card-off' color={Color.whiteColor} style={[styles.thumb]}
|
||
|
|
size={80}/>
|
||
|
|
<View style={[styles.point, {backgroundColor: Color.accentColor}]}>
|
||
|
|
<Icon name='camera-image' color={Color.whiteColor} size={20}/>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
</TouchableOpacity>
|
||
|
|
<Text
|
||
|
|
style={[Typography.footnote, FontWeight.semibold], {color: Color.whiteColor}}>{I18n.t('BACK_FACE_CB')}</Text>
|
||
|
|
</View>
|
||
|
|
|
||
|
|
</View>
|
||
|
|
}
|
||
|
|
|
||
|
|
<Button style={styles.btnvalide}
|
||
|
|
textStyle={styles.textbtnvalide}
|
||
|
|
isLoading={this.state.isLoging}
|
||
|
|
onPress={() => {
|
||
|
|
this.onSubmitValidationClient();
|
||
|
|
if (this.state.displayUploadButtons)
|
||
|
|
this.setState({triggerValidateClick: true});
|
||
|
|
this.setState({
|
||
|
|
triggerSubmitClick: true
|
||
|
|
})
|
||
|
|
}}>
|
||
|
|
{I18n.t('SUBMIT_LABEL')}</Button>
|
||
|
|
|
||
|
|
</ScrollView>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const maptStateToProps = state => ({
|
||
|
|
loadingUserIndentification: state.getUserIdentificationReducer.loading,
|
||
|
|
resultUserIndentification: state.getUserIdentificationReducer.result,
|
||
|
|
errorUserIndentification: state.getUserIdentificationReducer.error,
|
||
|
|
|
||
|
|
loadingValidateIdentification: state.validateIdentificationReducer.loading,
|
||
|
|
resultValidateIdentification: state.validateIdentificationReducer.result,
|
||
|
|
errorValidateIdentification: state.validateIdentificationReducer.error,
|
||
|
|
});
|
||
|
|
|
||
|
|
const mapDispatchToProps = dispatch => bindActionCreators({
|
||
|
|
getUserIdentificationAction,
|
||
|
|
getUserIdentificationResetAction,
|
||
|
|
validateIdentificationResetAction,
|
||
|
|
validateIdentificationAction
|
||
|
|
}, dispatch);
|
||
|
|
|
||
|
|
export default connect(maptStateToProps, mapDispatchToProps)(ValidateIdentification);
|
||
|
|
|
||
|
|
const styles = StyleSheet.create({
|
||
|
|
container: {
|
||
|
|
flex: 1,
|
||
|
|
backgroundColor: Color.primaryDarkColor,
|
||
|
|
},
|
||
|
|
contain: {flexDirection: "row"},
|
||
|
|
containerCenter: {
|
||
|
|
flex: 8,
|
||
|
|
flexDirection: "row",
|
||
|
|
justifyContent: "center",
|
||
|
|
alignItems: "center"
|
||
|
|
},
|
||
|
|
thumb: {
|
||
|
|
borderRadius: 30,
|
||
|
|
marginRight: 10
|
||
|
|
},
|
||
|
|
point: {
|
||
|
|
width: 25,
|
||
|
|
height: 25,
|
||
|
|
borderRadius: 11,
|
||
|
|
alignItems: "center",
|
||
|
|
justifyContent: "center",
|
||
|
|
position: "absolute",
|
||
|
|
right: 9,
|
||
|
|
bottom: 0
|
||
|
|
},
|
||
|
|
textbtnvalide: {
|
||
|
|
color: 'white',
|
||
|
|
fontWeight: 'bold'
|
||
|
|
},
|
||
|
|
bigtitle: {
|
||
|
|
color: 'white',
|
||
|
|
fontSize: 20,
|
||
|
|
flex: 1,
|
||
|
|
fontWeight: 'bold',
|
||
|
|
textAlign: 'center',
|
||
|
|
margin: 20,
|
||
|
|
},
|
||
|
|
contentPicker: {
|
||
|
|
padding: 10,
|
||
|
|
borderRadius: 8,
|
||
|
|
flex: 1,
|
||
|
|
alignItems: "center"
|
||
|
|
},
|
||
|
|
subbigtitle: {
|
||
|
|
color: 'white',
|
||
|
|
fontSize: 17,
|
||
|
|
textAlign: 'center',
|
||
|
|
margin: 5,
|
||
|
|
},
|
||
|
|
btnvalide: {
|
||
|
|
marginTop: 20,
|
||
|
|
marginLeft: 20,
|
||
|
|
marginRight: 20,
|
||
|
|
borderColor: 'transparent',
|
||
|
|
backgroundColor: Color.accentLightColor,
|
||
|
|
height: 52
|
||
|
|
},
|
||
|
|
input: {
|
||
|
|
height: 60,
|
||
|
|
marginTop: responsiveHeight(2),
|
||
|
|
marginLeft: responsiveWidth(5),
|
||
|
|
marginRight: responsiveWidth(5),
|
||
|
|
borderRadius: 5,
|
||
|
|
},
|
||
|
|
lottie: {
|
||
|
|
width: 540,
|
||
|
|
height: 300
|
||
|
|
},
|
||
|
|
});
|