update dropdown alert

android/app/build.gradle

@@ -132,8 +132,8 @@ android {
         applicationId "com.dcv.invest"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 2
-        versionName "1.2"
+        versionCode 4
+        versionName "1.3"
         vectorDrawables.useSupportLibrary = true
     }
     splits {

src/RootView.js

-import React, {useEffect} from 'react';
+import React, {useEffect, useRef} from 'react';
 import {
   View,
   Text,
@@ -14,15 +14,25 @@ import Modal from 'react-native-modal';
 import {SkypeIndicator} from 'react-native-indicators';
 import {enableScreens} from 'react-native-screens';
 import NoInternetComponent from './components/NoInternet';
-
+import DropdownAlert from 'react-native-dropdownalert';
 import DeviceInfo from 'react-native-device-info';
 import VersionChecker from './Screens/VersionChecker';
-import DropDown from './components/DropDown';
+import R from './assets/R';
+import {WIDTHXD, HEIGHTXD} from './Config/Functions';
+import DropdownManager from './components/DropdownAlert/DropdownManager';
 
 enableScreens();
 
 const RootView = (props) => {
-  useEffect(() => {}, []);
+  useEffect(() => {
+    DropdownManager.register(
+      dropDownAlertRef.current,
+      dropDownAlertLongTimeRef.current,
+    );
+  }, []);
+
+  const dropDownAlertRef = useRef(null);
+  const dropDownAlertLongTimeRef = useRef(null);
 
   const checkVersion = (props) => {
     const verCurrent = DeviceInfo.getVersion();
@@ -38,7 +48,44 @@ const RootView = (props) => {
         <StackNavigation />
       </View>
       {/*<VersionChecker/>*/}
-      {/* <DropDown /> */}
+      <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'}}
+        closeInterval={1000}
+        ref={dropDownAlertRef}
+        warnColor={R.colors.orange400}
+        defaultContainer={{
+          borderBottomRightRadius: WIDTHXD(30),
+          borderBottomLeftRadius: WIDTHXD(30),
+          paddingTop: HEIGHTXD(30),
+          paddingVertical: HEIGHTXD(30),
+          paddingHorizontal: WIDTHXD(20),
+        }}
+      />
+      <DropdownAlert
+        inactiveStatusBarBackgroundColor={R.colors.colorMain}
+        activeStatusBarBackgroundColor={R.colors.colorMain}
+        warnImageSrc={R.images.iconWarn}
+        successImageSrc={R.images.iconSuccess}
+        errorImageSrc={R.images.iconError}
+        titleStyle={{color: '#fff'}}
+        messageStyle={{color: '#fff'}}
+        closeInterval={600000}
+        ref={dropDownAlertLongTimeRef}
+        warnColor={R.colors.orange400}
+        defaultContainer={{
+          borderBottomRightRadius: WIDTHXD(30),
+          borderBottomLeftRadius: WIDTHXD(30),
+          paddingTop: HEIGHTXD(30),
+          paddingVertical: HEIGHTXD(30),
+          paddingHorizontal: WIDTHXD(20),
+        }}
+      />
 
       <NoInternetComponent />
     </>

src/Screens/Account/PacrtCQG/PacketCQG.js

@@ -15,7 +15,7 @@ import {useNavigation} from '@react-navigation/native';
 import {saveUserToRedux} from '../../../actions/users';
 import AppText from '../../../components/AppText';
 import I18n from '../../../helper/i18/i18n';
-
+import {showAlert, TYPE} from '../../../components/DropdownAlert/index';
 const PacketCQG = (props) => {
   const [listData, setListData] = useState([]);
   const [fee, setFee] = useState({data: [], title: ''});
@@ -56,14 +56,9 @@ const PacketCQG = (props) => {
     props.hideLoading();
     if (res.data.code == 200) {
       props.saveUserToRedux(res.data.data);
-      setTimeout(() => {
-        Alert.alert(I18n.t('Notification'), res.data.message);
-        navigate.goBack();
-      }, 500);
+      showAlert(TYPE.SUCCESS, I18n.t('Notification'), res.data.message);
     } else {
-      setTimeout(() => {
-        Alert.alert(I18n.t('Notification'), res.data.message);
-      }, 500);
+      showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
     }
   };
 
@@ -129,7 +124,7 @@ const PacketCQG = (props) => {
       setFeeNonPro(res.data.data.fee_pro);
       setFeePro(res.data.data.fee_non_pro);
     } else {
-      Alert.alert(I18n.t('Notification'), res.data.message);
+      showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
     }
   };
 

src/Screens/AccountVerification/Tab/BankInfor.js

@@ -25,6 +25,7 @@ import {connect} from 'react-redux';
 import {showLoading, hideLoading} from '../../../actions/loadingAction';
 import {useNavigation} from '@react-navigation/native';
 import I18n from '../../../helper/i18/i18n';
+import {showAlert, TYPE} from '../../../components/DropdownAlert';
 
 const {width} = Dimensions.get('window');
 const dataType = [
@@ -43,8 +44,6 @@ const BankInfor = (props) => {
   const [bank_no, setBackNo] = useState('');
   const [account_no, setAccountNo] = useState('');
 
-  console.log(props.route.params.body);
-
   const createFormData = (identity_after, identity_before, sign_img, body) => {
     const data = new FormData();
 
@@ -105,19 +104,17 @@ const BankInfor = (props) => {
       props.hideLoading();
 
       if (res.data.code == 200) {
-        setTimeout(() => {
-          Alert.alert(I18n.t('Notification'), res.data.message);
-        }, 500);
+        showAlert(TYPE.SUCCESS, I18n.t('Notification'), res.data.message);
+
         setBackNo('');
         setAccountNo('');
         setAccType('');
       } else {
-        setTimeout(() => {
-          Alert.alert(I18n.t('Notification'), res.data.message);
-        }, 500);
+        showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
       }
     } else {
-      Alert.alert(
+      showAlert(
+        TYPE.WARN,
         I18n.t('Notification'),
         I18n.t('Please_fill_in') + titles[index],
       );

src/Screens/AccountVerification/Tab/GeneralInfor.js

@@ -22,6 +22,7 @@ import PickerImg from '../../../components/Picker/PickerImg';
 import I18n from '../../../helper/i18/i18n';
 
 import {checkFormatArray, convertTime} from '../../../Config/Functions';
+import {showAlert, TYPE} from '../../../components/DropdownAlert';
 
 const GeneralInfor = (props) => {
   const [lastName, setLastName] = useState(props.user.l_name);
@@ -49,7 +50,8 @@ const GeneralInfor = (props) => {
         address,
       });
     } else {
-      Alert.alert(
+      showAlert(
+        TYPE.WARN,
         I18n.t('Notification'),
         I18n.t('Please_fill_in') + titles[index],
       );

src/Screens/AccountVerification/Tab/Profile.js

@@ -30,6 +30,7 @@ import PickerItem from '../../../components/Picker/PickerItem';
 import {saveUserToRedux} from '../../../actions/users';
 import I18n from '../../../helper/i18/i18n';
 import {uploadImage} from '../../../apis/Functions/Upload';
+import {TYPE} from '../../../components/DropdownAlert';
 
 const {width} = Dimensions.get('window');
 
@@ -139,25 +140,28 @@ const Profile = (props) => {
               props.hideLoading();
               if (res?.status == 200 && res.data) {
                 if (res.data.code == 200) {
-                  setTimeout(() => {
-                    props.saveUserToRedux(res.data.data);
-                    Alert.alert(I18n.t('Notification'), res.data.message);
-                    props.navigation.popToTop();
-                  }, 500);
+                  showAlert(
+                    TYPE.SUCCESS,
+                    I18n.t('Notification'),
+                    res.data.message,
+                  );
+                  props.saveUserToRedux(res.data.data);
+                  props.navigation.popToTop();
                 } else {
                   props.hideLoading();
-                  setTimeout(() => {
-                    Alert.alert(I18n.t('Notification'), res.data.message);
-                  }, 500);
+                  showAlert(
+                    TYPE.ERROR,
+                    I18n.t('Notification'),
+                    res.data.message,
+                  );
                 }
               } else {
                 props.hideLoading();
-                setTimeout(() => {
-                  Alert.alert(
-                    I18n.t('Notification'),
-                    I18n.t('UploadImageFail'),
-                  );
-                }, 500);
+                showAlert(
+                  TYPE.ERROR,
+                  I18n.t('Notification'),
+                  I18n.t('UploadImageFail'),
+                );
               }
             }
           }
@@ -165,7 +169,8 @@ const Profile = (props) => {
       );
     } else {
       props.hideLoading();
-      Alert.alert(
+      showAlert(
+        TYPE.ERROR,
         I18n.t('Notification'),
         I18n.t('Please_fill_in') + titles[index],
       );

src/Screens/Action/Deposit/ChooseMethod.js

@@ -6,6 +6,7 @@ import Item from './Item';
 import {getListMethod} from '../../../apis/Functions/Deposit';
 import {connect} from 'react-redux';
 import I18n from '../../../helper/i18/i18n';
+import {showAlert, TYPE} from '../../../components/DropdownAlert';
 const MethodPayView = (props) => {
   const [data, setData] = useState([]);
 
@@ -20,7 +21,7 @@ const MethodPayView = (props) => {
     if (res.data.code == 200 && res.data.data) {
       setData(res.data.data);
     } else {
-      Alert.alert(I18n.t('Notification'), I18n.t(''));
+      showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
     }
   };
 

src/Screens/Action/History/History.js

@@ -3,6 +3,7 @@ import {Alert} from 'react-native';
 import HistoryView from './HistoryView';
 import {getListTransaction} from '../../../apis/Functions/Widthdraw';
 import I18n from '../../../helper/i18/i18n';
+import {showAlert, TYPE} from '../../../components/DropdownAlert';
 
 const History = (props) => {
   const [selected, setSelected] = useState('ALL');
@@ -37,9 +38,8 @@ const History = (props) => {
     if ((res.data.code = 200 && res.data.data)) {
       setData(res.data.data);
       setTotalPage(res.data.meta.pages);
-      console.log(res.data.data);
     } else {
-      Alert.alert(I18n.t('Notification'), res.data.message);
+      showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
     }
   };
 

src/Screens/Action/Wallet/OTPWallet.js

@@ -26,6 +26,7 @@ import {widthDraw, getListWidthDraw} from '../../../apis/Functions/Widthdraw';
 import {showLoading, hideLoading} from '../../../actions/loadingAction';
 import {connect} from 'react-redux';
 import {TABNAVIGATOR} from '../../../routers/ScreenNames';
+import {showAlert, TYPE} from '../../../components/DropdownAlert';
 
 const CELL_COUNT = 4;
 
@@ -43,9 +44,9 @@ const ConfirmOTP = (propsa) => {
 
   const confirm = async () => {
     if (!value) {
-      Alert.alert(I18n.t('Notification'), I18n.t('EnterOTPRequest'));
+      showAlert(TYPE.WARN, I18n.t('Notification'), I18n.t('EnterOTPRequest'));
     } else if (value.length != 4) {
-      Alert.alert(I18n.t('Notification'), I18n.t('OTPInvalid'));
+      showAlert(TYPE.WARN, I18n.t('Notification'), I18n.t('OTPInvalid'));
     } else {
       propsa.showLoading();
 
@@ -81,18 +82,15 @@ const ConfirmOTP = (propsa) => {
         propsa.hideLoading();
         if (res.data.code == 200) {
           setTimeout(() => {
-            Alert.alert(I18n.t('Notification'), res.data.message);
+            showAlert(TYPE.SUCCESS, I18n.t('Notification'), res.data.message);
+
             navigate.navigate(TABNAVIGATOR);
           }, 500);
         } else {
-          setTimeout(() => {
-            Alert.alert(I18n.t('Notification'), res.data.message);
-          }, 500);
+          showAlert(TYPE.SUCCESS, I18n.t('Notification'), res.data.message);
         }
       } else {
-        setTimeout(() => {
-          Alert.alert(I18n.t('Notification'), res.data.message);
-        }, 500);
+        showAlert(TYPE.SUCCESS, I18n.t('Notification'), res.data.message);
       }
 
       propsa.hideLoading();

src/Screens/Action/Wallet/Tab/Success.js

@@ -5,6 +5,7 @@ import Item from './Item';
 import {getListTransaction} from '../../../../apis/Functions/Widthdraw';
 import AppText from '../../../../components/AppText';
 import I18n from '../../../../helper/i18/i18n';
+import {showAlert, TYPE} from '../../../../components/DropdownAlert';
 
 const Success = (props) => {
   const [page, setPage] = useState(1);
@@ -34,7 +35,7 @@ const Success = (props) => {
       setData(res.data.data);
       setTotalPage(res.data.meta.pages);
     } else {
-      Alert.alert(I18n.t('Notification'), res.data.message);
+      showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
     }
   };
 

src/Screens/Action/Wallet/Tab/Watting.js

@@ -7,6 +7,7 @@ import {useNavigation} from '@react-navigation/native';
 import AppText from '../../../../components/AppText';
 
 import I18n from '../../../../helper/i18/i18n';
+import {TYPE} from '../../../../components/DropdownAlert';
 
 const Watting = (props) => {
   const [page, setPage] = useState(1);
@@ -41,7 +42,7 @@ const Watting = (props) => {
       setData(res.data.data);
       setTotalPage(res.data.meta.pages);
     } else {
-      Alert.alert(I18n.t('Notification'), res.data.message);
+      showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
     }
   };
 

src/Screens/Action/Wallet/WalletDeposit.js

@@ -31,6 +31,7 @@ import I18n from '../../../helper/i18/i18n';
 import {OTPWALLET} from '../../../routers/ScreenNames';
 
 import {getOTPApi} from '../../../apis/Functions/users';
+import {showAlert, TYPE} from '../../../components/DropdownAlert';
 
 const {width} = Dimensions.get('window');
 
@@ -56,12 +57,11 @@ const WalletDeposit = (props) => {
       if (res.data.code == 200) {
         navigate.navigate(OTPWALLET, {type: 'DEPOSIT', amount, notes});
       } else {
-        setTimeout(() => {
-          Alert.alert(I18n.t('Notification'), res.data.message);
-        }, 500);
+        showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
       }
     } else {
-      Alert.alert(
+      showAlert(
+        TYPE.WARN,
         I18n.t('Notification'),
         I18n.t('Please_fill_in') + titles[index],
       );

src/Screens/Action/Wallet/WalletWithdraw.js

@@ -35,6 +35,7 @@ import TextMoney from '../../../components/Input/InputMoney';
 import I18n from '../../../helper/i18/i18n';
 import {getOTPApi} from '../../../apis/Functions/users';
 import {OTPWALLET} from '../../../routers/ScreenNames';
+import {showAlert, TYPE} from '../../../components/DropdownAlert';
 var radio_props = [
   {label: I18n.t('FromWallet'), value: 'WALLET'},
   {label: I18n.t('FromCQGAccount'), value: 'INVESTMENT'},
@@ -74,7 +75,7 @@ const WalletWithdraw = (props) => {
         setData(newList);
       }
     } else {
-      Alert.alert(I18n.t('Notification'), I18n.t('Can_not_get_data'));
+      showAlert(TYPE.ERROR, I18n.t('Notification'), I18n.t('Can_not_get_data'));
     }
   };
 
@@ -102,14 +103,13 @@ const WalletWithdraw = (props) => {
           notes,
         });
       } else {
-        setTimeout(() => {
-          Alert.alert(I18n.t('Notification'), res.data.message);
-        }, 500);
+        showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
       }
 
       props.hideLoading();
     } else {
-      Alert.alert(
+      showAlert(
+        TYPE.WARN,
         I18n.t('Notification'),
         I18n.t('Please_fill_in') + titles[index],
       );

src/Screens/Action/Withdraw/WithdrawView.js

@@ -6,6 +6,7 @@ import Item from './Item';
 import {getListWidthDraw} from '../../../apis/Functions/Widthdraw';
 import {connect} from 'react-redux';
 import I18n from '../../../helper/i18/i18n';
+import {showAlert, TYPE} from '../../../components/DropdownAlert';
 
 const WithdrawView = (props) => {
   const [data, setData] = useState([]);
@@ -21,7 +22,7 @@ const WithdrawView = (props) => {
     if (res.data.code == 200 && res.data.data) {
       setData(res.data.data);
     } else {
-      Alert.alert(I18n.t('Notification'), I18n.t('Can_not_get_data'));
+      showAlert(TYPE.ERROR, I18n.t('Notification'), I18n.t('Can_not_get_data'));
     }
   };
 

src/Screens/Authen/ConfirmEmail.js

@@ -17,6 +17,7 @@ import {CONFIRMOTP} from '../../routers/ScreenNames';
 import {getOTPApi} from '../../apis/Functions/users';
 import {showLoading, hideLoading} from '../../actions/loadingAction';
 import I18n from '../../helper/i18/i18n';
+import {TYPE} from '../../components/DropdownAlert';
 
 const ConfirmEmail = (props) => {
   const [value, setValue] = useState('');
@@ -35,12 +36,14 @@ const ConfirmEmail = (props) => {
       if (res.data.code == 200) {
         navigate.navigate(CONFIRMOTP, {email: value});
       } else {
-        setTimeout(() => {
-          Alert.alert(I18n.t('Notification'), res.data.message);
-        }, 500);
+        showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
       }
     } else {
-      Alert.alert(I18n.t('Notification'), `${I18n.t('EnterEmailRequest')}!`);
+      showAlert(
+        TYPE.WARN,
+        I18n.t('Notification'),
+        `${I18n.t('EnterEmailRequest')}!`,
+      );
     }
   };
 

src/Screens/Authen/ConfirmOTP.js

@@ -26,6 +26,7 @@ import AppText from '../../components/AppText';
 
 import {showLoading, hideLoading} from '../../actions/loadingAction';
 import {connect} from 'react-redux';
+import {showAlert, TYPE} from '../../components/DropdownAlert';
 
 const CELL_COUNT = 4;
 
@@ -42,9 +43,9 @@ const ConfirmOTP = (propsa) => {
 
   const confirm = async () => {
     if (!value) {
-      Alert.alert(I18n.t('Notification'), I18n.t('EnterOTPRequest'));
+      showAlert(TYPE.WARN, I18n.t('Notification'), I18n.t('EnterOTPRequest'));
     } else if (value.length != 4) {
-      Alert.alert(I18n.t('Notification'), I18n.t('OTPInvalid'));
+      showAlert(TYPE.WARN, I18n.t('Notification'), I18n.t('OTPInvalid'));
     } else {
       propsa.showLoading();
       const res = await verifyOTPApi({
@@ -61,7 +62,7 @@ const ConfirmOTP = (propsa) => {
           email: propsa.route.params.email,
         });
       } else {
-        Alert.alert(I18n.t('Notification'), res.data.message);
+        showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
       }
     }
   };

src/Screens/Authen/Login.js

@@ -28,6 +28,7 @@ import {connect} from 'react-redux';
 import messaging from '@react-native-firebase/messaging';
 import I18n from '../../helper/i18/i18n';
 import AppText from '../../components/AppText';
+import {showAlert, TYPE} from '../../components/DropdownAlert';
 
 const Login = (props) => {
   const {navigation} = props;
@@ -90,12 +91,11 @@ const Login = (props) => {
           routes: [{name: TABNAVIGATOR}],
         });
       } else {
-        setTimeout(() => {
-          Alert.alert(I18n.t('Notification'), res.data.message);
-        }, 500);
+        showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
       }
     } else {
-      Alert.alert(
+      showAlert(
+        TYPE.WARN,
         I18n.t('Notification'),
         I18n.t('Please_fill_in') + titles[index],
       );

src/Screens/Authen/NewPassWord.js

@@ -19,6 +19,7 @@ import I18n from '../../helper/i18/i18n';
 
 import {showLoading, hideLoading} from '../../actions/loadingAction';
 import {connect} from 'react-redux';
+import {showAlert, TYPE} from '../../components/DropdownAlert';
 
 const NewPassword = (props) => {
   const [password, setPassword] = useState('');
@@ -29,7 +30,7 @@ const NewPassword = (props) => {
 
   const changePass = async () => {
     if (!password || !cfPassword) {
-      Alert.alert(I18n.t('EnterAllInfo'));
+      showAlert(TYPE.WARN, I18n.t('Notification'), I18n.t('EnterAllInfo'));
     } else {
       props.showLoading();
       const res = await forgotPasswordApi({
@@ -42,18 +43,17 @@ const NewPassword = (props) => {
       props.hideLoading();
 
       if (res.data.code == 200) {
-        await setTimeout(() => {
-          Alert.alert(I18n.t('Notification'), I18n.t('ChangePasswordSuccess'));
-          navigate.reset({
-            index: 1,
-            routes: [{name: AUTHEN}],
-          });
-        }, 500);
+        navigate.reset({
+          index: 1,
+          routes: [{name: AUTHEN}],
+        });
+        showAlert(
+          TYPE.SUCCESS,
+          I18n.t('Notification'),
+          I18n.t('ChangePasswordSuccess'),
+        );
       } else {
-        setTimeout(() => {
-          console.log('response', res.data);
-          Alert.alert(I18n.t('Notification'), res.data.message);
-        }, 500);
+        showAlert(TYPE.SUCCESS, I18n.t('Notification'), res.data.message);
       }
     }
   };

src/Screens/Authen/RegisterOTP.js

@@ -26,6 +26,7 @@ import AppText from '../../components/AppText';
 
 import {showLoading, hideLoading} from '../../actions/loadingAction';
 import {connect} from 'react-redux';
+import {showAlert, TYPE} from '../../components/DropdownAlert';
 
 const CELL_COUNT = 4;
 
@@ -42,9 +43,9 @@ const ConfirmOTP = (propsa) => {
 
   const confirm = async () => {
     if (!value) {
-      Alert.alert(I18n.t('Notification'), I18n.t('EnterOTPRequest'));
+      showAlert(TYPE.WARN, I18n.t('Notification'), I18n.t('EnterOTPRequest'));
     } else if (value.length != 4) {
-      Alert.alert(I18n.t('Notification'), I18n.t('OTPInvalid'));
+      showAlert(TYPE.WARN, I18n.t('Notification'), I18n.t('OTPInvalid'));
     } else {
       propsa.showLoading();
       const res = await verifyOTPApi({
@@ -83,22 +84,17 @@ const ConfirmOTP = (propsa) => {
         propsa.hideLoading();
 
         if (res.data.code == 200 && res.data.data) {
-          setTimeout(() => {
-            Alert.alert(
-              I18n.t('Notification'),
-              I18n.t('RegisterAccountSuccess'),
-            );
-            navigate.navigate('LOGIN');
-          }, 500);
+          showAlert(
+            TYPE.WARN,
+            I18n.t('Notification'),
+            I18n.t('RegisterAccountSuccess'),
+          );
+          navigate.navigate('LOGIN');
         } else {
-          setTimeout(() => {
-            Alert.alert(I18n.t('Notification'), res.data.message);
-          }, 500);
+          showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
         }
       } else {
-        setTimeout(() => {
-          Alert.alert(I18n.t('Notification'), res.data.message);
-        }, 500);
+        showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
       }
 
       propsa.hideLoading();

src/Screens/Authen/Registor.js

@@ -17,6 +17,7 @@ import {registorApi, getOTPApi} from '../../apis/Functions/users';
 import I18n from '../../helper/i18/i18n';
 import AppText from '../../components/AppText';
 import {REGISTEROTP} from '../../routers/ScreenNames';
+import {showAlert, TYPE} from '../../components/DropdownAlert';
 
 const Registor = (props) => {
   const {navigation} = props;
@@ -58,12 +59,11 @@ const Registor = (props) => {
           sponsor_id,
         });
       } else {
-        setTimeout(() => {
-          Alert.alert(I18n.t('Notification'), res.data.message);
-        }, 500);
+        showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
       }
     } else {
-      Alert.alert(
+      showAlert(
+        TYPE.ERROR,
         I18n.t('Notification'),
         I18n.t('Please_fill_in') + titles[index],
       );

src/Screens/Feedback/Feedback.js

@@ -7,6 +7,7 @@ import {sendFeedBack} from '../../apis/Functions/General';
 import {showLoading, hideLoading} from '../../actions/loadingAction';
 import I18n from '../../helper/i18/i18n';
 import {useNavigation} from '@react-navigation/native';
+import {showAlert, TYPE} from '../../components/DropdownAlert';
 
 const Feedback = (props) => {
   const naviation = useNavigation();
@@ -25,18 +26,12 @@ const Feedback = (props) => {
     if (res?.status == 200 && res.data) {
       if (res.data.code == 200) {
         naviation.goBack();
-        setTimeout(() => {
-          Alert.alert(I18n.t('Notification'), res.data.message);
-        }, 500);
+        showAlert(TYPE.SUCCESS, I18n.t('Notification'), res.data.message);
       } else {
-        setTimeout(() => {
-          Alert.alert(I18n.t('Notification'), res.data.message);
-        }, 500);
+        showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
       }
     } else {
-      setTimeout(() => {
-        Alert.alert(I18n.t('Notification'), 'upload fail');
-      }, 500);
+      showAlert(TYPE.ERROR, I18n.t('Notification'), 'upload fail');
     }
   };
   const createFormData = (photo, body) => {

src/Screens/Home/Home.js

@@ -10,157 +10,184 @@ import HomeView from './HomeView';
 import {getListCategoryProduct} from '../../apis/Functions/Transaction';
 import {hideLoading, showLoading} from '../../actions/loadingAction';
 import _ from 'lodash';
+import {showAlert, TYPE} from '../../components/DropdownAlert/index';
 
 const Home = (props) => {
-    const [data, setData] = useState({total_deposit: 0, total_withdraw: 0});
-    const [dataPrice, setDataPrice] = useState([]);
-    const [dataPriceFilter, setDataPriceFilter] = useState([]);
-    const [listImage, setListImage] = useState([]);
-    const [filters, setFilters] = useState([]);
-    const [filterId, setFilterId] = useState(null);
-    const [isSortName, setIsSortName] = useState(null);
-    const [isSortPercent, setIsSortPercent] = useState(null);
-    const [isSortPriceOpenClose, setIsSortPriceOpenClose] = useState(null);
-    const [isSortPriceHighLow, setIsSortPriceHighLow] = useState(null);
-    const SORT_TYPE = {
-        DESC: 'DESC',
-        ASC: 'ASC'
-    }
-    useEffect(() => {
-        getData();
-        initSocket();
-    }, []);
-    useEffect(() => {
-        const newList = filterId == -1 ? [...dataPrice] : _.filter([...dataPrice], item => item.category_id == filterId);
-        setDataPriceFilter(newList);
-    }, [dataPrice]);
-
-    const initSocket = () => {
-        let io = require('socket.io-client');
-        let socket = io.connect('http://222.252.22.174:8087', {
-            transports: ['websocket'],
-            jsonp: false,
-            reconnect: true,
-        });
-        socket.on('response-update-price', (message) => {
-            receivedMessage(message);
-        });
-    };
-
-    const receivedMessage = (message) => {
-        setDataPrice(message);
-    };
-
-    const getData = async () => {
-        props.showLoading();
-        const res = await getTransaction({});
-        if (res.data.code == 200 && res.data.data) {
-            setData(res.data.data);
-        } else {
-            Alert.alert(I18n.t('Notification'), I18n.t('Can_not_get_data'));
-        }
+  const [data, setData] = useState({total_deposit: 0, total_withdraw: 0});
+  const [dataPrice, setDataPrice] = useState([]);
+  const [dataPriceFilter, setDataPriceFilter] = useState([]);
+  const [listImage, setListImage] = useState([]);
+  const [filters, setFilters] = useState([]);
+  const [filterId, setFilterId] = useState(null);
+  const [isSortName, setIsSortName] = useState(null);
+  const [isSortPercent, setIsSortPercent] = useState(null);
+  const [isSortPriceOpenClose, setIsSortPriceOpenClose] = useState(null);
+  const [isSortPriceHighLow, setIsSortPriceHighLow] = useState(null);
+  const SORT_TYPE = {
+    DESC: 'DESC',
+    ASC: 'ASC',
+  };
+  useEffect(() => {
+    getData();
+    initSocket();
+  }, []);
+  useEffect(() => {
+    const newList =
+      filterId == -1
+        ? [...dataPrice]
+        : _.filter([...dataPrice], (item) => item.category_id == filterId);
+    setDataPriceFilter(newList);
+  }, [dataPrice]);
 
-        const res1 = await getImagesHome({});
-        if (res1.data.code == 200 && res1.data.data) {
-            setListImage(res1.data.data);
-        } else {
-            Alert.alert(I18n.t('Notification'), I18n.t('Can_not_get_data'));
-        }
-        const resCategoryProduct = await getListCategoryProduct({
-            keyword: '',
-            platform: Platform.OS,
-            page_size: 20,
-            page_index: 1,
-            type: 'PRODUCT',
-        });
-        console.log(resCategoryProduct);
-        if ((resCategoryProduct.data.code = 200 && resCategoryProduct.data.data)) {
-            let data = [];
-            data.push({id: -1, name: 'All'});
-            setFilters(data.concat([...resCategoryProduct.data.data]));
-        } else {
-            Alert.alert(I18n.t('Notification'), res.data.message);
-        }
-        const resPriceHome = await getPriceTable({});
-        if (resPriceHome.data.code == 200 && resPriceHome.data.data) {
-            setDataPrice(resPriceHome.data.data);
-            setDataPriceFilter(resPriceHome.data.data);
-        } else {
-            Alert.alert(I18n.t('Notification'), I18n.t('Can_not_get_data'));
-        }
-        props.hideLoading();
-        console.log('filterId', filterId);
-    };
+  const initSocket = () => {
+    let io = require('socket.io-client');
+    let socket = io.connect('http://222.252.22.174:8087', {
+      transports: ['websocket'],
+      jsonp: false,
+      reconnect: true,
+    });
+    socket.on('response-update-price', (message) => {
+      receivedMessage(message);
+    });
+  };
 
-    const changeFilter = (id) => {
-        setFilterId(id);
-        const newList = id == -1 ? [...dataPrice] : _.filter([...dataPrice], item => item.category_id == id);
-        setDataPriceFilter(newList);
-        console.log(id, newList);
-    };
+  const receivedMessage = (message) => {
+    setDataPrice(message);
+  };
 
-    const onSortByName = () => {
-        let type = 'ASC'
-        if(!isSortName || isSortName == SORT_TYPE.ASC) type = SORT_TYPE.DESC
-        let newData = type == SORT_TYPE.ASC ? [...dataPriceFilter].sort((a, b) => a.name > b.name ? 1 : -1 )
-            : [...dataPriceFilter].sort((a, b) => a.name < b.name ? 1 : -1 )
-        setDataPriceFilter(newData)
-        setIsSortPriceOpenClose(null)
-        setIsSortName(type)
-        setIsSortPercent(null)
-        setIsSortPriceHighLow(null)
+  const getData = async () => {
+    props.showLoading();
+    const res = await getTransaction({});
+    if (res.data.code == 200 && res.data.data) {
+      setData(res.data.data);
+    } else {
+      showAlert(TYPE.ERROR, I18n.t('Notification'), I18n.t('Can_not_get_data'));
     }
-    const onSortByPercent = () => {
-        let type = 'ASC'
-        if(!isSortPercent || isSortPercent == SORT_TYPE.ASC) type = SORT_TYPE.DESC
-        let newData = type == SORT_TYPE.ASC ? [...dataPriceFilter].sort((a, b) => a.change > b.change ? 1 : -1 )
-            : [...dataPriceFilter].sort((a, b) => a.change < b.change ? 1 : -1 )
-        setDataPriceFilter(newData)
-        setIsSortPriceOpenClose(null)
-        setIsSortName(null)
-        setIsSortPercent(type)
-        setIsSortPriceHighLow(null)
+
+    const res1 = await getImagesHome({});
+    if (res1.data.code == 200 && res1.data.data) {
+      setListImage(res1.data.data);
+    } else {
+      showAlert(TYPE.ERROR, I18n.t('Notification'), I18n.t('Can_not_get_data'));
     }
-    const onSortByPriceOpenClose = () => {
-        let type = 'ASC'
-        if(!isSortPriceOpenClose || isSortPriceOpenClose == SORT_TYPE.ASC) type = SORT_TYPE.DESC
-        let newData = type == SORT_TYPE.ASC ? [...dataPriceFilter].sort((a, b) => a.open_price > b.open_price ? 1 : -1 )
-            : [...dataPriceFilter].sort((a, b) => a.open_price < b.open_price ? 1 : -1 )
-        setDataPriceFilter(newData)
-        setIsSortPriceOpenClose(type)
-        setIsSortName(null)
-        setIsSortPercent(null)
-        setIsSortPriceHighLow(null)
+    const resCategoryProduct = await getListCategoryProduct({
+      keyword: '',
+      platform: Platform.OS,
+      page_size: 20,
+      page_index: 1,
+      type: 'PRODUCT',
+    });
+    console.log(resCategoryProduct);
+    if ((resCategoryProduct.data.code = 200 && resCategoryProduct.data.data)) {
+      let data = [];
+      data.push({id: -1, name: 'All'});
+      setFilters(data.concat([...resCategoryProduct.data.data]));
+    } else {
+      showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
     }
-    const onSortByPriceHighLow = () => {
-        let type = 'ASC'
-        if(!isSortPriceHighLow || isSortPriceHighLow == SORT_TYPE.ASC) type = SORT_TYPE.DESC
-        let newData = type == SORT_TYPE.ASC ? [...dataPriceFilter].sort((a, b) => a.high_price > b.high_price ? 1 : -1 )
-            : [...dataPriceFilter].sort((a, b) => a.high_price < b.high_price ? 1 : -1 )
-        setDataPriceFilter(newData)
-        setIsSortPriceOpenClose(null)
-        setIsSortName(null)
-        setIsSortPercent(null)
-        setIsSortPriceHighLow(type)
+    const resPriceHome = await getPriceTable({});
+    if (resPriceHome.data.code == 200 && resPriceHome.data.data) {
+      setDataPrice(resPriceHome.data.data);
+      setDataPriceFilter(resPriceHome.data.data);
+    } else {
+      showAlert(TYPE.ERROR, I18n.t('Notification'), I18n.t('Can_not_get_data'));
     }
+    props.hideLoading();
+    console.log('filterId', filterId);
+  };
+
+  const changeFilter = (id) => {
+    setFilterId(id);
+    const newList =
+      id == -1
+        ? [...dataPrice]
+        : _.filter([...dataPrice], (item) => item.category_id == id);
+    setDataPriceFilter(newList);
+    console.log(id, newList);
+  };
+
+  const onSortByName = () => {
+    let type = 'ASC';
+    if (!isSortName || isSortName == SORT_TYPE.ASC) type = SORT_TYPE.DESC;
+    let newData =
+      type == SORT_TYPE.ASC
+        ? [...dataPriceFilter].sort((a, b) => (a.name > b.name ? 1 : -1))
+        : [...dataPriceFilter].sort((a, b) => (a.name < b.name ? 1 : -1));
+    setDataPriceFilter(newData);
+    setIsSortPriceOpenClose(null);
+    setIsSortName(type);
+    setIsSortPercent(null);
+    setIsSortPriceHighLow(null);
+  };
+  const onSortByPercent = () => {
+    let type = 'ASC';
+    if (!isSortPercent || isSortPercent == SORT_TYPE.ASC) type = SORT_TYPE.DESC;
+    let newData =
+      type == SORT_TYPE.ASC
+        ? [...dataPriceFilter].sort((a, b) => (a.change > b.change ? 1 : -1))
+        : [...dataPriceFilter].sort((a, b) => (a.change < b.change ? 1 : -1));
+    setDataPriceFilter(newData);
+    setIsSortPriceOpenClose(null);
+    setIsSortName(null);
+    setIsSortPercent(type);
+    setIsSortPriceHighLow(null);
+  };
+  const onSortByPriceOpenClose = () => {
+    let type = 'ASC';
+    if (!isSortPriceOpenClose || isSortPriceOpenClose == SORT_TYPE.ASC)
+      type = SORT_TYPE.DESC;
+    let newData =
+      type == SORT_TYPE.ASC
+        ? [...dataPriceFilter].sort((a, b) =>
+            a.open_price > b.open_price ? 1 : -1,
+          )
+        : [...dataPriceFilter].sort((a, b) =>
+            a.open_price < b.open_price ? 1 : -1,
+          );
+    setDataPriceFilter(newData);
+    setIsSortPriceOpenClose(type);
+    setIsSortName(null);
+    setIsSortPercent(null);
+    setIsSortPriceHighLow(null);
+  };
+  const onSortByPriceHighLow = () => {
+    let type = 'ASC';
+    if (!isSortPriceHighLow || isSortPriceHighLow == SORT_TYPE.ASC)
+      type = SORT_TYPE.DESC;
+    let newData =
+      type == SORT_TYPE.ASC
+        ? [...dataPriceFilter].sort((a, b) =>
+            a.high_price > b.high_price ? 1 : -1,
+          )
+        : [...dataPriceFilter].sort((a, b) =>
+            a.high_price < b.high_price ? 1 : -1,
+          );
+    setDataPriceFilter(newData);
+    setIsSortPriceOpenClose(null);
+    setIsSortName(null);
+    setIsSortPercent(null);
+    setIsSortPriceHighLow(type);
+  };
 
-    return <HomeView
-        data={data}
-        dataPrice={dataPriceFilter}
-        listImage={listImage}
-        filterId={filterId}
-        filters={filters}
-        setFilterId={changeFilter}
-        onSortByName={onSortByName}
-        onSortByPercent={onSortByPercent}
-        onSortByPriceOpenClose={onSortByPriceOpenClose}
-        onSortByPriceHighLow={onSortByPriceHighLow}
-    />;
+  return (
+    <HomeView
+      data={data}
+      dataPrice={dataPriceFilter}
+      listImage={listImage}
+      filterId={filterId}
+      filters={filters}
+      setFilterId={changeFilter}
+      onSortByName={onSortByName}
+      onSortByPercent={onSortByPercent}
+      onSortByPriceOpenClose={onSortByPriceOpenClose}
+      onSortByPriceHighLow={onSortByPriceHighLow}
+    />
+  );
 };
 
 const mapStateToProps = (state) => {
-    return {
-        user: state.userReducer,
-    };
+  return {
+    user: state.userReducer,
+  };
 };
 export default connect(mapStateToProps, {showLoading, hideLoading})(Home);

src/Screens/Menu/Payments/Payments.js

@@ -5,6 +5,7 @@ import Item from './Item';
 import AppText from '../../../components/AppText';
 import {getListTransaction} from '../../../apis/Functions/Widthdraw';
 import I18n from '../../../helper/i18/i18n';
+import {showAlert, TYPE} from '../../../components/DropdownAlert';
 
 const Payments = (props) => {
   const [page, setPage] = useState(1);
@@ -31,9 +32,8 @@ const Payments = (props) => {
     if ((res.data.code = 200 && res.data.data)) {
       setData(res.data.data);
       setTotalPage(res.data.meta.pages);
-      console.log(res.data.data);
     } else {
-      Alert.alert(I18n.t('Notification'), res.data.message);
+      showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
     }
   };
 

src/Screens/Menu/Profile/Tab/GeneralInfor.js

@@ -28,13 +28,17 @@ import {
   checkFormatArray,
 } from '../../../../Config/Functions';
 import {updateInforUser} from '../../../../apis/Functions/users';
+import {showAlert, TYPE} from '../../../../components/DropdownAlert';
 
 const GeneralInfor = (props) => {
   const [phone, setPhone] = useState(props.user.phone);
   const [address, setAddress] = useState(props.user.address);
 
   const onClick = async () => {
-    const titles = [I18n.t('Phone').toLowerCase(), I18n.t('Address').toLowerCase()];
+    const titles = [
+      I18n.t('Phone').toLowerCase(),
+      I18n.t('Address').toLowerCase(),
+    ];
     const index = checkFormatArray([phone, address]);
     if (index === true) {
       props.showLoading();
@@ -46,18 +50,15 @@ const GeneralInfor = (props) => {
       });
       props.hideLoading();
       if (res.data.code == 200) {
-        setTimeout(() => {
-          props.saveUserToRedux(res.data.data);
-          Alert.alert(I18n.t('Notification'), res.data.message);
-          props.navigation.popToTop();
-        }, 500);
+        props.saveUserToRedux(res.data.data);
+        showAlert(TYPE.SUCCESS, I18n.t('Notification'), res.data.message);
+        props.navigation.popToTop();
       } else {
-        setTimeout(() => {
-          Alert.alert(I18n.t('Notification'), res.data.message);
-        }, 500);
+        showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
       }
     } else {
-      Alert.alert(
+      showAlert(
+        TYPE.ERROR,
         I18n.t('Notification'),
         I18n.t('Please_fill_in') + titles[index],
       );
@@ -136,8 +137,7 @@ const GeneralInfor = (props) => {
             <View style={{height: 40}} />
             <View style={{justifyContent: 'center', alignItems: 'center'}}>
               <TouchableOpacity onPress={onClick} style={styles.btn}>
-                <AppText i18nKey={'Update'} style={styles.txtBtn}>
-                </AppText>
+                <AppText i18nKey={'Update'} style={styles.txtBtn}></AppText>
               </TouchableOpacity>
             </View>
           </View>

src/Screens/MethodPay/AddMethod.js

@@ -26,6 +26,7 @@ import {showLoading, hideLoading} from '../../actions/loadingAction';
 import {useNavigation} from '@react-navigation/native';
 import I18n from '../../helper/i18/i18n';
 import SelectBankModal from './SelectBankModal';
+import {showAlert, TYPE} from '../../components/DropdownAlert';
 
 const {width} = Dimensions.get('window');
 
@@ -49,7 +50,7 @@ const AddMethodPay = (props) => {
     if (res.data.code == 200 && res.data.data) {
       setData(res.data.data);
     } else {
-      Alert.alert(I18n.t('Notification'), I18n.t('Can_not_get_data'));
+      showAlert(TYPE.ERROR, I18n.t('Notification'), I18n.t('Can_not_get_data'));
     }
   };
 
@@ -77,17 +78,14 @@ const AddMethodPay = (props) => {
       });
       props.hideLoading();
       if (res.data.code == 200) {
-        setTimeout(() => {
-          Alert.alert(I18n.t('Notification'), res.data.message);
-          navigate.goBack();
-        }, 500);
+        showAlert(TYPE.SUCCESS, I18n.t('Notification'), res.data.message);
+        navigate.goBack();
       } else {
-        setTimeout(() => {
-          Alert.alert(I18n.t('Notification'), res.data.message);
-        }, 500);
+        showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
       }
     } else {
-      Alert.alert(
+      showAlert(
+        TYPE.ERROR,
         I18n.t('Notification'),
         I18n.t('Please_fill_in') + titles[index],
       );

src/Screens/MethodPay/MethodPay.js

@@ -4,6 +4,7 @@ import MethodPayView from './MethodPayView';
 import {getListWidthDraw} from '../../apis/Functions/Widthdraw';
 import {useNavigation} from '@react-navigation/native';
 import I18n from '../../helper/i18/i18n';
+import {showAlert, TYPE} from '../../components/DropdownAlert';
 
 const MethodPay = (props) => {
   const [data, setData] = useState([]);
@@ -31,7 +32,7 @@ const MethodPay = (props) => {
     if (res.data.code == 200 && res.data.data) {
       setData(res.data.data);
     } else {
-      Alert.alert(I18n.t('Notification'), I18n.t('Can_not_get_data'));
+      showAlert(TYPE.ERROR, I18n.t('Notification'), I18n.t('Can_not_get_data'));
     }
   };
 

src/Screens/MethodPay/MethodPayDetail.js

 import React, {useState, useEffect} from 'react';
 import {
-    View,
-    Text,
-    StyleSheet,
-    FlatList,
-    Dimensions,
-    TouchableOpacity,
-    Alert,
-    KeyboardAvoidingView,
-    TouchableWithoutFeedback,
-    Keyboard,
-    Platform,
+  View,
+  Text,
+  StyleSheet,
+  FlatList,
+  Dimensions,
+  TouchableOpacity,
+  Alert,
+  KeyboardAvoidingView,
+  TouchableWithoutFeedback,
+  Keyboard,
+  Platform,
 } from 'react-native';
 import {connect} from 'react-redux';
 import R from '../../assets/R';
@@ -22,198 +22,193 @@ import {getFontXD, WIDTHXD, checkFormatArray} from '../../Config/Functions';
 import TextField from '../../components/Input/TextField';
 import PickerItem from '../../components/Picker/PickerItem';
 import {
-    deleteMethodBank,
-    addMethodBank,
-    updateMethodBank,
+  deleteMethodBank,
+  addMethodBank,
+  updateMethodBank,
 } from '../../apis/Functions/Widthdraw';
 import {showLoading, hideLoading} from '../../actions/loadingAction';
 import {useNavigation} from '@react-navigation/native';
 import BankInfor from '../../components/BankInfor';
 import AppText from '../../components/AppText';
+import {TYPE} from '../../components/DropdownAlert';
 
 const {width} = Dimensions.get('window');
 
 const MethodPayDetail = (props) => {
-    const [data, setData] = useState([]);
-    const {params} = props.route;
+  const [data, setData] = useState([]);
+  const {params} = props.route;
 
-    const [disable, setDisable] = useState(true);
-    const navigate = useNavigation();
-    const [branch_name, setBankName] = useState(params.branch_name);
-    const [account_name, setAccountName] = useState(params.account_name);
-    const [account_no, setAccountNo] = useState(params.account_no);
+  const [disable, setDisable] = useState(true);
+  const navigate = useNavigation();
+  const [branch_name, setBankName] = useState(params.branch_name);
+  const [account_name, setAccountName] = useState(params.account_name);
+  const [account_no, setAccountNo] = useState(params.account_no);
 
-    const onUpdate = async () => {
-        const titles = [
-            I18n.t('Branch').toLowerCase(),
-            I18n.t('OwnerAccount2').toLowerCase(),
-            I18n.t('AccountNumber').toLowerCase()
-        ];
-        const index = checkFormatArray([branch_name, account_name, account_no]);
-        if (index === true) {
-            if (
-                branch_name != params.branch_name ||
-                account_name != params.account_name ||
-                account_no != params.account_no
-            ) {
-                props.showLoading();
-                const res = await updateMethodBank({
-                    platform: Platform.OS,
-                    id: params.id,
-                    branch_name,
-                    account_name,
-                    account_no,
-                });
-                props.hideLoading();
-                if (res.data.code == 200) {
-                    setTimeout(() => {
-                        Alert.alert(I18n.t('Notification'), res.data.message);
-                        navigate.goBack();
-                    }, 500);
-                } else {
-                    setTimeout(() => {
-                        Alert.alert(I18n.t('Notification'), res.data.message);
-                    }, 500);
-                }
-            } else {
-                Alert.alert(I18n.t('Notification'), I18n.t('NothingChange'));
-            }
-        } else {
-            Alert.alert(
-                I18n.t('Notification'),
-                I18n.t('Please_fill_in') + titles[index],
-            );
-        }
-    };
-
-    const onRemove = async () => {
+  const onUpdate = async () => {
+    const titles = [
+      I18n.t('Branch').toLowerCase(),
+      I18n.t('OwnerAccount2').toLowerCase(),
+      I18n.t('AccountNumber').toLowerCase(),
+    ];
+    const index = checkFormatArray([branch_name, account_name, account_no]);
+    if (index === true) {
+      if (
+        branch_name != params.branch_name ||
+        account_name != params.account_name ||
+        account_no != params.account_no
+      ) {
         props.showLoading();
-        const res = await deleteMethodBank({
-            platform: Platform.OS,
-            id: params.id,
+        const res = await updateMethodBank({
+          platform: Platform.OS,
+          id: params.id,
+          branch_name,
+          account_name,
+          account_no,
         });
         props.hideLoading();
         if (res.data.code == 200) {
-            setTimeout(() => {
-                Alert.alert(I18n.t('Notification'), res.data.message);
-                navigate.goBack();
-            }, 500);
+          showAlert(TYPE.SUCCESS, I18n.t('Notification'), res.data.message);
+
+          navigate.goBack();
         } else {
-            setTimeout(() => {
-                Alert.alert(I18n.t('Notification'), res.data.message);
-            }, 500);
+          showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
         }
-    };
+      } else {
+        showAlert(TYPE.WARN, I18n.t('Notification'), I18n.t('NothingChange'));
+      }
+    } else {
+      showAlert(
+        TYPE.WARN,
+        I18n.t('Notification'),
+        I18n.t('Please_fill_in') + titles[index],
+      );
+    }
+  };
+
+  const onRemove = async () => {
+    props.showLoading();
+    const res = await deleteMethodBank({
+      platform: Platform.OS,
+      id: params.id,
+    });
+    props.hideLoading();
+    if (res.data.code == 200) {
+      showAlert(TYPE.SUCCESS, I18n.t('Notification'), res.data.message);
+      navigate.goBack();
+    } else {
+      showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
+    }
+  };
 
-    return (
-        <KeyboardAvoidingView
-            behavior={Platform.Os === 'ios' ? 'padding' : 'height'}
-            style={{flex: 1}}
-            keyboardVerticalOffset={-50}>
-            <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
-                <View style={{flex: 1}}>
-                    <HeaderBack title={'DetailMethod'}/>
-                    <View style={{flex: 1}}>
-                        <View style={styles.container}>
-                            <BankInfor
-                                linkImg={params.bank.logo}
-                                title={I18n.t('SelectBank')}
-                                value={params.bank.name}
-                            />
-                            <TextField
-                                onChangeText={(val) => setBankName(val)}
-                                title={I18n.t('Branch')}
-                                value={branch_name}
-                            />
+  return (
+    <KeyboardAvoidingView
+      behavior={Platform.Os === 'ios' ? 'padding' : 'height'}
+      style={{flex: 1}}
+      keyboardVerticalOffset={-50}>
+      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+        <View style={{flex: 1}}>
+          <HeaderBack title={'DetailMethod'} />
+          <View style={{flex: 1}}>
+            <View style={styles.container}>
+              <BankInfor
+                linkImg={params.bank.logo}
+                title={I18n.t('SelectBank')}
+                value={params.bank.name}
+              />
+              <TextField
+                onChangeText={(val) => setBankName(val)}
+                title={I18n.t('Branch')}
+                value={branch_name}
+              />
 
-                            <TextField
-                                onChangeText={(val) => setAccountName(val)}
-                                title={I18n.t('OwnerAccountName')}
-                                value={account_name}
-                            />
-                            <TextField
-                                onChangeText={(val) => setAccountNo(val)}
-                                title={I18n.t('AccountNumber')}
-                                isNumber={true}
-                                value={account_no}
-                            />
-                        </View>
-                    </View>
-                    <View style={styles.footer}>
-                        <TouchableOpacity onPress={onUpdate} style={styles.btnLeft}>
-                            <AppText style={styles.txtAdd} i18nKey={('Update')}/>
-                        </TouchableOpacity>
-                        <TouchableOpacity
-                            onPress={() => {
-                                Alert.alert(
-                                    `${I18n.t('Notification')}!`,
-                                    I18n.t('DeletePaymentMethodConfirm'),
-                                        [
-                                        {
-                                            text: I18n.t('Forbidden'),
-                                            style: 'cancel',
-                                        },
-                                            {text: I18n.t('Ok'), onPress: () => onRemove()},
-                                        ],
-                                );
-                            }}
-                            style={styles.btnRight}>
-                            <AppText style={styles.txtAdd} i18nKey={('Delete')}/>
-                        </TouchableOpacity>
-                    </View>
-                </View>
-            </TouchableWithoutFeedback>
-        </KeyboardAvoidingView>
-    );
+              <TextField
+                onChangeText={(val) => setAccountName(val)}
+                title={I18n.t('OwnerAccountName')}
+                value={account_name}
+              />
+              <TextField
+                onChangeText={(val) => setAccountNo(val)}
+                title={I18n.t('AccountNumber')}
+                isNumber={true}
+                value={account_no}
+              />
+            </View>
+          </View>
+          <View style={styles.footer}>
+            <TouchableOpacity onPress={onUpdate} style={styles.btnLeft}>
+              <AppText style={styles.txtAdd} i18nKey={'Update'} />
+            </TouchableOpacity>
+            <TouchableOpacity
+              onPress={() => {
+                Alert.alert(
+                  `${I18n.t('Notification')}!`,
+                  I18n.t('DeletePaymentMethodConfirm'),
+                  [
+                    {
+                      text: I18n.t('Forbidden'),
+                      style: 'cancel',
+                    },
+                    {text: I18n.t('Ok'), onPress: () => onRemove()},
+                  ],
+                );
+              }}
+              style={styles.btnRight}>
+              <AppText style={styles.txtAdd} i18nKey={'Delete'} />
+            </TouchableOpacity>
+          </View>
+        </View>
+      </TouchableWithoutFeedback>
+    </KeyboardAvoidingView>
+  );
 };
 
 const styles = StyleSheet.create({
-    container: {
-        paddingHorizontal: 20,
-        paddingTop: 10,
-    },
-    footer: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        marginBottom: 10,
-        paddingHorizontal: 20,
-    },
-    btnLeft: {
-        width: 150,
-        height: 40,
-        justifyContent: 'center',
-        alignItems: 'center',
-        backgroundColor: R.colors.main,
-        borderRadius: 5,
-    },
-    btnRight: {
-        width: 150,
-        height: 40,
-        justifyContent: 'center',
-        alignItems: 'center',
-        backgroundColor: R.colors.main,
-        borderRadius: 5,
-    },
-    txtAdd: {
-        color: R.colors.white,
-        fontSize: getFontXD(46),
-        textTransform: 'uppercase',
-        fontWeight: 'bold',
-    },
-    txtTitle: {
-        fontSize: getFontXD(42),
-        color: R.colors.color777,
-        marginBottom: 5,
-    },
+  container: {
+    paddingHorizontal: 20,
+    paddingTop: 10,
+  },
+  footer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: 10,
+    paddingHorizontal: 20,
+  },
+  btnLeft: {
+    width: 150,
+    height: 40,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: R.colors.main,
+    borderRadius: 5,
+  },
+  btnRight: {
+    width: 150,
+    height: 40,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: R.colors.main,
+    borderRadius: 5,
+  },
+  txtAdd: {
+    color: R.colors.white,
+    fontSize: getFontXD(46),
+    textTransform: 'uppercase',
+    fontWeight: 'bold',
+  },
+  txtTitle: {
+    fontSize: getFontXD(42),
+    color: R.colors.color777,
+    marginBottom: 5,
+  },
 });
 
 const mapStateToProps = (state) => {
-    return {
-        user: state.userReducer,
-    };
+  return {
+    user: state.userReducer,
+  };
 };
 export default connect(mapStateToProps, {
-    showLoading,
-    hideLoading,
+  showLoading,
+  hideLoading,
 })(MethodPayDetail);

src/Screens/NewFeed/Calendar/Calendar.js

 import React, {Component, useState, useEffect, useRef} from 'react';
 import {View, Text, Platform, FlatList} from 'react-native';
 import {getListCalendar} from '../../../apis/Functions/NewFeed';
+import {showAlert, TYPE} from '../../../components/DropdownAlert';
 import {convertTimeApi} from '../../../Config/Functions';
 import I18n from '../../../helper/i18/i18n';
 
@@ -31,7 +32,7 @@ const NewFeed = (props) => {
     if (res.data.code == 200 && res.data.data) {
       setData(res.data.data);
     } else {
-      Alert.alert(I18n.t('Notification'), I18n.t('Can_not_get_data'));
+      showAlert(TYPE.ERROR, I18n.t('Notification'), I18n.t('Can_not_get_data'));
     }
   };
 

src/Screens/NewFeed/Media/Media.js

@@ -4,6 +4,7 @@ import I18n from '../../../helper/i18/i18n';
 
 import MediaView from './MediaView';
 import {getListMedia} from '../../../apis/Functions/NewFeed';
+import {showAlert, TYPE} from '../../../components/DropdownAlert';
 
 const Media = (props) => {
   const [data, setData] = useState([]);
@@ -24,7 +25,7 @@ const Media = (props) => {
         setMediaHot(res.data.data[0].data[0]);
       setData(res.data.data);
     } else {
-      Alert.alert(I18n.t('Notification'), I18n.t('Can_not_get_data'));
+      showAlert(TYPE.ERROR, I18n.t('Notification'), I18n.t('Can_not_get_data'));
     }
   };
 

src/Screens/NewFeed/Media/MediaDetail.js

@@ -6,6 +6,7 @@ import {
   ImageBackground,
   TouchableOpacity,
   FlatList,
+  Alert,
 } from 'react-native';
 import YouTube from 'react-native-youtube';
 import R from '../../../assets/R';
@@ -17,6 +18,7 @@ import {MEDIADETAIL} from '../../../routers/ScreenNames';
 import {getDetailMedia} from '../../../apis/Functions/NewFeed';
 import I18n from '../../../helper/i18/i18n';
 import AppText from '../../../components/AppText';
+import {showAlert, TYPE} from '../../../components/DropdownAlert';
 
 const Item = (props) => {
   const navigate = useNavigation();
@@ -64,7 +66,7 @@ const MediaDetail = (props) => {
     if (res.data.code == 200 && res.data.data) {
       setData(res.data.data);
     } else {
-      Alert.alert(I18n.t('Notification'), I18n.t('Can_not_get_data'));
+      showAlert(TYPE.ERROR, I18n.t('Notification'), I18n.t('Can_not_get_data'));
     }
   };
   return (
@@ -83,7 +85,7 @@ const MediaDetail = (props) => {
             <Text style={styles.txtTitle}>{data.title}</Text>
           </View>
           <View style={styles.body}>
-            <AppText style={styles.txtBig} i18nKey={('TopVideo')}/>
+            <AppText style={styles.txtBig} i18nKey={'TopVideo'} />
             <FlatList
               showsVerticalScrollIndicator={false}
               data={data.related_videos}

src/Screens/NewFeed/Tab1/Tab1.js

@@ -15,6 +15,7 @@ import Item from './item';
 import {getListNew, getListCategoryNew} from '../../../apis/Functions/NewFeed';
 import I18n from '../../../helper/i18/i18n';
 import AppText from '../../../components/AppText';
+import {showAlert, TYPE} from '../../../components/DropdownAlert';
 
 const NewFeed = (props) => {
   const [selected, setSelected] = useState('');
@@ -35,7 +36,7 @@ const NewFeed = (props) => {
       setFillters(res.data.data);
       console.log(res.data.data);
     } else {
-      Alert.alert(I18n.t('Notification'), res.data.message);
+      showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
     }
   };
 
@@ -62,7 +63,7 @@ const NewFeed = (props) => {
       setData(res.data.data);
       setTotalPage(res.data.meta.pages);
     } else {
-      Alert.alert(I18n.t('Notification'), res.data.message);
+      showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
     }
     setisRefresh(false);
   };

src/Screens/Notification/Notification.js

@@ -2,6 +2,7 @@ import React, {useState, useEffect} from 'react';
 import {getListNotification} from '../../apis/Functions/users';
 import NotificationView from './NotificaitonView';
 import I18n from '../../helper/i18/i18n';
+import {showAlert, TYPE} from '../../components/DropdownAlert';
 const Notifcation = (props) => {
   const [selected, setSelected] = useState('');
   const [page, setPage] = useState(1);
@@ -29,7 +30,7 @@ const Notifcation = (props) => {
       setData(res.data.data);
       setTotalPage(res.data.meta.pages);
     } else {
-      Alert.alert(I18n.t('Notification'), res.data.message);
+      showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
     }
   };
 

src/Screens/Setting/Setting.js

@@ -6,6 +6,7 @@ import {updateLangugeApi} from '../../apis/Functions/users';
 import I18n from '../../helper/i18/i18n';
 import {connect} from 'react-redux';
 import {showLoading, hideLoading} from '../../actions/loadingAction';
+import {showAlert, TYPE} from '../../components/DropdownAlert';
 
 const Setting = (props) => {
   const convertKeyLanguage = (key) => {
@@ -21,13 +22,9 @@ const Setting = (props) => {
     });
     props.hideLoading();
     if (res.data.code == 200) {
-      setTimeout(() => {
-        Alert.alert(I18n.t('Notification'), res.data.message);
-      }, 500);
+      showAlert(TYPE.SUCCESS, I18n.t('Notification'), res.data.message);
     } else {
-      setTimeout(() => {
-        Alert.alert(I18n.t('Notification'), res.data.message);
-      }, 500);
+      showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
     }
   };
 

src/Screens/Transaction/DueDate/DueDate.js

@@ -2,9 +2,13 @@ import React, {useState, useEffect} from 'react';
 import {getListNotification} from '../../../apis/Functions/users';
 import DueDateView from './DueDateView';
 import I18n from '../../../helper/i18/i18n';
-import {getListCategoryProduct, getTransactionListByCategory} from '../../../apis/Functions/Transaction';
+import {
+  getListCategoryProduct,
+  getTransactionListByCategory,
+} from '../../../apis/Functions/Transaction';
 import {Alert, Platform} from 'react-native';
 import PriceListView from '../PriceList/PriceListView';
+import {showAlert, TYPE} from '../../../components/DropdownAlert';
 
 const DueDate = (props) => {
   const [page, setPage] = useState(1);
@@ -18,7 +22,7 @@ const DueDate = (props) => {
     getCategoryData();
   }, []);
   useEffect(() => {
-    setData([])
+    setData([]);
     getData();
   }, [filterId]);
 
@@ -36,7 +40,7 @@ const DueDate = (props) => {
       data.push({id: -1, name: 'All'});
       setFilters(data.concat([...res.data.data]));
     } else {
-      Alert.alert(I18n.t('Notification'), res.data.message);
+      showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
     }
   };
 
@@ -53,7 +57,7 @@ const DueDate = (props) => {
       platform: Platform.OS,
       page_size: 10,
       page_index: 1,
-      type:'EXPIRY_DATE',
+      type: 'EXPIRY_DATE',
       category_id: filterId,
     });
     setIsRefresh(false);
@@ -62,7 +66,7 @@ const DueDate = (props) => {
       setData(res.data.data);
       setTotalPage(res.data.meta.pages);
     } else {
-      Alert.alert(I18n.t('Notification'), res.data.message);
+      showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
     }
   };
 
@@ -80,7 +84,7 @@ const DueDate = (props) => {
       platform: Platform.OS,
       page_size: 10,
       page_index: page + 1,
-      type:'EXPIRY_DATE',
+      type: 'EXPIRY_DATE',
       category_id: filterId,
     });
     setPage(page + 1);
@@ -90,7 +94,6 @@ const DueDate = (props) => {
     setIsRefresh(false);
   };
 
-
   return (
     <DueDateView
       onRefresh={onRefresh}

src/Screens/Transaction/Escrow/Escrow.js

@@ -2,9 +2,13 @@ import React, {useState, useEffect} from 'react';
 import {getListNotification} from '../../../apis/Functions/users';
 import EscrowView from './EscrowView';
 import I18n from '../../../helper/i18/i18n';
-import {getListCategoryProduct, getTransactionListByCategory} from '../../../apis/Functions/Transaction';
+import {
+  getListCategoryProduct,
+  getTransactionListByCategory,
+} from '../../../apis/Functions/Transaction';
 import {Alert, Platform} from 'react-native';
 import PriceListView from '../PriceList/PriceListView';
+import {showAlert, TYPE} from '../../../components/DropdownAlert';
 const Escrow = (props) => {
   const [selected, setSelected] = useState('');
   const [page, setPage] = useState(1);
@@ -18,7 +22,7 @@ const Escrow = (props) => {
     getCategoryData();
   }, []);
   useEffect(() => {
-    setData([])
+    setData([]);
     getData();
   }, [filterId]);
 
@@ -36,7 +40,7 @@ const Escrow = (props) => {
       data.push({id: -1, name: 'All'});
       setFilters(data.concat([...res.data.data]));
     } else {
-      Alert.alert(I18n.t('Notification'), res.data.message);
+      showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
     }
   };
 
@@ -53,7 +57,7 @@ const Escrow = (props) => {
       platform: Platform.OS,
       page_size: 10,
       page_index: 1,
-      type:'ESCROW',
+      type: 'ESCROW',
       category_id: filterId,
     });
     setIsRefresh(false);
@@ -62,7 +66,7 @@ const Escrow = (props) => {
       setData(res.data.data);
       setTotalPage(res.data.meta.pages);
     } else {
-      Alert.alert(I18n.t('Notification'), res.data.message);
+      showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
     }
   };
 
@@ -80,7 +84,7 @@ const Escrow = (props) => {
       platform: Platform.OS,
       page_size: 10,
       page_index: page + 1,
-      type:'ESCROW',
+      type: 'ESCROW',
       category_id: filterId,
     });
     setPage(page + 1);

src/Screens/Transaction/PriceList/PriceList.js

 import React, {useState, useEffect} from 'react';
-import {getListCategoryProduct, getTransactionListByCategory} from '../../../apis/Functions/Transaction';
+import {
+  getListCategoryProduct,
+  getTransactionListByCategory,
+} from '../../../apis/Functions/Transaction';
 import PriceListView from './PriceListView';
 import I18n from '../../../helper/i18/i18n';
 import {Alert, Platform} from 'react-native';
+import {showAlert, TYPE} from '../../../components/DropdownAlert';
 
 const PriceList = (props) => {
-    const [selected, setSelected] = useState('');
-    const [page, setPage] = useState(1);
-    const [data, setData] = useState([]);
-    const [tottalPage, setTotalPage] = useState(1);
-    const [isRefresh, setIsRefresh] = useState(false);
-    const [filters, setFilters] = useState([]);
-    const [filterId, setFilterId] = useState(-1);
+  const [selected, setSelected] = useState('');
+  const [page, setPage] = useState(1);
+  const [data, setData] = useState([]);
+  const [tottalPage, setTotalPage] = useState(1);
+  const [isRefresh, setIsRefresh] = useState(false);
+  const [filters, setFilters] = useState([]);
+  const [filterId, setFilterId] = useState(-1);
 
-    useEffect(() => {
-        getCategoryData();
-    }, []);
-    useEffect(() => {
-        setData([])
-        getData();
-    }, [filterId]);
+  useEffect(() => {
+    getCategoryData();
+  }, []);
+  useEffect(() => {
+    setData([]);
+    getData();
+  }, [filterId]);
 
-    const getCategoryData = async () => {
-        // setIsRefresh(true);
-        const res = await getListCategoryProduct({
-            keyword: '',
-            platform: Platform.OS,
-            page_size: 20,
-            page_index: 1,
-            type: 'PRODUCT',
-        });
-        if ((res.data.code = 200 && res.data.data)) {
-            let data = [];
-            data.push({id: -1, name: 'All'});
-            setFilters(data.concat([...res.data.data]));
-        } else {
-            Alert.alert(I18n.t('Notification'), res.data.message);
-        }
-    };
+  const getCategoryData = async () => {
+    // setIsRefresh(true);
+    const res = await getListCategoryProduct({
+      keyword: '',
+      platform: Platform.OS,
+      page_size: 20,
+      page_index: 1,
+      type: 'PRODUCT',
+    });
+    if ((res.data.code = 200 && res.data.data)) {
+      let data = [];
+      data.push({id: -1, name: 'All'});
+      setFilters(data.concat([...res.data.data]));
+    } else {
+      showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
+    }
+  };
 
-    const onRefresh = () => {
-        setPage(1);
-        getData();
-    };
+  const onRefresh = () => {
+    setPage(1);
+    getData();
+  };
 
-    const getData = async () => {
-        setIsRefresh(true);
-        setPage(1);
-        const res = await getTransactionListByCategory({
-            keyword: '',
-            platform: Platform.OS,
-            page_size: 10,
-            page_index: 1,
-            type:'PRICE_TABLE',
-            category_id: filterId,
-        });
-        setIsRefresh(false);
-        console.log('getData', res);
-        if ((res.data.code = 200 && res.data.data)) {
-            setData(res.data.data);
-            setTotalPage(res.data.meta.pages);
-        } else {
-            Alert.alert(I18n.t('Notification'), res.data.message);
-        }
-    };
+  const getData = async () => {
+    setIsRefresh(true);
+    setPage(1);
+    const res = await getTransactionListByCategory({
+      keyword: '',
+      platform: Platform.OS,
+      page_size: 10,
+      page_index: 1,
+      type: 'PRICE_TABLE',
+      category_id: filterId,
+    });
+    setIsRefresh(false);
+    console.log('getData', res);
+    if ((res.data.code = 200 && res.data.data)) {
+      setData(res.data.data);
+      setTotalPage(res.data.meta.pages);
+    } else {
+      showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
+    }
+  };
 
-    const onLoadMore = () => {
-        console.log(tottalPage);
-        if (page < tottalPage) {
-            getDataLoadMore();
-        }
-    };
+  const onLoadMore = () => {
+    console.log(tottalPage);
+    if (page < tottalPage) {
+      getDataLoadMore();
+    }
+  };
 
-    const getDataLoadMore = async () => {
-        setIsRefresh(true);
-        const res = await getTransactionListByCategory({
-            keyword: '',
-            platform: Platform.OS,
-            page_size: 10,
-            page_index: page + 1,
-            type:'PRICE_TABLE',
-            category_id: filterId,
-        });
-        setPage(page + 1);
-        if (res.data.code == 200) {
-            setData(data.concat(res.data.data));
-        }
-        setIsRefresh(false);
-    };
+  const getDataLoadMore = async () => {
+    setIsRefresh(true);
+    const res = await getTransactionListByCategory({
+      keyword: '',
+      platform: Platform.OS,
+      page_size: 10,
+      page_index: page + 1,
+      type: 'PRICE_TABLE',
+      category_id: filterId,
+    });
+    setPage(page + 1);
+    if (res.data.code == 200) {
+      setData(data.concat(res.data.data));
+    }
+    setIsRefresh(false);
+  };
 
-    return (
-        <PriceListView
-            onRefresh={onRefresh}
-            isRefresh={isRefresh}
-            onLoadMore={onLoadMore}
-            setFilterId={setFilterId}
-            filterId={filterId}
-            filters={filters}
-            data={data}
-        />
-    );
+  return (
+    <PriceListView
+      onRefresh={onRefresh}
+      isRefresh={isRefresh}
+      onLoadMore={onLoadMore}
+      setFilterId={setFilterId}
+      filterId={filterId}
+      filters={filters}
+      data={data}
+    />
+  );
 };
 
 export default PriceList;

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

 import React, {useEffect, useState} from 'react';
-import {
-    View,
-    ScrollView,
-    StyleSheet, Alert,
-} from 'react-native';
+import {View, ScrollView, StyleSheet, Alert} from 'react-native';
 import R from '../../../../../assets/R';
 import GeneralInfo from './ItemView/GeneralInfo';
 import TimeTransaction from './ItemView/TimeTransaction';
@@ -12,42 +8,40 @@ import {HEIGHTXD} from '../../../../../Config/Functions';
 import {showLoading, hideLoading} from '../../../../../actions/loadingAction';
 import {getContractDescription} from '../../../../../apis/Functions/Transaction';
 import I18n from '../../../../../helper/i18/i18n';
+import {showAlert, TYPE} from '../../../../../components/DropdownAlert';
 
 const ContractDescription = (props) => {
-    const[contractDescription, setContractDescription] = useState(null)
-    useEffect(() => {
-        async function fetchData() {
-            showLoading()
-            const res = await getContractDescription(props.route.params.id)
-            if(res.status === 200 && res.data.code ===200) {
-                setContractDescription(res.data.data)
-            } else {
-                Alert.alert(I18n.t('Notification'), res.data.message);
-            }
-            console.log(res)
-            hideLoading()
-        }
-        fetchData();
-    }, [props.route.params.id]);
-    return (
-        <ScrollView
-            style={styles.container}
-            showsVerticalScrollIndicator={false}>
-            <View style={{marginBottom: HEIGHTXD(100)}}>
-                <GeneralInfo contractDescription={contractDescription}/>
-                <TimeTransaction contractDescription={contractDescription}/>
-                <PriceInfo contractDescription={contractDescription}/>
-            </View>
-        </ScrollView>
-    );
+  const [contractDescription, setContractDescription] = useState(null);
+  useEffect(() => {
+    async function fetchData() {
+      showLoading();
+      const res = await getContractDescription(props.route.params.id);
+      if (res.status === 200 && res.data.code === 200) {
+        setContractDescription(res.data.data);
+      } else {
+        showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
+      }
 
+      hideLoading();
+    }
+    fetchData();
+  }, [props.route.params.id]);
+  return (
+    <ScrollView style={styles.container} showsVerticalScrollIndicator={false}>
+      <View style={{marginBottom: HEIGHTXD(100)}}>
+        <GeneralInfo contractDescription={contractDescription} />
+        <TimeTransaction contractDescription={contractDescription} />
+        <PriceInfo contractDescription={contractDescription} />
+      </View>
+    </ScrollView>
+  );
 };
 export default ContractDescription;
 
 const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        backgroundColor: R.colors.colorBackground,
-        paddingTop: HEIGHTXD(30),
-    },
+  container: {
+    flex: 1,
+    backgroundColor: R.colors.colorBackground,
+    paddingTop: HEIGHTXD(30),
+  },
 });

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

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

src/Screens/Transaction/TimeTransaction/TimeTransaction.js

@@ -2,9 +2,13 @@ import React, {useState, useEffect} from 'react';
 import {getListNotification} from '../../../apis/Functions/users';
 import TimeTransactionView from './TimeTransactionView';
 import I18n from '../../../helper/i18/i18n';
-import {getListCategoryProduct, getTransactionListByCategory} from '../../../apis/Functions/Transaction';
+import {
+  getListCategoryProduct,
+  getTransactionListByCategory,
+} from '../../../apis/Functions/Transaction';
 import {Alert, Platform} from 'react-native';
 import PriceListView from '../PriceList/PriceListView';
+import {showAlert, TYPE} from '../../../components/DropdownAlert';
 const PriceList = (props) => {
   const [selected, setSelected] = useState('');
   const [page, setPage] = useState(1);
@@ -18,7 +22,7 @@ const PriceList = (props) => {
     getCategoryData();
   }, []);
   useEffect(() => {
-    setData([])
+    setData([]);
     getData();
   }, [filterId]);
 
@@ -36,7 +40,7 @@ const PriceList = (props) => {
       data.push({id: -1, name: 'All'});
       setFilters(data.concat([...res.data.data]));
     } else {
-      Alert.alert(I18n.t('Notification'), res.data.message);
+      showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
     }
   };
 
@@ -53,7 +57,7 @@ const PriceList = (props) => {
       platform: Platform.OS,
       page_size: 10,
       page_index: 1,
-      type:'TRANSACTION_TIME',
+      type: 'TRANSACTION_TIME',
       category_id: filterId,
     });
     setIsRefresh(false);
@@ -61,7 +65,7 @@ const PriceList = (props) => {
       setData(res.data.data);
       setTotalPage(res.data.meta.pages);
     } else {
-      Alert.alert(I18n.t('Notification'), res.data.message);
+      showAlert(TYPE.SUCCESS, I18n.t('Notification'), res.data.message);
     }
   };
 
@@ -79,7 +83,7 @@ const PriceList = (props) => {
       platform: Platform.OS,
       page_size: 10,
       page_index: page + 1,
-      type:'TRANSACTION_TIME',
+      type: 'TRANSACTION_TIME',
       category_id: filterId,
     });
     setPage(page + 1);

src/assets/images.js

@@ -16,6 +16,10 @@ const images = {
   iconMenu: require('./images/iconmenu.png'),
   bgHome: require('./images/bgHome01.png'),
 
+  iconWarn: require('./images/iconWarn.png'),
+  iconSuccess: require('./images/iconSuccess.png'),
+  iconError: require('./images/iconError.png'),
+
   iconUser: require('./images/iconUser1.png'),
   iconUserHome: require('./images/iconUser.png'),
   iconUserAccuracy: require('./images/iconUserAccuracy.png'),

src/components/DropdownAlert/DropdownManager.js

+class DropdownManager {
+  _defaultDropdown = null;
+  _defaultDropdownLongTime = null;
+
+  register(_ref, _refLongTime) {
+    if (!this._defaultDropdown) {
+      this._defaultDropdown = _ref;
+    }
+    if (!this._defaultDropdownLongTime) {
+      this._defaultDropdownLongTime = _refLongTime;
+    }
+  }
+
+  unregister(_ref, _refLongTime) {
+    if (!!this._defaultDropdown && this._defaultDropdown._id === _ref._id) {
+      this._defaultDropdown = null;
+    }
+
+    if (
+      !!this._defaultDropdownLongTime &&
+      this._defaultDropdownLongTime._id === _refLongTime._id
+    ) {
+      this._defaultDropdownLongTime = null;
+    }
+  }
+
+  getDefault(isLongMessage = false) {
+    return isLongMessage
+      ? this._defaultDropdownLongTime
+      : this._defaultDropdown;
+  }
+}
+
+export default new DropdownManager();

src/components/DropdownAlert/index.js

+import DropdownManager from './DropdownManager';
+// Type display dropdown
+export const TYPE = {
+  SUCCESS: 'success',
+  INFO: 'info',
+  WARN: 'warn',
+  ERROR: 'error',
+};
+/**
+ * To display dropdown Alert in top screen
+ * @param type type of Alert (check it in TYPE above)
+ * @param title title of Alert
+ * @param description description of Alert
+ */
+export function showAlert(type, title, description) {
+  const ref = DropdownManager.getDefault(description.length > 60);
+  if (!!ref) {
+    ref.alertWithType(type, title, description);
+  }
+}
+/**
+ * To hide dropdown Alert in top screen
+ */
+export function hideAlert() {
+  const ref = DropdownManager.getDefault();
+
+  if (!!ref) {
+    ref.closeAction();
+  }
+}

src/components/Header/HeaderHome.js

@@ -34,6 +34,8 @@ import {
   PACKETCQG,
 } from '../../routers/ScreenNames';
 import PickerAvtart from '../../components/Picker/PickerAvatart';
+import {showAlert, TYPE} from '../../components/DropdownAlert/index';
+
 const renderWallet = (status, current_money, current_cqg_money, contract) => {
   const navigate = useNavigation();
   if (status == 4)
@@ -220,7 +222,7 @@ const HeaderHome = (props) => {
   };
 
   const copyToClipboard = () => {
-    Alert.alert(I18n.t('Notification'), I18n.t('CopyLink'));
+    showAlert(TYPE.SUCCESS, I18n.t('Notification'), I18n.t('CopyLink'));
     Clipboard.setString(props.user.sponsor_url);
   };
 

src/components/Picker/PickerAvatart.js

@@ -23,6 +23,7 @@ import {useNavigation} from '@react-navigation/native';
 import {TABNAVIGATOR} from '../../routers/ScreenNames';
 import {changeAvatart} from '../../apis/Functions/users';
 import {showLoading, hideLoading} from '../../actions/loadingAction';
+import {showAlert, TYPE} from '../../components/DropdownAlert/index';
 
 const options = {
   title: 'Select Avatar',
@@ -66,21 +67,16 @@ const PickerImg = (props) => {
     props.hideLoading();
     if (res?.status == 200 && res.data) {
       if (res.data.code == 200) {
-        setTimeout(() => {
-          props.saveUserToRedux(res.data.data);
-          Alert.alert(I18n.t('Notification'), res.data.message);
-        }, 500);
+        props.saveUserToRedux(res.data.data);
+        showAlert(TYPE.SUCCESS, I18n.t('Notification'), res.data.message);
       } else {
         setImgAvatart(props.user.picture_url);
-        setTimeout(() => {
-          Alert.alert(I18n.t('Notification'), res.data.message);
-        }, 500);
+
+        showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
       }
     } else {
       setImgAvatart(props.user.picture_url);
-      setTimeout(() => {
-        Alert.alert(I18n.t('Notification'), 'upload fail');
-      }, 500);
+      showAlert(TYPE.ERROR, I18n.t('Notification'), 'upload fail');
     }
   };