integrate OTP

src/Config/constants.js

@@ -7,3 +7,7 @@ export const RadioBuySaleEN = [
   {label: 'Buy', value: 'BUY_IN'},
   {label: 'Sell', value: 'SELL_OUT'},
 ];
+export const OTP_TYPE = {
+  CUSTOMER_REQUEST_DEPOSIT: 'CUSTOMER_REQUEST_DEPOSIT',
+  REQUEST_WITHDRAW: 'REQUEST_WITHDRAW',
+}

src/Screens/Action/Wallet/WalletDeposit.js

@@ -30,10 +30,11 @@ import {showLoading, hideLoading} from '../../../actions/loadingAction';
 import {walletDeposit} from '../../../apis/Functions/Deposit';
 import TextMoney from '../../../components/Input/InputMoney';
 import I18n from '../../../helper/i18/i18n';
-import {OTPWALLET} from '../../../routers/ScreenNames';
+import {ENTER_PASSWORD_SMART_OTP, OTPWALLET, SMARTOTP} from '../../../routers/ScreenNames';
 
 import {getOTPApi} from '../../../apis/Functions/users';
 import {showAlert, TYPE} from '../../../components/DropdownAlert';
+import EnterPasswordSmartOTP from '../../SmartOTP/EnterPasswordSmartOTP';
 
 const {width} = Dimensions.get('window');
 
