@botonic/plugin-flow-builder 0.42.4 → 0.43.0-alpha.0

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

@@ -0,0 +1,281 @@
+import { isWhatsapp } from '@botonic/core'
+import {
+  ActionRequest,
+  Text,
+  WhatsappTemplate,
+  WhatsappTemplateButton,
+  WhatsAppTemplateButtonSubType,
+  WhatsappTemplateComponentBody,
+  WhatsappTemplateComponentButtons,
+  WhatsappTemplateComponentHeader,
+  WhatsAppTemplateComponentType,
+  WhatsAppTemplateParameterType,
+  WhatsappTemplateQuickReplyButton,
+  WhatsappTemplateUrlButton,
+  WhatsappTemplateVoiceCallButton,
+} from '@botonic/react'
+import React from 'react'
+
+import { getFlowBuilderPlugin } from '../helpers'
+import { trackOneContent } from '../tracking'
+import { ContentFieldsBase } from './content-fields-base'
+import {
+  HtButton,
+  HtMediaFileLocale,
+  HtWhatsAppTemplate,
+  HtWhatsAppTemplateButtonsComponent,
+  HtWhatsAppTemplateHeaderComponent,
+  HtWhatsappTemplateNode,
+} from './hubtype-fields'
+
+interface HeaderVariables {
+  type: WhatsAppTemplateParameterType
+  text?: Record<string, string>
+  media?: HtMediaFileLocale[]
+}
+
+export class FlowWhatsappTemplate extends ContentFieldsBase {
+  public htWhatsappTemplate: HtWhatsAppTemplate
+  public variableValues: Record<string, string> = {}
+  public headerVariables?: HeaderVariables
+  public buttons?: HtButton[]
+  public urlVariableValues?: Record<string, string>
+
+  static fromHubtypeCMS(
+    component: HtWhatsappTemplateNode
+  ): FlowWhatsappTemplate {
+    const whatsappTemplate = new FlowWhatsappTemplate(component.id)
+    whatsappTemplate.code = component.code
+    whatsappTemplate.htWhatsappTemplate = component.content.template
+    whatsappTemplate.headerVariables = component.content.header_variables
+    whatsappTemplate.variableValues = component.content.variable_values
+    whatsappTemplate.buttons = component.content.buttons
+    whatsappTemplate.urlVariableValues = component.content.url_variable_values
+
+    whatsappTemplate.followUp = component.follow_up
+
+    return whatsappTemplate
+  }
+
+  private getHeaderComponent(
+    whatsappTemplate: HtWhatsAppTemplate,
+    headerVariables: HeaderVariables,
+    locale: string,
+    request: ActionRequest
+  ): WhatsappTemplateComponentHeader | undefined {
+    const headerComponent = whatsappTemplate.components.find(
+      component => component.type === WhatsAppTemplateComponentType.HEADER
+    ) as HtWhatsAppTemplateHeaderComponent | undefined
+
+    if (
+      headerComponent &&
+      headerComponent.format === WhatsAppTemplateParameterType.TEXT
+    ) {
+      return this.createHeaderTextComponent(headerVariables, request)
+    }
+
+    if (
+      headerComponent &&
+      headerComponent.format === WhatsAppTemplateParameterType.IMAGE
+    ) {
+      return this.createHeaderImageComponent(headerVariables, locale)
+    }
+
+    return undefined
+  }
+
+  private createHeaderTextComponent(
+    headerVariables: HeaderVariables,
+    request: ActionRequest
+  ): WhatsappTemplateComponentHeader {
+    return {
+      type: WhatsAppTemplateComponentType.HEADER,
+      parameters: Object.values(headerVariables.text || {}).map(value => {
+        const valueVariable = this.replaceVariables(value, request)
+        return {
+          type: WhatsAppTemplateParameterType.TEXT,
+          text: valueVariable,
+        }
+      }),
+    }
+  }
+
+  private createHeaderImageComponent(
+    headerVariables: HeaderVariables,
+    locale: string
+  ): WhatsappTemplateComponentHeader {
+    return {
+      type: WhatsAppTemplateComponentType.HEADER,
+      parameters: [
+        {
+          type: WhatsAppTemplateParameterType.IMAGE,
+          image: {
+            link:
+              headerVariables.media?.find(m => m.locale === locale)?.file || '',
+          },
+        },
+      ],
+    }
+  }
+
+  // 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
+  private getBodyComponent(
+    variableValues: Record<string, string>,
+    request: ActionRequest
+  ): WhatsappTemplateComponentBody {
+    return {
+      type: WhatsAppTemplateComponentType.BODY,
+      parameters: Object.entries(variableValues).map(([key, value]) => {
+        const valueVariable = this.replaceVariables(value, request)
+        return {
+          type: WhatsAppTemplateParameterType.TEXT,
+          parameter_name: key,
+          text: valueVariable,
+        }
+      }),
+    }
+  }
+
+  private getButtons(
+    whatsappTemplate: HtWhatsAppTemplate,
+    buttonNodes: HtButton[],
+    urlVariableValues: Record<string, string>,
+    request: ActionRequest
+  ): WhatsappTemplateComponentButtons | undefined {
+    const htWhatsappTemplateButtons = whatsappTemplate.components.find(
+      component => component.type === WhatsAppTemplateComponentType.BUTTONS
+    ) as HtWhatsAppTemplateButtonsComponent | undefined
+
+    if (htWhatsappTemplateButtons) {
+      const buttons = htWhatsappTemplateButtons.buttons
+        .map((button, index) => {
+          if (button.type === WhatsAppTemplateButtonSubType.URL) {
+            const urlParam: string | undefined =
+              urlVariableValues?.[String(index)]
+            if (!urlParam) {
+              return null
+            }
+            return this.createUrlButtonComponent(index, urlParam, request)
+          }
+
+          if (button.type === WhatsAppTemplateButtonSubType.QUICK_REPLY) {
+            const payload = buttonNodes[index].target?.id || ''
+            return this.createQuickReplyButtonComponent(index, payload)
+          }
+
+          return this.createVoiceCallButtonComponent(index)
+        })
+        .filter(button => button !== null)
+
+      return {
+        type: WhatsAppTemplateComponentType.BUTTONS,
+        buttons: buttons as WhatsappTemplateButton[],
+      }
+    }
+
+    return undefined
+  }
+
+  private createUrlButtonComponent(
+    index: number,
+    urlParam: string,
+    request: ActionRequest
+  ): WhatsappTemplateUrlButton {
+    const variableUrlParam = this.replaceVariables(urlParam, request)
+    return {
+      type: WhatsAppTemplateComponentType.BUTTON,
+      sub_type: WhatsAppTemplateButtonSubType.URL,
+      index: index,
+      parameters: urlParam
+        ? [
+            {
+              type: WhatsAppTemplateParameterType.TEXT,
+              text: variableUrlParam,
+            },
+          ]
+        : [],
+    }
+  }
+
+  private createQuickReplyButtonComponent(
+    index: number,
+    payload: string
+  ): WhatsappTemplateQuickReplyButton {
+    return {
+      type: WhatsAppTemplateComponentType.BUTTON,
+      sub_type: WhatsAppTemplateButtonSubType.QUICK_REPLY,
+      index: index,
+      parameters: [
+        {
+          type: WhatsAppTemplateParameterType.PAYLOAD,
+          payload: payload,
+        },
+      ],
+    }
+  }
+
+  private createVoiceCallButtonComponent(
+    index: number
+  ): WhatsappTemplateVoiceCallButton {
+    return {
+      type: WhatsAppTemplateComponentType.BUTTON,
+      sub_type: WhatsAppTemplateButtonSubType.VOICE_CALL,
+      index: index,
+      parameters: [],
+    }
+  }
+
+  async trackFlow(request: ActionRequest): Promise<void> {
+    await trackOneContent(request, this)
+  }
+
+  toBotonic(id: string, request: ActionRequest): 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 resolvedLocale = pluginFlowBuilder.cmsApi.getResolvedLocale()
+
+    const header = this.getHeaderComponent(
+      this.htWhatsappTemplate,
+      this.headerVariables || ({} as HeaderVariables),
+      resolvedLocale,
+      request
+    )
+    const buttons = this.getButtons(
+      this.htWhatsappTemplate,
+      this.buttons || [],
+      this.urlVariableValues || {},
+      request
+    )
+
+    console.log('toBotonic templateName', templateName)
+    console.log('toBotonic templateLanguage', templateLanguage)
+    console.log('toBotonic resolvedLocale', resolvedLocale)
+    console.log('toBotonic header', JSON.stringify(header, null, 2))
+    console.log('toBotonic body', JSON.stringify(body, null, 2))
+    console.log('toBotonic buttons', JSON.stringify(buttons, null, 2))
+
+    if (isWhatsapp(request.session)) {
+      return (
+        <WhatsappTemplate
+          key={id}
+          name={templateName}
+          language={templateLanguage}
+          header={header}
+          body={body}
+          buttons={buttons}
+        />
+      )
+    }
+
+    return (
+      <Text key={id}>
+        {`WhatsApp Template: ${templateName} (${templateLanguage})`}
+        {header && `${JSON.stringify(header, null, 2)}`}
+        {body && `${JSON.stringify(body, null, 2)}`}
+        {buttons && `${JSON.stringify(buttons, null, 2)}`}
+      </Text>
+    )
+  }
+}

