feat: support Pricings flow (#2250)

* feat: fix price display

* feat: support subscription

* feat: fix select-plan-> signup -> buy-plan -> login flow

* feat: support paid-user to login and jump to the pricing page

* feat: support more subscription state

* feat: add payment providers for plan

* feat: format code

* feat: gofumpt

* feat: redirect to buy-plan-result page when user have pending subscription

* feat: response err when pricing don't exit

* Update PricingListPage.js

* Update ProductBuyPage.js

* Update LoginPage.js

---------

Co-authored-by: hsluoyz <hsluoyz@qq.com>

web/src/SubscriptionEditPage.js

@@ -14,8 +14,9 @@
 
 import moment from "moment";
 import React from "react";
-import {Button, Card, Col, DatePicker, Input, InputNumber, Row, Select, Switch} from "antd";
+import {Button, Card, Col, DatePicker, Input, InputNumber, Row, Select} from "antd";
 import * as OrganizationBackend from "./backend/OrganizationBackend";
+import * as PricingBackend from "./backend/PricingBackend";
 import * as PlanBackend from "./backend/PlanBackend";
 import * as SubscriptionBackend from "./backend/SubscriptionBackend";
 import * as UserBackend from "./backend/UserBackend";
@@ -33,7 +34,8 @@ class SubscriptionEditPage extends React.Component {
       subscription: null,
       organizations: [],
       users: [],
-      planes: [],
+      pricings: [],
+      plans: [],
       providers: [],
       mode: props.location.mode !== undefined ? props.location.mode : "edit",
     };
@@ -62,15 +64,25 @@ class SubscriptionEditPage extends React.Component {
         });
 
         this.getUsers(this.state.organizationName);
-        this.getPlanes(this.state.organizationName);
+        this.getPricings(this.state.organizationName);
+        this.getPlans(this.state.organizationName);
       });
   }
 
