ChargEco/Strides-APP/app/pages/wallet/Payment.js

/**
 * 支付组件
 * @邠心vbe on 2021/04/23
 */
import React, { useEffect, useState } from 'react';
import { View, Text, StyleSheet, Image } from 'react-native';
import Button from '../../components/Button';
import utils from '../../utils/utils';
import { LowCreditDialog } from '../charge/InfoDialog';
import { PageList } from '../Router';

/**
 * @is2c2p 控制是否启用2C2P
 * @DEFAULT 控制默认的支付方式
 */
export const PaymentDefault = {
  is2c2p: false,
  DEFAULT: {
    payType: "CreditWallet",
    payName: "Credit Wallet",
    isWallet: true,
    isPayPerUse: false
  },
  DEFAULT2: {
    payType: "PayPerUse",
    payName: "Pay Per Use (SGQR)",
    isWallet: false,
    isPayPerUse: true
  }
}

export const PAYTYPE = {
  CREDIT_WALLET: "CreditWallet", // 钱包余额支付
  PAY_PER_USE: "PayPerUse" // 按次支付
}

const Payment = ({
    topup, balance,
    payType = PaymentDefault.DEFAULT.payName,
    isWallet = PaymentDefault.DEFAULT.isWallet,
    isPayPerUse = PaymentDefault.DEFAULT.isPayPerUse,
    canShowLowCreditDialog = false,
    onMethodChange,
    refreshId = 0
  }) => {
  const [visible, showDialog] = useState(false)
  useEffect(() => {
    if (balance == undefined && canShowLowCreditDialog) {
      if (userInfo.credit <= 5 && refreshId > 0) {
        showDialog(true)
      }
    }
  }, [refreshId]);
  return (
    <View style={styles.paymentView}>
      <Image 
        style={styles.walletIcon}
        source={require('../../images/charge/ic-payment.png')}
      />
      { isWallet || isPayPerUse
        ? <View style={{paddingLeft: 16}}>
            <Image
              style={{
                width: 51,
                height: 16
              }}
              source={require('../../images/app-logo.png')}/>
            <Text
              style={styles.rateText}
              numberOfLines={1}
              ellipsizeMode={'clip'}>{payType}</Text>
          </View>
        : <View style={{paddingLeft: 16}}>
            <Text style={styles.creditText}>Visa/Mastercard</Text>
            <Text style={styles.creditText}>Credit/Debit Card</Text>
          </View>
      }
      <Text
        style={styles.balance}
        numberOfLines={1}
        suppressHighlighting={true}>
        {isWallet ? currency + (balance ?? userInfo.credit) : ''}
      </Text>
      { topup
        ? <Button
            style={styles.topupView}
            text="+ Top Up"
            textStyle={styles.topupText}
            viewStyle={styles.infoStatus}
            onClick={topup}/>
        : <Button
            style={styles.topupView}
            text="Selected"
            textStyle={styles.topupText}
            viewStyle={styles.infoStatus}
            onClick={() => {if (onMethodChange) onMethodChange()}}/>
      }
      <LowCreditDialog
        visible={visible}
        onClose={topup => {
          showDialog(false)
          if (topup) {
            startPage(PageList.topup)
          } else {
            //goBack();
          }
        }
      }/>
    </View>
  );
}

export default Payment;

export const Balance = ({balance}) => {
  return (
    <View style={styles.balanceView}>
      <Image
        style={styles.balanceIcon}
        source={require('../../images/icon/draw-wallet.png')}/>
      <Text style={styles.balanceTitle}>Credit Wallet</Text>
      <Text style={styles.balanceValue}>{currency}{getBalance(utils.isNotEmpty(balance) ? balance : userInfo.credit)}</Text>
    </View>
  );
}

const getBalance = (balance) => {
  console.log('getBalance', balance, userInfo);
  return balance ? balance.toFixed(2) : '0.0'
}

export const toTopupPage = () => {
  if (PaymentDefault.is2c2p) {
    startPage(PageList.topupV2);
  } else {
    startPage(PageList.topup);
  }
}

const styles = StyleSheet.create({
  paymentView: {
    borderRadius: 8,
    paddingTop: 12,
    paddingLeft: 16,
    paddingRight: 16,
    paddingBottom: 12,
    alignItems: 'center',
    flexDirection: 'row',
    backgroundColor: '#F5F5F5',
    justifyContent: 'space-between'
  },
  walletIcon: {
    width: 36,
    height: 36
  },
  creditText: {
    color: '#333',
    fontSize: 14,
  },
  rateText: {
    color: '#333',
    fontSize: 14,
  },
  balance: {
    flex: 1,
    color: '#333',
    fontSize: 16,
    textAlign: 'right',
    fontWeight: 'bold',
    paddingRight: 24,
    
  },
  balanceIcon: {
    width: 30,
    height: 30
  },
  balanceTitle: {
    flex: 1,
    color: '#000',
    fontSize: 16,
    paddingLeft: 12
  },
  balanceValue: {
    color: '#000',
    fontSize: 18,
    paddingRight: 6
  },
  infoStatus: {
    paddingTop: 4,
    paddingLeft: 10,
    paddingRight: 10,
    paddingBottom: 4,
    borderRadius: 4
  },
  selected: {
    color: colorAccent,
    backgroundColor: '#333'
  },
  topupView: {
    borderRadius: 4,
    backgroundColor: '#333'
  },
  topupText: {
    color: colorAccent,
    fontSize: 12,
    fontWeight: 'normal'
  },
  balanceView: {
    padding: 16,
    alignItems: 'center',
    flexDirection: 'row'
  }
});