@botonic/react
Version:
Build Chatbots using React
54 lines • 3.93 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.WebviewContainer = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const core_1 = require("@botonic/core");
const react_1 = require("react");
const constants_1 = require("../../constants");
const contexts_1 = require("../../contexts");
const context_1 = require("../context");
const header_1 = require("./header");
const styles_1 = require("./styles");
const WebviewContainer = ({ localWebviews, }) => {
const { closeWebview, getThemeProperty, webchatState } = (0, react_1.useContext)(context_1.WebchatContext);
const webviewRequestContext = {
params: webchatState.webviewParams || {},
session: webchatState.session || {},
getUserCountry: () => { var _a, _b; return ((_b = (_a = webchatState.session) === null || _a === void 0 ? void 0 : _a.user) === null || _b === void 0 ? void 0 : _b.country) || ''; },
getUserLocale: () => { var _a, _b; return ((_b = (_a = webchatState.session) === null || _a === void 0 ? void 0 : _a.user) === null || _b === void 0 ? void 0 : _b.locale) || ''; },
getSystemLocale: () => { var _a, _b; return ((_b = (_a = webchatState.session) === null || _a === void 0 ? void 0 : _a.user) === null || _b === void 0 ? void 0 : _b.system_locale) || ''; },
closeWebview: (options) => tslib_1.__awaiter(void 0, void 0, void 0, function* () { return yield closeWebview(options); }),
};
const close = (e) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
if (e.data === 'botonicCloseWebview') {
console.log('Received close message from webview');
yield closeWebview();
}
});
(0, react_1.useEffect)(() => {
window.addEventListener('message', close, false);
return () => window.removeEventListener('message', close, false);
}, []);
if ((0, core_1.isDev)(webchatState.session)) {
// eslint-disable-next-line @typescript-eslint/naming-convention
const Webview = getWebviewInDevMode(localWebviews, webchatState);
return ((0, jsx_runtime_1.jsx)(contexts_1.WebviewRequestContext.Provider, Object.assign({ value: webviewRequestContext }, { children: (0, jsx_runtime_1.jsxs)(styles_1.StyledWebview, Object.assign({ role: constants_1.ROLES.WEBVIEW, style: Object.assign({}, getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.webviewStyle)) }, { children: [(0, jsx_runtime_1.jsx)(header_1.WebviewHeader, {}), (0, jsx_runtime_1.jsx)(styles_1.StyledWebviewContent, { children: (0, jsx_runtime_1.jsx)(styles_1.StyledFrameAsDiv, { children: (0, jsx_runtime_1.jsx)(Webview, {}) }) })] })) })));
}
const webviewUrl = webchatState.webview && typeof webchatState.webview === 'string'
? webchatState.webview
: '';
return ((0, jsx_runtime_1.jsx)(contexts_1.WebviewRequestContext.Provider, Object.assign({ value: webviewRequestContext }, { children: (0, jsx_runtime_1.jsxs)(styles_1.StyledWebview, Object.assign({ role: constants_1.ROLES.WEBVIEW, style: Object.assign({}, getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.webviewStyle)) }, { children: [(0, jsx_runtime_1.jsx)(header_1.WebviewHeader, {}), (0, jsx_runtime_1.jsx)(styles_1.StyledWebviewContent, { children: (0, jsx_runtime_1.jsx)(styles_1.StyledFrame, { src: webviewUrl }) })] })) })));
};
exports.WebviewContainer = WebviewContainer;
function getWebviewInDevMode(localWebviews, webchatState) {
var _a;
return ((_a = localWebviews === null || localWebviews === void 0 ? void 0 : localWebviews.find(webview => {
var _a;
if (typeof webchatState.webview === 'string') {
return false;
}
return webview.name === ((_a = webchatState.webview) === null || _a === void 0 ? void 0 : _a.name);
})) !== null && _a !== void 0 ? _a : webchatState.webview);
}
//# sourceMappingURL=index.js.map