120 lines
4.7 KiB
JavaScript
120 lines
4.7 KiB
JavaScript
import * as React from 'react';
|
|
import { useState, useEffect } from 'react';
|
|
import { connect } from "react-redux";
|
|
import { SafeAreaView, ScrollView, TouchableOpacity, Button, View, Text, Linking } from 'react-native';
|
|
import {useNetInfo} from "@react-native-community/netinfo";
|
|
// import NetInfo from "@react-native-community/netinfo";
|
|
import NetInfo from "../../components/netstatus";
|
|
import CustomHeader from '../../components/header.js';
|
|
import Assets from '../../components/assets.manager.js';
|
|
import Theme from '../../components/theme.style.js';
|
|
import Elements from '../../components/elements.js';
|
|
import REQUEST from '../../components/api/';
|
|
import { ContactOptions, ContactOptionsWithParams } from '../../components/contact.action';
|
|
import DB from '../../components/storage/index';
|
|
import CustomSafeArea from '../../components/safeArea.component';
|
|
|
|
class LoginSendOTP extends React.PureComponent {
|
|
|
|
constructor(props) {
|
|
super(props)
|
|
}
|
|
|
|
state = {
|
|
loading: false,
|
|
data: {},
|
|
contact: {},
|
|
contactselect: false,
|
|
mobile_number: null,
|
|
openOptions: false
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.init()
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
|
|
}
|
|
|
|
init = async () => {
|
|
this.setState({ data: this.props.route.params.data, mobile_number: this.props.route.params.mobile_number })
|
|
}
|
|
|
|
onSend = () => {
|
|
NetInfo.netstatus(isConnected => {
|
|
if(isConnected) {
|
|
this.requestOTP(success => {
|
|
this.setState({ loading: false })
|
|
if(success.status == 1) {
|
|
this.props.navigation.navigate("AccountOtp", {
|
|
data: this.state.data,
|
|
callback: this.props.route.params?.callback,
|
|
type: this.props.route.params?.type
|
|
})
|
|
}
|
|
}, err => {
|
|
Alert.alert("Information", `\n${err.message}`);
|
|
this.setState({ loading: false })
|
|
})
|
|
} else {
|
|
Elements.nointernet2(this.props)
|
|
}
|
|
})
|
|
}
|
|
|
|
requestOTP = async (successCallback, errorCallback) => {
|
|
this.setState({ loading: true })
|
|
let params = `lcard_uuid=${this.state.data.lcard_uuid}&mobile=${Theme.formatter.PMBL(this.state.data.mobile_number)}&is_resend=false`;
|
|
await REQUEST("requestOTP", "get", {}, params, {},
|
|
function(res){
|
|
successCallback(res)
|
|
}, function(error){
|
|
errorCallback(error)
|
|
}, "OTP", "Request")
|
|
}
|
|
|
|
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} />
|
|
<CustomHeader title="" menu={false} back={true} onBackPress={() => this.props.navigation.goBack()} navigation={this.props.navigation} />
|
|
<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'}}>Please Confirm</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'}}>We will send you a One Time Passcode to</Text>
|
|
<Text style={{padding: 15, fontSize: 15, color: Theme.colors.accent, width: '85%', textAlign: 'center'}}>{Theme.formatter.ENCMBL(this.state.data.mobile_number || "+639000000000")}</Text>
|
|
<TouchableOpacity onPress={() => this.onSend()} style={{backgroundColor: Theme.colors.primary, padding: 15, width: '80%', borderRadius: 10, elevation: 3}}>
|
|
<Text style={{textAlign: 'center', color: "#fff", fontSize: 16}}>Send me the code</Text>
|
|
</TouchableOpacity>
|
|
<View style={{flexDirection: 'row', width: '80%', padding: 15}}>
|
|
<Text style={{flex: 4, textAlign: 'right', color: this.props.app_theme?.theme.colors.text}}>Not your mobile number? </Text>
|
|
<TouchableOpacity onPress={() => this.setState({ openOptions: true })} style={{flex: 2}}>
|
|
<Text style={{textAlign: 'center', color: Theme.colors.primary}}>Contact Us</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
|
|
<ContactOptionsWithParams
|
|
params={{ cardnumber: this.state.data?.card_number }}
|
|
isOpen={this.state.openOptions}
|
|
onClose={() => this.setState({ openOptions: false })}
|
|
/>
|
|
</CustomSafeArea>
|
|
);
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = (state) => {
|
|
return {
|
|
app_theme: state.appThemeReducer.theme
|
|
}
|
|
}
|
|
|
|
export default connect(mapStateToProps, null)(LoginSendOTP)
|