227 lines
10 KiB
JavaScript
227 lines
10 KiB
JavaScript
import * as React from 'react';
|
|
import { SafeAreaView, View, Text, ScrollView, Image, TouchableOpacity, Platform } from 'react-native';
|
|
import { connect } from "react-redux";
|
|
import { saveUserInfo } from "../../../redux/actions/AppUserInfoActions";
|
|
import NetInfo from "../../../components/netstatus"
|
|
import Assets from '../../../components/assets.manager.js';
|
|
import Theme from '../../../components/theme.style.js';
|
|
import Elements from '../../../components/elements.js';
|
|
import CustomIcon from '../../../components/icons.js';
|
|
import { Avatar, Divider } from 'react-native-elements';
|
|
import DB from '../../../components/storage/';
|
|
|
|
|
|
class MyProfile extends React.PureComponent {
|
|
|
|
constructor(props) {
|
|
super(props)
|
|
}
|
|
|
|
state = {
|
|
connected: false,
|
|
loading: false,
|
|
userProfile: (this.props.userinfo != undefined && this.props.userinfo.data != undefined) ? this.props.userinfo.data : null,
|
|
session: null
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.init()
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
|
|
}
|
|
|
|
init = () => {
|
|
NetInfo.netstatus(isConnected => {
|
|
if(isConnected){
|
|
this.loadUserProfile()
|
|
}else{
|
|
Elements.nointernet2(this.props)
|
|
}
|
|
})
|
|
}
|
|
|
|
loadUserProfile = async () => {
|
|
if(this.props.userinfo == undefined) {
|
|
const SESSION = await DB.session()
|
|
this.setState({ connected: true, loading: true, session: SESSION })
|
|
try{
|
|
this.props.saveUserInfo({ token: SESSION.token, card_number: SESSION.user.card_number }).then(res => {
|
|
this.setState({ userProfile: res.data, loading: false })
|
|
DB.updateProfile(res, function(){}, function(error){})
|
|
})
|
|
.catch(error => this.setState({ loading: false }))
|
|
}catch(error){
|
|
this.setState({ loading: false })
|
|
}
|
|
} else {
|
|
this.setState({
|
|
connected: true,
|
|
userProfile: this.props.userinfo.data,
|
|
loading: false
|
|
})
|
|
}
|
|
}
|
|
|
|
getData = (key) => {
|
|
return this.state.userProfile != null ? this.state.userProfile[key] : ""
|
|
}
|
|
|
|
getFT = (type) => {
|
|
let types = Assets.fueltypes
|
|
for(var x=0;x<types.length;x++){if(type == types[x].value){return types[x].string}}
|
|
return ""
|
|
}
|
|
|
|
getVT = (type) => {
|
|
let types = Assets.vehicletypes
|
|
for(var x=0;x<types.length;x++){if(type == types[x].value){return types[x].string}}
|
|
return ""
|
|
}
|
|
|
|
onEdit = () => {
|
|
let navigation = this.props.navigation.navigation
|
|
navigation.navigate("EditProfile", {data: this.state.userProfile, onGoBack: (data) => {
|
|
console.log(data)
|
|
this.setState({ userProfile: data, loading: false })
|
|
this.init()
|
|
}})
|
|
}
|
|
|
|
onSelectedPaymentCard = (payment_card) => {
|
|
console.log(payment_card)
|
|
}
|
|
|
|
renderNoInternetView = () => {
|
|
return (
|
|
<View style={{flex: 1}}>
|
|
<Elements.nointernet
|
|
message="No internet found. Please check your internet connection."
|
|
buttonText="Try Again"
|
|
onPress={() => {
|
|
NetInfo.netstatus(isConnected => {
|
|
if(isConnected){
|
|
this.init()
|
|
}else{
|
|
Elements.nointernet2(this.props)
|
|
}
|
|
})
|
|
}}
|
|
/>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
render() {
|
|
if(!this.state.connected) return this.renderNoInternetView()
|
|
return (
|
|
<SafeAreaView key={this.state.userUpdateCounter} style={{flex: 1}}>
|
|
<Elements.loader visible={this.state.loading} />
|
|
<ScrollView style={{flex: 1, backgroundColor: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.background : Theme.colors.white }}>
|
|
<View style={{flex: 1, alignItems: 'center', width: '100%', padding: 15}}>
|
|
<Avatar rounded source={this.getData("photo") == '' ? Assets.logo.profileHolder : {uri: this.getData("photo")}} size={80} />
|
|
<Text style={{fontSize: 16, fontFamily: 'Arial', fontWeight: 'bold', color: this.props.app_theme?.theme.colors.text, marginTop: 15}}>
|
|
{this.state.userProfile ? Theme.formatter.NAME(this.state.userProfile) : ''}
|
|
</Text>
|
|
<TouchableOpacity onPress={() => this.onEdit()} style={{backgroundColor: Theme.colors.primary, marginTop: 5, padding: 15, borderRadius: 10}}>
|
|
<Text style={{fontFamily: 'Arial', color: '#fff', fontSize: 17}}>Edit Profile</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
<View style={{flex: 1}}>
|
|
<View style={{width: '100%'}}>
|
|
<Divider />
|
|
<View style={{flex: 1, flexDirection: 'row', padding: 15}}>
|
|
<Text style={{flex: 1, fontFamily: 'Arial', fontSize: 16, color: this.props.app_theme?.theme.dark ? Theme.colors.darkGray : Theme.colors.gray, alignSelf: 'flex-start'}}>Card Number</Text>
|
|
<Text style={{flex: 1, fontFamily: 'Arial', fontSize: 16, color: this.props.app_theme?.theme.colors.text, alignSelf: 'flex-end', textAlign: 'right'}}>
|
|
{this.state.userProfile ? Theme.formatter.CN(this.getData("card_number")) : ''}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
<View style={{width: '100%'}}>
|
|
<Divider />
|
|
<View style={{flex: 1, flexDirection: 'row', padding: 15}}>
|
|
<Text style={{flex: 1, fontFamily: 'Arial', fontSize: 16, color: this.props.app_theme?.theme.dark ? Theme.colors.darkGray : Theme.colors.gray, alignSelf: 'flex-start'}}>Mobile Number</Text>
|
|
<Text style={{flex: 1, fontFamily: 'Arial', fontSize: 16, color: this.props.app_theme?.theme.colors.text, alignSelf: 'flex-end', textAlign: 'right'}}>
|
|
+{this.state.userProfile ? this.getData("mobile") : ''}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
<View style={{width: '100%'}}>
|
|
<Divider />
|
|
<View style={{flex: 1, flexDirection: 'row', padding: 15}}>
|
|
<Text style={{flex: 1, fontFamily: 'Arial', fontSize: 16, color: this.props.app_theme?.theme.dark ? Theme.colors.darkGray : Theme.colors.gray, alignSelf: 'flex-start'}}>Birthday</Text>
|
|
<Text style={{flex: 1, fontFamily: 'Arial', fontSize: 16, color: this.props.app_theme?.theme.colors.text, alignSelf: 'flex-end', textAlign: 'right'}}>
|
|
{Theme.formatter.DTUI(this.getData("birthdate"))}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
<View style={{width: '100%'}}>
|
|
<Divider />
|
|
<View style={{flex: 1, flexDirection: 'row', padding: 15}}>
|
|
<Text style={{flex: 1, fontFamily: 'Arial', fontSize: 16, color: this.props.app_theme?.theme.dark ? Theme.colors.darkGray : Theme.colors.gray, alignSelf: 'flex-start'}}>Email</Text>
|
|
<Text numberOfLines={1} style={{flex: 1, fontFamily: 'Arial', fontSize: 16, color: this.props.app_theme?.theme.colors.text, alignSelf: 'flex-end', textAlign: 'right'}}>
|
|
{this.state.userProfile ? this.getData("email") : ''}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
<View style={{width: '100%'}}>
|
|
<Divider />
|
|
<View style={{flex: 1, flexDirection: 'row', padding: 15}}>
|
|
<Text style={{flex: 1, fontFamily: 'Arial', fontSize: 16, color: this.props.app_theme?.theme.dark ? Theme.colors.darkGray : Theme.colors.gray, alignSelf: 'flex-start'}}>Address</Text>
|
|
<Text numberOfLines={1} style={{flex: 1, fontFamily: 'Arial', fontSize: 16, color: this.props.app_theme?.theme.colors.text, alignSelf: 'flex-end', textAlign: 'right'}}>
|
|
{this.state.userProfile ? this.getData("address") : ''}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
<View style={{width: '100%'}}>
|
|
<Divider />
|
|
<View style={{flex: 1, flexDirection: 'row', padding: 15}}>
|
|
<Text style={{flex: 1, fontFamily: 'Arial', fontSize: 16, color: this.props.app_theme?.theme.dark ? Theme.colors.darkGray : Theme.colors.gray, alignSelf: 'flex-start'}}>Owned Vehicle Type</Text>
|
|
<View style={{flex: 1.5, justifyContent: 'center' }}>
|
|
<Text style={{fontFamily: 'Arial', fontSize: 16, color: this.props.app_theme?.theme.colors.text, textAlign: 'right' }}>
|
|
{this.state.userProfile ? this.getVT(this.state.userProfile.vo_code) : ''}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
<View style={{width: '100%'}}>
|
|
<Divider />
|
|
<View style={{flex: 1, flexDirection: 'row', padding: 15}}>
|
|
<Text style={{flex: 1, fontFamily: 'Arial', fontSize: 16, color: this.props.app_theme?.theme.dark ? Theme.colors.darkGray : Theme.colors.gray, alignSelf: 'flex-start'}}>Fuel Type</Text>
|
|
<Text style={{flex: 1, fontFamily: 'Arial', fontSize: 16, color: this.props.app_theme?.theme.colors.text, alignSelf: 'flex-end', textAlign: 'right'}}>
|
|
{this.state.userProfile ? this.getFT(this.state.userProfile.fueltype_code) : ''}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
{/* <View style={{width: '100%'}}>
|
|
<Divider />
|
|
<TouchableOpacity
|
|
onPress={() => this.props.navigation.navigation.navigate('PayatpumpPaymentList', { displaySelectionCard: true })}
|
|
style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center', marginLeft: 16 }}>
|
|
<Image source={Assets.icons.stpunlabeled} style={{ width: 28, height: 28, resizeMode: 'contain' }} />
|
|
<View style={{flex: 1, flexDirection: 'row', paddingVertical: 15, marginHorizontal: 10, alignItems: 'center', justifyContent: 'center'}}>
|
|
<Text style={{flex: 1, fontFamily: 'Arial', fontSize: 16, color: this.props.app_theme?.theme.dark ? Theme.colors.darkGray : Theme.colors.gray, alignSelf: 'flex-start'}}>Pay at Pump Payment Methods</Text>
|
|
<CustomIcon.Entypo name={"chevron-thin-right"} color={this.props.app_theme?.theme.colors.text} size={16} />
|
|
</View>
|
|
</TouchableOpacity>
|
|
</View> */}
|
|
</View>
|
|
</ScrollView>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = (state) => {
|
|
return {
|
|
userinfo: state.appUserInfoReducer.userinfo,
|
|
app_theme: state.appThemeReducer.theme
|
|
}
|
|
}
|
|
|
|
const mapDispatchToProps = {
|
|
saveUserInfo
|
|
}
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(MyProfile) |