@vtex/faststore-plugin-buyer-portal 1.3.18 → 1.3.19

package/CHANGELOG.md

@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.3.19] - 2025-11-05
+
+### Added
+
+- Add isLoading state to orgUnit search input
+
 ## [1.3.18] - 2025-11-05
 
 ### Added
@@ -211,7 +217,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.18...HEAD
+[unreleased]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.19...HEAD
 [1.2.3]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.2.2...1.2.3
 [1.2.3]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.2.3
 [1.2.4]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.2.4
@@ -226,6 +232,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 # <<<<<<< HEAD
 
+[1.3.19]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.18...v1.3.19
 [1.3.18]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.17...v1.3.18
 [1.3.17]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.16...v1.3.17
 [1.3.16]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.15...v1.3.16

package/package.json

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

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

@@ -4,6 +4,11 @@ import { AutocompleteDropdown } from "..";
 import { useDebouncedSearchOrgUnit } from "../../../users/hooks";
 import { OptionSelected } from "../OptionSelected/OptionSelected";
 
+type Option = {
+  name: string;
+  id: string;
+};
+
 export type OrgUnitInputSearchProps = Omit<
   ComponentProps<typeof AutocompleteDropdown>,
   "onSelect" | "label" | "onConfirmKeyPress"
@@ -25,9 +30,15 @@ export const OrgUnitInputSearch = ({
 }: OrgUnitInputSearchProps) => {
   const [autocompleteInputValue, setAutocompleteInputValue] = useState("");
 
-  const { searchedOrgUnits } = useDebouncedSearchOrgUnit(
-    autocompleteInputValue
-  );
+  const { searchedOrgUnits, isSearchedOrgUnitsLoading } =
+    useDebouncedSearchOrgUnit(autocompleteInputValue);
+
+  const loadingObject: Option = { id: "loading", name: "loading..." };
+
+  const handleSelect = (option: Option) => {
+    if (option.id === loadingObject.id) return;
+    onSelect?.(option);
+  };
 
   return orgUnit.name ? (
     <OptionSelected
@@ -47,15 +58,8 @@ export const OrgUnitInputSearch = ({
       {...otherProps}
       label="Search organizational units"
       value={autocompleteInputValue}
-      options={searchedOrgUnits}
-      onConfirmKeyPress={(option) =>
-        onSelect?.(
-          option as {
-            name: string;
-            id: string;
-          }
-        )
-      }
+      options={isSearchedOrgUnitsLoading ? [loadingObject] : searchedOrgUnits}
+      onConfirmKeyPress={handleSelect}
       onChange={(event) => {
         setAutocompleteInputValue(event.currentTarget.value);
       }}
@@ -65,7 +69,7 @@ export const OrgUnitInputSearch = ({
           closeOnClick
           index={index}
           isSelected={orgUnit?.id === option?.id}
-          onClick={() => onSelect?.(option)}
+          onClick={() => handleSelect(option)}
         >
           {option?.name}
         </AutocompleteDropdown.Item>

package/src/features/shared/utils/constants.ts

@@ -13,4 +13,4 @@ export const LOCAL_STORAGE_LOCATION_EDIT_KEY = "bp_hide_edit_location_confirm";
 export const LOCAL_STORAGE_RECIPIENT_EDIT_KEY =
   "bp_hide_edit_recipient_confirm";
 
-export const CURRENT_VERSION = "1.3.18";
+export const CURRENT_VERSION = "1.3.19";

package/src/features/users/hooks/useDebouncedSearchOrgUnit.ts

@@ -7,18 +7,14 @@ export const useDebouncedSearchOrgUnit = (searchTerm = "") => {
   const { searchedOrgUnits, isSearchedOrgUnitsLoading } =
     useSearchOrgUnits(debouncedSearchTerm);
 
-  if (searchTerm === "") {
-    return {
-      searchedOrgUnits: [] as {
-        name: string;
-        id: string;
-      }[],
-      isLoading: false,
-    };
-  }
+  const isDebouncing = searchTerm !== debouncedSearchTerm;
+  const isLoading =
+    searchTerm !== "" && (isDebouncing || isSearchedOrgUnitsLoading);
 
   return {
-    searchedOrgUnits: searchedOrgUnits?.organizationalUnits ?? [],
-    isDebouncedSearchOrgUnitLoading: isSearchedOrgUnitsLoading,
+    searchedOrgUnits: searchTerm
+      ? searchedOrgUnits?.organizationalUnits ?? []
+      : [],
+    isSearchedOrgUnitsLoading: isLoading,
   };
 };