@vtex/faststore-plugin-buyer-portal 2.0.26 → 2.0.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vtex/faststore-plugin-buyer-portal",
-  "version": "2.0.26",
+  "version": "2.0.28",
   "description": "A plugin for faststore with buyer portal",
   "main": "index.js",
   "files": [

package/plugin.config.js

@@ -20,6 +20,10 @@ module.exports = {
       path: "/pvt/organization-account/addresses/[orgUnitId]/[contractId]",
       appLayout: false,
     },
+    recipients: {
+      path: "/pvt/organization-account/recipients/[orgUnitId]/[contractId]",
+      appLayout: false,
+    },
     budgets: {
       path: "/pvt/organization-account/budgets/[orgUnitId]/[contractId]",
       appLayout: false,

package/src/features/accounting-fields/layouts/AccountingFieldLayout/AccountingFieldLayout.tsx

@@ -25,6 +25,7 @@ import { ContractTabsLayout, GlobalLayout } from "../../../shared/layouts";
 import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { getValidPage } from "../../../shared/utils";
 import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
+import { DEFAULT_PAGE_SIZE as PAGE_SIZE } from "../../../shared/utils/constants";
 import {
   AccountingFieldEmptyAlert,
   AccountingValueDropdown,
@@ -44,7 +45,6 @@ type AccountingFieldLayoutProps = {
 const HEADER_ICON_SIZE = 24;
 const PAGE_PARAM = "page";
 const SEARCH_PARAM = "search";
-const PAGE_SIZE = 25;
 
 export const AccountingFieldLayout = ({
   accountingField,

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

@@ -1,3 +1,5 @@
+import { useRef } from "react";
+
 import { useRouter } from "next/router";
 
 import { DropdownItem, Icon as UIIcon, useUI } from "@faststore/ui";
@@ -5,16 +7,19 @@ import { DropdownItem, Icon as UIIcon, useUI } from "@faststore/ui";
 import {
   EditAddressDrawer,
   LocationDrawer,
-  AddRecipientsDrawer,
   RemoveAddressDrawer,
   DeleteAddressDrawer,
 } from "..";
+import { AddRecipientsDrawer } from "../../../recipients/components";
 import { BasicDropdownMenu, Icon } from "../../../shared/components";
-import { useDrawerProps } from "../../../shared/hooks";
+import { useBuyerPortal, useDrawerProps } from "../../../shared/hooks";
 import { useLocalization } from "../../../shared/localization/LocalizationContext";
+import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
+import { useAddRecipientsToAddress } from "../../hooks/useAddRecipientsToAddress";
 import { useSetDefaultAddress } from "../../hooks/useSetDefaultAddress";
 import { useUnsetDefaultAddress } from "../../hooks/useUnsetDefaultAddress";
 
+import type { RecipientInput } from "../../../recipients/types";
 import type { AddressData } from "../../types";
 
 export type AddressDropdownMenuProps = {
@@ -37,6 +42,10 @@ export const AddressDropdownMenu = ({
   const router = useRouter();
   const { pushToast } = useUI();
   const { t } = useLocalization();
+  const { featureFlags } = useBuyerPortal();
+  const isRecipientsContractLevelEnabled = Boolean(
+    featureFlags?.enableRecipientsContractLevel
+  );
 
   const resolvedLocationsLabel =
     locationsLabel ?? t("addresses.labels.locations");
@@ -122,6 +131,25 @@ ${t("shared.messages.changesTimeout")}`,
     onOpen?.();
   };
 
+  const addRecipientsErrorRef = useRef<Error | null>(null);
+  const { addRecipientsToAddress, isAddRecipientToAddressLoading } =
+    useAddRecipientsToAddress({
+      onError: (error) => {
+        addRecipientsErrorRef.current = error;
+      },
+    });
+
+  const handleAddRecipientsSubmit = async (recipients: RecipientInput[]) => {
+    addRecipientsErrorRef.current = null;
+    await addRecipientsToAddress({
+      unitId: orgUnitId,
+      contractId: customerId,
+      addressId: currentAddress.id,
+      recipients,
+    });
+    if (addRecipientsErrorRef.current) throw addRecipientsErrorRef.current;
+  };
+
   const {
     open: openEditDrawerProps,
     isOpen: isEditDrawerOpen,
@@ -172,13 +200,15 @@ ${t("shared.messages.changesTimeout")}`,
           <UIIcon name="PlusCircle" {...sizeProps} />
           {t("addresses.actions.addLocations", [resolvedLocationsLabel])}
         </DropdownItem>
-        <DropdownItem
-          data-fs-bp-testid="dropdown-item-add-recipient"
-          onClick={openRecipientsDrawer}
-        >
-          <UIIcon name="PlusCircle" {...sizeProps} />
-          {t("addresses.actions.addRecipients")}
-        </DropdownItem>
+        {!isRecipientsContractLevelEnabled && (
+          <DropdownItem
+            data-fs-bp-testid="dropdown-item-add-recipient"
+            onClick={openRecipientsDrawer}
+          >
+            <UIIcon name="PlusCircle" {...sizeProps} />
+            {t("addresses.actions.addRecipients")}
+          </DropdownItem>
+        )}
         {currentAddress.isDefault ? (
           <DropdownItem onClick={handleUnsetAsDefault}>
             <Icon name="BookmarkRemove" {...sizeProps} />
@@ -227,13 +257,20 @@ ${t("shared.messages.changesTimeout")}`,
           locationsLabel={resolvedLocationsLabel}
         />
       )}
-      {isOpenRecipientsDrawer && (
+      {!isRecipientsContractLevelEnabled && isOpenRecipientsDrawer && (
         <AddRecipientsDrawer
           readonly
           {...recipientDrawerProps}
           isOpen={isOpenRecipientsDrawer}
-          refetchRecipients={() => router.reload()}
+          isSubmitting={isAddRecipientToAddressLoading}
+          onSubmit={handleAddRecipientsSubmit}
+          onSubmitted={() => router.reload()}
           addressId={currentAddress.id}
+          viewLink={`${buyerPortalRoutes.addressDetails({
+            orgUnitId,
+            contractId: customerId,
+            addressId: currentAddress.id,
+          })}?tab=recipient-tab`}
         />
       )}
       {isOpenRemoveAddressDrawer && (

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

@@ -2,7 +2,8 @@ import { useState } from "react";
 
 import { useUI, Alert } from "@faststore/ui";
 
-import { AddressForm, LocationForm, RecipientsForm } from "../";
+import { AddressForm, LocationForm } from "../";
+import { RecipientsForm } from "../../../recipients/components";
 import {
   type BasicDrawerProps,
   BasicDrawer,
@@ -40,7 +41,10 @@ export const CreateAddressDrawer = ({
   const { t } = useLocalization();
   const [isTouched, setIsTouched] = useState(false);
   const [useExistingAddress, setUseExistingAddress] = useState(false);
-  const { currentOrgUnit } = useBuyerPortal();
+  const { currentOrgUnit, featureFlags } = useBuyerPortal();
+  const isRecipientsContractLevelEnabled = Boolean(
+    featureFlags?.enableRecipientsContractLevel
+  );
   const { trackEvent, trackEntityCreated, trackEntityCreateError } =
     useAnalytics({
       entityType: "address",
@@ -186,9 +190,11 @@ export const CreateAddressDrawer = ({
         <TabBar>
           <TabOption id="address-tab">{t("addresses.tabs.details")}</TabOption>
           <TabOption id="location-tab">{resolvedLocationsLabel}</TabOption>
-          <TabOption id="recipient-tab">
-            {t("addresses.tabs.recipients")}
-          </TabOption>
+          {!isRecipientsContractLevelEnabled && (
+            <TabOption id="recipient-tab">
+              {t("addresses.tabs.recipients")}
+            </TabOption>
+          )}
         </TabBar>
 
         {invalidAddress && (
@@ -233,12 +239,14 @@ export const CreateAddressDrawer = ({
             />
           </TabContent>
 
-          <TabContent id="recipient-tab">
-            <RecipientsForm
-              recipients={recipients}
-              setRecipients={setRecipients}
-            />
-          </TabContent>
+          {!isRecipientsContractLevelEnabled && (
+            <TabContent id="recipient-tab">
+              <RecipientsForm
+                recipients={recipients}
+                setRecipients={setRecipients}
+              />
+            </TabContent>
+          )}
         </BasicDrawer.Body>
       </Tab>
 

package/src/features/addresses/components/CreateAddressDrawer/create-address-drawer.scss

@@ -6,7 +6,7 @@
   @import "../../../shared/components/ErrorMessage/error-message.scss";
   @import "../ExistingAddress/existing-address.scss";
   @import "../LocationForm/location-form.scss";
-  @import "../RecipientsForm/recipients-form.scss";
+  @import "../../../recipients/components/RecipientsForm/recipients-form.scss";
 
   @import "@faststore/ui/src/components/molecules/Alert/styles.scss";
 

package/src/features/addresses/components/CreateAddressSettingsDrawer/create-address-settings-drawer.scss

@@ -7,7 +7,7 @@
 
   @import "../ExistingAddress/existing-address.scss";
   @import "../LocationForm/location-form.scss";
-  @import "../RecipientsForm/recipients-form.scss";
+  @import "../../../recipients/components/RecipientsForm/recipients-form.scss";
 
   @import "@faststore/ui/src/components/molecules/Alert/styles.scss";
 

package/src/features/addresses/components/RemoveAddressDrawer/remove-address-drawer.scss

@@ -5,7 +5,7 @@
   @import "../../../shared/components/ErrorMessage/error-message.scss";
   @import "../ExistingAddress/existing-address.scss";
   @import "../LocationForm/location-form.scss";
-  @import "../RecipientsForm/recipients-form.scss";
+  @import "../../../recipients/components/RecipientsForm/recipients-form.scss";
 
 
   [data-fs-bp-drawer-label] {

package/src/features/addresses/components/index.ts

@@ -2,13 +2,11 @@ export { AddressLine, type AddressLineProps } from "./AddressLine/AddressLine";
 export { default as AddressesCard } from "./AddressesCard/AddressesCard";
 export { CreateAddressDrawer } from "./CreateAddressDrawer/CreateAddressDrawer";
 export { LocationForm } from "./LocationForm/LocationForm";
-export { RecipientsForm } from "./RecipientsForm/RecipientsForm";
 export { AddressForm } from "./AddressForm/AddressForm";
 export { ExistingAddress } from "./ExistingAddress/ExistingAddress";
 export { EditAddressDrawer } from "./EditAddressDrawer/EditAddressDrawer";
 export { AddressDropdownMenu } from "./AddressDropdownMenu/AddressDropdownMenu";
 export { LocationDrawer } from "./LocationsDrawer/LocationsDrawer";
-export { AddRecipientsDrawer } from "./AddRecipientsDrawer/AddRecipientsDrawer";
 export { RemoveAddressDrawer } from "./RemoveAddressDrawer/RemoveAddressDrawer";
 export { DeleteAddressDrawer } from "./DeleteAddressDrawer/DeleteAddressDrawer";
 export { AddressLocationsList } from "./AddressLocationsList/AddressLocationsList";

package/src/features/addresses/layouts/AddressDetailsLayout/AddressDetailsLayout.tsx

@@ -4,15 +4,29 @@ import { useRouter } from "next/router";
 
 import { Dropdown, Skeleton, useUI } from "@faststore/ui";
 
+import {
+  AddRecipientsDrawer,
+  DeleteRecipientDrawer,
+  EditRecipientDrawer,
+  RecipientsList,
+} from "../../../recipients/components";
 import {
   BasicDropdownMenu,
+  EmptyState,
   HeaderInside,
+  InternalSearch,
+  Paginator,
   Tab,
 } from "../../../shared/components";
 import { TabBar } from "../../../shared/components/Tab/TabBar";
 import { TabContent } from "../../../shared/components/Tab/TabContent";
 import { TabOption } from "../../../shared/components/Tab/TabOption";
 import { useBuyerPortal, useDrawerProps } from "../../../shared/hooks";
+import {
+  PAGE_PARAMS,
+  SEARCH_PARAMS,
+  usePageItems,
+} from "../../../shared/hooks/usePageItems";
 import { ContractTabsLayout, GlobalLayout } from "../../../shared/layouts";
 import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { addressLabelToPropMapping } from "../../../shared/utils";
@@ -20,21 +34,27 @@ import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
 import {
   AddressDropdownMenu,
   EditAddressDrawer,
-  AddRecipientsDrawer,
   LocationDrawer,
 } from "../../components";
 import { AddressLocationsList } from "../../components/AddressLocationsList/AddressLocationsList";
-import { AddressRecipientsList } from "../../components/AddressRecipientsList/AddressRecipientsList";
 import { useGetAddressLocationSettings } from "../../hooks";
-import { getStateDisplayFromCode } from "../../utils";
+import { useAddRecipientsToAddress } from "../../hooks/useAddRecipientsToAddress";
+import { useDeleteRecipientAddress } from "../../hooks/useDeleteRecipientAddress";
+import { useEditRecipientsToAddress } from "../../hooks/useEditRecipientsToAddress";
+import { useSearchAddressRecipients } from "../../hooks/useSearchAddressRecipients";
+import { getStateDisplayFromCode, resolveTab } from "../../utils";
 
+import type {
+  RecipientEditInput,
+  RecipientInput,
+} from "../../../recipients/types";
 import type { AddressLocationsListRef } from "../../components/AddressLocationsList/AddressLocationsList";
-import type { AddressRecipientsListRef } from "../../components/AddressRecipientsList/AddressRecipientsList";
-import type { AddressData } from "../../types";
+import type { AddressData, RecipientData } from "../../types";
 import type {
   LocationsPageData,
   RecipientsPageData,
 } from "../../types/AddressData";
+import type { AddressDetailTabId } from "../../utils";
 
 export type AddressDetailsLayoutProps = {
   addressDetails: AddressData | null;
@@ -42,8 +62,6 @@ export type AddressDetailsLayoutProps = {
   locationsData: LocationsPageData;
 };
 
-type AddressDetailTabId = "address-tab" | "location-tab" | "recipient-tab";
-
 export const AddressDetailsLayout = ({
   addressDetails,
   recipientsData,
@@ -58,35 +76,31 @@ export const AddressDetailsLayout = ({
     return null;
   }
 
-  const { currentOrgUnit: orgUnit, currentContract: contract } =
-    useBuyerPortal();
-
-  const [activeTabId, setActiveTabId] = useState<AddressDetailTabId>(() => {
-    const tabFromQuery = router.query.tab as AddressDetailTabId;
-    const validTabs: AddressDetailTabId[] = [
-      "address-tab",
-      "location-tab",
-      "recipient-tab",
-    ];
+  const {
+    currentOrgUnit: orgUnit,
+    currentContract: contract,
+    featureFlags,
+  } = useBuyerPortal();
+  const isRecipientsContractLevelEnabled = Boolean(
+    featureFlags?.enableRecipientsContractLevel
+  );
 
-    return validTabs.includes(tabFromQuery) ? tabFromQuery : "address-tab";
-  });
+  const [activeTabId, setActiveTabId] = useState<AddressDetailTabId>(() =>
+    resolveTab(router.query.tab, isRecipientsContractLevelEnabled)
+  );
   const { open: openEditDrawer, ...createDrawerProps } = useDrawerProps();
-  const addressRecipientsListRef = useRef<AddressRecipientsListRef>(null);
   const addressLocationsListRef = useRef<AddressLocationsListRef>(null);
 
   useEffect(() => {
-    const tabFromQuery = router.query.tab as AddressDetailTabId;
-    const validTabs: AddressDetailTabId[] = [
-      "address-tab",
-      "location-tab",
-      "recipient-tab",
-    ];
-
-    if (validTabs.includes(tabFromQuery) && tabFromQuery !== activeTabId) {
-      setActiveTabId(tabFromQuery);
+    const resolvedTab = resolveTab(
+      router.query.tab,
+      isRecipientsContractLevelEnabled
+    );
+
+    if (resolvedTab !== activeTabId) {
+      setActiveTabId(resolvedTab);
     }
-  }, [router.query.tab, activeTabId]);
+  }, [router.query.tab, activeTabId, isRecipientsContractLevelEnabled]);
 
   const {
     open: openLocationsDrawer,
@@ -100,6 +114,18 @@ export const AddressDetailsLayout = ({
     ...recipientDrawerProps
   } = useDrawerProps();
 
+  const {
+    open: openEditRecipientDrawer,
+    isOpen: isOpenEditRecipientDrawer,
+    ...editRecipientDrawerProps
+  } = useDrawerProps();
+
+  const {
+    open: openDeleteRecipientDrawer,
+    isOpen: isOpenDeleteRecipientDrawer,
+    ...deleteRecipientDrawerProps
+  } = useDrawerProps();
+
   const { isLocationSettingsLoading, locationSettingsData } =
     useGetAddressLocationSettings(
       {
@@ -138,8 +164,113 @@ export const AddressDetailsLayout = ({
     setActiveTabId(newTabId);
   };
 
+  const [currentRecipient, setCurrentRecipient] = useState<RecipientData>();
+  const [totalRecipients, setTotalRecipients] = useState(recipientsData.total);
+
+  const {
+    isLoading: isRecipientsLoading,
+    items: recipients,
+    searchTerm: recipientsSearchTerm,
+    setSearchTerm: setRecipientsSearchTerm,
+    increasePage: increaseRecipientsPage,
+    setIsLoading: setIsRecipientsLoading,
+    setItems: setRecipientItems,
+  } = usePageItems<RecipientData>({
+    initialItems: recipientsData.data,
+    search: recipientsData.search,
+    page: recipientsData.page ?? 1,
+    pageParam: PAGE_PARAMS.RECIPIENTS,
+    searchParam: SEARCH_PARAMS.RECIPIENTS,
+  });
+
+  const { searchAddressRecipients, refetchSearchAddressRecipients } =
+    useSearchAddressRecipients(
+      {
+        unitId: orgUnit?.id ?? "",
+        addressId: router.query.addressId as string,
+        customerId: router.query.contractId as string,
+        page: 1,
+        search: recipientsData.search ?? "",
+      },
+      { lazy: isRecipientsContractLevelEnabled }
+    );
+
+  useEffect(() => {
+    if (searchAddressRecipients?.data) {
+      setRecipientItems(searchAddressRecipients.data);
+      setTotalRecipients(searchAddressRecipients.total);
+      setIsRecipientsLoading(false);
+    }
+  }, [searchAddressRecipients]);
+
   const handleRefetchRecipients = () => {
-    addressRecipientsListRef.current?.refetchRecipients();
+    setIsRecipientsLoading(true);
+    refetchSearchAddressRecipients();
+  };
+
+  const addRecipientsErrorRef = useRef<Error | null>(null);
+  const { addRecipientsToAddress, isAddRecipientToAddressLoading } =
+    useAddRecipientsToAddress({
+      onError: (error) => {
+        addRecipientsErrorRef.current = error;
+      },
+    });
+
+  const handleAddRecipientsSubmit = async (recipients: RecipientInput[]) => {
+    addRecipientsErrorRef.current = null;
+    await addRecipientsToAddress({
+      unitId: orgUnit?.id ?? "",
+      contractId: router.query.contractId as string,
+      addressId: addressDetails.id,
+      recipients,
+    });
+    if (addRecipientsErrorRef.current) throw addRecipientsErrorRef.current;
+  };
+
+  const editRecipientErrorRef = useRef<Error | null>(null);
+  const { editRecipientsToAddress, isEditRecipientToAddressLoading } =
+    useEditRecipientsToAddress({
+      onError: (error) => {
+        editRecipientErrorRef.current = error;
+      },
+    });
+
+  const handleEditRecipientSubmit = async (input: RecipientEditInput) => {
+    if (!currentRecipient) return;
+
+    editRecipientErrorRef.current = null;
+    await editRecipientsToAddress({
+      unitId: orgUnit?.id ?? "",
+      contractId: router.query.contractId as string,
+      addressId: router.query.addressId as string,
+      recipientId: currentRecipient.id,
+      recipientData: {
+        recipientName: input.recipientName,
+        recipientPhone: input.recipientPhone,
+      },
+    });
+    if (editRecipientErrorRef.current) throw editRecipientErrorRef.current;
+  };
+
+  const deleteRecipientErrorRef = useRef<Error | null>(null);
+  const { deleteRecipientAddress, isDeleteRecipientAddressLoading } =
+    useDeleteRecipientAddress({
+      onError: (error) => {
+        deleteRecipientErrorRef.current = error;
+      },
+    });
+
+  const handleDeleteRecipientSubmit = async () => {
+    if (!currentRecipient) return;
+
+    deleteRecipientErrorRef.current = null;
+    await deleteRecipientAddress({
+      unitId: orgUnit?.id ?? "",
+      recipientId: currentRecipient.id,
+      addressId: router.query.addressId as string,
+      customerId: router.query.contractId as string,
+    });
+    if (deleteRecipientErrorRef.current) throw deleteRecipientErrorRef.current;
   };
 
   const renderActionButton = () =>
@@ -219,9 +350,11 @@ export const AddressDetailsLayout = ({
                       {locationSettingsData?.name ??
                         t("addresses.labels.locations")}
                     </TabOption>
-                    <TabOption id="recipient-tab">
-                      {t("addresses.tabs.recipients")}
-                    </TabOption>
+                    {!isRecipientsContractLevelEnabled && (
+                      <TabOption id="recipient-tab">
+                        {t("addresses.tabs.recipients")}
+                      </TabOption>
+                    )}
                   </TabBar>
                 )}
 
@@ -284,25 +417,105 @@ export const AddressDetailsLayout = ({
                 />
               </TabContent>
 
-              <TabContent id="recipient-tab">
-                <AddressRecipientsList
-                  recipients={recipientsData.data}
-                  total={recipientsData?.total}
-                  search={recipientsData.search ?? ""}
-                  page={recipientsData.page ?? 1}
-                  countryCode={"USA"}
-                  ref={addressRecipientsListRef}
-                />
+              {!isRecipientsContractLevelEnabled && (
+                <TabContent id="recipient-tab">
+                  <div data-fs-bp-address-tabs-list>
+                    <div data-fs-bp-address-tabs-filter>
+                      <InternalSearch
+                        defaultValue={recipientsSearchTerm}
+                        textSearch={setRecipientsSearchTerm}
+                      />
 
-                {isOpenRecipientsDrawer && (
-                  <AddRecipientsDrawer
-                    readonly
-                    {...recipientDrawerProps}
-                    isOpen={isOpenRecipientsDrawer}
-                    refetchRecipients={handleRefetchRecipients}
-                  />
-                )}
-              </TabContent>
+                      <Paginator.Counter
+                        total={totalRecipients}
+                        itemsLength={recipients.length}
+                      />
+                    </div>
+
+                    {!isRecipientsLoading &&
+                    recipients.length === 0 &&
+                    recipientsSearchTerm.length > 0 ? (
+                      <EmptyState
+                        title={t("addresses.empty.noResults")}
+                        description={t("addresses.empty.tryDifferentTerms")}
+                      />
+                    ) : (
+                      <div data-fs-bp-address-tabs-table>
+                        <RecipientsList
+                          recipients={recipients}
+                          isLoading={isRecipientsLoading}
+                          searchTerm={recipientsSearchTerm}
+                          countryCode="USA"
+                          onEditRecipient={(recipient) => {
+                            setCurrentRecipient(recipient);
+                            openEditRecipientDrawer();
+                          }}
+                          onDeleteRecipient={(recipient) => {
+                            setCurrentRecipient(recipient);
+                            openDeleteRecipientDrawer();
+                          }}
+                        />
+
+                        <div data-fs-bp-address-tabs-paginator-last>
+                          {totalRecipients > recipients.length && (
+                            <Paginator.NextPageButton
+                              onClick={increaseRecipientsPage}
+                              disabled={isRecipientsLoading}
+                            >
+                              {isRecipientsLoading
+                                ? t("shared.labels.loading")
+                                : t("shared.buttons.loadMore")}
+                            </Paginator.NextPageButton>
+                          )}
+
+                          <Paginator.Counter
+                            total={totalRecipients}
+                            itemsLength={recipients.length}
+                          />
+                        </div>
+                      </div>
+                    )}
+                  </div>
+
+                  {isOpenRecipientsDrawer && (
+                    <AddRecipientsDrawer
+                      readonly
+                      {...recipientDrawerProps}
+                      isOpen={isOpenRecipientsDrawer}
+                      isSubmitting={isAddRecipientToAddressLoading}
+                      onSubmit={handleAddRecipientsSubmit}
+                      onSubmitted={handleRefetchRecipients}
+                      addressId={addressDetails.id}
+                    />
+                  )}
+
+                  {isOpenEditRecipientDrawer && currentRecipient && (
+                    <EditRecipientDrawer
+                      readonly
+                      recipient={currentRecipient}
+                      {...editRecipientDrawerProps}
+                      isOpen={isOpenEditRecipientDrawer}
+                      isSubmitting={isEditRecipientToAddressLoading}
+                      onSubmit={handleEditRecipientSubmit}
+                      onSubmitted={handleRefetchRecipients}
+                      addressId={addressDetails.id}
+                    />
+                  )}
+
+                  {isOpenDeleteRecipientDrawer && currentRecipient && (
+                    <DeleteRecipientDrawer
+                      readonly
+                      recipient={currentRecipient}
+                      {...deleteRecipientDrawerProps}
+                      isOpen={isOpenDeleteRecipientDrawer}
+                      isSubmitting={isDeleteRecipientAddressLoading}
+                      onSubmit={handleDeleteRecipientSubmit}
+                      onSubmitted={handleRefetchRecipients}
+                      addressId={addressDetails.id}
+                    />
+                  )}
+                </TabContent>
+              )}
             </Tab>
           </div>
         </section>

package/src/features/addresses/layouts/AddressDetailsLayout/address-details-layout.scss

@@ -9,6 +9,8 @@
 	@import "../../../shared/components/EmptyState/empty-state.scss";
 	@import "../../../shared/components/Paginator/paginator.scss";
 	@import "../../components//AddressForm/address-form.scss";
+	@import "../../../recipients/components/EditRecipientDrawer/edit-recipient-drawer.scss";
+	@import "../../../recipients/components/DeleteRecipientDrawer/delete-recipient-drawer.scss";
 
 	height: 100%;
 
@@ -202,7 +204,7 @@
 
 [data-fs-bp-address-tabs-list] {
 	@import "@faststore/ui/src/components/atoms/Icon/styles.scss";
-	@import "../../components/EditRecipientAddressDrawer/edit-recipient-address-drawer.scss";
+	@import "../../../recipients/components/RecipientsList/recipients-list.scss";
 
 	height: 100%;
 	display: flex;