Merge pull request #336 from ONLYOFFICE/feature/new-campaigns

Feature/new campaigns

packages/asc-web-common/store/SettingsStore.js

@@ -320,7 +320,8 @@ class SettingsStore {
   };
 
   get firebaseHelper() {
-    return new FirebaseHelper(this.firebase);
+    window.firebaseHelper = new FirebaseHelper(this.firebase);
+    return window.firebaseHelper;
   }
 }
 

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

@@ -1,9 +1,12 @@
 import firebase from "firebase/app";
 import "firebase/remote-config";
+import "firebase/storage";
 
 class FirebaseHelper {
   remoteConfig = null;
   firebaseConfig = null;
+  firebaseStorage = null;
+
   constructor(settings) {
     this.firebaseConfig = settings;
 
@@ -15,6 +18,8 @@ class FirebaseHelper {
       firebase.app();
     }
 
+    this.firebaseStorage = firebase.storage();
+
     this.remoteConfig = firebase.remoteConfig();
 
     this.remoteConfig.settings = {
@@ -87,6 +92,22 @@ class FirebaseHelper {
 
     return await Promise.resolve(campaigns);
   }
+
+  async getCampaignsImages(banner) {
+    const storageRef = this.firebaseStorage.ref();
+    const tangRef = storageRef.child(
+      `campaigns/images/campaigns.${banner}.png`
+    );
+    return await tangRef.getDownloadURL();
+  }
+
+  async getCampaignsTranslations(banner, lng) {
+    const storageRef = this.firebaseStorage.ref();
+    const tangRef = storageRef.child(
+      `campaigns/locales/${lng}/CampaignPersonal${banner}.json`
+    );
+    return await tangRef.getDownloadURL();
+  }
 }
 
 export default FirebaseHelper;

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

@@ -247,7 +247,7 @@ export function getProviderTranslation(provider, t) {
   }
 }
 
-function getLanguage(lng) {
+export function getLanguage(lng) {
   try {
     let language = lng == "en-US" || lng == "en-GB" ? "en" : lng;
 
@@ -272,9 +272,6 @@ 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].includes("Campaign")) {
-      return `/static/locales/${language}/${ns[0]}.json`;
-    }
     return `${homepage}/locales/${language}/${fixedNS || ns}.json`;
   };
 }

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

@@ -1,16 +1,22 @@
-import React from "react";
+import React, { useState } from "react";
 import PropTypes from "prop-types";
 import BannerWrapper from "./styled-campaigns-banner";
 
 import Button from "../button";
 import Text from "../text";
