@botonic/react
Version:
Build Chatbots using React
71 lines • 3.58 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { isDev, isFacebook, isWebchat, isWhatsapp } from '@botonic/core';
import React, { useContext } from 'react';
import { RequestContext } from '../../contexts';
import { Button } from '../button/index';
import { Carousel } from '../carousel';
import { Image } from '../image';
import { Text } from '../text';
import { WhatsappCTAUrlButton } from '../whatsapp-cta-url-button';
import { getFilteredElements, isMultichannelButton, isNodePic, isNodeSubtitle, isNodeTitle, } from './multichannel-utils';
import { convertToMarkdownMeta } from './whatsapp/markdown-meta';
export const MultichannelCarousel = props => {
const requestContext = useContext(RequestContext);
if (isDev(requestContext.session) || isWebchat(requestContext.session)) {
return _jsx(Carousel, Object.assign({}, 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 === null || imageProps === void 0 ? void 0 : imageProps.src) {
const messageWithImage = _jsx(Image, { src: imageProps.src });
messages.push(messageWithImage);
}
if (isWhatsapp(requestContext.session) &&
buttons.some(button => button.url)) {
const messageWithButtonUrl = (_jsx(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) ? (_jsxs(Text, { children: [textMessage, buttons
.filter(button => isWhatsapp(requestContext.session) && !button.url)
.map(button => (_jsx(Button, Object.assign({ payload: button.payload, url: button.url }, { children: button.text }), `carousel-element-${i}-button`)))] }, `carousel-element-${i}-text`)) : ([]);
messages.push(messageWithButtons);
});
return _jsx(_Fragment, { children: messages });
};
function getButtons(node) {
return [].concat(getFilteredElements(node, isMultichannelButton));
}
function parseCarouselElement(element) {
let imageProps, title, subtitle;
const buttonsChildren = [];
for (const node of element) {
if (isNodePic(node))
imageProps = node.props;
if (isNodeTitle(node))
title = node.props.children;
if (isNodeSubtitle(node))
subtitle = node.props.children;
if (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 isWhatsapp(session) || isFacebook(session)
? convertToMarkdownMeta(formattedTextMessage)
: formattedTextMessage;
}
//# sourceMappingURL=multichannel-carousel.js.map