@vtex/faststore-plugin-buyer-portal 1.3.76 → 1.3.78

package/.prettierrc

@@ -0,0 +1,3 @@
+{
+  "trailingComma": "es5"
+}

package/CHANGELOG.md

@@ -7,6 +7,30 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.3.78] - 2026-04-23
+
+### Changed
+- Move addresses list requests from server to client side
+
+### Fixed
+- Remove `for` loop from `AddressesClient.getAddressesByUnitId` to prevent failed requests
+
+## [1.3.77] - 2026-04-14
+
+### Changed
+
+- Redesign Assortments page with radio button selection replacing add/remove/settings drawers
+- Migrate assortments data fetching from `/collections/attached` to new `/assortments` endpoint
+- Rename sidebar link from "Product assortment" to "Assortments"
+
+### Added
+
+- Add `setAssortment` mutation (POST `/assortment`) with optimistic UI update
+
+### Removed
+
+- Remove Add Product Assortment, Remove Product Assortment, and Collections Settings drawers from Assortments page
+
 ## [1.3.76] - 2026-04-07
 
 ### Added
@@ -557,7 +581,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add CHANGELOG file
 - Add README file
 
-[unreleased]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.76...HEAD
+[unreleased]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.78...HEAD
 [1.3.55]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.54...v1.3.55
 [1.3.54]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.53...v1.3.54
 [1.3.53]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.52...v1.3.53
@@ -625,6 +649,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 [1.3.65]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.64...v1.3.65
 [1.3.64]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.64
 [1.3.69]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.69
