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

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

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: 50,
                height: 14
              }}
              resizeMode={'contain'}
              source={require('../../images/tool-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) {
            toTopupPage()
          } else {
            //goBack();
          }
        }
      }/>
    </View>
  );
}

export default Payment;

export const Balance = ({balance=0, balanceText, action, page=PageList.wallet}) => {
  return (
    <Pressable
      style={styles.balanceView}
      onPress={() => startPage(page)}>
      <Image
        style={styles.balanceIcon}
        source={require('../../images/user/card-wallet.png')}/>
      <TextView style={styles.balanceTitle}>{$t('wallet.creditWalletLabel')}</TextView>
      { balanceText
      ? <TextView style={styles.balanceValue} numberOfLines={1}>{balanceText}</TextView>
      : <TextView style={styles.balanceValue} numberOfLines={1}>{getBalance(utils.isNotEmpty(balance) ? balance : userInfo.credit)}</TextView>
      }
      <Text style={ui.flex1}></Text>
      <TextView style={styles.actionText} numberOfLines={1} ellipsizeMode="middle">{action ?? $t('wallet.viewHistory')}</TextView>
      { utils.isNotEmpty(page) &&
        <MaterialIcons
          size={20}
          color={textCancel}
          name='chevron-right'/>
      }
    </Pressable>
  );
}

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

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