507 lines
18 KiB
JavaScript
Executable File
507 lines
18 KiB
JavaScript
Executable File
/* eslint-disable react-native/no-inline-styles */
|
|
/* eslint-disable prettier/prettier */
|
|
import React, {Component} from 'react';
|
|
import {Alert, Image, ProgressBarAndroid, ScrollView, StatusBar, StyleSheet, Text, View} from 'react-native';
|
|
import Icon from 'react-native-vector-icons/MaterialIcons';
|
|
import {deleteUser, readUser} from './../../webservice/AuthApi';
|
|
import {getAgentNetworksList} from './../../webservice/NetworkApi';
|
|
import {responsiveHeight, responsiveWidth} from 'react-native-responsive-dimensions';
|
|
import MapView, {Marker} from 'react-native-maps';
|
|
import * as Utils from '../../utils/DeviceUtils';
|
|
import CardView from 'react-native-cardview';
|
|
import I18n from 'react-native-i18n';
|
|
import {IlinkEmitter} from '../../utils/events';
|
|
import {Card, CardAction, CardButton, CardContent, CardTitle} from 'react-native-material-cards';
|
|
import {Color} from '../../config/Color';
|
|
import Fontisto from 'react-native-vector-icons/Fontisto';
|
|
|
|
let theme = require('./../../utils/theme.json');
|
|
let route = require('../../route.json');
|
|
|
|
require('./../../utils/Translations');
|
|
const height = responsiveHeight(100) - 250;
|
|
/*
|
|
var Fabric = require('react-native-fabric');
|
|
var { Crashlytics } = Fabric;*/
|
|
export default class UserAccount extends Component {
|
|
static navigatorStyle = {
|
|
navBarHidden: false,
|
|
navBarBackgroundColor: theme.primaryDark,
|
|
navBarTextColor: 'white',
|
|
navBarButtonColor: 'white',
|
|
drawUnderStatusBar: false,
|
|
statusBarColor: theme.primaryDarkAdvanced,
|
|
statusBarTextColorScheme: 'light',
|
|
};
|
|
static navigationOptions = ({navigation}) => {
|
|
return {
|
|
headerTitle: I18n.t('USER_ACCOUNT'),
|
|
headerStyle: {
|
|
backgroundColor: theme.primary,
|
|
paddingTop: 10,
|
|
},
|
|
headerTitleStyle: {
|
|
color: 'white',
|
|
},
|
|
drawerIcon: ({tintColor}) => (
|
|
<Icon
|
|
name={'person'}
|
|
size={24}
|
|
/>
|
|
),
|
|
};
|
|
};
|
|
|
|
static options(passProps) {
|
|
return {
|
|
topBar: {
|
|
drawBehind: false,
|
|
visible: true,
|
|
animate: true,
|
|
buttonColor: 'white',
|
|
background: {
|
|
color: theme.primaryDark,
|
|
},
|
|
rightButtons: [],
|
|
},
|
|
backButton: {
|
|
visible: true,
|
|
color: 'white',
|
|
},
|
|
buttonColor: 'white',
|
|
background: {
|
|
color: theme.primaryDark,
|
|
},
|
|
statusBar: {
|
|
drawBehind: false,
|
|
visible: true,
|
|
},
|
|
};
|
|
}
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = this.initState();
|
|
IlinkEmitter.on('langueChange', this.updateLangue.bind(this));
|
|
readUser().then((user) => {
|
|
if (user !== null) {
|
|
this.setState({user: user});
|
|
|
|
this.updateContent(user);
|
|
}
|
|
});
|
|
|
|
|
|
}
|
|
|
|
updateLangue() {
|
|
|
|
this.props.navigation.setParams({name: I18n.t('USER_ACCOUNT')});
|
|
this.forceUpdate();
|
|
}
|
|
|
|
updateContent(user) {
|
|
getAgentNetworksList(user.agentId).then((networks) => {
|
|
console.log('networks', networks.networks);
|
|
if (networks.success !== undefined) {
|
|
this.setState({mynetworks: networks.networks});
|
|
}
|
|
|
|
});
|
|
this.setState({user: user});
|
|
}
|
|
|
|
initState() {
|
|
return {
|
|
user: {},
|
|
mynetworks: [],
|
|
};
|
|
|
|
|
|
}
|
|
|
|
render() {
|
|
|
|
let cat = '';
|
|
|
|
const {user} = this.state;
|
|
|
|
if (user.category !== undefined || user.category !== null)
|
|
{cat = user.category === 'super' ? I18n.t('ADMIN') : user.category === 'hyper' ?
|
|
I18n.t('SUPER_ADMIN') : user.category === 'geolocated' ?
|
|
I18n.t('GEOLOCATED') : I18n.t('SIMPLE_USER');}
|
|
return (
|
|
<View style={styles.container}>
|
|
<StatusBar
|
|
backgroundColor={theme.primaryDark}
|
|
barStyle="light-content"
|
|
translucent={false}
|
|
/>
|
|
<ScrollView style={{
|
|
flex: 1,
|
|
marginTop: -5,
|
|
}}>
|
|
<View style={styles.userInformation}>
|
|
<ScrollView>
|
|
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
|
|
<Image source={require('./../../datas/img/users/man.png')}
|
|
style={{width: 92, height: 92}}/>
|
|
</View>
|
|
<View style={{flex: 1, flexDirection: 'row'}}>
|
|
{user.category === undefined || user.category === null ?
|
|
this.getHeaderLeftProfil(user) : this.getHeaderLeftAgentProfil(user)
|
|
}
|
|
<View style={{flex: user.category === undefined || user.category === null ? 2 : 2}}>
|
|
<Text style={styles.textInformation}>{this.state.user.firstname}</Text>
|
|
<Text style={styles.textInformation}>{this.state.user.lastname}</Text>
|
|
{<Text style={{
|
|
color: 'white',
|
|
fontSize: 17,
|
|
fontWeight: 'bold',
|
|
textAlign: 'center',
|
|
}}>{cat}</Text>
|
|
}
|
|
|
|
</View>
|
|
{user.category === undefined || user.category === null ?
|
|
this.getHeaderRight(user)
|
|
: this.getHeaderRightAgent(user)}
|
|
|
|
</View>
|
|
</ScrollView>
|
|
|
|
</View>
|
|
<View style={styles.networkInformation}>
|
|
|
|
<Text style={{
|
|
marginLeft: 10, marginRight: 10, marginTop: 15, marginBottom: 5, fontSize: 17,
|
|
fontWeight: 'bold', color: 'black',
|
|
}}>{I18n.t('ACCOUNT_INFO')}</Text>
|
|
<CardView style={{marginLeft: 10, marginRight: 10, paddingBottom: 20}}>
|
|
<ScrollView>
|
|
{user.category !== undefined && user.category !== null ? this
|
|
.addAgentInformation(user) : null}
|
|
<Text style={styles.textInformation2}>
|
|
<Icon name={'location-on'} size={18}/>{' ' + this.state.user.country}</Text>
|
|
|
|
{user.balance !== undefined && user.balance !== null ? this.showBalance(user) : null}
|
|
<Text style={styles.textInformation2}>
|
|
<Icon name={'mail'} size={18}/>{' ' + this.state.user.email}</Text>
|
|
|
|
|
|
<Text style={styles.textInformation2}>
|
|
|
|
<Icon name={'phone'} size={18}/>
|
|
{' ' + this.state.user.phone}</Text>
|
|
{this.showPhoneSup()}
|
|
<Text style={styles.textInformation2}>
|
|
|
|
<Icon name={'account-balance-wallet'} size={18}/>
|
|
{' ' + this.state.user.network}</Text>
|
|
</ScrollView>
|
|
</CardView>
|
|
|
|
{user.category === 'geolocated' ?
|
|
(<Text style={{
|
|
marginLeft: 10,
|
|
marginRight: 10,
|
|
marginTop: 15,
|
|
marginBottom: 5,
|
|
fontSize: 17,
|
|
fontWeight: 'bold',
|
|
color: 'black',
|
|
}}>{I18n.t('MY_NETWORK')}</Text>)
|
|
|
|
: null}
|
|
{user.category === 'geolocated' ? (this.state.mynetworks.length > 0 ? this.state.mynetworks.map(item => this.generateItemNetwork(item)) : this.showLoader()) : null}
|
|
</View>
|
|
</ScrollView>
|
|
|
|
</View>
|
|
);
|
|
}
|
|
|
|
showPhoneSup() {
|
|
if (this.state.user.phoneTransaction != undefined && this.state.user.phoneTransaction != null) {
|
|
|
|
return (<Text style={styles.textInformation2}>
|
|
|
|
<Icon name={'phone'} size={18}/>
|
|
{' ' + this.state.user.phoneTransaction}</Text>
|
|
);
|
|
}
|
|
}
|
|
|
|
getHeaderLeftProfil(user) {
|
|
return (<View style={{flex: 2}}>
|
|
<Text style={{
|
|
color: 'white',
|
|
fontSize: 15,
|
|
fontWeight: 'bold',
|
|
textAlign: 'center',
|
|
}}>{I18n.t('NETWORK')}</Text>
|
|
<Text style={{color: 'white', fontSize: 15, textAlign: 'center'}}>{user.network}</Text>
|
|
</View>);
|
|
}
|
|
|
|
getHeaderRight(user) {
|
|
return (<View style={{flex: 0}} />);
|
|
}
|
|
|
|
getHeaderRightAgent(user) {
|
|
|
|
return (<View style={{flex: 2}}>
|
|
<Text style={{
|
|
color: 'white',
|
|
fontSize: 15,
|
|
textAlign: 'center',
|
|
fontWeight: 'bold',
|
|
}}>{I18n.t('MEMBER_CODE')}</Text>
|
|
<Text style={{color: 'white', fontSize: 13, textAlign: 'center'}}>{user.code_membre}</Text>
|
|
</View>);
|
|
|
|
}
|
|
|
|
getHeaderLeftAgentProfil(user) {
|
|
return (<View style={{flex: 2}}>
|
|
<Text style={{
|
|
color: 'white',
|
|
fontSize: 15,
|
|
fontWeight: 'bold',
|
|
textAlign: 'center',
|
|
}}>{I18n.t('NETWORK')}</Text>
|
|
<Text style={{color: 'white', fontSize: 13, textAlign: 'center'}}>{user.network}</Text>
|
|
</View>);
|
|
}
|
|
|
|
addAgentInformation(user) {
|
|
console.log(user);
|
|
if (user.category === 'geolocated') {
|
|
(<View>
|
|
<Text style={{marginLeft: 10, marginTop: 10, color: theme.primaryDark}}>
|
|
<Icon name={'code'} size={18} color={theme.primaryDark} style={{paddingRight: 10}}/>
|
|
{' ' + user.code_parrain}</Text>
|
|
</View>);
|
|
|
|
} else
|
|
{return (<View>
|
|
|
|
<Text style={{marginLeft: 10, marginTop: 10, color: theme.primaryDark}}>
|
|
<Icon name={'code'} size={18} color={theme.primaryDark} style={{paddingRight: 10}}/>
|
|
{' ' + user.code_parrain}</Text>
|
|
<View style={{
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
width: responsiveWidth(90),
|
|
marginRight: 50,
|
|
}}>
|
|
<Text style={{marginLeft: 12, marginTop: 10, color: theme.primaryDark}}>
|
|
<Icon name={'group-work'} color={theme.primaryDark} size={18}/>
|
|
{' ' + ((user.nbre_reseau === null || user.nbre_reseau === undefined) ? 0 : user.nbre_reseau) + ' ' + I18n.t('FREE')}
|
|
</Text>
|
|
<Text style={{marginLeft: 12, marginTop: 10, color: theme.primaryDark}}>
|
|
<Icon name={'book'} color={theme.primaryDark}
|
|
size={18}/>{' ' + ((user.nbre_reseau === null || user.nbre_membre === undefined) ? 0 : user.nbre_membre) + ' ' + I18n.t('SAVED')}
|
|
</Text>
|
|
</View>
|
|
</View>);}
|
|
}
|
|
|
|
mapUser(user) {
|
|
const myPosition = {latitude: parseFloat(user.latitude), longitude: parseFloat(user.longitude)};
|
|
|
|
return (<MapView
|
|
liteMode
|
|
ref={(ref) => {
|
|
this.mapRef = ref;
|
|
}}
|
|
style={styles.map}
|
|
>
|
|
{this.state.myPosition !== undefined ?
|
|
<Marker
|
|
title={'Vous êtes ici'}
|
|
minZoomLevel={10}
|
|
coordinate={{longitude: myPosition.longitude, latitude: myPosition.latitude}}
|
|
/> :
|
|
null}
|
|
</MapView>
|
|
);
|
|
}
|
|
|
|
showBalance(user) {
|
|
return <Text style={styles.textInformation2}>
|
|
<Icon name={'folder'} size={18}/>{' ' + this.state.user.balance + ' '}</Text>;
|
|
|
|
}
|
|
|
|
makeGeolocatedNetworkList() {
|
|
|
|
return (<View>
|
|
<Text style={{
|
|
marginLeft: 10,
|
|
marginRight: 10,
|
|
marginTop: 15,
|
|
marginBottom: 5,
|
|
fontSize: 17,
|
|
fontWeight: 'bold',
|
|
color: 'black',
|
|
}}>Mes reseaux</Text>
|
|
|
|
</View>);
|
|
}
|
|
|
|
generateItemNetwork(item) {
|
|
return (
|
|
|
|
<Card>
|
|
|
|
<CardTitle
|
|
title={item.name}
|
|
subtitle={item.phone}
|
|
/>
|
|
<CardContent>
|
|
<View Style={{flex: 1}}>
|
|
<Text style={styles.textInformation2}>
|
|
<Icon name={'code'} size={18}/>{' ' + item.code_membre + ' '}</Text>
|
|
<Text style={styles.textInformation2}>
|
|
<Icon name={'people'} size={18}/>{' ' + item.code_parrain + ' '}</Text>
|
|
{item.provider_class !== null && (
|
|
<>
|
|
<Text style={styles.textInformation2}>
|
|
<Fontisto name={'doctor'} size={18}/>{' ' + item.provider_class + ' '}</Text>
|
|
</>
|
|
|
|
)}
|
|
|
|
</View>
|
|
</CardContent>
|
|
<CardAction
|
|
separator={true}
|
|
inColumn={false}>
|
|
<CardButton
|
|
onPress={() => {
|
|
Alert.alert(
|
|
I18n.t('TITLE_SUPPRESS_CONFIRM'),
|
|
I18n.t('TEXT_SUPPRESS_CONFIRM'),
|
|
[
|
|
{
|
|
text: I18n.t('NO'), onPress: () => {
|
|
},
|
|
},
|
|
{
|
|
text: I18n.t('YES'), onPress: () => {
|
|
deleteUser(item).then(() => {
|
|
this.setState({isLoading: true});
|
|
this.updateContent(this.state.user);
|
|
});
|
|
},
|
|
style: 'cancel',
|
|
},
|
|
],
|
|
);
|
|
}}
|
|
title={I18n.t('DELETE_GEOLOCATED_USER')}
|
|
color="crimson"
|
|
/>
|
|
</CardAction>
|
|
</Card>);
|
|
}
|
|
|
|
showLoader() {
|
|
return (<View style={{height: responsiveHeight(20)}}><ProgressBarAndroid
|
|
|
|
style={{justifyContent: 'center', alignItems: 'center'}}
|
|
/></View>);
|
|
}
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
userInformation: {
|
|
backgroundColor: theme.primary,
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
paddingTop: responsiveHeight(2),
|
|
paddingBottom: responsiveHeight(5),
|
|
},
|
|
map: {
|
|
height: 200,
|
|
marginRight: responsiveWidth(5),
|
|
marginLeft: responsiveWidth(5),
|
|
marginVertical: 10,
|
|
},
|
|
networkInformation: {
|
|
width: responsiveWidth(100),
|
|
backgroundColor: '#EEEEEE',
|
|
flex: 1,
|
|
},
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: '#EEEEEE',
|
|
},
|
|
contain: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
},
|
|
identificationOptionMenuContainer: {
|
|
flexDirection: 'row',
|
|
paddingTop: 10,
|
|
paddingLeft: 10,
|
|
paddingRight: 10,
|
|
},
|
|
containerTouch: {
|
|
flex: 1,
|
|
flexDirection: 'row',
|
|
marginRight: 2.5,
|
|
alignItems: 'center',
|
|
shadowColor: Color.borderColor,
|
|
borderColor: Color.borderColor,
|
|
shadowOffset: {width: 1.5, height: 1.5},
|
|
shadowOpacity: 1.0,
|
|
elevation: 5,
|
|
borderRadius: 10,
|
|
backgroundColor: Color.cardBackgroundColor,
|
|
},
|
|
contain: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
},
|
|
imageBanner: {
|
|
marginTop: 15,
|
|
marginLeft: 5,
|
|
width: Utils.scaleWithPixel(30),
|
|
height: Utils.scaleWithPixel(30),
|
|
},
|
|
content: {
|
|
height: Utils.scaleWithPixel(60),
|
|
paddingHorizontal: 10,
|
|
justifyContent: 'space-between',
|
|
alignItems: 'flex-start',
|
|
flex: 1,
|
|
},
|
|
contentTitle: {
|
|
paddingTop: 5,
|
|
},
|
|
textInformation: {
|
|
fontSize: 16,
|
|
color: 'white',
|
|
textAlign: 'center',
|
|
},
|
|
textInformation2: {
|
|
fontSize: 15,
|
|
marginTop: 7,
|
|
color: theme.primaryDark,
|
|
marginLeft: 10,
|
|
},
|
|
textTitle: {
|
|
fontSize: 25,
|
|
color: 'white',
|
|
fontWeight: 'bold',
|
|
},
|
|
|
|
textTitle2: {
|
|
fontSize: 25,
|
|
color: theme.primaryDark,
|
|
fontWeight: 'bold',
|
|
},
|
|
});
|