72 lines
2.9 KiB
TypeScript
72 lines
2.9 KiB
TypeScript
import { useCallback } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import { useNavigate } from 'react-router-dom'
|
|
import { useSelector } from 'react-redux'
|
|
import { selectors } from '../../store'
|
|
import { useAuth } from '../../auth'
|
|
import { useApi, useApiCall, SubscriptionCheckout } from '../../api'
|
|
import UserHeader from '../UserHeader'
|
|
import Title from '../Title'
|
|
import Loader from '../Loader'
|
|
import MainButton from '../MainButton'
|
|
import applePaySafeCheckout from './Apple-Pay.png'
|
|
import gPaySafeCheckout from './Google-Pay.png'
|
|
import secure from './Secure.png'
|
|
import ApplePay from './Apple-Pay.svg'
|
|
import GooglePay from './G-Pay.svg'
|
|
import card from './card.svg'
|
|
import routes from '../../routes'
|
|
import './styles.css'
|
|
|
|
const isAndroid = () => /Android/i.test(navigator.userAgent)
|
|
const isApple = () => /Macintosh|iPhone|iPad|iPod/i.test(navigator.userAgent)
|
|
|
|
function PaymentPage(): JSX.Element {
|
|
const api = useApi()
|
|
const { token } = useAuth()
|
|
const { i18n } = useTranslation()
|
|
const locale = i18n.language
|
|
const navigate = useNavigate()
|
|
const email = useSelector(selectors.selectEmail)
|
|
const handleClick = () => navigate(routes.client.wallpaper())
|
|
const loadData = useCallback(() => {
|
|
return api.getSubscriptionItems({ locale, token })
|
|
.then(({ item_prices }) => item_prices.find(({ id }) => id === 'aura-membership-2-week-USD'))
|
|
.then((item) => api.getSubscriptionCheckout({ locale, token, itemPriceId: item?.id || '' }))
|
|
}, [api, locale, token])
|
|
const { data, isPending } = useApiCall<SubscriptionCheckout.Response>(loadData)
|
|
console.log(data, isPending)
|
|
return (
|
|
<>
|
|
<UserHeader email={email} />
|
|
<section className='page'>
|
|
<div className='page-header'>
|
|
{isAndroid() && <img src={gPaySafeCheckout} alt='Guaranteed safe checkout' />}
|
|
{isApple() && <img src={applePaySafeCheckout} alt='Guaranteed safe checkout' />}
|
|
<img src={secure} alt='100% Secure' />
|
|
</div>
|
|
<Title variant='h1' className='mb-45'>Choose Payment Method</Title>
|
|
{isPending ? <Loader /> : (
|
|
<>
|
|
<MainButton onClick={handleClick}>
|
|
{isAndroid() && <img className='payment-btn' src={GooglePay} alt='Google Pay' />}
|
|
{isApple() && <img className='payment-btn' src={ApplePay} alt='Apple Pay' />}
|
|
</MainButton>
|
|
<div className='payment-divider'>OR</div>
|
|
<MainButton color='blue' onClick={handleClick}>
|
|
<img className='payment-card' src={card} alt='Credit / Debit Card' />
|
|
Credit / Debit Card
|
|
</MainButton>
|
|
<p className='payment-warining'>You will be charged only <strong>$1 for your 7-day trial</strong>. We'll email your a reminder before your trial period ends.</p>
|
|
</>
|
|
)}
|
|
</section>
|
|
<footer className='page-footer'>
|
|
<p>© 20223, Wit LLC, California, US</p>
|
|
</footer>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default PaymentPage
|