Remove Stripe from the project

This commit is contained in:
2023-07-23 19:40:53 +04:00
parent 725d7ea7cb
commit a89145125c
8 changed files with 1 additions and 514 deletions
-83
View File
@@ -1,83 +0,0 @@
import {useState, useEffect} from 'react'
import PropTypes from 'prop-types'
import {
PaymentElement,
useStripe,
useElements
} from '@stripe/react-stripe-js'
import {Button, Container, LinearProgress, Paper} from '@mui/material'
const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3001'
export default function CheckoutForm({validMontant, setError, isLoading, setIsLoading}) {
const stripe = useStripe()
const elements = useElements()
const [isPaymentLoading, setIsPaymentLoading] = useState(false)
const [prices, setPrices] = useState([])
const handleSubmit = async event => {
event.preventDefault()
if (!stripe || !elements) {
return
}
setIsPaymentLoading(true)
const {error} = await stripe.confirmPayment({
elements,
confirmParams: {
return_url: `${SITE_URL}/soutyen`
},
})
if (error.type === 'card_error' || error.type === 'validation_error') {
setError(error.message)
} else {
setError('Une erreur sest produite.')
}
setIsPaymentLoading(false)
}
const handleReady = () => {
setIsLoading(false)
}
useEffect(() => {
const fetchPrices = async () => {
try {
const response = await fetch(`${SITE_URL}/stripe/dons-list`)
const pricesList = await response.json()
setPrices(pricesList)
} catch (error) {
console.error('error', error)
}
}
fetchPrices()
}, [prices])
return (
<Container maxWidth='sm' sx={{marginBottom: 1}}>
<Paper sx={{padding: 2, marginTop: 3}}>
<PaymentElement id='payment-element' onReady={handleReady} />
{!isLoading && (
<Button fullWidth sx={{marginTop: 2}} variant='outlined' disabled={isPaymentLoading || !stripe || !elements} id='submit' onClick={handleSubmit}>
Valider le don de&nbsp;<strong>{prices.find(({id}) => id === validMontant).unit_amount / 100} euros</strong>
</Button>
)}
{isPaymentLoading && (
<LinearProgress size={24} style={{width: '100%', marginTop: 10}} />
)}
</Paper>
</Container>
)
}
CheckoutForm.propTypes = {
validMontant: PropTypes.string.isRequired,
setError: PropTypes.func.isRequired,
isLoading: PropTypes.bool.isRequired,
setIsLoading: PropTypes.func.isRequired
}
-108
View File
@@ -1,108 +0,0 @@
import PropTypes from 'prop-types'
import {Container, Stack, Typography} from '@mui/material'
import axios from 'axios'
import Button from '@mui/material/Button'
import Box from '@mui/material/Box'
import {Paypal} from '@icons-pack/react-simple-icons'
import {validateEmail} from '../../lib/utils/emails'
import Montant from './montant'
import Email from './email'
const PAYPAL_ID = process.env.NEXT_PUBLIC_PAYPAL_DONATE_ID
export default function Don({isPaypal, selectedMontant, setSelectedMontant, validMontant, setValidMontant, prices, paymentIntent, setClientSecret, setPaymentIntent, setIsLoading, setClientEmail, clientEmail, error, setError}) {
const cancelPayment = async () => {
setClientEmail('')
setIsLoading(false)
setClientSecret(null)
try {
await axios.post('/stripe/cancel-payment', {
paymentIntent
})
setPaymentIntent(null)
} catch (error_) {
console.log(error_.message)
}
}
const handleCancel = async () => {
setValidMontant(null)
setSelectedMontant(null)
await cancelPayment()
}
const handleClick = () => {
if (!clientEmail) {
setError('Adresse e-mail obligatoire.')
return
}
if (!validateEmail(clientEmail)) {
setError('Adresse e-mail invalide.')
return
}
setIsLoading(true)
setValidMontant(selectedMontant)
}
return (
<Container>
<Box sx={{textAlign: 'center', marginBlock: 1}}>
{isPaypal ? (
<>
<Typography gutterBottom component='div' variant='h5'>PayPal</Typography>
<Button variant='outlined' size='large' endIcon={<Paypal />} onClick={() => window.open(`https://www.paypal.com/donate/?hosted_button_id=${PAYPAL_ID}`, '_blank')}>Don via PayPal</Button>
</>
) : (
<>
<Typography gutterBottom component='div' variant='h5'>Carte bancaire</Typography>
<Email validMontant={validMontant} error={error} setClientEmail={setClientEmail} clientEmail={clientEmail} />
<Montant
selectedMontant={selectedMontant}
setSelectedMontant={setSelectedMontant}
validMontant={validMontant}
setValidMontant={setValidMontant}
prices={prices}
paymentIntent={paymentIntent}
setClientSecret={setClientSecret}
setPaymentIntent={setPaymentIntent}
setIsLoading={setIsLoading}
setClientEmail={setClientEmail}
/>
<Stack justifyContent='center' sx={{marginTop: 3}} direction={{xs: 'column', sm: 'row'}} spacing={{xs: 1, sm: 2, md: 4}}>
<Button disabled={Boolean(validMontant) || Boolean(!selectedMontant)} variant='contained' onClick={handleClick}>
Valider les informations
</Button>
{validMontant && (
<Button disabled={Boolean(!validMontant)} color='secondary' variant='contained' onClick={handleCancel}>
Annuler
</Button>
)}
</Stack>
</>
)}
</Box>
</Container>
)
}
Don.propTypes = {
isPaypal: PropTypes.bool.isRequired,
selectedMontant: PropTypes.string,
setSelectedMontant: PropTypes.func.isRequired,
validMontant: PropTypes.string,
setValidMontant: PropTypes.func.isRequired,
prices: PropTypes.array.isRequired,
paymentIntent: PropTypes.string,
setClientSecret: PropTypes.func.isRequired,
setPaymentIntent: PropTypes.func.isRequired,
setIsLoading: PropTypes.func.isRequired,
setClientEmail: PropTypes.func.isRequired,
clientEmail: PropTypes.string,
error: PropTypes.string,
setError: PropTypes.func.isRequired
}
-34
View File
@@ -1,34 +0,0 @@
import PropTypes from 'prop-types'
import Box from '@mui/material/Box'
import TextField from '@mui/material/TextField'
export default function Email({validMontant, error, clientEmail, setClientEmail}) {
return (
<Box sx={{marginBottom: 2}}>
<TextField
required
disabled={Boolean(validMontant)}
InputLabelProps={{
shrink: true,
}}
variant='outlined'
label='Adresse e-mail'
error={error === 'Adresse e-mail invalide.' || error === 'Adresse e-mail obligatoire.'}
autoComplete='email'
value={clientEmail}
name='email-client'
type='email'
id='email-client'
helperText={error === 'Adresse e-mail invalide.' || error === 'Adresse e-mail obligatoire.' ? error : ''}
onChange={event => setClientEmail(event.target.value)}
/>
</Box>
)
}
Email.propTypes = {
validMontant: PropTypes.string,
error: PropTypes.string,
clientEmail: PropTypes.string,
setClientEmail: PropTypes.func.isRequired
}
-61
View File
@@ -1,61 +0,0 @@
import {useState, useEffect} from 'react'
import PropTypes from 'prop-types'
import ToggleButton from '@mui/material/ToggleButton'
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'
import Typography from '@mui/material/Typography'
import {Box} from '@mui/material'
import CircularProgress from '@mui/material/CircularProgress'
const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3001'
export default function Montant({selectedMontant, setSelectedMontant, validMontant}) {
const [prices, setPrices] = useState(null)
const handleChange = (event, newMontant) => {
setSelectedMontant(newMontant)
}
useEffect(() => {
const fetchPrices = async () => {
try {
const response = await fetch(`${SITE_URL}/stripe/dons-list`)
const pricesList = await response.json()
setPrices(pricesList)
} catch (error) {
console.error('error', error)
}
}
fetchPrices()
}, [prices])
return (
<Box>
<Typography marginTop={1} variant='button' component='div'>
Choisir un montant *
</Typography>
<ToggleButtonGroup
exclusive
disabled={Boolean(validMontant)}
size='large'
color='primary'
value={selectedMontant}
onChange={handleChange}
>
{!prices && (
<CircularProgress color='primary' size={20} />
)}
{prices && prices.map(r => (
<ToggleButton key={r.id} value={r.id}>{r.unit_amount / 100} </ToggleButton>
))}
</ToggleButtonGroup>
</Box>
)
}
Montant.propTypes = {
selectedMontant: PropTypes.string,
setSelectedMontant: PropTypes.func.isRequired,
validMontant: PropTypes.string
}
-83
View File
@@ -1,83 +0,0 @@
import Dialog from '@mui/material/Dialog'
import PropTypes from 'prop-types'
import DialogTitle from '@mui/material/DialogTitle'
import DialogContent from '@mui/material/DialogContent'
import useMediaQuery from '@mui/material/useMediaQuery'
import {useTheme} from '@mui/material/styles'
import StripePayment from './stripe-payment'
export default function StripeDialog({
open,
handleClose,
selectedMontant,
setSelectedMontant,
validMontant,
setValidMontant,
paymentIntent,
setClientSecret,
setPaymentIntent,
setIsLoading,
setClientEmail,
clientEmail,
error,
setError,
isLoading,
children
}) {
const theme = useTheme()
const fullScreen = useMediaQuery(theme.breakpoints.down('md'))
return (
<div>
<Dialog
fullScreen={fullScreen}
open={open}
aria-labelledby='card-payment'
onClose={handleClose}
>
<DialogTitle textAlign='center' id='card-payment'>
{'Don par carte bancaire'}
</DialogTitle>
<DialogContent>
<StripePayment
selectedMontant={selectedMontant}
setSelectedMontant={setSelectedMontant}
validMontant={validMontant}
setValidMontant={setValidMontant}
paymentIntent={paymentIntent}
setClientSecret={setClientSecret}
setPaymentIntent={setPaymentIntent}
setIsLoading={setIsLoading}
setClientEmail={setClientEmail}
clientEmail={clientEmail}
error={error}
setError={setError}
isLoading={isLoading}
handleClose={handleClose}
/>
{children}
</DialogContent>
</Dialog>
</div>
)
}
StripeDialog.propTypes = {
open: PropTypes.bool.isRequired,
handleClose: PropTypes.func.isRequired,
isLoading: PropTypes.bool.isRequired,
selectedMontant: PropTypes.string,
setSelectedMontant: PropTypes.func.isRequired,
validMontant: PropTypes.string,
setValidMontant: PropTypes.func.isRequired,
paymentIntent: PropTypes.string,
setClientSecret: PropTypes.func.isRequired,
setPaymentIntent: PropTypes.func.isRequired,
setIsLoading: PropTypes.func.isRequired,
setClientEmail: PropTypes.func.isRequired,
clientEmail: PropTypes.string,
error: PropTypes.string,
setError: PropTypes.func.isRequired,
children: PropTypes.node
}
-109
View File
@@ -1,109 +0,0 @@
import PropTypes from 'prop-types'
import axios from 'axios'
import Box from '@mui/material/Box'
import Container from '@mui/material/Container'
import Typography from '@mui/material/Typography'
import Stack from '@mui/material/Stack'
import Button from '@mui/material/Button'
import LinearProgress from '@mui/material/LinearProgress'
import {validateEmail} from '../../lib/utils/emails'
import Email from './email'
import Montant from './montant'
export default function StripePayment({isLoading, selectedMontant, setSelectedMontant, validMontant, setValidMontant, paymentIntent, setClientSecret, setPaymentIntent, setIsLoading, setClientEmail, clientEmail, error, setError, handleClose}) {
const cancelPayment = async () => {
setClientEmail('')
setIsLoading(false)
setClientSecret(null)
try {
await axios.post('/stripe/cancel-payment', {
paymentIntent
})
setPaymentIntent(null)
} catch (error_) {
console.log(error_.message)
}
}
const handleCancel = async () => {
if (validMontant) {
setValidMontant(null)
setSelectedMontant(null)
await cancelPayment()
handleClose()
} else {
handleClose()
}
}
const handleClick = () => {
if (!clientEmail) {
setError('Adresse e-mail obligatoire.')
return
}
if (!validateEmail(clientEmail)) {
setError('Adresse e-mail invalide.')
return
}
setIsLoading(true)
setValidMontant(selectedMontant)
}
return (
<Container>
<Box sx={{textAlign: 'center', marginBlock: 1}}>
<>
<Email validMontant={validMontant} error={error} setClientEmail={setClientEmail} clientEmail={clientEmail} />
<Montant
selectedMontant={selectedMontant}
setSelectedMontant={setSelectedMontant}
validMontant={validMontant}
setValidMontant={setValidMontant}
paymentIntent={paymentIntent}
setClientSecret={setClientSecret}
setPaymentIntent={setPaymentIntent}
setIsLoading={setIsLoading}
setClientEmail={setClientEmail}
/>
<Typography sx={{marginTop: 1}} variant='caption' component='div'><i>* Obligatoire</i></Typography>
<Stack justifyContent='center' sx={{marginTop: 2}} direction={{xs: 'column', sm: 'row'}} spacing={{xs: 1, sm: 2, md: 4}}>
<Button disabled={Boolean(validMontant) || Boolean(!selectedMontant)} variant='contained' onClick={handleClick}>
Valider les informations
</Button>
<Button color='secondary' variant='contained' onClick={handleCancel}>
Annuler
</Button>
</Stack>
</>
{isLoading && (
<Container sx={{marginBlock: 2}} maxWidth='sm'>
<LinearProgress size={24} style={{width: '100%'}} />
</Container>
)}
</Box>
</Container>
)
}
StripePayment.propTypes = {
isLoading: PropTypes.bool.isRequired,
selectedMontant: PropTypes.string,
setSelectedMontant: PropTypes.func.isRequired,
validMontant: PropTypes.string,
setValidMontant: PropTypes.func.isRequired,
paymentIntent: PropTypes.string,
setClientSecret: PropTypes.func.isRequired,
setPaymentIntent: PropTypes.func.isRequired,
setIsLoading: PropTypes.func.isRequired,
setClientEmail: PropTypes.func.isRequired,
clientEmail: PropTypes.string,
error: PropTypes.string,
setError: PropTypes.func.isRequired,
handleClose: PropTypes.func.isRequired
}
+1 -4
View File
@@ -19,8 +19,6 @@
"@mui/lab": "^5.0.0-alpha.89", "@mui/lab": "^5.0.0-alpha.89",
"@mui/material": "^5.14.1", "@mui/material": "^5.14.1",
"@mui/styles": "^5.8.7", "@mui/styles": "^5.8.7",
"@stripe/react-stripe-js": "^1.7.0",
"@stripe/stripe-js": "^1.22.0",
"@svgr/webpack": "^6.5.0", "@svgr/webpack": "^6.5.0",
"axios": "^0.21.0", "axios": "^0.21.0",
"compression": "^1.7.4", "compression": "^1.7.4",
@@ -39,8 +37,7 @@
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-swipeable-views": "^0.13.9", "react-swipeable-views": "^0.13.9",
"react-virtuoso": "^4.4.0", "react-virtuoso": "^4.4.0",
"sharp": "^0.29.3", "sharp": "^0.29.3"
"stripe": "^8.202.0"
}, },
"devDependencies": { "devDependencies": {
"eslint": "^8.7.0", "eslint": "^8.7.0",
-32
View File
@@ -2679,18 +2679,6 @@
estree-walker "^1.0.1" estree-walker "^1.0.1"
picomatch "^2.2.2" picomatch "^2.2.2"
"@stripe/react-stripe-js@^1.7.0":
version "1.7.0"
resolved "https://registry.yarnpkg.com/@stripe/react-stripe-js/-/react-stripe-js-1.7.0.tgz#83c993a09a903703205d556617f9729784a896c3"
integrity sha512-L20v8Jq0TDZFL2+y+uXD751t6q9SalSFkSYZpmZ2VWrGZGK7HAGfRQ804dzYSSr5fGenW6iz6y7U0YKfC/TK3g==
dependencies:
prop-types "^15.7.2"
"@stripe/stripe-js@^1.22.0":
version "1.22.0"
resolved "https://registry.yarnpkg.com/@stripe/stripe-js/-/stripe-js-1.22.0.tgz#9d3d2f0a1ce81f185ec477fd7cc67544b2b2a00c"
integrity sha512-fm8TR8r4LwbXgBIYdPmeMjJJkxxFC66tvoliNnmXOpUgZSgQKoNPW3ON0ZphZIiif1oqWNhAaSrr7tOvGu+AFg==
"@surma/rollup-plugin-off-main-thread@^2.2.3": "@surma/rollup-plugin-off-main-thread@^2.2.3":
version "2.2.3" version "2.2.3"
resolved "https://registry.yarnpkg.com/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz#ee34985952ca21558ab0d952f00298ad2190c053" resolved "https://registry.yarnpkg.com/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz#ee34985952ca21558ab0d952f00298ad2190c053"
@@ -2870,11 +2858,6 @@
resolved "https://registry.yarnpkg.com/@types/node/-/node-14.14.10.tgz#5958a82e41863cfc71f2307b3748e3491ba03785" resolved "https://registry.yarnpkg.com/@types/node/-/node-14.14.10.tgz#5958a82e41863cfc71f2307b3748e3491ba03785"
integrity sha512-J32dgx2hw8vXrSbu4ZlVhn1Nm3GbeCFNw2FWL8S5QKucHGY0cyNwjdQdO+KMBZ4wpmC7KhLCiNsdk1RFRIYUQQ== integrity sha512-J32dgx2hw8vXrSbu4ZlVhn1Nm3GbeCFNw2FWL8S5QKucHGY0cyNwjdQdO+KMBZ4wpmC7KhLCiNsdk1RFRIYUQQ==
"@types/node@>=8.1.0":
version "17.0.17"
resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.17.tgz#a8ddf6e0c2341718d74ee3dc413a13a042c45a0c"
integrity sha512-e8PUNQy1HgJGV3iU/Bp2+D/DXh3PYeyli8LgIwsQcs1Ar1LoaWHSIT6Rw+H2rNJmiq6SNWiDytfx8+gYj7wDHw==
"@types/normalize-package-data@^2.4.0": "@types/normalize-package-data@^2.4.0":
version "2.4.1" version "2.4.1"
resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz#d3357479a0fdfdd5907fe67e17e0a85c906e1301" resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz#d3357479a0fdfdd5907fe67e17e0a85c906e1301"
@@ -6643,13 +6626,6 @@ qs@6.7.0:
resolved "https://registry.yarnpkg.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc" resolved "https://registry.yarnpkg.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"
integrity sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ== integrity sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==
qs@^6.6.0:
version "6.10.3"
resolved "https://registry.yarnpkg.com/qs/-/qs-6.10.3.tgz#d6cde1b2ffca87b5aa57889816c5f81535e22e8e"
integrity sha512-wr7M2E0OFRfIfJZjKGieI8lBKb7fRCH4Fv5KNPEs7gJ8jadvotdsS08PzOKR7opXhZ/Xkjtt3WF9g38drmyRqQ==
dependencies:
side-channel "^1.0.4"
queue-microtask@^1.2.2: queue-microtask@^1.2.2:
version "1.2.3" version "1.2.3"
resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243" resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
@@ -7517,14 +7493,6 @@ strip-json-comments@~2.0.1:
resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a" resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo= integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo=
stripe@^8.202.0:
version "8.202.0"
resolved "https://registry.yarnpkg.com/stripe/-/stripe-8.202.0.tgz#884760713a690983d5a3128ea3cbeb677ee2645f"
integrity sha512-3YGHVnUatEn/At5+aRy+REdB2IyVa96/zls2xvQrKFTgaJzRu1MsJcK0GKg0p2B0y0VqlZo9gmdDEqphSHHvtA==
dependencies:
"@types/node" ">=8.1.0"
qs "^6.6.0"
styled-jsx@5.1.1: styled-jsx@5.1.1:
version "5.1.1" version "5.1.1"
resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.1.1.tgz#839a1c3aaacc4e735fed0781b8619ea5d0009d1f" resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.1.1.tgz#839a1c3aaacc4e735fed0781b8619ea5d0009d1f"