Web: Fixed alerts.

packages/common/components/AlertComponent/StyledComponent.js

@@ -1,6 +1,7 @@
 import styled, { css } from "styled-components";
 
 const StyledAlertComponent = styled.div`
+  width: 100%;
   position: relative;
   border: ${(props) => `1px solid ${props.borderColor}`};
   border-radius: 6px;

packages/common/components/Article/styled-article.js

@@ -396,9 +396,9 @@ const StyledProfileWrapper = styled.div`
 const StyledArticleAlertsComponent = styled.div`
   margin: 32px 0;
 
-  div:last-child {
-    margin-top: 20px;
-  }
+  display: flex;
+  flex-wrap: wrap;
+  row-gap: 20px;
 `;
 export {
   StyledArticle,

packages/common/components/Article/sub-components/article-alerts.js

@@ -17,21 +17,33 @@ const ArticleAlerts = ({
   isLicenseDateExpires,
   isEnterprise,
   isTrial,
+  standalone,
 }) => {
-  return (
-    <StyledArticleAlertsComponent>
-      {isPaymentPageAvailable &&
+  const paymentsAlertsComponent = () => {
+    if (!standalone) {
+      return (
+        isPaymentPageAvailable &&
         !isNonProfit &&
         (isFreeTariff || isGracePeriod) &&
-        showText && <ArticlePaymentAlert isFreeTariff={isFreeTariff} />}
+        showText && <ArticlePaymentAlert isFreeTariff={isFreeTariff} />
+      );
+    }
 
-      {isEnterprise &&
-        !isTrial &&
-        (isLicenseExpiring || isLicenseDateExpires) &&
-        showText && <ArticleEnterpriseAlert />}
+    const isVisibleStandaloneAlert = isTrial
+      ? true
+      : isLicenseExpiring || isLicenseDateExpires;
 
-      {isEnterprise && isTrial && showText && <ArticleEnterpriseAlert />}
+    return (
+      isPaymentPageAvailable &&
+      isEnterprise &&
+      isVisibleStandaloneAlert &&
+      showText && <ArticleEnterpriseAlert />
+    );
+  };
 
+  return (
+    <StyledArticleAlertsComponent>
+      {paymentsAlertsComponent()}
       {isTeamTrainingAlertAvailable && showText && <ArticleTeamTrainingAlert />}
     </StyledArticleAlertsComponent>
   );
@@ -53,7 +65,7 @@ export default withRouter(
       isLicenseExpiring,
       isLicenseDateExpires,
     } = currentTariffStatusStore;
-    const { showText } = settingsStore;
+    const { showText, standalone } = settingsStore;
 
     return {
       isEnterprise,
@@ -66,6 +78,7 @@ export default withRouter(
       isLicenseExpiring,
       isLicenseDateExpires,
       isTrial,
+      standalone,
     };
   })(observer(ArticleAlerts))
 );