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

/**
 * 新版钱包充值页面
 * @邠心vbe on 2023/02/02
 */
import React, { Component } from 'react';
import { View, Text, StyleSheet, ScrollView, AppState, Linking } from 'react-native';
import apiWallet from '../../api/apiWallet';
import BadgeSelectItem from '../../components/BadgeSelectItem';
import Button, { ElevationObject } from '../../components/Button';
import Dialog from '../../components/Dialog';
import TextView from '../../components/TextView';
import { PaymentDefault } from '../payment/PaymentConfig';
import { PageList } from '../Router';
import { Balance } from './Payment';
import TopupPaythod from './TopupPaythod';
import app from '../../../app.json';
import utils from '../../utils/utils';
import CheckBox from '../../components/CheckBox';
import VbeSkeleton from '../../components/VbeSkeleton';

export default class TopupNew extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true,
      isAuto: false,
      topupList: [],
      selectIndex: 0,
      payType: {},
      balance: 0,
      agree: false,
      isCallback: true
    };
    //this.stateListener;
  }

  componentDidMount() {
    this.props.navigation.addListener('focus', () => {
      getUserInfo(info => {
        this.setState({
          balance: info?.creditStr
        }, () => {
          this.getTopupList();
        })
      }, true);
    });
    /*this.stateListener = AppState.addEventListener("change", state => {
      if (state == 'active' && this.state.isCallback) {
        this.setState({
          agree: true,
          isCallback: false
        })
      }
    });*/
  }

  componentWillUnmount() {
    /*if (this.stateListener) {
      this.stateListener?.remove();
    }*/
  }

  getTopupList() {
    // apiWallet.getTopUpAmountList()
    apiWallet.getTopUpAmountListV2().then(res => {
      Dialog.dismissLoading();
      if (res.data.length > 0) {
        this.setState({
          topupList: res.data
        });
      }
    }).catch(err => {
      toastShort(err)
      const data = apiWallet.getTempAmountListV2();
      this.setState({
        topupList: data
      });
    }).finally(() => {
      this.setState({
        loading: false
      });
    })
  }

  /**
   * 2C2P充值
   */
  topup2() {
    const topup = this.state.topupList[this.state.selectIndex]
    const params = {
      currency: topup?.currency,
      payAmount: topup?.amount
    }
    if (this.state.payType?.fomoPayType) {
      params.payTypeSelection = this.state.payType.fomoPayType
    }
    Dialog.showProgressDialog();
    //console.log('充值请求参数', params);
    apiWallet.doPaymentV2(params).then(res => {
      Dialog.dismissLoading();
      if (app.charge.anzPayment) {
        if (res.data.qr) {
          startPage(PageList.paynow, { info: res.data.qr, type: 'Topup' });
        } else if (res.data.webPaymentUrl) {
          startPage(PageList.paymentWeb, { amount: params.payAmount, url: res.data.webPaymentUrl, type: 'Topup' });
        } else {
          toastShort('Error 01')
        }
      } else {
        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);
    });
  }

  /**
   * FOMO充值
   */
  topup() {
    const topup = this.state.topupList[this.state.selectIndex]
    const params = {
      currency: topup?.currency,
      payAmount: topup?.amount,
      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')
    }
  }

  changeAgree(ag) {
    this.setState({
      agree: ag
    });
  }

  toPolicy() {
    Linking.openURL(app.storeUrl.refundUrl);
  }

  render() {
    if (this.state.loading) {
      return (
        <View style={styles.container}>
          <View style={styles.loadingItem}>
            <VbeSkeleton
              style={ui.flex1}
              layout={[
                {width: '100%', height: 56, borderRadius: 10},
                {width: '40%', height: 18, marginTop: 32},
                {width: '100%', height: 56, borderRadius: 10, marginTop: 16},
                {width: '100%', height: 56, borderRadius: 10, marginTop: 16},
                {width: '100%', height: 56, borderRadius: 10, marginTop: 16},
                {width: '40%', height: 18, marginTop: 32},
                {width: '100%', height: 56, borderRadius: 10, marginTop: 16},
                {width: '100%', height: 56, borderRadius: 10, marginTop: 16}
              ]}
              animationDirection={"horizontalRight"}
            />
          </View>
        </View>
      )
    }
    return (
      <View style={styles.container}>
        <ScrollView style={ui.flex1}>
          <View style={styles.headerView}>
            <Balance action={" "} balanceText={this.state.balance} page={""}/>
          </View>
          <View style={styles.contentView}>
            <View style={styles.topupView}>
              <WalletTitle>{$t('wallet.titleChooseCreditValue')}</WalletTitle>
              { app.modules.nationally
              ? <View style={styles.topupItems2}>
                  { this.state.topupList.map((item, index) => {
                      return (
                        <BadgeSelectItem
                          key={index}
                          style={[styles.topupItem2]}
                          checked={index == this.state.selectIndex}
                          onPress={() => {
                            this.setState({
                              selectIndex: index
                            })
                          }}>
                          <Text style={[styles.topupText, index == this.state.selectIndex && {color: colorAccent}]}>
                            <Text style={{fontSize: 16}}>{item.currencySymbol} </Text>
                            {item.amount}
                            {/* <Text style={{fontSize: 16}}> {item.currency}</Text> */}
                          </Text>
                        </BadgeSelectItem>
                      );
                    })
                  }
                </View>
              : <View style={styles.topupItems}>
                  { this.state.topupList.map((item, index) => {
                      return (
                        <BadgeSelectItem
                          key={index}
                          style={[styles.topupItem, index > 0 && styles.right]}
                          checked={index == this.state.selectIndex}
                          onPress={() => {
                            this.setState({
                              selectIndex: index
                            })
                          }}>
                          <Text style={[styles.topupText, index == this.state.selectIndex && {color: colorAccent}]}>
                            <Text style={{fontSize: 16}}>{item.currencySymbol} </Text>
                            {item.amount}
                            {/* <Text style={{fontSize: 16}}> {item.currency}</Text> */}
                          </Text>
                        </BadgeSelectItem>
                      );
                    })
                  }
                </View>
              }
            </View>
            { (!PaymentDefault.is2c2p || app.modules.topup_payment_type) &&
              <View style={styles.topupView}>
                <WalletTitle>{$t('wallet.titleChoosePaymentType')}</WalletTitle>
                <TopupPaythod
                  onChange={type => {
                    this.setState({
                      payType: type
                    });
                  }}/>
              </View>
            }
          </View>
        </ScrollView>
        <View style={styles.buttonView}>
          { utils.isNotEmpty(app.storeUrl.refundUrl) &&
            <View style={styles.agreeView}>
              <CheckBox
                value={this.state.agree}
                onTintColor={colorAccent}
                onCheckColor={colorAccent}
                onValueChange={v => this.changeAgree(v)}
              />
              <View style={styles.agreeTextRow}>
                <TextView style={styles.agreeText} onPress={() => this.changeAgree(!this.state.agree)}>
                  {$t('sign.iHaveReadAndAgree')}
                </TextView>
                <TextView style={styles.agreeLink} onPress={() => this.toPolicy()}>Refund Policy</TextView>
              </View>
            </View>
          }
          <Button
            text={$t('wallet.btnPurchase')}
            elevation={1.5}
            disabled={!this.state.agree}
            onClick={() => {
              PaymentDefault.is2c2p 
              ? this.topup2()
              : this.topup()
            }}/>
        </View>
      </View>
    );
  }
}

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: pageBackground
  },
  headerView: {
    paddingBottom: 76,
    //backgroundColor: colorAccent
  },
  contentView: {
    padding: 16,
    marginTop: -88
  },
  topupView: {
    marginBottom: 16
  },
  topupViewOld: {
    padding: 16,
    borderRadius: 10,
    marginBottom: 16,
    backgroundColor: colorLight
  },
  topupTitle: {
    marginBottom: 16,
    alignItems: 'center',
    flexDirection: 'row'
  },
  titleLeft: {
    width: 4,
    height: 15,
    borderRadius: 16,
    backgroundColor: colorPrimary
  },
  titleText: {
    color: textPrimary,
    fontSize: 16,
    paddingLeft: 0,
    fontWeight: 'bold',
    textShadowOffset: {
      width: 0,
      height: 1
    },
    textShadowRadius: 4,
    textShadowColor: "rgba(0, 0, 0, 0.25)",
  },
  subTitle: {
    color: textPrimary,
    fontSize: 14,
    marginTop: 16,
    marginBottom: 16
  },
  topupItems: {
    paddingBottom: 16,
    alignItems: 'center',
    flexDirection: 'row'
  },
  topupItems2: {
    paddingBottom: 16,
    alignItems: 'center'
  },
  topupItem: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: colorLight,
    ...ElevationObject(5)
  },
  topupItem2: {
    width: "100%",
    marginBottom: 16,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: colorLight,
    ...ElevationObject(5)
  },
  topupText: {
    fontSize: 18,
    color: textPrimary,
    fontWeight: 'bold',
    ...$padding(20, 0)
  },
  right: {
    marginLeft: 16
  },
  selected: {
    color: textLight,
    borderColor: colorDark,
    backgroundColor: colorPrimary
  },
  autoView: {
    flex: 1,
    color: textPrimary,
    fontSize: 14,
    paddingRight: 32
  },
  buttonView: {
    padding: 16,
    marginTop: 2,
    marginBottom: 16
  },
  agreeView: {
    marginBottom: 16,
    alignItems: 'center',
    flexDirection: 'row'
  },
  agreeTextRow: {
    flex: 1,
    flexWrap: 'wrap',
    flexDirection: 'row'
  },
  agreeText: {
    color: textPrimary,
    fontSize: 14,
    paddingTop: 4,
    paddingBottom: 4
  },
  agreeLink: {
    ...ui.link,
    fontSize: 14,
    paddingTop: 4,
    paddingBottom: 4,
    textDecorationLine: 'underline'
  },
  loadingItem: {
    padding: 16,
    flexDirection: 'row'
  }
})