@botonic/react 0.31.0 → 0.31.1-alpha.1

package/lib/cjs/components/index.d.ts

@@ -21,5 +21,10 @@ export { Title } from './title';
 export { Video } from './video';
 export { normalizeWebchatSettings, WebchatSettings, WebchatSettingsProps, } from './webchat-settings';
 export { WhatsappButtonList, WhatsappButtonListProps, WhatsappButtonListRowProps, WhatsappButtonListSectionProps, } from './whatsapp-button-list';
+export { WhatsappCatalog, WhatsappCatalogProps } from './whatsapp-catalog';
 export { WhatsappCTAUrlButton, WhatsappCTAUrlButtonProps, } from './whatsapp-cta-url-button';
+export { WhatsappMediaCarousel, WhatsappMediaCarouselProps, } from './whatsapp-media-carousel';
+export { WhatsappProduct } from './whatsapp-product';
+export { WhatsappProductCarousel, WhatsappProductCarouselProps, } from './whatsapp-product-carousel';
+export { ProductItem, WhatsappProductList, WhatsappProductListProps, WhatsappProductListSection, } from './whatsapp-product-list';
 export { WhatsappTemplate } from './whatsapp-template';

package/lib/cjs/components/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.WhatsappTemplate = exports.WhatsappCTAUrlButton = exports.WhatsappButtonList = exports.WebchatSettings = exports.normalizeWebchatSettings = exports.Video = exports.Title = exports.Text = exports.Subtitle = exports.ShareButton = exports.Reply = exports.Raw = exports.Pic = exports.MessageTemplate = exports.Message = exports.Location = exports.Image = exports.Handoff = exports.Element = exports.Document = exports.customMessage = exports.Carousel = exports.Button = exports.Audio = void 0;
+exports.WhatsappTemplate = exports.WhatsappProductList = exports.WhatsappProductCarousel = exports.WhatsappProduct = exports.WhatsappMediaCarousel = exports.WhatsappCTAUrlButton = exports.WhatsappCatalog = exports.WhatsappButtonList = exports.WebchatSettings = exports.normalizeWebchatSettings = exports.Video = exports.Title = exports.Text = exports.Subtitle = exports.ShareButton = exports.Reply = exports.Raw = exports.Pic = exports.MessageTemplate = exports.Message = exports.Location = exports.Image = exports.Handoff = exports.Element = exports.Document = exports.customMessage = exports.Carousel = exports.Button = exports.Audio = void 0;
 const tslib_1 = require("tslib");
 var audio_1 = require("./audio");
 Object.defineProperty(exports, "Audio", { enumerable: true, get: function () { return audio_1.Audio; } });
