@vtex/faststore-plugin-buyer-portal 2.0.27 → 2.0.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vtex/faststore-plugin-buyer-portal",
-  "version": "2.0.27",
+  "version": "2.0.29",
   "description": "A plugin for faststore with buyer portal",
   "main": "index.js",
   "files": [

package/plugin.config.js

@@ -20,6 +20,10 @@ module.exports = {
       path: "/pvt/organization-account/addresses/[orgUnitId]/[contractId]",
       appLayout: false,
     },
+    recipients: {
+      path: "/pvt/organization-account/recipients/[orgUnitId]/[contractId]",
+      appLayout: false,
+    },
     budgets: {
       path: "/pvt/organization-account/budgets/[orgUnitId]/[contractId]",
       appLayout: false,

package/src/features/accounting-fields/layouts/AccountingFieldLayout/AccountingFieldLayout.tsx

@@ -25,6 +25,7 @@ import { ContractTabsLayout, GlobalLayout } from "../../../shared/layouts";
 import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { getValidPage } from "../../../shared/utils";
 import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
+import { DEFAULT_PAGE_SIZE as PAGE_SIZE } from "../../../shared/utils/constants";
 import {
   AccountingFieldEmptyAlert,
   AccountingValueDropdown,
@@ -44,7 +45,6 @@ type AccountingFieldLayoutProps = {
 const HEADER_ICON_SIZE = 24;
 const PAGE_PARAM = "page";
 const SEARCH_PARAM = "search";
-const PAGE_SIZE = 25;
 
 export const AccountingFieldLayout = ({
   accountingField,

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

@@ -1,3 +1,5 @@
+import { useRef } from "react";
+
 import { useRouter } from "next/router";
 
 import { DropdownItem, Icon as UIIcon, useUI } from "@faststore/ui";
@@ -5,16 +7,23 @@ import { DropdownItem, Icon as UIIcon, useUI } from "@faststore/ui";
 import {
   EditAddressDrawer,
   LocationDrawer,
-  AddRecipientsDrawer,
   RemoveAddressDrawer,
   DeleteAddressDrawer,
 } from "..";
+import { AddRecipientsDrawer } from "../../../recipients/components";
 import { BasicDropdownMenu, Icon } from "../../../shared/components";
-import { useDrawerProps } from "../../../shared/hooks";
+import {
+  useBuyerPortal,
+  useDrawerProps,
+  useIsAddressEditingRestricted,
+} from "../../../shared/hooks";
 import { useLocalization } from "../../../shared/localization/LocalizationContext";
+import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
+import { useAddRecipientsToAddress } from "../../hooks/useAddRecipientsToAddress";
 import { useSetDefaultAddress } from "../../hooks/useSetDefaultAddress";
 import { useUnsetDefaultAddress } from "../../hooks/useUnsetDefaultAddress";
 
+import type { RecipientInput } from "../../../recipients/types";
 import type { AddressData } from "../../types";
 
 export type AddressDropdownMenuProps = {
@@ -37,6 +46,11 @@ export const AddressDropdownMenu = ({
   const router = useRouter();
   const { pushToast } = useUI();
   const { t } = useLocalization();
+  const isAddressEditingRestricted = useIsAddressEditingRestricted();
+  const { featureFlags } = useBuyerPortal();
+  const isRecipientsContractLevelEnabled = Boolean(
+    featureFlags?.enableRecipientsContractLevel
+  );
 
   const resolvedLocationsLabel =
     locationsLabel ?? t("addresses.labels.locations");
@@ -122,6 +136,25 @@ ${t("shared.messages.changesTimeout")}`,
     onOpen?.();
   };
 
+  const addRecipientsErrorRef = useRef<Error | null>(null);
+  const { addRecipientsToAddress, isAddRecipientToAddressLoading } =
+    useAddRecipientsToAddress({
+      onError: (error) => {
+        addRecipientsErrorRef.current = error;
+      },
+    });
+
+  const handleAddRecipientsSubmit = async (recipients: RecipientInput[]) => {
+    addRecipientsErrorRef.current = null;
+    await addRecipientsToAddress({
+      unitId: orgUnitId,
+      contractId: customerId,
+      addressId: currentAddress.id,
+      recipients,
+    });
+    if (addRecipientsErrorRef.current) throw addRecipientsErrorRef.current;
+  };
+
   const {
     open: openEditDrawerProps,
     isOpen: isEditDrawerOpen,
@@ -161,24 +194,30 @@ ${t("shared.messages.changesTimeout")}`,
           <Icon name="OpenNewTab" {...sizeProps} />
           Open
         </DropdownItem>
-        <DropdownItem onClick={openEditDrawerProps}>
-          <Icon name="Edit" {...sizeProps} />
-          {t("addresses.dropdown.editDetails")}
-        </DropdownItem>
-        <DropdownItem
-          data-fs-bp-testid="dropdown-item-add-location"
-          onClick={openLocationDrawer}
-        >
-          <UIIcon name="PlusCircle" {...sizeProps} />
-          {t("addresses.actions.addLocations", [resolvedLocationsLabel])}
-        </DropdownItem>
-        <DropdownItem
-          data-fs-bp-testid="dropdown-item-add-recipient"
-          onClick={openRecipientsDrawer}
-        >
-          <UIIcon name="PlusCircle" {...sizeProps} />
-          {t("addresses.actions.addRecipients")}
-        </DropdownItem>
+        {!isAddressEditingRestricted && (
+          <>
+            <DropdownItem onClick={openEditDrawerProps}>
+              <Icon name="Edit" {...sizeProps} />
+              {t("addresses.dropdown.editDetails")}
+            </DropdownItem>
+            <DropdownItem
+              data-fs-bp-testid="dropdown-item-add-location"
+              onClick={openLocationDrawer}
+            >
+              <UIIcon name="PlusCircle" {...sizeProps} />
+              {t("addresses.actions.addLocations", [resolvedLocationsLabel])}
+            </DropdownItem>
+            {!isRecipientsContractLevelEnabled && (
+              <DropdownItem
+                data-fs-bp-testid="dropdown-item-add-recipient"
+                onClick={openRecipientsDrawer}
+              >
+                <UIIcon name="PlusCircle" {...sizeProps} />
+                {t("addresses.actions.addRecipients")}
+              </DropdownItem>
+            )}
+          </>
+        )}
         {currentAddress.isDefault ? (
           <DropdownItem onClick={handleUnsetAsDefault}>
             <Icon name="BookmarkRemove" {...sizeProps} />
@@ -199,16 +238,15 @@ ${t("shared.messages.changesTimeout")}`,
           <UIIcon name="MinusCircle" {...sizeProps} />
           {t("addresses.actions.removeFromUnit")}
         </DropdownItem>
-        {/* Remove validation while we reevaluate the rule */}
-        {/* {isRootLevelOrgUnit && ( */}
-        <DropdownItem
-          onClick={openDeleteAddressDrawer}
-          data-fs-bp-dropdown-menu-item-mode="danger"
-        >
-          <Icon name="Delete" {...sizeProps} data-fs-bp-delete-address />
-          <span data-fs-bp-delete-address>{t("shared.buttons.delete")}</span>
-        </DropdownItem>
-        {/* )} */}
+        {!isAddressEditingRestricted && (
+          <DropdownItem
+            onClick={openDeleteAddressDrawer}
+            data-fs-bp-dropdown-menu-item-mode="danger"
+          >
+            <Icon name="Delete" {...sizeProps} data-fs-bp-delete-address />
+            <span data-fs-bp-delete-address>{t("shared.buttons.delete")}</span>
+          </DropdownItem>
+        )}
       </BasicDropdownMenu>
       {isEditDrawerOpen && (
         <EditAddressDrawer
@@ -227,15 +265,24 @@ ${t("shared.messages.changesTimeout")}`,
           locationsLabel={resolvedLocationsLabel}
         />
       )}
-      {isOpenRecipientsDrawer && (
-        <AddRecipientsDrawer
-          readonly
-          {...recipientDrawerProps}
-          isOpen={isOpenRecipientsDrawer}
-          refetchRecipients={() => router.reload()}
-          addressId={currentAddress.id}
-        />
-      )}
+      {!isAddressEditingRestricted &&
+        !isRecipientsContractLevelEnabled &&
+        isOpenRecipientsDrawer && (
+          <AddRecipientsDrawer
+            readonly
+            {...recipientDrawerProps}
+            isOpen={isOpenRecipientsDrawer}
+            isSubmitting={isAddRecipientToAddressLoading}
+            onSubmit={handleAddRecipientsSubmit}
+            onSubmitted={() => router.reload()}
+            addressId={currentAddress.id}
+            viewLink={`${buyerPortalRoutes.addressDetails({
+              orgUnitId,
+              contractId: customerId,
+              addressId: currentAddress.id,
+            })}?tab=recipient-tab`}
+          />
+        )}
       {isOpenRemoveAddressDrawer && (
         <RemoveAddressDrawer
           readonly

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

@@ -15,6 +15,7 @@ import { getTableColumns } from "../../../shared/components/Table/utils/tableCol
 import {
   useBuyerPortal,
   useDrawerProps,
+  useIsAddressEditingRestricted,
   usePageItems,
 } from "../../../shared/hooks";
 import { PAGE_PARAMS, SEARCH_PARAMS } from "../../../shared/hooks/usePageItems";
@@ -78,6 +79,7 @@ export const AddressLocationsList = forwardRef<
     const [totalLocations, setTotalLocations] = useState(total);
     const { currentOrgUnit } = useBuyerPortal();
     const router = useRouter();
+    const isAddressEditingRestricted = useIsAddressEditingRestricted();
     const { listLocationData, listLocationRefresh } = useAddressLocationList({
       addressId: (router.query.addressId as string) || "",
       page,
@@ -118,8 +120,40 @@ export const AddressLocationsList = forwardRef<
       refreshLocations: handleRefreshLocations,
     }));
 
+    const locationActions = isAddressEditingRestricted
+      ? []
+      : [
+          {
+            testId: "location-action-delete",
+            iconName: "Trash",
+            ariaLabel: "remove location action",
+            onSelect: openDeleteLocation,
+          },
+          {
+            testId: "location-action-edit",
+            iconName: "Edit",
+            ariaLabel: "edit location action",
+            onSelect: openEditLocation,
+          },
+        ];
+
+    const renderActions = (item: LocationData) =>
+      locationActions.map(({ testId, iconName, ariaLabel, onSelect }) => (
+        <IconButton
+          key={testId}
+          data-fs-bp-address-tabs-actions-icon
+          data-fs-bp-testid={testId}
+          icon={<Icon name={iconName} width={20} height={20} />}
+          aria-label={ariaLabel}
+          onClick={() => {
+            selectLocation(item);
+            onSelect();
+          }}
+        />
+      ));
+
     const columns = getTableColumns({
-      actionsLength: 2,
+      actionsLength: locationActions.length,
       nameColumnLabel: t("shared.labels.name"),
     });
 
@@ -141,13 +175,15 @@ export const AddressLocationsList = forwardRef<
             iconSize={56}
             title={t("addresses.empty.noResults")}
           >
-            <Button
-              variant="primary"
-              onClick={() => onOpenAddDrawer?.()}
-              data-fs-bp-address-tabs-empty-state
-            >
-              {t("addresses.buttons.addLocations")}
-            </Button>
+            {!isAddressEditingRestricted && (
+              <Button
+                variant="primary"
+                onClick={() => onOpenAddDrawer?.()}
+                data-fs-bp-address-tabs-empty-state
+              >
+                {t("addresses.buttons.addLocations")}
+              </Button>
+            )}
           </EmptyState>
         ) : (
           <div data-fs-bp-address-tabs-table>
@@ -162,28 +198,7 @@ export const AddressLocationsList = forwardRef<
                       key={item.id}
                       title={item.value}
                       searchTerm={search}
-                      actionIcons={[
-                        <IconButton
-                          data-fs-bp-address-tabs-actions-icon
-                          data-fs-bp-testid="location-action-delete"
-                          icon={<Icon name="Trash" width={20} height={20} />}
-                          aria-label={"remove location action"}
-                          onClick={() => {
-                            selectLocation(item);
-                            openDeleteLocation();
-                          }}
-                        />,
-                        <IconButton
-                          data-fs-bp-address-tabs-actions-icon
-                          data-fs-bp-testid="location-action-edit"
-                          icon={<Icon name="Edit" width={20} height={20} />}
-                          aria-label={"edit location action"}
-                          onClick={() => {
-                            selectLocation(item);
-                            openEditLocation();
-                          }}
-                        />,
-                      ]}
+                      actionIcons={renderActions(item)}
                     />
                   ))
                 )}

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

@@ -2,7 +2,8 @@ import { useState } from "react";
 
 import { useUI, Alert } from "@faststore/ui";
 
-import { AddressForm, LocationForm, RecipientsForm } from "../";
+import { AddressForm, LocationForm } from "../";
+import { RecipientsForm } from "../../../recipients/components";
 import {
   type BasicDrawerProps,
   BasicDrawer,
@@ -40,7 +41,10 @@ export const CreateAddressDrawer = ({
   const { t } = useLocalization();
   const [isTouched, setIsTouched] = useState(false);
   const [useExistingAddress, setUseExistingAddress] = useState(false);
-  const { currentOrgUnit } = useBuyerPortal();
+  const { currentOrgUnit, featureFlags } = useBuyerPortal();
+  const isRecipientsContractLevelEnabled = Boolean(
+    featureFlags?.enableRecipientsContractLevel
+  );
   const { trackEvent, trackEntityCreated, trackEntityCreateError } =
     useAnalytics({
       entityType: "address",
@@ -186,9 +190,11 @@ export const CreateAddressDrawer = ({
         <TabBar>
           <TabOption id="address-tab">{t("addresses.tabs.details")}</TabOption>
           <TabOption id="location-tab">{resolvedLocationsLabel}</TabOption>
-          <TabOption id="recipient-tab">
-            {t("addresses.tabs.recipients")}
-          </TabOption>
+          {!isRecipientsContractLevelEnabled && (
+            <TabOption id="recipient-tab">
+              {t("addresses.tabs.recipients")}
+            </TabOption>
+          )}
         </TabBar>
 
         {invalidAddress && (
@@ -233,12 +239,14 @@ export const CreateAddressDrawer = ({
             />
           </TabContent>
 
-          <TabContent id="recipient-tab">
-            <RecipientsForm
-              recipients={recipients}
-              setRecipients={setRecipients}
-            />
-          </TabContent>
+          {!isRecipientsContractLevelEnabled && (
+            <TabContent id="recipient-tab">
+              <RecipientsForm
+                recipients={recipients}
+                setRecipients={setRecipients}
+              />
+            </TabContent>
+          )}
         </BasicDrawer.Body>
       </Tab>
 

package/src/features/addresses/components/CreateAddressDrawer/create-address-drawer.scss

@@ -6,7 +6,7 @@
   @import "../../../shared/components/ErrorMessage/error-message.scss";
   @import "../ExistingAddress/existing-address.scss";
   @import "../LocationForm/location-form.scss";
-  @import "../RecipientsForm/recipients-form.scss";
+  @import "../../../recipients/components/RecipientsForm/recipients-form.scss";
 
   @import "@faststore/ui/src/components/molecules/Alert/styles.scss";
 

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

@@ -14,7 +14,11 @@ import {
 } from "../../../shared/components";
 import { OptionSelected } from "../../../shared/components/OptionSelected/OptionSelected";
 import { SearchHighlight } from "../../../shared/components/SearchHighlight/SearchHighlight";
-import { useSetScopeConfig, SCOPE_KEYS } from "../../../shared/hooks";
+import {
+  SCOPE_KEYS,
+  useIsAddressEditingRestricted,
+  useSetScopeConfig,
+} from "../../../shared/hooks";
 import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { useEditAddressLocationSettings } from "../../hooks";
 import { useDebouncedSearchAddressByUnitId } from "../../hooks/useDebouncedSearchAddressByUnitId";
@@ -41,6 +45,7 @@ export const CreateAddressSettingsDrawer = ({
 }: CreateAddressSettingsDrawerProps) => {
   const { pushToast } = useUI();
   const { t } = useLocalization();
+  const isAddressEditingRestricted = useIsAddressEditingRestricted();
   const addressListTypeOptions = createListTypeOptions("addresses", t);
   const router = useRouter();
   const locationLabelText = initialLocationsLabel;
@@ -172,7 +177,9 @@ export const CreateAddressSettingsDrawer = ({
     });
     const formData = getFormData();
     const locationLabelChanged =
-      !!locationsLabel && locationsLabel !== initialLocationsLabel;
+      !isAddressEditingRestricted &&
+      !!locationsLabel &&
+      locationsLabel !== initialLocationsLabel;
 
     if (formData.length === 0 && !locationLabelChanged) {
       // Close drawer and trigger update when only list type changed
@@ -337,21 +344,25 @@ export const CreateAddressSettingsDrawer = ({
           />
         )}
 
-        <h4
-          data-fs-bp-default-addresses-title
-          data-fs-bp-default-addresses-locations-field
-        >
-          {t("addresses.labels.locations")}
-        </h4>
-        <h4 data-fs-bp-default-addresses-subtitle>
-          {t("addresses.forms.setLocationsFieldName", [locationLabelText])}
-        </h4>
-        <InputText
-          label={t("addresses.forms.fieldLabel")}
-          value={locationsLabel}
-          onChange={(event) => setLocationsLabel(event.target.value)}
-          name="locations-label"
-        />
+        {!isAddressEditingRestricted && (
+          <>
+            <h4
+              data-fs-bp-default-addresses-title
+              data-fs-bp-default-addresses-locations-field
+            >
+              {t("addresses.labels.locations")}
+            </h4>
+            <h4 data-fs-bp-default-addresses-subtitle>
+              {t("addresses.forms.setLocationsFieldName", [locationLabelText])}
+            </h4>
+            <InputText
+              label={t("addresses.forms.fieldLabel")}
+              value={locationsLabel}
+              onChange={(event) => setLocationsLabel(event.target.value)}
+              name="locations-label"
+            />
+          </>
+        )}
       </div>
     </SettingsDrawer>
   );

package/src/features/addresses/components/CreateAddressSettingsDrawer/create-address-settings-drawer.scss

@@ -7,7 +7,7 @@
 
   @import "../ExistingAddress/existing-address.scss";
   @import "../LocationForm/location-form.scss";
-  @import "../RecipientsForm/recipients-form.scss";
+  @import "../../../recipients/components/RecipientsForm/recipients-form.scss";
 
   @import "@faststore/ui/src/components/molecules/Alert/styles.scss";
 

package/src/features/addresses/components/RemoveAddressDrawer/remove-address-drawer.scss

@@ -5,7 +5,7 @@
   @import "../../../shared/components/ErrorMessage/error-message.scss";
   @import "../ExistingAddress/existing-address.scss";
   @import "../LocationForm/location-form.scss";
-  @import "../RecipientsForm/recipients-form.scss";
+  @import "../../../recipients/components/RecipientsForm/recipients-form.scss";
 
 
   [data-fs-bp-drawer-label] {

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

@@ -2,13 +2,11 @@ export { AddressLine, type AddressLineProps } from "./AddressLine/AddressLine";
 export { default as AddressesCard } from "./AddressesCard/AddressesCard";
 export { CreateAddressDrawer } from "./CreateAddressDrawer/CreateAddressDrawer";
 export { LocationForm } from "./LocationForm/LocationForm";
-export { RecipientsForm } from "./RecipientsForm/RecipientsForm";
 export { AddressForm } from "./AddressForm/AddressForm";
 export { ExistingAddress } from "./ExistingAddress/ExistingAddress";
 export { EditAddressDrawer } from "./EditAddressDrawer/EditAddressDrawer";
 export { AddressDropdownMenu } from "./AddressDropdownMenu/AddressDropdownMenu";
 export { LocationDrawer } from "./LocationsDrawer/LocationsDrawer";
-export { AddRecipientsDrawer } from "./AddRecipientsDrawer/AddRecipientsDrawer";
 export { RemoveAddressDrawer } from "./RemoveAddressDrawer/RemoveAddressDrawer";
 export { DeleteAddressDrawer } from "./DeleteAddressDrawer/DeleteAddressDrawer";
 export { AddressLocationsList } from "./AddressLocationsList/AddressLocationsList";