498 lines
21 KiB
JavaScript
498 lines
21 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 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 from '../../components/storage/';
|
|
import REQUEST from '../../components/api/';
|
|
import CustomSafeArea from '../../components/safeArea.component.js';
|
|
|
|
|
|
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 init = async () => {
|
|
await setcardnumber(navigation.route.params?.cardnumber)
|
|
await setdeviceUUID(navigation.route.params?.deviceUUID)
|
|
await DB.remove("is_guest")
|
|
}
|
|
|
|
useEffect(() => {
|
|
init()
|
|
}, [])
|
|
|
|
const setCardNumber = () => {
|
|
setvalid(cardnumber.length == 15 ? true : false)
|
|
}
|
|
|
|
const onAgree = () => {
|
|
setagree(agree == false ? true : false)
|
|
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 onSubmit = async () => {
|
|
if(valid){
|
|
setloading(true)
|
|
console.log("BDAY",birthdate)
|
|
console.log("UUID",deviceUUID)
|
|
console.log("cn",cardnumber)
|
|
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){
|
|
|
|
//MOBILE NUMBER FROM MOBILE API
|
|
let MOBILE = data.data?.mobile_number
|
|
|
|
//MOBILE NUMBER FROM LOYALTY CMS
|
|
let STMOBILE = data.data?.state_retrieve.mobile
|
|
|
|
let sessiondata = {
|
|
birthdate: formatbday,
|
|
card_number: cardnumber,
|
|
lcard_uuid: data.data?.lcard_uuid,
|
|
mobile_number: MOBILE != STMOBILE ? STMOBILE : MOBILE
|
|
}
|
|
console.log("LOGIN RES", MOBILE, STMOBILE)
|
|
|
|
setloading(false)
|
|
console.log("SESSION DATA", sessiondata)
|
|
DB.setsession(sessiondata, function(res){
|
|
navigation.navigation.navigate("LoginSendOTP", {
|
|
lcard_uuid: data.data?.lcard_uuid,
|
|
mobile_number: MOBILE != STMOBILE ? STMOBILE : MOBILE
|
|
})
|
|
}, 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 (
|
|
<CustomSafeArea>
|
|
<Elements.loader visible={loading} />
|
|
|
|
<CustomHeader title="" menu={false} back={true} backscreen={navigation.route.params?.screen ? navigation.route.params?.screen : "Login"} 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.navigate("Login")} 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)
|
|
}} 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: "LoginBirthday"})}>
|
|
<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())}
|
|
textColor={navigation.app_theme?.theme.colors.text}
|
|
isDarkMode={navigation.app_theme?.theme.dark}
|
|
modalBackgroundColor={navigation.app_theme?.theme.colors.border}
|
|
onConfirm={(selectedDate) => {
|
|
setbirthdate(selectedDate ? moment(selectedDate).format("DD MMM YYYY") : birthdate != null ? birthdate : null)
|
|
setdatepicker(false)
|
|
}}
|
|
onCancel={() => setdatepicker(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)
|
|
// await DB.remove("is_guest")
|
|
// }
|
|
|
|
// 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 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){
|
|
|
|
// //MOBILE NUMBER FROM MOBILE API
|
|
// let MOBILE = data.data?.mobile_number
|
|
|
|
// //MOBILE NUMBER FROM LOYALTY CMS
|
|
// let STMOBILE = data.data?.state_retrieve.mobile
|
|
|
|
// let sessiondata = {
|
|
// birthdate: formatbday,
|
|
// card_number: cardnumber,
|
|
// lcard_uuid: data.data?.lcard_uuid,
|
|
// mobile_number: MOBILE != STMOBILE ? STMOBILE : MOBILE
|
|
// }
|
|
// console.log("LOGIN RES", MOBILE, STMOBILE)
|
|
|
|
// setloading(false)
|
|
// console.log("SESSION DATA", sessiondata)
|
|
// DB.setsession(sessiondata, function(res){
|
|
// navigation.navigation.navigate("LoginSendOTP", {
|
|
// lcard_uuid: data.data?.lcard_uuid,
|
|
// mobile_number: MOBILE != STMOBILE ? STMOBILE : MOBILE
|
|
// })
|
|
// }, 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)
|
|
// })
|
|
// }
|
|
// // if(valid) navigation.navigation.navigate("LoginSendOTP")
|
|
// }
|
|
|
|
// return (
|
|
// <SafeAreaView style={{flex: 1}}>
|
|
// <Elements.loader visible={loading} />
|
|
|
|
// <CustomHeader title="" menu={false} back={true} backscreen={navigation.route.params?.screen ? navigation.route.params?.screen : "Login"} 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.navigate("Login")} 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: "LoginBirthday"})}>
|
|
// <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
|
|
}
|
|
}); |