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

package/CHANGELOG.md

@@ -7,6 +7,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.3.21] - 2025-11-05
+
+### Removed
+
+- Remove cookie-based preference validation on Payment Methods remove Drawer.
+
+## [1.3.20] - 2025-11-05
+
+### Added
+
+- Improves Navigation and User Experience Improvements on Address Management
+
 ## [1.3.19] - 2025-11-05
 
 ### Added
@@ -217,7 +229,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.19...HEAD
+[unreleased]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.21...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
@@ -232,6 +244,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 # <<<<<<< HEAD
 
+[1.3.21]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.20...v1.3.21
+[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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vtex/faststore-plugin-buyer-portal",
-  "version": "1.3.19",
+  "version": "1.3.21",
   "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/payment-methods/components/RemovePaymentMethodsDrawer/RemovePaymentMethodsDrawer.tsx

@@ -1,10 +1,5 @@
-import { useState } from "react";
-
-import { CheckboxField } from "@faststore/ui";
-
 import { type BasicDrawerProps, BasicDrawer } from "../../../shared/components";
 import { useBuyerPortal } from "../../../shared/hooks";
-import { useCookiePreferenceHideDrawer } from "../../hooks/useCookiePreferenceHideDrawer";
 import { useRemovePaymentMethod } from "../../hooks/useRemovePaymentMethodSubmit";
 
 import type { PaymentMethodData } from "../../types";
@@ -24,17 +19,9 @@ export const RemovePaymentMethodsDrawer = ({
   ...props
 }: RemovePaymentMethodsDrawerProps) => {
   const { currentOrgUnit: orgUnit } = useBuyerPortal();
-  const { hideMessage, isMessageHidden } = useCookiePreferenceHideDrawer();
-
-  const [dontShowAgain, setDontShowAgain] = useState<boolean>(
-    isMessageHidden || false
-  );
 
   const handleSuccess = () => {
     close();
-    if (dontShowAgain) {
-      hideMessage();
-    }
   };
 
   const { remove, isRemovingPaymentMethod } =
@@ -44,7 +31,7 @@ export const RemovePaymentMethodsDrawer = ({
     remove(paymentMethodId);
   };
 
-  if (!paymentMethod || isMessageHidden) {
+  if (!paymentMethod) {
     return null;
   }
 
@@ -68,14 +55,6 @@ export const RemovePaymentMethodsDrawer = ({
             This action will prevent users in this unit from acessing this
             payment method during checkout.
           </p>
-          <CheckboxField
-            data-fs-checkbox-field-content
-            data-fs-bp-payment-methods-checkbox
-            label="Don't show this message again"
-            id="prevent-message"
-            checked={dontShowAgain}
-            onChange={(e) => setDontShowAgain(e.target.checked)}
-          />
         </section>
       </BasicDrawer.Body>
 

package/src/features/payment-methods/layouts/PaymentMethodsLayout/PaymentMethodsLayout.tsx

@@ -16,7 +16,6 @@ import {
   RemovePaymentMethodsDrawer,
   SearchPaymentMethods,
 } from "../../components";
-import { useCookiePreferenceHideDrawer } from "../../hooks/useCookiePreferenceHideDrawer";
 import { useDebouncedSearchPaymentMethods } from "../../hooks/useDebouncedSearchPaymentMethods";
 import { useRemovePaymentMethod } from "../../hooks/useRemovePaymentMethodSubmit";
 
@@ -39,8 +38,7 @@ export const PaymentMethodsLayout = ({
   const [querySearch, setQuerySearch] = useState(search ?? "");
 
   const { setQueryString, removeQueryString } = useQueryParams();
-  const { isMessageHidden } = useCookiePreferenceHideDrawer();
-  const { remove, isRemovingPaymentMethod } = useRemovePaymentMethod(() => {
+  const { isRemovingPaymentMethod } = useRemovePaymentMethod(() => {
     setSelectedMethod(undefined);
   });
 
@@ -98,11 +96,7 @@ export const PaymentMethodsLayout = ({
 
   const onRemoveClick = (method: PaymentMethodData) => {
     setSelectedMethod(method);
-    if (isMessageHidden) {
-      remove(method);
-    } else {
-      openRemoveDrawer();
-    }
+    openRemoveDrawer();
   };
 
   const columns = getTableColumns({ actionsLength: 1 });

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.19";
+export const CURRENT_VERSION = "1.3.21";

package/src/features/payment-methods/hooks/useCookiePreferenceHideDrawer.ts

@@ -1,34 +0,0 @@
-import { useEffect, useState } from "react";
-
-const COOKIE_NAME = "hideMessage";
-const MAX_AGE = 60 * 60 * 24 * 365; // a year
-
-type UseCookiePreferenceHideDrawerResult = {
-  isMessageHidden: boolean;
-  hideMessage: () => void;
-};
-
-export function useCookiePreferenceHideDrawer(): UseCookiePreferenceHideDrawerResult {
-  const [isMessageHidden, setIsMessageHidden] = useState(false);
-
-  useEffect(() => {
-    const cookie = document.cookie
-      .split("; ")
-      .find((row) => row.startsWith(`${COOKIE_NAME}=`));
-
-    if (cookie) {
-      const value = cookie.split("=")[1];
-      setIsMessageHidden(value === "true");
-    }
-  }, []);
-
-  const hideMessage = () => {
-    document.cookie = `${COOKIE_NAME}=true; path=/; max-age=${MAX_AGE}`;
-    setIsMessageHidden(true);
-  };
-
-  return {
-    isMessageHidden,
-    hideMessage,
-  };
-}