Skip to content

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

merge func_smart_otp

parents 260871dc 4c54b720
Showing with 959 additions and 100 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/EnterPasswordSmartOTP.js
import React, {useState, useEffect} from 'react'; import React, {useState, useEffect} from 'react';
import EnterPasswordSmartOTPView from './EnterPasswordSmartOTPView'; import EnterPasswordSmartOTPView from './EnterPasswordSmartOTPView';
import {getOTPApiSmartOTP} from '../../apis/Functions/users'; import {getOTPApiSmartOTP, verifyOTPApiSmart} from '../../apis/Functions/users';
import {showAlert, TYPE} from '../../components/DropdownAlert'; import {showAlert, TYPE} from '../../components/DropdownAlert';
import I18n from '../../helper/i18/i18n'; import I18n from '../../helper/i18/i18n';
import {connect} from 'react-redux'; import {connect} from 'react-redux';
import {hideLoading, showLoading} from '../../actions/loadingAction'; import {hideLoading, showLoading} from '../../actions/loadingAction';
import {OTP_TYPE} from '../../Config/constants'; import {OTP_TYPE} from '../../Config/constants';
import {useNavigation} from '@react-navigation/native'; import {useNavigation} from '@react-navigation/native';
import {RESET_SMART_OTP} from '../../routers/ScreenNames'; import {RESET_SMART_OTP, CHANGESMARTOTP} from '../../routers/ScreenNames';
const EnterPasswordSmartOTP = (props) => { const EnterPasswordSmartOTP = (props) => {
const navigation = useNavigation();
const [firstNumber, setFirstNumber] = useState(null); const [firstNumber, setFirstNumber] = useState(null);
const [secondsNumber, setSecondsNumber] = useState(null); const [secondsNumber, setSecondsNumber] = useState(null);
const [thirdNumber, setThirdNumber] = useState(null); const [thirdNumber, setThirdNumber] = useState(null);
const [fourNumber, setFourNumber] = useState(null); const [fourNumber, setFourNumber] = useState(null);
const navigate = useNavigation();
useEffect(() => { useEffect(() => {
if (fourNumber) { if (fourNumber) {
onCheckPINSmartOTPPin(); onCheckPINSmartOTPPin();
...@@ -36,22 +35,43 @@ const EnterPasswordSmartOTP = (props) => { ...@@ -36,22 +35,43 @@ const EnterPasswordSmartOTP = (props) => {
const onCheckPINSmartOTPPin = async () => { const onCheckPINSmartOTPPin = async () => {
let pinCode = `${firstNumber}${secondsNumber}${thirdNumber}${fourNumber}`; let pinCode = `${firstNumber}${secondsNumber}${thirdNumber}${fourNumber}`;
props.showLoading(); props.showLoading();
const res = await getOTPApiSmartOTP({ if (props.route.params.type == 'CHANGE_SMART_OTP') {
platform: Platform.OS, const res = await verifyOTPApiSmart({
otp_by: props.user.email, platform: Platform.OS,
otp_password: pinCode, otp_password: pinCode,
type: props.route.params.type == 'DEPOSIT' ? OTP_TYPE.CUSTOMER_REQUEST_DEPOSIT : OTP_TYPE.REQUEST_WITHDRAW, type: 'VERIFY_OTP_PASSWORD',
}); });
props.hideLoading(); if (res.data.code == 200) {
if (res.data.code == 200) { navigation.navigate(CHANGESMARTOTP, {old_password: pinCode});
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);
}
} else { } else {
showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message); const res = await getOTPApiSmartOTP({
setFirstNumber(null); platform: Platform.OS,
setSecondsNumber(null); otp_by: props.user.email,
setThirdNumber(null); otp_password: pinCode,
setFourNumber(null); type:
props.route.params.type == 'DEPOSIT'
? OTP_TYPE.CUSTOMER_REQUEST_DEPOSIT
: OTP_TYPE.REQUEST_WITHDRAW,
});
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);
}
} }
props.hideLoading();
}; };
const onDeletePress = () => { const onDeletePress = () => {
if (fourNumber) { if (fourNumber) {
...@@ -65,22 +85,24 @@ const EnterPasswordSmartOTP = (props) => { ...@@ -65,22 +85,24 @@ const EnterPasswordSmartOTP = (props) => {
} }
}; };
const onReactivationSmartOTP = () => { const onReactivationSmartOTP = () => {
navigate.navigate(RESET_SMART_OTP, {title: 'ReactivationSmartOTP'}) navigate.navigate(RESET_SMART_OTP, {title: 'ReactivationSmartOTP'});
}; };
const onForgotPINCode = () => { const onForgotPINCode = () => {
navigate.navigate(RESET_SMART_OTP, {title: 'ForgotSmartOTP'}) navigate.navigate(RESET_SMART_OTP, {title: 'ForgotSmartOTP'});
}; };
return <EnterPasswordSmartOTPView return (
firstNumber={firstNumber} <EnterPasswordSmartOTPView
secondsNumber={secondsNumber} firstNumber={firstNumber}
thirdNumber={thirdNumber} secondsNumber={secondsNumber}
fourNumber={fourNumber} thirdNumber={thirdNumber}
onNumberPress={onNumberPress} fourNumber={fourNumber}
onDeletePress={onDeletePress} onNumberPress={onNumberPress}
onForgotPINCode={onForgotPINCode} onDeletePress={onDeletePress}
onReactivationSmartOTP={onReactivationSmartOTP} onForgotPINCode={onForgotPINCode}
/>; onReactivationSmartOTP={onReactivationSmartOTP}
/>
);
}; };
const mapStateToProps = (state) => { const mapStateToProps = (state) => {
return { return {
...@@ -88,5 +110,6 @@ const mapStateToProps = (state) => { ...@@ -88,5 +110,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 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 HeaderBack from '../../components/Header/HeaderBack';
import I18n from '../../helper/i18/i18n'; import I18n from '../../helper/i18/i18n';
import AppText from '../../components/AppText'; 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 R from '../../assets/R';
import Icon from 'react-native-vector-icons/AntDesign'; import Icon from 'react-native-vector-icons/AntDesign';
import {HEIGHTXD, WIDTHXD} from '../../Config/Functions'; import {HEIGHTXD, WIDTHXD} from '../../Config/Functions';
import {useNavigation} from '@react-navigation/native';
import {connect} from 'react-redux';
const DATA = [ const SmartOTPConfig = (props) => {
{ const navigation = useNavigation();
id: '1', return (
title: 'ChangeSmartOTP', <View style={{flex: 1}}>
Screen: UPDATEOTP, <HeaderBack title={'SettingOTP'} />
image: R.images.changeSmart, <View style={{marginVertical: 20, backgroundColor: 'white'}}>
}, {props.user.smart_otp_status ? (
{ <TouchableOpacity
id: '2', onPress={() =>
title: 'Rules', navigation.navigate(ENTER_PASSWORD_SMART_OTP, {
Screen: UPDATEOTP, type: 'CHANGE_SMART_OTP',
image: R.images.rules, })
}, }
{ style={styles.container}>
id: '3', <Image style={styles.imgIcon} source={R.images.changeSmart} />
title: 'FAQs',
Screen: UPDATEOTP,
image: R.images.faq,
},
];
const Item = (props) => {
const {title, image} = props.item;
return (
<View style={styles.container}>
<Image style={styles.imgIcon} source={image} />
<View style={{flex: 1, justifyContent: 'center'}}> <View style={{flex: 1, justifyContent: 'center'}}>
<AppText i18nKey={title} /> <AppText i18nKey={'ChangeSmartOTP'} />
</View> </View>
<Icon name={'right'} size={20} color={R.colors.color777} /> <Icon name={'right'} size={20} color={R.colors.color777} />
</View> </TouchableOpacity>
); ) : (
}; <TouchableOpacity
onPress={() => navigation.navigate(SETTINGOTP)}
const SmartOTPConfig = (props) => { style={styles.container}>
return ( <Image style={styles.imgIcon} source={R.images.changeSmart} />
<View style={{flex: 1}}> <View style={{flex: 1, justifyContent: 'center'}}>
<HeaderBack title={'SettingOTP'} /> <AppText i18nKey={'AddSmartOTP'} />
<View style={{marginVertical: 20, backgroundColor: 'white'}}>
{DATA.map((item) => (
<Item item={item} />
))}
</View> </View>
</View> <Icon name={'right'} size={20} color={R.colors.color777} />
); </TouchableOpacity>
)}
<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>
);
}; };
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
justifyContent: 'space-between', justifyContent: 'space-between',
paddingHorizontal: 10, paddingHorizontal: 10,
paddingVertical: 10, paddingVertical: 10,
borderBottomColor: R.colors.borderGray, borderBottomColor: R.colors.borderGray,
borderBottomWidth: 0.6, borderBottomWidth: 0.6,
}, },
imgIcon: { imgIcon: {
width: WIDTHXD(62), width: WIDTHXD(62),
height: WIDTHXD(62), height: WIDTHXD(62),
resizeMode: 'contain', resizeMode: 'contain',
marginRight: 10, marginRight: 10,
}, },
}); });
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) => ...@@ -77,7 +77,17 @@ export const getOTPApiSmartOTP = async (body) =>
.then((res) => res) .then((res) => res)
.catch((err) => err); .catch((err) => err);
export const verifyOTPApiSmart = async (body) => export const verifyStoreOTPApiSmart = async (body) =>
PostData(url.urlStoreOTPSmart, body) PostData(url.urlStoreOTPSmart, body)
.then((res) => res) .then((res) => res)
.catch((err) => err); .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 { ...@@ -27,6 +27,7 @@ export default {
urlUpdateMethodBank: root + 'api/v1/customers/update-payment-method', urlUpdateMethodBank: root + 'api/v1/customers/update-payment-method',
urlGetDetailUser: root + 'api/v1/customers/detail', urlGetDetailUser: root + 'api/v1/customers/detail',
urlUpdateSmartOTP: root + 'api/v1/customers/update-otp-password',
//Home //Home
urlGetTransaction: root + 'api/v1/customers/statistic-transaction', urlGetTransaction: root + 'api/v1/customers/statistic-transaction',
...@@ -66,4 +67,5 @@ export default { ...@@ -66,4 +67,5 @@ export default {
urlGetSmartOTP: root + 'api/v2/customer-get-otp', urlGetSmartOTP: root + 'api/v2/customer-get-otp',
urlStoreOTPSmart: root + 'api/v1/customers/store-otp-password', urlStoreOTPSmart: root + 'api/v1/customers/store-otp-password',
urlVerufySmartOTP: root + 'api/v1/customers/verify-otp-password',
}; };
src/helper/i18/locales/en.js
...@@ -310,10 +310,15 @@ export default { ...@@ -310,10 +310,15 @@ export default {
Rules: 'Rules', Rules: 'Rules',
FAQs: 'FAQs', FAQs: 'FAQs',
EnterSmartOTPPINNEW: 'Please enter the Smart new OTP PIN code',
PassGetSmartOTP: 'Password get Smart OTP', PassGetSmartOTP: 'Password get Smart OTP',
ConfirmPassGetSmartOTP: 'Confirm password get Smart OTP', ConfirmPassGetSmartOTP: 'Confirm password get Smart OTP',
PopupSettingSmartOTP: 'Do you want setting Smart OTP?', PopupSettingSmartOTP: 'Do you want setting Smart OTP?',
ConfirmSmartOTP: 'Confirm Smart OTP',
AddSmartOTP: 'Add Smart OTP',
ResetSmartOTP: 'To ensure safety during application use, please contact the operator: ', ResetSmartOTP: 'To ensure safety during application use, please contact the operator: ',
ResetSmartOTP2: ' press 3 to meet technical support staff.', ResetSmartOTP2: ' press 3 to meet technical support staff.',
ForgotSmartOTP: 'Forgot Smart OTP', ForgotSmartOTP: 'Forgot Smart OTP',
......
src/helper/i18/locales/vn.js
...@@ -292,7 +292,8 @@ export default { ...@@ -292,7 +292,8 @@ export default {
LoginSessionEnd: 'Hết phiên đăng nhập, vui lòng đăng nhập lại', 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', noteWithdrawMoney: 'Thông tin tài khoản CQG',
SmartOTP: 'Smart OTP', 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', ConfirmTransaction: 'Xác nhận giao dịch',
OTPWillAutoUpdate: 'Mã OTP sẽ tự động cập nhật sau ', 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', OTPWillAutoFill: 'Chọn xác nhận giao dịch mã OTP sẽ được điền tự động',
...@@ -306,6 +307,8 @@ export default { ...@@ -306,6 +307,8 @@ export default {
SettingOTP: 'Cài đặt Smart OTP', SettingOTP: 'Cài đặt Smart OTP',
SettingGeneral: 'Cài đặt chung', 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', ChangeSmartOTP: 'Đổi mã PIN Smart OTP',
Rules: 'Điều khoản và điều kiện', Rules: 'Điều khoản và điều kiện',
...@@ -313,7 +316,7 @@ export default { ...@@ -313,7 +316,7 @@ export default {
PassGetSmartOTP: 'Mật khẩu lấy Smart OTP', PassGetSmartOTP: 'Mật khẩu lấy Smart OTP',
ConfirmPassGetSmartOTP: 'Xác nhận 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?', PopupSettingSmartOTP: 'Bạn có muốn cài đặt Smart OTP?',
ResetSmartOTP: 'Để đảm bảo an toàn trong quá trình sử dụng ứng dụng, bạn vui lòng liên hệ đến tổng đài: ', ResetSmartOTP: 'Để đảm bảo an toàn trong quá trình sử dụng ứng dụng, bạn vui lòng liên hệ đến tổng đài: ',
ResetSmartOTP2: ' bấm phím 3 để gặp nhân viên hỗ trợ kỹ thuật.', ResetSmartOTP2: ' bấm phím 3 để gặp nhân viên hỗ trợ kỹ thuật.',
......
src/routers/ScreenNames.js
...@@ -85,3 +85,7 @@ export const UPDATEOTP = 'UPDATEOTP'; ...@@ -85,3 +85,7 @@ export const UPDATEOTP = 'UPDATEOTP';
export const CONFIRMOTPSMART = 'CONFIRMOTPSMART'; export const CONFIRMOTPSMART = 'CONFIRMOTPSMART';
export const RESET_SMART_OTP = 'RESET_SMART_OTP'; export const RESET_SMART_OTP = 'RESET_SMART_OTP';
export const CHANGESMARTOTP = 'CHANGESMARTOTP';
export const CONFIRMCHANGESMARTOTP = 'CONFIRMCHANGESMARTOTP';
src/routers/StackNavigation.js
...@@ -62,6 +62,8 @@ import SmartOTP from '../Screens/SmartOTP/SmartOTP'; ...@@ -62,6 +62,8 @@ import SmartOTP from '../Screens/SmartOTP/SmartOTP';
import SettigOTP from '../Screens/SmartOTP/SettingSmartOTP'; import SettigOTP from '../Screens/SmartOTP/SettingSmartOTP';
import UpdateOTP from '../Screens/SmartOTP/UpdateSmartOTP'; import UpdateOTP from '../Screens/SmartOTP/UpdateSmartOTP';
import ConfirmOTPSmart from '../Screens/SmartOTP/ConfirmOTPSmart'; 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'; import * as ScreenName from './ScreenNames';
...@@ -89,7 +91,10 @@ function MyStack(props) { ...@@ -89,7 +91,10 @@ function MyStack(props) {
component={ConfirmOTPSmart} 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.SETTINGOTP} component={SettigOTP} />
<Stack.Screen name={ScreenName.UPDATEOTP} component={UpdateOTP} /> <Stack.Screen name={ScreenName.UPDATEOTP} component={UpdateOTP} />
...@@ -175,6 +180,16 @@ function MyStack(props) { ...@@ -175,6 +180,16 @@ function MyStack(props) {
name={ScreenName.ESCROWCALCULATOR} name={ScreenName.ESCROWCALCULATOR}
component={EscrowCalculator} component={EscrowCalculator}
/> />
<Stack.Screen
name={ScreenName.CHANGESMARTOTP}
component={ChangeSmartOTP}
/>
<Stack.Screen
name={ScreenName.CONFIRMCHANGESMARTOTP}
component={ConfirmChangeSmartOTP}
/>
</Stack.Navigator> </Stack.Navigator>
); );
} }
......
src/routers/TabNavigation.js
...@@ -104,10 +104,6 @@ const TabNavigator = (props) => { ...@@ -104,10 +104,6 @@ const TabNavigator = (props) => {
return confirmAlert(I18n.t('PopupVerifyAccount'), () => { return confirmAlert(I18n.t('PopupVerifyAccount'), () => {
navigate.navigate(AccountVerification); 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) { } else if (!props.user.smart_otp_status) {
return confirmAlert( return confirmAlert(
props.language.language == 'vi' props.language.language == 'vi'
...@@ -117,6 +113,10 @@ const TabNavigator = (props) => { ...@@ -117,6 +113,10 @@ const TabNavigator = (props) => {
navigate.navigate(SETTINGOTP); navigate.navigate(SETTINGOTP);
}, },
); );
} else if (props.user.status == 3 && !props.user.contract_code) {
return confirmAlert(I18n.t('PopupOpenCQG'), () => {
navigate.navigate(PACKETCQG);
});
} }
}; };
return ( 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