Merge branch 'search_period' into 'dev_phase2'

complete search production code

See merge request !22

.gitignore

@@ -59,3 +59,4 @@ buck-out/
 /ios/Pods/
 /ios/Podfile.lock
 /android/app/release
+yarn.lock

ios/Invest.xcodeproj/project.pbxproj

@@ -905,7 +905,7 @@
 				CODE_SIGN_ENTITLEMENTS = Invest/InvestDebug.entitlements;
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 8;
+				CURRENT_PROJECT_VERSION = 11;
 				DEVELOPMENT_TEAM = MXZ24GRH48;
 				ENABLE_BITCODE = NO;
 				GCC_PREPROCESSOR_DEFINITIONS = (
@@ -914,7 +914,7 @@
 				);
 				INFOPLIST_FILE = Invest/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				MARKETING_VERSION = 2.2;
+				MARKETING_VERSION = 2.3;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",
@@ -939,11 +939,11 @@
 				CODE_SIGN_ENTITLEMENTS = Invest/Invest.entitlements;
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 8;
+				CURRENT_PROJECT_VERSION = 11;
 				DEVELOPMENT_TEAM = MXZ24GRH48;
 				INFOPLIST_FILE = Invest/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				MARKETING_VERSION = 2.2;
+				MARKETING_VERSION = 2.3;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",

ios/Invest/Info.plist

@@ -65,7 +65,7 @@
 	<key>NSFaceIDUsageDescription</key>
 	<string>Enabling Face ID allows you quick and secure access to your account.</string>
 	<key>NSLocationWhenInUseUsageDescription</key>
-	<string/>
+	<string></string>
 	<key>NSPhotoLibraryUsageDescription</key>
 	<string>To upload images</string>
 	<key>UIAppFonts</key>
@@ -102,9 +102,5 @@
 	</array>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>
-	<key>NSFaceIDUsageDescription</key>
-	<string>Enabling Face ID allows you quick and secure access to your account.</string>
-	<key>NSFaceIDUsageDescription</key>
-    <string>Enabling Face ID allows you quick and secure access to your account.</string>
 </dict>
 </plist>

ios/Podfile.lock

@@ -307,6 +307,8 @@ PODS:
     - React-cxxreact (= 0.62.2)
     - React-jsi (= 0.62.2)
   - React-jsinspector (0.62.2)
+  - react-native-month-year-picker (1.6.4):
+    - React
   - react-native-netinfo (6.0.0):
     - React-Core
   - react-native-safe-area-context (3.1.9):
@@ -468,6 +470,7 @@ DEPENDENCIES:
   - React-jsi (from `../node_modules/react-native/ReactCommon/jsi`)
   - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`)
   - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
+  - react-native-month-year-picker (from `../node_modules/react-native-month-year-picker`)
   - "react-native-netinfo (from `../node_modules/@react-native-community/netinfo`)"
   - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
   - react-native-webview (from `../node_modules/react-native-webview`)
@@ -567,6 +570,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/jsiexecutor"
   React-jsinspector:
     :path: "../node_modules/react-native/ReactCommon/jsinspector"
+  react-native-month-year-picker:
+    :path: "../node_modules/react-native-month-year-picker"
   react-native-netinfo:
     :path: "../node_modules/@react-native-community/netinfo"
   react-native-safe-area-context:
@@ -672,6 +677,7 @@ SPEC CHECKSUMS:
   React-jsi: b6dc94a6a12ff98e8877287a0b7620d365201161
   React-jsiexecutor: 1540d1c01bb493ae3124ed83351b1b6a155db7da
   React-jsinspector: 512e560d0e985d0e8c479a54a4e5c147a9c83493
+  react-native-month-year-picker: 9a59b4b8c4802a23123b0ce4ccadce880ad55f8a
   react-native-netinfo: e849fc21ca2f4128a5726c801a82fc6f4a6db50d
   react-native-safe-area-context: b6e0e284002381d2ff29fa4fff42b4d8282e3c94
   react-native-webview: e994346d13f4d8b240347bc5be043a860452e4b6

package.json

@@ -45,6 +45,7 @@
     "react-native-linear-gradient": "^2.5.6",
     "react-native-modal": "^11.7.0",
     "react-native-modal-dropdown": "^1.0.0",
+    "react-native-month-year-picker": "^1.6.4",
     "react-native-progress": "^4.1.2",
     "react-native-ratings": "^8.0.4",
     "react-native-reanimated": "^1.13.2",

src/Config/constants.js

@@ -88,3 +88,9 @@ export const MY_RSA_KEY = {
   AgMBAAE=
   -----END PUBLIC KEY-----`,
 };
+export const TRANSACTION_TYPE = {
+  PRODUCT: 'PRODUCT',
+  TRANSACTION_TIME: 'TRANSACTION_TIME',
+  ESCROW: 'ESCROW',
+  EXPIRY_DATE: 'EXPIRY_DATE',
+};

src/Screens/Action/Wallet/WalletWithdraw.js

