|
@@ -1,39 +1,56 @@
|
|
|
-import React from 'react';
|
|
|
|
|
-import { StyleSheet } from 'react-native';
|
|
|
|
|
-import { Modal } from 'react-native';
|
|
|
|
|
-import { Text, View } from 'react-native';
|
|
|
|
|
|
|
+import React, { useEffect, useState } from 'react';
|
|
|
|
|
+import { Modal, View, StyleSheet } from 'react-native';
|
|
|
|
|
+import apiPayment from '../../api/apiPayment';
|
|
|
import Button from '../../components/Button';
|
|
import Button from '../../components/Button';
|
|
|
import Dialog from '../../components/Dialog';
|
|
import Dialog from '../../components/Dialog';
|
|
|
import TextView from '../../components/TextView';
|
|
import TextView from '../../components/TextView';
|
|
|
|
|
+import { i18nUtil } from '../../i18n';
|
|
|
|
|
|
|
|
const DialogPayPerUse = ({
|
|
const DialogPayPerUse = ({
|
|
|
amount="",
|
|
amount="",
|
|
|
visible,
|
|
visible,
|
|
|
onClose
|
|
onClose
|
|
|
-}) => (
|
|
|
|
|
- <Modal
|
|
|
|
|
- visible={visible}
|
|
|
|
|
- transparent={true}>
|
|
|
|
|
- <View style={styles.container}>
|
|
|
|
|
- <View style={styles.content}>
|
|
|
|
|
- <TextView style={styles.title}>{$t("payment.titleNote")}</TextView>
|
|
|
|
|
- <TextView style={styles.message}>{$t("payment.tipsPayPerUseAmount").replace("{mm}", amount)}</TextView>
|
|
|
|
|
- <View style={ui.flexc}>
|
|
|
|
|
- <Button
|
|
|
|
|
- style={styles.cancelButton}
|
|
|
|
|
- text={$t("nav.cancel")}
|
|
|
|
|
- textColor={textPrimary}
|
|
|
|
|
- onClick={() => onClose(false)}/>
|
|
|
|
|
- <Button
|
|
|
|
|
- style={styles.confirmButton}
|
|
|
|
|
- text={$t("nav.confirm")}
|
|
|
|
|
- borderRadius={0}
|
|
|
|
|
- onClick={() => onClose(true)}/>
|
|
|
|
|
|
|
+}) => {
|
|
|
|
|
+ const [content, setContent] = useState();
|
|
|
|
|
+ useEffect(() => {
|
|
|
|
|
+ if (i18nUtil.isChinese()) {
|
|
|
|
|
+ setContent($t("payment.tipsPayPerUseAmount").replace("{mm}", amount));
|
|
|
|
|
+ } else {
|
|
|
|
|
+ apiPayment.getPayPerUseAlter().then(res => {
|
|
|
|
|
+ if (res.data) {
|
|
|
|
|
+ setContent(res.data);
|
|
|
|
|
+ }
|
|
|
|
|
+ }).catch(err => {
|
|
|
|
|
+ setContent($t("payment.tipsPayPerUseAmount").replace("{mm}", amount));
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+ }, []);
|
|
|
|
|
+ return (
|
|
|
|
|
+ <Modal
|
|
|
|
|
+ visible={visible}
|
|
|
|
|
+ transparent={true}>
|
|
|
|
|
+ <View style={styles.container}>
|
|
|
|
|
+ <View style={styles.content}>
|
|
|
|
|
+ <TextView style={styles.title}>{$t("payment.titleNote")}</TextView>
|
|
|
|
|
+ <TextView style={styles.message}>{content}</TextView>
|
|
|
|
|
+ <View style={styles.buttonsDivide}></View>
|
|
|
|
|
+ <View style={ui.flexc}>
|
|
|
|
|
+ <Button
|
|
|
|
|
+ style={styles.cancelButton}
|
|
|
|
|
+ text={$t("nav.cancel")}
|
|
|
|
|
+ textColor={textPrimary}
|
|
|
|
|
+ onClick={() => onClose(false)}/>
|
|
|
|
|
+ <Button
|
|
|
|
|
+ style={styles.confirmButton}
|
|
|
|
|
+ text={$t("nav.confirm")}
|
|
|
|
|
+ borderRadius={0}
|
|
|
|
|
+ onClick={() => onClose(true)}/>
|
|
|
|
|
+ </View>
|
|
|
</View>
|
|
</View>
|
|
|
</View>
|
|
</View>
|
|
|
- </View>
|
|
|
|
|
- </Modal>
|
|
|
|
|
-);
|
|
|
|
|
|
|
+ </Modal>
|
|
|
|
|
+ )
|
|
|
|
|
+};
|
|
|
|
|
|
|
|
export default DialogPayPerUse;
|
|
export default DialogPayPerUse;
|
|
|
|
|
|
|
@@ -42,39 +59,36 @@ const styles = StyleSheet.create({
|
|
|
flex: 1,
|
|
flex: 1,
|
|
|
alignItems: 'center',
|
|
alignItems: 'center',
|
|
|
justifyContent: 'center',
|
|
justifyContent: 'center',
|
|
|
- backgroundColor: 'rgba(0,0,0,.3)'
|
|
|
|
|
|
|
+ backgroundColor: 'rgba(0,0,0,.5)'
|
|
|
},
|
|
},
|
|
|
content: {
|
|
content: {
|
|
|
width: Dialog.dialogWidth,
|
|
width: Dialog.dialogWidth,
|
|
|
- borderRadius: 4,
|
|
|
|
|
|
|
+ borderRadius: 16,
|
|
|
overflow: 'hidden',
|
|
overflow: 'hidden',
|
|
|
backgroundColor: colorLight
|
|
backgroundColor: colorLight
|
|
|
},
|
|
},
|
|
|
title: {
|
|
title: {
|
|
|
- paddingTop: 16,
|
|
|
|
|
- paddingLeft: 16,
|
|
|
|
|
|
|
+ paddingTop: 24,
|
|
|
|
|
+ paddingLeft: 24,
|
|
|
color: textPrimary,
|
|
color: textPrimary,
|
|
|
fontSize: 16,
|
|
fontSize: 16,
|
|
|
fontWeight: 'bold'
|
|
fontWeight: 'bold'
|
|
|
},
|
|
},
|
|
|
message: {
|
|
message: {
|
|
|
- padding: 16,
|
|
|
|
|
color: textPrimary,
|
|
color: textPrimary,
|
|
|
fontSize: 14,
|
|
fontSize: 14,
|
|
|
paddingTop: 16,
|
|
paddingTop: 16,
|
|
|
|
|
+ paddingLeft: 24,
|
|
|
|
|
+ paddingRight: 24,
|
|
|
paddingBottom: 32
|
|
paddingBottom: 32
|
|
|
},
|
|
},
|
|
|
cancelButton: {
|
|
cancelButton: {
|
|
|
flex: 1,
|
|
flex: 1,
|
|
|
- borderColor: '#EEE',
|
|
|
|
|
- borderWidth: 1,
|
|
|
|
|
borderRadius: 0,
|
|
borderRadius: 0,
|
|
|
- backgroundColor: textButton
|
|
|
|
|
|
|
+ backgroundColor: "#F0F0F0"
|
|
|
},
|
|
},
|
|
|
confirmButton: {
|
|
confirmButton: {
|
|
|
flex: 1,
|
|
flex: 1,
|
|
|
- borderColor: colorAccent,
|
|
|
|
|
- borderWidth: 1,
|
|
|
|
|
borderRadius: 0,
|
|
borderRadius: 0,
|
|
|
backgroundColor: colorAccent
|
|
backgroundColor: colorAccent
|
|
|
}
|
|
}
|