From 5bd3219e8caa34fe2d4dcba447f26248ce77f650 Mon Sep 17 00:00:00 2001 From: Alexander Zinchuk Date: Sat, 9 Nov 2024 15:40:22 +0400 Subject: [PATCH] Payment Modal: Adjust styles (#5128) --- src/assets/localization/fallback.strings | 1 + src/assets/visa.svg | 5 +- src/components/payment/CardInput.scss | 2 +- src/components/payment/Checkout.module.scss | 10 ++- src/components/payment/Checkout.tsx | 2 + src/components/payment/PaymentInfo.scss | 16 +++- src/components/payment/PaymentInfo.tsx | 94 +++++++++++---------- src/components/payment/PaymentModal.scss | 18 ++-- src/components/payment/PaymentModal.tsx | 31 ++++--- src/components/ui/Checkbox.scss | 2 +- src/styles/_forms.scss | 6 +- src/types/language.d.ts | 1 + 12 files changed, 108 insertions(+), 80 deletions(-) diff --git a/src/assets/localization/fallback.strings b/src/assets/localization/fallback.strings index be15a68d3..153ec45be 100644 --- a/src/assets/localization/fallback.strings +++ b/src/assets/localization/fallback.strings @@ -1370,3 +1370,4 @@ "StarsSubscribeInfoLinkText" = "Terms of Service"; "StarsSubscribeInfoLink" = "https://telegram.org/tos/stars"; "StarsPerMonth" = "⭐️{amount}/month"; +"PaymentInfoDone" = "Proceed to checkout"; diff --git a/src/assets/visa.svg b/src/assets/visa.svg index ec5e4adca..74b153816 100644 --- a/src/assets/visa.svg +++ b/src/assets/visa.svg @@ -1 +1,4 @@ - \ No newline at end of file + + + + diff --git a/src/components/payment/CardInput.scss b/src/components/payment/CardInput.scss index 4748bd796..c6237ab6a 100644 --- a/src/components/payment/CardInput.scss +++ b/src/components/payment/CardInput.scss @@ -7,7 +7,7 @@ .right-addon { position: absolute; - top: 0.8125rem; + top: 0.625rem; right: 1rem; z-index: 8; diff --git a/src/components/payment/Checkout.module.scss b/src/components/payment/Checkout.module.scss index 379223bc9..6a8db1879 100644 --- a/src/components/payment/Checkout.module.scss +++ b/src/components/payment/Checkout.module.scss @@ -108,8 +108,8 @@ border-radius: 1rem; width: 1.5rem; height: 1.5rem; - margin-inline-start: 0.0625rem; - margin-inline-end: 1.75rem; + margin-inline-start: 0.375rem; + margin-inline-end: 1.125rem; } .provider.stripe { @@ -139,7 +139,7 @@ } .tos-checkbox { - margin-left: 0.625rem; + margin-left: 0.8125rem; padding-left: 3.1875rem; :global(.Checkbox-main) { @@ -149,3 +149,7 @@ } } } + +.list { + margin-bottom: 0 !important; +} diff --git a/src/components/payment/Checkout.tsx b/src/components/payment/Checkout.tsx index 1a6a3db02..03d8dde0b 100644 --- a/src/components/payment/Checkout.tsx +++ b/src/components/payment/Checkout.tsx @@ -268,6 +268,8 @@ function renderCheckoutItem({ return ( = ({ value={state.cardNumber} error={formErrors.cardNumber} /> - { needCardholderName && ( + {needCardholderName && ( = ({ teactExperimentControlled /> - { needCountry || needZip ? ( + {needCountry || needZip ? (
{lang('PaymentBillingAddress')}
- ) : undefined } - { needCountry && ( - + { + countryList.map(({ defaultName, name }) => ( + + )) + } + + )} + {needZip && ( + + )} + +
+ - { - countryList.map(({ defaultName, name }) => ( - - )) - } - - ) } - { needZip && ( - - )} - -

- {lang(canSaveCredentials ? 'Checkout.NewCard.SaveInfoHelp' : 'Checkout.2FA.Text')} -

