Cédric FAMIBELLE-PRONZOLA
118 lines
3.8 KiB
JavaScript
118 lines
3.8 KiB
JavaScript
import PropTypes from 'prop-types'
|
|
import axios from 'axios'
|
|
import Box from '@mui/material/Box'
|
|
import Container from '@mui/material/Container'
|
|
import Typography from '@mui/material/Typography'
|
|
import Stack from '@mui/material/Stack'
|
|
import Button from '@mui/material/Button'
|
|
import LinearProgress from '@mui/material/LinearProgress'
|
|
|
|
import {validateEmail} from '../../lib/utils/emails'
|
|
|
|
import Email from './email'
|
|
import Montant from './montant'
|
|
|
|
export default function StripePayment({isLoading, 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}}>
|
|
<>
|
|
<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}
|
|
/>
|
|
<Typography sx={{marginTop: 1}} variant='caption' component='div'><i>* Obligatoire</i></Typography>
|
|
<Stack justifyContent='center' sx={{marginTop: 2}} 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>
|
|
</>
|
|
{isLoading && (
|
|
<Container sx={{marginBlock: 2}} maxWidth='sm'>
|
|
<LinearProgress size={24} style={{width: '100%'}} />
|
|
</Container>
|
|
)}
|
|
</Box>
|
|
</Container>
|
|
)
|
|
}
|
|
|
|
StripePayment.defaultProps = {
|
|
selectedMontant: null,
|
|
validMontant: null,
|
|
paymentIntent: null,
|
|
clientEmail: null,
|
|
error: null
|
|
}
|
|
|
|
StripePayment.propTypes = {
|
|
isLoading: 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
|
|
}
|