From 5476c53716b0c6bc0d5fc7017e32f620c6d04e34 Mon Sep 17 00:00:00 2001 From: Tatiana Lopaeva Date: Tue, 14 May 2024 14:41:29 +0300 Subject: [PATCH] Web: Added a warning dialog if the watermark information is not filled in. --- .../locales/en/CreateEditRoomDialog.json | 1 + .../GlobalEvents/CreateRoomEvent.js | 18 +++++++++---- .../Watermarks/ImageWatermark.js | 19 ++++++++------ .../sub-components/Watermarks/ViewerInfo.js | 15 ++++++----- .../sub-components/Watermarks/index.js | 26 +++++++++++++++---- .../dialogs/CreateRoomConfirmDialog/index.js | 9 ++++--- .../client/src/store/CreateEditRoomStore.js | 20 ++++++++++++++ 7 files changed, 81 insertions(+), 27 deletions(-) diff --git a/packages/client/public/locales/en/CreateEditRoomDialog.json b/packages/client/public/locales/en/CreateEditRoomDialog.json index afd651514d..5440106928 100644 --- a/packages/client/public/locales/en/CreateEditRoomDialog.json +++ b/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", diff --git a/packages/client/src/components/GlobalEvents/CreateRoomEvent.js b/packages/client/src/components/GlobalEvents/CreateRoomEvent.js index 8f26622365..e6283b562c 100644 --- a/packages/client/src/components/GlobalEvents/CreateRoomEvent.js +++ b/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)); diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/ImageWatermark.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/ImageWatermark.js index e297028f3e..85b1ce5bb1 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/ImageWatermark.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/ImageWatermark.js @@ -117,14 +117,17 @@ const ImageWatermark = ({ const initialInfoRef = initialInfo.current; useEffect(() => { - setWatermarks({ - rotate: initialInfoRef.rotate.key, - imageScale: initialInfoRef.scale.key, - imageUrl: initialInfoRef.url, - text: "", - enabled: true, - additions: 0, - }); + setWatermarks( + { + rotate: initialInfoRef.rotate.key, + imageScale: initialInfoRef.scale.key, + imageUrl: initialInfoRef.url, + text: "", + enabled: true, + additions: 0, + }, + true, + ); }, []); const [selectedRotate, setRotate] = useState(initialInfoRef.rotate); diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/ViewerInfo.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/ViewerInfo.js index 805da76492..dbe508010d 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/ViewerInfo.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/ViewerInfo.js @@ -136,12 +136,15 @@ const ViewerInfoWatermark = ({ const initialInfoRef = initialInfo.current; useEffect(() => { - setWatermarks({ - rotate: initialInfoRef.rotate.key, - text: initialInfoRef.text, - enabled: true, - additions: initialInfoRef.additions, - }); + setWatermarks( + { + rotate: initialInfoRef.rotate.key, + text: initialInfoRef.text, + enabled: true, + additions: initialInfoRef.additions, + }, + true, + ); }, []); const [selectedPosition, setSelectedPosition] = useState( diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/index.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/index.js index a36eb7df65..6bd30c4046 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/index.js +++ b/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 && } - {type === imageWatermark && } + {isImageType ? ( + + ) : ( + + )} ); }; export default inject(({ createEditRoomStore }) => { - const { watermarksSettings } = createEditRoomStore; + const { watermarksSettings, setIsImageWatermarkType, isImageType } = + createEditRoomStore; return { watermarksSettings, + isImageType, + setIsImageWatermarkType, }; })(observer(Watermarks)); diff --git a/packages/client/src/components/dialogs/CreateRoomConfirmDialog/index.js b/packages/client/src/components/dialogs/CreateRoomConfirmDialog/index.js index 2cc3368462..27fe736cf5 100644 --- a/packages/client/src/components/dialogs/CreateRoomConfirmDialog/index.js +++ b/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 ( {t("Common:Warning")} - - {t("CreateEditRoomDialog:CreateRoomConfirmation")} - + {bodyText}