pawol.nu/components/soutyen/don.js

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
}