Merge branch 'phase2_transation_intergate_api' into 'dev_phase2'

Phase2 transation intergate api

See merge request !7

ios/Invest.xcodeproj/project.pbxproj

@@ -923,6 +923,7 @@
 				PROVISIONING_PROFILE_SPECIFIER = "";
 				SWIFT_OPTIMIZATION_LEVEL = "-Onone";
 				SWIFT_VERSION = 5.0;
+				TARGETED_DEVICE_FAMILY = "1,2";
 				VERSIONING_SYSTEM = "apple-generic";
 			};
 			name = Debug;
@@ -950,6 +951,7 @@
 				PRODUCT_NAME = Invest;
 				PROVISIONING_PROFILE_SPECIFIER = "";
 				SWIFT_VERSION = 5.0;
+				TARGETED_DEVICE_FAMILY = "1,2";
 				VERSIONING_SYSTEM = "apple-generic";
 			};
 			name = Release;

src/Screens/Transaction/DueDate/DueDate.js

@@ -2,30 +2,62 @@ import React, {useState, useEffect} from 'react';
 import {getListNotification} from '../../../apis/Functions/users';
 import DueDateView from './DueDateView';
 import I18n from '../../../helper/i18/i18n';
+import {getListCategoryProduct, getTransactionListByCategory} from '../../../apis/Functions/Transaction';
+import {Alert, Platform} from 'react-native';
+import PriceListView from '../PriceList/PriceListView';
 
 const DueDate = (props) => {
-  const [selected, setSelected] = useState('');
   const [page, setPage] = useState(1);
   const [data, setData] = useState([]);
   const [tottalPage, setTotalPage] = useState(1);
-  const [isRefresh, setisRefresh] = useState(false);
-  const [fillter, setFillters] = useState('ALL');
+  const [isRefresh, setIsRefresh] = useState(false);
+  const [filters, setFilters] = useState([]);
+  const [filterId, setFilterId] = useState(-1);
 
   useEffect(() => {
+    getCategoryData();
+  }, []);
+  useEffect(() => {
+    setData([])
     getData();
-  }, [fillter]);
+  }, [filterId]);
+
+  const getCategoryData = async () => {
+    // setIsRefresh(true);
+    const res = await getListCategoryProduct({
+      keyword: '',
+      platform: Platform.OS,
+      page_size: 20,
+      page_index: 1,
+      type: 'PRODUCT',
+    });
+    if ((res.data.code = 200 && res.data.data)) {
+      let data = [];
+      data.push({id: -1, name: 'All'});
+      setFilters(data.concat([...res.data.data]));
+    } else {
+      Alert.alert(I18n.t('Notification'), res.data.message);
+    }
+  };
+
+  const onRefresh = () => {
+    setPage(1);
+    getData();
+  };
 
   const getData = async () => {
-    setisRefresh(true);
+    setIsRefresh(true);
     setPage(1);
-    const res = await getListNotification({
+    const res = await getTransactionListByCategory({
       keyword: '',
       platform: Platform.OS,
       page_size: 10,
       page_index: 1,
-      type: fillter,
+      type:'EXPIRY_DATE',
+      category_id: filterId,
     });
-    setisRefresh(false);
+    setIsRefresh(false);
+    console.log('getData', res);
     if ((res.data.code = 200 && res.data.data)) {
       setData(res.data.data);
       setTotalPage(res.data.meta.pages);
@@ -34,38 +66,39 @@ const DueDate = (props) => {
     }
   };
 
-  const onRefresh = () => {
-    getData();
-  };
-
   const onLoadMore = () => {
     console.log(tottalPage);
-    if (page < tottalPage) getDataLoadMore();
+    if (page < tottalPage) {
+      getDataLoadMore();
+    }
   };
 
   const getDataLoadMore = async () => {
-    setisRefresh(true);
-    const res = await getListNotification({
+    setIsRefresh(true);
+    const res = await getTransactionListByCategory({
       keyword: '',
       platform: Platform.OS,
       page_size: 10,
-      page_index: 1,
-      type: fillter,
+      page_index: page + 1,
+      type:'EXPIRY_DATE',
+      category_id: filterId,
     });
     setPage(page + 1);
     if (res.data.code == 200) {
       setData(data.concat(res.data.data));
     }
-    setisRefresh(false);
+    setIsRefresh(false);
   };
 
+
   return (
     <DueDateView
       onRefresh={onRefresh}
       isRefresh={isRefresh}
       onLoadMore={onLoadMore}
-      setFillters={setFillters}
-      fillter={fillter}
+      setFilterId={setFilterId}
+      filterId={filterId}
+      filters={filters}
       data={data}
     />
   );

src/Screens/Transaction/DueDate/DueDateView.js

@@ -10,62 +10,38 @@ import {
 
 import HeaderDrawer from '../../../components/Header/HeaderDrawer';
 import Item from './Item';
-import {getFontXD} from '../../../Config/Functions';
+import {getFontXD, HEIGHTXD} from '../../../Config/Functions';
 import AppText from '../../../components/AppText';
 import {PRODUCTDETAIL} from '../../../routers/ScreenNames';
 import {useNavigation} from '@react-navigation/native';
 
-const Fillters = [
-  {
-    id: '1',
-    name: 'All',
-    value: 'ALL',
-  },
-  {
-    id: '2',
-    name: 'Deposit',
-    value: 'DEPOSIT',
-  },
-  {
-    id: '3',
-    name: 'Withdraw',
-    value: 'WITHDRAW',
-  },
-  {
-    id: '4',
-    name: 'Transfer',
-    value: 'TRANSFER',
-  },
-];
-
 const EscrowView = (props) => {
-  const {onRefresh, isRefresh, onLoadMore, setFillters, fillter, data} = props;
+    const {onRefresh, isRefresh, onLoadMore, setFilterId, filters, filterId, data} = props;
     const navigate = useNavigation();
 
     return (
         <View style={{flex: 1}}>
             <View style={styles.headerContainer}>
                 <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-          {Fillters.map((e) => (
+                    {filters.map((e) => (
                         <TouchableOpacity
-              key={e.value}
-              onPress={() => setFillters(e.value)}
+                            key={e.id}
+                            onPress={() => setFilterId(e.id)}
                             style={[
                                 styles.itemFillter,
-                fillter == e.value ? {borderColor: '#1473E6'} : null,
+                                filterId == e.id ? {borderColor: '#1473E6'} : null,
                             ]}>
-              <AppText
-                i18nKey={e.name}
+                            <Text
                                 style={[
                                     styles.txtFillter,
-                  fillter == e.value ? {color: '#1473E6'} : {},
-                ]}></AppText>
+                                    filterId == e.id ? {color: '#1473E6'} : {},
+                                ]}>{e.name}</Text>
                         </TouchableOpacity>
                     ))}
                 </ScrollView>
             </View>
 
-      {data.length == 0 ? (
+            {data.length == 0 && !isRefresh ? (
                 <View style={{justifyContent: 'center', alignItems: 'center', flex: 1}}>
                     <AppText
                         i18nKey={'NoData'}
@@ -76,6 +52,7 @@ const EscrowView = (props) => {
                 </View>
             ) : (
                 <FlatList
+                    style={{marginTop: HEIGHTXD(15)}}
                     keyExtractor={(item) => item.id}
                     data={data}
                     refreshing={isRefresh}
@@ -84,7 +61,8 @@ const EscrowView = (props) => {
                     onEndReached={(info) => {
                         onLoadMore();
                     }}
-          renderItem={({item}) => <Item item={item}
+                    renderItem={({item, index}) => <Item item={item}
+                                                         isEndItem={index == (data.length - 1)}
                                                          onPress={(item) => navigate.navigate(PRODUCTDETAIL)}/>}
                 />
             )}

src/Screens/Transaction/DueDate/Item.js

@@ -15,15 +15,17 @@ import {
 } from '../../../Config/Functions';
 import R from '../../../assets/R';
 import Block from '../../../components/Block';
+import I18n from '../../../helper/i18/i18n';
 
 const Item = (props) => {
-  const {item} = props;
+  const {item, isEndItem} = props;
+  console.log(item)
   return (
-    <View style={styles.container}>
+    <View style={[styles.container, isEndItem && {marginBottom: HEIGHTXD(100)}]}>
       <TouchableOpacity onPress={() => props.onPress(item)}>
         <Block flex={1} row>
           <View style={styles.wrapDate}>
-            <Image source={R.images.iconRecharge} style={styles.imgIcon} />
+            <Image source={{uri: item.commoditiy.image_path}} style={styles.imgIcon} />
           </View>
           <Block padding={[5, 10]} space={'between'} flex={1}>
             <View
@@ -32,13 +34,13 @@ const Item = (props) => {
                 flexDirection: 'row',
                 justifyContent: 'space-between',
               }}>
-              <Text numberOfLines={2} style={styles.txtBlack}>
-                Ngô CBOT
+              <Text numberOfLines={2} style={[styles.txtBlack, {flexWrap: 'wrap', flex: 1}]} numberOfLines={1} ellipsizeMode='tail'>
+                {item.contract_name}
               </Text>
-              <Text style={styles.txtMoney}>05/2022</Text>
+              <Text style={styles.txtMoney}>{item.term}</Text>
             </View>
-            <Text style={styles.txtCode}>Mã hợp đồng:ZCEK22</Text>
-            <Text style={styles.txt}>29/04/2022-13/05/2022</Text>
+            <Text style={styles.txtCode}>{`${I18n.t('ContactCode')}: ${item.contract_code}`}</Text>
+            <Text style={styles.txt}>{item.open_interest_range}</Text>
           </Block>
         </Block>
       </TouchableOpacity>
@@ -50,7 +52,6 @@ export default Item;
 
 const styles = StyleSheet.create({
   container: {
-    marginTop: 10,
     paddingVertical: 10,
     shadowColor: '#000',
     shadowOffset: {
@@ -62,8 +63,8 @@ const styles = StyleSheet.create({
     elevation: 5,
     marginHorizontal: 10,
     backgroundColor: R.colors.white,
-    marginBottom: 10,
     borderRadius: HEIGHTXD(30),
+    marginVertical: HEIGHTXD(15)
   },
 
   wrapLeft: {
@@ -94,14 +95,13 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   txtBlack: {
-    fontSize: getFontXD(42),
+    fontSize: getFontXD(50),
     color: 'black',
-    fontWeight: 'bold',
   },
   imgIcon: {
-    width: WIDTHXD(178),
-    height: HEIGHTXD(178),
-    resizeMode: 'contain',
+    width: WIDTHXD(150),
+    height: WIDTHXD(150),
+    resizeMode: 'cover',
   },
   txtMoney: {
     fontSize: getFontXD(42),

src/Screens/Transaction/Escrow/Escrow.js

@@ -2,29 +2,62 @@ import React, {useState, useEffect} from 'react';
 import {getListNotification} from '../../../apis/Functions/users';
 import EscrowView from './EscrowView';
 import I18n from '../../../helper/i18/i18n';
+import {getListCategoryProduct, getTransactionListByCategory} from '../../../apis/Functions/Transaction';
+import {Alert, Platform} from 'react-native';
+import PriceListView from '../PriceList/PriceListView';
 const Escrow = (props) => {
   const [selected, setSelected] = useState('');
   const [page, setPage] = useState(1);
   const [data, setData] = useState([]);
   const [tottalPage, setTotalPage] = useState(1);
-  const [isRefresh, setisRefresh] = useState(false);
-  const [fillter, setFillters] = useState('ALL');
+  const [isRefresh, setIsRefresh] = useState(false);
+  const [filters, setFilters] = useState([]);
+  const [filterId, setFilterId] = useState(-1);
 
   useEffect(() => {
+    getCategoryData();
+  }, []);
+  useEffect(() => {
+    setData([])
+    getData();
+  }, [filterId]);
+
+  const getCategoryData = async () => {
+    // setIsRefresh(true);
+    const res = await getListCategoryProduct({
+      keyword: '',
+      platform: Platform.OS,
+      page_size: 20,
+      page_index: 1,
+      type: 'PRODUCT',
+    });
+    if ((res.data.code = 200 && res.data.data)) {
+      let data = [];
+      data.push({id: -1, name: 'All'});
+      setFilters(data.concat([...res.data.data]));
+    } else {
+      Alert.alert(I18n.t('Notification'), res.data.message);
+    }
+  };
+
+  const onRefresh = () => {
+    setPage(1);
     getData();
-  }, [fillter]);
+  };
 
   const getData = async () => {
-    setisRefresh(true);
+    setIsRefresh(true);
     setPage(1);
-    const res = await getListNotification({
+    const res = await getTransactionListByCategory({
       keyword: '',
       platform: Platform.OS,
       page_size: 10,
       page_index: 1,
-      type: fillter,
+      type:'ESCROW',
+      category_id: filterId,
     });
-    setisRefresh(false);
+    setIsRefresh(false);
+    console.log('getData', res);
     if ((res.data.code = 200 && res.data.data)) {
       setData(res.data.data);
       setTotalPage(res.data.meta.pages);
@@ -33,29 +66,28 @@ const Escrow = (props) => {
     }
   };
 
-  const onRefresh = () => {
-    getData();
-  };
-
   const onLoadMore = () => {
     console.log(tottalPage);
-    if (page < tottalPage) getDataLoadMore();
+    if (page < tottalPage) {
+      getDataLoadMore();
+    }
   };
 
   const getDataLoadMore = async () => {
-    setisRefresh(true);
-    const res = await getListNotification({
+    setIsRefresh(true);
+    const res = await getTransactionListByCategory({
       keyword: '',
       platform: Platform.OS,
       page_size: 10,
-      page_index: 1,
-      type: fillter,
+      page_index: page + 1,
+      type:'ESCROW',
+      category_id: filterId,
     });
     setPage(page + 1);
     if (res.data.code == 200) {
       setData(data.concat(res.data.data));
     }
-    setisRefresh(false);
+    setIsRefresh(false);
   };
 
   return (
@@ -63,8 +95,9 @@ const Escrow = (props) => {
       onRefresh={onRefresh}
       isRefresh={isRefresh}
       onLoadMore={onLoadMore}
-      setFillters={setFillters}
-      fillter={fillter}
+      setFilterId={setFilterId}
+      filterId={filterId}
+      filters={filters}
       data={data}
     />
   );

src/Screens/Transaction/Escrow/EscrowView.js

@@ -10,56 +10,32 @@ import {
 
 import HeaderDrawer from '../../../components/Header/HeaderDrawer';
 import Item from './Item';
-import {getFontXD} from '../../../Config/Functions';
+import {getFontXD, HEIGHTXD} from '../../../Config/Functions';
 import AppText from '../../../components/AppText';
 import {PRODUCTDETAIL} from '../../../routers/ScreenNames';
 import {useNavigation} from '@react-navigation/native';
 
-const Fillters = [
-  {
-    id: '1',
-    name: 'All',
-    value: 'ALL',
-  },
-  {
-    id: '2',
-    name: 'Deposit',
-    value: 'DEPOSIT',
-  },
-  {
-    id: '3',
-    name: 'Withdraw',
-    value: 'WITHDRAW',
-  },
-  {
-    id: '4',
-    name: 'Transfer',
-    value: 'TRANSFER',
-  },
-];
-
 const EscrowView = (props) => {
-  const {onRefresh, isRefresh, onLoadMore, setFillters, fillter, data} = props;
+    const {onRefresh, isRefresh, onLoadMore, setFilterId, filters, filterId, data} = props;
     const navigate = useNavigation();
 
     return (
         <View style={{flex: 1}}>
             <View style={styles.headerContainer}>
                 <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-          {Fillters.map((e) => (
+                    {filters.map((e) => (
                         <TouchableOpacity
-              key={e.value}
-              onPress={() => setFillters(e.value)}
+                            key={e.id}
+                            onPress={() => setFilterId(e.id)}
                             style={[
                                 styles.itemFillter,
-                fillter == e.value ? {borderColor: '#1473E6'} : null,
+                                filterId == e.id ? {borderColor: '#1473E6'} : null,
                             ]}>
-              <AppText
-                i18nKey={e.name}
+                            <Text
                                 style={[
                                     styles.txtFillter,
-                  fillter == e.value ? {color: '#1473E6'} : {},
-                ]}></AppText>
+                                    filterId == e.id ? {color: '#1473E6'} : {},
+                                ]}>{e.name}</Text>
                         </TouchableOpacity>
                     ))}
                 </ScrollView>
@@ -76,6 +52,7 @@ const EscrowView = (props) => {
                 </View>
             ) : (
                 <FlatList
+                    style={{marginTop: HEIGHTXD(15)}}
                     keyExtractor={(item) => item.id}
                     data={data}
                     refreshing={isRefresh}
@@ -84,9 +61,10 @@ const EscrowView = (props) => {
                     onEndReached={(info) => {
                         onLoadMore();
                     }}
-          renderItem={({item}) => (
+                    renderItem={({item, index}) => (
                         <Item
                             item={item}
+                            isEndItem={index == data.length - 1}
                             onPress={(item) => navigate.navigate(PRODUCTDETAIL)}
                         />
                     )}

src/Screens/Transaction/Escrow/Item.js

@@ -17,13 +17,13 @@ import R from '../../../assets/R';
 import Block from '../../../components/Block';
 
 const Item = (props) => {
-  const {item} = props;
+  const {item, isEndItem} = props;
   return (
-    <View style={styles.container}>
+    <View style={[styles.container, isEndItem && {marginBottom: HEIGHTXD(100)}]}>
       <TouchableOpacity onPress={() => props.onPress(item)}>
         <Block flex={1} row>
           <View style={styles.wrapDate}>
-            <Image source={R.images.iconRecharge} style={styles.imgIcon} />
+            <Image source={{uri: item.image_path}} style={styles.imgIcon} />
           </View>
           <Block padding={[5, 10]} space={'between'} flex={1}>
             <View
@@ -32,12 +32,12 @@ const Item = (props) => {
                 flexDirection: 'row',
                 justifyContent: 'space-between',
               }}>
-              <Text numberOfLines={2} style={styles.txtBlack}>
-                Ngô CBOT
+              <Text numberOfLines={2} style={[styles.txtBlack, {flexWrap: 'wrap', flex: 1}]} numberOfLines={1} ellipsizeMode='tail'>
+                {item.name}
               </Text>
-              <Text style={styles.txtMoney}>{toPriceVnd(300000)}</Text>
+              <Text style={styles.txtMoney}>{item.escrow > 0 ? toPriceVnd(item.escrow) : 0}</Text>
             </View>
-            <Text style={styles.txt}>ZCE</Text>
+            <Text style={styles.txt}>{item.code}</Text>
           </Block>
         </Block>
       </TouchableOpacity>
@@ -49,7 +49,6 @@ export default Item;
 
 const styles = StyleSheet.create({
   container: {
-    marginTop: 10,
     paddingVertical: 10,
     shadowColor: '#000',
     shadowOffset: {
@@ -61,8 +60,8 @@ const styles = StyleSheet.create({
     elevation: 5,
     marginHorizontal: 10,
     backgroundColor: R.colors.white,
-    marginBottom: 10,
     borderRadius: HEIGHTXD(30),
+    marginVertical: HEIGHTXD(15)
   },
 
   wrapLeft: {
@@ -77,12 +76,10 @@ const styles = StyleSheet.create({
   txtTitle: {
     fontSize: getFontXD(42),
     color: R.colors.black,
-    fontWeight: 'bold',
   },
   txt: {
-    fontSize: getFontXD(39),
-    color: '#929292',
-    fontStyle: 'italic',
+    fontSize: getFontXD(36),
+    color: R.colors.black,
   },
   rowBet: {
     flexDirection: 'row',
@@ -90,14 +87,13 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   txtBlack: {
-    fontSize: getFontXD(42),
+    fontSize: getFontXD(50),
     color: 'black',
-    fontWeight: 'bold',
   },
   imgIcon: {
     width: WIDTHXD(178),
-    height: HEIGHTXD(178),
-    resizeMode: 'contain',
+    height: WIDTHXD(178),
+    resizeMode: 'cover',
   },
   txtMoney: {
     fontSize: getFontXD(42),

src/Screens/Transaction/PriceList/Item.js

@@ -22,7 +22,7 @@ const Item = (props) => {
     <View style={[styles.container, isEndItem && {marginBottom: HEIGHTXD(100)}]}>
       <TouchableOpacity onPress={() => props.onPress(item)}>
         <Block flex={1} row>
-            <Image source={R.images.iconRecharge} style={styles.imgIcon} />
+            <Image source={{uri: item.image_path}} style={styles.imgIcon} />
           <Block padding={[0, WIDTHXD(40)]} space={'between'} flex={1}>
             <View
               style={{
@@ -87,8 +87,8 @@ const styles = StyleSheet.create({
   },
   imgIcon: {
     width: WIDTHXD(150),
-    height: HEIGHTXD(150),
-    resizeMode: 'contain',
+    height: WIDTHXD(150),
+    resizeMode: 'cover',
     marginLeft: WIDTHXD(35)
   },
   txtMoney: {

src/Screens/Transaction/PriceList/PriceList.js

@@ -52,6 +52,7 @@ const PriceList = (props) => {
             platform: Platform.OS,
             page_size: 10,
             page_index: 1,
+            type:'PRICE_TABLE',
             category_id: filterId,
         });
         setIsRefresh(false);
@@ -78,6 +79,7 @@ const PriceList = (props) => {
             platform: Platform.OS,
             page_size: 10,
             page_index: page + 1,
+            type:'PRICE_TABLE',
             category_id: filterId,
         });
         setPage(page + 1);

src/Screens/Transaction/PriceList/PriceListView.js

@@ -15,29 +15,6 @@ import AppText from '../../../components/AppText';
 import {PRODUCTDETAIL} from '../../../routers/ScreenNames';
 import {useNavigation} from '@react-navigation/native';
 
-const Fillters = [
-    {
-        id: '1',
-        name: 'All',
-        value: 'ALL',
-    },
-    {
-        id: '2',
-        name: 'Deposit',
-        value: 'DEPOSIT',
-    },
-    {
-        id: '3',
-        name: 'Withdraw',
-        value: 'WITHDRAW',
-    },
-    {
-        id: '4',
-        name: 'Transfer',
-        value: 'TRANSFER',
-    },
-];
-
 const PriceListView = (props) => {
     const {onRefresh, isRefresh, onLoadMore, setFilterId, filters, data, filterId} = props;
     const navigate = useNavigation();

src/Screens/Transaction/TimeTransaction/Item.js

@@ -5,40 +5,41 @@ import {
     StyleSheet,
     TouchableOpacity,
     Image,
-  Alert,
 } from 'react-native';
 import {
     getFontXD,
     HEIGHTXD,
     WIDTHXD,
-  toPriceVnd,
 } from '../../../Config/Functions';
 import R from '../../../assets/R';
 import Block from '../../../components/Block';
 
 const Item = (props) => {
-  const {item} = props;
+    const {item, isEndItem} = props;
     return (
-    <View style={styles.container}>
+        <View style={[styles.container, isEndItem && {marginBottom: HEIGHTXD(100)}]}>
             <TouchableOpacity onPress={() => props.onPress(item)}>
                 <Block flex={1} row>
                     <View style={styles.wrapDate}>
-            <Image source={R.images.iconRecharge} style={styles.imgIcon} />
+                        <Image source={{uri: item.image_path}} style={styles.imgIcon}/>
                     </View>
-          <Block padding={[5, 10]} space={'between'} flex={1}>
+                    <Block padding={[0, 10]} space={'between'} flex={1}>
                         <View
                             style={{
                                 flex: 1,
                                 flexDirection: 'row',
                                 justifyContent: 'space-between',
                             }}>
-              <Text numberOfLines={2} style={styles.txtBlack}>
-                Ngô CBOT
+                            <Text numberOfLines={2} style={[styles.txtBlack, {flexWrap: 'wrap', flex: 1}]}
+                                  numberOfLines={1} ellipsizeMode='tail'>
+                                {item.name}
                             </Text>
-              <Text style={styles.txtMoney}>Thứ 2-Thứ 6</Text>
+                            <Text style={styles.txtMoney}>{item.trans_time}</Text>
                         </View>
-            <Text style={styles.txt}>Phiên 1: 07:00-19:45</Text>
-            <Text style={styles.txt}>Phiên 2: 20:30-01:20</Text>
+                        {item.trans_session_list.map((sessionItem) => (
+                                <Text style={[styles.txt, {marginTop: HEIGHTXD(20)}]}>{sessionItem}</Text>
+                            )
+                        )}
                     </Block>
                 </Block>
             </TouchableOpacity>
@@ -50,8 +51,7 @@ export default Item;
 
 const styles = StyleSheet.create({
     container: {
-    marginTop: 10,
-    paddingVertical: 10,
+        paddingVertical: HEIGHTXD(30),
         shadowColor: '#000',
         shadowOffset: {
             width: 0,
@@ -62,8 +62,8 @@ const styles = StyleSheet.create({
         elevation: 5,
         marginHorizontal: 10,
         backgroundColor: R.colors.white,
-    marginBottom: 10,
         borderRadius: HEIGHTXD(30),
+        marginVertical: HEIGHTXD(15),
     },
 
     wrapLeft: {
@@ -78,7 +78,6 @@ const styles = StyleSheet.create({
     txtTitle: {
         fontSize: getFontXD(42),
         color: R.colors.black,
-    fontWeight: 'bold',
     },
     txt: {
         fontSize: getFontXD(36),
@@ -89,14 +88,13 @@ const styles = StyleSheet.create({
         alignItems: 'center',
     },
     txtBlack: {
-    fontSize: getFontXD(42),
+        fontSize: getFontXD(50),
         color: 'black',
-    fontWeight: 'bold',
     },
     imgIcon: {
-    width: WIDTHXD(178),
-    height: HEIGHTXD(178),
-    resizeMode: 'contain',
+        width: WIDTHXD(150),
+        height: WIDTHXD(150),
+        resizeMode: 'cover',
     },
     txtMoney: {
         fontSize: getFontXD(42),

src/Screens/Transaction/TimeTransaction/TimeTransaction.js

@@ -2,29 +2,61 @@ import React, {useState, useEffect} from 'react';
 import {getListNotification} from '../../../apis/Functions/users';
 import TimeTransactionView from './TimeTransactionView';
 import I18n from '../../../helper/i18/i18n';
+import {getListCategoryProduct, getTransactionListByCategory} from '../../../apis/Functions/Transaction';
+import {Alert, Platform} from 'react-native';
+import PriceListView from '../PriceList/PriceListView';
 const PriceList = (props) => {
   const [selected, setSelected] = useState('');
   const [page, setPage] = useState(1);
   const [data, setData] = useState([]);
   const [tottalPage, setTotalPage] = useState(1);
-  const [isRefresh, setisRefresh] = useState(false);
-  const [fillter, setFillters] = useState('ALL');
+  const [isRefresh, setIsRefresh] = useState(false);
+  const [filters, setFilters] = useState([]);
+  const [filterId, setFilterId] = useState(-1);
 
   useEffect(() => {
+    getCategoryData();
+  }, []);
+  useEffect(() => {
+    setData([])
+    getData();
+  }, [filterId]);
+
+  const getCategoryData = async () => {
+    // setIsRefresh(true);
+    const res = await getListCategoryProduct({
+      keyword: '',
+      platform: Platform.OS,
+      page_size: 20,
+      page_index: 1,
+      type: 'PRODUCT',
+    });
+    if ((res.data.code = 200 && res.data.data)) {
+      let data = [];
+      data.push({id: -1, name: 'All'});
+      setFilters(data.concat([...res.data.data]));
+    } else {
+      Alert.alert(I18n.t('Notification'), res.data.message);
+    }
+  };
+
+  const onRefresh = () => {
+    setPage(1);
     getData();
-  }, [fillter]);
+  };
 
   const getData = async () => {
-    setisRefresh(true);
+    setIsRefresh(true);
     setPage(1);
-    const res = await getListNotification({
+    const res = await getTransactionListByCategory({
       keyword: '',
       platform: Platform.OS,
       page_size: 10,
       page_index: 1,
-      type: fillter,
+      type:'TRANSACTION_TIME',
+      category_id: filterId,
     });
-    setisRefresh(false);
+    setIsRefresh(false);
     if ((res.data.code = 200 && res.data.data)) {
       setData(res.data.data);
       setTotalPage(res.data.meta.pages);
@@ -33,29 +65,28 @@ const PriceList = (props) => {
     }
   };
 
-  const onRefresh = () => {
-    getData();
-  };
-
   const onLoadMore = () => {
     console.log(tottalPage);
-    if (page < tottalPage) getDataLoadMore();
+    if (page < tottalPage) {
+      getDataLoadMore();
+    }
   };
 
   const getDataLoadMore = async () => {
-    setisRefresh(true);
-    const res = await getListNotification({
+    setIsRefresh(true);
+    const res = await getTransactionListByCategory({
       keyword: '',
       platform: Platform.OS,
       page_size: 10,
-      page_index: 1,
-      type: fillter,
+      page_index: page + 1,
+      type:'TRANSACTION_TIME',
+      category_id: filterId,
     });
     setPage(page + 1);
     if (res.data.code == 200) {
       setData(data.concat(res.data.data));
     }
-    setisRefresh(false);
+    setIsRefresh(false);
   };
 
   return (
@@ -63,8 +94,9 @@ const PriceList = (props) => {
       onRefresh={onRefresh}
       isRefresh={isRefresh}
       onLoadMore={onLoadMore}
-      setFillters={setFillters}
-      fillter={fillter}
+      setFilterId={setFilterId}
+      filterId={filterId}
+      filters={filters}
       data={data}
     />
   );

src/Screens/Transaction/TimeTransaction/TimeTransactionView.js

@@ -10,62 +10,38 @@ import {
 
 import HeaderDrawer from '../../../components/Header/HeaderDrawer';
 import Item from './Item';
-import {getFontXD} from '../../../Config/Functions';
+import {getFontXD, HEIGHTXD} from '../../../Config/Functions';
 import AppText from '../../../components/AppText';
 import {useNavigation} from '@react-navigation/native';
 import {PRODUCTDETAIL} from '../../../routers/ScreenNames';
 
-const Fillters = [
-  {
-    id: '1',
-    name: 'All',
-    value: 'ALL',
-  },
-  {
-    id: '2',
-    name: 'Deposit',
-    value: 'DEPOSIT',
-  },
-  {
-    id: '3',
-    name: 'Withdraw',
-    value: 'WITHDRAW',
-  },
-  {
-    id: '4',
-    name: 'Transfer',
-    value: 'TRANSFER',
-  },
-];
-
 const NotificaitonView = (props) => {
-  const {onRefresh, isRefresh, onLoadMore, setFillters, fillter, data} = props;
+    const {onRefresh, isRefresh, onLoadMore, setFilterId, filters, filterId, data} = props;
     const navigate = useNavigation();
 
     return (
         <View style={{flex: 1}}>
             <View style={styles.headerContainer}>
                 <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-          {Fillters.map((e) => (
+                    {filters.map((e) => (
                         <TouchableOpacity
-              key={e.value}
-              onPress={() => setFillters(e.value)}
+                            key={e.id}
+                            onPress={() => setFilterId(e.id)}
                             style={[
                                 styles.itemFillter,
-                fillter == e.value ? {borderColor: '#1473E6'} : null,
+                                filterId == e.id ? {borderColor: '#1473E6'} : null,
                             ]}>
-              <AppText
-                i18nKey={e.name}
+                            <Text
                                 style={[
                                     styles.txtFillter,
-                  fillter == e.value ? {color: '#1473E6'} : {},
-                ]}></AppText>
+                                    filterId == e.id ? {color: '#1473E6'} : {},
+                                ]}>{e.name}</Text>
                         </TouchableOpacity>
                     ))}
                 </ScrollView>
             </View>
 
-      {data.length == 0 ? (
+            {data.length == 0 && !isRefresh ? (
                 <View style={{justifyContent: 'center', alignItems: 'center', flex: 1}}>
                     <AppText
                         i18nKey={'NoData'}
@@ -76,6 +52,7 @@ const NotificaitonView = (props) => {
                 </View>
             ) : (
                 <FlatList
+                    style={{marginTop: HEIGHTXD(15)}}
                     keyExtractor={(item) => item.id}
                     data={data}
                     refreshing={isRefresh}
@@ -84,7 +61,8 @@ const NotificaitonView = (props) => {
                     onEndReached={(info) => {
                         onLoadMore();
                     }}
-          renderItem={({item}) => <Item item={item}
+                    renderItem={({item, index}) => <Item item={item}
+                                                         isEndItem={index == (data.length - 1)}
                                                          onPress={(item) => navigate.navigate(PRODUCTDETAIL)}/>}
                 />
             )}

src/apis/url.js

@@ -41,5 +41,5 @@ export default {
   urlGetNewestVersionInfo: root + 'api/v1/settings/version',
 
   //Transaction
-  urlGetTransactionListByCategory: `${root}api/v1/transactions/price-table`,
+  urlGetTransactionListByCategory: `${root}api/v1/transactions/products`,
 };