@@ -101,22 +101,22 @@ const WalletWithdraw = (props) => {
 
     if (index === true) {
       if (amount >= props.user.configs.request_withdraw_amount_min) {
-        if (src == 'WALLET' && amount > props.user.current_money) {
-          showAlert(
-            TYPE.WARN,
-            I18n.t('Notification'),
-            I18n.t('WarnMaxReqestWithdraw'),
-          );
-        } else if (
-          src == 'INVESTMENT' &&
-          amount > props.user.current_cqg_money
-        ) {
-          showAlert(
-            TYPE.WARN,
-            I18n.t('Notification'),
-            I18n.t('WarnMaxReqestWithdraw'),
-          );
-        } else {
+      //   if (src == 'WALLET' && amount > props.user.current_money) {
+      //     showAlert(
+      //       TYPE.WARN,
+      //       I18n.t('Notification'),
+      //       I18n.t('WarnMaxReqestWithdraw'),
+      //     );
+      //   } else if (
+      //     src == 'INVESTMENT' &&
+      //     amount > props.user.current_cqg_money
+      //   ) {
+      //     showAlert(
+      //       TYPE.WARN,
+      //       I18n.t('Notification'),
+      //       I18n.t('WarnMaxReqestWithdraw'),
+      //     );
+      //   } else {
           if (!props.user.smart_otp_status) {
             confirmAlert(
               `${I18n.t('YouHaveNotSettingSmartOTP')}`,
@@ -145,7 +145,7 @@ const WalletWithdraw = (props) => {
               onGoToSmartOTP: (pinCode, otp) => onGoToSmartOTP(pinCode, otp),
             });
           }
-        }
+      //   }
       } else {
         showAlert(
           TYPE.WARN,

src/Screens/Setting/EnterPasswordModal.js

@@ -8,160 +8,161 @@ import I18n from '../../helper/i18/i18n';
 import DropdownAlert from 'react-native-dropdownalert';
 
 const EnterPasswordModal = (props) => {
-    const [visible, setVisible] = useState(true);
-    const [pass, setPass] = useState('');
-    const dropDownAlertRef = useRef(null);
-    const onChangeText = (text) => {
-        setPass(text);
-    };
-    useEffect(() => {
-        setVisible(props.visible);
-    }, [props.visible]);
+  const [visible, setVisible] = useState(true);
+  const [pass, setPass] = useState('');
+  const dropDownAlertRef = useRef(null);
+  const onChangeText = (text) => {
+    setPass(text);
+  };
+  useEffect(() => {
+    setVisible(props.visible);
+  }, [props.visible]);
 
-    return <Modal
-        animationType='slide'
-        transparent={true}
-        visible={visible}
-        onRequestClose={() => {
-            props.setVisible(false);
-            setPass('');
-        }}
+  return <Modal
+    animationType='slide'
+    transparent={true}
+    visible={visible}
+    onRequestClose={() => {
+      props.setVisible(false);
+      setPass('');
+    }}
+  >
+    <TouchableOpacity
+      style={styles.opacity}
+      activeOpacity={1}
+      onPressOut={() => {
+        setPass('');
+        props.setVisible(false);
+      }}
     >
-        <TouchableWithoutFeedback
-            onPress={() => {
-                setPass('');
-                props.setVisible(false);
-            }}
-        >
-            <View
-                style={styles.opacity}
-            >
-                <View style={styles.modal}>
-                    <View style={styles.viewTitle}>
-                        <View style={styles.viewEmpty}></View>
-                        <Text style={styles.titlePopup}>{I18n.t('EnterPassword')}</Text>
-                        <TouchableOpacity onPress={() => {
-                            setPass('');
-                            props.setVisible(false);
-                        }} style={styles.btClose}>
-                            <IconClose name='close' size={WIDTHXD(48)} color={R.colors.black}/>
-                        </TouchableOpacity>
-                    </View>
-                    <TextInput
-                        autoCapitalize="none"
-                        onChangeText={(val) => onChangeText(val)}
-                        style={styles.txtInput}
-                        placeholderTextColor={R.colors.placeHolder}
-                        secureTextEntry={true}
-                        autoFocus={true}
-                        value={pass}
-                    />
-                    <TouchableOpacity onPress={() => {
-                        if (pass == '') {
-                            dropDownAlertRef.current.alertWithType(TYPE.WARN, I18n.t('Notification'), `${I18n.t('Please_fill_in')}${I18n.t('Password')}`);
-                        } else {
-                            props.accept(pass);
-                            setPass('')
-                        }
+      <TouchableWithoutFeedback>
+        <View style={styles.modal}>
+          <View style={styles.viewTitle}>
+            <View style={styles.viewEmpty}></View>
+            <Text style={styles.titlePopup}>{I18n.t('EnterPassword')}</Text>
+            <TouchableOpacity onPress={() => {
+              setPass('');
+              props.setVisible(false);
+            }} style={styles.btClose}>
+              <IconClose name='close' size={WIDTHXD(48)} color={R.colors.black}/>
+            </TouchableOpacity>
+          </View>
+          <TextInput
+            autoCapitalize="none"
+            onChangeText={(val) => onChangeText(val)}
+            style={styles.txtInput}
+            placeholderTextColor={R.colors.placeHolder}
+            secureTextEntry={true}
+            autoFocus={true}
+            value={pass}
+          />
+          <TouchableOpacity onPress={() => {
+            if (pass == '') {
+              dropDownAlertRef.current.alertWithType(TYPE.WARN, I18n.t('Notification'), `${I18n.t('Please_fill_in')}${I18n.t('Password')}`);
+            } else {
+              props.accept(pass);
+              setPass('');
+            }
+
+          }}>
+            <Text style={styles.txtAccept}>{I18n.t('Ok')}</Text>
+          </TouchableOpacity>
+        </View>
+      </TouchableWithoutFeedback>
+      <DropdownAlert
+        inactiveStatusBarBackgroundColor={R.colors.main}
+        activeStatusBarBackgroundColor={R.colors.main}
+        warnImageSrc={R.images.iconWarn}
+        successImageSrc={R.images.iconSuccess}
+        errorImageSrc={R.images.iconError}
+        titleStyle={{color: '#fff'}}
+        messageStyle={{color: '#fff'}}
+        updateStatusBar={false}
+        closeInterval={1000}
+        ref={dropDownAlertRef}
+        warnColor={R.colors.orange400}
+        defaultContainer={{
+          borderBottomRightRadius: WIDTHXD(30),
+          borderBottomLeftRadius: WIDTHXD(30),
+          paddingTop: HEIGHTXD(30),
+          paddingVertical: HEIGHTXD(30),
+          paddingHorizontal: WIDTHXD(20),
+        }}
+      />
+    </TouchableOpacity>
 
-                    }}>
-                        <Text style={styles.txtAccept}>{I18n.t('Ok')}</Text>
-                    </TouchableOpacity>
-                </View>
-                <DropdownAlert
-                    inactiveStatusBarBackgroundColor={R.colors.main}
-                    activeStatusBarBackgroundColor={R.colors.main}
-                    warnImageSrc={R.images.iconWarn}
-                    successImageSrc={R.images.iconSuccess}
-                    errorImageSrc={R.images.iconError}
-                    titleStyle={{color: '#fff'}}
-                    messageStyle={{color: '#fff'}}
-                    updateStatusBar={false}
-                    closeInterval={1000}
-                    ref={dropDownAlertRef}
-                    warnColor={R.colors.orange400}
-                    defaultContainer={{
-                        borderBottomRightRadius: WIDTHXD(30),
-                        borderBottomLeftRadius: WIDTHXD(30),
-                        paddingTop: HEIGHTXD(30),
-                        paddingVertical: HEIGHTXD(30),
-                        paddingHorizontal: WIDTHXD(20),
-                    }}
-                />
-            </View>
-        </TouchableWithoutFeedback>
-    </Modal>;
+  </Modal>;
 };
 const styles = StyleSheet.create({
-    opacity: {
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-        backgroundColor: '#rgba(0,0,0,0.7)',
-    },
-    titlePopup: {
-        fontSize: getFontXD(48),
-        color: R.colors.black,
-        textAlign: 'center',
-        flex: 10,
-    },
-    viewEmpty: {
-        flex: 1,
+  opacity: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#rgba(0,0,0,0.7)',
+  },
+  titlePopup: {
+    fontSize: getFontXD(48),
+    color: R.colors.black,
+    textAlign: 'center',
+    flex: 10,
+  },
+  viewEmpty: {
+    flex: 1,
+  },
+  viewTitle: {
+    flexDirection: 'row',
+    width: WIDTHXD(960),
+    borderBottomWidth: 0.3,
+    paddingBottom: HEIGHTXD(50),
+    borderBottomColor: R.colors.iconGray,
+    borderColor: R.colors.iconGray,
+  },
+  txtAccept: {
+    fontSize: getFontXD(48),
+    color: R.colors.main,
+    textAlign: 'center',
+    marginTop: HEIGHTXD(50),
+  },
+  btClose: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'flex-start',
+  },
+  modal: {
+    backgroundColor: R.colors.white,
+    width: WIDTHXD(960),
+    justifyContent: 'center',
+    // maxHeight: HEIGHTXD(1300),
+    borderRadius: WIDTHXD(20),
+    paddingBottom: WIDTHXD(40),
+    // minHeight: HEIGHTXD(369),
+    paddingVertical: HEIGHTXD(59),
+    paddingTop: HEIGHTXD(61),
+    paddingHorizontal: WIDTHXD(60),
+    alignItems: 'center',
+  },
+  txtInput: {
+    width: WIDTHXD(880),
+    height: HEIGHTXD(109),
+    marginTop: HEIGHTXD(50),
+    color: 'black',
+    borderRadius: 7,
+    borderWidth: 0.7,
+    borderColor: '#DBDBDB',
+    fontSize: getFontXD(42),
+    paddingVertical: 5,
+    paddingHorizontal: 10,
+    backgroundColor: 'white',
+    shadowColor: '#AFA9A9',
+    shadowOffset: {
+      width: 0,
+      height: 1,
     },
-    viewTitle: {
-        flexDirection: 'row',
-        width: WIDTHXD(960),
-        borderBottomWidth: 0.3,
-        paddingBottom: HEIGHTXD(50),
-        borderBottomColor: R.colors.iconGray,
-        borderColor: R.colors.iconGray,
-    },
-    txtAccept: {
-        fontSize: getFontXD(48),
-        color: R.colors.main,
-        textAlign: 'center',
-        marginTop: HEIGHTXD(50),
-    },
-    btClose: {
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'flex-start',
-    },
-    modal: {
-        backgroundColor: R.colors.white,
-        width: WIDTHXD(960),
-        justifyContent: 'center',
-        // maxHeight: HEIGHTXD(1300),
-        borderRadius: WIDTHXD(20),
-        paddingBottom: WIDTHXD(40),
-        // minHeight: HEIGHTXD(369),
-        paddingVertical: HEIGHTXD(59),
-        paddingTop: HEIGHTXD(61),
-        paddingHorizontal: WIDTHXD(60),
-        alignItems: 'center',
-    },
-    txtInput: {
-        width: WIDTHXD(880),
-        height: HEIGHTXD(109),
-        marginTop: HEIGHTXD(50),
-        color: 'black',
-        borderRadius: 7,
-        borderWidth: 0.7,
-        borderColor: '#DBDBDB',
-        fontSize: getFontXD(42),
-        paddingVertical: 5,
-        paddingHorizontal: 10,
-        backgroundColor: 'white',
-        shadowColor: '#AFA9A9',
-        shadowOffset: {
-            width: 0,
-            height: 1,
-        },
-        shadowOpacity: 0.25,
-        shadowRadius: 1.84,
-        elevation: 1,
+    shadowOpacity: 0.25,
+    shadowRadius: 1.84,
+    elevation: 1,
 
-    },
+  },
 });
 
 export default EnterPasswordModal;

src/Screens/Transaction/DueDate/DueDate.js

@@ -6,9 +6,11 @@ import {
   getListCategoryProduct,
   getTransactionListByCategory,
 } from '../../../apis/Functions/Transaction';
-import {Alert, Platform} from 'react-native';
+import {Alert, DeviceEventEmitter, Platform} from 'react-native';
 import PriceListView from '../PriceList/PriceListView';
 import {showAlert, TYPE} from '../../../components/DropdownAlert';
+import moment from 'moment';
+import {useNavigation} from '@react-navigation/native';
 
 const DueDate = (props) => {
   const [page, setPage] = useState(1);
@@ -17,14 +19,39 @@ const DueDate = (props) => {
   const [isRefresh, setIsRefresh] = useState(false);
   const [filters, setFilters] = useState([]);
   const [filterId, setFilterId] = useState(-1);
+  const [productId, setProductId] = useState(null);
+  const [period, setPeriod] = useState(null);
+  const navigation = useNavigation();
 
   useEffect(() => {
     getCategoryData();
+    let pressSearchListener = DeviceEventEmitter.addListener('PressSearchTransaction', (params) => {
+      navigation.jumpTo('DueDate');
+    });
+    let searchListener = DeviceEventEmitter.addListener('SearchTransaction', (params) => {
+      console.log('get data', params)
+      setFilterId(params.industryGroup.id);
+      if (params.product && params.product != -1) {
+        setProductId(params.product.id);
+      } else {
+        setProductId(null);
+      }
+      if (params.period) {
+        setPeriod(moment(params.period).format('MM/YYYY'));
+      } else {
+        setPeriod(null)
+      }
+
+    });
+    return () => {
+      pressSearchListener.remove();
+      searchListener.remove();
+    };
   }, []);
   useEffect(() => {
     setData([]);
     getData();
-  }, [filterId]);
+  }, [filterId, productId, period]);
 
   const getCategoryData = async () => {
     // setIsRefresh(true);
@@ -46,20 +73,26 @@ const DueDate = (props) => {
 
   const onRefresh = () => {
     setPage(1);
+    setProductId(null)
+    setPeriod(null)
     getData();
+    DeviceEventEmitter.emit('ClearSearch')
   };
 
   const getData = async () => {
     setIsRefresh(true);
     setPage(1);
-    const res = await getTransactionListByCategory({
+    let body = {
       keyword: '',
       platform: Platform.OS,
       page_size: 10,
       page_index: 1,
       type: 'EXPIRY_DATE',
       category_id: filterId,
-    });
+    }
+    if(productId) body.commoditiy_id = productId
+    if(period) body.term = period
+    const res = await getTransactionListByCategory(body);
     setIsRefresh(false);
     console.log('getData', res);
     if ((res.data.code = 200 && res.data.data)) {
@@ -79,14 +112,17 @@ const DueDate = (props) => {
 
   const getDataLoadMore = async () => {
     setIsRefresh(true);
-    const res = await getTransactionListByCategory({
+    let body = {
       keyword: '',
       platform: Platform.OS,
       page_size: 10,
       page_index: page + 1,
       type: 'EXPIRY_DATE',
       category_id: filterId,
-    });
+    }
+    if(productId) body.commoditiy_id = productId
+    if(period) body.term = period
+    const res = await getTransactionListByCategory(body);
     setPage(page + 1);
     if (res.data.code == 200) {
       setData(data.concat(res.data.data));

src/Screens/Transaction/DueDate/DueDateView.js

 import React, {useState} from 'react';
 import {
-    View,
-    Text,
-    FlatList,
-    StyleSheet,
-    TouchableOpacity,
-    ScrollView,
+  View,
+  Text,
+  FlatList,
+  StyleSheet,
+  TouchableOpacity,
+  ScrollView,
 } from 'react-native';
 
 import HeaderDrawer from '../../../components/Header/HeaderDrawer';
@@ -16,87 +16,88 @@ import {PRODUCTDETAIL} from '../../../routers/ScreenNames';
 import {useNavigation} from '@react-navigation/native';
 
 const EscrowView = (props) => {
-    const {onRefresh, isRefresh, onLoadMore, setFilterId, filters, filterId, data} = props;
-    const navigate = useNavigation();
+  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}>
-                    {filters.map((e) => (
-                        <TouchableOpacity
-                            key={e.id}
-                            onPress={() => setFilterId(e.id)}
-                            style={[
-                                styles.itemFillter,
-                                filterId == e.id ? {borderColor: '#1473E6'} : null,
-                            ]}>
-                            <Text
-                                style={[
-                                    styles.txtFillter,
-                                    filterId == e.id ? {color: '#1473E6'} : {},
-                                ]}>{e.name}</Text>
-                        </TouchableOpacity>
-                    ))}
-                </ScrollView>
-            </View>
+  return (
+    <View style={{flex: 1}}>
+      <View style={styles.headerContainer}>
+        <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+          {filters.map((e) => (
+            <TouchableOpacity
+              key={e.id}
+              onPress={() => setFilterId(e.id)}
+              style={[
+                styles.itemFillter,
+                filterId == e.id ? {borderColor: '#1473E6'} : null,
+              ]}>
+              <Text
+                style={[
+                  styles.txtFillter,
+                  filterId == e.id ? {color: '#1473E6'} : {},
+                ]}>{e.name}</Text>
+            </TouchableOpacity>
+          ))}
+        </ScrollView>
+      </View>
 
-            {data.length == 0 && !isRefresh ? (
-                <View style={{justifyContent: 'center', alignItems: 'center', flex: 1}}>
-                    <AppText
-                        i18nKey={'NoData'}
-                        style={{
-                            fontSize: 18,
-                            fontWeight: 'bold',
-                        }}></AppText>
-                </View>
-            ) : (
-                <FlatList
-                    style={{marginTop: HEIGHTXD(15)}}
-                    keyExtractor={(item) => item.id}
-                    data={data}
-                    refreshing={isRefresh}
-                    onRefresh={onRefresh}
-                    onEndReachedThreshold={0.01}
-                    onEndReached={(info) => {
-                        onLoadMore();
-                    }}
-                    renderItem={({item, index}) => <Item item={item}
-                                                         isEndItem={index == (data.length - 1)}
-                                                         onPress={(item) => navigate.navigate(PRODUCTDETAIL, {id: item.commoditiy.id, name: item.commoditiy.name})}/>}
-                />
-            )}
-        </View>
-    );
+      <FlatList
+        style={{marginTop: HEIGHTXD(15), flex: 1}}
+        keyExtractor={(item) => item.id}
+        data={data}
+        refreshing={isRefresh}
+        onRefresh={onRefresh}
+        ListEmptyComponent={(data.length == 0 && !isRefresh) &&
+        <View style={{justifyContent: 'center', alignItems: 'center', height: HEIGHTXD(1500)}}>
+          <AppText
+            i18nKey={'NoData'}
+            style={{
+              fontSize: 18,
+              fontWeight: 'bold',
+            }}></AppText>
+        </View>}
+        onEndReachedThreshold={0.01}
+        onEndReached={(info) => {
+          onLoadMore();
+        }}
+        renderItem={({item, index}) => <Item item={item}
+                                             isEndItem={index == (data.length - 1)}
+                                             onPress={(item) => navigate.navigate(PRODUCTDETAIL, {
+                                               id: item.commoditiy.id,
+                                               name: item.commoditiy.name,
+                                             })}/>}
+      />
+    </View>
+  );
 };
 
 const styles = StyleSheet.create({
-    headerContainer: {
-        paddingVertical: 10,
-        backgroundColor: 'white',
-        flexDirection: 'row',
-        alignItems: 'center',
-        paddingHorizontal: 10,
-    },
-    itemFillter: {
-        borderRadius: 10,
-        paddingVertical: 5,
-        paddingHorizontal: 10,
-        borderWidth: 1,
-        borderColor: '#929292',
-        justifyContent: 'center',
-        alignItems: 'center',
-        marginRight: 10,
-    },
-    txtFillter: {
-        fontSize: getFontXD(36),
-        color: '#929292',
-        fontWeight: 'bold',
-    },
-    txtTitle: {
-        fontSize: getFontXD(46),
-        fontWeight: 'bold',
-    },
+  headerContainer: {
+    paddingVertical: 10,
+    backgroundColor: 'white',
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 10,
+  },
+  itemFillter: {
+    borderRadius: 10,
+    paddingVertical: 5,
+    paddingHorizontal: 10,
+    borderWidth: 1,
+    borderColor: '#929292',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 10,
+  },
+  txtFillter: {
+    fontSize: getFontXD(36),
+    color: '#929292',
+    fontWeight: 'bold',
+  },
+  txtTitle: {
+    fontSize: getFontXD(46),
+    fontWeight: 'bold',
+  },
 });
 
 export default EscrowView;

src/Screens/Transaction/SearchProductCodeModal.js

+import React, {useEffect, useState} from 'react';
+import {
+  View,
+  Text,
+  Image,
+  StyleSheet,
+  TouchableOpacity,
+  TouchableWithoutFeedback, Platform, DeviceEventEmitter,
+} from 'react-native';
+import R from '../../assets/R';
+import {HEIGHTXD, WIDTHXD, getFontXD, getWidth} from '../../Config/Functions';
+import Modal from 'react-native-modal';
+import I18n from '../../helper/i18/i18n';
+import AppText from '../../components/AppText';
+import PickerItem from '../../components/Picker/PickerItem';
+import PickerMonth from '../../components/Picker/PickerMonth';
+import {getTransactionListByCategory} from '../../apis/Functions/Transaction';
+import {showAlert, TYPE} from '../../components/DropdownAlert';
+import _ from 'lodash';
+import {TRANSACTION_TYPE} from '../../Config/constants';
+import moment from 'moment';
+import IconClose from 'react-native-vector-icons/AntDesign';
+
+const SearchProductCodeModal = (props) => {
+  const [isModalVisible, setModalVisible] = useState(props.isModalVisible);
+  const [industryGroup, setIndustryGroup] = useState({id: -1, name: I18n.t('All')});
+  const [product, setProduct] = useState(null);
+  const [period, setPeriod] = useState(new Date());
+  const [dataProduct, setDataProduct] = useState([]);
+  const [dataProductFilter, setDataProductFilter] = useState([]);
+
+  useEffect(() => {
+    let clearSearch = DeviceEventEmitter.addListener('ClearSearch', (params) => {
+      setProduct(null)
+      setPeriod(new Date())
+      setIndustryGroup({id: -1, name: I18n.t('All')})
+    });
+    return () => {
+      clearSearch.remove();
+    };
+  })
+
+  const getDataProduct = async () => {
+    if (_.isEmpty(dataProduct)) {
+      const res = await getTransactionListByCategory({
+        keyword: '',
+        platform: Platform.OS,
+        page_size: 100,
+        page_index: 1,
+        type: TRANSACTION_TYPE.PRODUCT,
+        category_id: -1,
+      });
+      if ((res.data.code = 200 && res.data.data)) {
+        setDataProduct(res.data.data);
+      } else {
+        showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
+      }
+    }
+    let data = [];
+    data.push({id: -1, name: I18n.t('All')});
+    let newDataProduct = industryGroup.id == -1 ? [...dataProduct] : _.filter(dataProduct, (item) => item.category_id == industryGroup.id);
+    setDataProductFilter(data.concat(newDataProduct));
+  };
+
+  useEffect(() => {
+    let newDataProduct = industryGroup.id == -1 ? [...dataProduct] : _.filter(dataProduct, (item) => item.category_id == industryGroup.id);
+    let data = [];
+    data.push({id: -1, name: I18n.t('All')});
+    setDataProductFilter(data.concat(newDataProduct));
+  }, [dataProduct]);
+  useEffect(() => {
+    setDataProductFilter([]);
+    setProduct(null);
+    getDataProduct();
+  }, [industryGroup]);
+  useEffect(() => {
+    setModalVisible(props.isModalVisible);
+    if (props.isModalVisible && _.isEmpty(dataProduct)) {
+      getDataProduct();
+    }
+  }, [props.isModalVisible]);
+  return (
+    <Modal
+      isVisible={isModalVisible}
+      style={{margin: 0, justifyContent: 'flex-end'}}>
+      <View style={{flex: 1, justifyContent: 'flex-end'}}>
+        <TouchableOpacity
+          style={styles.opacity}
+          activeOpacity={1}
+          onPressOut={() => {
+            props.hidePopup()
+          }}
+        >
+          <TouchableWithoutFeedback>
+            <View style={styles.container}>
+              <View style={styles.viewTitle}>
+                <Text style={[styles.txt, {
+                  color: R.colors.black,
+                  textAlign: 'center',
+                  flex: 10,
+                }]}>{I18n.t('SearchProductCode')}</Text>
+                <TouchableOpacity onPress={() => {
+                  props.hidePopup();
+                }} style={styles.btClose}>
+                  <IconClose name='close' size={WIDTHXD(48)} color={R.colors.black}/>
+                </TouchableOpacity>
+              </View>
+              <AppText style={[styles.txtTitle, {marginTop: HEIGHTXD(40)}]} i18nKey={'IndustryGroup'}/>
+              <PickerItem
+                width={getWidth() - WIDTHXD(80)}
+                data={props.dataCategory}
+                defaultValue={industryGroup.name}
+                onValueChange={(value, item) => {
+                  setIndustryGroup(item);
+                }}
+              />
+              <AppText style={[styles.txtTitle, {marginTop: HEIGHTXD(40)}]} i18nKey={'Product'}/>
+              <PickerItem
+                width={getWidth() - WIDTHXD(80)}
+                defaultValue={product ? product.name : ''}
+                data={dataProductFilter}
+                onValueChange={(value, item) => {
+                  setProduct(item);
+                }}
+              />
+
+              <PickerMonth
+                valueString={moment(period).format('MM/YYYY')}
+                title={I18n.t('Period')}
+                isMonthYearPicker={true}
+                showSelectMonth={props.showSelectMonth}
+                date={period}
+                containerStyle={{marginTop: HEIGHTXD(40)}}
+                onValueChange={(e, value) => {
+                  setPeriod(value);
+                }}
+              />
+
+              <View
+                style={{
+                  marginTop: HEIGHTXD(80),
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                }}>
+                <TouchableOpacity onPress={() => {
+                  props.onSearchPress(industryGroup, product, period);
+                }} style={styles.btnSend}>
+                  <Text style={styles.txtSend}>{I18n.t('Search')}</Text>
+                </TouchableOpacity>
+              </View>
+            </View>
+          </TouchableWithoutFeedback>
+        </TouchableOpacity>
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: R.colors.white,
+    borderRadius: 10,
+    borderWidth: 2,
+    borderColor: '#DBDBDB',
+    paddingTop: HEIGHTXD(50),
+    paddingBottom: HEIGHTXD(300),
+    paddingHorizontal: WIDTHXD(40),
+  },
+  viewTitle: {
+    flexDirection: 'row',
+    width: getWidth() - WIDTHXD(40),
+    marginLeft: WIDTHXD(40),
+  },
+  btClose: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'flex-start',
+    marginRight: WIDTHXD(40),
+  },
+  txt: {
+    fontSize: getFontXD(42),
+    color: R.colors.color777,
+    marginBottom: 5,
+    paddingLeft: 10,
+  },
+  txtTitle: {
+    fontSize: getFontXD(42),
+    color: R.colors.color777,
+  },
+  selectionImg: {
+    padding: 10,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  containerSelect: {
+    height: HEIGHTXD(520),
+    backgroundColor: 'white',
+    paddingTop: 10,
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+  },
+  line: {
+    height: 1,
+    backgroundColor: '#929292',
+    width: '100%',
+    marginTop: 5,
+  },
+  imgIcon: {
+    width: 40,
+    height: 40,
+  },
+  txtTitleBtn: {
+    fontSize: getFontXD(42),
+    color: '#1473E6',
+  },
+  btnSend: {
+    width: WIDTHXD(500),
+    height: HEIGHTXD(120),
+    backgroundColor: R.colors.main,
+    borderRadius: 8,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  txtSend: {
+    fontSize: getFontXD(42),
+    color: R.colors.white,
+    paddingHorizontal: WIDTHXD(60),
+    fontWeight: 'bold',
+  },
+});
+
+export default SearchProductCodeModal;

src/Screens/Transaction/Transaction.js

-import React, {Component} from 'react';
-import {View, Text, StatusBar, SafeAreaView} from 'react-native';
-import {getFontXD, HEIGHT, WIDTHXD} from '../../Config/Functions';
+import React, {useState} from 'react';
+import {DeviceEventEmitter, Platform, View} from 'react-native';
+import {getFontXD} from '../../Config/Functions';
 import DueDate from './DueDate/DueDate';
 import Escrow from './Escrow/Escrow';
 import PriceList from './PriceList/PriceList';
@@ -9,60 +9,107 @@ import I18n from '../../helper/i18/i18n';
 import {connect} from 'react-redux';
 
 import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
-const Tab = createMaterialTopTabNavigator();
 import HeaderDrawer from '../../components/Header/HeaderDrawer';
+import SearchProductCodeModal from './SearchProductCodeModal';
+import {getListCategoryProduct} from '../../apis/Functions/Transaction';
+import {showAlert, TYPE} from '../../components/DropdownAlert';
+import _ from 'lodash';
+
+const Tab = createMaterialTopTabNavigator();
 
 const NewFeed = (props) => {
+  const [showSearchPopup, setShowSearchPopup] = useState(false);
+  const [dataCategory, setDataCategory] = useState([]);
+
+
+  const onSearchPress = () => {
+    setShowSearchPopup(true);
+    DeviceEventEmitter.emit('PressSearchTransaction')
+    if (_.isEmpty(dataCategory)) {
+      getCategoryData();
+    }
+  };
+  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: I18n.t('All')});
+      setDataCategory(data.concat([...res.data.data]));
+    } else {
+      showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
+    }
+  };
+
+  const onSearch = (industryGroup, product, period) => {
+    setShowSearchPopup(false);
+    DeviceEventEmitter.emit('SearchTransaction', {industryGroup: industryGroup, product: product, period: period});
+  };
   return (
     <View style={{flex: 1}}>
-      <HeaderDrawer title={'Tradding'} isWhite={true} />
+      <HeaderDrawer title={'Tradding'} isWhite={true} isShowSearch={true} onSearchPress={onSearchPress}/>
       <View style={{flex: 1, backgroundColor: 'white'}}>
-        <Tab.Navigator
-          initialRouteName="PriceList"
-          swipeEnabled={false}
-          tabBarOptions={{
-            scrollEnabled: true,
-            inactiveTintColor: '#929292',
-            activeTintColor: '#1473E6',
-            labelStyle: {fontSize: getFontXD(36)},
-            style: {backgroundColor: 'white'},
-          }}>
-          <Tab.Screen
-            name="PriceList"
-            component={PriceList}
-            options={{
-              tabBarLabel:
-                props.language.language == 'vi' ? 'Bảng phí' : 'PriceList',
-            }}
-          />
-          <Tab.Screen
-            name="TimeTransaction"
-            component={TimeTransaction}
-            options={{
-              tabBarLabel:
-                props.language.language == 'vi'
-                  ? 'Thời gian GD'
-                  : 'Time transace',
-            }}
-          />
-          <Tab.Screen
-            name="Escrow"
-            component={Escrow}
-            options={{
-              tabBarLabel:
-                props.language.language == 'vi' ? 'Ký quỹ' : 'Escrow',
-            }}
-          />
-          <Tab.Screen
-            name="DueDate"
-            component={DueDate}
-            options={{
-              tabBarLabel:
-                props.language.language == 'vi' ? 'Lịch đáo hạn' : 'Due date',
-            }}
-          />
-        </Tab.Navigator>
+          <Tab.Navigator
+            initialRouteName="PriceList"
+            swipeEnabled={false}
+            tabBarOptions={{
+              scrollEnabled: true,
+              inactiveTintColor: '#929292',
+              activeTintColor: '#1473E6',
+              labelStyle: {fontSize: getFontXD(36)},
+              style: {backgroundColor: 'white'},
+            }}>
+            <Tab.Screen
+              name="PriceList"
+              component={PriceList}
+              options={{
+                tabBarLabel:
+                  props.language.language == 'vi' ? 'Bảng phí' : 'PriceList',
+              }}
+            />
+            <Tab.Screen
+              name="TimeTransaction"
+              component={TimeTransaction}
+              options={{
+                tabBarLabel:
+                  props.language.language == 'vi'
+                    ? 'Thời gian GD'
+                    : 'Time transace',
+              }}
+            />
+            <Tab.Screen
+              name="Escrow"
+              component={Escrow}
+              options={{
+                tabBarLabel:
+                  props.language.language == 'vi' ? 'Ký quỹ' : 'Escrow',
+              }}
+            />
+            <Tab.Screen
+              name="DueDate"
+              component={DueDate}
+              options={{
+                tabBarLabel:
+                  props.language.language == 'vi' ? 'Lịch đáo hạn' : 'Due date',
+              }}
+            />
+          </Tab.Navigator>
       </View>
+      <SearchProductCodeModal
+        hidePopup={() => {
+          setShowSearchPopup(false);
+        }}
+        isModalVisible={showSearchPopup}
+        data={[]}
+        dataCategory={dataCategory}
+        onSearchPress={onSearch}
+      />
     </View>
   );
 };

src/components/Header/HeaderDrawer.js

@@ -20,6 +20,8 @@ import Modal from 'react-native-modal';
 import Drawer from './Drawer';
 import SnackBar from '../SnackBar';
 import AppText from '../AppText';
+import Icon from 'react-native-vector-icons/Ionicons';
+
 
 const HeaderDrawer = (props) => {
   const {title, isWhite} = props;
@@ -34,15 +36,23 @@ const HeaderDrawer = (props) => {
       imageStyle={{resizeMode: 'stretch'}}
       style={[styles.img, isWhite ? {backgroundColor: 'white'} : {}]}
       source={R.images.bgHeader}>
-      <StatusBar backgroundColor="transparent" translucent={true} />
+      <StatusBar backgroundColor="transparent" translucent={true}/>
 
       <View style={styles.headerContainer}>
         <TouchableOpacity style={{width: 35, height: 30}} onPress={toggleModal}>
-          <Image source={R.images.iconMenu} style={styles.imgIcon} />
+          <Image source={R.images.iconMenu} style={styles.imgIcon}/>
         </TouchableOpacity>
 
         <AppText i18nKey={title} style={styles.txtTitle}></AppText>
-        <View style={{width: 35, height: 30}} />
+        {props.isShowSearch ?
+          <TouchableOpacity style={{width: 35, height: 35}} onPress={props.onSearchPress}>
+            <Icon
+              name={'search-sharp'}
+              size={25}
+              color={R.colors.white}
+            />
+          </TouchableOpacity>
+          : <View style={{width: 35, height: 30}}/>}
       </View>
       <Modal
         animationIn={'fadeInLeft'}
@@ -56,7 +66,7 @@ const HeaderDrawer = (props) => {
             Platform.OS == 'ios' ? {paddingVertical: 15} : {},
           ]}>
           <View style={styles.container}>
-            <Drawer toggleModal={toggleModal} />
+            <Drawer toggleModal={toggleModal}/>
           </View>
           <TouchableWithoutFeedback onPress={toggleModal}>
             <View

src/components/Picker/PickerMonth.js

+import React, {Component} from 'react';
+import {StyleSheet, View, Image, Text, TouchableOpacity, SafeAreaView} from 'react-native';
+import {
+  WIDTHXD,
+  HEIGHTXD,
+  getFontXD,
+  WIDTHXDICON,
+} from '../../Config/Functions';
+import R from '../../assets/R';
+import Icon from 'react-native-vector-icons/AntDesign';
+import MonthPicker, {ACTION_DATE_SET} from 'react-native-month-year-picker';
+
+/**
+ * This Function to choice date
+ * @callback onValueChange value of date you choice
+ * @param value value of date you choice
+ * @param containerStyle custom containerStyle of view
+ * @param textStyle style value of date
+ * @param placeholder value of placeholder
+ * @param width width of datePicker
+ * @param date value of date you choice
+ * @param enableEdit status allow edit
+ * other you can make minDate,maxDate... with props of libary react-native-datepicker
+ */
+class PickerMonth extends Component {
+  state = {
+    date: new Date(),
+    show: false,
+  };
+
+  render() {
+    const {
+      valueString,
+      onValueChange,
+      containerStyle,
+      textStyle,
+      width,
+      title,
+      date,
+    } = this.props;
+    return (
+      <>
+        <View style={{marginTop: HEIGHTXD(40)}}>
+          <Text
+            style={{
+              fontSize: getFontXD(42),
+              color: R.colors.color777,
+              marginBottom: 5,
+            }}>
+            {title}
+          </Text>
+          <View
+            style={[
+              styles.inputBox,
+              width && {width},
+            ]}>
+            <View
+              style={{
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                flex: 1,
+                paddingHorizontal: WIDTHXD(20),
+              }}>
+              <Text
+                style={{
+                  ...styles.textDate,
+                  ...textStyle,
+                  paddingVertical: 0,
+                  marginRight: WIDTHXD(15),
+                }}>
+                {valueString}
+              </Text>
+              <TouchableOpacity onPress={() => this.setState({show: true})}>
+                <Icon name={'calendar'} size={22} color={'#929292'}/>
+              </TouchableOpacity>
+            </View>
+          </View>
+        </View>
+        {this.state.show && (
+          <MonthPicker
+            onChange={(event, newDate) => {
+              this.setState({show: false});
+              console.log(event, newDate)
+              if (event == ACTION_DATE_SET) {
+                onValueChange(event, newDate);
+              }
+            }}
+            value={date}
+            locale="vi"
+          />
+        )}
+      </>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  inputBox: {
+    borderRadius: WIDTHXD(20),
+
+    height: HEIGHTXD(120),
+    borderWidth: 0.3,
+    borderColor: R.colors.borderGray,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    // paddingVertical: HEIGHTXD(17),
+    backgroundColor: 'white',
+  },
+  textDate: {
+    fontSize: getFontXD(42),
+    color: R.colors.black,
+    alignSelf: 'flex-start',
+  },
+});
+
+export default React.memo(PickerMonth);

src/helper/i18/locales/en.js

@@ -332,6 +332,9 @@ export default {
   HaveNotCredential: 'Can not login by %{type}, please return on login by %{type}',
   LoginBy: 'Login by %{type}',
   Fingerprint: 'Fingerprint',
-  FaceId: 'FaceId'
+  FaceId: 'FaceId',
+  SearchProductCode: 'Search product code',
+  IndustryGroup: 'Industry group',
+  Period: 'Period',
 
 };

src/helper/i18/locales/vn.js

@@ -329,5 +329,8 @@ export default {
   HaveNotCredential: 'Không thể đăng nhập được bằng %{type}, vui lòng bật lại chức năng đăng nhập bằng %{type}',
   LoginBy: 'Đăng nhập bằng %{type}',
   Fingerprint: 'vân tay',
-  FaceId: 'nhận diện khuôn mặt'
+  FaceId: 'nhận diện khuôn mặt',
+  SearchProductCode: 'Tìm kiếm mã sản phẩm',
+  IndustryGroup: 'Nhóm ngành',
+  Period: 'Kỳ hạn',
 };

yarn.lock

@@ -6039,7 +6039,7 @@ mkdirp@^0.5.1:
   dependencies:
     minimist "^1.2.5"
 
-moment@^2.22.0, moment@^2.29.1:
+moment@^2.22.0, moment@^2.24.0, moment@^2.29.1:
   version "2.29.1"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz"
   integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
@@ -6917,6 +6917,14 @@ react-native-modal@^11.7.0:
     prop-types "^15.6.2"
     react-native-animatable "1.3.3"
 
+react-native-month-year-picker@^1.6.4:
+  version "1.6.4"
+  resolved "https://registry.yarnpkg.com/react-native-month-year-picker/-/react-native-month-year-picker-1.6.4.tgz#badcbf4de7b2214773e8941ebd7e4933ccbedf26"
+  integrity sha512-cgL+A9nNASkQR8WOkzmXdFOiMI+BcqJekLkqvZSUfQi4bJw65PdIBl5VsaHP1pchBgUbw61GQRxS8pS/qAeeOA==
+  dependencies:
+    invariant "^2.2.4"
+    moment "^2.24.0"
+
 react-native-progress@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/react-native-progress/-/react-native-progress-4.1.2.tgz#ffb2264ddfeba409c730e36a9791bb7bbe07a00d"