diff --git a/packages/constants/src/payment.ts b/packages/constants/src/payment.ts index 6c82b0e30f..6fc554a5b5 100644 --- a/packages/constants/src/payment.ts +++ b/packages/constants/src/payment.ts @@ -72,23 +72,23 @@ export const PLANE_COMMUNITY_PRODUCTS: Record = { prices: [ { id: `price_yearly_${EProductSubscriptionEnum.BUSINESS}`, - unit_amount: 0, + unit_amount: 15600, recurring: "year", currency: "usd", - workspace_amount: 0, + workspace_amount: 15600, product: EProductSubscriptionEnum.BUSINESS, }, { id: `price_monthly_${EProductSubscriptionEnum.BUSINESS}`, - unit_amount: 0, + unit_amount: 1500, recurring: "month", currency: "usd", - workspace_amount: 0, + workspace_amount: 1500, product: EProductSubscriptionEnum.BUSINESS, }, ], payment_quantity: 1, - is_active: false, + is_active: true, }, [EProductSubscriptionEnum.ENTERPRISE]: { id: EProductSubscriptionEnum.ENTERPRISE, @@ -141,8 +141,8 @@ export const SUBSCRIPTION_REDIRECTION_URLS: Record = observer((props) => {
{isSubscriptionActive && displayPrice !== undefined && ( - - {"$" + displayPrice} - +
+ +
)} -
+
{pricingDescription &&
{pricingDescription}
} {pricingSecondaryDescription && (
diff --git a/web/core/components/license/modal/card/checkout-button.tsx b/web/core/components/license/modal/card/checkout-button.tsx index 9e81585cd5..71a5bebc93 100644 --- a/web/core/components/license/modal/card/checkout-button.tsx +++ b/web/core/components/license/modal/card/checkout-button.tsx @@ -6,8 +6,10 @@ import { EProductSubscriptionEnum } from "@plane/constants"; import { IPaymentProduct, TSubscriptionPrice } from "@plane/types"; import { getButtonStyling, Loader } from "@plane/ui"; import { cn } from "@plane/utils"; -// helpers +// components import { getUpgradeButtonStyle } from "@/components/workspace/billing/subscription"; +// local imports +import { DiscountInfo } from "./discount-info"; export type TCheckoutParams = { planVariant: EProductSubscriptionEnum; @@ -56,8 +58,13 @@ export const PlanCheckoutButton: FC = observer((props) => { ) : ( - {price.currency} - {price.price} + )}
diff --git a/web/core/components/license/modal/card/discount-info.tsx b/web/core/components/license/modal/card/discount-info.tsx new file mode 100644 index 0000000000..27ca787967 --- /dev/null +++ b/web/core/components/license/modal/card/discount-info.tsx @@ -0,0 +1,61 @@ +import { useTheme } from "next-themes"; +// plane imports +import { EProductSubscriptionEnum } from "@plane/constants"; +import { TBillingFrequency } from "@plane/types"; +import { cn } from "@plane/utils"; + +type TDiscountInfoProps = { + className?: string; + currency: string; + frequency: TBillingFrequency; + price: number; + subscriptionType: EProductSubscriptionEnum; +}; + +const PLANS_WITH_DISCOUNT = [EProductSubscriptionEnum.PRO]; + +const getActualPrice = (frequency: TBillingFrequency, subscriptionType: EProductSubscriptionEnum): number | null => { + switch (subscriptionType) { + case EProductSubscriptionEnum.PRO: + return frequency === "month" ? 10 : 8; + default: + return null; + } +}; + +export const DiscountInfo = ({ className, currency, frequency, price, subscriptionType }: TDiscountInfoProps) => { + const { resolvedTheme } = useTheme(); + // derived values + const actualPrice = getActualPrice(frequency, subscriptionType); + + if (!PLANS_WITH_DISCOUNT.includes(subscriptionType)) { + return ( + <> + {currency} + {price} + + ); + } + + return ( + <> + {actualPrice != price && ( + + image + {currency} + {actualPrice} + + )} + {currency} + {price} + + ); +};