Web: corrected the user type in members, invite panel and selector

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

@@ -3,11 +3,10 @@ import AtReactSvgUrl from "PUBLIC_DIR/images/@.react.svg?url";
 import React, { useState, useEffect } from "react";
 import { Avatar } from "@docspace/shared/components/avatar";
 import { Text } from "@docspace/shared/components/text";
-import { capitalize } from "lodash";
 
 import { parseAddresses } from "@docspace/shared/utils";
 import { getAccessOptions } from "../utils";
-import { getUserRole } from "@docspace/shared/utils/common";
+import { getUserRole, getUserTypeLabel } from "@docspace/shared/utils/common";
 
 import {
   StyledEditInput,
@@ -39,6 +38,7 @@ const Item = ({
   const name = !!avatar ? (displayName !== "" ? displayName : email) : email;
   const source = !!avatar ? avatar : AtReactSvgUrl;
   const role = getUserRole(item);
+  const typeLabel = getUserTypeLabel(role, t);
 
   const [edit, setEdit] = useState(false);
   const [inputValue, setInputValue] = useState(name);
@@ -49,7 +49,7 @@ const Item = ({
   const filteredAccesses = filterUserRoleOptions(accesses, item, true);
 
   const defaultAccess = filteredAccesses.find(
-    (option) => option.access === +access
+    (option) => option.access === +access,
   );
 
   const errorsInList = () => {
@@ -133,7 +133,7 @@ const Item = ({
           color="#A3A9AE"
           truncate
         >
-          {`${capitalize(role)} | ${email}`}
+          {`${typeLabel} | ${email}`}
         </Text>
       </StyledInviteUserBody>
 

packages/client/src/pages/Home/InfoPanel/Body/views/Accounts/index.js

@@ -10,6 +10,7 @@ import { ComboBox } from "@docspace/shared/components/combobox";
 
 import { getUserStatus } from "SRC_DIR/helpers/people-helpers";
 import { StyledAccountContent } from "../../styles/accounts";
+import { getUserTypeLabel } from "@docspace/shared/utils/common";
 
 const Accounts = (props) => {
   const {
@@ -46,21 +47,6 @@ const Accounts = (props) => {
     }
   }, [infoPanelSelection]);
 
-  const getUserTypeLabel = React.useCallback((role) => {
-    switch (role) {
-      case "owner":
-        return t("Common:Owner");
-      case "admin":
-        return t("Common:DocSpaceAdmin");
-      case "manager":
-        return t("Common:RoomAdmin");
-      case "collaborator":
-        return t("Common:PowerUser");
-      case "user":
-        return t("Common:User");
-    }
-  }, []);
-
   const getTypesOptions = React.useCallback(() => {
     const options = [];
 
@@ -128,10 +114,10 @@ const Accounts = (props) => {
         setIsLoading(false);
       }
     },
-    [infoPanelSelection, changeUserType, t]
+    [infoPanelSelection, changeUserType, t],
   );
 
-  const typeLabel = getUserTypeLabel(role);
+  const typeLabel = React.useCallback(() => getUserTypeLabel(role, t), [])();
 
   const renderTypeData = () => {
     const typesOptions = getTypesOptions();
@@ -248,7 +234,7 @@ export default inject(
       getPeopleListItem: usersStore.getPeopleListItem,
       setInfoPanelSelection,
     };
-  }
+  },
 )(
   withTranslation([
     "People",
@@ -263,7 +249,7 @@ export default inject(
     "Translations",
   ])(
     withLoader(observer(Accounts))(
-      <Loaders.InfoPanelViewLoader view="accounts" />
-    )
-  )
+      <Loaders.InfoPanelViewLoader view="accounts" />,
+    ),
+  ),
 );

packages/client/src/pages/Home/InfoPanel/Body/views/Members/User.js

@@ -9,9 +9,8 @@ import { toastr } from "@docspace/shared/components/toast";
 import { isMobileOnly, isMobile } from "react-device-detect";
 import { decode } from "he";
 import { filterUserRoleOptions } from "SRC_DIR/helpers";
-import { capitalize } from "lodash";
 
-import { getUserRole } from "@docspace/shared/utils/common";
+import { getUserRole, getUserTypeLabel } from "@docspace/shared/utils/common";
 import { Text } from "@docspace/shared/components/text";
 import EmailPlusReactSvgUrl from "PUBLIC_DIR/images/e-mail+.react.svg?url";
 import { StyledUserTypeHeader } from "../../styles/members";
@@ -48,7 +47,7 @@ const User = ({
 
   const fullRoomRoleOptions = membersHelper.getOptionsByRoomType(
     infoPanelSelection.roomType,
-    canChangeUserRole
+    canChangeUserRole,
   );
 
   const userRole = membersHelper.getOptionByUserAccess(user.access, user);
@@ -57,7 +56,7 @@ const User = ({
   const onRepeatInvitation = async () => {
     resendEmailInvitations(infoPanelSelection.id, true)
       .then(() =>
-        toastr.success(t("PeopleTranslations:SuccessSentMultipleInvitatios"))
+        toastr.success(t("PeopleTranslations:SuccessSentMultipleInvitatios")),
       )
       .catch((err) => toastr.error(err));
   };
@@ -77,10 +76,10 @@ const User = ({
           const newMembers = {
             users: infoPanelMembers.users?.filter((m) => m.id !== user.id),
             administrators: infoPanelMembers.administrators?.filter(
-              (m) => m.id !== user.id
+              (m) => m.id !== user.id,
             ),
             expected: infoPanelMembers.expected?.filter(
-              (m) => m.id !== user.id
+              (m) => m.id !== user.id,
             ),
           };
 
@@ -129,13 +128,13 @@ const User = ({
           setInfoPanelMembers({
             roomId: infoPanelSelection.id,
             users: infoPanelMembers.users?.map((m) =>
-              m.id === user.id ? { ...m, access: option.access } : m
+              m.id === user.id ? { ...m, access: option.access } : m,
             ),
             administrators: infoPanelMembers.administrators?.map((m) =>
-              m.id === user.id ? { ...m, access: option.access } : m
+              m.id === user.id ? { ...m, access: option.access } : m,
             ),
             expected: infoPanelMembers.expected?.map((m) =>
-              m.id === user.id ? { ...m, access: option.access } : m
+              m.id === user.id ? { ...m, access: option.access } : m,
             ),
           });
         }
@@ -182,6 +181,8 @@ const User = ({
   const onToggle = (e, isOpen) => {
     // setIsScrollLocked(isOpen);
   };
+  const role = getUserRole(user);
+  const typeLabel = getUserTypeLabel(role, t);
 
   const getTooltipContent = () => (
     <div>
@@ -197,15 +198,13 @@ const User = ({
         color="#A3A9AE !important"
         dir="auto"
       >
-        {`${capitalize(role)} | ${user.email}`}
+        {`${typeLabel} | ${user.email}`}
       </Text>
     </div>
   );
 
   const userAvatar = user.hasAvatar ? user.avatar : DefaultUserPhotoUrl;
 
-  const role = getUserRole(user);
-
   const withTooltip = user.isOwner || user.isAdmin;
 
   const uniqueTooltipId = `userTooltip_${Math.random()}`;
@@ -269,7 +268,7 @@ const User = ({
             color="#A3A9AE"
             dir="auto"
           >
-            {`${capitalize(role)} | ${user.email}`}
+            {`${typeLabel} | ${user.email}`}
           </Text>
         </div>
       </div>

packages/client/src/pages/Home/Section/AccountsBody/TableView/TableRow.js

@@ -14,6 +14,7 @@ import withContent from "SRC_DIR/HOCs/withPeopleContent";
 
 import Badges from "../Badges";
 import { Base } from "@docspace/shared/themes";
+import { getUserTypeLabel } from "@docspace/shared/utils/common";
 
 const StyledWrapper = styled.div`
   display: contents;
@@ -308,7 +309,7 @@ const PeopleTableRow = (props) => {
         setIsLoading(false);
       }
     },
-    [item, changeUserType]
+    [item, changeUserType],
   );
 
   // const getRoomsOptions = React.useCallback(() => {
@@ -328,22 +329,7 @@ const PeopleTableRow = (props) => {
   //   return <>{options.map((option) => option)}</>;
   // }, []);
 
-  const getUserTypeLabel = React.useCallback((role) => {
-    switch (role) {
-      case "owner":
-        return t("Common:Owner");
-      case "admin":
-        return t("Common:DocSpaceAdmin");
-      case "manager":
-        return t("Common:RoomAdmin");
-      case "collaborator":
-        return t("Common:PowerUser");
-      case "user":
-        return t("Common:User");
-    }
-  }, []);
-
-  const typeLabel = getUserTypeLabel(role);
+  const typeLabel = React.useCallback(() => getUserTypeLabel(role, t), [])();
 
   const isChecked = checkedProps.checked;
 
@@ -532,5 +518,5 @@ const PeopleTableRow = (props) => {
 };
 
 export default withTranslation(["People", "Common", "Settings"])(
-  withContent(PeopleTableRow)
+  withContent(PeopleTableRow),
 );

packages/shared/components/selector/sub-components/Item.tsx

@@ -1,5 +1,6 @@
 import React from "react";
-
+import { useTranslation } from "react-i18next";
+import { getUserTypeLabel } from "../../../utils/common";
 import { Avatar, AvatarRole, AvatarSize } from "../../avatar";
 import { Text } from "../../text";
 import { Checkbox } from "../../checkbox";
@@ -36,6 +37,7 @@ const Item = React.memo(({ index, style, data }: ItemProps) => {
     rowLoader,
     renderCustomItem,
   }: Data = data;
+  const { t } = useTranslation(["Common"]);
 
   const isLoaded = isItemLoaded(index);
 
@@ -50,6 +52,8 @@ const Item = React.memo(({ index, style, data }: ItemProps) => {
 
     const currentRole = role || AvatarRole.user;
 
+    const typeLabel = getUserTypeLabel(role, t);
+
     const defaultIcon = !!color;
     const isLogo = !!icon || defaultIcon;
 
@@ -94,7 +98,7 @@ const Item = React.memo(({ index, style, data }: ItemProps) => {
           />
         )}
         {renderCustomItem ? (
-          renderCustomItem(label, role, email)
+          renderCustomItem(label, typeLabel, email)
         ) : (
           <Text
             className="label"