product detail UI

src/Screens/Tradding/ProductDetail/ProductDetail.js

+import React from 'react';
+
+import ProductDetailView from './ProductDetailView';
+
+const ProductDetail = (props) => {
+  return <ProductDetailView />;
+};
+
+export default ProductDetail;

src/Screens/Tradding/ProductDetail/ProductDetailView.js

+import React from 'react';
+import {
+  View,
+} from 'react-native';
+import HeaderBack from '../../../components/Header/HeaderBack';
+import ContractDescription from './Tab/ContractDescription/ContractDescription';
+import QualityStandard from './Tab/QualityStandard/QualityStandard';
+import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
+import {getFontXD} from '../../../Config/Functions';
+const Tab = createMaterialTopTabNavigator();
+import I18n from '../../../helper/i18/i18n';
+
+const ProductDetailView = (props) => {
+  return (
+    <View style={{flex: 1}}>
+      <HeaderBack isWhite={true} children={'Đậu tương mini'} />
+
+      <Tab.Navigator
+        initialRouteName="ContractDescription"
+        tabBarOptions={{
+          inactiveTintColor: '#929292',
+          activeTintColor: '#1473E6',
+          labelStyle: {fontSize: getFontXD(36)},
+          style: {backgroundColor: 'white'},
+        }}>
+        <Tab.Screen
+          name="ContractDescription"
+          component={ContractDescription}
+          options={{tabBarLabel: I18n.t('ContractDescription')}}
+        />
+        <Tab.Screen
+          name="QualityStandard"
+          component={QualityStandard}
+          options={{tabBarLabel: I18n.t('QualityStandard')}}
+        />
+      </Tab.Navigator>
+    </View>
+  );
+};
+
+export default ProductDetailView;

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

+import React, {useState} from 'react';
+import {
+    View,
+    ScrollView,
+    StyleSheet,
+} from 'react-native';
+import R from '../../../../../assets/R';
+import GeneralInfo from './ItemView/GeneralInfo';
+import TimeTransaction from './ItemView/TimeTransaction';
+import PriceInfo from './ItemView/PriceInfo';
+import {HEIGHTXD} from '../../../../../Config/Functions';
+
+const ContractDescription = (props) => {
+    return (
+        <ScrollView
+            style={styles.container}
+            showsVerticalScrollIndicator={false}>
+            <View style={{marginBottom: HEIGHTXD(100)}}>
+                <GeneralInfo/>
+                <TimeTransaction/>
+                <PriceInfo/>
+            </View>
+        </ScrollView>
+    );
+
+};
+export default ContractDescription;
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: R.colors.colorBackground,
+        paddingTop: HEIGHTXD(30),
+    },
+});

src/Screens/Tradding/ProductDetail/Tab/ContractDescription/ItemView/GeneralInfo.js

+import React, {useState} 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, WIDTHXD} from '../../../../../../Config/Functions';
+import I18n from '../../../../../../helper/i18/i18n';
+import TextField from '../../../../../../components/TextField';
+
+const GeneralInfo = (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}>
+            <TouchableOpacity
+                onPress={() => changeLayout()}
+                style={[styles.flexTitle, { borderBottomWidth: expanded === true ? 0.3 : 0, paddingHorizontal: WIDTHXD(30) }]}
+            >
+                <Text style={styles.title}>{I18n.t('GeneralInformation')}</Text>
+                {expanded === true ? (
+                    <Ionicons
+                        name='chevron-up'
+                        size={WIDTHXD(50)}
+                        style={{ marginRight: WIDTHXD(50) }}
+                        color={R.colors.iconGray}
+                    />
+                ) : (
+                    <Ionicons
+                        name='chevron-down'
+                        size={WIDTHXD(50)}
+                        style={{ marginRight: WIDTHXD(50) }}
+                        color={R.colors.iconGray}
+                    />
+                )}
+            </TouchableOpacity>
+            {expanded ?
+                <View style={{paddingVertical: HEIGHTXD(20)}}>
+                    <TextField
+                        title={I18n.t('CommodityTransactions')}
+                        content={'Đậu tương minu CBOT'}
+                    />
+                    <TextField
+                        title={I18n.t('CommodityCode')}
+                        content={'XD'}
+                    />
+                    <TextField
+                        title={I18n.t('Escrow')}
+                        content={'Theo quy định của MXV'}
+                    />
+                    <TextField
+                        title={I18n.t('PositionLimit')}
+                        content={'Theo quy định của MXV'}
+                    />
+                    <TextField
+                        title={I18n.t('PaymentMethod')}
+                        content={'Giao nhân vật chất'}
+                    />
+                    <TextField
+                        title={I18n.t('QualityStandard')}
+                        content={'Đậu tương loại 1, loại 2, loại 2'}
+                    />
+                </View>
+                : null
+            }
+        </View>
+    )
+
+}
+export default GeneralInfo
+const styles = StyleSheet.create({
+    container: {
+        backgroundColor: R.colors.white,
+        width: '100%',
+        shadowColor: '#181F4D21',
+        shadowOffset: {width: 1, height: 1},
+        shadowOpacity: 1,
+        shadowRadius: 2,
+        elevation: 1,
+    },
+    flexTitle: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingVertical: HEIGHTXD(36),
+        borderBottomColor: R.colors.borderGray,
+    },
+    title: {
+        fontSize: getFontXD(36),
+        lineHeight: getLineHeightXD(56),
+        color: R.colors.main,
+        textTransform: 'uppercase',
+    },
+})

