@botonic/react
Version:
Build Chatbots using React
80 lines • 4.06 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.MultichannelCarousel = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const core_1 = require("@botonic/core");
const react_1 = require("react");
const contexts_1 = require("../../contexts");
const index_1 = require("../button/index");
const carousel_1 = require("../carousel");
const image_1 = require("../image");
const text_1 = require("../text");
const whatsapp_cta_url_button_1 = require("../whatsapp-cta-url-button");
const multichannel_utils_1 = require("./multichannel-utils");
const markdown_meta_1 = require("./whatsapp/markdown-meta");
const MultichannelCarousel = props => {
const requestContext = (0, react_1.useContext)(contexts_1.RequestContext);
if ((0, core_1.isDev)(requestContext.session) || (0, core_1.isWebchat)(requestContext.session)) {
return (0, jsx_runtime_1.jsx)(carousel_1.Carousel, { ...props, children: props.children });
}
const messages = [];
const childrenElements = props.children.map(e => e.props.children);
childrenElements.forEach((element, i) => {
const { imageProps, title, subtitle, buttons } = parseCarouselElement(element);
const textMessage = getTextMessage(requestContext.session, title, subtitle);
if (imageProps?.src) {
const messageWithImage = (0, jsx_runtime_1.jsx)(image_1.Image, { src: imageProps.src });
messages.push(messageWithImage);
}
if ((0, core_1.isWhatsapp)(requestContext.session) &&
buttons.some(button => button.url)) {
const messageWithButtonUrl = ((0, jsx_runtime_1.jsx)(whatsapp_cta_url_button_1.WhatsappCTAUrlButton, { body: title, footer: `_${subtitle}_`, displayText: buttons[0].text, url: buttons[0].url }, `carousel-element-${i}-cta-url`));
messages.push(messageWithButtonUrl);
}
const messageWithButtons = buttons.some(button => button.payload) ? ((0, jsx_runtime_1.jsxs)(text_1.Text, { children: [textMessage, buttons
.filter(button => (0, core_1.isWhatsapp)(requestContext.session) && !button.url)
.map(button => ((0, jsx_runtime_1.jsx)(index_1.Button, { payload: button.payload, url: button.url, children: button.text }, `carousel-element-${i}-button`)))] }, `carousel-element-${i}-text`)) : ([]);
messages.push(messageWithButtons);
});
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: messages });
};
exports.MultichannelCarousel = MultichannelCarousel;
function getButtons(node) {
return [].concat((0, multichannel_utils_1.getFilteredElements)(node, multichannel_utils_1.isMultichannelButton));
}
function parseCarouselElement(element) {
let imageProps, title, subtitle;
const buttonsChildren = [];
for (const node of element) {
if ((0, multichannel_utils_1.isNodePic)(node)) {
imageProps = node.props;
}
if ((0, multichannel_utils_1.isNodeTitle)(node)) {
title = node.props.children;
}
if ((0, multichannel_utils_1.isNodeSubtitle)(node)) {
subtitle = node.props.children;
}
if ((0, multichannel_utils_1.isMultichannelButton)(node)) {
buttonsChildren.push(node);
}
if (Array.isArray(node)) {
buttonsChildren.push(...getButtons(node));
}
}
const buttons = buttonsChildren.map(button => {
return {
text: button.props.children,
payload: button.props.payload,
url: button.props.url,
};
});
return { imageProps, title, subtitle, buttons };
}
function getTextMessage(session, title, subtitle) {
const formattedTextMessage = `**${title}**${subtitle ? ` _${subtitle}_` : ''}`;
return (0, core_1.isWhatsapp)(session) || (0, core_1.isFacebook)(session) || (0, core_1.isInstagram)(session)
? (0, markdown_meta_1.convertToMarkdownMeta)(formattedTextMessage)
: formattedTextMessage;
}
//# sourceMappingURL=multichannel-carousel.js.map