update code

ios/Invest.xcodeproj/project.pbxproj

@@ -903,7 +903,7 @@
 				CODE_SIGN_ENTITLEMENTS = Invest/Invest.entitlements;
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 18;
+				CURRENT_PROJECT_VERSION = 20;
 				DEVELOPMENT_TEAM = MXZ24GRH48;
 				ENABLE_BITCODE = NO;
 				GCC_PREPROCESSOR_DEFINITIONS = (
@@ -936,7 +936,7 @@
 				CODE_SIGN_ENTITLEMENTS = Invest/Invest.entitlements;
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 18;
+				CURRENT_PROJECT_VERSION = 20;
 				DEVELOPMENT_TEAM = MXZ24GRH48;
 				INFOPLIST_FILE = Invest/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";

package.json

@@ -14,6 +14,8 @@
     "@react-native-community/async-storage": "^1.12.1",
     "@react-native-community/checkbox": "^0.5.7",
     "@react-native-community/masked-view": "^0.1.10",
+    "@react-native-firebase/app": "^7.1.0",
+    "@react-native-firebase/messaging": "^7.1.0",
     "@react-navigation/bottom-tabs": "^5.11.7",
     "@react-navigation/material-top-tabs": "^5.3.14",
     "@react-navigation/native": "^5.9.2",
@@ -25,11 +27,10 @@
     "react": "16.11.0",
     "react-hook-form": "^6.15.4",
     "react-native": "0.62.2",
+    "react-native-autocomplete-input": "^5.0.0",
     "react-native-bootsplash": "^3.2.0",
     "react-native-confirmation-code-field": "^6.5.1",
     "react-native-datepicker": "^1.7.2",
-    "@react-native-firebase/app": "^7.1.0",
-    "@react-native-firebase/messaging": "^7.1.0",
     "react-native-gesture-handler": "^1.9.0",
     "react-native-image-crop-picker": "^0.36.0",
     "react-native-indicators": "^0.17.0",

src/Config/Functions.js

@@ -142,16 +142,16 @@ export const converStatus = (status) => {
       return 'Huỷ';
   }
 };