src/Screens/Tradding/ProductDetail/Tab/ContractDescription/ItemView/PriceInfo.js

+import React, {useState} 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, WIDTHXD} from '../../../../../../Config/Functions';
+import I18n from '../../../../../../helper/i18/i18n';
+import TextField from '../../../../../../components/TextField';
+
+const GeneralInfo = (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}>
+            <TouchableOpacity
+                onPress={() => changeLayout()}
+                style={[styles.flexTitle, { borderBottomWidth: expanded === true ? 0.3 : 0, paddingHorizontal: WIDTHXD(30) }]}
+            >
+                <Text style={styles.title}>{I18n.t('PriceInfo')}</Text>
+                {expanded === true ? (
+                    <Ionicons
+                        name='chevron-up'
+                        size={WIDTHXD(50)}
+                        style={{ marginRight: WIDTHXD(50) }}
+                        color={R.colors.iconGray}
+                    />
+                ) : (
+                    <Ionicons
+                        name='chevron-down'
+                        size={WIDTHXD(50)}
+                        style={{ marginRight: WIDTHXD(50) }}
+                        color={R.colors.iconGray}
+                    />
+                )}
+            </TouchableOpacity>
+            {expanded ?
+                <View style={{paddingVertical: HEIGHTXD(20)}}>
+                    <TextField
+                        title={I18n.t('ListedUnit')}
+                        content={'cent/giá'}
+                    />
+                    <TextField
+                        title={I18n.t('PriceStep')}
+                        content={'1.000 cent/giạ'}
+                    />
+                    <TextField
+                        title={I18n.t('ContactSize')}
+                        content={'1000 giạ/lót'}
+                    />
+                    <TextField
+                        title={I18n.t('PriceRange')}
+                        content={'Giới hạn ban đầu: $0.70/giạ'}
+                    />
+                    <TextField
+                        title={I18n.t('FirstNotifyDate')}
+                        content={'Ngày làm việc cuối cùng của tháng liền trước tháng đáo hạn '}
+                    />
+                    <TextField
+                        title={I18n.t('EndlessTransactionDate')}
+                        content={'Ngày làm việc trước ngày 15 của tháng đáo hạn'}
+                    />
+                </View>
+                : null
+            }
+        </View>
+    )
+
+}
+export default GeneralInfo
+const styles = StyleSheet.create({
+    container: {
+        backgroundColor: R.colors.white,
+        width: '100%',
+        shadowColor: '#181F4D21',
+        shadowOffset: {width: 1, height: 1},
+        shadowOpacity: 1,
+        shadowRadius: 2,
+        elevation: 1,
+    },
+    flexTitle: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingVertical: HEIGHTXD(36),
+        borderBottomColor: R.colors.borderGray,
+    },
+    title: {
+        fontSize: getFontXD(36),
+        lineHeight: getLineHeightXD(56),
+        color: R.colors.main,
+        textTransform: 'uppercase',
+    },
+})

