@botonic/plugin-flow-builder/lib/esm/content-fields/flow-carousel.js

Use Flow Builder to show your contents

import { __awaiter } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
import { isWhatsapp } from '@botonic/core';
import { Carousel, WhatsappCTAUrlButton, WhatsappCTAUrlHeaderType, WhatsappInteractiveMediaCarousel, } from '@botonic/react';
import { trackOneContent } from '../tracking';
import { ContentFieldsBase } from './content-fields-base';
import { FlowElement } from './flow-element';
const DEFAULT_TEXT_MESSAGE = 'These are the options';
export class FlowCarousel extends 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 => FlowElement.fromHubtypeCMS(element, locale, cmsApi));
        newCarousel.followUp = component.follow_up;
        return newCarousel;
    }
    trackFlow(request) {
        return __awaiter(this, void 0, void 0, function* () {
            yield 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 (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 (_jsx(WhatsappCTAUrlButton, { body: element.title, headerType: WhatsappCTAUrlHeaderType.Image, headerImage: element.image, footer: element.subtitle, displayText: element.button.text, url: element.button.url }, id));
            }
            return (_jsx(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 (_jsx(Carousel, { children: carouselMessage.content.elements.map((element, index) => 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 (isWhatsapp(request.session) &&
            FlowCarousel.areElementsValidForWhatsapp(carouselMessage)) {
            if (this.elements.length === 1) {
                const element = this.elements[0];
                return (_jsx(WhatsappCTAUrlButton, { body: element.title, headerType: WhatsappCTAUrlHeaderType.Image, headerImage: element.image, displayText: element.button.text, url: element.button.url }, id));
            }
            return (_jsx(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 (_jsx(Carousel, { children: this.elements.map(element => element.toBotonic(id)) }, id));
    }
}
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