mirror of
https://github.com/makeplane/plane.git
synced 2026-02-11 00:29:39 -06:00
[WEB-4253] improvement: minor enhancements to billing page (#7160)
This commit is contained in:
@@ -56,12 +56,14 @@ export const PlanUpgradeCard: FC<PlanUpgradeCardProps> = observer((props) => {
|
||||
href={TALK_TO_SALES_URL}
|
||||
isLoading={isLoading}
|
||||
features={features}
|
||||
product={product}
|
||||
prices={prices}
|
||||
upgradeLoaderType={upgradeLoaderType}
|
||||
verticalFeatureList={verticalFeatureList}
|
||||
extraFeatures={extraFeatures}
|
||||
isSelfHosted={isSelfHosted}
|
||||
isTrialAllowed={isTrialAllowed}
|
||||
renderTrialButton={renderTrialButton}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -5,7 +5,7 @@ import { observer } from "mobx-react";
|
||||
// types
|
||||
import { EProductSubscriptionEnum } from "@plane/constants";
|
||||
// plane imports
|
||||
import { TSubscriptionPrice } from "@plane/types";
|
||||
import { IPaymentProduct, TSubscriptionPrice } from "@plane/types";
|
||||
import { getButtonStyling, Loader } from "@plane/ui";
|
||||
import { cn } from "@plane/utils";
|
||||
// plane web imports
|
||||
@@ -18,12 +18,14 @@ export type TalkToSalesCardProps = {
|
||||
href: string;
|
||||
isLoading?: boolean;
|
||||
features: string[];
|
||||
product: IPaymentProduct | undefined;
|
||||
prices: TSubscriptionPrice[];
|
||||
upgradeLoaderType: Omit<EProductSubscriptionEnum, "FREE"> | undefined;
|
||||
verticalFeatureList?: boolean;
|
||||
extraFeatures?: string | React.ReactNode;
|
||||
isSelfHosted: boolean;
|
||||
isTrialAllowed: boolean;
|
||||
renderTrialButton?: (props: { productId: string | undefined; priceId: string | undefined }) => React.ReactNode;
|
||||
};
|
||||
|
||||
export const TalkToSalesCard: FC<TalkToSalesCardProps> = observer((props) => {
|
||||
@@ -31,6 +33,7 @@ export const TalkToSalesCard: FC<TalkToSalesCardProps> = observer((props) => {
|
||||
planVariant,
|
||||
href,
|
||||
features,
|
||||
product,
|
||||
prices,
|
||||
isLoading,
|
||||
verticalFeatureList = false,
|
||||
@@ -38,6 +41,7 @@ export const TalkToSalesCard: FC<TalkToSalesCardProps> = observer((props) => {
|
||||
upgradeLoaderType,
|
||||
isSelfHosted,
|
||||
isTrialAllowed,
|
||||
renderTrialButton,
|
||||
} = props;
|
||||
|
||||
const renderPriceContent = (price: TSubscriptionPrice) => (
|
||||
@@ -47,7 +51,7 @@ export const TalkToSalesCard: FC<TalkToSalesCardProps> = observer((props) => {
|
||||
</>
|
||||
);
|
||||
|
||||
const renderActionButton = () => {
|
||||
const renderActionButton = (price: TSubscriptionPrice) => {
|
||||
const upgradeButtonStyle =
|
||||
getUpgradeButtonStyle(planVariant, !!upgradeLoaderType) ?? getButtonStyling("primary", "lg", !!upgradeLoaderType);
|
||||
|
||||
@@ -81,7 +85,15 @@ export const TalkToSalesCard: FC<TalkToSalesCardProps> = observer((props) => {
|
||||
>
|
||||
Talk to Sales
|
||||
</a>
|
||||
{isTrialAllowed && !isSelfHosted && <div className="mt-4 h-4" />}
|
||||
{isTrialAllowed && !isSelfHosted && (
|
||||
<div className="mt-4 h-4 transition-all duration-300 animate-fade-in">
|
||||
{renderTrialButton &&
|
||||
renderTrialButton({
|
||||
productId: product?.id,
|
||||
priceId: price.id,
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
|
||||
Reference in New Issue
Block a user