Checkpoint commit. Updates for pump and go.
This commit is contained in:
Harley Catubag
parent
3d96452c34
commit
90391f7515
|
|
@ -1,17 +1,17 @@
|
|||
// const api_url = "https://mobileapid.unioil.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://stag-mobapi.unioilapps.com/api/mobile/"; // staging
|
||||
export const api_url = "https://mobilerest.unioilapps.com/api/mobile/"; // prod
|
||||
export const api_url = "https://stag-mobapi.unioilapps.com/api/mobile/"; // staging
|
||||
// export const api_url = "https://mobilerest.unioilapps.com/api/mobile/"; // prod
|
||||
// const api_url = "https://unioilapi.taxikel.com/api/mobile/"
|
||||
|
||||
// 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 fcm_register = "https://stag-notifapi.unioilapps.com/api/fcmtoken"; //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 fcm_register = "https://stag-notifapi.unioilapps.com/api/fcmtoken"; //staging
|
||||
|
||||
const notifications = "https://notification.unioilapps.com/api/notification/mobile/all"; //prod
|
||||
const account_fcm = "https://notification.unioilapps.com/api/fcmtoken/notifs"; //prod
|
||||
const fcm_register = "https://notification.unioilapps.com/api/fcmtoken"; //prod
|
||||
// const notifications = "https://notification.unioilapps.com/api/notification/mobile/all"; //prod
|
||||
// const account_fcm = "https://notification.unioilapps.com/api/fcmtoken/notifs"; //prod
|
||||
// const fcm_register = "https://notification.unioilapps.com/api/fcmtoken"; //prod
|
||||
|
||||
// const notifications = "https://unioil-notif-api.herokuapp.com/api/notification/mobile/all";
|
||||
// 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 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 post_pay = "https://partnerapi-int.petrozone.com/v5/";
|
||||
const card_validation = api_url + "loginCardNumber";
|
||||
const card_validation_enroll = api_url + "loginCardNumberEnroll";
|
||||
const login = api_url + "loginBirthdate";
|
||||
|
|
|
|||
|
|
@ -118,11 +118,11 @@ class CustomHeader extends React.Component {
|
|||
return (
|
||||
<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:1, justifyContent: 'center'}}>
|
||||
<View style={[{flex:1, justifyContent: 'center'}, this.props.customLeftContainerStyle ]}>
|
||||
{this.renderButtonLeft()}
|
||||
</View>
|
||||
<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 style={{flex:1, justifyContent: 'center'}}>
|
||||
{this.props.rightMenu || null}
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@ const renderStationPanel = (props) => {
|
|||
<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>
|
||||
<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}}>
|
||||
{station.contact_numbers.map((num, i) => {
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -86,7 +86,7 @@ export default function App(navigation) {
|
|||
<Tab.Navigator initialRouteName="Home" backBehavior="initialRoute" screenOptions={screenOptions} tabBarOptions={tabBarOptions} >
|
||||
<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="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="Rewards" component={RewardsScreen} options={{ tabBarLabel: 'Rewards', headerShown: false }} />
|
||||
</Tab.Navigator>
|
||||
|
|
|
|||
|
|
@ -118,7 +118,7 @@ const PayatpumpStationDetails = (props) => {
|
|||
.map(([key, value]) => `${value}`)
|
||||
|
||||
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: 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>
|
||||
|
|
@ -147,15 +147,16 @@ const PayatpumpStationDetails = (props) => {
|
|||
console.error('An error occurred', err)
|
||||
})
|
||||
}}>
|
||||
<Text style={{color: "darkblue"}}>{station.phone}</Text>
|
||||
<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', paddingTop: 7}}>
|
||||
<View style={{flexDirection: 'row', paddingBottom: 10}}>
|
||||
{stars}
|
||||
</View>
|
||||
</View>
|
||||
<View style={{justifyContent: 'flex-end'}}>
|
||||
<TouchableOpacity
|
||||
onPress={() => {
|
||||
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 }}>
|
||||
<Text style={{ color: Theme.colors.white }}>Pay at Pump</Text>
|
||||
<Text style={{ color: Theme.colors.white, fontSize: 12 }}>PUMP AND GO</Text>
|
||||
</TouchableOpacity>
|
||||
</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}}>₱ {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()}
|
||||
</TouchableOpacity>
|
||||
)
|
||||
|
|
@ -227,7 +197,6 @@ const PayatpumpStationDetails = (props) => {
|
|||
REQUEST_POST_PAY('postClaim', 'post', {
|
||||
token: USER_PROFILE.data.auth_p97
|
||||
}, {}, params, async (res) => {
|
||||
console.log(res)
|
||||
if(res.success == undefined) {
|
||||
resetFlags()
|
||||
setTimeout(() => {
|
||||
|
|
@ -236,6 +205,11 @@ const PayatpumpStationDetails = (props) => {
|
|||
} else {
|
||||
if(res.success) {
|
||||
resetFlags()
|
||||
|
||||
if(!res.response.saleItems) {
|
||||
return Alert.alert('Error', "No transaction Available");
|
||||
}
|
||||
|
||||
props.onTransaction(res.response, store.storeId, selectedPump)
|
||||
} else {
|
||||
resetFlags()
|
||||
|
|
@ -363,6 +337,7 @@ const PayatpumpStationDetails = (props) => {
|
|||
return (
|
||||
<TouchableOpacity disabled={!available} onPress={() => {
|
||||
setInitiateProceed(true)
|
||||
console.log(item);
|
||||
setSelectedPump(item)
|
||||
}} key={index} style={{ alignItems: 'center', justifyContent: 'center', margin: 20 }}>
|
||||
{(currentSelectedPump != null && currentSelectedPump.pumpNumber == item.pumpNumber) ? (
|
||||
|
|
@ -402,7 +377,7 @@ const PayatpumpStationDetails = (props) => {
|
|||
return (
|
||||
<View style={{flex: 1}}>
|
||||
<BottomSheet
|
||||
snapPoints={snapPoint()}
|
||||
snapPoints={['25', '25', '25']}
|
||||
renderContent={() => {
|
||||
return props.data == null ? null : renderStationDetails(props.data, props.onClick)
|
||||
}}
|
||||
|
|
@ -418,7 +393,7 @@ const PayatpumpStationDetails = (props) => {
|
|||
{props.data.storeName}
|
||||
</Text>
|
||||
<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}}>
|
||||
{(props.data && props.data.address != undefined && props.data.address != "") ?
|
||||
<NavigationApps
|
||||
|
|
@ -427,7 +402,7 @@ const PayatpumpStationDetails = (props) => {
|
|||
modalVisible={true}
|
||||
viewMode="sheet"
|
||||
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"
|
||||
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
|
||||
|
|
@ -436,7 +411,7 @@ const PayatpumpStationDetails = (props) => {
|
|||
: null}
|
||||
</View>
|
||||
<Text style={{color: Theme.colors.primary}}>Directions</Text>
|
||||
</TouchableOpacity>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
|
|
|||
|
|
@ -96,6 +96,7 @@ class Payatpump extends React.Component {
|
|||
fetch = async (location, successCallback, errorCallback) => {
|
||||
if(!location) return false
|
||||
this.setState({ loading: true })
|
||||
console.log(this.state.mylocation);
|
||||
|
||||
REQUEST_POST_PAY('getStores', 'get', {}, {
|
||||
latitude: 14.580, //location.latitude, //uncomment this and replace the current value with this object
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ import Theme from '../../components/theme.style.js';
|
|||
import Assets from '../../components/assets.manager.js';
|
||||
import Elements from '../../components/elements.js';
|
||||
import DB from '../../components/storage/';
|
||||
import CustomSafeArea from '../../components/safeArea.component';
|
||||
|
||||
|
||||
class PayatpumpPaymentList extends React.Component {
|
||||
|
|
@ -39,11 +40,7 @@ class PayatpumpPaymentList extends React.Component {
|
|||
this.getFunding()
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
|
||||
}
|
||||
|
||||
getFunding = async (defaultCard = null, enableDefaultCard = false) => {
|
||||
getFunding = async (defaultCard = null, enableDefaultCard = false, setDefault = false) => {
|
||||
this.setState({ loading: true })
|
||||
const USER_PROFILE = await DB.profile()
|
||||
REQUEST_POST_PAY('getFunding', 'post', {
|
||||
|
|
@ -56,6 +53,8 @@ class PayatpumpPaymentList extends React.Component {
|
|||
}, 300)
|
||||
} else {
|
||||
if(res.success) {
|
||||
let savedCard = await DB.get("pumpPaymentCards");
|
||||
let selectedCard = JSON.parse(savedCard);
|
||||
let wallets = res.response.wallets.map(item => {
|
||||
let wallet = item.wallets.map(walletItem => {
|
||||
let fundingProviderName = item.fundingProviderName
|
||||
|
|
@ -64,12 +63,27 @@ class PayatpumpPaymentList extends React.Component {
|
|||
return wallet
|
||||
})
|
||||
var mergedWallets = [].concat.apply([], wallets)
|
||||
let defaultIndex = -1
|
||||
let defaultIndex = -1;
|
||||
let selectedDefaultCard = null
|
||||
if(enableDefaultCard) {
|
||||
defaultIndex = mergedWallets.findIndex(item => item.userPaymentSourceId === defaultCard.userPaymentSourceId)
|
||||
selectedDefaultCard = mergedWallets[defaultIndex]
|
||||
defaultIndex = mergedWallets.findIndex(item => item.userPaymentSourceId === defaultCard.userPaymentSourceId);
|
||||
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 })
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
|
|
@ -100,13 +114,39 @@ class PayatpumpPaymentList extends React.Component {
|
|||
}, 300)
|
||||
} else {
|
||||
if(res.success) {
|
||||
let defaultCardIndex = -1;
|
||||
let defaultSelectedCard = null;
|
||||
let wallets = this.state.cards.filter(item => {
|
||||
return item.userPaymentSourceId != this.state.deleteCard.userPaymentSourceId
|
||||
})
|
||||
.map(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 {
|
||||
setTimeout(() => {
|
||||
Alert.alert('Error', 'Failed to get fund. Try again.')
|
||||
|
|
@ -121,17 +161,27 @@ class PayatpumpPaymentList extends React.Component {
|
|||
})
|
||||
}
|
||||
|
||||
submitPaymentCard = async () => {
|
||||
if(this.state.defaultSelectedCard == null) {
|
||||
submitPaymentCard = async (defaultSelectedCard) => {
|
||||
if(defaultSelectedCard == null) {
|
||||
this.setState({ showModal: true })
|
||||
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) => {
|
||||
this.getFunding(response, enableDefaultCard)
|
||||
onAddNewCard = (response, enableDefaultCard, setDefault) => {
|
||||
this.getFunding(response, enableDefaultCard, setDefault)
|
||||
}
|
||||
|
||||
renderDeleteErrorModal = () => {
|
||||
|
|
@ -176,18 +226,33 @@ class PayatpumpPaymentList extends React.Component {
|
|||
data={this.state.cards}
|
||||
scrollEnabled={true}
|
||||
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}) => {
|
||||
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 }}>
|
||||
<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 }}>
|
||||
<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 });
|
||||
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' }}>
|
||||
<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 style={{ flex: 0.2, alignItems: 'center', flexDirection: 'row', justifyContent: 'flex-end' }}>
|
||||
{this.state.defaultCardIndex == index && <Icon.AntDesign name={"checkcircle"} size={18} color={'green'} />}
|
||||
<View style={{ borderRadius: 100, alignItems: 'center', backgroundColor: 'white', flexDirection: 'row', justifyContent: 'flex-end' }}>
|
||||
<TouchableOpacity onPress={() => this.setState({ deleteCard: item, showModal: true })}
|
||||
style={{ paddingVertical: 10 }}>
|
||||
style={{ paddingVertical: 5 }}>
|
||||
<Icon.EvilIcons name={"trash"} size={40} color={Theme.colors.primaryDark} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
|
@ -202,7 +267,7 @@ class PayatpumpPaymentList extends React.Component {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<SafeAreaView style={{ flex: 1 }}>
|
||||
<CustomSafeArea>
|
||||
<CustomHeader
|
||||
title={'Payment List'}
|
||||
onBackPress={() => this.props.navigation.goBack()}
|
||||
|
|
@ -218,50 +283,32 @@ class PayatpumpPaymentList extends React.Component {
|
|||
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: 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.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>
|
||||
{!this.state.isShowSelectionCard && (
|
||||
<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>
|
||||
</CustomSafeArea>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
import * as React from 'react';
|
||||
import { connect } from "react-redux";
|
||||
import {
|
||||
SafeAreaView,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
Text,
|
||||
|
|
@ -22,6 +21,7 @@ import Elements from '../../components/elements.js';
|
|||
import Assets from '../../components/assets.manager.js';
|
||||
import Cipher from '../../components/cardencrypt/encryptcard';
|
||||
import DB from '../../components/storage/';
|
||||
import CustomSafeArea from '../../components/safeArea.component';
|
||||
|
||||
class PayatpumpPaymentMethodList extends React.Component {
|
||||
|
||||
|
|
@ -32,7 +32,6 @@ class PayatpumpPaymentMethodList extends React.Component {
|
|||
state = {
|
||||
cards: [],
|
||||
cardNumber: null,
|
||||
cardHolder: null,
|
||||
cardExpiry: null,
|
||||
cardCVV: null,
|
||||
focus_holder: null,
|
||||
|
|
@ -41,7 +40,8 @@ class PayatpumpPaymentMethodList extends React.Component {
|
|||
enableDefaultCard: false,
|
||||
showModal: false,
|
||||
pubkey: null,
|
||||
verificationUrl: null
|
||||
verificationUrl: null,
|
||||
setPrimary: false
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
|
|
@ -164,10 +164,6 @@ class PayatpumpPaymentMethodList extends React.Component {
|
|||
this.setState({ cardNumber: cardnumber });
|
||||
}
|
||||
|
||||
_handlingCardHolder = (name) => {
|
||||
this.setState({ cardHolder: name })
|
||||
}
|
||||
|
||||
_handlingCardExpiry = (number) => {
|
||||
if (number.indexOf('.') >= 0 || number.length > 5) return
|
||||
if (number.length === 2 && this.state.cardExpiry.length === 1) number += '/'
|
||||
|
|
@ -189,7 +185,6 @@ class PayatpumpPaymentMethodList extends React.Component {
|
|||
REQUEST_POST_PAY('addCreditCard', 'post', {
|
||||
token: USER_PROFILE.data.auth_p97
|
||||
}, {}, params, (res) => {
|
||||
console.log(res)
|
||||
if(res.success == undefined) {
|
||||
this.setState({ loading: false })
|
||||
setTimeout(() => {
|
||||
|
|
@ -198,10 +193,7 @@ class PayatpumpPaymentMethodList extends React.Component {
|
|||
} else {
|
||||
this.setState({ loading: false })
|
||||
if(res.success) {
|
||||
setTimeout(() => {
|
||||
this.props.route?.params.onAddNewCard({ userPaymentSourceId: res.response.userPaymentSourceId, referenceNumber: res.response.referenceNumber }, this.state.enableDefaultCard)
|
||||
this.props.navigation.goBack()
|
||||
}, 500);
|
||||
this.props.route?.params.onAddNewCard({ userPaymentSourceId: res.response.userPaymentSourceId, referenceNumber: res.response.referenceNumber }, this.state.enableDefaultCard, this.state.setPrimary)
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
Alert.alert('Error', res.Message)
|
||||
|
|
@ -217,25 +209,24 @@ class PayatpumpPaymentMethodList extends React.Component {
|
|||
}
|
||||
|
||||
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 })
|
||||
return
|
||||
}
|
||||
|
||||
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 cardHolder = this.state.cardHolder
|
||||
let cardExpiry = `${this.state.cardExpiry.split("/")[0]}${numberYear}${this.state.cardExpiry.split("/")[1]}`
|
||||
let cardCvv = this.state.cardCVV
|
||||
|
||||
if(cardValidator.number(cardnumber)?.card?.type != undefined && cardValidator.number(cardnumber)?.card?.type !== "visa") {
|
||||
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.`)
|
||||
if(cardValidator.number(cardnumber).card.type === "jcb") {
|
||||
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
|
||||
} 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) {
|
||||
|
|
@ -251,7 +242,7 @@ class PayatpumpPaymentMethodList extends React.Component {
|
|||
|
||||
let cardDetails = { pan: cardnumber, expDate: cardExpiry, cvv: cardCvv }
|
||||
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 })
|
||||
setTimeout(() => {
|
||||
this.props.navigation.navigate('VerificationWebview', {...onSuccess, onSuccessAuthentication:(referenceNumber) => this._onAuthenticationSuccess(referenceNumber)})
|
||||
|
|
@ -259,9 +250,6 @@ class PayatpumpPaymentMethodList extends React.Component {
|
|||
},
|
||||
error => {
|
||||
this.setState({ loading: false })
|
||||
setTimeout(() => {
|
||||
Alert.alert('Error', error)
|
||||
}, 300)
|
||||
})
|
||||
}
|
||||
|
||||
|
|
@ -325,81 +313,70 @@ class PayatpumpPaymentMethodList extends React.Component {
|
|||
|
||||
renderCardForm = () => {
|
||||
return (
|
||||
<>
|
||||
<View style={{ flex: 0.2, justifyContent: 'center' }}>
|
||||
<Text style={{ fontSize: 20, color: Theme.colors.primary, textAlign: 'center' }}>Enroll Your Payment Card</Text>
|
||||
<View style={{paddingHorizontal: 30, paddingTop: 40}}>
|
||||
<Text style={{paddingLeft: 10, color: this.props.app_theme?.theme.colors.text}}>Card Number</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 style={{ flex: 0.1 }} />
|
||||
<View style={{ flex: 0.3 }}>
|
||||
<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}>
|
||||
<View style={{flexDirection: 'row' }}>
|
||||
<View style={[styles.expirationCvvContainer, { flex: 1, marginLeft: 16, marginRight: 5 }]}>
|
||||
<TextInput
|
||||
keyboardType="numeric"
|
||||
returnKeyType={'done'}
|
||||
placeholder="This card will be used for pay at pump"
|
||||
placeholder="Expiration(MM/YY)"
|
||||
placeholderTextColor={Theme.colors.gray}
|
||||
value={this.state.cardNumber}
|
||||
value={this.state.cardExpiry}
|
||||
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, fontStyle: 'italic' }}
|
||||
onChangeText={(value) => this._handlingCardExpiry(value)}
|
||||
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 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}>
|
||||
<View style={[styles.expirationCvvContainer, { flex: 0.55, marginRight: 16, marginLeft: 5 }]}>
|
||||
<TextInput
|
||||
keyboardType="ascii-capable"
|
||||
keyboardType="numeric"
|
||||
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 })}
|
||||
onChangeText={(value) => this._handlingCardHolder(value)}
|
||||
style={{ flex: 1, color: this.props.app_theme?.theme.colors.text }}
|
||||
onChangeText={(value) => this._handlingCVV(value)}
|
||||
style={{ flex: 1, color: this.props.app_theme?.theme.colors.text, marginLeft: 3 }}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
<View style={{ flex: 0.3 }}>
|
||||
<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>
|
||||
<View style={{ flex: 0.3, flexDirection: 'row' }}>
|
||||
<View style={[styles.expirationCvvContainer, { flex: 1, marginLeft: 16, marginRight: 5 }]}>
|
||||
<TextInput
|
||||
keyboardType="numeric"
|
||||
returnKeyType={'done'}
|
||||
value={this.state.cardExpiry}
|
||||
onFocus={() => this.setState({ focus_expiry: true, focus_cvv: false })}
|
||||
onChangeText={(value) => this._handlingCardExpiry(value)}
|
||||
style={{ flex: 1, color: this.props.app_theme?.theme.colors.text, marginRight: 3 }}
|
||||
/>
|
||||
</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>
|
||||
</>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
renderSwitch = () => {
|
||||
return (
|
||||
<View style={{flexDirection: 'row', paddingHorizontal: 40, marginTop: 20, alignItems: 'center', justifyContent: 'space-between'}}>
|
||||
<Text style={{color: Theme.colors.gray}}>Set as primary card</Text>
|
||||
<Switch
|
||||
value={this.state.setPrimary}
|
||||
trackColor={{true: "#6887ed"}}
|
||||
thumbColor={this.state.setPrimary && "blue"}
|
||||
onChange={() => this.setState({ setPrimary: !this.state.setPrimary })}
|
||||
/>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<SafeAreaView style={{ flex: 1 }}>
|
||||
<CustomSafeArea>
|
||||
<CustomHeader
|
||||
title={"Add Card"}
|
||||
title={"Payment Method"}
|
||||
onBackPress={() => this.onBackConfirmation()}
|
||||
back={true}
|
||||
menu={false}
|
||||
|
|
@ -414,18 +391,19 @@ class PayatpumpPaymentMethodList extends React.Component {
|
|||
visible={this.state.loading} />
|
||||
{this.renderErrorModal()}
|
||||
{this.renderCardForm()}
|
||||
{this.renderSwitch()}
|
||||
{this.state.verificationUrl != null && this.renderWebview()}
|
||||
<View style={{ flex: 1 }} />
|
||||
<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={{ 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 }}>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 }}>Charge amount will be automatically refunded.</Text>
|
||||
<View style={{ marginBottom: 5 }} />
|
||||
<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>
|
||||
</TouchableOpacity>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
</CustomSafeArea>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -46,31 +46,24 @@ class PayatpumpPaymentSuccess extends React.Component {
|
|||
render() {
|
||||
return(
|
||||
<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 }}
|
||||
contentContainerStyle={{ height: "100%" }}
|
||||
contentOffset={{ x: 0, y: this.state.keyboardHeight }}
|
||||
keyboardDismissMode='on-drag'>
|
||||
<View style={{ flex: 0.2, 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>
|
||||
<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" + "\n" + "successful!" + "\n" + "Payment is credited to"}</Text>
|
||||
</View>
|
||||
<View style={{ flex: 0.2, justifyContent: 'center', alignItems: 'center' }}>
|
||||
<Text style={{ color: Theme.colors.primary, fontSize: 35, textAlign: 'center' }}>{`${this.state.data.storeName}`}</Text>
|
||||
<View style={{ justifyContent: 'center', alignItems: 'center', paddingHorizontal: 50, paddingTop: 20, paddingBottom: 20}}>
|
||||
<Text style={{ color: Theme.colors.primary, fontSize: 30, textAlign: 'center' }}>{`${this.state.data.storeName}`}</Text>
|
||||
</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: 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 }}>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 style={{ flex: 0.7, justifyContent: 'center', alignItems: 'flex-end', marginLeft: 16 }}>
|
||||
<Text style={{ color: Theme.colors.white, textAlign: 'left', fontSize: 16 }}>Sales Invoice No.</Text>
|
||||
<View style={{ flex: 0.7, justifyContent: 'center', marginLeft: 16 }}>
|
||||
<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>
|
||||
</View>
|
||||
</View>
|
||||
|
|
@ -93,7 +86,7 @@ class PayatpumpPaymentSuccess extends React.Component {
|
|||
</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>
|
||||
<TextInput
|
||||
keyboardType="email-address"
|
||||
|
|
@ -104,7 +97,7 @@ class PayatpumpPaymentSuccess extends React.Component {
|
|||
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 }}
|
||||
/>
|
||||
</View>
|
||||
</View> */}
|
||||
</ScrollView>
|
||||
<View>
|
||||
<TouchableOpacity onPress={() => this.props.navigation.navigate('Main')}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,8 @@ import {
|
|||
ScrollView,
|
||||
Image,
|
||||
Modal,
|
||||
StyleSheet
|
||||
StyleSheet,
|
||||
ActivityIndicator
|
||||
} from 'react-native';
|
||||
import CustomHeader from '../../components/header.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 DB from '../../components/storage';
|
||||
import Elements from '../../components/elements';
|
||||
|
||||
import CustomSafeArea from '../../components/safeArea.component';
|
||||
|
||||
class PayatpumpStationTransactionDetails extends React.Component {
|
||||
|
||||
|
|
@ -43,363 +44,294 @@ class PayatpumpStationTransactionDetails extends React.Component {
|
|||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.init()
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
init = async () => {
|
||||
let session = await DB.session()
|
||||
let user_profile = await DB.profile()
|
||||
let selectedCard = await DB.get("pumpPaymentCards");
|
||||
this.setState({
|
||||
card_number: user_profile.data.card_number,
|
||||
session: session,
|
||||
claimId: this.props.route.params.response.claimId,
|
||||
data: this.props.route.params.response.saleItems,
|
||||
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) => {
|
||||
this.setState({ selectedPoints: point_amount })
|
||||
}
|
||||
|
||||
onSelectedPaymentCard = (payment_card) => {
|
||||
console.log(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
|
||||
onSelectedPaymentCard = (payment_card) => {
|
||||
console.log(payment_card);
|
||||
this.setState({ selectedPaymentCard: payment_card })
|
||||
}
|
||||
|
||||
let length = 8
|
||||
let partnerTransactionId = parseInt((Math.random() * 9 + 1) * Math.pow(10, length-1), 10)
|
||||
let params = {
|
||||
claimId: claimId,
|
||||
partnerTransactionId: partnerTransactionId,
|
||||
walletRequest: {
|
||||
fundingProviderName: fundingProviderName, //change this value later
|
||||
fundingPayload: {
|
||||
userPaymentSourceId: userPaymentSourceId //change this value later
|
||||
getTransactionDetails = async (claimId, fundingProviderName, userPaymentSourceId, onSuccess, onError) => {
|
||||
if(claimId == null) {
|
||||
Alert.alert("Error", "No transaction id exist.")
|
||||
return
|
||||
}
|
||||
},
|
||||
userPreference: {
|
||||
receiptPreference: "doNotPrintReceipt", //printReceipt, doNotPrintReceipt
|
||||
emailReceiptPreference: true
|
||||
},
|
||||
loyaltyPassthroughInformation: {
|
||||
loyaltyInfo: []
|
||||
},
|
||||
fraudContext: {}
|
||||
|
||||
let length = 8
|
||||
let partnerTransactionId = parseInt((Math.random() * 9 + 1) * Math.pow(10, length-1), 10)
|
||||
let params = {
|
||||
claimId: claimId,
|
||||
partnerTransactionId: partnerTransactionId,
|
||||
walletRequest: {
|
||||
fundingProviderName: fundingProviderName, //change this value later
|
||||
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()
|
||||
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)
|
||||
})
|
||||
}
|
||||
submitPayment = () => {
|
||||
this.setState({ showModal: false, loading: true })
|
||||
this.getTransactionDetails(this.state.claimId, "p97token", this.state.selectedPaymentCard.userPaymentSourceId, onSuccess => {
|
||||
this.setState({ loading: false })
|
||||
|
||||
submitPayment = () => {
|
||||
this.setState({ showModal: false, loading: true })
|
||||
this.getTransactionDetails(this.state.claimId, "p97token", this.state.selectedPaymentCard.userPaymentSourceId, onSuccess => {
|
||||
this.setState({ loading: false })
|
||||
if(onSuccess.success) {
|
||||
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.props.navigation.navigate('PayatpumpPaymentSuccess', { transactionData: payment })
|
||||
} else {
|
||||
if(onSuccess.success) {
|
||||
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.props.navigation.navigate('PayatpumpPaymentSuccess', { transactionData: payment })
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
Alert.alert('Error', "Failed to initiate transaction. Try again.")
|
||||
}, 300)
|
||||
}
|
||||
}, onError => {
|
||||
console.log("the success: " + JSON.stringify(onError));
|
||||
|
||||
this.setState({ loading: false })
|
||||
setTimeout(() => {
|
||||
Alert.alert('Error', "Failed to initiate transaction. Try again.")
|
||||
}, 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 (
|
||||
<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: 16}}>Products</Text>
|
||||
<Text style={{flex: 2, height: 18, fontWeight: 'bold', fontFamily: 'Arial', color: this.props.app_theme?.theme.colors.text, textAlign: 'left', fontSize: 16}}>Qty</Text>
|
||||
<Text style={{flex: 2, height: 18, fontWeight: 'bold', fontFamily: 'Arial', color: this.props.app_theme?.theme.colors.text, textAlign: 'left', fontSize: 16}}>Price</Text>
|
||||
<Text style={{flex: 2, height: 18, fontWeight: 'bold', fontFamily: 'Arial', color: this.props.app_theme?.theme.colors.text, textAlign: 'left', fontSize: 16}}>Total</Text>
|
||||
|
||||
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' }}>
|
||||
{
|
||||
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>
|
||||
<Divider />
|
||||
<ScrollView style={{ width: '100%', height: 250}}>
|
||||
{renderItem()}
|
||||
<View style={{padding: 10}}></View>
|
||||
</ScrollView>
|
||||
<Divider />
|
||||
</View>
|
||||
)
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
onBackConfirmation = () => {
|
||||
Alert.alert(
|
||||
'',
|
||||
'Do you want to cancel this transaction?',
|
||||
[
|
||||
{
|
||||
text: 'Cancel',
|
||||
style: 'cancel',
|
||||
},
|
||||
{
|
||||
text: 'OK',
|
||||
onPress: () => this.props.navigation.goBack(),
|
||||
},
|
||||
],
|
||||
{cancelable: true},
|
||||
);
|
||||
}
|
||||
onBackConfirmation = () => {
|
||||
Alert.alert(
|
||||
'',
|
||||
'Do you want to cancel this transaction?',
|
||||
[
|
||||
{
|
||||
text: 'Cancel',
|
||||
style: 'cancel',
|
||||
},
|
||||
{
|
||||
text: 'OK',
|
||||
onPress: () => this.props.navigation.goBack(),
|
||||
},
|
||||
],
|
||||
{cancelable: true},
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<SafeAreaView style={{flex: 1}}>
|
||||
<CustomHeader
|
||||
title={`${this.state.storeName} Pump No. ${this.state.selectedPumpNumber}`}
|
||||
onBackPress={() => this.onBackConfirmation()}
|
||||
back={true}
|
||||
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}}>
|
||||
renderSelectedCard = () => {
|
||||
return (
|
||||
<View style={{flexDirection: 'row', paddingHorizontal: 30}}>
|
||||
<View style={{flex: 1, alignItems: 'center', flexDirection: 'row', borderRightWidth: 1, borderColor: "rgba(0,0,0,.1)"}}>
|
||||
{
|
||||
this.state.selectedPaymentCard ?
|
||||
<>
|
||||
<Image source={{uri: this.state.selectedPaymentCard.imageUrl}} style={{height: 40, width: 40, resizeMode: 'contain'}} />
|
||||
<View style={{flex: 1, alignItems: 'center', paddingRight: 20}}>
|
||||
<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 }}>Change</Text>
|
||||
</TouchableOpacity>
|
||||
<Text style={{ color: this.props.app_theme?.theme.colors.text, fontSize: 14 }}>{this.state.selectedPaymentCard.lastFour}</Text>
|
||||
</View>
|
||||
</>
|
||||
:
|
||||
<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}}>
|
||||
<Text style={{fontFamily: 'Arial', fontSize: 16, color: '#fff'}}>Transaction Date</Text>
|
||||
</View>
|
||||
<View style={{flex: 1, textAlign: 'right', alignItems: 'flex-end'}}>
|
||||
<Text style={{fontFamily: 'Arial', fontSize: 16, color: '#fff'}}>{moment(new Date()).format('DD MMM YYYY hh:mm A')}</Text>
|
||||
</View>
|
||||
</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>
|
||||
<Divider />
|
||||
|
||||
<View style={{flexDirection: 'row', justifyContent: 'space-between', paddingHorizontal: 30, paddingVertical: 15}}>
|
||||
<Text style={{fontWeight: 'bold', fontSize: 15, color: "gray" }}>Total</Text>
|
||||
<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>
|
||||
<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'
|
||||
}}>
|
||||
<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>
|
||||
|
||||
<Divider />
|
||||
|
||||
{this.renderSelectedCard()}
|
||||
|
||||
<Divider />
|
||||
|
||||
<View style={{flex: 1, justifyContent: 'flex-end'}}>
|
||||
<View style={{ alignItems: 'center', justifyContent: 'center', marginBottom: 15 }}>
|
||||
<Text style={{ color: "gray", fontSize: 15, fontWeight: 'bold' }}>Review the details before proceeding.</Text>
|
||||
</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>
|
||||
</View>
|
||||
</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 onPress={() => this.setState({ showModal: true })} style={{ height: 50, 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 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 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 style={{ flex: 1.5, alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
</CustomSafeArea>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = (state) => {
|
||||
|
|
|
|||
|
|
@ -33,7 +33,8 @@ export default function StationDetails(props){
|
|||
await REQUEST_POST_PAY("getStoreDetails", "get", {}, {
|
||||
storeId: storeId
|
||||
}, {}, async (response) => {
|
||||
setloading(false)
|
||||
setloading(false);
|
||||
console.log(response.response);
|
||||
if(response.success){
|
||||
setstation(response.response)
|
||||
}
|
||||
|
|
@ -68,18 +69,18 @@ export default function StationDetails(props){
|
|||
onMapReady={() => {}}
|
||||
pinSelected={true}/>
|
||||
</View>
|
||||
{/* <PanelFragment
|
||||
<PanelFragment
|
||||
visible={false}
|
||||
data={station}
|
||||
onload={setloading}
|
||||
stationId={props.route.params?.data.storeId}
|
||||
loading={false}
|
||||
error={null}
|
||||
snapPoints={['5', '5', '5']}
|
||||
snapPoints={['0', '0', '0']}
|
||||
onError={() => init()}
|
||||
onTransaction={(response, storeId, selectedPump) => navigateToPayatpumpTransaction(response, storeId, selectedPump)}
|
||||
lat={props.route.params?.location.latitude}
|
||||
lon={props.route.params?.location.longitude}/> */}
|
||||
lon={props.route.params?.location.longitude}/>
|
||||
</CustomSafeArea>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,10 +1,11 @@
|
|||
import * as React from 'react';
|
||||
import { SafeAreaView } from 'react-native';
|
||||
import { Alert, SafeAreaView } from 'react-native';
|
||||
import { connect } from "react-redux";
|
||||
import { WebView } from 'react-native-webview';
|
||||
import { Container } from 'native-base';
|
||||
import Elements from '../../components/elements'
|
||||
import Theme from '../../components/theme.style.js';
|
||||
import CustomSafeArea from '../../components/safeArea.component';
|
||||
|
||||
class VerificationWebview extends React.Component {
|
||||
|
||||
|
|
@ -27,19 +28,32 @@ class VerificationWebview extends React.Component {
|
|||
}
|
||||
|
||||
onStateChange = (webViewState) => {
|
||||
let url = webViewState.url
|
||||
if(url.includes('www.paymaya.com') && !webViewState.loading) {
|
||||
this.props.route.params?.onSuccessAuthentication(this.state.referenceNumber)
|
||||
setTimeout(() => {
|
||||
this.props.navigation.goBack()
|
||||
}, 500);
|
||||
let url = webViewState.url;
|
||||
// if(url.includes('www.paymaya.com') && !webViewState.loading) {
|
||||
// this.props.route.params?.onSuccessAuthentication(this.state.referenceNumber)
|
||||
// setTimeout(() => {
|
||||
// this.props.navigation.goBack()
|
||||
// }, 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() {
|
||||
return (
|
||||
<Container>
|
||||
<SafeAreaView style={{flex: 1, backgroundColor: Theme.colors.white}}>
|
||||
<CustomSafeArea>
|
||||
<Elements.loaderView
|
||||
title="Validating"
|
||||
message="Please wait..."
|
||||
|
|
@ -58,8 +72,7 @@ class VerificationWebview extends React.Component {
|
|||
}}
|
||||
onNavigationStateChange={(webViewState) => this.onStateChange(webViewState)}
|
||||
/>
|
||||
</SafeAreaView>
|
||||
</Container>
|
||||
</CustomSafeArea>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1063,7 +1063,7 @@
|
|||
CODE_SIGN_ENTITLEMENTS = "RNUnioilLoyaltyApp/Unioil Loyalty App.entitlements";
|
||||
CODE_SIGN_IDENTITY = "Apple Development";
|
||||
CODE_SIGN_STYLE = Automatic;
|
||||
CURRENT_PROJECT_VERSION = 8;
|
||||
CURRENT_PROJECT_VERSION = 0;
|
||||
DEVELOPMENT_TEAM = J29MB7XX75;
|
||||
ENABLE_BITCODE = NO;
|
||||
FRAMEWORK_SEARCH_PATHS = (
|
||||
|
|
@ -1211,7 +1211,7 @@
|
|||
"\"${PODS_ROOT}/CocoaLibEvent/lib\"",
|
||||
"\"${PODS_ROOT}/OpenSSL-Universal/ios/lib\"",
|
||||
);
|
||||
MARKETING_VERSION = 1.6.5;
|
||||
MARKETING_VERSION = 1.7.0;
|
||||
ONLY_ACTIVE_ARCH = YES;
|
||||
OTHER_LDFLAGS = (
|
||||
"$(inherited)",
|
||||
|
|
@ -1238,7 +1238,7 @@
|
|||
CODE_SIGN_ENTITLEMENTS = "RNUnioilLoyaltyApp/Unioil Loyalty App.entitlements";
|
||||
CODE_SIGN_IDENTITY = "Apple Development";
|
||||
CODE_SIGN_STYLE = Automatic;
|
||||
CURRENT_PROJECT_VERSION = 8;
|
||||
CURRENT_PROJECT_VERSION = 0;
|
||||
DEVELOPMENT_TEAM = J29MB7XX75;
|
||||
FRAMEWORK_SEARCH_PATHS = (
|
||||
"$(inherited)",
|
||||
|
|
@ -1309,7 +1309,7 @@
|
|||
"\"${PODS_ROOT}/CocoaLibEvent/lib\"",
|
||||
"\"${PODS_ROOT}/OpenSSL-Universal/ios/lib\"",
|
||||
);
|
||||
MARKETING_VERSION = 1.6.5;
|
||||
MARKETING_VERSION = 1.7.0;
|
||||
ONLY_ACTIVE_ARCH = NO;
|
||||
OTHER_LDFLAGS = (
|
||||
"$(inherited)",
|
||||
|
|
|
|||
Binary file not shown.
Loading…
Reference in New Issue