botonic-react: add whatsapp catalog component

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,

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 })
+}