@magicbell/magicbell-react
Version:
React components for building a notification inbox for your app
69 lines (68 loc) • 3.73 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = EnablePushNotificationsBanner;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
/** @jsxImportSource @emotion/react */
const react_1 = require("@emotion/react");
const react_headless_1 = require("@magicbell/react-headless");
const ramda_1 = require("ramda");
const MagicBellThemeContext_js_1 = require("../../context/MagicBellThemeContext.js");
const color_js_1 = require("../../lib/color.js");
const use_local_storage_js_1 = require("../../lib/use-local-storage.js");
const window_js_1 = require("../../lib/window.js");
const index_js_1 = tslib_1.__importDefault(require("../Text/index.js"));
const CloseBannerButton_js_1 = tslib_1.__importDefault(require("./CloseBannerButton.js"));
const EnablePushNotificationsButton_js_1 = tslib_1.__importDefault(require("./EnablePushNotificationsButton.js"));
/**
* Banner to ask the user to enable push notifications.
*
* @example
* <EnablePushNotificationsBanner />
*/
function EnablePushNotificationsBanner() {
const { channels } = (0, react_headless_1.useConfig)();
const isWebPushEnabled = (0, ramda_1.pathOr)(false, ['webPush', 'enabled'], channels);
const { apiKey, userEmail, userExternalId } = react_headless_1.clientSettings.getState();
const theme = (0, MagicBellThemeContext_js_1.useTheme)();
const [wasRequested, setRequestedAt] = (0, use_local_storage_js_1.useLocalStorage)(`magicbell:${apiKey}:web-push-requested-at`, null);
const enablePushNotifications = () => {
const subscribeUrl = (0, ramda_1.path)(['webPush', 'config', 'subscribeUrl'], channels);
const { accentColor, backgroundColor, textColor } = theme.dialog;
if (!subscribeUrl)
return;
const url = new URL(subscribeUrl);
if (userEmail)
url.searchParams.set('user_email', userEmail);
if (userExternalId)
url.searchParams.set('user_external_id', userExternalId);
if (accentColor && backgroundColor && textColor) {
url.searchParams.set('background_color', backgroundColor);
url.searchParams.set('text_color', textColor);
url.searchParams.set('accent_color', accentColor);
}
setRequestedAt(Date.now());
(0, window_js_1.openWindow)(url.toString());
};
const closeBanner = () => {
setRequestedAt(Date.now());
};
if (wasRequested || !isWebPushEnabled)
return null;
return ((0, jsx_runtime_1.jsxs)("div", { css: (0, react_1.css) `
padding: 14px 24px !important;
display: flex;
align-items: center;
background: ${(0, color_js_1.toRGBA)(theme.banner.backgroundColor, theme.banner.backgroundOpacity)};
box-shadow: ${theme.banner.boxShadow ? `${theme.banner.boxShadow} !important` : undefined};
color: ${theme.banner.textColor} !important;
font-family: ${theme.banner.fontFamily} !important;
text-align: ${theme.banner.textAlign} !important;
font-size: ${theme.banner.fontSize} !important;
line-height: 1.5 !important;
& > * {
margin-left: 1em;
}
`, children: [(0, jsx_runtime_1.jsx)("p", { style: { flex: 1 }, children: (0, jsx_runtime_1.jsx)(index_js_1.default, { id: "web-push-notifications.notice", defaultMessage: "By enabling browser notifications, you\u2019ll stay up to date even better." }) }), (0, jsx_runtime_1.jsx)(EnablePushNotificationsButton_js_1.default, { onClick: enablePushNotifications }), (0, jsx_runtime_1.jsx)(CloseBannerButton_js_1.default, { onClick: closeBanner })] }));
}
//# sourceMappingURL=EnablePushNotificationsBanner.js.map