added alert component

packages/common/components/AlertComponent/StyledComponent.js

@@ -11,6 +11,14 @@ const StyledAlertComponent = styled.div`
   grid-template-columns: ${(props) =>
     props.needArrowIcon ? "1fr 16px" : "1fr"};
 
+  .main-content {
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    justify-content: center;
+    gap: 4px;
+  }
+
   .alert-component_title {
     color: ${(props) => props.titleColor};
   }

packages/common/components/AlertComponent/index.js

@@ -42,6 +42,7 @@ const AlertComponent = (props) => {
     needArrowIcon = false,
     needCloseIcon = false,
     link,
+    onLinkClick,
     linkColor,
     linkTitle,
     onAlertClick,
@@ -59,7 +60,7 @@ const AlertComponent = (props) => {
       needArrowIcon={needArrowIcon}
       id={id}
     >
-      <div>
+      <div className="main-content">
         <Text
           className="alert-component_title"
           fontSize={titleFontSize ?? "12px"}
@@ -77,8 +78,14 @@ const AlertComponent = (props) => {
         >
           {description}
         </Text>
-        {link && (
-          <Link type="page" href={link} noHover color={linkColor}>
+        {(link || onLinkClick) && (
+          <Link
+            type="page"
+            href={link}
+            onClick={onLinkClick}
+            noHover
+            color={linkColor}
+          >
             {linkTitle}
           </Link>
         )}

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

@@ -2,6 +2,7 @@ import React from "react";
 import { inject, observer } from "mobx-react";
 
 import ArticleTeamTrainingAlert from "./article-team-training";
+import ArticleSubmitToFormGalleryAlert from "./article-submit-to-form-gallery";
 import ArticlePaymentAlert from "./article-payment-alert";
 import { StyledArticleAlertsComponent } from "../styled-article";
 
@@ -13,6 +14,7 @@ const ArticleAlerts = ({
   isPaymentPageAvailable,
   isTeamTrainingAlertAvailable,
 }) => {
+  //TODO-submit-to-form-gallery clear up about alert switchind functionality, implement and return training alert
   return (
     <StyledArticleAlertsComponent>
       {isPaymentPageAvailable &&
@@ -20,7 +22,9 @@ const ArticleAlerts = ({
         (isFreeTariff || isGracePeriod) &&
         showText && <ArticlePaymentAlert isFreeTariff={isFreeTariff} />}
 
-      {isTeamTrainingAlertAvailable && showText && <ArticleTeamTrainingAlert />}
+      {isTeamTrainingAlertAvailable && showText && (
+        <ArticleSubmitToFormGalleryAlert />
+      )}
     </StyledArticleAlertsComponent>
   );
 };

packages/common/components/Article/sub-components/article-submit-to-form-gallery.js

@@ -0,0 +1,54 @@
+import React, { useState } from "react";
+import { inject, observer } from "mobx-react";
+
+import { useTranslation } from "react-i18next";
+
+import AlertComponent from "../../AlertComponent";
+import Loaders from "../../Loaders";
+
+const ArticleSubmitToFormGalleryAlert = ({
+  theme,
+  setSubmitToGalleryDialogVisible,
+}) => {
+  const { t, ready } = useTranslation("Common", "FormGallery");
+  const [isClose, setIsClose] = useState(
+    localStorage.getItem("submitToFormGalleryAlertClose")
+  );
+
+  const onSubmitToFormGallery = () => {
+    setSubmitToGalleryDialogVisible(true);
+  };
+
+  const onClose = () => {
+    localStorage.setItem("submitToFormGalleryAlertClose", true);
+    setIsClose(true);
+  };
+
+  if (isClose) return null;
+
+  return !ready ? (
+    <Loaders.Rectangle width="210px" height="112px" />
+  ) : (
+    <AlertComponent
+      titleColor={theme.catalog.teamTrainingAlert.titleColor}
+      linkColor={theme.catalog.teamTrainingAlert.linkColor}
+      borderColor={theme.catalog.teamTrainingAlert.borderColor}
+      title={t("FormGallery:SubmitToGalleryBlockHeader")}
+      description={t("FormGallery:SubmitToGalleryBlockBody")}
+      linkTitle={t("Common:SubmitToFormGallery")}
+      onLinkClick={onSubmitToFormGallery}
+      onCloseClick={onClose}
+      needCloseIcon
+    />
+  );
+};
+
+export default inject(({ auth, dialogsStore }) => {
+  const { theme } = auth.settingsStore;
+  const { setSubmitToGalleryDialogVisible } = dialogsStore;
+
+  return {
+    theme,
+    setSubmitToGalleryDialogVisible,
+  };
+})(observer(ArticleSubmitToFormGalleryAlert));