62 lines
1.7 KiB
JavaScript
62 lines
1.7 KiB
JavaScript
import {useState, useEffect} from 'react'
|
|
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'
|
|
import CircularProgress from '@mui/material/CircularProgress'
|
|
|
|
const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3001'
|
|
|
|
export default function Montant({selectedMontant, setSelectedMontant, validMontant}) {
|
|
const [prices, setPrices] = useState(null)
|
|
const handleChange = (event, newMontant) => {
|
|
setSelectedMontant(newMontant)
|
|
}
|
|
|
|
useEffect(() => {
|
|
const fetchPrices = async () => {
|
|
try {
|
|
const response = await fetch(`${SITE_URL}/stripe/dons-list`)
|
|
const pricesList = await response.json()
|
|
setPrices(pricesList)
|
|
} catch (error) {
|
|
console.error('error', error)
|
|
}
|
|
}
|
|
|
|
fetchPrices()
|
|
}, [prices])
|
|
|
|
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 && (
|
|
<CircularProgress color='primary' size={20} />
|
|
)}
|
|
|
|
{prices && prices.map(r => (
|
|
<ToggleButton key={r.id} value={r.id}>{r.unit_amount / 100} €</ToggleButton>
|
|
))}
|
|
|
|
</ToggleButtonGroup>
|
|
</Box>
|
|
)
|
|
}
|
|
|
|
Montant.propTypes = {
|
|
selectedMontant: PropTypes.string,
|
|
setSelectedMontant: PropTypes.func.isRequired,
|
|
validMontant: PropTypes.string
|
|
}
|