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

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

@@ -18,6 +18,7 @@ import {
   SEARCH_PARAMS,
   usePageItems,
 } from "../../../shared/hooks/usePageItems";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { maskPhoneNumber } from "../../../shared/utils/phoneNumber";
 import { type CountryCodes } from "../../data/countries";
 import { useSearchAddressRecipients } from "../../hooks/useSearchAddressRecipients";
@@ -53,6 +54,7 @@ export const AddressRecipientsList = forwardRef<
   ) => {
     const router = useRouter();
     const { currentOrgUnit } = useBuyerPortal();
+    const { t } = useLocalization();
 
     const [totalRecipients, setTotalRecipients] = useState(total);
 
@@ -140,10 +142,11 @@ export const AddressRecipientsList = forwardRef<
     const columns = getTableColumns({
       actionsLength: 2,
       nameColumnSize: "11.125rem",
+      nameColumnLabel: t("shared.labels.name"),
       extraColumns: [
         {
           key: "phone",
-          label: "Phone",
+          label: t("addresses.table.phone"),
           align: "left",
           size: "100%",
           hideOnScreenSize: "phonemid",
@@ -166,8 +169,8 @@ export const AddressRecipientsList = forwardRef<
         </div>
         {!isLoading && recipients.length === 0 && searchTerm.length > 0 ? (
           <EmptyState
-            title="No results found"
-            description="Try using different terms or filters"
+            title={t("addresses.empty.noResults")}
+            description={t("addresses.empty.tryDifferentTerms")}
           />
         ) : (
           <div data-fs-bp-address-tabs-table>
@@ -228,7 +231,9 @@ export const AddressRecipientsList = forwardRef<
                   onClick={increasePage}
                   disabled={isLoading}
                 >
-                  {isLoading ? "Loading" : "Load More"}
+                  {isLoading
+                    ? t("shared.labels.loading")
+                    : t("shared.buttons.loadMore")}
                 </Paginator.NextPageButton>
               )}
 

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

@@ -7,6 +7,7 @@ import {
 } from "@faststore/ui";
 
 import { BasicCard, Icon, Tag } from "../../../shared/components";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 
 import type { AddressData } from "../../types";
 
@@ -22,11 +23,13 @@ export default function AddressesCard({
   addresses = [],
   orgUnitData,
 }: AddressesCardProps) {
+  const { t } = useLocalization();
+
   return (
     <BasicCard
       footerLink={`/addresses${orgUnitData?.id ? `/${orgUnitData.id}` : ""}`}
-      footerMessage="Manage addresses"
-      title="Addresses"
+      footerMessage={t("addresses.links.manageAddresses")}
+      title={t("addresses.titles.addresses")}
       subTitle={addresses.length ?? 0}
       onPlusIconClick={() => {}}
     >
@@ -73,7 +76,7 @@ export default function AddressesCard({
                           height={24}
                           data-fs-dropdown-icon
                         />
-                        Edit
+                        {t("shared.buttons.edit")}
                       </DropdownItem>
                       <DropdownItem data-fs-bp-dropdown-menu-item-mode="danger">
                         <Icon
@@ -82,7 +85,7 @@ export default function AddressesCard({
                           height={24}
                           data-fs-dropdown-icon
                         />{" "}
-                        Delete
+                        {t("shared.buttons.delete")}
                       </DropdownItem>
                       <DropdownItem dismissOnClick={false}>
                         <div data-fs-dropdown-active-item>
@@ -93,7 +96,7 @@ export default function AddressesCard({
                               height={24}
                               data-fs-dropdown-icon
                             />{" "}
-                            Active
+                            {t("addresses.labels.active")}
                           </div>
                           <Toggle
                             id="addressActiveMenu"

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

@@ -17,8 +17,8 @@ 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 { useCreateNewAddress } from "../../hooks";
 import { LocationInput } from "../../types/AddressData";
 
@@ -33,10 +33,11 @@ export type CreateAddressDrawerProps = Omit<BasicDrawerProps, "children"> & {
 export const CreateAddressDrawer = ({
   close,
   onUpdate,
-  locationsLabel = "Locations",
+  locationsLabel,
   ...props
 }: CreateAddressDrawerProps) => {
   const { pushToast } = useUI();
+  const { t } = useLocalization();
   const [isTouched, setIsTouched] = useState(false);
   const [useExistingAddress, setUseExistingAddress] = useState(false);
   const { currentOrgUnit } = useBuyerPortal();
@@ -47,6 +48,9 @@ export const CreateAddressDrawer = ({
       shouldTrackDefaultTimer: true,
     });
 
+  const resolvedLocationsLabel =
+    locationsLabel ?? t("addresses.labels.locations");
+
   const [completedAddress, setCompletedAddress] = useState<AddressData>(
     {} as AddressData
   );
@@ -95,7 +99,9 @@ export const CreateAddressDrawer = ({
     });
 
     pushToast({
-      message: `Address added successfully\n${CHANGES_TIMEOUT_MESSAGE}`,
+      message: `${t("addresses.toasts.addressAdded")}\n${t(
+        "shared.messages.changesTimeout"
+      )}`,
       status: "INFO",
     });
     onUpdate?.();
@@ -110,7 +116,7 @@ export const CreateAddressDrawer = ({
       });
 
       pushToast({
-        message: "An error occurred while creating the address",
+        message: t("addresses.errors.addressCreate"),
         status: "ERROR",
       });
     },
@@ -125,7 +131,7 @@ export const CreateAddressDrawer = ({
       });
 
       pushToast({
-        message: "An error occurred while creating the address",
+        message: t("addresses.errors.addressCreate"),
         status: "ERROR",
       });
     },
@@ -172,12 +178,17 @@ export const CreateAddressDrawer = ({
 
   return (
     <BasicDrawer data-fs-bp-create-address-drawer close={close} {...props}>
-      <BasicDrawer.Heading title="Add address" onClose={close} />
+      <BasicDrawer.Heading
+        title={t("addresses.drawers.addAddress")}
+        onClose={close}
+      />
       <Tab defaultTabId="address-tab" onChange={handleTabChange}>
         <TabBar>
-          <TabOption id="address-tab">Details</TabOption>
-          <TabOption id="location-tab">{locationsLabel}</TabOption>
-          <TabOption id="recipient-tab">Recipients</TabOption>
+          <TabOption id="address-tab">{t("addresses.tabs.details")}</TabOption>
+          <TabOption id="location-tab">{resolvedLocationsLabel}</TabOption>
+          <TabOption id="recipient-tab">
+            {t("addresses.tabs.recipients")}
+          </TabOption>
         </TabBar>
 
         {invalidAddress && (
@@ -193,7 +204,7 @@ export const CreateAddressDrawer = ({
             onClose={() => setInvalidAddress(false)}
             dismissible
           >
-            Invalid Address
+            {t("addresses.messages.invalidAddress")}
           </Alert>
         )}
 
@@ -215,8 +226,10 @@ export const CreateAddressDrawer = ({
             <LocationForm
               locations={locations}
               onLocationsChange={setLocations}
-              locationsLabel={locationsLabel}
-              description={`If necessary, add ${locationsLabel} to this address`}
+              locationsLabel={resolvedLocationsLabel}
+              description={t("addresses.forms.addLocationsDescription", [
+                resolvedLocationsLabel,
+              ])}
             />
           </TabContent>
 
@@ -231,7 +244,7 @@ export const CreateAddressDrawer = ({
 
       <BasicDrawer.Footer>
         <BasicDrawer.Button variant="ghost" onClick={close}>
-          Cancel
+          {t("shared.buttons.cancel")}
         </BasicDrawer.Button>
         <BasicDrawer.Button
           variant="confirm"
@@ -239,7 +252,7 @@ export const CreateAddressDrawer = ({
           onClick={handleConfirmClick}
           isLoading={isCreateNewAddressLoading}
         >
-          Add
+          {t("shared.buttons.add")}
         </BasicDrawer.Button>
       </BasicDrawer.Footer>
     </BasicDrawer>

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

@@ -15,8 +15,7 @@ import {
 import { OptionSelected } from "../../../shared/components/OptionSelected/OptionSelected";
 import { SearchHighlight } from "../../../shared/components/SearchHighlight/SearchHighlight";
 import { useSetScopeConfig, SCOPE_KEYS } from "../../../shared/hooks";
-import { CHANGES_TIMEOUT_MESSAGE } from "../../../shared/utils/constants";
-import { ADDRESS_MESSAGES } from "../../constants/messages";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { useEditAddressLocationSettings } from "../../hooks";
 import { useDebouncedSearchAddressByUnitId } from "../../hooks/useDebouncedSearchAddressByUnitId";
 import { useGetDefaultAddress } from "../../hooks/useGetDefaultAddresses";
@@ -34,8 +33,6 @@ export type CreateAddressSettingsDrawerProps = Omit<
   initialLocationsLabel: string;
 };
 
-export const ADDRESS_LIST_TYPE_OPTIONS = createListTypeOptions("addresses");
-
 export const CreateAddressSettingsDrawer = ({
   close,
   onUpdate,
@@ -43,6 +40,8 @@ export const CreateAddressSettingsDrawer = ({
   ...otherProps
 }: CreateAddressSettingsDrawerProps) => {
   const { pushToast } = useUI();
+  const { t } = useLocalization();
+  const addressListTypeOptions = createListTypeOptions("addresses", t);
   const router = useRouter();
   const locationLabelText = initialLocationsLabel;
 
@@ -98,7 +97,9 @@ export const CreateAddressSettingsDrawer = ({
 
   const handleCreateNewAddressSuccess = () => {
     pushToast({
-      message: `${ADDRESS_MESSAGES.defaultSaved}\n${CHANGES_TIMEOUT_MESSAGE}`,
+      message: `${t("addresses.toasts.defaultSaved")}\n${t(
+        "shared.messages.changesTimeout"
+      )}`,
       status: "INFO",
     });
     onUpdate?.();
@@ -110,7 +111,7 @@ export const CreateAddressSettingsDrawer = ({
       onSuccess: handleCreateNewAddressSuccess,
       onError: () => {
         pushToast({
-          message: ADDRESS_MESSAGES.defaultError,
+          message: t("addresses.errors.defaultError"),
           status: "ERROR",
         });
       },
@@ -121,7 +122,7 @@ export const CreateAddressSettingsDrawer = ({
       lazy: true,
       onError: () => {
         pushToast({
-          message: "Failed to update Addresses Locations settings",
+          message: t("addresses.errors.locationsSettingsUpdate"),
           status: "ERROR",
         });
       },
@@ -130,13 +131,15 @@ export const CreateAddressSettingsDrawer = ({
   const { setScopeConfig, isSetScopeConfigLoading } = useSetScopeConfig({
     onSuccess: () => {
       pushToast({
-        message: `Scope configuration updated successfully\n${CHANGES_TIMEOUT_MESSAGE}`,
+        message: `${t("addresses.toasts.scopeConfigUpdated")}\n${t(
+          "shared.messages.changesTimeout"
+        )}`,
         status: "INFO",
       });
     },
     onError: () => {
       pushToast({
-        message: "Failed to update scope configuration",
+        message: t("addresses.errors.scopeConfigUpdate"),
         status: "ERROR",
       });
     },
@@ -204,7 +207,7 @@ export const CreateAddressSettingsDrawer = ({
 
   return (
     <SettingsDrawer
-      title="Address settings"
+      title={t("addresses.drawers.addressSettings")}
       {...otherProps}
       close={close}
       onPrimaryAction={handleConfirmClick}
@@ -214,21 +217,23 @@ export const CreateAddressSettingsDrawer = ({
       data-fs-bp-create-address-settings-drawer
     >
       <SettingsDrawer.ListType
-        title="List type"
+        title={t("addresses.forms.listType")}
         name="listType"
         value={listType}
         onChange={setListType}
-        options={ADDRESS_LIST_TYPE_OPTIONS}
+        options={addressListTypeOptions}
       />
 
       <div data-fs-bp-default-addresses-section>
-        <h4 data-fs-bp-default-addresses-title>Default addresses</h4>
+        <h4 data-fs-bp-default-addresses-title>
+          {t("addresses.titles.defaultAddresses")}
+        </h4>
         <h4 data-fs-bp-default-addresses-subtitle>
-          Select the default addresses for this unit
+          {t("addresses.forms.selectDefaultAddresses")}
         </h4>
 
         <p data-fs-bp-default-address-label>
-          Default shipping address (optional)
+          {t("addresses.forms.defaultShippingAddress")}
         </p>
 
         {isLoadingShipping ? (
@@ -244,7 +249,7 @@ export const CreateAddressSettingsDrawer = ({
           />
         ) : (
           <AutocompleteDropdown
-            label="Search shipping addresses"
+            label={t("addresses.forms.searchShippingAddresses")}
             value={activeField === "Shipping" ? searchValue : ""}
             options={searchedAddresses}
             onFocus={() => setActiveField("Shipping")}
@@ -281,7 +286,7 @@ export const CreateAddressSettingsDrawer = ({
         )}
 
         <p data-fs-bp-default-address-label>
-          Default billing address (optional)
+          {t("addresses.forms.defaultBillingAddress")}
         </p>
 
         {isLoadingBilling ? (
@@ -297,7 +302,7 @@ export const CreateAddressSettingsDrawer = ({
           />
         ) : (
           <AutocompleteDropdown
-            label="Search billing addresses"
+            label={t("addresses.forms.searchBillingAddresses")}
             value={activeField === "Billing" ? searchValue : ""}
             options={searchedAddresses}
             onFocus={() => setActiveField("Billing")}
@@ -336,13 +341,13 @@ export const CreateAddressSettingsDrawer = ({
           data-fs-bp-default-addresses-title
           data-fs-bp-default-addresses-locations-field
         >
-          Locations
+          {t("addresses.labels.locations")}
         </h4>
         <h4 data-fs-bp-default-addresses-subtitle>
-          Set the name of the {locationLabelText} field in addresses
+          {t("addresses.forms.setLocationsFieldName", [locationLabelText])}
         </h4>
         <InputText
-          label="Field label"
+          label={t("addresses.forms.fieldLabel")}
           value={locationsLabel}
           onChange={(event) => setLocationsLabel(event.target.value)}
           name="locations-label"

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

@@ -8,8 +8,8 @@ import {
   InputText,
 } 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 { useDeleteAddress } from "../../hooks";
 
 export type DeleteAddressDrawerProps = Omit<BasicDrawerProps, "children"> & {
@@ -28,6 +28,7 @@ export const DeleteAddressDrawer = ({
 }: DeleteAddressDrawerProps) => {
   const { pushToast } = useUI();
   const { currentOrgUnit } = useBuyerPortal();
+  const { t } = useLocalization();
   const { trackEvent } = useAnalytics({
     entityType: "address",
     entityId: addressId,
@@ -45,7 +46,9 @@ export const DeleteAddressDrawer = ({
     });
 
     pushToast({
-      message: `Address deleted successfully\n${CHANGES_TIMEOUT_MESSAGE}`,
+      message: `${t("addresses.toasts.addressDeleted")}\n${t(
+        "shared.messages.changesTimeout"
+      )}`,
       status: "INFO",
     });
     onUpdate?.();
@@ -66,7 +69,7 @@ export const DeleteAddressDrawer = ({
       });
 
       pushToast({
-        message: "An error occurred while removing the address from the unit",
+        message: t("addresses.errors.addressRemoveFromUnit"),
         status: "ERROR",
       });
     },
@@ -83,25 +86,26 @@ export const DeleteAddressDrawer = ({
 
   return (
     <BasicDrawer data-fs-bp-remove-address-drawer close={close} {...props}>
-      <BasicDrawer.Heading title="Delete address" onClose={close} />
+      <BasicDrawer.Heading
+        title={t("addresses.drawers.deleteAddress")}
+        onClose={close}
+      />
       <BasicDrawer.Body>
         <div>
           <p>
-            Permanently delete{" "}
-            <span data-fs-bp-drawer-label>{addressName} </span>?
+            {t("addresses.deleteAddress.confirmQuestion", [
+              <span key="address-name" data-fs-bp-drawer-label>
+                {addressName}
+              </span>,
+            ])}
           </p>
           <br />
-          <p>
-            This address may be used by multiple units. Deleting it will
-            permanently remove it and all iits data from all associated units,
-            though usage history will be kept for audit. This action can't be
-            undone
-          </p>
+          <p>{t("addresses.deleteAddress.warning")}</p>
           <br />
-          <p>Confirm by typing the address name below:</p>
+          <p>{t("addresses.deleteAddress.confirmInstruction")}</p>
           <br />
           <InputText
-            label="Address name"
+            label={t("addresses.forms.addressName")}
             className="address-name-confirmation"
             value={addressNameConfirmation}
             onChange={(event) =>
@@ -113,7 +117,7 @@ export const DeleteAddressDrawer = ({
 
       <BasicDrawer.Footer>
         <BasicDrawer.Button variant="ghost" onClick={close}>
-          Cancel
+          {t("shared.buttons.cancel")}
         </BasicDrawer.Button>
         <BasicDrawer.Button
           variant="danger"
@@ -121,7 +125,7 @@ export const DeleteAddressDrawer = ({
           onClick={handleConfirmClick}
           disabled={!isDeleteButtonEnabled}
         >
-          Remove
+          {t("shared.buttons.remove")}
         </BasicDrawer.Button>
       </BasicDrawer.Footer>
     </BasicDrawer>

package/src/features/addresses/components/DeleteAddressLocationDrawer/DeleteAddressLocationDrawer.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 { useAddressLocationDelete } from "../../hooks";
 import { LocationField } from "../LocationForm/LocationField/LocationField";
 
@@ -25,10 +25,11 @@ export const DeleteAddressLocationDrawer = ({
   close,
   location,
   onDeleteSuccess,
-  locationsLabel = "Location",
+  locationsLabel,
   ...props
 }: DeleteAddressLocationDrawerProps) => {
   const { pushToast } = useUI();
+  const { t } = useLocalization();
   const [confirmationValue, setConfirmationValue] = useState({ name: "" });
   const deleteIsDisable = confirmationValue.name !== location.value;
   const { currentOrgUnit } = useBuyerPortal();
@@ -39,6 +40,9 @@ export const DeleteAddressLocationDrawer = ({
     shouldTrackDefaultTimer: true,
   });
 
+  const resolvedLocationsLabel =
+    locationsLabel ?? t("addresses.labels.locations");
+
   const { deleteLocationMutate, deleteLocationLoading } =
     useAddressLocationDelete({
       onSuccess: () => {
@@ -51,7 +55,9 @@ export const DeleteAddressLocationDrawer = ({
         });
 
         pushToast({
-          message: `Location removed successfully\n${CHANGES_TIMEOUT_MESSAGE}`,
+          message: `${t("addresses.toasts.locationRemoved")}\n${t(
+            "shared.messages.changesTimeout"
+          )}`,
           status: "INFO",
         });
 
@@ -70,7 +76,9 @@ export const DeleteAddressLocationDrawer = ({
         });
 
         pushToast({
-          message: `An error occurred while removing ${locationsLabel}`,
+          message: t("addresses.errors.locationRemove", [
+            resolvedLocationsLabel,
+          ]),
           status: "ERROR",
         });
       },
@@ -86,32 +94,36 @@ export const DeleteAddressLocationDrawer = ({
 
   return (
     <BasicDrawer close={close} {...props}>
-      <BasicDrawer.Heading title={`Delete ${locationsLabel}`} onClose={close} />
+      <BasicDrawer.Heading
+        title={t("addresses.drawers.deleteLocation", [resolvedLocationsLabel])}
+        onClose={close}
+      />
       <BasicDrawer.Body>
         <div data-fs-bp-delete-location-body>
           <p>
-            Permanently delete <strong>{location.value}</strong>?
+            {t("addresses.deleteLocation.confirmQuestion", [
+              <strong key="location-value">{location.value}</strong>,
+            ])}
           </p>
           <p>
-            This {locationsLabel} may be used by multiple units through its
-            associated address. 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("addresses.deleteLocation.warning", [resolvedLocationsLabel])}
           </p>
           <p data-fs-bp-delete-location-last-text>
-            Confirm by typing the {locationsLabel} name below:
+            {t("addresses.deleteLocation.confirmInstruction", [
+              resolvedLocationsLabel,
+            ])}
           </p>
           <LocationField
             index={0}
             location={confirmationValue}
             onChange={(value) => setConfirmationValue({ name: value })}
-            locationsLabel={locationsLabel}
+            locationsLabel={resolvedLocationsLabel}
           />
         </div>
       </BasicDrawer.Body>
       <BasicDrawer.Footer>
         <BasicDrawer.Button variant="ghost" onClick={close}>
-          Cancel
+          {t("shared.buttons.cancel")}
         </BasicDrawer.Button>
         <BasicDrawer.Button
           variant="danger"
@@ -119,7 +131,7 @@ export const DeleteAddressLocationDrawer = ({
           isLoading={deleteLocationLoading}
           onClick={handleDeleteClick}
         >
-          Delete
+          {t("shared.buttons.delete")}
         </BasicDrawer.Button>
       </BasicDrawer.Footer>
     </BasicDrawer>

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

@@ -10,8 +10,8 @@ import {
   InputText,
 } 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 { useDeleteRecipientAddress } from "../../hooks/useDeleteRecipientAddress";
 
 export type DeleteRecipientAddressDrawerProps = Omit<
@@ -34,6 +34,7 @@ export const DeleteRecipientAddressDrawer = ({
   const { pushToast } = useUI();
   const router = useRouter();
   const { currentOrgUnit } = useBuyerPortal();
+  const { t } = useLocalization();
   const { trackEvent } = useAnalytics({
     entityType: "recipient",
     entityId: recipientAddressId,
@@ -53,7 +54,9 @@ export const DeleteRecipientAddressDrawer = ({
     });
 
     pushToast({
-      message: `Recipient deleted successfully\n${CHANGES_TIMEOUT_MESSAGE}`,
+      message: `${t("addresses.toasts.recipientDeleted")}\n${t(
+        "shared.messages.changesTimeout"
+      )}`,
       status: "INFO",
     });
     refetchRecipients();
@@ -72,8 +75,7 @@ export const DeleteRecipientAddressDrawer = ({
         });
 
         pushToast({
-          message:
-            "An error occurred while removing the recipient from address",
+          message: t("addresses.errors.recipientRemove"),
           status: "ERROR",
         });
       },
@@ -94,25 +96,26 @@ export const DeleteRecipientAddressDrawer = ({
 
   return (
     <BasicDrawer data-fs-bp-remove-address-drawer close={close} {...props}>
-      <BasicDrawer.Heading title="Delete recipient" onClose={close} />
+      <BasicDrawer.Heading
+        title={t("addresses.drawers.deleteRecipient")}
+        onClose={close}
+      />
       <BasicDrawer.Body>
         <div data-fs-bp-remove-recipient-form>
           <p>
-            Permanently delete{" "}
-            <span data-fs-bp-drawer-label>{recipientAddressName}</span>?
+            {t("addresses.deleteRecipient.confirmQuestion", [
+              <span key="recipient-name" data-fs-bp-drawer-label>
+                {recipientAddressName}
+              </span>,
+            ])}
           </p>
           <br />
-          <p>
-            This recipient may be associated with multiple units through its
-            address. 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.
-          </p>
+          <p>{t("addresses.deleteRecipient.warning")}</p>
           <br />
-          <p>Confirm by typing the recipient name below:</p>
+          <p>{t("addresses.deleteRecipient.confirmInstruction")}</p>
           <br />
           <InputText
-            label="Recipient name"
+            label={t("addresses.forms.recipientName")}
             value={recipientNameConfirmation}
             onChange={(event) =>
               setRecipientNameConfirmation(event.currentTarget.value)
@@ -123,7 +126,7 @@ export const DeleteRecipientAddressDrawer = ({
 
       <BasicDrawer.Footer>
         <BasicDrawer.Button variant="ghost" onClick={close}>
-          Cancel
+          {t("shared.buttons.cancel")}
         </BasicDrawer.Button>
         <BasicDrawer.Button
           variant="danger"
@@ -131,7 +134,7 @@ export const DeleteRecipientAddressDrawer = ({
           onClick={handleConfirmClick}
           disabled={!isDeleteButtonEnabled}
         >
-          Remove
+          {t("shared.buttons.remove")}
         </BasicDrawer.Button>
       </BasicDrawer.Footer>
     </BasicDrawer>