375 lines
11 KiB
JavaScript
Executable File
375 lines
11 KiB
JavaScript
Executable File
import React, { Component } from "react";
|
|
import {
|
|
Platform,
|
|
StyleSheet,
|
|
View,
|
|
TouchableOpacity,
|
|
Alert,
|
|
SafeAreaView
|
|
} from "react-native";
|
|
import { observable, action, transaction } from "mobx";
|
|
import Text from "react-native-text";
|
|
import { Button } from "react-native-elements";
|
|
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 Icon2 from "react-native-vector-icons/dist/MaterialCommunityIcons";
|
|
import Toast, { DURATION } from "react-native-easy-toast";
|
|
import Log from '../../config/log'
|
|
import {
|
|
CreditCardInput,
|
|
LiteCreditCardInput
|
|
} from "react-native-credit-card-input";
|
|
//component
|
|
import DrawerNavigationHeader from "../../components/Public/drawerNavigationHeader";
|
|
// function
|
|
import theme from "../../config/colors";
|
|
import { Fonts } from "../../config/fonts";
|
|
import { width, height } from "../../config/screen";
|
|
import Loader from "../../components/Public/loader";
|
|
import Size from "../../config/size";
|
|
const size = new Size();
|
|
const log = new Log()
|
|
|
|
@inject(["userStore"])
|
|
@observer
|
|
export default class Payment extends Component {
|
|
@observable
|
|
menu = false;
|
|
@observable
|
|
addCard = false;
|
|
cardData = null;
|
|
|
|
static navigationOptions = {
|
|
drawerLabel: "Account"
|
|
};
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
this.store = this.props.userStore;
|
|
}
|
|
|
|
changeIndex(index) {
|
|
this.tabMap.index = index;
|
|
}
|
|
|
|
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);
|
|
log.firebaseLog('press_add_button_on_creditCard_progress',{})
|
|
this.store.postCreditCard(this, 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 {
|
|
console.log("error");
|
|
this.refs.toast.show("please insert card number");
|
|
}
|
|
}
|
|
|
|
testing(token, data) {
|
|
Alert.alert(token, data, { text: "ok", onPress: () => console.log("ok") });
|
|
}
|
|
@action
|
|
removeCard() {
|
|
Alert.alert("", "Are you sure? ", [
|
|
{ text: "Cancel", onPress: () => console.log("Cancel") },
|
|
{
|
|
text: "Sure",
|
|
onPress: () => this.store.deleCreditCard(this)
|
|
}
|
|
]);
|
|
}
|
|
|
|
updateCard() {
|
|
//this.removeCard();
|
|
this.props.navigation.navigate("AddCard");
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<SafeAreaView style={{ flex: 1, backgroundColor: theme.mainColor }}>
|
|
<View style={styles.container}>
|
|
<Loader loading={this.store.loading} />
|
|
{!this.store.addedCard ? (
|
|
<View>
|
|
<View
|
|
style={{
|
|
alignItems: "center",
|
|
marginTop: 20,
|
|
marginRight: 30,
|
|
marginLeft: 30,
|
|
flexDirection: "row"
|
|
}}
|
|
>
|
|
<View style={{ width: "25%", alignItems: "flex-start" }}>
|
|
<Icon
|
|
name="ios-card"
|
|
size={size.getSize(45)}
|
|
color={theme.coolGrey}
|
|
/>
|
|
</View>
|
|
<TouchableOpacity
|
|
style={{
|
|
width: "75%",
|
|
height: verticalScale(40),
|
|
alignItems: "center",
|
|
borderWidth: 2,
|
|
borderColor: theme.coolGrey,
|
|
borderRadius: 5,
|
|
justifyContent: "center"
|
|
}}
|
|
onPress={() => {
|
|
this.addCard = true;
|
|
log.firebaseLog('press_add_creditCard_button',{})
|
|
}}
|
|
>
|
|
<Text
|
|
style={{
|
|
fontSize: 15,
|
|
fontFamily: Fonts.century,
|
|
color: theme.coolGrey,
|
|
fontWeight: "bold"
|
|
}}
|
|
>
|
|
Add credit card
|
|
</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
{this.addCard ? (
|
|
<View>
|
|
<LiteCreditCardInput
|
|
autoFocus
|
|
labelStyle={styles.label}
|
|
inputStyle={styles.input}
|
|
validColor={"black"}
|
|
invalidColor={"red"}
|
|
placeholderColor={"darkgray"}
|
|
onChange={form => (this.cardData = form)}
|
|
/>
|
|
|
|
<View
|
|
style={{
|
|
justifyContent: "space-between",
|
|
marginTop: 20,
|
|
marginRight: 30,
|
|
marginLeft: 30,
|
|
flexDirection: "row"
|
|
}}
|
|
>
|
|
<TouchableOpacity
|
|
style={{
|
|
width: "45%",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
borderWidth: 2,
|
|
borderColor: theme.coolGrey,
|
|
borderRadius: 5,
|
|
height: verticalScale(40)
|
|
}}
|
|
onPress={() => {
|
|
this.addCardAction();
|
|
}}
|
|
>
|
|
<Text>Add</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
style={{
|
|
width: "45%",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
borderWidth: 2,
|
|
borderColor: theme.coolGrey,
|
|
borderRadius: 5,
|
|
height: verticalScale(40)
|
|
}}
|
|
onPress={() => {
|
|
this.addCard = false;
|
|
this.cardData = null;
|
|
log.firebaseLog('press_cancel_button_on_creditCard_progress',{})
|
|
}}
|
|
>
|
|
<Text>CANCEL</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
) : (
|
|
<View />
|
|
)}
|
|
</View>
|
|
) : (
|
|
<View
|
|
style={{
|
|
alignItems: "center",
|
|
marginTop: 20,
|
|
marginRight: 30,
|
|
marginLeft: 30,
|
|
flexDirection: "row"
|
|
}}
|
|
>
|
|
<View style={{ width: "25%", alignItems: "flex-start" }}>
|
|
<Icon
|
|
name="ios-card"
|
|
size={size.getSize(45)}
|
|
color={theme.coolGrey}
|
|
/>
|
|
</View>
|
|
|
|
<View
|
|
style={{
|
|
width: "75%",
|
|
height: verticalScale(40),
|
|
alignItems: "center",
|
|
flexDirection: "row",
|
|
borderWidth: 2,
|
|
borderColor: theme.coolGrey,
|
|
borderRadius: 5,
|
|
justifyContent: "space-between"
|
|
}}
|
|
onPress={() => {
|
|
this.addCard = true;
|
|
}}
|
|
>
|
|
<Text
|
|
style={{
|
|
fontSize: 15,
|
|
paddingLeft: scale(20),
|
|
fontFamily: Fonts.century,
|
|
color: theme.coolGrey,
|
|
fontWeight: "bold"
|
|
}}
|
|
>
|
|
{this.store.creditCardinfo.num}
|
|
</Text>
|
|
<TouchableOpacity
|
|
style={{ justifyContent: "center",alignItems:'center' }}
|
|
onPress={() => (this.menu = !this.menu)}
|
|
>
|
|
<Icon2
|
|
name="dots-vertical"
|
|
size={size.getSize(30)}
|
|
color={theme.coolGrey}
|
|
style={{ marginLeft: 10 }}
|
|
/>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
)}
|
|
|
|
{this.menu ? (
|
|
<View
|
|
style={{
|
|
justifyContent: "space-between",
|
|
width:width,
|
|
marginTop: 20,
|
|
marginRight: 30,
|
|
marginLeft: 30,
|
|
flexDirection: "row"
|
|
}}
|
|
>
|
|
|
|
|
|
<TouchableOpacity
|
|
style={{
|
|
width: "40%",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
borderWidth: 2,
|
|
marginLeft: 30,
|
|
borderColor: theme.coolGrey,
|
|
borderRadius: 5,
|
|
height: verticalScale(40)
|
|
}}
|
|
onPress={() => {
|
|
this.removeCard();
|
|
this.menu = !this.menu;
|
|
log.firebaseLog('press_remove_card_button',{})
|
|
}}
|
|
>
|
|
<Text>Remove Card</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
style={{
|
|
width: "40%",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
borderWidth: 2,
|
|
marginRight: 30,
|
|
borderColor: theme.coolGrey,
|
|
borderRadius: 5,
|
|
height: verticalScale(40)
|
|
}}
|
|
onPress={() => {
|
|
this.menu = !this.menu;
|
|
}}
|
|
>
|
|
<Text>CANCEL</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
) : (
|
|
<View />
|
|
)}
|
|
</View>
|
|
<Toast ref="toast" position={"center"} />
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
alignItems: "center",
|
|
backgroundColor: "white"
|
|
},
|
|
welcome: {
|
|
fontSize: 20,
|
|
textAlign: "center",
|
|
margin: 10
|
|
},
|
|
instructions: {
|
|
textAlign: "center",
|
|
color: "#333333",
|
|
marginBottom: 5
|
|
},
|
|
buttonView: {
|
|
width: "80%",
|
|
height: 60,
|
|
marginTop: 10,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
borderColor: "black",
|
|
borderWidth: 1
|
|
},
|
|
label: {
|
|
color: "black",
|
|
fontSize: 12
|
|
},
|
|
input: {
|
|
fontSize: 16,
|
|
color: "black"
|
|
}
|
|
});
|