feat: support subscription periods (yearly/monthly) (#2265)

* feat: support year/month subscription

* feat: add GetPrice() for plan

* feat: add GetDuration

* feat: gofumpt

* feat: add subscription mode for pricing

* feat: restrict auto create product operation

* fix: format code

* feat: add period for plan,remove period from pricing

* feat: format code

* feat: remove space

* feat: remove period in signup page

web/src/pricing/PricingPage.js

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import React from "react";
-import {Card, Col, Row} from "antd";
+import {Card, Col, Radio, Row} from "antd";
 import * as PricingBackend from "../backend/PricingBackend";
 import * as PlanBackend from "../backend/PlanBackend";
 import CustomGithubCorner from "../common/CustomGithubCorner";
@@ -33,6 +33,8 @@ class PricingPage extends React.Component {
       userName: params.get("user"),
       pricing: props.pricing,
       plans: null,
+      periods: null,
+      selectedPeriod: null,
       loading: false,
     };
   }
@@ -73,8 +75,12 @@ class PricingPage extends React.Component {
           Setting.showMessage("error", i18next.t("pricing:Failed to get plans"));
           return;
         }
+        const plans = results.map(result => result.data);
+        const periods = [... new Set(plans.map(plan => plan.period).filter(period => period !== ""))];
         this.setState({
-          plans: results.map(result => result.data),
+          plans: plans,
+          periods: periods,
+          selectedPeriod: periods?.[0],
           loading: false,
         });
       })
