fix: review issues
This commit is contained in:
Aidar Shaikhutdin @makeweb.space
parent
c808e43b79
commit
35435c88bc
@ -13,7 +13,7 @@ function DateInput(props: DateInputProps): JSX.Element {
|
||||
const { label, placeholder, name, value = '', max, maxLength, onChange } = props
|
||||
const validate = (value: number): boolean => value >= 0 && value <= max
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const datePart = parseInt(e.target.value, 10)
|
||||
const datePart = e.target.value ? parseInt(e.target.value, 10) : 0
|
||||
if (isNaN(datePart)) return
|
||||
if (datePart > calculateMaxValue(maxLength)) return
|
||||
if (!validate(datePart)) return
|
||||
|
||||
@ -37,7 +37,7 @@ export function DatePicker(props: FormField<string>): JSX.Element {
|
||||
<div className='date-picker__container'>
|
||||
<DateInput
|
||||
name='year'
|
||||
value={year}
|
||||
value={year ? String(parseInt(year, 10)) : ''}
|
||||
max={getCurrentYear()}
|
||||
maxLength={4}
|
||||
label={t('year')}
|
||||
|
||||
@ -4,7 +4,7 @@ import { PaymentIntent } from '@chargebee/chargebee-js-types'
|
||||
import { useApi, useApiCall, extractErrorMessage, SubscriptionReceipts } from '../../../../api'
|
||||
import { usePayment, ApplePayButtonOptions } from '../../../../payment'
|
||||
import { useAuth } from '../../../../auth'
|
||||
import Loader from '../../../Loader'
|
||||
import Loader, { LoaderColor } from '../../../Loader'
|
||||
import ErrorText from '../../../ErrorText'
|
||||
|
||||
const currencyCode = 'USD'
|
||||
@ -52,8 +52,16 @@ export function ApplePayButton({ onSuccess, onError }: ApplePayButtonProps): JSX
|
||||
|
||||
return (
|
||||
<div id={buttonId} className='pay-btn'>
|
||||
{isPending || isMounting ? <Loader /> : null}
|
||||
{isPending || isMounting ? <FakeApplePayButton /> : null}
|
||||
{error ? <ErrorText message={extractErrorMessage(error)} isShown={true} size='large'/> : null}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function FakeApplePayButton() {
|
||||
return (
|
||||
<div className='apple-pay-button-placeholder'>
|
||||
<Loader color={LoaderColor.White} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@ import { PaymentIntent } from '@chargebee/chargebee-js-types'
|
||||
import { SubscriptionReceipts, extractErrorMessage, useApi, useApiCall } from '../../../../api'
|
||||
import { usePayment, GooglePayButtonOptions } from '../../../../payment'
|
||||
import { useAuth } from '../../../../auth'
|
||||
import Loader from '../../../Loader'
|
||||
import Loader, { LoaderColor } from '../../../Loader'
|
||||
import ErrorText from '../../../ErrorText'
|
||||
|
||||
const currencyCode = 'USD'
|
||||
@ -52,8 +52,16 @@ export function GooglePayButton({ onSuccess, onError }: GooglePayButtonProps): J
|
||||
|
||||
return (
|
||||
<div id={buttonId} className='pay-btn'>
|
||||
{isPending || isMounting ? <Loader /> : null}
|
||||
{isPending || isMounting ? <FakeGPayButton /> : null}
|
||||
{error ? <ErrorText message={extractErrorMessage(error)} isShown={true} size='large'/> : null}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function FakeGPayButton() {
|
||||
return (
|
||||
<div className='gpay-button-fake-loader'>
|
||||
<Loader color={LoaderColor.White} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -0,0 +1 @@
|
||||
<svg width="41" height="17" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M19.526 2.635v4.083h2.518c.6 0 1.096-.202 1.488-.605.403-.402.605-.882.605-1.437 0-.544-.202-1.018-.605-1.422-.392-.413-.888-.62-1.488-.62h-2.518zm0 5.52v4.736h-1.504V1.198h3.99c1.013 0 1.873.337 2.582 1.012.72.675 1.08 1.497 1.08 2.466 0 .991-.36 1.819-1.08 2.482-.697.665-1.559.996-2.583.996h-2.485v.001zm7.668 2.287c0 .392.166.718.499.98.332.26.722.391 1.168.391.633 0 1.196-.234 1.692-.701.497-.469.744-1.019.744-1.65-.469-.37-1.123-.555-1.962-.555-.61 0-1.12.148-1.528.442-.409.294-.613.657-.613 1.093m1.946-5.815c1.112 0 1.989.297 2.633.89.642.594.964 1.408.964 2.442v4.932h-1.439v-1.11h-.065c-.622.914-1.45 1.372-2.486 1.372-.882 0-1.621-.262-2.215-.784-.594-.523-.891-1.176-.891-1.96 0-.828.313-1.486.94-1.976s1.463-.735 2.51-.735c.892 0 1.629.163 2.206.49v-.344c0-.522-.207-.966-.621-1.33a2.132 2.132 0 0 0-1.455-.547c-.84 0-1.504.353-1.995 1.062l-1.324-.834c.73-1.045 1.81-1.568 3.238-1.568m11.853.262l-5.02 11.53H34.42l1.864-4.034-3.302-7.496h1.635l2.387 5.749h.032l2.322-5.75z" fill="#FFF"/><path d="M13.448 7.134c0-.473-.04-.93-.116-1.366H6.988v2.588h3.634a3.11 3.11 0 0 1-1.344 2.042v1.68h2.169c1.27-1.17 2.001-2.9 2.001-4.944" fill="#4285F4"/><path d="M6.988 13.7c1.816 0 3.344-.595 4.459-1.621l-2.169-1.681c-.603.406-1.38.643-2.29.643-1.754 0-3.244-1.182-3.776-2.774H.978v1.731a6.728 6.728 0 0 0 6.01 3.703" fill="#34A853"/><path d="M3.212 8.267a4.034 4.034 0 0 1 0-2.572V3.964H.978A6.678 6.678 0 0 0 .261 6.98c0 1.085.26 2.11.717 3.017l2.234-1.731z" fill="#FABB05"/><path d="M6.988 2.921c.992 0 1.88.34 2.58 1.008v.001l1.92-1.918C10.324.928 8.804.262 6.989.262a6.728 6.728 0 0 0-6.01 3.702l2.234 1.731c.532-1.592 2.022-2.774 3.776-2.774" fill="#E94235"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
@ -100,7 +100,8 @@
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.pay-btn {
|
||||
.pay-btn,
|
||||
.gpay-button-fake-loader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -112,7 +113,32 @@
|
||||
border-radius: 19px;
|
||||
}
|
||||
|
||||
.pay-btn .gpay-button {
|
||||
.pay-btn .gpay-button,
|
||||
.gpay-button-fake-loader {
|
||||
height: 60px;
|
||||
border-radius: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
.gpay-button-fake-loader {
|
||||
position: relative;
|
||||
background-image: url(./methods/GooglePay/dark_gpay.svg);
|
||||
background-origin: content-box;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
padding: 12px 15% 10px;
|
||||
display: flex;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.apple-pay-button-placeholder {
|
||||
-webkit-appearance: -apple-pay-button;
|
||||
}
|
||||
|
||||
.gpay-button-fake-loader,
|
||||
.apple-pay-button-placeholder {
|
||||
cursor: wait;
|
||||
display: flex;
|
||||
align-items: end;
|
||||
background-color: rgba(0,0,0,.5);
|
||||
}
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
.payment {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.payment__table {
|
||||
|
||||
@ -9,6 +9,7 @@ import PaymentTable, { Currency, Locale } from '../PaymentTable'
|
||||
import UserHeader from '../UserHeader'
|
||||
import CallToAction from '../CallToAction'
|
||||
import routes from '../../routes'
|
||||
import './styles.css'
|
||||
|
||||
const currency = Currency.USD
|
||||
const locale = Locale.EN
|
||||
@ -36,7 +37,9 @@ function SubscriptionPage(): JSX.Element {
|
||||
<CallToAction />
|
||||
<Countdown start={10}/>
|
||||
<PaymentTable items={paymentItems} currency={currency} locale={locale}/>
|
||||
<MainButton onClick={handleClick}>{t('get_access')}</MainButton>
|
||||
<div className='subscription-action'>
|
||||
<MainButton onClick={handleClick}>{t('get_access')}</MainButton>
|
||||
</div>
|
||||
<Policy>{t('subscription_text', { policyLink })}</Policy>
|
||||
</section>
|
||||
</>
|
||||
|
||||
10
src/components/SubscriptionPage/styles.css
Normal file
10
src/components/SubscriptionPage/styles.css
Normal file
@ -0,0 +1,10 @@
|
||||
.subscription-action {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background-color: #fff;
|
||||
padding: 15px;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user