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 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 | 12x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 2x 8x 12x 52x 8x | import { useMemo, useState } from "react";
import { Badge } from "@mui/material";
import NotificationsCenter from "features/Notifications/NotificationsCenter/NotificationsCenter";
import GiveIconButton from "@shared/IconButton/GiveIconButton";
import { BellIcon } from "@phosphor-icons/react";
import { styled } from "@theme/v2/Provider";
import { useGetFeatureFlagValues } from "FeatureFlags/useGetFeatureFlagValues";
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 useCheckPAH from "@hooks/common/useCheckPAH";
import { useGetConversationStats } from "@features/GiveConversation/hooks/useManageApi";
import { useGetCurrentMerchantId } from "@hooks/common";
const NotificationButton = ({
unreadNotifications,
hasMandatoryAlerts,
}: {
unreadNotifications: number;
hasMandatoryAlerts: boolean;
}) => {
const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
const { isNewConversationsEnabled, isNewAcquirerNotificationModalEnabled } =
useGetFeatureFlagValues();
const { merchantId } = useGetCurrentMerchantId();
const { isAcquirerPortal } = checkPortals();
const { isLoggedInPAH } = useCheckPAH();
const { data: messageStats } = useGetConversationStats({
merchantID: merchantId,
});
const totalUnreadMessages = messageStats?.totalUnreadMessagesExternal ?? 0;
const totalUnread = isLoggedInPAH
? totalUnreadMessages + (unreadNotifications || 0)
: unreadNotifications;
const isNewModal = !isAcquirerPortal || isNewAcquirerNotificationModalEnabled;
const { handleOpenConversation } = useOpenGiveNotification();
const closeNotificationsCenter = () => setAnchorEl(null);
const openNotificationsCenter = (
event: React.MouseEvent<HTMLButtonElement>,
) => {
if (isNewModal) {
return handleOpenConversation();
}
if (anchorEl) {
closeNotificationsCenter();
} else {
setAnchorEl(event.currentTarget);
}
};
const counterVariant = useMemo(() => {
return getCounterVariant({
isMentioned: hasMandatoryAlerts,
didMerchantReply: isLoggedInPAH ? !!totalUnreadMessages : false,
unreadMessagesCount: totalUnread,
});
}, [hasMandatoryAlerts, totalUnread, isLoggedInPAH]);
return (
<>
<BellBadge
badgeContent={
isNewConversationsEnabled ? (
<CounterCircle
count={totalUnread}
variant={counterVariant}
size={20}
capped
/>
) : (
unreadNotifications
)
}
hasMandatoryAlerts={hasMandatoryAlerts}
isNewConversationEnabled={isNewConversationsEnabled}
max={9999}
>
<GiveIconButton
variant="ghost"
Icon={BellIcon}
onClick={openNotificationsCenter}
/>
</BellBadge>
<NotificationsCenter
anchorEl={anchorEl}
onClose={closeNotificationsCenter}
/>
</>
);
};
export default NotificationButton;
const BellBadge = styled(Badge, {
shouldForwardProp: (prop) =>
prop !== "hasMandatoryAlerts" && prop !== "isNewConversationEnabled",
})<{ hasMandatoryAlerts?: boolean; isNewConversationEnabled?: boolean }>(
({ theme, hasMandatoryAlerts, isNewConversationEnabled }) => ({
...(!isNewConversationEnabled && {
"& .MuiBadge-badge": {
backgroundColor: hasMandatoryAlerts
? theme.palette.primitive?.warning[50]
: theme.palette?.primitive?.blue[50],
color: theme.palette?.primitive?.neutral[0],
},
}),
}),
);
|