From 35435c88bcc0b6e7e7caf2b1033f8939eed4e13e Mon Sep 17 00:00:00 2001 From: "Aidar Shaikhutdin @makeweb.space" Date: Sat, 1 Jul 2023 14:43:13 +0300 Subject: [PATCH] fix: review issues --- src/components/DateTimePicker/DateInput.tsx | 2 +- src/components/DateTimePicker/DatePicker.tsx | 2 +- .../PaymentPage/methods/ApplePay/Button.tsx | 12 +++++-- .../PaymentPage/methods/GooglePay/Button.tsx | 12 +++++-- .../methods/GooglePay/dark_gpay.svg | 1 + src/components/PaymentPage/styles.css | 32 +++++++++++++++++-- src/components/PaymentTable/styles.css | 1 - src/components/SubscriptionPage/index.tsx | 5 ++- src/components/SubscriptionPage/styles.css | 10 ++++++ 9 files changed, 66 insertions(+), 11 deletions(-) create mode 100644 src/components/PaymentPage/methods/GooglePay/dark_gpay.svg create mode 100644 src/components/SubscriptionPage/styles.css diff --git a/src/components/DateTimePicker/DateInput.tsx b/src/components/DateTimePicker/DateInput.tsx index 8783211..47d2a68 100644 --- a/src/components/DateTimePicker/DateInput.tsx +++ b/src/components/DateTimePicker/DateInput.tsx @@ -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) => { - 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 diff --git a/src/components/DateTimePicker/DatePicker.tsx b/src/components/DateTimePicker/DatePicker.tsx index 17b22f9..697dc70 100644 --- a/src/components/DateTimePicker/DatePicker.tsx +++ b/src/components/DateTimePicker/DatePicker.tsx @@ -37,7 +37,7 @@ export function DatePicker(props: FormField): JSX.Element {
- {isPending || isMounting ? : null} + {isPending || isMounting ? : null} {error ? : null}
) } + +function FakeApplePayButton() { + return ( +
+ +
+ ) +} diff --git a/src/components/PaymentPage/methods/GooglePay/Button.tsx b/src/components/PaymentPage/methods/GooglePay/Button.tsx index bcbf62f..67b4853 100644 --- a/src/components/PaymentPage/methods/GooglePay/Button.tsx +++ b/src/components/PaymentPage/methods/GooglePay/Button.tsx @@ -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 (
- {isPending || isMounting ? : null} + {isPending || isMounting ? : null} {error ? : null}
) } + +function FakeGPayButton() { + return ( +
+ +
+ ) +} diff --git a/src/components/PaymentPage/methods/GooglePay/dark_gpay.svg b/src/components/PaymentPage/methods/GooglePay/dark_gpay.svg new file mode 100644 index 0000000..8979835 --- /dev/null +++ b/src/components/PaymentPage/methods/GooglePay/dark_gpay.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/PaymentPage/styles.css b/src/components/PaymentPage/styles.css index c6c06bb..7429001 100644 --- a/src/components/PaymentPage/styles.css +++ b/src/components/PaymentPage/styles.css @@ -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; -} \ No newline at end of file +} + +.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); +} diff --git a/src/components/PaymentTable/styles.css b/src/components/PaymentTable/styles.css index 36b38d8..4dfc6b4 100644 --- a/src/components/PaymentTable/styles.css +++ b/src/components/PaymentTable/styles.css @@ -1,7 +1,6 @@ .payment { position: relative; width: 100%; - margin-bottom: 24px; } .payment__table { diff --git a/src/components/SubscriptionPage/index.tsx b/src/components/SubscriptionPage/index.tsx index e28d884..716bf7c 100644 --- a/src/components/SubscriptionPage/index.tsx +++ b/src/components/SubscriptionPage/index.tsx @@ -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 { - {t('get_access')} +
+ {t('get_access')} +
{t('subscription_text', { policyLink })} diff --git a/src/components/SubscriptionPage/styles.css b/src/components/SubscriptionPage/styles.css new file mode 100644 index 0000000..cb36945 --- /dev/null +++ b/src/components/SubscriptionPage/styles.css @@ -0,0 +1,10 @@ +.subscription-action { + position: fixed; + bottom: 0; + left: 0; + right: 0; + display: flex; + justify-content: center; + background-color: #fff; + padding: 15px; +} \ No newline at end of file