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/';
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()
}
componentWillUnmount() {
}
getFunding = async (defaultCard = null, enableDefaultCard = 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 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]
}
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 wallets = this.state.cards.filter(item => {
return item.userPaymentSourceId != this.state.deleteCard.userPaymentSourceId
})
.map(item => {
return item
})
this.setState({ cards: wallets, defaultCardIndex: -1, defaultSelectedCard: null, deleteCard: null })
} 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 () => {
if(this.state.defaultSelectedCard == null) {
this.setState({ showModal: true })
return
}
this.props.route?.params.onSelectedPaymentCard(this.state.defaultSelectedCard)
this.props.navigation.goBack()
}
onAddNewCard = (response, enableDefaultCard) => {
this.getFunding(response, enableDefaultCard)
}
renderDeleteErrorModal = () => {
return (
{}} style={styles.centeredView}>
{this.state.deleteCard != null ? (
<>
{'Are you sure you want to delete this card?'}
this.setState({ showModal: false })} style={{ width: 100, height: 30, backgroundColor: Theme.colors.primary, alignItems: 'center', justifyContent: 'center', borderRadius: 5, marginRight: 10 }}>
No
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 }}>
Yes
) : (
<>
{'Please Select Card...'}
this.setState({ showModal: false })} style={{ width: 80, height: 30, backgroundColor: Theme.colors.primary, alignItems: 'center', justifyContent: 'center', borderRadius: 5 }}>
Ok
)}
)
}
renderCardList = () => {
return (
index.toString()}
data={this.state.cards}
scrollEnabled={true}
showsVerticalScrollIndicator={false}
renderItem={({item, index}) => {
return (
this.setState({ defaultCardIndex: this.state.isShowSelectionCard ? -1 : this.state.defaultCardIndex == index ? -1 : index, defaultSelectedCard: this.state.defaultCardIndex == index ? null : item })} key={index} style={{ flex: 1, alignItems: 'center', justifyContent: 'center', flexDirection: 'row', backgroundColor: this.props.app_theme?.theme.colors.background, padding: 12 }}>
{`**** **** **** ${item.lastFour}`}
{this.state.defaultCardIndex == index && }
this.setState({ deleteCard: item, showModal: true })}
style={{ paddingVertical: 10 }}>
)
}}
numColumns={1}
/>
)
}
render() {
return (
this.props.navigation.goBack()}
back={true}
menu={false}
navigation={this.props.navigation}
/>
Enroll Card
{
this.setState({ })
this.props.navigation.navigate('PayatpumpPaymentMethod', { onAddNewCard: (newcard, enableDefaultCard) => this.onAddNewCard(newcard, enableDefaultCard)})
}}
style={{flexDirection: 'row', padding: 13}}>
Add New Card
Select preferred Card
{this.renderDeleteErrorModal()}
{this.renderCardList()}
{!this.state.isShowSelectionCard && (
this.submitPaymentCard()}
style={{ backgroundColor: Theme.colors.primary, padding: 15, borderRadius: 5, marginHorizontal: 25, marginBottom: 10 }}>
Confirm
)}
)
}
}
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
},
})