@vtex/faststore-plugin-buyer-portal 1.0.47 → 1.0.48

package/CHANGELOG.md

@@ -19,6 +19,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add Buying Policy Drawers
 - Add Buying Policy Integrations
 - Add Pagination Tools
+- Add Address Pagination
 
 ### Added
 

package/package.json

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

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

@@ -2,8 +2,9 @@ import { Client } from "../../shared/clients/Client";
 import { getApiUrl } from "../../shared/utils";
 import type { AddressData, AddressInput } from "../types";
 
-type AddressList = {
+type AddressResponse = {
   addresses: AddressData[];
+  total: number;
 };
 
 export default class AddressesClient extends Client {
@@ -12,17 +13,27 @@ export default class AddressesClient extends Client {
   }
 
   getAddressesByCustomerId(customerId: string, cookie: string) {
-    return this.get<AddressList>(`addresses/${customerId}`, {
+    return this.get<AddressResponse>(`addresses/${customerId}`, {
       headers: {
         Cookie: cookie,
       },
     });
   }
 
+  getAddressesByUnitId(
+    orgUnitId: string,
+    cookie: string,
+    name?: string,
+    page = 1
+  ) {
+    const params = new URLSearchParams();
+    if (name) params.append("name", name);
+    if (page && page > 1) params.append("page", String(page));
+    const queryString = params.toString();
 
-  getAddressesByUnitId(orgUnitId: string, cookie: string, name?: string) {
-    const url = `unit/addresses/${orgUnitId}` + (name ? `?name=${name}` : "");
-    return this.get<AddressList>(url, {
+    const url = `unit/addresses/${orgUnitId}?${queryString}`;
+
+    return this.get<AddressResponse>(url, {
       headers: {
         Cookie: cookie,
       },
@@ -38,7 +49,7 @@ export default class AddressesClient extends Client {
   }
 
   searchAddressesByName(customerId: string, name: string, cookie: string) {
-    return this.get<AddressList>(
+    return this.get<AddressResponse>(
       `search/addresses/${customerId}?name=${name}`,
       {
         headers: {

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

@@ -1,28 +1,42 @@
-import { use, useEffect, useState } from "react";
-import { InternalSearch, HeaderInside } from "../../../shared/components";
 import {
-  useQueryParams,
-  useDrawerProps,
-  useBuyerPortal,
-} from "../../../shared/hooks";
+  InternalSearch,
+  HeaderInside,
+  Paginator,
+} from "../../../shared/components";
+import { useDrawerProps, useBuyerPortal } from "../../../shared/hooks";
 import { ContractTabsLayout, GlobalLayout } from "../../../shared/layouts";
 import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
 import { AddressDropdownMenu, CreateAddressDrawer } from "../../components";
 import type { AddressData } from "../../types";
-import { useDebouncedSearchAddressByUnitId } from "../../hooks/useDebouncedSearchAddressByUnitId";
 import { Table } from "../../../shared/components/Table/Table";
 import { EmptyState } from "../../../shared/components/EmptyState/EmptyState";
 import { getTableColumns } from "../../../shared/components/Table/utils/tableColumns";
+import { usePageItems } from "../../../shared/hooks/usePageItems";
 
 export type AddressLayoutProps = {
-  data: AddressData[];
-  search?: string;
+  addresses: AddressData[];
+  total: number;
+  search: string;
+  page: number;
 };
 
-export const AddressLayout = ({ data, search }: AddressLayoutProps) => {
-  const [addressesData, setAddressesData] = useState<AddressData[]>(data);
-  const [querySearch, setQuerySearch] = useState(search ?? "");
-  const { setQueryString, removeQueryString } = useQueryParams();
+export const AddressLayout = ({
+  addresses: initialAddresses,
+  search,
+  total,
+  page,
+}: AddressLayoutProps) => {
+  const {
+    isLoading,
+    items: addresses,
+    searchTerm,
+    setSearchTerm,
+    increasePage,
+  } = usePageItems<AddressData>({
+    initialItems: initialAddresses,
+    search,
+    page,
+  });
 
   const {
     open: openCreateDrawer,
@@ -36,28 +50,6 @@ export const AddressLayout = ({ data, search }: AddressLayoutProps) => {
     currentContract: contract,
   } = useBuyerPortal();
 
-  const { searchedAddresses, isLoading } = useDebouncedSearchAddressByUnitId(
-    querySearch,
-    orgUnit?.id ?? ""
-  );
-
-  useEffect(() => {
-    if (!isLoading && querySearch.length > 0) {
-      setAddressesData(searchedAddresses);
-    }
-  }, [searchedAddresses, querySearch, isLoading]);
-
-  const handleSearch = (searchTerm: string) => {
-    setQuerySearch(searchTerm);
-
-    if (searchTerm) {
-      setQueryString("search", searchTerm);
-    } else {
-      removeQueryString("search");
-      setAddressesData(data);
-    }
-  };
-
   return (
     <GlobalLayout>
       <ContractTabsLayout
@@ -77,16 +69,22 @@ export const AddressLayout = ({ data, search }: AddressLayoutProps) => {
             <HeaderInside.Button onClick={openCreateDrawer} />
           </HeaderInside>
 
-          {data.length === 0 ? (
+          {addresses.length === 0 && !isLoading && searchTerm.length === 0 ? (
             <EmptyState title="No addresses yet" iconName="LocalPostOffice" />
           ) : (
             <>
               <div data-fs-buyer-portal-address-filter>
-                <InternalSearch defaultValue={querySearch} textSearch={handleSearch} />
+                <InternalSearch
+                  defaultValue={searchTerm}
+                  textSearch={setSearchTerm}
+                />
+
+                <Paginator.Counter
+                  total={total}
+                  itemsLength={addresses.length}
+                />
               </div>
-              {!isLoading &&
-              addressesData.length === 0 &&
-              querySearch.length > 0 ? (
+              {!isLoading && addresses.length === 0 && searchTerm.length > 0 ? (
                 <EmptyState
                   title="No results found"
                   description="Try using different terms or filters"
@@ -95,46 +93,57 @@ export const AddressLayout = ({ data, search }: AddressLayoutProps) => {
                 <div data-fs-addresses-table>
                   <Table>
                     <Table.Head columns={getTableColumns({ withType: true })} />
-                    {isLoading ? (
-                      <Table.Body>
-                        <Table.Loading />
-                      </Table.Body>
-                    ) : (
-                      <Table.Body>
-                        {addressesData.map(({ id, ...address }) => (
-                          <Table.Row
-                            key={id}
-                            title={address.name}
-                            searchTerm={querySearch}
-                            iconName="LocalPostOffice"
-                            iconSize={20}
-                            children={
-                              Array.isArray(address.types) &&
-                              address.types.length > 0
-                                ? address.types.map((type) => (
-                                    <span key={type}>{type}</span>
-                                  ))
-                                : null
-                            }
-                            href={buyerPortalRoutes.addressDetails({
-                              orgUnitId: orgUnit?.id ?? "",
-                              contractId: contract?.id ?? "",
-                              addressId: id,
-                            })}
-                            dropdownMenu={
-                              <AddressDropdownMenu
-                                currentAddress={{
-                                  id,
-                                  ...address,
-                                }}
-                              />
-                            }
-                          />
-                        ))}
-                      </Table.Body>
-                    )}
+
+                    <Table.Body>
+                      {addresses.map(({ id, ...address }) => (
+                        <Table.Row
+                          key={id}
+                          title={address.name}
+                          searchTerm={search}
+                          iconName="LocalPostOffice"
+                          iconSize={20}
+                          children={
+                            Array.isArray(address.types) &&
+                            address.types.length > 0
+                              ? address.types.map((type) => (
+                                  <span key={type}>{type}</span>
+                                ))
+                              : null
+                          }
+                          href={buyerPortalRoutes.addressDetails({
+                            orgUnitId: orgUnit?.id ?? "",
+                            contractId: contract?.id ?? "",
+                            addressId: id,
+                          })}
+                          dropdownMenu={
+                            <AddressDropdownMenu
+                              currentAddress={{
+                                id,
+                                ...address,
+                              }}
+                            />
+                          }
+                        />
+                      ))}
+                    </Table.Body>
                   </Table>
 
+                  <div data-fs-bp-addresses-paginator>
+                    {total > addresses.length && (
+                      <Paginator.NextPageButton
+                        onClick={increasePage}
+                        disabled={isLoading}
+                      >
+                        {isLoading ? "Loading" : "Load More"}
+                      </Paginator.NextPageButton>
+                    )}
+
+                    <Paginator.Counter
+                      total={total}
+                      itemsLength={addresses.length}
+                    />
+                  </div>
+
                   {isCreateAddressDrawerOpen && (
                     <CreateAddressDrawer
                       readonly

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

@@ -12,8 +12,9 @@
   @import "../../../shared/components/HeaderInside/header-inside.scss";
   @import "../../../shared/components/Table/table.scss";
   @import "../../../shared/components/EmptyState/empty-state.scss";
+  @import "../../../shared/components/Paginator/paginator.scss";
 
-  padding: 0 calc(var(--fs-spacing-9) - var(--fs-spacing-0));
+  padding: calc(var(--fs-spacing-9) - var(--fs-spacing-0));
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -62,7 +63,7 @@
   [data-fs-buyer-portal-address-filter] {
     display: flex;
     justify-content: space-between;
-    padding-bottom: var(--fs-spacing-4);
+    padding: 0 0 var(--fs-spacing-4);
   }
 
   [data-fs-buyer-portal-address-filter-search-container] {
@@ -70,9 +71,15 @@
     gap: var(--fs-spacing-1);
   }
 
-  [data-fs-addresses-list] {
-    width: 100%;
+  [data-fs-addresses-table] {
+    padding-bottom: var(--fs-spacing-9);
+  }
+
+  [data-fs-bp-addresses-paginator] {
     display: flex;
-    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: var(--fs-spacing-0);
+    padding: var(--fs-spacing-2) 0;
   }
 }

package/src/features/addresses/services/get-addresses-by-unit-id.service.ts

@@ -8,6 +8,7 @@ export type GetAddressesByUnitIdServiceProps = Partial<{
   status: string;
   type: string;
   sort: string;
+  page?: number;
 }> & {
   cookie: string;
 };
@@ -18,24 +19,20 @@ export const getAddressesByUnitIdService = async ({
   type,
   sort,
   cookie,
-}: GetAddressesByUnitIdServiceProps): Promise<AddressData[]> => {
+  search = "",
+  page = 1,
+}: GetAddressesByUnitIdServiceProps) => {
   if (!orgUnitId) {
-    return [];
+    return { data: [], total: 0 };
   }
+  const { addresses, total } = await addressesClient.getAddressesByUnitId(
+    orgUnitId,
+    cookie,
+    search,
+    page
+  );
 
-  const addressesData: AddressData[] = [];
-
-  try {
-    const { addresses = [] } = await addressesClient.getAddressesByUnitId(
-      orgUnitId,
-      cookie
-    );
-    addressesData.push(...addresses);
-  } catch (err) {
-    throw new Error(JSON.stringify(err));
-  }
-
-  return addressesData
+  const formattedAddress = addresses
     ?.filter((address) => {
       const matchesStatus =
         !status || address.isActive === statusFilters[status];
@@ -44,4 +41,6 @@ export const getAddressesByUnitIdService = async ({
       return matchesStatus && matchesType;
     })
     .sort((a, b) => compareItems(a, b, sort));
+
+  return { data: formattedAddress, total };
 };

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

@@ -19,10 +19,6 @@ export {
   searchAddressByNameService,
   type SearchAddressByNameProps,
 } from "./search-address-by-name.service";
-export {
-  searchAddressByUnitIdService,
-  type SearchAddressByUnitIdProps,
-} from "./search-address-by-unit-id.service";
 export {
   editAddressService,
   type EditAddressServiceProps,

package/src/features/shared/components/Table/TableHead/table-head.scss

@@ -1,4 +1,6 @@
 [data-fs-bp-table-head] {
+  border-bottom: var(--fs-border-width) solid #e0e0e0;
+
   &[data-fs-bp-table-cell-align="left"] {
     justify-content: flex-start;
   }

package/src/features/shared/components/Table/TableRow/table-row.scss

@@ -2,8 +2,7 @@
 
 [data-fs-bp-table-row] {
   @import "../../SearchHighlight/search-highlight.scss";
-  
-  border-top: var(--fs-border-width) solid #e0e0e0;
+  border-bottom: var(--fs-border-width) solid #e0e0e0;
   cursor: pointer;
   position: relative;
 

package/src/pages/addresses.tsx

@@ -1,10 +1,13 @@
 import {
   getAddressesByUnitIdService,
-  searchAddressByUnitIdService,
   type GetAddressesServiceProps,
 } from "../features/addresses/services";
 
-import { type ClientContext, getClientContext } from "../features/shared/utils";
+import {
+  type ClientContext,
+  getClientContext,
+  getValidPage,
+} from "../features/shared/utils";
 import type { AddressData } from "../features/addresses/types";
 import { AddressLayout } from "../features/addresses/layouts";
 import { BuyerPortalProvider } from "../features/shared/components";
@@ -19,6 +22,8 @@ import { getContractDetailsService } from "../features/contracts/services";
 export type AddressesPageData = {
   data: AddressData[];
   search: string;
+  total: number;
+  page: number;
   context: {
     currentContract: ContractData | null;
     clientContext: ClientContext;
@@ -30,12 +35,15 @@ export type AddressesPageData = {
 export type AddressesPageQuery = GetAddressesServiceProps & {
   orgUnitId: string;
   contractId: string;
+  page?: string;
 };
 
 export async function loader(
   data: LoaderData<AddressesPageQuery>
 ): Promise<AddressesPageData> {
-  const { contractId, orgUnitId, search } = data.query;
+  const { contractId, orgUnitId, search, page: pageString } = data.query;
+
+  const page = getValidPage(pageString);
 
   const { cookie, userId, customerId, ...clientContext } =
     await getClientContext(data);
@@ -52,11 +60,19 @@ export async function loader(
     cookie,
   });
 
-  return {
-    data: await getAddressesByUnitIdService({
+  const { data: addresses = [], total = 0 } = await getAddressesByUnitIdService(
+    {
       orgUnitId: currentOrgUnit.id,
+      search,
+      page,
       cookie,
-    }),
+    }
+  );
+
+  return {
+    data: addresses,
+    total,
+    page,
     search: search ?? "",
     context: {
       clientContext: { cookie, userId, customerId, ...clientContext },
@@ -67,9 +83,15 @@ export async function loader(
   };
 }
 
-const AddressPage = ({ data, search, context }: AddressesPageData) => (
+const AddressPage = ({
+  data,
+  search,
+  page,
+  total,
+  context,
+}: AddressesPageData) => (
   <BuyerPortalProvider {...context}>
-    <AddressLayout data={data} search={search} />
+    <AddressLayout addresses={data} search={search} page={page} total={total} />
   </BuyerPortalProvider>
 );
 

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

@@ -1,26 +0,0 @@
-import { useDebounce } from "../../shared/hooks";
-import { AddressData } from "../types";
-import { useSearchAddressByUnitId } from "./useSearchAddressByUnitId";
-
-export const useDebouncedSearchAddressByUnitId = (
-  searchTerm = "",
-  unitId: string
-) => {
-  const debouncedSearchTerm = useDebounce(searchTerm, 500);
-  const { searchedAddresses, isLoading } = useSearchAddressByUnitId(
-    debouncedSearchTerm,
-    unitId
-  );
-
-  if (searchTerm === "") {
-    return {
-      searchedAddresses: [] as AddressData[],
-      isLoading: false,
-    };
-  }
-
-  return {
-    searchedAddresses: searchedAddresses?.addresses ?? [],
-    isLoading,
-  };
-};

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

@@ -1,20 +0,0 @@
-import { type QueryOptions, useQuery } from "../../shared/hooks";
-import { searchAddressByUnitIdService } from "../services";
-
-export const useSearchAddressByUnitId = (
-  name: string,
-  unitId: string,
-  options?: QueryOptions<AwaitedType<typeof searchAddressByUnitIdService>>
-) => {
-  const { data, error, isLoading, refetch } = useQuery(
-    `api/search/addresses/${name}`,
-    ({ cookie }) => searchAddressByUnitIdService({ name, unitId }, cookie),
-    options
-  );
-  return {
-    searchedAddresses: data,
-    hasError: error,
-    isLoading,
-    refetchSearchedAddresses: refetch,
-  };
-};

package/src/features/addresses/services/search-address-by-unit-id.service.ts

@@ -1,30 +0,0 @@
-import { addressesClient } from "../clients/AddressesClient";
-import type { AddressData } from "../types";
-
-export type SearchAddressByUnitIdProps = {
-  name: string;
-  unitId: string;
-};
-
-export const searchAddressByUnitIdService = async (
-  { name, unitId }: SearchAddressByUnitIdProps,
-  cookie: string
-): Promise<{ addresses: AddressData[]; total: number }> => {
-  if (!name || !unitId) {
-    return {
-      addresses: [],
-      total: 0,
-    };
-  }
-
-  const { addresses } = await addressesClient.getAddressesByUnitId(
-    unitId,
-    cookie,
-    name
-  );
-
-  return {
-    addresses: addresses,
-    total: addresses?.length ?? 0,
-  };
-};