Change soutyen to sipote
This commit is contained in:
@@ -0,0 +1,38 @@
|
|||||||
|
export const metadata = {
|
||||||
|
title: 'OKI | Soutenir Organisation KA Internationale !',
|
||||||
|
description: 'Vous pouvez nous soutenir via Liberapay ou PayPal',
|
||||||
|
openGraph: {
|
||||||
|
title: 'OKI | Soutenir Organisation KA Internationale !',
|
||||||
|
description: 'Vous pouvez nous soutenir via Liberapay ou PayPal.',
|
||||||
|
url: 'https://oki.re/sipote',
|
||||||
|
siteName: 'OKI | Organisation KA Internationale. Paroles et traductions.',
|
||||||
|
images: [
|
||||||
|
{
|
||||||
|
url: 'https://oki.re/sipote.png',
|
||||||
|
width: 500,
|
||||||
|
height: 500
|
||||||
|
}
|
||||||
|
],
|
||||||
|
locale: 'fr_FR',
|
||||||
|
type: 'website'
|
||||||
|
},
|
||||||
|
twitter: {
|
||||||
|
site: '@OrganisationKA',
|
||||||
|
card: 'summary_large_image',
|
||||||
|
title: 'OKI | Soutenir Organisation KA Internationale !',
|
||||||
|
description: 'Vous pouvez nous soutenir via Liberapay ou PayPal.',
|
||||||
|
creator: '@OrganisationKA',
|
||||||
|
images: {
|
||||||
|
url: 'https://oki.re/sipote.png',
|
||||||
|
alt: 'Sipòte OKI',
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default async function SipoteLayout({children}) {
|
||||||
|
return (
|
||||||
|
<section>
|
||||||
|
{children}
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,32 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import {useState} from 'react'
|
||||||
|
import {Box, Container, Typography, Paper} from '@mui/material'
|
||||||
|
|
||||||
|
import PaymentMethod from '../../components/soutyen/payment-method'
|
||||||
|
import Presantasyon from '../../components/soutyen/presantasyon'
|
||||||
|
|
||||||
|
export default function Sipote() {
|
||||||
|
const [paymentMethod, setPaymentMethod] = useState(0)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box sx={{display: 'flex', marginTop: 3, flexDirection: 'column', minHeight: '100vh'}}>
|
||||||
|
<Box sx={{flexGrow: 1, marginBottom: 10}}>
|
||||||
|
<Container>
|
||||||
|
<Typography gutterBottom sx={{fontWeight: 'bold'}} textAlign='center' variant='h4' component='h1'>
|
||||||
|
Soutenir Organisation KA Internationale !
|
||||||
|
</Typography>
|
||||||
|
<Paper sx={{padding: 2, marginTop: 3}}>
|
||||||
|
<Box sx={{textAlign: 'center'}}>
|
||||||
|
<PaymentMethod
|
||||||
|
paymentMethod={paymentMethod}
|
||||||
|
setPaymentMethod={setPaymentMethod}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
</Paper>
|
||||||
|
<Presantasyon />
|
||||||
|
</Container>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -1,202 +0,0 @@
|
|||||||
import {useEffect, useState, forwardRef, useRef} from 'react'
|
|
||||||
import {useRouter} from 'next/router'
|
|
||||||
import PropTypes from 'prop-types'
|
|
||||||
import {Box, Container, Typography, Snackbar, Paper} from '@mui/material'
|
|
||||||
import MuiAlert from '@mui/material/Alert'
|
|
||||||
import axios from 'axios'
|
|
||||||
|
|
||||||
import HeadLayout from '../components/head-layout'
|
|
||||||
import PaymentMethod from '../components/soutyen/payment-method'
|
|
||||||
import Footer from '../components/footer'
|
|
||||||
import Presantasyon from '../components/soutyen/presantasyon'
|
|
||||||
|
|
||||||
const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3001'
|
|
||||||
|
|
||||||
const Alert = forwardRef(function Alert(props, ref) {
|
|
||||||
return <MuiAlert ref={ref} elevation={6} variant='filled' {...props} />
|
|
||||||
})
|
|
||||||
|
|
||||||
export default function Soutyen({paymentStatus}) {
|
|
||||||
const router = useRouter()
|
|
||||||
const scrollEvent = useRef(null)
|
|
||||||
const [clientSecret, setClientSecret] = useState(null)
|
|
||||||
const [paymentIntent, setPaymentIntent] = useState(null)
|
|
||||||
const [paymentMethod, setPaymentMethod] = useState(0)
|
|
||||||
const [selectedMontant, setSelectedMontant] = useState(null)
|
|
||||||
const [validMontant, setValidMontant] = useState(null)
|
|
||||||
const [success, setSuccess] = useState(null)
|
|
||||||
const [error, setError] = useState(null)
|
|
||||||
const [open, setOpen] = useState(false)
|
|
||||||
const [isLoading, setIsLoading] = useState(false)
|
|
||||||
const [clientEmail, setClientEmail] = useState('')
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const getClientSecret = async () => {
|
|
||||||
try {
|
|
||||||
const response = await axios.post('/stripe/valid-payment', {
|
|
||||||
id: validMontant,
|
|
||||||
email: clientEmail
|
|
||||||
})
|
|
||||||
setClientSecret(response.data.clientSecret)
|
|
||||||
setPaymentIntent(response.data.paymentIntent)
|
|
||||||
} catch (error_) {
|
|
||||||
setError(error_.message)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (validMontant) {
|
|
||||||
getClientSecret()
|
|
||||||
}
|
|
||||||
}, [selectedMontant, clientEmail, validMontant])
|
|
||||||
|
|
||||||
const handleClose = (event, reason) => {
|
|
||||||
if (reason === 'clickaway') {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
setSuccess(null)
|
|
||||||
setError(null)
|
|
||||||
setOpen(false)
|
|
||||||
}
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (paymentMethod !== 2) {
|
|
||||||
setClientEmail('')
|
|
||||||
setClientSecret(null)
|
|
||||||
setSelectedMontant(null)
|
|
||||||
setValidMontant(null)
|
|
||||||
setIsLoading(false)
|
|
||||||
}
|
|
||||||
}, [paymentMethod])
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (paymentStatus) {
|
|
||||||
switch (paymentStatus) {
|
|
||||||
case 'succeeded':
|
|
||||||
setSuccess('Paiement réussi. Merci pour votre soutien 🥰')
|
|
||||||
break
|
|
||||||
case 'processing':
|
|
||||||
setSuccess('Votre paiement en cours de traitement.')
|
|
||||||
break
|
|
||||||
case 'requires_payment_method':
|
|
||||||
setError('Votre paiement n’a pas abouti, veuillez réessayer.')
|
|
||||||
break
|
|
||||||
default:
|
|
||||||
setError('Une erreur s’est produite.')
|
|
||||||
break
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
setSuccess(null)
|
|
||||||
setError(null)
|
|
||||||
}
|
|
||||||
}, [paymentStatus, router])
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (success) {
|
|
||||||
setOpen(true)
|
|
||||||
} else {
|
|
||||||
setOpen(false)
|
|
||||||
}
|
|
||||||
}, [success])
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (error) {
|
|
||||||
setOpen(true)
|
|
||||||
} else {
|
|
||||||
setOpen(false)
|
|
||||||
}
|
|
||||||
}, [error])
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
router.push('/soutyen', undefined, {shallow: true})
|
|
||||||
}, []) // eslint-disable-line react-hooks/exhaustive-deps
|
|
||||||
|
|
||||||
useEffect(() => {}, [router.query.payment_intent])
|
|
||||||
|
|
||||||
return (
|
|
||||||
<HeadLayout
|
|
||||||
title='Soutenir Organisation KA Internationale !'
|
|
||||||
summary='Vous pouvez nous soutenir via Liberapay, PayPal ou directement par CB sur le site.'
|
|
||||||
tab={1}
|
|
||||||
slug='soutyen'
|
|
||||||
imageUrl='/uploads/soutyen_8246fb700e.png'
|
|
||||||
imageWidth={500}
|
|
||||||
imageHeight={500}
|
|
||||||
>
|
|
||||||
<Box sx={{display: 'flex', flexDirection: 'column', minHeight: '100vh'}}>
|
|
||||||
<Box sx={{flexGrow: 1, marginTop: 1, marginBottom: 10}}>
|
|
||||||
<Container sx={{marginTop: 3}}>
|
|
||||||
<Typography gutterBottom sx={{fontWeight: 'bold'}} textAlign='center' variant='h4' component='h1'>
|
|
||||||
Soutenir Organisation KA Internationale !
|
|
||||||
</Typography>
|
|
||||||
<Paper sx={{padding: 2, marginTop: 3}}>
|
|
||||||
<Box sx={{textAlign: 'center'}}>
|
|
||||||
<PaymentMethod
|
|
||||||
paymentMethod={paymentMethod}
|
|
||||||
setPaymentMethod={setPaymentMethod}
|
|
||||||
selectedMontant={selectedMontant}
|
|
||||||
setSelectedMontant={setSelectedMontant}
|
|
||||||
validMontant={validMontant}
|
|
||||||
setValidMontant={setValidMontant}
|
|
||||||
isLoading={isLoading}
|
|
||||||
paymentIntent={paymentIntent}
|
|
||||||
clientSecret={clientSecret}
|
|
||||||
setClientSecret={setClientSecret}
|
|
||||||
setPaymentIntent={setPaymentIntent}
|
|
||||||
setIsLoading={setIsLoading}
|
|
||||||
error={error}
|
|
||||||
setError={setError}
|
|
||||||
clientEmail={clientEmail}
|
|
||||||
setClientEmail={setClientEmail}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
</Paper>
|
|
||||||
<Presantasyon />
|
|
||||||
</Container>
|
|
||||||
</Box>
|
|
||||||
<Footer />
|
|
||||||
</Box>
|
|
||||||
<div ref={scrollEvent} id='to-scroll' />
|
|
||||||
{(success || error) && (
|
|
||||||
<Snackbar open={open} autoHideDuration={10_000} onClose={handleClose}>
|
|
||||||
<Alert severity={success ? 'success' : 'error'} onClose={handleClose}>
|
|
||||||
<strong>{success || error}</strong>
|
|
||||||
</Alert>
|
|
||||||
</Snackbar>
|
|
||||||
)}
|
|
||||||
</HeadLayout>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
Soutyen.defaultProps = {
|
|
||||||
paymentStatus: null
|
|
||||||
}
|
|
||||||
|
|
||||||
Soutyen.propTypes = {
|
|
||||||
paymentStatus: PropTypes.string
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getServerSideProps({query}) {
|
|
||||||
const {payment_intent, payment_intent_client_secret} = query
|
|
||||||
let payment
|
|
||||||
if (payment_intent && payment_intent_client_secret) {
|
|
||||||
const paymentResponse = await fetch(`${SITE_URL}/stripe/check-payment`, {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {'Content-Type': 'application/json'},
|
|
||||||
body: JSON.stringify({
|
|
||||||
payment_intent
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
payment = await paymentResponse.json()
|
|
||||||
if (!payment) {
|
|
||||||
throw new Error('Une erreur sest produite')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
props: {
|
|
||||||
paymentStatus: payment?.status || null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 34 KiB |
Reference in New Issue
Block a user