ChargEco/Strides-APP/app/pages/payment/FormCard.js

/**
 * 输入信用卡信息页面
 * @邠心vbe on 2021/06/09
 */
import React, { Component } from 'react';
import { View, Text, StyleSheet, TextInput, Linking, ScrollView, KeyboardAvoidingView } from 'react-native';
import Button from '../../components/Button';
import apiWallet from '../../api/apiWallet';
import Dialog from '../../components/Dialog';
import { PageList } from '../Router';
 
export default class FormCard extends Component {
  constructor(props) {
    super(props);
    this.state = {
      amount: 0,
      payType: '',
      payUrl: 'http://www.taobao.com',
      validTill: '',
      isUrlPage: false
    };
    this.form = {}
  }

  componentDidMount() {
    if (this.props.route.params.amount) {
      this.setState({
        amount: this.props.route.params.amount,
        payType: this.props.route.params.payType
      });
    }
  }

  validate() {
    if (!this.form.nameOnCard) {
      toastShort('Please type name on card');
      return;
    }
    if (!this.form.cardNumber) {
      toastShort('Please type card number');
      return;
    }
    if (!/^\d{9,}$/.test(this.form.cardNumber)) {
      toastShort('Please type a correct card number');
      return;
    }
    if (!this.state.validTill) {
      toastShort('Please type valid till');
      return;
    }
    if (!/^(0[1-9]|1[0-2])\/(2[1-9]|[3-5][0-9])/.test(this.state.validTill)) {
      toastShort('Please type a correct valid till');
      return;
    }
    if (!this.form.cardCvv) {
      toastShort('Please type CVV');
      return;
    }
    if (!/^\d{3}$/.test(this.form.cardCvv)) {
      toastShort('Please type a correct CVV');
      return;
    }
    const params = this.form;
    params.validTill = this.state.validTill;
    this.topup(params);
  }

  topup(params) {
    const topup = {
      payAmount: this.state.amount,
      fomoPayType: this.state.payType,
      userCard: params
    }
    Dialog.showProgressDialog();
    apiWallet.doPayment(topup).then(res => {
      Dialog.dismissLoading();
      if (res.data.fomoId && res.data.url) {
        startPage(PageList.paycard, { url: res.data.url })
      }
    }).catch(err => {
      Dialog.dismissLoading();
      toastShort(err);
    });
  }

  render() {
    return (
      this.state.isUrlPage
      ? <View style={styles.container}>
          <View style={[ui.flex3, ui.flexvc]}>
            <Text style={styles.payAmount}>
              <Text style={styles.currency}>{currency+' '}</Text>
              {this.state.amount}
            </Text>
            <Text style={styles.amountTitle}>Top up</Text>
            <View style={styles.buttonGroup}>
              <Button
                style={styles.button2}
                text='Open in Browser'
                elevation={1.5}
                onClick={() => {
                  this.openBrowser();
                }}/>
              <View style={styles.button}>
                <Button
                  text='Payment Completed'
                  elevation={1.5}
                  onClick={() => {
                    goBack();
                  }}/>
              </View>
            </View>
          </View>
          <Text style={ui.flex1}></Text>
        </View>
      : <KeyboardAvoidingView style={styles.container}>
          <View style={styles.formView}>
            <Text style={styles.label}>Name on Card</Text>
            <TextInput
              style={styles.cardNameInput}
              placeholder={'Your name on card'}
              placeholderTextColor={textPlacehoder}
              maxLength={50}
              onChangeText={text => this.form.nameOnCard = text}/>
          </View>
          <View style={styles.formView}>
            <Text style={styles.label}>Card Number</Text>
            <View style={styles.cardNumberRow}>
              <FontAwesome
                name='credit-card'
                size={24}
                color={colorPrimary}/>
              <Text style={styles.leftLine}/>
              <TextInput
                style={styles.cardNumber}
                placeholder='Card Number'
                placeholderTextColor={textPlacehoder}
                maxLength={25}
                keyboardType={'numeric'}
                onChangeText={text => {
                  this.form.cardNumber = text;
                }}/>
            </View>
          </View>
          <View style={styles.formRow}>
            <View style={styles.formColumn}>
              <Text style={styles.label}>Valid Till</Text>
              <TipInput
                placeholder='MM/YY'
                maxLength={5}
                keyboardType={'numeric'}
                value={this.state.validTill}
                onChangeText={text => {
                  if (this.state.validTill.length == 2 && text.length == 3) {
                    if (text.indexOf('/') == -1) {
                      let s = this.state.validTill + '/' + text.substring(2)
                      this.setState({
                        validTill: s
                      });
                    } else {
                      this.setState({
                        validTill: text
                      });
                    }
                  } else {
                    this.setState({
                      validTill: text
                    });
                  }
                }}/>
            </View>
            <View style={styles.formColumn}>
              <Text style={styles.label}>CVV</Text>
              <TipInput
                placeholder='CVV'
                maxLength={6}
                secureTextEntry={true}
                keyboardType={'numeric'}
                onChangeText={text => {
                  this.form.cardCvv = text;
                }}/>
            </View>
          </View>
          {/* <Text style={styles.tipsText}>Your card may be charged to make sure it’s vailid.That amount will be automatically refunded.</Text>
          <Text style={styles.tipsText}>By adding a card,you have read and agree to our terms and conditions.</Text> */}
          <Text style={ui.flex1}></Text>
          <View style={styles.buttonView}>
            <Button
              text='Confirm'
              elevation={1.5}
              onClick={() => {
                this.validate();
              }}/>
          </View>
        </KeyboardAvoidingView>
      );
  }
}
 
