add app/pages/chargingV2/DialogPayPerUse.js

Strides-SPAPP/app/pages/chargingV2/DialogPayPerUse.js

@@ -0,0 +1,97 @@
+import React, { useEffect, useState } from 'react';
+import { Modal, View, StyleSheet } from 'react-native';
+import apiPayment from '../../api/apiPayment';
+import Button from '../../components/Button';
+import Dialog from '../../components/Dialog';
+import TextView from '../../components/TextView';
+import { i18nUtil } from '../../i18n';
+
+const DialogPayPerUse = ({
+  amount="",
+  visible,
+  onClose
+}) => {
+  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}
+      animationType="fade"
+      statusBarTranslucent={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>
+    </Modal>
+  )
+};
+
+export default DialogPayPerUse;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'rgba(0,0,0,.5)'
+  },
+  content: {
+    width: Dialog.dialogWidth,
+    borderRadius: isIOS ? 16 : 12,
+    overflow: 'hidden',
+    backgroundColor: colorLight
+  },
+  title: {
+    paddingTop: 24,
+    paddingLeft: 24,
+    color: textPrimary,
+    fontSize: 16,
+    fontWeight: 'bold'
+  },
+  message: {
+    color: textPrimary,
+    fontSize: 14,
+    paddingTop: 16,
+    paddingLeft: 24,
+    paddingRight: 24,
+    paddingBottom: 32
+  },
+  cancelButton: {
+    flex: 1,
+    borderRadius: 0,
+    backgroundColor: "#F0F0F0"
+  },
+  confirmButton: {
+    flex: 1,
+    borderRadius: 0,
+    backgroundColor: colorAccent
+  }
+})