@vtex/faststore-plugin-buyer-portal 1.1.72 → 1.1.73

package/package.json

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

package/public/buyer-portal-icons.svg

@@ -490,4 +490,11 @@
       fill="currentColor"
     />
   </symbol>
+
+  <symbol id="Group" viewBox="0 0 38 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M0.583252 26.333V22.4163C0.583252 21.4441 0.833252 20.5622 1.33325 19.7705C1.83325 18.9788 2.5277 18.3886 3.41659 17.9997C5.44436 17.1108 7.27075 16.4719 8.89575 16.083C10.5208 15.6941 12.1944 15.4997 13.9166 15.4997C15.6388 15.4997 17.3055 15.6941 18.9166 16.083C20.5277 16.4719 22.3471 17.1108 24.3749 17.9997C25.2638 18.3886 25.9652 18.9788 26.4791 19.7705C26.993 20.5622 27.2499 21.4441 27.2499 22.4163V26.333H0.583252ZM29.7499 26.333V22.4163C29.7499 20.6663 29.3055 19.2288 28.4166 18.1038C27.5277 16.9788 26.361 16.0691 24.9166 15.3747C26.8333 15.5969 28.6388 15.9233 30.3333 16.3538C32.0277 16.7844 33.4027 17.2775 34.4583 17.833C35.3749 18.3608 36.0971 19.0136 36.6249 19.7913C37.1527 20.5691 37.4166 21.4441 37.4166 22.4163V26.333H29.7499ZM13.9166 12.958C12.0833 12.958 10.5833 12.3747 9.41659 11.208C8.24992 10.0413 7.66659 8.54134 7.66659 6.70801C7.66659 4.87467 8.24992 3.37467 9.41659 2.20801C10.5833 1.04134 12.0833 0.458008 13.9166 0.458008C15.7499 0.458008 17.2499 1.04134 18.4166 2.20801C19.5833 3.37467 20.1666 4.87467 20.1666 6.70801C20.1666 8.54134 19.5833 10.0413 18.4166 11.208C17.2499 12.3747 15.7499 12.958 13.9166 12.958ZM28.9166 6.70801C28.9166 8.54134 28.3333 10.0413 27.1666 11.208C25.9999 12.3747 24.4999 12.958 22.6666 12.958C22.361 12.958 22.0208 12.9372 21.6458 12.8955C21.2708 12.8538 20.9305 12.7775 20.6249 12.6663C21.2916 11.9719 21.7985 11.1177 22.1458 10.1038C22.493 9.08995 22.6666 7.95801 22.6666 6.70801C22.6666 5.45801 22.493 4.35384 22.1458 3.39551C21.7985 2.43717 21.2916 1.55523 20.6249 0.749674C20.9305 0.666341 21.2708 0.596897 21.6458 0.541341C22.0208 0.485786 22.361 0.458008 22.6666 0.458008C24.4999 0.458008 25.9999 1.04134 27.1666 2.20801C28.3333 3.37467 28.9166 4.87467 28.9166 6.70801ZM3.08325 23.833H24.7499V22.4163C24.7499 21.9719 24.618 21.5413 24.3541 21.1247C24.0902 20.708 23.7638 20.4163 23.3749 20.2497C21.3749 19.3608 19.6944 18.7636 18.3333 18.458C16.9721 18.1525 15.4999 17.9997 13.9166 17.9997C12.3333 17.9997 10.8541 18.1525 9.47909 18.458C8.10409 18.7636 6.41659 19.3608 4.41659 20.2497C4.0277 20.4163 3.70825 20.708 3.45825 21.1247C3.20825 21.5413 3.08325 21.9719 3.08325 22.4163V23.833ZM13.9166 10.458C14.9999 10.458 15.8958 10.1038 16.6041 9.39551C17.3124 8.68717 17.6666 7.79134 17.6666 6.70801C17.6666 5.62467 17.3124 4.72884 16.6041 4.02051C15.8958 3.31217 14.9999 2.95801 13.9166 2.95801C12.8333 2.95801 11.9374 3.31217 11.2291 4.02051C10.5208 4.72884 10.1666 5.62467 10.1666 6.70801C10.1666 7.79134 10.5208 8.68717 11.2291 9.39551C11.9374 10.1038 12.8333 10.458 13.9166 10.458Z"
+      fill="currentColor"
+    />
+  </symbol>
 </svg>

package/src/features/org-units/components/CreateOrgUnitDrawer/CreateOrgUnitDrawer.tsx

@@ -64,6 +64,7 @@ export const CreateOrgUnitDrawer = ({
         </button>
       ),
     });
+    setName("");
     onCreate?.();
     close();
   };

package/src/features/org-units/components/DeleteOrgUnitDrawer/DeleteOrgUnitDrawer.tsx

