merge code

android/app/build.gradle

@@ -132,7 +132,7 @@ android {
         applicationId "com.dcv.invest"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 4
+        versionCode 8
         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/Config/constants.js

+import I18n from '../helper/i18/i18n'
+export const RadioBuySale = [
+    {label: I18n.t('Buy'), value: 0},
+    {label: I18n.t('Sale'), value: 1}
+]

src/Screens/AccountVerification/Tab/Profile.js

@@ -67,6 +67,7 @@ const Profile = (props) => {
       data.append(key, body[key]);
     });
     console.log('Data', data);
+
     return data;
   };
 

src/Screens/Tool/CaculatedProfitLoss.js

-import React, {Component} from 'react';
-import {View, Text} from 'react-native';
-
-const CaculatedProfitLoss = (props) => {
-  return (
-    <View>
-      <Text>CaculatedProfitLoss</Text>
-    </View>
-  );
-};
-
-export default CaculatedProfitLoss;

src/Screens/Tool/CalculatorProfitLoss/CalculatorProfitLoss.js

+import React, {useEffect, useState} from 'react';
+import CalculatorProfitLossView from './CalculatorProfitLossView';
+import {RadioBuySale} from '../../../Config/constants';
+import I18n from '../../../helper/i18/i18n';
+import {checkFormatArray} from '../../../Config/Functions';
+import {showAlert, TYPE} from '../../../components/DropdownAlert';
+import {getTransactionListByCategory} from '../../../apis/Functions/Transaction';
+import {Platform} from 'react-native';
+
+const CalculatorProfitLoss = (props) => {
+    const [dataProduct, setDataProduct] = useState([]);
+    const [product, setProduct] = useState(null);
+    const [transactionType, setTransactionType] = useState(RadioBuySale[0].value);
+    const [dataCalculator, setDataCalculator] = useState([]);
+    const [lotTransactionNumber, setLotTransactionNumber] = useState(null);
+    const [openPrice, setOpenPrice] = useState(null);
+    const [closeStatusPrice, setCloseStatusPrice] = useState(null);
+    useEffect(() => {
+        getProductData()
+    }, [])
+
+    const getProductData = async () => {
+        const res = await getTransactionListByCategory({
+            keyword: '',
+            platform: Platform.OS,
+            page_size: 1000,
+            page_index: 1,
+            type: 'PRICE_TABLE',
+            category_id: -1,
+        });
+        if (res.status == 200 && res.data.code == 200) {
+            setDataProduct(res.data.data);
+        } else {
+            showAlert(TYPE.ERROR, I18n.t('Notification', I18n.t('Can_not_get_data')))
+        }
+    };
+
+
+    const onCalculator = () => {
+        const titles = [
+            I18n.t('Product'),
+            I18n.t('LotTransactionNumber'),
+            I18n.t('OpenPrice'),
+            I18n.t('CloseStatusPrice'),
+        ];
+        const index = checkFormatArray([
+            product,
+            lotTransactionNumber,
+            openPrice,
+            closeStatusPrice,
+        ]);
+
+        if (index === true) {
+            let newData = [...dataCalculator]
+            newData.push({
+                name: product.name,
+                status: RadioBuySale[transactionType].label,
+                slot_number: 6,
+                profit_loss_usd: 639324325,
+                profit_loss_vnd: 1234349235455,
+            })
+            setDataCalculator(newData)
+            setLotTransactionNumber(null)
+            setOpenPrice(null)
+            setCloseStatusPrice(null)
+        } else {
+            showAlert(TYPE.ERROR, I18n.t('Notification'), `${I18n.t('Please_fill_in')}${titles[index]}`)
+        }
+    };
+
+    const onDelete = () => {
+        setDataCalculator([])
+        setLotTransactionNumber(null)
+        setOpenPrice(null)
+        setCloseStatusPrice(null)
+    };
+
+    const setLotNumber = (text) => {
+        setLotTransactionNumber(text.split(',').join(''));
+    };
+
+    const setOpenPriceEvent = (text) => {
+        setOpenPrice(text.split(',').join(''));
+    };
+    const setCloseStatusEvent = (text) => {
+        setCloseStatusPrice(text.split(',').join(''));
+    };
+
+    return (
+        <CalculatorProfitLossView
+            dataProduct={dataProduct}
+            setProduct={setProduct}
+            product={product}
+            dataCalculator={dataCalculator}
+            onCalculator={onCalculator}
+            onDelete={onDelete}
+            setTransactionType={setTransactionType}
+            setLotNumber={setLotNumber}
+            lotTransactionNumber={lotTransactionNumber}
+            openPrice={openPrice}
+            setOpenPrice={setOpenPriceEvent}
+            closeStatusPrice={closeStatusPrice}
+            setCloseStatusPrice={setCloseStatusEvent}
+        />
+    );
+};
+
+export default CalculatorProfitLoss;

