Merge branch 'feature/CampaignsBanner' of github.com:ONLYOFFICE/AppSe…

…rver into feature/personal

# Conflicts:
#	products/ASC.Files/Client/src/components/Article/Body/index.js

packages/asc-web-common/utils/index.js

@@ -272,6 +272,21 @@ export function loadLanguagePath(homepage, fixedNS = null) {
     if (ns.length > 0 && ns[0] === "Common") {
       return `/static/locales/${language}/Common.json`;
     }
+    if (ns.length > 0 && ns[0] === "CampaignPersonalCloud") {
+      return `/static/locales/${language}/CampaignPersonalCloud.json`;
+    }
+    if (ns.length > 0 && ns[0] === "CampaignPersonalDesktop") {
+      return `/static/locales/${language}/CampaignPersonalDesktop.json`;
+    }
+    if (ns.length > 0 && ns[0] === "CampaignPersonalEducation") {
+      return `/static/locales/${language}/CampaignPersonalEducation.json`;
+    }
+    if (ns.length > 0 && ns[0] === "CampaignPersonalEnterprise") {
+      return `/static/locales/${language}/CampaignPersonalEnterprise.json`;
+    }
+    if (ns.length > 0 && ns[0] === "CampaignPersonalIntegration") {
+      return `/static/locales/${language}/CampaignPersonalIntegration.json`;
+    }
     return `${homepage}/locales/${language}/${fixedNS || ns}.json`;
   };
 }

packages/asc-web-components/campaigns-banner/README.md

@@ -0,0 +1,26 @@
+# Campaigns Banner
+
+Used to display an campaigns banner.
+
+### Usage
+
+```js
+import CampaignsBanner from "@appserver/components/campaigns-banner";
+```
+
+```jsx
+<CampaignsBanner />
+```
+
+### Properties
+
+| Props         |      Type      | Required | Values | Default | Description       |
+| ------------- | :------------: | :------: | :----: | :-----: | ----------------- |
+| `headerLabel` |    `string`    |    ✅    |   -    |    -    |                   |
+| `textLabel`   |    `string`    |    ✅    |   -    |    -    |                   |
+| `img`         |    `string`    |    ✅    |   -    |    -    |                   |
+| `btnLabel`    |    `string`    |    ✅    |   -    |    -    |                   |
+| `btnLink`     |    `string`    |    ✅    |   -    |    -    |                   |
+| `className`   |    `string`    |    -     |   -    |    -    | Accepts class     |
+| `id`          |    `string`    |    -     |   -    |    -    | Accepts id        |
+| `style`       | `obj`, `array` |    -     |   -    |    -    | Accepts css style |

packages/asc-web-components/campaigns-banner/campaigns-banner.stories.js

@@ -0,0 +1,27 @@
+import React from "react";
+import CampaignsBanner from "./";
+
+export default {
+  title: "Components/CampaignsBanner",
+  component: CampaignsBanner,
+  parameters: {
+    docs: {
+      description: {
+        component: "Used to display an campaigns banner.",
+      },
+    },
+  },
+};
+
+const Template = (args) => <CampaignsBanner {...args} />;
+
+export const Default = Template.bind({});
+
+Default.args = {
+  headerLabel: "ONLYOFFICE for business",
+  subHeaderLabel: "Docs, projects, clients & emails",
+  img: "static/images/campaigns.cloud.png",
+  btnLabel: "START FREE TRIAL",
+  link:
+    "https://www.onlyoffice.com/ru/registration.aspx?utm_source=personal&utm_campaign=BannerPersonalCloud",
+};

packages/asc-web-components/campaigns-banner/campaigns-banner.test.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { mount } from "enzyme";
+import CampaignsBanner from ".";
+
+describe("<CampaignsBanner />", () => {
+  it("renders without error", () => {
+    const wrapper = mount(
+      <CampaignsBanner
+        headerLabel="ONLYOFFICE for business"
+        textLabel="Docs, projects, clients & emails"
+        btnLabel="START FREE TRIAL"
+        img="static/images/campaign.cloud.png"
+        btnLink="https://onlyoffice.com"
+      />
+    );
+
+    expect(wrapper).toExist();
+  });
+});

