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

@@ -27,15 +27,15 @@ const EnterPasswordModal = (props) => {
       setPass('');
     }}
   >
-        <TouchableWithoutFeedback
-            onPress={() => {
+    <TouchableOpacity
+      style={styles.opacity}
+      activeOpacity={1}
+      onPressOut={() => {
         setPass('');
         props.setVisible(false);
       }}
     >
-            <View
-                style={styles.opacity}
-            >
+      <TouchableWithoutFeedback>
         <View style={styles.modal}>
           <View style={styles.viewTitle}>
             <View style={styles.viewEmpty}></View>
@@ -61,13 +61,14 @@ const EnterPasswordModal = (props) => {
               dropDownAlertRef.current.alertWithType(TYPE.WARN, I18n.t('Notification'), `${I18n.t('Please_fill_in')}${I18n.t('Password')}`);
             } else {
               props.accept(pass);
-                            setPass('')
+              setPass('');
             }
 
           }}>
             <Text style={styles.txtAccept}>{I18n.t('Ok')}</Text>
           </TouchableOpacity>
         </View>
+      </TouchableWithoutFeedback>
       <DropdownAlert
         inactiveStatusBarBackgroundColor={R.colors.main}
         activeStatusBarBackgroundColor={R.colors.main}
@@ -88,8 +89,8 @@ const EnterPasswordModal = (props) => {
           paddingHorizontal: WIDTHXD(20),
         }}
       />
-            </View>
-        </TouchableWithoutFeedback>
+    </TouchableOpacity>
+
   </Modal>;
 };
 const styles = StyleSheet.create({

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

@@ -41,31 +41,32 @@ const EscrowView = (props) => {
         </ScrollView>
       </View>
 
-            {data.length == 0 && !isRefresh ? (
-                <View style={{justifyContent: 'center', alignItems: 'center', flex: 1}}>
+      <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>
-            ) : (
-                <FlatList
-                    style={{marginTop: HEIGHTXD(15)}}
-                    keyExtractor={(item) => item.id}
-                    data={data}
-                    refreshing={isRefresh}
-                    onRefresh={onRefresh}
+        </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})}/>}
+                                             onPress={(item) => navigate.navigate(PRODUCTDETAIL, {
+                                               id: item.commoditiy.id,
+                                               name: item.commoditiy.name,
+                                             })}/>}
       />
-            )}
     </View>
   );
 };

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,13 +9,51 @@ 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"
@@ -63,6 +101,15 @@ const NewFeed = (props) => {
             />
           </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"