@magicbell/magicbell-react
Version:
React components for building a notification inbox for your app
36 lines • 2.92 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
/** @jsxImportSource @emotion/react */
import { useConfig, useNotifications } from '@magicbell/react-headless';
import { pathOr } from 'ramda';
import { Fragment, useState } from 'react';
import { useTranslate } from '../../../context/TranslationsContext.js';
import EnablePushNotificationsBanner from '../../EnablePushNotificationsBanner/index.js';
import Footer from '../../Footer/index.js';
import HeaderTabs from '../../Header/HeaderTabs.js';
import Header from '../../Header/index.js';
import IconButton from '../../IconButton/IconButton.js';
import CheckMarkIcon from '../../icons/CheckMarkIcon.js';
import SettingsIcon from '../../icons/SettingsIcon.js';
import Text from '../../Text/index.js';
import ClearInboxMessage from '../ClearInboxMessage.js';
import Layout from '../Layout.js';
import NotificationInboxContent from '../NotificationInboxContent.js';
export default function NotificationsView({ layout, storeId, onNotificationClick, onAllRead, notificationPreferencesEnabled, NotificationItem, EmptyInboxPlaceholder = ClearInboxMessage, setView, tabs: tabsConfig, }) {
const t = useTranslate();
const config = useConfig();
const [activeStore, setActiveStore] = useState(storeId || tabsConfig?.[0].storeId);
const store = useNotifications(activeStore);
if (!store)
return null;
const hasNotifications = !store.isEmpty;
const showPreferencesButton = notificationPreferencesEnabled ?? pathOr(true, ['features', 'notificationPreferences', 'enabled'], config.inbox);
const handleMarkAllAsRead = () => {
store?.markAllAsRead();
onAllRead?.();
};
const showTabs = tabsConfig && activeStore;
const tabs = showTabs ? (_jsx(HeaderTabs, { activeTab: activeStore, onChange: setActiveStore, tabsConfig: tabsConfig })) : null;
const title = _jsx(Text, { id: "header.title", defaultMessage: "Notifications" });
return (_jsxs(Layout, { order: layout, children: [_jsx(Header, { title: showTabs ? tabs : title, actions: _jsxs(Fragment, { children: [hasNotifications ? (_jsx(IconButton, { onClick: handleMarkAllAsRead, "aria-label": t('header.mark-all-read', 'Mark all read'), children: _jsx(CheckMarkIcon, {}) })) : null, showPreferencesButton ? (_jsx(IconButton, { onClick: () => setView('preferences'), "aria-label": t('preferences.toggle', 'Notification preferences'), children: _jsx(SettingsIcon, {}) })) : null] }) }, "header"), _jsx("div", { css: { flex: 1, overflowY: 'hidden' }, children: !store.lastFetchedAt ? null : hasNotifications ? (_jsx(NotificationInboxContent, { store: store, onNotificationClick: onNotificationClick, NotificationItem: NotificationItem })) : (_jsx(EmptyInboxPlaceholder, {})) }, "content"), _jsx(EnablePushNotificationsBanner, {}, "push-notifications-banner"), _jsx(Footer, {}, "footer")] }));
}
//# sourceMappingURL=NotificationsView.js.map