packages/asc-web-components/campaigns-banner/index.js

@@ -0,0 +1,56 @@
+import React from "react";
+import PropTypes from "prop-types";
+import BannerWrapper from "./styled-campaigns-banner";
+
+import Button from "../button";
+import Text from "../text";
+
+const onButtonClick = (url) => {
+  window.location = url;
+};
+
+const CampaignsBanner = (props) => {
+  const { headerLabel, subHeaderLabel, img, btnLabel, link } = props;
+  return (
+    <BannerWrapper>
+      <a href={link}>
+        <Text fontWeight="700" fontSize="13px">
+          {headerLabel}
+        </Text>
+        <Text className="banner-sub-header" fontWeight="500" fontSize="12px">
+          {subHeaderLabel}
+        </Text>
+
+        <img src={img} />
+      </a>
+
+      <Button
+        className="banner-btn"
+        size="medium"
+        isDisabled={false}
+        disableHover={true}
+        label={btnLabel}
+        onClick={() => onButtonClick(link)}
+      />
+    </BannerWrapper>
+  );
+};
+
+CampaignsBanner.propTypes = {
+  id: PropTypes.string,
+  className: PropTypes.string,
+  style: PropTypes.object,
+  headerLabel: PropTypes.string,
+  subHeaderLabel: PropTypes.string,
+  img: PropTypes.string,
+  btnLabel: PropTypes.string,
+  link: PropTypes.string,
+};
+
+CampaignsBanner.defaultProps = {
+  id: undefined,
+  className: undefined,
+  style: undefined,
+};
+
+export default CampaignsBanner;

packages/asc-web-components/campaigns-banner/styled-campaigns-banner.js

@@ -0,0 +1,45 @@
+import styled from "styled-components";
+
+const BannerWrapper = styled.div`
+  max-width: 185px;
+  border: 1px solid #d1d1d1;
+  border-radius: 5px;
+  padding: 15px;
+  margin-top: 20px;
+
+  @media screen and (max-width: 1024px) {
+    max-width: inherit;
+  }
+
+  a {
+    text-decoration: none;
+    color: #000;
+  }
+
+  img {
+    max-width: 180px;
+    height: auto;
+    margin-top: 10px;
+  }
+
+  .banner-sub-header {
+    line-height: 1.5;
+  }
+
+  .banner-btn {
+    width: 100%;
+    color: #fff;
+    background: #ed7309;
+    margin-top: 15px;
+    border: none;
+    border-radius: 5px;
+  }
+
+  .banner-btn:active {
+    color: #fff;
+    background: #ed7309;
+    border: none;
+  }
+`;
+
+export default BannerWrapper;

products/ASC.Files/Client/src/components/Article/Body/Banner.js

