Web: Added a warning dialog if the watermark information is not filled in.

packages/client/public/locales/en/CreateEditRoomDialog.json

@@ -6,6 +6,7 @@
   "CollaborationRoomDescription": "Collaborate on one or multiple documents with your team",
   "CollaborationRoomTitle": "Collaboration room",
   "CreateRoomConfirmation": "Continue without connecting the storage?\nYou have selected a third-party storage option that is not connected yet. If you proceed without connecting the service, this option will not be added.",
+  "CreateRoomWatermarksConfirmation": "You have not set a watermark to be applied to documents in this room. You can always add a watermark in the room editing settings. Continue without a watermark?",
   "CreateTagOption": "Create tag",
   "CustomRoomDescription": "Apply your own settings to use this room for any custom purpose.",
   "CustomRoomTitle": "Custom room",

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

@@ -50,6 +50,7 @@ const CreateRoomEvent = ({
   fetchThirdPartyProviders,
   enableThirdParty,
   deleteThirdParty,
+  isNotWatermarkSet,
 }) => {
   const { t } = useTranslation(["CreateEditRoomDialog", "Common", "Files"]);
   const [fetchedTags, setFetchedTags] = useState([]);
@@ -58,14 +59,17 @@ const CreateRoomEvent = ({
     setRoomParams(roomParams);
     setOnClose(onClose);
 
-    if (
+    const notConnectedThirdparty =
       roomParams.storageLocation.isThirdparty &&
-      !roomParams.storageLocation.storageFolderId
-    ) {
+      !roomParams.storageLocation.storageFolderId;
+
+    if (notConnectedThirdparty || isNotWatermarkSet()) {
       setCreateRoomConfirmDialogVisible(true);
-    } else {
-      onCreateRoom(false, t);
+
+      return;
     }
+
+    onCreateRoom(false, t);
   };
 
   const fetchTagsAction = useCallback(async () => {
@@ -132,6 +136,8 @@ export default inject(
       setIsLoading,
       setOnClose,
       confirmDialogIsLoading,
+
+      isNotWatermarkSet,
     } = createEditRoomStore;
 
     return {
@@ -149,6 +155,8 @@ export default inject(
       fetchThirdPartyProviders,
       enableThirdParty,
       deleteThirdParty,
+
+      isNotWatermarkSet,
     };
   },
 )(observer(CreateRoomEvent));

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

@@ -117,14 +117,17 @@ const ImageWatermark = ({
   const initialInfoRef = initialInfo.current;
 
   useEffect(() => {
-    setWatermarks({
+    setWatermarks(
+      {
         rotate: initialInfoRef.rotate.key,
         imageScale: initialInfoRef.scale.key,
         imageUrl: initialInfoRef.url,
         text: "",
         enabled: true,
         additions: 0,
-    });
+      },
+      true,
+    );
   }, []);
 
   const [selectedRotate, setRotate] = useState(initialInfoRef.rotate);

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

@@ -136,12 +136,15 @@ const ViewerInfoWatermark = ({
   const initialInfoRef = initialInfo.current;
 
   useEffect(() => {
-    setWatermarks({
+    setWatermarks(
+      {
         rotate: initialInfoRef.rotate.key,
         text: initialInfoRef.text,
         enabled: true,
         additions: initialInfoRef.additions,
-    });
+      },
+      true,
+    );
   }, []);
 
   const [selectedPosition, setSelectedPosition] = useState(

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

@@ -24,7 +24,7 @@
 // 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 } from "react";
+import { useState, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { inject, observer } from "mobx-react";
 
@@ -55,16 +55,26 @@ const getOptionType = (additions, isEdit) => {
 
   return viewerInfoWatermark;
 };
-const Watermarks = ({ isEdit, watermarksSettings }) => {
+const Watermarks = ({
+  isEdit,
+  watermarksSettings,
+  isImageType,
+  setIsImageWatermarkType,
+}) => {
   const { t } = useTranslation(["CreateEditRoomDialog", "Common"]);
   const [type, setType] = useState(
     getOptionType(watermarksSettings?.additions, isEdit),
   );
 
+  useEffect(() => {
+    setIsImageWatermarkType(type === imageWatermark, true);
+  }, []);
+
   const onSelectType = (e) => {
     const { value } = e.target;
 
     setType(value);
+    setIsImageWatermarkType(value === imageWatermark);
   };
 
   const typeOptions = options(t);
@@ -81,15 +91,21 @@ const Watermarks = ({ isEdit, watermarksSettings }) => {
         onClick={onSelectType}
       />
 
-      {type === viewerInfoWatermark && <ViewerInfoWatermark isEdit={isEdit} />}
-      {type === imageWatermark && <ImageWatermark isEdit={isEdit} />}
+      {isImageType ? (
+        <ImageWatermark isEdit={isEdit} />
+      ) : (
+        <ViewerInfoWatermark isEdit={isEdit} />
+      )}
     </StyledBody>
   );
 };
 
 export default inject(({ createEditRoomStore }) => {
-  const { watermarksSettings } = createEditRoomStore;
+  const { watermarksSettings, setIsImageWatermarkType, isImageType } =
+    createEditRoomStore;
   return {
     watermarksSettings,
+    isImageType,
+    setIsImageWatermarkType,
   };
 })(observer(Watermarks));

packages/client/src/components/dialogs/CreateRoomConfirmDialog/index.js

@@ -29,6 +29,7 @@ import { ModalDialog } from "@docspace/shared/components/modal-dialog";
 import { withTranslation } from "react-i18next";
 import { inject, observer } from "mobx-react";
 import { Button } from "@docspace/shared/components/button";
+import { RoomsType } from "@docspace/shared/enums";
 
 const CreateRoomConfirmDialog = ({
   t,
@@ -46,6 +47,10 @@ const CreateRoomConfirmDialog = ({
 
   const onClose = () => setVisible(false);
 
+  const bodyText = RoomsType.VirtualDataRoom
+    ? t("CreateEditRoomDialog:CreateRoomWatermarksConfirmation")
+    : t("CreateEditRoomDialog:CreateRoomConfirmation");
+
   return (
     <ModalDialog
       visible={visible || confirmDialogIsLoading}
@@ -54,9 +59,7 @@ const CreateRoomConfirmDialog = ({
       zIndex={310}
     >
       <ModalDialog.Header>{t("Common:Warning")}</ModalDialog.Header>
-      <ModalDialog.Body>
-        {t("CreateEditRoomDialog:CreateRoomConfirmation")}
-      </ModalDialog.Body>
+      <ModalDialog.Body>{bodyText}</ModalDialog.Body>
       <ModalDialog.Footer>
         <Button
           label={t("Common:ContinueButton")}

packages/client/src/store/CreateEditRoomStore.js

@@ -50,6 +50,7 @@ class CreateEditRoomStore {
   infoPanelStore = null;
   currentQuotaStore = null;
   watermarksSettings = null;
+  isImageType = false;
 
   constructor(
     filesStore,
@@ -103,10 +104,29 @@ class CreateEditRoomStore {
     this.watermarksSettings = watermarksSettings;
   };
 
+  setIsImageWatermarkType = (isImageType, isInit) => {
+    if (isInit) {
+      this.initialIsImageType = isImageType;
+    }
+
+    this.isImageType = isImageType;
+  };
+
   isEqualWatermarkChanges = () => {
+    if (this.isImageType !== this.initialIsImageType) return false;
+
     return isEqual(this.watermarksSettings, this.initialWatermarksSettings);
   };
 
+  isNotWatermarkSet = () => {
+    console.log(!this.isImageType && this.watermarksSettings.additions === 0);
+    if (this.isImageType && !this.watermarksSettings.imageUrl) return true;
+
+    if (!this.isImageType && this.watermarksSettings.additions === 0)
+      return true;
+
+    return false;
+  };
   getWatermarkRequest = async (room) => {
     if (!this.watermarksSettings.image) {
       return setWatermarkSettings(room.id, this.watermarksSettings);