Web: Client: InvitePanel: Added descriptions

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

@@ -1,10 +1,14 @@
 {
   "EmailErrorMessage": "Email address not valid. You can edit the email by clicking on it.",
-  "IndividualInvitation": "Individual invitation",
   "InviteAccountSearchPlaceholder": "Invite people by email",
   "InviteRoomSearchPlaceholder": "Invite people by name or email",
-  "InviteUsersToRoom": "Invite users to room",
   "Invited": "Invited",
   "LinkCopySuccess": "Link has been copied",
-  "SendInvitation": "Send invitation"
+  "SendInvitation": "Send invitation",
+  "InviteViaLink": "Invite via link",
+  "InviteViaLinkDescription": "Create a universal link for self-authorization in {{moduleName}}",
+  "ModuleName": "the room",
+  "AddManually": "Add manually",
+  "AddManuallyDescriptionRoom": "Add existing DocSpace users to the room using the names or invite new users personally via email",
+  "AddManuallyDescriptionAccounts": "Invite new users to DocSpace personally via email"
 }

packages/client/public/locales/ru/InviteDialog.json

@@ -1,10 +1,14 @@
 {
   "EmailErrorMessage": "Адрес электронной почты недействителен. Вы можете отредактировать адрес, нажав на него.",
-  "IndividualInvitation": "Индивидуальное приглашение",
   "InviteAccountSearchPlaceholder": "Пригласить людей по электронной почте",
   "InviteRoomSearchPlaceholder": "Приглашайте людей по имени или электронной почте",
-  "InviteUsersToRoom": "Пригласить пользователей в комнату",
   "Invited": "Приглашен",
   "LinkCopySuccess": "Ссылка скопирована",
-  "SendInvitation": "Выслать приглашение"
+  "SendInvitation": "Выслать приглашение",
+  "InviteViaLink": "Пригласить по ссылке",
+  "InviteViaLinkDescription": "Создать универсальную ссылку для самостоятельной авторизации в {{moduleName}}",
+  "ModuleName": "комнате",
+  "AddManually": "Добавить вручную",
+  "AddManuallyDescriptionRoom": "Добавьте существующих пользователей DocSpace в комнату используя имена или лично пригласите новых пользователей по электронной почте",
+  "AddManuallyDescriptionAccounts": "Приглашайте новых пользователей в DocSpace лично по электронной почте"
 }

packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js

@@ -49,7 +49,7 @@ const StyledSubHeader = styled(Heading)`
   font-size: 16px;
   padding-left: 16px;
   padding-right: 16px;
-  margin: 16px 0;
+  margin: 16px 0 8px 0;
 
   ${(props) =>
     props.inline &&
@@ -60,6 +60,20 @@ const StyledSubHeader = styled(Heading)`
     `};
 `;
 
+const StyledDescription = styled(Text)`
+  padding-left: 16px;
+  padding-right: 16px;
+  color: ${(props) =>
+    props.theme.createEditRoomDialog.commonParam.descriptionColor};
+  margin-bottom: 16px;
+
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+`;
+
+StyledDescription.defaultProps = { theme: Base };
+
 const StyledRow = styled.div`
   width: calc(100% - 32px) !important;
 
@@ -252,4 +266,5 @@ export {
   StyledAccessSelector,
   StyledToggleButton,
   StyledText,
+  StyledDescription,
 };

packages/client/src/components/panels/InvitePanel/index.js

@@ -199,9 +199,7 @@ const InvitePanel = ({
         zIndex={310}
       >
         <StyledBlock>
-          <StyledHeading>
-            {roomId === -1 ? t("Common:InviteUsers") : t("InviteUsersToRoom")}
-          </StyledHeading>
+          <StyledHeading>{t("Common:InviteUsers")}</StyledHeading>
         </StyledBlock>
 
         <ExternalLinks

packages/client/src/components/panels/InvitePanel/sub-components/ExternalLinks.js

@@ -20,6 +20,7 @@ import {
   StyledInviteInput,
   StyledInviteInputContainer,
   StyledToggleButton,
+  StyledDescription,
 } from "../StyledInvitePanel";
 
 const ExternalLinks = ({
@@ -156,7 +157,7 @@ const ExternalLinks = ({
   return (
     <StyledBlock noPadding ref={inputsRef}>
       <StyledSubHeader inline>
-        {t("SharingPanel:ExternalLink")}
+        {t("InviteViaLink")}
         {false && ( //TODO: Change to linksVisible after added link information from backend
           <div style={{ position: "relative" }}>
             <IconButton
@@ -186,6 +187,11 @@ const ExternalLinks = ({
         )}
         <StyledToggleButton isChecked={linksVisible} onChange={toggleLinks} />
       </StyledSubHeader>
+      <StyledDescription>
+        {t("InviteViaLinkDescription", {
+          moduleName: roomId === -1 ? "DocSpace" : t("ModuleName"),
+        })}
+      </StyledDescription>
       {linksVisible && (
         <StyledInviteInputContainer key={activeLink.id}>
           <StyledInviteInput>

packages/client/src/components/panels/InvitePanel/sub-components/InviteInput.js

@@ -21,6 +21,7 @@ import {
   StyledInviteInputContainer,
   StyledDropDown,
   SearchItemText,
+  StyledDescription,
 } from "../StyledInvitePanel";
 
 const InviteInput = ({
@@ -223,7 +224,7 @@ const InviteInput = ({
   return (
     <>
       <StyledSubHeader>
-        {t("IndividualInvitation")}
+        {t("AddManually")}
         {!hideSelector && (
           <StyledLink
             fontWeight="600"
@@ -235,6 +236,11 @@ const InviteInput = ({
           </StyledLink>
         )}
       </StyledSubHeader>
+      <StyledDescription>
+        {roomId === -1
+          ? t("AddManuallyDescriptionAccounts")
+          : t("AddManuallyDescriptionRoom")}
+      </StyledDescription>
 
       <StyledInviteInputContainer ref={inputsRef}>
         <StyledInviteInput ref={searchRef}>