All files / src/componentsV2/SideMenu/hooks useMenu.tsx

86.95% Statements 20/23
78.57% Branches 11/14
80% Functions 4/5
90.9% Lines 20/22

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100                                                                      10x 10x   10x 10x   10x   10x 4x           4x 1x     3x         10x 4x 4x   4x     4x       4x           4x   41x                   4x     10x                
import React from "react";
import { Icon } from "@phosphor-icons/react";
import getAcquirerMenu from "./menus/acquirerMenu";
import getProviderMenu from "./menus/providerMenu";
import getMerchantMenu from "./menus/merchantMenu";
import { useGetFeatureFlagValues } from "FeatureFlags/useGetFeatureFlagValues";
import { useUser } from "@hooks/common/useUser";
import { useLocation } from "react-router-dom";
import { useProductPermission } from "features/Permissions/AccessControl/hooks";
import { useGetProductTypesFactory } from "@services/api/products/queryFactory";
import { MAX_PRODUCT_TYPES_DISPLAY } from "@constants/constants";
 
interface MenuListItem {
  name?: string;
  label?: string;
  value: string;
  Icon?: Icon;
  CustomIcon?: JSX.Element;
  isForm?: boolean;
  customOnClick?: () => void;
}
 
type TMenuList = {
  menu: MenuListItem[];
  footer: MenuListItem[];
};
 
type TProductType = {
  ID: number;
  Name: string;
  CreatedAt: number;
  UpdatedAt: number;
};
 
export function useMenu() {
  const { isAcquirer, isEnterprise, isMerchant } = useUser();
  const { isAddProductAllowed } = useProductPermission();
 
  const { isDisputesPageEnabled } = useGetFeatureFlagValues();
  const location = useLocation();
 
  const { data: productTypes } = useGetProductTypesFactory(undefined);
 
  const menuList: TMenuList = React.useMemo(() => {
    Iif (isAcquirer) {
      return getAcquirerMenu({
        isDisputesPageEnabled,
      });
    }
 
    if (isEnterprise) {
      return getProviderMenu();
    }
 
    return getMerchantMenu({
      isAddProductAllowed,
    });
  }, [isAcquirer, isEnterprise, isDisputesPageEnabled, isAddProductAllowed]);
 
  const topMenu: MenuListItem[] = React.useMemo(() => {
    const totalProductTypes = productTypes?.total;
    const productTypesData = productTypes?.data;
 
    let topMenuItems = [];
 
    const existing =
      productTypesData?.map((item: TProductType) => `${item.Name}s`) || [];
 
    // const hideAddFormButton = existing.length > 0 || isLoading;
 
    Iif (
      totalProductTypes === MAX_PRODUCT_TYPES_DISPLAY &&
      productTypesData?.length === MAX_PRODUCT_TYPES_DISPLAY
    ) {
      topMenuItems = menuList.menu;
    }
    topMenuItems = menuList.menu.filter(
      (item: MenuListItem) =>
        !item.isForm ||
        existing.includes(
          item?.name?.toLowerCase() || item?.label?.toLowerCase(),
        ),
    );
 
    // if (hideAddFormButton) {
    //   topMenuItems = topMenuItems.filter((item) => item.value !== "new-form");
    // }
 
    return topMenuItems;
  }, [productTypes?.data, productTypes?.total, menuList.menu]);
 
  return {
    topMenu,
    bottomMenu: menuList.footer,
    isMerchant,
    isEnterprise,
    curPath: location.pathname,
  };
}