jannah
/
unioil-loyalty-rn-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Checkpoint commit. Updates for pump and go.

This commit is contained in:
Harley Catubag 2022-07-12 16:24:07 +08:00
parent 3d96452c34
commit 90391f7515
14 changed files with 499 additions and 559 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
app/components/api/endpoints.js
View File

@ -1,17 +1,17 @@
// const api_url = "https://mobileapid.unioil.com/api/mobile/"; // const api_url = "https://mobileapid.unioil.com/api/mobile/";
// export const api_url = "https://mobileapi.unioilapps.com/api/mobile/"; // export const api_url = "https://mobileapi.unioilapps.com/api/mobile/";
// export const api_url = "https://unioilapi.lbteksystems.com/api/mobile/"; // export const api_url = "https://unioilapi.lbteksystems.com/api/mobile/";
// export const api_url = "https://stag-mobapi.unioilapps.com/api/mobile/"; // staging export const api_url = "https://stag-mobapi.unioilapps.com/api/mobile/"; // staging
export const api_url = "https://mobilerest.unioilapps.com/api/mobile/"; // prod // export const api_url = "https://mobilerest.unioilapps.com/api/mobile/"; // prod
// const api_url = "https://unioilapi.taxikel.com/api/mobile/" // const api_url = "https://unioilapi.taxikel.com/api/mobile/"
// const notifications = "https://stag-notifapi.unioilapps.com/api/notification/mobile/all"; //staging const notifications = "https://stag-notifapi.unioilapps.com/api/notification/mobile/all"; //staging
// const account_fcm = "https://stag-notifapi.unioilapps.com/api/fcmtoken/notifs"; //staging const account_fcm = "https://stag-notifapi.unioilapps.com/api/fcmtoken/notifs"; //staging
// const fcm_register = "https://stag-notifapi.unioilapps.com/api/fcmtoken"; //staging const fcm_register = "https://stag-notifapi.unioilapps.com/api/fcmtoken"; //staging
const notifications = "https://notification.unioilapps.com/api/notification/mobile/all"; //prod // const notifications = "https://notification.unioilapps.com/api/notification/mobile/all"; //prod
const account_fcm = "https://notification.unioilapps.com/api/fcmtoken/notifs"; //prod // const account_fcm = "https://notification.unioilapps.com/api/fcmtoken/notifs"; //prod
const fcm_register = "https://notification.unioilapps.com/api/fcmtoken"; //prod // const fcm_register = "https://notification.unioilapps.com/api/fcmtoken"; //prod
// const notifications = "https://unioil-notif-api.herokuapp.com/api/notification/mobile/all"; // const notifications = "https://unioil-notif-api.herokuapp.com/api/notification/mobile/all";
// const account_fcm = "https://unioil-notif-api.herokuapp.com/api/fcmtoken/notifs"; // const account_fcm = "https://unioil-notif-api.herokuapp.com/api/fcmtoken/notifs";
@ -19,9 +19,9 @@ const fcm_register = "https://notification.unioilapps.com/api/fcmtoken"; //prod
// const fcm_regoster = "https://mhcuuigdea.execute-api.us-east-1.amazonaws.com/dev/api/fcmtoken"; // const fcm_regoster = "https://mhcuuigdea.execute-api.us-east-1.amazonaws.com/dev/api/fcmtoken";
// const post_pay = "https://partnerapi-lab.petrozone.com/v5/"; // const post_pay = "https://partnerapi-lab.petrozone.com/v5/";
// const post_pay = "https://partnerapi-au-uat.petrozone.com/v5/"; // const post_pay = "https://partnerapi-int.petrozone.com/v5/";
const post_pay = "https://partnerapi-au-uat.petrozone.com/v5/";
const iqair_url = "http://api.airvisual.com/v2/"; const iqair_url = "http://api.airvisual.com/v2/";
const post_pay = "https://partnerapi-int.petrozone.com/v5/";
const card_validation = api_url + "loginCardNumber"; const card_validation = api_url + "loginCardNumber";
const card_validation_enroll = api_url + "loginCardNumberEnroll"; const card_validation_enroll = api_url + "loginCardNumberEnroll";
const login = api_url + "loginBirthdate"; const login = api_url + "loginBirthdate";

4
app/components/header.js
View File

