From 5de727fd97bb51c835865a1fdc2274c1a02ce3ce Mon Sep 17 00:00:00 2001
From: Albert <albert.gomariz63@gmail.com>
Date: Mon, 23 Dec 2024 15:21:30 +0100
Subject: [PATCH] botonic-react: add whatsapp catalog component

---
 .../botonic-react/src/components/index.ts     |  1 +
 .../src/components/whatsapp-catalog.tsx       | 42 +++++++++++++++++++
 2 files changed, 43 insertions(+)
 create mode 100644 packages/botonic-react/src/components/whatsapp-catalog.tsx

diff --git a/packages/botonic-react/src/components/index.ts b/packages/botonic-react/src/components/index.ts
index ff119230d5..5ce0957787 100644
--- a/packages/botonic-react/src/components/index.ts
+++ b/packages/botonic-react/src/components/index.ts
@@ -25,6 +25,7 @@ export {
   WhatsappButtonListRowProps,
   WhatsappButtonListSectionProps,
 } from './whatsapp-button-list'
+export { WhatsappCatalog, WhatsappCatalogProps } from './whatsapp-catalog'
 export {
   WhatsappCTAUrlButton,
   WhatsappCTAUrlButtonProps,
diff --git a/packages/botonic-react/src/components/whatsapp-catalog.tsx b/packages/botonic-react/src/components/whatsapp-catalog.tsx
new file mode 100644
index 0000000000..3b08fedcf0
--- /dev/null
+++ b/packages/botonic-react/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 })
+}