50 lines
2.1 KiB
TypeScript
50 lines
2.1 KiB
TypeScript
'use client';
|
|
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@workspace/ui/components/card';
|
|
import { Separator } from '@workspace/ui/components/separator';
|
|
import { useTranslations } from 'next-intl';
|
|
|
|
export function SubscribeBilling({ order }: { order: API.Order }) {
|
|
const t = useTranslations('subscribe.billing');
|
|
const t_c = useTranslations('components.billing');
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>{t('billingTitle')}</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className={'grid gap-4'}>
|
|
<div className={'flex items-center justify-between'}>
|
|
<span className={'text-muted-foreground'}>{t('productDiscount')}</span>
|
|
<span className={''}>-¥ {order?.discount_amount}</span>
|
|
</div>
|
|
<div className={'flex items-center justify-between'}>
|
|
<span className={'text-muted-foreground'}>{t('couponDiscount')}</span>
|
|
<span className={''}>-¥ {order?.coupon_discount_amount}</span>
|
|
</div>
|
|
<div className={'flex items-center justify-between'}>
|
|
<span className={'text-muted-foreground'}>{t_c('planDuration')}</span>
|
|
<span className={''}>
|
|
{order?.quantity === 1 ? t_c('30days') : ''}
|
|
{order?.quantity === 12 ? t_c('365days') : ''}
|
|
</span>
|
|
</div>
|
|
<div className={'flex items-center justify-between'}>
|
|
<span className={'text-muted-foreground'}>{t('gift')}</span>
|
|
<span className={''}>-¥ {order?.gift_balance_deduction_amount}</span>
|
|
</div>
|
|
<div className={'flex items-center justify-between'}>
|
|
<span className={'text-muted-foreground'}>{t('fee')}</span>
|
|
<span className={''}>¥ {order?.fee}</span>
|
|
</div>
|
|
<Separator />
|
|
<div className={'flex items-center justify-between font-medium'}>
|
|
<span className={'text-muted-foreground'}>{t('total')}</span>
|
|
<span className={''}>¥ {order?.total_amount}</span>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|