ChargEco/Strides-SPAPP/app/pages/wallet/Topup.js

/**
 * 钱包充值页面
 * @邠心vbe on 2021/05/08
 */
import React, { Component } from 'react';
import { View, Text, ScrollView, StyleSheet, Switch } from 'react-native';
import apiWallet from '../../api/apiWallet';
import Button from '../../components/Button';
import Dialog from '../../components/Dialog';
import { PageList } from '../Router';
import { Balance } from './Payment';
import PaythodList from './PaythodList';

export default class Topup extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isAuto: false,
      topupList: [],
      selectIndex: 0,
      payType: {},
      balance: 0,
    };
  }

  componentDidMount() {
    this.props.navigation.addListener('focus', () => {
      getUserInfo(info => {
        this.setState({
          balance: info.credit
        })
      }, true);
    });
    this.getTopupList();
  }

  getTopupList() {
    Dialog.showProgressDialog();
    apiWallet.getTopUpAmountList().then(res => {
      Dialog.dismissLoading();
      if (res.data.length > 0) {
        this.setState({
          topupList: res.data
        });
      }
    }).catch(err => {
      Dialog.dismissLoading();
    })
  }

  topup2() {
    const params = {
      payAmount: this.state.topupList[this.state.selectIndex]?.key,
    }
    apiWallet.doPaymentV2(params).then(res => {
      Dialog.dismissLoading();
      if (res.data.webPaymentUrl) {
        startPage(PageList.paymentWeb, { amount: params.payAmount, url: res.data.webPaymentUrl, type: 'Topup' });
      } else {
        toastShort('Error 0')
      }
    }).catch(err => {
      Dialog.dismissLoading();
      toastShort(err);
    });
  }

  topup() {
    const params = {
      payAmount: this.state.topupList[this.state.selectIndex]?.key,
      fomoPayType: this.state.payType.fomoPayType
    }
    console.log('params',params);
    if (params.payAmount) {
      if (params.fomoPayType == 'PAYNOW' || params.fomoPayType == 'GRABPAY') {
        //PAYNOW支付
        Dialog.showProgressDialog();
        apiWallet.doPayment(params).then(res => {
          Dialog.dismissLoading();
          if (res.data.fomoId && res.data.qrCodeInBase64) {
            startPage(PageList.paynow, { amount: params.payAmount, base64: res.data.qrCodeInBase64 });
          } else if (res.data.url) {
            startPage(PageList.paymentWeb, { amount: params.payAmount, url: res.data.url, type: 'Topup' });
          } else {
            toastShort('Error 0')
          }
        }).catch(err => {
          Dialog.dismissLoading();
          toastShort(err);
        });
      } else {
        //信用卡支付
        startPage(PageList.formCard, { amount: params.payAmount, payType: params.fomoPayType });
      }
    } else {
      toastShort('Error 1')
    }
  }

  render() {
    return (
      <ScrollView style={styles.container}>
        <View style={styles.headerView}>
          <Balance balance={this.state.balance}/>
        </View>
        <View style={styles.contentView}>
          <View style={styles.topupView}>
            <WalletTitle>Top Up</WalletTitle>
            <Text style={styles.subTitle}>Choose Top Up Value: </Text>
            <View style={styles.topupItems}>
              { this.state.topupList.map((item, index) => {
                  return (
                    <Text
                      key={index}
                      style={[
                        styles.topupItem,
                        index > 0 && styles.right,
                        index == this.state.selectIndex && styles.selected]}
                      onPress={() => {
                        this.setState({
                          selectIndex: index
                        })
                      }}
                    >{currency}{item.key}</Text>
                  );
                })
              }
            </View>
          </View>
          <View style={styles.topupView}>
            <WalletTitle>Payment</WalletTitle>
            <Text style={styles.subTitle}>Pay with: </Text>
            <PaythodList
              onChange={type => {
                this.setState({
                  payType: type
                });
              }}/>
          </View>
          {/* <View style={ui.flexc}>
            <Text
              style={styles.autoView}
              onPress={() => {
                this.setState({
                  isAuto: !this.state.isAuto
                });
              }}>Automatically top up S$20 when wallet balance is below S$5</Text>
            <Switch
              value={this.state.isAuto}
              trackColor={isIOS ? { false: "#B2B2B2", true: colorAccent } : null}
              onValueChange={v => {
                this.setState({
                  isAuto: v
                });
              }}/>
          </View> */}
        </View>
        <View style={styles.buttonView}>
          <Button
            text='TOP UP'
            elevation={1.5}
            onClick={() => {
              //startPage(PageList.paycard)
              this.topup();
            }}/>
        </View>
      </ScrollView>
    );
  }
}

export const WalletTitle = ({children}) => {
  return (
    <View style={styles.topupTitle}>
      <Text style={styles.titleLeft}></Text>
      <Text style={styles.titleText}>{children}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5F5F5'
  },
  headerView: {
    paddingBottom: 76,
    //backgroundColor: colorAccent
  },
  contentView: {
    padding: 16,
    marginTop: -88
  },
  topupView: {
    padding: 16,
    borderRadius: 10,
    marginBottom: 16,
    backgroundColor: colorLight
  },
  topupTitle: {
    alignItems: 'center',
    flexDirection: 'row'
  },
  titleLeft: {
    width: 4,
    height: 15,
    borderRadius: 16,
    backgroundColor: colorPrimary
  },
  titleText: {
    color: textPrimary,
    fontSize: 16,
    paddingLeft: 10
  },
  subTitle: {
    color: textPrimary,
    fontSize: 14,
    marginTop: 16,
    marginBottom: 16
  },
  topupItems: {
    paddingBottom: 16,
    alignItems: 'center',
    flexDirection: 'row'
  },
  topupItem: {
    flex: 1,
    height: 60,
    lineHeight: 60,
    color: '#666',
    fontSize: 24,
    borderWidth: 1,
    borderRadius: 4,
    borderColor: '#999',
    textAlign: 'center'
  },
  right: {
    marginLeft: 20
  },
  selected: {
    color: textLight,
    borderColor: colorDark,
    backgroundColor: colorPrimary
  },
  autoView: {
    flex: 1,
    color: textPrimary,
    fontSize: 14,
    paddingRight: 32
  },
  buttonView: {
    padding: 16,
    marginTop: 0,
    marginBottom: 16
  }
})

export const TopupStyle = styles;