update create otp

src/Screens/Action/Wallet/WalletDeposit.js

@@ -16,12 +16,23 @@ import R from '../../../assets/R';
 import HeaderBack from '../../../components/Header/HeaderBack';
 import TextMulti from '../../../components/Input/TextMulti';
 import {useNavigation} from '@react-navigation/native';
-import {checkFormatArray, getFontXD, HEIGHTXD, toPriceVnd, WIDTHXD} from '../../../Config/Functions';
+import {
+  checkFormatArray,
+  getFontXD,
+  HEIGHTXD,
+  toPriceVnd,
+  WIDTHXD,
+} from '../../../Config/Functions';
 import {connect} from 'react-redux';
 import {hideLoading, showLoading} from '../../../actions/loadingAction';
 import TextMoney from '../../../components/Input/InputMoney';
 import I18n from '../../../helper/i18/i18n';
-import {ENTER_PASSWORD_SMART_OTP, SETTINGOTP, SMARTOTP} from '../../../routers/ScreenNames';
+import {
+  ENTER_PASSWORD_SMART_OTP,
+  SETTINGOTP,
+  SMARTOTP,
+  CHANGESMARTOTP,
+} from '../../../routers/ScreenNames';
 import {showAlert, TYPE} from '../../../components/DropdownAlert';
 import {confirmAlert} from '../../../components/Aleart';
 