@@ -47,8 +47,18 @@ Object.defineProperty(exports, "normalizeWebchatSettings", { enumerable: true, g
 Object.defineProperty(exports, "WebchatSettings", { enumerable: true, get: function () { return webchat_settings_1.WebchatSettings; } });
 var whatsapp_button_list_1 = require("./whatsapp-button-list");
 Object.defineProperty(exports, "WhatsappButtonList", { enumerable: true, get: function () { return whatsapp_button_list_1.WhatsappButtonList; } });
+var whatsapp_catalog_1 = require("./whatsapp-catalog");
+Object.defineProperty(exports, "WhatsappCatalog", { enumerable: true, get: function () { return whatsapp_catalog_1.WhatsappCatalog; } });
 var whatsapp_cta_url_button_1 = require("./whatsapp-cta-url-button");
 Object.defineProperty(exports, "WhatsappCTAUrlButton", { enumerable: true, get: function () { return whatsapp_cta_url_button_1.WhatsappCTAUrlButton; } });
+var whatsapp_media_carousel_1 = require("./whatsapp-media-carousel");
+Object.defineProperty(exports, "WhatsappMediaCarousel", { enumerable: true, get: function () { return whatsapp_media_carousel_1.WhatsappMediaCarousel; } });
+var whatsapp_product_1 = require("./whatsapp-product");
+Object.defineProperty(exports, "WhatsappProduct", { enumerable: true, get: function () { return whatsapp_product_1.WhatsappProduct; } });
+var whatsapp_product_carousel_1 = require("./whatsapp-product-carousel");
+Object.defineProperty(exports, "WhatsappProductCarousel", { enumerable: true, get: function () { return whatsapp_product_carousel_1.WhatsappProductCarousel; } });
+var whatsapp_product_list_1 = require("./whatsapp-product-list");
+Object.defineProperty(exports, "WhatsappProductList", { enumerable: true, get: function () { return whatsapp_product_list_1.WhatsappProductList; } });
 var whatsapp_template_1 = require("./whatsapp-template");
 Object.defineProperty(exports, "WhatsappTemplate", { enumerable: true, get: function () { return whatsapp_template_1.WhatsappTemplate; } });
 //# sourceMappingURL=index.js.map

package/lib/cjs/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":";;;;AAAA,iCAA+B;AAAtB,8FAAA,KAAK,OAAA;AACd,mCAAiC;AAAxB,gGAAA,MAAM,OAAA;AACf,uCAAqC;AAA5B,oGAAA,QAAQ,OAAA;AACjB,mDAAgD;AAAvC,+GAAA,aAAa,OAAA;AACtB,uCAAqC;AAA5B,oGAAA,QAAQ,OAAA;AACjB,qCAAmC;AAA1B,kGAAA,OAAO,OAAA;AAChB,qCAAmC;AAA1B,kGAAA,OAAO,OAAA;AAChB,iCAA+B;AAAtB,8FAAA,KAAK,OAAA;AACd,wDAA6B;AAC7B,uCAAqC;AAA5B,oGAAA,QAAQ,OAAA;AACjB,qCAAmC;AAA1B,kGAAA,OAAO,OAAA;AAChB,uDAAoD;AAA3C,mHAAA,eAAe,OAAA;AACxB,yDAA8B;AAC9B,6BAA2B;AAAlB,0FAAA,GAAG,OAAA;AACZ,6BAA2B;AAAlB,0FAAA,GAAG,OAAA;AACZ,iCAA+B;AAAtB,8FAAA,KAAK,OAAA;AACd,+CAA4C;AAAnC,2GAAA,WAAW,OAAA;AACpB,uCAAqC;AAA5B,oGAAA,QAAQ,OAAA;AACjB,+BAA6B;AAApB,4FAAA,IAAI,OAAA;AACb,iCAA+B;AAAtB,8FAAA,KAAK,OAAA;AACd,iCAA+B;AAAtB,8FAAA,KAAK,OAAA;AACd,uDAI2B;AAHzB,4HAAA,wBAAwB,OAAA;AACxB,mHAAA,eAAe,OAAA;AAGjB,+DAK+B;AAJ7B,0HAAA,kBAAkB,OAAA;AAKpB,qEAGkC;AAFhC,+HAAA,oBAAoB,OAAA;AAGtB,yDAAsD;AAA7C,qHAAA,gBAAgB,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":";;;;AAAA,iCAA+B;AAAtB,8FAAA,KAAK,OAAA;AACd,mCAAiC;AAAxB,gGAAA,MAAM,OAAA;AACf,uCAAqC;AAA5B,oGAAA,QAAQ,OAAA;AACjB,mDAAgD;AAAvC,+GAAA,aAAa,OAAA;AACtB,uCAAqC;AAA5B,oGAAA,QAAQ,OAAA;AACjB,qCAAmC;AAA1B,kGAAA,OAAO,OAAA;AAChB,qCAAmC;AAA1B,kGAAA,OAAO,OAAA;AAChB,iCAA+B;AAAtB,8FAAA,KAAK,OAAA;AACd,wDAA6B;AAC7B,uCAAqC;AAA5B,oGAAA,QAAQ,OAAA;AACjB,qCAAmC;AAA1B,kGAAA,OAAO,OAAA;AAChB,uDAAoD;AAA3C,mHAAA,eAAe,OAAA;AACxB,yDAA8B;AAC9B,6BAA2B;AAAlB,0FAAA,GAAG,OAAA;AACZ,6BAA2B;AAAlB,0FAAA,GAAG,OAAA;AACZ,iCAA+B;AAAtB,8FAAA,KAAK,OAAA;AACd,+CAA4C;AAAnC,2GAAA,WAAW,OAAA;AACpB,uCAAqC;AAA5B,oGAAA,QAAQ,OAAA;AACjB,+BAA6B;AAApB,4FAAA,IAAI,OAAA;AACb,iCAA+B;AAAtB,8FAAA,KAAK,OAAA;AACd,iCAA+B;AAAtB,8FAAA,KAAK,OAAA;AACd,uDAI2B;AAHzB,4HAAA,wBAAwB,OAAA;AACxB,mHAAA,eAAe,OAAA;AAGjB,+DAK+B;AAJ7B,0HAAA,kBAAkB,OAAA;AAKpB,uDAA0E;AAAjE,mHAAA,eAAe,OAAA;AACxB,qEAGkC;AAFhC,+HAAA,oBAAoB,OAAA;AAGtB,qEAGkC;AAFhC,gIAAA,qBAAqB,OAAA;AAGvB,uDAAoD;AAA3C,mHAAA,eAAe,OAAA;AACxB,yEAGoC;AAFlC,oIAAA,uBAAuB,OAAA;AAGzB,iEAKgC;AAH9B,4HAAA,mBAAmB,OAAA;AAIrB,yDAAsD;AAA7C,qHAAA,gBAAgB,OAAA"}

package/lib/cjs/components/whatsapp-catalog.d.ts

@@ -0,0 +1,6 @@
+export interface WhatsappCatalogProps {
+    body: string;
+    footer?: string;
+    thumbnailProductId?: string;
+}
+export declare const WhatsappCatalog: (props: WhatsappCatalogProps) => any;

package/lib/cjs/components/whatsapp-catalog.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WhatsappCatalog = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const core_1 = require("@botonic/core");
+const react_1 = require("../util/react");
+const message_1 = require("./message");
+const serialize = (message) => {
+    return { text: message };
+};
+const WhatsappCatalog = (props) => {
+    const renderBrowser = () => {
+        // Return a dummy message for browser
+        const message = `WhatsApp Catalog would be sent to the user.`;
+        return ((0, jsx_runtime_1.jsx)(message_1.Message, Object.assign({ json: serialize(message) }, props, { type: core_1.INPUT.TEXT }, { children: message })));
+    };
+    const renderNode = () => {
+        return (
+        // @ts-ignore Property 'message' does not exist on type 'JSX.IntrinsicElements'.
+        (0, jsx_runtime_1.jsx)("message", Object.assign({}, props, { body: props.body, footer: props.footer, thumbnailProductId: props.thumbnailProductId, type: core_1.INPUT.WHATSAPP_CATALOG })));
+    };
+    return (0, react_1.renderComponent)({ renderBrowser, renderNode });
+};
+exports.WhatsappCatalog = WhatsappCatalog;
+//# sourceMappingURL=whatsapp-catalog.js.map

package/lib/cjs/components/whatsapp-catalog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"whatsapp-catalog.js","sourceRoot":"","sources":["../../../src/components/whatsapp-catalog.tsx"],"names":[],"mappings":";;;;AAAA,wCAAqC;AAGrC,yCAA+C;AAC/C,uCAAmC;AAQnC,MAAM,SAAS,GAAG,CAAC,OAAe,EAAE,EAAE;IACpC,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,CAAA;AAC1B,CAAC,CAAA;AAEM,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAE,EAAE;IAC7D,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,qCAAqC;QACrC,MAAM,OAAO,GAAG,6CAA6C,CAAA;QAC7D,OAAO,CACL,uBAAC,iBAAO,kBAAC,IAAI,EAAE,SAAS,CAAC,OAAO,CAAC,IAAM,KAAK,IAAE,IAAI,EAAE,YAAK,CAAC,IAAI,gBAC3D,OAAO,IACA,CACX,CAAA;IACH,CAAC,CAAA;IAED,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,OAAO;QACL,gFAAgF;QAChF,oDACM,KAAK,IACT,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,kBAAkB,EAAE,KAAK,CAAC,kBAAkB,EAC5C,IAAI,EAAE,YAAK,CAAC,gBAAgB,IAC5B,CACH,CAAA;IACH,CAAC,CAAA;IAED,OAAO,IAAA,uBAAe,EAAC,EAAE,aAAa,EAAE,UAAU,EAAE,CAAC,CAAA;AACvD,CAAC,CAAA;AAzBY,QAAA,eAAe,mBAyB3B"}

package/lib/cjs/components/whatsapp-media-carousel.d.ts

@@ -0,0 +1,46 @@
+type Parameters = TextParameter | CurrencyParameter | DateTimeParameter;
+interface TextParameter {
+    type: 'text';
+    text: string;
+}
+interface CurrencyParameter {
+    type: 'currency';
+    currency: {
+        fallbackValue: string;
+        code: string;
+        amount1000: number;
+    };
+}
+interface DateTimeParameter {
+    type: 'date_time';
+    dateTime: {
+        fallbackValue: string;
+    };
+}
+type CardButton = QuickReplyButton | UrlButton;
+interface Button {
+    type: 'quick_reply' | 'url';
+    buttonIndex?: number;
+}
+interface QuickReplyButton extends Button {
+    payload: string;
+}
+interface UrlButton extends Button {
+    urlVariable: string;
+}
+interface Card {
+    fileType: 'image' | 'video';
+    fileId: string;
+    cardIndex?: number;
+    bodyParameters?: Parameters[];
+    buttons?: CardButton[];
+    extraComponents?: Record<string, any>[];
+}
+export interface WhatsappMediaCarouselProps {
+    templateName: string;
+    templateLanguage: string;
+    cards: Card[];
+    bodyParameters?: Parameters[];
+}
+export declare const WhatsappMediaCarousel: (props: WhatsappMediaCarouselProps) => any;
+export {};

package/lib/cjs/components/whatsapp-media-carousel.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WhatsappMediaCarousel = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const core_1 = require("@botonic/core");
+const functional_1 = require("../util/functional");
+const react_1 = require("../util/react");
+const message_1 = require("./message");
+const serialize = (message) => {
+    return { text: message };
+};
+const WhatsappMediaCarousel = (props) => {
+    const renderBrowser = () => {
+        // Return a dummy message for browser
+        const message = `WhatsApp Media Carousel would be sent to the user.`;
+        return ((0, jsx_runtime_1.jsx)(message_1.Message, Object.assign({ json: serialize(message) }, props, { type: core_1.INPUT.TEXT }, { children: message })));
+    };
+    const getCards = (cards) => {
+        cards.forEach((card, index) => {
+            var _a;
+            if (!card.cardIndex) {
+                card.cardIndex = index;
+            }
+            (_a = card.buttons) === null || _a === void 0 ? void 0 : _a.forEach((button, index) => {
+                if (!button.buttonIndex) {
+                    button.buttonIndex = index;
+                }
+            });
+        });
+        return (0, functional_1.toSnakeCaseKeys)(cards);
+    };
+    const renderNode = () => {
+        return (
+        // @ts-ignore Property 'message' does not exist on type 'JSX.IntrinsicElements'.
+        (0, jsx_runtime_1.jsx)("message", Object.assign({}, props, { bodyParameters: JSON.stringify((0, functional_1.toSnakeCaseKeys)(props.bodyParameters)), cards: JSON.stringify(getCards(props.cards)), templateName: props.templateName, templateLanguage: props.templateLanguage, type: core_1.INPUT.WHATSAPP_MEDIA_CAROUSEL })));
+    };
+    return (0, react_1.renderComponent)({ renderBrowser, renderNode });
+};
+exports.WhatsappMediaCarousel = WhatsappMediaCarousel;
+//# sourceMappingURL=whatsapp-media-carousel.js.map

package/lib/cjs/components/whatsapp-media-carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"whatsapp-media-carousel.js","sourceRoot":"","sources":["../../../src/components/whatsapp-media-carousel.tsx"],"names":[],"mappings":";;;;AAAA,wCAAqC;AAGrC,mDAAoD;AACpD,yCAA+C;AAC/C,uCAAmC;AAsDnC,MAAM,SAAS,GAAG,CAAC,OAAe,EAAE,EAAE;IACpC,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,CAAA;AAC1B,CAAC,CAAA;AAEM,MAAM,qBAAqB,GAAG,CAAC,KAAiC,EAAE,EAAE;IACzE,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,qCAAqC;QACrC,MAAM,OAAO,GAAG,oDAAoD,CAAA;QACpE,OAAO,CACL,uBAAC,iBAAO,kBAAC,IAAI,EAAE,SAAS,CAAC,OAAO,CAAC,IAAM,KAAK,IAAE,IAAI,EAAE,YAAK,CAAC,IAAI,gBAC3D,OAAO,IACA,CACX,CAAA;IACH,CAAC,CAAA;IAED,MAAM,QAAQ,GAAG,CAAC,KAAa,EAAE,EAAE;QACjC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;;YAC5B,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;gBACnB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAA;aACvB;YACD,MAAA,IAAI,CAAC,OAAO,0CAAE,OAAO,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;gBACtC,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE;oBACvB,MAAM,CAAC,WAAW,GAAG,KAAK,CAAA;iBAC3B;YACH,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;QACF,OAAO,IAAA,4BAAe,EAAC,KAAK,CAAC,CAAA;IAC/B,CAAC,CAAA;IAED,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,OAAO;QACL,gFAAgF;QAChF,oDACM,KAAK,IACT,cAAc,EAAE,IAAI,CAAC,SAAS,CAAC,IAAA,4BAAe,EAAC,KAAK,CAAC,cAAc,CAAC,CAAC,EACrE,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAC5C,YAAY,EAAE,KAAK,CAAC,YAAY,EAChC,gBAAgB,EAAE,KAAK,CAAC,gBAAgB,EACxC,IAAI,EAAE,YAAK,CAAC,uBAAuB,IACnC,CACH,CAAA;IACH,CAAC,CAAA;IAED,OAAO,IAAA,uBAAe,EAAC,EAAE,aAAa,EAAE,UAAU,EAAE,CAAC,CAAA;AACvD,CAAC,CAAA;AAxCY,QAAA,qBAAqB,yBAwCjC"}

