Skip to content

I
InvestCustomer
Commit d29f7c31 by Nguyễn Thị Thúy
Options

integrate OTP

parent da896881
Showing with 177 additions and 113 deletions
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({
let res1 = await verifyOTPApi({
platform: Platform.OS,
receiver_name: props.user.email,
otp: value,
type: 'CUSTOMER_REQUEST_DEPOSIT',
type: props.route.params.type == 'DEPOSIT' ? OTP_TYPE.CUSTOMER_REQUEST_DEPOSIT : OTP_TYPE.REQUEST_WITHDRAW,
});
} else {
res1 = await verifyOTPApi({
platform: Platform.OS,
receiver_name: props.user.email,
otp: value,
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,9 +20,12 @@ const SmartOTPView = (props) => {
borderWidth={0}
borderRadius={10}
/>
<Text style={[styles.textNormal, {marginTop: HEIGHTXD(40)}]}>
<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}
</Text>
......@@ -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,6 +3,7 @@ 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);
......@@ -12,14 +13,23 @@ const CountDown = (props) => {
}, [props.isReset]);
useEffect(() => {
if (count == 0)
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);
if(props.updateProgress) {
props.updateProgress(count)
}
}, 1000);
return () => clearTimeout(timer);
}
......@@ -31,6 +41,15 @@ const CountDown = (props) => {
};
return (
props.isFromSmartOTP ?
<Text
style={{
color: R.colors.red2,
fontSize: getFontXD(39),
}}>
0{parseInt(count / 60)}:{secondToString(count)}
</Text>
:
<View>
<Text
style={{
......
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',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment