mirror of
https://github.com/casdoor/casdoor.git
synced 2025-07-04 05:10:19 +08:00
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>
This commit is contained in:
haiwu
@ -657,7 +657,8 @@ class App extends Component {
|
||||
window.location.pathname.startsWith("/result") ||
|
||||
window.location.pathname.startsWith("/cas") ||
|
||||
window.location.pathname.startsWith("/auto-signup") ||
|
||||
window.location.pathname.startsWith("/select-plan");
|
||||
window.location.pathname.startsWith("/select-plan") ||
|
||||
window.location.pathname.startsWith("/buy-plan");
|
||||
}
|
||||
|
||||
renderPage() {
|
||||
|
||||
@ -29,6 +29,8 @@ import PromptPage from "./auth/PromptPage";
|
||||
import ResultPage from "./auth/ResultPage";
|
||||
import CasLogout from "./auth/CasLogout";
|
||||
import {authConfig} from "./auth/Auth";
|
||||
import ProductBuyPage from "./ProductBuyPage";
|
||||
import PaymentResultPage from "./PaymentResultPage";
|
||||
|
||||
class EntryPage extends React.Component {
|
||||
constructor(props) {
|
||||
@ -108,7 +110,9 @@ class EntryPage extends React.Component {
|
||||
<Route exact path="/result/:applicationName" render={(props) => this.renderHomeIfLoggedIn(<ResultPage {...this.props} application={this.state.application} onUpdateApplication={onUpdateApplication} {...props} />)} />
|
||||
<Route exact path="/cas/:owner/:casApplicationName/logout" render={(props) => this.renderHomeIfLoggedIn(<CasLogout {...this.props} application={this.state.application} onUpdateApplication={onUpdateApplication} {...props} />)} />
|
||||
<Route exact path="/cas/:owner/:casApplicationName/login" render={(props) => {return (<LoginPage {...this.props} application={this.state.application} type={"cas"} mode={"signin"} onUpdateApplication={onUpdateApplication} {...props} />);}} />
|
||||
<Route exact path="/select-plan/:owner/:pricingName" render={(props) => this.renderHomeIfLoggedIn(<PricingPage {...this.props} pricing={this.state.pricing} onUpdatePricing={onUpdatePricing} {...props} />)} />
|
||||
<Route exact path="/select-plan/:owner/:pricingName" render={(props) => <PricingPage {...this.props} pricing={this.state.pricing} onUpdatePricing={onUpdatePricing} {...props} />} />
|
||||
<Route exact path="/buy-plan/:owner/:pricingName" render={(props) => <ProductBuyPage {...this.props} pricing={this.state.pricing} onUpdatePricing={onUpdatePricing} {...props} />} />
|
||||
<Route exact path="/buy-plan/:owner/:pricingName/result" render={(props) => <PaymentResultPage {...this.props} pricing={this.state.pricing} onUpdatePricing={onUpdatePricing} {...props} />} />
|
||||
</Switch>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -158,14 +158,6 @@ class PaymentListPage extends BaseListPage {
|
||||
return Setting.getFormattedDate(text);
|
||||
},
|
||||
},
|
||||
// {
|
||||
// title: i18next.t("general:Display name"),
|
||||
// dataIndex: 'displayName',
|
||||
// key: 'displayName',
|
||||
// width: '160px',
|
||||
// sorter: true,
|
||||
// ...this.getColumnSearchProps('displayName'),
|
||||
// },
|
||||
{
|
||||
title: i18next.t("provider:Type"),
|
||||
dataIndex: "type",
|
||||
@ -187,6 +179,13 @@ class PaymentListPage extends BaseListPage {
|
||||
// width: '160px',
|
||||
sorter: true,
|
||||
...this.getColumnSearchProps("productDisplayName"),
|
||||
render: (text, record, index) => {
|
||||
return (
|
||||
<Link to={`/products/${record.owner}/${record.productName}`}>
|
||||
{text}
|
||||
</Link>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: i18next.t("product:Price"),
|
||||
|
||||
@ -15,17 +15,24 @@
|
||||
import React from "react";
|
||||
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 Setting from "./Setting";
|
||||
import i18next from "i18next";
|
||||
|
||||
class PaymentResultPage extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
this.state = {
|
||||
classes: props,
|
||||
paymentName: props.match.params.paymentName,
|
||||
organizationName: props.match.params.organizationName,
|
||||
owner: props.match?.params?.organizationName ?? props.match?.params?.owner ?? null,
|
||||
paymentName: props.match?.params?.paymentName ?? null,
|
||||
pricingName: props.pricingName ?? props.match?.params?.pricingName ?? null,
|
||||
subscriptionName: params.get("subscription"),
|
||||
payment: null,
|
||||
pricing: props.pricing ?? null,
|
||||
subscription: props.subscription ?? null,
|
||||
timeout: null,
|
||||
};
|
||||
}
|
||||
@ -40,28 +47,77 @@ class PaymentResultPage extends React.Component {
|
||||
}
|
||||
}
|
||||
|
||||
getPayment() {
|
||||
PaymentBackend.getPayment(this.state.organizationName, this.state.paymentName)
|
||||
.then((res) => {
|
||||
this.setState({
|
||||
payment: res.data,
|
||||
});
|
||||
// window.console.log("payment=", res.data);
|
||||
if (res.data.state === "Created") {
|
||||
if (["PayPal", "Stripe"].includes(res.data.type)) {
|
||||
this.setState({
|
||||
timeout: setTimeout(() => {
|
||||
PaymentBackend.notifyPayment(this.state.organizationName, this.state.paymentName)
|
||||
.then((res) => {
|
||||
this.getPayment();
|
||||
});
|
||||
}, 1000),
|
||||
});
|
||||
} else {
|
||||
this.setState({timeout: setTimeout(() => this.getPayment(), 1000)});
|
||||
}
|
||||
}
|
||||
setStateAsync(state) {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.setState(state, () => {
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
onUpdatePricing(pricing) {
|
||||
this.props.onUpdatePricing(pricing);
|
||||
}
|
||||
|
||||
async getPayment() {
|
||||
if (!(this.state.owner && (this.state.paymentName || (this.state.pricingName && this.state.subscriptionName)))) {
|
||||
return ;
|
||||
}
|
||||
try {
|
||||
// loading price & subscription
|
||||
if (this.state.pricingName && this.state.subscriptionName) {
|
||||
if (!this.state.pricing) {
|
||||
const res = await PricingBackend.getPricing(this.state.owner, this.state.pricingName);
|
||||
if (res.status !== "ok") {
|
||||
throw new Error(res.msg);
|
||||
}
|
||||
const pricing = res.data;
|
||||
await this.setStateAsync({
|
||||
pricing: pricing,
|
||||
});
|
||||
}
|
||||
if (!this.state.subscription) {
|
||||
const res = await SubscriptionBackend.getSubscription(this.state.owner, this.state.subscriptionName);
|
||||
if (res.status !== "ok") {
|
||||
throw new Error(res.msg);
|
||||
}
|
||||
const subscription = res.data;
|
||||
await this.setStateAsync({
|
||||
subscription: subscription,
|
||||
});
|
||||
}
|
||||
const paymentName = this.state.subscription.payment;
|
||||
await this.setStateAsync({
|
||||
paymentName: paymentName,
|
||||
});
|
||||
this.onUpdatePricing(this.state.pricing);
|
||||
}
|
||||
const res = await PaymentBackend.getPayment(this.state.owner, this.state.paymentName);
|
||||
if (res.status !== "ok") {
|
||||
throw new Error(res.msg);
|
||||
}
|
||||
const payment = res.data;
|
||||
await this.setStateAsync({
|
||||
payment: payment,
|
||||
});
|
||||
if (payment.state === "Created") {
|
||||
if (["PayPal", "Stripe"].includes(payment.type)) {
|
||||
this.setState({
|
||||
timeout: setTimeout(async() => {
|
||||
await PaymentBackend.notifyPayment(this.state.owner, this.state.paymentName);
|
||||
this.getPayment();
|
||||
}, 1000),
|
||||
});
|
||||
} else {
|
||||
this.setState({
|
||||
timeout: setTimeout(() => this.getPayment(), 1000),
|
||||
});
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
Setting.showMessage("error", err.message);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
goToPaymentUrl(payment) {
|
||||
@ -81,7 +137,7 @@ class PaymentResultPage extends React.Component {
|
||||
|
||||
if (payment.state === "Paid") {
|
||||
return (
|
||||
<div>
|
||||
<div className="login-content">
|
||||
{
|
||||
Setting.renderHelmet(payment)
|
||||
}
|
||||
@ -101,7 +157,7 @@ class PaymentResultPage extends React.Component {
|
||||
);
|
||||
} else if (payment.state === "Created") {
|
||||
return (
|
||||
<div>
|
||||
<div className="login-content">
|
||||
{
|
||||
Setting.renderHelmet(payment)
|
||||
}
|
||||
@ -117,7 +173,7 @@ class PaymentResultPage extends React.Component {
|
||||
);
|
||||
} else if (payment.state === "Canceled") {
|
||||
return (
|
||||
<div>
|
||||
<div className="login-content">
|
||||
{
|
||||
Setting.renderHelmet(payment)
|
||||
}
|
||||
@ -137,7 +193,7 @@ class PaymentResultPage extends React.Component {
|
||||
);
|
||||
} else if (payment.state === "Timeout") {
|
||||
return (
|
||||
<div>
|
||||
<div className="login-content">
|
||||
{
|
||||
Setting.renderHelmet(payment)
|
||||
}
|
||||
@ -157,7 +213,7 @@ class PaymentResultPage extends React.Component {
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div>
|
||||
<div className="login-content">
|
||||
{
|
||||
Setting.renderHelmet(payment)
|
||||
}
|
||||
|
||||
@ -18,6 +18,7 @@ import * as OrganizationBackend from "./backend/OrganizationBackend";
|
||||
import * as RoleBackend from "./backend/RoleBackend";
|
||||
import * as PlanBackend from "./backend/PlanBackend";
|
||||
import * as UserBackend from "./backend/UserBackend";
|
||||
import * as ProviderBackend from "./backend/ProviderBackend";
|
||||
import * as Setting from "./Setting";
|
||||
import i18next from "i18next";
|
||||
|
||||
@ -28,14 +29,14 @@ class PlanEditPage extends React.Component {
|
||||
super(props);
|
||||
this.state = {
|
||||
classes: props,
|
||||
organizationName: props.organizationName !== undefined ? props.organizationName : props.match.params.organizationName,
|
||||
planName: props.match.params.planName,
|
||||
organizationName: props?.organizationName ?? props?.match?.params?.organizationName ?? null,
|
||||
planName: props?.match?.params?.planName ?? null,
|
||||
plan: null,
|
||||
organizations: [],
|
||||
users: [],
|
||||
roles: [],
|
||||
providers: [],
|
||||
mode: props.location.mode !== undefined ? props.location.mode : "edit",
|
||||
paymentProviders: [],
|
||||
mode: props?.location?.mode ?? "edit",
|
||||
};
|
||||
}
|
||||
|
||||
@ -58,6 +59,7 @@ class PlanEditPage extends React.Component {
|
||||
|
||||
this.getUsers(this.state.organizationName);
|
||||
this.getRoles(this.state.organizationName);
|
||||
this.getPaymentProviders(this.state.organizationName);
|
||||
});
|
||||
}
|
||||
|
||||
@ -89,6 +91,20 @@ class PlanEditPage extends React.Component {
|
||||
});
|
||||
}
|
||||
|
||||
getPaymentProviders(organizationName) {
|
||||
ProviderBackend.getProviders(organizationName)
|
||||
.then((res) => {
|
||||
if (res.status === "ok") {
|
||||
this.setState({
|
||||
paymentProviders: res.data.filter(provider => provider.category === "Payment"),
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
Setting.showMessage("error", res.msg);
|
||||
});
|
||||
}
|
||||
|
||||
getOrganizations() {
|
||||
OrganizationBackend.getOrganizations("admin")
|
||||
.then((res) => {
|
||||
@ -165,7 +181,7 @@ class PlanEditPage extends React.Component {
|
||||
</Col>
|
||||
<Col span={22} >
|
||||
<Select virtual={false} style={{width: "100%"}} value={this.state.plan.role} onChange={(value => {this.updatePlanField("role", value);})}
|
||||
options={this.state.roles.map((role) => Setting.getOption(`${role.owner}/${role.name}`, `${role.owner}/${role.name}`))
|
||||
options={this.state.roles.map((role) => Setting.getOption(role.name, role.name))
|
||||
} />
|
||||
</Col>
|
||||
</Row>
|
||||
@ -216,6 +232,18 @@ class PlanEditPage extends React.Component {
|
||||
</Select>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row style={{marginTop: "20px"}} >
|
||||
<Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
|
||||
{Setting.getLabel(i18next.t("product:Payment providers"), i18next.t("product:Payment providers - Tooltip"))} :
|
||||
</Col>
|
||||
<Col span={22} >
|
||||
<Select virtual={false} mode="multiple" style={{width: "100%"}} value={this.state.plan.paymentProviders ?? []} onChange={(value => {this.updatePlanField("paymentProviders", value);})}>
|
||||
{
|
||||
this.state.paymentProviders.map((provider, index) => <Option key={index} value={provider.name}>{provider.name}</Option>)
|
||||
}
|
||||
</Select>
|
||||
</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"))} :
|
||||
|
||||
@ -126,6 +126,14 @@ class PlanListPage extends BaseListPage {
|
||||
sorter: true,
|
||||
...this.getColumnSearchProps("displayName"),
|
||||
},
|
||||
{
|
||||
title: i18next.t("payment:Currency"),
|
||||
dataIndex: "currency",
|
||||
key: "currency",
|
||||
width: "120px",
|
||||
sorter: true,
|
||||
...this.getColumnSearchProps("currency"),
|
||||
},
|
||||
{
|
||||
title: i18next.t("plan:Price per month"),
|
||||
dataIndex: "pricePerMonth",
|
||||
@ -148,7 +156,21 @@ class PlanListPage extends BaseListPage {
|
||||
...this.getColumnSearchProps("role"),
|
||||
render: (text, record, index) => {
|
||||
return (
|
||||
<Link to={`/roles/${encodeURIComponent(text)}`}>
|
||||
<Link to={`/roles/${record.owner}/${text}`}>
|
||||
{text}
|
||||
</Link>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: i18next.t("plan:Related product"),
|
||||
dataIndex: "product",
|
||||
key: "product",
|
||||
width: "130px",
|
||||
...this.getColumnSearchProps("product"),
|
||||
render: (text, record, index) => {
|
||||
return (
|
||||
<Link to={`/products/${record.owner}/${text}`}>
|
||||
{text}
|
||||
</Link>
|
||||
);
|
||||
|
||||
@ -190,7 +190,7 @@ class PricingEditPage extends React.Component {
|
||||
onChange={(value => {
|
||||
this.updatePricingField("plans", value);
|
||||
})}
|
||||
options={this.state.plans.map((plan) => Setting.getOption(`${plan.owner}/${plan.name}`, `${plan.owner}/${plan.name}`))}
|
||||
options={this.state.plans.map((plan) => Setting.getOption(plan.name, plan.name))}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
@ -294,7 +294,7 @@ class PricingEditPage extends React.Component {
|
||||
</Button>
|
||||
</Col>
|
||||
<Col>
|
||||
<PricingPage pricing={this.state.pricing}></PricingPage>
|
||||
<PricingPage pricing={this.state.pricing} owner={this.state.pricing.owner}></PricingPage>
|
||||
</Col>
|
||||
</React.Fragment>
|
||||
);
|
||||
|
||||
@ -14,7 +14,8 @@
|
||||
|
||||
import React from "react";
|
||||
import {Link} from "react-router-dom";
|
||||
import {Button, Switch, Table} from "antd";
|
||||
import {Button, Col, Row, Switch, Table, Tooltip} from "antd";
|
||||
import {EditOutlined} from "@ant-design/icons";
|
||||
import moment from "moment";
|
||||
import * as Setting from "./Setting";
|
||||
import * as PricingBackend from "./backend/PricingBackend";
|
||||
@ -118,11 +119,58 @@ class PricingListPage extends BaseListPage {
|
||||
title: i18next.t("general:Display name"),
|
||||
dataIndex: "displayName",
|
||||
key: "displayName",
|
||||
// width: "170px",
|
||||
width: "170px",
|
||||
sorter: true,
|
||||
...this.getColumnSearchProps("displayName"),
|
||||
},
|
||||
|
||||
{
|
||||
title: i18next.t("general:Application"),
|
||||
dataIndex: "application",
|
||||
key: "application",
|
||||
width: "170px",
|
||||
sorter: true,
|
||||
...this.getColumnSearchProps("application"),
|
||||
render: (text, record, index) => {
|
||||
return (
|
||||
<Link to={`/applications/${record.owner}/${text}`}>
|
||||
{text}
|
||||
</Link>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: i18next.t("general:Plans"),
|
||||
dataIndex: "plans",
|
||||
key: "plans",
|
||||
// width: "170px",
|
||||
sorter: true,
|
||||
...this.getColumnSearchProps("plans"),
|
||||
render: (plans, record, index) => {
|
||||
if (plans.length === 0) {
|
||||
return `(${i18next.t("general:empty")})`;
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<Row>
|
||||
{
|
||||
plans.map((plan) => (
|
||||
<Col key={plan}>
|
||||
<div style={{display: "inline", marginRight: "20px"}}>
|
||||
<Tooltip placement="topLeft" title="Edit">
|
||||
<Button style={{marginRight: "5px"}} icon={<EditOutlined />} size="small" onClick={() => Setting.goToLinkSoft(this, `/plans/${record.owner}/${plan}`)} />
|
||||
</Tooltip>
|
||||
<Link to={`/plans/${record.owner}/${plan}`}>
|
||||
{plan}
|
||||
</Link>
|
||||
</div>
|
||||
</Col>
|
||||
))
|
||||
}
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: i18next.t("general:Is enabled"),
|
||||
dataIndex: "isEnabled",
|
||||
|
||||
@ -17,16 +17,24 @@ 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 PlanBackend from "./backend/PlanBackend";
|
||||
import * as PricingBackend from "./backend/PricingBackend";
|
||||
import * as Setting from "./Setting";
|
||||
|
||||
class ProductBuyPage extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
this.state = {
|
||||
classes: props,
|
||||
organizationName: props.organizationName !== undefined ? props.organizationName : props?.match?.params?.organizationName,
|
||||
productName: props.productName !== undefined ? props.productName : props?.match?.params?.productName,
|
||||
owner: props?.organizationName ?? props?.match?.params?.organizationName ?? props?.match?.params?.owner ?? null,
|
||||
productName: props?.productName ?? props?.match?.params?.productName ?? null,
|
||||
pricingName: props?.pricingName ?? props?.match?.params?.pricingName ?? null,
|
||||
planName: params.get("plan"),
|
||||
userName: params.get("user"),
|
||||
product: null,
|
||||
pricing: props?.pricing ?? null,
|
||||
plan: null,
|
||||
isPlacingOrder: false,
|
||||
qrCodeModalProvider: null,
|
||||
};
|
||||
@ -36,20 +44,58 @@ class ProductBuyPage extends React.Component {
|
||||
this.getProduct();
|
||||
}
|
||||
|
||||
getProduct() {
|
||||
if (this.state.productName === undefined || this.state.organizationName === undefined) {
|
||||
setStateAsync(state) {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.setState(state, () => {
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
onUpdatePricing(pricing) {
|
||||
this.props.onUpdatePricing(pricing);
|
||||
}
|
||||
|
||||
async getProduct() {
|
||||
if (!this.state.owner || (!this.state.productName && !this.state.pricingName)) {
|
||||
return ;
|
||||
}
|
||||
ProductBackend.getProduct(this.state.organizationName, this.state.productName)
|
||||
.then((res) => {
|
||||
if (res.status === "error") {
|
||||
Setting.showMessage("error", res.msg);
|
||||
return;
|
||||
try {
|
||||
// load pricing & plan
|
||||
if (this.state.pricingName) {
|
||||
if (!this.state.planName || !this.state.userName) {
|
||||
return ;
|
||||
}
|
||||
this.setState({
|
||||
product: res.data,
|
||||
let res = await PricingBackend.getPricing(this.state.owner, this.state.pricingName);
|
||||
if (res.status !== "ok") {
|
||||
throw new Error(res.msg);
|
||||
}
|
||||
const pricing = res.data;
|
||||
res = await PlanBackend.getPlan(this.state.owner, this.state.planName);
|
||||
if (res.status !== "ok") {
|
||||
throw new Error(res.msg);
|
||||
}
|
||||
const plan = res.data;
|
||||
const productName = plan.product;
|
||||
await this.setStateAsync({
|
||||
pricing: pricing,
|
||||
plan: plan,
|
||||
productName: productName,
|
||||
});
|
||||
this.onUpdatePricing(pricing);
|
||||
}
|
||||
// load product
|
||||
const res = await ProductBackend.getProduct(this.state.owner, this.state.productName);
|
||||
if (res.status !== "ok") {
|
||||
throw new Error(res.msg);
|
||||
}
|
||||
this.setState({
|
||||
product: res.data,
|
||||
});
|
||||
} catch (err) {
|
||||
Setting.showMessage("error", err.message);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
getProductObj() {
|
||||
@ -96,7 +142,7 @@ class ProductBuyPage extends React.Component {
|
||||
isPlacingOrder: true,
|
||||
});
|
||||
|
||||
ProductBackend.buyProduct(product.owner, product.name, provider.name)
|
||||
ProductBackend.buyProduct(product.owner, product.name, provider.name, this.state.pricingName ?? "", this.state.planName ?? "", this.state.userName ?? "")
|
||||
.then((res) => {
|
||||
if (res.status === "ok") {
|
||||
const payUrl = res.data;
|
||||
@ -215,11 +261,11 @@ class ProductBuyPage extends React.Component {
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="login-content">
|
||||
<Spin spinning={this.state.isPlacingOrder} size="large" tip={i18next.t("product:Placing order...")} style={{paddingTop: "10%"}} >
|
||||
<Descriptions title={i18next.t("product:Buy Product")} bordered>
|
||||
<Descriptions title={<span style={{fontSize: 28}}>{i18next.t("product:Buy Product")}</span>} bordered>
|
||||
<Descriptions.Item label={i18next.t("general:Name")} span={3}>
|
||||
<span style={{fontSize: 28}}>
|
||||
<span style={{fontSize: 25}}>
|
||||
{Setting.getLanguageText(product?.displayName)}
|
||||
</span>
|
||||
</Descriptions.Item>
|
||||
|
||||
@ -1170,9 +1170,9 @@ export function getTags(tags, urlPrefix = null) {
|
||||
return res;
|
||||
}
|
||||
|
||||
export function getTag(color, text) {
|
||||
export function getTag(color, text, icon) {
|
||||
return (
|
||||
<Tag color={color}>
|
||||
<Tag color={color} icon={icon}>
|
||||
{text}
|
||||
</Tag>
|
||||
);
|
||||
@ -1254,3 +1254,13 @@ export function builtInObject(obj) {
|
||||
}
|
||||
return obj.owner === "built-in" && BuiltInObjects.includes(obj.name);
|
||||
}
|
||||
|
||||
export function getCurrencySymbol(currency) {
|
||||
if (currency === "USD" || currency === "usd") {
|
||||
return "$";
|
||||
} else if (currency === "CNY" || currency === "cny") {
|
||||
return "¥";
|
||||
} else {
|
||||
return currency;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -15,6 +15,7 @@
|
||||
import React from "react";
|
||||
import {Link} from "react-router-dom";
|
||||
import {Button, Table} from "antd";
|
||||
import {ClockCircleOutlined, CloseCircleOutlined, ExclamationCircleOutlined, MinusCircleOutlined, SyncOutlined} from "@ant-design/icons";
|
||||
import moment from "moment";
|
||||
import * as Setting from "./Setting";
|
||||
import * as SubscriptionBackend from "./backend/SubscriptionBackend";
|
||||
@ -26,24 +27,20 @@ class SubscriptionListPage extends BaseListPage {
|
||||
newSubscription() {
|
||||
const randomName = Setting.getRandomName();
|
||||
const owner = Setting.getRequestOrganization(this.props.account);
|
||||
const defaultDuration = 365;
|
||||
const defaultDuration = 30;
|
||||
|
||||
return {
|
||||
owner: owner,
|
||||
name: `subscription_${randomName}`,
|
||||
name: `sub_${randomName}`,
|
||||
createdTime: moment().format(),
|
||||
displayName: `New Subscription - ${randomName}`,
|
||||
startDate: moment().format(),
|
||||
endDate: moment().add(defaultDuration, "d").format(),
|
||||
startTime: moment().format(),
|
||||
endTime: moment().add(defaultDuration, "d").format(),
|
||||
duration: defaultDuration,
|
||||
description: "",
|
||||
user: "",
|
||||
plan: "",
|
||||
isEnabled: true,
|
||||
submitter: this.props.account.name,
|
||||
approver: this.props.account.name,
|
||||
approveTime: moment().format(),
|
||||
state: "Approved",
|
||||
state: "Active",
|
||||
};
|
||||
}
|
||||
|
||||
@ -139,6 +136,34 @@ class SubscriptionListPage extends BaseListPage {
|
||||
width: "140px",
|
||||
...this.getColumnSearchProps("duration"),
|
||||
},
|
||||
{
|
||||
title: i18next.t("subscription:Start time"),
|
||||
dataIndex: "startTime",
|
||||
key: "startTime",
|
||||
width: "140px",
|
||||
...this.getColumnSearchProps("startTime"),
|
||||
},
|
||||
{
|
||||
title: i18next.t("subscription:End time"),
|
||||
dataIndex: "endTime",
|
||||
key: "endTime",
|
||||
width: "140px",
|
||||
...this.getColumnSearchProps("endTime"),
|
||||
},
|
||||
{
|
||||
title: i18next.t("general:Pricing"),
|
||||
dataIndex: "pricing",
|
||||
key: "pricing",
|
||||
width: "140px",
|
||||
...this.getColumnSearchProps("pricing"),
|
||||
render: (text, record, index) => {
|
||||
return (
|
||||
<Link to={`/pricings/${record.owner}/${text}`}>
|
||||
{text}
|
||||
</Link>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: i18next.t("general:Plan"),
|
||||
dataIndex: "plan",
|
||||
@ -147,7 +172,7 @@ class SubscriptionListPage extends BaseListPage {
|
||||
...this.getColumnSearchProps("plan"),
|
||||
render: (text, record, index) => {
|
||||
return (
|
||||
<Link to={`/plans/${text}`}>
|
||||
<Link to={`/plans/${record.owner}/${text}`}>
|
||||
{text}
|
||||
</Link>
|
||||
);
|
||||
@ -161,7 +186,21 @@ class SubscriptionListPage extends BaseListPage {
|
||||
...this.getColumnSearchProps("user"),
|
||||
render: (text, record, index) => {
|
||||
return (
|
||||
<Link to={`/users/${text}`}>
|
||||
<Link to={`/users/${record.owner}/${text}`}>
|
||||
{text}
|
||||
</Link>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: i18next.t("general:Payment"),
|
||||
dataIndex: "payment",
|
||||
key: "payment",
|
||||
width: "140px",
|
||||
...this.getColumnSearchProps("payment"),
|
||||
render: (text, record, index) => {
|
||||
return (
|
||||
<Link to={`/payments/${record.owner}/${text}`}>
|
||||
{text}
|
||||
</Link>
|
||||
);
|
||||
@ -176,10 +215,18 @@ class SubscriptionListPage extends BaseListPage {
|
||||
...this.getColumnSearchProps("state"),
|
||||
render: (text, record, index) => {
|
||||
switch (text) {
|
||||
case "Approved":
|
||||
return Setting.getTag("success", i18next.t("permission:Approved"));
|
||||
case "Pending":
|
||||
return Setting.getTag("error", i18next.t("permission:Pending"));
|
||||
return Setting.getTag("processing", i18next.t("permission:Pending"), <ExclamationCircleOutlined />);
|
||||
case "Active":
|
||||
return Setting.getTag("success", i18next.t("permission:Active"), <SyncOutlined spin />);
|
||||
case "Upcoming":
|
||||
return Setting.getTag("warning", i18next.t("permission:Upcoming"), <ClockCircleOutlined />);
|
||||
case "Expired":
|
||||
return Setting.getTag("warning", i18next.t("permission:Expired"), <ClockCircleOutlined />);
|
||||
case "Error":
|
||||
return Setting.getTag("error", i18next.t("permission:Error"), <CloseCircleOutlined />);
|
||||
case "Suspended":
|
||||
return Setting.getTag("default", i18next.t("permission:Suspended"), <MinusCircleOutlined />);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
|
||||
@ -390,7 +390,7 @@ class UserEditPage extends React.Component {
|
||||
</Col>
|
||||
<Col span={22} >
|
||||
<Select virtual={false} style={{width: "100%"}} value={this.state.user.type} onChange={(value => {this.updateUserField("type", value);})}
|
||||
options={["normal-user"].map(item => Setting.getOption(item, item))}
|
||||
options={["normal-user", "paid-user"].map(item => Setting.getOption(item, item))}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
@ -403,6 +403,14 @@ class LoginPage extends React.Component {
|
||||
/>);
|
||||
},
|
||||
});
|
||||
} else if (res.data === "SelectPlan") {
|
||||
// paid-user does not have active or pending subscription, go to application default pricing page to select-plan
|
||||
const pricing = res.data2;
|
||||
Setting.goToLink(`/select-plan/${pricing.owner}/${pricing.name}?user=${values.username}`);
|
||||
} else if (res.data === "BuyPlanResult") {
|
||||
// paid-user has pending subscription, go to buy-plan/result apge to notify payment result
|
||||
const sub = res.data2;
|
||||
Setting.goToLink(`/buy-plan/${sub.owner}/${sub.pricing}/result?subscription=${sub.name}`);
|
||||
} else {
|
||||
callback(res);
|
||||
}
|
||||
|
||||
@ -133,7 +133,11 @@ class SignupPage extends React.Component {
|
||||
});
|
||||
}
|
||||
|
||||
getResultPath(application) {
|
||||
getResultPath(application, signupParams) {
|
||||
if (signupParams?.plan && signupParams?.pricing) {
|
||||
// the prompt page needs the user to be signed in, so for paid-user sign up, just go to buy-plan page
|
||||
return `/buy-plan/${application.organization}/${signupParams?.pricing}?user=${signupParams.username}&plan=${signupParams.plan}`;
|
||||
}
|
||||
if (authConfig.appName === application.name) {
|
||||
return "/result";
|
||||
} else {
|
||||
@ -173,13 +177,13 @@ class SignupPage extends React.Component {
|
||||
const application = this.getApplicationObj();
|
||||
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
values["plan"] = params.get("plan");
|
||||
values["pricing"] = params.get("pricing");
|
||||
values.plan = params.get("plan");
|
||||
values.pricing = params.get("pricing");
|
||||
|
||||
AuthBackend.signup(values)
|
||||
.then((res) => {
|
||||
if (res.status === "ok") {
|
||||
if (Setting.hasPromptPage(application)) {
|
||||
if (Setting.hasPromptPage(application) && (!values.plan || !values.pricing)) {
|
||||
AuthBackend.getAccount("")
|
||||
.then((res) => {
|
||||
let account = null;
|
||||
@ -188,13 +192,13 @@ class SignupPage extends React.Component {
|
||||
account.organization = res.data2;
|
||||
|
||||
this.onUpdateAccount(account);
|
||||
Setting.goToLinkSoft(this, this.getResultPath(application));
|
||||
Setting.goToLinkSoft(this, this.getResultPath(application, values));
|
||||
} else {
|
||||
Setting.showMessage("error", `${i18next.t("application:Failed to sign in")}: ${res.msg}`);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
Setting.goToLinkSoft(this, this.getResultPath(application));
|
||||
Setting.goToLinkSoft(this, this.getResultPath(application, values));
|
||||
}
|
||||
} else {
|
||||
Setting.showMessage("error", i18next.t(`signup:${res.msg}`));
|
||||
|
||||
@ -24,18 +24,8 @@ export function getPlans(owner, page = "", pageSize = "", field = "", value = ""
|
||||
}).then(res => res.json());
|
||||
}
|
||||
|
||||
export function getPlanById(id, includeOption = false) {
|
||||
return fetch(`${Setting.ServerUrl}/api/get-plan?id=${id}&includeOption=${includeOption}`, {
|
||||
method: "GET",
|
||||
credentials: "include",
|
||||
headers: {
|
||||
"Accept-Language": Setting.getAcceptLanguage(),
|
||||
},
|
||||
}).then(res => res.json());
|
||||
}
|
||||
|
||||
export function getPlan(owner, name) {
|
||||
return fetch(`${Setting.ServerUrl}/api/get-plan?id=${owner}/${encodeURIComponent(name)}`, {
|
||||
export function getPlan(owner, name, includeOption = false) {
|
||||
return fetch(`${Setting.ServerUrl}/api/get-plan?id=${owner}/${encodeURIComponent(name)}&includeOption=${includeOption}`, {
|
||||
method: "GET",
|
||||
credentials: "include",
|
||||
headers: {
|
||||
|
||||
@ -70,8 +70,8 @@ export function deleteProduct(product) {
|
||||
}).then(res => res.json());
|
||||
}
|
||||
|
||||
export function buyProduct(owner, name, providerId) {
|
||||
return fetch(`${Setting.ServerUrl}/api/buy-product?id=${owner}/${encodeURIComponent(name)}&providerName=${providerId}`, {
|
||||
export function buyProduct(owner, name, providerName, pricingName = "", planName = "", userName = "") {
|
||||
return fetch(`${Setting.ServerUrl}/api/buy-product?id=${owner}/${encodeURIComponent(name)}&providerName=${providerName}&pricingName=${pricingName}&planName=${planName}&userName=${userName}`, {
|
||||
method: "POST",
|
||||
credentials: "include",
|
||||
headers: {
|
||||
|
||||
@ -24,11 +24,13 @@ import i18next from "i18next";
|
||||
class PricingPage extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
this.state = {
|
||||
classes: props,
|
||||
applications: null,
|
||||
owner: props.owner ?? (props.match?.params?.owner ?? null),
|
||||
pricingName: (props.pricingName ?? props.match?.params?.pricingName) ?? null,
|
||||
userName: params.get("user"),
|
||||
pricing: props.pricing,
|
||||
plans: null,
|
||||
loading: false,
|
||||
@ -39,7 +41,9 @@ class PricingPage extends React.Component {
|
||||
this.setState({
|
||||
applications: [],
|
||||
});
|
||||
|
||||
if (this.state.userName) {
|
||||
Setting.showMessage("info", `${i18next.t("pricing:paid-user do not have active subscription or pending subscription, please select a plan to buy")}`);
|
||||
}
|
||||
if (this.state.pricing) {
|
||||
this.loadPlans();
|
||||
} else {
|
||||
@ -60,7 +64,7 @@ class PricingPage extends React.Component {
|
||||
|
||||
loadPlans() {
|
||||
const plans = this.state.pricing.plans.map((plan) =>
|
||||
PlanBackend.getPlanById(plan, true));
|
||||
PlanBackend.getPlan(this.state.owner, plan, true));
|
||||
|
||||
Promise.all(plans)
|
||||
.then(results => {
|
||||
@ -70,7 +74,7 @@ class PricingPage extends React.Component {
|
||||
return;
|
||||
}
|
||||
this.setState({
|
||||
plans: results,
|
||||
plans: results.map(result => result.data),
|
||||
loading: false,
|
||||
});
|
||||
})
|
||||
@ -90,7 +94,6 @@ class PricingPage extends React.Component {
|
||||
Setting.showMessage("error", res.msg);
|
||||
return;
|
||||
}
|
||||
|
||||
this.setState({
|
||||
loading: false,
|
||||
pricing: res.data,
|
||||
@ -105,9 +108,12 @@ class PricingPage extends React.Component {
|
||||
|
||||
renderCards() {
|
||||
|
||||
const getUrlByPlan = (plan) => {
|
||||
const getUrlByPlan = (planName) => {
|
||||
const pricing = this.state.pricing;
|
||||
const signUpUrl = `/signup/${pricing.application}?plan=${plan}&pricing=${pricing.name}`;
|
||||
let signUpUrl = `/signup/${pricing.application}?plan=${planName}&pricing=${pricing.name}`;
|
||||
if (this.state.userName) {
|
||||
signUpUrl = `/buy-plan/${pricing.owner}/${pricing.name}?plan=${planName}&user=${this.state.userName}`;
|
||||
}
|
||||
return `${window.location.origin}${signUpUrl}`;
|
||||
};
|
||||
|
||||
|
||||
@ -29,21 +29,16 @@ class SingleCard extends React.Component {
|
||||
}
|
||||
|
||||
renderCard(plan, isSingle, link) {
|
||||
|
||||
return (
|
||||
<Col style={{minWidth: "320px", paddingLeft: "20px", paddingRight: "20px", paddingBottom: "20px", marginBottom: "20px", paddingTop: "0px"}} span={6}>
|
||||
<Card
|
||||
hoverable
|
||||
onClick={() => Setting.isMobile() ? window.location.href = link : null}
|
||||
style={isSingle ? {width: "320px", height: "100%"} : {width: "100%", height: "100%", paddingTop: "0px"}}
|
||||
title={<h2>{plan.displayName}</h2>}
|
||||
>
|
||||
<div style={{textAlign: "right"}}>
|
||||
<h2
|
||||
style={{marginTop: "0px"}}>{plan.displayName}</h2>
|
||||
</div>
|
||||
|
||||
<div style={{textAlign: "left"}} className="px-10 mt-5">
|
||||
<span style={{fontWeight: 700, fontSize: "48px"}}>$ {plan.pricePerMonth}</span>
|
||||
<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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user