From 8fbabd1bfada5b8b39f8b31ca3301cde0a419f82 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= <c.pronzola@live.fr>
Date: Sat, 19 Feb 2022 22:22:12 +0400
Subject: [PATCH] Create Don component

---
 components/soutyen/don.js | 119 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 119 insertions(+)
 create mode 100644 components/soutyen/don.js

diff --git a/components/soutyen/don.js b/components/soutyen/don.js
new file mode 100644
index 0000000..d0e2d52
--- /dev/null
+++ b/components/soutyen/don.js
@@ -0,0 +1,119 @@
+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, 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}}>
+        {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}
+              setPaymentIsReady={setPaymentIsReady}
+              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.defaultProps = {
+  selectedMontant: null,
+  validMontant: null,
+  paymentIntent: null,
+  clientEmail: null,
+  error: null
+}
+
+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,
+  setPaymentIsReady: PropTypes.func.isRequired,
+  setClientEmail: PropTypes.func.isRequired,
+  clientEmail: PropTypes.string,
+  error: PropTypes.string,
+  setError: PropTypes.func.isRequired
+}