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 | 33x 1004x 1004x 1004x 1004x 1004x 1004x 1004x 33x 1004x 33x 1004x | import { TAG_STATUSES_ENUM } from "@common/TextTag/types";
import GiveChip, { TChipColors } from "@shared/Chip/GiveChip";
import GiveTooltip from "@shared/Tooltip/GiveTooltip";
import { styled } from "@theme/v2/Provider";
import moment from "moment";
import { PLATFORM_TIMEZONE } from "@utils/timezones";
type Props = {
disableTooltip?: boolean;
statusDisplayName: string;
updatedAt?: number | null;
updatedBy?: string;
};
const StatusTag = ({
statusDisplayName,
updatedAt = null,
updatedBy = "",
disableTooltip,
}: Props) => {
const statusTag = colorsMap[statusDisplayName];
const color = 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 (
<GiveTooltip
title={`${tooltipContent} ${dateParser(updatedAt)}`}
placement="top"
disableHoverListener={!isTooltipEnabled || disableTooltip}
color="default"
alignment="start"
>
<StyledChip color={color} label={label} size="large" variant="light" />
</GiveTooltip>
);
};
export default StatusTag;
const dateParser = (date?: number | null) =>
date ? ` on ${moment.unix(date).tz(PLATFORM_TIMEZONE).format("LL")}` : "";
const colorsMap: Record<string, TChipColors> = {
[TAG_STATUSES_ENUM.APPROVED]: "success",
[TAG_STATUSES_ENUM.UNDERWRITING]: "blue",
[TAG_STATUSES_ENUM.SUSPENDED]: "warning",
[TAG_STATUSES_ENUM.DECLINED]: "error",
[TAG_STATUSES_ENUM.INVITE]: "default",
[TAG_STATUSES_ENUM.PENDING]: "default",
[TAG_STATUSES_ENUM.READY_FOR_REVIEW]: "warning",
[TAG_STATUSES_ENUM.SPONSOR]: "warning",
[TAG_STATUSES_ENUM.IN_PROGRESS]: "warning",
[TAG_STATUSES_ENUM.DELIVERED]: "default",
[TAG_STATUSES_ENUM.UNDELIVERABLE]: "error",
[TAG_STATUSES_ENUM.ONBOARDING]: "default",
[TAG_STATUSES_ENUM.KYB]: "purple",
[TAG_STATUSES_ENUM.EXPIRED]: "default",
[TAG_STATUSES_ENUM.CLOSED]: "error",
};
const StyledChip = styled(GiveChip)(({ theme }) => ({
width: "135px",
height: "26px",
fontSize: "12px",
[theme.breakpoints.up("v2_sm")]: {
minWidth: "135px",
},
[theme.breakpoints.down("v2_sm")]: {
width: "106px",
marginLeft: "8px",
},
}));
|