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

package/CHANGELOG.md

@@ -7,6 +7,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.3.20] - 2025-11-05
+
+### Added
+
+- Improves Navigation and User Experience Improvements on Address Management
+
+## [1.3.19] - 2025-11-05
+
+### Added
+
+- Add isLoading state to orgUnit search input
+
 ## [1.3.18] - 2025-11-05
 
 ### Added
@@ -211,7 +223,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.20...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 +238,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 # <<<<<<< HEAD
 
+[1.3.20]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.19...v1.3.20
+[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.20",
   "description": "A plugin for faststore with buyer portal",
   "main": "index.js",
   "scripts": {

package/public/buyer-portal-icons.svg

@@ -543,5 +543,21 @@
       d="M140,180a12,12,0,1,1-12-12A12,12,0,0,1,140,180ZM128,72c-22.06,0-40,16.15-40,36v4a8,8,0,0,0,16,0v-4c0-11,10.77-20,24-20s24,9,24,20-10.77,20-24,20a8,8,0,0,0-8,8v8a8,8,0,0,0,16,0v-.72c18.24-3.35,32-17.9,32-35.28C168,88.15,150.06,72,128,72Zm104,56A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"
       fill="currentColor"/>
   </symbol>
+
+  <symbol id="OpenNewTab" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_401_516)">
+    <mask id="mask0_401_516" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
+    <rect width="20" height="20" fill="#D9D9D9"/>
+    </mask>
+    <g mask="url(#mask0_401_516)">
+    <path d="M4.16667 17.5C3.70833 17.5 3.31597 17.3368 2.98958 17.0104C2.66319 16.684 2.5 16.2917 2.5 15.8333V4.16667C2.5 3.70833 2.66319 3.31597 2.98958 2.98958C3.31597 2.66319 3.70833 2.5 4.16667 2.5H10V4.16667H4.16667V15.8333H15.8333V10H17.5V15.8333C17.5 16.2917 17.3368 16.684 17.0104 17.0104C16.684 17.3368 16.2917 17.5 15.8333 17.5H4.16667ZM8.08333 13.0833L6.91667 11.9167L14.6667 4.16667H11.6667V2.5H17.5V8.33333H15.8333V5.33333L8.08333 13.0833Z" fill="#1F1F1F"/>
+    </g>
+    </g>
+    <defs>
+    <clipPath id="clip0_401_516">
+    <rect width="20" height="20" fill="white"/>
+    </clipPath>
+    </defs>
+  </symbol>
 </svg>
 

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

@@ -7,6 +7,7 @@ import { useUI } from "@faststore/ui";
 import { RecipientsForm } from "..";
 import { type BasicDrawerProps, BasicDrawer } from "../../../shared/components";
 import { useBuyerPortal } from "../../../shared/hooks";
+import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
 import { useAddRecipientsToAddress } from "../../hooks/useAddRecipientsToAddress";
 
 import type { RecipientInput } from "../../types";
@@ -14,7 +15,7 @@ import type { RecipientInput } from "../../types";
 export type AddRecipientsDrawerProps = Omit<BasicDrawerProps, "children"> & {
   readonly?: boolean;
   addressId?: string;
-  refetchRecipients: () => void;
+  refetchRecipients?: () => void;
 };
 
 export const AddRecipientsDrawer = ({
@@ -30,18 +31,38 @@ export const AddRecipientsDrawer = ({
   const { pushToast } = useUI();
   const { currentOrgUnit } = useBuyerPortal();
 
-  const handleAddRecipientToAddressSuccess = () => {
-    pushToast({
-      message: "Recipients added successfully ",
-      status: "INFO",
-    });
-    refetchRecipients();
-    close();
-  };
-
   const { addRecipientsToAddress, isAddRecipientToAddressLoading } =
     useAddRecipientsToAddress({
-      onSuccess: handleAddRecipientToAddressSuccess,
+      onSuccess: () => {
+        const hasTabParam = router.query?.tab === "recipient-tab";
+
+        pushToast({
+          message: "Recipients added successfully ",
+          status: "INFO",
+          icon: (
+            <button
+              data-fs-bp-toast-view-button
+              type="button"
+              onClick={() => {
+                const url = buyerPortalRoutes.addressDetails({
+                  orgUnitId: currentOrgUnit?.id ?? "",
+                  contractId: router.query.contractId as string,
+                  addressId: addressId ?? (router.query.addressId as string),
+                });
+
+                router.push(`${url}?tab=recipient-tab`);
+              }}
+            >
+              View
+            </button>
+          ),
+        });
+
+        close();
+        if (hasTabParam) {
+          refetchRecipients?.();
+        }
+      },
       onError: () => {
         pushToast({
           message: "An error occurred while adding recipients",

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

@@ -20,6 +20,7 @@ import type { AddressData } from "../../types";
 export type AddressDropdownMenuProps = {
   currentAddress: AddressData;
   onUpdate?: () => void;
+  onOpen?: () => void;
   onCreate?: () => void;
   isComplete?: boolean;
 };
@@ -27,6 +28,7 @@ export type AddressDropdownMenuProps = {
 export const AddressDropdownMenu = ({
   currentAddress,
   onUpdate,
+  onOpen,
 }: AddressDropdownMenuProps) => {
   const router = useRouter();
   const { pushToast } = useUI();
@@ -106,6 +108,10 @@ export const AddressDropdownMenu = ({
     });
   };
 
+  const handleOpenNewTab = () => {
+    onOpen?.();
+  };
+
   // const idsPath = currentOrgUnit?.path?.ids?.split("/") ?? [];
   // const isRootLevelOrgUnit = idsPath.length === 2;
 
@@ -144,6 +150,10 @@ export const AddressDropdownMenu = ({
   return (
     <>
       <BasicDropdownMenu data-fs-bp-dropdown-menu>
+        <DropdownItem onClick={handleOpenNewTab}>
+          <Icon name="OpenNewTab" {...sizeProps} />
+          Open
+        </DropdownItem>
         <DropdownItem onClick={openEditDrawerProps}>
           <Icon name="Edit" {...sizeProps} />
           Edit details
@@ -198,7 +208,6 @@ export const AddressDropdownMenu = ({
           {...locationDrawerProps}
           isOpen={isOpenLocationDrawer}
           addressId={currentAddress.id}
-          onAddLocationSuccess={() => router.reload()}
         />
       )}
       {isOpenRecipientsDrawer && (

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

@@ -7,6 +7,7 @@ import { useUI } from "@faststore/ui";
 import { LocationForm } from "../";
 import { type BasicDrawerProps, BasicDrawer } from "../../../shared/components";
 import { useBuyerPortal } from "../../../shared/hooks";
+import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
 import { useAddLocationsToAddress } from "../../hooks";
 
 import type { LocationInput } from "../../types/AddressData";
@@ -32,12 +33,34 @@ export const LocationDrawer = ({
 
   const { addLocationsMutate, addLocationsLoading } = useAddLocationsToAddress({
     onSuccess: () => {
+      const hasTabParam = router.query?.tab === "location-tab";
+
       pushToast({
         message: "Locations added successfully ",
         status: "INFO",
+        icon: (
+          <button
+            data-fs-bp-toast-view-button
+            type="button"
+            onClick={() => {
+              const url = buyerPortalRoutes.addressDetails({
+                orgUnitId: currentOrgUnit?.id ?? "",
+                contractId: router.query.contractId as string,
+                addressId: addressId ?? (router.query.addressId as string),
+              });
+
+              router.push(`${url}?tab=location-tab`);
+            }}
+          >
+            View
+          </button>
+        ),
       });
-      onAddLocationSuccess?.();
+
       clearAndClose();
+      if (hasTabParam) {
+        onAddLocationSuccess?.();
+      }
     },
     onError: () => {
       pushToast({

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

@@ -1,4 +1,6 @@
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
+
+import { useRouter } from "next/router";
 
 import { Dropdown } from "@faststore/ui";
 
@@ -38,11 +40,15 @@ export type AddressDetailsLayoutProps = {
   locationsData: LocationsPageData;
 };
 
+type AddressDetailTabId = "address-tab" | "location-tab" | "recipient-tab";
+
 export const AddressDetailsLayout = ({
   addressDetails: data,
   recipientsData,
   locationsData,
 }: AddressDetailsLayoutProps) => {
+  const router = useRouter();
+
   // TODO: Implement the AddressDetailsLayout Fallback component
   if (!data) {
     return null;
@@ -56,11 +62,33 @@ export const AddressDetailsLayout = ({
 
   const { ...addressData } = data;
 
-  const [activeTabId, setActiveTabId] = useState("address-tab");
+  const [activeTabId, setActiveTabId] = useState<AddressDetailTabId>(() => {
+    const tabFromQuery = router.query.tab as AddressDetailTabId;
+    const validTabs: AddressDetailTabId[] = [
+      "address-tab",
+      "location-tab",
+      "recipient-tab",
+    ];
+
+    return validTabs.includes(tabFromQuery) ? tabFromQuery : "address-tab";
+  });
   const { open: openEditDrawer, ...createDrawerProps } = useDrawerProps();
   const addressRecipientsListRef = useRef<AddressRecipientsListRef>(null);
   const addressLocationsListRef = useRef<AddressLocationsListRef>(null);
 
+  useEffect(() => {
+    const tabFromQuery = router.query.tab as AddressDetailTabId;
+    const validTabs: AddressDetailTabId[] = [
+      "address-tab",
+      "location-tab",
+      "recipient-tab",
+    ];
+
+    if (validTabs.includes(tabFromQuery) && tabFromQuery !== activeTabId) {
+      setActiveTabId(tabFromQuery);
+    }
+  }, [router.query.tab, activeTabId]);
+
   const {
     open: openLocationsDrawer,
     isOpen: isOpenLocationsDrawer,
@@ -77,6 +105,25 @@ export const AddressDetailsLayout = ({
     keyof typeof addressLabelToPropMapping
   >;
 
+  const handleTabChange = (id: string) => {
+    const newTabId = id as AddressDetailTabId;
+
+    // Update the URL query parameter without reloading the page
+    router.push(
+      {
+        pathname: router.pathname,
+        query: {
+          ...router.query,
+          tab: newTabId,
+        },
+      },
+      undefined,
+      { shallow: true }
+    );
+
+    setActiveTabId(newTabId);
+  };
+
   const handleRefetchRecipients = () => {
     addressRecipientsListRef.current?.refetchRecipients();
   };
@@ -140,7 +187,7 @@ export const AddressDetailsLayout = ({
             </Dropdown>
           </HeaderInside>
           <div data-fs-address-details-info-wrapper>
-            <Tab defaultTabId={activeTabId} onChange={setActiveTabId}>
+            <Tab defaultTabId={activeTabId} onChange={handleTabChange}>
               <div data-fs-address-details-actions>
                 <TabBar>
                   <TabOption id="address-tab">Details</TabOption>

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

@@ -59,6 +59,13 @@ export const AddressLayout = ({
       { lazy: true }
     );
 
+  useEffect(() => {
+    if (addresses.length === 0) {
+      setIsLoading(true);
+      refetchSearchedAddresses();
+    }
+  }, []);
+
   useEffect(() => {
     if (addressesData?.data) {
       updateItemsFromRefetch(addressesData.data);
@@ -186,6 +193,15 @@ export const AddressLayout = ({
                                   ...address,
                                 }}
                                 onUpdate={handleRefetchAddresses}
+                                onOpen={() => {
+                                  const url = buyerPortalRoutes.addressDetails({
+                                    orgUnitId: orgUnit?.id ?? "",
+                                    contractId: contract?.id ?? "",
+                                    addressId: id,
+                                  });
+
+                                  router.push(url);
+                                }}
                               />
                             }
                           />
@@ -195,9 +211,9 @@ export const AddressLayout = ({
                   </Table>
 
                   {!isLoading && (
-                    <p data-fs-bp-addresses-paginator-last>
-                      {`${addresses.length} of ${total}`}
-                    </p>
+                    <p
+                      data-fs-bp-addresses-paginator-last
+                    >{`${addresses.length} of ${total}`}</p>
                   )}
 
                   <div data-fs-bp-addresses-paginator>

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.20";

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,
   };
 };