src/Screens/Tradding/ProductDetail/Tab/ContractDescription/ItemView/TimeTransaction.js

+import React, {useState} 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, WIDTHXD} from '../../../../../../Config/Functions';
+import I18n from '../../../../../../helper/i18/i18n';
+import TextField from '../../../../../../components/TextField';
+
+const GeneralInfo = (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}>
+            <TouchableOpacity
+                onPress={() => changeLayout()}
+                style={[styles.flexTitle, { borderBottomWidth: expanded === true ? 0.3 : 0, paddingHorizontal: WIDTHXD(30) }]}
+            >
+                <Text style={styles.title}>{I18n.t('TimeTransaction')}</Text>
+                {expanded === true ? (
+                    <Ionicons
+                        name='chevron-up'
+                        size={WIDTHXD(50)}
+                        style={{ marginRight: WIDTHXD(50) }}
+                        color={R.colors.iconGray}
+                    />
+                ) : (
+                    <Ionicons
+                        name='chevron-down'
+                        size={WIDTHXD(50)}
+                        style={{ marginRight: WIDTHXD(50) }}
+                        color={R.colors.iconGray}
+                    />
+                )}
+            </TouchableOpacity>
+            {expanded ?
+                <View style={{paddingVertical: HEIGHTXD(20)}}>
+                    <TextField
+                        title={I18n.t('Time')}
+                        content={'Thứ 2 - Thứ 6'}
+                    />
+                    <TextField
+                        title={I18n.t('TransactionSession')}
+                        content={'Phiên 1 07:00 - 19:45 \nPhiên 2: 20:30 - 01:45 (ngày hôm sau)'}
+                    />
+                    <TextField
+                        title={I18n.t('MaturityMonth')}
+                        content={'Tháng 3, 5, 7, 9'}
+                    />
+                    <TextField
+                        title={I18n.t('RegisteredDeliveryDate')}
+                        content={'Ngày làm việc thứ 5 trước ngày thông báo đầu tiên'}
+                    />
+                    <TextField
+                        title={I18n.t('FirstNotifyDate')}
+                        content={'Ngày làm việc cuối cùng của tháng liên trước tháng đáo hạn'}
+                    />
+                    <TextField
+                        title={I18n.t('EndlessTransactionDate')}
+                        content={'Ngày làm việc trước ngày 15 của tháng đáo hạn'}
+                    />
+                </View>
+                : null
+            }
+        </View>
+    )
+
+}
+export default GeneralInfo
+const styles = StyleSheet.create({
+    container: {
+        backgroundColor: R.colors.white,
+        width: '100%',
+        shadowColor: '#181F4D21',
+        shadowOffset: {width: 1, height: 1},
+        shadowOpacity: 1,
+        shadowRadius: 2,
+        elevation: 1,
+        marginVertical: HEIGHTXD(30)
+    },
+    flexTitle: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingVertical: HEIGHTXD(36),
+        borderBottomColor: R.colors.borderGray,
+    },
+    title: {
+        fontSize: getFontXD(36),
+        lineHeight: getLineHeightXD(56),
+        color: R.colors.main,
+        textTransform: 'uppercase',
+    },
+})

src/Screens/Tradding/ProductDetail/Tab/QualityStandard/ItemView/GeneralInfo.js

