simba-mobile-cad4/app/screens/login/createAccount.js

811 lines
31 KiB
JavaScript

import React, {Component} from 'react';
import {
StyleSheet,
Text,
View,
Image,
ScrollView,
Alert,
BackHandler,
Platform,
ProgressBarAndroid, ActivityIndicator
} from 'react-native';
import PropTypes from 'prop-types';
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
import Icon from 'react-native-vector-icons/MaterialIcons';
import {responsiveHeight, responsiveWidth, responsiveFontSize} from 'react-native-responsive-dimensions';
import {Fumi, Kaede} from 'react-native-textinput-effects'
import * as Animatable from 'react-native-animatable'
import Button from 'apsl-react-native-button'
import {categoryChild, getCodeInformation, getSupervisorInfoCode, getSupervisorInfoCodeOffline} from './../../webservice/AuthApi'
let theme = require('./../../utils/theme.json')
let route = require('./../../route.json')
import I18n from 'react-native-i18n';
import _ from "lodash";
import {getData, storeData} from "../../webservice/persistences/StorageService";
import {supervisorCode} from "../../webservice/IlinkConstants";
export default class CreateAccount 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.state = this.initState();
}
initState() {
return {
password: null,
enterPhone: null,
nameanim: null,
surnameanim: null,
passwordanim: null,
confirmpassanim: null,
isLoging: false,
snackVisible: false,
snackText: '',
user: {category: this.type === 0 ? 'user' : 'geolocated'},
displayFirstStep: true,
displaySecondStep: false,
showAlertIfIsOffline: this.type === 1,
isRegisterOffline: false,
displayLoader: false,
codeSupervisorsData: null,
codeSupervisorData: null
}
}
componentDidMount() {
if (this.state.showAlertIfIsOffline) {
Alert.alert(
I18n.t("REGISTER_OPTIONS"),
I18n.t('WOULD_YOU_WANT_TO_REGISTER_OFFLINE')
,
[
{
text: I18n.t("YES"), onPress: () => {
this.setState({showAlertIfIsOffline: false});
}
},
{
text: I18n.t("NO"), onPress: () => {
this.setState({isRegisterOffline: true, showAlertIfIsOffline: false});
}
}
],
{cancelable: false}
);
}
}
renderCodeParrainField() {
return (
<ScrollView style={styles.container}>
{this.state.displayLoader && this.renderLoader()}
<View style={{flexDirection: "row"}}>
<Icon.Button name={"keyboard-backspace"}
color={"white"}
size={24}
backgroundColor={'transparent'}
onPress={() => this.props.navigation.pop()}
/>
<Text style={styles.bigtitle}>{I18n.t('TEXT_BIG_CREATE_AGENT_1')}</Text>
</View>
<Text style={styles.subbigtitle}>{I18n.t('ENTER_SPONSOR_CODE')}</Text>
<Animatable.View ref={(comp) => {
this.memberanim = comp
}}>
<Fumi iconClass={FontAwesomeIcon}
iconName={'unlock-alt'}
label={I18n.t('CODE_PARRAIN')}
iconColor={'#f95a25'}
onChangeText={(text) => {
let use = this.state.user;
use.member = text;
this.setState({user: use})
}}
iconSize={20}
style={styles.input}
>
</Fumi>
</Animatable.View>
<Button style={styles.btnvalide}
textStyle={styles.textbtnvalide}
isLoading={this.state.isLoging}
onPress={() => {
this.checkCodeParrain()
}}>
{I18n.t('NEXT')}</Button>
<View style={{display: 'flex', flexDirection: 'column'}}>
<Text style={styles.indication}>
<Text style={styles.indicationTitle}>
{I18n.t('HIERACHIC_CODE')} :
</Text>{' '}
{I18n.t('HIERACHIC_CODE_DESCRIPTION')}
</Text>
<Text style={styles.indication}>
<Text style={styles.indicationTitle}>{I18n.t('TAX_CODE')} :</Text>{' '}
{I18n.t('TAX_CODE_DESCRIPTION')}
</Text>
</View>
</ScrollView>
);
}
renderUserGeoAccount() {
return (<ScrollView style={styles.container}>
<View style={{flexDirection: "row"}}>
<Icon.Button name={"keyboard-backspace"}
color={"white"}
size={24}
backgroundColor={'transparent'}
onPress={() => this.props.navigation.pop()}
/>
<Text style={styles.bigtitle}>{I18n.t('TEXT_BIG_CREATE_AGENT_1')}</Text>
</View>
<Text style={styles.subbigtitle}>{I18n.t('TEXT_SUBTITLE_CREATE_1')}</Text>
<Animatable.View ref={(comp) => {
this.nameanim = comp
}}>
<Fumi iconClass={FontAwesomeIcon} iconName={'user'}
label={I18n.t('NAME')}
iconColor={'#f95a25'}
iconSize={20}
onChangeText={(text) => {
let use = this.state.user;
use.lastname = text;
this.setState({user: use})
}}
value={this.state.user.lastname}
style={styles.input}
>
</Fumi>
</Animatable.View>
<Animatable.View ref={(comp) => {
this.surnameanim = comp
}}>
<Fumi iconClass={FontAwesomeIcon} iconName={'user-md'}
label={I18n.t('ADDRESS')}
iconColor={'#f95a25'}
iconSize={20}
keyboardType={"email-address"}
style={styles.input}
value={this.state.user.address}
onChangeText={(text) => {
let use = this.state.user;
use.address = text;
this.setState({user: use})
}}
>
</Fumi>
</Animatable.View>
<Animatable.View ref={(comp) => {
this.mailanim = comp
}}>
<Fumi iconClass={FontAwesomeIcon}
iconName={'envelope'}
label={I18n.t('EMAIL')}
keyboardType={"email-address"}
iconColor={'#f95a25'}
iconSize={20}
onChangeText={(text) => {
let use = this.state.user;
use.email = text;
this.setState({user: use})
}}
style={styles.input}
>
</Fumi>
</Animatable.View>
<Animatable.View ref={(comp) => {
this.passanim = comp
}}>
<Fumi iconClass={FontAwesomeIcon}
iconName={'lock'}
label={I18n.t('PASSWORD')}
iconColor={'#f95a25'}
secureTextEntry={true}
onChangeText={(text) => {
let use = this.state.user;
use.password = text;
this.setState({user: use})
}}
iconSize={20}
style={styles.input}
>
</Fumi>
</Animatable.View>
<Animatable.View ref={(comp) => {
this.confirmanim = comp
}}>
<Fumi iconClass={FontAwesomeIcon}
iconName={'lock'}
secureTextEntry={true}
label={I18n.t('CONFIRM_PASSWORD')}
iconColor={'#f95a25'}
onChangeText={(text) => {
let use = this.state.user;
use.confirmpass = text;
this.setState({user: use})
}}
iconSize={20}
style={styles.input}
>
</Fumi>
</Animatable.View>
<Button style={styles.btnvalide}
textStyle={styles.textbtnvalide}
isLoading={this.state.isLoging}
onPress={() => {
this.checkUserGeolocated()
}}>
{I18n.t('NEXT')}</Button>
</ScrollView>)
}
renderUserAccount() {
return (<ScrollView style={styles.container}>
<View style={{flexDirection: 'row'}}>
<Icon.Button name={"keyboard-backspace"}
color={"white"}
size={24}
backgroundColor={'transparent'}
onPress={() => this.props.navigation.pop()}
/>
<Text style={styles.bigtitle}>{I18n.t('TEXT_BIG_CREATE_1')}</Text>
</View>
<Text style={styles.subbigtitle}>{I18n.t('TEXT_SUBTITLE_CREATE_1')}</Text>
<Animatable.View ref={(comp) => {
this.nameanim = comp
}}>
<Fumi iconClass={FontAwesomeIcon} iconName={'user'}
label={I18n.t('NAME')}
onChangeText={(text) => {
let use = this.state.user;
use.lastname = text;
this.setState({user: use})
}}
iconColor={'#f95a25'}
iconSize={20}
style={styles.input}
>
</Fumi>
</Animatable.View>
<Animatable.View ref={(comp) => {
this.surnameanim = comp
}}>
<Fumi iconClass={FontAwesomeIcon} iconName={'user-md'}
label={I18n.t('ADDRESS')}
iconColor={'#f95a25'}
iconSize={20}
keyboardType={"email-address"}
onChangeText={(text) => {
let use = this.state.user;
use.address = text;
this.setState({user: use})
}}
style={styles.input}
>
</Fumi>
</Animatable.View>
<Animatable.View ref={(comp) => {
this.mailanim = comp
}}>
<Fumi iconClass={FontAwesomeIcon}
iconName={'envelope'}
keyboardType={"email-address"}
label={I18n.t('EMAIL')}
iconColor={'#f95a25'}
iconSize={20}
onChangeText={(text) => {
let use = this.state.user;
use.email = text;
this.setState({user: use})
}}
style={styles.input}
>
</Fumi>
</Animatable.View>
<Animatable.View ref={(comp) => {
this.passanim = comp
}}>
<Fumi iconClass={FontAwesomeIcon}
iconName={'lock'}
label={I18n.t('PASSWORD')}
iconColor={'#f95a25'}
iconSize={20}
secureTextEntry={true}
onChangeText={(text) => {
let use = this.state.user;
use.password = text;
this.setState({user: use})
}}
style={styles.input}
>
</Fumi>
</Animatable.View>
<Animatable.View ref={(comp) => {
this.confirmanim = comp
}}>
<Fumi iconClass={FontAwesomeIcon}
iconName={'lock'}
secureTextEntry={true}
label={I18n.t('CONFIRM_PASSWORD')}
iconColor={'#f95a25'}
iconSize={20}
onChangeText={(text) => {
let use = this.state.user;
use.confirmpass = text;
this.setState({user: use})
}}
style={styles.input}
>
</Fumi>
</Animatable.View>
<Button style={styles.btnvalide} textStyle={styles.textbtnvalide}
onPress={() => {
this._onUserCreateAccount()
}}>{I18n.t('NEXT')}</Button>
</ScrollView>)
}
async _onUserCreateAccount() {
let {user} = this.state;
// console.log(user)
if (user !== undefined) {
if (this.checkOrShake(user.lastname, this.nameanim)) {
if (this.checkOrShake(user.address, this.surnameanim)) {
if (this.checkOrShake(user.email, this.mailanim)) {
if (this.checkOrShake(user.password, this.passanim)) {
if (this.checkOrShake(user.confirmpass, this.confirmanim)) {
if (user.confirmpass === user.password) {
this.props.navigation.push(route.creationstep2, {
type: this.type,
user: user
});
} else {
this.passanim.shake(800);
this.confirmanim.shake(800);
}
}
}
}
}
}
} else {
/*this.props.navigator.showSnackbar({
text:"impossible de trouvé l'utilisateur"
})
console.log(user)
*/
}
}
checkUserGeolocated() {
let {user} = this.state;
this.setState({isLoging: true})
if (user !== undefined) {
if (this.checkOrShake(user.lastname, this.nameanim)) {
if (this.checkOrShake(user.address, this.surnameanim)) {
if (this.checkOrShake(user.email, this.mailanim)) {
if (this.state.isRegisterOffline) {
if (!_.isNil(this.state.codeSupervisorData)) {
this.setState({isLoging: false});
if (this.state.codeSupervisorData.child !== undefined) {
let user = this.state.user;
user.category = this.state.codeSupervisorData.child;
this.setState({user: user});
}
if (this.checkOrShake(user.password, this.passanim)) {
if (this.checkOrShake(user.confirmpass, this.confirmanim)) {
if (user.password === user.confirmpass) {
this.props.navigation.push(route.creationstep2, {
type: this.type,
user: user,
isOffline: this.state.isRegisterOffline,
result: this.state.codeSupervisorData,
});
} else {
this.passanim.shake(800)
this.confirmanim.shake(800)
this.setState({isLoging: false})
}
} else {
this.setState({isLoging: false})
}
} else this.setState({isLoging: false})
}
} else {
categoryChild(user.member).then(async (codes) => {
// console.log("CATEGORY", codes);
if (codes !== undefined && codes !== null && codes.child !== undefined) {
let user = this.state.user;
user.category = codes.child;
this.setState({user: user});
}
this.setState({isLoging: false});
if (this.checkOrShake(user.password, this.passanim)) {
if (this.checkOrShake(user.confirmpass, this.confirmanim)) {
if (user.password === user.confirmpass) {
this.props.navigation.push(route.creationstep2, {
type: this.type,
user: user,
isOffline: this.state.isRegisterOffline
});
} else {
this.passanim.shake(800)
this.confirmanim.shake(800)
this.setState({isLoging: false})
}
} else {
this.setState({isLoging: false})
}
} else this.setState({isLoging: false})
}).catch((e) => {
this.setState({isLoging: false})
})
}
} else this.setState({isLoging: false})
} else this.setState({isLoging: false})
} else this.setState({isLoging: false})
} else {
this.setState({isLoging: false});
/*this.props.navigator.showSnackbar({
text:"impossible de trouvé la variable user"
})*/
// console.log(user)
}
}
// retreiveSupervisorInfosCode() {
// getSupervisorInfoCode().then((result) => {
// console.warn("SUPERVISOR INFOS CODE", JSON.stringify(result));
// storeData(supervisorCode, JSON.stringify(result)).then(() => {
// this.setState({displayLoader: false});
// });
// }).catch(error => {
// //console.log(error);
// })
// }
retreiveSupervisorInfosCode() {
getSupervisorInfoCodeOffline().then((result) => {
console.warn("SUPERVISOR INFOS CODE", JSON.stringify(result));
storeData(supervisorCode, JSON.stringify(result)).then(() => {
this.setState({displayLoader: false});
});
}).catch(error => {
//console.log(error);
})
}
renderLoader() {
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
{Platform.OS === 'android'
?
(
<>
<ProgressBarAndroid/>
<Text>{I18n.t('LOADING_DOTS')}</Text>
</>
) :
<>
<ActivityIndicator size="large" color={'#ccc'}/>
<Text>{I18n.t('LOADING_DOTS')}</Text>
</>
}
</View>
)
}
retreiveCodeInformation() {
this.setState({isLoging: true});
const membre = this.state.user.member;
return new Promise(async (resolve, reject) => {
try {
let datas = await getCodeInformation(membre);
resolve(datas);
} catch (e) {
// console.log("Erreur", e);
this.setState({isLoging: false});
Alert.alert(
I18n.t("UNABLE_TO_CONNECT_TITLE"),
I18n.t('IMPOSSIBLE_TO_CONNECT_INTERNET')
,
[
{
text: I18n.t("NO"), onPress: () => {
BackHandler.exitApp();
}
},
{
text: I18n.t("YES"), onPress: () => {
this.retreiveSupervisorInfosCode();
this.setState({isLoging: false});
}
}
],
{cancelable: false}
);
reject(e);
}
});
}
async checkCodeParrain() {
let {user} = this.state;
if (this.checkOrShake(user.member, this.memberanim)) {
this.setState({isLoging: true});
if (this.state.isRegisterOffline) {
getData(supervisorCode).then(codeSupervisor => {
if (_.isNil(codeSupervisor)) {
Alert.alert(
I18n.t("ERROR_LABEL"),
I18n.t('DATA_NOT_SYNCHRONISED_WITH_SERVER')
,
[
{
text: I18n.t("NO"), onPress: () => {
BackHandler.exitApp();
}
},
{
text: I18n.t("YES"), onPress: () => {
this.setState({displayLoader: true});
}
}
],
{cancelable: false}
);
} else {
let codeSupervisorsData = JSON.parse(codeSupervisor);
let codeSupervisorsDataCodes = codeSupervisorsData.codes;
let codeSupervisors = Object.keys(codeSupervisorsData.codes);
this.setState({codeSupervisorsData});
if (!codeSupervisors.includes(user.member)) {
Alert.alert(I18n.t("ERROR_LABEL"), I18n.t('CODE_AGENT_NOT_EXIST')
, [{
text: 'OK', onPress: () => {
this.setState({isLoging: false});
//this.props.navigation.goBack();
}
}], {cancelable: false});
} else {
this.setState({isLoging: false});
let resultInfosCode = codeSupervisorsDataCodes[user.member];
const completedResultInfosCode = {
...resultInfosCode,
companies_types:codeSupervisorsData.globals.companies_types ,
districts: codeSupervisorsData.globals.districts,
neighborhoods: codeSupervisorsData.globals.neighborhoods,
activities: codeSupervisorsData.globals.activities,
municipalities: codeSupervisorsData.globals.municipalities
};
this.setState({codeSupervisorData: completedResultInfosCode});
if (resultInfosCode.network.is_companies_network === "1" && resultInfosCode.child == "geolocated") {
this.props.navigation.push(route.createUserStep, {
type: this.type,
user: this.state.user,
result: resultInfosCode,
isActif: true,
isOffline: this.state.isRegisterOffline
});
} else {
this.setState({
displayFirstStep: false,
displaySecondStep: true,
isLoging: false,
});
}
}
}
});
} else {
let result = {};
try {
result = await this.retreiveCodeInformation();
// console.log("RESULTAT ", result);
if (_.isNil(result.error)) {
let resultInfosCode = await this.retreiveCodeInformation();
if (_.isNil(resultInfosCode.error)) {
this.setState({isLoging: false});
if (resultInfosCode.network.is_companies_network === "1" && resultInfosCode.child == "geolocated") {
this.props.navigation.push(route.createUserStep, {
type: this.type,
user: this.state.user,
result: resultInfosCode,
isActif: true,
isOffline: this.state.isRegisterOffline
});
} else {
this.setState({
displayFirstStep: false,
displaySecondStep: true,
isLoging: false
});
}
} else {
Alert.alert(I18n.t("ERROR_LABEL"), ""
, [{
text: 'OK', onPress: () => {
}
}], {cancelable: false});
}
} else {
if (result.error !== undefined) {
switch (result.error) {
case -7:
Alert.alert(I18n.t("ERROR_LABEL"), result.error_msg
, [{
text: 'OK', onPress: () => {
this.setState({isLoging: false});
//this.props.navigation.goBack();
}
}], {cancelable: false})
break;
default:
Alert.alert(I18n.t("ERROR_LABEL"), ""
, [{
text: 'OK', onPress: () => {
this.setState({isLoging: false});
//this.props.navigation.goBack();
}
}], {cancelable: false});
}
this.setState({isLoading: false})
}
}
} catch (e) {
result = false
}
}
} else this.setState({isLoging: false});
}
checkOrShake(champ, view) {
let res = false;
if (champ !== undefined && champ.length > 0) {
res = true;
} else {
view.shake(800)
}
return res;
}
render() {
return this.type === 1 ?
this.state.displayFirstStep ?
this.renderCodeParrainField()
: this.renderUserGeoAccount()
: this.renderUserAccount()
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: theme.primaryDark,
},
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,
},
indication: {
color: 'white',
fontSize: 14,
marginLeft: 20,
marginRight: 20,
marginBottom: 10,
},
indicationTitle: {
color: 'white',
fontSize: 14,
marginLeft: 20,
fontWeight: '600',
},
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,
}
});