248 lines
9.0 KiB
JavaScript
248 lines
9.0 KiB
JavaScript
import * as React from 'react';
|
|
import {useState, useEffect} from 'react';
|
|
import { connect } from "react-redux";
|
|
import { SafeAreaView, ScrollView, TouchableOpacity, Button, View, Text, Image } 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 DB from '../../../components/storage/';
|
|
import REQUEST from '../../../components/api/';
|
|
import CustomSafeArea from '../../../components/safeArea.component';
|
|
|
|
|
|
class ApplyCardD extends React.PureComponent {
|
|
|
|
constructor(props) {
|
|
super(props)
|
|
}
|
|
|
|
state = {
|
|
Cards: [],
|
|
loading: false,
|
|
connection: false,
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.initData()
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
|
|
}
|
|
|
|
initData = () => {
|
|
NetInfo.netstatus(isConnected => {
|
|
if(isConnected){
|
|
this.init()
|
|
}else{
|
|
Elements.nointernet2(this.props)
|
|
}
|
|
})
|
|
}
|
|
|
|
init = async () => {
|
|
this.setState({ loading: true, connection: true })
|
|
const SESSION = await DB.session()
|
|
await REQUEST("loyalty_cards", "get", {
|
|
Authorization: SESSION.token,
|
|
}, {}, {},
|
|
async (res) => {
|
|
if(res.status == 1 && res.data.length > 0) {
|
|
this.setState({ Cards: res.data, loading: false })
|
|
} else {
|
|
this.setState({ loading: false })
|
|
}
|
|
}, function(error){
|
|
this.setState({ loading: false })
|
|
})
|
|
}
|
|
|
|
renderCards = () => {
|
|
return this.state.Cards.map((data, index) => {
|
|
return (
|
|
<TouchableOpacity onPress={() => {
|
|
this.props.navigation.navigate("ApplyCardDetails", data)
|
|
}} key={index} style={{ flexBasis: '45%', width: '50%', height: 90, margin: 2, justifyContent:'center', alignItems:'center'}}>
|
|
<Image source={{uri: data.image}} style={{width: '100%', height: 90, borderRadius: 15, resizeMode:'stretch'}}/>
|
|
</TouchableOpacity>
|
|
)
|
|
})
|
|
}
|
|
|
|
render() {
|
|
if(!this.state.connection){
|
|
return (
|
|
<CustomSafeArea>
|
|
<Elements.loader visible={this.state.loading} />
|
|
<CustomHeader title="Apply Card" menu={false} back={true} backscreen="Login" navigation={this.props.navigation} />
|
|
<Elements.nointernet
|
|
message="No internet found. Please check your internet connection."
|
|
buttonText="Try Again"
|
|
onPress={() => this.initData()}
|
|
/>
|
|
</CustomSafeArea>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<CustomSafeArea>
|
|
<Elements.loader visible={this.state.loading} />
|
|
<CustomHeader title="" menu={false} back={true} backscreen="Login" navigation={this.props.navigation} />
|
|
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
|
|
{this.state.Cards.length > 0 ? (
|
|
<ScrollView
|
|
style={{ flex: 1 }}
|
|
showsHorizontalScrollIndicator={false}
|
|
showsVerticalScrollIndicator={false}
|
|
bounces={false}>
|
|
<View style={{ flex: 0.2, justifyContent: 'center', alignItems: 'center', padding: 20 }}>
|
|
<Text style={{ marginBottom: 13, fontSize: 22, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary, fontWeight: 'bold'}}>Choose a Card</Text>
|
|
<Text style={{ fontSize: 16, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary, width: '85%', textAlign: 'center'}}>Select your preferred card type</Text>
|
|
</View>
|
|
<View style={{ flex: 1 }}>
|
|
<View style={{padding: 30, flexWrap: 'wrap', flexDirection: 'row', width: '100%', alignContent: 'center', flex: 1}}>
|
|
{this.renderCards()}
|
|
</View>
|
|
</View>
|
|
</ScrollView>
|
|
) : (
|
|
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
|
|
<Text style={{ marginBottom: 13, fontSize: 22, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary, fontWeight: 'bold'}}>Choose a Card</Text>
|
|
<Text style={{ fontSize: 16, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary, width: '85%', textAlign: 'center'}}>Select your preferred card type</Text>
|
|
</View>
|
|
)}
|
|
</View>
|
|
</CustomSafeArea>
|
|
);
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = (state) => {
|
|
return {
|
|
app_theme: state.appThemeReducer.theme
|
|
}
|
|
}
|
|
|
|
export default connect(mapStateToProps, null)(ApplyCardD)
|
|
|
|
|
|
// export default function ApplyCardD(navigation) {
|
|
|
|
// const [Cards, setCards] = useState([])
|
|
// const [loading, setloading] = useState(false)
|
|
// const [connection, setconnection] = useState(false)
|
|
|
|
// const init = async () => {
|
|
// setloading(true)
|
|
// setconnection(true)
|
|
// const SESSION = await DB.session()
|
|
// await REQUEST("loyalty_cards", "get", {
|
|
// Authorization: SESSION.token,
|
|
// }, {}, {},
|
|
// async (res) => {
|
|
// if(res.status == 1 && res.data.length > 0){
|
|
// await setCards(await res.data)
|
|
// setloading(false)
|
|
// }else{
|
|
// console.log(res.message, res.data)
|
|
// setloading(false)
|
|
// }
|
|
// }, function(error){
|
|
// console.log(error)
|
|
// setloading(false)
|
|
// })
|
|
// }
|
|
|
|
// useEffect(() => {
|
|
// NetInfo.fetch().then(state => {
|
|
// console.log("Connection type", state.type);
|
|
// console.log("Is connected?", state.isConnected);
|
|
// if(state.isConnected){
|
|
// init()
|
|
// }else{
|
|
// Elements.nointernet2()
|
|
// }
|
|
// })
|
|
// }, [])
|
|
|
|
// const renderCards = () => {
|
|
// return Cards.map((data, index) => {
|
|
// return (
|
|
// <TouchableOpacity onPress={() => {
|
|
// navigation.navigation.navigate("ApplyCardDetails", data)
|
|
// }} key={index} style={{ flexBasis: '47%', width: '50%', height: 90, margin: 2, justifyContent:'center', alignItems:'center'}}>
|
|
// <Image source={{uri: data.image}} style={{width: '100%', height: 90, borderRadius: 15, resizeMode:'stretch'}}/>
|
|
// </TouchableOpacity>)
|
|
// })
|
|
// }
|
|
|
|
// if(!connection){
|
|
// return (
|
|
// <SafeAreaView style={{flex: 1}}>
|
|
// <Elements.loader visible={loading} />
|
|
// <CustomHeader title="Apply Card" menu={false} back={true} backscreen="Login" navigation={navigation} />
|
|
// <Elements.nointernet
|
|
// message="No internet found. Please check your internet connection."
|
|
// buttonText="Try Again"
|
|
// onPress={() => {
|
|
// NetInfo.fetch().then(state => {
|
|
// console.log("Connection type", state.type);
|
|
// console.log("Is connected?", state.isConnected);
|
|
// if(state.isConnected){
|
|
// init()
|
|
// }else{
|
|
// Elements.nointernet2()
|
|
// }
|
|
// })
|
|
// }}
|
|
// />
|
|
// </SafeAreaView>
|
|
// )
|
|
// }
|
|
|
|
// return (
|
|
// <SafeAreaView style={{flex: 1}}>
|
|
// <Elements.loader visible={loading} />
|
|
// <CustomHeader title="" menu={false} back={true} backscreen="Login" navigation={navigation} />
|
|
// <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
|
|
// <Text style={{padding: 15, fontSize: 22, color: Theme.colors.textPrimary, fontWeight: 'bold'}}>Choose a Card</Text>
|
|
// <Text style={{padding: 5, fontSize: 16, color: Theme.colors.textPrimary, width: '85%', textAlign: 'center'}}>Select your preferred card type</Text>
|
|
// <View style={{padding: 30, flexWrap: 'wrap', flexDirection: 'row', width: '100%', alignContent: 'center'}}>
|
|
// {renderCards()}
|
|
// </View>
|
|
// <View style={{padding: 25}}></View>
|
|
// </View>
|
|
// </SafeAreaView>
|
|
// );
|
|
// }
|
|
|
|
/*
|
|
|
|
let samplecards = [{
|
|
image: Assets.cards.classic,
|
|
name: "UNIOIL CLASSIC",
|
|
description: "The Unioil Loyalty card rewards you points for every purchase of the cleanest range of high-performance fuel plus bonus for exceeded liters."
|
|
},
|
|
{
|
|
image: Assets.cards.grab,
|
|
id: "123",
|
|
name: "GRAB LOYALTY CARD",
|
|
description: "Exclusive to Grab accredited drivers that rewards 4 points/liter for Gasoline and 2 Points/liter for Diesel."
|
|
},
|
|
{
|
|
image: Assets.cards.ica,
|
|
id: "123",
|
|
name: "ICA - UNIOIL LOYALTY CARD",
|
|
description: "Exclusive to students, alumni and staff of Xavier School that rewards P2 points/liter for Gasoline and 1 point/liter for Diesel"
|
|
},
|
|
{
|
|
image: Assets.cards.xavier,
|
|
name: "XAVIER - UNIOIL LOYALTY CARD",
|
|
description: "Exclusive for students, alumni and staff of Xavier School that rewards P2 points/liter for Gasoline and 1 point/liter for Diesel"
|
|
}]
|
|
|
|
*/ |