141 lines
3.7 KiB
JavaScript
141 lines
3.7 KiB
JavaScript
import * as React from 'react';
|
|
import { View } from 'react-native';
|
|
import { connect } from "react-redux";
|
|
import { saveUserInfo } from "../../redux/actions/AppUserInfoActions";
|
|
import NetInfo from "../../components/netstatus";
|
|
import Carousel from '../../components/carousel';
|
|
import Assets from '../../components/assets.manager.js';
|
|
import DB from '../../components/storage';
|
|
import Theme from '../../components/theme.style.js';
|
|
|
|
|
|
class OnBoarding extends React.PureComponent {
|
|
|
|
constructor(props) {
|
|
super(props)
|
|
}
|
|
|
|
slides = [{
|
|
image: Assets.boarding[0],
|
|
title: "Earn Rewards",
|
|
subtitle: "Earn points as fuel rebates or use points to redeem special offers from our partner merchants."
|
|
}, {
|
|
image: Assets.boarding[1],
|
|
title: "Locate Stations",
|
|
subtitle: "Find a Unioil station near you or check fuel prices and products offered through our station locator."
|
|
}, {
|
|
image: Assets.boarding[2],
|
|
title: "Top Up Your Card",
|
|
subtitle: "Load up your card with points to use on your next fuel purchases."
|
|
}, {
|
|
image: Assets.boarding[3],
|
|
title: "Track Vehicle Performance",
|
|
subtitle: "Monitor your fuel efficiency."
|
|
}]
|
|
|
|
state = {
|
|
loading: true,
|
|
isGuest: false
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.init()
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
|
|
}
|
|
|
|
init = async () => {
|
|
let isGuest = await DB.get("is_guest")
|
|
this.setState({ isGuest: isGuest })
|
|
if(!isGuest){
|
|
NetInfo.netstatus(isConnected => {
|
|
if(isConnected) {
|
|
this.getUserInfo()
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
getUserInfo = async () => {
|
|
const SESSION = await DB.session()
|
|
this.props.saveUserInfo({ token: SESSION.token, card_number: SESSION.user.card_number }).then(data => {
|
|
if(data.status == 1) {
|
|
DB.updateProfile(data, res => {
|
|
this.setState({ loading: false })
|
|
}, err => {
|
|
Alert.alert("Information", `\n${err.message}`)
|
|
this.setState({ loading: false })
|
|
})
|
|
}
|
|
})
|
|
.catch(error => {})
|
|
}
|
|
|
|
validateParamType = () => {
|
|
let object = this.props.route.params?.onBackToMain
|
|
return ({}.toString.call(object) === '[object Function]')
|
|
}
|
|
|
|
navigateToMpin = async () => {
|
|
if(this.state.isGuest == 'true') {
|
|
this.props.navigation.navigate("Main")
|
|
} else {
|
|
const USER_PROFILE = await DB.profile()
|
|
const SESSION = await DB.session()
|
|
|
|
let sessiondata = {
|
|
card_number: USER_PROFILE.data.cardnumber,
|
|
lcard_uuid: USER_PROFILE.data.lcard_uuid,
|
|
mobile_number: Theme.formatter.PMBL(USER_PROFILE.data.mobile)
|
|
}
|
|
|
|
let data = {
|
|
sessiondata: sessiondata,
|
|
token: SESSION.token
|
|
}
|
|
let userDetails = {
|
|
mobile_number: sessiondata.mobile_number,
|
|
mpin: USER_PROFILE.data.mpin
|
|
}
|
|
if(
|
|
userDetails.mpin == undefined ||
|
|
userDetails.mpin == null ||
|
|
userDetails.mpin == ""
|
|
) {
|
|
this.props.navigation.navigate("Setmpin", data)
|
|
DB.set('set_mpin', 'true', success => {}, error => {})
|
|
} else {
|
|
DB.set('enter_mpin', 'true', success => {}, error => {})
|
|
this.props.navigation.navigate("Mpin", userDetails)
|
|
}
|
|
}
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<View style={{flex: 1}}>
|
|
<Carousel
|
|
type="board"
|
|
style="slides"
|
|
itemsPerInterval={1}
|
|
items={this.slides}
|
|
onPress={() => this.validateParamType() ? this.props.route.params?.onBackToMain() : this.navigateToMpin()}
|
|
/>
|
|
</View>
|
|
)
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = (state) => {
|
|
return {
|
|
userinfo: state.appUserInfoReducer.userinfo
|
|
}
|
|
}
|
|
|
|
const mapDispatchToProps = {
|
|
saveUserInfo
|
|
}
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(OnBoarding) |