src/Screens/Tool/CalculatorProfitLoss/CalculatorProfitLossView.js

+import React, {Component} from 'react';
+import {View, Text, StyleSheet, TouchableOpacity, FlatList, ScrollView} from 'react-native';
+import HeaderBack from '../../../components/Header/HeaderBack';
+import {getFontXD, HEIGHTXD, toPriceVnd, WIDTHXD} from '../../../Config/Functions';
+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 TextMoney from '../../../components/Input/InputMoney';
+import ItemCalculator from './ItemCalculator';
+
+const CalculatorProfitLossView = (props) => {
+    return (
+        <View style={{flex: 1, flexDirection: 'column', backgroundColor: 'white'}}>
+            <HeaderBack title={'CalculatorProfitLoss'} isWhite={true}/>
+            <ScrollView>
+                <View style={{paddingHorizontal: WIDTHXD(60), paddingVertical: HEIGHTXD(60)}}>
+                    <Text
+                        style={styles.textTitle}>
+                        {I18n.t('Product')}
+                    </Text>
+                    <PickerItem
+                        data={props.dataProduct}
+                        onValueChange={(value, item) => {
+                            props.setProduct(item);
+                        }}
+                        defaultValue={props.product?.name}
+                        iconSize={WIDTHXD(40)}
+                        iconColor={R.colors.black}
+                    />
+                    <Text
+                        style={[styles.textTitle, {marginTop: HEIGHTXD(30)}]}>
+                        {I18n.t('Tradding')}
+                    </Text>
+                    <View style={{width: WIDTHXD(600), height: HEIGHTXD(85)}}>
+                        <RadioForm
+                            radio_props={RadioBuySale}
+                            labelStyle={{fontSize: getFontXD(42)}}
+                            formHorizontal={true}
+                            style={styles.row}
+                            initial={0}
+                            buttonSize={WIDTHXD(30)}
+                            onPress={(value) => {
+                                props.setTransactionType(value);
+                            }}
+                        />
+                    </View>
+                    <TextMoney
+                        onChangeText={(val) => {
+                            props.setLotNumber(val);
+                        }}
+                        title={I18n.t('LotTransactionNumber')}
+                        value={toPriceVnd(props.lotTransactionNumber)}
+                        titleStyle={{marginTop: HEIGHTXD(20), fontSize: getFontXD(39)}}
+                    />
+                    <TextMoney
+                        onChangeText={(val) => {
+                            props.setOpenPrice(val);
+                        }}
+                        title={I18n.t('OpenPrice')}
+                        value={toPriceVnd(props.openPrice)}
+                        titleStyle={{marginTop: HEIGHTXD(20), fontSize: getFontXD(39)}}
+                    />
+                    <TextMoney
+                        onChangeText={(val) => {
+                            props.setCloseStatusPrice(val);
+                        }}
+                        title={I18n.t('CloseStatusPrice')}
+                        value={toPriceVnd(props.closeStatusPrice)}
+                        titleStyle={{marginTop: HEIGHTXD(20), fontSize: getFontXD(39)}}
+                    />
+                    <View style={{
+                        width: '100%',
+                        flexDirection: 'row',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        marginTop: HEIGHTXD(50),
+                    }}>
+                        <TouchableOpacity onPress={() => {
+                            props.onDelete();
+                        }} style={[styles.btn, {backgroundColor: R.colors.red2, marginRight: WIDTHXD(72)}]}>
+                            <Text style={styles.txtButton}>{I18n.t('Delete')}</Text>
+                        </TouchableOpacity>
+                        <TouchableOpacity onPress={() => {
+                            props.onCalculator();
+                        }} style={styles.btn}>
+                            <Text style={styles.txtButton}>{I18n.t('Calculator')}</Text>
+                        </TouchableOpacity>
+                    </View>
+                </View>
+                <FlatList
+                    style={{paddingBottom: HEIGHTXD(15), backgroundColor: R.colors.white}}
+                    keyExtractor={(item) => item.id}
+                    data={props.dataCalculator}
+                    renderItem={({item, index}) => <ItemCalculator item={item}
+                                                                   isLastItem={index === props.dataCalculator.length - 1}/>}
+                />
+            </ScrollView>
+        </View>
+    );
+};
+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.color777,
+    },
+    row: {
+        height: HEIGHTXD(109),
+        width: '100%',
+        justifyContent: 'space-between',
+        marginVertical: 5,
+    },
+    btn: {
+        width: WIDTHXD(428),
+        height: HEIGHTXD(120),
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: R.colors.main,
+        borderRadius: 5,
+    },
+    txtButton: {
+        color: R.colors.white,
+        fontSize: getFontXD(48),
+    },
+});
+export default CalculatorProfitLossView;

