Edit soutyen page

pages/soutyen.js

@@ -1,27 +1,17 @@
 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 {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 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'
+import Presantasyon from '../components/soutyen/presantasyon'
 
 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} />
 })
@@ -31,7 +21,7 @@ export default function Soutyen({prices, paymentStatus}) {
   const scrollEvent = useRef(null)
   const [clientSecret, setClientSecret] = useState(null)
   const [paymentIntent, setPaymentIntent] = useState(null)
-  const [isPaypal, setIsPaypal] = useState(true)
+  const [paymentMethod, setPaymentMethod] = useState(0)
   const [selectedMontant, setSelectedMontant] = useState(null)
   const [validMontant, setValidMontant] = useState(null)
   const [success, setSuccess] = useState(null)
@@ -45,11 +35,6 @@ export default function Soutyen({prices, paymentStatus}) {
     scrollEvent.current?.scrollIntoView({behavior: 'smooth', block: 'end', inline: 'nearest'})
   }
 
-  const options = {
-    clientSecret,
-    appearance,
-  }
-
   useEffect(() => {
     const getClientSecret = async () => {
       try {
@@ -80,11 +65,14 @@ export default function Soutyen({prices, paymentStatus}) {
   }
 
   useEffect(() => {
-    if (isPaypal) {
+    if (paymentMethod !== 2) {
+      setClientEmail('')
+      setClientSecret(null)
       setSelectedMontant(null)
       setValidMontant(null)
+      setIsLoading(false)
     }
-  }, [isPaypal, setSelectedMontant, setValidMontant])
+  }, [paymentMethod])
 
   useEffect(() => {
     if (paymentStatus) {
@@ -131,10 +119,10 @@ export default function Soutyen({prices, paymentStatus}) {
   useEffect(() => {}, [router.query.payment_intent])
 
   useEffect(() => {
-    if (!isPaypal || validMontant) {
+    if (paymentMethod === 2 || validMontant) {
       scrollToBottom()
     }
-  }, [isPaypal, validMontant])
+  }, [paymentMethod, validMontant])
 
   useEffect(() => {
     if (payementIsReady) {
@@ -159,19 +147,16 @@ export default function Soutyen({prices, paymentStatus}) {
             </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}
+                <PaymentMethod
+                  paymentMethod={paymentMethod}
+                  setPaymentMethod={setPaymentMethod}
                   selectedMontant={selectedMontant}
                   setSelectedMontant={setSelectedMontant}
                   validMontant={validMontant}
                   setValidMontant={setValidMontant}
                   prices={prices}
+                  isLoading={isLoading}
                   paymentIntent={paymentIntent}
                   clientSecret={clientSecret}
                   setClientSecret={setClientSecret}
@@ -183,22 +168,7 @@ export default function Soutyen({prices, paymentStatus}) {
                   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>
-              )}
+              </Box>
             </Paper>
           </Container>
         </Box>