Merge remote-tracking branch 'origin/dev_phase2' into dev_phase2

android/app/build.gradle

@@ -132,8 +132,8 @@ android {
         applicationId "com.dcv.invest"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 8
-        versionName "1.3"
+        versionCode 11
+        versionName "1.5"
         vectorDrawables.useSupportLibrary = true
     }
     splits {

android/app/src/main/java/com/dcv/invest/MainApplication.java

@@ -4,6 +4,7 @@ import android.app.Application;
 import android.content.Context;
 import com.facebook.react.PackageList;
 import com.facebook.react.ReactApplication;
+import com.learnium.RNDeviceInfo.RNDeviceInfo;
 import com.reactnativecommunity.netinfo.NetInfoPackage;
 import com.facebook.react.ReactInstanceManager;
 import com.facebook.react.ReactNativeHost;

android/settings.gradle

 rootProject.name = 'Invest'
+include ':react-native-device-info'
+project(':react-native-device-info').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-device-info/android')
 include ':@react-native-community_netinfo'
 project(':@react-native-community_netinfo').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/netinfo/android')
 include ':react-native-bootsplash'

ios/Invest.xcodeproj/project.pbxproj

@@ -903,7 +903,7 @@
 				CODE_SIGN_ENTITLEMENTS = Invest/Invest.entitlements;
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 3;
+				CURRENT_PROJECT_VERSION = 5;
 				DEVELOPMENT_TEAM = MXZ24GRH48;
 				ENABLE_BITCODE = NO;
 				GCC_PREPROCESSOR_DEFINITIONS = (
@@ -912,7 +912,7 @@
 				);
 				INFOPLIST_FILE = Invest/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				MARKETING_VERSION = 1.9;
+				MARKETING_VERSION = 2.1;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",
@@ -937,11 +937,11 @@
 				CODE_SIGN_ENTITLEMENTS = Invest/Invest.entitlements;
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 3;
+				CURRENT_PROJECT_VERSION = 5;
 				DEVELOPMENT_TEAM = MXZ24GRH48;
 				INFOPLIST_FILE = Invest/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				MARKETING_VERSION = 1.9;
+				MARKETING_VERSION = 2.1;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",

ios/Podfile

@@ -89,6 +89,8 @@ target 'Invest' do
 
   pod 'react-native-netinfo', :path => '../node_modules/@react-native-community/netinfo'
 
+  pod 'RNDeviceInfo', :path => '../node_modules/react-native-device-info'
+
   target 'InvestTests' do
     inherit! :complete
     # Pods for testing

src/Config/Functions.js

@@ -14,6 +14,7 @@ import AppText from '../components/AppText';
 import AsyncStorage from '@react-native-community/async-storage';
 import {DETAILNEW, TABNAVIGATOR, AUTHEN} from '../routers/ScreenNames';
 import R from '../assets/R';
+import {isTablet} from 'react-native-device-info';
 
 export const logout = (navigation) => {
   AsyncStorage.clear();
@@ -186,7 +187,11 @@ export const WIDTH = (w) => width * (w / 360);
 export const HEIGHT = (h) => height * (h / 640);
 export const getLineHeight = (f) => f;
 export const getFont = (f) => f - 1;
-export const WIDTHXDICON = (w) => width * (w / 1125);
+
+export const WIDTHXDICON = (w) =>
+  isTablet() ? (width * (w / 1125)) / 1.5 : width * (w / 1125);
+export const HEIGHTXDICON = (h) =>
+  isTablet() ? (height * (h / 2436)) / 1.5 : height * (h / 2436);
 
 export const validatePhone = (str) => {
   let re = /^[0-9+]{9,11}$/;
@@ -236,14 +241,18 @@ export const toPriceVnd = (str) => {
 
 export const floatToPriceVnd = (str) => {
   if (str) {
-    let stringPrice = str.toString().split('.')
-    let headStringPrice = `${stringPrice[0].replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')}`
-    return stringPrice.length === 1 ? headStringPrice : headStringPrice.concat(`.${stringPrice[1]}`)
-
+    let stringPrice = str.toString().split('.');
+    let headStringPrice = `${stringPrice[0].replace(
+      /(\d)(?=(\d{3})+(?!\d))/g,
+      '$1,',
+    )}`;
+    return stringPrice.length === 1
+      ? headStringPrice
+      : headStringPrice.concat(`.${stringPrice[1]}`);
   } else {
-    return ''
+    return '';
   }
-}
+};
 
 // cắt chuỗi dạng something...
 export const ellipsis = (str = '', max = 30) =>
@@ -408,6 +417,10 @@ export const convertDate = (date) => {
   return time;
 };
 
+export const getDate = (date) => {
+  return moment(date).get('date');
+};
+
 export const convertTime = (date) => {
   const temp = new Date(moment(date, 'DD/MM/YYYY'));
   const time = moment(temp).format('YYYY-MM-DD');

src/Config/constants.js

-import I18n from '../helper/i18/i18n';
 export const RadioBuySale = [
-  {label: I18n.t('Buy'), value: 'BUY_IN'},
-  {label: I18n.t('Sale'), value: 'SELL_OUT'},
+  {label: 'Mua', value: 'BUY_IN'},
+  {label: 'Bán', value: 'SELL_OUT'},
+];
+
+export const RadioBuySaleEN = [
+  {label: 'Buy', value: 'BUY_IN'},
+  {label: 'Sell', value: 'SELL_OUT'},
 ];

src/Screens/Account/PacrtCQG/Footer.js

 import React, {Component} from 'react';
 import {View, Text, StyleSheet, TouchableOpacity, Linking} from 'react-native';
-import {getFontXD, toPriceVnd} from '../../../Config/Functions';
+import {
+  getFontXD,
+  toPriceVnd,
+  WIDTHXD,
+  HEIGHTXD,
+} from '../../../Config/Functions';
 import R from '../../../assets/R';
 import AppText from '../../../components/AppText';
 import I18n from '../../../helper/i18/i18n';
@@ -44,8 +49,8 @@ const styles = StyleSheet.create({
     fontWeight: 'bold',
   },
   btnSend: {
-    width: 140,
-    height: 40,
+    width: WIDTHXD(400),
+    height: HEIGHTXD(120),
     backgroundColor: R.colors.main,
     borderRadius: 10,
     justifyContent: 'center',

src/Screens/Account/PacrtCQG/PacketCQG.js

@@ -26,6 +26,7 @@ const PacketCQG = (props) => {
   const [feeConnect, setFeeConnect] = useState({data: [], title: ''});
   const [feeNonPro, setFeeNonPro] = useState({data: [], title: ''});
   const [feePro, setFeePro] = useState({data: [], title: ''});
+  const [feeOperating, setOperrating] = useState({data: [], title: ''});
   const [totalMD, setTotalMD] = useState(0);
   const [totalTB, setTotalTB] = useState(0);
   const [isUpdate, setIsUpdate] = useState(false);
@@ -133,6 +134,7 @@ const PacketCQG = (props) => {
       setFeeConnect(res.data.data.fee_connect);
       setFeeNonPro(res.data.data.fee_pro);
       setFeePro(res.data.data.fee_non_pro);
+      setOperrating(res.data.data.fee_operating);
 
       if (res.data.package_register.length > 0) {
         setListData(res.data.package_register);
@@ -161,6 +163,13 @@ const PacketCQG = (props) => {
           <WrapNomarl
             onRemovePacket={onRemovePacket}
             onChoosePacket={onChoosePacket}
+            data={feeOperating}
+            listRegister={listRegister}
+          />
+
+          <WrapNomarl
+            onRemovePacket={onRemovePacket}
+            onChoosePacket={onChoosePacket}
             data={feeConnect}
             listRegister={listRegister}
           />

src/Screens/Account/PacrtCQG/WrapNomarl.js

@@ -21,12 +21,9 @@ const ContainerTop = (props) => {
 
   useEffect(() => {
     const newList = data.map((e) => {
-      console.log(props.listRegister);
       if (props.listRegister.includes(e.id)) {
-        console.log('Chay vao day', e.id);
         return {...e, selected: true};
       } else {
-        console.log('Chay xuong duoi', e.id);
         return {...e, selected: false};
       }
     });

src/Screens/Action/Wallet/OTPWallet.js

@@ -18,7 +18,11 @@ import {
 } from 'react-native-confirmation-code-field';
 import {getFontXD, HEIGHTXD, WIDTHXD} from '../../../Config/Functions';
 import R from '.././../../assets/R';
-import {verifyOTPApi, registorApi} from '../../../apis/Functions/users';
+import {
+  verifyOTPApi,
+  registorApi,
+  getOTPApi,
+} from '../../../apis/Functions/users';
 import {useNavigation} from '@react-navigation/native';
 import I18n from '../../../helper/i18/i18n';
 import AppText from '../../../components/AppText';
@@ -27,12 +31,15 @@ import {showLoading, hideLoading} from '../../../actions/loadingAction';
 import {connect} from 'react-redux';
 import {TABNAVIGATOR} from '../../../routers/ScreenNames';
 import {showAlert, TYPE} from '../../../components/DropdownAlert';
+import CountDown from '../../../components/CountDown';
 
 const CELL_COUNT = 4;
 
 const ConfirmOTP = (propsa) => {
   const [value, setValue] = useState('');
 
+  const [isReset, setReset] = useState(false);
+
   const navigate = useNavigation();
 
   const ref = useBlurOnFulfill({value, cellCount: CELL_COUNT});
@@ -70,6 +77,7 @@ const ConfirmOTP = (propsa) => {
 
         if (propsa.route.params.type == 'DEPOSIT') {
           const {amount, notes} = propsa.route.params;
+
           res = await walletDeposit({
             amount,
             platform: Platform.OS,
@@ -96,15 +104,41 @@ const ConfirmOTP = (propsa) => {
             navigate.navigate(TABNAVIGATOR);
           }, 500);
         } else {
-          showAlert(TYPE.SUCCESS, I18n.t('Notification'), res.data.message);
+          showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
         }
       } else {
-        showAlert(TYPE.SUCCESS, I18n.t('Notification'), res.data.message);
+        showAlert(TYPE.ERROR, I18n.t('Notification'), res1.data.message);
+      }
+
+      propsa.hideLoading();
     }
+  };
 
+  const getOTP = async () => {
+    let res;
+    propsa.showLoading();
+    if (propsa.route.params.type == 'DEPOSIT') {
+      res = await getOTPApi({
+        platform: Platform.OS,
+        otp_by: propsa.user.email,
+        type: 'CUSTOMER_REQUEST_DEPOSIT',
+      });
+    } else {
+      res = await getOTPApi({
+        platform: Platform.OS,
+        otp_by: propsa.user.email,
+        type: 'REQUEST_WITHDRAW',
+      });
+    }
     propsa.hideLoading();
+    if (res.data.code == 200) {
+      setReset(!isReset);
+      showAlert(TYPE.SUCCESS, I18n.t('Notification'), res.data.message);
+    } else {
+      showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
     }
   };
+
   return (
     <View style={{flex: 1}}>
       <HeaderBack title={'VerifyOTP'} />
@@ -140,12 +174,12 @@ const ConfirmOTP = (propsa) => {
         <TouchableOpacity onPress={confirm} style={styles.btn}>
           <AppText i18nKey={'Continue'} style={styles.txtBtn} />
         </TouchableOpacity>
-        <TouchableOpacity
-          style={styles.wrapFooter}
-          onPress={() => navigate.goBack()}>
+        <TouchableOpacity style={styles.wrapFooter} onPress={getOTP}>
           <Text style={styles.txtNote}>{I18n.t('OTPValidFiveMinute')}</Text>
+
           <AppText i18nKey={'Re_send'} style={styles.txtSend} />
         </TouchableOpacity>
+        <CountDown isReset={isReset} />
       </View>
     </View>
   );

src/Screens/Action/Wallet/Wallet.js

@@ -3,7 +3,7 @@ import {View, Text, StyleSheet, TouchableOpacity} from 'react-native';
 import HeaderBack from '../../../components/Header/HeaderBack';
 import Success from './Tab/Success';
 import Watting from './Tab/Watting';
-import {getFontXD} from '../../../Config/Functions';
+import {getFontXD, HEIGHTXD, WIDTHXD} from '../../../Config/Functions';
 import {WALLETDEPOSIT, WALLETWITHDRAW} from '../../../routers/ScreenNames';
 import I18n from '../../../helper/i18/i18n';
 import AppText from '../../../components/AppText';
@@ -61,8 +61,8 @@ const styles = StyleSheet.create({
     justifyContent: 'space-around',
   },
   btnRight: {
-    width: 140,
-    height: 40,
+    width: WIDTHXD(400),
+    height: HEIGHTXD(100),
     backgroundColor: R.colors.main,
     borderRadius: 10,
     justifyContent: 'center',
@@ -80,8 +80,8 @@ const styles = StyleSheet.create({
     elevation: 1,
   },
   btnLeft: {
-    width: 140,
-    height: 40,
+    width: WIDTHXD(400),
+    height: HEIGHTXD(100),
     backgroundColor: R.colors.main,
     borderRadius: 10,
     justifyContent: 'center',

src/Screens/Action/Wallet/WalletDeposit.js

@@ -22,6 +22,8 @@ import {
   getFontXD,
   toPriceVnd,
   checkFormatArray,
+  WIDTHXD,
+  HEIGHTXD,
 } from '../../../Config/Functions';
 import {connect} from 'react-redux';
 import {showLoading, hideLoading} from '../../../actions/loadingAction';
@@ -172,8 +174,8 @@ const styles = StyleSheet.create({
     fontWeight: 'bold',
   },
   btnSend: {
-    width: 140,
-    height: 40,
+    width: WIDTHXD(400),
+    height: HEIGHTXD(100),
     backgroundColor: R.colors.main,
     borderRadius: 10,
     justifyContent: 'center',

src/Screens/Action/Wallet/WalletWithdraw.js

@@ -23,6 +23,7 @@ import {
   HEIGHTXD,
   toPriceVnd,
   checkFormatArray,
+  WIDTHXD,
 } from '../../../Config/Functions';
 import PickerItem from '../../../components/Picker/PickerItem';
 import RadioForm from 'react-native-simple-radio-button';
@@ -37,8 +38,13 @@ import {getOTPApi} from '../../../apis/Functions/users';
 import {OTPWALLET} from '../../../routers/ScreenNames';
 import {showAlert, TYPE} from '../../../components/DropdownAlert';
 var radio_props = [
-  {label: I18n.t('FromWallet'), value: 'WALLET'},
-  {label: I18n.t('FromCQGAccount'), value: 'INVESTMENT'},
+  {label: 'Từ ví', value: 'WALLET'},
+  {label: 'Từ tài khoản CQG', value: 'INVESTMENT'},
+];
+
+var radio_propsEN = [
+  {label: 'From wallet', value: 'WALLET'},
+  {label: 'From CQG Account', value: 'INVESTMENT'},
 ];
 const {width} = Dimensions.get('window');
 
@@ -88,6 +94,7 @@ const WalletWithdraw = (props) => {
     const index = checkFormatArray([type, amount]);
 
     if (index === true) {
+      if (amount >= props.user.configs.request_withdraw_amount_min) {
         props.showLoading();
         const res = await getOTPApi({
           platform: Platform.OS,
@@ -106,12 +113,18 @@ const WalletWithdraw = (props) => {
         } else {
           showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
         }
-
         props.hideLoading();
       } else {
         showAlert(
           TYPE.WARN,
           I18n.t('Notification'),
+          I18n.t('WarnMinReqestWithdraw'),
+        );
+      }
+    } else {
+      showAlert(
+        TYPE.WARN,
+        I18n.t('Notification'),
         I18n.t('Please_fill_in') + titles[index],
       );
     }
@@ -160,7 +173,11 @@ const WalletWithdraw = (props) => {
                 </Text>
                 {/* <View style={styles.row}> */}
                 <RadioForm
-                  radio_props={radio_props}
+                  radio_props={
+                    props.language.language == 'vi'
+                      ? radio_props
+                      : radio_propsEN
+                  }
                   labelStyle={{fontSize: getFontXD(42)}}
                   formHorizontal={true}
                   style={styles.row}
@@ -196,6 +213,7 @@ const WalletWithdraw = (props) => {
               </View>
             </View>
           </ScrollView>
+
           <View
             style={{
               paddingVertical: 10,
@@ -254,8 +272,8 @@ const styles = StyleSheet.create({
     fontWeight: 'bold',
   },
   btnSend: {
-    width: 140,
-    height: 40,
+    width: WIDTHXD(400),
+    height: HEIGHTXD(120),
     backgroundColor: R.colors.main,
     borderRadius: 10,
     justifyContent: 'center',
@@ -272,6 +290,7 @@ const styles = StyleSheet.create({
 const mapStateToProps = (state) => {
   return {
     user: state.userReducer,
+    language: state.languageReducer,
   };
 };
 export default connect(mapStateToProps, {

src/Screens/Authen/Authen.js

@@ -18,6 +18,7 @@ import Registor from './Registor';
 import {ScrollView} from 'react-native-gesture-handler';
 import R from '../../assets/R';
 import I18n from '../../helper/i18/i18n';
+import {connect} from 'react-redux';
 
 const {width, height} = Dimensions.get('window');
 
@@ -51,12 +52,18 @@ const Authen = (props) => {
               <Tab.Screen
                 name="LOGIN"
                 component={Login}
-                options={{tabBarLabel: I18n.t('Login')}}
+                options={{
+                  tabBarLabel:
+                    props.language.language == 'vi' ? 'Đăng nhập' : 'Login',
+                }}
               />
               <Tab.Screen
                 name="REGISTOR"
                 component={Registor}
-                options={{tabBarLabel: I18n.t('Register')}}
+                options={{
+                  tabBarLabel:
+                    props.language.language == 'vi' ? 'Đăng ký' : 'Register',
+                }}
               />
             </Tab.Navigator>
           </ImageBackground>
@@ -66,4 +73,10 @@ const Authen = (props) => {
   );
 };
 
-export default Authen;
+const mapStateToProps = (state) => {
+  return {
+    language: state.languageReducer,
+  };
+};
+
+export default connect(mapStateToProps, {})(Authen);

src/Screens/Authen/ConfirmOTP.js

@@ -27,11 +27,14 @@ import AppText from '../../components/AppText';
 import {showLoading, hideLoading} from '../../actions/loadingAction';
 import {connect} from 'react-redux';
 import {showAlert, TYPE} from '../../components/DropdownAlert';
+import CountDown from '../../components/CountDown';
+import {getOTPApi} from '../../apis/Functions/users';
 
 const CELL_COUNT = 4;
 
 const ConfirmOTP = (propsa) => {
   const [value, setValue] = useState('');
+  const [isReset, setReset] = useState(false);
 
   const navigate = useNavigation();
 
@@ -41,6 +44,22 @@ const ConfirmOTP = (propsa) => {
     setValue,
   });
 
+  const getOTP = async () => {
+    propsa.showLoading();
+    const res = await getOTPApi({
+      platform: Platform.OS,
+      otp_by: propsa.route.params.email,
+      type: 'FORGOT_PASSWORD',
+    });
+    propsa.hideLoading();
+    if (res.data.code == 200) {
+      setReset(!isReset);
+      showAlert(TYPE.SUCCESS, I18n.t('Notification'), res.data.message);
+    } else {
+      showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
+    }
+  };
+
   const confirm = async () => {
     if (!value) {
       showAlert(TYPE.WARN, I18n.t('Notification'), I18n.t('EnterOTPRequest'));
@@ -105,12 +124,11 @@ const ConfirmOTP = (propsa) => {
         <TouchableOpacity onPress={confirm} style={styles.btn}>
           <AppText i18nKey={'Continue'} style={styles.txtBtn} />
         </TouchableOpacity>
-        <TouchableOpacity
-          style={styles.wrapFooter}
-          onPress={() => navigate.goBack()}>
+        <TouchableOpacity style={styles.wrapFooter} onPress={getOTP}>
           <Text style={styles.txtNote}>{I18n.t('OTPValidFiveMinute')}</Text>
           <AppText i18nKey={'Re_send'} style={styles.txtSend} />
         </TouchableOpacity>
+        <CountDown isReset={isReset} />
       </View>
     </View>
   );

src/Screens/Authen/RegisterOTP.js

@@ -19,7 +19,7 @@ import {
 import {getFontXD, HEIGHTXD, WIDTHXD} from '../../Config/Functions';
 import R from '../../assets/R';
 import {NEWPASSWORD} from '../../routers/ScreenNames';
-import {verifyOTPApi, registorApi} from '../../apis/Functions/users';
+import {verifyOTPApi, registorApi, getOTPApi} from '../../apis/Functions/users';
 import {useNavigation} from '@react-navigation/native';
 import I18n from '../../helper/i18/i18n';
 import AppText from '../../components/AppText';
@@ -27,12 +27,13 @@ import AppText from '../../components/AppText';
 import {showLoading, hideLoading} from '../../actions/loadingAction';
 import {connect} from 'react-redux';
 import {showAlert, TYPE} from '../../components/DropdownAlert';
+import CountDown from '../../components/CountDown';
 
 const CELL_COUNT = 4;
 
 const ConfirmOTP = (propsa) => {
   const [value, setValue] = useState('');
-
+  const [isReset, setReset] = useState(false);
   const navigate = useNavigation();
 
   const ref = useBlurOnFulfill({value, cellCount: CELL_COUNT});
@@ -102,6 +103,22 @@ const ConfirmOTP = (propsa) => {
     }
   };
 
+  const getOTP = async () => {
+    propsa.showLoading();
+    const res = await getOTPApi({
+      platform: Platform.OS,
+      otp_by: propsa.route.params.email,
+      type: 'CUSTOMER_VERIFY',
+    });
+    propsa.hideLoading();
+    if (res.data.code == 200) {
+      setReset(!isReset);
+      showAlert(TYPE.SUCCESS, I18n.t('Notification'), res.data.message);
+    } else {
+      showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
+    }
+  };
+
   return (
     <View style={{flex: 1}}>
       <HeaderBack title={'VerifyOTP'} />
@@ -137,12 +154,11 @@ const ConfirmOTP = (propsa) => {
         <TouchableOpacity onPress={confirm} style={styles.btn}>
           <AppText i18nKey={'Continue'} style={styles.txtBtn} />
         </TouchableOpacity>
-        <TouchableOpacity
-          style={styles.wrapFooter}
-          onPress={() => navigate.goBack()}>
+        <TouchableOpacity style={styles.wrapFooter} onPress={getOTP}>
           <Text style={styles.txtNote}>{I18n.t('OTPValidFiveMinute')}</Text>
           <AppText i18nKey={'Re_send'} style={styles.txtSend} />
         </TouchableOpacity>
+        <CountDown isReset={isReset} />
       </View>
     </View>
   );

src/Screens/Home/SwiperComponent.js

@@ -12,7 +12,7 @@ const styles = StyleSheet.create({
     borderRadius: 5,
 
     height: HEIGHTXD(400),
-    marginTop: 25,
+    marginTop: HEIGHTXD(70),
     borderBottomColor: R.colors.borderGray,
     borderTopColor: R.colors.borderGray,
     shadowColor: '#000',

src/Screens/Menu/Profile/Tab/GeneralInfor.js

@@ -193,8 +193,8 @@ const styles = StyleSheet.create({
     marginBottom: 30,
   },
   btn: {
-    width: 180,
-    height: HEIGHTXD(120),
+    width: WIDTHXD(400),
+    height: HEIGHTXD(100),
     borderRadius: 10,
     backgroundColor: '#1C6AF6',
     justifyContent: 'center',

src/Screens/MethodPay/AddMethod.js

@@ -18,7 +18,12 @@ import R from '../../assets/R';
 import HeaderBack from '../../components/Header/HeaderBack';
 
 import Item from './Item';
-import {getFontXD, WIDTHXD, checkFormatArray} from '../../Config/Functions';
+import {
+  getFontXD,
+  WIDTHXD,
+  checkFormatArray,
+  HEIGHTXD,
+} from '../../Config/Functions';
 import TextField from '../../components/Input/TextField';
 import PickerItem from '../../components/Picker/PickerItem';
 import {getListBank, addMethodBank} from '../../apis/Functions/Widthdraw';
@@ -152,8 +157,8 @@ const styles = StyleSheet.create({
   },
 
   btn: {
-    width: 150,
-    height: 40,
+    width: WIDTHXD(400),
+    height: HEIGHTXD(100),
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: R.colors.main,

src/Screens/NewFeed/Calendar/Calendar.js

@@ -69,8 +69,6 @@ const NewFeed = (props) => {
       style={{
         flex: 1,
         backgroundColor: 'white',
-        paddingLeft: 10,
-        paddingRight: 20,
         paddingTop: 10,
       }}>
       <FlatList

src/Screens/NewFeed/Calendar/item.js

@@ -2,19 +2,50 @@ import React, {Component} from 'react';
 import {View, Text, StyleSheet} from 'react-native';
 import R from '../../../assets/R';
 import Block from '../../../components/Block';
-import {getFontXD} from '../../../Config/Functions';
-import {convertDate} from '../../../Config/Functions';
+import {getFontXD, convertDate} from '../../../Config/Functions';
 const Item = (props) => {
   const {title, date, time, start_date} = props.item;
+
+  const d = new Date();
   return (
-    <View style={styles.container}>
+    <View
+      style={[
+        styles.container,
+        d.getDate() == convertDate(start_date).slice(0, 2)
+          ? {backgroundColor: '#B4D5FF'}
+          : {},
+      ]}>
       <View style={styles.left}>
-        <View style={styles.dot} />
+        <View
+          style={[
+            styles.dot,
+            d.getDate() == convertDate(start_date).slice(0, 2)
+              ? {backgroundColor: 'red'}
+              : {},
+          ]}
+        />
       </View>
       <View style={[styles.right, props.index == 0 ? {borderTopWidth: 0} : {}]}>
         <View style={styles.row}>
-          <Text style={styles.txtTime}> {convertDate(start_date)}</Text>
-          <Text style={styles.txtDate}>{start_date.substring(10, 16)}</Text>
+          <Text
+            style={[
+              styles.txtTime,
+              d.getDate() == convertDate(start_date).slice(0, 2)
+                ? {color: 'red', fontWeight: '500'}
+                : {},
+            ]}>
+            {' '}
+            {convertDate(start_date)}
+          </Text>
+          <Text
+            style={[
+              styles.txtDate,
+              d.getDate() == convertDate(start_date).slice(0, 2)
+                ? {color: 'red', fontWeight: '500'}
+                : {},
+            ]}>
+            {start_date.substring(10, 16)}
+          </Text>
         </View>
         <Text style={styles.txtTitle}>{title}</Text>
       </View>
@@ -27,11 +58,12 @@ export default Item;
 const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
-    marginLeft: 10,
+    paddingLeft: 20,
+    paddingRight: 20,
   },
   left: {
-    width: 0.6,
-    backgroundColor: '#CECECE',
+    width: 1,
+    backgroundColor: '#A7A7A7',
   },
   right: {
     marginLeft: 20,
@@ -62,6 +94,6 @@ const styles = StyleSheet.create({
     color: R.colors.main,
   },
   txtDate: {
-    color: '#929292',
+    color: '#A7A7A7',
   },
 });

src/Screens/NewFeed/Media/TopMedia.js

@@ -8,7 +8,7 @@ import {
 } from 'react-native';
 import R from '../../../assets/R';
 import LinearGradient from 'react-native-linear-gradient';
-import {getFontXD} from '../../../Config/Functions';
+import {getFontXD, HEIGHTXD, WIDTHXD} from '../../../Config/Functions';
 import Block from '../../../components/Block';
 import Icon from 'react-native-vector-icons/AntDesign';
 import {useNavigation} from '@react-navigation/native';
@@ -83,7 +83,7 @@ const MediaView = (props) => {
 
 const styles = StyleSheet.create({
   containerTop: {
-    height: 300,
+    height: HEIGHTXD(850),
     width: '100%',
   },
   contentTop: {
@@ -97,10 +97,10 @@ const styles = StyleSheet.create({
     textDecorationLine: 'underline',
   },
   containerBtn: {
-    paddingHorizontal: 15,
-    paddingVertical: 5,
+    width: WIDTHXD(380),
     backgroundColor: '#1C6AF6',
-    borderRadius: 5,
+    height: HEIGHTXD(120),
+    borderRadius: HEIGHTXD(30),
     justifyContent: 'center',
     alignItems: 'center',
     flexDirection: 'row',

src/Screens/NewFeed/Tab1/item.js

@@ -3,7 +3,7 @@ import React, {Component} from 'react';
 import {View, Text, StyleSheet, Image, TouchableOpacity} from 'react-native';
 import Block from '../../../components/Block';
 import Icon from 'react-native-vector-icons/AntDesign';
-import {getFontXD} from '../../../Config/Functions';
+import {getFontXD, HEIGHTXD} from '../../../Config/Functions';
 import R from '../../../assets/R';
 import {useNavigation} from '@react-navigation/native';
 import {DETAILNEW} from '../../../routers/ScreenNames';
@@ -49,7 +49,7 @@ const styles = StyleSheet.create({
     color: '#A2A2A2',
   },
   img: {
-    height: 180,
+    height: HEIGHTXD(500),
     borderRadius: 10,
     marginTop: 5,
   },

src/Screens/Notification/Item.js

@@ -13,7 +13,6 @@ import Block from '../../components/Block';
 
 const Item = (props) => {
   const {item} = props;
-  console.log('noti', item);
   return (
     <View style={styles.container}>
       <Block flex={1} row>
@@ -35,7 +34,7 @@ export default Item;
 
 const styles = StyleSheet.create({
   container: {
-    marginTop: 10,
+    marginTop: 8,
     paddingVertical: 10,
     shadowColor: '#000',
     shadowOffset: {
@@ -47,7 +46,7 @@ const styles = StyleSheet.create({
     elevation: 5,
     marginHorizontal: 10,
     backgroundColor: R.colors.white,
-    marginBottom: 10,
+    marginBottom: 2,
     borderRadius: HEIGHTXD(30),
   },
 

src/Screens/ServiceCustomer/ServiceCustomerView.js

@@ -81,7 +81,9 @@ const ServiceCustomerView = (props) => {
 
         <AppText i18nKey={'HotLine'} style={styles.title} />
         <TouchableOpacity onPress={() => callNumber(hotline_call)}>
-          <Text style={styles.txtContent}>{hotline}</Text>
+          <Text style={[styles.txtContent, {textDecorationLine: 'underline'}]}>
+            {hotline}
+          </Text>
         </TouchableOpacity>
 
         <AppText i18nKey={'WorkingTime'} style={styles.title} />

src/Screens/Tool/CalculatorProfitLoss/CalculatorProfitLossView.js

@@ -18,12 +18,14 @@ import I18n from '../../../helper/i18/i18n';
 import PickerItem from '../../../components/Picker/PickerItem';
 import R from '../../../assets/R';
 import RadioForm from 'react-native-simple-radio-button';
-import {RadioBuySale} from '../../../Config/constants';
+import {RadioBuySale, RadioBuySaleEN} from '../../../Config/constants';
 import TextMoney from '../../../components/Input/InputMoney';
 import ItemCalculator from './ItemCalculator';
 import AppText from '../../../components/AppText';
+import {connect} from 'react-redux';
 
 const CalculatorProfitLossView = (props) => {
+  console.log(props.language.language);
   return (
     <View style={{flex: 1, flexDirection: 'column', backgroundColor: 'white'}}>
       <HeaderBack title={'CalculatorProfitLoss'} isWhite={true} />
@@ -48,7 +50,9 @@ const CalculatorProfitLossView = (props) => {
           </AppText>
           <View style={{width: WIDTHXD(600), height: HEIGHTXD(85)}}>
             <RadioForm
-              radio_props={RadioBuySale}
+              radio_props={
+                props.language.language == 'vi' ? RadioBuySale : RadioBuySaleEN
+              }
               labelStyle={{fontSize: getFontXD(42)}}
               formHorizontal={true}
               style={styles.row}
@@ -158,4 +162,11 @@ const styles = StyleSheet.create({
     fontSize: getFontXD(48),
   },
 });
-export default CalculatorProfitLossView;
+
+const mapStateToProps = (state) => {
+  return {
+    language: state.languageReducer,
+  };
+};
+
+export default connect(mapStateToProps, {})(CalculatorProfitLossView);

src/Screens/Tool/ConvertUnit.js

@@ -5,14 +5,19 @@ import HeaderBack from '../../components/Header/HeaderBack';
 import PickerItem from '../../components/Picker/PickerItem';
 import I18n from '../../helper/i18/i18n';
 import AppText from '../../components/AppText';
-import {floatToPriceVnd, getFontXD, HEIGHTXD, toPriceVnd, WIDTHXD} from '../../Config/Functions';
+import {
+  floatToPriceVnd,
+  getFontXD,
+  HEIGHTXD,
+  toPriceVnd,
+  WIDTHXD,
+} from '../../Config/Functions';
 import R from '../../assets/R';
 import {getUnitList} from '../../apis/Functions/Transaction';
 import {showAlert, TYPE} from '../../components/DropdownAlert';
 import {hideLoading, showLoading} from '../../actions/loadingAction';
 import {connect} from 'react-redux';
 
-
 const ConvertUnit = (props) => {
   const [fromUnitList, setFromUnitList] = useState([]);
   const [toUnitList, setToUnitList] = useState([]);
@@ -41,7 +46,7 @@ const ConvertUnit = (props) => {
     if (res.status == 200 && res.data.code == 200) {
       setFromUnitList(res.data.data);
       setFromUnit(res.data.data[0]);
-            onChangeFromUnit('', res.data.data[0])
+      onChangeFromUnit('', res.data.data[0]);
     } else {
       showAlert(TYPE.ERROR, I18n.t('Notification'), I18n.t('Can_not_get_data'));
     }
@@ -51,7 +56,6 @@ const ConvertUnit = (props) => {
   const onChangeNumber = (string) => {
     let number = string.toString().split(',').join('');
     setNumber(number);
-
   };
 
   const onChangeFromUnit = (value, item) => {
@@ -76,17 +80,21 @@ const ConvertUnit = (props) => {
   const calcultorResult = () => {
     if (number && number != '' && parseFloat(number) > 0) {
       let result = parseFloat(number) * toUnit.rate;
-            setResult(`${floatToPriceVnd(number.toString())} ${fromUnit.name} = ${floatToPriceVnd(result.toString())} ${toUnit.name}`);
+      setResult(
+        `${floatToPriceVnd(number.toString())} ${
+          fromUnit.name
+        } = ${floatToPriceVnd(result.toString())} ${toUnit.name}`,
+      );
     } else {
-            setResult('')
+      setResult('');
     }
   };
 
   return (
     <View style={{flex: 1}}>
-            <HeaderBack title={'ConvertUnit'}/>
+      <HeaderBack title={'ConvertUnit'} />
       <View style={{flex: 1, paddingTop: 20, paddingHorizontal: 20}}>
-                <AppText style={styles.txtTitle} i18nKey={'Count'}/>
+        <AppText style={styles.txtTitle} i18nKey={'Count'} />
         <View style={styles.Item}>
           <View style={styles.wrap}>
             <TextInput
@@ -184,6 +192,7 @@ const styles = StyleSheet.create({
     shadowOpacity: 0.2,
     shadowRadius: 1.41,
     elevation: 2,
+    color: R.colors.black,
   },
   wrap: {
     flexDirection: 'row',
@@ -213,4 +222,3 @@ export default connect(mapStateToProps, {
   showLoading,
   hideLoading,
 })(ConvertUnit);
-

src/Screens/Tool/EscrowCalculator/EscrowCalculatorView.js

@@ -35,12 +35,15 @@ const EscrowCalculatorView = (props) => {
                 dataProduct={props.dataProduct}
                 setProduct={(product) => {
                   item.product = product;
-                  item.firstEscrow = parseFloat(item.lotNumber) * product.escrow;
+                  item.firstEscrow =
+                    parseFloat(item.lotNumber) * product.escrow;
                   props.setItemInput(item, index);
                 }}
                 setLotNumber={(lotNumber) => {
                   item.lotNumber = lotNumber.split('.').join('');
-                  item.firstEscrow = item.product ? parseFloat(item.lotNumber) * item.product.escrow : 0;
+                  item.firstEscrow = item.product
+                    ? parseFloat(item.lotNumber) * item.product.escrow
+                    : 0;
                   props.setItemInput(item, index);
                 }}
               />
@@ -57,23 +60,26 @@ const EscrowCalculatorView = (props) => {
           </View>
           <View style={{paddingHorizontal: WIDTHXD(60)}}>
             <TextMoney
+              editable={false}
+              title={I18n.t('FirstEscrowTotal')}
+              value={props.firstEscrowTotal}
+              titleStyle={{
+                marginTop: HEIGHTXD(160),
+                fontSize: getFontXD(39),
+              }}
+              inputStyle={{backgroundColor: R.colors.gray7}}
+            />
+
+            <TextMoney
               onChangeText={(val) => {
                 props.setFirstEscrow(val.split('.').join(''));
               }}
-              title={I18n.t('FirstEscrow')}
+              title={I18n.t('AvailableMargin')}
               value={props.firstEscrow}
               titleStyle={{
-                marginTop: HEIGHTXD(180),
                 fontSize: getFontXD(39),
               }}
             />
-            <TextMoney
-              editable={false}
-              title={I18n.t('FirstEscrowTotal')}
-              value={props.firstEscrowTotal}
-              titleStyle={{marginTop: HEIGHTXD(20), fontSize: getFontXD(39)}}
-              inputStyle={{backgroundColor: R.colors.gray7}}
-            />
             <Text style={styles.textMessage}>{props.message}</Text>
           </View>
 
@@ -144,7 +150,7 @@ const styles = StyleSheet.create({
     shadowOpacity: 0.25,
     shadowRadius: 3.84,
     elevation: 3,
-    borderRadius: 30,
+    borderRadius: WIDTHXD(144),
   },
   btn: {
     width: WIDTHXD(428),

src/Screens/Tool/EscrowCalculator/ItemEscrowCalculator.js

 import React from 'react';
-import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import {
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+  Dimensions,
+} from 'react-native';
 import I18n from '../../../helper/i18/i18n';
 import PickerItem from '../../../components/Picker/PickerItem';
 import {
@@ -12,27 +18,37 @@ import R from '../../../assets/R';
 import TextMoney from '../../../components/Input/InputMoney';
 import Icon from 'react-native-vector-icons/Entypo';
 
+const {width} = Dimensions.get('window');
+
 const ItemEscrowCalculator = (props) => {
   return (
     <View style={styles.viewInput}>
+      <View style={{flexDirection: 'row', flex: 1}}>
+        <View style={{flex: 1, marginVertical: 5}}>
           <Text style={styles.textTitle}>{I18n.t('Product')}</Text>
           <PickerItem
             data={props.dataProduct}
             onValueChange={(value, item) => {
               props.setProduct(item);
             }}
+            width={width / 2 - 30}
             iconSize={WIDTHXD(40)}
             iconColor={R.colors.black}
           />
-
+        </View>
+        <View style={{width: 20}} />
+        <View style={{flex: 1}}>
           <TextMoney
             onChangeText={(val) => {
               props.setLotNumber(val);
             }}
             title={I18n.t('LotTransactionNumber')}
             value={toPriceVnd(props.item.lotNumber)}
-        titleStyle={{marginTop: HEIGHTXD(20), fontSize: getFontXD(39)}}
+            titleStyle={{fontSize: getFontXD(39)}}
           />
+        </View>
+      </View>
+
       <TextMoney
         onChangeText={(val) => {}}
         title={I18n.t('FirstEscrow')}
@@ -52,6 +68,7 @@ const styles = StyleSheet.create({
     borderColor: '#707070',
     paddingHorizontal: WIDTHXD(24),
     paddingVertical: WIDTHXD(24),
+    
   },
   textTitle: {
     fontSize: getFontXD(39),

src/Screens/Tool/ExchangeRate.js

@@ -56,6 +56,11 @@ const ExchangeRate = (props) => {
     } else if (!priceExchange) setUsdTan('');
   };
 
+  const onClick = () => {
+    setPriceExchange('');
+    setUsdTan('');
+  };
+
   return (
     <View style={{flex: 1}}>
       <HeaderBack title={'ExchangeRate'} />
@@ -76,6 +81,7 @@ const ExchangeRate = (props) => {
         <TextField
           isNumber={true}
           maxLength={12}
+          value={priceExchange}
           onChangeText={(val) => setPriceExchange(val)}
           title={I18n.t('ConversionPrice')}
         />
@@ -85,7 +91,7 @@ const ExchangeRate = (props) => {
           title={I18n.t('ConvertUSD')}
         />
         <View style={styles.footer}>
-          <TouchableOpacity style={styles.btnContainer}>
+          <TouchableOpacity onPress={onClick} style={styles.btnContainer}>
             <AppText style={styles.txtBtn} i18nKey={'Delete'} />
           </TouchableOpacity>
         </View>

src/Screens/Transaction/DueDate/Item.js

@@ -19,27 +19,37 @@ import I18n from '../../../helper/i18/i18n';
 
 const Item = (props) => {
   const {item, isEndItem} = props;
-  console.log(item)
+  console.log(item);
   return (
-    <View style={[styles.container, isEndItem && {marginBottom: HEIGHTXD(100)}]}>
+    <View
+      style={[styles.container, isEndItem && {marginBottom: HEIGHTXD(100)}]}>
       <TouchableOpacity onPress={() => props.onPress(item)}>
         <Block flex={1} row>
           <View style={styles.wrapDate}>
-            <Image source={{uri: item.commoditiy.image_path}} style={styles.imgIcon} />
+            <Image
+              source={{uri: item.commoditiy.image_path}}
+              style={styles.imgIcon}
+            />
           </View>
-          <Block padding={[5, 10]} space={'between'} flex={1}>
+          <Block padding={[0, 10]} space={'between'} flex={1}>
             <View
               style={{
                 flex: 1,
                 flexDirection: 'row',
                 justifyContent: 'space-between',
               }}>
-              <Text numberOfLines={2} style={[styles.txtBlack, {flexWrap: 'wrap', flex: 1}]} numberOfLines={1} ellipsizeMode='tail'>
+              <Text
+                numberOfLines={2}
+                style={[styles.txtBlack, {flexWrap: 'wrap', flex: 1}]}
+                numberOfLines={1}
+                ellipsizeMode="tail">
                 {item.contract_name}
               </Text>
               <Text style={styles.txtMoney}>{item.term}</Text>
             </View>
-            <Text style={styles.txtCode}>{`${I18n.t('ContactCode')}: ${item.contract_code}`}</Text>
+            <Text style={styles.txtCode}>{`${I18n.t('ContactCode')}: ${
+              item.contract_code
+            }`}</Text>
             <Text style={styles.txt}>{item.open_interest_range}</Text>
           </Block>
         </Block>
@@ -64,7 +74,7 @@ const styles = StyleSheet.create({
     marginHorizontal: 10,
     backgroundColor: R.colors.white,
     borderRadius: HEIGHTXD(30),
-    marginVertical: HEIGHTXD(15)
+    marginVertical: HEIGHTXD(15),
   },
 
   wrapLeft: {
@@ -95,12 +105,12 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   txtBlack: {
-    fontSize: getFontXD(50),
+    fontSize: getFontXD(46),
     color: 'black',
   },
   imgIcon: {
-    width: WIDTHXD(150),
-    height: WIDTHXD(150),
+    width: WIDTHXD(178),
+    height: WIDTHXD(178),
     resizeMode: 'cover',
   },
   txtMoney: {

src/Screens/Transaction/Escrow/Item.js

@@ -15,29 +15,40 @@ import {
 } from '../../../Config/Functions';
 import R from '../../../assets/R';
 import Block from '../../../components/Block';
+import I18n from '../../../helper/i18/i18n';
 
 const Item = (props) => {
   const {item, isEndItem} = props;
   return (
-    <View style={[styles.container, isEndItem && {marginBottom: HEIGHTXD(100)}]}>
+    <View
+      style={[styles.container, isEndItem && {marginBottom: HEIGHTXD(100)}]}>
       <TouchableOpacity onPress={() => props.onPress(item)}>
         <Block flex={1} row>
           <View style={styles.wrapDate}>
             <Image source={{uri: item.image_path}} style={styles.imgIcon} />
           </View>
-          <Block padding={[5, 10]} space={'between'} flex={1}>
+          <Block padding={[0, 10]} flex={1}>
             <View
               style={{
-                flex: 1,
                 flexDirection: 'row',
                 justifyContent: 'space-between',
+                marginBottom: 5,
               }}>
-              <Text numberOfLines={2} style={[styles.txtBlack, {flexWrap: 'wrap', flex: 1}]} numberOfLines={1} ellipsizeMode='tail'>
+              <Text
+                numberOfLines={2}
+                style={[styles.txtBlack, {flexWrap: 'wrap', flex: 1}]}
+                numberOfLines={1}
+                ellipsizeMode="tail">
                 {item.name}
               </Text>
-              <Text style={styles.txtMoney}>{item.escrow > 0 ? toPriceVnd(item.escrow) : 0}</Text>
+              <Text style={styles.txtMoney}>
+                {item.escrow > 0 ? toPriceVnd(item.escrow) : 0}
+              </Text>
             </View>
-            <Text style={styles.txt}>{item.code}</Text>
+            <Text style={styles.txt}>
+              {' '}
+              {I18n.t('code')}: {item.code}
+            </Text>
           </Block>
         </Block>
       </TouchableOpacity>
@@ -61,7 +72,7 @@ const styles = StyleSheet.create({
     marginHorizontal: 10,
     backgroundColor: R.colors.white,
     borderRadius: HEIGHTXD(30),
-    marginVertical: HEIGHTXD(15)
+    marginVertical: HEIGHTXD(15),
   },
 
   wrapLeft: {
@@ -87,7 +98,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   txtBlack: {
-    fontSize: getFontXD(50),
+    fontSize: getFontXD(46),
     color: 'black',
   },
   imgIcon: {

src/Screens/Transaction/PriceList/Item.js

@@ -15,27 +15,35 @@ import {
 } from '../../../Config/Functions';
 import R from '../../../assets/R';
 import Block from '../../../components/Block';
+import I18n from '../../../helper/i18/i18n';
 
 const Item = (props) => {
   const {item, isEndItem} = props;
+  console.log('sss', item);
   return (
-    <View style={[styles.container, isEndItem && {marginBottom: HEIGHTXD(100)}]}>
+    <View
+      style={[styles.container, isEndItem && {marginBottom: HEIGHTXD(100)}]}>
       <TouchableOpacity onPress={() => props.onPress(item)}>
         <Block flex={1} row>
           <Image source={{uri: item.image_path}} style={styles.imgIcon} />
           <Block padding={[0, WIDTHXD(40)]} space={'between'} flex={1}>
             <View
               style={{
-                flex: 1,
                 flexDirection: 'row',
-                justifyContent: 'space-between',
               }}>
-              <Text numberOfLines={2} style={[styles.txtBlack, {flexWrap: 'wrap', flex: 1}]} numberOfLines={1} ellipsizeMode='tail'>
+              <Text
+                numberOfLines={2}
+                style={[styles.txtBlack, {flexWrap: 'wrap', flex: 1}]}
+                numberOfLines={1}
+                ellipsizeMode="tail">
                 {item.name}
               </Text>
               <Text style={styles.txtMoney}>{toPriceVnd(item.fee)}</Text>
             </View>
-            <Text style={styles.txt}>{item.code}</Text>
+            <Text style={styles.txt}>
+              {I18n.t('code')}: {item.code}
+            </Text>
+            <Text style={styles.txt}>{item.category.name}</Text>
           </Block>
         </Block>
       </TouchableOpacity>
@@ -59,7 +67,7 @@ const styles = StyleSheet.create({
     backgroundColor: R.colors.white,
     borderRadius: HEIGHTXD(30),
     marginVertical: HEIGHTXD(15),
-    marginHorizontal: WIDTHXD(30)
+    marginHorizontal: WIDTHXD(30),
   },
 
   wrapLeft: {
@@ -82,14 +90,14 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   txtBlack: {
-    fontSize: getFontXD(50),
+    fontSize: getFontXD(46),
     color: 'black',
   },
   imgIcon: {
-    width: WIDTHXD(150),
-    height: WIDTHXD(150),
+    width: WIDTHXD(178),
+    height: WIDTHXD(178),
     resizeMode: 'cover',
-    marginLeft: WIDTHXD(35)
+    marginLeft: WIDTHXD(35),
   },
   txtMoney: {
     fontSize: getFontXD(42),

src/Screens/Transaction/ProductDetail/Tab/ContractDescription/ContractDescription.js

@@ -17,6 +17,7 @@ const ContractDescription = (props) => {
       showLoading();
       const res = await getContractDescription(props.route.params.id);
       if (res.status === 200 && res.data.code === 200) {
+        console.log('Data', res.data.data);
         setContractDescription(res.data.data);
       } else {
         showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);

src/Screens/Transaction/TimeTransaction/Item.js

 import React from 'react';
-import {
-    View,
-    Text,
-    StyleSheet,
-    TouchableOpacity,
-    Image,
-} from 'react-native';
-import {
-    getFontXD,
-    HEIGHTXD,
-    WIDTHXD,
-} from '../../../Config/Functions';
+import {View, Text, StyleSheet, TouchableOpacity, Image} from 'react-native';
+import {getFontXD, HEIGHTXD, WIDTHXD} from '../../../Config/Functions';
 import R from '../../../assets/R';
 import Block from '../../../components/Block';
 
 const Item = (props) => {
   const {item, isEndItem} = props;
   return (
-        <View style={[styles.container, isEndItem && {marginBottom: HEIGHTXD(100)}]}>
+    <View
+      style={[styles.container, isEndItem && {marginBottom: HEIGHTXD(100)}]}>
       <TouchableOpacity onPress={() => props.onPress(item)}>
         <Block flex={1} row>
           <View style={styles.wrapDate}>
-                        <Image source={{uri: item.image_path}} style={styles.imgIcon}/>
+            <Image source={{uri: item.image_path}} style={styles.imgIcon} />
           </View>
-                    <Block padding={[0, 10]} space={'between'} flex={1}>
+          <Block padding={[0, 10]} flex={1}>
             <View
               style={{
-                                flex: 1,
                 flexDirection: 'row',
-                                justifyContent: 'space-between',
               }}>
-                            <Text numberOfLines={2} style={[styles.txtBlack, {flexWrap: 'wrap', flex: 1}]}
-                                  numberOfLines={1} ellipsizeMode='tail'>
+              <Text
+                numberOfLines={2}
+                style={[styles.txtBlack, {flexWrap: 'wrap', flex: 1}]}
+                numberOfLines={1}
+                ellipsizeMode="tail">
                 {item.name}
               </Text>
               <Text style={styles.txtMoney}>{item.trans_time}</Text>
             </View>
             {item.trans_session_list.map((sessionItem) => (
-                                <Text style={[styles.txt, {marginTop: HEIGHTXD(20)}]}>{sessionItem}</Text>
-                            )
-                        )}
+              <Text style={[styles.txt, {marginTop: HEIGHTXD(20)}]}>
+                {sessionItem}
+              </Text>
+            ))}
           </Block>
         </Block>
       </TouchableOpacity>
@@ -88,12 +81,12 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   txtBlack: {
-        fontSize: getFontXD(50),
+    fontSize: getFontXD(46),
     color: 'black',
   },
   imgIcon: {
-        width: WIDTHXD(150),
-        height: WIDTHXD(150),
+    width: WIDTHXD(178),
+    height: WIDTHXD(178),
     resizeMode: 'cover',
   },
   txtMoney: {

src/Screens/Transaction/Transaction.js

@@ -6,6 +6,7 @@ import Escrow from './Escrow/Escrow';
 import PriceList from './PriceList/PriceList';
 import TimeTransaction from './TimeTransaction/TimeTransaction';
 import I18n from '../../helper/i18/i18n';
+import {connect} from 'react-redux';
 
 import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
 const Tab = createMaterialTopTabNavigator();
@@ -29,22 +30,36 @@ const NewFeed = (props) => {
           <Tab.Screen
             name="PriceList"
             component={PriceList}
-            options={{tabBarLabel: 'Bảng phí'}}
+            options={{
+              tabBarLabel:
+                props.language.language == 'vi' ? 'Bảng phí' : 'PriceList',
+            }}
           />
           <Tab.Screen
             name="TimeTransaction"
             component={TimeTransaction}
-            options={{tabBarLabel: 'Thời gian GD'}}
+            options={{
+              tabBarLabel:
+                props.language.language == 'vi'
+                  ? 'Thời gian GD'
+                  : 'Time transace',
+            }}
           />
           <Tab.Screen
             name="Escrow"
             component={Escrow}
-            options={{tabBarLabel: 'Ký quỹ'}}
+            options={{
+              tabBarLabel:
+                props.language.language == 'vi' ? 'Ký quỹ' : 'Escrow',
+            }}
           />
           <Tab.Screen
             name="DueDate"
             component={DueDate}
-            options={{tabBarLabel: 'Lịch đáo hạn'}}
+            options={{
+              tabBarLabel:
+                props.language.language == 'vi' ? 'Lịch đáo hạn' : 'Due date',
+            }}
           />
         </Tab.Navigator>
       </View>
@@ -52,4 +67,10 @@ const NewFeed = (props) => {
   );
 };
 
-export default NewFeed;
+const mapStateToProps = (state) => {
+  return {
+    language: state.languageReducer,
+  };
+};
+
+export default connect(mapStateToProps, {})(NewFeed);

src/Screens/VersionChecker/index.js

@@ -7,14 +7,22 @@ import {
   StyleSheet,
   Image,
   TouchableWithoutFeedback,
-    Linking, Platform,
+  Linking,
+  Platform,
 } from 'react-native';
 import R from '../../assets/R';
-import {getFontXD, getHeight, getWidth, HEIGHTXD, WIDTHXD} from '../../Config/Functions';
+import {
+  getFontXD,
+  getHeight,
+  getWidth,
+  HEIGHTXD,
+  WIDTHXD,
+} from '../../Config/Functions';
 import I18n from '../../helper/i18/i18n';
 import DeviceInfo from 'react-native-device-info';
 import {getNewestVersionInfo} from '../../apis/Functions/users';
 import InAppUpdate from '../../helper/InAppUpdate';
+import {connect} from 'react-redux';
 
 const VersionChecker = (props) => {
   const [visible, setVisible] = useState(false);
@@ -31,10 +39,15 @@ const VersionChecker = (props) => {
     });
     if ((res.data.code = 200 && res.data.data)) {
       console.log(res);
-            if (res.data.data[0].version_name !== verCurrent || res.data.data[0].build.toString() !== DeviceInfo.getBuildNumber) {
+      if (
+        res.data.data[0].version_name !== verCurrent ||
+        res.data.data[0].build.toString() !== DeviceInfo.getBuildNumber
+      ) {
         setVersion(res.data.data[0].version_name);
         setVisible(true);
-                setIsForceUpdate(res.data.data[0].is_require_update == 0 ? false : true);
+        setIsForceUpdate(
+          res.data.data[0].is_require_update == 0 ? false : true,
+        );
       }
     }
   };
@@ -44,7 +57,7 @@ const VersionChecker = (props) => {
     setIsForceUpdate(isForceUpdate);
   };
 
-    const _renderDivider = () => <View style={styles.dividerStyle}/>;
+  const _renderDivider = () => <View style={styles.dividerStyle} />;
 
   const onOutsidePressed = () => {
     setVisible(false);
@@ -53,17 +66,20 @@ const VersionChecker = (props) => {
   const onUpdatePressed = async () => {
     try {
       if (Platform.OS === 'ios') {
-                Linking.openURL('itms-apps://itunes.apple.com/us/app/dcv-invest/id1556621903?l=id');
+        Linking.openURL(
+          'itms-apps://itunes.apple.com/us/app/dcv-invest/id1556621903?l=id',
+        );
       } else {
         // try {
         //     InAppUpdate.checkUpdate()
         // } catch(e) {
         //     console.log(e)
         // }
-                Linking.openURL('https://play.google.com/store/apps/details?id=com.dcv.invest');
-            }
-        } catch (error) {
+        Linking.openURL(
+          'https://play.google.com/store/apps/details?id=com.dcv.invest',
+        );
       }
+    } catch (error) {}
   };
 
   const onRequestClose = () => null;
@@ -97,50 +113,76 @@ const VersionChecker = (props) => {
       transparent
       animationType="fade"
       style={{position: 'absolute'}}
-            visible={visible}
-        >
+      visible={visible}>
       {renderBackdrop()}
       <View pointerEvents="box-none" style={styles.containerStyle}>
         <View style={styles.imageUpgradeContainer} zIndex={100}>
           <Image
             source={R.images.iconUpgrade}
-                        style={[styles.imageUpgradeStyle, {tintColor: R.colors.main}]}/>
+            style={[styles.imageUpgradeStyle, {tintColor: R.colors.main}]}
+          />
         </View>
 
         <View style={styles.contentContainerStyle}>
-                    <Text style={styles.titleStyle}>{I18n.t('Update')}</Text>
+          <Text style={styles.titleStyle}>
+            {props.language.language == 'vi' ? 'Cập nhật' : 'Update'}
+          </Text>
           <Text style={styles.versionLabelStyle}>
             {I18n.t('Version')}
             {': '}
             {version}
           </Text>
 
-                    <Text style={styles.descStyle}>{I18n.t('UpdateDescription')}</Text>
+          <Text style={styles.descStyle}>
+            {' '}
+            {props.language.language == 'vi'
+              ? 'Đã có phiên bản DCVInvest mới. Cập nhật ngay để tiếp tục sử dụng và trải nghiệm những tính năng mới nhất của hệ thống!'
+              : 'A new version of DCVInvest is available. Update now to continue using and experiencing the latest system features!'}
+          </Text>
 
           {_renderDivider()}
-                    {isForceUpdate ?
-                        <TouchableOpacity onPress={() => onUpdatePressed()} style={styles.notNowContainerStyle}>
-                            <Text
-                                style={[styles.textNotNowStyle, {color: R.colors.main}]}>{I18n.t('Update')}</Text>
+          {isForceUpdate ? (
+            <TouchableOpacity
+              onPress={() => onUpdatePressed()}
+              style={styles.notNowContainerStyle}>
+              <Text style={[styles.textNotNowStyle, {color: R.colors.main}]}>
+                {props.language.language == 'vi' ? 'Cập nhật' : 'Update'}
+              </Text>
             </TouchableOpacity>
-                        :
-                        <View style={[styles.notNowContainerStyle, {
+          ) : (
+            <View
+              style={[
+                styles.notNowContainerStyle,
+                {
                   flexDirection: 'row',
                   marginHorizontal: WIDTHXD(100),
-                        }]}>
-                            <TouchableOpacity onPress={() => cancelUpdate()}
-                                              style={[styles.btnButton, {paddingRight: WIDTHXD(60) }]}>
+                },
+              ]}>
+              <TouchableOpacity
+                onPress={() => cancelUpdate()}
+                style={[styles.btnButton, {paddingRight: WIDTHXD(60)}]}>
                 <Text
-                                    style={[styles.textNotNowStyle, {color: R.colors.color777, textAlign: 'right'}]}>{I18n.t('Cancel')}</Text>
+                  style={[
+                    styles.textNotNowStyle,
+                    {color: R.colors.color777, textAlign: 'right'},
+                  ]}>
+                  {props.language.language == 'vi' ? 'Bỏ qua' : 'Cancel'}
+                </Text>
               </TouchableOpacity>
               <View style={styles.dividerStyleVertical}></View>
-                            <TouchableOpacity onPress={() => onUpdatePressed()}
+              <TouchableOpacity
+                onPress={() => onUpdatePressed()}
                 style={[styles.btnButton, {paddingLeft: WIDTHXD(60)}]}>
                 <Text
-                                    style={[styles.textNotNowStyle, {color: R.colors.main, textAlign: 'left'}]}>{I18n.t('Update')}</Text>
+                  style={[
+                    styles.textNotNowStyle,
+                    {color: R.colors.main, textAlign: 'left'},
+                  ]}>
+                  {I18n.t('Update')}
+                </Text>
               </TouchableOpacity>
             </View>
-                    }
+          )}
         </View>
       </View>
     </Modal>
@@ -245,4 +287,10 @@ const styles = StyleSheet.create({
   },
 });
 
-export default VersionChecker;
+const mapStateToProps = (state) => {
+  return {
+    language: state.languageReducer,
+  };
+};
+
+export default connect(mapStateToProps, {})(VersionChecker);

src/components/CountDown.js

+import React, {Component, useEffect, useState} from 'react';
+import {View, Text} from 'react-native';
+import {showAlert, TYPE} from './DropdownAlert';
+import I18n from '../helper/i18/i18n';
+import {getFontXD} from '../Config/Functions';
+
+const CountDown = (props) => {
+  const [count, setCount] = useState(300);
+
+  useEffect(() => {
+    setCount(300);
+  }, [props.isReset]);
+
+  useEffect(() => {
+    if (count == 0)
+      showAlert(TYPE.ERROR, I18n.t('Notification'), I18n.t('Overtime'));
+  }, [count]);
+
+  useEffect(() => {
+    if (count > 0) {
+      const timer = setTimeout(() => {
+        setCount(count - 1);
+      }, 1000);
+      return () => clearTimeout(timer);
+    }
+  });
+
+  const secondToString = (count) => {
+    const temp = count % 60;
+    return temp < 10 ? `0${temp}` : temp;
+  };
+
+  return (
+    <View>
+      <Text
+        style={{
+          color: '#A2A2A2',
+          fontStyle: 'italic',
+          fontSize: getFontXD(42),
+        }}>
+        0{parseInt(count / 60)}:{secondToString(count)}
+      </Text>
+    </View>
+  );
+};
+
+export default CountDown;

src/components/Header/Drawer.js

@@ -36,6 +36,7 @@ import {
   ROSE,
   HISTORY,
   CHOOSEMETHOD,
+  WALLETWITHDRAW,
 } from '../../routers/ScreenNames';
 import {useNavigation} from '@react-navigation/native';
 import {connect} from 'react-redux';
@@ -100,7 +101,7 @@ const menus = [
         id: '62',
         title: 'Withdraw',
         icon: R.images.iconWithdrawMenu,
-        screen: WITHDRAW,
+        screen: WALLETWITHDRAW,
       },
       {
         id: '63',

src/components/Header/HeaderHome.js

@@ -12,7 +12,7 @@ import {
   Alert,
 } from 'react-native';
 import R from '../../assets/R';
-import {getFontXD, HEIGHT, WIDTHXD} from '../../Config/Functions';
+import {getFontXD, getWidth, HEIGHT, WIDTHXD} from '../../Config/Functions';
 import LinearGradient from 'react-native-linear-gradient';
 import {connect} from 'react-redux';
 import {HEIGHTXD, toPriceVnd} from '../../Config/Functions';
@@ -195,14 +195,25 @@ const renderActions = (onClickDetail) => {
           <AppText i18nKey={'History'} style={styles.txt} />
         </TouchableOpacity>
       </View>
-      <View style={{justifyContent: 'center', alignItems: 'center'}}>
-        <View style={{width: 30, height: 20}}>
+      <View
+        style={{
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}>
         <TouchableOpacity
-            onPress={() => onClickDetail()}
-            style={styles.containerBtn}>
+          onPress={() => {
+            onClickDetail();
+          }}
+          style={{
+            width: HEIGHTXD(160),
+            height: HEIGHTXD(80),
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}>
+          <View style={styles.containerBtn}>
             <Icon name={'up'} size={18} color={R.colors.color777} />
-          </TouchableOpacity>
           </View>
+        </TouchableOpacity>
       </View>
     </View>
   );
@@ -280,14 +291,25 @@ const HeaderHome = (props) => {
               {detail ? (
                 renderActions(onClickDetail)
               ) : (
-                <View style={{justifyContent: 'center', alignItems: 'center'}}>
-                  <View style={{width: 30, height: 20}}>
+                <View
+                  style={{
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                  }}>
                   <TouchableOpacity
-                      onPress={onClickDetail}
-                      style={styles.containerBtn}>
+                    onPress={() => {
+                      onClickDetail();
+                    }}
+                    style={{
+                      width: HEIGHTXD(160),
+                      height: HEIGHTXD(80),
+                      justifyContent: 'center',
+                      alignItems: 'center',
+                    }}>
+                    <View style={styles.containerBtn}>
                       <Icon name={'down'} size={18} color={R.colors.color777} />
-                    </TouchableOpacity>
                     </View>
+                  </TouchableOpacity>
                 </View>
               )}
             </View>
@@ -317,22 +339,22 @@ const styles = StyleSheet.create({
     borderBottomColor: '#EDEDF1',
   },
   containerBtn: {
-    position: 'absolute',
-    width: 30,
-    height: 30,
+    width: HEIGHTXD(80),
+    height: HEIGHTXD(80),
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: R.colors.white,
-    borderRadius: 20,
-    top: 5,
+    borderRadius: HEIGHTXD(80),
+
     shadowColor: '#000',
+    marginTop: 15,
     shadowOffset: {
-      width: 0,
-      height: 1,
+      width: 1,
+      height: 2,
     },
-    shadowOpacity: 0.25,
+    shadowOpacity: 0.55,
     shadowRadius: 1.84,
-    elevation: 1,
+    elevation: 3,
   },
   img: {
     height: Platform.OS == 'ios' ? HEIGHTXD(728) : HEIGHTXD(808),
@@ -343,7 +365,7 @@ const styles = StyleSheet.create({
   },
   containerTop: {
     backgroundColor: 'white',
-    width: '90%',
+    width: getWidth() - 40,
     borderRadius: 10,
     shadowColor: '#000',
     shadowOffset: {

src/components/Input/InputMoney.js

@@ -5,16 +5,27 @@ import R from '../../assets/R';
 import {toPriceVnd} from '../../Config/Functions';
 
 const TextMoney = (props) => {
-  const {title, onChangeText, maxLength, value, editable, titleStyle, inputStyle} = props;
+  const {
+    title,
+    onChangeText,
+    maxLength,
+    value,
+    editable,
+    titleStyle,
+    inputStyle,
+  } = props;
 
   return (
     <View style={{marginVertical: 5}}>
       <Text
-        style={[{
+        style={[
+          {
             fontSize: getFontXD(42),
             color: R.colors.color777,
             marginBottom: 5,
-        }, titleStyle && titleStyle]}>
+          },
+          titleStyle && titleStyle,
+        ]}>
         {title ? title : ''}
       </Text>
       <TextInput
@@ -25,7 +36,8 @@ const TextMoney = (props) => {
         value={toPriceVnd(value)}
         keyboardType={'number-pad'}
         onChangeText={(val) => onChangeText(val.split(',').join(''))}
-        style={[{
+        style={[
+          {
             height: HEIGHTXD(109),
             color: 'black',
             borderRadius: 7,
@@ -43,7 +55,9 @@ const TextMoney = (props) => {
             shadowOpacity: 0.25,
             shadowRadius: 1.84,
             elevation: 1,
-        }, inputStyle && inputStyle]}
+          },
+          inputStyle && inputStyle,
+        ]}
       />
     </View>
   );

src/helper/FirebaseNotification.js

@@ -18,7 +18,6 @@ const FirebaseNotification = (props) => {
       id: props.user.uid,
       platform: Platform.OS,
     });
-    console.log('res', res.data.data);
     if (res.data.code == 200 && res.data.data) {
       props.saveUserToRedux(res.data.data);
     }

src/helper/i18/locales/en.js

@@ -193,7 +193,7 @@ export default {
   NothingChange: 'Nothing change',
   Tradding: 'Tradding',
   ContractDescription: 'Contract description',
-  QualityStandard: 'Quality Standard',
+  QualityStandard: 'Standard',
   CommodityTransactions: 'Commodity transactions',
   CommodityCode: 'Commodity code',
   Escrow: 'Escrow',
@@ -238,7 +238,7 @@ export default {
   FirstEscrowTotal: 'First escrow total (VNĐ)',
   Calculator: 'Calculator',
   Tool: 'Tool',
-
+  _Sell: 'Sell',
   CaculatedDeposit: 'Caculated deposit',
   CaculatedProfitLoss: 'Caculated profit loss',
   CaculatedStopLoss: 'Caculated stop loss',
@@ -265,15 +265,17 @@ export default {
   Sunday: 'Sunday',
   CalculatorProfitLoss: 'Calculator profit and loss',
   Buy: 'Buy',
-  Sale: 'Sale',
+  Sale: 'Sell',
   OpenPrice: 'Open price',
   CloseStatusPrice: 'Close stauts price',
   SlotNumber: 'Slot number',
   ProfitLoss: 'Profit/Loss',
   BUY_IN: 'Buy in',
   SELL_OUT: 'Sell out',
-  YouCanNotTransaction: 'You can not trade the above contracts with the current available escrow',
-  YouCanTransaction: 'You can trade the above contracts with the current available escrow',
+  YouCanNotTransaction:
+    'You can not trade the above contracts with the current available escrow',
+  YouCanTransaction:
+    'You can trade the above contracts with the current available escrow',
   EnterContractInfo: 'Enter contract information',
   EnterFirstEscrow: 'Enter first escrow',
 
@@ -282,5 +284,9 @@ export default {
   Count: 'Count',
   Systemmaintenance: 'The system is maintenance',
   WaitUpdateCQG: 'Waiting Update CQG',
-  
+  code: 'Code',
+  AvailableMargin: 'Available margin',
+  WarnMinReqestWithdraw:
+    'The withdrawal amount must be more than 1 million dong',
+  Overtime: 'Overtime OTP',
 };

src/helper/i18/locales/vn.js

@@ -196,7 +196,7 @@ export default {
   NothingChange: 'Không có gì thay đổi',
   Tradding: 'Giao dịch',
   ContractDescription: 'Đặc tả hợp đồng',
-  QualityStandard: 'TIêu chuẩn chất lượng',
+  QualityStandard: 'TIêu chuẩn',
   CommodityTransactions: 'Hàng hóa giao dịch',
   CommodityCode: 'Mã hàng hóa',
   Escrow: 'Ký quỹ',
@@ -267,7 +267,7 @@ export default {
   BUY_IN: 'Mua vào',
   SELL_OUT: 'Bán ra',
   EscrowCalculator: 'Tính ký quỹ',
-  FirstEscrowTotal: 'Ký quỹ khả dụng',
+  FirstEscrowTotal: 'Tổng ký quỹ ban đầu (VNĐ)',
   YouCanNotTransaction:
     'Bạn không thể giao dịch các hợp đồng kể trên với mức ký quỹ khả dụng hiện tại',
   YouCanTransaction:
@@ -280,4 +280,13 @@ export default {
   Count: 'Số lượng',
   Systemmaintenance: 'Hệ thống đang bảo trì',
   WaitUpdateCQG: 'Chờ cập nhật CQG',
+  FirstPriceRange: 'Giới hạn giá ban đầu',
+  ExpandPriceRange: 'Giới hạn giá mở rộng',
+  code: 'Mã',
+  AvailableMargin: 'Ký quỹ khả dụng (VNĐ) ',
+  Calculator: 'Tính',
+  _Sell: 'Bán',
+  FirstEscrow: 'Ký quỹ ban đầu (VNĐ) ',
+  WarnMinReqestWithdraw: 'Số tiền rút phải lớn hơn 1 triệu đồng',
+  Overtime: 'Mã OTP hết hạn sử dụng',
 };

src/routers/PlussModal.js

@@ -10,7 +10,7 @@ import {
 } from 'react-native';
 import Icon from 'react-native-vector-icons/Entypo';
 import R from '../assets/R';
-import {HEIGHTXD, WIDTHXD, getFontXD} from '../Config/Functions';
+import {HEIGHTXD, WIDTHXD, getFontXD, WIDTHXDICON} from '../Config/Functions';
 import Modal from 'react-native-modal';
 
 import {useNavigation} from '@react-navigation/native';
@@ -37,7 +37,7 @@ const PlussModal = (props) => {
     <View style={styles.container}>
       <View style={styles.wraper}>
         <TouchableOpacity onPress={toggleModal} style={styles.btn}>
-          <Icon name={'plus'} size={27} color={R.colors.white} />
+          <Icon name={'plus'} size={HEIGHTXD(60)} color={R.colors.white} />
         </TouchableOpacity>
       </View>
 
@@ -95,8 +95,8 @@ export default PlussModal;
 const styles = StyleSheet.create({
   btn: {
     backgroundColor: R.colors.main,
-    width: WIDTHXD(144),
-    height: WIDTHXD(144),
+    width: WIDTHXDICON(135),
+    height: WIDTHXDICON(135),
     justifyContent: 'center',
     alignItems: 'center',
     shadowColor: '#000',
@@ -107,21 +107,21 @@ const styles = StyleSheet.create({
     shadowOpacity: 0.25,
     shadowRadius: 3.84,
     elevation: 3,
-    borderRadius: 30,
+    borderRadius: WIDTHXDICON(144),
   },
   container: {
     flex: 1,
   },
   wraper: {
     backgroundColor: R.colors.white,
-    width: WIDTHXD(160),
-    height: WIDTHXD(160),
+    width: WIDTHXDICON(144),
+    height: WIDTHXDICON(144),
     justifyContent: 'center',
     alignItems: 'center',
     position: 'absolute',
-    top: -20,
+    top: -HEIGHTXD(45),
     left: 15,
-    borderRadius: WIDTHXD(90),
+    borderRadius: WIDTHXDICON(90),
   },
   footer: {
     backgroundColor: 'white',

src/routers/TabNavigation.js

@@ -23,6 +23,7 @@ import {changeLanguage} from '../actions/language';
 import KEY from '../assets/AsynStorage';
 import AsyncStorage from '@react-native-community/async-storage';
 import {DETAILNEW} from '../routers/ScreenNames';
+import {getHeight, getWidth} from '../Config/Functions';
 
 const Tab = createBottomTabNavigator();
 
@@ -31,6 +32,7 @@ const PayScreenComponent = () => {
 };
 
 const TabNavigator = (props) => {
+  console.log(getHeight(), getWidth());
   const navigate = useNavigation();
   useEffect(() => {
     setInitLanguage();
@@ -111,7 +113,8 @@ const TabNavigator = (props) => {
           name="Screen2"
           component={Transaction}
           options={{
-            tabBarLabel: I18n.t('Tradding'),
+            tabBarLabel:
+              props.language.language == 'vi' ? 'Giao dịch' : 'Tradding',
             tabBarIcon: ({color, size}) => (
               <Image
                 source={R.images.iconTransaction2}
@@ -133,7 +136,8 @@ const TabNavigator = (props) => {
           name="Screen3"
           component={Notification}
           options={{
-            tabBarLabel: I18n.t('Notification'),
+            tabBarLabel:
+              props.language.language == 'vi' ? 'Thông báo' : 'Notification',
             tabBarIcon: ({color, size}) => (
               <Ionicons
                 name="ios-notifications-outline"
@@ -147,7 +151,7 @@ const TabNavigator = (props) => {
           name="Screen4"
           component={NewFeed}
           options={{
-            tabBarLabel: I18n.t('News'),
+            tabBarLabel: props.language.language == 'vi' ? 'Tin tức' : 'News',
             tabBarIcon: ({color, size}) => (
               <Ionicons name="newspaper-outline" size={size} color={color} />
             ),
@@ -163,6 +167,7 @@ const mapStateToProps = (state) => {
     user: state.userReducer,
     notifi: state.CountNotificationReducer,
     screenInit: state.ScreenInitReducer,
+    language: state.languageReducer,
   };
 };