@vtex/faststore-plugin-buyer-portal 2.0.13 → 2.0.14

package/src/features/users/components/LoginField/LoginField.tsx

@@ -1,4 +1,5 @@
 import { ErrorMessage, InputText } from "../../../shared/components";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import {
   maskPhoneNumber,
   normalizePhoneNumber,
@@ -12,8 +13,6 @@ export interface LoginFieldProps {
   "data-testid"?: string;
 }
 
-const LOGIN_REQUIRED_MSG = "Login is required";
-
 export const LoginField = ({
   value,
   onChange,
@@ -22,6 +21,7 @@ export const LoginField = ({
 }: LoginFieldProps) => {
   const hasError = isTouched && !value.trim();
   const isPhone = detectLoginType(value) === "phone";
+  const { t } = useLocalization();
 
   // TODO: Update country when implementing i18n
   const displayValue = isPhone ? maskPhoneNumber(value, "USA") : value;
@@ -37,7 +37,7 @@ export const LoginField = ({
   return (
     <>
       <InputText
-        label="Login (e-mail, phone or username)"
+        label={t("users.forms.login")}
         value={displayValue}
         hasError={hasError}
         data-testid={testId}
@@ -46,7 +46,7 @@ export const LoginField = ({
       />
       {hasError && (
         <div id="login-error">
-          <ErrorMessage show message={LOGIN_REQUIRED_MSG} />
+          <ErrorMessage show message={t("users.validation.loginRequired")} />
         </div>
       )}
     </>

package/src/features/users/components/ReassignOrgUnitDrawer/ReassignOrgUnitDrawer.tsx

@@ -10,8 +10,8 @@ import {
   type BasicDrawerProps,
 } from "../../../shared/components";
 import { OptionSelected } from "../../../shared/components/OptionSelected/OptionSelected";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
-import { CHANGES_TIMEOUT_MESSAGE } from "../../../shared/utils/constants";
 import { useDebouncedSearchOrgUnit, useReassignUser } from "../../hooks";
 
 export type ReassignOrgUnitDrawerProps = Omit<BasicDrawerProps, "children"> & {
@@ -35,6 +35,7 @@ export const ReassignOrgUnitDrawer = ({
 
   const { orgUnit } = useOrgUnitByUser(user.id);
   const { pushToast } = useUI();
+  const { t } = useLocalization();
 
   const { searchedOrgUnits } = useDebouncedSearchOrgUnit(
     autocompleteInputValue
@@ -42,7 +43,9 @@ export const ReassignOrgUnitDrawer = ({
 
   const handleReassignNewOrgUnitSuccess = () => {
     pushToast({
-      message: `User successfully edited\n${CHANGES_TIMEOUT_MESSAGE}`,
+      message: `${t("users.reassign.toasts.userSuccessfullyEdited")}\n${t(
+        "shared.messages.changesTimeout"
+      )}`,
       status: "INFO",
     });
     onReassing?.();
@@ -53,7 +56,7 @@ export const ReassignOrgUnitDrawer = ({
     onSuccess: handleReassignNewOrgUnitSuccess,
     onError: () => {
       pushToast({
-        message: "An error occurred while reassigning the organizational unit",
+        message: t("users.reassign.errors.failedToReassign"),
         status: "ERROR",
       });
     },
@@ -78,22 +81,22 @@ export const ReassignOrgUnitDrawer = ({
   return (
     <BasicDrawer data-fs-bp-reassign-user-drawer close={close} {...props}>
       <BasicDrawer.Heading
-        title="Change user organizational unit"
+        title={t("users.reassign.drawerTitle")}
         onClose={close}
       />
       <BasicDrawer.Body data-fs-bp-reassign-user-drawer-body>
         <p>
-          Users can belong to only one Organizational Unit. Search and select a
-          new unit for{" "}
-          <a
-            href={buyerPortalRoutes.userDetails({
-              orgUnitId: orgUnit?.id || "",
-              userId: user.id,
-            })}
-          >
-            {user.name}
-          </a>
-          .
+          {t("users.reassign.messages.selectNewUnit", [
+            <a
+              key="user-name"
+              href={buyerPortalRoutes.userDetails({
+                orgUnitId: orgUnit?.id || "",
+                userId: user.id,
+              })}
+            >
+              {user.name}
+            </a>,
+          ])}
         </p>
         <br />
 
@@ -110,7 +113,7 @@ export const ReassignOrgUnitDrawer = ({
           />
         ) : (
           <AutocompleteDropdown
-            label="Search organizational units"
+            label={t("users.reassign.forms.searchOrganizationalUnits")}
             value={autocompleteInputValue}
             options={searchedOrgUnits}
             onConfirmKeyPress={(option) => setNewOrgUnit(option)}
@@ -137,12 +140,12 @@ export const ReassignOrgUnitDrawer = ({
 
         <ErrorMessage
           show={isTouched && !newOrgUnit.name?.trim()}
-          message="New Organizational unit is required"
+          message={t("users.reassign.validation.newOrgUnitRequired")}
         />
       </BasicDrawer.Body>
       <BasicDrawer.Footer>
         <BasicDrawer.Button variant="ghost" onClick={close}>
-          Cancel
+          {t("shared.buttons.cancel")}
         </BasicDrawer.Button>
         <BasicDrawer.Button
           variant="confirm"
@@ -150,7 +153,7 @@ export const ReassignOrgUnitDrawer = ({
           onClick={handleConfirmClick}
           isLoading={isReassignUserLoading}
         >
-          Save
+          {t("shared.buttons.save")}
         </BasicDrawer.Button>
       </BasicDrawer.Footer>
     </BasicDrawer>

package/src/features/users/components/ResetPasswordDrawer/ResetPasswordDrawer.tsx

@@ -8,6 +8,7 @@ import {
   type BasicDrawerProps,
 } from "../../../shared/components";
 import { useBuyerPortal } from "../../../shared/hooks";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { useResetPassword } from "../../hooks";
 
 type DrawerState = "CONFIRM_RESET" | "ACCESS_TOKEN_DISPLAY";
@@ -26,6 +27,7 @@ export const ResetPasswordDrawer = ({
 }: ResetPasswordDrawerProps) => {
   const { pushToast } = useUI();
   const { currentOrgUnit } = useBuyerPortal();
+  const { t } = useLocalization();
 
   const [drawerState, setDrawerState] = useState<DrawerState>("CONFIRM_RESET");
   const [accessToken, setAccessToken] = useState<string>("");
@@ -41,10 +43,10 @@ export const ResetPasswordDrawer = ({
 
   const handleResetPasswordError = useCallback(() => {
     pushToast({
-      message: "Failed to reset password. Please try again.",
+      message: t("users.reset.errors.failedToResetPassword"),
       status: "ERROR",
     });
-  }, [pushToast]);
+  }, [pushToast, t]);
 
   const { resetPassword, isResetPasswordLoading } = useResetPassword({
     onSuccess: handleResetPasswordSuccess,
@@ -63,12 +65,12 @@ export const ResetPasswordDrawer = ({
       await navigator.clipboard.writeText(accessToken);
       setHasTokenBeenCopied(true);
       pushToast({
-        message: "Access code copied to clipboard",
+        message: t("users.reset.toasts.accessCodeCopied"),
         status: "INFO",
       });
     } catch {
       pushToast({
-        message: "Failed to copy access code",
+        message: t("users.reset.toasts.failedToCopyAccessCode"),
         status: "ERROR",
       });
     }
@@ -90,23 +92,23 @@ export const ResetPasswordDrawer = ({
     >
       {drawerState === "CONFIRM_RESET" && (
         <>
-          <BasicDrawer.Heading title="Reset password" onClose={close} />
+          <BasicDrawer.Heading
+            title={t("users.reset.drawerTitle")}
+            onClose={close}
+          />
           <BasicDrawer.Body data-fs-bp-reset-password-drawer-body>
-            <p>
-              Are you sure you want to reset this user&apos;s password? The old
-              password will be deactivated immediately.
-            </p>
+            <p>{t("users.reset.messages.confirmResetPassword")}</p>
           </BasicDrawer.Body>
           <BasicDrawer.Footer>
             <BasicDrawer.Button variant="ghost" onClick={close}>
-              Cancel
+              {t("shared.buttons.cancel")}
             </BasicDrawer.Button>
             <BasicDrawer.Button
               variant="confirm"
               onClick={handleResetClick}
               isLoading={isResetPasswordLoading}
             >
-              Reset
+              {t("users.reset.buttons.reset")}
             </BasicDrawer.Button>
           </BasicDrawer.Footer>
         </>
@@ -118,17 +120,10 @@ export const ResetPasswordDrawer = ({
           <BasicDrawer.Body data-fs-bp-reset-password-access-token-body>
             <AccessTokenDisplay
               accessToken={accessToken}
-              title="Password reset successfully"
+              title={t("users.reset.messages.passwordResetSuccessfully")}
               description={
                 <p>
-                  A temporary access code has been generated. <br />
-                  Share it with the user, as they have no individual email
-                  registered.
-                  <br />
-                  <br />
-                  The code expires in 12 hours. Copy it before closing this
-                  window. Once closed, access will be lost and a password reset
-                  will be required.
+                  {t("users.reset.messages.accessCodeGeneratedDescription")}
                 </p>
               }
               hasBeenCopied={hasTokenBeenCopied}
@@ -141,7 +136,7 @@ export const ResetPasswordDrawer = ({
               onClick={handleClose}
               disabled={!hasTokenBeenCopied}
             >
-              Done
+              {t("shared.buttons.done")}
             </BasicDrawer.Button>
           </BasicDrawer.Footer>
         </>

package/src/features/users/components/UpdateUserDrawer/UpdateUserDrawer.tsx

@@ -11,9 +11,9 @@ import {
   InputText,
 } from "../../../shared/components";
 import { useAnalytics } from "../../../shared/hooks";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { ANALYTICS_EVENTS } from "../../../shared/services/logger/analytics/constants";
 import { isValidEmail } from "../../../shared/utils";
-import { CHANGES_TIMEOUT_MESSAGE } from "../../../shared/utils/constants";
 import {
   maskPhoneNumber,
   normalizePhoneNumber,
@@ -36,6 +36,7 @@ export const UpdateUserDrawer = ({
   ...props
 }: UpdateUserDrawerProps) => {
   const { pushToast } = useUI();
+  const { t } = useLocalization();
   const { trackEntityEdited, trackEntityEditError } = useAnalytics({
     entityType: "user",
     entityId: userId,
@@ -59,7 +60,7 @@ export const UpdateUserDrawer = ({
       },
       onError: () => {
         pushToast({
-          message: "Failed to fetch user details",
+          message: t("users.update.errors.failedToFetchUserDetails"),
           status: "ERROR",
         });
       },
@@ -104,7 +105,9 @@ export const UpdateUserDrawer = ({
     });
 
     pushToast({
-      message: `User successfully updated\n${CHANGES_TIMEOUT_MESSAGE}`,
+      message: `${t("users.update.toasts.userSuccessfullyUpdated")}\n${t(
+        "shared.messages.changesTimeout"
+      )}`,
       status: "INFO",
     });
     onUpdate?.();
@@ -125,7 +128,7 @@ export const UpdateUserDrawer = ({
       );
 
       pushToast({
-        message: "Failed to update user",
+        message: t("users.update.errors.failedToUpdateUser"),
         status: "ERROR",
       });
     },
@@ -145,7 +148,7 @@ export const UpdateUserDrawer = ({
       );
 
       pushToast({
-        message: "Failed to update user",
+        message: t("users.update.errors.failedToUpdateUser"),
         status: "ERROR",
       });
     },
@@ -199,14 +202,17 @@ export const UpdateUserDrawer = ({
 
   return (
     <BasicDrawer data-fs-bp-update-user-drawer close={close} {...props}>
-      <BasicDrawer.Heading title="Edit user details" onClose={close} />
+      <BasicDrawer.Heading
+        title={t("users.edit.drawerTitle")}
+        onClose={close}
+      />
 
       <BasicDrawer.Body>
         {isUserLoading ? (
           <Skeleton size={{ width: "100%", height: "3.5rem" }} />
         ) : (
           <InputText
-            label="Full Name"
+            label={t("users.forms.fullName")}
             value={name}
             hasError={isTouched && !name?.trim()}
             onChange={(event) => updateField("name", event.target.value)}
@@ -215,7 +221,7 @@ export const UpdateUserDrawer = ({
 
         <ErrorMessage
           show={isTouched && !name?.trim()}
-          message="Full name is required"
+          message={t("users.validation.fullNameRequired")}
         />
 
         {isUserLoading ? (
@@ -230,7 +236,7 @@ export const UpdateUserDrawer = ({
           />
         ) : (
           <InputText
-            label="E-mail"
+            label={t("users.forms.email")}
             value={email}
             wrapperProps={{ style: { marginTop: 16, marginBottom: 16 } }}
             hasError={isTouched && (emailMissing || emailInvalid)}
@@ -246,7 +252,11 @@ export const UpdateUserDrawer = ({
 
         <ErrorMessage
           show={isTouched && (emailMissing || emailInvalid)}
-          message={emailMissing ? "E-mail is required" : "E-mail is invalid"}
+          message={
+            emailMissing
+              ? t("users.validation.emailRequired")
+              : t("users.validation.emailInvalid")
+          }
         />
 
         {isUserLoading ? (
@@ -261,17 +271,18 @@ export const UpdateUserDrawer = ({
           />
         ) : (
           <InputText
-            label="Phone number (optional)"
+            label={t("users.forms.phoneNumberOptional")}
             value={maskPhoneNumber(phone, "USA")}
             onChange={(event) =>
-              // TODO: Update this when implementing i18n
               updateField("phone", normalizePhoneNumber(event.target.value))
             }
           />
         )}
 
         <div data-fs-bp-update-user-roles>
-          <span data-fs-bp-update-user-roles-label>Roles</span>
+          <span data-fs-bp-update-user-roles-label>
+            {t("users.forms.roles")}
+          </span>
           {rolesOptions &&
             rolesOptions.map((role) => {
               if (isUserLoading) {
@@ -309,7 +320,7 @@ export const UpdateUserDrawer = ({
       </BasicDrawer.Body>
       <BasicDrawer.Footer>
         <BasicDrawer.Button variant="ghost" onClick={close}>
-          Cancel
+          {t("shared.buttons.cancel")}
         </BasicDrawer.Button>
         <BasicDrawer.Button
           variant="confirm"
@@ -317,7 +328,7 @@ export const UpdateUserDrawer = ({
           onClick={handleConfirmClick}
           isLoading={isLoading}
         >
-          Save
+          {t("shared.buttons.save")}
         </BasicDrawer.Button>
       </BasicDrawer.Footer>
     </BasicDrawer>

package/src/features/users/components/UpdateUserDrawerWithUsername/UpdateUserDrawerWithUsername.tsx

@@ -6,9 +6,9 @@ import { useUpdateRoles } from "../../../roles/hooks";
 import { RoleData, UserRoles } from "../../../roles/types";
 import { type BasicDrawerProps, BasicDrawer } from "../../../shared/components";
 import { useAnalytics } from "../../../shared/hooks";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { ANALYTICS_EVENTS } from "../../../shared/services/logger/analytics/constants";
 import { isValidEmail } from "../../../shared/utils";
-import { CHANGES_TIMEOUT_MESSAGE } from "../../../shared/utils/constants";
 import { normalizePhoneNumber } from "../../../shared/utils/phoneNumber";
 import { useGetUserById, useUpdateUser } from "../../hooks";
 import { detectLoginType } from "../../utils/detectLoginType";
@@ -46,6 +46,7 @@ export const UpdateUserDrawerWithUsername = ({
   ...props
 }: UpdateUserDrawerWithUsernameProps) => {
   const { pushToast } = useUI();
+  const { t } = useLocalization();
   const { trackEntityEdited, trackEntityEditError } = useAnalytics({
     entityType: "user",
     entityId: userId,
@@ -87,7 +88,7 @@ export const UpdateUserDrawerWithUsername = ({
       },
       onError: () => {
         pushToast({
-          message: "Failed to fetch user details",
+          message: t("users.update.errors.failedToFetchUserDetails"),
           status: "ERROR",
         });
       },
@@ -154,7 +155,9 @@ export const UpdateUserDrawerWithUsername = ({
     });
 
     pushToast({
-      message: `User successfully updated\n${CHANGES_TIMEOUT_MESSAGE}`,
+      message: `${t("users.update.toasts.userSuccessfullyUpdated")}\n${t(
+        "shared.messages.changesTimeout"
+      )}`,
       status: "INFO",
     });
     onUpdate?.();
@@ -171,7 +174,11 @@ export const UpdateUserDrawerWithUsername = ({
         error,
         { org_unit_id: orgUnitId }
       );
-      pushToast({ message: "Failed to update user", status: "ERROR" });
+
+      pushToast({
+        message: t("users.update.errors.failedToUpdateUser"),
+        status: "ERROR",
+      });
     },
   });
 
@@ -185,7 +192,11 @@ export const UpdateUserDrawerWithUsername = ({
         error,
         { org_unit_id: orgUnitId }
       );
-      pushToast({ message: "Failed to update user", status: "ERROR" });
+
+      pushToast({
+        message: t("users.update.errors.failedToUpdateUser"),
+        status: "ERROR",
+      });
     },
   });
 
@@ -247,7 +258,10 @@ export const UpdateUserDrawerWithUsername = ({
       close={close}
       {...props}
     >
-      <BasicDrawer.Heading title="Edit user details" onClose={close} />
+      <BasicDrawer.Heading
+        title={t("users.edit.drawerTitle")}
+        onClose={close}
+      />
 
       <BasicDrawer.Body>
         <UserFormFields
@@ -265,7 +279,7 @@ export const UpdateUserDrawerWithUsername = ({
 
       <BasicDrawer.Footer>
         <BasicDrawer.Button variant="ghost" onClick={close}>
-          Cancel
+          {t("shared.buttons.cancel")}
         </BasicDrawer.Button>
         <BasicDrawer.Button
           variant="confirm"
@@ -273,7 +287,7 @@ export const UpdateUserDrawerWithUsername = ({
           onClick={handleConfirmClick}
           isLoading={isLoading}
         >
-          Save
+          {t("shared.buttons.save")}
         </BasicDrawer.Button>
       </BasicDrawer.Footer>
     </BasicDrawer>

package/src/features/users/components/UserDropdownMenu/UserDropdownMenu.tsx

@@ -4,6 +4,7 @@ import { DropdownItem } from "@faststore/ui";
 
 import { BasicDropdownMenu, Icon } from "../../../shared/components";
 import { useBuyerPortal, useDrawerProps } from "../../../shared/hooks";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
 import { DeleteUserDrawer } from "../DeleteUserDrawer/DeleteUserDrawer";
 import { ReassignOrgUnitDrawer } from "../ReassignOrgUnitDrawer/ReassignOrgUnitDrawer";
@@ -30,6 +31,7 @@ export const UserDropdownMenu = ({
   const route = useRouter();
 
   const { currentOrgUnit, featureFlags } = useBuyerPortal();
+  const { t } = useLocalization();
 
   const {
     open: openReassignOrgUnitDrawer,
@@ -73,23 +75,23 @@ export const UserDropdownMenu = ({
               }
             >
               <Icon name="OpenInNew" {...sizeProps} />
-              Open
+              {t("users.dropdown.open")}
             </DropdownItem>
             <DropdownItem onClick={openUpdateUser}>
               <Icon name="Edit" {...sizeProps} />
-              Edit details
+              {t("users.actions.editDetails")}
             </DropdownItem>
           </>
         )}
         {featureFlags?.enableAlternativeLogin && (
           <DropdownItem onClick={openResetPassword}>
             <Icon name="ResetPassword" {...sizeProps} />
-            Reset password
+            {t("users.dropdown.resetPassword")}
           </DropdownItem>
         )}
         <DropdownItem onClick={openReassignOrgUnitDrawer}>
           <Icon name="DriveFileMove" {...sizeProps} />
-          Change organizational unit
+          {t("users.dropdown.changeOrganizationalUnit")}
         </DropdownItem>
         <BasicDropdownMenu.Separator />
         <DropdownItem
@@ -97,7 +99,7 @@ export const UserDropdownMenu = ({
           data-fs-bp-dropdown-menu-item-mode="danger"
         >
           <Icon name="Delete" {...sizeProps} />
-          Delete
+          {t("shared.buttons.delete")}
         </DropdownItem>
       </BasicDropdownMenu>
       {isDeleteUserDrawerOpen && (

package/src/features/users/components/UserFormFields/UserFormFields.tsx

@@ -1,6 +1,7 @@
 import { Alert, CheckboxField, Skeleton } from "@faststore/ui";
 
 import { ErrorMessage, Icon, InputText } from "../../../shared/components";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { isValidEmail } from "../../../shared/utils";
 import {
   maskPhoneNumber,
@@ -61,6 +62,7 @@ export const UserFormFields = ({
   setIsLoginTouched,
   loginTestId,
 }: UserFormFieldsProps) => {
+  const { t } = useLocalization();
   const {
     login,
     name,
@@ -98,7 +100,7 @@ export const UserFormFields = ({
         />
       ) : (
         <InputText
-          label="Full Name (optional)"
+          label={t("users.forms.fullNameOptional")}
           value={name}
           wrapperProps={{ style: { marginBottom: 16 } }}
           onChange={(event) => updateField("name", event.target.value)}
@@ -146,7 +148,7 @@ export const UserFormFields = ({
           />
         ) : (
           <InputText
-            label="Phone number (optional)"
+            label={t("users.forms.phoneNumberOptional")}
             value={maskPhoneNumber(phone, "USA")}
             wrapperProps={{ style: { marginTop: 16 } }}
             onChange={(event) =>
@@ -164,7 +166,7 @@ export const UserFormFields = ({
           />
         ) : (
           <InputText
-            label="E-mail (optional)"
+            label={t("users.forms.emailOptional")}
             value={email}
             type="email"
             wrapperProps={{ style: { marginTop: 16 } }}
@@ -180,7 +182,7 @@ export const UserFormFields = ({
           show={
             isTouched && Boolean(trimmedEmail) && !isValidEmail(trimmedEmail)
           }
-          message="E-mail is invalid"
+          message={t("users.validation.emailInvalid")}
         />
       )}
 
@@ -190,8 +192,7 @@ export const UserFormFields = ({
           icon={<Icon name="WarningCircle" height={16} width={16} />}
           style={{ marginTop: 16 }}
         >
-          If no valid e-mail is provided, only an administrator can recover
-          access (no SMS recovery available)
+          {t("users.validation.recoveryEmailRequired")}
         </Alert>
       )}
 
@@ -203,7 +204,7 @@ export const UserFormFields = ({
               : "data-fs-bp-update-user-roles-label"]: true,
           }}
         >
-          Roles
+          {t("layouts.titles.roles")}
         </span>
 
         {rolesOptions &&
@@ -245,7 +246,7 @@ export const UserFormFields = ({
 
         <ErrorMessage
           show={isTouched && roles.length === 0}
-          message="At least one role is required"
+          message={t("users.validation.atLeastOneRoleRequired")}
         />
       </div>
     </>

package/src/features/users/components/UsersCard/UsersCard.tsx

@@ -3,6 +3,7 @@ import { Dropdown, DropdownButton } from "@faststore/ui";
 import { useGetRolesOptions } from "../../../roles/hooks";
 import { BasicCard, Icon } from "../../../shared/components";
 import { useDrawerProps } from "../../../shared/hooks";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { CreateUserDrawerSelector } from "../CreateUserDrawerSelector/CreateUserDrawerSelector";
 import { UserDropdownMenu } from "../UserDropdownMenu/UserDropdownMenu";
 
@@ -24,15 +25,16 @@ export default function UsersCard({ users = [], orgUnitData }: UsersCardProps) {
   } = useDrawerProps();
 
   const { rolesOptions } = useGetRolesOptions(orgUnitData?.id ?? "");
+  const { t } = useLocalization();
 
   return (
     <>
       <BasicCard
         footerLink={`/users${orgUnitData?.id ? `/${orgUnitData.id}` : ""}`}
-        footerMessage="Manage users"
+        footerMessage={t("users.components.UsersCard.manageUsers")}
         subTitle={users.length ?? 0}
         onPlusIconClick={openCreateUserDrawer}
-        title="Users"
+        title={t("users.titles.users")}
       >
         {users.length > 0 &&
           users.slice(0, 3).map((user) => {