update smart OTP UI

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.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()
           });
-        props.hideLoading();
-        if (res.data.code == 200) {
-          navigate.navigate(OTPWALLET, {
-            type: 'WITHDRAW',
-            src,
-            receiving_account: type.id,
-            amount,
-            notes,
-          });
-        } 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

+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

+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, {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';
+
+
+const SmartOTP = (props) => {
+    const [value, setValue] = useState('132 563');
+    const [time, setTime] = useState(moment().format('DD-MM-YYYY hh:mm'));
+
+    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;
+
+                if (props.route.params.type == 'DEPOSIT') {
+                    const {amount, notes} = props.route.params;
+
+                    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,
+                    });
+                }
+
+                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();
+        }
+    };
+
+    return <SmartOTPView
+        value={value}
+        time={time}
+        confirm={confirm}
+        setValue={setValue}/>;
+};
+const mapStateToProps = (state) => {
+    return {
+        user: state.userReducer,
+    };
+};
+
+export default connect(mapStateToProps, {showLoading, hideLoading})(SmartOTP);

src/Screens/SmartOTP/SmartOTPView.js

+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/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,4 +290,16 @@ 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',
 };

src/helper/i18/locales/vn.js

@@ -291,4 +291,16 @@ 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',
 };

src/routers/ScreenNames.js

@@ -76,3 +76,5 @@ 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';

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 SmartOTP from '../Screens/SmartOTP/SmartOTP';
+import EnterPasswordSmartOTP from '../Screens/SmartOTP/EnterPasswordSmartOTP';
 
 import * as ScreenName from './ScreenNames';
 
@@ -146,6 +148,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}