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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vtex/faststore-plugin-buyer-portal",
-  "version": "1.0.41",
+  "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>
   );
 };