@@ -45,8 +45,9 @@ export const DeleteOrgUnitDrawer = ({
     if (router.asPath === `/org-unit/${id}`) {
       router.replace("/org-units/${id}");
       return;
+    } else {
+      router.reload();
     }
-    router.replace(router.asPath);
   };
 
   const { deleteOrgUnit, isDeleteOrgUnitLoading } = useDeleteOrgUnit({

package/src/features/org-units/components/OrgUnitsDropdownMenu/OrgUnitsDropdownMenu.tsx

@@ -13,7 +13,6 @@ import { CreateUserDrawer } from "../../../users/components";
 export type OrgUnitsDropdownMenuProps = {
   id: string;
   name: string;
-  onUpdate?: () => void;
   onCreate?: () => void;
   isComplete?: boolean;
 };
@@ -21,7 +20,6 @@ export type OrgUnitsDropdownMenuProps = {
 export const OrgUnitsDropdownMenu = ({
   id,
   name,
-  onUpdate,
   onCreate,
   isComplete = true,
 }: OrgUnitsDropdownMenuProps) => {
@@ -108,7 +106,6 @@ export const OrgUnitsDropdownMenu = ({
           readonly
           id={id}
           name={name}
-          onSuccess={onUpdate}
           {...updateDrawerProps}
           isOpen={isUpdateDrawerOpen}
         />

package/src/features/org-units/layouts/OrgUnitsLayout/OrgUnitsLayout.tsx

@@ -1,12 +1,20 @@
-import { HeaderInside, InternalSearch } from "../../../shared/components";
+import { useEffect } from "react";
+
+import {
+  EmptyState,
+  HeaderInside,
+  InternalSearch,
+} from "../../../shared/components";
 import {
   useBuyerPortal,
   useDrawerProps,
+  usePageItems,
   useQueryParams,
 } from "../../../shared/hooks";
 import { GlobalLayout } from "../../../shared/layouts";
 import { OrgUnitTabsLayout } from "../../../shared/layouts/OrgUnitTabsLayout/OrgUnitTabLayout";
 import { CreateOrgUnitDrawer, OrgUnitsHierarchyTree } from "../../components";
+import { useChildrenOrgUnits } from "../../hooks";
 
 import type { OrgUnitHierarchyData } from "../../types";
 
@@ -21,6 +29,29 @@ export const OrgUnitsLayout = ({ data, search }: OrgUnitsLayoutProps) => {
 
   const { open, ...drawerProps } = useDrawerProps();
 
+  const { items: childrenOrgUnits, updateItemsFromRefetch } =
+    usePageItems<OrgUnitHierarchyData>({
+      initialItems: data?.organizationalUnits ?? [],
+      search,
+    });
+
+  const { childrenOrgUnits: childrenOrgUnitsData, refetchChildrenOrgUnits } =
+    useChildrenOrgUnits(
+      currentOrgUnit?.id as string,
+      currentOrgUnit?.name as string,
+      { lazy: true }
+    );
+
+  useEffect(() => {
+    if (childrenOrgUnitsData?.nodes) {
+      updateItemsFromRefetch(childrenOrgUnitsData.nodes);
+    }
+  }, [childrenOrgUnitsData]);
+
+  const handleRefetchChildrenOrgUnits = () => {
+    refetchChildrenOrgUnits();
+  };
+
   return (
     <GlobalLayout>
       <OrgUnitTabsLayout pageName="Organization">
@@ -45,20 +76,29 @@ export const OrgUnitsLayout = ({ data, search }: OrgUnitsLayoutProps) => {
           </div>
 
           <section data-fs-hierarchy-tree-wrapper>
-            {data?.organizationalUnits?.map((orgUnit) => (
-              <OrgUnitsHierarchyTree
-                enableChildren={!search}
-                key={orgUnit.id}
-                orgUnitHierarchyData={orgUnit}
+            {childrenOrgUnits?.length === 0 ? (
+              <EmptyState
+                title="No organizational units yet"
+                iconName="Group"
               />
-            ))}
+            ) : (
+              <>
+                {childrenOrgUnits?.map((orgUnit) => (
+                  <OrgUnitsHierarchyTree
+                    enableChildren={!search}
+                    key={orgUnit.id}
+                    orgUnitHierarchyData={orgUnit}
+                  />
+                ))}
+              </>
+            )}
           </section>
 
           {data && (
             <CreateOrgUnitDrawer
               readonly
-              // biome-ignore lint/style/noNonNullAssertion: <explanation>
               initialParentOrgUnit={currentOrgUnit!}
+              onCreate={handleRefetchChildrenOrgUnits}
               {...drawerProps}
             />
           )}

package/src/features/org-units/layouts/OrgUnitsLayout/org-units-layout.scss

@@ -9,7 +9,7 @@
 
 [data-fs-org-units-section] {
   @import "@faststore/ui/src/components/molecules/Toggle/styles.scss";
-
+  @import "../../../shared/components/EmptyState/empty-state.scss";
   @import "../../components/OrgUnitsHierarchyTree/org-units-hierarchy-tree.scss";
 
   @import "../../../shared/components/HeaderInside/header-inside.scss";
@@ -17,6 +17,15 @@
   @import "../../../shared/components/InternalSearch/internal-search.scss";
 
   padding: 0 calc(var(--fs-spacing-9) - var(--fs-spacing-0));
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  [data-fs-hierarchy-tree-wrapper] {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
 
   [data-fs-buyer-portal-org-units-filter] {
     display: flex;