panel-web/apps/user/components/subscribe/billing.tsx

/*
'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>
  );
}
*/

'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');
  const t_c = useTranslations('components.billing');

  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=''>{t('billing.duration')}</span>
          <span>
            {order?.quantity === 1 ? t_c('30days') : ''}
            {order?.quantity === 12 ? t_c('365days') : ''}
          </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=''>{t('billing.total')}</span>
        <span>
          <Display type='currency' value={order?.amount} />
        </span>
      </div>
    </>
  );
}