@vtex/faststore-plugin-buyer-portal 1.3.46 → 1.3.48

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

@@ -0,0 +1,80 @@
+import { DropdownItem } from "@faststore/ui";
+
+import { BasicDropdownMenu, Icon } from "../../../shared/components";
+import { useDrawerProps } from "../../../shared/hooks";
+// TODO[2FA]: Uncomment when Authentication settings are ready
+// import { AuthSetupDrawer } from "../AuthSetupDrawer";
+import { UpdateOrgUnitDrawer } from "../UpdateOrgUnitDrawer/UpdateOrgUnitDrawer";
+
+// TODO[2FA]: Uncomment when Authentication settings are ready
+// import type { OrgUnitSettings } from "../../types";
+
+export type OrgUnitDetailsDropdownMenuProps = {
+  id: string;
+  name: string;
+  // TODO[2FA]: Uncomment when Authentication settings are ready
+  // settings: OrgUnitSettings;
+  onUpdate?: () => void;
+};
+
+export const OrgUnitDetailsDropdownMenu = ({
+  id,
+  name,
+  // TODO[2FA]: Uncomment when Authentication settings are ready
+  // settings,
+  onUpdate,
+}: OrgUnitDetailsDropdownMenuProps) => {
+  const {
+    open: openUpdateDrawerProps,
+    isOpen: isUpdateDrawerOpen,
+    ...updateDrawerProps
+  } = useDrawerProps();
+
+  // TODO[2FA]: Uncomment when Authentication settings are ready
+  // const {
+  //   open: openAuthSetupDrawerProps,
+  //   isOpen: isAuthSetupDrawerOpen,
+  //   ...authSetupDrawerProps
+  // } = useDrawerProps();
+
+  const sizeProps = { width: 20, height: 20 };
+
+  return (
+    <>
+      <BasicDropdownMenu>
+        <DropdownItem onClick={openUpdateDrawerProps}>
+          <Icon name="FormatSize" {...sizeProps} />
+          Rename
+        </DropdownItem>
+        {/* TODO[2FA]: Uncomment when 2FA settings are ready
+        <BasicDropdownMenu.Separator />
+        <DropdownItem onClick={openAuthSetupDrawerProps}>
+          <Icon name="Settings" {...sizeProps} />
+          Authentication
+        </DropdownItem>
+        */}
+      </BasicDropdownMenu>
+      {isUpdateDrawerOpen && (
+        <UpdateOrgUnitDrawer
+          readonly
+          id={id}
+          name={name}
+          onSuccess={onUpdate}
+          {...updateDrawerProps}
+          isOpen={isUpdateDrawerOpen}
+        />
+      )}
+      {/* TODO[2FA]: Uncomment when 2FA settings are ready
+      {isAuthSetupDrawerOpen && (
+        <AuthSetupDrawer
+          id={id}
+          name={name}
+          settings={settings}
+          {...authSetupDrawerProps}
+          isOpen={isAuthSetupDrawerOpen}
+        />
+      )}
+      */}
+    </>
+  );
+};

package/src/features/org-units/components/OrgUnitDetailsDropdownMenu/index.ts

@@ -0,0 +1,4 @@
+export {
+  OrgUnitDetailsDropdownMenu,
+  type OrgUnitDetailsDropdownMenuProps,
+} from "./OrgUnitDetailsDropdownMenu";

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