+
+export function numberFormat(x) {
+  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
+}
 export const toPriceVnd = (str) => {
   if (str) {
-    let stringPrice = str.toString().split('.');
-    let headStringPrice = `${stringPrice[0].replace(
-      /(\d)(?=(\d{3})+(?!\d))/g,
-      '$1.',
-    )}`;
-    return stringPrice.length === 1
-      ? headStringPrice
-      : headStringPrice.concat(`,${stringPrice[1]}`);
+    let headStringPrice = `${str
+      .toString()
+      .replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')}`;
+    return headStringPrice;
   } else {
     return '';
   }

src/Screens/Action/History/DetailHistory.js

+import React, {useState} from 'react';
+import {View, Text, StyleSheet} from 'react-native';
+import HeaderBack from '../../../components/Header/HeaderBack';
+
+import {WebView} from 'react-native-webview';
+
+const DetailHistory = (props) => {
+  return (
+    <View style={{flex: 1}}>
+      <HeaderBack isWhite={true} title={'Nạp tiền'} />
+      <WebView
+        androidHardwareAccelerationDisabled={true}
+        source={{
+          uri:
+            'http://api.dcvinvest.com/webview/customers/detail-transaction-history/' +
+            props.route.params.id,
+        }}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  containerBtn: {
+    marginBottom: 15,
+  },
+});
+
+export default DetailHistory;

src/Screens/Action/History/HistoryView.js

@@ -36,9 +36,10 @@ const Fillters = [
 
 const HistoryView = (props) => {
   const {isRefresh, onRefresh, onLoadMore, data, selected, setSelected} = props;
+
   return (
     <View style={{flex: 1}}>
-      <HeaderBack isWhite={true} title={'LỊCH SỬ'} />
+      <HeaderBack isWhite={true} title={'Lịch sử'} />
       <View style={{flex: 1}}>
         <View style={styles.headerContainer}>
           <ScrollView horizontal showsHorizontalScrollIndicator={false}>
@@ -82,7 +83,7 @@ const HistoryView = (props) => {
             onEndReached={(info) => {
               onLoadMore();
             }}
-            keyExtractor={(item) => item.id + 'a'}
+            keyExtractor={(item) => item.transection_id + 'a'}
             data={data}
             renderItem={({item}) => <Item item={item} />}
           />

src/Screens/Action/History/Item.js

@@ -11,14 +11,18 @@ import {
 import R from '../../../assets/R';
 import Block from '../../../components/Block';
 import {useNavigation} from '@react-navigation/native';
-import {DETAIL_REQUIRE_MONEY} from '../../../routers/ScreenNames';
+import {HISTORYDETAIL} from '../../../routers/ScreenNames';
 
 const Item = (props) => {
   const {item} = props;
-  //   console.log('item---', item.status);
+  console.log('item---', item);
   const navigate = useNavigation();
   return (
-    <View style={styles.container}>
+    <TouchableOpacity
+      onPress={() =>
+        navigate.navigate(HISTORYDETAIL, {id: item.transection_id})
+      }
+      style={styles.container}>
       <Block flex={1} row>
         <View style={styles.wrapLeft} />
         <View style={styles.wrapDate}>
@@ -52,12 +56,12 @@ const Item = (props) => {
                 ]}>
                 {toPriceVnd(item.amount)} Đ
               </Text>
-              <Text style={styles.txt}>{converStatus(item.status)}</Text>
+              <Text style={styles.txt}> {item.status_name}</Text>
             </View>
           </View>
         </Block>
       </Block>
-    </View>
+    </TouchableOpacity>
   );
 };
 

src/Screens/Action/Wallet/WalletDeposit.js

@@ -21,7 +21,7 @@ import {
 import {connect} from 'react-redux';
 import {showLoading, hideLoading} from '../../../actions/loadingAction';
 import {walletDeposit} from '../../../apis/Functions/Deposit';
-
+import TextMoney from '../../../components/Input/InputMoney';
 const {width} = Dimensions.get('window');
 
 const WalletDeposit = (props) => {
@@ -85,10 +85,10 @@ const WalletDeposit = (props) => {
         </View>
         <View style={styles.wrapBody}>
           {/* <TextDisable value={'10010101'} title={'Số tài khoản CQG'} /> */}
-          <TextField
+          <TextMoney
             onChangeText={(val) => setAmount(val)}
             title={'Số tiền'}
-            isNumber={true}
+            value={amount}
           />
           <TextMulti onChangeText={(val) => setNotes(val)} title={'Ghi chú'} />
         </View>

src/Screens/Action/Wallet/WalletWithdraw.js

@@ -30,6 +30,7 @@ import {useNavigation} from '@react-navigation/native';
 import {showLoading, hideLoading} from '../../../actions/loadingAction';
 import {confirmAlert} from '../../../components/Aleart';
 import {ADDMETHODPAY} from '../../../routers/ScreenNames';
+import TextMoney from '../../../components/Input/InputMoney';
 
 var radio_props = [
   {label: 'Từ ví', value: 'WALLET'},
@@ -174,10 +175,10 @@ const WalletWithdraw = (props) => {
                   setType(items);
                 }}
               />
-              <TextField
+              <TextMoney
                 onChangeText={(val) => setAmount(val)}
                 title={'Số tiền'}
-                isNumber={true}
+                value={amount}
               />
               <TextMulti
                 onChangeText={(val) => setNotes(val)}

src/Screens/Home/Home.js

@@ -2,16 +2,18 @@ import React, {useEffect, useState} from 'react';
 import {View, Alert} from 'react-native';
 import {connect} from 'react-redux';
 import {getTransaction} from '../../apis/Functions/users';
-
+import {confirmAlert} from '../../components/Aleart';
 import HomeView from './HomeView';
+import {useNavigation} from '@react-navigation/native';
+import {AccountVerification, PACKETCQG} from '../../routers/ScreenNames';
 
 const Home = (props) => {
   const [data, setData] = useState({total_deposit: 0, total_withdraw: 0});
+
+  const navigate = useNavigation();
   useEffect(() => {
     getData();
   }, []);
-  console.log();
-  props.user;
   const getData = async () => {
     const res = await getTransaction({});
     if (res.data.code == 200 && res.data.data) {

src/Screens/Home/HomeView.js

@@ -45,7 +45,7 @@ const HomeView = (props) => {
           <View style={styles.row}>
             <View style={styles.itemMenu}>
               <Text style={styles.txtTitle}>Hoa hồng</Text>
-              <Text style={styles.txtMoney1}>+ 0 Đ </Text>
+              <Text style={styles.txtMoney1}>0 Đ </Text>
             </View>
             <View style={{width: 0.5, backgroundColor: R.colors.borderGray}} />
             <View style={styles.itemMenu}>

src/Screens/Menu/BonusTeam/BonusTeam.js

@@ -2,6 +2,7 @@ import React from 'react';
 import {View, Text} from 'react-native';
 import {getFontXD} from '../../../Config/Functions';
 import HeaderBack from '../../../components/Header/HeaderBack';
+import PickerSearch from '../../../components/Picker/PickerSearch';
 
 const BonusTeam = (props) => {
   return (
@@ -22,6 +23,19 @@ const BonusTeam = (props) => {
           }}>
           Tính năng đang được phát triển, vui lòng quay lại sau!
         </Text>
+
+        {/* <PickerSearch
+          findData={() => {
+            console.log('Call api');
+          }}
+          data={[
+            {value: 0, name: ''},
+            {value: 1, name: 'Nam 1'},
+            {value: 2, name: 'Nam 2'},
+            {value: 3, name: 'Nam 3'},
+            {value: 4, name: 'Nam 4'},
+          ]}
+        /> */}
       </View>
     </View>
   );

src/Screens/Menu/Payments/Payments.js

 import React from 'react';
-import {View, FlatList} from 'react-native';
+import {View, FlatList, Text} from 'react-native';
 import HeaderSearch from '../../../components/Header/HeaderBack';
 import Item from './Item';
 
@@ -21,14 +21,24 @@ const data = [
 
 const Payments = (props) => {
   return (
-    <View>
+    <View style={{flex: 1}}>
       <HeaderSearch isWhite={false} title={'Các khoản thanh toán'} />
 
-      <FlatList
+      <View style={{justifyContent: 'center', alignItems: 'center', flex: 1}}>
+        <Text
+          style={{
+            fontSize: 18,
+            fontWeight: 'bold',
+            textAlign: 'center',
+          }}>
+          Tính năng đang được phát triển, vui lòng quay lại sau!
+        </Text>
+      </View>
+      {/* <FlatList
         keyExtractor={(item) => item.id}
         data={data}
         renderItem={({item}) => <Item item={item} />}
-      />
+      /> */}
     </View>
   );
 };

src/Screens/Menu/Rose/Rose.js

-import React from 'react';
+import React, {useState} from 'react';
 import {View, Text, FlatList} from 'react-native';
 import HeaderSB from '../../../components/Header/HeaderSB';
 import Item from './Item';
-
+import TextMoney from '../../../components/Input/InputMoney';
+import {toPriceVnd, numberFormat} from '../../../Config/Functions';
 const data = [
   {
     id: '1',
@@ -57,16 +58,32 @@ const data = [
 ];
 
 const Rose = (props) => {
+  const [text, setText] = useState('');
   return (
     <View style={{flex: 1}}>
-      <HeaderSB title={'HOA HỒNG'} />
-      <View style={{flex: 1}}>
+      <HeaderSB title={'Hoa hồng'} />
+      <TextMoney
+        value={toPriceVnd(text)}
+        style={{width: 100}}
+        onChangeText={(val) => setText(val.split(',').join(''))}
+      />
+      <View style={{justifyContent: 'center', alignItems: 'center', flex: 1}}>
+        <Text
+          style={{
+            fontSize: 18,
+            fontWeight: 'bold',
+            textAlign: 'center',
+          }}>
+          Tính năng đang được phát triển, vui lòng quay lại sau!
+        </Text>
+      </View>
+      {/* <View style={{flex: 1}}>
         <FlatList
           keyExtractor={(item) => item.id}
           data={data}
           renderItem={({item}) => <Item item={item} />}
         />
-      </View>
+      </View> */}
     </View>
   );
 };

src/Screens/NewFeed/Calendar/Calendar.js

@@ -58,7 +58,7 @@ const NewFeed = (props) => {
 
   const getItemLayout = (data, index) => ({
     length: 100,
-    offset: 60 * index,
+    offset: 40 * index,
     index,
   });
 

src/Screens/NewFeed/Tab1/Tab1.js

@@ -112,7 +112,7 @@ const NewFeed = (props) => {
               onPress={() => {
                 setSelected(e.id);
               }}
-              key={e.id}
+              key={e.id + 'a'}
               style={[
                 styles.item,
                 e.id == selected ? {backgroundColor: '#BCD7F8'} : {},

src/components/Aleart.js

@@ -4,10 +4,10 @@ export const NotificationAlert = (string) => {
   Alert.alert('Thông báo', string);
 };
 
-export const confirmAlert = (title, callback) => {
+export const confirmAlert = (content, callback) => {
   Alert.alert(
     'Thông báo',
-    title,
+    content,
     [
       {
         text: 'Hủy',

src/components/Header/HeaderBack.js

@@ -30,12 +30,14 @@ const HeaderHome = (props) => {
       <SnackBar />
       <StatusBar backgroundColor="transparent" translucent={true} />
       <View style={styles.headerContainer}>
-        <TouchableOpacity onPress={() => navigate.goBack()}>
+        <TouchableOpacity
+          style={{width: 35, height: 30}}
+          onPress={() => navigate.goBack()}>
           <Image source={R.images.iconBack} style={styles.imgIcon} />
         </TouchableOpacity>
 
         <Text style={styles.txtTitle}>{title}</Text>
-        <View style={styles.imgIcon} />
+        <View style={{width: 35, height: 30}} />
       </View>
     </ImageBackground>
   );

src/components/Header/HeaderDrawer.js

@@ -37,12 +37,12 @@ const HeaderDrawer = (props) => {
       <StatusBar backgroundColor="transparent" translucent={true} />
 
       <View style={styles.headerContainer}>
-        <TouchableOpacity onPress={toggleModal}>
+        <TouchableOpacity style={{width: 35, height: 30}} onPress={toggleModal}>
           <Image source={R.images.iconMenu} style={styles.imgIcon} />
         </TouchableOpacity>
 
         <Text style={styles.txtTitle}>{title}</Text>
-        <View style={styles.imgIcon} />
+        <View style={{width: 35, height: 30}} />
       </View>
       <Modal
         animationIn={'fadeInLeft'}

src/components/Header/HeaderHome.js

@@ -28,11 +28,12 @@ import {
   PROFILE,
   AccountVerification,
   WALLETWITHDRAW,
+  PACKETCQG,
 } from '../../routers/ScreenNames';
 
-const renderWallet = (status, current_money, current_cqg_money) => {
+const renderWallet = (status, current_money, current_cqg_money, contract) => {
   const navigate = useNavigation();
-  if (status == 3)
+  if (status == 3 && contract != '')
     return (
       <View style={{flex: 1, flexDirection: 'row'}}>
         <View style={styles.containerWallet}>
@@ -56,20 +57,27 @@ const renderWallet = (status, current_money, current_cqg_money) => {
         </View>
       </View>
     );
-  if (status == 4)
+  if (status == 3 && !contract)
     return (
       <View style={{flex: 1, flexDirection: 'row'}}>
         <View style={styles.containerWallet}>
           <Text style={styles.txtWallet}>Tài khoản ví</Text>
           <View style={{flexDirection: 'row'}}>
-            <Text style={styles.txtMoney}>{toPriceVnd(1000000)}</Text>
+            <Text style={styles.txtMoney}>
+              {' '}
+              {current_money == 0 ? 0 : toPriceVnd(current_money)}
+            </Text>
             <Text style={styles.txtUnit}>Đ</Text>
           </View>
         </View>
         <View style={{width: 1, backgroundColor: '#EDEDF1', height: '100%'}} />
 
         <View style={styles.containerWallet}>
-          <TouchableOpacity style={styles.btn}>
+          <TouchableOpacity
+            onPress={() => {
+              navigate.navigate(PACKETCQG);
+            }}
+            style={styles.btn}>
             <Text style={styles.txtWhite}>Mở tài khoản thật</Text>
           </TouchableOpacity>
         </View>
@@ -108,7 +116,6 @@ const renderLabel = (status) => {
 
 const HeaderHome = (props) => {
   const navigate = useNavigation();
-  console.log(props.user);
 
   const copyToClipboard = () => {
     Alert.alert('Đã sao chép link giới thiệu!');
@@ -158,6 +165,7 @@ const HeaderHome = (props) => {
               props.user.status,
               props.user.current_money,
               props.user.current_cqg_money,
+              props.user.contract_code,
             )}
           </View>
           <View style={styles.containerMenu}>

src/components/Header/HeaderSB.js

@@ -41,8 +41,10 @@ const HeaderSearch = (props) => {
       <StatusBar backgroundColor="transparent" translucent={true} />
       <SnackBar />
       <View style={styles.headerContainer}>
-        <TouchableOpacity onPress={() => navigate.goBack()}>
-          <Image source={R.images.iconBack} style={styles.imgIcon} />
+        <TouchableOpacity
+          style={{width: 35, height: 30}}
+          onPress={() => navigate.goBack()}>
+          <Image source={R.images.iconBack} style={styles.imgBack} />
         </TouchableOpacity>
 
         {openSearch ? (
@@ -91,6 +93,10 @@ const styles = StyleSheet.create({
     paddingHorizontal: 20,
     justifyContent: 'space-between',
   },
+  imgBack: {
+    width: 30,
+    height: 30,
+  },
   imgIcon: {
     width: 25,
     height: 20,

src/components/Header/HeaderSearch.js

@@ -20,6 +20,7 @@ import {HEIGHTXD} from '../../Config/Functions';
 import Modal from 'react-native-modal';
 import Drawer from './Drawer';
 import Icon from 'react-native-vector-icons/Ionicons';
+import SnackBar from '../SnackBar';
 const HeaderSearch = (props) => {
   const {title, isWhite} = props;
 

src/components/Header/HeaderTitle.js

@@ -13,6 +13,7 @@ import LinearGradient from 'react-native-linear-gradient';
 import Icon from 'react-native-vector-icons/Ionicons';
 import {useNavigation} from '@react-navigation/native';
 import  SnackBar from '../SnackBar'
+
 const HeaderHome = (props) => {
   const {title, back} = props;
 

src/components/Input/InputMoney.js

+import React from 'react';
+import {View, Text, TextInput} from 'react-native';
+import {HEIGHTXD, WIDTHXD, getFontXD} from '../../Config/Functions';
+import R from '../../assets/R';
+import {toPriceVnd} from '../../Config/Functions';
+
+const TextMoney = (props) => {
+  const {title, onChangeText, maxLength, value, editable} = props;
+
+  return (
+    <View style={{marginVertical: 5}}>
+      <Text
+        style={{
+          fontSize: getFontXD(42),
+          color: R.colors.color777,
+          marginBottom: 5,
+        }}>
+        {title ? title : ''}
+      </Text>
+      <TextInput
+        maxLength={maxLength ? maxLength : 256}
+        placeholderTextColor={R.colors.placeHolder}
+        editable={editable != null ? editable : true}
+        autoCapitalize="none"
+        value={toPriceVnd(value)}
+        keyboardType={'number-pad'}
+        onChangeText={(val) => onChangeText(val.split(',').join(''))}
+        style={{
+          height: HEIGHTXD(109),
+          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,
+        }}
+      />
+    </View>
+  );
+};
+
+export default React.memo(TextMoney);

src/components/Picker/ModalSearch.js

+import React, {Component} from 'react';
+import {
+  View,
+  Text,
+  Modal,
+  StyleSheet,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  TextInput,
+  Platform,
+} from 'react-native';
+import Autocomplete from 'react-native-autocomplete-input';
+import AntDesign from 'react-native-vector-icons/AntDesign';
+import {
+  HEIGHT,
+  WIDTH,
+  WIDTHXD,
+  getFontXD,
+  HEIGHTXD,
+  WIDTHXDICON,
+} from '../../Config/Functions';
+import R from '../../assets/R';
+
+/**
+ * Displays a popup search with a list of data that returns the value of the selected item
+ *@param title title of popup search(string)
+ *@param iconStyle style of icon search(PropsStyle)
+ *@callback onValueChange call when you choice one of list item with param name and item
+ *@method setModalVisible to set show and hide this popup(param true to show and false to hide)
+ *@method changeName to find data with query (auto searh after 500ms)
+ */
+class ModalSearch extends Component {
+  state = {
+    modalVisible: false,
+    query: '',
+    name: '',
+    typing: false,
+    typingTimeout: 0,
+    reRender: false,
+    selectedIndex: -1,
+  };
+
+  listSearch = [];
+
+  /**
+   * This Function to open, close modal
+   */
+  setModalVisible = (visible) => {
+    this.setState({
+      modalVisible: visible,
+    });
+  };
+
+  componentDidMount() {
+    this.loadData();
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (
+      nextProps.data !== this.props.data &&
+      (nextProps.data.length > 0 || nextProps.isNeedClearData)
+    ) {
+      this.listSearch = nextProps.data;
+      this.setState({reRender: this.state.reRender});
+    }
+  }
+
+  /**
+   * This Function to load data with param search
+   */
+  changeName = (event) => {
+    this.setState({name: event, selectedIndex: -1});
+    if (this.state.typingTimeout) {
+      clearTimeout(this.state.typingTimeout);
+    }
+
+    console.log(event);
+    this.setState({
+      name: event,
+      query: event,
+      typing: false,
+      typingTimeout: setTimeout(async () => {
+        const {findData} = this.props;
+        this.listSearch = findData ? await findData(event) : [];
+        this.setState({reRender: !this.state.reRender});
+      }, 500),
+    });
+  };
+
+  /**
+   * This Function to search with query
+   * @param query value of input text
+   */
+
+  /**
+   * This Function to load data first
+   */
+  loadData = async () => {
+    const {findData} = this.props;
+    this.listSearch = findData ? await findData(' ') : [];
+  };
+
+  render() {
+    const {title, iconStyle, onValueChange} = this.props;
+    const {query} = this.state;
+    return (
+      <Modal
+        onRequestClose={() => {
+          this.setModalVisible(false);
+        }}
+        animationType="slide"
+        transparent={true}
+        visible={this.state.modalVisible}>
+        <TouchableWithoutFeedback
+          onPress={() => {
+            this.setModalVisible(false);
+          }}>
+          <View style={styles.opacity}>
+            <TouchableWithoutFeedback>
+              <View style={styles.modal}>
+                <Text style={styles.title}>{title}</Text>
+                <TouchableOpacity
+                  onPress={() => {
+                    this.setModalVisible(false);
+                  }}
+                  style={[styles.iconCloseStyle]}
+                  hitSlop={{top: 20, left: 20, right: 20, bottom: 20}}>
+                  <AntDesign name="close" size={WIDTHXD(50)} color="#000" />
+                </TouchableOpacity>
+                <View style={styles.container}>
+                  <Autocomplete
+                    autoCapitalize="none"
+                    autoCorrect={false}
+                    style={{
+                      // width: WIDTHXD(870),
+                      paddingRight: WIDTHXD(100),
+                      height: HEIGHTXD(99),
+                    }}
+                    ref={(ref) => (this.refList = ref)}
+                    inputContainerStyle={styles.inputBox}
+                    placeholderTextColor="gray"
+                    containerStyle={styles.autocompleteContainer}
+                    data={this.listSearch}
+                    keyExtractor={(item, index) => index.toString()}
+                    defaultValue={query}
+                    listStyle={styles.listStyle}
+                    renderTextInput={(iProps) => (
+                      <View
+                        style={{
+                          flexDirection: 'row',
+                          alignItems: 'center',
+                        }}>
+                        <AntDesign
+                          name="search1"
+                          size={WIDTHXDICON(50)}
+                          color="#77869E"
+                        />
+                        <TextInput
+                          value={this.state.name}
+                          onChangeText={(e) => this.changeName(e)}
+                          {...iProps}
+                          placeholderTextColor="#BAC7D3"
+                          style={{
+                            fontSize: getFontXD(36),
+                            marginLeft: WIDTHXD(21.7),
+                            color: '#000',
+                            flex: 1,
+                            height: '100%',
+                          }}
+                        />
+                      </View>
+                    )}
+                    // onChangeText={text => { this.changeName(text) }}
+                    placeholder={'Tim kiem'}
+                    listContainerStyle={{
+                      marginTop: HEIGHTXD(37),
+                    }}
+                    renderItem={({item, index}) => {
+                      let evenRow =
+                        index ===
+                        (this.listSearch && this.listSearch.length - 1);
+                      let highlighted = this.state.selectedIndex === index;
+                      return (
+                        <TouchableOpacity
+                          key={index.toString()}
+                          style={[
+                            styles.itemStyle,
+                            highlighted && {backgroundColor: '#e3e8f2'},
+                          ]}
+                          onPress={() => {
+                            onValueChange &&
+                              onValueChange(
+                                item.text ? `${item.text}` : `${item.name}`,
+                                item,
+                              );
+                            this.setState({
+                              query: item.text ? item.text : item.name,
+                              selectedIndex: index,
+                            });
+                            this.setModalVisible(false);
+                          }}>
+                          <Text style={styles.itemText}>
+                            {item.text
+                              ? item.text && `${item.text}`
+                              : item.name && `${item.name}`}
+                          </Text>
+                        </TouchableOpacity>
+                      );
+                    }}
+                    flatListProps={{
+                      ItemSeparatorComponent: () => (
+                        <View
+                          style={{
+                            width: '100%',
+                            height: 0.5,
+                            backgroundColor: R.colors.borderD4,
+                          }}
+                        />
+                      ),
+                      ListEmptyComponent: () => (
+                        <Text style={styles.itemText}>Không có dữ liệu</Text>
+                      ),
+                    }}
+                  />
+                  {this.state.name.length !== 0 && (
+                    <TouchableOpacity
+                      onPress={() => {
+                        this.changeName('');
+                      }}
+                      hitSlop={{top: 20, bottom: 20, left: 50, right: 50}}
+                      style={[
+                        styles.iconStyle,
+                        iconStyle !== null && iconStyle,
+                      ]}>
+                      <AntDesign
+                        name="close"
+                        size={WIDTHXD(40)}
+                        color="#BAC7D3"
+                      />
+                    </TouchableOpacity>
+                  )}
+                </View>
+              </View>
+            </TouchableWithoutFeedback>
+          </View>
+        </TouchableWithoutFeedback>
+      </Modal>
+    );
+  }
+}
+
+export default ModalSearch;
+const styles = StyleSheet.create({
+  opacity: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#rgba(0,0,0,0.7)',
+  },
+  modal: {
+    backgroundColor: 'white',
+    width: WIDTHXD(1004),
+    borderRadius: WIDTHXD(30),
+    height: HEIGHTXD(1570),
+    paddingTop: HEIGHTXD(50),
+    paddingBottom: HEIGHTXD(54),
+    alignItems: 'center',
+    paddingHorizontal: WIDTHXD(45),
+  },
+  title: {
+    color: R.colors.indigo701,
+    fontSize: getFontXD(54),
+    marginBottom: HEIGHTXD(75),
+    alignSelf: 'center',
+  },
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    width: WIDTHXD(914),
+  },
+  autocompleteContainer: {
+    zIndex: 1,
+    width: WIDTHXD(914),
+  },
+  itemText: {
+    fontSize: getFontXD(42),
+  },
+  inputBox: {
+    width: WIDTHXD(914),
+    borderRadius: WIDTHXD(20),
+    height: HEIGHTXD(99),
+    paddingHorizontal: WIDTHXD(30),
+    paddingRight: WIDTHXD(100),
+    justifyContent: 'space-between',
+    borderWidth: 0.3,
+    borderColor: R.colors.borderD4,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  iconStyle: {
+    position: 'absolute',
+    right: WIDTHXD(20),
+    zIndex: 1,
+    height: HEIGHTXD(99),
+    width: WIDTHXD(60),
+    justifyContent: 'center',
+    alignItems: 'center',
+    top: 0,
+  },
+  listStyle: {
+    width: WIDTHXD(914),
+    marginLeft: 0,
+    // marginTop: 1,
+    // borderWidth: WIDTHXD(13),
+    borderColor: R.colors.borderD4,
+    borderRadius: WIDTHXD(20),
+    borderWidth: 0.3,
+    borderTopWidth: 0.3,
+    height: HEIGHTXD(1150),
+  },
+  itemStyle: {
+    paddingVertical: HEIGHT(6),
+    paddingHorizontal: WIDTH(10),
+    minHeight: HEIGHTXD(100),
+    // borderBottomWidth: 0.3,
+    // borderBottomColor: R.colors.iconGray
+  },
+  iconCloseStyle: {
+    position: 'absolute',
+    right: WIDTHXD(72),
+    zIndex: 1,
+    top: HEIGHTXD(67.5),
+  },
+});

src/components/Picker/PickerSearch.js

+// @flow
+import React, {Component} from 'react';
+import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
+import R from '../../assets/R';
+import {HEIGHTXD, WIDTHXD, getFontXD} from '../../Config/Functions';
+import ModalSearch from './ModalSearch';
+
+/**
+ * This Function to show piker search with list date (for example [{name:'Picker1'},{name:'Picker2}])
+ * This show view with input when touch it show a modal search
+ * @callback onValueChange return value of item you choice
+ * @param title title of popup search
+ * @param containerStyle custom containerStyle of view
+ * @param data style value of date
+ * @param width width of picker
+ * @param date value of date you choice
+ * @param value value of date you choice
+ * @param searchPickerStyle custom searchPickerStyle of TouchableOpacity
+ * @param placeholder value of placeholder
+ * @param textStyle custom text in Text
+ * other you can make minDate,maxDate... with props of libary react-native-datepicker
+ */
+class PickerSearch extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: '',
+      item: null,
+      reRender: false,
+    };
+  }
+
+  componentDidMount = async () => {
+    const {value} = this.props;
+    if (value) {
+      this.setState({value});
+    }
+  };
+
+  componentWillReceiveProps(nextProps) {
+    if (
+      nextProps.data !== this.props.data &&
+      (nextProps.data.length > 0 || nextProps.isNeedClearData)
+    ) {
+      this.setState({reRender: this.state.reRender});
+    }
+  }
+
+  onChangeText = (text) => {
+    this.ModalSearch && this.ModalSearch.changeName(text);
+  };
+
+  render() {
+    const {value, item} = this.state;
+    const {
+      textStyle,
+      containerStyle,
+      placeholder,
+      width,
+      data,
+      title,
+      onValueChange,
+      findData,
+      disabled,
+      height,
+      tempDisabled,
+      onShowPorm,
+      style,
+    } = this.props;
+    const choosed =
+      this.props.value && this.props.value != '' && this.props.value !== null
+        ? true
+        : false;
+
+    return (
+      <View style={[styles.container, style ? style : {}]}>
+        <TouchableOpacity
+          disabled={disabled}
+          onPress={() => {
+            tempDisabled
+              ? onShowPorm && onShowPorm()
+              : this.ModalSearch.setModalVisible(true);
+          }}
+          style={[
+            styles.searchPicker,
+            containerStyle !== null && containerStyle,
+            width && {width},
+            height && {height},
+          ]}>
+          {value === '' && this.props.value && this.props.value === '' ? (
+            <Text>{placeholder !== null && placeholder}</Text>
+          ) : (
+            <Text
+              numberOfLines={1}
+              style={[
+                styles.textStyle,
+                textStyle !== null && textStyle,
+                width && {width: width - WIDTHXD(150)},
+              ]}>
+              {this.props.value !== null && this.props.value}
+            </Text>
+          )}
+
+          <TouchableOpacity
+            onPress={() => {
+              this.setState({value: '', item: null});
+              onValueChange && onValueChange('', null);
+            }}
+            hitSlop={{left: 20, top: 20, right: 20, bottom: 20}}
+            disabled={!choosed || disabled}>
+            <AntDesign
+              name={!choosed || disabled ? 'search1' : 'close'}
+              size={WIDTHXD(43)}
+              color={R.colors.iconGray}
+            />
+          </TouchableOpacity>
+        </TouchableOpacity>
+
+        <ModalSearch
+          ref={(ref) => {
+            this.ModalSearch = ref;
+          }}
+          data={data}
+          isNeedClearData={this.props.isNeedClearData}
+          findData={findData !== null && findData}
+          onValueChange={(Value, item) => {
+            this.setState({value: Value, item: item});
+            onValueChange && onValueChange(item.value, item);
+          }}
+          title={title}
+        />
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: HEIGHTXD(8),
+    flexDirection: 'row',
+    alignItems: 'center',
+    width: WIDTHXD(960),
+  },
+  searchPicker: {
+    width: WIDTHXD(960),
+    borderRadius: HEIGHTXD(20),
+    paddingHorizontal: WIDTHXD(36),
+    justifyContent: 'space-between',
+    flexDirection: 'row',
+    alignItems: 'center',
+    height: HEIGHTXD(99),
+    borderWidth: 0.3,
+    borderColor: R.colors.iconGray,
+    color: R.colors.black0,
+  },
+  textStyle: {
+    fontFamily: R.fonts.RobotoRegular,
+    width: WIDTHXD(800),
+    fontSize: getFontXD(42),
+  },
+});
+
+export default PickerSearch;

src/components/SnackBar.js

@@ -21,7 +21,6 @@ const SnackBar = (props) => {
   const {isOpen, title, content, screen, id_record} = props.snackReducer;
 
   useEffect(() => {
-    console.log('Reducer', props.snackReducer);
     if (isOpen)
       setTimeout(() => {
         props.hideNotification();

src/helper/FirebaseNotification.js

@@ -13,7 +13,7 @@ const FirebaseNotification = (props) => {
   useEffect(() => {
     requestUserPermission();
     const unsubscribe = messaging().onMessage(async (remoteMessage) => {
-      console.log('A new FCM message arrived!', remoteMessage);
+      console.log('A new FCM message arrived!', remoteMessage.data);
       props.showNotificaton({
         title: 'Title',
         content: 'Content notification',
@@ -36,6 +36,7 @@ const FirebaseNotification = (props) => {
   };
   const getFcmToken = async () => {
     let fcmToken = await AsyncStorage.getItem(KEY.FIREBASE);
+    console.log(fcmToken);
     if (!fcmToken) {
       fcmToken = await messaging().getToken();
       if (fcmToken) {

src/routers/ScreenNames.js

@@ -63,3 +63,5 @@ export const LEGALBUSINESS = 'LEGALBUSINESS';
 export const LEGALDOCUMENT = 'LEGALDOCUMENT';
 export const LEGALCUSTOMER = 'LEGALCUSTOMER';
 export const LEGALPARTNER = 'LEGALPARTNER';
+
+export const HISTORYDETAIL = 'HISTORYDETAIL';

src/routers/StackNavigation.js

@@ -44,6 +44,7 @@ import Business from '../Screens/LegalDocument/Business';
 import Customer from '../Screens/LegalDocument/Customer';
 import Partner from '../Screens/LegalDocument/Partner';
 import SnackBar from '../components/SnackBar';
+import DetailHistory from '../Screens/Action/History/DetailHistory';
 
 import * as ScreenName from './ScreenNames';
 
@@ -62,6 +63,7 @@ function MyStack(props) {
       headerMode={'none'}
       initialRouteName={ScreenName.AUTHEN}>
       <Stack.Screen name={ScreenName.LOGINSCREEN} component={Login} />
+      <Stack.Screen name={ScreenName.HISTORYDETAIL} component={DetailHistory} />
       <Stack.Screen name={ScreenName.LEGALDOCUMENT} component={LegaDocument} />
       <Stack.Screen name={ScreenName.NOTIFICATION} component={Notification} />
 

src/routers/TabNavigation.js

@@ -8,12 +8,14 @@ import Home from '../Screens/Home/Home';
 import {connect} from 'react-redux';
 import R from '../assets/R';
 import PlussModal from './PlussModal';
-
+import {confirmAlert} from '../components/Aleart';
 import Account from '../Screens/Account/Account';
 import Exchange from '../Screens/Exchange/Exchange';
 import NewFeed from '../Screens/NewFeed/NewFeed';
 import Notification from '../Screens/Notification/Notification';
 import Test from '../Screens/NewFeed/Test';
+import {useNavigation} from '@react-navigation/native';
+import {AccountVerification, PACKETCQG} from '../routers/ScreenNames';
 const Tab = createBottomTabNavigator();
 
 const PayScreenComponent = () => {
@@ -21,6 +23,30 @@ const PayScreenComponent = () => {
 };
 
 const TabNavigator = (props) => {
+  const navigate = useNavigation();
+  useEffect(() => {
+    setTimeout(() => {
+      showPopUp();
+    }, 5000);
+  }, []);
+
+  const showPopUp = () => {
+    if (props.user.status == 1) {
+      return confirmAlert(
+        'Tài khoản của bạn chưa được xác minh.Tiến hành xác minh tài khoản?',
+        () => {
+          navigate.navigate(AccountVerification);
+        },
+      );
+    } else if (props.user.status == 3 && !props.user.contract_code) {
+      return confirmAlert(
+        'Bạn có muốn đăng mở tài khoản CQG để tiến hành đầu tư?',
+        () => {
+          navigate.navigate(PACKETCQG);
+        },
+      );
+    }
+  };
   return (
     <View style={{flex: 1}}>
       <Tab.Navigator
@@ -87,6 +113,7 @@ const TabNavigator = (props) => {
 
 const mapStateToProps = (state) => {
   return {
+    user: state.userReducer,
     notifi: state.CountNotificationReducer,
   };
 };

yarn.lock

@@ -6586,6 +6586,11 @@ react-native-animatable@1.3.3:
   dependencies:
     prop-types "^15.7.2"
 
+react-native-autocomplete-input@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/react-native-autocomplete-input/-/react-native-autocomplete-input-5.0.0.tgz#2bcba7be7846fe84e1e753362e3fe40c86fd7c46"
+  integrity sha512-JsVm1rLNdyf2mLN0cw8XKTP6xwsCw+laPOxb7j81XOZhsS7nQaWytwp6+YEvSi3bnMRuUpvOUbCiS55av9/0/w==
+
 react-native-bootsplash@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/react-native-bootsplash/-/react-native-bootsplash-3.2.0.tgz#671861fdd75444f91196d3e64d3539ef50c3a30f"
@@ -6748,6 +6753,13 @@ react-native@0.62.2:
     use-subscription "^1.0.0"
     whatwg-fetch "^3.0.0"
 
+react-number-format@^4.5.5:
+  version "4.5.5"
+  resolved "https://registry.yarnpkg.com/react-number-format/-/react-number-format-4.5.5.tgz#563807ee142a03857111115806d39767bc698797"
+  integrity sha512-3NGqgSbMUwRwgJ4852RH24UFkW89yx/e0P78Hwmf3TajLMKCOJ7DPJCcl/6z+2+HpJ8AG7je/J8na3ykWx8acg==
+  dependencies:
+    prop-types "^15.7.2"
+
 react-redux@^7.2.2:
   version "7.2.2"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.2.tgz"