@vtex/faststore-plugin-buyer-portal 2.0.19 → 2.0.21

package/src/features/contracts/components/ContractListItem/ContractListItem.tsx

@@ -2,6 +2,7 @@ import { Dropdown, DropdownItem, useUI } from "@faststore/ui";
 
 import { BasicDropdownMenu, LetterHighlight } from "../../../shared/components";
 import Icon from "../../../shared/components/Icon/Icon";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { useSwitchContract } from "../../hooks";
 import { ContractSwitchOverlay } from "../ContractSwitchOverlay/ContractSwitchOverlay";
 
@@ -24,6 +25,7 @@ export const ContractListItem = ({
   onRemove,
   onSetDefault,
 }: ContractListItemProps) => {
+  const { t } = useLocalization();
   const displayName = contract.name ?? contract.email;
   const { pushToast } = useUI();
   const { switchContract, loading } = useSwitchContract();
@@ -39,7 +41,7 @@ export const ContractListItem = ({
     const switched = await switchContract(contract.id, { orgUnitId });
     if (!switched) {
       pushToast({
-        message: "Failed to switch contract. Please try again.",
+        message: t("contracts.toasts.switchError"),
         status: "ERROR",
       });
     }
@@ -92,12 +94,12 @@ export const ContractListItem = ({
             {contract.isDefault ? (
               <DropdownItem disabled>
                 <Icon name="Star" width={16} height={16} />
-                Set as default
+                {t("contracts.actions.setAsDefault")}
               </DropdownItem>
             ) : (
               <DropdownItem onClick={onSetDefault}>
                 <Icon name="StarOutline" width={16} height={16} />
-                Set as default
+                {t("contracts.actions.setAsDefault")}
               </DropdownItem>
             )}
             <BasicDropdownMenu.Separator />
@@ -106,7 +108,7 @@ export const ContractListItem = ({
               onClick={onRemove}
             >
               <Icon name="CircleRemove" width={16} height={16} />
-              Remove
+              {t("shared.buttons.remove")}
             </DropdownItem>
           </BasicDropdownMenu>
         </Dropdown>

package/src/features/contracts/components/ContractSelectAllRow/ContractSelectAllRow.tsx

@@ -1,4 +1,5 @@
 import Icon from "../../../shared/components/Icon/Icon";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 
 export type ContractSelectAllRowProps = {
   total: number;
@@ -11,6 +12,7 @@ export const ContractSelectAllRow = ({
   selectedCount,
   onToggle,
 }: ContractSelectAllRowProps) => {
+  const { t } = useLocalization();
   const allSelected = total > 0 && selectedCount >= total;
   const indeterminate = selectedCount > 0 && !allSelected;
 
@@ -31,7 +33,9 @@ export const ContractSelectAllRow = ({
       >
         {allSelected && <Icon name="Check" width={12} height={12} />}
       </div>
-      <span data-fs-bp-contract-select-all-label>Select all ({total})</span>
+      <span data-fs-bp-contract-select-all-label>
+        {t("contracts.labels.selectAllCount", [total])}
+      </span>
     </div>
   );
 };

package/src/features/contracts/components/ContractSelectionBar/ContractSelectionBar.tsx

@@ -1,6 +1,7 @@
 import { Icon as UIIcon } from "@faststore/ui";
 
 import Icon from "../../../shared/components/Icon/Icon";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 
 export type ContractSelectionBarProps = {
   selectedCount: number;
@@ -15,6 +16,8 @@ export const ContractSelectionBar = ({
   onRemove,
   canRemove = true,
 }: ContractSelectionBarProps) => {
+  const { t } = useLocalization();
+
   if (selectedCount === 0) return null;
 
   return (
@@ -29,7 +32,7 @@ export const ContractSelectionBar = ({
       </button>
 
       <span data-fs-bp-contract-selection-bar-count>
-        {selectedCount} selected
+        {t("contracts.labels.selectedCount", [selectedCount])}
       </span>
 
       {canRemove && (
@@ -39,7 +42,7 @@ export const ContractSelectionBar = ({
           onClick={onRemove}
         >
           <Icon name="MinusCircle" width={20} height={20} />
-          Remove
+          {t("shared.buttons.remove")}
         </button>
       )}
     </div>

package/src/features/contracts/components/ContractSelectionList/ContractSelectionList.tsx

@@ -1,3 +1,4 @@
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { ContractListItem } from "../ContractListItem/ContractListItem";
 
 import type { ContractData } from "../../types";
@@ -21,10 +22,12 @@ export const ContractSelectionList = ({
   onItemRemove,
   onSetDefault,
 }: ContractSelectionListProps) => {
+  const { t } = useLocalization();
+
   if (contracts.length === 0) {
     return (
       <div data-fs-bp-contract-selection-list-empty>
-        <p>No contracts found for this organizational unit.</p>
+        <p>{t("contracts.listing.emptyState")}</p>
       </div>
     );
   }

package/src/features/contracts/components/ContractSwitchOverlay/ContractSwitchOverlay.tsx

@@ -1,5 +1,6 @@
 import { ContractTabsLayout } from "../../../shared/layouts/ContractTabsLayout/ContractTabsLayout";
 import { LoadingTabsLayoutContent } from "../../../shared/layouts/LoadingTabsLayout/LoadingTabsLayout";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 
 export type ContractSwitchOverlayProps = {
   orgUnitId: string;
@@ -19,6 +20,8 @@ export const ContractSwitchOverlay = ({
   orgUnitId,
   contractId,
 }: ContractSwitchOverlayProps) => {
+  const { t } = useLocalization();
+
   return (
     <div data-fs-bp-contract-switch-overlay role="alert" aria-busy="true">
       <ContractTabsLayout
@@ -26,10 +29,10 @@ export const ContractSwitchOverlay = ({
         orgUnitId={orgUnitId}
         contractName=""
         contractId={contractId}
-        pageName="Contract"
+        pageName={t("layouts.tabs.contract")}
         loading
       >
-        <LoadingTabsLayoutContent title="Profile" />
+        <LoadingTabsLayoutContent title={t("layouts.titles.profile")} />
       </ContractTabsLayout>
     </div>
   );

package/src/features/contracts/components/ContractsListHeader/ContractsListHeader.tsx

@@ -1,5 +1,6 @@
 import { InternalSearch } from "../../../shared/components";
 import Icon from "../../../shared/components/Icon/Icon";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 
 export type ContractsListHeaderProps = {
   searchTerm: string;
@@ -24,6 +25,8 @@ export const ContractsListHeader = ({
   onPrev,
   onNext,
 }: ContractsListHeaderProps) => {
+  const { t } = useLocalization();
+
   return (
     <div data-fs-bp-contracts-list-header>
       <div data-fs-bp-contracts-list-header-search>
@@ -32,7 +35,7 @@ export const ContractsListHeader = ({
 
       <div data-fs-bp-contracts-list-header-pagination>
         <span data-fs-bp-contracts-list-header-interval>
-          {from} — {to} of {total}
+          {t("contracts.listing.interval", [from, to, total])}
         </span>
         <button
           type="button"

package/src/features/contracts/components/ErrorRemoveDrawer/ErrorRemoveDrawer.tsx

@@ -1,4 +1,5 @@
 import { BasicDrawer, type BasicDrawerProps } from "../../../shared/components";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 
 export type ErrorRemoveDrawerProps = Omit<BasicDrawerProps, "children"> & {
   orgUnitName: string;
@@ -10,29 +11,25 @@ export const ErrorRemoveDrawer = ({
   onRetry,
   ...drawerProps
 }: ErrorRemoveDrawerProps) => {
+  const { t } = useLocalization();
+
   return (
     <BasicDrawer {...drawerProps}>
       <BasicDrawer.Heading
-        title="Unable to remove contracts"
+        title={t("contracts.removeDrawer.unableTitle")}
         onClose={drawerProps.onDismiss}
       />
       <BasicDrawer.Body data-fs-bp-error-remove-drawer-body>
         {onRetry ? (
-          <p>
-            An error occurred while removing the contract. Please try again.
-          </p>
+          <p>{t("contracts.removeDrawer.error")}</p>
         ) : (
           <>
             <p>
-              Every organizational unit must have at least one contract
-              available. This ensures that users within{" "}
-              <strong>{orgUnitName}</strong> can always access store features
-              like navigation and checkout.
-            </p>
-            <p>
-              To proceed, deselect at least one contract to keep it in this
-              organizational unit.
+              {t("contracts.removeDrawer.minimumContractWarning", [
+                <strong key="orgUnitName">{orgUnitName}</strong>,
+              ])}
             </p>
+            <p>{t("contracts.removeDrawer.deselectHint")}</p>
           </>
         )}
       </BasicDrawer.Body>
@@ -44,14 +41,14 @@ export const ErrorRemoveDrawer = ({
               onClick={drawerProps.onDismiss}
               type="button"
             >
-              Cancel
+              {t("shared.buttons.cancel")}
             </BasicDrawer.Button>
             <BasicDrawer.Button
               variant="confirm"
               onClick={onRetry}
               type="button"
             >
-              Try again
+              {t("shared.buttons.tryAgain")}
             </BasicDrawer.Button>
           </>
         ) : (
@@ -60,7 +57,7 @@ export const ErrorRemoveDrawer = ({
             onClick={drawerProps.onDismiss}
             type="button"
           >
-            Got it
+            {t("shared.buttons.gotIt")}
           </BasicDrawer.Button>
         )}
       </BasicDrawer.Footer>

package/src/features/contracts/components/UnableToRemoveContractsDrawer/UnableToRemoveContractsDrawer.tsx

@@ -1,5 +1,6 @@
 import { BasicDrawer, type BasicDrawerProps } from "../../../shared/components";
 import Icon from "../../../shared/components/Icon/Icon";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 
 export type UnableToRemoveContractsDrawerProps = Omit<
   BasicDrawerProps,
@@ -17,10 +18,12 @@ export const UnableToRemoveContractsDrawer = ({
   orgUnitName,
   ...drawerProps
 }: UnableToRemoveContractsDrawerProps) => {
+  const { t } = useLocalization();
+
   return (
     <BasicDrawer {...drawerProps}>
       <BasicDrawer.Heading
-        title="Unable to remove contracts"
+        title={t("contracts.removeDrawer.unableTitle")}
         onClose={drawerProps.onDismiss}
       />
       <BasicDrawer.Body data-fs-bp-unable-to-remove-contracts-drawer-body>
@@ -28,14 +31,14 @@ export const UnableToRemoveContractsDrawer = ({
           <Icon name="InfoSolid" width={28} height={28} />
         </span>
         <p>
-          Every organizational unit must have at least one contract available.
-          This ensures that users within <strong>{orgUnitName}</strong> can
-          always access store features like navigation and checkout.
+          {t("contracts.removeDrawer.minimumContractWarning", [
+            <strong key="orgUnitName">{orgUnitName}</strong>,
+          ])}
         </p>
         <p>
-          To proceed, deselect at least one contract to keep it in this{" "}
-          <strong>organizational unit</strong>. When an organizational unit has
-          only one contract, it is automatically set as the default.
+          {t("contracts.removeDrawer.unableDeselectHint", [
+            <strong key="organizationalUnit">organizational unit</strong>,
+          ])}
         </p>
       </BasicDrawer.Body>
       <BasicDrawer.Footer>
@@ -44,7 +47,7 @@ export const UnableToRemoveContractsDrawer = ({
           onClick={drawerProps.onDismiss}
           type="button"
         >
-          Got it
+          {t("shared.buttons.gotIt")}
         </BasicDrawer.Button>
       </BasicDrawer.Footer>
     </BasicDrawer>

package/src/features/contracts/layouts/ContractInformationLayout/ContractInformationLayout.tsx

@@ -15,6 +15,7 @@ import {
 import { useBuyerPortal, useDrawerProps } from "../../../shared/hooks";
 import { useMutation } from "../../../shared/hooks/useMutation";
 import { GlobalLayout } from "../../../shared/layouts";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
 import { ConfirmRemoveDrawer } from "../../components/ConfirmRemoveDrawer/ConfirmRemoveDrawer";
 import { ErrorRemoveDrawer } from "../../components/ErrorRemoveDrawer/ErrorRemoveDrawer";
@@ -39,37 +40,39 @@ const ContractInformationNav = ({
   orgUnitId: string;
   contractId: string;
 }) => {
+  const { t } = useLocalization();
+
   return (
     <nav data-fs-bp-contract-information-nav>
       <ul data-fs-bp-contract-information-nav-list>
         <li data-fs-bp-contract-information-nav-item-active>
-          <span>Basic information</span>
+          <span>{t("contracts.nav.basicInformation")}</span>
         </li>
         <VerticalNav.Link
           link={buyerPortalRoutes.addresses({ orgUnitId, contractId })}
         >
-          Addresses
+          {t("layouts.navigation.addresses")}
         </VerticalNav.Link>
         <VerticalNav.Link
           link={buyerPortalRoutes.paymentMethods({ orgUnitId, contractId })}
         >
-          Payment methods
+          {t("layouts.navigation.paymentMethods")}
         </VerticalNav.Link>
         <VerticalNav.Link
           link={buyerPortalRoutes.creditCards({ orgUnitId, contractId })}
         >
-          Credit cards
+          {t("layouts.navigation.creditCards")}
         </VerticalNav.Link>
         <VerticalNav.Link
           link={buyerPortalRoutes.productAssortment({ orgUnitId, contractId })}
         >
-          Assortment
+          {t("contracts.nav.assortment")}
         </VerticalNav.Link>
       </ul>
 
       <div data-fs-bp-contract-information-nav-section>
         <span data-fs-bp-contract-information-nav-section-title>
-          Accounting fields
+          {t("layouts.navigation.accountingFields")}
         </span>
         <ul data-fs-bp-contract-information-nav-list>
           <VerticalNav.Link
@@ -79,7 +82,7 @@ const ContractInformationNav = ({
               accountingFieldId: "cost-centers",
             })}
           >
-            Cost centers
+            {t("contracts.nav.costCenters")}
           </VerticalNav.Link>
           <VerticalNav.Link
             link={buyerPortalRoutes.accountingFields({
@@ -88,7 +91,7 @@ const ContractInformationNav = ({
               accountingFieldId: "departments",
             })}
           >
-            Departments
+            {t("contracts.nav.departments")}
           </VerticalNav.Link>
           <VerticalNav.Link
             link={buyerPortalRoutes.accountingFields({
@@ -97,7 +100,7 @@ const ContractInformationNav = ({
               accountingFieldId: "po-numbers",
             })}
           >
-            PO numbers
+            {t("contracts.nav.poNumbers")}
           </VerticalNav.Link>
         </ul>
       </div>
@@ -108,6 +111,7 @@ const ContractInformationNav = ({
 export const ContractInformationLayout = ({
   data: { orgUnit, contracts, contractId },
 }: ContractInformationLayoutProps) => {
+  const { t } = useLocalization();
   const router = useRouter();
   const { broadcast } = useContractSwitchChannel();
   const { featureFlags } = useBuyerPortal();
@@ -165,7 +169,7 @@ export const ContractInformationLayout = ({
       onSuccess: () => {
         router.replace(router.asPath);
         pushToast({
-          message: "Default contract updated successfully",
+          message: t("contracts.toasts.setDefaultSuccess"),
           status: "INFO",
         });
       },
@@ -178,8 +182,7 @@ export const ContractInformationLayout = ({
           // message is not JSON
         }
         pushToast({
-          message:
-            apiMessage ?? "Failed to set default contract. Please try again.",
+          message: apiMessage ?? t("contracts.toasts.setDefaultError"),
           status: "ERROR",
         });
       },
@@ -214,7 +217,7 @@ export const ContractInformationLayout = ({
               aria-label="Back to contracts"
             >
               <Icon name="ArrowPointLeft" width={16} height={16} />
-              Contracts
+              {t("layouts.navigation.contracts")}
             </Link>
           )}
 
@@ -232,7 +235,7 @@ export const ContractInformationLayout = ({
                       disabled
                     >
                       <Icon name="Star" width={16} height={16} />
-                      Set as default
+                      {t("contracts.actions.setAsDefault")}
                     </DropdownItem>
                   ) : (
                     <DropdownItem
@@ -241,14 +244,14 @@ export const ContractInformationLayout = ({
                       disabled={isSetDefaultContractLoading}
                     >
                       <Icon name="StarOutline" width={16} height={16} />
-                      Set as default
+                      {t("contracts.actions.setAsDefault")}
                     </DropdownItem>
                   )}
                   <DropdownItem
                     data-fs-bp-contract-information-more-menu-remove
                     onClick={openConfirmDrawer}
                   >
-                    Remove
+                    {t("shared.buttons.remove")}
                   </DropdownItem>
                 </BasicDropdownMenu>
               </Dropdown>
@@ -264,24 +267,28 @@ export const ContractInformationLayout = ({
         <main data-fs-bp-contract-information-content>
           <section data-fs-bp-contract-information-basic-info>
             <h2 data-fs-bp-contract-information-section-title>
-              Basic information
+              {t("contracts.nav.basicInformation")}
             </h2>
             <div data-fs-bp-contract-information-fields>
               <div data-fs-bp-contract-information-field>
-                <span data-fs-bp-contract-information-field-label>Name</span>
+                <span data-fs-bp-contract-information-field-label>
+                  {t("shared.labels.name")}
+                </span>
                 <span data-fs-bp-contract-information-field-value>
                   {contract?.name ?? "—"}
                 </span>
               </div>
               <div data-fs-bp-contract-information-field>
-                <span data-fs-bp-contract-information-field-label>Email</span>
+                <span data-fs-bp-contract-information-field-label>
+                  {t("shared.labels.email")}
+                </span>
                 <span data-fs-bp-contract-information-field-value>
                   {contract?.email ?? "—"}
                 </span>
               </div>
               <div data-fs-bp-contract-information-field>
                 <span data-fs-bp-contract-information-field-label>
-                  Created date
+                  {t("contracts.details.createdDate")}
                 </span>
                 <span data-fs-bp-contract-information-field-value>
                   {contract?.creationDate ?? "—"}

package/src/features/contracts/layouts/ContractListingLayout/ContractListingLayout.tsx

@@ -21,6 +21,7 @@ import {
 } from "../../../shared/hooks";
 import { GlobalLayout } from "../../../shared/layouts";
 import { SumaSidebar } from "../../../shared/layouts/SumaPageLayout/SumaSidebar";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
 import { AddContractsDrawer } from "../../components/AddContractsDrawer/AddContractsDrawer";
 import { ConfirmRemoveDrawer } from "../../components/ConfirmRemoveDrawer/ConfirmRemoveDrawer";
@@ -54,24 +55,11 @@ export type ContractListingLayoutProps = {
   loading?: boolean;
 };
 
-const headerInfo = (
-  <Tooltip
-    content="Contracts define the commercial rules applied during purchasing, such as addresses, payment methods, credit cards and other checkout settings."
-    placement="right-center"
-  >
-    <Icon
-      name="InfoFilled"
-      width={20}
-      height={20}
-      data-fs-bp-contract-listing-info-icon
-    />
-  </Tooltip>
-);
-
 export const ContractListingLayout = ({
   data: { orgUnit, contracts, user },
   loading = false,
 }: ContractListingLayoutProps) => {
+  const { t } = useLocalization();
   const isSingleContract = contracts.length <= 1;
   const router = useRouter();
   const { pushToast } = useUI();
@@ -145,8 +133,7 @@ export const ContractListingLayout = ({
             (switched) => {
               if (!switched) {
                 pushToast({
-                  message:
-                    "Contracts removed, but we couldn't refresh your active contract. Please reload the page.",
+                  message: t("contracts.toasts.refreshError"),
                   status: "ERROR",
                 });
                 router.replace(router.asPath);
@@ -159,9 +146,10 @@ export const ContractListingLayout = ({
 
       router.replace(router.asPath);
       pushToast({
-        message: `${pendingRemoveIds.size} contract${
-          pendingRemoveIds.size === 1 ? "" : "s"
-        } removed successfully`,
+        message: t("contracts.toasts.removeSuccess", [
+          pendingRemoveIds.size,
+          pendingRemoveIds.size === 1 ? "" : "s",
+        ]),
         status: "INFO",
       });
     },
@@ -175,7 +163,7 @@ export const ContractListingLayout = ({
       }
       confirmRemoveDrawer.close();
       pushToast({
-        message: apiMessage ?? "Failed to remove contracts. Please try again.",
+        message: apiMessage ?? t("contracts.toasts.removeError"),
         status: "ERROR",
       });
     },
@@ -206,7 +194,7 @@ export const ContractListingLayout = ({
     onSuccess: () => {
       router.replace(router.asPath);
       pushToast({
-        message: "Default contract updated successfully",
+        message: t("contracts.toasts.setDefaultSuccess"),
         status: "INFO",
       });
     },
@@ -220,8 +208,7 @@ export const ContractListingLayout = ({
       }
       void router.replace(router.asPath).catch(() => {});
       pushToast({
-        message:
-          apiMessage ?? "Failed to set default contract. Please try again.",
+        message: apiMessage ?? t("contracts.toasts.setDefaultError"),
         status: "ERROR",
       });
     },
@@ -243,7 +230,7 @@ export const ContractListingLayout = ({
   useEffect(() => {
     if (router.query.error === "contract-load-failed") {
       pushToast({
-        message: "Failed to load contract information.",
+        message: t("contracts.toasts.loadError"),
         status: "ERROR",
       });
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -303,6 +290,20 @@ export const ContractListingLayout = ({
     }
   };
 
+  const headerInfo = (
+    <Tooltip
+      content={t("contracts.listing.infoTooltip")}
+      placement="right-center"
+    >
+      <Icon
+        name="InfoFilled"
+        width={20}
+        height={20}
+        data-fs-bp-contract-listing-info-icon
+      />
+    </Tooltip>
+  );
+
   return (
     <GlobalLayout>
       <OrgUnitDetailsNavbar
@@ -325,7 +326,7 @@ export const ContractListingLayout = ({
 
         <section data-fs-bp-contract-listing-section>
           <HeaderInside
-            title="Contracts"
+            title={t("contracts.titles.contracts")}
             info={headerInfo}
             data-fs-bp-contract-listing-header
           >
@@ -340,7 +341,7 @@ export const ContractListingLayout = ({
           {isSingleContract ? (
             <BasicCard
               data-fs-bp-contracts-settings-card
-              footerMessage="Manage contract settings"
+              footerMessage={t("orgUnitDetails.links.manageContractSettings")}
               footerLink={buyerPortalRoutes.profileDetails({
                 orgUnitId: orgUnit.id,
                 contractId: defaultContractId,
@@ -369,6 +370,7 @@ export const ContractListingLayout = ({
                       accountingFieldsLoading: listAccountingFieldLoading,
                       onAddAccountingField: openAccountingFieldDrawer,
                       onAccountingFieldChange: listAccountingFieldRefresh,
+                      t,
                     })}
                   />
                 )}

package/src/features/contracts/layouts/ContractListingLayout/ContractSettingsNav.tsx

@@ -6,6 +6,7 @@ import { Icon } from "../../../shared/components";
 import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
 
 import type { AccountingField } from "../../../accounting-fields/types";
+import type { LocalizeFn } from "../../../shared/localization/types";
 import type { VerticalNavTreeItemProps } from "../../../shared/types";
 
 export const ICON_SIZE = 20;
@@ -17,6 +18,7 @@ export type BuildContractSettingsNavItemsParams = {
   accountingFieldsLoading?: boolean;
   onAddAccountingField: () => void;
   onAccountingFieldChange: () => void;
+  t: LocalizeFn;
 };
 
 export const buildContractSettingsNavItems = ({
@@ -26,32 +28,33 @@ export const buildContractSettingsNavItems = ({
   accountingFieldsLoading = false,
   onAddAccountingField,
   onAccountingFieldChange,
+  t,
 }: BuildContractSettingsNavItemsParams): VerticalNavTreeItemProps[] => {
   const linkParams = { orgUnitId, contractId };
 
   return [
     {
-      name: "Basic information",
+      name: t("contracts.nav.basicInformation"),
       link: buyerPortalRoutes.profileDetails(linkParams),
     },
     {
-      name: "Addresses",
+      name: t("layouts.navigation.addresses"),
       link: buyerPortalRoutes.addresses(linkParams),
     },
     {
-      name: "Payment methods",
+      name: t("layouts.navigation.paymentMethods"),
       link: buyerPortalRoutes.paymentMethods(linkParams),
     },
     {
-      name: "Credit cards",
+      name: t("layouts.navigation.creditCards"),
       link: buyerPortalRoutes.creditCards(linkParams),
     },
     {
-      name: "Assortment",
+      name: t("contracts.nav.assortment"),
       link: buyerPortalRoutes.productAssortment(linkParams),
     },
     {
-      name: "Accounting fields",
+      name: t("layouts.navigation.accountingFields"),
       loading: accountingFieldsLoading,
       submenu: {
         items: accountingFields.map((field) => ({