180 lines
7.3 KiB
JavaScript
180 lines
7.3 KiB
JavaScript
import * as React from 'react';
|
|
import {useState, useEffect} from 'react';
|
|
import {View, Text, TouchableOpacity, Image, ImageBackground} from 'react-native';
|
|
import Theme from '../theme.style';
|
|
import Assets from '../assets.manager';
|
|
import Icon from '../icons.js';
|
|
import DB from '../storage';
|
|
import { exp } from 'react-native-reanimated';
|
|
|
|
const styles = {
|
|
borderedButton: {
|
|
padding: 5,
|
|
borderColor: '#fff',
|
|
borderRadius: 5,
|
|
borderWidth: 2,
|
|
height: 45,
|
|
width: 130,
|
|
margin: 5,
|
|
justifyContent: 'center'
|
|
},
|
|
textBig: {
|
|
|
|
}
|
|
}
|
|
|
|
class Header extends React.PureComponent {
|
|
|
|
constructor(props) {
|
|
super(props)
|
|
this.btnstyle = { marginLeft: 10 };
|
|
this.name = ''
|
|
this.cardnumber = ''
|
|
this.points = ''
|
|
}
|
|
|
|
state = {
|
|
profile: {}
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.init()
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
|
|
}
|
|
|
|
init = async () => {
|
|
let stored = await DB.profile()
|
|
this.setState({ profile: stored })
|
|
this.name = stored && stored?.data ? stored.data : {}
|
|
this.cardnumber = stored && stored?.data ? stored.data.card_number : ''
|
|
this.points = stored && stored?.data ? stored.data.points : ''
|
|
}
|
|
|
|
openDrawer = () => { this.props.navigation.openDrawer() }
|
|
|
|
render() {
|
|
return (
|
|
<View>
|
|
<View style={{flexDirection: 'row', height: (Theme.screen.h / 3) + 15, padding: 0, backgroundColor: Theme.colors.primary}}>
|
|
<ImageBackground
|
|
source={Assets.cards.classic}
|
|
style={{flex: 1,
|
|
resizeMode: "cover",
|
|
justifyContent: "center"}
|
|
}>
|
|
<View style={{flex:1, justifyContent: 'center', borderColor: '#fff', borderWeight: 3}}>
|
|
<TouchableOpacity style={[this.btnstyle, { marginBottom: 2, marginLeft: 15 }]} onPress={() => this.openDrawer()}>
|
|
<Icon.Feather name="menu" size={20} style={{color: '#fff'}} />
|
|
</TouchableOpacity>
|
|
</View>
|
|
<View style={{flex:3, justifyContent: 'flex-start', alignItems: 'center', width: '100%'}}>
|
|
<View style={{position: 'absolute', width: 78, height: 78, borderRadius: 40, marginTop: -35, borderColor: '#fff', zIndex: 1, borderWidth: 3}}>
|
|
<Image source={Assets.logo.profileHolder} style={{ flex: 1, borderRadius: 40, resizeMode: "cover", alignSelf: "center", width: '100%', height: '100%', borderColor: '#fff'}} />
|
|
</View>
|
|
<View style={{flex: 1, width: '100%', justifyContent: 'center', alignItems: 'center'}}>
|
|
<Text style={{fontSize: 20, fontWeight: 'bold', color: '#fff', marginTop: 15}}>
|
|
Guest
|
|
</Text>
|
|
<Text style={{fontSize: 25, fontWeight: 'bold', color: '#fff'}}>
|
|
|
|
</Text>
|
|
<Text style={{fontSize: 15, color: '#fff', marginBottom: 10}}>
|
|
Points: <Text style={{fontWeight: 'bold'}}> {Theme.formatter.CRNCY(0)}</Text>
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
<View style={{flex:1, justifyContent: 'center', alignItems: 'center', bottom: 15, borderColor: '#fff', borderWeight: 3}}>
|
|
<View style={{flex: 1, flexDirection: 'row', marginBottom: 20}}>
|
|
<TouchableOpacity style={styles.borderedButton}>
|
|
<Text style={{color: '#fff', alignSelf:'center'}}>My Transactions</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity style={styles.borderedButton}>
|
|
<Text style={{color: '#fff', alignSelf:'center'}}>My Card</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
</ImageBackground>
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default Header
|
|
|
|
// export default function Header({navigation, reload}){
|
|
|
|
// const openDrawer = () => { navigation.navigation.openDrawer();}
|
|
// const btnstyle = {marginLeft: 10};
|
|
// const navigate = (screen, onBackPress) => {
|
|
// // navigation.navigate("MyProfile", {screen: screen == "mycard" ? "ProfileCardTab" : "ProfileTransactionsTab", params: "card"})
|
|
// navigation.navigation.navigate('MyProfile', {
|
|
// tab: screen == "mycard" ? "ProfileCardTab" : "ProfileTransactionsTab",
|
|
// onBackPress: onBackPress
|
|
// });
|
|
// }
|
|
|
|
// const [profile, setprofile] = useState({})
|
|
// const init = async () => {
|
|
// let stored = await DB.profile()
|
|
// setprofile(stored)
|
|
// }
|
|
// useEffect(() => {
|
|
// init()
|
|
// }, [])
|
|
|
|
// // console.log("PROFILE FROM EMPTY", profile)
|
|
|
|
// let name = profile && profile?.data ? profile.data : {}
|
|
// let cardnumber = profile && profile?.data ? profile.data.card_number : ''
|
|
// let points = profile && profile?.data ? profile.data.points : ''
|
|
|
|
// return (
|
|
// <View>
|
|
// <View style={{flexDirection: 'row', height: (Theme.screen.h / 3) + 15, padding: 0, backgroundColor: Theme.colors.primary}}>
|
|
// <ImageBackground
|
|
// source={Assets.cards.classic}
|
|
// style={{flex: 1,
|
|
// resizeMode: "cover",
|
|
// justifyContent: "center"}
|
|
// }>
|
|
// <View style={{flex:1, justifyContent: 'center', borderColor: '#fff', borderWeight: 3}}>
|
|
// <TouchableOpacity style={[btnstyle, { marginBottom: 2, marginLeft: 15 }]} onPress={openDrawer}>
|
|
// <Icon.Feather name="menu" size={20} style={{color: '#fff'}} />
|
|
// </TouchableOpacity>
|
|
// </View>
|
|
// <View style={{flex:3, justifyContent: 'flex-start', alignItems: 'center', width: '100%'}}>
|
|
// <View style={{position: 'absolute', width: 78, height: 78, borderRadius: 40, marginTop: -35, borderColor: '#fff', zIndex: 1, borderWidth: 3}}>
|
|
// <Image source={Assets.logo.profileHolder} style={{ flex: 1, borderRadius: 40, resizeMode: "cover", alignSelf: "center", width: '100%', height: '100%', borderColor: '#fff'}} />
|
|
// </View>
|
|
// <View style={{flex: 1, width: '100%', justifyContent: 'center', alignItems: 'center'}}>
|
|
// <Text style={{fontSize: 20, fontWeight: 'bold', color: '#fff', marginTop: 15}}>
|
|
// Guest
|
|
// </Text>
|
|
// <Text style={{fontSize: 25, fontWeight: 'bold', color: '#fff'}}>
|
|
|
|
// </Text>
|
|
// <Text style={{fontSize: 15, color: '#fff', marginBottom: 10}}>
|
|
// Points: <Text style={{fontWeight: 'bold'}}> {Theme.formatter.CRNCY(0)}</Text>
|
|
// </Text>
|
|
// </View>
|
|
// </View>
|
|
// <View style={{flex:1, justifyContent: 'center', alignItems: 'center', bottom: 15, borderColor: '#fff', borderWeight: 3}}>
|
|
// <View style={{flex: 1, flexDirection: 'row', marginBottom: 20}}>
|
|
// <TouchableOpacity style={styles.borderedButton}>
|
|
// <Text style={{color: '#fff', alignSelf:'center'}}>My Transactions</Text>
|
|
// </TouchableOpacity>
|
|
// <TouchableOpacity style={styles.borderedButton}>
|
|
// <Text style={{color: '#fff', alignSelf:'center'}}>My Card</Text>
|
|
// </TouchableOpacity>
|
|
// </View>
|
|
// </View>
|
|
// </ImageBackground>
|
|
|
|
// </View>
|
|
// </View>
|
|
// );
|
|
// }
|