pawol.nu/components/soutyen/stripe-payment.js

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
}