Cédric FAMIBELLE-PRONZOLA
120 lines
3.9 KiB
JavaScript
120 lines
3.9 KiB
JavaScript
import PropTypes from 'prop-types'
|
|
import {Container, Stack, Typography} from '@mui/material'
|
|
import axios from 'axios'
|
|
import Button from '@mui/material/Button'
|
|
import Box from '@mui/material/Box'
|
|
import {Paypal} from '@icons-pack/react-simple-icons'
|
|
|
|
import {validateEmail} from '../../lib/utils/emails'
|
|
|
|
import Montant from './montant'
|
|
import Email from './email'
|
|
|
|
const PAYPAL_ID = process.env.NEXT_PUBLIC_PAYPAL_DONATE_ID
|
|
|
|
export default function Don({isPaypal, selectedMontant, setSelectedMontant, validMontant, setValidMontant, prices, paymentIntent, setClientSecret, setPaymentIntent, setIsLoading, setPaymentIsReady, setClientEmail, clientEmail, error, setError}) {
|
|
const cancelPayment = async () => {
|
|
setPaymentIsReady(false)
|
|
setClientEmail('')
|
|
setIsLoading(false)
|
|
setClientSecret(null)
|
|
|
|
try {
|
|
await axios.post('/stripe/cancel-payment', {
|
|
paymentIntent
|
|
})
|
|
setPaymentIntent(null)
|
|
} catch (error_) {
|
|
console.log(error_.message)
|
|
}
|
|
}
|
|
|
|
const handleCancel = async () => {
|
|
setValidMontant(null)
|
|
setSelectedMontant(null)
|
|
await cancelPayment()
|
|
}
|
|
|
|
const handleClick = () => {
|
|
if (!clientEmail) {
|
|
setError('Adresse e-mail obligatoire.')
|
|
return
|
|
}
|
|
|
|
if (!validateEmail(clientEmail)) {
|
|
setError('Adresse e-mail invalide.')
|
|
return
|
|
}
|
|
|
|
setIsLoading(true)
|
|
setValidMontant(selectedMontant)
|
|
}
|
|
|
|
return (
|
|
<Container>
|
|
<Box sx={{textAlign: 'center', marginBlock: 1}}>
|
|
{isPaypal ? (
|
|
<>
|
|
<Typography gutterBottom component='div' variant='h5'>PayPal</Typography>
|
|
<Button variant='outlined' size='large' endIcon={<Paypal />} onClick={() => window.open(`https://www.paypal.com/donate/?hosted_button_id=${PAYPAL_ID}`, '_blank')}>Don via PayPal</Button>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Typography gutterBottom component='div' variant='h5'>Carte bancaire</Typography>
|
|
<Email validMontant={validMontant} error={error} setClientEmail={setClientEmail} clientEmail={clientEmail} />
|
|
<Montant
|
|
selectedMontant={selectedMontant}
|
|
setSelectedMontant={setSelectedMontant}
|
|
validMontant={validMontant}
|
|
setValidMontant={setValidMontant}
|
|
prices={prices}
|
|
paymentIntent={paymentIntent}
|
|
setClientSecret={setClientSecret}
|
|
setPaymentIntent={setPaymentIntent}
|
|
setIsLoading={setIsLoading}
|
|
setPaymentIsReady={setPaymentIsReady}
|
|
setClientEmail={setClientEmail}
|
|
/>
|
|
<Stack justifyContent='center' sx={{marginTop: 3}} direction={{xs: 'column', sm: 'row'}} spacing={{xs: 1, sm: 2, md: 4}}>
|
|
<Button disabled={Boolean(validMontant) || Boolean(!selectedMontant)} variant='contained' onClick={handleClick}>
|
|
Valider les informations
|
|
</Button>
|
|
{validMontant && (
|
|
<Button disabled={Boolean(!validMontant)} color='secondary' variant='contained' onClick={handleCancel}>
|
|
Annuler
|
|
</Button>
|
|
)}
|
|
</Stack>
|
|
</>
|
|
)}
|
|
</Box>
|
|
</Container>
|
|
)
|
|
}
|
|
|
|
Don.defaultProps = {
|
|
selectedMontant: null,
|
|
validMontant: null,
|
|
paymentIntent: null,
|
|
clientEmail: null,
|
|
error: null
|
|
}
|
|
|
|
Don.propTypes = {
|
|
isPaypal: PropTypes.bool.isRequired,
|
|
selectedMontant: PropTypes.string,
|
|
setSelectedMontant: PropTypes.func.isRequired,
|
|
validMontant: PropTypes.string,
|
|
setValidMontant: PropTypes.func.isRequired,
|
|
prices: PropTypes.array.isRequired,
|
|
paymentIntent: PropTypes.string,
|
|
setClientSecret: PropTypes.func.isRequired,
|
|
setPaymentIntent: PropTypes.func.isRequired,
|
|
setIsLoading: PropTypes.func.isRequired,
|
|
setPaymentIsReady: PropTypes.func.isRequired,
|
|
setClientEmail: PropTypes.func.isRequired,
|
|
clientEmail: PropTypes.string,
|
|
error: PropTypes.string,
|
|
setError: PropTypes.func.isRequired
|
|
}
|