299 lines
14 KiB
JavaScript
299 lines
14 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/';
|
|
|
|
|
|
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 (
|
|
<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}
|
|
renderItem={({item, index}) => {
|
|
return (
|
|
<View style={{ flex: 1, flexDirection: 'row', borderBottomColor: Theme.colors.darkGray, borderBottomWidth: 1, backgroundColor: this.props.app_theme?.theme.colors.background }}>
|
|
<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 })} key={index} style={{ flex: 1, alignItems: 'center', justifyContent: 'center', flexDirection: 'row', backgroundColor: this.props.app_theme?.theme.colors.background, padding: 12 }}>
|
|
<View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
|
|
<Image source={{ uri: item.imageUrl }} style={{ width: 40, height: 40, resizeMode: 'contain', marginRight: 16 }} />
|
|
<Text style={{ fontSize: 18, color: this.props.app_theme?.theme.colors.text, fontWeight: 'bold', textAlign: 'left' }}>{`**** **** **** ${item.lastFour}`}</Text>
|
|
</View>
|
|
<View style={{ flex: 0.2, alignItems: 'center', flexDirection: 'row', justifyContent: 'flex-end' }}>
|
|
{this.state.defaultCardIndex == index && <Icon.AntDesign name={"checkcircle"} size={18} color={'green'} />}
|
|
<TouchableOpacity onPress={() => this.setState({ deleteCard: item, showModal: true })}
|
|
style={{ paddingVertical: 10 }}>
|
|
<Icon.EvilIcons name={"trash"} size={40} color={Theme.colors.primaryDark} />
|
|
</TouchableOpacity>
|
|
</View>
|
|
</TouchableOpacity>
|
|
</View>
|
|
)
|
|
}}
|
|
numColumns={1}
|
|
/>
|
|
)
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<SafeAreaView style={{ flex: 1 }}>
|
|
<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 }}>
|
|
<View style={{flexDirection: 'row', padding: 13, backgroundColor: Theme.colors.darkerGray}}>
|
|
<View style={{flex: 1}}>
|
|
<Text style={{fontFamily: 'Arial', fontSize: 16, color: '#fff'}}>Enroll Card</Text>
|
|
</View>
|
|
<View style={{flex: 1, textAlign: 'right', alignItems: 'flex-end'}}>
|
|
<Text style={{fontFamily: 'Arial', fontSize: 16, color: '#fff'}}></Text>
|
|
</View>
|
|
</View>
|
|
<TouchableOpacity
|
|
onPress={() => {
|
|
this.setState({ })
|
|
this.props.navigation.navigate('PayatpumpPaymentMethod', { onAddNewCard: (newcard, enableDefaultCard) => this.onAddNewCard(newcard, enableDefaultCard)})
|
|
}}
|
|
style={{flexDirection: 'row', padding: 13}}>
|
|
<View style={{flex: 0}}>
|
|
<Image source={Assets.icons.topup} style={{ width: 44, height: 44, resizeMode: 'contain' }} />
|
|
</View>
|
|
<View style={{flex: 1, justifyContent: 'center'}}>
|
|
<Text style={{ textAlign: 'left', fontFamily: 'Arial', fontSize: 20, fontWeight: 'bold', color: this.props.app_theme?.theme.colors.text, padding: 10 }}>Add New Card</Text>
|
|
</View>
|
|
</TouchableOpacity>
|
|
<View style={{flexDirection: 'row', padding: 13, backgroundColor: Theme.colors.darkerGray}}>
|
|
<View style={{flex: 1}}>
|
|
<Text style={{fontFamily: 'Arial', fontSize: 16, color: '#fff'}}>Select preferred Card</Text>
|
|
</View>
|
|
<View style={{flex: 1, textAlign: 'right', alignItems: 'flex-end'}}>
|
|
<Text style={{fontFamily: 'Arial', fontSize: 16, color: '#fff'}}></Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
<View style={{ flex: 3 }}>
|
|
{this.renderDeleteErrorModal()}
|
|
{this.renderCardList()}
|
|
</View>
|
|
{!this.state.isShowSelectionCard && (
|
|
<View>
|
|
<TouchableOpacity
|
|
onPress={() => this.submitPaymentCard()}
|
|
style={{ backgroundColor: Theme.colors.primary, padding: 15, borderRadius: 5, marginHorizontal: 25, marginBottom: 10 }}>
|
|
<Text style={{ color: Theme.colors.white, fontSize: 20, fontWeight: 'bold', textAlign: 'center' }}>Confirm</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
)}
|
|
</SafeAreaView>
|
|
)
|
|
}
|
|
}
|
|
|
|
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
|
|
},
|
|
}) |