From 2e49a44a4af393d88a216d2d64d4bb14285aef0e 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:57 +0400
Subject: [PATCH] Create /soutyen page

---
 pages/soutyen.js | 253 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 253 insertions(+)
 create mode 100644 pages/soutyen.js

diff --git a/pages/soutyen.js b/pages/soutyen.js
new file mode 100644
index 0000000..cc45f1e
--- /dev/null
+++ b/pages/soutyen.js
@@ -0,0 +1,253 @@
+import {useEffect, useState, forwardRef, useRef} from 'react'
+import {useRouter} from 'next/router'
+import PropTypes from 'prop-types'
+import {loadStripe} from '@stripe/stripe-js'
+import {Elements} from '@stripe/react-stripe-js'
+import {Box, Container, Typography, Snackbar, LinearProgress, Paper} from '@mui/material'
+import MuiAlert from '@mui/material/Alert'
+import axios from 'axios'
+
+import HeadLayout from '../components/head-layout'
+import CheckoutForm from '../components/soutyen/checkout-form'
+import Presantasyon from '../components/soutyen/presantasyon'
+import Don from '../components/soutyen/don'
+import PaymentMethod from '../components/soutyen/payment-method'
+import Footer from '../components/footer'
+
+import {appearance} from '../lib/utils/stripe-style'
+
+const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3001'
+
+const stripePromise = loadStripe(
+  process.env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY
+)
+
+const Alert = forwardRef(function Alert(props, ref) {
+  return <MuiAlert ref={ref} elevation={6} variant='filled' {...props} />
+})
+
+export default function Soutyen({prices, paymentStatus}) {
+  const router = useRouter()
+  const scrollEvent = useRef(null)
+  const [clientSecret, setClientSecret] = useState(null)
+  const [paymentIntent, setPaymentIntent] = useState(null)
+  const [isPaypal, setIsPaypal] = useState(true)
+  const [selectedMontant, setSelectedMontant] = useState(null)
+  const [validMontant, setValidMontant] = useState(null)
+  const [success, setSuccess] = useState(null)
+  const [error, setError] = useState(null)
+  const [open, setOpen] = useState(false)
+  const [payementIsReady, setPaymentIsReady] = useState(false)
+  const [isLoading, setIsLoading] = useState(false)
+  const [clientEmail, setClientEmail] = useState('')
+
+  const scrollToBottom = () => {
+    scrollEvent.current?.scrollIntoView({behavior: 'smooth', block: 'end', inline: 'nearest'})
+  }
+
+  const options = {
+    clientSecret,
+    appearance,
+  }
+
+  useEffect(() => {
+    const getClientSecret = async () => {
+      try {
+        const response = await axios.post('/stripe/valid-payment', {
+          id: validMontant,
+          email: clientEmail
+        })
+        setClientSecret(response.data.clientSecret)
+        setPaymentIntent(response.data.paymentIntent)
+      } catch (error_) {
+        setError(error_.message)
+      }
+    }
+
+    if (validMontant) {
+      getClientSecret()
+    }
+  }, [selectedMontant, clientEmail, validMontant])
+
+  const handleClose = (event, reason) => {
+    if (reason === 'clickaway') {
+      return
+    }
+
+    setSuccess(null)
+    setError(null)
+    setOpen(false)
+  }
+
+  useEffect(() => {
+    if (isPaypal) {
+      setSelectedMontant(null)
+      setValidMontant(null)
+    }
+  }, [isPaypal, setSelectedMontant, setValidMontant])
+
+  useEffect(() => {
+    if (paymentStatus) {
+      switch (paymentStatus) {
+        case 'succeeded':
+          setSuccess('Paiement réussi. Merci pour votre soutien 🥰')
+          break
+        case 'processing':
+          setSuccess('Votre paiement en cours de traitement.')
+          break
+        case 'requires_payment_method':
+          setError('Votre paiement n’a pas abouti, veuillez réessayer.')
+          break
+        default:
+          setError('Une erreur s’est produite.')
+          break
+      }
+    } else {
+      setSuccess(null)
+      setError(null)
+    }
+  }, [paymentStatus, router])
+
+  useEffect(() => {
+    if (success) {
+      setOpen(true)
+    } else {
+      setOpen(false)
+    }
+  }, [success])
+
+  useEffect(() => {
+    if (error) {
+      setOpen(true)
+    } else {
+      setOpen(false)
+    }
+  }, [error])
+
+  useEffect(() => {
+    router.push('/soutyen', undefined, {shallow: true})
+  }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
+  useEffect(() => {}, [router.query.payment_intent])
+
+  useEffect(() => {
+    if (!isPaypal || validMontant) {
+      scrollToBottom()
+    }
+  }, [isPaypal, validMontant])
+
+  useEffect(() => {
+    if (payementIsReady) {
+      scrollToBottom()
+    }
+  }, [payementIsReady])
+
+  return (
+    <HeadLayout
+      title='Soutenir Organisation KA Internationale !'
+      tab={4}
+      slug='soutyen'
+      imageUrl='/soutyen.png'
+      imageWidth={500}
+      imageHeight={500}
+    >
+      <Box sx={{display: 'flex', flexDirection: 'column', minHeight: '100vh'}}>
+        <Box sx={{flexGrow: 1, marginTop: 1, marginBottom: 10}}>
+          <Container sx={{marginTop: 1}}>
+            <Typography gutterBottom sx={{fontWeight: 'bold'}} textAlign='center' variant='h4' component='h1'>
+              Soutenir Organisation KA Internationale !
+            </Typography>
+            <Presantasyon />
+            <Paper sx={{padding: 2, marginTop: 3}}>
+              <Typography gutterBottom sx={{fontWeight: 'bold', marginBottom: 2}} textAlign='center' variant='h5' component='h2'>
+                Faire un don
+              </Typography>
+              <Box sx={{textAlign: 'center'}}>
+                <PaymentMethod setIsPaypal={setIsPaypal} />
+              </Box>
+              <Don
+                isPaypal={isPaypal}
+                selectedMontant={selectedMontant}
+                setSelectedMontant={setSelectedMontant}
+                validMontant={validMontant}
+                setValidMontant={setValidMontant}
+                prices={prices}
+                paymentIntent={paymentIntent}
+                clientSecret={clientSecret}
+                setClientSecret={setClientSecret}
+                setPaymentIntent={setPaymentIntent}
+                setIsLoading={setIsLoading}
+                setPaymentIsReady={setPaymentIsReady}
+                error={error}
+                setError={setError}
+                clientEmail={clientEmail}
+                setClientEmail={setClientEmail}
+              />
+              {isLoading && (
+                <Container maxWidth='sm'>
+                  <LinearProgress size={24} style={{width: '100%', marginBottom: 1}} />
+                </Container>
+              )}
+
+              {clientSecret && validMontant && !isPaypal && (
+                <Elements options={options} stripe={stripePromise}>
+                  <CheckoutForm
+                    setPaymentIsReady={setPaymentIsReady}
+                    setError={setError}
+                    isLoading={isLoading}
+                    setIsLoading={setIsLoading}
+                  />
+                </Elements>
+              )}
+            </Paper>
+          </Container>
+        </Box>
+        <Footer />
+      </Box>
+      <div ref={scrollEvent} id='to-scroll' />
+      {(success || error) && (
+        <Snackbar open={open} autoHideDuration={10_000} onClose={handleClose}>
+          <Alert severity={success ? 'success' : 'error'} onClose={handleClose}>
+            <strong>{success || error}</strong>
+          </Alert>
+        </Snackbar>
+      )}
+    </HeadLayout>
+  )
+}
+
+Soutyen.defaultProps = {
+  paymentStatus: null
+}
+
+Soutyen.propTypes = {
+  prices: PropTypes.array.isRequired,
+  paymentStatus: PropTypes.string
+}
+
+export async function getServerSideProps({query}) {
+  const {payment_intent, payment_intent_client_secret} = query
+  const prices = await fetch(`${SITE_URL}/stripe/dons-list`)
+  let payment
+  if (payment_intent && payment_intent_client_secret) {
+    const paymentResponse = await fetch(`${SITE_URL}/stripe/check-payment`, {
+      method: 'POST',
+      headers: {'Content-Type': 'application/json'},
+      body: JSON.stringify({
+        payment_intent
+      })
+    })
+
+    payment = await paymentResponse.json()
+    if (!payment) {
+      throw new Error('Une erreur sest produite')
+    }
+  }
+
+  return {
+    props: {
+      prices: await prices.json(),
+      paymentStatus: payment?.status || null
+    }
+  }
+}