Change PaymentMethod component
This commit is contained in:
Cédric FAMIBELLE-PRONZOLA
@@ -1,117 +1,146 @@
|
|||||||
import {useEffect, useMemo} from 'react'
|
|
||||||
import PropTypes from 'prop-types'
|
import PropTypes from 'prop-types'
|
||||||
import clsx from 'clsx'
|
import Tabs from '@mui/material/Tabs'
|
||||||
import {styled} from '@mui/system'
|
import Tab from '@mui/material/Tab'
|
||||||
import {useSwitch} from '@mui/base/SwitchUnstyled'
|
import Box from '@mui/material/Box'
|
||||||
|
import Button from '@mui/material/Button'
|
||||||
|
|
||||||
const green = {
|
import {Paypal} from '@icons-pack/react-simple-icons'
|
||||||
700: '#4CAF50',
|
import {Elements} from '@stripe/react-stripe-js'
|
||||||
}
|
import {loadStripe} from '@stripe/stripe-js'
|
||||||
|
|
||||||
const grey = {
|
import {appearance} from '../../lib/utils/stripe-style'
|
||||||
400: '#BFC7CF',
|
|
||||||
800: '#2F3A45',
|
|
||||||
}
|
|
||||||
|
|
||||||
const SwitchRoot = styled('span')`
|
import CheckoutForm from './checkout-form'
|
||||||
display: inline-block;
|
import StripePayment from './stripe-payment'
|
||||||
position: relative;
|
|
||||||
width: 84px;
|
|
||||||
height: 36px;
|
|
||||||
padding: 8px;
|
|
||||||
`
|
|
||||||
|
|
||||||
const SwitchInput = styled('input')`
|
const stripePromise = loadStripe(
|
||||||
position: absolute;
|
process.env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
opacity: 0;
|
|
||||||
z-index: 1;
|
|
||||||
margin: 0;
|
|
||||||
cursor: pointer;
|
|
||||||
`
|
|
||||||
|
|
||||||
const SwitchThumb = styled('span')`
|
|
||||||
position: absolute;
|
|
||||||
display: block;
|
|
||||||
background-color: ${green[700]};
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
border-radius: 8px;
|
|
||||||
top: -1px;
|
|
||||||
left: 4px;
|
|
||||||
transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
display: block;
|
|
||||||
content: '';
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="30" width="30" viewBox="0 0 24 24"><path fill="${encodeURIComponent(
|
|
||||||
'#fff',
|
|
||||||
)}" d="M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z"/></svg>')
|
|
||||||
center center no-repeat;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.focusVisible {
|
|
||||||
background-color: #79b;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.checked {
|
|
||||||
transform: translateX(44px);
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="25" width="25" viewBox="0 0 24 24"><path fill="${encodeURIComponent(
|
|
||||||
'#fff',
|
|
||||||
)}" d="M7.076 21.337H2.47a.641.641 0 0 1-.633-.74L4.944.901C5.026.382 5.474 0 5.998 0h7.46c2.57 0 4.578.543 5.69 1.81 1.01 1.15 1.304 2.42 1.012 4.287-.023.143-.047.288-.077.437-.983 5.05-4.349 6.797-8.647 6.797h-2.19c-.524 0-.968.382-1.05.9l-1.12 7.106zm14.146-14.42a3.35 3.35 0 0 0-.607-.541c-.013.076-.026.175-.041.254-.93 4.778-4.005 7.201-9.138 7.201h-2.19a.563.563 0 0 0-.556.479l-1.187 7.527h-.506l-.24 1.516a.56.56 0 0 0 .554.647h3.882c.46 0 .85-.334.922-.788.06-.26.76-4.852.816-5.09a.932.932 0 0 1 .923-.788h.58c3.76 0 6.705-1.528 7.565-5.946.36-1.847.174-3.388-.777-4.471z"/></svg>');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`
|
|
||||||
|
|
||||||
const SwitchTrack = styled('span')(
|
|
||||||
({theme}) => `
|
|
||||||
background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[400]};
|
|
||||||
border-radius: 4px;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: block;
|
|
||||||
`,
|
|
||||||
)
|
)
|
||||||
|
|
||||||
function MUISwitch(props) {
|
const PAYPAL_ID = process.env.NEXT_PUBLIC_PAYPAL_DONATE_ID
|
||||||
const {setIsPaypal} = props
|
|
||||||
const {getInputProps, checked, disabled, focusVisible} = useSwitch(props)
|
|
||||||
|
|
||||||
const stateClasses = useMemo(() => ({
|
function TabPanel(props) {
|
||||||
checked,
|
const {children, value, index, ...other} = props
|
||||||
disabled,
|
|
||||||
focusVisible,
|
|
||||||
}), [checked, disabled, focusVisible])
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setIsPaypal(stateClasses.checked)
|
|
||||||
}, [setIsPaypal, stateClasses])
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<SwitchRoot className={clsx(stateClasses)}>
|
<div
|
||||||
<SwitchTrack>
|
role='tabpanel'
|
||||||
<SwitchThumb className={clsx(stateClasses)} />
|
hidden={value !== index}
|
||||||
</SwitchTrack>
|
id={`simple-tabpanel-${index}`}
|
||||||
<SwitchInput {...getInputProps()} aria-label='Demo switch' />
|
aria-labelledby={`simple-tab-${index}`}
|
||||||
</SwitchRoot>
|
{...other}
|
||||||
|
>
|
||||||
|
{value === index && (
|
||||||
|
<Box sx={{p: 3}}>
|
||||||
|
{children}
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
MUISwitch.propTypes = {
|
TabPanel.propTypes = {
|
||||||
setIsPaypal: PropTypes.func.isRequired
|
children: PropTypes.node,
|
||||||
|
index: PropTypes.number.isRequired,
|
||||||
|
value: PropTypes.number.isRequired,
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function PaymentMethod({setIsPaypal}) {
|
function a11yProps(index) {
|
||||||
return <MUISwitch defaultChecked setIsPaypal={setIsPaypal} />
|
return {
|
||||||
|
id: `simple-tab-${index}`,
|
||||||
|
'aria-controls': `simple-tabpanel-${index}`,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function PaymentMethod({isLoading, paymentMethod, setPaymentMethod, selectedMontant, setSelectedMontant, validMontant, setValidMontant, prices, paymentIntent, setClientSecret, setPaymentIntent, setIsLoading, setPaymentIsReady, setClientEmail, clientEmail, error, setError, clientSecret}) {
|
||||||
|
const options = {
|
||||||
|
clientSecret,
|
||||||
|
appearance,
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleChange = (event, newValue) => {
|
||||||
|
setPaymentMethod(newValue)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<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='Adhésion' {...a11yProps(0)} />
|
||||||
|
<Tab label='Don PayPal' {...a11yProps(1)} />
|
||||||
|
<Tab label='Don Carte bancaire' {...a11yProps(2)} />
|
||||||
|
</Tabs>
|
||||||
|
</Box>
|
||||||
|
<TabPanel value={paymentMethod} index={0}>
|
||||||
|
<Button size='large' variant='outlined' onClick={() => window.open('https://www.helloasso.com/associations/organisation-ka-internationale/adhesions/adhesion-oki', '_blank')}>
|
||||||
|
Cliquez ici pour adhérer à #OKi via HelloAsso
|
||||||
|
</Button>
|
||||||
|
</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>
|
||||||
|
</TabPanel>
|
||||||
|
<TabPanel value={paymentMethod} index={2}>
|
||||||
|
<StripePayment
|
||||||
|
selectedMontant={selectedMontant}
|
||||||
|
setSelectedMontant={setSelectedMontant}
|
||||||
|
validMontant={validMontant}
|
||||||
|
setValidMontant={setValidMontant}
|
||||||
|
prices={prices}
|
||||||
|
paymentIntent={paymentIntent}
|
||||||
|
setClientSecret={setClientSecret}
|
||||||
|
setPaymentIntent={setPaymentIntent}
|
||||||
|
setIsLoading={setIsLoading}
|
||||||
|
setPaymentIsReady={setPaymentIsReady}
|
||||||
|
setClientEmail={setClientEmail}
|
||||||
|
clientEmail={clientEmail}
|
||||||
|
error={error}
|
||||||
|
setError={setError}
|
||||||
|
isLoading={isLoading}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{clientSecret && validMontant && paymentMethod === 2 && (
|
||||||
|
<Elements options={options} stripe={stripePromise}>
|
||||||
|
<CheckoutForm
|
||||||
|
setPaymentIsReady={setPaymentIsReady}
|
||||||
|
setError={setError}
|
||||||
|
isLoading={isLoading}
|
||||||
|
setIsLoading={setIsLoading}
|
||||||
|
/>
|
||||||
|
</Elements>
|
||||||
|
)}
|
||||||
|
</TabPanel>
|
||||||
|
</Box>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
PaymentMethod.defaultProps = {
|
||||||
|
selectedMontant: null,
|
||||||
|
validMontant: null,
|
||||||
|
paymentIntent: null,
|
||||||
|
clientEmail: null,
|
||||||
|
error: null,
|
||||||
|
clientSecret: null
|
||||||
}
|
}
|
||||||
|
|
||||||
PaymentMethod.propTypes = {
|
PaymentMethod.propTypes = {
|
||||||
setIsPaypal: PropTypes.func.isRequired
|
isLoading: PropTypes.bool.isRequired,
|
||||||
|
paymentMethod: PropTypes.number.isRequired,
|
||||||
|
setPaymentMethod: PropTypes.func.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,
|
||||||
|
setPaymentIsReady: PropTypes.func.isRequired,
|
||||||
|
setClientEmail: PropTypes.func.isRequired,
|
||||||
|
clientEmail: PropTypes.string,
|
||||||
|
error: PropTypes.string,
|
||||||
|
setError: PropTypes.func.isRequired,
|
||||||
|
clientSecret: PropTypes.string
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user