Fix stripe. Remove fetching prices in getServerSideProps

components/soutyen/montant.js

@@ -1,14 +1,33 @@
+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'
 
-export default function Montant({selectedMontant, setSelectedMontant, validMontant, prices}) {
+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'>
@@ -22,7 +41,11 @@ export default function Montant({selectedMontant, setSelectedMontant, validMonta
         value={selectedMontant}
         onChange={handleChange}
       >
-        {prices.map(r => (
+        {!prices && (
+          <CircularProgress color='primary' size={20} />
+        )}
+
+        {prices && prices.map(r => (
           <ToggleButton key={r.id} value={r.id}>{r.unit_amount / 100} €</ToggleButton>
         ))}
 
@@ -39,6 +62,5 @@ Montant.defaultProps = {
 Montant.propTypes = {
   selectedMontant: PropTypes.string,
   setSelectedMontant: PropTypes.func.isRequired,
-  validMontant: PropTypes.string,
-  prices: PropTypes.array.isRequired
+  validMontant: PropTypes.string
 }