Show wallet balance of fleet credit

https://dev.wormwood.com.sg/zentao/task-view-488.html

Strides-APP/app/components/ShadowView.js

@@ -27,11 +27,36 @@ const ShadowView = ({
 
 export default ShadowView;
 
+export const ShadowViewV2 = ({
+  offset=42,
+  style=styles.shadowViewV2,
+  shadowColor="#222222"
+}) => (
+  <View style={style}>
+    <Svg width={$vw(100)-offset} height={$vw(4.36)} viewBox="0 0 342 15" fill="none">
+      <Path d="M0 0H342V7C342 11.4183 338.418 15 334 15H8.00001C3.58173 15 0 11.4183 0 7V0Z" fill="url(#paint0_linear_4117_1875)"/>
+      <Defs>
+        <LinearGradient id="paint0_linear_4117_1875" x1="171" y1="15" x2="171" y2="0" gradientUnits="userSpaceOnUse">
+          <Stop stopColor="#ddd"/>
+          <Stop offset="1" stopColor={shadowColor}/>
+        </LinearGradient>
+      </Defs>
+    </Svg>
+  </View>
+);
+
 const styles = StyleSheet.create({
   shadowView: {
     opacity: 0.8,
     marginTop: -6,
     marginLeft: 16,
     marginRight: 16
+  },
+  shadowViewV2: {
+    zIndex: 1,
+    opacity: .8,
+    marginTop: -8,
+    marginLeft: 20,
+    marginRight: 20
   }
 })

Strides-APP/app/pages/chargeV2/PaymentListV2.js

@@ -166,6 +166,7 @@ export default class PaymentListV2 extends Component {
               animationDirection={"horizontalRight"}>
               <TextView
                 style={styles.valueText}
+                ellipsizeMode="middle"
                 numberOfLines={1}>{this.state.selectOptions?.name}</TextView>
             </VbeSkeleton>
             <VbeSkeleton
@@ -177,6 +178,7 @@ export default class PaymentListV2 extends Component {
               animationDirection={"horizontalRight"}>
               <TextView
                 style={styles.paymentText}
+                ellipsizeMode="middle"
                 numberOfLines={1}>{this.state.selectOptions?.desc}</TextView>
             </VbeSkeleton>
           </View>
@@ -273,12 +275,12 @@ const styles = StyleSheet.create({
   },
   labelText: {
     color: textPrimary,
-    fontSize: 14,
+    fontSize: 15,
     fontWeight: 'bold'
   },
   descText: {
     color: colorAccent,
-    fontSize: 12,
+    fontSize: 14,
     paddingTop: 2
   },
   itemPayment: {

Strides-APP/app/pages/my/ProfileV2.js

@@ -13,6 +13,7 @@ import { getStorageJsonSync, setStorage, setStorageJson } from '../../utils/stor
 import utils from '../../utils/utils';
 import { PageList } from '../Router';
 import app from '../../../app.json';
+import { ShadowViewV2 } from '../../components/ShadowView';
 
 export default class ProfileV2 extends Component {
   constructor(props) {
@@ -124,6 +125,7 @@ export default class ProfileV2 extends Component {
     return (
       <ScrollView style={styles.container}>
         {/* Profile Info */}
+        <EndView/>
         <Button
           style={styles.cardView}
           viewStyle={styles.profileView}
@@ -144,18 +146,19 @@ export default class ProfileV2 extends Component {
               numberOfLines={1}>{this.state.userInfo.nickName}</TextView>
             <TextView style={styles.userText}>{this.state.userInfo.email}</TextView>
             <TextView style={styles.userText}>{(utils.isNotEmpty(this.state.userInfo.callingCode) && "+" + this.state.userInfo.callingCode + " ") + this.state.userInfo.phone}</TextView>
-            <View style={styles.userTypeView}>
+            {/* <View style={styles.userTypeView}>
               { this.state.userInfo.userType?.split(";").map((item, index) => {
                   return <TextView key={index} style={styles.userTypeText}>{item}</TextView>
                 })
               }
-            </View>
+            </View> */}
           </View>
           <FontAwesome
-            size={34}
+            size={24}
             color={textCancel}
             name='angle-right'/>
         </Button>
+        <ShadowViewV2/>
         {/* Wallet Info */}
         <Button 
           style={styles.cardView}
@@ -169,12 +172,28 @@ export default class ProfileV2 extends Component {
             <TextView style={styles.cardPrimary}>{this.state.userInfo.creditStr}</TextView>
           </View>
           <FontAwesome
-            size={28}
+            size={24}
             color={textCancel}
             name='angle-right'/>
         </Button>
+        <ShadowViewV2/>
+        { utils.isNotEmpty(this.state.userInfo.groupWallet) && <>
+          <Button 
+            style={styles.cardView}
+            viewStyle={styles.profileItem}>
+            <Image
+              style={styles.cardIcon}
+              source={require('../../images/user/card-wallet.png')}/>
+            <View style={styles.cardInfo}>
+              <TextView style={styles.cardLabel}>{this.state.userInfo.groupWallet.walletName}</TextView>
+              <TextView style={styles.cardPrimary}>{this.state.userInfo.groupWallet.expireTime}</TextView>
+            </View>
+          </Button>
+          <ShadowViewV2/>
+          </>
+        }
         {/* Vehicle Info */}
-        { app.vehicle.enable &&
+        { app.vehicle.enable && <>
           <Button
             style={styles.cardView}
             viewStyle={styles.profileItem}
@@ -187,10 +206,12 @@ export default class ProfileV2 extends Component {
               <TextView style={styles.cardPrimary}>{this.state.userInfo.countVehicle}</TextView>
             </View>
             <FontAwesome
-              size={28}
+              size={24}
               color={textCancel}
               name='angle-right'/>
           </Button>
+          <ShadowViewV2/>
+          </>
         }
         {/* Vehicle List */}
         {/* <View style={styles.titleView}>
@@ -233,6 +254,24 @@ export default class ProfileV2 extends Component {
         <View style={styles.accountList}>
           <CardList refreshId={this.state.refreshId}/>
         </View> */}
+        <Button
+          style={styles.cardView}
+          viewStyle={styles.profileItem}
+          onClick={() => this.deleteAccount()}>
+          <MaterialCommunityIcons
+            style={styles.cardIcon}
+            name="account-remove"
+            size={32}
+            color="#00638C"/>
+          <View style={styles.cardInfo}>
+            <TextView style={styles.cardLabel}>{$t('profile.deleteAccount')}</TextView>
+          </View>
+          <FontAwesome
+            size={24}
+            color={textCancel}
+            name='angle-right'/>
+        </Button>
+        <ShadowViewV2/>
         <Button
           style={styles.cardView}
           viewStyle={styles.profileItem}
@@ -244,12 +283,13 @@ export default class ProfileV2 extends Component {
             <TextView style={styles.cardLabel}>{$t('route.changePassword')}</TextView>
           </View>
           <FontAwesome
-            size={28}
+            size={24}
             color={textCancel}
             name='angle-right'/>
         </Button>
+        <ShadowViewV2/>
         {/* Notifications */}
-        { !app.v3.drawer &&
+        { !app.v3.drawer && <>
           <Button
             style={styles.cardView}
             viewStyle={styles.profileItem}
@@ -261,12 +301,14 @@ export default class ProfileV2 extends Component {
               <TextView style={styles.cardLabel}>{$t('profile.notificationSettings')}</TextView>
             </View>
             <FontAwesome
-              size={28}
+              size={24}
               color={textCancel}
               name='angle-right'/>
           </Button>
+          <ShadowViewV2/>
+          </>
         }
-        { (app.modules.apply_phv && this.state.userInfo.userType.toLowerCase() == "public") &&
+        { (app.modules.apply_phv && this.state.userInfo.userType.toLowerCase() == "public") && <>
           <Button
             style={styles.cardView}
             viewStyle={styles.profileItem}
@@ -280,28 +322,13 @@ export default class ProfileV2 extends Component {
               <TextView style={styles.cardLabel}>{$t('profile.apply2Fleet')}</TextView>
             </View>
             <FontAwesome
-              size={28}
+              size={24}
               color={textCancel}
               name='angle-right'/>
           </Button>
+          <ShadowViewV2/>
+          </>
         }
-        <Button
-          style={styles.cardView}
-          viewStyle={styles.profileItem}
-          onClick={() => this.deleteAccount()}>
-          <MaterialCommunityIcons
-            style={styles.cardIcon}
-            name="account-remove"
-            size={32}
-            color="#00638C"/>
-          <View style={styles.cardInfo}>
-            <TextView style={styles.cardLabel}>{$t('profile.deleteAccount')}</TextView>
-          </View>
-          <FontAwesome
-            size={28}
-            color={textCancel}
-            name='angle-right'/>
-        </Button>
         { app.v3.drawer && <>
           <Button
             style={styles.cardView}
@@ -317,10 +344,11 @@ export default class ProfileV2 extends Component {
               <TextView style={styles.cardLabel}>{$t('drawer.feedback')}</TextView>
             </View>
             <FontAwesome
-              size={28}
+              size={24}
               color={textCancel}
               name='angle-right'/>
           </Button>
+          <ShadowViewV2/>
           <Button
             style={styles.cardView}
             viewStyle={styles.profileItem}
@@ -335,10 +363,11 @@ export default class ProfileV2 extends Component {
               <TextView style={styles.cardLabel}>{$t('drawer.settings')}</TextView>
             </View>
             <FontAwesome
-              size={28}
+              size={24}
               color={textCancel}
               name='angle-right'/>
           </Button>
+          <ShadowViewV2/>
           <Button
             style={styles.cardView}
             viewStyle={styles.profileItem}
@@ -353,10 +382,11 @@ export default class ProfileV2 extends Component {
               <TextView style={styles.cardLabel}>{$t('drawer.about')}</TextView>
             </View>
             <FontAwesome
-              size={28}
+              size={24}
               color={textCancel}
               name='angle-right'/>
           </Button>
+          <ShadowViewV2/>
         </>}
         {/* <Button
           style={styles.deleteButton}
@@ -368,6 +398,7 @@ export default class ProfileV2 extends Component {
           style={styles.deleteButton}
           text={$t('profile.logout')}
           textColor={textLight}
+          elevation={16}
           onClick={() => this.logout()}
         />
       </ScrollView>
@@ -421,8 +452,8 @@ const styles = StyleSheet.create({
     paddingTop: 1.5
   },
   cardView: {
-    //padding: 16,
-    marginTop: 16,
+    zIndex: 2,
+    marginTop: 0,
     marginLeft: 16,
     marginRight: 16,
     borderRadius: 10,
@@ -433,7 +464,7 @@ const styles = StyleSheet.create({
     backgroundColor: colorLight,
   },
   profileItem: {
-    padding: 16,
+    ...$padding(24, 16),
     alignItems: 'center',
     flexDirection: 'row',
     justifyContent: 'center',
@@ -455,12 +486,13 @@ const styles = StyleSheet.create({
   cardInfo: {
     flex: 1,
     paddingLeft: 16,
-    alignItems: 'center',
-    flexDirection: 'row'
+    alignItems: 'flex-start',
+    flexDirection: 'column'
   },
   cardPrimary: {
     color: textPrimary,
-    fontSize: 18
+    fontSize: 16,
+    paddingTop: 2
   },
   cardLabel: {
     color: textPrimary,
@@ -523,7 +555,8 @@ const styles = StyleSheet.create({
     borderTopColor: '#eee'
   },
   deleteButton: {
-    ...$margin(48, 16, 16),
+    borderRadius: 4,
+    ...$margin(4, 16, 16),
     backgroundColor: '#EA0A2A'
   },
   userTypeView: {