import React from "react"; import Image from "next/image"; import { useRouter } from "next/router"; import { ArchiveRestore, Clock, MessageSquare, User2 } from "lucide-react"; // hooks import useToast from "hooks/use-toast"; // icons import { ArchiveIcon, CustomMenu, Tooltip } from "@plane/ui"; // constants import { snoozeOptions } from "constants/notification"; // helper import { replaceUnderscoreIfSnakeCase, truncateText, stripAndTruncateHTML } from "helpers/string.helper"; import { formatDateDistance, render12HourFormatTime, renderLongDateFormat, renderShortDate, renderShortDateWithYearFormat, } from "helpers/date-time.helper"; // type import type { IUserNotification } from "types"; type NotificationCardProps = { notification: IUserNotification; isSnoozedTabOpen: boolean; markNotificationReadStatus: (notificationId: string) => Promise; markNotificationReadStatusToggle: (notificationId: string) => Promise; markNotificationArchivedStatus: (notificationId: string) => Promise; setSelectedNotificationForSnooze: (notificationId: string) => void; markSnoozeNotification: (notificationId: string, dateTime?: Date | undefined) => Promise; }; export const NotificationCard: React.FC = (props) => { const { notification, isSnoozedTabOpen, markNotificationReadStatus, markNotificationReadStatusToggle, markNotificationArchivedStatus, setSelectedNotificationForSnooze, markSnoozeNotification, } = props; const router = useRouter(); const { workspaceSlug } = router.query; const { setToastAlert } = useToast(); if (isSnoozedTabOpen && new Date(notification.snoozed_till!) < new Date()) return null; return (
{ markNotificationReadStatus(notification.id); router.push( `/${workspaceSlug}/projects/${notification.project}/${ notification.data.issue_activity.field === "archived_at" ? "archived-issues" : "issues" }/${notification.data.issue.id}` ); }} className={`group w-full flex items-center gap-4 p-3 pl-6 relative cursor-pointer ${ notification.read_at === null ? "bg-custom-primary-70/5" : "hover:bg-custom-background-200" }`} > {notification.read_at === null && ( )}
{notification.triggered_by_details.avatar && notification.triggered_by_details.avatar !== "" ? (
Profile Image
) : (
{notification.triggered_by_details.is_bot ? ( notification.triggered_by_details.first_name?.[0]?.toUpperCase() ) : notification.triggered_by_details.display_name?.[0] ? ( notification.triggered_by_details.display_name?.[0]?.toUpperCase() ) : ( )}
)}
{!notification.message ? (
{notification.triggered_by_details.is_bot ? notification.triggered_by_details.first_name : notification.triggered_by_details.display_name}{" "} {notification.data.issue_activity.field !== "comment" && notification.data.issue_activity.verb}{" "} {notification.data.issue_activity.field === "comment" ? "commented" : notification.data.issue_activity.field === "None" ? null : replaceUnderscoreIfSnakeCase(notification.data.issue_activity.field)}{" "} {notification.data.issue_activity.field !== "comment" && notification.data.issue_activity.field !== "None" ? "to" : ""} {" "} {notification.data.issue_activity.field !== "None" ? ( notification.data.issue_activity.field !== "comment" ? ( notification.data.issue_activity.field === "target_date" ? ( renderShortDateWithYearFormat(notification.data.issue_activity.new_value) ) : notification.data.issue_activity.field === "attachment" ? ( "the issue" ) : notification.data.issue_activity.field === "description" ? ( stripAndTruncateHTML(notification.data.issue_activity.new_value, 55) ) : ( notification.data.issue_activity.new_value ) ) : ( {`"`} {notification.data.issue_activity.new_value.length > 55 ? notification?.data?.issue_activity?.issue_comment?.slice(0, 50) + "..." : notification.data.issue_activity.issue_comment} {`"`} ) ) : ( "the issue and assigned it to you." )}
) : (
{notification.message}
)}

{truncateText( `${notification.data.issue.identifier}-${notification.data.issue.sequence_id} ${notification.data.issue.name}`, 50 )}

{notification.snoozed_till ? (

Till {renderShortDate(notification.snoozed_till)}, {render12HourFormatTime(notification.snoozed_till)}

) : (

{formatDateDistance(notification.created_at)}

)}
{[ { id: 1, name: notification.read_at ? "Mark as unread" : "Mark as read", icon: , onClick: () => { markNotificationReadStatusToggle(notification.id).then(() => { setToastAlert({ title: notification.read_at ? "Notification marked as unread" : "Notification marked as read", type: "success", }); }); }, }, { id: 2, name: notification.archived_at ? "Unarchive" : "Archive", icon: notification.archived_at ? ( ) : ( ), onClick: () => { markNotificationArchivedStatus(notification.id).then(() => { setToastAlert({ title: notification.archived_at ? "Notification un-archived" : "Notification archived", type: "success", }); }); }, }, ].map((item) => ( ))} void }) => { e.stopPropagation(); }} customButton={
} optionsClassName="!z-20" > {snoozeOptions.map((item) => ( { e.stopPropagation(); if (!item.value) { setSelectedNotificationForSnooze(notification.id); return; } markSnoozeNotification(notification.id, item.value).then(() => { setToastAlert({ title: `Notification snoozed till ${renderLongDateFormat(item.value)}`, type: "success", }); }); }} > {item.label} ))}
); };