feat(subscribe): Add unit time

This commit is contained in:
web@ppanel
2024-12-20 18:52:30 +07:00
parent d8b0bd9c2d
commit 39d07ecee5
80 changed files with 553 additions and 165 deletions
@@ -15,44 +15,45 @@ interface SubscribeBillingProps {
fee_amount?: number;
amount?: number;
unit_price?: number;
unit_time?: number;
};
}
export function SubscribeBilling({ order }: SubscribeBillingProps) {
const t = useTranslations('subscribe.billing');
const t = useTranslations('subscribe');
return (
<>
<div className='font-semibold'>{t('billingTitle')}</div>
<div className='font-semibold'>{t('billing.billingTitle')}</div>
<ul className='grid grid-cols-2 gap-3 *:flex *:items-center *:justify-between lg:grid-cols-1'>
{order?.type && [1, 2].includes(order?.type) && (
<li>
<span className='text-muted-foreground'>{t('duration')}</span>
<span className='text-muted-foreground'>{t('billing.duration')}</span>
<span>
{order?.quantity || 1} {t('months')}
{order?.quantity || 1} {t(order?.unit_time || 'Month')}
</span>
</li>
)}
<li>
<span className='text-muted-foreground'>{t('price')}</span>
<span className='text-muted-foreground'>{t('billing.price')}</span>
<span>
<Display type='currency' value={order?.price || order?.unit_price} />
</span>
</li>
<li>
<span className='text-muted-foreground'>{t('productDiscount')}</span>
<span className='text-muted-foreground'>{t('billing.productDiscount')}</span>
<span>
<Display type='currency' value={order?.discount} />
</span>
</li>
<li>
<span className='text-muted-foreground'>{t('couponDiscount')}</span>
<span className='text-muted-foreground'>{t('billing.couponDiscount')}</span>
<span>
<Display type='currency' value={order?.coupon_discount} />
</span>
</li>
<li>
<span className='text-muted-foreground'>{t('fee')}</span>
<span className='text-muted-foreground'>{t('billing.fee')}</span>
<span>
<Display type='currency' value={order?.fee_amount} />
</span>
@@ -60,7 +61,7 @@ export function SubscribeBilling({ order }: SubscribeBillingProps) {
</ul>
<Separator />
<div className='flex items-center justify-between font-semibold'>
<span className='text-muted-foreground'>{t('total')}</span>
<span className='text-muted-foreground'>{t('billing.total')}</span>
<span>
<Display type='currency' value={order?.amount} />
</span>
@@ -120,7 +120,7 @@ export default function Page() {
<CardFooter className='relative mt-2 flex flex-col gap-2'>
<h2 className='pb-5 text-2xl font-semibold sm:text-3xl'>
<Display type='currency' value={item.unit_price} />
<span className='text-base font-medium'>/{t('perMonth')}</span>
<span className='text-base font-medium'>/{t(item.unit_time || 'Month')}</span>
</h2>
<Button
className='absolute bottom-0 w-full rounded-b-xl rounded-t-none'