125 lines
4.4 KiB
JavaScript
125 lines
4.4 KiB
JavaScript
import * as React from 'react';
|
|
import { connect } from "react-redux";
|
|
import {
|
|
View,
|
|
Text,
|
|
ImageBackground,
|
|
} from 'react-native';
|
|
import {
|
|
Button,
|
|
Box
|
|
} from 'native-base';
|
|
import NetInfo from "../../components/netstatus";
|
|
import CustomIcon from '../../components/icons.js';
|
|
import Theme from '../../components/theme.style.js';
|
|
import DB from '../../components/storage/';
|
|
import moment from 'moment';
|
|
import QRCode from 'react-native-qrcode-svg';
|
|
import Barcode from 'react-native-barcode-builder';
|
|
|
|
class MyCard extends React.Component {
|
|
|
|
constructor(props) {
|
|
super(props)
|
|
}
|
|
|
|
state = {
|
|
session: null,
|
|
userProfile: null,
|
|
userDetails: {},
|
|
sliderIndex: 0,
|
|
isConnected: false
|
|
}
|
|
|
|
componentDidMount() {
|
|
NetInfo.netstatus(isConnected => this.setState({ isConnected: isConnected }))
|
|
this.init()
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
|
|
}
|
|
|
|
init = async () => {
|
|
const USERPROFILE = await DB.profile()
|
|
const SESSION = await DB.session()
|
|
this.setState({ userProfile: USERPROFILE, session: SESSION, userDetails: USERPROFILE.data })
|
|
}
|
|
|
|
renderImage = () => {
|
|
return {uri: this.state.userProfile?.data?.card_image}
|
|
}
|
|
|
|
renderName = () => {
|
|
return Theme.formatter.NAME(this.state.userProfile?.data || null)
|
|
}
|
|
|
|
renderCardNumber = () => {
|
|
return Theme.formatter.CN(this.state.userProfile?.data?.card_number || "")
|
|
}
|
|
|
|
renderExpiry = () => {
|
|
return new moment(new Date(this.state.userProfile?.data?.expiry_date)).format("MM/YY")
|
|
}
|
|
|
|
slide = (dir) => {
|
|
if(dir == "+") {
|
|
if(this.state.sliderIndex == 1) this.setState({ sliderIndex: 0 })
|
|
else this.setState({ sliderIndex: 1 })
|
|
} else {
|
|
if(this.state.sliderIndex == 0) this.setState({ sliderIndex: 1 })
|
|
else this.setState({ sliderIndex: 0 })
|
|
}
|
|
}
|
|
|
|
getFontColor = (type) => {
|
|
if(type == 'PRIVATEB' || type == 'PARTNERLTW' || type == 'PARTNERMS') return 'black'
|
|
else return 'black'
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<View style={{ flex: 1, backgroundColor: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.background : Theme.colors.white}}>
|
|
<View style={{flex: 1, padding: 15, borderRadius: 15, width: '95%', alignSelf: 'center'}}>
|
|
<ImageBackground source={this.state.isConnected ? this.renderImage() : this.renderImage()} style={{height: 215, overflow: 'hidden', borderRadius: 15}} >
|
|
<View style={{marginTop: '26%'}}>
|
|
<Text style={{fontSize: 15, paddingLeft: 10, fontFamily: 'Arial', color: this.getFontColor(this.state.userDetails?.card_type)}}>{this.renderName() || null}</Text>
|
|
<Text style={{fontSize: 15, paddingLeft: 10, fontFamily: 'Arial', color: this.getFontColor(this.state.userDetails?.card_type)}}>{this.renderCardNumber() || null}</Text>
|
|
<Text style={{fontSize: 15, paddingLeft: 10, fontFamily: 'Arial', color: this.getFontColor(this.state.userDetails?.card_type)}}>Card Expiry {this.renderExpiry()}</Text>
|
|
</View>
|
|
</ImageBackground>
|
|
</View>
|
|
<View style={{ flexDirection: "row", flex: 1, left: 0, right: 0, justifyContent: 'space-between', padding: 15 }}>
|
|
<Button iconLeft onPress={() => this.slide("-")} style={{backgroundColor: 'transparent'}}>
|
|
<CustomIcon.AntDesign color={this.props.app_theme?.theme.colors.text} name="left" size={30} />
|
|
</Button>
|
|
<View style={{justifyContent: 'center'}}>
|
|
{this.state.sliderIndex == 0 ?
|
|
<View style={{borderWidth: 1, borderColor: 'white', padding: 10, backgroundColor: 'white'}}>
|
|
<QRCode
|
|
value={this.state.userDetails ? this.state.userDetails?.card_number : this.state.session?.user?.card_number}
|
|
size={200}
|
|
/>
|
|
</View>
|
|
:
|
|
<Barcode
|
|
value={this.state.userDetails ? this.state.userDetails?.card_number : this.state.session?.user?.card_number}
|
|
format="CODE128" width={1.7} height={160} />}
|
|
</View>
|
|
<Button iconRight onPress={() => this.slide("+")} style={{backgroundColor: 'transparent'}}>
|
|
<CustomIcon.AntDesign color={this.props.app_theme?.theme.colors.text} name="right" size={30} />
|
|
</Button>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = (state) => {
|
|
return {
|
|
app_theme: state.appThemeReducer.theme
|
|
}
|
|
}
|
|
|
|
export default connect(mapStateToProps, null)(MyCard);
|