fix: create custom pricing table

This commit is contained in:
Mythie
2023-10-13 23:33:40 +11:00
parent 6d7fc32075
commit 17b43caa5c
10 changed files with 287 additions and 42 deletions

View File

@ -2,12 +2,15 @@ import { redirect } from 'next/navigation';
import { match } from 'ts-pattern';
import { getPricesByInterval } from '@documenso/ee/server-only/stripe/get-prices-by-interval';
import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
import { getServerComponentFlag } from '@documenso/lib/server-only/feature-flags/get-server-component-feature-flag';
import { Stripe, stripe } from '@documenso/lib/server-only/stripe';
import { getSubscriptionByUserId } from '@documenso/lib/server-only/subscription/get-subscription-by-user-id';
import { LocaleDate } from '~/components/formatter/locale-date';
import { BillingPlans } from './billing-plans';
import BillingPortalButton from './billing-portal-button';
export default async function BillingSettingsPage() {
@ -20,7 +23,10 @@ export default async function BillingSettingsPage() {
redirect('/settings/profile');
}
const subscription = await getSubscriptionByUserId({ userId: user.id });
const [subscription, prices] = await Promise.all([
getSubscriptionByUserId({ userId: user.id }),
getPricesByInterval(),
]);
let subscriptionProduct: Stripe.Product | null = null;
@ -32,16 +38,13 @@ export default async function BillingSettingsPage() {
subscriptionProduct = foundSubscriptionProduct ?? null;
}
const isMissingOrInactiveOrFreePlan =
!subscription ||
subscription.status === 'INACTIVE' ||
subscription?.planId === process.env.NEXT_PUBLIC_STRIPE_FREE_PLAN_ID;
const isMissingOrInactiveOrFreePlan = !subscription || subscription.status === 'INACTIVE';
return (
<div>
<h3 className="text-lg font-medium">Billing</h3>
<div className="mt-2 text-sm text-slate-500">
<div className="text-muted-foreground mt-2 text-sm">
{isMissingOrInactiveOrFreePlan && (
<p>
You are currently on the <span className="font-semibold">Free Plan</span>.
@ -60,6 +63,7 @@ export default async function BillingSettingsPage() {
) : (
<span>You currently have an active plan</span>
)}
{subscription.periodEnd && (
<span>
{' '}
@ -87,7 +91,7 @@ export default async function BillingSettingsPage() {
<hr className="my-4" />
<BillingPortalButton />
{isMissingOrInactiveOrFreePlan ? <BillingPlans prices={prices} /> : <BillingPortalButton />}
</div>
);
}