Refactoring.

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

@@ -48,6 +48,8 @@
   "UserIPAddress": "User IP Address",
   "ViewOnlyRoomDescription": "Share any ready documents, reports, documentation, and other files for viewing.",
   "ViewOnlyRoomTitle": "View-only room",
+  "WatermarkPreview": "Watermark Preview",
+  "WatermarkPreviewHelp": "This image preview roughly shows how the watermark will be displayed in your files.",
   "AutomaticIndexing": "Automatic indexing",
   "AutomaticIndexingDescription": "Enable automatic indexing to index files and folders by serial number. Sorting by number will be set as default for all users.",
   "FileLifetime": "File lifetime",

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

@@ -52,19 +52,17 @@
 
 import { useState, useRef, useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import { ReactSVG } from "react-svg";
+import { inject, observer } from "mobx-react";
 
 import { Text } from "@docspace/shared/components/text";
 import { ComboBox } from "@docspace/shared/components/combobox";
-import { inject, observer } from "mobx-react";
-import { StyledWatermark } from "./StyledComponent";
 import { DropDownItem } from "@docspace/shared/components/drop-down-item";
 import { FileInput } from "@docspace/shared/components/file-input";
 import { imageProcessing } from "@docspace/shared/utils/common";
-import { Button } from "@docspace/shared/components/button";
-
-import TrashReactSvgUrl from "PUBLIC_DIR/images/trash.react.svg";
 import { ButtonDelete } from "@docspace/shared/components/image-editor";
+import { HelpButton } from "@docspace/shared/components/help-button";
+
+import { StyledWatermark } from "./StyledComponent";
 
 const scaleOptions = [
   { key: 100, label: "100" },
@@ -96,8 +94,6 @@ const getInitialRotate = (rotate, isEdit) => {
     return item.key === rotate;
   });
 
-  console.log("item", item, rotateOptions[0]);
-
   return !item ? rotateOptions[0] : item;
 };
 
@@ -260,8 +256,20 @@ const ImageWatermark = ({
 
       {selectedImageUrl && (
         <div className="image-wrapper">
-          <div className="HELLO-2">
+          <div>
-            <div className="HELLO">
+            <div className="image-description">
+              <Text fontWeight={600} className="image-watermark_text">
+                {t("WatermarkPreview")}
+              </Text>
+              <HelpButton
+                tooltipContent={
+                  <Text fontSize="12px">{t("WatermarkPreviewHelp")}</Text>
+                }
+                offsetRight={0}
+                className="settings_unavailable"
+              />
+            </div>
+            <div className="image-watermark_wrapper">
               <img
                 alt="logo"
                 src={selectedImageUrl}
@@ -317,7 +325,7 @@ export default inject(({ createEditRoomStore }) => {
     createEditRoomStore;
 
   const { imageUrl } = watermarksSettings;
-  console.log("watermarksSettings", watermarksSettings);
+
   return {
     setWatermarks,
     initialWatermarksSettings,

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

@@ -50,7 +50,17 @@ const StyledWatermark = styled.div`
     grid-template-columns: 216px auto;
     gap: 16px;
 
-    .HELLO {
+    .image-description {
+      display: flex;
+      gap: 8px;
+      align-items: baseline;
+
+      .image-watermark_text {
+        margin-bottom: 8px;
+      }
+    }
+
+    .image-watermark_wrapper {
       width: 216px;
       height: 216px;
       border: 1px solid #eceef1;

packages/client/src/store/CreateEditRoomStore.js

@@ -124,19 +124,10 @@ class CreateEditRoomStore {
   };
 
   isNotWatermarkSet = () => {
-    console.log(
-      "isNotWatermarkSet",
-      this.watermarksSettings,
-      this.watermarksSettings.enabled,
-      this.watermarksSettings.isImage,
-      !this.watermarksSettings.image,
-      !this.watermarksSettings.imageUrl,
-    );
-
     if (
-      this.watermarksSettings.enabled &&
       this.watermarksSettings.isImage &&
-      !this.watermarksSettings.image
+      !this.watermarksSettings.image &&
+      !this.watermarksSettings.imageUrl
     )
       return true;
 
@@ -176,17 +167,7 @@ class CreateEditRoomStore {
       img.onerror = (err) => onSetInfo(err);
     };
 
-    console.log(
+    if (!watermarkImage && this.watermarksSettings.imageUrl) {
-      !watermarkImage,
-      !this.watermarksSettings.enabled,
-      this.watermarksSettings.imageUrl,
-    );
-
-    if (
-      !watermarkImage &&
-      !this.watermarksSettings.enabled &&
-      this.watermarksSettings.imageUrl
-    ) {
       return setWatermarkSettings(room.id, {
         enabled: watermarksSettings.enabled,
         imageScale: watermarksSettings.imageScale,