|
|
@@ -10,21 +10,37 @@ import Button from '../../components/Button';
|
|
|
import Dialog from '../../components/Dialog';
|
|
|
import { Balance } from '../wallet/Payment';
|
|
|
import {check, request, openSettings, PERMISSIONS, RESULTS} from 'react-native-permissions';
|
|
|
+import TextView from '../../components/TextView';
|
|
|
|
|
|
export default class PayNow extends Component {
|
|
|
constructor(props) {
|
|
|
super(props);
|
|
|
this.state = {
|
|
|
amount: 0,
|
|
|
- base64: ''
|
|
|
+ base64: '',
|
|
|
+ qrInfo: {
|
|
|
+ merchantUEN: "",
|
|
|
+ merchantName: "",
|
|
|
+ paymentAmount: "",
|
|
|
+ expirationTime: "",
|
|
|
+ imageBase64Code: ""
|
|
|
+ },
|
|
|
+ isNewVersion: false
|
|
|
};
|
|
|
this.denied = true;
|
|
|
this.viewShot = React.createRef();
|
|
|
}
|
|
|
|
|
|
componentDidMount() {
|
|
|
- if (this.props.route.params.amount) {
|
|
|
+ if (this.props.route.params.info) {
|
|
|
this.setState({
|
|
|
+ qrInfo: this.props.route.params.info,
|
|
|
+ isNewVersion: true
|
|
|
+ })
|
|
|
+ console.log("新版ANZ支付");
|
|
|
+ } else if (this.props.route.params.amount) {
|
|
|
+ this.setState({
|
|
|
+ isNewVersion: false,
|
|
|
amount: this.props.route.params?.amount,
|
|
|
base64: 'data:image/png;base64,' + this.props.route.params.base64
|
|
|
});
|
|
|
@@ -112,48 +128,104 @@ export default class PayNow extends Component {
|
|
|
}
|
|
|
|
|
|
render() {
|
|
|
- return (
|
|
|
- <ScrollView
|
|
|
- style={styles.container}>
|
|
|
- <View style={styles.headerView}>
|
|
|
- <Balance/>
|
|
|
- </View>
|
|
|
- <ViewShot
|
|
|
- ref={this.viewShot}
|
|
|
- style={styles.contentView}
|
|
|
- options={{
|
|
|
- format: "jpg",
|
|
|
- quality: 1
|
|
|
- }}>
|
|
|
- { this.state.base64
|
|
|
- ? <Image
|
|
|
- style={styles.qrCode}
|
|
|
- source={{uri: this.state.base64}}/>
|
|
|
- : <View style={styles.qrCode}></View>
|
|
|
- }
|
|
|
- </ViewShot>
|
|
|
- <Text style={styles.title}>{$t('payment.labelTopUpAmount')} {currency + ' ' + this.state.amount}</Text>
|
|
|
- <Text style={styles.tips}>{$t('payment.tipsQrPaymentSave')}</Text>
|
|
|
- <Text style={styles.tips}>{$t('payment.tipsQrPayment')}</Text>
|
|
|
- <View style={styles.button2}>
|
|
|
- <Button
|
|
|
- text={$t('payment.btnSave2gallery')}
|
|
|
- elevation={1.5}
|
|
|
- onClick={() => {
|
|
|
- this.checkPermission();
|
|
|
- }}/>
|
|
|
- </View>
|
|
|
- <View style={styles.button}>
|
|
|
- <Button
|
|
|
- text={$t('payment.paymentCompleted')}
|
|
|
- elevation={1.5}
|
|
|
- onClick={() => {
|
|
|
- goBack();
|
|
|
- }}/>
|
|
|
- </View>
|
|
|
-
|
|
|
- </ScrollView>
|
|
|
- );
|
|
|
+ if (this.state.isNewVersion) {
|
|
|
+ return (
|
|
|
+ <ScrollView
|
|
|
+ style={styles.container}
|
|
|
+ contentContainerStyle={ui.center}>
|
|
|
+ <View style={styles.headerInfo}>
|
|
|
+ <TextView style={styles.paymentTitle}>PAYMENT TO:</TextView>
|
|
|
+ <TextView style={styles.paymentText}>{this.state.qrInfo.merchantName}</TextView>
|
|
|
+ <TextView style={styles.paymentText}>({this.state.qrInfo.merchantUEN})</TextView>
|
|
|
+ </View>
|
|
|
+ <ViewShot
|
|
|
+ ref={this.viewShot}
|
|
|
+ style={styles.contentView2}
|
|
|
+ options={{
|
|
|
+ format: "png",
|
|
|
+ quality: 1,
|
|
|
+ fileName: "PayNow"
|
|
|
+ }}>
|
|
|
+ <View style={ui.center}>
|
|
|
+ <EndView/>
|
|
|
+ <Image
|
|
|
+ source={require('../../images/tool-logo.png')}
|
|
|
+ style={{width: $vw(50), height: $vw(11)}}
|
|
|
+ resizeMode="contain"
|
|
|
+ />
|
|
|
+ </View>
|
|
|
+ { this.state.qrInfo.imageBase64Code
|
|
|
+ ? <Image
|
|
|
+ style={styles.qrCode2}
|
|
|
+ source={{uri: this.state.qrInfo.imageBase64Code}}/>
|
|
|
+ : <View style={styles.qrCode2}></View>
|
|
|
+ }
|
|
|
+ <View style={$padding(0, 16, 16)}>
|
|
|
+ <View style={ui.flexc}>
|
|
|
+ <TextView style={styles.qrTextLabel}>PAYMENT AMOUNT:</TextView>
|
|
|
+ <TextView style={styles.qrTextMsg}>{this.state.qrInfo.paymentAmount}</TextView>
|
|
|
+ </View>
|
|
|
+ <View style={ui.flexc}>
|
|
|
+ <TextView style={styles.qrTextLabel}>EXPIRATION TIME:</TextView>
|
|
|
+ <TextView style={styles.qrTextMsg}>{this.state.qrInfo.expirationTime}</TextView>
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ </ViewShot>
|
|
|
+ <View style={styles.button3}>
|
|
|
+ <Button
|
|
|
+ style={ui.flex1}
|
|
|
+ text={$t('payment.btnSave2gallery')}
|
|
|
+ elevation={1.5}
|
|
|
+ onClick={() => {
|
|
|
+ this.checkPermission();
|
|
|
+ }}/>
|
|
|
+ </View>
|
|
|
+ </ScrollView>
|
|
|
+ )
|
|
|
+ } else {
|
|
|
+ return (
|
|
|
+ <ScrollView
|
|
|
+ style={styles.container}>
|
|
|
+ <View style={styles.headerView}>
|
|
|
+ <Balance/>
|
|
|
+ </View>
|
|
|
+ <ViewShot
|
|
|
+ ref={this.viewShot}
|
|
|
+ style={styles.contentView}
|
|
|
+ options={{
|
|
|
+ format: "jpg",
|
|
|
+ quality: 1
|
|
|
+ }}>
|
|
|
+ { this.state.base64
|
|
|
+ ? <Image
|
|
|
+ style={styles.qrCode}
|
|
|
+ source={{uri: this.state.base64}}/>
|
|
|
+ : <View style={styles.qrCode}></View>
|
|
|
+ }
|
|
|
+ </ViewShot>
|
|
|
+ <Text style={styles.title}>{$t('payment.labelTopUpAmount')} {currency + ' ' + this.state.amount}</Text>
|
|
|
+ <Text style={styles.tips}>{$t('payment.tipsQrPaymentSave')}</Text>
|
|
|
+ <Text style={styles.tips}>{$t('payment.tipsQrPayment')}</Text>
|
|
|
+ <View style={styles.button2}>
|
|
|
+ <Button
|
|
|
+ text={$t('payment.btnSave2gallery')}
|
|
|
+ elevation={1.5}
|
|
|
+ onClick={() => {
|
|
|
+ this.checkPermission();
|
|
|
+ }}/>
|
|
|
+ </View>
|
|
|
+ <View style={styles.button}>
|
|
|
+ <Button
|
|
|
+ text={$t('payment.paymentCompleted')}
|
|
|
+ elevation={1.5}
|
|
|
+ onClick={() => {
|
|
|
+ goBack();
|
|
|
+ }}/>
|
|
|
+ </View>
|
|
|
+
|
|
|
+ </ScrollView>
|
|
|
+ );
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -166,9 +238,19 @@ const styles = StyleSheet.create({
|
|
|
paddingBottom: 76,
|
|
|
//backgroundColor: colorAccent
|
|
|
},
|
|
|
+ headerInfo: {
|
|
|
+ ...$padding(32, 16),
|
|
|
+ alignItems: 'center'
|
|
|
+ },
|
|
|
contentView: {
|
|
|
marginTop: -88
|
|
|
},
|
|
|
+ contentView2: {
|
|
|
+ padding: 8,
|
|
|
+ marginTop: 8,
|
|
|
+ borderRadius: 4,
|
|
|
+ backgroundColor: colorLight
|
|
|
+ },
|
|
|
qrCode: {
|
|
|
margin: 16,
|
|
|
width: $vw(100) - 32,
|
|
|
@@ -176,6 +258,12 @@ const styles = StyleSheet.create({
|
|
|
borderRadius: 4,
|
|
|
backgroundColor: '#efefef'
|
|
|
},
|
|
|
+ qrCode2: {
|
|
|
+ width: $vw(85) - 32,
|
|
|
+ height: $vw(85) - 32,
|
|
|
+ borderRadius: 4,
|
|
|
+ backgroundColor: '#efefef'
|
|
|
+ },
|
|
|
title: {
|
|
|
color: textPrimary,
|
|
|
fontSize: 18,
|
|
|
@@ -193,5 +281,30 @@ const styles = StyleSheet.create({
|
|
|
button2: {
|
|
|
marginLeft: 16,
|
|
|
marginRight: 16
|
|
|
+ },
|
|
|
+ button3: {
|
|
|
+ ...$margin(56, 16, 40),
|
|
|
+ flexDirection: 'row'
|
|
|
+ },
|
|
|
+ paymentTitle: {
|
|
|
+ color: textPrimary,
|
|
|
+ fontSize: 16,
|
|
|
+ fontWeight: 'bold'
|
|
|
+ },
|
|
|
+ paymentText: {
|
|
|
+ color: textPrimary,
|
|
|
+ fontSize: 15,
|
|
|
+ paddingTop: 2
|
|
|
+ },
|
|
|
+ qrTextLabel: {
|
|
|
+ color: textPrimary,
|
|
|
+ padding: 2,
|
|
|
+ fontSize: 11,
|
|
|
+ fontWeight: 'bold'
|
|
|
+ },
|
|
|
+ qrTextMsg: {
|
|
|
+ color: textPrimary,
|
|
|
+ fontSize: 11,
|
|
|
+ paddingLeft: 2
|
|
|
}
|
|
|
})
|