@botonic/react/lib/esm/webview-app.js

Build Chatbots using React

import { __awaiter } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
// @ts-nocheck
import { params2queryString, PROVIDER } from '@botonic/core';
import axios from 'axios';
import React from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter, Route } from 'react-router-dom';
import { WebviewRequestContext } from './contexts';
class App extends React.Component {
    constructor(props) {
        super(props);
        const url = new URL(window.location.href);
        const params = Array.from(url.searchParams.entries())
            .filter(([key, value]) => key !== 'context')
            .reduce((o, [key, value]) => {
            o[key] = value;
            return o;
        }, {});
        const urlContext = url.searchParams.get('context');
        const session = JSON.parse(urlContext || '{}');
        this.state = { session, params };
    }
    close(options) {
        return __awaiter(this, void 0, void 0, function* () {
            let payload = options ? options.payload : null;
            if (options === null || options === void 0 ? void 0 : options.path) {
                payload = `__PATH_PAYLOAD__${options.path}`;
            }
            if (payload) {
                if (options === null || options === void 0 ? void 0 : options.params) {
                    payload = `${payload}?${params2queryString(options.params)}`;
                }
                const session = this.state.session;
                try {
                    const baseUrl = session._hubtype_api || 'https://api.hubtype.com';
                    const url = `${baseUrl}/v1/bots/${session.bot.id}/send_postback/`;
                    // eslint-disable-next-line @typescript-eslint/naming-convention
                    const data = { payload: payload, chat_id: session.user.id };
                    yield axios.post(url, data);
                }
                catch (e) {
                    console.log(e);
                }
            }
            const provider = this.state.session.user.provider;
            const impId = this.state.session.user.imp_id;
            if (provider === PROVIDER.WHATSAPP) {
                const phone_number = this.state.session.user.unformatted_phone_number;
                location.href = 'https://wa.me/' + phone_number;
            }
            if (provider === PROVIDER.TELEGRAM) {
                location.href = 'https://t.me/' + impId;
            }
            if (provider === PROVIDER.APPLE) {
                location.href = 'https://bcrw.apple.com/urn:biz:' + impId;
            }
            if (provider === PROVIDER.TWITTER) {
                location.href =
                    'https://twitter.com/messages/compose?recipient_id=' + impId;
            }
            if (provider === PROVIDER.INSTAGRAM) {
                window.close();
            }
            if (provider === PROVIDER.FACEBOOK) {
                try {
                    window.MessengerExtensions.requestCloseBrowser(function success() { }, function error(err) {
                        window.close();
                    });
                }
                catch (e) {
                    window.close();
                }
            }
            if (provider === PROVIDER.WEBCHAT) {
                try {
                    yield parent.postMessage('botonicCloseWebview', '*');
                }
                catch (e) { }
            }
        });
    }
    render() {
        const webviewRequestContext = {
            session: this.state.session || {},
            params: this.state.params || {},
            closeWebview: this.close.bind(this),
        };
        return (_jsx(WebviewRequestContext.Provider, Object.assign({ value: webviewRequestContext }, { children: this.props.webviews.map((Webview, i) => (_jsx(Route, { path: `/${Webview.name}`, component: Webview }, i))) })));
    }
}
export class WebviewApp {
    constructor({ webviews, locales }) {
        this.webviews = webviews;
        this.locales = locales;
    }
    render(dest) {
        const component = (_jsx(BrowserRouter, { children: _jsx(App, { webviews: this.webviews, locales: this.locales }) }));
        const container = dest;
        const reactRoot = createRoot(container);
        reactRoot.render(component);
    }
}
//# sourceMappingURL=webview-app.js.map