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 | 33x 36x 36x 36x 36x 36x 36x 36x 36x 36x 33x 33x | import React, { memo } from "react";
import { styled, useAppTheme } from "@theme/v2/Provider";
import { Stack } from "@mui/material";
import { MerchantData } from "@hooks/enterprise-api/account/types";
import GiveText from "@shared/Text/GiveText";
import GiveTooltip from "@shared/Tooltip/GiveTooltip";
import { replaceKeywords } from "@components/Merchants/MerchantPreview/RiskProfile/helpers/parsers";
import { startCase } from "lodash";
import GiveChip from "@shared/Chip/GiveChip";
import { TRiskLevel } from "@components/Merchants/MerchantPreview/RiskProfile/types";
import { CheckIcon, DetectiveIcon, SirenIcon } from "@phosphor-icons/react";
import { useCustomThemeV2 } from "@theme/hooks/useCustomThemeV2";
const RiskLevelTag = ({
row,
isRiskTabSelected,
}: {
row: MerchantData;
isRiskTabSelected?: boolean;
}) => {
const { palette } = useAppTheme();
const { isWideView } = useCustomThemeV2();
const {
riskLevelLabel,
riskStatusDisplayName,
lastRiskActivityDescription,
lastRiskActivityName,
} = row || {};
const riskStatusName = riskStatusDisplayName || "routine_monitoring";
const risk = riskLevelLabel || "low";
const Icon = config[riskStatusName].icon;
const showActivityTip = lastRiskActivityName || lastRiskActivityDescription;
return (
<Container>
{isRiskTabSelected && (
<GiveTooltip
title={config[riskStatusName].tip}
placement="top"
color="default"
>
<Icon
data-testid="give-risk-icon"
size={18}
color={palette.text.tertiary}
/>
</GiveTooltip>
)}
<GiveTooltip
title={
<Stack>
<GiveText variant="bodyS" fontWeight="medium" color="default">
{replaceKeywords(startCase(lastRiskActivityName))}
</GiveText>
<GiveText variant="bodyS" color="default">
{lastRiskActivityDescription}
</GiveText>
</Stack>
}
disableFocusListener={!showActivityTip}
disableHoverListener={!showActivityTip}
disableTouchListener={!showActivityTip}
placement={isWideView ? "top-end" : "top"}
color="default"
>
<GiveChip
variant="light"
size="large"
label={startCase(risk)}
color={colors[risk]}
sx={{ width: "86px", height: "26px", fontSize: 12 }}
/>
</GiveTooltip>
</Container>
);
};
export default memo(RiskLevelTag);
const Container = styled(Stack)(({ theme }) => ({
flexDirection: "row",
alignItems: "center",
gap: "8px",
[theme.breakpoints.down("v2_sm")]: {
width: "106px",
marginLeft: "16px",
},
}));
const config = {
routine_monitoring: { tip: "Routine monitoring", icon: CheckIcon },
alerted: { tip: "Alerted", icon: SirenIcon },
active_monitoring: { tip: "Active monitoring", icon: DetectiveIcon },
};
const colors: Record<TRiskLevel, "warning2" | "success" | "warning" | "error"> =
{
low: "success",
medium: "warning",
high: "warning2",
critical: "error",
};
|