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 clsx from 'clsx'
|
||||
import {styled} from '@mui/system'
|
||||
import {useSwitch} from '@mui/base/SwitchUnstyled'
|
||||
import Tabs from '@mui/material/Tabs'
|
||||
import Tab from '@mui/material/Tab'
|
||||
import Box from '@mui/material/Box'
|
||||
import Button from '@mui/material/Button'
|
||||
|
||||
const green = {
|
||||
700: '#4CAF50',
|
||||
}
|
||||
import {Paypal} from '@icons-pack/react-simple-icons'
|
||||
import {Elements} from '@stripe/react-stripe-js'
|
||||
import {loadStripe} from '@stripe/stripe-js'
|
||||
|
||||
const grey = {
|
||||
400: '#BFC7CF',
|
||||
800: '#2F3A45',
|
||||
}
|
||||
import {appearance} from '../../lib/utils/stripe-style'
|
||||
|
||||
const SwitchRoot = styled('span')`
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 84px;
|
||||
height: 36px;
|
||||
padding: 8px;
|
||||
`
|
||||
import CheckoutForm from './checkout-form'
|
||||
import StripePayment from './stripe-payment'
|
||||
|
||||
const SwitchInput = styled('input')`
|
||||
position: absolute;
|
||||
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;
|
||||
`,
|
||||
const stripePromise = loadStripe(
|
||||
process.env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY
|
||||
)
|
||||
|
||||
function MUISwitch(props) {
|
||||
const {setIsPaypal} = props
|
||||
const {getInputProps, checked, disabled, focusVisible} = useSwitch(props)
|
||||
const PAYPAL_ID = process.env.NEXT_PUBLIC_PAYPAL_DONATE_ID
|
||||
|
||||
const stateClasses = useMemo(() => ({
|
||||
checked,
|
||||
disabled,
|
||||
focusVisible,
|
||||
}), [checked, disabled, focusVisible])
|
||||
|
||||
useEffect(() => {
|
||||
setIsPaypal(stateClasses.checked)
|
||||
}, [setIsPaypal, stateClasses])
|
||||
function TabPanel(props) {
|
||||
const {children, value, index, ...other} = props
|
||||
|
||||
return (
|
||||
<SwitchRoot className={clsx(stateClasses)}>
|
||||
<SwitchTrack>
|
||||
<SwitchThumb className={clsx(stateClasses)} />
|
||||
</SwitchTrack>
|
||||
<SwitchInput {...getInputProps()} aria-label='Demo switch' />
|
||||
</SwitchRoot>
|
||||
<div
|
||||
role='tabpanel'
|
||||
hidden={value !== index}
|
||||
id={`simple-tabpanel-${index}`}
|
||||
aria-labelledby={`simple-tab-${index}`}
|
||||
{...other}
|
||||
>
|
||||
{value === index && (
|
||||
<Box sx={{p: 3}}>
|
||||
{children}
|
||||
</Box>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
MUISwitch.propTypes = {
|
||||
setIsPaypal: PropTypes.func.isRequired
|
||||
TabPanel.propTypes = {
|
||||
children: PropTypes.node,
|
||||
index: PropTypes.number.isRequired,
|
||||
value: PropTypes.number.isRequired,
|
||||
}
|
||||
|
||||
export default function PaymentMethod({setIsPaypal}) {
|
||||
return <MUISwitch defaultChecked setIsPaypal={setIsPaypal} />
|
||||
function a11yProps(index) {
|
||||
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 = {
|
||||
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