Web: Files: added VDR-room

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

@@ -14,6 +14,7 @@
   "MakeRoomPrivateTitle": "Make the Room Private",
   "PublicRoomBarDescription": "This room is available to anyone with the link. External users will have View Only permission for all the files.",
   "PublicRoomDescription": "Invite users via external links to view documents without registration. You can also embed this room into any web interface.",
+  "VirtualDataRoomDescription": "Use VDR for advanced file security and transparency while filling and signing documents step-by-step. Set watermarks, automatically index and track all content, restrict downloading and copying.",
   "ReviewRoomDescription": "Request a review or comments on the documents",
   "ReviewRoomTitle": "Review room",
   "RoomEditing": "Room editing",
@@ -25,5 +26,13 @@
   "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.",
   "ViewOnlyRoomDescription": "Share any ready documents, reports, documentation, and other files for viewing.",
-  "ViewOnlyRoomTitle": "View-only room"
+  "ViewOnlyRoomTitle": "View-only room",
+  "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",
+  "FileLifetimeDescription": "Set file lifetime to automatically delete the files in this room after a defined period. Lifetime begins on the date of upload/creation of the file.",
+  "RestrictCopyAndDownload": "Restrict copy and download",
+  "RestrictCopyAndDownloadDescription": "Enable this setting to disable downloads and content copying for users with the \"{{role}}\" role.",
+  "AddWatermarksToDocuments": "Add watermarks to documents",
+  "AddWatermarksToDocumentsDescription": "Protect all documents in this room with watermarks. If a document already contains one, it will not be replaced."
 }

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

@@ -116,6 +116,7 @@
   "PrivateRoomHeader": "Welcome to ONLYOFFICE private room where every symbol you type is encrypted",
   "PrivateRoomSupport": "Work in Private Room is available via {{organizationName}} desktop app. <3>Instructions</3>",
   "PublicRoom": "Public room",
+  "VirtualDataRoom": "Virtual Data Room",
   "RecentEmptyContainerDescription": "Your last viewed or edited docs will be displayed in this section.",
   "RecycleBinAction": "Empty trash",
   "RemovedFromFavorites": "Removed from favorites",

packages/client/src/components/dialogs/CreateEditRoomDialog/data/index.js

@@ -14,6 +14,8 @@ export const getRoomTypeTitleTranslation = (roomType = 1, t) => {
       return t("CreateEditRoomDialog:CustomRoomTitle");
     case RoomsType.PublicRoom:
       return t("Files:PublicRoom");
+    case RoomsType.VirtualDataRoom:
+      return t("Files:VirtualDataRoom");
   }
 };
 
@@ -31,6 +33,8 @@ export const getRoomTypeDescriptionTranslation = (roomType = 1, t) => {
       return t("CreateEditRoomDialog:CustomRoomDescription");
     case RoomsType.PublicRoom:
       return t("CreateEditRoomDialog:PublicRoomDescription");
+    case RoomsType.VirtualDataRoom:
+      return t("CreateEditRoomDialog:VirtualDataRoomDescription");
   }
 };
 

packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomType.js

@@ -53,7 +53,7 @@ const StyledRoomType = styled.div`
   }
 
   .choose_room-forward_btn {
-    ${props =>
+    ${(props) =>
       props.theme.interfaceDirection === "rtl"
         ? css`
             margin-right: auto;
