diff --git a/app/sipote/layout.js b/app/sipote/layout.js new file mode 100644 index 0000000..75b64d3 --- /dev/null +++ b/app/sipote/layout.js @@ -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 ( +
+ {children} +
+ ) +} diff --git a/app/sipote/page.js b/app/sipote/page.js new file mode 100644 index 0000000..4ead4fb --- /dev/null +++ b/app/sipote/page.js @@ -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 ( + + + + + Soutenir Organisation KA Internationale ! + + + + + + + + + + + ) +} diff --git a/pages/soutyen.js b/pages/soutyen.js deleted file mode 100644 index 1fa8a16..0000000 --- a/pages/soutyen.js +++ /dev/null @@ -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 -}) - -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 ( - - - - - - Soutenir Organisation KA Internationale ! - - - - - - - - - -