complete calculator escrow and profit loss UI

src/Screens/Tool/CalculatorProfitLoss/CalculatorProfitLoss.js

-import React, {Component, useState} from 'react';
-import {View, Text} from 'react-native';
+import React, {useEffect, useState} from 'react';
 import CalculatorProfitLossView from './CalculatorProfitLossView';
-import EscrowCalculatorView from '../EscrowCalculator/EscrowCalculatorView';
 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([
-        {
-            id: 0,
-            name: 'Ngô',
-        },
-        {
-            id: 1,
-            name: 'Đậu tương',
-        }]);
+    const [dataProduct, setDataProduct] = useState([]);
     const [product, setProduct] = useState(null);
     const [transactionType, setTransactionType] = useState(RadioBuySale[0].value);
-    const [dataCalculator, setDataCalculator] = useState([
-        {
-            name: 'Ngô',
-            status: 'Mua',
-            slot_number: 6,
-            profit_loss_usd: 639324325,
-            profit_loss_vnd: 1234349235455,
-        },
-        {
-            name: 'Đậu tương',
-            status: 'Bán',
-            slot_number: 6,
-            profit_loss_usd: 639324325,
-            profit_loss_vnd: 1234349235455,
-        },
-        {
-            name: 'Bạc',
-            status: 'Mua',
-            slot_number: 6,
-            profit_loss_usd: 639324325,
-            profit_loss_vnd: 1234349235455,
-        },
-    ]);
-    const [lotTransactionNUmber, setLotTransactionNUmber] = useState(0);
-    const [openPrice, setOpenPrice] = useState(0);
-    const [closeStatusPrice, setCloseStatusPrice] = useState(0);
+    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: 'Bạc',
+                status: 'Mua',
+                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 setLotNumber = (text) => {
+        setLotTransactionNumber(text.split(',').join(''));
     };
 
     const setOpenPriceEvent = (text) => {
@@ -66,12 +90,13 @@ const CalculatorProfitLoss = (props) => {
         <CalculatorProfitLossView
             dataProduct={dataProduct}
             setProduct={setProduct}
+            product={product}
             dataCalculator={dataCalculator}
             onCalculator={onCalculator}
             onDelete={onDelete}
             setTransactionType={setTransactionType}
-            setLotNUmber={setLotNUmber}
-            lotTransactionNUmber={lotTransactionNUmber}
+            setLotNumber={setLotNumber}
+            lotTransactionNumber={lotTransactionNumber}
             openPrice={openPrice}
             setOpenPrice={setOpenPriceEvent}
             closeStatusPrice={closeStatusPrice}

src/Screens/Tool/CalculatorProfitLoss/CalculatorProfitLossView.js

@@ -8,7 +8,6 @@ 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 ItemPrice from '../../Home/ItemPrice';
 import ItemCalculator from './ItemCalculator';
 
 const CalculatorProfitLossView = (props) => {
@@ -16,84 +15,86 @@ const CalculatorProfitLossView = (props) => {
         <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);
-                    }}
-                    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 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>
-                <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}/>}
+                <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>

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([
-        {
-            id: 0,
-            name: 'Ngô',
-        },
-        {
-            id: 1,
-            name: 'Đậu tương',
-        }])
-    const [product, setProduct] = useState(null)
-    const [lotNumber, setLotNumber] = useState(null)
-    const [firstEscrow, setFirstEscrow] = useState(null)
-
-    const setLotNumberEvent = (text) => {
-        setLotNumber(text.split(',').join(''));
-        setFirstEscrow(text.split(',').join(''));
+    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 onAdd = () => {
+    };
 
+    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}
-            setProduct={setProduct}
-            lotNumber={lotNumber}
             firstEscrow={firstEscrow}
-            setLotNumber={setLotNumberEvent}
             onCalculator={onCalculator}
             onDelete={onDelete}
             onAdd={onAdd}
+            listInput={listInput}
+            firstEscrowTotal={firstEscrowTotal}
+            setItemInput={setItemInput}
+            setFirstEscrow={setFirstEscrow}
         />
     );
 };

src/Screens/Tool/EscrowCalculator/EscrowCalculatorView.js

 import React from 'react';
-import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import {FlatList, StyleSheet, Text, TouchableOpacity, View, ScrollView} from 'react-native';
 import HeaderBack from '../../../components/Header/HeaderBack';
-import {getFontXD, getWidth, HEIGHTXD, toPriceVnd, WIDTHXD} from '../../../Config/Functions';
+import {getFontXD, HEIGHTXD, toPriceVnd, 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';
+import ItemEscrowCalculator from './ItemEscrowCalculator';
 
 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}
+            <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>
 
-                <TextMoney
-                    onChangeText={(val) => {
-                        props.setLotNumber(val)
-                    }}
-                    title={I18n.t('LotTransactionNumber')}
-                    value={toPriceVnd(props.lotNumber)}
-                    titleStyle={{marginTop: HEIGHTXD(20), fontSize: getFontXD(39)}}
-                />
-                <TextMoney
-                    onChangeText={(val) => {
-                    }}
-                    title={I18n.t('FirstEscrow')}
-                    value={props.firstEscrow}
-                    titleStyle={{ontSize: getFontXD(39)}}
-                    editable={false}
-                    inputStyle={{backgroundColor: R.colors.gray7}}
-                />
-            </View>
-            <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) => {
-                    }}
-                    title={I18n.t('FirstEscrow')}
-                    value={props.firstEscrow}
-                    titleStyle={{
-                        marginTop: HEIGHTXD(180),
-                        fontSize: getFontXD(39),
-                    }}
-                />
-                <TextMoney
-                    editable={false}
-                    title={I18n.t('FirstEscrowTotal')}
-                    value={props.firstEscrow}
-                    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',
-                position: 'absolute',
-                bottom: 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 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>
     );
 
@@ -116,7 +104,7 @@ const styles = StyleSheet.create({
     textMessage: {
         fontSize: getFontXD(39),
         color: R.colors.black,
-        marginTop: HEIGHTXD(68)
+        marginTop: HEIGHTXD(68),
     },
     containerBtn: {
         marginHorizontal: WIDTHXD(36),

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/helper/i18/locales/en.js

@@ -248,7 +248,7 @@ export default {
   Buy: 'Buy',
   Sale: 'Sale',
   OpenPrice: 'Open price',
-  CloseStatusPrice: 'Giá đóng trạng thái',
-  SlotNumber: 'Số slot',
-  ProfitLoss: 'Lãi/lỗ',
+  CloseStatusPrice: 'Close stauts price',
+  SlotNumber: 'Slot number',
+  ProfitLoss: 'Profit/Loss',
 };