Applied last changes in Mail/Calendar ComingSoon pages

products/ASC.Calendar/Client/public/locales/en/ComingSoon.json

@@ -2,5 +2,6 @@
   "ComingSoon": "Coming soon",
   "ViewWeb": "View web version",
   "OpenApp": "Open your {{title}} app",
-  "LearnMore": "Learn more"
+  "LearnMore": "Learn more",
+  "ModuleDescription": "Schedule meetings and events"
 }

products/ASC.Calendar/Client/public/locales/ru/ComingSoon.json

@@ -2,5 +2,6 @@
   "ComingSoon": "Скоро появится",
   "ViewWeb": "Просмотреть веб-версию",
   "OpenApp": "Откройте {{title}}",
-  "LearnMore": "Узнать больше"
+  "LearnMore": "Узнать больше",
+  "ModuleDescription": "Планируйте встречи и мероприятия"
 }

products/ASC.Calendar/Client/src/pages/Home/index.js

@@ -11,9 +11,9 @@ import ExternalLinkIcon from "../../../../../../public/images/external.link.reac
 import Loaders from "@appserver/common/components/Loaders";
 import toastr from "studio/toastr";
 import PageLayout from "@appserver/common/components/PageLayout";
-import { useTranslation } from "react-i18next";
+import { withTranslation } from "react-i18next";
 import styled from "styled-components";
-import { isMobile, isIOS } from "react-device-detect";
+import { isMobile, isTablet, isIOS } from "react-device-detect";
 
 import { setDocumentTitle } from "../../helpers/utils";
 import { inject } from "mobx-react";
