add app/pages/wallet/TopupNew.js

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

@@ -0,0 +1,429 @@
+/**
+ * 新版钱包充值页面
+ * @邠心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'
+  }
+})