const TipInput = ({onChangeText, maxLength, placeholder, keyboardType, secureTextEntry = false, value}) => {
  return (
    <View style={styles.cardInputView}>
      <TextInput
        style={styles.cardInput}
        placeholder={placeholder}
        placeholderTextColor={textPlacehoder}
        maxLength={maxLength}
        secureTextEntry={secureTextEntry}
        keyboardType={keyboardType}
        onChangeText={onChangeText}
        value={value}/>
      <MaterialIcons
        name='info-outline'
        color='#999'
        size={16}/>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    width: $vw(100),
    flex: 1,
    backgroundColor: 'white'
  },
  formView: {
    paddingTop: 16,
    paddingLeft: 16,
    paddingRight: 16,
    paddingBottom: 4
  },
  formRow: {
    paddingTop: 12,
    paddingLeft: 8,
    paddingRight: 8,
    paddingBottom: 8,
    alignItems: 'center',
    flexDirection: 'row'
  },
  formColumn: {
    flex: 1,
    paddingLeft: 8,
    paddingRight: 8
  },
  label: {
    color: '#333',
    fontSize: 14
  },
  leftLine: {
    width: 1,
    height: 20,
    marginLeft: 16,
    backgroundColor: colorAccent
  },
  cardNumberRow: {
    paddingTop: 8,
    alignItems: 'center',
    flexDirection: 'row',
  },
  cardNumber: {
    flex: 1,
    color: '#333',
    fontSize: 16,
    paddingLeft: 8,
  },
  cardNameInput: {
    color: '#333',
    fontSize: 14,
    lineHeight: 16,
    paddingTop: 4,
    paddingLeft: 0,
    paddingBottom: 4,
    borderBottomColor: '#EEE',
    borderBottomWidth: 1
  },
  cardInputView: {
    paddingTop: 12,
    paddingLeft: 2,
    paddingRight: 2,
    paddingBottom: 0,
    alignItems: 'center',
    flexDirection: 'row',
    borderBottomColor: '#EEE',
    borderBottomWidth: 1
  },
  cardInput: {
    flex: 1,
    ...$padding(4, 0),
    color: '#333',
    fontSize: 14,
  },
  countryRow: {
    paddingTop: 8,
    paddingBottom: 4,
    alignItems: 'flex-end',
    flexDirection: 'row',
    borderBottomWidth: 1,
    borderBottomColor: '#EEE'
  },
  countryPicker: {
    flex: 1,
    color: '#333',
    fontSize: 14,
    paddingTop: 4,
    paddingLeft: 16
  },
  changeText: {
    right: 0,
    bottom: 0,
    padding: 10,
    color: '#12A5F9',
    fontSize: 12,
    position: 'absolute',
    backgroundColor: 'white',
  },
  switchRow: {
    padding: 16,
    alignItems: 'center',
    flexDirection: 'row',
  },
  tipsText: {
    color: '#333',
    fontSize: 12,
    padding: 16,
  },
  buttonView: {
    padding: 16,
    marginBottom: 16
  },
  payAmount: {
    color: colorAccent,
    fontSize: 50,
    paddingRight: 10
  },
  currency: {
    fontSize: 25
  },
  amountTitle: {
    color: '#555',
    fontSize: 12
  },
  buttonGroup: {
    width: $vw(70),
    paddingTop: 60
  },
  button: {
    margin: 16,
    paddingBottom: 16
  },
  button2: {
    marginLeft: 16,
    marginRight: 16,
    borderColor: '#DDD',
    borderWidth: 1,
    backgroundColor: '#fff'
  }
})