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 ( ) } renderLoaderModal() { return ( {I18n.t("LOADING_DESCRIPTION_COUNTRY")} ) } 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 ( {I18n.t('PREVISUALISATION')} { this.setState({ displayImage: false }); }} /> ) } 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()} {I18n.t('CREATE_IDENTIFICATION_TITLE')} {/* { this.nameanim = comp }}> { this.onBackToCamera(); this.setState({ displayCamera: true }) }}> { this.state.displayCamera ? { this.state.image ? : } : } */} { this.numeroTelephoneAnim = comp }}> { this.setState({ numeroTelephone }) }} style={styles.input} > { this.state.displayUploadButtons && { 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}> {I18n.t('PROFILE_PICTURE')} { 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}> {I18n.t('FRONT_FACE_CB')} { 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}> {I18n.t('BACK_FACE_CB')} } ) } } 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 }, });