178 lines
4.4 KiB
JavaScript
178 lines
4.4 KiB
JavaScript
|
import React, { Component } from "react";
|
||
|
import {
|
||
|
Platform,
|
||
|
StyleSheet,
|
||
|
View,
|
||
|
TouchableOpacity,
|
||
|
ScrollView,
|
||
|
Switch,
|
||
|
SafeAreaView,
|
||
|
} from "react-native";
|
||
|
import { observable, action } from "mobx";
|
||
|
import Text from "react-native-text";
|
||
|
import { observer, inject } from "mobx-react/native";
|
||
|
import { scale, verticalScale, moderateScale } from "react-native-size-matters";
|
||
|
import Icon from "react-native-vector-icons/dist/Ionicons";
|
||
|
import Toast, { DURATION } from "react-native-easy-toast";
|
||
|
import {
|
||
|
CreditCardInput,
|
||
|
LiteCreditCardInput
|
||
|
} from "react-native-credit-card-input";
|
||
|
|
||
|
import DrawerNavigationHeader from "../../components/Public/drawerNavigationHeader";
|
||
|
import Loader from "../../components/Public/loader"
|
||
|
import { width, height } from "../../config/screen";
|
||
|
import theme from '../../config/colors'
|
||
|
import {Fonts} from '../../config/fonts'
|
||
|
import Size from "../../config/size";
|
||
|
const size = new Size();
|
||
|
|
||
|
@inject(["userStore"])
|
||
|
@observer
|
||
|
export default class AddCard extends Component {
|
||
|
constructor(props) {
|
||
|
super(props);
|
||
|
this.store = this.props.userStore;
|
||
|
}
|
||
|
|
||
|
cardData = null;
|
||
|
|
||
|
//_onFocus = field => console.log("focusing", field);
|
||
|
|
||
|
addCardAction() {
|
||
|
var BreakException = {};
|
||
|
if (this.cardData != null) {
|
||
|
if (this.cardData.valid) {
|
||
|
let data = {
|
||
|
num: this.cardData.values.number.replace(/\s/g, ""),
|
||
|
expiry: this.cardData.values.expiry.replace("/", ""),
|
||
|
cvc: this.cardData.values.cvc
|
||
|
};
|
||
|
|
||
|
console.log(this.cardData);
|
||
|
this.store.postCreditCard(this.props.navigation,data);
|
||
|
} else {
|
||
|
try {
|
||
|
Object.keys(this.cardData.status).forEach(e => {
|
||
|
console.log(e + " - " + this.cardData.status[e]);
|
||
|
if (
|
||
|
this.cardData.status[e] == "incomplete" ||
|
||
|
this.cardData.status[e] == "invalid"
|
||
|
) {
|
||
|
this.refs.toast.show(e + " " + this.cardData.status[e]);
|
||
|
throw BreakException;
|
||
|
}
|
||
|
});
|
||
|
} catch (e) {
|
||
|
if (e !== BreakException) throw e;
|
||
|
}
|
||
|
}
|
||
|
} else {
|
||
|
this.refs.toast.show("please insert card number");
|
||
|
}
|
||
|
}
|
||
|
|
||
|
render() {
|
||
|
return (
|
||
|
<SafeAreaView style={{ flex: 1, backgroundColor: theme.mainColor }}>
|
||
|
<View style={styles.container}>
|
||
|
<Loader
|
||
|
loading = {this.store.loading}/>
|
||
|
<View
|
||
|
style={{
|
||
|
width: width,
|
||
|
height: "10%",
|
||
|
alignItems: "center",
|
||
|
justifyContent: "center",
|
||
|
marginTop: 20,
|
||
|
flexDirection: "row"
|
||
|
}}
|
||
|
>
|
||
|
<View
|
||
|
style={{
|
||
|
width: "30%",
|
||
|
height: "100%",
|
||
|
justifyContent: "center",
|
||
|
paddingLeft: 5
|
||
|
}}
|
||
|
>
|
||
|
<Icon
|
||
|
name="ios-arrow-back"
|
||
|
size={size.getSize(50)}
|
||
|
color="black"
|
||
|
onPress={() => {
|
||
|
this.props.navigation.goBack();
|
||
|
}}
|
||
|
/>
|
||
|
</View>
|
||
|
|
||
|
<View
|
||
|
style={{
|
||
|
width: "40%",
|
||
|
height: "100%",
|
||
|
justifyContent: "center",
|
||
|
alignItems: "center"
|
||
|
}}
|
||
|
>
|
||
|
<Text style={{ fontSize: 22, fontFamily: Fonts.century, }}>Add a Card</Text>
|
||
|
</View>
|
||
|
|
||
|
<View
|
||
|
style={{
|
||
|
width: "30%",
|
||
|
paddingRight: 5,
|
||
|
height: "100%",
|
||
|
flexDirection: "row",
|
||
|
justifyContent: "flex-end",
|
||
|
alignItems: "center"
|
||
|
}}
|
||
|
>
|
||
|
<Icon
|
||
|
name="md-add"
|
||
|
size={size.getSize(50)}
|
||
|
color="black"
|
||
|
onPress={() => this.addCardAction()}
|
||
|
/>
|
||
|
</View>
|
||
|
</View>
|
||
|
<LiteCreditCardInput
|
||
|
autoFocus
|
||
|
requiresName
|
||
|
requiresCVC
|
||
|
labelStyle={styles.label}
|
||
|
inputStyle={styles.input}
|
||
|
validColor={"black"}
|
||
|
invalidColor={"red"}
|
||
|
placeholderColor={"darkgray"}
|
||
|
onChange={form => (this.cardData = form)}
|
||
|
/>
|
||
|
|
||
|
|
||
|
</View>
|
||
|
<Toast ref="toast" />
|
||
|
</SafeAreaView>
|
||
|
);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
const styles = StyleSheet.create({
|
||
|
container: {
|
||
|
flex: 1,
|
||
|
backgroundColor: "#F5FCFF"
|
||
|
},
|
||
|
switch: {
|
||
|
alignSelf: "center",
|
||
|
marginTop: 20,
|
||
|
marginBottom: 20
|
||
|
},
|
||
|
|
||
|
label: {
|
||
|
color: "black",
|
||
|
fontSize: 12
|
||
|
},
|
||
|
input: {
|
||
|
fontSize: 16,
|
||
|
color: "black"
|
||
|
}
|
||
|
});
|