Cédric FAMIBELLE-PRONZOLA
45 lines
1.2 KiB
JavaScript
45 lines
1.2 KiB
JavaScript
import PropTypes from 'prop-types'
|
|
import ToggleButton from '@mui/material/ToggleButton'
|
|
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'
|
|
import Typography from '@mui/material/Typography'
|
|
import {Box} from '@mui/material'
|
|
|
|
export default function Montant({selectedMontant, setSelectedMontant, validMontant, prices}) {
|
|
const handleChange = (event, newMontant) => {
|
|
setSelectedMontant(newMontant)
|
|
}
|
|
|
|
return (
|
|
<Box>
|
|
<Typography marginTop={1} variant='button' component='div'>
|
|
Choisir un montant *
|
|
</Typography>
|
|
<ToggleButtonGroup
|
|
exclusive
|
|
disabled={Boolean(validMontant)}
|
|
size='large'
|
|
color='primary'
|
|
value={selectedMontant}
|
|
onChange={handleChange}
|
|
>
|
|
{prices.map(r => (
|
|
<ToggleButton key={r.id} value={r.id}>{r.unit_amount / 100} €</ToggleButton>
|
|
))}
|
|
|
|
</ToggleButtonGroup>
|
|
</Box>
|
|
)
|
|
}
|
|
|
|
Montant.defaultProps = {
|
|
selectedMontant: null,
|
|
validMontant: null
|
|
}
|
|
|
|
Montant.propTypes = {
|
|
selectedMontant: PropTypes.string,
|
|
setSelectedMontant: PropTypes.func.isRequired,
|
|
validMontant: PropTypes.string,
|
|
prices: PropTypes.array.isRequired
|
|
}
|