blsmedia/sign
2
0
Fork 0
Code Issues Packages Releases Activity

fix: always allow access to billing (#1476)

Browse Source
This commit is contained in:
David Nguyen
2024-11-15 21:34:39 +07:00
committed by GitHub
parent 876803b5db
commit 979e3f3e71
2 changed files with 66 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
apps/web/src/app/(dashboard)/settings/billing/billing-portal-button.tsx
View File

@@ -12,9 +12,10 @@ import { createBillingPortal } from './create-billing-portal.action';
export type BillingPortalButtonProps = { export type BillingPortalButtonProps = {
buttonProps?: React.ComponentProps<typeof Button>; buttonProps?: React.ComponentProps<typeof Button>;
children?: React.ReactNode;
}; };
export const BillingPortalButton = ({ buttonProps }: BillingPortalButtonProps) => { export const BillingPortalButton = ({ buttonProps, children }: BillingPortalButtonProps) => {
const { _ } = useLingui(); const { _ } = useLingui();
const { toast } = useToast(); const { toast } = useToast();
@@ -63,7 +64,7 @@ export const BillingPortalButton = ({ buttonProps }: BillingPortalButtonProps) =
onClick={async () => handleFetchPortalUrl()} onClick={async () => handleFetchPortalUrl()}
loading={isFetchingPortalUrl} loading={isFetchingPortalUrl}
> >
<Trans>Manage Subscription</Trans> {children || <Trans>Manage Subscription</Trans>}
</Button> </Button>
); );
}; };

112
apps/web/src/app/(dashboard)/settings/billing/page.tsx
View File

@@ -68,60 +68,74 @@ export default async function BillingSettingsPage() {
return ( return (
<div> <div>
<h3 className="text-2xl font-semibold"> <div className="flex flex-row items-end justify-between">
<Trans>Billing</Trans> <div>
</h3> <h3 className="text-2xl font-semibold">
<Trans>Billing</Trans>
</h3>
<div className="text-muted-foreground mt-2 text-sm"> <div className="text-muted-foreground mt-2 text-sm">
{isMissingOrInactiveOrFreePlan && ( {isMissingOrInactiveOrFreePlan && (
<p>
<Trans>
You are currently on the <span className="font-semibold">Free Plan</span>.
</Trans>
</p>
)}
{/* Todo: Translation */}
{!isMissingOrInactiveOrFreePlan &&
match(subscription.status)
.with('ACTIVE', () => (
<p>
{subscriptionProduct ? (
<span>
You are currently subscribed to{' '}
<span className="font-semibold">{subscriptionProduct.name}</span>
</span>
) : (
<span>You currently have an active plan</span>
)}
{subscription.periodEnd && (
<span>
{' '}
which is set to{' '}
{subscription.cancelAtPeriodEnd ? (
<span>
end on{' '}
<span className="font-semibold">{i18n.date(subscription.periodEnd)}.</span>
</span>
) : (
<span>
automatically renew on{' '}
<span className="font-semibold">{i18n.date(subscription.periodEnd)}.</span>
</span>
)}
</span>
)}
</p>
))
.with('PAST_DUE', () => (
<p> <p>
<Trans> <Trans>
Your current plan is past due. Please update your payment information. You are currently on the <span className="font-semibold">Free Plan</span>.
</Trans> </Trans>
</p> </p>
)) )}
.otherwise(() => null)}
{/* Todo: Translation */}
{!isMissingOrInactiveOrFreePlan &&
match(subscription.status)
.with('ACTIVE', () => (
<p>
{subscriptionProduct ? (
<span>
You are currently subscribed to{' '}
<span className="font-semibold">{subscriptionProduct.name}</span>
</span>
) : (
<span>You currently have an active plan</span>
)}
{subscription.periodEnd && (
<span>
{' '}
which is set to{' '}
{subscription.cancelAtPeriodEnd ? (
<span>
end on{' '}
<span className="font-semibold">
{i18n.date(subscription.periodEnd)}.
</span>
</span>
) : (
<span>
automatically renew on{' '}
<span className="font-semibold">
{i18n.date(subscription.periodEnd)}.
</span>
</span>
)}
</span>
)}
</p>
))
.with('PAST_DUE', () => (
<p>
<Trans>
Your current plan is past due. Please update your payment information.
</Trans>
</p>
))
.otherwise(() => null)}
</div>
</div>
{isMissingOrInactiveOrFreePlan && (
<BillingPortalButton>
<Trans>Manage billing</Trans>
</BillingPortalButton>
)}
</div> </div>
<hr className="my-4" /> <hr className="my-4" />