@@ -42,13 +53,16 @@ const WalletDeposit = (props) => {
         confirmAlert(
           `${I18n.t('YouHaveNotSettingSmartOTP')}`,
           () => {
-                        navigate.navigate(SETTINGOTP, {
+            navigate.navigate(CHANGESMARTOTP, {
+              TYPE: 'CREATE_SMART_OTP',
+              old_password: null,
               isFromTransaction: true,
               setupSmartOTPSuccess: () => {
-                                navigate.goBack()
-                                navigate.goBack()
+                navigate.goBack();
+                navigate.goBack();
                 navigate.navigate(ENTER_PASSWORD_SMART_OTP, {
-                                    onGoToSmartOTP: (pinCode, otp) => onGoToSmartOTP(pinCode, otp),
+                  onGoToSmartOTP: (pinCode, otp) =>
+                    onGoToSmartOTP(pinCode, otp),
                 });
                 DeviceEventEmitter.emit('reloadUserInfo');
               },
@@ -86,7 +100,7 @@ const WalletDeposit = (props) => {
       keyboardVerticalOffset={-50}>
       <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
         <View style={{flex: 1}}>
-                    <HeaderBack title={'InvestmentDeposit'}/>
+          <HeaderBack title={'InvestmentDeposit'} />
           <ScrollView showsVerticalScrollIndicator={false}>
             <View style={styles.container}>
               <View style={styles.wrapTop}>
@@ -99,7 +113,7 @@ const WalletDeposit = (props) => {
                       : 0}{' '}
                   </Text>
                 </View>
-                                <View style={{width: 1, backgroundColor: '#DBDBDB'}}/>
+                <View style={{width: 1, backgroundColor: '#DBDBDB'}} />
                 <View style={styles.itemTop}>
                   <Text style={styles.txtTitle}>CQG</Text>
                   <Text style={styles.txtMoney}>

src/Screens/Action/Wallet/WalletWithdraw.js

@@ -9,7 +9,8 @@ import {
   TouchableWithoutFeedback,
   Keyboard,
   KeyboardAvoidingView,
-  ScrollView, DeviceEventEmitter,
+  ScrollView,
+  DeviceEventEmitter,
 } from 'react-native';
 import R from '../../../assets/R';
 import HeaderBack from '../../../components/Header/HeaderBack';
@@ -31,7 +32,9 @@ import {saveUserToRedux} from '../../../actions/users';
 import {confirmAlert} from '../../../components/Aleart';
 import {
   ADDMETHODPAY,
-  ENTER_PASSWORD_SMART_OTP, SETTINGOTP,
+  ENTER_PASSWORD_SMART_OTP,
+  SETTINGOTP,
+  CHANGESMARTOTP,
 } from '../../../routers/ScreenNames';
 import TextMoney from '../../../components/Input/InputMoney';
 import I18n from '../../../helper/i18/i18n';
@@ -118,13 +121,16 @@ const WalletWithdraw = (props) => {
             confirmAlert(
               `${I18n.t('YouHaveNotSettingSmartOTP')}`,
               () => {
-                  navigate.navigate(SETTINGOTP, {
+                navigate.navigate(CHANGESMARTOTP, {
+                  TYPE: 'CREATE_SMART_OTP',
+                  old_password: null,
                   isFromTransaction: true,
                   setupSmartOTPSuccess: () => {
-                      navigate.goBack()
-                      navigate.goBack()
+                    navigate.goBack();
+                    navigate.goBack();
                     navigate.navigate(ENTER_PASSWORD_SMART_OTP, {
-                        onGoToSmartOTP: (pinCode, otp) => onGoToSmartOTP(pinCode, otp),
+                      onGoToSmartOTP: (pinCode, otp) =>
+                        onGoToSmartOTP(pinCode, otp),
                     });
                     DeviceEventEmitter.emit('reloadUserInfo');
                   },
@@ -334,5 +340,5 @@ const mapStateToProps = (state) => {
 export default connect(mapStateToProps, {
   showLoading,
   hideLoading,
-  saveUserToRedux
+  saveUserToRedux,
 })(WalletWithdraw);

src/Screens/Home/Home.js

@@ -51,10 +51,13 @@ const Home = (props) => {
   useEffect(() => {
     getData();
     initSocket();
-    let reloadUserInfoListener = DeviceEventEmitter.addListener('reloadUserInfo', (e) => {
+    let reloadUserInfoListener = DeviceEventEmitter.addListener(
+      'reloadUserInfo',
+      (e) => {
         console.log('run in to reloadUserInfo');
         onRefresh();
-    });
+      },
+    );
     return () => {
       reloadUserInfoListener.remove();
     };

src/Screens/SmartOTP/ChangeSmartOTP/ChangeSmartOTP.js

@@ -40,11 +40,22 @@ const EnterPasswordSmartOTP = (props) => {
     setSecondsNumber(null);
     setThirdNumber(null);
     setFourNumber(null);
+
+    if (props.route.params.isFromTransaction) {
       navigation.navigate(CONFIRMCHANGESMARTOTP, {
         pre_otp: pinCode,
         old_password: props.route.params.old_password,
+        isFromTransaction: props.route.params.isFromTransaction,
         TYPE: props.route.params.TYPE,
+        setupSmartOTPSuccess: props.route.params.setupSmartOTPSuccess,
       });
+    } else {
+      navigation.navigate(CONFIRMCHANGESMARTOTP, {
+        pre_otp: pinCode,
+        old_password: props.route.params.old_password,
+        TYPE: props.route.params.TYPE,
+      });
+    }
   };
   const onDeletePress = () => {
     if (fourNumber) {

src/Screens/SmartOTP/ChangeSmartOTP/ConfirmChangeSmartOTP.js

@@ -74,14 +74,26 @@ const ConfirmChangeSmartOTP = (props) => {
         otp_password: '1234',
         type: 'CREATE_OTP_PASSWORD',
       });
+
       props.hideLoading();
+
       if (res.data.code == 200) {
         showAlert(TYPE.SUCCESS, I18n.t('Notification'), res.data.message);
+
+        if (props.route.params.isFromTransaction) {
           navigation.navigate(CONFIRMCREATEOTP, {
             password: props.route.params.pre_otp,
             password_confirmation: pinCode,
+            isFromTransaction: props.route.params.isFromTransaction,
+            setupSmartOTPSuccess: props.route.params.setupSmartOTPSuccess,
           });
         } else {
+          navigation.navigate(CONFIRMCREATEOTP, {
+            password: props.route.params.pre_otp,
+            password_confirmation: pinCode,
+          });
+        }
+      } else {
         showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
       }
     }

src/Screens/SmartOTP/ConfirmCreate/ConfirmCreate.js

-import React, {useState, useEffect} from 'react';
-import ConfirmCreateView from './ConfirmCreateView';
-import {verifyStoreOTPApiSmart} from '../../../apis/Functions/users';
+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 {showAlert, TYPE} from '../../../components/DropdownAlert';
-import {connect} from 'react-redux';
-import {hideLoading, showLoading} from '../../../actions/loadingAction';
-import I18n from '../../../helper/i18/i18n';
-import {useNavigation} from '@react-navigation/native';
 import {
-  CONFIRMCHANGESMARTOTP,
-  TABNAVIGATOR,
-} 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());
+  CodeField,
+  Cursor,
+  useBlurOnFulfill,
+  useClearByFocusCell,
+} from 'react-native-confirmation-code-field';
+import {getFontXD, HEIGHTXD, WIDTHXD} from '../../../Config/Functions';
+import R from '../../../assets/R';
+import {NEWPASSWORD, TABNAVIGATOR} from '../../../routers/ScreenNames';
+import {
+  verifyOTPApi,
+  verifyStoreOTPApiSmart,
+  getOTPApiSmartOTP,
+} 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 {getOTPApi} from '../../../apis/Functions/users';
+
+const CELL_COUNT = 4;
+
+const ConfirmOTP = (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 getOTPApiSmartOTP({
+      platform: Platform.OS,
+      otp_by: propsa.user.email,
+      otp_password: '1234',
+      type: 'CREATE_OTP_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 onCheckPINSmartOTPPin = async () => {
-    let pinCode = `${firstNumber}${secondsNumber}${thirdNumber}${fourNumber}`;
-    setFirstNumber(null);
-    setSecondsNumber(null);
-    setThirdNumber(null);
-    setFourNumber(null);
-    props.showLoading();
+  const confirm = async () => {
+    console.log(propsa.route.params);
+    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: props.route.params.password,
-      password_confirmation: props.route.params.password_confirmation,
-      otp: pinCode,
+        password: propsa.route.params.password,
+        password_confirmation: propsa.route.params.password_confirmation,
+        otp: value,
         type: 'CREATE_OTP_PASSWORD',
       });
-    props.hideLoading();
+      propsa.hideLoading();
       if (res.data.code == 200) {
         showAlert(TYPE.SUCCESS, I18n.t('Notification'), res.data.message);
-      navigation.navigate(TABNAVIGATOR);
+        if (propsa.route.params.isFromTransaction) {
+          propsa.route.params.setupSmartOTPSuccess();
+        } else {
+          navigate.navigate(TABNAVIGATOR);
+        }
       } else {
         showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
       }
-  };
-  const onDeletePress = () => {
-    if (fourNumber) {
-      setFourNumber(null);
-    } else if (thirdNumber) {
-      setThirdNumber(null);
-    } else if (secondsNumber) {
-      setSecondsNumber(null);
-    } else if (firstNumber) {
-      setFirstNumber(null);
     }
   };
 
   return (
-    <ConfirmCreateView
-      firstNumber={firstNumber}
-      secondsNumber={secondsNumber}
-      thirdNumber={thirdNumber}
-      fourNumber={fourNumber}
-      onNumberPress={onNumberPress}
-      onDeletePress={onDeletePress}
+    <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 {
-    user: state.userReducer,
-  };
+  return {user: state.userReducer};
 };
 
-export default connect(mapStateToProps, {showLoading, hideLoading})(
-  EnterPasswordSmartOTP,
-);
+export default connect(mapStateToProps, {showLoading, hideLoading})(ConfirmOTP);

src/Screens/SmartOTP/ConfirmCreate/ConfirmCreateView.js

@@ -9,7 +9,7 @@ import Icon from 'react-native-vector-icons/FontAwesome5';
 const ChangeSmartOTPView = (props) => {
   return (
     <View style={{flex: 1, colorBackground: R.colors.white}}>
-      <HeaderBack title={'ChangeSmartOTP'} />
+      <HeaderBack title={'OTP'} />
       <Text style={[styles.textNormal, {marginTop: HEIGHTXD(40)}]}>
         {I18n.t('EnterOTPRequest')}
       </Text>

src/Screens/SmartOTP/ConfirmOTPSmart.js

 import React, {useState} from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-  TouchableOpacity,
-  Platform,
-} from 'react-native';
+import {View, Text, StyleSheet, TouchableOpacity, Platform} from 'react-native';
 import HeaderBack from '../../components/Header/HeaderBack';
 
 import {
@@ -30,7 +24,6 @@ import {
   getOTPApiSmartOTP,
 } from '../../apis/Functions/users';
 
-
 const CELL_COUNT = 4;
 
 const ConfirmOTPSmart = (propsa) => {

src/helper/i18/locales/en.js

@@ -308,7 +308,7 @@ export default {
   SettingOTP: 'Setting Smart OTP',
   SettingGeneral: 'Setting general',
 
-  ChangeSmartOTP: 'Change smart OTP',
+  ChangeSmartOTP: 'Smart OTP',
   Rules: 'Rules',
   FAQs: 'FAQs',
 
@@ -327,4 +327,5 @@ export default {
   ForgotSmartOTP: 'Forgot Smart OTP',
   WarnMaxReqestWithdraw: 'Invalid withdrawal amount',
   YouHaveNotSettingSmartOTP: 'You have not installed Smart OTP',
+  OTP: 'Enter OTP',
 };

src/helper/i18/locales/vn.js

@@ -311,7 +311,7 @@ export default {
   EnterSmartOTPPINNEW: 'Vui lòng nhập mã PIN Smart OTP mới',
   AddSmartOTP: 'Thêm Smart OTP',
 
-  ChangeSmartOTP: 'Đổi mã PIN Smart OTP',
+  ChangeSmartOTP: 'Mã PIN Smart OTP',
   Rules: 'Điều khoản và điều kiện',
   FAQs: 'FAQs',
 
@@ -324,4 +324,5 @@ export default {
   ResetSmartOTP2: ' bấm phím 3 để gặp nhân viên hỗ trợ kỹ thuật.',
   ForgotSmartOTP: 'Quên Smart OTP',
   YouHaveNotSettingSmartOTP: 'Bạn chưa cài đặt Smart OTP',
+  OTP: 'Nhập OTP',
 };

src/routers/TabNavigation.js

@@ -105,7 +105,7 @@ const TabNavigator = (props) => {
       return confirmAlert(I18n.t('PopupVerifyAccount'), () => {
         navigate.navigate(AccountVerification);
       });
-    } else if (props.user.smart_otp_status) {
+    } else if (!props.user.smart_otp_status) {
       return confirmAlert(
         props.language.language == 'vi'
           ? 'Bạn có muốn  cài đặt Smart OTP?'