126 lines
8.0 KiB
JavaScript
126 lines
8.0 KiB
JavaScript
import * as React from 'react';
|
|
import { connect } from "react-redux";
|
|
import {
|
|
SafeAreaView,
|
|
TouchableOpacity,
|
|
View,
|
|
Text,
|
|
Keyboard,
|
|
ScrollView,
|
|
TextInput,
|
|
Dimensions
|
|
} from 'react-native';
|
|
import Theme from '../../components/theme.style.js';
|
|
|
|
|
|
class PayatpumpPaymentSuccess extends React.Component {
|
|
|
|
constructor(props) {
|
|
super(props)
|
|
}
|
|
|
|
state = {
|
|
email: null,
|
|
keyboardHeight: 0,
|
|
data: this.props.route?.params?.transactionData
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow)
|
|
this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide)
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
this.keyboardDidShowListener.remove()
|
|
this.keyboardDidHideListener.remove()
|
|
}
|
|
|
|
_keyboardDidShow = (value) => {
|
|
this.setState({ keyboardHeight: value.endCoordinates.height - 120 })
|
|
}
|
|
|
|
_keyboardDidHide = () => {
|
|
this.setState({ keyboardHeight: 0 })
|
|
}
|
|
|
|
render() {
|
|
return(
|
|
<SafeAreaView style={{ flex: 1 }}>
|
|
<View>
|
|
<View style={{flexDirection: 'row', height: this.props.height ? this.props.height : 55, padding: 5, backgroundColor: Theme.colors.primary, top: Platform.OS =='ios' && this.props.top ? this.props.top : 0}}>
|
|
<View style={{flex:3, justifyContent: 'center'}}>
|
|
<Text style={{textAlign:'center', fontSize: 17, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : '#fff'}}></Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
<ScrollView style={{ flex: 1 }}
|
|
contentContainerStyle={{ height: "100%" }}
|
|
contentOffset={{ x: 0, y: this.state.keyboardHeight }}
|
|
keyboardDismissMode='on-drag'>
|
|
<View style={{ flex: 0.2, justifyContent: 'center', alignItems: 'center' }}>
|
|
<Text style={{ color: this.props.app_theme?.theme.colors.text, fontSize: 25, textAlign: 'center' }}>{"Your transaction is successful!" + "\n" + "Payment is credited to"}</Text>
|
|
</View>
|
|
<View style={{ flex: 0.2, justifyContent: 'center', alignItems: 'center' }}>
|
|
<Text style={{ color: Theme.colors.primary, fontSize: 35, textAlign: 'center' }}>{`${this.state.data.storeName}`}</Text>
|
|
</View>
|
|
<View style={{ flex: 1 }}>
|
|
<View style={{ flex: 0.1, flexDirection: 'row', backgroundColor: Theme.colors.primary, padding: 15, marginHorizontal: 10, borderTopRightRadius: 10, borderTopLeftRadius: 10 }}>
|
|
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'flex-start', marginRight: 16 }}>
|
|
<Text style={{ color: Theme.colors.white, textAlign: 'left', fontSize: 16 }}>Transaction Date</Text>
|
|
<Text style={{ color: Theme.colors.white, textAlign: 'left', fontSize: 16 }}>07 Oct 2020, 12:00 PM</Text>
|
|
</View>
|
|
<View style={{ flex: 0.7, justifyContent: 'center', alignItems: 'flex-end', marginLeft: 16 }}>
|
|
<Text style={{ color: Theme.colors.white, textAlign: 'left', fontSize: 16 }}>Sales Invoice No.</Text>
|
|
<Text style={{ color: Theme.colors.white, textAlign: 'left', fontSize: 16 }} numberOfLines={1}>{this.state.data?.transactionId}</Text>
|
|
</View>
|
|
</View>
|
|
<View style={{ backgroundColor: this.props.app_theme?.theme.colors.background, marginHorizontal: 10, borderColor: this.props.app_theme?.theme.colors.text, borderWidth: 0.5, borderBottomRightRadius: 10, borderBottomLeftRadius: 10, padding: 3 }}>
|
|
<View style={{ flexDirection: 'row', backgroundColor: this.props.app_theme?.theme.colors.background }}>
|
|
<Text style={{ flex: 1, color: this.props.app_theme?.theme.colors.text, fontSize: 18, paddingVertical: 5, fontWeight: 'bold', marginHorizontal: 13, textAlign: 'left' }}>Total Payment</Text>
|
|
<Text style={{ flex: 1, color: this.props.app_theme?.theme.colors.text, fontSize: 15, paddingVertical: 5, fontWeight: 'bold', marginHorizontal: 13, textAlign: 'right' }}>{`${'\u20B1'}${this.state.data?.totalPayment}`}</Text>
|
|
</View>
|
|
<View style={{ flexDirection: 'row', backgroundColor: this.props.app_theme?.theme.colors.background }}>
|
|
<Text style={{ flex: 1, color: this.props.app_theme?.theme.colors.text, fontSize: 15, paddingVertical: 5, marginHorizontal: 13, textAlign: 'left' }}>Card Payment</Text>
|
|
<Text style={{ flex: 1, color: this.props.app_theme?.theme.colors.text, fontSize: 15, paddingVertical: 5, marginHorizontal: 13, textAlign: 'right' }}>{`${'\u20B1'}${this.state.data?.cardPayment}`}</Text>
|
|
</View>
|
|
<View style={{ flexDirection: 'row', backgroundColor: this.props.app_theme?.theme.colors.background }}>
|
|
<Text style={{ flex: 1, color: this.props.app_theme?.theme.colors.text, fontSize: 15, paddingVertical: 5, marginHorizontal: 13, textAlign: 'left' }}>Points</Text>
|
|
<Text style={{ flex: 1, color: this.props.app_theme?.theme.colors.text, fontSize: 15, paddingVertical: 5, marginHorizontal: 13, textAlign: 'right' }}>{`${'\u20B1'}${0}`}</Text>
|
|
</View>
|
|
<View style={{ flexDirection: 'row', backgroundColor: this.props.app_theme?.theme.colors.background }}>
|
|
<Text style={{ flex: 1, color: this.props.app_theme?.theme.colors.text, fontSize: 15, paddingVertical: 5, marginHorizontal: 13, textAlign: 'left' }}>Earned Points</Text>
|
|
<Text style={{ flex: 1, color: this.props.app_theme?.theme.colors.text, fontSize: 15, paddingVertical: 5, marginHorizontal: 13, textAlign: 'right' }}>{`${'\u20B1'}${0}`}</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
<View style={{ flex: 0.3, justifyContent: 'center', alignItems: 'center' }}>
|
|
<Text style={{ fontSize: 18, color: this.props.app_theme?.theme.colors.text, fontStyle: 'italic', marginBottom: 16 }}>Send receipt to Email</Text>
|
|
<TextInput
|
|
keyboardType="email-address"
|
|
returnKeyType={'done'}
|
|
placeholder={"(Optional)"}
|
|
placeholderTextColor={Theme.colors.gray}
|
|
value={this.state.email}
|
|
onChangeText={(value) => this.setState({ email: value })}
|
|
style={{ width: Dimensions.get('screen').width - 60, height: 44, textAlign: 'center', fontSize: 18, borderWidth: 0.5, borderRadius: 5, color: this.props.app_theme?.theme.colors.text, borderColor: this.props.app_theme?.theme.colors.text }}
|
|
/>
|
|
</View>
|
|
</ScrollView>
|
|
<View>
|
|
<TouchableOpacity onPress={() => this.props.navigation.navigate('Main')}
|
|
style={{ height: 50, backgroundColor: Theme.colors.primary, justifyContent: 'center', alignItems: 'center', margin: 16, borderRadius: 5 }}>
|
|
<Text style={{ color: Theme.colors.white, fontSize: 18 }}>Ok</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</SafeAreaView>
|
|
)
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = (state) => {
|
|
return {
|
|
app_theme: state.appThemeReducer.theme
|
|
}
|
|
}
|
|
|
|
export default connect(mapStateToProps, null)(PayatpumpPaymentSuccess) |