@vtex/faststore-plugin-buyer-portal 1.0.30 → 1.0.32

package/package.json

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

package/plugin.config.js

@@ -17,26 +17,27 @@ module.exports = {
       path: "/user/[userId]",
       appLayout: false,
     },
-    profile: {
-      path: "/profile/[[...contractId]]",
-      appLayout: false,
-    },
 
-    // Shared pages
-    "org-units": {
-      path: "/org-units/[[...orgUnitId]]",
+    // ----
+    profile: {
+      path: "/profile/[contractId]",
       appLayout: false,
     },
     contracts: {
-      path: "/contracts/[[...orgUnitId]]",
+      path: "/contracts/[orgUnitId]",
       appLayout: false,
     },
     addresses: {
-      path: "/addresses/[[...orgUnitId]]",
+      path: "/addresses/[orgUnitId]",
       appLayout: false,
     },
     users: {
-      path: "/users/[[...orgUnitId]]",
+      path: "/users/[orgUnitId]",
+      appLayout: false,
+    },
+
+    "org-units": {
+      path: "/org-units/[orgUnitId]",
       appLayout: false,
     },
   },

package/src/features/addresses/clients/AddressesClient.ts

@@ -0,0 +1,21 @@
+import { Client } from "../../shared/clients/Client";
+import { getApiUrl } from "../../shared/utils";
+import type { AddressData } from "../types";
+
+export default class AddressesClient extends Client {
+  constructor() {
+    super(getApiUrl());
+  }
+
+  getAddressesByCustomerId(customerId: string, cookie: string) {
+    return this.get<{ addresses: AddressData[] }>(`addresses/${customerId}`, {
+      headers: {
+        Cookie: cookie,
+      },
+    });
+  }
+}
+
+const addressesClient = new AddressesClient();
+
+export { addressesClient };

package/src/features/addresses/services/get-addresses.service.ts

@@ -1,6 +1,6 @@
 import type { AddressSummaryData } from "../types/AddressData";
-import { buyerPortalClient } from "../../../clients/BuyerPortalClient";
 import { compareItems, statusFilters } from "../../shared/utils";
