All files / src/features/Merchants/MerchantSidePanel NewPanel.tsx

90% Statements 27/30
68.96% Branches 40/58
100% Functions 3/3
89.28% Lines 25/28

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 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161                                          21x 577x                           566x 566x 566x 566x 566x 566x   566x       566x       566x     566x         566x   566x     566x       566x                           566x 566x 551x       566x 566x 54x           54x       512x     566x                                                                                                                  
import { useCustomThemeV2 } from "@theme/hooks/useCustomThemeV2";
import { useMerchantSidePanelContext } from "./Provider/MerchantSidePanelProvider";
import SecondPanelOptions from "./SecondPanelOptions";
import { SidePanelContainerWrapper } from "@shared/SidePanel/SidePanelAtoms";
import { useGetGlobalTopics } from "features/Minibuilders/Conversations/hooks/useConversationsModal";
import Conversations from "./WithRepository/Challenges/Conversations";
import { useEnterprisePermissions } from "@components/AcquirerEnterprises/CreateEnterprise/hooks/useEnterprisePermissions";
import { checkPortals } from "@utils/routing";
import CollapseNavigation from "./components/Collapse1stLevel/CollapseNavigation";
import useGetContentDetails from "./hooks/useGetContentDetails";
import GiveSidePanel, {
  MIN_ALLOWED_SCREEN_SIZE_FOR_DOUBLE_PANELS,
  NEW_BASE_PANEL_WIDTH,
} from "@shared/SidePanel/GiveSidePanel";
import { useGetFeatureFlagValues } from "FeatureFlags/useGetFeatureFlagValues";
import GiveMerchantFile from "./GiveMerchantFile/GiveMerchantFile";
import { useUnderwriterPermissions } from "@features/Permissions/AccessControl/hooks";
import { useConversationPermission } from "@features/GiveConversation/hooks/useConversationaPermission";
import { CUSTOM_SECOND_PANEL_WIDTH } from "./constants";
import FirstPanelContent from "./FirstPanelContent";
 
const NewPanel = () => {
  useGetGlobalTopics();
  const {
    open,
    onClose,
    renderButton,
    contentHistory,
    firstPanelContent,
    secondPanelContent,
    isLoading,
    merchant,
    isSinglePanelSize,
    data,
    isPendingView,
    isProvider,
  } = useMerchantSidePanelContext();
  const { isMobileView } = useCustomThemeV2();
  const { contentDetails } = useGetContentDetails();
  const { merchant_underwriting } = useEnterprisePermissions();
  const { isEnterprisePortal } = checkPortals();
  const { isUpdateUnderwriterAllowed } = useUnderwriterPermissions();
  const { isMerchantOnboardingModalEnabled, isNewConversationsEnabled } =
    useGetFeatureFlagValues();
 
  // We are hiding the buttons if merchant_underwriting is false and we are in enterprise portal or pending merchant
  const isHide =
    (!merchant_underwriting && isEnterprisePortal) ||
    isPendingView ||
    !isUpdateUnderwriterAllowed;
 
  const { hasAccessToViewConversation } = useConversationPermission();
 
  const showCollapseNavigation =
    !isMobileView &&
    ((isSinglePanelSize && !!secondPanelContent) ||
      contentHistory !== "" ||
      firstPanelContent !== "");
 
  const isFirstPanelHidden = contentHistory !== "" && firstPanelContent === "";
  const isSinglePanelOnly =
    isMobileView ||
    window.innerWidth < MIN_ALLOWED_SCREEN_SIZE_FOR_DOUBLE_PANELS;
 
  const isDoublePanelMode = isFirstPanelHidden
    ? false
    : !!secondPanelContent && !isSinglePanelOnly;
 
  Iif (
    isMerchantOnboardingModalEnabled &&
    !data?.merchantInfo?.isOnboardingCompleted &&
    !isPendingView &&
    data?.status?.statusName === "onboarding" &&
    (data.invitation.inviteSent ? data.invitation.emailIsVerified : true)
  ) {
    return (
      <GiveSidePanel open={open} onClose={onClose}>
        <GiveMerchantFile handleClosePanel={onClose} />
      </GiveSidePanel>
    );
  }
 
  const showConvButton = (() => {
    if (isEnterprisePortal && !merchant_underwriting) return false;
    Eif (!isNewConversationsEnabled) return true;
    return !isMobileView && hasAccessToViewConversation;
  })();
 
  const navOffset = (() => {
    if (secondPanelContent) {
      Iif (isDoublePanelMode)
        return (
          (CUSTOM_SECOND_PANEL_WIDTH[secondPanelContent] ||
            NEW_BASE_PANEL_WIDTH) + NEW_BASE_PANEL_WIDTH
        );
      else
        return (
          CUSTOM_SECOND_PANEL_WIDTH[secondPanelContent] || NEW_BASE_PANEL_WIDTH
        );
    }
    return NEW_BASE_PANEL_WIDTH;
  })();
 
  return (
    <>
      <GiveSidePanel
        open={open}
        onClose={onClose}
        secondPanel={<SecondPanelOptions />}
        isSecondPanelOpen={!!secondPanelContent}
        secondPanelWidth={
          secondPanelContent
            ? CUSTOM_SECOND_PANEL_WIDTH[secondPanelContent]
            : undefined
        }
        isFirstPannelHidden={isFirstPanelHidden}
        floatingContent={
          <>
            {showCollapseNavigation && (
              <CollapseNavigation
                show={showCollapseNavigation}
                image={merchant?.imageURL ? `${merchant?.imageURL}/thumb` : ""}
                placeholderType={isProvider ? "provider" : "merchant"}
                navigationOffSet={navOffset}
              />
            )}
            {showConvButton && (
              <GiveSidePanel.Button
                renderButton={renderButton}
                el="conversations"
              />
            )}
            {!isHide && (
              <GiveSidePanel.Button
                renderButton={renderButton}
                el="changelog"
              />
            )}
          </>
        }
      >
        <SidePanelContainerWrapper>
          {firstPanelContent !== "" ? contentDetails : <FirstPanelContent />}
        </SidePanelContainerWrapper>
      </GiveSidePanel>
      {!isNewConversationsEnabled && (
        <Conversations
          merchant={merchant}
          isLoading={isLoading}
          // handleOpenManageUnderwriting={handlers?.handleOpenManageUnderwriting}
          isLoadingChangelog={isLoading}
          isOpenParent={open}
          // shouldShowChangelog={isChangelogEnabled && merchant && showChangelog}
        />
      )}
    </>
  );
};
 
export default NewPanel;