escrow UI

android/app/build.gradle

@@ -132,7 +132,7 @@ android {
         applicationId "com.dcv.invest"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 4
+        versionCode 5
         versionName "1.3"
         vectorDrawables.useSupportLibrary = true
     }
@@ -167,7 +167,7 @@ android {
             // see https://facebook.github.io/react-native/docs/signed-apk-android.
             signingConfig signingConfigs.release
             minifyEnabled enableProguardInReleaseBuilds
-            debuggable true
+            debuggable false
             proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
         }
     }
@@ -242,4 +242,3 @@ task copyDownloadableDepsToLibs(type: Copy) {
 apply plugin: 'com.google.gms.google-services'
 
 apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
-  
\ No newline at end of file

src/Screens/EscrowCalculator/EscrowCalculator.js

+import React, {useEffect, useState} from 'react';
+import EscrowCalculatorView from './EscrowCalculatorView';
+
+const EscrowCalculator = (props) => {
+    const [dataProduct, setDataProduct] = useState([])
+    const setProduct = (item) => {
+
+    }
+    return (
+        <EscrowCalculatorView
+            dataProduct={dataProduct}
+            setProduct={setProduct}
+        />
+    );
+};
+export default EscrowCalculator;

src/Screens/EscrowCalculator/EscrowCalculatorView.js

+import React from 'react';
+import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import HeaderBack from '../../components/Header/HeaderBack';
+import {getFontXD, getWidth, HEIGHTXD, WIDTHXD} from '../../Config/Functions';
+import R from '../../assets/R';
+import I18n from '../../helper/i18/i18n';
+import PickerItem from '../../components/Picker/PickerItem';
+import TextMoney from '../../components/Input/InputMoney';
+import {ADDMETHODPAY} from '../../routers/ScreenNames';
+import Icon from 'react-native-vector-icons/Entypo';
+
+const EscrowCalculatorView = (props) => {
+    return (
+        <View style={{flex: 1, flexDirection: 'column', backgroundColor: 'white'}}>
+            <HeaderBack title={'EscrowCalculator'} isWhite={true}/>
+            <View style={styles.viewInput}>
+                <Text
+                    style={styles.textTitle}>
+                    {I18n.t('Product')}
+                </Text>
+                <PickerItem
+                    data={props.dataProduct}
+                    onValueChange={(value, item) => {
+                        props.setProduct(item);
+                    }}
+                    iconSize={WIDTHXD(40)}
+                    iconColor={R.colors.black}
+                />
+
+                <TextMoney
+                    onChangeText={(val) => {
+                    }}
+                    title={I18n.t('LotTransactionNumber')}
+                    value={1000}
+                    titleStyle={{color: R.colors.black, marginTop: HEIGHTXD(20), fontSize: getFontXD(39)}}
+                />
+                <TextMoney
+                    onChangeText={(val) => {
+                    }}
+                    title={I18n.t('FirstEscrow')}
+                    value={1000}
+                    titleStyle={{color: R.colors.black, fontSize: getFontXD(39)}}
+                    editable={false}
+                    inputStyle={{backgroundColor: R.colors.gray7}}
+                />
+            </View>
+            <View style={{flexDirection: 'row', justifyContent: 'flex-end'}}>
+                <TouchableOpacity
+                    onPress={() => {
+                    }}
+                    style={styles.containerBtn}>
+                    <Icon name={'plus'} size={27} color={R.colors.white}/>
+                </TouchableOpacity>
+            </View>
+            <View style={{paddingHorizontal: WIDTHXD(60)}}>
+                <TextMoney
+                    onChangeText={(val) => {
+                    }}
+                    title={I18n.t('FirstEscrow')}
+                    value={1000}
+                    titleStyle={{
+                        color: R.colors.black,
+                        marginTop: HEIGHTXD(180),
+                        fontSize: getFontXD(39),
+                    }}
+                />
+                <TextMoney
+                    onChangeText={(val) => {
+                    }}
+                    editable={false}
+                    title={I18n.t('FirstEscrowTotal')}
+                    value={1000}
+                    titleStyle={{color: R.colors.black, marginTop: HEIGHTXD(20), fontSize: getFontXD(39)}}
+                    inputStyle={{backgroundColor: R.colors.gray7}}
+                />
+                <Text style={styles.textMessage}>Bạn có thể giao dịch các hợp đồng kể trên với mức ký quỹ
+                    khả dung hiện tại</Text>
+            </View>
+            <View style={{
+                width: '100%',
+                flexDirection: 'row',
+                justifyContent: 'center',
+                alignItems: 'center',
+                position: 'absolute',
+                bottom: HEIGHTXD(50),
+            }}>
+                <TouchableOpacity onPress={() => {
+                }} style={[styles.btn, {backgroundColor: R.colors.red2, marginRight: WIDTHXD(72)}]}>
+                    <Text style={styles.txtButton}>{I18n.t('Delete')}</Text>
+                </TouchableOpacity>
+                <TouchableOpacity onPress={() => {
+                }} style={styles.btn}>
+                    <Text style={styles.txtButton}>{I18n.t('Calculator')}</Text>
+                </TouchableOpacity>
+            </View>
+        </View>
+    );
+
+};
+export default EscrowCalculatorView;
+const styles = StyleSheet.create({
+    viewInput: {
+        marginHorizontal: WIDTHXD(36),
+        marginTop: WIDTHXD(69),
+        marginBottom: WIDTHXD(44),
+        borderWidth: 0.3,
+        borderColor: '#707070',
+        paddingHorizontal: WIDTHXD(24),
+        paddingVertical: WIDTHXD(24),
+    },
+    textTitle: {
+        fontSize: getFontXD(39),
+        color: R.colors.black,
+    },
+    textMessage: {
+        fontSize: getFontXD(39),
+        color: R.colors.black,
+        marginTop: HEIGHTXD(68)
+    },
+    containerBtn: {
+        marginHorizontal: WIDTHXD(36),
+        backgroundColor: R.colors.main,
+        width: WIDTHXD(144),
+        height: WIDTHXD(144),
+        justifyContent: 'center',
+        alignItems: 'center',
+        shadowColor: '#000',
+        shadowOffset: {
+            width: 0,
+            height: 2,
+        },
+        shadowOpacity: 0.25,
+        shadowRadius: 3.84,
+        elevation: 3,
+        borderRadius: 30,
+    },
+    btn: {
+        width: WIDTHXD(428),
+        height: HEIGHTXD(120),
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: R.colors.main,
+        borderRadius: 5,
+        marginBottom: HEIGHTXD(42),
+    },
+    txtButton: {
+        color: R.colors.white,
+        fontSize: getFontXD(48),
+    },
+});

src/Screens/Home/PriceListView.js

@@ -11,7 +11,7 @@ import {
 import {getFontXD, HEIGHTXD, WIDTHXD} from '../../Config/Functions';
 import R from '../../assets/R';
 import ItemPrice from './ItemPrice';
-import {PRODUCTDETAIL} from '../../routers/ScreenNames';
+import {PRODUCTDETAIL, ESCROWCALCULATOR} from '../../routers/ScreenNames';
 import {useNavigation} from '@react-navigation/native';
 
 const PriceListView = (props) => {
@@ -74,7 +74,7 @@ const PriceListView = (props) => {
                         </TouchableOpacity>
                     </View>}
                 renderItem={({item}) => <ItemPrice item={item}
-                                                   onPress={() => navigate.navigate(PRODUCTDETAIL, {
+                                                   onPress={() => navigate.navigate(ESCROWCALCULATOR, {
                                                        id: item.id,
                                                        name: item.name,
                                                    })}/>}

src/assets/colors.js

@@ -46,6 +46,7 @@ const colors = {
   gray4: '#e6e6e6',
   gray5: 'rgba(226,232,235, 1)',
   gray6: '#929292',
+  gray7: '#DBDBDB',
   orange: '#FF9C00',
   lightBlue: '#1a8cff',
   lightBlue1: '#008ae6',

src/components/Input/InputMoney.js

@@ -5,16 +5,16 @@ import R from '../../assets/R';
 import {toPriceVnd} from '../../Config/Functions';
 
 const TextMoney = (props) => {
-  const {title, onChangeText, maxLength, value, editable} = 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]}>
         {title ? title : ''}
       </Text>
       <TextInput
@@ -25,7 +25,7 @@ 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 +43,7 @@ const TextMoney = (props) => {
           shadowOpacity: 0.25,
           shadowRadius: 1.84,
           elevation: 1,
-        }}
+        }, inputStyle && inputStyle]}
       />
     </View>
   );

src/helper/i18/locales/en.js

@@ -231,4 +231,10 @@ export default {
   RejectVerify: 'Reject verify',
   UploadImageFail:
     'The network connection is not stable, please check the connection',
+  EscrowCalculator: 'Escrow calculator',
+  Product: 'Product',
+  LotTransactionNumber: 'Lot transaction number',
+  FirstEscrow: 'First escrow (VNĐ)',
+  FirstEscrowTotal: 'First escrow total (VNĐ)',
+  Calculator: 'Calculator',
 };

src/helper/i18/locales/vn.js

@@ -233,4 +233,10 @@ export default {
   RejectVerify: 'Từ chối xác minh',
   UploadImageFail:
     'Đường truyền mạng không ổn định.Xin kiểm tra lại đường truyền!',
+  EscrowCalculator: 'Tính ký quỹ',
+  Product: 'Mặt hàng',
+  LotTransactionNumber: 'Số lot giao dịch',
+  FirstEscrow: 'Ký quỹ ban đầu (VNĐ)',
+  FirstEscrowTotal: 'Tổng ký quỹ ban đầu (VNĐ)',
+  Calculator: 'Tính',
 };

src/routers/ScreenNames.js

@@ -69,3 +69,4 @@ export const PRODUCTDETAIL = 'PRODUCTDETAIL';
 export const REGISTEROTP = 'REGISTEROTP';
 
 export const OTPWALLET = 'OTPWALLET';
+export const ESCROWCALCULATOR = 'ESCROWCALCULATOR';

src/routers/StackNavigation.js

@@ -48,6 +48,7 @@ import DetailHistory from '../Screens/Action/History/DetailHistory';
 import ProductDetail from '../Screens/Transaction/ProductDetail/ProductDetail';
 import RegisterOTP from '../Screens/Authen/RegisterOTP';
 import OTPWallet from '../Screens/Action/Wallet/OTPWallet';
+import EscrowCalculator from '../Screens/EscrowCalculator/EscrowCalculator';
 
 import * as ScreenName from './ScreenNames';
 
@@ -128,6 +129,10 @@ function MyStack(props) {
         name={ScreenName.FORGOTPASSWORD}
         component={ForgotPassWord}
       />
+      <Stack.Screen
+        name={ScreenName.ESCROWCALCULATOR}
+        component={EscrowCalculator}
+      />
     </Stack.Navigator>
   );
 }