feat: add free charge price mode for product buy page (#3015)

* feat: add free charge price mode for product buy page

* fix: improve code format

web/src/PaymentResultPage.js

@@ -17,6 +17,7 @@ import {Button, Result, Spin} from "antd";
 import * as PaymentBackend from "./backend/PaymentBackend";
 import * as PricingBackend from "./backend/PricingBackend";
 import * as SubscriptionBackend from "./backend/SubscriptionBackend";
+import * as UserBackend from "./backend/UserBackend";
 import * as Setting from "./Setting";
 import i18next from "i18next";
 
@@ -34,6 +35,7 @@ class PaymentResultPage extends React.Component {
       pricing: props.pricing ?? null,
       subscription: props.subscription ?? null,
       timeout: null,
+      user: null,
     };
   }
 
@@ -41,6 +43,25 @@ class PaymentResultPage extends React.Component {
     this.getPayment();
   }
 
+  getUser() {
+    UserBackend.getUser(this.props.account.owner, this.props.account.name)
+      .then((res) => {
+        if (res.data === null) {
+          this.props.history.push("/404");
+          return;
+        }
+
+        if (res.status === "error") {
+          Setting.showMessage("error", res.msg);
+          return;
+        }
+
+        this.setState({
+          user: res.data,
+        });
+      });
+  }
+
   componentWillUnmount() {
     if (this.state.timeout !== null) {
       clearTimeout(this.state.timeout);
@@ -114,6 +135,12 @@ class PaymentResultPage extends React.Component {
           });
         }
       }
+
+      if (payment.state === "Paid") {
+        if (this.props.account) {
+          this.getUser();
+        }
+      }
     } catch (err) {
       Setting.showMessage("error", err.message);
       return;
@@ -136,6 +163,27 @@ class PaymentResultPage extends React.Component {
     }
 
     if (payment.state === "Paid") {
+      if (payment.isRecharge) {
+        return (
+          <div className="login-content">
+            {
+              Setting.renderHelmet(payment)
+            }
+            <Result
+              status="success"
+              title={`${i18next.t("payment:Recharged successfully")}`}
+              subTitle={`${i18next.t("payment:You have successfully recharged")} ${payment.price} ${Setting.getCurrencyText(payment)}, ${i18next.t("payment:Your current balance is")} ${this.state.user?.balance} ${Setting.getCurrencyText(payment)}`}
+              extra={[
+                <Button type="primary" key="returnUrl" onClick={() => {
+                  this.goToPaymentUrl(payment);
+                }}>
+                  {i18next.t("payment:Return to Website")}
+                </Button>,
+              ]}
+            />
+          </div>
+        );
+      }
       return (
         <div className="login-content">
           {