Refactoring.

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

@@ -96,6 +96,8 @@ const getInitialRotate = (rotate, isEdit) => {
     return item.key === rotate;
   });
 
+  console.log("item", item, rotateOptions[0]);
+
   return !item ? rotateOptions[0] : item;
 };
 
@@ -120,7 +122,13 @@ const ImageWatermark = ({
   const initialInfoRef = initialInfo.current;
 
   useEffect(() => {
-    if (isEdit) return;
+    const { enabled, isImage } = initialWatermarksSettings;
+
+    if (isEdit && enabled && isImage) {
+      setWatermarks(initialWatermarksSettings);
+
+      return;
+    }
 
     setWatermarks({
       rotate: initialInfoRef.rotate.key,
@@ -130,6 +138,7 @@ const ImageWatermark = ({
       enabled: true,
     });
   }, []);
+
   useEffect(() => {
     return () => {
       URL.revokeObjectURL(previewRef.current);
@@ -185,7 +194,7 @@ const ImageWatermark = ({
       previewRef.current = null;
     }
 
-    setWatermarks({ image: null });
+    setWatermarks({ image: null, imageUrl: null });
     setImageUrl("");
   };
 
@@ -227,6 +236,7 @@ const ImageWatermark = ({
   //   setWatermarks({ image: fileInfo });
   // };
 
+  console.log("selectedRotate", selectedRotate.key, selectedScale.key);
   return (
     <StyledWatermark
       rotate={selectedRotate.key}

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

@@ -136,7 +136,13 @@ const ViewerInfoWatermark = ({
   const initialInfoRef = initialInfo.current;
 
   useEffect(() => {
-    if (isEdit) return;
+    const { enabled, isImage } = initialWatermarksSettings;
+
+    if (isEdit && enabled && !isImage) {
+      setWatermarks(initialWatermarksSettings);
+
+      return;
+    }
 
     setWatermarks({
       rotate: initialInfoRef.rotate.key,

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

@@ -65,7 +65,9 @@ const Watermarks = ({ isEdit, setWatermarks, initialWatermarksSettings }) => {
     const { value } = e.target;
 
     setType(value);
-    setWatermarks({ isImage: type === imageWatermark });
+    setWatermarks({
+      isImage: type === imageWatermark,
+    });
   };
 
   const typeOptions = options(t);

packages/client/src/store/CreateEditRoomStore.js

@@ -116,6 +116,7 @@ class CreateEditRoomStore {
 
   resetWatermarks = () => {
     this.watermarksSettings = {};
+    this.initialWatermarksSettings = {};
   };
 
   isEqualWatermarkChanges = () => {
@@ -123,7 +124,20 @@ class CreateEditRoomStore {
   };
 
   isNotWatermarkSet = () => {
-    if (this.watermarksSettings.isImage && !this.watermarksSettings.image)
+    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
+    )
       return true;
 
     if (
@@ -136,7 +150,7 @@ class CreateEditRoomStore {
   };
 
   getWatermarkRequest = async (room) => {
-    if (!this.watermarksSettings.image) {
+    if (!this.watermarksSettings.isImage) {
       return setWatermarkSettings(room.id, {
         enabled: this.watermarksSettings.enabled,
         rotate: this.watermarksSettings.rotate,
@@ -162,6 +176,28 @@ class CreateEditRoomStore {
       img.onerror = (err) => onSetInfo(err);
     };
 
+    console.log(
+      !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,
+        rotate: watermarksSettings.rotate,
+        imageUrl: watermarksSettings.imageUrl,
+        // imageId: watermarksSettings.image.id,
+        imageWidth: watermarksSettings.imageWidth,
+        imageHeight: watermarksSettings.imageHeight,
+      });
+    }
+    
     const { uploadRoomLogo } = this.filesStore;
 
     const uploadWatermarkData = new FormData();
@@ -255,13 +291,10 @@ class CreateEditRoomStore {
 
       const requests = [];
 
-      if (
-        this.watermarksSettings &&
-        !this.isNotWatermarkSet() &&
-        this.watermarksSettings.enabled
-      ) {
+      if (this.watermarksSettings.enabled && !this.isNotWatermarkSet()) {
         requests.push(this.getWatermarkRequest(room));
       }
+
       // delete thirdparty account if not needed
       if (!isThirdparty && storageFolderId)
         requests.push(deleteThirdParty(thirdpartyAccount.providerId));