Create StripePayment component

2022-03-06 10:10:09 +04:00
parent f76933530f
commit 171803eb54
1 changed files with 117 additions and 0 deletions
@@ -0,0 +1,117 @@
+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
+}