Add dialog to card payment

components/soutyen/payment-method.js

@@ -1,3 +1,4 @@
+import {useState} from 'react'
 import PropTypes from 'prop-types'
 import Tabs from '@mui/material/Tabs'
 import Tab from '@mui/material/Tab'
@@ -12,7 +13,7 @@ import {Grid} from '@mui/material'
 import {appearance} from '../../lib/utils/stripe-style'
 
 import CheckoutForm from './checkout-form'
-import StripePayment from './stripe-payment'
+import StripeDialog from './stripe-dialog'
 
 const stripePromise = loadStripe(
   process.env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY
@@ -54,7 +55,9 @@ function a11yProps(index) {
   }
 }
 
-export default function PaymentMethod({isLoading, paymentMethod, setPaymentMethod, selectedMontant, setSelectedMontant, validMontant, setValidMontant, prices, paymentIntent, setClientSecret, setPaymentIntent, setIsLoading, setPaymentIsReady, setClientEmail, clientEmail, error, setError, clientSecret}) {
+export default function PaymentMethod({isLoading, paymentMethod, setPaymentMethod, selectedMontant, setSelectedMontant, validMontant, setValidMontant, prices, paymentIntent, setClientSecret, setPaymentIntent, setIsLoading, setClientEmail, clientEmail, error, setError, clientSecret}) {
+  const [open, setOpen] = useState(false)
+
   const options = {
     clientSecret,
     appearance,
@@ -64,6 +67,14 @@ export default function PaymentMethod({isLoading, paymentMethod, setPaymentMetho
     setPaymentMethod(newValue)
   }
 
+  const handleClickOpen = () => {
+    setOpen(true)
+  }
+
+  const handleClose = () => {
+    setOpen(false)
+  }
+
   return (
     <Box sx={{width: '100%'}}>
       <Box sx={{borderBottom: 1, borderColor: 'divider'}}>
@@ -74,7 +85,12 @@ export default function PaymentMethod({isLoading, paymentMethod, setPaymentMetho
         </Tabs>
       </Box>
       <TabPanel value={paymentMethod} index={0}>
-        <StripePayment
+        <Button size='large' variant='outlined' onClick={handleClickOpen}>
+          Faire un don par carte bancaire
+        </Button>
+        <StripeDialog
+          open={open}
+          handleClose={handleClose}
           selectedMontant={selectedMontant}
           setSelectedMontant={setSelectedMontant}
           validMontant={validMontant}
@@ -84,26 +100,24 @@ export default function PaymentMethod({isLoading, paymentMethod, setPaymentMetho
           setClientSecret={setClientSecret}
           setPaymentIntent={setPaymentIntent}
           setIsLoading={setIsLoading}
-          setPaymentIsReady={setPaymentIsReady}
           setClientEmail={setClientEmail}
           clientEmail={clientEmail}
           error={error}
           setError={setError}
           isLoading={isLoading}
-        />
-
-        {clientSecret && validMontant && paymentMethod === 0 && (
-          <Elements options={options} stripe={stripePromise}>
-            <CheckoutForm
-              prices={prices}
-              validMontant={validMontant}
-              setPaymentIsReady={setPaymentIsReady}
-              setError={setError}
-              isLoading={isLoading}
-              setIsLoading={setIsLoading}
-            />
-          </Elements>
-        )}
+        >
+          {clientSecret && validMontant && paymentMethod === 0 && (
+            <Elements options={options} stripe={stripePromise}>
+              <CheckoutForm
+                prices={prices}
+                validMontant={validMontant}
+                setError={setError}
+                isLoading={isLoading}
+                setIsLoading={setIsLoading}
+              />
+            </Elements>
+          )}
+        </StripeDialog>
       </TabPanel>
       <TabPanel value={paymentMethod} index={1}>
         <Grid container rowSpacing={1}>
@@ -150,7 +164,6 @@ PaymentMethod.propTypes = {
   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,