@@ -70,53 +70,53 @@ const StyledRoomType = styled.div`
 `;
 
 const StyledListItem = styled(StyledRoomType)`
-  background-color: ${props =>
+  background-color: ${(props) =>
     props.theme.createEditRoomDialog.roomType.listItem.background};
   border: 1px solid
-    ${props => props.theme.createEditRoomDialog.roomType.listItem.borderColor};
+    ${(props) => props.theme.createEditRoomDialog.roomType.listItem.borderColor};
   border-radius: 6px;
 
   .choose_room-description {
-    color: ${props =>
+    color: ${(props) =>
       props.theme.createEditRoomDialog.roomType.listItem.descriptionText};
   }
 `;
 
 const StyledDropdownButton = styled(StyledRoomType)`
   border-radius: 6px;
-  background-color: ${props =>
+  background-color: ${(props) =>
     props.theme.createEditRoomDialog.roomType.dropdownButton.background};
   border: 1px solid
-    ${props =>
+    ${(props) =>
       props.isOpen
         ? props.theme.createEditRoomDialog.roomType.dropdownButton
             .isOpenBorderColor
         : props.theme.createEditRoomDialog.roomType.dropdownButton.borderColor};
 
   .choose_room-description {
-    color: ${props =>
+    color: ${(props) =>
       props.theme.createEditRoomDialog.roomType.dropdownButton.descriptionText};
   }
 
   .choose_room-forward_btn {
     &.dropdown-button {
-      transform: ${props =>
+      transform: ${(props) =>
         props.isOpen ? "rotate(-90deg)" : "rotate(90deg)"};
     }
   }
 `;
 
 const StyledDropdownItem = styled(StyledRoomType)`
-  background-color: ${props =>
+  background-color: ${(props) =>
     props.theme.createEditRoomDialog.roomType.dropdownItem.background};
 
   &:hover {
-    background-color: ${props =>
+    background-color: ${(props) =>
       props.theme.createEditRoomDialog.roomType.dropdownItem.hoverBackground};
   }
 
   .choose_room-description {
-    color: ${props =>
+    color: ${(props) =>
       props.theme.createEditRoomDialog.roomType.dropdownItem.descriptionText};
   }
 
@@ -127,15 +127,15 @@ const StyledDropdownItem = styled(StyledRoomType)`
 
 const StyledDisplayItem = styled(StyledRoomType)`
   cursor: default;
-  background-color: ${props =>
+  background-color: ${(props) =>
     props.theme.createEditRoomDialog.roomType.displayItem.background};
   border: 1px solid
-    ${props =>
+    ${(props) =>
       props.theme.createEditRoomDialog.roomType.displayItem.borderColor};
   border-radius: 6px;
 
   .choose_room-description {
-    color: ${props =>
+    color: ${(props) =>
       props.theme.createEditRoomDialog.roomType.displayItem.descriptionText};
   }
 
@@ -202,7 +202,8 @@ const RoomType = ({
       title={t(room.title)}
       onClick={onClick}
       isOpen={isOpen}
-      data-selected-id={selectedId}>
+      data-selected-id={selectedId}
+    >
       {content}
     </StyledDropdownButton>
   ) : type === "dropdownItem" ? (
@@ -211,14 +212,16 @@ const RoomType = ({
       title={t(room.title)}
       onClick={onClick}
       isOpen={isOpen}
-      data-selected-id={selectedId}>
+      data-selected-id={selectedId}
+    >
       {content}
     </StyledDropdownItem>
   ) : (
     <StyledDisplayItem
       id={id}
       title={t(room.title)}
-      data-selected-id={selectedId}>
+      data-selected-id={selectedId}
+    >
       {content}
     </StyledDisplayItem>
   );

packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SetRoomParams.js

@@ -17,6 +17,7 @@ import { getRoomTypeDefaultTagTranslation } from "../data";
 
 import ImageEditor from "@docspace/components/ImageEditor";
 import PreviewTile from "@docspace/components/ImageEditor/PreviewTile";
+import VirtualDataRoomBlock from "./VirtualDataRoomBlock";
 import Text from "@docspace/components/text";
 
 const StyledSetRoomParams = styled.div`
@@ -117,6 +118,8 @@ const SetRoomParams = ({
         />
       )} */}
 
