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 {Box, Container, Typography, Snackbar, Paper} from '@mui/material'
-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 Presantasyon from '../components/soutyen/presantasyon'
-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} />
 })
@@ -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,46 +147,28 @@ 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} />
+                <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>
-              <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>