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

package/src/features/accounting-fields/components/AccountingValueDropdown/AccountingValueDropdown.tsx

@@ -2,6 +2,7 @@ import { DropdownItem, useUI } from "@faststore/ui";
 
 import { BasicDropdownMenu, Icon } from "../../../shared/components";
 import { useDrawerProps } from "../../../shared/hooks";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { useSetDefaultValue, useUnsetDefaultValue } from "../../hooks";
 import { DeleteAccountingValueDrawer } from "../DeleteAccountingValueDrawer/DeleteAccountingValueDrawer";
 import { EditAccountingValueDrawer } from "../EditAccountingValueDrawer/EditAccountingValueDrawer";
@@ -28,6 +29,7 @@ export const AccountingValueDropdown = ({
   refreshList,
   isSyncMode = false,
 }: AccountingValueDropdownProps) => {
+  const { t } = useLocalization();
   const { pushToast } = useUI();
   const {
     open: openEditAccountingValueDrawer,
@@ -51,7 +53,9 @@ export const AccountingValueDropdown = ({
     onSuccess: () => {
       pushToast({
         status: "INFO",
-        message: `Default ${accountingField.name} value saved successfully`,
+        message: t("accountingFields.toasts.defaultValueSaved", [
+          accountingField.name,
+        ]),
       });
 
       refreshList?.();
@@ -59,7 +63,9 @@ export const AccountingValueDropdown = ({
     onError: () =>
       pushToast({
         status: "ERROR",
-        message: `Failed to save ${accountingField.name} value`,
+        message: t("accountingFields.toasts.defaultValueSaveFailed", [
+          accountingField.name,
+        ]),
       }),
   });
 
@@ -67,7 +73,9 @@ export const AccountingValueDropdown = ({
     onSuccess: () => {
       pushToast({
         status: "INFO",
-        message: `Default ${accountingField.name} value unset successfully`,
+        message: t("accountingFields.toasts.defaultValueUnset", [
+          accountingField.name,
+        ]),
       });
 
       refreshList?.();
@@ -75,7 +83,9 @@ export const AccountingValueDropdown = ({
     onError: () =>
       pushToast({
         status: "ERROR",
-        message: `Failed to unset ${accountingField.name} value`,
+        message: t("accountingFields.toasts.defaultValueUnsetFailed", [
+          accountingField.name,
+        ]),
       }),
   });
 
@@ -84,7 +94,7 @@ export const AccountingValueDropdown = ({
       <BasicDropdownMenu>
         <DropdownItem onClick={openEditAccountingValueDrawer}>
           <Icon name="EditSettings" width={ICON_SIZE} height={ICON_SIZE} />
-          Edit
+          {t("accountingFields.dropdown.edit")}
         </DropdownItem>
         {accountingValue.isDefault ? (
           <DropdownItem
@@ -96,7 +106,7 @@ export const AccountingValueDropdown = ({
             }
           >
             <Icon name="BookmarkRemove" width={ICON_SIZE} height={ICON_SIZE} />
-            Unset as default
+            {t("accountingFields.dropdown.unsetAsDefault")}
           </DropdownItem>
         ) : (
           <DropdownItem
@@ -109,7 +119,7 @@ export const AccountingValueDropdown = ({
             }
           >
             <Icon name="BookmarkAdd" width={ICON_SIZE} height={ICON_SIZE} />
-            Set as default
+            {t("accountingFields.dropdown.setAsDefault")}
           </DropdownItem>
         )}
         <BasicDropdownMenu.Separator />
@@ -118,14 +128,14 @@ export const AccountingValueDropdown = ({
           data-fs-bp-dropdown-menu-item-disabled={isSyncMode}
         >
           <Icon name="MinusCircle" width={ICON_SIZE} height={ICON_SIZE} />
-          Remove from unit
+          {t("accountingFields.dropdown.removeFromUnit")}
         </DropdownItem>
         <DropdownItem
           data-fs-bp-dropdown-menu-item-mode="danger"
           onClick={openDeleteAccountingValueDrawer}
         >
           <Icon name="Delete" width={ICON_SIZE} height={ICON_SIZE} />
-          Delete
+          {t("shared.buttons.delete")}
         </DropdownItem>
       </BasicDropdownMenu>
 

package/src/features/accounting-fields/components/AccountingValueForm/AccountingValueForm.tsx

@@ -7,6 +7,7 @@ import {
   InputText,
 } from "../../../shared/components";
 import { useDebounce } from "../../../shared/hooks";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { SelectedAccountingValue } from "../SelectedAccountingValue/SelectedAccountingValue";
 
 import type { AccountingValueFormData } from "../../types";
@@ -43,19 +44,25 @@ export function AccountingValueForm({
   onSkip,
   description,
   loading = false,
-  title = "Add a first field value",
-  skipLabel = "Skip",
-  confirmLabel = "Add",
+  title,
+  skipLabel,
+  confirmLabel,
   options = [],
   onSearch,
   onAddToScope,
 }: AccountingValueFormProps) {
+  const { t } = useLocalization();
   const [formData, setFormData] =
     useState<AccountingValueFormData>(initialData);
   const [isTouched, setIsTouched] = useState(false);
   const formRef = useRef<HTMLFormElement>(null);
   const [selectedValue, setSelectedValue] = useState<Option | null>(null);
 
+  const resolvedTitle =
+    title ?? t("accountingFields.drawers.addFirstValueTitle");
+  const resolvedSkipLabel = skipLabel ?? t("shared.buttons.skip");
+  const resolvedConfirmLabel = confirmLabel ?? t("shared.buttons.add");
+
   const valueFieldIsValid = formData.value.trim().length > 0;
   useDebounce(formData.value, 500, {
     onDebounce: (value) => onSearch?.(value),
@@ -84,7 +91,11 @@ export function AccountingValueForm({
 
   return (
     <>
-      <BasicDrawer.Heading onClose={close} onBack={stepBack} title={title} />
+      <BasicDrawer.Heading
+        onClose={close}
+        onBack={stepBack}
+        title={resolvedTitle}
+      />
       <BasicDrawer.Body>
         <form
           data-fs-bp-accounting-value-form
@@ -99,7 +110,7 @@ export function AccountingValueForm({
               <div data-fs-bp-accounting-value-form-item>
                 <AutocompleteDropdown
                   name="value"
-                  label="Name"
+                  label={t("shared.labels.name")}
                   value={formData.value}
                   hasError={isTouched && !valueFieldIsValid}
                   shouldOpenOnFocus={false}
@@ -107,7 +118,7 @@ export function AccountingValueForm({
                   shouldShowArrowDown={false}
                   helperLabel={
                     options.length > 0
-                      ? `Already in the list — select to add`
+                      ? t("accountingFields.messages.alreadyInList")
                       : undefined
                   }
                   onChange={(e) =>
@@ -132,7 +143,7 @@ export function AccountingValueForm({
                 <div data-fs-bp-accounting-form-legend>
                   <ErrorMessage
                     show={isTouched && !valueFieldIsValid}
-                    message="Name is required"
+                    message={t("accountingFields.validation.nameRequired")}
                   />
                   <InputText.Legend>
                     {formData.value.length}/{NAME_MAX_LENGTH}
@@ -142,7 +153,7 @@ export function AccountingValueForm({
               <div data-fs-bp-accounting-value-form-item>
                 <InputText.Textarea
                   name="description"
-                  label="Description (optional)"
+                  label={t("accountingFields.forms.descriptionOptional")}
                   value={formData.description}
                   onChange={(e) =>
                     setFormData((data) => ({
@@ -178,7 +189,7 @@ export function AccountingValueForm({
           onClick={() => onSkip?.()}
           disabled={loading}
         >
-          {skipLabel}
+          {resolvedSkipLabel}
         </BasicDrawer.Button>
         <BasicDrawer.Button
           variant="confirm"
@@ -189,7 +200,7 @@ export function AccountingValueForm({
           }
           isLoading={loading}
         >
-          {confirmLabel}
+          {resolvedConfirmLabel}
         </BasicDrawer.Button>
       </BasicDrawer.Footer>
     </>

package/src/features/accounting-fields/components/CreateAccountingFieldDrawer/CreateAccountingFieldDrawer.tsx

@@ -9,8 +9,8 @@ import {
   Tab,
   type BasicDrawerProps,
 } from "../../../shared/components";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
-import { CHANGES_TIMEOUT_MESSAGE } from "../../../shared/utils/constants";
 import {
   useCreateAccountingField,
   useCreateAccountingValue,
@@ -55,6 +55,7 @@ export const CreateAccountingFieldDrawer = ({
   contractId,
   ...otherProps
 }: CreateAccountingFieldDrawerProps) => {
+  const { t } = useLocalization();
   const createdField = useRef<AccountingField | null>(null);
   const skipCreateValueRef = useRef(false);
   const [fieldFormData, setFieldFormData] =
@@ -84,7 +85,7 @@ export const CreateAccountingFieldDrawer = ({
       onError: () => {
         pushToast({
           status: "ERROR",
-          message: "Failed to create accounting field",
+          message: t("accountingFields.toasts.createFieldFailed"),
         });
       },
     });
@@ -101,7 +102,7 @@ export const CreateAccountingFieldDrawer = ({
       onError: () => {
         pushToast({
           status: "ERROR",
-          message: "Failed to create accounting value field",
+          message: t("accountingFields.toasts.createValueFailed"),
         });
       },
     });
@@ -110,7 +111,9 @@ export const CreateAccountingFieldDrawer = ({
     const accountingField = field ?? createdField.current;
 
     pushToast({
-      message: `Accounting field added successfully\n${CHANGES_TIMEOUT_MESSAGE}`,
+      message: `${t("accountingFields.toasts.fieldAdded")}\n${t(
+        "shared.messages.changesTimeout"
+      )}`,
       status: "INFO",
       icon: accountingField && (
         <button
@@ -126,7 +129,7 @@ export const CreateAccountingFieldDrawer = ({
             )
           }
         >
-          View
+          {t("shared.buttons.view")}
         </button>
       ),
     });
@@ -214,9 +217,9 @@ export const CreateAccountingFieldDrawer = ({
             loading={
               createAccountingValueLoading || createAccountingFieldLoading
             }
-            description="
-              Since you selected “Required” and disabled “Open text input,” you must add at least one value for buyers to complete checkout.
-            "
+            description={t(
+              "accountingFields.messages.requiredValueDescription"
+            )}
           />
         </Tab.Content>
       </Tab>

package/src/features/accounting-fields/components/CreateAccountingValueDrawer/CreateAccountingValueDrawer.tsx

@@ -4,8 +4,8 @@ import { useUI } from "@faststore/ui";
 
 import { BasicDrawer, BasicDrawerProps } from "../../../shared/components";
 import { useAnalytics, useBuyerPortal } from "../../../shared/hooks";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { ANALYTICS_EVENTS } from "../../../shared/services/logger/analytics/constants";
-import { CHANGES_TIMEOUT_MESSAGE } from "../../../shared/utils/constants";
 import {
   useAddAccountingValueToScope,
   useCreateAccountingValue,
@@ -29,6 +29,7 @@ export const CreateAccountingValueDrawer = ({
   orgUnitId,
   ...otherProps
 }: CreateAccountingValueDrawerProps) => {
+  const { t } = useLocalization();
   const { pushToast } = useUI();
   const { currentContract: contract } = useBuyerPortal();
   const { trackEntityCreated, trackEntityCreateError } = useAnalytics({
@@ -62,7 +63,9 @@ export const CreateAccountingValueDrawer = ({
 
         pushToast({
           status: "INFO",
-          message: `${accountingField.name} value added successfully\n${CHANGES_TIMEOUT_MESSAGE}`,
+          message: `${t("accountingFields.toasts.valueAdded", [
+            accountingField.name,
+          ])}\n${t("shared.messages.changesTimeout")}`,
         });
 
         onCreateSuccess?.();
@@ -81,7 +84,9 @@ export const CreateAccountingValueDrawer = ({
 
         pushToast({
           status: "ERROR",
-          message: `Failed to add ${accountingField.name} value`,
+          message: t("accountingFields.toasts.addValueFailed", [
+            accountingField.name,
+          ]),
         });
       },
     });
@@ -106,7 +111,9 @@ export const CreateAccountingValueDrawer = ({
 
       pushToast({
         status: "INFO",
-        message: `${accountingField.name} value added successfully\n${CHANGES_TIMEOUT_MESSAGE}`,
+        message: `${t("accountingFields.toasts.valueAdded", [
+          accountingField.name,
+        ])}\n${t("shared.messages.changesTimeout")}`,
       });
 
       onCreateSuccess?.();
@@ -125,7 +132,9 @@ export const CreateAccountingValueDrawer = ({
 
       pushToast({
         status: "ERROR",
-        message: `Failed to add ${accountingField.name} value`,
+        message: t("accountingFields.toasts.addValueFailed", [
+          accountingField.name,
+        ]),
       });
     },
   });
@@ -173,8 +182,10 @@ export const CreateAccountingValueDrawer = ({
     >
       <AccountingValueForm
         initialData={initialAccountingValueData}
-        title={`Add ${accountingField.name} value`}
-        skipLabel="Cancel"
+        title={t("accountingFields.drawers.addValueTitle", [
+          accountingField.name,
+        ])}
+        skipLabel={t("shared.buttons.cancel")}
         close={close}
         onCreateValue={handleCreateValue}
         onAddToScope={handleAddToScope}

package/src/features/accounting-fields/components/DeleteAccountingFieldDrawer/DeleteAccountingFieldDrawer.tsx

@@ -1,7 +1,7 @@
 import { useUI } from "@faststore/ui";
 
 import { BasicDrawer, type BasicDrawerProps } from "../../../shared/components";
-import { CHANGES_TIMEOUT_MESSAGE } from "../../../shared/utils/constants";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { useRemoveAccountingField } from "../../hooks";
 import { type AccountingField } from "../../types";
 import { AccountingConfirmDelete } from "../AccountingConfirmDelete/AccountingConfirmDelete";
@@ -19,6 +19,7 @@ export const DeleteAccountingFieldDrawer = ({
   close,
   ...otherProps
 }: DeleteAccountingFieldDrawerProps) => {
+  const { t } = useLocalization();
   const { pushToast } = useUI();
   const { removeAccountingFieldLoading, removeAccountingFieldMutate } =
     useRemoveAccountingField({
@@ -26,14 +27,18 @@ export const DeleteAccountingFieldDrawer = ({
       onSuccess: () => {
         onDeleteSuccess?.();
         pushToast({
-          message: `${accountingField.name} deleted successfully\n${CHANGES_TIMEOUT_MESSAGE}`,
+          message: `${t("accountingFields.toasts.fieldDeleted", [
+            accountingField.name,
+          ])}\n${t("shared.messages.changesTimeout")}`,
           status: "INFO",
         });
         close();
       },
       onError: () => {
         pushToast({
-          message: `Failed to delete ${accountingField.name}.`,
+          message: t("accountingFields.toasts.fieldDeleteFailed", [
+            accountingField.name,
+          ]),
           status: "ERROR",
         });
       },
@@ -52,22 +57,19 @@ export const DeleteAccountingFieldDrawer = ({
       {...otherProps}
     >
       <AccountingConfirmDelete
-        title="Delete accounting field"
+        title={t("accountingFields.drawers.deleteFieldTitle")}
         close={close}
         confirmTerm={accountingField.name}
         loading={removeAccountingFieldLoading}
         onConfirm={handleDeleteConfirm}
       >
         <p>
-          Permanently delete <strong>{accountingField.name}</strong>?
+          {t("accountingFields.delete.confirmPermanentDelete", [
+            accountingField.name,
+          ])}
         </p>
-        <p>
-          This accounting field is used across all organizational units.
-          Deleting it will permanently remove the field, all its values, and all
-          related data from every unit, though usage history will be retained
-          for audit purposes. This action can't be undone.
-        </p>
-        <p>Confirm by typing the field label below:</p>
+        <p>{t("accountingFields.delete.fieldDeleteWarning")}</p>
+        <p>{t("accountingFields.delete.confirmByTypingFieldLabel")}</p>
       </AccountingConfirmDelete>
     </BasicDrawer>
   );

package/src/features/accounting-fields/components/DeleteAccountingValueDrawer/DeleteAccountingValueDrawer.tsx

@@ -2,8 +2,8 @@ import { useUI } from "@faststore/ui";
 
 import { BasicDrawer, type BasicDrawerProps } from "../../../shared/components";
 import { useAnalytics, useBuyerPortal } from "../../../shared/hooks";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { ANALYTICS_EVENTS } from "../../../shared/services/logger/analytics/constants";
-import { CHANGES_TIMEOUT_MESSAGE } from "../../../shared/utils/constants";
 import { useRemoveAccountingValue } from "../../hooks";
 import { AccountingConfirmDelete } from "../AccountingConfirmDelete/AccountingConfirmDelete";
 
@@ -24,6 +24,7 @@ export const DeleteAccountingValueDrawer = ({
   orgUnitId,
   ...otherProps
 }: DeleteAccountingValueDrawerProps) => {
+  const { t } = useLocalization();
   const { pushToast } = useUI();
   const { currentContract: contract } = useBuyerPortal();
   const { trackEvent } = useAnalytics({
@@ -47,7 +48,9 @@ export const DeleteAccountingValueDrawer = ({
         });
 
         pushToast({
-          message: `${accountingField.name} value deleted successfully\n${CHANGES_TIMEOUT_MESSAGE}`,
+          message: `${t("accountingFields.toasts.valueDeleted", [
+            accountingField.name,
+          ])}\n${t("shared.messages.changesTimeout")}`,
           status: "INFO",
         });
 
@@ -68,7 +71,9 @@ export const DeleteAccountingValueDrawer = ({
         });
 
         pushToast({
-          message: `Failed to delete ${accountingField.name} value`,
+          message: t("accountingFields.toasts.valueDeleteFailed", [
+            accountingField.name,
+          ]),
           status: "ERROR",
         });
       },
@@ -89,21 +94,26 @@ export const DeleteAccountingValueDrawer = ({
     >
       <AccountingConfirmDelete
         confirmTerm={accountingValue.value}
-        title={`Delete ${accountingField.name}`}
+        confirmLabel={t("shared.labels.name")}
+        confirmRequiredMessage={t("accountingFields.validation.nameRequired")}
+        title={t("accountingFields.drawers.deleteValueTitle", [
+          accountingField.name,
+        ])}
         close={close}
         loading={removeAccountingValueLoading}
         onConfirm={handleDeleteConfirm}
       >
         <p>
-          Permanently delete <strong>{accountingValue.value}</strong>?
+          {t("accountingFields.delete.confirmPermanentDeleteValue", [
+            accountingValue.value,
+          ])}
         </p>
         <p>
-          This {accountingField.name} may be used by multiple units. Deleting it
-          will permanently remove it and all its data from all associated units,
-          though usage history will be kept for audit. This action can't be
-          undone.
+          {t("accountingFields.delete.valueDeleteWarning", [
+            accountingField.name,
+          ])}
         </p>
-        <p>Confirm by typing the name below:</p>
+        <p>{t("accountingFields.delete.confirmByTypingName")}</p>
       </AccountingConfirmDelete>
     </BasicDrawer>
   );

package/src/features/accounting-fields/components/EditAccountingFieldDrawer/EditAccountingFieldDrawer.tsx

@@ -8,6 +8,7 @@ import {
   type BasicDrawerProps,
 } from "../../../shared/components";
 import { useSetScopeConfig } from "../../../shared/hooks";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { useUpdateAccountingField } from "../../hooks";
 import { AccountingFieldConfirmEdit } from "../AccountingFieldConfirmEdit/AccountingFieldConfirmEdit";
 import { AccountingFieldForm } from "../AccountingFieldForm/AccountingFieldForm";
@@ -39,6 +40,7 @@ export const EditAccountingFieldDrawer = ({
   contractId,
   ...otherProps
 }: EditAccountingFieldDrawerProps) => {
+  const { t } = useLocalization();
   const { pushToast } = useUI();
   const [listType, setListType] = useState<ListType>("custom");
   const [accountingField, setAccountingField] =
@@ -62,7 +64,7 @@ export const EditAccountingFieldDrawer = ({
       onSuccess: () => {
         onEditSuccess?.();
         pushToast({
-          message: "Field settings edited successfully",
+          message: t("accountingFields.toasts.fieldSettingsEdited"),
           status: "INFO",
         });
         close();
@@ -70,7 +72,7 @@ export const EditAccountingFieldDrawer = ({
       },
       onError: () => {
         pushToast({
-          message: "Failed to edit field settings",
+          message: t("accountingFields.toasts.fieldSettingsEditFailed"),
           status: "ERROR",
         });
       },
@@ -80,7 +82,7 @@ export const EditAccountingFieldDrawer = ({
     onError: () =>
       pushToast({
         status: "ERROR",
-        message: "Failed to update scope configuration",
+        message: t("accountingFields.toasts.scopeConfigUpdateFailed"),
       }),
   });
 

package/src/features/accounting-fields/components/EditAccountingValueDrawer/EditAccountingValueDrawer.tsx

@@ -4,8 +4,8 @@ import { useUI } from "@faststore/ui";
 
 import { BasicDrawer, BasicDrawerProps, Tab } from "../../../shared/components";
 import { useAnalytics, useBuyerPortal } from "../../../shared/hooks";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { ANALYTICS_EVENTS } from "../../../shared/services/logger/analytics/constants";
-import { CHANGES_TIMEOUT_MESSAGE } from "../../../shared/utils/constants";
 import { useUpdateAccountingValue } from "../../hooks";
 import { AccountingValueConfirmEdit } from "../AccountingValueConfirmEdit/AccountingValueConfirmEdit";
 import { AccountingValueForm } from "../AccountingValueForm/AccountingValueForm";
@@ -36,6 +36,7 @@ export const EditAccountingValueDrawer = ({
   onEditSuccess,
   ...otherProps
 }: EditAccountingValueDrawerProps) => {
+  const { t } = useLocalization();
   const { pushToast } = useUI();
   const { currentContract: contract } = useBuyerPortal();
   const { trackEntityEdited, trackEntityEditError } = useAnalytics({
@@ -69,7 +70,9 @@ export const EditAccountingValueDrawer = ({
 
         pushToast({
           status: "INFO",
-          message: `${accountingField.name} value edited successfully\n${CHANGES_TIMEOUT_MESSAGE}`,
+          message: `${t("accountingFields.toasts.valueEdited", [
+            accountingField.name,
+          ])}\n${t("shared.messages.changesTimeout")}`,
         });
         onEditSuccess?.();
         close();
@@ -89,7 +92,9 @@ export const EditAccountingValueDrawer = ({
 
         pushToast({
           status: "ERROR",
-          message: `Failed to edit ${accountingField.name} value`,
+          message: t("accountingFields.toasts.valueEditFailed", [
+            accountingField.name,
+          ]),
         });
       },
     });
@@ -123,9 +128,11 @@ export const EditAccountingValueDrawer = ({
         <Tab.Content id={ACCOUNTING_VALUE_FORM_STEPS.FORM}>
           <AccountingValueForm
             initialData={accountingValue}
-            title={`Edit ${accountingField.name} value`}
-            skipLabel="Cancel"
-            confirmLabel="Save"
+            title={t("accountingFields.drawers.editValueTitle", [
+              accountingField.name,
+            ])}
+            skipLabel={t("shared.buttons.cancel")}
+            confirmLabel={t("shared.buttons.save")}
             close={close}
             onCreateValue={handleNextStep}
             onSkip={close}

package/src/features/accounting-fields/components/RemoveValueFromUnitDrawer/RemoveValueFromUnitDrawer.tsx

@@ -1,7 +1,7 @@
 import { useUI } from "@faststore/ui";
 
 import { BasicDrawer, type BasicDrawerProps } from "../../../shared/components";
-import { CHANGES_TIMEOUT_MESSAGE } from "../../../shared/utils/constants";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { useRemoveAccountingValueFromScope } from "../../hooks";
 import { AccountingConfirmDelete } from "../AccountingConfirmDelete/AccountingConfirmDelete";
 
@@ -24,6 +24,7 @@ export const RemoveValueFromUnitDrawer = ({
   orgUnitId,
   ...otherProps
 }: RemoveValueFromUnitDrawerProps) => {
+  const { t } = useLocalization();
   const { pushToast } = useUI();
 
   const {
@@ -33,7 +34,9 @@ export const RemoveValueFromUnitDrawer = ({
     lazy: true,
     onSuccess: () => {
       pushToast({
-        message: `${accountingField.name} value deleted successfully\n${CHANGES_TIMEOUT_MESSAGE}`,
+        message: `${t("accountingFields.toasts.valueDeleted", [
+          accountingField.name,
+        ])}\n${t("shared.messages.changesTimeout")}`,
         status: "INFO",
       });
 
@@ -42,7 +45,9 @@ export const RemoveValueFromUnitDrawer = ({
     },
     onError: () => {
       pushToast({
-        message: `Failed to delete ${accountingField.name} value`,
+        message: t("accountingFields.toasts.valueDeleteFailed", [
+          accountingField.name,
+        ]),
         status: "ERROR",
       });
     },
@@ -62,18 +67,24 @@ export const RemoveValueFromUnitDrawer = ({
       data-fs-bp-remove-value-from-unit-drawer
     >
       <AccountingConfirmDelete
-        title={`Remove ${accountingField.name} from unit`}
+        title={t("accountingFields.drawers.removeFromUnitTitle", [
+          accountingField.name,
+        ])}
         close={close}
         loading={removeAccountingValueFromScopeLoading}
         onConfirm={handleDeleteConfirm}
       >
         <p>
-          Remove <strong>{accountingValue.value}</strong> {accountingField.name}{" "}
-          from <strong>{orgUnitName}</strong>?
+          {t("accountingFields.delete.removeFromUnitConfirm", [
+            accountingValue.value,
+            accountingField.name,
+            orgUnitName,
+          ])}
         </p>
         <p>
-          This action will prevent users in this unit from acessing this{" "}
-          {accountingField.name} during checkout.
+          {t("accountingFields.delete.removeFromUnitWarning", [
+            accountingField.name,
+          ])}
         </p>
       </AccountingConfirmDelete>
     </BasicDrawer>