Skip to content

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

Merge branch 'enter_smart_otp' into 'func_smart_otp' 

update smart OTP UI

See merge request !16
parents d9736648 da896881
Showing with 729 additions and 98 deletions
ios/Invest.xcodeproj/project.pbxproj
......@@ -268,6 +268,7 @@
00E356EC1AD99517003FC87E /* Resources */,
E44ED71C60298AC6A80FDE0F /* ShellScript */,
AA0D418EA141E60BA49CB685 /* [CP] Copy Pods Resources */,
AF1F3EBE50A555B22ED09707 /* [CP] Embed Pods Frameworks */,
);
buildRules = (
);
......@@ -291,6 +292,7 @@
00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */,
6CC873A1E6FA7C328D7B37A9 /* ShellScript */,
7407C6B05E2A16BC3AEF8BEA /* [CP] Copy Pods Resources */,
E734F83437ED5EC685DCCCCF /* [CP] Embed Pods Frameworks */,
);
buildRules = (
);
......@@ -659,6 +661,24 @@
shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n # print error to STDERR\n echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
showEnvVarsInLog = 0;
};
AF1F3EBE50A555B22ED09707 /* [CP] Embed Pods Frameworks */ = {
isa = PBXShellScriptBuildPhase;
buildActionMask = 2147483647;
files = (
);
inputPaths = (
"${PODS_ROOT}/Target Support Files/Pods-Invest-InvestTests/Pods-Invest-InvestTests-frameworks.sh",
"${PODS_XCFRAMEWORKS_BUILD_DIR}/OpenSSL/OpenSSL.framework/OpenSSL",
);
name = "[CP] Embed Pods Frameworks";
outputPaths = (
"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/OpenSSL.framework",
);
runOnlyForDeploymentPostprocessing = 0;
shellPath = /bin/sh;
shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-Invest-InvestTests/Pods-Invest-InvestTests-frameworks.sh\"\n";
showEnvVarsInLog = 0;
};
BBED12D78DA0ACB351A70EE8 /* [CP] Check Pods Manifest.lock */ = {
isa = PBXShellScriptBuildPhase;
buildActionMask = 2147483647;
......@@ -710,6 +730,24 @@
shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-Invest-InvestTests/Pods-Invest-InvestTests-resources.sh\"\n";
showEnvVarsInLog = 0;
};
E734F83437ED5EC685DCCCCF /* [CP] Embed Pods Frameworks */ = {
isa = PBXShellScriptBuildPhase;
buildActionMask = 2147483647;
files = (
);
inputPaths = (
"${PODS_ROOT}/Target Support Files/Pods-Invest/Pods-Invest-frameworks.sh",
"${PODS_XCFRAMEWORKS_BUILD_DIR}/OpenSSL/OpenSSL.framework/OpenSSL",
);
name = "[CP] Embed Pods Frameworks";
outputPaths = (
"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/OpenSSL.framework",
);
runOnlyForDeploymentPostprocessing = 0;
shellPath = /bin/sh;
shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-Invest/Pods-Invest-frameworks.sh\"\n";
showEnvVarsInLog = 0;
};
FD10A7F022414F080027D42C /* Start Packager */ = {
isa = PBXShellScriptBuildPhase;
buildActionMask = 2147483647;
......
ios/Podfile.lock
......@@ -2,6 +2,8 @@ PODS:
- boost-for-react-native (1.63.0)
- BVLinearGradient (2.5.6):
- React
- CocoaAsyncSocket (7.6.5)
- CocoaLibEvent (1.0.0)
- DoubleConversion (1.1.6)
- FBLazyVector (0.62.2)
- FBReactNativeSpec (0.62.2):
......@@ -47,6 +49,52 @@ PODS:
- GoogleUtilities/Reachability (~> 6.5)
- GoogleUtilities/UserDefaults (~> 6.5)
- Protobuf (>= 3.9.2, ~> 3.9)
- Flipper (0.33.1):
- Flipper-Folly (~> 2.1)
- Flipper-RSocket (~> 1.0)
- Flipper-DoubleConversion (1.1.7)
- Flipper-Folly (2.4.0):
- boost-for-react-native
- CocoaLibEvent (~> 1.0)
- Flipper-DoubleConversion
- Flipper-Glog
- OpenSSL-Universal (= 1.1.180)
- Flipper-Glog (0.3.6)
- Flipper-PeerTalk (0.0.4)
- Flipper-RSocket (1.2.0):
- Flipper-Folly (~> 2.4)
- FlipperKit (0.33.1):
- FlipperKit/Core (= 0.33.1)
- FlipperKit/Core (0.33.1):
- Flipper (~> 0.33.1)
- FlipperKit/CppBridge
- FlipperKit/FBCxxFollyDynamicConvert
- FlipperKit/FBDefines
- FlipperKit/FKPortForwarding
- FlipperKit/CppBridge (0.33.1):
- Flipper (~> 0.33.1)
- FlipperKit/FBCxxFollyDynamicConvert (0.33.1):
- Flipper-Folly (~> 2.1)
- FlipperKit/FBDefines (0.33.1)
- FlipperKit/FKPortForwarding (0.33.1):
- CocoaAsyncSocket (~> 7.6)
- Flipper-PeerTalk (~> 0.0.4)
- FlipperKit/FlipperKitHighlightOverlay (0.33.1)
- FlipperKit/FlipperKitLayoutPlugin (0.33.1):
- FlipperKit/Core
- FlipperKit/FlipperKitHighlightOverlay
- FlipperKit/FlipperKitLayoutTextSearchable
- YogaKit (~> 1.18)
- FlipperKit/FlipperKitLayoutTextSearchable (0.33.1)
- FlipperKit/FlipperKitNetworkPlugin (0.33.1):
- FlipperKit/Core
- FlipperKit/FlipperKitReactPlugin (0.33.1):
- FlipperKit/Core
- FlipperKit/FlipperKitUserDefaultsPlugin (0.33.1):
- FlipperKit/Core
- FlipperKit/SKIOSNetworkPlugin (0.33.1):
- FlipperKit/Core
- FlipperKit/FlipperKitNetworkPlugin
- Folly (2018.10.22.00):
- boost-for-react-native
- DoubleConversion
......@@ -90,6 +138,7 @@ PODS:
- nanopb/encode (= 1.30906.0)
- nanopb/decode (1.30906.0)
- nanopb/encode (1.30906.0)
- OpenSSL-Universal (1.1.180)
- PromisesObjC (1.2.12)
- Protobuf (3.15.8)
- RCTRequired (0.62.2)
......@@ -373,6 +422,8 @@ PODS:
- SDWebImage/Core (~> 5.7)
- TOCropViewController (2.6.0)
- Yoga (1.14.0)
- YogaKit (1.18.1):
- Yoga (~> 1.14)
- YoutubePlayer-in-WKWebView (0.3.5)
DEPENDENCIES:
......@@ -380,6 +431,25 @@ DEPENDENCIES:
- DoubleConversion (from `../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`)
- FBLazyVector (from `../node_modules/react-native/Libraries/FBLazyVector`)
- FBReactNativeSpec (from `../node_modules/react-native/Libraries/FBReactNativeSpec`)
- Flipper (~> 0.33.1)
- Flipper-DoubleConversion (= 1.1.7)
- Flipper-Folly (~> 2.1)
- Flipper-Glog (= 0.3.6)
- Flipper-PeerTalk (~> 0.0.4)
- Flipper-RSocket (~> 1.0)
- FlipperKit (~> 0.33.1)
- FlipperKit/Core (~> 0.33.1)
- FlipperKit/CppBridge (~> 0.33.1)
- FlipperKit/FBCxxFollyDynamicConvert (~> 0.33.1)
- FlipperKit/FBDefines (~> 0.33.1)
- FlipperKit/FKPortForwarding (~> 0.33.1)
- FlipperKit/FlipperKitHighlightOverlay (~> 0.33.1)
- FlipperKit/FlipperKitLayoutPlugin (~> 0.33.1)
- FlipperKit/FlipperKitLayoutTextSearchable (~> 0.33.1)
- FlipperKit/FlipperKitNetworkPlugin (~> 0.33.1)
- FlipperKit/FlipperKitReactPlugin (~> 0.33.1)
- FlipperKit/FlipperKitUserDefaultsPlugin (~> 0.33.1)
- FlipperKit/SKIOSNetworkPlugin (~> 0.33.1)
- Folly (from `../node_modules/react-native/third-party-podspecs/Folly.podspec`)
- glog (from `../node_modules/react-native/third-party-podspecs/glog.podspec`)
- RCTRequired (from `../node_modules/react-native/Libraries/RCTRequired`)
......@@ -428,6 +498,8 @@ DEPENDENCIES:
SPEC REPOS:
trunk:
- boost-for-react-native
- CocoaAsyncSocket
- CocoaLibEvent
- Firebase
- FirebaseAnalyticsInterop
- FirebaseCore
......@@ -436,15 +508,24 @@ SPEC REPOS:
- FirebaseInstallations
- FirebaseInstanceID
- FirebaseMessaging
- Flipper
- Flipper-DoubleConversion
- Flipper-Folly
- Flipper-Glog
- Flipper-PeerTalk
- Flipper-RSocket
- FlipperKit
- GoogleDataTransport
- GoogleUtilities
- libwebp
- nanopb
- OpenSSL-Universal
- PromisesObjC
- Protobuf
- SDWebImage
- SDWebImageWebPCoder
- TOCropViewController
- YogaKit
- YoutubePlayer-in-WKWebView
EXTERNAL SOURCES:
......@@ -542,6 +623,8 @@ EXTERNAL SOURCES:
SPEC CHECKSUMS:
boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c
BVLinearGradient: e3aad03778a456d77928f594a649e96995f1c872
CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99
CocoaLibEvent: 2fab71b8bd46dd33ddb959f7928ec5909f838e3f
DoubleConversion: 5805e889d232975c086db112ece9ed034df7a0b2
FBLazyVector: 4aab18c93cd9546e4bfed752b4084585eca8b245
FBReactNativeSpec: 5465d51ccfeecb7faa12f9ae0024f2044ce4044e
......@@ -553,12 +636,20 @@ SPEC CHECKSUMS:
FirebaseInstallations: 6f5f680e65dc374397a483c32d1799ba822a395b
FirebaseInstanceID: cef67c4967c7cecb56ea65d8acbb4834825c587b
FirebaseMessaging: 29543feb343b09546ab3aa04d008ee8595b43c44
Flipper: 6c1f484f9a88d30ab3e272800d53688439e50f69
Flipper-DoubleConversion: 38631e41ef4f9b12861c67d17cb5518d06badc41
Flipper-Folly: ac90e2debaad40c347b90058feb263a80a3ba657
Flipper-Glog: 1dfd6abf1e922806c52ceb8701a3599a79a200a6
Flipper-PeerTalk: 116d8f857dc6ef55c7a5a75ea3ceaafe878aadc9
Flipper-RSocket: a4adba0851ba12c1b011a320b2d99c93ce4e77f9
FlipperKit: 6dc9b8f4ef60d9e5ded7f0264db299c91f18832e
Folly: 30e7936e1c45c08d884aa59369ed951a8e68cf51
glog: 1f3da668190260b06b429bb211bfbee5cd790c28
GoogleDataTransport: f56af7caa4ed338dc8e138a5d7c5973e66440833
GoogleUtilities: 7f2f5a07f888cdb145101d6042bc4422f57e70b3
libwebp: e90b9c01d99205d03b6bb8f2c8c415e5a4ef66f0
nanopb: 59317e09cf1f1a0af72f12af412d54edf52603fc
OpenSSL-Universal: 1aa4f6a6ee7256b83db99ec1ccdaa80d10f9af9b
PromisesObjC: 3113f7f76903778cf4a0586bd1ab89329a0b7b97
Protobuf: adb85cd18a15bd1a777c158af9fd6e612a0e6d69
RCTRequired: cec6a34b3ac8a9915c37e7e4ad3aa74726ce4035
......@@ -603,8 +694,9 @@ SPEC CHECKSUMS:
SDWebImageWebPCoder: d0dac55073088d24b2ac1b191a71a8f8d0adac21
TOCropViewController: 3105367e808b7d3d886a74ff59bf4804e7d3ab38
Yoga: 3ebccbdd559724312790e7742142d062476b698e
YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
YoutubePlayer-in-WKWebView: cfbf46da51d7370662a695a8f351e5fa1d3e1008
PODFILE CHECKSUM: 621d595d82007c6dfc7414cd2f2ed0bb03a78c2b
PODFILE CHECKSUM: 4b6429307a979d7671c9ef7349f77e204c1fc7d0
COCOAPODS: 1.10.1
src/Screens/Action/Wallet/WalletWithdraw.js
......@@ -31,11 +31,11 @@ import {widthDraw, getListWidthDraw} from '../../../apis/Functions/Widthdraw';
import {useNavigation} from '@react-navigation/native';
import {showLoading, hideLoading} from '../../../actions/loadingAction';
import {confirmAlert} from '../../../components/Aleart';
import {ADDMETHODPAY} from '../../../routers/ScreenNames';
import {ADDMETHODPAY, ENTER_PASSWORD_SMART_OTP} from '../../../routers/ScreenNames';
import TextMoney from '../../../components/Input/InputMoney';
import I18n from '../../../helper/i18/i18n';
import {getOTPApi} from '../../../apis/Functions/users';
import {OTPWALLET} from '../../../routers/ScreenNames';
import {SMARTOTP} from '../../../routers/ScreenNames';
import {showAlert, TYPE} from '../../../components/DropdownAlert';
var radio_props = [
{label: 'Từ ví', value: 'WALLET'},
......@@ -66,6 +66,7 @@ const WalletWithdraw = (props) => {
}, [navigate]);
const getData = async () => {
props.showLoading()
const res = await getListWidthDraw({
platform: Platform.OS,
});
......@@ -83,6 +84,7 @@ const WalletWithdraw = (props) => {
} else {
showAlert(TYPE.ERROR, I18n.t('Notification'), I18n.t('Can_not_get_data'));
}
props.hideLoading()
};
const onPressWithdraw = async () => {
......@@ -95,25 +97,22 @@ 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) {
navigate.navigate(OTPWALLET, {
type: 'WITHDRAW',
src,
receiving_account: type.id,
amount,
notes,
// 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()
});
} else {
showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
}
props.hideLoading();
// } else {
// showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
// }
// props.hideLoading();
} else {
showAlert(
TYPE.WARN,
......@@ -130,6 +129,17 @@ const WalletWithdraw = (props) => {
}
};
const onGoToSmartOTP = () => {
navigate.goBack()
navigate.navigate(SMARTOTP, {
type: 'WITHDRAW',
src,
receiving_account: type.id,
amount,
notes,
});
}
return (
<KeyboardAvoidingView
behavior={Platform.Os === 'ios' ? 'padding' : 'height'}
......
src/Screens/SmartOTP/EnterPasswordSmartOTP.js 0 → 100644
import React, {useState, useEffect} from 'react';
import EnterPasswordSmartOTPView from './EnterPasswordSmartOTPView';
import {useNavigation} from '@react-navigation/native';
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();
useEffect(() => {
if(fourNumber) {
onCheckPINSmartOTPPin()
}
}, [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())
}
}
const onCheckPINSmartOTPPin = () => {
let pinCode = `${firstNumber}${secondsNumber}${thirdNumber}${fourNumber}`
console.log(pinCode)
props.route.params.onGoToSmartOTP()
}
const onDeletePress = () => {
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}
thirdNumber={thirdNumber}
fourNumber={fourNumber}
onNumberPress={onNumberPress}
onDeletePress={onDeletePress}
onForgotPINCode={onForgotPINCode}
onReactivationSmartOTP={onReactivationSmartOTP}
/>;
};
export default EnterPasswordSmartOTP;
src/Screens/SmartOTP/EnterPasswordSmartOTPView.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 EnterPasswordSmartOTPView = (props) => {
return <View style={{flex: 1, colorBackground: R.colors.white}}>
<HeaderBack title={'SmartOTP'}/>
<Text style={[styles.textNormal, {marginTop: HEIGHTXD(40)}]}>
{I18n.t('EnterSmartOTPPIN')}
</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 style={{
width: '100%',
position: 'absolute',
bottom: HEIGHTXD(30),
justifyContent: 'center',
paddingVertical: HEIGHTXD(30),
paddingHorizontal: HEIGHTXD(30),
}}>
<TouchableOpacity onPress={() => {
props.onForgotPINCode();
}} style={styles.btnSend}>
<Text style={styles.textSmall}>{I18n.t('ForgotPINCode')}</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => {
props.onReactivationSmartOTP();
}} style={styles.btnSend}>
<Text style={styles.txtSend}>{I18n.t('ReactivationSmartOTP')}</Text>
</TouchableOpacity>
</View>
</View>;
};
export default EnterPasswordSmartOTPView;
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/SmartOTP.js
import React, {Component} from 'react';
import {View, Text, StyleSheet, Image} from 'react-native';
import React, {useState} 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 {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 HeaderBack from '../../components/Header/HeaderBack';
import I18n from '../../helper/i18/i18n';
import AppText from '../../components/AppText';
import {UPDATEOTP} from '../../routers/ScreenNames';
import R from '../../assets/R';
import Icon from 'react-native-vector-icons/AntDesign';
import {HEIGHTXD, WIDTHXD} from '../../Config/Functions';
const SmartOTP = (props) => {
const [value, setValue] = useState('132 563');
const [time, setTime] = useState(moment().format('DD-MM-YYYY hh:mm'));
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 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 {
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',
});
}
if (res1.data.code == 200) {
let res;
const Item = (props) => {
const {title, image} = props.item;
if (props.route.params.type == 'DEPOSIT') {
const {amount, notes} = props.route.params;
return (
<View style={styles.container}>
<Image style={styles.imgIcon} source={image} />
<View style={{flex: 1, justifyContent: 'center'}}>
<AppText i18nKey={title} />
</View>
<Icon name={'right'} size={20} color={R.colors.color777} />
</View>
);
};
res = await walletDeposit({
amount,
platform: Platform.OS,
notes,
fee: 0,
});
} else {
const {src, receiving_account, amount, notes} = props.route.params;
res = await widthDraw({
src,
receiving_account,
amount,
platform: Platform.OS,
notes,
fee: 0,
});
}
const SmartOTP = (props) => {
return (
<View style={{flex: 1}}>
<HeaderBack title={'SettingOTP'} />
<View style={{marginVertical: 20, backgroundColor: 'white'}}>
{DATA.map((item) => (
<Item item={item} />
))}
</View>
</View>
);
};
props.hideLoading();
if (res.data.code == 200) {
setTimeout(() => {
showAlert(TYPE.SUCCESS, I18n.t('Notification'), res.data.message);
navigate.navigate(TABNAVIGATOR);
}, 500);
} else {
showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
}
} else {
showAlert(TYPE.ERROR, I18n.t('Notification'), res1.data.message);
}
props.hideLoading();
}
};
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingHorizontal: 10,
paddingVertical: 10,
borderBottomColor: R.colors.borderGray,
borderBottomWidth: 0.6,
},
imgIcon: {
width: WIDTHXD(62),
height: WIDTHXD(62),
resizeMode: 'contain',
marginRight: 10,
},
});
return <SmartOTPView
value={value}
time={time}
confirm={confirm}
setValue={setValue}/>;
};
const mapStateToProps = (state) => {
return {
user: state.userReducer,
};
};
export default SmartOTP;
export default connect(mapStateToProps, {showLoading, hideLoading})(SmartOTP);
src/Screens/SmartOTP/SmartOTPConfig.js 0 → 100644
import React, {Component} from 'react';
import {View, Text, StyleSheet, Image} 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 R from '../../assets/R';
import Icon from 'react-native-vector-icons/AntDesign';
import {HEIGHTXD, WIDTHXD} from '../../Config/Functions';
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;
return (
<View style={styles.container}>
<Image style={styles.imgIcon} source={image} />
<View style={{flex: 1, justifyContent: 'center'}}>
<AppText i18nKey={title} />
</View>
<Icon name={'right'} size={20} color={R.colors.color777} />
</View>
);
};
const SmartOTPConfig = (props) => {
return (
<View style={{flex: 1}}>
<HeaderBack title={'SettingOTP'} />
<View style={{marginVertical: 20, backgroundColor: 'white'}}>
{DATA.map((item) => (
<Item item={item} />
))}
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingHorizontal: 10,
paddingVertical: 10,
borderBottomColor: R.colors.borderGray,
borderBottomWidth: 0.6,
},
imgIcon: {
width: WIDTHXD(62),
height: WIDTHXD(62),
resizeMode: 'contain',
marginRight: 10,
},
});
export default SmartOTPConfig;
src/Screens/SmartOTP/SmartOTPView.js 0 → 100644
import React from 'react';
import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import HeaderBack from '../../components/Header/HeaderBack';
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';
const SmartOTPView = (props) => {
return <View style={{flex: 1}}>
<HeaderBack title={'SmartOTP'}/>
<View style={styles.viewOTP}>
<Progress.Bar progress={1}
width={getWidth() - HEIGHTXD(160)}
height={HEIGHTXD(15)}
color={R.colors.main}
backgroundColor={R.colors.white}
borderWidth={0}
borderRadius={10}
/>
<Text style={[styles.textNormal, {marginTop: HEIGHTXD(40)}]}>
{I18n.t('OTPWillAutoUpdate')}
</Text>
<Text style={styles.textOTP}>
{props.value}
</Text>
<Text style={[styles.textNormal, {
width: '100%',
backgroundColor: R.colors.colorOrangeLight,
paddingVertical: HEIGHTXD(30),
color: R.colors.brown,
}]}>
{I18n.t('SmartOTPWarning')}
</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>
<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>
</View>
<View style={{
width: '100%',
backgroundColor: R.colors.white,
position: 'absolute',
bottom: HEIGHTXD(0),
justifyContent: 'center',
paddingVertical: HEIGHTXD(30),
paddingHorizontal: HEIGHTXD(30),
}}>
<Text style={styles.textSmall}>
{I18n.t('OTPWillAutoFill')}
</Text>
<View
style={{
paddingVertical: 10,
justifyContent: 'center',
alignItems: 'center',
}}>
<TouchableOpacity onPress={() => {
props.confirm()
}} style={styles.btnSend}>
<Text style={styles.txtSend}>{I18n.t('ConfirmTransaction')}</Text>
</TouchableOpacity>
</View>
</View>
</View>;
};
const styles = StyleSheet.create({
viewOTP: {
width: getWidth() - HEIGHTXD(80),
backgroundColor: R.colors.white,
borderRadius: 8,
justifyContent: 'center',
alignItems: 'center',
marginVertical: HEIGHTXD(40),
marginHorizontal: HEIGHTXD(40),
padding: WIDTHXD(40),
borderColor: R.colors.gray1,
borderWidth: 0.3,
},
btnSend: {
width: '100%',
height: HEIGHTXD(120),
backgroundColor: R.colors.main,
borderRadius: 8,
justifyContent: 'center',
alignItems: 'center',
},
txtSend: {
fontSize: getFontXD(42),
color: R.colors.white,
paddingHorizontal: WIDTHXD(60),
fontWeight: 'bold',
},
textSmall: {
fontSize: getFontXD(32),
color: R.colors.color777,
marginBottom: 5,
textAlign: 'center',
},
textNormal: {
fontSize: getFontXD(39),
color: R.colors.black,
textAlign: 'center',
},
textOTP: {
fontSize: getFontXD(100),
color: R.colors.black,
textAlign: 'center',
marginVertical: HEIGHTXD(40),
},
});
export default SmartOTPView;
src/assets/colors.js
......@@ -3,6 +3,7 @@ const colors = {
colorf39: '#F39C12',
gray5b71: '#5B7195',
corlor9c: '#FF9C00',
colorOrangeLight: '#faf1e6',
color949: '#949494',
color504: '#A60014',
colorRGBA040: 'rgba(255,255,255,0.4)',
......@@ -57,6 +58,7 @@ const colors = {
red: '#A60014',
red1: '#e2e8eb',
red2: '#E3434F',
brown: '#926e6f',
};
export default colors;
src/components/Header/Drawer.js
......@@ -37,7 +37,7 @@ import {
HISTORY,
CHOOSEMETHOD,
WALLETWITHDRAW,
SMARTOTP,
SMARTOTPCONFIG,
} from '../../routers/ScreenNames';
import {useNavigation} from '@react-navigation/native';
import {connect} from 'react-redux';
......@@ -205,7 +205,7 @@ const menus = [
{
title: 'SettingOTP',
icon: R.images.iconSmartOTP,
screen: SMARTOTP,
screen: SMARTOTPCONFIG,
id: '51',
},
......
src/helper/i18/locales/en.js
......@@ -232,7 +232,6 @@ export default {
UploadImageFail:
'The network connection is not stable, please check the connection',
EscrowCalculator: 'Escrow calculator',
Product: 'Product',
LotTransactionNumber: 'Lot transaction number',
FirstEscrow: 'First escrow (VNĐ)',
FirstEscrowTotal: 'First escrow total (VNĐ)',
......@@ -291,6 +290,18 @@ export default {
Overtime: 'Overtime OTP',
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.',
ConfirmTransaction: 'Confirm transaction',
OTPWillAutoUpdate: 'OTP code will be automatically update after 60 seconds',
OTPWillAutoFill: 'Select "Confirm transaction" code OTP will be filled automatically',
SmartOTPUsingFor: 'OTP code using for:',
SmartOTPUsingForFirst: '• Withdrawal request',
SmartOTPUsingForSecond: '• Request an internal transfer',
SmartOTPUsingForThird: '• Request to load into CQG wallet',
EnterSmartOTPPIN: 'Please enter the Smart OTP PIN code',
ForgotPINCode: 'Forgot PIN code?',
ReactivationSmartOTP: 'Reactivation the Smart OTP',
SettingOTP: 'Setting Smart OTP',
SettingGeneral: 'Setting general',
......
src/helper/i18/locales/vn.js
......@@ -291,6 +291,18 @@ export default {
Overtime: 'Mã OTP hết hạn sử dụng',
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.',
ConfirmTransaction: 'Xác nhận giao dịch',
OTPWillAutoUpdate: 'Mã OTP sẽ tự động cập nhật sau 60 giây',
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',
SmartOTPUsingForSecond: '• Yêu cầu chuyển khoản nội bộ',
SmartOTPUsingForThird: '• Yêu cầu nạp vào ví CQG',
EnterSmartOTPPIN: 'Vui lòng nhập mã PIN Smart OTP',
ForgotPINCode: 'Quên mã PIN?',
ReactivationSmartOTP: 'Kích hoạt lại Smart OTP',
SettingOTP: 'Cài đặt Smart OTP',
SettingGeneral: 'Cài đặt chung',
......@@ -302,5 +314,5 @@ export default {
PassGetSmartOTP: 'Mật khẩu lấy Smart OTP',
ConfirmPassGetSmartOTP: 'Xác nhận mật khẩu lấy Smart OTP ',
PopupSettingSmartOTP: 'Bạn có muốn cài đặt Smart OTP?',
PopupSettingSmartOTP: 'Bạn có muốn cài đặt Smart OTP?',
};
src/routers/ScreenNames.js
......@@ -76,9 +76,11 @@ export const CACULATEDPROFITLOSS = 'CACULATEDPROFITLOSS';
export const CACULATEDSTOPLOSS = 'CACULATEDSTOPLOSS';
export const CONVERTUNIT = 'CONVERTUNIT';
export const EXCHANGERATE = 'EXCHANGERATE';
export const SMARTOTP = 'SMARTOTP';
export const ENTER_PASSWORD_SMART_OTP = 'ENTER_PASSWORD_SMART_OTP';
export const SETTINGOTP = 'SETTINGOTP';
export const SMARTOTP = 'SMARTOTP';
export const SMARTOTPCONFIG = 'SMARTOTPCONFIG';
export const UPDATEOTP = 'UPDATEOTP';
export const CONFIRMOTPSMART = 'CONFIRMOTPSMART';
src/routers/StackNavigation.js
......@@ -55,6 +55,8 @@ import CaculatedProfitLoss from '../Screens/Tool/CalculatorProfitLoss/Calculator
import CaculatedStopLoss from '../Screens/Tool/CaculatedStopLoss';
import ConvertUnit from '../Screens/Tool/ConvertUnit';
import ExchangeRate from '../Screens/Tool/ExchangeRate';
import SmartOTPConfig from '../Screens/SmartOTP/SmartOTPConfig';
import EnterPasswordSmartOTP from '../Screens/SmartOTP/EnterPasswordSmartOTP';
import SmartOTP from '../Screens/SmartOTP/SmartOTP';
import SettigOTP from '../Screens/SmartOTP/SettingSmartOTP';
......@@ -86,7 +88,7 @@ function MyStack(props) {
component={ConfirmOTPSmart}
/>
<Stack.Screen name={ScreenName.SMARTOTP} component={SmartOTP} />
<Stack.Screen name={ScreenName.SMARTOTPCONFIG} component={SmartOTPConfig} />
<Stack.Screen name={ScreenName.SETTINGOTP} component={SettigOTP} />
<Stack.Screen name={ScreenName.UPDATEOTP} component={UpdateOTP} />
......@@ -160,6 +162,8 @@ function MyStack(props) {
<Stack.Screen name={ScreenName.CONFIRMEMAIL} component={ConfirmEmail} />
<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.FORGOTPASSWORD}
......
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