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

package/src/features/budgets/components/BudgetEditNotificationDrawer/BudgetEditNotificationDrawer.tsx

@@ -6,8 +6,8 @@ import { useUI } from "@faststore/ui";
 
 import { BasicDrawer, type BasicDrawerProps } from "../../../shared/components";
 import { useBuyerPortal } from "../../../shared/hooks";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { parseAmount } from "../../../shared/utils/budgetAmountParse";
-import { CHANGES_TIMEOUT_MESSAGE } from "../../../shared/utils/constants";
 import { useUpdateBudget } from "../../hooks";
 import { BUDGET_NOTIFICATION_BLOCK_MESSAGES } from "../../messages/budgetNotifications";
 import { handleBudgetError } from "../../utils";
@@ -37,6 +37,7 @@ export function BudgetEditNotificationDrawer({
   contractId,
   ...props
 }: BudgetEditNotificationDrawerProps) {
+  const { t } = useLocalization();
   const { pushToast } = useUI();
   const { clientContext } = useBuyerPortal();
   const router = useRouter();
@@ -59,7 +60,9 @@ export function BudgetEditNotificationDrawer({
     options: {
       onSuccess: () => {
         pushToast({
-          message: `Budget updated successfully.\n${CHANGES_TIMEOUT_MESSAGE}`,
+          message: `${t("budgets.toasts.budgetUpdated")}\n${t(
+            "shared.messages.changesTimeout"
+          )}`,
           status: "INFO",
         });
         close();
@@ -70,6 +73,7 @@ export function BudgetEditNotificationDrawer({
           error,
           orgUnitId,
           onNavigateToUser: (path) => router.push(path),
+          t,
         });
 
         pushToast(toastConfig);
@@ -98,7 +102,7 @@ export function BudgetEditNotificationDrawer({
         setShowNotificationsEmailError(true);
       }
       pushToast({
-        message: BUDGET_NOTIFICATION_BLOCK_MESSAGES[notifState.reason],
+        message: t(BUDGET_NOTIFICATION_BLOCK_MESSAGES[notifState.reason]),
         status: "ERROR",
       });
       return;
@@ -130,7 +134,10 @@ export function BudgetEditNotificationDrawer({
       size="large"
       {...props}
     >
-      <BasicDrawer.Heading title="Edit notifications" onClose={close} />
+      <BasicDrawer.Heading
+        title={t("budgets.edit.notificationsTitle")}
+        onClose={close}
+      />
 
       <BasicDrawer.Body>
         <BudgetNotificationForm
@@ -148,7 +155,7 @@ export function BudgetEditNotificationDrawer({
 
       <BasicDrawer.Footer data-fs-bp-budget-notifications-drawer-footer>
         <BasicDrawer.Button variant="ghost" onClick={close}>
-          Cancel
+          {t("shared.buttons.cancel")}
         </BasicDrawer.Button>
         <BasicDrawer.Button
           variant="confirm"
@@ -156,7 +163,7 @@ export function BudgetEditNotificationDrawer({
           disabled={isLoading}
           isLoading={isLoading}
         >
-          Save
+          {t("shared.buttons.save")}
         </BasicDrawer.Button>
       </BasicDrawer.Footer>
     </BasicDrawer>

package/src/features/budgets/components/BudgetNotificationForm/BudgetNotificationForm.tsx

@@ -8,6 +8,7 @@ import {
   Table,
 } from "../../../shared/components";
 import { useBuyerPortal } from "../../../shared/hooks";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { CurrencyType, LocaleType } from "../../../shared/types";
 import { useDebouncedSearchBudgetNotification } from "../../hooks/useDebouncedSearchBudgetNotification";
 import {
@@ -59,6 +60,7 @@ export const BudgetNotificationForm = ({
   showUsersError = false,
   showInvalidEmailError = false,
 }: BudgetNotificationFormProps) => {
+  const { t } = useLocalization();
   const { currentUser } = useBuyerPortal();
   const { pushToast } = useUI();
 
@@ -161,12 +163,15 @@ export const BudgetNotificationForm = ({
       unitId,
       search: inputValue,
     });
-  const loadingObject: UserOption = { id: "loading", name: "Loading..." };
+  const loadingObject: UserOption = {
+    id: "loading",
+    name: t("shared.labels.loading"),
+  };
 
   useEffect(() => {
     const mapped: UserOption[] = (usersResponse?.users ?? []).map((u) => ({
       id: String(u.userId),
-      name: String(u.name ?? "Usuário"),
+      name: String(u.name ?? t("budgets.labels.defaultUserName")),
       email: u.email,
     }));
 
@@ -176,7 +181,9 @@ export const BudgetNotificationForm = ({
         ? {
             id: String(currentUser.id),
             email: currentUser.email ?? "",
-            name: currentUser.name ? `${currentUser.name} (You)` : "You",
+            name: currentUser.name
+              ? `${currentUser.name} ${t("budgets.labels.youSuffix")}`
+              : t("budgets.labels.you"),
           }
         : null;
 
@@ -185,7 +192,7 @@ export const BudgetNotificationForm = ({
     );
 
     setOptions(selfOption ? [selfOption, ...withEmail] : withEmail);
-  }, [usersResponse, currentUser]);
+  }, [usersResponse, currentUser, t]);
 
   const addUserIfNotExists = (opt: UserOption) => {
     const exists = selectedUsers.some((u) => u.userId === opt.id);
@@ -193,8 +200,7 @@ export const BudgetNotificationForm = ({
 
     if (!isValidNotificationUserEmail(opt.email)) {
       pushToast({
-        message:
-          "This user has no valid email on file and cannot receive budget notifications.",
+        message: t("budgets.errors.userNoValidEmail"),
         status: "ERROR",
       });
       return;
@@ -229,6 +235,7 @@ export const BudgetNotificationForm = ({
     );
   };
 
+  const removeThresholdLabel = t("budgets.actions.removeThreshold");
   const sizeProps = { width: 20, height: 20 };
   const disableRows = readonly || !enabled;
   const isLoading = isLoadingUsers || isDebouncing;
@@ -242,9 +249,9 @@ export const BudgetNotificationForm = ({
     selectedUsers.some((u) => !isValidNotificationUserEmail(u.userEmail));
 
   const addUsersAutocompleteHelperLabel = showNoUsersError
-    ? BUDGET_NOTIFICATION_FORM_HELPER_NO_USERS
+    ? t(BUDGET_NOTIFICATION_FORM_HELPER_NO_USERS)
     : showEmailFieldError
-    ? BUDGET_NOTIFICATION_FORM_HELPER_INVALID_EMAIL
+    ? t(BUDGET_NOTIFICATION_FORM_HELPER_INVALID_EMAIL)
     : undefined;
 
   return (
@@ -253,7 +260,9 @@ export const BudgetNotificationForm = ({
         data-fs-bp-budget-notification-row-section
         data-fs-bp-budget-notification-renew
       >
-        <span data-fs-bp-budget-notification-renew-label>Notifications</span>
+        <span data-fs-bp-budget-notification-renew-label>
+          {t("budgets.notificationsForm.title")}
+        </span>
         <div data-fs-bp-budget-notification-row-section-action>
           <Toggle
             id="notificationsToggle"
@@ -265,10 +274,7 @@ export const BudgetNotificationForm = ({
       </div>
 
       <div data-fs-bp-budget-notification-section-label>
-        <span>
-          Set up to {MAX_THRESHOLDS} thresholds and notify users when the total
-          amount reaches specific percentages
-        </span>
+        <span>{t("budgets.notificationsForm.thresholdsDescription")}</span>
       </div>
 
       {enabled && (
@@ -278,16 +284,20 @@ export const BudgetNotificationForm = ({
               <Table layoutFixed>
                 <Table.Head
                   columns={[
-                    { key: "threshold", label: "Threshold", size: "medium" },
+                    {
+                      key: "threshold",
+                      label: t("budgets.table.threshold"),
+                      size: "medium",
+                    },
                     {
                       key: "consumed",
-                      label: "Consumed",
+                      label: t("budgets.table.consumed"),
                       size: "medium",
                       align: "right",
                     },
                     {
                       key: "remaining",
-                      label: "Remaining",
+                      label: t("budgets.table.remaining"),
                       size: "large",
                       align: "right",
                     },
@@ -325,8 +335,8 @@ export const BudgetNotificationForm = ({
                             data-fs-bp-budget-notification-remove-button
                             type="button"
                             onClick={() => removeThreshold(idx)}
-                            aria-label="Remove threshold"
-                            title="Remove threshold"
+                            aria-label={removeThresholdLabel}
+                            title={removeThresholdLabel}
                             disabled={disableRows}
                           >
                             <Icon
@@ -364,21 +374,18 @@ export const BudgetNotificationForm = ({
                   thresholds.length >= MAX_THRESHOLDS
                 }
               >
-                Add threshold
+                {t("budgets.notificationsForm.addThreshold")}
               </button>
             </div>
           </div>
 
           <div data-fs-bp-budget-notification-section-user>
             <div data-fs-bp-budget-notification-section-label>
-              <span>
-                Add users to be notified by email. At least one user must be
-                added
-              </span>
+              <span>{t("budgets.notificationsForm.addUsersDescription")}</span>
             </div>
 
             <AutocompleteDropdown
-              label="Add users"
+              label={t("budgets.forms.addUsers")}
               value={inputValue}
               shouldOpenOnFocus={false}
               autoComplete="off"

package/src/features/budgets/components/BudgetNotificationsInfo/BudgetNotificationsInfo.tsx

@@ -2,6 +2,7 @@ import { Badge } from "@faststore/ui";
 
 import { EmptyState } from "../../../shared/components";
 import { useDrawerProps } from "../../../shared/hooks";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { BudgetEditNotificationDrawer } from "../BudgetEditNotificationDrawer/BudgetEditNotificationDrawer";
 
 import type {
@@ -21,12 +22,13 @@ type BudgetNotificationsInfoProps = {
 const DetailRow = ({
   label,
   notifications,
+  isUsers,
 }: {
   label: string;
   notifications: BudgetNotification;
+  isUsers?: boolean;
 }) => {
-  const isUserLabel = label === "Users";
-  const list = isUserLabel
+  const list = isUsers
     ? (notifications.users as NotificationUsers[])
     : (notifications.thresholds as NotificationThresholds[]);
 
@@ -37,7 +39,7 @@ const DetailRow = ({
         <span data-fs-bp-budget-notifications-details-row-value>
           {list.map((item, index) => (
             <Badge key={index} size="big">
-              {isUserLabel
+              {isUsers
                 ? (item as NotificationUsers).userName
                 : `${(item as NotificationThresholds).value}%`}
             </Badge>
@@ -55,6 +57,7 @@ export const BudgetNotificationsInfo = ({
   orgUnitId,
   contractId,
 }: BudgetNotificationsInfoProps) => {
+  const { t } = useLocalization();
   const {
     open: openNotificationsDrawerProps,
     isOpen: isEditDrawerOpen,
@@ -66,13 +69,15 @@ export const BudgetNotificationsInfo = ({
       <div data-fs-bp-budget-notifications>
         <div data-fs-bp-budget-notifications-details>
           <div data-fs-budget-notifications-edit-line>
-            <span data-fs-budget-notifications-edit-title>Notifications</span>
+            <span data-fs-budget-notifications-edit-title>
+              {t("budgets.notificationsForm.title")}
+            </span>
             <button
               type="button"
               data-fs-budget-notifications-edit-button
               onClick={openNotificationsDrawerProps}
             >
-              Edit
+              {t("shared.buttons.edit")}
             </button>
           </div>
 
@@ -81,20 +86,21 @@ export const BudgetNotificationsInfo = ({
               <hr data-fs-bp-budget-notifications-divider />
               <DetailRow
                 key="Thresholds"
-                label="Thresholds"
+                label={t("budgets.notificationsForm.thresholds")}
                 notifications={initialBudget.notifications}
               />
               <DetailRow
                 key="Users"
-                label="Users"
+                label={t("budgets.notificationsForm.users")}
                 notifications={initialBudget.notifications}
+                isUsers
               />
             </>
           ) : (
             <div data-fs-bp-budget-notifications-empty>
               <EmptyState
-                title="No notifications"
-                description="Set up to 5 thresholds and notify users when the total amount reaches specific percentages."
+                title={t("budgets.empty.noNotifications")}
+                description={t("budgets.empty.noNotificationsDescription")}
               />
             </div>
           )}

package/src/features/budgets/components/BudgetRemainingBalance/BudgetRemainingBalance.tsx

@@ -1,3 +1,4 @@
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { formatCurrency } from "../../../shared/utils";
 import { BudgetProgressBar } from "../BudgetProgressBar/BudgetProgressBar";
 
@@ -10,11 +11,14 @@ export const BudgetRemainingBalance = ({
   remaining,
   total,
 }: BudgetRemainingBalanceFormProps) => {
+  const { t } = useLocalization();
   const used = total - remaining;
 
   return (
     <div data-fs-bp-budget-remaining-balance>
-      <p data-fs-bp-budget-remaining-balance-header>Remaining balance</p>
+      <p data-fs-bp-budget-remaining-balance-header>
+        {t("budgets.labels.remainingBalance")}
+      </p>
       <div data-fs-bp-budget-remaining-balance-header-content>
         <span data-fs-bp-budget-remaining-balance-label-remaining>
           {formatCurrency(remaining)}
@@ -22,7 +26,7 @@ export const BudgetRemainingBalance = ({
         <span data-fs-bp-budget-remaining-balance-label-used>
           {formatCurrency(Math.abs(used))}{" "}
           <span data-fs-bp-budget-remaining-balance-label-used-total>
-            of {formatCurrency(total)} used
+            {t("budgets.labels.ofTotalUsed", [formatCurrency(total)])}
           </span>
         </span>
         <BudgetProgressBar

package/src/features/budgets/components/BudgetSettingsInfo/BudgetSettingsInfo.tsx

@@ -1,4 +1,5 @@
 import { useDrawerProps } from "../../../shared/hooks";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { formatCurrency } from "../../../shared/utils";
 import { formatDateToWET } from "../../../shared/utils/formatDateToWet";
 import { EditBudgetDrawer } from "../EditBudgetDrawer/EditBudgetDrawer";
@@ -28,11 +29,12 @@ export const BudgetSettingsInfoBalance = ({
   orgUnitId,
   budgetId,
 }: BudgetSettingsInfoProps) => {
+  const { t } = useLocalization();
   const formattedAmount = `${formatCurrency(Number(initialBudget?.amount))}`;
 
-  const formattedPeriod = `${formatDateToWET(
-    initialBudget.startDate
-  )} to ${formatDateToWET(initialBudget.expirationDate ?? "")}`;
+  const formattedPeriod = `${formatDateToWET(initialBudget.startDate)}${t(
+    "budgets.labels.dateRangeSeparator"
+  )}${formatDateToWET(initialBudget.expirationDate ?? "")}`;
 
   const {
     open: openEditDrawerProps,
@@ -45,23 +47,38 @@ export const BudgetSettingsInfoBalance = ({
       <div data-fs-bp-budget-settings>
         <div data-fs-bp-budget-settings-details>
           <div data-fs-budget-settings-edit-line>
-            <span data-fs-budget-settings-edit-title>Settings</span>
+            <span data-fs-budget-settings-edit-title>
+              {t("budgets.settingsInfo.title")}
+            </span>
             <button
               type="button"
               data-fs-budget-settings-edit-button
               onClick={openEditDrawerProps}
             >
-              Edit
+              {t("shared.buttons.edit")}
             </button>
           </div>
           <hr data-fs-bp-budget-settings-divider />
 
-          <DetailRow label="Name" value={initialBudget.name} />
-          <DetailRow label="Amount" value={formattedAmount} />
-          <DetailRow label="Period" value={formattedPeriod} />
           <DetailRow
-            label="Automatic renewal"
-            value={initialBudget.autoResetOnPeriodEnd ? "Active" : "Inactive"}
+            label={t("budgets.settingsInfo.name")}
+            value={initialBudget.name}
+          />
+          <DetailRow
+            label={t("budgets.settingsInfo.amount")}
+            value={formattedAmount}
+          />
+          <DetailRow
+            label={t("budgets.settingsInfo.period")}
+            value={formattedPeriod}
+          />
+          <DetailRow
+            label={t("budgets.settingsInfo.automaticRenewal")}
+            value={
+              initialBudget.autoResetOnPeriodEnd
+                ? t("budgets.labels.active")
+                : t("budgets.labels.inactive")
+            }
           />
         </div>
       </div>

package/src/features/budgets/components/BudgetUsersTable/BudgetUsersTable.tsx

@@ -4,6 +4,7 @@ import { Icon, Tooltip } from "@faststore/ui";
 
 import { Table } from "../../../shared/components";
 import { getTableColumns } from "../../../shared/components/Table/utils/tableColumns";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 
 type UserRow = {
   userId: string;
@@ -23,19 +24,21 @@ type BudgetUsersTableProps = {
 function BudgetUsersTableBase({
   users,
   onRemove,
-  emptyMessage = "No users found",
+  emptyMessage,
   className,
   disabled = false,
 }: BudgetUsersTableProps) {
+  const { t } = useLocalization();
+  const resolvedEmptyMessage = emptyMessage ?? t("budgets.empty.noUsersFound");
   const columns = getTableColumns({
     actionsLength: onRemove ? 1 : 0,
-    nameColumnLabel: "User name",
+    nameColumnLabel: t("budgets.table.userName"),
     nameColumnKey: "name",
     nameColumnSize: "medium",
     extraColumns: [
       {
         key: "email",
-        label: "Email",
+        label: t("budgets.table.email"),
         align: "left",
         size: "100%",
         hideOnScreenSize: "phonemid",
@@ -54,7 +57,7 @@ function BudgetUsersTableBase({
 
         <Table.Body>
           {users.length === 0 ? (
-            <Table.Row title={emptyMessage} enabled={false}>
+            <Table.Row title={resolvedEmptyMessage} enabled={false}>
               <Table.Cell />
             </Table.Row>
           ) : (
@@ -70,10 +73,14 @@ function BudgetUsersTableBase({
                     <button
                       type="button"
                       data-fs-bp-users-remove
-                      aria-label={`Remove ${u.userName}`}
+                      aria-label={t("budgets.actions.removeUser", [u.userName])}
                       disabled={rowDisabled}
                       onClick={() => onRemove?.(u.userId)}
-                      title={rowDisabled ? undefined : `Remove ${u.userName}`}
+                      title={
+                        rowDisabled
+                          ? undefined
+                          : t("budgets.actions.removeUser", [u.userName])
+                      }
                     >
                       <Icon name="MinusCircle" width={20} height={20} />
                     </button>
@@ -82,7 +89,7 @@ function BudgetUsersTableBase({
                   return rowDisabled && users.length === 1 ? (
                     <Tooltip
                       placement="left-center"
-                      content="At least one user must be notified. Add another user before removing this one."
+                      content={t("budgets.tooltips.atLeastOneUserRequired")}
                     >
                       {button}
                     </Tooltip>

package/src/features/budgets/components/BudgetsTable/BudgetsTable.tsx

@@ -6,6 +6,7 @@ import { Icon, Table } from "../../../shared/components";
 import { BasicDropdownMenu } from "../../../shared/components/BasicDropdownMenu/BasicDropdownMenu";
 import { getTableColumns } from "../../../shared/components/Table/utils/tableColumns";
 import { useBuyerPortal } from "../../../shared/hooks";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { formatCurrency } from "../../../shared/utils";
 import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
 import { BudgetProgressBar } from "../BudgetProgressBar/BudgetProgressBar";
@@ -31,6 +32,7 @@ export function BudgetsTable({
   loading,
   onClickCreateNotification,
 }: IBudgetsTable) {
+  const { t } = useLocalization();
   const budgets = data;
   const route = useRouter();
   const { currentOrgUnit: orgUnit, currentContract: contract } =
@@ -46,23 +48,24 @@ export function BudgetsTable({
   const columns = getTableColumns({
     nameColumnSize: "18.625rem",
     actionsLength: 1.75,
+    nameColumnLabel: t("shared.labels.name"),
     extraColumns: [
       {
-        label: "Remaining",
+        label: t("budgets.table.remaining"),
         key: "remaining",
         size: "100%",
         hideOnScreenSize: "phonemid",
         align: "left",
       },
       {
-        label: "Expiration date",
+        label: t("budgets.table.expirationDate"),
         key: "date",
         size: "8.75rem",
         hideOnScreenSize: "phonemid",
         align: "right",
       },
       {
-        label: "Total (USD)",
+        label: t("budgets.table.totalUsd"),
         key: "total",
         size: "8.75rem",
         hideOnScreenSize: "tablet",
@@ -92,21 +95,21 @@ export function BudgetsTable({
                       onClick={() => route.push(detailsRoute(item.id))}
                     >
                       <Icon name="OpenInNew" width={20} height={20} />
-                      <span>Open</span>
+                      <span>{t("shared.buttons.open")}</span>
                     </DropdownItem>
                     <DropdownItem
                       data-fs-bp-testid="dropdown-budget-edit"
                       onClick={() => onClickEditBudget(item.id)}
                     >
                       <Icon name="Edit" width={20} height={20} />
-                      <span>Edit settings</span>
+                      <span>{t("budgets.dropdown.editSettings")}</span>
                     </DropdownItem>
                     {onClickCreateNotification && (
                       <DropdownItem
                         onClick={() => onClickCreateNotification(item.id)}
                       >
                         <Icon name="Edit" width={20} height={20} />
-                        <span>Edit notifications</span>
+                        <span>{t("budgets.dropdown.editNotifications")}</span>
                       </DropdownItem>
                     )}
                     <DropdownItem
@@ -114,7 +117,7 @@ export function BudgetsTable({
                       onClick={() => onClickAllocationPage(item.id)}
                     >
                       <Icon name="Add" width={20} height={20} />
-                      <span>Add allocations</span>
+                      <span>{t("budgets.dropdown.addAllocations")}</span>
                     </DropdownItem>
                     <BasicDropdownMenu.Separator />
                     <DropdownItem
@@ -123,7 +126,7 @@ export function BudgetsTable({
                       onClick={() => openDeleteDrawer(item.id)}
                     >
                       <Icon name="Delete" width={20} height={20} />
-                      <span>Delete</span>
+                      <span>{t("shared.buttons.delete")}</span>
                     </DropdownItem>
                   </BasicDropdownMenu>
                 }

package/src/features/budgets/components/CreateBudgetAllocationDrawer/CreateBudgetAllocationDrawer.tsx

@@ -10,11 +10,11 @@ import {
   Icon,
   type BasicDrawerProps,
 } from "../../../shared/components";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import {
   sortingOptionsAllocations,
   type Dictionary,
 } from "../../../shared/utils";
-import { CHANGES_TIMEOUT_MESSAGE } from "../../../shared/utils/constants";
 import { getKeyByValue } from "../../../shared/utils/getKeyByValue";
 import { useAddAllocations } from "../../hooks/useAddAllocations";
 import { useGetAllocations } from "../../hooks/useGetAllocations";
@@ -38,6 +38,7 @@ export const CreateBudgetAllocationDrawer = ({
   budgetId,
   ...props
 }: CreateBudgetAllocationDrawerProps) => {
+  const { t } = useLocalization();
   const router = useRouter();
   const { pushToast } = useUI();
 
@@ -90,7 +91,9 @@ export const CreateBudgetAllocationDrawer = ({
     options: {
       onSuccess: () => {
         pushToast({
-          message: `Allocation successfully added\n${CHANGES_TIMEOUT_MESSAGE}`,
+          message: `${t("budgets.toasts.allocationAdded")}\n${t(
+            "shared.messages.changesTimeout"
+          )}`,
           status: "INFO",
         });
         close();
@@ -135,7 +138,7 @@ export const CreateBudgetAllocationDrawer = ({
         title={
           <div data-fs-bp-create-budget-drawer-header-arrow>
             <Icon name="ArrowPointLeft" onClick={close} />
-            <span>Add budget allocations</span>
+            <span>{t("budgets.create.addBudgetAllocations")}</span>
           </div>
         }
         onClose={close}
@@ -166,14 +169,14 @@ export const CreateBudgetAllocationDrawer = ({
 
       <BasicDrawer.Footer>
         <BasicDrawer.Button variant="ghost" onClick={close}>
-          Cancel
+          {t("shared.buttons.cancel")}
         </BasicDrawer.Button>
         <BasicDrawer.Button
           variant="confirm"
           onClick={handleSave}
           isLoading={isFetchLoading || isLoadingAddAllocationsToBudget}
         >
-          Save
+          {t("shared.buttons.save")}
         </BasicDrawer.Button>
       </BasicDrawer.Footer>
     </BasicDrawer>