complete integrate api

src/Screens/Transaction/PriceList/PriceListView.js

@@ -62,7 +62,7 @@ const PriceListView = (props) => {
                     }}
                     renderItem={({item, index}) => <Item item={item}
                                                   isEndItem={index == data.length -1}
-                                                  onPress={(item) => navigate.navigate(PRODUCTDETAIL)}/>}
+                                                  onPress={(item) => navigate.navigate(PRODUCTDETAIL, {id: item.id, name: item.name})}/>}
                 />
             )}
         </View>

src/Screens/Transaction/ProductDetail/ProductDetail.js

@@ -3,7 +3,7 @@ import React from 'react';
 import ProductDetailView from './ProductDetailView';
 
 const ProductDetail = (props) => {
-  return <ProductDetailView />;
+  return <ProductDetailView id={props.route.params.id} name={props.route.params.name}/>;
 };
 
 export default ProductDetail;

src/Screens/Transaction/ProductDetail/ProductDetailView.js

@@ -11,9 +11,10 @@ const Tab = createMaterialTopTabNavigator();
 import I18n from '../../../helper/i18/i18n';
 
 const ProductDetailView = (props) => {
+    console.log('ProductDetailView', props)
   return (
     <View style={{flex: 1}}>
-      <HeaderBack isWhite={true} children={'Đậu tương mini'} />
+      <HeaderBack isWhite={true} children={props.name} />
 
       <Tab.Navigator
         initialRouteName="ContractDescription"
@@ -26,11 +27,13 @@ const ProductDetailView = (props) => {
         <Tab.Screen
           name="ContractDescription"
           component={ContractDescription}
+          initialParams={props}
           options={{tabBarLabel: I18n.t('ContractDescription')}}
         />
         <Tab.Screen
           name="QualityStandard"
           component={QualityStandard}
+          initialParams={props}
           options={{tabBarLabel: I18n.t('QualityStandard')}}
         />
       </Tab.Navigator>

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

-import React, {useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import {
     View,
     ScrollView,
-    StyleSheet,
+    StyleSheet, Alert,
 } 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';
+import {showLoading, hideLoading} from '../../../../../actions/loadingAction';
+import {getContractDescription} from '../../../../../apis/Functions/Transaction';
+import I18n from '../../../../../helper/i18/i18n';
 
 const ContractDescription = (props) => {
+    const[contractDescription, setContractDescription] = useState(null)
+    useEffect(() => {
+        async function fetchData() {
+            showLoading()
+            const res = await getContractDescription(props.route.params.id)
+            if(res.status === 200 && res.data.code ===200) {
+                setContractDescription(res.data.data)
+            } else {
+                Alert.alert(I18n.t('Notification'), res.data.message);
+            }
+            console.log(res)
+            hideLoading()
+        }
+        fetchData();
+    }, [props.route.params.id]);
     return (
         <ScrollView
             style={styles.container}
             showsVerticalScrollIndicator={false}>
             <View style={{marginBottom: HEIGHTXD(100)}}>
-                <GeneralInfo/>
-                <TimeTransaction/>
-                <PriceInfo/>
+                <GeneralInfo contractDescription={contractDescription}/>
+                <TimeTransaction contractDescription={contractDescription}/>
+                <PriceInfo contractDescription={contractDescription}/>
             </View>
         </ScrollView>
     );

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

-import React, {useState} from 'react';
+import React, {useState, useEffect} from 'react';
 import {
     View,
     TouchableOpacity,
@@ -15,6 +15,10 @@ import TextField from '../../../../../../components/TextField';
 
 const GeneralInfo = (props) => {
     const [expanded, setExpanded] = useState(true);
+    const [contractDescription, setContractDescription] = useState(props.contractDescription);
+    useEffect(() => {
+        setContractDescription(props.contractDescription)
+    }, [props.contractDescription])
     const changeLayout = () => {
         LayoutAnimation.configureNext({
             duration: 500,
@@ -58,27 +62,27 @@ const GeneralInfo = (props) => {
                 <View style={{paddingVertical: HEIGHTXD(20)}}>
                     <TextField
                         title={I18n.t('CommodityTransactions')}
-                        content={'Đậu tương minu CBOT'}
+                        content={contractDescription?.name}
                     />
                     <TextField
                         title={I18n.t('CommodityCode')}
-                        content={'XD'}
+                        content={contractDescription?.code}
                     />
                     <TextField
                         title={I18n.t('Escrow')}
-                        content={'Theo quy định của MXV'}
+                        content={contractDescription?.escrow}
                     />
                     <TextField
                         title={I18n.t('PositionLimit')}
-                        content={'Theo quy định của MXV'}
+                        content={contractDescription?.interest_limit}
                     />
                     <TextField
                         title={I18n.t('PaymentMethod')}
-                        content={'Giao nhân vật chất'}
+                        content={contractDescription?.settlement_method}
                     />
                     <TextField
                         title={I18n.t('QualityStandard')}
-                        content={'Đậu tương loại 1, loại 2, loại 2'}
+                        content={contractDescription?.quality_standard}
                     />
                 </View>
                 : null

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

-import React, {useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import {
     View,
     TouchableOpacity,
@@ -15,6 +15,10 @@ import TextField from '../../../../../../components/TextField';
 
 const GeneralInfo = (props) => {
     const [expanded, setExpanded] = useState(true);
+    const [contractDescription, setContractDescription] = useState(props.contractDescription);
+    useEffect(() => {
+        setContractDescription(props.contractDescription)
+    }, [props.contractDescription])
     const changeLayout = () => {
         LayoutAnimation.configureNext({
             duration: 500,
@@ -58,27 +62,19 @@ const GeneralInfo = (props) => {
                 <View style={{paddingVertical: HEIGHTXD(20)}}>
                     <TextField
                         title={I18n.t('ListedUnit')}
-                        content={'cent/giá'}
+                        content={contractDescription?.price_quotation}
                     />
                     <TextField
                         title={I18n.t('PriceStep')}
-                        content={'1.000 cent/giạ'}
+                        content={contractDescription?.step_price}
                     />
                     <TextField
                         title={I18n.t('ContactSize')}
-                        content={'1000 giạ/lót'}
+                        content={contractDescription?.contract_size}
                     />
                     <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'}
+                        content={contractDescription && contractDescription.daily_price_limit ? `${I18n.t('FirstPriceRange')}: ${contractDescription.daily_price_limit}\n${I18n.t('ExpandPriceRange')}: ${contractDescription.expanded_price_limit}` : ''}
                     />
                 </View>
                 : null

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

-import React, {useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import {
     View,
     TouchableOpacity,
@@ -15,6 +15,16 @@ import TextField from '../../../../../../components/TextField';
 
 const GeneralInfo = (props) => {
     const [expanded, setExpanded] = useState(true);
+    const [contractDescription, setContractDescription] = useState(props.contractDescription);
+    const [transactionSession, setTransactionSession] = useState('');
+    useEffect(() => {
+        setContractDescription(props.contractDescription)
+        if(props.contractDescription?.trans_session_list) {
+            let transactionSession = ''
+            props.contractDescription.trans_session_list?.map((str) => transactionSession = (transactionSession !== '' ? `${transactionSession}\n${str}` : str))
+            setTransactionSession(transactionSession)
+        }
+    }, [props.contractDescription])
     const changeLayout = () => {
         LayoutAnimation.configureNext({
             duration: 500,
@@ -58,27 +68,27 @@ const GeneralInfo = (props) => {
                 <View style={{paddingVertical: HEIGHTXD(20)}}>
                     <TextField
                         title={I18n.t('Time')}
-                        content={'Thứ 2 - Thứ 6'}
+                        content={contractDescription?.trans_time}
                     />
                     <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)'}
+                        content={transactionSession}
                     />
                     <TextField
                         title={I18n.t('MaturityMonth')}
-                        content={'Tháng 3, 5, 7, 9'}
+                        content={contractDescription?.maturity_list}
                     />
                     <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'}
+                        content={contractDescription?.delivery_registration_day_desc}
                     />
                     <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'}
+                        content={contractDescription?.first_notice_day_desc}
                     />
                     <TextField
                         title={I18n.t('EndlessTransactionDate')}
-                        content={'Ngày làm việc trước ngày 15 của tháng đáo hạn'}
+                        content={contractDescription?.last_trading_day_desc}
                     />
                 </View>
                 : null

src/Screens/Transaction/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/Transaction/ProductDetail/Tab/QualityStandard/QualityStandard.js

-import React, {useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import {
-    ScrollView, StyleSheet,
+    Alert,
+    ScrollView, StyleSheet, Text,
     View,
 } from 'react-native';
-import {HEIGHTXD} from '../../../../../Config/Functions';
-import GeneralInfo from './ItemView/GeneralInfo';
+import {getFontXD, HEIGHTXD} from '../../../../../Config/Functions';
 import R from '../../../../../assets/R';
+import {hideLoading, showLoading} from '../../../../../actions/loadingAction';
+import {getContractDescription} from '../../../../../apis/Functions/Transaction';
+import I18n from '../../../../../helper/i18/i18n';
 const QualityStandard = (props) => {
+    const[qualityStandard, setQualityStandard] = useState('')
+    useEffect(() => {
+        async function fetchData() {
+            showLoading()
+            const res = await getContractDescription(props.route.params.id)
+            if(res.status === 200 && res.data.code ===200) {
+                setQualityStandard(res.data.data.quality_standard_desc)
+            } else {
+                Alert.alert(I18n.t('Notification'), res.data.message);
+            }
+            hideLoading()
+        }
+        fetchData();
+    }, [props.route.params.id]);
     return (
         <ScrollView
             style={styles.container}
             showsVerticalScrollIndicator={false}>
-            <View style={{marginBottom: HEIGHTXD(100)}}>
-                <GeneralInfo/>
+            <View style={{marginBottom: HEIGHTXD(100),
+                backgroundColor: R.colors.white,
+                width: '100%',
+                shadowColor: '#181F4D21',
+                shadowOffset: {width: 1, height: 1},
+                shadowOpacity: 1,
+                shadowRadius: 2,
+                elevation: 1,}}>
+                <Text style={styles.content}>{qualityStandard}</Text>
             </View>
         </ScrollView>
     )
@@ -25,4 +49,11 @@ const styles = StyleSheet.create({
         backgroundColor: R.colors.colorBackground,
         paddingTop: HEIGHTXD(30),
     },
+    content: {
+        flex: 3.5,
+        fontSize: getFontXD(36),
+        color: R.colors.black,
+        paddingVertical: HEIGHTXD(30),
+        paddingHorizontal: HEIGHTXD(30)
+    },
 });

src/apis/Functions/Transaction.js

@@ -11,3 +11,8 @@ export const getTransactionListByCategory = async (body) =>
   GetData(url.urlGetTransactionListByCategory, body)
     .then((res) => res)
     .catch((err) => err);
+
+export const getContractDescription = async (id) =>
+  GetData(`${url.urlGetContractDescription}${id}`)
+    .then((res) => res)
+    .catch((err) => err);

src/apis/url.js

@@ -42,4 +42,5 @@ export default {
 
   //Transaction
   urlGetTransactionListByCategory: `${root}api/v1/transactions/products`,
+  urlGetContractDescription: `${root}api/v1/transactions/products/specification-contract/`,
 };

src/helper/i18/locales/en.js

@@ -218,4 +218,6 @@ export default {
   Version: 'Version',
   UpdateDescription:
     'A new version of DCVInvest is available. Update now to continue using and experiencing the latest system features!',
+  FirstPriceRange: 'First price range',
+  ExpandPriceRange: 'Expand price range',
 };

src/helper/i18/locales/vn.js

@@ -222,4 +222,6 @@ export default {
   Enter_Phone: 'Nhập số điện thoại',
   Version: 'Phiên bản',
   UpdateDescription: 'Đã có phiên bản DCVInvest mới. Cập nhật ngay để tiếp tục sử dụng và trải nghiệm những tính năng mới nhất của hệ thống!',
+  FirstPriceRange:'Giới hạn giá ban đầu',
+  ExpandPriceRange:'Giới hạn giá mở rộng',
 };