edit otp resgister

src/Screens/Authen/Login.js

@@ -62,7 +62,10 @@ const Login = (props) => {
   };
 
   const onSubmitLogin = async (email, pass) => {
-    const titles = [I18n.t('Username').toLowerCase(), I18n.t('Password').toLowerCase()];
+    const titles = [
+      I18n.t('Username').toLowerCase(),
+      I18n.t('Password').toLowerCase(),
+    ];
     const index = checkFormatArray([email, pass]);
 
     if (index === true) {
@@ -110,14 +113,12 @@ const Login = (props) => {
       <InputIcon
         icon={R.images.iconUser3}
         title={'Email'}
-        placeholder={I18n.t('EnterEmail')}
         onChangeText={(val) => setEmail(val)}
         value={email}
       />
       <InputIcon
         icon={R.images.iconLock}
         title={'Password'}
-        placeholder={I18n.t('EnterPassword')}
         isPassWord={true}
         onChangeText={(val) => setPass(val)}
         value={pass}

src/Screens/Authen/RegisterOTP.js

+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 {NEWPASSWORD} from '../../routers/ScreenNames';
+import {verifyOTPApi, registorApi} 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';
+
+const CELL_COUNT = 4;
+
+const ConfirmOTP = (propsa) => {
+  const [value, setValue] = useState('');
+
+  const navigate = useNavigation();
+
+  const ref = useBlurOnFulfill({value, cellCount: CELL_COUNT});
+  const [props, getCellOnLayoutHandler] = useClearByFocusCell({
+    value,
+    setValue,
+  });
+
+  const confirm = async () => {
+    if (!value) {
+      Alert.alert(I18n.t('Notification'), I18n.t('EnterOTPRequest'));
+    } else if (value.length != 4) {
+      Alert.alert(I18n.t('Notification'), I18n.t('OTPInvalid'));
+    } else {
+      propsa.showLoading();
+      const res = await verifyOTPApi({
+        platform: Platform.OS,
+        receiver_name: propsa.route.params.email,
+        otp: value,
+      });
+
+      if (res.data.code == 200) {
+        const {
+          email,
+          password,
+          password_confirmation,
+          phone,
+          sponsor_id,
+        } = propsa.route.params;
+        let res;
+        if (sponsor_id) {
+          res = await registorApi({
+            email,
+            password,
+            platform: Platform.OS,
+            password_confirmation,
+            sponsor_id,
+            phone,
+          });
+        } else {
+          res = await registorApi({
+            email,
+            password,
+            platform: Platform.OS,
+            password_confirmation,
+            phone,
+          });
+        }
+        propsa.hideLoading();
+
+        if (res.data.code == 200 && res.data.data) {
+          setTimeout(() => {
+            Alert.alert(
+              I18n.t('Notification'),
+              I18n.t('RegisterAccountSuccess'),
+            );
+            navigate.navigate('LOGIN');
+          }, 500);
+        } else {
+          setTimeout(() => {
+            Alert.alert(I18n.t('Notification'), res.data.message);
+          }, 500);
+        }
+      } else {
+        setTimeout(() => {
+          Alert.alert(I18n.t('Notification'), res.data.message);
+        }, 500);
+      }
+
+      propsa.hideLoading();
+    }
+  };
+
+  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={() => navigate.goBack()}>
+          <Text style={styles.txtNote}>{I18n.t('OTPValidFiveMinute')}</Text>
+          <AppText i18nKey={'Re_send'} style={styles.txtSend} />
+        </TouchableOpacity>
+      </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})(ConfirmOTP);

src/Screens/Authen/Registor.js

@@ -13,9 +13,10 @@ import R from '../../assets/R';
 import {checkFormatArray} from '../../Config/Functions';
 import {showLoading, hideLoading} from '../../actions/loadingAction';
 import {connect} from 'react-redux';
-import {registorApi} from '../../apis/Functions/users';
+import {registorApi, getOTPApi} from '../../apis/Functions/users';
 import I18n from '../../helper/i18/i18n';
 import AppText from '../../components/AppText';
+import {REGISTEROTP} from '../../routers/ScreenNames';
 
 const Registor = (props) => {
   const {navigation} = props;
@@ -41,34 +42,21 @@ const Registor = (props) => {
     ]);
 
     if (index === true) {
-      let res;
       props.showLoading();
-      if (sponsor_id) {
-        res = await registorApi({
-          email,
-          password,
+      const res = await getOTPApi({
         platform: Platform.OS,
-          password_confirmation,
-          sponsor_id,
-          phone,
+        otp_by: email,
       });
-      } else {
-        res = await registorApi({
+      props.hideLoading();
+      console.log(res);
+      if (res.data.code == 200) {
+        navigation.navigate(REGISTEROTP, {
           email,
           password,
-          platform: Platform.OS,
           password_confirmation,
           phone,
+          sponsor_id,
         });
-      }
-
-      props.hideLoading();
-
-      if (res.data.code == 200 && res.data.data) {
-        setTimeout(() => {
-          Alert.alert(I18n.t('Notification'), I18n.t('RegisterAccountSuccess'));
-          navigation.navigate('LOGIN');
-        }, 500);
       } else {
         setTimeout(() => {
           Alert.alert(I18n.t('Notification'), res.data.message);
@@ -93,35 +81,30 @@ const Registor = (props) => {
       <InputIcon
         icon={R.images.iconEmail}
         title={'Email'}
-        placeholder={I18n.t('EnterEmail')}
         onChangeText={(val) => setEmail(val)}
       />
 
       <InputIcon
         icon={R.images.iconLock}
         title={'Password'}
-        placeholder={I18n.t('EnterPassword')}
         onChangeText={(val) => setPassword(val)}
         isPassWord={true}
       />
       <InputIcon
         icon={R.images.iconLock}
         title={'Confirm_pass'}
-        placeholder={I18n.t('EnterPassword')}
         onChangeText={(val) => setPasswordConfirm(val)}
         isPassWord={true}
       />
       <InputIcon
         icon={R.images.iconPhone3}
         title={'Phone'}
-        placeholder={I18n.t('Enter_Phone')}
         onChangeText={(val) => setPhone(val)}
         isNumber={true}
       />
       <InputIcon
         icon={R.images.iconIntroduct}
         title={'Code_introduce'}
-        placeholder={I18n.t('EnterReferralCode')}
         onChangeText={(val) => setSponsor_id(val)}
       />
 

src/Screens/Menu/Profile/Tab/CQG.js

@@ -9,6 +9,9 @@ import I18n from '../../../../helper/i18/i18n';
 const Profile = (props) => {
   return (
     <View style={styles.container}>
+      {props.user.status == 3 ? (
+        <View>
+          {' '}
           <View style={styles.item}>
             <AppText i18nKey={'ContactCode'} style={styles.txtTitle}></AppText>
             <Text style={styles.txtBig}>{props.user.cqg_id}</Text>
@@ -26,6 +29,12 @@ const Profile = (props) => {
             <Text style={styles.txtBig}>{props.user.account}</Text>
           </View>
         </View>
+      ) : (
+        <View>
+          <Text>Hello</Text>
+        </View>
+      )}
+    </View>
   );
 };
 

src/components/Header/Drawer.js

@@ -289,7 +289,7 @@ const styles = StyleSheet.create({
     color: '#0C0D2C',
   },
   txtTop: {
-    fontSize: getFontXD(42),
+    fontSize: getFontXD(38),
     color: '#1E2F70',
   },
   txtLink: {

src/components/Header/HeaderDrawer.js

@@ -16,7 +16,6 @@ import R from '../../assets/R';
 import {getFontXD, HEIGHT, WIDTHXD} from '../../Config/Functions';
 import LinearGradient from 'react-native-linear-gradient';
 import {connect} from 'react-redux';
-import {HEIGHTXD} from '../../Config/Functions';
 import Modal from 'react-native-modal';
 import Drawer from './Drawer';
 import SnackBar from '../SnackBar';
@@ -108,7 +107,7 @@ const styles = StyleSheet.create({
   container: {
     backgroundColor: 'white',
     height: '100%',
-    width: 300,
+    width: WIDTHXD(780),
     borderRadius: 20,
   },
 });

src/helper/i18/locales/vn.js

@@ -35,7 +35,7 @@ export default {
   Invset: 'Đầu tư',
   Contract: 'Hợp đồng',
   PaymentSetting: 'Phương thức thanh toán',
-  CustomerCare: 'Chăm sóc khách hàng',
+  CustomerCare: 'Tư vấn khách hàng',
   Feedback: 'Phản hồi',
   LegalDocument: 'Giấy tờ pháp lý',
   Setting: 'Cài đặt',

src/routers/ScreenNames.js

@@ -66,3 +66,4 @@ export const LEGALPARTNER = 'LEGALPARTNER';
 
 export const HISTORYDETAIL = 'HISTORYDETAIL';
 export const PRODUCTDETAIL = 'PRODUCTDETAIL';
+export const REGISTEROTP = 'REGISTEROTP';

src/routers/StackNavigation.js

@@ -46,6 +46,7 @@ import Partner from '../Screens/LegalDocument/Partner';
 import SnackBar from '../components/SnackBar';
 import DetailHistory from '../Screens/Action/History/DetailHistory';
 import ProductDetail from '../Screens/Transaction/ProductDetail/ProductDetail';
+import RegisterOTP from '../Screens/Authen/RegisterOTP';
 
 import * as ScreenName from './ScreenNames';
 
@@ -67,6 +68,7 @@ function MyStack(props) {
       <Stack.Screen name={ScreenName.HISTORYDETAIL} component={DetailHistory} />
       <Stack.Screen name={ScreenName.LEGALDOCUMENT} component={LegaDocument} />
       <Stack.Screen name={ScreenName.NOTIFICATION} component={Notification} />
+      <Stack.Screen name={ScreenName.REGISTEROTP} component={RegisterOTP} />
 
       <Stack.Screen name={ScreenName.LEGALBUSINESS} component={Business} />
       <Stack.Screen name={ScreenName.LEGALCUSTOMER} component={Customer} />