Add renderQrCodeModal()

web/src/ProductBuyPage.js

@@ -13,7 +13,8 @@
 // limitations under the License.
 
 import React from "react";
-import {Button, Descriptions, Spin} from "antd";
+import {Button, Descriptions, Modal, Spin} from "antd";
+import {CheckCircleTwoTone} from "@ant-design/icons";
 import i18next from "i18next";
 import * as ProductBackend from "./backend/ProductBackend";
 import * as Setting from "./Setting";
@@ -26,6 +27,7 @@ class ProductBuyPage extends React.Component {
       productName: props.match?.params.productName,
       product: null,
       isPlacingOrder: false,
+      qrCodeModalProvider: null,
     };
   }
 
@@ -75,6 +77,13 @@ class ProductBuyPage extends React.Component {
   }
 
   buyProduct(product, provider) {
+    if (provider.clientId.startsWith("http")) {
+      this.setState({
+        qrCodeModalProvider: provider,
+      });
+      return;
+    }
+
     this.setState({
       isPlacingOrder: true,
     });
@@ -97,6 +106,41 @@ class ProductBuyPage extends React.Component {
       });
   }
 
+  renderQrCodeModal() {
+    return (
+      <Modal title={
+        <div>
+          <CheckCircleTwoTone twoToneColor="rgb(45,120,213)" />
+          {" " + i18next.t("product:Please scan the QR code to pay")}
+        </div>
+      }
+      open={this.state.qrCodeModalProvider !== null}
+      onOk={() => {
+        Setting.goToLink(this.state.product.returnUrl);
+      }}
+      onCancel={() => {
+        this.setState({
+          qrCodeModalProvider: null,
+        });
+      }}
+      okText={i18next.t("product:I have completed the payment")}
+      cancelText={i18next.t("general:Cancel")}>
+        <p key={this.state.qrCodeModalProvider?.name}>
+          {
+            i18next.t("product:Please provide your username in the remark")
+          }
+          :&nbsp;&nbsp;
+          {
+            Setting.getTag("default", this.props.account.name)
+          }
+          <br />
+          <br />
+          <img src={this.state.qrCodeModalProvider?.clientId} alt={this.state.qrCodeModalProvider?.name} width={"472px"} style={{marginBottom: "20px"}} />
+        </p>
+      </Modal>
+    );
+  }
+
   getPayButton(provider) {
     let text = provider.type;
     if (provider.type === "Alipay") {
@@ -185,6 +229,9 @@ class ProductBuyPage extends React.Component {
             </Descriptions.Item>
           </Descriptions>
         </Spin>
+        {
+          this.renderQrCodeModal()
+        }
       </div>
     );
   }