updates

app/components/api/endpoints.js

@@ -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,

app/components/api/postpayapi.js

@@ -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-latitude': location.latitude.toString(),
-                'x-p97-longitude': location.longitude,
+                '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()}`
             }
             

app/components/assets.manager.js

@@ -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 = {

app/components/drawer.js

@@ -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 => {

app/components/elements.js

@@ -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,6 +783,11 @@ const customAlert = function(props) {
         borderRadius: 10,
         alignItems: 'center'
       }}>
+        {
+          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>
 
@@ -789,6 +795,8 @@ const customAlert = function(props) {
                 { !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>

app/components/header/guest.js

@@ -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'}}>

app/components/storage/index.js

@@ -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) {

app/redux/reducers/AlertReducer.js

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

app/screens/account/activate/otp.js

@@ -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){

app/screens/account/index.js

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

app/screens/login/apply/details.js

@@ -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}} />

app/screens/login/apply/form.js

@@ -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){

app/screens/login/apply/otp.js

@@ -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)

app/screens/login/index.js

@@ -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>
             

app/screens/main/tab.js

@@ -1,10 +1,12 @@
-import React, {useEffect} from 'react';
+import React from 'react';
-import { Platform, TouchableOpacity, Text } from 'react-native';
+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 (
-    <TouchableOpacity onPress={() => navigation.navigation.navigate('Payatpump')}
+      <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={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>

app/screens/myprofile/profile/edit.js

@@ -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} 

app/screens/myprofile/profile/profile.js

@@ -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>

app/screens/myprofile/transaction/transaction.js

@@ -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 { ScrollView, Linking, View, Text, RefreshControl } from 'react-native';
-import {useNetInfo} from "@react-native-community/netinfo";
-// import NetInfo from "@react-native-community/netinfo";
 import NetInfo from "../../../components/netstatus";
-import CustomHeader from '../../../components/header.js';
-import Assets from '../../../components/assets.manager.js';
 import Theme from '../../../components/theme.style.js';
-import 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 = () => {

app/screens/payatpump/fragments/stationdetailspanel.js

@@ -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 }}>
+        <View style={{ marginTop: 10, marginBottom: 15 }}>
-          <Text style={{ color: props.app_theme?.theme.colors.text, fontSize: 23, textAlign: 'center' }}>Are you sure you want to cancel the transaction?</Text>
+          <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>
-        <View style={{ flex: 1, alignItems: 'center' }}>
+        <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 }}>
+        <View style={{ alignItems: 'center', padding: 5, marginBottom: 15 }}>
-          <Text style={{ fontSize: 19, textAlign: 'center', color: props.app_theme?.theme.colors.text }}>{message}</Text>
+          <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 }}>
+          style={{ paddingVertical: 5, width: 120, backgroundColor: Theme.colors.primary, justifyContent: 'center', alignItems: 'center', borderRadius: 5 }}>
-            <Text style={{ fontSize: 18, color: Theme.colors.white, textAlign: 'center' }}>Ok</Text>
+            <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={() => {
+              <TouchableOpacity onPress={() => {
                   setInitiateProceed(true)
-                console.log(item);
                   setSelectedPump(item)
-              }} key={index} style={{ alignItems: 'center', justifyContent: 'center', margin: 20 }}>
+                }} 
-                {(currentSelectedPump != null && currentSelectedPump.pumpNumber == item.pumpNumber) ? (
+                style={{marginHorizontal: 15, marginBottom: 10, borderColor: (currentSelectedPump != null && currentSelectedPump.pumpNumber == item.pumpNumber) ? Theme.colors.primary : "transparent", borderWidth: 4, borderRadius: 15}}>
-                  <View style={styles.selectedPumpBorder}>
+                <Image source={available ? Assets.pumps.plain_pump : Assets.pumps.plain_pump_grey} style={{width: 80, height: 80, resizeMode: 'contain' }} />
-                    <Image source={available ? Assets.pumps.plain_pump : Assets.pumps.plain_pump_grey} style={{padding: 40, width: 50, height: 50, 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>
-                ) : (
-                  <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>
+              
             )
           }}
           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>
       </>
     )