src/Screens/Tool/CalculatorProfitLoss/ItemCalculator.js

+import React, {useState, useEffect} from 'react';
+import {
+    View,
+    TouchableOpacity,
+    Text,
+    LayoutAnimation,
+    StyleSheet
+} from 'react-native';
+import R from '../../../assets/R';
+
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import {getFontXD, getLineHeightXD, HEIGHTXD, toPriceVnd, WIDTHXD} from '../../../Config/Functions';
+import I18n from '../../../helper/i18/i18n';
+import TextField from '../../../components/TextField';
+import {RadioBuySale} from '../../../Config/constants';
+
+const ItemCalculator = (props) => {
+    const [expanded, setExpanded] = useState(true);
+    const changeLayout = () => {
+        LayoutAnimation.configureNext({
+            duration: 500,
+            create: {
+                type: LayoutAnimation.Types.spring,
+                property: LayoutAnimation.Properties.scaleY,
+                springDamping: 1.7,
+            },
+            update: {
+                type: LayoutAnimation.Types.spring,
+                springDamping: 1.7,
+            },
+        });
+        setExpanded(!expanded)
+    };
+
+    return (
+        <View style={[styles.container, {marginBottom: props.isLastItem? HEIGHTXD(100) : HEIGHTXD(30)}]}>
+            <TouchableOpacity
+                onPress={() => changeLayout()}
+                style={[styles.flexTitle, { borderBottomWidth: expanded === true ? 0.3 : 0, paddingHorizontal: WIDTHXD(30) }]}
+            >
+                <Text style={styles.title}>{props.item.name}</Text>
+                {expanded === true ? (
+                    <Ionicons
+                        name='chevron-up'
+                        size={WIDTHXD(50)}
+                        style={{ marginRight: WIDTHXD(25) }}
+                        color={R.colors.iconGray}
+                    />
+                ) : (
+                    <Ionicons
+                        name='chevron-down'
+                        size={WIDTHXD(50)}
+                        style={{ marginRight: WIDTHXD(25) }}
+                        color={R.colors.iconGray}
+                    />
+                )}
+            </TouchableOpacity>
+            {expanded ?
+                <View style={{paddingVertical: HEIGHTXD(20)}}>
+                    <TextField
+                        title={I18n.t('Status')}
+                        content={props.item.status}
+                        color={props.item.status == RadioBuySale[0].label ? R.colors.green : R.colors.red2}
+                    />
+                    <TextField
+                        title={I18n.t('SlotNumber')}
+                        content={props.item.slot_number}
+                    />
+                    <TextField
+                        title={`${I18n.t('ProfitLoss')} (USD)`}
+                        content={toPriceVnd(props.item.profit_loss_usd)}
+                    />
+                    <TextField
+                        title={`${I18n.t('ProfitLoss')} (VNĐ)`}
+                        content={toPriceVnd(props.item.profit_loss_vnd)}
+                    />
+                </View>
+                : null
+            }
+        </View>
+    )
+
+}
+export default ItemCalculator
+const styles = StyleSheet.create({
+    container: {
+        backgroundColor: R.colors.white,
+        borderColor: R.colors.borderGray,
+        borderWidth: 0.3,
+        marginHorizontal: WIDTHXD(40),
+        marginBottom: HEIGHTXD(30)
+    },
+    flexTitle: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingVertical: HEIGHTXD(20),
+        borderBottomColor: R.colors.borderGray,
+    },
+    title: {
+        fontSize: getFontXD(36),
+        lineHeight: getLineHeightXD(56),
+        color: R.colors.black,
+    },
+})

