Add Liberapay to PaymentMethod

components/soutyen/payment-method.js

@@ -4,10 +4,11 @@ import Tab from '@mui/material/Tab'
 import Box from '@mui/material/Box'
 import Button from '@mui/material/Button'
 
-import {Paypal} from '@icons-pack/react-simple-icons'
+import {Paypal, Liberapay} from '@icons-pack/react-simple-icons'
 import {Elements} from '@stripe/react-stripe-js'
 import {loadStripe} from '@stripe/stripe-js'
 
+import {Grid} from '@mui/material'
 import {appearance} from '../../lib/utils/stripe-style'
 
 import CheckoutForm from './checkout-form'
@@ -18,6 +19,7 @@ const stripePromise = loadStripe(
 )
 
 const PAYPAL_ID = process.env.NEXT_PUBLIC_PAYPAL_DONATE_ID
+const LIBERAPAY_DONATE = process.env.NEXT_PUBLIC_LIBERAPAY_DONATE
 
 function TabPanel(props) {
   const {children, value, index, ...other} = props
@@ -66,9 +68,9 @@ 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='Don Carte bancaire' {...a11yProps(0)} />
-          <Tab label='Don PayPal' {...a11yProps(1)} />
-          <Tab label='Adhésion' {...a11yProps(2)} />
+          <Tab wrapped label='Carte bancaire' {...a11yProps(0)} />
+          <Tab wrapped label='PayPal / Liberapay' {...a11yProps(1)} />
+          <Tab wrapped label='Adhésion' {...a11yProps(2)} />
         </Tabs>
       </Box>
       <TabPanel value={paymentMethod} index={0}>
@@ -104,9 +106,18 @@ export default function PaymentMethod({isLoading, paymentMethod, setPaymentMetho
         )}
       </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>
+        <Grid container rowSpacing={1}>
+          <Grid item md={6} xs={12}>
+            <Button variant='outlined' size='large' endIcon={<Paypal />} onClick={() => window.open(`https://www.paypal.com/donate/?hosted_button_id=${PAYPAL_ID}`, '_blank')}>
+              Faire un don via PayPal
+            </Button>
+          </Grid>
+          <Grid item md={6} xs={12}>
+            <Button variant='outlined' size='large' endIcon={<Liberapay />} onClick={() => window.open(`https://liberapay.com/${LIBERAPAY_DONATE}/donate`, '_blank')}>
+              Faire un don via Liberapay
+            </Button>
+          </Grid>
+        </Grid>
       </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')}>

components/soutyen/presantasyon.js

@@ -21,7 +21,7 @@ export default function Presantasyon() {
           <strong>Toute contribution, aussi modeste soit-elle, nous permet d’augmenter nos capacités</strong>.
         </Typography>
         <Typography paragraph variant='subtitle1' component='div'>
-          Concernant les dons, ils peuvent s&apos;effectuer via PayPal ou directement sur notre site par carte bancaire. Pour ce dernier, nous utilisons <Link underline='hover' href='https://stripe.com/fr/about' target='_blank' rel='noreferrer'><strong>Stripe</strong></Link> (une plateforme de paiement 100% sécurisée).
+          Concernant les dons, ils peuvent s&apos;effectuer via <Link underline='hover' href='https://www.paypal.com/donate/?hosted_button_id=5Q3KPR79CAZVW' target='_blank' rel='noreferrer'><strong>PayPal</strong></Link>, <Link underline='hover' href='https://liberapay.com/OKi/donate' target='_blank' rel='noreferrer'><strong>Liberapay</strong></Link> ou directement sur notre site par carte bancaire. Pour ce dernier, nous utilisons <Link underline='hover' href='https://stripe.com/fr/about' target='_blank' rel='noreferrer'><strong>Stripe</strong></Link> (une plateforme de paiement 100% sécurisée).
         </Typography>
         <Typography paragraph variant='subtitle1' component='div'>
           Vous pouvez adhérer à notre association en passant par le site <Link underline='hover' href='https://www.helloasso.com/associations/organisation-ka-internationale/adhesions/adhesion-oki' target='_blank' rel='noreferrer'><strong>Helloasso</strong></Link>.