-  getPlanes(organizationName) {
+  getPricings(organizationName) {
+    PricingBackend.getPricings(organizationName)
+      .then((res) => {
+        this.setState({
+          pricings: res.data,
+        });
+      });
+  }
+
+  getPlans(organizationName) {
     PlanBackend.getPlans(organizationName)
       .then((res) => {
         this.setState({
-          planes: res.data,
+          plans: res.data,
         });
       });
   }
@@ -133,7 +145,7 @@ class SubscriptionEditPage extends React.Component {
             <Select virtual={false} style={{width: "100%"}} value={this.state.subscription.owner} onChange={(owner => {
               this.updateSubscriptionField("owner", owner);
               this.getUsers(owner);
-              this.getPlanes(owner);
+              this.getPlans(owner);
             })}
             options={this.state.organizations.map((organization) => Setting.getOption(organization.name, organization.name))
             } />
@@ -171,21 +183,21 @@ class SubscriptionEditPage extends React.Component {
         </Row>
         <Row style={{marginTop: "20px"}} >
           <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
-            {Setting.getLabel(i18next.t("subscription:Start date"), i18next.t("subscription:Start date - Tooltip"))}
+            {Setting.getLabel(i18next.t("subscription:Start time"), i18next.t("subscription:Start time - Tooltip"))}
           </Col>
           <Col span={22} >
-            <DatePicker value={dayjs(this.state.subscription.startDate)} onChange={value => {
-              this.updateSubscriptionField("startDate", value);
+            <DatePicker value={dayjs(this.state.subscription.startTime)} onChange={value => {
+              this.updateSubscriptionField("startTime", value);
             }} />
           </Col>
         </Row>
         <Row style={{marginTop: "20px"}} >
           <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
-            {Setting.getLabel(i18next.t("subscription:End date"), i18next.t("subscription:End date - Tooltip"))}
+            {Setting.getLabel(i18next.t("subscription:End time"), i18next.t("subscription:End time - Tooltip"))}
           </Col>
           <Col span={22} >
-            <DatePicker value={dayjs(this.state.subscription.endDate)} onChange={value => {
-              this.updateSubscriptionField("endDate", value);
+            <DatePicker value={dayjs(this.state.subscription.endTime)} onChange={value => {
+              this.updateSubscriptionField("endTime", value);
             }} />
           </Col>
         </Row>
@@ -196,21 +208,42 @@ class SubscriptionEditPage extends React.Component {
           <Col span={22} >
             <Select style={{width: "100%"}} value={this.state.subscription.user}
               onChange={(value => {this.updateSubscriptionField("user", value);})}
-              options={this.state.users.map((user) => Setting.getOption(`${user.owner}/${user.name}`, `${user.owner}/${user.name}`))}
+              options={this.state.users.map((user) => Setting.getOption(user.name, user.name))}
             />
           </Col>
         </Row>
-
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("general:Pricing"), i18next.t("general:Pricing - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Select virtual={false} style={{width: "100%"}} value={this.state.subscription.pricing}
+              onChange={(value => {this.updateSubscriptionField("pricing", value);})}
+              options={this.state.pricings.map((pricing) => Setting.getOption(pricing.name, pricing.name))
+              } />
+          </Col>
+        </Row>
         <Row style={{marginTop: "20px"}} >
           <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
             {Setting.getLabel(i18next.t("general:Plan"), i18next.t("general:Plan - Tooltip"))} :
           </Col>
           <Col span={22} >
-            <Select virtual={false} style={{width: "100%"}} value={this.state.subscription.plan} onChange={(value => {this.updateSubscriptionField("plan", value);})}
-              options={this.state.planes.map((plan) => Setting.getOption(`${plan.owner}/${plan.name}`, `${plan.owner}/${plan.name}`))
+            <Select virtual={false} style={{width: "100%"}} value={this.state.subscription.plan}
+              onChange={(value => {this.updateSubscriptionField("plan", value);})}
+              options={this.state.plans.map((plan) => Setting.getOption(plan.name, plan.name))
               } />
           </Col>
         </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("general:Payment"), i18next.t("general:Payment - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Input value={this.state.subscription.payment} disabled={true} onChange={e => {
+              this.updateSubscriptionField("payment", e.target.value);
+            }} />
+          </Col>
+        </Row>
         <Row style={{marginTop: "20px"}} >
           <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
             {Setting.getLabel(i18next.t("general:Description"), i18next.t("general:Description - Tooltip"))} :
@@ -221,46 +254,6 @@ class SubscriptionEditPage extends React.Component {
             }} />
           </Col>
         </Row>
-        <Row style={{marginTop: "20px"}} >
-          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 19 : 2}>
-            {Setting.getLabel(i18next.t("general:Is enabled"), i18next.t("general:Is enabled - Tooltip"))} :
-          </Col>
-          <Col span={1} >
-            <Switch checked={this.state.subscription.isEnabled} onChange={checked => {
-              this.updateSubscriptionField("isEnabled", checked);
-            }} />
-          </Col>
-        </Row>
-        <Row style={{marginTop: "20px"}} >
-          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
-            {Setting.getLabel(i18next.t("permission:Submitter"), i18next.t("permission:Submitter - Tooltip"))} :
-          </Col>
-          <Col span={22} >
-            <Input disabled={true} value={this.state.subscription.submitter} onChange={e => {
-              this.updateSubscriptionField("submitter", e.target.value);
-            }} />
-          </Col>
-        </Row>
-        <Row style={{marginTop: "20px"}} >
-          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
-            {Setting.getLabel(i18next.t("permission:Approver"), i18next.t("permission:Approver - Tooltip"))} :
-          </Col>
-          <Col span={22} >
-            <Input disabled={true} value={this.state.subscription.approver} onChange={e => {
-              this.updateSubscriptionField("approver", e.target.value);
-            }} />
-          </Col>
-        </Row>
-        <Row style={{marginTop: "20px"}} >
-          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
-            {Setting.getLabel(i18next.t("permission:Approve time"), i18next.t("permission:Approve time - Tooltip"))} :
-          </Col>
-          <Col span={22} >
-            <Input disabled={true} value={Setting.getFormattedDate(this.state.subscription.approveTime)} onChange={e => {
-              this.updatePermissionField("approveTime", e.target.value);
-            }} />
-          </Col>
-        </Row>
         <Row style={{marginTop: "20px"}} >
           <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
             {Setting.getLabel(i18next.t("general:State"), i18next.t("general:State - Tooltip"))} :
@@ -280,8 +273,12 @@ class SubscriptionEditPage extends React.Component {
               this.updateSubscriptionField("state", value);
             })}
             options={[
-              {value: "Approved", name: i18next.t("permission:Approved")},
               {value: "Pending", name: i18next.t("permission:Pending")},
+              {value: "Active", name: i18next.t("permission:Active")},
+              {value: "Upcoming", name: i18next.t("permission:Upcoming")},
+              {value: "Expired", name: i18next.t("permission:Expired")},
+              {value: "Error", name: i18next.t("permission:Error")},
+              {value: "Suspended", name: i18next.t("permission:Suspended")},
             ].map((item) => Setting.getOption(item.name, item.value))}
             />
           </Col>