1176 lines
48 KiB
JavaScript
Executable File
1176 lines
48 KiB
JavaScript
Executable File
import React, {Component} from 'react';
|
|
import {
|
|
Alert,
|
|
BackHandler,
|
|
FlatList,
|
|
Image,
|
|
PermissionsAndroid,
|
|
Platform,
|
|
ProgressBarAndroid,
|
|
ScrollView,
|
|
StyleSheet,
|
|
Text,
|
|
TouchableOpacity,
|
|
View
|
|
} from 'react-native';
|
|
import PropTypes from 'prop-types';
|
|
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
|
|
import {responsiveHeight, responsiveWidth} from 'react-native-responsive-dimensions';
|
|
import {Fumi} from 'react-native-textinput-effects'
|
|
import * as Animatable from 'react-native-animatable';
|
|
import Button from 'apsl-react-native-button';
|
|
import MapView, {Marker} from 'react-native-maps';
|
|
import {Dropdown} from 'react-native-material-dropdown-v2';
|
|
import isEqual from 'lodash/isEqual';
|
|
import {getPositionInformation} from './../../webservice/MapService';
|
|
import I18n from 'react-native-i18n'
|
|
import {material} from 'react-native-typography';
|
|
import Icon from 'react-native-vector-icons/MaterialIcons';
|
|
import {
|
|
createGeolocatedAccount,
|
|
createUserAccount,
|
|
getCodeInformation,
|
|
getCountryNetwork,
|
|
getListCountriesActive,
|
|
getTownInformationName
|
|
} from './../../webservice/AuthApi';
|
|
import {MaterialDialog} from "react-native-material-dialog";
|
|
import Geolocation from 'react-native-geolocation-service';
|
|
|
|
const GEOLOCATION_OPTIONS = {enableHighAccuracy: true, timeout: 20000, maximumAge: 1000, useSignificantChanges: true};
|
|
|
|
let theme = require('./../../utils/theme.json');
|
|
let route = require('./../../route.json');
|
|
let country = require('./../../utils/country_code.json');
|
|
/*var Fabric = require('react-native-fabric');
|
|
|
|
var { Crashlytics } = Fabric;
|
|
var { Answers } = Fabric;*/
|
|
declare var google;
|
|
const propTypes = {
|
|
...Marker.propTypes,
|
|
coordinate: PropTypes.shape({
|
|
latitude: PropTypes.number.isRequired,
|
|
longitude: PropTypes.number.isRequired,
|
|
}),
|
|
children: PropTypes.node,
|
|
geolocationOptions: PropTypes.shape({
|
|
enableHighAccuracy: PropTypes.bool,
|
|
timeout: PropTypes.number,
|
|
maximumAge: PropTypes.number,
|
|
}),
|
|
heading: PropTypes.number,
|
|
enableHack: PropTypes.bool,
|
|
};
|
|
|
|
const defaultProps = {
|
|
enableHack: false,
|
|
geolocationOptions: GEOLOCATION_OPTIONS,
|
|
};
|
|
|
|
export default class CreateUserStep2 extends Component {
|
|
static navigatorStyle = {
|
|
drawUnderNavBar: true,
|
|
navBarHidden: true,
|
|
drawUnderStatusBar: false,
|
|
statusBarHidden: true,
|
|
statusBarTextColorScheme: 'light',
|
|
};
|
|
|
|
static options(passProps) {
|
|
return {
|
|
topBar: {
|
|
visible: false,
|
|
enabled: false,
|
|
drawBehind: true,
|
|
|
|
},
|
|
statusBar: {
|
|
drawBehind: true,
|
|
enabled: false,
|
|
}
|
|
}
|
|
}
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
const {navigation} = this.props;
|
|
this.type = navigation.getParam("type", 0);
|
|
this.user = navigation.getParam('user', null);
|
|
this.state = this.initState();
|
|
}
|
|
|
|
retreiveCodeInformation() {
|
|
const membre = this.state.user.member;
|
|
return new Promise(async (resolve, reject) => {
|
|
let datas = await getCodeInformation(membre)
|
|
resolve(datas)
|
|
})
|
|
|
|
}
|
|
|
|
initState() {
|
|
return {
|
|
password: null,
|
|
enterPhone: null,
|
|
nameanim: null,
|
|
networksinglePickerVisible: false,
|
|
surnameanim: null,
|
|
passwordanim: null,
|
|
confirmpassanim: null,
|
|
isLoging: false,
|
|
countries: [],
|
|
snackVisible: false,
|
|
snackText: '',
|
|
disableNetwork: false,
|
|
networks: [],
|
|
modalVisible: true,
|
|
select_network: I18n.t("SELECT_NETWORK"),
|
|
user: this.user,
|
|
provider_class: null,
|
|
provider_classes: [],
|
|
latitude: "",
|
|
longitude: "",
|
|
}
|
|
}
|
|
|
|
render() {
|
|
|
|
return this.type === 1 ? this.renderUserGeoAccount() : this.renderUserAccount()
|
|
|
|
}
|
|
|
|
async getNetworks(indicatif) {
|
|
|
|
if (indicatif) {
|
|
let result = {}
|
|
try {
|
|
result = await this.retreiveCodeInformation()
|
|
const {category} = result
|
|
console.log("RESULTAT ", result);
|
|
this.setState({result});
|
|
} catch (e) {
|
|
result = false
|
|
}
|
|
console.log("Result from second step", result);
|
|
if (result) {
|
|
if (result.child) {
|
|
this.setState({disableNetwork: true})
|
|
if (result.network)
|
|
this.setState({
|
|
modalVisible: false, networks: [result.network],
|
|
network: result.network, select_network: I18n.t("YOUR_NETWORK")
|
|
});
|
|
if (result.child === "geolocated" || result.child === "super") {
|
|
this.setState({network: result.network, select_network: I18n.t("YOUR_NETWORK_SELECTED")});
|
|
}
|
|
|
|
else {
|
|
Alert.alert(I18n.t('TITLE_PROBLE_COME'), "Impossible de recuperer les informations du code parrain", [{
|
|
text: "Revenir",
|
|
onPress: () => this.props.navigation.pop()
|
|
}])
|
|
}
|
|
|
|
// if (result.hasOwnProperty('provider_classes'))
|
|
// this.setState({provider_classes: result.provider_classes});
|
|
} else {
|
|
console.log("need enable")
|
|
getCountryNetwork(indicatif).then((result) => {
|
|
this.reseaux = [];
|
|
let networks = result;
|
|
|
|
for (let prop in networks) {
|
|
if (networks[prop] !== "") {
|
|
this.reseaux.push(networks[prop]);
|
|
}
|
|
|
|
}
|
|
this.setState({networks: this.reseaux});
|
|
this.setState({modalVisible: false})
|
|
|
|
}, (err) => {
|
|
this.setState({modalVisible: false})
|
|
this.showErrorDialog()
|
|
});
|
|
}
|
|
} else {
|
|
getCountryNetwork(indicatif).then((result) => {
|
|
this.reseaux = [];
|
|
let networks = result;
|
|
for (let prop in networks) {
|
|
if (networks[prop] !== "") {
|
|
this.reseaux.push(networks[prop]);
|
|
}
|
|
}
|
|
this.setState({networks: this.reseaux});
|
|
this.setState({modalVisible: false})
|
|
|
|
}, (err) => {
|
|
this.setState({modalVisible: false})
|
|
this.showErrorDialog()
|
|
});
|
|
}
|
|
|
|
|
|
} else {
|
|
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.setState({modalDialog: true})
|
|
this.watchLocation()
|
|
}
|
|
}, {
|
|
text: "Annuler", onPress: () => {
|
|
this.props.navigation.popToTop()
|
|
}
|
|
}])
|
|
|
|
}
|
|
|
|
}
|
|
|
|
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()
|
|
}
|
|
}])
|
|
}
|
|
|
|
componentDidMount() {
|
|
|
|
this.mounted = true;
|
|
const {type} = this.props;
|
|
|
|
|
|
if (this.props.coordinate) return;
|
|
|
|
if (Platform.OS === 'android') {
|
|
this.requestGeolocationPermission();
|
|
} else {
|
|
this.watchLocation();
|
|
}
|
|
|
|
}
|
|
|
|
async requestGeolocationPermission() {
|
|
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()
|
|
}
|
|
}])
|
|
}
|
|
}
|
|
|
|
// 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)
|
|
// }
|
|
// }
|
|
|
|
// 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;
|
|
// this.setState({townName: name});
|
|
// getTownInformationName(name).then((result) => {
|
|
// let town = null;
|
|
// if (result instanceof Array) {
|
|
// town = result[0];
|
|
// } else
|
|
// town = result;
|
|
// this.setState({town: town});
|
|
// })
|
|
// }
|
|
// }
|
|
// }
|
|
// getListCountriesActive().then((cnt) => {
|
|
// this.setState({countries: cnt})
|
|
// console.debug(cnt, shortcountry);
|
|
// var found = false
|
|
// for (let i of cnt) {
|
|
// if (i.code_country === shortcountry) {
|
|
// found = true
|
|
// this.setState({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)
|
|
// }
|
|
// }
|
|
|
|
// }
|
|
async watchLocation() {
|
|
if (this.isOffline) {
|
|
Geolocation.getCurrentPosition((position) => {
|
|
this.setState({
|
|
modalVisible: false,
|
|
latitude: position.coords.latitude,
|
|
longitude: position.coords.longitude
|
|
}, () => {
|
|
console.log("latitude", this.state.latitude);
|
|
});
|
|
if (this.result.child) {
|
|
this.setState({disableNetwork: true});
|
|
if (this.result.network) {
|
|
this.setState({
|
|
modalVisible: false, networks: [this.result.network],
|
|
});
|
|
if (this.result.child === "geolocated" || this.result.child === "super") {
|
|
this.setState({
|
|
network: this.result.network,
|
|
select_network: I18n.t("YOUR_NETWORK_SELECTED")
|
|
});
|
|
}
|
|
} else {
|
|
this.showErrorDialog();
|
|
}
|
|
}
|
|
|
|
}, (e) => {
|
|
Alert.alert(I18n.t('TITLE_PROBLE_COME'), "Impossible de recuperer les informations du code parrain", [{
|
|
text: "Reesayer",
|
|
onPress: () => this.watchLocation()
|
|
}])
|
|
console.warn("POSITION ERROR", e);
|
|
this.setState({modalVisible: false})
|
|
}, this.props.geolocationOptions);
|
|
} else {
|
|
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)
|
|
}*/
|
|
}
|
|
|
|
}
|
|
|
|
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;
|
|
this.setState({townName: name});
|
|
getTownInformationName(name).then((result) => {
|
|
let town = null;
|
|
if (result instanceof Array) {
|
|
town = result[0];
|
|
} else
|
|
town = result;
|
|
this.setState({town: town});
|
|
})
|
|
} else {
|
|
getDefaultTown().then(result => {
|
|
getTownInformationName(result.default_locality).then((resultTowwn) => {
|
|
let town = null;
|
|
if (resultTowwn instanceof Array) {
|
|
town = resultTowwn[0];
|
|
} else
|
|
town = resultTowwn;
|
|
this.setState({town: town});
|
|
});
|
|
})
|
|
}
|
|
}
|
|
}
|
|
getListCountriesActive().then((cnt) => {
|
|
this.setState({countries: cnt})
|
|
console.debug(cnt, shortcountry);
|
|
var found = false
|
|
for (let i of cnt) {
|
|
if (i.code_country === shortcountry) {
|
|
found = true
|
|
this.setState({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)
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
this.mounted = false;
|
|
// eslint-disable-next-line no-undef
|
|
if (this.watchID) Geolocation.clearWatch(this.watchID);
|
|
}
|
|
|
|
renderUserGeoAccount() {
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
{this.prepareModal()}
|
|
<View style={{flexDirection: 'row'}}>
|
|
<Icon.Button name={"keyboard-backspace"}
|
|
color={"white"}
|
|
size={24}
|
|
backgroundColor={theme.primary}
|
|
onPress={() => this.props.navigation.pop()}
|
|
/>
|
|
<Text style={styles.bigtitle}>{I18n.t('LAST_STEP')}</Text>
|
|
|
|
</View>
|
|
<ScrollView style={styles.container}>
|
|
<View
|
|
style={{
|
|
width: responsiveWidth(90),
|
|
marginTop: 20,
|
|
alignSelf: 'center',
|
|
borderRadius: 10,
|
|
paddingLeft: 20,
|
|
paddingRight: 20,
|
|
backgroundColor: 'white'
|
|
}}>
|
|
<Dropdown
|
|
label={I18n.t('COUNTRY_CHOICE')}
|
|
data={this.state.countries}
|
|
useNativeDriver={true}
|
|
disabled={this.state.disableNetwork}
|
|
|
|
value={this.state.country === null ? "" :
|
|
this.state.country}
|
|
onChangeText={(value, index, data) => {
|
|
this.setState({country: value, indicatif: value.code_dial, network: null})
|
|
this.getNetworks(value.code_dial)
|
|
}}
|
|
valueExtractor={(value) => {
|
|
return value.name
|
|
}}
|
|
labelExtractor={(value) => {
|
|
return value.name
|
|
}}
|
|
/>
|
|
</View>
|
|
<Animatable.View ref={(comp) => {
|
|
this.numanim = comp
|
|
}}>
|
|
<View style={{flexDirection: 'row', flex: 1}}>
|
|
<Fumi iconClass={FontAwesomeIcon} iconName={'flag'}
|
|
value={this.state.indicatif}
|
|
enabled={false}
|
|
editable={false}
|
|
onChangeText={(text) => {
|
|
let phonenum = text + this.state.contact !== undefined ? this.state.contact : "";
|
|
this.setState({indicatif: text, phone: phonenum})
|
|
}}
|
|
style={{
|
|
width: responsiveWidth(30),
|
|
height: responsiveHeight(10),
|
|
alignSelf: 'center',
|
|
marginTop: responsiveHeight(2),
|
|
marginLeft: responsiveWidth(5),
|
|
marginRight: responsiveWidth(5),
|
|
borderRadius: 5,
|
|
}}
|
|
/>
|
|
<View>
|
|
<Fumi iconClass={FontAwesomeIcon} iconName={'phone'}
|
|
placeholder={I18n.t('PHONE')}
|
|
iconColor={'#f95a25'}
|
|
ref={(comp) => {
|
|
this.num_input = comp
|
|
}}
|
|
iconSize={20}
|
|
onChangeText={(text) => {
|
|
let phonenumber = text
|
|
this.setState({phone: phonenumber, contact: text})
|
|
}}
|
|
style={{
|
|
|
|
marginTop: responsiveHeight(2),
|
|
marginRight: responsiveWidth(5),
|
|
|
|
width: responsiveWidth(55),
|
|
borderRadius: 5,
|
|
}}
|
|
>
|
|
</Fumi>
|
|
<Fumi iconClass={FontAwesomeIcon} iconName={'phone'}
|
|
placeholder={I18n.t('PHONE_TRANSACTION')}
|
|
iconColor={'#f95a25'}
|
|
ref={(comp) => {
|
|
this.num_input = comp
|
|
}}
|
|
iconSize={20}
|
|
onChangeText={(text) => {
|
|
let phonenumber = text
|
|
this.setState({phoneTransaction: phonenumber, contactTransaction: text})
|
|
}}
|
|
style={{
|
|
|
|
marginTop: responsiveHeight(2),
|
|
marginRight: responsiveWidth(5),
|
|
|
|
width: responsiveWidth(55),
|
|
borderRadius: 5,
|
|
}}
|
|
>
|
|
</Fumi>
|
|
</View>
|
|
</View>
|
|
</Animatable.View>
|
|
|
|
<Animatable.View ref={(comp) => {
|
|
this.networkanim = comp
|
|
}}>
|
|
<View
|
|
style={{
|
|
width: responsiveWidth(90),
|
|
marginTop: 20,
|
|
alignSelf: 'center',
|
|
borderRadius: 10,
|
|
paddingLeft: 20,
|
|
paddingRight: 20,
|
|
backgroundColor: 'white'
|
|
}}
|
|
|
|
>
|
|
<Button
|
|
style={{borderColor: 'transparent'}}
|
|
isDisabled={this.state.disableNetwork}
|
|
onPress={() => {
|
|
this.setState({networksinglePickerVisible: true})
|
|
}}>
|
|
<View>
|
|
<Text style={material.subheading}>{this.state.select_network}</Text>
|
|
<Text
|
|
style={material.subheading}>{this.state.network ? this.state.network.name : ""}</Text>
|
|
</View>
|
|
</Button>
|
|
|
|
</View>
|
|
</Animatable.View>
|
|
|
|
|
|
{this.state.provider_classes.length >= 1 && <View
|
|
style={{
|
|
width: responsiveWidth(90),
|
|
marginTop: 20,
|
|
alignSelf: 'center',
|
|
borderRadius: 10,
|
|
paddingLeft: 20,
|
|
paddingRight: 20,
|
|
backgroundColor: 'white'
|
|
}}>
|
|
<Dropdown
|
|
label={I18n.t('CLASSE_PRESTATAIRE')}
|
|
data={this.state.provider_classes}
|
|
useNativeDriver={true}
|
|
value={this.state.provider_class === null ? "" :
|
|
this.state.provider_class}
|
|
onChangeText={(value, index, data) => {
|
|
console.log("Value", value);
|
|
this.setState({provider_class: value});
|
|
}}
|
|
valueExtractor={(value) => {
|
|
return value
|
|
}}
|
|
labelExtractor={(value) => {
|
|
return value.name
|
|
}}
|
|
/>
|
|
</View>}
|
|
|
|
{/* <Text
|
|
style={{
|
|
fontSize: 16,
|
|
marginTop: 10,
|
|
marginLeft: responsiveWidth(6),
|
|
marginRight: responsiveWidth(6),
|
|
color: 'white',
|
|
fontWeight: 'bold'
|
|
}}
|
|
>{I18n.t('WAIT_LOADING_POSITION')}</Text>
|
|
<Animatable.View
|
|
ref={(comp) => {
|
|
this.mapanim = comp
|
|
}}
|
|
>
|
|
<MapView
|
|
liteMode
|
|
ref={(ref) => {
|
|
this.mapRef = ref
|
|
}}
|
|
style={styles.map}
|
|
>
|
|
{this.state.myPosition !== undefined ?
|
|
<Marker
|
|
title={I18n.t('YOUR_THERE')}
|
|
minZoomLevel={18}
|
|
coordinate={{
|
|
longitude: this.state.myPosition.longitude,
|
|
latitude: this.state.myPosition.latitude
|
|
}}
|
|
/> :
|
|
null}
|
|
</MapView>
|
|
</Animatable.View>
|
|
<TouchableOpacity style={{flexDirection: 'row', alignItems: 'center'}}>
|
|
<Image
|
|
|
|
style={{
|
|
width: 24, height: 24,
|
|
marginLeft: responsiveWidth(6)
|
|
}}
|
|
source={require('./../../datas/img/userplace.png')}
|
|
/>
|
|
<Text
|
|
style={{
|
|
fontSize: 16,
|
|
marginTop: 10, marginRight: responsiveWidth(6), color: 'white', fontWeight: 'bold'
|
|
}}
|
|
>{this.state.textadress !== undefined ? this.state.textadress : I18n.t('TAKE_MY_POSITION')}</Text>
|
|
</TouchableOpacity> */}
|
|
|
|
<Button style={styles.btnvalide} textStyle={styles.textbtnvalide}
|
|
isLoading={this.state.isLoading}
|
|
onPress={() => {
|
|
console.log(this.state);
|
|
this.checkUserGeolocated()
|
|
}}>{I18n.t('CREATE_ACCOUNT')}</Button>
|
|
|
|
|
|
</ScrollView>
|
|
<MaterialDialog
|
|
title={'Selecionner un reseau'}
|
|
items={LONG_LIST.map((row, index) => ({value: row, label: row}))}
|
|
visible={this.state.networksinglePickerVisible}
|
|
selectedItem={this.state.singlePickerSelectedItem}
|
|
onCancel={() => this.setState({networksinglePickerVisible: false})}
|
|
onOk={result => {
|
|
this.setState({networksinglePickerVisible: false});
|
|
this.setState({singlePickerSelectedItem: result.selectedItem});
|
|
}}
|
|
>
|
|
<FlatList style={{height: responsiveHeight(40)}}
|
|
data={this.state.networks}
|
|
renderItem={({item}) => this.renderRow(item)}/>
|
|
</MaterialDialog>
|
|
</View>
|
|
)
|
|
|
|
}
|
|
|
|
onRowPress(rowID) {
|
|
this.setState({network: rowID})
|
|
}
|
|
|
|
renderRow = (row) => (
|
|
<TouchableOpacity key={row} onPress={() => this.onRowPress(row)}>
|
|
<View style={styles.rowContainer}>
|
|
<View style={styles.iconContainer}>
|
|
<Icon
|
|
name={this.state.network && row.name === this.state.network.name ? 'radio-button-checked' : 'radio-button-unchecked'}
|
|
color={this.state.network && row.name === this.state.network.name ? theme.accent : this.props.colorAccent}
|
|
size={24}
|
|
/>
|
|
</View>
|
|
<Text style={material.subheading}>{row.name}</Text>
|
|
</View>
|
|
</TouchableOpacity>
|
|
);
|
|
|
|
renderUserAccount() {
|
|
return (<ScrollView style={styles.container}>
|
|
{this.prepareModal()}
|
|
<View style={{flexDirection: 'row'}}>
|
|
<Icon.Button name={"keyboard-backspace"}
|
|
color={"white"}
|
|
size={24}
|
|
backgroundColor={theme.primary}
|
|
onPress={() => this.props.navigation.pop()}
|
|
/>
|
|
<Text style={styles.bigtitle}>{I18n.t('LAST_STEP')}</Text>
|
|
|
|
</View>
|
|
<View
|
|
style={{
|
|
width: responsiveWidth(90),
|
|
marginTop: 20,
|
|
alignSelf: 'center',
|
|
borderRadius: 10,
|
|
paddingLeft: 20,
|
|
paddingRight: 20,
|
|
backgroundColor: 'white'
|
|
}}
|
|
|
|
>
|
|
<Dropdown
|
|
label={I18n.t('COUNTRY_CHOICE')}
|
|
data={this.state.countries}
|
|
useNativeDriver={true}
|
|
value={this.state.country === null ? "" :
|
|
this.state.country}
|
|
onChangeText={(value, index, data) => {
|
|
this.setState({country: value, indicatif: value.code_dial, network: null})
|
|
|
|
this.getNetworks(value.code_dial)
|
|
}}
|
|
valueExtractor={(value) => {
|
|
return value
|
|
}}
|
|
labelExtractor={(value) => {
|
|
return value.name
|
|
}}
|
|
/>
|
|
</View>
|
|
<Animatable.View ref={(comp) => {
|
|
this.numanim = comp
|
|
}}>
|
|
<View style={{flexDirection: 'row', flex: 1}}>
|
|
<Fumi iconClass={FontAwesomeIcon} iconName={'flag'}
|
|
value={this.state.indicatif}
|
|
editable={false}
|
|
|
|
onChangeText={(text) => {
|
|
|
|
this.setState({indicatif: text})
|
|
}}
|
|
style={{
|
|
width: responsiveWidth(30),
|
|
marginTop: responsiveHeight(2),
|
|
marginLeft: responsiveWidth(5),
|
|
marginRight: responsiveWidth(5),
|
|
borderRadius: 5,
|
|
}}
|
|
/>
|
|
<Fumi iconClass={FontAwesomeIcon} iconName={'phone'}
|
|
label={I18n.t('PHONE_NUMBER')}
|
|
iconColor={'#f95a25'}
|
|
ref={(comp) => {
|
|
this.num_input = comp
|
|
}}
|
|
iconSize={20}
|
|
onChangeText={(text) => {
|
|
let phonenumber = text
|
|
this.setState({phone: phonenumber})
|
|
}}
|
|
style={{
|
|
|
|
marginTop: responsiveHeight(2),
|
|
marginRight: responsiveWidth(5),
|
|
|
|
width: responsiveWidth(55),
|
|
borderRadius: 5,
|
|
}}
|
|
>
|
|
</Fumi>
|
|
</View>
|
|
</Animatable.View>
|
|
|
|
<Animatable.View ref={(comp) => {
|
|
this.networkanim = comp
|
|
}}>
|
|
<View
|
|
style={{
|
|
width: responsiveWidth(90),
|
|
marginTop: 20,
|
|
alignSelf: 'center',
|
|
borderRadius: 10,
|
|
paddingLeft: 20,
|
|
paddingRight: 20,
|
|
backgroundColor: 'white'
|
|
}}
|
|
|
|
>
|
|
<Dropdown
|
|
label={I18n.t('NETWORK_CHOICE')}
|
|
data={this.state.networks}
|
|
value={this.state.network == null ? "" : this.state.network}
|
|
onChangeText={(value, index, data) => {
|
|
this.setState({network: value})
|
|
}}
|
|
valueExtractor={(value) => {
|
|
return value
|
|
}}
|
|
labelExtractor={(value) => {
|
|
return value.name
|
|
}}
|
|
/>
|
|
</View>
|
|
</Animatable.View>
|
|
<Button style={styles.btnvalide} textStyle={styles.textbtnvalide}
|
|
isLoading={this.state.isLoading}
|
|
onPress={() => {
|
|
this._onUserCreateAccount()
|
|
}}>{I18n.t('CREATE_ACCOUNT')}</Button>
|
|
|
|
</ScrollView>)
|
|
|
|
}
|
|
|
|
_onUserCreateAccount() {
|
|
let {myPosition, textaddress, place, user, network, phone, indicatif} = this.state;
|
|
this.setState({isLoading: true})
|
|
if (user !== undefined) {
|
|
if (this.checkOrShake(myPosition, this.mapanim)) {
|
|
if (this.checkOrShake(phone, this.numanim)) {
|
|
if (this.checkOrShake(network, this.networkanim)) {
|
|
var data = {};
|
|
data.tag = "member"
|
|
data['type'] = "create_user"
|
|
data['phone'] = indicatif + phone;
|
|
data['network'] = network;
|
|
data['town'] = this.state.town;
|
|
data['latitude'] = myPosition.latitude;
|
|
data['longitude'] = myPosition.longitude;
|
|
for (let i in user) {
|
|
data[i] = user[i];
|
|
}
|
|
//console.log(data);
|
|
createUserAccount(data).then((result) => {
|
|
console.log("result", result)
|
|
if (result.success !== undefined && result.success === 1) {
|
|
Alert.alert(I18n.t("CONNEXION_SUCCESSFUL"),
|
|
I18n.t('ACCOUNT_CREATED_SUCCESS')
|
|
, [{
|
|
text: 'OK', onPress: () => {
|
|
this.props.navigation.popToTop()
|
|
this.setState({isLoading: false})
|
|
}
|
|
}], {cancelable: false})
|
|
} else {
|
|
if (result.error !== undefined) {
|
|
switch (result.error) {
|
|
case -3:
|
|
Alert.alert(I18n.t("CONNEXION_SUCCESSFUL"), I18n.t('FAILED_TEXT_CONTACT_ADMIN')
|
|
, [{text: 'OK', onPress: () => ""}], {cancelable: false})
|
|
break;
|
|
default:
|
|
Alert.alert(I18n.t("CONNEXION_SUCCESSFUL"), result.error_msg
|
|
, [{text: 'OK', onPress: () => ""}], {cancelable: false})
|
|
}
|
|
this.setState({isLoading: false})
|
|
}
|
|
}
|
|
}).catch((error) => {
|
|
this.setState({isLoading: false})
|
|
})
|
|
|
|
} else this.setState({isLoading: false})
|
|
} else this.setState({isLoading: false})
|
|
} else this.setState({isLoading: false})
|
|
} else {
|
|
this.setState({isLoading: false})
|
|
|
|
}
|
|
}
|
|
|
|
checkUserGeolocated() {
|
|
let {myPosition, textaddress, place, indicatif, user, network, phone, phoneTransaction} = this.state;
|
|
this.setState({isLoading: true})
|
|
console.log(this.state);
|
|
if (user !== undefined) {
|
|
if (this.checkOrShake(myPosition, this.mapanim)) {
|
|
if (this.checkOrShake(phone, this.numanim)) {
|
|
if (this.checkOrShake(network, this.networkanim)) {
|
|
var data = {};
|
|
data.tag = "member";
|
|
data.type = "create_geolocated_user";
|
|
data['phone'] = indicatif + phone;
|
|
data['phone_transaction'] = indicatif + phoneTransaction;
|
|
|
|
if (this.state.provider_class !== null)
|
|
data['provider_class_id'] = this.state.provider_class.id;
|
|
|
|
data['network'] = network;
|
|
data['town'] = this.state.town;
|
|
data['latitude'] = myPosition.latitude;
|
|
data['longitude'] = myPosition.longitude;
|
|
for (let i in user) {
|
|
data[i] = user[i];
|
|
}
|
|
data['category'] = user.category;
|
|
|
|
data['active'] = '0';
|
|
createGeolocatedAccount(data).then((result) => {
|
|
console.log(result);
|
|
if (result.success !== undefined && result.success === 1) {
|
|
const message = result.category === 'super' ? I18n.t("HYPERVISOR_MUST_VALIDATE_SUPERVISOR")
|
|
: I18n.t("ACCOUNT_SUCCESSFULL_CREATED")
|
|
Alert.alert("", message, [{
|
|
text: "Ok",
|
|
onPress: () => {
|
|
this.props.navigation.popToTop()
|
|
}
|
|
}])
|
|
setTimeout(() => {
|
|
this.setState({isLoading: false})
|
|
|
|
}, 1000)
|
|
this.props.navigator.push({
|
|
screen: route.login
|
|
})
|
|
this.setState({isLoading: false})
|
|
} else {
|
|
|
|
/* Crashlytics.log(JSON.stringify({"type":"erreur lors de la creation","data":result}))
|
|
Answers.logCustom("error",JSON.stringify(result))*/
|
|
console.warn(result)
|
|
if (result.error !== undefined) {
|
|
switch (result.error) {
|
|
case -3:
|
|
Alert.alert("", I18n.t('UNABLE_TO_CREATE_ACCOUNT'), [{
|
|
text: "Ok",
|
|
onPress: () => {
|
|
}
|
|
}])
|
|
break;
|
|
default:
|
|
if (result.error_msg)
|
|
Alert.alert("", result.error_msg, [{
|
|
text: "Ok",
|
|
onPress: () => {
|
|
}
|
|
}])
|
|
else if (result.sql_error)
|
|
Alert.alert(I18n.t('UNABLE_TO_CREATE_ACCOUNT'), result.sql_error, [{
|
|
text: "Ok",
|
|
onPress: () => {
|
|
}
|
|
}])
|
|
}
|
|
this.setState({isLoading: false})
|
|
}
|
|
}
|
|
}).catch((error) => {
|
|
this.setState({isLoading: false})
|
|
})
|
|
|
|
} else this.setState({isLoading: false})
|
|
} else this.setState({isLoading: false})
|
|
} else this.setState({isLoading: false})
|
|
} else {
|
|
this.setState({isLoading: false})
|
|
|
|
}
|
|
}
|
|
|
|
checkOrShake(champ, view) {
|
|
let res = false;
|
|
if (champ !== undefined && champ.length > 0) {
|
|
res = true;
|
|
} else if (champ !== Array && champ !== undefined) {
|
|
res = true
|
|
} else {
|
|
view.shake(800)
|
|
}
|
|
return res;
|
|
}
|
|
|
|
prepareModal() {
|
|
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>)
|
|
}
|
|
}
|
|
const SHORT_LIST = ['List element 1', 'List element 2', 'List element 3'];
|
|
|
|
const LONG_LIST = [
|
|
'List element 1',
|
|
'List element 2',
|
|
|
|
'List element 5',
|
|
'List element 6',
|
|
'List element 7',
|
|
'List element 8',
|
|
,
|
|
];
|
|
|
|
const styles = StyleSheet.create({
|
|
rowContainer: {
|
|
height: 52,
|
|
flex: 1,
|
|
flexDirection: 'row',
|
|
justifyContent: 'flex-start',
|
|
alignItems: 'center',
|
|
},
|
|
iconContainer: {
|
|
marginRight: 16,
|
|
},
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: theme.primary,
|
|
},
|
|
textbtnvalide: {
|
|
color: 'white',
|
|
fontWeight: 'bold'
|
|
},
|
|
bigtitle: {
|
|
color: 'white',
|
|
fontSize: 20,
|
|
flex: 1,
|
|
fontWeight: 'bold',
|
|
textAlign: 'center',
|
|
margin: 20,
|
|
},
|
|
subbigtitle: {
|
|
color: 'white',
|
|
fontSize: 17,
|
|
textAlign: 'center',
|
|
margin: 5,
|
|
},
|
|
map: {
|
|
height: 200,
|
|
marginRight: responsiveWidth(5),
|
|
marginLeft: responsiveWidth(5),
|
|
marginVertical: 10,
|
|
},
|
|
btnvalide: {
|
|
marginTop: 20,
|
|
marginLeft: 20,
|
|
marginRight: 20,
|
|
borderColor: 'transparent',
|
|
backgroundColor: theme.accentLight,
|
|
height: 52
|
|
},
|
|
input: {
|
|
height: 60,
|
|
marginTop: responsiveHeight(2),
|
|
marginLeft: responsiveWidth(5),
|
|
marginRight: responsiveWidth(5),
|
|
borderRadius: 5,
|
|
}
|
|
})
|