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

/**
 * 钱包充值的支付方式列表
 * @邠心vbe on 2023/02/02
 */
import React, { Component } from 'react';
import { View, Text, StyleSheet, Image } from 'react-native';
import Svg, { Path } from 'react-native-svg';
import apiWallet from '../../api/apiWallet';
import BadgeSelectItem from '../../components/BadgeSelectItem';
import { ElevationObject } from '../../components/Button';

export default class TopupPaythod extends Component {
  constructor(props) {
    super(props);
    this.state = {
      cIndex: 0,
      payTypeList: []
    };
  }

  componentDidMount() {
    this.getPayType();
  }

  getPayType() {
    apiWallet.getPayTypeList().then(res => {
      if (res.data) {
        this.setState({
          payTypeList: res.data
        });
        this.onChange(0);
      }
    }).catch(err => {

    });
  }

  changePayType(index) {
    this.setState({
      cIndex: index
    });
    this.onChange(index);
  }

  onChange(index) {
    if (this.props.onChange) {
      this.props.onChange(this.state.payTypeList[index]);
    }
  }

  getSecuryNumber(number, pk) {
    if (pk) {
      const last = number.substring(number.length - 8);
      var x = ''
      for (let i = 0; i < number.length - 8; i++) {
        x += 'X';
      }
      return x + last;
    } else {
      return " ";
    }
  }

  render() {
    return (
      <View style={styles.listView}>
        { this.state.payTypeList.map((item, index) => {
            return (
              <BadgeSelectItem
                key={index}
                style={[
                  styles.paytypeView,
                  index > 0 && styles.next
                ]}
                checked={index == this.state.cIndex}
                onPress={() => this.changePayType(index)}>
                <View style={$padding(12, 8, 8)}>
                  <PaymentIcon method={item.fomoPayType} checked={index == this.state.cIndex}/>
                </View>
                <Text style={[styles.paytypeText, (index == this.state.cIndex && {color: colorAccent})]}>{item.payName}</Text>
                <Text style={styles.cardText}>{this.getSecuryNumber(item.payName, item.cardPk)}</Text>
              </BadgeSelectItem>
            );
          })
        }
      </View>
    );
  }
}

export const PaymentIcon = ({method="CARD", size=40, checked=false}) => {
  switch (method) {
    case "CARD": 
      return (
        /*<Svg width="40" height="40" viewBox="0 0 40 40">
          <Path
            fill={checked ? colorAccent : "#666666"}
            d="M22.0532 16.1052C21.3736 16.8184 21 17.7567 21 18.7535V20.2465C21 21.2433 21.3736 22.1817 22.0532 22.8948C22.7327 23.608 23.6269 24 24.5768 24H37V15H24.5768C23.6269 15 22.7288 15.392 22.0532 16.1052ZM26.0392 17.8318C26.9175 17.8318 27.6289 18.5783 27.6289 19.5C27.6289 20.4217 26.9175 21.1682 26.0392 21.1682C25.161 21.1682 24.4496 20.4217 24.4496 19.5C24.4496 18.5783 25.161 17.8318 26.0392 17.8318Z"/>
          <Path
            fill={checked ? colorAccent : "#666666"}
            d="M32.2342 4H6.7697C4.1403 4 2 6.16334 2 8.82988V30.1701C2 32.8327 4.13639 35 6.7697 35H32.2303C34.8597 35 37 32.8367 37 30.1701V25.7563H24.7686C21.7557 25.7563 19.2907 23.2601 19.2907 20.2092V18.7908C19.2907 15.7399 21.7557 13.2437 24.7686 13.2437H37V8.82988C37 6.16731 34.8597 4 32.2342 4Z" />
        </Svg>*/
        <MaterialCommunityIcons
          name="credit-card-multiple"
          color={checked ? colorAccent : "#666666"}
          size={size}/>
      );
    case "PAYNOW":
      return (
        <Svg width={size} height={size} viewBox="0 0 40 40">
          <Path
            fill={checked ? colorAccent : "#666666"}
            d="M4 18.2222H7.55556V21.7778H4V18.2222ZM18.2222 7.55556H21.7778V14.6667H18.2222V7.55556ZM14.6667 18.2222H21.7778V25.3333H18.2222V21.7778H14.6667V18.2222ZM25.3333 18.2222H28.8889V21.7778H32.4444V18.2222H36V21.7778H32.4444V25.3333H36V32.4444H32.4444V36H28.8889V32.4444H21.7778V36H18.2222V28.8889H25.3333V25.3333H28.8889V21.7778H25.3333V18.2222ZM32.4444 32.4444V25.3333H28.8889V32.4444H32.4444ZM25.3333 4H36V14.6667H25.3333V4ZM28.8889 7.55556V11.1111H32.4444V7.55556H28.8889ZM4 4H14.6667V14.6667H4V4ZM7.55556 7.55556V11.1111H11.1111V7.55556H7.55556ZM4 25.3333H14.6667V36H4V25.3333ZM7.55556 28.8889V32.4444H11.1111V28.8889H7.55556Z"/>
        </Svg>
      )
    case "GRABPAY":
      return (
        <Image
          style={{width: size, height: size}}
          source={checked ? require('../../images/wallet/payment-grab-active.png') : require('../../images/wallet/payment-grab.png')}
        />
      );
    case "WALLET":
      return (
        <Svg width={size} height={size} viewBox="0 0 40 40">
          <Path
            fill={checked ? colorAccent : "#666666"}
            d="M22.0532 16.1052C21.3736 16.8184 21 17.7567 21 18.7535V20.2465C21 21.2433 21.3736 22.1817 22.0532 22.8948C22.7327 23.608 23.6269 24 24.5768 24H37V15H24.5768C23.6269 15 22.7288 15.392 22.0532 16.1052ZM26.0392 17.8318C26.9175 17.8318 27.6289 18.5783 27.6289 19.5C27.6289 20.4217 26.9175 21.1682 26.0392 21.1682C25.161 21.1682 24.4496 20.4217 24.4496 19.5C24.4496 18.5783 25.161 17.8318 26.0392 17.8318Z"/>
          <Path
            fill={checked ? colorAccent : "#666666"}
            d="M32.2342 4H6.7697C4.1403 4 2 6.16334 2 8.82988V30.1701C2 32.8327 4.13639 35 6.7697 35H32.2303C34.8597 35 37 32.8367 37 30.1701V25.7563H24.7686C21.7557 25.7563 19.2907 23.2601 19.2907 20.2092V18.7908C19.2907 15.7399 21.7557 13.2437 24.7686 13.2437H37V8.82988C37 6.16731 34.8597 4 32.2342 4Z"/>
        </Svg>
      )
  }
}

const styles = StyleSheet.create({
  listView: {
    flexWrap: 'wrap',
    flexDirection: 'row'
  },
  paytypeView: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: colorLight,
    ...ElevationObject(5)
  },
  selected: {
    borderColor: colorPrimary
  },
  next: {
    marginLeft: 16,
  },
  paytypeText: {
    color: textPrimary,
    fontSize: 14,
    fontWeight: 'bold',
    paddingBottom: 14
  },
  cardText: {
    color: "#666",
    fontSize: 8,
    marginTop: -18,
    paddingBottom: 4
  },
  selectIcon: {
    width: 18,
    height: 18,
  },
  accountLogo: {
    width: 36,
    height: 18,
    marginRight: 32
  },
});