78 lines
2.4 KiB
TypeScript
Executable File
78 lines
2.4 KiB
TypeScript
Executable File
import {useBillingUser} from '@common/billing/billing-page/use-billing-user';
|
|
import {FormattedDate} from '@common/i18n/formatted-date';
|
|
import {BillingPlanPanel} from '@common/billing/billing-page/billing-plan-panel';
|
|
import {Trans} from '@common/i18n/trans';
|
|
import {FormattedPrice} from '@common/i18n/formatted-price';
|
|
import {Button} from '@common/ui/buttons/button';
|
|
import {Link} from 'react-router-dom';
|
|
import {Fragment} from 'react';
|
|
import {SectionHelper} from '@common/ui/section-helper';
|
|
|
|
export function ActivePlanPanel() {
|
|
const {subscription} = useBillingUser();
|
|
if (!subscription?.price || !subscription?.product) return null;
|
|
|
|
const renewDate = (
|
|
<FormattedDate preset="long" date={subscription.renews_at} />
|
|
);
|
|
|
|
return (
|
|
<Fragment>
|
|
{subscription.past_due ? <PastDueMessage /> : null}
|
|
<BillingPlanPanel title={<Trans message="Current plan" />}>
|
|
<div className="mt-24 flex justify-between gap-20">
|
|
<div>
|
|
<div className="mb-2 text-xl font-bold">
|
|
{subscription.product.name}
|
|
</div>
|
|
<FormattedPrice
|
|
className="mb-2 text-xl"
|
|
price={subscription.price}
|
|
/>
|
|
<div className="text-base">
|
|
<Trans
|
|
message="Your plan renews on :date"
|
|
values={{date: renewDate}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="w-[233px]">
|
|
<Button
|
|
variant="flat"
|
|
color="primary"
|
|
size="md"
|
|
className="mb-12 w-full"
|
|
elementType={Link}
|
|
to="/billing/change-plan"
|
|
disabled={subscription.gateway_name === 'none'}
|
|
>
|
|
<Trans message="Change plan" />
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
color="danger"
|
|
size="md"
|
|
className="w-full"
|
|
elementType={Link}
|
|
to="/billing/cancel"
|
|
>
|
|
<Trans message="Cancel plan" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</BillingPlanPanel>
|
|
</Fragment>
|
|
);
|
|
}
|
|
|
|
function PastDueMessage() {
|
|
return (
|
|
<SectionHelper
|
|
className="mb-24"
|
|
color="danger"
|
|
title="Payment is past due"
|
|
description="Your recent recurring payment has failed with the payment method we have on file. Please update your payment method to avoid any service interruptions."
|
|
/>
|
|
);
|
|
}
|