Remove Stripe from the project
This commit is contained in:
@@ -1,83 +0,0 @@
|
||||
import {useState, useEffect} from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import {
|
||||
PaymentElement,
|
||||
useStripe,
|
||||
useElements
|
||||
} from '@stripe/react-stripe-js'
|
||||
import {Button, Container, LinearProgress, Paper} from '@mui/material'
|
||||
|
||||
const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3001'
|
||||
|
||||
export default function CheckoutForm({validMontant, setError, isLoading, setIsLoading}) {
|
||||
const stripe = useStripe()
|
||||
const elements = useElements()
|
||||
const [isPaymentLoading, setIsPaymentLoading] = useState(false)
|
||||
const [prices, setPrices] = useState([])
|
||||
|
||||
const handleSubmit = async event => {
|
||||
event.preventDefault()
|
||||
|
||||
if (!stripe || !elements) {
|
||||
return
|
||||
}
|
||||
|
||||
setIsPaymentLoading(true)
|
||||
|
||||
const {error} = await stripe.confirmPayment({
|
||||
elements,
|
||||
confirmParams: {
|
||||
return_url: `${SITE_URL}/soutyen`
|
||||
},
|
||||
})
|
||||
|
||||
if (error.type === 'card_error' || error.type === 'validation_error') {
|
||||
setError(error.message)
|
||||
} else {
|
||||
setError('Une erreur s’est produite.')
|
||||
}
|
||||
|
||||
setIsPaymentLoading(false)
|
||||
}
|
||||
|
||||
const handleReady = () => {
|
||||
setIsLoading(false)
|
||||
}
|
||||
|
||||
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 (
|
||||
<Container maxWidth='sm' sx={{marginBottom: 1}}>
|
||||
<Paper sx={{padding: 2, marginTop: 3}}>
|
||||
<PaymentElement id='payment-element' onReady={handleReady} />
|
||||
{!isLoading && (
|
||||
<Button fullWidth sx={{marginTop: 2}} variant='outlined' disabled={isPaymentLoading || !stripe || !elements} id='submit' onClick={handleSubmit}>
|
||||
Valider le don de <strong>{prices.find(({id}) => id === validMontant).unit_amount / 100} euros</strong>
|
||||
</Button>
|
||||
)}
|
||||
{isPaymentLoading && (
|
||||
<LinearProgress size={24} style={{width: '100%', marginTop: 10}} />
|
||||
)}
|
||||
</Paper>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
CheckoutForm.propTypes = {
|
||||
validMontant: PropTypes.string.isRequired,
|
||||
setError: PropTypes.func.isRequired,
|
||||
isLoading: PropTypes.bool.isRequired,
|
||||
setIsLoading: PropTypes.func.isRequired
|
||||
}
|
||||
@@ -1,108 +0,0 @@
|
||||
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, setClientEmail, clientEmail, error, setError}) {
|
||||
const cancelPayment = async () => {
|
||||
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}
|
||||
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.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,
|
||||
setClientEmail: PropTypes.func.isRequired,
|
||||
clientEmail: PropTypes.string,
|
||||
error: PropTypes.string,
|
||||
setError: PropTypes.func.isRequired
|
||||
}
|
||||
@@ -1,34 +0,0 @@
|
||||
import PropTypes from 'prop-types'
|
||||
import Box from '@mui/material/Box'
|
||||
import TextField from '@mui/material/TextField'
|
||||
|
||||
export default function Email({validMontant, error, clientEmail, setClientEmail}) {
|
||||
return (
|
||||
<Box sx={{marginBottom: 2}}>
|
||||
<TextField
|
||||
required
|
||||
disabled={Boolean(validMontant)}
|
||||
InputLabelProps={{
|
||||
shrink: true,
|
||||
}}
|
||||
variant='outlined'
|
||||
label='Adresse e-mail'
|
||||
error={error === 'Adresse e-mail invalide.' || error === 'Adresse e-mail obligatoire.'}
|
||||
autoComplete='email'
|
||||
value={clientEmail}
|
||||
name='email-client'
|
||||
type='email'
|
||||
id='email-client'
|
||||
helperText={error === 'Adresse e-mail invalide.' || error === 'Adresse e-mail obligatoire.' ? error : ''}
|
||||
onChange={event => setClientEmail(event.target.value)}
|
||||
/>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
Email.propTypes = {
|
||||
validMontant: PropTypes.string,
|
||||
error: PropTypes.string,
|
||||
clientEmail: PropTypes.string,
|
||||
setClientEmail: PropTypes.func.isRequired
|
||||
}
|
||||
@@ -1,61 +0,0 @@
|
||||
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
|
||||
}
|
||||
@@ -1,83 +0,0 @@
|
||||
import Dialog from '@mui/material/Dialog'
|
||||
import PropTypes from 'prop-types'
|
||||
import DialogTitle from '@mui/material/DialogTitle'
|
||||
import DialogContent from '@mui/material/DialogContent'
|
||||
import useMediaQuery from '@mui/material/useMediaQuery'
|
||||
import {useTheme} from '@mui/material/styles'
|
||||
|
||||
import StripePayment from './stripe-payment'
|
||||
|
||||
export default function StripeDialog({
|
||||
open,
|
||||
handleClose,
|
||||
selectedMontant,
|
||||
setSelectedMontant,
|
||||
validMontant,
|
||||
setValidMontant,
|
||||
paymentIntent,
|
||||
setClientSecret,
|
||||
setPaymentIntent,
|
||||
setIsLoading,
|
||||
setClientEmail,
|
||||
clientEmail,
|
||||
error,
|
||||
setError,
|
||||
isLoading,
|
||||
children
|
||||
}) {
|
||||
const theme = useTheme()
|
||||
const fullScreen = useMediaQuery(theme.breakpoints.down('md'))
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Dialog
|
||||
fullScreen={fullScreen}
|
||||
open={open}
|
||||
aria-labelledby='card-payment'
|
||||
onClose={handleClose}
|
||||
>
|
||||
<DialogTitle textAlign='center' id='card-payment'>
|
||||
{'Don par carte bancaire'}
|
||||
</DialogTitle>
|
||||
<DialogContent>
|
||||
<StripePayment
|
||||
selectedMontant={selectedMontant}
|
||||
setSelectedMontant={setSelectedMontant}
|
||||
validMontant={validMontant}
|
||||
setValidMontant={setValidMontant}
|
||||
paymentIntent={paymentIntent}
|
||||
setClientSecret={setClientSecret}
|
||||
setPaymentIntent={setPaymentIntent}
|
||||
setIsLoading={setIsLoading}
|
||||
setClientEmail={setClientEmail}
|
||||
clientEmail={clientEmail}
|
||||
error={error}
|
||||
setError={setError}
|
||||
isLoading={isLoading}
|
||||
handleClose={handleClose}
|
||||
/>
|
||||
{children}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
StripeDialog.propTypes = {
|
||||
open: PropTypes.bool.isRequired,
|
||||
handleClose: PropTypes.func.isRequired,
|
||||
isLoading: PropTypes.bool.isRequired,
|
||||
selectedMontant: PropTypes.string,
|
||||
setSelectedMontant: PropTypes.func.isRequired,
|
||||
validMontant: PropTypes.string,
|
||||
setValidMontant: PropTypes.func.isRequired,
|
||||
paymentIntent: PropTypes.string,
|
||||
setClientSecret: PropTypes.func.isRequired,
|
||||
setPaymentIntent: PropTypes.func.isRequired,
|
||||
setIsLoading: PropTypes.func.isRequired,
|
||||
setClientEmail: PropTypes.func.isRequired,
|
||||
clientEmail: PropTypes.string,
|
||||
error: PropTypes.string,
|
||||
setError: PropTypes.func.isRequired,
|
||||
children: PropTypes.node
|
||||
}
|
||||
@@ -1,109 +0,0 @@
|
||||
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, paymentIntent, setClientSecret, setPaymentIntent, setIsLoading, setClientEmail, clientEmail, error, setError, handleClose}) {
|
||||
const cancelPayment = async () => {
|
||||
setClientEmail('')
|
||||
setIsLoading(false)
|
||||
setClientSecret(null)
|
||||
|
||||
try {
|
||||
await axios.post('/stripe/cancel-payment', {
|
||||
paymentIntent
|
||||
})
|
||||
setPaymentIntent(null)
|
||||
} catch (error_) {
|
||||
console.log(error_.message)
|
||||
}
|
||||
}
|
||||
|
||||
const handleCancel = async () => {
|
||||
if (validMontant) {
|
||||
setValidMontant(null)
|
||||
setSelectedMontant(null)
|
||||
await cancelPayment()
|
||||
handleClose()
|
||||
} else {
|
||||
handleClose()
|
||||
}
|
||||
}
|
||||
|
||||
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}
|
||||
paymentIntent={paymentIntent}
|
||||
setClientSecret={setClientSecret}
|
||||
setPaymentIntent={setPaymentIntent}
|
||||
setIsLoading={setIsLoading}
|
||||
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>
|
||||
|
||||
<Button 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.propTypes = {
|
||||
isLoading: PropTypes.bool.isRequired,
|
||||
selectedMontant: PropTypes.string,
|
||||
setSelectedMontant: PropTypes.func.isRequired,
|
||||
validMontant: PropTypes.string,
|
||||
setValidMontant: PropTypes.func.isRequired,
|
||||
paymentIntent: PropTypes.string,
|
||||
setClientSecret: PropTypes.func.isRequired,
|
||||
setPaymentIntent: PropTypes.func.isRequired,
|
||||
setIsLoading: PropTypes.func.isRequired,
|
||||
setClientEmail: PropTypes.func.isRequired,
|
||||
clientEmail: PropTypes.string,
|
||||
error: PropTypes.string,
|
||||
setError: PropTypes.func.isRequired,
|
||||
handleClose: PropTypes.func.isRequired
|
||||
}
|
||||
Reference in New Issue
Block a user