Web: PortalSettings: Payments: Added expired title.

packages/client/public/locales/en/Payments.json

@@ -19,7 +19,8 @@
   "DowngradeNow": "Downgrade now",
   "ErrorNotification": "Failed to update tariff plan. Try again later or contact the sales department.",
   "EnterpriseEdition": "You are using ONLYOFFICE DocSpace Enterprise Edition.",
-  "EnterpriseSubscriptionExpires": "Your subscription expires on {{finalDate}}",
+  "EnterpriseSubscriptionExpiresDate": "Your subscription expires on {{finalDate}}",
+  "EnterpriseSubscriptionExpired": "Your subscription to support and updates has expired",
   "EnterpriseRenewal": "To continue getting support and updates, buy a renewal",
   "EnterpriseRenewSubscription": "Renew subscription for Enterprise",
   "EnterprisePersonalRenewal": "To get your personal renewal terms, contact your dedicated manager or write us at <1>{{email}}</1>",

packages/client/src/pages/PortalSettings/categories/payments/Standalone/EnterpriseContainer.js

@@ -13,13 +13,25 @@ import {
 } from "./StyledComponent";
 
 const EnterpriseContainer = (props) => {
-  const { buyUrl, salesEmail, t } = props;
+  const { buyUrl, salesEmail, t, isSubscriptionExpired, theme } = props;
   const onClickBuy = () => {
     window.open(buyUrl, "_blank");
   };
 
+  const subscriptionDescription = isSubscriptionExpired ? (
+    <Text className="payments_subscription-expired" isBold fontSize="14px">
+      {t("EnterpriseSubscriptionExpired")}
+    </Text>
+  ) : (
+    <Text as="span" fontWeight={400} fontSize="14px">
+      {t("EnterpriseSubscriptionExpiresDate", {
+        finalDate: "Tuesday, December 19, 2023.",
+      })}
+    </Text>
+  );
+
   return (
-    <StyledEnterpriseComponent>
+    <StyledEnterpriseComponent theme={theme}>
       <Text fontWeight={700} fontSize={"16px"}>
         {t("EnterpriseRenewSubscription")}
       </Text>
@@ -27,11 +39,7 @@ const EnterpriseContainer = (props) => {
         <Text isBold fontSize="14px" as="span">
           {t("EnterpriseEdition")}{" "}
         </Text>
-        <Text as="span" fontWeight={400} fontSize="14px">
-          {t("EnterpriseSubscriptionExpires", {
-            finalDate: "Tuesday, December 19, 2023.",
-          })}
-        </Text>
+        {subscriptionDescription}
       </div>
       <Text
         fontWeight={400}
@@ -70,8 +78,11 @@ const EnterpriseContainer = (props) => {
   );
 };
 
-export default inject(({ payments }) => {
+export default inject(({ auth, payments }) => {
   const { buyUrl, salesEmail } = payments;
+  const { settingsStore } = auth;
+  const { theme } = settingsStore;
+  const isSubscriptionExpired = true;
 
-  return { buyUrl, salesEmail };
+  return { theme, buyUrl, salesEmail, isSubscriptionExpired };
 })(withRouter(observer(EnterpriseContainer)));

packages/client/src/pages/PortalSettings/categories/payments/Standalone/StyledComponent.js

@@ -53,6 +53,16 @@ const StyledEnterpriseComponent = styled.div`
   .payments_support {
     max-width: 503px;
   }
+
+  .payments_subscription-expired {
+    max-width: fit-content;
+    border: 1px solid
+      ${(props) => props.theme.client.settings.payment.warningColor};
+    border-radius: 3px;
+    color: ${(props) => props.theme.client.settings.payment.warningColor};
+    padding: 5px 8px;
+    margin-top: 8px;
+  }
 `;
 export {
   StyledComponent,