@vtex/faststore-plugin-buyer-portal 1.0.28 → 1.0.29

package/package.json

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

package/public/buyer-portal-icons.svg

@@ -211,17 +211,11 @@
       d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z" />
   </symbol>
 
-
-  <symbol
-    id="Profile"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 14 14"
-    fill="none"
-  >
+  <symbol id="Profile" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"
+    fill="none">
     <path
-      d="M7.00065 7.00114C6.08398 7.00114 5.29926 6.67475 4.64648 6.02197C3.99371 5.3692 3.66732 4.58447 3.66732 3.66781C3.66732 2.75114 3.99371 1.96642 4.64648 1.31364C5.29926 0.660862 6.08398 0.334473 7.00065 0.334473C7.91732 0.334473 8.70204 0.660862 9.35482 1.31364C10.0076 1.96642 10.334 2.75114 10.334 3.66781C10.334 4.58447 10.0076 5.3692 9.35482 6.02197C8.70204 6.67475 7.91732 7.00114 7.00065 7.00114ZM0.333984 13.6678V11.3345C0.333984 10.8623 0.455512 10.4282 0.698568 10.0324C0.941623 9.63656 1.26454 9.33447 1.66732 9.12614C2.52843 8.69559 3.40343 8.37267 4.29232 8.15739C5.18121 7.94211 6.08398 7.83447 7.00065 7.83447C7.91732 7.83447 8.8201 7.94211 9.70899 8.15739C10.5979 8.37267 11.4729 8.69559 12.334 9.12614C12.7368 9.33447 13.0597 9.63656 13.3027 10.0324C13.5458 10.4282 13.6673 10.8623 13.6673 11.3345V13.6678H0.333984Z"
-      fill="currentColor"
-    />
+      d="M6 6C5.16667 6 4.45833 5.70833 3.875 5.125C3.29167 4.54167 3 3.83333 3 3C3 2.16667 3.29167 1.45833 3.875 0.875C4.45833 0.291667 5.16667 0 6 0C6.83333 0 7.54167 0.291667 8.125 0.875C8.70833 1.45833 9 2.16667 9 3C9 3.83333 8.70833 4.54167 8.125 5.125C7.54167 5.70833 6.83333 6 6 6ZM0 12V10C0 9.68056 0.0868056 9.37847 0.260417 9.09375C0.434028 8.80903 0.673611 8.56944 0.979167 8.375C1.74306 7.93056 2.55063 7.59028 3.40188 7.35417C4.25313 7.11806 5.11771 7 5.99563 7C6.87354 7 7.73958 7.11806 8.59375 7.35417C9.44792 7.59028 10.2569 7.93056 11.0208 8.375C11.3264 8.55556 11.566 8.79167 11.7396 9.08333C11.9132 9.375 12 9.68056 12 10V12H0ZM1.5 10.5H10.5V10C10.5 9.92806 10.479 9.86271 10.4369 9.80396C10.3949 9.74507 10.3396 9.69931 10.2708 9.66667C9.63194 9.27778 8.95139 8.98611 8.22917 8.79167C7.50694 8.59722 6.76389 8.5 6 8.5C5.23611 8.5 4.49306 8.59722 3.77083 8.79167C3.04861 8.98611 2.36806 9.27778 1.72917 9.66667C1.65972 9.72222 1.60417 9.77583 1.5625 9.8275C1.52083 9.87931 1.5 9.93681 1.5 10V10.5ZM6.00437 4.5C6.41813 4.5 6.77083 4.35271 7.0625 4.05812C7.35417 3.76354 7.5 3.40937 7.5 2.99562C7.5 2.58187 7.35271 2.22917 7.05812 1.9375C6.76354 1.64583 6.40938 1.5 5.99563 1.5C5.58188 1.5 5.22917 1.64729 4.9375 1.94188C4.64583 2.23646 4.5 2.59063 4.5 3.00438C4.5 3.41813 4.64729 3.77083 4.94187 4.0625C5.23646 4.35417 5.59062 4.5 6.00437 4.5Z"
+      fill="currentColor" />
   </symbol>
 
   <symbol

package/src/clients/BuyerPortalClient.ts