src/Screens/Tool/EscrowCalculator/EscrowCalculator.js

+import React, {useEffect, useState} from 'react';
+import EscrowCalculatorView from './EscrowCalculatorView';
+import {getTransactionListByCategory} from '../../../apis/Functions/Transaction';
+import {Platform} from 'react-native';
+import {showAlert, TYPE} from '../../../components/DropdownAlert';
+import I18n from '../../../helper/i18/i18n';
+
+const EscrowCalculator = (props) => {
+    const [dataProduct, setDataProduct] = useState([]);
+    const [listInput, setListInput] = useState([{
+        product: null,
+        lotNumber: null,
+        firstEscrow: 0,
+    }]);
+    const [firstEscrow, setFirstEscrow] = useState(null);
+    const [firstEscrowTotal, setFirstEscrowTotal] = useState(0);
+    useEffect(() => {
+        getProductData()
+    }, [])
+
+    const getProductData = async () => {
+        const res = await getTransactionListByCategory({
+            keyword: '',
+            platform: Platform.OS,
+            page_size: 1000,
+            page_index: 1,
+            type: 'PRICE_TABLE',
+            category_id: -1,
+        });
+        if (res.status == 200 && res.data.code == 200) {
+            setDataProduct(res.data.data);
+        } else {
+            showAlert(TYPE.ERROR, I18n.t('Notification', I18n.t('Can_not_get_data')))
+        }
+    };
+
+    const onCalculator = () => {
+
+    };
+
+    const onDelete = () => {
+
+    };
+
+    const setItemInput = (item, index) => {
+        let data = [...listInput]
+        data[index] = item
+        setListInput(data)
+        let firstEscrowTotalTmp = 0
+        data.map((item) => {
+            if(item.firstEscrow) firstEscrowTotalTmp = firstEscrowTotalTmp + item.firstEscrow
+        })
+        setFirstEscrowTotal(firstEscrowTotalTmp)
+    }
+    const onAdd = () => {
+        let data = [...listInput];
+        data.push({
+            product: null,
+            lotNumber: null,
+            firstEscrow: null,
+        });
+        setListInput(data);
+    };
+
+    return (
+        <EscrowCalculatorView
+            dataProduct={dataProduct}
+            firstEscrow={firstEscrow}
+            onCalculator={onCalculator}
+            onDelete={onDelete}
+            onAdd={onAdd}
+            listInput={listInput}
+            firstEscrowTotal={firstEscrowTotal}
+            setItemInput={setItemInput}
+            setFirstEscrow={setFirstEscrow}
+        />
+    );
+};
+export default EscrowCalculator;

src/Screens/Tool/EscrowCalculator/EscrowCalculatorView.js

