66 lines
1.3 KiB
TypeScript
66 lines
1.3 KiB
TypeScript
import { useState } from 'react'
|
|
import PriceItem from '../PriceItem'
|
|
import styles from './styles.module.css'
|
|
import { useDispatch } from 'react-redux'
|
|
import { actions } from '@/store'
|
|
|
|
export interface IPrice {
|
|
id: number
|
|
value: number
|
|
}
|
|
|
|
const prices: IPrice[] = [
|
|
{
|
|
id: 1,
|
|
value: 0
|
|
},
|
|
{
|
|
id: 2,
|
|
value: 5
|
|
},
|
|
{
|
|
id: 3,
|
|
value: 9
|
|
},
|
|
{
|
|
id: 4,
|
|
value: 13.67
|
|
},
|
|
]
|
|
|
|
interface PriceListProps {
|
|
activeItem: number | null
|
|
click: () => void
|
|
}
|
|
|
|
function PriceList({click}: PriceListProps): JSX.Element {
|
|
const dispatch = useDispatch();
|
|
const [activePriceItem, setActivePriceItem] = useState<number | null>(null)
|
|
|
|
const priceItemClick = (id: number) => {
|
|
console.log(id);
|
|
setActivePriceItem(id)
|
|
const activePriceItem = prices.find((item) => item.id === Number(id))
|
|
if (activePriceItem) {
|
|
dispatch(
|
|
actions.payment.update({
|
|
selectedPrice: activePriceItem.value
|
|
})
|
|
);
|
|
}
|
|
setTimeout(() => {
|
|
click()
|
|
}, 1000)
|
|
}
|
|
|
|
return (
|
|
<div className={`${styles.container}`}>
|
|
{prices.map((price, idx) => (
|
|
<PriceItem active={price.id === activePriceItem} key={idx} value={price.value} id={price.id} click={priceItemClick} />
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default PriceList
|