+import React, {useState} 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, WIDTHXD} from '../../../../../../Config/Functions';
+import I18n from '../../../../../../helper/i18/i18n';
+
+const GeneralInfo = (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}>
+            <TouchableOpacity
+                onPress={() => changeLayout()}
+                style={[styles.flexTitle, {
+                    borderBottomWidth: expanded === true ? 0.3 : 0,
+                    paddingHorizontal: WIDTHXD(30),
+                }]}
+            >
+                <Text style={styles.title}>{I18n.t('GeneralInformation')}</Text>
+                {expanded === true ? (
+                    <Ionicons
+                        name='chevron-up'
+                        size={WIDTHXD(50)}
+                        style={{marginRight: WIDTHXD(50)}}
+                        color={R.colors.iconGray}
+                    />
+                ) : (
+                    <Ionicons
+                        name='chevron-down'
+                        size={WIDTHXD(50)}
+                        style={{marginRight: WIDTHXD(50)}}
+                        color={R.colors.iconGray}
+                    />
+                )}
+            </TouchableOpacity>
+            {expanded ?
+                <Text style={styles.content}>{`Theo quy định của sản phẩm Đậu tương CBOT giao dịch trên Sở Giao dịch Hàng hóa CBOT. \nĐậu tương được giao dịch là đậu tương loại 1, đậu tương loại 2, đậu tương loại 3 đáp ứng những tiêu chuẩn được mô tả ở bảng dưới:`}</Text>
+                : null
+            }
+        </View>
+    );
+
+};
+export default GeneralInfo;
+const styles = StyleSheet.create({
+    container: {
+        backgroundColor: R.colors.white,
+        width: '100%',
+        shadowColor: '#181F4D21',
+        shadowOffset: {width: 1, height: 1},
+        shadowOpacity: 1,
+        shadowRadius: 2,
+        elevation: 1,
+    },
+    flexTitle: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingVertical: HEIGHTXD(36),
+        borderBottomColor: R.colors.borderGray,
+    },
+    title: {
+        fontSize: getFontXD(36),
+        lineHeight: getLineHeightXD(56),
+        color: R.colors.main,
+        textTransform: 'uppercase',
+    },
+    content: {
+        flex: 3.5,
+        fontSize: getFontXD(36),
+        color: R.colors.black,
+        paddingVertical: HEIGHTXD(30),
+        paddingHorizontal: HEIGHTXD(30)
+    },
+});

src/Screens/Tradding/ProductDetail/Tab/QualityStandard/QualityStandard.js

+import React, {useState} from 'react';
+import {
+    ScrollView, StyleSheet,
+    View,
+} from 'react-native';
+import {HEIGHTXD} from '../../../../../Config/Functions';
+import GeneralInfo from './ItemView/GeneralInfo';
+import R from '../../../../../assets/R';
+const QualityStandard = (props) => {
+    return (
+        <ScrollView
+            style={styles.container}
+            showsVerticalScrollIndicator={false}>
+            <View style={{marginBottom: HEIGHTXD(100)}}>
+                <GeneralInfo/>
+            </View>
+        </ScrollView>
+    )
+
+}
+export default QualityStandard
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: R.colors.colorBackground,
+        paddingTop: HEIGHTXD(30),
+    },
+});

src/components/Header/HeaderBack.js

