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>
); );
}; };

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

@@ -67,6 +67,8 @@ export default async function BillingSettingsPage() {
!subscription || subscription.status === SubscriptionStatus.INACTIVE; !subscription || subscription.status === SubscriptionStatus.INACTIVE;
return ( return (
<div>
<div className="flex flex-row items-end justify-between">
<div> <div>
<h3 className="text-2xl font-semibold"> <h3 className="text-2xl font-semibold">
<Trans>Billing</Trans> <Trans>Billing</Trans>
@@ -102,12 +104,16 @@ export default async function BillingSettingsPage() {
{subscription.cancelAtPeriodEnd ? ( {subscription.cancelAtPeriodEnd ? (
<span> <span>
end on{' '} end on{' '}
<span className="font-semibold">{i18n.date(subscription.periodEnd)}.</span> <span className="font-semibold">
{i18n.date(subscription.periodEnd)}.
</span>
</span> </span>
) : ( ) : (
<span> <span>
automatically renew on{' '} automatically renew on{' '}
<span className="font-semibold">{i18n.date(subscription.periodEnd)}.</span> <span className="font-semibold">
{i18n.date(subscription.periodEnd)}.
</span>
</span> </span>
)} )}
</span> </span>
@@ -123,6 +129,14 @@ export default async function BillingSettingsPage() {
)) ))
.otherwise(() => null)} .otherwise(() => null)}
</div> </div>
</div>
{isMissingOrInactiveOrFreePlan && (
<BillingPortalButton>
<Trans>Manage billing</Trans>
</BillingPortalButton>
)}
</div>
<hr className="my-4" /> <hr className="my-4" />