import React, { useEffect, useRef } from "react"; import Image from "next/image"; import { useRouter } from "next/router"; import Link from "next/link"; import { Menu } from "@headlessui/react"; import { ArchiveRestore, Clock, MessageSquare, MoreVertical, User2 } from "lucide-react"; // hooks import useToast from "hooks/use-toast"; import { useEventTracker } from "hooks/store"; // icons import { ArchiveIcon, CustomMenu, Tooltip } from "@plane/ui"; // constants import { snoozeOptions } from "constants/notification"; // helper import { replaceUnderscoreIfSnakeCase, truncateText, stripAndTruncateHTML } from "helpers/string.helper"; import { calculateTimeAgo, renderFormattedTime, renderFormattedDate } from "helpers/date-time.helper"; // type import type { IUserNotification, NotificationType } from "@plane/types"; // constants import { ISSUE_OPENED, NOTIFICATIONS_READ, NOTIFICATION_ARCHIVED, NOTIFICATION_SNOOZED } from "constants/event-tracker"; type NotificationCardProps = { selectedTab: NotificationType; notification: IUserNotification; isSnoozedTabOpen: boolean; closePopover: () => void; 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 { selectedTab, notification, isSnoozedTabOpen, closePopover, markNotificationReadStatus, markNotificationReadStatusToggle, markNotificationArchivedStatus, setSelectedNotificationForSnooze, markSnoozeNotification, } = props; // store hooks const { captureEvent } = useEventTracker(); const router = useRouter(); const { workspaceSlug } = router.query; // states const [showSnoozeOptions, setshowSnoozeOptions] = React.useState(false); // toast alert const { setToastAlert } = useToast(); // refs const snoozeRef = useRef(null); const moreOptions = [ { 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 read" : "Notification marked as unread", 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", }); }); }, }, ]; const snoozeOptionOnClick = (date: Date | null) => { if (!date) { setSelectedNotificationForSnooze(notification.id); return; } markSnoozeNotification(notification.id, date).then(() => { setToastAlert({ title: `Notification snoozed till ${renderFormattedDate(date)}`, type: "success", }); }); }; // close snooze options on outside click useEffect(() => { const handleClickOutside = (event: any) => { if (snoozeRef.current && !snoozeRef.current?.contains(event.target)) { setshowSnoozeOptions(false); } }; document.addEventListener("mousedown", handleClickOutside, true); document.addEventListener("touchend", handleClickOutside, true); return () => { document.removeEventListener("mousedown", handleClickOutside, true); document.removeEventListener("touchend", handleClickOutside, true); }; }, []); if (isSnoozedTabOpen && new Date(notification.snoozed_till!) < new Date()) return null; return ( { markNotificationReadStatus(notification.id); captureEvent(ISSUE_OPENED, { issue_id: notification.data.issue.id, element: "notification", }); closePopover(); }} href={`/${workspaceSlug}/projects/${notification.project}/${ notification.data.issue_activity.field === "archived_at" ? "archived-issues" : "issues" }/${notification.data.issue.id}`} className={`group relative flex w-full cursor-pointer items-center gap-4 p-3 pl-6 ${ 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" ? ( renderFormattedDate(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}
)}
{({ open }) => ( <> {open && (
{moreOptions.map((item) => ( {({ close }) => ( )} ))}
{ e.stopPropagation(); e.preventDefault(); setshowSnoozeOptions(true); }} className="flex gap-x-2 items-center p-1.5" > Snooze
)} )}
{showSnoozeOptions && (
{snoozeOptions.map((item) => (

{ e.stopPropagation(); e.preventDefault(); setshowSnoozeOptions(false); snoozeOptionOnClick(item.value); }} > {item.label}

))}
)}

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

{notification.snoozed_till ? (

Till {renderFormattedDate(notification.snoozed_till)},{" "} {renderFormattedTime(notification.snoozed_till, "12-hour")}

) : (

{calculateTimeAgo(notification.created_at)}

)}
{[ { id: 1, name: notification.read_at ? "Mark as unread" : "Mark as read", icon: , onClick: () => { markNotificationReadStatusToggle(notification.id).then(() => { captureEvent(NOTIFICATIONS_READ, { issue_id: notification.data.issue.id, tab: selectedTab, state: "SUCCESS", }); setToastAlert({ title: notification.read_at ? "Notification marked as read" : "Notification marked as unread", type: "success", }); }); }, }, { id: 2, name: notification.archived_at ? "Unarchive" : "Archive", icon: notification.archived_at ? ( ) : ( ), onClick: () => { markNotificationArchivedStatus(notification.id).then(() => { captureEvent(NOTIFICATION_ARCHIVED, { issue_id: notification.data.issue.id, tab: selectedTab, state: "SUCCESS", }); setToastAlert({ title: notification.archived_at ? "Notification un-archived" : "Notification archived", type: "success", }); }); }, }, ].map((item) => ( ))}
} optionsClassName="!z-20" > {snoozeOptions.map((item) => ( { e.stopPropagation(); e.preventDefault(); if (!item.value) { setSelectedNotificationForSnooze(notification.id); return; } markSnoozeNotification(notification.id, item.value).then(() => { captureEvent(NOTIFICATION_SNOOZED, { issue_id: notification.data.issue.id, tab: selectedTab, state: "SUCCESS", }); setToastAlert({ title: `Notification snoozed till ${renderFormattedDate(item.value)}`, type: "success", }); }); }} > {item.label} ))} ); };