@botonic/plugin-flow-builder 0.46.1 → 0.47.0

package/src/content-fields/flow-go-to-flow.tsx

@@ -1,12 +1,10 @@
 import {
+  type BotContext,
   EventAction,
   type EventRedirectFlow,
-  INPUT,
-  PROVIDER,
 } from '@botonic/core'
-import type { ActionRequest } from '@botonic/react'
+
 import type { FlowBuilderApi } from '../api'
-import { AI_AGENTS_FLOW_NAME } from '../constants'
 import {
   getCommonFlowContentEventArgsForContentId,
   trackEvent,
@@ -34,26 +32,9 @@ export class FlowGoToFlow extends ContentFieldsBase {
     return newGoToFlow
   }
 
-  static async resolveToAiAgentsFlow(
-    botContext: ActionRequest,
-    component: HtGoToFlow,
-    cmsApi: FlowBuilderApi
-  ): Promise<void> {
-    const goToFlowContent = FlowGoToFlow.fromHubtypeCMS(component, cmsApi)
-    if (goToFlowContent.flowTargetName === AI_AGENTS_FLOW_NAME) {
-      await goToFlowContent.trackFlow(botContext)
-
-      botContext.input.payload = undefined
-      if (botContext.session.user.provider === PROVIDER.WHATSAPP) {
-        botContext.input.type = INPUT.TEXT
-        botContext.input.data = botContext.input.referral
-      }
-    }
-  }
-
-  async trackFlow(request: ActionRequest): Promise<void> {
+  async trackFlow(botContext: BotContext): Promise<void> {
     const { flowThreadId, flowId, flowName, flowNodeId, flowNodeContentId } =
-      getCommonFlowContentEventArgsForContentId(request, this.id)
+      getCommonFlowContentEventArgsForContentId(botContext, this.id)
     const eventGoToFlow: EventRedirectFlow = {
       action: EventAction.RedirectFlow,
       flowThreadId,
@@ -66,7 +47,12 @@ export class FlowGoToFlow extends ContentFieldsBase {
       flowNodeIsMeaningful: false,
     }
     const { action, ...eventArgs } = eventGoToFlow
-    await trackEvent(request, action, eventArgs)
+    await trackEvent(botContext, action, eventArgs)
+  }
+
+  async processContent(botContext: BotContext): Promise<void> {
+    await this.trackFlow(botContext)
+    return
   }
 
   toBotonic(): JSX.Element {

package/src/content-fields/flow-handoff.tsx

@@ -1,5 +1,11 @@
-import { HandOffBuilder, HelpdeskEvent, isDev, isWebchat } from '@botonic/core'
-import { type ActionRequest, WebchatSettings } from '@botonic/react'
+import {
+  type BotContext,
+  HandOffBuilder,
+  HelpdeskEvent,
+  isDev,
+  isWebchat,
+} from '@botonic/core'
+import { WebchatSettings } from '@botonic/react'
 
 import type { FlowBuilderApi } from '../api'
 import { getCommonFlowContentEventArgsForContentId } from '../tracking'
@@ -47,8 +53,8 @@ export class FlowHandoff extends ContentFieldsBase {
     return undefined
   }
 
-  async doHandoff(request: ActionRequest): Promise<void> {
-    const handOffBuilder = new HandOffBuilder(request.session)
+  async doHandoff(botContext: BotContext): Promise<void> {
+    const handOffBuilder = new HandOffBuilder(botContext.session)
     handOffBuilder.withAutoAssignOnWaiting(this.handoffAutoAssign)
 
     if (this.hasQueuePositionChangedNotificationsEnabled) {
@@ -62,12 +68,12 @@ export class FlowHandoff extends ContentFieldsBase {
     }
 
     if (this.queue) {
-      const language = request.getSystemLocale()
+      const language = botContext.getSystemLocale()
 
       handOffBuilder.withQueue(this.queue.id)
 
       const { flowId, flowName, flowNodeId, flowNodeContentId } =
-        getCommonFlowContentEventArgsForContentId(request, this.id)
+        getCommonFlowContentEventArgsForContentId(botContext, this.id)
 
       handOffBuilder.withBotEvent({
         flowId,
@@ -85,13 +91,18 @@ export class FlowHandoff extends ContentFieldsBase {
   }
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  async trackFlow(_request: ActionRequest): Promise<void> {
+  async trackFlow(_botContext: BotContext): Promise<void> {
     // TODO: Not apply for this content because backend track handoff success event
   }
 
-  toBotonic(id: string, request: ActionRequest): JSX.Element {
-    return isDev(request.session) || isWebchat(request.session) ? (
-      <WebchatSettings key={id} enableUserInput={true} />
+  async processContent(botContext: BotContext): Promise<void> {
+    await this.doHandoff(botContext)
+    return
+  }
+
+  toBotonic(botContext: BotContext): JSX.Element {
+    return isDev(botContext.session) || isWebchat(botContext.session) ? (
+      <WebchatSettings key={this.id} enableUserInput={true} />
     ) : (
       <></>
     )

package/src/content-fields/flow-image.tsx

@@ -1,4 +1,5 @@
-import { type ActionRequest, Image } from '@botonic/react'
+import type { BotContext } from '@botonic/core'
+import { Image } from '@botonic/react'
 
 import { trackOneContent } from '../tracking'
 import { ContentFieldsBase } from './content-fields-base'
@@ -16,11 +17,16 @@ export class FlowImage extends ContentFieldsBase {
     return newImage
   }
 
-  async trackFlow(request: ActionRequest): Promise<void> {
-    await trackOneContent(request, this)
+  async trackFlow(botContext: BotContext): Promise<void> {
+    await trackOneContent(botContext, this)
   }
 
-  toBotonic(id: string): JSX.Element {
-    return <Image key={id} src={this.src} />
+  async processContent(botContext: BotContext): Promise<void> {
+    await this.trackFlow(botContext)
+    return
+  }
+
+  toBotonic(): JSX.Element {
+    return <Image key={this.id} src={this.src} />
   }
 }

package/src/content-fields/flow-knowledge-base.tsx

@@ -1,4 +1,5 @@
-import { type ActionRequest, Text } from '@botonic/react'
+import type { BotContext } from '@botonic/core'
+import { Text } from '@botonic/react'
 
 import { ContentFieldsBase } from './content-fields-base'
 import type { HtKnowledgeBaseNode } from './hubtype-fields'
@@ -30,19 +31,24 @@ export class FlowKnowledgeBase extends ContentFieldsBase {
   }
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  async trackFlow(_request: ActionRequest): Promise<void> {
+  async trackFlow(_botContext: BotContext): Promise<void> {
     // TODO: Review how we can track here the knowledge base event here.
     // We should store event args in an attribute of FlowKnowledgeBase
     // when knowledge base is resolved inside the flow builder action
   }
 
-  toBotonic(id: string, request: ActionRequest): JSX.Element {
+  async processContent(botContext: BotContext): Promise<void> {
+    await this.trackFlow(botContext)
+    return
+  }
+
+  toBotonic(botContext: BotContext): JSX.Element {
     return (
       <Text
-        key={id}
+        key={this.id}
         feedbackEnabled={this.feedbackEnabled}
         inferenceId={this.inferenceId}
-        botInteractionId={request.input.bot_interaction_id}
+        botInteractionId={botContext.input.bot_interaction_id}
       >
         {this.text}
       </Text>

package/src/content-fields/flow-queue-status-conditional.tsx

@@ -1,5 +1,8 @@
-import { EventAction, type EventConditionalQueueStatus } from '@botonic/core'
-import type { ActionRequest } from '@botonic/react'
+import {
+  type BotContext,
+  EventAction,
+  type EventConditionalQueueStatus,
+} from '@botonic/core'
 
 import { getArgumentsByLocale } from '../functions'
 import { HubtypeQueuesApi } from '../services/hubtype-queues-api'
@@ -99,9 +102,9 @@ export class FlowQueueStatusConditional extends ContentFieldsBase {
     return data.open ? QueueStatusResult.OPEN : QueueStatusResult.CLOSED
   }
 
-  async trackFlow(request: ActionRequest): Promise<void> {
+  async trackFlow(botContext: BotContext): Promise<void> {
     const { flowThreadId, flowId, flowName, flowNodeId, flowNodeContentId } =
-      getCommonFlowContentEventArgsForContentId(request, this.id)
+      getCommonFlowContentEventArgsForContentId(botContext, this.id)
     if (!this.conditionalResult?.result) {
       console.warn(
         `Tracking event for node ${this.code} but no conditional result found`
@@ -121,7 +124,12 @@ export class FlowQueueStatusConditional extends ContentFieldsBase {
       isAvailableAgent: this.isAvailableAgent,
     }
     const { action, ...eventArgs } = eventQueueStatusConditional
-    await trackEvent(request, action, eventArgs)
+    await trackEvent(botContext, action, eventArgs)
+  }
+
+  async processContent(botContext: BotContext): Promise<void> {
+    await this.trackFlow(botContext)
+    return
   }
 
   toBotonic(): JSX.Element {

package/src/content-fields/flow-rating.tsx

@@ -1,13 +1,8 @@
-import { isDev, isWebchat, isWhatsapp } from '@botonic/core'
-import {
-  type ActionRequest,
-  CustomRatingMessage,
-  Text,
-  WhatsappButtonList,
-} from '@botonic/react'
+import { type BotContext, isDev, isWebchat, isWhatsapp } from '@botonic/core'
+import { CustomRatingMessage, Text, WhatsappButtonList } from '@botonic/react'
 
-import { getFlowBuilderPlugin } from '../helpers'
 import { trackOneContent } from '../tracking'
+import { getFlowBuilderPlugin } from '../utils/get-flow-builder-plugin'
 import { ContentFieldsBase } from './content-fields-base'
 import { FlowButton } from './flow-button'
 import { type HtRatingNode, RatingType } from './hubtype-fields'
@@ -40,17 +35,22 @@ export class FlowRating extends ContentFieldsBase {
     return newRating
   }
 
-  async trackFlow(request: ActionRequest): Promise<void> {
-    await trackOneContent(request, this)
+  async trackFlow(botContext: BotContext): Promise<void> {
+    await trackOneContent(botContext, this)
   }
 
-  toBotonic(id: string, request: ActionRequest): JSX.Element {
-    const flowBuilderPlugin = getFlowBuilderPlugin(request.plugins)
+  async processContent(botContext: BotContext): Promise<void> {
+    await this.trackFlow(botContext)
+    return
+  }
+
+  toBotonic(botContext: BotContext): JSX.Element {
+    const flowBuilderPlugin = getFlowBuilderPlugin(botContext.plugins)
     const customRatingMessageEnabled =
       flowBuilderPlugin.customRatingMessageEnabled
-    const replacedText = this.replaceVariables(this.text, request)
+    const replacedText = this.replaceVariables(this.text, botContext)
 
-    if (isWhatsapp(request.session)) {
+    if (isWhatsapp(botContext.session)) {
       return (
         <WhatsappButtonList
           body={replacedText}
@@ -68,7 +68,7 @@ export class FlowRating extends ContentFieldsBase {
     }
 
     if (
-      (isWebchat(request.session) || isDev(request.session)) &&
+      (isWebchat(botContext.session) || isDev(botContext.session)) &&
       customRatingMessageEnabled
     ) {
       const payloads = this.buttons
@@ -88,7 +88,7 @@ export class FlowRating extends ContentFieldsBase {
     }
 
     return (
-      <Text key={id}>
+      <Text key={this.id}>
         {replacedText}
         {this.buttons.map((button, buttonIndex) =>
           button.renderButton(buttonIndex)

package/src/content-fields/flow-text.tsx

@@ -1,9 +1,10 @@
 import type {
+  BotContext,
   BotExecutorMessage,
   TextMessage,
   TextWithButtonsMessage,
 } from '@botonic/core'
-import { type ActionRequest, Text } from '@botonic/react'
+import { Text } from '@botonic/react'
 
 import type { FlowBuilderApi } from '../api'
 import { EMPTY_PAYLOAD, SOURCE_INFO_SEPARATOR } from '../constants'
@@ -34,10 +35,10 @@ export class FlowText extends ContentFieldsBase {
     return newText
   }
 
-  async trackFlow(request: ActionRequest): Promise<void> {
-    await trackOneContent(request, this)
+  async trackFlow(botContext: BotContext): Promise<void> {
+    await trackOneContent(botContext, this)
     for (const button of this.buttons) {
-      await button.trackFlow(request)
+      await button.trackFlow(botContext)
     }
   }
 
@@ -57,6 +58,7 @@ export class FlowText extends ContentFieldsBase {
             id: `${id}-button-${buttonIndex}`,
             text: button.text,
             url: button.url,
+            target: button.target,
             payload:
               button.payload ||
               `${EMPTY_PAYLOAD}${SOURCE_INFO_SEPARATOR}${buttonIndex}`,
@@ -67,10 +69,15 @@ export class FlowText extends ContentFieldsBase {
     )
   }
 
-  toBotonic(id: string, request: ActionRequest): JSX.Element {
-    const replacedText = this.replaceVariables(this.text, request)
+  async processContent(botContext: BotContext): Promise<void> {
+    await this.trackFlow(botContext)
+    return
+  }
+
+  toBotonic(botContext: BotContext): JSX.Element {
+    const replacedText = this.replaceVariables(this.text, botContext)
     return (
-      <Text key={id}>
+      <Text key={this.id}>
         {replacedText}
         {this.buttons.map((button, buttonIndex) =>
           button.renderButton(buttonIndex, this.buttonStyle)

package/src/content-fields/flow-video.tsx

@@ -1,4 +1,5 @@
-import { type ActionRequest, Video } from '@botonic/react'
+import type { BotContext } from '@botonic/core'
+import { Video } from '@botonic/react'
 
 import { trackOneContent } from '../tracking'
 import { ContentFieldsBase } from './content-fields-base'
@@ -16,11 +17,16 @@ export class FlowVideo extends ContentFieldsBase {
     return newVideo
   }
 
-  async trackFlow(request: ActionRequest): Promise<void> {
-    await trackOneContent(request, this)
+  async trackFlow(botContext: BotContext): Promise<void> {
+    await trackOneContent(botContext, this)
   }
 
-  toBotonic(id: string): JSX.Element {
-    return <Video key={id} src={this.src} />
+  async processContent(botContext: BotContext): Promise<void> {
+    await this.trackFlow(botContext)
+    return
+  }
+
+  toBotonic(): JSX.Element {
+    return <Video key={this.id} src={this.src} />
   }
 }

package/src/content-fields/flow-webview.tsx

@@ -1,5 +1,8 @@
-import { EventAction, type EventWebviewActionTriggered } from '@botonic/core'
-import type { ActionRequest } from '@botonic/react'
+import {
+  type BotContext,
+  EventAction,
+  type EventWebviewActionTriggered,
+} from '@botonic/core'
 
 import {
   getCommonFlowContentEventArgsForContentId,
@@ -25,9 +28,9 @@ export class FlowWebview extends ContentFieldsBase {
     return newWebview
   }
 
-  async trackFlow(request: ActionRequest): Promise<void> {
+  async trackFlow(botContext: BotContext): Promise<void> {
     const { flowThreadId, flowId, flowName, flowNodeId, flowNodeContentId } =
-      getCommonFlowContentEventArgsForContentId(request, this.id)
+      getCommonFlowContentEventArgsForContentId(botContext, this.id)
 
     const eventWebviewActionTriggered: EventWebviewActionTriggered = {
       action: EventAction.WebviewActionTriggered,
@@ -41,6 +44,10 @@ export class FlowWebview extends ContentFieldsBase {
       webviewName: this.webviewName,
     }
     const { action, ...eventArgs } = eventWebviewActionTriggered
-    await trackEvent(request, action, eventArgs)
+    await trackEvent(botContext, action, eventArgs)
+  }
+
+  async processContent(): Promise<void> {
+    return
   }
 }

package/src/content-fields/flow-whatsapp-cta-url-button.tsx

@@ -1,6 +1,5 @@
-import { isWhatsapp } from '@botonic/core'
+import { type BotContext, isWhatsapp } from '@botonic/core'
 import {
-  type ActionRequest,
   Button,
   Text,
   WhatsappCTAUrlButton,
@@ -115,14 +114,19 @@ export class FlowWhatsappCtaUrlButtonNode extends ContentFieldsBase {
     }
   }
 
-  async trackFlow(request: ActionRequest): Promise<void> {
-    await trackOneContent(request, this)
+  async trackFlow(botContext: BotContext): Promise<void> {
+    await trackOneContent(botContext, this)
   }
 
-  toBotonic(id: string, request: ActionRequest): JSX.Element {
-    const replacedText = this.replaceVariables(this.text, request)
+  async processContent(botContext: BotContext): Promise<void> {
+    await this.trackFlow(botContext)
+    return
+  }
+
+  toBotonic(botContext: BotContext): JSX.Element {
+    const replacedText = this.replaceVariables(this.text, botContext)
 
-    if (!isWhatsapp(request.session)) {
+    if (!isWhatsapp(botContext.session)) {
       return (
         <Text>
           {replacedText}
@@ -137,7 +141,7 @@ export class FlowWhatsappCtaUrlButtonNode extends ContentFieldsBase {
     ) {
       return (
         <WhatsappCTAUrlButton
-          key={id}
+          key={this.id}
           body={replacedText}
           headerType={this.headerType}
           headerImage={this.headerImage}
@@ -154,7 +158,7 @@ export class FlowWhatsappCtaUrlButtonNode extends ContentFieldsBase {
     ) {
       return (
         <WhatsappCTAUrlButton
-          key={id}
+          key={this.id}
           body={replacedText}
           headerType={this.headerType}
           headerVideo={this.headerVideo}
@@ -171,7 +175,7 @@ export class FlowWhatsappCtaUrlButtonNode extends ContentFieldsBase {
     ) {
       return (
         <WhatsappCTAUrlButton
-          key={id}
+          key={this.id}
           body={replacedText}
           headerType={this.headerType}
           headerDocument={this.headerDocument}
@@ -185,7 +189,7 @@ export class FlowWhatsappCtaUrlButtonNode extends ContentFieldsBase {
     if (this.headerType === WhatsappCTAUrlHeaderType.Text && this.header) {
       return (
         <WhatsappCTAUrlButton
-          key={id}
+          key={this.id}
           body={replacedText}
           header={this.header}
           headerType={this.headerType}
@@ -198,7 +202,7 @@ export class FlowWhatsappCtaUrlButtonNode extends ContentFieldsBase {
 
     return (
       <WhatsappCTAUrlButton
-        key={id}
+        key={this.id}
         body={replacedText}
         footer={this.footer}
         displayText={this.displayText}

package/src/content-fields/flow-whatsapp-template.tsx

@@ -1,6 +1,5 @@
-import { isWhatsapp } from '@botonic/core'
+import { type BotContext, isWhatsapp } from '@botonic/core'
 import {
-  type ActionRequest,
   Text,
   WhatsAppTemplateButtonSubType,
   WhatsAppTemplateComponentType,
@@ -15,8 +14,8 @@ import {
   type WhatsappTemplateVoiceCallButton,
 } from '@botonic/react'
 
-import { getFlowBuilderPlugin } from '../helpers'
 import { trackOneContent } from '../tracking'
+import { getFlowBuilderPlugin } from '../utils/get-flow-builder-plugin'
 import { ContentFieldsBase } from './content-fields-base'
 import type {
   HtButton,
@@ -81,7 +80,7 @@ export class FlowWhatsappTemplate extends ContentFieldsBase {
     whatsappTemplate: HtWhatsAppTemplate,
     headerVariables: HeaderVariables,
     locale: string,
-    request: ActionRequest
+    botContext: BotContext
   ): WhatsappTemplateComponentHeader | undefined {
     const headerComponent = whatsappTemplate.components.find(
       component => component.type === WhatsAppTemplateComponentType.HEADER
@@ -91,7 +90,7 @@ export class FlowWhatsappTemplate extends ContentFieldsBase {
       headerComponent &&
       headerComponent.format === WhatsAppTemplateParameterType.TEXT
     ) {
-      return this.createHeaderTextComponent(headerVariables, request)
+      return this.createHeaderTextComponent(headerVariables, botContext)
     }
 
     if (
@@ -113,12 +112,12 @@ export class FlowWhatsappTemplate extends ContentFieldsBase {
 
   private createHeaderTextComponent(
     headerVariables: HeaderVariables,
-    request: ActionRequest
+    botContext: BotContext
   ): WhatsappTemplateComponentHeader {
     return {
       type: WhatsAppTemplateComponentType.HEADER,
       parameters: Object.values(headerVariables.text || {}).map(value => {
-        const valueVariable = this.replaceVariables(value, request)
+        const valueVariable = this.replaceVariables(value, botContext)
         return {
           type: WhatsAppTemplateParameterType.TEXT,
           text: valueVariable,
@@ -163,15 +162,15 @@ export class FlowWhatsappTemplate extends ContentFieldsBase {
     }
   }
 
-  // TODO: To use named variables (contact_info_fields) we need to take it from request.session.user.contact_info, this only be able in toBotonic method
+  // TODO: To use named variables (contact_info_fields) we need to take it from botContext.session.user.contact_info, this only be able in toBotonic method
   private getBodyComponent(
     variableValues: Record<string, string>,
-    request: ActionRequest
+    botContext: BotContext
   ): WhatsappTemplateComponentBody {
     return {
       type: WhatsAppTemplateComponentType.BODY,
       parameters: Object.entries(variableValues).map(([key, value]) => {
-        const valueVariable = this.replaceVariables(value, request)
+        const valueVariable = this.replaceVariables(value, botContext)
         return {
           type: WhatsAppTemplateParameterType.TEXT,
           parameter_name: key,
@@ -185,7 +184,7 @@ export class FlowWhatsappTemplate extends ContentFieldsBase {
     whatsappTemplate: HtWhatsAppTemplate,
     buttonNodes: HtButton[],
     urlVariableValues: Record<string, string>,
-    request: ActionRequest
+    botContext: BotContext
   ): WhatsappTemplateComponentButtons | undefined {
     const htWhatsappTemplateButtons = whatsappTemplate.components.find(
       component => component.type === WhatsAppTemplateComponentType.BUTTONS
@@ -200,7 +199,7 @@ export class FlowWhatsappTemplate extends ContentFieldsBase {
             if (!urlParam) {
               return null
             }
-            return this.createUrlButtonComponent(index, urlParam, request)
+            return this.createUrlButtonComponent(index, urlParam, botContext)
           }
 
           if (button.type === WhatsAppTemplateButtonSubType.QUICK_REPLY) {
@@ -224,9 +223,9 @@ export class FlowWhatsappTemplate extends ContentFieldsBase {
   private createUrlButtonComponent(
     index: number,
     urlParam: string,
-    request: ActionRequest
+    botContext: BotContext
   ): WhatsappTemplateUrlButton {
-    const variableUrlParam = this.replaceVariables(urlParam, request)
+    const variableUrlParam = this.replaceVariables(urlParam, botContext)
     return {
       type: WhatsAppTemplateComponentType.BUTTON,
       sub_type: WhatsAppTemplateButtonSubType.URL,
@@ -270,34 +269,39 @@ export class FlowWhatsappTemplate extends ContentFieldsBase {
     }
   }
 
-  async trackFlow(request: ActionRequest): Promise<void> {
-    await trackOneContent(request, this)
+  async trackFlow(botContext: BotContext): Promise<void> {
+    await trackOneContent(botContext, this)
   }
 
-  toBotonic(id: string, request: ActionRequest): JSX.Element {
+  async processContent(botContext: BotContext): Promise<void> {
+    await this.trackFlow(botContext)
+    return
+  }
+
+  toBotonic(botContext: BotContext): JSX.Element {
     const templateName = this.htWhatsappTemplate.name
     const templateLanguage = this.htWhatsappTemplate.language
-    const body = this.getBodyComponent(this.variableValues, request)
-    const pluginFlowBuilder = getFlowBuilderPlugin(request.plugins)
+    const body = this.getBodyComponent(this.variableValues, botContext)
+    const pluginFlowBuilder = getFlowBuilderPlugin(botContext.plugins)
     const resolvedLocale = pluginFlowBuilder.cmsApi.getResolvedLocale()
 
     const header = this.getHeaderComponent(
       this.htWhatsappTemplate,
       this.headerVariables || ({} as HeaderVariables),
       resolvedLocale,
-      request
+      botContext
     )
     const buttons = this.getButtons(
       this.htWhatsappTemplate,
       this.buttons || [],
       this.urlVariableValues || {},
-      request
+      botContext
     )
 
-    if (isWhatsapp(request.session)) {
+    if (isWhatsapp(botContext.session)) {
       return (
         <WhatsappTemplate
-          key={id}
+          key={this.id}
           name={templateName}
           language={templateLanguage}
           header={header}
@@ -308,7 +312,7 @@ export class FlowWhatsappTemplate extends ContentFieldsBase {
     }
 
     return (
-      <Text key={id}>
+      <Text key={this.id}>
         {`WhatsApp Template: ${templateName} (${templateLanguage})`}
         {header && `${JSON.stringify(header, null, 2)}`}
         {body && `${JSON.stringify(body, null, 2)}`}

package/src/content-fields/whatsapp-button-list/flow-whatsapp-button-list-row.tsx

@@ -1,4 +1,4 @@
-import type { ActionRequest, WhatsappButtonListRowProps } from '@botonic/react'
+import type { WhatsappButtonListRowProps } from '@botonic/react'
 
 import type { FlowBuilderApi } from '../../api'
 import { SOURCE_INFO_SEPARATOR } from '../../constants'
@@ -29,12 +29,15 @@ export class FlowWhatsappButtonListRow extends ContentFieldsBase {
     return newRow
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  async trackFlow(_request: ActionRequest): Promise<void> {
-    // Not apply for this content, because it is a child of the FlowWhatsappButtonList content
+  async trackFlow(): Promise<void> {
+    return
   }
 
-  toBotonic(
+  async processContent(): Promise<void> {
+    return
+  }
+
+  renderRow(
     rowIndex: number,
     sectionIndex: number
   ): WhatsappButtonListRowProps | undefined {