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 | 62x 62x 62x 62x 62x 14x 62x 62x 62x 62x 62x 62x 62x 62x 44x 62x 124x 62x 434x 194x 62x 21x | import { useEnterprisePermissions } from "@components/AcquirerEnterprises/CreateEnterprise/hooks/useEnterprisePermissions";
import React, { useEffect } from "react";
import { Box } from "@mui/material";
import { useMerchantSidePanelContext } from "../Provider/MerchantSidePanelProvider";
import GiveDisclaimer from "./GiveDisclaimer/GiveDisclaimer";
import MerchantInformationSection from "./MerchantInformationSection";
import UnderwriterRiskAnalystAssignCard from "./UnderwriterRiskAnalystAssignCard/UnderwriterRiskAnalystAssignCard";
import ApprovalAccountOverview from "../ApprovalFlowPanel/components/AccountOverview/ApprovalAccountOverview";
import GiveMerchantSectionsContainer, {
TMerchantDataFields,
} from "@features/Merchants/MerchantSidePanel/components/GiveMerchantSectionsContainer";
import RiskSummarySection from "@features/Merchants/MerchantSidePanel/components/RiskSection/RiskSummarySection";
import { checkPortals } from "@utils/routing";
import { MerchantRiskTabEnum } from "../ApprovalFlowPanel/types";
import RiskActivities from "./RiskTab/RiskActivity/RiskActivities";
import RiskTransactionsTab from "./RiskTransactions/RiskTransactionsTab";
import RiskTriggersTab from "./RiskTriggers/RiskTriggersTab";
import { styled, useAppTheme } from "@theme/v2/Provider";
import StatusOverviewSections from "./AccountStatusOverviewSection/components/StatusOverviewSections";
import { CardContainer } from "@features/Underwriting/UnderwritingCard/UnderwritingCard.style";
function RiskPanelBody() {
const {
data,
isOnboardingView,
selectedRiskTab,
isLoadingUnderwriting,
setIsLoadingUnderwriting,
} = useMerchantSidePanelContext();
const { palette } = useAppTheme();
const { isEnterprisePortal } = checkPortals();
const { risk_monitoring } = useEnterprisePermissions();
useEffect(() => {
if (isLoadingUnderwriting) setIsLoadingUnderwriting(false);
}, [isLoadingUnderwriting]);
const isRiskSummaryHidden = isEnterprisePortal && !risk_monitoring;
const isOnApprovalDelay = data?.status.isOnApprovalDelay;
const isOverview = selectedRiskTab === MerchantRiskTabEnum.OVERVIEW;
const isActivity = selectedRiskTab === MerchantRiskTabEnum.ACTIVITY;
const isTransactions = selectedRiskTab === MerchantRiskTabEnum.TRANSACTIONS;
const isTriggers = selectedRiskTab === MerchantRiskTabEnum.TRIGGERS;
const stickyComponents = [
{
component: <GiveDisclaimer disclaimerType="approval_delay" />,
hide: !isOnApprovalDelay,
},
{
component: <ApprovalAccountOverview />,
},
];
const scrollableComponents = [
{
component: (
<CardContainer backgroundColor={palette.surface?.primary}>
<StatusOverviewSections flexEndHistory />
</CardContainer>
),
hide: !isOverview,
},
{
component: <MerchantInformationSection />,
hide: !isOverview,
},
{
component: (
<GiveMerchantSectionsContainer>
{(props: TMerchantDataFields) => <RiskSummarySection {...props} />}
</GiveMerchantSectionsContainer>
),
hide: isRiskSummaryHidden || !isOverview,
},
{
component: (
<UnderwriterRiskAnalystAssignCard
type={
isOnboardingView
? "Assignee"
: ["approved", "suspended"].includes(data?.status?.statusName)
? "Risk Analyst"
: "Underwriter"
}
/>
),
hide: !isOverview,
},
{
component: (
<NegativeOffsetWrapper>
<RiskActivities />
</NegativeOffsetWrapper>
),
hide: !isActivity,
},
{
component: (
<NegativeOffsetWrapper>
<RiskTransactionsTab />
</NegativeOffsetWrapper>
),
hide: !isTransactions,
},
{
component: (
<NegativeOffsetWrapper>
<RiskTriggersTab />
</NegativeOffsetWrapper>
),
hide: !isTriggers,
},
];
return (
<>
{/* Sticky sections */}
<StickyWrapper>
{stickyComponents.map(({ component, hide }, i) => {
if (hide) return null;
return <React.Fragment key={i}>{component}</React.Fragment>;
})}
</StickyWrapper>
{/* Scrollable content */}
{scrollableComponents.map(({ component, hide }, i) => {
if (hide) return null;
return <React.Fragment key={i}>{component}</React.Fragment>;
})}
</>
);
}
const StickyWrapper = styled(Box)(({ theme }) => ({
position: "sticky",
top: 0,
zIndex: 10,
paddingTop: "20px",
backgroundColor: theme.palette.surface?.secondary,
}));
//we need this to avoid style change for the root panel wraper
//this spaceing is required only for this tabs
const NegativeOffsetWrapper = styled(Box)({
display: "flex",
flexDirection: "column",
flex: 1,
minHeight: 0,
marginTop: "-12px",
});
export default RiskPanelBody;
|