46 lines
1.1 KiB
TypeScript
46 lines
1.1 KiB
TypeScript
import { Currency, Locale, Price } from '../PaymentTable'
|
|
import { IPrice } from '../PriceList'
|
|
import styles from './styles.module.css'
|
|
|
|
const currency = Currency.USD
|
|
const locale = Locale.EN
|
|
|
|
const roundToWhole = (value: string | number): number => {
|
|
value = Number(value)
|
|
if (value % Math.floor(value) !== 0) {
|
|
return value
|
|
}
|
|
return Math.floor(value)
|
|
}
|
|
|
|
const removeAfterDot = (value: string): string => {
|
|
const _value = Number(value.split('$')[1])
|
|
if (_value % Math.floor(_value) !== 0 && _value !== 0) {
|
|
return value
|
|
}
|
|
return value.split('.')[0]
|
|
}
|
|
|
|
interface PriceItemProps {
|
|
active: boolean
|
|
click: () => void
|
|
}
|
|
|
|
function PriceItem({ id, value, active, click }: IPrice & PriceItemProps): JSX.Element {
|
|
const _price = new Price(roundToWhole(value), currency, locale)
|
|
|
|
const compatClassName = () => {
|
|
const isPopular = id === 3
|
|
const isActive = active
|
|
return `${styles.container} ${isPopular ? styles.popular : ''} ${isActive ? styles.active : ''}`
|
|
}
|
|
|
|
return (
|
|
<div onClick={click} className={compatClassName()}>
|
|
{removeAfterDot(_price.format())}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default PriceItem
|