ORGANISATION-KA-INTERNATIONALE/pawol.nu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update donate page

Browse Source
This commit is contained in:
Cédric Famibelle-Pronzola
2024-01-18 20:32:01 +04:00
parent a978f17f81
commit 6ac93265b9
3 changed files with 83 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/soutyen/card-method.js
+79
View File
@@ -0,0 +1,79 @@
import {Container, Box, Typography, Button, Link} from '@mui/material'
import {makeStyles} from '@mui/styles'
const useStyles = makeStyles(() => ({
styledFrame: {
border: '2px solid #4CAF50',
borderRadius: '10px',
boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
backgroundColor: '#f9f9f9',
padding: '20px',
textAlign: 'center',
},
btnStyled: {
borderRadius: '5px',
boxShadow: '0 2px 2px rgba(0, 0, 0, 0.1)',
transition: 'all 0.3s ease',
margin: '8px',
'&:hover': {
transform: 'translateY(-2px)',
boxShadow: '0 4px 4px rgba(0, 0, 0, 0.2)',
},
},
btnSpecial: {
borderRadius: '5px',
backgroundColor: '#FFC107',
color: 'black',
border: 'none',
boxShadow: '0 2px 2px rgba(0, 0, 0, 0.2)',
transition: 'all 0.3s ease',
margin: '1em 0 2.5em',
'&:hover': {
backgroundColor: '#FFD54F',
transform: 'scale(1.05)',
boxShadow: '0 4px 4px rgba(0, 0, 0, 0.3)',
},
},
}))
function CardMethod() {
const classes = useStyles()
return (
<Container>
<Box sx={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
<Typography variant='body2' color='textSecondary'>
🔒 Vos paiements sont sécurisés et traités de manière fiable par <strong><Link href='https://stripe.com/' target='_blank' rel='noopener noreferrer'>Stripe</Link></strong>, une plateforme de paiement en ligne reconnue mondialement.
</Typography>
</Box>
<Typography sx={{mb: 2, fontWeight: 'bold'}} variant='body2' color='textSecondary'>
Aucune information de paiement n’est stockée sur notre site.
</Typography>
{/* Paiements Ponctuels */}
<Box>
<Typography gutterBottom variant='h6' component='h3'>Ponctuel</Typography>
<Button variant='contained' href='https://donate.stripe.com/aEUdTw5SD3SH7m0bII' className={classes.btnStyled}>1€</Button>
<Button variant='contained' href='https://donate.stripe.com/4gw6r480L1Kz5dScMO' className={classes.btnStyled}>5€</Button>
<Button variant='contained' href='https://donate.stripe.com/5kA02G1Cn4WLbCgeUV' className={classes.btnStyled}>10€</Button>
<Button variant='contained' href='https://donate.stripe.com/fZebLo94PfBpayc5kn' className={classes.btnStyled}>20€</Button>
<Button variant='contained' href='https://donate.stripe.com/6oE5n05SDdth49O004' className={classes.btnStyled}>50€</Button>
</Box>
<Button variant='contained' href='https://donate.stripe.com/6oE2aO94P88X9u8eV4' className={classes.btnSpecial}>
Montant personnalisé
</Button>
{/* Paiements Mensuels */}
<Box>
<Typography gutterBottom variant='h6' component='h3'>Mensuel</Typography>
<Button variant='contained' href='https://buy.stripe.com/7sI9Dgch14WL7m0fZ3' className={classes.btnStyled}>1€/mois</Button>
<Button variant='contained' href='https://buy.stripe.com/8wM4iW4Ozbl95dS6ow' className={classes.btnStyled}>5€/mois</Button>
<Button variant='contained' href='https://buy.stripe.com/8wM2aO80L74TcGk3ci' className={classes.btnStyled}>10€/mois</Button>
<Button variant='contained' href='https://buy.stripe.com/00g7v894P88XgWAfZ7' className={classes.btnStyled}>20€/mois</Button>
<Button variant='contained' href='https://buy.stripe.com/4gw8zc6WHgFtcGkbIP' className={classes.btnStyled}>50€/mois</Button>
</Box>
</Container>
)
}
export default CardMethod
components/soutyen/payment-method.js
+3 -4
View File
@@ -7,6 +7,7 @@ import Button from '@mui/material/Button'
import {Paypal, Liberapay} from '@icons-pack/react-simple-icons'
import Grid from '@mui/material/Unstable_Grid2'
import CardMethod from './card-method'
const PAYPAL_ID = process.env.NEXT_PUBLIC_PAYPAL_DONATE_ID
const LIBERAPAY_DONATE = process.env.NEXT_PUBLIC_LIBERAPAY_DONATE
@@ -54,7 +55,7 @@ export default function PaymentMethod({paymentMethod, setPaymentMethod}) {
<Box sx={{borderBottom: 1, borderColor: 'divider'}}>
<Tabs scrollButtons allowScrollButtonsMobile value={paymentMethod} aria-label='basic tabs example' variant='fullWidth' onChange={handleChange}>
<Tab wrapped label='Liberapay / PayPal' {...a11yProps(0)} />
<Tab wrapped label='Adhésion' {...a11yProps(1)} />
<Tab wrapped label='Carte bancaire' {...a11yProps(1)} />
</Tabs>
</Box>
<TabPanel value={paymentMethod} index={0}>
@@ -72,9 +73,7 @@ export default function PaymentMethod({paymentMethod, setPaymentMethod}) {
</Grid>
</TabPanel>
<TabPanel value={paymentMethod} index={1}>
<Button size='large' variant='outlined' onClick={() => window.open('https://asso.oki.re/public/members/new.php', '_blank')}>
Cliquez ici pour adhérer à l’association OKi
</Button>
<CardMethod />
</TabPanel>
</Box>
)
components/soutyen/presantasyon.js
+1 -4
View File
@@ -23,9 +23,6 @@ export default function Presantasyon() {
<Typography paragraph variant='subtitle1' component='div'>
Concernant les dons, ils peuvent s&apos;effectuer via <Link underline='hover' href='https://liberapay.com/OKi/donate' target='_blank' rel='noreferrer'><strong>Liberapay</strong></Link>, <Link underline='hover' href='https://www.paypal.com/donate/?hosted_button_id=5Q3KPR79CAZVW' target='_blank' rel='noreferrer'><strong>PayPal</strong></Link>.
</Typography>
<Typography paragraph variant='subtitle1' component='div'>
Vous pouvez adhérer à notre association en vous rendant sur <Link underline='hover' href='https://asso.oki.re/public/members/new.php' target='_blank' rel='noreferrer'><strong>asso.oki.re</strong></Link>.
</Typography>
<Typography paragraph variant='subtitle1' component='div'>
Veuillez prendre connaissance des <Link underline='hover' href='#' onClick={() => setOpen(true)}><strong>CGU et de la politique de confidentialité</strong></Link> au chapitre 9 &quot;Les dons&quot;. <Link underline='hover' href={CGU_PDF_LINK}><small>Cliquez ici pour la version pdf</small></Link>.
</Typography>
@@ -59,7 +56,7 @@ export default function Presantasyon() {
</ListItem>
</List>
<Typography paragraph variant='subtitle1' component='div'>
Pour toute question, n’hésitez pas à nous contacter par courriel <Link href='mailto:kontak@oki.re'><strong>kontak@oki.re</strong></Link>, ou via XMPP <Link href='xmpp:oki@xmpp.cz'><strong>oki@xmpp.cz</strong></Link>.
Pour toute question, n’hésitez pas à nous contacter par courriel <Link href='mailto:kontak@oki.re'><strong>kontak@oki.re</strong></Link>.
</Typography>
<Typography paragraph variant='subtitle1' component='div'>
<strong>Merci par avance pour votre soutien 🥰</strong>