@@ -34,14 +34,19 @@ const commonStyles = `
 `;
 
 const ComingSoonPage = styled.div`
-  padding: ${isMobile ? "62px 0 0 0" : "0"};
+  padding: ${isTablet ? "106px 0 0 0" : isMobile ? "62px 0 0 0" : "0"};
-  width: 336px;
+  width: ${isTablet ? "500px" : "336px"};
   margin: 0 auto;
 
   .module-logo-icon {
     float: left;
     margin-top: 8px;
     margin-right: 16px;
+
+    svg {
+      width: ${isTablet ? "192px" : "96px"};
+      height: ${isTablet ? "192px" : "96px"};
+    }
   }
 
   .module-title {
@@ -93,7 +98,10 @@ const StyledDesktopContainer = styled(EmptyScreenContainer)`
 
 const ExternalLink = ({ label, href, onClick }) => (
   <Box className="link-box">
-    <ExternalLinkIcon color="#333333" size={isMobile ? "small" : "medium"} />
+    <ExternalLinkIcon
+      color="#333333"
+      size={isMobile || isTablet ? "small" : "medium"}
+    />
     <Link
       as="a"
       href={href}
@@ -109,20 +117,11 @@ const ExternalLink = ({ label, href, onClick }) => (
   </Box>
 );
 
-const Body = ({ modules, match, isLoaded, setCurrentProductId }) => {
+const Body = ({ modules, match, isLoaded, setCurrentProductId, t, tReady }) => {
-  const { t } = useTranslation("ComingSoon");
   const { error } = match.params;
   const { pathname, protocol, hostname } = window.location;
   const currentModule = modules.find((m) => m.link === pathname);
-  const {
+  const { id, title, imageUrl, link, originUrl, helpUrl } = currentModule;
-    id,
-    title,
-    description,
-    imageUrl,
-    link,
-    originUrl,
-    helpUrl,
-  } = currentModule;
   const url = originUrl ? originUrl : link;
   const webLink = combineUrl(
     protocol + "//" + hostname,
@@ -172,8 +171,8 @@ const Body = ({ modules, match, isLoaded, setCurrentProductId }) => {
 
   const moduleDescription = (
     <Text className="module-info">
-      {description}{" "}
+      {t("ModuleDescription")}{" "}
-      {helpUrl && (
+      {helpUrl && false && (
         <Link
           as="a"
           href={helpUrl}
@@ -189,9 +188,9 @@ const Body = ({ modules, match, isLoaded, setCurrentProductId }) => {
     </Text>
   );
 
-  return !isLoaded ? (
+  return !isLoaded || !tReady ? (
     <></>
-  ) : isMobile ? (
+  ) : isMobile || isTablet ? (
     <ComingSoonPage>
       <ReactSVG
         className="module-logo-icon"
@@ -208,7 +207,11 @@ const Body = ({ modules, match, isLoaded, setCurrentProductId }) => {
         src={imageUrl}
       />
       <Box displayProp="flex" flexDirection="column" widthProp="220px">
-        <Text fontWeight="600" fontSize="19px" className="module-title">
+        <Text
+          fontWeight="600"
+          fontSize={isTablet ? "24px" : "19px"}
+          className="module-title"
+        >
           {title}
         </Text>
         {moduleDescription}
@@ -245,7 +248,7 @@ const ComingSoonWrapper = inject(({ auth }) => ({
   modules: auth.moduleStore.modules,
   isLoaded: auth.isLoaded,
   setCurrentProductId: auth.settingsStore.setCurrentProductId,
-}))(withRouter(ComingSoon));
+}))(withRouter(withTranslation("ComingSoon")(ComingSoon)));
 
 export default (props) => (
   <I18nextProvider i18n={i18n}>

products/ASC.Mail/Client/public/locales/en/ComingSoon.json

@@ -2,5 +2,6 @@
   "ComingSoon": "Coming soon",
   "ViewWeb": "View web version",
   "OpenApp": "Open your {{title}} app",
-  "LearnMore": "Learn more"
+  "LearnMore": "Learn more",
+  "ModuleDescription": "Manage your emails"
 }

products/ASC.Mail/Client/public/locales/ru/ComingSoon.json

@@ -2,5 +2,6 @@
   "ComingSoon": "Скоро появится",
   "ViewWeb": "Просмотреть веб-версию",
   "OpenApp": "Откройте {{title}}",
-  "LearnMore": "Узнать больше"
+  "LearnMore": "Узнать больше",
+  "ModuleDescription": "Управляйте своей электронной почтой"
 }

products/ASC.Mail/Client/src/pages/Home/index.js

@@ -11,9 +11,9 @@ import ExternalLinkIcon from "../../../../../../public/images/external.link.reac
 import Loaders from "@appserver/common/components/Loaders";
 import toastr from "studio/toastr";
 import PageLayout from "@appserver/common/components/PageLayout";
-import { useTranslation } from "react-i18next";
+import { withTranslation } from "react-i18next";
 import styled from "styled-components";
-import { isMobile, isIOS } from "react-device-detect";
+import { isMobile, isTablet, isIOS } from "react-device-detect";
 
 import { setDocumentTitle } from "../../helpers/utils";
 import { inject } from "mobx-react";
@@ -34,14 +34,19 @@ const commonStyles = `
 `;
 
 const ComingSoonPage = styled.div`
-  padding: ${isMobile ? "62px 0 0 0" : "0"};
+  padding: ${isTablet ? "106px 0 0 0" : isMobile ? "62px 0 0 0" : "0"};
-  width: 336px;
+  width: ${isTablet ? "500px" : "336px"};
   margin: 0 auto;
 
   .module-logo-icon {
     float: left;
     margin-top: 8px;
     margin-right: 16px;
+
+    svg {
+      width: ${isTablet ? "192px" : "96px"};
+      height: ${isTablet ? "192px" : "96px"};
+    }
   }
 
   .module-title {
@@ -93,7 +98,10 @@ const StyledDesktopContainer = styled(EmptyScreenContainer)`
 
 const ExternalLink = ({ label, href, onClick }) => (
   <Box className="link-box">
-    <ExternalLinkIcon color="#333333" size={isMobile ? "small" : "medium"} />
+    <ExternalLinkIcon
+      color="#333333"
+      size={isMobile || isTablet ? "small" : "medium"}
+    />
     <Link
       as="a"
       href={href}
@@ -109,20 +117,11 @@ const ExternalLink = ({ label, href, onClick }) => (
   </Box>
 );
 
-const Body = ({ modules, match, isLoaded, setCurrentProductId }) => {
+const Body = ({ modules, match, isLoaded, setCurrentProductId, t, tReady }) => {
-  const { t } = useTranslation("ComingSoon");
   const { error } = match.params;
   const { pathname, protocol, hostname } = window.location;
   const currentModule = modules.find((m) => m.link === pathname);
-  const {
+  const { id, title, imageUrl, link, originUrl, helpUrl } = currentModule;
-    id,
-    title,
-    description,
-    imageUrl,
-    link,
-    originUrl,
-    helpUrl,
-  } = currentModule;
   const url = originUrl ? originUrl : link;
   const webLink = combineUrl(
     protocol + "//" + hostname,
@@ -172,8 +171,8 @@ const Body = ({ modules, match, isLoaded, setCurrentProductId }) => {
 
   const moduleDescription = (
     <Text className="module-info">
-      {description}{" "}
+      {t("ModuleDescription")}{" "}
-      {helpUrl && (
+      {helpUrl && false && (
         <Link
           as="a"
           href={helpUrl}
@@ -189,9 +188,9 @@ const Body = ({ modules, match, isLoaded, setCurrentProductId }) => {
     </Text>
   );
 
-  return !isLoaded ? (
+  return !isLoaded || !tReady ? (
     <></>
-  ) : isMobile ? (
+  ) : isMobile || isTablet ? (
     <ComingSoonPage>
       <ReactSVG
         className="module-logo-icon"
@@ -208,7 +207,11 @@ const Body = ({ modules, match, isLoaded, setCurrentProductId }) => {
         src={imageUrl}
       />
       <Box displayProp="flex" flexDirection="column" widthProp="220px">
-        <Text fontWeight="600" fontSize="19px" className="module-title">
+        <Text
+          fontWeight="600"
+          fontSize={isTablet ? "24px" : "19px"}
+          className="module-title"
+        >
           {title}
         </Text>
         {moduleDescription}
@@ -245,7 +248,7 @@ const ComingSoonWrapper = inject(({ auth }) => ({
   modules: auth.moduleStore.modules,
   isLoaded: auth.isLoaded,
   setCurrentProductId: auth.settingsStore.setCurrentProductId,
-}))(withRouter(ComingSoon));
+}))(withRouter(withTranslation("ComingSoon")(ComingSoon)));
 
 export default (props) => (
   <I18nextProvider i18n={i18n}>