edited
This commit is contained in:
125
app/containers/Account/account.js
Executable file
125
app/containers/Account/account.js
Executable file
@@ -0,0 +1,125 @@
|
||||
import React, { Component } from "react";
|
||||
import {
|
||||
Platform,
|
||||
StyleSheet,
|
||||
Text,
|
||||
View,
|
||||
Alert,
|
||||
SafeAreaView
|
||||
} from "react-native";
|
||||
import { observable } from "mobx";
|
||||
import { observer, inject } from "mobx-react/native";
|
||||
import ScrollableTabView from "react-native-scrollable-tab-view";
|
||||
//component
|
||||
import DrawerNavigationHeader from "../../components/Public/drawerNavigationHeader";
|
||||
import AccountSettings from "./accountSettings";
|
||||
import Login from "../Login/login";
|
||||
import Payment from "./payment";
|
||||
import Header from '../../components/Public/signInUpHeader'
|
||||
// function
|
||||
import { width, height } from "../../config/screen";
|
||||
import Log from '../../config/log'
|
||||
import theme from "../../config/colors";
|
||||
import {Fonts} from '../../config/fonts'
|
||||
import AsyncStorageHelper from "../../config/asyncStorageHelper";
|
||||
import language from "../../config/language";
|
||||
const asyncStorageHelper = new AsyncStorageHelper();
|
||||
const log = new Log()
|
||||
@inject(["menuStore"], ["userStore"])
|
||||
@observer
|
||||
export default class Account extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.store = this.props.userStore;
|
||||
this.menuStore = this.props.menuStore;
|
||||
}
|
||||
|
||||
@observable
|
||||
static navigationOptions = {
|
||||
drawerLabel: "Account",
|
||||
swipeEnabled: false,
|
||||
tabBarLabel: language.en.profile,
|
||||
};
|
||||
|
||||
|
||||
componentWillMount() {
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
console.log(this.store.logined)
|
||||
if (!this.store.logined) {
|
||||
// this.props.navigation.navigate("Login");
|
||||
} else {
|
||||
}
|
||||
}
|
||||
|
||||
changeIndex(index) {
|
||||
this.tabMap.index = index;
|
||||
}
|
||||
|
||||
logoutAlert() {
|
||||
Alert.alert(
|
||||
"Logout",
|
||||
"Are you sure to Logout?",
|
||||
[
|
||||
{
|
||||
text: "Cancel",
|
||||
onPress: () => console.log("Cancel Pressed"),
|
||||
style: "cancel"
|
||||
},
|
||||
{ text: "Sure", onPress: () => this.logoutAction() }
|
||||
],
|
||||
{ cancelable: false }
|
||||
);
|
||||
}
|
||||
|
||||
logoutAction() {
|
||||
this.store.logoutPost(this);
|
||||
}
|
||||
navigatieAction(page) {
|
||||
this.props.navigation.navigate(page);
|
||||
}
|
||||
|
||||
render() {
|
||||
log.firebaseClass('profile')
|
||||
return (
|
||||
<SafeAreaView style={{ backgroundColor: theme.mainColor, flex: 1 }}>
|
||||
<View style={styles.container}>
|
||||
<Header navigation = {this.props.navigation}/>
|
||||
<ScrollableTabView
|
||||
style={{marginTop: 20, }}
|
||||
tabBarTextStyle = {{fontFamily:Fonts.century,fontWeight:'bold'}}
|
||||
tabBarActiveTextColor={theme.mainColor}
|
||||
tabBarUnderlineStyle={{ backgroundColor: "white", height: 1 }}
|
||||
tabBarBackgroundColor={"white"}>
|
||||
<AccountSettings
|
||||
tabLabel="My Information"
|
||||
navigation={this.props.navigation}
|
||||
/>
|
||||
<Payment tabLabel="Credit card details" navigation={this.props.navigation} />
|
||||
</ScrollableTabView>
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
height: height,
|
||||
width: width
|
||||
},
|
||||
welcome: {
|
||||
fontSize: 20,
|
||||
textAlign: "center",
|
||||
margin: 10
|
||||
},
|
||||
instructions: {
|
||||
textAlign: "center",
|
||||
color: "#333333",
|
||||
marginBottom: 5
|
||||
}
|
||||
});
|
||||
336
app/containers/Account/accountSettings.js
Executable file
336
app/containers/Account/accountSettings.js
Executable file
@@ -0,0 +1,336 @@
|
||||
import React, { Component } from "react";
|
||||
import {
|
||||
Platform,
|
||||
StyleSheet,
|
||||
View,
|
||||
TextInput,
|
||||
TouchableOpacity
|
||||
} from "react-native";
|
||||
import { observable } from "mobx";
|
||||
import { observer, inject } from "mobx-react/native";
|
||||
import Text from "react-native-text";
|
||||
import { scale, verticalScale, moderateScale } from "react-native-size-matters";
|
||||
import { Dropdown } from "react-native-material-dropdown";
|
||||
import { Button } from "react-native-elements";
|
||||
import firebase from "react-native-firebase";
|
||||
import Toast, { DURATION } from "react-native-easy-toast";
|
||||
//component
|
||||
import DrawerNavigationHeader from "../../components/Public/drawerNavigationHeader";
|
||||
import theme from "../../config/colors";
|
||||
import { Fonts } from "../../config/fonts";
|
||||
import Size from "../../config/size";
|
||||
import Countdown, { CountdownStatus } from "rn-countdown";
|
||||
// function
|
||||
import { width, height } from "../../config/screen";
|
||||
import AsyncStorageHelper from "../../config/asyncStorageHelper";
|
||||
import Loader from "../../components/Public/loader";
|
||||
|
||||
const asyncStorageHelper = new AsyncStorageHelper();
|
||||
const size = new Size();
|
||||
|
||||
@inject(["menuStore"], ["userStore"])
|
||||
@observer
|
||||
export default class AccountSettings extends Component {
|
||||
@observable pickupPointIndexExist = false;
|
||||
password = "";
|
||||
pickupPoint = [];
|
||||
@observable index = 1;
|
||||
@observable
|
||||
code = 0;
|
||||
@observable
|
||||
password = "";
|
||||
@observable
|
||||
verificationCode = "";
|
||||
static navigationOptions = {
|
||||
drawerLabel: "Account"
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.store = this.props.userStore;
|
||||
this.menuStore = this.props.menuStore;
|
||||
}
|
||||
navigatieAction(page, Param) {
|
||||
this.props.navigation.navigate(page, Param);
|
||||
}
|
||||
checking() {
|
||||
asyncStorageHelper.getData("pickupPointId", pickupPointId => {
|
||||
if (pickupPointId != null) {
|
||||
console.log("index: " + pickupPointId);
|
||||
this.pickupPointIndexExist = true;
|
||||
this.index = this.getIndex(pickupPointId);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
changeIndex(index) {
|
||||
this.tabMap.index = index;
|
||||
}
|
||||
|
||||
positionValue() {
|
||||
if (this.pickupPointIndexExist) {
|
||||
return this.store.pickupPointLabel[this.pickupPointIndex].value;
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
positionChange(id) {
|
||||
asyncStorageHelper.saveData("pickupPointId", id);
|
||||
this.menuStore.getMenuItem();
|
||||
}
|
||||
|
||||
handleNetworkFailed = () => alert("network failed");
|
||||
|
||||
handleStopCountdown = () => this.countdown && this.countdown.stopCountdown();
|
||||
|
||||
handleClickCountdown = () => {
|
||||
var bodyFormData = new FormData();
|
||||
|
||||
bodyFormData.append("country_code", "852");
|
||||
bodyFormData.append(
|
||||
"phone_number",
|
||||
this.store.userData.data.member.mobile.toString()
|
||||
);
|
||||
|
||||
this.store.sendsmsVerify(bodyFormData, this);
|
||||
};
|
||||
|
||||
getIndex(id) {
|
||||
var index = this.store.pickupPointLabel.findIndex(function(item, i) {
|
||||
return item.id == parseInt(id);
|
||||
});
|
||||
return index;
|
||||
}
|
||||
|
||||
startToCountDown = () => {
|
||||
this.countdown && this.countdown.startCountdown();
|
||||
};
|
||||
|
||||
resetPassword() {
|
||||
// this.store.signupPost(api.signup, this.signInData, this);
|
||||
if (this.verificationCode != null || this.verificationCode != "") {
|
||||
if (this.password != null || this.password != "") {
|
||||
if (this.password.length >= 8) {
|
||||
var data = {
|
||||
verificationCode: this.verificationCode,
|
||||
mobile: this.store.userData.data.member.mobile.toString(),
|
||||
countryCode: "852",
|
||||
password: this.password
|
||||
};
|
||||
this.store.forgotPassword(data, this);
|
||||
} else {
|
||||
this.refs.toast.show("your password must be at least 8 characters");
|
||||
}
|
||||
} else {
|
||||
this.refs.toast.show("Please enter reset password");
|
||||
}
|
||||
} else {
|
||||
this.refs.toast.show("Please enter verification number");
|
||||
}
|
||||
}
|
||||
|
||||
countDownButton() {
|
||||
return (
|
||||
<View style={{ flex: 1 }}>
|
||||
<Countdown
|
||||
ref={r => (this.countdown = r)}
|
||||
time={60}
|
||||
onPress={this.handleClickCountdown}
|
||||
onNetworkFailed={this.handleNetworkFailed}
|
||||
onDidFinishCountdown={this.handleCountdownOver}
|
||||
>
|
||||
{({ status, time }) => {
|
||||
let title, containerStyle, titleStyle;
|
||||
switch (status) {
|
||||
case CountdownStatus.Idle:
|
||||
title = "send";
|
||||
containerStyle = styles.countdown;
|
||||
titleStyle = styles.countdownTitle;
|
||||
break;
|
||||
case CountdownStatus.Counting:
|
||||
title = `sent(${time})`;
|
||||
containerStyle = styles.countdown;
|
||||
titleStyle = styles.countdownTitle;
|
||||
break;
|
||||
case CountdownStatus.Over:
|
||||
title = "send";
|
||||
containerStyle = styles.countdown;
|
||||
titleStyle = styles.countdownTitle;
|
||||
break;
|
||||
}
|
||||
return (
|
||||
<View style={containerStyle}>
|
||||
<Text style={titleStyle}>{title}</Text>
|
||||
</View>
|
||||
);
|
||||
}}
|
||||
</Countdown>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this.store.logined) {
|
||||
this.checking();
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Loader loading={this.store.loading} />
|
||||
<View style={{ flex: 1 }}>
|
||||
<View style={styles.TextContainer}>
|
||||
<Text
|
||||
style={styles.TextView}
|
||||
underlineColorAndroid="rgba(0,0,0,0)"
|
||||
>
|
||||
{this.store.userData.data.member.name}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.TextContainer}>
|
||||
<Text style={styles.TextView}>
|
||||
{this.store.userData.data.member.email}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.TextContainer}>
|
||||
<Text style={styles.TextView}>
|
||||
+{this.store.userData.data.member.countryCode}{" "}
|
||||
{this.store.userData.data.member.mobile}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.TextContainer}>
|
||||
<TextInput
|
||||
style={styles.TextView}
|
||||
placeholder={"Reset Password(at least 8 characters)"}
|
||||
secureTextEntry={true}
|
||||
underlineColorAndroid="rgba(0,0,0,0)"
|
||||
value={this.password}
|
||||
onChangeText={value => (this.password = value)}
|
||||
/>
|
||||
</View>
|
||||
<View
|
||||
style={{
|
||||
marginLeft: 20,
|
||||
marginRight: 20,
|
||||
marginTop: 20,
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between"
|
||||
}}
|
||||
>
|
||||
{this.countDownButton()}
|
||||
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: theme.inputBgc,
|
||||
marginLeft: 10,
|
||||
alignSelf: 'stretch',
|
||||
justifyContent: "center",
|
||||
height: verticalScale(40),
|
||||
borderRadius: 5,
|
||||
flex: 1
|
||||
}}
|
||||
>
|
||||
<TextInput
|
||||
style={{
|
||||
// backgroundColor:theme.inputBgc,
|
||||
color: theme.foodNameColor,
|
||||
fontSize: size.getSize(12),
|
||||
paddingRight: 30,
|
||||
paddingLeft: 40,
|
||||
fontFamily: Fonts.century,
|
||||
paddingVertical: 0,
|
||||
alignSelf: 'stretch'
|
||||
}}
|
||||
underlineColorAndroid="rgba(0,0,0,0)"
|
||||
placeholder="verification no."
|
||||
keyboardType={"numeric"}
|
||||
placeholderStyle={{
|
||||
fontWeight: "bold",
|
||||
fontFamily: Fonts.century,
|
||||
fontSize: size.getSize(10),
|
||||
paddingVertical: 0
|
||||
}}
|
||||
value={this.verificationCode}
|
||||
onChangeText={text => (this.verificationCode = text)}
|
||||
placeholderTextColor={theme.foodNameColor}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<Button
|
||||
title="Reset"
|
||||
fontWeight="bold"
|
||||
fontSize={size.getSize(18)}
|
||||
fontFamily={Fonts.century}
|
||||
titleStyle={{
|
||||
color: "white",
|
||||
fontFamily: Fonts.century,
|
||||
fontWeight: "bold",
|
||||
fontSize: 50
|
||||
}}
|
||||
onPress={() => this.resetPassword()}
|
||||
// loading={false}
|
||||
loadingProps={{ size: "large", color: "rgba(111, 202, 186, 1)" }}
|
||||
buttonStyle={styles.signupButton}
|
||||
/>
|
||||
<Toast ref="toast" position={"center"} />
|
||||
</View>
|
||||
);
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
alignItems: "center",
|
||||
backgroundColor: "white",
|
||||
width: width
|
||||
},
|
||||
welcome: {
|
||||
fontSize: 20,
|
||||
textAlign: "center",
|
||||
margin: 10
|
||||
},
|
||||
instructions: {
|
||||
textAlign: "center",
|
||||
color: "#333333",
|
||||
marginBottom: 5
|
||||
},
|
||||
TextView: {
|
||||
color: theme.coolGrey,
|
||||
fontSize: size.getSize(15),
|
||||
paddingRight: 20,
|
||||
paddingLeft: 20,
|
||||
fontWeight: "bold",
|
||||
fontFamily: Fonts.century
|
||||
},
|
||||
TextContainer: {
|
||||
backgroundColor: theme.inputBgc,
|
||||
marginTop: 20,
|
||||
marginLeft: 20,
|
||||
marginRight: 20,
|
||||
width: width - 40,
|
||||
height: verticalScale(40),
|
||||
borderRadius: 5,
|
||||
justifyContent: "center"
|
||||
},
|
||||
signupButton: {
|
||||
width: width,
|
||||
height: verticalScale(60),
|
||||
backgroundColor: theme.mainColor
|
||||
},
|
||||
countdown: {
|
||||
borderRadius: 5,
|
||||
borderWidth: 2,
|
||||
borderColor: theme.coolGrey,
|
||||
height: verticalScale(40),
|
||||
justifyContent: "center",
|
||||
alignItems: "center"
|
||||
},
|
||||
countdownTitle: {
|
||||
color: theme.coolGrey,
|
||||
fontSize: 12
|
||||
}
|
||||
});
|
||||
177
app/containers/Account/addCard.js
Executable file
177
app/containers/Account/addCard.js
Executable file
@@ -0,0 +1,177 @@
|
||||
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"
|
||||
}
|
||||
});
|
||||
374
app/containers/Account/payment.js
Executable file
374
app/containers/Account/payment.js
Executable file
@@ -0,0 +1,374 @@
|
||||
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"
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user