ConfirmOTP.js 5.63 KB
Newer Older
Giang Tran committed
1 2 3 4 5 6 7
import React, {Component, useEffect, useState} from 'react';
import {
  View,
  Text,
  TextInput,
  StyleSheet,
  TouchableOpacity,
8 9
  Platform,
  Alert,
Giang Tran committed
10 11 12 13 14 15 16 17 18 19 20
} 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';
21
import {NEWPASSWORD} from '../../routers/ScreenNames';
22
import {verifyOTPApi} from '../../apis/Functions/users';
23
import {useNavigation} from '@react-navigation/native';
Giang Tran committed
24
import I18n from '../../helper/i18/i18n';
Giang Tran committed
25
import AppText from '../../components/AppText';
Giang Tran committed
26

27 28
import {showLoading, hideLoading} from '../../actions/loadingAction';
import {connect} from 'react-redux';
Giang Tran committed
29
import {showAlert, TYPE} from '../../components/DropdownAlert';
Giang Tran committed
30
import CountDown from '../../components/CountDown';
Giang Tran committed
31
import {getOTPApi} from '../../apis/Functions/users';
32

Giang Tran committed
33 34 35 36
const CELL_COUNT = 4;

const ConfirmOTP = (propsa) => {
  const [value, setValue] = useState('');
Giang Tran committed
37
  const [isReset, setReset] = useState(false);
38 39 40

  const navigate = useNavigation();

Giang Tran committed
41 42 43 44 45 46
  const ref = useBlurOnFulfill({value, cellCount: CELL_COUNT});
  const [props, getCellOnLayoutHandler] = useClearByFocusCell({
    value,
    setValue,
  });

Giang Tran committed
47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62
  const getOTP = async () => {
    propsa.showLoading();
    const res = await getOTPApi({
      platform: Platform.OS,
      otp_by: propsa.route.params.email,
      type: 'FORGOT_PASSWORD',
    });
    propsa.hideLoading();
    if (res.data.code == 200) {
      setReset(!isReset);
      showAlert(TYPE.SUCCESS, I18n.t('Notification'), res.data.message);
    } else {
      showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
    }
  };

63 64
  const confirm = async () => {
    if (!value) {
Giang Tran committed
65
      showAlert(TYPE.WARN, I18n.t('Notification'), I18n.t('EnterOTPRequest'));
66
    } else if (value.length != 4) {
Giang Tran committed
67
      showAlert(TYPE.WARN, I18n.t('Notification'), I18n.t('OTPInvalid'));
68 69 70 71 72 73
    } else {
      propsa.showLoading();
      const res = await verifyOTPApi({
        platform: Platform.OS,
        receiver_name: propsa.route.params.email,
        otp: value,
Giang Tran committed
74
        type: 'FORGOT_PASSWORD',
75 76 77 78 79 80 81 82 83 84
      });

      propsa.hideLoading();

      if (res.data.code == 200) {
        navigate.navigate(NEWPASSWORD, {
          otp: value,
          email: propsa.route.params.email,
        });
      } else {
Giang Tran committed
85
        showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
86 87 88 89
      }
    }
  };

Giang Tran committed
90 91
  return (
    <View style={{flex: 1}}>
Giang Tran committed
92
      <HeaderBack title={'VerifyOTP'} />
Giang Tran committed
93 94 95 96 97

      <View style={styles.container}>
        <View style={{height: 20}} />

        <View style={styles.wrap}>
Giang Tran committed
98
          <AppText i18nKey={'Verify_code'} style={styles.txtTitle} />
Giang Tran committed
99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123
          <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}>
124
        <TouchableOpacity onPress={confirm} style={styles.btn}>
Giang Tran committed
125
          <AppText i18nKey={'Continue'} style={styles.txtBtn} />
Giang Tran committed
126
        </TouchableOpacity>
Giang Tran committed
127
        <TouchableOpacity style={styles.wrapFooter} onPress={getOTP}>
128
          <Text style={styles.txtNote}>{I18n.t('OTPValidFiveMinute')}</Text>
Giang Tran committed
129
          <AppText i18nKey={'Re_send'} style={styles.txtSend} />
Giang Tran committed
130
        </TouchableOpacity>
Giang Tran committed
131
        <CountDown isReset={isReset} />
Giang Tran committed
132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165
      </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,
  },
166

Giang Tran committed
167 168 169 170
  focusCell: {
    borderColor: '#000',
  },
  cellRoot: {
171 172
    width: 40,
    height: 40,
Giang Tran committed
173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207
    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',
  },
Giang Tran committed
208 209 210 211 212 213 214 215 216 217
  wrapFooter: {
    marginTop: 30,
    flexDirection: 'row',
    alignItems: 'center',
  },
  txtNote: {
    color: '#A2A2A2',
    fontSize: getFontXD(42),
    fontStyle: 'italic',
  },
Giang Tran committed
218 219
});

220 221 222 223 224
const mapStateToProps = (state) => {
  return {};
};

export default connect(mapStateToProps, {showLoading, hideLoading})(ConfirmOTP);