Add payment modal.

web/src/PaymentEditPage.js

@@ -13,7 +13,8 @@
 // limitations under the License.
 
 import React from "react";
-import {Button, Card, Col, Input, Row, Select} from 'antd';
+import {Button, Card, Col, Descriptions, Input, Modal, Row, Select} from 'antd';
+import {InfoCircleTwoTone} from "@ant-design/icons";
 import * as PaymentBackend from "./backend/PaymentBackend";
 import * as Setting from "./Setting";
 import i18next from "i18next";
@@ -28,6 +29,7 @@ class PaymentEditPage extends React.Component {
       organizationName: props.organizationName !== undefined ? props.organizationName : props.match.params.organizationName,
       paymentName: props.match.params.paymentName,
       payment: null,
+      isModalVisible: false,
       mode: props.location.mode !== undefined ? props.location.mode : "edit",
     };
   }
@@ -76,6 +78,51 @@ class PaymentEditPage extends React.Component {
     Setting.openLinkSafe(this.state.payment.invoiceUrl);
   }
 
+  renderModal() {
+    const ths = this;
+    const handleChangeMyTag = () => {
+      ths.issueInvoice();
+    };
+
+    const handleCancel = () => {
+      this.setState({
+        isModalVisible: false,
+      });
+    };
+
+    return (
+      <Modal title={
+        <div>
+          <InfoCircleTwoTone twoToneColor="rgb(45,120,213)" />
+          {" " + i18next.t("payment:Confirm your invoice information")}
+        </div>
+      }
+             visible={this.state.isModalVisible}
+             onOk={handleChangeMyTag}
+             onCancel={handleCancel}
+             okText={i18next.t("payment:Issue Invoice")}
+             cancelText={i18next.t("general:Cancel")}>
+        <p>
+          {
+            i18next.t("payment:Please carefully check your invoice information. Once the invoice is issued, it cannot be withdrawn or modified.")
+          }
+          <br/>
+          <br/>
+          <Descriptions size={"small"} bordered>
+            <Descriptions.Item label={i18next.t("payment:Person name")} span={3}>{this.state.payment?.personName}</Descriptions.Item>
+            <Descriptions.Item label={i18next.t("payment:Person ID card")} span={3}>{this.state.payment?.personIdCard}</Descriptions.Item>
+            <Descriptions.Item label={i18next.t("payment:Person Email")} span={3}>{this.state.payment?.personEmail}</Descriptions.Item>
+            <Descriptions.Item label={i18next.t("payment:Person phone")} span={3}>{this.state.payment?.personPhone}</Descriptions.Item>
+            <Descriptions.Item label={i18next.t("payment:Invoice type")} span={3}>{this.state.payment?.invoiceType === "Individual" ? i18next.t("payment:Individual") : i18next.t("payment:Organization")}</Descriptions.Item>
+            <Descriptions.Item label={i18next.t("payment:Invoice title")} span={3}>{this.state.payment?.invoiceTitle}</Descriptions.Item>
+            <Descriptions.Item label={i18next.t("payment:Invoice tax ID")} span={3}>{this.state.payment?.invoiceTaxId}</Descriptions.Item>
+            <Descriptions.Item label={i18next.t("payment:Invoice remark")} span={3}>{this.state.payment?.invoiceRemark}</Descriptions.Item>
+          </Descriptions>
+        </p>
+      </Modal>
+    )
+  }
+
   renderPayment() {
     return (
       <Card size="small" title={
@@ -263,7 +310,7 @@ class PaymentEditPage extends React.Component {
         </Row>
         <Row style={{marginTop: '20px'}} >
           <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
-            {Setting.getLabel(i18next.t("payment:Invoice Tax ID"), i18next.t("payment:Invoice Tax ID - Tooltip"))} :
+            {Setting.getLabel(i18next.t("payment:Invoice tax ID"), i18next.t("payment:Invoice tax ID - Tooltip"))} :
           </Col>
           <Col span={22} >
             <Input disabled={this.state.payment.invoiceUrl !== "" || this.state.payment.invoiceType === "Individual"} value={this.state.payment.invoiceTaxId} onChange={e => {
@@ -298,7 +345,11 @@ class PaymentEditPage extends React.Component {
           <Col span={22} >
             {
               this.state.payment.invoiceUrl === "" ? (
-                <Button type={"primary"} onClick={() => this.issueInvoice()}>{i18next.t("payment:Issue Invoice")}</Button>
+                <Button type={"primary"} onClick={() => {
+                  this.setState({
+                    isModalVisible: true,
+                  });
+                }}>{i18next.t("payment:Issue Invoice")}</Button>
               ) : (
                 <Button type={"primary"} onClick={() => this.downloadInvoice(false)}>{i18next.t("payment:Download Invoice")}</Button>
               )
@@ -398,6 +449,9 @@ class PaymentEditPage extends React.Component {
         {
           this.state.payment !== null ? this.renderPayment() : null
         }
+        {
+          this.renderModal()
+        }
         <div style={{marginTop: '20px', marginLeft: '40px'}}>
           <Button size="large" onClick={() => this.submitPaymentEdit(false)}>{i18next.t("general:Save")}</Button>
           <Button style={{marginLeft: '20px'}} type="primary" size="large" onClick={() => this.submitPaymentEdit(true)}>{i18next.t("general:Save & Exit")}</Button>

web/src/locales/de/data.json

@@ -258,19 +258,20 @@
     "Website URL - Tooltip": "Unique string-style identifier"
   },
   "payment": {
+    "Confirm your invoice information": "Confirm your invoice information",
     "Currency": "Currency",
     "Currency - Tooltip": "Currency - Tooltip",
     "Download Invoice": "Download Invoice",
     "Edit Payment": "Edit Payment",
     "Individual": "Individual",
-    "Invoice Tax ID": "Invoice Tax ID",
-    "Invoice Tax ID - Tooltip": "Invoice Tax ID - Tooltip",
     "Invoice URL": "Invoice URL",
     "Invoice URL - Tooltip": "Invoice URL - Tooltip",
     "Invoice actions": "Invoice actions",
     "Invoice actions - Tooltip": "Invoice actions - Tooltip",
     "Invoice remark": "Invoice remark",
     "Invoice remark - Tooltip": "Invoice remark - Tooltip",
+    "Invoice tax ID": "Invoice tax ID",
+    "Invoice tax ID - Tooltip": "Invoice tax ID - Tooltip",
     "Invoice title": "Invoice title",
     "Invoice title - Tooltip": "Invoice title - Tooltip",
     "Invoice type": "Invoice type",
@@ -288,6 +289,7 @@
     "Person name - Tooltip": "Person name - Tooltip",
     "Person phone": "Person phone",
     "Person phone - Tooltip": "Person phone - Tooltip",
+    "Please carefully check your invoice information. Once the invoice is issued, it cannot be withdrawn or modified.": "Please carefully check your invoice information. Once the invoice is issued, it cannot be withdrawn or modified.",
     "Please click the below button to return to the original website": "Please click the below button to return to the original website",
     "Price": "Price",
     "Price - Tooltip": "Price - Tooltip",

web/src/locales/en/data.json

@@ -258,19 +258,20 @@
     "Website URL - Tooltip": "Website URL - Tooltip"
   },
   "payment": {
+    "Confirm your invoice information": "Confirm your invoice information",
     "Currency": "Currency",
     "Currency - Tooltip": "Currency - Tooltip",
     "Download Invoice": "Download Invoice",
     "Edit Payment": "Edit Payment",
     "Individual": "Individual",
-    "Invoice Tax ID": "Invoice Tax ID",
-    "Invoice Tax ID - Tooltip": "Invoice Tax ID - Tooltip",
     "Invoice URL": "Invoice URL",
     "Invoice URL - Tooltip": "Invoice URL - Tooltip",
     "Invoice actions": "Invoice actions",
     "Invoice actions - Tooltip": "Invoice actions - Tooltip",
     "Invoice remark": "Invoice remark",
     "Invoice remark - Tooltip": "Invoice remark - Tooltip",
+    "Invoice tax ID": "Invoice tax ID",
+    "Invoice tax ID - Tooltip": "Invoice tax ID - Tooltip",
     "Invoice title": "Invoice title",
     "Invoice title - Tooltip": "Invoice title - Tooltip",
     "Invoice type": "Invoice type",
@@ -288,6 +289,7 @@
     "Person name - Tooltip": "Person name - Tooltip",
     "Person phone": "Person phone",
     "Person phone - Tooltip": "Person phone - Tooltip",
+    "Please carefully check your invoice information. Once the invoice is issued, it cannot be withdrawn or modified.": "Please carefully check your invoice information. Once the invoice is issued, it cannot be withdrawn or modified.",
     "Please click the below button to return to the original website": "Please click the below button to return to the original website",
     "Price": "Price",
     "Price - Tooltip": "Price - Tooltip",

web/src/locales/fr/data.json

@@ -258,19 +258,20 @@
     "Website URL - Tooltip": "Unique string-style identifier"
   },
   "payment": {
+    "Confirm your invoice information": "Confirm your invoice information",
     "Currency": "Currency",
     "Currency - Tooltip": "Currency - Tooltip",
     "Download Invoice": "Download Invoice",
     "Edit Payment": "Edit Payment",
     "Individual": "Individual",
-    "Invoice Tax ID": "Invoice Tax ID",
-    "Invoice Tax ID - Tooltip": "Invoice Tax ID - Tooltip",
     "Invoice URL": "Invoice URL",
     "Invoice URL - Tooltip": "Invoice URL - Tooltip",
     "Invoice actions": "Invoice actions",
     "Invoice actions - Tooltip": "Invoice actions - Tooltip",
     "Invoice remark": "Invoice remark",
     "Invoice remark - Tooltip": "Invoice remark - Tooltip",
+    "Invoice tax ID": "Invoice tax ID",
+    "Invoice tax ID - Tooltip": "Invoice tax ID - Tooltip",
     "Invoice title": "Invoice title",
     "Invoice title - Tooltip": "Invoice title - Tooltip",
     "Invoice type": "Invoice type",
@@ -288,6 +289,7 @@
     "Person name - Tooltip": "Person name - Tooltip",
     "Person phone": "Person phone",
     "Person phone - Tooltip": "Person phone - Tooltip",
+    "Please carefully check your invoice information. Once the invoice is issued, it cannot be withdrawn or modified.": "Please carefully check your invoice information. Once the invoice is issued, it cannot be withdrawn or modified.",
     "Please click the below button to return to the original website": "Please click the below button to return to the original website",
     "Price": "Price",
     "Price - Tooltip": "Price - Tooltip",

web/src/locales/ja/data.json

@@ -258,19 +258,20 @@
     "Website URL - Tooltip": "Unique string-style identifier"
   },
   "payment": {
+    "Confirm your invoice information": "Confirm your invoice information",
     "Currency": "Currency",
     "Currency - Tooltip": "Currency - Tooltip",
     "Download Invoice": "Download Invoice",
     "Edit Payment": "Edit Payment",
     "Individual": "Individual",
-    "Invoice Tax ID": "Invoice Tax ID",
-    "Invoice Tax ID - Tooltip": "Invoice Tax ID - Tooltip",
     "Invoice URL": "Invoice URL",
     "Invoice URL - Tooltip": "Invoice URL - Tooltip",
     "Invoice actions": "Invoice actions",
     "Invoice actions - Tooltip": "Invoice actions - Tooltip",
     "Invoice remark": "Invoice remark",
     "Invoice remark - Tooltip": "Invoice remark - Tooltip",
+    "Invoice tax ID": "Invoice tax ID",
+    "Invoice tax ID - Tooltip": "Invoice tax ID - Tooltip",
     "Invoice title": "Invoice title",
     "Invoice title - Tooltip": "Invoice title - Tooltip",
     "Invoice type": "Invoice type",
@@ -288,6 +289,7 @@
     "Person name - Tooltip": "Person name - Tooltip",
     "Person phone": "Person phone",
     "Person phone - Tooltip": "Person phone - Tooltip",
+    "Please carefully check your invoice information. Once the invoice is issued, it cannot be withdrawn or modified.": "Please carefully check your invoice information. Once the invoice is issued, it cannot be withdrawn or modified.",
     "Please click the below button to return to the original website": "Please click the below button to return to the original website",
     "Price": "Price",
     "Price - Tooltip": "Price - Tooltip",

web/src/locales/ko/data.json

@@ -258,19 +258,20 @@
     "Website URL - Tooltip": "Unique string-style identifier"
   },
   "payment": {
+    "Confirm your invoice information": "Confirm your invoice information",
     "Currency": "Currency",
     "Currency - Tooltip": "Currency - Tooltip",
     "Download Invoice": "Download Invoice",
     "Edit Payment": "Edit Payment",
     "Individual": "Individual",
-    "Invoice Tax ID": "Invoice Tax ID",
-    "Invoice Tax ID - Tooltip": "Invoice Tax ID - Tooltip",
     "Invoice URL": "Invoice URL",
     "Invoice URL - Tooltip": "Invoice URL - Tooltip",
     "Invoice actions": "Invoice actions",
     "Invoice actions - Tooltip": "Invoice actions - Tooltip",
     "Invoice remark": "Invoice remark",
     "Invoice remark - Tooltip": "Invoice remark - Tooltip",
+    "Invoice tax ID": "Invoice tax ID",
+    "Invoice tax ID - Tooltip": "Invoice tax ID - Tooltip",
     "Invoice title": "Invoice title",
     "Invoice title - Tooltip": "Invoice title - Tooltip",
     "Invoice type": "Invoice type",
@@ -288,6 +289,7 @@
     "Person name - Tooltip": "Person name - Tooltip",
     "Person phone": "Person phone",
     "Person phone - Tooltip": "Person phone - Tooltip",
+    "Please carefully check your invoice information. Once the invoice is issued, it cannot be withdrawn or modified.": "Please carefully check your invoice information. Once the invoice is issued, it cannot be withdrawn or modified.",
     "Please click the below button to return to the original website": "Please click the below button to return to the original website",
     "Price": "Price",
     "Price - Tooltip": "Price - Tooltip",

web/src/locales/ru/data.json

@@ -258,19 +258,20 @@
     "Website URL - Tooltip": "Unique string-style identifier"
   },
   "payment": {
+    "Confirm your invoice information": "Confirm your invoice information",
     "Currency": "Currency",
     "Currency - Tooltip": "Currency - Tooltip",
     "Download Invoice": "Download Invoice",
     "Edit Payment": "Edit Payment",
     "Individual": "Individual",
-    "Invoice Tax ID": "Invoice Tax ID",
-    "Invoice Tax ID - Tooltip": "Invoice Tax ID - Tooltip",
     "Invoice URL": "Invoice URL",
     "Invoice URL - Tooltip": "Invoice URL - Tooltip",
     "Invoice actions": "Invoice actions",
     "Invoice actions - Tooltip": "Invoice actions - Tooltip",
     "Invoice remark": "Invoice remark",
     "Invoice remark - Tooltip": "Invoice remark - Tooltip",
+    "Invoice tax ID": "Invoice tax ID",
+    "Invoice tax ID - Tooltip": "Invoice tax ID - Tooltip",
     "Invoice title": "Invoice title",
     "Invoice title - Tooltip": "Invoice title - Tooltip",
     "Invoice type": "Invoice type",
@@ -288,6 +289,7 @@
     "Person name - Tooltip": "Person name - Tooltip",
     "Person phone": "Person phone",
     "Person phone - Tooltip": "Person phone - Tooltip",
+    "Please carefully check your invoice information. Once the invoice is issued, it cannot be withdrawn or modified.": "Please carefully check your invoice information. Once the invoice is issued, it cannot be withdrawn or modified.",
     "Please click the below button to return to the original website": "Please click the below button to return to the original website",
     "Price": "Price",
     "Price - Tooltip": "Price - Tooltip",

web/src/locales/zh/data.json

@@ -258,19 +258,20 @@
     "Website URL - Tooltip": "网页地址"
   },
   "payment": {
+    "Confirm your invoice information": "确认您的发票信息",
     "Currency": "币种",
     "Currency - Tooltip": "如USD（美元），CNY（人民币）等",
     "Download Invoice": "下载发票",
     "Edit Payment": "编辑付款",
     "Individual": "个人",
-    "Invoice Tax ID": "纳税人识别号",
-    "Invoice Tax ID - Tooltip": "开票类型为单位时，必须输入单位纳税人识别号；开票类型为个人时，不需要填写",
     "Invoice URL": "发票URL",
     "Invoice URL - Tooltip": "发票的下载地址URL",
     "Invoice actions": "发票操作",
     "Invoice actions - Tooltip": "操作包含开具发票和下载发票两种",
     "Invoice remark": "发票备注",
     "Invoice remark - Tooltip": "备注不超过50个字",
+    "Invoice tax ID": "纳税人识别号",
+    "Invoice tax ID - Tooltip": "开票类型为单位时，必须输入单位纳税人识别号；开票类型为个人时，不需要填写",
     "Invoice title": "发票抬头",
     "Invoice title - Tooltip": "开票类型为单位时，发票抬头可输入单位名称；开票类型为个人时，系统自动填写为缴费人姓名",
     "Invoice type": "开票类型",
@@ -288,6 +289,7 @@
     "Person name - Tooltip": "缴费人本人的姓名",
     "Person phone": "缴费人手机号",
     "Person phone - Tooltip": "缴费人本人的手机号",
+    "Please carefully check your invoice information. Once the invoice is issued, it cannot be withdrawn or modified.": "请仔细检查下列发票信息，发票一经开具，无法退换。",
     "Please click the below button to return to the original website": "请点击下方按钮返回原网站",
     "Price": "价格",
     "Price - Tooltip": "商品价格",