update app/pages/wallets/ViewWallet.js

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

@@ -6,6 +6,7 @@ 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';
@@ -13,53 +14,71 @@ import { toTopupPage } from '../payment/PaymentConfig';
 const ViewWallet = ({
   wallet,
   setDefault
-}) => (
-  <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>
+}) => {
+  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>
-      : <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>
-    }
-    <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;
 
@@ -95,6 +114,14 @@ const styles = StyleSheet.create({
     paddingTop: 4,
     fontWeight: 'bold'
   },
+  walletBalanceInfo: {
+    width: 24,
+    height: 20,
+    opacity: .8,
+    marginTop: 4,
+    marginLeft: 4,
+    alignItems: "center"
+  },
   setDefaultView: {
     height: 28,
     ...$padding(4, 12),