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 | 12x | import { useToggleAnchorEl } from "../useToggleAnchorEl";
import NotificationsCenter from "features/Notifications/NotificationsCenter/NotificationsCenter";
import GiveIconButton from "@shared/IconButton/GiveIconButton";
import { BellIcon } from "@phosphor-icons/react";
import { CustomBadgeNew } from "componentsV2/Table/MainInfoImageNew";
import CounterCircle from "@features/GiveConversation/components/CounterCircle";
import { getCounterVariant } from "@features/GiveConversation/utils";
import { checkPortals } from "@utils/routing";
import useOpenGiveNotification from "@features/GiveNotificationModal/hooks/useOpenGiveNotification";
import { useGetFeatureFlagValues } from "FeatureFlags/useGetFeatureFlagValues";
import { useMemo } from "react";
import useCheckPAH from "@hooks/common/useCheckPAH";
import { useGetConversationStats } from "@features/GiveConversation/hooks/useManageApi";
import { useGetCurrentMerchantId } from "@hooks/common";
const NotificationButtonNew = ({
unreadNotifications,
hasMandatoryAlerts,
}: {
unreadNotifications: number;
hasMandatoryAlerts: boolean;
}) => {
const { merchantId } = useGetCurrentMerchantId();
const { isAcquirerPortal } = checkPortals();
const { isNewAcquirerNotificationModalEnabled } = useGetFeatureFlagValues();
const { isLoggedInPAH } = useCheckPAH();
const { data: messageStats } = useGetConversationStats({
merchantID: merchantId,
});
const totalUnreadMessages = messageStats?.totalUnreadMessagesExternal ?? 0;
const totalUnread = isLoggedInPAH
? totalUnreadMessages + (unreadNotifications || 0)
: unreadNotifications;
const { anchorEl, openConv, closeConv } =
useToggleAnchorEl<HTMLButtonElement>();
const isNewModal = !isAcquirerPortal || isNewAcquirerNotificationModalEnabled;
const { handleOpenConversation: openNotificationModal, handleClose } =
useOpenGiveNotification();
const handleClick = (e: any) => {
if (isNewModal) return openNotificationModal();
openConv(e);
};
const counterVariant = useMemo(() => {
return getCounterVariant({
isMentioned: hasMandatoryAlerts,
didMerchantReply: isLoggedInPAH ? !!totalUnreadMessages : false,
unreadMessagesCount: totalUnread,
});
}, [hasMandatoryAlerts, totalUnread, isLoggedInPAH]);
return (
<>
<CustomBadgeNew
overlap="circular"
badgeContent={
<CounterCircle
count={totalUnread}
variant={counterVariant}
size={20}
capped
/>
}
>
<GiveIconButton variant="ghost" Icon={BellIcon} onClick={handleClick} />
</CustomBadgeNew>
<NotificationsCenter
anchorEl={anchorEl}
onClose={isNewModal ? handleClose : closeConv}
/>
</>
);
};
export default NotificationButtonNew;
|