package/lib/cjs/components/whatsapp-product-carousel.d.ts

@@ -0,0 +1,32 @@
+type Parameters = TextParameter | CurrencyParameter | DateTimeParameter;
+interface TextParameter {
+    type: 'text';
+    text: string;
+}
+interface CurrencyParameter {
+    type: 'currency';
+    currency: {
+        fallbackValue: string;
+        code: string;
+        amount1000: number;
+    };
+}
+interface DateTimeParameter {
+    type: 'date_time';
+    dateTime: {
+        fallbackValue: string;
+    };
+}
+interface Card {
+    productRetailerId: string;
+    catalogId: string;
+    cardIndex?: number;
+}
+export interface WhatsappProductCarouselProps {
+    templateName: string;
+    templateLanguage: string;
+    cards: Card[];
+    bodyParameters?: Parameters[];
+}
+export declare const WhatsappProductCarousel: (props: WhatsappProductCarouselProps) => any;
+export {};

package/lib/cjs/components/whatsapp-product-carousel.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WhatsappProductCarousel = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const core_1 = require("@botonic/core");
+const functional_1 = require("../util/functional");
+const react_1 = require("../util/react");
+const message_1 = require("./message");
+const serialize = (message) => {
+    return { text: message };
+};
+const WhatsappProductCarousel = (props) => {
+    const renderBrowser = () => {
+        // Return a dummy message for browser
+        const message = `WhatsApp Product Carousel would be sent to the user.`;
+        return ((0, jsx_runtime_1.jsx)(message_1.Message, Object.assign({ json: serialize(message) }, props, { type: core_1.INPUT.TEXT }, { children: message })));
+    };
+    const getCards = (cards) => {
+        cards.forEach((card, index) => {
+            if (!card.cardIndex) {
+                card.cardIndex = index;
+            }
+        });
+        return (0, functional_1.toSnakeCaseKeys)(cards);
+    };
+    const renderNode = () => {
+        return (
+        // @ts-ignore Property 'message' does not exist on type 'JSX.IntrinsicElements'.
+        (0, jsx_runtime_1.jsx)("message", Object.assign({}, props, { bodyParameters: JSON.stringify((0, functional_1.toSnakeCaseKeys)(props.bodyParameters)), cards: JSON.stringify(getCards(props.cards)), templateName: props.templateName, templateLanguage: props.templateLanguage, type: core_1.INPUT.WHATSAPP_PRODUCT_CAROUSEL })));
+    };
+    return (0, react_1.renderComponent)({ renderBrowser, renderNode });
+};
+exports.WhatsappProductCarousel = WhatsappProductCarousel;
+//# sourceMappingURL=whatsapp-product-carousel.js.map

package/lib/cjs/components/whatsapp-product-carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"whatsapp-product-carousel.js","sourceRoot":"","sources":["../../../src/components/whatsapp-product-carousel.tsx"],"names":[],"mappings":";;;;AAAA,wCAAqC;AAGrC,mDAAoD;AACpD,yCAA+C;AAC/C,uCAAmC;AAoCnC,MAAM,SAAS,GAAG,CAAC,OAAe,EAAE,EAAE;IACpC,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,CAAA;AAC1B,CAAC,CAAA;AAEM,MAAM,uBAAuB,GAAG,CACrC,KAAmC,EACnC,EAAE;IACF,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,qCAAqC;QACrC,MAAM,OAAO,GAAG,sDAAsD,CAAA;QACtE,OAAO,CACL,uBAAC,iBAAO,kBAAC,IAAI,EAAE,SAAS,CAAC,OAAO,CAAC,IAAM,KAAK,IAAE,IAAI,EAAE,YAAK,CAAC,IAAI,gBAC3D,OAAO,IACA,CACX,CAAA;IACH,CAAC,CAAA;IAED,MAAM,QAAQ,GAAG,CAAC,KAAa,EAAE,EAAE;QACjC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YAC5B,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;gBACnB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAA;aACvB;QACH,CAAC,CAAC,CAAA;QACF,OAAO,IAAA,4BAAe,EAAC,KAAK,CAAC,CAAA;IAC/B,CAAC,CAAA;IAED,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,OAAO;QACL,gFAAgF;QAChF,oDACM,KAAK,IACT,cAAc,EAAE,IAAI,CAAC,SAAS,CAAC,IAAA,4BAAe,EAAC,KAAK,CAAC,cAAc,CAAC,CAAC,EACrE,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAC5C,YAAY,EAAE,KAAK,CAAC,YAAY,EAChC,gBAAgB,EAAE,KAAK,CAAC,gBAAgB,EACxC,IAAI,EAAE,YAAK,CAAC,yBAAyB,IACrC,CACH,CAAA;IACH,CAAC,CAAA;IAED,OAAO,IAAA,uBAAe,EAAC,EAAE,aAAa,EAAE,UAAU,EAAE,CAAC,CAAA;AACvD,CAAC,CAAA;AArCY,QAAA,uBAAuB,2BAqCnC"}

package/lib/cjs/components/whatsapp-product-list.d.ts

@@ -0,0 +1,15 @@
+export interface ProductItem {
+    productRetailerId: string;
+}
+export interface WhatsappProductListSection {
+    title: string;
+    productItems: ProductItem[];
+}
+export interface WhatsappProductListProps {
+    body: string;
+    header: string;
+    catalogId: string;
+    sections: WhatsappProductListSection[];
+    footer?: string;
+}
+export declare const WhatsappProductList: (props: WhatsappProductListProps) => any;

package/lib/cjs/components/whatsapp-product-list.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WhatsappProductList = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const core_1 = require("@botonic/core");
+const functional_1 = require("../util/functional");
+const react_1 = require("../util/react");
+const message_1 = require("./message");
+const serialize = (message) => {
+    return { text: message };
+};
+const WhatsappProductList = (props) => {
+    const renderBrowser = () => {
+        // Return a dummy message for browser
+        const message = `WhatsApp Product List would be sent to the user.`;
+        return ((0, jsx_runtime_1.jsx)(message_1.Message, Object.assign({ json: serialize(message) }, props, { type: core_1.INPUT.TEXT }, { children: message })));
+    };
+    const renderNode = () => {
+        return (
+        // @ts-ignore Property 'message' does not exist on type 'JSX.IntrinsicElements'.
+        (0, jsx_runtime_1.jsx)("message", Object.assign({}, props, { body: props.body, footer: props.footer, header: props.header, sections: JSON.stringify((0, functional_1.toSnakeCaseKeys)(props.sections)), catalogId: props.catalogId, type: core_1.INPUT.WHATSAPP_PRODUCT_LIST })));
+    };
+    return (0, react_1.renderComponent)({ renderBrowser, renderNode });
+};
+exports.WhatsappProductList = WhatsappProductList;
+//# sourceMappingURL=whatsapp-product-list.js.map

