pawol.nu/pages/soutyen.js

import {useEffect, useState, forwardRef, useRef} from 'react'
import {useRouter} from 'next/router'
import PropTypes from 'prop-types'
import {Box, Container, Typography, Snackbar, Paper} from '@mui/material'
import MuiAlert from '@mui/material/Alert'
import axios from 'axios'

import HeadLayout from '../components/head-layout'
import PaymentMethod from '../components/soutyen/payment-method'
import Footer from '../components/footer'
import Presantasyon from '../components/soutyen/presantasyon'

const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3001'

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 [paymentMethod, setPaymentMethod] = useState(0)
  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'})
  }

  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 (paymentMethod !== 2) {
      setClientEmail('')
      setClientSecret(null)
      setSelectedMontant(null)
      setValidMontant(null)
      setIsLoading(false)
    }
  }, [paymentMethod])

  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 (paymentMethod === 2 || validMontant) {
      scrollToBottom()
    }
  }, [paymentMethod, 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}}>
              <Box sx={{textAlign: 'center'}}>
                <PaymentMethod
                  paymentMethod={paymentMethod}
                  setPaymentMethod={setPaymentMethod}
                  selectedMontant={selectedMontant}
                  setSelectedMontant={setSelectedMontant}
                  validMontant={validMontant}
                  setValidMontant={setValidMontant}
                  prices={prices}
                  isLoading={isLoading}
                  paymentIntent={paymentIntent}
                  clientSecret={clientSecret}
                  setClientSecret={setClientSecret}
                  setPaymentIntent={setPaymentIntent}
                  setIsLoading={setIsLoading}
                  setPaymentIsReady={setPaymentIsReady}
                  error={error}
                  setError={setError}
                  clientEmail={clientEmail}
                  setClientEmail={setClientEmail}
                />
              </Box>
            </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
    }
  }
}