add app/pages/wallets/ViewWallet.js

Strides-SPAPP/app/pages/wallets/ViewWallet.js

@@ -0,0 +1,151 @@
+/**
+ * 钱包卡片组件
+ * @邠心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 Dialog from '../../components/Dialog';
+import TextView from '../../components/TextView';
+import utils from '../../utils/utils';
+import { toTopupPage } from '../payment/PaymentConfig';
+
+const ViewWallet = ({
+  wallet,
+  setDefault
+}) => {
+  const dialogText = "A temporary hold of {mm} is placed for standard sessions. For sites with idle fees, an additional hold of the Idle Fee Cap of the site (e.g. S$30.00) may apply."
+  return (
+    <View style={styles.cardWallet}>
+      <View style={ui.flex}>
+        <TextView style={styles.walletName} numberOfLines={2}>{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>
+      { wallet?.walletTypeCode.indexOf("pay_per_use") >= 0
+      ? <TextView style={styles.walletLabel}>Pre-Auth Amount:</TextView>
+      : <TextView style={styles.walletLabel}>Current Balance:</TextView>
+      }
+      <View style={ui.flexc}>
+        <TextView style={styles.walletBalance}>{wallet.currentBalance}</TextView>
+        { wallet?.walletTypeCode.indexOf("pay_per_use") >= 0 &&
+          <Pressable
+            style={styles.walletBalanceInfo}
+            onPress={() => {
+              let msg = dialogText.replace("{mm}", wallet.currentBalance);
+              Dialog.showResultDialog(msg, "OK", null);
+            }}>
+            <MaterialCommunityIcons
+              name="information-outline"
+              size={18}
+              color={textButton}/>
+          </Pressable>
+        }
+      </View>
+      { 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: 230,
+    margin: 16,
+    padding: 16,
+    borderRadius: 16,
+    ...ElevationObject(2),
+    backgroundColor: colorPrimary
+  },
+  walletName: {
+    flex: 1,
+    color: textLight,
+    fontSize: 28,
+    fontWeight: 'bold',
+    paddingRight: 16
+  },
+  walletProvider: {
+    color: textLight,
+    fontSize: 22,
+  },
+  walletLabel: {
+    color: textLight,
+    opacity: .9,
+    fontSize: 16,
+    paddingTop: 16
+  },
+  walletBalance: {
+    color: textLight,
+    fontSize: 24,
+    paddingTop: 4,
+    fontWeight: 'bold'
+  },
+  walletBalanceInfo: {
+    width: 24,
+    height: 20,
+    opacity: .8,
+    marginTop: 4,
+    marginLeft: 4,
+    alignItems: "center"
+  },
+  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: 13,
+    paddingLeft: 4
+  },
+  topupView: {
+    paddingTop: 16,
+    flexDirection: 'row'
+  }
+})