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 | 21x 80x 80x 80x 80x 80x 80x 80x 80x 1x 80x 80x | import { Stack, Box } from "@mui/material";
import GiveChip from "@shared/Chip/GiveChip";
import GiveText from "@shared/Text/GiveText";
import { styled } from "@theme/v2/Provider";
import { ConversationMenu } from "@features/GiveConversation/components/ConversationMenu";
import { getCounterVariant } from "@features/GiveConversation/utils";
import { TRiskActivity } from "@components/Merchants/MerchantPreview/RiskProfile/types";
import { useMerchantSidePanelContext } from "@features/Merchants/MerchantSidePanel/Provider/MerchantSidePanelProvider";
import { useCustomThemeV2 } from "@theme/hooks/useCustomThemeV2";
import NiceModal from "@ebay/nice-modal-react";
import { GIVE_RISK_TRIGGER_MODAL } from "modals/modal_names";
import {
getPointsText,
TitleIcon,
} from "@components/Merchants/MerchantPreview/modals/GiveRiskTriggerModal/ModalComponents";
type Props = {
activity: TRiskActivity;
};
const RiskActivityCard = ({ activity }: Props) => {
const { isMobileView } = useCustomThemeV2();
const {
data: { merchantInfo, businessProfile },
id: merchantId,
} = useMerchantSidePanelContext();
const { merchantName, imageURL } = merchantInfo || {};
const { taxID, legalName } = businessProfile || {};
const {
isIgnored,
merchantFactorRiskPoints,
unreadMessagesCount,
isMentioned,
didMerchantReply,
internalThreadID,
merchantFactorName,
userAvatarsInThread,
id,
} = activity || {};
const pointsLabel = getPointsText(merchantFactorRiskPoints);
const conversationMenuProps = {
merchantData: {
imageURL: imageURL,
name: merchantName,
id: merchantId,
},
messageCount: unreadMessagesCount,
counterVariant: getCounterVariant({
isMentioned: !!isMentioned,
didMerchantReply: !!didMerchantReply,
unreadMessagesCount: unreadMessagesCount,
}),
initialThreadID: internalThreadID,
threadName: merchantFactorName,
riskTriggerID: id,
images: userAvatarsInThread?.map((item) => item.avatarURL),
};
const handleOpenTriggerModal = () => {
NiceModal.show(GIVE_RISK_TRIGGER_MODAL, {
merchantId,
data: activity,
conversationMenuProps,
merchantData: {
imageURL: imageURL,
name: merchantName,
legalName,
taxID,
},
});
};
return (
<RiskActivityItemContainer
data-testid={`activity-list-element-${activity.id}`}
onClick={handleOpenTriggerModal}
>
<Stack direction="row" spacing={1} alignItems="center">
<TitleIcon isIgnored={isIgnored} />
<Stack spacing={0.5}>
<GiveText variant="bodyS">{merchantFactorName}</GiveText>
{isMobileView && (
<GiveText color="secondary" variant="bodyS">
{pointsLabel}
</GiveText>
)}
</Stack>
</Stack>
<Stack direction="row" spacing={1} alignItems="center">
<ConversationMenu
{...conversationMenuProps}
isRiskTrigger
containerWidth="fluid"
/>
{!isMobileView && <GiveChip label={pointsLabel} size="small" />}
</Stack>
</RiskActivityItemContainer>
);
};
const RiskActivityItemContainer = styled(Box)(({ theme }) => ({
display: "flex",
alignItems: "center",
justifyContent: "space-between",
borderRadius: "8px",
padding: "4px 6px",
cursor: "pointer",
"&:hover": {
backgroundColor: theme.palette.primitive?.transparent["darken-2"],
},
}));
export default RiskActivityCard;
|