457 lines
19 KiB
JavaScript
457 lines
19 KiB
JavaScript
import * as React from 'react';
|
|
import { connect } from "react-redux";
|
|
import {
|
|
SafeAreaView,
|
|
TouchableOpacity,
|
|
View,
|
|
Text,
|
|
FlatList,
|
|
Image,
|
|
StyleSheet,
|
|
Alert,
|
|
Modal
|
|
} from 'react-native';
|
|
import { returnIcon } from '../../utils/card';
|
|
import REQUEST_POST_PAY from '../../components/api/postpayapi';
|
|
import Icon from '../../components/icons.js';
|
|
import CustomHeader from '../../components/header.js';
|
|
import Theme from '../../components/theme.style.js';
|
|
import Assets from '../../components/assets.manager.js';
|
|
import Elements from '../../components/elements.js';
|
|
import DB from '../../components/storage/';
|
|
import CustomSafeArea from '../../components/safeArea.component';
|
|
|
|
class PayatpumpPaymentList extends React.Component {
|
|
|
|
constructor(props) {
|
|
super(props)
|
|
}
|
|
|
|
state = {
|
|
cards: [],
|
|
defaultCardIndex: -1,
|
|
defaultSelectedCard: null,
|
|
showModal: false,
|
|
showCardAdded: false,
|
|
showCardDeleted: false,
|
|
deleteCard: null,
|
|
loading: false,
|
|
newlyAddedCard: null,
|
|
isShowSelectionCard: this.props.route.params?.displaySelectionCard
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.getFunding()
|
|
}
|
|
|
|
getFunding = async (defaultCard = null, enableDefaultCard = false, setDefault = false) => {
|
|
this.setState({ loading: true })
|
|
REQUEST_POST_PAY('getFunding', 'post', {}, {}, {}, async (res) => {
|
|
this.setState({ loading: false })
|
|
if(!res.status) {
|
|
Alert.alert("Information", '\n' + 'Failed to get fund. Try again.')
|
|
} else {
|
|
let savedCard = await DB.get("pumpPaymentCards");
|
|
let selectedCard = JSON.parse(savedCard);
|
|
let wallets = res.data.wallets.map(item => {
|
|
let wallet = item.wallets.map(walletItem => {
|
|
let fundingProviderName = item.fundingProviderName
|
|
return {...walletItem, fundingProviderName}
|
|
})
|
|
return wallet
|
|
})
|
|
|
|
var mergedWallets = [].concat.apply([], wallets)
|
|
let defaultIndex = -1;
|
|
let selectedDefaultCard = null
|
|
if(enableDefaultCard) {
|
|
defaultIndex = mergedWallets.findIndex(item => item.userPaymentSourceId === defaultCard.userPaymentSourceId);
|
|
selectedDefaultCard = mergedWallets[defaultIndex];
|
|
|
|
await DB.set(
|
|
"pumpPaymentCards",
|
|
JSON.stringify(selectedDefaultCard),
|
|
() => {},
|
|
() => {}
|
|
)
|
|
} else {
|
|
if(selectedCard && !setDefault) {
|
|
defaultIndex = mergedWallets.findIndex(item => item.userPaymentSourceId === selectedCard.userPaymentSourceId);
|
|
selectedDefaultCard = mergedWallets[defaultIndex];
|
|
}
|
|
}
|
|
|
|
this.setState({ cards: mergedWallets, defaultCardIndex: defaultIndex, defaultSelectedCard: selectedDefaultCard, deleteCard: null })
|
|
}
|
|
}, (error) => {
|
|
this.setState({ loading: false })
|
|
setTimeout(() => {
|
|
Alert.alert("Information", '\n' + 'Failed to get fund. Try again.')
|
|
}, 300)
|
|
})
|
|
}
|
|
|
|
deleteCard = async () => {
|
|
this.setState({ loading: true, showModal: false })
|
|
const USER_PROFILE = await DB.profile()
|
|
REQUEST_POST_PAY('deleteCreditCard', 'post', {
|
|
token: USER_PROFILE.data.auth_p97
|
|
}, {}, {
|
|
userPaymentSourceId: this.state.deleteCard.userPaymentSourceId
|
|
}, async (res) => {
|
|
this.setState({ loading: false })
|
|
if(res.success == undefined) {
|
|
setTimeout(() => {
|
|
Alert.alert("Information", '\n' + res.Message)
|
|
}, 300)
|
|
} else {
|
|
if(res.success) {
|
|
let selectedCard = await DB.get("pumpPaymentCards");
|
|
let defaultCardIndex = -1;
|
|
let defaultSelectedCard = null;
|
|
let wallets = this.state.cards.filter(item => {
|
|
return item.userPaymentSourceId != this.state.deleteCard.userPaymentSourceId
|
|
})
|
|
.map(item => {
|
|
return item
|
|
})
|
|
|
|
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 && this.props.route?.params.onSelectedPaymentCard(defaultSelectedCard)
|
|
|
|
await DB.set(
|
|
"pumpPaymentCards",
|
|
JSON.stringify(defaultSelectedCard),
|
|
() => {},
|
|
() => {}
|
|
)
|
|
}
|
|
} else {
|
|
this.props.route?.params.onSelectedPaymentCard && this.props.route?.params.onSelectedPaymentCard(null)
|
|
|
|
await DB.set(
|
|
"pumpPaymentCards",
|
|
JSON.stringify(null),
|
|
() => {},
|
|
() => {}
|
|
)
|
|
}
|
|
|
|
this.setState({ showCardDeleted: true, cards: wallets, defaultCardIndex: defaultCardIndex, defaultSelectedCard: defaultSelectedCard, deleteCard: null })
|
|
} else {
|
|
setTimeout(() => {
|
|
Alert.alert("Information", '\n' + 'Failed to get fund. Try again.')
|
|
}, 300)
|
|
}
|
|
}
|
|
}, (error) => {
|
|
this.setState({ loading: false })
|
|
setTimeout(() => {
|
|
Alert.alert("Information", '\n' + error)
|
|
}, 300)
|
|
})
|
|
}
|
|
|
|
setDefaultCard = async (defaultSelectedCard) => {
|
|
let USER_PROFILE = await DB.profile();
|
|
|
|
let data = {
|
|
"fundingProviderName": "p97token",
|
|
"userPaymentSourceId": defaultSelectedCard.userPaymentSourceId
|
|
}
|
|
|
|
REQUEST_POST_PAY("postPayDefaultCard", "post", {
|
|
token: USER_PROFILE.data.auth_p97
|
|
}, {}, data, (res) => {
|
|
}, (err) => {
|
|
})
|
|
}
|
|
|
|
submitPaymentCard = async (defaultSelectedCard) => {
|
|
// this.setDefaultCard(defaultSelectedCard);
|
|
if(defaultSelectedCard == null) {
|
|
this.setState({ showModal: true })
|
|
return
|
|
}
|
|
|
|
await DB.set(
|
|
"pumpPaymentCards",
|
|
JSON.stringify(defaultSelectedCard),
|
|
() => {
|
|
this.props.route?.params.onSelectedPaymentCard && this.props.route?.params.onSelectedPaymentCard(defaultSelectedCard)
|
|
this.props.navigation.goBack();
|
|
},
|
|
() => {}
|
|
)
|
|
}
|
|
|
|
onSetLoading = () => {
|
|
this.setState({ loading: true })
|
|
}
|
|
|
|
onAddNewCard = (response, enableDefaultCard) => {
|
|
this.setState({showCardAdded: true, newlyAddedCard: response});
|
|
this.getFunding(response, enableDefaultCard);
|
|
}
|
|
|
|
returnCardName = (card) => {
|
|
let newCard = card.cardIssuerId;
|
|
if(newCard.includes("-")) {
|
|
newCard = newCard.split("-")[0];
|
|
}
|
|
|
|
if(newCard === "Mastercard") {
|
|
newCard = "MASTER"
|
|
}
|
|
|
|
return newCard.toUpperCase();
|
|
}
|
|
|
|
renderDeleteErrorModal = () => {
|
|
return (
|
|
<Modal
|
|
animationType="none"
|
|
transparent={true}
|
|
visible={this.state.showModal}>
|
|
<TouchableOpacity activeOpacity={1} onPress={() => {}} style={styles.centeredView}>
|
|
<View style={[styles.modalView, { backgroundColor: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.border : Theme.colors.white }]}>
|
|
<Text style={{fontSize: 20, color: this.props.app_theme?.theme.colors.text, marginBottom: 18, fontWeight: 'bold'}}>Confirmation</Text>
|
|
<Text style={{textAlign: 'center', fontSize: 18, color: this.props.app_theme?.theme.colors.text, marginBottom: 37}}>Are you sure you want to delete{'\n'}this card?</Text>
|
|
<View style={{flexDirection: 'row'}}>
|
|
<TouchableOpacity onPress={() => this.setState({ showModal: false })} style={{
|
|
flex: 1,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
paddingVertical: 7,
|
|
marginRight: 6,
|
|
borderWidth: 1,
|
|
borderColor: Theme.colors.primary,
|
|
borderRadius: 5
|
|
}}>
|
|
<Text style={{
|
|
fontSize: 17,
|
|
color: Theme.colors.primary
|
|
}}>No</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity onPress={() => this.deleteCard()} style={{
|
|
flex: 1,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
marginLeft: 6,
|
|
paddingVertical: 7,
|
|
borderWidth: 1,
|
|
borderColor: Theme.colors.primary,
|
|
backgroundColor: Theme.colors.primary,
|
|
borderRadius: 5
|
|
}}>
|
|
<Text style={{
|
|
fontSize: 17,
|
|
color: Theme.colors.white
|
|
}}>Yes</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</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}}>{this.returnCardName(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
|
|
keyExtractor={(_, index) => index.toString()}
|
|
data={this.state.cards}
|
|
scrollEnabled={true}
|
|
showsVerticalScrollIndicator={false}
|
|
style={this.state.cards.length === 0 && {flex: 1}}
|
|
contentContainerStyle={this.state.cards.length === 0 && {flex: 1}}
|
|
ListEmptyComponent={() => (
|
|
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
|
|
<Image source={Assets.icons.empty_card} style={{height: 80, marginBottom: 10, resizeMode: 'contain'}}/>
|
|
<Text style={{color: Theme.colors.gray, fontSize: 15}}>Empty</Text>
|
|
</View>
|
|
)}
|
|
renderItem={({item, index}) => {
|
|
return (
|
|
<View style={{ flex: 1, flexDirection: 'row', marginLeft: 15 }}>
|
|
<TouchableOpacity activeOpacity={0.5} onPress={() => {
|
|
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 ? Theme.colors.primary : "gray", borderWidth: 2, width: 15, height: 15, borderRadius: 7.5, marginRight: 10, paddingHorizontal: 2, paddingVertical: 2}}>
|
|
{this.state.defaultCardIndex == index && <View style={{flex:1, borderRadius: 10, backgroundColor: Theme.colors.primary}} /> }
|
|
</View>
|
|
<View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
|
|
<Image source={returnIcon(item.cardIssuerId)} 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>}
|
|
</View>
|
|
</View>
|
|
<View style={{ borderRadius: 100, alignItems: 'center', backgroundColor: 'white', flexDirection: 'row', justifyContent: 'flex-end' }}>
|
|
<TouchableOpacity onPress={() => this.setState({ deleteCard: item, showModal: true })}
|
|
style={{ paddingVertical: 5 }}>
|
|
<Icon.EvilIcons name={"trash"} size={40} color={Theme.colors.primaryDark} />
|
|
</TouchableOpacity>
|
|
</View>
|
|
</TouchableOpacity>
|
|
</View>
|
|
)
|
|
}}
|
|
numColumns={1}
|
|
/>
|
|
)
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<CustomSafeArea>
|
|
<CustomHeader
|
|
title={'Payment List'}
|
|
onBackPress={() => this.props.navigation.goBack()}
|
|
back={true}
|
|
menu={false}
|
|
navigation={this.props.navigation}
|
|
/>
|
|
<Elements.loaderView
|
|
title="Validating"
|
|
message="Please wait..."
|
|
isDarkMode={this.props.app_theme?.theme.dark}
|
|
backgroundColor={this.props.app_theme?.theme.colors.border}
|
|
color={this.props.app_theme?.theme.colors.text}
|
|
visible={this.state.loading} />
|
|
<View style={{ flex: 1 }}>
|
|
{this.renderCardList()}
|
|
|
|
<TouchableOpacity
|
|
onPress={() => this.props.navigation.navigate('PayatpumpPaymentMethod', { onSetLoading: () => this.onSetLoading(), onAddNewCard: (newcard, enableDefaultCard) => this.onAddNewCard(newcard, enableDefaultCard)})}
|
|
style={{alignSelf: 'center'}}
|
|
>
|
|
<View style={{flexDirection: 'row', padding: 5}}>
|
|
<Icon.MaterialIcons
|
|
name="credit-card"
|
|
size={20}
|
|
color={Theme.colors.primary}
|
|
/>
|
|
<Text
|
|
style={{
|
|
fontFamily: 'Arial',
|
|
color: Theme.colors.primary,
|
|
marginLeft: 10,
|
|
marginBottom: 10,
|
|
fontSize: 16,
|
|
}}>
|
|
Add a Card
|
|
</Text>
|
|
</View>
|
|
</TouchableOpacity>
|
|
</View>
|
|
{this.renderCardAdded()}
|
|
{this.renderCardDeleted()}
|
|
{this.renderDeleteErrorModal()}
|
|
</CustomSafeArea>
|
|
)
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = (state) => {
|
|
return {
|
|
app_theme: state.appThemeReducer.theme
|
|
}
|
|
}
|
|
|
|
export default connect(mapStateToProps, null)(PayatpumpPaymentList)
|
|
|
|
|
|
const styles = StyleSheet.create({
|
|
centeredView: {
|
|
flex: 1,
|
|
justifyContent: "center",
|
|
backgroundColor: '#00000090',
|
|
},
|
|
modalView: {
|
|
margin: 25,
|
|
backgroundColor: "white",
|
|
paddingHorizontal: 20,
|
|
paddingVertical: 30,
|
|
alignItems: "center",
|
|
shadowColor: "#000",
|
|
shadowOffset: {
|
|
width: 0,
|
|
height: 2
|
|
},
|
|
shadowOpacity: 0.25,
|
|
shadowRadius: 4,
|
|
elevation: 5
|
|
},
|
|
}) |