+[1.3.78]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.77...v1.3.78
+[1.3.77]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.76...v1.3.77
 [1.3.76]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.75...v1.3.76
 [1.3.75]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.74...v1.3.75
 [1.3.74]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.73...v1.3.74

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vtex/faststore-plugin-buyer-portal",
-  "version": "1.3.76",
+  "version": "1.3.78",
   "description": "A plugin for faststore with buyer portal",
   "main": "index.js",
   "scripts": {

package/src/features/addresses/clients/AddressesClient.ts

@@ -32,32 +32,14 @@ export default class AddressesClient extends Client {
     addressType,
     page = 1,
   }: GetAddressesByUnitIdParams) {
-    let allAddresses: AddressData[] = [];
-    let total = 0;
-
-    for (let currentPage = 1; currentPage <= page; currentPage++) {
-      const params = new URLSearchParams();
-      if (name) params.append("name", name);
-      if (currentPage > 1) params.append("page", String(currentPage));
-      if (addressType) params.append("addressType", addressType);
-      const queryString = params.toString();
-      const url = queryString
-        ? `units/${orgUnitId}/addresses?${queryString}`
-        : `units/${orgUnitId}/addresses`;
-
-      const response = await this.get<AddressResponse>(url, {
-        headers: {
-          Cookie: cookie,
-        },
-      });
-
-      if (response?.addresses) {
-        allAddresses = allAddresses.concat(response.addresses);
-        total = response.total;
-      }
-    }
-
-    return { addresses: allAddresses, total };
+    return this.get<AddressResponse>(`units/${orgUnitId}/addresses`, {
+      headers: { Cookie: cookie },
+      params: {
+        page,
+        name: name ?? "",
+        addressType: addressType ?? "",
+      },
+    });
   }
 
   getAddressById(

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

@@ -8,3 +8,4 @@ export * from "./useAddressLocationDelete";
 export * from "./useSetDefaultAddress";
 export * from "./useUnsetDefaultAddress";
 export * from "./useGetDefaultAddresses";
+export * from "./useListAddresses";

package/src/features/addresses/hooks/useDebouncedSearchAddressByUnitId.ts

@@ -1,7 +1,7 @@
 import { useDebounce } from "../../shared/hooks";
 import { DEBOUNCE_TIMEOUT } from "../../shared/utils/constants";
 
-import { useSearchAddressByUnitId } from "./useSearchAddressByUnitId";
+import { useListAddresses } from "./useListAddresses";
 
 import type { AddressData } from "../types";
 import type { UseDebouncedSearchAddressByUnitIdProps } from "../types/AddressData";
@@ -12,12 +12,11 @@ export const useDebouncedSearchAddressByUnitId = ({
   addressType,
 }: UseDebouncedSearchAddressByUnitIdProps) => {
   const debouncedSearchTerm = useDebounce(search, DEBOUNCE_TIMEOUT);
-  const { searchedAddresses, isSearchedAddressesLoading } =
-    useSearchAddressByUnitId({
-      orgUnitId,
-      search: debouncedSearchTerm,
-      addressType,
-    });
+  const { listAddressesData, listAddressesLoading } = useListAddresses({
+    orgUnitId,
+    search: debouncedSearchTerm,
+    addressType,
+  });
 
   if (search === "") {
     return {
@@ -27,7 +26,7 @@ export const useDebouncedSearchAddressByUnitId = ({
   }
 
   return {
-    searchedAddresses: searchedAddresses?.data ?? [],
-    isDebouncedSearchAddressesLoading: isSearchedAddressesLoading,
+    searchedAddresses: listAddressesData?.data ?? [],
+    isDebouncedSearchAddressesLoading: listAddressesLoading,
   };
 };

package/src/features/addresses/hooks/useListAddresses.ts

@@ -0,0 +1,36 @@
+import { type QueryOptions, useQuery } from "../../shared/hooks";
+import { getAddressesByUnitIdService } from "../services";
+
+type UseListAddressesProps = {
+  orgUnitId: string;
+  search: string;
+  page?: number;
+  addressType?: string;
+};
+
+export const useListAddresses = (
+  { orgUnitId, search, page = 1, addressType }: UseListAddressesProps,
+  options?: QueryOptions<AwaitedType<typeof getAddressesByUnitIdService>>
+) => {
+  const { data, error, isLoading, refetch } = useQuery(
+    `api/addresses/unitId=${orgUnitId}/page=${page}/search=${
+      search ?? ""
+    }/addressType=${addressType ?? ""}`,
+    ({ cookie }) =>
+      getAddressesByUnitIdService({
+        orgUnitId,
+        search,
+        cookie,
+        addressType,
+        page,
+      }),
+    options
+  );
+
+  return {
+    listAddressesData: data,
+    listAddressesError: error,
+    listAddressesLoading: isLoading,
+    listAddressesRefresh: refetch,
+  };
+};

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

@@ -3,85 +3,42 @@ import { useEffect } from "react";
 import { useRouter } from "next/router";
 
 import {
+  EmptyState,
   HeaderInside,
   IconBookmarked,
   InternalSearch,
   Paginator,
+  Table,
 } from "../../../shared/components";
-import { EmptyState } from "../../../shared/components/EmptyState/EmptyState";
-import { Table } from "../../../shared/components/Table/Table";
 import { getTableColumns } from "../../../shared/components/Table/utils/tableColumns";
 import {
   useBuyerPortal,
   useDrawerProps,
   useGetScopeConfig,
+  useUrlPaginatedSearch,
   SCOPE_KEYS,
 } from "../../../shared/hooks";
-import { usePageItems } from "../../../shared/hooks/usePageItems";
 import { ContractTabsLayout, GlobalLayout } from "../../../shared/layouts";
 import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
 import { AddressDropdownMenu, CreateAddressDrawer } from "../../components";
 import { CreateAddressSettingsDrawer } from "../../components/CreateAddressSettingsDrawer/CreateAddressSettingsDrawer";
-import { useSearchAddressByUnitId } from "../../hooks/useSearchAddressByUnitId";
+import { useListAddresses } from "../../hooks/useListAddresses";
 
-import type { AddressData } from "../../types";
+const PAGE_SIZE = 25;
 
-export type AddressLayoutProps = {
-  addresses: AddressData[];
-  total: number;
-  search: string;
-  page: number;
-};
-
-export const AddressLayout = ({
-  addresses: initialAddresses,
-  search,
-  total,
-  page,
-}: AddressLayoutProps) => {
+export const AddressLayout = () => {
   const router = useRouter();
 
   const {
-    isLoading,
-    items: addresses,
-    searchTerm,
-    setSearchTerm,
-    increasePage,
-    updateItemsFromRefetch,
-    setIsLoading,
-  } = usePageItems<AddressData>({
-    initialItems: initialAddresses,
-    search,
     page,
-  });
-
-  const { searchedAddresses: addressesData, refetchSearchedAddresses } =
-    useSearchAddressByUnitId(
-      {
-        orgUnitId: router.query.orgUnitId as string,
-        search: search ?? "",
-      },
-      { lazy: true }
-    );
-
-  useEffect(() => {
-    if (addresses.length === 0) {
-      setIsLoading(true);
-      refetchSearchedAddresses();
-    }
-  }, []);
-
-  useEffect(() => {
-    if (addressesData?.data) {
-      updateItemsFromRefetch(addressesData.data);
-    }
-  }, [addressesData]);
-
-  const handleRefetchAddresses = () => {
-    setIsLoading(true);
-    refetchScopeConfig();
-    refetchSearchedAddresses();
-  };
+    search,
+    committedSearch,
+    isRouterSynced,
+    setSearch,
+    goToPage,
+    nextPage,
+    previousPage,
+  } = useUrlPaginatedSearch();
 
   const {
     open: openCreateDrawer,
@@ -109,6 +66,21 @@ export const AddressLayout = ({
     }
   );
 
+  const { listAddressesData, listAddressesLoading, listAddressesRefresh } =
+    useListAddresses(
+      {
+        orgUnitId: (router.query.orgUnitId as string) ?? "",
+        page: isRouterSynced ? page : 0,
+        search: committedSearch,
+      },
+      { lazy: !isRouterSynced }
+    );
+
+  const handleRefetchAddresses = () => {
+    refetchScopeConfig();
+    listAddressesRefresh();
+  };
+
   const columns = getTableColumns({
     nameColumnSize: "18.125rem",
     actionsLength: 2,
@@ -123,6 +95,23 @@ export const AddressLayout = ({
     ],
   });
 
+  const intervalData = {
+    page,
+    itemsLength: listAddressesData?.data.length ?? 0,
+    total: listAddressesData?.total ?? 0,
+    isLoading: listAddressesLoading,
+  };
+
+  const totalPages = Math.ceil(intervalData.total / PAGE_SIZE);
+
+  useEffect(() => {
+    if (listAddressesLoading || intervalData.total === 0) return;
+
+    if (page > totalPages) {
+      goToPage(Math.max(totalPages, 1));
+    }
+  }, [page, totalPages, intervalData.total, listAddressesLoading]);
+
   return (
     <GlobalLayout>
       <ContractTabsLayout
@@ -142,103 +131,96 @@ export const AddressLayout = ({
             <HeaderInside.Button onClick={openCreateDrawer} />
           </HeaderInside>
 
-          {addresses.length === 0 && !isLoading && searchTerm.length === 0 ? (
-            <EmptyState title="No addresses yet" iconName="LocalPostOffice" />
+          <div data-fs-buyer-portal-address-filter>
+            <InternalSearch defaultValue={search} textSearch={setSearch} />
+            <Paginator.Interval {...intervalData} />
+          </div>
+
+          {!listAddressesLoading && intervalData.total === 0 ? (
+            <EmptyState
+              title={
+                committedSearch.length > 0
+                  ? "No results found"
+                  : "No addresses yet"
+              }
+              description={
+                committedSearch.length > 0
+                  ? "Try using different terms or filters"
+                  : undefined
+              }
+              iconName={
+                committedSearch.length > 0 ? undefined : "LocalPostOffice"
+              }
+            />
           ) : (
-            <>
-              <div data-fs-buyer-portal-address-filter>
-                <InternalSearch
-                  defaultValue={searchTerm}
-                  textSearch={setSearchTerm}
-                />
-                <div data-fs-bp-top-counter>
-                  <Paginator.Counter
-                    total={total}
-                    itemsLength={addresses.length}
-                  />
-                </div>
-              </div>
-              {!isLoading && addresses.length === 0 && searchTerm.length > 0 ? (
-                <EmptyState
-                  title="No results found"
-                  description="Try using different terms or filters"
-                />
-              ) : (
-                <div data-fs-addresses-table>
-                  <Table layoutFixed>
-                    <Table.Head columns={columns} />
-
-                    <Table.Body>
-                      {isLoading ? (
-                        <Table.Loading columns={columns.length} />
-                      ) : (
-                        addresses.map(({ id, ...address }) => (
-                          <Table.Row
-                            key={id}
-                            title={address.name}
-                            searchTerm={search}
-                            iconName="LocalPostOffice"
-                            iconSize={20}
-                            children={
-                              <Table.Cell hideOnScreenSize="phonemid">
-                                {Array.isArray(address.types) &&
-                                address.types.length > 0 ? (
-                                  <span>{address.types.join(", ")}</span>
-                                ) : null}
-                              </Table.Cell>
-                            }
-                            href={buyerPortalRoutes.addressDetails({
-                              orgUnitId: orgUnit?.id ?? "",
-                              contractId: contract?.id ?? "",
-                              addressId: id,
-                            })}
-                            actionIcons={
-                              address.isDefault ? <IconBookmarked /> : null
-                            }
-                            dropdownMenu={
-                              <AddressDropdownMenu
-                                currentAddress={{
-                                  id,
-                                  ...address,
-                                }}
-                                isSyncMode={isSyncMode}
-                                onUpdate={handleRefetchAddresses}
-                                onOpen={() => {
-                                  const url = buyerPortalRoutes.addressDetails({
-                                    orgUnitId: orgUnit?.id ?? "",
-                                    contractId: contract?.id ?? "",
-                                    addressId: id,
-                                  });
-
-                                  router.push(url);
-                                }}
-                              />
-                            }
+            <div data-fs-addresses-table>
+              <Table layoutFixed>
+                <Table.Head columns={columns} />
+                <Table.Body>
+                  {listAddressesLoading ? (
+                    <Table.Loading columns={columns.length} />
+                  ) : (
+                    listAddressesData?.data.map(({ id, ...address }) => (
+                      <Table.Row
+                        key={id}
+                        title={address.name}
+                        searchTerm={committedSearch}
+                        iconName="LocalPostOffice"
+                        iconSize={20}
+                        href={buyerPortalRoutes.addressDetails({
+                          orgUnitId: orgUnit?.id ?? "",
+                          contractId: contract?.id ?? "",
+                          addressId: id,
+                        })}
+                        actionIcons={
+                          address.isDefault ? <IconBookmarked /> : null
+                        }
+                        dropdownMenu={
+                          <AddressDropdownMenu
+                            currentAddress={{ id, ...address }}
+                            isSyncMode={isSyncMode}
+                            onUpdate={handleRefetchAddresses}
+                            onOpen={() => {
+                              const url = buyerPortalRoutes.addressDetails({
+                                orgUnitId: orgUnit?.id ?? "",
+                                contractId: contract?.id ?? "",
+                                addressId: id,
+                              });
+
+                              router.push(url);
+                            }}
                           />
-                        ))
-                      )}
-                    </Table.Body>
-                  </Table>
-
-                  {!isLoading && (
-                    <p
-                      data-fs-bp-addresses-paginator-last
-                    >{`${addresses.length} of ${total}`}</p>
-                  )}
-
-                  <div data-fs-bp-addresses-paginator>
-                    {total > addresses.length && (
-                      <Paginator.NextPageButton
-                        onClick={increasePage}
-                        disabled={isLoading}
+                        }
                       >
-                        {isLoading ? "Loading" : "Load More"}
-                      </Paginator.NextPageButton>
-                    )}
-                  </div>
-                </div>
-              )}
-            </>
+                        <Table.Cell hideOnScreenSize="phonemid">
+                          {Array.isArray(address.types) &&
+                          address.types.length > 0 ? (
+                            <span>{address.types.join(", ")}</span>
+                          ) : null}
+                        </Table.Cell>
+                      </Table.Row>
+                    ))
+                  )}
+                </Table.Body>
+              </Table>
+
+              <div data-fs-bp-addresses-paginator>
+                <Paginator.NextPageButton
+                  onClick={previousPage}
+                  disabled={page <= 1}
+                >
+                  Previous Page
+                </Paginator.NextPageButton>
+                <Paginator.NextPageButton
+                  data-fs-bp-addresses-next-page
+                  onClick={nextPage}
+                  disabled={page >= totalPages}
+                >
+                  Next Page
+                </Paginator.NextPageButton>
+                <Paginator.Interval {...intervalData} />
+              </div>
+            </div>
           )}
 
           {isCreateAddressDrawerOpen && (

package/src/features/addresses/layouts/AddressesLayout/addresses-layout.scss

@@ -146,8 +146,23 @@
 		display: flex;
 		align-items: center;
 		justify-content: flex-start;
-		margin-top: var(--fs-spacing-2);
-		padding: var(--fs-spacing-2) 0;
+		margin-top: var(--fs-bp-margin-3);
+		padding: var(--fs-bp-padding-3) 0;
+		gap: var(--fs-bp-gap-4);
+
+		[data-fs-bp-paginator-counter] {
+			margin-left: var(--fs-bp-margin-auto)
+		}
+
+		[data-fs-paginator-next-page-button]:disabled {			
+      cursor: not-allowed;
+      color: var(--fs-bp-color-neutral-6);
+      
+      &:hover {
+        color: var(--fs-bp-color-neutral-6);
+        background-color: transparent;
+      }
+		}
 
 		@include media("<=phonemid") {
 			padding: var(--fs-spacing-3) 0;

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

@@ -2,7 +2,4 @@ export {
   AddressDetailsLayout,
   type AddressDetailsLayoutProps,
 } from "./AddressDetailsLayout/AddressDetailsLayout";
-export {
-  AddressLayout,
-  type AddressLayoutProps,
-} from "./AddressesLayout/AddressesLayout";
+export { AddressLayout } from "./AddressesLayout/AddressesLayout";

package/src/features/product-assortment/clients/ProductAssortmentClient.ts

@@ -2,9 +2,8 @@ import { Client } from "../../shared/clients/Client";
 import { getApiUrl } from "../../shared/utils";
 
 import type {
-  AddProductAssortmentPayload,
-  AddProductAssortmentResponse,
   GetProductAssortmentFromContractResponse,
+  SetAssortmentPayload,
 } from "../types";
 
 type DefaultArgs = {
@@ -18,72 +17,35 @@ export class ProductAssortmentClient extends Client {
     super(getApiUrl());
   }
 
-  getProductAssortmentsInfoInContract(
-    args: DefaultArgs & { name?: string; page?: number }
-  ) {
-    const { contractId, cookie, name, unitId, page } = args;
-
-    return this.get<GetProductAssortmentFromContractResponse>(
-      `customers/${contractId}/units/${unitId}/collections/attached`,
-      {
-        headers: { Cookie: cookie },
-        params: {
-          ...(name ? { name } : undefined),
-          ...(page ? { page } : undefined),
-        },
-      }
-    );
-  }
-
-  getProductAssortmentListInScope(
+  getAssortments(
     args: DefaultArgs & {
-      unitId: string;
       name?: string;
-      page: number;
     }
   ) {
-    const { contractId, cookie, name, unitId, page } = args;
+    const { contractId, cookie, name, unitId } = args;
 
     return this.get<GetProductAssortmentFromContractResponse>(
-      `customers/${contractId}/units/${unitId}/collections/available`,
+      `customers/${contractId}/units/${unitId}/assortments/available`,
       {
         headers: { Cookie: cookie },
         params: {
           ...(name ? { name } : undefined),
-          page,
-          v: new Date().getTime(),
         },
       }
     );
   }
 
-  addProductAssortmentToScope(
-    args: DefaultArgs & { unitId: string; data: AddProductAssortmentPayload }
-  ) {
+  setAssortment(args: DefaultArgs & { data: SetAssortmentPayload }) {
     const { contractId, cookie, unitId, data } = args;
 
-    return this.post<AddProductAssortmentResponse, AddProductAssortmentPayload>(
-      `/customers/${contractId}/units/${unitId}/collections`,
+    return this.put<void, SetAssortmentPayload>(
+      `customers/${contractId}/units/${unitId}/assortments`,
       data,
       {
         headers: { Cookie: cookie },
       }
     );
   }
-
-  removeProductAssortmentFromScope(
-    args: DefaultArgs & { unitId: string; productAssortmentId: string }
-  ) {
-    const { contractId, unitId, cookie, productAssortmentId } = args;
-
-    return this.delete(
-      `/customers/${contractId}/units/${unitId}/collections/${productAssortmentId}`,
-      undefined,
-      {
-        headers: { Cookie: cookie },
-      }
-    );
-  }
 }
 
 const productAssortmentClient = new ProductAssortmentClient();