import React, {Component} from 'react'; import {Image, ProgressBarAndroid, ScrollView, StatusBar, StyleSheet, Text, View} from 'react-native'; import Icon from 'react-native-vector-icons/MaterialIcons'; import {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, CardContent, CardTitle} from 'react-native-material-cards' import {Color} from '../../config/Color'; 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}) => ( ), } }; 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) => { 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 ( {user.category === undefined || user.category === null ? this.getHeaderLeftProfil(user) : this.getHeaderLeftAgentProfil(user) } {this.state.user.firstname} {this.state.user.lastname} {{cat} } {user.category === undefined || user.category === null ? this.getHeaderRight(user) : this.getHeaderRightAgent(user)} {I18n.t("ACCOUNT_INFO")} {user.category !== undefined && user.category !== null ? this .addAgentInformation(user) : null} {" " + this.state.user.country ? this.state.user.country : ''} {user.balance !== undefined && user.balance !== null ? this.showBalance(user) : null} {" " + this.state.user.email} {" " + this.state.user.phone} {this.showPhoneSup()} {/* {" " + this.state.user.network}*/} {user.category === 'geolocated' ? ({I18n.t("MY_NETWORK")}) : null} {user.category === 'geolocated' || user.category === 'super' ? (this.state.mynetworks.length > 0 ? this.state.mynetworks.map(item => this.generateItemNetwork(item)) : this.showLoader()) : null} ) } showPhoneSup() { if (this.state.user.phoneTransaction != undefined && this.state.user.phoneTransaction != null) { return ( {" " + this.state.user.phoneTransaction} ) } } getHeaderLeftProfil(user) { return ( {I18n.t("NETWORK")} {user.network} ) } getHeaderRight(user) { return ( ) } getHeaderRightAgent(user) { return ( {I18n.t("MEMBER_CODE")} {user.code_membre} ) } getHeaderLeftAgentProfil(user) { return ( {I18n.t("NETWORK")} {user.network} ) } addAgentInformation(user) { console.log(user) if (user.category === "geolocated") { ( {" " + user.code_parrain} ) } else return ( {" " + user.code_parrain} {" " + ((user.nbre_reseau === null || user.nbre_reseau === undefined) ? 0 : user.nbre_reseau) + " " + I18n.t("FREE")} {" " + ((user.nbre_reseau === null || user.nbre_membre === undefined) ? 0 : user.nbre_membre) + " " + I18n.t("SAVED")} ) } mapUser(user) { const myPosition = {latitude: parseFloat(user.latitude), longitude: parseFloat(user.longitude)} return ( { this.mapRef = ref }} style={styles.map} > {this.state.myPosition !== undefined ? : null} ) } showBalance(user) { return {" " + this.state.user.balance + " "} } makeGeolocatedNetworkList() { return ( Mes reseaux ) } generateItemNetwork(item) { return ( {" " + item.code_membre + " "} {" " + item.code_parrain + " "} {/* { 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" /> */} ) } showLoader() { return () } } 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' } });