Web: Client/Shared: Added getting information about watermarks.

packages/client/src/components/GlobalEvents/EditRoomEvent.js

@@ -30,7 +30,7 @@ import { useTranslation } from "react-i18next";
 import { EditRoomDialog } from "../dialogs";
 import { Encoder } from "@docspace/shared/utils/encoder";
 import api from "@docspace/shared/api";
-import { getRoomInfo } from "@docspace/shared/api/rooms";
+import { getRoomInfo, getWatermarkSettings } from "@docspace/shared/api/rooms";
 import { toastr } from "@docspace/shared/components/toast";
 
 const EditRoomEvent = ({
@@ -75,12 +75,15 @@ const EditRoomEvent = ({
 
   defaultRoomsQuota,
   isDefaultRoomsQuotaSet,
+
+  setWatermarksSettings,
 }) => {
   const { t } = useTranslation(["CreateEditRoomDialog", "Common", "Files"]);
 
   const [fetchedTags, setFetchedTags] = useState([]);
   const [fetchedImage, setFetchedImage] = useState(null);
   const [isLoading, setIsLoading] = useState(false);
+  const [isInitLoading, setIsInitLoading] = useState(false);
 
   const startTags = Object.values(item.tags);
   const startObjTags = startTags.map((tag, i) => ({ id: i, name: tag }));
@@ -268,24 +271,27 @@ const EditRoomEvent = ({
     setFetchedImage(file);
   }, []);
 
-  useEffect(() => {
-    const logo = item?.logo?.large ? item.logo.large : "";
-    if (logo) {
-      fetchLogoAction(logo);
-    }
-  }, []);
-
-  const fetchTagsAction = useCallback(async () => {
-    const tags = await fetchTags();
-    setFetchedTags(tags);
-  }, []);
-
-  useEffect(() => {
-    fetchTagsAction();
-  }, [fetchTagsAction]);
-
   useEffect(() => {
     setCreateRoomDialogVisible(true);
+    setIsInitLoading(true);
+
+    const logo = item?.logo?.large ? item.logo.large : "";
+
+    const requests = [fetchTags(), getWatermarkSettings(item.id)];
+
+    if (logo) requests.push(fetchLogoAction);
+
+    const fetchInfo = async () => {
+      const [tags, watermarks] = await Promise.all(requests);
+      
+      setFetchedTags(tags);
+      setWatermarksSettings(watermarks);
+
+      setIsInitLoading(false);
+    };
+
+    fetchInfo();
+
     return () => setCreateRoomDialogVisible(false);
   }, []);
 
@@ -299,6 +305,7 @@ const EditRoomEvent = ({
       fetchedTags={fetchedTags}
       fetchedImage={fetchedImage}
       isLoading={isLoading}
+      isInitLoading={isInitLoading}
     />
   );
 };
@@ -314,6 +321,7 @@ export default inject(
     filesSettingsStore,
     infoPanelStore,
     currentQuotaStore,
+    createEditRoomStore,
   }) => {
     const {
       editRoom,
@@ -345,6 +353,7 @@ export default inject(
     const { updateInfoPanelSelection } = infoPanelStore;
 
     const { defaultRoomsQuota, isDefaultRoomsQuotaSet } = currentQuotaStore;
+    const { setWatermarksSettings } = createEditRoomStore;
 
     return {
       defaultRoomsQuota,
@@ -382,6 +391,7 @@ export default inject(
 
       updateInfoPanelSelection,
       changeRoomOwner,
+      setWatermarksSettings,
     };
   },
 )(observer(EditRoomEvent));

packages/client/src/components/dialogs/CreateEditRoomDialog/EditRoomDialog.js

@@ -42,6 +42,7 @@ const EditRoomDialog = ({
   fetchedRoomParams,
   fetchedTags,
   fetchedImage,
+  isInitLoading,
 }) => {
   const [isScrollLocked, setIsScrollLocked] = useState(false);
   const [isValidTitle, setIsValidTitle] = useState(true);
@@ -131,6 +132,7 @@ const EditRoomDialog = ({
       visible={visible}
       onClose={onCloseAction}
       isScrollLocked={isScrollLocked}
+      isLoading={isInitLoading}
       withFooterBorder
     >
       <ModalDialog.Header>

packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SetRoomParams.js

@@ -222,6 +222,7 @@ const SetRoomParams = ({
           t={t}
           roomParams={roomParams}
           setRoomParams={setRoomParams}
+          isEdit={isEdit}
         />
       )}
 

packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/VirtualDataRoomBlock.js

@@ -1,8 +1,11 @@
 import { useState } from "react";
 import { Trans } from "react-i18next";
 import styled from "styled-components";
+import { inject, observer } from "mobx-react";
+
 import { Text } from "@docspace/shared/components/text";
 import { ToggleButton } from "@docspace/shared/components/toggle-button";
+
 import FileLifetime from "./FileLifetime";
 import Watermarks from "../sub-components/Watermarks";
 
@@ -68,12 +71,18 @@ const Block = ({
   );
 };
 
-const VirtualDataRoomBlock = ({ t, roomParams, setRoomParams }) => {
+const VirtualDataRoomBlock = ({
+  t,
+  roomParams,
+  setRoomParams,
+  isEdit,
+  isWatermarks,
+}) => {
   const role = t("Translations:RoleViewer");
 
   const [fileLifetimeChecked, setFileLifetimeChecked] = useState(false);
   const [copyAndDownloadChecked, setCopyAndDownloadChecked] = useState(false);
-  const [watermarksChecked, setWatermarksChecked] = useState(false);
+  const [watermarksChecked, setWatermarksChecked] = useState(isWatermarks);
 
   const onChangeAutomaticIndexing = () => {
     setRoomParams({ ...roomParams, indexing: !roomParams.indexing });
@@ -128,10 +137,16 @@ const VirtualDataRoomBlock = ({ t, roomParams, setRoomParams }) => {
         isDisabled={false}
         isChecked={watermarksChecked}
       >
-        <Watermarks setRoomParams={setRoomParams} />
+        <Watermarks setRoomParams={setRoomParams} isEdit={isEdit} />
       </Block>
     </StyledVirtualDataRoomBlock>
   );
 };
 
-export default VirtualDataRoomBlock;
+export default inject(({ createEditRoomStore }) => {
+  const { watermarksSettings } = createEditRoomStore;
+
+  return {
+    isWatermarks: watermarksSettings?.enabled,
+  };
+})(observer(VirtualDataRoomBlock));

packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/ViewerInfo.js

@@ -26,13 +26,15 @@
 
 import { useState, useRef } from "react";
 import { useTranslation } from "react-i18next";
+import { inject, observer } from "mobx-react";
+
 import { TabsContainer } from "@docspace/shared/components/tabs-container";
 import { TextInput } from "@docspace/shared/components/text-input";
 import { Text } from "@docspace/shared/components/text";
 import { ComboBox } from "@docspace/shared/components/combobox";
+import { WatermarkAdditions } from "@docspace/shared/enums";
 
 import { StyledWatermark } from "./StyledComponent";
-import { WatermarkAdditions } from "@docspace/shared/enums";
 
 const getInitialState = (initialTab) => {
   const state = {
@@ -51,7 +53,7 @@ const getInitialState = (initialTab) => {
 };
 
 const ViewerInfoWatermark = ({
-  setParams,
+  setWatermarksSettings,
   initialPosition,
   dataPosition,
   dataTabs,
@@ -79,20 +81,20 @@ const ViewerInfoWatermark = ({
       }
     }
 
-    setParams({ additions: flagsCount });
+    setWatermarksSettings({ additions: flagsCount });
   };
 
   const onPositionChange = (item) => {
     setSelectedPosition(item);
 
-    setParams({ rotate: item.key });
+    setWatermarksSettings({ rotate: item.key });
   };
 
   const onTextChange = (e) => {
     const { value } = e.target;
     setTextValue(value);
 
-    setParams({ text: value });
+    setWatermarksSettings({ text: value });
   };
 
   return (
@@ -132,4 +134,10 @@ const ViewerInfoWatermark = ({
     </StyledWatermark>
   );
 };
-export default ViewerInfoWatermark;
+
+export default inject(({ createEditRoomStore }) => {
+  const { setWatermarksSettings } = createEditRoomStore;
+  return {
+    setWatermarksSettings,
+  };
+})(observer(ViewerInfoWatermark));

packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/index.js

@@ -24,8 +24,9 @@
 // content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
+import { inject, observer } from "mobx-react";
 
 import { RadioButtonGroup } from "@docspace/shared/components/radio-button-group";
 
@@ -47,12 +48,12 @@ const options = (t) => [
   },
 ];
 
-const positionOptions = (t) => [
+const rotateOptions = (t) => [
   { key: -45, label: t("Diagonal") },
   { key: 0, label: t("Horizontal") },
 ];
 
-const elementsOptions = (t) => [
+const tabsOptions = (t) => [
   {
     key: "UserName",
     title: t("UserName"),
@@ -79,29 +80,49 @@ const elementsOptions = (t) => [
     index: 4,
   },
 ];
-const Watermarks = ({ setRoomParams }) => {
+
+const getInitialTabs = (additions, t) => {
+  const dataTabs = tabsOptions(t);
+
+  if (!additions) return [dataTabs[0]];
+
+  return dataTabs.filter((item) => additions & WatermarkAdditions[item.key]);
+};
+
+const getInitialRotate = (rotate, t) => {
+  const dataRotate = rotateOptions(t);
+
+  if (!rotate) return dataRotate[0];
+
+  return dataRotate.filter((item) => item.key === rotate);
+};
+
+const Watermarks = ({ setWatermarksSettings, watermarksSettings, isEdit }) => {
   const { t } = useTranslation(["CreateEditRoomDialog", "Common"]);
   const [type, setType] = useState(viewerInfoWatermark);
 
-  const dataPosition = positionOptions(t);
-  const initialPosition = dataPosition[0];
+  const initialInfo = useRef(null);
 
-  const dataTabs = elementsOptions(t);
-  const initialTab = [dataTabs[0]];
+  if (initialInfo.current === null) {
+    initialInfo.current = {
+      dataRotate: rotateOptions(t),
+      dataTabs: tabsOptions(t),
+      initialRotate: getInitialRotate(watermarksSettings?.rotate, t),
+      initialTabs: getInitialTabs(watermarksSettings?.additions, t),
+    };
+  }
+
+  const initialInfoRef = initialInfo.current;
 
   useEffect(() => {
-    let additions = 0;
-    initialTab.map((item) => (additions += WatermarkAdditions[item.key]));
-
-    setRoomParams((prevState) => ({
-      ...prevState,
-      watermarks: {
+    if (!isEdit) {
+      setWatermarksSettings({
         enabled: true,
-        rotate: initialPosition.key,
+        rotate: initialInfoRef.initialRotate.key,
         text: "",
-        additions,
-      },
-    }));
+        additions: WatermarkAdditions.UserEmail,
+      });
+    }
   }, []);
 
   const onSelectType = (e) => {
@@ -110,14 +131,10 @@ const Watermarks = ({ setRoomParams }) => {
     setType(value);
   };
 
-  const setParams = (info) => {
-    setRoomParams((prevState) => ({
-      ...prevState,
-      watermarks: { ...prevState.watermarks, ...info },
-    }));
-  };
   const typeOptions = options(t);
 
+  console.log("============Watermarks render", watermarksSettings);
+
   return (
     <StyledBody>
       <RadioButtonGroup
@@ -132,15 +149,20 @@ const Watermarks = ({ setRoomParams }) => {
 
       {type === viewerInfoWatermark && (
         <ViewerInfoWatermark
-          setParams={setParams}
-          initialPosition={initialPosition}
-          dataPosition={dataPosition}
-          dataTabs={dataTabs}
-          initialTab={initialTab}
+          initialPosition={initialInfoRef.initialRotate}
+          dataPosition={initialInfoRef.dataRotate}
+          dataTabs={initialInfoRef.dataTabs}
+          initialTab={initialInfoRef.initialTabs}
         />
       )}
     </StyledBody>
   );
 };
 
-export default Watermarks;
+export default inject(({ createEditRoomStore }) => {
+  const { setWatermarksSettings, watermarksSettings } = createEditRoomStore;
+  return {
+    setWatermarksSettings,
+    watermarksSettings,
+  };
+})(observer(Watermarks));

packages/client/src/store/CreateEditRoomStore.js

@@ -47,6 +47,7 @@ class CreateEditRoomStore {
   settingsStore = null;
   infoPanelStore = null;
   currentQuotaStore = null;
+  watermarksSettings = null;
 
   constructor(
     filesStore,
@@ -92,6 +93,18 @@ class CreateEditRoomStore {
     this.onClose = onClose;
   };
 
+  setWatermarksSettings = (watermarksSettings) => {
+    if (!watermarksSettings) {
+      this.watermarksSettings = null;
+      return;
+    }
+
+    this.watermarksSettings = {
+      ...this.watermarksSettings,
+      ...watermarksSettings,
+    };
+  };
+
   onCreateRoom = async (withConfirm = false, t) => {
     const roomParams = this.roomParams;
 
@@ -158,9 +171,7 @@ class CreateEditRoomStore {
 
       const actions = [];
 
-      const watermarks = roomParams.watermarks;
-
-      if (watermarks) {
+      if (this.watermarksSettings) {
         await setRoomWatermarks(room.id, watermarks);
       }
       // delete thirdparty account if not needed

packages/shared/api/rooms/index.ts

@@ -499,3 +499,10 @@ export function setRoomWatermarks(
 
   return request(options);
 }
+
+export function getWatermarkSettings(roomId: number | string) {
+  return request({
+    method: "get",
+    url: `files/rooms/${roomId}/watermark`,
+  });
+}