From 8cb87da1d5795f4e58f90692b9c9f90292c9eb42 Mon Sep 17 00:00:00 2001
From: Tatiana Lopaeva <tatiana.lopaeva@onlyoffice.com>
Date: Thu, 7 Dec 2023 17:05:18 +0300
Subject: [PATCH] PortalSettings: Watermark: Added viewer info component.

---
 .../locales/en/CreateEditRoomDialog.json      |  5 ++
 .../sub-components/Watermarks/ViewerInfo.js   | 82 +++++++++++++++++++
 public/locales/en/Common.json                 |  2 +
 3 files changed, 89 insertions(+)
 create mode 100644 packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/ViewerInfo.js

diff --git a/packages/client/public/locales/en/CreateEditRoomDialog.json b/packages/client/public/locales/en/CreateEditRoomDialog.json
index 1fc66c91f0..3117c9c67f 100644
--- a/packages/client/public/locales/en/CreateEditRoomDialog.json
+++ b/packages/client/public/locales/en/CreateEditRoomDialog.json
@@ -7,6 +7,7 @@
   "CreateTagOption": "Create tag",
   "CustomRoomDescription": "Apply your own settings to use this room for any custom purpose.",
   "CustomRoomTitle": "Custom room",
+  "Center": "Center",
   "FillingFormsRoomDescription": "Build, share and fill document templates or work with the ready presets to quickly create documents of any type.",
   "FillingFormsRoomTitle": "Filling forms room",
   "Horizontal": "Horizontal",
@@ -31,8 +32,12 @@
   "ThirdPartyStorageNoStorageAlert": "Before, you need to connect the corresponding service in the “Integration” section. Otherwise, the connection will not be possible.",
   "ThirdPartyStoragePermanentSettingDescription": "Files are stored in a third-party {{thirdpartyTitle}} storage in the \"{{thirdpartyFolderName}}\" folder.\n<strong>{{thirdpartyPath}}</strong>",
   "ThirdPartyStorageRoomAdminNoStorageAlert": "To connect a third-party storage, you need to add the corresponding service in the Integration section of DocSpace settings. Contact DocSpace owner or administrator to enable the integration.",
+  "UserName": "User Name",
+  "UserEmail": "User Email",
+  "UserIPAddress": "User IP Address",
   "ViewOnlyRoomDescription": "Share any ready documents, reports, documentation, and other files for viewing.",
   "ViewOnlyRoomTitle": "View-only room",
+  "WatermarkElements": "Watermark elements",
   "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",
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
new file mode 100644
index 0000000000..792ac366dd
--- /dev/null
+++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/ViewerInfo.js
@@ -0,0 +1,82 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import TabContainer from "@docspace/components/tabs-container";
+import TextInput from "@docspace/components/text-input";
+import Text from "@docspace/components/text";
+import Checkbox from "@docspace/components/checkbox";
+
+import { StyledWatermark } from "./StyledComponent";
+
+const options = (t) => [
+  {
+    key: "userName",
+    title: t("UserName"),
+  },
+  {
+    key: "userEmail",
+    title: t("UserEmail"),
+  },
+  {
+    key: "userIPAddress",
+    title: t("UserIPAddress"),
+  },
+  {
+    key: "currentDate",
+    title: t("Common:CurrentDate"),
+  },
+  {
+    key: "RoomName",
+    title: t("Common:RoomName"),
+  },
+];
+const ViewerInfoWatermark = () => {
+  const { t } = useTranslation(["CreateEditRoomDialog", "Common"]);
+
+  const [isChecked, setIsChecked] = useState(true);
+  const [elements, setElements] = useState({
+    userName: false,
+    userEmail: false,
+    userIP: false,
+    currentDate: false,
+    roomName: false,
+  });
+
+  const dataTabs = options(t);
+
+  const onSelect = (item) => {
+    const updatedElem = elements[item.key];
+    const key = item.key;
+    setElements({ ...elements, [key]: !updatedElem });
+  };
+  const onCheckboxChange = () => {
+    setIsChecked(!isChecked);
+  };
+
+  return (
+    <StyledWatermark>
+      <div>
+        <Text className="watermark-title" fontWeight={600} lineHeight="20px">
+          {t("WatermarkElements")}
+        </Text>
+        <TabContainer
+          elements={dataTabs}
+          onSelect={onSelect}
+          multiple
+          withBodyScroll={false}
+        />
+        <Text className="watermark-title" fontWeight={600} lineHeight="20px">
+          {t("Position")}
+        </Text>
+        <TextInput scale value={t("Center")} isReadOnly />
+        <Checkbox
+          className="watermark-checkbox"
+          label={t("Semitransparent")}
+          onChange={onCheckboxChange}
+          isChecked={isChecked}
+        />
+      </div>
+      <div style={{ width: "100px", height: "140px" }}></div>
+    </StyledWatermark>
+  );
+};
+export default ViewerInfoWatermark;
diff --git a/public/locales/en/Common.json b/public/locales/en/Common.json
index 5fe364e1f6..417c2fc3df 100644
--- a/public/locales/en/Common.json
+++ b/public/locales/en/Common.json
@@ -84,6 +84,7 @@
   "Culture_uk-UA": "Українська (Україна)",
   "Culture_vi": "Tiếng Việt (Việt Nam)",
   "Culture_zh-CN": "中文（简体，中国）",
+  "CurrentDate": "Current Date",
   "Date": "Date",
   "DayOfTheMonth": "Day of the month",
   "DayOfTheWeek": "Day of the week",
@@ -259,6 +260,7 @@
   "Review": "Review",
   "Role": "Role",
   "Room": "Room",
+  "RoomName": "Room Name",
   "RoomAdmin": "Room admin",
   "Rooms": "Rooms",
   "SameEmail": "You can't use the same email address",