343 lines
9.5 KiB
JavaScript
343 lines
9.5 KiB
JavaScript
import * as React from 'react';
|
|
import {
|
|
SafeAreaView,
|
|
Text,
|
|
View,
|
|
FlatList,
|
|
Alert,
|
|
Platform,
|
|
TouchableOpacity
|
|
} from 'react-native';
|
|
import { connect } from "react-redux";
|
|
import { createDrawerNavigator } from '@react-navigation/drawer';
|
|
import { Avatar, Icon, ListItem } from 'react-native-elements';
|
|
import { openModal } from '../redux/actions/AlertActions.js';
|
|
import Assets from './assets.manager.js';
|
|
import Elements from './elements.js';
|
|
import DB from './storage/';
|
|
import Theme from '../components/theme.style.js';
|
|
import NetInfo from "../components/netstatus";
|
|
import CustomSafeArea from './safeArea.component.js';
|
|
import AdjustableText from './text/AdjustableText.js';
|
|
|
|
const User = [
|
|
{
|
|
name: 'Guest',
|
|
avatar_url: Assets.logo.profileHolder,
|
|
subtitle: '',
|
|
icon: 'chevron-right',
|
|
},
|
|
];
|
|
|
|
const Options = [
|
|
{
|
|
title: 'My Profile',
|
|
icon: 'account',
|
|
screen: 'MyProfile',
|
|
props: { tab: 0, onBackPress: () => console.log('backed') }
|
|
},
|
|
{
|
|
title: 'Top-up Points',
|
|
icon: 'topup',
|
|
screen: 'TopUp',
|
|
},
|
|
{
|
|
title: 'Fuel Efficiency Tracker',
|
|
icon: 'fuelTab',
|
|
screen: 'Tracker',
|
|
},
|
|
];
|
|
|
|
const Options2 = [
|
|
{
|
|
title: 'About Us',
|
|
icon: 'about',
|
|
screen: 'About',
|
|
},
|
|
{
|
|
title: 'Loyalty Program',
|
|
icon: 'card',
|
|
screen: 'Loyalty',
|
|
},
|
|
{
|
|
title: 'Contact Us',
|
|
icon: 'contact',
|
|
screen: 'Contact',
|
|
},
|
|
{
|
|
title: 'Getting Started',
|
|
icon: 'tutorial',
|
|
screen: 'OnBoarding',
|
|
},
|
|
];
|
|
|
|
const Drawer = createDrawerNavigator();
|
|
|
|
const styles = {
|
|
container: { padding: 13, paddingTop: 14 },
|
|
title: { fontSize: 13, marginLeft: 12 },
|
|
titleDisabled: { fontSize: 13, marginLeft: 12, color: '#7e7e7e' },
|
|
icon: { size: 28 },
|
|
enrollBtn: {
|
|
backgroundColor: '#e74610',
|
|
height: Theme.screen.h / 17,
|
|
marginHorizontal: 15,
|
|
borderRadius: 10,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
enrollBtnTxt: {
|
|
textAlign: 'center',
|
|
alignItems: 'center',
|
|
color: '#fff',
|
|
fontWeight: '600',
|
|
fontSize: 16,
|
|
},
|
|
marginEnroll: {
|
|
...Platform.select({
|
|
ios: {
|
|
marginTop: Theme.screen.h / 2 - 270,
|
|
},
|
|
android: {
|
|
marginTop: Theme.screen.h / 2 - 230,
|
|
},
|
|
}),
|
|
},
|
|
};
|
|
|
|
class CustomDrawer extends React.PureComponent {
|
|
|
|
constructor(props) {
|
|
super(props)
|
|
this.logoutdialog = false
|
|
}
|
|
|
|
state = {
|
|
loading: false,
|
|
guest: false
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.init()
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
|
|
}
|
|
|
|
init = async () => {
|
|
let isGuest = await DB.get('is_guest');
|
|
this.setState({ guest: isGuest })
|
|
};
|
|
|
|
onLogout = async () => {
|
|
this.setState({ loading: true })
|
|
NetInfo.netstatus(async (isConnected) => {
|
|
|
|
if (isConnected) {
|
|
this.setState({ loading: false })
|
|
this.logoutAccount(success => {
|
|
let props = this.props.props
|
|
props.navigation.reset({
|
|
index: 0,
|
|
routes: [{ name: 'Mpin' }],
|
|
});
|
|
}, error => { })
|
|
} else {
|
|
this.setState({ loading: false })
|
|
Elements.nointernet2(this.props);
|
|
}
|
|
})
|
|
};
|
|
|
|
logoutAccount = (successCallback, errorCallback) => {
|
|
DB.logoutAccount(success => {
|
|
successCallback()
|
|
}, error => {
|
|
errorCallback()
|
|
})
|
|
}
|
|
|
|
navigateTo = (screen = null, param = null, drawerParam = null) => {
|
|
let props = this.props.props
|
|
let params = screen == "OnBoarding" ? { onBackToMain: () => this.backToMainView() } : param
|
|
props.navigation.closeDrawer(drawerParam)
|
|
props.navigation.navigate(screen, params)
|
|
}
|
|
|
|
renderItem(item) {
|
|
let range = 4;
|
|
let indexes = [0, 4, 8, 12];
|
|
let cn = '';
|
|
for (let i = 0; i < indexes.length; i++) {
|
|
cn += item.subtitle.substr(indexes[i], range) + (i < indexes.length - 1 ? ' ' : '')
|
|
}
|
|
if (this.state.guest) {
|
|
return (
|
|
<ListItem
|
|
bottomDivider
|
|
containerStyle={this.props.app_theme?.theme.dark && { backgroundColor: 'transparent' }}
|
|
>
|
|
<Avatar
|
|
source={Assets.logo.profileHolder}
|
|
/>
|
|
<ListItem.Content>
|
|
<ListItem.Title
|
|
style={{ fontWeight: 'bold', fontSize: 15, color: this.props.app_theme?.theme.colors.text }}
|
|
>
|
|
Guest
|
|
</ListItem.Title>
|
|
<ListItem.Subtitle
|
|
style={this.props.app_theme?.theme.dark ? { color: this.props.app_theme?.theme.colors.text } : { color: 'white' }}
|
|
>
|
|
You are not login!
|
|
</ListItem.Subtitle>
|
|
</ListItem.Content>
|
|
</ListItem>
|
|
);
|
|
} else {
|
|
return (
|
|
<View style={{ justifyContent: 'center' }}>
|
|
<ListItem
|
|
bottomDivider
|
|
containerStyle={this.props.app_theme?.theme.dark && { backgroundColor: 'transparent' }}
|
|
>
|
|
<Avatar
|
|
source={item.avatar_url !== '' ? { uri: item.avatar_url } : Assets.logo.profileHolder}
|
|
/>
|
|
<ListItem.Content>
|
|
<ListItem.Title
|
|
style={{ fontWeight: 'bold', fontSize: 15, color: this.props.app_theme?.theme.colors.text }}
|
|
>
|
|
{item.name}
|
|
</ListItem.Title>
|
|
<ListItem.Subtitle
|
|
style={{ color: this.props.app_theme?.theme.colors.text }}
|
|
>
|
|
{cn}
|
|
</ListItem.Subtitle>
|
|
</ListItem.Content>
|
|
<Icon
|
|
name={item.icon}
|
|
color={this.props.app_theme?.theme.colors.text}
|
|
onPress={() => this.navigateTo('Account', { test: {} })}
|
|
/>
|
|
</ListItem>
|
|
</View>
|
|
);
|
|
}
|
|
}
|
|
|
|
backToMainView = () => {
|
|
this.props.props.navigation.navigate('Main')
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<CustomSafeArea>
|
|
<Elements.loader visible={this.state.loading} />
|
|
<View style={{ marginTop: 18 }}></View>
|
|
<FlatList
|
|
keyExtractor={(item, index) => index.toString()}
|
|
bounces={false}
|
|
data={this.props.User}
|
|
navigation={this.props.navigation}
|
|
renderItem={({ item, index }) => {
|
|
return this.renderItem(item, index)
|
|
}}
|
|
style={{ flexGrow: 0 }}
|
|
/>
|
|
<View>
|
|
{Options.map((item, i) => (
|
|
<ListItem
|
|
key={i}
|
|
bottomDivider={i == Options.length - 1 ? true : false}
|
|
containerStyle={[styles.container, this.props.app_theme?.theme.dark && { backgroundColor: 'transparent' }]}
|
|
disabled={this.state.guest ? true : false}
|
|
onPress={() => {
|
|
this.navigateTo(item.screen, item.props || {})
|
|
}}>
|
|
<Elements.icon name={item.icon} size={25} />
|
|
<ListItem.Content>
|
|
<ListItem.Title
|
|
style={[this.state.guest ? styles.titleDisabled : styles.title, { color: !this.state.guest ? this.props.app_theme?.theme.colors.text : '#7e7e7e' }]}
|
|
>
|
|
{item.title}
|
|
</ListItem.Title>
|
|
</ListItem.Content>
|
|
</ListItem>
|
|
))}
|
|
</View>
|
|
<View>
|
|
{Options2.map((item, i) => (
|
|
<ListItem
|
|
key={i}
|
|
bottomDivider={i == Options2.length - 1 ? true : false}
|
|
containerStyle={[styles.container, this.props.app_theme?.theme.dark && { backgroundColor: 'transparent' }]}
|
|
onPress={() => {
|
|
this.navigateTo(item.screen, item.props || {}, item.screen)
|
|
}}>
|
|
<Elements.icon name={item.icon} size={25} />
|
|
<ListItem.Content>
|
|
<ListItem.Title
|
|
style={[styles.title, { color: this.props.app_theme?.theme.colors.text }]}
|
|
>
|
|
{item.title}
|
|
</ListItem.Title>
|
|
</ListItem.Content>
|
|
</ListItem>
|
|
))}
|
|
</View>
|
|
|
|
{this.state.guest ? (
|
|
<View style={styles.marginEnroll}>
|
|
<TouchableOpacity
|
|
style={styles.enrollBtn}
|
|
onPress={async () => {
|
|
let props = this.props.props
|
|
await DB.set("is_guest", "false", () => {
|
|
props.navigation.reset({
|
|
index: 0,
|
|
routes: [{ name: 'Login' }],
|
|
});
|
|
}, () => { });
|
|
}}>
|
|
<AdjustableText style={styles.enrollBtnTxt}>Enroll Your Card Now</AdjustableText>
|
|
</TouchableOpacity>
|
|
</View>
|
|
) : (
|
|
<ListItem
|
|
key={12}
|
|
containerStyle={[styles.container,{marginTop: 2}, this.props.app_theme?.theme.dark && { backgroundColor: 'transparent' }]}
|
|
onPress={() => {
|
|
this.props.props.navigation.closeDrawer();
|
|
Alert.alert("Logout", '\n' + 'Are you sure you want to logout?', [{ text: "CANCEL", onPress: () => { } }, { text: "OK", onPress: () => this.onLogout() }])
|
|
}}
|
|
>
|
|
<Elements.icon name={'logout'} size={25} />
|
|
<ListItem.Content>
|
|
<ListItem.Title
|
|
style={[styles.title, { color: this.props.app_theme?.theme.colors.text }]}
|
|
>
|
|
Logout
|
|
</ListItem.Title>
|
|
</ListItem.Content>
|
|
</ListItem>
|
|
)}
|
|
</CustomSafeArea>
|
|
)
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = (state) => {
|
|
return {
|
|
app_theme: state.appThemeReducer.theme
|
|
}
|
|
}
|
|
|
|
const mapDispatchToProps = {
|
|
openModal
|
|
}
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(CustomDrawer)
|