346 lines
15 KiB
JavaScript
346 lines
15 KiB
JavaScript
import * as React from 'react';
|
|
import { connect } from "react-redux";
|
|
import {
|
|
SafeAreaView,
|
|
TouchableOpacity,
|
|
View,
|
|
Text,
|
|
FlatList,
|
|
Image,
|
|
StyleSheet,
|
|
Modal
|
|
} from 'react-native';
|
|
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,
|
|
deleteCard: null,
|
|
loading: false,
|
|
isShowSelectionCard: this.props.route.params?.displaySelectionCard
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.getFunding()
|
|
}
|
|
|
|
getFunding = async (defaultCard = null, enableDefaultCard = false, setDefault = false) => {
|
|
this.setState({ loading: true })
|
|
const USER_PROFILE = await DB.profile()
|
|
REQUEST_POST_PAY('getFunding', 'post', {
|
|
token: USER_PROFILE.data.auth_p97
|
|
}, {}, {}, async (res) => {
|
|
this.setState({ loading: false })
|
|
if(res.success == undefined) {
|
|
setTimeout(() => {
|
|
Alert.alert('Error', res.Message)
|
|
}, 300)
|
|
} else {
|
|
if(res.success) {
|
|
let savedCard = await DB.get("pumpPaymentCards");
|
|
let selectedCard = JSON.parse(savedCard);
|
|
let wallets = res.response.wallets.map(item => {
|
|
let wallet = item.wallets.map(walletItem => {
|
|
let fundingProviderName = item.fundingProviderName
|
|
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];
|
|
|
|
if(setDefault) {
|
|
await DB.set(
|
|
"pumpPaymentCards",
|
|
JSON.stringify(selectedDefaultCard),
|
|
() => {},
|
|
() => {}
|
|
)
|
|
}
|
|
} else {
|
|
if(selectedCard && !setDefault) {
|
|
defaultIndex = mergedWallets.findIndex(item => item.userPaymentSourceId === selectedCard.userPaymentSourceId);
|
|
selectedDefaultCard = mergedWallets[defaultIndex];
|
|
}
|
|
}
|
|
|
|
this.setState({ cards: mergedWallets, defaultCardIndex: defaultIndex, defaultSelectedCard: selectedDefaultCard, deleteCard: null })
|
|
} else {
|
|
setTimeout(() => {
|
|
Alert.alert('Error', 'Failed to get fund. Try again.')
|
|
}, 300)
|
|
}
|
|
}
|
|
}, (error) => {
|
|
this.setState({ loading: false })
|
|
setTimeout(() => {
|
|
Alert.alert('Error', '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('Error', res.Message)
|
|
}, 300)
|
|
} else {
|
|
if(res.success) {
|
|
let defaultCardIndex = -1;
|
|
let defaultSelectedCard = null;
|
|
let wallets = this.state.cards.filter(item => {
|
|
return item.userPaymentSourceId != this.state.deleteCard.userPaymentSourceId
|
|
})
|
|
.map(item => {
|
|
return item
|
|
})
|
|
|
|
if(wallets.length > 0) {
|
|
defaultCardIndex = 0;
|
|
defaultSelectedCard = wallets[defaultCardIndex];
|
|
|
|
this.props.route?.params.onSelectedPaymentCard(defaultSelectedCard)
|
|
|
|
await DB.set(
|
|
"pumpPaymentCards",
|
|
JSON.stringify(defaultSelectedCard),
|
|
() => {},
|
|
() => {}
|
|
)
|
|
} else {
|
|
this.props.route?.params.onSelectedPaymentCard(null)
|
|
|
|
await DB.set(
|
|
"pumpPaymentCards",
|
|
JSON.stringify(null),
|
|
() => {},
|
|
() => {}
|
|
)
|
|
}
|
|
|
|
this.setState({ cards: wallets, defaultCardIndex: defaultCardIndex, defaultSelectedCard: defaultSelectedCard, deleteCard: null })
|
|
} else {
|
|
setTimeout(() => {
|
|
Alert.alert('Error', 'Failed to get fund. Try again.')
|
|
}, 300)
|
|
}
|
|
}
|
|
}, (error) => {
|
|
this.setState({ loading: false })
|
|
setTimeout(() => {
|
|
Alert.alert('Error', error)
|
|
}, 300)
|
|
})
|
|
}
|
|
|
|
submitPaymentCard = async (defaultSelectedCard) => {
|
|
if(defaultSelectedCard == null) {
|
|
this.setState({ showModal: true })
|
|
return
|
|
}
|
|
|
|
await DB.set(
|
|
"pumpPaymentCards",
|
|
JSON.stringify(defaultSelectedCard),
|
|
() => {
|
|
this.props.route?.params.onSelectedPaymentCard(defaultSelectedCard)
|
|
this.props.navigation.goBack()
|
|
},
|
|
() => {}
|
|
)
|
|
|
|
|
|
}
|
|
|
|
onAddNewCard = (response, enableDefaultCard, setDefault) => {
|
|
this.getFunding(response, enableDefaultCard, setDefault)
|
|
}
|
|
|
|
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.colors.border }]}>
|
|
{this.state.deleteCard != null ? (
|
|
<>
|
|
<Text style={{ fontSize: 18, color: this.props.app_theme?.theme.colors.text, marginVertical: 30, textAlign: 'center' }}>{'Are you sure you want to delete this card?'}</Text>
|
|
<View style={{ flexDirection: 'row' }}>
|
|
<TouchableOpacity onPress={() => this.setState({ showModal: false })} style={{ width: 100, height: 30, backgroundColor: Theme.colors.primary, alignItems: 'center', justifyContent: 'center', borderRadius: 5, marginRight: 10 }}>
|
|
<Text style={{ fontSize: 18, color: Theme.colors.white, textAlign: 'center' }}>No</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity onPress={() => this.deleteCard()} style={{ width: 100, height: 30, backgroundColor: Theme.colors.white, alignItems: 'center', justifyContent: 'center', borderRadius: 5, borderColor: Theme.colors.primary, borderWidth: 0.5, marginLeft: 10 }}>
|
|
<Text style={{ fontSize: 18, color: Theme.colors.primary, textAlign: 'center' }}>Yes</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Image source={Assets.icons.points_balance} style={{ width: 85, height: 85, resizeMode: 'contain' }} />
|
|
<Text style={{ fontSize: 18, color: this.props.app_theme?.theme.colors.text, marginVertical: 30 }}>{'Please Select Card...'}</Text>
|
|
<TouchableOpacity onPress={() => this.setState({ showModal: false })} style={{ width: 80, height: 30, backgroundColor: Theme.colors.primary, alignItems: 'center', justifyContent: 'center', borderRadius: 5 }}>
|
|
<Text style={{ fontSize: 18, color: Theme.colors.white, textAlign: 'center' }}>Ok</Text>
|
|
</TouchableOpacity>
|
|
</>
|
|
)}
|
|
</View>
|
|
</TouchableOpacity>
|
|
</Modal>
|
|
)
|
|
}
|
|
|
|
renderCardList = () => {
|
|
return (
|
|
<FlatList
|
|
keyExtractor={(item, 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'}}>
|
|
<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.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 }} />
|
|
<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.renderDeleteErrorModal()}
|
|
{this.renderCardList()}
|
|
|
|
<TouchableOpacity
|
|
onPress={() => this.props.navigation.navigate('PayatpumpPaymentMethod', { onAddNewCard: (newcard, enableDefaultCard) => this.onAddNewCard(newcard, enableDefaultCard)})}
|
|
style={{alignSelf: 'center'}}
|
|
>
|
|
<View style={{flexDirection: 'row', padding: 5}}>
|
|
<Icon.MaterialIcons
|
|
name="credit-card"
|
|
size={20}
|
|
color={Theme.colors.primary}
|
|
/>
|
|
<Text
|
|
style={{
|
|
fontFamily: 'Arial',
|
|
color: Theme.colors.primary,
|
|
marginLeft: 10,
|
|
fontSize: 16,
|
|
}}>
|
|
Add a Card
|
|
</Text>
|
|
</View>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</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",
|
|
borderRadius: 15,
|
|
padding: 20,
|
|
alignItems: "center",
|
|
shadowColor: "#000",
|
|
shadowOffset: {
|
|
width: 0,
|
|
height: 2
|
|
},
|
|
shadowOpacity: 0.25,
|
|
shadowRadius: 4,
|
|
elevation: 5
|
|
},
|
|
}) |