+      {<VirtualDataRoomBlock t={t} />}
+
       {!isEdit && enableThirdParty && (
         <ThirdPartyStorage
           t={t}

packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/VirtualDataRoomBlock.js

@@ -0,0 +1,120 @@
+import React, { useState } from "react";
+import { Trans } from "react-i18next";
+import styled from "styled-components";
+import Text from "@docspace/components/text";
+import ToggleButton from "@docspace/components/toggle-button";
+
+const StyledVirtualDataRoomBlock = styled.div`
+  .virtual-data-room-block {
+    margin-bottom: 18px;
+    :last-child {
+      margin-bottom: -26px;
+    }
+
+    .virtual-data-room-block_header {
+      display: flex;
+
+      .virtual-data-room-block_toggle {
+        margin-left: auto;
+        margin-right: 28px;
+      }
+    }
+    .virtual-data-room-block_description {
+      color: ${({ theme }) => theme.editLink.text.color};
+    }
+  }
+`;
+
+const Block = ({ headerText, bodyText, onChange, isDisabled, isChecked }) => {
+  return (
+    <div className="virtual-data-room-block">
+      <div className="virtual-data-room-block_header">
+        <Text fontWeight={600} fontSize="13px">
+          {headerText}
+        </Text>
+        <ToggleButton
+          isDisabled={isDisabled}
+          isChecked={isChecked}
+          onChange={onChange}
+          className="virtual-data-room-block_toggle"
+        />
+      </div>
+      <Text
+        fontWeight={400}
+        fontSize="12px"
+        className="virtual-data-room-block_description"
+      >
+        {bodyText}
+      </Text>
+      {isChecked && (
+        <div className="virtual-data-room-block_content">Content</div>
+      )}
+    </div>
+  );
+};
+
+const VirtualDataRoomBlock = ({ t }) => {
+  const role = t("Translations:RoleViewer");
+
+  const [automaticIndexingChecked, setAutomaticIndexingChecked] =
+    useState(false);
+  const [fileLifetimeChecked, setFileLifetimeChecked] = useState(false);
+  const [copyAndDownloadChecked, setCopyAndDownloadChecked] = useState(false);
+  const [watermarksChecked, setWatermarksChecked] = useState(false);
+
+  const onChangeAutomaticIndexing = () => {
+    setAutomaticIndexingChecked(!automaticIndexingChecked);
+  };
+
+  const onChangeFileLifetime = () => {
+    setFileLifetimeChecked(!fileLifetimeChecked);
+  };
+
+  const onChangeRestrictCopyAndDownload = () => {
+    setCopyAndDownloadChecked(!copyAndDownloadChecked);
+  };
+
+  const onChangeAddWatermarksToDocuments = () => {
+    setWatermarksChecked(!watermarksChecked);
+  };
+
+  return (
+    <StyledVirtualDataRoomBlock>
+      <Block
+        headerText={t("AutomaticIndexing")}
+        bodyText={t("AutomaticIndexingDescription")}
+        onChange={onChangeAutomaticIndexing}
+        isDisabled={false}
+        isChecked={automaticIndexingChecked}
+      />
+      <Block
+        headerText={t("FileLifetime")}
+        bodyText={t("FileLifetimeDescription")}
+        onChange={onChangeFileLifetime}
+        isDisabled={false}
+        isChecked={fileLifetimeChecked}
+      />
+      <Block
+        headerText={t("RestrictCopyAndDownload")}
+        bodyText={
+          <Trans t={t} i18nKey="RestrictCopyAndDownloadDescription">
+            Enable this setting to disable downloads and content copying for
+            users with the {{ role }} role.
+          </Trans>
+        }
+        onChange={onChangeRestrictCopyAndDownload}
+        isDisabled={false}
+        isChecked={copyAndDownloadChecked}
+      />
+      <Block
+        headerText={t("AddWatermarksToDocuments")}
+        bodyText={t("AddWatermarksToDocumentsDescription")}
+        onChange={onChangeAddWatermarksToDocuments}
+        isDisabled={false}
+        isChecked={watermarksChecked}
+      />
+    </StyledVirtualDataRoomBlock>
+  );
+};
+
+export default VirtualDataRoomBlock;

packages/common/constants/index.js

@@ -134,6 +134,7 @@ export const RoomsType = Object.freeze({
   // ReviewRoom: 3, //TODO: Restore when certs will be done
   // ReadOnlyRoom: 4, //TODO: Restore when certs will be done
   PublicRoom: 6,
+  VirtualDataRoom: 7,
   CustomRoom: 5,
 });
 

packages/components/room-logo/index.js

@@ -10,6 +10,7 @@ import FillingFormSvg32Url from "PUBLIC_DIR/images/icons/32/room/filling.form.sv
 import ReviewSvg32Url from "PUBLIC_DIR/images/icons/32/room/review.svg?url";
 import ViewOnlySvg32Url from "PUBLIC_DIR/images/icons/32/room/view.only.svg?url";
 import PublicRoomSvg32Url from "PUBLIC_DIR/images/icons/32/room/public.svg?url";
+import VirtualDataRoomRoomSvg32Url from "PUBLIC_DIR/images/icons/32/room/virtual-data.svg?url";
 
 import { RoomsType } from "@docspace/common/constants";
 
@@ -47,6 +48,8 @@ const RoomLogo = ({
         return CustomSvg32Url;
       case RoomsType.PublicRoom:
         return PublicRoomSvg32Url;
+      case RoomsType.VirtualDataRoom:
+        return VirtualDataRoomRoomSvg32Url;
       default:
         return "";
     }

public/images/icons/32/room/virtual-data.svg

@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13 9.5C13 8.67157 13.6716 8 14.5 8H17.5C18.3284 8 19 8.67157 19 9.5V10H22C23.1046 10 24 10.8954 24 12V15V16H23H18V14H22V12H19H17H15H13H10V14H14V16H9H8V15V12C8 10.8954 8.89543 10 10 10H13V9.5ZM11 20V17H9V20C9 21.1046 9.89543 22 11 22H21C22.1046 22 23 21.1046 23 20V17H21V20H11ZM17 14H15V17C15 17.5523 15.4477 18 16 18C16.5523 18 17 17.5523 17 17V14Z" fill="#509ADE"/>
+<rect x="1" y="1" width="30" height="30" rx="5" stroke="#509ADE" stroke-width="2"/>
+</svg>