@botonic/plugin-flow-builder/lib/esm/webview/use-webview-contents.js

Use Flow Builder to show your contents

import { __awaiter } from "tslib";
import axios from 'axios';
import { useEffect, useState } from 'react';
import { FLOW_BUILDER_API_URL_PROD } from '../constants';
import { FlowBuilderJSONVersion } from '../types';
import { WebviewContentType, } from './types';
export function useWebviewContents({ apiUrl = FLOW_BUILDER_API_URL_PROD, version = FlowBuilderJSONVersion.LATEST, botId, webviewId, providerId, locale, mapContents, }) {
    const [textContents, setTextContents] = useState();
    const [imageContents, setImageContents] = useState();
    const [contents, setContents] = useState({});
    const [currentLocale, setCurrentLocale] = useState(locale);
    const [error, setError] = useState(false);
    const updateCurrentLocale = (textContents) => {
        if (!textContents || textContents.length === 0) {
            console.log('There is no text contents to check the locale');
            return;
        }
        const locales = textContents[0].content.text.map(text => text.locale);
        const language = currentLocale.split('-')[0];
        if (locales.includes(currentLocale)) {
            setCurrentLocale(currentLocale);
            return;
        }
        if (locales.includes(language)) {
            setCurrentLocale(language);
            return;
        }
        console.error(`locale: ${currentLocale} cannot be resolved with: ${locales.join(', ')}`);
    };
    const getTextContent = (contentID) => {
        var _a, _b;
        return (((_b = (_a = textContents === null || textContents === void 0 ? void 0 : textContents.find(textContent => textContent.code === contentID)) === null || _a === void 0 ? void 0 : _a.content.text.find(text => text.locale === currentLocale)) === null || _b === void 0 ? void 0 : _b.message) ||
            '');
    };
    const getImageSrc = (contentID) => {
        var _a, _b;
        return (((_b = (_a = imageContents === null || imageContents === void 0 ? void 0 : imageContents.find(imageContent => imageContent.code === contentID)) === null || _a === void 0 ? void 0 : _a.content.image.find(image => image.locale === currentLocale)) === null || _b === void 0 ? void 0 : _b.file) ||
            '');
    };
    useEffect(() => {
        if (textContents || imageContents) {
            const contentsObject = {};
            for (const [key, value] of Object.entries(mapContents)) {
                contentsObject[key] = getTextContent(value) || getImageSrc(value);
            }
            setContents(contentsObject);
        }
    }, [textContents, imageContents, currentLocale]);
    useEffect(() => {
        const getResponseContents = () => __awaiter(this, void 0, void 0, function* () {
            const url = `${apiUrl}/v1/bot_flows/${botId}/versions/${version}/webviews/${webviewId}/?provider_id=${providerId}`;
            try {
                const response = yield axios.get(url);
                const textResponseContents = response.data.filter(webviewContent => webviewContent.type === WebviewContentType.TEXT);
                setTextContents(textResponseContents);
                const imageResponseContents = response.data.filter(webviewContent => webviewContent.type === WebviewContentType.IMAGE);
                setImageContents(imageResponseContents);
                updateCurrentLocale(textResponseContents);
            }
            catch (error) {
                console.error('Error fetching webview contents:', error);
                setError(true);
            }
        });
        getResponseContents();
    }, []);
    return {
        isLoading: Object.keys(contents).length === 0,
        error,
        webviewContentsContext: {
            getTextContent,
            getImageSrc,
            setCurrentLocale,
            contents,
        },
    };
}
//# sourceMappingURL=use-webview-contents.js.map