package/src/content-fields/hubtype-fields/common.ts

@@ -13,6 +13,7 @@ export interface HtFlowBuilderData {
   nodes: HtNodeComponent[]
   flows: HtFlows[]
   webviews: HtFlowWebview[]
+  campaigns: HtCampaign[]
 }
 
 export interface HtFlows {
@@ -27,6 +28,12 @@ export interface HtFlowWebview {
   component_name: string
 }
 
+export interface HtCampaign {
+  id: string
+  name: string
+  start_node_id: string
+}
+
 export interface HtNodeLink {
   id: string
   type: HtNodeWithContentType | HtNodeWithoutContentType

package/src/content-fields/hubtype-fields/index.ts

@@ -20,3 +20,4 @@ export * from './video'
 export * from './webview'
 export * from './whatsapp-button-list'
 export * from './whatsapp-cta-url-button'
+export * from './whatsapp-template'

package/src/content-fields/hubtype-fields/node-types.ts

@@ -10,6 +10,7 @@ export enum HtNodeWithContentType {
   VIDEO = 'video',
   WHATSAPP_BUTTON_LIST = 'whatsapp-button-list',
   WHATSAPP_CTA_URL_BUTTON = 'whatsapp-cta-url-button',
+  WHATSAPP_TEMPLATE = 'whatsapp-template',
   KNOWLEDGE_BASE = 'knowledge-base',
   BOT_ACTION = 'bot-action',
   AI_AGENT = 'ai-agent',

package/src/content-fields/hubtype-fields/nodes.ts

@@ -21,6 +21,7 @@ import { HtVideoNode } from './video'
 import { HtWebviewNode } from './webview'
 import { HtWhatsappButtonListNode } from './whatsapp-button-list'
 import { HtWhatsappCTAUrlButtonNode } from './whatsapp-cta-url-button'
+import { HtWhatsappTemplateNode } from './whatsapp-template'
 
 export type HtNodeWithContent =
   | HtTextNode
@@ -40,6 +41,7 @@ export type HtNodeWithContent =
   | HtRatingNode
   | HtWebviewNode
   | HtGoToFlow
+  | HtWhatsappTemplateNode
 // | HtChannelConditionalNode
 // | HtCountryConditionalNode
 // | HtCustomConditionalNode

package/src/content-fields/hubtype-fields/whatsapp-template.ts

@@ -0,0 +1,84 @@
+import {
+  WhatsAppTemplateButtonSubType,
+  WhatsAppTemplateComponentType,
+  WhatsAppTemplateParameterType,
+} from '@botonic/react'
+
+import { HtButton } from './button'
+import { HtBaseNode, HtMediaFileLocale } from './common'
+import { HtNodeWithContentType } from './node-types'
+
+type HtWhatsAppTemplateButton =
+  | {
+      type: WhatsAppTemplateButtonSubType.URL
+      text: string
+      url?: string
+      index: number
+    }
+  | {
+      type: WhatsAppTemplateButtonSubType.QUICK_REPLY
+      text: string
+      id: string
+      index: number
+    }
+  | {
+      type: WhatsAppTemplateButtonSubType.PHONE_NUMBER
+      text: string
+      phone_number: string
+      index: number
+    }
+
+export interface HtWhatsAppTemplateHeaderComponent {
+  type: WhatsAppTemplateComponentType.HEADER
+  format:
+    | WhatsAppTemplateParameterType.TEXT
+    | WhatsAppTemplateParameterType.IMAGE
+  text?: string
+  image?: { link: string }
+}
+
+export interface HtWhatsAppTemplateBodyComponent {
+  type: WhatsAppTemplateComponentType.BODY
+  text: string
+}
+
+export interface HtWhatsAppTemplateFooterComponent {
+  type: WhatsAppTemplateComponentType.FOOTER
+  text: string
+}
+
+export interface HtWhatsAppTemplateButtonsComponent {
+  type: WhatsAppTemplateComponentType.BUTTONS
+  buttons: HtWhatsAppTemplateButton[]
+}
+export type HtWhatsAppTemplateComponent =
+  | HtWhatsAppTemplateHeaderComponent
+  | HtWhatsAppTemplateBodyComponent
+  | HtWhatsAppTemplateFooterComponent
+  | HtWhatsAppTemplateButtonsComponent
+
+export interface HtWhatsAppTemplate {
+  id: string
+  name: string
+  language: string
+  status: string
+  category: string
+  components: HtWhatsAppTemplateComponent[]
+  namespace: string
+  parameter_format: string
+}
+export interface HtWhatsappTemplateNode extends HtBaseNode {
+  type: HtNodeWithContentType.WHATSAPP_TEMPLATE
+  content: {
+    template: HtWhatsAppTemplate
+    header_variables?: {
+      type: WhatsAppTemplateParameterType
+      text?: Record<string, string>
+      media?: HtMediaFileLocale[]
+    }
+    variable_values: Record<string, string>
+
+    buttons: HtButton[]
+    url_variable_values?: Record<string, string>
+  }
+}

package/src/content-fields/index.ts

@@ -16,6 +16,7 @@ import { FlowRating } from './flow-rating'
 import { FlowText } from './flow-text'
 import { FlowVideo } from './flow-video'
 import { FlowWhatsappCtaUrlButtonNode } from './flow-whatsapp-cta-url-button'
+import { FlowWhatsappTemplate } from './flow-whatsapp-template'
 import { FlowWhatsappButtonList } from './whatsapp-button-list/flow-whatsapp-button-list'
 
 export { ContentFieldsBase } from './content-fields-base'
@@ -38,6 +39,7 @@ export {
   FlowVideo,
   FlowWhatsappButtonList,
   FlowWhatsappCtaUrlButtonNode,
+  FlowWhatsappTemplate,
 }
 
 export type FlowContent =
@@ -47,6 +49,7 @@ export type FlowContent =
   | FlowVideo
   | FlowWhatsappButtonList
   | FlowWhatsappCtaUrlButtonNode
+  | FlowWhatsappTemplate
   | FlowHandoff
   | FlowKnowledgeBase
   | FlowBotAction

package/src/flow-factory.ts

@@ -19,6 +19,7 @@ import {
   FlowVideo,
   FlowWhatsappButtonList,
   FlowWhatsappCtaUrlButtonNode,
+  FlowWhatsappTemplate,
 } from './content-fields'
 import {
   HtFunctionNode,
@@ -90,6 +91,9 @@ export class FlowFactory {
       case HtNodeWithContentType.GO_TO_FLOW:
         return FlowGoToFlow.fromHubtypeCMS(hubtypeContent, this.cmsApi)
 
+      case HtNodeWithContentType.WHATSAPP_TEMPLATE:
+        return FlowWhatsappTemplate.fromHubtypeCMS(hubtypeContent)
+
       default:
         return undefined
     }