79 lines
2.6 KiB
TypeScript
79 lines
2.6 KiB
TypeScript
import { useCallback, useState } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import { useDispatch, useSelector } from 'react-redux'
|
|
import { useNavigate } from 'react-router-dom'
|
|
import { selectors } from '@/store'
|
|
import { usePayment } from '@/payment'
|
|
import { actions } from '@/store'
|
|
import {
|
|
ApplePayBanner,
|
|
ApplePayButton,
|
|
GooglePayBanner,
|
|
GooglePayButton,
|
|
CardButton,
|
|
CardModal
|
|
} from './methods'
|
|
import ErrorModal from './ErrorModal'
|
|
import UserHeader from '../UserHeader'
|
|
import Title from '../Title'
|
|
import Loader from '../Loader'
|
|
import secure from './secure.png'
|
|
import routes from '@/routes'
|
|
import './styles.css'
|
|
|
|
function PaymentPage(): JSX.Element {
|
|
const { t } = useTranslation()
|
|
const { applePay } = usePayment()
|
|
const [openCardModal, setOpenCardModal] = useState(false)
|
|
const [openErrorModal, setOpenErrorModal] = useState(false)
|
|
const dispatch = useDispatch()
|
|
const navigate = useNavigate()
|
|
const isLoading = applePay === null
|
|
const isApplePayAvailable = import.meta.env.PROD && applePay?.canMakePayments()
|
|
const email = useSelector(selectors.selectEmail)
|
|
const onSuccess = useCallback(() => {
|
|
dispatch(actions.status.update('subscribed'))
|
|
navigate(routes.client.wallpaper())
|
|
}, [dispatch, navigate])
|
|
const onError = useCallback((error: Error) => {
|
|
console.error(error)
|
|
setOpenErrorModal(true)
|
|
}, [])
|
|
|
|
return (
|
|
<>
|
|
<UserHeader email={email} />
|
|
<section className='page'>
|
|
{ isLoading ? <Loader /> : (
|
|
<>
|
|
<div className='page-header'>
|
|
{ isApplePayAvailable ? <ApplePayBanner /> : <GooglePayBanner /> }
|
|
<img src={secure} alt='100% Secure' />
|
|
</div>
|
|
<Title variant='h1' className='mb-45'>{t('choose_payment')}</Title>
|
|
{ isApplePayAvailable
|
|
?
|
|
<ApplePayButton onSuccess={onSuccess} onError={onError} />
|
|
:
|
|
<GooglePayButton onSuccess={onSuccess} onError={onError} /> }
|
|
<div className='payment-divider'>{t('or').toUpperCase()}</div>
|
|
<CardButton onClick={() => setOpenCardModal(true)} />
|
|
<p className='payment-warining'>
|
|
{t('will_be_charged', { strongText: <strong>{t('trial_price')}</strong> })}
|
|
</p>
|
|
<CardModal
|
|
open={openCardModal}
|
|
onClose={() => setOpenCardModal(false)}
|
|
onSuccess={onSuccess}
|
|
onError={onError}
|
|
/>
|
|
<ErrorModal open={openErrorModal} onClose={() => setOpenErrorModal(false)} />
|
|
</>
|
|
)}
|
|
</section>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default PaymentPage
|