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

package/src/features/product-assortment/layouts/ProductAssortmentLayout/ProductAssortmentLayout.tsx

@@ -1,6 +1,7 @@
 import { EmptyState, HeaderInside } from "../../../shared/components";
 import { useBuyerPortal } from "../../../shared/hooks";
 import { ContractTabsLayout, GlobalLayout } from "../../../shared/layouts";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { ProductAssortmentTable } from "../../components/ProductAssortmentTable/ProductAssortmentTable";
 import { useGetProductAssortment } from "../../hooks/useGetProductAssortment";
 
@@ -10,6 +11,7 @@ export const ProductAssortmentLayout = ({
   orgUnitId,
   contractId,
 }: ProductAssortmentLayoutProps) => {
+  const { t } = useLocalization();
   const { currentOrgUnit: orgUnit, currentContract: contract } =
     useBuyerPortal();
 
@@ -29,21 +31,22 @@ export const ProductAssortmentLayout = ({
         orgUnitId={orgUnitId ?? orgUnit?.id ?? ""}
         contractName={contract?.name ?? ""}
         contractId={contract?.id ?? ""}
-        pageName="Contract"
+        pageName={t("shared.labels.contract")}
       >
         <section data-fs-bp-product-assortment-container>
-          <HeaderInside title="Assortments" />
+          <HeaderInside title={t("productAssortment.titles.assortments")} />
 
           <p data-fs-bp-assortments-subtitle>
-            Select the product assortment that users in this organizational unit
-            should access
+            {t("productAssortment.messages.subtitle")}
           </p>
 
           {isEmpty ? (
             <EmptyState
               iconName="Shapes"
-              title="No product assortments found."
-              description="This organizational unit has no available product assortments."
+              title={t("productAssortment.empty.noAssortmentsTitle")}
+              description={t(
+                "productAssortment.empty.noAssortmentsDescription"
+              )}
             />
           ) : (
             <ProductAssortmentTable

package/src/features/profile/components/ProfileCard/ProfileCard.tsx

@@ -1,4 +1,5 @@
 import { BasicCard } from "../../../shared/components";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 
 type ProfileCardProps = {
   name: string | null;
@@ -9,25 +10,27 @@ type ProfileCardProps = {
 };
 
 export default function ProfileCard({ name, email, id }: ProfileCardProps) {
+  const { t } = useLocalization();
+
   return (
     <BasicCard
       footerLink={`/profile/${id}`}
-      footerMessage="View profile"
-      title="Profile"
+      footerMessage={t("profile.actions.viewProfile")}
+      title={t("profile.titles.profile")}
     >
       <hr data-fs-divider />
       <div data-fs-profile-card-row>
-        <h1 data-fs-card-row-label>Name</h1>
+        <h1 data-fs-card-row-label>{t("shared.labels.name")}</h1>
         <h1 data-fs-profile-name>{name}</h1>
       </div>
       <hr data-fs-divider />
       <div data-fs-profile-card-row>
-        <h1 data-fs-card-row-label>Email</h1>
+        <h1 data-fs-card-row-label>{t("shared.labels.email")}</h1>
         <h1 data-fs-email-text>{email}</h1>
       </div>
       <hr data-fs-divider />
       <div data-fs-profile-card-row>
-        <h1 data-fs-card-row-label>ID</h1>
+        <h1 data-fs-card-row-label>{t("shared.labels.id")}</h1>
         <h1>{id}</h1>
       </div>
     </BasicCard>

package/src/features/profile/components/ProfileSummary/ProfileSummary.tsx

@@ -1,10 +1,10 @@
 import type { ReactNode } from "react";
 
-import Link from "next/link";
-
-import { Button } from "@faststore/ui";
+import { useLink_unstable as useLink } from "@faststore/core/experimental";
+import { Button, Link } from "@faststore/ui";
 
 import { Icon } from "../../../shared/components";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 
 export type ProfileSummaryProps = {
   onLogoutClick?: (storeConfig: unknown) => void;
@@ -27,6 +27,9 @@ export const ProfileSummary = ({
   showManageLink = false,
   ...otherProps
 }: ProfileSummaryProps) => {
+  const { t } = useLocalization();
+  const { resolveLink } = useLink();
+
   return (
     <section
       data-fs-self-profile-summary
@@ -36,8 +39,12 @@ export const ProfileSummary = ({
       <div data-fs-self-profile-summary-header>
         <h2 data-fs-self-profile-summary-org-name>{orgName}</h2>
         {showManageLink && (
-          <Link data-fs-self-profile-summary-org-link href="/buyer-portal">
-            Manage Organization <Icon name="OpenInNew" width={23} height={23} />
+          <Link
+            data-fs-self-profile-summary-org-link
+            href={resolveLink("/buyer-portal")}
+          >
+            {t("shared.actions.manageOrganization")}{" "}
+            <Icon name="OpenInNew" width={23} height={23} />
           </Link>
         )}
       </div>
@@ -51,7 +58,7 @@ export const ProfileSummary = ({
           onClick={onLogoutClick}
           variant="tertiary"
         >
-          Logout
+          {t("shared.buttons.logout")}
         </Button>
       </div>
     </section>

package/src/features/profile/layouts/ProfileLayout/ProfileLayout.tsx

@@ -1,6 +1,7 @@
 import { HeaderInside } from "../../../shared/components";
 import { useBuyerPortal } from "../../../shared/hooks";
 import { GlobalLayout, ContractTabsLayout } from "../../../shared/layouts";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 
 import type { ContractData } from "../../../contracts/types";
 
@@ -9,6 +10,7 @@ export type ProfileLayoutProps = {
 };
 
 export const ProfileLayout = ({ data }: ProfileLayoutProps) => {
+  const { t } = useLocalization();
   const { currentOrgUnit: orgUnit } = useBuyerPortal();
 
   const creationDate = data
@@ -26,20 +28,24 @@ export const ProfileLayout = ({ data }: ProfileLayoutProps) => {
         orgUnitId={orgUnit?.id ?? ""}
         contractName={data?.name ?? ""}
         contractId={data?.id ?? ""}
-        pageName="Contract"
+        pageName={t("shared.labels.contract")}
       >
         <section data-fs-bp-profile>
-          <HeaderInside title="Profile" />
+          <HeaderInside title={t("profile.titles.profile")} />
 
           {data && (
             <div data-fs-bp-profile-details>
-              <span data-fs-bp-profile-details-title>Details</span>
+              <span data-fs-bp-profile-details-title>
+                {t("profile.titles.details")}
+              </span>
 
               {!!data.name && (
                 <>
                   <hr data-fs-bp-profile-divider />
                   <div data-fs-bp-profile-details-row>
-                    <span data-fs-bp-profile-details-row-label>Name</span>
+                    <span data-fs-bp-profile-details-row-label>
+                      {t("shared.labels.name")}
+                    </span>
                     <span data-fs-bp-profile-details-row-value>
                       {data.name}
                     </span>
@@ -50,7 +56,9 @@ export const ProfileLayout = ({ data }: ProfileLayoutProps) => {
               <hr data-fs-bp-profile-divider />
 
               <div data-fs-bp-profile-details-row>
-                <span data-fs-bp-profile-details-row-label>Email</span>
+                <span data-fs-bp-profile-details-row-label>
+                  {t("shared.labels.email")}
+                </span>
                 <span data-fs-bp-profile-details-row-value>
                   <a href={`mailto:${data.email}`}>{data.email}</a>
                 </span>
@@ -59,7 +67,9 @@ export const ProfileLayout = ({ data }: ProfileLayoutProps) => {
               <hr data-fs-bp-profile-divider />
 
               <div data-fs-bp-profile-details-row>
-                <span data-fs-bp-profile-details-row-label>Creation Date</span>
+                <span data-fs-bp-profile-details-row-label>
+                  {t("profile.labels.creationDate")}
+                </span>
                 <span data-fs-bp-profile-details-row-value>{creationDate}</span>
               </div>
 

package/src/features/roles/layout/RoleDetailsLayout/RoleDetailsLayout.tsx

@@ -4,6 +4,7 @@ import { getTableColumns } from "../../../shared/components/Table/utils/tableCol
 import { useBuyerPortal } from "../../../shared/hooks";
 import { GlobalLayout } from "../../../shared/layouts";
 import { OrgUnitTabsLayout } from "../../../shared/layouts/OrgUnitTabsLayout/OrgUnitTabLayout";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
 
 import type { RolePermission } from "../../types";
@@ -18,6 +19,7 @@ export type RoleDetailsLayoutProps = {
 export const RoleDetailsLayout = ({
   data: { roleName, roles },
 }: RoleDetailsLayoutProps) => {
+  const { t } = useLocalization();
   const { currentOrgUnit } = useBuyerPortal();
 
   const columns = getTableColumns({
@@ -38,7 +40,7 @@ export const RoleDetailsLayout = ({
 
   return (
     <GlobalLayout>
-      <OrgUnitTabsLayout pageName="Organization">
+      <OrgUnitTabsLayout pageName={t("shared.labels.organization")}>
         <section data-fs-bp-roles-details-section>
           <HeaderInside
             title={roleName}
@@ -49,7 +51,7 @@ export const RoleDetailsLayout = ({
 
           <div data-fs-role-details-page>
             <div data-fs-role-header>
-              <span>Permissions</span>
+              <span>{t("roles.titles.permissions")}</span>
               <div data-fs-role-status>
                 <span data-fs-role-active>{count}</span>/
                 <span data-fs-role-not-active>{roles.length}</span>

package/src/features/roles/layout/RolesLayout/RolesLayout.tsx

@@ -5,6 +5,7 @@ import { useBuyerPortal } from "../../../shared/hooks";
 import { GlobalLayout } from "../../../shared/layouts";
 import { OrgUnitTabsLayout } from "../../../shared/layouts/OrgUnitTabsLayout/OrgUnitTabLayout";
 import { SumaPageLayout } from "../../../shared/layouts/SumaPageLayout/SumaPageLayout";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
 
 import type { RolePermission } from "../../types";
@@ -19,12 +20,13 @@ export const RolesLayout = ({
   data: { rolesAndPermissions },
 }: RolesLayoutProps) => {
   const { currentOrgUnit, featureFlags } = useBuyerPortal();
+  const { t } = useLocalization();
 
-  const columns = getTableColumns({});
+  const columns = getTableColumns({ nameColumnLabel: t("shared.labels.name") });
 
   const rolesSection = (
     <section data-fs-bp-roles-section>
-      <HeaderInside title="Roles" />
+      <HeaderInside title={t("roles.titles.roles")} />
       <Table layoutFixed>
         <Table.Head columns={columns} />
         <Table.Body>
@@ -50,7 +52,7 @@ export const RolesLayout = ({
       {featureFlags?.suma ? (
         <SumaPageLayout>{rolesSection}</SumaPageLayout>
       ) : (
-        <OrgUnitTabsLayout pageName="Organization">
+        <OrgUnitTabsLayout pageName={t("shared.labels.organization")}>
           {rolesSection}
         </OrgUnitTabsLayout>
       )}

package/src/features/shared/components/BasicCard/BasicCard.tsx

@@ -1,9 +1,9 @@
 import type { ReactNode } from "react";
 
-import Link from "next/link";
 import { useRouter } from "next/router";
 
-import { Icon as UIIcon, IconButton } from "@faststore/ui";
+import { useLink_unstable as useLink } from "@faststore/core/experimental";
+import { Icon as UIIcon, IconButton, Link } from "@faststore/ui";
 
 import { Card, CardBody, CardFooter, CardHeader } from "../Card";
 import { Icon } from "../Icon";
@@ -35,6 +35,8 @@ export const BasicCard = ({
   ...otherProps
 }: BasicCardProps) => {
   const { push } = useRouter();
+  const { resolveLink } = useLink();
+  const resolvedFooterLink = resolveLink(footerLink);
 
   return (
     <Card data-fs-bp-basic-card {...otherProps}>
@@ -58,12 +60,12 @@ export const BasicCard = ({
       <CardBody>{children}</CardBody>
       {enableFooter && (
         <CardFooter>
-          <Link href={footerLink} data-fs-card-footer-link>
+          <Link href={resolvedFooterLink} data-fs-card-footer-link>
             <span>{footerMessage}</span>
           </Link>
           <IconButton
             onClick={() => {
-              push(footerLink);
+              push(resolvedFooterLink ?? "");
             }}
             icon={
               <Icon

package/src/features/shared/components/BasicCard/BasicCardLine.tsx

@@ -1,8 +1,7 @@
 import type { ReactNode } from "react";
 
-import Link from "next/link";
-
-import { Dropdown } from "@faststore/ui";
+import { useLink_unstable as useLink } from "@faststore/core/experimental";
+import { Dropdown, Link } from "@faststore/ui";
 
 import { BasicDropdownMenu } from "../BasicDropdownMenu/BasicDropdownMenu";
 
@@ -19,9 +18,11 @@ export const BasicCardLine = ({
   menu,
   href,
 }: BasicCardLineProps) => {
+  const { resolveLink } = useLink();
+
   return (
     <span data-fs-basic-card-line title={title}>
-      {href && <Link data-fs-basic-card-line-link href={href} />}
+      {href && <Link data-fs-basic-card-line-link href={resolveLink(href)} />}
       {!!icon && <span data-fs-basic-card-line-icon>{icon}</span>}
       <span data-fs-basic-card-line-title>{title}</span>
       {!!menu && (

package/src/features/shared/components/CustomerSwitch/CustomerSwitchDrawer.tsx

@@ -3,6 +3,7 @@ import { useMemo, useState } from "react";
 import { SlideOver, useFadeEffect } from "@faststore/ui";
 import { Button, SlideOverHeader } from "@faststore/ui";
 
+import { useLocalization } from "../../localization/LocalizationContext";
 import { Icon } from "../Icon";
 
 import { CustomerSwitchOptionsList } from "./CustomerSwitchOptionsList";
@@ -53,6 +54,7 @@ export const CustomerSwitchDrawer = ({
   isOpen,
   onCloseDrawer,
 }: CustomerSwitchDrawerProps) => {
+  const { t } = useLocalization();
   const { fade, fadeOut } = useFadeEffect();
 
   const [option, setOption] = useState<CustomerSwitchOptionData>(options[0]);
@@ -90,7 +92,9 @@ export const CustomerSwitchDrawer = ({
         data-fs-customer-switch-drawer-header
         onClose={() => onCloseDrawer?.()}
       >
-        <h1 data-fs-customer-switch-drawer-title>Switch customer ID</h1>
+        <h1 data-fs-customer-switch-drawer-title>
+          {t("layouts.drawers.switchCustomerId")}
+        </h1>
       </SlideOverHeader>
 
       <section data-fs-customer-switch-drawer-body>
@@ -108,7 +112,11 @@ export const CustomerSwitchDrawer = ({
           onClick={handleSubmitCustomer}
           disabled={option.id === options[0].id || loading}
         >
-          {loading ? <Icon name="Load" width={16} height={16} /> : "Confirm"}
+          {loading ? (
+            <Icon name="Load" width={16} height={16} />
+          ) : (
+            t("shared.buttons.confirm")
+          )}
         </Button>
       </footer>
     </SlideOver>

package/src/features/shared/components/CustomerSwitch/CustomerSwitchSearch.tsx

@@ -2,6 +2,8 @@ import { useRef, type FormEvent } from "react";
 
 import { Input, IconButton, Icon as UIIcon } from "@faststore/ui";
 
+import { useLocalization } from "../../localization/LocalizationContext";
+
 export type CustomerSwitchSearchProps = {
   onSearch?: (term: string) => void;
 };
@@ -9,6 +11,7 @@ export type CustomerSwitchSearchProps = {
 export const CustomerSwitchSearch = ({
   onSearch,
 }: CustomerSwitchSearchProps) => {
+  const { t } = useLocalization();
   const inputRef = useRef<HTMLInputElement>(null);
 
   const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
@@ -28,7 +31,7 @@ export const CustomerSwitchSearch = ({
       />
       <Input
         data-fs-customer-switch-search-input
-        placeholder="Search"
+        placeholder={t("shared.placeholders.search")}
         ref={inputRef}
       />
     </form>

package/src/features/shared/components/DropdownFilter/DropdownFilter.tsx

@@ -7,11 +7,14 @@ import {
   DropdownMenu,
 } from "@faststore/ui";
 
+import { useLocalization } from "../../localization/LocalizationContext";
 import { Icon } from "../Icon";
 
+type DropdownFilterOption = { value: string; label: string };
+
 type DropdownFilterProps = {
   label: string;
-  filterOptions: string[];
+  filterOptions: DropdownFilterOption[];
   showClear?: boolean;
   updateFilter: (inputFilter: string) => void;
   clearFilter?: () => void;
@@ -23,12 +26,13 @@ const DropdownFilter = ({
   updateFilter,
   clearFilter,
 }: DropdownFilterProps) => {
+  const { t } = useLocalization();
   const [currentLabel, setCurrentLabel] = useState(label);
 
-  const updateLabel = (option: string) => {
-    setCurrentLabel(`${label}: ${option}`);
+  const updateLabel = (option: DropdownFilterOption) => {
+    setCurrentLabel(t("shared.dropdown.filterLabel", [label, option.label]));
 
-    updateFilter(option);
+    updateFilter(option.value);
   };
 
   const clearLabel = () => {
@@ -47,15 +51,15 @@ const DropdownFilter = ({
       </DropdownButton>
       <DropdownMenu data-fs-buyer-portal-filter-menu>
         <DropdownItem data-fs-buyer-portal-filter-item onClick={clearLabel}>
-          No Filter
+          {t("shared.dropdown.noFilter")}
         </DropdownItem>
         {filterOptions.map((option) => (
           <DropdownItem
             data-fs-buyer-portal-filter-item
-            key={option}
+            key={option.value}
             onClick={() => updateLabel(option)}
           >
-            {option}
+            {option.label}
           </DropdownItem>
         ))}
       </DropdownMenu>

package/src/features/shared/components/Error/Error.tsx

@@ -1,3 +1,4 @@
+import { useLocalization } from "../../localization/LocalizationContext";
 import { isDevelopment } from "../../utils/environment";
 import { Icon } from "../Icon";
 
@@ -13,24 +14,30 @@ export type ErrorProps = {
 };
 
 export default function Error({ error }: ErrorProps) {
+  const { t } = useLocalization();
+
   return (
     <div data-fs-bp-error>
       <Icon name="Warning" width={48} height={48} data-fs-icon-loading="true" />
-      <h2 data-fs-bp-error-title>Something went wrong!</h2>
+      <h2 data-fs-bp-error-title>{t("shared.errors.somethingWentWrong")}</h2>
       <button data-fs-bp-error-button onClick={() => window.location.reload()}>
-        Try again
+        {t("shared.buttons.tryAgain")}
       </button>
       {isDevelopment() && (
         <div data-fs-bp-error-details>
           <span data-fs-bp-error-details-type>{error?.tags?.errorType}</span>
-          <h2 data-fs-bp-error-details-title>Error Details</h2>
+          <h2 data-fs-bp-error-details-title>
+            {t("shared.errors.errorDetails")}
+          </h2>
           <p data-fs-bp-error-details-message>{error?.error.message}</p>
-          <p data-fs-bp-error-details-stack>Stack: {error?.error.stack}</p>
+          <p data-fs-bp-error-details-stack>
+            {t("shared.errors.stackLabel")} {error?.error.stack}
+          </p>
           <p data-fs-bp-error-details-component>
-            Component: {error?.tags?.component}
+            {t("shared.errors.componentLabel")} {error?.tags?.component}
           </p>
           <p data-fs-bp-error-details-query>
-            Query: {JSON.stringify(error?.query)}
+            {t("shared.errors.queryLabel")} {JSON.stringify(error?.query)}
           </p>
         </div>
       )}

package/src/features/shared/components/HeaderInside/HeaderInside.tsx

@@ -1,6 +1,7 @@
 import type { ReactNode } from "react";
 
-import Link from "next/link";
+import { useLink_unstable as useLink } from "@faststore/core/experimental";
+import { Link } from "@faststore/ui";
 
 import { Icon } from "../Icon";
 
@@ -20,10 +21,12 @@ export const HeaderInside = ({
   info,
   ...otherProps
 }: HeaderInsideProps) => {
+  const { resolveLink } = useLink();
+
   return (
     <header data-fs-bp-header-inside {...otherProps}>
       {!!backLink && (
-        <Link href={backLink} data-fs-bp-back-link>
+        <Link href={resolveLink(backLink)} data-fs-bp-back-link>
           <Icon name="Back" />
         </Link>
       )}

package/src/features/shared/components/InternalSearch/InternalSearch.tsx

@@ -2,12 +2,15 @@ import { useEffect, useState } from "react";
 
 import { Icon as UIIcon } from "@faststore/ui";
 
+import { useLocalization } from "../../localization/LocalizationContext";
+
 export type InternalSearchProps = {
   textSearch: (searchTerm: string) => void;
   defaultValue?: string;
 };
 
 const InternalSearch = ({ textSearch, defaultValue }: InternalSearchProps) => {
+  const { t } = useLocalization();
   const [searchTerm, setSearchTerm] = useState(defaultValue || "");
   const [isFocused, setIsFocused] = useState(false);
 
@@ -29,7 +32,7 @@ const InternalSearch = ({ textSearch, defaultValue }: InternalSearchProps) => {
       <input
         data-fs-buyer-portal-internal-search-input
         value={searchTerm}
-        placeholder="Search"
+        placeholder={t("shared.placeholders.search")}
         onChange={handleInputChange}
         onFocus={() => setIsFocused(true)}
         onBlur={() => setIsFocused(false)}

package/src/features/shared/components/InternalTopbar/InternalTopbar.tsx

@@ -1,11 +1,11 @@
 import type { ReactNode } from "react";
 import type { HTMLAttributes } from "react";
 
-import Link from "next/link";
-
-import { IconButton, Dropdown, DropdownButton } from "@faststore/ui";
+import { useLink_unstable as useLink } from "@faststore/core/experimental";
+import { IconButton, Dropdown, DropdownButton, Link } from "@faststore/ui";
 
 import { useBuyerPortal } from "../../hooks/useBuyerPortal";
+import { useLocalization } from "../../localization/LocalizationContext";
 import { Icon } from "../Icon";
 
 interface InternapTopBarProps
@@ -28,11 +28,13 @@ export const InternalTopBar = ({
   href = "/pvt/organization-account",
 }: InternapTopBarProps) => {
   const { currentOrgUnit } = useBuyerPortal();
+  const { t } = useLocalization();
+  const { resolveLink } = useLink();
 
   return (
     <header data-fs-buyer-portal-topbar>
       <div data-fs-buyer-portal-topbar-navigation>
-        <Link href={href}>
+        <Link href={resolveLink(href)}>
           <IconButton
             size="small"
             icon={
@@ -49,7 +51,7 @@ export const InternalTopBar = ({
         <div data-fs-internal-topbar-icon-wrapper>
           <Icon name="StarFolder" height={24} width={24} />
         </div>
-        {currentOrgUnit?.name ?? "Buyer Portal"}
+        {currentOrgUnit?.name ?? t("shared.labels.buyerPortal")}
       </div>
 
       <div data-fs-buyer-portal-topbar-wrapper>

package/src/features/shared/components/MainLinksDropdownMenu/MainLinksDropdownMenu.tsx

@@ -3,21 +3,32 @@ import { useRouter } from "next/router";
 import { DropdownItem, DropdownMenu } from "@faststore/ui";
 
 import { useBuyerPortal } from "../../hooks/useBuyerPortal";
+import { useLocalization } from "../../localization/LocalizationContext";
 import { Icon } from "../Icon";
 
 import type { OrgUnitBasicData } from "../../../org-units/types";
+import type { LocalizeFn } from "../../localization/types";
 
-const getMenuItems = (orgUnit?: OrgUnitBasicData | null) => {
+const getMenuItems = (
+  orgUnit: OrgUnitBasicData | null | undefined,
+  t: LocalizeFn
+) => {
   const contractsOrProfileOption =
     orgUnit?.contractMode === "Single"
-      ? { name: "Profile", link: `/profile/${orgUnit.id}` }
-      : { name: "Contracts", link: `/contracts/${orgUnit?.id}` };
+      ? {
+          name: t("layouts.navigation.profile"),
+          link: `/profile/${orgUnit.id}`,
+        }
+      : {
+          name: t("layouts.navigation.contracts"),
+          link: `/contracts/${orgUnit?.id}`,
+        };
 
   const menuItems = [
-    { name: "Users", link: "/users" },
-    { name: "Organizational Units", link: "/org-units" },
+    { name: t("layouts.navigation.users"), link: "/users" },
+    { name: t("layouts.navigation.organizationalUnits"), link: "/org-units" },
     contractsOrProfileOption,
-    { name: "Addresses", link: "/addresses" },
+    { name: t("layouts.navigation.addresses"), link: "/addresses" },
   ].map((item) => ({
     ...item,
     link: orgUnit ? `${item.link}/${orgUnit.id}` : item.link,
@@ -25,7 +36,10 @@ const getMenuItems = (orgUnit?: OrgUnitBasicData | null) => {
 
   const firstOption = orgUnit
     ? { name: orgUnit.name, link: `/org-unit/${orgUnit.id}` }
-    : { name: "Organization Account", link: "/pvt/organization-account" };
+    : {
+        name: t("layouts.navigation.organizationAccount"),
+        link: "/pvt/organization-account",
+      };
 
   return [firstOption, ...menuItems];
 };
@@ -33,10 +47,11 @@ const getMenuItems = (orgUnit?: OrgUnitBasicData | null) => {
 export const MainLinksDropdownMenu = () => {
   const { push, asPath } = useRouter();
   const { currentOrgUnit } = useBuyerPortal();
+  const { t } = useLocalization();
 
   return (
     <DropdownMenu align="center" data-fs-bp-main-links-dropdown-menu>
-      {getMenuItems(currentOrgUnit).map(({ name, link }) => {
+      {getMenuItems(currentOrgUnit, t).map(({ name, link }) => {
         const isActive = asPath === link;
 
         return (