From c9292331b801a36d71573a32da76fed42ed73a2f Mon Sep 17 00:00:00 2001
From: Viktor Fomin <viktor.fomin@onlyoffice.com>
Date: Wed, 1 Jun 2022 14:11:11 +0300
Subject: [PATCH] Web: Client: add smart banner store, fix layout height

---
 web/ASC.Web.Client/src/components/Layout/index.js | 14 ++++++++------
 .../src/components/SmartBanner/index.js           | 15 ++++++++++-----
 web/ASC.Web.Client/src/store/BannerStore.js       | 15 +++++++++++++++
 web/ASC.Web.Client/src/store/index.js             |  3 +++
 4 files changed, 36 insertions(+), 11 deletions(-)
 create mode 100644 web/ASC.Web.Client/src/store/BannerStore.js

diff --git a/web/ASC.Web.Client/src/components/Layout/index.js b/web/ASC.Web.Client/src/components/Layout/index.js
index 7f821f8dcb..69f0aecb8f 100644
--- a/web/ASC.Web.Client/src/components/Layout/index.js
+++ b/web/ASC.Web.Client/src/components/Layout/index.js
@@ -31,7 +31,7 @@ const StyledContainer = styled.div`
 `;
 
 const Layout = (props) => {
-  const { children, isTabletView, setIsTabletView } = props;
+  const { children, isTabletView, setIsTabletView, isBannerVisible } = props;
 
   const [contentHeight, setContentHeight] = useState();
   const [isPortrait, setIsPortrait] = useState();
@@ -74,6 +74,10 @@ const Layout = (props) => {
     };
   }, [isTabletView]);
 
+  useEffect(() => {
+    changeRootHeight();
+  }, [isBannerVisible]);
+
   const onWidthChange = (e) => {
     const { matches } = e;
     setIsTabletView(matches);
@@ -116,11 +120,8 @@ const Layout = (props) => {
       //     height = window.screen.availHeight - correctorTabletSafari;
       //   }
       // }
-      const isSmartBanner =
-        document.getElementsByClassName("smartbanner-container")[0].nodeName ===
-        "DIV";
-      const bannerHeight = isSmartBanner ? 80 : 0;
 
+      const bannerHeight = isBannerVisible ? 80 : 0;
       let vh = (height - 48 - bannerHeight) * 0.01;
       document.documentElement.style.setProperty("--vh", `${vh}px`);
 
@@ -162,10 +163,11 @@ Layout.propTypes = {
   setIsTabletView: PropTypes.func,
 };
 
-export default inject(({ auth }) => {
+export default inject(({ auth, bannerStore }) => {
   return {
     isTabletView: auth.settingsStore.isTabletView,
 
     setIsTabletView: auth.settingsStore.setIsTabletView,
+    isBannerVisible: bannerStore.isBannerVisible,
   };
 })(observer(Layout));
diff --git a/web/ASC.Web.Client/src/components/SmartBanner/index.js b/web/ASC.Web.Client/src/components/SmartBanner/index.js
index f736184f3c..994c3bef90 100644
--- a/web/ASC.Web.Client/src/components/SmartBanner/index.js
+++ b/web/ASC.Web.Client/src/components/SmartBanner/index.js
@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from "react";
 import styled from "styled-components";
 import { isMobile, isIOS } from "react-device-detect";
+import { inject, observer } from "mobx-react";
 import SmartBanner from "react-smartbanner";
 import "./main.css";
 
@@ -9,8 +10,7 @@ const Wrapper = styled.div`
 `;
 
 const ReactSmartBanner = (props) => {
-  const { t, ready } = props;
-  const [isVisible, setIsVisible] = useState(true);
+  const { t, ready, isBannerVisible, setIsBannerVisible } = props;
   const force = isIOS ? "ios" : "android";
 
   const getCookie = (name) => {
@@ -25,7 +25,7 @@ const ReactSmartBanner = (props) => {
   };
 
   const hideBanner = () => {
-    setIsVisible(false);
+    setIsBannerVisible(false);
   };
 
   useEffect(() => {
@@ -55,7 +55,7 @@ const ReactSmartBanner = (props) => {
     kindle: "kindle-fire-app",
   };
 
-  return isMobile && isVisible && ready ? (
+  return isMobile && isBannerVisible && ready ? (
     <Wrapper>
       <SmartBanner
         title={t("SmartBanner:AppName")}
@@ -74,4 +74,9 @@ const ReactSmartBanner = (props) => {
   );
 };
 
-export default ReactSmartBanner;
+export default inject(({ bannerStore }) => {
+  return {
+    isBannerVisible: bannerStore.isBannerVisible,
+    setIsBannerVisible: bannerStore.setIsBannerVisible,
+  };
+})(observer(ReactSmartBanner));
diff --git a/web/ASC.Web.Client/src/store/BannerStore.js b/web/ASC.Web.Client/src/store/BannerStore.js
new file mode 100644
index 0000000000..4d1844800b
--- /dev/null
+++ b/web/ASC.Web.Client/src/store/BannerStore.js
@@ -0,0 +1,15 @@
+import { makeAutoObservable } from "mobx";
+
+class BannerStore {
+  isBannerVisible = true;
+
+  constructor() {
+    makeAutoObservable(this);
+  }
+
+  setIsBannerVisible = (visible) => {
+    this.isBannerVisible = visible;
+  };
+}
+
+export default BannerStore;
diff --git a/web/ASC.Web.Client/src/store/index.js b/web/ASC.Web.Client/src/store/index.js
index 4df3295a41..99139deea0 100644
--- a/web/ASC.Web.Client/src/store/index.js
+++ b/web/ASC.Web.Client/src/store/index.js
@@ -5,6 +5,7 @@ import SettingsSetupStore from "./SettingsSetupStore";
 import ConfirmStore from "./ConfirmStore";
 import BackupStore from "./BackupStore";
 import CommonStore from "./CommonStore";
+import BannerStore from "./BannerStore";
 
 const paymentStore = new PaymentStore();
 const wizardStore = new WizardStore();
@@ -12,6 +13,7 @@ const setupStore = new SettingsSetupStore();
 const confirmStore = new ConfirmStore();
 const backupStore = new BackupStore();
 const commonStore = new CommonStore();
+const bannerStore = new BannerStore();
 
 const store = {
   auth: authStore,
@@ -21,6 +23,7 @@ const store = {
   confirm: confirmStore,
   backup: backupStore,
   common: commonStore,
+  bannerStore: bannerStore,
 };
 
 export default store;