@botonic/plugin-flow-builder
Version:
Use Flow Builder to show your contents
111 lines • 5.84 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.FlowCarousel = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const core_1 = require("@botonic/core");
const react_1 = require("@botonic/react");
const tracking_1 = require("../tracking");
const content_fields_base_1 = require("./content-fields-base");
const flow_element_1 = require("./flow-element");
const DEFAULT_TEXT_MESSAGE = 'These are the options';
class FlowCarousel extends content_fields_base_1.ContentFieldsBase {
constructor() {
super(...arguments);
this.elements = [];
}
static fromHubtypeCMS(component, locale, cmsApi) {
const newCarousel = new FlowCarousel(component.id);
newCarousel.code = component.code;
newCarousel.elements = component.content.elements.map(element => flow_element_1.FlowElement.fromHubtypeCMS(element, locale, cmsApi));
newCarousel.followUp = component.follow_up;
return newCarousel;
}
trackFlow(request) {
return tslib_1.__awaiter(this, void 0, void 0, function* () {
yield (0, tracking_1.trackOneContent)(request, this);
for (const element of this.elements) {
yield element.trackFlow(request);
}
});
}
static generateWhatsappElementText(element) {
if (element.subtitle) {
return `*${element.title}*\n${element.subtitle}`;
}
return element.title;
}
static fromAIAgent(id, carouselMessage, request) {
if ((0, core_1.isWhatsapp)(request.session) &&
FlowCarousel.areElementsValidForWhatsapp(carouselMessage)) {
if (carouselMessage.content.elements.length === 1) {
const element = carouselMessage.content.elements[0];
// TODO: Add a new fromAIAgent method in FlowWhatsappCtaUrlButtonNode to create a WhatsappCTAUrlButton from an AIAgent message
return ((0, jsx_runtime_1.jsx)(react_1.WhatsappCTAUrlButton, { body: element.title, headerType: react_1.WhatsappCTAUrlHeaderType.Image, headerImage: element.image, footer: element.subtitle, displayText: element.button.text, url: element.button.url }, id));
}
return ((0, jsx_runtime_1.jsx)(react_1.WhatsappInteractiveMediaCarousel, { cards: carouselMessage.content.elements.map(element => {
const buttonText = element.button.text;
const buttonUrl = element.button.url;
const imageLink = element.image;
const text = FlowCarousel.generateWhatsappElementText(element);
return {
text,
action: { buttonText, buttonUrl, imageLink },
};
}), textMessage: carouselMessage.content.text || DEFAULT_TEXT_MESSAGE }));
}
return ((0, jsx_runtime_1.jsx)(react_1.Carousel, { children: carouselMessage.content.elements.map((element, index) => flow_element_1.FlowElement.fromAIAgent(`${id}-element-${index}`, element).toBotonic(id)) }, id));
}
toCarouselMessage(elements) {
return {
type: 'carousel',
content: {
elements: elements.map(element => {
var _a, _b, _c;
return {
button: {
text: ((_a = element.button) === null || _a === void 0 ? void 0 : _a.text) || '',
payload: (_b = element.button) === null || _b === void 0 ? void 0 : _b.payload,
url: (_c = element.button) === null || _c === void 0 ? void 0 : _c.url,
},
title: element.title,
subtitle: element.subtitle,
image: element.image,
};
}),
},
};
}
toBotonic(id, request) {
const carouselMessage = this.toCarouselMessage(this.elements);
if ((0, core_1.isWhatsapp)(request.session) &&
FlowCarousel.areElementsValidForWhatsapp(carouselMessage)) {
if (this.elements.length === 1) {
const element = this.elements[0];
return ((0, jsx_runtime_1.jsx)(react_1.WhatsappCTAUrlButton, { body: element.title, headerType: react_1.WhatsappCTAUrlHeaderType.Image, headerImage: element.image, displayText: element.button.text, url: element.button.url }, id));
}
return ((0, jsx_runtime_1.jsx)(react_1.WhatsappInteractiveMediaCarousel, { cards: this.elements.map(element => {
const text = FlowCarousel.generateWhatsappElementText(element);
const buttonText = element.button.text;
const buttonUrl = element.button.url;
const imageLink = element.image;
return {
text,
action: { buttonText, buttonUrl, imageLink },
};
}),
// TODO: Add the text message in flow builder frontend and take it from the carousel node with different languages
textMessage: DEFAULT_TEXT_MESSAGE }));
}
return ((0, jsx_runtime_1.jsx)(react_1.Carousel, { children: this.elements.map(element => element.toBotonic(id)) }, id));
}
}
exports.FlowCarousel = FlowCarousel;
FlowCarousel.areElementsValidForWhatsapp = (carouselMessage) => {
const isValid = carouselMessage.content.elements.every(element => element.button.url);
if (!isValid) {
console.warn('Cannot use WhatsappInteractiveMediaCarousel for Whatsapp created by AIAgent', carouselMessage.content);
}
return isValid;
};
//# sourceMappingURL=flow-carousel.js.map