package/lib/cjs/components/whatsapp-product-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"whatsapp-product-list.js","sourceRoot":"","sources":["../../../src/components/whatsapp-product-list.tsx"],"names":[],"mappings":";;;;AAAA,wCAAqC;AAGrC,mDAAoD;AACpD,yCAA+C;AAC/C,uCAAmC;AAmBnC,MAAM,SAAS,GAAG,CAAC,OAAe,EAAE,EAAE;IACpC,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,CAAA;AAC1B,CAAC,CAAA;AAEM,MAAM,mBAAmB,GAAG,CAAC,KAA+B,EAAE,EAAE;IACrE,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,qCAAqC;QACrC,MAAM,OAAO,GAAG,kDAAkD,CAAA;QAClE,OAAO,CACL,uBAAC,iBAAO,kBAAC,IAAI,EAAE,SAAS,CAAC,OAAO,CAAC,IAAM,KAAK,IAAE,IAAI,EAAE,YAAK,CAAC,IAAI,gBAC3D,OAAO,IACA,CACX,CAAA;IACH,CAAC,CAAA;IAED,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,OAAO;QACL,gFAAgF;QAChF,oDACM,KAAK,IACT,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,IAAA,4BAAe,EAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,EACzD,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,IAAI,EAAE,YAAK,CAAC,qBAAqB,IACjC,CACH,CAAA;IACH,CAAC,CAAA;IAED,OAAO,IAAA,uBAAe,EAAC,EAAE,aAAa,EAAE,UAAU,EAAE,CAAC,CAAA;AACvD,CAAC,CAAA;AA3BY,QAAA,mBAAmB,uBA2B/B"}

package/lib/cjs/components/whatsapp-product.d.ts

@@ -0,0 +1,7 @@
+export interface WhatsappProductProps {
+    body: string;
+    catalogId: string;
+    productId: string;
+    footer?: string;
+}
+export declare const WhatsappProduct: (props: WhatsappProductProps) => any;

package/lib/cjs/components/whatsapp-product.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WhatsappProduct = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const core_1 = require("@botonic/core");
+const react_1 = require("../util/react");
+const message_1 = require("./message");
+const serialize = (message) => {
+    return { text: message };
+};
+const WhatsappProduct = (props) => {
+    const renderBrowser = () => {
+        // Return a dummy message for browser
+        const message = `WhatsApp Product would be sent to the user.`;
+        return ((0, jsx_runtime_1.jsx)(message_1.Message, Object.assign({ json: serialize(message) }, props, { type: core_1.INPUT.TEXT }, { children: message })));
+    };
+    const renderNode = () => {
+        return (
+        // @ts-ignore Property 'message' does not exist on type 'JSX.IntrinsicElements'.
+        (0, jsx_runtime_1.jsx)("message", Object.assign({}, props, { body: props.body, footer: props.footer, catalogId: props.catalogId, productId: props.productId, type: core_1.INPUT.WHATSAPP_PRODUCT })));
+    };
+    return (0, react_1.renderComponent)({ renderBrowser, renderNode });
+};
+exports.WhatsappProduct = WhatsappProduct;
+//# sourceMappingURL=whatsapp-product.js.map

package/lib/cjs/components/whatsapp-product.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"whatsapp-product.js","sourceRoot":"","sources":["../../../src/components/whatsapp-product.tsx"],"names":[],"mappings":";;;;AAAA,wCAAqC;AAGrC,yCAA+C;AAC/C,uCAAmC;AASnC,MAAM,SAAS,GAAG,CAAC,OAAe,EAAE,EAAE;IACpC,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,CAAA;AAC1B,CAAC,CAAA;AAEM,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAE,EAAE;IAC7D,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,qCAAqC;QACrC,MAAM,OAAO,GAAG,6CAA6C,CAAA;QAC7D,OAAO,CACL,uBAAC,iBAAO,kBAAC,IAAI,EAAE,SAAS,CAAC,OAAO,CAAC,IAAM,KAAK,IAAE,IAAI,EAAE,YAAK,CAAC,IAAI,gBAC3D,OAAO,IACA,CACX,CAAA;IACH,CAAC,CAAA;IAED,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,OAAO;QACL,gFAAgF;QAChF,oDACM,KAAK,IACT,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,IAAI,EAAE,YAAK,CAAC,gBAAgB,IAC5B,CACH,CAAA;IACH,CAAC,CAAA;IAED,OAAO,IAAA,uBAAe,EAAC,EAAE,aAAa,EAAE,UAAU,EAAE,CAAC,CAAA;AACvD,CAAC,CAAA;AA1BY,QAAA,eAAe,mBA0B3B"}

package/lib/cjs/util/functional.d.ts

@@ -0,0 +1,3 @@
+type Input = Record<string, any> | Record<string, any>[] | undefined;
+export declare function toSnakeCaseKeys(input: Input): Input;
+export {};

package/lib/cjs/util/functional.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toSnakeCaseKeys = void 0;
+function camelCaseToSnake(str) {
+    return str
+        .replace(/([a-z])([A-Z])/g, '$1_$2')
+        .replace(/([A-Za-z])(\d)/g, '$1_$2')
+        .replace(/(\d)([A-Za-z])/g, '$1_$2')
+        .toLowerCase();
+}
+function toSnakeCaseKeys(input) {
+    if (Array.isArray(input)) {
+        return input.map(item => toSnakeCaseKeys(item));
+    }
+    if (typeof input === 'object' && input !== null) {
+        const result = Object.keys(input).reduce((acc, key) => {
+            const snakeKey = camelCaseToSnake(key);
+            const value = input[key];
+            acc[snakeKey] =
+                typeof value === 'object' && value !== null
+                    ? toSnakeCaseKeys(value)
+                    : value;
+            return acc;
+        }, {});
+        return result;
+    }
+    return input;
+}
+exports.toSnakeCaseKeys = toSnakeCaseKeys;
+//# sourceMappingURL=functional.js.map

package/lib/cjs/util/functional.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"functional.js","sourceRoot":"","sources":["../../../src/util/functional.ts"],"names":[],"mappings":";;;AAAA,SAAS,gBAAgB,CAAC,GAAW;IACnC,OAAO,GAAG;SACP,OAAO,CAAC,iBAAiB,EAAE,OAAO,CAAC;SACnC,OAAO,CAAC,iBAAiB,EAAE,OAAO,CAAC;SACnC,OAAO,CAAC,iBAAiB,EAAE,OAAO,CAAC;SACnC,WAAW,EAAE,CAAA;AAClB,CAAC;AAGD,SAAgB,eAAe,CAAC,KAAY;IAC1C,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;QACxB,OAAO,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC,CAAA;KAChD;IAED,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,EAAE;QAC/C,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE;YACpD,MAAM,QAAQ,GAAG,gBAAgB,CAAC,GAAG,CAAC,CAAA;YACtC,MAAM,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC,CAAA;YACxB,GAAG,CAAC,QAAQ,CAAC;gBACX,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI;oBACzC,CAAC,CAAC,eAAe,CAAC,KAAK,CAAC;oBACxB,CAAC,CAAC,KAAK,CAAA;YAEX,OAAO,GAAG,CAAA;QACZ,CAAC,EAAE,EAAE,CAAC,CAAA;QAEN,OAAO,MAAM,CAAA;KACd;IAED,OAAO,KAAK,CAAA;AACd,CAAC;AArBD,0CAqBC"}

package/lib/esm/components/index.d.ts

@@ -21,5 +21,10 @@ export { Title } from './title';
 export { Video } from './video';
 export { normalizeWebchatSettings, WebchatSettings, WebchatSettingsProps, } from './webchat-settings';
 export { WhatsappButtonList, WhatsappButtonListProps, WhatsappButtonListRowProps, WhatsappButtonListSectionProps, } from './whatsapp-button-list';
+export { WhatsappCatalog, WhatsappCatalogProps } from './whatsapp-catalog';
 export { WhatsappCTAUrlButton, WhatsappCTAUrlButtonProps, } from './whatsapp-cta-url-button';
+export { WhatsappMediaCarousel, WhatsappMediaCarouselProps, } from './whatsapp-media-carousel';
+export { WhatsappProduct } from './whatsapp-product';
+export { WhatsappProductCarousel, WhatsappProductCarouselProps, } from './whatsapp-product-carousel';
+export { ProductItem, WhatsappProductList, WhatsappProductListProps, WhatsappProductListSection, } from './whatsapp-product-list';
 export { WhatsappTemplate } from './whatsapp-template';

package/lib/esm/components/index.js

@@ -21,6 +21,11 @@ export { Title } from './title';
 export { Video } from './video';
 export { normalizeWebchatSettings, WebchatSettings, } from './webchat-settings';
 export { WhatsappButtonList, } from './whatsapp-button-list';
