Hangry/app/containers/Account/payment.js

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"
  }
});