383 lines
12 KiB
JavaScript
383 lines
12 KiB
JavaScript
import * as React from 'react';
|
|
import DB, {session} from '../../components/storage/';
|
|
import {
|
|
View,
|
|
Text,
|
|
TouchableOpacity,
|
|
Image,
|
|
Alert,
|
|
} from 'react-native';
|
|
import {
|
|
Container,
|
|
List,
|
|
Image as NBImage
|
|
} from 'native-base';
|
|
import {
|
|
savePlainUserInfo,
|
|
saveUserInfo
|
|
} from "../../redux/actions/AppUserInfoActions";
|
|
import { connect } from "react-redux";
|
|
import { Divider } from 'react-native-elements';
|
|
import NetInfo from "../../components/netstatus";
|
|
import CustomHeader from '../../components/header.js';
|
|
import Assets from '../../components/assets.manager.js';
|
|
import Elements from '../../components/elements.js';
|
|
import Theme from '../../components/theme.style.js';
|
|
import Icon from '../../components/icons.js';
|
|
import CustomSafeArea from '../../components/safeArea.component';
|
|
|
|
class About extends React.PureComponent {
|
|
|
|
constructor(props) {
|
|
super(props)
|
|
}
|
|
|
|
state = {
|
|
connected: false,
|
|
data: null,
|
|
accounts: [], //1, 2, 3, 4
|
|
loading: false
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.initData()
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
|
|
}
|
|
|
|
initData = () => {
|
|
NetInfo.netstatus(isConnected => {
|
|
if (isConnected) {
|
|
this.init();
|
|
} else {
|
|
Elements.nointernet2();
|
|
}
|
|
})
|
|
}
|
|
|
|
init = async () => {
|
|
let userdata = await DB.profile()
|
|
let accounts = await DB.accounts()
|
|
console.log("ACCOUNTS ===>", userdata, accounts)
|
|
this.setState({ accounts: accounts, data: userdata.data, connected: true, session })
|
|
};
|
|
|
|
switchAccount = async (account, index) => {
|
|
Alert.alert(
|
|
'Switch Account',
|
|
'Do you want to switch account?',
|
|
[
|
|
{
|
|
text: 'Cancel',
|
|
style: 'cancel',
|
|
},
|
|
{
|
|
text: 'OK',
|
|
onPress: async () => {
|
|
let process = await DB.switchaccount(index, account.data.card_number)
|
|
if(process == true){
|
|
this.props.savePlainUserInfo(account).then(res => {
|
|
DB.updateProfile(res, function(){}, function(error){})
|
|
})
|
|
// Toast.show({
|
|
// text:'Successfully switched to account',
|
|
// buttonText: '',
|
|
// duration: 10000,
|
|
// });
|
|
setTimeout(() => {
|
|
this.props.navigation.reset({
|
|
index: 0,
|
|
routes: [{name: 'Main'}],
|
|
});
|
|
}, 300);
|
|
} else {
|
|
Alert.alert("Error", "Invalid switching account")
|
|
}
|
|
},
|
|
},
|
|
],
|
|
{cancelable: true},
|
|
);
|
|
}
|
|
|
|
removeAccount = (account) => {
|
|
Alert.alert(
|
|
'Remove this Account?',
|
|
'Do you want to remove this account?',
|
|
[
|
|
{
|
|
text: 'Cancel',
|
|
style: 'cancel',
|
|
},
|
|
{
|
|
text: 'OK',
|
|
onPress: async () => {
|
|
DB.removeAccount(account, () => {
|
|
let filteredItems = this.state.accounts.filter(function(item){
|
|
return item.data.card_number != account.data.card_number;
|
|
}).map(function(item){
|
|
return item
|
|
})
|
|
this.setState({ accounts: filteredItems })
|
|
console.log(filteredItems)
|
|
}, () => {
|
|
console.log(filteredItems)
|
|
})
|
|
},
|
|
},
|
|
],
|
|
{cancelable: true},
|
|
);
|
|
}
|
|
|
|
redirectToSetMpin = async (res) => {
|
|
if(res.data.mpin == undefined || res.data.mpin == "") {
|
|
const USER_PROFILE = await DB.profile()
|
|
const SESSION = await DB.session()
|
|
console.log(USER_PROFILE, SESSION)
|
|
let sessiondata = {
|
|
card_number: USER_PROFILE.data.card_number,
|
|
lcard_uuid: USER_PROFILE.data.lcard_uuid,
|
|
mobile_number: Theme.formatter.PMBL(USER_PROFILE.data.mobile)
|
|
}
|
|
|
|
let data = {
|
|
sessiondata: sessiondata,
|
|
token: SESSION.token,
|
|
type: "addcard"
|
|
}
|
|
this.props.navigation.navigate("Setmpin", data)
|
|
} else {
|
|
this.props.navigation.reset({
|
|
index: 0,
|
|
routes: [{name: 'Mpin'}],
|
|
});
|
|
}
|
|
}
|
|
|
|
renderAccount = () => {
|
|
if (this.state.accounts.length <= 1) return null;
|
|
return (
|
|
<List>
|
|
<View style={{alignItems: 'center'}}>
|
|
<Text
|
|
style={{
|
|
padding: 20,
|
|
color: this.props.app_theme?.theme.colors.text,
|
|
fontFamily: 'Arial',
|
|
fontWeight: 'bold',
|
|
fontSize: 17,
|
|
}}>
|
|
Switch Account
|
|
</Text>
|
|
</View>
|
|
{this.state.accounts.map((account, index) => {
|
|
if (account.data.card_number == this.state.data?.card_number) return null;
|
|
return (
|
|
<View
|
|
key={index}
|
|
style={{ flex: 1, padding: 15 }}>
|
|
<TouchableOpacity
|
|
style={{flexDirection: 'row'}}
|
|
onPress={() => this.switchAccount(account, index)}>
|
|
<View style={{ marginLeft: 8 }}>
|
|
<NBImage source={this.state.data ? account.data.photo == '' ? Assets.logo.profileHolder : {uri: account.data.photo} : Assets.logo.profileHolder}/>
|
|
</View>
|
|
<View style={{ justifyContent: 'center', marginLeft: 27 }}>
|
|
<Text
|
|
style={{
|
|
fontSize: 16,
|
|
fontFamily: 'Arial',
|
|
color: this.props.app_theme?.theme.colors.text,
|
|
}}>
|
|
{this.state.data ? Theme.formatter.NAME(account.data) : null}
|
|
</Text>
|
|
<Text
|
|
style={{
|
|
fontSize: 14,
|
|
fontFamily: 'Arial',
|
|
color: this.props.app_theme?.theme.colors.text,
|
|
}}>
|
|
{this.state.data ? Theme.formatter.CN(account.data.card_number) : null}
|
|
</Text>
|
|
</View>
|
|
<View style={{ flex: 1, justifyContent: 'flex-end', alignItems: 'center', flexDirection: 'row' }}>
|
|
<TouchableOpacity
|
|
style={{ justifyContent: 'center', alignItems: 'center', padding: 8, backgroundColor: Theme.colors.primary, borderRadius: 5 }}
|
|
onPress={() => this.removeAccount(account)}>
|
|
<Text style={{fontSize: 15, fontWeight: 'bold', color: '#fff'}}>Remove</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</TouchableOpacity>
|
|
</View>
|
|
);
|
|
})}
|
|
</List>
|
|
);
|
|
};
|
|
|
|
render() {
|
|
if (!this.state.connected) {
|
|
return (
|
|
<View style={{flex: 1}}>
|
|
<CustomHeader title="My Account" menu={false} navigation={this.props.navigation} />
|
|
<Elements.nointernet
|
|
message="No internet found. Please check your internet connection."
|
|
buttonText="Try Again"
|
|
onPress={() => this.init()}
|
|
/>
|
|
</View>
|
|
);
|
|
}
|
|
return (
|
|
<CustomSafeArea>
|
|
<Elements.loaderView
|
|
title="Validating"
|
|
message="Please wait..."
|
|
isDarkMode={this.props.app_theme?.theme.dark}
|
|
backgroundColor={this.props.app_theme?.theme.colors.border}
|
|
color={this.props.app_theme?.theme.colors.text}
|
|
visible={this.state.loading} />
|
|
<CustomHeader
|
|
title="My Account"
|
|
onBackPress={() => this.props.navigation.goBack()}
|
|
menu={false}
|
|
navigation={this.props.navigation}
|
|
/>
|
|
<View
|
|
style={{width: '100%', height: 70, alignSelf: 'center', marginTop: 30}}>
|
|
<Image
|
|
source={Assets.logo.unioil}
|
|
style={{width: '100%', height: '85%', resizeMode: 'contain'}}
|
|
/>
|
|
</View>
|
|
<View style={{flex: 1}}>
|
|
<View>
|
|
<View style={{flexDirection: 'row', padding: 20, marginBottom: 15}}>
|
|
<View>
|
|
<NBImage
|
|
style={{height: 50, width: 50, marginRight: 10}}
|
|
source={this.state.data ? this.state.data.photo == '' ? Assets.logo.profileHolder : {uri: this.state.data.photo} : Assets.logo.profileHolder}
|
|
/>
|
|
</View>
|
|
<View style={{flex: 3, justifyContent: 'center'}}>
|
|
<Text
|
|
style={{
|
|
fontSize: 18,
|
|
fontFamily: 'Arial',
|
|
color: this.props.app_theme?.theme.colors.text,
|
|
fontWeight: 'bold',
|
|
}}>
|
|
{this.state.data ? Theme.formatter.NAME(this.state.data) : null}
|
|
</Text>
|
|
<Text
|
|
style={{
|
|
fontSize: 14,
|
|
fontFamily: 'Arial',
|
|
color: this.props.app_theme?.theme.colors.text,
|
|
fontWeight: 'bold',
|
|
}}>
|
|
{this.state.data ? Theme.formatter.CN(this.state.data.card_number) : null}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
<Divider />
|
|
</View>
|
|
|
|
{this.renderAccount()}
|
|
</View>
|
|
{this.state.accounts.length < 5 ?
|
|
<View
|
|
style={{
|
|
flex: 0,
|
|
width: '100%',
|
|
flexDirection: 'column',
|
|
zIndex: 111,
|
|
bottom: 25,
|
|
alignItems: 'center',
|
|
}}>
|
|
<TouchableOpacity
|
|
style={{padding: 20}}
|
|
onPress={() => {
|
|
if(this.state.accounts.length > 5) return
|
|
this.props.navigation.navigate('AddAccountCard', {
|
|
data: this.state.data,
|
|
type: "addcard",
|
|
callback: (result) => {
|
|
this.init();
|
|
// Toast.show({
|
|
// text:
|
|
// result == 'success'
|
|
// ? 'Successfully switched to account'
|
|
// : 'Try Again',
|
|
// buttonText: '',
|
|
// duration: 5000,
|
|
// });
|
|
|
|
setTimeout(() => {
|
|
Alert.alert(
|
|
'New Card',
|
|
'New card successfully added',
|
|
[
|
|
{
|
|
text: 'OK',
|
|
onPress: async () => {
|
|
const SESSION = await DB.session()
|
|
this.setState({ loading: true })
|
|
this.props.saveUserInfo({ token: SESSION.token, card_number: SESSION.user.card_number }).then(res => {
|
|
DB.updateProfile(res, success => {
|
|
this.setState({ loading: false })
|
|
this.redirectToSetMpin(res)
|
|
}, error => {
|
|
console.log(error)
|
|
this.setState({ loading: false })
|
|
})
|
|
})
|
|
},
|
|
},
|
|
],
|
|
{cancelable: true},
|
|
);
|
|
}, 1000)
|
|
},
|
|
})
|
|
}}>
|
|
<View style={{flexDirection: 'row', padding: 5}}>
|
|
<Icon.MaterialIcons
|
|
name="credit-card"
|
|
size={20}
|
|
color={Theme.colors.primary}
|
|
/>
|
|
<Text
|
|
style={{
|
|
fontFamily: 'Arial',
|
|
color: Theme.colors.primary,
|
|
marginLeft: 10,
|
|
fontSize: 16,
|
|
}}>
|
|
Add a Card
|
|
</Text>
|
|
</View>
|
|
</TouchableOpacity>
|
|
</View> : null}
|
|
</CustomSafeArea>
|
|
);
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = (state) => {
|
|
return {
|
|
userinfo: state.appUserInfoReducer.userinfo,
|
|
app_theme: state.appThemeReducer.theme
|
|
}
|
|
}
|
|
|
|
const mapDispatchToProps = {
|
|
savePlainUserInfo,
|
|
saveUserInfo
|
|
}
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(About);
|