+export { WhatsappCatalog } from './whatsapp-catalog';
 export { WhatsappCTAUrlButton, } from './whatsapp-cta-url-button';
+export { WhatsappMediaCarousel, } from './whatsapp-media-carousel';
+export { WhatsappProduct } from './whatsapp-product';
+export { WhatsappProductCarousel, } from './whatsapp-product-carousel';
+export { WhatsappProductList, } from './whatsapp-product-list';
 export { WhatsappTemplate } from './whatsapp-template';
 //# sourceMappingURL=index.js.map

package/lib/esm/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,cAAc,eAAe,CAAA;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AACpD,cAAc,gBAAgB,CAAA;AAC9B,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAC3B,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAC3B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EACL,wBAAwB,EACxB,eAAe,GAEhB,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EACL,kBAAkB,GAInB,MAAM,wBAAwB,CAAA;AAC/B,OAAO,EACL,oBAAoB,GAErB,MAAM,2BAA2B,CAAA;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,cAAc,eAAe,CAAA;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AACpD,cAAc,gBAAgB,CAAA;AAC9B,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAC3B,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAC3B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EACL,wBAAwB,EACxB,eAAe,GAEhB,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EACL,kBAAkB,GAInB,MAAM,wBAAwB,CAAA;AAC/B,OAAO,EAAE,eAAe,EAAwB,MAAM,oBAAoB,CAAA;AAC1E,OAAO,EACL,oBAAoB,GAErB,MAAM,2BAA2B,CAAA;AAClC,OAAO,EACL,qBAAqB,GAEtB,MAAM,2BAA2B,CAAA;AAClC,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AACpD,OAAO,EACL,uBAAuB,GAExB,MAAM,6BAA6B,CAAA;AACpC,OAAO,EAEL,mBAAmB,GAGpB,MAAM,yBAAyB,CAAA;AAChC,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA"}

package/lib/esm/components/whatsapp-catalog.d.ts

@@ -0,0 +1,6 @@
+export interface WhatsappCatalogProps {
+    body: string;
+    footer?: string;
+    thumbnailProductId?: string;
+}
+export declare const WhatsappCatalog: (props: WhatsappCatalogProps) => any;

package/lib/esm/components/whatsapp-catalog.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { INPUT } from '@botonic/core';
+import { renderComponent } from '../util/react';
+import { Message } from './message';
+const serialize = (message) => {
+    return { text: message };
+};
+export const WhatsappCatalog = (props) => {
+    const renderBrowser = () => {
+        // Return a dummy message for browser
+        const message = `WhatsApp Catalog would be sent to the user.`;
+        return (_jsx(Message, Object.assign({ json: serialize(message) }, props, { type: INPUT.TEXT }, { children: message })));
+    };
+    const renderNode = () => {
+        return (
+        // @ts-ignore Property 'message' does not exist on type 'JSX.IntrinsicElements'.
+        _jsx("message", Object.assign({}, props, { body: props.body, footer: props.footer, thumbnailProductId: props.thumbnailProductId, type: INPUT.WHATSAPP_CATALOG })));
+    };
+    return renderComponent({ renderBrowser, renderNode });
+};
+//# sourceMappingURL=whatsapp-catalog.js.map

package/lib/esm/components/whatsapp-catalog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"whatsapp-catalog.js","sourceRoot":"","sources":["../../../src/components/whatsapp-catalog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAGrC,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AAQnC,MAAM,SAAS,GAAG,CAAC,OAAe,EAAE,EAAE;IACpC,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,CAAA;AAC1B,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAE,EAAE;IAC7D,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,qCAAqC;QACrC,MAAM,OAAO,GAAG,6CAA6C,CAAA;QAC7D,OAAO,CACL,KAAC,OAAO,kBAAC,IAAI,EAAE,SAAS,CAAC,OAAO,CAAC,IAAM,KAAK,IAAE,IAAI,EAAE,KAAK,CAAC,IAAI,gBAC3D,OAAO,IACA,CACX,CAAA;IACH,CAAC,CAAA;IAED,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,OAAO;QACL,gFAAgF;QAChF,kCACM,KAAK,IACT,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,kBAAkB,EAAE,KAAK,CAAC,kBAAkB,EAC5C,IAAI,EAAE,KAAK,CAAC,gBAAgB,IAC5B,CACH,CAAA;IACH,CAAC,CAAA;IAED,OAAO,eAAe,CAAC,EAAE,aAAa,EAAE,UAAU,EAAE,CAAC,CAAA;AACvD,CAAC,CAAA"}

package/lib/esm/components/whatsapp-media-carousel.d.ts

@@ -0,0 +1,46 @@
+type Parameters = TextParameter | CurrencyParameter | DateTimeParameter;
+interface TextParameter {
+    type: 'text';
+    text: string;
+}
+interface CurrencyParameter {
+    type: 'currency';
+    currency: {
+        fallbackValue: string;
+        code: string;
+        amount1000: number;
+    };
+}
+interface DateTimeParameter {
+    type: 'date_time';
+    dateTime: {
+        fallbackValue: string;
+    };
+}
+type CardButton = QuickReplyButton | UrlButton;
+interface Button {
+    type: 'quick_reply' | 'url';
+    buttonIndex?: number;
+}
+interface QuickReplyButton extends Button {
+    payload: string;
+}
+interface UrlButton extends Button {
+    urlVariable: string;
+}
+interface Card {
+    fileType: 'image' | 'video';
+    fileId: string;
+    cardIndex?: number;
+    bodyParameters?: Parameters[];
+    buttons?: CardButton[];
+    extraComponents?: Record<string, any>[];
+}
+export interface WhatsappMediaCarouselProps {
+    templateName: string;
+    templateLanguage: string;
+    cards: Card[];
+    bodyParameters?: Parameters[];
+}
+export declare const WhatsappMediaCarousel: (props: WhatsappMediaCarouselProps) => any;
+export {};

package/lib/esm/components/whatsapp-media-carousel.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { INPUT } from '@botonic/core';
+import { toSnakeCaseKeys } from '../util/functional';
+import { renderComponent } from '../util/react';
+import { Message } from './message';
+const serialize = (message) => {
+    return { text: message };
+};
+export const WhatsappMediaCarousel = (props) => {
+    const renderBrowser = () => {
+        // Return a dummy message for browser
+        const message = `WhatsApp Media Carousel would be sent to the user.`;
+        return (_jsx(Message, Object.assign({ json: serialize(message) }, props, { type: INPUT.TEXT }, { children: message })));
+    };
+    const getCards = (cards) => {
+        cards.forEach((card, index) => {
+            var _a;
+            if (!card.cardIndex) {
+                card.cardIndex = index;
+            }
+            (_a = card.buttons) === null || _a === void 0 ? void 0 : _a.forEach((button, index) => {
+                if (!button.buttonIndex) {
+                    button.buttonIndex = index;
+                }
+            });
+        });
+        return toSnakeCaseKeys(cards);
+    };
+    const renderNode = () => {
+        return (
+        // @ts-ignore Property 'message' does not exist on type 'JSX.IntrinsicElements'.
+        _jsx("message", Object.assign({}, props, { bodyParameters: JSON.stringify(toSnakeCaseKeys(props.bodyParameters)), cards: JSON.stringify(getCards(props.cards)), templateName: props.templateName, templateLanguage: props.templateLanguage, type: INPUT.WHATSAPP_MEDIA_CAROUSEL })));
+    };
+    return renderComponent({ renderBrowser, renderNode });
+};
+//# sourceMappingURL=whatsapp-media-carousel.js.map