+import { addressesClient } from "../clients/AddressesClient";
 
 export type GetAddressesServiceProps = Partial<{
   search: string;
@@ -27,7 +27,7 @@ export const getAddressesService = async ({
   const addressesData: AddressSummaryData[] = [];
 
   try {
-    const { addresses = [] } = await buyerPortalClient.getAddressesByCustomerId(
+    const { addresses = [] } = await addressesClient.getAddressesByCustomerId(
       customerId,
       cookie
     );

package/src/features/contracts/clients/ContractsClient.ts

@@ -0,0 +1,78 @@
+import { Client } from "../../shared/clients/Client";
+import { getApiUrl } from "../../shared/utils";
+import type { ContractData } from "../types";
+
+class ContractsClient extends Client {
+  constructor() {
+    super(getApiUrl());
+  }
+
+  getContractsByCustomerId(customerId: string, cookie: string) {
+    return this.get<{ data: { contracts: ContractData[]; total: number } }>(
+      `contracts/${customerId}/list`,
+      {
+        headers: {
+          Cookie: cookie,
+        },
+      }
+    );
+  }
+
+  getContractsByOrgUnitId(orgUnitId: string, cookie: string) {
+    return this.get<{ contracts: ContractData[]; total: number }>(
+      `contracts/${orgUnitId}`,
+      {
+        headers: {
+          Cookie: cookie,
+        },
+      }
+    );
+  }
+
+  getContractDetails(contractId: string, cookie: string) {
+    return this.get<{ contract: ContractData }>(`contract/${contractId}`, {
+      headers: {
+        Cookie: cookie,
+      },
+    });
+  }
+
+  getContracts(
+    cookie: string,
+    params?: {
+      salesRepresentative?: string;
+      isActive?: boolean;
+      page?: number;
+      sort?: "Asc" | "Desc";
+    }
+  ) {
+    return this.get<ContractData[]>("contracts/filter", {
+      headers: {
+        Cookie: cookie,
+      },
+      params,
+    });
+  }
+
+  updateContractStatus(
+    data: { contractId: string; isActive: boolean },
+    cookie: string
+  ) {
+    const { contractId, isActive } = data;
+
+    return this.post<null, { isActive: boolean }>(
+      `contracts/status/${contractId}`,
+      { isActive },
+      {
+        headers: {
+          Cookie: cookie,
+        },
+        data: { isActive },
+      }
+    );
+  }
+}
+
+const contractsClient = new ContractsClient();
+
+export { contractsClient };

package/src/features/contracts/components/ContractsCard/ContractsCard.tsx

@@ -36,7 +36,7 @@ export default function ContractsCard({
       icon={<Icon name="Info" width={20} height={20} />}
       onPlusIconClick={() => {}}
     >
-      {contracts.length &&
+      {!!contracts.length &&
         contracts.map((contract: ContractData) => {
           return (
             <div key={contract.id}>

package/src/features/contracts/services/get-contract-details.service.ts

@@ -1,4 +1,4 @@
-import { buyerPortalClient } from "../../../clients/BuyerPortalClient";
+import { contractsClient } from "../clients/ContractsClient";
 
 export const getContractDetailsService = async ({
   contractId,
@@ -7,7 +7,7 @@ export const getContractDetailsService = async ({
   contractId: string;
   cookie: string;
 }) => {
-  const { contract } = await buyerPortalClient.getContractDetails(
+  const { contract } = await contractsClient.getContractDetails(
     contractId,
     cookie
   );

package/src/features/contracts/services/get-contracts-by-customer-id.service.ts

@@ -1,4 +1,4 @@
-import { buyerPortalClient } from "../../../clients/BuyerPortalClient";
+import { contractsClient } from "../clients/ContractsClient";
 import type { ContractData } from "../types";
 
 export type GetContractsByCustomerIdServiceProps = {
@@ -25,7 +25,7 @@ export const getContractsByCustomerIdService = async ({
   try {
     const {
       data: { contracts },
-    } = await buyerPortalClient.getContractsByCustomerId(customerId, cookie);
+    } = await contractsClient.getContractsByCustomerId(customerId, cookie);
 
     contractsData.push(...contracts);
   } catch (err) {

package/src/features/contracts/services/get-contracts-org-by-unit-id.service.ts

@@ -1,5 +1,4 @@
-import { buyerPortalClient } from "../../../clients/BuyerPortalClient";
-import { compareItems, statusFilters } from "../../shared/utils";
+import { contractsClient } from "../clients/ContractsClient";
 import type { ContractData } from "../types";
 
 export type GetContractsByOrgUnitIdServiceProps = {
@@ -24,7 +23,7 @@ export const getContractsByOrgUnitIdService = async ({
   }
 
   try {
-    const { contracts } = await buyerPortalClient.getContractsByOrgUnitId(
+    const { contracts } = await contractsClient.getContractsByOrgUnitId(
       orgUnitId,
       cookie
     );
@@ -34,7 +33,5 @@ export const getContractsByOrgUnitIdService = async ({
     return contractsData;
   }
 
-  console.log("Contracts Data: ", contractsData);
-
   return contractsData;
 };

package/src/features/contracts/services/update-contract-status.service.ts

@@ -1,4 +1,4 @@
-import { buyerPortalClient } from "../../../clients/BuyerPortalClient";
+import { contractsClient } from "../clients/ContractsClient";
 
 export type UpdateContractStatusServiceProps = {
   contractId: string;
@@ -12,7 +12,7 @@ export const updateContractStatusService = async ({
   cookie,
 }: UpdateContractStatusServiceProps): Promise<null> => {
   try {
-    const data = await buyerPortalClient.updateContractStatus(
+    const data = await contractsClient.updateContractStatus(
       { contractId, isActive },
       cookie
     );

package/src/features/org-units/clients/OrgUnitClient.ts

@@ -0,0 +1,141 @@
+import { Client } from "../../shared/clients/Client";
+import { getApiUrl } from "../../shared/utils";
+import type {
+  OrgUnitBasicData,
+  OrgUnitSummaryData,
+  OrgUnitData,
+} from "../types";
+
+export class OrgUnitClient extends Client {
+  constructor() {
+    super(getApiUrl());
+  }
+
+  getOrgUnitBasicData(id: string, cookie: string) {
+    return this.get<OrgUnitBasicData>(`units/${id}`, {
+      headers: {
+        Cookie: cookie,
+      },
+    });
+  }
+
+  getOrgUnitSummary(id: string, cookie: string) {
+    return this.get<OrgUnitSummaryData>(`units/summary/${id}`, {
+      headers: {
+        Cookie: cookie,
+      },
+    });
+  }
+
+  getRootOrgUnitByCustomerId(customerId: string, cookie: string) {
+    return this.get<{ organizationalUnits: OrgUnitData[]; total: number }>(
+      `units/root/${customerId}`,
+      {
+        headers: {
+          Cookie: cookie,
+        },
+      }
+    );
+  }
+
+  getOrgUnitByUserId(userId: string, cookie: string) {
+    return this.get<{
+      orgUnit: {
+        createdAt: string;
+        updatedAt: string;
+        name: string;
+        path: {
+          ids: string;
+          names: string;
+        };
+        id: string;
+        customerGroup: {
+          customerIds: string[];
+        };
+      };
+    }>(`units/user/${userId}`, {
+      headers: {
+        Cookie: cookie,
+      },
+    });
+  }
+
+  createOrgUnit(
+    data: { name: string; parentId?: string | null; customerId: string[] },
+    cookie: string
+  ) {
+    const { parentId, ...input } = data;
+    return this.post<
+      {
+        customerIds: string[];
+        id: string;
+        isActive: boolean;
+        name: string;
+        parentId: string;
+      },
+      typeof data
+    >(
+      "units",
+      { ...input, ...(parentId && { parentId }) },
+      {
+        headers: {
+          Cookie: cookie,
+        },
+      }
+    );
+  }
+
+  updateOrgUnit(data: { name?: string; id: string }, cookie: string) {
+    const { id, ...input } = data;
+    return this.patch<null, typeof input>(`units/${id}`, input, {
+      headers: {
+        Cookie: cookie,
+      },
+    });
+  }
+
+  deleteOrgUnit(orgUnitId: string, cookie: string) {
+    return this.delete(`units/${orgUnitId}`, {
+      headers: {
+        Cookie: cookie,
+      },
+    });
+  }
+
+  getOrgUnitChildren(orgUnitId: string, cookie: string) {
+    return this.get<{
+      orgUnit: {
+        id: string;
+        name: string;
+        path: {
+          ids: string;
+          names: string;
+        };
+      }[];
+    }>(`units/children/${orgUnitId}`, {
+      headers: {
+        Cookie: cookie,
+      },
+    });
+  }
+
+  searchOrgUnitsByName(name: string, cookie: string) {
+    return this.get<{
+      orgUnits: {
+        id: string;
+        name: string;
+        path: {
+          ids: string;
+          names: string;
+        };
+      }[];
+    }>(`search/units?name=${name}`, {
+      headers: {
+        Cookie: cookie,
+      },
+    });
+  }
+}
+
+const orgUnitClient = new OrgUnitClient();
+export { orgUnitClient };

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

@@ -17,6 +17,7 @@ export type CreateOrgUnitDrawerProps = Omit<BasicDrawerProps, "children"> & {
   options?: { id: string; name: string }[];
   initialParentOrgUnit?: { id: string | null; name: string };
   readonly?: boolean;
+  onCreate?: () => void;
 };
 
 export const CreateOrgUnitDrawer = ({
@@ -24,6 +25,7 @@ export const CreateOrgUnitDrawer = ({
   options = [],
   initialParentOrgUnit: initialOrgUnit,
   readonly,
+  onCreate,
   ...props
 }: CreateOrgUnitDrawerProps) => {
   const { pushToast } = useUI();
@@ -52,13 +54,26 @@ export const CreateOrgUnitDrawer = ({
         </button>
       ),
     });
+    onCreate?.();
     close();
-    router.replace(router.asPath);
   };
 
   const { createNewOrgUnit, isCreateNewOrgUnitLoading } = useCreateNewOrgUnit({
     onSuccess: handleCreateNewOrgUnitSuccess,
-    onError: () => {
+    onError: (err) => {
+      const error = JSON.parse(err.message) as {
+        code: string;
+        description: string;
+      };
+
+      if (error.code === "InvalidOrganizationUnitName") {
+        pushToast({
+          message: "An organizational unit with the same name already exists",
+          status: "ERROR",
+        });
+        return;
+      }
+
       pushToast({
         message: "An error occurred while creating the organizational unit",
         status: "ERROR",

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

@@ -28,7 +28,7 @@ export const DeleteOrgUnitDrawer = ({
   ...props
 }: DeleteOrgUnitDrawerProps) => {
   const router = useRouter();
-  const { childrenOrgUnits } = useChildrenOrgUnits(id);
+  const { childrenOrgUnits } = useChildrenOrgUnits(id, name);
   const { pushToast } = useUI();
 
   const [confirmName, setConfirmName] = useState("");

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

@@ -1,5 +1,4 @@
-import { DropdownItem, Toggle } from "@faststore/ui";
-import { useRouter } from "next/router";
+import { DropdownItem } from "@faststore/ui";
 
 import {
   CreateOrgUnitDrawer,
@@ -13,6 +12,7 @@ export type OrgUnitsDropdownMenuProps = {
   id: string;
   name: string;
   onUpdate?: () => void;
+  onCreate?: () => void;
   isComplete?: boolean;
 };
 
@@ -20,6 +20,7 @@ export const OrgUnitsDropdownMenu = ({
   id,
   name,
   onUpdate,
+  onCreate,
   isComplete = true,
 }: OrgUnitsDropdownMenuProps) => {
   const { open: openCreateDrawerProps, ...createDrawerProps } =
@@ -67,6 +68,7 @@ export const OrgUnitsDropdownMenu = ({
       <CreateOrgUnitDrawer
         readonly
         initialParentOrgUnit={{ id, name }}
+        onCreate={onCreate}
         {...createDrawerProps}
       />
       <DeleteOrgUnitDrawer id={id} name={name} {...deleteDrawerProps} />

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

@@ -8,11 +8,13 @@ import { HierarchyTree, Icon } from "../../../shared/components";
 export type OrgUnitsHierarchyTreeProps = {
   orgUnitHierarchyData: OrgUnitHierarchyData;
   readonly?: boolean;
+  enableChildren?: boolean;
 };
 
 export const OrgUnitsHierarchyTree = ({
   orgUnitHierarchyData,
   readonly,
+  enableChildren = true,
 }: OrgUnitsHierarchyTreeProps) => {
   const { structure, setNode } = useOrgUnitStructure(orgUnitHierarchyData);
 
@@ -23,7 +25,7 @@ export const OrgUnitsHierarchyTree = ({
       data-fs-org-units-hierarchy-root
     >
       {({ isRoot, isOpen, toggle, isLastNode, name, id }) => {
-        useChildrenOrgUnits(id, {
+        const { refetchChildrenOrgUnits } = useChildrenOrgUnits(id, name, {
           onSuccess: (orgUnitHierarchyData) => {
             orgUnitHierarchyData?.nodes &&
               setNode(id, orgUnitHierarchyData.nodes);
@@ -39,20 +41,22 @@ export const OrgUnitsHierarchyTree = ({
                   href={`/org-unit/${id}`}
                 />
               )}
-              <button
-                type="button"
-                data-fs-org-unit-item-toggle
-                disabled={isLastNode}
-                onClick={toggle}
-              >
-                <Icon
-                  name="ArrowRight"
-                  data-fs-org-unit-item-toggle-icon
-                  data-fs-org-unit-item-toggle-icon-open={isOpen}
-                  width={20}
-                  height={20}
-                />
-              </button>
+              {enableChildren && (
+                <button
+                  type="button"
+                  data-fs-org-unit-item-toggle
+                  disabled={isLastNode}
+                  onClick={toggle}
+                >
+                  <Icon
+                    name="ArrowRight"
+                    data-fs-org-unit-item-toggle-icon
+                    data-fs-org-unit-item-toggle-icon-open={isOpen}
+                    width={20}
+                    height={20}
+                  />
+                </button>
+              )}
               <span data-fs-org-unit-item-wrapper>
                 <Icon
                   name={isRoot ? "FolderSpecial" : "Folder"}
@@ -74,7 +78,11 @@ export const OrgUnitsHierarchyTree = ({
                         <Icon name="MoreVert" width={24} height={24} />
                       </button>
                     </DropdownButton>
-                    <OrgUnitsDropdownMenu id={id} name={name} />
+                    <OrgUnitsDropdownMenu
+                      id={id}
+                      name={name}
+                      onCreate={refetchChildrenOrgUnits}
+                    />
                   </Dropdown>
                 </div>
               )}

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

@@ -10,7 +10,7 @@ type OrganizationalUnitsCardProps = {
     id: string | null;
     name: string;
   };
-  organizationalUnits: OrgUnitData[];
+  organizationalUnits?: OrgUnitData[];
 };
 
 export default function OrganizationalUnitsCard({

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

@@ -3,11 +3,12 @@ import { getChildrenOrgUnitsService } from "../services";
 
 export const useChildrenOrgUnits = (
   id: string,
+  name: string,
   options?: QueryOptions<AwaitedType<typeof getChildrenOrgUnitsService>>
 ) => {
   const { data, error, isLoading, refetch } = useQuery(
     `api/children-org-units/${id}`,
-    ({ cookie }) => getChildrenOrgUnitsService(id, cookie),
+    ({ cookie }) => getChildrenOrgUnitsService(id, name, cookie),
     options
   );
   return {

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

@@ -4,12 +4,11 @@ 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,
   OrgUnitsDropdownMenu,
 } from "../../components";
-import type { OrgUnitData, OrgUnitSummaryData } from "../../types";
+import type { OrgUnitSummaryData } from "../../types";
 import { Icon } from "../../../shared/components";
 
 export type OrgUnitsDetailsLayoutProps = {
@@ -17,10 +16,7 @@ export type OrgUnitsDetailsLayoutProps = {
 };
 
 export const OrgUnitsDetailsLayout = ({ data }: OrgUnitsDetailsLayoutProps) => {
-  const users: UserData[] = [];
-  const orgUnits: OrgUnitData[] = [];
-
-  const hasContracts = data.contracts.length > 0;
+  const isSingleContract = data.contracts.length === 1;
   return (
     <GlobalLayout>
       <section data-fs-home-section>
@@ -38,19 +34,19 @@ export const OrgUnitsDetailsLayout = ({ data }: OrgUnitsDetailsLayoutProps) => {
           </Dropdown>
         </div>
         <div data-fs-home-grid>
-          {hasContracts ? (
-            <ProfileCard orgUnitData={data} {...data.contracts[0]} />
+          {isSingleContract ? (
+            <ProfileCard {...data.contracts[0]} />
           ) : (
             <ContractsCard orgUnitData={data} contracts={data.contracts} />
           )}
-          <UsersCard orgUnitData={data} users={users} />
-          {/* Remove this comments when mocks be removed */}
-          {hasContracts && (
-            <AddressesCard orgUnitData={data} addresses={data?.addresses} />
+          <UsersCard orgUnitData={data} users={data.users} />
+          {!!data?.addresses?.length && (
+            <AddressesCard orgUnitData={data} addresses={data.addresses} />
           )}
+
           <OrganizationalUnitsCard
             orgUnitData={data}
-            organizationalUnits={orgUnits}
+            organizationalUnits={data.children}
           />
         </div>
       </section>

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

@@ -4,17 +4,23 @@ import {
   InternalTopBar,
   MainLinksDropdownMenu,
 } from "../../../shared/components";
-import { useDrawerProps, useQueryParams } from "../../../shared/hooks";
+import {
+  useBuyerPortal,
+  useDrawerProps,
+  useQueryParams,
+} from "../../../shared/hooks";
 import { GlobalLayout } from "../../../shared/layouts";
 import { CreateOrgUnitDrawer, OrgUnitsHierarchyTree } from "../../components";
 import type { OrgUnitHierarchyData } from "../../types";
 
 export type OrgUnitsLayoutProps = {
   data: { organizationalUnits: OrgUnitHierarchyData[]; total: number } | null;
+  search: string;
 };
 
-export const OrgUnitsLayout = ({ data }: OrgUnitsLayoutProps) => {
+export const OrgUnitsLayout = ({ data, search }: OrgUnitsLayoutProps) => {
   const { setQueryString, removeQueryString } = useQueryParams();
+  const { currentOrgUnit } = useBuyerPortal();
 
   const { open, ...drawerProps } = useDrawerProps();
 
@@ -35,6 +41,7 @@ export const OrgUnitsLayout = ({ data }: OrgUnitsLayoutProps) => {
 
         <div data-fs-buyer-portal-org-units-filter>
           <InternalSearch
+            defaultValue={search}
             textSearch={(searchTerm) => {
               searchTerm
                 ? setQueryString("search", searchTerm)
@@ -48,6 +55,7 @@ export const OrgUnitsLayout = ({ data }: OrgUnitsLayoutProps) => {
         <section data-fs-hierarchy-tree-wrapper>
           {data?.organizationalUnits?.map((orgUnit) => (
             <OrgUnitsHierarchyTree
+              enableChildren={!search}
               key={orgUnit.id}
               orgUnitHierarchyData={orgUnit}
             />
@@ -57,7 +65,7 @@ export const OrgUnitsLayout = ({ data }: OrgUnitsLayoutProps) => {
         {data && (
           <CreateOrgUnitDrawer
             readonly
-            initialParentOrgUnit={{ name: "Root", id: null }}
+            initialParentOrgUnit={currentOrgUnit ?? undefined}
             {...drawerProps}
           />
         )}