Change PaymentMethod order

components/soutyen/payment-method.js

@@ -66,22 +66,12 @@ export default function PaymentMethod({isLoading, paymentMethod, setPaymentMetho
     <Box sx={{width: '100%'}}>
       <Box sx={{borderBottom: 1, borderColor: 'divider'}}>
         <Tabs scrollButtons allowScrollButtonsMobile value={paymentMethod} aria-label='basic tabs example' variant='fullWidth' onChange={handleChange}>
-          <Tab label='Adhésion' {...a11yProps(0)} />
+          <Tab label='Don Carte bancaire' {...a11yProps(0)} />
           <Tab label='Don PayPal' {...a11yProps(1)} />
-          <Tab label='Don Carte bancaire' {...a11yProps(2)} />
+          <Tab label='Adhésion' {...a11yProps(2)} />
         </Tabs>
       </Box>
       <TabPanel value={paymentMethod} index={0}>
-        <Button size='large' variant='outlined' onClick={() => window.open('https://www.helloasso.com/associations/organisation-ka-internationale/adhesions/adhesion-oki', '_blank')}>
-          Cliquez ici pour adhérer à #OKi via HelloAsso
-        </Button>
-      </TabPanel>
-      <TabPanel value={paymentMethod} index={1}>
-        <Button variant='outlined' size='large' endIcon={<Paypal />} onClick={() => window.open(`https://www.paypal.com/donate/?hosted_button_id=${PAYPAL_ID}`, '_blank')}>
-          Cliquez ici pour faire un don via PayPal
-        </Button>
-      </TabPanel>
-      <TabPanel value={paymentMethod} index={2}>
         <StripePayment
           selectedMontant={selectedMontant}
           setSelectedMontant={setSelectedMontant}
@@ -100,7 +90,7 @@ export default function PaymentMethod({isLoading, paymentMethod, setPaymentMetho
           isLoading={isLoading}
         />
 
-        {clientSecret && validMontant && paymentMethod === 2 && (
+        {clientSecret && validMontant && paymentMethod === 0 && (
           <Elements options={options} stripe={stripePromise}>
             <CheckoutForm
               setPaymentIsReady={setPaymentIsReady}
@@ -111,6 +101,16 @@ export default function PaymentMethod({isLoading, paymentMethod, setPaymentMetho
           </Elements>
         )}
       </TabPanel>
+      <TabPanel value={paymentMethod} index={1}>
+        <Button variant='outlined' size='large' endIcon={<Paypal />} onClick={() => window.open(`https://www.paypal.com/donate/?hosted_button_id=${PAYPAL_ID}`, '_blank')}>
+          Cliquez ici pour faire un don via PayPal
+        </Button>
+      </TabPanel>
+      <TabPanel value={paymentMethod} index={2}>
+        <Button size='large' variant='outlined' onClick={() => window.open('https://www.helloasso.com/associations/organisation-ka-internationale/adhesions/adhesion-oki', '_blank')}>
+          Cliquez ici pour adhérer à #OKi via HelloAsso
+        </Button>
+      </TabPanel>
     </Box>
   )
 }

pages/soutyen.js

@@ -65,7 +65,7 @@ export default function Soutyen({prices, paymentStatus}) {
   }
 
   useEffect(() => {
-    if (paymentMethod !== 2) {
+    if (paymentMethod !== 0) {
       setClientEmail('')
       setClientSecret(null)
       setSelectedMontant(null)
@@ -119,10 +119,10 @@ export default function Soutyen({prices, paymentStatus}) {
   useEffect(() => {}, [router.query.payment_intent])
 
   useEffect(() => {
-    if (paymentMethod === 2 || validMontant) {
+    if (validMontant) {
       scrollToBottom()
     }
-  }, [paymentMethod, validMontant])
+  }, [validMontant])
 
   useEffect(() => {
     if (payementIsReady) {