215 lines
9.7 KiB
JavaScript
215 lines
9.7 KiB
JavaScript
import * as React from 'react';
|
|
import { useState, useEffect, useRef } from 'react';
|
|
import { connect } from "react-redux";
|
|
import { Platform, StyleSheet, SafeAreaView, TouchableOpacity, Button, View, Text, Image, TextInput, Alert, Modal } 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 Elements from '../../components/elements.js';
|
|
import Theme from '../../components/theme.style.js';
|
|
import Icon from '../../components/icons.js';
|
|
import moment from 'moment';
|
|
import DB, { setsession } from '../../components/storage/';
|
|
import REQUEST from '../../components/api/';
|
|
import CustomSafeArea from '../../components/safeArea.component';
|
|
|
|
class LoginBirthday extends React.Component {
|
|
|
|
constructor(props) {
|
|
super(props)
|
|
}
|
|
|
|
state = {
|
|
loading: false,
|
|
datepicker: false,
|
|
focus: false,
|
|
activeInput: null,
|
|
agree: false,
|
|
birthdate: "",
|
|
cardnumber: null,
|
|
deviceUUID: null,
|
|
valid: false,
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.init()
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
|
|
}
|
|
|
|
init = async () => {
|
|
this.setState({ cardnumber: this.props.route.params?.cardnumber, deviceUUID: this.props.route.params?.deviceUUID })
|
|
}
|
|
|
|
setCardNumber = () => {
|
|
this.setState({ valid: cardnumber.length == 15 ? true : false })
|
|
}
|
|
|
|
onAgree = () => {
|
|
this.setState({ agree: this.state.agree == false ? true : false })
|
|
if(this.state.cardnumber && !this.state.agree && this.state.birthdate){
|
|
this.setState({ valid: true })
|
|
}else{
|
|
this.setState({ valid: false })
|
|
}
|
|
}
|
|
|
|
requestOTP = async (lcard_uuid, mobile_number, successCallback, errorCallback) => {
|
|
this.setState({ loading: true })
|
|
let params = `lcard_uuid=${lcard_uuid}&mobile=${Theme.formatter.PMBL(mobile_number)}&is_resend=false`;
|
|
await REQUEST("requestOTP", "get", {}, params, {},
|
|
function(res){
|
|
successCallback(res)
|
|
}, function(error){
|
|
errorCallback(error)
|
|
}, "OTP", "Request"
|
|
)
|
|
}
|
|
|
|
submitForm = () => {
|
|
NetInfo.netstatus(isConnected => {
|
|
if(isConnected) {
|
|
this.onSubmit(success => {
|
|
this.requestOTP(success.lcard_uuid, success.mobile_number, onSuccess => {
|
|
this.setState({ loading: false })
|
|
if(onSuccess.status == 1) {
|
|
this.props.navigation.navigate("AccountOtp", {
|
|
data: success,
|
|
callback: this.props.route.params?.callback,
|
|
type: this.props.route.params?.type
|
|
})
|
|
}
|
|
}, err => {
|
|
Alert.alert("Information", `\n${err.message}`);
|
|
this.setState({ loading: false })
|
|
})
|
|
}, err => {
|
|
Alert.alert("Information", `\n${err.message}`);
|
|
this.setState({ loading: false })
|
|
})
|
|
} else {
|
|
Elements.nointernet2(this.props)
|
|
}
|
|
})
|
|
}
|
|
|
|
onSubmit = async (successCallback, errorCallback) => {
|
|
if(this.state.valid){
|
|
this.setState({ loading: true })
|
|
let formatbday = Theme.formatter.DT4API(this.state.birthdate)
|
|
await REQUEST("login", "post", {}, {}, {
|
|
birthdate: formatbday,
|
|
deviceUUID: this.state.deviceUUID,
|
|
card_number: this.state.cardnumber
|
|
}, (data) => {
|
|
if(data.data?.lcard_uuid && data.status == 1) {
|
|
let sessiondata = {
|
|
birthdate: formatbday,
|
|
card_number: this.state.cardnumber,
|
|
lcard_uuid: data.data?.lcard_uuid,
|
|
mobile_number: data.data?.mobile_number
|
|
}
|
|
successCallback(sessiondata)
|
|
} else {
|
|
this.setState({ loading: false })
|
|
if(Platform.OS == 'ios'){
|
|
setTimeout(() => {
|
|
Alert.alert("Information", '\n' + data.message)
|
|
}, 700)
|
|
}else{
|
|
Alert.alert("Information", '\n' + data.message)
|
|
}
|
|
errorCallback()
|
|
}
|
|
}, (error) => {
|
|
this.setState({ loading: false })
|
|
errorCallback(error)
|
|
}, "Login Credentials", "Submit")
|
|
}
|
|
}
|
|
|
|
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}}>
|
|
<View style={{width: '100%', height: 90, alignSelf: 'center', marginTop: 50}}>
|
|
<Image source={Assets.logo.unioil} style={{width: '100%', height: '85%', resizeMode: 'contain'}} />
|
|
</View>
|
|
<View style={{flex: 1, alignItems: 'center'}}>
|
|
<Text style={{alignSelf: 'center', fontFamily: 'Arial', fontWeight: 'bold', fontSize: 25, padding: 15, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary}}>Login</Text>
|
|
<Text style={{alignSelf: 'center', marginTop: 5, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary, fontFamily: 'Arial', fontSize: 16}}>
|
|
Have an activated card?
|
|
</Text>
|
|
<View style={{flexDirection: 'row', width: '80%', marginTop: 20, alignItems: 'center'}}>
|
|
<View style={{flex: 1, flexDirection: 'row', padding: 20, paddingVertical: 15, borderColor: 'lightgray', borderWidth: 1}}>
|
|
<Text style={{flex: 4, alignSelf: 'flex-end', textAlign: 'center', fontSize: 17, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.darkGray}}>{this.state.cardnumber}</Text>
|
|
<TouchableOpacity onPress={() => this.props.navigation.goBack()} style={{flex: 0.4, alignSelf: 'flex-end', textAlign: 'right'}}>
|
|
<Icon.AntDesign name="close" size={20} color={Theme.colors.darkGray} />
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
<View style={{flexDirection: 'row', width: '80%', marginTop: 15, alignItems: 'center'}}>
|
|
<View style={{flex: 1}}>
|
|
<TouchableOpacity onPress={() => this.setState({ datepicker: true })}>
|
|
<Text style={{fontSize: 14, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.darkGray}}>Birthday</Text>
|
|
<View style={{paddingTop: 15, paddingBottom: 5,borderColor: 'gray',borderBottomWidth: 1}}>
|
|
<Text style={{fontSize: 17, fontFamily: 'Arial', color: (this.props.app_theme?.theme.dark && this.state.birthdate) ? this.props.app_theme?.theme.colors.text : this.state.birthdate ? Theme.colors.textPrimary : Theme.colors.darkGray}}>{this.state.birthdate || "Select Date"}</Text>
|
|
</View>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
<View style={{flexDirection: 'row', width: '80%', marginTop: 15, alignItems: 'center'}}>
|
|
<TouchableOpacity onPress={() => this.state.birthdate ? this.onAgree() : null} style={{flex: 0, paddingTop: 15}}>
|
|
{!this.state.agree ? <Icon.Feather color={this.props.app_theme?.theme.colors.text} name="square" size={20} /> : <Icon.AntDesign name="checksquare" color={Theme.colors.accent} size={20} />}
|
|
</TouchableOpacity>
|
|
<View style={{flex: 1, paddingTop: 10, paddingHorizontal: 10}}>
|
|
<View style={{flexDirection: 'row', paddingTop: 5}}>
|
|
<Text style={{ color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary}}>I agree to </Text>
|
|
<TouchableOpacity onPress={() => this.props.navigation.navigate("TermsConditions", {screen: "back"})}>
|
|
<Text style={{color: Theme.colors.primary}}>Unioil's Data Privacy Policy.</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
<View style={{alignItems: 'center', justifyContent: 'flex-end', padding: 20, marginTop: 0}}>
|
|
<TouchableOpacity onPress={() => this.submitForm()} disabled={!this.state.valid} style={{padding: 20, paddingTop: 15, width: Theme.screen.w - 60, paddingBottom: 15, borderRadius: 10, backgroundColor: this.state.valid ? Theme.colors.primary : this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.border : Theme.colors.primary + "15"}}>
|
|
<Text style={{fontSize: 16, fontFamily: 'Arial', textAlign: 'center', color: '#fff'}}>Next</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
<Elements.CustomDatePicker
|
|
visible={this.state.datepicker}
|
|
date={this.state.birthdate && new Date(this.state.birthdate)}
|
|
textColor={this.props.app_theme?.theme.colors.text}
|
|
isDarkMode={this.props.app_theme?.theme.dark}
|
|
modalBackgroundColor={this.props.app_theme?.theme.colors.border}
|
|
onConfirm={(selectedDate) => {
|
|
this.setState({ birthdate: selectedDate ? moment(selectedDate).format("MMMM DD, YYYY") : this.state.birthdate != null ? this.state.birthdate : null, datepicker: false })
|
|
}}
|
|
onCancel={() => this.setState({ datepicker: false })}
|
|
/>
|
|
</CustomSafeArea>
|
|
);
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = (state) => {
|
|
return {
|
|
app_theme: state.appThemeReducer.theme
|
|
}
|
|
}
|
|
|
|
export default connect(mapStateToProps, null)(LoginBirthday); |