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

package/src/features/addresses/components/EditAddressDrawer/EditAddressDrawer.tsx

@@ -5,8 +5,8 @@ import { useUI } from "@faststore/ui";
 import { AddressForm } from "..";
 import { type BasicDrawerProps, BasicDrawer } 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 { useEditAddress } from "../../hooks";
 
 import type { AddressInput, AddressData } from "../../types";
@@ -24,6 +24,7 @@ export const EditAddressDrawer = ({
   ...props
 }: EditAddressDrawerProps) => {
   const { pushToast } = useUI();
+  const { t } = useLocalization();
   const [isTouched, setIsTouched] = useState(false);
   const { currentOrgUnit } = useBuyerPortal();
   const { trackEntityEdited, trackEntityEditError } = useAnalytics({
@@ -51,7 +52,9 @@ export const EditAddressDrawer = ({
     });
 
     pushToast({
-      message: `Address updated successfully\n${CHANGES_TIMEOUT_MESSAGE}`,
+      message: `${t("addresses.toasts.addressUpdated")}\n${t(
+        "shared.messages.changesTimeout"
+      )}`,
       status: "INFO",
     });
     onUpdate?.();
@@ -72,7 +75,7 @@ export const EditAddressDrawer = ({
       );
 
       pushToast({
-        message: "An error occurred while updating the address",
+        message: t("addresses.errors.addressUpdate"),
         status: "ERROR",
       });
     },
@@ -112,7 +115,10 @@ export const EditAddressDrawer = ({
 
   return (
     <BasicDrawer data-fs-bp-edit-address-drawer close={close} {...props}>
-      <BasicDrawer.Heading title="Edit address details" onClose={close} />
+      <BasicDrawer.Heading
+        title={t("addresses.drawers.editAddressDetails")}
+        onClose={close}
+      />
       <BasicDrawer.Body>
         <AddressForm
           address={address}
@@ -125,7 +131,7 @@ export const EditAddressDrawer = ({
 
       <BasicDrawer.Footer>
         <BasicDrawer.Button variant="ghost" onClick={close}>
-          Cancel
+          {t("shared.buttons.cancel")}
         </BasicDrawer.Button>
         <BasicDrawer.Button
           variant="confirm"
@@ -133,7 +139,7 @@ export const EditAddressDrawer = ({
           onClick={handleConfirmClick}
           isLoading={isEditAddressLoading}
         >
-          Save
+          {t("shared.buttons.save")}
         </BasicDrawer.Button>
       </BasicDrawer.Footer>
     </BasicDrawer>

package/src/features/addresses/components/EditAddressLocationDrawer/EditAddressLocationDrawer.tsx

@@ -4,11 +4,9 @@ import { CheckboxField, 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,
-  LOCAL_STORAGE_LOCATION_EDIT_KEY,
-} from "../../../shared/utils/constants";
+import { LOCAL_STORAGE_LOCATION_EDIT_KEY } from "../../../shared/utils/constants";
 import { useAddressLocationEdit } from "../../hooks";
 import { LocationField } from "../LocationForm/LocationField/LocationField";
 
@@ -28,7 +26,7 @@ export const EditAddressLocationDrawer = ({
   close,
   location,
   onEditSuccess,
-  locationsLabel = "Location",
+  locationsLabel,
   ...props
 }: EditAddressLocationDrawerProps) => {
   if (!location) {
@@ -36,15 +34,21 @@ export const EditAddressLocationDrawer = ({
   }
 
   const { pushToast } = useUI();
+  const { t } = useLocalization();
   const [field, setField] = useState<LocationInput>({ name: location.value });
   const [confirmView, setConfirmView] = useState(false);
   const [skipConfirm, setSkipConfirm] = useState(
     localStorage.getItem(LOCAL_STORAGE_LOCATION_EDIT_KEY) === "true"
   );
   const saveIsDisable = location.value === field.name;
+
+  const resolvedLocationsLabel =
+    locationsLabel ?? t("addresses.labels.locations");
+
   const drawerTitle = confirmView
-    ? `Confirm ${locationsLabel} update`
-    : `Edit ${locationsLabel}`;
+    ? t("addresses.drawers.confirmLocationUpdate", [resolvedLocationsLabel])
+    : t("addresses.drawers.editLocation", [resolvedLocationsLabel]);
+
   const { currentOrgUnit } = useBuyerPortal();
   const { trackEntityEdited, trackEntityEditError } = useAnalytics({
     entityType: "location",
@@ -64,7 +68,9 @@ export const EditAddressLocationDrawer = ({
       });
 
       pushToast({
-        message: `Location edited successfully\n${CHANGES_TIMEOUT_MESSAGE}`,
+        message: `${t("addresses.toasts.locationEdited")}\n${t(
+          "shared.messages.changesTimeout"
+        )}`,
         status: "INFO",
       });
 
@@ -83,7 +89,7 @@ export const EditAddressLocationDrawer = ({
       );
 
       pushToast({
-        message: `An error occurred while editing the ${locationsLabel}`,
+        message: t("addresses.errors.locationEdit", [resolvedLocationsLabel]),
         status: "ERROR",
       });
     },
@@ -115,17 +121,18 @@ export const EditAddressLocationDrawer = ({
 
   return (
     <BasicDrawer data-fs-bp-edit-location-drawer close={close} {...props}>
-      <BasicDrawer.Heading title={drawerTitle} onClose={close} />
+      <BasicDrawer.Heading title={drawerTitle as string} onClose={close} />
       <BasicDrawer.Body>
         {confirmView ? (
           <div data-fs-bp-edit-location-confirm>
             <p>
-              This {locationsLabel} may be used by multiple units through its
-              associated address. Updates will affect all of them.
+              {t("addresses.editLocation.multiUnitWarning", [
+                resolvedLocationsLabel,
+              ])}
             </p>
-            <p>Proceed with the update?</p>
+            <p>{t("addresses.editLocation.proceedQuestion")}</p>
             <CheckboxField
-              label="Don't show this message again"
+              label={t("addresses.forms.dontShowAgain")}
               id="confirm-change"
               defaultChecked={skipConfirm}
               onChange={(e) => setSkipConfirm(e.target.checked)}
@@ -136,13 +143,13 @@ export const EditAddressLocationDrawer = ({
             index={0}
             location={field}
             onChange={(value) => setField({ name: value })}
-            locationsLabel={locationsLabel}
+            locationsLabel={resolvedLocationsLabel}
           />
         )}
       </BasicDrawer.Body>
       <BasicDrawer.Footer>
         <BasicDrawer.Button variant="ghost" onClick={close}>
-          Cancel
+          {t("shared.buttons.cancel")}
         </BasicDrawer.Button>
         <BasicDrawer.Button
           variant="confirm"
@@ -150,7 +157,7 @@ export const EditAddressLocationDrawer = ({
           onClick={handleSaveClick}
           isLoading={editLocationLoading}
         >
-          Save
+          {t("shared.buttons.save")}
         </BasicDrawer.Button>
       </BasicDrawer.Footer>
     </BasicDrawer>

package/src/features/addresses/components/EditRecipientAddressDrawer/EditRecipientAddressDrawer.tsx

@@ -6,11 +6,9 @@ import { CheckboxField, useUI } from "@faststore/ui";
 
 import { type BasicDrawerProps, BasicDrawer } 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,
-  LOCAL_STORAGE_RECIPIENT_EDIT_KEY,
-} from "../../../shared/utils/constants";
+import { LOCAL_STORAGE_RECIPIENT_EDIT_KEY } from "../../../shared/utils/constants";
 import { useEditRecipientsToAddress } from "../../hooks/useEditRecipientsToAddress";
 import { type RecipientData, RecipientInput } from "../../types";
 import { RecipientItem } from "../RecipientsForm/RecipientItem/RecipientItem";
@@ -33,6 +31,7 @@ export const EditRecipientAddressDrawer = ({
   const { pushToast } = useUI();
   const router = useRouter();
   const { currentOrgUnit } = useBuyerPortal();
+  const { t } = useLocalization();
   const { trackEntityEdited, trackEntityEditError } = useAnalytics({
     entityType: "recipient",
     entityId: recipient.id,
@@ -67,7 +66,9 @@ export const EditRecipientAddressDrawer = ({
     });
 
     pushToast({
-      message: `Recipient edited successfully\n${CHANGES_TIMEOUT_MESSAGE}`,
+      message: `${t("addresses.toasts.recipientEdited")}\n${t(
+        "shared.messages.changesTimeout"
+      )}`,
       status: "INFO",
     });
     refetchRecipients();
@@ -89,7 +90,7 @@ export const EditRecipientAddressDrawer = ({
         );
 
         pushToast({
-          message: "An error occurred while editing the recipient",
+          message: t("addresses.errors.recipientEdit"),
           status: "ERROR",
         });
       },
@@ -143,8 +144,12 @@ export const EditRecipientAddressDrawer = ({
     initialRecipientName !== newRecipient.name ||
     newRecipient.phone !== recipient.phone;
 
-  const drawerTitle = confirmChange ? "Confirm changes" : "Edit recipient";
-  const actionButtonLabel = confirmChange ? "Confirm" : "Save";
+  const drawerTitle = confirmChange
+    ? t("addresses.drawers.confirmChanges")
+    : t("addresses.drawers.editRecipient");
+  const actionButtonLabel = confirmChange
+    ? t("shared.buttons.confirm")
+    : t("shared.buttons.save");
 
   return (
     <BasicDrawer
@@ -156,15 +161,12 @@ export const EditRecipientAddressDrawer = ({
       <BasicDrawer.Body>
         {confirmChange ? (
           <div data-fs-bp-edit-address-recipient-drawer-body>
-            <p>
-              This recipient may be used by multiple units through its
-              associated address. Updates will affect all of them.
-            </p>
+            <p>{t("addresses.editRecipient.multiUnitWarning")}</p>
             <br />
-            <p>Proceed with the update?</p>
+            <p>{t("addresses.editRecipient.proceedQuestion")}</p>
             <br />
             <CheckboxField
-              label="Don't show this message again"
+              label={t("addresses.forms.dontShowAgain")}
               id="confirm-change"
               defaultChecked={dontShowAgain}
               onChange={handleCheckboxChange}
@@ -186,7 +188,7 @@ export const EditRecipientAddressDrawer = ({
 
       <BasicDrawer.Footer>
         <BasicDrawer.Button variant="ghost" onClick={close}>
-          Cancel
+          {t("shared.buttons.cancel")}
         </BasicDrawer.Button>
         <BasicDrawer.Button
           variant="confirm"

package/src/features/addresses/components/LocationForm/LocationField/LocationField.tsx

@@ -1,6 +1,7 @@
 import { IconButton } from "@faststore/ui";
 
 import { Icon, InputText } from "../../../../shared/components";
+import { useLocalization } from "../../../../shared/localization/LocalizationContext";
 
 import type { LocationInput } from "../../../types/AddressData";
 
@@ -19,14 +20,16 @@ export const LocationField = ({
   onChange,
   onDelete,
   canRemove = false,
-  locationsLabel = "Location",
+  locationsLabel,
 }: LocationFieldProps) => {
+  const { t } = useLocalization();
+
+  const resolvedLabel = locationsLabel ?? t("addresses.labels.locations");
+
   return (
     <div data-fs-bp-location-form-field={index === 0}>
       <div data-fs-bp-location-form-label>
-        <p>
-          {locationsLabel} {index + 1}
-        </p>
+        <p>{t("addresses.forms.locationNumber", [resolvedLabel, index + 1])}</p>
         {canRemove && (
           <IconButton
             data-fs-bp-location-form-remove-btn
@@ -37,7 +40,7 @@ export const LocationField = ({
         )}
       </div>
       <InputText
-        label={`${locationsLabel} name`}
+        label={t("addresses.forms.locationName", [resolvedLabel])}
         className="location-input"
         value={location.name}
         onChange={(event) => onChange(event.target.value)}

package/src/features/addresses/components/LocationForm/LocationForm.tsx

@@ -1,5 +1,7 @@
 import { Button } from "@faststore/ui";
 
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
+
 import { LocationField } from "./LocationField/LocationField";
 
 import type { LocationInput } from "../../types/AddressData";
@@ -15,8 +17,12 @@ export const LocationForm = ({
   locations,
   onLocationsChange,
   description = "",
-  locationsLabel = "Locations",
+  locationsLabel,
 }: LocationFormProps) => {
+  const { t } = useLocalization();
+
+  const resolvedLabel = locationsLabel ?? t("addresses.labels.locations");
+
   const onChangeField = (value: string, index: number) => {
     const locationsCopy = [...locations];
     locationsCopy[index].name = value;
@@ -39,7 +45,7 @@ export const LocationForm = ({
             key={`location-${index}`}
             index={index}
             location={location}
-            locationsLabel={locationsLabel}
+            locationsLabel={resolvedLabel}
             canRemove
             onDelete={() => onDelete(index)}
             onChange={(value: string) => onChangeField(value, index)}
@@ -50,7 +56,7 @@ export const LocationForm = ({
         data-fs-bp-add-location={locations.length > 0}
         onClick={onAddLocations}
       >
-        Add {locationsLabel}
+        {t("addresses.buttons.addLocation", [resolvedLabel])}
       </Button>
     </div>
   );

package/src/features/addresses/components/LocationsDrawer/LocationsDrawer.tsx

@@ -7,9 +7,9 @@ import { useUI } from "@faststore/ui";
 import { LocationForm } from "../";
 import { type BasicDrawerProps, BasicDrawer } 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 { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
-import { CHANGES_TIMEOUT_MESSAGE } from "../../../shared/utils/constants";
 import { useAddLocationsToAddress } from "../../hooks";
 
 import type { LocationInput } from "../../types/AddressData";
@@ -25,12 +25,13 @@ export const LocationDrawer = ({
   close,
   addressId,
   onAddLocationSuccess,
-  locationsLabel = "Locations",
+  locationsLabel,
   ...props
 }: LocationDrawerProps) => {
   const { currentOrgUnit } = useBuyerPortal();
   const [locations, setLocations] = useState<LocationInput[]>([{ name: "" }]);
   const { pushToast } = useUI();
+  const { t } = useLocalization();
   const router = useRouter();
   const { trackEvent, trackEntityCreated, trackEntityCreateError } =
     useAnalytics({
@@ -39,6 +40,9 @@ export const LocationDrawer = ({
       shouldTrackDefaultTimer: true,
     });
 
+  const resolvedLocationsLabel =
+    locationsLabel ?? t("addresses.labels.locations");
+
   const saveIsDisabled = locations.filter(({ name }) => !!name).length === 0;
 
   const { addLocationsMutate, addLocationsLoading } = useAddLocationsToAddress({
@@ -61,7 +65,9 @@ export const LocationDrawer = ({
       });
 
       pushToast({
-        message: `Locations added successfully\n${CHANGES_TIMEOUT_MESSAGE}`,
+        message: `${t("addresses.toasts.locationsAdded")}\n${t(
+          "shared.messages.changesTimeout"
+        )}`,
         status: "INFO",
         icon: (
           <button
@@ -77,7 +83,7 @@ export const LocationDrawer = ({
               router.push(`${url}?tab=location-tab`);
             }}
           >
-            View
+            {t("shared.buttons.view")}
           </button>
         ),
       });
@@ -94,7 +100,7 @@ export const LocationDrawer = ({
       });
 
       pushToast({
-        message: `An error occurred while adding ${locationsLabel}`,
+        message: t("addresses.errors.locationsAdd", [resolvedLocationsLabel]),
         status: "ERROR",
       });
     },
@@ -127,20 +133,20 @@ export const LocationDrawer = ({
       {...props}
     >
       <BasicDrawer.Heading
-        title={`Add ${locationsLabel}`}
+        title={t("addresses.drawers.addLocations", [resolvedLocationsLabel])}
         onClose={clearAndClose}
       />
       <BasicDrawer.Body>
         <LocationForm
           locations={locations}
           onLocationsChange={setLocations}
-          locationsLabel={locationsLabel}
+          locationsLabel={resolvedLocationsLabel}
         />
       </BasicDrawer.Body>
 
       <BasicDrawer.Footer>
         <BasicDrawer.Button variant="ghost" onClick={clearAndClose}>
-          Cancel
+          {t("shared.buttons.cancel")}
         </BasicDrawer.Button>
         <BasicDrawer.Button
           variant="confirm"
@@ -148,7 +154,7 @@ export const LocationDrawer = ({
           onClick={handleConfirmClick}
           isLoading={addLocationsLoading}
         >
-          Save
+          {t("shared.buttons.save")}
         </BasicDrawer.Button>
       </BasicDrawer.Footer>
     </BasicDrawer>

package/src/features/addresses/components/RecipientsForm/RecipientItem/RecipientItem.tsx

@@ -1,4 +1,5 @@
 import { Icon, InputText } from "../../../../shared/components";
+import { useLocalization } from "../../../../shared/localization/LocalizationContext";
 import {
   maskPhoneNumber,
   normalizePhoneNumber,
@@ -20,51 +21,59 @@ export const RecipientItem = ({
   onChange,
   onDelete,
   editSingle = false,
-}: RecipientItemProps) => (
-  <div data-fs-recipient-item>
-    {!editSingle && onDelete && (
-      <div data-fs-recipients-separator-wrapper>
-        <span data-fs-recipients-item-title>Recipient {index + 1}</span>
-        <Icon
-          name="Trash"
-          width={15}
-          height={15}
-          onClick={() => onDelete(index)}
-          style={{ cursor: "pointer" }}
-        />
-      </div>
-    )}
+}: RecipientItemProps) => {
+  const { t } = useLocalization();
 
-    <InputText
-      label="Name"
-      value={recipient.recipientName}
-      className="recipients-name"
-      wrapperProps={{
-        style: {
-          borderBottomLeftRadius: 0,
-          borderBottomRightRadius: 0,
-        },
-      }}
-      onChange={(event) => onChange(index, "recipientName", event.target.value)}
-    />
+  return (
+    <div data-fs-recipient-item>
+      {!editSingle && onDelete && (
+        <div data-fs-recipients-separator-wrapper>
+          <span data-fs-recipients-item-title>
+            {t("addresses.forms.recipientNumber", [index + 1])}
+          </span>
+          <Icon
+            name="Trash"
+            width={15}
+            height={15}
+            onClick={() => onDelete(index)}
+            style={{ cursor: "pointer" }}
+          />
+        </div>
+      )}
 
-    <InputText
-      label="Phone Number"
-      className="recipients-phone"
-      value={maskPhoneNumber(recipient.recipientPhone, "USA")}
-      wrapperProps={{
-        style: {
-          borderTopLeftRadius: 0,
-          borderTopRightRadius: 0,
-        },
-      }}
-      onChange={(event) =>
-        onChange(
-          index,
-          "recipientPhone",
-          normalizePhoneNumber(event.target.value)
-        )
-      }
-    />
-  </div>
-);
+      <InputText
+        label={t("shared.labels.name")}
+        value={recipient.recipientName}
+        className="recipients-name"
+        wrapperProps={{
+          style: {
+            borderBottomLeftRadius: 0,
+            borderBottomRightRadius: 0,
+          },
+        }}
+        onChange={(event) =>
+          onChange(index, "recipientName", event.target.value)
+        }
+      />
+
+      <InputText
+        label={t("addresses.forms.phoneNumber")}
+        className="recipients-phone"
+        value={maskPhoneNumber(recipient.recipientPhone, "USA")}
+        wrapperProps={{
+          style: {
+            borderTopLeftRadius: 0,
+            borderTopRightRadius: 0,
+          },
+        }}
+        onChange={(event) =>
+          onChange(
+            index,
+            "recipientPhone",
+            normalizePhoneNumber(event.target.value)
+          )
+        }
+      />
+    </div>
+  );
+};

package/src/features/addresses/components/RecipientsForm/RecipientsForm.tsx

@@ -1,5 +1,6 @@
 import { Button } from "@faststore/ui";
 
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { RecipientInput } from "../../types";
 
 import { RecipientItem } from "./RecipientItem/RecipientItem";
@@ -13,6 +14,8 @@ export const RecipientsForm = ({
   recipients,
   setRecipients,
 }: RecipientsFormProps) => {
+  const { t } = useLocalization();
+
   const handleChange = (
     index: number,
     field: keyof RecipientInput,
@@ -53,7 +56,7 @@ export const RecipientsForm = ({
       </div>
 
       <Button data-fs-bp-add-recipients onClick={handleAddRecipient}>
-        Add recipient
+        {t("addresses.buttons.addRecipient")}
       </Button>
     </div>
   );

package/src/features/addresses/components/RemoveAddressDrawer/RemoveAddressDrawer.tsx

@@ -2,7 +2,7 @@ import { useUI } from "@faststore/ui";
 
 import { type BasicDrawerProps, BasicDrawer } from "../../../shared/components";
 import { useRemoveFromScope, useBuyerPortal } from "../../../shared/hooks";
-import { CHANGES_TIMEOUT_MESSAGE } from "../../../shared/utils/constants";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 
 export type RemoveAddressDrawerProps = Omit<BasicDrawerProps, "children"> & {
   readonly?: boolean;
@@ -20,10 +20,13 @@ export const RemoveAddressDrawer = ({
 }: RemoveAddressDrawerProps) => {
   const { pushToast } = useUI();
   const { currentOrgUnit } = useBuyerPortal();
+  const { t } = useLocalization();
 
   const handeRemoveFromScopeSuccess = () => {
     pushToast({
-      message: `Address removed successfully\n${CHANGES_TIMEOUT_MESSAGE}`,
+      message: `${t("addresses.toasts.addressRemoved")}\n${t(
+        "shared.messages.changesTimeout"
+      )}`,
       status: "INFO",
     });
     onUpdate?.();
@@ -34,7 +37,7 @@ export const RemoveAddressDrawer = ({
     onSuccess: handeRemoveFromScopeSuccess,
     onError: () => {
       pushToast({
-        message: "An error occurred while removing the address from the unit",
+        message: t("addresses.errors.addressRemoveFromUnit"),
         status: "ERROR",
       });
     },
@@ -50,29 +53,33 @@ export const RemoveAddressDrawer = ({
 
   return (
     <BasicDrawer data-fs-bp-remove-address-drawer close={close} {...props}>
-      <BasicDrawer.Heading title="Remove address from unit" onClose={close} />
+      <BasicDrawer.Heading
+        title={t("addresses.drawers.removeAddressFromUnit")}
+        onClose={close}
+      />
       <BasicDrawer.Body>
         <div>
           <p>
-            {" "}
-            Remove <span data-fs-bp-drawer-label>{addressName} </span> from{" "}
-            <span data-fs-bp-drawer-label>{currentOrgUnit?.name}</span>{" "}
-            organizational unit?
+            {t("addresses.removeAddress.confirmQuestion", [
+              <span key="address-name" data-fs-bp-drawer-label>
+                {addressName}
+              </span>,
+              <span key="unit-name" data-fs-bp-drawer-label>
+                {currentOrgUnit?.name}
+              </span>,
+            ])}
           </p>
           <br />
-          <p>
-            This action will prevent users in this unit from accessing this
-            address during store navigation and checkout
-          </p>
+          <p>{t("addresses.removeAddress.warning")}</p>
         </div>
       </BasicDrawer.Body>
 
       <BasicDrawer.Footer>
         <BasicDrawer.Button variant="ghost" onClick={close}>
-          Cancel
+          {t("shared.buttons.cancel")}
         </BasicDrawer.Button>
         <BasicDrawer.Button variant="confirm" onClick={handleConfirmClick}>
-          Remove
+          {t("shared.buttons.remove")}
         </BasicDrawer.Button>
       </BasicDrawer.Footer>
     </BasicDrawer>