@magicbell/magicbell-react
Version:
React components for building a notification inbox for your app
74 lines • 3.85 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = MagicBellProvider;
const tslib_1 = require("tslib");
const react_headless_1 = require("@magicbell/react-headless");
const react_1 = tslib_1.__importStar(require("react"));
const CurrentProviderContext_js_1 = tslib_1.__importDefault(require("../../context/CurrentProviderContext.js"));
const MagicBellContext_js_1 = tslib_1.__importDefault(require("../../context/MagicBellContext.js"));
const MagicBellThemeContext_js_1 = require("../../context/MagicBellThemeContext.js");
const TranslationsContext_js_1 = require("../../context/TranslationsContext.js");
const i18n_js_1 = require("../../lib/i18n.js");
const pkg_js_1 = require("../../lib/pkg.js");
const internals = {
appInfo: {
name: pkg_js_1.pkg.name,
version: pkg_js_1.pkg.version,
},
};
/**
* Provider component for Magicbell.
*
* @param props.apiKey API key of the MagicBell project
* @param props.userEmail Email of the user whose notifications will be displayed
* @param props.userExternalId External ID of the user whose notifications will be displayed
* @param props.userKey Computed HMAC of the user whose notifications will be displayed, compute this with the secret of the magicbell project
* @param props.theme Object to customize the theme
* @param props.stores List of stores to be created
* @param props.locale Locale to use in the components
* @param props.disableRealtime Disable realtime updates
*
* @example
* ```javascript
* <MagicBellProvider apiKey={MAGICBELL_API_KEY} userEmail={email}>
* <App />
* </MagicBellProvider>
* ```
*/
function MagicBellProvider({ children, theme, images, locale, ...settings }) {
return (
// provide private props like this, so it's not part of the public api,
// still can be overridden by the embeddable, and consumed by headless
react_1.default.createElement(react_headless_1.MagicBellProvider, { ...internals, ...settings },
react_1.default.createElement(SettingsProviders, { ...settings, theme: theme, images: images, locale: locale }, children)));
}
function SettingsProviders({ children, theme, locale, images, ...props }) {
const needsRemoteConfig = !theme || !locale || !images;
const [config, setConfig] = (0, react_1.useState)({});
const [isFetchingConfig, setIsFetchingConfig] = (0, react_1.useState)(needsRemoteConfig);
(0, react_1.useEffect)(() => {
// Don't fetch remote theme config if all overrides are provided via props
if (!needsRemoteConfig)
return;
const client = react_headless_1.clientSettings.getState().getClient();
client
.request({
method: 'POST',
path: '/integrations/inbox/installations/start',
})
.then((response) => {
if (!('inbox' in response))
return;
setConfig(response.inbox);
})
.catch(() => void 0)
.finally(() => setIsFetchingConfig(false));
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [needsRemoteConfig, props.apiKey, props.userExternalId, props.userExternalId]);
const textTranslations = (0, i18n_js_1.useLocale)(locale || config.locale || 'en');
return (react_1.default.createElement(CurrentProviderContext_js_1.default.Provider, { value: "DEFAULT_MAGICBELL" },
react_1.default.createElement(TranslationsContext_js_1.TranslationsProvider, { value: textTranslations },
react_1.default.createElement(MagicBellThemeContext_js_1.MagicBellThemeProvider, { value: theme || config.theme },
react_1.default.createElement(MagicBellContext_js_1.default.Provider, { value: { images: images || config.images, isFetchingConfig } }, children)))));
}
//# sourceMappingURL=MagicBellProvider.js.map