plugin-flow-builder: add whatsapp CTA url button

packages/botonic-plugin-flow-builder/src/content-fields/flow-button.tsx

@@ -36,8 +36,8 @@ export class FlowButton extends ContentFieldsBase {
       newButton.payload = payloadNode.content.payload
     }
     if (cmsButton.url && urlId) {
-      const payloadNode = cmsApi.getNodeById<HtUrlNode>(urlId)
-      newButton.url = payloadNode.content.url
+      const urlNode = cmsApi.getNodeById<HtUrlNode>(urlId)
+      newButton.url = urlNode.content.url
     }
 
     return newButton

packages/botonic-plugin-flow-builder/src/content-fields/flow-whatsapp-cta-url-button.tsx

@@ -0,0 +1,63 @@
+import { WhatsappCTAUrlButton } from '@botonic/react'
+import React from 'react'
+
+import { FlowBuilderApi } from '../api'
+import { ContentFieldsBase } from './content-fields-base'
+import { FlowButton } from './flow-button'
+import { HtUrlNode } from './hubtype-fields'
+import { HtWhatsappCTAUrlButtonNode } from './hubtype-fields/whatsapp-cta-url-button'
+
+export class FlowWhatsappCtaUrlButtonNode extends ContentFieldsBase {
+  public code = ''
+  public text = ''
+  public header?: string
+  public footer?: string
+  public displayText = ''
+  public url: string = ''
+
+  static fromHubtypeCMS(
+    component: HtWhatsappCTAUrlButtonNode,
+    locale: string,
+    cmsApi: FlowBuilderApi
+  ): FlowWhatsappCtaUrlButtonNode {
+    const whatsappCtaUrlButton = new FlowWhatsappCtaUrlButtonNode(component.id)
+    whatsappCtaUrlButton.code = component.code
+    whatsappCtaUrlButton.text = this.getTextByLocale(
+      locale,
+      component.content.text
+    )
+    whatsappCtaUrlButton.header = this.getTextByLocale(
+      locale,
+      component.content.header
+    )
+    whatsappCtaUrlButton.footer = this.getTextByLocale(
+      locale,
+      component.content.footer
+    )
+    const button = FlowButton.fromHubtypeCMS(
+      component.content.button,
+      locale,
+      cmsApi
+    )
+    whatsappCtaUrlButton.displayText = button.text
+    const urlId = FlowButton.getUrlId(component.content.button, locale)
+    if (urlId) {
+      const urlNode = cmsApi.getNodeById<HtUrlNode>(urlId)
+      whatsappCtaUrlButton.url = urlNode.content.url
+    }
+    return whatsappCtaUrlButton
+  }
+
+  toBotonic(id: string): JSX.Element {
+    return (
+      <WhatsappCTAUrlButton
+        key={id}
+        body={this.text}
+        header={this.header}
+        footer={this.footer}
+        displayText={this.displayText}
+        url={this.url}
+      />
+    )
+  }
+}

packages/botonic-plugin-flow-builder/src/content-fields/hubtype-fields/node-types.ts

@@ -10,6 +10,7 @@ export enum HtNodeWithContentType {
   FALLBACK = 'fallback',
   VIDEO = 'video',
   WHATSAPP_BUTTON_LIST = 'whatsapp-button-list',
+  WHATSAPP_CTA_URL_BUTTON = 'whatsapp-cta-url-button',
 }
 
 export enum HtNodeWithoutContentType {

packages/botonic-plugin-flow-builder/src/content-fields/hubtype-fields/nodes.ts

@@ -13,6 +13,7 @@ import { HtTextNode } from './text'
 import { HtUrlNode } from './url'
 import { HtVideoNode } from './video'
 import { HtWhatsappButtonListNode } from './whatsapp-button-list'
+import { HtWhatsappCTAUrlButtonNode } from './whatsapp-cta-url-button'
 
 export type HtNodeWithContent =
   | HtTextNode
@@ -25,7 +26,8 @@ export type HtNodeWithContent =
   | HtFunctionNode
   | HtFallbackNode
   | HtWhatsappButtonListNode
-  | HtSmartIntentNode
+  | HtWhatsappCTAUrlButtonNode
+  | HtSmartIntentNode
 
 export type HtNodeWithoutContent =
   | HtUrlNode

packages/botonic-plugin-flow-builder/src/content-fields/hubtype-fields/whatsapp-cta-url-button.ts

@@ -0,0 +1,13 @@
+import { HtButton } from './button'
+import { HtBaseNode, HtTextLocale } from './common'
+import { HtNodeWithContentType } from './node-types'
+
+export interface HtWhatsappCTAUrlButtonNode extends HtBaseNode {
+  type: HtNodeWithContentType.WHATSAPP_CTA_URL_BUTTON
+  content: {
+    text: HtTextLocale[]
+    header: HtTextLocale[]
+    footer: HtTextLocale[]
+    button: HtButton
+  }
+}

packages/botonic-plugin-flow-builder/src/content-fields/index.ts

@@ -3,6 +3,7 @@ import { FlowHandoff } from './flow-handoff'
 import { FlowImage } from './flow-image'
 import { FlowText } from './flow-text'
 import { FlowVideo } from './flow-video'
+import { FlowWhatsappCtaUrlButtonNode } from './flow-whatsapp-cta-url-button'
 import { FlowWhatsappButtonList } from './whatsapp-button-list/flow-whatsapp-button-list'
 
 export { ContentFieldsBase } from './content-fields-base'
@@ -17,4 +18,5 @@ export type FlowContent =
   | FlowText
   | FlowVideo
   | FlowWhatsappButtonList
+  | FlowWhatsappCtaUrlButtonNode
   | FlowHandoff

packages/botonic-plugin-flow-builder/src/index.ts

@@ -16,6 +16,7 @@ import {
   FlowVideo,
   FlowWhatsappButtonList,
 } from './content-fields'
+import { FlowWhatsappCtaUrlButtonNode } from './content-fields/flow-whatsapp-cta-url-button'
 import {
   HtFlowBuilderData,
   HtFunctionArgument,
@@ -170,6 +171,12 @@ export default class BotonicPluginFlowBuilder implements Plugin {
           locale,
           this.cmsApi
         )
+      case HtNodeWithContentType.WHATSAPP_CTA_URL_BUTTON:
+        return FlowWhatsappCtaUrlButtonNode.fromHubtypeCMS(
+          hubtypeContent,
+          locale,
+          this.cmsApi
+        )
       case HtNodeWithContentType.HANDOFF:
         return FlowHandoff.fromHubtypeCMS(hubtypeContent, locale, this.cmsApi)
       default: