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 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 1x 4x 4x 4x 4x 4x 12x | import { memo, useMemo } from "react";
import { Stack, styled } from "@mui/material";
import { useCustomThemeV2 } from "@theme/hooks/useCustomThemeV2";
import useNotifications from "./hooks/useNotifications";
import { useGetCurrentMerchantId } from "@hooks/common";
import NotificationButtonNew from "./UserSection/NotificationsButtonNew";
import { BellIcon } from "@phosphor-icons/react";
import GiveText from "@shared/Text/GiveText";
import NotificationsCenter from "@features/Notifications/NotificationsCenter/NotificationsCenter";
import CounterCircle from "@features/GiveConversation/components/CounterCircle";
import { useAppTheme } from "@theme/v2/Provider";
import { useToggleAnchorEl } from "./useToggleAnchorEl";
import { checkPortals } from "@utils/routing";
import { getCounterVariant } from "@features/GiveConversation/utils";
import useOpenGiveNotification from "@features/GiveNotificationModal/hooks/useOpenGiveNotification";
import { useGetFeatureFlagValues } from "FeatureFlags/useGetFeatureFlagValues";
import { useGetConversationStats } from "@features/GiveConversation/hooks/useManageApi";
import useCheckPAH from "@hooks/common/useCheckPAH";
const UserSectionNew = ({
open,
isAppBar,
}: {
open?: boolean;
isAppBar?: boolean;
}) => {
const { merchantId, isControlMode } = useGetCurrentMerchantId();
const { isMobileView } = useCustomThemeV2();
const { isLoggedInPAH } = useCheckPAH();
const { unreadNotifications, hasMandatoryAlerts } = useNotifications();
const { data: messageStats, isLoading: isStatsLoading } =
useGetConversationStats({
merchantID: merchantId,
});
const totalUnreadMessages = messageStats?.totalUnreadMessagesExternal ?? 0;
const totalUnread = isLoggedInPAH
? totalUnreadMessages + (unreadNotifications || 0)
: unreadNotifications;
const { isNewAcquirerNotificationModalEnabled } = useGetFeatureFlagValues();
const { isAcquirerPortal } = checkPortals();
const { anchorEl, openConv, closeConv } =
useToggleAnchorEl<HTMLButtonElement>();
const { palette } = useAppTheme();
const isNewModal = !isAcquirerPortal || isNewAcquirerNotificationModalEnabled;
const { handleOpenConversation: openNotificationModal, handleClose } =
useOpenGiveNotification();
const handleOpenConversation = (event: React.MouseEvent<any>) => {
Eif (isNewModal) return openNotificationModal();
openConv(event as React.MouseEvent<HTMLButtonElement>);
};
const counterVariant = useMemo(() => {
return getCounterVariant({
isMentioned: hasMandatoryAlerts,
didMerchantReply: isLoggedInPAH ? !!totalUnreadMessages : false,
unreadMessagesCount: totalUnread,
});
}, [hasMandatoryAlerts, totalUnread, isLoggedInPAH]);
Iif (isControlMode) return null;
Eif (open) {
return (
<>
<Container
direction={isAppBar ? "row-reverse" : open ? "row" : "column-reverse"}
gap={isMobileView ? "20px" : "12px"}
alignItems={open ? "center" : "flex-start"}
onClick={handleOpenConversation}
>
<BellIcon size={20} style={{ color: palette.text.secondary }} />
<GiveText color="secondary" variant="bodyS">
Alerts
</GiveText>
<CounterCircle
count={totalUnread}
variant={counterVariant}
size={30}
capped
/>
</Container>
<NotificationsCenter
anchorEl={anchorEl}
onClose={isNewModal ? handleClose : closeConv}
/>
</>
);
}
return (
<NotificationButtonNew
unreadNotifications={unreadNotifications}
hasMandatoryAlerts={hasMandatoryAlerts}
/>
);
};
export default memo(UserSectionNew);
const Container = styled(Stack)(({ theme }) => ({
padding: "12px",
borderRadius: "12px",
"&:hover": {
background: theme.palette.neutral[10],
cursor: "pointer",
color: theme.palette.text.primary,
},
}));
|