54 lines
1.6 KiB
TypeScript
54 lines
1.6 KiB
TypeScript
import { useTranslation } from 'react-i18next'
|
|
import Price, { Currency, Locale } from './Price'
|
|
import './styles.css'
|
|
|
|
type PaymentItem = {
|
|
title: string
|
|
price: number
|
|
description: string
|
|
}
|
|
|
|
type PaymentProps = {
|
|
currency: Currency
|
|
locale: Locale
|
|
items: PaymentItem[]
|
|
}
|
|
|
|
function Payment({ currency, locale, items }: PaymentProps): JSX.Element {
|
|
const { t } = useTranslation()
|
|
const total = items.reduce((acc, item) => acc + item.price, 0)
|
|
const totalPrice = new Price(total, currency, locale)
|
|
const toItem = (item: typeof items[0], idx: number) => {
|
|
const price = new Price(item.price, currency, locale)
|
|
return (
|
|
<div key={idx} className='payment__item'>
|
|
<div className='payment__item-summary'>
|
|
<div className='payment__item-title'>{item.title}</div>
|
|
<div className='payment__item-price'>{price.format()}</div>
|
|
</div>
|
|
<div className='payment__item-description'>
|
|
<p>{item.description}</p>
|
|
<p>One dollar thirty six cents per day</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
return (
|
|
<div className='payment'>
|
|
<div className='payment__table'>
|
|
<div className='payment__total'>
|
|
<div className='payment__total-title'>{t('total_today')}</div>
|
|
<div className='payment__total-price'>{totalPrice.format()}</div>
|
|
</div>
|
|
<div className='payment__items'>
|
|
{items.map(toItem)}
|
|
</div>
|
|
</div>
|
|
<div className='payment__information'>{t('charged_only')}</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Payment
|
|
export { Price, Currency, Locale }
|