fix: paid users quantiy in website payment page. (#1027)

* fix: paid users quantiy in website payment page.

* fix: update paid user quantity logic.
This commit is contained in:
Prateek Shourya
2024-09-03 19:45:59 +05:30
committed by GitHub
parent 4d7d5dfd73
commit 39158b0efe
2 changed files with 8 additions and 17 deletions

View File

@@ -14,6 +14,7 @@ export type IPaymentProduct = {
id: string;
name: string;
type: Omit<TProductSubscriptionType, "FREE">;
payment_quantity: number;
prices: IPaymentProductPrice[];
};

View File

@@ -12,11 +12,9 @@ import { Button, Loader, setToast, TOAST_TYPE } from "@plane/ui";
// helpers
import { cn } from "@/helpers/common.helper";
// services
import { WorkspaceService } from "@/plane-web/services";
import { PaymentService } from "@/plane-web/services/payment.service";
const paymentService = new PaymentService();
const workspaceService = new WorkspaceService();
const calculateYearlyDiscount = (monthlyPrice: number, yearlyPricePerMonth: number): number => {
const monthlyCost = monthlyPrice * 12;
@@ -39,13 +37,6 @@ const CloudUpgradePlanPage = observer(() => {
const { selectedWorkspace: workspaceSlug } = useParams();
// fetch workspace members
const { data: workspaceMembers, isLoading: isFetching } = useSWR(
workspaceSlug ? `CLOUD_PRO_WORKSPACE_MEMBER_DETAILS` : null,
workspaceSlug ? () => workspaceService.fetchWorkspaceMembers(workspaceSlug.toString()) : null,
{ revalidateIfStale: false, revalidateOnFocus: false }
);
// fetch products
const { data: products, isLoading: isLoadingProduct } = useSWR(
workspaceSlug ? `CLOUD_PRO_PRODUCTS_${workspaceSlug?.toString()}` : null,
@@ -58,11 +49,10 @@ const CloudUpgradePlanPage = observer(() => {
);
// derived values
const totalWorkspaceMembers = (workspaceMembers || [])?.filter((member) => member.role >= 15)?.length;
const proProduct = (products || [])?.find((product: IPaymentProduct) => product?.type === "PRO");
const monthlyPlan = proProduct?.prices?.find((price) => price.recurring === "month");
const yearlyPlan = proProduct?.prices?.find((price) => price.recurring === "year");
const totalPaidMembers = proProduct?.payment_quantity ?? 1;
const monthlyPlanUnitPrice = (monthlyPlan?.unit_amount || 0) / 100;
const yearlyPlanUnitPrice = (yearlyPlan?.unit_amount || 0) / 1200;
@@ -108,7 +98,7 @@ const CloudUpgradePlanPage = observer(() => {
)}
</div>
{isFetching || isLoadingProduct ? (
{isLoadingProduct ? (
<div className="flex flex-col rounded gap-1 w-full">
<Loader.Item height="90px" />
<Loader.Item height="90px" />
@@ -137,13 +127,13 @@ const CloudUpgradePlanPage = observer(() => {
{plan.recurring === selectedPlan?.recurring && <Check className="size-4 stroke-2" />}
</span>
<div className="flex flex-col">
{totalWorkspaceMembers && (
{totalPaidMembers && (
<div className="flex items-center gap-2">
<span className="text-2xl font-semibold leading-7">
${renderPlanPricing(plan.unit_amount, 1, plan.recurring)}
</span>
<span className="text-sm text-custom-text-300">
{` per user per ${plan.recurring} x ${totalWorkspaceMembers}`}
{` per user per ${plan.recurring} x ${totalPaidMembers}`}
</span>
</div>
)}
@@ -153,9 +143,9 @@ const CloudUpgradePlanPage = observer(() => {
</div>
</div>
<div className="flex flex-col text-right">
{totalWorkspaceMembers && (
{totalPaidMembers && (
<span className="text-2xl font-semibold leading-7">
${renderPlanPricing(plan.unit_amount, totalWorkspaceMembers, plan.recurring)}
${renderPlanPricing(plan.unit_amount, totalPaidMembers, plan.recurring)}
</span>
)}
<span className="text-sm text-custom-text-300">
@@ -172,7 +162,7 @@ const CloudUpgradePlanPage = observer(() => {
<Button className="w-full px-2 my-4" onClick={() => handleStripeCheckout(selectedPlan.id)}>
{isLoading
? "Redirecting to Stripe..."
: `Pay $${renderPlanPricing(selectedPlan.unit_amount, totalWorkspaceMembers, selectedPlan.recurring)} every ${selectedPlan?.recurring}`}
: `Pay $${renderPlanPricing(selectedPlan.unit_amount, totalPaidMembers, selectedPlan.recurring)} every ${selectedPlan?.recurring}`}
</Button>
</>
) : (