@@ -84,10 +90,9 @@ class PricingPage extends React.Component {
   }
 
   loadPricing(pricingName) {
-    if (pricingName === undefined) {
+    if (!pricingName) {
       return;
     }
-
     PricingBackend.getPricing(this.state.owner, pricingName)
       .then((res) => {
         if (res.status === "error") {
@@ -106,8 +111,31 @@ class PricingPage extends React.Component {
     this.props.onUpdatePricing(pricing);
   }
 
-  renderCards() {
+  renderSelectPeriod() {
+    if (!this.state.periods || this.state.periods.length <= 1) {
+      return null;
+    }
+    return (
+      <Radio.Group
+        value={this.state.selectedPeriod}
+        size="large"
+        buttonStyle="solid"
+        onChange={e => {
+          this.setState({selectedPeriod: e.target.value});
+        }}
+      >
+        {
+          this.state.periods.map(period => {
+            return (
+              <Radio.Button key={period} value={period}>{period}</Radio.Button>
+            );
+          })
+        }
+      </Radio.Group>
+    );
+  }
 
+  renderCards() {
     const getUrlByPlan = (planName) => {
       const pricing = this.state.pricing;
       let signUpUrl = `/signup/${pricing.application}?plan=${planName}&pricing=${pricing.name}`;
@@ -122,9 +150,9 @@ class PricingPage extends React.Component {
         <Card style={{border: "none"}} bodyStyle={{padding: 0}}>
           {
             this.state.plans.map(item => {
-              return (
+              return item.period === this.state.selectedPeriod ? (
                 <SingleCard link={getUrlByPlan(item.name)} key={item.name} plan={item} isSingle={this.state.plans.length === 1} />
-              );
+              ) : null;
             })
           }
         </Card>
@@ -135,9 +163,9 @@ class PricingPage extends React.Component {
           <Row style={{justifyContent: "center"}} gutter={24}>
             {
               this.state.plans.map(item => {
-                return (
+                return item.period === this.state.selectedPeriod ? (
                   <SingleCard style={{marginRight: "5px", marginLeft: "5px"}} link={getUrlByPlan(item.name)} key={item.name} plan={item} isSingle={this.state.plans.length === 1} />
-                );
+                ) : null;
               })
             }
           </Row>
@@ -161,6 +189,13 @@ class PricingPage extends React.Component {
             <div className="login-form">
               <h1 style={{fontSize: "48px", marginTop: "0px", marginBottom: "15px"}}>{pricing.displayName}</h1>
               <span style={{fontSize: "20px"}}>{pricing.description}</span>
+              <Row style={{width: "100%", marginTop: "40px"}}>
+                <Col span={24} style={{display: "flex", justifyContent: "center"}} >
+                  {
+                    this.renderSelectPeriod()
+                  }
+                </Col>
+              </Row>
               <Row style={{width: "100%", marginTop: "40px"}}>
                 <Col span={24} style={{display: "flex", justifyContent: "center"}} >
                   {

web/src/pricing/SingleCard.js

@@ -14,7 +14,7 @@
 
 import i18next from "i18next";
 import React from "react";
-import {Button, Card, Col} from "antd";
+import {Button, Card, Col, Row} from "antd";
 import * as Setting from "../Setting";
 import {withRouter} from "react-router-dom";
 
@@ -37,36 +37,41 @@ class SingleCard extends React.Component {
           style={isSingle ? {width: "320px", height: "100%"} : {width: "100%", height: "100%", paddingTop: "0px"}}
           title={<h2>{plan.displayName}</h2>}
         >
-          <div style={{textAlign: "left"}} className="px-10 mt-5">
-            <span style={{fontSize: "40px", fontWeight: 700}}>{Setting.getCurrencySymbol(plan.currency)} {plan.pricePerMonth}</span>
-            <span style={{fontSize: "18px", fontWeight: 600, color: "gray"}}>  {i18next.t("plan:per month")}</span>
-          </div>
+          <Col>
+            <Row>
+              <div style={{textAlign: "left"}} className="px-10 mt-5">
+                <span style={{fontSize: "40px", fontWeight: 700}}>{Setting.getCurrencySymbol(plan.currency)} {plan.price}</span>
+                <span style={{fontSize: "18px", fontWeight: 600, color: "gray"}}> {plan.period === "Yearly" ? i18next.t("plan:per year") : i18next.t("plan:per month")}</span>
+              </div>
+            </Row>
 
-          <br />
-          <div style={{textAlign: "left", fontSize: "18px"}}>
-            <Meta description={plan.description} />
-          </div>
-          <br />
-          <ul style={{listStyleType: "none", paddingLeft: "0px", textAlign: "left"}}>
-            {(plan.options ?? []).map((option) => {
-            // eslint-disable-next-line react/jsx-key
-              return <li>
-                <svg style={{height: "1rem", width: "1rem", fill: "green", marginRight: "10px"}} xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 20 20">
-                  <path d="M0 11l2-2 5 5L18 3l2 2L7 18z"></path>
-                </svg>
-                <span style={{fontSize: "16px"}}>{option}</span>
-              </li>;
-            })}
-          </ul>
-          <div style={{minHeight: "60px"}}>
+            <Row style={{height: "90px", paddingTop: "15px"}}>
+              <div style={{textAlign: "left", fontSize: "18px"}}>
+                <Meta description={plan.description} />
+              </div>
+            </Row>
 
-          </div>
-          <Button style={{width: "100%", position: "absolute", height: "50px", borderRadius: "0px", bottom: "0", left: "0"}} type="primary" key="subscribe" onClick={() => window.location.href = link}>
-            {
-              i18next.t("pricing:Getting started")
-            }
-          </Button>
+            {/* <ul style={{listStyleType: "none", paddingLeft: "0px", textAlign: "left"}}>
+              {(plan.options ?? []).map((option) => {
+              // eslint-disable-next-line react/jsx-key
+                return <li>
+                  <svg style={{height: "1rem", width: "1rem", fill: "green", marginRight: "10px"}} xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 20 20">
+                    <path d="M0 11l2-2 5 5L18 3l2 2L7 18z"></path>
+                  </svg>
+                  <span style={{fontSize: "16px"}}>{option}</span>
+                </li>;
+              })}
+            </ul> */}
+
+            <Row style={{paddingTop: "15px"}}>
+              <Button style={{width: "100%", height: "50px", borderRadius: "0px", bottom: "0", left: "0"}} type="primary" key="subscribe" onClick={() => window.location.href = link}>
+                {
+                  i18next.t("pricing:Getting started")
+                }
+              </Button>
+            </Row>
+          </Col>
         </Card>
       </Col>
     );