app/screens/payatpump/pumppaymentlist.js

@@ -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),
                         () => {},
                         () => {}
                     )
-                    }
                 } 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,10 +127,12 @@ class PayatpumpPaymentList extends React.Component {
                 })
 
                 if(wallets.length > 0) {
+                    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",
@@ -135,8 +140,9 @@ class PayatpumpPaymentList extends React.Component {
                             () => {},
                             () => {}
                         )
+                    }
                 } 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.route?.params.onSelectedPaymentCard && this.props.route?.params.onSelectedPaymentCard(defaultSelectedCard)
-                this.props.navigation.goBack()
+                this.props.navigation.goBack();
             },
             () => {}
         )
@@ -180,8 +186,10 @@ class PayatpumpPaymentList extends React.Component {
         
     }
 
-    onAddNewCard = (response, enableDefaultCard, setDefault) => {
+    onAddNewCard = (response, enableDefaultCard) => {
-        this.getFunding(response, enableDefaultCard, setDefault)
+        console.log(response);
+        this.setState({showCardAdded: true, newlyAddedCard: response});
+        this.getFunding(response, enableDefaultCard);
     }
 
     renderDeleteErrorModal = () => {
@@ -219,6 +227,72 @@ class PayatpumpPaymentList extends React.Component {
         )
     }
 
+    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>
         )
     }

app/screens/payatpump/pumppaymentmethod.js

@@ -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") {
+        console.log(cardnumber.length);
-            Alert.alert('Error', `${cardValidator.number(cardnumber).card.niceType} is not available. Please use different card type.`)
+
+        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) {
+        if(cardValidator.number(cardnumber)?.card?.type === "jcb") {
-            Alert.alert('Error', `Invalid card number. Please use different card type.`)
+            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}
+                    value={this.state.enableDefaultCard}
-                    trackColor={{true: "#6887ed"}}
+                    trackColor={this.state.enableDefaultCard && {true: "#6887ed"}}
-                    thumbColor={this.state.setPrimary && "blue"}
+                    thumbColor={this.state.enableDefaultCard && "blue"}
-                    onChange={() => this.setState({ setPrimary: !this.state.setPrimary })}
+                    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: 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: 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, 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 }}>

app/screens/payatpump/pumppaymentsuccess.js

@@ -6,12 +6,11 @@ import {
     View, 
     Text,
     Keyboard,
-    ScrollView,
+    ScrollView
-    TextInput,
-    Dimensions
 } 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.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow);
-        this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide)
+        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, marginHorizontal: 13, textAlign: 'left' }}>Subtotal</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: '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>
+                                <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' }}>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>
                             </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>

app/screens/payatpump/pumppoinstdetails.js

@@ -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) })
     }
 

app/screens/payatpump/pumpstationtransactiondetails.js

@@ -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 = {
+                        this.requestTransactionDetails(res, res2, onSuccess, onError)
-                            res: res, 
-                            onSuccess: res2
-                        }
-
-                        onSuccess(data);
                     } 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' }}>
-                            {
+                            <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>
-                                this.state.data && this.state.data.length > 0 &&
+                            <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>
-                                    <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', marginBottom: 10 }}>
-                            }
-                            <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 }}
+                                    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,7 +347,7 @@ 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>
@@ -369,7 +381,6 @@ const styles = StyleSheet.create({
     modalView: {
         margin: 25,
         backgroundColor: "white",
-        borderRadius: 15,
         padding: 20,
         alignItems: "center",
         shadowColor: "#000",

app/screens/payatpump/verificationWebview.js

@@ -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();
     }
   }

app/utils/card.js

@@ -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
+}