217 lines
9.4 KiB
JavaScript
217 lines
9.4 KiB
JavaScript
|
|
import * as React from 'react';
|
|
import { connect } from "react-redux";
|
|
import {
|
|
SafeAreaView,
|
|
TouchableOpacity,
|
|
View,
|
|
Text,
|
|
FlatList,
|
|
Alert,
|
|
StyleSheet,
|
|
Modal,
|
|
Image
|
|
} from 'react-native';
|
|
import { Input } from 'react-native-elements';
|
|
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) {
|
|
super(props)
|
|
}
|
|
|
|
state = {
|
|
displaySelectedAmount: "",
|
|
selectedAmount: 0,
|
|
focus: false,
|
|
showModal: false,
|
|
balance: this.props.route.params?.totalPointsBalance
|
|
}
|
|
|
|
componentDidMount() {
|
|
console.log(this.props)
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
|
|
}
|
|
|
|
onAmountChange = (value) => {
|
|
this.setState({ displaySelectedAmount: value, selectedAmount: parseFloat(value) })
|
|
}
|
|
|
|
renderErrorModal = () => {
|
|
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.selectedAmount == 0 ?
|
|
<>
|
|
<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 add Points...'}</Text>
|
|
<TouchableOpacity onPress={() => this.setState({ showModal: false, selectedAmount: 0 })} 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 style={{ alignItems: 'center', justifyContent: 'center' }}>
|
|
<Text style={{ fontSize: 18, color: this.props.app_theme?.theme.colors.text, marginVertical: 30, textAlign: 'center' }}>{`Are you sure you want to redeem ${"\u20B1"}${parseFloat(this.state.selectedAmount).toFixed(2)}?`}</Text>
|
|
<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 }}
|
|
onPress={() => {
|
|
this.setState({ showModal: false })
|
|
}}>
|
|
<Text style={{ fontSize: 18, color: Theme.colors.white, textAlign: 'center' }}>No</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 }}
|
|
onPress={() => {
|
|
this.setState({ showModal: false })
|
|
this.props.route.params.onSelectedPointsAmount(this.state.selectedAmount)
|
|
this.props.navigation.goBack()
|
|
}}>
|
|
<Text style={{ fontSize: 18, color: Theme.colors.primary, textAlign: 'center' }}>Yes</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
}
|
|
</View>
|
|
</TouchableOpacity>
|
|
</Modal>
|
|
)
|
|
}
|
|
|
|
renderSelectAmount = () => {
|
|
let amounts = ['50', '100', '300', '500']
|
|
return (
|
|
<>
|
|
<View style={{ flex: 0.3, justifyContent: 'center' }}>
|
|
<Text style={{ marginLeft: 16, fontSize: 21, fontWeight: 'bold', color: this.props.app_theme?.theme.colors.text }}>Select default value</Text>
|
|
</View>
|
|
<View style={{ flex: 1, justifyContent: 'center' }}>
|
|
<FlatList
|
|
keyExtractor={(item, index) => index.toString()}
|
|
data={amounts}
|
|
scrollEnabled={false}
|
|
showsVerticalScrollIndicator={false}
|
|
renderItem={({item, index}) => {
|
|
return (
|
|
<View style={{ flex: 1 }}>
|
|
<TouchableOpacity onPress={() => this.onAmountChange(item)} key={index} style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: Theme.colors.white, padding: 10, margin: 8, borderColor: Theme.colors.primary, borderWidth: 2, borderRadius: 5 }}>
|
|
<Text style={{ fontSize: 30, color: Theme.colors.primary, fontWeight: 'bold', textAlign: 'center' }}>{item}</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
)
|
|
}}
|
|
numColumns={2}
|
|
/>
|
|
</View>
|
|
</>
|
|
)
|
|
}
|
|
|
|
renderDisplayAmountSelected = () => {
|
|
return (
|
|
<View style={{ flex: 2 }}>
|
|
<Text style={{ padding: 18, fontSize: 20, color: this.props.app_theme?.theme.colors.text }}>Or enter desired value to redeem.</Text>
|
|
<Input
|
|
keyboardType="numeric"
|
|
returnKeyType={'done'}
|
|
placeholder="Enter points value here"
|
|
value={this.state.displaySelectedAmount}
|
|
onFocus={() => this.setState({ focus: true })}
|
|
onChangeText={(value) => this.onAmountChange(value)}
|
|
containerStyle={{padding: 0}}
|
|
inputContainerStyle={{ padding: 0, marginHorizontal: 20, borderBottomWidth: this.state.focus ? 1.75 : 1, borderColor: this.state.focus ? Theme.colors.accent : "gray" }}
|
|
inputStyle={{ padding: 0, textAlign: 'center', fontSize: 18, fontWeight: 'bold', color: this.props.app_theme?.theme.colors.text }}
|
|
/>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
renderSubmitSelectedPoints = () => {
|
|
return (
|
|
<View style={{ flex: 0, justifyContent: 'center' }}>
|
|
<Text style={{ flex: 0, padding: 8, textAlign: 'center', color: Theme.colors.primary, fontStyle: 'italic' }}>Ensure correct amount before you proceed.</Text>
|
|
<View style={{ flex: 0, alignItems: 'center', justifyContent: 'center', flexDirection: 'row' }}>
|
|
<TouchableOpacity style={{ flex: 1, padding: 15, backgroundColor: Theme.colors.primary, alignSelf: 'flex-end', marginHorizontal: 30, marginBottom: 10, borderRadius: 5 }} onPress={() => this.submitPoints()}>
|
|
<Text style={{ textAlign: 'center', fontSize: 23, color: Theme.colors.white, fontWeight: 'bold' }}>Confirm</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
submitPoints = () => {
|
|
if(this.state.selectedAmount > parseFloat(this.state.balance)) {
|
|
Alert.alert(
|
|
'Error',
|
|
'The desired amount of points is greater than the remaining points balance.',
|
|
[
|
|
{
|
|
text: 'Ok',
|
|
style: 'cancel',
|
|
}
|
|
],
|
|
{cancelable: true},
|
|
);
|
|
return
|
|
}
|
|
this.setState({ showModal: true })
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<SafeAreaView style={{ flex: 1 }}>
|
|
<CustomHeader
|
|
title={`${"3500.00"}` + '\n' + "Points Balance"}
|
|
onBackPress={() => this.props.navigation.goBack()}
|
|
back={true}
|
|
menu={false}
|
|
navigation={this.props.navigation}
|
|
/>
|
|
{this.renderErrorModal()}
|
|
{this.renderSelectAmount()}
|
|
{this.renderDisplayAmountSelected()}
|
|
{this.renderSubmitSelectedPoints()}
|
|
</SafeAreaView>
|
|
)
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = (state) => {
|
|
return {
|
|
app_theme: state.appThemeReducer.theme
|
|
}
|
|
}
|
|
|
|
export default connect(mapStateToProps, null)(PayatpumpPointsDetailsInput)
|
|
|
|
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
|
|
},
|
|
}) |