430 lines
18 KiB
JavaScript
430 lines
18 KiB
JavaScript
import React from 'react';
|
|
import { useState, useEffect, useRef } from 'react';
|
|
import { connect } from 'react-redux';
|
|
import {
|
|
Text,
|
|
View,
|
|
TouchableOpacity,
|
|
Linking,
|
|
Platform,
|
|
Alert,
|
|
Modal,
|
|
FlatList,
|
|
Image,
|
|
ActivityIndicator,
|
|
} from 'react-native';
|
|
import {
|
|
NavigationApps,actions,
|
|
googleMapsTravelModes,
|
|
mapsTravelModes
|
|
} from "../../../components/navigationapps";
|
|
import { Divider } from 'native-base';
|
|
import { noInternetError } from '../../../utils/errorHandler';
|
|
import REQUEST_POST_PAY from '../../../components/api/postpayapi';
|
|
import Assets from '../../../components/assets.manager.js';
|
|
import Theme from '../../../components/theme.style.js';
|
|
import Icon from '../../../components/icons';
|
|
import DB from '../../../components/storage/';
|
|
|
|
const styles = {
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: '#f8f9fa',
|
|
alignItems: 'center',
|
|
justifyContent: 'center'
|
|
},
|
|
panel: {
|
|
flex: 1,
|
|
backgroundColor: 'white',
|
|
position: 'relative'
|
|
},
|
|
panelHeader: {
|
|
height: 60,
|
|
backgroundColor: Theme.colors.lightGray,
|
|
alignItems: 'center',
|
|
justifyContent: 'center'
|
|
},
|
|
centeredView: {
|
|
flex: 1,
|
|
justifyContent: "center",
|
|
backgroundColor: '#00000090',
|
|
},
|
|
modalView: {
|
|
margin: 25,
|
|
padding: 20,
|
|
alignItems: "center",
|
|
shadowColor: "#000",
|
|
shadowOffset: {
|
|
width: 0,
|
|
height: 2
|
|
},
|
|
shadowOpacity: 0.25,
|
|
shadowRadius: 4,
|
|
elevation: 5
|
|
},
|
|
selectedPumpBorder: {
|
|
backgroundColor: '#ffbaa3',
|
|
borderRadius: 10,
|
|
borderWidth: 2,
|
|
borderColor: Theme.colors.primary,
|
|
padding: 5
|
|
},
|
|
unselectedPumpBorder: {
|
|
borderRadius: 10,
|
|
borderWidth: 2,
|
|
padding: 5
|
|
}
|
|
}
|
|
|
|
const PayatpumpStationDetails = (props) => {
|
|
|
|
const [panel, setpanel] = useState(null)
|
|
const [updateFavorite, setUpdateFavorite] = useState(0)
|
|
const [updateFavoriteVal, setUpdateFavoriteVal] = useState(false)
|
|
const [showModal, setShowModal] = useState(false)
|
|
const [error, setError] = useState(null)
|
|
const [selectedPump, setSelectedPump] = useState(null)
|
|
const [selectedPumpIndex, setSelectedPumpIndex] = useState(0)
|
|
const [initiateCancel, setInitiateCancel] = useState(false)
|
|
const [initiateProceed, setInitiateProceed] = useState(false)
|
|
const [confirmProceed, setConfirmProceed] = useState(false)
|
|
|
|
const pumpListRef = useRef(null);
|
|
|
|
useEffect(() => {
|
|
if(props.visible){
|
|
panel.show()
|
|
}
|
|
return setpanel(null)
|
|
}, [props.visible])
|
|
|
|
const renderStationDetails = (station, onPress) => {
|
|
// filter the value of key pair if it is empty
|
|
var filteredAddress = Object.entries(station.address).filter(([key, value]) => {
|
|
if(key === "stateCode") return `${value.replace(/\s/g, '')}`
|
|
return `${value}`
|
|
})
|
|
.map(([key, value]) => `${value}`)
|
|
|
|
return (
|
|
<TouchableOpacity activeOpacity={1} style={{backgroundColor: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.border : Theme.colors.white, height: Platform.OS === 'android' ? 160 : 140 }}>
|
|
<View style={{flex: 0, padding: 15, flexDirection: 'row'}}>
|
|
<View style={{flex: 5}}>
|
|
<Text style={{fontFamily: 'arial',color: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.text : Theme.colors.textPrimary, padding: 5, width: '90%', fontSize: 13}}>{filteredAddress.join(', ').toString()}</Text>
|
|
<View style={{padding: 5, width: '90%', flexDirection: 'row', alignItems: 'center'}}>
|
|
<Text style={{fontFamily: 'arial', color: '#6887ed', fontSize: 14}}>Contact: </Text>
|
|
<View style={{fontFamily: 'arial', color: Theme.colors.textPrimary, fontSize: 14}}>
|
|
<TouchableOpacity onPress={() => {
|
|
let url = Platform.OS == 'ios' ? 'telprompt:' : 'tel:'
|
|
Linking.canOpenURL(url).then(supported => {
|
|
if (!supported) {
|
|
alert("Call Not Supported")
|
|
} else {
|
|
Alert.alert("Call Customer Service", '\n' + "You will be redirected to the dialer to call Unioil Customer Service", [
|
|
{
|
|
text: 'Cancel',
|
|
style: 'cancel',
|
|
},{
|
|
text: 'OK', onPress: () => Linking.openURL(`${url}${num}`)
|
|
}
|
|
],
|
|
{cancelable: true})
|
|
return true
|
|
}
|
|
}).catch(err => {
|
|
console.error('An error occurred', err)
|
|
})
|
|
}}>
|
|
<Text style={{color: '#6887ed'}}>{station.phone}</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
<Text style={{fontFamily: 'arial',color: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.text : Theme.colors.textPrimary, padding: 0, width: '90%', fontSize: 13}}></Text>
|
|
<View style={{flexDirection: 'row', paddingBottom: 10, alignItems: 'center'}}>
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
|
<TouchableOpacity
|
|
onPress={() => {
|
|
if(props.data.fuelService?.fuelingPoints == undefined) {
|
|
Alert.alert("Information", '\n' + "No pump available.")
|
|
} else {
|
|
setShowModal(true)
|
|
}
|
|
}}
|
|
style={{ backgroundColor: Theme.colors.primary, padding: 12, alignItems: 'center', justifyContent: 'center', borderRadius: 5 }}>
|
|
<Text style={{ color: Theme.colors.white, fontSize: 12 }}>PUMP AND GO</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
|
|
</View>
|
|
|
|
</View>
|
|
|
|
{PumpSelectorModalView()}
|
|
</TouchableOpacity>
|
|
)
|
|
}
|
|
|
|
const resetFlags = () => {
|
|
setShowModal(false)
|
|
setSelectedPump(null)
|
|
setSelectedPumpIndex(null)
|
|
setInitiateCancel(false)
|
|
setInitiateProceed(false)
|
|
setConfirmProceed(false)
|
|
}
|
|
|
|
const initiateTransaction = async () => {
|
|
let store = props.data
|
|
let pump = selectedPump
|
|
|
|
let body = {
|
|
store_id: store.storeId,
|
|
pump: pump.pumpNumber
|
|
}
|
|
|
|
REQUEST_POST_PAY('postClaim', 'post', {}, {}, body, async (res) => {
|
|
if(res.status) {
|
|
resetFlags()
|
|
|
|
if(!res.data.saleItems) {
|
|
return Alert.alert('Information', '\n' + "No Transaction available");
|
|
}
|
|
|
|
props.onTransaction(res.data, store.storeId, selectedPump)
|
|
} else {
|
|
resetFlags()
|
|
setTimeout(() => {
|
|
Alert.alert('Information', res?.message?.key == 'buy_gas_pump_unavailable' ? '\n' + `Pump ${pump.pumpNumber} is not yet available. Try again.` : res?.message.key == 'pay_outside_petrozone_error' ? '\n' + res?.message.partnerApiMessage : '\n' + 'Failed transaction. Try again.')
|
|
}, 300)
|
|
}
|
|
}, (error) => {
|
|
resetFlags()
|
|
|
|
setTimeout(() => {
|
|
if(!noInternetError(error)) {
|
|
Alert.alert('Information', error?.message?.key == 'buy_gas_pump_unavailable' ? '\n' + `Pump ${pump.pumpNumber} is not yet available. Try again.` : error?.message?.key == 'pay_outside_petrozone_error' ? '\n' + error?.ermessageror?.partnerApiMessage : '\n' + 'Failed transaction. Try again.')
|
|
} else {
|
|
noInternetError(error);
|
|
}
|
|
}, 300)
|
|
})
|
|
}
|
|
|
|
const PumpSelectorModalView = () => {
|
|
return (
|
|
<Modal
|
|
animationType="none"
|
|
transparent={true}
|
|
visible={showModal}>
|
|
<View activeOpacity={1} style={styles.centeredView}>
|
|
<View style={[styles.modalView, { backgroundColor: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.border : Theme.colors.white }, (!initiateCancel && !initiateProceed && !confirmProceed) && { width: Theme.screen.w * .8, borderRadius: 10, alignSelf: 'center', height: Theme.screen.h * .45}]}>
|
|
{!initiateCancel && !confirmProceed && (<TouchableOpacity style={{ width: 20, height: 20, alignSelf: 'flex-end', borderWidth: 1, borderColor: Theme.colors.primary, borderRadius: 30, alignItems: 'center', justifyContent: 'center' }}
|
|
onPress={() => {
|
|
setInitiateCancel(true)
|
|
if(initiateProceed) {
|
|
setInitiateProceed(false)
|
|
}
|
|
}}>
|
|
<Icon.Entypo name='cross' size={20} style={{color: Theme.colors.primary, bottom: 1, right: 0.5 }} />
|
|
</TouchableOpacity>)}
|
|
{(!initiateCancel && !initiateProceed && !confirmProceed) && PumpListView(selectedPump)}
|
|
{(initiateCancel && !initiateProceed && !confirmProceed) && CancelPumpSelectorView()}
|
|
{(initiateProceed && !initiateCancel && !confirmProceed) && ProceedPumpSelectorView()}
|
|
{confirmProceed && ConfirmPumpSelectorView()}
|
|
</View>
|
|
</View>
|
|
|
|
</Modal>
|
|
)
|
|
}
|
|
|
|
const CancelPumpSelectorView = () => {
|
|
return (
|
|
<>
|
|
<View style={{ marginTop: 10, marginBottom: 15 }}>
|
|
<Text style={{ color: props.app_theme?.theme.colors.text, fontSize: 18, textAlign: 'center' }}>Are you sure you want to{'\n'}cancel the transaction?</Text>
|
|
</View>
|
|
<View style={{ flexDirection: 'row', justifyContent: 'center' }}>
|
|
<TouchableOpacity onPress={() => {
|
|
setInitiateCancel(false)
|
|
selectedPump != null ? setInitiateProceed(true) : setInitiateProceed(false)
|
|
}} style={{ width: 100, paddingVertical: 5, margin: 12, backgroundColor: Theme.colors.white, borderColor: Theme.colors.primary, borderWidth: 0.5, alignItems: 'center', justifyContent: 'center', borderRadius: 5 }}>
|
|
<Text style={{ color: Theme.colors.primary, fontSize: 17, textAlign: 'center', fontWeight: 'bold' }}>No</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity onPress={() => {
|
|
setShowModal(false)
|
|
setInitiateCancel(false)
|
|
setInitiateProceed(false)
|
|
setSelectedPump(null)
|
|
setSelectedPumpIndex(null)
|
|
}} style={{ width: 100, paddingVertical: 5, margin: 12, backgroundColor: Theme.colors.primary, justifyContent: 'center', alignItems: 'center', borderRadius: 5 }}>
|
|
<Text style={{ color: Theme.colors.white, fontSize: 17, textAlign: 'center', fontWeight: 'bold' }}>Yes</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</>
|
|
)
|
|
}
|
|
|
|
const ProceedPumpSelectorView = () => {
|
|
let message = selectedPump != null ? `This will process your transaction at` : "No selected pump."
|
|
return (
|
|
<View>
|
|
<View style={{ alignItems: 'center' }}>
|
|
<Image source={Assets.pumps.pump_logo} style={{padding: 40, width: 50, height: 50, resizeMode: 'contain'}} />
|
|
</View>
|
|
<View style={{ alignItems: 'center', padding: 5, marginBottom: 15 }}>
|
|
<Text style={{ fontSize: 19, textAlign: 'center', color: props.app_theme?.theme.colors.text }}>{message} {selectedPump != null && <Text style={{fontWeight: 'bold'}}>Pump {selectedPump.pumpNumber}.</Text>}</Text>
|
|
</View>
|
|
<View style={{ alignItems: 'center', padding: 5, marginBottom: 30 }}>
|
|
<Text style={{ fontSize: 19, textAlign: 'center', color: props.app_theme?.theme.colors.text }}>Please ensure that this is the correct pump and click OK below to proceed.</Text>
|
|
</View>
|
|
<View style={{ alignItems: 'center' }}>
|
|
<TouchableOpacity onPress={() => {
|
|
setInitiateCancel(false)
|
|
setInitiateProceed(false)
|
|
|
|
if(selectedPumpIndex > 3) {
|
|
setTimeout(() => {
|
|
pumpListRef.current?.scrollToIndex({ animated: true, index: Math.floor(selectedPumpIndex / 2) })
|
|
}, 500)
|
|
}
|
|
}}
|
|
style={{ paddingVertical: 5, width: 120, backgroundColor: Theme.colors.primary, justifyContent: 'center', alignItems: 'center', borderRadius: 5 }}>
|
|
<Text style={{ fontSize: 17, color: Theme.colors.white, textAlign: 'center' }}>OK</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const ConfirmPumpSelectorView = () => {
|
|
let message = selectedPump != null ? "Processing..." : "No selected pump."
|
|
return (
|
|
<>
|
|
<View style={{backgroundColor: 'transparent', alignItems: 'center', justifyContent: 'center' }}>
|
|
{
|
|
Platform.select({
|
|
ios: <Image source={Assets.icons.animated_loading} style={{width: 120, height: 120, backgroundColor: "orange"}} />,
|
|
android: <ActivityIndicator
|
|
size={140}
|
|
color={Theme.colors.primary}
|
|
/>
|
|
})
|
|
}
|
|
<View style={{ marginHorizontal: 40, marginTop: 10 }}>
|
|
<Text style={{ color: props.app_theme?.theme.colors.text, fontSize: 24, textAlign: 'center' }}>{message}</Text>
|
|
</View>
|
|
</View>
|
|
</>
|
|
)
|
|
}
|
|
|
|
|
|
const PumpListView = (currentSelectedPump) => {
|
|
return (
|
|
<>
|
|
<Text style={{ color: Theme.colors.primary, fontSize: 18, fontWeight: 'bold', textAlign: 'center', marginBottom: 20}}>Please {selectedPump ? "confirm" : "select"} your Pump no.{'\n'} to process the payment.</Text>
|
|
<FlatList
|
|
ref={pumpListRef}
|
|
keyExtractor={(item, index) => index.toString()}
|
|
contentContainerStyle={{ alignItems: 'center'}}
|
|
data={props.data.fuelService?.fuelingPoints}
|
|
scrollEnabled={true}
|
|
showsVerticalScrollIndicator={false}
|
|
renderItem={({item, index}) => {
|
|
let available = item.pumpStatus == "Available"
|
|
return (
|
|
<TouchableOpacity onPress={() => {
|
|
setInitiateProceed(true)
|
|
setSelectedPump(item)
|
|
setSelectedPumpIndex(index)
|
|
}}
|
|
style={{marginHorizontal: 15, marginBottom: 10, borderColor: (currentSelectedPump != null && currentSelectedPump.pumpNumber == item.pumpNumber) ? Theme.colors.primary : "transparent", borderWidth: 4, borderRadius: 15}}>
|
|
<Image source={available ? Assets.pumps.plain_pump : Assets.pumps.plain_pump_grey} style={{width: 80, height: 80, resizeMode: 'contain' }} />
|
|
<View style={{
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
alignItems: 'center',
|
|
justifyContent: 'center'
|
|
}}>
|
|
<Text style={{
|
|
left: -9,
|
|
bottom: -10,
|
|
color: 'white',
|
|
fontWeight: 'bold',
|
|
fontSize: 19
|
|
}}>{index + 1}</Text>
|
|
</View>
|
|
</TouchableOpacity>
|
|
|
|
)
|
|
}}
|
|
numColumns={2}
|
|
/>
|
|
<Divider style={{backgroundColor: Theme.colors.primary, marginTop: 2}}/>
|
|
<TouchableOpacity
|
|
disabled={!selectedPump}
|
|
style={{ width: 120, paddingVertical: 5, marginTop: 15, backgroundColor: selectedPump != null ? Theme.colors.primary : Theme.colors.darkGray, alignItems: 'center', justifyContent: 'center', borderRadius: 5 }}
|
|
onPress={() => {
|
|
if(selectedPump != null) {
|
|
setConfirmProceed(true)
|
|
initiateTransaction()
|
|
}
|
|
}}>
|
|
<Text style={{ color: Theme.colors.white, fontSize: 17 }}>OK</Text>
|
|
</TouchableOpacity>
|
|
</>
|
|
)
|
|
}
|
|
|
|
if(props.data === null) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<View style={{justifyContent: 'flex-end'}}>
|
|
<View style={[styles.panelHeader, {backgroundColor: props.app_theme?.theme.dark ? Theme.colors.darkGray : Theme.colors.lightGray}]}>
|
|
<View style={{flexDirection: 'row', padding: 15}}>
|
|
<Text numberOfLines={1} style={{flex: 1, paddingTop: 17, justifyContent: 'center', color: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.text : Theme.colors.darkGray, fontSize: 16, fontWeight: 'bold'}}>
|
|
{props.data.storeName}
|
|
</Text>
|
|
<View style={{flex: 0, justifyContent: 'center'}}>
|
|
<TouchableOpacity onPress={() => {}} activeOpacity={1} style={{top: -25}}>
|
|
<View style={{width: 60, justifyContent: 'center', alignItems: 'center', height: 60, borderRadius: 30, backgroundColor: Theme.colors.primary, elevation: 10}}>
|
|
{(props.data && props.data.address != undefined && props.data.address != "") ?
|
|
<NavigationApps
|
|
iconSize={35}
|
|
row
|
|
modalVisible={true}
|
|
viewMode="sheet"
|
|
actionSheetBtnCloseTitle="Cancel"
|
|
actionSheetBtnOpenTitle={<Icon.FontAwesome name="location-arrow" color="#fff" size={25} />}
|
|
actionSheetTitle="Choose an application to view the route"
|
|
address={props.data.storeName} // address to navigate by for all apps
|
|
waze={{ address: props.data.address, lat: props.data.geoLocation.latitude, lon: props.data.geoLocation.longitude, action: actions.navigateByLatAndLon}} // specific settings for waze
|
|
googleMaps={{ address: props.data.address, lat: props.data.geoLocation.latitude, lon: props.data.geoLocation.longitude, action: actions.navigateByAddress, travelMode:googleMapsTravelModes.driving}} // specific settings for google maps
|
|
maps={{ address: props.data.address, lat: props.data.geoLocation.latitude, lon: props.data.geoLocation.longitude, action: actions.navigateByAddress, travelMode:mapsTravelModes.driving}} /> // specific settings for maps
|
|
: null}
|
|
</View>
|
|
<Text style={{color: Theme.colors.primary}}>Directions</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
{renderStationDetails(props.data, props.onClick)}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const mapStateToProps = (state) => {
|
|
return {
|
|
app_theme: state.appThemeReducer.theme
|
|
}
|
|
}
|
|
|
|
export default connect(mapStateToProps, null)(PayatpumpStationDetails)
|