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 | 441x 440x 440x 440x 440x 440x 440x 440x 440x 440x 440x 440x 21x 21x 440x | import { SxProps } from "@mui/material";
import MainHeader from "./components/MainHeader/MainHeader";
import { SidePanelBodyWrapper } from "@shared/SidePanel/SidePanelAtoms";
import PanelLoadingSkeleton from "./components/PanelLoadingSkeleton";
import RiskActivityFooter from "./components/RiskTab/RiskActivity/RiskActivityFooter";
import TasksFooter from "./ApprovalFlowPanel/components/TasksFooter";
import { useMerchantSidePanelContext } from "./Provider/MerchantSidePanelProvider";
import useGetPanelContent from "./hooks/useGetPanelContent";
import { useEnterprisePermissions } from "@components/AcquirerEnterprises/CreateEnterprise/hooks/useEnterprisePermissions";
import { checkPortals } from "@utils/routing";
import { useUnderwriterPermissions } from "@features/Permissions/AccessControl/hooks";
import { useGetFeatureFlagValues } from "FeatureFlags/useGetFeatureFlagValues";
import { MerchantRiskTabEnum } from "./ApprovalFlowPanel/types";
export default function FirstPanelContent() {
const {
status,
isLoading,
isLoadingUnderwriting,
data,
isUnderwritingView,
isSponsorView,
isSponsorTab,
tabName,
isKYBView,
staticApprovalType,
isPendingView,
isPendingTab,
isProvider,
isRiskView,
selectedRiskTab,
} = useMerchantSidePanelContext();
const { merchant_underwriting } = useEnterprisePermissions();
const { isEnterprisePortal } = checkPortals();
const { isUpdateUnderwriterAllowed } = useUnderwriterPermissions();
const { isNewApprovalFlowEnabled } = useGetFeatureFlagValues();
const { panelBody, skeletonVariant } = useGetPanelContent(
status,
isProvider,
isRiskView,
isPendingTab,
);
const isSponsorInProviderPortal = isEnterprisePortal && isSponsorView;
const showFromTab =
(isUnderwritingView || isSponsorTab || isKYBView) &&
!isSponsorInProviderPortal;
// 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 showTasksFooter =
showFromTab &&
isNewApprovalFlowEnabled &&
!isLoading &&
!["declined", "suspended", "closed"].includes(data?.status?.statusName) &&
!isHide;
const showRiskActivityFooter =
isRiskView && selectedRiskTab === MerchantRiskTabEnum.ACTIVITY;
return (
<>
<MainHeader />
<PanelBody
isLoading={isLoading}
isLoadingUnderwriting={isLoadingUnderwriting}
skeletonVariant={skeletonVariant as any}
panelBody={panelBody}
sidePanelBodyWrapperSx={{
...sidePanelBodyWrapperSx,
...(isRiskView && { paddingTop: 0 }),
}}
/>
{showTasksFooter && (
<TasksFooter
data={data}
tabName={tabName}
staticApprovalType={staticApprovalType}
/>
)}
{showRiskActivityFooter && <RiskActivityFooter />}
</>
);
}
const sidePanelBodyWrapperSx = {
padding: "20px",
// @TODO change padding to prevent underwriting progress bar from being overflowed -> padding: "20px 10px",
gap: "32px",
display: "flex",
flexDirection: "column",
flex: 1,
};
interface PanelBodyProps {
isLoading: boolean;
isLoadingUnderwriting: boolean;
skeletonVariant?:
| "default"
| "underwriting"
| "invite_sent"
| "merchant_file";
panelBody: React.ReactNode;
sidePanelBodyWrapperSx: SxProps;
}
const PanelBody = ({
isLoading,
skeletonVariant,
panelBody,
sidePanelBodyWrapperSx,
isLoadingUnderwriting,
}: PanelBodyProps) => {
return (
<>
{(isLoading || isLoadingUnderwriting) && (
<SidePanelBodyWrapper sx={sidePanelBodyWrapperSx}>
<PanelLoadingSkeleton variant={skeletonVariant} />
</SidePanelBodyWrapper>
)}
{!isLoading && (
<SidePanelBodyWrapper
sx={{
...sidePanelBodyWrapperSx,
...(isLoadingUnderwriting && { display: "none" }),
}}
>
{panelBody}
</SidePanelBodyWrapper>
)}
</>
);
};
|