update countdown

index.js

@@ -6,5 +6,4 @@ import {AppRegistry} from 'react-native';
 import App from './App';
 import {name as appName} from './app.json';
 
-
 AppRegistry.registerComponent(appName, () => App);

src/Screens/Action/Wallet/OTPWallet.js

@@ -27,6 +27,7 @@ import {showLoading, hideLoading} from '../../../actions/loadingAction';
 import {connect} from 'react-redux';
 import {TABNAVIGATOR} from '../../../routers/ScreenNames';
 import {showAlert, TYPE} from '../../../components/DropdownAlert';
+import CountDown from '../../../components/CountDown';
 
 const CELL_COUNT = 4;
 
@@ -145,8 +146,10 @@ const ConfirmOTP = (propsa) => {
           style={styles.wrapFooter}
           onPress={() => navigate.goBack()}>
           <Text style={styles.txtNote}>{I18n.t('OTPValidFiveMinute')}</Text>
+
           <AppText i18nKey={'Re_send'} style={styles.txtSend} />
         </TouchableOpacity>
+        <CountDown />
       </View>
     </View>
   );

src/Screens/Action/Wallet/WalletWithdraw.js

@@ -213,6 +213,7 @@ const WalletWithdraw = (props) => {
               </View>
             </View>
           </ScrollView>
+
           <View
             style={{
               paddingVertical: 10,

src/Screens/Authen/ConfirmOTP.js

@@ -27,6 +27,7 @@ import AppText from '../../components/AppText';
 import {showLoading, hideLoading} from '../../actions/loadingAction';
 import {connect} from 'react-redux';
 import {showAlert, TYPE} from '../../components/DropdownAlert';
+import CountDown from '../../components/CountDown';
 
 const CELL_COUNT = 4;
 
@@ -111,6 +112,7 @@ const ConfirmOTP = (propsa) => {
           <Text style={styles.txtNote}>{I18n.t('OTPValidFiveMinute')}</Text>
           <AppText i18nKey={'Re_send'} style={styles.txtSend} />
         </TouchableOpacity>
+        <CountDown />
       </View>
     </View>
   );

src/Screens/Authen/RegisterOTP.js

@@ -27,6 +27,7 @@ import AppText from '../../components/AppText';
 import {showLoading, hideLoading} from '../../actions/loadingAction';
 import {connect} from 'react-redux';
 import {showAlert, TYPE} from '../../components/DropdownAlert';
+import CountDown from '../../components/CountDown';
 
 const CELL_COUNT = 4;
 
@@ -143,6 +144,7 @@ const ConfirmOTP = (propsa) => {
           <Text style={styles.txtNote}>{I18n.t('OTPValidFiveMinute')}</Text>
           <AppText i18nKey={'Re_send'} style={styles.txtSend} />
         </TouchableOpacity>
+        <CountDown />
       </View>
     </View>
   );

src/components/CountDown.js

+import React, {Component, useEffect, useState} from 'react';
+import {View, Text} from 'react-native';
+import {showAlert, TYPE} from './DropdownAlert';
+import I18n from '../helper/i18/i18n';
+import {getFontXD} from '../Config/Functions';
+
+const CountDown = (props) => {
+  const [count, setCount] = useState(300);
+
+  useEffect(() => {
+    if (count == 0)
+      showAlert(TYPE.ERROR, I18n.t('Notification'), I18n.t('Overtime'));
+  }, [count]);
+
+  useEffect(() => {
+    clearTimeout();
+    if (count > 0) {
+      const timer = setTimeout(() => {
+        setCount(count - 1);
+      }, 1000);
+      return () => clearTimeout(timer);
+    }
+  });
+
+  const secondToString = (count) => {
+    const temp = count % 60;
+    return temp < 10 ? `0${temp}` : temp;
+  };
+
+  return (
+    <View>
+      <Text
+        style={{
+          color: '#A2A2A2',
+          fontStyle: 'italic',
+          fontSize: getFontXD(42),
+        }}>
+        0{parseInt(count / 60)}:{secondToString(count)}
+      </Text>
+    </View>
+  );
+};
+
+export default CountDown;

src/components/Header/HeaderHome.js

@@ -352,7 +352,7 @@ const styles = StyleSheet.create({
       width: 1,
       height: 2,
     },
-    shadowOpacity: 1.25,
+    shadowOpacity: 0.55,
     shadowRadius: 1.84,
     elevation: 3,
   },

src/helper/i18/locales/en.js

@@ -288,4 +288,5 @@ export default {
   AvailableMargin: 'Available margin',
   WarnMinReqestWithdraw:
     'The withdrawal amount must be more than 1 million dong',
+  Overtime: 'Overtime OTP',
 };

src/helper/i18/locales/vn.js

@@ -288,4 +288,5 @@ export default {
   _Sell: 'Bán',
   FirstEscrow: 'Ký quỹ ban đầu (VNĐ) ',
   WarnMinReqestWithdraw: 'Số tiền rút phải lớn hơn 1 triệu đồng',
+  Overtime: 'Mã OTP hết hạn sử dụng',
 };