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

package/src/features/org-units/components/CreateOrgUnitDrawer/CreateOrgUnitDrawer.tsx

@@ -13,9 +13,9 @@ import {
   Icon,
 } from "../../../shared/components";
 import { useAnalytics, useBuyerPortal } from "../../../shared/hooks";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { ANALYTICS_EVENTS } from "../../../shared/services/logger/analytics/constants";
 import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
-import { CHANGES_TIMEOUT_MESSAGE } from "../../../shared/utils/constants";
 import { resolveContractId } from "../../../shared/utils/resolveContractId";
 import { useCreateNewOrgUnit } from "../../hooks";
 
@@ -44,6 +44,7 @@ export const CreateOrgUnitDrawer = ({
     currentContract,
     currentOrgUnit,
   });
+  const { t } = useLocalization();
   const { trackEntityCreated, trackEntityCreateError } = useAnalytics({
     entityType: "org_unit",
     defaultTimerName: "org_unit_creation",
@@ -67,7 +68,9 @@ export const CreateOrgUnitDrawer = ({
     });
 
     pushToast({
-      message: `Organizational unit added successfully\n${CHANGES_TIMEOUT_MESSAGE}`,
+      message: `${t("orgUnits.toasts.createSuccess")}\n${t(
+        "shared.messages.changesTimeout"
+      )}`,
       status: "INFO",
       icon: (
         <button
@@ -82,7 +85,7 @@ export const CreateOrgUnitDrawer = ({
             )
           }
         >
-          View
+          {t("shared.buttons.view")}
         </button>
       ),
     });
@@ -106,14 +109,14 @@ export const CreateOrgUnitDrawer = ({
 
       if (error.code === "InvalidOrganizationUnitName") {
         pushToast({
-          message: "An organizational unit with the same name already exists",
+          message: t("orgUnits.errors.duplicateName"),
           status: "ERROR",
         });
         return;
       }
 
       pushToast({
-        message: "An error occurred while creating the organizational unit",
+        message: t("orgUnits.errors.createFailed"),
         status: "ERROR",
       });
     },
@@ -137,10 +140,13 @@ export const CreateOrgUnitDrawer = ({
 
   return (
     <BasicDrawer data-fs-bp-create-org-unit-drawer close={close} {...props}>
-      <BasicDrawer.Heading title="Create organization unit" onClose={close} />
+      <BasicDrawer.Heading
+        title={t("orgUnits.drawers.create.title")}
+        onClose={close}
+      />
       <BasicDrawer.Body>
         <AutocompleteDropdown
-          label="Parent"
+          label={t("orgUnits.forms.parentLabel")}
           value={parentOrgUnit?.name ?? ""}
           options={options}
           onConfirmKeyPress={(option) => setParentOrgUnit(option)}
@@ -164,11 +170,11 @@ export const CreateOrgUnitDrawer = ({
 
         <ErrorMessage
           show={isTouched && !parentOrgUnit.name?.trim()}
-          message="Parent is required"
+          message={t("orgUnits.validation.parentRequired")}
         />
 
         <InputText
-          label="Name"
+          label={t("shared.labels.name")}
           value={name}
           wrapperProps={{ style: { marginTop: 16 } }}
           hasError={isTouched && !name?.trim()}
@@ -177,12 +183,12 @@ export const CreateOrgUnitDrawer = ({
 
         <ErrorMessage
           show={isTouched && !name?.trim()}
-          message="Name is required"
+          message={t("orgUnits.validation.nameRequired")}
         />
       </BasicDrawer.Body>
       <BasicDrawer.Footer>
         <BasicDrawer.Button variant="ghost" onClick={close}>
-          Cancel
+          {t("shared.buttons.cancel")}
         </BasicDrawer.Button>
         <BasicDrawer.Button
           variant="confirm"
@@ -190,7 +196,7 @@ export const CreateOrgUnitDrawer = ({
           onClick={handleConfirmClick}
           isLoading={isCreateNewOrgUnitLoading}
         >
-          Add
+          {t("orgUnits.buttons.add")}
         </BasicDrawer.Button>
       </BasicDrawer.Footer>
     </BasicDrawer>

package/src/features/org-units/components/DeleteOrgUnitDrawer/DeleteOrgUnitDrawer.tsx

@@ -12,9 +12,9 @@ import {
   type BasicDrawerProps,
 } from "../../../shared/components";
 import { useBuyerPortal, useAnalytics } from "../../../shared/hooks";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { ANALYTICS_EVENTS } from "../../../shared/services/logger/analytics/constants";
 import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
-import { CHANGES_TIMEOUT_MESSAGE } from "../../../shared/utils/constants";
 import { resolveContractId } from "../../../shared/utils/resolveContractId";
 import { useGetUserByOrgUnitId } from "../../../users/hooks/useGetUserByOrgUnitId";
 import { useChildrenOrgUnits } from "../../hooks";
@@ -44,6 +44,7 @@ export const DeleteOrgUnitDrawer = ({
   const { childrenOrgUnits } = useChildrenOrgUnits(id, name);
   const { users } = useGetUserByOrgUnitId(id);
   const { pushToast } = useUI();
+  const { t } = useLocalization();
   const { trackEvent } = useAnalytics({
     entityType: "org_unit",
     entityId: id,
@@ -66,7 +67,9 @@ export const DeleteOrgUnitDrawer = ({
     });
 
     pushToast({
-      message: `Organizational unit deleted successfully\n${CHANGES_TIMEOUT_MESSAGE}`,
+      message: `${t("orgUnits.toasts.deleteSuccess")}\n${t(
+        "shared.messages.changesTimeout"
+      )}`,
       status: "INFO",
     });
 
@@ -112,7 +115,7 @@ export const DeleteOrgUnitDrawer = ({
       });
 
       pushToast({
-        message: "An error occurred while deleting the organizational unit",
+        message: t("orgUnits.errors.deleteFailed"),
         status: "ERROR",
       });
     },
@@ -137,26 +140,28 @@ export const DeleteOrgUnitDrawer = ({
       size={hasChildren ? "large" : "partial"}
       {...props}
     >
-      <BasicDrawer.Heading title="Delete organizational unit" onClose={close} />
+      <BasicDrawer.Heading
+        title={t("orgUnits.drawers.delete.title")}
+        onClose={close}
+      />
       <BasicDrawer.Body>
         {!hasChildren && (
           <>
             <p data-fs-bp-delete-org-unit-drawer-message>
-              Are you sure you want to permanently delete the
-              <span
-                data-fs-bp-delete-org-unit-drawer-message-name
-              >{` ${name}`}</span>
-              ?
+              {t("orgUnits.delete.confirmMessage", [
+                <span key="name" data-fs-bp-delete-org-unit-drawer-message-name>
+                  {name}
+                </span>,
+              ])}
             </p>
             <p data-fs-bp-delete-org-unit-drawer-message>
-              This action will delete all data from this unit.
+              {t("orgUnits.delete.warningDeleteAllData")}
               <br />
-              To confirm this action, please enter the organizational unit name
-              bellow:
+              {t("orgUnits.delete.confirmNamePrompt")}
             </p>
 
             <InputText
-              label="Name"
+              label={t("shared.labels.name")}
               value={confirmName}
               onChange={(e) => setConfirmName(e.target.value)}
               hasError={isTouched && confirmName !== name}
@@ -164,7 +169,7 @@ export const DeleteOrgUnitDrawer = ({
 
             <ErrorMessage
               show={isTouched && confirmName !== name}
-              message="The entered name does not match the organizational unit's name. Please, check and try again."
+              message={t("orgUnits.validation.nameMismatch")}
             />
           </>
         )}
@@ -172,22 +177,16 @@ export const DeleteOrgUnitDrawer = ({
         {hasChildren && (
           <>
             <p data-fs-bp-delete-org-unit-drawer-message>
-              Before deleting
-              <span data-fs-bp-delete-org-unit-drawer-message-name>
-                {` ${name}`}
-              </span>
-              , you must first remove all child organizational units{" "}
-              {users?.length ? "and users" : ""}.
-              <br />
-              Please delete them individually, starting from the lowest level.
-              <br />
-              <br />
-              Once all child units {users?.length ? "and users" : ""} bellow are
-              removed, you’ll be able to delete {name}.
+              {t("orgUnits.delete.hasChildrenMessage", [
+                <span key="name" data-fs-bp-delete-org-unit-drawer-message-name>
+                  {name}
+                </span>,
+                users?.length ? t("orgUnits.delete.andUsers") : "",
+              ])}
             </p>
 
             <span data-fs-bp-delete-org-unit-drawer-subtitle>
-              Organizational Units
+              {t("orgUnits.titles.organizationalUnits")}
             </span>
             {childrenOrgUnits && (
               <OrgUnitsHierarchyTree
@@ -200,14 +199,14 @@ export const DeleteOrgUnitDrawer = ({
       </BasicDrawer.Body>
       <BasicDrawer.Footer>
         <BasicDrawer.Button variant="ghost" onClick={close}>
-          Cancel
+          {t("shared.buttons.cancel")}
         </BasicDrawer.Button>
         <BasicDrawer.Button
           onClick={handleDelete}
           variant={hasChildren ? "confirm" : "danger"}
           isLoading={isDeleteOrgUnitLoading}
         >
-          {hasChildren ? "Ok" : "Delete"}
+          {hasChildren ? t("shared.buttons.ok") : t("shared.buttons.delete")}
         </BasicDrawer.Button>
       </BasicDrawer.Footer>
     </BasicDrawer>

package/src/features/org-units/components/OrgUnitBreadcrumb/OrgUnitBreadcrumbLink.tsx

@@ -1,8 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 
-import Link from "next/link";
-
-import { Tooltip } from "@faststore/ui";
+import { useLink_unstable as useLink } from "@faststore/core/experimental";
+import { Link, Tooltip } from "@faststore/ui";
 
 import { OrgUnitBreadcrumbItemProps } from "../../types";
 
@@ -12,6 +11,7 @@ export const OrgUnitBreadcrumbLink = ({
   isLast,
   enabled,
 }: OrgUnitBreadcrumbItemProps) => {
+  const { resolveLink } = useLink();
   const [truncate, setTruncate] = useState(false);
   const linkRef = useRef<HTMLParagraphElement | HTMLAnchorElement>(null);
 
@@ -38,7 +38,7 @@ export const OrgUnitBreadcrumbLink = ({
         <Link
           ref={linkRef as React.RefObject<HTMLAnchorElement>}
           data-fs-bp-breadcrumb-text
-          href={item}
+          href={resolveLink(item)}
         >
           {name}
         </Link>

package/src/features/org-units/components/OrgUnitDetailsDropdownMenu/OrgUnitDetailsDropdownMenu.tsx

@@ -2,6 +2,7 @@ import { DropdownItem } from "@faststore/ui";
 
 import { BasicDropdownMenu, Icon } from "../../../shared/components";
 import { useDrawerProps } from "../../../shared/hooks";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { AuthSetupDrawer } from "../AuthSetupDrawer";
 import { UpdateOrgUnitDrawer } from "../UpdateOrgUnitDrawer/UpdateOrgUnitDrawer";
 
@@ -32,6 +33,7 @@ export const OrgUnitDetailsDropdownMenu = ({
     ...authSetupDrawerProps
   } = useDrawerProps();
 
+  const { t } = useLocalization();
   const sizeProps = { width: 20, height: 20 };
 
   return (
@@ -39,12 +41,12 @@ export const OrgUnitDetailsDropdownMenu = ({
       <BasicDropdownMenu>
         <DropdownItem onClick={openUpdateDrawerProps}>
           <Icon name="FormatSize" {...sizeProps} />
-          Rename
+          {t("orgUnitDetails.dropdown.rename")}
         </DropdownItem>
         <BasicDropdownMenu.Separator />
         <DropdownItem onClick={openAuthSetupDrawerProps}>
           <Icon name="Settings" {...sizeProps} />
-          Authentication
+          {t("orgUnitDetails.dropdown.authentication")}
         </DropdownItem>
       </BasicDropdownMenu>
       {isUpdateDrawerOpen && (

package/src/features/org-units/components/OrgUnitDetailsNavbar/OrgUnitDetailsNavbar.tsx

@@ -1,14 +1,24 @@
 import storeConfig from "discovery.config";
 
-import Link from "next/link";
+import dynamic from "next/dynamic";
 
-import { Dropdown, DropdownMenu, IconButton } from "@faststore/ui";
+import { useLink_unstable as useLink } from "@faststore/core/experimental";
+import { Dropdown, DropdownMenu, IconButton, Link } from "@faststore/ui";
+
+const LocalizationButton = dynamic(
+  () =>
+    import("@faststore/core/experimental").then(
+      (m) => m.LocalizationButton_unstable
+    ),
+  { ssr: false }
+);
 
 import { ProfileSummary } from "../../../profile/components";
 import { BasicDropdownMenu, Icon } from "../../../shared/components";
 import { useDrawerProps } from "../../../shared/hooks";
 import { AboutDrawer } from "../../../shared/layouts/BaseTabsLayout/about-drawer/AboutDrawer";
 import { SumaSidebarDrawer } from "../../../shared/layouts/SumaPageLayout/SumaSidebarDrawer";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { doLogout } from "../../../shared/utils";
 
 export type OrgUnitDetailsNavbarProps = {
@@ -34,6 +44,8 @@ export const OrgUnitDetailsNavbar = ({
   sidebarVariant,
   showBackLink = false,
 }: OrgUnitDetailsNavbarProps) => {
+  const { t } = useLocalization();
+  const { resolveLink } = useLink();
   const {
     open: openAboutMenu,
     isOpen: isOpenAboutMenu,
@@ -57,7 +69,7 @@ export const OrgUnitDetailsNavbar = ({
             onClick={openSidebarMenu}
           />
         )}
-        <Link href="/" data-fs-bp-org-unit-details-navbar-link>
+        <Link href={resolveLink("/")} data-fs-bp-org-unit-details-navbar-link>
           {storeConfig.seo.title}
         </Link>
       </div>
@@ -73,12 +85,18 @@ export const OrgUnitDetailsNavbar = ({
         </Link>
         */}
 
+        <LocalizationButton
+          saveLabel={t("shared.buttons.save")}
+          currencyLabel={t("layouts.labels.currency")}
+          languageLabel={t("layouts.labels.language")}
+          icon="Globe"
+        />
         <Link
           target="_blank"
-          href="/"
+          href={resolveLink("/")}
           data-fs-bp-org-unit-details-navbar-start-shopping-link
         >
-          Start shopping
+          {t("layouts.navigation.startShopping")}
         </Link>
 
         <IconButton

package/src/features/org-units/components/OrgUnitDetailsNavbar/org-unit-details-navbar.scss

@@ -1,6 +1,7 @@
 @use "~@faststore/ui/src/styles/base/utilities" as u;
+
 [data-fs-bp-org-unit-details-navbar] {
-  
+
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -20,6 +21,16 @@
     gap: var(--fs-bp-gap-2);
   }
 
+  [data-fs-localization-button] {
+    [data-fs-button-wrapper] {
+      span {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--fs-bp-gap-3);
+      }
+    }
+  }
+
   [data-fs-bp-org-unit-details-navbar-link] {
     color: var(--fs-bp-color-brand);
     @include text-style('display-6');
@@ -64,7 +75,7 @@
 
   [data-fs-bp-org-unit-details-navbar-start-shopping-link] {
     display: none;
-    
+
     padding: 0 var(--fs-bp-padding-5);
     @include text-style('action');
     color: var(--fs-bp-color-neutral-8);
@@ -101,3 +112,8 @@
   min-width: unset;
   background-color: var(--fs-bp-color-white);
 }
+
+// !important para vencer a especificidade do CSS module do selector (portal).
+[data-fs-localization-selector] {
+  --fs-localization-selector-max-width: 20rem !important;
+}

package/src/features/org-units/components/OrgUnitsDropdownMenu/OrgUnitsDropdownMenu.tsx

@@ -8,6 +8,7 @@ import {
 import { useGetRolesOptions } from "../../../roles/hooks";
 import { BasicDropdownMenu, Icon } from "../../../shared/components";
 import { useDrawerProps } from "../../../shared/hooks";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { CreateUserDrawerSelector } from "../../../users/components";
 
 export type OrgUnitsDropdownMenuProps = {
@@ -26,6 +27,7 @@ export const OrgUnitsDropdownMenu = ({
   pathIds,
 }: OrgUnitsDropdownMenuProps) => {
   const { rolesOptions } = useGetRolesOptions(id);
+  const { t } = useLocalization();
   const {
     open: openCreateDrawerProps,
     isOpen: isCreateDrawerOpen,
@@ -57,18 +59,18 @@ export const OrgUnitsDropdownMenu = ({
       <BasicDropdownMenu>
         <DropdownItem onClick={openUpdateDrawerProps}>
           <Icon name="FormatSize" {...sizeProps} />
-          Rename
+          {t("shared.orgUnitDropdown.rename")}
         </DropdownItem>
         <BasicDropdownMenu.Separator />
         {isComplete && (
           <>
             <DropdownItem onClick={openCreateUserDrawerProps}>
               <Icon name="Profile" {...sizeProps} />
-              Add User
+              {t("shared.orgUnitDropdown.addUser")}
             </DropdownItem>
             <DropdownItem onClick={openCreateDrawerProps}>
               <Icon name="Folder" {...sizeProps} />
-              Add Organizational Unit
+              {t("shared.orgUnitDropdown.addOrganizationalUnit")}
             </DropdownItem>
             <BasicDropdownMenu.Separator />
           </>
@@ -78,7 +80,7 @@ export const OrgUnitsDropdownMenu = ({
           data-fs-bp-dropdown-menu-item-mode="danger"
         >
           <Icon name="Delete" {...sizeProps} />
-          Delete
+          {t("shared.buttons.delete")}
         </DropdownItem>
       </BasicDropdownMenu>
       {isCreateDrawerOpen && (

package/src/features/org-units/components/OrgUnitsHierarchyTree/OrgUnitsHierarchyTree.tsx

@@ -1,7 +1,7 @@
-import Link from "next/link";
 import { useRouter } from "next/router";
 
-import { Dropdown } from "@faststore/ui";
+import { useLink_unstable as useLink } from "@faststore/core/experimental";
+import { Dropdown, Link } from "@faststore/ui";
 
 import { OrgUnitsDropdownMenu } from "..";
 import {
@@ -27,6 +27,7 @@ export const OrgUnitsHierarchyTree = ({
   readonly,
   enableChildren = true,
 }: OrgUnitsHierarchyTreeProps) => {
+  const { resolveLink } = useLink();
   const { structure, setNode } = useOrgUnitStructure(orgUnitHierarchyData);
   const router = useRouter();
   const { currentContract, currentOrgUnit } = useBuyerPortal();
@@ -58,10 +59,12 @@ export const OrgUnitsHierarchyTree = ({
               {!readonly && (
                 <Link
                   data-fs-org-unit-item-click-area
-                  href={buyerPortalRoutes.orgUnitDetails({
-                    orgUnitId: id,
-                    contractId,
-                  })}
+                  href={resolveLink(
+                    buyerPortalRoutes.orgUnitDetails({
+                      orgUnitId: id,
+                      contractId,
+                    })
+                  )}
                 />
               )}
               {enableChildren && (

package/src/features/org-units/components/OrganizationalUnitsCard/OrganizationalUnitsCard.tsx

@@ -3,6 +3,7 @@ import { Toggle, Button, Dropdown, DropdownButton } from "@faststore/ui";
 import { CreateOrgUnitDrawer, OrgUnitsDropdownMenu } from "..";
 import { BasicCard, Icon } from "../../../shared/components";
 import { useDrawerProps } from "../../../shared/hooks";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 
 import type { OrgUnitData } from "../../types";
 
@@ -15,17 +16,24 @@ type OrganizationalUnitsCardProps = {
 };
 
 export default function OrganizationalUnitsCard({
-  orgUnitData = { id: null, name: "Root" },
+  orgUnitData,
   organizationalUnits = [],
 }: OrganizationalUnitsCardProps) {
+  const { t } = useLocalization();
+  const resolvedOrgUnitData = orgUnitData ?? {
+    id: null,
+    name: t("orgUnits.labels.root"),
+  };
   const { open: openCreateDrawer, ...createDrawerProps } = useDrawerProps();
 
   return (
     <>
       <BasicCard
-        footerLink={`/org-units${orgUnitData?.id ? `/${orgUnitData.id}` : ""}`}
-        footerMessage="Manage organizational units"
-        title="Organizational Units"
+        footerLink={`/org-units${
+          resolvedOrgUnitData?.id ? `/${resolvedOrgUnitData.id}` : ""
+        }`}
+        footerMessage={t("orgUnits.links.manageOrganizationalUnits")}
+        title={t("orgUnits.titles.organizationalUnits")}
         subTitle={organizationalUnits.length ?? 0}
         onPlusIconClick={openCreateDrawer}
       >
@@ -73,15 +81,15 @@ export default function OrganizationalUnitsCard({
         ) : (
           <div data-fs-card-body-empty-state>
             <Icon name="FilledFolder" width={40} height={40} />
-            <span> No child organizational units yet </span>
+            <span>{t("orgUnits.empty.noChildOrganizationalUnitsYet")}</span>
             <Button variant="primary" onClick={openCreateDrawer}>
-              + Add New
+              {t("orgUnits.buttons.addNew")}
             </Button>
           </div>
         )}
       </BasicCard>
       <CreateOrgUnitDrawer
-        initialParentOrgUnit={orgUnitData}
+        initialParentOrgUnit={resolvedOrgUnitData}
         readonly
         {...createDrawerProps}
       />

package/src/features/org-units/components/UpdateOrgUnitDrawer/UpdateOrgUnitDrawer.tsx

@@ -11,9 +11,9 @@ import {
   InputText,
 } from "../../../shared/components";
 import { useAnalytics, useBuyerPortal } from "../../../shared/hooks";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { ANALYTICS_EVENTS } from "../../../shared/services/logger/analytics/constants";
 import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
-import { CHANGES_TIMEOUT_MESSAGE } from "../../../shared/utils/constants";
 import { resolveContractId } from "../../../shared/utils/resolveContractId";
 import { useUpdateOrgUnit } from "../../hooks";
 
@@ -40,6 +40,7 @@ export const UpdateOrgUnitDrawer = ({
     currentContract,
     currentOrgUnit,
   });
+  const { t } = useLocalization();
   const { trackEntityEdited, trackEntityEditError } = useAnalytics({
     entityType: "org_unit",
     entityId: id,
@@ -58,7 +59,9 @@ export const UpdateOrgUnitDrawer = ({
     });
 
     pushToast({
-      message: `Organizational unit successfully edited\n${CHANGES_TIMEOUT_MESSAGE}`,
+      message: `${t("orgUnits.toasts.updateSuccess")}\n${t(
+        "shared.messages.changesTimeout"
+      )}`,
       status: "INFO",
       icon: (
         <button
@@ -73,7 +76,7 @@ export const UpdateOrgUnitDrawer = ({
             )
           }
         >
-          View
+          {t("shared.buttons.view")}
         </button>
       ),
     });
@@ -97,7 +100,7 @@ export const UpdateOrgUnitDrawer = ({
       );
 
       pushToast({
-        message: "An error occurred while editing the organizational unit",
+        message: t("orgUnits.errors.updateFailed"),
         status: "ERROR",
       });
     },
@@ -120,10 +123,13 @@ export const UpdateOrgUnitDrawer = ({
 
   return (
     <BasicDrawer data-fs-bp-update-org-unit-drawer close={close} {...props}>
-      <BasicDrawer.Heading title="Edit organization unit" onClose={close} />
+      <BasicDrawer.Heading
+        title={t("orgUnits.drawers.update.title")}
+        onClose={close}
+      />
       <BasicDrawer.Body>
         <InputText
-          label="Name"
+          label={t("shared.labels.name")}
           value={name}
           wrapperProps={{ style: { marginTop: 16 } }}
           hasError={isTouched && !name?.trim()}
@@ -132,12 +138,12 @@ export const UpdateOrgUnitDrawer = ({
 
         <ErrorMessage
           show={isTouched && !name?.trim()}
-          message="Name is required"
+          message={t("orgUnits.validation.nameRequired")}
         />
       </BasicDrawer.Body>
       <BasicDrawer.Footer>
         <BasicDrawer.Button variant="ghost" onClick={close}>
-          Cancel
+          {t("shared.buttons.cancel")}
         </BasicDrawer.Button>
         <BasicDrawer.Button
           variant="confirm"
@@ -145,7 +151,7 @@ export const UpdateOrgUnitDrawer = ({
           onClick={handleConfirmClick}
           isLoading={isUpdateOrgUnitLoading}
         >
-          Save
+          {t("shared.buttons.save")}
         </BasicDrawer.Button>
       </BasicDrawer.Footer>
     </BasicDrawer>