diff --git a/apps/app/components/issues/sidebar.tsx b/apps/app/components/issues/sidebar.tsx index 2ccccea16..19d56baa1 100644 --- a/apps/app/components/issues/sidebar.tsx +++ b/apps/app/components/issues/sidebar.tsx @@ -34,7 +34,7 @@ import { SidebarEstimateSelect, } from "components/issues"; // ui -import { Input, Spinner, CustomDatePicker } from "components/ui"; +import { Input, Spinner, CustomDatePicker, Icon } from "components/ui"; // icons import { TagIcon, @@ -293,16 +293,19 @@ export const IssueDetailsSidebar: React.FC = ({ {issueDetail?.project_detail?.identifier}-{issueDetail?.sequence_id}
- + {(fieldsToShow.includes("all") || fieldsToShow.includes("link")) && ( + + )} {(fieldsToShow.includes("all") || fieldsToShow.includes("link")) && ( ))}
diff --git a/apps/app/components/notifications/notification-popover.tsx b/apps/app/components/notifications/notification-popover.tsx index 334a3acda..fb79b5a5d 100644 --- a/apps/app/components/notifications/notification-popover.tsx +++ b/apps/app/components/notifications/notification-popover.tsx @@ -4,23 +4,14 @@ import Image from "next/image"; // hooks import useTheme from "hooks/use-theme"; -// icons -import { - XMarkIcon, - ArchiveIcon, - ClockIcon, - SortIcon, - BellNotificationIcon, -} from "components/icons"; import { Popover, Transition, Menu } from "@headlessui/react"; -import { ArrowLeftIcon } from "@heroicons/react/20/solid"; // hooks import useUserNotification from "hooks/use-user-notifications"; // components -import { Spinner } from "components/ui"; +import { Spinner, Icon } from "components/ui"; import { SnoozeNotificationModal, NotificationCard } from "components/notifications"; // type @@ -60,6 +51,7 @@ export const NotificationPopover = () => { notificationsMutate, markNotificationArchivedStatus, markNotificationReadStatus, + markSnoozeNotification, } = useUserNotification(); // theme context @@ -70,7 +62,12 @@ export const NotificationPopover = () => { setSelectedNotificationForSnooze(null)} - notificationId={selectedNotificationForSnooze} + onSubmit={markSnoozeNotification} + notification={ + notifications?.find( + (notification) => notification.id === selectedNotificationForSnooze + ) || null + } onSuccess={() => { notificationsMutate(); setSelectedNotificationForSnooze(null); @@ -80,26 +77,13 @@ export const NotificationPopover = () => { {({ open: isActive, close: closePopover }) => ( <> - - + {sidebarCollapse ? null : Notifications} { Notifications
+
@@ -166,7 +163,7 @@ export const NotificationPopover = () => { }} >

- + {snoozed ? "Snoozed Notifications" @@ -202,7 +199,9 @@ export const NotificationPopover = () => {
{notifications ? ( - notifications.length > 0 ? ( + notifications.filter( + (notification) => notification.data.issue_activity.field !== "None" + ).length > 0 ? ( notifications.map((notification) => ( { markNotificationArchivedStatus={markNotificationArchivedStatus} markNotificationReadStatus={markNotificationReadStatus} setSelectedNotificationForSnooze={setSelectedNotificationForSnooze} + markSnoozeNotification={markSnoozeNotification} /> )) ) : ( diff --git a/apps/app/components/notifications/select-snooze-till-modal.tsx b/apps/app/components/notifications/select-snooze-till-modal.tsx index 4d50ebf6f..7bd78862b 100644 --- a/apps/app/components/notifications/select-snooze-till-modal.tsx +++ b/apps/app/components/notifications/select-snooze-till-modal.tsx @@ -7,35 +7,37 @@ import { useRouter } from "next/router"; import { useForm, Controller } from "react-hook-form"; import { Transition, Dialog, Listbox } from "@headlessui/react"; -import { ChevronDownIcon, CheckIcon } from "@heroicons/react/20/solid"; // date helper import { getDatesAfterCurrentDate, getTimestampAfterCurrentTime } from "helpers/date-time.helper"; -// services -import userNotificationServices from "services/notifications.service"; - // hooks import useToast from "hooks/use-toast"; // components -import { PrimaryButton, SecondaryButton } from "components/ui"; +import { PrimaryButton, SecondaryButton, Icon } from "components/ui"; -// icons -import { XMarkIcon } from "components/icons"; +// types +import type { IUserNotification } from "types"; type SnoozeModalProps = { isOpen: boolean; onClose: () => void; onSuccess: () => void; - notificationId: string | null; + notification: IUserNotification | null; + onSubmit: (notificationId: string, dateTime?: Date | undefined) => Promise; }; const dates = getDatesAfterCurrentDate(); const timeStamps = getTimestampAfterCurrentTime(); +const defaultValues = { + time: null, + date: null, +}; + export const SnoozeNotificationModal: React.FC = (props) => { - const { isOpen, onClose, notificationId, onSuccess } = props; + const { isOpen, onClose, notification, onSuccess, onSubmit: handleSubmitSnooze } = props; const router = useRouter(); const { workspaceSlug } = router.query; @@ -47,28 +49,26 @@ export const SnoozeNotificationModal: React.FC = (props) => { reset, handleSubmit, control, - } = useForm(); + } = useForm({ + defaultValues, + }); const onSubmit = async (formData: any) => { - if (!workspaceSlug || !notificationId) return; + if (!workspaceSlug || !notification) return; const dateTime = new Date( `${formData.date.toLocaleDateString()} ${formData.time.toLocaleTimeString()}` ); - await userNotificationServices - .patchUserNotification(workspaceSlug.toString(), notificationId, { - snoozed_till: dateTime, - }) - .then(() => { - onClose(); - onSuccess(); - setToastAlert({ - title: "Notification snoozed", - message: "Notification snoozed successfully", - type: "success", - }); + await handleSubmitSnooze(notification.id, dateTime).then(() => { + onClose(); + onSuccess(); + setToastAlert({ + title: "Notification snoozed", + message: "Notification snoozed successfully", + type: "success", }); + }); }; const handleClose = () => { @@ -91,7 +91,7 @@ export const SnoozeNotificationModal: React.FC = (props) => { leaveFrom="opacity-100" leaveTo="opacity-0" > -
+
@@ -117,7 +117,7 @@ export const SnoozeNotificationModal: React.FC = (props) => {
@@ -133,18 +133,21 @@ export const SnoozeNotificationModal: React.FC = (props) => { {({ open }) => ( <>
- + - {value?.toLocaleTimeString([], { - hour: "2-digit", - minute: "2-digit", - }) || "Select Time"} + {value + ? new Date(value)?.toLocaleTimeString([], { + hour: "2-digit", + minute: "2-digit", + }) + : "Select Time"} - @@ -157,14 +160,14 @@ export const SnoozeNotificationModal: React.FC = (props) => { leaveFrom="opacity-100" leaveTo="opacity-0" > - + {timeStamps.map((time, index) => ( `relative cursor-default select-none py-2 pl-3 pr-9 ${ active - ? "bg-custom-primary-100 text-custom-text-100" + ? "bg-custom-primary-100/80 text-custom-text-100" : "text-custom-text-700" }` } @@ -190,7 +193,8 @@ export const SnoozeNotificationModal: React.FC = (props) => { : "text-custom-primary-100" }`} > -