unioil-loyalty-rn-app/app/screens/account/birthdate.js

515 lines
22 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)
}
)
}
submitForm = () => {
NetInfo.netstatus(isConnected => {
if(isConnected) {
this.onSubmit(success => {
this.requestOTP(success.lcard_uuid, success.mobile_number, onSuccess => {
this.setState({ loading: false })
console.log(onSuccess, this.props)
if(onSuccess.status == 1) {
this.props.navigation.navigate("AccountOtp", {
data: success,
callback: this.props.route.params?.callback,
type: this.props.route.params?.type
})
}
}, onError => {
this.setState({ loading: false })
})
}, error => {
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)
// DB.setsession(sessiondata, (res) => {
// successCallback(sessiondata)
// }, (error) => {
// errorCallback(error)
// })
} else {
this.setState({ loading: false })
if(Platform.OS == 'ios'){
setTimeout(() => {
Alert.alert("Error", '\n' + data.message)
}, 700)
}else{
Alert.alert("Error", data.message)
}
errorCallback()
}
console.log("RESPONSE: " , data.message)
}, (error) => {
this.setState({ loading: false })
errorCallback(error)
console.log(error)
})
}
}
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) : new Date(Date.now())}
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("DD MMM 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)
// export default function LoginBirthday(navigation) {
// var pickerRef = useRef()
// const [loading, setloading] = useState(false);
// const [datepicker, setdatepicker] = useState(false);
// const [focus, setfocus] = useState(false);
// const [activeInput, setActiveInput] = useState(null);
// const [agree, setagree] = useState(false);
// const [birthdate, setbirthdate] = useState("");
// const [cardnumber, setcardnumber] = useState(null);
// const [deviceUUID, setdeviceUUID] = useState(null);
// const [valid, setvalid] = useState(false);
// // const cardnumber = navigation.route.params.cardnumber || ""
// const init = async () => {
// await setcardnumber(navigation.route.params?.cardnumber)
// await setdeviceUUID(navigation.route.params?.deviceUUID)
// }
// useEffect(() => {
// init()
// }, [])
// const setCardNumber = () => {
// setvalid(cardnumber.length == 15 ? true : false)
// }
// const onAgree = () => {
// setagree(agree == false ? true : false)
// // console.log(cardnumber, agree, birthdate)
// if(cardnumber && !agree && birthdate){
// setvalid(true)
// }else{
// setvalid(false)
// }
// }
// const FCMRegister = async () => {
// let fcmRegistration = await DB.get("fcmRegistration")
// let fcmToken = await DB.get("fcmToken")
// if(fcmRegistration == "new"){
// REQUEST("fcm_registration", "post", {}, {}, {
// token: fcmToken,
// c_number: cardnumber,
// notifs: ""
// }, function(res){
// console.log(res)
// DB.set("fcmRegistration", "registered", (r) => console.log(r), (e) => console.log(e))
// }, function(error){
// console.log(error)
// })
// }
// }
// const requestOTP = async (lcard_uuid, mobile_number, successCallback, errorCallback) => {
// setloading(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)
// }
// )
// }
// const onSubmit = async () => {
// if(valid){
// setloading(true)
// console.log("BDAY",birthdate)
// console.log("UUID",deviceUUID)
// console.log("cn",cardnumber)
// // let formatbday = new moment(new Date(birthdate)).format("YYYY-MM-DD")
// let formatbday = Theme.formatter.DT4API(birthdate)
// await REQUEST("login", "post", {}, {}, {
// birthdate: formatbday,
// deviceUUID: deviceUUID,
// card_number: cardnumber
// }, function(data){
// if(data.data?.lcard_uuid && data.status == 1){
// let sessiondata = {
// birthdate: formatbday,
// card_number: cardnumber,
// lcard_uuid: data.data?.lcard_uuid,
// mobile_number: data.data?.mobile_number
// }
// DB.setsession(sessiondata, function(res){
// requestOTP(sessiondata.lcard_uuid, sessiondata.mobile_number, success => {
// setloading(false)
// if(success.status == 1) {
// navigation.navigation.navigate("AccountOtp", {
// data: sessiondata,
// callback: navigation.route.params?.callback,
// type: navigation.route.params?.type
// })
// }
// }, error => {
// setloading(false)
// })
// // navigation.navigation.navigate("AccountSendOtp", {data: data.data, callback: navigation.route.params?.callback, type: navigation.route.params?.type})
// }, function(error){
// console.log(error)
// })
// }else{
// setloading(false)
// if(Platform.OS == 'ios'){
// setTimeout(() => {
// Alert.alert("Error", '\n' + data.message)
// }, 700)
// }else{
// Alert.alert("Error", data.message)
// }
// }
// console.log("RESPONSE: " , data.message)
// }, function(error){
// setloading(false)
// console.log(error)
// })
// }
// }
// return (
// <SafeAreaView style={{flex: 1}}>
// <Elements.loaderView
// title="Validating"
// message="Please wait..."
// color={Theme.colors.black}
// visible={loading} />
// <CustomHeader title="" menu={false} back={true} onBackPress={() => navigation.navigation.goBack()} navigation={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: Theme.colors.textPrimary}}>Login</Text>
// <Text style={{alignSelf: 'center', marginTop: 5, color: 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: Theme.colors.darkGray}}>{cardnumber}</Text>
// <TouchableOpacity onPress={() => navigation.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={() => {
// setdatepicker(true)
// // console.log(pickerRef)
// // pickerRef.showDatePicker()
// }} style={{}}>
// <Text style={{fontSize: 14, color: Theme.colors.darkGray}}>Birthday</Text>
// <View style={{paddingTop: 15, paddingBottom: 5,borderColor: 'gray',borderBottomWidth: 1}}>
// <Text style={{fontSize: 17, fontFamily: 'Arial', color: birthdate ? Theme.colors.textPrimary : Theme.colors.darkGray}}>{birthdate || "Select Date"}</Text>
// </View>
// </TouchableOpacity>
// </View>
// </View>
// <View style={{flexDirection: 'row', width: '80%', marginTop: 15, alignItems: 'center'}}>
// <TouchableOpacity onPress={birthdate ? onAgree : null} style={{flex: 0, paddingTop: 15}}>
// {!agree ? <Icon.Feather 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: Theme.colors.textPrimary}}>I agree to </Text>
// <TouchableOpacity onPress={() => navigation.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={() => {
// NetInfo.fetch().then(state => {
// console.log("Connection type", state.type);
// console.log("Is connected?", state.isConnected);
// if(state.isConnected){
// onSubmit()
// }else{
// Elements.nointernet2()
// }
// })
// }} disabled={!valid} style={{padding: 20, paddingTop: 15, width: Theme.screen.w - 60, paddingBottom: 15, borderRadius: 10, backgroundColor: valid ? Theme.colors.primary : Theme.colors.primary + "15"}}>
// <Text style={{fontSize: 16, fontFamily: 'Arial', textAlign: 'center', color: '#fff'}}>Next</Text>
// </TouchableOpacity>
// </View>
// </View>
// </View>
// <Elements.CustomDatePicker
// visible={datepicker}
// date={birthdate ? new Date(birthdate) : new Date(Date.now())}
// onConfirm={(selectedDate) => {
// // console.warn("A date has been picked: ", selectedDate)
// setbirthdate(selectedDate ? moment(selectedDate).format("DD MMM YYYY") : birthdate != null ? birthdate : null)
// setdatepicker(false)
// }}
// onCancel={() => setdatepicker(false)}
// />
// {/* <Modal
// animationType="none"
// transparent={true}
// visible={datepicker}
// style={{flex: 1, height: 400}}
// >
// <Content>
// <TouchableOpacity style={{
// flex: 1,
// justifyContent: "center",
// alignItems: "center",
// backgroundColor: '#00000090',
// padding: 30}}
// >
// <TouchableOpacity activeOpacity={1} style={{backgroundColor: '#fff', padding: 20, width: '95%'}}>
// <DateTimePicker
// testID="BirthDate"
// timeZoneOffsetInMinutes={0}
// value={birthdate ? new Date(birthdate) : new Date(Date.now())}
// mode={"date"}
// is24Hour={true}
// display="spinner"
// style={{ height: 220, backgroundColor: "#fff"}}
// onChange={(event, selectedDate) => {
// setbirthdate(selectedDate ? moment(selectedDate).subtract(1, "days").format("DD MMM YYYY") : birthdate != null ? birthdate : null)
// }}
// />
// <DatePicker
// // defaultDate={new Date(2018, 4, 4)}
// ref={(r) => pickerRef = r}
// minimumDate={new Date(2018, 1, 1)}
// maximumDate={new Date(2018, 12, 31)}
// locale={"en"}
// timeZoneOffsetInMinutes={undefined}
// modalTransparent={true}
// animationType={"fade"}
// androidMode={"default"}
// placeHolderText="Select date"
// textStyle={{ color: "green" }}
// placeHolderTextStyle={{ color: "#d3d3d3" }}
// onDateChange={this.setDate}
// disabled={false}
// />
// <View style={{ marginTop: 15, marginBottom: 0, flexDirection: 'row', justifyContent: 'flex-end', alignItems: 'flex-end'}}>
// <TouchableOpacity onPress={() => setdatepicker(false)} style={{padding: 10, marginRight: 5}}>
// <Text style={{color: Theme.colors.accent, fontWeight: 'bold'}}>CANCEL</Text>
// </TouchableOpacity>
// <TouchableOpacity onPress={() => {
// setagree(false)
// setdatepicker(false)
// }} style={{padding: 10, marginLeft: 5}}>
// <Text style={{color: Theme.colors.accent, fontWeight: 'bold'}}>OK</Text>
// </TouchableOpacity>
// </View>
// </TouchableOpacity>
// </TouchableOpacity>
// </Content>
// </Modal> */}
// {/* {datepicker ? <DateTimePicker
// testID="BirthDate"
// timeZoneOffsetInMinutes={0}
// value={birthdate ? new Date(birthdate) : new Date(Date.now())}
// mode={"date"}
// is24Hour={true}
// display="spinner"
// style={{ height: '100%', backgroundColor: "#fff"}}
// onChange={(event, selectedDate) => {
// setdatepicker(false)
// setagree(false)
// setbirthdate(selectedDate ? moment(selectedDate).format("DD MMM YYYY") : birthdate != null ? birthdate : null)
// }}
// /> : null} */}
// </SafeAreaView>
// );
// }
const styles = StyleSheet.create({
input: {
flex: 1, padding: 0, margin: 5, fontSize: 18, textAlign: 'center', borderBottomColor: Theme.colors.accent, borderBottomWidth: 1.5
}
});