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

updates

This commit is contained in:
Harley Catubag 2022-07-25 13:06:50 +08:00
parent 578abab1ac
commit 9bd010b05f
32 changed files with 441 additions and 230 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
app/assets/mastercard.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 139 KiB

BIN
app/assets/pump_addcard.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
app/assets/pump_grey.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 23 KiB

BIN
app/assets/pump_logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 36 KiB

After

Width:  |  Height:  |  Size: 33 KiB

BIN
app/assets/pump_plain.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 26 KiB

BIN
app/assets/visa.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 56 KiB

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

@ -99,6 +99,7 @@ const getStores = post_pay + "stores";
const getStoreDetails = post_pay + "stores/details";
const payOutsideStore = post_pay + "pay/outside/store";
const getTransactionDetails = post_pay + "transactions";
const getTransactionStatusDetails = post_pay + "transactions/statuspoll";
const postClaim = post_pay + "postpay/claim";
const postpay = post_pay + "postpay";
const getWalletPublicKey = post_pay + "wallet/register/publickey";
@ -185,6 +186,7 @@ export default {
getStoreDetails,
payOutsideStore,
getTransactionDetails,
getTransactionStatusDetails,
postClaim,
postpay,
getFunding,

11
app/components/api/postpayapi.js
View File

@ -18,12 +18,12 @@ export default async function API(endpoint, method, headers, params, body, onSuc
'Content-Type': 'application/json',
'x-p97-tenantid': '8ba3cd89-74be-4a7a-91a5-5eb59a2040b8',
'x-p97-apikey': EP.post_pay_api_key,
'x-p97-latitude': location.latitude,
'x-p97-longitude': location.longitude,
'x-p97-latitude': location.latitude.toString(),
'x-p97-longitude': location.longitude.toString(),
'x-p97-deviceid': deviceID,
'x-p97-appversionnumber': versionNumb,
'x-p97-appbundleid': appBundleID,
'x-p97-os': OS,
'x-p97-os': "Android",
'x-p97-clientosversion': versionRelease
}
@ -60,13 +60,14 @@ export default async function API(endpoint, method, headers, params, body, onSuc
'x-p97-clientosversion': versionRelease
}
let paramsItem = Object.entries(params).map(([key, value]) => `${key}=${value}`)
if(endpoint.includes("/")) {
const newURL = endpoint.split("/");
url = newURL[0].includes(":") ? newURL[0] : EP[newURL[0]];
url = `${url}/${newURL[1]}`;
} else if(endpoint === "getTransactionStatusDetails") {
url = EP[endpoint] + `/${params.transactionID}`
} else {
let paramsItem = Object.entries(params).map(([key, value]) => `${key}=${value}`)
url = paramsItem.length > 1 ? `${EP[endpoint]}?${paramsItem.join('&').toString()}` : `${EP[endpoint]}/${Object.entries(params).map(([key, value]) => value).join('').toString()}`
}

5
app/components/assets.manager.js
View File

@ -70,7 +70,10 @@ const icons = {
successmpinupdate: require("../assets/success_icon.png"),
no_connection: require('../assets/empty_state_no_internet.png'),
animated_loading: require("../assets/loading.gif")
animated_loading: require("../assets/loading.gif"),
newMasterCard: require("../assets/mastercard.png"),
newVisa: require("../assets/visa.png")
}
const cards = {

4
app/components/drawer.js
View File

@ -97,7 +97,7 @@ const styles = {
marginTop: Theme.screen.h / 2 - 270,
},
android: {
marginTop: Theme.screen.h / 4 + 10,
marginTop: Theme.screen.h / 2 - 230,
},
}),
},
@ -131,7 +131,7 @@ class CustomDrawer extends React.PureComponent {
onLogout = async () => {
this.setState({ loading: true })
NetInfo.netstatus(async (isConnected) => {
await DB.remove("iqair")
if (isConnected) {
this.setState({ loading: false })
this.logoutAccount(success => {

24
app/components/elements.js
View File

@ -252,7 +252,7 @@ const transactiontable = function(Props){
if(item.item == 'EPURSE' || item.item == '') return null
return (
<View key={index} style={{flex: 1, flexDirection: 'row', paddingLeft: 15, paddingRight: 15, paddingTop: 10, alignItems: 'center'}}>
<Text style={{flex: 4,fontFamily: 'Arial', textAlign: 'left', fontSize: 13, color: Props.textColor}}>{item.item}</Text>
<Text style={{flex: 4,fontFamily: 'Arial', textAlign: 'center', fontSize: 13, color: Props.textColor}}>{item.item}</Text>
<Text style={{flex: 2,fontFamily: 'Arial', fontWeight: 'bold', textAlign: 'center', fontSize: 13, color: Props.textColor}}>{item.quantity}</Text>
<Text style={{flex: 2, fontFamily: 'Arial', fontWeight: 'bold',textAlign: 'center', fontSize: 13, color: Props.textColor}}>{"\u20B1"} {Theme.formatter.CRNCY(item.price)}</Text>
</View>)
@ -750,7 +750,8 @@ const customAlert = function(props) {
noText,
yesButtonOnly,
noButtonOnly,
theme
theme,
children
} = props;
if(!open) return null;
@ -782,13 +783,20 @@ const customAlert = function(props) {
borderRadius: 10,
alignItems: 'center'
}}>
<Text style={{color: theme?.theme.dark ? theme?.theme.colors.text : "black", textAlign: 'center', fontWeight: 'bold', fontSize: 18, marginTop: 18, marginBottom: 19}}>{title}</Text>
<Text style={{color: theme?.theme.dark ? theme?.theme.colors.text : "black", paddingHorizontal: 15, textAlign: 'center', fontSize: 18, marginBottom: 35}}>{body}</Text>
{
children ?
children
:
<>
<Text style={{color: theme?.theme.dark ? theme?.theme.colors.text : "black", textAlign: 'center', fontWeight: 'bold', fontSize: 18, marginTop: 18, marginBottom: 19}}>{title}</Text>
<Text style={{color: theme?.theme.dark ? theme?.theme.colors.text : "black", paddingHorizontal: 15, textAlign: 'center', fontSize: 18, marginBottom: 35}}>{body}</Text>
<View style={{flexDirection: 'row', paddingHorizontal: 31, marginBottom: 18}}>
{ !yesButtonOnly && <TouchableOpacity onPress={onPressNo} style={{flex: 1, borderWidth: 1, borderColor: Theme.colors.primary, alignItems: 'center', paddingVertical: 6, marginRight: 6, borderRadius: 5}}><Text style={{fontWeight: 'bold', color: Theme.colors.primary, fontSize: 17}}>{noText ? noText : "Cancel"}</Text></TouchableOpacity> }
{ !noButtonOnly && <TouchableOpacity onPress={onPressYes} style={{flex: 1, backgroundColor: Theme.colors.primary, alignItems: 'center', paddingVertical: 6, marginLeft: 6, borderRadius: 5}}><Text style={{fontWeight: 'bold', color: 'white', fontSize: 17}}>{yesText ? yesText : "Yes"}</Text></TouchableOpacity> }
</View>
<View style={{flexDirection: 'row', paddingHorizontal: 31, marginBottom: 18}}>
{ !yesButtonOnly && <TouchableOpacity onPress={onPressNo} style={{flex: 1, borderWidth: 1, borderColor: Theme.colors.primary, alignItems: 'center', paddingVertical: 6, marginRight: 6, borderRadius: 5}}><Text style={{fontWeight: 'bold', color: Theme.colors.primary, fontSize: 17}}>{noText ? noText : "Cancel"}</Text></TouchableOpacity> }
{ !noButtonOnly && <TouchableOpacity onPress={onPressYes} style={{flex: 1, backgroundColor: Theme.colors.primary, alignItems: 'center', paddingVertical: 6, marginLeft: 6, borderRadius: 5}}><Text style={{fontWeight: 'bold', color: 'white', fontSize: 17}}>{yesText ? yesText : "Yes"}</Text></TouchableOpacity> }
</View>
</>
}
</TouchableOpacity>
</TouchableOpacity>

2
app/components/header/guest.js
View File

@ -75,7 +75,7 @@ class Header extends React.PureComponent {
<Image source={Assets.logo.profileHolder} style={{ flex: 1, borderRadius: 40, resizeMode: "cover", alignSelf: "center", width: '100%', height: '100%', borderColor: '#fff'}} />
</View>
<View style={{flex: 1, width: '100%', justifyContent: 'center', alignItems: 'center'}}>
<Text style={{fontSize: 20, fontWeight: 'bold', color: '#fff', marginTop: 15}}>
<Text style={{fontSize: 20, fontWeight: 'bold', color: '#fff', marginTop: 30}}>
Guest
</Text>
<Text style={{fontSize: 25, fontWeight: 'bold', color: '#fff'}}>

2
app/components/storage/index.js
View File

@ -401,6 +401,8 @@ export const setLogin = async () => {
export const logoutAccount = async (callback, catcher) => {
try{
await AsyncStorage.removeItem("iqair");
await AsyncStorage.removeItem("pumpPaymentCards");
await AsyncStorage.setItem(DBName + "enter_mpin", "false")
callback()
} catch(error) {

3
app/redux/reducers/AlertReducer.js
View File

@ -10,7 +10,8 @@ const initialState = {
noText: "",
yesButtonOnly: false,
noButtonOnly: false,
theme: undefined
theme: undefined,
children: undefined
}
export function alertReducer(state = initialState, action) {

1
app/screens/account/activate/otp.js
View File

@ -92,7 +92,6 @@ class TermsConditions extends React.Component {
lcard_uuid: success.data.userDetails.lcard_uuid,
mobile_number: success.data.userDetails.mobile
}
console.log(this.props.route.params)
DB.setsession(sessiondata, (res) => {
this.setState({ loading: false })
if(onSuccess.status == 1){

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

@ -356,6 +356,7 @@ class About extends React.PureComponent {
fontFamily: 'Arial',
color: Theme.colors.primary,
marginLeft: 10,
marginBottom: 10,
fontSize: 16,
}}>
Add a Card

4
app/screens/login/apply/details.js
View File

@ -7,7 +7,7 @@ import {
Text,
Image,
Alert,
Keyboard
Platform
} from 'react-native';
import {
FormControl,
@ -139,7 +139,7 @@ class ApplyCardDetails extends React.Component {
behavior='padding'
keyboardVerticalOffset={Platform.OS === 'ios' ? 50 : 70}
>
<ScrollView contentContainerStyle={{height: Theme.screen.h * .85}}>
<ScrollView contentContainerStyle={Platform.OS === "android" ? {flex: 1} : {height: Theme.screen.h * .85}}>
<View style={{flex: 1, justifyContent: 'flex-start', alignItems: 'flex-start', padding: 20}}>
<View style={{padding: 10, width: '100%'}}>
<Image source={{uri: this.card.image}} style={{width: '100%', height: Theme.screen.h * .28, borderRadius: 10}} />

11
app/screens/login/apply/form.js
View File

@ -124,7 +124,7 @@ class ApplyForm extends React.Component {
//this.setState({ loading: true })
let uuid = await DB.get("deviceUUID");
let body = {
birthdate: Theme.formatter.DT4API(Platform.OS === "android" ? this.state.selectedDate : this.state.birthdate || ""),
birthdate: Platform.OS === "android" ? this.state.selectedDate : Theme.formatter.DT4API(this.state.birthdate || ""),
cardtype_uuid: this.state.card.card_uuid,
deviceUUID: uuid,
email: this.state.email,
@ -151,7 +151,7 @@ class ApplyForm extends React.Component {
//this.setState({ loading: true })
let uuid = await DB.get("deviceUUID")
let body = {
birthdate: Theme.formatter.DT4API(Platform.OS === "android" ? this.state.selectedDate : this.state.birthdate || ""),
birthdate: Platform.OS === "android" ? this.state.selectedDate : Theme.formatter.DT4API(this.state.birthdate || ""),
cardtype_uuid: this.state.card.card_uuid,
deviceUUID: uuid,
email: this.state.email,
@ -178,7 +178,7 @@ class ApplyForm extends React.Component {
this.setState({ loading: true })
let uuid = await DB.get("deviceUUID")
let body = {
birthdate: Theme.formatter.DT4API(this.state.birthdate || ""),
birthdate: Theme.formatter.DT4API(Platform.OS === 'android' ? this.state.selectedDate : this.state.birthdate || ""),
cardtype_uuid: this.state.card.card_uuid,
deviceUUID: uuid,
email: this.state.email,
@ -189,7 +189,6 @@ class ApplyForm extends React.Component {
}
await REQUEST("submitRegistration", "post", {}, {}, body, async (signup) => {
console.log("APPLY RESULT", signup.data)
if(signup.status == 1){
await REQUEST("user_profile", "get", {
Authorization: "Bearer " + signup.data.token,
@ -218,7 +217,7 @@ class ApplyForm extends React.Component {
this.setState({ loading: true })
let uuid = await DB.get("deviceUUID")
let body = {
birthdate: Theme.formatter.DT4API(this.state.birthdate || ""),
birthdate: Platform.OS === "android" ? this.state.selectedDate : Theme.formatter.DT4API(this.state.birthdate || ""),
cardtype_uuid: this.state.card.card_uuid,
deviceUUID: uuid,
email: this.state.email,
@ -228,6 +227,8 @@ class ApplyForm extends React.Component {
mobile: Theme.formatter.PMBL(this.state.number.substr(1, this.state.number.length-1) || "")
}
console.log(body)
await REQUEST("apply", "post", {}, {}, body, async (signup) => {
console.log("APPLY RESULT", signup.data)
if(signup.status == 1){

2
app/screens/login/apply/otp.js
View File

@ -111,7 +111,7 @@ class TermsConditions extends React.PureComponent {
this.setState({ resend: true })
}
}, error => {
console.log(error)
console.log('the err: ' + JSON.stringify(error));
})
}else{
Elements.nointernet2(this.props)

6
app/screens/login/index.js
View File

@ -208,12 +208,12 @@ class AddAccountCard extends React.PureComponent {
</View>
</View>
</View>
<View style={{flexDirection: 'row', marginBottom: 15}}>
<View style={{flexDirection: 'row', marginBottom: 5}}>
<TouchableOpacity onPress={() => {this.setState({ openOptions: true })}} style={{padding: 15, alignItems: 'flex-start', flex: 1}}>
<Text style={{fontSize: 18, fontFamily: 'Arial', textAlign: 'left', color: Theme.colors.white}}>Contact Us</Text>
<Text style={{fontSize: 16, fontFamily: 'Arial', textAlign: 'left', color: Theme.colors.white}}>Contact Us</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => {}} style={{padding: 15, justifyContent: 'flex-end', flex: 1}}>
<Text style={{fontSize: 18, fontFamily: 'Arial', textAlign: 'right', color: Theme.colors.white}}>{version}</Text>
<Text style={{fontSize: 16, fontFamily: 'Arial', textAlign: 'right', color: Theme.colors.white}}>{version}</Text>
</TouchableOpacity>
</View>

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

@ -1,10 +1,12 @@
import React, {useEffect} from 'react';
import { Platform, TouchableOpacity, Text } from 'react-native';
import React from 'react';
import { Platform, TouchableOpacity, View, Text } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';
import { useNavigation, useRoute } from '@react-navigation/native';
import { useNavigation } from '@react-navigation/native';
import Theme from '../../components/theme.style';
import Icon from '../../components/icons';
import DB from '../../components/storage/';
import Elements from '../../components/elements.js';
import Theme from '../../components/theme.style.js';
import HomeScreen from './home.js';
import PromosScreen from './promo/';
@ -12,6 +14,8 @@ import IQAir from '../iqair';
import PayatpumpScreen from './../payatpump'; //disable temporarily
import StationsScreen from './station/';
import RewardsScreen from './rewards.js';
import { useDispatch, useSelector } from 'react-redux';
import { closeModal, openModal } from '../../redux/actions/AlertActions.js';
const Tab = createBottomTabNavigator();
@ -38,8 +42,70 @@ const screenOptions = ({ route }) => ({
});
const PayatpumpTab = (navigation) => {
const app_theme = useSelector(state => state.appThemeReducer.theme);
const dispatch = useDispatch();
const noEmailContainer = () => {
const close = () => {
dispatch(closeModal());
}
const proceed = () => {
navigation.navigation.navigate('Payatpump');
dispatch(closeModal());
}
const update = () => {
dispatch(closeModal());
}
return (
<View style={{paddingVertical: 10, paddingHorizontal: 10}}>
<TouchableOpacity onPress={close} style={{ marginBottom: 10, width: 20, height: 20, alignSelf: 'flex-end', borderWidth: 1, borderColor: Theme.colors.primary, borderRadius: 30, alignItems: 'center', justifyContent: 'center' }} >
<Icon.Entypo name='cross' size={20} style={{color: Theme.colors.primary, bottom: 1, right: 0.5 }} />
</TouchableOpacity>
<Text numberOfLines={1} adjustsFontSizeToFit style={{fontSize: 15}}>No Email address is registered in your Account.</Text>
<Text numberOfLines={1} adjustsFontSizeToFit style={{fontSize: 15, marginBottom: 20}}>Update your Profile to receive an Email receipt.</Text>
<TouchableOpacity onPress={update} style={{marginBottom: 5, alignSelf: 'center', width: 200, alignItems: 'center', borderRadius: 10, borderWidth: 1, borderColor: Theme.colors.primary, paddingVertical: 5}}>
<Text style={{color: Theme.colors.primary, fontSize: 15}}>Update Profile</Text>
</TouchableOpacity>
<TouchableOpacity onPress={proceed} style={{marginBottom: 15, alignSelf: 'center', width: 200, alignItems: 'center', backgroundColor: Theme.colors.primary, borderRadius: 10, borderWidth: 1, borderColor: Theme.colors.primary, paddingVertical: 5}}>
<Text style={{ color: Theme.colors.white, fontSize: 15}}>Proceed without Updating</Text>
</TouchableOpacity>
</View>
)
}
const onPress = async () => {
const isGuest = await DB.get("is_guest");
const user = await DB.profile();
if(isGuest) {
return dispatch(openModal({
open: true,
title: "Warning",
body: `You won't be able to access some\nof the pages unless you will enroll your\ncard or login.`,
yesText: "Okay",
yesButtonOnly: true,
theme: app_theme
}));
};
if(!user.data.email) {
return dispatch(openModal({
open: true,
children: noEmailContainer(),
theme: app_theme
}));
}
navigation.navigation.navigate('Payatpump');
}
return (
<TouchableOpacity onPress={() => navigation.navigation.navigate('Payatpump')}
<TouchableOpacity onPress={onPress}
style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Elements.icon name={'activepayatpump'} size={45} resizeMode={'contain'} marginBottom={-4} />
</TouchableOpacity>
@ -81,12 +147,11 @@ const Home = () => {
}
export default function App(navigation) {
return (
<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>

21
app/screens/myprofile/profile/edit.js
View File

@ -218,8 +218,20 @@ class EditProfile extends React.PureComponent {
})
}
resetData = () => {
this.setState({
newmobile: "",
newaddress: null,
newcity: null,
vehicleType: null,
fuelType: null,
maritalStatus: null,
gender: null
})
}
updateProfileBlob = async (successCallback, errorCallback) => {
let SESSION = await DB.session()
let SESSION = await DB.session();
let params = {
userProfile: this.state.userProfile,
newmobile: this.state.newmobile,
@ -300,6 +312,7 @@ class EditProfile extends React.PureComponent {
this.setState({ loading: true })
if(this.state.newphoto) {
this.fetchProfileBlob(success => {
this.resetData();
this.setState({ loading: false })
if(success.status == 0) {
this.setState({ errors: success })
@ -310,6 +323,7 @@ class EditProfile extends React.PureComponent {
})
}
}, error => {
this.resetData();
this.setState({ loading: false })
setTimeout(() => {
if(this.state.newphoto) {
@ -327,6 +341,7 @@ class EditProfile extends React.PureComponent {
} else {
this.setState({ loading: true })
this.updateProfileBlob(success => {
this.resetData();
this.setState({ loading: false })
if(success.status == 0) {
this.setState({ errors: success })
@ -337,6 +352,7 @@ class EditProfile extends React.PureComponent {
})
}
}, error => {
this.resetData();
this.setState({ loading: false })
setTimeout(() => {
if(this.state.newphoto) {
@ -371,7 +387,6 @@ class EditProfile extends React.PureComponent {
this.setState({ focused: false });
if(this.hasChanges()){
if(this.state.newmobile != "" && this.state.newmobile.replace("+", "") != this.state.userProfile.mobile){
this.SaveWithOtp()
}else{
@ -594,7 +609,7 @@ class EditProfile extends React.PureComponent {
<Elements.custominput
type="input"
title="Birthday"
placeholder={this.state.userProfile ? new moment(new Date(this.state.userProfile.birthdate)).format("DD MMM YYYY") : ''}
placeholder={this.state.userProfile ? this.state.userProfile.birthdate : ''}
placeholderColor='gray'
disabled
onChange={null}

10
app/screens/myprofile/profile/profile.js
View File

@ -10,7 +10,6 @@ import CustomIcon from '../../../components/icons.js';
import { Avatar, Divider } from 'react-native-elements';
import DB from '../../../components/storage/';
class MyProfile extends React.PureComponent {
constructor(props) {
@ -83,7 +82,6 @@ class MyProfile extends React.PureComponent {
onEdit = () => {
let navigation = this.props.navigation.navigation
navigation.navigate("EditProfile", {data: this.state.userProfile, onGoBack: (data) => {
console.log(data)
this.setState({ userProfile: data, loading: false })
this.init()
}})
@ -116,7 +114,7 @@ class MyProfile extends React.PureComponent {
render() {
if(!this.state.connected) return this.renderNoInternetView()
return (
<SafeAreaView key={this.state.userUpdateCounter} style={{flex: 1}}>
<SafeAreaView key={this.state.userUpdateCounter} style={{flex: 1 }}>
<Elements.loader visible={this.state.loading} />
<ScrollView style={{flex: 1, backgroundColor: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.background : Theme.colors.white }}>
<View style={{flex: 1, alignItems: 'center', width: '100%', padding: 15}}>
@ -194,18 +192,18 @@ class MyProfile extends React.PureComponent {
</Text>
</View>
</View>
{/* <View style={{width: '100%'}}>
<View style={{width: '100%'}}>
<Divider />
<TouchableOpacity
onPress={() => this.props.navigation.navigation.navigate('PayatpumpPaymentList', { displaySelectionCard: true })}
style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center', marginLeft: 16 }}>
<Image source={Assets.icons.stpunlabeled} style={{ width: 28, height: 28, resizeMode: 'contain' }} />
<View style={{flex: 1, flexDirection: 'row', paddingVertical: 15, marginHorizontal: 10, alignItems: 'center', justifyContent: 'center'}}>
<Text style={{flex: 1, fontFamily: 'Arial', fontSize: 16, color: this.props.app_theme?.theme.dark ? Theme.colors.darkGray : Theme.colors.gray, alignSelf: 'flex-start'}}>Pay at Pump Payment Methods</Text>
<Text style={{flex: 1, fontFamily: 'Arial', fontSize: 12, color: this.props.app_theme?.theme.dark ? Theme.colors.darkGray : Theme.colors.gray, alignSelf: 'flex-start'}}>Pump and GO Payment Method</Text>
<CustomIcon.Entypo name={"chevron-thin-right"} color={this.props.app_theme?.theme.colors.text} size={16} />
</View>
</TouchableOpacity>
</View> */}
</View>
</View>
</ScrollView>
</SafeAreaView>

13
app/screens/myprofile/transaction/transaction.js
View File

@ -1,14 +1,8 @@
import * as React from 'react';
import { useState, useEffect, useCallback, useContext } from 'react';
import { connect } from "react-redux";
import { SafeAreaView, ScrollView, Linking, Button, View, Text, TouchableOpacity, RefreshControl, Platform } from 'react-native';
import {useNetInfo} from "@react-native-community/netinfo";
// import NetInfo from "@react-native-community/netinfo";
import { ScrollView, Linking, View, Text, RefreshControl } from 'react-native';
import NetInfo from "../../../components/netstatus";
import CustomHeader from '../../../components/header.js';
import Assets from '../../../components/assets.manager.js';
import Theme from '../../../components/theme.style.js';
import Icon from '../../../components/icons.js';
import Elements from '../../../components/elements.js';
import REQUEST from '../../../components/api/';
import DB from '../../../components/storage/';
@ -46,7 +40,8 @@ class MyTransactions extends React.Component {
}
init = async () => {
const SESSION = await DB.session()
const SESSION = await DB.session();
this.setState({ connected: true, loading: true })
await REQUEST("transactions", "get", {
Authorization: SESSION.token,
@ -56,7 +51,7 @@ class MyTransactions extends React.Component {
}, (error) => {
this.setState({ loading: false })
}
)
);
}
renderTransactions = () => {

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

@ -17,7 +17,8 @@ import {
List,
ListItem,
Left,
Right
Right,
Divider
} from 'native-base';
import REQUEST_POST_PAY from '../../../components/api/postpayapi';
import Assets from '../../../components/assets.manager.js';
@ -53,7 +54,6 @@ const styles = {
},
modalView: {
margin: 25,
borderRadius: 15,
padding: 20,
alignItems: "center",
shadowColor: "#000",
@ -235,7 +235,7 @@ const PayatpumpStationDetails = (props) => {
transparent={true}
visible={showModal}>
<View activeOpacity={1} style={styles.centeredView}>
<View style={[styles.modalView, { backgroundColor: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.border : Theme.colors.white, height: initiateCancel ? 250 : confirmProceed ? 250 : 350, }]}>
<View style={[styles.modalView, { backgroundColor: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.border : Theme.colors.white }, (!initiateCancel && !initiateProceed && !confirmProceed) && { width: Theme.screen.w * .8, borderRadius: 10, alignSelf: 'center', height: Theme.screen.h * .45}]}>
{!initiateCancel && !confirmProceed && (<TouchableOpacity style={{ width: 20, height: 20, alignSelf: 'flex-end', borderWidth: 1, borderColor: Theme.colors.primary, borderRadius: 30, alignItems: 'center', justifyContent: 'center' }}
onPress={() => {
setInitiateCancel(true)
@ -251,6 +251,7 @@ const PayatpumpStationDetails = (props) => {
{confirmProceed && ConfirmPumpSelectorView()}
</View>
</View>
</Modal>
)
}
@ -258,23 +259,23 @@ const PayatpumpStationDetails = (props) => {
const CancelPumpSelectorView = () => {
return (
<>
<View style={{ flex: 0.7, paddingTop: 20 }}>
<Text style={{ color: props.app_theme?.theme.colors.text, fontSize: 23, textAlign: 'center' }}>Are you sure you want to cancel the transaction?</Text>
<View style={{ marginTop: 10, marginBottom: 15 }}>
<Text style={{ color: props.app_theme?.theme.colors.text, fontSize: 18, textAlign: 'center' }}>Are you sure you want to{'\n'}cancel the transaction?</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'row', justifyContent: 'center' }}>
<View style={{ flexDirection: 'row', justifyContent: 'center' }}>
<TouchableOpacity onPress={() => {
setInitiateCancel(false)
selectedPump != null ? setInitiateProceed(true) : setInitiateProceed(false)
}} style={{ width: 100, height: 44, margin: 12, backgroundColor: Theme.colors.white, borderColor: Theme.colors.primary, borderWidth: 0.5, alignItems: 'center', justifyContent: 'center', borderRadius: 5 }}>
<Text style={{ color: Theme.colors.primary, fontSize: 13, textAlign: 'center', fontWeight: 'bold' }}>No</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => {
setShowModal(false)
setInitiateCancel(false)
setInitiateProceed(false)
setSelectedPump(null)
}} style={{ width: 100, height: 44, margin: 12, backgroundColor: Theme.colors.white, borderColor: Theme.colors.primary, borderWidth: 0.5, alignItems: 'center', justifyContent: 'center', borderRadius: 5 }}>
<Text style={{ color: Theme.colors.primary, fontSize: 17, textAlign: 'center' }}>Cancel Transaction</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => {
setInitiateCancel(false)
selectedPump != null ? setInitiateProceed(true) : setInitiateProceed(false)
}} style={{ width: 100, height: 44, margin: 12, backgroundColor: Theme.colors.primary, justifyContent: 'center', alignItems: 'center', borderRadius: 5 }}>
<Text style={{ color: Theme.colors.white, fontSize: 17, textAlign: 'center' }}>Continue Transaction</Text>
<Text style={{ color: Theme.colors.white, fontSize: 13, textAlign: 'center', fontWeight: 'bold' }}>Yes</Text>
</TouchableOpacity>
</View>
</>
@ -282,28 +283,28 @@ const PayatpumpStationDetails = (props) => {
}
const ProceedPumpSelectorView = () => {
let message = selectedPump != null ? `This will process your transaction at Pump ${selectedPump.pumpNumber}.` : "No selected pump."
let message = selectedPump != null ? `This will process your transaction at` : "No selected pump."
return (
<>
<View style={{ flex: 1, alignItems: 'center' }}>
<View>
<View style={{ alignItems: 'center' }}>
<Image source={Assets.pumps.pump_logo} style={{padding: 40, width: 50, height: 50, resizeMode: 'contain'}} />
</View>
<View style={{ flex: 0.5, alignItems: 'center', padding: 5, marginBottom: 15 }}>
<Text style={{ fontSize: 19, textAlign: 'center', color: props.app_theme?.theme.colors.text }}>{message}</Text>
<View style={{ alignItems: 'center', padding: 5, marginBottom: 15 }}>
<Text style={{ fontSize: 19, textAlign: 'center', color: props.app_theme?.theme.colors.text }}>{message} {selectedPump != null && <Text style={{fontWeight: 'bold'}}>Pump {selectedPump.pumpNumber}.</Text>}</Text>
</View>
<View style={{ flex: 0.5, alignItems: 'center', padding: 5, marginBottom: 15 }}>
<View style={{ alignItems: 'center', padding: 5, marginBottom: 30 }}>
<Text style={{ fontSize: 19, textAlign: 'center', color: props.app_theme?.theme.colors.text }}>Please ensure that this is the correct pump and click Ok below to proceed.</Text>
</View>
<View style={{ flex: 0.5, alignItems: 'center' }}>
<View style={{ alignItems: 'center' }}>
<TouchableOpacity onPress={() => {
setInitiateCancel(false)
setInitiateProceed(false)
}}
style={{ padding: 10, width: 100, backgroundColor: Theme.colors.primary, justifyContent: 'center', alignItems: 'center', borderRadius: 5 }}>
<Text style={{ fontSize: 18, color: Theme.colors.white, textAlign: 'center' }}>Ok</Text>
style={{ paddingVertical: 5, width: 120, backgroundColor: Theme.colors.primary, justifyContent: 'center', alignItems: 'center', borderRadius: 5 }}>
<Text style={{ fontSize: 17, color: Theme.colors.white, textAlign: 'center' }}>OK</Text>
</TouchableOpacity>
</View>
</>
</View>
)
}
@ -311,7 +312,7 @@ const PayatpumpStationDetails = (props) => {
let message = selectedPump != null ? "Processing..." : "No selected pump."
return (
<>
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<View style={{backgroundColor: 'transparent', alignItems: 'center', justifyContent: 'center' }}>
<Image source={Assets.icons.animated_loading} style={{width: 120, height: 120, backgroundColor: "orange"}} />
{/* <Icon.AntDesign name={'loading1'} size={80} color={Theme.colors.primary} />
*/}
@ -327,46 +328,56 @@ const PayatpumpStationDetails = (props) => {
const PumpListView = (currentSelectedPump) => {
return (
<>
<Text style={{ color: Theme.colors.primary, fontSize: 23, marginTop: -10 }}>Please select the pump</Text>
<Text style={{ color: Theme.colors.primary, fontSize: 18, fontWeight: 'bold', textAlign: 'center', marginBottom: 20}}>Please select your Pump no.{'\n'} to process the payment.</Text>
<FlatList
style={{ marginBottom: 16 }}
keyExtractor={(item, index) => index.toString()}
contentContainerStyle={{ alignItems: 'center'}}
data={props.data.fuelService?.fuelingPoints}
scrollEnabled={true}
showsVerticalScrollIndicator={false}
renderItem={({item, index}) => {
let available = item.pumpStatus == "Available"
return (
<TouchableOpacity 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) ? (
<View style={styles.selectedPumpBorder}>
<Image source={available ? Assets.pumps.plain_pump : Assets.pumps.plain_pump_grey} style={{padding: 40, width: 50, height: 50, resizeMode: 'contain' }} />
</View>
) : (
<View style={[styles.unselectedPumpBorder, { borderColor: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.border : Theme.colors.white }]}>
<Image source={available ? Assets.pumps.plain_pump : Assets.pumps.plain_pump_grey} style={{padding: 40, width: 50, height: 50, resizeMode: 'contain' }} />
</View>
)}
<Text style={{ alignSelf: 'center', position:'absolute', color: available ? Theme.colors.primary : Theme.colors.darkGray, padding: 10, left: 21, bottom: 15 }}>{item.pumpNumber}</Text>
<TouchableOpacity onPress={() => {
setInitiateProceed(true)
setSelectedPump(item)
}}
style={{marginHorizontal: 15, marginBottom: 10, borderColor: (currentSelectedPump != null && currentSelectedPump.pumpNumber == item.pumpNumber) ? Theme.colors.primary : "transparent", borderWidth: 4, borderRadius: 15}}>
<Image source={available ? Assets.pumps.plain_pump : Assets.pumps.plain_pump_grey} style={{width: 80, height: 80, resizeMode: 'contain' }} />
<View style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
alignItems: 'center',
justifyContent: 'center'
}}>
<Text style={{
left: -9,
bottom: -10,
color: 'white',
fontWeight: 'bold',
fontSize: 19
}}>{index + 1}</Text>
</View>
</TouchableOpacity>
)
}}
numColumns={2}
/>
<Divider style={{backgroundColor: Theme.colors.primary, marginTop: 2}}/>
<TouchableOpacity
disabled={!selectedPump}
style={{ width: 100, padding: 10, backgroundColor: selectedPump != null ? Theme.colors.primary : Theme.colors.darkGray, alignItems: 'center', justifyContent: 'center', borderRadius: 5 }}
style={{ width: 120, paddingVertical: 5, marginTop: 15, backgroundColor: selectedPump != null ? Theme.colors.primary : Theme.colors.darkGray, alignItems: 'center', justifyContent: 'center', borderRadius: 5 }}
onPress={() => {
if(selectedPump != null) {
setConfirmProceed(true)
initiateTransaction()
}
}}>
<Text style={{ color: Theme.colors.white }}>Ok</Text>
<Text style={{ color: Theme.colors.white, fontSize: 17 }}>OK</Text>
</TouchableOpacity>
</>
)

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

@ -8,6 +8,7 @@ import {
FlatList,
Image,
StyleSheet,
Alert,
Modal
} from 'react-native';
import REQUEST_POST_PAY from '../../components/api/postpayapi';
@ -18,7 +19,7 @@ import Assets from '../../components/assets.manager.js';
import Elements from '../../components/elements.js';
import DB from '../../components/storage/';
import CustomSafeArea from '../../components/safeArea.component';
import { returnIcon } from '../../utils/card';
class PayatpumpPaymentList extends React.Component {
@ -31,8 +32,11 @@ class PayatpumpPaymentList extends React.Component {
defaultCardIndex: -1,
defaultSelectedCard: null,
showModal: false,
showCardAdded: false,
showCardDeleted: false,
deleteCard: null,
loading: false,
newlyAddedCard: null,
isShowSelectionCard: this.props.route.params?.displaySelectionCard
}
@ -69,14 +73,12 @@ class PayatpumpPaymentList extends React.Component {
defaultIndex = mergedWallets.findIndex(item => item.userPaymentSourceId === defaultCard.userPaymentSourceId);
selectedDefaultCard = mergedWallets[defaultIndex];
if(setDefault) {
await DB.set(
"pumpPaymentCards",
JSON.stringify(selectedDefaultCard),
() => {},
() => {}
)
}
await DB.set(
"pumpPaymentCards",
JSON.stringify(selectedDefaultCard),
() => {},
() => {}
)
} else {
if(selectedCard && !setDefault) {
defaultIndex = mergedWallets.findIndex(item => item.userPaymentSourceId === selectedCard.userPaymentSourceId);
@ -114,6 +116,7 @@ class PayatpumpPaymentList extends React.Component {
}, 300)
} else {
if(res.success) {
let selectedCard = await DB.get("pumpPaymentCards");
let defaultCardIndex = -1;
let defaultSelectedCard = null;
let wallets = this.state.cards.filter(item => {
@ -124,19 +127,22 @@ class PayatpumpPaymentList extends React.Component {
})
if(wallets.length > 0) {
defaultCardIndex = 0;
defaultSelectedCard = wallets[defaultCardIndex];
let checker = wallets.find(item => item.userPaymentSourceId === selectedCard.userPaymentSourceId);
if(!checker) {
defaultCardIndex = 0;
defaultSelectedCard = wallets[defaultCardIndex];
this.props.route?.params.onSelectedPaymentCard(defaultSelectedCard)
this.props.route?.params.onSelectedPaymentCard && this.props.route?.params.onSelectedPaymentCard(defaultSelectedCard)
await DB.set(
"pumpPaymentCards",
JSON.stringify(defaultSelectedCard),
() => {},
() => {}
)
await DB.set(
"pumpPaymentCards",
JSON.stringify(defaultSelectedCard),
() => {},
() => {}
)
}
} else {
this.props.route?.params.onSelectedPaymentCard(null)
this.props.route?.params.onSelectedPaymentCard && this.props.route?.params.onSelectedPaymentCard(null)
await DB.set(
"pumpPaymentCards",
@ -146,7 +152,7 @@ class PayatpumpPaymentList extends React.Component {
)
}
this.setState({ cards: wallets, defaultCardIndex: defaultCardIndex, defaultSelectedCard: defaultSelectedCard, deleteCard: null })
this.setState({ showCardDeleted: true, cards: wallets, defaultCardIndex: defaultCardIndex, defaultSelectedCard: defaultSelectedCard, deleteCard: null })
} else {
setTimeout(() => {
Alert.alert('Error', 'Failed to get fund. Try again.')
@ -171,8 +177,8 @@ class PayatpumpPaymentList extends React.Component {
"pumpPaymentCards",
JSON.stringify(defaultSelectedCard),
() => {
this.props.route?.params.onSelectedPaymentCard(defaultSelectedCard)
this.props.navigation.goBack()
this.props.route?.params.onSelectedPaymentCard && this.props.route?.params.onSelectedPaymentCard(defaultSelectedCard)
this.props.navigation.goBack();
},
() => {}
)
@ -180,8 +186,10 @@ class PayatpumpPaymentList extends React.Component {
}
onAddNewCard = (response, enableDefaultCard, setDefault) => {
this.getFunding(response, enableDefaultCard, setDefault)
onAddNewCard = (response, enableDefaultCard) => {
console.log(response);
this.setState({showCardAdded: true, newlyAddedCard: response});
this.getFunding(response, enableDefaultCard);
}
renderDeleteErrorModal = () => {
@ -192,33 +200,99 @@ class PayatpumpPaymentList extends React.Component {
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.deleteCard != null ? (
<>
<Text style={{ fontSize: 18, color: this.props.app_theme?.theme.colors.text, marginVertical: 30, textAlign: 'center' }}>{'Are you sure you want to delete this card?'}</Text>
<View style={{ flexDirection: 'row' }}>
<TouchableOpacity onPress={() => this.setState({ showModal: false })} style={{ width: 100, height: 30, backgroundColor: Theme.colors.primary, alignItems: 'center', justifyContent: 'center', borderRadius: 5, marginRight: 10 }}>
<Text style={{ fontSize: 18, color: Theme.colors.white, textAlign: 'center' }}>No</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => this.deleteCard()} style={{ width: 100, height: 30, backgroundColor: Theme.colors.white, alignItems: 'center', justifyContent: 'center', borderRadius: 5, borderColor: Theme.colors.primary, borderWidth: 0.5, marginLeft: 10 }}>
<Text style={{ fontSize: 18, color: Theme.colors.primary, textAlign: 'center' }}>Yes</Text>
</TouchableOpacity>
</View>
</>
) : (
<>
<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 Card...'}</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>
{this.state.deleteCard != null ? (
<>
<Text style={{ fontSize: 18, color: this.props.app_theme?.theme.colors.text, marginVertical: 30, textAlign: 'center' }}>{'Are you sure you want to delete this card?'}</Text>
<View style={{ flexDirection: 'row' }}>
<TouchableOpacity onPress={() => this.setState({ showModal: false })} style={{ width: 100, height: 30, backgroundColor: Theme.colors.primary, alignItems: 'center', justifyContent: 'center', borderRadius: 5, marginRight: 10 }}>
<Text style={{ fontSize: 18, color: Theme.colors.white, textAlign: 'center' }}>No</Text>
</TouchableOpacity>
</>
)}
<TouchableOpacity onPress={() => this.deleteCard()} style={{ width: 100, height: 30, backgroundColor: Theme.colors.white, alignItems: 'center', justifyContent: 'center', borderRadius: 5, borderColor: Theme.colors.primary, borderWidth: 0.5, marginLeft: 10 }}>
<Text style={{ fontSize: 18, color: Theme.colors.primary, textAlign: 'center' }}>Yes</Text>
</TouchableOpacity>
</View>
</>
) : (
<>
<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 Card...'}</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>
</TouchableOpacity>
</Modal>
)
}
renderCardAdded = () => {
let card = this.state.cards.find(item => item.userPaymentSourceId === this.state.newlyAddedCard?.userPaymentSourceId);
if(card && this.state.showCardAdded && !this.state.loading) {
return (
<View style={{
position: 'absolute',
top: 0,
right: 0,
left: 0,
bottom: 0,
backgroundColor: 'rgba(0,0,0,.4)',
justifyContent: 'center',
alignItems: 'center'
}}>
<View style={{
backgroundColor: 'white',
width: Theme.screen.w * .8,
padding: 20,
alignItems: 'center'
}}>
<Image style={{height: 90, width: 90, resizeMode: 'contain', alignSelf: 'center'}} source={require('../../assets/pump_addcard.png')}/>
<Text style={{fontWeight: 'bold', textAlign: 'center', fontSize: 14, marginVertical: 20}}>Card Ending in {card?.lastFour} has been{'\n'}successfully added!</Text>
<TouchableOpacity onPress={() => {this.setState({ showCardAdded: false, newlyAddedCard: null })}} style={{paddingVertical: 10, borderRadius: 5, marginTop: 10, width: 120, backgroundColor: Theme.colors.primary, alignItems: 'center'}}>
<Text style={{fontSize: 17, color: Theme.colors.white}}>OK</Text>
</TouchableOpacity>
</View>
</View>
)
}
return null
}
renderCardDeleted = () => {
if(this.state.showCardDeleted) {
return (
<View style={{
position: 'absolute',
top: 0,
right: 0,
left: 0,
bottom: 0,
backgroundColor: 'rgba(0,0,0,.4)',
justifyContent: 'center',
alignItems: 'center'
}}>
<View style={{
backgroundColor: 'white',
width: Theme.screen.w * .8,
padding: 20,
alignItems: 'center'
}}>
<Text style={{fontWeight: 'bold', fontSize: 17, marginBottom: 20}}>Deleted Successfully</Text>
<Text style={{textAlign: 'center', fontSize: 15, marginBottom: 10}}>Your card has been successfully{'\n'}deleted!</Text>
<TouchableOpacity onPress={() => {this.setState({ showCardDeleted: false })}} style={{paddingVertical: 5, borderRadius: 5, marginTop: 10, width: 120, backgroundColor: Theme.colors.primary, alignItems: 'center'}}>
<Text style={{fontSize: 17, color: Theme.colors.white}}>OK</Text>
</TouchableOpacity>
</View>
</View>
)
}
return null;
}
renderCardList = () => {
return (
<FlatList
@ -237,14 +311,13 @@ class PayatpumpPaymentList extends React.Component {
return (
<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 }}>
<View 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'}} /> }
</View>
<View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
<Image source={{ uri: item.imageUrl }} style={{ width: 40, height: 40, resizeMode: 'contain', marginRight: 16 }} />
<Image source={returnIcon(item.brandName)} style={{ width: 40, height: 40, resizeMode: 'contain', marginRight: 16 }} />
<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>}
@ -283,7 +356,6 @@ class PayatpumpPaymentList extends React.Component {
color={this.props.app_theme?.theme.colors.text}
visible={this.state.loading} />
<View style={{ flex: 1 }}>
{this.renderDeleteErrorModal()}
{this.renderCardList()}
<TouchableOpacity
@ -301,6 +373,7 @@ class PayatpumpPaymentList extends React.Component {
fontFamily: 'Arial',
color: Theme.colors.primary,
marginLeft: 10,
marginBottom: 10,
fontSize: 16,
}}>
Add a Card
@ -308,6 +381,9 @@ class PayatpumpPaymentList extends React.Component {
</View>
</TouchableOpacity>
</View>
{this.renderCardAdded()}
{this.renderCardDeleted()}
{this.renderDeleteErrorModal()}
</CustomSafeArea>
)
}

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

@ -22,6 +22,7 @@ import Assets from '../../components/assets.manager.js';
import Cipher from '../../components/cardencrypt/encryptcard';
import DB from '../../components/storage/';
import CustomSafeArea from '../../components/safeArea.component';
import { returnIcon } from '../../utils/card';
class PayatpumpPaymentMethodList extends React.Component {
@ -41,7 +42,7 @@ class PayatpumpPaymentMethodList extends React.Component {
showModal: false,
pubkey: null,
verificationUrl: null,
setPrimary: false
cardDetails: null
}
componentDidMount() {
@ -104,17 +105,6 @@ class PayatpumpPaymentMethodList extends React.Component {
onError('Failed to add new card. Try again.')
}
}
// if(res.success == undefined) {
// onError(res.Message)
// } else {
// if(res.success) {
// if(res.response.result) {
// onSuccess({ userPaymentSourceId: res.response.userPaymentSourceId, referenceNumber: res.response.referenceNumber })
// }
// } else {
// onError('Error', 'Failed to get fund. Try again.')
// }
// }
}, (error) => {
onError('Error', error)
})
@ -135,7 +125,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) {
onError(res.Message)
} else {
@ -161,7 +150,8 @@ class PayatpumpPaymentMethodList extends React.Component {
parts.push(match.substring(i, i+4))
}
var cardnumber = parts.length ? parts.join(' ') : number
this.setState({ cardNumber: cardnumber });
this.setState({ cardNumber: cardnumber, cardDetails: cardValidator.number(cardnumber) });
}
_handlingCardExpiry = (number) => {
@ -193,7 +183,7 @@ class PayatpumpPaymentMethodList extends React.Component {
} else {
this.setState({ loading: false })
if(res.success) {
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)
} else {
setTimeout(() => {
Alert.alert('Error', res.Message)
@ -219,13 +209,15 @@ class PayatpumpPaymentMethodList extends React.Component {
let cardExpiry = `${this.state.cardExpiry.split("/")[0]}${numberYear}${this.state.cardExpiry.split("/")[1]}`
let cardCvv = this.state.cardCVV
if(cardValidator.number(cardnumber).card.type === "jcb") {
Alert.alert('Error', `${cardValidator.number(cardnumber).card.niceType} is not available. Please use different card type.`)
console.log(cardnumber.length);
if(!cardValidator.number(cardnumber)?.card?.type || cardnumber.length < 16) {
Alert.alert('Error', `Invalid card number. Please use different card type.`)
return
}
if(!cardValidator.number(cardnumber)?.card?.type) {
Alert.alert('Error', `Invalid card number. 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
}
@ -243,12 +235,13 @@ 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, cardValidator.number(cardnumber).card.niceType, onSuccess => {
this.setState({ loading: false })
setTimeout(() => {
this.props.navigation.navigate('VerificationWebview', {...onSuccess, onSuccessAuthentication:(referenceNumber) => this._onAuthenticationSuccess(referenceNumber)})
this.setState({ loading: false })
}, 500);
},
error => {
Alert.alert('Error', `Something went wrong, please try again later.`)
this.setState({ loading: false })
})
}
@ -272,7 +265,6 @@ class PayatpumpPaymentMethodList extends React.Component {
}
onStateChange = (webviewState) => {
console.log(webviewState)
}
renderWebview = () => {
@ -326,7 +318,7 @@ class PayatpumpPaymentMethodList extends React.Component {
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' }} />
<Image source={returnIcon(this.state.cardDetails?.card?.niceType)} style={{ width: 30, height: 30, resizeMode: 'contain' }} />
</View>
<View style={{flexDirection: 'row' }}>
<View style={[styles.expirationCvvContainer, { flex: 1, marginLeft: 16, marginRight: 5 }]}>
@ -363,10 +355,10 @@ class PayatpumpPaymentMethodList extends React.Component {
<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 })}
value={this.state.enableDefaultCard}
trackColor={this.state.enableDefaultCard && {true: "#6887ed"}}
thumbColor={this.state.enableDefaultCard && "blue"}
onChange={() => this.setState({ enableDefaultCard: !this.state.enableDefaultCard })}
/>
</View>
)
@ -395,8 +387,8 @@ class PayatpumpPaymentMethodList extends React.Component {
{this.state.verificationUrl != null && this.renderWebview()}
<View style={{ flex: 1 }} />
<View>
<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>
<Text style={{ fontSize: 12, fontWeight: 'bold', textAlign: 'center', fontStyle: 'italic', color: this.props.app_theme?.theme.colors.text }}>Your card will be charged to ensure that it's valid.</Text>
<Text style={{ fontSize: 12, fontWeight: 'bold', textAlign: 'center', fontStyle: 'italic', color: this.props.app_theme?.theme.colors.text, marginBottom: 10 }}>Charged amount will be automatically refunded.</Text>
<View style={{ marginBottom: 5 }} />
<TouchableOpacity onPress={() => this.submitNewAddedCard()}
style={{ height: 50, marginBottom: 16, backgroundColor: Theme.colors.primary, justifyContent: 'center', alignItems: 'center', borderRadius: 5, marginHorizontal: 35 }}>

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

@ -6,12 +6,11 @@ import {
View,
Text,
Keyboard,
ScrollView,
TextInput,
Dimensions
ScrollView
} from 'react-native';
import Theme from '../../components/theme.style.js';
import REQUEST_POST_PAY from '../../components/api/postpayapi';
import DB from '../../components/storage';
class PayatpumpPaymentSuccess extends React.Component {
@ -22,12 +21,15 @@ class PayatpumpPaymentSuccess extends React.Component {
state = {
email: null,
keyboardHeight: 0,
data: this.props.route?.params?.transactionData
data: this.props.route?.params?.transactionData,
transactionDetails: this.props.route?.params?.transactionDetails,
newDetails: this.props.route?.params?.newDetails.response,
loading: true
}
componentDidMount() {
this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow)
this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide)
this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow);
this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);
}
componentWillUnmount() {
@ -43,7 +45,19 @@ class PayatpumpPaymentSuccess extends React.Component {
this.setState({ keyboardHeight: 0 })
}
getPoints = () => {
let points = this.state.newDetails?.loyaltyPointsMessages[0].earnedRewardSummary || 0;
let totalPayment = parseInt(this.state.newDetails?.formattedTotal.slice(1));
if(points === 0 && (totalPayment >= 100)) {
const newPoints = totalPayment * .01;
return newPoints.toFixed(2);
} else {
return points;
}
}
render() {
console.log(this.state.newDetails)
return(
<SafeAreaView style={{ flex: 1 }}>
<ScrollView style={{ flex: 1 }}
@ -64,25 +78,30 @@ class PayatpumpPaymentSuccess extends React.Component {
</View>
<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>
<Text style={{ color: Theme.colors.white, textAlign: 'left', fontSize: 16 }} numberOfLines={1}>{this.state.newDetails?.posTransactionId}</Text>
</View>
</View>
<View style={{ backgroundColor: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.background : Theme.colors.white, marginHorizontal: 10, borderColor: this.props.app_theme?.theme.colors.text, borderWidth: 0.5, borderBottomRightRadius: 10, borderBottomLeftRadius: 10, padding: 3 }}>
<View style={{ flexDirection: 'row', backgroundColor: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.background : Theme.colors.white }}>
<Text style={{ flex: 1, color: this.props.app_theme?.theme.colors.text, fontSize: 18, paddingVertical: 5, fontWeight: 'bold', marginHorizontal: 13, textAlign: 'left' }}>Total Payment</Text>
<Text style={{ flex: 1, color: this.props.app_theme?.theme.colors.text, fontSize: 15, paddingVertical: 5, fontWeight: 'bold', marginHorizontal: 13, textAlign: 'right' }}>{`${'\u20B1'}${this.state.data?.totalPayment}`}</Text>
<Text style={{ flex: 1, color: this.props.app_theme?.theme.colors.text, fontSize: 15, paddingVertical: 5, marginHorizontal: 13, textAlign: 'left' }}>Subtotal</Text>
<Text style={{ flex: 1, color: this.props.app_theme?.theme.colors.text, fontSize: 15, paddingVertical: 5, marginHorizontal: 13, textAlign: 'right' }}>{this.state.newDetails?.formattedSubtotal}</Text>
</View>
<View style={{ flexDirection: 'row', backgroundColor: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.background : Theme.colors.white }}>
<Text style={{ flex: 1, color: this.props.app_theme?.theme.colors.text, fontSize: 15, paddingVertical: 5, marginHorizontal: 13, textAlign: 'left' }}>Discount</Text>
<Text style={{ flex: 1, color: this.props.app_theme?.theme.colors.text, fontSize: 15, paddingVertical: 5, marginHorizontal: 13, textAlign: 'right' }}>{this.state.newDetails?.formattedTotalDiscounts}</Text>
</View>
<View style={{ flexDirection: 'row', backgroundColor: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.background : Theme.colors.white }}>
<Text style={{ flex: 1, color: this.props.app_theme?.theme.colors.text, fontSize: 15, paddingVertical: 5, marginHorizontal: 13, textAlign: 'left' }}>Card Payment</Text>
<Text style={{ flex: 1, color: this.props.app_theme?.theme.colors.text, fontSize: 15, paddingVertical: 5, marginHorizontal: 13, textAlign: 'right' }}>{`${'\u20B1'}${this.state.data?.cardPayment}`}</Text>
</View>
<View style={{ flexDirection: 'row', backgroundColor: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.background : Theme.colors.white }}>
<Text style={{ flex: 1, color: this.props.app_theme?.theme.colors.text, fontSize: 15, paddingVertical: 5, marginHorizontal: 13, textAlign: 'left' }}>Points</Text>
<Text style={{ flex: 1, color: this.props.app_theme?.theme.colors.text, fontSize: 15, paddingVertical: 5, marginHorizontal: 13, textAlign: 'right' }}>{`${'\u20B1'}${0}`}</Text>
<Text style={{ flex: 1, color: this.props.app_theme?.theme.colors.text, fontSize: 15, paddingVertical: 5, marginHorizontal: 13, textAlign: 'right' }}>{this.state.newDetails?.formattedTotal}</Text>
</View>
<View style={{ flexDirection: 'row', backgroundColor: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.background : Theme.colors.white }}>
<Text style={{ flex: 1, color: this.props.app_theme?.theme.colors.text, fontSize: 15, paddingVertical: 5, marginHorizontal: 13, textAlign: 'left' }}>Earned Points</Text>
<Text style={{ flex: 1, color: this.props.app_theme?.theme.colors.text, fontSize: 15, paddingVertical: 5, marginHorizontal: 13, textAlign: 'right' }}>{`${'\u20B1'}${0}`}</Text>
<Text style={{ flex: 1, color: this.props.app_theme?.theme.colors.text, fontSize: 15, paddingVertical: 5, marginHorizontal: 13, textAlign: 'right' }}>{this.getPoints()}</Text>
</View>
<View style={{ flexDirection: 'row', backgroundColor: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.background : Theme.colors.white }}>
<Text style={{ flex: 1, color: this.props.app_theme?.theme.colors.text, fontSize: 18, paddingVertical: 5, fontWeight: 'bold', marginHorizontal: 13, textAlign: 'left' }}>Total Payment</Text>
<Text style={{ flex: 1, color: this.props.app_theme?.theme.colors.text, fontSize: 15, paddingVertical: 5, fontWeight: 'bold', marginHorizontal: 13, textAlign: 'right' }}>{this.state.newDetails?.formattedTotal}</Text>
</View>
</View>
</View>

2
app/screens/payatpump/pumppoinstdetails.js
View File

@ -17,7 +17,6 @@ import CustomHeader from '../../components/header.js';
import Theme from '../../components/theme.style.js';
import Assets from '../../components/assets.manager.js';
class PayatpumpPointsDetailsInput extends React.Component {
constructor(props) {
@ -41,7 +40,6 @@ class PayatpumpPointsDetailsInput extends React.Component {
}
onAmountChange = (value) => {
// console.log(Number(value).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'), this.state.selectedAmount)
this.setState({ displaySelectedAmount: value, selectedAmount: parseFloat(value) })
}

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

@ -19,6 +19,7 @@ import REQUEST_POST_PAY from '../../components/api/postpayapi';
import DB from '../../components/storage';
import Elements from '../../components/elements';
import CustomSafeArea from '../../components/safeArea.component';
import { returnIcon } from '../../utils/card.js';
class PayatpumpStationTransactionDetails extends React.Component {
@ -63,7 +64,6 @@ class PayatpumpStationTransactionDetails extends React.Component {
}
onSelectedPaymentCard = (payment_card) => {
console.log(payment_card);
this.setState({ selectedPaymentCard: payment_card })
}
@ -94,31 +94,22 @@ class PayatpumpStationTransactionDetails extends React.Component {
userPreference: {
receiptPreference: "doNotPrintReceipt", //printReceipt, doNotPrintReceipt
},
loyaltyPassthroughInformation: {
loyaltyInfo: []
},
fraudContext: {}
}
let USER_PROFILE = await DB.profile();
console.log(USER_PROFILE.data.auth_p97);
REQUEST_POST_PAY('postpay', 'post', {
token: USER_PROFILE.data.auth_p97,
language: 'en-US'
}, {}, params, async (res) => {
console.log(res);
if(res.success && res.response != undefined && res.response.status == "success") {
REQUEST_POST_PAY('getTransactionDetails/'+res.response.transaction_id, "get", {
REQUEST_POST_PAY('getTransactionStatusDetails', "get", {
token: USER_PROFILE.data.auth_p97,
language: 'en-US'
}, {}, {}, res2 => {
}, {transactionID: res.response.transaction_id}, {}, res2 => {
if(res2.success && res2.response != undefined) {
const data = {
res: res,
onSuccess: res2
}
onSuccess(data);
this.requestTransactionDetails(res, res2, onSuccess, onError)
} else {
onError(res2)
}
@ -133,6 +124,27 @@ class PayatpumpStationTransactionDetails extends React.Component {
})
}
requestTransactionDetails = async (res, res2, onSuccess, onError) => {
let USER_PROFILE = await DB.profile();
REQUEST_POST_PAY("getTransactionDetails/" + res2.response.transactionId, "get", {
token: USER_PROFILE.data.auth_p97,
language: 'en-US'
}, {}, {}, res3 => {
if(res3.success && res3.response !== undefined) {
if(res3.response.appChannel !== "ThirdPartyMobile" || res3.response.totalDiscount === 0) {
setTimeout(() => {
this.requestTransactionDetails(res, res2, onSuccess, onError);
}, 2000);
} else {
onSuccess({ res: res, onSuccess: res2, newDetails: res3 })
}
}
}, err => {
onError(err);
})
}
submitPayment = () => {
this.setState({ showModal: false, loading: true })
@ -141,7 +153,7 @@ class PayatpumpStationTransactionDetails extends React.Component {
if(onSuccess.res.success) {
let payment = { totalPayment: this.state.data[0]?.originalAmount.amount, cardPayment: this.state.data[0].originalAmount.amount, transactionId: onSuccess.res.response.transaction_id, storeName: this.state.storeName };
this.props.navigation.navigate('PayatpumpPaymentSuccess', { transactionData: payment })
this.props.navigation.navigate('PayatpumpPaymentSuccess', { transactionData: payment, transactionDetails: onSuccess.onSuccess, newDetails: onSuccess.newDetails })
} else {
setTimeout(() => {
Alert.alert('Error', "Failed to initiate transaction. Try again.")
@ -162,32 +174,31 @@ class PayatpumpStationTransactionDetails extends React.Component {
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 }]}>
<View style={[styles.modalView, { backgroundColor: this.props.app_theme?.theme.dark ? this.props.app_theme?.colors.border : Theme.colors.white }]}>
{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 }}>
<TouchableOpacity onPress={() => this.setState({ showModal: false })} style={{ width: 80, height: 30, backgroundColor: Theme.colors.primary, alignItems: 'center', justifyContent: 'center' }}>
<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' }}>
<Text style={{ fontSize: 16, fontWeight: 'bold', color: this.props.app_theme?.theme.colors.text, marginTop: 10, textAlign: 'center' }}>{`You are about to pay \n ${"\u20B1"} ${Theme.formatter.CRNCY(this.state.data[0]?.originalAmount.amount || 0.0)}?`}</Text>
<Text style={{ fontSize: 16, fontWeight: 'bold', color: this.props.app_theme?.theme.colors.text, marginTop: 30, marginBottom: 25, textAlign: 'center' }}>{`If your transaction is valid for\ndiscount, it will be reflected after final payment.`}</Text>
<View style={{ justifyContent: 'center', alignItems: 'center', flexDirection: 'row', marginBottom: 10 }}>
<TouchableOpacity
style={{ flex: 1, height: 30, backgroundColor: Theme.colors.primary, alignItems: 'center', justifyContent: 'center', borderRadius: 5, marginRight: 10, marginLeft: 20 }}
style={{ flex: 1, height: 30, backgroundColor: 'transparent', borderColor: Theme.colors.primary, borderWidth: 1, 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>
<Text style={{ fontSize: 18, color: Theme.colors.primary, textAlign: 'center' }}>Cancel</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 }}
style={{ flex: 1, height: 30, backgroundColor: Theme.colors.primary, 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>
<Text style={{ fontSize: 18, color: Theme.colors.white, textAlign: 'center' }}>Continue</Text>
</TouchableOpacity>
</View>
</View>
@ -252,10 +263,11 @@ class PayatpumpStationTransactionDetails extends React.Component {
return (
<View style={{flexDirection: 'row', paddingHorizontal: 30}}>
<View style={{flex: 1, alignItems: 'center', flexDirection: 'row', borderRightWidth: 1, borderColor: "rgba(0,0,0,.1)"}}>
<Image source={this.state.selectedPaymentCard ? returnIcon(this.state.selectedPaymentCard.brandName) : Assets.icons.stpunlabeled} style={{height: 40, width: 40, resizeMode: 'contain'}} />
{
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})}
@ -266,7 +278,7 @@ class PayatpumpStationTransactionDetails extends React.Component {
</View>
</>
:
<View style={{flex: 1, justifyContent: 'center'}}>
<View style={{flex: 1, justifyContent: 'center', marginLeft: 10}}>
<TouchableOpacity
onPress={() => this.props.navigation.navigate('PayatpumpPaymentList', { onSelectedPaymentCard: (payment_card) => this.onSelectedPaymentCard(payment_card), storeId: this.props.route?.params.storeId})}
>
@ -335,12 +347,12 @@ class PayatpumpStationTransactionDetails extends React.Component {
<Divider />
<View style={{flex: 1, justifyContent: 'flex-end'}}>
<View style={{flex: 1, justifyContent: 'flex-end', marginBottom: 15}}>
<View style={{ alignItems: 'center', justifyContent: 'center', marginBottom: 15 }}>
<Text style={{ color: "gray", fontSize: 15, fontWeight: 'bold' }}>Review the details before proceeding.</Text>
</View>
<TouchableOpacity onPress={() => this.setState({ showModal: true })} style={{ height: 50, backgroundColor: Theme.colors.primary, alignItems: 'center', justifyContent: 'center', borderRadius: 10, marginHorizontal: 16 }}>
<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>
@ -369,7 +381,6 @@ const styles = StyleSheet.create({
modalView: {
margin: 25,
backgroundColor: "white",
borderRadius: 15,
padding: 20,
alignItems: "center",
shadowColor: "#000",

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

@ -45,7 +45,7 @@ class VerificationWebview extends React.Component {
if(this.state.onBack) return;
this.setState({ onBack: true });
Alert.alert("Error", "Error adding card");
Alert.alert("Error", "Error in adding card.");
return this.props.navigation.goBack();
}
}

13
app/utils/card.js Normal file
View File

@ -0,0 +1,13 @@
import Assets from '../components/assets.manager';
export const returnIcon = (type) => {
if(type === "Visa") {
return Assets.icons.stpvisa;
} else if (type === "Mastercard") {
return Assets.icons.newMasterCard;
} else if (type === "JCB") {
return Assets.icons.stpjcb;
}
return Assets.icons.stpunlabeled
}