unioil-loyalty-rn-app/app/screens/apply/otp.js

import * as React from 'react';
import { 
  StyleSheet, 
  TouchableOpacity, 
  View, 
  Text, 
  KeyboardAvoidingView, 
  Alert, 
  Platform
} from 'react-native';
import { connect } from "react-redux";
import NetInfo from "../../components/netstatus";
import CustomHeader from '../../components/header.js';
import Elements from '../../components/elements.js';
import Theme from '../../components/theme.style.js';
import DB from '../../components/storage/';
import REQUEST from '../../components/api/';
import CustomOTPInput from '../../components/otpinput';
import CustomSafeArea from '../../components/safeArea.component';

class TermsConditions extends React.Component {

  constructor(props) {
    super(props)
  }

  state = {
    loading: false,
    infodialog: false,
    errordialog: false,
    otp: "",
    resend: false,
    retries: 0,
    valid: false,
    session: null,
    data: {}
  }

  componentDidMount() {
    this.init()
    this.activateResend()
  }

  componentWillUnmount() {

  }

  init = async () => {
    let session = await DB.get("session")
    this.setState({ data: this.props.route.params, session: session })
  }

  activateResend = () => {
    setTimeout(() => {
      this.setState({ resend: true })
    }, 15000)
  }

  encyptNumber = (contact) => {
    let replacement = "****"
    let index = 6
    return contact.substr(0, index) + replacement+ contact.substr(index + replacement.length)
  }  

  getRetries = () => { return retries }

  onRetry = async () => {
    if(this.state.resend){
      this.setState({ loading: true })
      let params = `lcard_uuid=${this.state.data.lcard_uuid}&mobile=${Theme.formatter.PMBL(this.state.data.mobile_number)}&is_resend=true`;
      await REQUEST("requestOTP", "get", {}, params, {}, 
        (res) => {
          if(res.status == 1) {
            this.setState({ loading: false })
            Platform.OS == 'ios' ? setTimeout(() => {
              Alert.alert("Requested.", '\n' + "New OTP code will be submitted on your mobile number.")
            }, 300) : Alert.alert("Requested.", '\n' + "New OTP code will be submitted on your mobile number.")
          } else {
            this.setState({ loading: false })
          }
        }, (err) => {
          Alert.alert("Information", `\n${err.message}`);
          this.setState({ loading: false })
        }, "OTP", "Request")        
    }
  }

  submitProcess = () => {
    NetInfo.netstatus(isConnected => {
      if(isConnected) {
        this.onSubmit()
      } else {
        Elements.nointernet2(this.props)
      }
    })
  }

  onSubmit = async () => {
    this.setState({ loading: true, retries: this.state.retries + 1 })
    await REQUEST("sendOTP", "post", {}, {}, {
      otp: this.state.otp,
      lcard_uuid: this.state.data.lcard_uuid
    }, async (data) => {
      const {target, callback, catcher} = this.props.route.params
      if(data.status == 1 && data.data.token){
        this.setState({ loading: false })
        if(callback) await callback(data.data.token)
        this.props.navigation.goBack()
        return false
      }else{
        this.setState({ loading: false })
        if(Platform.OS == 'ios') {
          setTimeout(() => {
            Alert.alert("Information", '\n' + data.message)
            this.setState({ resend: true })
          }, 700)
        } else {
          Alert.alert("Information", '\n' + data.message)
          this.setState({ resend: true })
        }
      }
    }, (err) => {
      Alert.alert("Information", `\n${err.message}`);
      this.setState({ resend: true, loading: false })
    }, "OTP", "Send")
  }
  
  showContent = () => {
    return (
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <Text style={{padding: 15, fontSize: 22, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary, fontWeight: 'bold'}}>Enter Code</Text>
        <Text style={{padding: 5, fontSize: 16, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary, width: '85%', textAlign: 'center'}}>Enter the 4-digit verification code sent to</Text>
        <Text style={{padding: 15, paddingTop: 5, fontSize: 15, color: Theme.colors.accent, width: '85%', textAlign: 'center'}}>{Theme.formatter.ENCMBL(this.state.data.mobile_number || "+639000000000")}</Text>
        
        <CustomOTPInput
          containerStyle={{ marginBottom: 30 }}  
          textColor={this.props.app_theme?.theme.colors.text}
          isDarkMode={this.props.app_theme?.theme.dark}
          onChangeText={(v) => {
            this.setState({ otp: v, valid: v.length == 4 ? true : false })
          }}
        />

        <TouchableOpacity
        disabled={!this.state.valid}
        onPress={() => this.submitProcess()} style={{backgroundColor: this.state.valid ? Theme.colors.primary : this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.border : Theme.colors.primary + "15", padding: 15, width: '80%', borderRadius: 10, elevation: this.state.valid ? 3 : 0}}>
          <Text style={{textAlign: 'center', color: "#fff", fontSize: 16}}>Submit</Text>
        </TouchableOpacity>

        <View style={{flexDirection: 'row', width: '80%', padding: 30}}>
          <TouchableOpacity activeOpacity={1} onPress={() => this.onRetry()} style={{flex: 2}}>
            <Text style={{textAlign: 'center', color: this.state.resend ? Theme.colors.primary : Theme.colors.darkGray, fontSize: 16}}>Resend Code</Text>
          </TouchableOpacity>
        </View>
        <View style={{padding: 70}}></View>
      </View>
    )
  }

  render() {
    return (
      <CustomSafeArea >
        <Elements.loaderView 
          title="Validating"
          message="Please wait..."
          isDarkMode={this.props.app_theme?.theme.dark}
          backgroundColor={this.props.app_theme?.theme.colors.border}
          color={this.props.app_theme?.theme.colors.text}
          visible={this.state.loading} />

        <Elements.infodialog 
          title="Requested." 
          message="New OTP code will be submitted on your mobile number."
          buttonConfirmText="OK" 
          shown={this.state.infodialog}
          onCancel={() => this.setState({ infodialog: false })}
          onSubmit={(value) => this.setState({ infodialog: false })}
        />
  
        <Elements.infodialog 
          title="Information" 
          message="Incorrect OTP. The OTP you have entered does not exist."
          buttonConfirmText="OK" 
          shown={this.state.errordialog}
          onCancel={() => this.setState({ errordialog: false })}
          onSubmit={(value) => this.setState({ errordialog: false })}
        />
  
        <CustomHeader title="" menu={false} back={true} onBackPress={() => this.props.navigation.goBack()} navigation={this.props.navigation} />
        {
          Theme.platform === "android" ?
            this.showContent()
            :
            <KeyboardAvoidingView
              style={{flex: 1}}
              behavior='padding'
              keyboardVerticalOffset={Platform.OS === 'ios' ? 50 : 70}
            >
              {this.showContent()}
            </KeyboardAvoidingView>
        }
      </CustomSafeArea>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    app_theme: state.appThemeReducer.theme
  }
}

export default connect(mapStateToProps, null)(TermsConditions);