package/lib/esm/components/whatsapp-media-carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"whatsapp-media-carousel.js","sourceRoot":"","sources":["../../../src/components/whatsapp-media-carousel.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAGrC,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AAsDnC,MAAM,SAAS,GAAG,CAAC,OAAe,EAAE,EAAE;IACpC,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,CAAA;AAC1B,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAAiC,EAAE,EAAE;IACzE,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,qCAAqC;QACrC,MAAM,OAAO,GAAG,oDAAoD,CAAA;QACpE,OAAO,CACL,KAAC,OAAO,kBAAC,IAAI,EAAE,SAAS,CAAC,OAAO,CAAC,IAAM,KAAK,IAAE,IAAI,EAAE,KAAK,CAAC,IAAI,gBAC3D,OAAO,IACA,CACX,CAAA;IACH,CAAC,CAAA;IAED,MAAM,QAAQ,GAAG,CAAC,KAAa,EAAE,EAAE;QACjC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;;YAC5B,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;gBACnB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAA;aACvB;YACD,MAAA,IAAI,CAAC,OAAO,0CAAE,OAAO,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;gBACtC,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE;oBACvB,MAAM,CAAC,WAAW,GAAG,KAAK,CAAA;iBAC3B;YACH,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;QACF,OAAO,eAAe,CAAC,KAAK,CAAC,CAAA;IAC/B,CAAC,CAAA;IAED,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,OAAO;QACL,gFAAgF;QAChF,kCACM,KAAK,IACT,cAAc,EAAE,IAAI,CAAC,SAAS,CAAC,eAAe,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,EACrE,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAC5C,YAAY,EAAE,KAAK,CAAC,YAAY,EAChC,gBAAgB,EAAE,KAAK,CAAC,gBAAgB,EACxC,IAAI,EAAE,KAAK,CAAC,uBAAuB,IACnC,CACH,CAAA;IACH,CAAC,CAAA;IAED,OAAO,eAAe,CAAC,EAAE,aAAa,EAAE,UAAU,EAAE,CAAC,CAAA;AACvD,CAAC,CAAA"}

package/lib/esm/components/whatsapp-product-carousel.d.ts

@@ -0,0 +1,32 @@
+type Parameters = TextParameter | CurrencyParameter | DateTimeParameter;
+interface TextParameter {
+    type: 'text';
+    text: string;
+}
+interface CurrencyParameter {
+    type: 'currency';
+    currency: {
+        fallbackValue: string;
+        code: string;
+        amount1000: number;
+    };
+}
+interface DateTimeParameter {
+    type: 'date_time';
+    dateTime: {
+        fallbackValue: string;
+    };
+}
+interface Card {
+    productRetailerId: string;
+    catalogId: string;
+    cardIndex?: number;
+}
+export interface WhatsappProductCarouselProps {
+    templateName: string;
+    templateLanguage: string;
+    cards: Card[];
+    bodyParameters?: Parameters[];
+}
+export declare const WhatsappProductCarousel: (props: WhatsappProductCarouselProps) => any;
+export {};

package/lib/esm/components/whatsapp-product-carousel.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { INPUT } from '@botonic/core';
+import { toSnakeCaseKeys } from '../util/functional';
+import { renderComponent } from '../util/react';
+import { Message } from './message';
+const serialize = (message) => {
+    return { text: message };
+};
+export const WhatsappProductCarousel = (props) => {
+    const renderBrowser = () => {
+        // Return a dummy message for browser
+        const message = `WhatsApp Product Carousel would be sent to the user.`;
+        return (_jsx(Message, Object.assign({ json: serialize(message) }, props, { type: INPUT.TEXT }, { children: message })));
+    };
+    const getCards = (cards) => {
+        cards.forEach((card, index) => {
+            if (!card.cardIndex) {
+                card.cardIndex = index;
+            }
+        });
+        return toSnakeCaseKeys(cards);
+    };
+    const renderNode = () => {
+        return (
+        // @ts-ignore Property 'message' does not exist on type 'JSX.IntrinsicElements'.
+        _jsx("message", Object.assign({}, props, { bodyParameters: JSON.stringify(toSnakeCaseKeys(props.bodyParameters)), cards: JSON.stringify(getCards(props.cards)), templateName: props.templateName, templateLanguage: props.templateLanguage, type: INPUT.WHATSAPP_PRODUCT_CAROUSEL })));
+    };
+    return renderComponent({ renderBrowser, renderNode });
+};
+//# sourceMappingURL=whatsapp-product-carousel.js.map

package/lib/esm/components/whatsapp-product-carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"whatsapp-product-carousel.js","sourceRoot":"","sources":["../../../src/components/whatsapp-product-carousel.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAGrC,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AAoCnC,MAAM,SAAS,GAAG,CAAC,OAAe,EAAE,EAAE;IACpC,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,CAAA;AAC1B,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,uBAAuB,GAAG,CACrC,KAAmC,EACnC,EAAE;IACF,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,qCAAqC;QACrC,MAAM,OAAO,GAAG,sDAAsD,CAAA;QACtE,OAAO,CACL,KAAC,OAAO,kBAAC,IAAI,EAAE,SAAS,CAAC,OAAO,CAAC,IAAM,KAAK,IAAE,IAAI,EAAE,KAAK,CAAC,IAAI,gBAC3D,OAAO,IACA,CACX,CAAA;IACH,CAAC,CAAA;IAED,MAAM,QAAQ,GAAG,CAAC,KAAa,EAAE,EAAE;QACjC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YAC5B,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;gBACnB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAA;aACvB;QACH,CAAC,CAAC,CAAA;QACF,OAAO,eAAe,CAAC,KAAK,CAAC,CAAA;IAC/B,CAAC,CAAA;IAED,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,OAAO;QACL,gFAAgF;QAChF,kCACM,KAAK,IACT,cAAc,EAAE,IAAI,CAAC,SAAS,CAAC,eAAe,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,EACrE,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAC5C,YAAY,EAAE,KAAK,CAAC,YAAY,EAChC,gBAAgB,EAAE,KAAK,CAAC,gBAAgB,EACxC,IAAI,EAAE,KAAK,CAAC,yBAAyB,IACrC,CACH,CAAA;IACH,CAAC,CAAA;IAED,OAAO,eAAe,CAAC,EAAE,aAAa,EAAE,UAAU,EAAE,CAAC,CAAA;AACvD,CAAC,CAAA"}

package/lib/esm/components/whatsapp-product-list.d.ts

@@ -0,0 +1,15 @@
+export interface ProductItem {
+    productRetailerId: string;
+}
+export interface WhatsappProductListSection {
+    title: string;
+    productItems: ProductItem[];
+}
+export interface WhatsappProductListProps {
+    body: string;
+    header: string;
+    catalogId: string;
+    sections: WhatsappProductListSection[];
+    footer?: string;
+}
+export declare const WhatsappProductList: (props: WhatsappProductListProps) => any;

package/lib/esm/components/whatsapp-product-list.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { INPUT } from '@botonic/core';
+import { toSnakeCaseKeys } from '../util/functional';
+import { renderComponent } from '../util/react';
+import { Message } from './message';
+const serialize = (message) => {
+    return { text: message };
+};
+export const WhatsappProductList = (props) => {
+    const renderBrowser = () => {
+        // Return a dummy message for browser
+        const message = `WhatsApp Product List would be sent to the user.`;
+        return (_jsx(Message, Object.assign({ json: serialize(message) }, props, { type: INPUT.TEXT }, { children: message })));
+    };
+    const renderNode = () => {
+        return (
+        // @ts-ignore Property 'message' does not exist on type 'JSX.IntrinsicElements'.
+        _jsx("message", Object.assign({}, props, { body: props.body, footer: props.footer, header: props.header, sections: JSON.stringify(toSnakeCaseKeys(props.sections)), catalogId: props.catalogId, type: INPUT.WHATSAPP_PRODUCT_LIST })));
+    };
+    return renderComponent({ renderBrowser, renderNode });
+};
+//# sourceMappingURL=whatsapp-product-list.js.map

package/lib/esm/components/whatsapp-product-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"whatsapp-product-list.js","sourceRoot":"","sources":["../../../src/components/whatsapp-product-list.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAGrC,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AAmBnC,MAAM,SAAS,GAAG,CAAC,OAAe,EAAE,EAAE;IACpC,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,CAAA;AAC1B,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,KAA+B,EAAE,EAAE;IACrE,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,qCAAqC;QACrC,MAAM,OAAO,GAAG,kDAAkD,CAAA;QAClE,OAAO,CACL,KAAC,OAAO,kBAAC,IAAI,EAAE,SAAS,CAAC,OAAO,CAAC,IAAM,KAAK,IAAE,IAAI,EAAE,KAAK,CAAC,IAAI,gBAC3D,OAAO,IACA,CACX,CAAA;IACH,CAAC,CAAA;IAED,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,OAAO;QACL,gFAAgF;QAChF,kCACM,KAAK,IACT,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,eAAe,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,EACzD,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,IAAI,EAAE,KAAK,CAAC,qBAAqB,IACjC,CACH,CAAA;IACH,CAAC,CAAA;IAED,OAAO,eAAe,CAAC,EAAE,aAAa,EAAE,UAAU,EAAE,CAAC,CAAA;AACvD,CAAC,CAAA"}

package/lib/esm/components/whatsapp-product.d.ts