+import React from 'react';
+import {FlatList, StyleSheet, Text, TouchableOpacity, View, ScrollView} from 'react-native';
+import HeaderBack from '../../../components/Header/HeaderBack';
+import {getFontXD, HEIGHTXD, toPriceVnd, WIDTHXD} from '../../../Config/Functions';
+import R from '../../../assets/R';
+import I18n from '../../../helper/i18/i18n';
+import TextMoney from '../../../components/Input/InputMoney';
+import Icon from 'react-native-vector-icons/Entypo';
+import ItemEscrowCalculator from './ItemEscrowCalculator';
+
+const EscrowCalculatorView = (props) => {
+    return (
+        <View style={{flex: 1, flexDirection: 'column', backgroundColor: 'white'}}>
+            <HeaderBack title={'EscrowCalculator'} isWhite={true}/>
+            <ScrollView style={{paddingVertical:HEIGHTXD(60)}}>
+            <View >
+                <FlatList
+                    keyExtractor={(item) => item.id}
+                    data={props.listInput}
+                    renderItem={({item, index}) => <ItemEscrowCalculator item={item}
+                                                                         dataProduct={props.dataProduct}
+                                                                         setProduct={(product) => {
+                                                                             item.product = product
+                                                                             props.setItemInput(item, index)
+                                                                         }}
+                                                                         setLotNumber={(lotNumber) => {
+                                                                             item.lotNumber = lotNumber.split('.').join('')
+                                                                             item.firstEscrow = parseFloat(item.lotNumber)*12312
+                                                                             props.setItemInput(item, index)
+                                                                         }}/>}
+                />
+                <View style={{flexDirection: 'row', justifyContent: 'flex-end'}}>
+                    <TouchableOpacity
+                        onPress={() => {
+                            props.onAdd();
+                        }}
+                        style={styles.containerBtn}>
+                        <Icon name={'plus'} size={27} color={R.colors.white}/>
+                    </TouchableOpacity>
+                </View>
+                <View style={{paddingHorizontal: WIDTHXD(60)}}>
+                    <TextMoney
+                        onChangeText={(val) => {
+                            props.setFirstEscrow(val.split('.').join(''))
+                        }}
+                        title={I18n.t('FirstEscrow')}
+                        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}>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',
+                    marginTop: HEIGHTXD(80),
+                    marginBottom: HEIGHTXD(150)
+                }}>
+                    <TouchableOpacity onPress={() => {
+                        props.onDelete();
+                    }} style={[styles.btn, {backgroundColor: R.colors.red2, marginRight: WIDTHXD(72)}]}>
+                        <Text style={styles.txtButton}>{I18n.t('Delete')}</Text>
+                    </TouchableOpacity>
+                    <TouchableOpacity onPress={() => {
+                        props.onCalculator();
+                    }} style={styles.btn}>
+                        <Text style={styles.txtButton}>{I18n.t('Calculator')}</Text>
+                    </TouchableOpacity>
+                </View>
+            </View>
+            </ScrollView>
+        </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.color777,
+    },
+    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/Tool/EscrowCalculator/ItemEscrowCalculator.js

+import React from 'react';
+import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import I18n from '../../../helper/i18/i18n';
+import PickerItem from '../../../components/Picker/PickerItem';
+import {getFontXD, HEIGHTXD, toPriceVnd, WIDTHXD} from '../../../Config/Functions';
+import R from '../../../assets/R';
+import TextMoney from '../../../components/Input/InputMoney';
+import Icon from 'react-native-vector-icons/Entypo';
+
+const ItemEscrowCalculator = (props) => {
+    return (
+        <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) => {
+                    props.setLotNumber(val);
+                }}
+                title={I18n.t('LotTransactionNumber')}
+                value={toPriceVnd(props.item.lotNumber)}
+                titleStyle={{marginTop: HEIGHTXD(20), fontSize: getFontXD(39)}}
+            />
+            <TextMoney
+                onChangeText={(val) => {
+                }}
+                title={I18n.t('FirstEscrow')}
+                value={props.item.firstEscrow}
+                titleStyle={{ontSize: getFontXD(39)}}
+                editable={false}
+                inputStyle={{backgroundColor: R.colors.gray7}}
+            />
+        </View>
+    );
+};
+const styles = StyleSheet.create({
+    viewInput: {
+        marginHorizontal: WIDTHXD(36),
+        marginBottom: WIDTHXD(30),
+        borderWidth: 0.3,
+        borderColor: '#707070',
+        paddingHorizontal: WIDTHXD(24),
+        paddingVertical: WIDTHXD(24),
+    },
+    textTitle: {
+        fontSize: getFontXD(39),
+        color: R.colors.color777,
+    },
+})
+export default ItemEscrowCalculator;

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/Header/Drawer.js

