plane/apps/app/components/notifications/notification-card.tsx

import React from "react";

import Image from "next/image";
import { useRouter } from "next/router";

// hooks
import useToast from "hooks/use-toast";

// icons
import { CustomMenu, Icon, Tooltip } from "components/ui";

// helper
import { stripHTML, replaceUnderscoreIfSnakeCase } 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;
  markNotificationReadStatus: (notificationId: string) => Promise<void>;
  markNotificationArchivedStatus: (notificationId: string) => Promise<void>;
  setSelectedNotificationForSnooze: (notificationId: string) => void;
  markSnoozeNotification: (notificationId: string, dateTime?: Date | undefined) => Promise<void>;
};

const snoozeOptions = [
  {
    label: "1 days",
    value: new Date(new Date().getTime() + 24 * 60 * 60 * 1000),
  },
  {
    label: "3 days",
    value: new Date(new Date().getTime() + 3 * 24 * 60 * 60 * 1000),
  },
  {
    label: "5 days",
    value: new Date(new Date().getTime() + 5 * 24 * 60 * 60 * 1000),
  },
  {
    label: "1 week",
    value: new Date(new Date().getTime() + 7 * 24 * 60 * 60 * 1000),
  },
  {
    label: "2 weeks",
    value: new Date(new Date().getTime() + 14 * 24 * 60 * 60 * 1000),
  },
  {
    label: "Custom",
    value: null,
  },
];

export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
  const {
    notification,
    markNotificationReadStatus,
    markNotificationArchivedStatus,
    setSelectedNotificationForSnooze,
    markSnoozeNotification,
  } = props;

  const router = useRouter();
  const { workspaceSlug } = router.query;

  const { setToastAlert } = useToast();

  return (
    <div
      onClick={() => {
        markNotificationReadStatus(notification.id);
        router.push(
          `/${workspaceSlug}/projects/${notification.project}/issues/${notification.data.issue.id}`
        );
      }}
      className={`group relative py-3 px-6 cursor-pointer ${
        notification.read_at === null ? "bg-custom-primary-70/5" : "hover:bg-custom-background-200"
      }`}
    >
      {notification.read_at === null && (
        <span className="absolute top-1/2 left-2 -translate-y-1/2 w-1.5 h-1.5 bg-custom-primary-100 rounded-full" />
      )}
      <div className="flex items-center gap-4 w-full">
        <div className="relative w-12 h-12 rounded-full">
          {notification.triggered_by_details.avatar &&
          notification.triggered_by_details.avatar !== "" ? (
            <Image
              src={notification.triggered_by_details.avatar}
              alt="profile image"
              layout="fill"
              objectFit="cover"
              className="rounded-full"
            />
          ) : (
            <div className="w-12 h-12 bg-custom-background-100 rounded-full flex justify-center items-center">
              <span className="text-custom-text-100 font-medium text-lg">
                {notification.triggered_by_details.first_name[0].toUpperCase()}
              </span>
            </div>
          )}
        </div>
        <div className="w-full space-y-2.5">
          <div className="text-sm">
            <span className="font-semibold">
              {notification.triggered_by_details.first_name}{" "}
              {notification.triggered_by_details.last_name}{" "}
            </span>
            {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"
              : ""}
            <span className="font-semibold">
              {" "}
              {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"
                  ) : stripHTML(notification.data.issue_activity.new_value).length > 55 ? (
                    stripHTML(notification.data.issue_activity.new_value).slice(0, 50) + "..."
                  ) : (
                    stripHTML(notification.data.issue_activity.new_value)
                  )
                ) : (
                  <span>
                    {`"`}
                    {notification.data.issue_activity.new_value.length > 55
                      ? notification?.data?.issue_activity?.issue_comment?.slice(0, 50) + "..."
                      : notification.data.issue_activity.issue_comment}
                    {`"`}
                  </span>
                )
              ) : (
                "the issue and assigned it to you."
              )}
            </span>
          </div>

          <div className="w-full flex justify-between text-xs">
            <p className="truncate inline max-w-lg text-custom-text-300 mr-3">
              {notification.data.issue.identifier}-{notification.data.issue.sequence_id}{" "}
              {notification.data.issue.name}
            </p>
            {notification.snoozed_till ? (
              <p className="text-custom-text-300 flex items-center gap-x-1">
                <Icon iconName="schedule" />
                <span>
                  Till {renderShortDate(notification.snoozed_till)},{" "}
                  {render12HourFormatTime(notification.snoozed_till)}
                </span>
              </p>
            ) : (
              <p className="text-custom-text-300">{formatDateDistance(notification.created_at)}</p>
            )}
          </div>
        </div>
      </div>

      <div className="absolute py-1 gap-x-3 right-3 top-3 hidden group-hover:flex">
        {[
          {
            id: 1,
            name: notification.read_at ? "Mark as Unread" : "Mark as Read",
            icon: "chat_bubble",
            onClick: () => {
              markNotificationReadStatus(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 Notification" : "Archive Notification",
            icon: "archive",
            onClick: () => {
              markNotificationArchivedStatus(notification.id).then(() => {
                setToastAlert({
                  title: notification.archived_at
                    ? "Notification un-archived"
                    : "Notification archived",
                  type: "success",
                });
              });
            },
          },
        ].map((item) => (
          <Tooltip tooltipContent={item.name} position="top-left">
            <button
              type="button"
              onClick={(e) => {
                e.stopPropagation();
                item.onClick();
              }}
              key={item.id}
              className="text-sm flex w-full items-center gap-x-2 bg-custom-background-80 hover:bg-custom-background-100 p-0.5 rounded"
            >
              <Icon iconName={item.icon} className="h-5 w-5 text-custom-text-300" />
            </button>
          </Tooltip>
        ))}

        <Tooltip tooltipContent="Snooze Notification" position="top-left">
          <CustomMenu
            menuButtonOnClick={(e) => {
              e.stopPropagation();
            }}
            customButton={
              <button
                type="button"
                className="text-sm flex w-full items-center gap-x-2 bg-custom-background-80 hover:bg-custom-background-100 p-0.5 rounded"
              >
                <Icon iconName="schedule" className="h-5 w-5 text-custom-text-300" />
              </button>
            }
            optionsClassName="!z-20"
          >
            {snoozeOptions.map((item) => (
              <CustomMenu.MenuItem
                key={item.label}
                renderAs="button"
                onClick={(e) => {
                  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}
              </CustomMenu.MenuItem>
            ))}
          </CustomMenu>
        </Tooltip>
      </div>
    </div>
  );
};