ChargEco/Strides-APP/app/pages/wallets/ViewWallet.js

/**
 * 钱包卡片组件
 * @邠心vbe on 2025/01/17
 */
import React from 'react';
import { Pressable, StyleSheet } from 'react-native';
import { View } from 'react-native';
import { ElevationObject } from '../../components/Button';
import TextView from '../../components/TextView';
import utils from '../../utils/utils';
import { toTopupPage } from '../payment/PaymentConfig';

const ViewWallet = ({
  wallet,
  setDefault
}) => (
  <View style={styles.cardWallet}>
    <View style={ui.flex}>
      <TextView style={styles.walletName} numberOfLines={1}>{wallet.walletTypeName}</TextView>
      { wallet.defaultPaymentMethod
      ? <View style={styles.defaultView}>
          <MaterialCommunityIcons
            name="credit-card-check-outline"
            size={18}
            color={textButton}/>
          <TextView style={styles.defaultText}>Default</TextView>
        </View>
      : <Pressable
          style={styles.setDefaultView}
          onPress={setDefault}>
          <MaterialCommunityIcons
            name="credit-card-edit-outline"
            size={18}
            color={textButton}/>
          <TextView style={styles.defaultText}>Set Default</TextView>
        </Pressable>
      }
    </View>
    <TextView style={styles.walletProvider}>{wallet.walletPrincipalName}</TextView>
    <TextView style={styles.walletLabel}>Current Balance:</TextView>
    <TextView style={styles.walletBalance}>{wallet.currentBalance}</TextView>
    { utils.isNotEmpty(wallet.expiresDate) &&
      <TextView style={styles.walletLabel}>Expires {wallet.expiresDate}</TextView>
    }
    { wallet.walletTypeCode == "credit_wallet" &&
      <View style={styles.topupView}>
        <Pressable
          style={styles.setDefaultView}
          onPress={() => toTopupPage()}>
          <MaterialCommunityIcons
            name="credit-card-plus-outline"
            size={18}
            color={textButton}/>
          <TextView style={styles.defaultText}>{$t("wallet.topUp")}</TextView>
        </Pressable>
      </View>
    }
  </View>
);

export default ViewWallet;

const styles = StyleSheet.create({
  cardWallet: {
    height: 194,
    margin: 16,
    padding: 16,
    borderRadius: 16,
    ...ElevationObject(2),
    backgroundColor: colorAccent
  },
  walletName: {
    flex: 1,
    color: textLight,
    fontSize: 22,
    fontWeight: 'bold',
    paddingRight: 16
  },
  walletProvider: {
    color: textLight,
    fontSize: 18,
  },
  walletLabel: {
    color: textLight,
    opacity: .9,
    fontSize: 13,
    paddingTop: 16
  },
  walletBalance: {
    color: textLight,
    fontSize: 20,
    paddingTop: 4,
    fontWeight: 'bold'
  },
  setDefaultView: {
    height: 28,
    ...$padding(4, 12),
    borderRadius: 16,
    alignItems: 'center',
    flexDirection: 'row',
    ...ElevationObject(2),
    backgroundColor: 'rgba(0,0,0,.9)'
  },
  defaultView: {
    height: 28,
    ...$padding(4, 12),
    borderRadius: 16,
    alignItems: 'center',
    flexDirection: 'row',
    backgroundColor: 'rgba(0,0,0,.5)'
  },
  defaultText: {
    color: textLight,
    fontSize: 12,
    paddingLeft: 4
  },
  topupView: {
    paddingTop: 16,
    flexDirection: 'row'
  }
})