@ -118,11 +118,11 @@ class CustomHeader extends React.Component {
return ( return (
<View> <View>
<View style={{flexDirection: 'row', height: this.props.height ? this.props.height : 55, padding: 5, backgroundColor: Theme.colors.primary, top: Platform.OS =='ios' && this.props.top ? this.props.top : 0}}> <View style={{flexDirection: 'row', height: this.props.height ? this.props.height : 55, padding: 5, backgroundColor: Theme.colors.primary, top: Platform.OS =='ios' && this.props.top ? this.props.top : 0}}>
<View style={{flex:1, justifyContent: 'center'}}> <View style={[{flex:1, justifyContent: 'center'}, this.props.customLeftContainerStyle ]}>
{this.renderButtonLeft()} {this.renderButtonLeft()}
</View> </View>
<View style={{flex:3, justifyContent: 'center'}}> <View style={{flex:3, justifyContent: 'center'}}>
<Text style={{fontWeight: this.props.boldTitle ? "bold" : "normal", textAlign:'center', fontSize: 17, color: '#fff'}}>{this.props.title}</Text> <Text style={{fontWeight: this.props.boldTitle ? "bold" : "normal", textAlign:'center', fontSize: 17, color: '#fff'}}>{this.props.title || this.props.customTitle}</Text>
</View> </View>
<View style={{flex:1, justifyContent: 'center'}}> <View style={{flex:1, justifyContent: 'center'}}>
{this.props.rightMenu || null} {this.props.rightMenu || null}

2
app/screens/main/station/fragments/stationdetailspanel.js
View File

@ -72,7 +72,7 @@ const renderStationPanel = (props) => {
<View style={{flex: 5}}> <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: 15}}>{station.address}</Text> <Text style={{fontFamily: 'arial',color: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.text : Theme.colors.textPrimary, padding: 5, width: '90%', fontSize: 15}}>{station.address}</Text>
<View style={{padding: 5, width: '90%', flexDirection: 'row'}}> <View style={{padding: 5, width: '90%', flexDirection: 'row'}}>
<Text style={{flex: 1, fontFamily: 'arial', color: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.text : Theme.colors.textPrimary, fontSize: 14}}>Contact: </Text> <Text style={{flex: 1, fontFamily: 'arial', color: '#6887ed', fontSize: 14}}>Contact: </Text>
<View style={{flex: 3, fontFamily: 'arial', color: Theme.colors.textPrimary, fontSize: 14}}> <View style={{flex: 3, fontFamily: 'arial', color: Theme.colors.textPrimary, fontSize: 14}}>
{station.contact_numbers.map((num, i) => { {station.contact_numbers.map((num, i) => {
return ( return (

2
app/screens/main/tab.js
View File

@ -86,7 +86,7 @@ export default function App(navigation) {
<Tab.Navigator initialRouteName="Home" backBehavior="initialRoute" screenOptions={screenOptions} tabBarOptions={tabBarOptions} > <Tab.Navigator initialRouteName="Home" backBehavior="initialRoute" screenOptions={screenOptions} tabBarOptions={tabBarOptions} >
<Tab.Screen name="Home" component={Home} options={{ tabBarLabel: 'Home', headerShown: false }} /> <Tab.Screen name="Home" component={Home} options={{ tabBarLabel: 'Home', headerShown: false }} />
<Tab.Screen name="Promos" component={PromosScreen} options={{ tabBarLabel: 'Promos', headerShown: false }} /> <Tab.Screen name="Promos" component={PromosScreen} options={{ tabBarLabel: 'Promos', headerShown: false }} />
{/* <Tab.Screen name="Payatpump" component={PayatpumpScreen} options={payatpumpOption(navigation)} /> */} <Tab.Screen name="Payatpump" component={PayatpumpScreen} options={payatpumpOption(navigation)} />
<Tab.Screen name="Stations" component={StationsScreen} options={{ tabBarLabel: 'Stations', headerShown: false }} /> <Tab.Screen name="Stations" component={StationsScreen} options={{ tabBarLabel: 'Stations', headerShown: false }} />
<Tab.Screen name="Rewards" component={RewardsScreen} options={{ tabBarLabel: 'Rewards', headerShown: false }} /> <Tab.Screen name="Rewards" component={RewardsScreen} options={{ tabBarLabel: 'Rewards', headerShown: false }} />
</Tab.Navigator> </Tab.Navigator>

57
app/screens/payatpump/fragments/stationdetailspanel.js
View File

@ -118,7 +118,7 @@ const PayatpumpStationDetails = (props) => {
.map(([key, value]) => `${value}`) .map(([key, value]) => `${value}`)
return ( return (
<TouchableOpacity activeOpacity={1} style={{backgroundColor: Theme.colors.white }}> <TouchableOpacity activeOpacity={1} style={{backgroundColor: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.border : Theme.colors.white }}>
<View style={{flex: 0, padding: 15, flexDirection: 'row'}}> <View style={{flex: 0, padding: 15, flexDirection: 'row'}}>
<View style={{flex: 5}}> <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: 15}}>{filteredAddress.join(', ').toString()}</Text> <Text style={{fontFamily: 'arial',color: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.text : Theme.colors.textPrimary, padding: 5, width: '90%', fontSize: 15}}>{filteredAddress.join(', ').toString()}</Text>
@ -147,15 +147,16 @@ const PayatpumpStationDetails = (props) => {
console.error('An error occurred', err) console.error('An error occurred', err)
}) })
}}> }}>
<Text style={{color: "darkblue"}}>{station.phone}</Text> <Text style={{color: '#6887ed'}}>{station.phone}</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</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> <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', paddingTop: 7}}> <View style={{flexDirection: 'row', paddingBottom: 10}}>
{stars} {stars}
</View> </View>
</View> </View>
<View style={{justifyContent: 'flex-end'}}>
<TouchableOpacity <TouchableOpacity
onPress={() => { onPress={() => {
if(props.data.fuelService?.fuelingPoints == undefined) { if(props.data.fuelService?.fuelingPoints == undefined) {
@ -165,42 +166,11 @@ const PayatpumpStationDetails = (props) => {
} }
}} }}
style={{ backgroundColor: Theme.colors.primary, padding: 12, alignSelf: 'center', alignItems: 'center', justifyContent: 'center', borderRadius: 5 }}> style={{ backgroundColor: Theme.colors.primary, padding: 12, alignSelf: 'center', alignItems: 'center', justifyContent: 'center', borderRadius: 5 }}>
<Text style={{ color: Theme.colors.white }}>Pay at Pump</Text> <Text style={{ color: Theme.colors.white, fontSize: 12 }}>PUMP AND GO</Text>
</TouchableOpacity> </TouchableOpacity>
</View>
</View> </View>
<List>
<ListItem itemDivider style={{backgroundColor: props.app_theme?.theme.dark ? Theme.colors.darkGray : Theme.colors.lightGray}}>
<View style={{flexDirection: 'row'}}>
<Text style={{flex: 1, color: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.text : Theme.colors.textPrimary, fontSize: 20, fontWeight: 'bold' }}>Fuel Prices</Text>
{/* <Text style={{flex: 3, alignItems: 'flex-start', color: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.text : Theme.colors.textPrimary, fontStyle: 'italic', fontSize: 12}}>Last Update: {station.latest_update}</Text> */}
</View>
</ListItem>
{station.fuelService.fuelProducts != undefined && station.fuelService.fuelProducts.length > 0 ? (
<FlatList
style={{ marginBottom: 16 }}
keyExtractor={(item, index) => index.toString()}
data={station.fuelService.fuelProducts}
scrollEnabled={true}
showsVerticalScrollIndicator={false}
renderItem={({item, index}) => {
return (
<ListItem key={index}>
<Left>
<Text style={{color: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.text : Theme.colors.textPrimary}}>{item.name}</Text>
</Left>
<Right>
<Text style={{color: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.text : Theme.colors.textPrimary, color: Theme.colors.primary}}>&#8369; {item.creditPrice}</Text>
</Right>
</ListItem>
)
}} />
) : (
<View style={{ alignItems: 'center', justifyContent: 'center', height: 85 }}>
<Text style={{ fontSize: 18, color: props.app_theme?.theme.colors.text, textAlign: 'center' }}>No Current Data</Text>
</View>
)}
</List>
{PumpSelectorModalView()} {PumpSelectorModalView()}
</TouchableOpacity> </TouchableOpacity>
) )
@ -227,7 +197,6 @@ const PayatpumpStationDetails = (props) => {
REQUEST_POST_PAY('postClaim', 'post', { REQUEST_POST_PAY('postClaim', 'post', {
token: USER_PROFILE.data.auth_p97 token: USER_PROFILE.data.auth_p97
}, {}, params, async (res) => { }, {}, params, async (res) => {
console.log(res)
if(res.success == undefined) { if(res.success == undefined) {
resetFlags() resetFlags()
setTimeout(() => { setTimeout(() => {
@ -236,6 +205,11 @@ const PayatpumpStationDetails = (props) => {
} else { } else {
if(res.success) { if(res.success) {
resetFlags() resetFlags()
if(!res.response.saleItems) {
return Alert.alert('Error', "No transaction Available");
}
props.onTransaction(res.response, store.storeId, selectedPump) props.onTransaction(res.response, store.storeId, selectedPump)
} else { } else {
resetFlags() resetFlags()
@ -363,6 +337,7 @@ const PayatpumpStationDetails = (props) => {
return ( return (
<TouchableOpacity disabled={!available} onPress={() => { <TouchableOpacity disabled={!available} onPress={() => {
setInitiateProceed(true) setInitiateProceed(true)
console.log(item);
setSelectedPump(item) setSelectedPump(item)
}} key={index} style={{ alignItems: 'center', justifyContent: 'center', margin: 20 }}> }} key={index} style={{ alignItems: 'center', justifyContent: 'center', margin: 20 }}>
{(currentSelectedPump != null && currentSelectedPump.pumpNumber == item.pumpNumber) ? ( {(currentSelectedPump != null && currentSelectedPump.pumpNumber == item.pumpNumber) ? (
@ -402,7 +377,7 @@ const PayatpumpStationDetails = (props) => {
return ( return (
<View style={{flex: 1}}> <View style={{flex: 1}}>
<BottomSheet <BottomSheet
snapPoints={snapPoint()} snapPoints={['25', '25', '25']}
renderContent={() => { renderContent={() => {
return props.data == null ? null : renderStationDetails(props.data, props.onClick) return props.data == null ? null : renderStationDetails(props.data, props.onClick)
}} }}
@ -418,7 +393,7 @@ const PayatpumpStationDetails = (props) => {
{props.data.storeName} {props.data.storeName}
</Text> </Text>
<View style={{flex: 0, justifyContent: 'center'}}> <View style={{flex: 0, justifyContent: 'center'}}>
<TouchableOpacity onPress={() => {}} activeOpacity={1} style={{top: -25}}> <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}}> <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 != "") ? {(props.data && props.data.address != undefined && props.data.address != "") ?
<NavigationApps <NavigationApps
@ -427,7 +402,7 @@ const PayatpumpStationDetails = (props) => {
modalVisible={true} modalVisible={true}
viewMode="sheet" viewMode="sheet"
actionSheetBtnCloseTitle="Cancel" actionSheetBtnCloseTitle="Cancel"
actionSheetBtnOpenTitle={<Icon.Ionicons name="ios-send" color="#fff" size={35} />} actionSheetBtnOpenTitle={<Icon.FontAwesome name="location-arrow" color="#fff" size={25} />}
actionSheetTitle="Choose an application to view the route" actionSheetTitle="Choose an application to view the route"
address={props.data.address} // address to navigate by for all apps address={props.data.address} // address to navigate by for all apps
waze={{ address: props.data.address, lat:props.data.latitude, lon:props.data.longitude, action: actions.navigateByLatAndLon}} // specific settings for waze waze={{ address: props.data.address, lat:props.data.latitude, lon:props.data.longitude, action: actions.navigateByLatAndLon}} // specific settings for waze
@ -436,7 +411,7 @@ const PayatpumpStationDetails = (props) => {
: null} : null}
</View> </View>
<Text style={{color: Theme.colors.primary}}>Directions</Text> <Text style={{color: Theme.colors.primary}}>Directions</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View> </View>
</View> </View>

1
app/screens/payatpump/index.js
View File

@ -96,6 +96,7 @@ class Payatpump extends React.Component {
fetch = async (location, successCallback, errorCallback) => { fetch = async (location, successCallback, errorCallback) => {
if(!location) return false if(!location) return false
this.setState({ loading: true }) this.setState({ loading: true })
console.log(this.state.mylocation);
REQUEST_POST_PAY('getStores', 'get', {}, { REQUEST_POST_PAY('getStores', 'get', {}, {
latitude: 14.580, //location.latitude, //uncomment this and replace the current value with this object latitude: 14.580, //location.latitude, //uncomment this and replace the current value with this object

173
app/screens/payatpump/pumppaymentlist.js
View File

@ -17,6 +17,7 @@ import Theme from '../../components/theme.style.js';
import Assets from '../../components/assets.manager.js'; import Assets from '../../components/assets.manager.js';
import Elements from '../../components/elements.js'; import Elements from '../../components/elements.js';
import DB from '../../components/storage/'; import DB from '../../components/storage/';
import CustomSafeArea from '../../components/safeArea.component';
class PayatpumpPaymentList extends React.Component { class PayatpumpPaymentList extends React.Component {
@ -39,11 +40,7 @@ class PayatpumpPaymentList extends React.Component {
this.getFunding() this.getFunding()
} }
componentWillUnmount() { getFunding = async (defaultCard = null, enableDefaultCard = false, setDefault = false) => {
}
getFunding = async (defaultCard = null, enableDefaultCard = false) => {
this.setState({ loading: true }) this.setState({ loading: true })
const USER_PROFILE = await DB.profile() const USER_PROFILE = await DB.profile()
REQUEST_POST_PAY('getFunding', 'post', { REQUEST_POST_PAY('getFunding', 'post', {
@ -56,6 +53,8 @@ class PayatpumpPaymentList extends React.Component {
}, 300) }, 300)
} else { } else {
if(res.success) { if(res.success) {
let savedCard = await DB.get("pumpPaymentCards");
let selectedCard = JSON.parse(savedCard);
let wallets = res.response.wallets.map(item => { let wallets = res.response.wallets.map(item => {
let wallet = item.wallets.map(walletItem => { let wallet = item.wallets.map(walletItem => {
let fundingProviderName = item.fundingProviderName let fundingProviderName = item.fundingProviderName
@ -64,12 +63,27 @@ class PayatpumpPaymentList extends React.Component {
return wallet return wallet
}) })
var mergedWallets = [].concat.apply([], wallets) var mergedWallets = [].concat.apply([], wallets)
let defaultIndex = -1 let defaultIndex = -1;
let selectedDefaultCard = null let selectedDefaultCard = null
if(enableDefaultCard) { if(enableDefaultCard) {
defaultIndex = mergedWallets.findIndex(item => item.userPaymentSourceId === defaultCard.userPaymentSourceId) defaultIndex = mergedWallets.findIndex(item => item.userPaymentSourceId === defaultCard.userPaymentSourceId);
selectedDefaultCard = mergedWallets[defaultIndex] selectedDefaultCard = mergedWallets[defaultIndex];
if(setDefault) {
await DB.set(
"pumpPaymentCards",
JSON.stringify(selectedDefaultCard),
() => {},
() => {}
)
}
} else {
if(selectedCard && !setDefault) {
defaultIndex = mergedWallets.findIndex(item => item.userPaymentSourceId === selectedCard.userPaymentSourceId);
selectedDefaultCard = mergedWallets[defaultIndex];
}
} }
this.setState({ cards: mergedWallets, defaultCardIndex: defaultIndex, defaultSelectedCard: selectedDefaultCard, deleteCard: null }) this.setState({ cards: mergedWallets, defaultCardIndex: defaultIndex, defaultSelectedCard: selectedDefaultCard, deleteCard: null })
} else { } else {
setTimeout(() => { setTimeout(() => {
@ -100,13 +114,39 @@ class PayatpumpPaymentList extends React.Component {
}, 300) }, 300)
} else { } else {
if(res.success) { if(res.success) {
let defaultCardIndex = -1;
let defaultSelectedCard = null;
let wallets = this.state.cards.filter(item => { let wallets = this.state.cards.filter(item => {
return item.userPaymentSourceId != this.state.deleteCard.userPaymentSourceId return item.userPaymentSourceId != this.state.deleteCard.userPaymentSourceId
}) })
.map(item => { .map(item => {
return item return item
}) })
this.setState({ cards: wallets, defaultCardIndex: -1, defaultSelectedCard: null, deleteCard: null })
if(wallets.length > 0) {
defaultCardIndex = 0;
defaultSelectedCard = wallets[defaultCardIndex];
this.props.route?.params.onSelectedPaymentCard(defaultSelectedCard)
await DB.set(
"pumpPaymentCards",
JSON.stringify(defaultSelectedCard),
() => {},
() => {}
)
} else {
this.props.route?.params.onSelectedPaymentCard(null)
await DB.set(
"pumpPaymentCards",
JSON.stringify(null),
() => {},
() => {}
)
}
this.setState({ cards: wallets, defaultCardIndex: defaultCardIndex, defaultSelectedCard: defaultSelectedCard, deleteCard: null })
} else { } else {
setTimeout(() => { setTimeout(() => {
Alert.alert('Error', 'Failed to get fund. Try again.') Alert.alert('Error', 'Failed to get fund. Try again.')
@ -121,17 +161,27 @@ class PayatpumpPaymentList extends React.Component {
}) })
} }
submitPaymentCard = async () => { submitPaymentCard = async (defaultSelectedCard) => {
if(this.state.defaultSelectedCard == null) { if(defaultSelectedCard == null) {
this.setState({ showModal: true }) this.setState({ showModal: true })
return return
} }
this.props.route?.params.onSelectedPaymentCard(this.state.defaultSelectedCard)
this.props.navigation.goBack() await DB.set(
"pumpPaymentCards",
JSON.stringify(defaultSelectedCard),
() => {
this.props.route?.params.onSelectedPaymentCard(defaultSelectedCard)
this.props.navigation.goBack()
},
() => {}
)
} }
onAddNewCard = (response, enableDefaultCard) => { onAddNewCard = (response, enableDefaultCard, setDefault) => {
this.getFunding(response, enableDefaultCard) this.getFunding(response, enableDefaultCard, setDefault)
} }
renderDeleteErrorModal = () => { renderDeleteErrorModal = () => {
@ -176,18 +226,33 @@ class PayatpumpPaymentList extends React.Component {
data={this.state.cards} data={this.state.cards}
scrollEnabled={true} scrollEnabled={true}
showsVerticalScrollIndicator={false} showsVerticalScrollIndicator={false}
style={{flex: 1}}
contentContainerStyle={{flex: 1}}
ListEmptyComponent={() => (
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<Text style={{color: Theme.colors.gray, fontSize: 15}}>Empty</Text>
</View>
)}
renderItem={({item, index}) => { renderItem={({item, index}) => {
return ( return (
<View style={{ flex: 1, flexDirection: 'row', borderBottomColor: Theme.colors.darkGray, borderBottomWidth: 1, backgroundColor: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.background : Theme.colors.white }}> <View style={{ flex: 1, flexDirection: 'row', marginLeft: 15 }}>
<TouchableOpacity activeOpacity={0.5} onPress={() => this.setState({ defaultCardIndex: this.state.isShowSelectionCard ? -1 : this.state.defaultCardIndex == index ? -1 : index, defaultSelectedCard: this.state.defaultCardIndex == index ? null : item })} key={index} style={{ flex: 1, alignItems: 'center', justifyContent: 'center', flexDirection: 'row', backgroundColor: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.background : Theme.colors.white, padding: 12 }}> <TouchableOpacity activeOpacity={0.5} onPress={() => {
// this.setState({ defaultCardIndex: this.state.isShowSelectionCard ? -1 : this.state.defaultCardIndex == index ? -1 : index, defaultSelectedCard: this.state.defaultCardIndex == index ? null : item });
this.submitPaymentCard(item);
}} key={index} style={{ flex: 1, alignItems: 'center', justifyContent: 'center', flexDirection: 'row', backgroundColor: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.background : Theme.colors.white, padding: 12 }}>
<TouchableOpacity style={{borderColor: this.state.defaultCardIndex == index ? "blue" : "gray", borderWidth: 2, width: 20, height: 20, borderRadius: 10, marginRight: 10, paddingHorizontal: 2, paddingVertical: 2}}>
{this.state.defaultCardIndex == index && <View style={{flex:1, borderRadius: 10, backgroundColor: 'blue'}} /> }
</TouchableOpacity>
<View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}> <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
<Image source={{ uri: item.imageUrl }} style={{ width: 40, height: 40, resizeMode: 'contain', marginRight: 16 }} /> <Image source={{ uri: item.imageUrl }} style={{ width: 40, height: 40, resizeMode: 'contain', marginRight: 16 }} />
<Text style={{ fontSize: 18, color: this.props.app_theme?.theme.colors.text, fontWeight: 'bold', textAlign: 'left' }}>{`**** **** **** ${item.lastFour}`}</Text> <View>
<Text style={{ fontSize: 15, color: this.props.app_theme?.theme.colors.text, textAlign: 'left' }}>{`**** **** **** ${item.lastFour}`}</Text>
{this.state.defaultCardIndex == index && <Text style={{fontStyle: 'italic', fontSize: 11, color: '#6887ed'}}>Primary</Text>}
</View>
</View> </View>
<View style={{ flex: 0.2, alignItems: 'center', flexDirection: 'row', justifyContent: 'flex-end' }}> <View style={{ borderRadius: 100, alignItems: 'center', backgroundColor: 'white', flexDirection: 'row', justifyContent: 'flex-end' }}>
{this.state.defaultCardIndex == index && <Icon.AntDesign name={"checkcircle"} size={18} color={'green'} />}
<TouchableOpacity onPress={() => this.setState({ deleteCard: item, showModal: true })} <TouchableOpacity onPress={() => this.setState({ deleteCard: item, showModal: true })}
style={{ paddingVertical: 10 }}> style={{ paddingVertical: 5 }}>
<Icon.EvilIcons name={"trash"} size={40} color={Theme.colors.primaryDark} /> <Icon.EvilIcons name={"trash"} size={40} color={Theme.colors.primaryDark} />
</TouchableOpacity> </TouchableOpacity>
</View> </View>
@ -202,7 +267,7 @@ class PayatpumpPaymentList extends React.Component {
render() { render() {
return ( return (
<SafeAreaView style={{ flex: 1 }}> <CustomSafeArea>
<CustomHeader <CustomHeader
title={'Payment List'} title={'Payment List'}
onBackPress={() => this.props.navigation.goBack()} onBackPress={() => this.props.navigation.goBack()}
@ -218,50 +283,32 @@ class PayatpumpPaymentList extends React.Component {
color={this.props.app_theme?.theme.colors.text} color={this.props.app_theme?.theme.colors.text}
visible={this.state.loading} /> visible={this.state.loading} />
<View style={{ flex: 1 }}> <View style={{ flex: 1 }}>
<View style={{flexDirection: 'row', padding: 13, backgroundColor: Theme.colors.darkerGray}}>
<View style={{flex: 1}}>
<Text style={{fontFamily: 'Arial', fontSize: 16, color: '#fff'}}>Enroll Card</Text>
</View>
<View style={{flex: 1, textAlign: 'right', alignItems: 'flex-end'}}>
<Text style={{fontFamily: 'Arial', fontSize: 16, color: '#fff'}}></Text>
</View>
</View>
<TouchableOpacity
onPress={() => {
this.setState({ })
this.props.navigation.navigate('PayatpumpPaymentMethod', { onAddNewCard: (newcard, enableDefaultCard) => this.onAddNewCard(newcard, enableDefaultCard)})
}}
style={{flexDirection: 'row', padding: 13}}>
<View style={{flex: 0}}>
<Image source={Assets.icons.topup} style={{ width: 44, height: 44, resizeMode: 'contain' }} />
</View>
<View style={{flex: 1, justifyContent: 'center'}}>
<Text style={{ textAlign: 'left', fontFamily: 'Arial', fontSize: 20, fontWeight: 'bold', color: this.props.app_theme?.theme.colors.text, padding: 10 }}>Add New Card</Text>
</View>
</TouchableOpacity>
<View style={{flexDirection: 'row', padding: 13, backgroundColor: Theme.colors.darkerGray}}>
<View style={{flex: 1}}>
<Text style={{fontFamily: 'Arial', fontSize: 16, color: '#fff'}}>Select preferred Card</Text>
</View>
<View style={{flex: 1, textAlign: 'right', alignItems: 'flex-end'}}>
<Text style={{fontFamily: 'Arial', fontSize: 16, color: '#fff'}}></Text>
</View>
</View>
</View>
<View style={{ flex: 3 }}>
{this.renderDeleteErrorModal()} {this.renderDeleteErrorModal()}
{this.renderCardList()} {this.renderCardList()}
<TouchableOpacity
onPress={() => this.props.navigation.navigate('PayatpumpPaymentMethod', { onAddNewCard: (newcard, enableDefaultCard) => this.onAddNewCard(newcard, enableDefaultCard)})}
style={{alignSelf: 'center'}}
>
<View style={{flexDirection: 'row', padding: 5}}>
<Icon.MaterialIcons
name="credit-card"
size={20}
color={Theme.colors.primary}
/>
<Text
style={{
fontFamily: 'Arial',
color: Theme.colors.primary,
marginLeft: 10,
fontSize: 16,
}}>
Add a Card
</Text>
</View>
</TouchableOpacity>
</View> </View>
{!this.state.isShowSelectionCard && ( </CustomSafeArea>
<View>
<TouchableOpacity
onPress={() => this.submitPaymentCard()}
style={{ backgroundColor: Theme.colors.primary, padding: 15, borderRadius: 5, marginHorizontal: 25, marginBottom: 10 }}>
<Text style={{ color: Theme.colors.white, fontSize: 20, fontWeight: 'bold', textAlign: 'center' }}>Confirm</Text>
</TouchableOpacity>
</View>
)}
</SafeAreaView>
) )
} }
} }

148
app/screens/payatpump/pumppaymentmethod.js
View File

@ -1,7 +1,6 @@
import * as React from 'react'; import * as React from 'react';
import { connect } from "react-redux"; import { connect } from "react-redux";
import { import {
SafeAreaView,
TouchableOpacity, TouchableOpacity,
View, View,
Text, Text,
@ -22,6 +21,7 @@ import Elements from '../../components/elements.js';
import Assets from '../../components/assets.manager.js'; import Assets from '../../components/assets.manager.js';
import Cipher from '../../components/cardencrypt/encryptcard'; import Cipher from '../../components/cardencrypt/encryptcard';
import DB from '../../components/storage/'; import DB from '../../components/storage/';
import CustomSafeArea from '../../components/safeArea.component';
class PayatpumpPaymentMethodList extends React.Component { class PayatpumpPaymentMethodList extends React.Component {
@ -32,7 +32,6 @@ class PayatpumpPaymentMethodList extends React.Component {
state = { state = {
cards: [], cards: [],
cardNumber: null, cardNumber: null,
cardHolder: null,
cardExpiry: null, cardExpiry: null,
cardCVV: null, cardCVV: null,
focus_holder: null, focus_holder: null,
@ -41,7 +40,8 @@ class PayatpumpPaymentMethodList extends React.Component {
enableDefaultCard: false, enableDefaultCard: false,
showModal: false, showModal: false,
pubkey: null, pubkey: null,
verificationUrl: null verificationUrl: null,
setPrimary: false
} }
componentDidMount() { componentDidMount() {
@ -164,10 +164,6 @@ class PayatpumpPaymentMethodList extends React.Component {
this.setState({ cardNumber: cardnumber }); this.setState({ cardNumber: cardnumber });
} }
_handlingCardHolder = (name) => {
this.setState({ cardHolder: name })
}
_handlingCardExpiry = (number) => { _handlingCardExpiry = (number) => {
if (number.indexOf('.') >= 0 || number.length > 5) return if (number.indexOf('.') >= 0 || number.length > 5) return
if (number.length === 2 && this.state.cardExpiry.length === 1) number += '/' if (number.length === 2 && this.state.cardExpiry.length === 1) number += '/'
@ -189,7 +185,6 @@ class PayatpumpPaymentMethodList extends React.Component {
REQUEST_POST_PAY('addCreditCard', 'post', { REQUEST_POST_PAY('addCreditCard', 'post', {
token: USER_PROFILE.data.auth_p97 token: USER_PROFILE.data.auth_p97
}, {}, params, (res) => { }, {}, params, (res) => {
console.log(res)
if(res.success == undefined) { if(res.success == undefined) {
this.setState({ loading: false }) this.setState({ loading: false })
setTimeout(() => { setTimeout(() => {
@ -198,10 +193,7 @@ class PayatpumpPaymentMethodList extends React.Component {
} else { } else {
this.setState({ loading: false }) this.setState({ loading: false })
if(res.success) { if(res.success) {
setTimeout(() => { this.props.route?.params.onAddNewCard({ userPaymentSourceId: res.response.userPaymentSourceId, referenceNumber: res.response.referenceNumber }, this.state.enableDefaultCard, this.state.setPrimary)
this.props.route?.params.onAddNewCard({ userPaymentSourceId: res.response.userPaymentSourceId, referenceNumber: res.response.referenceNumber }, this.state.enableDefaultCard)
this.props.navigation.goBack()
}, 500);
} else { } else {
setTimeout(() => { setTimeout(() => {
Alert.alert('Error', res.Message) Alert.alert('Error', res.Message)
@ -217,25 +209,24 @@ class PayatpumpPaymentMethodList extends React.Component {
} }
submitNewAddedCard = () => { submitNewAddedCard = () => {
if(this.state.cardNumber == null || this.state.cardExpiry == null || this.state.cardCVV == null || this.state.cardHolder == null) { if(this.state.cardNumber == null || this.state.cardExpiry == null || this.state.cardCVV == null) {
this.setState({ showModal: true }) this.setState({ showModal: true })
return return
} }
let numberYear = moment(new Date()).format('YYYY').slice(0, 2) //get initial 2 digits of year let numberYear = moment(new Date()).format('YYYY').slice(0, 2) //get initial 2 digits of year
let cardnumber = this.state.cardNumber.replace(/\s/g, "") let cardnumber = this.state.cardNumber.replace(/\s/g, "")
let cardHolder = this.state.cardHolder
let cardExpiry = `${this.state.cardExpiry.split("/")[0]}${numberYear}${this.state.cardExpiry.split("/")[1]}` let cardExpiry = `${this.state.cardExpiry.split("/")[0]}${numberYear}${this.state.cardExpiry.split("/")[1]}`
let cardCvv = this.state.cardCVV let cardCvv = this.state.cardCVV
if(cardValidator.number(cardnumber)?.card?.type != undefined && cardValidator.number(cardnumber)?.card?.type !== "visa") { if(cardValidator.number(cardnumber).card.type === "jcb") {
Alert.alert('Error', `${cardValidator.number(cardnumber)?.card?.type.slice(0,1).toUpperCase() + cardValidator.number(cardnumber).card.type.slice(1, cardValidator.number(cardnumber).card.type.length)} in not available. Please use different card type.`) Alert.alert('Error', `${cardValidator.number(cardnumber).card.niceType} is not available. Please use different card type.`)
return
}
if(!cardValidator.number(cardnumber)?.card?.type) {
Alert.alert('Error', `Invalid card number. Please use different card type.`)
return return
} else {
if(cardValidator.number(cardnumber)?.card?.type == undefined) {
Alert.alert('Error', "Invalid card number. Please check and try again.")
return
}
} }
if(!cardValidator.expirationDate(cardExpiry).isValid) { if(!cardValidator.expirationDate(cardExpiry).isValid) {
@ -251,7 +242,7 @@ class PayatpumpPaymentMethodList extends React.Component {
let cardDetails = { pan: cardnumber, expDate: cardExpiry, cvv: cardCvv } let cardDetails = { pan: cardnumber, expDate: cardExpiry, cvv: cardCvv }
this.setState({ loading: true }) this.setState({ loading: true })
this.addCard(JSON.stringify(cardDetails), this.state.pubkey, cardHolder, onSuccess => { this.addCard(JSON.stringify(cardDetails), this.state.pubkey, cardValidator.number(cardnumber).card.niceType, onSuccess => {
this.setState({ loading: false }) this.setState({ loading: false })
setTimeout(() => { setTimeout(() => {
this.props.navigation.navigate('VerificationWebview', {...onSuccess, onSuccessAuthentication:(referenceNumber) => this._onAuthenticationSuccess(referenceNumber)}) this.props.navigation.navigate('VerificationWebview', {...onSuccess, onSuccessAuthentication:(referenceNumber) => this._onAuthenticationSuccess(referenceNumber)})
@ -259,9 +250,6 @@ class PayatpumpPaymentMethodList extends React.Component {
}, },
error => { error => {
this.setState({ loading: false }) this.setState({ loading: false })
setTimeout(() => {
Alert.alert('Error', error)
}, 300)
}) })
} }
@ -325,81 +313,70 @@ class PayatpumpPaymentMethodList extends React.Component {
renderCardForm = () => { renderCardForm = () => {
return ( return (
<> <View style={{paddingHorizontal: 30, paddingTop: 40}}>
<View style={{ flex: 0.2, justifyContent: 'center' }}> <Text style={{paddingLeft: 10, color: this.props.app_theme?.theme.colors.text}}>Card Number</Text>
<Text style={{ fontSize: 20, color: Theme.colors.primary, textAlign: 'center' }}>Enroll Your Payment Card</Text> <View style={styles.cardContainer}>
<TextInput
keyboardType="numeric"
returnKeyType={'done'}
placeholder="Enter card number here"
placeholderTextColor={Theme.colors.gray}
value={this.state.cardNumber}
onFocus={() => this.setState({ focus_expiry: true, focus_cvv: false })}
onChangeText={(value) => this._handlingCardNumber(value)}
style={{ flex: 1, color: this.props.app_theme?.theme.colors.text }}
/>
<Image source={Assets.icons.stpunlabeled} style={{ width: 30, height: 30, resizeMode: 'contain' }} />
</View> </View>
<View style={{ flex: 0.1 }} /> <View style={{flexDirection: 'row' }}>
<View style={{ flex: 0.3 }}> <View style={[styles.expirationCvvContainer, { flex: 1, marginLeft: 16, marginRight: 5 }]}>
<View style={{ flexDirection: 'row', marginHorizontal: 16 }}>
<Text style={{ color: this.props.app_theme?.theme.colors.text }}>Enroll Your Payment Card</Text>
</View>
<View style={styles.cardContainer}>
<TextInput <TextInput
keyboardType="numeric" keyboardType="numeric"
returnKeyType={'done'} returnKeyType={'done'}
placeholder="This card will be used for pay at pump" placeholder="Expiration(MM/YY)"
placeholderTextColor={Theme.colors.gray} placeholderTextColor={Theme.colors.gray}
value={this.state.cardNumber} value={this.state.cardExpiry}
onFocus={() => this.setState({ focus_expiry: true, focus_cvv: false })} onFocus={() => this.setState({ focus_expiry: true, focus_cvv: false })}
onChangeText={(value) => this._handlingCardNumber(value)} onChangeText={(value) => this._handlingCardExpiry(value)}
style={{ flex: 1, color: this.props.app_theme?.theme.colors.text, fontStyle: 'italic' }} style={{ flex: 1, color: this.props.app_theme?.theme.colors.text, marginRight: 3 }}
/> />
<Image source={Assets.icons.stpunlabeled} style={{ width: 30, height: 30, resizeMode: 'contain' }} />
</View> </View>
</View> <View style={[styles.expirationCvvContainer, { flex: 0.55, marginRight: 16, marginLeft: 5 }]}>
<View style={{ flex: 0.3 }}>
<View style={{ flexDirection: 'row', marginHorizontal: 16 }}>
<Text style={{ color: this.props.app_theme?.theme.colors.text }}>Name on Card</Text>
</View>
<View style={styles.cardContainer}>
<TextInput <TextInput
keyboardType="ascii-capable" keyboardType="numeric"
returnKeyType={'done'} returnKeyType={'done'}
value={this.state.cardHolder} placeholder="CVV"
placeholderTextColor={Theme.colors.gray}
value={this.state.cardCVV}
onFocus={() => this.setState({ focus_expiry: true, focus_cvv: false })} onFocus={() => this.setState({ focus_expiry: true, focus_cvv: false })}
onChangeText={(value) => this._handlingCardHolder(value)} onChangeText={(value) => this._handlingCVV(value)}
style={{ flex: 1, color: this.props.app_theme?.theme.colors.text }} style={{ flex: 1, color: this.props.app_theme?.theme.colors.text, marginLeft: 3 }}
/> />
</View> </View>
</View> </View>
<View style={{ flex: 0.3 }}> </View>
<View style={{ flexDirection: 'row', marginHorizontal: 16 }}> )
<Text style={{ color: this.props.app_theme?.theme.colors.text, flex: 1 }}>Expiration (MM/YY)</Text> }
<Text style={{ color: this.props.app_theme?.theme.colors.text, flex: 0.5 }}>CVV</Text>
</View> renderSwitch = () => {
<View style={{ flex: 0.3, flexDirection: 'row' }}> return (
<View style={[styles.expirationCvvContainer, { flex: 1, marginLeft: 16, marginRight: 5 }]}> <View style={{flexDirection: 'row', paddingHorizontal: 40, marginTop: 20, alignItems: 'center', justifyContent: 'space-between'}}>
<TextInput <Text style={{color: Theme.colors.gray}}>Set as primary card</Text>
keyboardType="numeric" <Switch
returnKeyType={'done'} value={this.state.setPrimary}
value={this.state.cardExpiry} trackColor={{true: "#6887ed"}}
onFocus={() => this.setState({ focus_expiry: true, focus_cvv: false })} thumbColor={this.state.setPrimary && "blue"}
onChangeText={(value) => this._handlingCardExpiry(value)} onChange={() => this.setState({ setPrimary: !this.state.setPrimary })}
style={{ flex: 1, color: this.props.app_theme?.theme.colors.text, marginRight: 3 }} />
/> </View>
</View>
<View style={[styles.expirationCvvContainer, { flex: 0.55, marginRight: 16, marginLeft: 5 }]}>
<TextInput
keyboardType="numeric"
returnKeyType={'done'}
value={this.state.cardCVV}
onFocus={() => this.setState({ focus_expiry: true, focus_cvv: false })}
onChangeText={(value) => this._handlingCVV(value)}
style={{ flex: 1, color: this.props.app_theme?.theme.colors.text, marginLeft: 3 }}
/>
</View>
</View>
</View>
</>
) )
} }
render() { render() {
return ( return (
<SafeAreaView style={{ flex: 1 }}> <CustomSafeArea>
<CustomHeader <CustomHeader
title={"Add Card"} title={"Payment Method"}
onBackPress={() => this.onBackConfirmation()} onBackPress={() => this.onBackConfirmation()}
back={true} back={true}
menu={false} menu={false}
@ -414,18 +391,19 @@ class PayatpumpPaymentMethodList extends React.Component {
visible={this.state.loading} /> visible={this.state.loading} />
{this.renderErrorModal()} {this.renderErrorModal()}
{this.renderCardForm()} {this.renderCardForm()}
{this.renderSwitch()}
{this.state.verificationUrl != null && this.renderWebview()} {this.state.verificationUrl != null && this.renderWebview()}
<View style={{ flex: 1 }} /> <View style={{ flex: 1 }} />
<View> <View>
<Text style={{ textAlign: 'center', fontStyle: 'italic', color: this.props.app_theme?.theme.colors.text }}>Your card will be changed to ensure that it's valid.</Text> <Text style={{ fontSize: 11, textAlign: 'center', fontStyle: 'italic', color: this.props.app_theme?.theme.colors.text }}>Your card will be changed to ensure that it's valid.</Text>
<Text style={{ textAlign: 'center', fontStyle: 'italic', color: this.props.app_theme?.theme.colors.text }}>Charge amount will be automatically refunded.</Text> <Text style={{ fontSize: 11, textAlign: 'center', fontStyle: 'italic', color: this.props.app_theme?.theme.colors.text }}>Charge amount will be automatically refunded.</Text>
<View style={{ marginBottom: 5 }} /> <View style={{ marginBottom: 5 }} />
<TouchableOpacity onPress={() => this.submitNewAddedCard()} <TouchableOpacity onPress={() => this.submitNewAddedCard()}
style={{ height: 55, marginBottom: 16, backgroundColor: Theme.colors.primary, justifyContent: 'center', alignItems: 'center', borderRadius: 5, marginHorizontal: 16 }}> style={{ height: 50, marginBottom: 16, backgroundColor: Theme.colors.primary, justifyContent: 'center', alignItems: 'center', borderRadius: 5, marginHorizontal: 35 }}>
<Text style={{ fontSize: 18, color: Theme.colors.white, textAlign: 'center', fontWeight: 'bold' }}>Save</Text> <Text style={{ fontSize: 18, color: Theme.colors.white, textAlign: 'center', fontWeight: 'bold' }}>Save</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</SafeAreaView> </CustomSafeArea>
) )
} }
} }

27
app/screens/payatpump/pumppaymentsuccess.js
View File

@ -46,31 +46,24 @@ class PayatpumpPaymentSuccess extends React.Component {
render() { render() {
return( return(
<SafeAreaView style={{ flex: 1 }}> <SafeAreaView style={{ flex: 1 }}>
<View>
<View style={{flexDirection: 'row', height: this.props.height ? this.props.height : 55, padding: 5, backgroundColor: Theme.colors.primary, top: Platform.OS =='ios' && this.props.top ? this.props.top : 0}}>
<View style={{flex:3, justifyContent: 'center'}}>
<Text style={{textAlign:'center', fontSize: 17, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : '#fff'}}></Text>
</View>
</View>
</View>
<ScrollView style={{ flex: 1 }} <ScrollView style={{ flex: 1 }}
contentContainerStyle={{ height: "100%" }} contentContainerStyle={{ height: "100%" }}
contentOffset={{ x: 0, y: this.state.keyboardHeight }} contentOffset={{ x: 0, y: this.state.keyboardHeight }}
keyboardDismissMode='on-drag'> keyboardDismissMode='on-drag'>
<View style={{ flex: 0.2, justifyContent: 'center', alignItems: 'center' }}> <View style={{ paddingTop: 40, justifyContent: 'center', alignItems: 'center' }}>
<Text style={{ color: this.props.app_theme?.theme.colors.text, fontSize: 25, textAlign: 'center' }}>{"Your transaction is successful!" + "\n" + "Payment is credited to"}</Text> <Text style={{ color: this.props.app_theme?.theme.colors.text, fontSize: 25, textAlign: 'center' }}>{"Your transaction is" + "\n" + "successful!" + "\n" + "Payment is credited to"}</Text>
</View> </View>
<View style={{ flex: 0.2, justifyContent: 'center', alignItems: 'center' }}> <View style={{ justifyContent: 'center', alignItems: 'center', paddingHorizontal: 50, paddingTop: 20, paddingBottom: 20}}>
<Text style={{ color: Theme.colors.primary, fontSize: 35, textAlign: 'center' }}>{`${this.state.data.storeName}`}</Text> <Text style={{ color: Theme.colors.primary, fontSize: 30, textAlign: 'center' }}>{`${this.state.data.storeName}`}</Text>
</View> </View>
<View style={{ flex: 1 }}> <View style={{ flex: 1, paddingHorizontal: 10 }}>
<View style={{ flex: 0.1, flexDirection: 'row', backgroundColor: Theme.colors.primary, padding: 15, marginHorizontal: 10, borderTopRightRadius: 10, borderTopLeftRadius: 10 }}> <View style={{ flex: 0.1, flexDirection: 'row', backgroundColor: Theme.colors.primary, padding: 15, marginHorizontal: 10, borderTopRightRadius: 10, borderTopLeftRadius: 10 }}>
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'flex-start', marginRight: 16 }}> <View style={{ flex: 1, justifyContent: 'center', alignItems: 'flex-start', marginRight: 16 }}>
<Text style={{ color: Theme.colors.white, textAlign: 'left', fontSize: 16 }}>Transaction Date</Text> <Text style={{ color: Theme.colors.white, textAlign: 'left', fontSize: 16 }}>Transaction Date</Text>
<Text style={{ color: Theme.colors.white, textAlign: 'left', fontSize: 16 }}>07 Oct 2020, 12:00 PM</Text> <Text style={{ color: Theme.colors.white, fontWeight: 'bold', textAlign: 'left', fontSize: 16 }} numberOfLines={1} adjustsFontSizeToFit>07 Oct 2020, 12:00 PM</Text>
</View> </View>
<View style={{ flex: 0.7, justifyContent: 'center', alignItems: 'flex-end', marginLeft: 16 }}> <View style={{ flex: 0.7, justifyContent: 'center', marginLeft: 16 }}>
<Text style={{ color: Theme.colors.white, textAlign: 'left', fontSize: 16 }}>Sales Invoice No.</Text> <Text style={{ color: Theme.colors.white, textAlign: 'left', fontSize: 16 }} numberOfLines={1} adjustsFontSizeToFit>Sales Invoice No.</Text>
<Text style={{ color: Theme.colors.white, textAlign: 'left', fontSize: 16 }} numberOfLines={1}>{this.state.data?.transactionId}</Text> <Text style={{ color: Theme.colors.white, textAlign: 'left', fontSize: 16 }} numberOfLines={1}>{this.state.data?.transactionId}</Text>
</View> </View>
</View> </View>
@ -93,7 +86,7 @@ class PayatpumpPaymentSuccess extends React.Component {
</View> </View>
</View> </View>
</View> </View>
<View style={{ flex: 0.3, justifyContent: 'center', alignItems: 'center' }}> {/* <View style={{ flex: 0.3, justifyContent: 'center', alignItems: 'center' }}>
<Text style={{ fontSize: 18, color: this.props.app_theme?.theme.colors.text, fontStyle: 'italic', marginBottom: 16 }}>Send receipt to Email</Text> <Text style={{ fontSize: 18, color: this.props.app_theme?.theme.colors.text, fontStyle: 'italic', marginBottom: 16 }}>Send receipt to Email</Text>
<TextInput <TextInput
keyboardType="email-address" keyboardType="email-address"
@ -104,7 +97,7 @@ class PayatpumpPaymentSuccess extends React.Component {
onChangeText={(value) => this.setState({ email: value })} onChangeText={(value) => this.setState({ email: value })}
style={{ width: Dimensions.get('screen').width - 60, height: 44, textAlign: 'center', fontSize: 18, borderWidth: 0.5, borderRadius: 5, color: this.props.app_theme?.theme.colors.text, borderColor: this.props.app_theme?.theme.colors.text }} style={{ width: Dimensions.get('screen').width - 60, height: 44, textAlign: 'center', fontSize: 18, borderWidth: 0.5, borderRadius: 5, color: this.props.app_theme?.theme.colors.text, borderColor: this.props.app_theme?.theme.colors.text }}
/> />
</View> </View> */}
</ScrollView> </ScrollView>
<View> <View>
<TouchableOpacity onPress={() => this.props.navigation.navigate('Main')} <TouchableOpacity onPress={() => this.props.navigation.navigate('Main')}

572
app/screens/payatpump/pumpstationtransactiondetails.js
View File

@ -12,7 +12,8 @@ import {
ScrollView, ScrollView,
Image, Image,
Modal, Modal,
StyleSheet StyleSheet,
ActivityIndicator
} from 'react-native'; } from 'react-native';
import CustomHeader from '../../components/header.js'; import CustomHeader from '../../components/header.js';
import Assets from '../../components/assets.manager.js'; import Assets from '../../components/assets.manager.js';
@ -21,7 +22,7 @@ import Icon from '../../components/icons.js';
import REQUEST_POST_PAY from '../../components/api/postpayapi'; import REQUEST_POST_PAY from '../../components/api/postpayapi';
import DB from '../../components/storage'; import DB from '../../components/storage';
import Elements from '../../components/elements'; import Elements from '../../components/elements';
import CustomSafeArea from '../../components/safeArea.component';
class PayatpumpStationTransactionDetails extends React.Component { class PayatpumpStationTransactionDetails extends React.Component {
@ -43,363 +44,294 @@ class PayatpumpStationTransactionDetails extends React.Component {
} }
componentDidMount() { componentDidMount() {
this.init() this.init();
}
componentWillUnmount() {
} }
init = async () => { init = async () => {
let session = await DB.session() let session = await DB.session()
let user_profile = await DB.profile() let user_profile = await DB.profile()
let selectedCard = await DB.get("pumpPaymentCards");
this.setState({ this.setState({
card_number: user_profile.data.card_number, card_number: user_profile.data.card_number,
session: session, session: session,
claimId: this.props.route.params.response.claimId, claimId: this.props.route.params.response.claimId,
data: this.props.route.params.response.saleItems, data: this.props.route.params.response.saleItems,
storeName: this.props.route.params.storeName, storeName: this.props.route.params.storeName,
selectedPumpNumber: this.props.route.params.selectedPump selectedPumpNumber: this.props.route.params.selectedPump,
selectedPaymentCard: JSON.parse(selectedCard)
}) })
console.log(this.props)
} }
onSelectedPointsAmount = (point_amount) => { onSelectedPointsAmount = (point_amount) => {
this.setState({ selectedPoints: point_amount }) this.setState({ selectedPoints: point_amount })
} }
onSelectedPaymentCard = (payment_card) => { onSelectedPaymentCard = (payment_card) => {
console.log(payment_card) console.log(payment_card);
this.setState({ selectedPaymentCard: payment_card }) this.setState({ selectedPaymentCard: payment_card })
}
getTransactionDetails = async (claimId, fundingProviderName, userPaymentSourceId, onSuccess, onError) => {
if(claimId == null) {
Alert.alert("Error", "No transaction id exist.")
return
} }
let length = 8 getTransactionDetails = async (claimId, fundingProviderName, userPaymentSourceId, onSuccess, onError) => {
let partnerTransactionId = parseInt((Math.random() * 9 + 1) * Math.pow(10, length-1), 10) if(claimId == null) {
let params = { Alert.alert("Error", "No transaction id exist.")
claimId: claimId, return
partnerTransactionId: partnerTransactionId,
walletRequest: {
fundingProviderName: fundingProviderName, //change this value later
fundingPayload: {
userPaymentSourceId: userPaymentSourceId //change this value later
} }
},
userPreference: { let length = 8
receiptPreference: "doNotPrintReceipt", //printReceipt, doNotPrintReceipt let partnerTransactionId = parseInt((Math.random() * 9 + 1) * Math.pow(10, length-1), 10)
emailReceiptPreference: true let params = {
}, claimId: claimId,
loyaltyPassthroughInformation: { partnerTransactionId: partnerTransactionId,
loyaltyInfo: [] walletRequest: {
}, fundingProviderName: fundingProviderName, //change this value later
fraudContext: {} fundingPayload: {
userPaymentSourceId: userPaymentSourceId //change this value later
}
},
userPreference: {
receiptPreference: "doNotPrintReceipt", //printReceipt, doNotPrintReceipt
emailReceiptPreference: true
},
loyaltyPassthroughInformation: {
loyaltyInfo: []
},
fraudContext: {}
}
let USER_PROFILE = await DB.profile()
REQUEST_POST_PAY('postpay', 'post', {
token: USER_PROFILE.data.auth_p97,
language: 'en-US'
}, {}, params, async (res) => {
if(res.success && res.response != undefined && res.response.status == "success") {
onSuccess(res)
} else {
onError(res)
}
}, (error) => {
console.log(error)
onError(error)
})
} }
let USER_PROFILE = await DB.profile() submitPayment = () => {
REQUEST_POST_PAY('postpay', 'post', { this.setState({ showModal: false, loading: true })
token: USER_PROFILE.data.auth_p97, this.getTransactionDetails(this.state.claimId, "p97token", this.state.selectedPaymentCard.userPaymentSourceId, onSuccess => {
language: 'en-US' this.setState({ loading: false })
}, {}, params, async (res) => {
if(res.success && res.response != undefined && res.response.status == "success") {
onSuccess(res)
} else {
onError(res)
}
}, (error) => {
console.log(error)
onError(error)
})
}
submitPayment = () => { if(onSuccess.success) {
this.setState({ showModal: false, loading: true }) let payment = { totalPayment: this.state.data[0]?.originalAmount.amount, cardPayment: this.state.data[0].originalAmount.amount, transactionId: onSuccess.response.transaction_id, storeName: this.state.storeName }
this.getTransactionDetails(this.state.claimId, "p97token", this.state.selectedPaymentCard.userPaymentSourceId, onSuccess => { this.props.navigation.navigate('PayatpumpPaymentSuccess', { transactionData: payment })
this.setState({ loading: false }) } else {
if(onSuccess.success) { setTimeout(() => {
let payment = { totalPayment: this.state.data[0]?.originalAmount.amount, cardPayment: this.state.data[0].originalAmount.amount, transactionId: onSuccess.response.transaction_id, storeName: this.state.storeName } Alert.alert('Error', "Failed to initiate transaction. Try again.")
this.props.navigation.navigate('PayatpumpPaymentSuccess', { transactionData: payment }) }, 300)
} else { }
}, onError => {
console.log("the success: " + JSON.stringify(onError));
this.setState({ loading: false })
setTimeout(() => { setTimeout(() => {
Alert.alert('Error', "Failed to initiate transaction. Try again.") Alert.alert('Error', "Failed to initiate transaction. Try again.")
}, 300) }, 300)
}
}, onError => {
this.setState({ loading: false })
setTimeout(() => {
Alert.alert('Error', "Failed to initiate transaction. Try again.")
}, 300)
})
}
renderModal = () => {
return (
<Modal
animationType="none"
transparent={true}
visible={this.state.showModal}>
<TouchableOpacity activeOpacity={1} onPress={() => {}} style={styles.centeredView}>
<View style={[styles.modalView, { backgroundColor: this.props.app_theme?.theme.colors.border }]}>
{this.state.selectedPoints == null && this.state.selectedPaymentCard == null ?
<>
<Image source={Assets.icons.points_balance} style={{ width: 85, height: 85, resizeMode: 'contain' }} />
<Text style={{ fontSize: 18, color: this.props.app_theme?.theme.colors.text, marginVertical: 30 }}>{'Please select payment method...'}</Text>
<TouchableOpacity onPress={() => this.setState({ showModal: false })} style={{ width: 80, height: 30, backgroundColor: Theme.colors.primary, alignItems: 'center', justifyContent: 'center', borderRadius: 5 }}>
<Text style={{ fontSize: 18, color: Theme.colors.white, textAlign: 'center' }}>Ok</Text>
</TouchableOpacity>
</> :
<View style={{ alignItems: 'center', justifyContent: 'center' }}>
<Text style={{ fontSize: 18, color: this.props.app_theme?.theme.colors.text, marginVertical: 30, textAlign: 'center' }}>{`Are you sure you want to pay ${"\u20B1"}${Theme.formatter.CRNCY(this.state.data[0]?.originalAmount.amount || 0.0)}?`}</Text>
<View style={{ justifyContent: 'center', alignItems: 'center', flexDirection: 'row' }}>
<TouchableOpacity
style={{ flex: 1, height: 30, backgroundColor: Theme.colors.primary, alignItems: 'center', justifyContent: 'center', borderRadius: 5, marginRight: 10, marginLeft: 20 }}
onPress={() => {
this.setState({ showModal: false })
}}>
<Text style={{ fontSize: 18, color: Theme.colors.white, textAlign: 'center' }}>No</Text>
</TouchableOpacity>
<TouchableOpacity
style={{ flex: 1, height: 30, backgroundColor: Theme.colors.white, alignItems: 'center', borderColor: Theme.colors.primary, borderWidth: 1, justifyContent: 'center', borderRadius: 5, marginLeft: 10, marginRight: 20 }}
onPress={() => this.submitPayment()}>
<Text style={{ fontSize: 18, color: Theme.colors.primary, textAlign: 'center' }}>Yes</Text>
</TouchableOpacity>
</View>
</View>
}
</View>
</TouchableOpacity>
</Modal>
)
}
transactionTable = () => {
const renderItem = () => {
return this.state.data.map((item, index) => {
return (
<View key={index} style={{flex: 1, flexDirection: 'row', paddingLeft: 15, paddingRight: 15, paddingTop: 10, paddingBottom: 15, alignItems: 'center'}}>
<Text style={{flex: 4,fontFamily: 'Arial', textAlign: 'left', fontSize: 13, color: this.props.app_theme?.theme.colors.text}}>{item.description}</Text>
<Text style={{flex: 3,fontFamily: 'Arial', fontWeight: 'bold', textAlign: 'left', fontSize: 13, color: this.props.app_theme?.theme.colors.text}}>{`${item.quantity} ${item.unitMeasure}`}</Text>
<Text style={{flex: 2, fontFamily: 'Arial', fontWeight: 'bold', textAlign: 'left', fontSize: 13, color: this.props.app_theme?.theme.colors.text}}>{"\u20B1"}{Theme.formatter.CRNCY(item.originalAmount.unitPrice)}</Text>
<Text style={{flex: 2, fontFamily: 'Arial', fontWeight: 'bold', textAlign: 'left', fontSize: 13, color: this.props.app_theme?.theme.colors.text}}>{"\u20B1"}{Theme.formatter.CRNCY(item.originalAmount.amount)}</Text>
</View>
)
}) })
} }
return ( renderModal = () => {
<View style={{width: '100%'}}> return (
<Divider /> <Modal
<View style={{flex: 1, flexDirection: 'row', padding: 15, marginTop: 8, alignItems: 'center'}}> animationType="none"
<Text style={{flex: 4, height: 18, fontWeight: 'bold', fontFamily: 'Arial', color: this.props.app_theme?.theme.colors.text, textAlign: 'left', fontSize: 16}}>Products</Text> transparent={true}
<Text style={{flex: 2, height: 18, fontWeight: 'bold', fontFamily: 'Arial', color: this.props.app_theme?.theme.colors.text, textAlign: 'left', fontSize: 16}}>Qty</Text> visible={this.state.showModal}>
<Text style={{flex: 2, height: 18, fontWeight: 'bold', fontFamily: 'Arial', color: this.props.app_theme?.theme.colors.text, textAlign: 'left', fontSize: 16}}>Price</Text> <TouchableOpacity activeOpacity={1} onPress={() => {}} style={styles.centeredView}>
<Text style={{flex: 2, height: 18, fontWeight: 'bold', fontFamily: 'Arial', color: this.props.app_theme?.theme.colors.text, textAlign: 'left', fontSize: 16}}>Total</Text> <View style={[styles.modalView, { backgroundColor: this.props.app_theme?.theme.colors.border }]}>
{this.state.selectedPoints == null && this.state.selectedPaymentCard == null ?
<>
<Image source={Assets.icons.points_balance} style={{ width: 85, height: 85, resizeMode: 'contain' }} />
<Text style={{ fontSize: 18, color: this.props.app_theme?.theme.colors.text, marginVertical: 30 }}>{'Please select payment method...'}</Text>
<TouchableOpacity onPress={() => this.setState({ showModal: false })} style={{ width: 80, height: 30, backgroundColor: Theme.colors.primary, alignItems: 'center', justifyContent: 'center', borderRadius: 5 }}>
<Text style={{ fontSize: 18, color: Theme.colors.white, textAlign: 'center' }}>Ok</Text>
</TouchableOpacity>
</> :
<View style={{ alignItems: 'center', justifyContent: 'center' }}>
{
this.state.data && this.state.data.length > 0 &&
<Text style={{ fontSize: 18, color: this.props.app_theme?.theme.colors.text, marginVertical: 30, textAlign: 'center' }}>{`Are you sure you want to pay ${"\u20B1"}${Theme.formatter.CRNCY(this.state.data[0]?.originalAmount.amount || 0.0)}?`}</Text>
}
<View style={{ justifyContent: 'center', alignItems: 'center', flexDirection: 'row' }}>
<TouchableOpacity
style={{ flex: 1, height: 30, backgroundColor: Theme.colors.primary, alignItems: 'center', justifyContent: 'center', borderRadius: 5, marginRight: 10, marginLeft: 20 }}
onPress={() => {
this.setState({ showModal: false })
}}>
<Text style={{ fontSize: 18, color: Theme.colors.white, textAlign: 'center' }}>No</Text>
</TouchableOpacity>
<TouchableOpacity
style={{ flex: 1, height: 30, backgroundColor: Theme.colors.white, alignItems: 'center', borderColor: Theme.colors.primary, borderWidth: 1, justifyContent: 'center', borderRadius: 5, marginLeft: 10, marginRight: 20 }}
onPress={() => this.submitPayment()}>
<Text style={{ fontSize: 18, color: Theme.colors.primary, textAlign: 'center' }}>Yes</Text>
</TouchableOpacity>
</View>
</View>
}
</View>
</TouchableOpacity>
</Modal>
)
}
transactionTable = () => {
const renderItem = () => {
return this.state.data?.map((item, index) => {
return (
<View key={index} style={{flex: 1, flexDirection: 'row', paddingLeft: 15, paddingRight: 15, paddingTop: 10, paddingBottom: 15, alignItems: 'center'}}>
<Text style={{flex: 4, fontFamily: 'Arial', textAlign: 'left', fontSize: 13, color: this.props.app_theme?.theme.colors.text}}>{item.description}</Text>
<Text style={{flex: 3, fontFamily: 'Arial', fontWeight: 'bold', textAlign: 'center', fontSize: 13, color: this.props.app_theme?.theme.colors.text}}>{`${item.quantity} ${item.unitMeasure}`}</Text>
<Text style={{flex: 3, fontFamily: 'Arial', fontWeight: 'bold', textAlign: 'center', fontSize: 13, color: this.props.app_theme?.theme.colors.text}}>{"\u20B1"}{Theme.formatter.CRNCY(item.originalAmount.unitPrice)}</Text>
<Text style={{flex: 3, fontFamily: 'Arial', fontWeight: 'bold', textAlign: 'right', fontSize: 13, color: this.props.app_theme?.theme.colors.text}}>{"\u20B1"}{Theme.formatter.CRNCY(item.originalAmount.amount)}</Text>
</View>
)
})
}
return (
<View style={{width: '100%'}}>
<Divider />
<View style={{flex: 1, flexDirection: 'row', padding: 15, marginTop: 8, alignItems: 'center'}}>
<Text style={{flex: 4, height: 18, fontWeight: 'bold', fontFamily: 'Arial', color: this.props.app_theme?.theme.colors.text, textAlign: 'left', fontSize: 14}}>Product</Text>
<Text style={{flex: 3, height: 18, fontWeight: 'bold', fontFamily: 'Arial', color: this.props.app_theme?.theme.colors.text, textAlign: 'center', fontSize: 14}}>Qty</Text>
<Text style={{flex: 3, height: 18, fontWeight: 'bold', fontFamily: 'Arial', color: this.props.app_theme?.theme.colors.text, textAlign: 'center', fontSize: 14}}>Price</Text>
<Text style={{flex: 3, height: 18, fontWeight: 'bold', fontFamily: 'Arial', color: this.props.app_theme?.theme.colors.text, textAlign: 'right', fontSize: 14}}>Total</Text>
</View>
<Divider />
<ScrollView style={{ width: '100%', height: 150}}>
{renderItem()}
<View style={{padding: 10}}></View>
</ScrollView>
</View> </View>
<Divider /> )
<ScrollView style={{ width: '100%', height: 250}}> }
{renderItem()}
<View style={{padding: 10}}></View>
</ScrollView>
<Divider />
</View>
)
}
onBackConfirmation = () => { onBackConfirmation = () => {
Alert.alert( Alert.alert(
'', '',
'Do you want to cancel this transaction?', 'Do you want to cancel this transaction?',
[ [
{ {
text: 'Cancel', text: 'Cancel',
style: 'cancel', style: 'cancel',
}, },
{ {
text: 'OK', text: 'OK',
onPress: () => this.props.navigation.goBack(), onPress: () => this.props.navigation.goBack(),
}, },
], ],
{cancelable: true}, {cancelable: true},
); );
} }
render() { renderSelectedCard = () => {
return ( return (
<SafeAreaView style={{flex: 1}}> <View style={{flexDirection: 'row', paddingHorizontal: 30}}>
<CustomHeader <View style={{flex: 1, alignItems: 'center', flexDirection: 'row', borderRightWidth: 1, borderColor: "rgba(0,0,0,.1)"}}>
title={`${this.state.storeName} Pump No. ${this.state.selectedPumpNumber}`} {
onBackPress={() => this.onBackConfirmation()} this.state.selectedPaymentCard ?
back={true} <>
menu={false} <Image source={{uri: this.state.selectedPaymentCard.imageUrl}} style={{height: 40, width: 40, resizeMode: 'contain'}} />
navigation={this.props.navigation} <View style={{flex: 1, alignItems: 'center', paddingRight: 20}}>
/> <TouchableOpacity
<Elements.loaderView onPress={() => this.props.navigation.navigate('PayatpumpPaymentList', { onSelectedPaymentCard: (payment_card) => this.onSelectedPaymentCard(payment_card), storeId: this.props.route?.params.storeId})}
title="Validating" >
message="Please wait..." <Text style={{ color: Theme.colors.primary, fontSize: 14 }}>Change</Text>
isDarkMode={this.props.app_theme?.theme.dark} </TouchableOpacity>
backgroundColor={this.props.app_theme?.theme.colors.border} <Text style={{ color: this.props.app_theme?.theme.colors.text, fontSize: 14 }}>{this.state.selectedPaymentCard.lastFour}</Text>
color={this.props.app_theme?.theme.colors.text} </View>
visible={this.state.loading} /> </>
<View style={{flex: 1}}> :
<View style={{flexDirection: 'row', padding: 13, backgroundColor: Theme.colors.darkerGray}}> <View style={{flex: 1, justifyContent: 'center'}}>
<TouchableOpacity
onPress={() => this.props.navigation.navigate('PayatpumpPaymentList', { onSelectedPaymentCard: (payment_card) => this.onSelectedPaymentCard(payment_card), storeId: this.props.route?.params.storeId})}
>
<Text style={{ color: Theme.colors.primary, fontSize: 14}}>Add Card</Text>
</TouchableOpacity>
</View>
}
</View>
<View style={{flex: 1, justifyContent: 'center', alignItems: 'flex-end', paddingVertical: 25}}>
<Text style={{color: this.props.app_theme?.theme.colors.text, fontWeight: '700'}}>{"\u20B1"} {Theme.formatter.CRNCY(this.state.data[0]?.originalAmount.amount || 0.0)}</Text>
</View>
</View>
)
}
render() {
return (
<CustomSafeArea>
<CustomHeader
customTitle={
<>
<Text style={{fontWeight: 'bold'}}>{this.state.storeName}</Text>
<Text>{'\n'}Pump No. ${this.state.selectedPumpNumber}</Text>
</>
}
height={75}
onBackPress={() => this.onBackConfirmation()}
back={true}
customTitleStyle={{fontWeight: 'bold'}}
customLeftContainerStyle={{justifyContent: 'flex-start'}}
menu={false}
navigation={this.props.navigation}
/>
<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} />
<View style={{flex: 1}}>
<View style={{flexDirection: 'row', padding: 13, backgroundColor: Theme.colors.darkerGray}}>
<View style={{flex: 1}}>
<Text style={{fontFamily: 'Arial', fontSize: 14, color: '#fff'}}>Transaction Date</Text>
</View>
<View style={{flex: 1, textAlign: 'right', alignItems: 'flex-end'}}>
<Text style={{fontFamily: 'Arial', fontSize: 14, color: '#fff'}}>{moment(new Date()).format('DD MMM YYYY hh:mm A')}</Text>
</View>
</View>
{this.renderModal()}
{this.transactionTable()}
<View style={{ padding: 10 }}>
<Text style={{ fontSize: 15, color: "gray", fontWeight: '700' }}>Payment Method</Text>
</View>
<View style={{flex: 1}}> <View style={{flex: 1}}>
<Text style={{fontFamily: 'Arial', fontSize: 16, color: '#fff'}}>Transaction Date</Text> <Divider />
</View>
<View style={{flex: 1, textAlign: 'right', alignItems: 'flex-end'}}> <View style={{flexDirection: 'row', justifyContent: 'space-between', paddingHorizontal: 30, paddingVertical: 15}}>
<Text style={{fontFamily: 'Arial', fontSize: 16, color: '#fff'}}>{moment(new Date()).format('DD MMM YYYY hh:mm A')}</Text> <Text style={{fontWeight: 'bold', fontSize: 15, color: "gray" }}>Total</Text>
</View> <Text style={{fontWeight: 'bold', fontSize: 15, color: this.props.app_theme?.theme.colors.text }}>{"\u20B1"} {Theme.formatter.CRNCY(this.state.data[0]?.originalAmount.amount || 0.0)}</Text>
</View>
{this.renderModal()}
{this.transactionTable()}
<View style={{ flex: 1, padding: 10, justifyContent: 'center' }}>
<Text style={{ fontSize: 18, color: this.props.app_theme?.theme.colors.text }}>Payment Method</Text>
</View>
<View style={{ flex: 4, flexDirection: 'row' }}>
<View style={{ flex: 1 }}>
<View style={{
flex: 1,
borderTopColor: this.props.app_theme?.theme.colors.text,
borderTopWidth: 1,
borderRightColor: this.props.app_theme?.theme.colors.text,
borderRightWidth: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center'
}}>
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', borderRightWidth: 1, borderRightColor: this.props.app_theme?.theme.colors.text }}>
<TouchableOpacity style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}
onPress={() => this.props.navigation.navigate('PayatpumpPaymentList', { onSelectedPaymentCard: (payment_card) => this.onSelectedPaymentCard(payment_card), storeId: this.props.route?.params.storeId})}>
{this.state.selectedPaymentCard ? (
<View style={{ flexDirection: 'row' }}>
<Image source={this.state.selectedPaymentCard ? { uri: this.state.selectedPaymentCard.imageUrl } : Assets.icons.stpunlabeled} style={{ marginHorizontal: 8, width: this.state.selectedPaymentCard ? 40 : 30, height: this.state.selectedPaymentCard ? 40 : 30, resizeMode: 'contain' }} />
<View style={{ justifyContent: 'center', alignItems: 'center' }}>
<Text style={{ color: Theme.colors.primary, fontSize: 20 }}>Change</Text>
<Text style={{ color: this.props.app_theme?.theme.colors.text, fontSize: 20 }}>{this.state.selectedPaymentCard.lastFour}</Text>
</View>
</View>
) : (
<View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
<Image source={this.state.selectedPaymentCard ? { uri: this.state.selectedPaymentCard.imageUrl } : Assets.icons.stpunlabeled} style={{ marginHorizontal: 8, width: 30, height: 30, resizeMode: 'contain' }} />
<Text style={{ color: Theme.colors.primary, fontSize: 20 }}>Add Card</Text>
</View>
)}
</TouchableOpacity>
</View>
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text style={{ color: this.props.app_theme?.theme.colors.text, fontSize: 20, fontWeight: 'bold' }}>{"\u20B1"}{Theme.formatter.CRNCY(this.state.selectedPaymentCard != null && this.state.data[0]?.originalAmount.amount != undefined ? this.state.data[0]?.originalAmount.amount : 0.0)}</Text>
</View>
</View> </View>
<View style={{
flex: 1, <Divider />
borderTopColor: this.props.app_theme?.theme.colors.text,
borderTopWidth: 1, {this.renderSelectedCard()}
borderBottomColor: this.props.app_theme?.theme.colors.text,
borderBottomWidth: 1, <Divider />
borderRightColor: this.props.app_theme?.theme.colors.text,
borderRightWidth: 1, <View style={{flex: 1, justifyContent: 'flex-end'}}>
flexDirection: 'row', <View style={{ alignItems: 'center', justifyContent: 'center', marginBottom: 15 }}>
justifyContent: 'center', <Text style={{ color: "gray", fontSize: 15, fontWeight: 'bold' }}>Review the details before proceeding.</Text>
alignItems: 'center'
}}>
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text style={{ color: this.props.app_theme?.theme.colors.text, fontSize: 20, fontWeight: 'bold' }}>Total Amount</Text>
</View> </View>
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text style={{ color: this.props.app_theme?.theme.colors.text, fontSize: 20, fontWeight: 'bold' }}>{"\u20B1"}{Theme.formatter.CRNCY(this.state.data[0]?.originalAmount.amount || 0.0)}</Text> <TouchableOpacity onPress={() => this.setState({ showModal: true })} style={{ height: 50, backgroundColor: Theme.colors.primary, alignItems: 'center', justifyContent: 'center', borderRadius: 10, marginHorizontal: 16 }}>
</View> <Text style={{ color: Theme.colors.white, fontSize: 23 }}>Pay {"\u20B1"} {Theme.formatter.CRNCY(this.state.data[0]?.originalAmount.amount || 0.0)}</Text>
</View>
</View>
</View>
{/* <View style={{ flex: 4, flexDirection: 'row' }}>
<View style={{ flex: 1 }}>
<View style={{
flex: 1,
borderTopColor: this.props.app_theme?.theme.colors.text,
borderTopWidth: 1,
borderRightColor: this.props.app_theme?.theme.colors.text,
borderRightWidth: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center'
}}>
<Image source={Assets.icons.philippine_pesos} style={{ flex: 1, width: 50, height: 50, resizeMode: 'contain' }} />
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', marginRight: 20 }}>
<Text style={{ color: this.props.app_theme?.theme.colors.text, fontSize: 15 }}>Points Balance</Text>
<Text style={{ color: this.props.app_theme?.theme.colors.text, fontSize: 15, fontWeight: 'bold' }}>3,500.00</Text>
</View>
</View>
<View style={{
flex: 1,
borderTopColor: this.props.app_theme?.theme.colors.text,
borderTopWidth: 1,
borderBottomColor: this.props.app_theme?.theme.colors.text,
borderBottomWidth: 1,
borderRightColor: this.props.app_theme?.theme.colors.text,
borderRightWidth: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center'
}}>
<Image source={Assets.icons.stpunlabeled} style={{ flex: 1, width: 30, height: 30, resizeMode: 'contain' }} />
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', marginRight: 20 }}>
<TouchableOpacity style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}
onPress={() => this.props.navigation.navigate('PayatpumpPaymentList', { onSelectedPaymentCard: (payment_card) => this.onSelectedPaymentCard(payment_card), storeId: this.props.route?.params.data.storeTenantId})}>
{this.state.selectedPaymentCard ? (
<>
<Text style={{ color: Theme.colors.primary, fontSize: 20 }}>Change</Text>
<Text style={{ color: Theme.colors.black, fontSize: 20 }}>{this.state.selectedPaymentCard.cardMasked}</Text>
</>
) : (
<>
<Text style={{ color: Theme.colors.primary, fontSize: 20 }}>Add Card</Text>
</>
)}
</TouchableOpacity>
</View>
</View>
</View>
<View style={{ flex: 1 }}>
<View style={{
flex: 1,
borderTopColor: this.props.app_theme?.theme.colors.text,
borderTopWidth: 1,
alignItems: 'center',
justifyContent: 'center'
}}>
<TouchableOpacity style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}
onPress={() => this.props.navigation.navigate('PayatpumpPointsDetailsInput', { totalPointsBalance: 5000, onSelectedPointsAmount: (point_amount) => this.onSelectedPointsAmount(point_amount) })}>
<Text style={{ color: Theme.colors.primary, fontSize: 18 }}>{this.state.selectedPoints && "\u20B1"}{`${this.state.selectedPoints ? Theme.formatter.CRNCY(this.state.selectedPoints) : "Enter point to redeem"}`}</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
<View style={{
flex: 1,
borderTopColor: this.props.app_theme?.theme.colors.text,
borderTopWidth: 1,
borderBottomColor: this.props.app_theme?.theme.colors.text,
borderBottomWidth: 1,
alignItems: 'center',
justifyContent: 'center'
}}>
<Text style={{ color: this.props.app_theme?.theme.colors.text, fontSize: 18 }}>{"\u20B1"}0.00</Text>
</View>
</View> </View>
</View> */}
<View style={{ flex: 2, alignItems: 'center', justifyContent: 'center' }}>
<Text style={{ color: this.props.app_theme?.theme.colors.text, fontSize: 15, fontWeight: 'bold' }}>Review the details before proceeding.</Text>
</View> </View>
<View style={{ flex: 1.5, alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}> </CustomSafeArea>
<TouchableOpacity onPress={() => this.setState({ showModal: true })} style={{ flex: 1, paddingHorizontal: 120, height: 44, backgroundColor: Theme.colors.primary, alignItems: 'center', justifyContent: 'center', borderRadius: 10, marginHorizontal: 16 }}> );
<Text style={{ color: Theme.colors.white, fontSize: 23 }}>Pay {"\u20B1"}{Theme.formatter.CRNCY(this.state.data[0]?.originalAmount.amount || 0.0)}</Text> }
</TouchableOpacity>
</View>
</View>
</SafeAreaView>
);
}
} }
const mapStateToProps = (state) => { const mapStateToProps = (state) => {

9
app/screens/payatpump/stationdetails.js
View File

@ -33,7 +33,8 @@ export default function StationDetails(props){
await REQUEST_POST_PAY("getStoreDetails", "get", {}, { await REQUEST_POST_PAY("getStoreDetails", "get", {}, {
storeId: storeId storeId: storeId
}, {}, async (response) => { }, {}, async (response) => {
setloading(false) setloading(false);
console.log(response.response);
if(response.success){ if(response.success){
setstation(response.response) setstation(response.response)
} }
@ -68,18 +69,18 @@ export default function StationDetails(props){
onMapReady={() => {}} onMapReady={() => {}}
pinSelected={true}/> pinSelected={true}/>
</View> </View>
{/* <PanelFragment <PanelFragment
visible={false} visible={false}
data={station} data={station}
onload={setloading} onload={setloading}
stationId={props.route.params?.data.storeId} stationId={props.route.params?.data.storeId}
loading={false} loading={false}
error={null} error={null}
snapPoints={['5', '5', '5']} snapPoints={['0', '0', '0']}
onError={() => init()} onError={() => init()}
onTransaction={(response, storeId, selectedPump) => navigateToPayatpumpTransaction(response, storeId, selectedPump)} onTransaction={(response, storeId, selectedPump) => navigateToPayatpumpTransaction(response, storeId, selectedPump)}
lat={props.route.params?.location.latitude} lat={props.route.params?.location.latitude}
lon={props.route.params?.location.longitude}/> */} lon={props.route.params?.location.longitude}/>
</CustomSafeArea> </CustomSafeArea>
) )
} }

35
app/screens/payatpump/verificationWebview.js
View File

@ -1,10 +1,11 @@
import * as React from 'react'; import * as React from 'react';
import { SafeAreaView } from 'react-native'; import { Alert, SafeAreaView } from 'react-native';
import { connect } from "react-redux"; import { connect } from "react-redux";
import { WebView } from 'react-native-webview'; import { WebView } from 'react-native-webview';
import { Container } from 'native-base'; import { Container } from 'native-base';
import Elements from '../../components/elements' import Elements from '../../components/elements'
import Theme from '../../components/theme.style.js'; import Theme from '../../components/theme.style.js';
import CustomSafeArea from '../../components/safeArea.component';
class VerificationWebview extends React.Component { class VerificationWebview extends React.Component {
@ -27,19 +28,32 @@ class VerificationWebview extends React.Component {
} }
onStateChange = (webViewState) => { onStateChange = (webViewState) => {
let url = webViewState.url let url = webViewState.url;
if(url.includes('www.paymaya.com') && !webViewState.loading) { // if(url.includes('www.paymaya.com') && !webViewState.loading) {
this.props.route.params?.onSuccessAuthentication(this.state.referenceNumber) // this.props.route.params?.onSuccessAuthentication(this.state.referenceNumber)
setTimeout(() => { // setTimeout(() => {
this.props.navigation.goBack() // this.props.navigation.goBack()
}, 500); // }, 500);
// };
console.log(url)
if(url.includes('https://unioil.com/success') && !webViewState.loading) {
this.props.route.params?.onSuccessAuthentication(this.state.referenceNumber)
setTimeout(() => {
return this.props.navigation.goBack();
}, 500);
}
if(url.includes('https://unioil.com/failure') && !webViewState.loading) {
Alert.alert("Error", "Error adding card");
return this.props.navigation.goBack();
} }
} }
render() { render() {
return ( return (
<Container> <CustomSafeArea>
<SafeAreaView style={{flex: 1, backgroundColor: Theme.colors.white}}>
<Elements.loaderView <Elements.loaderView
title="Validating" title="Validating"
message="Please wait..." message="Please wait..."
@ -58,8 +72,7 @@ class VerificationWebview extends React.Component {
}} }}
onNavigationStateChange={(webViewState) => this.onStateChange(webViewState)} onNavigationStateChange={(webViewState) => this.onStateChange(webViewState)}
/> />
</SafeAreaView> </CustomSafeArea>
</Container>
) )
} }
} }

8
ios/RNUnioilLoyaltyApp.xcodeproj/project.pbxproj
View File

@ -1063,7 +1063,7 @@
CODE_SIGN_ENTITLEMENTS = "RNUnioilLoyaltyApp/Unioil Loyalty App.entitlements"; CODE_SIGN_ENTITLEMENTS = "RNUnioilLoyaltyApp/Unioil Loyalty App.entitlements";
CODE_SIGN_IDENTITY = "Apple Development"; CODE_SIGN_IDENTITY = "Apple Development";
CODE_SIGN_STYLE = Automatic; CODE_SIGN_STYLE = Automatic;
CURRENT_PROJECT_VERSION = 8; CURRENT_PROJECT_VERSION = 0;
DEVELOPMENT_TEAM = J29MB7XX75; DEVELOPMENT_TEAM = J29MB7XX75;
ENABLE_BITCODE = NO; ENABLE_BITCODE = NO;
FRAMEWORK_SEARCH_PATHS = ( FRAMEWORK_SEARCH_PATHS = (
@ -1211,7 +1211,7 @@
"\"${PODS_ROOT}/CocoaLibEvent/lib\"", "\"${PODS_ROOT}/CocoaLibEvent/lib\"",
"\"${PODS_ROOT}/OpenSSL-Universal/ios/lib\"", "\"${PODS_ROOT}/OpenSSL-Universal/ios/lib\"",
); );
MARKETING_VERSION = 1.6.5; MARKETING_VERSION = 1.7.0;
ONLY_ACTIVE_ARCH = YES; ONLY_ACTIVE_ARCH = YES;
OTHER_LDFLAGS = ( OTHER_LDFLAGS = (
"$(inherited)", "$(inherited)",
@ -1238,7 +1238,7 @@
CODE_SIGN_ENTITLEMENTS = "RNUnioilLoyaltyApp/Unioil Loyalty App.entitlements"; CODE_SIGN_ENTITLEMENTS = "RNUnioilLoyaltyApp/Unioil Loyalty App.entitlements";
CODE_SIGN_IDENTITY = "Apple Development"; CODE_SIGN_IDENTITY = "Apple Development";
CODE_SIGN_STYLE = Automatic; CODE_SIGN_STYLE = Automatic;
CURRENT_PROJECT_VERSION = 8; CURRENT_PROJECT_VERSION = 0;
DEVELOPMENT_TEAM = J29MB7XX75; DEVELOPMENT_TEAM = J29MB7XX75;
FRAMEWORK_SEARCH_PATHS = ( FRAMEWORK_SEARCH_PATHS = (
"$(inherited)", "$(inherited)",
@ -1309,7 +1309,7 @@
"\"${PODS_ROOT}/CocoaLibEvent/lib\"", "\"${PODS_ROOT}/CocoaLibEvent/lib\"",
"\"${PODS_ROOT}/OpenSSL-Universal/ios/lib\"", "\"${PODS_ROOT}/OpenSSL-Universal/ios/lib\"",
); );
MARKETING_VERSION = 1.6.5; MARKETING_VERSION = 1.7.0;
ONLY_ACTIVE_ARCH = NO; ONLY_ACTIVE_ARCH = NO;
OTHER_LDFLAGS = ( OTHER_LDFLAGS = (
"$(inherited)", "$(inherited)",

BIN
ios/RNUnioilLoyaltyApp.xcworkspace/xcuserdata/macbookpro2017.xcuserdatad/UserInterfaceState.xcuserstate generated
View File

Binary file not shown.