From fa81d93116b2b1437b5004bc17d93adc24656c74 Mon Sep 17 00:00:00 2001
From: Tatiana Lopaeva <tatiana.lopaeva@onlyoffice.com>
Date: Mon, 7 Nov 2022 10:47:18 +0300
Subject: [PATCH] Web: An empty space has been removed in the absence of a
 container with benefits.

---
 .../PortalSettings/categories/payments/index.js | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/client/src/pages/PortalSettings/categories/payments/index.js b/packages/client/src/pages/PortalSettings/categories/payments/index.js
index b6e8b7977c..610f52edb5 100644
--- a/packages/client/src/pages/PortalSettings/categories/payments/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/payments/index.js
@@ -36,7 +36,9 @@ const StyledBody = styled.div`
 
     @media (max-width: ${size.smallTablet + 40}px) {
       grid-template-columns: 1fr;
-      grid-template-rows: 1fr 1fr;
+
+      grid-template-rows: ${(props) =>
+        props.isHideBenefitsInfo ? "1fr" : "1fr 1fr"};
 
       .price-calculation-container,
       .benefits-container {
@@ -51,7 +53,8 @@ const StyledBody = styled.div`
       props.isChangeView &&
       css`
         grid-template-columns: 1fr;
-        grid-template-rows: 1fr 1fr;
+        grid-template-rows: ${(props) =>
+          props.isHideBenefitsInfo ? "1fr" : "1fr 1fr"};
 
         .price-calculation-container,
         .benefits-container {
@@ -304,6 +307,9 @@ const PaymentsPage = ({
 
   const isFreeAfterPaidPeriod = isFreeTariff && payerEmail.length !== 0;
 
+  const isHideBenefitsInfo =
+    isGracePeriod || isNotPaidPeriod || isFreeAfterPaidPeriod;
+
   return isInitialLoading || !ready ? (
     <Loaders.PaymentsLoader />
   ) : (
@@ -314,6 +320,7 @@ const PaymentsPage = ({
           isChangeView={
             context.sectionWidth < size.smallTablet && expandArticle
           }
+          isHideBenefitsInfo={isHideBenefitsInfo}
         >
           {isNotPaidPeriod && isValidDelayDueDate
             ? expiredTitleSubscriptionWarning()
@@ -382,11 +389,7 @@ const PaymentsPage = ({
               isFreeAfterPaidPeriod={isFreeAfterPaidPeriod}
             />
 
-            {isGracePeriod || isNotPaidPeriod || isFreeAfterPaidPeriod ? (
-              <></>
-            ) : (
-              <BenefitsContainer t={t} />
-            )}
+            {isHideBenefitsInfo ? <></> : <BenefitsContainer t={t} />}
           </div>
           <ContactContainer t={t} />
         </StyledBody>