@vtex/faststore-plugin-buyer-portal 1.0.42 → 1.0.43

package/package.json

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

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

@@ -19,6 +19,16 @@ export default class AddressesClient extends Client {
     });
   }
 
+
+  getAddressesByUnitId(orgUnitId: string, cookie: string, name?: string) {
+    const url = `unit/addresses/${orgUnitId}` + (name ? `?name=${name}` : "");
+    return this.get<AddressList>(url, {
+      headers: {
+        Cookie: cookie,
+      },
+    });
+  }
+
   getAddressById(addressId: string, cookie: string) {
     return this.get<AddressData>(`address/${addressId}`, {
       headers: {

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

@@ -1,4 +1,4 @@
-import { Dropdown } from "@faststore/ui";
+import { Toggle, Dropdown, DropdownButton } from "@faststore/ui";
 import Link from "next/link";
 import { BasicDropdownMenu, Icon, Tag } from "../../../shared/components";
 import type { AddressData } from "../../types";

package/src/features/addresses/components/AddressLine/address-line.scss

@@ -1,15 +1,8 @@
 [data-fs-addresses-line] {
   width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-
   padding: var(--fs-spacing-2) 0;
   border-top: var(--fs-border-width) solid #e5e5e5;
 
-  display: flex;
-  align-items: center;
-
   &:hover {
     background-color: #f5f5f5;
   }
@@ -32,7 +25,6 @@
   }
 
   [data-fs-addresses-line-name] {
-    width: 25%;
     margin-right: var(--fs-spacing-3);
     font-weight: var(--fs-text-weight-medium);
     font-size: var(--fs-text-size-1);

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

@@ -0,0 +1,27 @@
+import { useMemo } from "react";
+import { useDebounce } from "../../shared/hooks";
+import { AddressData } from "../types";
+
+export const useDebouncedFilterAddress = (
+  searchTerm = "",
+  addressData: AddressData[]
+) => {
+  const debouncedSearchTerm = useDebounce(searchTerm, 200);
+
+  const filteredAddresses = useMemo(() => {
+    if (debouncedSearchTerm === "") {
+      return addressData;
+    }
+
+    return addressData.filter((address) => {
+      const addressName = address.name.toLowerCase() || "";
+
+      return addressName
+        .includes(debouncedSearchTerm.toLowerCase());
+    });
+  }, [debouncedSearchTerm, addressData]);
+
+  return {
+    filteredAddresses,
+  };
+};

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

@@ -0,0 +1,26 @@
+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

@@ -0,0 +1,20 @@
+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/layouts/AddressesLayout/AddressesLayout.tsx

@@ -1,45 +1,63 @@
-import {
-  InternalTopBar,
-  MainLinksDropdownMenu,
-  InternalSearch,
-  DropdownFilter,
-  SortFilter,
-  Icon,
-  HeaderInside,
-} from "../../../shared/components";
+import { use, useEffect, useState } from "react";
+import { InternalSearch, HeaderInside } from "../../../shared/components";
 import {
   useQueryParams,
   useDrawerProps,
   useBuyerPortal,
 } from "../../../shared/hooks";
 import { ContractTabsLayout, GlobalLayout } from "../../../shared/layouts";
-import { statusFilters } from "../../../shared/utils";
 import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
-import { AddressLine, CreateAddressDrawer } from "../../components";
+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";
 
 export type AddressLayoutProps = {
   data: AddressData[];
+  search?: string;
 };
 
-export const AddressLayout = ({ data }: AddressLayoutProps) => {
+export const AddressLayout = ({ data, search }: AddressLayoutProps) => {
+  const [addressesData, setAddressesData] = useState<AddressData[]>(data);
+  const [querySearch, setQuerySearch] = useState(search ?? "");
   const { setQueryString, removeQueryString } = useQueryParams();
+
   const {
     open: openCreateDrawer,
     isOpen: isCreateAddressDrawerOpen,
     ...createDrawerProps
   } = useDrawerProps();
 
-  const types = data
-    .flatMap((address) => address.types)
-    .filter((tag, index, self) => self.indexOf(tag) === index);
-
   const {
     currentOrgUnit: orgUnit,
     currentUser: user,
     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
@@ -58,63 +76,75 @@ export const AddressLayout = ({ data }: AddressLayoutProps) => {
           <HeaderInside title="Address">
             <HeaderInside.Button onClick={openCreateDrawer} />
           </HeaderInside>
-          <div data-fs-buyer-portal-address-filter>
-            <div data-fs-buyer-portal-address-filter-search-container>
-              <InternalSearch
-                textSearch={(searchTerm) => {
-                  searchTerm
-                    ? setQueryString("search", searchTerm)
-                    : removeQueryString("search");
-                }}
-              />
-
-              <DropdownFilter
-                label="Type"
-                filterOptions={types}
-                updateFilter={(inputFilter) => {
-                  setQueryString("type", inputFilter);
-                }}
-                clearFilter={() => {
-                  removeQueryString("type");
-                }}
-              />
-
-              <DropdownFilter
-                label="Status"
-                filterOptions={Object.keys(statusFilters)}
-                updateFilter={(inputFilter) => {
-                  setQueryString("status", inputFilter);
-                }}
-                clearFilter={() => {
-                  removeQueryString("status");
-                }}
-              />
-            </div>
 
-            <SortFilter updateSort={(sort) => setQueryString("sort", sort)} />
-          </div>
+          {data.length === 0 ? (
+            <EmptyState title="No addresses yet" iconName="LocalPostOffice" />
+          ) : (
+            <>
+              <div data-fs-buyer-portal-address-filter>
+                <InternalSearch defaultValue={querySearch} textSearch={handleSearch} />
+              </div>
+              {!isLoading &&
+              addressesData.length === 0 &&
+              querySearch.length > 0 ? (
+                <EmptyState
+                  title="No results found"
+                  description="Try using different terms or filters"
+                />
+              ) : (
+                <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>
 
-          <ul data-fs-addresses-list>
-            {data.map(({ id, ...address }) => (
-              <AddressLine
-                currentAddress={{ id, ...address }}
-                href={buyerPortalRoutes.addressDetails({
-                  orgUnitId: orgUnit?.id ?? "",
-                  contractId: contract?.id ?? "",
-                  addressId: id,
-                })}
-                id={`${id}`}
-                key={id}
-                {...address}
-              />
-            ))}
-          </ul>
-          {isCreateAddressDrawerOpen && (
-            <CreateAddressDrawer
-              readonly
-              isOpen={isCreateAddressDrawerOpen}
-              {...createDrawerProps}
-            />
+                  {isCreateAddressDrawerOpen && (
+                    <CreateAddressDrawer
+                      readonly
+                      isOpen={isCreateAddressDrawerOpen}
+                      {...createDrawerProps}
+                    />
+                  )}
+                </div>
+              )}
+            </>
           )}
         </section>
       </ContractTabsLayout>

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

@@ -4,16 +4,19 @@
 
 [data-fs-addresses-section] {
   @import "@faststore/ui/src/components/molecules/Toggle/styles.scss";
-
   @import "../../components/AddressLine/address-line.scss";
-
   @import "../../../shared/components/InternalSearch/internal-search.scss";
   @import "../../../shared/components/DropdownFilter/dropdown-filter.scss";
   @import "../../../shared/components/Tag/tag.scss";
   @import "../../../shared/components/SortFilter/sort-filter.scss";
   @import "../../../shared/components/HeaderInside/header-inside.scss";
+  @import "../../../shared/components/Table/table.scss";
+  @import "../../../shared/components/EmptyState/empty-state.scss";
 
   padding: 0 calc(var(--fs-spacing-9) - var(--fs-spacing-0));
+  display: flex;
+  flex-direction: column;
+  height: 100%;
 
   [data-fs-topbar-actions-wrapper] {
     display: flex;

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

@@ -0,0 +1,47 @@
+import type { AddressData } from "../types/AddressData";
+import { compareItems, statusFilters } from "../../shared/utils";
+import { addressesClient } from "../clients/AddressesClient";
+
+export type GetAddressesByUnitIdServiceProps = Partial<{
+  search: string;
+  orgUnitId: string;
+  status: string;
+  type: string;
+  sort: string;
+}> & {
+  cookie: string;
+};
+
+export const getAddressesByUnitIdService = async ({
+  orgUnitId,
+  status,
+  type,
+  sort,
+  cookie,
+}: GetAddressesByUnitIdServiceProps): Promise<AddressData[]> => {
+  if (!orgUnitId) {
+    return [];
+  }
+
+  const addressesData: AddressData[] = [];
+
+  try {
+    const { addresses = [] } = await addressesClient.getAddressesByUnitId(
+      orgUnitId,
+      cookie
+    );
+    addressesData.push(...addresses);
+  } catch (err) {
+    throw new Error(JSON.stringify(err));
+  }
+
+  return addressesData
+    ?.filter((address) => {
+      const matchesStatus =
+        !status || address.isActive === statusFilters[status];
+      const matchesType = !type || address.types.includes(type);
+
+      return matchesStatus && matchesType;
+    })
+    .sort((a, b) => compareItems(a, b, sort));
+};

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

@@ -3,6 +3,10 @@ export {
   getAddressesService,
   type GetAddressesServiceProps,
 } from "./get-addresses.service";
+export {
+  getAddressesByUnitIdService,
+  type GetAddressesByUnitIdServiceProps,
+} from "./get-addresses-by-unit-id.service";
 export {
   createNewAddressService,
   type CreateNewAddressServiceProps,
@@ -15,6 +19,10 @@ 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/addresses/services/search-address-by-unit-id.service.ts

@@ -0,0 +1,30 @@
+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,
+  };
+};

package/src/features/buying-policies/layouts/BuyingPoliciesLayout/BuyingPoliciesLayout.tsx

@@ -1,13 +1,11 @@
 import { FinanceTabsLayout, GlobalLayout } from "../../../shared/layouts";
-import {
-  HeaderInside,
-  InternalSearch,
-  ListLine,
-} from "../../../shared/components";
+import { HeaderInside, InternalSearch } from "../../../shared/components";
 import { useBuyerPortal, useQueryParams } from "../../../shared/hooks";
 import type { BuyingPolicy } from "../../types";
 import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
 import { BuyingPolicyDropdownMenu } from "../../components";
+import { Table } from "../../../shared/components/Table/Table";
+import { getTableColumns } from "../../../shared/components/Table/utils/tableColumns";
 
 export type BuyingPoliciesLayoutProps = {
   data: { buyingPolicies: BuyingPolicy[] } | null;
@@ -41,20 +39,25 @@ export const BuyingPoliciesLayout = ({
             />
           </div>
 
-          <span data-fs-buying-policies-heading>Name</span>
-          {data?.buyingPolicies.map((buyingPolicy) => (
-            <ListLine
-              key={buyingPolicy.id}
-              title={buyingPolicy.name}
-              iconName="Rebase"
-              href={buyerPortalRoutes.buyingPolicyDetails({
-                contractId: currentContract?.id ?? "",
-                orgUnitId: currentOrgUnit?.id ?? "",
-                buyingPolicyId: buyingPolicy.id,
-              })}
-              dropdownMenu={<BuyingPolicyDropdownMenu />}
-            />
-          ))}
+          <Table>
+            <Table.Head columns={getTableColumns({ withType: false })} />
+            <Table.Body>
+              {data?.buyingPolicies.map((buyingPolicy) => (
+                <Table.Row
+                  key={buyingPolicy.id}
+                  title={buyingPolicy.name}
+                  iconName="Rebase"
+                  iconSize={20}
+                  href={buyerPortalRoutes.buyingPolicyDetails({
+                    contractId: currentContract?.id ?? "",
+                    orgUnitId: currentOrgUnit?.id ?? "",
+                    buyingPolicyId: buyingPolicy.id,
+                  })}
+                  dropdownMenu={<BuyingPolicyDropdownMenu />}
+                />
+              ))}
+            </Table.Body>
+          </Table>
         </section>
       </FinanceTabsLayout>
     </GlobalLayout>

package/src/features/buying-policies/layouts/BuyingPoliciesLayout/buying-policies-layout.scss

@@ -5,7 +5,7 @@
 [data-fs-buying-policies-section] {
   @import "../../../shared/components/HeaderInside/header-inside.scss";
   @import "../../../shared/components/InternalSearch/internal-search.scss";
-  @import "../../../shared/components/ListLine/list-line.scss";
+  @import "../../../shared/components/Table/table.scss";
 
   [data-fs-buying-policies-filter] {
     display: flex;

package/src/features/shared/components/EmptyState/EmptyState.tsx

@@ -0,0 +1,28 @@
+import { Icon } from "../Icon";
+
+type EmptyStateProps = {
+  title: string;
+  description?: string;
+  iconName?: string;
+  iconSize?: number;
+};
+
+export const EmptyState = ({
+  title,
+  iconSize = 40,
+  iconName,
+  description,
+}: EmptyStateProps) => (
+  <section data-fs-empty-state-section>
+    {iconName ? (
+      <Icon
+        data-fs-bp-line-icon
+        name={iconName}
+        width={iconSize}
+        height={iconSize}
+      />
+    ) : null}
+    <h2 data-fs-empty-state-title>{title}</h2>
+    {description ? <p data-fs-empty-state-description>{description}</p> : null}
+  </section>
+);

package/src/features/shared/components/EmptyState/empty-state.scss

@@ -0,0 +1,19 @@
+[data-fs-empty-state-section] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  gap: var(--fs-spacing-1);
+  color: #5c5c5c;
+
+  [data-fs-empty-state-title] {
+    font-size: var(--fs-text-size-3);
+    font-weight: var(--fs-text-weight-semibold);
+    line-height: calc(var(--fs-text-size-4) + var(--fs-scale));
+  }
+
+  [data-fs-empty-state-description] {
+    font-size: var(--fs-text-size-1);
+  }
+}

package/src/features/shared/components/InternalSearch/InternalSearch.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { useState } from "react";
 import { Icon as UIIcon } from "@faststore/ui";
 
 type InternalSearchProps = {
@@ -7,20 +7,60 @@ type InternalSearchProps = {
 };
 
 const InternalSearch = ({ textSearch, defaultValue }: InternalSearchProps) => {
+  const [searchTerm, setSearchTerm] = useState(defaultValue || "");
+  const [isFocused, setIsFocused] = useState(false);
+
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.target.value;
+    setSearchTerm(value);
+    textSearch(value);
+  };
+
   return (
-    <div data-fs-buyer-portal-internal-search>
-      <UIIcon
-        name="MagnifyingGlass"
-        height={20}
-        width={20}
-        data-fs-buyer-portal-search-icon
-      />
+    <div
+      data-fs-buyer-portal-internal-search
+      data-fs-search-input-focused={isFocused}
+    >
       <input
         data-fs-buyer-portal-internal-search-input
+        value={searchTerm}
         placeholder="Search"
         defaultValue={defaultValue}
-        onChange={(event) => textSearch(event.target.value)}
+        onChange={handleInputChange}
+        onFocus={() => setIsFocused(true)}
+        onBlur={() => setIsFocused(false)}
       />
+
+      <div data-fs-buyer-portal-search-icon>
+        {searchTerm.length > 0 ? (
+          <>
+            <div data-fs-icon-button>
+              <UIIcon
+                name="X"
+                width={20}
+                height={20}
+                onClick={() => {
+                  setSearchTerm("");
+                  textSearch("");
+                }}
+              />
+            </div>
+            <div data-fs-divider />
+          </>
+        ) : null}
+
+        <div data-fs-icon-button>
+          <UIIcon
+            name="MagnifyingGlass"
+            width={20}
+            height={20}
+            onClick={() => {
+              setSearchTerm("");
+              textSearch("");
+            }}
+          />
+        </div>
+      </div>
     </div>
   );
 };

package/src/features/shared/components/InternalSearch/internal-search.scss

@@ -6,14 +6,41 @@
   height: var(--fs-spacing-6);
   gap: var(--fs-spacing-4);
   border-radius: var(--fs-border-radius-pill);
-  margin-right: var(--fs-spacing-0);
+  padding-left: var(--fs-spacing-3);
+  padding-right: var(--fs-spacing-0);
+  padding-top: var(--fs-spacing-0);
+  padding-bottom: var(--fs-spacing-0);
+  position: relative;
+
+
+  &[data-fs-search-input-focused="true"] {
+    border: var(--fs-border-width) solid #0366DD;
+  }
+
+  [data-fs-icon-button] {
+    display: flex;
+    padding: var(--fs-spacing-0);
+    align-items: center;
+    cursor: pointer;
+  }
+
+  [data-fs-divider] {
+    height: 24px;
+    width: 1px;
+    border: calc(var(--fs-border-width) / 2) solid #e0e0e0;
+  }
 
   [data-fs-buyer-portal-internal-search-input] {
+    width: 100%;
     border: none;
+    size: var(--fs-text-size-1);
     outline: none;
   }
 
   [data-fs-buyer-portal-search-icon] {
-    margin-left: var(--fs-spacing-2);
+    display: flex;
+    gap: var(--fs-spacing-0);
+    display: flex;
+    align-items: center;
   }
 }

package/src/features/shared/components/SearchHighlight/SearchHighlight.tsx

@@ -0,0 +1,25 @@
+type SearchHighlightProps = {
+  text: string;
+  highlight: string;
+};
+
+export const SearchHighlight: React.FC<SearchHighlightProps> = ({ text, highlight }) => {
+  if (!highlight) return <>{text}</>;
+
+  const regex = new RegExp(`(${highlight})`, 'gi');
+  const parts = text.split(regex);
+
+  return (
+    <>
+      {parts.map((part, i) =>
+        regex.test(part) ? (
+          <span key={i} data-fs-search-highlight>
+            {part}
+          </span>
+        ) : (
+          <span key={i}>{part}</span>
+        )
+      )}
+    </>
+  );
+};

package/src/features/shared/components/SearchHighlight/search-highlight.scss

@@ -0,0 +1,5 @@
+[data-fs-search-highlight] {
+  background-color: #ffedcd;
+  border-radius: var(--fs-spacing-0);
+  padding: var(--fs-spacing-0) 0;
+}

package/src/features/shared/components/Table/Table.tsx

@@ -0,0 +1,17 @@
+import { TableRow } from "./TableRow/TableRow";
+import { TableBody } from "./TableBody/TableBody";
+import TableHead from "./TableHead/TableHead";
+import { TableLoading } from "./TableLoading/TableLoading";
+
+export type TableProps = {
+  children: React.ReactNode;
+};
+
+export const Table = ({ children }: TableProps) => {
+  return <table data-fs-bp-table>{children}</table>;
+};
+
+Table.Head = TableHead;
+Table.Body = TableBody;
+Table.Row = TableRow;
+Table.Loading = TableLoading;

package/src/features/shared/components/Table/TableBody/TableBody.tsx

@@ -0,0 +1,3 @@
+export const TableBody = ({ children }: { children: React.ReactNode }) => {
+  return <tbody data-fs-bp-table-body>{children}</tbody>;
+};

package/src/features/shared/components/Table/TableHead/TableHead.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+
+export type TableColumn<T extends string = string> = {
+  key: T;
+  label: React.ReactNode;
+  align?: "left" | "center" | "right";
+  size?: "small" | "medium" | "large";
+  colspan?: number;
+};
+
+export interface TableHeadProps<T extends string | number = string> {
+  columns: Array<TableColumn>;
+  rowProps?: React.HTMLAttributes<HTMLTableRowElement>;
+}
+
+export const TableHead = ({ columns, rowProps }: TableHeadProps) => {
+  return (
+    <thead data-fs-bp-table-head>
+      <tr {...rowProps} data-fs-bp-table-head-row>
+        {columns.map((col) => (
+          <th
+            key={col.key}
+            data-fs-bp-table-head-column
+            data-fs-bp-table-head-column-size={col.size}
+            data-fs-bp-table-head-align={col.align || undefined}
+            colSpan={col.colspan}
+          >
+            {col.label}
+          </th>
+        ))}
+      </tr>
+    </thead>
+  );
+};
+
+export default TableHead;

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

@@ -0,0 +1,41 @@
+[data-fs-bp-table-head] {
+  &[data-fs-bp-table-cell-align="left"] {
+    justify-content: flex-start;
+  }
+  &[data-fs-bp-table-cell-align="right"] {
+    justify-content: flex-end;
+  }
+
+  [data-fs-bp-table-head-column] {
+    color: #5c5c5c;
+    font-size: var(--fs-text-size-1);
+    font-weight: var(--fs-text-weight-regular);
+    padding-top: var(--fs-spacing-2);
+    padding-bottom: var(--fs-spacing-2);
+    padding-left: 0;
+  }
+
+  [data-fs-bp-table-head-align="left"] {
+    text-align: left;
+  }
+
+  [data-fs-bp-table-head-align="right"] {
+    text-align: right;
+  }
+
+  [data-fs-bp-table-head-align="center"] {
+    text-align: center;
+  }
+
+  [data-fs-bp-table-head-column-size="small"] {
+    width: 15%;
+  }
+
+  [data-fs-bp-table-head-column-size="medium"] {
+    width: 25%;
+  }
+
+  [data-fs-bp-table-head-column-size="large"] {
+    width: 40%;
+  }
+}

package/src/features/shared/components/Table/TableLoading/TableLoading.tsx

@@ -0,0 +1,15 @@
+import { Skeleton } from "@faststore/ui";
+
+export const TableLoading = () => {
+  return (
+    <>
+      {Array.from({ length: 5 }).map((_, index) => (
+        <tr data-fs-bp-table-row-loading key={index}>
+          <td colSpan={4}>
+            <Skeleton size={{ width: "100%", height: "1.5rem" }} />
+          </td>
+        </tr>
+      ))}
+    </>
+  );
+};

package/src/features/shared/components/Table/TableLoading/table-loading.scss

@@ -0,0 +1,11 @@
+[data-fs-bp-table-row-loading] {
+  @import "@faststore/ui/src/components/atoms/Skeleton/styles.scss";
+  border-top: var(--fs-border-width) solid #e0e0e0;
+  padding: var(--fs-spacing-2) 0;
+
+  td {
+    padding: var(--fs-spacing-2) 0;
+    font-size: var(--fs-text-size-1);
+    color: #1f1f1f;
+  }
+}

package/src/features/shared/components/Table/TableRow/TableRow.tsx

@@ -0,0 +1,71 @@
+import type { ReactNode } from "react";
+import { Icon } from "../../Icon";
+import { BasicDropdownMenu } from "../../BasicDropdownMenu/BasicDropdownMenu";
+import { Dropdown } from "@faststore/components";
+import Link from "next/link";
+import { SearchHighlight } from "../../SearchHighlight/SearchHighlight";
+
+export type TableRowProps = {
+  children?: ReactNode;
+  title: string;
+  iconName?: string;
+  iconSize?: number;
+  dropdownMenu?: ReactNode;
+  href?: string;
+  searchTerm?: string;
+  onClick?: () => void;
+};
+
+export const TableRow = ({
+  iconName,
+  iconSize = 24,
+  title,
+  dropdownMenu,
+  children,
+  href,
+  searchTerm = "",
+  onClick,
+  ...otherProps
+}: TableRowProps) => {
+  const ClickComponent = href ? Link : "button";
+
+  return (
+    <tr data-fs-bp-table-row {...otherProps}>
+      <td data-fs-bp-table-row-icon-cell>
+        {iconName && (
+          <Icon
+            data-fs-bp-table-row-icon
+            name={iconName}
+            width={iconSize}
+            height={iconSize}
+          />
+        )}
+      </td>
+
+      <td>
+        <span data-fs-bp-table-row-title>
+          <SearchHighlight text={title} highlight={searchTerm} />
+        </span>
+      </td>
+      <td>{children}</td>
+      <td data-fs-bp-table-row-dropdown>
+        {dropdownMenu && (
+          <Dropdown>
+            <BasicDropdownMenu.Trigger />
+            {dropdownMenu}
+          </Dropdown>
+        )}
+      </td>
+
+      <td data-fs-bp-table-row-actions>
+        {href && (
+          <ClickComponent
+            data-fs-bp-table-row-link
+            href={href}
+            onClick={onClick}
+          />
+        )}
+      </td>
+    </tr>
+  );
+};

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

@@ -0,0 +1,64 @@
+@import "../../BasicDropdownMenu/basic-dropdown-menu.scss";
+
+[data-fs-bp-table-row] {
+  @import "../../SearchHighlight/search-highlight.scss";
+  
+  border-top: var(--fs-border-width) solid #e0e0e0;
+  cursor: pointer;
+  position: relative;
+
+  &:hover {
+    background-color: #f5f5f5;
+  }
+
+  td {
+    padding: var(--fs-spacing-2) 0;
+    font-size: var(--fs-text-size-1);
+    color: #1f1f1f;
+  }
+
+  [data-fs-bp-table-row-link] {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+  }
+
+  [data-fs-bp-table-row-icon-cell] {
+    width: var(--fs-spacing-7);
+
+    [data-fs-bp-table-row-icon] {
+      color: #0366dd;
+      margin: calc(var(--fs-spacing-2) - var(--fs-spacing-0));
+      margin-right: var(--fs-spacing-2);
+    }
+  }
+
+  [data-fs-bp-table-row-dropdown] {
+    position: relative;
+    cursor: pointer;
+
+    [data-fs-bp-basic-dropdown-menu-trigger] {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      top: 0;
+      margin: auto;
+      z-index: 1;
+
+      [data-fs-icon] {
+        margin-right: 0;
+      }
+    }
+  }
+
+  [data-fs-bp-table-row-title] {
+    font-weight: 500;
+    font-size: var(--fs-text-size-1);
+    line-height: calc(var(--fs-spacing-4) - var(--fs-spacing-0));
+    color: #1f1f1f;
+    z-index: 1;
+    pointer-events: none;
+  }
+}

package/src/features/shared/components/Table/table.scss

@@ -0,0 +1,13 @@
+@import "./TableRow/table-row.scss";
+@import "./TableHead/table-head.scss";
+@import "./TableLoading/table-loading.scss";
+
+[data-fs-bp-table] {
+  width: 100%;
+  border-collapse: collapse;
+
+  [data-fs-bp-icon] {
+    width: auto;
+    height: auto;
+  }
+}

package/src/features/shared/components/Table/utils/tableColumns.ts

@@ -0,0 +1,40 @@
+import { TableColumn } from "../TableHead/TableHead";
+
+type GetColumnsOptions = {
+  withType?: boolean;
+};
+
+export const getTableColumns = <T extends string = string>(
+  options: GetColumnsOptions = {}
+): TableColumn<T>[] => {
+  const base: TableColumn<T>[] = [
+    {
+      key: "name" as T,
+      label: "Name",
+      align: "left",
+      colspan: 2,
+    },
+  ];
+
+  const typeColumn: TableColumn<T>[] = options.withType
+    ? [
+        {
+          key: "type" as T,
+          label: "Type",
+          align: "left",
+          size: "medium",
+        },
+      ]
+    : [];
+
+  const actions: TableColumn<T>[] = [
+    {
+      key: "actions" as T,
+      label: "",
+      align: "right",
+      size: "large",
+    },
+  ];
+
+  return [...base, ...typeColumn, ...actions];
+};

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

@@ -66,4 +66,4 @@ export {
   HeaderInside,
   type HeaderInsideProps,
 } from "./HeaderInside/HeaderInside";
-export { ListLine, type ListLineProps } from "./ListLine/ListLine";
+export { Table, type TableProps } from "./Table/Table";

package/src/features/shared/utils/search.tsx

@@ -12,8 +12,6 @@ export const userTypesFilters = ["Admin", "Buyer"];
 export const sortingOptions: Dictionary<string> = {
   "Alphabetical Order": "name",
   "Alphabetical Order Desc": "name",
-  "Active First": "status",
-  "Inactive First": "status",
 };
 
 export const updateSort = (arrayToSort: any[], selectedOption: string) => {
@@ -24,16 +22,6 @@ export const updateSort = (arrayToSort: any[], selectedOption: string) => {
     case "Alphabetical Order Desc": {
       return sortDescending(arrayToSort, sortingOptions[selectedOption]);
     }
-    case "Active First": {
-      return arrayToSort.sort((a, b) =>
-        a.isActive === b.isActive ? 0 : a.isActive ? -1 : 1
-      );
-    }
-    case "Inactive First": {
-      return arrayToSort.sort((a, b) =>
-        a.isActive === b.isActive ? 0 : a.isActive ? 1 : -1
-      );
-    }
     default:
       return arrayToSort;
   }

package/src/pages/addresses.tsx

@@ -1,13 +1,10 @@
 import {
-  getAddressesService,
+  getAddressesByUnitIdService,
+  searchAddressByUnitIdService,
   type GetAddressesServiceProps,
 } from "../features/addresses/services";
 
-import {
-  type ClientContext,
-  getClientContext,
-  getCustomerIdFromCookieServerSide,
-} from "../features/shared/utils";
+import { type ClientContext, getClientContext } from "../features/shared/utils";
 import type { AddressData } from "../features/addresses/types";
 import { AddressLayout } from "../features/addresses/layouts";
 import { BuyerPortalProvider } from "../features/shared/components";
@@ -21,6 +18,7 @@ import { getContractDetailsService } from "../features/contracts/services";
 
 export type AddressesPageData = {
   data: AddressData[];
+  search: string;
   context: {
     currentContract: ContractData | null;
     clientContext: ClientContext;
@@ -37,9 +35,10 @@ export type AddressesPageQuery = GetAddressesServiceProps & {
 export async function loader(
   data: LoaderData<AddressesPageQuery>
 ): Promise<AddressesPageData> {
-  const { contractId, orgUnitId } = data.query;
+  const { contractId, orgUnitId, search } = data.query;
 
-  const { cookie, userId, ...clientContext } = await getClientContext(data);
+  const { cookie, userId, customerId, ...clientContext } =
+    await getClientContext(data);
 
   const currentOrgUnit = await getOrgUnitBasicDataService({
     id: orgUnitId,
@@ -54,12 +53,13 @@ export async function loader(
   });
 
   return {
-    data: await getAddressesService({
-      customerId: getCustomerIdFromCookieServerSide(data),
+    data: await getAddressesByUnitIdService({
+      orgUnitId: currentOrgUnit.id,
       cookie,
     }),
+    search: search ?? "",
     context: {
-      clientContext: { cookie, userId, ...clientContext },
+      clientContext: { cookie, userId, customerId, ...clientContext },
       currentOrgUnit,
       currentUser: user,
       currentContract: contract,
@@ -67,9 +67,9 @@ export async function loader(
   };
 }
 
-const AddressPage = ({ data, context }: AddressesPageData) => (
+const AddressPage = ({ data, search, context }: AddressesPageData) => (
   <BuyerPortalProvider {...context}>
-    <AddressLayout data={data} />
+    <AddressLayout data={data} search={search} />
   </BuyerPortalProvider>
 );
 

package/src/features/shared/components/ListLine/ListLine.tsx

@@ -1,52 +0,0 @@
-import type { ReactNode } from "react";
-import { Icon } from "../Icon";
-import { BasicDropdownMenu } from "../BasicDropdownMenu/BasicDropdownMenu";
-import { Dropdown } from "@faststore/components";
-import Link from "next/link";
-
-export type ListLineProps = {
-  children?: ReactNode;
-  title: string;
-  iconName?: string;
-  iconSize?: number;
-  dropdownMenu?: ReactNode;
-  href?: string;
-  onClick?: () => void;
-};
-
-export const ListLine = ({
-  iconName,
-  iconSize = 24,
-  title,
-  dropdownMenu,
-  children,
-  href,
-  onClick,
-  ...otherProps
-}: ListLineProps) => {
-  const ClickComponent = href ? Link : "button";
-
-  return (
-    <li data-fs-bp-line {...otherProps}>
-      {href && (
-        <ClickComponent data-fs-bp-line-link href={href} onClick={onClick} />
-      )}
-      {iconName && (
-        <Icon
-          data-fs-bp-line-icon
-          name={iconName}
-          width={iconSize}
-          height={iconSize}
-        />
-      )}
-      <h3 data-fs-bp-line-title>{title}</h3>
-      {children}
-      {dropdownMenu && (
-        <Dropdown>
-          <BasicDropdownMenu.Trigger />
-          {dropdownMenu}
-        </Dropdown>
-      )}
-    </li>
-  );
-};

package/src/features/shared/components/ListLine/list-line.scss

@@ -1,49 +0,0 @@
-@import "../BasicDropdownMenu/basic-dropdown-menu.scss";
-
-[data-fs-bp-line] {
-  position: relative;
-  list-style: none;
-  border-top: var(--fs-border-width) solid #e0e0e0;
-  padding: var(--fs-spacing-1) var(--fs-spacing-1);
-  align-items: center;
-
-  display: flex;
-  width: 100%;
-
-  &:last-of-type {
-    border-bottom: var(--fs-border-width) solid #e0e0e0;
-  }
-
-  [data-fs-bp-line-link] {
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-
-    &:hover {
-      background-color: #f5f5f5;
-    }
-  }
-
-  [data-fs-bp-line-icon] {
-    color: #0366dd;
-    margin-right: var(--fs-spacing-2);
-    pointer-events: none;
-    z-index: 1;
-  }
-
-  [data-fs-bp-line-title] {
-    font-weight: 500;
-    font-size: var(--fs-text-size-1);
-    line-height: calc(var(--fs-spacing-4) - var(--fs-spacing-0));
-    color: #1f1f1f;
-    z-index: 1;
-    pointer-events: none;
-  }
-
-  [data-fs-bp-basic-dropdown-menu-trigger] {
-    z-index: 1;
-    margin-left: auto;
-  }
-}