89 lines
3.0 KiB
JavaScript
89 lines
3.0 KiB
JavaScript
import React from 'react'
|
|
import {
|
|
View,
|
|
Text,
|
|
TouchableOpacity
|
|
} from 'react-native';
|
|
import {
|
|
FormControl,
|
|
Input,
|
|
Stack
|
|
} from 'native-base';
|
|
import { LiteCreditCardInput } from "react-native-credit-card-input";
|
|
import { connect } from "react-redux";
|
|
import moment from 'moment';
|
|
import Theme from '../theme.style';
|
|
import DB from '../storage/index';
|
|
|
|
class RegisterCardFrom extends React.Component {
|
|
|
|
constructor(props) {
|
|
super(props)
|
|
}
|
|
|
|
state = {
|
|
name: '',
|
|
cardnumber: '',
|
|
cvv: '',
|
|
expmonth: '',
|
|
expyear: '',
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.init()
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
|
|
}
|
|
|
|
init = async () => {
|
|
let user = await DB.profile()
|
|
this.setState({ name: `${user.data.firstname} ${user.data.middlename} ${user.data.lastname}` })
|
|
}
|
|
|
|
send = () => {
|
|
this.props.onSend(this.state ? this.state : null)
|
|
}
|
|
|
|
_onChange = form => {
|
|
let {cvc, expiry, number} = form.values;
|
|
this.setState({ cardnumber: number.replace(/\s/g, ''), cvv: cvc, expmonth: expiry.split('/')[0], expyear: moment(expiry.split('/')[1], 'YY').format('YYYY') })
|
|
};
|
|
|
|
render() {
|
|
return (
|
|
<View style={{backgroundColor: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.border : Theme.colors.white, alignItems: 'center', justifyContent: 'center', paddingVertical: 30}}>
|
|
<Text style={{fontSize: 20, alignSelf: 'center', fontFamily: 'Arial', color: Theme.colors.primary}}>Enroll Your Payment Card</Text>
|
|
<FormControl style={{width: '90%', marginVertical: 20}}>
|
|
<LiteCreditCardInput
|
|
inputStyle={{ color: this.props.app_theme?.theme.colors.text}}
|
|
placeholders={{
|
|
number: "Enter card number here",
|
|
expiry: "MM/YY",
|
|
cvc: "CVC"
|
|
}} onChange={this._onChange}/>
|
|
<Item stackedLabel style={{marginRight: 15}}>
|
|
<Stack>
|
|
<FormControl.Label style={{ color: this.props.app_theme?.theme.colors.text }}>Full Name</FormControl.Label>
|
|
<Input style={{ color: this.props.app_theme?.theme.colors.text }} placeholder={this.state.name} value={this.state.name} onChangeText={(value) => this.setState({ name: value })} />
|
|
</Stack>
|
|
</Item>
|
|
</FormControl>
|
|
<View style={{width: '90%', height: 50, borderRadius: 5, borderColor: 'black', borderWidth: 0.1, backgroundColor: ((!this.state.cardnumber || !this.state.cvv || !this.state.expmonth || !this.state.expyear) && this.props.app_theme?.theme.dark) ? Theme.colors.darkerGray : !this.state.cardnumber || !this.state.cvv || !this.state.expmonth || !this.state.expyear ? Theme.colors.darkerWhite : Theme.colors.primary}}>
|
|
<TouchableOpacity disabled={!this.state.cardnumber || !this.state.cvv || !this.state.expmonth || !this.state.expyear} onPress={() => this.send()} style={{padding: 15}}>
|
|
<Text style={{textAlign:'center', color: "#fff"}}>Proceed</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = (state) => {
|
|
return {
|
|
app_theme: state.appThemeReducer.theme
|
|
}
|
|
}
|
|
|
|
export default connect(mapStateToProps, null)(RegisterCardFrom); |