Skip to content

I
InvestCustomer
Commit 4c54b720 by Giang Tran
Options

update code change otp

parent 23c8083c
Showing with 930 additions and 66 deletions
src/Screens/SmartOTP/ChangeSmartOTP/ChangeSmartOTP.js 0 → 100644
import React, {useState, useEffect} from 'react';
import ChangeSmartOTPView from './ChangeSmartOTPView';
import {
getOTPApiSmartOTP,
verifyOTPApiSmart,
} from '../../../apis/Functions/users';
import {showAlert, TYPE} from '../../../components/DropdownAlert';
import {connect} from 'react-redux';
import {hideLoading, showLoading} from '../../../actions/loadingAction';
import {useNavigation} from '@react-navigation/native';
import {CONFIRMCHANGESMARTOTP} from '../../../routers/ScreenNames';
const EnterPasswordSmartOTP = (props) => {
const navigation = 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();
}
}, [fourNumber]);
const onNumberPress = (number) => {
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 = async () => {
let pinCode = `${firstNumber}${secondsNumber}${thirdNumber}${fourNumber}`;
navigation.navigate(CONFIRMCHANGESMARTOTP, {
pre_otp: pinCode,
old_password: props.route.params.old_password,
});
};
const onDeletePress = () => {
if (fourNumber) {
setFourNumber(null);
} else if (thirdNumber) {
setThirdNumber(null);
} else if (secondsNumber) {
setSecondsNumber(null);
} else if (firstNumber) {
setFirstNumber(null);
}
};
return (
<ChangeSmartOTPView
firstNumber={firstNumber}
secondsNumber={secondsNumber}
thirdNumber={thirdNumber}
fourNumber={fourNumber}
onNumberPress={onNumberPress}
onDeletePress={onDeletePress}
/>
);
};
const mapStateToProps = (state) => {
return {
user: state.userReducer,
};
};
export default connect(mapStateToProps, {showLoading, hideLoading})(
EnterPasswordSmartOTP,
);
src/Screens/SmartOTP/ChangeSmartOTP/ChangeSmartOTPView.js 0 → 100644
import React from 'react';
import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import HeaderBack from '../../../components/Header/HeaderBack';
import {getFontXD, HEIGHTXD, WIDTHXD} from '../../../Config/Functions';
import I18n from '../../../helper/i18/i18n';
import R from '../../../assets/R';
import Icon from 'react-native-vector-icons/FontAwesome5';
const ChangeSmartOTPView = (props) => {
return (
<View style={{flex: 1, colorBackground: R.colors.white}}>
<HeaderBack title={'ChangeSmartOTP'} />
<Text style={[styles.textNormal, {marginTop: HEIGHTXD(40)}]}>
{I18n.t('EnterSmartOTPPINNEW')}
</Text>
<View style={[styles.rowNumber]}>
<View
style={[
styles.indicator,
{
backgroundColor: props.firstNumber
? R.colors.main
: R.colors.white,
},
]}
/>
<View
style={[
styles.indicator,
{
backgroundColor: props.secondsNumber
? R.colors.main
: R.colors.white,
},
]}
/>
<View
style={[
styles.indicator,
{
backgroundColor: props.thirdNumber
? R.colors.main
: R.colors.white,
},
]}
/>
<View
style={[
styles.indicator,
{
backgroundColor: props.fourNumber
? R.colors.main
: R.colors.white,
},
]}
/>
</View>
<View style={[styles.rowNumber, {marginTop: HEIGHTXD(80)}]}>
<TouchableOpacity
onPress={() => {
props.onNumberPress(1);
}}
style={styles.btnNumber}>
<Text style={styles.textNumber}>1</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
props.onNumberPress(2);
}}
style={[styles.btnNumber, {marginLeft: WIDTHXD(40)}]}>
<Text style={styles.textNumber}>2</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
props.onNumberPress(3);
}}
style={[styles.btnNumber, {marginLeft: WIDTHXD(40)}]}>
<Text style={styles.textNumber}>3</Text>
</TouchableOpacity>
</View>
<View style={styles.rowNumber}>
<TouchableOpacity
onPress={() => {
props.onNumberPress(4);
}}
style={styles.btnNumber}>
<Text style={styles.textNumber}>4</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
props.onNumberPress(5);
}}
style={[styles.btnNumber, {marginLeft: WIDTHXD(40)}]}>
<Text style={styles.textNumber}>5</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
props.onNumberPress(6);
}}
style={[styles.btnNumber, {marginLeft: WIDTHXD(40)}]}>
<Text style={styles.textNumber}>6</Text>
</TouchableOpacity>
</View>
<View style={styles.rowNumber}>
<TouchableOpacity
onPress={() => {
props.onNumberPress(7);
}}
style={styles.btnNumber}>
<Text style={styles.textNumber}>7</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
props.onNumberPress(8);
}}
style={[styles.btnNumber, {marginLeft: WIDTHXD(40)}]}>
<Text style={styles.textNumber}>8</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
props.onNumberPress(9);
}}
style={[styles.btnNumber, {marginLeft: WIDTHXD(40)}]}>
<Text style={styles.textNumber}>9</Text>
</TouchableOpacity>
</View>
<View style={styles.rowNumber}>
<TouchableOpacity
onPress={() => {
props.onNumberPress(0);
}}
style={[styles.btnNumber, {marginLeft: WIDTHXD(300)}]}>
<Text style={styles.textNumber}>0</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
props.onDeletePress();
}}
style={{
width: HEIGHTXD(260),
height: HEIGHTXD(260),
marginLeft: WIDTHXD(40),
justifyContent: 'center',
alignItems: 'center',
}}>
<Icon name={'backspace'} size={HEIGHTXD(80)} color={'#8E8C8C'} />
</TouchableOpacity>
</View>
</View>
);
};
export default ChangeSmartOTPView;
const styles = StyleSheet.create({
btnSend: {
height: HEIGHTXD(80),
justifyContent: 'center',
alignItems: 'center',
},
rowNumber: {
flexDirection: 'row',
justifyContent: 'center',
marginTop: HEIGHTXD(40),
},
btnNumber: {
height: HEIGHTXD(260),
width: HEIGHTXD(260),
justifyContent: 'center',
alignItems: 'center',
borderWidth: 0.3,
borderColor: R.colors.gray6,
borderRadius: HEIGHTXD(130),
},
indicator: {
height: HEIGHTXD(50),
width: HEIGHTXD(50),
borderWidth: 0.3,
borderColor: R.colors.gray6,
borderRadius: HEIGHTXD(35),
marginHorizontal: WIDTHXD(20),
},
textNormal: {
fontSize: getFontXD(39),
color: R.colors.black,
textAlign: 'center',
},
textNumber: {
fontSize: getFontXD(90),
color: R.colors.black,
textAlign: 'center',
},
txtSend: {
fontSize: getFontXD(42),
color: R.colors.main,
},
});
src/Screens/SmartOTP/ChangeSmartOTP/ConfirmChangeSmartOTP.js 0 → 100644
import React, {useState, useEffect} from 'react';
import ConfirmSmartOTPView from './ConfirmSmartOTPView';
import {updateOTPApiSmart} from '../../../apis/Functions/users';
import {showAlert, TYPE} from '../../../components/DropdownAlert';
import {connect} from 'react-redux';
import {hideLoading, showLoading} from '../../../actions/loadingAction';
import I18n from '../../../helper/i18/i18n';
import {SMARTOTPCONFIG} from '../../../routers/ScreenNames';
import {useNavigation} from '@react-navigation/native';
const ConfirmChangeSmartOTP = (props) => {
const [firstNumber, setFirstNumber] = useState(null);
const [secondsNumber, setSecondsNumber] = useState(null);
const [thirdNumber, setThirdNumber] = useState(null);
const [fourNumber, setFourNumber] = useState(null);
const navigation = useNavigation();
useEffect(() => {
if (fourNumber) {
onCheckPINSmartOTPPin();
}
}, [fourNumber]);
const onNumberPress = (number) => {
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 = async () => {
let pinCode = `${firstNumber}${secondsNumber}${thirdNumber}${fourNumber}`;
const res = await updateOTPApiSmart({
platform: Platform.OS,
password: props.route.params.pre_otp,
password_confirmation: pinCode,
old_password: props.route.params.old_password,
});
if (res.data.code == 200) {
showAlert(TYPE.SUCCESS, I18n.t('Notification'), res.data.message);
navigation.reset({
index: 1,
routes: [{name: SMARTOTPCONFIG}],
});
} 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);
}
};
return (
<ConfirmSmartOTPView
firstNumber={firstNumber}
secondsNumber={secondsNumber}
thirdNumber={thirdNumber}
fourNumber={fourNumber}
onNumberPress={onNumberPress}
onDeletePress={onDeletePress}
/>
);
};
const mapStateToProps = (state) => {
return {
user: state.userReducer,
};
};
export default connect(mapStateToProps, {showLoading, hideLoading})(
ConfirmChangeSmartOTP,
);
src/Screens/SmartOTP/ChangeSmartOTP/ConfirmSmartOTPView.js 0 → 100644
import React from 'react';
import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import HeaderBack from '../../../components/Header/HeaderBack';
import {getFontXD, HEIGHTXD, WIDTHXD} from '../../../Config/Functions';
import I18n from '../../../helper/i18/i18n';
import R from '../../../assets/R';
import Icon from 'react-native-vector-icons/FontAwesome5';
const ChangeSmartOTPView = (props) => {
return (
<View style={{flex: 1, colorBackground: R.colors.white}}>
<HeaderBack title={'ChangeSmartOTP'} />
<Text style={[styles.textNormal, {marginTop: HEIGHTXD(40)}]}>
{I18n.t('ConfirmSmartOTP')}
</Text>
<View style={[styles.rowNumber]}>
<View
style={[
styles.indicator,
{
backgroundColor: props.firstNumber
? R.colors.main
: R.colors.white,
},
]}
/>
<View
style={[
styles.indicator,
{
backgroundColor: props.secondsNumber
? R.colors.main
: R.colors.white,
},
]}
/>
<View
style={[
styles.indicator,
{
backgroundColor: props.thirdNumber
? R.colors.main
: R.colors.white,
},
]}
/>
<View
style={[
styles.indicator,
{
backgroundColor: props.fourNumber
? R.colors.main
: R.colors.white,
},
]}
/>
</View>
<View style={[styles.rowNumber, {marginTop: HEIGHTXD(80)}]}>
<TouchableOpacity
onPress={() => {
props.onNumberPress(1);
}}
style={styles.btnNumber}>
<Text style={styles.textNumber}>1</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
props.onNumberPress(2);
}}
style={[styles.btnNumber, {marginLeft: WIDTHXD(40)}]}>
<Text style={styles.textNumber}>2</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
props.onNumberPress(3);
}}
style={[styles.btnNumber, {marginLeft: WIDTHXD(40)}]}>
<Text style={styles.textNumber}>3</Text>
</TouchableOpacity>
</View>
<View style={styles.rowNumber}>
<TouchableOpacity
onPress={() => {
props.onNumberPress(4);
}}
style={styles.btnNumber}>
<Text style={styles.textNumber}>4</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
props.onNumberPress(5);
}}
style={[styles.btnNumber, {marginLeft: WIDTHXD(40)}]}>
<Text style={styles.textNumber}>5</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
props.onNumberPress(6);
}}
style={[styles.btnNumber, {marginLeft: WIDTHXD(40)}]}>
<Text style={styles.textNumber}>6</Text>
</TouchableOpacity>
</View>
<View style={styles.rowNumber}>
<TouchableOpacity
onPress={() => {
props.onNumberPress(7);
}}
style={styles.btnNumber}>
<Text style={styles.textNumber}>7</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
props.onNumberPress(8);
}}
style={[styles.btnNumber, {marginLeft: WIDTHXD(40)}]}>
<Text style={styles.textNumber}>8</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
props.onNumberPress(9);
}}
style={[styles.btnNumber, {marginLeft: WIDTHXD(40)}]}>
<Text style={styles.textNumber}>9</Text>
</TouchableOpacity>
</View>
<View style={styles.rowNumber}>
<TouchableOpacity
onPress={() => {
props.onNumberPress(0);
}}
style={[styles.btnNumber, {marginLeft: WIDTHXD(300)}]}>
<Text style={styles.textNumber}>0</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
props.onDeletePress();
}}
style={{
width: HEIGHTXD(260),
height: HEIGHTXD(260),
marginLeft: WIDTHXD(40),
justifyContent: 'center',
alignItems: 'center',
}}>
<Icon name={'backspace'} size={HEIGHTXD(80)} color={'#8E8C8C'} />
</TouchableOpacity>
</View>
</View>
);
};
export default ChangeSmartOTPView;
const styles = StyleSheet.create({
btnSend: {
height: HEIGHTXD(80),
justifyContent: 'center',
alignItems: 'center',
},
rowNumber: {
flexDirection: 'row',
justifyContent: 'center',
marginTop: HEIGHTXD(40),
},
btnNumber: {
height: HEIGHTXD(260),
width: HEIGHTXD(260),
justifyContent: 'center',
alignItems: 'center',
borderWidth: 0.3,
borderColor: R.colors.gray6,
borderRadius: HEIGHTXD(130),
},
indicator: {
height: HEIGHTXD(50),
width: HEIGHTXD(50),
borderWidth: 0.3,
borderColor: R.colors.gray6,
borderRadius: HEIGHTXD(35),
marginHorizontal: WIDTHXD(20),
},
textNormal: {
fontSize: getFontXD(39),
color: R.colors.black,
textAlign: 'center',
},
textNumber: {
fontSize: getFontXD(90),
color: R.colors.black,
textAlign: 'center',
},
txtSend: {
fontSize: getFontXD(42),
color: R.colors.main,
},
});
src/Screens/SmartOTP/ConfirmOTPSmart.js
......@@ -28,7 +28,7 @@ import {showLoading, hideLoading} from '../../actions/loadingAction';
import {connect} from 'react-redux';
import {showAlert, TYPE} from '../../components/DropdownAlert';
import CountDown from '../../components/CountDown';
import {verifyOTPApiSmart} from '../../apis/Functions/users';
import {verifyStoreOTPApiSmart} from '../../apis/Functions/users';
const CELL_COUNT = 4;
......@@ -66,7 +66,7 @@ const ConfirmOTPSmart = (propsa) => {
showAlert(TYPE.WARN, I18n.t('Notification'), I18n.t('OTPInvalid'));
} else {
propsa.showLoading();
const res = await verifyOTPApiSmart({
const res = await verifyStoreOTPApiSmart({
platform: Platform.OS,
password: propsa.route.params.password,
password_confirmation: propsa.route.params.password_confirmation,
......
src/Screens/SmartOTP/EnterPasswordSmartOTP.js
import React, {useState, useEffect} from 'react';
import EnterPasswordSmartOTPView from './EnterPasswordSmartOTPView';
import {getOTPApiSmartOTP} from '../../apis/Functions/users';
import {getOTPApiSmartOTP, verifyOTPApiSmart} 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';
import {useNavigation} from '@react-navigation/native';
import {CHANGESMARTOTP} from '../../routers/ScreenNames';
const EnterPasswordSmartOTP = (props) => {
const navigation = useNavigation();
const [firstNumber, setFirstNumber] = useState(null);
const [secondsNumber, setSecondsNumber] = useState(null);
const [thirdNumber, setThirdNumber] = useState(null);
......@@ -32,13 +35,32 @@ const EnterPasswordSmartOTP = (props) => {
const onCheckPINSmartOTPPin = async () => {
let pinCode = `${firstNumber}${secondsNumber}${thirdNumber}${fourNumber}`;
props.showLoading();
if (props.route.params.type == 'CHANGE_SMART_OTP') {
const res = await verifyOTPApiSmart({
platform: Platform.OS,
otp_password: pinCode,
type: 'VERIFY_OTP_PASSWORD',
});
if (res.data.code == 200) {
navigation.navigate(CHANGESMARTOTP, {old_password: pinCode});
} else {
showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
setFirstNumber(null);
setSecondsNumber(null);
setThirdNumber(null);
setFourNumber(null);
}
} else {
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,
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 {
......@@ -48,6 +70,8 @@ const EnterPasswordSmartOTP = (props) => {
setThirdNumber(null);
setFourNumber(null);
}
}
props.hideLoading();
};
const onDeletePress = () => {
if (fourNumber) {
......@@ -60,14 +84,11 @@ const EnterPasswordSmartOTP = (props) => {
setFirstNumber(null);
}
};
const onReactivationSmartOTP = () => {
const onReactivationSmartOTP = () => {};
};
const onForgotPINCode = () => {
};
return <EnterPasswordSmartOTPView
const onForgotPINCode = () => {};
return (
<EnterPasswordSmartOTPView
firstNumber={firstNumber}
secondsNumber={secondsNumber}
thirdNumber={thirdNumber}
......@@ -76,7 +97,8 @@ const EnterPasswordSmartOTP = (props) => {
onDeletePress={onDeletePress}
onForgotPINCode={onForgotPINCode}
onReactivationSmartOTP={onReactivationSmartOTP}
/>;
/>
);
};
const mapStateToProps = (state) => {
return {
......@@ -84,5 +106,6 @@ const mapStateToProps = (state) => {
};
};
export default connect(mapStateToProps, {showLoading, hideLoading})(EnterPasswordSmartOTP);
export default connect(mapStateToProps, {showLoading, hideLoading})(
EnterPasswordSmartOTP,
);
src/Screens/SmartOTP/SmartOTPConfig.js
import React, {Component} from 'react';
import {View, Text, StyleSheet, Image} from 'react-native';
import {View, Text, StyleSheet, Image, TouchableOpacity} from 'react-native';
import HeaderBack from '../../components/Header/HeaderBack';
import I18n from '../../helper/i18/i18n';
import AppText from '../../components/AppText';
import {UPDATEOTP} from '../../routers/ScreenNames';
import {
UPDATEOTP,
ENTER_PASSWORD_SMART_OTP,
SETTINGOTP,
} from '../../routers/ScreenNames';
import R from '../../assets/R';
import Icon from 'react-native-vector-icons/AntDesign';
import {HEIGHTXD, WIDTHXD} from '../../Config/Functions';
import {useNavigation} from '@react-navigation/native';
import {connect} from 'react-redux';
const DATA = [
{
id: '1',
title: 'ChangeSmartOTP',
Screen: UPDATEOTP,
image: R.images.changeSmart,
},
{
id: '2',
title: 'Rules',
Screen: UPDATEOTP,
image: R.images.rules,
},
{
id: '3',
title: 'FAQs',
Screen: UPDATEOTP,
image: R.images.faq,
},
];
const Item = (props) => {
const {title, image} = props.item;
const SmartOTPConfig = (props) => {
const navigation = useNavigation();
return (
<View style={styles.container}>
<Image style={styles.imgIcon} source={image} />
<View style={{flex: 1}}>
<HeaderBack title={'SettingOTP'} />
<View style={{marginVertical: 20, backgroundColor: 'white'}}>
{props.user.smart_otp_status ? (
<TouchableOpacity
onPress={() =>
navigation.navigate(ENTER_PASSWORD_SMART_OTP, {
type: 'CHANGE_SMART_OTP',
})
}
style={styles.container}>
<Image style={styles.imgIcon} source={R.images.changeSmart} />
<View style={{flex: 1, justifyContent: 'center'}}>
<AppText i18nKey={title} />
<AppText i18nKey={'ChangeSmartOTP'} />
</View>
<Icon name={'right'} size={20} color={R.colors.color777} />
</TouchableOpacity>
) : (
<TouchableOpacity
onPress={() => navigation.navigate(SETTINGOTP)}
style={styles.container}>
<Image style={styles.imgIcon} source={R.images.changeSmart} />
<View style={{flex: 1, justifyContent: 'center'}}>
<AppText i18nKey={'AddSmartOTP'} />
</View>
);
};
<Icon name={'right'} size={20} color={R.colors.color777} />
</TouchableOpacity>
)}
const SmartOTPConfig = (props) => {
return (
<View style={{flex: 1}}>
<HeaderBack title={'SettingOTP'} />
<View style={{marginVertical: 20, backgroundColor: 'white'}}>
{DATA.map((item) => (
<Item item={item} />
))}
<TouchableOpacity style={styles.container}>
<Image style={styles.imgIcon} source={R.images.rules} />
<View style={{flex: 1, justifyContent: 'center'}}>
<AppText i18nKey={'Rules'} />
</View>
<Icon name={'right'} size={20} color={R.colors.color777} />
</TouchableOpacity>
<TouchableOpacity style={styles.container}>
<Image style={styles.imgIcon} source={R.images.faq} />
<View style={{flex: 1, justifyContent: 'center'}}>
<AppText i18nKey={'FAQs'} />
</View>
<Icon name={'right'} size={20} color={R.colors.color777} />
</TouchableOpacity>
</View>
</View>
);
......@@ -76,4 +85,10 @@ const styles = StyleSheet.create({
},
});
export default SmartOTPConfig;
const mapStateToProps = (state) => {
return {
user: state.userReducer,
};
};
export default connect(mapStateToProps, {})(SmartOTPConfig);
src/apis/Functions/ConfirmOTPSmart.js 0 → 100644
import React, {Component, useEffect, useState} from 'react';
import {
View,
Text,
TextInput,
StyleSheet,
TouchableOpacity,
Platform,
Alert,
} from 'react-native';
import HeaderBack from '../../components/Header/HeaderBack';
import {
CodeField,
Cursor,
useBlurOnFulfill,
useClearByFocusCell,
} from 'react-native-confirmation-code-field';
import {getFontXD, HEIGHTXD, WIDTHXD} from '../../Config/Functions';
import R from '../../assets/R';
import {TABNAVIGATOR} from '../../routers/ScreenNames';
import {verifyOTPApi} from '../../apis/Functions/users';
import {useNavigation} from '@react-navigation/native';
import I18n from '../../helper/i18/i18n';
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';
import {verifyStoreOTPApiSmart} from '../../apis/Functions/users';
const CELL_COUNT = 4;
const ConfirmOTPSmart = (propsa) => {
const [value, setValue] = useState('');
const [isReset, setReset] = useState(false);
const navigate = useNavigation();
const ref = useBlurOnFulfill({value, cellCount: CELL_COUNT});
const [props, getCellOnLayoutHandler] = useClearByFocusCell({
value,
setValue,
});
const getOTP = async () => {
propsa.showLoading();
const res = await getOTPApi({
platform: Platform.OS,
otp_by: propsa.route.params.email,
type: 'FORGOT_PASSWORD',
});
propsa.hideLoading();
if (res.data.code == 200) {
setReset(!isReset);
showAlert(TYPE.SUCCESS, I18n.t('Notification'), res.data.message);
} else {
showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
}
};
const confirm = async () => {
if (!value) {
showAlert(TYPE.WARN, I18n.t('Notification'), I18n.t('EnterOTPRequest'));
} else if (value.length != 4) {
showAlert(TYPE.WARN, I18n.t('Notification'), I18n.t('OTPInvalid'));
} else {
propsa.showLoading();
const res = await verifyStoreOTPApiSmart({
platform: Platform.OS,
password: propsa.route.params.password,
password_confirmation: propsa.route.params.password_confirmation,
otp: value,
type: 'FORGOT_PASSWORD',
});
propsa.hideLoading();
if (res.data.code == 200) {
navigate.navigate(TABNAVIGATOR);
} else {
showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
}
}
};
return (
<View style={{flex: 1}}>
<HeaderBack title={'VerifyOTP'} />
<View style={styles.container}>
<View style={{height: 20}} />
<View style={styles.wrap}>
<AppText i18nKey={'Verify_code'} style={styles.txtTitle} />
<View style={styles.containerCode}>
<CodeField
ref={ref}
{...props}
value={value}
onChangeText={setValue}
cellCount={CELL_COUNT}
rootStyle={styles.codeFieldRoot}
keyboardType="number-pad"
textContentType="oneTimeCode"
renderCell={({index, symbol, isFocused}) => (
<View
onLayout={getCellOnLayoutHandler(index)}
key={index}
style={[styles.cellRoot, isFocused && styles.focusCell]}>
<Text style={styles.cellText}>
{symbol || (isFocused ? <Cursor /> : null)}
</Text>
</View>
)}
/>
</View>
</View>
</View>
<View style={styles.footer}>
<TouchableOpacity onPress={confirm} style={styles.btn}>
<AppText i18nKey={'Continue'} style={styles.txtBtn} />
</TouchableOpacity>
<TouchableOpacity style={styles.wrapFooter} onPress={getOTP}>
<Text style={styles.txtNote}>{I18n.t('OTPValidFiveMinute')}</Text>
<AppText i18nKey={'Re_send'} style={styles.txtSend} />
</TouchableOpacity>
<CountDown isReset={isReset} />
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
paddingVertical: 20,
},
footer: {
height: 200,
justifyContent: 'center',
alignItems: 'center',
},
wrap: {
flex: 1,
paddingTop: 30,
alignItems: 'center',
width: '100%',
paddingHorizontal: 50,
},
containerCode: {
height: 50,
width: '100%',
marginTop: 30,
},
codeFieldRoot: {
marginTop: 20,
},
focusCell: {
borderColor: '#000',
},
cellRoot: {
width: 40,
height: 40,
justifyContent: 'center',
alignItems: 'center',
borderBottomColor: '#ccc',
borderBottomWidth: 1,
},
cellText: {
color: '#000',
fontSize: 36,
textAlign: 'center',
},
focusCell: {
borderBottomColor: '#007AFF',
borderBottomWidth: 2,
},
txtTitle: {
fontSize: getFontXD(52),
color: '#979797',
},
btn: {
width: WIDTHXD(521),
height: HEIGHTXD(120),
borderRadius: 15,
backgroundColor: '#1C6AF6',
justifyContent: 'center',
alignItems: 'center',
},
txtBtn: {
color: R.colors.white,
fontSize: getFontXD(52),
textTransform: 'uppercase',
},
txtSend: {
fontSize: getFontXD(42),
color: '#1C6AF6',
},
wrapFooter: {
marginTop: 30,
flexDirection: 'row',
alignItems: 'center',
},
txtNote: {
color: '#A2A2A2',
fontSize: getFontXD(42),
fontStyle: 'italic',
},
});
const mapStateToProps = (state) => {
return {};
};
export default connect(mapStateToProps, {showLoading, hideLoading})(
ConfirmOTPSmart,
);
src/apis/Functions/users.js
......@@ -77,7 +77,17 @@ export const getOTPApiSmartOTP = async (body) =>
.then((res) => res)
.catch((err) => err);
export const verifyOTPApiSmart = async (body) =>
export const verifyStoreOTPApiSmart = async (body) =>
PostData(url.urlStoreOTPSmart, body)
.then((res) => res)
.catch((err) => err);
export const verifyOTPApiSmart = async (body) =>
PostData(url.urlVerufySmartOTP, body)
.then((res) => res)
.catch((err) => err);
export const updateOTPApiSmart = async (body) =>
PostData(url.urlUpdateSmartOTP, body)
.then((res) => res)
.catch((err) => err);
src/apis/url.js
......@@ -27,6 +27,7 @@ export default {
urlUpdateMethodBank: root + 'api/v1/customers/update-payment-method',
urlGetDetailUser: root + 'api/v1/customers/detail',
urlUpdateSmartOTP: root + 'api/v1/customers/update-otp-password',
//Home
urlGetTransaction: root + 'api/v1/customers/statistic-transaction',
......@@ -66,4 +67,5 @@ export default {
urlGetSmartOTP: root + 'api/v2/customer-get-otp',
urlStoreOTPSmart: root + 'api/v1/customers/store-otp-password',
urlVerufySmartOTP: root + 'api/v1/customers/verify-otp-password',
};
src/helper/i18/locales/en.js
......@@ -291,10 +291,12 @@ export default {
LoginSessionEnd: 'Login session end, please login again',
noteWithdrawMoney: 'Infor CQG account',
SmartOTP: 'Smart OTP',
SmartOTPWarning: 'Please do not give the OTP to anyone under any circumstances.',
SmartOTPWarning:
'Please do not give the OTP to anyone under any circumstances.',
ConfirmTransaction: 'Confirm transaction',
OTPWillAutoUpdate: 'OTP code will be automatically update after ',
OTPWillAutoFill: 'Select "Confirm transaction" code OTP will be filled automatically',
OTPWillAutoFill:
'Select "Confirm transaction" code OTP will be filled automatically',
SmartOTPUsingFor: 'OTP code using for:',
SmartOTPUsingForFirst: '• Withdrawal request',
SmartOTPUsingForSecond: '• Request an internal transfer',
......@@ -310,8 +312,13 @@ export default {
Rules: 'Rules',
FAQs: 'FAQs',
EnterSmartOTPPINNEW: 'Please enter the Smart new OTP PIN code',
PassGetSmartOTP: 'Password get Smart OTP',
ConfirmPassGetSmartOTP: 'Confirm password get Smart OTP',
PopupSettingSmartOTP: 'Do you want setting Smart OTP?',
ConfirmSmartOTP: 'Confirm Smart OTP',
AddSmartOTP: 'Add Smart OTP',
};
src/helper/i18/locales/vn.js
......@@ -292,7 +292,8 @@ export default {
LoginSessionEnd: 'Hết phiên đăng nhập, vui lòng đăng nhập lại',
noteWithdrawMoney: 'Thông tin tài khoản CQG',
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.',
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 ',
OTPWillAutoFill: 'Chọn xác nhận giao dịch mã OTP sẽ được điền tự động',
......@@ -306,6 +307,8 @@ export default {
SettingOTP: 'Cài đặt Smart OTP',
SettingGeneral: 'Cài đặt chung',
EnterSmartOTPPINNEW: 'Vui lòng nhập mã PIN Smart OTP mới',
AddSmartOTP: 'Thêm Smart OTP',
ChangeSmartOTP: 'Đổi mã PIN Smart OTP',
Rules: 'Điều khoản và điều kiện',
......@@ -313,6 +316,6 @@ export default {
PassGetSmartOTP: 'Mật khẩu lấy Smart OTP',
ConfirmPassGetSmartOTP: 'Xác nhận mật khẩu lấy Smart OTP ',
ConfirmSmartOTP: 'Xác nhận Smart OTP ',
PopupSettingSmartOTP: 'Bạn có muốn cài đặt Smart OTP?',
};
src/routers/ScreenNames.js
......@@ -84,3 +84,7 @@ export const SMARTOTPCONFIG = 'SMARTOTPCONFIG';
export const UPDATEOTP = 'UPDATEOTP';
export const CONFIRMOTPSMART = 'CONFIRMOTPSMART';
export const CHANGESMARTOTP = 'CHANGESMARTOTP';
export const CONFIRMCHANGESMARTOTP = 'CONFIRMCHANGESMARTOTP';
src/routers/StackNavigation.js
......@@ -62,6 +62,8 @@ import SmartOTP from '../Screens/SmartOTP/SmartOTP';
import SettigOTP from '../Screens/SmartOTP/SettingSmartOTP';
import UpdateOTP from '../Screens/SmartOTP/UpdateSmartOTP';
import ConfirmOTPSmart from '../Screens/SmartOTP/ConfirmOTPSmart';
import ChangeSmartOTP from '../Screens/SmartOTP/ChangeSmartOTP/ChangeSmartOTP';
import ConfirmChangeSmartOTP from '../Screens/SmartOTP/ChangeSmartOTP/ConfirmChangeSmartOTP';
import * as ScreenName from './ScreenNames';
......@@ -88,7 +90,10 @@ function MyStack(props) {
component={ConfirmOTPSmart}
/>
<Stack.Screen name={ScreenName.SMARTOTPCONFIG} component={SmartOTPConfig} />
<Stack.Screen
name={ScreenName.SMARTOTPCONFIG}
component={SmartOTPConfig}
/>
<Stack.Screen name={ScreenName.SETTINGOTP} component={SettigOTP} />
<Stack.Screen name={ScreenName.UPDATEOTP} component={UpdateOTP} />
......@@ -163,7 +168,10 @@ function MyStack(props) {
<Stack.Screen name={ScreenName.NEWPASSWORD} component={NewPassWord} />
<Stack.Screen name={ScreenName.PRODUCTDETAIL} component={ProductDetail} />
<Stack.Screen name={ScreenName.SMARTOTP} component={SmartOTP} />
<Stack.Screen name={ScreenName.ENTER_PASSWORD_SMART_OTP} component={EnterPasswordSmartOTP} />
<Stack.Screen
name={ScreenName.ENTER_PASSWORD_SMART_OTP}
component={EnterPasswordSmartOTP}
/>
<Stack.Screen
name={ScreenName.FORGOTPASSWORD}
......@@ -173,6 +181,16 @@ function MyStack(props) {
name={ScreenName.ESCROWCALCULATOR}
component={EscrowCalculator}
/>
<Stack.Screen
name={ScreenName.CHANGESMARTOTP}
component={ChangeSmartOTP}
/>
<Stack.Screen
name={ScreenName.CONFIRMCHANGESMARTOTP}
component={ConfirmChangeSmartOTP}
/>
</Stack.Navigator>
);
}
......
src/routers/TabNavigation.js
......@@ -104,10 +104,6 @@ const TabNavigator = (props) => {
return confirmAlert(I18n.t('PopupVerifyAccount'), () => {
navigate.navigate(AccountVerification);
});
} else if (props.user.status == 3 && !props.user.contract_code) {
return confirmAlert(I18n.t('PopupOpenCQG'), () => {
navigate.navigate(PACKETCQG);
});
} else if (!props.user.smart_otp_status) {
return confirmAlert(
props.language.language == 'vi'
......@@ -117,6 +113,10 @@ const TabNavigator = (props) => {
navigate.navigate(SETTINGOTP);
},
);
} else if (props.user.status == 3 && !props.user.contract_code) {
return confirmAlert(I18n.t('PopupOpenCQG'), () => {
navigate.navigate(PACKETCQG);
});
}
};
return (
......
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