@@ -22,7 +22,7 @@ import SnackBar from '../SnackBar';
 import AppText from '../AppText';
 
 const HeaderHome = (props) => {
-  const {title, isWhite} = props;
+  const {title, isWhite, children} = props;
   const navigate = useNavigation();
   return (
     <ImageBackground
@@ -37,7 +37,7 @@ const HeaderHome = (props) => {
           onPress={() => navigate.goBack()}>
           <Image source={R.images.iconBack} style={styles.imgIcon} />
         </TouchableOpacity>
-        <AppText i18nKey={title} style={styles.txtTitle}></AppText>
+        <AppText i18nKey={title} style={styles.txtTitle} children={children}></AppText>
         <View style={{width: 35, height: 30}} />
       </View>
     </ImageBackground>

src/components/Header/HeaderHome.js

@@ -31,8 +31,9 @@ import {
   PROFILE,
   AccountVerification,
   WALLETWITHDRAW,
-  PACKETCQG,
+  PACKETCQG, PRODUCTDETAIL,
 } from '../../routers/ScreenNames';
+import ProductDetail from '../../Screens/Tradding/ProductDetail/ProductDetail';
 
 const renderWallet = (status, current_money, current_cqg_money, contract) => {
   const navigate = useNavigation();
@@ -113,7 +114,7 @@ const renderWallet = (status, current_money, current_cqg_money, contract) => {
     <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
       <TouchableOpacity
         disabled={status == 2 ? true : false}
-        onPress={() => navigate.navigate(AccountVerification)}>
+        onPress={() => navigate.navigate(PRODUCTDETAIL)}>
         <ImageBackground
           imageStyle={{borderRadius: 10}}
           style={{

src/components/TextField.js

+import React from 'react'
+import {
+    View,
+    Text,
+    StyleSheet
+} from 'react-native'
+import R from '../assets/R';
+import {getFontXD, HEIGHTXD, WIDTHXD} from '../Config/Functions';
+
+const TextField = (props) => {
+    return (
+        <View style={[styles.row, { paddingVertical: WIDTHXD(15) }]}>
+            <Text style={styles.title}>{props.title}</Text>
+            <Text style={styles.content}>{props.content}</Text>
+        </View>
+    )
+}
+export default TextField
+const styles = StyleSheet.create({
+    row: {
+        paddingHorizontal: HEIGHTXD(30),
+        flexDirection: 'row',
+    },
+    title: {
+        flex: 2.7,
+        fontSize: getFontXD(36),
+        color: R.colors.color777
+    },
+    content: {
+        flex: 3.5,
+        fontSize: getFontXD(36),
+        color: R.colors.black,
+    },
+})

src/helper/i18/locales/en.js

@@ -189,4 +189,23 @@ export default {
   OwnerAccount2: 'Owner account',
   NothingChange: 'Nothing change',
   Tradding: 'Tradding',
+  ContractDescription: 'Contract description',
+  QualityStandard: 'Quality Standard',
+  CommodityTransactions: 'Commodity transactions',
+  CommodityCode: 'Commodity code',
+  Escrow: 'Escrow',
+  PositionLimit: 'Position limit',
+  PaymentMethod: 'Payment method',
+  TimeTransaction: 'Time transaction',
+  Time: 'Time',
+  TransactionSession: 'Transaction session',
+  MaturityMonth: 'Maturity month',
+  RegisteredDeliveryDate: 'Registered delivery date',
+  PriceInfo: 'Price Information',
+  ListedUnit: 'Listed unit',
+  PriceStep: 'Price step',
+  ContactSize: 'Contact size',
+  PriceRange: 'Price range',
+  FirstNotifyDate: 'First notify date',
+  EndlessTransactionDate: 'Endless transaction date',
 };

src/helper/i18/locales/vn.js

@@ -194,4 +194,23 @@ export default {
   OwnerAccount2: 'Chủ tài khoản',
   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',
+  CommodityTransactions: 'Hàng hóa giao dịch',
+  CommodityCode: 'Mã hàng hóa',
+  Escrow: 'Ký quỹ',
+  PositionLimit: 'Giới hạn vị thế',
+  PaymentMethod: 'Phương thức thanh toán',
+  TimeTransaction: 'Thời gian giao dịch',
+  Time: 'Thời gian',
+  TransactionSession: 'Phiên giao dịch',
+  MaturityMonth: 'Tháng đáo hạn',
+  RegisteredDeliveryDate: 'Ngày đăng ký giao nhận',
+  PriceInfo: 'Thông tin giá',
+  ListedUnit: 'Đơn vị niêm yết',
+  PriceStep: 'Bước giá',
+  ContactSize: 'Độ lớn hợp đồng',
+  PriceRange: 'Biên độ giá',
+  FirstNotifyDate: 'Ngày thông báo đầu tiên',
+  EndlessTransactionDate: 'Ngày giao dịch cuối cùng',
 };

src/routers/ScreenNames.js

@@ -65,3 +65,4 @@ export const LEGALCUSTOMER = 'LEGALCUSTOMER';
 export const LEGALPARTNER = 'LEGALPARTNER';
 
 export const HISTORYDETAIL = 'HISTORYDETAIL';
+export const PRODUCTDETAIL = 'PRODUCTDETAIL';

src/routers/StackNavigation.js

@@ -45,6 +45,7 @@ import Customer from '../Screens/LegalDocument/Customer';
 import Partner from '../Screens/LegalDocument/Partner';
 import SnackBar from '../components/SnackBar';
 import DetailHistory from '../Screens/Action/History/DetailHistory';
+import ProductDetail from '../Screens/Tradding/ProductDetail/ProductDetail';
 
 import * as ScreenName from './ScreenNames';
 
@@ -117,6 +118,7 @@ function MyStack(props) {
 
       <Stack.Screen name={ScreenName.CONFIRMEMAIL} component={ConfirmEmail} />
       <Stack.Screen name={ScreenName.NEWPASSWORD} component={NewPassWord} />
+      <Stack.Screen name={ScreenName.PRODUCTDETAIL} component={ProductDetail} />
 
       <Stack.Screen
         name={ScreenName.FORGOTPASSWORD}