@@ -89,15 +89,22 @@ class BuyerPortalClient extends Client {
   }
 
   createOrgUnit(
-    {
-      parentId,
-      ...data
-    }: { name: string; parentId: string | null; customerId: string[] },
+    data: { name: string; parentId?: string | null; customerId: string[] },
     cookie: string
   ) {
-    return this.post(
+    const { parentId, ...input } = data;
+    return this.post<
+      {
+        customerIds: string[];
+        id: string;
+        isActive: boolean;
+        name: string;
+        parentId: string;
+      },
+      typeof data
+    >(
       "units",
-      { ...data, ...(parentId && { parentId }) },
+      { ...input, ...(parentId && { parentId }) },
       {
         headers: {
           Cookie: cookie,
@@ -106,11 +113,9 @@ class BuyerPortalClient extends Client {
     );
   }
 
-  updateOrgUnit(
-    { id, ...data }: { name?: string; id: string },
-    cookie: string
-  ) {
-    return this.patch(`units/${id}`, data, {
+  updateOrgUnit(data: { name?: string; id: string }, cookie: string) {
+    const { id, ...input } = data;
+    return this.patch<null, typeof input>(`units/${id}`, input, {
       headers: {
         Cookie: cookie,
       },

package/src/clients/Client.ts

@@ -1,9 +1,9 @@
 import { toQueryParams } from "../features/shared/utils";
 
-interface RequestConfig<T> {
+interface RequestConfig<Input = never> {
   url: string;
   method: "GET" | "POST" | "PUT" | "DELETE" | "PATCH";
-  data?: T;
+  data?: Input;
   headers?: Record<string, string>;
   params?: Record<string, string | number | boolean>;
 }
@@ -15,13 +15,13 @@ class Client {
     this.baseURL = baseURL;
   }
 
-  async request<T>({
+  async request<Return, Input = never>({
     url,
     method,
     data,
     headers = {},
     params = {},
-  }: RequestConfig<T>): Promise<T> {
+  }: RequestConfig<Input>): Promise<Return> {
     const config: RequestInit = {
       method,
       headers: {
@@ -38,7 +38,7 @@ class Client {
 
     try {
       const response = await fetch(this.baseURL + url + paramsString, config);
-      let responseData: T | null = null;
+      let responseData: Return | null = null;
 
       const contentType = response.headers.get("Content-Type");
       if (contentType?.includes("application/json")) {
@@ -52,42 +52,58 @@ class Client {
         );
       }
 
-      return responseData as T;
+      return responseData as Return;
     } catch (error) {
       return Promise.reject(error);
     }
   }
 
-  get<T>(url: string, config: Partial<RequestConfig<T>> = {}): Promise<T> {
-    return this.request<T>({ url, method: "GET", ...config });
+  get<Return>(
+    url: string,
+    config: Partial<RequestConfig> = {}
+  ): Promise<Return> {
+    return this.request<Return>({ url, method: "GET", ...config });
   }
 
-  post<T>(
+  post<Return, Input>(
     url: string,
-    data: T,
-    config: Partial<RequestConfig<T>> = {}
-  ): Promise<T> {
-    return this.request<T>({ url, method: "POST", data, ...config });
+    data: Input,
+    config: Partial<RequestConfig<Input>> = {}
+  ): Promise<Return> {
+    return this.request<Return, Input>({
+      url,
+      method: "POST",
+      data,
+      ...config,
+    });
   }
 
-  put<T>(
+  put<Return, Input>(
     url: string,
-    data: T,
-    config: Partial<RequestConfig<T>> = {}
-  ): Promise<T> {
-    return this.request<T>({ url, method: "PUT", data, ...config });
+    data: Input,
+    config: Partial<RequestConfig<Input>> = {}
+  ): Promise<Return> {
+    return this.request<Return, Input>({ url, method: "PUT", data, ...config });
   }
 
-  patch<T>(
+  patch<Return, Input>(
     url: string,
-    data: T,
-    config: Partial<RequestConfig<T>> = {}
-  ): Promise<T> {
-    return this.request<T>({ url, method: "PATCH", data, ...config });
+    data: Input,
+    config: Partial<RequestConfig<Input>> = {}
+  ): Promise<Return> {
+    return this.request<Return, Input>({
+      url,
+      method: "PATCH",
+      data,
+      ...config,
+    });
   }
 
-  delete<T>(url: string, config: Partial<RequestConfig<T>> = {}): Promise<T> {
-    return this.request<T>({ url, method: "DELETE", ...config });
+  delete<Return>(
+    url: string,
+    config: Partial<RequestConfig<never>> = {}
+  ): Promise<Return> {
+    return this.request<Return>({ url, method: "DELETE", ...config });
   }
 }
 

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

@@ -11,6 +11,7 @@ import {
   Icon,
 } from "../../../shared/components";
 import { useCreateNewOrgUnit } from "../../hooks";
+import type { createNewOrgUnitService } from "../../services";
 
 export type CreateOrgUnitDrawerProps = Omit<BasicDrawerProps, "children"> & {
   options?: { id: string; name: string }[];
@@ -35,10 +36,21 @@ export const CreateOrgUnitDrawer = ({
 
   const [isTouched, setIsTouched] = useState(false);
 
-  const handleCreateNewOrgUnitSuccess = () => {
+  const handleCreateNewOrgUnitSuccess = (
+    data: AwaitedType<typeof createNewOrgUnitService>
+  ) => {
     pushToast({
       message: "Organizational unit added successfully",
       status: "INFO",
+      icon: (
+        <button
+          data-fs-bp-toast-view-button
+          type="button"
+          onClick={() => router.push(`/org-unit/${data.id}`)}
+        >
+          View
+        </button>
+      ),
     });
     close();
     router.replace(router.asPath);

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

@@ -8,10 +8,13 @@ import { useChildrenOrgUnits } from "../../hooks";
 import { useUsersByOrgUnit } from "../../../users/hooks";
 import {
   BasicDrawer,
+  ErrorMessage,
   Icon,
+  InputText,
   Tab,
   type BasicDrawerProps,
 } from "../../../shared/components";
+import { useState } from "react";
 
 export type DeleteOrgUnitDrawerProps = Omit<BasicDrawerProps, "children"> & {
   id: string;
@@ -26,14 +29,12 @@ export const DeleteOrgUnitDrawer = ({
 }: DeleteOrgUnitDrawerProps) => {
   const router = useRouter();
   const { childrenOrgUnits } = useChildrenOrgUnits(id);
-  const { users } = useUsersByOrgUnit(id);
   const { pushToast } = useUI();
 
-  const hasChildren = Boolean(childrenOrgUnits?.nodes?.length);
-
-  const hasUsers = Boolean(users?.length);
+  const [confirmName, setConfirmName] = useState("");
+  const [isTouched, setIsTouched] = useState(false);
 
-  const hasContent = hasChildren || hasUsers;
+  const hasChildren = Boolean(childrenOrgUnits?.nodes?.length);
 
   const handleDeleteOrgUnitSuccess = () => {
     pushToast({
@@ -41,6 +42,11 @@ export const DeleteOrgUnitDrawer = ({
       status: "INFO",
     });
     close();
+
+    if (router.asPath === `/org-unit/${id}`) {
+      router.replace("/org-units/${id}");
+      return;
+    }
     router.replace(router.asPath);
   };
 
@@ -49,87 +55,80 @@ export const DeleteOrgUnitDrawer = ({
   });
 
   const handleDelete = () => {
-    deleteOrgUnit({ id });
+    if (hasChildren) {
+      close();
+    }
+
+    setIsTouched(true);
+    if (confirmName === name) {
+      deleteOrgUnit({ id });
+    }
   };
 
   return (
     <BasicDrawer
       data-fs-bp-delete-org-unit-drawer
-      data-fs-bp-delete-org-unit-drawer-has-content={hasContent}
+      data-fs-bp-delete-org-unit-drawer-has-content={hasChildren}
       close={close}
       {...props}
     >
       <BasicDrawer.Heading title="Delete organizational unit" onClose={close} />
       <BasicDrawer.Body>
-        <p data-fs-bp-delete-org-unit-drawer-message>
-          Are you sure you want to permanently remove the
-          <span
-            data-fs-bp-delete-org-unit-drawer-message-name
-          >{` ${name} `}</span>
-          organizational unit?
-        </p>
-
-        {!hasContent && (
+        {!hasChildren && (
           <>
-            <br />
-            <br />
+            <p data-fs-bp-delete-org-unit-drawer-message>
+              Are you sure you want to permanently delete the
+              <span
+                data-fs-bp-delete-org-unit-drawer-message-name
+              >{` ${name}`}</span>
+              ?
+            </p>
             <p data-fs-bp-delete-org-unit-drawer-message>
               This action will delete all data from this unit.
+              <br />
+              To confirm this action, please enter the organizational unit name
+              bellow:
             </p>
+
+            <InputText
+              label="Name"
+              value={confirmName}
+              onChange={(e) => setConfirmName(e.target.value)}
+              hasError={isTouched && confirmName !== name}
+            />
+
+            <ErrorMessage
+              show={isTouched && confirmName !== name}
+              message="The entered name does not match the organizational unit's name. Please, check and try again."
+            />
           </>
         )}
 
-        {hasContent && (
+        {hasChildren && (
           <>
             <p data-fs-bp-delete-org-unit-drawer-message>
-              This action will delete all data from this unit, including the
-              child organizational units and users below.
+              Before deleting
+              <span data-fs-bp-delete-org-unit-drawer-message-name>
+                {` ${name} `}
+              </span>
+              , you must first remove all child organizational units.
+              <br />
+              Please delete them individually, starting from the lowest level.
+              <br />
+              <br />
+              Once all child units bellow are removed, you’ll be able to delete{" "}
+              {name}.
             </p>
 
-            <Tab defaultTabId={hasChildren ? "child" : "users"}>
-              <Tab.Bar>
-                {hasChildren && (
-                  <Tab.Option id="child">
-                    Child Organizational Units ({users?.length ?? 0})
-                  </Tab.Option>
-                )}
-                {hasUsers && (
-                  <Tab.Option id="users">
-                    Users ({users?.length ?? 0})
-                  </Tab.Option>
-                )}
-              </Tab.Bar>
-              <Tab.Content id="child">
-                {childrenOrgUnits && (
-                  <OrgUnitsHierarchyTree
-                    readonly
-                    orgUnitHierarchyData={childrenOrgUnits}
-                  />
-                )}
-              </Tab.Content>
-              <Tab.Content id="users">
-                {users?.map((user) => (
-                  <div
-                    data-fs-bp-delete-org-unit-drawer-user-line
-                    key={user.userId}
-                  >
-                    <span data-fs-bp-delete-org-unit-drawer-user-icon>
-                      <Icon name="Profile" width={16} height={16} />
-                    </span>
-
-                    <span data-fs-bp-delete-org-unit-drawer-user-name>
-                      {user.name}
-                    </span>
-                    <span data-fs-bp-delete-org-unit-drawer-user-org>
-                      {user.orgUnit.name}
-                    </span>
-                    <span data-fs-bp-delete-org-unit-drawer-user-type>
-                      {user.userType}
-                    </span>
-                  </div>
-                ))}
-              </Tab.Content>
-            </Tab>
+            <span data-fs-bp-delete-org-unit-drawer-subtitle>
+              Organizational Units
+            </span>
+            {childrenOrgUnits && (
+              <OrgUnitsHierarchyTree
+                readonly
+                orgUnitHierarchyData={childrenOrgUnits}
+              />
+            )}
           </>
         )}
       </BasicDrawer.Body>
@@ -139,10 +138,10 @@ export const DeleteOrgUnitDrawer = ({
         </BasicDrawer.Button>
         <BasicDrawer.Button
           onClick={handleDelete}
-          variant="danger"
+          variant={hasChildren ? "confirm" : "danger"}
           isLoading={isDeleteOrgUnitLoading}
         >
-          Delete
+          {hasChildren ? "Ok" : "Delete"}
         </BasicDrawer.Button>
       </BasicDrawer.Footer>
     </BasicDrawer>

package/src/features/org-units/components/DeleteOrgUnitDrawer/delete-org-unit-drawer.scss

@@ -2,6 +2,8 @@
 
 [data-fs-bp-basic-drawer][data-fs-bp-delete-org-unit-drawer] {
   @import "../../../shared/components/Tab/tab.scss";
+  @import "../../../shared/components/InputText/input-text.scss";
+  @import "../../../shared/components/ErrorMessage/error-message.scss";
   @import "../OrgUnitsHierarchyTree/org-units-hierarchy-tree.scss";
 
   &[data-fs-bp-delete-org-unit-drawer-has-content="true"] {
@@ -13,16 +15,30 @@
   }
 
   [data-fs-bp-delete-org-unit-drawer-message] {
-    font-weight: 400;
+    font-weight: var(--fs-text-weight-regular);
     font-size: var(--fs-text-size-1);
     line-height: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
     color: #1f1f1f;
+    margin-bottom: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
 
     [data-fs-bp-delete-org-unit-drawer-message-name] {
       color: #0068d7;
     }
   }
 
+  [data-fs-bp-delete-org-unit-drawer-subtitle] {
+    font-weight: var(--fs-text-weight-medium);
+    font-size: var(--fs-text-size-1);
+    line-height: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
+    padding: var(--fs-spacing-2) 0;
+    color: #707070;
+    display: block;
+  }
+
+  [data-fs-bp-input-text] {
+    margin-top: var(--fs-spacing-5);
+  }
+
   [data-fs-bp-tab-bar] {
     margin-top: var(--fs-spacing-4);
     margin-bottom: var(--fs-spacing-3);

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

@@ -12,17 +12,16 @@ import { BasicDropdownMenu, Icon } from "../../../shared/components";
 export type OrgUnitsDropdownMenuProps = {
   id: string;
   name: string;
-  parentOrgUnit: { id: string | null; name: string };
   onUpdate?: () => void;
+  isComplete?: boolean;
 };
 
 export const OrgUnitsDropdownMenu = ({
   id,
   name,
-  parentOrgUnit,
   onUpdate,
+  isComplete = true,
 }: OrgUnitsDropdownMenuProps) => {
-  const { push } = useRouter();
   const { open: openCreateDrawerProps, ...createDrawerProps } =
     useDrawerProps();
 
@@ -37,31 +36,33 @@ export const OrgUnitsDropdownMenu = ({
   return (
     <>
       <BasicDropdownMenu>
-        <DropdownItem onClick={() => push(`/org-unit/${id}`)}>
-          <Icon name="ArrowSquareOut" {...sizeProps} />
-          Open
-        </DropdownItem>
         <DropdownItem onClick={openUpdateDrawerProps}>
           <Icon name="Edit" {...sizeProps} />
           Edit
         </DropdownItem>
-        <DropdownItem>
-          <Icon name="Profile" {...sizeProps} />
-          Add User
-        </DropdownItem>
-        <DropdownItem onClick={openCreateDrawerProps}>
-          <Icon name="Folder" {...sizeProps} />
-          Add Organizational Unit
-        </DropdownItem>
+        <BasicDropdownMenu.Separator />
+        {isComplete && (
+          <>
+            <DropdownItem>
+              <Icon name="Profile" {...sizeProps} />
+              Add User
+            </DropdownItem>
+            <DropdownItem onClick={openCreateDrawerProps}>
+              <Icon name="Folder" {...sizeProps} />
+              Add Organizational Unit
+            </DropdownItem>
+            <BasicDropdownMenu.Separator />
+            <DropdownItem>
+              <Icon name="LocalPostOffice" {...sizeProps} />
+              Add Address
+            </DropdownItem>
+            <BasicDropdownMenu.Separator />
+          </>
+        )}
         <DropdownItem onClick={openDeleteDrawerProps}>
           <Icon name="Delete" {...sizeProps} />
           Delete
         </DropdownItem>
-        <DropdownItem dismissOnClick={false}>
-          <Icon name="Active" {...sizeProps} />
-          Active
-          <Toggle id={id} />
-        </DropdownItem>
       </BasicDropdownMenu>
       <CreateOrgUnitDrawer
         readonly
@@ -71,7 +72,6 @@ export const OrgUnitsDropdownMenu = ({
       <DeleteOrgUnitDrawer id={id} name={name} {...deleteDrawerProps} />
       <UpdateOrgUnitDrawer
         readonly
-        parentOrgUnit={parentOrgUnit}
         id={id}
         name={name}
         onSuccess={onUpdate}

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

@@ -14,8 +14,7 @@ export const OrgUnitsHierarchyTree = ({
   orgUnitHierarchyData,
   readonly,
 }: OrgUnitsHierarchyTreeProps) => {
-  const { structure, setNode, getParentNode } =
-    useOrgUnitStructure(orgUnitHierarchyData);
+  const { structure, setNode } = useOrgUnitStructure(orgUnitHierarchyData);
 
   return (
     <HierarchyTree
@@ -31,8 +30,6 @@ export const OrgUnitsHierarchyTree = ({
           },
         });
 
-        const parentOrgUnit = getParentNode(id) ?? { name: "Root", id: null };
-
         return (
           <>
             <span data-fs-org-unit-item>
@@ -77,11 +74,7 @@ export const OrgUnitsHierarchyTree = ({
                         <Icon name="MoreVert" width={24} height={24} />
                       </button>
                     </DropdownButton>
-                    <OrgUnitsDropdownMenu
-                      parentOrgUnit={parentOrgUnit}
-                      id={id}
-                      name={name}
-                    />
+                    <OrgUnitsDropdownMenu id={id} name={name} />
                   </Dropdown>
                 </div>
               )}

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

@@ -60,7 +60,6 @@ export default function OrganizationalUnitsCard({
                         <Icon name="MoreVert" data-fs-menu-action-button />
                       </DropdownButton>
                       <OrgUnitsDropdownMenu
-                        parentOrgUnit={orgUnitData}
                         id={orgUnit.id}
                         name={orgUnit.name}
                       />

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

@@ -18,7 +18,6 @@ export type UpdateOrgUnitDrawerProps = Omit<BasicDrawerProps, "children"> & {
   id: string;
   name: string;
   readonly?: boolean;
-  parentOrgUnit: { id: string | null; name: string };
   onSuccess?: () => void;
 };
 
@@ -28,7 +27,6 @@ export const UpdateOrgUnitDrawer = ({
   id,
   name: initialName,
   readonly,
-  parentOrgUnit,
   onSuccess,
   ...props
 }: UpdateOrgUnitDrawerProps) => {
@@ -40,8 +38,17 @@ export const UpdateOrgUnitDrawer = ({
 
   const handleSuccess = () => {
     pushToast({
-      message: "Child organizational unit edited successfully",
+      message: "Organizational unit successfully edited",
       status: "INFO",
+      icon: (
+        <button
+          data-fs-bp-toast-view-button
+          type="button"
+          onClick={() => router.push(`/org-unit/${id}`)}
+        >
+          View
+        </button>
+      ),
     });
     close();
     onSuccess?.() ?? router.reload();
@@ -54,7 +61,7 @@ export const UpdateOrgUnitDrawer = ({
   const handleConfirmClick = () => {
     setIsTouched(true);
 
-    if (!name?.trim() || !parentOrgUnit.name?.trim()) {
+    if (!name?.trim()) {
       return;
     }
 
@@ -64,39 +71,12 @@ export const UpdateOrgUnitDrawer = ({
     });
   };
 
-  const isConfirmButtonEnabled =
-    !isUpdateOrgUnitLoading && name && parentOrgUnit.name;
+  const isConfirmButtonEnabled = !isUpdateOrgUnitLoading && name;
 
   return (
     <BasicDrawer data-fs-bp-update-org-unit-drawer close={close} {...props}>
       <BasicDrawer.Heading title="Edit organization unit" onClose={close} />
       <BasicDrawer.Body>
-        <AutocompleteDropdown
-          label="Parent"
-          value={parentOrgUnit.name}
-          options={options}
-          disabled={readonly}
-          hasError={isTouched && !parentOrgUnit.name?.trim()}
-          renderOption={(option, index) => (
-            <AutocompleteDropdown.Item
-              key={option.id}
-              closeOnClick
-              index={index}
-              isSelected={parentOrgUnit?.id === option?.id}
-            >
-              {option?.name}
-              {parentOrgUnit?.id === option?.id && (
-                <Icon name="Check" width={12} height={12} />
-              )}
-            </AutocompleteDropdown.Item>
-          )}
-        />
-
-        <ErrorMessage
-          show={isTouched && !parentOrgUnit.name?.trim()}
-          message="Parent is required"
-        />
-
         <InputText
           label="Name"
           value={name}

package/src/features/org-units/hooks/useCreateNewOrgUnit.ts

@@ -8,7 +8,7 @@ export const useCreateNewOrgUnit = (
   options?: MutationOptions<AwaitedType<typeof createNewOrgUnitService>>
 ) => {
   const { mutate, isLoading, error } = useMutation<
-    { parentId?: string; name: string; customerId: string[] },
+    AwaitedType<typeof createNewOrgUnitService>,
     Omit<CreateNewOrgUnitServiceProps, "cookie" | "customerId">
   >(
     (variables, clientContext) =>

package/src/features/org-units/hooks/useUpdateOrgUnit.ts

@@ -8,7 +8,7 @@ export const useUpdateOrgUnit = (
   options?: MutationOptions<AwaitedType<typeof updateOrgUnitService>>
 ) => {
   const { mutate, isLoading, error } = useMutation<
-    { name?: string | undefined },
+    null,
     Omit<UpdateOrgUnitServiceProps, "cookie">
   >(
     (variables, clientContext) =>

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

@@ -1,11 +1,16 @@
+import { Dropdown, DropdownButton } from "@faststore/ui";
 import { AddressesCard } from "../../../addresses/components";
 import { ContractsCard } from "../../../contracts/components";
 import { ProfileCard } from "../../../profile/components";
 import { GlobalLayout } from "../../../shared/layouts";
 import { UsersCard } from "../../../users/components";
 import type { UserData } from "../../../users/types";
-import { OrganizationalUnitsCard } from "../../components";
+import {
+  OrganizationalUnitsCard,
+  OrgUnitsDropdownMenu,
+} from "../../components";
 import type { OrgUnitData, OrgUnitSummaryData } from "../../types";
+import { Icon } from "../../../shared/components";
 
 export type OrgUnitsDetailsLayoutProps = {
   data: OrgUnitSummaryData;
@@ -19,7 +24,19 @@ export const OrgUnitsDetailsLayout = ({ data }: OrgUnitsDetailsLayoutProps) => {
   return (
     <GlobalLayout>
       <section data-fs-home-section>
-        <h1 data-fs-home-title>{data.name}</h1>
+        <div data-fs-home-title-wrapper>
+          <h1 data-fs-home-title>{data.name}</h1>
+          <Dropdown>
+            <DropdownButton data-fs-card-row-dropdown-button>
+              <Icon name="MoreVert" data-fs-menu-action-button />
+            </DropdownButton>
+            <OrgUnitsDropdownMenu
+              isComplete={false}
+              id={data.id}
+              name={data.name}
+            />
+          </Dropdown>
+        </div>
         <div data-fs-home-grid>
           {hasContracts ? (
             <ProfileCard orgUnitData={data} {...data.contracts[0]} />

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

@@ -1,9 +1,10 @@
 import {
   Icon,
+  InternalSearch,
   InternalTopBar,
   MainLinksDropdownMenu,
 } from "../../../shared/components";
-import { useDrawerProps } from "../../../shared/hooks";
+import { useDrawerProps, useQueryParams } from "../../../shared/hooks";
 import { GlobalLayout } from "../../../shared/layouts";
 import { CreateOrgUnitDrawer, OrgUnitsHierarchyTree } from "../../components";
 import type { OrgUnitHierarchyData } from "../../types";
@@ -13,6 +14,8 @@ export type OrgUnitsLayoutProps = {
 };
 
 export const OrgUnitsLayout = ({ data }: OrgUnitsLayoutProps) => {
+  const { setQueryString, removeQueryString } = useQueryParams();
+
   const { open, ...drawerProps } = useDrawerProps();
 
   return (
@@ -29,6 +32,19 @@ export const OrgUnitsLayout = ({ data }: OrgUnitsLayoutProps) => {
             Add New
           </button>
         </InternalTopBar>
+
+        <div data-fs-buyer-portal-org-units-filter>
+          <InternalSearch
+            textSearch={(searchTerm) => {
+              searchTerm
+                ? setQueryString("search", searchTerm)
+                : removeQueryString("search");
+            }}
+          />
+
+          <hr data-fs-org-units-divider />
+        </div>
+
         <section data-fs-hierarchy-tree-wrapper>
           {data?.organizationalUnits?.map((orgUnit) => (
             <OrgUnitsHierarchyTree

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

@@ -11,11 +11,17 @@
 
   @import "../../../shared/components/HierarchyTree/hierarchy-tree.scss";
   @import "../../../shared/components/InternalTopbar/internal-top-bar.scss";
+  @import "../../../shared/components/InternalSearch/internal-search.scss";
 
   [data-fs-buyer-portal-org-units-filter] {
     display: flex;
     justify-content: space-between;
-    padding: var(--fs-spacing-4);
+    padding: var(--fs-spacing-6) calc(var(--fs-spacing-8) + var(--fs-spacing-0))
+      var(--fs-spacing-4);
+  }
+
+  [data-fs-org-units-divider] {
+    border: calc(var(--fs-border-width) / 2) solid #e0e0e0;
   }
 
   [data-fs-buyer-portal-org-units-filter-search-container] {

package/src/features/org-units/types/OrgUnitsData.ts

@@ -1,4 +1,4 @@
-import type { Structure } from "../../shared/components/HierarchyTree/HierarchyTree";
+import type { Structure } from "../../shared/components";
 
 export type OrgUnitData = {
   name: string;

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

@@ -11,3 +11,7 @@ export const BasicDropdownMenu = ({ children }: BasicDropdownMenuProps) => {
     </DropdownMenu>
   );
 };
+
+const Separator = () => <div data-fs-bp-basic-dropdown-menu-separator />;
+
+BasicDropdownMenu.Separator = Separator;

package/src/features/shared/components/BasicDropdownMenu/basic-dropdown-menu.scss

@@ -1,19 +1,34 @@
-[data-fs-bp-basic-dropdown-menu] {
-  width: auto;
-  [data-fs-dropdown-item] {
-    display: flex;
-    padding: var(--fs-spacing-1) calc(var(--fs-spacing-3) + var(--fs-spacing-0));
+[data-fs-dropdown-menu] {
+  &[data-fs-bp-basic-dropdown-menu] {
+    width: auto;
+    background-color: #fff;
+    padding: var(--fs-spacing-1) 0;
 
-    font-weight: 500;
-    font-size: var(--fs-text-size-1);
-    line-height: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
+    [data-fs-dropdown-item] {
+      display: flex;
+      padding: var(--fs-spacing-1)
+        calc(var(--fs-spacing-4) + var(--fs-spacing-0));
 
-    svg {
-      margin-right: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
+      font-weight: 500;
+      font-size: var(--fs-text-size-1);
+      line-height: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
+      color: #5c5c5c;
+
+      svg {
+        margin-right: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
+        color: #5c5c5c;
+      }
+
+      [data-fs-toggle] {
+        margin-left: auto;
+      }
     }
 
-    [data-fs-toggle] {
-      margin-left: auto;
+    [data-fs-bp-basic-dropdown-menu-separator] {
+      border-top: var(--fs-border-width) solid #e0e0e0;
+      height: 0;
+      width: 100%;
+      margin: var(--fs-spacing-1) 0;
     }
   }
 }

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

@@ -1,6 +1,6 @@
 import {
-  ComponentProps,
-  FocusEvent,
+  type ComponentProps,
+  type FocusEvent,
   forwardRef,
   useEffect,
   useId,

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

@@ -35,13 +35,11 @@ function Toast() {
       data-fs-bp-toast-visible={visible}
       onTransitionEnd={() => !visible && popToast()}
     >
-      {toast.icon && (
-        <div data-fs-bp-toast-icon-container>{!!toast.icon && toast.icon}</div>
-      )}
       <div data-fs-bp-toast-content>
         {toast.title && <p data-fs-bp-toast-title>{toast.title}</p>}
         <p data-fs-bp-toast-message>{toast.message}</p>
       </div>
+      {!!toast.icon && toast.icon}
       <button type="button" data-fs-bp-toast-dismiss onClick={popToast}>
         <Icon name="Close" width={10} height={10} />
       </button>

package/src/features/shared/components/Toast/toast.scss

@@ -95,6 +95,14 @@
     overflow: hidden;
   }
 
+  [data-fs-bp-toast-view-button] {
+    color: #ffffff;
+    font-weight: var(--fs-text-weight-semibold);
+    font-size: var(--fs-text-size-1);
+    line-height: calc(var(--fs-spacing-4) - var(--fs-spacing-0));
+    cursor: pointer;
+  }
+
   [data-fs-bp-toast-title] {
     margin-left: var(--fs-toast-title-margin-left);
     overflow: hidden;

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

@@ -14,6 +14,8 @@ export {
 export {
   BuyerPortalProvider,
   type BuyerPortalProviderProps,
+  BuyerPortalContext,
+  type BuyerPortalContextType,
 } from "./BuyerPortalProvider/BuyerPortalProvider";
 export { Card, CardBody, CardFooter, CardHeader } from "./Card";
 export {

package/src/features/shared/hooks/useBuyerPortal.ts

@@ -1,8 +1,5 @@
 import { useContext } from "react";
-import {
-  type BuyerPortalContextType,
-  BuyerPortalContext,
-} from "../components/BuyerPortalProvider/BuyerPortalProvider";
+import { type BuyerPortalContextType, BuyerPortalContext } from "../components";
 
 export const useBuyerPortal = (): BuyerPortalContextType["clientContext"] => {
   const context = useContext(BuyerPortalContext);

package/src/features/shared/layouts/GlobalLayout/GlobalLayout.tsx

@@ -1,6 +1,5 @@
 import { useUI } from "@faststore/ui";
-import { Navbar } from "../../components/Navbar/Navbar";
-import Toast from "../../components/Toast/Toast";
+import { Navbar, Toast } from "../../components";
 
 export type GlobalLayoutProps = { children: React.ReactNode };
 

package/src/features/shared/layouts/HomeLayout/HomeLayout.tsx

@@ -1,10 +1,15 @@
+import { Dropdown, DropdownButton } from "@faststore/ui";
 import { AddressesCard } from "../../../addresses/components";
 import { ContractsCard } from "../../../contracts/components";
-import { OrganizationalUnitsCard } from "../../../org-units/components";
+import {
+  OrganizationalUnitsCard,
+  OrgUnitsDropdownMenu,
+} from "../../../org-units/components";
 import type { OrganizationData } from "../../../org-units/types";
 import { ProfileCard } from "../../../profile/components";
 import { UsersCard } from "../../../users/components";
 import { GlobalLayout } from "../GlobalLayout/GlobalLayout";
+import { Icon } from "../../components";
 
 export type HomeLayoutProps = {
   data: OrganizationData;
@@ -14,7 +19,19 @@ export const HomeLayout = ({ data }: HomeLayoutProps) => {
   return (
     <GlobalLayout>
       <section data-fs-home-section>
-        <h1 data-fs-home-title>{data.displayName}</h1>
+        <div data-fs-home-title-wrapper>
+          <h1 data-fs-home-title>{data.displayName}</h1>
+          <Dropdown>
+            <DropdownButton data-fs-card-row-dropdown-button>
+              <Icon name="MoreVert" data-fs-menu-action-button />
+            </DropdownButton>
+            <OrgUnitsDropdownMenu
+              isComplete={false}
+              id={data.id}
+              name={data.displayName}
+            />
+          </Dropdown>
+        </div>
         <div data-fs-home-grid>
           {data.contracts.length === 1 ? (
             <ProfileCard {...data.contracts[0]} />

package/src/features/shared/layouts/HomeLayout/home-layout.scss

@@ -12,10 +12,16 @@
 
   padding: 2rem calc(var(--fs-spacing-8) + var(--fs-spacing-0));
 
-  [data-fs-home-title] {
-    text-transform: capitalize;
-    font-size: var(--fs-text-size-4);
-    font-weight: 600;
+  [data-fs-home-title-wrapper] {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    [data-fs-home-title] {
+      text-transform: capitalize;
+      font-size: var(--fs-text-size-4);
+      font-weight: 600;
+    }
   }
 
   [data-fs-home-grid] {

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

@@ -20,8 +20,6 @@ export const getClientContext = async ({
 }: LoaderData): Promise<ClientContext> => {
   const cookie = getCookieAsString(req.cookies);
 
-  console.log(query?.orgUnitId);
-
   const orgUnitId: string = query?.orgUnitId
     ? Array.isArray(query?.orgUnitId)
       ? query.orgUnitId[0]

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

@@ -1,4 +1,4 @@
-import { Structure } from "../components/HierarchyTree/HierarchyTree";
+import type { Structure } from "../components";
 
 export const getTreeDepth = (node: Structure<{}, "nodes">): number => {
   return (