@@ -0,0 +1,7 @@
+export interface WhatsappProductProps {
+    body: string;
+    catalogId: string;
+    productId: string;
+    footer?: string;
+}
+export declare const WhatsappProduct: (props: WhatsappProductProps) => any;

package/lib/esm/components/whatsapp-product.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { INPUT } from '@botonic/core';
+import { renderComponent } from '../util/react';
+import { Message } from './message';
+const serialize = (message) => {
+    return { text: message };
+};
+export const WhatsappProduct = (props) => {
+    const renderBrowser = () => {
+        // Return a dummy message for browser
+        const message = `WhatsApp Product would be sent to the user.`;
+        return (_jsx(Message, Object.assign({ json: serialize(message) }, props, { type: INPUT.TEXT }, { children: message })));
+    };
+    const renderNode = () => {
+        return (
+        // @ts-ignore Property 'message' does not exist on type 'JSX.IntrinsicElements'.
+        _jsx("message", Object.assign({}, props, { body: props.body, footer: props.footer, catalogId: props.catalogId, productId: props.productId, type: INPUT.WHATSAPP_PRODUCT })));
+    };
+    return renderComponent({ renderBrowser, renderNode });
+};
+//# sourceMappingURL=whatsapp-product.js.map

package/lib/esm/components/whatsapp-product.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"whatsapp-product.js","sourceRoot":"","sources":["../../../src/components/whatsapp-product.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAGrC,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AASnC,MAAM,SAAS,GAAG,CAAC,OAAe,EAAE,EAAE;IACpC,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,CAAA;AAC1B,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAE,EAAE;IAC7D,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,qCAAqC;QACrC,MAAM,OAAO,GAAG,6CAA6C,CAAA;QAC7D,OAAO,CACL,KAAC,OAAO,kBAAC,IAAI,EAAE,SAAS,CAAC,OAAO,CAAC,IAAM,KAAK,IAAE,IAAI,EAAE,KAAK,CAAC,IAAI,gBAC3D,OAAO,IACA,CACX,CAAA;IACH,CAAC,CAAA;IAED,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,OAAO;QACL,gFAAgF;QAChF,kCACM,KAAK,IACT,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,IAAI,EAAE,KAAK,CAAC,gBAAgB,IAC5B,CACH,CAAA;IACH,CAAC,CAAA;IAED,OAAO,eAAe,CAAC,EAAE,aAAa,EAAE,UAAU,EAAE,CAAC,CAAA;AACvD,CAAC,CAAA"}

package/lib/esm/util/functional.d.ts

@@ -0,0 +1,3 @@
+type Input = Record<string, any> | Record<string, any>[] | undefined;
+export declare function toSnakeCaseKeys(input: Input): Input;
+export {};

package/lib/esm/util/functional.js

@@ -0,0 +1,26 @@
+function camelCaseToSnake(str) {
+    return str
+        .replace(/([a-z])([A-Z])/g, '$1_$2')
+        .replace(/([A-Za-z])(\d)/g, '$1_$2')
+        .replace(/(\d)([A-Za-z])/g, '$1_$2')
+        .toLowerCase();
+}
+export function toSnakeCaseKeys(input) {
+    if (Array.isArray(input)) {
+        return input.map(item => toSnakeCaseKeys(item));
+    }
+    if (typeof input === 'object' && input !== null) {
+        const result = Object.keys(input).reduce((acc, key) => {
+            const snakeKey = camelCaseToSnake(key);
+            const value = input[key];
+            acc[snakeKey] =
+                typeof value === 'object' && value !== null
+                    ? toSnakeCaseKeys(value)
+                    : value;
+            return acc;
+        }, {});
+        return result;
+    }
+    return input;
+}
+//# sourceMappingURL=functional.js.map

package/lib/esm/util/functional.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"functional.js","sourceRoot":"","sources":["../../../src/util/functional.ts"],"names":[],"mappings":"AAAA,SAAS,gBAAgB,CAAC,GAAW;IACnC,OAAO,GAAG;SACP,OAAO,CAAC,iBAAiB,EAAE,OAAO,CAAC;SACnC,OAAO,CAAC,iBAAiB,EAAE,OAAO,CAAC;SACnC,OAAO,CAAC,iBAAiB,EAAE,OAAO,CAAC;SACnC,WAAW,EAAE,CAAA;AAClB,CAAC;AAGD,MAAM,UAAU,eAAe,CAAC,KAAY;IAC1C,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;QACxB,OAAO,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC,CAAA;KAChD;IAED,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,EAAE;QAC/C,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE;YACpD,MAAM,QAAQ,GAAG,gBAAgB,CAAC,GAAG,CAAC,CAAA;YACtC,MAAM,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC,CAAA;YACxB,GAAG,CAAC,QAAQ,CAAC;gBACX,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI;oBACzC,CAAC,CAAC,eAAe,CAAC,KAAK,CAAC;oBACxB,CAAC,CAAC,KAAK,CAAA;YAEX,OAAO,GAAG,CAAA;QACZ,CAAC,EAAE,EAAE,CAAC,CAAA;QAEN,OAAO,MAAM,CAAA;KACd;IAED,OAAO,KAAK,CAAA;AACd,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botonic/react",
-  "version": "0.31.0",
+  "version": "0.31.1-alpha.1",
   "license": "MIT",
   "description": "Build Chatbots using React",
   "main": "./lib/cjs",
