@magicbell/magicbell-react
Version:
React components for building a notification inbox for your app
40 lines • 3.89 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = NotificationsView;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
/** @jsxImportSource @emotion/react */
const react_headless_1 = require("@magicbell/react-headless");
const ramda_1 = require("ramda");
const react_1 = require("react");
const TranslationsContext_js_1 = require("../../../context/TranslationsContext.js");
const index_js_1 = tslib_1.__importDefault(require("../../EnablePushNotificationsBanner/index.js"));
const index_js_2 = tslib_1.__importDefault(require("../../Footer/index.js"));
const HeaderTabs_js_1 = tslib_1.__importDefault(require("../../Header/HeaderTabs.js"));
const index_js_3 = tslib_1.__importDefault(require("../../Header/index.js"));
const IconButton_js_1 = tslib_1.__importDefault(require("../../IconButton/IconButton.js"));
const CheckMarkIcon_js_1 = tslib_1.__importDefault(require("../../icons/CheckMarkIcon.js"));
const SettingsIcon_js_1 = tslib_1.__importDefault(require("../../icons/SettingsIcon.js"));
const index_js_4 = tslib_1.__importDefault(require("../../Text/index.js"));
const ClearInboxMessage_js_1 = tslib_1.__importDefault(require("../ClearInboxMessage.js"));
const Layout_js_1 = tslib_1.__importDefault(require("../Layout.js"));
const NotificationInboxContent_js_1 = tslib_1.__importDefault(require("../NotificationInboxContent.js"));
function NotificationsView({ layout, storeId, onNotificationClick, onAllRead, notificationPreferencesEnabled, NotificationItem, EmptyInboxPlaceholder = ClearInboxMessage_js_1.default, setView, tabs: tabsConfig, }) {
const t = (0, TranslationsContext_js_1.useTranslate)();
const config = (0, react_headless_1.useConfig)();
const [activeStore, setActiveStore] = (0, react_1.useState)(storeId || tabsConfig?.[0].storeId);
const store = (0, react_headless_1.useNotifications)(activeStore);
if (!store)
return null;
const hasNotifications = !store.isEmpty;
const showPreferencesButton = notificationPreferencesEnabled ?? (0, ramda_1.pathOr)(true, ['features', 'notificationPreferences', 'enabled'], config.inbox);
const handleMarkAllAsRead = () => {
store?.markAllAsRead();
onAllRead?.();
};
const showTabs = tabsConfig && activeStore;
const tabs = showTabs ? ((0, jsx_runtime_1.jsx)(HeaderTabs_js_1.default, { activeTab: activeStore, onChange: setActiveStore, tabsConfig: tabsConfig })) : null;
const title = (0, jsx_runtime_1.jsx)(index_js_4.default, { id: "header.title", defaultMessage: "Notifications" });
return ((0, jsx_runtime_1.jsxs)(Layout_js_1.default, { order: layout, children: [(0, jsx_runtime_1.jsx)(index_js_3.default, { title: showTabs ? tabs : title, actions: (0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [hasNotifications ? ((0, jsx_runtime_1.jsx)(IconButton_js_1.default, { onClick: handleMarkAllAsRead, "aria-label": t('header.mark-all-read', 'Mark all read'), children: (0, jsx_runtime_1.jsx)(CheckMarkIcon_js_1.default, {}) })) : null, showPreferencesButton ? ((0, jsx_runtime_1.jsx)(IconButton_js_1.default, { onClick: () => setView('preferences'), "aria-label": t('preferences.toggle', 'Notification preferences'), children: (0, jsx_runtime_1.jsx)(SettingsIcon_js_1.default, {}) })) : null] }) }, "header"), (0, jsx_runtime_1.jsx)("div", { css: { flex: 1, overflowY: 'hidden' }, children: !store.lastFetchedAt ? null : hasNotifications ? ((0, jsx_runtime_1.jsx)(NotificationInboxContent_js_1.default, { store: store, onNotificationClick: onNotificationClick, NotificationItem: NotificationItem })) : ((0, jsx_runtime_1.jsx)(EmptyInboxPlaceholder, {})) }, "content"), (0, jsx_runtime_1.jsx)(index_js_1.default, {}, "push-notifications-banner"), (0, jsx_runtime_1.jsx)(index_js_2.default, {}, "footer")] }));
}
//# sourceMappingURL=NotificationsView.js.map