Payment Modal: Adjust styles (#5128)

2024-11-09 15:40:22 +04:00 · 2024-11-09 15:40:22 +04:00 · 5bd3219e8c
commit 5bd3219e8c
parent be35887cd8
12 changed files with 108 additions and 80 deletions
--- 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";
--- a/src/assets/visa.svg
+++ b/src/assets/visa.svg
@ -1 +1,4 @@
-<svg width="108.54" height="84.42" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path d="M108.541 9.044v66.33c0 4.995-4.051 9.046-9.045 9.046H9.046C4.052 84.42 0 80.37 0 75.375V9.045C0 4.05 4.052-.002 9.046-.002h90.45c4.994 0 9.045 4.052 9.045 9.045z" fill="#0353a5"/><path d="M93.39 27.135h-5.86c-1.809 0-3.185.528-3.957 2.431l-11.25 26.852h7.952s1.3-3.617 1.583-4.39h9.723c.226 1.036.904 4.39.904 4.39h7.01zm-9.346 18.9c.622-1.676 3.015-8.196 3.015-8.196-.038.056.622-1.715.998-2.808l.528 2.525s1.432 7.01 1.753 8.48h-6.294zm-51.406-18.9L25.232 47.11l-.81-4.052-2.639-13.454c-.433-1.866-1.771-2.393-3.43-2.469H6.164l-.133.585c2.977.753 5.634 1.846 7.952 3.222l6.746 25.439h8.009l11.909-29.245h-8.008zm11.062 0-4.731 29.283h7.557l4.748-29.283zm22.838 11.739c-2.657-1.338-4.277-2.242-4.277-3.618.037-1.243 1.375-2.525 4.353-2.525 2.468-.057 4.277.528 5.634 1.112l.678.32 1.037-6.331c-1.49-.585-3.863-1.244-6.784-1.244-7.481 0-12.739 3.995-12.776 9.686-.057 4.202 3.768 6.539 6.633 7.952 2.92 1.431 3.92 2.374 3.92 3.636-.038 1.96-2.375 2.865-4.542 2.865-3.015 0-4.636-.471-7.104-1.564l-1-.471-1.054 6.576c1.77.81 5.05 1.527 8.442 1.565 7.952.018 13.134-3.92 13.19-9.988.039-3.335-1.997-5.88-6.35-7.97z" fill="#fff"/></svg>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="24" height="24" rx="6" fill="#1A1F71"/>
+<path d="M9.29224 9.01036L6.78531 14.9837H5.14497L3.90698 10.2174C3.84508 9.93886 3.75223 9.81505 3.53558 9.69126C3.16419 9.50556 2.54519 9.28891 2.01904 9.19606L2.04999 9.01036H4.68072C5.02117 9.01036 5.33067 9.22701 5.39257 9.62936L6.04251 13.0957L7.6519 9.04131H9.29224V9.01036ZM15.6988 13.0338C15.6988 11.4554 13.5324 11.3625 13.5324 10.6816C13.5324 10.465 13.749 10.2484 14.1823 10.1865C14.399 10.1555 15.0179 10.1246 15.6988 10.465L15.9774 9.19606C15.606 9.07226 15.1417 8.91751 14.5228 8.91751C13.0062 8.91751 11.923 9.72221 11.923 10.8983C11.923 11.7649 12.6967 12.2291 13.2848 12.5077C13.8728 12.7862 14.0895 12.9719 14.0895 13.2505C14.0895 13.6528 13.6252 13.8385 13.161 13.8385C12.3872 13.8385 11.923 13.6219 11.5825 13.4671L11.304 14.767C11.6754 14.9218 12.3253 15.0765 13.0062 15.0765C14.6156 15.0765 15.6679 14.2718 15.6988 13.0338ZM19.7223 14.9837H21.146L19.908 9.01036H18.5772C18.2677 9.01036 18.0201 9.19606 17.9272 9.44366L15.606 14.9837H17.2154L17.5249 14.0861H19.5057L19.7223 14.9837ZM17.9891 12.8791L18.7938 10.6507L19.2581 12.8791H17.9891ZM11.4897 9.01036L10.2207 14.9837H8.67324L9.94219 9.01036H11.4897Z" fill="white"/>
+</svg>
--- 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;

--- 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;
+}
--- a/src/components/payment/Checkout.tsx
+++ b/src/components/payment/Checkout.tsx
@ -268,6 +268,8 @@ function renderCheckoutItem({

  return (
    <ListItem
+      className={styles.list}
+      narrow
      multiline={isMultiline}
      icon={icon}
      inactive={!onClick}
--- a/src/components/payment/PaymentInfo.scss
+++ b/src/components/payment/PaymentInfo.scss
@ -2,9 +2,8 @@
  padding: 0.5rem 1rem;

  h5 {
-    font-size: 0.875rem;
-    color: var(--color-text-secondary);
-    margin: 1rem 0 1.25rem;
+    font-size: 1rem;
+    margin: 0 0 1.25rem 0.5rem;
  }

  .inline-inputs {
@ -13,7 +12,7 @@

    .input-group {
      flex: 1 10rem;
-      max-width: 45%;
+      max-width: 48%;
      display: flex;
    }
  }
@ -24,4 +23,13 @@
    margin-top: -0.75rem;
    margin-bottom: 1.25rem;
  }
+
+  .checkbox {
+    margin: -1.125rem 0 0 -0.375rem;
+
+    .Checkbox {
+      padding-inline-start: 4.375rem;
+      margin-block: 1rem;
+    }
+  }
 }
--- a/src/components/payment/PaymentInfo.tsx
+++ b/src/components/payment/PaymentInfo.tsx
@ -88,7 +88,7 @@ const PaymentInfo: FC<OwnProps> = ({
          value={state.cardNumber}
          error={formErrors.cardNumber}
        />
-        { needCardholderName && (
+        {needCardholderName && (
          <InputText
            label={lang('Checkout.NewCard.CardholderNamePlaceholder')}
            onChange={handleCardholderChange}
@ -115,54 +115,56 @@ const PaymentInfo: FC<OwnProps> = ({
            teactExperimentControlled
          />
        </section>
-        { needCountry || needZip ? (
+        {needCountry || needZip ? (
          <h5>{lang('PaymentBillingAddress')}</h5>
-        ) : undefined }
-        { needCountry && (
-          <Select
-            label={lang('PaymentShippingCountry')}
-            onChange={handleCountryChange}
-            value={state.billingCountry}
-            hasArrow={Boolean(true)}
-            id="billing-country"
-            error={formErrors.billingCountry}
+        ) : undefined}
+        <section className="inline-inputs">
+          {needCountry && (
+            <Select
+              label={lang('PaymentShippingCountry')}
+              onChange={handleCountryChange}
+              value={state.billingCountry}
+              hasArrow={Boolean(true)}
+              id="billing-country"
+              error={formErrors.billingCountry}
+              tabIndex={0}
+              ref={selectCountryRef}
+            >
+              {
+                countryList.map(({ defaultName, name }) => (
+                  <option
+                    value={defaultName}
+                    className="county-item"
+                    selected={defaultName === state.billingCountry}
+                  >
+                    {defaultName || name}
+                  </option>
+                ))
+              }
+            </Select>
+          )}
+          {needZip && (
+            <InputText
+              label={lang('PaymentShippingZipPlaceholder')}
+              onChange={handleBillingPostCodeChange}
+              value={state.billingZip}
+              inputMode="text"
+              tabIndex={0}
+              maxLength={12}
+              error={formErrors.billingZip}
+            />
+          )}
+        </section>
+        <div className="checkbox">
+          <Checkbox
+            label={lang('PaymentCardSavePaymentInformation')}
+            checked={canSaveCredentials ? state.saveCredentials : false}
            tabIndex={0}
-            ref={selectCountryRef}
-          >
-            {
-              countryList.map(({ defaultName, name }) => (
-                <option
-                  value={defaultName}
-                  className="county-item"
-                  selected={defaultName === state.billingCountry}
-                >
-                  {defaultName || name}
-                </option>
-              ))
-            }
-          </Select>
-        ) }
-        { needZip && (
-          <InputText
-            label={lang('PaymentShippingZipPlaceholder')}
-            onChange={handleBillingPostCodeChange}
-            value={state.billingZip}
-            inputMode="text"
-            tabIndex={0}
-            maxLength={12}
-            error={formErrors.billingZip}
+            subLabel={lang(canSaveCredentials ? 'Checkout.NewCard.SaveInfoHelp' : 'Checkout.2FA.Text')}
+            onChange={handleChangeSaveCredentials}
+            disabled={!canSaveCredentials}
          />
-        )}
-        <Checkbox
-          label={lang('PaymentCardSavePaymentInformation')}
-          checked={canSaveCredentials ? state.saveCredentials : false}
-          tabIndex={0}
-          onChange={handleChangeSaveCredentials}
-          disabled={!canSaveCredentials}
-        />
-        <p className="description">
-          {lang(canSaveCredentials ? 'Checkout.NewCard.SaveInfoHelp' : 'Checkout.2FA.Text')}
-        </p>
+        </div>
      </form>
    </div>
  );
--- 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 {
--- 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<OwnProps & StateProps> = ({
    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<OwnProps & StateProps> = ({
            isText
            onClick={handleClearPaymentError}
          >
-            {lang('OK')}
+            {oldLang('OK')}
          </Button>
        </div>
      </Modal>
@ -485,27 +487,27 @@ const PaymentModal: FC<OwnProps & StateProps> = ({
  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<OwnProps & StateProps> = ({
            isText
            onClick={closeModal}
          >
-            {lang('OK')}
+            {oldLang('OK')}
          </Button>
        </div>
      </Modal>
@ -562,7 +564,7 @@ const PaymentModal: FC<OwnProps & StateProps> = ({
      onClose={closeModal}
      onCloseAnimationEnd={handleModalClose}
    >
-      <div className="header" dir={lang.isRtl ? 'rtl' : undefined}>
+      <div className="header" dir={oldLang.isRtl ? 'rtl' : undefined}>
        <Button
          className="close-button"
          color="translucent"
@ -597,6 +599,7 @@ const PaymentModal: FC<OwnProps & StateProps> = ({
      {canRenderFooter && (
        <div className="footer">
          <Button
+            className="button-text"
            type="submit"
            onClick={handleButtonClick}
            disabled={isSubmitDisabled}
--- a/src/components/ui/Checkbox.scss
+++ b/src/components/ui/Checkbox.scss
@ -4,7 +4,7 @@
  padding-inline-start: 3.5rem;
  text-align: left;
  margin-block: 0.75rem;
-  line-height: 1.5rem;
+  line-height: 1.375rem;
  cursor: var(--custom-cursor, pointer);

  &.disabled {
--- a/src/styles/_forms.scss
+++ b/src/styles/_forms.scss
@ -11,14 +11,14 @@

 .input-group {
  position: relative;
-  margin-bottom: 1.5rem;
+  margin-bottom: 1.125rem;

  label {
    display: block;
    padding: 0 0.25rem;
    position: absolute;
    left: 0.75rem;
-    top: 0.9375rem;
+    top: 0.6875rem;
    background-color: var(--color-background);
    font-size: 1rem;
    font-weight: 400;
@ -107,7 +107,7 @@
  --border-width: 1px;
  display: block;
  width: 100%;
-  height: 3.375rem;
+  height: 3rem;
  padding: calc(0.75rem - var(--border-width)) calc(0.9rem - var(--border-width));
  border: var(--border-width) solid var(--color-borders-input);
  border-radius: var(--border-radius-default);
--- a/src/types/language.d.ts
+++ b/src/types/language.d.ts
@ -1530,6 +1530,7 @@ export interface LangPairWithVariables<V extends unknown = LangVariable> {
  'StarsPerMonth': {
    'amount': V;
  };
+  'PaymentInfoDone': undefined;
 }

 export interface LangPairPlural {