@@ -20,7 +20,7 @@
     "lint_core": "../../node_modules/.bin/eslint_d --cache --quiet '.*.js' '*.js' 'src/**/*.js*' --fix"
   },
   "dependencies": {
-    "@botonic/core": "^0.31.0",
+    "@botonic/core": "0.31.1-alpha.0",
     "axios": "^1.7.9",
     "emoji-picker-react": "^4.12.0",
     "lodash.merge": "^4.6.2",

package/src/components/index.ts

@@ -30,8 +30,24 @@ export {
   WhatsappButtonListRowProps,
   WhatsappButtonListSectionProps,
 } from './whatsapp-button-list'
+export { WhatsappCatalog, WhatsappCatalogProps } from './whatsapp-catalog'
 export {
   WhatsappCTAUrlButton,
   WhatsappCTAUrlButtonProps,
 } from './whatsapp-cta-url-button'
+export {
+  WhatsappMediaCarousel,
+  WhatsappMediaCarouselProps,
+} from './whatsapp-media-carousel'
+export { WhatsappProduct } from './whatsapp-product'
+export {
+  WhatsappProductCarousel,
+  WhatsappProductCarouselProps,
+} from './whatsapp-product-carousel'
+export {
+  ProductItem,
+  WhatsappProductList,
+  WhatsappProductListProps,
+  WhatsappProductListSection,
+} from './whatsapp-product-list'
 export { WhatsappTemplate } from './whatsapp-template'

package/src/components/whatsapp-catalog.tsx

@@ -0,0 +1,42 @@
+import { INPUT } from '@botonic/core'
+import React from 'react'
+
+import { renderComponent } from '../util/react'
+import { Message } from './message'
+
+export interface WhatsappCatalogProps {
+  body: string
+  footer?: string
+  thumbnailProductId?: string
+}
+
+const serialize = (message: string) => {
+  return { text: message }
+}
+
+export const WhatsappCatalog = (props: WhatsappCatalogProps) => {
+  const renderBrowser = () => {
+    // Return a dummy message for browser
+    const message = `WhatsApp Catalog would be sent to the user.`
+    return (
+      <Message json={serialize(message)} {...props} type={INPUT.TEXT}>
+        {message}
+      </Message>
+    )
+  }
+
+  const renderNode = () => {
+    return (
+      // @ts-ignore Property 'message' does not exist on type 'JSX.IntrinsicElements'.
+      <message
+        {...props}
+        body={props.body}
+        footer={props.footer}
+        thumbnailProductId={props.thumbnailProductId}
+        type={INPUT.WHATSAPP_CATALOG}
+      />
+    )
+  }
+
+  return renderComponent({ renderBrowser, renderNode })
+}

package/src/components/whatsapp-media-carousel.tsx

@@ -0,0 +1,104 @@
+import { INPUT } from '@botonic/core'
+import React from 'react'
+
+import { toSnakeCaseKeys } from '../util/functional'
+import { renderComponent } from '../util/react'
+import { Message } from './message'
+
+type Parameters = TextParameter | CurrencyParameter | DateTimeParameter
+
+interface TextParameter {
+  type: 'text'
+  text: string
+}
+
+interface CurrencyParameter {
+  type: 'currency'
+  currency: {
+    fallbackValue: string
+    code: string
+    amount1000: number
+  }
+}
+
+interface DateTimeParameter {
+  type: 'date_time'
+  dateTime: { fallbackValue: string }
+}
+
+type CardButton = QuickReplyButton | UrlButton
+
+interface Button {
+  type: 'quick_reply' | 'url'
+  buttonIndex?: number
+}
+
+interface QuickReplyButton extends Button {
+  payload: string
+}
+
+interface UrlButton extends Button {
+  urlVariable: string
+}
+
+interface Card {
+  fileType: 'image' | 'video'
+  fileId: string
+  cardIndex?: number
+  bodyParameters?: Parameters[]
+  buttons?: CardButton[]
+  extraComponents?: Record<string, any>[]
+}
+
+export interface WhatsappMediaCarouselProps {
+  templateName: string
+  templateLanguage: string
+  cards: Card[]
+  bodyParameters?: Parameters[]
+}
+
+const serialize = (message: string) => {
+  return { text: message }
+}
+
+export const WhatsappMediaCarousel = (props: WhatsappMediaCarouselProps) => {
+  const renderBrowser = () => {
+    // Return a dummy message for browser
+    const message = `WhatsApp Media Carousel would be sent to the user.`
+    return (
+      <Message json={serialize(message)} {...props} type={INPUT.TEXT}>
+        {message}
+      </Message>
+    )
+  }
+
+  const getCards = (cards: Card[]) => {
+    cards.forEach((card, index) => {
+      if (!card.cardIndex) {
+        card.cardIndex = index
+      }
+      card.buttons?.forEach((button, index) => {
+        if (!button.buttonIndex) {
+          button.buttonIndex = index
+        }
+      })
+    })
+    return toSnakeCaseKeys(cards)
+  }
+
+  const renderNode = () => {
+    return (
+      // @ts-ignore Property 'message' does not exist on type 'JSX.IntrinsicElements'.
+      <message
+        {...props}
+        bodyParameters={JSON.stringify(toSnakeCaseKeys(props.bodyParameters))}
+        cards={JSON.stringify(getCards(props.cards))}
+        templateName={props.templateName}
+        templateLanguage={props.templateLanguage}
+        type={INPUT.WHATSAPP_MEDIA_CAROUSEL}
+      />
+    )
+  }
+
+  return renderComponent({ renderBrowser, renderNode })
+}

package/src/components/whatsapp-product-carousel.tsx

@@ -0,0 +1,83 @@
+import { INPUT } from '@botonic/core'
+import React from 'react'
+
+import { toSnakeCaseKeys } from '../util/functional'
+import { renderComponent } from '../util/react'
+import { Message } from './message'
+
+type Parameters = TextParameter | CurrencyParameter | DateTimeParameter
+
+interface TextParameter {
+  type: 'text'
+  text: string
+}
+
+interface CurrencyParameter {
+  type: 'currency'
+  currency: {
+    fallbackValue: string
+    code: string
+    amount1000: number
+  }
+}
+
+interface DateTimeParameter {
+  type: 'date_time'
+  dateTime: { fallbackValue: string }
+}
+
+interface Card {
+  productRetailerId: string
+  catalogId: string
+  cardIndex?: number
+}
+
+export interface WhatsappProductCarouselProps {
+  templateName: string
+  templateLanguage: string
+  cards: Card[]
+  bodyParameters?: Parameters[]
+}
+
+const serialize = (message: string) => {
+  return { text: message }
+}
+
+export const WhatsappProductCarousel = (
+  props: WhatsappProductCarouselProps
+) => {
+  const renderBrowser = () => {
+    // Return a dummy message for browser
+    const message = `WhatsApp Product Carousel would be sent to the user.`
+    return (
+      <Message json={serialize(message)} {...props} type={INPUT.TEXT}>
+        {message}
+      </Message>
+    )
+  }
+
+  const getCards = (cards: Card[]) => {
+    cards.forEach((card, index) => {
+      if (!card.cardIndex) {
+        card.cardIndex = index
+      }
+    })
+    return toSnakeCaseKeys(cards)
+  }
+
+  const renderNode = () => {
+    return (
+      // @ts-ignore Property 'message' does not exist on type 'JSX.IntrinsicElements'.
+      <message
+        {...props}
+        bodyParameters={JSON.stringify(toSnakeCaseKeys(props.bodyParameters))}
+        cards={JSON.stringify(getCards(props.cards))}
+        templateName={props.templateName}
+        templateLanguage={props.templateLanguage}
+        type={INPUT.WHATSAPP_PRODUCT_CAROUSEL}
+      />
+    )
+  }
+
+  return renderComponent({ renderBrowser, renderNode })
+}

package/src/components/whatsapp-product-list.tsx

@@ -0,0 +1,56 @@
+import { INPUT } from '@botonic/core'
+import React from 'react'
+
+import { toSnakeCaseKeys } from '../util/functional'
+import { renderComponent } from '../util/react'
+import { Message } from './message'
+
+export interface ProductItem {
+  productRetailerId: string
+}
+
+export interface WhatsappProductListSection {
+  title: string
+  productItems: ProductItem[]
+}
+
+export interface WhatsappProductListProps {
+  body: string
+  header: string
+  catalogId: string
+  sections: WhatsappProductListSection[]
+  footer?: string
+}
+
+const serialize = (message: string) => {
+  return { text: message }
+}
+
+export const WhatsappProductList = (props: WhatsappProductListProps) => {
+  const renderBrowser = () => {
+    // Return a dummy message for browser
+    const message = `WhatsApp Product List would be sent to the user.`
+    return (
+      <Message json={serialize(message)} {...props} type={INPUT.TEXT}>
+        {message}
+      </Message>
+    )
+  }
+
+  const renderNode = () => {
+    return (
+      // @ts-ignore Property 'message' does not exist on type 'JSX.IntrinsicElements'.
+      <message
+        {...props}
+        body={props.body}
+        footer={props.footer}
+        header={props.header}
+        sections={JSON.stringify(toSnakeCaseKeys(props.sections))}
+        catalogId={props.catalogId}
+        type={INPUT.WHATSAPP_PRODUCT_LIST}
+      />
+    )
+  }
+
+  return renderComponent({ renderBrowser, renderNode })
+}

package/src/components/whatsapp-product.tsx

@@ -0,0 +1,44 @@
+import { INPUT } from '@botonic/core'
+import React from 'react'
+
+import { renderComponent } from '../util/react'
+import { Message } from './message'
+
+export interface WhatsappProductProps {
+  body: string
+  catalogId: string
+  productId: string
+  footer?: string
+}
+
+const serialize = (message: string) => {
+  return { text: message }
+}
+
+export const WhatsappProduct = (props: WhatsappProductProps) => {
+  const renderBrowser = () => {
+    // Return a dummy message for browser
+    const message = `WhatsApp Product would be sent to the user.`
+    return (
+      <Message json={serialize(message)} {...props} type={INPUT.TEXT}>
+        {message}
+      </Message>
+    )
+  }
+
+  const renderNode = () => {
+    return (
+      // @ts-ignore Property 'message' does not exist on type 'JSX.IntrinsicElements'.
+      <message
+        {...props}
+        body={props.body}
+        footer={props.footer}
+        catalogId={props.catalogId}
+        productId={props.productId}
+        type={INPUT.WHATSAPP_PRODUCT}
+      />
+    )
+  }
+
+  return renderComponent({ renderBrowser, renderNode })
+}

package/src/util/functional.ts

@@ -0,0 +1,31 @@
+function camelCaseToSnake(str: string): string {
+  return str
+    .replace(/([a-z])([A-Z])/g, '$1_$2')
+    .replace(/([A-Za-z])(\d)/g, '$1_$2')
+    .replace(/(\d)([A-Za-z])/g, '$1_$2')
+    .toLowerCase()
+}
+type Input = Record<string, any> | Record<string, any>[] | undefined
+
+export function toSnakeCaseKeys(input: Input): Input {
+  if (Array.isArray(input)) {
+    return input.map(item => toSnakeCaseKeys(item))
+  }
+
+  if (typeof input === 'object' && input !== null) {
+    const result = Object.keys(input).reduce((acc, key) => {
+      const snakeKey = camelCaseToSnake(key)
+      const value = input[key]
+      acc[snakeKey] =
+        typeof value === 'object' && value !== null
+          ? toSnakeCaseKeys(value)
+          : value
+
+      return acc
+    }, {})
+
+    return result
+  }
+
+  return input
+}