@@ -14,7 +14,7 @@ import AsyncStorage from '@react-native-community/async-storage';
 import DeviceInfo from 'react-native-device-info';
 
 import {
-  CACULATEDDEPOSIT,
+  ESCROWCALCULATOR,
   CACULATEDPROFITLOSS,
   CACULATEDSTOPLOSS,
   CONVERTUNIT,
@@ -134,8 +134,8 @@ const menus = [
     children: [
       {
         title: 'CaculatedDeposit',
-        icon: R.images.toolDeposit,
-        screen: CACULATEDDEPOSIT,
+        icon: R.images.caculatedDeposit,
+        screen: ESCROWCALCULATOR,
         id: '91',
       },
       {

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/components/Picker/PickerItem.js

@@ -107,6 +107,8 @@ export default class PickerItem extends Component {
             disabled,
             isTriangle,
             textStyle,
+            iconSize,
+            iconColor,
         } = this.props;
         return (
             <View style={styles.cell}>
@@ -135,9 +137,9 @@ export default class PickerItem extends Component {
                         {defaultValue || this.state.value}
                     </Text>
                     {iconDropdown || isTriangle ? (
-            <Icon name={'up'} size={20} color={R.colors.borderGray} />
+                        <Icon name={'up'} size={iconSize ? iconSize : 20} color={iconColor ? iconColor : R.colors.borderGray}/>
                     ) : (
-            <Icon name={'down'} size={20} color={R.colors.borderGray} />
+                        <Icon name={'down'} size={iconSize ? iconSize : 20} color={iconColor ? iconColor : R.colors.borderGray}/>
                     )}
                 </TouchableOpacity>
                 <ModalDropdown
@@ -190,9 +192,11 @@ export default class PickerItem extends Component {
     renderButtonText = () => ' ';
 
     renderSeparator = (rowID) => {
-    if (rowID === data.length - 1) return [];
+        if (rowID === data.length - 1) {
+            return [];
+        }
         let key = `spr_${rowID}`;
-    return <View style={styles.dropdown_separator} key={key} />;
+        return <View style={styles.dropdown_separator} key={key}/>;
     };
 }
 

src/components/TextField.js

@@ -8,10 +8,11 @@ import R from '../assets/R';
 import {getFontXD, HEIGHTXD, WIDTHXD} from '../Config/Functions';
 
 const TextField = (props) => {
+    const {color} = props
     return (
         <View style={[styles.row, { paddingVertical: WIDTHXD(15) }]}>
             <Text style={styles.title}>{props.title}</Text>
-            <Text style={styles.content}>{props.content}</Text>
+            <Text style={[styles.content, color && {color}]}>{props.content}</Text>
         </View>
     )
 }

src/helper/i18/locales/en.js

@@ -231,6 +231,12 @@ 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',
   Tool: 'Tool',
 
   CaculatedDeposit: 'Caculated deposit',
@@ -259,4 +265,11 @@ export default {
 
   Saturday: 'Saturday',
   Sunday: 'Sunday',
+  CalculatorProfitLoss: 'Calculator profit and loss',
+  Buy: 'Buy',
+  Sale: 'Sale',
+  OpenPrice: 'Open price',
+  CloseStatusPrice: 'Close stauts price',
+  SlotNumber: 'Slot number',
+  ProfitLoss: 'Profit/Loss',
 };

src/helper/i18/locales/vn.js

@@ -257,5 +257,4 @@ export default {
   ConvertUSD: 'Quy đổi  USD/Tấn',
   Saturday: 'Thứ 7',
   Sunday: 'Chủ nhật',
-   
 };

src/routers/ScreenNames.js

@@ -69,6 +69,7 @@ export const PRODUCTDETAIL = 'PRODUCTDETAIL';
 export const REGISTEROTP = 'REGISTEROTP';
 
 export const OTPWALLET = 'OTPWALLET';
+export const ESCROWCALCULATOR = 'ESCROWCALCULATOR';
 
 export const CACULATEDDEPOSIT = 'CACULATEDDEPOSIT';
 export const CACULATEDPROFITLOSS = 'CACULATEDPROFITLOSS';

src/routers/StackNavigation.js

@@ -48,9 +48,10 @@ 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/Tool/EscrowCalculator/EscrowCalculator';
 
 import CaculatedDeposit from '../Screens/Tool/CaculatedDeposit';
-import CaculatedProfitLoss from '../Screens/Tool/CaculatedProfitLoss';
+import CaculatedProfitLoss from '../Screens/Tool/CalculatorProfitLoss/CalculatorProfitLoss';
 import CaculatedStopLoss from '../Screens/Tool/CaculatedStopLoss';
 import ConvertUnit from '../Screens/Tool/ConvertUnit';
 import ExchangeRate from '../Screens/Tool/ExchangeRate';
@@ -150,6 +151,10 @@ function MyStack(props) {
         name={ScreenName.FORGOTPASSWORD}
         component={ForgotPassWord}
       />
+      <Stack.Screen
+        name={ScreenName.ESCROWCALCULATOR}
+        component={EscrowCalculator}
+      />
     </Stack.Navigator>
   );
 }