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 | 21x 862x 862x 862x 862x 862x 862x 862x 862x 5x 5x 862x 2x 862x 862x 862x 21x 2607x 862x | import { Stack } from "@mui/material";
import ActionButtons from "./components/ActionButtons";
import { styled, useAppTheme } from "@theme/v2/Provider";
import CardIcon from "./components/CardIcon";
import GiveTruncateText from "@shared/Text/GiveTruncateText";
import { FlagIcon } from "@phosphor-icons/react";
import { TUnderwritingTask } from "@features/Merchants/MerchantSidePanel/ApprovalFlowPanel/types";
import { useSingleTaskActions } from "@features/Merchants/MerchantSidePanel/ApprovalFlowPanel/hooks/useSingleTaskActions";
import SingleTaskMenu from "./components/SingleTaskMenu";
import React, { useState } from "react";
import { checkPortals } from "@utils/routing";
import { useEnterprisePermissions } from "@components/AcquirerEnterprises/CreateEnterprise/hooks/useEnterprisePermissions";
import { IParsedData } from "@components/Merchants/MerchantPreview/data.types";
import { Box } from "@mui/material";
import { getTaskName } from "@features/Merchants/MerchantSidePanel/ApprovalFlowPanel/utils";
interface ITaskItemCard {
taskData: TUnderwritingTask;
merchantData: IParsedData;
}
import { StyledStackProps } from "./types";
const TaskItemCard = ({ taskData, merchantData }: ITaskItemCard) => {
const { palette } = useAppTheme();
const { requestAttention, status } = taskData;
const { handleOpenTask } = useSingleTaskActions({
taskData,
shouldUpdateModal: true,
merchantData,
});
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
const { merchant_underwriting } = useEnterprisePermissions();
const { isEnterprisePortal } = checkPortals();
const isHidden = isEnterprisePortal && !merchant_underwriting;
const onOpenMenu = (event: React.MouseEvent<HTMLElement>) => {
event?.stopPropagation();
setAnchorEl(event.currentTarget);
};
const onCloseMenu = () => {
setAnchorEl(null);
};
const handleOpenPreview = (e: React.MouseEvent) => {
e?.stopPropagation();
if (isHidden) return;
handleOpenTask();
};
const taskName = getTaskName(taskData);
return (
<>
<StyledStack onClick={handleOpenPreview} isHidden={isHidden}>
<Stack direction="row" alignItems="center" gap={1}>
<Box minWidth={24} height={24}>
<CardIcon status={status} />
</Box>
<GiveTruncateText
lineClamp={1}
variant="bodyS"
sx={{
wordBreak: "break-all",
}}
>
{taskName}
</GiveTruncateText>
{requestAttention && (
<Box minWidth={16} height={16}>
<FlagIcon fill={palette?.primitive?.error?.[100]} />
</Box>
)}
</Stack>
<ActionButtons
taskData={taskData}
onOpenMenu={onOpenMenu}
isHidden={isHidden}
merchantData={merchantData}
/>
</StyledStack>
<SingleTaskMenu
taskData={taskData}
merchantData={merchantData}
anchorEl={anchorEl}
onCloseMenu={onCloseMenu}
/>
</>
);
};
const StyledStack = styled(Stack, {
shouldForwardProp: (prop) => prop !== "isHidden",
})<StyledStackProps>(({ theme, isHidden }) => ({
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
width: "100%",
overflow: "hidden",
gap: "8px",
paddingBlock: "4px",
WebkitTapHighlightColor: "transparent",
"&:hover": {
cursor: isHidden ? "default" : "pointer",
backgroundColor: theme.palette.primitive?.transparent?.["darken-2"],
borderRadius: theme.spacing(1),
},
"&:active": {
backgroundColor: "transparent",
},
}));
export default TaskItemCard;
|