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 | import { Box, BoxProps, styled } from "@mui/material";
import { ITextProps, Text } from "@common/Text/Text";
import { palette } from "@palette";
import { Tooltip } from "@common/Tooltip";
import moment from "moment";
import { PLATFORM_TIMEZONE } from "@utils/timezones";
import { TAG_STATUSES_ENUM } from "@common/TextTag/types";
interface TextTagProps extends BoxProps {
textProps?: ITextProps;
disableTooltip?: boolean;
statusDisplayName: string;
updatedAt?: number | null;
updatedBy?: string;
}
const TextTag = styled<React.FC<TextTagProps>>(function ({
textProps,
statusDisplayName,
updatedAt = null,
updatedBy = "",
disableTooltip,
...rest
}) {
const statusTag = colorsMap[statusDisplayName];
const { color, backgroundColor } =
statusTag || colorsMap[TAG_STATUSES_ENUM.APPROVED];
const label = statusTag ? statusDisplayName : TAG_STATUSES_ENUM.APPROVED;
const isInviteStatus = statusDisplayName === TAG_STATUSES_ENUM.INVITE;
const isTooltipEnabled = isInviteStatus
? !!updatedAt
: !!updatedAt && !!updatedBy?.trim();
const tooltipContent = isInviteStatus
? "Invitation sent"
: `${statusDisplayName} by: ${updatedBy?.trim()}`;
return (
<Box {...rest} width="100%">
<Tooltip
title={`${tooltipContent} ${dateParser(updatedAt)}`}
placement="top"
disableHoverListener={!isTooltipEnabled || disableTooltip}
>
<StyledText
sx={{
paddingY: "4px",
color,
backgroundColor,
width: "100%",
}}
{...textProps}
>
{label}
</StyledText>
</Tooltip>
</Box>
);
})(() => ({
minWidth: "94px",
}));
export default TextTag;
const dateParser = (date?: number | null) =>
date ? ` on ${moment.unix(date).tz(PLATFORM_TIMEZONE).format("LL")}` : "";
const colorsMap: Record<string, { color: string; backgroundColor: string }> = {
[TAG_STATUSES_ENUM.APPROVED]: {
color: palette.filled.success,
backgroundColor: palette.tag.success.bg,
},
[TAG_STATUSES_ENUM.UNDERWRITING]: {
color: palette.info.main,
backgroundColor: palette.info.light,
},
[TAG_STATUSES_ENUM.SUSPENDED]: {
color: palette.tag.warning.hover,
backgroundColor: palette.tag.warning.bg,
},
[TAG_STATUSES_ENUM.DECLINED]: {
color: palette.tag.error.hover,
backgroundColor: palette.tag.error.bg,
},
[TAG_STATUSES_ENUM.INVITE]: {
color: palette.neutral[80],
backgroundColor: palette.neutral[10],
},
[TAG_STATUSES_ENUM.PENDING]: {
color: palette.neutral[80],
backgroundColor: palette.neutral[10],
},
[TAG_STATUSES_ENUM.READY_FOR_REVIEW]: {
color: palette.tag.warning.hover,
backgroundColor: palette.tag.warning.bg,
},
[TAG_STATUSES_ENUM.IN_PROGRESS]: {
color: palette.filled?.orange,
backgroundColor: palette.tag.warning.bg,
},
[TAG_STATUSES_ENUM.DELIVERED]: {
color: palette.neutral[80],
backgroundColor: palette.neutral[10],
},
[TAG_STATUSES_ENUM.UNDELIVERABLE]: {
color: palette.error.hover,
backgroundColor: palette.tag.error.bg,
},
};
const StyledText = styled(Text)(() => ({
textAlign: "center",
userSelect: "none",
padding: "2px 16px",
fontSize: "12px",
lineHeight: "14.4px",
borderRadius: "50px",
}));
|