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 | 32x 32x 32x 32x 32x 32x 32x 32x 32x 1x 32x 64x | import { RiskTriggerTitles } from "@components/Merchants/MerchantPreview/RiskProfile/constants";
import { TRiskTFactor } from "@components/Merchants/MerchantPreview/RiskProfile/types";
import { ConversationMenu } from "@features/GiveConversation/components/ConversationMenu";
import { getCounterVariant } from "@features/GiveConversation/utils";
import { CardContainer } from "@features/Underwriting/UnderwritingCard/UnderwritingCard.style";
import { Box, Stack } from "@mui/material";
import GiveChip from "@shared/Chip/GiveChip";
import GiveSwitch from "@shared/Switch/GiveSwitch";
import GiveText from "@shared/Text/GiveText";
import { useAppTheme } from "@theme/v2/Provider";
import { useMerchantSidePanelContext } from "@features/Merchants/MerchantSidePanel/Provider/MerchantSidePanelProvider";
import NiceModal from "@ebay/nice-modal-react";
import { GIVE_TOGGLE_RISK_TRIGGER_MODAL } from "modals/modal_names";
import { ChangeEvent } from "react";
import {
formatSSN,
parseTaxID,
} from "@features/Merchants/MerchantSidePanel/GiveMerchantFile/hooks/helpers";
export default function TriggerCard({ trigger }: { trigger: TRiskTFactor }) {
const { palette } = useAppTheme();
const {
data: { riskProfile, merchantInfo, businessProfile },
id,
} = useMerchantSidePanelContext();
const { merchantName, imageURL } = merchantInfo || {};
const { tinType, taxID, legalName } = businessProfile || {};
const {
name,
description,
isEnabled,
riskPoints,
factorID,
isMentioned,
hasMerchantReplied,
unreadMessagesCount,
threadID,
userAvatarsInThread,
} = trigger || {};
const triggerTitle = RiskTriggerTitles[name] || name;
const pointsLabel = `${riskPoints} ${riskPoints > 1 ? "points" : "point"}`;
const conversationMenuProps = {
merchantData: {
imageURL: imageURL,
name: merchantName,
id: id,
},
images: userAvatarsInThread?.map((item) => item.avatarURL),
messageCount: unreadMessagesCount,
counterVariant: getCounterVariant({
isMentioned: !!isMentioned,
didMerchantReply: !!hasMerchantReplied,
unreadMessagesCount: unreadMessagesCount,
}),
initialThreadID: threadID || factorID,
threadName: triggerTitle,
factorID: factorID,
isRiskTrigger: true,
};
const handleChange = (
event: ChangeEvent<HTMLInputElement>,
checked: boolean,
) => {
NiceModal.show(GIVE_TOGGLE_RISK_TRIGGER_MODAL, {
isEnabled,
factorID,
profileId: riskProfile?.profileID,
merchantId: id,
triggerTitle,
triggerDescription: description,
points: riskPoints,
merchantName: merchantName,
merchantProfileImage: imageURL,
conversationMenuProps: conversationMenuProps,
merchantLegalName: legalName,
taxID: tinType === "ssn" ? formatSSN(taxID) : parseTaxID(taxID),
});
};
return (
<CardContainer
data-testid={`trigger-card-${trigger.factorID}`}
backgroundColor={palette.surface?.primary}
gap="12px"
>
<Row>
<GiveText variant="bodyS">{triggerTitle}</GiveText>
<GiveSwitch
data-testid={`trigger-toggle-${trigger.factorID}`}
checked={isEnabled}
onChange={handleChange}
/>
</Row>
<Box
bgcolor={palette.primitive?.transparent["darken-5"]}
borderRadius="8px"
p="12px 16px"
>
<GiveText fontSize="14px">{description}</GiveText>
</Box>
<Row>
<GiveChip label={pointsLabel} size="small" />
<ConversationMenu
{...conversationMenuProps}
containerWidth="fluid"
showAvatarsOnMobile
/>
</Row>
</CardContainer>
);
}
function Row({ children }: { children: React.ReactNode }) {
return (
<Stack
direction="row"
alignItems="center"
justifyContent="space-between"
width="100%"
>
{children}
</Stack>
);
}
|