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

940 lines
28 KiB
JavaScript

import Button from 'apsl-react-native-button';
import _ from 'lodash';
import React, {Component} from 'react';
import {
ActivityIndicator,
Alert,
BackHandler,
Platform,
ProgressBarAndroid,
ScrollView,
StyleSheet,
Text,
View,
} from 'react-native';
import * as Animatable from 'react-native-animatable';
import I18n from 'react-native-i18n';
import {Dropdown} from 'react-native-material-dropdown-v2';
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/MaterialIcons';
import {supervisorCode} from '../../webservice/IlinkConstants';
import {getData, storeData} from '../../webservice/persistences/StorageService';
import {
categoryChild,
getCodeInformation,
getSupervisorInfoCode,
} from './../../webservice/AuthApi';
let theme = require('./../../utils/theme.json');
let route = require('./../../route.json');
const CIVILITY_DATA = [
{label: 'Monsieur', value: 1},
{label: 'Madame', value: 2},
{label: 'Mademoiselle', value: 3},
];
const NATIONALITY_DATA = [{label: 'Cameroun', value: 1}];
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,
nationalityAnim: null,
civiliteAnim: 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>
{/* Champs Civilité */}
<Animatable.View
ref={comp => {
this.civiliteAnim = comp;
}}>
<Dropdown
label={I18n.t('CIVILITY')}
style={styles.dropdown}
data={CIVILITY_DATA}
valueExtractor={(item, index) => item.value}
labelExtractor={(item, index) => item.label}
onChangeText={(value, index, data) => {
let user = this.state.user;
user.civility_id = value;
this.setState({user});
}}
/>
</Animatable.View>
{/* Champs Nationalité */}
<Animatable.View
ref={comp => {
this.nationalityAnim = comp;
}}>
<Dropdown
label={I18n.t('NATIONALITY')}
style={styles.dropdown}
data={NATIONALITY_DATA}
valueExtractor={(item, index) => item.value}
labelExtractor={(item, index) => item.label}
onChangeText={(value, index, data) => {
let user = this.state.user;
user.nationalty_id = value;
this.setState({user});
}}
/>
</Animatable.View>
<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.civiliteAnim = comp;
}}>
<Dropdown
label={I18n.t('CIVILITY')}
style={styles.dropdown}
data={CIVILITY_DATA}
// On renvoie la valeur (ex: 1, 2, 3)
valueExtractor={(item, index) => item.value}
// On affiche le label dans la liste (ex: Monsieur, Madame, ...)
labelExtractor={(item, index) => item.label}
onChangeText={(value, index, data) => {
let user = this.state.user;
user.civility_id = value; // <=== on stocke en integer
this.setState({user});
}}
/>
</Animatable.View>
<Animatable.View
ref={comp => {
this.nationalityAnim = comp;
}}>
<Dropdown
label={I18n.t('NATIONALITY')}
style={styles.dropdown}
data={NATIONALITY_DATA}
valueExtractor={(item, index) => item.value}
labelExtractor={(item, index) => item.label}
onChangeText={(value, index, data) => {
let user = this.state.user;
user.nationalty_id = value; // <=== on stocke en integer
this.setState({user});
}}
/>
</Animatable.View>
<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=======>>>>>>', user);
if (user !== undefined) {
if (this.checkOrShake(user.civility_id, this.civiliteAnim)) {
// Vérification Nationalité
if (this.checkOrShake(user.nationalty_id, this.nationalityAnim)) {
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;
// console.log("user=======>>>>>>",user)
// console.log("user=======>>>>>>",user.civility_id)
// console.log("user=======>>>>>>",user.civility_id.length)
this.setState({isLoging: true});
if (user !== undefined) {
if (this.checkOrShake(user.civility_id, this.civiliteAnim)) {
if (this.checkOrShake(user.nationalty_id, this.nationalityAnim)) {
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});
} 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);
});
}
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 codeSupervisors = Object.keys(codeSupervisorsData);
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 = codeSupervisorsData[user.member];
this.setState({codeSupervisorData: resultInfosCode});
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) ||
typeof champ === 'number'
) {
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,
},
dropdown: {
height: 60,
marginTop: responsiveHeight(2),
marginLeft: responsiveWidth(5),
marginRight: responsiveWidth(5),
borderRadius: 5,
backgroundColor: 'white',
},
});