Add dialog to card payment

components/soutyen/checkout-form.js

@@ -9,7 +9,7 @@ import {Button, Container, LinearProgress, Paper} from '@mui/material'
 
 const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3001'
 
-export default function CheckoutForm({prices, validMontant, setPaymentIsReady, setError, isLoading, setIsLoading}) {
+export default function CheckoutForm({prices, validMontant, setError, isLoading, setIsLoading}) {
   const stripe = useStripe()
   const elements = useElements()
   const [isPaymentLoading, setIsPaymentLoading] = useState(false)
@@ -42,7 +42,6 @@ export default function CheckoutForm({prices, validMontant, setPaymentIsReady, s
 
   const handleReady = () => {
     setIsLoading(false)
-    setPaymentIsReady(true)
   }
 
   return (
@@ -65,7 +64,6 @@ export default function CheckoutForm({prices, validMontant, setPaymentIsReady, s
 CheckoutForm.propTypes = {
   validMontant: PropTypes.string.isRequired,
   prices: PropTypes.array.isRequired,
-  setPaymentIsReady: PropTypes.func.isRequired,
   setError: PropTypes.func.isRequired,
   isLoading: PropTypes.bool.isRequired,
   setIsLoading: PropTypes.func.isRequired

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,

components/soutyen/stripe-dialog.js

@@ -0,0 +1,94 @@
+import Dialog from '@mui/material/Dialog'
+import PropTypes from 'prop-types'
+import DialogTitle from '@mui/material/DialogTitle'
+import DialogContent from '@mui/material/DialogContent'
+import useMediaQuery from '@mui/material/useMediaQuery'
+import {useTheme} from '@mui/material/styles'
+
+import StripePayment from './stripe-payment'
+
+export default function StripeDialog({
+  open,
+  handleClose,
+  selectedMontant,
+  setSelectedMontant,
+  validMontant,
+  setValidMontant,
+  prices,
+  paymentIntent,
+  setClientSecret,
+  setPaymentIntent,
+  setIsLoading,
+  setClientEmail,
+  clientEmail,
+  error,
+  setError,
+  isLoading,
+  children
+}) {
+  const theme = useTheme()
+  const fullScreen = useMediaQuery(theme.breakpoints.down('md'))
+
+  return (
+    <div>
+      <Dialog
+        fullScreen={fullScreen}
+        open={open}
+        aria-labelledby='card-payment'
+        onClose={handleClose}
+      >
+        <DialogTitle textAlign='center' id='card-payment'>
+          {'Paiement par carte bancaire'}
+        </DialogTitle>
+        <DialogContent>
+          <StripePayment
+            selectedMontant={selectedMontant}
+            setSelectedMontant={setSelectedMontant}
+            validMontant={validMontant}
+            setValidMontant={setValidMontant}
+            prices={prices}
+            paymentIntent={paymentIntent}
+            setClientSecret={setClientSecret}
+            setPaymentIntent={setPaymentIntent}
+            setIsLoading={setIsLoading}
+            setClientEmail={setClientEmail}
+            clientEmail={clientEmail}
+            error={error}
+            setError={setError}
+            isLoading={isLoading}
+          />
+          {children}
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}
+
+StripeDialog.defaultProps = {
+  selectedMontant: null,
+  validMontant: null,
+  paymentIntent: null,
+  clientEmail: null,
+  error: null,
+  children: null
+}
+
+StripeDialog.propTypes = {
+  open: PropTypes.bool.isRequired,
+  handleClose: PropTypes.func.isRequired,
+  isLoading: PropTypes.bool.isRequired,
+  selectedMontant: PropTypes.string,
+  setSelectedMontant: PropTypes.func.isRequired,
+  validMontant: PropTypes.string,
+  setValidMontant: PropTypes.func.isRequired,
+  prices: PropTypes.array.isRequired,
+  paymentIntent: PropTypes.string,
+  setClientSecret: PropTypes.func.isRequired,
+  setPaymentIntent: PropTypes.func.isRequired,
+  setIsLoading: PropTypes.func.isRequired,
+  setClientEmail: PropTypes.func.isRequired,
+  clientEmail: PropTypes.string,
+  error: PropTypes.string,
+  setError: PropTypes.func.isRequired,
+  children: PropTypes.node
+}

pages/soutyen.js

@@ -27,14 +27,9 @@ export default function Soutyen({prices, paymentStatus}) {
   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 {
@@ -118,18 +113,6 @@ export default function Soutyen({prices, paymentStatus}) {
 
   useEffect(() => {}, [router.query.payment_intent])
 
-  useEffect(() => {
-    if (validMontant) {
-      scrollToBottom()
-    }
-  }, [validMontant])
-
-  useEffect(() => {
-    if (payementIsReady) {
-      scrollToBottom()
-    }
-  }, [payementIsReady])
-
   return (
     <HeadLayout
       title='Soutenir Organisation KA Internationale !'
@@ -162,7 +145,6 @@ export default function Soutyen({prices, paymentStatus}) {
                   setClientSecret={setClientSecret}
                   setPaymentIntent={setPaymentIntent}
                   setIsLoading={setIsLoading}
-                  setPaymentIsReady={setPaymentIsReady}
                   error={error}
                   setError={setError}
                   clientEmail={clientEmail}