+import Loaders from "@appserver/common/components/Loaders";
 
 const onButtonClick = (url) => {
   window.location = url;
 };
 
 const CampaignsBanner = (props) => {
   const { headerLabel, subHeaderLabel, img, btnLabel, link } = props;
+  const [imageLoad, setImageLoad] = useState(false);
+
+  const handleImageLoaded = () => {
+    setImageLoad(true);
+  };
 
   const onMouseDown = (e) => {
     e.preventDefault();
@@ -26,7 +32,8 @@ const CampaignsBanner = (props) => {
           {subHeaderLabel}
         </Text>
 
-        <img src={img} onMouseDown={onMouseDown} />
+        {!imageLoad && <Loaders.Rectangle height="140px" borderRadius="5px" />}
+        <img src={img} onMouseDown={onMouseDown} onLoad={handleImageLoaded} />
       </a>
 
       <Button

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

@@ -36,7 +36,7 @@ const BannerWrapper = styled.div`
 
   .banner-btn:active {
     color: #fff;
-    background: #ed7309;
+    background: #2da7db;
     border: none;
   }
 `;

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

@@ -1,17 +1,55 @@
 import React, { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
+import { withTranslation } from "react-i18next";
+import i18n from "i18next";
+import Backend from "i18next-http-backend";
+import { getLanguage } from "@appserver/common/utils";
 
 import CampaignsBanner from "@appserver/components/campaigns-banner";
+import { ADS_TIMEOUT } from "../../../helpers/constants";
+import { LANGUAGE } from "@appserver/common/constants";
+
+const i18nConfig = i18n.createInstance();
+
+let translationUrl;
+
+const loadLanguagePath = async () => {
+  if (!window.firebaseHelper) return;
+
+  const lng = localStorage.getItem(LANGUAGE) || "en";
+  const language = getLanguage(lng instanceof Array ? lng[0] : lng);
 
-const Banner = () => {
   const campaigns = (localStorage.getItem("campaigns") || "")
     .split(",")
     .filter((campaign) => campaign.length > 0);
+  const index = Number(localStorage.getItem("bannerIndex") || 0);
+  const campaign = campaigns[index];
 
-  const defaultBannerName = "Cloud";
-  const [bannerName, setBannerName] = useState(defaultBannerName);
+  try {
+    translationUrl = await window.firebaseHelper.getCampaignsTranslations(
+      campaign,
+      language
+    );
+  } catch (e) {
+    translationUrl = await window.firebaseHelper.getCampaignsTranslations(
+      campaign,
+      "en"
+    );
+    //console.error(e);
+  }
+  return translationUrl;
+};
 
-  useEffect(() => {
+const bannerHOC = (WrappedComponent) => (props) => {
+  const { FirebaseHelper } = props;
+
+  const campaigns = (localStorage.getItem("campaigns") || "")
+    .split(",")
+    .filter((campaign) => campaign.length > 0);
+
+  const [bannerImage, setBannerImage] = useState("");
+  const [bannerTranslation, setBannerTranslation] = useState();
+
+  const updateBanner = async () => {
     let index = Number(localStorage.getItem("bannerIndex") || 0);
     const campaign = campaigns[index];
 
@@ -21,31 +59,72 @@ const Banner = () => {
       index++;
     }
 
+    try {
+      const translationUrl = await loadLanguagePath();
+      setBannerTranslation(translationUrl);
+
+      i18nConfig.use(Backend).init({
+        lng: localStorage.getItem(LANGUAGE) || "en",
+        fallbackLng: "en",
+        load: "all",
+        debug: false,
+        defaultNS: "",
+
+        backend: {
+          loadPath: function () {
+            return translationUrl;
+          },
+        },
+      });
+
+      const image = await FirebaseHelper.getCampaignsImages(
+        campaign.toLowerCase()
+      );
+      setBannerImage(image);
+    } catch (e) {
+      updateBanner();
+      //console.error(e);
+    }
+
     localStorage.setItem("bannerIndex", index);
-    setBannerName(campaign);
+  };
+
+  useEffect(() => {
+    updateBanner();
+    setInterval(updateBanner, ADS_TIMEOUT);
   }, []);
 
-  const { t, i18n, ready } = useTranslation(`CampaignPersonal${bannerName}`, {
-    useSuspense: false,
-  });
+  if (!bannerTranslation || !bannerImage) return <></>;
+
+  return <WrappedComponent bannerImage={bannerImage} {...props} />;
+};
 
-  if (
-    !campaigns.length ||
-    !ready ||
-    !i18n.exists(`CampaignPersonal${bannerName}:Header`)
-  ) {
+const Banner = (props) => {
+  //console.log("Banner render", props);
+  const { t, tReady, bannerImage } = props;
+  const campaigns = (localStorage.getItem("campaigns") || "")
+    .split(",")
+    .filter((campaign) => campaign.length > 0);
+
+  if (!campaigns.length || !tReady) {
     return <></>;
   }
 
   return (
     <CampaignsBanner
-      headerLabel={t(`CampaignPersonal${bannerName}:Header`)}
-      subHeaderLabel={t(`CampaignPersonal${bannerName}:SubHeader`)}
-      img={`/static/images/campaigns.${bannerName.toLowerCase()}.png`}
-      btnLabel={t(`CampaignPersonal${bannerName}:ButtonLabel`)}
-      link={t(`CampaignPersonal${bannerName}:Link`)}
+      headerLabel={t("Header")}
+      subHeaderLabel={t("SubHeader")}
+      img={bannerImage}
+      btnLabel={t("ButtonLabel")}
+      link={t("Link")}
     />
   );
 };
 
-export default Banner;
+const BannerWithTranslation = withTranslation()(Banner);
+
+const WrapperBanner = (props) => (
+  <BannerWithTranslation i18n={i18nConfig} useSuspense={false} {...props} />
+);
+
+export default bannerHOC(WrapperBanner);

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

@@ -12,7 +12,7 @@ import Banner from "./Banner";
 import { inject, observer } from "mobx-react";
 import { withRouter } from "react-router-dom";
 import config from "../../../../package.json";
-import { combineUrl } from "@appserver/common/utils";
+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";
@@ -71,6 +71,7 @@ class ArticleBodyContent extends React.Component {
       personal,
       firstLoad,
       isDesktopClient,
+      FirebaseHelper,
     } = this.props;
 
     //console.log("Article Body render");
@@ -99,7 +100,9 @@ class ArticleBodyContent extends React.Component {
             {(isDesktop || isTablet) &&
               personal &&
               !firstLoad &&
-              campaigns.length > 0 && <Banner />}
+              campaigns.length > 0 && (
+                <Banner FirebaseHelper={FirebaseHelper} />
+              )}
           </>
         )}
       </>
@@ -145,6 +148,7 @@ export default inject(
       hideArticle,
       firstLoad,
       isDesktopClient,
+      FirebaseHelper: auth.settingsStore.firebaseHelper,
     };
   }
 )(observer(withRouter(ArticleBodyContent)));

products/ASC.Files/Client/src/helpers/constants.js

@@ -8,3 +8,5 @@ export const thumbnailStatuses = {
   ERROR: 2,
   NOT_REQUIRED: 3,
 };
+
+export const ADS_TIMEOUT = 60000;

products/ASC.Files/Client/src/i18n.js

@@ -25,7 +25,7 @@ newInstance.use(Backend).init({
   backend: {
     loadPath: loadLanguagePath(config.homepage),
     allowMultiLoading: false,
-    crossDomain: false,
+    crossDomain: true,
   },
 
   react: {