@@ -0,0 +1,53 @@
+import React, { useState, useEffect } from "react";
+import { withRouter } from "react-router";
+import { withTranslation } from "react-i18next";
+import { inject, observer } from "mobx-react";
+import CampaignsBanner from "@appserver/components/campaigns-banner";
+import Loaders from "@appserver/common/components/Loaders";
+
+const PureBanner = ({ t, tReady, getBannerType, bannerTypes }) => {
+  const [bannerType, setBannerType] = useState("");
+
+  useEffect(() => {
+    if (!localStorage.getItem("banner")) {
+      localStorage.setItem("banner", 0);
+    }
+
+    const index = Number(localStorage.getItem("banner"));
+    const banner = getBannerType(index);
+
+    if (index + 1 === bannerTypes.length) {
+      localStorage.setItem("banner", 0);
+    } else {
+      localStorage.setItem("banner", Number(index + 1));
+    }
+
+    setBannerType(banner);
+  }, []);
+
+  if (tReady)
+    return (
+      <CampaignsBanner
+        headerLabel={t(`CampaignPersonal${bannerType}:Header`)}
+        subHeaderLabel={t(`CampaignPersonal${bannerType}:SubHeader`)}
+        img={`/static/images/campaigns.${bannerType}.png`}
+        btnLabel={t(`CampaignPersonal${bannerType}:ButtonLabel`)}
+        link={t(`CampaignPersonal${bannerType}:Link`)}
+      />
+    );
+  else return <Loaders.Rectangle />;
+};
+
+const Banner = withTranslation([
+  "CampaignPersonalCloud",
+  "CampaignPersonalDesktop",
+  "CampaignPersonalEducation",
+  "CampaignPersonalEnterprise",
+  "CampaignPersonalIntegration",
+])(withRouter(PureBanner));
+
+export default inject(({ bannerStore }) => {
+  const { getBannerType, bannerTypes } = bannerStore;
+
+  return { getBannerType, bannerTypes };
+})(observer(Banner));

products/ASC.Files/Client/src/components/Article/Body/ThirdPartyList.js