@@ -8,7 +8,7 @@ import {
 import { useGetRolesOptions } from "../../../roles/hooks";
 import { BasicDropdownMenu, Icon } from "../../../shared/components";
 import { useDrawerProps } from "../../../shared/hooks";
-import { CreateUserDrawer } from "../../../users/components";
+import { CreateUserDrawerSelector } from "../../../users/components";
 
 export type OrgUnitsDropdownMenuProps = {
   id: string;
@@ -114,7 +114,7 @@ export const OrgUnitsDropdownMenu = ({
         />
       )}
       {isCreateUserDrawerOpen && (
-        <CreateUserDrawer
+        <CreateUserDrawerSelector
           orgUnit={{ id, name }}
           rolesOptions={rolesOptions}
           {...createUserDrawerProps}

package/src/features/org-units/components/index.ts

@@ -28,3 +28,11 @@ export {
   type OrgUnitDetailsNavbarProps,
 } from "./OrgUnitDetailsNavbar/OrgUnitDetailsNavbar";
 export { OrgUnitBreadcrumb } from "./OrgUnitBreadcrumb/OrgUnitBreadcrumb";
+export {
+  AuthSetupDrawer,
+  type AuthSetupDrawerProps,
+} from "./AuthSetupDrawer/AuthSetupDrawer";
+export {
+  OrgUnitDetailsDropdownMenu,
+  type OrgUnitDetailsDropdownMenuProps,
+} from "./OrgUnitDetailsDropdownMenu/OrgUnitDetailsDropdownMenu";

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

@@ -2,6 +2,8 @@ export { useCreateNewOrgUnit } from "./useCreateNewOrgUnit";
 export { useDeleteOrgUnit } from "./useDeleteOrgUnit";
 export { useOrgUnitStructure } from "./useOrgUnitStructure";
 export { useUpdateOrgUnit } from "./useUpdateOrgUnit";
+export { useUpdateOrgUnitSettings } from "./useUpdateOrgUnitSettings";
 export { useChildrenOrgUnits } from "./useChildrenOrgUnits";
 export { useOrgUnitByUser } from "./useOrgUnitByUser";
 export { useSearchOrgUnits } from "./useSearchOrgUnits";
+export { useGetOrgUnitSettings } from "./useGetOrgUnitSettings";

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

@@ -0,0 +1,20 @@
+import { type QueryOptions, useQuery } from "../../shared/hooks";
+import { getOrgUnitSettingsService } from "../services";
+
+export const useGetOrgUnitSettings = (
+  unitId: string,
+  options?: QueryOptions<AwaitedType<typeof getOrgUnitSettingsService>>
+) => {
+  const { data, error, isLoading, refetch } = useQuery(
+    `api/org-unit-settings/${unitId}`,
+    ({ cookie }) => getOrgUnitSettingsService({ cookie, unitId }),
+    options
+  );
+
+  return {
+    settings: data,
+    hasSettingsError: error,
+    isSettingsLoading: isLoading,
+    refetchSettings: refetch,
+  };
+};

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

@@ -8,7 +8,10 @@ export const useOrgUnitByUser = (
   const { data, error, isLoading, refetch } = useQuery(
     `api/org-unit-by-user-id/${userId}`,
     ({ cookie }) => getOrgUnitByUserIdService({ cookie, userId }),
-    options
+    {
+      ...options,
+      lazy: !userId || options?.lazy,
+    }
   );
   return {
     orgUnit: data,

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

@@ -0,0 +1,27 @@
+import { type MutationOptions, useMutation } from "../../shared/hooks";
+import {
+  updateOrgUnitSettingsService,
+  type UpdateOrgUnitSettingsServiceProps,
+} from "../services/update-org-unit-settings.service";
+
+export const useUpdateOrgUnitSettings = (
+  options?: MutationOptions<AwaitedType<typeof updateOrgUnitSettingsService>>
+) => {
+  const { mutate, isLoading, error } = useMutation<
+    null,
+    Omit<UpdateOrgUnitSettingsServiceProps, "cookie">
+  >(
+    (variables, clientContext) =>
+      updateOrgUnitSettingsService({
+        ...variables,
+        cookie: clientContext.cookie,
+      }),
+    options
+  );
+
+  return {
+    updateOrgUnitSettings: mutate,
+    isUpdateOrgUnitSettingsLoading: isLoading,
+    hasUpdateOrgUnitSettingsError: error,
+  };
+};

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

@@ -13,6 +13,7 @@ import {
   LetterHighlight,
   VerticalNav,
 } from "../../../shared/components";
+import { BasicDropdownMenuTrigger } from "../../../shared/components/BasicDropdownMenu/BasicDropdownMenuTrigger";
 import { useMediaQuery } from "../../../shared/hooks/useMediaQuery";
 import { GlobalLayout } from "../../../shared/layouts";
 import {
@@ -25,6 +26,7 @@ import {
   AddAllToOrgUnitDropdown,
   OrgUnitBreadcrumb,
   OrgUnitDetailsNavbar,
+  OrgUnitDetailsDropdownMenu,
 } from "../../components";
 import { useOrgUnitByUser } from "../../hooks";
 
@@ -43,12 +45,19 @@ export type OrgUnitsDetailsLayoutProps = {
     orgUnit: OrgUnitBasicData;
     contracts: ContractData[];
     user: UserData | null;
+    // TODO[2FA]: Uncomment when Authentication settings are ready
+    //  settings: OrgUnitSettings;
   };
   loading?: boolean;
 };
 
 export const OrgUnitsDetailsLayout = ({
-  data: { orgUnit, contracts, user },
+  data: {
+    orgUnit,
+    contracts,
+    user, // TODO[2FA]: Uncomment when Authentication settings are ready
+    // settings,
+  },
   loading = false,
 }: OrgUnitsDetailsLayoutProps) => {
   const isMobile = useMediaQuery(QUERY_TABLET);
@@ -104,10 +113,22 @@ export const OrgUnitsDetailsLayout = ({
             />
           )}
 
+          <Dropdown>
+            <BasicDropdownMenuTrigger />
+
+            <OrgUnitDetailsDropdownMenu
+              id={orgUnit?.id}
+              name={orgUnit?.name}
+              // TODO[2FA]: Uncomment when Authentication settings are ready
+              // settings={settings}
+            />
+          </Dropdown>
+
           <Dropdown>
             <DropdownButton asChild>
               <HeaderInside.Button />
             </DropdownButton>
+
             <AddAllToOrgUnitDropdown
               isSingleContract={isSingleContract}
               contractId={contracts[0]?.id}

package/src/features/org-units/layouts/OrgUnitDetailsLayout/org-units-details.scss

@@ -5,6 +5,7 @@
 @import "../../../shared/layouts/BaseTabsLayout/about-drawer/about-drawer.scss";
 @import "../../../credit-cards/components/CreateCreditCardDrawer/create-credit-card-drawer.scss";
 @import "../../components/OrgUnitBreadcrumb/org-unit-breadcrumb.scss";
+@import "../../components/AuthSetupDrawer/auth-setup-drawer.scss";
 
 [data-fs-org-units-details-section] {
   @import "../../../shared/components/BasicCard/basic-card.scss";

package/src/features/org-units/services/get-org-unit-settings.service.ts

@@ -0,0 +1,13 @@
+import { orgUnitClient } from "../clients/OrgUnitClient";
+
+export type GetOrgUnitSettingsServiceProps = {
+  unitId: string;
+  cookie: string;
+};
+
+export const getOrgUnitSettingsService = async ({
+  unitId,
+  cookie,
+}: GetOrgUnitSettingsServiceProps) => {
+  return orgUnitClient.getOrgUnitSettings(unitId, cookie);
+};

package/src/features/org-units/services/index.ts

@@ -19,3 +19,11 @@ export {
 } from "./update-org-unit.service";
 export { getOrgUnitByUserIdService } from "./get-org-unit-by-user-id.service";
 export { searchOrgUnitsByNameService } from "./search-org-units-by-name.service";
+export {
+  type GetOrgUnitSettingsServiceProps,
+  getOrgUnitSettingsService,
+} from "./get-org-unit-settings.service";
+export {
+  type UpdateOrgUnitSettingsServiceProps,
+  updateOrgUnitSettingsService,
+} from "./update-org-unit-settings.service";

package/src/features/org-units/services/update-org-unit-settings.service.ts

@@ -0,0 +1,17 @@
+import { orgUnitClient } from "../clients/OrgUnitClient";
+
+import type { OrgUnitSettings } from "../types";
+
+export type UpdateOrgUnitSettingsServiceProps = {
+  unitId: string;
+  data: OrgUnitSettings;
+  cookie: string;
+};
+
+export const updateOrgUnitSettingsService = async ({
+  unitId,
+  data,
+  cookie,
+}: UpdateOrgUnitSettingsServiceProps) => {
+  return orgUnitClient.updateOrgUnitSettings(unitId, data, cookie);
+};

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

@@ -0,0 +1,25 @@
+export enum AuthenticationMethod {
+  PASSWORD = "PASSWORD",
+  SSO = "SSO",
+}
+
+export type OrgUnitSettings = {
+  userIdentification: {
+    userName: boolean;
+    email: boolean;
+    phone: boolean;
+  };
+  authenticationMethods: {
+    method: AuthenticationMethod;
+  };
+  "2FA": {
+    verificationCode: boolean;
+  };
+};
+
+export type Identifier = {
+  id: string;
+  name: string;
+  disabled: boolean;
+  defaultChecked?: boolean;
+};

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

@@ -14,3 +14,5 @@ export type {
   OrgUnitSearchParams,
   OrgUnitSearchResponse,
 } from "./OrgUnitSearch";
+export { AuthenticationMethod } from "./OrgUnitSettings";
+export type { OrgUnitSettings, Identifier } from "./OrgUnitSettings";

package/src/features/product-assortment/hooks/useGetProductAssortment.ts

@@ -0,0 +1,52 @@
+import { type QueryOptions, useQuery } from "../../shared/hooks";
+import { getProductAssortmentFromScopeService } from "../services/get-product-assortment-from-scope.service";
+
+export const useGetProductAssortment = ({
+  contractId,
+  orgUnitId,
+  search = "",
+  filterByScope = false,
+  page = 1,
+  options,
+}: {
+  contractId: string;
+  orgUnitId: string;
+  filterByScope?: boolean;
+  search?: string;
+  page?: number;
+  options?: QueryOptions<
+    AwaitedType<typeof getProductAssortmentFromScopeService>
+  >;
+}) => {
+  const { data, error, isLoading, refetch } = useQuery(
+    `customers/${contractId}/units/${orgUnitId}/collections`,
+    ({ cookie }) =>
+      getProductAssortmentFromScopeService({
+        args: {
+          cookie,
+          contractId,
+          unitId: orgUnitId,
+          filterByScope,
+          name: search,
+          page,
+        },
+      }),
+    { ...options }
+  );
+
+  return {
+    data: {
+      items: data?.items ?? [],
+      paging: {
+        page: data?.paging?.page ?? 1,
+        total: data?.paging?.total ?? 0,
+        pages: data?.paging?.pages ?? 0,
+        limit: data?.paging?.limit ?? 10,
+        perPage: data?.paging?.perPage ?? 10,
+      },
+    },
+    hasError: !!error,
+    isProductAssortmentLoading: isLoading,
+    refetchProductAssortment: refetch,
+  };
+};

package/src/features/product-assortment/hooks/useGetProductAssortmentFromContract.ts

@@ -0,0 +1,35 @@
+import { type QueryOptions, useQuery } from "../../shared/hooks";
+import { getProductAssortmentFromContractService } from "../services/get-product-assortment-from-contract.service";
+
+export const useGetProductAssortmentFromContract = ({
+  contractId,
+  orgUnitId,
+  search = "",
+  options,
+}: {
+  contractId: string;
+  orgUnitId: string;
+  search?: string;
+  options?: QueryOptions<
+    AwaitedType<typeof getProductAssortmentFromContractService>
+  >;
+}) => {
+  const { data, error, isLoading, refetch } = useQuery(
+    `customers/${contractId}/units/${orgUnitId}/collections`,
+    ({ cookie }) =>
+      getProductAssortmentFromContractService({
+        cookie,
+        contractId,
+        unitId: orgUnitId,
+        name: search,
+      }),
+    { ...options }
+  );
+
+  return {
+    data,
+    hasError: !!error,
+    isProductAssortmentFromContractLoading: isLoading,
+    refetchProductAssortmentFromContract: refetch,
+  };
+};

package/src/features/product-assortment/layouts/ProductAssortmentLayout/ProductAssortmentLayout.tsx

@@ -1,3 +1,5 @@
+import { useMemo } from "react";
+
 import { Tooltip } from "@faststore/ui";
 
 import {
@@ -6,11 +8,16 @@ import {
   Paginator,
 } from "../../../shared/components";
 import { EmptyState } from "../../../shared/components/EmptyState/EmptyState";
-import { useBuyerPortal, usePageItems } from "../../../shared/hooks";
-import { useDrawerProps } from "../../../shared/hooks";
+import {
+  useBuyerPortal,
+  useDrawerProps,
+  usePageItems,
+} from "../../../shared/hooks";
 import { ContractTabsLayout, GlobalLayout } from "../../../shared/layouts";
 import { AddProductAssortmentDrawer } from "../../components";
 import { ProductAssortmentTable } from "../../components/ProductAssortmentTable/ProductAssortmentTable";
+import { useGetProductAssortment } from "../../hooks/useGetProductAssortment";
+import { useGetProductAssortmentFromContract } from "../../hooks/useGetProductAssortmentFromContract";
 
 import type {
   ProductAssortmentLayoutProps,
@@ -18,11 +25,10 @@ import type {
 } from "../../types";
 
 export const ProductAssortmentLayout = ({
-  initialProductAssortment,
-  drawerProductAssortment,
-  isContractEmpty,
   page,
   search,
+  orgUnitId,
+  contractId,
 }: ProductAssortmentLayoutProps) => {
   const {
     currentOrgUnit: orgUnit,
@@ -30,6 +36,39 @@ export const ProductAssortmentLayout = ({
     currentContract: contract,
   } = useBuyerPortal();
 
+  const { data: drawerProductAssortment } = useGetProductAssortment({
+    contractId,
+    orgUnitId,
+  });
+  const { data: contractAssortment } = useGetProductAssortmentFromContract({
+    contractId,
+    orgUnitId,
+  });
+  const { data: initialProductAssortment, isProductAssortmentLoading } =
+    useGetProductAssortment({
+      filterByScope: true,
+      contractId,
+      orgUnitId,
+      search,
+      page,
+    });
+
+  const isContractEmpty = !contractAssortment || contractAssortment.total === 0;
+
+  const itemsKey = useMemo(
+    () =>
+      initialProductAssortment.items
+        .map((item) => item.id)
+        .sort()
+        .join(","),
+    [initialProductAssortment.items]
+  );
+
+  const memoizedInitialItems = useMemo(
+    () => initialProductAssortment.items,
+    [itemsKey]
+  );
+
   const {
     isLoading,
     items: productAssortment,
@@ -38,7 +77,7 @@ export const ProductAssortmentLayout = ({
     increasePage,
     decreasePage,
   } = usePageItems<ProductAssortmentWithAdditionalInformation>({
-    initialItems: initialProductAssortment.items,
+    initialItems: memoizedInitialItems,
     search,
     page,
   });
@@ -53,7 +92,6 @@ export const ProductAssortmentLayout = ({
     ...addProductAssortmentDrawerProps
   } = useDrawerProps();
 
-  //const enabledAssortment = productAssortment.filter((p) => p.isEnabled);
   const hasAllAssortment = drawerProductAssortment.items.length === 0;
   const isEmpty = productAssortment.length === 0;
 
@@ -72,7 +110,7 @@ export const ProductAssortmentLayout = ({
     <GlobalLayout>
       <ContractTabsLayout
         orgUnitName={orgUnit?.name ?? ""}
-        orgUnitId={orgUnit?.id ?? ""}
+        orgUnitId={orgUnitId ?? orgUnit?.id ?? ""}
         contractName={contract?.name ?? ""}
         contractId={contract?.id ?? ""}
         pageName="Contract"
@@ -80,6 +118,7 @@ export const ProductAssortmentLayout = ({
           image: undefined,
           name: user?.name ?? "",
           role: user?.role ?? "",
+          id: user?.id ?? "",
         }}
       >
         <section data-fs-bp-product-assortment-container>
@@ -140,9 +179,11 @@ export const ProductAssortmentLayout = ({
                     {initialProductAssortment.paging.page > 1 ? (
                       <Paginator.NextPageButton
                         onClick={decreasePage}
-                        disabled={isLoading}
+                        disabled={isLoading || isProductAssortmentLoading}
                       >
-                        {isLoading ? "Loading" : "Previous Page"}
+                        {isLoading || isProductAssortmentLoading
+                          ? "Loading"
+                          : "Previous Page"}
                       </Paginator.NextPageButton>
                     ) : (
                       <></>
@@ -150,9 +191,11 @@ export const ProductAssortmentLayout = ({
                     {!isLastPage && !isEmpty ? (
                       <Paginator.NextPageButton
                         onClick={increasePage}
-                        disabled={isLoading}
+                        disabled={isLoading || isProductAssortmentLoading}
                       >
-                        {isLoading ? "Loading" : "Next Page"}
+                        {isLoading || isProductAssortmentLoading
+                          ? "Loading"
+                          : "Next Page"}
                       </Paginator.NextPageButton>
                     ) : (
                       <></>

package/src/features/product-assortment/layouts/ProductAssortmentLayout/product-assortment-layout.scss

@@ -95,4 +95,4 @@
     margin-top: var(--fs-spacing-0);
     padding: var(--fs-spacing-2) 0;
   }
-}
+}

package/src/features/product-assortment/types/index.ts

@@ -1,8 +1,5 @@
-import type { ContractData } from "../../contracts/types";
-import type { OrgUnitBasicData } from "../../org-units/types";
 import type { BasicDrawerProps } from "../../shared/components";
 import type { ErrorBoundaryProps } from "../../shared/components/ErrorBoundary/types";
-import type { ClientContext } from "../../shared/utils";
 
 export type ProductAssortmentSummary = {
   id: string;
@@ -55,24 +52,19 @@ export interface ProductAssortmentSelectedProps {
 }
 
 export type ProductAssortmentLayoutProps = {
-  initialProductAssortment: GetProductAssortmentFromContractResponse;
-  drawerProductAssortment: GetProductAssortmentFromContractResponse;
+  userId?: string;
+  orgUnitId: string;
+  contractId: string;
   page: number;
   search: string;
-  isContractEmpty: boolean;
 };
 
 export type ProductAssortmentData = {
-  productAssortment: GetProductAssortmentFromContractResponse;
-  drawerProductAssortment: GetProductAssortmentFromContractResponse;
-  isContractEmpty: boolean;
+  userId: string;
+  orgUnitId: string;
+  contractId: string;
   search: string;
   page: number;
-  context: {
-    clientContext: ClientContext;
-    currentOrgUnit: OrgUnitBasicData;
-    currentContract: ContractData | null;
-  };
   hasError?: boolean;
   error?: ErrorBoundaryProps;
 };

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

@@ -7,6 +7,10 @@ import type { ContractData } from "../../../contracts/types";
 import type { OrgUnitBasicData } from "../../../org-units/types";
 import type { ClientContext } from "../../utils";
 
+export type FeatureFlags = {
+  enableUsernameCreation?: boolean;
+};
+
 export type BuyerPortalContextType = {
   clientContext: ClientContext;
   currentOrgUnit?: OrgUnitBasicData | null;
@@ -16,6 +20,7 @@ export type BuyerPortalContextType = {
     name: string;
     role?: string;
   } | null;
+  featureFlags?: FeatureFlags;
 };
 
 export const BuyerPortalContext = createContext<