@botonic/react
Version:
Build Chatbots using React
50 lines • 3.48 kB
JavaScript
import { __awaiter } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { isDev } from '@botonic/core';
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 = ({ localWebviews, }) => {
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 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);
}, []);
if (isDev(webchatState.session)) {
// eslint-disable-next-line @typescript-eslint/naming-convention
const Webview = getWebviewInDevMode(localWebviews, webchatState);
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: _jsx(StyledFrameAsDiv, { children: _jsx(Webview, {}) }) })] })) })));
}
const webviewUrl = webchatState.webview && typeof webchatState.webview === 'string'
? webchatState.webview
: '';
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: _jsx(StyledFrame, { src: webviewUrl }) })] })) })));
};
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