@@ -21,7 +21,11 @@ const StyledThirdParty = styled.div`
   .tree-thirdparty-list {
     padding-top: 3px;
     display: flex;
-    max-width: 200px;
+    max-width: 218px;
+
+    @media screen and (max-width: 1024px) {
+      max-width: 228px;
+    }
 
     div {
       height: 26px;

products/ASC.Files/Client/src/components/Article/Body/index.js

@@ -7,12 +7,14 @@ import TreeSettings from "./TreeSettings";
 import isEmpty from "lodash/isEmpty";
 import { setDocumentTitle } from "../../../helpers/utils";
 import ThirdPartyList from "./ThirdPartyList";
+import Banner from "./Banner";
 import { inject, observer } from "mobx-react";
 import { withRouter } from "react-router-dom";
 import config from "../../../../package.json";
 import { clickBackdrop, combineUrl } from "@appserver/common/utils";
 import { AppServerConfig } from "@appserver/common/constants";
 import FilesFilter from "@appserver/common/api/files/filter";
+import { isDesktop, isTablet } from "react-device-detect";
 
 class ArticleBodyContent extends React.Component {
   constructor(props) {
@@ -94,6 +96,8 @@ class ArticleBodyContent extends React.Component {
         />
         {!personal && <TreeSettings />}
         {enableThirdParty && !isVisitor && <ThirdPartyList />}
+
+        {(isDesktop || isTablet) && <Banner />}
       </>
     );
   }

products/ASC.Files/Client/src/store/BannerStore.js

@@ -0,0 +1,15 @@
+import { makeAutoObservable } from "mobx";
+
+class BannerStore {
+  bannerTypes = ["Cloud", "Desktop", "Education", "Enterprise", "Integration"];
+
+  constructor() {
+    makeAutoObservable(this);
+  }
+
+  getBannerType = (index) => {
+    return this.bannerTypes[index];
+  };
+}
+
+export default BannerStore;

products/ASC.Files/Client/src/store/index.js

@@ -17,6 +17,8 @@ import PrimaryProgressDataStore from "./PrimaryProgressDataStore";
 import VersionHistoryStore from "./VersionHistoryStore";
 import DialogsStore from "./DialogsStore";
 
+import BannerStore from "./BannerStore";
+
 import store from "studio/store";
 
 const formatsStore = new FormatsStore(
@@ -71,6 +73,8 @@ const filesActionsStore = new FilesActionsStore(
 
 const versionHistoryStore = new VersionHistoryStore(filesStore);
 
+const bannerStore = new BannerStore();
+
 const stores = {
   filesStore,
   settingsStore,
@@ -82,6 +86,7 @@ const stores = {
   treeFoldersStore,
   selectedFolderStore,
   filesActionsStore,
+  bannerStore,
 };
 
 export default stores;

public/locales/de/CampaignPersonalCloud.json

@@ -0,0 +1,6 @@
+{
+  "Header": "ONLYOFFICE für Business",
+  "SubHeader": "Dokumente, Projekte, Kunden & E-Mails",
+  "ButtonLabel": "Kostenlos testen",
+  "Link": "https://www.onlyoffice.com/de/registration.aspx?utm_source=personal&utm_campaign=BannerPersonalCloud"
+}

public/locales/de/CampaignPersonalDesktop.json

@@ -0,0 +1,6 @@
+{
+  "Header": "ONLYOFFICE für PC",
+  "SubHeader": "Gratis Alternative zu MS Office",
+  "ButtonLabel": "Herunterladen",
+  "Link": "https://www.onlyoffice.com/de/download-desktop.aspx?utm_source=personal&utm_campaign=BannerPersonalDesktop"
+}

public/locales/de/CampaignPersonalEducation.json

@@ -0,0 +1,6 @@
+{
+  "Header": "ONLYOFFICE für Schulen",
+  "SubHeader": "Endecken Sie alle Rabatte",
+  "ButtonLabel": "Mehr erfahren",
+  "Link": "https://www.onlyoffice.com/de/education.aspx?utm_source=personal&utm_campaign=BannerPersonalEducation"
+}

public/locales/de/CampaignPersonalEnterprise.json

@@ -0,0 +1,6 @@
+{
+  "Header": "ONLYOFFICE On-Premises",
+  "SubHeader": "Schützen Sie Ihre Dokumente",
+  "ButtonLabel": "Jetzt erhalten",
+  "Link": "https://www.onlyoffice.com/de/download-commercial.aspx?utm_source=personal&utm_campaign=BannerPersonalEnterprise"
+}

public/locales/de/CampaignPersonalIntegration.json

@@ -0,0 +1,6 @@
+{
+  "Header": "ONLYOFFICE Integration",
+  "SubHeader": "Editoren für Ihre Plattform",
+  "ButtonLabel": "Jetzt integrieren",
+  "Link": "https://www.onlyoffice.com/de/connectors.aspx?utm_source=personal&utm_campaign=BannerPersonalIntegration"
+}

public/locales/en/CampaignPersonalCloud.json

@@ -0,0 +1,6 @@
+{
+  "Header": "ONLYOFFICE for business",
+  "SubHeader": "Docs, projects, clients & emails",
+  "ButtonLabel": "Start free trial",
+  "Link": "https://www.onlyoffice.com/registration.aspx?utm_source=personal&utm_campaign=BannerPersonalCloud"
+}

public/locales/en/CampaignPersonalDesktop.json

@@ -0,0 +1,6 @@
+{
+  "Header": "ONLYOFFICE for PC",
+  "SubHeader": "Get a free alternative to MS Office",
+  "ButtonLabel": "Download",
+  "Link": "https://www.onlyoffice.com/download-desktop.aspx?utm_source=personal&utm_campaign=BannerPersonalDesktop"
+}

public/locales/en/CampaignPersonalEducation.json

@@ -0,0 +1,6 @@
+{
+  "Header": "ONLYOFFICE for schools",
+  "SubHeader": "Learn about education discounts",
+  "ButtonLabel": "Learn more",
+  "Link": "https://www.onlyoffice.com/education.aspx?utm_source=personal&utm_campaign=BannerPersonalEducation"
+}

public/locales/en/CampaignPersonalEnterprise.json

@@ -0,0 +1,6 @@
+{
+  "Header": "ONLYOFFICE on-premises",
+  "SubHeader": "Keep your docs and projects safe",
+  "ButtonLabel": "Get it now",
+  "Link": "https://www.onlyoffice.com/download-commercial.aspx?utm_source=personal&utm_campaign=BannerPersonalEnterprise"
+}