fix: always allow access to billing (#1476)

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

View File

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

View File

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