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

package/src/features/org-units/layouts/OrgUnitDetailsLayout/OrgUnitDetailsLayout.tsx

@@ -26,6 +26,7 @@ import { BasicDropdownMenuTrigger } from "../../../shared/components/BasicDropdo
 import { useDrawerProps } from "../../../shared/hooks";
 import { useMediaQuery } from "../../../shared/hooks/useMediaQuery";
 import { GlobalLayout } from "../../../shared/layouts";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import {
   getContractSettingsLinks,
   getFinanceSettingsLinks,
@@ -76,6 +77,7 @@ export const OrgUnitsDetailsLayout = ({
   loading = false,
 }: OrgUnitsDetailsLayoutProps) => {
   const isMobile = useMediaQuery(QUERY_TABLET);
+  const { t } = useLocalization();
 
   const isSingleContract = contracts.length <= 1;
 
@@ -110,14 +112,16 @@ export const OrgUnitsDetailsLayout = ({
   const organizationMenu = getOrganizationSettingsLinks({
     orgUnitId: orgUnit.id,
     contractId: linkParams.contractId,
+    t,
   });
 
-  const financeMenu = getFinanceSettingsLinks(linkParams);
+  const financeMenu = getFinanceSettingsLinks(linkParams, t);
 
-  const contractMenu =
-    getContractSettingsLinks(linkParams).map(mapLinksHandler);
+  const contractMenu = getContractSettingsLinks(linkParams, t).map(
+    mapLinksHandler
+  );
   contractMenu.push({
-    name: "Accounting fields",
+    name: t("orgUnitDetails.settings.accountingFields"),
     loading: listAccountingFieldLoading,
     submenu: {
       items: (listAccountingFieldData ?? []).map((item) => ({
@@ -233,27 +237,20 @@ export const OrgUnitsDetailsLayout = ({
             onClose={handleCloseAlert}
           >
             <span data-fs-bp-accounting-field-empty-alert-message>
-              {onlyOneFieldIsEmpty ? (
-                <>
-                  Buyers won't be able to place orders until all required
-                  information is provided. Add at least one{" "}
-                  <strong>{emptyAccountingFields[0].name}</strong> value to
-                  complete the setup.
-                </>
-              ) : (
-                <>
-                  Buyers won't be able to place orders until all required
-                  information is provided. Complete the accounting field
-                  settings.
-                </>
-              )}
+              {onlyOneFieldIsEmpty
+                ? t("orgUnitDetails.messages.accountingFieldEmptySingle", [
+                    <strong key="field-name">
+                      {emptyAccountingFields[0].name}
+                    </strong>,
+                  ])
+                : t("orgUnitDetails.messages.accountingFieldEmptyMultiple")}
             </span>
             {onlyOneFieldIsEmpty && (
               <button
                 data-fs-bp-accounting-field-empty-alert-btn
                 onClick={openAccountingValueDrawer}
               >
-                Add value
+                {t("orgUnitDetails.buttons.addValue")}
               </button>
             )}
           </AccountingFieldEmptyAlert>
@@ -262,7 +259,7 @@ export const OrgUnitsDetailsLayout = ({
           {isSingleContract ? (
             <BasicCard
               data-fs-bp-contracts-settings-card
-              footerMessage="Manage contract settings"
+              footerMessage={t("orgUnitDetails.links.manageContractSettings")}
               footerLink={buyerPortalRoutes.profileDetails({
                 orgUnitId: orgUnit.id,
                 contractId: contracts[0]?.id ?? "",
@@ -292,7 +289,7 @@ export const OrgUnitsDetailsLayout = ({
           ) : (
             <BasicCard
               enableHeader
-              title="Contracts"
+              title={t("orgUnitDetails.titles.contracts")}
               subTitle={contracts.length}
               data-fs-bp-contracts-list-card
             >
@@ -318,7 +315,7 @@ export const OrgUnitsDetailsLayout = ({
                           width={ICON_SIZE}
                           height={ICON_SIZE}
                         />
-                        Edit
+                        {t("orgUnitDetails.actions.edit")}
                       </DropdownItem>
                     </BasicDropdownMenu>
                   }
@@ -328,26 +325,30 @@ export const OrgUnitsDetailsLayout = ({
           )}
           <BasicCard
             data-fs-bp-organizations-settings-card
-            footerMessage="Manage organization settings"
+            footerMessage={t("orgUnitDetails.links.manageOrganizationSettings")}
             footerLink={buyerPortalRoutes.users({
               orgUnitId: orgUnit.id,
             })}
             enableFooter
           >
-            <VerticalNav.Menu title="Organization">
+            <VerticalNav.Menu title={t("orgUnitDetails.titles.organization")}>
               <VerticalNav.Tree items={organizationMenu} />
             </VerticalNav.Menu>
           </BasicCard>
           <BasicCard
             data-fs-bp-compliance-settings-card
-            footerMessage="Manage finance and compliance settings"
+            footerMessage={t(
+              "orgUnitDetails.links.manageFinanceAndComplianceSettings"
+            )}
             footerLink={buyerPortalRoutes.buyingPolicies({
               orgUnitId: orgUnit.id,
               contractId: contracts[0]?.id,
             })}
             enableFooter
           >
-            <VerticalNav.Menu title="Finance and Compliance">
+            <VerticalNav.Menu
+              title={t("orgUnitDetails.titles.financeAndCompliance")}
+            >
               <VerticalNav.Tree items={financeMenu} />
             </VerticalNav.Menu>
           </BasicCard>

package/src/features/org-units/layouts/OrgUnitsLayout/OrgUnitsLayout.tsx

@@ -14,6 +14,7 @@ import {
 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 { CreateOrgUnitDrawer, OrgUnitsHierarchyTree } from "../../components";
 import { useChildrenOrgUnits } from "../../hooks";
 
@@ -27,6 +28,7 @@ export type OrgUnitsLayoutProps = {
 export const OrgUnitsLayout = ({ data, search }: OrgUnitsLayoutProps) => {
   const { setQueryString, removeQueryString } = useQueryParams();
   const { currentOrgUnit, featureFlags } = useBuyerPortal();
+  const { t } = useLocalization();
 
   const { open, ...drawerProps } = useDrawerProps();
 
@@ -55,7 +57,7 @@ export const OrgUnitsLayout = ({ data, search }: OrgUnitsLayoutProps) => {
 
   const orgUnitsSection = (
     <section data-fs-org-units-section>
-      <HeaderInside title="Organizational Units">
+      <HeaderInside title={t("orgUnits.titles.organizationalUnits")}>
         <HeaderInside.Button onClick={open} />
       </HeaderInside>
 
@@ -76,7 +78,10 @@ export const OrgUnitsLayout = ({ data, search }: OrgUnitsLayoutProps) => {
 
       <section data-fs-hierarchy-tree-wrapper>
         {childrenOrgUnits?.length === 0 ? (
-          <EmptyState title="No organizational units yet" iconName="Group" />
+          <EmptyState
+            title={t("orgUnits.empty.noOrganizationalUnitsYet")}
+            iconName="Group"
+          />
         ) : (
           <>
             {childrenOrgUnits?.map((orgUnit) => (
@@ -106,7 +111,7 @@ export const OrgUnitsLayout = ({ data, search }: OrgUnitsLayoutProps) => {
       {featureFlags?.suma ? (
         <SumaPageLayout>{orgUnitsSection}</SumaPageLayout>
       ) : (
-        <OrgUnitTabsLayout pageName="Organization">
+        <OrgUnitTabsLayout pageName={t("orgUnits.titles.organization")}>
           {orgUnitsSection}
         </OrgUnitTabsLayout>
       )}

package/src/features/payment-methods/components/AddPaymentMethodsDrawer/AddPaymentMethodsDrawer.tsx

@@ -13,8 +13,8 @@ import {
   Table,
 } from "../../../shared/components";
 import { useBuyerPortal, useDebounce } from "../../../shared/hooks";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { DEBOUNCE_TIMEOUT } from "../../../shared/utils";
-import { CHANGES_TIMEOUT_MESSAGE } from "../../../shared/utils/constants";
 import { useAddPaymentMethodsToUnit } from "../../hooks";
 import { useDebouncedSearchPaymentMethods } from "../../hooks/useDebouncedSearchPaymentMethods";
 
@@ -42,6 +42,7 @@ export const AddPaymentMethodsDrawer = ({
 
   const { pushToast } = useUI();
   const router = useRouter();
+  const { t } = useLocalization();
   const selectAllRef = useRef<HTMLInputElement>(null);
 
   const { currentOrgUnit: orgUnit, currentContract: contract } =
@@ -79,7 +80,9 @@ export const AddPaymentMethodsDrawer = ({
 
   const handleSuccess = () => {
     pushToast({
-      message: `Payment methods added successfully\n${CHANGES_TIMEOUT_MESSAGE}`,
+      message: `${t("paymentMethods.toasts.methodsAdded")}\n${t(
+        "shared.messages.changesTimeout"
+      )}`,
       status: "INFO",
     });
     router.reload();
@@ -91,9 +94,7 @@ export const AddPaymentMethodsDrawer = ({
       onSuccess: handleSuccess,
       onError: (err) => {
         pushToast({
-          message:
-            err?.message ??
-            "An error occurred while adding the payment methods",
+          message: err?.message ?? t("paymentMethods.toasts.addMethodsFailed"),
           status: "ERROR",
         });
       },
@@ -155,7 +156,7 @@ export const AddPaymentMethodsDrawer = ({
     },
     {
       key: "name",
-      label: "Name",
+      label: t("paymentMethods.table.columnName"),
       align: "left",
       size: "100%",
     },
@@ -200,11 +201,11 @@ export const AddPaymentMethodsDrawer = ({
 
   const renderEmpty = () => (
     <EmptyState
-      title="No results found"
+      title={t("paymentMethods.empty.noResultsTitle")}
       description={
         querySearch.length > 0
-          ? "Try using different terms"
-          : "No payment methods found"
+          ? t("paymentMethods.empty.tryDifferentTerms")
+          : t("paymentMethods.empty.noPaymentMethodsFound")
       }
     />
   );
@@ -218,8 +219,8 @@ export const AddPaymentMethodsDrawer = ({
 
     return (
       <EmptyState
-        title="All methods already added"
-        description="There are no additional payment methods to add for this unit."
+        title={t("paymentMethods.empty.allMethodsAlreadyAddedTitle")}
+        description={t("paymentMethods.empty.noAdditionalMethods")}
       />
     );
   };
@@ -231,13 +232,19 @@ export const AddPaymentMethodsDrawer = ({
       size="large"
       {...props}
     >
-      <BasicDrawer.Heading title="Add payment methods" onClose={close} />
+      <BasicDrawer.Heading
+        title={t("paymentMethods.drawers.addTitle")}
+        onClose={close}
+      />
 
       <BasicDrawer.Body>
         <section data-fs-payment-methods-drawer>
           <p data-fs-bp-add-payment-methods-drawer-description>
-            Add payment methods
-            {orgUnit?.name && <span>{` to ${orgUnit.name}`}</span>}
+            {orgUnit?.name
+              ? t("paymentMethods.drawers.addDescription", [
+                  <span>{orgUnit.name}</span>,
+                ])
+              : t("paymentMethods.drawers.addTitle")}
           </p>
 
           {paymentMethods && (
@@ -270,7 +277,9 @@ export const AddPaymentMethodsDrawer = ({
                   onClick={() => setDrawerPage(drawerPage - 1)}
                   disabled={isLoadingPaymentMethods}
                 >
-                  {isLoadingPaymentMethods ? "Loading" : "Previous page"}
+                  {isLoadingPaymentMethods
+                    ? t("shared.labels.loading")
+                    : t("shared.pagination.previousPage")}
                 </Paginator.NextPageButton>
               ) : (
                 <></>
@@ -281,7 +290,9 @@ export const AddPaymentMethodsDrawer = ({
                   onClick={() => setDrawerPage(drawerPage + 1)}
                   disabled={isLoadingPaymentMethods}
                 >
-                  {isLoadingPaymentMethods ? "Loading" : "Next page"}
+                  {isLoadingPaymentMethods
+                    ? t("shared.labels.loading")
+                    : t("shared.pagination.nextPage")}
                 </Paginator.NextPageButton>
               )}
 
@@ -300,7 +311,7 @@ export const AddPaymentMethodsDrawer = ({
 
       <BasicDrawer.Footer data-fs-bp-add-payment-methods-drawer-footer>
         <BasicDrawer.Button variant="ghost" onClick={close}>
-          Cancel
+          {t("shared.buttons.cancel")}
         </BasicDrawer.Button>
 
         <BasicDrawer.Button
@@ -309,7 +320,7 @@ export const AddPaymentMethodsDrawer = ({
           onClick={handleSubmit}
           disabled={isAddPaymentMethodsLoading || selectedMethods.size === 0}
         >
-          Add
+          {t("shared.buttons.add")}
         </BasicDrawer.Button>
       </BasicDrawer.Footer>
     </BasicDrawer>

package/src/features/payment-methods/components/PaymentMethodSettingsDrawer/PaymentMethodSettingsDrawer.tsx

@@ -10,7 +10,7 @@ import {
   createListTypeOptions,
 } from "../../../shared/components";
 import { useSetScopeConfig, SCOPE_KEYS } from "../../../shared/hooks";
-import { CHANGES_TIMEOUT_MESSAGE } from "../../../shared/utils/constants";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 
 export type PaymentMethodSettingsDrawerProps = Omit<
   BasicDrawerProps,
@@ -20,9 +20,6 @@ export type PaymentMethodSettingsDrawerProps = Omit<
   onUpdate?: () => void;
 };
 
-const PAYMENT_METHOD_LIST_TYPE_OPTIONS =
-  createListTypeOptions("payment methods");
-
 export const PaymentMethodSettingsDrawer = ({
   close,
   onUpdate,
@@ -30,13 +27,20 @@ export const PaymentMethodSettingsDrawer = ({
 }: PaymentMethodSettingsDrawerProps) => {
   const { pushToast } = useUI();
   const router = useRouter();
+  const { t } = useLocalization();
+  const paymentMethodListTypeOptions = createListTypeOptions(
+    "payment methods",
+    t
+  );
 
   const [listType, setListType] = useState<"sync" | "custom">("custom");
 
   const { setScopeConfig, isSetScopeConfigLoading } = useSetScopeConfig({
     onSuccess: () => {
       pushToast({
-        message: `Scope configuration updated successfully\n${CHANGES_TIMEOUT_MESSAGE}`,
+        message: `${t("paymentMethods.toasts.scopeConfigUpdated")}\n${t(
+          "shared.messages.changesTimeout"
+        )}`,
         status: "INFO",
       });
       onUpdate?.();
@@ -44,7 +48,7 @@ export const PaymentMethodSettingsDrawer = ({
     },
     onError: () => {
       pushToast({
-        message: "Failed to update scope configuration",
+        message: t("paymentMethods.toasts.scopeConfigUpdateFailed"),
         status: "ERROR",
       });
     },
@@ -61,7 +65,7 @@ export const PaymentMethodSettingsDrawer = ({
 
   return (
     <SettingsDrawer
-      title="Payment method settings"
+      title={t("paymentMethods.settings.drawerTitle")}
       {...otherProps}
       close={close}
       onPrimaryAction={handleConfirmClick}
@@ -71,11 +75,11 @@ export const PaymentMethodSettingsDrawer = ({
       data-fs-bp-payment-method-settings-drawer
     >
       <SettingsDrawer.ListType
-        title="List type"
+        title={t("paymentMethods.settings.listTypeTitle")}
         name="payment-method-list-type"
         value={listType}
         onChange={setListType}
-        options={PAYMENT_METHOD_LIST_TYPE_OPTIONS}
+        options={paymentMethodListTypeOptions}
       />
     </SettingsDrawer>
   );

package/src/features/payment-methods/components/RemoveMethodButton/RemoveMethodButton.tsx

@@ -3,6 +3,7 @@ import type { ComponentProps } from "react";
 import { Tooltip } from "@faststore/ui";
 
 import { Icon } from "../../../shared/components";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 
 export type RemoveMethodButtonProps = {
   isLoading: boolean;
@@ -18,6 +19,8 @@ export const RemoveMethodButton = ({
   onClick,
   ...props
 }: RemoveMethodButtonProps) => {
+  const { t } = useLocalization();
+
   return (
     <Tooltip
       data-fs-payment-methods-tooltip
@@ -25,8 +28,8 @@ export const RemoveMethodButton = ({
       content={
         disabled
           ? disabledTooltipContent ??
-            "This payment method can't be removed. Each unit must have at least one active payment method. Add another one to proceed with the removal."
-          : "Remove from unit"
+            t("paymentMethods.tooltips.cannotRemoveLastMethod")
+          : t("paymentMethods.tooltips.removeFromUnit")
       }
     >
       <button

package/src/features/payment-methods/components/RemovePaymentMethodsDrawer/RemovePaymentMethodsDrawer.tsx

@@ -1,5 +1,6 @@
 import { type BasicDrawerProps, BasicDrawer } from "../../../shared/components";
 import { useBuyerPortal } from "../../../shared/hooks";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { useRemovePaymentMethod } from "../../hooks/useRemovePaymentMethodSubmit";
 
 import type { PaymentMethodId } from "../../../shared/types";
@@ -20,6 +21,7 @@ export const RemovePaymentMethodsDrawer = ({
   ...props
 }: RemovePaymentMethodsDrawerProps) => {
   const { currentOrgUnit: orgUnit } = useBuyerPortal();
+  const { t } = useLocalization();
 
   const handleSuccess = () => {
     close();
@@ -43,25 +45,26 @@ export const RemovePaymentMethodsDrawer = ({
       {...props}
     >
       <BasicDrawer.Heading
-        title="Remove payment method from unit"
+        title={t("paymentMethods.drawers.removeTitle")}
         onClose={close}
       />
       <BasicDrawer.Body>
         <section data-fs-payment-methods-drawer>
           <p data-fs-bp-remove-payment-methods-drawer-description>
-            Remove <span>{paymentMethod?.name}</span> contract from{" "}
-            <span>{orgUnit?.name}</span> organizational unit?
+            {t("paymentMethods.delete.removeConfirm", [
+              <span key="method">{paymentMethod?.name}</span>,
+              <span key="unit">{orgUnit?.name}</span>,
+            ])}
           </p>
           <p data-fs-bp-remove-payment-methods-drawer-description>
-            This action will prevent users in this unit from acessing this
-            payment method during checkout.
+            {t("paymentMethods.delete.removeWarning")}
           </p>
         </section>
       </BasicDrawer.Body>
 
       <BasicDrawer.Footer data-fs-bp-add-payment-methods-drawer-footer>
         <BasicDrawer.Button variant="ghost" onClick={close}>
-          Cancel
+          {t("shared.buttons.cancel")}
         </BasicDrawer.Button>
         <BasicDrawer.Button
           variant="confirm"
@@ -69,7 +72,7 @@ export const RemovePaymentMethodsDrawer = ({
           onClick={() => handleSubmit(paymentMethod.id)}
           disabled={readonly}
         >
-          Remove
+          {t("shared.buttons.remove")}
         </BasicDrawer.Button>
       </BasicDrawer.Footer>
     </BasicDrawer>

package/src/features/payment-methods/hooks/useRemovePaymentMethodSubmit.ts

@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import { useUI } from "@faststore/ui";
 
 import { useBuyerPortal } from "../../shared/hooks";
-import { CHANGES_TIMEOUT_MESSAGE } from "../../shared/utils/constants";
+import { useLocalization } from "../../shared/localization/LocalizationContext";
 
 import { useRemovePaymentMethodFromUnit } from "./useRemovePaymentMethodsFromUnit";
 
@@ -13,6 +13,7 @@ import type { PaymentMethodData } from "../types";
 export function useRemovePaymentMethod(onAfterSuccess?: () => void) {
   const router = useRouter();
   const { pushToast } = useUI();
+  const { t } = useLocalization();
   const { currentOrgUnit: orgUnit, currentContract: contract } =
     useBuyerPortal();
 
@@ -24,7 +25,9 @@ export function useRemovePaymentMethod(onAfterSuccess?: () => void) {
       onSuccess: () => {
         onAfterSuccess?.();
         pushToast({
-          message: `Payment method removed successfully\n${CHANGES_TIMEOUT_MESSAGE}`,
+          message: `${t("paymentMethods.toasts.methodRemoved")}\n${t(
+            "shared.messages.changesTimeout"
+          )}`,
           status: "INFO",
         });
         router.reload();
@@ -32,8 +35,7 @@ export function useRemovePaymentMethod(onAfterSuccess?: () => void) {
       onError: (err) => {
         pushToast({
           message:
-            err?.message ??
-            "An error occurred while removing the payment method",
+            err?.message ?? t("paymentMethods.toasts.removeMethodFailed"),
           status: "ERROR",
         });
       },

package/src/features/payment-methods/layouts/PaymentMethodsLayout/PaymentMethodsLayout.tsx

@@ -19,6 +19,7 @@ import {
   SCOPE_KEYS,
 } from "../../../shared/hooks";
 import { ContractTabsLayout, GlobalLayout } from "../../../shared/layouts";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import {
   AddPaymentMethodsDrawer,
   RemoveMethodButton,
@@ -43,6 +44,7 @@ export const PaymentMethodsLayout = ({
   page = 1,
 }: PaymentMethodsLayoutProps) => {
   const router = useRouter();
+  const { t } = useLocalization();
   const [selectedMethod, setSelectedMethod] = useState<
     PaymentMethodData | undefined
   >(undefined);
@@ -110,15 +112,18 @@ export const PaymentMethodsLayout = ({
     openRemoveDrawer();
   };
 
-  const columns = getTableColumns({ actionsLength: 1 });
+  const columns = getTableColumns({
+    actionsLength: 1,
+    nameColumnLabel: t("shared.labels.name"),
+  });
 
   const renderEmpty = () => (
     <EmptyState
-      title="No results found"
+      title={t("paymentMethods.empty.noResultsTitle")}
       description={
         searchTerm.length > 0
-          ? "Try using different terms"
-          : "No payment methods found"
+          ? t("paymentMethods.empty.tryDifferentTerms")
+          : t("paymentMethods.empty.noPaymentMethodsFound")
       }
     />
   );
@@ -136,12 +141,11 @@ export const PaymentMethodsLayout = ({
     let tooltipMessage = "";
 
     if (allPaymentMethodsSelected) {
-      tooltipMessage =
-        "All available payment methods have already been added to this organizational unit";
+      tooltipMessage = t("paymentMethods.tooltips.allMethodsAdded");
     }
 
     if (isSyncMode) {
-      tooltipMessage = "Cannot add items while using shared list";
+      tooltipMessage = t("paymentMethods.tooltips.cannotAddSharedList");
     }
 
     return (
@@ -187,7 +191,7 @@ export const PaymentMethodsLayout = ({
                   disabled={isRemoveDisabled}
                   disabledTooltipContent={
                     isSyncMode
-                      ? "Cannot remove items while using shared list"
+                      ? t("paymentMethods.tooltips.cannotRemoveSharedList")
                       : undefined
                   }
                 />
@@ -206,21 +210,23 @@ export const PaymentMethodsLayout = ({
         orgUnitId={orgUnit?.id ?? ""}
         contractName={contract?.name ?? ""}
         contractId={contract?.id ?? ""}
-        pageName="Contract"
+        pageName={t("shared.labels.contract")}
       >
         <section data-fs-payment-methods-section>
-          <HeaderInside title="Payment methods">{renderActions()}</HeaderInside>
+          <HeaderInside title={t("paymentMethods.titles.paymentMethods")}>
+            {renderActions()}
+          </HeaderInside>
 
           {!isLoading && isContractEmpty ? (
             <EmptyState
               iconName="WarningCircle"
-              title="No payment methods available"
+              title={t("paymentMethods.empty.noPaymentMethodsAvailableTitle")}
             >
               <p data-fs-bp-payment-empty-message>
-                This contract does not have any payment methods configured.
+                {t("paymentMethods.empty.noPaymentMethodsConfigured")}
               </p>
               <p data-fs-bp-payment-empty-message>
-                Orders cannot be placed until a payment method is defined.
+                {t("paymentMethods.empty.ordersCannotBePlaced")}
               </p>
             </EmptyState>
           ) : (
@@ -250,13 +256,13 @@ export const PaymentMethodsLayout = ({
                       onClick={decreasePage}
                       disabled={page <= 1 || isLoading}
                     >
-                      Previous Page
+                      {t("shared.pagination.previousPage")}
                     </Paginator.NextPageButton>
                     <Paginator.NextPageButton
                       onClick={increasePage}
                       disabled={isLastPage || isLoading}
                     >
-                      Next Page
+                      {t("shared.pagination.nextPage")}
                     </Paginator.NextPageButton>
 
                     <Paginator.Counter

package/src/features/product-assortment/components/ProductAssortmentTable/ProductAssortmentTable.tsx

@@ -4,15 +4,11 @@ import { useUI } from "@faststore/ui";
 
 import { Table } from "../../../shared/components";
 import { getTableColumns } from "../../../shared/components/Table/utils/tableColumns";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { useSetAssortment } from "../../hooks/useSetAssortment";
 
 import type { ProductAssortmentWithAdditionalInformation } from "../../types";
 
-const columns = [
-  { key: "radio", label: "", size: "3rem" as const },
-  ...getTableColumns({}),
-];
-
 export function ProductAssortmentTable({
   productAssortment,
   contractId,
@@ -24,9 +20,17 @@ export function ProductAssortmentTable({
   orgUnitId: string;
   isLoadingList?: boolean;
 }) {
+  const { t } = useLocalization();
   const { pushToast } = useUI();
   const [selectedId, setSelectedId] = useState<string | null>(null);
 
+  const columns = [
+    { key: "radio", label: "", size: "3rem" as const },
+    ...getTableColumns({
+      nameColumnLabel: t("productAssortment.table.columnName"),
+    }),
+  ];
+
   useEffect(() => {
     const enabledItem = productAssortment.find((item) => item.enabled);
     if (enabledItem) {
@@ -51,12 +55,12 @@ export function ProductAssortmentTable({
     if (result === null) {
       setSelectedId(previousId);
       pushToast({
-        message: "Failed to save assortment",
+        message: t("productAssortment.toasts.saveFailed"),
         status: "ERROR",
       });
     } else {
       pushToast({
-        message: "Assortment saved successfully",
+        message: t("productAssortment.toasts.saveSuccess"),
         status: "INFO",
       });
     }