+
); diff --git a/src/components/payment/PaymentModal.scss b/src/components/payment/PaymentModal.scss index ac86cfb5d..c95693455 100644 --- a/src/components/payment/PaymentModal.scss +++ b/src/components/payment/PaymentModal.scss @@ -18,8 +18,8 @@ $modalHeaderAndFooterHeight: 8.375rem; .header { position: relative; - border-top-left-radius: var(--border-radius-default-small); - border-top-right-radius: var(--border-radius-default-small); + border-top-left-radius: var(--border-radius-modal); + border-top-right-radius: var(--border-radius-modal); width: 100%; padding: 0.5rem 1rem 0.25rem; display: flex; @@ -36,7 +36,7 @@ $modalHeaderAndFooterHeight: 8.375rem; } .Transition { - height: min(27rem, 68vh); + height: min(25rem, 68vh); } .empty-content { @@ -56,27 +56,31 @@ $modalHeaderAndFooterHeight: 8.375rem; overflow: auto; overflow-x: hidden; width: 100%; + height: 100%; position: relative; } .footer { position: relative; bottom: 0; - border-bottom-left-radius: var(--border-radius-default-small); - border-bottom-right-radius: var(--border-radius-default-small); + border-bottom-left-radius: var(--border-radius-modal); + border-bottom-right-radius: var(--border-radius-modal); width: 100%; padding: 0.75rem 1rem; background: var(--color-background); - border-top: 0.0625rem var(--color-borders) solid; button { text-transform: none; font-weight: 500; } + + .button-text { + text-transform: uppercase; + } } .modal-dialog { - width: 25rem; + width: 26.25rem; } .modal-content { diff --git a/src/components/payment/PaymentModal.tsx b/src/components/payment/PaymentModal.tsx index f8402b63c..5322b4204 100644 --- a/src/components/payment/PaymentModal.tsx +++ b/src/components/payment/PaymentModal.tsx @@ -22,6 +22,7 @@ import { detectCardTypeText } from '../common/helpers/detectCardType'; import usePaymentReducer from '../../hooks/reducers/usePaymentReducer'; import useFlag from '../../hooks/useFlag'; +import useLang from '../../hooks/useLang'; import useLastCallback from '../../hooks/useLastCallback'; import useOldLang from '../../hooks/useOldLang'; import usePreviousDeprecated from '../../hooks/usePreviousDeprecated'; @@ -114,7 +115,8 @@ const PaymentModal: FC = ({ setSmartGlocalCardInfo, } = getActions(); - const lang = useOldLang(); + const oldLang = useOldLang(); + const lang = useLang(); const [isModalOpen, openModal, closeModal] = useFlag(); const [paymentState, paymentDispatch] = usePaymentReducer(); @@ -254,7 +256,7 @@ const PaymentModal: FC = ({ isText onClick={handleClearPaymentError} > - {lang('OK')} + {oldLang('OK')} @@ -485,27 +487,27 @@ const PaymentModal: FC = ({ const modalHeader = useMemo(() => { switch (step) { case PaymentStep.Checkout: - return lang('PaymentCheckout'); + return oldLang('PaymentCheckout'); case PaymentStep.ShippingInfo: - return lang('PaymentShippingInfo'); + return oldLang('PaymentShippingInfo'); case PaymentStep.Shipping: - return lang('PaymentShippingMethod'); + return oldLang('PaymentShippingMethod'); case PaymentStep.SavedPayments: - return lang('PaymentCheckoutMethod'); + return oldLang('PaymentCheckoutMethod'); case PaymentStep.ConfirmPassword: - return lang('Checkout.PasswordEntry.Title'); + return oldLang('Checkout.PasswordEntry.Title'); case PaymentStep.PaymentInfo: - return lang('PaymentCardInfo'); + return oldLang('PaymentCardInfo'); case PaymentStep.ConfirmPayment: - return lang('Checkout.WebConfirmation.Title'); + return oldLang('Checkout.WebConfirmation.Title'); default: return ''; } - }, [step, lang]); + }, [step, oldLang]); const buttonText = step === PaymentStep.Checkout - ? lang('Checkout.PayPrice', formatCurrencyAsString(totalPrice, invoice!.currency, lang.code)) - : lang('Next'); + ? oldLang('Checkout.PayPrice', formatCurrencyAsString(totalPrice, invoice!.currency, oldLang.code)) + : lang('PaymentInfoDone'); function getIsSubmitDisabled() { if (isLoading) { @@ -546,7 +548,7 @@ const PaymentModal: FC = ({ isText onClick={closeModal} > - {lang('OK')} + {oldLang('OK')} @@ -562,7 +564,7 @@ const PaymentModal: FC = ({ onClose={closeModal} onCloseAnimationEnd={handleModalClose} > -
+