@@ -50,26 +51,21 @@ const WalletDeposit = (props) => {
 
     const index = checkFormatArray([amount, notes]);
     if (index === true) {
-      props.showLoading();
-      const res = await getOTPApi({
-        platform: Platform.OS,
-        otp_by: props.user.email,
-        type: 'CUSTOMER_REQUEST_DEPOSIT',
+      navigate.navigate(ENTER_PASSWORD_SMART_OTP, {
+        onGoToSmartOTP: (pinCode, otp) => onGoToSmartOTP(pinCode, otp)
       });
-      props.hideLoading();
-      if (res.data.code == 200) {
-        navigate.navigate(OTPWALLET, {type: 'DEPOSIT', amount, notes});
-      } else {
-        showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
-      }
-    } else {
-      showAlert(
-        TYPE.WARN,
-        I18n.t('Notification'),
-        I18n.t('Please_fill_in') + titles[index],
-      );
     }
   };
+  const onGoToSmartOTP = (pinCode, otp) => {
+    navigate.goBack()
+    navigate.navigate(SMARTOTP, {
+      type: 'DEPOSIT',
+      amount,
+      notes,
+      pinCode,
+      otp,
+    });
+  }
   return (
     <KeyboardAvoidingView
       behavior={Platform.Os === 'ios' ? 'padding' : 'height'}

src/Screens/Action/Wallet/WalletWithdraw.js

@@ -97,22 +97,9 @@ const WalletWithdraw = (props) => {
 
     if (index === true) {
       if (amount >= props.user.configs.request_withdraw_amount_min) {
-        // props.showLoading();
-        // const res = await getOTPApi({
-        //   platform: Platform.OS,
-        //   otp_by: props.user.email,
-        //   type: 'REQUEST_WITHDRAW',
-        // });
-        // props.hideLoading();
-        // if (res.data.code == 200) {
-        //   console.log('get OTP', res.data)
           navigate.navigate(ENTER_PASSWORD_SMART_OTP, {
-            onGoToSmartOTP: () => onGoToSmartOTP()
+            onGoToSmartOTP: (pinCode, otp) => onGoToSmartOTP(pinCode, otp)
           });
-        // } else {
-        //   showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
-        // }
-        // props.hideLoading();
       } else {
         showAlert(
           TYPE.WARN,
@@ -129,7 +116,7 @@ const WalletWithdraw = (props) => {
     }
   };
 
-  const onGoToSmartOTP = () => {
+  const onGoToSmartOTP = (pinCode, otp) => {
     navigate.goBack()
     navigate.navigate(SMARTOTP, {
       type: 'WITHDRAW',
@@ -137,6 +124,8 @@ const WalletWithdraw = (props) => {
       receiving_account: type.id,
       amount,
       notes,
+      pinCode,
+      otp,
     });
   }
 

src/Screens/SmartOTP/EnterPasswordSmartOTP.js

 import React, {useState, useEffect} from 'react';
 import EnterPasswordSmartOTPView from './EnterPasswordSmartOTPView';
-import {useNavigation} from '@react-navigation/native';
+import {getOTPApiSmartOTP} from '../../apis/Functions/users';
+import {showAlert, TYPE} from '../../components/DropdownAlert';
+import I18n from '../../helper/i18/i18n';
+import {connect} from 'react-redux';
+import {hideLoading, showLoading} from '../../actions/loadingAction';
+import {OTP_TYPE} from '../../Config/constants';
 
 const EnterPasswordSmartOTP = (props) => {
-    const [firstNumber, setFirstNumber] = useState(null)
-    const [secondsNumber, setSecondsNumber] = useState(null)
-    const [thirdNumber, setThirdNumber] = useState(null)
-    const [fourNumber, setFourNumber] = useState(null)
-    const navigate = useNavigation();
+    const [firstNumber, setFirstNumber] = useState(null);
+    const [secondsNumber, setSecondsNumber] = useState(null);
+    const [thirdNumber, setThirdNumber] = useState(null);
+    const [fourNumber, setFourNumber] = useState(null);
     useEffect(() => {
-        if(fourNumber) {
-            onCheckPINSmartOTPPin()
+        if (fourNumber) {
+            onCheckPINSmartOTPPin();
         }
-    }, [fourNumber])
+    }, [fourNumber]);
     const onNumberPress = (number) => {
-        console.log(number.toString())
-        if(!firstNumber) {
-            setFirstNumber(number.toString())
-        } else if(!secondsNumber) {
-            setSecondsNumber(number.toString())
-        } else if(!thirdNumber) {
-            setThirdNumber(number.toString())
-        } else if(!fourNumber) {
-            setFourNumber(number.toString())
+        if (!firstNumber) {
+            setFirstNumber(number.toString());
+        } else if (!secondsNumber) {
+            setSecondsNumber(number.toString());
+        } else if (!thirdNumber) {
+            setThirdNumber(number.toString());
+        } else if (!fourNumber) {
+            setFourNumber(number.toString());
         }
-    }
+    };
 
-    const onCheckPINSmartOTPPin = () => {
-        let pinCode = `${firstNumber}${secondsNumber}${thirdNumber}${fourNumber}`
-        console.log(pinCode)
-        props.route.params.onGoToSmartOTP()
-    }
+    const onCheckPINSmartOTPPin = async () => {
+        let pinCode = `${firstNumber}${secondsNumber}${thirdNumber}${fourNumber}`;
+        props.showLoading();
+        const res = await getOTPApiSmartOTP({
+            platform: Platform.OS,
+            otp_by: props.user.email,
+            otp_password: pinCode,
+            type: props.route.params.type == 'DEPOSIT' ? OTP_TYPE.CUSTOMER_REQUEST_DEPOSIT : OTP_TYPE.REQUEST_WITHDRAW,
+        });
+        props.hideLoading();
+        if (res.data.code == 200) {
+            props.route.params.onGoToSmartOTP(pinCode, res.data.data.otp);
+        } else {
+            showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
+            setFirstNumber(null);
+            setSecondsNumber(null);
+            setThirdNumber(null);
+            setFourNumber(null);
+        }
+    };
     const onDeletePress = () => {
-        if(fourNumber) {
-            setFourNumber(null)
-        } else if(thirdNumber) {
-            setThirdNumber(null)
-        } else if(secondsNumber) {
-            setSecondsNumber(null)
-        } else if(firstNumber) {
-            setFirstNumber(null)
+        if (fourNumber) {
+            setFourNumber(null);
+        } else if (thirdNumber) {
+            setThirdNumber(null);
+        } else if (secondsNumber) {
+            setSecondsNumber(null);
+        } else if (firstNumber) {
+            setFirstNumber(null);
         }
-    }
+    };
     const onReactivationSmartOTP = () => {
 
-    }
+    };
 
     const onForgotPINCode = () => {
 
-    }
+    };
     return <EnterPasswordSmartOTPView
         firstNumber={firstNumber}
         secondsNumber={secondsNumber}
@@ -60,4 +78,11 @@ const EnterPasswordSmartOTP = (props) => {
         onReactivationSmartOTP={onReactivationSmartOTP}
     />;
 };
-export default EnterPasswordSmartOTP;
+const mapStateToProps = (state) => {
+    return {
+        user: state.userReducer,
+    };
+};
+
+export default connect(mapStateToProps, {showLoading, hideLoading})(EnterPasswordSmartOTP);
+

src/Screens/SmartOTP/SmartOTP.js

-import React, {useState} from 'react';
+import React, {useState, useEffect} from 'react';
 import SmartOTPView from './SmartOTPView';
 import {showAlert, TYPE} from '../../components/DropdownAlert';
 import I18n from '../../helper/i18/i18n';
-import {verifyOTPApi} from '../../apis/Functions/users';
+import {getOTPApiSmartOTP, verifyOTPApi} from '../../apis/Functions/users';
 import {Platform} from 'react-native';
 import {walletDeposit} from '../../apis/Functions/Deposit';
 import {widthDraw} from '../../apis/Functions/Widthdraw';
 import {TABNAVIGATOR} from '../../routers/ScreenNames';
-import moment from 'moment';
 import {connect} from 'react-redux';
 import {hideLoading, showLoading} from '../../actions/loadingAction';
+import {OTP_TYPE} from '../../Config/constants';
+import {useNavigation} from '@react-navigation/native';
 
 
 const SmartOTP = (props) => {
-    const [value, setValue] = useState('132 563');
-    const [time, setTime] = useState(moment().format('DD-MM-YYYY hh:mm'));
-
+    const [value, setValue] = useState(props.route.params.otp);
+    const [progress, setProgress] = useState(1);
+    const [isReset, setReset] = useState(false);
+    const navigate = useNavigation();
+    useEffect(() => {
+        setValue(props.route.params.otp);
+    }, [props.route.params.otp]);
     const confirm = async () => {
         if (!value) {
             showAlert(TYPE.WARN, I18n.t('Notification'), I18n.t('EnterOTPRequest'));
@@ -23,25 +28,15 @@ const SmartOTP = (props) => {
             showAlert(TYPE.WARN, I18n.t('Notification'), I18n.t('OTPInvalid'));
         } else {
             props.showLoading();
-            let res1;
-            if (props.route.params.type == 'DEPOSIT') {
-                res1 = await verifyOTPApi({
-                    platform: Platform.OS,
-                    receiver_name: props.user.email,
-                    otp: value,
-                    type: 'CUSTOMER_REQUEST_DEPOSIT',
-                });
-            } else {
-                res1 = await verifyOTPApi({
-                    platform: Platform.OS,
-                    receiver_name: props.user.email,
-                    otp: value,
-                    type: 'REQUEST_WITHDRAW',
-                });
-            }
+            let res1 = await verifyOTPApi({
+                platform: Platform.OS,
+                receiver_name: props.user.email,
+                otp: value,
+                type: props.route.params.type == 'DEPOSIT' ? OTP_TYPE.CUSTOMER_REQUEST_DEPOSIT : OTP_TYPE.REQUEST_WITHDRAW,
+            });
+
             if (res1.data.code == 200) {
                 let res;
-
                 if (props.route.params.type == 'DEPOSIT') {
                     const {amount, notes} = props.route.params;
 
@@ -80,11 +75,34 @@ const SmartOTP = (props) => {
             props.hideLoading();
         }
     };
+    const getNewOTP = async () => {
+        props.showLoading();
+        const res = await getOTPApiSmartOTP({
+            platform: Platform.OS,
+            otp_by: props.user.email,
+            otp_password: props.route.params.pinCode,
+            type: props.route.params.type == 'DEPOSIT' ? OTP_TYPE.CUSTOMER_REQUEST_DEPOSIT : OTP_TYPE.REQUEST_WITHDRAW,
+        });
+        if (res.data.code == 200) {
+            setValue(res.data.data.otp);
+            setReset(!isReset);
+        } else {
+            showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
+        }
+        props.hideLoading();
+    };
+
+    const updateProgress = (count) => {
+        setProgress(count > 0 ? count / 300 : 0);
+    };
 
     return <SmartOTPView
         value={value}
-        time={time}
+        progress={progress}
         confirm={confirm}
+        isReset={isReset}
+        getNewOTP={getNewOTP}
+        updateProgress={updateProgress}
         setValue={setValue}/>;
 };
 const mapStateToProps = (state) => {

src/Screens/SmartOTP/SmartOTPView.js

@@ -5,13 +5,14 @@ import I18n from '../../helper/i18/i18n';
 import {getFontXD, getWidth, HEIGHTXD, WIDTHXD} from '../../Config/Functions';
 import R from '../../assets/R';
 import * as Progress from 'react-native-progress';
+import CountDown from '../../components/CountDown';
 
 
 const SmartOTPView = (props) => {
     return <View style={{flex: 1}}>
         <HeaderBack title={'SmartOTP'}/>
         <View style={styles.viewOTP}>
-            <Progress.Bar progress={1}
+            <Progress.Bar progress={props.progress}
                           width={getWidth() - HEIGHTXD(160)}
                           height={HEIGHTXD(15)}
                           color={R.colors.main}
@@ -19,8 +20,11 @@ const SmartOTPView = (props) => {
                           borderWidth={0}
                           borderRadius={10}
             />
-            <Text style={[styles.textNormal, {marginTop: HEIGHTXD(40)}]}>
-                {I18n.t('OTPWillAutoUpdate')}
+            <Text style={{marginTop: HEIGHTXD(40)}}>
+                <Text style={[styles.textNormal]}>
+                    {I18n.t('OTPWillAutoUpdate')}
+                </Text>
+                <CountDown isReset={props.isReset} isFromSmartOTP={true} autoRefress={() => props.getNewOTP() } updateProgress={(count) => {props.updateProgress(count)}}/>
             </Text>
             <Text style={styles.textOTP}>
                 {props.value}
@@ -35,32 +39,41 @@ const SmartOTPView = (props) => {
             </Text>
         </View>
 
-        <View style={{
-            flexDirection: 'row',
-            marginHorizontal: HEIGHTXD(40),
-        }}>
-            <Text style={[styles.textNormal, {
-                color: R.colors.main,
-            }]}>
-                Serial: 5324535436456576
-            </Text>
-            <Text style={[styles.textNormal, {
-                color: R.colors.main, position: 'absolute',
-                right: HEIGHTXD(0),
-            }]}>
-                {props.time}
-            </Text>
+        {/*<View style={{*/}
+        {/*    flexDirection: 'row',*/}
+        {/*    marginHorizontal: HEIGHTXD(40),*/}
+        {/*}}>*/}
+        {/*    <Text style={[styles.textNormal, {*/}
+        {/*        color: R.colors.main,*/}
+        {/*    }]}>*/}
+        {/*        Serial: 5324535436456576*/}
+        {/*    </Text>*/}
+        {/*    <Text style={[styles.textNormal, {*/}
+        {/*        color: R.colors.main, position: 'absolute',*/}
+        {/*        right: HEIGHTXD(0),*/}
+        {/*    }]}>*/}
+        {/*        {props.time}*/}
+        {/*    </Text>*/}
 
-        </View>
+        {/*</View>*/}
 
         <View style={{
             marginHorizontal: HEIGHTXD(40),
             marginVertical: HEIGHTXD(40),
         }}>
             <Text style={[styles.textNormal, {textAlign: 'left'}]}>{I18n.t('SmartOTPUsingFor')}</Text>
-            <Text style={[styles.textNormal, {textAlign: 'left', marginTop: HEIGHTXD(20)}]}>{I18n.t('SmartOTPUsingForFirst')}</Text>
-            <Text style={[styles.textNormal, {textAlign: 'left', marginTop: HEIGHTXD(20)}]}>{I18n.t('SmartOTPUsingForSecond')}</Text>
-            <Text style={[styles.textNormal, {textAlign: 'left', marginTop: HEIGHTXD(20)}]}>{I18n.t('SmartOTPUsingForThird')}</Text>
+            <Text style={[styles.textNormal, {
+                textAlign: 'left',
+                marginTop: HEIGHTXD(20),
+            }]}>{I18n.t('SmartOTPUsingForFirst')}</Text>
+            <Text style={[styles.textNormal, {
+                textAlign: 'left',
+                marginTop: HEIGHTXD(20),
+            }]}>{I18n.t('SmartOTPUsingForSecond')}</Text>
+            <Text style={[styles.textNormal, {
+                textAlign: 'left',
+                marginTop: HEIGHTXD(20),
+            }]}>{I18n.t('SmartOTPUsingForThird')}</Text>
         </View>
         <View style={{
             width: '100%',
@@ -82,7 +95,7 @@ const SmartOTPView = (props) => {
                     alignItems: 'center',
                 }}>
                 <TouchableOpacity onPress={() => {
-                    props.confirm()
+                    props.confirm();
                 }} style={styles.btnSend}>
                     <Text style={styles.txtSend}>{I18n.t('ConfirmTransaction')}</Text>
                 </TouchableOpacity>

src/components/CountDown.js

@@ -3,45 +3,64 @@ import {View, Text} from 'react-native';
 import {showAlert, TYPE} from './DropdownAlert';
 import I18n from '../helper/i18/i18n';
 import {getFontXD} from '../Config/Functions';
+import R from '../assets/R';
 
 const CountDown = (props) => {
-  const [count, setCount] = useState(300);
+    const [count, setCount] = useState(300);
 
-  useEffect(() => {
-    setCount(300);
-  }, [props.isReset]);
+    useEffect(() => {
+        setCount(300);
+    }, [props.isReset]);
 
-  useEffect(() => {
-    if (count == 0)
-      showAlert(TYPE.ERROR, I18n.t('Notification'), I18n.t('Overtime'));
-  }, [count]);
+    useEffect(() => {
+        if (count == 0) {
+            if(props.autoRefress) {
+                props.autoRefress()
+            }
+            if(!props.isFromSmartOTP) {
+                showAlert(TYPE.ERROR, I18n.t('Notification'), I18n.t('Overtime'));
+            }
+        }
+    }, [count]);
 
-  useEffect(() => {
-    if (count > 0) {
-      const timer = setTimeout(() => {
-        setCount(count - 1);
-      }, 1000);
-      return () => clearTimeout(timer);
-    }
-  });
+    useEffect(() => {
+        if (count > 0) {
+            const timer = setTimeout(() => {
+                setCount(count - 1);
+                if(props.updateProgress) {
+                    props.updateProgress(count)
+                }
+            }, 1000);
+            return () => clearTimeout(timer);
+        }
+    });
 
-  const secondToString = (count) => {
-    const temp = count % 60;
-    return temp < 10 ? `0${temp}` : temp;
-  };
+    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>
-  );
+    return (
+        props.isFromSmartOTP ?
+            <Text
+                style={{
+                    color: R.colors.red2,
+                    fontSize: getFontXD(39),
+                }}>
+                0{parseInt(count / 60)}:{secondToString(count)}
+            </Text>
+            :
+            <View>
+                <Text
+                    style={{
+                        color: '#A2A2A2',
+                        fontStyle: 'italic',
+                        fontSize: getFontXD(42),
+                    }}>
+                    0{parseInt(count / 60)}:{secondToString(count)}
+                </Text>
+            </View>
+    );
 };
 
 export default CountDown;

src/helper/i18/locales/en.js

@@ -293,7 +293,7 @@ export default {
   SmartOTP: 'Smart OTP',
   SmartOTPWarning: 'Please do not give the OTP to anyone under any circumstances.',
   ConfirmTransaction: 'Confirm transaction',
-  OTPWillAutoUpdate: 'OTP code will be automatically update after 60 seconds',
+  OTPWillAutoUpdate: 'OTP code will be automatically update after ',
   OTPWillAutoFill: 'Select "Confirm transaction" code OTP will be filled automatically',
   SmartOTPUsingFor: 'OTP code using for:',
   SmartOTPUsingForFirst: '• Withdrawal request',

src/helper/i18/locales/vn.js

@@ -294,7 +294,7 @@ export default {
   SmartOTP: 'Smart OTP',
   SmartOTPWarning: 'Vui lòng không cung cấp mã OTP cho bất cứ ai trong bất cứ trường hợp nào.',
   ConfirmTransaction: 'Xác nhận giao dịch',
-  OTPWillAutoUpdate: 'Mã OTP sẽ tự động cập nhật sau 60 giây',
+  OTPWillAutoUpdate: 'Mã OTP sẽ tự động cập nhật sau ',
   OTPWillAutoFill: 'Chọn xác nhận giao dịch mã OTP sẽ được điền tự động',
   SmartOTPUsingFor: 'Mã xác thực OTP cơ bản dùng cho:',
   SmartOTPUsingForFirst: '• Yêu cầu rút tiền',