@botonic/react
Version:
Build Chatbots using React
35 lines • 2.6 kB
JavaScript
import { __awaiter } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useContext, useEffect } from 'react';
import { ROLES, WEBCHAT } from '../../constants';
import { WebviewRequestContext, } from '../../contexts';
import { WebchatContext } from '../context';
import { WebviewHeader } from './header';
import { StyledFrame, StyledFrameAsDiv, StyledWebview, StyledWebviewContent, } from './styles';
export const WebviewContainer = () => {
const { closeWebview, getThemeProperty, webchatState } = useContext(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) => __awaiter(void 0, void 0, void 0, function* () { return yield closeWebview(options); }),
};
const Webview = webchatState.webview;
const close = (e) => __awaiter(void 0, void 0, void 0, function* () {
if (e.data === 'botonicCloseWebview') {
console.log('Received close message from webview');
yield closeWebview();
}
});
useEffect(() => {
window.addEventListener('message', close, false);
return () => window.removeEventListener('message', close, false);
}, []);
// TODO: Review how to split the logic of rendering a webview in local development and production
// In local development, Webview is a component. In production it is the URL of the webview
const isUrlToWebview = typeof Webview === 'string';
return (_jsx(WebviewRequestContext.Provider, Object.assign({ value: webviewRequestContext }, { children: _jsxs(StyledWebview, Object.assign({ role: ROLES.WEBVIEW, style: Object.assign({}, getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.webviewStyle)) }, { children: [_jsx(WebviewHeader, {}), _jsx(StyledWebviewContent, { children: isUrlToWebview ? (_jsx(StyledFrame, { src: Webview })) : (_jsx(StyledFrameAsDiv, { children: _jsx(Webview, {}) })) })] })) })));
};
//# sourceMappingURL=index.js.map