80 lines
2.5 KiB
TypeScript
80 lines
2.5 KiB
TypeScript
'use client';
|
|
|
|
import { Display } from '@/components/display';
|
|
import { Separator } from '@workspace/airo-ui/components/separator';
|
|
import { useTranslations } from 'next-intl';
|
|
|
|
interface SubscribeBillingProps {
|
|
order?: Partial<
|
|
API.OrderDetail & {
|
|
unit_price: number;
|
|
unit_time: number;
|
|
subscribe_discount: number;
|
|
}
|
|
>;
|
|
}
|
|
|
|
export function SubscribeBilling({ order }: Readonly<SubscribeBillingProps>) {
|
|
const t = useTranslations('subscribe');
|
|
|
|
return (
|
|
<>
|
|
<div className='mb-1 font-semibold text-[#225BA9]'>{t('billing.billingTitle')}</div>
|
|
<ul className='grid grid-cols-1 gap-1 text-[15px] font-light text-[#666] *:flex *:items-center *:justify-between lg:grid-cols-1'>
|
|
<li>
|
|
<span className=''>套餐时长</span>
|
|
<span>
|
|
{order?.quantity === 1 ? '30天' : ''}
|
|
{order?.quantity === 12 ? '365天' : ''}
|
|
</span>
|
|
</li>
|
|
{order?.type && [1, 2].includes(order?.type) && (
|
|
<li>
|
|
<span className=''>{t('billing.duration')}</span>
|
|
<span>
|
|
{order?.quantity || 1} {t(order?.unit_time || 'Month')}
|
|
</span>
|
|
</li>
|
|
)}
|
|
<li>
|
|
<span className=''>{t('billing.price')}</span>
|
|
<span>
|
|
<Display type='currency' value={order?.price || order?.unit_price} />
|
|
</span>
|
|
</li>
|
|
<li>
|
|
<span className=''>{t('billing.productDiscount')}</span>
|
|
<span>
|
|
<Display type='currency' value={order?.discount} />
|
|
</span>
|
|
</li>
|
|
<li>
|
|
<span className=''>{t('billing.couponDiscount')}</span>
|
|
<span>
|
|
<Display type='currency' value={order?.coupon_discount} />
|
|
</span>
|
|
</li>
|
|
<li>
|
|
<span className='text-muted-foreground'>{t('billing.fee')}</span>
|
|
<span>
|
|
<Display type='currency' value={order?.fee_amount} />
|
|
</span>
|
|
</li>
|
|
<li>
|
|
<span className='text-muted-foreground'>{t('billing.gift')}</span>
|
|
<span>
|
|
<Display type='currency' value={order?.gift_amount} />
|
|
</span>
|
|
</li>
|
|
</ul>
|
|
<Separator className={'mb-3 mt-4 bg-[#225BA9]'} />
|
|
<div className='flex items-center justify-between font-semibold text-[#666]'>
|
|
<span className=''>支付金额</span>
|
|
<span>
|
|
<Display type='currency' value={order?.amount} />
|
|
</span>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|